/* ==========================================================================
   Bar-Restaurante Sanchis · Oliva
   Sistema visual: papel, tinta, barro. Fraunces + Inter.
   ========================================================================== */

/* Fraunces e Inter servidas desde el propio sitio (sin cookies de terceros) */
/* Termes (la serif de la carta) y DM Sans, servidas desde el propio sitio */
@font-face{
  font-family:'Termes'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/termes-regular.otf') format('opentype');
}
@font-face{
  font-family:'Termes'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/termes-italic.otf') format('opentype');
}
@font-face{
  font-family:'DM Sans'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('fonts/dmsans-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --paper:      #F6F6F3;
  --paper-2:    #EEEEE9;
  --paper-3:    #E3E3DD;
  --card:       #FCFCFA;
  --ink:        #1B1B19;
  --ink-2:      #3B3B38;
  --muted:      #6B6B67;
  --terra:      #6E6E69;
  --terra-2:    #55554F;
  --navy:       #2A2A28;
  --gold:       #8C8C86;
  --line:       rgba(27,27,25,.18);
  --line-soft:  rgba(27,27,25,.09);
  --serif: "Termes", "Times New Roman", Times, Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 30px 60px -34px rgba(27,27,25,.28);
  --container: 1180px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--terra); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--terra);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,32px);
  position:relative;
  z-index:1;
}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:200; font-size:13px;
}
.skip:focus{ left:12px; top:12px; }

/* ---------- Tipografía ---------- */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.008em;
  line-height:1.04;
  margin:0;
}

h1{ font-size:clamp(2.5rem,5.2vw,4.4rem); line-height:1.02; }
h2{ font-size:clamp(1.95rem,3.7vw,3.05rem); }
h3{ font-size:clamp(1.18rem,1.7vw,1.45rem); line-height:1.15; }
h1 em, h2 em, h3 em{ font-style:italic; color:var(--terra); }

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra);
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:currentColor; opacity:.75;
}

.lead{ font-size:clamp(1.02rem,1.3vw,1.15rem); color:var(--ink-2); line-height:1.7; }

.section-num{
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--terra);
  display:block;
  margin-bottom:18px;
}
.section-num::after{
  content:""; display:block; width:40px; height:1px;
  background:var(--line); margin-top:12px;
}

.serif-it{ font-family:var(--serif); font-style:italic; }

/* ---------- Botones ---------- */

.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--paper);
  --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  font-family:var(--sans); font-size:13px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
  border-radius:1px;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn:hover{ background:var(--terra); border-color:var(--terra); color:#fff; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn-outline{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn-outline:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.btn-light{ --btn-bg:var(--paper); --btn-fg:var(--ink); --btn-bd:var(--paper); }
.btn-light:hover{ background:var(--terra); border-color:var(--terra); color:#fff; }

.btn-ghost-light{ --btn-bg:transparent; --btn-fg:var(--paper); --btn-bd:rgba(247,240,228,.35); }
.btn-ghost-light:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }

.btn-sm{ padding:11px 18px; font-size:11.5px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--line);
  padding-bottom:4px;
  transition:border-color .2s, color .2s;
}
.link-arrow svg{ width:15px; height:15px; transition:transform .2s; }
.link-arrow:hover{ color:var(--terra); border-color:var(--terra); }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---------- Barra superior ---------- */
.topbar{
  background:var(--ink); color:rgba(247,240,228,.92);
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  position:relative; z-index:60;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:38px;
}
.topbar-msg{ display:inline-flex; align-items:center; gap:10px; }
.topbar-dot{ width:5px; height:5px; border-radius:50%; background:var(--terra); flex:none; }
.topbar a{ color:var(--paper); border-bottom:1px solid rgba(247,240,228,.3); padding-bottom:1px; }
.topbar a:hover{ border-color:var(--paper); }

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,240,228,.93);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 12px 30px -24px rgba(25,21,18,.6); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:80px;
}
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand img{ width:54px; height:54px; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong{
  font-family:var(--serif); font-weight:400; font-size:1.32rem; letter-spacing:-.01em;
}
.brand-text span{
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  margin-top:5px;
}

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.nav a{
  font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2);
  position:relative; padding:6px 0;
  transition:color .2s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--terra); transition:width .25s ease;
}
.nav a:hover{ color:var(--terra); }
.nav a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }

