/* =========================================================
   Bodegón Devoto · demo web
   Paleta del sello: Rosa Devoto + Bordó Sello + Fórmica + Mantel
   ========================================================= */
html { --kit-radius: 22px !important; --kit-radius-btn: 999px !important; }
:root {
  --rosa: #E59BA8;
  --bordo: #7A0331;
  --formica: #4A1828;
  --formica-2: #5C2238;
  --mantel: #FFF7F0;
  --visillo: #F6D6DC;
  --borde: #ECD3D8;
  --toldo: #123503;
  --texto: #4A1828;
  --serif: 'Instrument Serif', Georgia, serif;
  --rotulo: 'Krona One', 'Hanken Grotesk', sans-serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --pad: clamp(24px, 4.6vw, 76px);
  --aire: clamp(84px, 10vw, 150px);
  --max: 1320px;
  --radio: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --barra: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--rosa); overflow-x: clip; overscroll-behavior-y: none; scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mantel); color: var(--texto); font: 400 17px/1.65 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--bordo); }
button { font: inherit; color: inherit; }
em { font-style: italic; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 3px solid var(--bordo); outline-offset: 3px; border-radius: 6px; }
main { display: grid; grid-template-columns: minmax(0, 1fr); }
main > * { min-width: 0; }

/* ---------- tipografía y botones ---------- */
.kicker { margin: 0; font: 400 12px/1.4 var(--rotulo); letter-spacing: .18em; color: var(--bordo); }
.titulo { font: 400 clamp(46px, 6.4vw, 96px)/.95 var(--serif); color: var(--bordo); letter-spacing: -.01em; margin: 18px 0 22px; }
.titulo em { font-style: italic; }
.bajada { margin: 0; max-width: 58ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.7; }
.btn {
  --b: var(--bordo); --c: var(--mantel);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 0 26px;
  border: 2px solid var(--b); border-radius: 999px; background: var(--b); color: var(--c);
  font: 400 12px/1 var(--rotulo); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn--linea { background: transparent; color: var(--b); }
.btn--linea:hover { background: var(--b); color: var(--c); }
.btn--grande { min-height: 60px; padding: 0 32px; font-size: 13px; }
.btn--chico { min-height: 46px; padding: 0 20px; font-size: 11px; }
.btn--rosa { --b: var(--rosa); --c: var(--bordo); }
.btn--linea-rosa { --b: var(--rosa); --c: var(--bordo); background: transparent; color: var(--rosa); }
.btn--linea-rosa:hover { background: var(--rosa); color: var(--bordo); }
.link-rosa { background: none; border: 0; color: var(--rosa); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-size: 14px; padding: 8px 4px; }
.seccion { padding: var(--aire) var(--pad); }
.seccion > * { max-width: var(--max); }

/* =========================================================
   INTRO
   ========================================================= */
.intro { display: none; }
.con-intro .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 10000; background: var(--bordo);
  animation: intro-fuera .01s linear 5s forwards; /* seguro: aunque falle el JS, a los 5 s se va */
}
.con-intro body { overflow: hidden; }
.intro__stage { display: grid; justify-items: center; gap: 8px; }
.intro__campana { width: min(240px, 54vw); overflow: visible; }
.intro__campana path, .intro__campana circle { fill: none; stroke: var(--rosa); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.intro__tapa path, .intro__tapa circle, .intro__bandeja { stroke-dasharray: 260; stroke-dashoffset: 260; animation: trazo .7s var(--ease) forwards; }
.intro__bandeja { animation-delay: .1s; }
.intro__vapor path { stroke-width: 4; opacity: 0; animation: vapor 1.4s ease-out .35s infinite; }
.intro__vapor path:nth-child(2) { animation-delay: .5s; }
.intro__vapor path:nth-child(3) { animation-delay: .65s; }
.intro__tapa { transform-box: fill-box; transform-origin: 85% 100%; }
.intro__grito { margin: -26px 0 0; font: italic 400 clamp(64px, 10vw, 120px)/1 var(--serif); color: var(--rosa); opacity: 0; transform: translateY(24px) scale(.9); }
.intro__sello { position: absolute; inset: 0; display: grid; place-items: center; background: var(--rosa); clip-path: circle(0% at 50% 56%); }
.intro__sello img { width: min(300px, 64vw); height: auto; transform: rotate(-90deg) scale(.6); }
.intro.levanta .intro__tapa { animation: tapa-arriba .6s var(--ease) forwards; }
.intro.levanta .intro__vapor { opacity: 0; transition: opacity .2s; }
.intro.levanta .intro__grito { animation: sube .5s var(--ease) .12s forwards; }
.intro.sello .intro__sello { animation: sello-crece .7s cubic-bezier(.7, 0, .2, 1) forwards; }
.intro.sello .intro__sello img { animation: sello-gira .7s var(--ease) forwards; }
.intro.fuera { animation: intro-fuera .45s ease forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes vapor { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes tapa-arriba { to { transform: translate(34px, -70px) rotate(24deg); } }
@keyframes sube { to { opacity: 1; transform: none; } }
@keyframes sello-crece { to { clip-path: circle(150% at 50% 56%); } }
@keyframes sello-gira { to { transform: rotate(0) scale(1); } }
@keyframes intro-fuera { to { opacity: 0; visibility: hidden; } }

/* =========================================================
   BARRA
   ========================================================= */
.barra {
  position: sticky; top: 0; z-index: 50; height: var(--barra); display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 0 var(--pad); background: var(--rosa); color: var(--bordo); transition: box-shadow .3s, background-color .4s;
}
.barra.scrolleada { box-shadow: 0 10px 30px -18px rgba(74, 24, 40, .6); }
.barra__logo img { width: 58px; height: 58px; transition: transform .5s var(--ease); }
.barra__logo:hover img { transform: rotate(-14deg); }
.barra__nav { display: flex; gap: clamp(16px, 2.2vw, 34px); flex: 1; font-weight: 600; font-size: 15px; }
.barra__nav a { color: inherit; text-decoration: none; position: relative; padding: 6px 0; }
.barra__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.barra__nav a:hover::after, .barra__nav a.activo::after { transform: none; }
.barra__nav-cta { display: none; }
.barra__acciones { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.hamburguesa { display: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--bordo); background: transparent; cursor: pointer; place-content: center; gap: 6px; padding: 0; }
.hamburguesa span { display: block; width: 20px; height: 2px; background: var(--bordo); transition: transform .3s var(--ease); }
.hamburguesa[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  min-height: calc(100svh - var(--barra)); padding: clamp(18px, 3vh, 40px) var(--pad) clamp(40px, 6vh, 72px); background: var(--rosa); color: var(--bordo);
  transition: background-color .6s;
}
.hero__texto { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 28px); max-width: 720px; min-width: 0; }
.hero__titulo { font: 400 clamp(52px, 6.5vw, 108px)/.9 var(--serif); letter-spacing: -.012em; }
.hero__titulo .linea { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__titulo .linea > span { display: inline-block; }
.hero__bajada { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: var(--formica); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__datos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; font-size: 15px; color: var(--formica); }
@media (min-width: 761px) { .hero__datos li + li::before { content: '·'; margin-right: 22px; } }
.hero__datos .abierto::before { content: ''; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #1f9d55; margin-right: 8px; box-shadow: 0 0 0 0 #1f9d55; animation: ping 2s infinite; vertical-align: 1px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 85, .55); } 70% { box-shadow: 0 0 0 9px rgba(31, 157, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); } }

.hero__foto { position: relative; height: min(calc(100svh - var(--barra) - 80px), 760px); min-height: 520px; }
.arco { position: absolute; right: 0; top: 0; bottom: 0; width: min(100%, 560px); margin: 0; border-radius: 300px 300px 34px 34px; border: 10px solid var(--mantel); overflow: hidden; background: var(--formica); }
.arco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.sello-giro { position: absolute; right: min(78%, 440px); top: 6%; width: 150px; height: 150px; border-radius: 50%; background: var(--bordo); display: grid; place-items: center; z-index: 2; }
.sello-giro svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 22s linear infinite; }
.sello-giro text { font: 400 11.5px var(--rotulo); fill: var(--rosa); }
.sello-giro img { width: 40px; height: auto; filter: brightness(0) invert(78%) sepia(16%) saturate(900%) hue-rotate(298deg); }
@keyframes gira { to { transform: rotate(360deg); } }
.hoy-card {
  position: absolute; right: 26px; bottom: 74px; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 18px 24px; border-radius: 22px;
  background: var(--mantel); color: var(--formica); text-decoration: none; box-shadow: 0 22px 44px -18px rgba(74, 24, 40, .55); transition: transform .3s var(--ease);
}
.hoy-card:hover { transform: translateY(-4px) rotate(-1deg); }
.hoy-card__k { font: 400 10px/1.4 var(--rotulo); letter-spacing: .14em; color: var(--bordo); }
.hoy-card__t { font: 400 30px/1.1 var(--serif); color: var(--bordo); }
.hoy-card__s { font-size: 13px; }
.hero__mozo { position: absolute; left: -10px; bottom: 26px; width: clamp(170px, 17vw, 250px); height: auto; z-index: 3; transform-origin: 50% 100%; filter: drop-shadow(0 16px 20px rgba(74, 24, 40, .25)); }

/* modo noche (el reloj del local) */
.noche .hero { background: var(--formica); color: var(--rosa); }
.noche .hero .hero__bajada, .noche .hero .hero__datos { color: var(--mantel); }
.noche .hero .kicker { color: var(--rosa); }
.noche .hero .btn { --b: var(--rosa); --c: var(--bordo); }
.noche .hero .btn--linea { color: var(--rosa); }
.noche .hero .btn--linea:hover { color: var(--bordo); }
.noche .barra { background: var(--formica); color: var(--rosa); }
.noche .barra .btn { --b: var(--rosa); --c: var(--bordo); }
.noche .barra .btn--linea { color: var(--rosa); }
.noche .hamburguesa { border-color: var(--rosa); }
.noche .hamburguesa span { background: var(--rosa); }
.noche .sello-giro { background: var(--rosa); }
.noche .sello-giro text { fill: var(--bordo); }
.noche .sello-giro img { filter: none; }
html.noche { background: var(--formica); }

/* =========================================================
   ENTRADAS ANIMADAS
   ========================================================= */
.js .revela { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 85ms); }
.js .revela.visto { opacity: 1; transform: none; }
.js .hero__titulo .linea > span { transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms + 80ms); }
.js .hero__kicker, .js .hero__bajada, .js .hero__ctas, .js .hero__datos, .js .hoy-card, .js .sello-giro { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms + 200ms); }
.js .arco { clip-path: inset(100% 0 0 0 round 300px 300px 34px 34px); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1) .1s; }
.js .arco img { transform: scale(1.12); transition: transform 1.6s var(--ease) .1s; }
.js .hero__mozo { opacity: 0; transform: translateX(-140%); }
.listo .hero__titulo .linea > span { transform: none; }
.listo .hero__kicker, .listo .hero__bajada, .listo .hero__ctas, .listo .hero__datos, .listo .hoy-card, .listo .sello-giro { opacity: 1; transform: none; }
.listo .arco { clip-path: inset(0 0 0 0 round 300px 300px 34px 34px); }
.listo .arco img { transform: none; }
.listo .hero__mozo { opacity: 1; animation: entra-mozo 1.3s var(--ease) .35s both; }
@keyframes entra-mozo {
  0% { opacity: 1; transform: translateX(-140%) rotate(0); }
  20% { transform: translateX(-104%) translateY(-10px) rotate(-6deg); }
  40% { transform: translateX(-68%) rotate(5deg); }
  60% { transform: translateX(-34%) translateY(-10px) rotate(-6deg); }
  80% { transform: translateX(-6%) rotate(4deg); }
  100% { opacity: 1; transform: translateX(0) rotate(-4deg); }
}

