/* ═══════════════════════════════════════════════════════════════════
   LA VIDRIERA

   El esqueleto es el de cualquier tienda grande de Argentina, y eso es
   a propósito: nadie tiene que aprender a comprar acá. Buscador arriba
   al medio, filtros a la izquierda, caja de compra a la derecha, y
   abajo lo que compraron los demás.

   La piel, en cambio, sale entera del manual de marca del cliente. En
   este archivo NO hay un solo color escrito: todos son variables que
   pone `tema.py`. Cambiar de cliente es cambiar un JSON.

   Lo que sí se hace distinto que las tiendas grandes: menos cosas por
   pantalla. Ellos tienen que meter mil vendedores en la misma página;
   una marca sola no. Misma estructura, un tercio del ruido.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --primario:#0B0000;
  --primario-tinta:#F2E8D5;
  --acento:#D8A94E;
  --fondo:#F2E8D5;
  --superficie:#FAF6EF;
  --tinta:#171317;
  --suave:#6B6259;
  --linea:#DED2BB;
  --precio:#0B0000;
  --ok:#3E6B4A;
  --alerta:#6E1A28;
  --barra:#0B0000;
  --barra-tinta:#F2E8D5;
  --radio:10px;
  --radio-boton:999px;
  --sombra:0 1px 2px rgba(11,0,0,.05), 0 8px 28px rgba(11,0,0,.05);
  --ancho:1280px;
  --tipo:'Jost',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --tipo-titulo:'EB Garamond',var(--tipo);
  --peso-titulo:400;
  --titulo-espaciado:-0.01em;
  --titulo-caja:none;
  --logo-alto:26px;
  --fondo-trama:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22104%22%20viewBox%3D%220%200%20120%20104%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23D8A94E%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M60%202%20L118%2052%20L60%20102%20L2%2052%20Z%22/%3E%3Cpath%20d%3D%22M60%2026%20L94%2052%20L60%2078%20L26%2052%20Z%22/%3E%3Cpath%20d%3D%22M0%200%20L60%2052%20L0%20104%20M120%200%20L60%2052%20L120%20104%22/%3E%3C/g%3E%3C/svg%3E");
  --fondo-trama-fuerza:0.055;
  --logo-espaciado:.26em;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* El fondo NO es un color plano: lleva la textura de la marca, muy
   bajita. Es lo que hace que una tienda con estructura de tienda grande
   igual se sienta del cliente y no de un molde. */
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:15px/1.45 var(--tipo);-webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--fondo-trama);background-repeat:repeat;
  opacity:var(--fondo-trama-fuerza,.05)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--tipo-titulo);font-weight:var(--peso-titulo);
  letter-spacing:var(--titulo-espaciado);margin:0}
h2{font-size:clamp(19px,2vw,26px)}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 16px}
.tapa{background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra)}

/* ── la cinta: promociones bancarias y avisos ───────────────────── */
.cinta{background:var(--acento);color:var(--primario);font-size:13px;font-weight:600;
  text-align:center;padding:7px 16px}
.cinta a{text-decoration:underline}

/* ── el zócalo de arriba: logo · buscador · carrito ──────────────── */
.zocalo{background:var(--barra);color:var(--barra-tinta);position:sticky;top:0;z-index:60}
.zocalo .fila{max-width:var(--ancho);margin:0 auto;padding:11px 16px;
  display:flex;align-items:center;gap:16px}
/* El logo es el mismo del sitio del cliente: monograma y nombre al lado,
   con SU espaciado. No se inventa una versión "para la tienda". */
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;white-space:nowrap}
.logo img{height:var(--logo-alto);width:auto}
.logo span{font-family:var(--tipo-titulo);font-weight:var(--peso-titulo);font-size:19px;
  letter-spacing:var(--logo-espaciado);text-transform:uppercase;padding-left:2px}
/* El enlace que el cliente quiere destacar: el color de acento y su rombo. */
a.marcado{color:var(--acento)!important;opacity:1!important;display:inline-flex;
  align-items:center;gap:6px}
a.marcado svg{width:13px;height:13px;flex:0 0 auto}
footer a.marcado{font-weight:600}
/* el buscador es lo más ancho de la barra: es por donde entra la mitad de la gente */
.buscador{flex:1;max-width:640px;position:relative}
.buscador input{width:100%;height:40px;border:0;border-radius:var(--radio);padding:0 44px 0 15px;
  font:inherit;font-size:15px;background:var(--superficie);color:var(--tinta);
  box-shadow:var(--sombra)}
.buscador input:focus{outline:2px solid var(--acento)}
.buscador button{position:absolute;right:0;top:0;width:44px;height:40px;border:0;background:0;
  cursor:pointer;color:var(--suave);display:grid;place-items:center}
.zocalo .acciones{display:flex;align-items:center;gap:14px;margin-left:auto;flex:0 0 auto}
.zocalo .acciones a{font-size:14px;opacity:.9}
.zocalo .acciones a:hover{opacity:1}
.carro{position:relative;display:grid;place-items:center;width:38px;height:38px}
.carro i{position:absolute;top:-2px;right:-4px;min-width:19px;height:19px;border-radius:999px;
  background:var(--acento);color:var(--primario);font-size:11px;font-weight:800;font-style:normal;
  display:grid;place-items:center;padding:0 5px}
/* ── la segunda fila: las categorías ─────────────────────────────── */
.rubros{background:var(--barra);border-top:1px solid rgba(255,255,255,.10)}
.rubros .fila{max-width:var(--ancho);margin:0 auto;padding:0 16px;display:flex;gap:2px;
  overflow-x:auto;scrollbar-width:none}
.rubros .fila::-webkit-scrollbar{display:none}
.rubros a{color:var(--barra-tinta);opacity:.82;font-size:13.5px;padding:9px 12px;white-space:nowrap;
  border-bottom:2px solid transparent}
.rubros a:hover,.rubros a.on{opacity:1;border-color:var(--acento)}
.hamburguesa{display:none;background:0;border:0;color:inherit;font-size:22px;cursor:pointer}

