/* Marga. Prototipo de opciones de inicio */
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 400; font-display: swap; src: url(../assets/fonts/barlow-semi-condensed-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 500; font-display: swap; src: url(../assets/fonts/barlow-semi-condensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-display: swap; src: url(../assets/fonts/barlow-semi-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 700; font-display: swap; src: url(../assets/fonts/barlow-semi-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 800; font-display: swap; src: url(../assets/fonts/barlow-semi-condensed-800.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 900; font-display: swap; src: url(../assets/fonts/barlow-semi-condensed-900.woff2) format('woff2'); }

/* Reemplazos con el mismo ancho que Barlow: mientras llega la fuente real, el texto ocupa las mismas líneas y nada se mueve */
@font-face { font-family: 'Condensada Reemplazo'; src: local('Arial'), local('Helvetica'), local('Roboto'); size-adjust: 90%; }
@font-face { font-family: 'Texto Reemplazo'; src: local('Arial'), local('Helvetica'), local('Roboto'); size-adjust: 86%; }

:root {
  --verde: #2F3A1D; --mostaza: #D3953D; --terracota: #AD4525; --beige: #F3E6CC; --verde-profundo: #1C2310;
  --display: 'Barlow Semi Condensed', 'Condensada Reemplazo', sans-serif;
  --texto: 'Barlow Semi Condensed', 'Texto Reemplazo', sans-serif;
  --r-s: 12px; --r-m: 18px; --r-l: 28px;
  --afiche: 5.5vmin 7vmin 6vmin 8vmin / 7vmin 5vmin 8vmin 6vmin;
  --navh: clamp(60px, 7svh, 64px);
  --vuelo: 55svh;
  --sale: cubic-bezier(.16, 1, .3, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --gut: max(clamp(16px, 2.6vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
/* Evitar el zoom por doble toque en toda la página; conservar scroll y zoom con dos dedos. */
html, body { touch-action: manipulation; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
html.pedido-abierto { overflow: hidden; }
body { margin: 0; background: var(--verde); color: var(--beige); font: 500 17px/1.45 var(--texto); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, canvas, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p, ul, figure, address { margin: 0; padding: 0; font-style: normal; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .9; }
:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 3px; border-radius: 6px; }
/* Alinear el contenido, descontando el aire interior de cada sección. */
section[id] { scroll-margin-top: calc(var(--nav-height, 60px) + 24px - var(--anchor-inset, 0px)); }
#carta { --anchor-inset: clamp(24px, 5vh, 60px); }
#horarios, #nosotros { --anchor-inset: clamp(70px, 11vh, 130px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 60; padding: 8px 12px; background: var(--beige); color: var(--verde); border-radius: 8px; font-weight: 600; }
.saltar:focus { top: 8px; }

.has-cursor, .has-cursor * { cursor: none !important; }
/* El cursor es la A-porción como un sticker: relleno y borde se eligen según lo que tiene abajo */
.cursor { width: 26px; aspect-ratio: 156 / 215; background: var(--relleno); -webkit-mask: url("data:image/webp;base64,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") center / contain no-repeat; mask: url("data:image/webp;base64,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") center / contain no-repeat; transition: background-color .18s; }
.cursor-borde { --relleno: var(--mostaza); --borde: var(--verde-profundo); position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; filter: drop-shadow(0 0 .8px var(--borde)) drop-shadow(0 0 .8px var(--borde)); }
[data-tinta="terracota"] { --relleno: var(--terracota); --borde: var(--beige); }
[data-tinta="verde"] { --relleno: var(--verde); --borde: var(--beige); }
[data-tinta="beige"] { --relleno: var(--beige); --borde: var(--verde-profundo); }
[data-tinta="mostaza"] { --relleno: var(--mostaza); --borde: var(--verde-profundo); }
.flyer { position: fixed; left: 0; top: 0; z-index: 66; pointer-events: none; }
.grano { position: fixed; inset: 0; z-index: 48; pointer-events: none; background: url(../assets/textura/grano.webp); opacity: .2; }
.fondo { position: fixed; inset: 0; z-index: -1; background: var(--verde); }

/* Navegación: siempre a mano, enlaces reales */
.nav { position: fixed; left: 0; right: 0; top: 0; z-index: 40; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 10px var(--gut); transition: transform .45s var(--sale), background-color .3s; color: var(--beige); }
.nav__logo { margin-right: auto; width: clamp(92px, 9vw, 190px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.nav__links { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); font-family: var(--display); font-weight: 800; font-size: clamp(15px, .8vw + 11px, 34px); text-transform: uppercase; }
.nav__links a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; justify-content: center; text-decoration: none; padding: 0; }
.nav__links a:not(.nav__btn):hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; }
.nav__btn { padding: 0 12px !important; border-radius: var(--r-s); background: var(--terracota); box-shadow: inset 0 0 0 2px var(--beige); }
.nav.es-solida { background: var(--verde-profundo); }
.nav.es-solida .nav__logo { opacity: 1; pointer-events: auto; }
.nav.se-va { transform: translateY(-105%); }
/* sin JavaScript nadie le pone el fondo: se queda arriba en vez de flotar transparente sobre el texto */
html:not(.js) .nav { position: absolute; }
@media (max-width: 430px) { .nav__links a.nav__opt { display: none; } .nav { gap: 10px; } }

/* Botones */
.btn { padding: .58em .95em .62em; border-radius: var(--r-s); background: var(--terracota); color: var(--beige); font-family: var(--display); font-weight: 800; font-size: var(--btn, clamp(19px, 1.9vw, 30px)); line-height: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color .25s; }
.btn:hover { background: #952f13; }
.btn--linea { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--linea:hover { background: rgb(243 230 204 / .14); }
.btn--ancho { display: block; width: 100%; }
.btn[disabled] { opacity: .45; }

/* Hero: el contenido fluye en columna, así el texto y la pizza no se pueden pisar */
.hero-pista { position: relative; scroll-margin-top: 0; }
.js:not(.quieto) .hero-pista { height: calc(100vh + var(--vuelo)); height: calc(100svh + var(--vuelo)); }
.hero { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; height: 100svh; padding: var(--navh) var(--gut) 0; overflow-x: clip; color: var(--beige); --logo: min(100%, 44svh); --claim: min(14.2vw, 7svh); --h1: clamp(19px, min(6.2vw, 3.05svh), 54px); --sub: clamp(14px, min(4vw, 2svh), 24px); --btn: clamp(14.5px, min(4.15vw, 2.16svh), 27px); --aire-logo: clamp(13px, 3.6svh, 38px); }
/* Celular: un poco menos de aire entre el logo y el claim */
@media (max-width: 759px) { .hero { --aire-logo: clamp(12px, 3svh, 32px); } }
.hero__col { position: relative; z-index: 5; flex: none; pointer-events: none; }
.hero__col a { pointer-events: auto; }
.logo { display: block; position: relative; width: var(--logo); aspect-ratio: 95.55 / 22.45; }
.logo__m { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 17.33% 0 0); }
.logo__a { position: absolute; left: 83.96%; top: .31%; width: 16.06%; height: 93.05%; }
.js:not(.quieto) .logo__a { opacity: .16; }
.claim { margin-top: var(--aire-logo); font: 900 var(--claim)/.86 var(--display); text-transform: uppercase; }
.claim span { display: block; overflow: hidden; padding: .2em 0 .08em; margin: -.2em 0 -.08em; }
.claim i { display: block; font-style: normal; }
.js:not(.quieto) .claim i { animation: sube 1s var(--sale) both; }
.js:not(.quieto) .claim span:nth-child(2) i { animation-delay: .07s; }
.js:not(.quieto) .claim span:nth-child(3) i { animation-delay: .14s; }
@keyframes sube { from { transform: translateY(125%); } to { transform: none; } }
.hero__txt { margin-top: clamp(8px, 1.8svh, 24px); }
.hero__h1 { font-size: var(--h1); font-weight: 800; line-height: 1; }
.hero__sub { margin-top: .45em; font-size: var(--sub); font-weight: 500; line-height: 1.32; }
.hero__dir { white-space: nowrap; }
.estado { display: block; margin-top: .1em; font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(8px, 1.4svh, 20px); }
@media (max-width: 340px) { .hero .btn { padding-inline: .62em; } }

/* La pizza: su tamaño depende del lugar que le deja el texto */
.hero__escena { position: relative; z-index: 2; flex: 1 1 0; min-height: 0; margin: 0 calc(var(--gut) * -1) -5svh; container-type: size; }
.pizza { position: absolute; left: var(--cx, 60%); top: var(--cy, 52%); --d: min(84cqw, 98cqh); width: calc(var(--d) / .7377); aspect-ratio: 1; transform: translate(-50%, -50%); }
.pizza__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.pizza.en-porciones .pizza__img { visibility: hidden; }
.rueda { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.cuna { position: absolute; width: 50%; height: 50%; background-image: var(--foto); background-size: 200% 200%; background-repeat: no-repeat; will-change: transform; visibility: hidden; pointer-events: auto; touch-action: pan-y; }
.en-porciones .cuna { visibility: visible; }
.cuna--ne { left: 50%; top: 0; background-position: 100% 0; }
.cuna--no { left: 0; top: 0; background-position: 0 0; }
.cuna--so { left: 0; top: 50%; background-position: 0 100%; }
.cuna--se { left: 50%; top: 50%; background-position: 100% 100%; }
/* La porción libre: un cuadrante con la punta en su esquina de abajo a la derecha */
.vuela { position: absolute; left: 0; top: 0; z-index: 8; transform-origin: 100% 100%; will-change: transform, opacity; pointer-events: none; visibility: hidden; }
.vuela__sombra { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); filter: brightness(0) blur(6px); will-change: opacity; }
.hero.en-porciones .vuela { visibility: visible; }
.vuela .cuna { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background-image: var(--foto); will-change: auto; }
.vuela.en-reposo > .cuna { pointer-events: auto; }
.quieto .vuela, .quieto .rueda { display: none; }

/* El ambiente de la pizza: la luz tibia del horno, que respira muy lento, y la mesada enharinada. Se corre a donde está la pizza (--px, --py, --pd) desde site.js, y se funde abajo para que el hero no deje un corte al irse. El fundido es un degradé al verde del fondo y no una máscara, que obligaría a recomponer toda la capa en cada cuadro */
.hero { --px: 50%; --py: 72%; --pd: 92vw; }
.hero__ambiente { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__ambiente::after { content: ""; position: absolute; inset: 80% 0 0; background: linear-gradient(rgb(47 58 29 / 0), var(--verde)); }
.hero__sombra, .hero__brasa { position: absolute; inset: 0; }
.hero__sombra { background: radial-gradient(ellipse 90% 90% at var(--px) var(--py), transparent 45%, rgb(28 35 16 / .42) 100%); }
.hero__brasa { opacity: .86; background: radial-gradient(circle at var(--px) var(--py), rgb(211 149 61 / .26) calc(var(--pd) * .45), rgb(173 69 37 / .15) calc(var(--pd) * .6), rgb(173 69 37 / .05) calc(var(--pd) * .8), transparent calc(var(--pd) * 1.05)); }
.js:not(.quieto) .hero__brasa { will-change: opacity; animation: respira 7s ease-in-out infinite alternate; }
@keyframes respira { from { opacity: .72; } to { opacity: 1; } }
.hero__harina { position: absolute; left: var(--px); top: var(--py); width: calc(var(--pd) * 2.1); aspect-ratio: 1; transform: translate(-50%, -50%); background: url(../assets/textura/harina.webp) center / 100% 100% no-repeat; }

/* Pantallas apaisadas: texto a la izquierda, pizza grande a la derecha */
@media (min-aspect-ratio: 1/1) {
  .hero { display: block; --px: 73%; --py: 56%; --pd: 72svh; --logo: min(100%, 78svh, 880px); --claim: min(7.8vw, 13svh); --h1: clamp(19px, min(2.2vw, 3.75svh), 60px); --sub: clamp(14px, min(1.25vw, 2.2svh), 28px); --btn: clamp(15px, min(1.72vw, 2.8svh), 34px); --aire-logo: calc(var(--logo) * .1105); }
  .hero__col { display: flex; flex-direction: column; width: 47vw; height: 100%; padding-bottom: clamp(16px, 7svh, 90px); }
  .hero__txt { margin-top: auto; padding-top: 8px; }
  .hero__escena { position: absolute; left: 46%; right: 0; top: 20%; bottom: -8%; margin: 0; }
  .pizza { left: 50%; top: 50%; --d: min(100cqw, 100cqh); }
}
/* Teléfonos acostados: poco alto, todo más compacto */
@media (min-aspect-ratio: 1/1) and (max-height: 520px) {
  .hero { --logo: min(100%, 50svh); --claim: min(5vw, 11svh); --h1: clamp(17px, 5.3svh, 23px); --sub: 13.5px; --btn: 15px; }
  .hero__col { padding-bottom: 10px; }
  .claim { display: flex; flex-wrap: wrap; column-gap: .24em; }
  .hero__escena { top: 15%; bottom: -14%; left: 50%; }
  .hero__sub { margin-top: .25em; }
  .btn { min-height: 38px; padding-top: 0; padding-bottom: 0; }
}

/* Cintas cruzadas */
.cintas { position: relative; z-index: 7; padding: clamp(26px, 5vh, 58px) 0; overflow: clip; }
.cinta { width: 108vw; margin-left: -4vw; overflow: clip; white-space: nowrap; padding: .24em 0; font: 900 clamp(34px, 5vw, 88px)/1 var(--display); text-transform: uppercase; }
.cinta--a { background: var(--mostaza); color: var(--verde); transform: rotate(-3deg); }
.cinta--b { background: var(--verde); color: var(--beige); margin-top: .1em; transform: rotate(3deg); box-shadow: 0 0 0 2px rgb(243 230 204 / .16); }
.cinta__pista { display: inline-flex; will-change: transform; }
.cinta__grupo { display: inline-flex; align-items: center; flex: none; }
.cinta__grupo span { padding: 0 .36em; }
.cinta__grupo svg { height: .78em; aspect-ratio: 341.04 / 400.67; flex: none; }
.cinta--a svg { fill: var(--terracota); }
.cinta--b svg { fill: var(--beige); }
.quieto .cinta__grupo + .cinta__grupo { display: none; }
.quieto .cinta { white-space: normal; }
.quieto .cinta__grupo { flex-wrap: wrap; }

/* Enlaces de contacto y ubicación: un ícono sobrio y una raya que se redibuja al pasar el mouse. Toman el color de donde estén */
.iconos { position: absolute; width: 0; height: 0; overflow: hidden; }
.enlace { --raya: 1.5px; display: inline-flex; align-items: baseline; gap: .36em; max-width: 100%; text-decoration: none; white-space: nowrap; }
.enlace__txt { line-height: 1.2; padding-bottom: .06em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% var(--raya) no-repeat; }
.enlace__ic { align-self: center; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .88; transition: transform .3s var(--sale), opacity .25s; will-change: transform; }
.enlace__ic--pin { fill: currentColor; stroke: none; }
.enlace--grande { --raya: 2px; gap: .28em; }
.enlace--grande .enlace__txt { line-height: 1; padding-bottom: .1em; }
@keyframes raya { 0% { background-size: 100% var(--raya); background-position: 100% 100%; } 45% { background-size: 0 var(--raya); background-position: 100% 100%; } 46% { background-size: 0 var(--raya); background-position: 0 100%; } 100% { background-size: 100% var(--raya); background-position: 0 100%; } }
@media (hover: hover) {
  .enlace:hover .enlace__txt { animation: raya .7s var(--sale); }
  /* Los íconos son chicos y de trazo fino: girarlos o moverlos medio píxel los hace temblar de lejos.
     Solo suben, sin rebote y en píxeles enteros. */
  .enlace:hover .enlace__ic { opacity: 1; transform: translateY(-2px); }
  /* el pin no gira: da un saltito, como marcando el lugar */
  .enlace:hover .enlace__ic--pin { transform: translateY(-3px); }
}
.enlace:focus-visible .enlace__ic { opacity: 1; transform: translateY(-2px); }
.enlace:active .enlace__ic { transform: scale(.94); transition-duration: .1s; }
.quieto .enlace__txt, .quieto .enlace__ic { animation: none !important; transition: none; transform: none !important; }

/* Carta: la figura roja. Una pestaña por vez y filas compactas, para verla casi entera sin scrollear. */
.s-carta { background: var(--verde); position: relative; z-index: 6; padding: clamp(24px, 5vh, 60px) clamp(10px, 2.4vw, 36px) clamp(40px, 7vh, 80px); }
.figura { --fp: clamp(18px, 3.2vw, 56px); position: relative; padding: clamp(22px, 2.8vw, 46px) var(--fp) clamp(22px, 2.8vw, 44px); background: var(--terracota); color: var(--beige); border-radius: var(--afiche); box-shadow: 0 0 0 clamp(4px, .85vmin, 11px) var(--mostaza); }
.figura__t { position: relative; z-index: 6; font-size: clamp(58px, 9vw, 184px); line-height: .95; }
.carta__menu { position: relative; z-index: 6; }
.carta__barra { position: sticky; top: var(--nav-height, var(--navh)); z-index: 8; margin: clamp(10px, 2vw, 18px) calc(var(--fp) * -1) 0; padding: 8px var(--fp); background: var(--terracota); transition: top .45s var(--sale); }
html:has(.nav.se-va) .carta__barra { top: 0; }
.carta__tabs { position: relative; display: flex; gap: 4px; width: max-content; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 15px; }
.carta__tabs::-webkit-scrollbar { display: none; }
/* Si las pestañas no entran: un fundido avisa que hay más, y un punto, que ahí hay cosas del pedido */
.carta__tira { position: relative; width: max-content; max-width: 100%; }
/* el contorno va arriba de todo: lo que se corre y el fundido quedan por debajo */
.carta__tira::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 15px; box-shadow: inset 0 0 0 2px rgb(243 230 204 / .55); pointer-events: none; }
.carta__borde { position: absolute; top: 0; bottom: 0; z-index: 2; width: 34px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.carta__borde--izq { left: 0; border-radius: 15px 0 0 15px; background: linear-gradient(90deg, var(--terracota) 30%, rgb(173 69 37 / 0)); }
.carta__borde--der { right: 0; border-radius: 0 15px 15px 0; background: linear-gradient(270deg, var(--terracota) 30%, rgb(173 69 37 / 0)); }
.hay-izq .carta__borde--izq, .hay-der .carta__borde--der { opacity: 1; }
.carta__borde::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--mostaza); box-shadow: 0 0 0 1px var(--verde-profundo); scale: 0; transition: scale .4s var(--rebote); }
.carta__borde--izq::after { left: 8px; }
.carta__borde--der::after { right: 8px; }
.con-izq .carta__borde--izq::after, .con-der .carta__borde--der::after { scale: 1; }
.carta__pastilla { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 11px; background: var(--beige); }
.carta__tab { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px clamp(11px, 1.3vw, 22px); border-radius: 11px; font: 800 clamp(16.5px, 1.43vw, 25px)/1 var(--display); text-transform: uppercase; white-space: nowrap; transition: color .3s; }
.carta__tab.es-activa { color: var(--terracota); }
html:not(.js) .carta__barra { display: none; }
.carta__cuenta { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; background: var(--mostaza); color: var(--verde-profundo); font: 800 15px/1 var(--display); }
.carta__cuenta[hidden] { display: none; }
.carta { position: relative; margin-top: clamp(10px, 1.4vw, 20px); }
.js .carta__panel:not(.es-activo) { display: none; }
.carta__sec + .carta__sec { margin-top: clamp(18px, 1.9vw, 30px); }
html:not(.js) .carta__panel + .carta__panel { margin-top: clamp(18px, 1.9vw, 30px); }
.carta__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px; padding-bottom: 7px; border-bottom: 2px solid var(--beige); }
.carta__sub { font-size: clamp(24px, 2.2vw, 40px); line-height: 1; }
.carta__nota { font-size: clamp(14px, 1vw, 17px); line-height: 1.25; font-weight: 500; }
.carta__intro { margin: 5px 0 clamp(18px, 1.9vw, 30px); }
.carta__intro .carta__nota { margin-top: 7px; line-height: 1.4; text-wrap: balance; }
.carta__importe { white-space: nowrap; }
.carta__lista { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(26px, 3.4vw, 60px); }
.plato { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: clamp(9px, 1vw, 16px); min-height: clamp(54px, 4.1vw, 72px); padding: 5px 0; border-bottom: 1px solid rgb(243 230 204 / .32); }
.plato__txt { display: flex; flex-direction: column; min-width: 0; }
.plato__nombre { font: 800 clamp(19.5px, 1.62vw, 30px)/1.06 var(--display); text-transform: uppercase; text-decoration: underline solid transparent; text-decoration-thickness: .07em; text-underline-offset: .1em; text-decoration-skip-ink: none; transition: text-decoration-color .25s; }
.plato__detalle { font-size: clamp(13.5px, .95vw, 16.5px); line-height: 1.22; margin-top: 2px; }
.plato__precio { font: 700 clamp(20px, 1.6vw, 29px)/1 var(--display); }
.plato > .qty { justify-self: end; }
.qty { display: inline-flex; align-items: center; gap: 1px; font: 800 19px var(--display); }
.qty__btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; font-size: 24px; line-height: 1; font-weight: 800; box-shadow: inset 0 0 0 2px currentColor; }
.qty__btn--add { background: var(--beige); color: var(--terracota); box-shadow: none; }
.qty__n { min-width: 24px; text-align: center; font-variant-numeric: tabular-nums; }
.qty [data-dec], .qty__n, .plato__remove { overflow: hidden; transition: width .4s var(--sale), min-width .4s var(--sale), opacity .25s, visibility .4s; }
.plato:not(.tiene) [data-dec], .plato:not(.tiene) .qty__n, .plato:not(.tiene) [data-remove] { width: 0; min-width: 0; opacity: 0; visibility: hidden; box-shadow: none; }
.plato.tiene .plato__nombre { text-decoration-color: var(--mostaza); }
/* Tacho: saca todas las unidades de un toque. Aparece junto al contador, recién al sumar */
.plato__remove { flex: none; width: 40px; height: 40px; margin-right: 4px; display: grid; place-items: center; border-radius: 10px; color: var(--beige); opacity: .8; }
.plato__remove svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
@media (hover: hover) { .plato__remove:hover { background: rgb(243 230 204 / .12); opacity: 1; } }
.plato:not(.tiene) [data-remove] { margin-right: 0; }
.qty__resumen { display: none; }
/* Opciones de una misma cosa: pinta o media, con o sin papas, 350 cc o litro */
.opciones { display: flex; gap: 2px; padding: 2px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px rgb(243 230 204 / .55); }
.opcion { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: clamp(62px, 5.2vw, 88px); min-height: 40px; padding: 2px 8px; border-radius: 9px; font: 500 clamp(12.5px, .85vw, 15px)/1.05 var(--texto); white-space: nowrap; transition: background-color .25s, color .25s; }
.opcion b { font: 700 clamp(16px, 1.15vw, 21px)/1.05 var(--display); }
.opcion.es-elegida { background: var(--beige); color: var(--terracota); }
.opcion.tiene::after { content: ""; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--mostaza); box-shadow: 0 0 0 1px var(--verde-profundo); }
/* Tragos: aparte y siempre a la vista. Se miran acá, no se suman al pedido */
.tragos { position: relative; z-index: 6; display: grid; gap: 8px clamp(22px, 3vw, 54px); margin-top: clamp(18px, 2vw, 30px); padding: clamp(14px, 1.5vw, 24px) clamp(16px, 2vw, 34px); background: var(--verde); color: var(--beige); border-radius: 2.4vmin 3.2vmin 2.8vmin 3.4vmin / 3.2vmin 2.4vmin 3.4vmin 2.8vmin; }
.tragos__cab { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.tragos__t { font-size: clamp(30px, 2.8vw, 50px); line-height: .95; color: var(--mostaza); }
.tragos__nota { font-size: clamp(13.5px, .95vw, 16px); line-height: 1.25; font-weight: 500; }
.tragos__lista { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(22px, 2.6vw, 46px); row-gap: 2px; }
.trago { display: flex; align-items: baseline; gap: 8px; font: 800 clamp(18px, 1.4vw, 25px)/1.22 var(--display); text-transform: uppercase; }
.trago__nombre { min-width: 0; }
.trago::after { content: ""; order: 1; flex: 1; min-width: 14px; border-bottom: 2px dotted rgb(243 230 204 / .45); transform: translateY(-.2em); }
.trago__precio { order: 2; font-weight: 700; color: var(--mostaza); }
.tiradas .tragos__lista { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tiradas .tragos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pedido__envases { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 15px; }
.pedido__envases[hidden] { display: none; }
.carta__alt { position: relative; z-index: 6; margin-top: 12px; font-weight: 500; }
@media (min-width: 640px) { .tragos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .carta__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tragos { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .tragos__cab { display: block; max-width: 170px; }
  .tragos__lista { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
}
/* Las pestañas quedan debajo del título en todos los tamaños. */
/* Celular: el precio y el botón al lado del nombre */
@media (max-width: 759px) {
  .plato { grid-template-columns: minmax(0, 1fr) auto; min-height: 58px; padding: 7px 51px 7px 0; column-gap: 9px; }
  .plato__txt { display: contents; }
  .plato__nombre { grid-area: 1 / 1; }
  .plato__detalle { grid-area: 2 / 1 / 2 / 3; margin-top: 3px; }
  .plato__precio { grid-area: 1 / 2; }
  .opciones { grid-area: 2 / 1 / 2 / 3; justify-self: start; margin-top: 5px; }
  .plato--opciones:has(.plato__detalle) .opciones { grid-area: 3 / 1 / 3 / 3; }
  /* Las opciones llegan hasta el + con los dos precios a la vista. Con el contador abierto ceden su lugar: quedan las medidas, y se puede pasar a la otra sin cerrarlo */
  .opciones { justify-self: stretch; height: 42px; margin-top: 4px; transition: margin-right .32s var(--sale); }
  .plato.abierta .opciones { margin-right: 107px; }
  .opcion { flex: 1 1 auto; flex-direction: row; min-width: 0; min-height: 38px; padding: 2px 6px; }
  .opcion b { max-width: 4em; margin-left: 6px; overflow: hidden; transition: max-width .32s var(--sale), margin-left .32s var(--sale), opacity .2s; }
  .plato.abierta .opcion b { max-width: 0; margin-left: 0; opacity: 0; }
  .quieto .opciones, .quieto .opcion b { transition: none; }
  /* El contador flota sobre la fila: nada se mueve al sumar. El + queda siempre bajo el dedo y la pastilla se abre hacia la izquierda */
  .plato > .qty { position: absolute; right: 0; top: 50%; translate: 0 -50%; z-index: 3; isolation: isolate; gap: 2px; }
  .plato > .qty::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 15px; background: var(--beige); box-shadow: 0 6px 18px rgb(28 35 16 / .38); opacity: 0; transition: opacity .2s; }
  .plato.abierta > .qty { color: var(--terracota); }
  .plato.abierta > .qty::before { opacity: 1; }
  .plato .qty__btn { width: 42px; height: 42px; transition: width .4s var(--sale), min-width .4s var(--sale), opacity .25s, visibility .4s, background-color .2s, color .2s; }
  .plato .plato__remove { width: 36px; height: 42px; margin-right: 0; }
  .plato.abierta .plato__remove { color: var(--terracota); opacity: 1; }
  .plato.abierta .qty__btn--add { background: var(--terracota); color: var(--beige); }
  /* Cerrado: queda solo la cantidad, en el mismo lugar y del mismo tamaño que el + */
  .plato.tiene:not(.abierta) [data-dec], .plato.tiene:not(.abierta) .qty__n, .plato.tiene:not(.abierta) [data-remove] { width: 0; min-width: 0; opacity: 0; visibility: hidden; box-shadow: none; }
  .plato.tiene:not(.abierta) [data-inc] { opacity: 0; visibility: hidden; }
  .qty__resumen { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--mostaza); color: var(--verde-profundo); font: 800 23px/1 var(--display); font-variant-numeric: tabular-nums; opacity: 0; visibility: hidden; scale: .6; transition: opacity .2s, scale .35s var(--rebote), visibility .2s; }
  .plato.tiene:not(.abierta) .qty__resumen { opacity: 1; visibility: visible; scale: 1; }
  /* Con opciones, el selector y el + comparten línea y altura: el contador abierto ocupa el mismo alto, sin escalones */
  .plato--opciones > .qty { top: auto; bottom: 7px; height: 42px; translate: none; }
  .plato--opciones > .qty::before { inset: 0 -4px; box-shadow: none; }
  .plato--opciones.abierta .qty__btn { width: 38px; height: 34px; }
  .plato--opciones.abierta .plato__remove { height: 34px; }
  .quieto .plato > .qty, .quieto .plato > .qty * { transition: none; }
}
/* Horarios */
.s-horas { background: var(--beige); position: relative; z-index: 6; min-height: 100vh; padding: clamp(70px, 11vh, 130px) var(--gut); color: var(--terracota); overflow: clip; }
.s-horas__col { position: relative; z-index: 2; max-width: min(66vw, 980px); }
.s-horas__t { font-size: clamp(41px, 5.6vw, 101px); font-weight: 800; }
.s-horas__s { font: 700 clamp(28px, 3.4vw, 58px) var(--display); margin: .4em 0 .55em; }
.horas__fila { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .5em; }
.horas__dia { position: relative; font: 800 clamp(36px, 4.1vw, 72px)/1.02 var(--display); text-transform: uppercase; }
.horas__hora { font-size: clamp(16px, 1.5vw, 24px); font-weight: 500; }
.horas__hora em { font-style: normal; font-weight: 700; }
.es-cerrado .horas__dia::after { content: ""; position: absolute; left: -3%; right: -3%; top: 50%; height: .09em; background: currentColor; border-radius: 9px; transform-origin: 0 50%; }
.es-hoy .horas__dia { background: var(--terracota); color: var(--beige); padding: 0 .16em; border-radius: 10px; }
.s-horas__dir { margin-top: clamp(20px, 3.6vh, 40px); font-weight: 500; font-size: clamp(17px, 1.4vw, 22px); }
.s-horas__calle { display: flex; width: max-content; font: 800 clamp(30px, 3.4vw, 58px)/1 var(--display); text-transform: uppercase; }
.s-horas .btn--linea:hover { background: rgb(173 69 37 / .1); }
.lluvia { --deriva: 110px; position: absolute; inset: 0 0 0 69%; pointer-events: none; }
/* En pantallas angostas los botones van uno abajo del otro: dejan libre la franja por donde pasan las porciones */
@media (max-width: 560px) { .s-horas .hero__cta { display: grid; width: max-content; } }
.gota { position: absolute; fill: currentColor; height: auto; transform: rotate(var(--r)); }
.gota:nth-child(n+13) { display: none; }
.lluvia__capa { position: absolute; inset: 0; }
/* Donde se puede, el movimiento lo resuelve el navegador junto con el scroll: van siempre sincronizados y sin pasar por JavaScript */
@supports (animation-timeline: view()) {
  .s-horas { view-timeline-name: --horas; }
  .js:not(.quieto) .gota { animation: gota linear both; animation-timeline: --horas; }
  @keyframes gota {
    from { transform: translateY(var(--a, 0px)) rotate(calc(var(--r) - 60deg)) scale(.55); }
    to { transform: translateY(calc(var(--a, 0px) * -1)) rotate(calc(var(--r) + 40deg)) scale(1); }
  }
}
@media (max-width: 759px) { .s-horas__col { max-width: none; } .lluvia { --deriva: 44px; inset: 30% 0 0 64%; } }

/* Nosotros */
.s-nos { background: var(--mostaza); position: relative; z-index: 6; color: var(--verde); overflow: clip; }
.s-nos__cab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 50px); padding: clamp(70px, 11vh, 130px) var(--gut) clamp(30px, 6vh, 70px); min-height: 92vh; }
.s-nos__t { font-size: clamp(50px, 9.4vw, 176px); max-width: 8.6em; }
.foto { overflow: hidden; border-radius: var(--r-l); }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.foto--a { grid-column: 2; grid-row: 1; aspect-ratio: 640 / 850; width: 70%; justify-self: start; rotate: -3deg; align-self: start; }
.foto--b { grid-column: 2; grid-row: 1; aspect-ratio: 640 / 900; width: 62%; justify-self: end; rotate: 2.5deg; align-self: end; }
@media (max-width: 759px) {
  .s-nos__cab { grid-template-columns: 1fr; }
  .foto--a, .foto--b { grid-column: 1; grid-row: 2; }
  .foto--b { grid-row: 2; margin-top: 32vw; }
}

/* Pie */
/* Celular y tablet: ocupa una pantalla justa y arranca debajo de la barra, así al llegar al final el logo nunca queda tapado.
   El logo es lo que cede si falta alto: la fila 1 se achica hasta 72 px, y lo demás mantiene su medida. */
.pie { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(72px, 1fr) auto auto auto; min-height: 100vh; min-height: 100svh; background: var(--verde); position: relative; z-index: 6; padding: calc(var(--nav-height, var(--navh)) + 16px) var(--gut) 0; color: var(--beige); }
.pie__marca { display: contents; }
/* contain: size hace que el logo no empuje la fila: toma el alto que le deja el resto, hasta su tamaño natural a todo el ancho */
.pie__logo { contain: size; aspect-ratio: auto; align-self: end; width: 100%; height: 100%; max-height: calc((100vw - var(--gut) * 2) / 3.1225); object-fit: contain; object-position: left bottom; }
.pie__t { margin-top: 22px; font: 800 clamp(25px, 7.6vw, 40px)/1 var(--display); text-transform: uppercase; }
/* Botonera de contacto: cada ícono lleva su nombre, porque la porción sola no se entiende como ubicación */
.botonera { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 26px; border-block: 1px solid rgb(243 230 204 / .4); }
.celda { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: clamp(62px, 9.5svh, 76px); padding: 8px 2px; font-size: 25px; color: inherit; text-decoration: none; transition: background-color .25s, color .25s; }
.celda + .celda { border-left: 1px solid rgb(243 230 204 / .4); }
/* El ícono solo sube, sin girar ni rebotar, y en píxeles enteros: girar un trazo tan fino o moverlo medio píxel
   lo hace temblar mientras cambia el color. Con will-change queda en su propia capa desde antes, y no salta al terminar. */
.celda .enlace__ic { opacity: 1; transition: transform .3s var(--sale); will-change: transform; }
.celda span { font-size: 13.5px; font-weight: 600; line-height: 1; }
@media (hover: hover) {
  .celda:hover { background: var(--beige); color: var(--verde); }
  .celda:hover .enlace__ic { transform: translateY(-3px); }
}
.celda:focus-visible .enlace__ic { transform: translateY(-3px); }
.celda:active .enlace__ic { transform: scale(.94); transition-duration: .1s; }
.quieto .celda .enlace__ic { transition: none; transform: none !important; }
/* Franja de letra chica: la separa del resto, y el color es fijo porque su fondo no cambia con el scroll */
/* Abajo deja lugar para el carrito, que flota: su alto más su margen, y unos 30 px de aire hasta los créditos.
   En pantallas altas, el margen de arriba reparte el alto que sobra. */
.franja { margin: clamp(24px, calc((100svh - 680px) / 2), 140px) calc(var(--gut) * -1) 0; padding: 20px var(--gut) calc(78px + env(safe-area-inset-bottom)); background: var(--verde-profundo); color: var(--beige); }
/* Textos legales: chicos y sin llamar la atención, pero legibles a simple vista, como pide la ley de alcohol. No van en un desplegable. */
.pie__legal { display: grid; gap: 10px; font-size: clamp(14px, .8vw, 17px); font-weight: 500; line-height: 1.35; }
.pie__ley { text-wrap: pretty; }
.pie__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.pie__priv[open] { flex-basis: 100%; }
.pie__priv summary { width: max-content; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pie__priv p { max-width: 86ch; margin-top: 6px; }
.pie__priv .enlace { --raya: 1px; }
/* Créditos: en mostaza y con la letra de los títulos, para separarlos de lo legal y que se note que se pueden tocar */
.pie__creditos { display: flex; flex-wrap: wrap; align-items: center; gap: 2px clamp(14px, 1.4vw, 26px); margin-top: 18px; padding-top: 10px; border-top: 1px solid rgb(243 230 204 / .22); font-size: clamp(14px, .8vw, 17px); font-weight: 500; }
.pie__creditos .enlace { --raya: 1px; align-items: center; padding-block: 8px; color: var(--mostaza); font: 800 clamp(16px, .95vw, 20px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 420px) { .pie__creditos span:first-child { flex-basis: 100%; } }
/* Pantallas apaisadas: el pie entra entero en una pantalla, con la frase a la izquierda y el logo como protagonista */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .pie { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto 1fr auto; min-height: 100vh; min-height: 100svh; padding: clamp(24px, 6svh, 70px) var(--gut) 0; }
  .pie__marca { grid-area: 2 / 1; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 40px; }
  .pie__t { margin-top: 0; font-size: min(4.9vw, 9svh); font-weight: 900; line-height: .9; }
  .pie__logo { contain: none; aspect-ratio: 1911 / 612; align-self: auto; width: min(46vw, 78svh); height: auto; max-height: none; }
  .botonera { grid-area: 3 / 1; align-self: end; margin-block: clamp(14px, 3svh, 40px); }
  .celda { grid-auto-flow: column; justify-content: center; align-items: center; gap: 12px; min-height: clamp(50px, 8svh, 72px); padding-block: 6px; font-size: 26px; }
  .celda span { font-size: clamp(16px, 1.2vw, 20px); }
  .franja { grid-area: 4 / 1; margin-top: 0; padding-top: clamp(12px, 2.4svh, 20px); padding-bottom: clamp(58px, 7svh, 76px); }
  .pie__legal { grid-template-columns: minmax(0, 1fr) auto; column-gap: 60px; align-items: start; }
  .pie__ley { max-width: 118ch; }
  .pie__meta { flex-direction: column; align-items: flex-end; text-align: right; }
  .pie__meta summary, .pie__copy { white-space: nowrap; }
  .pie__priv[open] { text-align: left; max-width: 46ch; }
}
.carta__menores { position: relative; z-index: 6; margin-top: 8px; font-size: clamp(14px, .8vw, 17px); font-weight: 500; }
.pedido__privacidad { margin-top: -6px; font-size: 14px; font-weight: 500; line-height: 1.3; }

/* Con el primer gesto las secciones se vuelven transparentes y el color pasa al fondo de la página, que cambia al bajar */
.fondo-vivo :is(.s-carta, .s-horas, .s-nos, .pie) { background: transparent; }

/* Selector de opción y carrito */
.fab { position: fixed; right: 14px; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--r-s); background: var(--terracota); color: var(--beige); font: 800 clamp(17px, .4vw + 13px, 26px) var(--display); text-transform: uppercase; box-shadow: inset 0 0 0 2px var(--beige); }
.fab svg { width: 28px; height: 28px; fill: currentColor; }
.fab__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--beige); color: var(--terracota); font-weight: 900; }
@media (max-width: 759px) { .fab__label { display: none; } }

/* Panel del pedido */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer__shade { position: absolute; inset: 0; background: rgb(28 35 16 / .62); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(470px, 100vw); display: flex; flex-direction: column; padding: 0 22px 22px; overflow-y: auto; overscroll-behavior: contain; background: var(--beige); color: var(--verde); }
/* El encabezado queda fijo: se llega a Cerrar desde cualquier punto del pedido */
.drawer__head { position: sticky; top: 0; z-index: 2; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 12px; background: var(--beige); border-bottom: 2px solid var(--verde); }
.drawer__head h2 { font-size: min(44px, 12vw); white-space: nowrap; color: var(--terracota); }
.drawer__close { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 13px 0 11px; border-radius: var(--r-s); box-shadow: inset 0 0 0 2px var(--verde); color: var(--verde); font: 800 20px/1 var(--display); text-transform: uppercase; transition: background-color .25s, color .25s; }
.drawer__close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.800; stroke-linecap: round; transition: transform .45s var(--sale); }
@media (hover: hover) { .drawer__close:hover { background: var(--verde); color: var(--beige); } .drawer__close:hover svg { transform: rotate(90deg); } }
.line { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 4px; padding: 11px 0; border-bottom: 1px solid rgb(47 58 29 / .28); }
.line__name { font: 800 23px/1 var(--display); text-transform: uppercase; }
.line__price { font-weight: 600; text-align: right; }
.line .qty { grid-column: 1; justify-self: start; font-size: 18px; }
.line .qty__btn { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
.line__remove { grid-column: 2; grid-row: 2; justify-self: end; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--terracota); box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .2s, color .2s; }
.line__remove svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
@media (hover: hover) { .line__remove:hover { background: var(--terracota); color: var(--beige); } }
.line--empty { display: block; padding: 18px 0; font-weight: 500; }
.pedido { margin-top: 18px; display: grid; gap: 14px; }
.pedido__retiro { display: flex; flex-direction: column; padding: 11px 14px; border-radius: var(--r-s); background: var(--verde); color: var(--beige); font-weight: 500; }
.pedido__retiro .enlace { align-self: flex-start; margin-top: 2px; font-size: min(1em, 4.3vw); }
.pedido__retiro strong { font: 800 23px/1.05 var(--display); text-transform: uppercase; }
.field { display: grid; gap: 5px; font-weight: 600; }
.field input, .field textarea { width: 100%; padding: 11px 12px; border: 0; border-radius: var(--r-s); background: #fff8e9; color: var(--verde); font: 500 17px var(--texto); box-shadow: inset 0 0 0 2px var(--verde); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--terracota); outline-offset: 1px; }
.field__error { color: var(--terracota); font-size: 15px; font-weight: 600; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--terracota); }
.pedido__aviso { margin-top: -8px; font-size: 15px; font-weight: 500; }
.pedido__total { display: flex; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--verde); padding-top: 12px; font-weight: 600; }
.pedido__total strong { font: 900 36px var(--display); }
.has-cursor .field input, .has-cursor .field textarea { cursor: text !important; }
@media (max-width: 759px) { .drawer__panel { top: auto; left: 0; width: 100%; height: 90dvh; border-radius: var(--r-l) var(--r-l) 0 0; } }
.quieto { scroll-behavior: auto; }
.palabra { display: inline-block; overflow: hidden; padding: .2em .02em .1em; margin: -.2em -.02em -.1em; vertical-align: top; }
.palabra i { display: inline-block; font-style: normal; }

/* Carrito: en pantallas táctiles chicas va al centro para no tapar los botones de la carta */
.fab { bottom: calc(12px + env(safe-area-inset-bottom)); }
@media (max-width: 759px), (max-height: 520px) {
  .fab { left: 0; right: 0; width: max-content; margin-inline: auto; }
}

/* Fotos de Nosotros: siempre cerca una de la otra */
.foto--a { align-self: center; margin-bottom: 24%; }
.foto--b { align-self: center; margin-top: 30%; }
@media (max-width: 759px) {
  .foto--a { margin-bottom: 0; width: 62%; }
  .foto--b { margin-top: 34vw; width: 56%; }
}

/* Pantallas verticales: horarios y Nosotros aprovechan todo el ancho */
@media (orientation: portrait) {
  .s-horas { min-height: 80svh; }
  .s-horas__col { max-width: none; }
  .s-horas__t { font-size: clamp(38px, 7.75vw, 108px); }
  .s-horas__s { font-size: clamp(28px, 4.6vw, 62px); }
  .horas__dia { font-size: clamp(34px, 7vw, 92px); }
  .horas__hora { font-size: clamp(15px, 2.6vw, 28px); }
  .s-horas__calle { font-size: clamp(30px, 5.4vw, 70px); }
  .lluvia { inset: 34% 0 0 74%; }
  .s-nos__cab { min-height: 80svh; }
}
/* En celular, la franja llega hasta donde terminan los horarios y los botones */
@media (max-width: 430px) and (orientation: portrait) { .lluvia { --deriva: 40px; inset: 32% 0 0 max(68%, 262px); } }

/* Pantallas muy grandes: el texto chico también crece */
@media (min-width: 1800px) {
  .qty { font-size: clamp(20px, 1.1vw, 30px); }
  .qty__btn { width: clamp(44px, 2.4vw, 60px); height: clamp(44px, 2.4vw, 60px); font-size: clamp(26px, 1.4vw, 36px); }
  .carta__alt { font-size: clamp(17px, .85vw, 24px); }
  .s-horas__t { font-size: clamp(101px, 5vw, 153px); }
  .s-horas__s { font-size: clamp(58px, 2.8vw, 84px); }
  .horas__dia { font-size: clamp(72px, 3.8vw, 112px); }
  .horas__hora { font-size: clamp(24px, 1.25vw, 36px); }
  .s-horas__dir { font-size: clamp(22px, 1.1vw, 32px); }
  .s-horas__calle { font-size: clamp(58px, 3vw, 86px); }
  .s-nos__t { font-size: clamp(176px, 8.6vw, 250px); }
}

/* Lo que se mueve con el scroll va en su propia capa: lo resuelve la placa gráfica sin repintar */
.js:not(.quieto) .cinta, .js:not(.quieto) .gota, .js:not(.quieto) .foto { will-change: transform; }
.fondo { transform: translateZ(0); }

/* Nosotros: la historia corre de costado mientras la sección queda quieta. Sin animación, se lee de arriba abajo. */
.historia { --t: min(5.8vw, 9svh); --t-xl: min(11vw, 18svh); --rueda: clamp(60px, 11svh, 124px); --recorrido: 270svh; padding: 0 var(--gut) clamp(50px, 8vh, 90px); }
.historia__panel { font: 700 var(--t)/.98 var(--display); text-transform: uppercase; max-width: 24em; }
.historia__panel + .historia__panel, .trio + .historia__panel { margin-top: .8em; }
.historia__panel b { font-weight: 900; }
/* Una palabra por tramo, igual que el día de hoy en los horarios: suma rojo sin sacarle el lugar al verde */
.historia__panel mark { display: inline-block; margin-block: .05em; padding: .02em .14em .04em; border-radius: .13em; background: var(--terracota); color: var(--beige); font-weight: 900; line-height: 1; transform: rotate(-1.2deg); }
.historia__panel--cierre { font-size: var(--t-xl); line-height: .9; max-width: none; }
.historia__panel--cierre span { display: block; margin-top: .22em; font-size: .62em; line-height: 1; }
.trio { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 34px); margin-top: 1em; flex: none; }
.trio figure { width: min(17vw, 30svh); text-align: center; }
.trio img { width: 100%; }
.trio figcaption { margin-top: .2em; font: 900 min(4.4vw, 7.6svh)/1 var(--display); text-transform: uppercase; }
.historia__rueda { display: none; }
@media (orientation: portrait) {
  .historia { --t: min(10.4vw, 6svh); --t-xl: min(14vw, 7.6svh); --recorrido: 190svh; }
  .trio figure { width: min(25vw, 15svh); }
  .trio figcaption { font-size: min(7vw, 3.6svh); }
}
.js:not(.quieto) .historia { height: calc(100vh + 230vh); height: calc(100svh + var(--recorrido)); padding: 0; }
.js:not(.quieto) .historia__vista { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; height: 100svh; padding: var(--navh) 0 calc(var(--rueda) + 22px); overflow: hidden; }
.js:not(.quieto) .historia__pista { display: flex; align-items: center; gap: clamp(36px, 7vw, 130px); width: max-content; padding: 0 var(--gut); will-change: transform; }
.js:not(.quieto) .historia__panel { flex: none; width: min(66vw, 120svh); max-width: none; margin: 0; }
.js:not(.quieto) .historia__panel--cierre { width: min(calc(100vw - var(--gut) * 2), 170svh); }
.js:not(.quieto) .trio { margin: 0; }
.js:not(.quieto) .historia__rueda { display: block; position: absolute; left: var(--gut); bottom: 12px; width: var(--rueda); height: var(--rueda); }
.historia__rueda svg { display: block; width: 100%; height: 100%; overflow: visible; }
.porcion-vacia { color: var(--verde); opacity: .16; }
.porcion-vacia path { fill: currentColor; }
.porcion__masa { fill: var(--terracota); }
.porcion__borde { fill: var(--beige); }
/* la porción cae desde afuera y se acomoda en su lugar */
.porcion { opacity: 0; transform: translateY(-13px) scale(.82); transform-origin: 50px 50px; transition: opacity .16s, transform .46s var(--sale); }
.porcion.esta-llena { opacity: 1; transform: none; }
.js:not(.quieto) .historia__rueda { will-change: opacity; }
@media (orientation: portrait) {
  .js:not(.quieto) .historia__panel { width: calc(100vw - var(--gut) * 2); }
}