/* =========================================================
   ¿QUÉ COMEMOS HOY?
   ========================================================= */
.hoy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin: 0 auto; width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); }
.hoy__texto { min-width: 0; }
.dias { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 18px; }
.dia { min-width: 60px; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 0; background: var(--visillo); color: var(--bordo); font: 700 13px/1 var(--sans); letter-spacing: .08em; cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--ease); }
.dia:hover { transform: translateY(-2px); }
.dia[aria-selected="true"] { background: var(--bordo); color: var(--mantel); }
.dia .hoy-tag { display: block; font-size: 9px; letter-spacing: .1em; margin-top: 3px; opacity: .85; }
.hoy__estado { margin: 0 0 26px; font-weight: 600; color: var(--formica); min-height: 1.6em; }
.hoy__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.pizarron {
  position: relative; min-width: 0; padding: clamp(34px, 4.5vw, 64px); border-radius: 34px; background: var(--bordo); color: var(--mantel);
  box-shadow: inset 0 0 0 10px var(--formica), inset 0 0 0 12px rgba(229, 155, 168, .35), 0 30px 60px -30px rgba(74, 24, 40, .7);
  overflow: hidden;
}
.pizarron__dia { display: block; font: italic 400 clamp(46px, 5vw, 72px)/1 var(--serif); color: var(--rosa); margin-bottom: 26px; }
.pizarron__lista { margin: 0; display: grid; gap: 18px; max-width: 30ch; }
.pizarron__lista div { display: grid; gap: 2px; padding-bottom: 18px; border-bottom: 1.5px dashed rgba(229, 155, 168, .45); }
.pizarron__lista dt { font: 400 10.5px/1.4 var(--rotulo); letter-spacing: .16em; color: var(--rosa); }
.pizarron__lista dd { margin: 0; font: 400 clamp(24px, 2.3vw, 32px)/1.15 var(--serif); }
.pizarron__lista dd.cambia { animation: tiza .5s var(--ease); }
@keyframes tiza { from { opacity: 0; transform: translateX(-14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.pizarron__precio { display: inline-block; margin-top: 24px; padding: 10px 18px; border-radius: 999px; background: var(--rosa); color: var(--bordo); font: 400 14px/1 var(--rotulo); }
.pizarron__nota { display: block; margin-top: 18px; font-size: 12.5px; opacity: .8; max-width: 34ch; }
.pizarron__mozo { position: absolute; right: -22px; bottom: -26px; width: clamp(130px, 15vw, 200px); height: auto; opacity: .9; transform: rotate(-8deg); }

/* =========================================================
   LA CARTA
   ========================================================= */
.carta { background: var(--visillo); }
.carta__cabeza, .libro, .carta__pie { margin-left: auto; margin-right: auto; width: 100%; }
.carta__cabeza { margin-bottom: clamp(36px, 5vw, 56px); }
.carta__pie { margin-top: 26px; font-size: 14px; text-align: center; color: var(--formica); max-width: 70ch; }
.libro { position: relative; perspective: 1800px; }
.libro__adentro {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 260px; min-height: 640px;
  background: var(--mantel); border-radius: 30px; border: 14px solid var(--bordo); box-shadow: 0 40px 70px -40px rgba(74, 24, 40, .7);
}
.libro__tapa { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.libro__hoja { background: var(--bordo); display: grid; place-items: center; backface-visibility: hidden; transition: transform 1.3s cubic-bezier(.7, 0, .2, 1); box-shadow: inset 0 0 0 10px rgba(255, 247, 240, .07); }
.libro__hoja span { font: italic 400 clamp(44px, 6vw, 92px)/1 var(--serif); color: var(--rosa); }
.libro__hoja--izq { border-radius: 30px 0 0 30px; transform-origin: left center; justify-items: end; padding-right: 18px; }
.libro__hoja--der { border-radius: 0 30px 30px 0; transform-origin: right center; justify-items: start; padding-left: 18px; }
.libro.abierto .libro__hoja--izq { transform: rotateY(-100deg); }
.libro.abierto .libro__hoja--der { transform: rotateY(100deg); }
.libro.abierto .libro__tapa { visibility: hidden; transition: visibility 0s 1.3s; }
html:not(.js) .libro__tapa { display: none; }

.carta__indice { padding: 34px 26px; background: var(--visillo); border-radius: 16px 0 0 16px; display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.carta__paginas { display: flex; flex-wrap: wrap; gap: 8px; }
.pagina { min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--bordo); background: var(--mantel); color: var(--bordo); font: 700 13px/1 var(--sans); cursor: pointer; transition: background-color .25s, color .25s; }
.pagina[aria-selected="true"] { background: var(--bordo); color: var(--mantel); }
.carta__secciones { display: flex; flex-direction: column; gap: 2px; }
.seccion-link { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; margin: 0 -12px; border: 0; border-radius: 12px; background: transparent; color: var(--bordo); font: 500 15px/1.3 var(--sans); text-align: left; cursor: pointer; transition: background-color .25s; }
.seccion-link small { font-weight: 700; opacity: .7; }
.seccion-link:hover { background: rgba(255, 247, 240, .7); }
.seccion-link[aria-current="true"] { background: var(--mantel); font-weight: 700; }
.carta__cuerpo { padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.4vw, 52px); min-width: 0; }
.carta__foto { padding: 34px 26px 34px 0; min-width: 0; }
.carta__foto-marco { position: sticky; top: calc(var(--barra) + 24px); margin: 0; display: grid; gap: 12px; }
.carta__foto-marco img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 130px 130px 18px 18px; background: var(--visillo); transition: opacity .25s; }
.carta__foto-marco img.cambiando { opacity: 0; }
.carta__foto-marco figcaption { font-size: 13px; line-height: 1.5; color: var(--formica); }
.carta__foto-marco figcaption i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); vertical-align: 1px; }