/* ── migas ───────────────────────────────────────────────────────── */
.migas{font-size:13px;color:var(--suave);padding:12px 0}
.migas a:hover{color:var(--primario);text-decoration:underline}

/* ── botones ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radio-boton);border:1px solid var(--primario);
  background:var(--primario);color:var(--primario-tinta);font:inherit;font-weight:600;
  font-size:15px;cursor:pointer;text-align:center;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.14)}
.btn:active{transform:scale(.985)}
.btn.suave{background:color-mix(in srgb,var(--primario) 10%,transparent);
  color:var(--primario);border-color:transparent}
.btn.linea{background:transparent;color:var(--primario)}
.btn.acento{background:var(--acento);border-color:var(--acento);color:var(--primario)}
.btn.ancho{width:100%}
.btn.chico{padding:7px 14px;font-size:13.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── precio, la pieza que más se mira ────────────────────────────── */
.precio{font-family:var(--tipo);color:var(--precio);font-weight:700;letter-spacing:-.01em}
.precio .antes{color:var(--suave);text-decoration:line-through;font-weight:400;font-size:.62em;
  display:block;line-height:1.3}
.off{color:var(--ok);font-weight:600}
.cuotas{color:var(--ok);font-size:13.5px;font-weight:500}
.gratis{color:var(--ok);font-weight:700;font-size:13.5px}

