/* assets/css/torre.css
   Hoja de estilos propia de /torre — mismo patrón que preventa.css/ubicaciones.css:
   independiente de style.css, copiado a mano (no @import). Bloques:
   1) Variables root + reset (mismas que style.css).
   2) Preloader (#torre-preloader) + link "Volver a Preventa" propios de esta página.
   3) El recorrido edificio+modelos+amenidades+interiorismo+stats, copiado de style.css —
      mismos selectores que usa inicio.php (.model-scroll-card, .tight-card,
      .amenity-glass-card, .closing-stats, .interiorismo-*, .lightbox-*, etc.). Si el
      diseño cambia en style.css, replicar el cambio aquí a mano, igual que con
      preventa.css/ubicaciones.css.
*/

/* ==========================================================================
   VARIABLES ROOT Y RESET (mismas que style.css/preventa.css/ubicaciones.css)
   ========================================================================== */
:root {
    --brand-dark: #004944;
    --brand-medium: #1A916F;
    --brand-light: #86D296;
    --brand-accent: #B8D176;
    --brand-cream: #E6D5A7;

    --bg-color: #f7f9f8;
    --text-main: #333333;
    --header-height: 85px;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--brand-dark);
    font-weight: 600;
}

/* Bloquea el scroll mientras el preloader está visible — mismo patrón que
   "html:not(.gate-passed) { overflow:hidden }" del candado principal. Sin esto, el
   scroll-jacking (ScrollTrigger) todavía no está armado durante la carga y un scroll
   real mueve la página detrás del preloader (que es position:fixed y no sigue el
   contenido), dejando ver el fondo crema del body debajo. */
html:not(.torre-ready) { overflow: hidden; }

/* Preloader — mismo anillo/% visual que #okram-gate en style.css, adaptado a los IDs
   propios de esta página (#torre-preloader/#torre-ring-fill/#torre-percent) y SIN los
   estilos de la pantalla de contraseña (gate-logo/gate-text/gate-form/gate-input/
   gate-btn/gate-error), que aquí no existen. */
#torre-preloader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: var(--brand-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 1;
    transition: opacity 0.7s ease;
}
#torre-preloader[hidden] { display: none !important; }
#torre-preloader.gate-out { opacity: 0; }

.gate-inner {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gate-shake { animation: gateShake 0.4s ease; }
@keyframes gateShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.gate-ring {
    position: relative;
    width: clamp(300px, 46vw, 540px);
    height: clamp(300px, 46vw, 540px);
    max-width: 86vmin;
    max-height: 86vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 28px;
}
.gate-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.gate-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1.2px;
}
.gate-ring-fill {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5px;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.35s ease;
}
.gate-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    z-index: 1;
    font-family: var(--font-heading);
    color: #fff;
    font-size: clamp(60px, 10vw, 160px);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}
.gate-percent-sign {
    display: inline-block;
    width: 0;
    font-size: 0.34em;
    font-weight: 300;
    opacity: 0.85;
    transform: translateY(-1.4em);
}

/* Link mínimo de regreso a /preventa — mismo patrón que .ubicaciones-volver. */
.torre-volver {
    position: fixed;
    top: 25px;
    left: 25px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.torre-volver:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateX(-3px);
}
.torre-volver:active { transform: translateX(-1px) scale(0.97); }

/* Resalte de "Volver a Preventa" al llegar a Interiorismo/Valor Agregado (torre.js le
   agrega/quita esta clase) — mismo lenguaje visual (anillo de brillo en loop) que
   .preventa-cta-lateral.is-pulsing en preventa.css. */
.torre-volver.is-pulsing {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
    animation: torreVolverPulse 1.8s ease-in-out infinite;
}
@keyframes torreVolverPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 0 0 0 rgba(255, 255, 255, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 0 0 14px rgba(255, 255, 255, 0);
        transform: scale(1.04);
    }
}

/* Botón "Reiniciar recorrido" — esquina opuesta a .torre-volver, mismo estilo de
   píldora. Oculto por defecto (solo aparece en Interiorismo/Valor Agregado, ver
   torre.js); vuelve a saltar al paso 0 vía window.masterGoToStep (torre-recorrido.js). */
