/* ============================================================
   Restaurant Braseria L'equip — La Seu d'Urgell
   Diseño v2: estructura y lenguaje visual basados en Tastyc
   (bslthemes), con la paleta propia crema + carbón + cobre.
   Tipos: Playfair Display (display) + Karla (texto).
   ============================================================ */

:root{
  --crema:#F4EFE6;
  --crema-2:#EDE6D8;
  --carbon:#1B1714;
  --carbon-2:#241F1A;
  --madera:#3E2E22;
  --cobre:#B65A2E;
  --cobre-claro:#D07347;
  --brasa:#E8B48A;
  --ink:#221C17;
  --ink-suave:#4A4038;
  --muted:#7A6E62;
  --linea:rgba(34,28,23,.14);
  --linea-punteada:rgba(34,28,23,.3);
  --linea-oscura:rgba(244,239,230,.14);
  --blanco:#FDFBF7;
  --shadow:0 18px 50px rgba(27,23,20,.14);
  --shadow-sm:0 8px 24px rgba(27,23,20,.10);
  --font-display:"Playfair Display",Georgia,serif;
  --font-sans:"Karla","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:clip; }
body{
  font-family:var(--font-sans); font-size:17px; line-height:1.7;
  color:var(--ink); background:var(--crema);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2.2rem); }
section{ padding-block:clamp(4.5rem,9vw,7.5rem); }

h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.14; }
h1{ font-size:clamp(2.4rem,5.5vw,4.4rem); }
h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin-bottom:.55em; }
h3{ font-size:clamp(1.25rem,2vw,1.6rem); }

/* Eyebrow estilo Tastyc: guión cobre + etiqueta uppercase */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.78rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; width:30px; height:3px; background:var(--cobre); }
.on-dark .eyebrow, .eyebrow.light{ color:var(--crema); }
.lede{ font-size:clamp(1rem,1.4vw,1.14rem); color:var(--ink-suave); max-width:60ch; }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
.center .eyebrow{ flex-direction:column; gap:.6rem; }
.center .eyebrow::before{ margin-inline:auto; }

/* ---------- Botones (cuadrados, estilo Tastyc) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display); font-weight:500; font-size:.92rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1.02rem 2.1rem; border-radius:0; border:1px solid transparent;
  cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{ background:var(--cobre); color:#fff; }
.btn-primary:hover{ background:var(--cobre-claro); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--crema); }
.btn-ghost-light{ background:transparent; color:var(--crema); border-color:rgba(244,239,230,.65); }
.btn-ghost-light:hover{ background:var(--crema); color:var(--carbon); border-color:var(--crema); }
.btn-text{
  background:none; border:none; padding:1.02rem .2rem; color:var(--muted);
  font-family:var(--font-display); letter-spacing:.14em; text-transform:uppercase; font-size:.92rem;
  transition:color .25s ease;
}
.btn-text:hover{ color:var(--cobre); }
.btn-text.light{ color:rgba(244,239,230,.75); }
.btn-text.light:hover{ color:#fff; }
.btn-lg{ padding:1.15rem 2.5rem; font-size:.98rem; }
.btn svg{ width:18px; height:18px; flex:none; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(244,239,230,.94); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--linea);
}
.site-header .wrap{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:1.2rem; min-height:78px;
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand .logo{ height:44px; width:auto; }
.brand .btxt{ display:flex; flex-direction:column; line-height:1.05; }
.brand .name{ font-family:var(--font-display); font-weight:700; font-size:1.45rem; color:var(--ink); }
.brand .tag{ font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--cobre); }
.nav{ display:flex; align-items:center; justify-content:center; gap:2rem; }
.nav a.navlink{
  position:relative; font-weight:700; font-size:.97rem; color:var(--ink);
  padding-block:1.6rem; transition:color .2s ease;
}
.nav a.navlink::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:3px;
  background:var(--cobre); transition:right .28s ease;
}
.nav a.navlink:hover::after, .nav a.navlink[aria-current="page"]::after{ right:0; }
.nav a.navlink:hover, .nav a.navlink[aria-current="page"]{ color:var(--cobre); }
.header-cta{ display:flex; align-items:center; gap:1.1rem; justify-content:flex-end; }
.header-phone{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--ink); }
.header-phone svg{ width:18px; height:18px; color:var(--cobre); }
.header-cta .btn{ padding:.85rem 1.7rem; }
.nav-toggle{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.nav-toggle span{ display:block; width:26px; height:2.5px; background:var(--ink); border-radius:3px; margin:5.5px 0; transition:.25s; }

/* ---------- Hero (pantalla completa, centrado, estilo Tastyc) ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--crema); overflow:hidden; padding-block:clamp(6rem,12vw,9rem);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; animation:kenburns 24s ease-out both; }
@keyframes kenburns{ from{ transform:scale(1.1); } to{ transform:scale(1); } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(27,23,20,.66);
}
.hero .wrap{ position:relative; z-index:2; max-width:1000px; }
.hero .hero-rule{ width:34px; height:3px; background:var(--cobre-claro); margin:0 auto 1.2rem; }
.hero .hero-label{
  display:block; font-size:.8rem; font-weight:800; letter-spacing:.3em; text-transform:uppercase;
  color:var(--crema); margin-bottom:2rem;
}
.hero h1{
  font-weight:500; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(2.2rem,5.6vw,4.6rem); line-height:1.18; color:#fff;
}
.hero .lede{ color:rgba(244,239,230,.85); margin:1.6rem auto 0; }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.2rem; margin-top:2.6rem; }
.hero-scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  width:22px; height:38px; border:1.5px solid rgba(244,239,230,.6); border-radius:12px;
}
.hero-scroll::after{
  content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px;
  background:var(--crema); transform:translateX(-50%); animation:scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint{ 0%,100%{ opacity:1; transform:translate(-50%,0); } 55%{ opacity:.2; transform:translate(-50%,10px); } }

/* ---------- Zigzag (texto + foto sangrando al borde) ---------- */
.zig .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.zig-text{ max-width:520px; }
.zig-text .btns{ display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem; margin-top:2rem; }
.zig-media{ position:relative; }
.zig-media .ph{ overflow:hidden; aspect-ratio:4/5; }
.zig-media .ph.wide{ aspect-ratio:4/3; }
.zig-media .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.zig-media:hover .ph img{ transform:scale(1.04); }
.zig.flip .zig-media{ order:-1; }

