/* 
   Premium Design System - Apple Style
   Prefix: .premium- 
*/

/* Custom Fonts */
@font-face {
    font-family: 'Gotham Black';
    src: url('fonts/Gotham-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adobe Garamond Pro Bold';
    src: url('fonts/AGaramondPro-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adobe Garamond Pro Regular';
    src: url('fonts/AGaramondPro-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('fonts/Gotham-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --p-color-bg: #000000;
    --p-color-text: #f5f5f7;
    --p-color-text-muted: #86868b;
    --p-color-accent: #ffd207;
    /* Lio Gold */

    --p-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* For impactful headers */
    --p-font-body: 'Inter', sans-serif;
    /* For clean reading */

    --p-ease-apple: cubic-bezier(0.25, 1, 0.5, 1);

    --p-spacing-section: 120px;
}

/* Base */
body.premium-mode {
    background-color: var(--p-color-bg);
    color: var(--p-color-text);
    font-family: var(--p-font-body);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body.room-page #wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background-color: #000 !important;
}

h1,
h2,
h3,
h4 {
    font-family: var(--p-font-display);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5em;
}

/* Utilities */
.text-gradient-gold {
    background: linear-gradient(180deg, #FFD207 0%, #d4af37 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-apple {
    background: linear-gradient(180deg, #ffffff 0%, #86868b 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sections */
.premium-section {
    position: relative;
    padding: var(--p-spacing-section) 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* 1. Hero */
.hero-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 100vh;
    min-height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
    padding-bottom: 10vh;
    /* Match Lio */
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto !important;
    height: auto !important;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    z-index: -2;
}



.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Darken video + Dot Pattern to hide pixelation */
    background:
        linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
        radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 100% 100%, 4px 4px;
    /* Tiny dots pattern */
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 1;
    margin-top: 120px !important;
    /* Standard spacing (Match Lio) */
}

.hero-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 110px);
    letter-spacing: -2px;
    margin-bottom: -10px;
    color: #03b7eb;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    line-height: 1;
    opacity: 0;
    /* Animates in */
    transform: translateY(30px);
}

.hero-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 48px);
    color: #ffffff;
    opacity: 0;
    transform: translateY(30px);
    margin-top: 0;
}

/* --- Hero Redesign (Apple Keynote Style) --- */
.hero-greeting {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-weight: 200;
    /* Ultra Thin */
    font-size: clamp(1.5rem, 3vw, 40px);
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 0px;
    opacity: 0;
    transform: translateY(20px);
}

.hero-stats-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 60px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
}

.stat-item {
    text-align: center;
    /* border-right: 1px solid rgba(255, 255, 255, 0.2); */
    /* Cleaner without borders maybe? Let's try without first */
    padding: 0 10px;
    position: relative;
}

/* Separator line between items (pseudo-element) */
.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.stat-rank {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 60px);
    color: #ffcc00;
    /* Gold for rank */
    line-height: 1;
    margin-bottom: 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.stat-name {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    font-size: clamp(0.9rem, 1.5vw, 18px);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #86868b;
    /* Apple gray */
    letter-spacing: 0.5px;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .hero-stats-grid {
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
    }

    .stat-item:not(:last-child)::after {
        display: none;
        /* No vertical separators on mobile stack */
    }

    .stat-rank {
        font-size: 48px;
    }
}

.hero-micro {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    margin-top: 25vh;
    font-size: clamp(1.5rem, 4vw, 64px);
    color: #ffffff;
    line-height: 1.0;
    opacity: 0;
    transform: translateY(30px);
}

#hero-btn {
    opacity: 0;
    transform: translateY(30px);
}

/* --- EDITORIAL HERO LAYOUT (Split) --- */
.hero-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Push columns apart */
    width: 100%;
    max-width: 1300px;
    /* Constrain width */
    margin: 0 auto;
    height: 100%;
    position: relative;
    z-index: 2;
    padding: 0 5%;
    /* Side gutters */
}

.hero-col-left {
    flex: 1;
    max-width: 600px;
    text-align: left;
    /* Editorial alignment */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-col-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* Align grid to right */
    align-items: center;
}

.hero-description {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 24px;
    font-weight: 300;
    max-width: 480px;
    /* Readable line length */
    opacity: 0;
    transform: translateY(20px);
}

/* Override standard Hero centering */
.hero-section {
    padding: 0;
    /* Let wrapper handle padding */
    display: block;
    /* Remove flex column centering */
}

@media (max-width: 991px) {
    .hero-content-wrapper {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 20px;
        /* Clear fixed dock */
    }

    .hero-col-left {
        max-width: 100%;
        text-align: center;
        margin-bottom: 40px;
        align-items: center;
    }

    .hero-col-right {
        justify-content: center;
        width: 100%;
    }

    .hero-description {
        margin: 20px auto 0;
    }
}

/* --- FLOATING DOCK MENU (Godly Style) --- */
.floating-dock-container {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none;
    /* Allow clicking through the area around the dock */
}

.floating-dock {
    pointer-events: auto;
    border-radius: 999px;
    /* Pill shape */
    padding: 2px 8px 2px 32px;
    /* Reduced vertical to 2px to fit bigger logo in 64px dock */
    /* Tight right (8px), breathing left (32px), shorter vertical (2px) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Push logo left, links right */
    gap: 8px;
    /* Fallback gap */
    width: 85%;
    /* Slightly narrower than 90% */
    max-width: 1200px;
    /* Cap width */
    height: 64px;
    /* Reduced by 6px (70px -> 64px) */
    position: relative; /* Needed for ::before */
    z-index: 10;
}

/* Glass effect moved to ::before to avoid clipping child backdrop-filters */
.floating-dock::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(18, 18, 20, 0.35);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    transition: all 0.3s ease;
}

.floating-dock:hover::before {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 25px 50px rgba(0, 0, 0, 0.6);
}



.dock-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    /* Allow full width */
    height: 60px;
    /* Restored size as requested */
    padding: 0 4px;
    /* Slight breathing room */
    border-radius: 0;
    background: transparent;
    margin-right: 14px;
    transition: transform 0.3s ease;
}

.dock-logo img {
    height: 56px;
    /* Restored size */
    /* Bigger logo */
    width: auto;
}

.dock-logo:hover {
    transform: scale(1.05);
    /* Subtle scale */
}

.dock-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    margin-left: auto;
    /* Force right alignment */
    margin-right: 6px;
    /* Shift left by 6px (moved 4px back right) */
    padding: 0;
    position: static;
    /* Prevent trapping absolute children */
}

.dock-item {
    display: block;
}

.dock-link {
    display: block;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    /* No underline */
    border-radius: 20px;
    transition: all 0.2s ease;
}

.dock-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.dock-cta {
    background: #ffd207;
    /* Yellow Accent */
    color: #000000;
    font-weight: 700;
    /* Extra bold for CTA */
    padding: 10px 24px;
    /* Slightly bigger target */
    border-radius: 30px;
    /* Pillow shape */
    margin-left: 10px;
    box-shadow: 0 4px 15px rgba(255, 210, 7, 0.3);
    /* Yellow glow */
    transition: all 0.3s ease;
}

.dock-cta:hover {
    background: #ffdb4d;
    /* Lighter yellow */
    color: #000000;
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 210, 7, 0.5);
}

/* --- MEGA MENU STYLES --- */
.has-dropdown {
    position: static;
    /* Let menu align to Dock */
    height: 100%;
    display: flex;
    align-items: center;
}

.mega-menu {
    position: absolute;
    top: 100%;
    transform: translateY(20px);
    width: 490px;
    background: rgba(18, 18, 20, 0.70);
    /* Más oscuro para áreas grandes pero manteniendo transparencia */
    backdrop-filter: blur(40px) saturate(180%);
    /* Apple Liquid Glass Effect (Ajustado) */
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Exact Match border */
    border-radius: 38px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px rgba(0, 0, 0, 0.5);
    left: auto;
    /* Unset center */
    right: 0;
    /* Align Right */
    /* Inner light + Deep shadow */
    margin-top: 10px;
    /* Move up 4px more (was 14px) */
}

/* Hover logic: Show menu when hovering the parent LI */
.has-dropdown:hover .mega-menu,
.mega-menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Fix: Remove TranslateX(-50%) */
}

.mega-menu-content {
    display: grid;
    grid-template-columns: 220px 1fr;
    /* Narrow Links (220px) | Wide Image */
    gap: 10px;
}

.mega-menu-links {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mega-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #999999;
    /* Lighter gray */
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-weight: 600;
}

.mega-item {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Reduced gap */
    padding: 6px 20px;
    /* Ultra Compact height, roomy sides */
    border-radius: 999px;
    /* Full Pill Shape */
    text-decoration: none;
    transition: background 0.2s ease;
}

.mega-item:hover {
    background: rgba(255, 255, 255, 0.08);
    /* Brighter hover */
}

/* Icon removed */

.mega-text {
    display: flex;
    flex-direction: column;
}

.mega-title {
    color: #ffffff;
    font-weight: 800;
    /* Extra Bolder */
    font-size: 1.4rem;
    /* Smaller Title */
    margin-bottom: 0px;
    /* Closer to subtitle */
    line-height: 1;
    /* Tighter line height */
}

.mega-desc {
    color: #cccccc;
}

/* --- Room Specific Hover Colors --- */
/* 1. Lio Mundial (Celeste) */
.mega-menu-links .mega-item:nth-child(1):hover .mega-title {
    color: #609db8 !important;
}

.mega-menu-links .mega-item:nth-child(1):hover {
    background: rgba(96, 157, 184, 0.15) !important;
}

/* 2. El Bosque Maldito (Lime Green) */
.mega-menu-links .mega-item:nth-child(2):hover .mega-title {
    color: #ccff66 !important;
}

.mega-menu-links .mega-item:nth-child(2):hover {
    background: rgba(204, 255, 102, 0.15) !important;
}

/* 3. El Taller (Neon Magenta) */
.mega-menu-links .mega-item:nth-child(3):hover .mega-title {
    color: #FF00CC !important;
}

.mega-menu-links .mega-item:nth-child(3):hover {
    background: rgba(255, 0, 204, 0.15) !important;
}

/* Image Side */
.mega-menu-image {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    height: 100%;
    min-height: 200px;
    /* Ensure content stays inside */
    z-index: 1;
}

.mega-menu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    /* Force cover */
    border-radius: 32px;
    /* Double check for some browsers */
    transition: transform 0.5s ease;
}

/* Overlay removed */

.mega-menu-image:hover img {
    transform: scale(1.05);
}

/* Mobile Dock Modifications */
/* Mobile Dock Modifications */
@media (max-width: 991px) {
    .floating-dock-container {
        top: 20px;
        /* Keep top consistent */
    }

    .floating-dock {
        padding: 8px 16px;
        width: calc(100% - 30px);
        /* Wide pill */
        max-width: 400px;
        /* Don't get too wide on tablets */
        justify-content: space-between;
        /* Logo left, Hamburger right */
    }

    .dock-logo img {
        height: 75px;
        /* +20% (was 60px) */
        /* Much bigger on mobile as requested */
    }

    /* Maybe hide some secondary links on very small screens */
    .hide-mobile {
        display: none;
    }
}

/* --- HERO BACKGROUND (Static + Ken Burns) --- */
.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.15);
        /* Subtle zoom */
    }
}



.hero-title {
    font-size: 6.2rem;
    line-height: 0.9;
}

.hero-subtitle {
    font-size: 2.9rem;
    margin-top: 1rem;
}

.hero-micro {
    font-size: 3rem;
    margin-top: 45vh;
    line-height: 1;
}


