/* ============================================================
   HOTEL PRÍNCIPE — Scrollytelling
   Secciones fijas (pinned) animadas por el progreso del scroll.
   scrollytelling.js escribe en cada sección [data-scrolly]:
     --p          : progreso 0 → 1 dentro de la sección
     data-active  : índice del paso activo (si hay data-steps)
   Todas las animaciones se degradan a un layout estático con
   prefers-reduced-motion: reduce.
   ============================================================ */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   1. PORTAL — la imagen que se expande al bajar
   ============================================================ */
.portal {
    height: 260vh;
    position: relative;
    z-index: 1;
}

.portal__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(110, 59, 59, .25) 0%, transparent 60%),
        var(--beige);
}

/* El marco de imagen: crece de ventana enmarcada a pantalla completa */
.portal__media {
    position: relative;
    width: calc(min(34vw, 480px) + (100vw - min(34vw, 480px)) * var(--p, 0));
    height: calc(48vh + 56vh * var(--p, 0));
    min-width: 280px;
    overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(42, 29, 22, .55);
}

/* Escena crepuscular (placeholder CSS — sustituir por foto real) */
.portal__scene {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        #2E1B2B 0%,
        #4A2536 26%,
        var(--vinotinto) 44%,
        #9C5A38 62%,
        #C98A4E 76%,
        #E2AE66 88%,
        #EFC98B 100%);
    /* Zoom interno inverso: la escena "respira" mientras el marco crece */
    transform: scale(calc(1.18 - .18 * var(--p, 0)));
    transform-origin: center 70%;
}

/* --- Escena con FOTO REAL de la fachada, virada a crepúsculo --- */
.portal__scene--foto { background: #1c120e; }
/* Con foto real, ocultamos las capas abstractas (silueta/edificio dibujado) */
.portal__scene--foto .portal__skyline,
.portal__scene--foto .portal__facade { display: none; }

.portal__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    /* Color-grade cálido de atardecer sobre la foto diurna */
    filter: brightness(.82) contrast(1.04) saturate(.92) sepia(.22) hue-rotate(-12deg);
}
/* Degradado de cielo/atardecer que funde la foto con el naranja larense */
.portal__dusk {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(46, 27, 43, .72) 0%,
        rgba(110, 59, 59, .40) 34%,
        rgba(156, 90, 56, .26) 56%,
        rgba(226, 174, 102, .30) 78%,
        rgba(20, 12, 8, .58) 100%);
    mix-blend-mode: multiply;
}
.portal__scene--foto .portal__sun { z-index: 2; opacity: .9; }

.portal__sun {
    position: absolute;
    left: 50%;
    bottom: 26%;
    width: 16vmin; height: 16vmin;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        #F6DFA8 0%, #ECC172 38%, rgba(226, 174, 102, .55) 60%, transparent 72%);
    filter: blur(1px);
}

