/* =====================================================================
   AREPITAS DEL VALLE · sistema de marca compartido
   Paleta del logo · textura mantel · display cálida retro · motion utils
   ===================================================================== */

:root{
  /* Paleta de marca (del logo) */
  --marron:#5C3A1E;
  --marron-osc:#3A2410;
  --marron-prof:#2A1809;
  --dorado:#E8B845;
  --dorado-claro:#F2D177;
  --crema:#F4E6C8;
  --crema-2:#EAD7AE;
  --hueso:#FBF7EE;
  --verde:#4A5A3A;
  --carbon:#1C1410;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* sombras marrón, nunca negras */
  --sh-sm:0 2px 10px rgba(42,24,9,.12);
  --sh-md:0 14px 34px rgba(42,24,9,.18);
  --sh-lg:0 30px 70px rgba(42,24,9,.28);

  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --maxw:1240px;

  /* Extraídos el 8/09/2026. El relleno de sección estaba escrito a mano en 7
     sitios, con tres valores casi iguales (140/150 px, 11/12vw) sin motivo.
     DESIGN.md ya declaraba este token; ahora existe de verdad. */
  --pad-seccion:clamp(70px,11vw,140px);
  /* Filete fino sobre fondo claro: iba a mano en 3 sitios. */
  --linea:rgba(92,58,30,.18);
  /* Texto secundario sobre fondo oscuro: iba a mano en 4 sitios. */
  --hueso-90:rgba(251,247,238,.9);

  /* Strong ease-out (cubic) — interruptible, snappy in, soft settle. */
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Stronger curve para entradas/scale (más punch). */
  --ease-out:cubic-bezier(.23,1,.32,1);

  /* escala tipográfica fluida (mobile-first 375 → desktop) */
  --fs-mega:clamp(2.9rem, 11.5vw, 12rem);
  --fs-display:clamp(2.8rem, 10vw, 8rem);
  --fs-h2:clamp(2.1rem, 6vw, 4.4rem);
  --fs-h3:clamp(1.5rem, 3.4vw, 2.4rem);
  --fs-lead:clamp(1.1rem, 1rem + 1vw, 1.5rem);
}

*{box-sizing:border-box;}
/* clip (no hidden) en html: corta el desborde lateral sin romper position:sticky. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--marron-osc);
  background:var(--hueso);
  line-height:1.6;
  font-size:clamp(1rem,.96rem + .3vw,1.1rem);
  /* clip y no hidden: hidden convierte el body en contenedor de scroll, y eso
     rompe position:sticky y el salto a anclas. clip recorta igual sin crearlo.
     La marquesina ya se recorta sola con .marquee{overflow:hidden}. */
  overflow-x:clip;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;line-height:.96;margin:0;letter-spacing:-.015em;font-optical-sizing:auto;}
::selection{background:var(--dorado);color:var(--marron-prof);}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px;}
.wrap-wide{width:100%;max-width:1480px;margin-inline:auto;padding-inline:22px;}
section{position:relative;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* ===================== Textura mantel (gingham) ===================== */
.gingham{
  background-color:var(--crema);
  background-image:
    repeating-linear-gradient(0deg, rgba(232,184,69,.16) 0 28px, transparent 28px 56px),
    repeating-linear-gradient(90deg, rgba(232,184,69,.16) 0 28px, transparent 28px 56px);
}
.gingham-dark{
  background-color:var(--marron-osc);
  background-image:
    repeating-linear-gradient(0deg, rgba(232,184,69,.06) 0 30px, transparent 30px 60px),
    repeating-linear-gradient(90deg, rgba(232,184,69,.06) 0 30px, transparent 30px 60px);
}

/* ===================== Botones ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:56px;padding:0 1.7em;
  font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:.01em;
  border-radius:999px;cursor:pointer;border:2.5px solid transparent;
  /* Specify exact properties; no `all`. Press feedback uses transform only. */
  transition:transform 160ms var(--ease-out), box-shadow 220ms var(--ease), background-color 200ms ease, color 200ms ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:1.25em;height:1.25em;flex:0 0 auto;}
.btn-glovo{background:var(--dorado);color:var(--marron-prof);box-shadow:var(--sh-md);}
.btn-call{background:transparent;color:var(--dorado-claro);border-color:var(--dorado);}
.btn-dark{background:var(--marron-osc);color:var(--hueso);box-shadow:var(--sh-sm);}
.btn-ghost{background:var(--hueso);color:var(--marron-osc);box-shadow:var(--sh-sm);border-color:var(--linea);}