/* ---------- Por qué L'equip (3 columnas centradas) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3vw,3rem); margin-top:3.4rem; text-align:center; }
.why-item svg{ width:52px; height:52px; margin-inline:auto; color:var(--ink); stroke-width:1.2; }
.why-item h3{ margin-top:1.1rem; }
.why-item p{ color:var(--muted); font-size:.97rem; max-width:34ch; margin:.6rem auto 0; }

/* ---------- Banda horario / reservas (oscura con tarjeta) ---------- */
.hours{ position:relative; color:var(--crema); overflow:hidden; }
.hours-bg{ position:absolute; inset:0; }
.hours-bg img{ width:100%; height:100%; object-fit:cover; }
.hours::after{ content:""; position:absolute; inset:0; background:rgba(27,23,20,.74); }
.hours .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.hours h2{
  color:#fff; text-transform:uppercase; letter-spacing:.05em; font-weight:500;
  font-size:clamp(2rem,4.2vw,3.4rem);
}
.hours .lede{ color:rgba(244,239,230,.82); }
.hours .btns{ display:flex; align-items:center; flex-wrap:wrap; gap:1.2rem; margin-top:2rem; }
.hours-card{
  background:var(--crema); color:var(--ink); padding:clamp(2rem,4vw,3rem);
  text-align:center; max-width:420px; justify-self:end; width:100%;
}
.hours-card .hlabel{
  font-size:.78rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); display:block;
}
.hours-card .hnum{
  font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.8rem); line-height:1.25;
  margin-top:.8rem; color:var(--ink);
}
.hours-card .hnum .sep{ color:var(--cobre); }
.hours-card .hnote{ font-size:.9rem; color:var(--muted); margin-top:1rem; line-height:1.6; }
.hours-card .hdiv{ width:100%; border-top:1px dashed var(--linea-punteada); margin:1.6rem 0; }

