/* HELADERÍA ALFREDITO
   Una sola forma en toda la página: la bocha. Es el mismo círculo del aro verde del logo y de los puntitos de colores
   bajo su nombre en lengua de señas. La bocha gigante del inicio, las fotos recortadas en círculo, los botones
   redondos, los puntitos de cada sabor, las muescas del cupón del pedido y las nueve bochas del nombre en el pie.
   Colores del logo: verde del aro y las letras de colores, sobre un fondo crema de helado de crema.
   Una sola página, pensada primero para el celular. */

:root {
  --crema: #FFFBF4;        /* fondo */
  --crema-2: #F6EFE1;      /* un tono abajo, para separar sin líneas */
  --tinta: #10241A;        /* texto: verde casi negro, como sus placas de pizarrón */
  --tinta-suave: #3F5247;  /* texto secundario (AA sobre crema y sobre los pasteles) */
  --verde: #34A855;        /* el aro del logo */
  --verde-hondo: #17703A;  /* botones (texto blanco a 5,9:1) */
  --verde-noche: #0D3A22;  /* el panel de Nosotros */
  --verde-palido: #DDF1E2;
  --amarillo: #FFE14D;     /* el cupón del pedido */
  --rosa-palido: #FBDCE6;
  /* las letras del logo */
  --l-amarillo: #FFD400; --l-naranja: #FF6F00; --l-rojo: #FF2300; --l-violeta: #8800FF; --l-azul: #0A14FF;

  --f-display: 'League Spartan', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* cinco tamaños, nada más */
  --s-small: clamp(.8125rem, .79rem + .1vw, .875rem);
  --s-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --s-lead: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --s-head: clamp(2rem, 1.4rem + 1.9vw, 3rem);
  --s-disp: clamp(2.35rem, 5.3vw, 5.5rem);

  --r: 28px;               /* el único redondeado de las piezas rectangulares (mapa, cupón, panel, fichas) */
  --sh-float: 0 14px 34px rgb(16 36 26 / .22);   /* solo para lo que flota: barra del pedido, aviso, botón de WhatsApp */
  --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: 80px; }
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(--crema);
  color: var(--tinta);
  font-family: var(--f-body);
  font-size: var(--s-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: 700; line-height: .95; letter-spacing: -.04em; text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.visually-hidden { 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: 8px; }
.panel :focus-visible, .pie :focus-visible, .menu :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; }

