:root {
            --primary-color: #f49f23;
            --sec-color: #813212;
            --third-color: #af9373;
            --bg-dark: #1d1d1b;
            --bg-darker: #0a0a0a;
            --text-light: #dac4ac;
            --text-muted: #fff7ef;
            --font-serif2: 'Nebulen', serif;
            --font-serif: 'Playfair Display', serif;
            --font-sans: 'Rework Text', sans-serif;
            --sidebar-width: 90px;
        }

        /* --- CONTROL DE DESBORDAMIENTO (FIX SCROLL HORIZONTAL) --- */
        html, body {
            overflow-x: hidden;
            max-width: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
         /* Base */
        * { box-sizing: border-box; }
        body { font-family: var(--font-sans); background-color: var(--bg-dark); color: var(--bg-dark); line-height: 1.6; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; padding: 0; margin: 0; }
        html { scroll-behavior: smooth; }
        p, li,
        .bio-text p, 
        .phil-item p,
        .info-block p,
        .manifesto-section p,
        .lead-text {
            font-size: 1rem;
            line-height: 1.8;
            font-weight: 300;
        }
        /* --- RESETEO Y NORMALIZACIÓN DE ENCABEZADOS --- */
        h1, h2, h3, h4, h5, h6 {
            margin-block-start: 0; 
            /* Equivalente lógico moderno a margin-top: 0; */
        }
        h2 {
            line-height: 1.1; 
            /* Equivalente lógico moderno a margin-top: 0; */
        }

        strong {
            font-weight: 600; /* El valor estándar es 700, 900 es el máximo */
        }

        /* --- FUENTES --- */

        /* Nebulen (Tu toque futurista/especial) */
        @font-face {
          font-family: 'Nebulen';
          src: url('../fonts/nebulen-regular-webfont.woff2') format('woff2');
          font-weight: 400;
          font-style: normal;
        }

        /* Rework Text - Peso 200 (Extralight) */
        @font-face {
          font-family: 'Rework Text';
          src: url('../fonts/reworktext-extralight-webfont.woff2') format('woff2');
          font-weight: 200;
          font-style: normal;
        }

        /* Rework Text - Peso 300 (Light) */
        @font-face {
          font-family: 'Rework Text';
          src: url('../fonts/reworktext-light-webfont.woff2') format('woff2');
          font-weight: 300;
          font-style: normal;
        }

        /* Rework Text - Peso 400 (Regular) */
        @font-face {
          font-family: 'Rework Text';
          src: url('../fonts/reworktext-regular-webfont.woff2') format('woff2');
          font-weight: 400;
          font-style: normal;
        }

        /* Rework Text - Peso 600 (Semibold) */
        @font-face {
          font-family: 'Rework Text';
          src: url('../fonts/reworktext-semibold-webfont.woff2') format('woff2');
          font-weight: 600;
          font-style: normal;
        }



        /* --- BASE DEL PRELOADER --- */
        .page-preloader {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: var(--bg-darker); z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            transition: opacity 1.5s ease-in-out, visibility 1.5s;
        }
        .page-preloader.fade-out { opacity: 0; visibility: hidden; }

        /* --- CONTENEDOR CON MÁSCARA ALFA --- */
        .preloader-logo-mask {
            position: relative;
            width: 220px;  /* Ajusta a la proporción de tu logo */
            height: 180px; 
            
            /* El color "vacío" o de fondo del logo antes de llenarse */
            /* Lo he subido a 0.2 para que destaque más sobre el fondo oscuro */
            background-color: rgba(255, 255, 255, 0.2); 
            overflow: hidden;
        }

        /* --- EL ELEMENTO "LÍQUIDO" QUE RELLENA (Controlado por JS) --- */
        /* --- EL ELEMENTO "LÍQUIDO" QUE RELLENA (Controlado 100% por JS) --- */
        .preloader-logo-mask::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-color);
            
            /* Variables inyectadas por JS para un llenado dinámico y orgánico */
            transform: translateY(var(--loading-progress, 100%)); 
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* --- KEYFRAMES DEL RELLENO --- */
        @keyframes fillProgress {
            0% { 
                transform: translateY(100%); 
            }
            /* Añadimos pausas sutiles (micro-stops) para simular una carga real de datos */
            30% {
                transform: translateY(65%);
            }
            60% {
                transform: translateY(40%);
            }
            100% { 
                transform: translateY(0); /* Relleno completado al 100% */
            }
        }

        /* --- KEYFRAMES OPTIMIZADOS PARA GRÁFICOS --- */
        @keyframes pulseImage {
            0%, 100% { 
                opacity: 0.5; 
                transform: scale(0.95); 
                filter: drop-shadow(0 0 0 rgba(244, 159, 35, 0)); /* Sombra apagada */
            }
            50% { 
                opacity: 1; 
                transform: scale(1.05); 
                filter: drop-shadow(0 0 15px rgba(244, 159, 35, 0.4)); /* Resplandor color corporativo */
            }
        }

        /* --- SISTEMA REVEAL --- */
        .reveal-up, .reveal-left, .reveal-right, .reveal-scale { opacity: 0; transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .reveal-up { transform: translateY(40px); }
        .reveal-left { transform: translateX(50px); }
        .reveal-right { transform: translateX(-50px); }
        .reveal-scale { transform: scale(0.92); }
        .reveal-up.active, .reveal-left.active, .reveal-right.active { opacity: 1; transform: translate(0, 0); }
        .reveal-scale.active { opacity: 1; transform: scale(1); }
        .delay-1 { transition-delay: 0.2s; }
        .delay-2 { transition-delay: 0.4s; }


        /* --- WRAPPER ESTRUCTURAL --- */
        .page-wrapper { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); position: relative; transition: margin 0.4s ease; }

        /* --- SIDEBAR IZQUIERDA FIJA --- */
        .sidebar {
            position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh;
            background-color: var(--primary-color);
            display: flex; flex-direction: column; justify-content: space-between; align-items: center;
            padding: 40px 0; z-index: 1003; 
            box-shadow: 2px 0 15px rgba(0,0,0,0.3);
            transition: all 0.4s ease;
        }
        /* --- GEOMETRÍA DEL LOGO Y ENLACE (ESCRITORIO) --- */
        .sidebar-logo { 
            display: flex; 
            align-items: center; 
            max-height: 240px; 
            height: 80%; 
            width: 100%;
            position: relative;
            z-index: 1010; /* Lo elevamos por encima de cualquier intersección */
        }

        .logo-link {
            display: flex;
            align-items: center;
            justify-content: center; /* Asegura centrado del SVG */
            width: 100%;
            height: 100%;
            cursor: pointer;
            text-decoration: none;
            /* La animación se aplica al bloque completo, no a los vectores */
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
        }

        .logo-link:hover {
            opacity: 0.5;
        }

        /* El 100% asegura que la imagen toque los bordes del logo-link */
        .img-pc { height: 100%; pointer-events: none; }

        .img-movil {width: 100%; display: none}
        
        .sidebar-lang { display: flex; gap: 8px; color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; flex-direction: column; text-align: center;}
        .sidebar-lang a { color: rgba(255, 255, 255, 0.5); transition: color 0.3s; }
        .sidebar-lang a.active, .sidebar-lang a:hover { color: #fff; }
        .sidebar-lang span { color: rgba(255, 255, 255, 0.4); font-weight: 300; }

        .linea-dinamica { width: 11px; height: 1px; background-color: #fff; margin: 8px auto;}

        /* --- DIMMER BACKGROUND --- */
        .page-dimmer {
            position: fixed; top: 0; left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); height: 100%;
            background-color: rgba(0, 0, 0, 0.7); z-index: 998;
            opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s; cursor: pointer;
        }
        body.menu-open .page-dimmer { opacity: 1; visibility: visible; }

        /* --- NAVEGACIÓN SUPERIOR --- */
        #navbar {
            position: fixed; left: var(--sidebar-width); width: calc(100% - var(--sidebar-width));
            padding: 30px 4vw; display: flex; justify-content: flex-end; align-items: center;
            z-index: 1004;
            background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 60%, transparent 100%); transition: background 0.4s ease; pointer-events: none;
        }
        #navbar.scrolled { background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%); }
        body.menu-open #navbar.scrolled { background: transparent; }

        .nav-controls { display: flex; align-items: center; gap: 30px; pointer-events: auto; }
        .nav-buttons { display: flex; gap: 20px; }
        
        .nav-btn {
            padding: 10px 30px; font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase;
            border: 1px solid var(--primary-color); transition: all 0.4s ease; cursor: pointer; font-weight: 700;
        }
        .nav-btn-primary { background-color: var(--primary-color); color: var(--text-muted); }
        .nav-btn-primary:hover { background-color: var(--text-muted); color: var(--primary-color); }
        .nav-btn-secondary { background-color: transparent; color: var(--primary-color); }
        .nav-btn-secondary:hover { background-color: var(--text-muted); color: var(--primary-color); }

        body.menu-open .nav-btn-primary { background: #fff; color: var(--primary-color); border-color: #fff; }
        body.menu-open .nav-btn-primary:hover { background: transparent; color: #fff; }
        body.menu-open .nav-btn-secondary { color: #fff; border-color: #fff; }
        body.menu-open .nav-btn-secondary:hover { background: #fff; color: var(--primary-color); }

        /* Hamburguesa */
        .hamburger { cursor: pointer; width: 32px; height: 22px; position: relative; z-index: 1005; display: flex; flex-direction: column; justify-content: space-between; }
        .hamburger span { display: block; width: 100%; height: 2px; background-color: var(--primary-color); transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.4s, background-color 0.3s; transform-origin: center; }
        nav.scrolled .hamburger span { background-color: var(--primary-color); }
        
        /* Transformación a 'X' blanca cuando el menú está abierto */
        body.menu-open .hamburger span { background-color: #fff !important; }
        .hamburger.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); background-color: #fff; }
        .hamburger.open span:nth-child(2) { opacity: 0; }
        .hamburger.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); background-color: #fff; }

        /* --- ARQUITECTURA OVERLAY MENÚ (FIX ANTI-COLISIÓN) --- */
        .menu-overlay {
            position: fixed; right: 0; left: auto; 
            width: 50%; max-width: 650px; height: 100vh;
            background-color: var(--primary-color); z-index: 999;
            transform: translateX(100%); visibility: hidden;
            transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.6s;
            box-shadow: -15px 0 40px rgba(0,0,0,0.4); 
            overflow-y: auto; overflow-x: hidden;
            display: block; /* Forzamos bloque para evitar colapsos de flexbox en Safari */
        }
        .menu-overlay.active { transform: translateX(0); visibility: visible; }

        /* Wrapper interno para control milimétrico de espacios */
        .menu-overlay-content {
            display: flex;
            flex-direction: column;
            min-height: 100%;
            padding: 110px 10% 60px 10%; /* Margen superior seguro para Nav Buttons */
        }

        .main-nav { width: 100%; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; }
        .main-nav ul { width: 100%; display: flex; flex-direction: column; }
        .main-nav li { margin: 3px 0; transform: translateY(20px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; padding-bottom: 10px;}
        .main-nav li:last-child { border-bottom: none; }
        
        .menu-overlay.active .main-nav li { transform: translateY(0); opacity: 1; }
        .menu-overlay.active .main-nav li:nth-child(1) { transition-delay: 0.1s; }
        .menu-overlay.active .main-nav li:nth-child(2) { transition-delay: 0.15s; }
        .menu-overlay.active .main-nav li:nth-child(3) { transition-delay: 0.2s; }
        .menu-overlay.active .main-nav li:nth-child(4) { transition-delay: 0.25s; }
        .menu-overlay.active .main-nav li:nth-child(5) { transition-delay: 0.3s; }
        .menu-overlay.active .main-nav li:nth-child(6) { transition-delay: 0.35s; }
        .menu-overlay.active .main-nav li:nth-child(7) { transition-delay: 0.4s; }

        .main-nav a { 
            font-family: var(--font-serif);
            font-size: clamp(1.7rem, 2.5vh, 1.5rem);
            /* font-weight: 600; */
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #fff;
            display: inline-block;
            width: 100%;
            
            /* Necesario para posicionar la línea respecto al contenedor del enlace */
            position: relative; 
            opacity: 1;
            
            /* Controlamos la animación de la opacidad y el desplazamiento */
            transition: opacity 0.4s ease, padding-left 0.4s ease;
        }

        /* Creamos la línea invisible oculta a la derecha */
        .main-nav a::before {
            content: "";
            position: absolute;
            top: 50%;
            right: 0; /* Se alinea al borde derecho */
            width: 0;  /* Empieza con tamaño cero */
            height: 2px; /* Grosor de la línea estilo tachado */
            background-color: #fff; /* Línea blanca a juego con el texto */
            transform: translateY(-50%);
            transition: width 0.4s ease; /* Transición para que se estire suavemente */
        }

        .main-nav a:hover { 
            opacity: 0.5;         /* Baja la opacidad del texto */
            padding-left: 12px;   /* Se desplaza solo un poco a la derecha */
        }

        /* Al hacer hover, la línea se estira hacia la izquierda desde el borde derecho */
        .main-nav a:hover::before {
            width: 60px; /* Longitud de la línea (puedes hacerla más larga si quieres, ej: 60px o 30%) */
        }

        .social-links a:hover { color: rgba(255, 255, 255, 01); padding: 0 0 0 !important; }
        .fa-brands {width: 30px}

        .mobile-nav-buttons { display: none; }

        .mobile-lang-selector { display: none; }
        
        /* Garantiza que los iconos queden anclados abajo, nunca pisando el menú */
        .social-links { 
            display: flex; gap: 30px; opacity: 0; 
            transition: opacity 0.6s ease 0.6s; 
            margin-top: 20px;
            float: left;
        }
        .menu-overlay.active .social-links { opacity: 1; }
        .social-links a { font-size: 22px; color: #fff; transition: transform 0.3s ease; }
        .social-links a:hover { transform: translateY(-3px); color: rgba(255, 255, 255, 0.7); }

        /* --- HERO --- */
        .hero { position: relative; min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 100px 20px 40px; }
        .hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); z-index: -2; object-fit: cover; }
        .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(10,10,10,0.9) 100%); z-index: -1; }
        .hero-content { text-align: center; z-index: 1; width: 100%; opacity: 0; display: flex; flex-direction: column; align-items: center; }
        @keyframes fadeInHero { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

        .hero-logo-main { font-family: var(--font-sans); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 900; color: var(--primary-color); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 5px; line-height: 1.1; }
        .hero-logo-sub { display: flex; align-items: center; gap: 15px; color: var(--primary-color); font-size: clamp(0.7rem, 2vw, 1rem); letter-spacing: 6px; text-transform: uppercase; margin-bottom: 20px; width: 100%; max-width: 500px; justify-content: center; }
        .hero-logo-sub .line { height: 1px; flex: 1; background-color: var(--primary-color); max-width: 80px; }
        
        .play-btn { width: 80px; height: 80px; border-radius: 50%; background: var(--primary-color); border: none; color: #fff; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding-left: 5px; }
        .play-btn:hover { background: #fff; color: var(--primary-color); transform: scale(1.1); box-shadow: 0 0 30px rgba(244, 159, 35, 0.6); }

        .logo_home{ width: 30%; max-width: 460px; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5));} 


        /* --- SECCIONES BASE --- */
        .welcome-section { padding: 100px 8vw; background-color: var(--bg-dark); text-align: center; max-width: 1200px; margin: 0 auto; overflow: hidden; }
        .section-subtitle { font-size: 0.85rem; letter-spacing: 4px; text-transform: uppercase; color: var(--text-light); margin-bottom: 20px; display: block; }
        .welcome-section h2 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 40px; font-weight: 400; margin-block-start: 0px; color: var(--primary-color); margin-bottom: 40px;}
        .welcome-section p { font-size: 1rem; color: var(--text-muted); margin-bottom: 20px; font-weight: 300; max-width: 1000px; margin-left: auto; margin-right: auto; }

        .parallax-section { background-image: url('../images/home_chef.jpg'); background-position: 50% 10%; background-repeat: no-repeat; background-size: cover; min-height: 70vh; display: flex; align-items: center; justify-content: flex-end; padding: 60px 10vw; position: relative; overflow: hidden;}
        .parallax-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); }
        .parallax-content { position: relative; background: rgba(0, 0, 0, 0.85); padding: 60px 50px; max-width: 550px; backdrop-filter: blur(10px); border: 1px solid rgba(244, 159, 35, 0.2); width: 100%; }
        .parallax-content h2 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 20px; color: var(--primary-color); font-weight: 400; }
        .parallax-content p { color: var(--text-muted); margin-bottom: 30px; font-weight: 300; }
        .link-elegant { color: var(--text-light); text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; border-bottom: 1px solid var(--primary-color); padding-bottom: 5px; transition: 0.3s; }
        .link-elegant:hover { color: var(--primary-color); }

        .location-section { display: flex; flex-wrap: wrap; background-color: var(--sec-color); overflow: hidden; }
        .location-info { flex: 1; min-width: 320px; padding: 100px 10vw; display: flex; flex-direction: column; justify-content: center; }
        .location-info h2 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 40px; font-weight: 400; color: var(--primary-color);}
        .info-block { margin-bottom: 30px; }
        .info-block h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--primary-color); margin-bottom: 10px; }
        .info-block p { color: var(--text-muted); font-weight: 300; }
        .location-map { flex: 1; min-width: 320px; min-height: 400px; }
        .location-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(100%) invert(92%) contrast(83%); }

        footer { background-color: var(--bg-darker); padding: 80px 8vw 0; border-top: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; }
        .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 50px; margin-bottom: 60px; }
        .footer-brand { margin-top: 20px; }
        .footer-brand h3 { font-family: var(--font-serif); font-size: 2rem; color: var(--primary-color); margin-bottom: 20px; }
        .footer-brand p { color: var(--text-light); font-size: 0.9rem; max-width: 300px; line-height: 1.8; }
        .footer-links h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 25px; color: var(--text-light); }
        .footer-links ul li { margin-bottom: 12px; }
        .footer-links ul li a { color: var(--text-muted); font-size: 0.95rem; transition: color 0.3s; }
        .footer-links ul li a:hover { color: var(--primary-color); }
        .footer-highlight-link { display: inline-block; margin-top: 15px; padding-bottom: 3px; border-bottom: 1px solid var(--primary-color); color: var(--primary-color) !important; font-size: 0.85rem !important; text-transform: uppercase; letter-spacing: 1px; }
        
        .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }
        .footer-social-bottom { display: flex; gap: 25px; }
        .footer-social-bottom a { font-size: 1.2rem; color: var(--text-light); transition: color 0.3s ease, transform 0.3s ease; }
        .footer-social-bottom a:hover { color: var(--primary-color); transform: translateY(-3px); }
        .footer-copyright { color: #666; font-size: 0.85rem; letter-spacing: 1px; }
        .footer-copyright p { font-size: 0.75rem;}

        .logo_footer { width:300px }
        .deco { color: var(--text-light); margin-left: 10px;}

        /* --- HERO SLIDER (EFECTO KEN BURNS) --- */
        .slider-container {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: -2; overflow: hidden; background-color: var(--bg-darker);
        }

        .slide {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover; background-position: center;
            opacity: 0;
            transform: scale(1);
            /* El truco de magia: opacidad en 2s, escalado continuo en 8s */
            transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1), transform 8s linear;
        }

        .slide.active {
            opacity: 1;
            transform: scale(1.08); /* Sutil zoom in */
        }

        /* Ajuste sutil para que el botón ahora anime hacia abajo (efecto flotante) */
        .play-btn {
            text-decoration: none; /* Al ser ahora un <a> quitamos subrayados */
            animation: bounce s ease-in-out infinite; 
        }

        body.is-loaded .hero-content { 
            animation: fadeInHero 2s ease 1s forwards; 
        }

        body.is-loaded .page-hero-content { 
            animation: cinematicReveal 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
        }