/* Apple Style Button */
.apple-button {
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #03b7eb;
    color: #ffffff;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 600;
    display: inline-block;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.apple-button:hover {
    transform: scale(1.02);
    opacity: 0.9;
    color: #ffffff;
}

/* Sticky CTA */
.sticky-cta {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.5s var(--p-ease-apple);
}

.sticky-cta.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Frase Madre (Gradient Reveal) */
.frase-madre-container {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.frase-madre-text {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    background: linear-gradient(90deg, #86868b 0%, #ffffff 50%, #86868b 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
    /* Simple fallback, GSAP will override */
}

/* 3. Bento Grid (Three Axes) */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.bento-card {
    background: rgba(28, 28, 30, 0.6);
    /* Apple dark gray */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.4s var(--p-ease-apple), background 0.4s;
}

.bento-card:hover {
    transform: scale(1.02);
    background: rgba(44, 44, 46, 0.8);
}

.bento-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.bento-title {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
}

.bento-desc {
    font-size: 1rem;
    color: var(--p-color-text-muted);
    line-height: 1.5;
}

/* 4. Scrollytelling (History) */
.scrolly-section {
    display: flex;
    min-height: 100vh;
    padding: 0;
}

.scrolly-visual {
    width: 50%;
    position: sticky;
    top: 0;
    height: 100vh;
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in-out;
}

/* Mobile visual fix */
@media (max-width: 768px) {
    .scrolly-section {
        flex-direction: column;
    }

    .scrolly-visual {
        width: 100%;
        height: 40vh;
        position: relative;
    }

    .scrolly-content {
        width: 100% !important;
        padding-bottom: 100px;
    }
}

.scrolly-content {
    width: 50%;
    padding: 50px;
}

.scrolly-block {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0.3;
    transition: opacity 0.5s;
}

.scrolly-block.active {
    opacity: 1;
}

.scrolly-text-title {
    font-size: 1.25rem;
    color: var(--p-color-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}


/* --- Responsive Utilities --- */
.show-mobile {
    display: none;
}

.hide-mobile {
    display: flex;
    /* Default for dock links */
}

@media (max-width: 1280px) {
    .show-mobile {
        display: block;
    }

    .hide-mobile {
        display: none !important;
    }
}

/* --- Mobile Menu Trigger --- */
.dock-mobile-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: none;
    /* Hidden on desktop */
    justify-content: center;
    align-items: center;
}

@media (max-width: 1280px) {
    .dock-mobile-trigger {
        display: flex;
        /* Show on mobile */
    }
}

.hamburger-lines {
    width: 24px;
    height: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.line {
    width: 100%;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
    margin: 0;
    padding: 0;
}

.dock-mobile-trigger.active .line1 {
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
}

.dock-mobile-trigger.active .line2 {
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 0;
}

/* --- Mobile Menu Overlay --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    z-index: 999;
    /* Below dock (1000) so X button on dock works? No, dock is 1000. Wait, trigger is IN dock. Overlay needs to be below dock? or Trigger z-index > Overlay. */
    /* Let's put overlay at 900, dock at 1000. */
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 120px;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mobile-link {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    font-size: 1.5rem;
    /* Reduced from 2rem (Standard Mobile Size) */
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.mobile-cta {
    font-size: 1.8rem !important;
    /* Reduced from 2.2rem */
    margin-top: 10px;
}

.mobile-menu-overlay.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-overlay.active .mobile-link:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu-overlay.active .mobile-link:nth-child(2) {
    transition-delay: 0.2s;
}

.mobile-menu-overlay.active .mobile-link:nth-child(3) {
    transition-delay: 0.3s;
}

.mobile-menu-overlay.active .mobile-link:nth-child(4) {
    transition-delay: 0.4s;
}

.mobile-menu-overlay.active .mobile-link:nth-child(5) {
    transition-delay: 0.5s;
}

.scrolly-text-body {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 600;
    line-height: 1.4;
}

/* 5. Mini Recorrido */
.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 20px 5%;
    width: 100%;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.carousel-item {
    min-width: 80vw;
    height: 60vh;
    scroll-snap-align: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    background: #333;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
}

/* 6. Footer & Reviews */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    text-align: left;
    margin-bottom: 80px;
}

.review-item blockquote {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--p-color-text);
    border: none;
    padding: 0;
    margin: 0 0 10px 0;
}

.review-stars {
    color: var(--p-color-accent);
    margin-bottom: 10px;
}

.tech-specs-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 30px 0;
}

.tech-spec {
    display: flex;
    align-items: center;
    color: var(--p-color-text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tech-spec i {
    margin-right: 8px;
    font-size: 1.2rem;
    color: #fff;
}

.sticky-bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: none !important;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: brightness(0.4);
    pointer-events: none;
}

/* MOBILE BACKGROUND FIX: Pure Black for Seamless Video */
@media (max-width: 1280px) {

    /* DEFAULT (Index): Pure Black Background for Logo Contrast */
    .sticky-bg-layer {
        background-color: #000000 !important;
        background-image: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /* ROOMS FIX: Hide sticky layer to reveal video */
    body.room-page .sticky-bg-layer {
        display: none !important;
    }

    .hero-image-container {
        display: none !important;
        /* Kill the static image */
    }

    /* DEFAULT (Index): Solid Black Overlay */
    .video-overlay {
        background: #000000 !important;
        /* Kill the dots/grid */
        opacity: 1 !important;
    }

    /* ROOMS FIX: Transparent Overlay to see video */
    body.room-page .video-overlay {
        background: none !important;
    }

    /* ALLOW NATURAL HEIGHT ON HERO */
    .hero-section {
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 0 !important;
    }
}

/* --- 2. EL GANCHO (Gradient Text) --- */
.gradient-text-hero {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(2rem, 5vw, 60px);
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(90deg, #ffffff, #888888, #ffffff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s linear infinite;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* --- 3. HIGHLIGHTS (Bento Grid) --- */
.bento-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 300px);
    /* Fixed height rows for layout */
    gap: 20px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.bento-card {
    position: relative;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text at bottom */
    padding: 30px;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Grid Areas */
.bento-large {
    grid-column: span 2;
    grid-row: span 2;
    background-size: cover;
    background-position: center;
}

.bento-medium {
    grid-column: span 1;
    grid-row: span 1;
}

/* Typography & Icons */
.bento-icon {
    font-size: 3rem;
    margin-bottom: auto;
    /* Pushes icon to top if flex is column */
    padding-top: 10px;
}

.bento-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 5px;
}

.bento-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.4;
}

/* Overlay for bg image readability */
.bento-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1;
}

.bento-content {
    position: relative;
    z-index: 2;
}

/* Mobile Grid */
@media (max-width: 768px) {
    .bento-grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        /* Auto height stacking */
        gap: 15px;
        padding: 0 15px;
    }

    .bento-large {
        grid-column: span 1;
        height: 400px;
        /* Force height on mobile for image card */
    }

    .bento-medium {
        height: 250px;
    }
}

@media (min-width: 992px) and (max-width: 1350px) {
    #primary-menu ul li a {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 14px !important;
    }
}

/* Fix for mobile menu toggle (burger) */
@media (max-width: 1280px) {
    #primary-menu-trigger {
        display: block !important;
    }

    #primary-menu>ul.show,
    #primary-menu>div>ul.show {
        display: block !important;
        background-color: #000000;
        margin-top: 0;
        padding-bottom: 20px;
    }

    #primary-menu ul li {
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* FORCE DESKTOP MENU ONLY ABOVE 1280px (Safe Zone) */
@media (min-width: 1281px) {
    #primary-menu-trigger {
        display: none !important;
    }

    #primary-menu>ul,
    #primary-menu>div>ul {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* RADICAL FIX: Treat 992px - 1280px as MOBILE (Burger Menu) */
/* Covers Tablets, Small Laptops (1280x800), and iPad Pro 12.9 (1024px) */
@media (min-width: 992px) and (max-width: 1280px) {
    #primary-menu-trigger {
        display: block !important;
        left: 20px !important;
        /* Adjusted for better alignment */
        top: 50% !important;
        transform: translateY(-50%) !important;
        position: absolute !important;
    }

    #primary-menu>ul,
    #primary-menu>div>ul {
        display: none !important;
    }

    #primary-menu.mobile-menu-open>ul,
    #primary-menu.mobile-menu-open>div>ul {
        display: block !important;
    }

    /* Fix "Giant Header" - Tighter styles for Tablet/Laptop */
    #header,
    #header-wrap {
        height: 70px !important;
        /* Fixed compact height */
        min-height: 70px !important;
    }

    #logo img {
        max-height: 50px !important;
        /* Smaller Logo */
        width: auto !important;
        max-width: 200px !important;
    }

    /* FIX HERO SPACING */
    .hero-section {
        padding-top: 120px !important;
    }
}

/* --- UNIFIED MOBILE STYLES (UP TO 1280px) --- */
@media (max-width: 1280px) {
    .mobile-block {
        display: block;
    }

    .review-desc-text {
        padding: 0 20px !important;
    }

    /* --- 1. HEADER & LOGO FIXES --- */

    #header,
    #header-wrap {
        background-color: #0a0a0a !important;
        height: auto !important;
        min-height: 70px !important;
        /* Compact base */
        background-image: none !important;
    }

    #header-wrap .container {
        padding: 10px 0 !important;
        position: relative !important;
        width: 100% !important;
        /* Allow full width container */
        max-width: none !important;
    }

    /* Center Logo */
    #logo {
        float: none !important;
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        height: auto !important;
    }

    #logo img {
        margin: 0 auto !important;
        display: inline-block !important;
        height: auto !important;
        width: auto !important;
        max-width: 200px !important;
        /* Generous logo size for tablet/small laptop */
        max-height: 80px !important;
    }

    /* Burger Position */
    #primary-menu-trigger {
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        float: none !important;
        z-index: 1000 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #primary-menu {
        float: none !important;
        margin-top: 0 !important;
    }

    /* Grid Adjustments for Tablet/Small Laptop */
    .env-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* --- 2. HERO VIDEO STANDARD COVER --- */
    .hero-video,
    .video-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
        /* Reset any centering hacks */
    }
}

/* Mobile Clean up (< 767px) - 1 Column Grid */
@media (max-width: 767px) {
    .env-grid {
        grid-template-columns: 1fr !important;
    }

    #logo img {
        max-width: calc(100% - 90px) !important;
        /* Tighter on small phones */
    }
}

/* Global Overflow Fix - REMOVED #wrapper to restore Sticky Parallax */
body {
    overflow-x: hidden !important;
    width: 100%;
}

/* --- 7. Apple Environment Cards --- */
.apple-env-section {
    background-color: #111111;
    /* Dark but not pure black */
    color: #f5f5f7;
    padding: 120px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
    /* Above sticky bg */
}

.env-header {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    text-align: left;
    padding: 0 20px;
    box-sizing: border-box;
}

.env-title {
    font-size: clamp(2.5rem, 5vw, 64px);
    font-weight: 600;
    line-height: 1.05;
    color: #f5f5f7;
    margin-bottom: 20px;
    letter-spacing: -0.015em;
}

.env-link {
    font-size: 19px;
    color: #0066cc;
    text-decoration: none;
    font-weight: 400;
}

.env-link:hover {
    text-decoration: underline;
}

.env-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Center grid on large screens */
}

.env-card {
    background: #1c1c1e;
    border-radius: 28px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    aspect-ratio: 1 / 0.85;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.env-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.env-icon {
    font-size: 48px;
    /* Emoji sizing */
    margin-bottom: 20px;
    line-height: 1;
}

/* Typography */
.env-card-header {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* color: #86868b; -> Old Gray */
    color: #ffcc00;
    margin-bottom: 15px;
}

.env-card-text-short {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    color: #f5f5f7;
}

.env-plus-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 36px;
    height: 36px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.2s;
}

