/* Marga. Prototipo de opciones de inicio */
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(../assets/fonts/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(../assets/fonts/barlow-condensed-800.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 900; font-display: swap; src: url(../assets/fonts/barlow-condensed-900.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(../assets/fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(../assets/fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(../assets/fonts/barlow-600.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: 76%; }
@font-face { font-family: 'Texto Reemplazo'; src: local('Arial'), local('Helvetica'), local('Roboto'); size-adjust: 96%; }

:root {
  --verde: #2F3A1D; --mostaza: #D3953D; --terracota: #AD4525; --beige: #F3E6CC; --verde-profundo: #1C2310;
  --display: 'Barlow Condensed', 'Condensada Reemplazo', sans-serif;
  --texto: 'Barlow', '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(48px, 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; }
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: 400 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; }
section[id] { scroll-margin-top: 70px; }
.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%); }
@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(20px, min(7vw, 3.6svh), 60px); --sub: clamp(14px, min(4vw, 2svh), 24px); --btn: clamp(15px, min(4.6vw, 2.4svh), 30px); }
.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: 936 / 226; }
.logo__m { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 16.4% 0 0); }
.logo__a { position: absolute; left: 83.12%; top: .44%; width: 16.67%; height: 95.13%; }
.js:not(.quieto) .logo__a { opacity: .16; }
.claim { margin-top: clamp(8px, 1.6svh, 22px); 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); }