/* ---------- FAQ (tarjetas con borde punteado, aire Tastyc) ---------- */
.faq-list{
  max-width:1120px; margin:3rem auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem; align-items:start;
}
.faq-item{ border:1px dashed var(--linea-punteada); padding:0 1.4rem; background:var(--crema); }
@media (max-width:880px){ .faq-list{ grid-template-columns:1fr; } }
.faq-item[open]{ background:var(--blanco); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:1.2rem 0; font-family:var(--font-display); font-weight:500; font-size:1.15rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .plus{ position:relative; width:20px; height:20px; flex:none; }
.faq-item .plus::before, .faq-item .plus::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--cobre); transition:transform .25s ease;
}
.faq-item .plus::before{ width:16px; height:2px; }
.faq-item .plus::after{ width:2px; height:16px; }
.faq-item[open] .plus::after{ transform:rotate(90deg); }
.faq-item .answer{ padding:0 0 1.3rem; color:var(--ink-suave); max-width:65ch; }

/* ---------- Galería ---------- */
.galeria{ overflow:hidden; }
.gal-track{
  display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:2.6rem 0 1.4rem; margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.gal-track::-webkit-scrollbar{ display:none; }
.gal-item{
  flex:0 0 clamp(240px,32vw,380px); scroll-snap-align:center;
  overflow:hidden; aspect-ratio:4/5;
}
.gal-item.wide{ flex-basis:clamp(320px,44vw,520px); aspect-ratio:4/3; }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gal-item:hover img{ transform:scale(1.05); }
.gal-nota{ font-size:.88rem; color:var(--muted); }

/* Aviso de que la galería se desplaza (2026-08-14).
   Antes: overflow-x sin barra visible ni flechas -> en escritorio se veían 3 fotos
   y media de 13 y nadie sabía que había más. La barra de progreso se ve siempre,
   también en móvil; las flechas solo en escritorio, donde no hay gesto de arrastre. */
.gal-controls{
  display:flex; align-items:center; gap:1.6rem;
  margin-top:1.1rem;
}
.gal-bar{
  flex:1; height:3px; border-radius:2px;
  background:var(--linea); overflow:hidden;
}
.gal-bar-fill{
  display:block; height:100%; width:0;
  background:var(--cobre); border-radius:2px;
  transition:width .12s linear;
}
.gal-track:focus-visible{ outline:2px solid var(--cobre); outline-offset:4px; }
@media (max-width:700px){
  /* .gal-controls .gal-nav, nicht nur .gal-nav: .rev-nav{display:flex} steht
     weiter unten in dieser Datei und gewinnt bei gleicher Spezifität. Mit dem
     Elternteil davor sticht die Regel — am Gerät nachgemessen. */
  .gal-controls .gal-nav{ display:none; }
  .gal-controls{ margin-top:.9rem; }
}

/* ---------- CTA final (banda oscura centrada) ---------- */
.reserva{
  position:relative; color:var(--crema); text-align:center; overflow:hidden;
  padding-block:clamp(5.5rem,11vw,8.5rem);
}
.reserva-bg{ position:absolute; inset:0; }
.reserva-bg img{ width:100%; height:100%; object-fit:cover; }
.reserva::after{ content:""; position:absolute; inset:0; background:rgba(27,23,20,.82); }
.reserva .wrap{ position:relative; z-index:2; }
.reserva h2{ color:#fff; text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
.reserva .lede{ color:rgba(244,239,230,.85); margin-inline:auto; }
.reserva-actions{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.2rem; margin-top:2.4rem; }

/* ---------- Footer (claro, estilo Tastyc) ---------- */
.site-footer{ background:var(--crema-2); color:var(--ink-suave); padding-block:3.6rem 5.6rem; }
.site-footer .ftop{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; }
.site-footer .fbrand{ display:flex; align-items:center; gap:.7rem; }
.site-footer .fbrand .flogo{ height:48px; width:auto; }
.site-footer .fbrand .name{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--ink); }
.site-footer .fsocial{ display:flex; gap:1rem; }
.site-footer .fsocial a{ color:var(--ink); opacity:.7; transition:opacity .2s ease, color .2s ease; }
.site-footer .fsocial a:hover{ opacity:1; color:var(--cobre); }
.site-footer .fsocial svg{ width:20px; height:20px; }
.fdiv{ border-top:1px dashed var(--linea-punteada); margin:2rem 0 2.6rem; }
.site-footer .cols{ display:grid; grid-template-columns:1.1fr 1.1fr .9fr; gap:clamp(2rem,4vw,3.5rem); }
.site-footer h3{ font-size:1.35rem; color:var(--ink); margin-bottom:1.1rem; }
.site-footer .cols p{ font-size:.95rem; }
.site-footer .flink{
  display:inline-block; margin-top:1rem; color:var(--cobre);
  font-family:var(--font-display); letter-spacing:.14em; text-transform:uppercase; font-size:.85rem;
}
.site-footer .flink:hover{ color:var(--cobre-claro); }
.fnap{ font-style:normal; font-size:.95rem; line-height:1.85; }
.fnap a:hover{ color:var(--cobre); }
.crow{ display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; font-size:.95rem; }
.crow .k{ font-weight:800; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); flex:none; padding-top:.2rem; }
.crow .v{ text-align:right; }
.crow .v a:hover{ color:var(--cobre); }
.fgal{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.fgal a{ aspect-ratio:1; overflow:hidden; display:block; }
.fgal img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.fgal a:hover img{ transform:scale(1.08); }
.fbottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.fbottom p{ font-size:.85rem; color:var(--muted); }
.fbottom .toplink{
  font-family:var(--font-display); letter-spacing:.14em; text-transform:uppercase;
  font-size:.85rem; color:var(--cobre);
}
.footer-credit{ font-size:.8rem; color:var(--muted); margin-top:.4rem; }
.footer-credit a{ text-decoration:underline; text-underline-offset:2px; }
.footer-credit a:hover{ color:var(--cobre); }
.footer-note-text{ font-size:.8rem; color:var(--muted); max-width:80ch; line-height:1.7; margin-top:1.2rem; }

/* ---------- Barra móvil ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:rgba(27,23,20,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--linea-oscura);
}
.mobile-bar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.2rem;
  padding:.65rem 0 calc(.65rem + env(safe-area-inset-bottom)); color:var(--crema);
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
}
.mobile-bar a svg{ width:20px; height:20px; color:var(--brasa); }
.mobile-bar a.destacado{ background:var(--cobre); color:#fff; }
.mobile-bar a.destacado svg{ color:#fff; }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:75;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{ transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.34); }
.wa-float svg{ width:30px; height:30px; }
@media (max-width:880px){ .wa-float{ right:14px; bottom:78px; width:54px; height:54px; } }

/* ---------- Aviso cookies ---------- */
.cookie-notice{
  position:fixed; left:16px; bottom:16px; z-index:80; max-width:430px;
  background:var(--carbon); color:var(--crema); box-shadow:0 16px 44px rgba(0,0,0,.4);
  padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.8rem;
}
.cookie-notice p{ font-size:.82rem; line-height:1.55; }
.cookie-notice a{ color:var(--brasa); text-decoration:underline; text-underline-offset:2px; }
.cookie-notice .btn{ align-self:flex-start; padding:.55rem 1.3rem; font-size:.8rem; }
.cookie-notice[hidden]{ display:none; }

/* ---------- Páginas legales ---------- */
.legal{ padding-block:clamp(3rem,6vw,5rem); }
.legal .wrap{ max-width:820px; }
.legal .back{ display:inline-flex; align-items:center; gap:.4rem; color:var(--cobre); font-weight:700; margin-bottom:1.6rem; }
.legal h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.6rem; }
.legal h2{ font-size:clamp(1.3rem,2vw,1.6rem); margin-top:2.2rem; margin-bottom:.5rem; }
.legal p, .legal li{ color:var(--ink-suave); margin-bottom:.6rem; }
.legal ul{ list-style:disc; padding-left:1.3rem; margin:0 0 1rem; }
.legal .updated{ color:var(--muted); font-size:.9rem; }
.legal a:not(.back){ color:var(--cobre); text-decoration:underline; text-underline-offset:2px; }
.legal .legal-nav{
  margin-top:3rem; padding-top:1.4rem; border-top:1px dashed var(--linea-punteada);
  font-size:.9rem; color:var(--muted);
}
.legal .pendiente{
  background:rgba(182,90,46,.1); border:1px dashed var(--cobre);
  padding:.4rem .7rem; font-size:.9rem; color:var(--madera); display:inline-block;
}