.env-plus-btn:hover {
    background-color: #333;
    transform: scale(1.1);
}

.env-plus-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 3px;
}

/* --- Modal System --- */
.card-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    padding: 20px;
}

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

.card-modal-content {
    background: #fff;
    width: 100%;
    max-width: 680px;
    border-radius: 30px;
    padding: 60px;
    position: relative;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    /* Scroll internal if height is small */
    max-height: 90vh;
    overflow-y: auto;
}

.card-modal-overlay.active .card-modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Outer wrapper animation (when image is present) */
.modal-outer-wrapper {
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s;
}

.card-modal-overlay.active .modal-outer-wrapper {
    transform: scale(1);
    opacity: 1;
}

.modal-close-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 36px;
    height: 36px;
    background: #e8e8ed;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    color: #86868b;
}

.modal-close-btn:hover {
    background: #d2d2d7;
    color: #1d1d1f;
}

.modal-close-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 3px;
}

/* Modal Content Styles */
.modal-icon {
    font-size: 56px;
    margin-bottom: 20px;
    line-height: 1;
}

.modal-header {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffcc00;
    margin-bottom: 15px;
}

.modal-text-short {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    color: #1d1d1f;
    margin-bottom: 30px;
}

.modal-text-long {
    font-size: 21px;
    font-weight: 400;
    line-height: 1.5;
    color: #1d1d1f;
}

/* Fix for SVG Icons replacing Emojis */
.env-icon svg {
    width: 60px;
    height: 60px;
    display: block;
    margin-bottom: 10px;
    stroke-width: 1px;
}

.modal-icon svg {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 0 20px 0;
    stroke-width: 1px;
}

/* --- GLOBAL DARK MODE MODAL & ANIMATION --- */
.card-modal-content {
    background: #1c1c1e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Animation: Apple Spring Effect */
    transform: scale(0.9) translateY(20px) !important;
    opacity: 0 !important;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease !important;
}

.card-modal-overlay.active .card-modal-content {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}

.modal-text-short {
    color: #f5f5f7 !important;
    /* Apple white */
}

.modal-text-long {
    color: #d1d1d6 !important;
    /* Apple light gray */
}

.modal-close-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Mobile Modal Header too */
.modal-header {
    color: #ffcc00 !important;
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    width: 100% !important;
    display: block !important;
}


@media (max-width: 991px) {
    .env-grid {
        grid-template-columns: 1fr;
    }

    .env-card {
        aspect-ratio: auto;
        /* Allow flexible height */
        min-height: 300px;
    }

    .card-modal-content {
        padding: 40px 30px;
    }

    .modal-text-short {
        font-size: 24px;
    }
}

/* --- STORY SECTION (Apple Watch Style) --- */
.story-section {
    background-color: #000;
    padding: 100px 5%;
    color: #f5f5f7;
    position: relative;
    z-index: 10;
}

.story-title-wrapper {
    max-width: 980px;
    margin: 0 auto 80px auto;
    text-align: center;
}

.story-title {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    color: #f5f5f7;
}

.story-intro {
    font-size: 24px;
    color: #86868b;
    font-weight: 500;
    max-width: 700px;
    margin: 0 auto;
}

/* Layout Grid: Left Text, Right Sticky Image */
.story-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}

.story-text-col {
    width: 45%;
    padding-bottom: 200px;
    /* Space to clear content */
}

.story-visual-col {
    width: 45%;
    position: -webkit-sticky;
    position: sticky;
    top: 20vh;
    /* Center visually */
    height: 80vh;
    /* Interaction area */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.story-image-wrapper {
    width: 100%;
    /* Aspect Ratio for Image */
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
    background: #1d1d1f;
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s ease;
}

.story-img.active {
    opacity: 1;
    transform: scale(1);
}

/* Story Items (Accordion/List) */
.story-item {
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.3;
    /* Dimmed by default */
    transition: opacity 0.4s ease;
    cursor: pointer;
}

.story-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.story-item.active {
    opacity: 1;
}

.story-subtitle {
    font-size: 28px;
    font-weight: 600;
    color: #f5f5f7;
    margin-bottom: 15px;
}

.story-desc {
    font-size: 19px;
    line-height: 1.5;
    color: #a1a1a6;
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease;
}

.story-item.active .story-desc {
    height: auto;
    /* Open up */
    display: block;
}

/* Make sure text inside desc is visible when active */
.story-item.active .story-desc p {
    padding-bottom: 10px;
}

@media (max-width: 991px) {
    .story-layout {
        flex-direction: column-reverse;
    }

    .story-text-col,
    .story-visual-col {
        width: 100%;
    }

    .story-visual-col {
        position: relative;
        top: 0;
        height: auto;
        margin-bottom: 40px;
    }

    .story-desc {
        height: auto;
        /* Always show on mobile */
    }

    .story-item {
        opacity: 1;
    }
}

/* Main Section Background - Black */
.story-closer-look {
    background-color: #000 !important;
    /* Force Black */
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.story-header {
    margin-bottom: 60px;
    text-align: left;
    max-width: 980px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* Force White Title on Black Background & Increase Size */
.story-closer-look .section-title {
    color: #f5f5f7 !important;
    font-size: clamp(2.5rem, 5vw, 64px);
    /* Match .env-title size */
    font-weight: 600;
    letter-spacing: -0.015em;
}

.story-closer-look .section-subtitle {
    color: #86868b !important;
}

/* --- 8. Tech Specs Section --- */
.specs-section {
    background-color: #ffffff;
    padding: 100px 5%;
    display: flex;
    flex-direction: column;
    /* Stack Title + Content */
    align-items: center;
    /* Center the wrapper */
}

.specs-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Crucial for sticky */
    gap: 8%;
    max-width: 1200px;
    width: 100%;
    position: relative;
}

.specs-poster {
    width: 45%;
    border-radius: 0;
    /* Was 20px, causing unwanted cropping */
    overflow: visible;
    /* Was hidden */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 120px;
    /* Offset from top */
    align-self: flex-start;
    z-index: 5;
}

.specs-poster img {
    width: 100%;
    display: block;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Slightly stronger */
}

.specs-content {
    width: 50%;
    padding-top: 20px;
    padding-bottom: 20vh !important;
    /* Reduced from 80vh to be tighter */
    /* Remove static mask for GSAP implementation */
}

.specs-title {
    font-size: 32px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.2;
    margin-bottom: 20px;
}

.specs-desc {
    font-size: 19px;
    line-height: 1.5;
    color: #86868b;
    margin-bottom: 60px;
}

.specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 50px;
    column-gap: 30px;
    margin-bottom: 120px;
    /* Spacer before Particularidades */
}

.spec-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.spec-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1d1d1f;
    margin-bottom: 5px;
}

