/*
  Hero: titular dominante.

  Una sola idea manda la pantalla, "El talento no es un recurso", y la
  consecuencia viene debajo con menos peso. La etiqueta de arriba sitúa el
  negocio en una línea, sin robarle protagonismo al titular.
*/

/* Etiqueta: sitúa la categoría antes de que empiece a leer. */
.hero-label {
  display: block;
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 600;
  color: var(--oro);
  margin-bottom: 1.1rem;
}

/* El titular ya no compite con nada: queda en una sola línea de idea. */
.hero-title {
  margin-block: 0 1rem;
}

/*
  Segunda frase: sigue en Cormorant para que se lea como parte del titular,
  pero a menos de la mitad de tamaño para que la jerarquía sea evidente.
*/
.hero-consecuencia {
  font-family: var(--font-display);
  font-weight: 500;
  /* Antes caia a menos de la mitad del titular y se leia como una nota al
     pie. Ahora queda un peldano por debajo, no dos: el titular sigue
     mandando pero la frase se entiende como parte de la misma idea. */
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.18;
  color: var(--cream);
  max-width: 30ch;
  margin: 0 0 2.2rem;
  text-wrap: balance;
}
.hero-consecuencia em {
  font-style: italic;
  font-weight: 600;
  color: #D3AE37;
}

@media (max-width: 1024px) {
  /* Tablet: el titular baja, asi que la frase baja con el para que la
     distancia entre los dos se mantenga. */
  .hero-consecuencia { font-size: clamp(1.6rem, 4vw, 2.3rem); max-width: 26ch; }
}

@media (max-width: 719px) {
  .hero-label { font-size: .64rem; margin-bottom: .9rem; }
  .hero-title { margin-bottom: .75rem; }
  .hero-consecuencia {
    font-size: clamp(1.45rem, 6.4vw, 1.9rem);
    max-width: 20ch;
    margin-bottom: 1.8rem;
  }
}


/* ---------- Composición del hero ---------- */
/*
  El bloque del hero medía 800px y se centraba dentro del contenedor, así que
  quedaban más de 300px vacíos a la izquierda y el titular se metía encima de
  la persona de la foto. Ocupando el ancho disponible, el texto arranca donde
  arrancan las demás secciones y deja la mitad derecha a la imagen.
*/
.hero-inner {
  width: 100%;
}

.hero-content {
  /* Más estrecho: las líneas cortan antes y el texto no invade la foto. */
  max-width: 620px;
}

.hero-title {
  /* Algo menor: gana presencia por posición y aire, no por tamaño. */
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
}

.hero-consecuencia {
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  max-width: 26ch;
}

@media (max-width: 1024px) {
  .hero-content { max-width: 560px; }
  .hero-consecuencia { font-size: clamp(1.4rem, 3.4vw, 2rem); }
}

@media (max-width: 719px) {
  /* En el teléfono no hay foto que respetar a la derecha: el texto usa todo. */
  .hero-content { max-width: 100%; }
  .hero-title { font-size: clamp(2rem, 8.6vw, 2.6rem); }
  .hero-consecuencia { font-size: clamp(1.25rem, 5.6vw, 1.6rem); max-width: 22ch; }
}