/* Silueta del perfil urbano de Barquisimeto */
.portal__skyline {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 34%;
    background:
        linear-gradient(180deg, transparent 0, transparent 28%, #241610 28%),
        linear-gradient(#2A1A12, #2A1A12) left  4%  top 12% / 9%  100% no-repeat,
        linear-gradient(#241610, #241610) left 16%  top 30% / 7%  100% no-repeat,
        linear-gradient(#2A1A12, #2A1A12) left 26%  top  4% / 6%  100% no-repeat,
        linear-gradient(#241610, #241610) right 24% top 22% / 8%  100% no-repeat,
        linear-gradient(#2A1A12, #2A1A12) right 12% top  8% / 10% 100% no-repeat,
        linear-gradient(#241610, #241610) right 2%  top 34% / 7%  100% no-repeat;
}

/* Fachada del hotel en primer plano, con ventanas encendidas */
.portal__facade {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 44%;
    height: 56%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #33211A 0%, #2A1A12 100%);
    box-shadow: 0 0 60px -10px rgba(20, 12, 8, .8);
}
.portal__facade::before {
    /* Retícula de ventanas cálidas */
    content: '';
    position: absolute;
    inset: 12% 14% 6%;
    background-image:
        repeating-linear-gradient(90deg,
            rgba(236, 193, 114, .85) 0 8%, transparent 8% 24%),
        repeating-linear-gradient(180deg,
            rgba(236, 193, 114, .9) 0 6%, transparent 6% 18%);
    background-blend-mode: multiply;
    -webkit-mask-image:
        repeating-linear-gradient(90deg, #000 0 8%, transparent 8% 24%);
    mask-image:
        repeating-linear-gradient(90deg, #000 0 8%, transparent 8% 24%);
    opacity: .85;
    filter: blur(.4px);
}
.portal__facade::after {
    /* Portal de entrada iluminado */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 22%;
    height: 18%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #F0CE92, #C98A4E);
    border-radius: 40% 40% 0 0 / 70% 70% 0 0;
    box-shadow: 0 0 34px 6px rgba(236, 193, 114, .45);
}

.portal__grain {
    position: absolute;
    inset: 0;
    opacity: .3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* Marco dorado doble que se desvanece al expandirse la imagen */
.portal__frame {
    position: absolute;
    inset: 0;
    border: 1px solid var(--dorado);
    outline: 1px solid rgba(176, 141, 87, .45);
    outline-offset: -12px;
    pointer-events: none;
    opacity: calc(1 - var(--p, 0) * 1.6);
}

/* Leyenda inicial bajo el marco: se disuelve al comenzar el viaje */
.portal__caption {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-top: 2rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--tinta-suave);
    opacity: calc(1 - var(--p, 0) * 2.4);
}
.portal__caption .line {
    width: 46px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--dorado));
}
.portal__caption .line:last-child {
    background: linear-gradient(90deg, var(--dorado), transparent);
}

.portal__hint {
    position: absolute;
    bottom: 1.6rem;
    font-size: .7rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--dorado);
    opacity: calc(1 - var(--p, 0) * 2.4);
}

/* Texto final que emerge sobre la imagen ya expandida */
.portal__reveal {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 0 1.5rem 12vh;
    background: linear-gradient(180deg, transparent 28%, rgba(28, 16, 11, .55) 62%, rgba(20, 11, 7, .88) 100%);
    color: var(--crema);
    opacity: calc((var(--p, 0) - .55) / .3);
    transform: translateY(calc((1 - var(--p, 0)) * 40px));
}

.portal__reveal-label {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--dorado-claro);
    margin-bottom: 1rem;
}
.portal__reveal-title {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 500;
    line-height: 1.1;
    max-width: 780px;
    text-shadow: 0 4px 26px rgba(0, 0, 0, .45);
}
.portal__reveal-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.05rem, 2.1vw, 1.35rem);
    font-weight: 500;
    color: #FBF3E3;
    max-width: 580px;
    margin-top: 1rem;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .65);
}

/* ============================================================
   2. ESENCIA — misión / visión / valores (sección fija)
   ============================================================ */
.esencia {
    height: 380vh;
    position: relative;
}

.esencia__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse at 12% 16%, rgba(140, 140, 126, .16) 0%, transparent 52%),
        radial-gradient(ellipse at 90% 92%, rgba(176, 141, 87, .16) 0%, transparent 55%),
        linear-gradient(160deg, var(--crema) 0%, var(--beige) 48%, var(--beige-claro) 100%);
    color: var(--tinta);
}

.esencia__texture {
    position: absolute;
    inset: 0;
    opacity: .28;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.67 0 0 0 0 0.49 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23e)'/%3E%3C/svg%3E");
}

.esencia__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    gap: 2rem 4rem;
    align-items: start;
    height: min(760px, 86vh);
}

.esencia__head { grid-column: 1 / -1; }
.esencia__head .section__title { color: var(--roble-oscuro); margin-bottom: 0; }

/* --- Riel de progreso (I / II / III) --- */
.esencia__rail {
    display: flex;
    gap: 1.6rem;
    align-self: stretch;
    padding-top: .6rem;
}