/* ── la tarjeta de producto ──────────────────────────────────────── */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}
.prod{background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.prod:hover{box-shadow:0 4px 14px rgba(0,0,0,.14);transform:translateY(-2px)}
.prod .marco{position:relative;aspect-ratio:1;background:var(--superficie);overflow:hidden}
.prod .marco img{width:100%;height:100%;object-fit:contain;padding:6%}
.prod .sin{display:grid;place-items:center;height:100%;color:var(--suave);font-size:12px}
.prod .cuerpo{padding:12px 14px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.prod h3{font-family:var(--tipo);font-size:14px;font-weight:400;line-height:1.35;
  letter-spacing:0;color:var(--tinta);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .precio{font-size:23px}
.prod .rubro{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.sello{position:absolute;top:9px;left:9px;z-index:2;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:var(--radio);background:var(--acento);color:var(--primario)}
.sello.baja{background:var(--alerta);color:#fff}
.sello.gris{background:var(--suave);color:#fff}

/* la fila horizontal que se arrastra: lo mismo que hacen las grandes */
.carrusel{position:relative}
.carrusel .pista{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 10px;scrollbar-width:thin}
.carrusel .pista>*{flex:0 0 clamp(180px,22vw,232px);scroll-snap-align:start}
.carrusel .flecha{position:absolute;top:42%;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--linea);background:var(--superficie);cursor:pointer;z-index:3;
  display:grid;place-items:center;box-shadow:var(--sombra);font-size:17px;color:var(--tinta)}
.carrusel .flecha.izq{left:-14px}.carrusel .flecha.der{right:-14px}
@media (max-width:900px){.carrusel .flecha{display:none}}

/* ── secciones ───────────────────────────────────────────────────── */
section{margin:22px 0}
.encabezado{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:14px;flex-wrap:wrap}
.encabezado a{font-size:14px;color:var(--primario);font-weight:600}
.encabezado a:hover{text-decoration:underline}

/* ── portada ─────────────────────────────────────────────────────── */
.portada{position:relative;border-radius:var(--radio);overflow:hidden;background:var(--primario);
  color:var(--primario-tinta);min-height:min(56vh,460px);display:grid;align-items:center}
.portada img.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.portada .texto{position:relative;padding:clamp(28px,5vw,56px)}
.portada .ante{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);opacity:1;margin:0 0 14px;font-weight:500}
.portada h1{font-size:clamp(30px,4.2vw,52px);line-height:1.06;max-width:16ch;margin-bottom:14px;
  color:var(--acento)}
.portada p{font-size:clamp(14px,1.4vw,17px);max-width:46ch;opacity:.9;margin:0 0 24px}
.portada .botones{display:flex;gap:11px;flex-wrap:wrap}
.btn.claro{background:transparent;color:var(--primario-tinta);border-color:var(--primario-tinta)}
.btn.claro:hover{background:var(--primario-tinta);color:var(--primario)}
.ventajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.ventajas div{background:var(--superficie);padding:16px 18px}
.ventajas b{display:block;font-size:14px;margin-bottom:2px}
.ventajas span{font-size:13px;color:var(--suave)}

/* ══ CATÁLOGO: filtros a la izquierda ════════════════════════════ */
.con-filtros{display:grid;grid-template-columns:222px 1fr;gap:20px;align-items:start}
.filtros{position:sticky;top:112px}
.filtros .grupo{background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:14px 16px;margin-bottom:12px}
.filtros h4{font-family:var(--tipo);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--suave);font-weight:700;margin:0 0 9px}
.filtros a{display:block;font-size:14px;padding:4px 0;color:var(--tinta)}
.filtros a:hover{color:var(--primario);text-decoration:underline}
.filtros a.on{font-weight:700;color:var(--primario)}
.filtros a small{color:var(--suave);font-weight:400}
.filtros .rango{display:flex;gap:7px;align-items:center;margin-top:6px}
.filtros .rango input{width:100%;padding:7px 9px;border:1px solid var(--linea);
  border-radius:var(--radio);font:inherit;font-size:13px;background:var(--superficie);
  color:var(--tinta)}
.puestos{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.puesto{display:inline-flex;align-items:center;gap:6px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:var(--radio);padding:5px 11px;font-size:13px}
.puesto a{color:var(--suave);font-weight:700}
.barra-orden{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px;font-size:14px;color:var(--suave)}
.barra-orden select{padding:7px 11px;border:1px solid var(--linea);border-radius:var(--radio);
  font:inherit;font-size:14px;background:var(--superficie);color:var(--tinta)}
.abrir-filtros{display:none}

/* ══ FICHA: galería · datos · caja de compra ═════════════════════ */
.ficha{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start;
  background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:clamp(16px,2.2vw,28px)}
.galeria{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px}
.galeria .tiras{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow-y:auto}
.galeria .tiras button{width:60px;height:60px;border:2px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;padding:0;background:var(--superficie);cursor:pointer;flex:0 0 auto}
.galeria .tiras button.on{border-color:var(--primario)}
.galeria .tiras img{width:100%;height:100%;object-fit:cover}
.galeria .grande{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  background:var(--superficie)}
.galeria .grande img{width:100%;height:100%;object-fit:contain}
/* Con una sola foto no hay tira de miniaturas: la grande ocupa las dos columnas (si no, cae en la de 64 px). */
.galeria .grande:only-child{grid-column:1/-1}
.detalle h1{font-size:clamp(20px,2.3vw,27px);line-height:1.22;margin:4px 0 8px}
.detalle .precio{font-size:34px;margin:12px 0 2px}
.opcion{margin:18px 0}
.opcion .nombre{font-size:14px;color:var(--suave);margin-bottom:8px}
.opcion .nombre b{color:var(--tinta)}
.pastillas{display:flex;flex-wrap:wrap;gap:8px}
.pastillas button{padding:8px 15px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--superficie);color:var(--tinta);font:inherit;font-size:14px;cursor:pointer}
.pastillas button:hover{border-color:var(--primario)}
.pastillas button.on{border-color:var(--primario);box-shadow:inset 0 0 0 1px var(--primario)}
.pastillas button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
/* la caja de compra: todo lo que hace falta para decidir, junto y quieto */
.caja{border:1px solid var(--linea);border-radius:var(--radio);padding:18px;position:sticky;top:112px}
.caja .envio{font-size:14px;margin-bottom:14px;line-height:1.5}
.caja .stock{font-size:14px;font-weight:600;margin-bottom:12px}
.caja .contador{display:flex;align-items:center;gap:0;border:1px solid var(--linea);
  border-radius:var(--radio);overflow:hidden;margin-bottom:14px;width:fit-content}
.caja .contador button{width:38px;height:38px;border:0;background:var(--superficie);
  color:var(--tinta);font-size:18px;cursor:pointer}
.caja .contador input{width:46px;height:38px;border:0;text-align:center;font:inherit;
  font-weight:700;background:var(--superficie);color:var(--tinta);-moz-appearance:textfield}
.caja .contador input::-webkit-outer-spin-button,
.caja .contador input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.caja .btn+.btn{margin-top:9px}
.caja .garantias{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea);
  font-size:13px;color:var(--suave);line-height:1.85}
.caja .garantias b{color:var(--tinta)}

/* ── armá el combo ───────────────────────────────────────────────── */
.combo{background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:20px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:24px;align-items:center}
.combo .piezas{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.combo .pieza{width:96px;text-align:center}
.combo .pieza .marco{aspect-ratio:1;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;margin-bottom:6px}
.combo .pieza img{width:100%;height:100%;object-fit:contain;padding:6%}
.combo .pieza span{font-size:12px;color:var(--suave);line-height:1.3;display:block}
.combo .mas{font-size:22px;color:var(--suave);font-weight:300}
.combo .cuenta{text-align:right}
.combo .cuenta .antes{color:var(--suave);text-decoration:line-through;font-size:15px}
.combo .cuenta .ahora{font-size:29px;font-weight:700;color:var(--precio);letter-spacing:-.01em}
.combo .cuenta .ahorro{color:var(--ok);font-weight:700;font-size:14px;margin-bottom:12px}

/* ── acordeón de la ficha ────────────────────────────────────────── */
.acordeon{margin-top:20px}
.acordeon details{border-top:1px solid var(--linea)}
.acordeon summary{padding:14px 0;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;font-size:15px}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"+";font-weight:400;font-size:19px;color:var(--suave)}
.acordeon details[open] summary::after{content:"−"}
.acordeon .cuerpo{padding:0 0 16px;color:var(--tinta);font-size:14.5px;line-height:1.65;
  white-space:pre-line}
.tabla-datos{width:100%;border-collapse:collapse;font-size:14px}
.tabla-datos td{padding:7px 0;border-bottom:1px solid var(--linea)}
.tabla-datos td:first-child{color:var(--suave);width:42%}

/* ── carrito y checkout ──────────────────────────────────────────── */
.dos{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.renglon{display:grid;grid-template-columns:86px 1fr auto;gap:14px;padding:16px;
  align-items:center;border-bottom:1px solid var(--linea)}
.renglon:last-child{border:0}
.renglon .marco{aspect-ratio:1;border-radius:var(--radio);overflow:hidden;background:var(--superficie);
  border:1px solid var(--linea)}
.renglon .marco img{width:100%;height:100%;object-fit:contain;padding:5%}
.renglon .quitar{background:0;border:0;color:var(--primario);font-size:13px;cursor:pointer;
  padding:0;margin-top:5px;font-weight:600}
.renglon .quitar:hover{text-decoration:underline}
.resumen{background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:20px;position:sticky;top:112px}
.resumen .linea{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:15px}
.resumen .linea.verde{color:var(--ok);font-weight:600}
.resumen .total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--linea);margin-top:10px;padding-top:12px;font-size:23px;font-weight:700}
.resumen .cuota{text-align:right;color:var(--ok);font-size:13.5px;font-weight:600}
.paso{background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:20px;margin-bottom:14px}
.paso h3{font-family:var(--tipo);font-size:17px;font-weight:700;margin:0 0 12px;
  display:flex;align-items:center;gap:9px;letter-spacing:0}
.paso .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;
  background:var(--primario);color:var(--primario-tinta);font-size:12.5px;font-weight:800}
.campo{margin:12px 0}
.campo label{display:block;font-size:13px;color:var(--suave);font-weight:600;margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;padding:10px 12px;border:1px solid var(--linea);
  border-radius:var(--radio);font:inherit;background:var(--superficie);color:var(--tinta)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--primario);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primario) 22%,transparent)}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.eleccion{display:block;border:1px solid var(--linea);border-radius:var(--radio);padding:13px 15px;
  margin-bottom:9px;cursor:pointer;transition:border-color .14s}