/* la carta del kit con la piel del bodegón */
#kitCarta .kit-tabs { display: none; }
#kitCarta .kit-carta__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#kitCarta .kit-carta__panel.dos-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
#kitCarta .kit-carta__panel[data-cat="semana"] { display: none !important; }
.sec-cabeza { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 2px solid var(--bordo); }
.sec-cabeza h3 { font: 400 clamp(38px, 3.6vw, 54px)/1 var(--serif); color: var(--bordo); }
.sec-cabeza p { margin: 0; font-size: 13.5px; color: var(--formica); }
.sec-pie { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding-top: 22px; }
.sec-pie button { border: 0; background: none; color: var(--bordo); font: 700 14px/1.3 var(--sans); cursor: pointer; padding: 10px 0; }
.sec-pie button:hover { text-decoration: underline; text-underline-offset: 4px; }
#kitCarta .item.kit-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 18px 0 20px; border: 0; position: relative;
  animation: item-entra .5s var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 35ms);
}
#kitCarta .item.kit-item + .item.kit-item::before { content: '〜'; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); color: var(--rosa); font-size: 18px; line-height: 1; }
#kitCarta .dos-col .item.kit-item:nth-child(-n+3)::before { display: none; }
#kitCarta .item.es-variante { display: none !important; }
@keyframes item-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.it-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 700 15px/1.35 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--formica); }
.it-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--rosa); flex: none; }
.it-desc { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: #6d4552; max-width: 60ch; }
.it-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--visillo); color: var(--bordo); font: 700 11px/1.2 var(--sans); letter-spacing: .02em; text-transform: none; }
.it-chip--casa { background: var(--bordo); color: var(--mantel); }
.it-foto { border: 0; background: none; padding: 0; color: var(--bordo); font: 600 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-transform: none; letter-spacing: 0; display: none; }
.it-lado { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.it-precio { font: 600 16px/1 var(--sans); color: var(--bordo); white-space: nowrap; }
.it-var { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--visillo); }
.it-var small { font: 700 12px/1.1 var(--sans); color: var(--bordo); white-space: nowrap; }
.it-var small b { font-family: var(--rotulo); font-weight: 400; font-size: 10px; letter-spacing: .06em; margin-right: 4px; }
.it-salon { font-size: 12px; color: #6d4552; }
.dos-col .item.kit-item { padding: 12px 0 14px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dos-col .it-lado { justify-content: flex-start; }
.dos-col .it-nombre { font-size: 14px; }
.dos-col .it-desc { font-size: 13px; }
#kitCarta .kit-add { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--bordo); background: var(--mantel); color: var(--bordo); font: 400 10.5px/1 var(--rotulo); letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; }
#kitCarta .kit-add:hover { background: var(--bordo); color: var(--mantel); }
.it-var .kit-add { background: var(--bordo) !important; color: var(--mantel) !important; }
#kitCarta .kit-step { background: var(--bordo); border-color: var(--bordo); }
#kitCarta .kit-step button { width: 36px; height: 38px; }

/* =========================================================
   ELEGÍ TU MILA
   ========================================================= */
.mila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin: 0 auto; width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); }
.mila__plato { position: relative; display: grid; place-items: center; min-width: 0; padding: 30px; }
.mila__disco { width: min(100%, 520px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 16px solid #fff; box-shadow: 0 0 0 3px #1c1c1c inset, 0 40px 60px -30px rgba(74, 24, 40, .6), 0 0 0 1px var(--borde); background: var(--visillo); transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.mila__disco img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform .6s var(--ease); }
.mila__disco img.cambiando { opacity: 0; transform: scale(.92) rotate(-8deg); }
.mila__disco.xl { transform: scale(1.12); }
.mila__xl { position: absolute; right: 8%; top: 6%; width: 110px; height: 110px; border-radius: 50%; background: var(--bordo); color: var(--rosa); display: grid; place-items: center; font: 400 34px/1 var(--rotulo); transform: scale(0) rotate(-30deg); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.mila__xl.on { transform: scale(1) rotate(-12deg); }
.mila__mozo { position: absolute; left: 0; bottom: 0; width: clamp(120px, 12vw, 170px); height: auto; transform: rotate(-6deg); }
.mila__panel { min-width: 0; }
.seg { display: inline-flex; padding: 5px; border-radius: 999px; background: var(--visillo); margin-bottom: 22px; }
.seg button { min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: transparent; color: var(--bordo); font: 700 14px/1 var(--sans); cursor: pointer; transition: background-color .3s, color .3s; }
.seg button[aria-checked="true"] { background: var(--bordo); color: var(--mantel); }
.sabores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.sabor { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--bordo); background: transparent; color: var(--bordo); font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--ease); }
.sabor:hover { transform: translateY(-2px); }
.sabor[aria-checked="true"] { background: var(--bordo); color: var(--mantel); }
.switch { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; font-weight: 600; margin-bottom: 26px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__pista { width: 62px; height: 34px; border-radius: 999px; background: var(--borde); position: relative; transition: background-color .3s; }
.switch__pista span { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.switch input:checked + .switch__pista { background: var(--bordo); }
.switch input:checked + .switch__pista span { transform: translateX(28px); }
.switch input:focus-visible + .switch__pista { outline: 3px solid var(--bordo); outline-offset: 3px; }
.mila__resumen { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 22px 0; border-top: 2px solid var(--bordo); border-bottom: 2px solid var(--bordo); margin-bottom: 24px; }
.mila__resumen > div { display: grid; gap: 4px; min-width: 0; }
.mila__nombre { font: 400 clamp(30px, 3vw, 42px)/1.05 var(--serif); color: var(--bordo); }
.mila__desc { font-size: 14.5px; color: #6d4552; }
.mila__precio { font: 400 clamp(22px, 2.2vw, 30px)/1 var(--rotulo); color: var(--bordo); white-space: nowrap; }
.mila__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   ARMÁ LA MESA
   ========================================================= */
.mesa { background: var(--formica); color: var(--mantel); }
.mesa .kicker, .mesa .titulo { color: var(--rosa); }
.mesa__cabeza, .mesa__grilla { margin: 0 auto; width: 100%; }
.mesa__cabeza { margin-bottom: clamp(32px, 4vw, 52px); }
.mesa__grilla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "bandeja bandeja" "tabla cuenta"; gap: 22px 28px; }
.mesa__bandeja { grid-area: bandeja; display: flex; gap: 18px; overflow-x: auto; padding: 8px 4px 18px; scrollbar-width: thin; scrollbar-color: var(--rosa) transparent; }
.plato-btn { flex: none; width: 128px; display: grid; justify-items: center; gap: 8px; border: 0; background: none; color: var(--mantel); cursor: grab; touch-action: none; padding: 0; }
.plato-btn img { width: 112px; height: 112px; border-radius: 50%; box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .6); transition: transform .3s var(--ease); pointer-events: none; }
.plato-btn:hover img { transform: translateY(-4px) rotate(-6deg); }
.plato-btn b { font-size: 13px; line-height: 1.25; text-align: center; }
.plato-btn span { font-size: 12px; color: var(--rosa); }
.mesa__tabla {
  grid-area: tabla; position: relative; min-height: 440px; border-radius: 36px; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #6d2a43 0%, var(--formica-2) 45%, #3c1220 100%);
  box-shadow: inset 0 0 0 10px #3a1120, inset 0 0 0 12px rgba(229, 155, 168, .25), 0 30px 50px -30px rgba(0, 0, 0, .8);
  touch-action: none;
}
.mesa__tabla.encima { box-shadow: inset 0 0 0 10px #3a1120, inset 0 0 0 14px var(--rosa); }
.mesa__vacia { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: italic 400 clamp(30px, 3vw, 44px)/1 var(--serif); color: rgba(229, 155, 168, .55); pointer-events: none; }
.en-mesa { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border: 0; padding: 0; background: none; cursor: grab; touch-action: none; animation: cae .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.en-mesa img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 18px 24px -10px rgba(0, 0, 0, .7); pointer-events: none; }
.en-mesa .quitar { position: absolute; top: 2px; right: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--rosa); color: var(--bordo); display: grid; place-items: center; font: 700 18px/1 var(--sans); opacity: 0; transition: opacity .2s; }
.en-mesa:hover .quitar, .en-mesa:focus-visible .quitar { opacity: 1; }
@keyframes cae { from { transform: scale(1.4) rotate(var(--r, 0deg)); opacity: 0; } to { transform: scale(1) rotate(var(--r, 0deg)); opacity: 1; } }
.en-mesa { transform: rotate(var(--r, 0deg)); }
.arrastrando { position: fixed; z-index: 9500; width: 120px; height: 120px; margin: -60px 0 0 -60px; pointer-events: none; }
.arrastrando img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 30px 30px -12px rgba(0, 0, 0, .6); transform: scale(1.08) rotate(-6deg); }
.mesa__cuenta { grid-area: cuenta; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 28px; background: rgba(255, 247, 240, .06); border: 1.5px solid rgba(229, 155, 168, .3); align-self: start; }
.mesa__comen { font: 400 clamp(30px, 2.8vw, 40px)/1.05 var(--serif); color: var(--rosa); }
.mesa__total { font: 400 22px/1 var(--rotulo); }
.mesa__ctas { display: grid; gap: 10px; margin-top: 8px; }
.mesa__ctas .btn { font-size: 11px; padding: 0 18px; }

/* =========================================================
   MAZO DE FOTOS
   ========================================================= */
.mazo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin: 0 auto; width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); }
.mazo__texto { min-width: 0; }
.mazo__texto .bajada { font: italic 400 clamp(24px, 2.4vw, 34px)/1.25 var(--serif); color: var(--formica); min-height: 2.6em; transition: opacity .3s; }
.mazo__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.mazo__pila { position: relative; height: clamp(440px, 46vw, 620px); min-width: 0; }
.carta-foto { position: absolute; left: 50%; top: 50%; width: min(78%, 420px); aspect-ratio: 4 / 5; margin: 0; padding: 12px 12px 54px; background: #fff; border-radius: 10px; box-shadow: 0 30px 50px -28px rgba(74, 24, 40, .65); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); transition: transform .6s var(--ease), opacity .4s; cursor: grab; touch-action: pan-y; }
.carta-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; pointer-events: none; }
.carta-foto figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; font: italic 400 18px/1.2 var(--serif); color: var(--bordo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta-foto.sale { transform: translate(60%, -60%) rotate(24deg); opacity: 0; }

/* =========================================================
   RESERVAS
   ========================================================= */
.reservar { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 96px); align-items: start; margin: 0 auto; width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); }
.reservar__foto { position: relative; margin: 0; min-width: 0; }
.reservar__foto > img:first-child { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 280px 280px 30px 30px; border: 10px solid var(--rosa); }
.reservar__mozo { position: absolute; right: -24px; bottom: -30px; width: clamp(130px, 14vw, 190px); height: auto; transform: rotate(6deg) scaleX(-1); }
.reservar__form { min-width: 0; }
.marco { position: relative; margin-top: 44px; padding: 40px clamp(18px, 3vw, 36px) clamp(20px, 3vw, 36px); border: 2px solid var(--bordo); border-radius: 30px; }
.marco__titulo { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); padding: 0 18px; background: var(--mantel); font: 400 42px/1 var(--serif); color: var(--bordo); white-space: nowrap; }
.marco [data-kit="reservas"] .kit-resv { padding: 0; border: 0; box-shadow: none; background: transparent; }