.torre-reiniciar {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, visibility 0.3s ease;
}
.torre-reiniciar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.torre-reiniciar:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
}
.torre-reiniciar:active { transform: translateY(0) scale(0.97); }

/* Tracker de progreso del recorrido (2026-07-27, a petición de Kevin) — 5 puntos fijos
   (Edificio/Modelos/Amenidades/Interiorismo/Valor Agregado). torre.js le agrega/quita
   .is-active/.is-done según la parada actual; cada punto es clicable (salta de fase vía
   window.masterGoToPhase, torre-recorrido.js). Solo el punto activo muestra su nombre —
   los demás son puntos sin texto, a propósito (decisión explícita de Kevin: minimalista). */
.torre-tracker {
    position: fixed;
    top: 50%;
    left: 25px;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
}
.torre-tracker-line {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: 2px;
    background: rgba(255, 255, 255, 0.3);
    z-index: 0;
}
.torre-tracker-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.torre-tracker-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.torre-tracker-item:hover .torre-tracker-dot {
    transform: scale(1.15);
    border-color: #fff;
}
.torre-tracker-item.is-done .torre-tracker-dot {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}
.torre-tracker-item.is-active .torre-tracker-dot {
    width: 16px;
    height: 16px;
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.torre-tracker-label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.3s ease, opacity 0.25s ease;
}
.torre-tracker-item.is-active .torre-tracker-label {
    max-width: 160px;
    opacity: 1;
}

/* Móvil/tablet (2026-07-27): el riel vertical se convierte en barra horizontal debajo de
   "Volver a Preventa"/"Reiniciar recorrido" — en escritorio va a los lados porque ahí
   sobra espacio, pero en móvil las tarjetas de Modelos/Amenidades ocupan ~95% del ancho
   (ver @media 991px de arriba) y un riel fijo a la izquierda se les encimaría. */
@media (max-width: 991px) {
    .torre-tracker {
        top: 78px;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        align-items: flex-start;
        gap: 18px;
    }
    .torre-tracker-line {
        top: 6px;
        bottom: auto;
        left: 6px;
        right: 6px;
        width: auto;
        height: 2px;
    }
    .torre-tracker-item { flex-direction: column; gap: 6px; }
    .torre-tracker-label {
        text-align: center;
        font-size: 0.62rem;
    }
}
@media (max-width: 480px) {
    .torre-tracker { top: 64px; gap: 12px; }
    .torre-tracker-dot { width: 10px; height: 10px; }
    .torre-tracker-item.is-active .torre-tracker-dot { width: 12px; height: 12px; }
    .torre-tracker-label { font-size: 0.56rem; }
}

/* Refuerzo responsive de tarjetas (2026-07-24): mismo bloque que ya vive suelto en
   style.css dentro de un @media(max-width:991px) más grande de "Ajustes Generales"
   (WhatsApp/stats-action/etc., irrelevantes aquí) — se copian solo estas líneas,
   DESPUÉS del bloque de @media(max-width:768px) de arriba para que ganen en la
   cascada igual que en el sitio principal (ese bloque también viene después). */
@media (max-width: 991px) {
    .tight-card, .amenity-glass-card { grid-template-columns: 1.2fr 1fr; padding: 15px; margin: 0 auto; width: 95%; gap: 10px;}
    .model-name, .amenity-title { font-size: 1.6rem; }
    .model-m2, .amenity-level { font-size: 0.9rem; margin-bottom: 10px; }
    .amenity-description { font-size: 0.85rem; margin-bottom: 15px;}
    .view-wrapper { padding-top: 5px; margin-top: 5px; margin-bottom: 5px; }
}

#master-transition-wrapper {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--brand-dark);
}

.edificio-canvas-global {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.section-modelos-gsap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    background: transparent !important;
}

.model-scroll-card {
    pointer-events: auto;
}

.container-gsap {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    align-items: center;
}

#recorrido-foto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

#recorrido-foto.is-visible { opacity: 1; }

.edificio-scroll-hint {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    color: rgba(255, 255, 255, 0.8);
    font-size: 2rem;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: none;
}

