/* Portada: hero por capas y raíl lateral (PL y ES).
 * Se carga después de styles.css y de pgk-scroll.css. El motor no se edita;
 * todo lo propio de la portada vive aquí y en js/home-scroll.js.
 *
 * Estados, de menos a más:
 *   sin JS            composición estática; el raíl es una rejilla apilada
 *   con JS            capas con parallax y raíl lateral fijado por el scroll
 *   reduced motion    sin desplazamientos; el raíl es un scroll horizontal normal
 */

/* ------------------------------------------------------------------ tokens
   El motor trae su propio verde; la web usa --c-bg. Se unifican aquí para que
   el body no pinte un tono distinto del html. */
:root {
    --pgk-canvas: #152621;
    --pgk-accent: #DCCBB3;
    --pgk-ink: #F2F1ED;
    --pgk-ink-soft: #9AB4AC;
}

/* html y body con overflow-x:hidden convierten body en contenedor de scroll y
   position:sticky deja de engancharse al viewport (sin aviso del motor).
   clip recorta igual sin crear contenedor. */
body {
    overflow-x: clip;
}

/* Margen lateral de .container (max 1200px, relleno clamp(20px, 4vw, 48px)). */
:root {
    --page-gutter: max(clamp(20px, 4vw, 48px), calc((100vw - 1200px) / 2 + clamp(20px, 4vw, 48px)));
}

/* =================================================================== HERO ==
   Tres planos a distinta velocidad, de atrás hacia delante:
     1. foto (hero-photo), se retrasa un 11 % respecto de la página
     2. texto (container), velocidad 1, sin parallax
     3. marco (hero-arch), un arco verde con una ventana; sube un 13 % más
        rápido que la página y tapa la foto
   A reposo (scroll 0) todos los desplazamientos son 0. */
.hero--layers {
    --hero-arch-w: clamp(300px, 36vw, 560px);
    --hero-arch-r: clamp(24px, 7vw, 120px);
    --hero-arch-top: clamp(104px, 15vh, 150px);
    --hero-frame: var(--c-bg);
    background: var(--hero-frame);
    isolation: isolate;
}

.hero--layers .hero-photo {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    right: calc(var(--hero-arch-r) - 70px);
    width: calc(var(--hero-arch-w) + 140px);
    max-width: none;
    background: var(--c-bg-deep);
}

.hero--layers .hero-photo img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 100% 50%;
}

/* La ventana es transparente y su sombra exterior, enorme y sólida, es el
   marco. Cae por debajo del hero (bottom negativo) para que al subir más
   rápido que la página no deje hueco. Sin degradado: el marco es el scrim. */
.hero--layers .hero-arch {
    position: absolute;
    z-index: 1;
    top: var(--hero-arch-top);
    bottom: -280px;
    right: var(--hero-arch-r);
    width: var(--hero-arch-w);
    border: 1px solid rgba(220, 203, 179, 0.5);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    box-shadow: 0 0 0 100vmax var(--hero-frame), inset 0 0 90px rgba(13, 26, 22, 0.4);
    pointer-events: none;
}

/* Segunda línea fina, separada de la ventana. Pseudoelemento y no outline:
   Safari anterior a 16.4 dibuja el outline rectangular aunque haya radio. */
.hero--layers .hero-arch::before {
    content: "";
    position: absolute;
    inset: -16px;
    border: 1px solid rgba(220, 203, 179, 0.18);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.hero--layers .container {
    z-index: 2;
}

/* El texto se queda a la izquierda de la ventana en cualquier ancho. */
.hero--layers .hero-content {
    max-width: min(800px, calc(100vw - var(--hero-arch-r) - var(--hero-arch-w) - 44px - var(--page-gutter)));
}

/* El texto de entrada de styles.css (fadeUp) se queda: no está en un nodo con parallax. */

/* Móvil, composición propia: texto arriba y ventana abajo, anclada al pie del
   hero. El botón queda por encima de la burbuja de WhatsApp y del enlace de
   cookies (fijos abajo) igual que en la portada anterior, y la ventana ocupa el
   resto sin depender de cuánto texto haya. */
@media (max-width: 860px) {
    .hero--layers .hero-content {
        max-width: none;
    }

    .hero--layers {
        --hero-arch-w: min(86vw, 380px);
        --hero-arch-vis: clamp(200px, 38svh, 340px);
        --hero-arch-gap: 44px;
        min-height: 85vh;
        min-height: 85svh;
        align-items: flex-start;
        padding-top: 112px;
        padding-bottom: calc(var(--hero-arch-vis) + var(--hero-arch-gap));
    }

    /* Ventana centrada sin transform (el motor escribe transform en este nodo).
       Abierta por abajo, como en escritorio: la corta el borde del hero. */
    .hero--layers .hero-arch {
        left: 0;
        right: 0;
        margin-inline: auto;
        top: auto;
        bottom: -280px;
        height: calc(var(--hero-arch-vis) + 280px);
    }

    .hero--layers .hero-arch::before {
        inset: -11px;
    }

    /* 100px de margen por encima de la ventana: la foto se retrasa y el marco sube,
       y sin ese margen se vería el borde superior de la foto. */
    .hero--layers .hero-photo {
        left: 0;
        right: 0;
        margin-inline: auto;
        top: auto;
        bottom: 0;
        width: calc(var(--hero-arch-w) + 120px);
        height: calc(var(--hero-arch-vis) + 100px);
    }

    .hero--layers .hero-photo img {
        object-position: 92% 0%;
    }
}

/* =================================================================== RAIL ==
   Una comparativa de dos regímenes (turístico y de temporada), un panel por
   atributo. Cada panel conserva el atributo y los dos textos de la tabla. */
.rail-section {
    --rail-gutter: var(--page-gutter);
    --rail-top: clamp(104px, 15vh, 132px);
    padding: 0;
}

/* --- base: sin JS, rejilla apilada, todo se lee en orden --- */
.rail-stage {
    padding: clamp(60px, 8vw, 140px) var(--rail-gutter);
}

.rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(36px, 4vw, 56px) clamp(28px, 3.2vw, 48px);
    max-width: 1200px;
    margin-inline: auto;
}