/* --- EL CHEF --- */

          /* 2. HERO INTERNO CON PARALLAX */
        .page-hero {
            position: relative;
            min-height: 70vh;
            display: flex;
            align-items: flex-end;
            padding: 100px 8vw 80px;
            background-size: cover;
            background-position: center 20%;
            background-attachment: fixed; /* El secreto del Parallax fluido */
            overflow: hidden;
        }
        .bg-chef-hero { background-image: url('../images/01_chef/chef_hero.jpg'); }

        /* =========================================================
           ANIMACIÓN CINEMATOGRÁFICA DE ENTRADA (Carga inicial)
        ========================================================= */
        .page-hero-content { 
            position: relative; 
            z-index: 10; /* Subimos la jerarquía para que nada lo tape */
            opacity: 0; /* Oculto por defecto antes de animar */
            width: 100%;
            
            /* El "motor" de la animación: dura 1.8s, tiene una curva de aceleración suave y espera 0.8s para arrancar */
            animation: cinematicReveal 1.8s cubic-bezier(0.25, 1, 0.5, 1) 0.8s forwards; 
        }

        /* Tus estilos tipográficos originales (Intactos) */
        .page-hero-title { 
            font-family: var(--font-serif2); 
            font-size: clamp(3.5rem, 8vw, 6rem); 
            font-weight: 400; 
            color: var(--text-muted); 
            margin-bottom: 5px; 
            line-height: 1; 
            text-shadow: #000 4px 4px 10px;
        }

        .page-hero-subtitle { 
            font-size: 1rem; 
            letter-spacing: 7px; 
            text-transform: uppercase; 
            color: var(--text-light); 
            margin-top: 0;
            text-shadow: #000 4px 4px 10px;
        }

        /* Keyframes de alto rendimiento (GPU) */
        @keyframes cinematicReveal {
            0% { 
                opacity: 0; 
                transform: translateY(40px) scale(0.98); 
                filter: blur(4px); 
            }
            100% { 
                opacity: 1; 
                transform: translateY(0) scale(1); 
                filter: blur(0); 
            }
        }

        /* 3. SECCIÓN BIOGRAFÍA (Fondo Claro) */
        .bio-section {
            display: flex; flex-wrap: wrap; 
            background-color: var(--text-muted); 
        }
        .bio-text {
            flex: 1; min-width: 320px;
            padding: 100px 8vw;
            display: flex; flex-direction: column; justify-content: center;
        }
        .bio-text .section-subtitle { color: var(--sec-color); }
        .bio-text h2 { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; color: var(--primary-color); margin-bottom: 40px; text-transform: uppercase; letter-spacing: 2px; margin-block-start: 0px;}

        .bio-image { flex: 1; min-width: 320px; position: relative; min-height: 500px;}
        .bio-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; padding: 30px;}

        /* 4. SECCIÓN FILOSOFÍA / PILARES (Entorno) */
        .philosophy-section {
            background-color: var(--bg-dark); padding: 120px 10vw; color: var(--text-light);
        }
        .section-header-centered { max-width: 800px; margin: 0 auto; text-align: center; }
        .philosophy-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 20px; font-weight: 400; color: #fff; }

        .philosophy-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 60px; margin-top: 60px;
        }
        .phil-item { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 30px; }
        .phil-item h4 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--primary-color); margin-bottom: 15px; font-weight: 400; }

        /* 5. SECCIÓN MANIFIESTO (Nueva Etapa) */
        .manifesto-section { background-color: var(--text-muted); padding: 120px 8vw; text-align: center; }
        .manifesto-content { max-width: 850px; margin: 0 auto; }
        .manifesto-subtitle { color: var(--sec-color); display: block; font-size: 0.85rem; letter-spacing: 4px; text-transform: uppercase; }
        .manifesto-title { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; color: var(--primary-color); margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; margin-block-start: 0px; }
        .manifesto-section p { color: var(--bg-dark); margin-bottom: 25px; }

        /* 6. SECCIÓN PARALLAX CITA */
        .quote-parallax {
            position: relative; min-height: 58vh;
            display: flex; align-items: center; justify-content: center; text-align: center;
            padding: 80px 5vw;
            background-size: cover; background-attachment: fixed; background-position: center;
        }
        .bg-chef-quote { background-image: url('../images/01_chef/plato.jpg'); }
        .quote-parallax .hero-overlay { background: rgba(15, 15, 15, 0.85); }
        .quote-content { position: relative; z-index: 2; max-width: 1000px; }
        .quote-icon { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 0px; opacity: 0.8; }
        .quote-content blockquote { font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 300; font-style: italic; color: #fff; line-height: 1.5; }

        /* 7. LOCALIZACIÓN / MAPA (Clases de abstracción) */
        .border-top-subtle { border-top: 1px solid rgba(255, 255, 255, 0.05); }
        .location-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 40px; font-weight: 400; }
        .info-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: var(--primary-color); margin-bottom: 10px; }
        .map-iframe { width: 100%; height: 100%; border: 0; filter: grayscale(100%) invert(92%) contrast(83%); min-height: 400px; }


        /* --- PUENTE TIPOGRÁFICO (Diseño Editorial) --- */
        .typographic-break {
            background-color: var(--bg-darker); /* Un fondo más oscuro para contrastar */
            padding: 100px 5vw;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.03);
        }

        .break-phrase {
            font-family: var(--font-serif);
            font-size: clamp(2rem, 5vw, 4.5rem);
            font-weight: 300;
            color: var(--text-muted);
            line-height: 1.3;
            margin: 0;
                text-align: center;
        }

        /* El toque premium: le damos tu color corporativo a la segunda línea */
        .highlight-phrase {
            color: var(--primary-color);
            font-style: italic;
        }

        /* --- CURSOR DE MÁQUINA DE ESCRIBIR --- */
        .type-cursor {
            display: inline-block;
            width: 3px;
            height: 1.1em;
            background-color: var(--primary-color);
            vertical-align: text-bottom;
            margin-left: 6px;
            animation: blinkCursor 0.8s step-end infinite;
        }

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