.esencia__rail-line {
    width: 1px;
    background: rgba(86, 83, 73, .28);
    position: relative;
    overflow: hidden;
}
.esencia__rail-progress {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: calc(var(--p, 0) * 100%);
    background: linear-gradient(180deg, var(--dorado-claro), var(--dorado));
}

.esencia__rail-items {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 18vh;
}

.esencia__rail-item {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    opacity: .38;
    transition: opacity .5s ease, transform .5s ease;
}
.esencia__rail-numero {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--dorado);
    line-height: 1;
    min-width: 2.2rem;
}
.esencia__rail-nombre {
    font-size: .74rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.esencia[data-active="0"] .esencia__rail-item[data-panel="0"],
.esencia[data-active="1"] .esencia__rail-item[data-panel="1"],
.esencia[data-active="2"] .esencia__rail-item[data-panel="2"] {
    opacity: 1;
    transform: translateX(6px);
}

/* --- Paneles superpuestos con fundido cruzado --- */
.esencia__panels {
    position: relative;
    height: 100%;
}

.esencia__panel {
    position: absolute;
    inset: 0;
    max-width: 640px;
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .65s cubic-bezier(.22, .8, .3, 1),
                transform .65s cubic-bezier(.22, .8, .3, 1);
    pointer-events: none;
}

.esencia[data-active="0"] .esencia__panel[data-panel="0"],
.esencia[data-active="1"] .esencia__panel[data-panel="1"],
.esencia[data-active="2"] .esencia__panel[data-panel="2"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.esencia__panel-numero {
    position: absolute;
    top: -3.2rem;
    right: 0;
    font-family: var(--font-serif);
    font-size: clamp(7rem, 16vw, 12rem);
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    color: rgba(90, 70, 54, .10);
    pointer-events: none;
}

.esencia__panel-titulo {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 2.9rem);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--vinotinto);
    line-height: 1.12;
}
.esencia__panel-lema {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--tinta-suave);
    margin: .4rem 0 1.4rem;
}
.esencia__panel-lema::after {
    content: '';
    display: block;
    width: 44px; height: 1px;
    background: var(--dorado);
    margin-top: 1.2rem;
}
.esencia__panel-texto {
    font-size: 1rem;
    color: var(--tinta);
    margin-bottom: 1rem;
    max-width: 56ch;
}

.esencia__valores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 2rem;
    margin-top: .4rem;
}
.esencia__valor {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}
.esencia__valor-gema {
    color: var(--dorado);
    font-size: .6rem;
    margin-top: .5rem;
}
.esencia__valor h4 {
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--roble-oscuro);
    margin-bottom: .15rem;
}
.esencia__valor p {
    font-size: .88rem;
    color: var(--tinta-suave);
}

/* ============================================================
   3. SUITES — recorrido horizontal fijo entre habitaciones
   ============================================================ */
.suites {
    /* Altura proporcional al número de láminas (--slides desde PHP) */
    height: calc((var(--slides, 3) - 1) * 160vh + 100vh);
    position: relative;
    background: var(--beige-claro);
}

.suites__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.suites__track {
    display: flex;
    height: 100%;
    width: calc(var(--slides, 3) * 100vw);
    transform: translateX(calc(var(--p, 0) * (var(--slides, 3) - 1) * -100vw));
    will-change: transform;
}

.suites__slide {
    width: 100vw;
    height: 100%;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(4.5rem, 8vh, 7rem) clamp(1.5rem, 6vw, 7rem) clamp(5rem, 10vh, 8rem);
}