/* ---------- Hero interior (páginas) ---------- */
.page-hero{
  position:relative; background:var(--carbon); color:var(--crema); text-align:center;
  padding-block:clamp(4.5rem,9vw,7rem); overflow:hidden;
}
.page-hero .hero-rule{ width:34px; height:3px; background:var(--cobre-claro); margin:0 auto 1.1rem; }
.page-hero .hero-label{
  display:block; font-size:.78rem; font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  color:var(--crema); margin-bottom:1.6rem;
}
.page-hero h1{ color:#fff; text-transform:uppercase; letter-spacing:.05em; font-weight:500; font-size:clamp(2rem,4.6vw,3.6rem); }
.page-hero .lede{ color:rgba(244,239,230,.8); margin:1.2rem auto 0; }

/* Hero interior con foto de fondo (más aire arriba: el header es sticky y tapaba la regla) */
.page-hero.with-bg{ padding-top:clamp(6.5rem,11vw,9.5rem); }
.page-hero.with-bg .ph-bg{ position:absolute; inset:0; z-index:0; }
.page-hero.with-bg .ph-bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero.with-bg::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(27,23,20,.74); }
.page-hero.with-bg .wrap{ position:relative; z-index:2; }

/* Historia (sobre nosotros): columna fija + línea de tiempo */
.story .wrap{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2.4rem,6vw,5rem); align-items:start;
}
.story-aside{ position:sticky; top:104px; }
.story-aside h2{ font-size:clamp(1.7rem,3vw,2.4rem); }
.story-media{ overflow:hidden; aspect-ratio:4/5; margin-top:2rem; box-shadow:var(--shadow-sm); }
.story-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.story-media:hover img{ transform:scale(1.04); }
/* raíl vertical: el hilo que une los momentos */
.story-steps{ position:relative; list-style:none; padding-left:clamp(1.6rem,3vw,2.4rem); }
.story-steps::before{
  content:""; position:absolute; left:5px; top:.7em; bottom:.7em;
  width:1px; background:var(--linea-punteada);
}
.step{ position:relative; padding-bottom:clamp(2.2rem,4vw,3.2rem); }
.step:last-child{ padding-bottom:0; }
.step::before{
  content:""; position:absolute; left:calc(-1 * clamp(1.6rem,3vw,2.4rem) + 1px);
  top:.55em; width:11px; height:11px; border-radius:50%;
  background:var(--crema); border:2px solid var(--cobre);
}
.step h3{ font-size:clamp(1.35rem,2.3vw,1.85rem); margin-bottom:.45em; }
.step p{ color:var(--ink-suave); max-width:60ch; }

