/* MERCOPAN SALTO
   La página es el cartel colgante del logo: un cartel amarillo con borde azul sobre el mostaza de su fondo.
   Cada sección es otra pieza de papelería de panadería: la etiqueta de la vitrina, la boleta de encargo,
   la carta del equipo, los papelitos de las reseñas y el dorso de la tarjeta. Tres tintas, como una imprenta.
   Una sola página, pensada primero para el celular. */

:root {
  --mostaza: #EDB32D;      /* fondo del logo */
  --amarillo: #FFDD00;     /* el cartel */
  --azul: #0C5FA5;         /* borde y letras del logo */
  --azul-hondo: #094C86;   /* campos azules grandes (texto blanco a 8,8:1) */
  --azul-noche: #083F70;   /* hover de los botones azules */
  --tinta: #0B2A4A;        /* texto */
  --tinta-suave: #2E4A69;  /* texto secundario (contraste AA sobre papel y amarillo) */
  --papel: #FFFFFF;        /* papel blanco de envolver */
  --papel-2: #EEF1F4;      /* un tono abajo, frío, que acompaña al azul */
  --pan: #D3AB70;          /* la baguette del logo */
  --verde-wa: #25D366;
  --abierto: #12813A;
  --cerrado: #9B2C1F;

  --f-display: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-manga: 'Yellowtail', 'Brush Script MT', cursive;   /* solo la dedicatoria escrita sobre la torta */

  /* cinco tamaños, nada más */
  --step-small: .9375rem;
  --step-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.35rem + 3.6vw, 4.5rem);
  --step-display: clamp(2.5rem, 1.2rem + 4.8vw, 5.5rem);

  --r: 22px;               /* el redondeado del cartel: fotos, paneles y papeles */
  --sh-float: 0 14px 34px rgb(11 42 74 / .24);   /* solo para lo que flota: barra del pedido, panel, aviso */
  --sec: clamp(96px, 12vw, 176px);
  --gut: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
