/* Dulcaria — estilos de la tienda
   Se carga aparte del HTML: el navegador lo guarda en caché y
   las páginas pesan menos. */

/* ── DÓNDE ESTÁ CADA COSA ────────────────────────────────────────────────
   Se lee de arriba abajo y GANA LA ÚLTIMA regla que aplique. Por eso una
   regla nueva va DENTRO de su sección, no al final del archivo: un
   ".cols a{display:inline-block}" puesto abajo del todo pegó los enlaces del
   pie en una sola línea, porque llega después de "footer a{display:block}".

     1. Variables y base ......... colores, tipos, .wrap, botones
     2. Cabecera y pie ........... barra de conectados, menú, fila de Atrás, footer
     3. Vitrina .................. tarjetas del catálogo, chips, colecciones
     4. Ficha y embudo ........... .fn, grupos, opciones, fotos, frase
     5. Entrega y datos .......... formularios, agencias, mapa
     6. Gracias y reclamaciones .. resumen, QR, libro
     7. Estados ................. cargando, agotado, deshabilitado
     8. Aviso de compra ......... la tarjetita de "acaba de comprar"

   Y si cambias algo acá, SUBE el ?v= del enlace en index.html: si no, nadie
   ve el cambio hasta que se le venza la caché. Hay una prueba que lo vigila.
   ──────────────────────────────────────────────────────────────────────── */

:root{
 /* Paleta Dulcaria: crema, vino, latón mate y grafito */
 --crema:#F6EDE1; --vino:#6E1F26; --laton:#B69355; --grafito:#2A2724;
 --shell:#F6EDE1;--shell-2:#EFE1CB;--paper:#fff;
 /* --ink-3 era #948C82: sobre la crema daba 2,9 a 1 y en el sol del celular
    no se leía (precios tachados, "según lo que elijas", los contadores). Con
    #6F675E da 4,8 sobre la crema y 5,6 sobre el blanco, que es lo mínimo que
    pide un texto chico. Sigue siendo el gris más claro de los tres. */
 --ink:#2A2724;--ink-2:#5F5952;--ink-3:#6F675E;
 --miel:#6E1F26;--miel-2:#55151B;--coco:#EDDFC4;
 --cherry:#8E2A33;              /* mismo vino aclarado, para tachados y urgencia */
 /* Rojo de "obligatorio": el asterisco y la etiqueta de lo que hay que elegir.
    Más rojo que --cherry, que es vino, para que se lea como aviso. Da 6,5 a 1
    sobre el blanco y 5,6 sobre la crema (lo mínimo para texto chico, 4,5). */
 --rojo:#B3261E;
 --ribbon:#1D6A4C;              /* solo el botón de WhatsApp */
 --line:#E3D5BF;--line-2:#F1E7D8;
 --r-s:10px;--r-m:16px;--r-l:24px;
 --shadow:0 18px 40px -24px rgba(42,26,18,.45);--max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--shell);color:var(--ink);font-family:"Karla",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:0}
h1{font-size:clamp(38px,7.4vw,66px)}h2{font-size:clamp(28px,4.6vw,42px)}h3{font-size:clamp(22px,3vw,28px)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--miel);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:18px}
@media(min-width:820px){.wrap{padding-inline:36px}}
.req{color:var(--cherry);font-weight:700}

/* La cabecera entera, fija: contador, conectados y menú. El menú era lo único
   pegado arriba; ahora lo es el bloque, y el menú va normal dentro. */