.menu-toggle{
  display:none;
  width:44px; height:44px;
  background:none; border:1px solid var(--line);
  align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.menu-toggle span{
  display:block; width:18px; height:1.5px; background:var(--ink);
  position:relative; transition:background .2s;
}
.menu-toggle span::before,.menu-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink);
  transition:transform .25s ease;
}
.menu-toggle span::before{ top:-6px; }
.menu-toggle span::after{ top:6px; }
.menu-toggle[aria-expanded="true"] span{ background:transparent; }
.menu-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  display:none;
  border-top:1px solid var(--line-soft);
  padding-block:8px 22px;
}
.mobile-nav a{
  display:block; padding:13px 0;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--line-soft);
}
.mobile-nav .btn{ margin-top:18px; width:100%; }
.mobile-nav.is-open{ display:block; }

/* ---------- Hero ---------- */
.hero{ padding:clamp(42px,6vw,74px) 0 0; }
.hero-grid{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:clamp(32px,5vw,70px);
  align-items:center;
}
.hero-copy{ max-width:34rem; }
.hero h1{ margin-top:22px; }
.hero h1 .line{ display:block; }
.hero-sub{ margin-top:26px; max-width:38ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

.hero-proof{
  display:flex; align-items:center; gap:14px;
  margin-top:30px; padding-top:22px;
  border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted); letter-spacing:.02em;
}
.hero-proof .stars{ color:var(--gold); font-size:14px; letter-spacing:2px; line-height:1; }
.hero-proof strong{ color:var(--ink); font-weight:600; }
.hero-proof a{ text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.hero-proof a:hover{ color:var(--terra); text-decoration-color:currentColor; }

.hero-media{ position:relative; padding:0 0 34px 30px; }
.hero-frame{
  background:var(--card);
  border:1px solid var(--line-soft);
  padding:12px;
  box-shadow:var(--shadow);
  position:relative;
  z-index:1;
}
.hero-frame img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 62%;
}
.hero-frame figcaption{
  display:flex; justify-content:space-between; gap:10px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding:11px 2px 1px;
}
.hero-card{
  position:absolute; left:0; bottom:0;
  width:41%; max-width:220px;
  background:var(--card);
  padding:8px;
  border:1px solid var(--line-soft);
  box-shadow:0 24px 40px -26px rgba(25,21,18,.55);
  transform:rotate(-2.2deg);
}
.hero-card img{ aspect-ratio:1; object-fit:cover; }
.hero-card span{
  display:block; font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:7px 1px 1px;
}
.hero-stamp{
  position:absolute; top:-26px; right:-6px;
  width:clamp(96px,11vw,132px); height:auto;
  color:var(--terra);
  z-index:3;
  animation:spin 80s linear infinite;
}
.hero-stamp text{
  font-family:var(--sans); font-size:8.6px; font-weight:600;
  letter-spacing:.24em; fill:currentColor;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Datos rápidos ---------- */
.facts{
  margin-top:clamp(56px,7vw,86px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.fact{
  padding:26px clamp(18px,3vw,34px);
  border-right:1px solid var(--line);
  display:flex; gap:16px; align-items:flex-start;
}
.fact:last-child{ border-right:0; }
.fact svg{ width:20px; height:20px; color:var(--terra); flex:none; margin-top:4px; }
.fact-k{
  display:block; font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px;
}
.fact strong{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.12rem; line-height:1.25;
}
.fact em{ font-style:normal; color:var(--muted); font-size:13px; }

/* ---------- Secciones ---------- */
.section{ padding:clamp(72px,9vw,118px) 0; position:relative; }
.section-tight{ padding:clamp(54px,6vw,80px) 0; }
.section-alt{ background:var(--paper-2); }
.section-dark{ background:var(--ink); color:var(--paper); }
.section-dark .section-num{ color:#C9C9C3; }
.section-dark .eyebrow{ color:#C9C9C3; }
.section-dark .section-num::after{ background:rgba(247,240,228,.25); }
.section-dark h2 em{ color:#C9C9C3; }
.section-dark .lead{ color:rgba(246,246,243,.74); }

.section-head{ max-width:44rem; margin-bottom:clamp(38px,5vw,56px); }
.section-head p{ margin-top:20px; }
.section-head.split{
  max-width:none;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
}
.section-head.split > div{ max-width:34rem; }

/* ---------- La casa ---------- */
.house-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,76px); align-items:center;
}
.house-copy .lead{ margin-top:24px; }
.house-copy p + p{ margin-top:16px; }
.house-sign{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:16px;
}
.house-sign img{ width:46px; height:46px; opacity:.85; }
.house-sign span{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  line-height:1.7;
}
.house-sign strong{ display:block; color:var(--ink); font-weight:600; }

.house-collage{
  display:grid; grid-template-columns:1fr .74fr; gap:16px; align-items:end;
}
.house-collage figure{ margin:0; }
.house-collage img{ width:100%; object-fit:cover; }
.house-collage .wide img{ aspect-ratio:5/4; }
.house-collage .tall img{ aspect-ratio:3/4.3; }
.house-collage figcaption{
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-top:9px;
}

/* ---------- Almuerzos (sección oscura) ---------- */
.lunch-grid{
  display:grid; grid-template-columns:.88fr 1.12fr;
  gap:clamp(36px,6vw,72px); align-items:start;
}
.lunch-photo{ position:relative; }
.lunch-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.lunch-photo figcaption{
  position:absolute; left:0; bottom:0; right:0;
  background:linear-gradient(transparent, rgba(25,21,18,.85));
  color:var(--paper); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:40px 18px 14px;
}
.lunch-copy .lead{ color:rgba(247,240,228,.78); margin-top:20px; }

.price-line{
  display:flex; align-items:baseline; gap:14px;
  margin:28px 0 6px; flex-wrap:wrap;
}
.price-line .amount{
  font-family:var(--serif); font-size:clamp(3.2rem,6.4vw,4.6rem);
  line-height:.9; color:var(--paper); letter-spacing:-.03em;
}
.price-line .unit{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:rgba(247,240,228,.6); }
.includes{
  font-size:13.5px; color:rgba(247,240,228,.7);
  border-left:1px solid rgba(247,240,228,.25); padding-left:16px; margin-bottom:28px;
}

.lunch-list{
  display:grid; grid-template-columns:1fr 1fr; column-gap:30px;
  border-top:1px solid rgba(247,240,228,.18);
  margin:0; padding:0; list-style:none;
}
.lunch-list li{
  display:flex; justify-content:space-between; gap:12px;
  padding:10px 0; border-bottom:1px solid rgba(247,240,228,.12);
  font-size:13.5px; color:rgba(247,240,228,.9);
}
.lunch-list .p{ color:rgba(247,240,228,.6); font-variant-numeric:tabular-nums; }

.special-card{
  margin-top:32px; padding:24px;
  border:1px solid rgba(247,240,228,.24);
  background:rgba(247,240,228,.04);
}
.special-card h3{ color:var(--paper); font-size:1.2rem; }
.special-card .tag{
  display:inline-block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#C9C9C3; margin-bottom:10px;
}
.special-card p{ font-size:13px; color:rgba(247,240,228,.65); margin-top:8px; }
.special-card ul{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 24px;
}
.special-card li{
  display:flex; justify-content:space-between; gap:10px;
  font-size:13px; padding:7px 0;
  border-bottom:1px solid rgba(247,240,228,.1);
}

/* ---------- Carta ---------- */
.tabs-wrap{ border-bottom:1px solid var(--line); margin-bottom:34px; }
.tabs{
  display:flex; gap:clamp(14px,2.4vw,30px); flex-wrap:wrap;
  margin:0; padding:0; list-style:none;
}
.tab{
  background:none; border:0; cursor:pointer;
  padding:0 0 14px;
  font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
  position:relative; transition:color .2s;
}
.tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--terra); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{ color:var(--ink); }
.tab[aria-selected="true"]::after{ transform:scaleX(1); }

.panel[hidden]{ display:none; }
.dishes{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(30px,5vw,64px);
}
.dish{
  display:grid; grid-template-columns:1fr auto; gap:4px 14px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
  align-items:baseline;
}
.dish .name{ font-size:15px; font-weight:500; line-height:1.35; }
.dish .name small{
  display:block; font-size:12px; font-weight:400; color:var(--muted);
  line-height:1.45; margin-top:3px; max-width:36ch;
}
.dish .price{
  font-family:var(--serif); font-size:1.06rem; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dish .dot{ display:none; }

.menu-note{
  margin-top:30px; padding:18px 20px;
  border-left:2px solid var(--terra);
  background:rgba(166,62,40,.05);
  font-size:13px; color:var(--ink-2);
}
.menu-note strong{ font-weight:600; }

.menu-foot{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  margin-top:40px; flex-wrap:wrap;
}
.menu-foot p{ font-size:12.5px; color:var(--muted); max-width:40ch; }

/* ---------- Reseñas ---------- */
#resenas{ padding-bottom:clamp(44px,5vw,70px); }
.rating-panel{
  display:grid; grid-template-columns:.7fr 1.3fr;
  gap:clamp(32px,6vw,70px); align-items:start;
}
.rating-score{ border-right:1px solid var(--line); padding-right:30px; }
.rating-score .num{
  font-family:var(--serif); font-size:clamp(3.6rem,7vw,5.4rem); line-height:.9;
  letter-spacing:-.03em;
}
.rating-score .num span{ font-size:.34em; color:var(--muted); letter-spacing:0; }
.rating-score .stars{ color:var(--gold); font-size:18px; letter-spacing:3px; margin:12px 0 8px; }
.rating-score p{ font-size:12.5px; color:var(--muted); }
.rating-score a{ text-decoration:underline; text-underline-offset:3px; }
.rating-score a:hover{ color:var(--terra); }

.quotes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,44px); }
.quote{ margin:0; position:relative; padding-top:30px; }
.quote::before{
  content:"\201C";
  position:absolute; top:-16px; left:-8px;
  font-family:var(--serif); font-size:82px; line-height:1;
  color:var(--terra); opacity:.28;
}
.quote blockquote{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.18rem,2vw,1.5rem); line-height:1.42;
  letter-spacing:-.005em;
}
.quote figcaption{
  margin-top:18px; font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.quote figcaption strong{ display:block; color:var(--ink); font-weight:600; letter-spacing:.1em; }

/* ---------- Galería ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(120px,15vw,190px);
  gap:12px;
}
.gallery button{
  padding:0; border:0; background:none; cursor:zoom-in;
  overflow:hidden; position:relative;
}
.gallery img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.gallery button:hover img{ transform:scale(1.045); filter:brightness(1.04); }
.gallery .g-tall{ grid-row:span 2; }
.gallery .g-wide{ grid-column:span 2; }
.gallery .g-big{ grid-column:span 2; grid-row:span 2; }

/* ---------- Dónde estamos ---------- */
.place-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,64px); align-items:stretch;
}
.map-box{
  position:relative; min-height:420px;
  border:1px solid var(--line-soft);
  background:var(--paper-3);
  overflow:hidden;
}
.map-box iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:saturate(.82) contrast(.98) sepia(.06);
}
.map-facade{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; padding:24px 24px 28px;
  background:
    linear-gradient(rgba(247,240,228,.28),rgba(247,240,228,.12) 40%, rgba(247,240,228,.55)),
    url('mapa.jpg') center/cover no-repeat;
}
.map-pin{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-100%);
  width:38px; height:auto; color:var(--terra);
  filter:drop-shadow(0 5px 7px rgba(25,21,18,.4));
}
.map-card{
  position:relative;
  background:rgba(251,246,236,.96);
  border:1px solid var(--line);
  padding:16px 24px 18px;
  box-shadow:0 20px 36px -20px rgba(25,21,18,.65);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.map-card strong{ font-family:var(--serif); font-weight:400; font-size:1.15rem; }
.map-card .addr{ font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.map-credit{
  position:absolute; right:5px; bottom:4px;
  font-size:9px; letter-spacing:.02em; color:#3B332B;
  background:rgba(255,255,255,.78); padding:1px 5px;
}
.place-card{ display:flex; flex-direction:column; justify-content:center; }
.place-list{ margin:26px 0 0; padding:0; list-style:none; }
.place-list li{
  display:flex; gap:16px; padding:16px 0;
  border-bottom:1px solid var(--line-soft);
}
.place-list svg{ width:18px; height:18px; color:var(--terra); flex:none; margin-top:3px; }
.place-list div{ min-width:0; }
.place-list span{
  display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:3px;
}
.place-list strong, .place-list a{ font-size:15px; font-weight:500; line-height:1.4; }
.place-list a:hover{ color:var(--terra); }
.place-list em{ font-style:normal; color:var(--muted); }

.hours{ margin:0; width:100%; border-collapse:collapse; font-size:14px; }
.hours th, .hours td{ padding:5px 0; text-align:left; font-weight:400; }
.hours th{ color:var(--muted); width:52%; }
.hours td{ text-align:right; font-variant-numeric:tabular-nums; }
.hours tr.closed td{ color:var(--terra); }
.hours tr.today th, .hours tr.today td{ font-weight:600; color:var(--ink); }

.place-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ---------- Cierre ---------- */
.closing{
  background:var(--paper-2);
  border-top:1px solid var(--line-soft);
  text-align:center;
  padding:clamp(56px,7vw,86px) 0;
}
.closing h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); max-width:20ch; margin-inline:auto; }
.closing p{ margin-top:16px; color:var(--muted); }
.closing .btn{ margin-top:28px; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink); color:rgba(247,240,228,.72);
  padding:clamp(48px,6vw,68px) 0 26px;
  font-size:13.5px;
}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:36px;
}
.footer-brand{ display:flex; gap:14px; align-items:flex-start; }
.footer-brand img{ width:52px; height:52px; filter:invert(1) brightness(1.6); opacity:.9; }
.footer-brand strong{
  display:block; font-family:var(--serif); font-weight:400;
  color:var(--paper); font-size:1.18rem; margin-bottom:6px;
}
.footer-brand p{ font-size:12.5px; line-height:1.6; max-width:26ch; }
.site-footer h4{
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(247,240,228,.5);
  margin:0 0 16px;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:9px; }
