/* =====================================================================
   SOCARRÓN · Asador familiar en Villa de Pozos · socarron.com.mx
   Sistema de diseño completo en un solo archivo (playbook Ji Group)
   Referencia estructural: rumbekeplatse.be · Identidad: manual DC&Co sep-2026
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Paleta del manual */
  --c-naranja:#E04312;
  --c-cafe:#392F2D;
  --c-vino:#852E2C;
  --c-beige:#F3E9DA;      /* Paleta B 'Papel' (Jorge, 27-sep-2026): base crema; el beige del manual pasa a superficies */
  --c-mostaza:#C28745;      /* muestreado del PDF, confirmar con DC&Co */
  --c-crema:#DDC0A5;        /* beige del manual: tarjetas, menú y superficies */
  --c-g1:#8D8D8C; --c-g2:#585857; --c-g3:#B6B5B5; --c-g4:#D9D9D9;
  --c-negro:#1A1614;
  /* Roles */
  --bg:var(--c-beige);
  --fg:var(--c-cafe);
  --acento:var(--c-naranja);
  --acento-texto:var(--c-vino);      /* acento legible sobre beige (5:1) */
  --c-naranja-tinta:#CC3A0E;         /* naranja de fondo para texto blanco pequeño (5:1) · QA 27-sep */
  --c-naranja-luz:#EB6437;           /* naranja para texto sobre café/foto oscura (≥3:1) · QA 27-sep */
  --linea:rgba(57,47,45,.35);
  /* Tipografía */
  /* Elegidas por Jorge 27-sep-2026: Bowlby One (títulos) + IBM Plex Mono (texto); Bebas Neue en etiquetas, nav y pie (manual) */
  --f-display:"Bowlby One",Impact,"Arial Black",sans-serif;
  --f-contraste:"Bowlby One",Impact,sans-serif;
  --f-label:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --f-texto:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --f-frase:"Covered By Your Grace","Brush Script MT",cursive;   /* frases manuscritas: Covered By Your Grace (Google Fonts, OFL) · Jorge 27-sep, sustituye a Sunset Script */
  --fs-h1:clamp(38px,6.1vw,112px);
  --fs-h2:clamp(34px,4.8vw,76px);
  --fs-h3:clamp(28px,3vw,40px);
  --fs-label:18px;
  --fs-texto:16px;
  --lh-display:.92;
  --ls-display:0;
  /* Layout (medidas de la referencia) */
  --container:1800px;
  --pad-x:5%;
  --gap:32px;
  --radio:24px;
  --marquee-h:35px;
  --header-h:112px;
  --btn-minw:280px;
  --btn-h:90px;
  --dur:.3s;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1024px){ :root{ --header-h:96px; --btn-h:76px; } }
@media (max-width:767px){ :root{ --header-h:84px; --btn-h:60px; --btn-minw:100%; --gap:24px; --fs-label:16px; } }

