/* =====================================================================
   UKUL BRUNCH — hoja de estilos única
   Orden: fuentes · tokens · reset · utilidades · header · hero ·
          sobre · especialidades · menú · galería · ubicación ·
          social · footer · lightbox · responsive
   ===================================================================== */

/* ---------------------------------------------------------------
   1. FUENTES — auto-alojadas en assets/fonts/ (sin CDN de Google:
   más rápido y sin fuga de IP a un tercero). Son fuentes variables:
   tres archivos cubren todos los pesos, 103 KB en total.
   Licencia SIL Open Font License 1.1 — ver assets/fonts/LEEME.txt.
   --------------------------------------------------------------- */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fonts/CormorantGaramond-Variable.woff2') format('woff2-variations'),
      url('../assets/fonts/CormorantGaramond-Variable.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../assets/fonts/CormorantGaramond-Italic-Variable.woff2') format('woff2-variations'),
      url('../assets/fonts/CormorantGaramond-Italic-Variable.woff2') format('woff2');
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('../assets/fonts/Jost-Variable.woff2') format('woff2-variations'),
      url('../assets/fonts/Jost-Variable.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}

/* ---------------------------------------------------------------
   2. TOKENS
   --------------------------------------------------------------- */
:root{
  /* color */
  --ink:            #241B14;   /* café oscuro — texto y botones */
  --ink-2:          #3A2C21;
  --ink-soft:       #6B594A;   /* texto secundario */
  --logo-ink:       #1C1D1B;   /* negro exacto del logotipo */
  --brown:          #8A6B4A;   /* símbolos y detalles */
  --brown-mid:      #7A6349;   /* fondo sección social */
  --cream:          #F5EEE2;   /* fondo header / menú / footer */
  --cream-lt:       #FBF7EF;   /* fondo sobre / ubicación */
  --cream-card:     #FCF9F3;   /* tarjetas */
  --sand:           #EDE3D2;   /* fondo especialidades / galería */
  --line:           #DCCDB6;   /* filetes */
  --line-soft:      #E5DAC7;
  --gold:           #C79A3E;   /* estrellas */
  --paper-dark:     #1E1710;   /* barra inferior */

  /* tipografía */
  --font-display: 'Cormorant Garamond', Cormorant, Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;

  /* retícula */
  --container: 1340px;
  --gutter: 32px;
  --header-h: 104px;
  --header-h-sm: 82px;

  /* ritmo vertical */
  --section-y: 84px;      /* respiración estándar entre secciones */
  --section-y-lg: 96px;   /* bloques con más aire (sobre, ubicación) */
  --head-gap: 46px;       /* del título de sección a su contenido */

  /* tamaños de símbolo — una sola escala para todo el sitio */
  --sym-inline: 18px;     /* iconos junto a una línea de texto */
  --sym-info: 17px;       /* glifo dentro del badge de ubicación */
  --badge-info: 38px;     /* circulo relleno que lo contiene */
  --sym-menu: 32px;       /* iconos de categoría del menú */
  --sym-mark: 54px;       /* croissant ornamental */

  /* forma */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* sombras */
  --shadow-sm: 0 2px 10px rgba(36,27,20,.06);
  --shadow-md: 0 10px 30px rgba(36,27,20,.10);
  --shadow-lg: 0 24px 60px rgba(36,27,20,.18);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   3. RESET
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h-sm)}
body{
  margin:0;
  background:var(--cream-lt);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0; padding:0; list-style:none}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