.cabecera{position:sticky;top:0;z-index:60}
.cabecera .top{position:relative}
.promo{background:var(--vino);color:#fff;font-size:13px}
.promo-in{max-width:var(--max);margin:0 auto;padding:6px 14px;display:flex;align-items:center;justify-content:center;gap:8px}
.promo-in b{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.04em;
  background:rgba(255,255,255,.16);border-radius:6px;padding:1px 8px}
@media(max-width:520px){.promo{font-size:12.3px}.promo-in{padding:5px 12px}}
.live{background:var(--grafito);color:#fff;font-size:13px}
.live-in{max-width:var(--max);margin:0 auto;padding:6px 18px;display:flex;align-items:center;gap:8px;justify-content:flex-end}
.live-in .back{margin-right:auto;display:none;align-items:center;gap:6px;background:none;border:0;color:#C9BFB2;font-size:13px;cursor:pointer;padding:2px 4px}
.live-in .back.on{display:inline-flex}
.live-in .back:hover{color:#fff}
.live-dot{width:7px;height:7px;border-radius:99px;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.live-txt{color:#8FE9B4;font-weight:700}
.live-txt b{color:#fff}
.live-sep{color:#7A6E63;font-weight:300}
.live-cli{color:#B8ADA1;font-size:12.3px;font-weight:400}
.live-cli b{color:#D9D0C6;font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:420px){.live-cli{font-size:11.5px}.live-in{gap:6px}}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}

.top{position:sticky;top:0;z-index:60;background:rgba(255,246,240,.93);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:18px;height:58px}
/* Con la hamburguesa al lado, el botón de arriba se aprieta: en pantallas muy
   estrechas se queda solo el menú, que ya lleva "Ver todo el catálogo" dentro. */
@media(max-width:420px){.top-in{gap:10px}.top .cta{display:none}}
.brand{display:flex;align-items:center;line-height:0}
.brand img{height:22px;width:auto}
@media(min-width:900px){.brand img{height:25px}}
footer .brand img{height:20px}
/* Con muchos enlaces (el menú se arma en el panel, 2026-09-23) no empuja el
   botón de la derecha ni se sale: se desliza de lado, sin barra a la vista. */
.nav{display:none;gap:20px;margin-left:8px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;white-space:nowrap;font-size:15px;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{color:var(--ink);border-color:var(--miel)}
@media(min-width:900px){.nav{display:flex}}
/* El subnivel del menú (2026-09-24). En PC, una flechita junto al enlace que
   tiene cosas dentro y un panel que cuelga debajo de la cabecera. */
.nav-p{display:inline-flex;align-items:center;gap:5px}
.nav-flecha{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nav-p[aria-expanded="true"] .nav-flecha{transform:translateY(1px) rotate(225deg)}
.nav-sub{position:absolute;top:calc(100% - 6px);z-index:61;min-width:200px;max-width:300px;padding:6px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow)}
.nav-sub[hidden]{display:none}
.nav-sub a{display:block;padding:9px 12px;border-radius:8px;font-size:15px;color:var(--ink-2);line-height:1.3}
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--line-2);color:var(--ink)}
.nav-sub a.on{color:var(--vino);font-weight:700}
@media(max-width:899px){.nav-sub{display:none}}
.top .cta{margin-left:auto;background:var(--ink);color:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700}

/* El menú del celular: la hamburguesa a la derecha, y debajo el mismo menú.
   Hasta ahora, por debajo de 900 px no había menú NINGUNO: las categorías y
   las colecciones no se podían abrir desde el celular, que es donde compra
   casi todo el mundo. */
/* margin-left:auto la manda al borde derecho. Antes el que empujaba era el
   botón de arriba, y en los celulares estrechos —donde ese botón se esconde—
   la hamburguesa se quedaba pegada al logo, casi al centro. Con el botón a la
   vista, los dos quedan juntos a la derecha. */
.hamb{display:grid;place-content:center;gap:5px;width:44px;height:44px;margin-left:auto;margin-right:-10px;
  background:none;border:0;cursor:pointer;flex:0 0 auto}
.top .cta+.hamb{margin-left:4px}
@media(max-width:420px){.top .cta+.hamb{margin-left:auto}}
.hamb span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s,opacity .2s}
.hamb.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb.abierto span:nth-child(2){opacity:0}
.hamb.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){.hamb{display:none}}

/* Se despliega por encima de la página, con sombra, en vez de empujarla: así
   se entiende que es un menú y no un trozo más de la tienda. */
.menu-movil{position:absolute;left:0;right:0;top:100%;border-top:1px solid var(--line);
  background:var(--paper);box-shadow:0 22px 40px -18px rgba(42,26,18,.45);
  max-height:calc(100vh - var(--cab,120px) - 8px);overflow-y:auto;
  /* dvh es la pantalla que de verdad se ve: con 100vh, en el celular la barra
     del navegador tapaba los últimos enlaces del menú. El 100vh de arriba se
     queda para los navegadores que no conocen dvh. */
  max-height:calc(100dvh - var(--cab,120px) - 8px)}
.menu-movil .wrap{padding-top:6px;padding-bottom:18px}
.menu-movil nav{display:grid}
.menu-movil nav a{display:flex;align-items:center;justify-content:space-between;
  font-size:16.5px;color:var(--ink);padding:14px 2px;border-bottom:1px solid var(--line-2)}
.menu-movil nav a::after{content:"›";font-size:22px;line-height:1;color:var(--ink-3)}
.menu-movil nav a.on{color:var(--vino);font-weight:700}
.menu-movil nav a.on::after{color:var(--vino)}
.menu-movil .btn{margin-top:16px}
/* En el celular, el que tiene cosas dentro: su enlace entra, y la flecha de
   la derecha (un botón aparte, del tamaño de un dedo) abre lo de dentro. */
.menu-movil .nm-fila{display:flex;align-items:stretch;border-bottom:1px solid var(--line-2)}
.menu-movil .nm-fila a{flex:1 1 auto;border-bottom:0}
.menu-movil .nm-fila a::after{content:none}
.nm-abre{flex:0 0 48px;display:grid;place-items:center;background:none;border:0;border-left:1px solid var(--line-2);cursor:pointer}
.nm-abre::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nm-abre[aria-expanded="true"]::before{transform:translateY(2px) rotate(225deg)}
.menu-movil .nm-hijos{display:grid;padding-left:16px;background:var(--line-2)}
.menu-movil .nm-hijos[hidden]{display:none}
.menu-movil .nm-hijos a{font-size:15.5px;color:var(--ink-2);padding:12px 2px;border-bottom:1px solid var(--line)}
.menu-movil .nm-hijos a.on{color:var(--vino)}
@media(min-width:900px){.menu-movil{display:none}}

.tag{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;letter-spacing:.01em;padding:5px 12px 5px 19px;clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%);font-variant-numeric:tabular-nums}
.tag.miel{background:var(--vino)}
.tag s{opacity:.6;font-weight:500;font-size:12.5px}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:7px 14px;font-size:13.5px;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--miel);color:#fff;border:0;border-radius:999px;padding:15px 26px;font-weight:700;font-size:16.5px;cursor:pointer;transition:background .18s,transform .18s}
.btn:hover{background:var(--miel-2)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.wide{width:100%}
.btn.wa{background:var(--ribbon)}.btn.wa:hover{background:#0E5C3C}
.mini{font-size:13.5px;color:var(--ink-2)}
.field{position:relative;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;display:grid;place-items:center;background-image:radial-gradient(rgba(255,255,255,.55) 1.4px,transparent 1.5px);background-size:14px 14px}
.field .emo{font-size:clamp(56px,17vw,116px);line-height:1;filter:drop-shadow(0 10px 14px rgba(42,26,18,.16));transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.field .rv,.field .rh{position:absolute;background:rgba(255,255,255,.5)}
.field .rv{width:16px;height:100%;left:50%;margin-left:-8px}
.field .rh{height:16px;width:100%;top:50%;margin-top:-8px}
/* Las etiquetas que van ENCIMA de la foto (este nombre y .flag) van un punto
   más chicas que el texto de la página: tapaban mucho de la foto. */
.field .cap{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700}
.quedan{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--cherry)}
.quedan i{font-style:normal;width:8px;height:8px;border-radius:999px;background:var(--cherry);animation:lat 1.4s ease-in-out infinite}
@keyframes lat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.28;transform:scale(.72)}}
@media(prefers-reduced-motion:reduce){.quedan i{animation:none}}
/* En el celular, «Quedan 10 unidades» se parte en dos líneas en una tarjeta y
   «Quedan 8 unidades» cabe en una en la de al lado: el pie de cada una medía
   distinto y las pastillas de precio de la misma fila quedaban a distinta
   altura. Con el alto de dos líneas reservado en todas, quedan parejas. Solo
   en las tarjetas del catálogo (.card .foot), donde vive este aviso. */
@media(max-width:520px){
  .card .foot .quedan{min-height:2.7em;align-items:flex-start;line-height:1.35}
  .card .foot .quedan i{flex:0 0 auto;margin-top:.36em}}

.hero{padding:30px 0 8px}
.hero-grid{display:grid;gap:28px}
@media(min-width:900px){.hero{padding:54px 0 18px}.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:52px}}
.hero p.lead{font-size:17.5px;color:var(--ink-2);max-width:44ch;margin-top:15px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
/* "Lo que más sale", dentro del hero: en el celular entre el texto y la caja
   de adorno; en PC la caja sigue al lado del título y esto va en la fila de
   abajo, a todo lo ancho. min-width:0 para que la rejilla de tarjetas no
   ensanche la columna. */
.hero-dest{min-width:0}
@media(min-width:900px){.hero-dest{grid-column:1/-1;grid-row:2}}
.stage{position:relative;aspect-ratio:1;max-width:420px;margin-inline:auto;width:100%}
.bx-body{position:absolute;inset:22% 4% 6% 4%;background:linear-gradient(170deg,#8A2A33,#6E1F26);border-radius:18px;box-shadow:var(--shadow);display:grid;place-items:center}
.bx-items{display:flex;gap:8px;font-size:clamp(24px,6vw,38px);transform:translateY(14px);opacity:0;transition:all .7s cubic-bezier(.2,.8,.2,1) .35s}
.bx-lid{position:absolute;left:0;right:0;top:14%;height:26%;background:linear-gradient(170deg,#fff,#FFEEDC);border-radius:14px;border:1px solid var(--line);box-shadow:0 14px 26px -14px rgba(42,26,18,.4);transition:transform .8s cubic-bezier(.2,.9,.25,1);display:grid;place-items:center}
.bx-lid img{width:46px;height:auto;opacity:.92}
.stage.open .bx-lid{transform:translateY(-52%) rotate(-6deg)}
.stage.open .bx-items{opacity:1;transform:translateY(0)}
.bx-hint{position:absolute;bottom:-4px;left:0;right:0;text-align:center;font-size:13px;color:var(--ink-3)}
/* Quien pidió menos movimiento en su teléfono ve la caja ya abierta, sin la
   tapa volando: igual que los puntitos que laten, que ya se quedaban quietos. */
@media(prefers-reduced-motion:reduce){.bx-lid,.bx-items{transition:none}}

.sec{padding:42px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-head p{color:var(--ink-2);font-size:15.5px;margin-top:6px;max-width:52ch}
.chips{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 16px;font-size:14.5px;cursor:pointer;color:var(--ink-2)}
/* Las colecciones que el dueño marca como destacadas, un punto por delante. */
.chip.destacada{border-color:var(--vino);color:var(--vino);font-weight:600}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.card:hover{border-color:var(--ink-3)}.card:hover .field .emo{transform:scale(1.05)}
.card-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h4{font-size:16px;font-weight:700;line-height:1.25}
.card .sub{font-size:13.2px;color:var(--ink-2);line-height:1.4}
.card .foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* El precio de la tarjeta: en un celular angosto «desde S/ 60» y el tachado
   «S/ 80» no caben en una fila, y el tachado se partía en «S/» y «80», uno
   encima del otro. Ahora nada se parte por dentro: si no cabe, el tachado
   entero pasa a la línea de abajo, sin salirse de la tarjeta. */
.card .foot .tag{white-space:nowrap;flex-wrap:wrap;row-gap:0;max-width:100%}
/* z-index: en la ficha el sello va ANTES de la foto en el HTML, y la foto (que
   también está posicionada) se pintaba encima y lo tapaba: «Img referencial» y
   «Más pedido» no se veían. En las tarjetas iba después y por eso sí salía. */
/* La página de producto, sin menú (lo pidió el dueño): se oculta solo la fila
   del logo y las opciones —y con ella el menú del celular—. La barra del
   contador y los clientes, «Atrás» y el pie se quedan. */
body.en-ficha header.top{display:none}
.flag{position:absolute;top:10px;left:10px;z-index:2;background:var(--paper);border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;border:1px solid var(--line)}
.flag.hot{background:var(--miel);color:#fff;border-color:var(--miel)}
/* Sobre la foto grande de la ficha (simple, variantes y combo), un pelo más
   chicas que en las tarjetas: «Más pedido» / «Img referencial» 1 px menos de
   letra y de relleno; el nombre (.cap), 2 px menos de letra y menos relleno.
   El nombre de un combo largo («Combo Box Primavera Premium») se partía en dos
   líneas y parecía un botón. Las tarjetas del catálogo no cambian. */
.fn-foto .flag{font-size:10px;padding:3px 9px}
.fn-foto .field .cap{font-size:9.5px;padding:3px 10px}
.steps3{display:grid;gap:14px}
@media(min-width:760px){.steps3{grid-template-columns:repeat(3,1fr);gap:20px}}
.step3{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:20px}
.step3 .n{width:30px;height:30px;border-radius:999px;background:var(--coco);color:#6E1F26;display:grid;place-items:center;font-weight:700;font-size:14px;margin-bottom:10px}
.step3 h4{font-size:17px;font-weight:700;margin-bottom:4px}
.step3 p{font-size:14.5px;color:var(--ink-2)}
/* "Cómo pedir", en el pie, salta hasta acá: sin este margen el título quedaba
   debajo de la cabecera fija. */
#como-funciona{scroll-margin-top:calc(var(--cab,100px) + 12px)}

.fn{display:grid;gap:22px;padding:18px 0 130px}
@media(min-width:960px){.fn{grid-template-columns:.92fr 1.08fr;gap:46px;align-items:start;padding:28px 0 90px}.fn-vis{position:sticky;top:calc(var(--cab,88px) + 20px)}}
/* La foto grande de la compra y TODO lo que va encima de ella —el sello "Más
   pedido", "Img referencial", el aviso de compra— viven en .fn-foto, que es
   quien las ubica. En el celular se achica esta caja, no la foto sola: al
   achicar solo la foto, las etiquetas se quedaron en la caja ancha y "Más
   pedido" salía fuera, a la izquierda de la foto. */
.fn-foto{position:relative}
@media(max-width:959px){.fn-foto{width:min(70%,300px);margin-inline:auto}}
/* «Mira el armado» (vEmbudo, montarMiraArmado), solo en la ficha de un combo
   y solo en el celular: el mismo corte de 959 px en que la foto se achica y
   queda aire a sus lados. Pastilla chica en dos líneas enteras («Mira el» /
   «armado»), a la derecha y a 1/4 del alto de la foto: lejos del sello (arriba
   a la izquierda), del nombre (abajo a la izquierda), de la flecha del
   carrusel (a media altura) y de los puntos (debajo). Su borde derecho llega
   hasta donde acaba .fn-vis —la mitad de lo que sobra entre .fn-vis y la foto
   (cqi)—: en un celular angosto monta un poco sobre el borde de la foto; con
   aire de sobra no se aleja más que su propio ancho (8em). Sin cqi, va pegada
   por dentro al borde de la foto. Sale ya puesta; al irse se funde. No recoge
   el dedo: deslizar la foto sigue funcionando (y cuenta como tocar). */
.mira-armado{display:none}
@media(max-width:959px){
  .fn-vis{container-type:inline-size}
  .mira-armado{position:absolute;top:25%;right:0;right:calc(-1 * min((100cqi - 100%) / 2, 8em));
    transform:translateY(-50%);z-index:3;display:block;padding:5px 8px;pointer-events:none;
    background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 12px rgba(42,26,18,.18);
    color:var(--vino);font-size:10.5px;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;
    transition:opacity .3s}
  .mira-armado.mira-se-va{opacity:0}}
/* La flecha rebota hacia abajo una vez por segundo, tres veces: 1, 2, 3. */
.mira-armado span{display:inline-block;font-size:12px;line-height:1;animation:rebota 1s ease-in-out 3}
@keyframes rebota{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.mira-armado{transition:none}.mira-armado span{animation:none}}
.prog{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.prog .s{flex:1;height:5px;border-radius:99px;background:var(--line)}
.prog .s.on{background:var(--miel)}
.prog .lab{font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap;margin-left:6px}
.fn h2{margin-bottom:4px}
.fn .sub{color:var(--ink-2);font-size:15.5px;margin-bottom:16px}
.gancho{display:flex;align-items:center;gap:9px;background:#FFF0F2;border:1px solid #F4CBD3;border-radius:var(--r-s);padding:10px 13px;font-size:13.8px;font-weight:700;margin-bottom:14px;color:var(--cherry)}
.gancho.verde{background:#FAF3E4;border-color:var(--laton);color:#8A6E33}
.rango{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rango .v{font-family:"Karla",system-ui,sans-serif;font-weight:800;
  font-size:clamp(26px,5.2vw,34px);line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.rango .t{font-size:13px;color:var(--ink-3);font-weight:700}
/* La hora de corte, debajo del precio: "Pide antes de las 12 y sale hoy".
   Chica y en su pastilla, como las del inicio: informa, no grita como la
   urgencia que va debajo. */
.corte{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;padding:6px 12px;border:1px solid var(--line);
  background:var(--paper);border-radius:999px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
/* Al lado de la hora de corte, cómo se puede pagar (2026-09-23): la misma
   pastilla, con su clase propia. Si no cabe, baja a la línea de abajo. */
/* Las dos en una fila: la hora de corte entera y, a su derecha, la de pago,
   que baja su texto a dos líneas para caber. Si ni así cabe (el celular),
   pasa debajo, a todo el ancho. */
.corte-fila{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0 0 12px}
.corte-fila .corte{margin:0;flex:none}
.pago-info{display:flex;align-items:center;gap:7px;margin:0;flex:1 1 220px;padding:6px 14px;border:1px solid var(--line);
  background:var(--paper);border-radius:18px;font-size:13px;line-height:1.3;font-weight:700;color:var(--ink-2)}

.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.opts{grid-template-columns:repeat(3,1fr)}}
.opts.dos{grid-template-columns:repeat(2,1fr)}
.op{border:2px solid var(--line);background:var(--paper);border-radius:var(--r-m);padding:0;cursor:pointer;text-align:left;overflow:hidden;position:relative;transition:border-color .16s}
.op:hover{border-color:var(--ink-3)}
.op.on{border-color:var(--miel);background:#FFF7EE;box-shadow:0 0 0 3px rgba(197,138,64,.16)}
.op.on::after{content:"✓";position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:99px;background:var(--miel);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700}
.op .ph{position:relative;overflow:hidden;aspect-ratio:1;display:grid;place-items:center;font-size:clamp(38px,11vw,58px);background-image:radial-gradient(rgba(255,255,255,.55) 1.3px,transparent 1.4px);background-size:13px 13px}
.op .bd{padding:10px 11px 12px}
.op .bd b{display:block;font-size:14.2px;font-weight:700;line-height:1.25}
.op .bd .pz{margin-top:6px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.op .bd .pz s{font-size:12.5px;color:var(--ink-3)}
.op .bd .pz strong{font-size:16px;color:var(--miel)}
/* Una opción que cuesta MENOS que el producto: «−S/ 10», en el mismo color
   que el «Ahorras» del resumen, para que se lea como lo que es (2026-09-23). */
.op .bd .pz strong.menos{color:var(--cherry)}
.op .bd .lbl{display:block;font-size:11px;font-weight:700;color:#8A6E33;margin-top:3px;letter-spacing:.06em}
.op .bd .inc{font-size:12.5px;color:#8A6E33;font-weight:700;margin-top:6px;display:block}
/* Lo que cuesta suelto algo que dentro del combo va GRATIS, tachado debajo. */
.op .bd .fuera{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.op .bd .fuera s{color:var(--cherry);font-weight:600}
/* ── Los grupos de un combo: clases propias (combo-opts) ─────────────────
   Nada de esto toca .opts, que es de las variaciones de un producto suelto y
   del catálogo: son dos cosas distintas y se tocan por separado.

   Cuántos entran por fila lo dice data-n (pedido del dueño, 2026-09-18):
     celular · 2 → una fila de 2 · 3 → una fila de 3 · 4 → dos filas de 2
     PC       · 2 → 2 · 3 → 3 · 4 → 4, siempre en UNA sola fila
   Con más de cuatro, data-n se queda en 4: cuatro por fila en PC y dos en el
   celular. La foto NUNCA se recorta: cuadrada, entera (contain) y centrada
   sobre el fondo de la tarjeta; el color del producto (--tono) solo se ve si
   no hay foto o si no carga. */
.combo-opts{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.combo-opts[data-n="3"]{grid-template-columns:repeat(3,1fr)}
@media(min-width:760px){
  .combo-opts[data-n="4"]{grid-template-columns:repeat(4,1fr)}
}
.combo-opts .op .ph{aspect-ratio:1;background:var(--tono,var(--paper))}
.combo-opts .op .ph:has(img){background:none}
.combo-opts .op .ph img{object-fit:contain}
/* El sello de ahorro de estas tarjetas (ahorro-combo) va POR ENCIMA de la
   foto: la foto (.ph, position:relative) viene después en el HTML y lo tapaba,
   se veía solo un pedazo rojo sin el «-45%». Los sellos de extras y del
   catálogo no se tocan. */
.combo-opts .op .ahorro-combo{z-index:2}
/* Con tres o cuatro tarjetas en UNA fila queda menos ancho por tarjeta, así que
   el sello de ahorro baja de tamaño y se arrima un poco más a la esquina: con
   tres un punto, con cuatro un punto más (pedido del dueño, 2026-09-18). Solo
   dentro de un combo y solo con tres o cuatro: con dos, todo sigue igual, y los
   sellos del catálogo y de los extras no se tocan. */
.combo-opts[data-n="3"] .op .ahorro-combo{font-size:10.5px;padding:3px 8px;top:7px;left:6px}
/* El de cuatro, solo de 760 px para arriba: en el celular esos cuatro caen en
   dos filas de dos, con el mismo sitio que un grupo de dos. */
@media(min-width:760px){
  .combo-opts[data-n="4"] .op .ahorro-combo{font-size:10px;padding:2px 7px;top:6px;left:5px}
  /* «Suelto cuesta S/ 9» de una pieza GRATIS: con cuatro en una fila cabe
     justo, y saltaba de línea. Un punto menos, solo ahí. */
  .combo-opts[data-n="4"] .op .bd .fuera{font-size:11px;letter-spacing:-.1px}
}
/* En el celular la tarjeta es cerca de un 20 % más chica. Con dos o cuatro, el
   grupo va centrado y cada columna mide el 40 % del ancho; con tres, las tres
   ocupan el ancho y la letra baja un punto para que quepa el nombre. */
@media(max-width:759px){
  .combo-opts{grid-template-columns:repeat(2,calc((100% - 10px) * .4));justify-content:center;gap:10px}
  .combo-opts[data-n="3"]{grid-template-columns:repeat(3,1fr);justify-content:stretch;gap:8px}
  .combo-opts .op .ph{width:83%;margin:10px auto 0;border-radius:var(--r-s);font-size:clamp(30px,9vw,44px)}
  .combo-opts .op .bd{padding:7px 8px 9px}
  .combo-opts .op .bd b{font-size:12.5px;line-height:1.22}
  .combo-opts .op .bd .pz{margin-top:3px;gap:5px}
  .combo-opts .op .bd .pz s{font-size:11.5px}
  .combo-opts .op .bd .pz strong{font-size:14px}
  .combo-opts .op .bd .lbl{font-size:10px;margin-top:2px;letter-spacing:.04em}
  .combo-opts .op .bd .inc{font-size:11.5px;margin-top:3px}
  .combo-opts .op .bd .fuera{font-size:11px}
  .combo-opts .op .ahorro-combo{top:6px;left:6px}
  .combo-opts .op.on::after{top:6px;right:6px;width:22px;height:22px;font-size:13px}
  /* Con tres por fila hay menos sitio: nombre y precio un punto más chicos. */
  .combo-opts[data-n="3"] .op .bd{padding:6px 6px 8px}
  .combo-opts[data-n="3"] .op .bd b{font-size:11.5px}
  .combo-opts[data-n="3"] .op .bd .pz strong{font-size:13px}
  .combo-opts[data-n="3"] .op .bd .pz s{font-size:10.5px}
}
/* ── Las opciones de un producto con variaciones: clases propias (var-opts)
   Solo en la FICHA de un producto suelto (el paso 1). No toca .opts —el
   catálogo y los extras— ni .combo-opts —los grupos de un combo—: son tres
   cosas distintas y se tocan por separado.

   La tarjeta es la MITAD de ancha que antes, cuando salían dos por fila
   ocupando todo (pedido del dueño, 2026-09-23). Cuántas entran por fila lo
   dice data-n:
     PC      · 2 → 2 · 3 → 3 · 4 → 4, en una sola fila
               5 → 3 arriba y 2 abajo · 6 → 3 y 3 · de 7 en adelante, de
               cuatro en cuatro
     celular · 2 → 2 · 4 → 2 y 2 · 3, 5 y 6 → de tres en tres
   Lo que sobra en la última fila va CENTRADO, nunca arrimado a un lado. */
.var-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.var-opts>.op{flex:0 0 calc((100% - 36px) / 4)}
/* Con cinco o seis hacen falta filas de tres: a cuatro por fila saldrían
   4 y 1, y 4 y 2, que es justo lo que no se quiere. */
.var-opts[data-n="5"]>.op,.var-opts[data-n="6"]>.op{flex:0 0 calc((100% - 24px) / 3)}
/* Menos ancho por tarjeta: el nombre y el «✓ Sin costo extra», un punto más
   chicos, para que no salten de línea en la mitad de las tarjetas. */
.var-opts .op .bd{padding:8px 9px 10px}
.var-opts .op .bd b{font-size:13.2px;line-height:1.24}
.var-opts .op .bd .inc{font-size:11.8px;margin-top:4px}
.var-opts .op .bd .pz{margin-top:4px;gap:6px}
.var-opts .op .bd .pz strong{font-size:14.5px}
.var-opts .op .bd .pz s{font-size:11.5px}
.var-opts .op.on::after{top:7px;right:7px;width:22px;height:22px;font-size:13px}
@media(max-width:759px){
  .var-opts{gap:10px}
  .var-opts>.op{flex:0 0 calc((100% - 10px) / 2)}
  .var-opts[data-n="3"]>.op,.var-opts[data-n="5"]>.op,.var-opts[data-n="6"]>.op{flex:0 0 calc((100% - 20px) / 3)}
  .var-opts .op .bd{padding:7px 8px 9px}
  .var-opts .op .bd b{font-size:12.5px;line-height:1.22}
  .var-opts .op .bd .inc{font-size:11.5px;margin-top:3px}
  .var-opts .op .bd .pz strong{font-size:13.5px}
}

.op .ahorro{position:absolute;top:9px;left:9px;background:var(--cherry);color:#fff;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}
/* Las tarjetas de extras: su sello (ahorro-extra) por encima de la foto, que
   va después en el HTML con position:relative y lo tapaba. Clase propia: el
   sello del combo tiene la suya (ahorro-combo). */
.op .ahorro-extra{z-index:2}

.frase{margin-top:14px;border:1.5px solid var(--line);background:var(--paper);border-radius:var(--r-m);padding:14px}
.frase label{display:block;font-size:14px;font-weight:700;margin-bottom:7px}
/* 16 px y no menos: con una letra más chica, el iPhone agranda toda la página
   al tocar la casilla y el cliente tiene que alejarla con los dedos. */
.frase textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-s);padding:11px 12px;font-size:16px;resize:vertical;min-height:70px;background:#fff}
.frase .cnt{font-size:12.5px;color:var(--ink-3);text-align:right;margin-top:4px}

.resumen{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;margin-top:18px}
.resumen h4{font-size:14px;font-weight:700;margin-bottom:9px}
.resumen .rl{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2);margin-bottom:5px}
.resumen .rl b{color:var(--ink);white-space:nowrap}
.resumen .rl .q{color:var(--ink-3);font-size:12.5px;display:block}
.resumen .rt{display:flex;justify-content:space-between;font-weight:700;font-size:18px;border-top:1px solid var(--line);padding-top:10px;margin-top:10px}

.f{margin-top:14px;position:relative}
.f label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
/* La etiqueta a la izquierda y, a la derecha, "Soy quien recoge · completar". */
/* «¿Quién hace el pedido?», solo en provincia (2026-09-19). Uno debajo del
   otro en el celular: los dos textos son largos y en una sola fila se partían
   en tres líneas. Desde 520 px, los dos al lado. Reemplazó al botón chico
   «Soy quien recoge», que no se entendía. */
.quien{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:520px){.quien{grid-template-columns:1fr 1fr}}
.qbox{border:2px solid var(--line);background:var(--paper);border-radius:var(--r-m);padding:14px;
  cursor:pointer;text-align:left;font-size:15px;font-weight:600;color:var(--ink);min-height:52px}
.qbox.on{border-color:var(--miel);background:#FFF8F0}
/* El título de lo que viene debajo cuando el cliente NO es quien recoge. */
.quien-h{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line-2)}
.f input,.f select,.f textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-s);padding:13px;background:var(--paper);font-size:16px}
.f input:focus,.f select:focus{border-color:var(--ink-3);outline:none}
.f small{display:block;font-size:13px;color:var(--ink-3);margin-top:5px}
/* Lima y Provincia, una al lado de la otra también en el celular: son solo dos
   y una encima de la otra alargaban el paso sin necesidad. */
.zone{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:420px){.zone{gap:10px}.zbox{padding:13px 12px}.zbox b{font-size:15px}.zbox span{font-size:12.5px}}
.zbox{border:2px solid var(--line);background:var(--paper);border-radius:var(--r-m);padding:16px;cursor:pointer;text-align:left}
.zbox.on{border-color:var(--miel);background:#FFF8F0}
.zbox i{font-style:normal;font-size:25px;display:block;margin-bottom:7px}
.zbox b{display:block;font-size:16px}
.zbox span{font-size:13.2px;color:var(--ink-2);display:block;margin-top:3px}
.ac{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow);max-height:250px;overflow-y:auto;display:none}
.ac.on{display:block}
.ac button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 13px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.ac button:hover{background:var(--shell-2)}
.ac b{display:block;font-size:14.5px}
.ac span{font-size:12.7px;color:var(--ink-2)}
.geo{margin-top:9px;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;width:100%}
.geo.ok{border-color:var(--laton);color:#8A6E33}
/* Lo que falta, marcado en rojo un momento: al pulsar el botón, la página baja
   hasta ahí para que no haya que buscarlo. Se va solo al segundo y medio. */
.marca-falta{outline:2.5px solid var(--cherry);outline-offset:3px;border-radius:var(--r-s)}
.err{color:var(--cherry);font-size:14px;font-weight:700;display:none;margin-top:10px}
.err.show{display:block}
.note{background:var(--shell-2);border-radius:var(--r-m);padding:12px 15px;font-size:14px;color:var(--ink-2);margin-top:14px}
.next{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
/* Un poco más alta que antes, para que respire el aviso de debajo del botón;
   en el celular algo menos, que ahí cada píxel de pantalla cuenta. */
@media(max-width:520px){.next{padding:16px 14px calc(15px + env(safe-area-inset-bottom))}}
/* El botón no cambia de tamaño: va en una columna con el aviso debajo. */
.next-acc{flex:1;min-width:0;display:flex;flex-direction:column}
.next-acc .btn{width:100%}
.falta{display:none;margin:6px 0 0;color:var(--cherry);font-size:12.5px;font-weight:700;text-align:center;line-height:1.2}
.falta.show{display:block}
.next-in{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:14px}
.next-in .pz{flex:0 0 auto;min-width:88px}
.next-in .pz .t{font-size:10.5px;color:var(--ink-3);font-weight:700;line-height:1.1;
  letter-spacing:.07em;text-transform:uppercase}
/* Karla y tabular-nums: en una cifra que cambia mientras el cliente elige, los
   números tienen que ocupar todos lo mismo o el total da un salto en cada
   toque. La serif de los títulos, además, deja las cifras desiguales. */
.next-in .pz .v{font-family:"Karla",system-ui,sans-serif;font-weight:800;font-size:21px;
  line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.next-in .btn{flex:1;padding:14px 18px}
@media(max-width:380px){.next-in{gap:10px}.next-in .pz{min-width:76px}
  .next-in .pz .v{font-size:19px}.next-in .btn{font-size:15.5px;padding:13px 14px}}

.ty{max-width:560px;margin-inline:auto;padding:30px 0 70px;text-align:center}
.ty .seal{width:78px;height:78px;border-radius:999px;background:var(--vino);display:grid;place-items:center;margin:0 auto 18px}
.ty .seal img{width:40px;height:auto}
.ty .lead{color:var(--ink-2);margin-top:11px;font-size:16.5px}
.code{display:inline-block;margin-top:16px;background:var(--ink);color:#fff;border-radius:8px;padding:9px 18px;font-weight:700;letter-spacing:.04em;font-size:15px}
/* Las páginas de texto largo: la política de privacidad. Ancho corto para que
   se lea sin cansar, y jerarquía clara entre los títulos y el cuerpo. */
.legal-pag{max-width:66ch;margin:0 auto;padding:34px 0 60px}
.legal-pag h1{font-size:clamp(28px,5vw,40px);line-height:1.1;margin:0 0 8px}
.legal-pag .fecha{font-size:13.5px;color:var(--ink-3);margin:0 0 26px}
.legal-pag h2{font-family:"Karla",sans-serif;font-size:17px;font-weight:700;letter-spacing:0;margin:28px 0 8px;color:var(--vino)}
.legal-pag p{font-size:15.5px;line-height:1.7;margin:0 0 12px}
.legal-pag ul{margin:0 0 12px;padding-left:20px}
.legal-pag li{font-size:15.5px;line-height:1.7;margin-bottom:7px}
.legal-pag a{color:var(--vino);border-bottom:1px solid var(--laton)}
.legal-pag a.btn{border-bottom:none}
.qr-card{background:var(--paper);border:1px solid var(--laton);border-radius:var(--r-l);padding:24px 20px;margin-top:22px;
  /* Al elegir «adelantar la mitad» la página baja hasta acá: sin esto, la
     barra de arriba le tapaba el título del QR (2026-09-23). */
  scroll-margin-top:calc(var(--cab,100px) + 12px)}
/* Gracias: arriba el título, el código y la reserva. Debajo, en PC, dos
   columnas —el resumen a la izquierda, el QR y el WhatsApp a la derecha— para
   que todo se vea sin bajar. En el celular van uno debajo del otro, y una
   flecha invita a bajar hasta el total y el botón. */
.ty-cols{display:grid;gap:18px;margin-top:18px;scroll-margin-top:calc(var(--cab,100px) + 12px)}
.ty-cols .qr-card{margin-top:0}
/* La línea del envío gratis, sola y resaltada debajo del monto a adelantar
   (pedido del dueño, 2026-09-17): es el último empujón para que pague. */
.envio-gratis{margin-top:10px;padding:9px 12px;border:1px solid var(--laton);border-radius:10px;
  background:var(--crema);color:var(--vino);font-size:13.5px;font-weight:700;line-height:1.35}
.bajar{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;
  background:none;border:0;cursor:pointer;color:var(--vino);font-weight:700;font-size:13.5px}
.bajar span{font-size:22px;line-height:1;animation:bajar 1.6s ease-in-out infinite}
@keyframes bajar{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.bajar span{animation:none}}
@media(min-width:900px){
  .ty{max-width:1000px}
  .ty>.hold,.ty>.lead{max-width:560px;margin-inline:auto}
  .ty-cols{grid-template-columns:1fr 1fr;align-items:start}
  .bajar{display:none}}
/* El QR se escanea con la cámara de un celular: cuanto más grande, menos
   intentos. Y nada encima —antes llevaba un cartelito de "Yape / Plin" flotando
   justo en el medio, que es donde el código lleva su información—. */
.qr{width:215px;max-width:100%;margin:18px auto 10px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;background:#fff;position:relative;padding:10px}
.qr img{width:100%;height:auto;object-fit:contain;border-radius:4px;display:block}
/* Sin QR subido no se dibuja ninguno: mandar a escanear un cuadro falso es
   peor que decir la verdad. */
.qr.sin-qr{background:var(--paper);border-style:dashed;min-height:190px}
/* En un celular la pantalla es estrecha y el QR se comía media pantalla: hay
   que poder ver a la vez el código y lo que dice debajo. */
@media(max-width:520px){.qr{width:180px}}

/* ── EL PASO DEL PAGO (pedido del dueño, 2026-09-23) ─────────────────────
   Es un paso más del pedido —su propia página, /…/checkout/pago—, igual de
   ancho y con la misma barra de abajo que los otros. Las dos formas de pago
   van del mismo tamaño: ninguna manda sobre la otra. */
/* El paso del pago va sin foto y a una sola columna: acá no se mira el
   producto, se elige cómo pagar (pedido del dueño, 2026-09-23). */
.fn.fn-pago{grid-template-columns:1fr;max-width:860px;margin-inline:auto}
/* El título y su bajada, centrados sobre las dos opciones; el texto de cada
   opción se queda a la izquierda, que es como se lee cómodo. */
.fn-pago .fn-body>h2,.fn-pago .fn-body>.sub{text-align:center}
.fn-pago .fn-body>.sub{margin-inline:auto;max-width:52ch}
/* Las dos formas, EN LA MISMA FILA y del mismo tamaño, en PC y en el celular.
   En pantalla chica no caben al lado: van una debajo de otra, pero iguales. */
.cp-ops{display:grid;gap:10px;margin-top:6px;align-items:stretch}
@media(min-width:680px){ .cp-ops{grid-template-columns:1fr 1fr} }
/* Una sola forma de pagar (la app de la tarjeta apagada, 2026-09-23): una columna, centrada. */
.cp-ops.cp-solo{max-width:520px;margin-inline:auto}
@media(min-width:680px){ .cp-ops.cp-solo{grid-template-columns:1fr} }
/* Sin elegir nada y pulsando el botón: las dos se marcan en rojo. */
.cp-ops.mal .cp-op{border-color:var(--cherry)}
/* La pantalla del banco (3D Secure, 2026-09-23), debajo del cuadro de la tarjeta. */
.cp-desafio{margin-top:12px;border:1.5px solid var(--line);border-radius:16px;background:var(--paper);padding:12px}
.cp-desafio-t{font-size:14px;margin:0 0 10px;color:var(--ink)}
/* «Cancelar esta confirmación» del banco (2026-09-23): un enlace, sin pelear con el recuadro. */
.cp-desafio-no{display:block;margin-top:8px;padding:0;border:0;background:none;color:var(--vino);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.cp-desafio iframe{display:block;width:100%;height:560px;border:0;border-radius:10px;background:#fff}
.cp-op{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:16px;background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s}
.cp-op:hover{border-color:var(--laton)}
.cp-op.on{border-color:var(--vino);background:#FFF9F4}
.cp-op input{margin-top:3px;width:19px;height:19px;accent-color:var(--vino);flex:none}
.cp-txt{display:flex;flex-direction:column;gap:3px}
.cp-txt b{font-size:16px;font-weight:800;color:var(--ink)}
.cp-txt small{font-size:13px;color:var(--ink-2);line-height:1.4}
/* El cuadro de Mercado Pago vive acá dentro; su alto lo pone él. min-width:0
   para que, si su contenido es más ancho que el teléfono, se apriete en vez de
   sacarle barra de scroll a la página entera. */
.cp-caja{margin-top:12px;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:14px;min-height:120px;min-width:0}
.cp-caja.espera{display:none}
.cp-caja>div{max-width:100%}
.cp-sello{margin-top:10px;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.4}
/* El QR del adelanto, en chico: acá solo se ve para saber que existe; el
   grande, con el botón de WhatsApp, sale en la página de gracias. */
.cp-caja h4{font-size:15.5px;text-align:center;margin-bottom:4px}
.cp-qr{width:170px;margin:12px auto 6px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.cp-qr img{width:100%;height:auto;display:block;border-radius:4px}
.cp-qr-pie{text-align:center;font-size:13.5px;font-weight:700}
/* Hasta que no elige cómo pagar, el botón de abajo se ve apagado. Sigue
   pulsándose a propósito: así puede tocarlo y la tienda le dice qué falta,
   en vez de dejarlo adivinando por qué no pasa nada. */
.btn.apagado{background:var(--line);color:var(--ink-3)}
.btn.apagado:hover{background:var(--line)}
.pago-cargando{display:flex;align-items:center;justify-content:center;gap:10px;padding:26px 0;
  color:var(--ink-2);font-size:14px}
/* Lo que sale mal al pagar: en rojo, debajo de todo y con sitio para respirar. */
.cp-error{margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid #E7C9CC;
  background:#FBEFF0;color:var(--vino);font-size:14px;line-height:1.5}
/* Pagado con tarjeta: la página de gracias es otra. No hay QR del adelanto ni
   reloj de reserva —no le falta nada—: se le confirma el pedido y se le dice
   qué sigue (pedido del dueño, 2026-09-23). */
.ty-cols.pagada .qr-card:not(.pagada-card){display:none}
.pagada-card{border-color:var(--ribbon)}
.pagado-sello{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 16px;
  border-radius:999px;background:var(--verde-fondo,#EEF6EF);color:var(--ribbon);
  font-size:14.5px;font-weight:700;border:1px solid #BFE0CC}
/* Los cuatro pasos de lo que viene: el primero ya está hecho. */
.seguimiento{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;text-align:left}
.seguimiento li{position:relative;padding-left:30px}
.seguimiento li::before{content:"";position:absolute;left:8px;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--paper);border:2px solid var(--line)}
/* La línea que une un paso con el siguiente. */
.seguimiento li:not(:last-child)::after{content:"";position:absolute;left:13px;top:19px;bottom:-12px;
  width:2px;background:var(--line)}
.seguimiento li.hecho::before{background:var(--ribbon);border-color:var(--ribbon)}
.seguimiento b{display:block;font-size:14.5px;color:var(--ink)}
.seguimiento span{display:block;font-size:13px;color:var(--ink-2);line-height:1.45;margin-top:2px}
@media(max-width:400px){
  .cp-caja{padding:10px 0;border-radius:12px}
  .cp-caja>div{overflow-x:auto}
  .cp-op{padding:12px 13px}
}

.qr.sin-qr span{display:block;padding:0 18px;text-align:center;font-size:13.5px;font-weight:600;color:var(--ink-3);line-height:1.5}
/* Ya no hay ningún cartelito flotando sobre el QR: tapaba el código. Lo de
   "Yape o Plin" se dice en la frase de arriba, que es donde se lee. */
.qr-foot{font-size:14px;font-weight:700}
.qr-foot span{color:var(--ink-3);font-weight:600}
.hold{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--shell-2);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;margin-top:14px}
.hold b{color:var(--cherry);font-variant-numeric:tabular-nums}
table{border-collapse:collapse;font-size:12.5px;white-space:nowrap;min-width:100%}
th,td{border:1px solid var(--line);padding:6px 9px;text-align:left}
th{background:var(--shell-2);font-weight:700}

.pop{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(42,26,18,.55)}
.pop.on{display:flex}
/* La ventana «Te falta poco». Si la pantalla es baja, se recorre por dentro
   en vez de salirse. */
.pop-in{position:relative;background:var(--paper);border-radius:var(--r-l);max-width:400px;width:100%;padding:28px 24px;text-align:center;box-shadow:var(--shadow);
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto}
.pop-in .emo{font-size:46px;margin-bottom:10px}
.pop-in h3{margin-bottom:8px}
.pop-in p{font-size:15px;color:var(--ink-2);margin-bottom:18px}
.pop-in .btn{width:100%;margin-bottom:9px}
/* La ✕, arriba a la derecha: hace lo que hacía «Prefiero salir». Se ve chica
   y se toca en 44 × 44. */
.pop-in .no{position:absolute;top:6px;right:6px;width:44px;min-height:44px;padding:0;background:none;border:0;
  border-radius:99px;color:var(--ink-3);font-size:20px;line-height:1;cursor:pointer}
.pop-in .no:hover{color:var(--ink)}
/* El descuento: «Termina tu pedido con», y debajo el monto del tamaño del 🎁
   con «DESCUENTO» al lado, del tamaño del título. Si no caben en una fila
   (un monto con céntimos en un celular angosto), DESCUENTO pasa abajo. */
.pop-in .pop-con{margin:4px 0 0}
.pop-in .pop-monto{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;column-gap:10px;
  margin:0 0 4px;color:var(--vino)}
.pop-monto b{font-family:"Karla",system-ui,sans-serif;font-size:46px;font-weight:800;line-height:1.1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pop-monto span{font-family:"Karla",system-ui,sans-serif;font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:.06em}
.pop-in .pop-min{font-size:13px;color:var(--ink-3);margin:8px 0 16px}
@media(max-width:420px){.pop{padding:14px}.pop-in{padding:26px 18px 18px}.pop-in .btn{font-size:15.5px;padding:14px 16px}}

footer{background:var(--vino);color:#F6E7DC;margin-top:20px;padding:40px 0 26px}
footer .cols{display:grid;gap:24px}
@media(min-width:760px){footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
footer .brand{color:#fff}
footer p{font-size:14.5px;color:#E6CEC0;margin-top:9px;max-width:34ch}
footer h5{font-size:14px;font-weight:700;margin-bottom:9px;color:#fff}
/* Uno debajo de otro, y con alto suficiente para tocarlos con el dedo.
   Cuidado con tocar esto desde fuera: un ".cols a{display:inline-block}" los
   pegó a todos en una sola línea —"Todo el catálogoBoxesPeluches"— porque gana
   por especificidad. Si hace falta cambiarlos, se cambia ACÁ. */
footer a{display:block;font-size:14.5px;color:#E6CEC0;padding:8px 0;line-height:1.2}
/* El cartel del Libro de Reclamaciones. Fondo blanco porque el original es
   azul sobre blanco y el pie es vino: sin el fondo se pierde. */
/* El ancho del cartel del Libro, en una sola variable por pantalla: se cambia
   acá y en ningún otro sitio. Antes 170 px en PC y 118 en el celular; a la
   mitad, que es lo que pidió el dueño. */
footer{--libro-ancho:85px}
@media(max-width:760px){footer{--libro-ancho:59px}}
footer a.libro{padding:0;margin-top:12px;max-width:var(--libro-ancho)}
footer a.libro img,footer a.libro svg{display:block;width:100%;height:auto;background:#fff;
  border-radius:8px;padding:10px}
footer .legal{border-top:1px solid rgba(255,255,255,.2);margin-top:26px;padding-top:15px;font-size:13px;color:#C9A899}

.grp{margin-top:26px}
.grp:first-of-type{margin-top:18px}
.grp-h{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.grp-h .n{width:25px;height:25px;border-radius:99px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:0 0 auto}
.grp-h .n.ok{background:var(--laton)}
.grp-h h3{font-size:17.5px;font-family:"Karla",sans-serif;font-weight:700;flex:1;letter-spacing:0}
.grp-h em{font-style:normal;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
/* Obligatorio, que se note: en su color y en una pastilla. Opcional sigue igual. */
.grp-h em.oblig{color:var(--vino);font-weight:700;background:#FBECEC;border-radius:999px;padding:2px 9px}
/* Grupos amarrados (aprobado por el dueño, 2026-09-18): los dos grupos hijos
   viven dentro de un recuadro crema de borde fino y esquinas redondeadas, con
   el título del grupo padre arriba y lo que exige al lado. Así el cliente ve de
   un vistazo que los dos van juntos. En el celular el recuadro se estrecha. */
.padre{margin-top:26px;padding:14px 16px 4px;border:1px solid var(--line);border-radius:16px;background:var(--crema)}
.padre .grp:first-of-type{margin-top:4px}
.padre .grp{margin-top:18px}
.padre-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.padre-h h3{font-size:16px;font-family:"Karla",sans-serif;font-weight:800;letter-spacing:.01em;flex:1}
.padre-h em{font-style:normal;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.padre-h em.oblig{color:var(--vino);font-weight:700;background:#FBECEC;border-radius:999px;padding:2px 9px}
.padre.listo{border-color:var(--laton)}
@media(max-width:640px){
  .padre{padding:12px 12px 2px;border-radius:14px}
  /* En el celular el título se queda solo en su línea y lo que exige baja
     debajo: si van juntos, «Elige tu regalo» se parte en tres renglones. */
  .padre-h h3{flex:1 0 100%}
  .padre-h em{white-space:normal}
}
/* La opción que hay que elegir sí o sí: asterisco rojo y etiqueta
   "Obligatorio" junto al título. Igual en el h3 del producto suelto que en el
   rótulo chico de las opciones de una pieza del combo o de un extra. */
.ast{color:var(--rojo);font-weight:800}
.oblig-tag{display:inline-block;vertical-align:1px;margin-left:2px;background:#FDECEA;color:var(--rojo);border:1px solid #F3C4BF;
  border-radius:999px;padding:1px 8px;font-family:"Karla",system-ui,sans-serif;font-size:11px;font-weight:700;
  line-height:1.5;letter-spacing:.02em;white-space:nowrap}
.grp-h .n.opt{background:var(--line);color:var(--ink-3)}
.quitar-sel{position:relative;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px;
  font-size:12.5px;cursor:pointer;color:var(--ink-2);margin-left:auto}
/* Mismo tamaño a la vista; la capa invisible lo deja tocar en 44 px. */
.quitar-sel::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;
  min-width:44px;min-height:44px;transform:translate(-50%,-50%)}
.quitar-sel:hover{border-color:var(--cherry);color:var(--cherry)}
.incluido{display:flex;align-items:center;gap:12px;background:var(--shell-2);border:1px solid var(--line);border-radius:var(--r-m);padding:13px 14px}
.incluido .i-emo{font-size:28px;flex:0 0 auto}
.incluido .i-foto{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.incluido b{display:block;font-size:15px}
.incluido span.d{font-size:13px;color:var(--ink-2);display:block;line-height:1.35}
.incluido .i-lock{margin-left:auto;font-size:11.5px;font-weight:700;background:var(--paper);border:1px solid var(--laton);border-radius:999px;padding:4px 10px;white-space:nowrap;color:#8A6E33}
.trae{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.trae li{font-size:12.8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 11px}

.rl b s,.rango s,.next-in .pz s{color:var(--cherry);font-weight:500;opacity:.9;margin-right:7px}
.rl.ahorro-l{border-top:1px dashed var(--line);padding-top:9px;margin-top:9px}
.rl.ahorro-l span{font-weight:700;color:var(--ink)}
.rl.ahorro-l b{color:var(--cherry);font-size:15.5px}
/* La línea del envío (2026-09-21): va debajo de todo lo que se lleva, con su
   raya de separación como el ahorro. Gratis se lee en verde, que es lo que
   engancha; con precio, como una línea más del resumen. */
.rl.envio-l{border-top:1px dashed var(--line);padding-top:9px;margin-top:9px}
.rl.envio-l span{font-weight:700;color:var(--ink)}
.rl.envio-l b{font-size:15.5px}
.rango s{font-size:16px;font-family:"Karla",sans-serif}
.next-in .pz .v s{font-size:12.5px;display:block;line-height:1.1;margin:0;font-weight:600}
/* «Envío: S/ 10» encima del tachado, del mismo tamaño, sin tachar. */
.next-in .pz .v .pz-envio{display:block;font-size:12.5px;line-height:1.1;margin:1px 0 2px;font-weight:600;color:var(--ink-2);letter-spacing:0;white-space:nowrap}
.fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.foto-slot{position:relative;border:1.5px dashed var(--line);background:var(--paper);border-radius:var(--r-m);
  aspect-ratio:1;display:grid;place-items:center;cursor:pointer;overflow:hidden;text-align:center;padding:10px}
.foto-slot:hover{border-color:var(--ink-3)}
.foto-slot.ok{border-style:solid;border-color:var(--laton)}
.foto-slot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.foto-slot .ico{font-size:26px;display:block}
.foto-slot .t{font-size:12.8px;font-weight:700;margin-top:5px;display:block}
.foto-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-slot .quitar{position:absolute;top:7px;right:7px;z-index:3;background:rgba(255,255,255,.95);border:1px solid var(--line);
  border-radius:99px;width:26px;height:26px;cursor:pointer;font-size:13px;line-height:1}
/* La ✕ se toca en 44 px. La capa crece hacia dentro de la foto y no hacia
   fuera: la caja corta lo que se sale (overflow:hidden) y ahí no llega el dedo. */
.foto-slot .quitar::before{content:"";position:absolute;top:-7px;right:-7px;bottom:-11px;left:-11px}
.grp-sub{font-size:13.2px;color:var(--ink-2);margin:-4px 0 11px;line-height:1.45}

.cargando{min-height:60vh;display:grid;place-items:center;text-align:center;padding:40px 20px}
.cargando .anillo{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--vino);
  border-radius:99px;animation:giro .9s linear infinite;margin:0 auto 16px}
@keyframes giro{to{transform:rotate(360deg)}}
.cargando p{color:var(--ink-2);font-size:15px}
.cargando .btn{margin-top:18px}
/* Si el catálogo tarda, una salida debajo: escribir por WhatsApp. */
.cargando .lento{margin-top:12px;font-size:14px}
.cargando .lento a{color:var(--vino);font-weight:700;border-bottom:1px solid var(--laton)}

.ag-sel{margin-top:10px;border:1.5px solid var(--laton);background:#FAF4E7;border-radius:var(--r-m);padding:13px 15px;display:flex;gap:11px;align-items:flex-start}
.ag-sel .ic{font-size:20px;line-height:1.2;flex:0 0 auto}
.ag-sel b{display:block;font-size:14.8px;line-height:1.3}
.ag-sel .ruta{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.ag-sel .dir{font-size:13.4px;color:var(--ink-2);margin-top:6px;line-height:1.45}
.ag-sel .cambiar{position:relative;margin-left:auto;background:none;border:0;color:var(--vino);font-size:12.8px;font-weight:700;cursor:pointer;text-decoration:underline;white-space:nowrap;flex:0 0 auto}
/* "Cambiar" es un texto chico: la capa invisible lo deja tocar en 44 px, sin
   salirse de la tarjeta de la agencia. */
.ag-sel .cambiar::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;
  min-width:44px;min-height:44px;transform:translate(-50%,-50%)}
.ac .sinres{padding:12px 13px;font-size:13.5px;color:var(--ink-3)}
.ac button b em{font-style:normal;background:#F6E6C8;border-radius:3px;padding:0 1px}
.ag-cargando{font-size:13.5px;color:var(--ink-3);margin-top:8px;display:flex;align-items:center;gap:8px}
.ag-cargando .anillo{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--vino);border-radius:99px;animation:giro .9s linear infinite}

.rec{max-width:720px;margin-inline:auto;padding:26px 0 80px}
.rec h1{font-size:clamp(28px,5vw,42px)}
.rec .intro{color:var(--ink-2);font-size:15.5px;margin-top:12px}
.rec .aviso{background:var(--shell-2);border:1px solid var(--laton);border-radius:var(--r-m);padding:14px 16px;margin-top:18px;font-size:14px;color:var(--ink-2)}
.rec .bloque{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:18px 20px;margin-top:18px}
.rec .bloque h3{font-size:18px;margin-bottom:4px}
.rec .bloque p.sub{font-size:13.5px;color:var(--ink-3);margin-bottom:12px}
.rec .dos{display:grid;gap:14px}
@media(min-width:640px){.rec .dos{grid-template-columns:1fr 1fr}}
.rec textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--r-s);padding:12px 13px;font-size:16px;background:var(--paper);resize:vertical;min-height:96px}
.rec .radio{display:flex;gap:10px;flex-wrap:wrap}
.rec .radio label{flex:1;min-width:150px;border:2px solid var(--line);background:var(--paper);border-radius:var(--r-m);padding:13px 15px;cursor:pointer}
.rec .radio label:has(input:checked){border-color:var(--vino);background:#FBF3F4}
.rec .radio input{display:none}
.rec .radio b{display:block;font-size:15px}
.rec .radio span{font-size:13px;color:var(--ink-2)}
.rec .trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rec-ok{max-width:560px;margin-inline:auto;padding:40px 0 80px;text-align:center}
.rec-ok .seal{width:78px;height:78px;border-radius:999px;background:var(--vino);color:#fff;display:grid;place-items:center;font-size:34px;margin:0 auto 18px}
.rec-ok .num{display:inline-block;margin-top:14px;background:var(--ink);color:#fff;border-radius:8px;padding:9px 18px;font-weight:700;letter-spacing:.04em}

.field img.real{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.field.tiene .emo{display:none}
.minis{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.minis::-webkit-scrollbar{display:none}
.mini-f{flex:0 0 auto;width:62px;height:62px;border-radius:10px;overflow:hidden;border:2px solid var(--line);cursor:pointer;background:var(--paper);padding:0}
.mini-f.on{border-color:var(--vino)}
.mini-f img{width:100%;height:100%;object-fit:cover}
/* El carrusel de la foto grande (carrusel() en index.html). La pista lleva las
   fotos en fila y se corre de a una; la caja sigue siendo la .field cuadrada,
   así que nada salta al cargar. pan-y: el dedo en vertical sigue bajando la
   página y en horizontal pasa fotos. Con zoom, el dedo recorre la foto. */
.field.car{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.field.car.zoom{touch-action:none;cursor:move}
.car-pista{position:absolute;inset:0;display:flex;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.car-f{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.car-f img.real{transition:transform .25s ease;-webkit-user-drag:none}
.car.arrastra .car-pista,.car.arrastra .car-f img.real{transition:none}
/* 44 px para el dedo, blancas y con sombra para verse sobre cualquier foto. */
.car-fl{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border:0;border-radius:99px;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(42,26,18,.18)}
.car-fl.ant{left:8px}
.car-fl.sig{right:8px}
.car.zoom .car-fl{display:none}
.car-puntos{display:flex;justify-content:center;margin-top:6px}
.car-p{position:relative;width:26px;height:26px;border:0;background:none;padding:0;cursor:pointer}
.car-p::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:99px;background:var(--line);transition:background .2s,transform .2s}
.car-p.on::after{background:var(--vino);transform:scale(1.3)}
@media(prefers-reduced-motion:reduce){.car-pista,.car-f img.real,.car-p::after{transition:none}}
.op .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op .ph.tiene{font-size:0}
.card .field img.real{border-radius:0}

.grp-nota{font-size:13.5px;color:var(--ink-2);margin:-6px 0 11px;line-height:1.45}
.sub-op{margin-top:11px;padding:11px 13px;background:var(--shell-2);border-radius:var(--r-m)}
.sub-op .t{font-size:12.5px;font-weight:700;color:var(--ink-2);display:block;margin-bottom:8px;letter-spacing:.02em}
/* El producto de esas opciones, en negrita más oscura (2026-09-23). */
.sub-op .t .de-prod{color:var(--ink);font-weight:800}
.sub-op .fila{display:flex;flex-wrap:wrap;gap:8px}
.sub-op button{border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 14px;
  font-size:13.8px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sub-op button.on{border-color:var(--vino);background:#FBF3F4;font-weight:700}
.sub-op button i{font-style:normal;width:13px;height:13px;border-radius:99px;display:inline-block;border:1px solid rgba(0,0,0,.12)}
.sub-op .pr{font-size:12.5px;color:var(--miel);font-weight:700}

/* Agotado. El combo no tiene stock propio: sale así cuando algo de dentro,
   de un grupo obligatorio, se quedó sin unidades. */
.card.agotada .field{filter:grayscale(.85);opacity:.6}
.card.agotada .card-body h4{color:var(--ink-3)}
.flag.agotado{background:var(--ink);color:#fff;letter-spacing:.06em}

/* La fila del botón Atrás: debajo del menú, no en la barra de conectados.
   Solo aparece mientras se está armando un pedido. */
.volver{display:none;border-bottom:1px solid var(--line);background:var(--paper)}
.volver.on{display:block}
.volver .wrap{padding-top:8px;padding-bottom:8px}
.volver .back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;
  /* 44 px de alto: es un botón que se toca con el dedo, no un enlace de texto. */
  padding:0;min-height:44px;min-width:88px}
.volver .back:hover{color:var(--ink)}

/* Un botón que trabaja: su rueda, y bloqueado para que no se mande dos veces. */
.spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:99px;
  animation:giro .6s linear infinite}
.btn.ghost .spin,.back .spin{border-color:var(--line);border-top-color:var(--ink-2)}
.btn:disabled,button:disabled{opacity:.72;cursor:progress}
.foto-slot.subiendo{opacity:.6;pointer-events:none}


/* ════════ 8. Aviso de compra ════════
   La tarjetita de "acaba de comprar". Muy pequeña a propósito: tiene que verse
   de reojo, no tapar lo que el cliente está mirando. Abajo a la izquierda; en
   la página de un producto, pegada al pie de su foto. */
.compra{position:fixed;left:12px;bottom:14px;z-index:40;display:flex;align-items:center;gap:7px;
  max-width:215px;padding:6px 22px 6px 6px;background:rgba(255,255,255,.97);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(40,20,20,.12);
  font-size:11.5px;line-height:1.3;color:var(--ink-2);
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.compra.sale{opacity:1;transform:none;pointer-events:auto}
/* En la página del producto: a la altura de siempre (50 px sobre el pie de
   la foto, por encima de su nombre) pero pegada al borde izquierdo de la
   pantalla; mostrarCompra() mide cuánto correrla. Con su propia clase, no
   las de las etiquetas de la foto. Pegada al borde: sin borde ni curva de
   ese lado. Solo aquí: en el inicio y el catálogo sigue como siempre. */
.compra.compra-ficha{position:absolute;bottom:50px;border-left:0;border-radius:0 10px 10px 0}
.compra .ico{flex:0 0 auto;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:15px}
.compra .txt b{color:var(--ink);font-weight:700}
.compra .x{position:absolute;top:1px;right:3px;background:none;border:0;cursor:pointer;
  font-size:14px;line-height:1;color:var(--ink-3);padding:3px}
/* La ✕ sigue viéndose chiquita, pero se cierra con un toque de 44 px. */
.compra .x::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
@media(max-width:520px){.compra{max-width:185px;font-size:10.8px}.compra .ico{width:24px;height:24px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.compra{transition:none}}