.site-footer a:hover{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{
  margin-top:46px; padding-top:20px;
  border-top:1px solid rgba(247,240,228,.14);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:11.5px; color:rgba(247,240,228,.45);
}
.social{ display:flex; gap:10px; }
.social a{
  width:38px; height:38px; border:1px solid rgba(247,240,228,.25);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.social svg{ width:16px; height:16px; }
.social a:hover{ background:var(--terra); border-color:var(--terra); color:#fff; }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:80;
  width:54px; height:54px; border-radius:50%;
  background:#1FA855; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(25,21,18,.5);
  transition:transform .2s, background .2s;
}
.wa-float svg{ width:27px; height:27px; }
.wa-float:hover{ transform:translateY(-2px) scale(1.03); background:#178a45; }

/* ---------- Lightbox ---------- */
dialog.lightbox{
  border:0; padding:0; background:transparent;
  max-width:min(1100px,94vw); max-height:92vh;
  overflow:visible;
}
dialog.lightbox::backdrop{ background:rgba(20,17,14,.9); }
dialog.lightbox img{
  max-width:100%; max-height:84vh; width:auto; height:auto;
  margin-inline:auto; box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
dialog.lightbox .lb-close{
  position:absolute; top:-44px; right:0;
  background:none; border:0; color:var(--paper);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; padding:8px;
}
dialog.lightbox .lb-caption{
  color:rgba(247,240,228,.7); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; text-align:center; margin-top:12px;
}

/* ---------- Reveal ---------- */
.reveal{ opacity:1; transform:none; }
.js .reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------- Páginas interiores ---------- */
.page-hero{
  padding:clamp(48px,6vw,76px) 0 clamp(28px,4vw,44px);
  border-bottom:1px solid var(--line-soft);
}
.page-hero h1{ margin-top:18px; font-size:clamp(2.3rem,5vw,4rem); }
.page-hero p{ margin-top:18px; max-width:52ch; }

.menu-section{ padding:clamp(40px,5vw,62px) 0; border-bottom:1px solid var(--line-soft); }
.menu-section:last-of-type{ border-bottom:0; }
.menu-section > h2{
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  margin-bottom:8px;
}
.menu-section .menu-kicker{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--terra); margin-bottom:26px;
}

.legal{ max-width:74ch; }
.legal h1{ font-size:clamp(2rem,4vw,2.9rem); }
.legal h2{ font-size:1.35rem; margin:34px 0 10px; }
.legal p, .legal li{ font-size:14.5px; color:var(--ink-2); }
.legal ul{ padding-left:20px; }
.legal a{ color:var(--terra); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-copy{ max-width:38rem; }
  .hero-media{ max-width:520px; padding-left:0; padding-bottom:40px; }
  .hero-card{ left:auto; right:0; width:36%; }
  .hero-stamp{ right:4px; top:-14px; width:92px; }
  .house-grid{ grid-template-columns:1fr; gap:36px; }
  .lunch-grid{ grid-template-columns:1fr; gap:36px; }
  .lunch-photo{ max-width:460px; }
  .lunch-photo img{ aspect-ratio:4/3; }
  .rating-panel{ grid-template-columns:1fr; gap:36px; }
  .rating-score{ border-right:0; border-bottom:1px solid var(--line); padding:0 0 26px; }
  .place-grid{ grid-template-columns:1fr; }
  .map-box{ min-height:340px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .section-head.split{ flex-direction:column; align-items:flex-start; gap:22px; }
}

@media (max-width:860px){
  .nav{ display:none; }
  .menu-toggle{ display:flex; }
  .header-actions .btn{ display:none; }
  .topbar .container{ justify-content:center; }
  .topbar-phone{ display:none; }
  .dishes{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; gap:30px; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:38vw; }
  .gallery .g-big{ grid-column:span 2; grid-row:span 1; }
  .gallery .g-wide{ grid-column:span 2; }
  .facts{ grid-template-columns:1fr; }
  .fact{ border-right:0; border-bottom:1px solid var(--line); }
  .fact:last-child{ border-bottom:0; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .hero{ padding-top:34px; }
  .hero h1{ font-size:clamp(2.3rem,10vw,3.2rem); }
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ flex:1 1 100%; }
  .hero-proof{ flex-wrap:wrap; gap:10px 12px; }
  .brand img{ width:46px; height:46px; }
  .brand-text strong{ font-size:1.12rem; }
  .brand-text span{ font-size:8.5px; letter-spacing:.18em; }
  .header-inner{ min-height:70px; }
  .lunch-list{ grid-template-columns:1fr; }
  .special-card ul{ grid-template-columns:1fr; }
  .menu-foot{ flex-direction:column; align-items:flex-start; }
  .menu-foot .btn{ width:100%; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .footer-bottom{ flex-direction:column; gap:12px; }
  .hero-card{ width:42%; }
  .gallery{ grid-auto-rows:44vw; }
  .tabs{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .tab{ white-space:nowrap; }
  .place-actions .btn{ flex:1 1 100%; }
}

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

@media print{
  .topbar,.site-header,.wa-float,.hero-media,.gallery,.site-footer,.closing{ display:none !important; }
  body{ background:#fff; }
}


/* ==========================================================================
   Intro de entrada (solo portada)
   ========================================================================== */
#intro{
  display:none; position:fixed; inset:0; z-index:9999;
  background:var(--paper); overflow:hidden;
}
html.intro-on #intro{ display:block; animation:introOut .9s ease 2.25s forwards; }
html.intro-on body{ overflow:hidden; }

@keyframes introOut{ to{ opacity:0; visibility:hidden; } }

.intro-art{
  position:absolute; inset:0;
  background:url('intro-ilustracion.jpg') center center / cover no-repeat;
  mix-blend-mode:multiply;
  opacity:0;
  animation:introArtIn 1.6s ease .05s forwards;
}
.intro-art::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 58% 46% at 50% 46%,
      rgba(246,246,243,.97) 0%,
      rgba(246,246,243,.93) 20%,
      rgba(246,246,243,.62) 46%,
      rgba(246,246,243,.28) 70%,
      rgba(246,246,243,.55) 100%),
    linear-gradient(90deg, rgba(246,246,243,.95) 0%, rgba(246,246,243,0) 9%, rgba(246,246,243,0) 91%, rgba(246,246,243,.95) 100%),
    linear-gradient(0deg, rgba(246,246,243,.95) 0%, rgba(246,246,243,0) 9%, rgba(246,246,243,0) 91%, rgba(246,246,243,.95) 100%);
}
@keyframes introArtIn{ to{ opacity:1; } }

.intro-logo{
  position:absolute; left:50%; top:46%;
  width:clamp(240px,62vw,480px); height:auto;
  transform:translate(-50%,-50%) scale(.94);
  opacity:0;
  filter:drop-shadow(0 26px 46px rgba(27,27,25,.16));
  animation:introLogoIn 1s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
@keyframes introLogoIn{
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}

.intro-skip{
  position:absolute; z-index:3; left:50%; bottom:34px;
  transform:translateX(-50%);
  background:rgba(246,246,243,.78); color:var(--ink);
  border:1px solid rgba(27,27,25,.26);
  padding:11px 24px; cursor:pointer;
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  opacity:0;
  transition:background .2s, color .2s, border-color .2s;
}
html.intro-on .intro-skip{ animation:introFade .5s ease 1.2s forwards; }
.intro-skip:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
@keyframes introFade{ to{ opacity:1; } }

@media (max-width:640px){
  .intro-logo{ top:44%; width:66vw; }
  .intro-skip{ bottom:26px; }
}


/* ---------- Almuerzos en claro ---------- */
.lunch-light .lead{ color:var(--ink-2); }
.price-line--ink .amount{ color:var(--ink); }
.price-line--ink .unit{ color:var(--muted); }
.includes--ink{ color:var(--muted); border-left-color:var(--line); }
.lunch-list--ink li{ color:var(--ink-2); border-bottom-color:var(--line-soft); }
.lunch-list--ink .p{ color:var(--muted); }
.lunch-photo--plain figcaption{
  position:static; background:none; color:var(--muted);
  padding:10px 2px 0; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}

/* ---------- Especialidades ---------- */
.special-grid .lead{ margin-top:20px; }
.special-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(36px,6vw,72px); align-items:center;
}
.special-menu{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(246,246,243,.2); }
.special-menu li{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid rgba(246,246,243,.14);
}
.special-menu .nm{ font-family:var(--serif); font-size:1.18rem; color:rgba(246,246,243,.94); }
.special-menu .pr{ font-family:var(--serif); font-size:1.05rem; color:rgba(246,246,243,.62); white-space:nowrap; }
.special-note{
  margin-top:26px; padding:20px 22px;
  border:1px solid rgba(246,246,243,.24);
  font-size:14px; line-height:1.6; color:rgba(246,246,243,.72);
}
.special-note strong{ color:var(--paper); }

/* ---------- Carta diaria ---------- */
.menu-duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.menu-card{
  background:var(--card); border:1px solid var(--line-soft);
  padding:clamp(24px,3vw,34px); display:flex; flex-direction:column;
}
.menu-card .k{ font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.menu-card h3{ margin-top:10px; font-size:1.7rem; }
.menu-card > p{ margin-top:10px; font-size:14px; color:var(--muted); }
.menu-card ul{ list-style:none; margin:22px 0 0; padding:0; }
.menu-card li{
  display:flex; justify-content:space-between; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14px;
}
.menu-card li span:last-child{ color:var(--muted); white-space:nowrap; }
.menu-duo-foot{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:36px; text-align:center; }
.menu-duo-foot p{ font-size:12.5px; color:var(--muted); }

@media (max-width:1024px){
  .special-grid{ grid-template-columns:1fr; }
  .menu-duo{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .special-menu .nm{ font-size:1.06rem; }
  .menu-card h3{ font-size:1.5rem; }
}


/* ---------- Reservas ---------- */
.res-section{ padding-top:clamp(28px,4vw,44px); }
.res-grid{ display:grid; grid-template-columns:1.22fr .78fr; gap:clamp(32px,5vw,64px); align-items:start; }
.res-form{ min-width:0; }
.res-block{ border:0; border-top:1px solid var(--line); margin:0 0 34px; padding:26px 0 0; }
.res-block legend{
  font-family:var(--serif); font-size:clamp(1.35rem,2.2vw,1.7rem); line-height:1.1;
  padding:0; margin-bottom:20px;
}
.res-block legend span{
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.2em;
  color:var(--terra); margin-right:10px; vertical-align:.2em;
}
.res-block legend em{
  font-family:var(--sans); font-style:normal; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-left:8px;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.field label{
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.field label em{ font-style:normal; font-weight:400; letter-spacing:.06em; text-transform:none; color:var(--muted); }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); padding:12px 13px;
  border-radius:1px; appearance:none;
}
.field input:focus, .field select:focus{ outline:2px solid var(--ink); outline-offset:1px; }
.field select{ background-image:linear-gradient(45deg,transparent 49%,var(--ink) 50%),linear-gradient(-45deg,transparent 49%,var(--ink) 50%); background-size:6px 6px,6px 6px; background-position:calc(100% - 16px) 55%,calc(100% - 10px) 55%; background-repeat:no-repeat; padding-right:34px; }

.seg, .horas{ display:flex; flex-wrap:wrap; gap:8px; }
.seg{ margin-top:4px; }
.seg button, .horas button{
  font:inherit; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  padding:10px 16px; cursor:pointer; transition:background .18s,color .18s,border-color .18s;
}
.horas button{ letter-spacing:.06em; padding:9px 13px; font-variant-numeric:tabular-nums; }
.seg button:hover, .horas button:hover{ border-color:var(--ink); }
.seg button[aria-pressed="true"], .horas button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.horas{ margin-top:10px; }

.res-notice{ font-size:12.5px; color:var(--muted); margin:12px 0 0; }
.res-notice.is-bad{ color:#8A2B2B; }
.res-hint{ font-size:12.5px; color:var(--muted); line-height:1.6; margin:0 0 16px; }

.platos{ border-top:1px solid var(--line-soft); }
.plato{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.plato .info strong{ display:block; font-size:14.5px; font-weight:500; }
.plato .info span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
.plato.is-off{ opacity:.45; }
.stepper{ display:flex; align-items:center; flex:none; }
.stepper button{
  width:34px; height:34px; border:1px solid var(--line); background:var(--card);
  font:inherit; font-size:16px; line-height:1; cursor:pointer; color:var(--ink);
}
.stepper button:hover:not(:disabled){ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.stepper button:disabled{ cursor:not-allowed; opacity:.5; }
.stepper output{ width:40px; text-align:center; font-size:14px; font-variant-numeric:tabular-nums; }

.check{ display:flex; gap:10px; align-items:flex-start; margin-top:6px; font-size:13px; color:var(--ink-2); }
.check input{ margin-top:3px; width:16px; height:16px; accent-color:var(--ink); flex:none; }
.check a{ text-decoration:underline; text-underline-offset:2px; }

.res-submit{ padding-top:6px; }
.res-submit .btn{ width:100%; }
.res-submit .res-hint{ margin:12px 0 0; }

.res-msg{ margin-top:16px; font-size:13.5px; line-height:1.6; }
.res-msg.is-bad{ background:#FBEDED; border:1px solid #E2B6B6; color:#8A2B2B; padding:13px 15px; }
.res-msg.is-ok{ background:#EDF5EF; border:1px solid #B6D2BE; color:#2E6B45; padding:13px 15px; }

.res-aside{
  position:sticky; top:104px;
  border:1px solid var(--line); background:var(--card); padding:28px;
}
.res-aside h3{ font-size:1.35rem; margin-bottom:6px; }
.res-list{ list-style:none; margin:18px 0 0; padding:0; }
.res-list li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.res-list li span{ color:var(--muted); text-align:right; }
.res-list li strong{ font-weight:500; }
.res-aside-box{ margin-top:22px; padding:16px 18px; background:var(--paper-2); border-left:2px solid var(--ink); }
.res-aside-box strong{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:8px; }
.res-aside-box p{ font-size:12.5px; color:var(--ink-2); line-height:1.55; margin:0; }
.res-aside .res-hint{ margin:20px 0 0; }
.res-aside .res-hint a{ text-decoration:underline; text-underline-offset:2px; }

.ok-card{ border:1px solid var(--line); background:var(--card); padding:clamp(28px,4vw,44px); }
.ok-card h2{ margin-top:16px; font-size:clamp(1.8rem,3.2vw,2.4rem); }
.ok-card p{ margin-top:14px; color:var(--ink-2); }
.ok-list{ list-style:none; margin:24px 0 28px; padding:0; border-top:1px solid var(--line-soft); }
.ok-list li{ display:flex; justify-content:space-between; gap:18px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.ok-list li span{ color:var(--muted); }
.ok-list li strong{ font-weight:500; text-align:right; }

@media (max-width:1024px){
  .res-grid{ grid-template-columns:1fr; }
  .res-aside{ position:static; }
}
@media (max-width:640px){
  .field-row{ grid-template-columns:1fr; }
  .seg button{ flex:1 1 30%; }
}