.eleccion:hover{border-color:var(--primario)}
.eleccion.on{border-color:var(--primario);box-shadow:inset 0 0 0 1px var(--primario)}
.eleccion .fila{display:flex;justify-content:space-between;gap:12px;align-items:center}
.eleccion small{color:var(--suave);display:block;margin-top:2px}
.error{color:var(--alerta);font-size:14px;font-weight:600;min-height:19px;margin-top:7px}
.vacio{text-align:center;padding:56px 20px;color:var(--suave);background:var(--superficie);
  border-radius:var(--radio);box-shadow:var(--sombra)}

/* ── seguimiento del pedido ──────────────────────────────────────── */
.pasos{display:flex;margin:20px 0;flex-wrap:wrap}
.pasos div{flex:1;min-width:110px;text-align:center;padding:12px 8px;
  border-top:3px solid var(--linea);font-size:13px;color:var(--suave);font-weight:600}
.pasos div.hecho{border-color:var(--ok);color:var(--ok)}
.pasos div.aqui{border-color:var(--primario);color:var(--primario)}
.chip{display:inline-block;padding:3px 11px;border-radius:var(--radio);font-size:12px;
  font-weight:700;background:var(--linea);color:var(--tinta)}
.chip.ok{background:color-mix(in srgb,var(--ok) 16%,var(--superficie));color:var(--ok)}
.chip.mal{background:color-mix(in srgb,var(--alerta) 14%,var(--superficie));color:var(--alerta)}
.chip.tibio{background:color-mix(in srgb,var(--acento) 26%,var(--superficie));color:var(--tinta)}

/* ── pie ─────────────────────────────────────────────────────────── */
footer{background:var(--superficie);border-top:1px solid var(--linea);margin-top:36px;
  padding:34px 0 20px}
footer .columnas{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px}
footer .logo{margin-bottom:12px}
footer h4{font-family:var(--tipo);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--suave);margin:0 0 10px;font-weight:700}
footer li{list-style:none;line-height:2;font-size:14px}
footer a:hover{color:var(--primario);text-decoration:underline}
footer ul{margin:0;padding:0}
footer .abajo{border-top:1px solid var(--linea);margin-top:26px;padding-top:16px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;
  color:var(--suave)}
.suscribir{display:flex;gap:8px;margin-top:10px;max-width:340px}
.suscribir input{flex:1;padding:10px 13px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--superficie);color:var(--tinta);font:inherit;font-size:14px}

/* ── el aviso flotante y whatsapp ────────────────────────────────── */
.globo{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--tinta);
  color:var(--fondo);padding:12px 22px;border-radius:var(--radio);font-weight:600;font-size:14px;
  z-index:90;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
  box-shadow:0 6px 24px rgba(0,0,0,.2)}
.globo.se-ve{opacity:1;transform:translate(-50%,0)}
.wapp{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:999px;
  background:#25d366;display:grid;place-items:center;z-index:70;
  box-shadow:0 6px 22px rgba(0,0,0,.22)}