cite{font-style:normal}
:focus-visible{outline:2px solid var(--brown); outline-offset:3px; border-radius:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------------------------------------------------------------
   4. UTILIDADES
   --------------------------------------------------------------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* botones ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:400; font-size:14px;
  letter-spacing:.035em; line-height:1;
  padding:15px 30px; border-radius:var(--radius-sm);
  border:1px solid transparent;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn--dark{background:var(--ink); color:#F7F1E6; border-color:var(--ink)}
.btn--dark:hover{background:#3A2C21; border-color:#3A2C21; transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn--ghost{
  background:rgba(247,241,230,.07); color:#F7F1E6;
  border-color:rgba(247,241,230,.5); backdrop-filter:blur(3px);
}
.btn--ghost:hover{background:rgba(247,241,230,.16); border-color:#F7F1E6; transform:translateY(-2px)}
.btn--pill{border-radius:999px; padding:15px 38px}
.btn__icon{width:16px; height:16px; flex:none; stroke-width:1.5}

/* icono en línea con texto -------------------------------------- */
.ico{width:var(--sym-inline); height:var(--sym-inline); flex:none; color:var(--brown)}

/* encabezado de sección + filete con rombo ---------------------- */
.section-head{text-align:center; margin-bottom:var(--head-gap)}
.section-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px,3.2vw,42px); line-height:1.15; letter-spacing:.005em;
  color:var(--ink); text-wrap:balance;
}
.section-title--lg{font-size:clamp(34px,3.9vw,52px)}
.rule{display:block; position:relative; width:190px; height:12px; margin:18px auto 0}
.rule::before{
  content:''; position:absolute; top:50%; left:0; right:0; height:1px;
  background:var(--line); transform:translateY(-50%);
}
.rule::after{
  content:''; position:absolute; top:50%; left:50%; width:6px; height:6px;
  background:var(--cream-lt); border:1px solid var(--brown);
  transform:translate(-50%,-50%) rotate(45deg);
}
.rule--sm{width:100%; margin:32px auto 0}
.specials .rule::after,.gallery .rule::after{background:var(--sand)}
.menu .rule::after{background:var(--cream)}

/* croissant ornamental (recortado del logotipo real) ------------- */
.ornament{display:block; width:var(--sym-mark); margin-bottom:22px}
.ornament img{width:100%; height:auto}
.ornament--light{opacity:.92}
.ornament--brown{width:48px; opacity:.9}

/* aparición al hacer scroll -------------------------------------
   Solo se oculta si hay JS (.js lo pone el <script> del <head>).
   Sin JS todo se ve de entrada, sin animación. */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .reveal.is-visible{opacity:1; transform:none}

/* marcador de imagen pendiente (lo pone js/main.js) -------------- */
.img-missing{
  position:relative;
  background:
    repeating-linear-gradient(135deg,rgba(138,107,74,.05) 0 12px,rgba(138,107,74,.09) 12px 24px),
    var(--sand);
}
/* solo la foto que falta, no los adornos que vayan dentro (el pin) */
.img-missing > img{visibility:hidden}
.img-missing::after{
  content:attr(data-src);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:10px; text-align:center;
  font-family:var(--font-body); font-size:11px; font-weight:400;
  letter-spacing:.06em; color:rgba(107,89,74,.85); word-break:break-all;
}

/* ---------------------------------------------------------------
   5. HEADER
   --------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(245,238,226,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(220,205,182,.65);
  transition:box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.site-header.is-scrolled{box-shadow:0 6px 24px rgba(36,27,20,.08); background:rgba(245,238,226,.98)}

.header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  min-height:var(--header-h);
  transition:min-height .35s var(--ease);
}
.site-header.is-scrolled .header__inner{min-height:var(--header-h-sm)}

.brand{flex:none; display:flex; align-items:center}
.brand__logo{
  height:66px; width:auto;
  transition:height .35s var(--ease);
}
.site-header.is-scrolled .brand__logo{height:52px}

.nav{display:flex; align-items:center}
.nav__list{display:flex; align-items:center; gap:36px}
.nav__link{
  position:relative; font-size:15px; font-weight:300; letter-spacing:.025em;
  color:var(--ink-2); padding:7px 0; transition:color .3s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--ink)}

.header__cta{padding:13px 30px}
.nav__cta-mobile{display:none}

.nav-toggle{
  display:none; width:44px; height:44px; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; margin-right:-10px;
}
.nav-toggle span{
  display:block; width:23px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(600px,86vh,800px);
  display:flex; align-items:center;
  background:var(--logo-ink);
  overflow:hidden;
}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 55%}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg,rgba(26,19,13,.94) 0%,rgba(26,19,13,.87) 26%,rgba(26,19,13,.56) 50%,rgba(26,19,13,.13) 74%,rgba(26,19,13,0) 100%),
    linear-gradient(to top,rgba(26,19,13,.55),rgba(26,19,13,0) 45%);
}
.hero__inner{position:relative; width:100%; padding-block:76px}
.hero__content{max-width:580px; color:#F7F1E6}

.hero__title{font-family:var(--font-display); font-weight:300; line-height:.98; margin-bottom:24px}
.hero__title-script{
  display:block; font-style:italic; font-weight:400;
  font-size:clamp(36px,4.5vw,62px); letter-spacing:.005em;
}
.hero__title-script--sm{font-size:clamp(29px,3.5vw,48px); margin-top:4px}
.hero__title-main{
  display:block; font-weight:500;
  font-size:clamp(56px,8vw,112px); letter-spacing:.045em;
  line-height:1; margin:4px 0 2px -3px;
}

.hero__tagline{
  font-size:14.5px; font-weight:300; letter-spacing:.1em;
  color:rgba(247,241,230,.92); margin-bottom:20px;
}
.hero__lead{
  font-size:15.5px; font-weight:300; line-height:1.78;
  color:rgba(247,241,230,.78); margin-bottom:34px;
}

.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px}
/* Sobre el degradado casi negro del hero, el boton necesita tono propio
   para leerse como pieza y no fundirse con el fondo. */
.hero .btn--dark{background:#2E2219; border-color:#2E2219}
.hero .btn--dark:hover{background:#40301F; border-color:#40301F}

/* tarjeta reseña Google ----------------------------------------- */
.google-card{
  display:inline-flex; align-items:center; gap:14px;
  background:#FFFDF9; border-radius:12px; padding:11px 22px 11px 12px;
  box-shadow:var(--shadow-md);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.google-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.google-card__badge{
  width:34px; height:34px; flex:none; border-radius:50%;
  display:grid; place-items:center; background:#fff;
  box-shadow:0 1px 4px rgba(36,27,20,.14);
}
.google-card__badge svg{width:18px; height:18px}
.google-card__text{display:flex; flex-direction:column; line-height:1.3}
.google-card__text strong{font-size:14.5px; font-weight:400; color:var(--ink); white-space:nowrap}
.google-card__text em{font-style:normal; font-size:12px; font-weight:300; color:var(--ink-soft)}
.google-card__star{color:var(--gold)}

/* ---------------------------------------------------------------
   7. SOBRE
   --------------------------------------------------------------- */
.about{background:var(--cream-lt); padding-block:var(--section-y-lg)}
.about__grid{display:grid; grid-template-columns:1fr 1.15fr; gap:80px; align-items:center}
.about__title{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(32px,3.6vw,48px); line-height:1.16; color:var(--ink);
  margin-bottom:26px;
}
.about__copy{
  font-size:15.5px; font-weight:300; line-height:1.9; color:var(--ink-soft);
  margin-bottom:30px;
}
.about__address{
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; font-weight:300; line-height:1.72; color:var(--ink-2);
}
.about__address .ico{margin-top:3px}

.about__figure{
  margin:0; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-md); aspect-ratio:16/10; background:var(--sand);
}
.about__figure img{width:100%; height:100%; object-fit:cover}

/* ---------------------------------------------------------------
   8. ESPECIALIDADES
   --------------------------------------------------------------- */
.specials{background:var(--sand); padding-block:var(--section-y)}
.specials__grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.dish{
  background:var(--cream-card);
  border:1px solid rgba(220,205,182,.85);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dish:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.dish__media{aspect-ratio:1/1; overflow:hidden; background:var(--sand)}
.dish__media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.dish:hover .dish__media img{transform:scale(1.06)}
.dish__body{
  padding:17px 16px 19px; text-align:center;
  display:flex; flex-direction:column; flex:1;
}
.dish__name{
  font-family:var(--font-body); font-size:14px; font-weight:400;
  letter-spacing:.01em; color:var(--ink); margin-bottom:8px;
}
.dish__desc{
  font-size:12px; font-weight:300; line-height:1.6; color:var(--ink-soft);
  margin-bottom:14px; flex:1;
}
.dish__price{
  font-family:var(--font-body); font-size:16px; font-weight:500;
  letter-spacing:.01em; color:var(--ink);
}

/* ---------------------------------------------------------------
   9. MENÚ
   --------------------------------------------------------------- */
.menu{background:var(--cream); padding-block:var(--section-y)}
.menu__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:0; padding-top:8px}
.menu__col{text-align:left; padding-inline:26px}
.menu__col:first-child{padding-left:0}
.menu__col:last-child{padding-right:0}
.menu__col + .menu__col{border-left:1px solid rgba(220,205,182,.65)}
.menu__icon{
  display:block; width:var(--sym-menu); height:var(--sym-menu);
  color:var(--brown); margin:0 auto 15px;
}
.menu__icon--sub{margin-top:34px}
.menu__icon svg{width:100%; height:100%; display:block}
.menu__label{
  font-family:var(--font-body); font-size:11.5px; font-weight:400;
  text-transform:uppercase; letter-spacing:.19em; text-align:center;
  color:var(--ink); margin-bottom:18px;
}
.menu__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:8px 0;
  border-bottom:1px solid rgba(220,205,182,.5);
  font-size:14px; font-weight:300; color:var(--ink-2);
}
.menu__list li:last-child{border-bottom:0}
.menu__list b{font-weight:400; color:var(--ink); white-space:nowrap}

.menu__cta{text-align:center; margin-top:52px}

/* ---------------------------------------------------------------
   10. GALERÍA
   --------------------------------------------------------------- */
.gallery{background:var(--sand); padding-block:var(--section-y)}
.gallery__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.gallery__item{
  display:block; padding:0; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; background:var(--line-soft);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gallery__item img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.gallery__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.gallery__item:hover img{transform:scale(1.07)}

/* ---------------------------------------------------------------
   11. UBICACIÓN
   --------------------------------------------------------------- */
.location{background:var(--cream-lt); padding-block:var(--section-y-lg)}
.location__grid{display:grid; grid-template-columns:1fr 1.1fr; gap:72px; align-items:center}
.location__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,3vw,40px); line-height:1.2; color:var(--ink);
  margin-bottom:36px; text-wrap:balance;
}
.info-list li{display:flex; gap:18px; padding:18px 0; align-items:flex-start}
.info-list li + li{border-top:1px dotted var(--line)}
.info-list__ico{
  width:var(--badge-info); height:var(--badge-info); flex:none;
  border-radius:50%; background:var(--ink); color:var(--cream);
  display:grid; place-items:center;
}
.info-list__ico svg{width:var(--sym-info); height:var(--sym-info); display:block}
.info-list h3{
  font-family:var(--font-body); font-size:13.5px; font-weight:400;
  letter-spacing:.02em; color:var(--ink); margin-bottom:5px;
}
.info-list p{font-size:14px; font-weight:300; line-height:1.72; color:var(--ink-soft)}
.info-list a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}