/* Cifras (solo datos verificados) */
.facts{ background:var(--carbon); color:var(--crema); }
.facts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.8rem,4vw,3rem); text-align:center; }
.fact{ padding-inline:1rem; }
.fact + .fact{ border-left:1px dashed var(--linea-oscura); }
.fact-num{ font-family:var(--font-display); font-size:clamp(2.6rem,5vw,4rem); line-height:1; color:#fff; }
.fact-label{ margin-top:.8rem; font-size:.95rem; color:rgba(244,239,230,.75); }
.facts-note{ margin-top:clamp(2rem,3.5vw,2.8rem); text-align:center; font-size:.78rem; color:rgba(244,239,230,.5); }

@media (max-width:900px){
  .story .wrap{ grid-template-columns:1fr; }
  .story-aside{ position:static; }
  .story-media{ aspect-ratio:16/10; }
}
@media (max-width:620px){
  .facts-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .fact + .fact{ border-left:none; border-top:1px dashed var(--linea-oscura); padding-top:2.2rem; }
}

/* Cita editorial */
.historia blockquote{
  position:relative; font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.1rem,1.8vw,1.35rem); color:var(--madera);
  padding-left:2.4rem; margin-top:1.8rem;
}
.historia blockquote::before{
  content:"\201C"; position:absolute; left:0; top:-.35em;
  font-family:var(--font-display); font-style:normal; font-size:3.2em;
  line-height:1; color:var(--cobre); opacity:.85;
}
.historia .wrap{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.historia-media{ overflow:hidden; aspect-ratio:4/3; }
.historia-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; margin-top:3rem; }
.cmethods{ display:grid; gap:0; border:1px dashed var(--linea-punteada); padding:1.4rem 1.6rem; background:var(--blanco); }
.cmethod{ display:block; }
.cmethod .crow{ border-bottom:1px dashed var(--linea-punteada); padding:.9rem 0; }
.cmethods > .cmethod:last-child .crow{ border-bottom:none; }
.chours{
  display:flex; gap:.8rem; align-items:flex-start; background:rgba(182,90,46,.09);
  padding:1.1rem 1.25rem; font-size:.95rem;
}
.chours svg{ width:22px; height:22px; color:var(--cobre); flex:none; margin-top:.15rem; }
.ubica-actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.lead-form{
  background:var(--blanco); border:1px dashed var(--linea-punteada);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.field{ margin-bottom:1rem; }
.field label{ display:block; font-weight:800; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.4rem; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-sans); font-size:1rem; color:var(--ink);
  background:var(--crema); border:1px solid var(--linea);
  padding:.85rem 1rem; transition:border-color .2s ease;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--cobre); outline-offset:1px; border-color:var(--cobre); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.consent{ margin:1.1rem 0 1.2rem; }