.wapp svg{width:29px;height:29px;fill:#fff}
/* 03/10/2026 (KC-01): el WhatsApp ahora también está en el taller 3D, que ocupa
   toda la pantalla. La fila de íconos de abajo (Guardar, Compartir, Redes,
   Regalar) le deja su lugar para que el botón no tape «Regalar». */
body:has(.wapp) .opciones:has(> .salida){padding-right:66px}
.wapp:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

/* ── paginador ───────────────────────────────────────────────────── */
.paginador{display:flex;gap:6px;justify-content:center;margin:28px 0;flex-wrap:wrap}
.paginador a,.paginador span{padding:8px 14px;border-radius:var(--radio);font-size:14px;
  font-weight:600;background:var(--superficie);box-shadow:var(--sombra)}
.paginador .on{background:var(--primario);color:var(--primario-tinta)}

/* ── teléfono ────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .ficha,.dos,.combo{grid-template-columns:1fr}
  .caja,.resumen,.filtros{position:static}
  footer .columnas{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .con-filtros{grid-template-columns:1fr}
  .filtros{display:none}
  .filtros.abierta{display:block}
  .abrir-filtros{display:inline-flex}
  .zocalo .fila{flex-wrap:wrap}
  .buscador{order:3;flex-basis:100%;max-width:none}
  .rubros{display:none}
  .galeria{grid-template-columns:1fr}
  .galeria .tiras{flex-direction:row;max-height:none;order:2;overflow-x:auto}
  .campos{grid-template-columns:1fr}
  footer .columnas{grid-template-columns:1fr}
  .grilla{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  /* el botón de comprar no se va de la pantalla nunca */
  .barra-comprar{position:fixed;left:0;right:0;bottom:0;background:var(--superficie);
    border-top:1px solid var(--linea);padding:10px 14px;display:flex;gap:12px;align-items:center;
    z-index:80;box-shadow:0 -3px 16px rgba(0,0,0,.09)}
  .barra-comprar .precio{font-size:19px;white-space:nowrap}
  .barra-comprar .btn{flex:1}
  body.con-barra{padding-bottom:72px}
  .wapp{bottom:80px}
}
@media (min-width:821px){.barra-comprar{display:none}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* ── A COTIZAR ─────────────────────────────────────────────────────
   Donde iba el precio va la palabra, en la letra de los títulos y en
   cursiva: se lee como la etiqueta escrita a mano de un taller, no como
   un precio que falta. La cinta de arriba deja el color de alerta y
   pasa a la barra de la marca: no es un aviso de que algo está mal, es
   cómo se compra acá. */
.precio--cotizar{font-family:var(--tipo-titulo);font-style:italic;font-weight:500;
  letter-spacing:0;color:var(--primario)}
.prod .precio--cotizar{font-size:21px}
.detalle .precio--cotizar{font-size:36px;margin:14px 0 4px}
.cotizar-nota{font-size:15px;color:var(--suave);margin:0 0 6px;max-width:44ch}
.cinta--cotizar{background:var(--primario);color:var(--acento);font-size:14px;letter-spacing:.01em}
.cotizar-titulo{font-size:clamp(28px,3.2vw,40px);margin:4px 0 18px}
.cotizar-form .campo label{font-size:14px}
.cotizar-form .campo input,.cotizar-form .campo textarea{font-size:16px}
.cotizar-form .error:empty{display:none}

@media print{.zocalo,.rubros,.cinta,footer,.wapp,.barra-comprar{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   EL TALLER — hacé tu propia mochila

   Tres columnas: lo que se toca, el plano y la mochila. En el teléfono
   se apilan en ese mismo orden, porque es el orden en que se piensa.
   ═══════════════════════════════════════════════════════════════════ */
/* TODO ENTRA EN UNA PANTALLA.

   Antes cada columna medía lo que medía su contenido, y la de la
   izquierda medía tres pantallas: para llegar a "agregar al carrito"
   había que scrollear la página entera y perder de vista la mochila.
   Ahora las tres miden lo mismo —lo que entra en la pantalla— y la que
   necesita más espacio se desplaza por dentro. La página no se mueve. */
/* El alto lo escribe el javascript midiendo dónde arranca el taller de
   verdad. Este valor es sólo el de arranque, para el primer cuadro. */
.taller{--alto-taller:calc(100vh - 150px);
  display:grid;grid-template-columns:322px minmax(0,1fr) minmax(0,1.06fr);
  gap:12px;max-width:1880px;margin:8px auto 0;padding:0 12px;align-items:start}
/* `margin:0` no es de adorno: una regla general de la tienda le ponía 22
   píxeles de margen arriba a las dos columnas de la derecha. Con eso, el
   taller medía lo que tenía que medir y aun así la página scrolleaba, y
   las columnas arrancaban más abajo que la de la izquierda. */
.taller > *{height:var(--alto-taller);margin:0}
.taller__editor{background:var(--superficie);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:16px;overflow-y:auto}
.taller__titulo h1{font-size:24px;margin:0 0 4px}
.taller__titulo p{font-size:14px;color:var(--suave);margin:0 0 14px}
.taller__plano,.taller__3d{background:var(--superficie);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:12px;display:flex;flex-direction:column}
.taller__barra{display:flex;align-items:center;gap:10px;padding:0 2px 10px;font-size:13px;
  color:var(--suave);border-bottom:1px solid var(--linea);margin-bottom:10px}
.taller__barra b{color:var(--tinta);font-size:14px}
.taller__barra span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* En pantallas angostas la ayuda de la barra se apilaba en cuatro
   renglones y empujaba los botones: primero se va la ayuda, que es lo
   que menos falta cuando no hay lugar. */
@media (max-width:1500px){.taller__barra span{display:none}}
.lienzo{flex:1;display:grid;place-items:center;min-height:0}
.lienzo canvas{border-radius:8px;cursor:grab;touch-action:none;
  background:repeating-conic-gradient(var(--linea) 0 25%,transparent 0 50%) 0 0/22px 22px}
.lienzo canvas:active{cursor:grabbing}
.escena{flex:1;min-height:0;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 50% 40%,
    color-mix(in srgb,var(--acento) 10%,transparent),transparent 62%)}
.escena:active{cursor:grabbing}
.escena canvas{display:block;width:100%;height:100%}
.pie-plano{font-size:12.5px;color:var(--suave);text-align:center;margin:8px 0 0}
.pie-plano.mal{color:var(--alerta);font-weight:600}

.pestanas{display:flex;gap:4px;background:var(--fondo);border-radius:var(--radio);
  padding:3px;margin-bottom:14px}
.pestanas button{flex:1;padding:8px;border:0;border-radius:calc(var(--radio) - 2px);
  background:transparent;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  color:var(--suave)}
.pestanas button.on{background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra)}

.agregar{display:grid;gap:8px;margin-bottom:14px}
.agregar .btn{cursor:pointer}
.donde{margin-bottom:12px}
.donde label,.taller__editor label{display:block;font-size:12px;color:var(--suave);
  font-weight:600;margin-bottom:5px}
.donde select,.taller__editor input:not([type=range]):not([type=checkbox]),
.taller__editor select{width:100%;padding:9px 11px;border:1px solid var(--linea);
  border-radius:var(--radio);font:inherit;font-size:14px;background:var(--superficie);
  color:var(--tinta)}
/* UN `label` QUE ADEMÁS ES BOTÓN NO ES UN RÓTULO DE CAMPO.

   "Subir una imagen" y "Subí tu propia trama" son `<label>` porque
   envuelven un `<input type=file>` escondido —es la única forma de
   dispararlo sin javascript—, y la regla general de los rótulos del
   editor les comía el color y el tamaño: quedaban en gris pardo, con
   letra chica, sobre un botón negro. Ilegíbles. */
.taller__editor label.btn{color:var(--primario-tinta);font-size:15px;font-weight:600;
  margin-bottom:0;text-transform:none;letter-spacing:0}
.taller__editor label.btn.suave{color:var(--primario)}
.taller__editor input[type=range]{width:100%;accent-color:var(--primario)}
.taller__editor input[type=color]{height:38px;padding:2px}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cm{float:right;color:var(--tinta);font-weight:700}
.ayuda{font-size:13.5px;color:var(--suave);line-height:1.5;margin:0 0 12px}

.capas{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px;
  max-height:230px;overflow-y:auto}
.capa{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--radio);
  border:1px solid var(--linea);cursor:pointer;background:var(--superficie)}
.capa.on{border-color:var(--primario);box-shadow:inset 0 0 0 1px var(--primario)}
.capa .ojo{font-size:12px;color:var(--suave);width:14px;flex:0 0 14px}
.capa .mini{width:32px;height:32px;flex:0 0 32px;border-radius:6px;overflow:hidden;
  background:var(--fondo);display:grid;place-items:center;font-weight:800;font-size:13px}
.capa .mini img{width:100%;height:100%;object-fit:cover}
.capa .txt{flex:1;min-width:0;font-size:13px;line-height:1.25}
.capa .txt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.capa .txt small{color:var(--suave);font-size:11.5px}
.vacio-chico{font-size:13px;color:var(--suave);text-align:center;padding:14px 0;margin:0}