.map-card{
  position:relative; border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--line-soft); border:1px solid rgba(220,205,182,.9);
  box-shadow:var(--shadow-sm);
}

/* El mapa de Google llega con su paleta fria; el filtro lo lleva al tono
   calido del sitio sin tocar su funcionamiento. */
.map-card__frame{
  width:100%; aspect-ratio:16/8; border:0; display:block;
  filter:sepia(38%) saturate(72%) hue-rotate(-10deg) brightness(1.03) contrast(.94);
}

.map-card__box{
  position:absolute; right:5%; top:50%; transform:translateY(-50%);
  background:#FFFDF9; border-radius:var(--radius-sm); padding:16px 19px;
  box-shadow:var(--shadow-md); max-width:220px;
  display:flex; flex-direction:column; gap:1px;
}
.map-card__box b{font-size:13px; font-weight:400; color:var(--ink); line-height:1.42}
.map-card__box em{font-style:normal; font-size:11.5px; font-weight:300; color:var(--ink-soft); line-height:1.5; margin-top:5px}
.map-card__link{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin-top:12px; padding-top:11px;
  border-top:1px solid rgba(220,205,182,.7);
  font-size:12px; font-weight:400; letter-spacing:.02em; color:var(--ink);
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.map-card__link svg{width:14px; height:14px; flex:none}
.map-card__link:hover{gap:10px; color:var(--brown)}

/* ---------------------------------------------------------------
   12. SOCIAL (Instagram + reseñas)
   --------------------------------------------------------------- */
.social{
  position:relative; isolation:isolate;
  background:var(--brown-mid);
  padding:76px 0 64px;
  color:#F7F1E6;
}
.social__bg{position:absolute; inset:0; z-index:-1; opacity:.4; overflow:hidden}
.social__bg img{width:100%; height:100%; object-fit:cover}
.social::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,rgba(88,70,50,.92),rgba(122,99,73,.78));
}

