:root {
            --gold: #B8860B;
            --gold-light: #D4AF37;
            --black: #0A0A0A;
            --white: #ffffff;
            --soft-gray: #fcfcfc;
            --border: rgba(0,0,0,0.08);
            --safe-x: 10%;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body { 
            background: var(--white); 
            color: var(--black); 
            font-family: 'Inter', sans-serif; 
            overflow-x: hidden; 
            -webkit-font-smoothing: antialiased;
            line-height: 1.6;
        }

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

        /* --- ARQUITECTURA CINEMA --- */
        .cinema-bar {
            position: fixed; width: 100%; height: 50px; background: var(--black);
            display: flex; align-items: center; justify-content: center; z-index: 100;
            color: #fff; font-size: 0.6rem; letter-spacing: 5px; text-transform: uppercase;
            font-weight: 300;
        }
        .cinema-bar.top { top: 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .cinema-bar.bottom { bottom: 0; border-top: 1px solid rgba(255,255,255,0.05); height: 60px; }

        /* --- ESCENA 1: HERO PÓRTICO --- */
        .scene-hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3rem;
            padding: 4rem 5vw;
            min-height: 100vh;
            background: linear-gradient(135deg, #fff 60%, #f9f9f9 100%);
        }

        .hero-text { flex: 1 1 50%; }

        .hero-tag { font-size: 0.7rem; letter-spacing: 6px; color: var(--gold); text-transform: uppercase; margin-bottom: 25px; display: block; font-weight: 600; }
        .hero-title { font-family: 'Playfair Display', serif; font-size: clamp(3.5rem, 8vw, 6rem); line-height: 0.9; font-weight: 700; margin-bottom: 30px; letter-spacing: -2px; }
        .hero-title span { font-style: italic; font-weight: 400; color: var(--gold-light); }
        .hero-p { font-size: 1.15rem; color: #333; line-height: 1.8; margin-bottom: 45px; border-left: 3px solid var(--gold); padding-left: 30px; max-width: 600px; }

        .hero-locations {
            margin: 15px 0 30px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-size: 0.7rem;
            letter-spacing: 2px;
            opacity: 0.6;
            text-transform: uppercase;
        }

        .visual-gate {
            flex: 1 1 30%;
            display: flex;
            justify-content: center;
            position: relative; 
            height: 60vh; 
            overflow: hidden; 
            border-radius: 600px 600px 0 0;
            box-shadow: 0 50px 100px rgba(0,0,0,0.12);
        }
        .visual-gate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: 2s ease; }
        .visual-gate:hover img { transform: scale(1); }

        /* --- ESCENA 2: LEGADO (NEGRA) --- */
        .scene-black { background: var(--black); color: #fff; padding: 140px var(--safe-x); position: relative; }
        .legacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; align-items: center; }
        .stat-box { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; }
        .stat-item h3 { font-family: 'Playfair Display'; font-size: 3.5rem; color: var(--gold-light); line-height: 1; margin-bottom: 10px; }
        .stat-item p { font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; color: #666; font-weight: 500; }

        /* --- ESCENA 3: GALERÍA INFINITA --- */
        .scene-gallery { padding: 120px 0; background: var(--white); position: relative; overflow: hidden; }
        .scene-gallery::before, .scene-gallery::after {
            content: ''; position: absolute; top: 0; width: 15%; height: 100%; z-index: 2;
        }
        .scene-gallery::before { left: 0; background: linear-gradient(to right, white, transparent); }
        .scene-gallery::after { right: 0; background: linear-gradient(to left, white, transparent); }

        .scroll-container { display: flex; gap: 30px; width: max-content; animation: slide 40s linear infinite; }
        .photo-strip { width: 400px; height: 550px; flex-shrink: 0; overflow: hidden; border-radius: 4px; filter: grayscale(0.2); transition: 0.5s; }
        .photo-strip:hover { filter: grayscale(0); transform: translateY(-10px); }
        .photo-strip img { width: 100%; height: 100%; object-fit: cover; }
        @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        /* --- ESCENA 4: CURADURÍA --- */
        .curated-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 100px; align-items: center; }
        .curated-img-wrap { position: relative; padding: 20px; border: 1px solid rgba(255,255,255,0.1); }
        .curated-img-wrap img { width: 100%; height: auto; display: block; box-shadow: 0 30px 60px rgba(0,0,0,0.5); }

        /* --- ESCENA 5: PROTOCOLO --- */
        .scene-protocol { padding: 140px var(--safe-x); background: #f4f4f4; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 100px; align-items: center; }
        .protocol-card {
            background: #fff; padding: 80px; border-top: 6px solid var(--gold);
            box-shadow: 0 40px 80px rgba(0,0,0,0.06); position: relative;
        }
        .protocol-card::after { content: 'ROYAL'; position: absolute; top: 20px; right: 40px; font-size: 4rem; opacity: 0.03; font-weight: 900; }

        /* BOTONES */
        .btn-royal {
            background: var(--black); color: #fff; border: none; padding: 25px 50px;
            font-size: 0.75rem; letter-spacing: 5px; text-transform: uppercase;
            cursor: pointer; transition: 0.4s cubic-bezier(0.2, 1, 0.3, 1); font-weight: 600;
            display: inline-block;
        }
        .btn-royal:hover { background: var(--gold); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(184, 134, 11, 0.2); }
        .btn-outline { background: transparent; border: 1px solid var(--gold); color: var(--gold); margin-top: 20px; }

        /* FOOTER LOCAL */
        .local-footer { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--black); height: 450px; }
        .local-box { 
            position: relative; display: flex; align-items: center; justify-content: center;
            text-decoration: none; color: #fff; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.05);
        }
        .local-box img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; transition: 1.2s cubic-bezier(0.2, 1, 0.3, 1); }
        .local-box:hover img { opacity: 0.6; transform: scale(1.1); }
        .local-box span { position: relative; z-index: 2; font-family: 'Playfair Display'; font-size: 2.5rem; letter-spacing: 2px; }

        .reveal { opacity: 0; transform: translateY(60px); transition: 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        @media (max-width: 1024px) {
            .scene-hero { flex-direction: column; text-align: center; padding: 8rem 1.5rem; }
            .hero-p { border-left: none; border-bottom: 3px solid var(--gold); padding: 0 0 30px 0; margin: 0 auto 40px; }
            .legacy-grid, .scene-protocol, .curated-grid { grid-template-columns: 1fr; text-align: center; gap: 50px; }
            .local-footer { grid-template-columns: 1fr; height: auto; }
            .local-box { height: 230px; }
            .visual-gate { height: 40vh; width: 60%; order: 2; margin-top: 1rem; }
            .hero-text { order: 1; }
            .hero-title { font-size: 2.8rem; }
            .hero-locations { justify-content: center; }
        }