@media (max-width: 991px) {
        .edificio-scroll-hint { display: block; }
        .edificio-scroll-hint.is-visible {
            opacity: 0.55;
            animation: edificioScrollHint 2.2s infinite ease-in-out;
        }
        @keyframes edificioScrollHint {
            0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
            50% { transform: translateX(-50%) translateY(-8px); opacity: 1; }
        }
}

#edificio-canvas,
#amenidades-canvas {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.cards-stack-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.model-scroll-card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    width: calc(100% - 10%);
    opacity: 0;
    visibility: hidden;
}

@media (min-width: 992px) {
        .model-scroll-card {
            transition: opacity 0.35s ease;
        }
        .model-scroll-card.is-shown {
            opacity: 1;
            visibility: visible;
        }
}

.tight-card {
    border-radius: 20px;
    padding: 38px;
    position: relative;
    width: 900px;
    max-width: 95%; 
    flex-shrink: 0; 
    display: grid;
    grid-template-columns: 1.2fr 1fr; 
    gap: 40px; 
    align-items: center; 
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.card-left { display: flex; flex-direction: column; }

.card-right { position: relative; display: flex; justify-content: center; align-items: center; }

.modelos-nav-panel {
    position: absolute;
    right: 80px; /* antes 24px — el botón fijo "Agenda una visita" (right:0, ~41px) se
                    encimaba con el panel; 80px deja ~39px de aire entre ambos. */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 5;

    pointer-events: auto;
}

.modelos-nav-btn {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--brand-dark);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    padding: 12px 20px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, color 0.2s ease;
}

.modelos-nav-btn:hover { background: #ffffff; }

.modelos-nav-btn.is-active {
    background: var(--brand-dark);
    color: #ffffff;
    border-color: var(--brand-dark);
}

/* Keyframe propio (NO reutilizar el @keyframes gateShake compartido de más abajo/
   style.css, que usa esa misma clase .gate-shake para la pantalla de contraseña del
   sitio principal — esa no está centrada con translateY(-50%), este panel sí). Sin
   incluir translateY(-50%) en cada frame, la animación reemplaza por completo el
   transform del panel y pierde su centrado vertical durante el shake (bug real, visto
   2026-08-03: el panel "se iba muy abajo"). */
.modelos-nav-panel.gate-shake { animation: modelosNavShake 0.4s ease; }
@keyframes modelosNavShake {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    20%, 60% { transform: translateY(-50%) translateX(-8px); }
    40%, 80% { transform: translateY(-50%) translateX(8px); }
}

/* Aviso del candado — mismo cuidado que .modelos-nav-skip: nunca tocar `visibility`
   aquí, solo opacity/transform, para no pisar el visibility:hidden que GSAP pone en la
   sección padre al salir de Modelos. torre.js lo llena y muestra al sacudir, y lo
   desvanece solo (~2.5s) con un setTimeout. */
.modelos-gate-toast {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 12px;
    background: var(--brand-dark);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.modelos-gate-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Escape del candado — siempre visible junto a las 7 tarjetas (no depende del shake).
   IMPORTANTE: nunca tocar `visibility` aquí. GSAP oculta toda la sección padre
   (#modelos-departamentos) poniendo visibility:hidden al salir de Modelos; como
   visibility es heredable pero un descendiente puede pisarlo, ponerlo en visible aquí
   haría que el botón se quedara pegado en pantalla aunque la sección ya esté oculta
   (bug real, visto 2026-08-03). Solo opacity/display, que si no se tocan heredan bien. */
.modelos-nav-skip {
    margin-top: 4px;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    background: var(--brand-dark);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}
.modelos-nav-skip:hover { background: var(--brand-medium); }

.zoom-hint {
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(11, 43, 38, 0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.95rem;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.model-name {
    font-family: 'Playfair Display', serif;
    font-size: 3.3rem;
    color: var(--brand-dark);
    line-height: 1;
    margin-bottom: 5px;
}

.model-m2 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: #475569;
    font-weight: 300;
    display: block;
    margin-bottom: 16px;
}

.img-planta-compacta,
.img-render-compacta {
    width: 100%;
    max-height: 370px;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.2));
}

.amenities-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.05rem;
    color: #334155;
    font-weight: 500; 
}

.amenity-item i { 
    color: var(--brand-dark); 
    font-size: 1.25rem; 
    width: 25px; 
}

.view-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-top: 15px;
    padding-top: 20px; 
    margin-bottom: 25px;
    min-height: 80px;
}