/* Lámina: imagen con número fantasma */
.suites__media {
    position: relative;
    height: min(64vh, 620px);
}
.suites__placeholder {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
    box-shadow: var(--shadow-soft);
}
.suites__media-frame {
    position: absolute;
    inset: -14px;
    border: 1px solid var(--dorado);
    opacity: .5;
    transform: translate(14px, 14px);
    pointer-events: none;
}
.suites__ghost {
    position: absolute;
    top: -3.4rem;
    left: -1.2rem;
    z-index: 2;
    font-family: var(--font-serif);
    font-size: clamp(5rem, 11vw, 9rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(110, 59, 59, .4);
}

/* Lámina: texto */
.suites__nombre {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    font-weight: 600;
    color: var(--roble-oscuro);
    line-height: 1.12;
}
.suites__lema {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.18rem;
    color: var(--vinotinto);
    margin: .3rem 0 1.2rem;
}
.suites__desc {
    font-size: .98rem;
    color: var(--tinta-suave);
    max-width: 54ch;
    margin-bottom: 1.6rem;
}

.suites__detalles {
    max-width: 430px;
    border-top: 1px solid rgba(176, 141, 87, .35);
    padding-top: 1.2rem;
    margin-bottom: 1.4rem;
}
.suites__detalle {
    display: flex;
    align-items: baseline;
    gap: .8rem;
    margin-bottom: .55rem;
}
.suites__detalle dt {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--madera);
    white-space: nowrap;
}
.suites__detalle-dots {
    flex: 1;
    border-bottom: 1px dotted rgba(107, 74, 56, .45);
}
.suites__detalle dd {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--roble-oscuro);
    white-space: nowrap;
}

.suites__amenidades {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.8rem;
}
.suites__amenidades li {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--madera);
    border: 1px solid rgba(107, 74, 56, .3);
    padding: .25rem .7rem;
    border-radius: 20px;
}

/* HUD: contador y progreso del recorrido */
.suites__hud {
    position: absolute;
    left: clamp(1.5rem, 6vw, 7rem);
    right: clamp(1.5rem, 6vw, 7rem);
    bottom: 2.2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--madera);
}
.suites__count::after { content: '01'; }
.suites[data-active="1"] .suites__count::after { content: '02'; }
.suites[data-active="2"] .suites__count::after { content: '03'; }
.suites[data-active="3"] .suites__count::after { content: '04'; }