/* Press feedback (touch + mouse). Emil rule: every pressable thing must feel
   pressed. 0.97 is subtle enough not to look juvenile, firm enough to register. */
.btn:active{transform:scale(.97);}

/* Hover-only effects gated to fine pointers so touch devices don't
   trigger them on tap (false positives + sticky hover states). */
@media (hover:hover) and (pointer:fine){
  .btn-glovo:hover,.btn-glovo:focus-visible{background:var(--dorado-claro);transform:translateY(-3px) rotate(-1deg);box-shadow:var(--sh-lg);}
  .btn-call:hover,.btn-call:focus-visible{background:var(--dorado);color:var(--marron-prof);transform:translateY(-3px);}
  .btn-dark:hover,.btn-dark:focus-visible{background:var(--marron-prof);transform:translateY(-3px);box-shadow:var(--sh-md);}
  .btn-ghost:hover,.btn-ghost:focus-visible{background:var(--hueso);transform:translateY(-3px);box-shadow:var(--sh-md);}
}
:focus-visible{outline:3px solid var(--dorado);outline-offset:3px;}

/* etiqueta eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-weight:800;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--verde);
}
.eyebrow::before{content:"";width:30px;height:3px;background:var(--dorado);border-radius:3px;}
.on-dark .eyebrow,.eyebrow.light{color:var(--dorado-claro);}

/* ===================== NAV ===================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  /* Never transition `padding` (triggers layout). Padding switches discretely;
     transform handles any visual size change. Background + shadow stay
     animated because they're paint-only. */
  transition:background-color 280ms var(--ease), box-shadow 280ms var(--ease);
  padding:14px 0;
}
.nav.is-stuck{background:rgba(42,24,9,.92);backdrop-filter:saturate(140%) blur(12px);box-shadow:0 8px 30px rgba(42,24,9,.25);padding:8px 0;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:11px;min-width:0;color:var(--hueso);}
/* Animate the logo with `scale` (GPU) instead of `width/height` (layout). */
.brand img{width:50px;height:50px;border-radius:50%;box-shadow:var(--sh-sm);transition:transform 280ms var(--ease);transform-origin:center;}
.nav.is-stuck .brand img{transform:scale(.84);}
.brand b{font-family:var(--display);font-weight:900;font-size:1.18rem;white-space:nowrap;color:var(--hueso);text-shadow:0 1px 8px rgba(42,24,9,.4);}
.nav-links{display:flex;align-items:center;gap:8px;}
.nav-links a{font-weight:700;font-size:.96rem;padding:.6em 1em;border-radius:999px;color:var(--hueso);text-shadow:0 1px 8px rgba(42,24,9,.4);transition:background-color 200ms ease, color 200ms ease;}
.nav-links a.lk-cta{background:var(--dorado);color:var(--marron-prof);text-shadow:none;}
.nav-links a.lk-cta svg{width:1em;height:1em;}
@media (hover:hover) and (pointer:fine){
  .nav-links a.lk-plain:hover,.nav-links a.lk-plain:focus-visible{background:rgba(251,247,238,.16);}
  .nav-links a.lk-cta:hover,.nav-links a.lk-cta:focus-visible{background:var(--dorado-claro);}
}

/* ===================== Marquesina =====================
   Lenta de fondo (32s, lounge-pace) — al pasar el ratón acelera a 12s. El
   cambio de duration no se interpola entre frames, pero a esta escala se
   percibe como "se anima la cinta", no como un salto. */
.marquee{overflow:hidden;width:100%;}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;}
.marquee--rev .marquee-track{animation-direction:reverse;}
.marquee-track > *{flex:0 0 auto;}
@media (hover:hover) and (pointer:fine){
  .marquee:hover .marquee-track{animation-duration:12s;}
}
@keyframes marquee{to{transform:translateX(-50%);}}
.marquee-item{
  font-family:var(--display);font-weight:900;font-size:clamp(2rem,5vw,4rem);
  padding:0 .35em;display:inline-flex;align-items:center;gap:.5em;line-height:1.1;
}
.marquee-star{color:var(--dorado);font-size:.7em;}

/* ===================== Reveal on scroll ===================== */
/* Start from a visible shape (0.95 / translated 34px), never scale(0).
   Emil rule: nothing in real life appears from nothing. */
