/* ========================================
   Home (landing) — page-specific styles only.
   Shared section + carousel styles live in base.css.
   ======================================== */

/* ============================================================
   Layout: scrollytell de 2 columnas. Las 3 copies (page-section)
   se apilan en la columna izquierda; la imagen base con todos los
   overlays vive en .home-stage__art (col derecha) y queda sticky
   mientras el texto scrollea. Esto reemplaza la antigua maqueta de
   3 secciones independientes con su propia ilustración cada una.
   ============================================================ */
.home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: var(--space-12);
    row-gap: var(--space-8);
    padding-top: var(--space-8);
    padding-bottom: var(--space-4);
    /* Offset compartido para alinear la imagen sticky con el texto
       de cada copy: la imagen queda centrada verticalmente en el
       viewport (top: var(--image-offset)) y el padding-top de las
       copies de sec2/sec3 empuja el texto hasta esa misma altura,
       así no hay desfase entre imagen y texto al scrollear. */
    --image-offset: calc((100vh - 60vh) / 2);
}

/* Cada copy ocupa su propia fila en la col 1. Anulamos el grid
   interno de .page-section (que partía en copy/art) — acá ya no
   hay art por sección, todo es un único stage compartido.

   Todas las copies son 60vh con texto al top (flex-start) para
   minimizar el aire vertical entre bloques. El timing de la
   animación está desacoplado de la altura de las secciones gracias
   al timeline único --t (publicado por home.js usando scrollY
   absoluto, no la posición de sec2). */
.home > .page-section {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 60vh;
}

/* La primera copy es el hero del sitio: mismo alto que las demás,
   solo agregamos padding-top para que el título respire respecto
   al navbar. */
.home > .page-section[data-stage-copy="primera"] {
    padding-top: var(--space-8);
}

/* Sec2 y sec3 son más cortas que sec1 para igualar el aire visual
   entre párrafos: sec1 (título + párrafo largo, ~37vh de contenido)
   en 60vh deja ~23vh de aire abajo. Sec2 (rule + carousel + dots,
   ~25vh) en 50vh deja ~25vh. Sec3 (rule + carousel + dots, ~24vh)
   en 40vh deja ~16vh, que sumado al padding-bottom reducido de
   .home + el footer queda equivalente. Sec3 es más corta porque
   abajo no hay otra section sino el footer (que aporta su propia
   altura/aire). */
.home > .page-section[data-stage-copy="segunda"] {
    min-height: 50vh;
}

.home > .page-section[data-stage-copy="tercera"] {
    min-height: 40vh;
}

.home > .page-section:first-child .page-hero__title {
    font-size: 64px;
    line-height: 1.05;
}

@media (max-width: 1024px) {
    .home > .page-section:first-child .page-hero__title {
        font-size: 48px;
    }
}

/* Stage art: cubre las 3 filas en la col 2 y se queda sticky mientras
   el usuario scrollea las copies. Es el contenedor único para la
   imagen base (cs-biosfera-2) + todos los overlays de la antigua 2da
   y 3ra animada, coordinados por un único timeline --t.

   --t es 0 al inicio del stage (sec2 a punto de entrar por abajo) y
   1 al final (sec3 settled arriba). El JS lo publica acá; el CSS lo
   remapea en sub-fases (cascada in / visible / fade out / dead zone /
   tercera in) que están definidas más abajo. Eso desacopla el timing
   de animación de las alturas reales de las secciones. */
.home > .home-stage__art {
    grid-column: 2;
    grid-row: 1 / span 3;
    position: sticky;
    /* Sticky a --image-offset (≈20vh) → imagen centrada verticalmente
       con espacio arriba y abajo durante sec1/sec2. Cuando el usuario
       llega a sec3 el sticky se LIBERA por sí solo (el "containing
       block" del grid se acaba: necesita 80vh debajo del scroll, sec3
       solo aporta 60vh) y la imagen se desliza suavemente hasta y=0,
       quedando alineada con el texto de sec3 (también al top). Es por
       eso que NO necesitamos padding-top forzado en sec2/sec3. */
    top: var(--image-offset);
    align-self: start;
    width: 100%;
    aspect-ratio: 930 / 672;
    overflow: visible;
    --t: 0;
    /* Remaps por sub-fase del timeline. Ventanas visibles más
       anchas para tolerar diferentes alturas de página entre
       desktop y tablet (la wrap del texto cambia maxScroll y por
       lo tanto el "t" en el que cae cada posición de lectura):
         sec1 reading      ≈ t=0.00..0.15 (sin overlays)
         segunda cascade in: t=0.15..0.30 (cascada completa ~t=0.30)
         segunda visible   : t=0.30..0.70 (cubre lectura sec2 en
                                           desktop ~t=0.5 y tablet
                                           ~t=0.5..0.7)
         segunda fade out  : t=0.70..0.80 (cascada inversa)
         dead zone         : t=0.80..0.82
         tercera cascade in: t=0.82..0.92 (cascada completa ~t=0.92)
         tercera visible   : t=0.92..1.00 (cubre lectura sec3 al
                                           final del scroll en ambos
                                           viewports) */
    --t-segunda-in:  clamp(0, calc((var(--t) - 0.15) / 0.203), 1);
    --t-segunda-out: clamp(0, calc((var(--t) - 0.70) / 0.10), 1);
    --t-tercera-in:  clamp(0, calc((var(--t) - 0.82) / 0.143), 1);
}