.spec-value {
    font-size: 64px;
    font-weight: 600;
    color: #00a8cc;
    /* Cyan from reference */
    line-height: 1;
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.spec-subtext {
    font-size: 15px;
    color: #86868b;
    line-height: 1.4;
}

/* New: Features / Particularidades Block */
.features-block {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.features-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #86868b;
    letter-spacing: 0.5px;
    margin-bottom: -20px;
}

.feature-item h3 {
    font-size: 28px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 15px;
    line-height: 1.2;
}

.feature-item p {
    font-size: 19px;
    line-height: 1.5;
    color: #86868b;
}

@media (max-width: 991px) {
    .specs-container {
        flex-direction: column;
        gap: 60px;
    }

    .specs-poster {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        position: relative;
        /* Disable sticky on mobile */
        top: 0;
    }

    .specs-content {
        width: 100%;
        text-align: center;
        padding-bottom: 0;
    }

    .specs-desc,
    .feature-item p {
        text-align: left;
        /* Or center if preferred */
    }

    .feature-item h3 {
        text-align: left;
    }

    .specs-grid {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .specs-grid {
        grid-template-columns: 1fr;
        /* Stack vertically on very small screens */
    }
}

/* --- 9. Apple Style Gallery Carousel --- */
.gallery-section {
    background: #fff;
    padding: 80px 0 120px 0;
    width: 100%;
    max-width: 100vw;
    /* Crucial: prevent page expand */
    position: relative;
    overflow: hidden;
    /* Contain children */
}

.gallery-title {
    text-align: left;
    font-size: clamp(2.5rem, 5vw, 64px);
    /* Match env-title */
    font-weight: 600;
    margin-bottom: 50px;
    color: #1d1d1f;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    /* padding: 0 5%; handled by section? */
}

.apple-carousel {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 5% 20px 5%;
    /* Bottom padding for scrollbar space */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    /* Prevent selection and drag issues */
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior-x: contain;
    /* Prevent chaining to body */
    width: 100%;
    /* Fill container */
    max-width: 100%;
    /* Strictly constrain */
    box-sizing: border-box;
}

/* Optional: Style the scrollbar nicely instead of hiding it */
.apple-carousel::-webkit-scrollbar {
    display: none;
}

.carousel-item-wrapper {
    flex: 0 0 auto;
    scroll-snap-align: center;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    width: 40vw;
    /* Much smaller */
    max-width: 500px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.carousel-item-wrapper:active {
    cursor: grabbing;
}

.carousel-item-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    /* CRITICAL: Prevent native drag ghosting which kills JS drag */
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

@media (max-width: 768px) {
    .carousel-item-wrapper {
        height: auto;
        /* Let width drive height */
        width: 70vw;
        /* Slightly smaller to see next item */
        max-width: 400px;
        aspect-ratio: 9/16;
        /* Maintain ratio */
    }

    .gallery-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
}

/* Scroll Navigation Buttons */
.carousel-nav-container {
    display: flex;
    justify-content: flex-end;
    /* Should push to right */
    gap: 15px;
    padding: 20px 5% 0 5%;
    width: 100%;
    /* Force full width */
    box-sizing: border-box;
    /* Handle padding correctly */
    position: relative;
    /* Ensure z-index works */
    z-index: 50;
    /* Higher than potential overlays */
}

.carousel-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e8e8ed;
    /* Apple Light Gray */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s;
    color: #1d1d1f;
    /* Re-enable clicks */
    position: relative;
    z-index: 51;
}

.carousel-nav-btn:hover {
    background-color: #d2d2d7;
}

.carousel-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.carousel-nav-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Ensure grab cursor works */
.apple-carousel.grabbing {
    cursor: grabbing;
    scroll-snap-type: none;
    /* Disable snap while dragging for smoothness */
}

/* Reviews Section Specifics */
.reviews-section {
    background: #101010;
    /* Apple Dark Gray */
    padding: 100px 0;
    width: 100%;
    max-width: 100vw;
    position: relative;
    overflow: hidden;
}

.review-card {
    flex: 0 0 auto;
    scroll-snap-align: center;
    background: #2c2c2e;
    /* Apple Secondary Dark System Background */
    width: 350px;
    height: 300px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.review-card:active {
    cursor: grabbing;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.review-stars {
    display: flex;
    gap: 2px;
}

.star-icon {
    width: 18px;
    height: 18px;
    fill: #FFD700;
    /* Gold */
}

.google-logo {
    width: 24px;
    height: 24px;
    fill: #fff;
    opacity: 0.8;
}

/* --- 5. FOOTER (Apple Style) --- */
.premium-footer {
    background-color: #000;
    padding: 60px 20px;
    border-top: 1px solid #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* --- 6. PRICING SECTION (Apple Specs Style) --- */
.pricing-section {
    padding: 120px 0;
    background-color: #101010;
    /* Apple Dark Gray */
    text-align: center;
}

.pricing-badge {
    display: inline-block;
    background-color: #e8f2ff;
    color: #0071e3;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 24px;
}

.pricing-title {
    font-size: 48px;
    font-weight: 600;
    color: #f5f5f7;
    margin-bottom: 60px;
    letter-spacing: -0.02em;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.pricing-card {
    background: #1d1d1f;
    border-radius: 24px;
    padding: 30px 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.pricing-players {
    font-size: 17px;
    font-weight: 500;
    color: #86868b;
    margin-bottom: 12px;
}

.pricing-amount {
    font-size: 28px;
    font-weight: 700;
    color: #f5f5f7;
    margin-bottom: 8px;
}

.pricing-total {
    font-size: 13px;
    color: #6e6e73;
}

.pricing-cta-container {
    margin-top: 60px;
}

/* --- 7. CATALOG SECTION (iPhone Style Rooms) --- */
.catalog-section {
    padding: 120px 0 60px 0;
    /* Extra top padding for larger header */
    background-color: #000;
    /* User requested Black background */
}

.catalog-header {
    text-align: left;
    /* Match usage of .env-header */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

.catalog-title {
    font-size: clamp(3rem, 6vw, 76px);
    /* Match .env-title override */
    font-weight: 600;
    color: #f5f5f7;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin-bottom: 5px;
}

.catalog-subtitle {
    font-size: 21px;
    font-weight: 400;
    color: #8c8c91;
    margin-top: 0;
    margin-bottom: 20px;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Mobile optimization for catalog cards */
@media (max-width: 768px) {
    .catalog-card {
        height: 450px !important;
        /* Shorter on mobile for better proportions */
    }
}

.catalog-card {
    background: #1c1c1e;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align content to bottom */
    text-decoration: none;
    transition: transform 0.4s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    height: 500px;
    /* Fixed height for Poster Look */
}

.catalog-card:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.catalog-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 28px;
    /* Match parent */
    overflow: hidden;
    margin: 0;
}

.catalog-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.catalog-card:hover .catalog-image {
    transform: scale(1.05);
    opacity: 0.6;
    /* Darken image on hover */
}

.ranking-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(44, 44, 46, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.catalog-content {
    position: relative;
    z-index: 2;
    text-align: left;
    padding: 120px 30px 30px 30px;
    /* Large top padding for gradient space */
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.0));
}

.catalog-room-title {
    font-size: 28px;
    font-weight: 700;
    color: #f5f5f7;
    margin-bottom: 5px;
    line-height: 1.1;
    text-transform: uppercase;
}

.catalog-room-micro {
    font-size: 15px;
    color: #86868b;
    margin-bottom: 0;
    font-weight: 500;
}

.catalog-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #ffcc00;
    /* Yellow Accent */

    /* Reveal Animation Logic */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
}

.catalog-card:hover .catalog-link {
    max-height: 30px;
    opacity: 1;
    margin-top: 10px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid .pricing-card:last-child {
        grid-column: span 2;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .catalog-image-wrapper {
        aspect-ratio: 1/1;
    }

    .catalog-title {
        font-size: 40px;
    }

    .pricing-title {
        font-size: 36px;
    }
}

/* --- SMALL MOBILE POLISH (< 500px) --- */
@media (max-width: 500px) {

    /* 1. Pricing Grid: Stack Vertically */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .pricing-grid .pricing-card:last-child {
        grid-column: span 1 !important;
    }

    /* 2. Info Cards: Prevent (+) button overlap */
    .env-card {
        padding-bottom: 90px !important;
        /* More breathing room at bottom */
        aspect-ratio: unset !important;
        /* Allow natural height growth */
        height: auto !important;
        min-height: 280px;
        /* Minimum standard height */
    }

    /* 3. Room Cards: Improve Legibility */
    .catalog-content {
        background: linear-gradient(to top, rgba(0, 0, 0, 1.0) 15%, rgba(0, 0, 0, 0.7) 50%, transparent 100%) !important;
        /* Stronger gradient */
        padding-bottom: 60px;
        /* More space at bottom */
    }

    .catalog-room-title {
        text-shadow: 0 4px 12px rgba(0, 0, 0, 1);
        /* Pure black shadow */
    }

    .catalog-room-micro {
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
}

.review-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #e5e5ea;
    /* Apple Light Gray for Dark Mode */
    font-weight: 500;
    margin: 20px 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-author {
    font-size: 14px;
    color: #a1a1a6;
    /* Lighter Gray */
    font-weight: 600;
    margin: 0;
}

@media (max-width: 768px) {
    .review-card {
        width: 80vw;
        height: auto;
        min-height: 250px;
    }
}

/* --- FIXED REVIEWS SCROLLER --- */
.reviews-scroller {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 5% 40px 5%;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Hide scrollbar for cleaner look, arrows are provided */
    scrollbar-width: none;
}

.reviews-scroller::-webkit-scrollbar {
    display: none;
}

/* --- 10. Apple 'Closer Look'/* Main Section Background - Black */
.story-closer-look {
    background-color: #000 !important;
    /* Keep Section Black */
    padding: 100px 5%;
    /* Add side padding for alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.story-header {
    margin-bottom: 60px;
    text-align: left;
    max-width: 980px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* Force White Title on Black Background & Increase Size */
.story-closer-look .section-title {
    color: #f5f5f7 !important;
    font-size: clamp(2.5rem, 5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.story-closer-look .section-subtitle {
    color: #86868b !important;
}

.closer-look-wrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1440px;
    margin: 0 40px;
    background: #000000;
    /* Black Container to match JPGs */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Subtle Grey Border */
    border-radius: 48px;
    padding: 0;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
    height: 760px;
    overflow: hidden;
    color: #f5f5f7;
}

/* Navigation Left (Overlay) */
.closer-look-left-col {
    position: relative;
    z-index: 10;
    /* Float above image */
    display: flex;
    flex-direction: row;
    width: auto;
    min-width: 350px;
    max-width: 450px;
    flex-shrink: 0;
    padding: 60px 0 0 60px;
    gap: 20px;
    align-items: flex-start;
    background: transparent;
    /* Remove the black block! */
    pointer-events: none;
    /* Allow clicks through to image if needed */
}

/* Enable clicks on interactive elements */
.nav-controls,
.closer-look-nav {
    pointer-events: auto;
}

.nav-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    position: sticky;
    top: 60px;
}

.nav-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1c1c1e;
    /* Dark Arrow Bg */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    color: #f5f5f7;
    /* White Icon */
}

.nav-arrow:hover {
    background: #2c2c2e;
    transform: scale(1.05);
    /* Slight pop */
}

.nav-arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.closer-look-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: flex-start;
    /* Prevent stretching */
}

.nav-item {
    background: rgba(28, 28, 30, 0.65);
    /* Translucent */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Subtle border */
}

.nav-item.active {
    background: rgba(44, 44, 46, 0.85);
    /* Slightly more opaque active */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.nav-item-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 24px;
    /* More padding */
}

.pill-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #3a3a3c;
    color: #f5f5f7;
    font-size: 18px;
    font-weight: 500;
    transition: transform 0.6s, background 0.6s, color 0.6s;
    flex-shrink: 0;
}

.nav-item.active .pill-icon {
    transform: rotate(45deg);
    background: #fff;
    /* Active Icon White */
    color: #000;
}

/* Disable rotation for numbered steps */
#how-to-play .nav-item.active .pill-icon {
    transform: none !important;
}

.pill-text {
    font-size: 19px;
    /* Slightly larger */
    font-weight: 600;
    color: #f5f5f7;
    /* White Text */
    white-space: nowrap;
}

/* Accordion Content */
.nav-item-content {
    max-height: 0;
    opacity: 0;
    padding: 0 0;
    /* No horizontal padding when closed */
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-item.active .nav-item-content {
    max-height: 400px;
    max-width: 360px;
    /* Allow expansion */
    opacity: 1;
    padding: 0 24px 24px 24px;
}

.nav-item-content p {
    font-size: 16px;
    line-height: 1.5;
    color: #d1d1d6;
    /* Light Gray Text */
    margin-bottom: 12px;
    width: 300px;
    /* Fixed text width to prevent reflow */
}

.nav-item-content p strong {
    color: #ffcc00;
}

.nav-item-content p:last-child {
    margin-bottom: 0;
}


/* Visual Stage Right */
/* Visual Stage - Now Full Background */
.closer-look-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 32px;
    background: transparent;
    /* Transparent so wrapper color shows */
}

.stage-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Remove padding, let it fill */
}

.stage-img,
.stage-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Contain to show wrapper background */
    object-position: center;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
    /* Slower */
    /* Slide + Fade */
    transform: translateX(0) scale(1);
    opacity: 1;
    will-change: transform, opacity;
}

.stage-img.slide-out,
.stage-video.slide-out {
    transform: translateX(-200px) scale(0.95);
    /* Further Left */
    opacity: 0;
    /* Fade Out */
}

.stage-img.slide-in-start,
.stage-video.slide-in-start {
    transition: none;
    transform: translateX(200px) scale(1);
    /* Start Further Right */
    opacity: 0;
    /* Hidden */
}

/* Ensure Video is hidden by default if simpler */
.stage-video {
    display: none;
    /* JS will toggle display block + opacity */
}

.stage-video.active {
    display: block;
}

/* Floating Info Card */
.stage-info-card {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 320px;
    background: rgba(28, 28, 30, 0.8);
    /* Dark Glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 10;
}

.info-card-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #86868b;
    letter-spacing: 0.5px;
}

.info-card-content p {
    font-size: 17px;
    line-height: 1.4;
    color: #f5f5f7;
    margin-bottom: 10px;
}

.info-card-content p:last-child {
    margin-bottom: 0;
}

/* Mobile Container Hidden by Default */
.mobile-story-container {
    display: none;
}

/* Translucency for Desktop Active Item */
.nav-item.active {
    background: rgba(44, 44, 46, 0.8);
    /* Dark Glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-item.active .pill-icon {
    background: #fff;
    color: #000;
}

.nav-item.active .pill-text {
    color: #fff !important;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .section-subtitle {
        font-size: 32px;
    }

    .closer-look-wrapper {
        display: flex;
        /* Restore flex for stack */
        flex-direction: column;
        padding: 0;
        gap: 0;
        background: transparent;
        box-shadow: none;
        height: auto;
        overflow: visible;
        border-radius: 0;
    }

    /* Hide Desktop Nav */
    .closer-look-left-col,
    .nav-controls {
        display: none !important;
    }

    /* Show Mobile Container - OVERLAY STYLE */
    .mobile-story-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        /* Remove gap, handle with margins */
        position: absolute;
        /* Float over image */
        bottom: 30px;
        left: 0;
        right: 0;
        z-index: 10;
        padding: 0 5px;
        /* Tiny padding for arrows not to touch literal pixels? User wanted edges. let's allow almost edge */
        margin-top: 0;
        width: 100%;
        pointer-events: none;
        /* Allow clicks through gaps */
    }

    /* Disable Slide Animation on Mobile - Fade Only */
    .stage-img,
    .stage-video,
    .stage-img.slide-out,
    .stage-video.slide-out,
    .stage-img.slide-in-start,
    .stage-video.slide-in-start {
        transform: none !important;
        transition: opacity 0.6s ease !important;
    }

    /* Remove Section Padding for Edge-to-Edge */
    .story-closer-look {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    .closer-look-stage {
        position: relative;
        /* Restore flow */
        width: 100%;
        height: 75vh;
        /* Taller for full screen feel */
        min-height: 500px;
        border-radius: 0;
        /* EDGE TO EDGE - No corners */
        margin-bottom: 0;
        /* No margin needed, overlay handles it */
        z-index: 1;
        background: #000;
        overflow: hidden;
        /* Clip image corners */
        margin-left: -20px;
        /* Force full width if parent has padding */
        margin-right: -20px;
        width: calc(100% + 40px);
    }

    .stage-image-container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .mobile-story-card {
        background: rgba(20, 20, 20, 0.85);
        /* Dark Mobile Glass */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
        flex-grow: 1;
        /* Take available width */
        min-height: auto;
        /* Let content dictate */
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
        pointer-events: auto;
        margin: 0 2px;
        /* Minimal gap from arrows */
    }

    .mobile-story-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 5px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mobile-story-desc {
        font-size: 14px;
        line-height: 1.4;
        color: #d1d1d6;
        transition: opacity 0.2s;
    }

    .mobile-story-desc p {
        margin-bottom: 5px;
    }

    .mobile-story-desc p strong {
        color: #ffcc00;
    }

    .mobile-story-desc p:last-child {
        margin-bottom: 0;
    }

    .mobile-arrow {
        width: 44px;
        /* Larger hit area */
        height: 44px;
        flex-shrink: 0;
        background: rgba(30, 30, 30, 0.8);
        /* Slightly darker/neutral */
        backdrop-filter: blur(10px);
        color: #fff;
        border-radius: 50%;
        /* Circle is fine, or user wanted "bordes"? Reference showed circles. Keep circle. */
        border: 1px solid rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto;
        transition: transform 0.2s ease;
        margin: 0;
        /* Reset margins */
    }

    .mobile-arrow:active {
        transform: scale(0.9);
    }

    /* Ensure image covers fully */
    .stage-img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    /* Hide desktop floating card if it somehow persists */
    .stage-info-card {
        display: none !important;
    }
}

/* Override Story Header to match other sections */
.story-header {
    max-width: 1200px !important;
    padding: 0 !important;
}

/* --- PREMIUM DROPDOWN MENU (Apple Style) --- */
/* Dropdown Container */
#primary-menu ul ul {
    background: rgba(30, 30, 30, 0.95) !important;
    /* Deep dark glass */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Remove green line */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    width: 240px !important;
    margin-top: 10px !important;
    /* Slight gap */
}

/* Remove Arrows/Triangles if present */
#primary-menu ul ul:after,
#primary-menu ul ul:before {
    display: none !important;
}

/* Dropdown Items */
#primary-menu ul ul li {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Dropdown Links */
#primary-menu ul ul li a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #cecece !important;
    padding: 12px 16px !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    border-radius: 10px !important;
    /* Inner Rounded */
    transition: all 0.2s ease !important;
    display: block !important;
    height: auto !important;
    line-height: 1.2 !important;
}

