/* ═══════════════════════════════════════════════════════════════════
   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}

/* ── 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))}}

/* 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}