:root {
            --primary-color: #f49f23;
            --sec-color: #813212;
            --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%;
        }


        /* --- 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 exacta de tu logo */
            height: 180px; 
            
            /* Leemos el archivo (SVG o PNG transparente) y lo usamos como máscara de recorte */
            -webkit-mask-image: url('assets/images/logo.svg'); /* RUTA A TU IMAGEN */
            mask-image: url('assets/images/logo.svg');
            
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            
            /* Este es el color "vacío" o de fondo del logo antes de llenarse */
            background-color: rgba(255, 255, 255, 0.08); 
            overflow: hidden;
        }

        /* --- EL ELEMENTO "LÍQUIDO" QUE RELLENA --- */
        .preloader-logo-mask::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary-color); /* El naranja corporativo rellena el logo */
            
            /* Lo empujamos fuera del contenedor por la parte inferior */
            transform: translateY(100%); 
            
            /* Animación de relleno con curva de interpolación sofisticada (Ease-out) */
            animation: fillProgress 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        /* --- 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; }

        /* Base */
        * { box-sizing: border-box; }
        body { font-family: var(--font-sans); background-color: var(--bg-dark); color: var(--text-light); line-height: 1.6; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; padding: 0; margin: 0; }
        html { scroll-behavior: smooth; }

        /* --- 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: 260px; 
    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}
        .img-pc {height: 100%}
        
        .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: 100%; max-width: 550px; 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: 10px 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-sans); font-size: clamp(1.2rem, 2.5vh, 1.5rem); font-weight: 300; letter-spacing: 4px; text-transform: uppercase; color: #fff; transition: color 0.4s ease, padding-left 0.4s ease; display: inline-block; width: 100%; }
        .main-nav a:hover { color: rgba(255, 255, 255, 0.8); padding-left: 10px; }
        .social-links a:hover { color: rgba(255, 255, 255, 01); padding: 0 0 0 !important; }

        .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%; animation: fadeInHero 2s ease 1.5s forwards; 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 10vw; 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(--primary-color); margin-bottom: 20px; display: block; }
        .welcome-section h2 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 30px; font-weight: 400; margin-block-start: 0px;}
        .welcome-section p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 20px; font-weight: 300; max-width: 800px; 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(10, 10, 10, 0.9); 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; }
        .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 5vw 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-muted); 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; }

        .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; 
        }


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

        /* HERO INTERNO CON PARALLAX */
        .page-hero {
            position: relative;
            min-height: 58vh;
            display: flex;
            align-items: flex-end;
            padding: 100px 10vw 80px;
            background-size: cover;
            background-position: center 20%;
            background-attachment: fixed; /* El secreto del Parallax fluido */
            overflow: hidden;
        }
        
        /* ANIMACIÓN CINEMATOGRÁFICA DE ENTRADA (Carga inicial) */
        .page-hero-content { 
            position: relative; 
            z-index: 2; 
            opacity: 0; /* Oculto por defecto antes de animar */
            animation: cinematicReveal 1.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
        }
        
        .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; }
        .page-hero-subtitle { font-size: 1rem; letter-spacing: 7px; text-transform: uppercase; color: var(--text-light); }

        @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); }
        }

        /* SECCIÓN BIOGRAFÍA (Fondo Claro) */
        .bio-section {
            display: flex; flex-wrap: wrap; 
            background-color: var(--text-muted); 
            color: var(--t-color);
        }
        .bio-text {
            flex: 1; min-width: 320px;
            padding: 120px 8vw;
            display: flex; flex-direction: column; justify-content: center;
        }
        .bio-text .section-subtitle { color: var(--sec-color); margin-bottom: 0px; }
        .bio-text h2 { 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;}
        .bio-text p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 25px; color: #4a423a; font-weight: 300; }
        
        .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; }

        /* 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-image: url('../images/01_chef/plato.jpg'); /* SUGERENCIA: Foto detalle oscuro de un plato */
            background-size: cover; background-attachment: fixed; background-position: center;
        }
        .quote-parallax .hero-overlay { background: rgba(15, 15, 15, 0.85); }
        .quote-content { position: relative; z-index: 2; max-width: 900px; }
        .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; }

        /* SECCIÓN EXTRA (FILOSOFÍA / PILARES) */
        .philosophy-section {
            background-color: var(--bg-dark); padding: 120px 10vw;
        }
        .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; }
        .phil-item p { color: var(--text-muted); font-size: 1rem; font-weight: 300; }





        /* --- 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 { 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 --- */
            
            .page-hero { min-height: 40vh; padding: 120px 5vw 40px; }
            .bio-section { flex-direction: column-reverse; } /* Texto arriba, imagen abajo en móvil */
            .bio-image { min-height: 400px; }
            .bio-text { padding: 80px 5vw; }
            .quote-parallax { background-attachment: scroll; } /* Desactiva parallax en móvil para mejor rendimiento */
    }