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

    :root {
      --black: #000000;
      --soft:  #050505;
      --white: #ffffff;
      --white-soft: rgba(255,255,255,0.88);
      --grey:  #8c8c8c;
      --burg:  #7a2e39;
      --font:  'Montserrat', sans-serif;
      --ease:  cubic-bezier(0.23, 1, 0.32, 1);
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      max-width: 100%;
    }
    body {
      background: var(--black);
      color: var(--white);
      font-family: var(--font);
      font-weight: 300;
      overflow-x: hidden;
      max-width: 100%;
      position: relative;
    }

    /* ═══════════════════════════════════════════════
       ANIMACIONES BASE
    ═══════════════════════════════════════════════ */

    /* Genérico: sube desde abajo */
    .rev {
      opacity: 0;
      transform: translateY(30px) scale(0.96);
      transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    }
    .rev.go { opacity: 1; transform: translateY(0) scale(1); }

    /* Desde la izquierda — hero */
    .rev-left {
      opacity: 0;
      transform: translateX(-60px) scale(0.97);
      transition: opacity 1s var(--ease), transform 1s var(--ease);
    }
    .rev-left.go { opacity: 1; transform: translateX(0) scale(1); }

    /* Desde la derecha — imagen chef */
    .rev-right {
      opacity: 0;
      transform: translateX(60px) scale(0.97);
      transition: opacity 1s var(--ease), transform 1s var(--ease);
    }
    .rev-right.go { opacity: 1; transform: translateX(0) scale(1); }

    /* Imagen filosofía izquierda: primero centrada, luego se va a la izq */
    .philo-img-left {
      opacity: 0;
      transform: translateX(calc(50vw - 50%));   /* empieza en el centro */
      transition: opacity 0.8s var(--ease), transform 1.1s var(--ease);
    }
    .philo-img-left.go { opacity: 1; transform: translateX(0); }

    /* Imagen filosofía derecha: primero centrada, luego se va a la dcha */
    .philo-img-right {
      opacity: 0;
      transform: translateX(calc(-50vw + 50%));
      transition: opacity 0.8s var(--ease), transform 1.1s var(--ease);
    }
    .philo-img-right.go { opacity: 1; transform: translateX(0); }

    /* Texto filosofía: aparece después que las imágenes se separan */
    .philo-text-anim {
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 0.8s var(--ease) 0.5s, transform 0.8s var(--ease) 0.5s;
    }
    .philo-text-anim.go { opacity: 1; transform: scale(1); }

    /* Inmersión: fade+scale desde centro */
    .rev-scale {
      opacity: 0;
      transform: scale(0.94) translateY(20px);
      transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    }
    .rev-scale.go { opacity: 1; transform: scale(1) translateY(0); }

    /* Delays */
    .d1 { transition-delay: 0.1s !important; }
    .d2 { transition-delay: 0.22s !important; }
    .d3 { transition-delay: 0.36s !important; }
    .d4 { transition-delay: 0.50s !important; }
    .d5 { transition-delay: 0.65s !important; }
    .d6 { transition-delay: 0.8s !important; }

    /* ═══════════════════════════════════════════════
       LOADER — el logo se revela en 2 tiempos
    ═══════════════════════════════════════════════ */
    #loader {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--black);
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
    }
    #loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

    #loader-logo {
      position: relative;
      width: clamp(150px, 22vw, 230px);
      aspect-ratio: 341 / 296;
    }
    .loader-img {
      position: absolute; left: 0; width: 100%; height: auto; display: block;
    }

    /* Dígitos "6700": ocupa el 100% de alto (el 7 baja casi hasta el final),
       barrido diagonal izq→dcha con un sesgo suave */
    .loader-digits {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      overflow: hidden;
      clip-path: polygon(0% 0%, 0% 0%, -8% 100%, 0% 100%);
      animation: loaderWipe 1.7s cubic-bezier(0.65,0,0.35,1) 0.35s forwards;
    }
    .loader-img-top { top: 0; }

    /* Máscara: tapa solo el hueco exacto donde vive BY BACUS°, mientras el
       barrido de arriba termina de revelar el resto (incluida la punta del 7) */
    .loader-notch-mask {
      position: absolute; left: 40%; top: 78%; width: 60%; height: 22%;
      background: var(--black);
      z-index: 2;
    }

    /* "BY BACUS°": recorte ajustado a ese mismo hueco, aparece al final */
    .loader-bybacus {
      position: absolute; left: 40%; bottom: 0; width: 60%; height: 22%;
      overflow: hidden;
      z-index: 3;
      opacity: 0; transform: translateY(6px) scale(0.96);
      animation: loaderBadge 0.6s var(--ease) 1.95s forwards;
    }
    .loader-img-bottom {
      position: absolute; left: -66.667%; bottom: 0; top: auto;
      width: 166.667%;
    }

    @keyframes loaderWipe {
      to { clip-path: polygon(0% 0%, 108% 0%, 100% 100%, 0% 100%); }
    }
    @keyframes loaderBadge {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .loader-digits, .loader-bybacus { animation: none; clip-path: none; opacity: 1; transform: none; }
    }

    /* ═══════════════════════════════════════════════
       HEADER
    ═══════════════════════════════════════════════ */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 22px 48px 26px;
      background: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 100%);
      pointer-events: none;
    }
    /* Al hacer scroll (lo marca web.js) el degradado se vuelve algo más tenue */
    header.scrolled {
      background: linear-gradient(to bottom,
        rgba(0,0,0,0.99) 0%, rgba(0,0,0,0.95) 80%, rgba(0,0,0,0) 100%);
    }
    .h-left  { justify-self: start; }
    .h-mid   { justify-self: center; }
    .h-right { justify-self: end; }

    /* Logo más grande en cabecera */
    .header-logo { height: 64px; width: auto; display: block; }

    .hbtn {
      font-family: var(--font); font-weight: 300;
      font-size: 11px; letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--white); background: none; border: none;
      text-decoration: none;
      cursor: pointer; padding: 9px 0;
      transition: opacity 0.3s; pointer-events: all;
    }
    .hbtn:hover { opacity: 0.6; }
    .hbtn-res {
      border: 1px solid rgba(255,255,255,0.3);
      padding: 10px 22px;
      position: relative;
      top: -4px;
      transition: border-color 0.3s, background 0.3s;
    }
    .hbtn-res:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); }

    /* ═══════════════════════════════════════════════
       MOBILE MENU
    ═══════════════════════════════════════════════ */
    .mob-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.97); z-index: 200;
      flex-direction: column; justify-content: center; align-items: center; gap: 38px;
    }
    .mob-overlay.open { display: flex; }
    .mob-close {
      position: absolute; top: 28px; right: 36px;
      background: none; border: none; color: var(--white);
      font-size: 20px; cursor: pointer; font-family: var(--font);
    }
    .mob-link {
      font-family: var(--font); font-weight: 200;
      font-size: clamp(22px,5vw,34px); letter-spacing: 0.3em;
      text-transform: uppercase; color: var(--white);
      text-decoration: none; transition: opacity 0.3s;
    }
    .mob-link:hover { opacity: 0.6; }

    /* ═══════════════════════════════════════════════
       HERO — texto en la mitad inferior izquierda
       imagen en la derecha, degradado izq+abajo
    ═══════════════════════════════════════════════ */
    #hero {
      position: relative;
      width: 100%; height: 100vh; min-height: 600px;
      background: var(--black); overflow: hidden;
      display: flex; align-items: stretch;
    }
    .hero-img-wrap {
      position: absolute; top: 0; right: 0;
      width: 50%; height: 100%;
      background: var(--black);
      padding: 28px;
      will-change: transform;
    }
    .hero-img-wrap video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: contain; object-position: center;
      filter: contrast(1.05) brightness(0.95);
      display: block;
    }
    /* Degradado lateral plano — oscurece la izquierda para que el texto se
       lea bien sobre el vídeo. El vídeo empieza al 50% del ancho (ver
       .hero-img-wrap más abajo), así que el negro sólido llega hasta ahí
       para que no se note ningún corte del vídeo. */
    .hero-wave {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(to right,
        #000 0%, #000 52%,
        rgba(0,0,0,0.5) 60%,
        rgba(0,0,0,0.18) 67%,
        transparent 73%);
    }
    /* Degradado inferior: negro sólido en el borde de abajo */
    .hero-fade {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(to top,
        rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.6) 16%, rgba(0,0,0,0.22) 32%, transparent 46%);
    }
    /* Contenido pegado abajo-izquierda */
    .hero-content {
      position: relative; z-index: 2;
      display: flex; flex-direction: column;
      justify-content: flex-end; align-items: flex-start;
      padding: 0 72px 8vh;
      width: 46%; min-width: 300px;
    }
    /* Sin logo en el hero — queda solo en el header.
       El tamaño va en vw (y no un px fijo) para que el titular ocupe SIEMPRE
       la misma proporción de la pantalla. Así en un monitor grande se ve
       igual que en un portátil —mismas líneas, mismo aire a la derecha—
       en vez de quedarse pequeño. En móvil lo sobrescribe su media query.
       El titular nuevo es más largo que el anterior, así que el tamaño bajó
       (4.6vw → 4vw) para que no se coma el alto del hero ni empuje el botón
       fuera de la pantalla en portátiles (1024–1366 px). */
    .hero-tagline {
      font-size: clamp(32px, 4vw, 84px);
      font-weight: 200; line-height: 1.25;
      letter-spacing: -0.01em; color: var(--white);
      text-align: left;
    }
    .hero-line {
      width: 38px; height: 1px; background: var(--burg);
      margin: clamp(16px, 2.2vh, 28px) 0;
    }
    .hero-meta {
      font-size: 10px; font-weight: 300;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--white-soft); line-height: 2.2;
    }
    .hero-meta .bv { color: var(--white); }

    /* Línea de países: se corta a la altura de una línea y rota una palabra tras otra */
    .country-rotator {
      position: relative;
      display: block;
      height: 22px;
      overflow: hidden;
    }
    .country-word {
      position: absolute;
      left: 0; top: 0;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(65%);
      transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
    }
    .country-word.active {
      opacity: 1;
      transform: translateY(0);
    }
    .country-word.leaving {
      opacity: 0;
      transform: translateY(-65%);
    }
    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* Botón principal — se usa en el hero y como "Ver Carta" */
    .reserve-cta {
      font-family: var(--font); font-weight: 300; font-size: 10px;
      letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer;
      padding: 15px 36px; border: 1px solid var(--burg); background: var(--burg);
      color: var(--white); transition: background 0.3s, border-color 0.3s, transform 0.3s;
      text-decoration: none; display: inline-block;
    }
    .reserve-cta:hover { background: #9a3a47; border-color: #9a3a47; transform: translateY(-1px); }
    .reserve-cta.ghost { background: transparent; border-color: rgba(255,255,255,0.28); }
    .reserve-cta.ghost:hover { border-color: var(--burg); background: rgba(122,46,57,0.1); }

    /* "Reservar Mesa" (hero): mismo recuadro, pero con el texto más grande
       para que tenga más presencia. Solo afecta al botón del hero. */
    #hero .reserve-cta { font-size: 14px; padding: 18px 46px; }

    /* Resplandor marcado en los botones de Reservar y Carta: parpadeo real
       (dos golpes de luz por ciclo), inspirado en uiverse.io/cssbuttons-io,
       sin ningún efecto 3D. Al pasar el ratón, el botón se invierte a un
       burdeos vivo (no blanco) — fondo claro y saturado, texto oscuro. */
    .reserve-cta-glow {
      --glow: 122,46,57;
      --glow-bright: 209,71,91; /* burdeos vivo — solo para el borde y el brillo al hover */
      position: relative;
      border-color: var(--burg);
      box-shadow:
        0 0 0.7em 0.16em rgba(var(--glow), 0.75),
        0 0 2.8em 0.9em rgba(var(--glow), 0.4),
        inset 0 0 0.6em 0.14em rgba(var(--glow), 0.45);
      transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
      animation: reserveGlowBlink 7s ease-in-out infinite;
    }
    .reserve-cta-glow:hover,
    .reserve-cta-glow:active {
      border-color: rgb(var(--glow-bright)) !important;
      animation-play-state: paused;
      box-shadow:
        0 0 0.85em 0.18em rgba(var(--glow-bright), 0.7),
        0 0 3em 0.9em rgba(var(--glow-bright), 0.38),
        inset 0 0 0.45em 0.1em rgba(var(--glow-bright), 0.25);
    }
    /* Parpadeo real: sube, casi se apaga, vuelve a subir — dos golpes de luz
       por ciclo, no una respiración suave de un solo pico. */
    @keyframes reserveGlowBlink {
      0%, 100% {
        box-shadow:
          0 0 0.7em 0.16em rgba(var(--glow), 0.7),
          0 0 2.8em 0.9em rgba(var(--glow), 0.36),
          inset 0 0 0.6em 0.14em rgba(var(--glow), 0.4);
      }
      12% {
        box-shadow:
          0 0 0.3em 0.05em rgba(var(--glow), 0.22),
          0 0 1em 0.3em rgba(var(--glow), 0.12),
          inset 0 0 0.25em 0.05em rgba(var(--glow), 0.15);
      }
      24% {
        box-shadow:
          0 0 1em 0.22em rgba(var(--glow), 0.95),
          0 0 3.6em 1.2em rgba(var(--glow), 0.55),
          inset 0 0 0.8em 0.18em rgba(var(--glow), 0.55);
      }
      40% {
        box-shadow:
          0 0 0.7em 0.16em rgba(var(--glow), 0.7),
          0 0 2.8em 0.9em rgba(var(--glow), 0.36),
          inset 0 0 0.6em 0.14em rgba(var(--glow), 0.4);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .reserve-cta-glow { animation: none; }
    }



    /* ═══════════════════════════════════════════════
       FADE TRANSITION entre secciones
    ═══════════════════════════════════════════════ */
    .fade-sep {
      width: 100%; height: 34px;
      background: linear-gradient(to bottom, transparent, var(--black));
      pointer-events: none;
    }

    /* ═══════════════════════════════════════════════
       LA CARTA — primer apartado de contenido
    ═══════════════════════════════════════════════ */
    #carta { background: var(--black); padding: 66px 0; display: flex; align-items: center; min-height: 0; }
    #resena-google { background: var(--black); padding: 70px 0; display: flex; align-items: center; min-height: 0; }
    .carta-header { width: 100%; text-align: center; margin: 0 auto; padding: 0 24px; }
    .carta-title {
      font-size: clamp(26px, 4.2vw, 52px); font-weight: 200;
      letter-spacing: -0.01em; line-height: 1.35; color: var(--white);
      max-width: 800px; margin: 0 auto;
    }
    #carta .reserve-cta { font-size: 12px; padding: 17px 44px; }

    /* — Foto mosaico bajo el botón "Carta": tamaño intermedio, también enlaza a la carta — */
    .carta-mosaic {
      display: block; width: 100%; max-width: 680px; margin: 40px auto 0;
      overflow: hidden; border: 1px solid rgba(255,255,255,0.08);
    }
    .carta-mosaic img {
      width: 100%; height: auto; display: block;
      filter: contrast(1.05) brightness(0.96);
      transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
    }
    .carta-mosaic:hover img { transform: scale(1.03); filter: brightness(1.02); }

    /* — Animación propia de "¿Preparados para...?": el título entra
       enfocándose desde un ligero desenfoque (como una cámara), y el botón
       aparece después con un pequeño rebote hacia arriba que invita a
       pulsarlo. — */
    .carta-reveal-title {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(16px) scale(0.98);
      transition: opacity 1s var(--ease), filter 1s var(--ease), transform 1s var(--ease);
    }
    .carta-reveal-title.go {
      opacity: 1; filter: blur(0); transform: translateY(0) scale(1);
    }
    .carta-reveal-btn {
      opacity: 0;
      transform: translateY(28px) scale(0.9);
      transition: opacity 0.6s var(--ease) 0.55s,
                  transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
    }
    .carta-reveal-btn.go {
      opacity: 1; transform: translateY(0) scale(1);
    }
    @media (prefers-reduced-motion: reduce) {
      .carta-reveal-title, .carta-reveal-btn { transition: opacity 0.4s; filter: none; transform: none; }
    }

    #philosophy { background: var(--black); padding: 46px 0 0; }
    .philo-header { text-align: center; margin-bottom: 26px; padding: 0 40px; }
    .lbl {
      display: block; font-size: 9px; font-weight: 300;
      letter-spacing: 0.4em; text-transform: uppercase;
      color: var(--burg); margin-bottom: 12px;
    }
    .sec-title {
      font-size: clamp(26px, 3.5vw, 50px); font-weight: 200;
      letter-spacing: -0.01em; line-height: 1.2; color: var(--white);
    }
    .sec-sub {
      font-size: clamp(14px, 1.8vw, 20px); font-weight: 200;
      letter-spacing: 0.1em; color: var(--grey); margin-top: 8px;
    }
    /* Bloque de texto único y centrado — sin columnas laterales de imagen */
    .philo-grid {
      display: grid; grid-template-columns: 1fr;
      max-width: 720px; margin: 0 auto;
    }
    .philo-text-col {
      display: flex; flex-direction: column; justify-content: center;
      padding: 34px 44px; background: var(--black);
    }
    .sec-body {
      font-size: 14px; font-weight: 300; line-height: 2;
      color: var(--white-soft); text-align: center;
    }
    .acc-line { width: 30px; height: 1px; background: var(--burg); margin: 20px auto; }

    /* ═══════════════════════════════════════════════
       EXPERIENCIA VIDEO
    ═══════════════════════════════════════════════ */
    #experience { background: var(--black); padding: 44px 0 0; }
    .exp-inner { max-width: 1200px; margin: 0 auto; padding: 0 56px; }
    .exp-header { text-align: center; margin-bottom: 32px; }
    .video-wrap {
      position: relative; width: 100%; aspect-ratio: 16/9;
      background: var(--black); overflow: hidden;
    }
    .video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Solo degradado ABAJO del vídeo (no arriba) */
    .video-wrap::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
      height: 110px; z-index: 2; pointer-events: none;
      background: linear-gradient(to top, var(--black), transparent);
    }
    .video-sound-btn {
      position: absolute; right: 20px; bottom: 24px; z-index: 3;
      width: 46px; height: 46px; padding: 0;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.3);
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: var(--white); cursor: pointer;
      transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
    }
    .video-sound-btn:hover,
    .video-sound-btn:focus-visible {
      background: rgba(0,0,0,0.8);
      border-color: var(--burg);
      color: var(--white);
      outline: none;
    }
    .video-sound-btn svg { width: 22px; height: 22px; display: block; }
    /* Por defecto (vídeo muteado) se muestra el altavoz tachado */
    .video-sound-btn .icon-sound-on  { display: none; }
    .video-sound-btn .icon-sound-off { display: block; }
    .video-sound-btn.sound-on .icon-sound-on  { display: block; }
    .video-sound-btn.sound-on .icon-sound-off { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .video-sound-btn { transition: none; }
    }

    /* ═══════════════════════════════════════════════
       CHEF (imagen izq + texto dcha)
    ═══════════════════════════════════════════════ */
    #chef { background: var(--black); padding: 46px 0 54px; }
    .chef-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 64px; align-items: center;
      max-width: 1200px; margin: 0 auto; padding: 0 56px;
    }
    /* Imagen chef: degradado SOLO ABAJO (no arriba) */
    .chef-img-wrap { overflow: hidden; position: relative; aspect-ratio: 3 / 2; background: var(--black); }
    /* Capa intermedia: aquí se aplica el parallax por JS, sin tocar el hover de la imagen */
    .chef-img-layer {
      position: absolute; top: -10%; left: 0; right: 0; height: 120%;
      will-change: transform;
    }
    /* Viñeta: oscurece los bordes de la foto para integrarla con el fondo de la página */
    .chef-img-wrap::before {
      content: ''; position: absolute; inset: 0;
      z-index: 2; pointer-events: none;
      background: radial-gradient(ellipse at center,
        transparent 42%,
        rgba(0,0,0,0.28) 72%,
        rgba(0,0,0,0.62) 100%);
    }
    .chef-img-wrap::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
      height: 120px; z-index: 2; pointer-events: none;
      background: linear-gradient(to top, var(--black), transparent);
    }
    .chef-img-wrap img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: contain; object-position: center;
      display: block; filter: brightness(0.85) contrast(1.06);
      transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
    }
    .chef-img-wrap:hover img { transform: scale(1.03); filter: brightness(0.9) contrast(1.08); }
    .chef-text { text-align: left; }
    .chef-text .lbl { margin-bottom: 12px; }
    .chef-name {
      font-size: clamp(26px, 3.5vw, 50px); font-weight: 200;
      letter-spacing: -0.02em; line-height: 1.1;
      color: var(--white); margin-bottom: 24px;
    }
    .chef-body { font-size: 14px; font-weight: 300; line-height: 2; color: var(--white-soft); max-width: 500px; }
    .chef-body + .chef-body { margin-top: 16px; }
    .chef-stats {
      display: flex; gap: 36px; margin-top: 32px;
      padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.07);
    }
    .cs-val { display: block; font-size: 11px; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white-soft); margin-bottom: 4px; }
    .cs-star { width: 10px; height: 10px; display: inline-block; vertical-align: middle; margin: 0 3px 2px; fill: currentColor; }
    .cs-lbl { display: block; font-size: 9px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }

    /* ═══════════════════════════════════════════════
       ESPACIO — galería del local + mapa
    ═══════════════════════════════════════════════ */
    #espacio { background: var(--black); padding: 46px 0 54px; }
    .espacio-header { text-align: center; margin-bottom: 40px; padding: 0 24px; }
    /* — Carrusel de "Espacio": un bloque entero, una sola foto, se cambia con flechas — */
    .espacio-carousel {
      position: relative;
      max-width: 1200px; margin: 0 auto 32px; padding: 0 24px;
    }
    .ec-stage {
      all: unset; cursor: zoom-in; box-sizing: border-box;
      display: block; width: 100%; aspect-ratio: 16 / 9;
      overflow: hidden; background: var(--black);
    }
    .ec-stage img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: brightness(0.88) contrast(1.05);
      transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
    }
    .ec-stage:hover img { transform: scale(1.03); filter: brightness(0.93) contrast(1.06); }
    .ec-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      z-index: 2; background: rgba(0,0,0,0.4); border: none;
      color: var(--white); cursor: pointer; padding: 14px;
      opacity: 0.85; transition: opacity 0.3s, background 0.3s;
    }
    .ec-nav:hover { opacity: 1; background: rgba(0,0,0,0.6); }
    .ec-prev { left: 34px; }
    .ec-next { right: 34px; }

    /* — Mapa + dirección + botón "Cómo llegar": bloque propio, debajo del carrusel — */
    .espacio-map-wrap {
      position: relative; display: flex; flex-direction: column;
      overflow: hidden; background: var(--black);
      max-width: 1200px; margin: 0 auto; padding: 0 24px;
    }
    .espacio-map-frame { position: relative; height: 320px; overflow: hidden; }
    .espacio-map-frame iframe {
      position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
      filter: invert(92%) hue-rotate(180deg) contrast(0.88) brightness(0.95) saturate(0.6);
    }
    .espacio-map-info {
      padding: 26px 28px 28px; border-top: 1px solid rgba(255,255,255,0.06);
      text-align: center;
    }
    .espacio-map-address {
      font-size: 12px; font-weight: 300; line-height: 1.9;
      letter-spacing: 0.04em; color: var(--grey); margin-bottom: 18px;
    }

    /* — Lightbox de la galería: fondo negro + flechas para pasar las fotos — */
    .espacio-lightbox {
      position: fixed; inset: 0; z-index: 300;
      background: #000;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; visibility: hidden;
      transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
    }
    .espacio-lightbox.open { opacity: 1; visibility: visible; }
    .el-stage { max-width: 88vw; max-height: 86vh; }
    .el-stage img { max-width: 88vw; max-height: 86vh; width: auto; height: auto; display: block; object-fit: contain; }
    .el-close {
      position: absolute; top: 24px; right: 28px;
      background: none; border: none; color: var(--white);
      font-family: var(--font);
      font-size: 20px; cursor: pointer; line-height: 1; padding: 10px;
      transition: opacity 0.3s;
    }
    .el-close:hover { opacity: 0.6; }
    .el-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: var(--white);
      cursor: pointer; padding: 14px; opacity: 0.7;
      transition: opacity 0.3s;
    }
    .el-nav:hover { opacity: 1; }
    .el-prev { left: 8px; }
    .el-next { right: 8px; }
    @media (max-width: 600px) {
      .el-nav { padding: 10px; }
      .el-close { top: 16px; right: 16px; }
    }

    @media (max-width: 900px) {
      #espacio { padding: 44px 0 56px; }
      .espacio-carousel { padding: 0 16px; }
      .ec-stage { aspect-ratio: 4 / 3; }
      .ec-prev { left: 22px; }
      .ec-next { right: 22px; }
      .espacio-map-wrap { padding: 0 16px; }
      .espacio-map-frame { height: 260px; }
    }

    /* ═══════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════ */
    footer {
      background: var(--black);
      border-top: 1px solid rgba(255,255,255,0.05);
      padding: 48px 56px 34px;
    }
    .footer-grid {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 44px; margin-bottom: 44px;
    }
    .footer-logo-img { height: 46px; width: auto; display: block; margin-bottom: 16px; }
    .footer-tag { font-size: 10px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
    .footer-col-title { font-size: 8px; font-weight: 300; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 16px; }
    .footer-col p, .footer-col a {
      font-size: 12px; font-weight: 300; color: var(--grey);
      line-height: 2.3; text-decoration: none; display: block; transition: color 0.3s;
    }
    .footer-col a:hover { color: var(--white); }

    /* Redes sociales: cuadrado negro con icono blanco; al pasar el ratón,
       un círculo del color de la marca sube desde abajo y rellena el cuadrado. */
    .footer-social {
      display: flex; justify-content: center; gap: 14px;
      max-width: 1200px; margin: 0 auto 40px;
    }
    .social-icon {
      position: relative; width: 42px; height: 42px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      background: var(--black); border: 1px solid rgba(255,255,255,0.14);
      color: var(--white); text-decoration: none;
    }
    .social-icon svg {
      position: relative; z-index: 2;
      width: 18px; height: 18px;
      transition: transform 0.35s var(--ease);
    }
    .social-icon::before {
      content: ''; position: absolute; z-index: 1;
      left: 50%; top: 100%; width: 150%; aspect-ratio: 1;
      background: var(--burg); border-radius: 50%;
      transform: translateX(-50%);
      transition: top 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .social-icon:hover::before { top: -25%; }
    .social-icon:hover svg { transform: scale(1.12); }
    .social-icon:focus-visible { outline: 1px solid var(--burg); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) {
      .social-icon::before, .social-icon svg { transition: none; }
    }

    .footer-bottom {
      max-width: 1200px; margin: 0 auto; padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,0.04);
      display: flex; justify-content: space-between; align-items: center;
    }
    .footer-copy { font-size: 9px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.18); }
    .footer-legal-links { font-size: 9px; font-weight: 300; letter-spacing: 0.1em; color: rgba(255,255,255,0.28); }
    .footer-legal-links a { color: rgba(255,255,255,0.42); text-decoration: none; transition: color 0.3s; }
    .footer-legal-links a:hover { color: var(--white); }
    @media (max-width: 600px) {
      .footer-legal-links { order: 3; }
    }

    /* ═══════════════════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════════════════ */
    @media (max-width: 1000px) {
      .philo-text-col { padding: 32px 26px; }
    }
    @media (max-width: 900px) {
      #carta { padding: 44px 0 52px; }
      header { padding: 18px 22px 18px; }
      .header-logo { height: 46px; }
      #hero {
        height: auto; min-height: 100vh; min-height: 100dvh;
        display: flex; flex-direction: column;
        /* El header es fijo y su degradado negro se comía la parte de arriba
           del vídeo. Con este hueco arriba, el vídeo empieza por debajo del
           header y se ve entero desde el primer píxel. */
        padding-top: 72px;
      }
      /* Bloque de vídeo: ancho completo, proporción cuadrada a juego con el
         vídeo actual, para que se vea entero sin dejar huecos negros raros */
      .hero-img-wrap {
        position: relative; top: auto; right: auto; left: auto;
        width: 100%; height: auto; aspect-ratio: 1 / 1;
        padding: 0; flex-shrink: 0;
      }
      .hero-img-wrap::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
        background: linear-gradient(to top, var(--black), transparent);
        pointer-events: none;
      }
      .hero-img-wrap video { filter: contrast(1.05); }
      .hero-wave { display: none; }
      .hero-fade { display: none; }
      /* Bloque de texto: su propio espacio debajo del vídeo, centrado */
      .hero-content {
        position: relative; z-index: 2;
        width: 100%; flex: 1; min-width: 0;
        display: flex; flex-direction: column;
        justify-content: center; align-items: center;
        text-align: center;
        padding: 36px 28px 48px;
      }
      .hero-tagline { font-size: clamp(22px, 5.6vw, 34px); line-height: 1.22; text-align: center; }
      .hero-line { margin: 14px 0 !important; }
      .hero-meta { line-height: 1.9; text-align: center; }
      .country-word { left: 50%; transform: translateX(-50%) translateY(65%); }
      .country-word.active { transform: translateX(-50%) translateY(0); }
      .country-word.leaving { transform: translateX(-50%) translateY(-65%); }
      .reserve-cta.reserve-cta-glow { margin-top: 16px !important; }

      .exp-inner { padding: 0 22px; }

      .video-wrap::after {
        height: 54px;
        background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
      }
      .video-sound-btn { right: 12px; bottom: 12px; width: 40px; height: 40px; }
      .video-sound-btn svg { width: 20px; height: 20px; }
      .chef-grid { grid-template-columns: 1fr; gap: 28px; padding: 0 22px; }
      .chef-text { display: contents; }
      .chef-head  { order: 1; text-align: center; }
      .chef-head .lbl { padding-left: 0.4em; }
      .chef-name br.chef-br { display: none; }
      .chef-grid .chef-img-wrap { order: 2; }
      .chef-rest  { order: 3; text-align: center; }
      .chef-img-wrap { aspect-ratio: 3 / 2; }
      .chef-body { max-width: 100%; }
      .chef-stats { flex-wrap: wrap; gap: 18px; justify-content: center; }
      .footer-grid { grid-template-columns: 1fr; gap: 26px; text-align: center; }
      .footer-logo-img { margin: 0 auto 16px; }   /* el logo también al centro */
      footer { padding: 40px 22px 28px; }
      .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
      #chef { padding: 36px 0 48px; }
    }
    @media (max-width: 600px) {
      .hero-content { padding: 0 18px 50px; }
      header { padding: 16px 18px 16px; }
      .chef-grid { padding: 0 16px; }
      .exp-inner { padding: 0 16px; }
      footer { padding: 32px 16px 24px; }
      .mod-box { padding: 34px 18px; }
      .mod-row { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════
       AVISO DE COOKIES — modal centrado
    ═══════════════════════════════════════════════ */
    .cookie-overlay {
      position: fixed; inset: 0; z-index: 500;
      background: rgba(0,0,0,0);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.5s var(--ease), background 0.5s var(--ease), visibility 0s linear 0.5s;
    }
    .cookie-overlay.show {
      opacity: 1; visibility: visible; pointer-events: auto;
      background: rgba(0,0,0,0.75);
      transition: opacity 0.5s var(--ease), background 0.5s var(--ease), visibility 0s linear 0s;
    }
    .cookie-modal {
      max-width: 440px; width: 100%;
      background: var(--black); border: 1px solid rgba(122,46,57,0.4);
      padding: 40px 36px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.7);
      text-align: center;
      transform: scale(0.92) translateY(14px);
      opacity: 0;
      transition: transform 0.6s var(--ease) 0.1s, opacity 0.6s var(--ease) 0.1s;
    }
    .cookie-overlay.show .cookie-modal {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
    .cookie-text {
      font-size: 13px; font-weight: 300; line-height: 1.9; letter-spacing: 0.01em;
      color: var(--grey); margin-bottom: 14px;
    }
    .cookie-link {
      display: inline-block; margin-bottom: 28px;
      font-size: 10px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--white); text-decoration: none;
      border-bottom: 1px solid var(--burg); padding-bottom: 3px;
      transition: border-color 0.3s;
    }
    .cookie-link:hover { border-color: var(--white); }
    .cookie-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .cookie-accept {
      font-family: var(--font); font-size: 10px; font-weight: 400;
      letter-spacing: 0.18em; text-transform: uppercase;
      background: var(--burg); color: var(--white); border: 1px solid var(--burg);
      padding: 13px 30px; cursor: pointer; transition: background 0.3s, border-color 0.3s;
    }
    .cookie-accept:hover { background: #9a3a47; border-color: #9a3a47; }
    /* "Rechazar" a propósito apagado: no compite visualmente con "Aceptar" */
    .cookie-reject {
      font-family: var(--font); font-size: 10px; font-weight: 400;
      letter-spacing: 0.18em; text-transform: uppercase;
      background: transparent; color: rgba(255,255,255,0.35);
      border: 1px solid rgba(255,255,255,0.14);
      padding: 13px 30px; cursor: pointer; transition: color 0.3s, border-color 0.3s;
    }
    .cookie-reject:hover { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.28); }
    @media (max-width: 600px) {
      .cookie-modal { padding: 32px 24px; }
      .cookie-btns { flex-direction: column; }
      .cookie-accept, .cookie-reject { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cookie-overlay, .cookie-modal { transition: none; }
    }