.consent-label{ display:flex; gap:.65rem; align-items:flex-start; font-size:.82rem; line-height:1.55; color:var(--muted); cursor:pointer; }
.consent-label input{ flex:none; width:1.05rem; height:1.05rem; margin-top:.15rem; accent-color:var(--cobre); cursor:pointer; }
.consent-label a{ color:var(--cobre); text-decoration:underline; }
.btn-block{ width:100%; }
.form-note{ font-size:.84rem; color:var(--muted); margin-top:.9rem; line-height:1.6; }
.form-aviso{
  background:rgba(182,90,46,.09); padding:.75rem 1rem;
  font-size:.86rem; color:var(--madera); margin-top:1rem;
}
.hpot{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }

/* ---------- Mapa (carga bajo demanda) ---------- */
.map-shell{
  margin-top:3rem; overflow:hidden; background:var(--carbon-2); color:var(--crema);
  min-height:360px; display:grid; place-items:center; text-align:center; padding:2rem;
}
.map-shell p{ color:rgba(244,239,230,.8); margin-bottom:1.2rem; max-width:46ch; }
.map-shell a{ color:var(--brasa); text-decoration:underline; text-underline-offset:2px; }
.map-shell iframe{ width:100%; height:420px; border:0; display:block; }
.map-shell.loaded{ padding:0; display:block; }

/* ---------- Carta (menú) ---------- */
.menu-wrap{ max-width:840px; }
.menu-sec{ margin-bottom:clamp(3rem,6vw,4.5rem); }
.menu-title{
  text-align:center; font-size:clamp(1.8rem,3.2vw,2.5rem); margin-bottom:1.8rem;
  position:relative; padding-bottom:1rem;
}
.menu-title::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:34px; height:3px; background:var(--cobre); }
.menu-sub{
  font-family:var(--font-sans); font-size:.85rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cobre); margin:2rem 0 1rem; text-align:center;
}
.menu-list li{ padding:.85rem 0; border-bottom:1px dashed var(--linea-punteada); }
.menu-list li:last-child{ border-bottom:none; }
.menu-list.compact li{ padding:.55rem 0; }
.mrow{ display:flex; align-items:baseline; gap:.7rem; }
.mname{ font-family:var(--font-display); font-weight:500; font-size:1.18rem; }
.mname small{ font-family:var(--font-sans); font-weight:400; font-size:.85rem; color:var(--muted); }
.mdots{ flex:1; border-bottom:1px dotted var(--linea-punteada); transform:translateY(-4px); }
.mprice{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--cobre); white-space:nowrap; }
.mdesc{ font-size:.92rem; color:var(--muted); margin-top:.25rem; max-width:56ch; }
.menu-nota{ font-size:.88rem; color:var(--muted); text-align:center; margin-top:1rem; }