.suites__hud-line {
    flex: 1;
    height: 1px;
    background: rgba(176, 141, 87, .3);
    position: relative;
    overflow: hidden;
}
.suites__hud-progress {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--dorado), var(--dorado-claro));
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}
.suites__total { color: rgba(107, 74, 56, .55); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    /* --- ESENCIA: en tablet y móvil deja de ser una sección fija (pinned).
       El fundido cruzado exigía una altura fija con overflow oculto, y eso
       recortaba el último panel (Valores). Aquí se despliega como bloques
       estáticos apilados: nada se corta y deja de ocupar 3-4 pantallas de
       scroll (era 380vh). --- */
    .esencia { height: auto; }
    .esencia__sticky {
        position: static;
        height: auto;
        overflow: visible;
        display: block;
        padding: 5rem 0;
    }
    .esencia__layout {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 2.4rem;
    }
    .esencia__rail { display: none; }
    .esencia__panels { height: auto; }
    .esencia__panel {
        position: static;
        inset: auto;
        max-width: 100%;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .esencia__panel + .esencia__panel {
        margin-top: 3rem;
        padding-top: 3rem;
        border-top: 1px solid rgba(176, 141, 87, .28);
    }
    .esencia__panel-numero { display: none; }
}

/* --- TABLET (861–1024): las habitaciones se ven UNA sola vez ---
   En este rango se prefiere el recorrido horizontal (suites) sobre la
   cuadrícula (la cuadrícula se oculta en styles.css). Aquí solo acortamos
   el scroll del recorrido y del portal para que no sean tan altos. --- */
@media (min-width: 861px) and (max-width: 1024px) {
    .portal { height: 200vh; }
    .suites { height: calc((var(--slides, 3) - 1) * 120vh + 100vh); }
}

/* ============================================================
   MÓVIL (≤860px) — las secciones fijas SIGUEN animándose
   El motor (scrollytelling.js) corre también en táctil; aquí solo
   adaptamos las dimensiones a formato retrato. Las suites pasan a
   un carrusel deslizable (scroll-snap), patrón nativo de móvil.
   ============================================================ */
@media (max-width: 860px) {

    /* --- PORTAL: la imagen sigue expandiéndose con el scroll --- */
    .portal { height: 220vh; }
    .portal__media {
        width: calc(min(78vw, 460px) + (100vw - min(78vw, 460px)) * var(--p, 0));
        height: calc(44vh + 50vh * var(--p, 0));
        min-width: 0;
    }
    .portal__facade { width: 62%; }
    .portal__caption { font-size: 1rem; margin-top: 1.4rem; text-align: center; }
    .portal__reveal { padding: 0 1.4rem 10vh; }

    /* --- ESENCIA: ya es estática (ver bloque ≤1024). Solo tipografía retrato --- */
    .esencia__panel-titulo { font-size: clamp(1.8rem, 8vw, 2.4rem); }
    .esencia__panel-lema { margin-bottom: 1rem; }
    .esencia__panel-texto { font-size: .94rem; }
    .esencia__valores { grid-template-columns: 1fr; gap: 1rem; }
    .esencia__valor p { font-size: .84rem; }

    /* --- SUITES ("Habitaciones") EN MÓVIL: mismo recorrido pinned ---
       Se conserva la animación: al bajar, el scroll vertical desplaza las
       láminas en horizontal (igual que tablet/desktop). La lámina pasa a una
       sola columna COMPACTA para que quepa en el alto de la pantalla. */
    .suites { height: calc((var(--slides, 3) - 1) * 120vh + 100vh); }
    .suites__slide {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: center;
        gap: .9rem;
        padding: clamp(4.5rem, 12vh, 6.5rem) 1.25rem clamp(1.5rem, 5vh, 2.5rem);
    }
    .suites__media { height: clamp(180px, 28vh, 280px); }
    .suites__ghost {
        top: -1.7rem;
        left: -.2rem;
        font-size: clamp(2.8rem, 14vw, 4rem);
    }
    /* El marco desplazado no debe salirse de la lámina (mismo criterio que
       .media-frame__border): se recoge el corrimiento. */
    .suites__media-frame { inset: -6px; transform: translate(6px, 6px); }
    .suites__nombre { font-size: clamp(1.5rem, 6.2vw, 2rem); }
    .suites__lema { font-size: 1rem; margin: .15rem 0 .7rem; }
    .suites__desc {
        font-size: .88rem;
        margin-bottom: .85rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .suites__detalles { padding-top: .8rem; margin-bottom: .85rem; }
    .suites__detalle { margin-bottom: .3rem; }
    .suites__detalle dt, .suites__detalle dd { font-size: .82rem; }
    .suites__amenidades { gap: .35rem; margin-bottom: 1rem; }
    .suites__cta { padding: .85rem 1.9rem; }
    .suites__hud { bottom: 1.1rem; }
}

/* ============================================================
   ACCESIBILIDAD — sin animaciones de scroll (movimiento reducido):
   las secciones se despliegan como bloques estáticos normales.
   Va al final para prevalecer sobre las reglas de móvil.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .portal, .esencia, .suites { height: auto; }
    .portal__sticky, .esencia__sticky, .suites__sticky {
        position: static;
        height: auto;
        overflow: visible;
    }

    .portal__sticky { padding: 4rem 0 0; }
    .portal__media { width: 100%; height: 70vh; min-width: 0; }
    .portal__scene { transform: none; }
    .portal__frame, .portal__caption, .portal__hint { display: none; }
    .portal__reveal { opacity: 1; transform: none; }

    .esencia__sticky { padding: 4.5rem 0; }
    .esencia__layout { height: auto; grid-template-columns: 1fr; }
    .esencia__rail { display: none; }
    .esencia__panels { height: auto; }
    .esencia__panel {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        margin-bottom: 3.5rem;
    }
    .esencia__panel-numero { display: none; }

    .suites__track {
        display: block; width: auto; transform: none;
        overflow: visible; scroll-snap-type: none;
    }
    .suites__slide { width: auto; flex: none; height: auto; min-height: 0; padding: 3.5rem clamp(1.5rem, 6vw, 7rem); scroll-snap-align: none; }
    .suites__hud { display: none; }
}