/* Tiendita de Curiosidades · "Nuevo estilo" (2026-10-10)
   Lenguaje visual de las referencias de Dario (nuevo estilo board): papel, rótulos a mano, stickers con borde
   blanco, manchas de color, bandas de papel rasgado, garabatos. Colores y fuentes SOLO de la marca
   (Design System v1.2): magenta del logo, menta, oro, lila, morado; títulos Gochi Hand (respaldo de GoodDog Cool),
   texto ABeeZee. Sin frameworks: CSS plano, fuentes servidas desde el sitio (sin Google). */

@font-face { font-family: 'Gochi Hand'; src: url('fuentes/gochi-hand.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'ABeeZee'; src: url('fuentes/abeezee.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'ABeeZee'; font-style: italic; src: url('fuentes/abeezee-italica.woff2') format('woff2'); font-display: swap; }
/* Con el archivo con licencia de GoodDog Cool: ponerlo en fuentes/ y agregar su @font-face aquí. */

:root {
  --papel: var(--td-lavanda);          /* fondo de página (lavanda humo) */
  --papel-2: #e4dde8;                  /* papel un tono abajo para bloques (lavanda × ciruela 8%) */
  --tinta: var(--td-tinta);            /* texto y contornos */
  --tinta-suave: #4b4452;              /* texto secundario: 8.0:1 sobre lavanda */
  --blanco: var(--td-blanco);
  --c-magenta: var(--td-magenta);
  --c-menta: var(--td-menta);
  --c-oro: var(--td-oro);
  --c-lila: var(--td-lila);
  --c-morado: var(--td-mistico);
  --c-rosa: var(--td-rosa);
  --c-cielo: var(--td-cielo);

  --f-rotulo: 'GoodDog Cool', 'Gochi Hand', 'Patrick Hand', cursive;
  --f-texto: 'ABeeZee', system-ui, sans-serif;

  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.5625rem;
  --t-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.45rem);
  --t-3xl: clamp(2.2rem, 1.4rem + 3.6vw, 3.8rem);
  --t-mega: clamp(2.6rem, 1.2rem + 5.4vw, 5.6rem);

  --r-tarjeta: 18px; --r-pastilla: 100px;
  --borde: 2.5px solid var(--tinta);
  --sombra-dura: 4px 4px 0 var(--tinta);
  --ancho: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .05 0 0 0 0 .1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--tinta); font: 400 var(--t-md)/1.55 var(--f-texto); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-rotulo); font-weight: 400; line-height: 1; margin: 0; letter-spacing: .01em; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Foco de dos anillos (tinta + blanco): visible sobre papel, magenta, lila, menta y tinta (auditoría 2026-10-10). */
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; box-shadow: 0 0 0 6px var(--blanco); border-radius: 6px; }
html { scroll-padding-top: 96px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--tinta); color: var(--blanco); padding: 10px 16px; border-radius: var(--r-pastilla); }
.saltar:focus { top: 8px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ── Barra superior ───────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 2px solid var(--tinta); }
.barra .envoltura { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.marca img { width: 92px; height: auto; }
.nav-principal { display: flex; gap: 28px; margin-right: auto; }
.nav-principal a { text-decoration: none; font-size: var(--t-md); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-principal a:hover, .nav-principal a[aria-current="page"] { border-bottom-color: var(--c-magenta); }
.acciones { display: flex; align-items: center; gap: 8px; }
.icono-boton { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; position: relative; background: none; border: 0; cursor: pointer; }
.icono-boton:hover { background: var(--papel-2); }
.icono-boton .contador { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--c-magenta); color: var(--blanco); font-size: var(--t-xs); line-height: 20px; text-align: center; }
.menu-movil { display: none; }
.aviso { background: var(--tinta); color: var(--papel); font-size: var(--t-sm); text-align: center; padding: 8px var(--gutter); margin: 0; }
.aviso svg { display: inline; width: .9em; height: .9em; color: var(--c-menta); vertical-align: -1px; }

/* ── Botones ──────────────────────────────────────────────── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 12px; border: var(--borde); background: var(--tinta); color: var(--blanco); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.boton:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--c-magenta); }
.boton:active { transform: none; box-shadow: none; }
.boton--linea { background: transparent; color: var(--tinta); }
.boton--linea:hover { box-shadow: var(--sombra-dura); }
.boton--magenta { background: var(--c-magenta); color: var(--blanco); }
.boton--magenta:hover { box-shadow: var(--sombra-dura); }
.boton--pildora { min-height: 42px; border-radius: var(--r-pastilla); padding: 0 18px; font-size: var(--t-sm); }
.boton--grande { min-height: 56px; font-size: var(--t-lg); width: 100%; }
.boton-circulo { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: var(--borde); background: var(--blanco); color: var(--tinta); cursor: pointer; flex: none; transition: background-color .15s ease, color .15s ease; }
.boton-circulo:hover { background: var(--tinta); color: var(--blanco); }
.boton-circulo .ico { width: 20px; height: 20px; }

/* ── Rótulos a mano ───────────────────────────────────────── */
.rotulo { font-family: var(--f-rotulo); font-size: var(--t-mega); line-height: .88; text-transform: uppercase; }
/* Letras de burbuja: relleno de color, contorno grueso de tinta y sombra desplazada (como el "GOOD MOOD"). */
.burbuja { color: var(--c-magenta); -webkit-text-stroke: .09em var(--tinta); paint-order: stroke fill; text-shadow: .05em .06em 0 var(--tinta); }
.burbuja--menta { color: var(--c-menta); }
.burbuja--oro { color: var(--c-oro); }
.nota { font-family: var(--f-rotulo); font-size: var(--t-xl); line-height: 1.05; transform: rotate(-6deg); display: inline-block; }
.titulo-seccion { font-size: var(--t-3xl); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.titulo-seccion svg { width: 1.1em; height: auto; color: var(--c-magenta); }

/* ── Piezas sueltas (garabatos, cinta, sticker) ───────────── */
.garabato { position: absolute; pointer-events: none; color: var(--tinta); }
.cinta { display: inline-block; padding: 6px 14px; background: var(--c-oro); border: 2px solid var(--tinta); font-family: var(--f-rotulo); font-size: var(--t-lg); transform: rotate(-3deg); }
.sticker { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(4px 6px 0 rgb(16 24 31 / .18)); }
.foto-pegada { border: 6px solid var(--blanco); box-shadow: 6px 8px 0 rgb(16 24 31 / .16); border-radius: 6px; }
.rasgado { display: block; width: 100%; height: 22px; color: inherit; }
.rasgado--abajo { transform: scaleY(-1); }

/* Rejilla de productos (portada y catálogo) */
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 40vw), 1fr)); gap: 18px; }
.producto { position: relative; display: flex; flex-direction: column; background: var(--blanco); border: var(--borde); border-radius: var(--r-tarjeta); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.producto:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-dura); }
.producto__foto { position: relative; aspect-ratio: 1; background: var(--papel-2); }
.producto__foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
/* Carga (EDGA §86, 2026-10-23): el cuadro gris ya es el esqueleto; la foto aparece suave al terminar (sitio.js), sin brillo
   animado. Sin JS se ve normal. content-visibility: el navegador no pinta las tarjetas fuera de pantalla (240 por página). */
.fotos-js .producto__foto img:not(.cargada) { opacity: 0; }   /* clase propia: CSS nuevo + JS viejo en caché nunca esconde fotos */
.producto { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.producto__foto .sin-foto { display: grid; place-items: center; height: 100%; color: var(--c-magenta); }
.producto__foto .sin-foto svg { width: 30%; aspect-ratio: 1; height: auto; }
.etiqueta { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: var(--r-pastilla); border: 2px solid var(--tinta); font-size: var(--t-xs); background: var(--blanco); }
.etiqueta--local { background: var(--c-menta); }
.producto__cuerpo { display: flex; align-items: flex-end; gap: 10px; padding: 12px 12px 14px; margin-top: auto; }
.producto__datos { flex: 1; min-width: 0; }
.producto__nombre { font-family: var(--f-texto); font-size: var(--t-md); font-weight: 700; line-height: 1.25; margin: 0 0 4px; }
.producto__nombre a { text-decoration: none; }
.producto__nombre a::after { content: ''; position: absolute; inset: 0; }
.producto form { position: relative; z-index: 1; }
.precio { font-weight: 700; margin: 0; }
.precio small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: var(--t-xs); }