.view-tag { flex: 1; }

.view-tag .overline {
    font-size: 0.85rem; 
    letter-spacing: 2.5px;
    color: var(--brand-dark);
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.view-tag p { 
    color: #334155; 
    font-size: 1.15rem; 
    font-weight: 500;
}

.mini-map-container {
    position: relative;
    width: 130px; 
    height: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-base, .map-overlay {
    width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.map-base { position: relative; z-index: 1; opacity: 0.8; }

.map-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; 
    animation: mapPulse 3s ease-in-out infinite; 
    z-index: 2;
}

@keyframes mapPulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.card-footer-compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-top: 25px;
}

.btn-cotizar {
    border: 1px solid var(--brand-dark);
    padding: 14px 35px; 
    font-size: 1.05rem; 
    color: var(--brand-dark);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase; 
    letter-spacing: 1px;
    transition: all 0.3s ease;
    white-space: nowrap; 
    text-align: center;
    border-radius: 4px; 
}

.btn-cotizar:hover { 
    background: var(--brand-dark); 
    color: #fff; 
}

@media (max-width: 992px) {
        .container-gsap {
            height: auto; 
            padding: 50px 0;
        }

        .cards-stack-wrapper {
            display: flex;
            flex-direction: column;
            gap: 40px; 
        }

        .model-scroll-card {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            transform: none;
            opacity: 1 !important; 
            visibility: visible !important;
        }


        .tight-card {
            width: 95%;
            padding: 15px;
            gap: 10px;
            grid-template-columns: 1.2fr 1fr;
        }

        .amenities-grid-compact {
            grid-template-columns: 1fr;
            gap: 6px;
        }

        .mini-map-container { width: 60px; }

        .view-wrapper { min-height: 0; gap: 10px; padding-top: 8px; margin-top: 8px; margin-bottom: 10px; }
        .view-tag .overline { font-size: 0.65rem; letter-spacing: 1px; color: #64748b; margin-bottom: 2px; }
        .view-tag p { color: #0f172a; font-size: 0.85rem; font-weight: 700; }

        .model-m2 { color: #475569; font-weight: 500; }
        .amenity-item { color: #334155; font-weight: 600; }
        .amenity-item i { color: var(--brand-dark); }

        .card-footer-compact { margin-top: 10px; }
        .btn-cotizar {
            background: var(--brand-dark);
            color: #fff;
            border: 1px solid var(--brand-dark);
            padding: 8px 15px;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
        }
        .btn-cotizar:hover { background: transparent; color: var(--brand-dark); }

        .modelos-nav-panel { display: none; }
}

@media (max-width: 768px) {

        .tight-card {
            padding: 20px;
        }
}

.section-amenidades {
    padding: 100px 0;
    background-color: transparent; 
}

.amenity-glass-card {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    padding: 50px;
    border-radius: 20px;
    width: 900px;
    max-width: 90%;
    margin-left: 10%; 
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.amenity-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.amenity-title {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    color: var(--brand-dark); 
    margin-bottom: 5px;
    line-height: 1;
}

.amenity-level {
    font-family: var(--font-body);
    font-size: 1.8rem;
    color: #475569;
    font-weight: 300;
    margin-bottom: 35px;
    display: block;
}

.amenity-description {
    font-size: 1.2rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 40px;
}

.amenity-checklist {
    list-style: none;
    padding: 0;
    margin: 0; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.amenity-checklist li {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: #334155;
    line-height: 1.4;
    display: flex; 
    align-items: flex-start;
    gap: 15px;
    font-weight: 500;
}

.amenity-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0; 
    margin-top: 2px; 
}

.amenity-checklist strong {
    color: var(--brand-dark);
    font-weight: 700;
}

.amenity-gallery {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column; 
    align-items: stretch;
    overflow: hidden; 
}

.gallery-track {
    display: flex;
    gap: 15px;
    overflow-x: auto; 
    scroll-snap-type: x mandatory;
    padding-bottom: 10px; 
    width: 100%;
    scrollbar-width: none;
}

.gallery-track::-webkit-scrollbar {
    display: none;
}

.gallery-img {
    flex: 0 0 100%;
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 12px; 
    scroll-snap-align: center; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    cursor: zoom-in; 
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.carousel-btn {
    background: rgba(11, 43, 38, 0.8);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.carousel-btn:hover {
    background: var(--brand-dark);
    transform: scale(1.1);
}

.carousel-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: rgba(11, 43, 38, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: var(--brand-dark);
    width: 20px; 
    border-radius: 10px;
}

.lightbox-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999; 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.lightbox-overlay.active .lightbox-img {
    transform: scale(1); 
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 45px;
    cursor: pointer;
    z-index: 10000;
    line-height: 1;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: var(--brand-accent);
}

@media (max-width: 992px) {

        .amenity-glass-card {
            grid-template-columns: 1.2fr 1fr;
            width: 95%;
            margin-left: auto;
            margin-right: auto;
            padding: 15px;
            gap: 10px;
        }
        .amenity-title {
            font-size: 1.6rem;
        }

        .amenity-description {
            font-size: 0.85rem;
            line-height: 1.5;
            margin-bottom: 15px;
        }
}

@media (max-width: 768px) {
        .model-scroll-card { 
            position: absolute; 
            top: 50%; 
            transform: translateY(-50%); 
            width: 100%; 
            display: flex; 
            justify-content: center; 
            visibility: hidden; 
            z-index: 10; 
        }

        .amenity-anim-card {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            visibility: hidden;
            z-index: 10;
        }

        .tight-card, .amenity-glass-card {
            border-radius: 15px;
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            width: 95%;
            max-width: 450px;
            margin: 0 auto;
        }
        .model-name, .amenity-title { font-size: 2.5rem; }
        .model-m2, .amenity-level { font-size: 1.2rem; }

        .tight-card, .amenity-glass-card {
            grid-template-columns: 1.2fr 1fr;
            padding: 15px;
            gap: 10px;
        }
        .model-name { font-size: 1.6rem; }
        .model-m2 { font-size: 0.9rem; margin-bottom: 10px; }
        .amenity-title { font-size: 1.6rem; }
        .amenity-level { font-size: 0.9rem; margin-bottom: 10px; }

        .amenities-grid-compact, .amenity-checklist { gap: 6px; }
        .amenity-item, .amenity-checklist li { font-size: 0.75rem; gap: 8px; }
        .amenity-icon { width: 16px; height: 16px; }

        .img-render-compacta, .gallery-img { height: 180px; }

        .carousel-controls { gap: 15px; margin-top: 10px; }
        .carousel-btn { width: 28px; height: 28px; font-size: 0.8rem; }
        .carousel-dots { gap: 6px; }
        .dot { width: 6px; height: 6px; }
        .dot.active { width: 16px; }
}

.section-stats {
    background-color: rgba(6, 18, 15, 0.90);
    color: #fff;
    padding: 120px 20px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
}

.closing-stack {
    position: relative;
    width: 100%;
    height: 62vh;
    margin-bottom: 40px;
}

.closing-pane {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.closing-stats { opacity: 0; visibility: hidden; }

.closing-interiorismo { opacity: 1; }

.interiorismo-header { text-align: center; margin-bottom: 40px; }

.interiorismo-header .overline {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 4px;
    color: var(--brand-accent);
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.interiorismo-header h2 {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: #fff;
    font-weight: 400;
    letter-spacing: 2px;
}

.interiorismo-carousel {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.interiorismo-track {
    display: flex;
    width: max-content;
    animation: interiorismo-scroll 90s linear infinite;
}

.interiorismo-carousel:hover .interiorismo-track { animation-play-state: paused; }

.interiorismo-item {
    flex: 0 0 auto;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
}

.interiorismo-photo {
    height: 320px;
    width: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interiorismo-photo:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.interiorismo-caption {
    margin-top: 8px;
    text-align: right;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
}

@keyframes interiorismo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brand-cream);
    border: none;
    color: var(--brand-dark);
    font-size: 2.2rem;
    line-height: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 2;
}

.lightbox-arrow:hover { background: #f0e6c8; }

.lightbox-prev { left: 10%; }

.lightbox-next { right: 10%; }

.lightbox-overlay.is-amenity .lightbox-img {
    width: min(92vw, 1500px);
    height: auto;
    max-width: none;
    max-height: 92vh;
}

.lightbox-overlay.is-amenity .lightbox-prev { left: 3%; }

.lightbox-overlay.is-amenity .lightbox-next { right: 3%; }

@media (max-width: 991px) {
        .closing-stack { height: 72vh; margin-bottom: 18px; }
        .interiorismo-header { margin-bottom: 18px; }
        .interiorismo-header h2 { font-size: 1.9rem; }
        .interiorismo-header .overline { font-size: 0.7rem; margin-bottom: 8px; }
        .interiorismo-item { margin-right: 14px; }
        .interiorismo-photo { height: 190px; border-radius: 6px; }
        .interiorismo-caption { font-size: 0.75rem; margin-top: 6px; }

        .closing-stats .stats-header { margin-bottom: 18px; }
        .closing-stats .stats-grid { gap: 14px; margin-bottom: 18px; }
        .closing-stats .stat-item { width: 105px; height: 105px; }

        .lightbox-arrow { width: 44px; height: 44px; font-size: 1.7rem; }
        .lightbox-prev { left: 8%; }
        .lightbox-next { right: 8%; }
}

.stat-circle-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg); 
    opacity: 0.7;
}

.stat-circle-svg circle {
    fill: none;
    stroke: var(--brand-accent);
    stroke-width: 1.5px;
    stroke-dasharray: 434; 
    stroke-dashoffset: 434; 
}

.stats-header {
    margin-bottom: 80px;
}

.stats-header .overline {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 4px;
    color: var(--brand-accent);
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

.stats-header h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #fff;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.stats-header p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.stat-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
}

.stat-content {
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.stat-number {
    font-family: var(--font-body);
    font-size: 7.5rem;
    font-weight: 200;
    color: #fff;
    line-height: 1;
}

.stat-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: left;
    max-width: 120px;
    line-height: 1.4;
}

a.stat-text-fuente {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 5px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a.stat-text-fuente:hover {
    color: #fff;
    text-decoration-color: #fff;
}

.stats-action {
    margin-top: 40px;
}

.stats-action .btn-outline,
.btn-outline {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 12px 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    cursor: pointer;
    max-width: 250px;
    margin: 0 auto;
    transition: all 0.3s ease;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
}

.stats-action .btn-outline:hover,
.btn-outline:hover {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-dark);
}

@media (max-width: 768px) {
        .section-stats {
            padding: 100px 20px 25px;
            justify-content: flex-start; 
        }
        .stats-header {
            margin-bottom: 25px;
        }
        .stats-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 1.5rem;
            letter-spacing: 1px;
            line-height: 1.2;
        }
        .stats-header .overline { font-size: 0.7rem; margin-bottom: 8px; }
        .stats-header p {
            font-size: 0.85rem;
            line-height: 1.5;
            max-width: 600px;
            margin: 0 auto;
        }

        .stats-grid {
            flex-direction: column;
            align-items: center;
            gap: 20px;
            margin-bottom: 30px;
        }
        .stat-item {
            width: 120px;
            height: 120px;
            margin: 0 auto;
        }
        .stat-circle-svg {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
            z-index: 1;
        }
        .stat-circle-svg circle { 
            stroke-dasharray: 496; 
            stroke-dashoffset: 496; 
        }
        .stat-content { 
            position: relative;
            gap: 10px; 
            flex-direction: row; 
            justify-content: center;
            margin-top: 0;
        }
        .stat-number {
            font-size: 3rem;
            font-weight: 300;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        .stat-text { 
            font-size: 0.65rem; 
            letter-spacing: 2px; 
            line-height: 1.3; 
            text-align: left;
        }

        .btn-outline {
            font-size: 0.68rem;
            padding: 8px 20px;
            letter-spacing: 1px;
            max-width: 220px;
            white-space: nowrap; 
        }
        .stats-action { margin-top: 20px; }
}

/* Refuerzo responsive de Stats (2026-07-24): mismas 4 líneas que ya viven sueltas en
   style.css dentro del @media(max-width:991px) "Ajustes Generales" (WhatsApp/scroll-
   horizontal/etc., irrelevantes aquí) — se copian solo estas, SIN el
   ".stats-action { display:none }" de ese mismo bloque: ahí oculta el botón "Solicitar
   Informes" en móvil porque compite con el WhatsApp flotante del sitio principal, un
   conflicto que no existe en /torre (no tiene botón de WhatsApp), así que aquí el botón
   se queda visible en móvil. */
@media (max-width: 991px) {
    .stats-grid { gap: 20px; flex-direction: column; align-items: center; margin-bottom: 30px; }
    .stat-item { transform: scale(0.95); }
    .stats-header h2 { font-size: 1.6rem; }
    .stats-header p { font-size: 0.9rem; padding: 0 10px; }
}

/* .torre-volver/.torre-reiniciar en pantallas angostas: mismo par de píldoras pero más
   compactas para que quepan juntas sin encimarse sobre el contenido de Interiorismo. */
@media (max-width: 480px) {
    .torre-volver, .torre-reiniciar { padding: 8px 12px; font-size: 0.72rem; top: 16px; }
    .torre-volver { left: 16px; }
    .torre-reiniciar { right: 16px; }
}

/* Panel lateral de contacto rápido — copiado de .preventa-cta-lateral/.preventa-drawer*
   en preventa.css (mismos nombres de clase a propósito, para resincronizar a mano si
   cambia allá). Sin .is-pulsing/.is-inverted: esos dependían de secciones (Modelos
   normal-scroll, Ubicación) que no existen igual aquí — el botón se queda en su estado
   base siempre. z-index 2000, por debajo del lightbox (9999/10000) y por encima de los
   demás elementos fijos de esta página (1000). */
.preventa-cta-lateral {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: var(--brand-dark);
    color: #fff;
    border: none;
    padding: 22px 12px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    z-index: 2000;
    transition: background 0.2s ease, padding-right 0.2s ease;
}

.preventa-cta-lateral:hover {
    background: var(--brand-medium);
    padding-right: 16px;
}

.preventa-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
}

.preventa-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.preventa-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.preventa-drawer.is-open .preventa-drawer-backdrop { opacity: 1; }

.preventa-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    max-width: 560px;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    padding: 70px 50px 50px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
}

.preventa-drawer.is-open .preventa-drawer-panel { transform: translateX(0); }

.preventa-drawer-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.preventa-drawer-logo {
    height: 46px;
    display: block;
    margin-bottom: 26px;
}

.preventa-drawer-intro {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 380px;
}

.preventa-drawer-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.preventa-drawer-field label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--brand-dark);
    margin-bottom: 8px;
}

.preventa-drawer-field input,
.preventa-drawer-field select,
.preventa-drawer-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid rgba(0, 73, 68, 0.2);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--brand-dark);
    background: #f7f5ef;
    outline: none;
    transition: border-color 0.2s ease;
}

.preventa-drawer-field textarea {
    resize: vertical;
    min-height: 80px;
}

.preventa-drawer-field input:focus,
.preventa-drawer-field select:focus,
.preventa-drawer-field textarea:focus { border-color: var(--brand-medium); }

.modelos-precio-disclaimer {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 10px;
}

.preventa-drawer-field .modelos-precio-disclaimer {
    color: rgba(0, 73, 68, 0.55);
    margin-top: 8px;
}

.preventa-drawer-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #555;
    line-height: 1.5;
}

.preventa-drawer-checkbox input {
    margin-top: 3px;
    accent-color: var(--brand-medium);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.preventa-drawer-submit {
    background: var(--brand-dark);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 6px;
}

.preventa-drawer-submit:hover { background: var(--brand-medium); }
.preventa-drawer-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.preventa-drawer-success {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--brand-dark);
    line-height: 1.6;
}

/* Botón "Agenda una visita" + drawer: quitado por completo en móvil/tablet (≤991px,
   mismo umbral que usa .modelos-nav-panel y el candado en torre-recorrido.js) — a
   petición de Kevin 2026-08-03, no tiene caso ahí. (Antes fue una barra fija abajo para
   no tapar las tarjetas de Modelos/Amenidades; ya no aplica al estar oculto.) El drawer
   en sí no necesita su propia regla: sin el botón que lo abre, nunca gana la clase
   .is-open. */
@media (max-width: 991px) {
    .preventa-cta-lateral { display: none; }
}