/* Los datos que faltan confirmar se ven en la página mientras MOSTRAR_AVISOS sea true (js/negocio.js) */
.aviso { display: inline-block; margin: 4px 0; padding: 2px 10px; border-radius: 999px; background: #FFE14D; color: #10241A; font: 600 var(--s-small)/1.4 var(--f-body); letter-spacing: 0; vertical-align: middle; }

/* ---------- Pantalla de carga: el aro verde se dibuja y caen las letras de colores ---------- */
.loader {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-content: center;
  background: var(--crema); cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s .4s;
}
.is-loading .loader { opacity: 1; visibility: visible; transition: none; }
.loader__logo { position: relative; width: min(260px, 64vw); aspect-ratio: 1; display: grid; place-items: center; transform: scale(.7); transition: transform .6s var(--ease); }
.is-loading .loader__logo { transform: none; }
.loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.loader__ring circle { fill: none; stroke: var(--verde); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 580; stroke-dashoffset: 580; animation: aro .9s var(--ease) .05s forwards; }
.loader__word { display: flex; font: 700 var(--s-head)/1 Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.loader__word span { color: var(--c); display: inline-block; transform: translateY(-60vh); animation: cae .6s var(--spring) forwards; animation-delay: calc(.2s + var(--i) * .05s); }
@keyframes aro { to { stroke-dashoffset: 0; } }
@keyframes cae { to { transform: none; } }
.intro-short .loader__ring circle, .intro-short .loader__word span { animation-duration: .01s; animation-delay: 0s; }

/* ---------- Botones: redondos como la bocha, una sola forma en toda la página ---------- */
.btn {
  --bg: var(--verde-hondo); --fg: #fff; --bg-h: #115C2F;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 24px; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 600 var(--s-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(.96); transition-duration: .1s; }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: var(--s-small); }
.btn--lg { min-height: 58px; padding: 14px 30px; font-size: var(--s-lead); }
.btn--full { width: 100%; white-space: normal; text-align: center; }
.btn--claro { --bg: var(--crema); --fg: var(--tinta); --bg-h: #fff; }
.btn--linea { --bg: var(--tinta); --fg: var(--crema); --bg-h: #000; }
.btn[aria-disabled="true"] { opacity: .5; }

.link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  font-weight: 600; color: var(--verde-hondo); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
  transition: color .2s, text-underline-offset .25s var(--ease);
}
.link svg { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); }
.link:hover { color: var(--tinta); text-underline-offset: 8px; }
.link:hover svg { transform: translateX(3px); }

/* ---------- Header: barra simple que se achica y toma fondo al bajar ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 70; padding-top: env(safe-area-inset-top, 0px); transition: background-color .3s, color .3s; }
.top.is-scrolled { background: var(--crema); }
.bar { display: flex; align-items: center; gap: 18px; height: 80px; transition: height .35s var(--ease); }
.top.is-scrolled .bar { height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; border-radius: 999px; }
.brand img { width: 52px; height: 52px; transition: width .35s var(--ease), height .35s var(--ease), transform .5s var(--spring); }
.top.is-scrolled .brand img { width: 42px; height: 42px; }
.brand:hover img { transform: rotate(-12deg); }
.brand__name { font: 700 1.25rem/1 var(--f-display); letter-spacing: -.03em; white-space: nowrap; }
.nav { display: none; gap: 26px; }
.nav a { position: relative; text-decoration: none; font-weight: 600; padding: 6px 0; white-space: nowrap; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--verde); 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; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--crema-2); color: var(--tinta); text-decoration: none; }
.bar__cart svg { width: 22px; height: 22px; }
.bar__count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--l-rojo); color: #fff; font: 700 .75rem/22px var(--f-body); text-align: center; }
.bar__count.bump, .orderbar__n.bump { animation: bump .5s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.burger { display: grid; place-content: center; gap: 7px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--tinta); }
.burger span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--crema); transition: transform .4s var(--ease), background-color .3s; }
.burger[aria-expanded="true"] { background: var(--crema); }
.burger[aria-expanded="true"] span { background: var(--tinta); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.75px) rotate(-45deg); }
.top.is-menu { background: transparent; color: var(--crema); }

/* Menú del celular: se abre como una bocha desde el botón y los links aparecen de a uno */
.menu {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: center; gap: 36px;
  padding: 100px var(--gut) 40px; background: var(--verde-noche); color: var(--crema);
  clip-path: circle(0 at calc(100% - 40px) 40px); visibility: hidden;
  transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s .6s;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; transition: clip-path .7s cubic-bezier(.7, 0, .2, 1); }
.menu__nav { display: grid; gap: 6px; }
.menu__nav a, .menu__foot { opacity: 0; transform: translateY(24px); transition: opacity .3s, transform .3s; }
.menu.is-open .menu__nav a, .menu.is-open .menu__foot { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(.18s + var(--i) * .06s); }
.menu__nav a { font: 700 clamp(2.4rem, 11vw, 3.4rem)/1.1 var(--f-display); letter-spacing: -.04em; text-decoration: none; }
.menu__nav a[aria-current="true"] { color: var(--amarillo); }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.menu .link { color: var(--crema); }

/* =====================================================================
   INICIO: la bocha gigante entra desde la derecha
   ===================================================================== */
.hero { --top: max(62svh, 545px); position: relative; min-height: max(100svh, 860px); overflow: hidden; isolation: isolate; }
.hero__disc {
  position: absolute; z-index: -1;
  width: 130vw; aspect-ratio: 1; border-radius: 50%;
  left: -15vw; top: var(--top);
  background: var(--verde);
}
.hero__copy { position: relative; z-index: 2; padding: 112px var(--gut) 0; max-width: 40rem; }
.hero__t { font-size: clamp(2.1rem, 9.6vw, 3rem); }
.hero__lead { margin-top: 18px; max-width: 34ch; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.hero__acts .btn { width: 100%; }
.hero__note { margin-top: 16px; font-size: var(--s-small); color: var(--tinta-suave); }
.hero__tag { font-weight: 600; color: var(--verde-hondo); }

/* El cucurucho: todo se mide en --w (el ancho del barquillo) */
.cono { --w: min(30vw, 140px); position: absolute; z-index: 3; width: var(--w); height: calc(var(--w) * 2.7); right: 16vw; top: calc(var(--top) - var(--w) * .45); }
.cono__barquillo { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--w) * 1.25); }
.bocha {
  --c2: color-mix(in srgb, var(--c) 78%, #3B2414);
  position: absolute; padding: 0; border: 0; background: none; border-radius: 50%;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.motion .bocha { animation: bochaCae .8s var(--spring) both; animation-delay: calc(.35s + (2 - var(--n)) * .14s); }
.motion.is-loading .bocha { animation-play-state: paused; }
.bocha svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bocha__f { fill: var(--c); }
.bocha__sombra { fill: var(--c2); }
.bocha__gota { fill: var(--c2); transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .5s var(--ease); }
.bocha:hover .bocha__gota, .bocha.is-drip .bocha__gota { transform: scaleY(1.6); }
.bocha.is-held { cursor: grabbing; z-index: 5; }
.bocha[data-bocha="2"] { --n: 2; width: calc(var(--w) * .8); left: calc(var(--w) * .1); top: calc(var(--w) * .92); z-index: 3; }
.bocha[data-bocha="1"] { --n: 1; width: calc(var(--w) * .74); left: calc(var(--w) * .13); top: calc(var(--w) * .44); z-index: 2; }
.bocha[data-bocha="0"] { --n: 0; width: calc(var(--w) * .64); left: calc(var(--w) * .18); top: calc(var(--w) * .02); z-index: 1; }
.bocha .look { transform: translate(var(--ex, 0), var(--ey, 0)); transition: transform .15s; }
.bocha .cara { transform-box: fill-box; transform-origin: 50% 50%; animation: parpadeo 5.5s infinite; animation-delay: var(--blink, 0s); }
@keyframes parpadeo { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
.bocha.is-plop svg { animation: plop .55s var(--spring); }
@keyframes plop { 0% { transform: scale(1); } 30% { transform: scale(1.18, .82); } 60% { transform: scale(.92, 1.08); } 100% { transform: scale(1); } }
.bocha.is-landed svg { animation: aterriza .5s var(--spring); }
@keyframes aterriza { 0% { transform: scale(1.2, .8); } 100% { transform: scale(1); } }

.hero__foto { position: absolute; z-index: 2; width: min(32vw, 150px); aspect-ratio: 1; left: 9vw; top: calc(var(--top) + 10vw); border-radius: 50%; overflow: hidden; outline: 8px solid var(--crema); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   SECCIONES
   ===================================================================== */
.sec { padding-block: var(--sec); }
.sec__t { font-size: var(--s-head); }
.sec__lead { margin-top: 18px; max-width: 46ch; font-size: var(--s-lead); line-height: 1.35; }

/* ---------- Sabores: la foto en su bocha sobre el disco del color del sabor ---------- */
.sabores__grid { display: grid; gap: 28px; }
.sabores__stage { position: relative; width: min(86vw, 520px); aspect-ratio: 1; margin: 0 auto; }
.sabores__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--sab, var(--verde-palido)); transition: background-color .5s var(--ease); }
.sabores__pic { position: absolute; left: 11%; right: 11%; top: -6%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #111; }
.sabores__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.sabores__pic img.is-on { opacity: 1; }
.motion .sabores__pic img.is-shut { animation: obturador 1.1s var(--ease) both; }
@keyframes obturador { from { clip-path: circle(0% at 50% 100%); transform: scale(1.12); } to { clip-path: circle(75% at 50% 50%); transform: none; } }
.sabores__t { font-size: var(--s-head); color: var(--tinta-suave); }
.sabores__list { min-width: 0; }
.sabores__names { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
.sab-n {
  display: inline-flex; align-items: center; gap: 12px; flex: none; scroll-snap-align: start;
  padding: 0; border: 0; background: none; text-align: left;
  font: 700 var(--s-lead)/1.15 var(--f-display); letter-spacing: -.035em; color: var(--tinta-suave);
  transition: color .25s;
}
.sab-n::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: var(--c); flex: none; transition: transform .4s var(--spring); }
.sab-n[aria-selected="true"] { color: var(--tinta); }
.sab-n[aria-selected="true"]::before { transform: scale(1.35); }
.sab-n:hover { color: var(--tinta); }
.sabores__fact { display: grid; gap: 14px; align-content: start; }
.sabores__fact blockquote { margin: 0; font-size: var(--s-lead); line-height: 1.35; }
.sabores__fact .fact__extra { font-weight: 600; color: var(--verde-hondo); }
.sabores__fact .add { justify-self: start; }
.sabores__mas { margin-top: 64px; display: grid; gap: 16px; }
.sabores__mas-t { max-width: 44ch; font: 700 var(--s-lead)/1.25 var(--f-display); letter-spacing: -.02em; }
.sabores__mas-t a { color: var(--verde-hondo); }
.sabores__src { max-width: 60ch; font-size: var(--s-small); color: var(--tinta-suave); }

/* ---------- La carta: el armador y la lista con bochas de viñeta ---------- */
.carta { background: var(--crema-2); }
.armador { display: grid; gap: 28px; margin-top: 44px; padding: clamp(22px, 4vw, 48px); border-radius: var(--r); background: var(--crema); }
.armador__vista { position: relative; display: grid; justify-items: center; align-content: end; min-height: 340px; padding-top: 40px; }
.armador__pila { position: relative; z-index: 2; display: flex; flex-direction: column-reverse; align-items: center; }
.armador__pila .b { --d: 92px; width: var(--d); aspect-ratio: 1; border-radius: 50%; background: var(--c); margin-top: calc(var(--d) * -.3); position: relative; }
.armador__pila .b:first-child { margin-top: 0; }
.motion .armador__pila .b.is-new { animation: bochaCae .6s var(--spring) both; }
@keyframes bochaCae { from { transform: translateY(-140px) scale(.6); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
.armador__envase { position: relative; z-index: 3; margin-top: -24px; display: grid; justify-items: center; }
.envase-cono { width: 104px; height: 150px; background: #E7B46A; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.envase-pote { width: 156px; height: 108px; display: grid; place-items: center; background: #fff; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.envase-pote span { font: 700 1.6rem/1 Georgia, serif; letter-spacing: -.02em; }
.envase-vaso { width: 116px; height: 96px; }
.armador__vacio { position: absolute; top: 8px; left: 50%; translate: -50% 0; white-space: nowrap; font-size: var(--s-small); color: var(--tinta-suave); }
.armador__hueco { width: 92px; aspect-ratio: 1; border-radius: 50%; background: var(--crema-2); }
.armador__form { display: grid; gap: 22px; align-content: start; }
@media (max-width: 1019px) {
  .armador__vista { position: sticky; top: 64px; z-index: 4; min-height: 0; height: 230px; padding-top: 0; margin: 0 calc(clamp(22px, 4vw, 48px) * -1); background: var(--crema); overflow: hidden; }
  .armador__vista > * { transform: scale(.6); transform-origin: 50% 100%; }
  .armador__envase { margin-top: -14px; }
  .armador__vacio { font-size: 1.4rem; top: -14px; }
}
.armador__form legend { margin-bottom: 10px; font: 700 var(--s-lead)/1.1 var(--f-display); letter-spacing: -.02em; }
.pills, .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 8px 20px; border-radius: 999px;
  background: var(--crema-2); font-weight: 600; line-height: 1.15; cursor: pointer; transition: background-color .2s, color .2s, transform .3s var(--spring);
}
.pill span small { font-weight: 400; font-size: var(--s-small); }
.pill input:checked + span { background: var(--tinta); color: var(--crema); }
.pill input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; }
.pill:active span { transform: scale(.95); }
.arm-cat { display: grid; gap: 8px; margin-bottom: 14px; }
.arm-cat__t { font-size: var(--s-small); font-weight: 600; color: var(--tinta-suave); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; font-size: var(--s-small); border: 0; border-radius: 999px;
  background: var(--crema-2); font-weight: 600; transition: background-color .2s, color .2s, transform .3s var(--spring);
}
.chip::before { content: ''; width: 24px; height: 24px; border-radius: 50%; background: var(--c); flex: none; transition: transform .4s var(--spring); }
.chip:hover { background: #ECE3D0; }
.chip:hover::before { transform: scale(1.15); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--tinta); color: var(--crema); }
.chip.is-no { animation: no .4s; }
@keyframes no { 25% { translate: -6px 0; } 50% { translate: 6px 0; } 75% { translate: -3px 0; } }
.armador__estado { font-weight: 600; min-height: 1.5em; }
.armador__estado.is-warn { color: #9B2C1F; }
.armador__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

.menu-list { margin-top: 24px; }
.cat__aviso { margin-top: 40px; }
.cat { padding-top: 96px; }
.cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.cat__head h3 { font-size: var(--s-head); }
.cat__head > span { font-size: var(--s-body); color: var(--tinta-suave); white-space: nowrap; }
.cat__intro { margin: -24px 0 36px; max-width: 60ch; color: var(--tinta-suave); }
.items { display: grid; gap: 36px 64px; }
.item { display: grid; grid-template-columns: 52px 1fr; gap: 4px 18px; align-items: start; }
.item__pic { grid-row: span 3; width: 52px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c, var(--verde-palido)); }
.item__pic img { width: 100%; height: 100%; object-fit: cover; }
.item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.item__name { font-weight: 600; }
.item__price { font-weight: 600; white-space: nowrap; }
.item__price.is-consultar { font-weight: 400; color: var(--tinta-suave); }
.item__det { max-width: 38ch; font-size: var(--s-small); color: var(--tinta-suave); }
.item__act { margin-top: 8px; min-height: 44px; }
.add {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 16px 6px 12px; border: 0; border-radius: 999px;
  background: var(--tinta); color: var(--crema); font-weight: 600; font-size: var(--s-small); text-decoration: none;
  transition: transform .3s var(--spring), background-color .2s;
}
.add svg { width: 18px; height: 18px; }
.add:hover { background: #000; transform: translateY(-2px); }
.add:active { transform: scale(.94); }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--tinta); color: var(--crema); }
.stepper button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: inherit; transition: background-color .2s; }
.stepper button:hover { background: rgb(255 255 255 / .14); }
.stepper button svg { width: 18px; height: 18px; }
.stepper output { min-width: 26px; text-align: center; font-weight: 700; }

/* ---------- Tu pedido: el cupón amarillo con muescas redondas y troquelado de puntos ---------- */
.cupon {
  --notch: 16px;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--r); background: var(--amarillo);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut, 50%), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut, 50%), #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: máscara que recorta las muescas redondas del cupón, no es un degradé */
  mask: radial-gradient(circle var(--notch) at 0 var(--cut, 50%), #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut, 50%), #0000 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: máscara que recorta las muescas redondas del cupón, no es un degradé */
}
.cupon__izq, .cupon__der { padding: 28px 22px; }
.cupon__izq { display: grid; gap: 18px; align-content: start; border-bottom: 6px dotted var(--crema); }
.cupon__t { font-size: var(--s-head); }
.cupon__lista { display: grid; gap: 14px; }
.line { display: grid; grid-template-columns: 48px 1fr auto; gap: 4px 14px; align-items: center; }
.line__pic { width: 48px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c, #fff); display: flex; flex-direction: column; }
.line__pic img { width: 100%; height: 100%; object-fit: cover; }
.line__pic i { flex: 1; background: var(--c); }
.line__name { font-weight: 600; display: block; }
.line__opt { display: block; font-size: var(--s-small); color: var(--tinta-suave); }
.line__price { display: block; font-size: var(--s-small); }
.line__note { grid-column: 2 / -1; }
.line__note-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-size: var(--s-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.line__note input { width: 100%; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 14px; background: #FFF3A6; }
.cupon__vacio { color: var(--tinta-suave); }
.cupon__vacio a { font-weight: 600; color: var(--tinta); }
.cupon__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px; font-weight: 600; }
.cupon__total small { display: block; font-weight: 400; font-size: var(--s-small); color: var(--tinta-suave); }
.cupon__total strong { font: 700 var(--s-lead)/1.1 var(--f-display); letter-spacing: -.02em; text-align: right; }
.cupon__vaciar { justify-self: start; padding: 0; border: 0; background: none; font-size: var(--s-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cupon__vaciar.is-confirm { color: #9B2C1F; }
.cupon__der { display: grid; gap: 14px; align-content: start; }
.field { display: grid; gap: 6px; }
.field > span, .field legend { font-weight: 600; font-size: var(--s-small); }
.field legend { margin-bottom: 6px; }
.field em { font-style: normal; font-weight: 400; color: var(--tinta-suave); }
.field input, .field textarea, .field select { width: 100%; min-height: 52px; padding: 12px 16px; border: 0; border-radius: 16px; background: #FFF3A6; }
.field textarea { resize: vertical; min-height: 84px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2310241A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.field input::placeholder, .field textarea::placeholder { color: #5F5E36; }
.field input[aria-invalid="true"] { outline: 3px solid #9B2C1F; }
.field__err { color: #9B2C1F; font-weight: 600; font-size: var(--s-small); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: #FFF3A6; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.seg input:checked + span { background: var(--tinta); color: var(--amarillo); }
.seg input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; }
#cart-send { --bg: var(--tinta); --bg-h: #000; --fg: #fff; margin-top: 6px; }
#cart-send[aria-disabled="true"] { opacity: 1; --bg: #EFCF3A; --bg-h: #EFCF3A; --fg: #4A4A2A; }
.cupon__hint { font-size: var(--s-small); font-weight: 600; }
.cupon__hint.is-warn { color: #9B2C1F; }
.cupon__pya { color: var(--tinta); }

/* ---------- La franja de la promo: el campo verde del aro, a lo ancho ---------- */
.franja { background: var(--verde); color: var(--tinta); padding-block: clamp(64px, 9vw, 120px); }
.franja__in { display: grid; gap: 22px; }
.franja__big { font: 700 var(--s-disp)/.92 var(--f-display); letter-spacing: -.045em; }
.franja__txt { display: grid; gap: 10px; max-width: 44ch; font-size: var(--s-lead); line-height: 1.35; }
.franja__src { font-size: var(--s-small); }

/* ---------- Nosotros: panel verde noche con la foto antigua en su bocha ---------- */
.nosotros { padding-bottom: 0; }
.panel {
  position: relative; display: grid; gap: 40px; overflow: hidden;
  margin-inline: 10px; padding: 48px 24px 0; border-radius: var(--r);
  background: var(--verde-noche); color: #F2FAF4;
}
.panel__t { font-size: var(--s-head); max-width: 12ch; }
.panel__izq { display: contents; }
.panel__foto { order: 3; width: min(86vw, 560px); aspect-ratio: 1; margin: 0 auto -22%; border-radius: 50%; overflow: hidden; }
.panel__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05); }
.panel__der { display: grid; gap: 32px; align-content: start; }
.panel__bloque { display: grid; gap: 10px; max-width: 36ch; }
.panel__bloque h3 { font-size: var(--s-lead); letter-spacing: -.02em; line-height: 1.1; }
.panel__der .btn { justify-self: start; }

.galeria { padding-block: var(--sec) 0; }
.galeria__t { font-size: var(--s-head); }
.galeria__fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 22px 18px; margin-top: 36px; }
.gal { display: grid; justify-items: center; gap: 12px; }
.gal img { width: var(--g); aspect-ratio: 1; border-radius: 50%; object-fit: cover; transition: transform .6s var(--spring); }
.gal:hover img { transform: scale(1.04) rotate(-3deg); }
.gal span { font: 700 var(--s-lead)/1 var(--f-display); letter-spacing: -.03em; }
.gal--a { --g: 44vw; } .gal--b { --g: 38vw; } .gal--c { --g: 52vw; } .gal--d { --g: 40vw; }
.galeria__src { margin-top: 28px; text-align: center; font-size: var(--s-small); color: var(--tinta-suave); }

/* ---------- Sucursales: el mapa y las dos tarjetas ---------- */
.sucursales__grid { display: grid; gap: 22px; margin-top: 44px; }
.mapa { position: relative; height: 380px; border-radius: var(--r); overflow: hidden; background: var(--crema-2); isolation: isolate; }
.mapa .leaflet-tile-pane { filter: saturate(.55) sepia(.12) brightness(1.04); }
.mapa-fallback { display: grid; place-content: center; justify-items: center; gap: 12px; height: 100%; padding: 24px; text-align: center; }
.locales { display: grid; gap: 16px; }
.local { display: grid; gap: 10px; padding: 26px 24px; border-radius: var(--r); background: var(--crema-2); transition: background-color .3s; }
.local.is-on { background: var(--verde-palido); }
.local__zona { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tinta-suave); }
.local__zona::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--c); }
.local h3 { font-size: var(--s-lead); letter-spacing: -.025em; line-height: 1.1; }
.local__ref { color: var(--tinta-suave); }
.local__acts { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }
.delivery { display: grid; gap: 16px; margin-top: 22px; padding: 28px 24px; border-radius: var(--r); background: var(--rosa-palido); }
.delivery__ico { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--tinta); color: var(--crema); }
.delivery h3 { font-size: var(--s-lead); letter-spacing: -.025em; margin-bottom: 6px; }
.delivery .btn { justify-self: start; }

/* Pin del mapa: un cucurucho con su bocha y una onda que late */
.pin__pulse { position: absolute; left: 50%; top: 18px; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgb(52 168 85 / .45); animation: late 2s ease-out infinite; }
@keyframes late { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.pin__cono { position: relative; display: block; width: 40px; height: 60px; animation: salta 2.4s var(--ease) infinite; }
.pin__cono::before { content: ''; position: absolute; z-index: 1; left: 2px; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--c, #F6A9C1); }
.pin__cono::after { content: ''; position: absolute; left: 7px; top: 26px; width: 26px; height: 34px; background: #E7B46A; clip-path: polygon(0 0, 100% 0, 50% 100%); }
@keyframes salta { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-8px); } 90% { transform: scale(1.06, .94); } }
.leaflet-popup-content { font: 400 15px/1.4 var(--f-body); margin: 14px 18px; }
.leaflet-popup-content strong { display: block; font: 700 17px/1.2 var(--f-display); }
.mapa .leaflet-popup-content-wrapper, .mapa .leaflet-popup-tip { background: var(--tinta); color: var(--crema); box-shadow: none; }
.mapa .leaflet-popup-content-wrapper { border-radius: 18px; }
.mapa .leaflet-popup-content a { color: var(--amarillo); }
.mapa .leaflet-container, .mapa .leaflet-container * { font-family: var(--f-body); }
.mapa .leaflet-container a.leaflet-popup-close-button { color: var(--crema); }
.mapa .leaflet-bar a { font: 600 1.25rem/30px var(--f-body); }
.mapa .leaflet-control-attribution { font-size: 13px; }

/* ---------- Reseñas: foto en su bocha y la cita corrida más abajo ---------- */
.resenas__grid { display: grid; gap: 32px; }
.resenas__foto { width: 72%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.resenas__foto img, .resenas__chica img { width: 100%; height: 100%; object-fit: cover; }
.resenas__citas { display: grid; gap: 44px; }
.cita blockquote { margin: 0; font-size: var(--s-lead); line-height: 1.3; letter-spacing: -.01em; max-width: 34ch; }
.cita blockquote::before { content: '«'; }
.cita blockquote::after { content: '»'; }
.cita figcaption { margin-top: 16px; font-size: var(--s-body); }
.cita figcaption b { font-weight: 600; }
.cita figcaption a { color: var(--tinta-suave); }
.resenas__chica { width: 44%; aspect-ratio: 1; justify-self: end; border-radius: 50%; overflow: hidden; }
.cita--chica blockquote { font-size: var(--s-body); font-weight: 600; line-height: 1.4; }
.resenas__puntaje { font-weight: 600; color: var(--verde-hondo); }

/* ---------- Preguntas: fichas de un cajón, con pestaña ---------- */
.fichas { margin-top: 44px; }
.ficha {
  --tab: 120px; --tx: calc(var(--k) * (100% - var(--tab)) / 5);
  position: relative; margin-top: -22px; padding-top: 40px; background: var(--fc);
  clip-path: polygon(0 40px, var(--tx) 40px, calc(var(--tx) + 10px) 0, calc(var(--tx) + var(--tab) - 10px) 0, calc(var(--tx) + var(--tab)) 40px, 100% 40px, 100% 100%, 0 100%);
  border-radius: 0 0 var(--r) var(--r);
}
.ficha:first-child { margin-top: 0; }
.ficha__tema { position: absolute; top: 0; left: var(--tx); width: var(--tab); height: 40px; display: grid; place-items: center; font-weight: 600; font-size: var(--s-small); }
.ficha__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 76px; padding: 16px 20px 30px; border: 0; background: none; text-align: left; font: 600 var(--s-body)/1.25 var(--f-body); }
.ficha__q::after { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23FFFBF4' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .35s var(--spring); }
.ficha__q[aria-expanded="true"]::after { transform: rotate(45deg); }
.ficha__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.ficha__a > div { overflow: hidden; }
.ficha__a p { max-width: 50ch; padding: 0 20px 40px; font-size: var(--s-body); }
.ficha.is-open .ficha__a { grid-template-rows: 1fr; }
.preguntas__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 40px; }

/* =====================================================================
   PIE: las nueve bochas del nombre, en sus colores
   ===================================================================== */
.pie { background: var(--tinta); color: var(--crema); padding-block: clamp(64px, 9vw, 120px) 32px; }
.marca { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 56px; }
.marca span {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--c); color: var(--k, #fff);
  font: 700 clamp(1.4rem, 7vw, 6.5rem)/1 Georgia, 'Times New Roman', serif; padding-bottom: .08em;
  transition: transform .5s var(--spring);
}
.marca span:hover { transform: translateY(-10px); }
.pie__cols { display: grid; gap: 36px; }
.pie__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.pie__nav a { font-size: var(--s-small); text-decoration: none; }
.pie__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__contacto { display: grid; gap: 10px; font-size: var(--s-small); }
.pie__contacto a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.pie__contacto a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__contacto svg { width: 18px; height: 18px; }
.pie__ult { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; font-size: var(--s-small); color: #C9D3CC; }

/* ---------- Lo que flota: barra del pedido, WhatsApp y aviso ---------- */
.orderbar {
  position: fixed; z-index: 55; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0;
  width: min(560px, 100% - 24px); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px;
  border-radius: 999px; background: var(--tinta); color: var(--crema); text-decoration: none; box-shadow: var(--sh-float); /* taste-skill-ignore: flota sobre la página */
  transition: transform .5s var(--spring), opacity .3s;
}
.orderbar.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
.orderbar.is-bump { animation: bump .5s var(--spring); }
.orderbar__n { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--amarillo); color: var(--tinta); font-weight: 700; }
.orderbar__txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.orderbar__txt small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--s-small); color: #C9D3CC; }
.orderbar__go { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: var(--verde); color: var(--tinta); font-weight: 600; }
.orderbar__go svg { width: 18px; height: 18px; }
.fab-wa {
  position: fixed; z-index: 54; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #06301A; box-shadow: var(--sh-float); /* taste-skill-ignore: flota sobre la página */
  transition: transform .4s var(--spring), bottom .4s var(--ease);
}
.has-order .fab-wa { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 76px); }
.fab-wa svg { width: 32px; height: 32px; }
.fab-wa:hover { transform: scale(1.08) rotate(-6deg); }
.toast {
  position: fixed; z-index: 80; left: 50%; top: 90px; translate: -50% 0; max-width: calc(100% - 32px);
  padding: 12px 20px; border-radius: 999px; background: var(--tinta); color: var(--crema); font-weight: 600; box-shadow: var(--sh-float); /* taste-skill-ignore: flota sobre la página */
  opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .3s, transform .4s var(--spring);
}
.toast.is-on { opacity: 1; transform: none; }
.chispa { position: fixed; z-index: 90; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; }

/* ---------- Apariciones al scrollear (solo con script, sin movimiento reducido y con la clase reveal) ---------- */
.reveal [data-reveal].is-pre { opacity: 0; transform: translate3d(0, 24px, 0); }
.reveal [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.w { display: inline-block; overflow: hidden; padding: .09em 0 .12em; margin: -.09em 0 -.12em; vertical-align: top; }
.w > span { display: inline-block; }
.reveal [data-words].is-pre .w > span { transform: translateY(108%); }
.reveal [data-words].is-in .w > span { transform: none; transition: transform 1.05s var(--ease); transition-delay: calc(var(--wi) * 60ms); }
.motion .hero__disc { animation: discoEntra 1.3s var(--ease) both; }
@keyframes discoEntra { from { transform: translateX(14%) scale(.88); } to { transform: none; } }
.motion.is-loading .hero__disc { animation-play-state: paused; }

/* =====================================================================
   TABLET Y ESCRITORIO
   ===================================================================== */
@media (min-width: 700px) {
  .hero__acts .btn { width: auto; }
  .items { grid-template-columns: 1fr 1fr; }
  .item { grid-template-columns: 64px 1fr; gap: 4px 20px; }
  .item__pic { width: 64px; }
  .armador { grid-template-columns: minmax(240px, .8fr) 1.2fr; align-items: center; }
  .panel { margin-inline: 20px; padding: 56px 40px 0; }
  .pie__cols { grid-template-columns: 2fr 1fr; }
  .pie__nav { grid-template-columns: repeat(3, 1fr); }
  .delivery { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
  .ficha { --tab: 200px; }
  .ficha__q { padding: 18px 28px 32px; }
  .ficha__a p { padding: 0 28px 40px; }
  .gal--a { --g: 26vw; } .gal--b { --g: 20vw; } .gal--c { --g: 30vw; } .gal--d { --g: 22vw; }
}

@media (min-width: 1020px) {
  .nav { display: flex; }
  .bar__wa { display: inline-flex; }
  .burger { display: none; }

  /* Inicio: la bocha de 120vh entra por la derecha y la cortan los bordes; su borde izquierdo llega a la mitad */
  .hero { min-height: max(100svh, 700px); }
  .hero__disc { --D: max(120vh, 840px); width: var(--D); left: 57%; top: calc(55% - var(--D) / 2); }
  .hero__copy { position: absolute; left: 7%; top: 50%; translate: 0 -50%; width: 49%; max-width: none; padding: 0; }
  .hero__t { font-size: var(--s-disp); }
  .hero__lead { margin-top: 22px; font-size: 1.1875rem; max-width: 36ch; }
  .hero__note { max-width: 40ch; }
  .cono { --w: min(15vw, 31vh, 250px); right: auto; left: calc(80% - var(--w) / 2); top: calc(52% - var(--w) * 1.42); }
  .hero__foto { width: min(15vw, 28vh, 240px); left: calc(57% - min(15vw, 28vh, 240px) * .42); top: auto; bottom: 8%; outline-width: 10px; }

  /* Sabores: disco de 64vh con el centro al 58 %, la lista abajo a la izquierda, el dato a la derecha */
  .sabores { min-height: 100svh; display: grid; align-content: center; }
  .sabores__grid { grid-template-columns: repeat(12, 1fr); align-items: end; gap: 0 24px; }
  .sabores__stage { grid-column: 5 / 10; grid-row: 1; width: min(60vh, 36vw); margin: 0 auto; }
  .sabores__list { grid-column: 1 / 6; grid-row: 1; position: relative; z-index: 2; align-self: end; }
  .sabores__names { display: grid; gap: 2px; overflow: visible; margin-top: 4px; }
  .sab-n, .sabores__t { font-size: var(--s-head); }
  .sabores__fact { grid-column: 10 / 13; grid-row: 1; align-self: center; position: relative; z-index: 2; padding-left: 12px; }
  .sabores__fact blockquote { font-size: 1.0625rem; line-height: 1.5; }

  .cupon { grid-template-columns: 46% 54%;
    -webkit-mask: radial-gradient(circle var(--notch) at 46% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 46% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore: máscara que recorta las muescas redondas del cupón, no es un degradé */
    mask: radial-gradient(circle var(--notch) at 46% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 46% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; /* taste-skill-ignore: máscara que recorta las muescas redondas del cupón, no es un degradé */
  }
  .cupon__izq, .cupon__der { padding: 48px; }
  .cupon__izq { border-bottom: 0; border-right: 6px dotted var(--crema); }

  .franja__in { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 48px; }

  .panel { grid-template-columns: 1fr 300px; min-height: 110svh; padding: 56px 56px 0; gap: 0 8%; }
  .panel__izq { display: grid; grid-template-rows: auto 1fr; gap: 48px; }
  .panel__t { font-size: var(--s-disp); }
  .panel__foto { order: 0; width: 38vw; max-width: 620px; margin: 0 0 -8%; align-self: end; }
  .panel__der { gap: 64px; }

  .galeria__fila { flex-wrap: nowrap; justify-content: space-between; }
  .gal--a { --g: 20vw; } .gal--b { --g: 15vw; } .gal--c { --g: 23vw; } .gal--d { --g: 17vw; }
  .gal--b { margin-bottom: 9vw; } .gal--d { margin-bottom: 5vw; }

  .armador { align-items: start; }
  .armador__vista { position: sticky; top: 110px; min-height: 420px; }
  .sucursales__grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
  .mapa { height: auto; min-height: 520px; }

  .resenas__grid { grid-template-columns: repeat(12, 1fr); gap: 0 24px; align-items: start; }
  .resenas__foto { grid-column: 2 / 6; grid-row: 1 / 3; width: 100%; }
  .resenas__citas { grid-column: 7 / 13; grid-row: 1; padding-top: 120px; gap: 64px; }
  .resenas__chica { grid-column: 10 / 12; grid-row: 2; width: 100%; margin-top: 96px; }

  .preguntas__t, .fichas, .preguntas__acts { margin-left: 16.66%; margin-right: 16.66%; }

  .marca { margin-bottom: 72px; }
}

/* Entre 1020 y 1280 px no entran el nombre, los cinco links y el botón: queda el logo, que ya dice alfredito */
@media (min-width: 1020px) and (max-width: 1279px) {
  .brand__name { display: none; }
}

@media (min-width: 1440px) {
  .hero__copy { left: max(8%, (100% - 1280px) / 2 + 40px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pin__pulse { display: none; }
}