/* ── Catálogo, ficha, carrito ─────────────────────────────── */
.cabeza-catalogo { padding: clamp(24px, 4vw, 48px) 0 16px; display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: end; }
.cabeza-catalogo p { max-width: 52ch; color: var(--tinta-suave); margin: 12px 0 0; }
.buscar { display: flex; gap: 8px; align-items: center; background: var(--blanco); border: var(--borde); border-radius: var(--r-pastilla); padding: 4px 4px 4px 18px; min-width: min(380px, 100%); }
.buscar input { flex: 1; border: 0; background: none; min-height: 44px; outline: none; }
.buscar:focus-within { box-shadow: var(--sombra-dura); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 20px; scrollbar-width: thin; }
.chips a { white-space: nowrap; padding: 8px 16px; border-radius: var(--r-pastilla); border: 2px solid var(--tinta); background: var(--blanco); text-decoration: none; font-size: var(--t-sm); }
.chips a[aria-current="true"] { background: var(--tinta); color: var(--blanco); }
.vacio { text-align: center; padding: 48px 0; }
.vacio svg { width: 64px; margin: 0 auto 12px; color: var(--c-magenta); }
.mas { text-align: center; margin-top: 32px; }

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); padding: clamp(24px, 4vw, 48px) 0; align-items: start; }
.ficha__foto { position: relative; }
.ficha__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ficha__foto .destello { position: absolute; width: 44px; color: var(--c-oro); right: -12px; top: -12px; }
.ficha h1 { font-size: var(--t-3xl); margin-bottom: 12px; }
.ficha .precio { font-size: var(--t-2xl); font-family: var(--f-texto); }
.ficha .cinta { margin: 12px 0 18px; }
.ficha__nota { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 12px; padding: 12px 16px; margin: 16px 0; }
.agregar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 20px; }
.agregar label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); }
.agregar input { width: 96px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea { min-height: 48px; padding: 10px 14px; border: 2px solid var(--tinta); border-radius: 12px; background: var(--blanco); }
.lineas { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--blanco); border: var(--borde); border-radius: var(--r-tarjeta); overflow: hidden; }
.lineas th, .lineas td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--papel-2); vertical-align: middle; }
.lineas tr:last-child td { border-bottom: 0; }
.cantidad { display: flex; gap: 6px; align-items: center; }
.cantidad input { width: 76px; }
.cp, .en-linea { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 20px 0; }
.cp label, .datos label, .en-linea label { display: flex; flex-direction: column; gap: 4px; }
.totales { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; background: var(--blanco); border: var(--borde); border-radius: var(--r-tarjeta); padding: 18px; max-width: 520px; }
.totales dt { font-weight: 700; }
.totales dd { margin: 0; text-align: right; }
.totales .total { font-size: var(--t-lg); }
.datos { display: grid; gap: 14px; max-width: 520px; margin-top: 24px; }
.datos .check { flex-direction: row; align-items: flex-start; gap: 10px; }
.pista { color: var(--tinta-suave); }
.errores, .alerta { background: var(--c-rosa); border: 2px solid var(--tinta); padding: 10px 16px; border-radius: 12px; }
.flash { background: var(--td-menta-suave); border: 2px solid var(--tinta); padding: 10px 16px; border-radius: 12px; }
.hoja { background: var(--blanco); border: 2px dashed var(--c-magenta); border-radius: var(--r-tarjeta); padding: 16px; margin: 24px 0; }
.pagina { padding-block: clamp(24px, 4vw, 48px); }
.pagina h1 { font-size: var(--t-3xl); margin-bottom: 16px; }

/* ── Pie (claro, como la maqueta) ─────────────────────────── */
.pie { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid rgb(16 24 31 / .14); padding: 28px 0 32px; font-size: var(--t-sm); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pie__marca img { width: 64px; height: auto; }
.pie__lema { margin: 0 auto 0 0; font-weight: 700; }
.pie nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie a { text-decoration: none; }
.pie nav a:hover { text-decoration: underline; }
.pie .redes { display: flex; gap: 2px; }
.pie .redes a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.pie .redes a:hover { background: var(--papel-2); }
.pie__copy { margin: 0; font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.4; }
.pie__visita { margin-top: 18px; color: var(--tinta-suave); font-size: var(--t-xs); }
.pie__visita p { margin: 0; }
.pie__visita .ico { display: inline; width: 14px; height: 14px; vertical-align: -2px; color: var(--c-magenta); }

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .portada .envoltura, .visita, .comunidad, .ficha { grid-template-columns: 1fr; }
  .portada__visual { min-height: 420px; }
  .antojos { grid-template-columns: repeat(2, 1fr); }
  .cartel { grid-template-columns: 1fr; }
  .cartel__foto { max-width: 220px; }
  .cabeza-catalogo { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-principal { overflow-x: auto; }
  .js .nav-principal { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--papel); border-bottom: 2px solid var(--tinta); padding: 8px var(--gutter) 16px; }
  .nav-principal a { padding: 12px 0; font-size: var(--t-lg); }
  .js .barra[data-menu="abierto"] .nav-principal { display: flex; }
  .js .menu-movil { display: inline-grid; }
  html:not(.js) .barra .envoltura { flex-wrap: wrap; }
  html:not(.js) .nav-principal { order: 3; width: 100%; gap: 18px; padding-bottom: 8px; }
  .barra .envoltura { gap: 12px; justify-content: space-between; }
  .portada__visual { min-height: 360px; }
  .portada__visual .explosion { width: 130px; }
  .portada__visual .explosion-texto { width: 100px; top: 34px; font-size: 1.05rem; }
  .portada .nota-flecha { display: none; }
  .banda__lista { gap: 8px 28px; }
  .lineas th:nth-child(2), .lineas td:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Utilidades (el CSP no permite style="" en línea) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.seccion[data-pegada] { padding-top: 0; }
.carita--linea { display: inline-block; vertical-align: middle; width: .8em; height: .8em; }
.boton-circulo--grande { width: 64px; height: 64px; }
.oro { color: var(--c-oro) !important; }
.origen { display: inline-block; margin: 0; padding: 2px 10px; border-radius: var(--r-pastilla); border: 2px solid var(--tinta); font-size: var(--t-xs); background: var(--blanco); }
.origen.local { background: var(--c-menta); }
.mayoreo { color: var(--tinta-suave); font-size: var(--t-sm); }
.pagina h1 { font-family: var(--f-rotulo); }
.pagina section + section, .pagina form + h2 { margin-top: 28px; }
.pagina h2 { font-size: var(--t-2xl); margin: 24px 0 12px; }
/* Los <svg><use> sin viewBox miden 150px de alto por defecto: cada garabato declara su proporción. */
.destello, .aviso svg, .vacio svg { aspect-ratio: 1; height: auto; }
@media (max-width: 720px) {
  .antojo__pie .boton-circulo { display: none; }
  .marca img { width: 72px; }
}
@media (max-width: 720px) {
  .cartel .rayas { display: none; }
  .rejilla { gap: 12px; }
  .producto__cuerpo { flex-direction: column; align-items: stretch; }
  .producto form .boton-circulo { width: 100%; border-radius: 12px; }
}
.ficha__foto .sin-foto { display: grid; place-items: center; align-content: center; gap: 8px; aspect-ratio: 1; background: var(--papel-2); color: var(--c-magenta); }
.ficha__foto .sin-foto svg { width: 30%; aspect-ratio: 1; height: auto; }
.ficha__foto .sin-foto p { color: var(--tinta-suave); margin: 0; }

.politica { max-width: 72ch; }
.politica h2 { font-size: var(--t-xl); margin: 28px 0 10px; }
.politica h3 { font-family: var(--f-texto); font-weight: 700; font-size: var(--t-lg); margin: 20px 0 8px; }
.politica li { margin-bottom: 6px; }
.volver { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 440px) { .boton--pildora { display: none; } }

/* ── Ventas: meta de envío (upsell), cupón, sugerencias (cross-sell), aviso de salida ── */
.meta-envio { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 12px; padding: 12px 16px; margin: 16px 0; max-width: 520px; }
.meta-envio p { margin: 0 0 8px; }
.meta-envio__barra { height: 12px; border-radius: 6px; background: var(--papel-2); overflow: hidden; }
.meta-envio__barra span { display: block; height: 100%; background: var(--c-magenta); border-radius: 6px; }
.cupon { margin-top: 24px; }
.cupon p { flex-basis: 100%; margin: 0; }
.sugerencias { margin-top: 48px; }
.sugerencias h2 { font-family: var(--f-rotulo); text-transform: uppercase; font-size: var(--t-2xl); margin-bottom: 16px; }
.sugerencias h2 small { font-family: var(--f-texto); text-transform: none; font-size: var(--t-sm); }
.salida { border: var(--borde); border-radius: var(--r-tarjeta); padding: 0; max-width: min(440px, calc(100vw - 32px)); background: var(--c-magenta); color: var(--blanco); box-shadow: 8px 10px 0 var(--tinta); }
.salida::backdrop { background: rgb(16 24 31 / .55); }
.salida__cuerpo { position: relative; padding: 36px 28px 28px; }
.salida h2 { font-family: var(--f-rotulo); text-transform: uppercase; font-size: var(--t-3xl); line-height: .9; margin-bottom: 12px; -webkit-text-stroke: .02em currentColor; }
.salida__codigo { display: inline-block; background: var(--blanco); color: var(--tinta); border: 2px dashed var(--tinta); border-radius: 10px; padding: 8px 16px; font: 700 var(--t-xl) var(--f-texto); letter-spacing: .08em; margin: 4px 0 12px; }
.salida small { display: block; opacity: .92; margin: 8px 0 16px; }
.salida .boton { background: var(--blanco); color: var(--tinta); }
.salida__cerrar { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--blanco); font-size: 28px; line-height: 1; cursor: pointer; }
.salida__cerrar:hover { background: rgb(255 255 255 / .15); }
.salida .destello { position: absolute; left: -16px; top: -16px; width: 44px; color: var(--c-oro); }
.ancho-0 { width: 0%; }
.ancho-5 { width: 5%; }
.ancho-10 { width: 10%; }
.ancho-15 { width: 15%; }
.ancho-20 { width: 20%; }
.ancho-25 { width: 25%; }
.ancho-30 { width: 30%; }
.ancho-35 { width: 35%; }
.ancho-40 { width: 40%; }
.ancho-45 { width: 45%; }
.ancho-50 { width: 50%; }
.ancho-55 { width: 55%; }
.ancho-60 { width: 60%; }
.ancho-65 { width: 65%; }
.ancho-70 { width: 70%; }
.ancho-75 { width: 75%; }
.ancho-80 { width: 80%; }
.ancho-85 { width: 85%; }
.ancho-90 { width: 90%; }
.ancho-95 { width: 95%; }
.ancho-100 { width: 100%; }