/* Hover State */
#primary-menu ul ul li:hover>a {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    padding-left: 16px !important;
    /* Static padding */
    transform: scale(1.02);
}

/* --- UPDATED DROPDOWN PILLS & INDICATORS --- */

/* More rounded container */
#primary-menu ul ul {
    border-radius: 24px !important;
    padding: 10px !important;
    width: 260px !important;
    /* Slightly wider for pill breathing room */
}

/* Pill Links */
#primary-menu ul ul li a {
    border-radius: 50px !important;
    /* Full Pill */
    padding: 12px 20px 12px 36px !important;
    /* Extra Left padding for dot */
    position: relative !important;
}

/* Colored Indicators (Circles) */
#primary-menu ul ul li a:before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #888;
    /* Fallback */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Specific Colors */
.menu-link-lio:before {
    background-color: #0071e3 !important;
    /* Blue */
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.6) !important;
}

.menu-link-bosque:before {
    background-color: #34c759 !important;
    /* Green */
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.6) !important;
}

.menu-link-taller:before {
    background-color: #ff3b30 !important;
    /* Red */
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.6) !important;
}

/* --- FINAL DROPDOWN REFINEMENT (Floating Pills) --- */

/* Make container transparent to let pills float */
#primary-menu ul ul {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 10px 0 !important;
    /* Vertical pad only */
    width: 280px !important;
    border-radius: 0 !important;
}

/* Individual Pill Items (Copying .nav-item style) */
#primary-menu ul ul li a {
    background: rgba(28, 28, 30, 0.85) !important;
    /* Darker than closer-look for readability */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 30px !important;
    /* Full rounded pill */
    margin-bottom: 8px !important;
    /* Space between pills */
    padding: 14px 20px 14px 44px !important;
    /* Space for Dot */
    color: #f5f5f7 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease, background 0.2s !important;
    display: block !important;
}

/* Hover Effect: Scale up slightly, NO text shift */
#primary-menu ul ul li:hover>a {
    background: rgba(44, 44, 46, 0.95) !important;
    transform: scale(1.02);
    /* padding-left removed to fix bug */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Colored Dots Indicators */
#primary-menu ul ul li a:before {
    content: '';
    position: absolute;
    left: 18px;
    /* Fixed position */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}

/* Specific Colors */
.menu-link-lio:before {
    background-color: #0071e3 !important;
    /* Blue */
    box-shadow: 0 0 8px rgba(0, 113, 227, 0.8) !important;
}

.menu-link-bosque:before {
    background-color: #34c759 !important;
    /* Green */
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.8) !important;
}

.menu-link-taller:before {
    background-color: #ff3b30 !important;
    /* Red */
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.8) !important;
}

/* --- HOVER FIXES (Override previous legacy styles) --- */
#primary-menu ul ul li:hover>a {
    padding-left: 44px !important;
    /* Force keep space for dot */
    background: rgba(44, 44, 46, 0.95) !important;
}

/* --- GLOBAL FONT FIX --- */
#primary-menu ul li a {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}

/* --- DARK MODE ALTERNATION --- */

/* 1. Specs (Ficha Técnica) -> Black */
.specs-section {
    background-color: #000000 !important;
    color: #f5f5f7 !important;
}

.specs-title {
    color: #f5f5f7 !important;
}

.specs-desc {
    color: #86868b !important;
}

.spec-label {
    color: #86868b !important;
}

.spec-value {
    color: #0071e3 !important;
    /* Apple Blue instead of Cyan */
}

.spec-subtext {
    color: #6e6e73 !important;
}

/* 2. Gallery -> Dark Gray (#111) to contrast with Specs and Reviews */
.gallery-section {
    background-color: #111111 !important;
    color: #f5f5f7 !important;
}

.gallery-title {
    color: #f5f5f7 !important;
}



.section-title {
    color: #f5f5f7 !important;
}

/* Targets Reviews Title */
.review-card {
    background-color: #1c1c1e !important;
    /* Dark Card */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.review-text {
    color: #f5f5f7 !important;
}

.review-author {
    color: #86868b !important;
}

.review-card .read-more-btn {
    color: #FFCC00 !important;
    /* Lighter blue for dark mode */
}

/* 4. Footer Tweaks */
#footer {
    background-color: #111111 !important;
    /* Match Gallery/Characteristics gray tone */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- UNIFIED MENU TYPOGRAPHY --- */
/* Top Level + Dropdown = SAME SIZE */
#primary-menu ul li a,
#primary-menu ul ul li a {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
}

/* --- SECTION SUBTITLES --- */
.env-subtitle {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: #86868b;
    /* Apple Gray */
    margin-top: 5px;
    margin-bottom: 0px;
    /* Header container handles spacing */
    letter-spacing: 0.01em;
}

/* --- TYPOGRAPHY REFINEMENT (Larger Titles, Smaller Subs, Tighter Gap) --- */
.env-title {
    font-size: clamp(3rem, 6vw, 76px) !important;
    margin-bottom: 5px !important;
    /* Reduced from 20px */
}

.env-subtitle {
    font-size: 21px !important;
    /* Reduced from 24px */
    margin-top: 0 !important;
    font-weight: 400 !important;
    /* Slightly lighter for contrast */
    color: #8c8c91 !important;
}

/* Specific overrides for Gallery Title if needed */
.gallery-title {
    font-size: clamp(3rem, 6vw, 76px) !important;
    margin-bottom: 5px !important;
}

/* --- MOBILE OPTIMIZATIONS --- */
@media (max-width: 1280px) {

    /* Fix Menu Overlap: Hide menu list by default */
    #primary-menu>ul,
    #primary-menu>div>ul {
        display: none !important;
        position: absolute;
        top: 80px;
        left: 20px;
        /* Aligned left, fixed distance from edge */
        transform: none;
        /* Remove centering */
        width: auto !important;
        /* Allow growing only as needed */
        max-width: 90vw;
        background: transparent !important;
        border: none;
        z-index: 999;
        padding: 0;
        margin: 0;
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Show only when JS toggles .show */
    #primary-menu>ul.show,
    #primary-menu>div>ul.show {
        display: block !important;
    }

    /* Stack items vertically with gaps */
    #primary-menu ul li {
        display: block !important;
        float: none !important;
        width: fit-content !important;
        /* KEY: Only take needed width */
        border: none !important;
        /* Remove separation lines */
        margin: 0 0 5px 0 !important;
        /* Compact gap */
    }

    /* Pill Sytle Links */
    #primary-menu ul li a {
        background: rgba(28, 28, 30, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 50px !important;
        padding: 6px 20px !important;
        /* Significantly reduced padding */
        color: #f5f5f7 !important;
        text-align: left;
        font-weight: 500 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
        height: auto !important;
        width: fit-content !important;
        /* KEY: Decouple button width from LI width (submenu) */
        white-space: nowrap;
        line-height: normal !important;
        /* Force normal line height */
    }

    /* Force inner div to not add height */
    #primary-menu ul li a div {
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Active/Hover State */
    #primary-menu ul li a:hover,
    #primary-menu ul li.current a {
        background: rgba(44, 44, 46, 0.95) !important;
        transform: scale(1.02);
    }

    /* Fix Dropdowns in Mobile - No Indent */
    #primary-menu ul ul {
        position: relative !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 5px 0 !important;
        /* No Side Indent */
        display: block !important;
        transform: none !important;
    }

    /* Sub-pills */
    #primary-menu ul ul li a {
        background: rgba(40, 40, 42, 0.85) !important;
        padding: 6px 20px 6px 40px !important;
        /* Same vertical padding, extra left for dot */
        font-size: 14px !important;
        line-height: normal !important;
    }

    /* Indicators for sub-menu */
    #primary-menu ul ul li a:before {
        left: 20px !important;
    }
}

.specs-block {
    margin-bottom: 250px;
    /* Default Desktop Spacing */
}

/* Last block needs less margin */
.specs-block:last-child {
    margin-bottom: 40px;
}

@media (max-width: 768px) {

    /* 1. Hero Title - Reduce for Mobile */
    .hero-title {
        font-size: clamp(3.5rem, 10vw, 5rem);
        /* Tighter range */
        line-height: 1.0;
    }

    .hero-subtitle {
        font-size: 2rem;
        margin-top: 0.5rem;
    }

    /* 2. Specs Scroll Spacing - Reduce significantly */
    .specs-block {
        margin-bottom: 80px;
        /* Mobile Spacing */
    }

    .specs-block:last-child {
        margin-bottom: 40px;
    }

    /* 3. Reviews Padding */
    .reviews-scroller {
        padding: 0 20px 40px 20px;
        /* Fixed padding instead of % */
        gap: 15px;
    }

    .review-card {
        width: 85vw;
        /* Slightly wider on small phones */
    }

    /* 4. Env Titles */
    .env-title {
        font-size: 3rem;
        /* Safe mobile size */
    }

    /* 5. Section Headers Alignment */
    .env-header {
        padding: 0 20px;
        width: 100% !important;
        /* Force full width to kill default 90% */
        box-sizing: border-box;
    }
}