/* =========================================================
   CÓMO LLEGAR · la vidriera
   ========================================================= */
.llegar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin: 0 auto; width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); }
.vidriera { position: relative; min-width: 0; padding: 0 0 70px; }
.toldo { position: relative; z-index: 2; height: 74px; margin: 0 -18px; border-radius: 10px 10px 0 0; background: repeating-linear-gradient(90deg, var(--toldo) 0 34px, #fff 34px 68px); box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .35); }
.toldo::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 26px; background: radial-gradient(circle at 17px 0, var(--toldo) 16px, transparent 17px) 0 0 / 68px 26px repeat-x, radial-gradient(circle at 51px 0, #fff 16px, transparent 17px) 0 0 / 68px 26px repeat-x; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .2)); }
.vidriera__vidrio { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border: 14px solid #f4ede6; border-top: 0; background: var(--formica); box-shadow: 0 0 0 2px var(--borde); }
.vidriera__vidrio > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.visillo { position: absolute; bottom: 0; width: 50.5%; height: 58%; background: repeating-linear-gradient(90deg, #fff 0 18px, #efe8e1 18px 20px, #fff 20px 26px); box-shadow: 0 -2px 0 #e2d8cf, inset 0 6px 0 #d9cfc6; transition: transform 1.1s cubic-bezier(.7, 0, .2, 1); }
.visillo::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: radial-gradient(circle at 10px 7px, #cfc4ba 4px, transparent 5px) 0 0 / 26px 14px repeat-x; }
.visillo--izq { left: 0; transform-origin: left; }
.visillo--der { right: 0; transform-origin: right; }
.vidriera.espia .visillo--izq, .vidriera:hover .visillo--izq { transform: translateX(-82%) scaleX(.6); }
.vidriera.espia .visillo--der, .vidriera:hover .visillo--der { transform: translateX(82%) scaleX(.6); }
.vidriera__neon { position: absolute; left: 50%; top: 14%; transform: translateX(-50%) rotate(-8deg); font: 400 clamp(22px, 2.6vw, 36px)/1 var(--rotulo); color: var(--rosa); text-shadow: 0 0 6px rgba(229, 155, 168, .9), 0 0 18px rgba(229, 155, 168, .7); white-space: nowrap; letter-spacing: .02em; animation: neon 4s infinite; }
@keyframes neon { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .35; } 95% { opacity: 1; } 96% { opacity: .5; } }
.vidriera__boton { white-space: nowrap; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid var(--bordo); background: var(--mantel); color: var(--bordo); font: 400 11px/1 var(--rotulo); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.llegar__info { min-width: 0; }
.datos { margin: 6px 0 30px; display: grid; gap: 22px; }
.datos div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; border-bottom: 1.5px dashed var(--borde); }
.datos dt { font: 400 11px/1.9 var(--rotulo); letter-spacing: .12em; color: var(--bordo); text-transform: uppercase; }
.datos dd { margin: 0; font-weight: 600; font-size: 17px; }
.datos__sub { font-weight: 400; font-size: 14.5px; color: #6d4552; }
.llegar__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   FOOTER
   ========================================================= */
.pie { background: var(--rosa); color: var(--bordo); padding: var(--aire) var(--pad) 40px; }
.pie__arriba { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; max-width: var(--max); margin: 0 auto 60px; }
.pie__cinta { width: min(460px, 80vw); height: auto; }
.pie__frase { margin: 0; font: 400 clamp(32px, 3.6vw, 52px)/1.02 var(--serif); text-align: right; }
.pie__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; max-width: var(--max); margin: 0 auto; padding: 36px 0; border-top: 2px solid var(--bordo); border-bottom: 2px solid var(--bordo); }
.pie__cols div { display: grid; gap: 6px; align-content: start; font-size: 15px; }
.pie__cols b { font: 400 11px/1.6 var(--rotulo); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.pie__cols a { color: var(--bordo); text-decoration: none; }
.pie__cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie__credito { max-width: var(--max); margin: 28px auto 0; font-size: 13px; text-align: center; color: var(--bordo); }
.pie__credito a { color: var(--bordo); font-weight: 700; }

/* =========================================================
   EL MOZO · mascota fija + chat
   ========================================================= */
.mozo { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 8990; pointer-events: none; }
.mozo > * { pointer-events: auto; }
.mozo__boton { position: relative; display: block; width: 104px; height: 108px; border: 0; padding: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(140%); transition: opacity .5s, transform .6s var(--ease); }
.mozo.visible .mozo__boton { opacity: 1; transform: none; }
.mozo__cuerpo { display: block; transform-origin: 50% 100%; }
.mozo__cuerpo img { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(74, 24, 40, .35)); }
.mozo.camina .mozo__cuerpo { animation: pasito .42s ease-in-out infinite; }
@keyframes pasito { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-6px); } }
.mozo.festeja .mozo__cuerpo { animation: festeja .8s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes festeja { 0% { transform: none; } 30% { transform: translateY(-26px) rotate(-10deg) scale(1.08); } 60% { transform: translateY(0) rotate(6deg); } 100% { transform: none; } }
.mozo__globo { position: absolute; left: 88px; bottom: 64px; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--mantel); color: var(--formica); font: 700 12.5px/1.2 var(--sans); white-space: nowrap; box-shadow: 0 10px 22px -10px rgba(74, 24, 40, .5); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: left bottom; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.mozo__globo.on { opacity: 1; transform: none; }
.mozo__plato { position: absolute; left: 6px; top: 22px; width: 38px; height: 38px; border-radius: 50%; background: center / cover var(--rosa); border: 3px solid #fff; opacity: 0; transform: scale(0); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.mozo__plato.on { opacity: 1; transform: scale(1); }
.mozo__chat { position: absolute; left: 0; bottom: 118px; width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 520px); display: flex; flex-direction: column; border-radius: 24px; background: var(--mantel); color: var(--formica); box-shadow: 0 30px 60px -20px rgba(74, 24, 40, .6); border: 2px solid var(--bordo); overflow: hidden; transform-origin: left bottom; animation: chat-in .35s var(--ease); }
@keyframes chat-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.mozo__chat-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 14px 20px; background: var(--bordo); color: var(--mantel); }
.mozo__chat-cabeza b { font: 400 26px/1 var(--serif); }
.mozo__x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 247, 240, .15); color: var(--mantel); font-size: 24px; line-height: 1; cursor: pointer; }
.mozo__mensajes { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; animation: chat-in .3s var(--ease); }
.msg--mozo { align-self: flex-start; background: var(--visillo); border-bottom-left-radius: 4px; }
.msg--yo { align-self: flex-end; background: var(--bordo); color: var(--mantel); border-bottom-right-radius: 4px; }
.msg a { color: inherit; font-weight: 700; }
.mozo__preguntas { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 16px; border-top: 1.5px solid var(--borde); }
.mozo__preguntas button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--bordo); background: transparent; color: var(--bordo); font: 600 13px/1 var(--sans); cursor: pointer; }
.mozo__preguntas button:hover { background: var(--bordo); color: var(--mantel); }