/* Solo se oculta si hay JS (la clase .js la pone el guion en linea del head). */
/* Sin will-change permanente: eran 54 elementos promocionados a capa de
   composicion durante toda la vida de la pagina, cada uno con su textura en
   memoria. will-change es una pista puntual antes de animar, no una
   declaracion fija. opacity y transform ya van por el compositor sin ella. */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-out);transition-delay:var(--d,0s);}
[data-reveal="left"]{transform:translateX(-44px);}
[data-reveal="right"]{transform:translateX(44px);}
[data-reveal="scale"]{transform:scale(.95);}
[data-reveal="clip"]{clip-path:inset(0 0 100% 0);transform:none;opacity:1;transition:clip-path 1s var(--ease-out);transition-delay:var(--d,0s);}
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);}

/* línea que se dibuja */
.draw-line{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out);transition-delay:var(--d,0s);}
.draw-line.is-in{transform:scaleX(1);}

/* ===================== Loader ===================== */
#loader{
  position:fixed;inset:0;z-index:999;display:grid;place-items:center;
  background:var(--marron-prof);color:var(--hueso);text-align:center;
  transition:opacity 700ms var(--ease-out), visibility 700ms;
  animation:loaderHide 700ms var(--ease-out) 2s forwards;
}
@keyframes loaderHide{to{opacity:0;visibility:hidden;}}
body.loaded #loader{opacity:0;visibility:hidden;animation:none;}
#loader .ld-inner{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px;}
#loader img{width:120px;height:120px;border-radius:50%;box-shadow:var(--sh-lg);animation:ld-bob 1.4s var(--ease) infinite;}
@keyframes ld-bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-12px) rotate(2deg);}}
#loader .ld-text{font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,5vw,2.4rem);letter-spacing:-.01em;}
#loader .ld-text .dots::after{content:"";animation:ld-dots 1.4s steps(4,end) infinite;}
@keyframes ld-dots{0%{content:"";}25%{content:"·";}50%{content:"· ·";}75%{content:"· · ·";}100%{content:"";}}
#loader .ld-bar{width:min(260px,60vw);height:5px;border-radius:5px;background:rgba(251,247,238,.16);overflow:hidden;}
#loader .ld-bar i{display:block;height:100%;width:40%;border-radius:5px;background:var(--dorado);animation:ld-load 1.5s var(--ease) infinite;}
@keyframes ld-load{0%{transform:translateX(-110%);}100%{transform:translateX(360%);}}

/* ===================== Footer ===================== */
.foot{background:var(--marron-prof);color:rgba(251,247,238,.78);padding-top:0;overflow:hidden;}
/* .foot-marquee retirada el 8/09/2026: repetia en movimiento el nombre, la
   direccion y el horario, que estan escritos en estatico justo debajo. Dos
   marquesinas en la misma pagina convierten un gesto de marca en un tic. La
   de arriba se queda: esa si lleva voz propia. */
.foot-body{padding-block:clamp(44px,7vw,72px);}
/* En movil, dos columnas: la marca ocupa el ancho y debajo van Horario y
   Donde y como uno al lado del otro. Antes eran tres bloques apilados. */
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px;}
.foot-grid > :first-child{grid-column:1 / -1;}
.foot-brand{display:flex;align-items:center;gap:13px;}
.foot-brand img{width:62px;height:62px;border-radius:50%;box-shadow:var(--sh-sm);}
.foot-brand b{font-family:var(--display);color:var(--hueso);font-size:1.4rem;display:block;}
.foot-brand span{font-size:.9rem;color:var(--dorado-claro);}
.foot h3{font-family:var(--sans);font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dorado);margin:0 0 .9em;}
.foot p,.foot a{margin:.18em 0;font-size:.92rem;color:rgba(251,247,238,.8);text-wrap:pretty;}
@media (min-width:760px){ .foot p,.foot a{font-size:.98rem;} }
.foot a{transition:color 180ms ease;}
.foot-social{display:flex;gap:10px;margin-top:.6em;}
.foot-social a{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(251,247,238,.08);transition:background-color 200ms ease, transform 200ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
  .foot a:hover{color:var(--dorado-claro);}
  .foot-social a:hover{background:rgba(232,184,69,.22);transform:translateY(-2px);}
}
.foot-social svg{width:21px;height:21px;color:var(--dorado-claro);}
.foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid rgba(251,247,238,.14);font-size:.82rem;color:rgba(251,247,238,.55);display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;}
.foot-legal a{font-size:.82rem;color:rgba(251,247,238,.6);}

