/* A5 · Compacto — la variante que pidió Jorge.
   Tres columnas fijas: zonas · catálogo · carrito. Cada zona ocupa UNA fila con
   flechas, así caben varias secciones en una pantalla sin scroll interminable;
   y desde ahí se puede expandir la sección completa sin salir de la página. */

:root{
  /* El naranja de MAFE. Está aquí una sola vez a propósito: si algún día
     cambia el tono exacto, se toca esta línea y se mueve toda la tienda.
     Antes el acento era verde azulado y por eso Jorge fue pintando a mano
     elemento por elemento; ahora nace naranja y no hay que perseguirlo. */
  --acento:#ff7b01; --acento-osc:#cc6200;
  /* Lo que va ENCIMA del naranja, en un solo lugar y no repartido en 42
     reglas. Está en BLANCO porque así lo quiere Jorge: probamos el negro
     (11-sep) y no le gustó cómo se veía su tienda, así que se regresó.
       blanco → 2.60 de contraste · negro → 6.69 · la norma pide 4.5
     Queda apuntado: los botones no alcanzan el mínimo legible, y eso pesa más
     al sol a media obra, que es donde los mira un plomero. El día que se quiera
     cambiar, es esta línea; lo demás ya está preparado. */
  --sobre-acento:#fff;
  /* El hover OSCURECE, que es lo que toca con letra blanca encima. Si algún
     día la letra se vuelve negra, este tiene que ACLARAR en vez de oscurecer:
     al invertir la letra se invierte de qué lado está el contraste. */
  --acento-toque:#cc6200;
  /* El mismo naranja, pero para LETRA. El de arriba mide 2.6 de contraste
     sobre blanco y el mínimo legible es 4.5: en un celular, al sol, en una
     obra, un precio en #ff7b01 no se lee. Este mide 5.51 y sigue viéndose del
     mismo color a simple vista.
     El naranja de siempre se queda para rellenos grandes —botones con letra
     blanca encima, barras, iconos— donde el tamaño compensa. */
  --acento-texto:#a85000;
  --tinta:#1b1d21;
  /* Barra/header oscuros con letra blanca: un color que es oscuro en LOS DOS
     temas (si usara --tinta, en oscuro se volvía claro y la barra se invertía). */
  --barra:#1b1d21;
  /* El gris de los textos secundarios bajó de #68737d a #636e78. Parece nada
     —y a simple vista lo es— pero el anterior daba 4.30 de contraste sobre el
     fondo gris claro, abajo del mínimo de 4.5. Con este da 4.84 y ya se lee en
     un celular al sol. */
  --gris:#636e78;
  --linea:#e6eaed; --fondo:#fff; --suave:#f4f7f8;
  /* Ya no hay verde. «Sí hay existencia» y «envío gratis» van en el naranja
     de la casa, como pidió Jorge. Se pierde el golpe de vista de que verde
     es buena noticia; a cambio la tienda es de un solo color. */
  --rojo:#dc2626; --verde:#ff7b01;
  --tarjeta:118px;         /* ancho de la tarjeta: define la densidad */
}
*{box-sizing:border-box}
/* Lo que trae `hidden` NO se ve, gane la regla que gane. Sin esto, cualquier
   `display:flex` de una clase le gana al `hidden` del navegador: así el chat
   salía siempre abierto y la × no hacía nada. */
[hidden]{display:none !important}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.marco3{display:grid;grid-template-columns:var(--lado-ancho,196px) 1fr 292px;min-height:100vh}

/* ── Columna 1 · zonas ── */
/* La columna se pega DEBAJO de la barra, no en el cero.
   Pegada arriba del todo se metía por detrás de la barra oscura: al bajar, el
   título «Zonas» quedaba tapado completo y la barra de envío gratis a más de
   la mitad. `--bajo-barra` lo mide `tienda.js` en vivo, porque la barra crece
   cuando el buscador se pasa de renglón en el celular. */
.lado{border-right:1px solid var(--linea);padding:.9rem .6rem;
  position:sticky;top:var(--bajo-barra,101px);
  height:calc(100vh - var(--bajo-barra,101px));overflow-y:auto}
.marca{font-size:1.4rem;font-weight:800;color:var(--acento);padding:0 .5rem .6rem;
  letter-spacing:-.02em}
.envio{background:var(--suave);border-radius:8px;padding:.5rem .6rem;margin-bottom:.75rem}
.envio small{font-size:.7rem;color:var(--gris)}
.envio-barra{height:5px;background:var(--linea);border-radius:99px;overflow:hidden;margin-top:.3rem}
.envio-barra span{display:block;height:100%;width:38%;background:var(--acento)}
.lado-titulo{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--gris);padding:.5rem .5rem .3rem;font-weight:700}
.lado a{display:flex;justify-content:space-between;padding:.36rem .5rem;
  border-radius:6px;font-size:.81rem}
.lado a:hover{background:var(--suave)}
.lado a em{font-style:normal;font-size:.7rem;color:var(--gris)}

/* ── Columna 2 · catálogo ── */
.centro{min-width:0}
.cab{padding:.75rem 1rem;border-bottom:1px solid var(--linea);
  position:sticky;top:0;background:var(--fondo);z-index:20}
.cab form{display:flex}
.cab input{flex:1;padding:.58rem .9rem;border:1px solid var(--linea);border-radius:8px;
  font-size:15px;background:var(--suave)}

