/* =========================================================
   LAYOUT BASE
   ========================================================= */
.container {
  width: 100%;
  padding-inline: var(--side-margin); /* margen lateral en %, no en px */
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

p { font-size: var(--fs-body); }
.text-lg { font-size: var(--fs-body-lg); }
.text-thin { font-weight: var(--fw-thin); }

/* =========================================================
   SECCIONES A PANTALLA COMPLETA (100vh)
   ---------------------------------------------------------
   Cada sección define su propio fondo. El cambio de color entre
   secciones es DRÁSTICO (corte neto, sin desvanecimiento): no hay
   ningún degradado de transición al pie. Si en el futuro se quisiera
   volver a un cambio suave, se agrega acá un ::after con un
   linear-gradient hacia el color de la sección siguiente.
   ========================================================= */
.section-full {
  position: relative;

  /* ALTO: un viewport MENOS el header, no un viewport completo.
     Con scroll snap, la sección aterriza con su borde superior justo
     debajo del header (por el scroll-margin-top de más abajo). Si midiera
     100vh, sus últimos --header-h px quedarían siempre fuera de la
     pantalla. Restándolo, la sección entra exacta en el espacio visible.
     Es la versión calculada del 85vh/15vh: acá el número sale del token
     del header en vez de estar estimado. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h)); /* evita saltos por la barra de Safari/Chrome mobile */

  /* Cada sección es una parada del scroll. */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--color-text);

  /* El header es fixed y flota encima, así que reservamos su alto acá:
     la sección sigue midiendo 100vh, pero su contenido se centra en el
     espacio LIBRE de abajo y nunca queda tapado.
     Se hace con el token --header-h (que sale del alto del logo + su
     padding) y no con un porcentaje tipo 85/15: el header tiene que medir
     lo que mide su contenido, no una fracción de la pantalla, o en una
     notebook baja queda gigante y en un celular horizontal no entra ni
     el logo. */
  /* Solo el bloque de la etiqueta: el alto del header ya está descontado
     del min-height, no hay que reservarlo dos veces. El contenido se
     centra en lo que queda debajo de la etiqueta. */
  padding-top: var(--label-block);

  /* Y esto es para los saltos desde el menú: sin scroll-margin el borde
     superior de la sección queda debajo del header al aterrizar. */
  scroll-margin-top: var(--header-h);
}

/* ---------------------------------------------------------
   MOBILE: el alto lo manda el contenido
   En celular no forzamos que todo entre en una pantalla (el scroll es
   continuo, no de a pantallas): la seccion crece lo que haga falta y lo
   que se cuida es el AIRE. El padding de abajo es igual al de arriba
   (--label-block), asi la distancia entre el final del contenido y la
   seccion siguiente es la misma que entre el inicio de la seccion y su
   contenido.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .section-full {
    /* 80px arriba y 80px abajo: --label-offset es la distancia del borde
       superior a la etiqueta (5rem en mobile) y la misma va abajo, entre
       el ultimo contenido y el corte con la seccion siguiente. */
    padding-bottom: var(--label-offset);
  }
}

/* Secciones con fondo oscuro/saturado (colores 4 a 8 de la paleta) */
.section--light-text {
  --color-text: var(--color-text-light);
}

/* =========================================================
   GRID DE UNA O DOS COLUMNAS — gap fijo en todo el sitio
   ========================================================= */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-columns);
}
@media (min-width: 1025px) {
  .grid-2col {
    grid-template-columns: 1fr 1fr;
  }
  .grid-2col.is-asymmetric {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* =========================================================
   ETIQUETA DE SECCIÓN
   El "▪ Nosotros" que encabeza cada sección. Mismo lenguaje de cuadrado
   que los botones y los items del menú.

   Va posicionada en absoluto contra la SECCIÓN (no contra el contenido),
   a una distancia fija del header. Así queda exactamente en el mismo
   lugar en todas las secciones, sin depender del alto del contenido de
   cada una. Por eso en el HTML es hija directa de la <section> y no va
   dentro del .container.
   ========================================================= */
.section-label {
  position: absolute;
  /* Solo el offset, SIN sumar --header-h. El alto del header ya está
     contemplado en el scroll-margin-top de .section-full: al llegar a una
     sección, su borde superior queda justo debajo del header, así que
     sumarlo otra vez acá lo contaba dos veces y tiraba la etiqueta 88px
     más abajo de lo que corresponde. */
  top: var(--label-offset);
  left: var(--side-margin);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: var(--color-5);
  font-size: 20px;
  line-height: 24px;
  font-weight: var(--fw-regular);
}
.section-label::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  flex: 0 0 auto;
  background: currentColor;
}

/* Texto solo para lectores de pantalla (etiquetas de botones con ícono). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   ANIMACIÓN DE ENTRADA AL APARECER EN PANTALLA
   Misma curva y mismo gesto que la entrada del hero, pero disparada
   cuando el elemento entra en la pantalla (lo hace initReveal() en
   js/main.js con un IntersectionObserver). Se usa así:

       <h2 class="algo reveal">…</h2>
       <p class="algo reveal" style="--reveal-delay: 0.12s">…</p>

   Se hace con JS y no con animation-timeline: view(), que sería más
   elegante pero todavía no tiene soporte parejo entre navegadores.
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s);
}
.reveal.is-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}