.propiedades{border-top:1px solid var(--linea);margin-top:12px;padding-top:12px}
.propiedades h4{font-family:var(--tipo);font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--suave);margin:0 0 10px}
.recorte{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.acciones-capa{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.btn.peligro{color:var(--alerta);background:color-mix(in srgb,var(--alerta) 9%,transparent);
  border-color:transparent}

/* EL AVISO QUE NADIE DA EN VIVO: cómo va a salir impresa, mientras se mueve */
.aviso-dpi{font-size:12.5px;font-weight:600;padding:8px 10px;border-radius:var(--radio);
  background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);line-height:1.4}
.aviso-dpi.tibio{background:color-mix(in srgb,var(--acento) 22%,transparent);color:var(--tinta)}
.aviso-dpi.mal{background:color-mix(in srgb,var(--alerta) 12%,transparent);color:var(--alerta)}

.muestra-trama{display:grid;place-items:center;margin:10px 0}
.muestra-trama canvas{border-radius:var(--radio);border:1px solid var(--linea)}

/* EL CIERRE: el nombre y el carrito, debajo de la mochila.
   Compacto y con las tipografías del manual del cliente —el mismo título
   que usa la tienda— para que no parezca un formulario pegado. */
.taller__cierre{border-top:1px solid var(--linea);margin-top:10px;padding-top:10px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:end}
/* El rótulo iba en la misma línea que el campo y lo empujaba contra el
   botón: quedaba "PONELE UN NOMBRE" pegado a un recuadro apretado. Va
   arriba, como en todos los demás campos del editor. */
.taller__cierre label{display:block;font-family:var(--tipo-titulo);font-size:10.5px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--suave);margin-bottom:5px}
.taller__cierre label input{margin-top:5px}
.taller__cierre input{font-family:var(--tipo-titulo);font-size:15px;width:100%}
.taller__cierre .btn{white-space:nowrap;padding:9px 13px;font-size:13px}
.taller__cierre .opciones{grid-column:1/-1;display:grid;
  grid-template-columns:repeat(4,1fr);gap:5px}
.salida{display:grid;justify-items:center;gap:3px;padding:6px 2px;border:1px solid var(--linea);
  border-radius:var(--radio);background:var(--superficie);cursor:pointer;
  font:inherit;font-size:10.5px;color:var(--suave);line-height:1}
.salida:hover{border-color:var(--primario);color:var(--primario)}
.salida svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* La tela y el fondo, uno al lado del otro. */
.dos-bloques{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dos-bloques .seccion{margin-top:0}
.subir-trama{margin-bottom:10px;cursor:pointer}
.seccion{font-family:var(--tipo-titulo);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta);margin:16px 0 8px;
  padding-bottom:5px;border-bottom:1px solid var(--linea)}
.seccion:first-child{margin-top:0}
.pestanas button b{font-weight:400;opacity:.75;margin-right:2px}

/* LOS MOTIVOS ELEGIDOS de la trama, cada uno con su color. */
.elegidos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.elegidos .chip{display:flex;align-items:center;gap:5px;padding:3px 4px 3px 3px;
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie)}
.elegidos .chip canvas{width:26px;height:26px;border-radius:5px;background:var(--fondo)}
.elegidos .chip input[type=color]{width:24px;height:24px;padding:1px;border-radius:5px;
  border:1px solid var(--linea)}
.elegidos .chip .fuera{border:0;background:transparent;cursor:pointer;color:var(--suave);
  font-size:14px;line-height:1;padding:0 2px}
.taller__cierre .error,.taller__cierre .codigo,.taller__cierre .ayuda{grid-column:1/-1}


/* LAS HERRAMIENTAS DEL LÁPIZ, en una franja al lado de la mochila. */
/* `[hidden]` es un atributo, no una regla: un `display:flex` puesto
   después lo pisa sin avisar. La barra del lápiz se veía siempre, con la
   paleta y el pincel a la vista aunque el modo fuera "Girar". */
.herramientas[hidden]{display:none}
.herramientas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:0 2px 10px;border-bottom:1px solid var(--linea);margin-bottom:8px}
.herramientas .paleta-lapiz{display:flex;gap:4px;margin:0;flex:1;min-width:150px}
.herramientas .paleta-lapiz button{width:20px;height:20px;aspect-ratio:auto}
.herramientas .mini-color input{width:30px;height:26px;padding:1px;border-radius:6px}
.herramientas .mini-color,.herramientas .mini-grosor{margin:0}
.herramientas .mini-grosor{display:flex;align-items:center;gap:6px}
.herramientas .mini-grosor input[type=range]{width:88px}
.herramientas .mini-grosor span{font-size:11.5px;color:var(--suave);
  font-variant-numeric:tabular-nums;min-width:38px}
.herramientas .mini-botones{display:flex;gap:4px}
.herramientas .mini-botones .btn{padding:5px 9px;font-size:14px;line-height:1}
.codigo{font-size:13px;background:var(--fondo);border-radius:var(--radio);padding:10px 12px}
.codigo a{color:var(--primario);font-weight:600;text-decoration:underline}

/* EL CÍRCULO DEL PINCEL.
   Del tamaño exacto de lo que va a pintar, proyectado a la distancia a la
   que está la mochila. Sin él uno pinta a ciegas y siempre sale del
   grosor equivocado. */
.pincel{position:absolute;z-index:2;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(0,0,0,.55);box-shadow:0 0 0 1.5px rgba(255,255,255,.75) inset;
  transform:translate(-50%,-50%)}

/* EL CARTEL DE CARGA.
   Un aro que se llena con el porcentaje. Tapa el recuadro de la mochila y
   nada más: lo demás se puede usar mientras tanto. */
.escena{position:relative}
.cargando{position:absolute;inset:0;display:grid;place-items:center;gap:12px;
  align-content:center;background:var(--superficie);z-index:3;border-radius:8px}
.cargando .aro{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--primario) calc(var(--pct) * 1%),
    color-mix(in srgb,var(--linea) 60%,transparent) 0)}