/* --- PRICING SECTION (Apple One Style) --- */
.pricing-section {
    padding: 100px 0;
    width: 100%;
    /* Full width for background */
    position: relative;
    z-index: 2;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
    max-width: 1200px;
    /* Constrain content */
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.pricing-card {
    background: #1c1c1e;
    /* Darker card background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

.pricing-header {
    margin-bottom: 20px;
    width: 100%;
}

.pricing-title {
    font-size: 24px;
    font-weight: 700;
    color: #f5f5f7;
    margin-bottom: 5px;
}

.pricing-subtitle {
    font-size: 15px;
    color: #86868b;
    font-weight: 500;
}

.pricing-price-container {
    margin-bottom: 30px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.pricing-currency {
    font-size: 24px;
    font-weight: 600;
    color: #f5f5f7;
}

.pricing-price {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradient Variants */
.price-gradient-orange {
    background-image: linear-gradient(135deg, #ff9f0a, #ff375f);
}

.price-gradient-blue {
    background-image: linear-gradient(135deg, #30b0c7, #3a82f7);
    /* Lio/Cyan theme */
}

.price-gradient-purple {
    background-image: linear-gradient(135deg, #af52de, #5856d6);
}

.pricing-per-person {
    font-size: 15px;
    color: #86868b;
    margin-left: 5px;
}

.pricing-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.pricing-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color: #d1d1d6;
    font-size: 15px;
    font-weight: 400;
}

.pricing-feature-icon {
    width: 20px;
    height: 20px;
    color: #f5f5f7;
    /* White icons */
}

.pricing-total {
    margin-top: auto;
    /* Push to bottom */
    padding-top: 20px;
    font-size: 14px;
    color: #86868b;
    font-weight: 500;
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- TABLET GRID OPTIMIZATION --- */
@media (max-width: 991px) {

    .env-grid,
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns for tablets */
        gap: 25px;
    }
}

/* --- HERO & GRID RESPONSIVE FIXES --- */
@media (max-width: 768px) {

    /* Hero Title Safety */
    #hero-title {
        font-size: 3.5rem !important;
        /* Cap huge size */
        line-height: 1.1 !important;
        text-align: center;
        padding: 0 15px;
    }

    /* Bento Grid Stacking */
    .env-grid,
    .catalog-grid {
        grid-template-columns: 1fr !important;
        /* Force single column */
        gap: 20px !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        /* Override inline max-width: 1200px */
    }

    /* Only adjust benefit-card image height for mobile */
    .catalog-card.benefit-card .catalog-image-wrapper {
        height: 300px !important;
    }

    /* Adjust Card Paddings - ONLY for env-card */
    .env-card {
        padding: 30px 20px !important;
        min-height: auto !important;
        /* Allow shrinking */
    }




    /* Ensure no horizontal scroll on body */
    body,
    html {
        overflow-x: hidden !important;
        width: 100% !important;
    }
}

/* --- EXTRA SMALL SCREENS (Essential fixes only) --- */
@media (max-width: 480px) {

    /* Increase image height for benefit cards so images don't get cut off */
    .catalog-card .catalog-image-wrapper {
        height: 350px !important;
        /* Increased from 200px to show more of the image */
    }
}

/* --- PRICING TOGGLE & 5-CARD GRID --- */

/* Toggle Button */
.pricing-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    gap: 15px;
}

.pricing-toggle-label {
    font-size: 16px;
    color: #86868b;
    font-weight: 500;
}

.pricing-toggle-btn {
    background: #2c2c2e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f5f5f7;
    padding: 10px 24px;
    border-radius: 999px;
    /* Pill shape */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-toggle-btn:hover {
    background: #3a3a3c;
    border-color: rgba(255, 255, 255, 0.3);
}

.pricing-toggle-btn.active {
    background: #0071e3;
    /* Apple Blue */
    border-color: #0071e3;
    color: white;
}

/* 5-Column Grid Adaptation */
.pricing-grid.five-columns {
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

/* Compact Card for 5-col */
.pricing-card.compact {
    padding: 25px 15px;
    align-items: center;
    text-align: center;
}

.pricing-card.compact .pricing-header {
    margin-bottom: 15px;
    text-align: center;
}

.pricing-card.compact .pricing-price-container {
    justify-content: center;
    flex-direction: column;
    /* Stack price */
    align-items: center;
    gap: 0;
}

.pricing-card.compact .pricing-price {
    font-size: 32px;
    /* Smaller than 48px */
}

.pricing-card.compact .pricing-currency {
    font-size: 18px;
}

.pricing-card.compact .pricing-per-person {
    font-size: 12px;
    margin-top: 5px;
}

.pricing-card.compact .pricing-features {
    text-align: left;
    /* Keep features left aligned or center? Center for compact */
    align-items: center;
    display: flex;
    flex-direction: column;
}

.pricing-card.compact .pricing-total {
    text-align: center;
    font-size: 13px;
}

/* Responsive for 5 columns */
@media (max-width: 1100px) {
    .pricing-grid.five-columns {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        justify-content: center;
    }
}

/* --- PER-CARD CASH TOGGLE --- */

.pricing-card {
    /* Ensure relative positioning for absolute children if needed, 
       but we will use flex layout */
    display: flex;
    flex-direction: column;
    /* transition for border color swap */
    transition: border-color 0.3s ease, transform 0.3s ease;
}

/* Push footer to bottom */
.pricing-card .pricing-footer {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.toggle-container {
    position: relative;
    width: 100%;
    height: 36px;
    /* Fixed height for buttons */
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-cash {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Absolute centering to allow cross-fading */
    position: absolute;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.btn-cash:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-close {
    background: rgba(142, 142, 147, 0.3);
    /* Apple Gray */
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    /* For the 'X' text */

    /* Absolute centering */
    position: absolute;
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn-close:hover {
    background: rgba(142, 142, 147, 0.5);
}



/* Active State (Cash Mode) */
.pricing-card.cash-mode {
    border-color: #30d158 !important;
    /* Green Border */
    background: rgba(48, 209, 88, 0.05);
}

.pricing-card.cash-mode .btn-cash {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.pricing-card.cash-mode .btn-close {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Price Updates in Cash Mode */
.pricing-card.cash-mode .pricing-price {
    background: linear-gradient(135deg, #30d158 0%, #28aa49 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(48, 209, 88, 0.3);
}

/* Hide Global Toggle */
.pricing-toggle-container {
    display: none !important;
}

/* --- APPLE ONE STYLE PRICING CARDS --- */

.pricing-card.compact {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centered for narrow 5-col layout */
    text-align: center;
    border-radius: 24px;
    /* More rounded */
    background: rgba(28, 28, 30, 0.6);
    /* Apple dark gray-ish transparency */
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

.pricing-title {
    font-size: 20px;
    /* Slightly smaller for 5-col */
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.pricing-price-container {
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pricing-price {
    font-size: 32px;
    /* Large price */
    font-weight: 700;
    line-height: 1.1;
    /* Gradient handled by inline classes or existing utility */
}

.pricing-per-person {
    font-size: 13px;
    color: #86868b;
    /* Apple gray */
    margin-top: 4px;
    font-weight: 400;
}

.pricing-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 16px 0;
}

.pricing-total {
    font-size: 14px;
    color: #f5f5f7;
    font-weight: 500;
    margin-bottom: 20px;
    /* Space before button */
}

/* OUTLINE BUTTON + ICON */
.btn-cash {
    background: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 6px 16px;
    border-radius: 50px;
    /* Pill shape */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-cash:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-icon-circle {
    width: 18px;
    height: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
}

/* Cash Mode State */
.pricing-card.cash-mode .btn-cash {
    border-color: #30d158;
    /* Green border */
    color: #30d158;
}

.pricing-card.cash-mode .btn-icon-circle {
    transform: rotate(45deg);
    /* Turn + into x? Or assume manual icon swap */
}

/* FIXES & REFINEMENTS */

/* Disable hover movement */
.pricing-card:hover,
.pricing-card.compact:hover {
    transform: none !important;
    box-shadow: none !important;
    /* Optional: if shadow change is also unwanted */
}

/* Inline Currency & Price */
.pricing-price-container {
    flex-direction: row;
    /* Ensure they are in a row */
    justify-content: center;
    gap: 2px;
    /* Small gap between $ and Number */
}

.pricing-currency {
    font-size: 24px;
    /* Slightly smaller than main number */
    font-weight: 700;
    margin-top: 4px;
    /* Align visually */
    background: inherit;
    /* TBD: if we want it to inherit gradient, we need to restructure HTML */
}

/* Ensure currency inherits gradient if placed inside the span, 
   OR target specific classes if separated. */

/* REMOVE HEADER BACKGROUNDS & BORDERS */
.pricing-header,
.pricing-card .pricing-header,
.pricing-card.compact .pricing-header {
    background: transparent !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    /* Let specific spacing handle it */
    box-shadow: none !important;
}

.pricing-title {
    margin-bottom: 4px !important;
    padding: 0 !important;
}

/* AGGRESSIVE HEADER RESET */
.pricing-card .pricing-header,
.pricing-card .pricing-title,
.pricing-header,
.pricing-title {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pricing-card .pricing-header::after,
.pricing-card .pricing-title::after,
.pricing-header::after,
.pricing-title::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

/* UNIFORM PRICE GRADIENT */
.price-gradient-gold {
    background-image: linear-gradient(135deg, #FFCC00 0%, #ff9500 100%) !important;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ADJUSTMENTS: Spacing, Alignment, Animation */

/* 1. Spacing: Price & Per Person */
.pricing-price-container {
    margin-bottom: 0 !important;
    /* Remove bottom whitespace */
}

.pricing-per-person {
    margin-top: 0 !important;
    /* Pull closer to price */
    margin-bottom: 12px;
    /* Add space below it instead, pushing Total away */
}

.pricing-total {
    margin-top: 20px !important;
    /* Push "Total price" further down */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Ensure border is compliant */
    padding-top: 15px;
    /* Space between line and text */
}

/* 2. Icon Alignment (+/-) */
.btn-icon-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 2px;
    /* Visual tweak to center the symbol */
}

/* 3. Animation Fix: Stop rotating the close button */
.pricing-card.cash-mode .btn-icon-circle {
    transform: none !important;
    /* Do NOT rotate the icons */
}

/* Ensure the swap uses fade/scale only as originally intended */
.pricing-card.cash-mode .btn-cash {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.pricing-card.cash-mode .btn-close {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* GOLD CASH MODE & ANIMATIONS */

/* 1. Override Green with Gold for Cash Mode */
.pricing-card.cash-mode {
    border-color: #FFCC00 !important;
    background: rgba(255, 204, 0, 0.05) !important;
}

.pricing-card.cash-mode .btn-cash {
    border-color: #FFCC00 !important;
    color: #FFCC00 !important;
}

/* 2. Strikethrough & Big Price Styles */

/* Helper container for stacking prices */
.price-stack-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

/* Crossed Out Original Price */
.price-crossed {
    text-decoration: line-through;
    color: #86868b;
    font-size: 16px;
    /* Significantly smaller */
    font-weight: 500;
    margin-bottom: 2px;
    opacity: 0.8;
}

/* New Cash Price (Big Gold) */
.price-gold-big {
    font-size: 36px;
    /* Larger than standard 32px */
    font-weight: 700;
    color: #FFCC00;
    background: linear-gradient(135deg, #FFCC00 0%, #ff9500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.2);
}

/* 3. Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-stagger-1 {
    animation: fadeInUp 0.3s ease forwards;
}

.animate-stagger-2 {
    animation: fadeInUp 0.3s ease forwards;
    animation-delay: 0.1s;
    opacity: 0;
    /* Star invisible */
}

/* End of Stability Fix Revert */
/* End of Stability Fix Revert */

/* PRICING INFO BADGES (Header) */
.pricing-info-container {
    display: flex;
    justify-content: flex-start;
    /* Left Align */
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pricing-info-pill {
    background: rgba(44, 44, 46, 0.6);
    /* Darker Apple Glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 99px;
    /* Pill shape */
    font-size: 13px;
    font-weight: 500;
    color: #f5f5f7;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease;
}

.pricing-info-pill:hover {
    transform: translateY(-2px);
    background: rgba(44, 44, 46, 0.8);
}

.pricing-info-pill.gold {
    border-color: rgba(255, 204, 0, 0.3);
    color: #FFCC00;
    background: rgba(255, 204, 0, 0.1);
}

.pricing-info-pill.blue {
    border-color: rgba(10, 132, 255, 0.3);
    color: #0a84ff;
    background: rgba(10, 132, 255, 0.1);
}

.pricing-info-pill.gray {
    border-color: rgba(142, 142, 147, 0.3);
    color: #e5e5ea;
    /* Lighter gray for readability on dark */
    background: rgba(142, 142, 147, 0.15);
}

.pricing-info-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

/* SLOT-BASED STABILITY (Main Price) */
.pricing-price-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    /* Defined by slots */
    margin-bottom: 0 !important;
}

.price-slot-secondary {
    height: 20px !important;
    /* Reserved space for Crossed Price */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.price-slot-primary {
    height: 38px !important;
    /* Reserved space for Main Price */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Redefine Text Styles for Slots */
.price-crossed {
    font-size: 16px !important;
    text-decoration: line-through;
    color: #86868b;
    line-height: 1;
    margin: 0;
}

.price-gold-big {
    font-size: 36px !important;
    /* Large Main Price */
    font-weight: 700;
    line-height: 1;
    margin: 0;
    color: #FFCC00;
    background: linear-gradient(135deg, #FFCC00 0%, #ff9500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.price-gold-normal {
    /* For Total Price (Standard Size) */
    font-weight: 700;
    color: #FFCC00 !important;
    background: linear-gradient(135deg, #FFCC00 0%, #ff9500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* --- 7. FAQ SECTION (Apple One Style) --- */
.faq-section {
    padding: 120px 0;
    background-color: #000;
    /* Pure Black to match Apple One */
    color: #f5f5f7;
    position: relative;
    z-index: 2;
    border-top: 1px solid #1c1c1e;
    /* Subtle separator from dark gray pricing */
}

.faq-container {
    max-width: 1200px;
    /* Standard Section Width */
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.faq-title {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 60px;
    text-align: left;
    color: #f5f5f7;
    letter-spacing: -0.02em;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

.faq-list {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    /* Full width of container (1200px) */
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.faq-trigger {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.2s ease;
}

.faq-trigger:hover {
    opacity: 0.8;
}

.faq-question {
    font-size: 21px;
    font-weight: 600;
    color: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    padding-right: 20px;
}

.faq-icon-wrapper {
    min-width: 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.3s ease;
}

.faq-icon-wrapper svg {
    width: 10px;
    height: 10px;
    stroke: #fff;
    stroke-width: 2;
    transition: stroke 0.3s ease;
}

/* Expanded State */
.faq-item.active .faq-icon-wrapper {
    background-color: #fff;
    border-color: #fff;
    transform: rotate(45deg);
}

.faq-item.active .faq-icon-wrapper svg {
    stroke: #000;
    /* Icon becomes black on white bg */
}

.faq-answer-container {
    height: 0;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-answer {
    padding-bottom: 24px;
    font-size: 17px;
    line-height: 1.5;
    color: #a1a1a6;
    /* Apple Light Gray text */
    max-width: 90%;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

/* Responsive Adjustments for FAQ */
@media (max-width: 991px) {
    .faq-container {
        padding: 0 5%;
        /* Add air on mobile/tablet since section padding is 0 */
    }
}

/* --- 8. CONTACT SECTION (Apple Style) --- */
.contact-section {
    padding: 120px 0;
    background-color: #101010;
}

.contact-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.contact-card {
    background: rgba(28, 28, 30, 0.6);
    /* Secondary System Background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px;
    width: 260px;
    text-align: left;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact-card:hover {
    transform: translateY(-5px);
    background: rgba(44, 44, 46, 0.8);
    border-color: rgba(255, 204, 0, 0.3);
    /* Subtle Gold border on hover */
}

.contact-icon {
    width: 32px;
    height: 32px;
    color: #FFCC00;
    /* Gold */
    margin-bottom: 20px;
    stroke-width: 1.5;
    /* Lighter Stroke */
}

.contact-label {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.contact-value {
    font-size: 17px;
    font-weight: 600;
    color: #f5f5f7;
    line-height: 1.3;
}

.contact-sub {
    font-size: 14px;
    color: #86868b;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .contact-card {
        width: 100%;
        /* Full width on mobile */
        max-width: 350px;
    }
}

/* Info Section (Moved) */
.info-section {
    background-color: #101010;
    /* Darker than #1c1c1e */
    padding: 120px 0;
}

/* Reviews Subtitle Link */
.env-subtitle a {
    text-decoration: none !important;
    transition: opacity 0.3s ease;
}

.env-subtitle a:hover {
    text-decoration: underline !important;
    opacity: 0.8;
}

/* =========================================
   MOBILE FIXES (< 768px)
   Targeting 375px - 768px range
   ========================================= */

@media (max-width: 768px) {

    /* --- 1. GLOBAL PADDING --- */
    body .premium-section,
    body .apple-env-section,
    body .pricing-section,
    body .story-closer-look {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* --- 2. PRICING GRID --- */
    body .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    body .pricing-grid .pricing-card:last-child {
        grid-column: span 1 !important;
    }

    /* --- 3. INFO CARDS --- */
    body .env-card {
        padding-bottom: 90px !important;
        aspect-ratio: unset !important;
        height: auto !important;
        min-height: 280px !important;
    }

    /* --- 4. ROOM CARDS --- */
    body .catalog-card {
        height: auto !important;
        min-height: auto !important;
        aspect-ratio: 0.8 !important;
    }

    body .catalog-image {
        object-position: top center !important;
    }

    body .catalog-content {
        background: linear-gradient(to top, rgba(0, 0, 0, 1.0) 25%, rgba(0, 0, 0, 0.7) 60%, transparent 100%) !important;
        padding-bottom: 60px !important;
    }

    body .catalog-room-title {
        text-shadow: 0 4px 12px rgba(0, 0, 0, 1) !important;
    }

    body .catalog-room-micro {
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    }
}

/* =========================================
   COMMON ROOM PAGE FIXES (Mobile/Tablet)
   Targeting < 1280px
   ========================================= */
@media (max-width: 1280px) {
    body.room-page .mobile-block {
        display: block;
    }

    body.room-page .review-desc-text {
        padding: 0 20px !important;
    }

    /* --- HEADER & LOGO --- */
    body.room-page #header,
    body.room-page #header-wrap {
        background-color: #0a0a0a !important;
        height: 70px !important;
        min-height: 70px !important;
        padding: 0 !important;
        background-image: none !important;
    }

    body.room-page #header-wrap .container {
        padding: 0 !important;
        height: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    body.room-page #logo {
        float: none !important;
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        height: auto !important;
        line-height: 1 !important;
        padding: 0 !important;
    }

    body.room-page #logo img {
        margin: 0 auto !important;
        display: inline-block !important;
        height: auto !important;
        max-height: 60px !important;
        max-width: 200px !important;
        width: auto !important;
    }

    body.room-page #primary-menu-trigger {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        float: none !important;
        z-index: 1000 !important;
    }

    body.room-page #primary-menu {
        float: none !important;
        margin-top: 0 !important;
    }

    /* --- HERO VIDEO COVER --- */
    body.room-page .hero-video,
    body.room-page .video-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: none !important;
    }

    body.room-page .hero-content {
        /* Default fallback, specific pages may override top-padding */
    }
}

/* Mobile Modal Header Common */
body.room-page .modal-header {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* --- ROOM THEMES --- */

/* --- EL BOSQUE MALDITO (Lime Green) --- */
body.room-theme-bosque {
    --p-color-accent: #ccff66;
}

body.room-theme-bosque .hero-title {
    color: #ccff66 !important;
    -webkit-text-fill-color: #ccff66 !important;
    background: none !important;
    font-family: 'Adobe Garamond Pro Bold', 'Times New Roman', serif !important;
    font-weight: 700 !important;
    letter-spacing: 0px !important;
    text-transform: uppercase !important;
}

body.room-theme-bosque .hero-subtitle {
    font-family: 'Adobe Garamond Pro Regular', 'Times New Roman', serif !important;
    font-weight: 400 !important;
    letter-spacing: 12px !important;
    text-transform: uppercase !important;
}

body.room-theme-bosque .apple-button {
    background-color: #ccff66 !important;
    border-color: #ccff66 !important;
    color: #000000 !important;
}

/* Specific Mobile Menu Override for Bosque */
.mobile-sublink[href*="el-bosque"] .mobile-sub-title,
/* Fallback if href selector is tricky, we target the 2nd item */
.mobile-submenu-container a:nth-child(2) .mobile-sub-title {
    color: #ccff66 !important;
}

body.room-theme-bosque .env-card-header,
body.room-theme-bosque .modal-header,
body.room-theme-bosque .env-icon,
body.room-theme-bosque .modal-icon,
body.room-theme-bosque .spec-value,
body.room-theme-bosque .env-subtitle,
body.room-theme-bosque .mobile-story-desc strong,
body.room-theme-bosque .nav-item-content strong,
body.room-theme-bosque .review-card .read-more-btn {
    color: #ccff66 !important;
}

/* --- UNIFIED FOOTER TITLE (Standard "Section Title" Look) --- */
body.room-page .footer-cta-section .hero-title {
    font-family: 'Inter', sans-serif !important;
    /* Match Env Title */
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    font-size: clamp(2rem, 4vw, 48px) !important;
    /* Slightly smaller than 64px */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0px !important;
    background: none !important;
    text-transform: none !important;
    /* Don't force uppercase like Hero */
}

/* --- EL TALLER (Neon Pink/Magenta) --- */
body.room-theme-taller {
    --p-color-accent: #FF00CC;
}

body.room-theme-taller .hero-title {
    color: transparent !important;
    -webkit-text-stroke: 1px #FF00CC !important;
    font-family: 'Oswald', sans-serif !important;
}

body.room-theme-taller .apple-button {
    background-color: #FF00CC !important;
    border-color: #FF00CC !important;
    color: #000000 !important;
}

body.room-theme-taller .apple-button:hover {
    box-shadow: 0 0 20px rgba(255, 0, 204, 0.6) !important;
}

body.room-theme-taller .env-card-header,
body.room-theme-taller .modal-header,
body.room-theme-taller .env-icon,
body.room-theme-taller .modal-icon,
body.room-theme-taller .spec-value,
body.room-theme-taller .env-subtitle,
body.room-theme-taller .mobile-story-desc strong,
body.room-theme-taller .nav-item-content strong,
body.room-theme-taller .review-card .read-more-btn {
    color: #FF00CC !important;
}

/* =========================================
   COMMON REVIEW CARD FIXES (Global Overrides)
   ========================================= */
.apple-carousel {
    align-items: flex-start !important;
    padding-bottom: 50px !important;
}

.review-card {
    height: auto !important;
    min-height: 300px !important;
    justify-content: space-between !important;
}

.review-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-height 0.3s ease;
}

.review-text.expanded {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
}

.review-card .read-more-btn {
    display: none;
    /* JS toggles */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Color handled by Theme Classes */
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-top: 5px !important;
    text-decoration: none !important;
    outline: none !important;
    height: auto !important;
    width: auto !important;
}

.review-card .read-more-btn:hover {
    text-decoration: underline !important;
    /* Color handled by Theme Classes or specific overrides */
}

/* Fix Mobile Hero Visibility & Video Aspect Ratio (Unified Room Styles) */
@media (max-width: 1280px) {

    /* 1. Force Visibility of Content */
    .hero-title,
    .hero-subtitle,
    .hero-micro,
    #hero-btn,
    .hero-greeting,
    .hero-stats-grid {
        opacity: 1 !important;
        transform: none !important;
    }

    /* 2. Standardize Video Fitting (Match Lio Mundial) */
    .hero-video,
    .video-overlay {
        position: absolute !important;
        top: 0 !important;
        /* Revert to top/left for mobile where we control height? 
           Actually, the centered technique is better for width coverage.
           But Lio uses standard positioning here. 
           Let's keep the user's preferred Lio behavior which might rely on Top/Left + 80vh. 
           Wait, Lio's code (lines 170-179) sets top:0; left:0; width:100%; height:100%; object-fit:cover.
           My global rule sets min-width/min-height centered.
           For mobile, Lio's behavior implies Top alignment with object-fit cover?
           Let's just apply the container sizing first.
        */
    }
}

/* Tablet / iPad Portrait (< 768px) */
@media (max-width: 768px) {
    body.room-page .hero-section {
        justify-content: flex-start !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    body.room-page .hero-content {
        margin-top: 0 !important;
        padding-top: 140px !important;
    }

    /* --- EL BOSQUE & EL TALLER TABLET/LARGE MOBILE --- */
    body.room-theme-bosque .hero-micro,
    body.room-theme-taller .hero-micro {
        display: block !important;
        position: relative !important;
        margin-top: 310px !important;
        padding-top: 20px !important;
    }
}

/* Small Mobile Devices (< 480px) */
@media (max-width: 480px) {
    body.room-page .hero-section {
        justify-content: center !important;
        /* The Magic Number found in Lio */
        height: 80vh !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    /* --- LIO MUNDIAL MOBILE LAYOUT --- */
    body.room-theme-lio .hero-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Title: User wants it HIGHER */
    body.room-theme-lio .hero-title {
        margin-top: 30px !important;
        margin-bottom: 0 !important;
    }

    /* Text/Button: User says OK */
    body.room-theme-lio .hero-subtitle {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.room-theme-lio .hero-micro {
        margin-top: 10px !important;
    }

    body.room-theme-lio #hero-btn {
        margin-top: 20px !important;
    }

    /* --- EL BOSQUE & EL TALLER MOBILE LAYOUT --- */
    body.room-theme-bosque .hero-content,
    body.room-theme-taller .hero-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Title: User wants it LOWER */
    body.room-theme-bosque .hero-title,
    body.room-theme-taller .hero-title {
        margin-top: 75px !important;
        margin-bottom: 0 !important;
    }

    body.room-theme-bosque .hero-subtitle,
    body.room-theme-taller .hero-subtitle {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Text/Button: User wants it LOWER */
    body.room-theme-bosque .hero-micro,
    body.room-theme-taller .hero-micro {
        display: block !important;
        position: relative !important;
        margin-top: 310px !important;
        padding-top: 20px !important;
        /* Force extra push */
    }

    body.room-theme-bosque #hero-btn,
    body.room-theme-taller #hero-btn {
        margin-top: 20px !important;
    }
}

/* --- EMPRESAS SECTION --- */
.companies-section {
    background-color: #111111;
    padding: 80px 0;
    /* Reduced padding slightly */
    overflow: hidden;
    /* Essential for marquee */
}

/* Ensure container allows full width for scrolling */
.companies-section .container {
    max-width: 100% !important;
    padding: 0;
}

.companies-marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.companies-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    /* Space between logos */
    animation: scroll-left 40s linear infinite;
    /* Smooth continuous scroll */
    will-change: transform;
    padding-left: 40px;
    /* Initial offset matching gap */
}

.companies-marquee-track:hover {
    animation-play-state: paused;
    /* Pause on hover */
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-25%);
        /* Move 1/4 of the track (1 set) */
    }
}

.company-logo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    position: relative;
    padding: 0 10px;
}

.company-logo img {
    max-width: none;
    max-height: 100px;
    /* Big logos as requested */
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8);
    opacity: 0.6;
    transition: all 0.4s var(--p-ease-apple);
}

.company-logo:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .companies-marquee-track {
        gap: 30px;
        animation-duration: 30s;
        /* Faster on mobile */
    }

    .company-logo img {
        max-height: 70px;
    }
}

/* --- CONCEPTOS SECTION --- */
.concepts-section .env-header {
    margin-bottom: 60px;
    padding: 0 20px;
}

/* Reuse .apple-carousel but add specific padding/gap for this section */
.concepts-section .apple-carousel {
    padding-top: 20px;
    /* Space for hover up */
    padding-bottom: 40px;
    /* Space for shadow/scroll */
    gap: 20px;
    /* 20px gap as designed */
    /* Center the first and last cards */
    padding-left: calc(50% - 160px);
    padding-right: calc(50% - 160px);
}

/* Ensure scrollbar hiding persists if needed, though apple-carousel handles it */
.concepts-section .apple-carousel::-webkit-scrollbar {
    display: none;
}



.concept-card {
    flex: 0 0 320px;
    height: 520px;
    /* Fixed height for uniformity */
    /* Wider cards */
    scroll-snap-align: center;
    /* Snap alignment for apple-carousel */
    background-color: #1d1d1f;
    border-radius: 24px;
    /* More rounded */
    /* overflow: hidden; Removed to allow 3D children */
    position: relative;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smooth easing */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    perspective: 1000px;
    /* Enable 3D space */
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.concept-card.blur-effect {
    filter: blur(2px);
    opacity: 0.4;
    transform: scale(0.95);
    pointer-events: none;
    /* Prevent clicks on blurred cards */
    border: none;
}

.concept-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.concept-card.flipped .concept-card-inner {
    transform: rotateY(180deg);
}

.concept-card-front,
.concept-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 24px;
    overflow: hidden;
    background-color: #1d1d1f;
    /* Match original card bg */
    display: flex;
    flex-direction: column;
}

.concept-card-back {
    transform: rotateY(180deg);
    padding: 40px;
    background: #000;
    /* Pure black backing */
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Left align items */
    text-align: left;
    /* Left align text */
    position: relative;
}

/* Back content styling */
.concept-back-icon {
    margin-bottom: 24px;
    /* Increased margin */
    font-size: 50px;
    /* Large emoji - Reduced to 50px */
    line-height: 1;
    color: #FFCC00;
    /* Gold accent */
    display: flex;
    justify-content: flex-start;
    /* Left align */
    width: 100%;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    /* Pop effect */
}

.concept-back-icon svg {
    width: 48px;
    height: 48px;
    stroke-width: 1.5;
}

.concept-back-title {
    color: #FFCC00;
    font-size: 13px;
    /* Small Caps size */
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    /* White separator line */
    width: 100%;
}

.concept-back-desc {
    color: #e5e5ea;
    /* Slightly brighter for readability */
    font-size: 1.6rem;
    line-height: 1.5;
}

.concept-card:hover {
    transform: translateY(-8px);
    /* More pronounced hover */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.concept-image-placeholder {
    width: 100%;
    height: 312px;
    /* 60% of 520px */
    background-color: #2a2a2c;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.concept-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    /* Ensure it always covers vertically */
    display: block;
    z-index: 1;
    /* Ensure it sits above the placeholder decoration */
}

/* Optional: Icon inside placeholder to show it's waiting for image */
.concept-image-placeholder::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 2px dashed #555;
    border-radius: 50%;
}

.concept-content {
    padding: 30px;
    /* More breathing room */
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
    min-height: 160px;
    /* Ensure consistent text height */
    justify-content: flex-start;
}

.concept-title {
    color: #f5f5f7;
    font-size: 28px;
    /* Match .env-card-text-short */
    font-weight: 600;
    margin: 0;
    line-height: 1.15;
}

.concept-desc {
    color: #86868b;
    font-size: 1.55rem;
    /* Larger desc ("agrandarla bastante") */
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .concept-card {
        flex: 0 0 280px;
        /* Slightly smaller on mobile but still big */
    }

    .concepts-scroll-container {
        padding: 20px 5% 40px 5%;
        /* Keep spacing consistent */
    }
}

/* =========================================
   CONCEPTS SECTION — DESKTOP GRID
   On desktop (≥992px): grid layout, no carousel
   On mobile (<992px):  carousel remains
   ========================================= */

@media (min-width: 992px) {

    /* ---- Grid container ---- */
    .concepts-section .apple-carousel {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        overflow: visible !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        max-width: 1300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 10px !important;
        padding-bottom: 20px !important;
        column-gap: 20px !important;
        row-gap: 32px !important;
    }

    /* ---- Card: fixed landscape height — all equal ---- */
    .concepts-section .concept-card {
        flex: unset !important;
        width: 100% !important;
        height: 260px !important;
        scroll-snap-align: none !important;
    }

    /* ---- Card front: horizontal layout (image left, content right) ---- */
    .concepts-section .concept-card-front {
        flex-direction: row !important;
    }

    /* ---- Image side: fixed width, fills full height without distortion ---- */
    .concepts-section .concept-image-placeholder {
        width: 42% !important;
        height: 100% !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }

    /* ---- Image fills container without stretching ---- */
    .concepts-section .concept-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* ---- Text content: right side, centered vertically ---- */
    .concepts-section .concept-content {
        flex: 1 !important;
        min-height: unset !important;
        padding: 24px !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    /* ---- Smaller title on landscape ---- */
    .concepts-section .concept-title {
        font-size: 20px !important;
    }

    /* ---- Back: scroll contained, content starts from top ---- */
    .concepts-section .concept-card-back {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
        justify-content: flex-start !important;
        padding-top: 30px !important;
    }


    /* ---- Remove blur — all cards visible and clickable ---- */
    .concepts-section .concept-card.blur-effect {
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* ---- Keep hover lift ---- */
    .concepts-section .concept-card:hover {
        transform: translateY(-6px) !important;
    }
}

/* ---- Fix: front face must not capture events when card is flipped ----
   Applies on all screen sizes — the 3D flip makes the hidden front face
   mirror-intercept mouse events on the opposite side of the back face. */
.concept-card.flipped .concept-card-front {
    pointer-events: none !important;
}

/* ---- Modal with Image: Image OUTSIDE the card (Desktop only) ---- */

/* Outer wrapper: flex row aligning image + card */
.modal-outer-wrapper {
    display: flex;
    align-items: center;
    /* card dictates height, image matches via JS */
    justify-content: center;
    gap: 24px;
    /* no background, no border-radius — just a flex container */
    pointer-events: none;
    /* overlay click-through */
}

/* Each child inside re-enables pointer events */
.modal-outer-wrapper>* {
    pointer-events: auto;
}

/* Image sitting OUTSIDE the card */
.modal-image-outside {
    flex: 0 0 340px;
    max-width: 340px;
    border-radius: 20px;
    display: none;
    /* hidden by default, shown via JS */
}

.modal-image-outside img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 20px;
}

/* Image on the RIGHT: card first visually, image to the right */
/* DOM order: [image, card] → need row-reverse to put card on left */
.modal-outer-wrapper.modal-image-right {
    flex-direction: row-reverse;
}

/* Image on the LEFT: image first visually */
/* DOM order: [image, card] → row keeps image on left */
.modal-outer-wrapper.modal-image-left {
    flex-direction: row;
}

/* Mobile: hide image, show card only */
@media (max-width: 991px) {
    .modal-image-outside {
        display: none !important;
    }
}
/* Two images: [img-left, card, img-right] — natural DOM order, always row */
.modal-outer-wrapper.modal-has-two-images {
    flex-direction: row !important;
}