/* ---------- Sobre nosotros (bloque editorial: imagen + texto) ---------- */
.about .about-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2.2rem,6vw,5.5rem); align-items:center;
}
.about-media{ position:relative; }
/* marco cobre desplazado: acento de marca, sin cargar la composición */
.about-media::after{
  content:""; position:absolute; left:-16px; bottom:-16px; width:46%; height:46%;
  border-left:2px solid var(--cobre); border-bottom:2px solid var(--cobre); z-index:0; pointer-events:none;
}
.about-ph{ position:relative; z-index:1; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); }
.about-ph img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.about-media:hover .about-ph img{ transform:scale(1.04); }
.about-text .lede + .lede{ margin-top:1.05rem; }
.about-actions{
  display:flex; align-items:center; gap:clamp(1.4rem,3vw,2.4rem);
  flex-wrap:wrap; margin-top:clamp(1.8rem,3vw,2.4rem);
}
.about-social{ display:flex; align-items:center; gap:1.1rem; }
.about-social a{ display:block; width:21px; height:21px; color:var(--muted); transition:color .25s ease, transform .25s ease; }
.about-social a:hover{ color:var(--cobre); transform:translateY(-2px); }
.about-social svg{ width:100%; height:100%; }
.about-div{ margin-top:clamp(3.2rem,7vw,5.5rem); border-bottom:1px dotted var(--linea-punteada); }
@media (max-width:900px){
  .about .about-grid{ grid-template-columns:1fr; }
  .about-media::after{ left:-10px; bottom:-10px; }
}

/* ---------- Platos con foto (fotos reales del restaurante) ---------- */
.dish-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,1.7rem); margin-top:clamp(2.2rem,4vw,3.2rem);
}
.dish-card{ background:var(--blanco); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.dish-ph{ overflow:hidden; aspect-ratio:4/5; }
.dish-ph img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.dish-card:hover .dish-ph img{ transform:scale(1.05); }
.dish-body{ padding:1.1rem 1.25rem 1.35rem; flex:1; }
.dish-row{ display:flex; align-items:baseline; gap:.7rem; }
.dish-name{ font-family:var(--font-display); font-weight:500; font-size:1.1rem; line-height:1.3; }
.dish-dots{ flex:1; border-bottom:1px dotted var(--linea-punteada); transform:translateY(-4px); }
.dish-price{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--cobre); white-space:nowrap; }
.dish-desc{ font-size:.88rem; color:var(--muted); margin-top:.35rem; line-height:1.55; }
.dish-nota{ font-size:.88rem; color:var(--muted); text-align:center; margin-top:1.6rem; }
@media (max-width:900px){ .dish-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .dish-grid{ grid-template-columns:1fr; } }

/* ---------- Reseñas (cabecera centrada + carrusel de tarjetas) ---------- */
.reviews{ background:var(--crema-2); --rev-gap:clamp(1rem,2vw,1.6rem); }
.rev-head{ max-width:760px; margin-inline:auto; }

/* Ficha del perfil de Google Business */
.rev-gbp{
  display:inline-flex; align-items:center; gap:1.1rem; text-align:left;
  margin-top:1.6rem; padding:1rem 1.5rem 1rem 1.2rem;
  background:var(--blanco); box-shadow:var(--shadow-sm);
}
.rg-flame{ height:44px; width:auto; flex:none; }
.rg-name{
  display:block; font-weight:800; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink);
}
.rg-row{ display:flex; align-items:baseline; gap:.6rem; margin-top:.25rem; flex-wrap:wrap; }
.rg-score{ font-family:var(--font-display); font-size:1.9rem; line-height:1; color:var(--ink); }
.rg-stars{ color:var(--cobre); font-size:.95rem; letter-spacing:.1em; }
.rg-count{ font-size:.92rem; color:var(--ink-suave); }
.rg-note{ font-size:.76rem; color:var(--muted); margin-top:.3rem; }

/* Carrusel */
.rev-track{
  display:flex; gap:var(--rev-gap); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  /* el carril recorta en vertical (overflow-x), así que reservamos aire
     para la sombra del hover en lugar de dejar que se corte */
  margin-top:clamp(1.8rem,3.2vw,2.6rem); padding:1rem .4rem 1.6rem; margin-inline:-.4rem;
}
.rev-track::-webkit-scrollbar{ display:none; }
.rev-track:focus-visible{ outline:2px solid var(--cobre); outline-offset:6px; }
.rev-card{
  flex:0 0 calc((100% - 2 * var(--rev-gap)) / 3); scroll-snap-align:start;
  background:var(--blanco); border:1px solid var(--linea);
  padding:clamp(1.6rem,2.6vw,2.2rem); display:flex; flex-direction:column; position:relative;
  transition:box-shadow .3s ease, transform .3s ease;
}
.rev-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.rc-mark{
  position:absolute; top:.55rem; right:1.2rem;
  font-family:var(--font-display); font-size:4.2rem; line-height:1;
  color:var(--cobre); opacity:.22; pointer-events:none;
}
.rc-stars{ color:var(--cobre); letter-spacing:.16em; font-size:.85rem; margin-bottom:.9rem; position:relative; min-height:1.3em; }
.rc-text{
  font-family:var(--font-display); font-style:italic; font-size:1.08rem;
  line-height:1.6; color:var(--ink); flex:1;
}
.rc-foot{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px dashed var(--linea-punteada);
}
.rc-avatar{
  flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--crema-2); color:var(--cobre);
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.05rem; line-height:1;
}
.rc-avatar-anon{ color:var(--muted); }
.rc-avatar svg{ width:20px; height:20px; }
.rc-name{ font-weight:700; font-size:.9rem; color:var(--ink); }
.rc-chip{
  margin-left:auto; font-size:.68rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  background:var(--crema-2); padding:.32rem .6rem;
}