/* Imagen base del stage. Mismas proporciones y centrado que la
   antigua segunda-animada__base (Figma recorta los bordes
   transparentes, por eso el width es 95.806% del wrapper). */
.home-stage__base {
    position: absolute;
    top: 2.232%;
    left: 50%;
    transform: translateX(-50%);
    width: 95.806%;
    height: auto;
}

/* ============================================================
   Wrapper styles preservados — usados HOY por el hero de la
   calculadora (calculadora.html) que reusa el esquema completo
   de la 2da animada con su propio --p inline. NO tocar.
   ============================================================ */
.segunda-animada {
    position: relative;
    width: 100%;
    aspect-ratio: 930 / 672;
    overflow: visible;
    --p: 0;
}

img.segunda-animada__base {
    position: absolute;
    top: 2.232%;
    left: 50%;
    transform: translateX(-50%);
    width: 95.806%;
    height: auto;
}

/* Layers de la 2da imagen — comportamiento por defecto basado en --p
   (lo que necesita el hero de la calculadora). El home reescribe esto
   más abajo con --p2/--p3 para coordinar el crossfade entre copies. */
img.segunda-animada__layer {
    --start: 1;
    --length: 0.20;
    --lp: clamp(0, calc((var(--p) - var(--start)) / var(--length)), 1);
    position: absolute;
    height: auto;
    pointer-events: none;
    opacity: var(--lp);
    transform: translateY(calc(16px * (1 - var(--lp))));
    will-change: opacity, transform;
}

img.segunda-animada__layer--satelite           { --start: 0.20; top:  0%;      left: 45.054%; width: 37.527%; }
img.segunda-animada__layer--lineas-atras       { --start: 0.24; top: 17.152%;  left: 26.828%; width: 62.214%; }
img.segunda-animada__layer--cs-sistema         { --start: 0.28; top: 19.494%;  left: 52.903%; width: 10.860%; }
img.segunda-animada__layer--malla              { --start: 0.32; top: 27.232%;  left: 24.330%; width: 58.681%; }
img.segunda-animada__layer--e4                 { --start: 0.36; top: 24.107%;  left: 41.290%; width:  6.774%; }
img.segunda-animada__layer--e5                 { --start: 0.40; top: 56.994%;  left: 78.172%; width:  6.774%; }
img.segunda-animada__layer--elementos-ecuacion { --start: 0.44; top: 29.167%;  left: 17.312%; width: 67.204%; }
img.segunda-animada__layer--lineas-adelante    { --start: 0.54; top: 21.658%;  left: 15.370%; width: 61.726%; }

/* 3 cards de la 2da imagen (PAR / NDVI / NDWI). El fondo "frosted"
   ahora es CSS (rgba 40% blanco, idéntico al Fill 40% del Figma) en
   vez de un PNG aplanado, así el ícono y el texto encima quedan al
   100% sin lavarse. Cada card es un <div> con dos <img> adentro
   (ícono + texto) extraídos por separado del Figma. */