.rail-intro,
.rail-outro {
    grid-column: 1 / -1;
}

.rail-intro .section-subtitle {
    margin: 20px 0 0;
    max-width: 640px;
    text-align: left;
}

.rail-intro h2 {
    text-align: left;
}

/* El tono atenuado de .section-label no llega a contraste legible sobre el verde. */
.rail-intro .section-label {
    color: rgba(220, 203, 179, 0.72);
}

.rail-panel {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 2.4vw, 36px);
    padding: 6px 0 6px clamp(22px, 2.4vw, 40px);
    border-left: 1px solid var(--c-border);
}

.rail-panel h3 {
    color: var(--c-gold);
    font-size: clamp(28px, 3.3vw, 52px);
    line-height: 1.05;
}

.rail-case dt {
    font-size: var(--fs-label);
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--c-gold);
    opacity: 0.82;
}

.rail-case dd {
    margin: 8px 0 0;
    color: var(--c-text);
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.55;
}

.rail-case + .rail-case {
    margin-top: clamp(4px, 0.6vw, 10px);
    padding-top: clamp(18px, 1.8vw, 28px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rail-case .cross {
    color: var(--c-danger);
    font-weight: 600;
}

.rail-case .check {
    color: var(--c-success);
    font-weight: 600;
}

.rail-outro {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
}

.rail-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border);
    font-family: var(--ff-serif);
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
    color: var(--c-gold);
}

.rail-link svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.rail-link:hover {
    color: #fff;
    border-color: var(--c-gold);
}

.rail-link:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 6px;
}

.rail-progress {
    display: none;
}

/* --- con JS: raíl lateral dentro del escenario fijado ---
   El progreso se mide desde el top de la sección, así que la sección no lleva
   relleno: el aire va dentro del escenario. */
.pgk-scroll-ready .rail-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--rail-top) 0 calc(var(--cookie-h, 0px) + 56px);
}

.pgk-scroll-ready .rail {
    display: flex;
    align-items: stretch;
    gap: clamp(28px, 3.2vw, 56px);
    width: max-content;
    max-width: none;
    margin: 0;
    padding-inline: var(--rail-gutter);
}

.pgk-scroll-ready .rail > * {
    flex: 0 0 auto;
}

.pgk-scroll-ready .rail-intro,
.pgk-scroll-ready .rail-outro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pgk-scroll-ready .rail-intro {
    width: clamp(300px, 34vw, 520px);
}

.pgk-scroll-ready .rail-panel {
    width: clamp(290px, 31vw, 500px);
}

.pgk-scroll-ready .rail-outro {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 22px;
    width: clamp(260px, 24vw, 360px);
}

.pgk-scroll-ready .rail-progress {
    display: block;
    position: absolute;
    left: var(--rail-gutter);
    right: var(--rail-gutter);
    bottom: calc(var(--cookie-h, 0px) + 28px);
    height: 1px;
    background: rgba(220, 203, 179, 0.18);
}

.pgk-scroll-ready .rail-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-gold);
    transform-origin: 0 50%;
    transform: scaleX(var(--pgk-p, 0));
}

@media (max-width: 860px) {
    .rail-section {
        --rail-gutter: 20px;
        --rail-top: 84px;
    }

    .pgk-scroll-ready .rail {
        gap: 20px;
    }

    .pgk-scroll-ready .rail-intro {
        width: min(80vw, 330px);
    }

    .pgk-scroll-ready .rail-panel {
        width: min(80vw, 330px);
    }

    .pgk-scroll-ready .rail-outro {
        width: min(72vw, 300px);
    }

    .rail-panel h3 {
        font-size: 26px;
    }
}

/* --- reduced motion: sin escenario fijado ni desplazamientos ---
   El motor ya convierte el escenario en una región de scroll horizontal con
   snap, pero deja la altura del acto en span x 100vh (inline) y el escenario
   sticky: eso sería scroll vertical muerto. Se anula aquí. */
@media (prefers-reduced-motion: reduce) {
    .pgk-scroll-ready .rail-section[data-pgk-act] {
        height: auto !important;
    }

    .pgk-scroll-ready .rail-stage {
        position: relative;
        height: auto;
        min-height: 0;
        padding: clamp(60px, 8vw, 140px) 0;
    }

    .pgk-scroll-ready .rail-progress {
        display: none;
    }

    .rail-stage:focus-visible {
        outline: 2px solid var(--c-gold);
        outline-offset: -4px;
    }
}

/* --- pantalla baja: el panel más alto no cabe fijado (home-scroll.js añade
   .rail--estatico). Igual que reduced motion: sin fijar, scroll horizontal
   normal y el transform del motor anulado. --- */
.pgk-scroll-ready .rail-section.rail--estatico[data-pgk-act] {
    height: auto !important;
}

.pgk-scroll-ready .rail--estatico .rail-stage {
    position: relative;
    height: auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 48px 0;
}

.pgk-scroll-ready .rail--estatico .rail {
    transform: none !important;
}

.pgk-scroll-ready .rail--estatico .rail > * {
    scroll-snap-align: start;
}

.pgk-scroll-ready .rail--estatico .rail-progress {
    display: none;
}

.rail--estatico .rail-stage:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: -4px;
}