/* ===================== Image slots (production) =====================
   Wrapper-based slot that shows a labelled placeholder until a real image
   loads. The <img> inside sits absolutely so even a broken src can't
   collapse the layout; the labelled background shows through the alpha. */
.slot{position:relative;display:block;background:var(--crema-2);overflow:hidden;}
.slot::before{
  content:attr(data-label);
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:14px;
  font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marron);opacity:.55;
  background:
    repeating-linear-gradient(45deg, rgba(92,58,30,.06) 0 14px, transparent 14px 28px);
}
.slot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.slot.is-empty > img{display:none;}

/* ===================== Script accent (sello del logo) =====================
   Kaushan brush script aplicado a una palabra-clave por titular, para que el
   sello del wordmark se note en cada sección sin destrozar la jerarquía. Nunca
   bloques enteros, nunca cuerpo — solo el <em> de énfasis. */
.script{
  font-family:'Kaushan Script', cursive;
  font-weight:400;
  font-style:normal;       /* el script ya viene slanted */
  letter-spacing:0;
  line-height:.95;
  display:inline-block;
  transform:translateY(.04em) rotate(-1.5deg);
  transform-origin:center bottom;
  font-size:1.1em;          /* default — para usos fuera de h1/h2 */
}
/* Dentro de titulares grandes, Kaushan tiene menos masa visual que Fraunces 900,
   así que necesita +20% para que las dos voces se sientan al mismo "tamaño". */
h1 .script, h2 .script{ font-size:1.22em; }
.hero h1 + .hero-word .script, .tease h2 .script{ font-size:1.15em; }

/* ===================== Iconos de alérgenos ===================== */
.alg{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border:1.4px solid currentColor;border-radius:50%;opacity:.62;flex:0 0 auto;}
.alg svg{width:11px;height:11px;}
@media (min-width:620px){
  .alg{width:23px;height:23px;}
  .alg svg{width:13px;height:13px;}
}

@media (min-width:760px){
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr;gap:30px;align-items:start;}
  .foot-grid > :first-child{grid-column:auto;}
}
@media (max-width:430px){
  .brand b{display:none;}
}

/* Objetivo tactil en movil: los enlaces de texto del pie y de los pies de
   seccion median 16-19px de alto. Se les da area sin cambiar el flujo. */
@media (max-width:759px){
  .foot-body a,.foot-legal a,.fijas-foot a,.reviews-foot a,.doce-note a{
    display:inline-block;padding-block:.45em;min-height:44px;
  }
  .info-block a.tel{display:inline-block;padding-block:.3em;min-height:44px;}
  .nav-links a,.cbar-links a{min-height:44px;display:inline-flex;align-items:center;}
  .foot-social a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  /* Keep opacity + color transitions; kill movement. Emil rule: reduced
     motion is gentler, not zero. */
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
  *{transition-property:opacity,color,background-color !important;}
  [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important;}
  .marquee-track{animation:none !important;}
  #loader{display:none !important;}
}

/* ============ Escala de titulares en escritorio · 07/09/2026 ============
   --fs-mega iba a 15vw y --fs-display a 10vw sin freno util: en un monitor
   de 1440 px un solo titular medía 192 px y su seccion no cabia en pantalla.
   El corte esta en 760 px porque ahi los valores nuevos coinciden con los
   viejos y no se nota salto. Por debajo de 760 no cambia nada: en movil ya
   funcionaba. Va en brand.css y no en home.css para que la carta herede lo
   mismo. */
@media (min-width:760px){
  :root{
    --fs-mega:clamp(7.1rem,7.8vw,8.6rem);
    --fs-display:clamp(4.75rem,5.3vw,6.2rem);
  }
}

/* ============ Adaptación por tipo de entrada · 07/09/2026 ============
   Las áreas táctiles de 44 px estaban dentro de @media (max-width:759px),
   o sea atadas al ANCHO. Pero el ancho no dice cómo se toca la pantalla: un
   iPad apaisado son 1024 px y se usa con el dedo, y se quedaba con enlaces de
   19 px de alto. La consulta correcta es (pointer:coarse). Se mantiene también
   la de ancho, para móviles que no la declaren bien. */