/* píldora del panel a la derecha del mozo, sin pisarse; aparece después del hero */
html:not(.pasa-hero) .kit-demo-pill { opacity: 0 !important; pointer-events: none; transform: translateY(20px) !important; }
.kit-demo-pill { left: 128px !important; }

/* =========================================================
   KIT con la piel del bodegón: comanda, reservas, popups
   ========================================================= */
.kit-pop__title { font: 400 34px/1 var(--serif) !important; color: var(--bordo); text-transform: none !important; }
.kit-fab { background: var(--formica) !important; border-color: var(--formica) !important; }
.kit-fab__label { font: 400 11px/1 var(--rotulo); letter-spacing: .06em; text-transform: uppercase; }
.kit-cart .kit-pop__box { background: var(--formica); color: var(--mantel); }
.kit-cart .kit-pop__head { background: var(--formica); border-color: rgba(229, 155, 168, .3); }
.kit-cart .kit-seg { background: rgba(255, 247, 240, .08); border-color: rgba(229, 155, 168, .45); }
.kit-cart .kit-line__body b { font: 700 12.5px/1.35 'Courier New', ui-monospace, monospace; letter-spacing: .02em; }
.kit-cart .kit-pop__title { color: var(--mantel); }
.kit-cart .kit-x { color: var(--mantel); }
.kit-cart .kit-lines { margin: 4px 0 20px; padding: 18px 16px 10px; background: var(--mantel); color: var(--formica); border-radius: 4px; font-family: 'Courier New', ui-monospace, monospace; position: relative; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .6); }
.kit-cart .kit-lines::before { content: 'BODEGÓN DEVOTO · COMANDA WEB'; display: block; text-align: center; font-weight: 700; font-size: 12px; letter-spacing: .08em; padding-bottom: 10px; border-bottom: 1.5px dashed var(--formica); }
.kit-cart .kit-lines::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: radial-gradient(circle at 6px 0, var(--mantel) 6px, transparent 6.5px) 0 0 / 12px 8px repeat-x; }
.kit-cart .kit-line { border-bottom: 1.5px dashed rgba(74, 24, 40, .35); }
.kit-cart .kit-line__body b { font-size: 13px; text-transform: uppercase; }
.kit-cart .kit-line__img { border-radius: 50%; }
.kit-cart .kit-form { color: var(--mantel); }
.kit-cart .kit-field span, .kit-cart .kit-pay legend { color: var(--rosa); }
.kit-cart .kit-field input, .kit-cart .kit-field textarea { background: rgba(255, 247, 240, .08); color: var(--mantel); border-color: rgba(229, 155, 168, .45); }
.kit-cart .kit-seg span, .kit-cart .kit-pay__card { color: var(--mantel); border-color: rgba(229, 155, 168, .45); }
.kit-cart .kit-seg input:checked + span { background: var(--rosa); color: var(--bordo); border-color: var(--rosa); }
.kit-cart .kit-pay input:checked + .kit-pay__card { border-color: var(--rosa); box-shadow: inset 0 0 0 1.5px var(--rosa); }
.kit-cart .kit-pay__card small { color: rgba(255, 247, 240, .75); }
.kit-cart .kit-cart__foot { background: #3d1220; color: var(--mantel); border-top-color: var(--rosa); }
.kit-cart .kit-btn--big { background: var(--rosa); color: var(--bordo); border-color: var(--rosa); font-family: var(--rotulo); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.kit-cart .kit-empty { color: var(--mantel); }
.kit-cart .kit-msg { color: #ffd2da; }
.kit-done h3 { font: italic 400 44px/1 var(--serif); color: var(--bordo); text-transform: none; }
.kit-btn { font-family: var(--rotulo); font-weight: 400; letter-spacing: .05em; font-size: 12px; text-transform: uppercase; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox { position: fixed; inset: 0; z-index: 9600; display: grid; place-items: center; padding: 20px; }
.lightbox__fondo { position: absolute; inset: 0; background: rgba(74, 24, 40, .82); animation: fade .25s; }
.lightbox__caja { position: relative; margin: 0; width: min(440px, 100%); animation: chat-in .3s var(--ease); }
.lightbox__caja img { width: 100%; max-height: 72vh; object-fit: cover; border-radius: 160px 160px 18px 18px; border: 8px solid var(--mantel); }
.lightbox__caja figcaption { margin-top: 12px; text-align: center; color: var(--mantel); font: 400 26px/1.2 var(--serif); }
.lightbox__x { position: absolute; top: -12px; right: -6px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--rosa); color: var(--bordo); font-size: 26px; cursor: pointer; }
@keyframes fade { from { opacity: 0; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .libro__adentro { grid-template-columns: 220px minmax(0, 1fr); }
  .carta__foto { display: none; }
  .it-foto { display: inline; }
  .barra__nav { gap: 18px; font-size: 14px; }
}
@media (max-width: 1020px) {
  .barra__nav { position: fixed; inset: var(--barra) 0 auto 0; flex-direction: column; gap: 0; padding: 12px var(--pad) 28px; background: var(--rosa); box-shadow: 0 30px 40px -30px rgba(74, 24, 40, .6); transform: translateY(-120%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; font: 400 30px/1.2 var(--serif); }
  .barra__nav.abierto { transform: none; visibility: visible; transition: transform .45s var(--ease); }
  .barra__nav a { padding: 12px 0; border-bottom: 1.5px solid rgba(122, 3, 49, .2); }
  .barra__nav a::after { display: none; }
  .barra__nav-cta { display: block; }
  .noche .barra__nav { background: var(--formica); }
  .hamburguesa { display: grid; }
  .solo-desk { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 26px; }
  .hero__foto { order: -1; height: 430px; min-height: 0; }
  .arco { left: 0; width: auto; border-radius: 220px 220px 26px 26px; }
  .js .arco { clip-path: inset(100% 0 0 0 round 220px 220px 26px 26px); }
  .listo .arco { clip-path: inset(0 0 0 0 round 220px 220px 26px 26px); }
  .sello-giro { right: auto; left: auto; top: 18px; right: 18px; width: 108px; height: 108px; }
  .sello-giro text { font-size: 13px; }
  .hoy-card { display: none; }
  .hero__mozo { width: 132px; left: -6px; bottom: -34px; }
  .hoy, .mila, .mazo, .reservar, .llegar { grid-template-columns: minmax(0, 1fr); }
  .mila__plato { order: -1; }
  .mesa__grilla { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bandeja" "tabla" "cuenta"; }
  .mesa__tabla { min-height: 380px; }
  .reservar__foto { max-width: 460px; }
  .vidriera { order: -1; }
  .pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :root { --barra: 72px; }
  body { font-size: 16px; }
  .barra__logo img { width: 48px; height: 48px; }
  .hero__titulo { font-size: clamp(46px, 13vw, 64px); }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__foto { height: 340px; }
  .libro__adentro { grid-template-columns: minmax(0, 1fr); border-width: 8px; border-radius: 24px; min-height: 0; }
  .libro__hoja--izq { border-radius: 24px 0 0 24px; } .libro__hoja--der { border-radius: 0 24px 24px 0; }
  .carta__indice { position: sticky; top: var(--barra); z-index: 5; padding: 14px 14px 10px; gap: 10px; border-radius: 14px 14px 0 0; box-shadow: 0 10px 18px -14px rgba(74, 24, 40, .5); }
  .carta__secciones { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 4px; }
  .carta__secciones::-webkit-scrollbar { display: none; }
  .seccion-link { flex: none; margin: 0; padding: 9px 13px; background: rgba(255, 247, 240, .6); white-space: nowrap; }
  .carta__paginas { flex-wrap: nowrap; gap: 6px; }
  .pagina { min-height: 36px; padding: 0 12px; font-size: 12.5px; flex: 1 1 auto; }
  .carta__cuerpo { padding: 22px 18px 26px; }
  #kitCarta .kit-carta__panel.dos-col { grid-template-columns: minmax(0, 1fr); }
  #kitCarta .dos-col .item.kit-item:nth-child(-n+3)::before { display: block; }
  #kitCarta .dos-col .item.kit-item:nth-child(2)::before { display: none; }
  #kitCarta .item.kit-item { grid-template-columns: minmax(0, 1fr); }
  .it-lado { justify-content: flex-start; }
  .sec-cabeza h3 { font-size: 40px; }
  .mila__disco { width: min(100%, 340px); border-width: 10px; }
  .mila__xl { width: 78px; height: 78px; font-size: 24px; right: 4%; }
  .mila__mozo { width: 100px; }
  .mila__resumen { flex-direction: column; align-items: flex-start; }
  .mesa__tabla { min-height: 330px; }
  .en-mesa { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
  .plato-btn { width: 98px; } .plato-btn img { width: 86px; height: 86px; }
  .mazo__pila { height: 440px; }
  .carta-foto { width: 82%; }
  .datos div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .marco__titulo { font-size: 34px; top: -20px; }
  .pie__frase { text-align: left; }
  .pie__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mozo__boton { width: 74px; height: 78px; }
  .mozo__globo { left: 66px; bottom: 44px; }
  .mozo__chat { bottom: 86px; }
  .kit-demo-pill { left: 92px !important; }
  .reservar__mozo { right: -6px; }
  .reservar__foto > img:first-child { aspect-ratio: 4 / 3.4; border-radius: 180px 180px 24px 24px; }
  .pizarron__mozo { width: 96px; right: -14px; bottom: -18px; }
  .pizarron__nota { max-width: 24ch; }
  .kicker { letter-spacing: .13em; }
  .toldo { margin: 0 -8px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .revela, .js .hero__kicker, .js .hero__bajada, .js .hero__ctas, .js .hero__datos, .js .hoy-card, .js .sello-giro, .js .hero__mozo { opacity: 1; transform: none; }
  .js .hero__titulo .linea > span { transform: none; }
  .js .arco { clip-path: none; } .js .arco img { transform: none; }
}

/* ajustes finos de la comanda y la confirmación */
.kit-cart .kit-pay__card { background: rgba(255, 247, 240, .08); }
.kit-cart .kit-pay__card b { color: var(--mantel); }
.kit-cart .kit-x { background: rgba(255, 247, 240, .12); color: var(--mantel); border-color: rgba(229, 155, 168, .45); }
.kit-done--ok .kit-done__ico { width: 130px; height: 136px; background: url("../img/mozo-sticker.svg") center / contain no-repeat; border: 0; box-shadow: none; border-radius: 0; animation: festeja .9s cubic-bezier(.34, 1.56, .64, 1); }
.kit-done--ok .kit-done__ico svg { display: none; }