/*     COCINA      */


        .bg-cocina-hero { 
            background-image: url('../images/02_cocina/cocina_hero.jpg'); 
        }

        /* 2. BLOQUE EDITORIAL SPLIT (Elemento diferenciador de Su Cocina) */
        .editorial-section {
            display: flex; flex-wrap: wrap; 
            background-color: var(--bg-dark); 
            color: var(--text-light);
        }
        .editorial-text {
            flex: 1; min-width: 320px;
            padding: 100px 8vw;
            display: flex; flex-direction: column; justify-content: center;
        }
        .editorial-text .section-subtitle { color: var(--primary-color); }
        .editorial-text h2 { 
            font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); 
            font-weight: 400; color: #fff; margin-bottom: 40px; 
            text-transform: uppercase; letter-spacing: 2px; line-height: 1.1; 
            margin-block-start: 0px;
        }
        .editorial-text p { 
            margin-bottom: 25px; 
            color: var(--text-light); font-weight: 300; 
        }
        
        .editorial-image { flex: 1; min-width: 320px; position: relative; min-height: 500px; }
        .editorial-image img { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
            object-fit: cover; opacity: 0.9;
        }

        /* Inversión para el segundo bloque editorial (Fondo Claro) */
        .editorial-section.reverse { 
            flex-direction: row-reverse; 
            background-color: var(--text-muted); 
            color: var(--bg-dark); 
        }
        .editorial-section.reverse .editorial-text h2 { color: var(--primary-color); }
        .editorial-section.reverse .editorial-text p { color: var(--bg-dark);}
        .editorial-section.reverse .editorial-text .section-subtitle { color: var(--sec-color); }

        /* 3. GRID DE CONCEPTOS (Tarjetas sutiles) */
        .concept-grid-section { background-color: var(--bg-dark); padding: 120px 10vw; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); }
        .concept-grid-section p{ color: var(--text-light); max-width: 900px; margin: auto;}
        .concept-title { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.5rem); color: #fff; margin-bottom: 20px; font-weight: 400;}
        .concept-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-top: 60px;}
        .concept-card { 
            padding: 50px 30px; border: 1px solid rgba(244, 159, 35, 0.15); 
            transition: transform 0.4s ease, background 0.4s ease; background: rgba(0,0,0,0.2); 
        }
        .concept-card:hover { transform: translateY(-10px); background: rgba(244, 159, 35, 0.05); border-color: rgba(244, 159, 35, 0.4); }
        .concept-card h4 { font-family: var(--font-serif); font-size: 1.5rem; color: var(--primary-color); margin-bottom: 20px; font-weight: 400; }
        .concept-card p { color: var(--text-light); font-weight: 300; font-size: 1rem; line-height: 1.7; }

        /* 4. PARALLAX ESPECÍFICO DE COCINA */
        .bg-cocina-quote { background-image: url('../images/02_cocina/cocina_parallax.jpg'); }

        /* RESPONSIVE MÓVIL (Invierte las cajas para que la imagen quede arriba) */
        @media (max-width: 900px) {
            .editorial-section, .editorial-section.reverse { flex-direction: column-reverse; }
            .editorial-image { min-height: 400px; }
            .editorial-text { padding: 80px 5vw; }
        }