.social__grid{display:grid; grid-template-columns:210px 1fr 1.3fr; gap:52px; align-items:center}

/* El telefono asoma por encima de la franja: se ancla arriba y sube con un
   margen negativo. aspect-ratio reserva el hueco exacto del mockup. */
.social__phone{align-self:start; margin-top:-140px; aspect-ratio:560/1171; border-radius:26px}
.social__phone img{
  width:100%; height:100%; object-fit:contain; object-position:bottom;
  border-radius:24px; filter:drop-shadow(0 18px 44px rgba(30,23,16,.45));
}

.social__title{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(28px,3.1vw,42px); line-height:1.14; color:#F7F1E6;
  margin-bottom:20px;
}
.social__title em{font-style:italic}
.social__title--reviews{font-size:clamp(24px,2.4vw,32px); text-align:center; margin-bottom:26px}

.social__handle{
  display:inline-block; font-size:15.5px; font-weight:300; letter-spacing:.02em;
  color:#F7F1E6; border-bottom:1px solid rgba(247,241,230,.4); padding-bottom:2px;
  transition:border-color .3s var(--ease);
}
.social__handle:hover{border-color:#F7F1E6}
.social__meta{font-size:13.5px; font-weight:300; color:rgba(247,241,230,.72); margin-top:14px}
.social__note{
  font-size:13px; font-weight:300; color:rgba(247,241,230,.62);
  margin-top:26px; padding-top:18px;
  border-top:1px solid rgba(247,241,230,.22);
}

.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.review{
  background:rgba(252,249,243,.95); border-radius:var(--radius);
  padding:20px 16px; text-align:center; color:var(--ink);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:10px; align-items:center;
  transition:transform .35s var(--ease);
}
.review:hover{transform:translateY(-4px)}
.review p{font-size:13px; font-weight:300; line-height:1.5; color:var(--ink-2); min-height:3em}
.stars{color:var(--gold); font-size:12.5px; letter-spacing:2.5px}
.review cite{font-size:11.5px; font-weight:300; color:var(--ink-soft)}

/* ---------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------- */
.site-footer{background:var(--cream); color:var(--ink)}
.footer__grid{
  display:grid; grid-template-columns:1fr 1.05fr .9fr; gap:56px;
  align-items:center; padding-block:54px;
}
.footer__logo{height:80px; width:auto}
.footer__tagline{
  font-size:12px; font-weight:300; letter-spacing:.06em;
  color:var(--ink-soft); margin-top:14px;
}
.footer__contact li{
  display:flex; align-items:flex-start; gap:12px; padding:7px 0;
  font-size:13.5px; font-weight:300; line-height:1.68; color:var(--ink-2);
}
.footer__contact .ico{margin-top:3px}
.footer__contact a:hover{text-decoration:underline; text-underline-offset:3px}

.footer__sign{display:flex; align-items:center; justify-content:flex-end; gap:20px}
.footer__palm{width:92px; height:auto; color:var(--brown); opacity:.55; flex:none}
.footer__script{
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:25px; line-height:1.3; color:var(--ink-2); text-align:left;
}

.footer__bar{background:var(--paper-dark); padding:16px 0}
.footer__bar p{
  text-align:center; font-size:11.5px; font-weight:300;
  letter-spacing:.05em; color:rgba(247,241,230,.6);
}

/* ---------------------------------------------------------------
   14. LIGHTBOX
   --------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  background:rgba(24,18,12,.93); padding:5vw;
  opacity:0; transition:opacity .3s var(--ease);
}
.lightbox.is-open{opacity:1}
.lightbox[hidden]{display:none}
.lightbox__img{
  max-width:min(1000px,90vw); max-height:86vh; width:auto; height:auto;
  border-radius:var(--radius); box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox__close{
  position:absolute; top:22px; right:26px;
  width:44px; height:44px; font-size:30px; line-height:1;
  color:#F7F1E6; opacity:.8; border-radius:50%;
}
.lightbox__close:hover{opacity:1; background:rgba(247,241,230,.12)}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; font-size:34px; line-height:1;
  color:#F7F1E6; opacity:.7; border-radius:50%;
}
.lightbox__nav:hover{opacity:1; background:rgba(247,241,230,.12)}
.lightbox__nav--prev{left:16px}
.lightbox__nav--next{right:16px}
body.no-scroll{overflow:hidden}

/* ---------------------------------------------------------------
   15. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:1240px){
  :root{--gutter:26px; --section-y:76px; --section-y-lg:84px}
  .about__grid{gap:56px}
  .location__grid{gap:52px}
  .menu__grid{gap:30px}
  .social__grid{grid-template-columns:190px 1fr 1.2fr; gap:38px}
}

@media (max-width:1100px){
  :root{--sym-mark:48px}
  .specials__grid{grid-template-columns:repeat(3,1fr); gap:20px}
  .dish__desc{font-size:12.5px}
  .dish__name{font-size:15px}
  .menu__grid{grid-template-columns:repeat(3,1fr); gap:34px 30px}
  .menu__col{padding-inline:0}
  .menu__col + .menu__col{border-left:0}
  .gallery__grid{grid-template-columns:repeat(4,1fr)}
  .social__grid{grid-template-columns:180px 1fr; gap:40px}
  .social__reviews{grid-column:1 / -1}
  .footer__grid{grid-template-columns:1fr 1fr; gap:40px}
  .footer__sign{grid-column:1 / -1; justify-content:flex-start}
}

@media (max-width:900px){
  :root{--gutter:22px; --header-h:82px; --header-h-sm:72px}
  .brand__logo{height:56px}
  .site-header.is-scrolled .brand__logo{height:48px}
  .nav-toggle{display:flex}
  .header__cta{display:none}
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:8px 22px 26px;
    box-shadow:0 20px 40px rgba(36,27,20,.14);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .3s var(--ease);
  }
  .site-header.is-scrolled .nav{top:var(--header-h-sm)}
  .nav.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav__list{flex-direction:column; align-items:stretch; gap:0}
  .nav__list li + li{border-top:1px solid rgba(220,205,182,.6)}
  .nav__link{display:block; padding:15px 2px; font-size:16px}
  .nav__link::after{display:none}
  .nav__cta-mobile{display:inline-flex; margin-top:18px}

  .about__grid{grid-template-columns:1fr; gap:40px}
  .about__figure{order:-1}
  .location__grid{grid-template-columns:1fr; gap:38px}
  .map-card__frame{aspect-ratio:4/3}
  .social__grid{grid-template-columns:1fr; gap:38px; text-align:center}
  /* ancho explicito: la imagen va a width:100%, asi que no aporta ancho
     intrinseco y con margenes auto el contenedor colapsaria a cero. */
  .social__phone{width:min(230px,62vw); max-width:none; margin:-130px auto 0; align-self:start}
  .social__ig{display:flex; flex-direction:column; align-items:center}
  .social__note{width:100%}
  .footer__grid{grid-template-columns:1fr; text-align:center; justify-items:center; gap:34px}
  .footer__contact{width:max-content; max-width:100%; margin-inline:auto}
  .footer__contact li{justify-content:flex-start; text-align:left}
  .footer__sign{justify-content:center}
}