.tiras{display:flex;gap:.5rem;overflow-x:auto;padding:.75rem 1rem;scrollbar-width:none;
  /* La fila se corta a la mitad de una familia y no hay flechas que lo anuncien:
     el desvanecido de la orilla es lo que dice "sigue habiendo, muévete". */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.tiras::-webkit-scrollbar{display:none}
.tira{flex:none;width:96px;text-align:center}
/* Como los cuadros de Calii: color de fondo suave, sin borde, y la foto
   encima. El borde partía cada cuadrito en dos líneas y ensuciaba la fila. */
/* Sin casilla. Antes cada foto vivía en un cuadro gris azuloso; como las
   fotos ya vienen recortadas, el cuadro solo estorbaba —y en las piezas
   delgadas, como una pija, se veía el fondo del cuadro y esa casilla cantaba
   distinta a las demás. Ahora la foto flota sobre el fondo de la tienda. */
/* Tile redondeado (no cuadro duro): la foto en un recuadro blanco de esquinas
   suaves, del mismo juego que las tarjetas y los chips. */
.tira-foto{width:96px;height:96px;border-radius:16px;background:#fff;
  border:1px solid var(--linea);box-shadow:0 4px 12px rgba(28,22,12,.06);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .15s}
.tira:hover .tira-foto{transform:translateY(-3px) scale(1.03)}
.tira-foto img{max-width:82%;max-height:82%;width:auto;object-fit:contain}
/* Un solo renglón. Los nombres cortos viven en `catalogo.CORTOS`; si alguno
   se pasa, se corta con puntitos en vez de brincar a dos renglones y dejar la
   fila dispareja. */
.tira span{display:block;font-size:.72rem;margin-top:.35rem;line-height:1.2;
  color:var(--tinta);font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* ── Secciones: título con subtítulo, fila con flechas laterales ── */
/* content-visibility: el navegador NO pinta ni mide una sección que está fuera
   de pantalla hasta que te acercas a ella. En una portada larga con muchas
   tarjetas y fotos, eso es lo que quita el scroll trabado en el celular. El
   contain-intrinsic-size reserva su alto aproximado para que la barra de scroll
   no brinque; «auto» recuerda el alto real una vez pintada. */
.seccion{padding:1.1rem 1rem 1.25rem;border-bottom:1px solid var(--linea);
  content-visibility:auto;contain-intrinsic-size:auto 440px}
.seccion-cab{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
  margin-bottom:.7rem}
.seccion-cab h2{font-size:1.28rem;margin:0;font-weight:800;letter-spacing:-.01em}
.subtitulo{margin:0;color:var(--gris);font-size:.84rem}

/* «Para ti» y «También podrías estar buscando».

   Se distinguen con un filo del color de la tienda y nada más. La tentación
   es marcarlas con fondo y etiqueta para que se luzca el trabajo, pero una
   fila que se ve distinta al resto del catálogo se lee como anuncio pagado y
   el cliente la brinca. Tiene que sentirse tienda, no publicidad. */
.seccion.para-ti,
.seccion.recomendados{border-left:3px solid var(--acento)}

/* El hueco donde va a caer «También podrías estar buscando».

   El píxel de alto NO es adorno: mientras está vacío el div mide cero, y un
   objetivo sin área nunca cuenta como visible para el navegador, así que el
   observador que dispara la carga no se activaba jamás. Con un píxel ya es
   algo que se puede ver llegar. */
[data-recomendados]{min-height:1px}

/* La pista contiene la fila y las dos flechas flotando encima de sus bordes */
.pista{position:relative}
/* Naranjas de entrada, no solo al pasar el mouse. Antes eran círculos
   blancos con la flecha oscura y en el celular —donde no hay mouse— nunca
   llegaban a verse de color. */
.flecha{position:absolute;top:52px;z-index:5;
  width:32px;height:32px;border-radius:50%;border:0;
  background:var(--acento);color:var(--sobre-acento);font-size:1.25rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(16,24,40,.2);transition:opacity .15s}
.flecha.izq{left:-13px}
.flecha.der{right:-13px}
.flecha:hover{background:var(--acento-toque);color:var(--sobre-acento)}
.flecha:disabled{opacity:0;pointer-events:none}

.fila{display:flex;gap:.55rem;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;padding-bottom:.2rem}
.fila::-webkit-scrollbar{display:none}
.fila .prod{flex:none;width:var(--tarjeta)}

/* Al expandir, la fila se vuelve rejilla y aparece el resto de la zona */
.seccion.abierta .fila,
.resto{display:grid;gap:.55rem;overflow:visible;
  grid-template-columns:repeat(auto-fill,minmax(var(--tarjeta),1fr))}
.seccion.abierta .fila .prod{width:auto}
.resto{margin-top:.55rem}
/* `display:grid` de arriba le gana al atributo hidden por especificidad:
   sin esta línea, "Ver menos" cierra la sección en el código pero los
   productos siguen en pantalla y parece que el botón no hace nada. */
.resto[hidden]{display:none}

/* ── "Ver más", debajo de los productos ── */
.pie-seccion{display:flex;justify-content:center;margin-top:.85rem}
.expandir{background:var(--fondo);border:1px solid var(--linea);color:var(--acento);
  font-weight:700;font-size:.82rem;cursor:pointer;padding:.55rem 1.4rem;
  border-radius:99px;transition:background .15s}
.expandir:hover{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}

/* ── Tarjeta compacta ── */
/* Caja ligera estilo «app»: fondo blanco, borde apenas visible, esquinas
   redondeadas y una sombra suave que la despega del fondo. Antes la foto iba
   suelta; Jorge vio una maqueta con tarjeta y le gustó más. Se cuidó que la
   caja sea DELGADA (poco relleno) para no perder la densidad del celular. */
.prod{position:relative;background:var(--fondo);border:1px solid var(--linea);
  border-radius:14px;padding:.3rem .4rem .45rem;
  box-shadow:0 5px 14px rgba(25,22,15,.06);
  transition:box-shadow .15s ease,transform .15s ease}
.prod:hover{box-shadow:0 9px 22px rgba(25,22,15,.11);transform:translateY(-1px)}
/* La foto en su propio recuadro claro: le da el aire de «tarjeta de app» y
   hace que una pieza chica no se pierda sobre tanto blanco. */
.prod-foto{height:var(--foto-alto,104px);border-radius:10px;
  background:linear-gradient(160deg,#ffffff 0%,#f1f3f4 100%);border:0;
  display:flex;align-items:center;justify-content:center;padding:.15rem}
.prod-foto img{max-height:100%;width:auto;object-fit:contain;
  /* Una sombra apenas perceptible: es lo que hace que se vea posada sobre la
     página y no pegada encima. */
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.10))}
/* Alto reservado para dos renglones: sin esto, un nombre corto y uno largo
   dejan sus precios a distinta altura y la fila se ve chueca. */
/* El aire de arriba es para el botón +, que ahora sobresale de la foto:
   sin él se le monta a la primera línea del nombre. */
.prod h3{font-size:.72rem;font-weight:400;margin:.5rem 0 .15rem;line-height:1.25;
  min-height:1.8rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Casi siempre va vacía —solo habla cuando queda poco o se agotó—, pero ocupa
   su lugar igual para que el precio no brinque entre una tarjeta y otra. */
.tecnico{display:flex;align-items:center;gap:.25rem;font-size:.64rem;margin-bottom:.1rem;
  min-height:.95rem}
.dato-med{background:var(--suave);padding:.02rem .28rem;border-radius:3px;font-weight:700}
.dato-exi{margin-left:auto;color:var(--verde);font-weight:700}
/* Era un ámbar oscuro suelto que no era de la casa: al lado del naranja se
   veía como un naranja mal hecho. La advertencia la carga la palabra
   «Quedan pocos», no el color. */
.dato-exi.poco{color:var(--acento-texto)}
.precio{font-weight:800;font-size:.95rem;color:var(--tinta);letter-spacing:-.01em}
.mas{position:absolute;right:.25rem;top:76px;width:26px;height:26px;border-radius:50%;
  background:var(--acento);color:var(--sobre-acento);border:2px solid #fff;font-size:1rem;line-height:1;
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.mas:hover{background:var(--acento-toque)}
/* El + lleva el mismo color que el resto de la letra sobre naranja, en todas
   sus formas: el chiquito de la tarjeta, el de la ficha y el de subir
   cantidad. Se dice aquí y no en cada regla, porque si una se olvida el signo
   se pierde sobre el naranja. Decía #fff a mano y por eso se le escapó al
   cambio: una regla suelta le gana a la del botón por ser más específica. */
.mas, .ctrl .mas, .btn-grande.mas, .comprar .mas { color:var(--sobre-acento) }
/* «Ya está en tu carrito» era verde. Como el verde se fue de toda la tienda,
   ahora se distingue en negro: si se quedara naranja se vería idéntico a un
   producto que todavía no agregaste. */
.mas.puesto{background:var(--barra);color:#fff}

/* El corazón para guardar el producto (favoritos). Arriba a la izquierda de la
   foto, del lado contrario al +. Vacío = contorno; guardado = rojo lleno. */
.corazon{position:absolute;top:.4rem;left:.4rem;z-index:4;width:32px;height:32px;padding:0;border:0;
  border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 5px rgba(0,0,0,.18);
  cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.corazon svg{width:19px;height:19px;fill:none;stroke:#b7b0a3;stroke-width:2;transition:transform .12s}
.corazon.puesto svg{fill:var(--rojo,#e8391f);stroke:var(--rojo,#e8391f)}
.corazon:active svg{transform:scale(.82)}
@media (max-width:760px){ .corazon{width:34px;height:34px} .corazon svg{width:20px;height:20px} }

/* ── Columna 3 · carrito fijo ── */
.carro{border-left:1px solid var(--linea);position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;background:var(--suave)}
.carro-cab{padding:.85rem 1rem;border-bottom:1px solid var(--linea);
  display:flex;align-items:center;gap:.5rem;background:var(--fondo)}
.carro-cab strong{font-size:.92rem}
.carro-cuenta{margin-left:auto;background:var(--acento);color:var(--sobre-acento);border-radius:99px;
  min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;padding:0 .35rem}
.carro-lista{flex:1;overflow-y:auto;padding:.6rem}
.carro-vacio{color:var(--gris);font-size:.82rem;text-align:center;padding:2rem .5rem;
  line-height:1.5}
.carro-vacio small{font-size:.74rem;opacity:.8}
.reng{display:flex;gap:.5rem;align-items:center;background:var(--fondo);
  border-radius:8px;padding:.45rem;margin-bottom:.4rem}
.reng-txt{flex:1;min-width:0}
.reng-txt b{display:block;font-size:.75rem;font-weight:500;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reng-txt span{font-size:.72rem;color:var(--gris)}
.reng-cant{display:flex;align-items:center;gap:.25rem}
.reng-cant button{width:20px;height:20px;border-radius:50%;border:1px solid var(--linea);
  background:var(--fondo);cursor:pointer;font-size:.8rem;line-height:1}
.reng-cant b{font-size:.78rem;min-width:16px;text-align:center}
.carro-pie{border-top:1px solid var(--linea);padding:.75rem 1rem;background:var(--fondo)}
.carro-envio{font-size:.74rem;color:var(--gris);margin-bottom:.4rem}
.carro-envio.gratis{color:var(--verde);font-weight:700}
.carro-total{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:.6rem}
.carro-total strong{font-size:1.25rem}
.carro-btn{width:100%;background:var(--acento);color:var(--sobre-acento);border:0;padding:.7rem;
  border-radius:8px;font-weight:700;font-size:.88rem;cursor:pointer}
.carro-btn:disabled{background:var(--linea);color:var(--gris);cursor:default}

@media (max-width:1100px){
  .marco3{grid-template-columns:180px 1fr}
  .carro{position:fixed;right:0;top:0;width:280px;z-index:100;
    transform:translateX(100%);transition:transform .25s;box-shadow:-4px 0 18px rgba(0,0,0,.12)}
  .carro.abierto{transform:none}
}
@media (max-width:760px){
  .marco3{grid-template-columns:1fr}
  .lado{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   Páginas interiores: listados, zona, ficha de producto.
   Comparten el marco de tres columnas con la portada.
   ═══════════════════════════════════════════════════════════════ */

.pagina{padding:1.1rem 1rem 0}
.miga{font-size:.76rem;color:var(--gris);margin-bottom:.75rem}
.miga a:hover{color:var(--acento-texto)}
.marca{display:block}

.lado a.activa{background:var(--acento);color:var(--sobre-acento);font-weight:600}
.lado a.activa em{color:rgba(255,255,255,.75)}

/* ── Cabecera: buscador con sugerencias ── */
.cab{display:flex;gap:.6rem;align-items:center}
.cab form{flex:1;position:relative}
/* El color se pone aquí a fuerza: el cajón cuelga de la barra, que es oscura
   y tiene la letra blanca. Sin esto, el nombre del producto salía blanco
   sobre el fondo blanco del panel —invisible, sin error en ningún lado—. */
.sugerencias{position:absolute;top:calc(100% + 5px);left:0;right:0;background:#fff;
  color:var(--tinta,#211d17);
  border:1px solid var(--linea);border-radius:10px;
  box-shadow:0 10px 28px rgba(16,24,40,.16);overflow:hidden;z-index:60}
.sugerencias a{display:flex;gap:.6rem;align-items:center;padding:.5rem .7rem;
  border-bottom:1px solid var(--linea)}
.sugerencias a:last-child{border-bottom:0}
.sugerencias a:hover{background:var(--suave)}
.sugerencias img{width:32px;height:32px;object-fit:contain;flex:none}
.sug-nombre{flex:1;font-size:.84rem;line-height:1.25}
.sug-precio{font-weight:700;font-size:.82rem;color:var(--acento-texto)}
/* Las búsquedas del cajón: la lupa donde va la foto del producto, para que
   las dos clases de renglón queden alineadas y se distingan de un vistazo. */
.sug-lupa{width:18px;height:18px;flex:none;margin:0 7px;color:var(--gris)}
.sug-hueco{width:32px;flex:none}
.sug-busca .sug-nombre{color:var(--gris)}
.sug-busca .sug-nombre b{color:var(--texto);font-weight:700}
.sug-hist-tit{display:flex;align-items:center;justify-content:space-between;
  padding:.45rem .7rem;font-size:.72rem;letter-spacing:.03em;color:var(--gris);
  text-transform:uppercase;border-bottom:1px solid var(--linea)}
.sug-borrar{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--acento-texto);text-transform:none;letter-spacing:0}
.abrir-carro{display:none;background:var(--acento);color:var(--sobre-acento);border:0;
  padding:.55rem .9rem;border-radius:8px;font-weight:600;font-size:.84rem;cursor:pointer}
.pastilla{background:rgba(0,0,0,.22);border-radius:99px;padding:.05rem .4rem;
  font-size:.74rem;margin-left:.2rem}
.cerrar-carro{display:none;background:none;border:0;font-size:1.35rem;line-height:1;
  cursor:pointer;color:var(--gris);margin-left:.25rem}

/* ── Filtros y rejilla ── */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem}
.chip{background:var(--fondo);border:1px solid var(--linea);border-radius:99px;
  padding:.3rem .75rem;font-size:.78rem}
.chip em{font-style:normal;font-size:.7rem;color:var(--gris)}
.chip:hover{border-color:var(--acento)}
.chip.activo{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}
.chip.activo em{color:rgba(255,255,255,.75)}
.barra-orden{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  justify-content:space-between;margin-bottom:.9rem}
.barra-orden .chips{margin-bottom:0}

.rejilla{display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fill,minmax(var(--tarjeta),1fr))}
/* El producto que todavía no tiene foto. Llena el hueco en vez de dejarlo
   vacío: el hueco no se puede quitar porque es lo que mantiene derechos los
   precios de toda la fila, pero vacío la tarjeta se lee como rota. */
.sin-foto{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;width:100%;height:100%;border-radius:.6rem;
  background:var(--suave);color:var(--gris);text-align:center;padding:.4rem}
.sin-foto svg{width:38%;max-width:3.2rem;height:auto;opacity:.32}
.sin-foto em{font-style:normal;font-size:.66rem;line-height:1.2;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sin-foto.grande{font-size:.9rem}
.sin-foto.grande svg{max-width:6rem}
.sin-foto.grande em{font-size:.95rem}

/* ── Que se sienta app y no página ────────────────────────────────────────
   Jorge, 23-sep, con la tienda instalada: mantuvo apretado un producto y le
   salió el menú del navegador —«Copiar dirección del vínculo», «Descargar
   imagen», «Abrir en el navegador Chrome»—. Es lo único que la delataba: en una
   app de verdad, tener apretado un producto no hace eso.

   Se apaga SOLO en las tarjetas del catálogo y en la barra de arriba, que es
   donde el dedo pasa todo el rato y donde ese menú no sirve para nada. En la
   ficha del producto NO se apaga a propósito: ahí están el nombre completo, la
   clave y las medidas, y copiar eso para mandarlo por WhatsApp es de las cosas
   que más se hacen en una ferretería.

   El resplandor gris del toque también se va —es otra marca de navegador—, pero
   a cambio la tarjeta responde al dedo con `:active`: sin nada, se siente
   muerta y uno pica dos veces creyendo que no agarró. */
.prod a, .prod img, .barra, .chips, .ctrl{
  -webkit-touch-callout:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
/* NINGUNA foto de la tienda abre el menú de «guardar/compartir» al dejarla
   apretada: se siente app y las fotos no se andan bajando. En iOS lo apaga
   `touch-callout`; en Android hace falta además bloquear el evento (va en JS). */
main img, .barra-marca img{-webkit-touch-callout:none;
  -webkit-user-drag:none; user-drag:none}
.prod img{-webkit-user-drag:none; user-drag:none}
.prod a:active{opacity:.65}
.ctrl button:active{transform:scale(.92)}

/* ── El celular: tres por fila y la foto cuadrada ─────────────────────────
   Jorge, 23-sep, viendo la tienda ya instalada en su teléfono: «todo se ve muy
   grande, los productos no se ven bien proporcionados».

   Eran las dos cosas a la vez. En un teléfono de 375 la tarjeta medía 171 de
   ancho y el hueco de la foto 171 × 104 —un rectángulo acostado—. Casi todo lo
   que vende MAFE es alto o cuadrado: brocas, coples, tubos, llaves. El producto
   llenaba nada más la franja de en medio y quedaban 35 px de vacío a cada lado.
   La tarjeta grande y el producto chiquito adentro.

   Ahora son tres por fila —se ven seis productos sin bajar en vez de cuatro— y
   el hueco es CUADRADO a cualquier ancho de teléfono, porque el alto de la foto
   se calcula del ancho de la columna: el ancho de la pantalla menos los 24 px
   de margen de la página y los dos huecos de 7.2, entre tres. Da 112 en un
   iPhone SE y 131 en un Pro Max, que es exactamente lo que mide la tarjeta.

   Se CALCULA y no se escribe a mano porque `--foto-alto` también coloca el
   botón + (`.ctrl`, que se para en `--foto-alto` menos 40). Un número fijo lo
   dejaría flotando fuera de la foto en la mitad de los teléfonos.

   Las columnas van fijas en 3 y no en `auto-fill`: la cuenta de arriba divide
   entre tres, así que el acomodo tiene que dar tres o la foto deja de ser
   cuadrada. */
@media (max-width:480px){
  /* `html:root` y no `:root` a propósito. Lo que Jorge mueve en el diseñador se
     escribe como un <style> DENTRO de la página, con `:root{--tarjeta:118px;
     --foto-alto:104px;…}`. Al ir después de esta hoja, le gana por orden: la
     primera versión de esta regla no hacía nada y la foto seguía saliendo
     acostada. `html:root` pesa más que `:root`, así que gana sin importar el
     orden —y solo aquí dentro, en el celular—. En la Mac mandan sus valores,
     que para eso los escogió. */
  html:root{
    --tarjeta:calc((100vw - 38.4px) / 3);
    /* La foto MÁS BAJA que ancha (72% del ancho). Las piezas de ferretería son
       chicas y en un cuadro completo quedaban perdidas en tanto blanco, y eran
       muy grandes para el celular. Más baja: aprieta las tarjetas y en la misma
       pantalla caben más productos y más secciones. */
    --foto-alto:calc((100vw - 38.4px) / 3 * 0.72);
  }
  .rejilla,.seccion.abierta .fila,.resto{
    grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .prod h3{font-size:.66rem;margin-top:.45rem}
  .precio{font-size:.84rem}
  /* Las categorías de arriba eran de 96px: en el celular cabían tres y media y
     había que arrastrar mucho para ver el resto. A 68px caben cinco de un
     vistazo, así se ve todo lo que vende la tienda sin tanto arrastre. */
  .tira{width:68px}
  .tira-foto{width:68px;height:68px}
  .tira-foto img{max-height:64px}
  .tira span,.tira b{font-size:.62rem}
}
.dato-exi.agotado{color:var(--gris)}
.dato-exi.sobre-pedido{color:var(--acento-texto,#c85a00);font-weight:700}
.mas:disabled{background:var(--linea);color:var(--gris);cursor:not-allowed}

.paginacion{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1.5rem 0}
.paginacion a{background:var(--fondo);border:1px solid var(--linea);border-radius:8px;
  padding:.5rem 1rem;font-size:.84rem;font-weight:600;color:var(--acento-texto)}
.paginacion a:hover{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}
.pag-actual{color:var(--gris);font-size:.82rem}

.vacio{text-align:center;padding:2.5rem 1rem;color:var(--gris)}
.pista-txt{font-size:.86rem;margin-top:.4rem}
.pista-txt em{color:var(--acento-texto);font-style:normal;font-weight:600}

/* ── Familias de una zona ── */
.rejilla-familias{display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:1.5rem}
/* Sin caja ni borde, igual que las de la portada. Aquí en las zonas eran
   tarjetas blancas con marco; al lado de las que ya flotaban, se veían de
   otra tienda. La línea del texto también se va: sin caja no separa nada,
   solo estorba. */
.familia-tarjeta{background:none;border:0;border-radius:0}
.familia-tarjeta:hover .familia-foto{transform:translateY(-3px) scale(1.04)}
.familia-tarjeta:hover .familia-texto strong{color:var(--acento-texto)}
/* Flotando, como todas. Estas viven en las pantallas de zona, así que desde
   la portada no se veían y se quedaron con su recuadro cuando el resto ya lo
   había perdido. */
.familia-foto{aspect-ratio:1.5;display:flex;align-items:center;justify-content:center;
  padding:.5rem;background:none;transition:transform .15s}
.familia-foto img{max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.10))}
.familia-texto{padding:.5rem .15rem 0;text-align:center}
.familia-texto strong{display:block;font-size:.82rem;line-height:1.25}
.familia-texto em{font-style:normal;font-size:.72rem;color:var(--gris)}

/* ── Ficha de producto ── */
.ficha{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;background:var(--fondo);
  border:1px solid var(--linea);border-radius:12px;padding:1.5rem;margin-bottom:1.25rem}
.ficha-foto{display:flex;align-items:center;justify-content:center;min-height:240px}
.ficha-foto img{max-height:320px;width:auto;object-fit:contain}
.marca-chica{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acento-texto);font-weight:700}
.ficha-datos h1{font-size:1.35rem;margin:.25rem 0 .5rem;line-height:1.3}
.resumen{color:var(--gris);font-size:.88rem;margin:0 0 1rem}
.precio-caja{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.4rem}
.precio-grande{font-size:2rem;font-weight:800;color:var(--acento)}
.por-unidad{color:var(--gris);font-size:.82rem}
.existencia{font-size:.86rem;font-weight:600;margin:.2rem 0 1rem}
.existencia.hay{color:var(--verde)}
.existencia.no-hay{color:var(--rojo)}
.comprar{display:flex;gap:.6rem;margin-bottom:1.25rem}
.comprar input{width:76px;padding:.6rem;border:1px solid var(--linea);border-radius:8px;
  font-size:15px;text-align:center}
.btn-grande{position:static;width:auto;height:auto;flex:1;border-radius:8px;
  padding:.7rem;font-size:.92rem;font-weight:700;border:0;box-shadow:none}
.datos-rapidos{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;
  font-size:.84rem;margin:0 0 1rem;padding-top:1rem;border-top:1px solid var(--linea)}
.datos-rapidos dt{color:var(--gris)}
.datos-rapidos dd{margin:0;font-weight:500}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
.nota{color:var(--gris);font-size:.76rem;font-weight:400}
.liga-ficha{display:inline-block;border:1px solid var(--acento);color:var(--acento-texto);
  padding:.5rem .9rem;border-radius:8px;font-size:.82rem;font-weight:600}
.liga-ficha:hover{background:var(--acento);color:var(--sobre-acento)}

.bloque-info{background:var(--fondo);border:1px solid var(--linea);border-radius:12px;
  padding:1.1rem 1.35rem;margin-bottom:1rem}
.bloque-info h2{font-size:1rem;margin:0 0 .6rem}
.lista-caracs{margin:0;padding-left:1.1rem;font-size:.86rem}
.lista-caracs li{margin-bottom:.25rem}
.tabla-specs{width:100%;border-collapse:collapse;font-size:.84rem}
.tabla-specs th{text-align:left;padding:.45rem .6rem;background:var(--suave);
  color:var(--gris);font-weight:600;width:45%;border-radius:4px}
.tabla-specs td{padding:.45rem .6rem;border-bottom:1px solid var(--linea)}

/* ── Pie ── (el diseño completo del pie vive más abajo, junto a .pie-cols) */

@media (max-width:1100px){
  .abrir-carro,.cerrar-carro{display:block}
}
@media (max-width:760px){
  .ficha{grid-template-columns:1fr;padding:1rem;gap:1.25rem}
  .pagina{padding:.85rem .75rem 0}
  /* Al apilarse, la foto se comía la pantalla completa y el precio y el botón
     de comprar quedaban abajo del doblez: se entraba a la ficha y no se veía
     ni cuánto cuesta. */
  .ficha-foto{min-height:0}
  .ficha-foto img{max-height:32vh}
}

/* ═══════════════════════════════════════════════════════════════
   Checkout y confirmación de pedido
   ═══════════════════════════════════════════════════════════════ */

/* El cierre va por pasos: una sola columna angosta, centrada, se ve igual de
   bien en el celular que en la compu. Cada paso se enseña por su cuenta. */
.checkout{max-width:480px;margin:0 auto}
.ck-caja{background:var(--fondo);border:1px solid var(--linea);border-radius:12px;
  padding:1.1rem 1.25rem;margin-bottom:1rem}
.ck-caja h3{font-size:.95rem;margin:0 0 .85rem;font-weight:700}
.ck-campo{margin-bottom:.75rem}
/* Solo la etiqueta DIRECTA del campo (ej. «¿Qué día te lo llevamos?»), no los
   <label> de las tarjetas de opción (.ck-opcion) que viven anidados dentro: si
   no se acota con «>», este display:block le gana a .ck-opcion{display:flex} por
   especificidad y las tarjetas salen apiladas y desalineadas. */
.ck-campo > label{display:block;font-size:.82rem;font-weight:600;margin-bottom:.25rem}
.ck-campo > label em{font-style:normal;font-weight:400;color:var(--gris)}
.ck-campo input,.ck-campo textarea{width:100%;border:1px solid var(--linea);
  border-radius:8px;padding:.55rem .7rem;font-size:16px;background:#fff}
.ck-campo input:focus,.ck-campo textarea:focus{outline:2px solid var(--acento);
  outline-offset:-1px}
.ck-campo textarea{resize:vertical;line-height:1.5}
.ck-dos{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}

.ck-opciones{display:grid;gap:.5rem;margin-bottom:.75rem}
/* Las opciones son botones, no texto: al tocarlas no se subraya nada (Jorge, 16-oct). */
.ck-opcion,.ck-dia,.ck-nav button{user-select:none;-webkit-user-select:none}
.ck-opcion{display:flex;gap:.65rem;align-items:flex-start;border:1px solid var(--linea);
  border-radius:10px;padding:.7rem .85rem;cursor:pointer;background:#fff}
.ck-opcion:has(input:checked){border-color:var(--acento);
  box-shadow:0 0 0 1px var(--acento) inset}
/* El radio NO debe heredar el `width:100%`, el borde ni el padding de
   `.ck-campo input` (las opciones de día/hora viven dentro de un .ck-campo): si
   los hereda, el radio se estira a lo ancho y empuja el texto a la derecha. */
.ck-opcion input{margin-top:.2rem;accent-color:var(--acento);
  width:auto;flex:none;border:0;padding:0;min-width:0}
.ck-opcion strong{display:block;font-size:.88rem}
.ck-opcion em{font-style:normal;font-size:.8rem;color:var(--gris)}
.ck-opcion-off{opacity:.45;cursor:not-allowed}
/* «Prefiero otro día»: suelta las fechas concretas. Discreto a propósito —no
   compite con «lo antes posible», solo está ahí para quien lo busca—. */
.ck-otro-dia{background:none;border:0;color:var(--acento);font:inherit;
  font-size:.85rem;font-weight:600;cursor:pointer;padding:.35rem .1rem;
  text-align:left;text-decoration:underline;text-underline-offset:3px}
.ck-otro-dia:hover{opacity:.8}
.ck-nota{font-size:.78rem;color:var(--gris);margin:.5rem 0 0;line-height:1.45}

/* Resumen: ya no va pegado a un lado, ahora es parte del último paso. */
.ck-resumen{margin:0}
.ck-linea{display:flex;gap:.6rem;align-items:center;padding:.5rem 0;
  border-bottom:1px solid var(--linea)}
/* Sin recuadro, como todas las demás. Era el último cuadrito blanco que
   quedaba y en el resumen del pedido cantaba distinto al resto. */
.ck-foto{width:40px;height:40px;flex:none;background:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ck-foto img{max-height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}
.ck-txt{flex:1;min-width:0}
.ck-txt b{display:block;font-size:.8rem;font-weight:500;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ck-txt span{font-size:.76rem;color:var(--gris)}
.ck-encargo{display:inline-block;margin-top:.15rem;font-size:.72rem;font-weight:600;
  color:var(--naranja,#FF7B01)}
.ck-encargo-aviso{background:#fff4e5;border:1px solid #ffd9a0;border-radius:8px;
  padding:.5rem .7rem;font-size:.8rem;color:#7a4a00;margin:.5rem 0 0}
.ck-imp{font-weight:700;font-size:.85rem;white-space:nowrap}
.ck-cargando,.ck-vacio{color:var(--gris);font-size:.85rem;text-align:center;
  padding:1.25rem 0}
.ck-liga{color:var(--acento-texto);font-weight:600}
.ck-liga:hover{text-decoration:underline}

.ck-aviso{background:#fff4e5;border:1px solid #ffd9a0;border-radius:8px;
  padding:.6rem .75rem;margin:.6rem 0;font-size:.79rem;line-height:1.45;color:#7a4b00}
.ck-aviso div+div{margin-top:.3rem}

.ck-totales{margin:.85rem 0 1rem;font-size:.86rem}
.ck-totales div{display:flex;justify-content:space-between;padding:.22rem 0}
.ck-totales dt{color:var(--gris);margin:0}
.ck-totales dd{margin:0;font-weight:600}
.ck-total{border-top:1px solid var(--linea);margin-top:.35rem;padding-top:.5rem!important}
.ck-total dt{color:var(--tinta)!important;font-weight:700}
.ck-total dd{font-size:1.25rem;font-weight:800;color:var(--acento)}

.ck-btn{width:100%;background:var(--acento);color:var(--sobre-acento);border:0;padding:.8rem;
  border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;
  display:block;text-align:center}
.ck-btn:hover:not(:disabled){background:var(--acento-toque)}
.ck-btn:disabled{background:var(--linea);color:var(--gris);cursor:not-allowed}
.ck-btn.wa{background:#25d366;max-width:280px;margin:0 auto 1rem}
.ck-btn.wa:hover{background:#1eb855}

/* ── Cierre por pasos: barra de avance, navegación y deslizador ── */
.ck-pasos{max-width:480px;margin:0 auto 1rem}
/* Antes de que checkout-pasos.js arranque, solo se ve el paso 1: sin esto el
   formulario completo aparecía un instante y luego se partía en pasos. */
html:not(.pasos-listo) [data-paso]:not([data-paso="1"]){display:none}
.ck-barra{display:flex;gap:.4rem;margin-bottom:.5rem}
.ck-barra i{flex:1;height:6px;border-radius:99px;background:var(--linea)}
.ck-barra i.on{background:var(--acento)}
.ck-paso-txt{font-size:.82rem;font-weight:700;color:var(--gris);margin:0}

.ck-nav{max-width:480px;margin:0 auto 2rem;display:flex;gap:.75rem}
.ck-nav-sig,.ck-nav-atras{border-radius:10px;padding:.85rem 1rem;font-weight:700;
  font-size:.95rem;cursor:pointer;font-family:inherit;border:0}
.ck-nav-sig{flex:1;background:var(--acento);color:var(--sobre-acento);
  box-shadow:0 6px 16px rgba(255,123,1,.28)}
.ck-nav-sig:hover{background:var(--acento-toque)}
.ck-nav-atras{flex:0 0 auto;background:#fff;border:1px solid var(--linea);color:var(--tinta)}
.ck-nav-atras:hover{border-color:var(--acento)}

/* Deslizar para confirmar: da seguridad y no se pica sin querer. Por dentro
   maneja el mismo botón [data-confirmar] de siempre. */
.ck-slide{position:relative;height:56px;border-radius:999px;background:var(--acento);
  overflow:hidden;user-select:none;margin:.25rem 0 1rem;
  box-shadow:0 6px 16px rgba(255,123,1,.3)}
.ck-slide.off{background:var(--linea);box-shadow:none}
.ck-slide.lista{background:#1f9d54}
.ck-slide-txt{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:800;font-size:.92rem;pointer-events:none}
.ck-slide.off .ck-slide-txt{color:var(--gris)}
.ck-slide-bola{position:absolute;left:5px;top:5px;width:46px;height:46px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;color:var(--acento);
  font-size:1.3rem;font-weight:800;z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.2);
  touch-action:none;cursor:grab}
.ck-slide.off .ck-slide-bola{cursor:not-allowed;color:var(--gris)}

/* En la COMPUTADORA deslizar con el mouse es incómodo: ahí se esconde el
   deslizador y se usa el botón normal de clic. En el CELULAR (dedo) se queda el
   deslizador. Se decide por el tipo de puntero —una laptop con mouse ve el
   botón, un teléfono ve el deslizador— y no por el ancho, para que una ventana
   angosta en la compu no saque el deslizador que aquí no se puede arrastrar. */
.ck-btn[data-confirmar]{display:none}
@media (hover:hover) and (pointer:fine){
  .ck-slide[data-slide]{display:none}
  .ck-btn[data-confirmar]{display:block}
}

/* Puente a la pasarela: pantalla de MAFE antes de saltar a pagar con tarjeta */
.ck-puente{position:fixed;inset:0;z-index:9999;background:var(--fondo);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  animation:ck-puente-in .2s ease}
@keyframes ck-puente-in{from{opacity:0}to{opacity:1}}
.ck-puente-caja{text-align:center;max-width:330px}
.ck-puente-logo{width:92px;height:32px;color:var(--acento);display:block;margin:0 auto .6rem}
.ck-puente-lock{width:30px;height:30px;color:var(--acento);margin:.2rem 0 .7rem}
.ck-puente-caja b{display:block;font-size:1.12rem;color:var(--tinta);margin-bottom:.4rem}
.ck-puente-caja span{display:block;font-size:.86rem;color:var(--gris);line-height:1.5}
.ck-puente-barra{margin:1.3rem auto 0;width:180px;height:5px;border-radius:99px;
  background:var(--linea);overflow:hidden}
.ck-puente-barra i{display:block;height:100%;width:0;border-radius:99px;
  background:var(--acento);animation:ck-puente-corre 1.3s ease forwards}
@keyframes ck-puente-corre{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){
  .ck-puente-barra i{animation:none;width:100%}
}

/* Confirmación */
.ck-confirmado{text-align:center;padding:2rem 1rem 1.5rem}
.ck-palomita{width:64px;height:64px;border-radius:50%;background:var(--verde);
  color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem}
.ck-confirmado h2{font-size:1.5rem;margin:0 0 .5rem}
.ck-confirmado p{color:var(--gris);font-size:.9rem;margin:0 auto 1.25rem;max-width:420px;
  line-height:1.55}
.ck-tabla{width:100%;border-collapse:collapse;font-size:.86rem}
.ck-tabla td{padding:.45rem 0;border-bottom:1px solid var(--linea)}
.ck-tabla td:first-child{width:40px;color:var(--gris);font-weight:600}
.ck-tabla .der{text-align:right;font-weight:600;white-space:nowrap}
.ck-medida{background:var(--suave);padding:.02rem .3rem;border-radius:4px;
  font-size:.76rem;font-weight:600}
.ck-datos{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;
  font-size:.86rem;margin:0}
.ck-datos dt{color:var(--gris)}
.ck-datos dd{margin:0;font-weight:500}
.ck-estado{background:var(--suave);padding:.1rem .5rem;border-radius:6px;
  font-weight:700;font-size:.8rem}

@media (max-width:820px){
  .ck-dos{grid-template-columns:1fr}
}
.carro-btn{display:block;text-align:center;text-decoration:none}
.carro-btn.apagado{background:var(--linea);color:var(--gris);pointer-events:none}

/* ═══════════════════════════════════════════════════════════════
   Identidad y confianza
   Un cliente que llega por primera vez tiene que saber quién eres,
   cómo localizarte y cuándo le llega. Antes no lo decía en ningún lado.
   ═══════════════════════════════════════════════════════════════ */

/* `.lado a` es flex con space-between y le gana a `.marca` por especificidad:
   sin el selector completo, el nombre y el giro salen en la misma línea. */
.lado a.marca{display:block;padding:.1rem .5rem .5rem;text-decoration:none}
.lado a.marca-tel{display:flex;justify-content:flex-start}
.marca-nombre{display:block;font-size:1.45rem;font-weight:800;color:var(--acento);
  letter-spacing:-.02em;line-height:1.05}
.marca-giro{display:block;font-size:.66rem;color:var(--gris);line-height:1.25;
  margin-top:.1rem}

.marca-tel{display:flex;gap:.45rem;align-items:center;padding:.45rem .5rem;
  margin-bottom:.6rem;border-radius:8px;background:var(--suave);font-size:.75rem;
  font-weight:600;line-height:1.2}
.marca-tel:hover{background:var(--acento);color:var(--sobre-acento)}
.marca-tel:hover em{color:rgba(255,255,255,.8)}
.marca-tel .tel-ico{font-size:.9rem;color:var(--acento-texto)}
.marca-tel:hover .tel-ico{color:#fff}
.marca-tel em{display:block;font-style:normal;font-weight:400;font-size:.66rem;
  color:var(--gris)}

/* Franja de confianza de la portada */
.franja{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.5rem;padding:.85rem 1rem .35rem}
.fr{display:flex;gap:.55rem;align-items:center;background:var(--suave);
  border-radius:10px;padding:.6rem .75rem;font-size:.76rem;line-height:1.3;
  color:var(--gris)}
.fr-ico{font-size:1.05rem;color:var(--acento-texto);flex:none}
.fr strong{display:block;color:var(--tinta);font-size:.82rem}

/* ── Pie de página profesional ──
   Oscuro, para hacer juego con la barra negra de arriba y cerrar la página
   como tienda seria: una tira de confianza, las secciones ordenadas y una
   barra final limpia. Mismos colores de siempre (negro, naranja, crema). */
.pie{--pie-fondo:#17181c;--pie-tenue:#9aa0a6;
  background:var(--pie-fondo);color:#c7ccd1;margin-top:2rem;padding:0;
  border-top:0;font-size:.84rem;line-height:1.55}

/* Tira de confianza */
.pie-confianza{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:rgba(255,255,255,.08)}
.pie-tc{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;
  background:var(--pie-fondo)}
.pie-tc svg{width:24px;height:24px;color:var(--acento);flex:none}
.pie-tc b{display:block;color:#fff;font-size:.8rem;font-weight:700;line-height:1.25}
.pie-tc span{font-size:.71rem;color:var(--pie-tenue)}

/* Columnas */
.pie-cols{display:grid;grid-template-columns:1fr;gap:1.5rem;
  padding:1.7rem 1.15rem 1.2rem;max-width:960px;margin:0 auto}
.pie-logo{display:inline-flex;align-items:center;gap:.5rem;color:var(--acento);
  font-weight:800;font-size:1.2rem;letter-spacing:.5px}
.pie-logo .marca-casa{width:30px;height:22px}
.pie-marca p{margin:.65rem 0 .85rem;color:var(--pie-tenue)}
.pie-contacto{display:flex;flex-wrap:wrap;gap:.55rem}
.pie-tel,.pie-wa,.pie-fb{display:inline-flex;align-items:center;gap:.4rem;border-radius:9px;
  padding:.5rem .85rem;font-weight:700;font-size:.85rem;text-decoration:none}
.pie-tel{background:rgba(255,255,255,.09);color:#fff}
.pie-tel:hover{background:rgba(255,255,255,.16)}
.pie-wa{background:#25d366;color:#fff}
.pie-wa:hover{background:#1eb855}
.pie-fb{background:#1877f2;color:#fff}
.pie-fb:hover{background:#0f63d6}
.pie-wa svg,.pie-fb svg{width:17px;height:17px}
.pie-sec strong{display:block;color:#fff;font-size:.9rem;font-weight:700;
  margin-bottom:.4rem}
.pie-sec strong+p{margin:0 0 1rem}
.pie-sec p{margin:0;color:var(--pie-tenue)}

/* Barra final */
.pie-abajo{border-top:1px solid rgba(255,255,255,.08);padding:1.15rem;
  max-width:960px;margin:0 auto}
.pie-legal{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-bottom:.7rem}
.pie-legal a{color:#dfe3e7;text-decoration:none;font-size:.8rem}
.pie-legal a:hover{color:var(--acento);text-decoration:underline}
.pie-copy{margin:0;font-size:.72rem;color:var(--pie-tenue);line-height:1.5}

@media (min-width:640px){
  .pie-confianza{grid-template-columns:repeat(4,1fr)}
  .pie-cols{grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
}

/* ── Encabezado de zona ──
   La miga vive fuera de `.pagina` porque abajo ya no hay una rejilla envuelta
   sino secciones a todo lo ancho; sin este margen se pega al buscador. */
.miga{padding:1rem 1rem 0}
.pagina .miga{padding:0}
.cab-zona{justify-content:space-between;align-items:flex-end}
.cab-zona .subtitulo{margin:.1rem 0 0}
.cuenta-zona{font-size:.78rem;color:var(--gris);white-space:nowrap}
/* El "ver los N" de cada familia es un enlace, no un botón que abre en sitio:
   `.expandir` está pensado para <button> y un <a> pierde la caja. */
a.expandir{display:inline-block;text-decoration:none}
.tira-vacia{font-size:1.4rem;color:var(--linea)}

/* ── Filtros del listado ──
   Eran dos hileras de pastillas iguales, una debajo de otra: nada decía que la
   de arriba filtra por pieza y la de abajo ordena. El rótulo las separa. */
.filtro{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.5rem}
.filtro-rotulo{flex:none;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);font-weight:700;padding-top:.4rem;width:3.9rem}
.filtro .chips{margin-bottom:0}
/* El recado de la marca. Va en tono de aviso, no de error: no está mal lo que
   hizo el cliente, nomás le falta dato al catálogo. */
.aviso-marca{font-size:.8rem;color:var(--gris);background:var(--suave);
  border-radius:8px;padding:.55rem .8rem;margin:0 0 .7rem}
.aviso-marca a{color:var(--acento-texto);text-decoration:underline}

/* En el celular las pastillas NO se acomodan en varios renglones: se deslizan
   de lado, como las zonas. Apiladas ocupaban 364 px de una pantalla de 812
   —casi la mitad— y el cliente entraba a la zona sin ver un solo producto.
   El rótulo se sube encima para no robarle ancho a las pastillas. */
@media (max-width:760px){
  .filtro{flex-direction:column;gap:.2rem;margin-bottom:.45rem}
  .filtro-rotulo{padding:0 1rem}
  .filtro .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding:0 1rem .1rem;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
  .filtro .chips::-webkit-scrollbar{display:none}
  /* En una tira que se desliza, la pastilla no se encoge: si se encoge, el
     nombre se parte en dos renglones y «Herr. obra» sale como dos palabras
     apiladas dentro de un círculo. */
  .filtro .chip{flex:none;white-space:nowrap}
}
.barra-orden.filtro{align-items:center}
.miga span{color:var(--tinta)}

/* ── Entrega en la ficha ── */
.entrega{background:var(--suave);border-radius:9px;padding:.65rem .75rem;margin:.9rem 0;
  font-size:.8rem;line-height:1.45}
.entrega p{margin:0}
.entrega strong{color:var(--acento-texto)}
.entrega-pago{color:var(--gris);font-size:.74rem;margin-top:.35rem !important;
  border-top:1px solid var(--linea);padding-top:.35rem}

/* En el checkout el resumen del pedido ya está en la página, y es el bueno:
   viene revalidado por el servidor y con el envío sumado. El carrito lateral
   enseñaba al lado un total distinto —sin envío— y hacía dudar del cobro. */
.marco3.sin-carro{grid-template-columns:196px 1fr}
@media (max-width:1100px){ .marco3.sin-carro{grid-template-columns:180px 1fr} }
@media (max-width:760px){ .marco3.sin-carro{grid-template-columns:1fr} }
.sin-carro .abrir-carro{display:none}

/* ═══════════════════════════════════════════════════════════════
   Celular. La columna lateral no cabe, así que lo suyo se reparte:
   marca y teléfono en una barra, zonas en una tira que se desliza.
   ═══════════════════════════════════════════════════════════════ */
.barra-movil,
.zonas-movil{display:none}

@media (max-width:760px){
  .barra-movil{display:flex;align-items:baseline;justify-content:space-between;
    gap:.75rem;padding:.6rem 1rem .1rem}
  .marca-movil{font-size:1.25rem;font-weight:800;color:var(--acento);
    text-decoration:none;letter-spacing:-.02em}
  .tel-movil{font-size:.78rem;font-weight:700;color:var(--acento-texto);
    text-decoration:none;white-space:nowrap}

  .zonas-movil{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
    padding:.1rem 1rem .6rem;border-bottom:1px solid var(--linea);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .zonas-movil::-webkit-scrollbar{display:none}
  .zonas-movil a{flex:none;font-size:.76rem;text-decoration:none;color:var(--tinta);
    background:var(--suave);border-radius:99px;padding:.3rem .65rem;white-space:nowrap}
  .zonas-movil a.activa{background:var(--acento);color:var(--sobre-acento);font-weight:700}

  /* Cuatro promesas apiladas se comían media pantalla antes del primer
     producto; en dos columnas caben sin empujar el catálogo hacia abajo. */
  .franja{grid-template-columns:1fr 1fr;gap:.4rem;padding:.6rem 1rem}
  .fr{padding:.45rem .5rem;gap:.4rem}
  .fr strong{font-size:.75rem}
  .fr-ico{font-size:.9rem}

  /* El botón dejaba al buscador un hueco donde no cabía ni la primera pista. */
  .abrir-carro-txt{display:none}
}

/* ── Datos para depositar ── */
.deposito{border:2px solid var(--acento)}
.deposito-prueba{background:#fef2f2;border:1px solid #fecaca;color:#b42318;
  border-radius:8px;padding:.55rem .7rem;font-weight:700;font-size:.82rem;margin:0 0 .9rem}
.deposito-intro{font-size:.86rem;color:var(--gris);margin:0 0 .9rem;line-height:1.5}
.deposito-datos{margin:0 0 .9rem}
.deposito-datos > div{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--linea)}
.deposito-datos dt{color:var(--gris);font-size:.82rem}
.deposito-datos dd{margin:0;text-align:right;font-size:.9rem}
.copiable{display:flex;align-items:center;gap:.5rem}
.copiable strong{font-family:ui-monospace,monospace;letter-spacing:.02em}
.mini-copiar{background:var(--suave);border:1px solid var(--linea);border-radius:6px;
  font-size:.72rem;padding:.2rem .5rem;cursor:pointer;color:var(--acento-texto);font-weight:600}
.mini-copiar:hover{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}
.deposito-monto{font-size:1.15rem;color:var(--acento-texto)}
.deposito-ojo{background:var(--suave);border-radius:8px;padding:.55rem .7rem;
  font-size:.82rem;line-height:1.5;margin:0 0 .9rem}

/* ── Simulador de pago (solo mientras no hay cuenta de pasarela) ── */
.simulador{max-width:520px;margin:1.5rem auto;background:var(--fondo);
  border:2px dashed #f59e0b;border-radius:12px;padding:1.5rem;text-align:center}
.simulador-cinta{background:#fef3c7;color:#92400e;font-weight:800;font-size:.76rem;
  letter-spacing:.06em;border-radius:99px;padding:.35rem .9rem;display:inline-block;
  margin:0 0 1rem}
.simulador h2{font-size:1.25rem;margin:0 0 .6rem}
.simulador-txt{font-size:.88rem;color:var(--gris);line-height:1.55;margin:0 0 1rem}
.simulador-datos{text-align:left;margin:0 0 1.2rem}
.simulador-datos > div{display:flex;justify-content:space-between;padding:.4rem 0;
  border-bottom:1px solid var(--linea)}
.simulador-datos dt{color:var(--gris);font-size:.84rem}
.simulador-datos dd{margin:0}
.simulador-botones{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.simulador-botones form{flex:1;min-width:180px}
.simulador-botones .ck-btn{width:100%}
.ck-btn.gris{background:var(--linea);color:var(--tinta)}
.ck-btn.gris:hover{background:#d8d8d8}
.simulador-nota{font-size:.78rem;color:var(--gris);margin:1.2rem 0 0;line-height:1.5}

/* ═══════════════════════════════════════════════════════════════
   El carrito deja de ser una columna fija.

   Vivía abierto ocupando 292px de pantalla aunque estuviera vacío. Ahora es
   un botón arriba a la izquierda y un panel que entra cuando se le pica; el
   catálogo se queda con todo el ancho.
   ═══════════════════════════════════════════════════════════════ */
.marco3{grid-template-columns:var(--lado-ancho,196px) 1fr}

.btn-carro{display:flex;align-items:center;gap:.5rem;width:calc(100% - 1rem);
  margin:.1rem .5rem .75rem;padding:.55rem .7rem;cursor:pointer;
  background:var(--acento);color:var(--sobre-acento);border:0;border-radius:9px;
  font-size:.86rem;font-weight:700;font-family:inherit}
.btn-carro:hover{background:var(--acento-toque)}
.btn-carro-ico{font-size:.95rem}
.btn-carro-txt{flex:1;text-align:left}
.btn-carro .pastilla{background:rgba(255,255,255,.25);color:#fff;border-radius:99px;
  min-width:1.35rem;text-align:center;font-size:.76rem;padding:.05rem .35rem}

/* El panel entra desde la derecha en cualquier tamaño de pantalla. */
.carro{position:fixed;right:0;top:0;bottom:0;width:330px;max-width:88vw;z-index:200;
  transform:translateX(100%);transition:transform .22s ease-out;
  box-shadow:-6px 0 26px rgba(0,0,0,.16)}
.carro.abierto{transform:none}
.cortina{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:150;
  animation:aparece .18s}
@keyframes aparece{from{opacity:0}to{opacity:1}}

@media (max-width:1100px){ .marco3{grid-template-columns:180px 1fr} }
@media (max-width:760px){
  .marco3{grid-template-columns:1fr}
  /* En el celular la barra de la izquierda no se ve, así que el botón del
     carrito se va a la barra de arriba junto a la marca. */
  .barra-movil .btn-carro{width:auto;margin:0;padding:.35rem .6rem;font-size:.78rem}
  .barra-movil .btn-carro-txt{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   Control de cantidad sobre la tarjeta.

   Ocupa el mismo lugar donde estaba el botón +, para que el dedo no tenga que
   buscar otro sitio después de picarle. Cerrado es un círculo; con cantidad
   crece hacia la izquierda a una pastilla − n +, y la tarjeta no se mueve.
   ═══════════════════════════════════════════════════════════════ */
/* El + vive en la esquina de abajo de la FOTO (como en ML/Amazon), no a
   caballo entre la foto y el nombre: ahí se montaba sobre la primera línea
   del nombre en el celular («Lampara Con Ventilador De…» tapado). */
.ctrl{position:absolute;right:.45rem;top:calc(var(--foto-alto,104px) - 40px);z-index:3;
  display:flex;align-items:center;gap:0;
  background:#fff;border-radius:99px;
  box-shadow:0 1px 5px rgba(0,0,0,.16);
  transition:box-shadow .15s}
.ctrl.con-cantidad{box-shadow:0 2px 9px rgba(0,0,0,.2)}

/* Sin nada en el carrito, el − y el número no existen para el ojo. */
.ctrl-menos,.ctrl-n{width:0;opacity:0;overflow:hidden;padding:0;
  transition:width .16s ease-out,opacity .12s}
.ctrl.con-cantidad .ctrl-menos{width:26px;opacity:1}
.ctrl.con-cantidad .ctrl-n{width:24px;opacity:1}

.ctrl-menos{height:34px;border:0;background:none;cursor:pointer;
  color:var(--acento-texto);font-size:1.1rem;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;flex:none}
.ctrl-menos:hover{color:var(--acento-osc)}
.ctrl-n{text-align:center;font-weight:800;font-size:.82rem;color:var(--tinta);
  flex:none;display:flex;align-items:center;justify-content:center;height:34px}
/* El número es un input editable: se toca y se escribe la cantidad. Se le
   quitan el borde, el fondo y las flechitas para que se vea igual que antes. */
input.ctrl-n{-webkit-appearance:none;appearance:none;border:0;background:transparent;
  padding:0;margin:0;outline:none;font-family:inherit;display:block;line-height:34px;
  min-width:0;cursor:text;-webkit-user-select:text;user-select:text;
  -webkit-touch-callout:default}
input.ctrl-n:focus{color:var(--acento-texto)}
input.ctrl-n::-webkit-outer-spin-button,input.ctrl-n::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

/* El + conserva su tamaño y su color: es el mismo botón de siempre. */
.ctrl .mas{position:static;flex:none;width:34px;height:34px;font-size:1.25rem;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}

/* La ficha de producto tiene su propio botón grande; ahí no aplica. */
.comprar .mas{position:static;width:auto;height:auto}

/* En el teléfono el control se toca con el dedo, no con un puntero de un
   pixel: 26px es donde la gente le pica al − y le sale el +. */
@media (max-width:760px){
  /* El control crece a 38px: se para 4px arriba del borde de abajo de la foto
     (que en el celular se calcula, no mide 104), así nunca se monta sobre el
     nombre. Antes era un 66px fijo y tapaba «Niple Galvaniz…». */
  .ctrl{top:calc(var(--foto-alto,104px) - 42px);border-radius:99px;padding:2px}
  .ctrl .mas{width:34px;height:34px;font-size:1.15rem}
  .ctrl-menos{height:34px;font-size:1.35rem}
  .ctrl.con-cantidad .ctrl-menos{width:34px}
  .ctrl.con-cantidad .ctrl-n{width:28px;font-size:.92rem}
  .ctrl-n{height:34px}
}

/* ── Cantidad y total en la ficha ── */
.cant-caja{display:flex;align-items:center;border:1px solid var(--linea);
  border-radius:9px;background:#fff;overflow:hidden;flex:none}
.cant-caja input{width:52px;text-align:center;border:0;font-size:1rem;
  font-weight:700;padding:.5rem 0;-moz-appearance:textfield}
.cant-caja input::-webkit-outer-spin-button,
.cant-caja input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cant-caja input:focus{outline:none}
.cant-btn{width:38px;height:42px;border:0;background:none;cursor:pointer;
  color:var(--acento);font-size:1.25rem;line-height:1;font-family:inherit}
.cant-btn:hover{background:var(--suave)}
.comprar .btn-grande{display:flex;align-items:center;justify-content:center;gap:.6rem}
.comprar .btn-grande strong{font-weight:800}

/* ── El catálogo que sigue ── */
.mas-secciones{display:flex;justify-content:center;padding:1.5rem 1rem 2.5rem}
.mas-secciones .expandir{font-size:.9rem;padding:.6rem 1.6rem}
/* El «Cargando más…» que sale en lugar del botón mientras baja el catálogo.
   Discreto a propósito: si llamara la atención, cada tanda sería un brinco. */
.cargando-mas{text-align:center;color:var(--gris);font-size:.82rem;
  padding:1.2rem 0;margin:0}

.fin-catalogo{color:var(--gris);font-size:.86rem;text-align:center;margin:0}
/* La zona a la que pertenece la fila: "Conexiones CPVC" solo no ubica. */
.seccion-zona{font-size:.76rem;color:var(--gris);text-decoration:none;
  background:var(--suave);border-radius:99px;padding:.15rem .6rem}
.seccion-zona:hover{background:var(--acento);color:var(--sobre-acento)}

/* ── Puerta del modo privado ── */
.puerta{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;min-height:100vh;background:var(--suave);padding:1.5rem}
.puerta-caja{background:var(--fondo);border-radius:14px;padding:2.2rem;max-width:380px;
  width:100%;box-shadow:0 12px 40px rgba(0,0,0,.10);text-align:center}
.puerta-marca{font-size:2rem;font-weight:800;color:var(--acento-texto);letter-spacing:-.02em}
.puerta-giro{font-size:.76rem;color:var(--gris);margin:.1rem 0 1.6rem}
.puerta-caja h1{font-size:1.2rem;margin:0 0 .5rem}
.puerta-txt{font-size:.86rem;color:var(--gris);line-height:1.5;margin:0 0 1.2rem}
.puerta-error{background:#fef2f2;color:#b42318;border-radius:8px;padding:.5rem;
  font-size:.82rem;margin:0 0 .9rem}
.puerta-caja input{width:100%;border:1px solid var(--linea);border-radius:9px;
  padding:.7rem .9rem;font-size:1rem;text-align:center;margin-bottom:.7rem}
.puerta-caja input:focus{outline:2px solid var(--acento);outline-offset:-1px}
.puerta-caja button{width:100%;background:var(--acento);color:var(--sobre-acento);border:0;
  border-radius:9px;padding:.75rem;font-size:.95rem;font-weight:700;cursor:pointer;
  font-family:inherit}
.puerta-caja button:hover{background:var(--acento-toque)}
.puerta-pie{font-size:.78rem;color:var(--gris);margin:1.4rem 0 0}
/* El nombre legal del responsable (lo exige Meta para verificar el dominio). Va
   DEBAJO de la tarjeta y centrado: antes, sin estilo y como hermano del flex, se
   plantaba a un lado y descentraba la tarjeta. */
.puerta-legal{font-size:.72rem;color:var(--gris);text-align:center;max-width:380px;
  margin:0;line-height:1.5}

/* ── Cinta de la copia de pruebas ── */

/* ═══════════════════════════════════════════════════════════════
   MODO DISEÑADOR — solo existe en la copia de pruebas.
   ═══════════════════════════════════════════════════════════════ */

/* ── Quién recibe ── */
.quien-recibe{display:flex;gap:.45rem;flex-wrap:wrap;margin:.3rem 0 .6rem}
.recibe-chip{background:var(--suave);border:2px solid transparent;border-radius:9px;
  padding:.4rem .7rem;cursor:pointer;text-align:left;font-family:inherit;min-width:110px}
.recibe-chip:hover{background:var(--linea)}
.recibe-chip.activa{border-color:var(--acento);background:var(--fondo)}
.recibe-chip b{display:block;font-size:.8rem}
.recibe-chip em{font-size:.72rem;color:var(--gris);font-style:normal}
.ck-dos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ck-dos input{border:1px solid var(--linea);border-radius:9px;padding:.5rem .7rem;
  font:inherit;font-size:.88rem}
.ck-ayuda{font-size:.76rem;color:var(--gris);margin:.35rem 0 0;line-height:1.4}
@media (max-width:600px){ .ck-dos{grid-template-columns:1fr} }

/* ── Textos legales ── */
.legal{max-width:70ch}
.legal h1{font-size:1.5rem;margin:0 0 .3rem}
.legal h2{font-size:1rem;margin:1.6rem 0 .4rem}
.legal p,.legal li{font-size:.9rem;line-height:1.65;color:var(--tinta)}
.legal ul{padding-left:1.2rem;margin:.4rem 0}
.legal li{margin-bottom:.3rem}
.legal-fecha{font-size:.8rem !important;color:var(--gris) !important}
.legal-borrador{background:#fff4ea;border:1px solid #ffd1a8;color:#8e4400;
  border-radius:9px;padding:.7rem .9rem;font-size:.86rem;line-height:1.5;margin:1rem 0}
.legal-falta{background:var(--suave);border-left:3px solid var(--gris);padding:.5rem .7rem;
  font-size:.82rem !important;color:var(--gris) !important;margin:.4rem 0}
.legal-chica{font-size:.76rem;color:var(--gris);line-height:1.45;margin:.7rem 0 0}
.legal-chica a{color:var(--acento-texto)}

/* ═══ El carrito y la cuenta, arriba a la derecha ════════════════════════ */

.cab { display: flex; align-items: center; gap: .9rem; }
.cab form { flex: 1; min-width: 0; position: relative; }

.cab-acciones { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.cab-cuenta {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .85rem; border: 1px solid var(--linea);
  border-radius: 999px; background: #fff; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--tinta);
  text-decoration: none; white-space: nowrap;
}
.cab-cuenta:hover { border-color: var(--acento); color: var(--acento); }
.cab-cuenta-ini {
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem;
  background: var(--acento); color:var(--sobre-acento);
}

/* El carrito ya no está en la columna: aquí se le devuelve el aire que tenía. */
.cab .btn-carro { margin: 0; width: auto; }

@media (max-width: 900px) {
  /* En el celular la barra de arriba ya trae carrito; aquí sobra. */
  .cab-acciones .btn-carro { display: none; }
  .cab-cuenta-txt { display: none; }
}

/* ═══ El alta, flotando ═════════════════════════════════════════════════ */

/* Velo claro, no negro: la gracia es que se sigan viendo los productos. Un
   fondo oscuro convierte el cuadro en una puerta, que es justo lo que no
   queremos. */
.alta-fondo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  animation: alta-entra-fondo .25s ease;
}
@keyframes alta-entra-fondo { from { opacity: 0 } }

.alta {
  position: fixed; z-index: 61;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(27rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: #fff; border-radius: 1.25rem;
  padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05);
  text-align: center;
  animation: alta-entra .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes alta-entra {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96) }
}

.alta-x {
  position: absolute; top: .6rem; right: .75rem;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--gris);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.alta-x:hover { background: var(--fondo); color: var(--tinta); }

.alta-marca {
  display: flex; flex-direction: column; align-items: center;
  gap: .15rem; color: var(--acento); margin-bottom: .9rem;
}
.alta-marca .marca-casa { width: 2.6rem; height: auto; }
.alta-marca b { font-size: 1.35rem; letter-spacing: .06em; }

.alta h2 { margin: 0 0 .4rem; font-size: 1.3rem; line-height: 1.25; }
.alta-txt { margin: 0 0 1.25rem; color: var(--gris); font-size: .92rem; line-height: 1.5; }

.alta-botones { display: grid; gap: .55rem; }

.alta-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .8rem 1rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none; width: 100%;
}
.alta-ico { display: flex; align-items: center; }

.alta-cel      { background: var(--acento); color:var(--sobre-acento); }
.alta-cel:hover{ background: var(--acento-toque); }
.alta-google   { background: #fff; color: #3c4043; border-color: #dadce0; }
.alta-google:hover { background: #f7f8f8; }
.alta-facebook { background: #1877f2; color: #fff; }
.alta-facebook:hover { background: #1466d4; }
.alta-apple    { background: #000; color: #fff; border-color: #000; }
.alta-apple:hover { background: #1a1a1a; }
.alta-ya       { background: #fff; color: var(--acento); border-color: var(--acento); }
.alta-ya:hover { background: var(--fondo); }

/* Este botón va discreto pero sin esconderse. Es la salida, y una salida que
   no se ve es lo que hace que la gente cierre la pestaña. */
.alta-ver {
  margin: 1.1rem auto .4rem; display: block;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--gris); text-decoration: underline;
  text-underline-offset: .2rem;
}
.alta-ver:hover { color: var(--tinta); }

.alta-nota { margin: 0; font-size: .78rem; color: var(--gris); line-height: 1.45; }

/* ═══ El aviso de rastreo ═══════════════════════════════════════════════ */

.permiso {
  position: fixed; z-index: 70;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 44rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .95rem 1.15rem;
  background:var(--barra); color: #fff;
  border-radius: .9rem;
  box-shadow: 0 .75rem 2.5rem rgba(0,0,0,.3);
  animation: permiso-sube .35s ease .8s both;
}
@keyframes permiso-sube { from { opacity: 0; transform: translateY(1rem) } }

.permiso-txt { flex: 1; font-size: .85rem; line-height: 1.45; }
.permiso-txt b { display: block; margin-bottom: .15rem; font-size: .92rem; }
.permiso-txt span { color: rgba(255,255,255,.78); }
.permiso-txt a { color: #fff; text-decoration: underline; }

.permiso-botones { display: flex; gap: .5rem; flex-shrink: 0; }
.permiso-botones button {
  padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  white-space: nowrap;
}
/* Los dos se ven igual de fáciles de picar. Hacer chiquito el «no» es la
   trampa que usan otras tiendas, y con eso el permiso deja de ser permiso. */
.permiso-no { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.permiso-no:hover { background: rgba(255,255,255,.12); }
.permiso-si { background: var(--acento); color:var(--sobre-acento); }
.permiso-si:hover { filter: brightness(1.08); }

@media (max-width: 680px) {
  .permiso { flex-direction: column; align-items: stretch; gap: .8rem; }
  .permiso-botones button { flex: 1; }
}

/* En la copia, la barra del diseñador vive abajo con z-index 9000 y tapaba el
   botón «Así está bien» del aviso. Un aviso legal que no se puede contestar
   entero no sirve, así que aquí se le sube por encima y se le hace lugar.
   En la tienda buena no existe esa barra y esta regla no aplica. */
body.con-disenador .permiso { bottom: 5.5rem; z-index: 9500; }

/* ═══ La barra de arriba, de orilla a orilla ════════════════════════════ */

.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem 1.1rem;
  background:var(--barra); color: #fff;
}

/* ── La marca ── */
.barra-marca {
  display: flex; align-items: center; flex-shrink: 0;
  color: var(--acento); text-decoration: none;
}
.barra-marca .marca-nombre {
  display: flex; align-items: center; gap: .4rem;
  font-size: 1.45rem; font-weight: 800; letter-spacing: .04em;
}
.barra-marca .marca-casa { width: 1.7rem; height: auto; }

/* ── El teléfono, como el «Enviar a» de Amazon ── */
.barra-tel {
  display: flex; flex-direction: column; flex-shrink: 0;
  color: #fff; text-decoration: none; line-height: 1.15;
  padding: .25rem .4rem; border-radius: .4rem;
}
.barra-tel em { font-style: normal; font-size: .72rem; color: rgba(255,255,255,.7); }
.barra-tel b { font-size: .92rem; }
.barra-tel:hover { outline: 1px solid rgba(255,255,255,.4); }

/* ── El buscador se lleva todo el espacio que sobra ── */
/* La caja se lleva el espacio y el ancla; el formulario se lleva el recorte
   de la pastilla. Antes era el mismo elemento y el `overflow:hidden` que
   redondea la pastilla se comía el desplegable de sugerencias. */
.barra-busca-caja { flex: 1; min-width: 0; position: relative; }
.barra-busca {
  display: flex; border-radius: .5rem; overflow: hidden;
  background: #fff;
}
.barra-busca input {
  flex: 1; min-width: 0; border: 0; outline: 0;
  padding: .68rem .9rem; font: inherit; font-size: .95rem;
  background: transparent; color: var(--tinta);
}
.barra-lupa {
  width: 3.1rem; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--acento); color:var(--sobre-acento);
  display: grid; place-items: center;
}
.barra-lupa svg { width: 1.2rem; height: 1.2rem; }
.barra-lupa:hover { background: var(--acento-toque); }
/* El panel de sugerencias cuelga del buscador, ya no de la cabecera vieja. */
.barra-busca-caja .sugerencias { top: calc(100% + 4px); left: 0; right: 0; }

/* ── Cuenta y carrito, pegados a la orilla ── */
.barra-acciones { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }

.barra-cuenta, .barra-carro {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem; border: 1px solid transparent; border-radius: .4rem;
  background: transparent; color: #fff; cursor: pointer;
  font: inherit; text-decoration: none;
}
.barra-cuenta:hover, .barra-carro:hover { border-color: rgba(255,255,255,.45); }

.barra-cuenta .ico-monito { width: 1.9rem; height: 1.9rem; flex-shrink: 0; }
.barra-cuenta-txt { display: flex; flex-direction: column; line-height: 1.15;
                    font-weight: 700; font-size: .92rem; white-space: nowrap; }
.barra-cuenta-txt em { font-style: normal; font-weight: 400; font-size: .72rem;
                       color: rgba(255,255,255,.7); }

/* El número va ENCIMA del carrito, como Amazon: se lee de un vistazo sin
   tener que buscarlo a un lado. */
.barra-carro-pila { position: relative; display: block; flex-shrink: 0; }
.barra-carro .ico-carro { width: 2.1rem; height: 1.8rem; color: var(--acento);
                          display: block; }
.barra-carro .pastilla {
  position: absolute; top: -.5rem; left: 50%; transform: translateX(-42%);
  min-width: 1.1rem; padding: 0 .25rem; border-radius: 999px;
  background: var(--acento); color: var(--tinta);
  font-size: .78rem; font-weight: 800; line-height: 1.25rem; text-align: center;
}
.barra-carro-txt { font-weight: 700; font-size: .92rem; align-self: flex-end; }

@media (max-width: 900px) {
  /* En el celular no cabe todo en una fila: el buscador se pasa abajo y
     ocupa el ancho completo, que es como se busca con el pulgar. */
  .barra { flex-wrap: wrap; gap: .6rem .8rem; padding: .6rem .8rem; }
  .barra-tel { display: none; }
  .barra-busca-caja { order: 3; flex-basis: 100%; }
  .barra-acciones { margin-left: auto; }
  .barra-cuenta-txt, .barra-carro-txt { display: none; }
  .barra-marca .marca-nombre { font-size: 1.2rem; }
}

/* El logo de WhatsApp en el botón de entrar. Va en blanco y no en su verde de
   marca: la tienda quedó de un solo color y el verde se fue de todo. */
.alta-cel .ico-wa { width: 1.15rem; height: 1.15rem; display: block; }

/* ═══ La casita encima de MAFE ══════════════════════════════════════════
   Antes iba al lado, como una letra más. Ahora va arriba y tapa el borde
   superior de las letras: el techo cubre el nombre, que es de lo que se
   trata en una ferretería. El margen negativo es lo que las encima; sin él
   quedarían una sobre otra pero separadas, y se pierde el efecto de techo. */
.marca-nombre {
  flex-direction: column; align-items: center; gap: 0;
  line-height: .95;
}
.barra-marca .marca-casa {
  /* Un pelo más ancho que la palabra: un techo que no sobresale no parece
     techo, parece un acento encima de la M. */
  width: 4.3rem; height: auto;
  margin: 0 0 -.42rem;      /* lo que hace que el techo tape las letras */
  position: relative; z-index: 1;
}
.barra-marca .marca-nombre { font-size: 1.5rem; }

/* En el celular la barra es más apretada: la casita encoge con el nombre. */
@media (max-width: 900px) {
  .barra-marca .marca-casa { width: 3.6rem; margin-bottom: -.34rem; }
  .barra-marca .marca-nombre { font-size: 1.25rem; }
}

/* El monito nuevo es de línea, no un círculo relleno: pide más ancho que alto
   y toma el naranja de la casa como el carrito. */
.barra-cuenta .ico-monito { width: 2.3rem; height: auto; color: var(--acento); }

/* ═══ La barra de envío gratis, tipo semáforo ═══════════════════════════
   El canal va gris CLARO a propósito. Estaba pintado del mismo naranja que
   el relleno, así que se veía llena aunque el carrito estuviera en cero: una
   barra donde el fondo y el avance son del mismo color no mide nada.
   El color del relleno lo pone `tienda.js`, que lo va moviendo de naranja a
   verde según lo que falta. */
.envio-barra{background:var(--linea)}
.envio-barra span{
  background:var(--acento);
  transition:width .45s cubic-bezier(.2,.8,.3,1), background-color .45s ease;
}

/* Al llegar a envío gratis: un latido y el letrero en verde. El color solo
   no basta —si el cliente no estaba viendo la barra, se lo pierde. */
.envio.logrado small{color:hsl(128,65%,32%);font-weight:700}
.envio.logrado .envio-barra span{animation:envio-late .6s ease}
@keyframes envio-late{
  0%,100%{transform:scaleY(1)}
  40%{transform:scaleY(2.4)}
}
.envio-barra span{transform-origin:center}

/* ═══ Confirmar el punto del mapa ══════════════════════════════════════ */

.mapa-acciones{margin-top:.6rem}

.mapa-ok{
  width:100%;padding:.75rem 1rem;border:0;border-radius:.55rem;
  background:var(--acento);color:var(--sobre-acento);font:inherit;font-weight:700;
  font-size:.95rem;cursor:pointer;
}
.mapa-ok:hover{background:var(--acento-toque)}

.mapa-otra{
  width:100%;padding:.6rem 1rem;border:1px solid var(--linea);
  border-radius:.55rem;background:#fff;color:var(--gris);
  font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;margin-top:.5rem;
}
.mapa-otra:hover{border-color:var(--acento);color:var(--acento-texto)}

/* Verde, igual que la barra de envío: es el mismo mensaje —«ya quedó»— y
   usar dos colores distintos para decir lo mismo enseña dos cosas. */
.mapa-listo{
  display:flex;flex-direction:column;gap:.1rem;margin:0;
  padding:.6rem .75rem;border-radius:.5rem;
  background:hsl(128,45%,95%);border:1px solid hsl(128,40%,80%);
}
.mapa-listo b{color:hsl(128,62%,28%);font-size:.92rem}
.mapa-listo span{color:hsl(128,25%,35%);font-size:.78rem}

/* Confirmado: la flechita del centro se va, porque el punto bueno ya está
   clavado en el mapa. Dejar las dos es lo que hace dudar cuál vale. */
.mapa-caja.confirmado .mapa-pin{display:none}
.mapa-clavado{line-height:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.32))}
.mapa-clavado svg{width:30px;height:40px}

/* ═══ El chat ═══════════════════════════════════════════════════════════ */

.chat-globo{position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;
  display:flex;align-items:center;gap:.5rem;
  padding:.75rem 1.15rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--acento);color:var(--sobre-acento);font:inherit;font-weight:700;
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.25)}
.chat-globo:hover{background:var(--acento-toque)}
.chat-globo svg{width:1.25rem;height:1.25rem}

.chat{position:fixed;right:1.1rem;bottom:1.1rem;z-index:81;
  width:min(23rem,calc(100vw - 2rem));height:min(31rem,calc(100vh - 6rem));
  display:flex;flex-direction:column;background:#fff;
  border-radius:1rem;overflow:hidden;
  box-shadow:0 1rem 3rem rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.06);
  animation:chat-entra .22s ease}
@keyframes chat-entra{from{opacity:0;transform:translateY(1rem)}}

.chat-cab{display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem;background:var(--barra);color:#fff;flex-shrink:0}
.chat-cab b{display:block;font-size:.95rem}
.chat-cab span{font-size:.75rem;color:rgba(255,255,255,.7)}
.chat-x{border:0;background:none;color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 .25rem;opacity:.75}
.chat-x:hover{opacity:1}

.chat-hilo{flex:1;overflow-y:auto;padding:1rem;display:flex;
  flex-direction:column;gap:.6rem;background:var(--suave)}

.chat-msg{max-width:85%;padding:.6rem .85rem;border-radius:1rem;
  font-size:.88rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.chat-msg.bot{background:#fff;color:var(--tinta);align-self:flex-start;
  border-bottom-left-radius:.3rem;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.chat-msg.yo{background:var(--acento);color:var(--sobre-acento);align-self:flex-end;
  border-bottom-right-radius:.3rem}
.chat-msg em{color:var(--gris);font-size:.82rem}
.chat-msg.esperando{opacity:.5;letter-spacing:.2em}

.chat-cotiza{align-self:flex-start;font-size:.85rem;font-weight:700;
  color:var(--acento-texto);text-decoration:none;padding:.3rem 0}
.chat-cotiza:hover{text-decoration:underline}

.chat-pasar{padding:.6rem 1rem;background:#fff;border-top:1px solid var(--linea);
  flex-shrink:0}
.chat-pasar a{display:block;text-align:center;padding:.6rem;border-radius:.5rem;
  background:var(--barra);color:#fff;text-decoration:none;
  font-weight:700;font-size:.88rem}

.chat-abajo{display:flex;gap:.5rem;padding:.75rem;background:#fff;
  border-top:1px solid var(--linea);flex-shrink:0}
.chat-abajo input{flex:1;min-width:0;padding:.6rem .8rem;font:inherit;
  font-size:.9rem;border:1px solid var(--linea);border-radius:999px;outline:0}
.chat-abajo input:focus{border-color:var(--acento)}
.chat-abajo button{width:2.5rem;border:0;border-radius:50%;cursor:pointer;
  background:var(--acento);color:var(--sobre-acento);display:grid;place-items:center;flex-shrink:0}
.chat-abajo button:hover{background:var(--acento-toque)}
.chat-abajo button svg{width:1.05rem;height:1.05rem}

@media (max-width:520px){
  .chat{right:.5rem;left:.5rem;bottom:.5rem;width:auto;
    height:min(28rem,calc(100vh - 4rem))}
}
/* Un renglón y sin cortar: los nombres cortos ya caben. */
.familia-texto strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══ La tienda sin la columna de zonas ═════════════════════════════════
   Esconder la columna con `display:none` no bastaba: la página es una rejilla
   de tres columnas y el hueco de 196px se quedaba reservado y vacío. Eso era
   lo que se veía raro. Aquí la rejilla se rehace sin esa columna. */

/* UNA sola columna. Me equivoqué al escribir esto la primera vez: puse
   `1fr 292px` creyendo que el carrito seguía siendo una columna de la
   rejilla. Ya no lo es —es un panel `position:fixed` que entra desde la
   derecha— así que esa segunda columna era un fantasma que se comía el ancho
   y dejaba el catálogo apretado en una tira a la izquierda.

   Sin la columna de zonas queda una sola cosa en la rejilla: el contenido. */
.marco3.sin-lado,
.marco3.sin-lado.sin-carro{grid-template-columns:1fr}

/* Y en cada tamaño de pantalla, lo mismo: las reglas de más abajo vuelven a
   poner dos columnas por ancho, y sin esto reaparecía el fantasma al angostar
   la ventana. */
@media (max-width:1100px){ .marco3.sin-lado{grid-template-columns:1fr} }
@media (max-width:760px){  .marco3.sin-lado{grid-template-columns:1fr} }

/* Las zonas no desaparecen: se pasan a una tira arriba del contenido. Quitar
   la columna no puede significar quitarle al cliente cómo moverse. */
.marco3.sin-lado .zonas-movil{
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  padding:.75rem 1rem;border-bottom:1px solid var(--linea);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.marco3.sin-lado .zonas-movil::-webkit-scrollbar{display:none}

/* Las pastillas de zona estaban definidas SOLO dentro del bloque de celular,
   así que en escritorio salían como texto suelto y los nombres largos se
   partían en dos renglones. Aquí se les da su forma también en pantalla
   grande, sin tocar lo del celular. */
.marco3.sin-lado .zonas-movil a{
  flex:none;font-size:.8rem;text-decoration:none;color:var(--tinta);
  background:var(--suave);border-radius:99px;padding:.35rem .8rem;
  white-space:nowrap}
.marco3.sin-lado .zonas-movil a:hover{background:var(--linea)}
.marco3.sin-lado .zonas-movil a.activa{background:var(--acento);color:var(--sobre-acento);font-weight:700}

/* La barra de envío gratis vivía en esa columna. Sin ella se perdía, y es
   justo la que empuja a llenar más el carrito: se va a la tira de zonas. */
.marco3.sin-lado .envio-tira{display:flex;align-items:center;gap:.6rem;
  padding:.6rem 1rem;border-bottom:1px solid var(--linea)}
.marco3.sin-lado .envio-tira small{font-size:.75rem;color:var(--gris);white-space:nowrap}
.marco3.sin-lado .envio-tira .envio-barra{flex:1;max-width:14rem;margin:0}
.envio-tira{display:none}

/* ── El botón de cerrar y abrir la columna de zonas ───────────────────────
   Vive SIEMPRE en el mismo lugar, arriba a la izquierda del contenido, esté
   la columna abierta o cerrada. Un botón que se cambia de lugar al picarlo
   obliga a buscarlo otra vez para deshacer lo que acabas de hacer.

   La columna sigue en la página cuando está cerrada —no se borra— porque el
   buscador de Google la lee y porque volver a abrirla no debe recargar nada.
   Se esconde y ya. */
.marco3.sin-lado .lado{display:none}

.fila-plegar{display:flex;align-items:center;gap:.7rem;padding:0 1rem}
.fila-plegar:empty{display:none}
/* Una bolita con flecha montada en la orilla de la columna, a media altura,
   igual a la del panel: Jorge la prefirió al botón con texto. Es hija del
   marco, no de la columna, para quedarse cuando la columna se esconde. */
.plegar{
  position:fixed; left:calc(var(--lado-ancho,196px) - 14px); top:52vh; z-index:30;
  width:28px; height:28px; border-radius:50%; padding:0; cursor:pointer;
  background:var(--fondo); color:var(--tinta); border:1px solid var(--linea);
  box-shadow:0 1px 3px rgba(0,0,0,.18); display:flex; align-items:center;
  justify-content:center; transition:left .18s, background .15s}
.plegar:hover{background:var(--acento); color:var(--sobre-acento); border-color:transparent}
.plegar svg{transition:transform .18s}
/* Cerrada, la columna se va ENTERA y la rejilla se reacomoda: cabe un producto
   más por renglón, que es para lo que Jorge la quiso cerrar.

   Antes se quedaba con sus 196 px, vacía, y el comentario que estaba aquí
   explicaba por qué: «la columna conserva su ancho por esa cajita [la de envío
   gratis]». Esa razón se acabó el 23-sep, cuando la barra de envío se pasó a la
   de arriba —donde se ve siempre, también en el celular—: la cajita de la
   columna quedó repetida, así que cerrar dejaba un panel vacío que no servía
   para nada. Jorge lo vio en la pantalla y dijo «lo de quitar y poner no mejora,
   se ve feo». Tenía razón.

   Las zonas pasan a pastillas arriba del contenido para no perder cómo moverse. */
.marco3.zonas-cerradas,
.marco3.zonas-cerradas.sin-carro{grid-template-columns:1fr}
@media (max-width:1100px){ .marco3.zonas-cerradas{grid-template-columns:1fr} }
.marco3.zonas-cerradas .lado{display:none}
/* El botón de abrir se queda pegado a la orilla, que es de donde sale. */
.marco3.zonas-cerradas .plegar{left:-14px}
.marco3.zonas-cerradas .plegar svg{transform:scaleX(-1)}
.marco3.zonas-cerradas .zonas-movil{
  display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  padding:.75rem 1rem;border-bottom:1px solid var(--linea);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.marco3.zonas-cerradas .zonas-movil::-webkit-scrollbar{display:none}
.marco3.zonas-cerradas .zonas-movil a{
  flex:none;font-size:.8rem;text-decoration:none;color:var(--tinta);
  background:var(--suave);border-radius:99px;padding:.35rem .8rem;white-space:nowrap}
.marco3.zonas-cerradas .zonas-movil a:hover{background:var(--linea)}
.marco3.zonas-cerradas .zonas-movil a.activa{background:var(--acento);color:var(--sobre-acento);font-weight:700}
@media (max-width:1100px){ .plegar{left:calc(180px - 14px)} }
/* Dentro de la fila, la barra de envío deja de mandar su propio borde y su
   propio relleno: los pone la fila. Dos líneas juntas se ven como un error. */
.fila-plegar .envio-tira{border-bottom:none;padding:.5rem 0;flex:1}

/* En el celular no hay columna que cerrar —ya está escondida y las zonas van
   en pastillas—, así que el botón sería un botón que no hace nada. */
@media (max-width:760px){
  .plegar{display:none}
  .fila-plegar{padding:0;border-bottom:none}
}

/* ═══ Las flechitas no van en el celular ════════════════════════════════
   Se encimaban con el + del producto que queda a medias en la orilla, y la
   flecha se llevaba el toque: el cliente le picaba a «agregar» y lo que
   pasaba era que la fila se recorría. Medido: 16 choques en la portada a
   375px, de 22×16px cada uno.

   No se mueven de lugar, se quitan: en una pantalla táctil la fila se
   arrastra con el dedo, que es como la gente lo hace de todos modos. Las
   flechas son una ayuda de mouse, y en el celular no hay mouse. */
@media (max-width: 760px){
  .flecha{display:none}
}

/* El aviso de la copia, dentro de la barra de arriba. Antes era una cinta
   fija encima que empujaba la barra 2.1rem y dejaba un hueco arriba. */
.chip-pruebas{flex:none;background:#f59e0b;color:#3d2600;font-weight:800;
  font-size:.62rem;letter-spacing:.09em;padding:.16rem .45rem;border-radius:4px;
  align-self:center}

/* ═══ Pedir cotización sin comprar ══════════════════════════════════════ */
.carro-btn.cotizar{margin-top:.5rem;background:#fff;color:var(--tinta);
  border:1px solid var(--linea);display:block;width:100%;text-align:center;
  padding:.7rem;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
.carro-btn.cotizar:hover{border-color:var(--acento);color:var(--acento-texto)}

.cotiza-fondo{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.35)}
.cotiza{position:fixed;z-index:211;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(26rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow-y:auto;
  background:#fff;border-radius:1rem;padding:1.6rem 1.4rem 1.4rem;
  box-shadow:0 1rem 3rem rgba(0,0,0,.3)}
.cotiza h2{margin:0 0 .3rem;font-size:1.2rem}
.cotiza-txt{margin:0 0 1rem;font-size:.88rem;color:var(--gris);line-height:1.5}
.cotiza .rep-campo{display:block;font-size:.8rem;color:var(--gris);margin-bottom:.7rem}
.cotiza .rep-campo input{display:block;width:100%;margin-top:.2rem;padding:.65rem .75rem;
  font:inherit;font-size:.95rem;border:1px solid var(--linea);border-radius:8px}
.cotiza .rep-campo input:focus{outline:0;border-color:var(--acento)}
.cotiza-btn{width:100%;padding:.85rem;border:0;border-radius:8px;
  background:var(--acento);color:var(--sobre-acento);font:inherit;font-weight:700;
  font-size:.95rem;cursor:pointer}
.cotiza-btn:hover{background:var(--acento-toque)}
.cotiza .dicho{margin-top:.8rem}

/* El checklist de fichas técnicas al pedir la cotización. */
.cot-check{display:flex;align-items:flex-start;gap:.6rem;margin:.9rem 0 .2rem;
  padding:.7rem .8rem;border:1px solid var(--linea);border-radius:12px;cursor:pointer;
  background:var(--suave)}
.cot-check:hover{border-color:var(--acento)}
.cot-check input{margin-top:.15rem;width:1.05rem;height:1.05rem;accent-color:var(--acento);
  flex:none}
.cot-check span{font-size:.88rem;font-weight:600;line-height:1.35}
.cot-check em{display:block;font-style:normal;font-size:.76rem;font-weight:400;
  color:var(--gris);margin-top:.1rem}

/* Las sugerencias de dirección, mientras se escribe. */
.dir-sugerencias{position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:40;
  list-style:none;margin:0;padding:.25rem;background:#fff;border:1px solid var(--linea);
  border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.16);max-height:280px;
  overflow-y:auto}
.dir-sugerencias li{padding:.55rem .65rem;border-radius:9px;cursor:pointer;
  line-height:1.35}
.dir-sugerencias li:hover{background:var(--suave)}
.dir-sugerencias b{display:block;font-size:.9rem;font-weight:600}
.dir-sugerencias em{display:block;font-style:normal;font-size:.78rem;color:var(--gris)}

/* Las fotos ya traen `width` y `height` en el HTML para que el navegador
   guarde el hueco antes de que lleguen —si no, la página brinca mientras
   cargan—. Esto las deja adaptarse igual dentro de su tarjeta. */
.tarjeta-prod img, .tira-foto img, .familia-foto img, .sug img, .ficha-foto img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}

/* La foto prestada de una pieza igual en otra medida. Va con su etiqueta:
   enseñarla sin avisar es prometer algo que no es. */
.foto-referencia{opacity:.92}
.etiqueta-referencia{position:absolute;left:.4rem;bottom:.4rem;z-index:2;
  background:rgba(27,29,33,.72);color:#fff;font-size:.62rem;font-weight:700;
  letter-spacing:.02em;padding:.12rem .35rem;border-radius:5px;
  text-transform:uppercase}
.prod-foto{position:relative}
.aviso-referencia{margin:.5rem 0 0;padding:.55rem .7rem;border-radius:9px;
  background:var(--suave);font-size:.8rem;line-height:1.5;color:var(--gris)}
.aviso-referencia b{color:var(--tinta)}


/* ═══ El cajón de filtrar y ordenar ══════════════════════════════════════
   Con la referencia que mandó Jorge: un botón con contador y un cajón que
   entra desde la derecha. Antes eran tres tiras de pastillas que en el
   celular se comían media pantalla; ahora es un solo renglón. */
.cajon-fila{padding:.6rem 1rem 0;display:flex;flex-direction:column;gap:.5rem}
.cajon{position:relative}
.cajon > summary{list-style:none}
.cajon > summary::-webkit-details-marker{display:none}
/* Pastilla CHICA, redondeada y con sombrita suave, icono naranja: del mismo
   juego que los chips y las tarjetas. Antes era un rectángulo de borde negro
   duro que se veía grande y rompía la armonía. */
.cajon-boton{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1px solid var(--linea);border-radius:99px;padding:.5rem .95rem;
  font-weight:700;font-size:.86rem;letter-spacing:-.01em;background:var(--fondo);
  box-shadow:0 4px 12px rgba(28,22,12,.06);color:var(--tinta);user-select:none}
.cajon-boton:hover{border-color:var(--acento)}
.cajon-ico{position:relative;display:inline-flex;color:var(--acento)}
.cajon-num{position:absolute;top:-11px;right:-13px;background:var(--acento);color:#fff;
  font-size:.72rem;font-weight:800;min-width:20px;height:20px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 .35rem}

.cajon-fondo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900}
.cajon-panel{display:none;position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);
  background:var(--fondo);z-index:901;flex-direction:column;box-shadow:-6px 0 28px rgba(0,0,0,.25);
  overflow:hidden}
.cajon[open] .cajon-fondo{display:block}
.cajon[open] .cajon-panel{display:flex;animation:cajon-entra .22s ease-out}
@keyframes cajon-entra{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.cajon[open] .cajon-panel{animation:none}}

.cajon-cab{display:flex;align-items:center;gap:1rem;padding:1.3rem 1.3rem 1rem;
  border-bottom:1px solid var(--linea);flex:none}
.cajon-cab h2{margin:0;flex:1;font-size:1.35rem;line-height:1.05;text-transform:uppercase;
  letter-spacing:.06em;font-weight:900}
.cajon-borrar{font-weight:700;text-decoration:underline;color:var(--tinta);font-size:.95rem}
.cajon-x{background:none;border:0;font-size:1.9rem;line-height:1;cursor:pointer;color:var(--tinta);padding:0 .2rem}

.cajon-puestos{background:var(--suave);padding:.9rem 1.3rem;flex:none}
.cajon-puestos h3{margin:0 0 .6rem;font-size:1rem}
.cajon-fichas{display:flex;flex-wrap:wrap;gap:.5rem}
.cajon-ficha{border:1px solid var(--tinta);padding:.45rem .8rem;font-size:.92rem;
  text-decoration:none;color:var(--tinta);background:var(--fondo)}
.cajon-ficha span{margin-right:.35rem}

.cajon-panel > .cajon-seccion{border-bottom:1px solid var(--linea);flex:none}
.cajon-seccion > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  flex-wrap:wrap;column-gap:.4rem;padding:1rem 1.3rem;font-weight:700;font-size:1.02rem}
.cajon-seccion > summary::-webkit-details-marker{display:none}
.cajon-seccion > summary::after{content:"";width:9px;height:9px;margin-left:auto;
  border-right:1.6px solid var(--tinta);border-bottom:1.6px solid var(--tinta);
  transform:rotate(45deg);transition:transform .15s}
.cajon-seccion[open] > summary::after{transform:rotate(-135deg)}
.cajon-seccion summary em{font-style:normal}
.cajon-seccion summary small{display:block;width:100%;font-weight:400;color:var(--gris);font-size:.86rem}
.cajon-opciones{padding:0 1.3rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.cajon-radio{display:flex;align-items:center;gap:.6rem;font-size:.98rem;cursor:pointer}
.cajon-radio input{width:22px;height:22px;accent-color:var(--tinta);margin:0}
.cajon-rejilla{padding:0 1.3rem 1rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.cajon-caja{border:1px solid var(--linea-fuerte,#8c96a0);padding:.65rem .5rem;text-align:center;
  font-size:.9rem;cursor:pointer;background:var(--fondo);line-height:1.2}
.cajon-caja input{position:absolute;opacity:0;width:0;height:0}
.cajon-caja.puesta,.cajon-caja:has(input:checked){background:var(--suave);border-color:var(--tinta);font-weight:700}
.cajon-caja i{font-style:normal;color:var(--gris);font-size:.78rem}

/* El cuerpo del cajón se desliza; la cabeza y el pie se quedan. */
.cajon-panel{overflow-y:auto}
.cajon-pie{margin-top:auto;position:sticky;bottom:0;background:var(--fondo);
  border-top:1px solid var(--linea);padding:1rem 1.3rem 1.2rem;flex:none}
.cajon-pie p{margin:0 0 .7rem;color:var(--gris);font-size:.95rem}
.cajon-mostrar{width:100%;display:flex;justify-content:space-between;align-items:center;
  background:var(--barra);color:#fff;border:0;padding:1rem 1.2rem;font-size:1.05rem;
  font-weight:800;cursor:pointer;font-family:inherit}
.cajon-mostrar:hover{background:#000}

/* Las tiras viejas ya no se pintan; si quedara alguna, que no estorbe. */
.filtro{display:none}


/* ── Envío gratis en la barra de arriba ─────────────────────────────────
   Va junto al teléfono. Blanco sobre el fondo oscuro de la barra, y la
   barrita de avance con el mismo semáforo que la de la columna. */
.barra-envio{flex:none;display:flex;flex-direction:column;gap:.3rem;min-width:12rem;
  padding:.15rem .8rem;border-left:1px solid rgba(255,255,255,.18)}
.barra-envio small{font-size:.72rem;color:rgba(255,255,255,.85);white-space:nowrap;line-height:1.15}
.barra-envio .envio-barra{margin:0;height:5px;background:rgba(255,255,255,.22)}
.barra-envio.logrado small{color:#fff;font-weight:700}
@media (max-width:1100px){ .barra-envio{min-width:9.5rem} }

/* En el celular NO se esconde: se pasa a su propio renglón, debajo del
   buscador, de orilla a orilla.

   Estaba en `display:none` abajo de 760, y la otra copia vive en la columna de
   la izquierda, que también se esconde en el celular. O sea que en el teléfono
   —donde va a comprar casi todo el mundo— no se veía NINGUNA: el cliente nunca
   se enteraba de cuánto le faltaba para el envío gratis. Y eso es justo lo que
   sube el ticket; el comentario de la plantilla hasta decía «aquí se ve
   siempre», y 1,500 líneas más abajo esta regla decía que no.

   Cabe porque `.barra` se acomoda en varios renglones en el celular, igual que
   el buscador: `order:4` la pone después de él. */
@media (max-width:900px){
  .barra-envio{display:flex;order:4;flex-basis:100%;min-width:0;
    flex-direction:row;align-items:center;gap:.6rem;
    padding:.35rem 0 .1rem;border-left:0}
  /* Más grande y en blanco pleno: es el gancho para subir el ticket («te falta
     poquito para el envío gratis»), así que se ve, no se murmura. */
  .barra-envio small{white-space:normal;font-size:.86rem;font-weight:700;color:#fff;flex:none}
  .barra-envio .envio-barra{flex:1;min-width:0;height:7px}
}


/* ── Direcciones en Tu cuenta, como en las apps de reparto ────────────── */
.dir-cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.btn-agregar-dir{display:inline-block;background:var(--acento);color:var(--sobre-acento);font-weight:800;
  text-decoration:none;padding:.5rem .9rem;border-radius:99px;font-size:.88rem}
.btn-agregar-dir:hover{background:var(--acento-toque)}
.dir{display:flex;align-items:flex-start;gap:.5rem}
.dir-texto{flex:1;min-width:0}
.dir-menu{position:relative;flex:none}
.dir-menu > summary{list-style:none;cursor:pointer;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:800;
  border:1px solid var(--linea);background:var(--fondo);line-height:1}
.dir-menu > summary::-webkit-details-marker{display:none}
.dir-menu > summary:hover{background:var(--suave)}
.dir-menu-lista{position:absolute;right:0;top:calc(100% + .3rem);z-index:30;min-width:15rem;
  background:var(--fondo);border:1px solid var(--linea);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);padding:.3rem;display:flex;flex-direction:column}
.dir-menu-lista a,.dir-menu-lista button{display:block;width:100%;text-align:left;background:none;
  border:0;padding:.55rem .7rem;font-size:.88rem;color:var(--tinta);text-decoration:none;
  border-radius:7px;cursor:pointer;font-family:inherit}
.dir-menu-lista a:hover,.dir-menu-lista button:hover{background:var(--suave)}
.dir-menu-lista .peligro{color:#b91c1c}
.ck-mapa{height:220px;border-radius:10px;border:1px solid var(--linea);background:var(--suave)}
.ck-check{display:flex;gap:.6rem;align-items:center;margin:.6rem 0 .2rem;font-size:.92rem}
.ck-check input{width:20px;height:20px;accent-color:var(--acento)}
/* Caja de los datos de factura: aparece solo si el cliente elige «Sí». Fondo
   suave y borde para que no se vea plano, como el resto del checkout. */
.ck-factura-caja{background:var(--suave);border:1px solid var(--linea);
  border-radius:14px;padding:1rem 1rem .5rem;margin-top:.7rem}
.ck-factura-caja select{width:100%;border:1px solid var(--linea);border-radius:10px;
  padding:.6rem .7rem;font:inherit;background:var(--blanco,#fff);color:inherit}
.ck-factura-caja select:focus{outline:2px solid var(--acento);outline-offset:1px}
.acciones-cuenta{display:flex;gap:1rem;align-items:center;margin-top:.9rem}
.liga-gris{color:var(--gris);font-size:.9rem}
.franja-aviso.ok{background:#e8f4ee;color:#0f5c34}


/* ── «Tu cuenta»: ayuda, notificaciones, facturación, sesiones ─────────── */
.ayuda-botones{display:flex;flex-direction:column;gap:.5rem}
.btn-wa,.btn-tel{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem .9rem;border-radius:10px;font-weight:700;text-decoration:none;font-size:.92rem}
.btn-wa{background:#25d366;color:#fff}
.btn-wa:hover{background:#1ebe5a}
.btn-tel{border:1px solid var(--linea);color:inherit}
.btn-tel:hover{background:var(--suave)}
.ayuda-pedidos{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.ayuda-pedidos a{border:1px solid var(--linea);border-radius:99px;padding:.3rem .75rem;
  font-size:.82rem;font-weight:700;text-decoration:none;color:inherit}
.ayuda-pedidos a em{font-style:normal;font-weight:400;color:var(--gris)}
.ayuda-pedidos a:hover{border-color:var(--acento);color:var(--acento-texto)}

.avisos-forma{display:flex;flex-direction:column}
.palanca{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.65rem 0;border-top:1px solid var(--linea);cursor:pointer}
.palanca:first-child{border-top:0}
.palanca span{display:flex;flex-direction:column;gap:.1rem}
.palanca b{font-size:.9rem}
.palanca em{font-style:normal;font-size:.78rem;color:var(--gris);line-height:1.35}
.palanca input{position:absolute;opacity:0;width:0;height:0}
.palanca i{flex:none;width:44px;height:26px;border-radius:99px;background:#cfd5db;
  position:relative;transition:background .15s}
.palanca i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.palanca input:checked + i{background:var(--acento)}
.palanca input:checked + i::after{left:21px}
.palanca input:focus-visible + i{outline:2px solid var(--acento-osc);outline-offset:2px}
.btn-guardar-cuenta{margin-top:.6rem;align-self:flex-start;background:var(--acento);color:var(--sobre-acento);
  border:0;border-radius:8px;padding:.55rem 1rem;font-weight:700;cursor:pointer}
.btn-guardar-cuenta:hover{background:var(--acento-toque)}

.fact-resumen{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.6rem}
.fact-resumen b{font-size:1rem;letter-spacing:.03em}
.fact-resumen span{font-size:.9rem}
.fact-resumen em{font-style:normal;font-size:.8rem;color:var(--gris)}
.fact-editar summary{cursor:pointer;font-size:.85rem;font-weight:700;color:var(--acento-texto);
  list-style:none;margin-bottom:.5rem}
.fact-editar summary::-webkit-details-marker{display:none}
.fact-editar summary::before{content:"✎ "}
.fact-forma{display:flex;flex-direction:column;gap:.55rem}
.fact-forma label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;
  font-weight:700;color:var(--gris)}
.fact-forma input,.fact-forma select{font:inherit;font-size:.92rem;font-weight:400;color:inherit;
  padding:.5rem .6rem;border:1px solid var(--linea);border-radius:8px;background:#fff;min-width:0}
.fact-forma input:focus,.fact-forma select:focus{outline:2px solid var(--acento);border-color:transparent}
.fact-forma .fact-par{display:grid;grid-template-columns:8rem 1fr;gap:.55rem}
.fact-forma input.mayus{text-transform:uppercase}
@media (max-width:480px){ .fact-forma .fact-par{grid-template-columns:1fr} }

.sesiones{list-style:none;margin:0 0 .7rem;padding:0}
.sesiones li{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding:.45rem 0;
  border-top:1px solid var(--linea);font-size:.88rem}
.sesiones li:first-child{border-top:0}
.sesiones li em{font-style:normal;color:var(--gris);font-size:.8rem;margin-left:auto}
.btn-salir-todo{background:none;border:1px solid #b91c1c;color:#b91c1c;border-radius:8px;
  padding:.55rem 1rem;font-weight:700;cursor:pointer}
.btn-salir-todo:hover{background:#fcecea}

/* Tu cuenta: factura y problema por pedido */
.ped-extra{font-size:.76rem;color:var(--gris);margin-top:.15rem;display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:center}
.ped-extra a{color:var(--acento-texto);font-weight:700}
.ped-extra form button{font:inherit;font-size:.78rem;font-weight:700;background:none;border:1px solid var(--linea);
  border-radius:99px;padding:.1rem .55rem;cursor:pointer;color:inherit}
.ped-extra form button:hover{border-color:var(--acento)}
.ped-problema summary{cursor:pointer;font-weight:700;list-style:none}
.ped-problema summary::-webkit-details-marker{display:none}
.ped-problema form{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem;min-width:16rem}
.ped-problema textarea{font:inherit;font-size:.85rem;padding:.4rem .5rem;border:1px solid var(--linea);border-radius:8px}
.ped-problema form button{align-self:flex-start;background:var(--acento);color:var(--sobre-acento);border:0;border-radius:8px;padding:.35rem .8rem;font-weight:700;cursor:pointer}

/* El código de entrega: son cuatro números que alguien tiene que leer en voz
   alta, en la puerta, con el celular en una mano. Grandes y separados. */
.ck-codigo{text-align:center}
.ck-codigo-num{font-size:2.6rem;font-weight:700;letter-spacing:.28em;
  margin:.3rem 0 .5rem;font-variant-numeric:tabular-nums}

/* La contraseña en la pantalla de entrar: plegada, porque el camino principal
   es el código. Quien la puso sabe que está aquí; a los demás no les estorba. */
.cuenta-clave{margin-top:1rem;border-top:1px solid var(--linea,#e4dccf);padding-top:.8rem}
.cuenta-clave summary{cursor:pointer;font-size:.95rem;color:var(--gris,#6a635a);
  list-style:none;padding:.3rem 0}
.cuenta-clave summary::-webkit-details-marker{display:none}
.cuenta-clave summary::before{content:"› ";font-weight:700}
.cuenta-clave[open] summary::before{content:"⌄ "}
.cuenta-clave form{margin-top:.6rem}

/* Qué día llega, junto al punto confirmado. */
.mapa-cuando{margin:.4rem 0 0;font-size:.9rem;font-weight:600;color:#0c5132}
.mapa-cuando.otro-dia{color:#8a6116;font-weight:500}

/* ── Lo que falta decir ──────────────────────────────────────────────────
   «¿De qué calibre?» arriba de los resultados. Es la pregunta que Jorge hace
   en el mostrador, y sale antes que los filtros porque no es un filtro: es la
   tienda admitiendo que con lo que escribió no alcanza para dar con la pieza.
   Por eso lleva el acento y los filtros no. */
.falta-decir{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin:0 0 .9rem;padding:.6rem .8rem;border:1px solid var(--acento);
  background:color-mix(in srgb, var(--acento) 7%, transparent)}
.falta-decir-rotulo{font-weight:700;color:var(--acento);white-space:nowrap}
.falta-decir .chips{display:flex;gap:.4rem;flex-wrap:wrap}
/* Pieza/medida del grupo a la vista: en móvil se deslizan de lado para no
   amontonarse en varias filas. */
.piezas-fila{align-items:baseline}
@media(max-width:640px){
  .piezas-fila .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .piezas-fila .chips::-webkit-scrollbar{display:none}
  .piezas-fila .chip{flex:none;white-space:nowrap}
}

/* ── Lo que sí hay ───────────────────────────────────────────────────────
   Cuando el producto está agotado. Es lo que Jorge contesta en el mostrador,
   y por eso va pegado al «sin existencia» y no al final de la página: ahí es
   donde el cliente decide si se queda o se va. */
.en-lugar{margin:.8rem 0 1rem;padding:.8rem 1rem;border:1px solid var(--acento);
  background:color-mix(in srgb, var(--acento) 7%, transparent)}
.en-lugar-rotulo{margin:0 0 .5rem;font-weight:700;color:var(--acento)}
.en-lugar ul{margin:0;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:.45rem}
.en-lugar li{display:flex;justify-content:space-between;gap:.8rem;
  flex-wrap:wrap;align-items:baseline}
.en-lugar a{font-weight:600;text-decoration:none;color:var(--tinta)}
.en-lugar a:hover{text-decoration:underline}
.en-lugar span{font-size:.88rem;color:var(--gris,#6b7076);white-space:nowrap}

/* El porqué de cada sugerencia, debajo del nombre. Vivía en un `title` y en
   el celular un tooltip no se ve nunca — que es justo donde compran. */
.sug-porque{margin:.15rem 0 .2rem;font-size:.72rem;line-height:1.25;
  color:var(--acento);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

/* La hora que se le promete al cliente en su seguimiento. */
.ck-cuando{margin:.6rem 0 0;font-size:1rem;color:#0c5132;background:#eaf6ef;
  border-radius:10px;padding:.7rem .9rem;display:inline-block}
.ck-cuando strong{color:#0a3f28}

/* «Ese día no voy a estar»: el cliente avisa antes de que salga la camioneta. */
.ck-cambiar{margin:.7rem 0;border:1px solid var(--linea,#e3e3e3);border-radius:10px;
  padding:.6rem .8rem;background:#fff}
.ck-cambiar summary{cursor:pointer;font-weight:600;font-size:.95rem}
.ck-dias{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 .2rem}
.ck-dia{flex:1 1 44%;min-height:46px;border:1px solid var(--linea,#e3e3e3);border-radius:9px;
  background:#f7f7f7;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;padding:.5rem}
.ck-dia:hover{border-color:#ff7b01;color:#a85200}
.ck-dia:disabled{opacity:.5;cursor:default}
.ck-dicho{margin:.4rem 0 0;font-size:.9rem;color:#1b5c3a;font-weight:600}
.ck-dicho.mal{color:#9c1f10}

/* ═══════════════════════════════════════════════════════════════════════════
   MODO OSCURO — PERSONAL de Jorge, no de los clientes.
   Se activa con data-tema="oscuro" en <html>, que la tienda hereda de la MISMA
   preferencia del panel (guardada en ESTE aparato). El cliente que nunca la
   prendió ve la tienda clara. La tienda ya usa variables para casi todo, así
   que basta redefinir la paleta; abajo se corrigen las pocas superficies que
   traían un color claro a mano (#fff, #f7f7f7…).
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-tema="oscuro"]{
  --tinta:#ededed;          /* texto principal */
  --gris:#9a9aa0;           /* texto secundario (gris neutro, no café) */
  --linea:#2b2b2f;          /* separadores */
  --fondo:#1b1b1e;          /* TARJETAS: un peldaño sobre el fondo, para que se separen */
  --suave:#26262a;          /* superficie tenue / hover */
  --acento:#ff8a2a; --acento-osc:#d46e14; --acento-toque:#ff9d4d;
  --acento-texto:#ffb066;   /* naranja para LETRA: aclarado para leerse en oscuro */
  --sobre-acento:#17120a;   /* lo que va encima del naranja */
  --barra:#18181b;          /* barras/headers oscuros: siguen oscuros en oscuro */
  --rojo:#ff8a72;
  color-scheme:dark;        /* controles nativos y barras de scroll en oscuro */
}
/* El FONDO de la página va más oscuro (casi negro) que las tarjetas, para que
   se separen y no se vea plano ni «lavado». El menú lateral es transparente,
   así que hereda este fondo. */
:root[data-tema="oscuro"] body,
:root[data-tema="oscuro"] .marco3{background:#0f0f11}
/* Superficies que traían blanco/gris claro a mano. Se atan al tema. Los
   `color:#fff` que van ENCIMA del naranja (botones, pastillas) NO se tocan:
   ahí el blanco sigue siendo correcto. */
:root[data-tema="oscuro"] .sugerencias{background:var(--fondo);
  box-shadow:0 10px 28px rgba(0,0,0,.55)}
:root[data-tema="oscuro"] .sugerencias a:hover{background:var(--suave)}
/* Pastilla del botón +/cantidad sobre la tarjeta. */
:root[data-tema="oscuro"] .ctrl{background:var(--fondo)}
/* El cajón blanco del buscador → superficie oscura, con su letra clara. */
:root[data-tema="oscuro"] .barra-busca{background:var(--suave)}
:root[data-tema="oscuro"] .barra-busca input{background:transparent;color:var(--tinta)}
/* Mosaicos de categoría: se dejan CLAROS a propósito —la foto del producto
   viene sobre blanco y así se lee—; solo se baja un pelo el brillo. */
:root[data-tema="oscuro"] .tira-foto{background:#e9e9e6}
/* Avisos del checkout y del borrador legal: traían ámbar claro a mano. */
:root[data-tema="oscuro"] .ck-encargo-aviso,
:root[data-tema="oscuro"] .ck-aviso{background:#332810;border-color:#5a4a1e}
:root[data-tema="oscuro"] .legal-borrador{background:#332810;border-color:#5a4a1e;color:#e8bd66}
:root[data-tema="oscuro"] .ck-dia{background:var(--suave)}
:root[data-tema="oscuro"] .ck-dia:hover{color:var(--acento-texto)}
:root[data-tema="oscuro"] .ck-dicho{color:#7fd6a0}
:root[data-tema="oscuro"] .ck-dicho.mal{color:var(--rojo)}
/* Campos de formulario (checkout, alta, cuenta): casi todos venían con fondo
   blanco a mano. Se cambian de un jalón, sin tocar interruptores. */
:root[data-tema="oscuro"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
:root[data-tema="oscuro"] select,
:root[data-tema="oscuro"] textarea{
  background:var(--suave); color:var(--tinta); border-color:var(--linea);
}
:root[data-tema="oscuro"] input::placeholder,
:root[data-tema="oscuro"] textarea::placeholder{color:var(--gris)}
/* Últimas superficies claras: el botón de favorito (corazón) sobre la foto, el
   modal de «crea tu cuenta», el de cotizar y el botón de cotizar. Los botones
   de marca (Google, Facebook, WhatsApp) NO se tocan: su color es de la marca. */
:root[data-tema="oscuro"] .corazon{background:rgba(35,34,32,.92)}
:root[data-tema="oscuro"] .alta,
:root[data-tema="oscuro"] .cotiza{background:var(--fondo)}
:root[data-tema="oscuro"] .alta-fondo{background:rgba(0,0,0,.55)}
:root[data-tema="oscuro"] .alta-ya{background:var(--suave); color:var(--acento-texto)}
:root[data-tema="oscuro"] .alta-ya:hover{background:var(--activo, #2e2d29)}
:root[data-tema="oscuro"] .carro-btn.cotizar{background:var(--suave); color:var(--tinta)}

/* Botón discreto para reiniciar las recomendaciones (compu compartida). */
.olvidar-gustos{text-align:center;margin:.2rem 0 1.4rem}
.olvidar-gustos button{background:none;border:0;color:var(--acero,#6b7076);font-size:.86rem;text-decoration:underline;cursor:pointer;padding:.3rem}
.olvidar-gustos button:hover{color:var(--naranja,#ff7b01)}