.segunda-animada__card {
    --start: 1;
    --length: 0.20;
    --lp: clamp(0, calc((var(--p) - var(--start)) / var(--length)), 1);
    position: absolute;
    pointer-events: none;
    opacity: var(--lp);
    transform: translateY(calc(16px * (1 - var(--lp))));
    will-change: opacity, transform;
    box-sizing: border-box;
    aspect-ratio: 1;
    background: rgba(190, 190, 190, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 10px;
}

img.segunda-animada__card-icon,
img.segunda-animada__card-text {
    position: absolute;
    height: auto;
    width: auto;
}

/* Sombra sutil para que el texto blanco se despegue del fondo
   translúcido sin tener que oscurecer el bg. */
img.segunda-animada__card-text,
img.tercera-animada__caja-text {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.segunda-animada__card--par   { --start: 0.46; top: 28.125%; left: 65.806%; width: 12.337%; }
.segunda-animada__card--ndvi  { --start: 0.48; top: 63.838%; left: 26.559%; width: 12.337%; }
.segunda-animada__card--ndwi  { --start: 0.50; top: 69.494%; left: 57.097%; width: 12.337%; }

/* Posiciones del ícono dentro de cada card (% del 115×115 del card en Figma). */
.segunda-animada__card--ndvi img.segunda-animada__card-icon { top:  6.73%; left: 19.13%; width: 60.87%; }
.segunda-animada__card--par  img.segunda-animada__card-icon { top: 13.92%; left: 23.48%; width: 56.52%; }
.segunda-animada__card--ndwi img.segunda-animada__card-icon { top: 13.04%; left: 31.30%; width: 36.52%; }

/* Posiciones del texto debajo del ícono. El width usa el TAMAÑO NATURAL
   del PNG (no el bounding-box alocado en Figma) — Figma recorta los
   bordes transparentes así que cada PNG tiene su propio width real, y
   forzarlos al mismo % daba glyphs de tamaños distintos. Multiplico
   por 1.18 para que el texto se lea más notorio sobre el bg frosted;
   left se reajusta para mantener el texto centrado horizontalmente. */
.segunda-animada__card--ndvi img.segunda-animada__card-text { top: 71.95%; left: 15.95%; width: 68.11%; }  /* PNG 71×24 */
.segunda-animada__card--par  img.segunda-animada__card-text { top: 72.17%; left: 18.34%; width: 63.32%; }  /* PNG 66×24 */
.segunda-animada__card--ndwi img.segunda-animada__card-text { top: 72.17%; left:  5.87%; width: 88.26%; }  /* PNG 92×24 */

/* ============================================================
   Cajas de la "3ra animada" (BIOMASA / HOJARASCA / SUELO /
   NIVEL DE AGUA). En el home viven dentro de .home-stage__art
   junto a las layers de la 2da, y comparten la misma base.
   ============================================================ */
.tercera-animada__caja {
    --start: 1;
    --length: 0.20;
    --lp: clamp(0, calc((var(--p) - var(--start)) / var(--length)), 1);
    position: absolute;
    pointer-events: none;
    opacity: var(--lp);
    transform: translateY(calc(16px * (1 - var(--lp))));
    will-change: opacity, transform;
    box-sizing: border-box;
    aspect-ratio: 137 / 49;
    background: rgba(190, 190, 190, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.tercera-animada__caja-text {
    height: auto;
    width: auto;
}

.tercera-animada__caja--biomasa     { --start: 0.20; top: 27.976%; left: 21.720%; width: 14.731%; }
.tercera-animada__caja--hojarasca   { --start: 0.30; top: 50.298%; left: 48.495%; width: 14.731%; }
.tercera-animada__caja--suelo       { --start: 0.40; top: 62.798%; left: 20.430%; width: 14.731%; }
.tercera-animada__caja--nivel-agua  { --start: 0.50; top: 71.875%; left: 58.172%; width: 14.731%; }

/* Width = ancho natural del PNG / 137 (ancho del caja en Figma) × 1.18.
   El factor 1.18 hace los glyphs un poco más grandes para mejor
   legibilidad; hojarasca se topa con el cap del 92% (sino se sale del
   caja) — diferencia mínima respecto a los otros (que escalan limpio). */
.tercera-animada__caja--biomasa    img.tercera-animada__caja-text { width: 64.44%; }  /* PNG  86×30 */
.tercera-animada__caja--hojarasca  img.tercera-animada__caja-text { width: 80.04%; }  /* PNG 116×12 */
.tercera-animada__caja--suelo      img.tercera-animada__caja-text { width: 44.96%; }  /* PNG  60×12 */
.tercera-animada__caja--nivel-agua img.tercera-animada__caja-text { width: 64.44%; }  /* PNG  86×30 */

/* ============================================================
   Crossfade del stage del home — overrides scopeados a
   .home-stage__art que reescriben opacity/transform usando los
   remaps del timeline (--t-segunda-in / --t-segunda-out /
   --t-tercera-in) declarados arriba.

   Layers/cards de la 2da:
     - Cascada IN: lp_in se calcula contra t-segunda-in y reusa
       los --start (0.20..0.54) y --length (0.20) existentes.
     - Fade OUT: multiplicador (1 - t-segunda-out) que se aplica
       parejo a TODOS al entrar al tramo 0.55..0.65, así
       desaparecen en bloque antes del dead zone.
   Cajas de la 3ra:
     - Solo cascada IN contra t-tercera-in (no se van).
   El selector .home-stage__art tiene mayor especificidad que las
   reglas base, así que gana sin !important.
   ============================================================ */
.home-stage__art img.segunda-animada__layer,
.home-stage__art .segunda-animada__card {
    /* Cascada de salida REVERSA: el último en aparecer (mayor --start)
       es el primero en desaparecer. Invierto --start respecto al máximo
       (0.54, lineas-adelante) para obtener un nuevo offset en [0, 0.34],
       y multiplico por 2.35 para estirarlo a [0, 0.80] así el último en
       irse (satelite) termina justo al filo de t-segunda-out=1.0 con
       --length 0.20. Cada layer fade-out usa su propio --start-out. */
    --start-out: calc((0.54 - var(--start)) * 2.35);
    --lp-in:  clamp(0, calc((var(--t-segunda-in) - var(--start)) / var(--length)), 1);
    --lp-out: clamp(0, calc((var(--t-segunda-out) - var(--start-out)) / var(--length)), 1);
    opacity: calc(var(--lp-in) * (1 - var(--lp-out)));
    transform: translateY(calc(16px * (1 - var(--lp-in))));
}

.home-stage__art .tercera-animada__caja {
    --lp: clamp(0, calc((var(--t-tercera-in) - var(--start)) / var(--length)), 1);
    opacity: var(--lp);
    transform: translateY(calc(16px * (1 - var(--lp))));
}

@media (prefers-reduced-motion: reduce) {
    img.segunda-animada__layer,
    .segunda-animada__card,
    .tercera-animada__caja,
    .home-stage__art img.segunda-animada__layer,
    .home-stage__art .segunda-animada__card,
    .home-stage__art .tercera-animada__caja {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Mobile (≤600px): el grid colapsa a una columna. El stage deja
   de ser sticky y queda inline después de la primera copy,
   mostrando todos los overlays al 100% (sin animación) — versión
   "estática" del esquema, sin scrollytelling.
   Tablet (601px–1024px) mantiene el layout desktop de 2 columnas
   con scrollytelling, solo que con la imagen y el texto más
   chicos por el viewport más angosto.
   ============================================================ */
@media (max-width: 600px) {
    .home {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: var(--space-6);
    }

    /* Mobile: dejamos de usar min-height — no hay scrollytelling
       lateral, las copies pueden volver a su altura natural.
       Importante: incluimos los selectores con [data-stage-copy="..."]
       para anular las min-height específicas (50vh / 40vh) que en
       desktop le pusimos a sec2 y sec3 — sin esto, ganaban por
       especificidad y rompían el layout en tablet. */
    .home > .page-section,
    .home > .page-section[data-stage-copy="segunda"],
    .home > .page-section[data-stage-copy="tercera"] {
        min-height: auto;
    }

    .home > .page-section[data-stage-copy="primera"] {
        padding-top: 0;
    }


    .home > .home-stage__art {
        grid-column: 1;
        grid-row: auto;
        /* Position: relative (no static) para que la imagen base y
           los overlays absolutos sigan usando el wrapper como
           containing block; con static saltaban al body y se
           montaban encima del título. */
        position: relative;
        align-self: stretch;
        order: 2;
    }

    /* Orden visual en mobile: copy 1, stage estático, copy 2, copy 3.
       Las copies usan order para reubicarse alrededor del stage. */
    .home > .page-section[data-stage-copy="primera"] { order: 1; }
    .home > .page-section[data-stage-copy="segunda"] { order: 3; }
    .home > .page-section[data-stage-copy="tercera"] { order: 4; }

    .home > .home-stage__art img.segunda-animada__layer,
    .home > .home-stage__art .segunda-animada__card,
    .home > .home-stage__art .tercera-animada__caja {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 600px) {
    .home {
        row-gap: var(--space-4);
    }
}

/* Tablet (601–1024px): mantenemos el layout desktop de 2 columnas
   con scrollytelling. El --image-offset acá ubica la posición
   sticky de la imagen para que la escena visible (que vive en la
   parte baja del wrapper, porque arriba se reserva espacio para
   los overlays de la 2da animada) caiga a la altura del primer
   párrafo del hero, no pegada al título. 15vh empíricamente
   alinea bien sin solaparse con el título. */
@media (min-width: 601px) and (max-width: 1024px) {
    .home {
        --image-offset: 28vh;
        /* Damos más ancho a la columna de la imagen y achicamos el
           gap para que la ilustración + overlays se vean más grandes
           en tablet sin reventar la legibilidad del texto. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
        column-gap: 0;
        /* Margin-right negativo igual al padding del container para
           que la imagen llegue al borde derecho de la pantalla
           (gana ~48px de ancho extra para la ilustración). */
        margin-right: calc(-1 * var(--content-pad-x-md));
    }
}