/* 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; filter: drop-shadow(0 6px 12px rgb(14 18 6 / .45)); }
.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; }
.quieto .vuela, .quieto .rueda { display: none; }

/* Pantallas apaisadas: texto a la izquierda, pizza grande a la derecha */
@media (min-aspect-ratio: 1/1) {
  .hero { display: block; --logo: min(100%, 78svh, 880px); --claim: min(8.4vw, 13svh); --h1: clamp(20px, min(2.6vw, 4.2svh), 66px); --sub: clamp(14px, min(1.25vw, 2.2svh), 28px); --btn: clamp(15px, min(1.9vw, 3.1svh), 38px); }
  .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(18px, 6svh, 26px); --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 img { height: .78em; width: auto; flex: none; }
.quieto .cinta__grupo + .cinta__grupo { display: none; }
.quieto .cinta { white-space: normal; }
.quieto .cinta__grupo { flex-wrap: wrap; }

/* Carta: la figura roja */
.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 { position: relative; padding: clamp(24px, 4.4vw, 70px); 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(80px, 17vw, 330px); line-height: .84; margin-bottom: .1em; }
.carta { position: relative; z-index: 6; }
.carta__sec + .carta__sec { margin-top: clamp(34px, 5vw, 80px); }
.carta__sub { font-size: clamp(28px, 3.2vw, 52px); margin-bottom: .36em; }
.plato { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: clamp(14px, 2vw, 30px); padding: clamp(9px, 1.1vw, 18px) 0; border-top: 2px solid rgb(243 230 204 / .5); transition: padding-left .55s var(--sale); }
.plato::before { content: ""; position: absolute; left: 0; top: 50%; width: clamp(26px, 3.3vw, 52px); aspect-ratio: 156 / 215; margin-top: calc(clamp(26px, 3.3vw, 52px) * -.69); background: url(../assets/logo/a-mostaza.webp) center / contain no-repeat; transform: scale(0) rotate(-40deg); transition: transform .55s var(--rebote); }
.plato__txt { display: flex; flex-direction: column; min-width: 0; }
.plato__nombre { font: 900 clamp(44px, 6.4vw, 118px)/.92 var(--display); text-transform: uppercase; }
.plato__detalle { font-size: 15.5px; line-height: 1.3; margin-top: .35em; }
.plato__precio { font: 700 clamp(20px, 2vw, 32px) var(--display); }
.qty { display: inline-flex; align-items: center; gap: 2px; font: 800 20px var(--display); }
.qty__btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 26px; 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: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.plato:not(.tiene) [data-dec], .plato:not(.tiene) .qty__n { visibility: hidden; }
@media (hover: hover) and (min-width: 760px) { .plato:hover { padding-left: clamp(36px, 4.6vw, 72px); } .plato:hover::before { transform: none; } }
.plato.tiene { padding-left: clamp(36px, 4.6vw, 72px); }
.plato.tiene::before { transform: none; }
.carta__aviso { position: relative; z-index: 6; margin-top: 24px; font-size: 15px; font-weight: 600; color: var(--beige); }
.carta__alt { position: relative; z-index: 6; margin-top: 8px; font-weight: 500; }
.carta__alt a { text-underline-offset: .18em; }
@media (max-width: 759px) {
  .plato { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .plato__txt { grid-column: 1 / -1; }
  .plato__nombre { font-size: 13vw; }
}
/* 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(46px, 6.2vw, 112px); 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: block; font: 800 clamp(30px, 3.4vw, 58px)/1 var(--display); text-transform: uppercase; text-underline-offset: .12em; text-decoration-thickness: 2px; }
.s-horas .btn--linea:hover { background: rgb(173 69 37 / .1); }
.lluvia { position: absolute; inset: 0 0 0 69%; pointer-events: none; }
.gota { position: absolute; fill: currentColor; height: auto; transform: rotate(var(--r)); }
@media (max-width: 759px) { .s-horas__col { max-width: none; } .lluvia { 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(56px, 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 */
.pie { background: var(--verde); position: relative; z-index: 6; padding: clamp(60px, 10vh, 110px) var(--gut) 0; color: var(--beige); }
.pie__t { font: 900 clamp(50px, 13.6vw, 250px)/.86 var(--display); text-transform: uppercase; }
.pie__fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: clamp(30px, 7vh, 80px); }
.pie__nap { font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; line-height: 1.5; }
.pie__nap a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.pie__logo { width: min(100%, 420px); }
.pie__ph { font-size: 14px; font-weight: 500; padding: 18px 0 76px; }

/* 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 img { width: 21px; height: auto; }
.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: 22px; overflow-y: auto; overscroll-behavior: contain; background: var(--beige); color: var(--verde); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer__head h2 { font-size: 44px; color: var(--terracota); }
.drawer__close { font-weight: 600; text-decoration: underline; text-underline-offset: .18em; padding: 8px; }
.lines { border-top: 2px solid var(--verde); }
.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 / -1; justify-self: start; font-size: 18px; }
.line .qty__btn { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
.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 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; }
.pedido__ph { font-size: 14px; font-weight: 500; margin-top: 6px; }
.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(42px, 8.6vw, 120px); }
  .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; }
}
@media (max-width: 430px) and (orientation: portrait) { .lluvia { inset: 36% 0 0 80%; } }

/* Pantallas muy grandes: el texto chico también crece */
@media (min-width: 1800px) {
  .plato__detalle { font-size: clamp(18px, .85vw, 26px); }
  .plato__precio { font-size: clamp(32px, 1.7vw, 46px); }
  .qty { font-size: clamp(20px, 1.1vw, 30px); }
  .qty__btn { width: clamp(44px, 2.6vw, 66px); height: clamp(44px, 2.6vw, 66px); font-size: clamp(26px, 1.4vw, 38px); }
  .carta__sub { font-size: clamp(52px, 2.6vw, 74px); }
  .carta__aviso, .carta__alt { font-size: clamp(17px, .85vw, 24px); }
  .s-horas__t { font-size: clamp(112px, 5.6vw, 170px); }
  .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); }
  .pie__nap { font-size: clamp(21px, 1.1vw, 32px); }
  .pie__logo { width: min(100%, 24vw); }
  .pie__ph { font-size: clamp(14px, .7vw, 20px); }
}

/* 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; }
.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 img { position: absolute; left: 32%; bottom: 50%; width: 36%; transform-origin: 50% 100%; transform: rotate(calc(var(--i) * 45deg)); opacity: .18; transition: opacity .25s; }
.historia__rueda img.esta-llena { opacity: 1; }
@media (orientation: portrait) {
  .js:not(.quieto) .historia__panel { width: calc(100vw - var(--gut) * 2); }
}