/* ── Ficha del pin v2 ─────────────────────────────────────── */
.migas { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-sm); padding-top: 20px; color: var(--tinta-suave); }
.migas a { color: var(--tinta); }
.ficha2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding: 20px 0 32px; align-items: start; }
.ficha2__foto { position: relative; background: var(--blanco); border: 7px solid var(--blanco); border-radius: 6px; box-shadow: 6px 8px 0 rgb(16 24 31 / .14); transform: rotate(-1.5deg); }
.ficha2__foto img, .ficha2__foto .sin-foto { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--blanco); }
.ficha2__foto .sin-foto { display: grid; place-items: center; align-content: center; color: var(--c-magenta); background: var(--papel-2); }
.ficha2__foto .sin-foto svg { width: 30%; aspect-ratio: 1; height: auto; }
.ficha2__foto .etiqueta { top: 12px; left: 12px; }
.ficha2__estrella { position: absolute; right: -18px; top: -18px; width: 52px; aspect-ratio: 1; color: var(--c-oro); transform: rotate(12deg); }
.ficha2__serie { margin-top: 28px; }
.ficha2__serie h2 { font-family: var(--f-texto); font-size: var(--t-md); font-weight: 700; margin-bottom: 10px; }
.ficha2__serie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ficha2__serie a { display: block; border: 2px solid var(--tinta); border-radius: 10px; overflow: hidden; background: var(--blanco); }
.ficha2__serie a:hover { box-shadow: var(--sombra-dura); }
.ficha2__serie img { width: 72px; height: 72px; object-fit: contain; }
.ficha2__titulo { font-family: var(--f-rotulo); text-transform: uppercase; font-size: var(--t-3xl); line-height: .95; -webkit-text-stroke: .02em currentColor; margin-bottom: 10px; }
.ficha2__precio { font-size: var(--t-2xl); font-weight: 700; margin: 0 0 4px; }
.ficha2__mayoreo { font-size: var(--t-sm); color: var(--tinta-suave); max-width: 46ch; }
.ficha2__claves { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.ficha2__claves li { display: flex; gap: 10px; align-items: flex-start; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 14px; }
.ficha2__claves .ico { margin-top: 2px; color: var(--c-magenta); }
.ficha2__falta { background: var(--td-menta-suave) !important; }
.ficha2__agregar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 10px; }
.ficha2__agregar label { font-size: var(--t-sm); }
.ficha2__agregar input { width: 84px; }
.ficha2__agregar .boton { flex: 1; min-width: 200px; min-height: 52px; font-size: var(--t-lg); }
.ficha2__ayuda a, .ficha2__compartir a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.ficha2__acordeon { margin: 12px 0 16px; border-top: 2px solid var(--tinta); }
.ficha2__acordeon details { border-bottom: 2px solid var(--tinta); }
.ficha2__acordeon ul, .ficha2__acordeon p { margin: 0 0 14px; padding-left: 18px; }
.ficha2__acordeon p { padding-left: 0; }
.ficha2__confianza { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--t-sm); color: var(--tinta-suave); }
.ficha2__confianza li { display: flex; align-items: center; gap: 6px; }
.ficha2__confianza .ico { width: 16px; height: 16px; color: var(--c-magenta); }
.barra-fija { display: none; }
@media (max-width: 720px) {
  .ficha2 { grid-template-columns: 1fr; }
  .ficha2__foto { transform: none; }
  .barra-fija { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 2px solid var(--tinta); }
  .barra-fija p { margin: 0; font-size: var(--t-sm); line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .barra-fija .boton { min-height: 48px; }
}

/* ── Carrito v3 (auditoría UX/TDA) ── */
.lineas-carrito { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.lineas-carrito li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--blanco); border: var(--borde); border-radius: var(--r-tarjeta); padding: 10px 12px; }
.lineas-carrito img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--papel-2); }
.lineas-carrito p { margin: 0; }
.lineas-carrito .cantidad { flex-wrap: wrap; }
.etiqueta--en-linea { position: static; display: inline-block; margin-left: 6px; vertical-align: 2px; }
.paso { margin-top: 28px; }
.paso h2 { font-family: var(--f-texto); font-weight: 700; font-size: var(--t-xl); margin-bottom: 8px; }
.cp label, .cp select, .cp input { max-width: 100%; min-width: 0; }
.cupon-plegable, .factura { margin: 16px 0; max-width: 520px; }
.error-campo { color: #8a1c3c; font-weight: 700; margin: 4px 0 0; }
.datos .check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.datos .check input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--tinta); }
input:not([type]), input[type="text"], input[type="tel"] { min-height: 48px; padding: 10px 14px; border: 2px solid var(--tinta); border-radius: 12px; background: var(--blanco); }
@media (max-width: 720px) {
  .lineas-carrito li { grid-template-columns: auto 1fr; }
  .lineas-carrito .cantidad { grid-column: 1 / -1; }
}

