/* ============================================================
   FUNDACIÓN BANÚS · LANDING
   Solo maquetación de esta página. Ni un color ni un cuerpo se
   definen aquí: todo sale de los tokens del sistema.
   ============================================================ */

/* ---------- Hero ----------
   La maqueta pide tres cosas a la vez:
     · el rótulo cruzando casi todo el ancho,
     · el texto a la izquierda alineado con el margen,
     · la fotografía sangrando hasta el borde derecho.

   Por eso el hero lleva padding solo a la izquierda: la segunda columna
   llega limpia hasta el filo del viewport sin trucos de ancho negativo.
*/
.hero {
  display: grid;
  /* La fotografía manda: se lleva claramente más de la mitad del ancho. */
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  grid-template-areas:
    "rotulo rotulo"
    "texto  foto";
  column-gap: var(--space-xl);
  align-items: center;
  background: var(--surface);
  padding-left: var(--container-pad);
  padding-top: var(--seccion-y);
}

.hero__rotulo {
  grid-area: rotulo;
  padding-bottom: var(--space-2xl);
  padding-right: var(--container-pad);
  /* El tracking deja un hueco fantasma tras la última letra; lo comemos
     para que el rótulo alinee de verdad con el texto de abajo. */
  text-indent: 0;
}

/* La columna de texto estira hasta igualar la altura de la fila, que la
   marca la fotografía por ser el elemento más alto. Dentro de esa altura
   el contenido —del lema al botón— se centra en bloque, de modo que el
   texto y la foto comparten eje vertical y arrancan y terminan a la par. */
.hero__texto {
  grid-area: texto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-lg);
}

/* El lema es la voz editorial: manda sobre el resto de la columna.

   Los <br> del HTML fijan el corte en tres líneas del briefing
   ("Cultura, talento y / memoria en la / Costa del Sol"). Para que ese
   corte se respete, la línea más larga tiene que caber en la columna:
   al cuerpo de --text-display pedía 456px contra los 403px disponibles
   y partía en cuatro. Un punto por debajo entra con holgura y deja que
   la fotografía conserve su ancho. */
.hero__lema {
  color: var(--texto);
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
}

.hero__entrada {
  font-size: var(--text-lead);
  font-weight: var(--fw-extralight);
  line-height: var(--lh-lead);
  color: var(--texto-tenue);
  max-width: 34ch;
  margin: 0;
}

/* "Puerto Banús" en rosa. A este cuerpo (--text-lead, ≥28px) el rosa
   Banús entra como texto grande y cumple AA con 4.45:1. Bajarlo a cuerpo
   normal lo dejaría fuera de norma: ahí tocaría --acento-texto. */
.hero__entrada .destacado {
  color: var(--acento-display);
}

.hero__figura {
  grid-area: foto;
  margin: 0;
  align-self: center;
}

/* La foto entra entera, con su proporción: nada de object-fit que la
   recorte. Si sobresale en altura respecto al texto, es la foto la que
   define la altura del hero y el texto se centra a su costado. */
.hero__figura img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Tableta y móvil ----------
   La sangre a la derecha deja de tener sentido cuando no hay dos
   columnas: la foto pasa a banda completa.

   Y va ENTRE el rótulo y el lema, no al final. Con la foto abajo del
   todo quedaba a 717px de scroll —medido— y prácticamente nadie la veía:
   el mejor argumento de la página vivía donde no se llega. Colocada aquí
   asoma en la primera pantalla, sin animación, sin peaje de scroll y sin
   depender de que el navegador soporte nada.

   El HTML no cambia: la rejilla reordena las áreas, así que el orden de
   lectura y el de tabulación siguen siendo rótulo → texto → foto, que es
   el correcto para quien usa lector de pantalla.
*/
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rotulo"
      "foto"
      "texto";
    padding-left: 0;
    /* Sin row-gap general: cada costura pide una distancia distinta.
       El rótulo respira sobre la foto, pero el texto va pegado a ella
       porque la explica — son una unidad, no dos bloques sueltos. */
    row-gap: 0;
    /* El hero terminaba justo donde acaba el botón y este chocaba con el
       arena de la Agenda. Este es el aire que los separa. */
    padding-bottom: var(--seccion-y);
  }

  .hero__rotulo,
  .hero__texto {
    padding-inline: var(--container-pad);
  }

  .hero__rotulo { padding-bottom: var(--space-xl); }

  /* Apilado ya no hay foto al costado con la que igualar altura. */
  .hero__texto {
    align-self: auto;
    justify-content: flex-start;
    gap: var(--space-md);
    padding-top: var(--space-lg);
  }

  .hero__lema,
  .hero__entrada {
    max-width: var(--medida);
  }

  /* A 375px el botón medía 290px: el 77% del ancho de la pantalla, casi
     una barra. El relleno lateral de escritorio (40px por lado) y el
     tracking amplio son demasiados aquí. */
  .hero__texto .boton {
    padding-inline: var(--space-md);
    letter-spacing: var(--track-rotulo);
    font-size: var(--text-micro);
  }

  /* También en banda completa la foto entra entera, sin recorte. */
}

/* Aquí vivía un ajuste del menú para 560px, de cuando era una lista
   suelta que se apilaba sola. Con el desplegable ya no hace falta: por
   debajo de 900px solo hay casa y botón en la barra, y de colocarlos se
   encarga components.css. */