.cargando .aro b{width:74px;height:74px;border-radius:50%;background:var(--superficie);
  display:grid;place-items:center;font-size:17px;font-variant-numeric:tabular-nums}
.cargando span{font-size:13px;color:var(--suave)}

/* LAS FICHAS DE PIEZA.
   Reemplazan a la lista desplegable. Se ve de un vistazo en cuál se está
   trabajando y cuáles ya tienen algo puesto, que era justo lo que la
   lista escondía. */
.fichas{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.fichas button{padding:6px 9px;border:1px solid var(--linea);border-radius:var(--radio);
  background:var(--superficie);font:inherit;font-size:12px;font-weight:600;
  color:var(--suave);cursor:pointer;line-height:1.1}
.fichas button.hecha{color:var(--tinta)}
.fichas button.on{border-color:var(--primario);color:var(--primario);
  box-shadow:inset 0 0 0 1px var(--primario)}
.fichas .tic{color:var(--ok);font-weight:800}
.ayuda.chica{font-size:12px;margin:0 0 4px;line-height:1.45}

/* EL BANCO: lo que se subió una vez, listo para cualquier pieza. */
.banco-caja{margin-bottom:14px}
.banco{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
.banco button{padding:0;border:1px solid var(--linea);border-radius:8px;overflow:hidden;
  background:var(--fondo);cursor:pointer;aspect-ratio:1}
.banco button:hover{border-color:var(--primario)}
.banco img{width:100%;height:100%;object-fit:cover;display:block}

/* LOS MUESTRARIOS de fondos y tramas de la casa. */
.muestrario{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));
  gap:6px;margin-bottom:16px}
.muestra{padding:0;border:1px solid var(--linea);border-radius:8px;overflow:hidden;
  background:var(--fondo);cursor:pointer;aspect-ratio:1;display:block}
.muestra:hover{border-color:var(--primario)}
.muestra canvas{width:100%;height:100%;display:block}

/* El muestrario por familias, con su estrellita en las destacadas. */
#muestrarioTramas h5{font-family:var(--tipo);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--suave);margin:10px 0 6px;font-weight:700}
#muestrarioTramas{display:block}
.muestra{position:relative}
.muestra i{position:absolute;top:2px;right:3px;font-style:normal;font-size:11px;
  color:var(--acento);text-shadow:0 0 3px rgba(0,0,0,.55)}
.muestra.destacada{border-color:var(--acento)}

/* LA PALETA DEL LÁPIZ. */
.paleta-lapiz{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:12px}
.paleta-lapiz button{aspect-ratio:1;border-radius:50%;border:2px solid var(--linea);
  cursor:pointer;padding:0}
.paleta-lapiz button.on{border-color:var(--tinta);box-shadow:0 0 0 2px var(--superficie),
  0 0 0 4px var(--tinta)}
.btn.chico.suave.on{background:var(--primario);color:var(--superficie);border-color:transparent}

/* el recortador a mano alzada */
.recortador{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:200;
  display:grid;place-items:center;padding:20px}
.recortador .marco{position:relative;background:var(--superficie);border-radius:var(--radio);
  padding:14px;max-width:min(720px,92vw);max-height:88vh}
.recortador img{max-width:100%;max-height:66vh;user-select:none;cursor:crosshair}
.recortador .sel{position:absolute;border:2px dashed var(--primario);
  background:color-mix(in srgb,var(--primario) 12%,transparent);pointer-events:none}
.recortador .pie{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

@media (max-width:1200px){
  .taller{grid-template-columns:300px minmax(0,1fr)}
  .taller__3d{grid-column:1 / -1}
}
@media (max-width:900px){
  .taller{grid-template-columns:1fr}
  .taller__editor{position:static;max-height:none}
  .lienzo{min-height:320px}
  .escena{min-height:380px}
}

/* la invitación al taller, en la portada */
.taller-invito{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;
  align-items:center;background:var(--primario);color:var(--primario-tinta);
  border-radius:var(--radio);padding:clamp(22px,3vw,40px);box-shadow:var(--sombra)}
.taller-invito .ante{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento);font-weight:600;display:block;margin-bottom:10px}
.taller-invito h2{color:var(--acento);margin-bottom:10px}
.taller-invito p{font-size:15px;opacity:.9;max-width:56ch;margin:0 0 20px}
.taller-invito__muestra{color:var(--acento);opacity:.75}
.taller-invito:hover .taller-invito__muestra{opacity:1}
@media (max-width:820px){.taller-invito{grid-template-columns:1fr}
  .taller-invito__muestra{display:none}}

/* la paleta de lo que se compra hecho: cinta, manija y cierres */
.paleta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:6px}
.paleta button{width:30px;height:30px;border-radius:50%;border:2px solid var(--linea);
  cursor:pointer;padding:0;position:relative}
.paleta button:hover{transform:scale(1.1)}
.paleta button.on{border-color:var(--tinta);box-shadow:0 0 0 2px var(--superficie) inset}
.paleta button.on span{position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:14px;text-shadow:0 0 3px rgba(0,0,0,.7)}
.paleta button.on span::before{content:"✓"}

/* el descanso entre productos: UNO por página, a lo ancho de la fila entera
   (27/09/2026: ocupando dos lugares dejaba huecos en la grilla). Vive
   adentro de la grilla para que el ojo no lo saltee como publicidad. */
.carton{grid-column:1/-1;position:relative;border-radius:var(--radio);overflow:hidden;
  background:var(--primario);color:var(--primario-tinta);box-shadow:var(--sombra)}
.carton img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.carton__texto{position:relative;padding:26px 32px;display:grid;
  grid-template-columns:1fr auto;column-gap:32px;align-items:center}
.carton .ante{grid-column:1;font-size:17px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--acento);font-weight:600;display:block;margin-bottom:6px}
.carton h3{grid-column:1;font-family:var(--tipo-titulo);font-weight:var(--peso-titulo);
  font-size:clamp(22px,2.4vw,30px);line-height:1.12;color:var(--acento);margin:0 0 6px}