/*     MENU       */


        .bg-menu-hero { 
            background-image: url('../images/03_menus/menus_hero.jpg'); 
        }

        /* 2. INTRODUCCIÓN (Manifiesto de la mesa) */
        .menu-philosophy { 
            padding: 100px 8vw; 
            text-align: center; 
            background-color: var(--text-muted); 
            color: var(--bg-dark); 
        }
        .menu-philosophy p { 

            max-width: 900px; 
            margin: 0 auto 20px; 
        }
        .menu-philosophy strong {
            font-weight: 600;
            color: var(--sec-color);
        }

        .menu-philosophy h2 {font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--primary-color); margin-bottom: 40px; font-weight: 400;}
        
        .menu-philosophy .section-subtitle{
            color: var(--sec-color);

        }

        /* ESTILOS DE LOS BOTONES DE MENÚ */
        .menu-action-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 50px;
        }
        .menu-action-btn {
            padding: 15px 40px;
            font-size: 0.85rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            border: 1px solid var(--primary-color);
            transition: all 0.4s ease;
            cursor: pointer;
            font-weight: 700;
            text-decoration: none;
        }
        .btn-degustacion {
            background-color: var(--primary-color);
            color: var(--text-muted);
        }
        .btn-degustacion:hover {
            background-color: transparent;
            color: var(--primary-color);
        }
        .btn-carta {
            background-color: transparent;
            color: var(--primary-color);
        }
        .btn-carta:hover {
            background-color: var(--primary-color);
            color: var(--bg-dark);
        }

        /* 3. MENÚ DEGUSTACIÓN (Fondo Oscuro, Centrado y Solemne) */
        .tasting-section { 
            background-color: var(--bg-dark); 
            color: var(--text-light); 
            padding: 120px 5vw; 
            text-align: center; 
        }
        .tasting-title { 
            font-family: var(--font-serif); 
            font-size: clamp(2.5rem, 5vw, 4rem); 
            color: var(--third-color); 
            margin-bottom: 20px; 
            font-weight: 400; 
            text-transform: uppercase; 
            letter-spacing: 2px;
            margin-block-start: 0px;
        }
        .tasting-desc { 
            max-width: 600px; 
            margin: 0 auto 60px; 
            font-weight: 300; 
            color: #fff; 
            line-height: 1.8;
        }
        .tasting-list { 
            max-width: 700px; 
            margin: 0 auto; 
            list-style: none; 
            padding: 0; 
        }
        .tasting-list li { 
            font-size: 1.15rem; 
            padding: 18px 0; 
            border-bottom: 1px solid rgba(255,255,255,0.06); 
            font-weight: 300; 

        }
        .tasting-list li:last-child { border-bottom: none; }
        .tasting-price { 
            margin-top: 60px; 
            font-size: 2.2rem; 
            color: var(--primary-color); 
            font-family: var(--font-serif); 
        }
        .tasting-price span { 
            display: block; 
            font-size: 0.85rem; 
            font-family: var(--font-sans); 
            color: var(--text-muted); 
            letter-spacing: 2px; 
            text-transform: uppercase; 
            margin-top: 10px; 
        }

        /* 4. PARALLAX TRANSICIÓN */
        .bg-menu-quote { 
            background-image: url('../images/03_menus/menus_parallax.jpg'); 
        }

        /* 5. A LA CARTA (Fondo Claro, Grid de 2 Columnas) */
        .alacarte-section { 
            background-color: var(--text-muted); 
            color: var(--bg-dark); 
            padding: 120px 8vw; 
        }

        .alacarte-section .section-subtitle{ 
            color: var(--sec-color);
        }

        .alacarte-header { 
            text-align: center; 
            margin-bottom: 80px; 
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        .alacarte-header h2 { 
            font-family: var(--font-serif); 
            font-size: clamp(2.5rem, 5vw, 4rem); 
            color: var(--bg-dark); 
            font-weight: 400; 
            text-transform: uppercase; 
            letter-spacing: 2px;
            margin-block-start: 0px;
            margin-block-end: 0px; 
        }
        .alacarte-header p {
            font-size: 1.1rem;
            color: #555;
            font-weight: 300;
            margin-top: 20px;
        }
        
        .menu-grid { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 80px 60px; 
            max-width: 1200px; 
            margin: 0 auto; 
        }
        .menu-category h3 { 
            font-family: var(--font-serif); 
            font-size: 2.2rem; 
            color: var(--sec-color); 
            border-bottom: 1px solid rgba(0,0,0,0.1); 
            padding-bottom: 15px; 
            margin-bottom: 35px; 
            font-weight: 400;
        }
        
        .dish-item { margin-bottom: 35px; }
        .dish-name { 
            font-size: 1.15rem; 
            font-weight: 600; 
            color: var(--third-color); 
            margin-bottom: 8px; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
        }
        .dish-desc { 
            font-size: 1rem; 
            font-weight: 300; 
            color: #555; 
            line-height: 1.6; 
            margin: 0;
        }

        /* FOOTNOTES (Anotaciones al pie de la carta) */
        .menu-footnotes { 
            max-width: 1000px; 
            margin: 60px auto 0; 
            padding-top: 50px; 
            border-top: 1px solid rgba(0,0,0,0.1); 
            display: flex; 
            gap: 40px; 
            justify-content: center; 
            flex-wrap: wrap; 
            text-align: center;
        }
        .footnote { 
            flex: 1; 
            min-width: 280px; 
            max-width: 400px; 
        }
        .footnote h4 { 
            font-size: 0.85rem; 
            text-transform: uppercase; 
            letter-spacing: 2px; 
            color: var(--primary-color); 
            margin-bottom: 10px; 
        }
        .footnote p { 
            font-size: 0.95rem; 
            color: #666; 
            font-weight: 300; 
            margin: 0; 
        }

        /* RESPONSIVE MÓVIL */
        @media (max-width: 900px) {
            .menu-grid { grid-template-columns: 1fr; gap: 60px; }
            .menu-footnotes { flex-direction: column; align-items: center; gap: 40px; }
            
            /* Ajuste de botones en móvil */
            .menu-action-buttons { flex-direction: column; align-items: center; }
            .menu-action-btn { width: 100%; max-width: 300px; text-align: center; }
        }



/*     GALERIA     */


    .bg-galeria-hero { 
        background-image: url('../images/04_galeria/galeria_hero.jpg'); 
    }

    /* 2. LAYOUT GRID TIPO "BENTO" / EDITORIAL (Con dobles anchos y altos) */
    .gallery-section {
        padding: 100px 5vw 120px;
        background-color: var(--bg-dark);
    }
    
    .gallery-intro {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 60px;
    }
    
    .gallery-intro h2 {
        font-family: var(--font-serif);
        font-size: clamp(2.5rem, 5vw, 4rem);
        color: var(--primary-color);
        margin-bottom: 40px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-block-start: 0px;
    }
    
    .gallery-intro p {
        margin-bottom: 100px;
        color: var(--text-muted);
        line-height: 1.8;
    }

    /* Contenedor CSS Grid */
    .bento-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columnas en escritorio */
        grid-auto-rows: 300px; /* Altura base para las filas */
        gap: 20px;
        max-width: 1400px;
        margin: 0 auto;
        grid-auto-flow: dense; /* Magia: rellena los huecos vacíos automáticamente */
    }

    .bento-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        background-color: var(--bg-darker);
        /* Por defecto ocupan 1x1 */
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Clases modificadoras para dobles anchos/altos */
    .bento-item.w-2 { grid-column: span 2; } /* Doble ancho */
    .bento-item.h-2 { grid-row: span 2; }    /* Doble alto */
    
    /* Nota: si una imagen tiene ambas (.w-2 .h-2) será un cuadro gigante 2x2 */

    .bento-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Efecto Hover Elegante sobre la cuadrícula */
    .bento-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(10, 10, 10, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .bento-item:hover img {
        transform: scale(1.05); /* Zoom sutil de la foto */
    }

    .bento-item:hover .bento-overlay {
        opacity: 1;
    }

    .bento-icon {
        color: var(--primary-color);
        font-size: 2rem;
        transform: scale(0.5);
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
    }

    .bento-item:hover .bento-icon {
        transform: scale(1);
        opacity: 1;
    }

    /* 3. LIGHTBOX / VISOR DE IMÁGENES A PANTALLA COMPLETA */
    .lightbox-modal {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(5, 5, 5, 0.95);
        backdrop-filter: blur(10px);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }

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

    .lightbox-content {
        position: relative;
        max-width: 90vw;
        max-height: 85vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lightbox-img {
        max-width: 100%;
        max-height: 85vh;
        object-fit: contain;
        opacity: 0;
        transform: scale(0.98);
        transition: opacity 0.4s ease, transform 0.4s ease;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }

    .lightbox-img.loaded {
        opacity: 1;
        transform: scale(1);
    }

    /* Controles del Visor */
    .lightbox-btn {
        position: absolute;
        background: transparent;
        border: none;
        color: var(--text-muted);
        font-size: 2rem;
        cursor: pointer;
        transition: color 0.3s ease, transform 0.3s ease;
        padding: 20px;
        z-index: 10001;
    }

    .lightbox-btn:hover {
        color: var(--primary-color);
        transform: scale(1.1);
    }

    .lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
    .lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
    .lightbox-close { top: 20px; right: 30px; font-size: 2.5rem; }

    /* Contador del Visor */
    .lightbox-counter {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: var(--text-muted);
        font-family: var(--font-sans);
        font-size: 0.85rem;
        letter-spacing: 3px;
    }
    
    .lightbox-counter span.current {
        color: var(--primary-color);
        font-weight: 700;
    }

    /* PRELOADER SPINNER PARA EL LIGHTBOX */
    .lightbox-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border: 2px solid rgba(244, 159, 35, 0.2);
        border-top: 2px solid var(--primary-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        opacity: 0;
        visibility: hidden;
    }
    
    .lightbox-spinner.active {
        opacity: 1;
        visibility: visible;
    }

    @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }



/*      PRENSA     */


    .bg-prensa-hero { 
        background-image: url('../images/05_prensa/prensa_hero.jpg'); 
    }

    /* 2. LAYOUT SECCIÓN PRENSA */
    .press-section {
        padding: 100px 5vw 120px;
        background-color: var(--text-muted);
        color: var(--bg-dark);
    }

    .press-intro {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 60px;
    }

    .press-intro h2 {
        font-family: var(--font-serif);
        font-size: clamp(2.5rem, 5vw, 4rem);
        color: var(--primary-color);
        margin-bottom: 40px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-block-start: 0px;
    }

    /* 3. GRID DE NOTICIAS (EDITORIAL / BLOG) */
    .press-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 40px;
        max-width: 1300px;
        margin: 0 auto;
    }

    /* TARJETAS DE NOTICIA */
    .press-card {
        background: #ffffff;
        border: 1px solid #eaeaea;
        display: flex;
        flex-direction: column;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        text-decoration: none; /* Asegura que el contenedor interactivo no tenga subrayados base */
        cursor: pointer;
    }

    .press-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    }

    .press-image-wrapper {
        position: relative;
        width: 100%;
        padding-top: 65%; /* Mantiene una relación de aspecto consistente (~3:2) en todas las fotos */
        overflow: hidden;
        background-color: var(--bg-darker);
    }

    .press-image-wrapper img {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
        filter: grayscale(15%); /* Toque elegante que se colorea al pasar el ratón */
    }

    .press-card:hover .press-image-wrapper img {
        transform: scale(1.05);
        filter: grayscale(0%);
    }

    .press-content {
        padding: 35px 30px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .press-meta {
        font-family: var(--font-sans);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--primary-color);
        margin-bottom: 15px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 12px;
    }

    .press-meta span.date { color: #888; font-weight: 400; }

    .press-title {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        color: var(--bg-dark);
        margin-bottom: 15px;
        font-weight: 400;
        line-height: 1.3;
        transition: color 0.3s ease;
    }

    .press-card:hover .press-title {
        color: var(--primary-color);
    }

    .press-excerpt {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        color: #666;
        line-height: 1.7;
        margin-bottom: 25px;
        font-weight: 300;
        flex-grow: 1; /* Esto empuja el botón de "Leer más" siempre al fondo de la tarjeta */
    }

    .press-read-more {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--bg-dark);
        margin-top: auto;
        transition: color 0.3s ease;
    }

    .press-card:hover .press-read-more {
        color: var(--primary-color);
    }

    .press-read-more i {
        font-size: 1.1em;
        transition: transform 0.3s ease;
    }

    .press-card:hover .press-read-more i {
        transform: translateX(5px);
    }