section[tabindex="-1"]:focus, footer[tabindex="-1"]:focus { outline: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: var(--step-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
svg { width: 1.2em; height: 1.2em; flex: none; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800; line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
mark { background: var(--amarillo); color: inherit; padding: 0 .15em; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.tortas :focus-visible, .foot :focus-visible, .menu :focus-visible, .cinta :focus-visible { outline-color: var(--amarillo); }

.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-left: var(--gut);
  padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px));
}

.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Pantalla de carga: el cartel baja colgando, se hamaca y sube con la cortina ---------- */
.loader {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-content: center; justify-items: center; gap: 30px;
  background: var(--mostaza); color: var(--tinta); cursor: pointer; overflow: hidden;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .8s cubic-bezier(.7, 0, .2, 1) .3s, visibility 0s 1.15s;
}
.is-loading .loader { clip-path: inset(0); visibility: visible; transition: none; }
.loader__hang { transform: translateY(-120vh); transition: transform .55s cubic-bezier(.55, 0, .8, .2); }
.is-loading .loader__hang { transform: none; transition: none; }
.loader__sign { position: relative; transform-origin: 50% -50vh; animation: colgar 2s cubic-bezier(.25, .8, .35, 1) both, mecer 2.4s ease-in-out 2s infinite alternate; }
.loader__cord { position: absolute; left: 50%; bottom: 96%; width: 4px; height: 50vh; margin-left: -2px; border-radius: 2px; background: var(--azul); }
.loader__sign img { width: min(240px, 56vw); }
.loader__txt { font-weight: 700; font-size: var(--step-lead); animation: titila 1.2s ease-in-out infinite alternate; }
@keyframes colgar {
  0% { transform: translateY(-100vh) rotate(0); }
  30% { transform: translateY(0) rotate(9deg); }
  47% { transform: rotate(-6deg); }
  63% { transform: rotate(3.5deg); }
  80% { transform: rotate(-1.6deg); }
  100% { transform: rotate(0); }
}
@keyframes mecer { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes titila { from { opacity: .55; } to { opacity: 1; } }
.intro-short .loader__sign { animation: mecer 1.2s ease-in-out infinite alternate; }

/* ---------- Botones: píldoras planas, una sola forma en toda la página ---------- */
.btn {
  --bg: var(--azul); --fg: #fff; --bg-h: var(--azul-noche);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 700 var(--step-body)/1.1 var(--f-body); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, transform .35s var(--spring);
}
.btn svg { width: 1.25em; height: 1.25em; }
.btn:hover { background: var(--bg-h); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: var(--step-small); }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: var(--step-lead); }
.btn--blue { --bg: var(--azul); --fg: #fff; --bg-h: var(--azul-noche); }
.btn--yellow { --bg: var(--amarillo); --fg: var(--tinta); --bg-h: #F2D000; }
.btn--ghost { --bg: #fff; --fg: var(--azul); --bg-h: var(--papel-2); }
.btn--ghost-light { --bg: rgb(255 255 255 / .14); --fg: #fff; --bg-h: rgb(255 255 255 / .24); }
.btn--wa { --bg: var(--verde-wa); --fg: #062B14; --bg-h: #1EBE5A; }
.btn[aria-disabled="true"] { opacity: .55; }

.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--azul); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- Header: barra simple que se achica al bajar ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 70; transition: background-color .3s; }
.top.is-scrolled { background: var(--papel); }
.bar { display: flex; align-items: center; gap: 18px; height: 84px; transition: height .35s var(--ease); }
.top.is-scrolled .bar { height: 66px; }
.brand { display: block; flex: none; }
.brand img { width: 104px; transition: width .35s var(--ease), transform .4s var(--spring); }
.brand:hover img { transform: rotate(-4deg); }
.top.is-scrolled .brand img { width: 84px; }
.nav { display: none; gap: clamp(14px, 1.8vw, 28px); margin-inline: auto; }
.nav a {
  position: relative; padding: 8px 2px; font-weight: 700; text-decoration: none; font-size: var(--step-small);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 4px; border-radius: 2px;
  background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="true"]::after { transform: scaleX(1); }
.bar__wa { display: none; }
.bar__cart {
  position: relative; margin-left: auto; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 999px; background: var(--azul); color: #fff;
}
.bar__cart svg { width: 22px; height: 22px; }
.bar__count {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--amarillo); color: var(--tinta); font-size: var(--step-small); font-weight: 800; line-height: 1;
}
.bar__count.bump { animation: bump .5s var(--spring); }
@keyframes bump { from { transform: scale(.3) translateY(-6px); } }
.burger { margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 999px; background: var(--tinta); display: grid; place-content: center; gap: 6px; position: relative; z-index: 75; }
.bar__cart:not([hidden]) + .bar__wa + .burger { margin-left: 0; }
.burger span { display: block; width: 20px; height: 3px; border-radius: 2px; background: #fff; transition: transform .4s var(--ease); }
.burger[aria-expanded="true"] { background: var(--amarillo); }
.burger[aria-expanded="true"] span { background: var(--tinta); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
@media (min-width: 1020px) {
  .nav, .bar__wa { display: inline-flex; }
  .burger { display: none; }
  .bar__cart { margin-left: 0; }
}

/* Menú del celular: entra en cascada */
.menu {
  position: fixed; inset: 0; z-index: 72; display: flex; flex-direction: column; justify-content: center; gap: 36px;
  padding: 110px var(--gut) calc(40px + env(safe-area-inset-bottom, 0px));
  background: var(--azul-hondo); color: #fff;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .6s var(--ease), visibility 0s .6s;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .6s var(--ease); }
.menu__nav { display: grid; gap: 6px; }
.menu__nav a, .menu__foot {
  opacity: 0; transform: translateY(26px);
  transition: opacity .3s, transform .5s var(--ease);
}
.menu__nav a { font: 800 var(--step-head)/1.1 var(--f-display); letter-spacing: -.02em; text-decoration: none; }
.menu__nav a[aria-current="true"] { color: var(--amarillo); }
.menu.is-open .menu__nav a, .menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * .06s); }
.menu__foot { display: grid; gap: 14px; justify-items: start; font-size: var(--step-small); }
.menu.is-open ~ main, .menu.is-open ~ .fab-wa, .menu.is-open ~ .orderbar { pointer-events: none; }
.top:has(+ .menu.is-open) { background: transparent; z-index: 73; }
.top:has(+ .menu.is-open) .brand { visibility: hidden; }
.top:has(+ .menu.is-open) .bar__cart { visibility: hidden; }

/* ---------- Inicio: el cartel ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: grid; place-items: center;
  padding: 130px var(--gut) 120px;
  background: var(--mostaza);
}
.hero__flour { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 760px) {
  .hero { padding: 120px 16px 150px; align-items: start; }
}

.sign-wrap { position: relative; z-index: 1; width: min(800px, 100%); margin-top: 64px; padding-bottom: 96px; will-change: transform, opacity; }
.sign { position: relative; transform-origin: 50% -64px; }
.sign__cord {
  position: absolute; left: 50%; bottom: calc(100% - 4px); width: 200px; height: 92px; margin-left: -100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 92'%3E%3Cpath d='M14 92 100 12 186 92' fill='none' stroke='%23fff' stroke-width='20' stroke-linejoin='round'/%3E%3Cpath d='M14 92 100 12 186 92' fill='none' stroke='%230C5FA5' stroke-width='9' stroke-linejoin='round'/%3E%3Ccircle cx='100' cy='12' r='8' fill='%230B2A4A'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
.sign__board {
  position: relative; display: grid; justify-items: center; gap: clamp(16px, 2vw, 24px); text-align: center;
  padding: clamp(28px, 4.6vw, 60px) clamp(20px, 4.6vw, 64px) clamp(30px, 4.6vw, 60px);
  background: var(--amarillo); border: clamp(6px, .8vw, 9px) solid var(--azul); border-radius: clamp(26px, 3.4vw, 44px);
  outline: clamp(5px, .7vw, 8px) solid #fff;
}
.hero__t { font-size: var(--step-display); line-height: .95; max-width: 14ch; color: var(--azul); }
.hero__lead { max-width: 44ch; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 4px; }
@media (max-width: 520px) { .hero__ctas .btn { width: 100%; } }

/* El cartel cuelga al entrar y queda con un vaivén de nada */
.js .sign { animation: colgar-cartel 2.2s cubic-bezier(.25, .8, .35, 1) both; animation-play-state: paused; }
.js:not(.is-loading) .sign { animation-play-state: running; }
@keyframes colgar-cartel {
  0% { transform: translateY(-60px) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  30% { transform: translateY(0) rotate(4deg); }
  50% { transform: rotate(-2.6deg); }
  68% { transform: rotate(1.4deg); }
  84% { transform: rotate(-.6deg); }
  100% { transform: rotate(0); }
}


/* Cinta con lo que hay en la vitrina */
.cinta { overflow: hidden; background: var(--azul-hondo); color: var(--amarillo); padding: 14px 0; }
.cinta__track { display: flex; width: max-content; animation: cinta 46s linear infinite; }
.cinta span { display: inline-flex; align-items: center; gap: 26px; padding-right: 26px; font-weight: 800; font-size: var(--step-lead); white-space: nowrap; }
.cinta span::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--mostaza); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.sec { position: relative; padding-block: var(--sec); }
.sec__head { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec__t { font-size: var(--step-head); line-height: .98; }
.sec__lead { font-size: var(--step-lead); line-height: 1.4; max-width: 46ch; }
.sub__t { font-size: var(--step-lead); font-weight: 800; letter-spacing: -.01em; }

/* Títulos que suben palabra por palabra (como moahu) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; }
.is-pre .w > span { transform: translateY(108%); }
.is-in .w > span { transform: none; transition: transform 1s var(--ease) calc(var(--wi) * .06s); }
/* Aparición al scrollear: solo lo que arranca fuera de la pantalla */
[data-reveal].is-pre { opacity: 0; transform: translateY(26px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s, transform .9s var(--ease); transition-delay: var(--d, 0s); }
.slip[data-reveal].is-pre { transform: translateY(40px) rotate(calc(var(--rot) * -2)); }
.slip[data-reveal].is-in { transform: rotate(var(--rot)); }

/* ---------- Productos: foto con su etiqueta de vitrina ---------- */
.vitrina { background: var(--papel); }
.filters { display: flex; gap: 8px; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; margin-inline: -2px; }
.filters::-webkit-scrollbar { display: none; }
.filters button {
  flex: none; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px;
  background: var(--papel-2); color: var(--tinta); font-weight: 700; font-size: var(--step-small);
  transition: background-color .2s, color .2s, transform .3s var(--spring);
}
.filters button:hover { transform: translateY(-2px); }
.filters button[aria-pressed="true"] { background: var(--azul); color: #fff; }

.shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .shop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } }
.prod {
  --strip: var(--amarillo); --on: var(--tinta); --on-soft: var(--tinta);
  display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--strip); color: var(--on);
}
.prod:nth-child(4n + 2) { --strip: var(--azul); --on: #fff; --on-soft: #fff; }
.prod:nth-child(4n + 3) { --strip: var(--mostaza); }
.prod:nth-child(4n + 4) { --strip: var(--papel-2); }
.prod.is-show { animation: pop-in .55s var(--ease) both; animation-delay: calc(var(--n) * .05s); }
@keyframes pop-in { from { opacity: 0; transform: translateY(20px); } }
.prod__img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--papel-2); }
.prod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.prod:hover .prod__img img { transform: scale(1.06); }
.prod__in { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: clamp(12px, 1.6vw, 18px); }
.prod h3 { font-size: var(--step-lead); line-height: 1.05; letter-spacing: -.015em; }
.prod__det { font-size: var(--step-small); line-height: 1.35; color: var(--on-soft); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; border: 0; }
.opts legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.opt { position: relative; }
.opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / .55); font-size: var(--step-small); font-weight: 600; line-height: 1.1; transition: background-color .2s, color .2s; }
.prod:nth-child(4n + 2) .opt span { background: rgb(255 255 255 / .16); }
.opt input:checked + span { background: var(--tinta); color: #fff; }
.prod:nth-child(4n + 2) .opt input:checked + span { background: var(--amarillo); color: var(--tinta); }
.opt input:focus-visible + span { outline: 3px solid currentColor; outline-offset: 2px; }
.prod__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.prod__price { font-weight: 700; font-size: var(--step-small); }
.add {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 16px; border: 0; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 700; font-size: var(--step-small);
  transition: transform .35s var(--spring), background-color .2s;
}
.add svg { width: 18px; height: 18px; }
.add:hover { transform: translateY(-2px); background: var(--azul-hondo); }
.add:active { transform: scale(.94); }
.prod:nth-child(4n + 2) .add { background: var(--amarillo); color: var(--tinta); }
.stepper { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; background: var(--tinta); color: #fff; padding: 2px; }
.stepper button { width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: inherit; display: grid; place-items: center; transition: background-color .2s; }
.stepper button:hover { background: rgb(255 255 255 / .16); }
.stepper svg { width: 18px; height: 18px; }
.stepper output { min-width: 24px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.prod:nth-child(4n + 2) .stepper { background: var(--amarillo); color: var(--tinta); }
@media (max-width: 719px) {
  .prod__foot { flex-direction: column; align-items: stretch; }
  .add, .prod .stepper { justify-content: space-between; width: 100%; }
  .add { justify-content: center; }
}

/* Migas que saltan al sumar algo */
.miga { position: fixed; z-index: 95; width: 7px; height: 5px; border-radius: 40%; background: var(--pan); pointer-events: none; }
/* La foto del producto vuela hasta la barra del pedido */
.vuela { position: fixed; left: 0; top: 0; z-index: 95; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; pointer-events: none; outline: 4px solid #fff; }

/* ---------- Tortas y encargos ---------- */
.tortas { background: var(--azul-hondo); color: #fff; }
.tortas .sec__t { color: var(--amarillo); }
.encargo { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 960px) { .encargo { grid-template-columns: 5fr 7fr; } }

.cake { display: grid; justify-items: center; gap: 16px; text-align: center; }
.cake__svg { width: min(440px, 100%); height: auto; overflow: visible; }
.cake__blonda { fill: #fff; stroke: #fff; stroke-width: 10; stroke-dasharray: 1 13; stroke-linecap: round; }
.cake__plate { fill: #E8EDF3; }
.cake__top { fill: var(--papel); }
.cake__txt { font-family: var(--f-manga); fill: var(--azul); font-size: 54px; }
.cake__txt.is-hint { fill: #8FA6BE; }
.cake figcaption { font-size: var(--step-small); max-width: 34ch; color: #fff; }
.cake__svg .ros { transform-box: fill-box; transform-origin: center; }
.cake.is-writing .ros { animation: ros 1.2s var(--spring) both; animation-delay: calc(var(--k) * 30ms); }
@keyframes ros { from { transform: scale(.4); } }

/* La boleta de encargo: un cupón amarillo con su línea de puntitos para cortar */
.coupon {
  --notch: 14px;
  position: relative; color: var(--tinta); background: var(--amarillo); border-radius: var(--r);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut), #0000 98%, #000) , radial-gradient(circle var(--notch) at 100% var(--cut), #0000 98%, #000); /* taste-skill-ignore: máscara que corta el borde del papel, no es un relleno */
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask: radial-gradient(circle var(--notch) at 0 var(--cut), #0000 98%, #000), radial-gradient(circle var(--notch) at 100% var(--cut), #0000 98%, #000); /* taste-skill-ignore: máscara que corta el borde del papel, no es un relleno */
  --cut: 132px;
}
.coupon__head { display: grid; gap: 8px; height: var(--cut); align-content: center; padding: 0 clamp(20px, 3vw, 36px); }
.coupon__head h3 { font-size: var(--step-lead); color: var(--azul); }
.coupon__head p { font-size: var(--step-small); font-weight: 600; max-width: 46ch; }
.coupon__body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px;
  padding: 24px clamp(20px, 3vw, 36px) clamp(22px, 3vw, 34px);
  border-top: 5px dotted var(--azul);
}
.field--wide, .coupon__acts { grid-column: 1 / -1; }
.coupon .field > span { font-size: var(--step-small); font-weight: 700; }
.coupon .field input { background: rgb(255 255 255 / .72); }
.coupon .field input:focus { background: #fff; }
.coupon__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.coupon__acts .btn--yellow { --bg: var(--tinta); --fg: #fff; --bg-h: var(--azul-hondo); }
.coupon__acts .btn--ghost-light { --bg: #fff; --fg: var(--azul); --bg-h: var(--papel); }
@media (max-width: 520px) {
  .coupon { --cut: 150px; }
  .coupon__body { grid-template-columns: 1fr; }
  .coupon__acts .btn { width: 100%; }
}

/* Algunas que hicimos: fila que se arrastra */
.hechas { margin-top: clamp(72px, 9vw, 120px); display: grid; gap: 22px; }
.hechas__row {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); cursor: grab;
}
.hechas__row::-webkit-scrollbar { display: none; }
.hechas__row.is-drag { cursor: grabbing; scroll-snap-type: none; }
.hechas__row li { flex: none; width: clamp(200px, 24vw, 300px); scroll-snap-align: start; }
.hechas__row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); user-select: none; -webkit-user-drag: none; transition: transform .5s var(--ease); }
.hechas__row li:hover img { transform: rotate(-1.5deg) scale(1.02); }

/* Tortas de la vitrina: renglones; el que señalás muestra su foto (firma de la página) */
.vt { margin-top: clamp(72px, 9vw, 120px); }
.vt__head { display: grid; gap: 10px; margin-bottom: 24px; }
.vt__head p { color: #fff; max-width: 52ch; }
.vt__index { position: relative; }
.vt__list { display: grid; gap: 8px; }
.vt__row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px 12px 10px 10px; border-radius: var(--r); background: rgb(255 255 255 / .08);
  transition: opacity .24s, background-color .24s;
}
.vt__row img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.vt__name { display: block; font: 800 var(--step-lead)/1.05 var(--f-display); letter-spacing: -.015em; }
.vt__det { display: block; font-size: var(--step-small); color: #fff; margin-top: 2px; }
.vt__row .add { background: var(--amarillo); color: var(--tinta); }
.vt__row .stepper { background: var(--amarillo); color: var(--tinta); }
.vt__frame { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .vt__index { display: grid; grid-template-columns: minmax(0, 1fr) 34%; gap: 40px; align-items: start; }
  .vt__row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px 14px 24px; }
  .vt__row img { display: none; }
  .vt__list:hover .vt__row:not(:hover):not(:focus-within) { opacity: .45; }
  .vt__row:hover, .vt__row:focus-within { background: rgb(255 255 255 / .16); }
  .vt__frame { display: block; position: sticky; top: 110px; aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--azul); }
  .vt__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .24s ease, transform .6s var(--ease); }
  .vt__frame img.is-on { opacity: 1; transform: none; }
}

/* ---------- Nosotros: la carta del equipo + un día en Mercopan ---------- */
.nosotros { background: var(--mostaza); }
.nosotros .wrap { display: grid; gap: clamp(56px, 7vw, 96px); }
@media (min-width: 1020px) { .nosotros .wrap { grid-template-columns: 5fr 7fr; align-items: start; } .carta { position: sticky; top: 100px; } }
.carta {
  position: relative; background: var(--papel); border-radius: var(--r) var(--r) 0 0;
  padding: clamp(28px, 4.6vw, 60px) clamp(22px, 4.6vw, 60px) 0;
  display: grid; gap: 1.1em; font-size: var(--step-body); line-height: 1.6;
  -webkit-mask: radial-gradient(circle 13px at 50% 100%, #0000 97%, #000) 50% 100% / 34px 100% repeat-x; /* taste-skill-ignore: máscara que corta el borde del papel, no es un relleno */
  mask: radial-gradient(circle 13px at 50% 100%, #0000 97%, #000) 50% 100% / 34px 100% repeat-x; /* taste-skill-ignore: máscara que corta el borde del papel, no es un relleno */
  padding-bottom: 28px;
}
.carta__logo { width: 92px; margin-bottom: 4px; transform: rotate(-3deg); }
.carta__firma { font-weight: 800; font-size: var(--step-lead); line-height: 1.15; margin-top: 6px; }
.carta__firma small { display: block; font-weight: 500; font-size: var(--step-small); color: var(--tinta-suave); }
.carta__tira { display: grid; gap: 12px; margin-top: 14px; padding: 22px 0 18px; border-top: 5px dotted var(--mostaza); }
.carta__tira p { font-weight: 600; }
.carta__redes { display: flex; flex-wrap: wrap; gap: 10px; }

.dia { display: grid; gap: 22px; }
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gal__it { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--azul); color: #fff; }
.gal__it img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--ease); }
.gal__it:hover img { transform: scale(1.05); }
.gal__it figcaption { padding: 10px 14px 12px; font-weight: 700; font-size: var(--step-small); }
.gal__it:nth-child(3n + 2) { background: var(--tinta); }
.gal__it:nth-child(3n) { background: var(--papel); color: var(--tinta); }
.gal__it--a { grid-row: span 2; }
.gal__it--a img { aspect-ratio: auto; flex: 1; min-height: 0; }
@media (min-width: 720px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Ubicación ---------- */
.ubicacion { background: var(--papel-2); }
.ubi { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 960px) { .ubi { grid-template-columns: 1.35fr 1fr; align-items: center; } }
@media (max-width: 959px) { .ubi__map { order: 2; } }
/* El plano: como el de El Barrio, con las cuadras reales dibujadas en los colores de Mercopan.
   La tarjeta apoya sobre un canto azul (un bloque, no una sombra) */
.ubi__map { position: relative; padding-bottom: 8px; border-radius: calc(var(--r) + 4px); background: var(--azul); }
.mapcard { position: relative; display: block; overflow: hidden; border: 4px solid var(--azul); border-radius: var(--r); background: #fff; color: var(--tinta); text-decoration: none; transition: translate .35s var(--spring); }
.mapcard:hover { translate: 0 -4px; }
.mapcard__map { display: block; width: 100%; height: auto; }
.mapcard text { font-family: var(--f-display); font-weight: 800; }
.mapcard__street { font-size: 12px; letter-spacing: .08em; fill: var(--azul); fill-opacity: .8; }
.mapcard__plaza { fill: #2F7A4B; }
.mapcard__main { font-size: 15px; fill-opacity: 1; }
.mapcard__bubble { font-size: 15px; fill: #fff; }
.mapcard__label { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; background: #fff; border: 3px solid var(--azul); border-radius: 18px; }
.mapcard__addr { flex: 1; min-width: 0; font: 800 var(--step-body)/1.15 var(--f-display); color: var(--azul); }
.mapcard__addr small { display: block; margin-top: 2px; font: 600 var(--step-small)/1.2 var(--f-body); color: var(--tinta); }
.mapcard__go { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px 0 20px; border-radius: 999px; background: var(--azul); color: #fff; font: 800 var(--step-small)/1 var(--f-body); transition: background-color .2s; }
.mapcard__go svg { width: 18px; height: 18px; transition: transform .3s var(--spring); }
.mapcard:hover .mapcard__go { background: var(--azul-noche); }
.mapcard:hover .mapcard__go svg { transform: translateX(4px); }
.ubi__ahora { font-size: var(--step-lead); font-weight: 600; line-height: 1.3; text-wrap: pretty; }
.ubi__ahora .is-open { color: var(--abierto); }
.ubi__ahora .is-closed { color: var(--cerrado); }
.ubi__info { display: grid; gap: 20px; justify-items: start; }
.ubi__addr { font-size: var(--step-body); }
.ubi__addr strong { display: block; font: 800 var(--step-lead)/1.15 var(--f-display); }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 12px 14px; text-align: left; font-weight: 600; border-bottom: 2px solid rgb(11 42 74 / .12); }
.hours td { text-align: right; font-weight: 700; white-space: nowrap; }
/* La fila de hoy, pintada de amarillo como el cartel */
.hours tr.is-today th, .hours tr.is-today td { background: var(--amarillo); border-bottom-color: transparent; }
.hours tr.is-today th { border-radius: 12px 0 0 12px; }
.hours tr.is-today td { border-radius: 0 12px 12px 0; }
.ubi__btns { display: flex; flex-wrap: wrap; gap: 10px; }


/* ---------- Reseñas: papelitos rotos arriba y abajo ---------- */
.resenas { background: var(--amarillo); }
.slips { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; }
.slip {
  --zz: 14px;
  width: min(360px, 100%); padding: 34px 26px 36px; background: var(--papel); transform: rotate(var(--rot));
  display: grid; gap: 10px; align-content: start;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x; /* taste-skill-ignore: máscara que corta el borde del papel, no es un relleno */
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x; /* taste-skill-ignore: máscara que corta el borde del papel, no es un relleno */
  transition: transform .5s var(--spring);
}
.slip:hover { transform: rotate(0) translateY(-6px); }
.slip:nth-child(2n) { background: #fff; }
.slip__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.slip__who { font-weight: 800; font-size: var(--step-lead); line-height: 1.1; }
.slip__stars { font-size: var(--step-small); font-weight: 700; color: var(--azul); }
.slip blockquote { margin: 0; font-size: var(--step-body); line-height: 1.5; }
.resenas__src { margin-top: 36px; text-align: center; }
.resenas__src a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--azul); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.resenas__src svg { transition: transform .3s var(--spring); }
.resenas__src a:hover svg { transform: translateX(4px); }

/* ---------- Preguntas ---------- */
.faq { background: var(--papel); overflow: hidden; }
.faq__grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: 5fr 1fr 6fr; } .faq__pics { grid-column: 3; } }
.faq__col { display: grid; gap: 28px; align-content: start; }
.faq__facts { display: grid; gap: 10px; font-size: var(--step-body); font-weight: 600; }
.faq__facts li { display: flex; gap: 10px; align-items: flex-start; }
.faq__facts svg { margin-top: 3px; color: var(--azul); }
.faq__facts a { color: var(--azul); text-underline-offset: 3px; }
.acc { display: grid; gap: 8px; }
.acc__it { border-radius: 16px; background: var(--papel-2); }
.acc__it summary {
  position: relative; list-style: none; cursor: pointer; padding: 16px 56px 16px 20px; min-height: 56px;
  font-weight: 800; font-size: var(--step-lead); line-height: 1.2;
}
.acc__it summary::-webkit-details-marker { display: none; }
.acc__it summary::before, .acc__it summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 14px; height: 3px; border-radius: 2px; background: var(--azul);
  transition: transform .35s var(--ease);
}
.acc__it summary::after { transform: rotate(90deg); }
.acc__it[open] summary::after { transform: rotate(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc__it[open] .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 20px 18px; font-size: var(--step-body); }
.acc__panel a { color: var(--azul); font-weight: 700; }
.faq__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.faq__pics { position: relative; padding-bottom: 80px; }
.faq__tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.faq__sq { position: absolute; left: -40px; bottom: 0; width: 42%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); outline: 8px solid var(--papel); }
@media (max-width: 959px) {
  .faq__pics { order: -1; padding-bottom: 50px; }
  .faq__tall { aspect-ratio: 4 / 5; }
  .faq__sq { left: auto; right: 0; width: 40%; }
}

/* ---------- Contacto: el dorso de la tarjeta ---------- */
.foot { background: var(--azul-hondo); padding: var(--sec) 0 calc(110px + env(safe-area-inset-bottom, 0px)); }
.postal {
  position: relative; display: grid; gap: 40px; background: var(--papel); color: var(--tinta);
  border-radius: 0 0 var(--r) var(--r); padding: clamp(48px, 6vw, 80px) clamp(22px, 5vw, 64px) 28px;
  -webkit-mask: radial-gradient(circle 22px at 50% 0, #0000 97%, #000) 50% 0 / 60px 100% repeat-x; /* taste-skill-ignore: máscara que corta el borde del papel, no es un relleno */
  mask: radial-gradient(circle 22px at 50% 0, #0000 97%, #000) 50% 0 / 60px 100% repeat-x; /* taste-skill-ignore: máscara que corta el borde del papel, no es un relleno */
}
@media (min-width: 900px) { .postal { grid-template-columns: 1fr 1fr; column-gap: 64px; } }
.postal__msg { display: grid; gap: 18px; align-content: start; justify-items: start; }
.postal__t { font-size: var(--step-head); color: var(--azul); }
.postal__msg p { max-width: 40ch; }
.postal__addr { position: relative; display: grid; gap: 18px; align-content: start; }
.postal__stamp { position: absolute; top: clamp(40px, 5vw, 64px); right: clamp(18px, 4vw, 56px); width: clamp(70px, 8vw, 96px); aspect-ratio: 3 / 4; object-fit: cover; padding: 6px; background: var(--papel-2); transform: rotate(5deg); }
.postal__stamp { display: none; }
@media (min-width: 900px) { .postal__stamp { display: block; } }
.postal__addr ul { display: grid; gap: 12px; }
.postal__addr a { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-weight: 700; font-size: var(--step-body); text-decoration: none; }
.postal__addr a svg { color: var(--azul); transition: transform .35s var(--spring); }
.postal__addr a:hover { color: var(--azul); }
.postal__addr a:hover svg { transform: rotate(-10deg) scale(1.12); }
.postal__imprint { grid-column: 1 / -1; text-align: center; font-size: var(--step-small); color: var(--tinta-suave); padding-top: 12px; }

/* ---------- Flotantes: WhatsApp y la barra del pedido ---------- */
.fab-wa {
  position: fixed; z-index: 60;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-wa); color: #062B14; box-shadow: var(--sh-float); /* taste-skill-ignore: flota sobre la página */
  transition: transform .45s var(--spring), bottom .45s var(--ease), opacity .2s;
}
.fab-wa svg { width: 32px; height: 32px; }
.fab-wa:hover { transform: rotate(-8deg) scale(1.06); }
.has-order .fab-wa { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 720px) { .has-order .fab-wa { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }
html.is-locked .fab-wa { opacity: 0; pointer-events: none; }

.orderbar {
  position: fixed; z-index: 61; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100% - 24px)); min-height: 64px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px 8px 10px; border: 0; border-radius: 999px; text-align: left;
  background: var(--tinta); color: #fff; box-shadow: var(--sh-float); /* taste-skill-ignore: flota sobre la página */
  transform: translateX(-50%); animation: sube .7s var(--spring);
}
@media (min-width: 720px) { .orderbar { width: min(520px, calc(100% - 200px)); } }
@keyframes sube { from { transform: translate(-50%, 140%); } }
.orderbar.is-bump { animation: meneo .6s var(--spring); }
@keyframes meneo { 25% { transform: translate(-50%, -6px) rotate(-1.5deg); } 50% { transform: translate(-50%, 0) rotate(1deg); } }
.orderbar__n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--amarillo); color: var(--tinta); font-weight: 800; font-size: var(--step-body); font-variant-numeric: tabular-nums; }
.orderbar__n.bump { animation: bump .5s var(--spring); }
.orderbar__txt { display: grid; min-width: 0; line-height: 1.2; }
.orderbar__txt b { font-size: var(--step-body); }
.orderbar__txt small { font-size: var(--step-small); color: #D3E2F1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orderbar__go { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--azul); font-weight: 700; font-size: var(--step-small); white-space: nowrap; }
.orderbar__go svg { width: 18px; height: 18px; transition: transform .3s var(--spring); }
.orderbar:hover .orderbar__go svg { transform: translateX(4px); }
.menu.is-open ~ .orderbar, html.is-locked .orderbar { opacity: 0; pointer-events: none; }

.toast {
  position: fixed; z-index: 90; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: min(92vw, 420px); padding: 12px 20px; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 700; font-size: var(--step-small); text-align: center;
  box-shadow: var(--sh-float); /* taste-skill-ignore: flota sobre la página */
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .5s var(--spring);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.has-order .toast { bottom: calc(170px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Panel del pedido ---------- */
.cart { position: fixed; inset: 0; z-index: 80; }
.cart__scrim { position: absolute; inset: 0; background: rgb(11 42 74 / .55); opacity: 0; transition: opacity .4s; }
.cart__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--papel); border-radius: var(--r) var(--r) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: var(--sh-float); /* taste-skill-ignore: flota sobre la página */
  transform: translateY(102%); transition: transform .55s var(--ease);
}
.cart.is-open .cart__scrim { opacity: 1; }
.cart.is-open .cart__panel { transform: none; }
@media (min-width: 720px) {
  .cart__panel { left: auto; top: 0; width: min(470px, 100%); max-height: none; border-radius: var(--r) 0 0 var(--r); transform: translateX(102%); padding-top: env(safe-area-inset-top, 0px); }
}
.cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: var(--amarillo); border-radius: var(--r) var(--r) 0 0; }
@media (min-width: 720px) { .cart__head { border-radius: var(--r) 0 0 0; } }
.cart__head h2 { font-size: var(--step-lead); color: var(--azul); }
.icon-btn { width: 44px; height: 44px; border-radius: 999px; border: 0; background: #fff; display: grid; place-items: center; transition: background-color .2s, transform .3s var(--spring); }
.icon-btn:hover { transform: rotate(90deg); }
.cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 20px; }
.cart__list { display: grid; gap: 4px; }
.line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 2px solid var(--papel-2); animation: pop-in .4s var(--ease); }
.line img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; grid-row: span 2; align-self: start; }
.line__name { font-weight: 800; line-height: 1.2; }
.line__opt { display: block; font-size: var(--step-small); color: var(--tinta-suave); font-weight: 500; line-height: 1.3; }
.line__price { display: block; font-size: var(--step-small); color: var(--azul); font-weight: 700; }
.line .stepper { background: var(--azul); }
.line__note { grid-column: 2 / -1; }
.line__note-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--azul); font-weight: 700; font-size: var(--step-small); }
.line__note-btn svg { width: 16px; height: 16px; }
.line__note input { width: 100%; min-height: 42px; padding: 8px 12px; border-radius: 12px; border: 2px solid transparent; background: var(--papel-2); font-size: var(--step-small); }
.line__note input:focus { outline: none; border-color: var(--azul); background: #fff; }
.cart__empty { display: grid; justify-items: center; gap: 10px; padding: 30px 0 18px; text-align: center; color: var(--tinta-suave); }
.cart__empty svg { width: 42px; height: 42px; color: var(--azul); }
.cart__form { display: grid; gap: 14px; padding-top: 18px; }
.field { display: grid; gap: 6px; margin: 0; border: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font-weight: 700; font-size: var(--step-small); padding: 0; }
.field em { font-style: normal; font-weight: 500; color: var(--tinta-suave); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 2px solid transparent; background: var(--papel-2); transition: border-color .2s, background-color .2s; }
.field textarea { resize: vertical; min-height: 72px; }
.field input[aria-invalid="true"] { border-color: var(--cerrado); background: #FBE9E6; }
.field__err { color: var(--cerrado); font-size: var(--step-small); font-weight: 700; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--azul); background: #fff; }
.field__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 4px; padding: 4px; border-radius: 999px; background: var(--papel-2); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; text-align: center; min-height: 44px; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: var(--step-small); line-height: 1.15; transition: background-color .2s, color .2s; }
.seg input:checked + span { background: var(--azul); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 2px; }
.cart__foot { display: grid; gap: 10px; padding: 14px 20px 18px; background: var(--papel-2); }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cart__total span { font-weight: 800; }
.cart__total small { display: block; font-weight: 500; color: var(--tinta-suave); font-size: var(--step-small); }
.cart__total strong { font: 800 var(--step-lead)/1.1 var(--f-display); font-variant-numeric: tabular-nums; text-align: right; }
.cart__hint { font-size: var(--step-small); color: var(--tinta-suave); }
.cart__hint.is-warn { color: var(--cerrado); font-weight: 700; }
.cart__clear { justify-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--tinta-suave); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cart__clear.is-confirm { color: var(--cerrado); }

/* ---------- Menos movimiento: todo queda en su lugar, sin viajes ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .cinta__track { animation: none; }
  .hero__flour { display: none; }
}

/* La vitrina tiene un destacado: ocupa cuatro lugares (dos en el celular) */
.shop { grid-auto-flow: dense; }
.prod--big { grid-column: span 2; }
.prod--big .prod__img { aspect-ratio: 16 / 10; }
.prod--big h3 { font-size: var(--step-head); }
@media (min-width: 720px) {
  .prod--big { grid-row: span 2; }
  .prod--big .prod__img { aspect-ratio: auto; flex: 1; min-height: 0; }
}
.carta .btn--ghost { --bg: var(--papel-2); --bg-h: #E2DED4; }
.hechas__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; }
.hechas__head p { font-size: var(--step-small); color: #fff; }

/* ---------- El cartel de la puerta: Abierto / Cerrado, colgado abajo del cartel grande ---------- */
.puerta { position: absolute; left: 50%; top: 100%; translate: -50% -4px; transform-origin: 50% 0; animation: puerta 3s ease-in-out infinite alternate; }
.puerta__cartel {
  position: relative; margin: 26px 0 0; min-width: 180px; display: grid; justify-items: center; gap: 2px;
  padding: 8px 22px 10px; text-align: center; background: #fff; border: 4px solid var(--azul); border-radius: 14px; outline: 4px solid #fff;
}
.puerta__cartel::before, .puerta__cartel::after { content: ''; position: absolute; bottom: calc(100% + 8px); width: 4px; height: 26px; border-radius: 2px; background: var(--azul); }
.puerta__cartel::before { left: 24%; }
.puerta__cartel::after { right: 24%; }
.puerta__cartel b { font: 800 var(--step-lead)/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--cerrado); }
.puerta__cartel.is-open b { color: var(--abierto); }
.puerta__cartel span { font-size: var(--step-small); font-weight: 700; color: var(--tinta); }
@keyframes puerta { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* ---------- Muñequitos de la vitrina: dibujados con el estilo del logo (contorno azul y borde blanco de sticker).
   Flotan, parpadean, miran al mouse y se pueden agarrar ---------- */
.hero__toys { position: absolute; inset: 0; pointer-events: none; }
.toy { position: absolute; z-index: 0; pointer-events: auto; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.toy.is-top { z-index: 2; }
.toy.is-held { z-index: 3; cursor: grabbing; }
.toy__drag { position: relative; }
.toy__svg { display: block; width: 100%; height: auto; overflow: visible; transition: scale .25s var(--spring); }
.toy.is-held .toy__svg { scale: 1.08; }
.toy.is-held .toy__bob { animation-play-state: paused; } /* agarrado no flota: sigue al dedo y nada más */
.toy--croissant { left: 5%; top: 19%; width: clamp(120px, 13vw, 210px); --dur: 3.8s; --r: 4deg; --in: .15s; }
.toy--dona { right: 6%; top: 17%; width: clamp(100px, 11vw, 180px); --dur: 3.1s; --r: -5deg; --in: .3s; }
.toy--torta { right: 4%; bottom: 7%; width: clamp(130px, 14vw, 220px); --dur: 4.2s; --r: 2deg; --in: .45s; }
.toy--flauta { left: 3%; bottom: 10%; width: clamp(180px, 21vw, 330px); --dur: 3.5s; --r: -3deg; --in: .6s; }
.toy--flauta .toy__svg { rotate: -12deg; }
/* Sin lugar a los costados del cartel: la flauta y la torta van abajo (la torta, lejos del botón de WhatsApp)
   y la dona se sienta en la esquina del cartel, como un sticker */
@media (max-width: 1239px) {
  .hero { padding-bottom: clamp(170px, 24vw, 240px); }
  .toy--croissant { display: none; }
  .toy--flauta { left: 2%; bottom: 3%; width: clamp(170px, 34vw, 300px); }
  .toy--torta { right: 96px; bottom: 3%; width: clamp(110px, 20vw, 190px); }
  .toy--dona { z-index: 2; right: calc(50% - min(400px, 50% - var(--gut)) - 22px); top: 156px; width: clamp(76px, 12vw, 120px); }
}
@media (max-width: 760px) {
  .toy--flauta { left: -3%; width: 50vw; }
  .toy--torta { right: 80px; width: 30vw; }
  .toy--dona { top: 142px; width: 20vw; }
}
.toy__bob { animation: toy-in .9s var(--spring) both, flota var(--dur) ease-in-out infinite alternate; animation-delay: var(--in), calc(var(--in) + .9s); }
.js.is-loading .toy__bob, .js.is-loading .toy__say { animation-play-state: paused; }
@keyframes toy-in { from { opacity: 0; transform: translateY(70px) scale(.5); } }
@keyframes flota { from { transform: translateY(0) rotate(calc(var(--r) * -1)); } to { transform: translateY(-12px) rotate(var(--r)); } }
.toy .look { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .3s var(--ease); }
.toy .eyes { transform-box: fill-box; transform-origin: center; animation: parpadeo 5.2s infinite; animation-delay: var(--blink, 0s); }
@keyframes parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
/* Al tocarlos: el pan y el croissant saltan dando una vuelta, la dona gira, la torta apaga la vela */
.toy.is-jump .toy__svg { animation: salto .75s var(--ease); }
@keyframes salto { 35% { transform: translateY(-60px) rotate(-200deg) scale(1.05); } 70% { transform: translateY(0) rotate(-360deg) scale(1.08, .9); } 100% { transform: rotate(-360deg); } }
.toy.is-spin .toy__svg { animation: gira .9s var(--ease); }
@keyframes gira { 50% { transform: scale(1.15) rotate(200deg); } 100% { transform: rotate(360deg); } }
.toy.is-landed .toy__svg { animation: aterriza .5s var(--spring); }
@keyframes aterriza { 30% { transform: scale(1.14, .84); } 65% { transform: scale(.94, 1.06); } }
.toy .llama { transform-box: fill-box; transform-origin: 50% 100%; animation: llama .45s ease-in-out infinite alternate; transition: opacity .2s, scale .25s; }
@keyframes llama { to { transform: scale(.88, 1.1) skewX(5deg); } }
.toy.is-out .llama { opacity: 0; scale: .3; }
.toy .humo { opacity: 0; transform-box: fill-box; }
.toy.is-out .humo { animation: humo 1.4s ease-out forwards; }
@keyframes humo { from { opacity: .95; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }
/* El pan avisa que se puede agarrar; se va apenas tocás alguno */
.toy__say {
  position: absolute; left: 34%; bottom: 86%; z-index: 1; padding: 0 16px 6px; border-radius: 999px;
  background: #fff; color: var(--azul); font: 400 var(--step-lead)/1.25 var(--f-manga); white-space: nowrap;
  outline: 3px solid var(--azul); pointer-events: none; animation: say-in .6s var(--spring) 2.4s both;
}
.toy__say::after { content: ''; position: absolute; left: 22px; top: calc(100% + 2px); border: 9px solid transparent; border-top-color: var(--azul); }
@keyframes say-in { from { opacity: 0; transform: translateY(10px) scale(.6); } }
.toys-touched .toy__say { opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .toy__bob, .toy .eyes, .toy .llama, .puerta { animation: none; }
}