@media (max-width:640px){
  :root{--section-y:60px; --section-y-lg:64px; --head-gap:34px; --sym-mark:44px}
  .hero{min-height:auto}
  .hero__inner{padding-block:58px 50px}
  .hero__content{max-width:100%}
  .hero__actions .btn{flex:1 1 auto}
  .specials__grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .dish__body{padding:14px 12px 16px}
  .dish__name{font-size:14px}
  .dish__desc{font-size:12px}
  .menu__grid{grid-template-columns:1fr; gap:30px}
  .menu__col{
    max-width:420px; margin-inline:auto; width:100%;
    display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:11px;
  }
  .menu__icon{grid-column:1; margin:0; width:23px; height:23px}
  .menu__icon--sub{margin-top:0}
  .menu__label{grid-column:2; text-align:left; margin:0}
  .menu__list{grid-column:1 / -1; margin-top:12px}
  .rule--sm{grid-column:1 / -1; margin:24px 0 6px}
  .menu__cta{margin-top:40px}
  .gallery__grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .reviews{grid-template-columns:1fr; gap:12px}
  .map-card__box{
    position:static; transform:none; max-width:none; width:100%;
    box-shadow:none; border-radius:0; padding:16px 18px;
    border-top:1px solid rgba(220,205,182,.7);
  }
  .footer__logo{height:68px}
  .footer__script{font-size:21px}
  .footer__palm{width:76px}
}

@media (max-width:420px){
  .brand__logo{height:48px}
  .site-header.is-scrolled .brand__logo{height:42px}
  .hero__actions{flex-direction:column; align-items:stretch}
  .google-card{width:100%; justify-content:center}
}