/*      CONTACTO    */

    /* 1. HERO INTERNO */
    .bg-contacto-hero { 
        background-image: url('../images/06_contacto/contacto_hero.jpg'); 
    }

    /* 2. SECCIÓN FORMULARIO (FILA COMPLETA CENTRADA) */
    .contact-form-section {
        padding: 100px 8vw 60px;
        background-color: var(--text-muted)
    }

    .form-wrapper {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }

    .form-subtitle {
        color: var(--sec-color);
        font-size: 0.85rem;
        letter-spacing: 4px;
        text-transform: uppercase;
        margin-bottom: 15px;
        display: block;
    }

    /* Título naranja como solicitaste */
    .form-title {
        font-family: var(--font-serif);
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 400;
        color: var(--primary-color); 
        margin-bottom: 30px;
        margin-block-start: 0px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .form-intro {
        margin-bottom: 50px;
    }

    /* El grid interior del formulario sigue ordenado a la izquierda */
    .contact-form {
        text-align: left;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .custom-form-group {
        display: flex;
        flex-direction: column;
    }

    .custom-form-group.full-width {
        grid-column: span 2;
    }

    .custom-form-control {
        width: 100%;
        padding: 18px 20px;
        background: #ffffff;
        border: 1px solid #dcdcdc;
        color: var(--bg-dark);
        font-family: var(--font-sans);
        font-size: 1rem;
        outline: none;
        transition: all 0.3s ease;
        border-radius: 0;
        -webkit-appearance: none;
    }

    .custom-form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }

    textarea.custom-form-control {
        resize: vertical;
        min-height: 150px;
    }

    .btn-submit-contact {
        background: var(--bg-dark);
        color: #fff;
        border: none;
        padding: 20px 40px;
        font-size: 0.95rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: var(--font-sans);
        font-weight: 700;
        width: 100%;
        grid-column: span 2;
        margin-top: 10px;
    }

    .btn-submit-contact:hover {
        background: var(--primary-color);
        color: var(--bg-dark);
    }

    /* Honeypot anti-spam: trampa para bots, invisible para las personas. */
    .contact-form .hpot {
        position: absolute;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    /* Mensaje de estado del formulario (éxito / error). */
    .form-status {
        max-width: 800px;
        margin: 0 auto 40px auto;
        padding: 25px 30px;
        background: #ffffff;
        border-left: 4px solid var(--sec-color, #813212);
        box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        text-align: center;
    }
    .form-status-title {
        font-size: 1.3rem;
        font-weight: 400;
        margin: 0 0 10px 0;
        color: var(--sec-color, #813212);
    }
    .form-status p { margin: 0; }
    .form-status-success { border-left-color: #2e7d32; }
    .form-status-success .form-status-title { color: #2e7d32; }
    .form-status-error { border-left-color: #c62828; }
    .form-status-error .form-status-title { color: #c62828; }
    .form-status-errors {
        list-style: none;
        margin: 15px 0 0 0;
        padding: 0;
        color: #c62828;
        font-size: 0.9rem;
    }
    .form-status-errors li { margin-top: 5px; }

    /* Error del reCAPTCHA del contacto: hereda .msg-error. */
    #contacto-captcha-error { margin-top: 10px; }

    /* Consentimiento RGPD: el label debe fluir en línea (texto + enlace),
       sin apilarse en varias líneas. */
    .contact-form .acceptance-box { align-items: flex-start; }
    .contact-form .acceptance-box label { display: block; }
    .contact-form .acceptance-box label a { display: inline; }

    /* 3. SECCIÓN TRABAJA CON NOSOTROS */
    .work-with-us-section {
        padding: 0 8vw 120px;
        background-color: #fcfcfc;
        text-align: center;
    }

    .work-wrapper {
        max-width: 800px;
        margin: 0 auto;
        padding-top: 60px;
        border-top: 1px solid #eaeaea; /* Línea sutil separadora */
    }

    .work-title {
        font-family: var(--font-serif);
        font-size: clamp(1.8rem, 3vw, 2.5rem);
        color: var(--bg-dark);
        font-weight: 400;
        margin-bottom: 15px;
        margin-block-start: 0px;
    }

    .work-email {
        font-size: 1.15rem;
        color: var(--primary-color);
        font-weight: 700;
        letter-spacing: 1px;
        transition: color 0.3s ease;
    }

    .work-email:hover {
        color: var(--sec-color);
    }

    /* RESPONSIVE MÓVIL */
    @media (max-width: 768px) {
        .contact-form { grid-template-columns: 1fr; }
        .custom-form-group.full-width { grid-column: span 1; }
        .btn-submit-contact { grid-column: span 1; }
        .contact-form-section { padding: 80px 5vw 40px; }
        .work-with-us-section { padding: 0 5vw 80px; }
    }





/* RESERVAS */


     /* Clases Utilitarias */
    .text-primary { color: var(--primary-color); }
    .text-dark { color: var(--bg-dark); }
    .text-sec { color: var(--sec-color); }
    .font-bold { font-weight: bold; }
    .font-serif { font-family: var(--font-serif); }
    .flex-1 { flex: 1; }
    .text-center { text-align: center; }
    
    /* Manejo de estados en JS */
    .d-none { display: none !important; }
    .opacity-0 { opacity: 0 !important; }
    .view-transition { transition: all 0.4s ease; }
    .msg-error { color: #ff6b6b; font-size: 0.85rem; margin-top: 10px; }

    /* Hero */
    .page-hero-narrow {
        min-height: 40vh; display: flex; align-items: center; position: relative;
        background-size: cover; background-position: center;
    }
    .bg-reservas-hero { background-image: url('../images/07_reservas/reservas_hero.jpg'); }
    .page-hero-title { font-family: var(--font-serif2), serif; letter-spacing: 2px; color: #ffffff; }
    .page-hero-subtitle { font-family: var(--font-serif); font-size: 1.2rem; letter-spacing: 1px; }

    /* Layout Principal: Grid Dinámico */
    .reservas-section { 
            padding: 70px 5% 100px; background-color: var(--text-muted); color: var(--bg-dark); font-family: var(--font-sans);
    }
    .reservas-grid {
        max-width: 1400px; margin: 0 auto; display: grid; 
        grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; transition: all 0.5s ease;
    }
    /* Clase que JS añadirá para el Checkout espacioso (1 columna centrada) */
    .reservas-grid.checkout-mode {
        grid-template-columns: 1fr; max-width: 1000px; width: 90%;}

    /* Aviso de retorno de la pasarela de pago (reserva.php -> /reservas?payment_status=…) */
    .reserva-notice {
        max-width: 780px; margin: 0 auto; padding: 50px 45px; background: #ffffff;
        border-top: 3px solid var(--primary-color); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06); text-align: center;
    }
    .reserva-notice.is-success { border-top-color: #2e7d32; }
    .reserva-notice.is-error   { border-top-color: #b3261e; }
    .reserva-notice-icon { display: block; font-size: 2.2rem; margin-bottom: 18px; color: var(--primary-color); }
    .reserva-notice.is-success .reserva-notice-icon { color: #2e7d32; }
    .reserva-notice.is-error   .reserva-notice-icon { color: #b3261e; }
    .reserva-notice-title { font-family: var(--font-serif); font-size: 1.7rem; line-height: 1.3; color: var(--bg-dark); margin: 0 0 16px; }
    .reserva-notice-text { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.8; color: #444; margin: 0 0 30px; }
    .reserva-notice-btn { text-decoration: none; }

    /* Títulos Generales */
    .section-title {
        text-align: left; font-family: var(--font-serif); font-size: 1.8rem; 
        color: var(--sec-color); text-transform: uppercase; margin-bottom: 40px; letter-spacing: 1px;
    }
    .section-title.center { text-align: center; }

    /* COLUMNA IZQ: Información Importante */
    .reservas-terms-wrapper { position: sticky; top: 120px; padding-right: 20px; margin-top: 50px;}
    .summary-item {
        margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.06); 
        line-height: 1.8; color: var(--bg-dark); display: flex; gap: 20px; align-items: flex-start;
    }
    .summary-item:last-of-type { border-bottom: none; padding-bottom: 0; }
    .summary-item i { color: var(--primary-color); font-size: 1.5rem; margin-top: 6px; }
    .summary-item-title { display: block; font-size: 1.15rem; color: var(--primary-color); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
    .summary-note { margin-top: 30px; padding: 20px 25px; background: rgba(244, 159, 35, 0.08); border-left: 3px solid var(--primary-color); font-size: 0.95rem; color: var(--bg-darker); text-align: left; }

    /* COLUMNA DER / BLOQUES BLANCOS */
    .booking-view {
        background: #ffffff; padding: 50px; border-radius: 0; border: 1px solid #eaeaea; box-shadow: 0 10px 30px rgba(0,0,0,0.02); 
    }

    /* Elementos Comunes Formulario */
    .input-group { display: flex; flex-direction: column; gap: 8px; text-align: left; }
    .input-group label { font-size: 0.8rem; color: var(--sec-color); text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
    .input-control {
        padding: 0 15px; height: 52px; line-height: 52px; border: 1px solid #dcdcdc; border-radius: 0; 
        background: #ffffff; color: var(--bg-dark); font-family: inherit; font-size: 1rem; outline: none; transition: border 0.3s; box-sizing: border-box; -webkit-appearance: none;
    }
    .input-control:focus { border-color: var(--primary-color); }
    select.input-control { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231d1d1b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: 12px auto; cursor: pointer; }
    
    .btn-submit {
        background: var(--bg-dark); color: #ffffff; border: none; padding: 18px 30px; font-size: 1rem; font-weight: bold; cursor: pointer; border-radius: 0; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-sans); -webkit-appearance: none; display: inline-block;
    }
    .btn-submit:hover { background: var(--bg-darker); color: var(--primary-color); }
    .btn-submit:disabled { background: #e0e0e0; color: #999; cursor: not-allowed; }
    .btn-light { background: transparent; color: var(--bg-dark); border: 1px solid var(--bg-dark); padding: 0 25px; height: 52px; font-size: 0.95rem; cursor: pointer; border-radius: 0; transition: all 0.3s; text-transform: uppercase; -webkit-appearance: none; }
    .btn-light:hover { background: #f5f5f5; }
    

    .btn-link-sm { font-size: 0.85rem; margin-top: 5px; color: var(--primary-color); }

    /* ====== PASO 1: CALENDARIO ====== */
    .calendar-container { margin-bottom: 40px; }
    .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; color: var(--primary-color); font-size: 1.2rem; text-transform: uppercase;  }
    .calendar-header button { background: none; border: none; color: var(--bg-dark); font-size: 1.2rem; cursor: pointer; transition: color 0.3s; padding: 5px 10px; }
    .calendar-header button:hover { color: var(--primary-color); }
    .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
    .calendar-day-name { font-size: 0.85rem; color: var(--sec-color); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
    .calendar-day { padding: 12px 0; font-size: 1rem; color: #555; cursor: pointer; transition: all 0.3s ease; border: 1px solid transparent; }
    .calendar-day.available { background: var(--primary-color); border: 1px solid var(--primary-color); color: var(--text-muted); }
    .calendar-day.available:hover { background: var(--sec-color); border-color: var(--sec-color); color: #fff; }
    .calendar-day.selected { background: var(--bg-dark); color: #ffffff; border-color: var(--bg-dark); font-weight: bold; }
    .calendar-day.disabled { opacity: 0.3; cursor: not-allowed; background: transparent; border: none; }
    
    .booking-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; }
    .personas-wrapper { display: flex; border: 1px solid #dcdcdc; background: #ffffff; height: 52px; box-sizing: border-box; }
    .personas-wrapper input { width: 100%; border: none; text-align: center; background: transparent; color: var(--bg-dark); outline: none; font-size: 1rem; }
    .personas-wrapper button { background: transparent; border: none; padding: 0 20px; cursor: pointer; color: var(--bg-dark); font-size: 1.5rem; transition: background 0.2s; }
    .personas-wrapper button:hover { background: #f5f5f5; color: var(--primary-color); }
    .personas-wrapper button:first-child { border-right: 1px solid #dcdcdc; }
    .personas-wrapper button:last-child { border-left: 1px solid #dcdcdc; }

    /* ====== PASO 2: CHECKOUT ====== */
    /* Resumen de cabecera en el Paso 2 */
    .step2-summary {
        margin-bottom: 35px; padding-bottom: 25px; border-bottom: 1px solid #eaeaea;
        font-size: 1.25rem; color: var(--bg-dark); line-height: 1.8;
    }
    .step2-summary strong { font-weight: 500; font-family: var(--font-sans); }

    .checkout-block { border-top: 1px solid #eaeaea; margin-top: 40px; padding-top: 40px; }
    .checkout-block:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
    .checkout-block-title { font-size: 1.2rem; color: var(--bg-dark); margin-bottom: 25px; font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 0.5px; }
    
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .form-grid-full { grid-column: span 2; }
    textarea.input-control { resize: vertical; min-height: 120px; line-height: 1.5; padding: 15px; }
    
    .payment-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 15px; margin-top: 15px; }
    .bono-group { display: flex; gap: 10px; }
    
    .validation-boxes { display: flex; flex-direction: column; gap: 15px; }
    .acceptance-box { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
    .acceptance-box input[type="checkbox"] { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--bg-dark); cursor: pointer; border-radius: 0; }
    .acceptance-box label { font-size: 0.9rem; color: #444; line-height: 1.5; cursor: pointer; user-select: none; margin: 0; display: flex; flex-direction: column;}
    
    .captcha-box { display: flex; gap: 10px; align-items: center; max-width: 400px; }
    .captcha-img { border: 1px solid #dcdcdc; background: #fafafa; padding: 0 15px; height: 52px; display: flex; align-items: center; justify-content: center; letter-spacing: 4px; font-weight: bold; color: var(--bg-dark); font-family: monospace; }
    
    .action-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid #eaeaea; }

    /* ====== PASO 3: RESUMEN FINAL ====== */
    .summary-table-container { max-width: 600px; margin: 0 auto; text-align: center; }
    .summary-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px; margin: 40px 0; font-size: 1.15rem; }
    .summary-list dt { text-align: right; color: var(--sec-color); font-family: var(--font-serif); padding-top: 2px; }
    .summary-list dd { text-align: left; color: var(--bg-dark); margin: 0; font-family: var(--font-sans); }
    .spam-warning { font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 40px; border-top: 1px solid #eaeaea; padding-top: 30px; }
    .action-buttons-center { display: flex; justify-content: center; align-items: center; gap: 30px; }

    /* ====== MODAL (POPUP) TÉRMINOS ====== */
    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(10,10,10,0.85); z-index: 9999;
        display: flex; justify-content: center; align-items: center;
        opacity: 0; visibility: hidden; transition: all 0.3s ease;
    }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal-content {
        background: #fff; width: 90%; max-width: 800px; max-height: 85vh;
        /* El scroll va DENTRO de .modal-body: el boton de cierre (posicionado
           sobre .modal-content) permanece siempre visible */
        display: flex; flex-direction: column; overflow: hidden;
        border-radius: 0;
        box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        padding: 0; position: relative;
    }
    .modal-content .modal-body {
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 80px;
    }
    .modal-close {
        position: absolute; top: 20px; right: 25px; font-size: 2rem; background: none; 
        border: none; color: var(--bg-dark); cursor: pointer; line-height: 1;
    }
    .modal-close:hover { color: var(--primary-color); }
    .modal-content h3 { font-family: var(--font-serif); color: var(--sec-color); text-transform: uppercase; margin-bottom: 34px; border-bottom: 1px solid #eaeaea; padding-bottom: 15px; font-size: 24px}
    .modal-content p, .modal-content li { font-size: 0.95rem; line-height: 1.7; color: #444; margin-bottom: 15px; list-style-type: disc; text-align: justify;}
    .term_title{ color:var(--primary-color) !important; }

/* REGALA*/



/* --- 1. HERO ESPECÍFICO DE REGALOS --- */
.bg-regala-hero { 
    background-image: url('../images/07_reservas/regala_hero.jpg'); 
}

/* --- 2. LAYOUT PRINCIPAL --- */
.regala-section { 
    padding: 100px 5% 100px; 
    background-color: var(--text-muted, #fff7ef); 
    color: var(--bg-dark, #1d1d1b); 
    font-family: var(--font-sans, 'Rework Text', sans-serif);
}

.regala-grid {
    max-width: 1000px; 
    margin: 0 auto;
}

/* --- 3. INTRODUCCIÓN EDITORIAL (Clon exacto de chef.php) --- */
.regalo-intro-wrapper {
    text-align: center;
    max-width: 1000px; width: 90%;
    margin: 0 auto 70px auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.regalo-intro-wrapper .section-subtitle {
    font-family: var(--font-sans, 'Rework Text', sans-serif);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--sec-color, #813212);
    font-weight: 600;
    display: block;
}

.regalo-intro-wrapper h2 {
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: clamp(2.5rem, 5vw, 4rem); 
    font-weight: 400;
    color: var(--primary-color, #f49f23);
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-block-start: 0px; 
}

.regalo-intro-wrapper p {
    font-family: var(--font-sans, 'Rework Text', sans-serif);

    line-height: 1.9;
    color: #444444;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 0;
}

/* --- 3.b MENSAJES DE ESTADO DEL BONO-REGALO (éxito / pago pendiente / error) --- */
.regala-status {
    max-width: 1000px;
    margin: 0 auto 40px auto;
    padding: 25px 30px;
    background: #ffffff;
    border-left: 4px solid var(--sec-color, #813212);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    text-align: center;
}
.regala-status-title {
    font-size: 1.3rem;
    font-weight: 400;
    margin: 0 0 10px 0;
    color: var(--sec-color, #813212);
}
.regala-status p { margin: 0; }
.regala-status-success { border-left-color: #2e7d32; }
.regala-status-success .regala-status-title { color: #2e7d32; }
.regala-status-error { border-left-color: #c62828; }
.regala-status-error .regala-status-title { color: #c62828; }
.regala-status-errors {
    list-style: none;
    margin: 15px 0 0 0;
    padding: 0;
    color: #c62828;
    font-size: 0.9rem;
}
.regala-status-errors li { margin-top: 5px; }
.regala-status .btn-submit {
    margin-top: 20px;
    text-decoration: none;
    text-align: center;
}


/* --- 4. CONTENEDOR DEL FORMULARIO DE REGALO --- */
.booking-view {
    background: #ffffff; 
    padding: 50px 60px 70px; 
    border-radius: 0; 
    border: 1px solid #eaeaea; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.02); 
    /* Línea superior dorada distintiva para el regalo */

}

/* Títulos internos del formulario */
.gift-section-title {
    font-family: var(--font-sans, 'Rework Text', sans-serif); 
    font-size: 1.4rem; 
    color: var(--sec-color, #1d1d1b);
    border-bottom: 1px solid #eaeaea; 
    padding-bottom: 15px; 
    margin-bottom: 30px; 
    margin-top: 50px;
    font-weight: 400; 
    text-transform: none;
}
.gift-section-title:first-child { 
    margin-top: 0; 
}

/* --- 5. ESTRUCTURA DE INPUTS Y GRID --- */
.form-grid-2 { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 25px; 
}
.form-grid-full { 
    grid-column: span 2; 
}

.input-group { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    text-align: left; 
}
.input-group label { 
    font-size: 0.8rem; 
    color: #666; 
    font-weight: bold; 
}

.input-control {
    padding: 0 15px; 
    height: 52px; 
    line-height: 52px; 
    border: 1px solid #dcdcdc; 
    border-radius: 0; 
    background: #fcfcfc; 
    color: var(--bg-dark, #1d1d1b); 
    font-family: inherit; 
    font-size: 1rem; 
    outline: none; 
    transition: border 0.3s; 
    box-sizing: border-box; 
    -webkit-appearance: none;
}
.input-control:focus { 
    border-color: var(--primary-color, #f49f23); 
    background: #ffffff; 
}

/* Select personalizado */
select.input-control { 
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); 
    background-repeat: no-repeat; 
    background-position: right 15px top 50%; 
    background-size: 12px auto; 
    cursor: pointer;
}

textarea.input-control { 
    resize: vertical; 
    min-height: 120px; 
    line-height: 1.5; 
    padding: 15px; 
}

/* --- 6. FOOTER DEL FORMULARIO (Captcha y Botones) --- */
.form-footer { 
    margin-top: 40px; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}
.captcha-mockup { 
    border: 1px solid #dcdcdc; 
    background: #fafafa; 
    width: 280px; 
    height: 74px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 15px;
}
.acceptance-box { 
    display: flex; 
    align-items: flex-start; 
    gap: 12px; 
    cursor: pointer; 
}
.acceptance-box input[type="checkbox"] { 
    width: 18px; 
    height: 18px; 
    margin-top: 2px; 
    accent-color: var(--bg-dark, #1d1d1b); 
    cursor: pointer; 
    border-radius: 0; 
}
/* Mensaje de error del reCAPTCHA (paso 1 del regalo): hereda .msg-error. */
#captcha-error { margin-top: 10px; }
.acceptance-box label { 
    font-size: 0.95rem; 
    color: #444; 
    line-height: 1.5; 
    cursor: pointer; 
    user-select: none; 
    margin: 0; 
}

.btn-link { 
    background: none; 
    border: none; 
    color: var(--primary-color, #f49f23); 
    text-decoration: underline; 
    cursor: pointer; 
    font-family: inherit; 
    font-size: inherit; 
    padding: 0; 
    font-weight: bold; 
    transition: color 0.3s; 
}
.btn-link:hover { 
    color: var(--sec-color, #813212); 
}

/* Botones principales de acción */
.btn-submit {
    background: var(--bg-dark, #1d1d1b); 
    color: #ffffff; 
    border: none; 
    padding: 18px 40px; 
    font-size: 1.05rem; 
    cursor: pointer; 
    border-radius: 0; 
    transition: all 0.3s; 
    letter-spacing: 0.5px; 
    font-family: var(--font-sans, 'Rework Text', sans-serif); 
    -webkit-appearance: none; 
    display: inline-block; 
    min-width: 200px;
}
.btn-submit:hover { 
    background: var(--bg-darker, #0a0a0a); 
    color: var(--primary-color, #f49f23); 
}
.btn-light {
    background: transparent; 
    color: var(--bg-dark, #1d1d1b); 
    border: 1px solid var(--bg-dark, #1d1d1b); 
    padding: 18px 40px; 
    font-size: 1rem; 
    cursor: pointer; 
    border-radius: 0; 
    transition: all 0.3s; 
    -webkit-appearance: none; 
    min-width: 200px;
}
.btn-light:hover { 
    background: #f5f5f5; 
}
.action-buttons-center { 
    display: flex; 
    justify-content: center; 
    gap: 20px; 
    margin-top: 40px; 
}

/* --- 7. PASO 2: RESUMEN Y CÁLCULOS MATEMÁTICOS --- */
.summary-gift-list {
    display: grid; 
    grid-template-columns: 1fr 2fr; 
    gap: 15px 30px; 
    font-size: 1.05rem; 
    margin-bottom: 40px;
}
.summary-gift-list dt { 
    text-align: right; 
    color: #777; 
    font-weight: bold; 
    padding-top: 3px; 
}
.summary-gift-list dd { 
    text-align: left; 
    color: var(--bg-dark, #1d1d1b); 
    margin: 0; 
    line-height: 1.6; 
}

.total-row {
    display: flex; 
    justify-content: center; 
    align-items: baseline; 
    gap: 20px; 
    margin: 50px 0 30px; 
    padding: 30px 0; 
    border-top: 1px solid #eaeaea; 
    border-bottom: 1px solid #eaeaea;
}
.total-label { 
    font-size: 1.3rem; 
    font-weight: bold; 
    color: var(--bg-dark, #1d1d1b); 
}
.total-amount { 
    font-size: 1.8rem; 
    color: var(--bg-dark, #1d1d1b); 
}
.total-iva { 
    font-size: 0.95rem; 
    color: #888; 
}

.payment-disclaimer { 
    text-align: center; 
    color: #666; 
    font-size: 1rem; 
    margin-bottom: 40px; 
}

/* Clases dinámicas JS */
.d-none { display: none !important; }
.opacity-0 { opacity: 0 !important; }
.view-transition { transition: all 0.4s ease; }
.msg-error { color: #ff6b6b; font-size: 0.85rem; margin-top: 5px; display: block; }

/* --- 8. DISEÑO RESPONSIVE (Móviles y Tablets) --- */
@media (max-width: 768px) {
    .regalo-intro-wrapper {
        margin-bottom: 40px;
        padding: 0 15px;
    }
    .regalo-intro-wrapper p {
        text-align: justify; 
        text-align-last: center;
    }
    .booking-view { 
        padding: 35px 20px; 
    }
    .form-grid-2 { 
        grid-template-columns: 1fr; 
    }
    .form-grid-full { 
        grid-column: auto; 
    }
    .summary-gift-list { 
        grid-template-columns: 1fr; 
        text-align: center; 
        gap: 5px; 
    }
    .summary-gift-list dt { 
        text-align: center; 
        margin-top: 15px; 
    }
    .summary-gift-list dd { 
        text-align: center; 
    }
    .total-row { 
        flex-direction: column; 
        align-items: center; 
        gap: 10px; 
    }
    .action-buttons-center { 
        flex-direction: column-reverse; 
        align-items: stretch; 
    }
    .btn-submit, .btn-light { 
        width: 100%; 
    }
}







/*       TEXTOS LEGALES       */
    .page-hero-legal {
        position: relative;
        min-height: 35vh; 
        display: flex;
        align-items: center;
        justify-content: flex-start; /* Alineado a la izquierda */
        padding: 140px 8vw 40px; /* Padding lateral exacto al de tu Navbar */
        background-color: var(--bg-dark);
    }

    .page-hero-title-legal {
        position: relative;
        z-index: 2;
        font-family: var(--font-serif);
        font-size: clamp(2.5rem, 5vw, 4.5rem);
        color: var(--text-muted);
        font-weight: 400;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin: 0;
    }

    /* 2. CONTENIDO LEGAL (Estilo limpio y alineado a la izquierda) */
    .legal-section {
        background-color: #fcfcfc;
        color: var(--bg-dark);
        padding: 80px 8vw 120px;
        font-family: var(--font-sans);
    }

    .legal-wrapper {
        max-width: 900px;
        margin: 0; /* Alineado a la izquierda siguiendo el flujo visual */
    }

    .legal-update {
        font-size: 0.85rem;
        color: var(--sec-color);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 50px;
        display: block;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 20px;
        font-weight: 600;
    }

    .legal-block {
        margin-bottom: 45px;
    }

    .legal-block:last-child {
        margin-bottom: 0;
    }

    .legal-block h3 {
        font-family: var(--font-serif);
        font-size: 1.6rem;
        color: var(--bg-dark); 
        margin-bottom: 20px;
        font-weight: 400;
        line-height: 1.4;
    }

    .legal-block p {
        font-size: 1.05rem;
        color: #555;
        line-height: 1.8;
        font-weight: 300;
        margin-bottom: 15px;
        text-align: left; /* Alineación estricta a la izquierda */
    }

    .legal-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 25px;
    }

    .legal-list li {
        font-size: 1.05rem;
        color: #555;
        line-height: 1.8;
        font-weight: 300;
        margin-bottom: 15px;
        padding-left: 25px;
        position: relative;
        text-align: left;
    }

    /* Viñeta corporativa elegante */
    .legal-list li::before {
        content: "—";
        color: var(--primary-color);
        position: absolute;
        left: 0;
        font-weight: bold;
    }
    
    .legal-list li strong {
        color: var(--bg-dark);
        font-weight: 600;
    }

    .legal-block a {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
        border-bottom: 1px solid transparent;
    }

    .legal-block a:hover {
        color: var(--sec-color);
        border-bottom: 1px solid var(--sec-color);
    }

    /* RESPONSIVE MÓVIL */
    @media (max-width: 768px) {
        .page-hero-legal {
            padding: 120px 5vw 40px;
        }
        .legal-section {
            padding: 60px 5vw 80px;
        }
        .legal-block h3 {
            font-size: 1.3rem;
        }
        .legal-block p, .legal-list li {
            font-size: 1rem;
        }
    }




/* --- MEDIA QUERIES (FIX MOBILE) --- */
        @media (max-width: 900px) {
            .page-wrapper { margin-left: 0; width: 100%; margin-top: 70px; }
            
            .sidebar { 
                width: 100%; height: 70px; padding: 0 20px; 
                flex-direction: row; justify-content: space-between; align-items: center; 
                box-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 1003; 
            }

            .sidebar-logo { 
                flex-direction: row; 
                width: 80%; /* Le damos más margen respecto a la hamburguesa */
                justify-content: flex-start;
                max-width: 300px;
                /* Reseteamos las alturas del escritorio para que el SVG fluya de forma natural */
                height: auto; 
                max-height: none;
            }


            .logo-link {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start; /* Alinea tu logo a la izquierda, como lo tenías */
            }

            .img-pc { 
                display: none; 
            }
            
            .img-movil {
                display: block; 
                width: 100%; 
                height: auto; /* El SVG recupera su escala proporcional original */
                pointer-events: none; /* Traspasa el toque hacia el a.logo-link */
            }

            .nav-controls { 
                height: 100%;       
                display: flex;
                align-items: center; 
                justify-content: flex-end; 
                width: 100%; 
                /* APAGAMOS LA 'SOLIDEZ' DE ESTA CAPA. Ahora el dedo puede atravesarla y tocar el logo */
                pointer-events: none !important; 
            }
            
            .hamburger { 
                pointer-events: auto !important; 
                cursor: pointer;
            }

            .hamburger span { background-color: #ffffff !important; }
            
            .sidebar-lang { margin-right: 58px; flex-direction: row}

            .linea-dinamica { width: 1px; height: 10px; margin: auto 6px;}
            
            .page-dimmer { left: 0; width: 100%; top: 70px; height: calc(100% - 70px); }

            #navbar { 
                    position: fixed;
                    top: 0;             /* Mismo sitio exacto que en escritorio */
                    left: 0; 
                    width: 100%; 
                    height: 70px;       /* Misma altura matemática que la barra .sidebar */
                    padding: 0 20px;    /* Margen lateral igual que el logo */
                    background: transparent !important; 
                    z-index: 1004;      /* Estrictamente mayor que el z-index 1003 de la barra */
                    pointer-events: none; 
                }


            #navbar.scrolled { background: transparent !important; }

            .nav-buttons { display: none; }             
            
            .menu-overlay { width: 100%; max-width: 100%; }
            .menu-overlay-content { padding-top: 40px; padding-bottom: 40px; margin-bottom: 160px; align-items: center; }
            .main-nav { align-items: center; text-align: center; position: relative;}
            .main-nav ul { align-items: center; text-align: center; }
            .main-nav li { border-bottom: none; }
            .main-nav a { padding-left: 0; }
            .main-nav a:hover { padding-left: 0; }
            
            .mobile-nav-buttons { display: flex; flex-direction: column; gap: 15px; width: 100%; align-items: center; margin: 20px 0 50px;}
            .mobile-nav-buttons .nav-btn { width: 220px; text-align: center; border-color: #fff; color: #fff; }
            .mobile-nav-buttons .nav-btn-primary { background: #fff; color: var(--primary-color); }

            .hero { min-height: calc(100vh - 70px); }
            .play-btn { width: 65px; height: 65px; font-size: 1.4rem; }
            .parallax-section { justify-content: center; padding: 60px 5vw; }
            .parallax-content { padding: 40px 30px; }
            .welcome-section { padding: 80px 5vw; }
            .location-info { padding: 60px 5vw; }
            .footer-bottom { flex-direction: column-reverse; gap: 20px; text-align: center; }
            .img-pc {display: none}
            .img-movil {display: block}
            .logo_home { width: 95%;}        

            .sidebar .sidebar-lang {
                    display: none !important;
                }
                
            .sidebar-logo {
                width: 80%;
                justify-content: flex-start;
            }

            .mobile-lang-selector {
                display: flex; 
                justify-content: center;
                align-items: center;
                gap: 20px;
                margin-top: 10px;
                margin-bottom: 30px;
                width: 100%;
            }

            .mobile-lang-selector a {
                font-family: var(--font-sans);
                font-size: 1.1rem;
                font-weight: 600;
                letter-spacing: 3px;
                color: rgba(255, 255, 255, 0.4);
                transition: color 0.3s ease;
                text-decoration: none;
            }

            .mobile-lang-selector a.active, 
            .mobile-lang-selector a:hover {
                color: #fff;
            }

            .lang-divider {
                width: 1px;
                height: 18px;
                background-color: rgba(255, 255, 255, 0.3);
            }


            
/* --- EL CHEF (MOBILE FIXES) --- */
            .page-hero { min-height: 40vh; padding: 120px 5vw 40px; }
            
            .bio-section { flex-direction: column-reverse; } /* UX: Texto arriba, imagen abajo en móvil */
            .bio-image { min-height: 400px; }
            .bio-text { padding: 80px 5vw; }
            
            /* Ajustamos el padding de la nueva sección Manifiesto para pantallas pequeñas */
            .manifesto-section { padding: 80px 5vw; }
            
            .quote-parallax { background-attachment: scroll; } /* Performance: Desactiva parallax en móvil */        }


}



/*    GALERIA    */   


    @media (max-width: 992px) {
        .bento-grid { 
            grid-template-columns: repeat(2, 1fr); 
            grid-auto-rows: 250px;
        }
        /* Ajustar los anchos para que no desborden el layout de 2 columnas */
        .bento-item.w-2 { grid-column: span 2; }
    }
    
    @media (max-width: 600px) {
        .bento-grid { 
            grid-template-columns: 1fr; 
            grid-auto-rows: 300px;
        }
        /* En móviles pequeños todo pasa a ser de 1x1 para un scroll perfecto vertical */
        .bento-item.w-2 { grid-column: span 1; }
        .bento-item.h-2 { grid-row: span 1; }
        
        .gallery-intro h2 { font-size: 2.5rem; }
        .lightbox-prev { left: 5px; }
        .lightbox-next { right: 5px; }
        .lightbox-close { top: 10px; right: 15px; font-size: 2rem; }
    }


/*    PRENSA     */
    @media (max-width: 768px) {
        .press-section { padding: 80px 5vw; }
        .press-grid { gap: 30px; }
        .press-content { padding: 25px 20px; }
        .press-title { font-size: 1.4rem; }
    }


/* RESERVAS */
        @media (max-width: 991px) {
            .reservas-grid { grid-template-columns: 1fr; gap: 50px; }
            .reservas-terms-wrapper { position: relative; top: 0; padding-right: 0; }
            .booking-view { padding: 35px 25px; }
            .modal-content .modal-body { padding: 35px 25px; }
            .payment-grid { grid-template-columns: 1fr 1fr; }
            .payment-grid .input-group:first-child { grid-column: span 2; }
        }
        @media (max-width: 768px) {
            .booking-controls, .form-grid-2, .payment-row, .captcha-row { grid-template-columns: 1fr; }
            .summary-list { grid-template-columns: 1fr; text-align: center; gap: 5px; margin-bottom: 30px; }
            .summary-list dt { text-align: center; margin-top: 15px; }
            .summary-list dd { text-align: center; }
            .action-buttons-center { flex-direction: column-reverse; gap: 20px; }
            .action-buttons { flex-direction: column-reverse; gap: 15px; align-items: stretch; text-align: center; }
        }


/* REGALA */
    @media (max-width: 768px) {
        .summary-gift-list { 
            grid-template-columns: 1fr; 
            text-align: center; 
            gap: 5px; 
        }
        .summary-gift-list dt { 
            text-align: center; 
            margin-top: 15px; 
        }
        .summary-gift-list dd { 
            text-align: center; 
        }
        .total-row { 
            flex-direction: column; 
            align-items: center; 
            gap: 10px; 
        }
        .action-buttons-center { 
            flex-direction: column-reverse; 
            align-items: stretch; 
        }
    }