/* Barra inferior: CTA · puntos · flechas */
.rev-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  flex-wrap:wrap; margin-top:clamp(2rem,3.5vw,2.8rem);
}
.rev-dots{ display:flex; gap:.55rem; }
.rev-dot{
  width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:var(--linea-punteada); transition:background .25s ease, transform .25s ease;
}
.rev-dot.is-active{ background:var(--cobre); transform:scale(1.25); }
.rev-nav{ display:flex; align-items:center; gap:.7rem; }
.rev-navlabel{
  font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-right:.3rem;
}
.rev-arrow{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--linea);
  background:var(--blanco); color:var(--ink); cursor:pointer;
  display:grid; place-items:center; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.rev-arrow svg{ width:18px; height:18px; }
.rev-arrow:hover:not(:disabled){ background:var(--cobre); border-color:var(--cobre); color:#fff; }
.rev-arrow:disabled{ opacity:.35; cursor:default; }
@media (max-width:980px){
  .rev-card{ flex-basis:calc((100% - var(--rev-gap)) / 2); }
}
@media (max-width:700px){
  .rev-card{ flex-basis:100%; }
  .rev-gbp{ display:flex; width:100%; }
  .rev-bottom{ justify-content:center; }
  .rev-bottom .btn{ order:3; width:100%; text-align:center; }
  .rev-dots{ order:1; }
  .rev-nav{ order:2; }
}

/* ---------- Reveals (Motion) ---------- */
.has-motion .reveal{ opacity:0; transform:translateY(24px); }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .why-grid{ grid-template-columns:1fr 1fr; }
  .nav{ gap:1.3rem; }
}
@media (max-width:880px){
  .zig .wrap, .hours .wrap, .historia .wrap, .contact-grid{ grid-template-columns:1fr; }
  .zig.flip .zig-media{ order:0; }
  .zig-text{ max-width:none; }
  .hours-card{ justify-self:start; max-width:none; }
  .site-footer .cols{ grid-template-columns:1fr; }
  .nav{
    position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--crema); border-bottom:1px solid var(--linea); padding:.5rem 1.2rem 1.3rem;
    transform:translateY(-140%); transition:transform .3s ease; box-shadow:var(--shadow);
  }
  .nav.open{ transform:none; }
  .nav a.navlink{ padding:.95rem 0; border-bottom:1px solid var(--linea); }
  .nav a.navlink::after{ display:none; }
  .header-phone{ display:none; }
  .nav-toggle{ display:block; }
  .mobile-bar{ display:flex; }
  body{ padding-bottom:64px; }
  .cookie-notice{ left:12px; right:12px; bottom:76px; max-width:none; }
}
@media (max-width:560px){
  .brand .tag{ display:none; }
  .brand .logo{ height:38px; }
  .header-cta .btn{ padding:.62rem 1rem; font-size:.78rem; }
  .why-grid{ grid-template-columns:1fr; }
  .hero{ min-height:80vh; }
  .hero-actions .btn, .reserva-actions .btn{ width:100%; }
  .hero-actions .btn-text, .reserva-actions .btn-text{ width:auto; }
  .field-row{ grid-template-columns:1fr; }
  .fgal{ grid-template-columns:repeat(3,1fr); }
  .site-footer .ftop{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero-bg img{ animation:none; }
  .hero-scroll::after{ animation:none; }
  .has-motion .reveal{ opacity:1 !important; transform:none !important; }
  *{ transition-duration:.01ms !important; }
}