/* ---------- 2. FUENTES ---------- */
@font-face{ font-family:"Bebas Neue"; src:url("../assets/fonts/bebas-neue-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Covered By Your Grace"; src:url("../assets/fonts/covered-by-your-grace-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Bowlby One"; src:url("../assets/fonts/bowlby-one-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Andale Mono"; src:url("../assets/fonts/andale-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
/* PENDIENTE (cliente): Azo Super y Boheld con licencia web.
@font-face{ font-family:"Azo Super"; src:url("../assets/fonts/azo-super-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face{ font-family:"Boheld"; src:url("../assets/fonts/boheld-400.woff2") format("woff2"); font-weight:400; font-display:swap; } */

/* ---------- 3. RESET Y BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-texto); font-size:var(--fs-texto); line-height:1.35; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--c-cafe); color:var(--c-beige); }
.sec--cafe ::selection, .hero ::selection{ background:var(--c-beige); color:var(--c-cafe); }
:focus-visible{ outline:3px solid var(--c-naranja); outline-offset:3px; border-radius:6px; }
::-webkit-scrollbar{ width:0; height:0; }
main:focus{ outline:none; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:8px; z-index:9999; background:var(--c-cafe); color:var(--c-beige); padding:10px 16px; }
.skip:focus{ left:8px; }

/* ---------- 4. TIPOGRAFÍA ---------- */
.display, h1, h2{ font-family:var(--f-display); text-transform:uppercase; line-height:var(--lh-display); letter-spacing:var(--ls-display); }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-family:var(--f-label); font-size:var(--fs-h3); text-transform:uppercase; line-height:.95; letter-spacing:.01em; }
.contraste{ font-family:var(--f-contraste); color:var(--c-naranja); display:inline-block; }
.label{ font-family:var(--f-label); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.04em; line-height:1; }
.texto{ font-size:var(--fs-texto); line-height:1.45; }
.texto--grande{ font-size:clamp(18px,1.6vw,22px); line-height:1.4; }
.mayus{ text-transform:uppercase; }
.naranja{ color:var(--c-naranja); }
.vino{ color:var(--c-vino); }
.hover-underline a, a.hover-underline{ background-image:linear-gradient(currentColor,currentColor); background-position:left bottom; background-repeat:no-repeat; background-size:0 1px; transition:background-size var(--dur) ease; }
.hover-underline a:hover, a.hover-underline:hover{ background-size:100% 1px; }

/* ---------- 5. LAYOUT ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad-x); }
.sec{ position:relative; padding-block:clamp(64px,8vw,128px); }
.sec--cafe{ background:var(--c-cafe); color:var(--c-beige); }
.sec--naranja{ background:var(--c-naranja); color:var(--c-cafe); }
.sec--crema{ background:var(--c-crema); }
.sec--cafe .contraste{ color:var(--c-naranja); }
.sec--naranja .contraste{ color:var(--c-cafe); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; }
@media (max-width:1024px){ .grid-2{ grid-template-columns:1fr; } }
.eyebrow{ font-family:var(--f-label); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.08em; color:var(--acento-texto); margin-bottom:16px; }
.sec--cafe .eyebrow{ color:var(--c-crema); }

/* ---------- 6. BOTONES (calcomanía: texto recortado con contorno blanco, decisión de Jorge 27-sep) ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.35em; padding:8px 4px; min-height:44px; border:0; border-radius:0; background:none; font-family:var(--f-display); font-size:clamp(22px,2vw,30px); letter-spacing:.01em; text-transform:uppercase; line-height:1; text-align:center; color:var(--c-cafe); -webkit-text-stroke:6px #fff; paint-order:stroke fill; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); transition:transform var(--dur) var(--ease), color var(--dur); will-change:transform; cursor:pointer; }
.btn:hover{ transform:translateY(-2px) scale(1.04); }
.btn:active{ transform:scale(.98); }
.btn svg{ width:.8em; height:.8em; flex:none; filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff); }
/* Variantes: solo cambian el color de relleno */
.btn--naranja, .btn--relleno{ color:var(--c-naranja); }
.btn--beige, .btn--cafe, .btn--relleno-cafe{ color:var(--c-cafe); }
.btn--naranja:hover, .btn--relleno:hover{ color:var(--c-naranja); }
.btn--beige:hover, .btn--cafe:hover, .btn--relleno-cafe:hover{ color:var(--c-cafe); }
.btn--chico{ font-size:clamp(17px,1.4vw,20px); -webkit-text-stroke:4.5px #fff; }
.btn--chico svg{ width:.85em; height:.85em; }
.btns{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 36px; }
.hero .btns{ gap:40px; justify-content:center; }
@media (max-width:767px){ .btns{ gap:14px 28px; } .btn{ font-size:24px; -webkit-text-stroke:5px #fff; } .btn--chico{ font-size:18px; -webkit-text-stroke:4px #fff; } .hero .btns{ flex-direction:row; justify-content:center; gap:28px; } }

/* Píldora de precio / etiqueta */
.pill{ display:inline-flex; align-items:center; justify-content:center; min-width:84px; padding:7px 14px; border:1px solid currentColor; border-radius:999px; font-family:var(--f-display); font-size:14px; letter-spacing:.01em; line-height:1; white-space:nowrap; }
.pill--relleno{ background:var(--c-naranja); color:var(--c-cafe); border-color:var(--c-naranja); }
.tag{ display:inline-block; padding:3px 8px; border-radius:999px; background:var(--c-naranja-tinta); color:#fff; font-family:var(--f-texto); font-size:12px; letter-spacing:.04em; text-transform:uppercase; line-height:1.2; white-space:nowrap; margin:0; }
.tag--vino{ background:var(--c-vino); color:#fff; }
.tag--mostaza{ background:var(--c-vino); color:#fff; }

/* ---------- 7. MARQUESINAS (CSS puro, sustituye Slick/track) ---------- */
.marquee{ width:100%; overflow:hidden; white-space:nowrap; transform:translateZ(0); }
.marquee__track{ display:inline-flex; align-items:center; gap:var(--gap); animation:marquee-left 40s linear infinite; }
.marquee--reverse .marquee__track{ animation-direction:reverse; }
.marquee--cards{ padding-block:28px; } /* aire para que las tarjetas giradas no se corten arriba/abajo */
.marquee--cards .marquee__track{ animation-duration:45s; align-items:flex-start; }
/* Móvil/tablet: en vez de marquesina, carrusel nativo que se desliza con el dedo (Jorge, 27-sep) */
@media (max-width:1024px){
  .marquee--cards{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .marquee--cards::-webkit-scrollbar{ display:none; }
  .marquee--cards .marquee__track{ animation:none; display:flex; width:max-content; padding-inline:var(--pad-x); }
  .marquee--cards .tarjeta{ scroll-snap-align:center; }
  .marquee--cards .tarjeta--copia{ display:none; }
}
@keyframes marquee-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Marquesina de estado (arriba del header) */
.estado{ display:flex; align-items:center; height:var(--marquee-h); padding:0; background:var(--c-naranja-tinta); color:#fff; font-family:var(--f-display); font-size:14px; line-height:1; letter-spacing:.02em; text-transform:uppercase; }
.estado .marquee__track{ height:var(--marquee-h); }
.estado .marquee__track span{ display:inline-block; line-height:1; padding-top:1px; }
.estado .marquee__track span::after{ content:"·"; margin-left:var(--gap); opacity:.7; }
.estado--cerrado{ background:var(--c-vino); color:var(--c-beige); }

/* ---------- 8. HEADER / NAV ---------- */
.site-header{ position:sticky; top:0; z-index:50; height:var(--header-h); background:transparent; color:var(--c-beige); }
/* El header ocupa siempre la misma altura en el flujo (no brinca el contenido); lo que se encoge es el fondo pintado y la barra */
.site-header::before{ content:""; position:absolute; left:0; right:0; top:0; height:100%; background:transparent; z-index:-1; transition:background-color .35s var(--ease), height .35s var(--ease), box-shadow .35s; }
.site-header.solido::before{ background:var(--c-cafe); height:58px; box-shadow:0 8px 30px rgba(26,22,20,.25); }
.site-header.sin-hero{ height:58px; } /* páginas sin héroe: el header mide lo que se pinta, sin franja */
@media (max-width:767px){ .site-header.sin-hero{ height:52px; } }
/* Al deslizar: barra delgada y logo mucho más chico */
.site-header__bar{ transition:min-height .35s var(--ease), padding .35s var(--ease); }
.site-header__logo img{ transition:height .35s var(--ease); }
.site-header.solido .site-header__bar{ min-height:58px; height:58px; padding-block:4px; }
.site-header__bar{ align-items:center; }
.site-header.solido .site-header__logo img{ height:22px; }
.site-header.solido .nav__links{ font-size:15px; }
.site-header.solido .nav__cta{ font-size:16px; }
.site-header__bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap); min-height:var(--header-h); padding-block:8px; }
.site-header__logo img{ height:44px; width:auto; }
@media (max-width:767px){ .site-header__logo img{ height:34px; } .site-header.solido .site-header__logo img{ height:20px; } .site-header.solido .site-header__bar{ min-height:52px; height:52px; } .site-header.solido::before{ height:52px; } }
.nav{ display:flex; align-items:center; gap:36px; }
.nav__panel{ display:contents; }
.nav__panel-top, .nav__panel-pie{ display:none; }
.nav__links{ display:flex; gap:26px; font-family:var(--f-display); font-size:17px; text-transform:uppercase; letter-spacing:.01em; }
/* Enlaces del nav como calcomanía: relleno café + contorno blanco (funciona sobre foto y sobre header sólido) */
.nav__links a, .nav__cta{ color:var(--c-cafe); -webkit-text-stroke:5px #fff; paint-order:stroke fill; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.nav__links a{ padding:4px 2px; transition:transform var(--dur), color var(--dur); display:inline-block; }
.nav__links a:hover{ transform:translateY(-2px) scale(1.05); }
.nav__links a[aria-current="page"]{ color:var(--c-naranja); }
.nav__cta{ font-size:19px; color:var(--c-naranja)!important; -webkit-text-stroke:5px #fff; }
.nav__cta:hover{ background:none; color:var(--c-naranja); transform:translateY(-2px) scale(1.05); }
.nav__cta svg{ width:.85em; height:.85em; filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff); }
.nav__toggle{ display:none; width:48px; height:48px; align-items:center; justify-content:center; border:0; border-radius:0; background:none; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after{ filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)); }
.nav__toggle span{ display:block; width:26px; height:3px; border-radius:2px; background:currentColor; position:relative; transition:transform var(--dur); }
.nav__toggle span::before, .nav__toggle span::after{ content:""; position:absolute; left:0; width:26px; height:3px; border-radius:2px; background:currentColor; transition:transform var(--dur), top var(--dur); }
.nav__toggle span::before{ top:-8px; } .nav__toggle span::after{ top:8px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
@media (max-width:1024px){
  .nav__toggle{ display:inline-flex; }
  .nav__cta{ display:none; }
  .nav__panel{ display:flex; flex-direction:column; position:fixed; inset:0; z-index:70; background:var(--c-cafe); color:var(--c-beige); padding:env(safe-area-inset-top, 0) 24px calc(32px + env(safe-area-inset-bottom, 0)); opacity:0; visibility:hidden; transform:translateY(-14px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; overflow:auto; }
  .nav.is-open .nav__panel{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .nav__panel-top{ display:flex; align-items:center; justify-content:space-between; min-height:64px; flex:none; padding-top:6px; }
  .nav__panel-logo img{ height:24px; width:auto; }
  .nav__cerrar{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; margin-right:-6px; border-radius:50%; outline-offset:6px; }
  .nav__cerrar:focus:not(:focus-visible){ outline:none; }
  .nav__cerrar span{ position:relative; display:block; width:28px; height:3px; background:transparent; }
  .nav__cerrar span::before, .nav__cerrar span::after{ content:""; position:absolute; left:0; top:0; width:28px; height:3px; border-radius:2px; background:var(--c-beige); }
  .nav__cerrar span::before{ transform:rotate(45deg); } .nav__cerrar span::after{ transform:rotate(-45deg); }
  .nav__links{ position:static; display:flex; flex-direction:column; justify-content:center; gap:0; flex:1; background:none; padding:24px 0; border:0; box-shadow:none; max-height:none; overflow:visible; }
  .nav__links li{ opacity:0; transform:translateY(16px); }
  .nav.is-open .nav__links li{ animation:nav-entra .45s var(--ease) both; animation-delay:calc(.12s + var(--i, 0) * 70ms); }
  .nav__links a{ display:block; padding:12px 4px; font-size:clamp(34px,9vw,52px); line-height:1.05; border:0; -webkit-text-stroke:0; filter:none; color:var(--c-beige); }
  .nav__links a[aria-current="page"]{ color:var(--c-naranja); }
  .nav__panel-pie{ display:flex; flex-direction:column; gap:18px; flex:none; opacity:0; }
  .nav.is-open .nav__panel-pie{ animation:nav-entra .45s var(--ease) both; animation-delay:.5s; }
  .nav__panel-cta{ align-self:flex-start; }
  .nav__redes{ display:flex; flex-wrap:wrap; gap:6px 24px; }
  .nav__redes .btn{ color:var(--c-beige); -webkit-text-stroke:4px var(--c-naranja); }
}
@keyframes nav-entra{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ---------- 9. HÉROE con stickers ---------- */
.hero{ position:relative; margin-top:calc(-1 * var(--header-h)); padding-top:var(--header-h); min-height:calc(100vh - var(--marquee-h)); min-height:calc(100dvh - var(--marquee-h)); display:flex; flex-direction:column; justify-content:center; overflow:clip; background:var(--c-cafe); color:var(--c-beige); }
.hero::before{ content:""; position:absolute; inset:0; background:rgba(57,47,45,.72); z-index:1; } /* capa café sólida sobre la foto (sin degradados) */
/* Fondos del héroe: 4 fotos que se alternan con zoom lento (lugar DSC09993, chef con papas DSC00045, cortando carne DSC00058, mollejas DSC00082), distintas a las del cierre · Jorge 27-sep */
.hero__fondos{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__fondos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; opacity:0; transform:scale(1); animation:hero-zoom 32s ease-in-out infinite; will-change:opacity,transform; }
.hero__fondos img:nth-child(2){ animation-delay:8s; } .hero__fondos img:nth-child(3){ animation-delay:16s; } .hero__fondos img:nth-child(4){ animation-delay:24s; }
@keyframes hero-zoom{ 0%{ opacity:0; transform:scale(1); } 6%{ opacity:1; } 25%{ opacity:1; transform:scale(1.1); } 32%{ opacity:0; transform:scale(1.12); } 100%{ opacity:0; transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .hero__fondos img{ animation:none; } .hero__fondos img:first-child{ opacity:1; } }
.hero__inner{ position:relative; z-index:3; text-align:center; padding-block:clamp(24px,5vh,96px); display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.6vh,36px); flex:1; justify-content:center; }
.hero__titulo{ max-width:12ch; width:fit-content; margin-inline:auto; }
.hero__titulo .contraste{ display:block; color:var(--c-naranja-luz); } /* sobre la capa café la tinta normal queda en 2.5:1 */
.hero__texto{ max-width:44ch; width:fit-content; margin-inline:auto; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(15px,1.3vw,19px); }
.hero__pie{ display:flex; justify-content:space-between; gap:16px; padding-block:18px; font-family:var(--f-label); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.06em; position:relative; z-index:3; }
.sticker-wrap{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:clip; }
.sticker{ position:absolute; display:flex; align-items:center; justify-content:center; width:7.5vw; max-width:7rem; height:9vw; max-height:8.4rem; pointer-events:auto; cursor:grab; user-select:none; -webkit-user-drag:none; }
@media (min-width:1025px){ .sticker{ touch-action:none; } } /* solo donde se arrastran */
.sticker:active{ cursor:grabbing; }
.sticker img{ width:100%; height:100%; object-fit:contain; pointer-events:none;
  /* borde blanco tipo calcomanía troquelada: sombras sólidas apiladas sobre el recorte + sombra suave */
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff) drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.sticker--sin-borde img{ filter:none; }
.sticker.stk--blanco img{ filter:brightness(0) invert(1) opacity(.95); }
.sticker.is-1{ top:36%; left:9%; transform:rotate(-8deg); }
.sticker.is-2{ top:4%; right:34%; transform:rotate(-14deg); }
.sticker.is-3{ top:56%; left:14%; transform:rotate(-24deg); }
.sticker.is-4{ bottom:9%; left:5%; transform:rotate(12deg); }
.sticker.is-5{ top:9%; left:18%; transform:rotate(12deg); }
.sticker.is-6{ bottom:32%; right:33%; }
.sticker.is-7{ top:54%; right:8%; transform:rotate(-10deg); }
.sticker.is-8{ bottom:14%; right:-2%; transform:rotate(8deg); }
.sticker.is-9{ top:21%; right:10%; transform:rotate(-14deg); }
.sticker.is-10{ bottom:26%; left:24%; transform:rotate(22deg); }
.sticker.is-11{ bottom:8%; right:24%; transform:rotate(-10deg); }
@media (max-width:1024px){ .sticker{ width:13vw; height:15.5vw; } .sticker.is-1{ left:7%; } .sticker.is-9{ right:8%; } .sticker.is-7{ right:7%; } }
@media (max-width:767px){
  .sticker{ width:19vw; height:22vw; } .sticker.is-1{ top:16%; left:8%; } .sticker.is-9{ top:14%; right:8%; } .sticker.is-7{ top:auto; bottom:4%; right:auto; left:8%; width:17vw; height:20vw; } /* más hacia el centro (Jorge, 27-sep); abajo a la izquierda para no chocar con el botón de WhatsApp */
  .sticker.is-4, .sticker.is-5, .sticker.is-6{ display:none; }
  .hero__pie{ flex-direction:column; align-items:center; text-align:center; gap:6px; }
}

/* Ajustes QA móvil 2 (27-sep): pantallas muy chicas y solapes con el botón flotante */
@media (max-width:360px){
  .sticker{ width:15vw; height:18vw; } .sticker.is-1{ top:11%; } .sticker.is-9{ top:10%; } .sticker.is-7{ display:none; }
  body .site-footer__creditos{ font-size:11px; letter-spacing:0; }
  body .pagina h1{ font-size:clamp(32px,11vw,40px); } /* "body" para ganar a las reglas generales que vienen después */
  body .pagina h2{ font-size:26px; overflow-wrap:anywhere; }
}
@media (max-width:1024px) and (max-height:620px){ .hero .sticker{ display:none; } } /* pantallas muy bajas: los stickers chocarían con el título */
@media (max-width:1024px) and (max-height:640px){ .hero{ padding-bottom:84px; } } /* que el botón flotante no tape los CTA en pantallas bajas */
body:has(.cc-banner.is-visible) .wa-flotante, body:has(.nav.is-open) .wa-flotante, body:has(.cc-modal.is-open) .wa-flotante{ visibility:hidden; } /* el flotante no se encima al banner, al modal ni al menú abierto */
.p404 .sticker-404 img{ filter:brightness(0) invert(1); } /* sticker legible sobre café */

/* ---------- 9c. PÁGINA DE EVENTOS ---------- */
.hero--eventos{ background:var(--c-cafe) url("../assets/img/hero/hero-fondo-eventos.webp") center 40% / cover no-repeat; }
.hero--eventos .hero__titulo, .hero--eventos .hero__texto{ color:#fff; }
.hero--eventos .sticker.is-1{ top:30%; left:8%; } .hero--eventos .sticker.is-7{ top:52%; right:8%; }
@media (max-width:767px){ .hero--eventos .sticker.is-7{ display:none; } .hero--eventos .sticker.is-1{ top:18%; left:8%; width:16vw; height:19vw; } }
.bloques__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.bloque{ border-radius:var(--radio); padding:18px 18px 26px; display:flex; flex-direction:column; gap:14px; }
.bloque--naranja{ background:var(--c-naranja); color:#fff; } .bloque--cafe{ background:var(--c-cafe); color:#fff; } .bloque--vino{ background:var(--c-vino); color:#fff; }
.bloque__foto{ aspect-ratio:4/3; border-radius:calc(var(--radio) - 8px); overflow:hidden; } .bloque__foto img{ width:100%; height:100%; object-fit:cover; }
.bloque h3{ font-family:var(--f-display); font-size:clamp(22px,1.9vw,28px); line-height:1; text-transform:uppercase; }
.bloque p{ font-size:15px; line-height:1.45; color:#fff; }
.pasos__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.paso{ display:flex; flex-direction:column; gap:10px; }
.paso__num{ font-family:var(--f-display); font-size:clamp(72px,8vw,128px); line-height:.85; color:var(--c-naranja); -webkit-text-stroke:6px #fff; paint-order:stroke fill; filter:drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.paso h3{ font-family:var(--f-display); font-size:clamp(22px,1.9vw,28px); text-transform:uppercase; line-height:1; }
.paso p{ line-height:1.45; max-width:34ch; }
.cotizar__form{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px 24px; }
.cotizar .campo input, .cotizar .campo select, .cotizar .campo textarea{ background:var(--c-beige); border-color:transparent; }
.cotizar .campo select{ background-color:var(--c-beige); }
.cotizar, .cotizar .texto, .cotizar .campo label{ color:#fff; }
.cotizar .eyebrow{ color:var(--c-crema); }
.campo--full{ grid-column:1/-1; }
.cotizar__pie{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:8px; }
.pendiente-txt{ opacity:.7; }
@media (max-width:1024px){ .bloques__grid, .pasos__grid{ grid-template-columns:1fr; } .cotizar__form{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cotizar__form{ grid-template-columns:1fr; } }

/* Facturación: dos opciones numeradas */
.opcion__grid{ display:grid; grid-template-columns:140px 1fr; gap:var(--gap); align-items:start; }
.opcion .paso__num{ font-size:clamp(80px,9vw,140px); }
.campo input[type=file]{ height:auto; padding:12px 16px; }
.campo input[type=file]::file-selector-button{ font-family:var(--f-display); text-transform:uppercase; font-size:13px; border:0; border-radius:999px; padding:8px 14px; margin-right:12px; background:var(--c-cafe); color:#fff; cursor:pointer; }
@media (max-width:767px){ .opcion__grid{ grid-template-columns:1fr; gap:8px; } }

/* ---------- 10. SECCIÓN "ASÍ SE COCINA AQUÍ" (fotos que giran) ---------- */
.cocina{ padding-block:clamp(72px,9vw,140px); }
.cocina__fotos{ position:relative; display:flex; justify-content:center; align-items:flex-start; gap:0; min-height:520px; }
.cocina__foto{ width:min(364px,42%); aspect-ratio:364/482; border-radius:var(--radio); overflow:hidden; box-shadow:0 30px 60px rgba(57,47,45,.18); background:var(--c-g4); }
.cocina__foto img{ width:100%; height:100%; object-fit:cover; }
.cocina__foto--izq{ position:relative; z-index:1; margin-top:0; }
.cocina__foto--der{ position:relative; z-index:2; margin-top:80px; margin-left:-8%; }
.cocina__texto{ display:flex; flex-direction:column; gap:24px; }
.cocina__cita, .frase{ font-family:var(--f-frase); text-transform:none; font-size:clamp(30px,3vw,46px); line-height:1.25; color:var(--c-vino); }
/* Efecto de escritura: cada letra aparece en orden (animaciones.js) */
.frase--escribir .pal{ display:inline-block; white-space:nowrap; }
.frase--escribir .ch{ display:inline-block; opacity:0; transform:translateY(4px) rotate(-3deg); }
.frase--escribir.is-escrita .ch{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .frase--escribir .ch{ opacity:1; transform:none; } }
@media (max-width:1024px){ .cocina__fotos{ min-height:0; margin-bottom:24px; } }
@media (max-width:480px){ .cocina__foto--der{ margin-top:48px; } }

/* ---------- 11. FRANJA de texto grande ---------- */
.franja{ padding-block:clamp(40px,6vw,96px); text-align:center; }
.franja__texto{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(40px,6vw,96px); line-height:.9; max-width:18ch; margin-inline:auto; }

/* ---------- 12. TARJETAS en marquesina (platillos héroe) ---------- */
.tarjetas{ padding-block:clamp(48px,6vw,96px) clamp(64px,8vw,128px); overflow:hidden; }
.tarjetas__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; }
.tarjeta{ flex:none; white-space:normal; width:min(420px,80vw); background:var(--c-naranja); color:#fff; border-radius:var(--radio); padding:20px; display:flex; flex-direction:column; gap:12px; transform:rotate(var(--rot,0deg)); }
.tarjeta:nth-child(even){ --rot:2deg; } .tarjeta:nth-child(odd){ --rot:-2deg; }
.tarjeta--cafe{ background:var(--c-cafe); color:#fff; }
.tarjeta--vino{ background:var(--c-vino); color:#fff; }
.tarjeta__foto{ aspect-ratio:4/3; border-radius:calc(var(--radio) - 8px); overflow:hidden; background:rgba(0,0,0,.12); }
.tarjeta__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.tarjeta:hover .tarjeta__foto img{ transform:scale(1.05); }
.tarjeta__nombre{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(18px,1.5vw,23px); line-height:1; min-height:2em; display:flex; align-items:flex-start; }
.tarjeta__desc{ font-size:15px; line-height:1.4; text-transform:uppercase; letter-spacing:.01em; }
.tarjeta__pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }

/* ---------- 13. MENÚ (previa en home y página /menu/) ---------- */
.menu-prev{ padding-block:clamp(64px,8vw,128px); }
.menu-prev__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:48px; }
.menu-lista{ display:grid; gap:0; }
.menu-item{ display:grid; grid-template-columns:1fr auto; grid-template-areas:"nombre precio" "desc desc"; align-items:center; column-gap:16px; padding:18px 0; border-bottom:1px dotted var(--linea); }
.menu-item__nombre{ grid-area:nombre; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-family:var(--f-display); font-size:clamp(16px,1.25vw,19px); text-transform:uppercase; letter-spacing:.01em; line-height:1.05; }
.menu-item__precio{ grid-area:precio; }
.menu-item__desc{ grid-area:desc; font-size:14px; line-height:1.4; margin-top:6px; opacity:.85; }
.menu-item--pendiente .menu-item__precio{ opacity:.5; }
.menu-cat{ margin-bottom:56px; break-inside:avoid; }
.menu-cat__head{ display:flex; align-items:center; gap:16px; margin-bottom:8px; }
.menu-cat__icono{ display:none; }
.menu-cat__titulo{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(30px,3.4vw,50px); line-height:.95; }
.menu-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 calc(var(--gap) * 2); align-items:start; }
.menu-col{ min-width:0; }
@media (max-width:1024px){ .menu-cols{ grid-template-columns:1fr; } }
.especial{ background:var(--c-naranja); color:#fff; border-radius:var(--radio); padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:14px; margin-bottom:48px; }
.especial .contraste{ color:var(--c-cafe); }

/* Página de menú */
.menu-page{ --c-papel:#FBF8F3; background:var(--c-papel); min-height:100vh; }
.menu-page .site-header{ position:sticky; top:0; }
.pagina-clara{ --c-papel:#FBF8F3; background:var(--c-papel); }
.pagina-clara .sec--crema{ background:var(--c-crema); }
.menu-tabs{ position:sticky; top:58px; z-index:40; background:var(--c-papel); border-bottom:1px solid var(--linea); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.menu-tabs ul{ display:flex; gap:8px; padding:12px var(--pad-x); min-width:max-content; }
.menu-tabs a{ display:inline-block; padding:10px 18px; border:1px solid var(--linea); border-radius:999px; font-family:var(--f-display); font-size:14px; letter-spacing:.01em; text-transform:uppercase; white-space:nowrap; transition:background var(--dur), color var(--dur); }
.menu-tabs a:hover, .menu-tabs a.is-active{ background:var(--c-cafe); color:var(--c-beige); border-color:var(--c-cafe); }
.reservar__form .btn, .cc-modal .btn{ justify-self:start; }
.menu-hero{ padding-block:clamp(40px,6vw,80px) clamp(24px,3vw,40px); }
.menu-hero h1{ font-size:clamp(48px,7vw,112px); }
.menu-aviso{ background:var(--c-cafe); color:var(--c-beige); border-radius:var(--radio); padding:18px 22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-block:24px 40px; }
.menu-aviso[hidden]{ display:none; }
.menu-cat{ scroll-margin-top:calc(58px + 24px); }
.menu-page .menu-cat__titulo{ font-size:clamp(24px,2.9vw,42px); overflow-wrap:anywhere; } /* más chico para que "Acompañamientos" quepa en una línea (Jorge, 27-sep) */
.menu-nota{ font-size:14px; opacity:.8; margin-top:24px; }

/* ---------- 14. EL LUGAR (foto grande + texto) ---------- */
.lugar{ padding-block:clamp(72px,9vw,140px); overflow:hidden; }
.lugar__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap); align-items:center; }
.lugar__foto{ position:relative; border-radius:var(--radio); overflow:hidden; aspect-ratio:628/895; max-height:895px; box-shadow:0 40px 80px rgba(57,47,45,.2); background:var(--c-g4); }
.lugar__foto img{ width:100%; height:100%; object-fit:cover; }
.lugar__texto{ display:flex; flex-direction:column; gap:24px; }
.lugar__linea{ font-family:var(--f-display); font-size:clamp(15px,1.2vw,18px); text-transform:uppercase; color:var(--c-vino); line-height:1.4; }
.lugar__lista{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.lugar__lista li{ display:flex; gap:10px; align-items:flex-start; font-family:var(--f-label); font-size:20px; text-transform:uppercase; letter-spacing:.03em; line-height:1.1; }
.lugar__lista li::before{ content:""; flex:none; width:14px; height:14px; margin-top:3px; border-radius:50%; background:var(--c-naranja); }
.lugar__lista li.pendiente{ opacity:.55; }
@media (max-width:1024px){ .lugar__grid{ grid-template-columns:1fr; } .lugar__foto{ max-height:70vh; aspect-ratio:4/5; } }

/* ---------- 15. RESEÑAS (scrub, patrón de la referencia) ---------- */
.resenas{ padding-block:clamp(72px,9vw,140px); overflow:clip; }
.resenas__grid{ display:grid; grid-template-columns:minmax(260px,.9fr) 1.4fr; gap:var(--gap); align-items:start; }
.resenas__titulo{ position:sticky; top:calc(var(--header-h) + 40px); display:flex; flex-direction:column; gap:18px; }
.resenas__titulo h2{ font-size:clamp(40px,5.5vw,96px); }
.resenas__icono{ width:120px; height:auto; }
.resenas__lista{ display:flex; flex-direction:column; gap:clamp(48px,7vw,120px); padding-block:40px; }
.resena{ width:min(620px,100%); background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-radius:var(--radio); padding:32px; display:flex; flex-direction:column; gap:18px; will-change:transform; }
.resena:nth-child(even){ align-self:flex-end; }
.resena:nth-child(odd){ margin-left:-18%; }
.resena__estrellas{ color:var(--acento-texto); font-size:22px; letter-spacing:3px; line-height:1; }
.resena__texto{ font-family:var(--f-texto); font-size:16px; line-height:1.4; text-transform:uppercase; letter-spacing:.01em; }
.resenas__fuente{ font-family:var(--f-frase); font-size:clamp(32px,3vw,46px); text-transform:none; letter-spacing:0; color:var(--c-vino); margin-top:4px; }
.resena__autor{ font-family:var(--f-label); font-size:18px; text-transform:uppercase; letter-spacing:.06em; color:var(--c-g2); }
@media (max-width:1024px){ .resenas__grid{ grid-template-columns:1fr; } .resenas__titulo{ position:static; } .resena:nth-child(odd){ margin-left:0; } .resena:nth-child(even){ align-self:flex-end; } }
@media (max-width:767px){ .resena{ width:100%; padding:24px; } .resena:nth-child(even){ align-self:stretch; } }

/* ---------- 16. HORARIOS Y UBICACIÓN ---------- */
.ubicacion{ padding-block:clamp(56px,7vw,110px); }
.ubicacion--clara{ background:var(--c-papel,#FBF8F3); color:var(--c-cafe); }
.ubicacion--clara .eyebrow{ color:var(--c-vino); }
.ubicacion--clara .horarios{ border-color:var(--c-naranja); }
.ubicacion--clara .horarios li.is-hoy, .ubicacion--clara .horarios__titulo{ color:var(--acento-texto); }
.ubicacion__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
.horarios{ border:1px solid var(--c-naranja); border-radius:var(--radio); padding:clamp(20px,2.5vw,32px); }
.horarios__titulo{ font-family:var(--f-label); font-size:18px; text-transform:uppercase; letter-spacing:.08em; color:var(--acento-texto); margin-bottom:12px; }
.horarios li{ display:flex; align-items:baseline; gap:12px; padding:10px 0; font-family:var(--f-label); font-size:20px; text-transform:uppercase; letter-spacing:.03em; }
.horarios li::after{ content:""; order:2; flex:1; border-bottom:1px dotted currentColor; opacity:.5; transform:translateY(-4px); }
.horarios li span:last-child{ order:3; white-space:nowrap; }
.horarios li.is-hoy{ color:var(--acento-texto); }
.horarios li.is-cerrado span:last-child{ color:var(--c-naranja); }
.mapa{ position:relative; border-radius:var(--radio); overflow:hidden; aspect-ratio:4/3; background:var(--c-vino); display:flex; align-items:center; justify-content:center; text-align:center; }
.mapa img, .mapa iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.mapa--foto::before{ content:""; position:absolute; inset:0; background:rgba(57,47,45,.55); z-index:1; }
.mapa--foto .mapa__cta{ z-index:2; }
.mapa__cta{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px; }
.mapa__cta p{ font-family:var(--f-label); font-size:20px; color:var(--c-beige); text-transform:uppercase; letter-spacing:.04em; }
.direccion{ display:flex; flex-direction:column; gap:24px; }
.ubicacion .horarios{ margin-top:8px; }
/* Contacto: cómo llegar + escríbenos */
.llegar__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.llegar__item{ display:flex; flex-direction:column; gap:10px; }
.llegar__num{ font-family:var(--f-display); font-size:clamp(64px,7vw,110px); line-height:.85; color:var(--c-naranja); -webkit-text-stroke:6px #fff; paint-order:stroke fill; filter:drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.llegar__item h3{ font-family:var(--f-display); font-size:clamp(22px,1.9vw,28px); text-transform:uppercase; line-height:1; }
.llegar__item p{ line-height:1.45; max-width:36ch; }
.escribenos__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:calc(var(--gap) * 1.5); align-items:start; }
.redes{ display:flex; flex-wrap:wrap; gap:14px 32px; }
@media (max-width:1024px){ .llegar__grid, .escribenos__grid{ grid-template-columns:1fr; } }
.direccion address{ font-style:normal; font-family:var(--f-label); font-size:clamp(22px,2vw,28px); text-transform:uppercase; letter-spacing:.03em; line-height:1.15; }
@media (max-width:1024px){ .ubicacion__grid{ grid-template-columns:1fr; } }

/* ---------- 17. CIERRE ---------- */
.cierre{ position:relative; overflow:clip; padding-block:clamp(96px,14vw,220px); text-align:center; background:var(--c-naranja); color:#fff; }
/* Tres fotos que hacen zoom y se van alternando (parrilla, brasa, pollo) */
.cierre__fondos{ position:absolute; inset:0; z-index:0; }
.cierre__fondos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; opacity:0; transform:scale(1); animation:cierre-zoom 24s ease-in-out infinite; }
.cierre__fondos img:nth-child(2){ animation-delay:8s; } .cierre__fondos img:nth-child(3){ animation-delay:16s; }
@keyframes cierre-zoom{ 0%{ opacity:0; transform:scale(1); } 8%{ opacity:1; } 36%{ opacity:1; transform:scale(1.12); } 44%{ opacity:0; transform:scale(1.14); } 100%{ opacity:0; transform:scale(1); } }
.cierre::before{ content:""; position:absolute; inset:0; background:rgba(224,67,18,.66); z-index:1; } /* capa naranja sólida sobre las fotos */
.cierre .cierre__titulo{ color:#fff; } .cierre .contraste{ color:#fff; }
.cierre .cierre__titulo .contraste{ display:block; font-family:var(--f-frase); text-transform:none; font-size:.7em; line-height:1.15; -webkit-text-stroke:1px #fff; paint-order:stroke fill; margin-top:.15em; } /* "más gordita": trazo extra del mismo color */
.btn--blanco{ color:#fff; -webkit-text-stroke:6px var(--c-cafe); filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); } .btn--blanco svg{ filter:drop-shadow(2px 0 0 var(--c-cafe)) drop-shadow(-2px 0 0 var(--c-cafe)) drop-shadow(0 2px 0 var(--c-cafe)) drop-shadow(0 -2px 0 var(--c-cafe)); }
@media (prefers-reduced-motion:reduce){ .cierre__fondos img{ animation:none; } .cierre__fondos img:first-child{ opacity:1; } }
.cierre .sticker-wrap{ z-index:2; }
.cierre__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:32px; }
.cierre__titulo{ max-width:14ch; }
.cierre .sticker{ pointer-events:none; }
/* Cierre: todos los stickers en negro para que se vean sobre el naranja (Jorge 27-sep) */
.cierre .sticker img{ filter:brightness(0) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(1.5px 1.5px 0 #fff) drop-shadow(-1.5px -1.5px 0 #fff) drop-shadow(1.5px -1.5px 0 #fff) drop-shadow(-1.5px 1.5px 0 #fff) drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.cierre .sticker.is-a{ top:6%; left:3%; transform:rotate(-12deg); }
.cierre .sticker.is-b{ top:8%; right:4%; transform:rotate(14deg); }
.cierre .sticker.is-c{ bottom:6%; left:6%; transform:rotate(8deg); }
.cierre .sticker.is-d{ bottom:8%; right:5%; transform:rotate(-8deg); }

/* ---------- 18. FOOTER (patrón de la referencia) ---------- */
.site-footer{ padding-top:clamp(56px,7vw,110px); overflow:hidden; }
.site-footer__grid{ display:grid; grid-template-columns:auto auto 1fr; gap:48px clamp(40px,8vw,140px); align-items:start; }
.site-footer__bloque{ display:flex; flex-direction:column; gap:40px; }
.site-footer__fila{ display:grid; grid-template-columns:120px auto; gap:0 32px; align-items:start; }
.site-footer__fila h3, .site-footer__titulo{ font-family:var(--f-label); font-size:16px; letter-spacing:.1em; color:var(--acento-texto); padding-top:5px; }
.site-footer__fila a, .site-footer__fila span{ display:block; font-family:var(--f-label); font-size:22px; text-transform:uppercase; letter-spacing:.03em; line-height:1.1; padding:10px 0; }
.site-footer__horarios{ justify-self:end; width:min(520px,100%); background:var(--c-crema); border:0; }
.site-footer__horarios .horarios__titulo{ color:var(--acento-texto); }
.site-footer__horarios li{ font-size:18px; }
.site-footer__marca{ margin-top:clamp(56px,9vw,160px); padding-inline:var(--pad-x); font-family:var(--f-display); text-transform:uppercase; font-size:200px; line-height:.78; letter-spacing:-.01em; white-space:nowrap; color:var(--c-naranja); }
.site-footer__marca img{ width:100%; height:auto; display:block; image-rendering:auto; }
.site-footer__marca .contraste{ color:var(--c-cafe); }
.site-footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-block:12px 28px; font-family:var(--f-label); font-size:16px; text-transform:uppercase; letter-spacing:.06em; }
.site-footer__legal a{ margin-right:22px; display:inline-block; padding:12px 0; }
.site-footer__legal div:last-child a{ margin:0; text-decoration:underline; text-underline-offset:3px; }
.site-footer__creditos{ display:flex; flex-direction:column; gap:4px; text-align:right; }
.site-footer__creditos p{ margin:0; white-space:nowrap; } /* razón social en una sola línea; Ji Group debajo (Jorge, 27-sep) */
@media (max-width:1024px){ .site-footer__creditos{ text-align:left; } }
@media (max-width:420px){ .site-footer__creditos{ font-size:12px; letter-spacing:.03em; } }
.site-footer__ji{ color:var(--c-naranja); text-decoration:none!important; }
.form-ok{ margin-top:12px; font-size:15px; font-weight:bold; color:var(--c-vino); } .form-ok a{ text-decoration:underline; text-underline-offset:3px; } .form-ok:focus{ outline:none; } /* crédito Ji Group en naranja (Jorge, 27-sep) */
@media (max-width:1024px){ .site-footer__grid{ grid-template-columns:1fr 1fr; } .site-footer__horarios{ grid-column:1/-1; justify-self:stretch; width:100%; } }
@media (max-width:600px){ .site-footer__grid{ grid-template-columns:1fr; } .site-footer__fila{ grid-template-columns:1fr; gap:6px; } }

/* ---------- 19. WHATSAPP FLOTANTE ---------- */
.wa-flotante{ position:fixed; right:16px; bottom:16px; z-index:60; display:none; width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.wa-flotante svg{ width:32px; height:32px; }
@media (max-width:1024px){ .wa-flotante{ display:inline-flex; } }

/* ---------- 20. PÁGINAS INTERIORES (legales, reservar, 404) ---------- */
.pagina{ padding-block:clamp(56px,7vw,112px); }
.pagina__inner{ max-width:78ch; }
.pagina h1{ font-size:clamp(40px,5.6vw,92px); margin-bottom:32px; }
.pagina h2{ font-size:clamp(30px,3vw,44px); margin:48px 0 16px; }
.pagina p, .pagina li{ line-height:1.55; margin-bottom:14px; }
.pagina ul{ list-style:disc; padding-left:22px; }
.pagina__meta{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.06em; color:var(--acento-texto); margin-bottom:24px; }
.pagina table{ width:100%; border-collapse:collapse; font-size:15px; margin:16px 0 24px; }
.pagina th, .pagina td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--linea); vertical-align:top; }
.pagina th{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.05em; font-size:16px; }
@media (max-width:767px){ .pagina table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; } .pagina th, .pagina td{ white-space:normal; min-width:120px; } }
.reservar__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:start; }
.reservar__form{ display:grid; gap:16px; background:var(--c-crema); border-radius:var(--radio); padding:clamp(20px,3vw,36px); }
.campo{ display:grid; gap:6px; }
.campo label{ font-family:var(--f-label); font-size:16px; text-transform:uppercase; letter-spacing:.06em; }
.campo input, .campo select, .campo textarea{ width:100%; box-sizing:border-box; padding:0 16px; border:1px solid var(--linea); border-radius:14px; background:#fff; font:inherit; font-size:16px; line-height:1.2; color:var(--fg); -webkit-appearance:none; appearance:none; margin:0; }
.campo input, .campo select{ height:56px; }
.campo textarea{ height:auto; min-height:120px; padding:14px 16px; resize:vertical; }
.campo select{ padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23392F2D' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; }
.campo input[type=date]{ display:flex; align-items:center; }
.campo input::-webkit-date-and-time-value{ text-align:left; }
.campo input[type=number]::-webkit-inner-spin-button{ opacity:1; margin-left:8px; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:2px solid var(--c-naranja); border-color:var(--c-naranja); }
.campo--2{ grid-template-columns:1fr 1fr; }
@media (max-width:1024px){ .reservar__grid{ grid-template-columns:1fr; } }
@media (max-width:480px){ .campo--2{ grid-template-columns:1fr; } }
.p404{ min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; text-align:center; }
.p404__inner{ display:flex; flex-direction:column; align-items:center; gap:24px; }

/* ---------- 21. COOKIE CONSENT (sistema Ji Group) ---------- */
.cc-banner{ position:fixed; left:16px; right:16px; bottom:16px; z-index:1000; background:var(--c-crema); color:var(--c-cafe); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:0 20px 60px rgba(0,0,0,.25); padding:20px; max-width:560px; margin-left:auto; transform:translateY(20px); opacity:0; transition:transform .4s var(--ease), opacity .4s; }
.cc-banner.is-visible{ transform:none; opacity:1; }
.cc-text{ font-size:14px; line-height:1.45; margin-bottom:14px; }
.cc-text strong{ display:block; font-family:var(--f-label); font-size:20px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.cc-text a{ text-decoration:underline; }
.cc-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.cc-actions{ gap:6px 22px; } .cc-actions .btn{ font-size:20px; min-height:44px; -webkit-text-stroke:4.5px #fff; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cc-modal{ position:fixed; inset:0; z-index:1001; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(26,22,20,.6); }
.cc-modal.is-open{ display:flex; }
.cc-modal__box{ width:min(560px,100%); background:var(--c-crema); color:var(--c-cafe); border-radius:var(--radio); padding:28px; max-height:90vh; overflow:auto; }
.cc-modal__box h2{ font-size:28px; margin-bottom:12px; }
.cc-cat{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--linea); }
.cc-cat:last-of-type{ border-bottom:1px solid var(--linea); margin-bottom:16px; }
.cc-cat label{ flex:1; font-size:14px; line-height:1.4; }
.cc-cat label b{ display:block; font-family:var(--f-label); font-size:18px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.cc-cat input{ width:22px; height:22px; margin-top:4px; accent-color:var(--c-naranja); }
@media (max-width:767px){ .cc-banner{ left:8px; right:8px; bottom:8px; padding:14px 16px; } .cc-text{ font-size:13px; line-height:1.4; margin-bottom:10px; } .cc-text strong{ font-size:18px; margin-bottom:4px; } .cc-actions .btn{ font-size:18px; min-height:40px; } .cc-actions{ gap:4px 18px; } }

/* ---------- 22. ANIMACIÓN / MOVIMIENTO ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .nav__links li, .nav__panel-pie{ opacity:1; transform:none; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .marquee__track{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  .sticker{ cursor:default; }
}

/* ---------- 23. IMPRESIÓN (menú QR de emergencia) ---------- */
@media print{
  .estado, .site-header, .menu-tabs, .wa-flotante, .cc-banner, .cc-modal, .menu-aviso, .btn, .site-footer{ display:none!important; }
  html, body, .menu-page, .pagina-clara{ background:#fff!important; color:#000; font-size:10.5pt; }
  .menu-cols{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:0 28px; }
  .menu-item{ padding:5px 0; break-inside:avoid; }
  .menu-cat{ break-inside:auto; } .menu-cat__titulo{ font-size:20pt; break-after:avoid; margin-top:10pt; }
  .menu-item__nombre{ font-size:11pt; } .tag{ border:1px solid #000; background:none!important; color:#000!important; }
  .pill{ border:0; padding:0; min-width:0; }
}