/* Nosotros: polaroids apoyadas sobre la mesa, junto al título. Se pisan apenas en los bordes. */
.s-nos__cab.nos-fotos {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 2vw; align-items: center; min-height: 0;
  padding: clamp(80px, 7vw, 120px) var(--gut) clamp(56px, 6vw, 100px);
}
.nos-fotos .s-nos__t { max-width: none; font-size: clamp(54px, 7.2vw, 150px); line-height: .94; }
.nos-fotos .nos-line { display: block; white-space: nowrap; }
.nos-fotos__mesa { position: relative; height: 42vw; }
/* El giro va en --r: la animación lo lee y lo respeta */
.pola { position: absolute; width: 20vw; margin: 0; container-type: inline-size; rotate: var(--r, 0deg); }
.pola__papel {
  padding: 5.5cqw 5.5cqw 0; border-radius: 3px; background: var(--beige);
  box-shadow: 0 1px 1px rgba(28, 35, 16, .28), 0 16px 32px -16px rgba(28, 35, 16, .6);
  transition: translate .5s var(--rebote, ease), scale .5s var(--rebote, ease);
}
.pola__foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 1px; background: #26291F; }
.pola__foto::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 0 18px rgba(0, 0, 0, .18); pointer-events: none; }
.pola__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* La foto recién sacada: un velo que se aclara cuando la polaroid cae. Sin animación no se ve. */
.pola__revela { position: absolute; inset: 0; background: #3A3D30; opacity: 0; pointer-events: none; }
.pola__pie { display: block; min-height: 1em; padding: 5.5cqw 1cqw 7cqw; font: 800 8.6cqw/1 var(--display); text-transform: uppercase; color: var(--verde); box-sizing: content-box; }
@media (hover: hover) {
  .pola:hover .pola__papel { translate: 0 -6px; scale: 1.02; }
}
/* Encuadres: el salón sobre la barra, la fachada sobre el cartel, y las stories sin su texto impreso */
.pola--salon img { object-position: 45% 60%; }
.pola--fachada img { object-position: 42% 30%; transform: scale(1.55); transform-origin: 44% 26%; }
.pola--pizza img { object-position: 50% 18%; transform: scale(1.22); transform-origin: 50% 0; }
.pola--birra img { object-position: 50% 30%; transform: scale(1.12); transform-origin: 50% 10%; }
.pola--salon { left: 0; top: 7%; --r: -6deg; z-index: 1; }
.pola--pizza { left: 37%; top: -4%; --r: 4deg; z-index: 3; }
.pola--birra { left: 27%; top: 44%; --r: -3deg; z-index: 2; }
.pola--fachada { left: 63%; top: 30%; --r: 6deg; z-index: 1; }
.js:not(.quieto) .pola { will-change: transform; }
@media (max-width: 699px) {
  /* El título va de corrido en dos líneas y las fotos bajan en zigzag */
  .s-nos__cab.nos-fotos { display: block; padding: 56px var(--gut) 48px; }
  .nos-fotos .s-nos__t { font-size: 10.2vw; line-height: .96; }
  .nos-fotos .nos-line { display: inline; white-space: normal; }
  .nos-fotos .nos-line + .nos-line::before { content: ' '; }
  .nos-fotos .nos-line:nth-child(2)::after { content: ''; display: block; }
  .nos-fotos .nos-line:nth-child(3)::before { content: none; }
  .nos-fotos__mesa { height: 162vw; margin-top: 30px; }
  .pola { width: 54vw; }
  .pola--salon { left: 0; top: 0; --r: -5deg; }
  .pola--pizza { left: 44%; top: 12vw; --r: 5deg; }
  .pola--birra { left: 3%; top: 70vw; --r: -4deg; }
  .pola--fachada { left: 43%; top: 91vw; --r: 5deg; }
}