.carton p{grid-column:1;font-size:17px;opacity:.9;margin:0;max-width:60ch;line-height:1.45}
.carton__btn{grid-column:2;grid-row:1/span 3;display:inline-block;padding:12px 22px;
  border-radius:var(--radio-boton);background:var(--acento);color:var(--primario);
  font-weight:700;font-size:17px;white-space:nowrap}
.carton:hover img{opacity:.55}
@media (max-width:640px){.carton__texto{grid-template-columns:1fr;padding:22px 20px}
  .carton__btn{grid-column:1;grid-row:auto;justify-self:start;margin-top:14px}}
/* la grilla del catálogo va de a 4 fijo (de a 3 y de a 2 en pantallas más
   chicas): con auto-fill la cantidad de columnas dependía del ancho y el
   cartel, que va después del producto 12, podía caer a mitad de fila */
.grilla--catalogo{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.grilla--catalogo{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grilla--catalogo{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Aviso con foto dentro del catálogo (banners con lugar='catalogo-aviso').
   Es el de la demo de colegios que aprobó Mario el 06/10/2026, tal cual.
   Con tres columnas, 8 productos no llenan la fila: `dense` hace que el
   producto siguiente ocupe el hueco en vez de dejarlo vacío. */
.grilla--catalogo{grid-auto-flow:dense}
.aviso-cole{grid-column:1/-1;display:flex;background:var(--primario);color:var(--primario-tinta);text-decoration:none;overflow:hidden;
  border:1px solid rgba(216,169,78,.35);cursor:pointer;transition:border-color .25s}
.aviso-cole:hover,.aviso-cole:focus-visible{border-color:var(--acento)}
.aviso-cole:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.aviso-cole img{width:44%;height:auto;aspect-ratio:1344/768;object-fit:cover;display:block}
.aviso-cole .cuerpo-aviso{display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:clamp(18px,2.6vw,38px);background:var(--primario);flex:1}
.aviso-cole em{font-style:normal;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
.aviso-cole strong{font-family:'EB Garamond',Georgia,serif;font-weight:400;font-size:clamp(26px,2.8vw,40px);line-height:1.12}
.aviso-cole .texto-aviso{font-size:17px;line-height:1.5;color:rgba(242,232,213,.86);max-width:46ch}
.aviso-cole .ir-aviso{font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--acento);margin-top:4px}
@media (max-width:760px){.aviso-cole{flex-direction:column}.aviso-cole img{width:100%}}

/* crédito de autoría en el pie: copiado de la firma del pie de APHISEMA */
.ft-lina{display:inline-flex;align-items:center;gap:7px}
.ft-lina a{color:inherit;border-bottom:1px solid currentColor;padding-bottom:1px;
  transition:color .2s ease-out,border-color .2s ease-out}
.ft-lina a:hover{color:var(--primario);border-color:var(--primario)}
.ft-lina-marca{display:inline-flex;align-items:center;gap:6px}
.ft-lina-logo{width:1.15em;height:1.15em;fill:currentColor;flex:none;transition:transform .25s ease}
.ft-lina-marca:hover .ft-lina-logo{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.ft-lina-marca:hover .ft-lina-logo{transform:none}}

/* una chapa en cero no se muestra: el display de la chapa le ganaba al
   atributo hidden y quedaba un «0» en el encabezado (30/09/2026) */
.zocalo [hidden]{display:none!important}

/* ── 05/10/2026 (KD-03, KD-12) ───────────────────────────────────────── */
/* «Ingresar»: a la vista, sin competir con el carrito ni con la compra. */
.rubros a.ingresar{margin-left:auto;opacity:.82}
footer .abajo a.ingresar{text-decoration:underline;text-underline-offset:3px}
/* Un toque alcanza: barra de carga arriba y el enlace tocado, atenuado. */
#cargando{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff 40%,#fff 60%,transparent);
  background-size:50% 100%;background-repeat:no-repeat;animation:cargando 1.1s linear infinite}
#cargando[hidden]{display:none}
@keyframes cargando{from{background-position:-50% 0}to{background-position:150% 0}}
a.yendo{opacity:.55}
html[data-un-toque]{cursor:progress}
/* ojo: llave y numeral pegados abren un comentario de la plantilla */
@media (prefers-reduced-motion:reduce){
  #cargando{animation:none;background-size:100% 100%}
}

/* ── KD-05 (Mario, 05/10/2026): legibilidad en el celular ────────────────
   En pantallas angostas ningún texto queda por debajo de 14 px. Varias
   medidas chicas están escritas en las plantillas, renglón por renglón: por
   eso la última regla las agarra por su atributo. */
footer a.marcado{color:color-mix(in srgb,var(--acento) 52%,#000)!important}
@media (max-width:820px){
  .sello,.minimo,.migas,.migas a,.renglon .quitar,.btn.chico,footer h4,footer .abajo,footer .abajo a,
  .garantias,.garantias div,.garantias b,.garantias a,.resumen p{font-size:14px}
  [style*="font-size:11"],[style*="font-size:12"],[style*="font-size:13"]{font-size:14px!important}
}

/* ── KD-09 (05/10/2026): la flecha de «la página sigue» ─────────────────── */
.sigue{position:fixed;left:50%;bottom:18px;z-index:60;width:48px;height:48px;margin-left:-24px;
  border-radius:999px;border:1px solid var(--acento);background:var(--primario);color:var(--acento);
  display:grid;place-items:center;cursor:pointer;padding:0;opacity:.94;
  box-shadow:0 6px 22px rgba(0,0,0,.35);transition:opacity .25s ease,visibility .25s ease;
  animation:sigue-late 1.9s ease-in-out infinite}
.sigue:hover{opacity:1}
.sigue:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.sigue svg{width:22px;height:22px;display:block}
.sigue.se-fue{opacity:0;visibility:hidden;pointer-events:none}
@keyframes sigue-late{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.sigue{animation:none}}
@media print{.sigue{display:none}}
/* en la ficha, en celular, abajo va la barra de comprar: la flecha sube */
@media (max-width:820px){body:has(.barra-comprar) .sigue{bottom:84px}}