@media (pointer:coarse){
  .foot-body a,.foot-legal a,.fijas-foot a,.reviews-foot a,.doce-note a{
    display:inline-block;padding-block:.45em;min-height:44px;
  }
  .info-block a.tel{display:inline-block;padding-block:.3em;min-height:44px;}
  .nav-links a,.cbar-links a{min-height:44px;display:inline-flex;align-items:center;}
  .foot-social a{min-width:44px;min-height:44px;}
}

/* Con ratón el mínimo no es 44 sino 24 px (WCAG 2.2 AA, criterio 2.5.8).
   Los enlaces del pie se quedaban en 16-19 px de alto. */
@media (pointer:fine){
  /* Los iconos sociales tambien viven dentro de .foot-body, y aqui les caia
     display:inline-block, que anula su place-items:center y los descoloca
     dentro del circulo. Se excluyen: ya miden 46 px, de sobra para el minimo. */
  .foot-body a:not(.foot-social a),.foot-legal a,.foot-col a{
    display:inline-block;padding-block:.28em;min-height:24px;
  }
}

/* La clientela mayor del barrio es un perfil declarado en PRODUCT.md, y el
   texto funcional bajaba a 12,8 px. 14 px es el suelo razonable. */
.eyebrow{font-size:.875rem;}
.foot h4{font-size:.875rem;}
.foot-legal,.foot-legal a{font-size:.875rem;}

/* Si motion.js no responde en 4 s, el contenido se muestra igual. */
html.sin-motion [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;}

/* Enlace de salto: invisible hasta que se le da el foco con el tabulador. */
.saltar-al-contenido{
  position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--dorado);color:var(--marron-prof);
  padding:12px 20px;border-radius:999px;
  font-family:var(--sans);font-weight:700;
  transition:top 180ms var(--ease-out);
}
.saltar-al-contenido:focus{top:12px;}

/* ============ Banda de aviso · componente disponible, ahora sin usar ======
   Se creó para el cierre de vacaciones y se retiró al decidir publicar la web
   después. Se queda porque volverá a hacer falta (Navidad, festivos, un día
   que no se abra). Ahora mismo no pinta nada: --aviso-h vale 0 mientras no
   exista un <aside class="aviso">, así que la navegación y el hero están en
   su sitio sin tocar nada.

   Para activarla, pegar esto justo antes del <header> de la página:
     <aside class="aviso" role="status">
       <div class="wrap aviso-in">
         <span class="aviso-punto" aria-hidden="true"></span>
         <p><strong>Cerrado</strong> el texto que toque.</p>
       </div>
     </aside>
   ==========================================================================
   Va fijo arriba del todo, por encima de la navegación, y no se va al hacer
   scroll: quien está mirando la carta también tiene que saber que hoy no se
   puede pedir. La navegación y el hero se desplazan con la misma variable,
   así que al borrar el bloque todo vuelve solo a su sitio.
   Usa el dorado de marca, no un rojo de alerta: es una noticia de servicio. */
:root{--aviso-h:0px;}
body:has(.aviso){--aviso-h:56px;}
@media (max-width:760px){ body:has(.aviso){--aviso-h:76px;} }

.aviso{
  position:fixed;top:0;left:0;right:0;z-index:95;
  min-height:var(--aviso-h);display:flex;align-items:center;
  background:var(--dorado);color:var(--marron-prof);
  border-bottom:3px solid var(--marron-prof);
  padding-block:10px;
}
.aviso-in{display:flex;align-items:center;justify-content:center;gap:.7em;text-align:center;}
.aviso p{margin:0;font-family:var(--sans);font-weight:600;font-size:clamp(.95rem,.9rem + .3vw,1.06rem);line-height:1.35;text-wrap:balance;}
.aviso strong{font-weight:800;}
.aviso-punto{width:10px;height:10px;border-radius:50%;flex:0 0 auto;background:var(--marron-prof);}

/* La navegación es fixed en top:0; con el aviso baja lo justo. */
.nav{top:var(--aviso-h);}
/* Y el hero recupera el alto que le quita el aviso. */
.hero{min-height:calc(100svh - var(--aviso-h));}

/* La marquesina gira 32 s en bucle infinito. Fuera de pantalla seguia
   repintando: en movil eso es bateria a cambio de nada. Se para sola. */
.marquee-track{animation-play-state:running;}
.marquee.fuera .marquee-track{animation-play-state:paused;}