/* ── Ajustes auditoría UX/TDA 2026-10-10 ── */
.boton-agregar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: var(--borde); border-radius: var(--r-pastilla); background: var(--blanco); color: var(--tinta); cursor: pointer; font-size: var(--t-sm); white-space: nowrap; }
.boton-agregar:hover { background: var(--tinta); color: var(--blanco); }
.boton-agregar .ico { width: 16px; height: 16px; }
.aviso-carrito { margin: 0; padding: 10px var(--gutter); background: var(--td-menta-suave); border-bottom: 2px solid var(--tinta); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.aviso-carrito a { font-weight: 700; }
.aviso-carrito .ico { color: var(--c-magenta); }
.ficha2__titulo { text-transform: none; }
.ficha2__total { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0 0 6px; }
@media (max-width: 720px) { html { scroll-padding-bottom: 88px; } }

/* ── Seguimiento (2026-10-11): estado en una frase + pasos con número/✓ (no depende del color) ── */
.rotulo-estado { font-size: var(--t-xl); margin: 8px 0; }
.pasos-pedido { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0; }
.pasos-pedido li { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--tinta); border-radius: 999px; font-weight: 700; }
.pasos-pedido li span[aria-hidden] { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 2px solid currentColor; font-size: .85em; }
.pasos-pedido .hecho { background: var(--c-menta); }
.pasos-pedido .actual { background: var(--c-magenta); color: #fff; }
.pasos-pedido .falta { opacity: .65; font-weight: 400; }
.preguntas { display: grid; gap: 8px; margin-top: 16px; }
.preguntas details { border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 16px; }
.form-seguimiento label { flex: 1 1 100%; max-width: 28rem; }
.form-seguimiento input { width: 100%; }

/* ── Panel (2026-10-11): navegación con búsqueda, bandeja "Hoy", confirmación en dos pasos, tablas que se deslizan ── */
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0 16px; }
.admin-nav > a { font-weight: 700; }
.admin-nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.admin-buscar { display: flex; gap: 8px; flex: 1 1 18rem; }
.admin-buscar input { flex: 1; min-width: 0; }
.bandeja ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.bandeja li { border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 14px; }
.bandeja li.urgente { border-color: var(--c-magenta); border-width: 3px; }
.cuenta { display: inline-grid; place-items: center; min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--tinta); color: var(--papel); font-size: .8em; }
.acciones-fila { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 4px; }
.tabla-scroll { overflow-x: auto; }
.confirmar { display: inline-block; }
.confirmar summary { list-style: none; cursor: pointer; }
.confirmar summary::-webkit-details-marker { display: none; }
.confirmar[open] { display: block; border: 2px dashed var(--tinta); border-radius: 12px; padding: 10px 14px; margin: 8px 0; }
.bitacora { padding-left: 1.2em; }
.bitacora time { font-variant-numeric: tabular-nums; }
.flash--error { background: var(--c-rosa); border-color: #8a1c3c; }
.privado { display: inline-block; }
.privado summary { cursor: pointer; list-style: none; }
.privado summary::-webkit-details-marker { display: none; }
.admin-salir { margin-left: auto; }
.form-entrar { max-width: 22rem; display: grid; gap: 12px; }

/* ── Layout del panel (2026-10-11, design system Tiendita): sobrio, denso, la marca solo en la barra ── */
.barra-panel { background: var(--tinta); color: var(--papel); padding-block: 10px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.barra-panel__fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.barra-panel a { color: var(--papel); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.panel h1 { font-family: var(--f-texto); font-size: var(--t-2xl, 1.75rem); margin-top: 16px; }
.panel h2 { font-family: var(--f-texto); font-size: var(--t-xl); }
.panel .pagina { padding-block: 8px 48px; }
@media (max-width: 640px) {
  .tabla-tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-tarjetas, .tabla-tarjetas tbody { display: block; border: 0; }
  .tabla-tarjetas tr { display: grid; grid-template-columns: 1fr; gap: 4px; border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
  .tabla-tarjetas th:nth-child(n), .tabla-tarjetas td:nth-child(n) { display: block; }   /* gana a la regla vieja que ocultaba la 2.ª columna */
  .tabla-tarjetas td { position: relative; padding: 3px 0 3px 8.5rem; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .tabla-tarjetas td::before { content: attr(data-label); position: absolute; left: 0; top: 3px; width: 8rem; font-weight: 700; font-size: var(--t-sm); }
  .tabla-tarjetas td[data-label="Foto"] { padding-left: 0; }
  .tabla-tarjetas td[data-label="Foto"]::before { content: none; }
  .tabla-tarjetas td form { display: flex; flex-wrap: wrap; gap: 6px; }
  .panel .tabla-scroll { overflow-x: visible; }
}
.lineas--todas th:nth-child(2), .lineas--todas td:nth-child(2) { display: table-cell !important; }   /* el origen del pin SIEMPRE se ve en el pedido */

/* ── Panel: patrones tomados de 21st.dev (task list, activity timeline, stat cards), en tokens de Tiendita ── */
.tarea__fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tarea__cuerpo { min-width: 0; }
.tarea__meta { margin: 2px 0 6px; font-size: var(--t-sm); color: var(--tinta); opacity: .8; }
.insignia { flex: none; font-size: var(--t-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--blanco); white-space: nowrap; }
.insignia--urgente { background: var(--c-magenta); color: #fff; border-color: var(--c-magenta); }
.kpis__titulo { font-size: var(--t-md); margin: 12px 0 6px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 8px; margin: 0; }
.kpis div { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 12px; padding: 8px 12px; }
.kpis dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; }
.kpis dd { margin: 2px 0 0; font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.linea-tiempo { list-style: none; padding: 0 0 0 22px; margin: 8px 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--tinta); opacity: .3; }
.linea-tiempo li { position: relative; padding: 0 0 12px; }
.linea-tiempo li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-menta); border: 2px solid var(--tinta); }
.linea-tiempo li:first-child::before { background: var(--c-magenta); }
.linea-tiempo__cabeza { display: flex; justify-content: space-between; gap: 8px; }
.linea-tiempo time { font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linea-tiempo p { margin: 0; }
.paginas { display: flex; gap: 8px; justify-content: space-between; margin: 12px 0; }
.ayuda-estados { margin: 16px 0; }
.ayuda-estados dt { font-weight: 700; margin-top: 8px; }
.ayuda-estados dd { margin: 0 0 0 0; }
.lineas-compra { list-style: none; padding: 0; display: grid; gap: 8px; }
.lineas-compra li { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--tinta); border-radius: 12px; padding: 8px 12px; background: var(--blanco); }
.lineas-compra img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; flex: none; }
.pasos-compra { padding-left: 1.2em; }

/* ── Estrellas (opiniones, 2026-10-11) ── */
.estrellas { position: relative; display: inline-block; line-height: 1; font-size: 1.05em; letter-spacing: 1px; vertical-align: -1px; }
.estrellas__fondo { color: var(--tinta); opacity: .2; }
.estrellas__lleno { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--c-oro, #e8b100); width: 0; }
.estrellas__lleno.e0 { width: 0%; }
.estrellas__lleno.e1 { width: 10%; }
.estrellas__lleno.e2 { width: 20%; }
.estrellas__lleno.e3 { width: 30%; }
.estrellas__lleno.e4 { width: 40%; }
.estrellas__lleno.e5 { width: 50%; }
.estrellas__lleno.e6 { width: 60%; }
.estrellas__lleno.e7 { width: 70%; }
.estrellas__lleno.e8 { width: 80%; }
.estrellas__lleno.e9 { width: 90%; }
.estrellas__lleno.e10 { width: 100%; }
.opinion-resumen { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: var(--t-sm); }
.opiniones { list-style: none; padding: 0; display: grid; gap: 12px; }
.opiniones li { border-bottom: 1px solid var(--papel-2); padding-bottom: 10px; }
.opiniones .verificada { font-size: var(--t-xs); font-weight: 700; color: var(--tinta); }
.dist { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; max-width: 22rem; font-size: var(--t-sm); }
.dist meter { width: 100%; height: 10px; }
/* Selector de estrellas sin JS: radios al revés y :checked ~ label pinta las anteriores */
.calificar { border: 0; padding: 0; margin: 0; }
.calificar__estrellas { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.calificar__estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calificar__estrellas label { font-size: 2rem; cursor: pointer; color: var(--tinta); opacity: .25; transition: transform .15s ease, opacity .15s ease; }
.calificar__estrellas input:checked ~ label, .calificar__estrellas label:hover, .calificar__estrellas label:hover ~ label { opacity: 1; color: var(--c-oro, #e8b100); }
.calificar__estrellas input:focus-visible + label { outline: 3px solid var(--c-magenta); outline-offset: 2px; border-radius: 4px; }
.calificar__estrellas label:active { transform: scale(1.2); }
.producto .estrellas { font-size: .85em; }

/* ── Filtros del catálogo (2026-10-11): ícono junto al buscador → hoja con entrada escalonada (patrón Smooth Drawer de 21st.dev) ── */
.buscar { position: relative; }
.filtros { position: static; }
.filtros > summary { list-style: none; position: relative; }
.filtros > summary::-webkit-details-marker { display: none; }
.filtros[open] > summary { background: var(--c-magenta); color: #fff; border-color: var(--c-magenta); }
.filtros__cuenta { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--c-menta); color: var(--tinta);
  border: 2px solid var(--tinta); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.filtros__hoja { position: absolute; z-index: 30; right: 0; top: calc(100% + 10px); width: min(560px, 92vw); background: var(--blanco); border: var(--borde);
  border-radius: 20px; box-shadow: 0 18px 50px rgba(16, 24, 31, .22); padding: 16px 18px 18px; display: grid; gap: 14px;
  transform-origin: top right; animation: filtros-entra .42s cubic-bezier(.34, 1.56, .64, 1) both; }
.filtros__asa { display: none; width: 44px; height: 5px; border-radius: 99px; background: var(--tinta); opacity: .25; margin: 0 auto 2px; }
.filtros__grupo { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filtros__grupo legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.filtros__hoja > * { animation: filtros-item .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.filtros__hoja > *:nth-child(2) { animation-delay: .04s; } .filtros__hoja > *:nth-child(3) { animation-delay: .08s; }
.filtros__hoja > *:nth-child(4) { animation-delay: .12s; } .filtros__hoja > *:nth-child(5) { animation-delay: .16s; }
.filtros__hoja > *:nth-child(6) { animation-delay: .20s; } .filtros__hoja > *:nth-child(7) { animation-delay: .24s; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-block; padding: 7px 14px; border: 2px solid var(--tinta); border-radius: 999px; font-size: var(--t-sm); cursor: pointer;
  background: var(--blanco); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s; user-select: none; }
.chip-check span:hover { transform: translateY(-2px); }
.chip-check input:checked + span { background: var(--c-magenta); color: #fff; border-color: var(--c-magenta); transform: scale(1.06); }
.chip-check input:focus-visible + span, .interruptor input:focus-visible + span { outline: 3px solid var(--c-menta); outline-offset: 2px; }
.interruptor { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: var(--t-sm); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor span::before { content: ""; flex: none; display: inline-block; width: 40px; height: 22px; border-radius: 99px; border: 2px solid var(--tinta);
  background: var(--papel); vertical-align: middle; margin-right: 10px; transition: background .2s; box-shadow: inset -18px 0 0 2px var(--blanco); }
.interruptor input:checked + span::before { background: var(--c-menta); box-shadow: inset 18px 0 0 2px var(--blanco); }
.filtros__acciones { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.filtros__ver { position: relative; overflow: hidden; }
.filtros__ver::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); animation: brillo 2.4s ease-in-out 0.6s infinite; }
[data-cuenta].pulso { display: inline-block; animation: pulso .35s cubic-bezier(.34, 1.56, .64, 1); }
.filtros-activos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.chip-quitar { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--c-menta-suave, #bcf3e2);
  border: 2px solid var(--tinta); text-decoration: none; color: var(--tinta); font-size: var(--t-sm); }
@keyframes filtros-entra { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes filtros-item { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes brillo { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes pulso { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 640px) {
  /* En celular: hoja que sube desde abajo, con asa y fondo oscurecido */
  .filtros[open]::before { content: ""; position: fixed; inset: 0; background: rgba(16, 24, 31, .45); z-index: 29; animation: filtros-fondo .3s ease both; }
  .filtros__hoja { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh; overflow-y: auto; border-radius: 22px 22px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); animation-name: filtros-sube; transform-origin: bottom center; }
  .filtros__asa { display: block; }
  .filtros__acciones { position: sticky; bottom: 0; background: var(--blanco); padding-top: 8px; }
  @keyframes filtros-sube { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes filtros-fondo { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .filtros__hoja, .filtros__hoja > *, .filtros__ver::after, [data-cuenta].pulso { animation: none !important; }
}
.filtros__precio label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); }
.filtros__precio input { width: 6.5rem; padding: 6px 10px; border: 2px solid var(--tinta); border-radius: 999px; }
.filtros__atajos { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
/* Precio grande y fácil de leer en las tarjetas (Dario 2026-10-11) */
.producto .precio { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.producto .precio small { display: block; font-size: .55em; font-weight: 600; letter-spacing: 0; opacity: .8; margin-top: 2px; }

/* ── Paginador del catálogo (2026-10-11): teclado primero ── */
.paginador { margin: 28px 0 8px; display: grid; justify-items: center; gap: 10px; }
.paginador__info { margin: 0; font-size: var(--t-sm); }
.paginador ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.paginador a, .paginador__paso, .paginador__hueco { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--tinta); }
.paginador a { border: 2px solid var(--tinta); background: var(--blanco); transition: transform .15s ease; }
.paginador a:hover { transform: translateY(-2px); }
.paginador a[aria-current="page"] { background: var(--c-magenta); border-color: var(--c-magenta); color: #fff; }
.paginador a:focus-visible, #resultados:focus-visible { outline: 3px solid var(--c-menta); outline-offset: 3px; }
.paginador [aria-disabled="true"] { opacity: .4; border: 2px dashed var(--tinta); cursor: not-allowed; }
#resultados:focus { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { .paginador a { transition: none; } }

/* ── Banner "Arma tu pack" (2026-10-11): foto del stand + degradado para leer; grande → barra; destello en el borde ── */
@property --pack-x { syntax: '<percentage>'; inherits: false; initial-value: -30%; }
.pack { position: relative; overflow: hidden; color: var(--papel); background: var(--tinta); isolation: isolate;
  min-height: 44px; display: flex; align-items: center; }
.pack::before { /* foto del stand, solo visible en el banner grande */
  content: ""; position: absolute; inset: 0; z-index: -2; background: url("fotos/banner-pack.webp") right 35% / cover no-repeat; opacity: 0;
  transition: opacity .6s ease; }
.pack::after { /* Border Beam: un destello magenta→menta→oro que recorre el borde inferior */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, transparent 0, var(--c-magenta) calc(var(--pack-x) - 12%), var(--c-menta) var(--pack-x), var(--c-oro) calc(var(--pack-x) + 10%), transparent calc(var(--pack-x) + 22%)) no-repeat,
              linear-gradient(90deg, rgb(199 41 174 / .35), rgb(0 233 194 / .35));
  animation: pack-rayo 4.5s linear infinite; }
.pack__texto { width: 100%; max-width: var(--ancho, 1180px); margin: 0 auto; padding: 8px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.pack__titulo { margin: 0; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.pack__titulo svg { width: 1em; height: 1em; color: var(--c-menta); }
.pack__detalle { margin: 0; font-size: var(--t-sm); }
.pack__detalle strong { color: var(--c-menta); }
.pack__boton { display: none; }
/* Grande (primera página de la visita): foto + degradado a la izquierda para leer, y se colapsa sola a los 5 s */
.pack--grande { animation: pack-colapsa .7s cubic-bezier(.65, 0, .35, 1) 5s both; }
.pack--grande::before { opacity: 1; animation: pack-foto .7s ease 5s both; }
.pack--grande .pack__texto { background: linear-gradient(90deg, rgb(16 24 31 / .92) 0, rgb(16 24 31 / .78) 45%, rgb(16 24 31 / 0) 80%);
  max-width: none; padding-block: 22px; padding-inline: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter))); flex-direction: column; align-items: flex-start; gap: 6px;
  animation: pack-texto .7s cubic-bezier(.65, 0, .35, 1) 5s both; }
.pack--grande .pack__titulo { font-family: var(--f-rotulo); text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: .95; }
.pack--grande .pack__detalle { font-size: var(--t-md); max-width: 34rem; }
.pack--grande .pack__boton { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 16px; border-radius: 999px; background: var(--c-magenta);
  color: #fff; font-weight: 700; text-decoration: none; animation: pack-boton .3s ease 5s both; }
.pack__boton:focus-visible { outline: 3px solid var(--c-menta); outline-offset: 3px; }
@keyframes pack-rayo { to { --pack-x: 130%; } }
@keyframes pack-colapsa { from { min-height: 170px; } to { min-height: 44px; } }
@keyframes pack-foto { to { opacity: 0; } }
@keyframes pack-texto { to { padding-block: 8px; flex-direction: row; background-color: transparent; } }
@keyframes pack-boton { to { opacity: 0; visibility: hidden; position: absolute; } }
/* al colapsar, título y detalle regresan al tamaño de la barra (una línea en escritorio) */
.pack--grande .pack__titulo { animation: pack-titulo .7s cubic-bezier(.65, 0, .35, 1) 5s both; }
.pack--grande .pack__detalle { animation: pack-detalle .7s cubic-bezier(.65, 0, .35, 1) 5s both; }
@keyframes pack-titulo { to { font-size: var(--t-md); } }
@keyframes pack-detalle { to { font-size: var(--t-sm); max-width: 60rem; } }
.pack--grande { min-height: 170px; }
@media (max-width: 640px) {
  .pack--grande { min-height: 210px; }
  .pack--grande .pack__texto { background: linear-gradient(90deg, rgb(16 24 31 / .9) 0, rgb(16 24 31 / .82) 70%, rgb(16 24 31 / .55) 100%); }
  @keyframes pack-colapsa { from { min-height: 210px; } to { min-height: 44px; } }
}
@media (prefers-reduced-motion: reduce) {
  .pack::after { animation: none; }
  .pack--grande, .pack--grande::before, .pack--grande .pack__texto, .pack--grande .pack__boton, .pack--grande .pack__titulo, .pack--grande .pack__detalle { animation: none; }
  .pack--grande .pack__titulo { font-family: inherit; text-transform: none; font-size: var(--t-md); }
  .pack--grande .pack__detalle { font-size: var(--t-sm); max-width: none; }
  .pack--grande { min-height: 44px; }
  .pack--grande::before, .pack--grande .pack__boton { display: none; }
  .pack--grande .pack__texto { background: none; flex-direction: row; padding-block: 8px; }
}

/* 2026-10-12 (captura de Dario): en tarjetas angostas «Agregar» tapaba el precio ($50.). Si no caben juntos, el botón baja. */
.producto__cuerpo { flex-wrap: wrap; }
.producto__datos { flex: 1 1 6.5em; }
.producto .precio { white-space: nowrap; }

/* Packs (2026-10-12). Clases propias: .pack ya es el banner «Arma tu pack». */
.ofertas-pack { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.oferta-pack { display: block; background: var(--blanco); color: var(--tinta); border: var(--borde); border-radius: 16px; padding: 18px; }
.oferta-pack__titulo { margin: 0 0 6px; font-size: var(--t-lg); color: var(--tinta); }
.oferta-pack__precio { margin: 0 0 8px; font-size: var(--t-2xl); font-weight: 800; color: var(--tinta); }
.oferta-pack__precio small { display: block; font-size: var(--t-sm); font-weight: 400; color: var(--tinta-suave); }

/* Plegable (2026-10-23): UN solo estilo para todo lo que se abre y se cierra (ficha, carrito, preguntas). Chevron a la
   derecha que gira: NN/g (Accordion icons) encontró que solo el chevron comunica «se despliega aquí»; el «+» no. Todo el
   renglón es tocable (48 px). Antes había 4 estilos y «¿Tienes cupón?» no tenía ícono (display:flex borra el triángulo). */
.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::after { content: ''; flex: none; width: 9px; height: 9px; margin: 0 6px 4px auto; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.plegable[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.plegable > summary:hover { color: var(--c-magenta); }
.plegable > summary:focus-visible { outline: 3px solid var(--c-magenta); outline-offset: 2px; border-radius: 6px; }

/* ¿Por dónde seguimos? (404, carrito vacío, sin resultados; 2026-10-23) */
.seguir { max-width: 760px; margin: 8px auto 40px; }
.seguir h2 { font-family: var(--f-rotulo); margin: 0 0 12px; }
.seguir__buscar { display: flex; gap: 8px; margin: 0 0 16px; }
.seguir__buscar input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: var(--borde); border-radius: var(--r-pastilla); font: inherit; background: var(--blanco); }
.seguir__temas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.seguir__temas a { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border: var(--borde); border-radius: 14px; background: var(--blanco); text-decoration: none; color: inherit; min-height: 48px; }
.seguir__temas a:hover { box-shadow: var(--sombra-dura); }
.seguir__temas img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--papel-2); flex: none; }
.seguir__temas span { display: flex; flex-direction: column; font-weight: 700; }
.seguir__temas small { font-weight: 400; color: var(--tinta-suave); }

/* Antes de pagar (2026-10-23): renglones compactos, nada de rejilla grande ni ventana. */
.antes-de-pagar { margin: 20px 0; padding: 14px 16px; border: 2px dashed var(--tinta); border-radius: 14px; max-width: 640px; }
.antes-de-pagar h2 { font-size: var(--t-lg); margin: 0 0 2px; }
.antes-de-pagar > .pista { margin: 0 0 10px; }
.antes-de-pagar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.antes-de-pagar li { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "foto nombre boton" "foto precio boton"; align-items: center; column-gap: 12px; }
.antes-de-pagar img { grid-area: foto; width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--papel-2); }
.antes-de-pagar a { grid-area: nombre; color: inherit; font-weight: 700; line-height: 1.25; }
.antes-de-pagar strong { grid-area: precio; font-weight: 400; }
.antes-de-pagar form { grid-area: boton; margin: 0; }
.antes-de-pagar .boton { min-height: 44px; padding: 0 14px; }
/* «¿Cómo lo recibes?»: el radio al lado de su texto (en escritorio salía arriba, 2026-10-23). */
.entrega .check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.entrega .check input { flex: none; margin-top: 4px; }

/* Carrito: −/+ (auditoría UX D2, 2026-10-23; EDGA §81: botones ≥44 px, − izquierda / + derecha, deshabilitado pero visible en el límite) */
.paso-cantidad { display: inline-flex; align-items: center; gap: 4px; }
.paso-cantidad__boton { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.25rem; line-height: 1; }
.paso-cantidad__boton:disabled { opacity: .4; cursor: not-allowed; }
.paso-cantidad input { width: 60px; text-align: center; }
.aviso-salida { margin: 8px 0 0; font-size: var(--t-sm); }

/* ── Panel 2026-10-23 (auditoría UI del panel: Nielsen/Krug §19, rutas rojas §88, estados §68 de EDGA; GOV.UK tag) ── */
/* Campos que se habían quedado sin estilo: la clave del login y la búsqueda del panel (defecto visto en captura). */
input[type="password"], input[type="search"] { min-height: 48px; padding: 10px 14px; border: 2px solid var(--tinta); border-radius: 12px; background: var(--blanco); }
.clave-campo { display: flex; gap: 8px; }
.clave-campo input { flex: 1; min-width: 0; }
.form-entrar { max-width: 26rem; }
/* Navegación: la sección actual se ve como pastilla, no solo subrayada. */
.admin-nav > a { padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.admin-nav > a:hover { background: var(--blanco); }
.admin-nav > a[aria-current="page"] { background: var(--tinta); color: var(--blanco); text-decoration: none; }
/* Estado del pedido: texto siempre + borde; el fondo solo refuerza. Texto tinta sobre fondos claros (≥ 4.5:1). */
.estado { display: inline-block; font-size: var(--t-xs); font-weight: 700; line-height: 1.3; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--blanco); color: var(--tinta); white-space: nowrap; vertical-align: middle; font-family: var(--f-texto); }
.estado--alerta { background: var(--td-rosa); border-color: #8a1c3c; }
.estado--accion { background: var(--td-oro); }
.estado--proceso { background: #d6ebfa; }
.estado--listo { background: var(--td-menta-suave); }
.estado--apagado { background: transparent; color: var(--tinta-suave); border-style: dashed; }
.titulo-pedido { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.titulo-pedido .estado { font-size: var(--t-sm); }
/* Hoy: resumen con saltos a cada bandeja. */
.resumen-hoy { background: var(--blanco); border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; }
.resumen-hoy__titulo { margin: 0 0 6px; }
.resumen-hoy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.resumen-hoy__salto { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--tinta); text-decoration: none; font-size: var(--t-sm); }
.resumen-hoy__salto--urgente { border-color: var(--c-magenta); border-width: 3px; font-weight: 700; }
.panel .bandeja h2, .panel section > h2 { scroll-margin-top: 72px; }
.ajustes { margin-top: 32px; padding-top: 8px; border-top: 2px dashed var(--tinta); }
.panel .chips { padding-bottom: 12px; }

/* Carrito en 2 columnas (2026-10-23, Dario: «seguir siempre al final»). Celular: una columna y el resumen con su botón al
   final. Escritorio: el resumen a la derecha con el botón principal en su pie, debajo del total. */
.carrito-rejilla { display: grid; gap: 24px; }
.carrito-principal { min-width: 0; }
.carrito-resumen { background: var(--blanco); border: var(--borde); border-radius: var(--r-tarjeta); padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.carrito-resumen > h2 { font-family: var(--f-texto); font-weight: 700; font-size: var(--t-xl); margin: 0; }
.carrito-resumen .totales { border: 0; padding: 0; max-width: none; background: none; }
.carrito-resumen .meta-envio { margin: 0; max-width: none; }
.carrito-resumen .pista, .carrito-resumen .errores { margin: 0; }
.carrito-resumen__cuerpo, .carrito-resumen__accion { display: grid; gap: 12px; }
.cp--vertical { flex-direction: column; align-items: stretch; max-width: 520px; }
.cp--vertical input[name="cp"] { max-width: 10rem; }
@media (min-width: 960px) {
  .carrito-rejilla { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  /* Fijo al bajar con el botón SIEMPRE visible abajo (patrón VTEX: la acción en el pie del resumen); si el detalle no
     cabe, se desplaza dentro. Así, al terminar el paso 2 a la izquierda, «Pagar» está a la vista sin regresar. */
  .carrito-resumen { position: sticky; top: 108px; max-height: calc(100vh - 124px); grid-template-rows: auto minmax(0, 1fr) auto; }
  .carrito-resumen__cuerpo { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
}
/* Resumen recién recalculado al escribir el CP: un destello breve que dice «esto cambió» (sin movimiento si se pidió). */
.carrito-resumen__cuerpo[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
.carrito-resumen__cuerpo.recien { animation: recien 1.2s ease-out; }
@keyframes recien { from { background: var(--td-menta-suave); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .carrito-resumen__cuerpo.recien { animation: none; } }
.resumen-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 10px; border-top: 2px solid var(--tinta); font-size: var(--t-lg); font-weight: 700; }
.resumen-total strong { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.totales dd { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ══ Controles v2 (2026-10-23, Dario: «mejora inputs, botones, checkboxes, forms; shadcn o Vengeance UI») ══════════════
   De shadcn/ui: cada control decide sus estados (EDGA §68: reposo, hover, foco, error, deshabilitado, marcado), un solo
   alto (48 px) y un solo anillo de foco; «campo con botón» (InputGroup). De Vengeance UI (Corner Button, MIT,
   Ashutoshx7): esquinas que aparecen al pasar, SOLO en el botón principal de la pantalla. Todo con los tokens de la marca
   (tinta, magenta, sombra dura sin desenfoque, radio 12 px). Este bloque reemplaza las reglas sueltas de arriba. */
:root {
  --campo-alto: 48px;
  --campo-radio: 12px;
  --anillo: 0 0 0 4px rgb(199 41 174 / .28);          /* magenta translúcido: se ve sobre lavanda y sobre blanco */
  --anillo-error: 0 0 0 4px rgb(138 28 60 / .22);
  --c-error: #8a1c3c;
}
/* Campos de texto, número, select y textarea: un solo estilo. */
input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"],
input[type="search"], select, textarea {
  min-height: var(--campo-alto); padding: 10px 14px; border: 2px solid var(--tinta); border-radius: var(--campo-radio);
  background: var(--blanco); color: var(--tinta); font: inherit; line-height: 1.3;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
textarea { min-height: 96px; resize: vertical; }
::placeholder { color: var(--tinta-suave); opacity: .8; }
:is(input, select, textarea):hover:not(:disabled):not(:focus) { box-shadow: 3px 3px 0 var(--tinta); }
:is(input, select, textarea):focus-visible { outline: none; border-color: var(--tinta); box-shadow: var(--anillo); }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--c-error); background: #fff7fa; }
:is(input, select, textarea)[aria-invalid="true"]:focus-visible { box-shadow: var(--anillo-error); }
:is(input, select, textarea, button):disabled { opacity: .5; cursor: not-allowed; }
:is(input, select, textarea):disabled { background: var(--papel-2, #e4dde8); box-shadow: none; }
/* Select con flecha propia (la del sistema cambia en cada teléfono). */
select { appearance: none; -webkit-appearance: none; padding-right: 42px;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2310181f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center; }
/* Casillas y radios propios (22 px; zona táctil = toda la etiqueta). */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0;
  border: 2px solid var(--tinta); background: var(--blanco); display: inline-grid; place-content: center; cursor: pointer;
  transition: background-color .12s ease, box-shadow .15s ease, transform .12s ease;
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform .12s ease;
  background: var(--blanco); clip-path: polygon(14% 52%, 0 66%, 40% 100%, 100% 22%, 86% 8%, 38% 72%); }
input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); transition: transform .12s ease; background: var(--blanco); }
input:is([type="checkbox"], [type="radio"]):checked { background: var(--c-magenta); border-color: var(--c-magenta); }
input:is([type="checkbox"], [type="radio"]):checked::before { transform: scale(1); }
input:is([type="checkbox"], [type="radio"]):hover:not(:disabled) { box-shadow: 2px 2px 0 var(--tinta); }
input:is([type="checkbox"], [type="radio"]):active:not(:disabled) { transform: scale(.92); }
input:is([type="checkbox"], [type="radio"]):focus-visible { outline: none; box-shadow: var(--anillo); }
input:is([type="checkbox"], [type="radio"])[aria-invalid="true"], .datos .check input:user-invalid { border-color: var(--c-error); box-shadow: var(--anillo-error); }
label.check { cursor: pointer; display: flex; align-items: flex-start; gap: 10px; }
label.check:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Grupo de opciones (¿Cómo lo recibes?): cada opción es una tarjeta; la elegida se marca con borde magenta. */
fieldset.entrega { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
fieldset.entrega legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
fieldset.entrega .check { padding: 12px 14px; border: 2px solid var(--tinta); border-radius: var(--campo-radio); background: var(--blanco); }
fieldset.entrega .check:has(input:checked) { border-color: var(--c-magenta); box-shadow: 3px 3px 0 var(--c-magenta); }
/* Etiquetas de campo y ayudas, como shadcn: etiqueta en negrita chica, ayuda debajo en tono suave. */
.datos > label:not(.check), .cp > label:not(.check) { font-weight: 700; font-size: var(--t-sm); }   /* las casillas no: su texto es una frase */
.datos > label > :is(input, select, textarea), .cp > label > :is(input, select, textarea) { font-weight: 400; font-size: var(--t-md); }
.error-campo { color: var(--c-error); font-weight: 700; font-size: var(--t-sm); margin: 4px 0 0; }
/* Botones: mismos estados en todos (hover sube con sombra dura, clic baja, foco con anillo, deshabilitado). */
.boton { font-weight: 700; letter-spacing: .01em; }
.boton:focus-visible, .boton-circulo:focus-visible { outline: none; box-shadow: var(--anillo); }
.boton:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
.boton:disabled, .boton[aria-disabled="true"] { transform: none; box-shadow: none; }
.boton--linea { background: var(--blanco); }
/* Botón principal con esquinas (patrón Corner Button): 4 esquinas en L, magenta, que se abren al pasar o enfocar.
   Una sola pieza por pantalla (.boton--grande = «Seguir» / «Pagar»). Sin movimiento si se pidió menos movimiento. */
.boton--magenta.boton--grande { position: relative; isolation: isolate; overflow: visible; }
.boton--magenta.boton--grande::after {
  content: ""; position: absolute; inset: -9px; pointer-events: none; z-index: -1;   /* sin radio: recortaría las esquinas */
  --l: 16px; --g: 3px; --c: var(--c-magenta);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--g), linear-gradient(var(--c), var(--c)) top left / var(--g) var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--g), linear-gradient(var(--c), var(--c)) top right / var(--g) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--g), linear-gradient(var(--c), var(--c)) bottom left / var(--g) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--g), linear-gradient(var(--c), var(--c)) bottom right / var(--g) var(--l);
  background-repeat: no-repeat; opacity: 0; transform: scale(.94); transition: opacity .2s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.boton--magenta.boton--grande:is(:hover, :focus-visible)::after { opacity: 1; transform: scale(1); }
.boton--magenta.boton--grande:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tinta); }
/* Campo con botón pegado (shadcn InputGroup): código postal + «Actualizar». */
.campo-con-boton { display: flex; align-items: stretch; max-width: 22rem; }
.campo-con-boton > input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.campo-con-boton > .boton { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -2px; min-height: var(--campo-alto); padding: 0 16px; gap: 8px; }
.campo-con-boton > .boton:hover { transform: none; box-shadow: none; background: var(--tinta); color: var(--blanco); }
.campo-con-boton > .boton .ico { width: 18px; height: 18px; }
.campo-con-boton > .boton.girando .ico { animation: girar .6s linear infinite; }
.campo-con-boton > .boton--atencion { background: var(--c-magenta); color: var(--blanco); border-color: var(--c-magenta); }
@keyframes girar { to { transform: rotate(360deg); } }
.estado-cp { min-height: 1.4em; margin: 6px 0 0; font-size: var(--t-sm); color: var(--tinta-suave); }
.estado-cp--atencion { color: var(--c-error); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .boton, .boton--magenta.boton--grande::after, input, select, textarea, input::before { transition: none !important; }
  .campo-con-boton > .boton.girando .ico { animation: none; }
}
/* Logo de WhatsApp a la izquierda de TODO enlace o botón que abre WhatsApp (Dario 2026-10-23: «el mexicano no lee mucho,
   mira más los íconos»). Verde de WhatsApp en texto; dentro de un botón toma el color del botón. */
.ico-wa { width: 1.15em; height: 1.15em; vertical-align: -.2em; color: #1fa855; flex: none; }
.boton .ico-wa, .barra-panel .ico-wa { color: currentColor; }
.ficha2__compartir a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
/* Rastrea tu paquete (2026-10-23): tres caminos en tarjetas, cada una con su ícono grande arriba (íconos antes que texto). */
.titulo-con-ico { display: flex; align-items: center; gap: 12px; }
.ico--titulo { width: 1.1em; height: 1.1em; color: var(--c-magenta); flex: none; }
.rastrear { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 16px 0 32px; }
.rastrear__tarjeta { background: var(--blanco); border: var(--borde); border-radius: var(--r-tarjeta); padding: 20px; display: grid; gap: 10px; align-content: start; }
.rastrear__tarjeta h2 { margin: 0; font-family: var(--f-texto); font-size: var(--t-xl); }
.rastrear__tarjeta p { margin: 0; }
.rastrear__ico { width: 48px; height: 48px; color: var(--c-magenta); }
.rastrear__tarjeta--wa { border-color: #1fa855; box-shadow: 4px 4px 0 #1fa855; }
.rastrear .campo-con-boton { max-width: none; }
.boton--wa { background: #0f7a3f; border-color: #0b5c2f; color: #fff; }   /* blanco sobre este verde: 5.6:1 */
.boton--wa .ico-wa { color: #fff; }
.nav-principal a:has(.ico-wa) { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rastrear { align-items: stretch; }
.rastrear__tarjeta > * { min-width: 0; }
.rastrear .cp { margin: 0; }
.rastrear__ico.ico-wa { color: #1fa855; }
.rastrear > .rastrear__tarjeta { margin: 0; }                           /* una regla global da 28 px a «section + section» */
.rastrear .campo-con-boton > input { width: auto; flex: 1 1 0; }        /* otra regla lo dejaba fijo en 220 px y se salía */
/* Packs con imágenes (2026-10-23): la grande arriba, la de «envío incluido» chica encima en la esquina. */
.oferta-pack__fotos { position: relative; margin: -6px -6px 14px; }
.oferta-pack__fotos img { display: block; width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--tinta); background: var(--papel); }
.oferta-pack__fotos img + img { position: absolute; right: -10px; bottom: 18px; width: 46%; box-shadow: 4px 4px 0 var(--tinta); transform: rotate(3deg); }
.oferta-pack__nota { margin: 6px 0 0; font-size: var(--t-xs); color: var(--tinta-suave); }
.ofertas-pack { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* «Para tus pines» (accesorios, 2026-10-23): chips con ícono y cada grupo con su ícono grande. */
.chips--ico a { display: inline-flex; align-items: center; gap: 8px; }
.chips--ico .ico { width: 20px; height: 20px; }
.acc-grupo { margin: 24px 0 8px; scroll-margin-top: 110px; }
.acc-grupo__ico { width: 36px; height: 36px; color: var(--c-magenta); }
.producto__modelos { display: inline-block; margin-top: 2px; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-suave); }
.pasos-pz { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 24px; }
.pasos-pz li { display: flex; align-items: center; gap: 10px; background: var(--blanco); border: 2px solid var(--tinta); border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.pasos-pz .ico { width: 28px; height: 28px; color: var(--c-magenta); flex: none; }
.pasos-pz .ico-wa { color: #1fa855; }
/* Avisos de Surtido (pin de tienda fuera de Tuxtla, 2026-10-23): con ícono de camión, fondo menta, se leen sin buscarlos. */
.aviso-surtido { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; background: var(--td-menta-suave); border: 2px solid var(--tinta); border-radius: 12px; font-size: var(--t-sm); }
.aviso-surtido .ico { width: 22px; height: 22px; flex: none; color: var(--tinta); }
.etiqueta--en-linea .ico { width: 14px; height: 14px; vertical-align: -2px; }
/* Chica recortada acompañando una pantalla (Mis pedidos y 404, 2026-10-23): mismo recorte tipo sticker que la portada. */
.chica-recorte { filter: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(8px 10px 0 rgb(16 24 31 / .12)); }
.con-chica { display: grid; gap: 24px; align-items: center; margin: 8px 0 24px; }
.con-chica__foto { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.con-chica__foto-caja { position: relative; }
.con-chica__texto h1 { margin-top: 0; }
.globo-ups { position: absolute; top: 4%; right: 6%; font-family: var(--f-rotulo); font-size: clamp(2rem, 6vw, 3.4rem); color: var(--blanco);
  background: var(--c-magenta); border: 4px solid var(--tinta); border-radius: 50% 50% 50% 12px; padding: .2em .55em .1em; box-shadow: 5px 5px 0 var(--tinta); transform: rotate(-8deg); line-height: 1; }
@media (min-width: 760px) {
  .con-chica { grid-template-columns: minmax(220px, 2fr) 3fr; gap: 40px; }
  .con-chica__foto { max-width: 380px; }
}
@media (max-width: 759px) { .con-chica__foto { max-width: 200px; } }
/* Subir la foto del pin personalizado: recuadro grande con ícono (el botón nativo sale en inglés y sin ícono). */
.datos .subir-foto, .subir-foto { position: relative; display: grid; align-items: center; justify-items: center; gap: 8px; padding: 24px 16px; border: 3px dashed var(--tinta); border-radius: var(--r-tarjeta); background: var(--blanco); text-align: center; cursor: pointer; }
.subir-foto:hover, .subir-foto:focus-within { border-color: var(--c-magenta); box-shadow: 4px 4px 0 var(--c-magenta); }
.subir-foto input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.subir-foto > .ico { width: 56px; height: 56px; color: var(--c-magenta); }
.subir-foto__texto { display: grid; gap: 2px; color: var(--tinta-suave); font-weight: 400; }
.subir-foto__texto strong { color: var(--tinta); font-size: var(--t-lg); }
.subir-foto__vista { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 4px solid var(--tinta); box-shadow: 4px 4px 0 var(--tinta); }
.pie__tienda { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.pie__tienda .ico { flex: none; margin-top: 3px; }
/* Mis pedidos: los efectos de la portada alrededor de la chica (2026-10-23). Sin depender de portada.css. */
.cc-visual { position: relative; width: min(100%, 420px); margin: 0 auto; aspect-ratio: 595 / 820; }
.cc-mancha { position: absolute; left: 6%; top: 10%; width: 86%; aspect-ratio: 1; color: var(--c-magenta); transform: rotate(-12deg); z-index: 0; }
.cc-modelo { position: absolute; inset: auto 0 0 0; z-index: 1; max-width: none !important; width: 100% !important; }
.cc-corona { position: absolute; z-index: 2; left: 34%; top: -3%; width: 26%; aspect-ratio: 120 / 80; color: var(--c-oro); transform: rotate(-8deg); }
.cc-rayas { position: absolute; z-index: 2; left: -2%; top: 46%; width: 38px; aspect-ratio: 1; color: var(--tinta); }
.cc-burbuja { position: absolute; z-index: 3; right: -10%; top: 8%; width: 40%; aspect-ratio: 1; transform: rotate(6deg); }
.cc-burbuja svg { width: 100%; height: 100%; color: var(--c-menta); }
.cc-burbuja p { position: absolute; inset: 20% 12%; display: grid; place-items: center; margin: 0; text-align: center; font-size: clamp(.95rem, .6rem + 1vw, 1.35rem); line-height: 1; }
.cc-nota { position: absolute; z-index: 3; left: -6%; top: 4%; font-size: clamp(1rem, .6rem + 1.1vw, 1.5rem); line-height: .95; transform: rotate(-8deg); margin: 0; }
.cc-nota svg { display: block; width: 80px; aspect-ratio: 2; margin: 2px 0 0 40px; transform: rotate(18deg); color: var(--tinta); }
.cc-dibuja { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cc-trazo .7s ease-out .3s forwards; }
.cc-pop { opacity: 0; animation: cc-aparece .35s ease-out .6s forwards; }
@keyframes cc-trazo { to { stroke-dashoffset: 0; } }
@keyframes cc-aparece { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-dibuja { stroke-dashoffset: 0; animation: none; } .cc-pop { opacity: 1; animation: none; } }
@media (max-width: 759px) { .cc-visual { width: min(100%, 280px); } }
/* Letra de plumón (copia de portada.css para las páginas que no cargan portada.css: Mis pedidos, Packs). */
.marcador { font-family: var(--f-rotulo); text-transform: uppercase; line-height: .86; letter-spacing: -.005em; -webkit-text-stroke: .028em currentColor; paint-order: stroke fill; }
/* ajuste visto en captura: mancha más visible, corona sobre la cabeza, nota sin tapar la cara */
.cc-visual { margin-top: 24px; }
.cc-modelo { left: 2%; right: auto; width: 84% !important; }
.cc-mancha { left: 26%; top: 20%; width: 84%; }
.cc-corona { left: 16%; top: -6%; width: 26%; }
.cc-nota { left: auto; right: -8%; top: 64%; transform: rotate(6deg); }
.cc-nota svg { margin: 2px 0 0 -10px; transform: scaleX(-1) rotate(18deg); }
.cc-burbuja { right: -12%; top: 14%; width: 38%; }
.cc-nota svg { margin: 4px 0 0 30px; transform: rotate(8deg); }   /* la flecha apunta al formulario, no a la chica */
/* ── Packs como landing (2026-10-23): héroe tipo portada, barra de datos, pasos con íconos y cierre ── */
.pk-heroe { display: grid; gap: 24px; align-items: center; padding: 16px 0 8px; }
.pk-titulo { font-size: clamp(3rem, 1.4rem + 5vw, 5.8rem); transform: rotate(-4deg); transform-origin: left bottom; margin: 8px 0 22px; }
.pk-titulo span { display: block; }
.pk-titulo span:nth-child(2) { padding-left: .4em; }
.pk-titulo span:nth-child(3) { padding-left: .1em; font-size: .7em; }
.pk-bajada { font-size: var(--t-lg); max-width: 26ch; line-height: 1.35; margin: 0 0 20px; }
.pk-botones { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.pk-heroe__visual { position: relative; min-height: clamp(320px, 42vw, 520px); }
.pk-mancha { position: absolute; left: 8%; top: 4%; width: 80%; aspect-ratio: 1; color: var(--c-magenta); transform: rotate(-12deg); }
.pk-polaroid { position: absolute; left: 6%; top: 14%; width: 82%; height: auto; background: var(--blanco); padding: 12px 12px 40px; border-radius: 6px;
  box-shadow: 8px 10px 0 rgb(16 24 31 / .85); transform: rotate(4deg); }
.pk-burbuja { position: absolute; right: -2%; top: 0; width: 34%; aspect-ratio: 1; transform: rotate(8deg); z-index: 2; }
.pk-burbuja svg { width: 100%; height: 100%; color: var(--c-menta); }
.pk-burbuja p { position: absolute; inset: 22% 14%; display: grid; place-items: center; margin: 0; text-align: center; font-size: clamp(1rem, .6rem + 1.2vw, 1.7rem); }
.pk-corona { position: absolute; left: 2%; top: 6%; width: 18%; aspect-ratio: 120 / 80; color: var(--c-oro); transform: rotate(-14deg); z-index: 2; }
.pk-rayas { position: absolute; left: 0; bottom: 16%; width: 36px; aspect-ratio: 1; color: var(--tinta); z-index: 2; }
.pk-barra ul { list-style: none; margin: 8px 0 28px; padding: 26px clamp(16px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 14px clamp(16px, 4vw, 48px); align-items: center;
  background: var(--tinta); color: var(--papel); border-radius: 6px;
  clip-path: polygon(0 12%, 4% 6%, 9% 12%, 15% 4%, 22% 10%, 30% 2%, 37% 9%, 45% 2%, 52% 8%, 60% 0, 68% 7%, 76% 2%, 84% 9%, 100% 0, 100% 100%, 0 100%); }
.pk-barra li { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); line-height: 1.2; }
.pk-barra li + li { padding-left: clamp(16px, 4vw, 48px); border-left: 1px solid rgb(239 235 241 / .25); }
.pk-barra b { font-size: clamp(2rem, 1.2rem + 1.8vw, 3rem); color: var(--blanco); font-weight: 400; }
.pk-barra .ico { width: 32px; height: 32px; color: var(--c-menta); }
.pk-subtitulo { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); transform: rotate(-2deg); margin: 32px 0 16px; }
.pk-pasos ol { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pk-pasos li { display: grid; gap: 6px; justify-items: start; background: var(--blanco); border: var(--borde); border-radius: var(--r-tarjeta); padding: 18px; box-shadow: 4px 4px 0 var(--tinta); }
.pk-pasos li .ico { width: 44px; height: 44px; color: var(--c-magenta); }
.pk-pasos li b { font-size: var(--t-lg); }
.pk-final { display: grid; justify-items: center; gap: 14px; text-align: center; margin: 40px 0 24px; padding: 32px 16px; background: var(--td-menta-suave); border: var(--borde); border-radius: var(--r-tarjeta); }
.pk-final p { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.8rem); margin: 0; transform: rotate(-2deg); }
.pk-final .boton--grande { width: auto; padding: 0 40px; }
@media (min-width: 860px) { .pk-heroe { grid-template-columns: 1fr 1.1fr; } }
/* ajuste visto en captura (2026-10-23): título más grande, polaroid más chica para que se vea la mancha, globo abajo a la izquierda */
.pk-titulo { font-size: clamp(3.4rem, 1.6rem + 5.6vw, 6.6rem); }
.pk-polaroid { left: 14%; top: 16%; width: 68%; }
.pk-mancha { left: 0; top: 0; width: 92%; }
.pk-burbuja { right: auto; left: -4%; top: auto; bottom: 0; width: 32%; transform: rotate(-8deg); }
.pk-corona { left: 66%; top: 2%; }
h1.pk-titulo, .pagina h1.pk-titulo { font-size: clamp(3.4rem, 1.6rem + 5.6vw, 6.6rem); line-height: .86; }
/* Personalizados como landing (2026-10-23): chica a la izquierda, pasos y formulario a la derecha. */
.pz-landing { align-items: start; }
@media (min-width: 760px) { .pz-landing { grid-template-columns: minmax(260px, 2fr) 3fr; } .pz-visual { position: sticky; top: 110px; } }
h1.pz-titulo, .pagina h1.pz-titulo { font-size: clamp(2.8rem, 1.4rem + 4vw, 5rem); line-height: .86; transform: rotate(-3deg); transform-origin: left bottom; margin: 12px 0 16px; }
.pz-titulo span { display: block; }
.pz-titulo span + span { font-size: .62em; padding-left: .2em; }
.pz-bajada { font-size: var(--t-lg); line-height: 1.35; margin: 0 0 8px; }
.pz-landing .pasos-pz { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.pz-landing .pasos-pz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Pasos en una sola línea horizontal (Dario 2026-10-23): círculo con ícono + número, unidos por una línea; texto corto abajo. */
.pasos-linea { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 20px 0 24px; }
.pasos-linea li { counter-increment: paso; position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.pasos-linea li + li::before { content: ""; position: absolute; top: 28px; right: calc(50% + 32px); width: calc(100% - 64px); border-top: 3px dashed var(--tinta); }
.pasos-linea__circulo { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blanco); border: 3px solid var(--tinta); box-shadow: 3px 3px 0 var(--tinta); }
.pasos-linea__circulo .ico { width: 26px; height: 26px; color: var(--c-magenta); }
.pasos-linea__circulo .ico-wa { color: #1fa855; }
.pasos-linea__circulo::after { content: counter(paso); position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-magenta); color: #fff;
  font-size: 13px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--tinta); }
.pasos-linea__texto { font-weight: 700; font-size: var(--t-sm); line-height: 1.2; max-width: 14ch; }
@media (max-width: 520px) { .pasos-linea__circulo { width: 46px; height: 46px; } .pasos-linea li + li::before { top: 23px; right: calc(50% + 27px); width: calc(100% - 54px); } .pasos-linea__texto { font-size: var(--t-xs); } }
/* Formularios verticales (bug 2026-10-23, Rastrea tu pedido): .cp traía flex-wrap y .form-seguimiento label flex 1 1 100%;
   en columna eso partía el formulario en dos columnas y los campos se salían de la tarjeta. Vertical = una columna, campos al 100 %. */
.cp--vertical { display: grid; gap: 12px; align-items: stretch; justify-items: stretch; }
.cp--vertical > label, .cp--vertical > .campo-con-boton { flex: none; max-width: none; width: 100%; min-width: 0; }
.cp--vertical > label > :is(input, select, textarea), .datos > label > :is(input, select, textarea) { width: 100%; min-width: 0; }
.cp--vertical > .boton { justify-self: start; }
.campo-con-boton { width: 100%; }
.campo-con-boton > input { width: auto; flex: 1 1 0; min-width: 0; }
/* Ningún control más ancho que su contenedor, en ningún tamaño de pantalla. */
:is(input, select, textarea) { max-width: 100%; }
/* Desbordes horizontales (revisión de tamaños 2026-10-23, Chromium sin ventana a 360/390/768/1280):
   · 768 px: «Ver pines» de la cabecera no cabía junto al menú completo (+66 px en TODAS las páginas). «Pines» ya está en el menú.
   · las manchas decorativas se salían de su sección (portada 46 px, personalizados y mis pedidos 10 px). */
@media (max-width: 1099px) { .acciones .boton--pildora { display: none; } }
.con-chica, .pk-heroe { overflow-x: clip; }
/* Mundito de idioma (2026-10-23): ícono + clave del idioma al que lleva. */
.icono-boton.idioma { width: auto; padding: 0 10px; gap: 4px; display: inline-flex; align-items: center; border-radius: 999px; }
.idioma__clave { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; }