/* ═══════════════════════════════════════════════════════════
   FERRETERÍA DOS CLAVOS · sistema de diseño

   COLORES: sampleados píxel a píxel del logo oficial de la ferretería
   (Ferreteriia-1-1.png). No son interpretados ni sacados del tema de
   WordPress, que tenía un azul apagado que no es el de la marca.
     #0102FD  azul del overol del personaje
     #F86400  naranja del personaje
     #000000  el logotipo "Ferretería DOS CLAVOS" va en negro
     #D6D6C5  el fondo del badge donde vive la mascota

   El azul del logo (#0102FD) está en hue 240, o sea justo sobre el
   límite entre azul y violeta: en pantalla, y sobre todo en íconos
   chicos, el ojo lo lee violeta. Para la interfaz se usa #0A38EF, el
   mismo azul corrido a hue 224 para que lea azul de verdad. El del
   logo se conserva intacto dentro del logo.
   Los grises son neutros a propósito: cualquier tinte azulado en los
   fondos hace que todo el conjunto se vea violeta.

   Tipografía  Archivo (grotesca industrial, eje de ancho variable)
   Radios      0 en todo
   ═══════════════════════════════════════════════════════════ */

:root{
  --azul:#0A38EF;
  --azul-osc:#082CBD;
  --azul-claro:#3D68FF;
  --navy:#0B1F6B;
  --navy-hondo:#07143F;
  --naranja:#F86400;
  --naranja-osc:#CC5200;

  --tinta:#15161A;
  --borde:#DFE1E5;
  --papel:#F4F5F7;
  --papel-2:#E8EAED;
  --blanco:#FFFFFF;

  /* Sitio de día: blanco de base y un gris muy claro para alternar
     secciones. Nada de superficies oscuras. */
  --sup:var(--blanco);
  --sup-2:var(--blanco);
  --sup-3:#F4F5F7;
  --sup-4:#EDEFF2;
  --txt:var(--tinta);
  --txt-2:#5E636E;
  --linea:var(--borde);

  --r:0px;
  --max:1360px;
  --ease:cubic-bezier(.16,1,.3,1);
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 100;
  background:var(--sup);
  color:var(--txt);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

.h-sec{
  font-size:clamp(1.9rem,4vw,3.1rem);
  font-variation-settings:'wdth' 110;
  font-weight:800;letter-spacing:-.022em;line-height:1.06;
  text-transform:uppercase;margin:0;
}
.eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--azul);margin:0 0 .9rem;
}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  padding:.85rem 1.6rem;font-weight:700;font-size:.9rem;letter-spacing:.02em;
  text-transform:uppercase;border-radius:var(--r);
  transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--azul);color:#fff}
.btn-pri:hover{background:var(--azul-osc)}
.btn-sec{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 2px var(--txt)}
.btn-sec:hover{background:var(--txt);color:var(--sup)}
.btn-wa{background:#1E9E5A;color:#fff}
.btn-wa:hover{background:#178A4C}

/* ═══ NAV ═══════════════════════════════════════════════ */
/* ── CINTA DE AVISOS ──────────────────────────────────────
   Arriba de todo, antes de la topbar. Es la única superficie oscura
   del sitio y está bien que lo sea: es una franja de 34px que tiene
   que cortar, no una sección. Se va con el scroll (la sticky es
   `.nav`) y se frena al pasarle el mouse por encima para poder leerla.
   El contenido sale de AVISOS y de `avisoEnvio()`. */
.cinta{background:var(--tinta);color:#fff;overflow:hidden;padding-block:.55rem}
.cinta .marquee{gap:0;animation:corre 52s linear infinite}
.cinta:hover .marquee{animation-play-state:paused}
.cinta-item{
  display:inline-flex;align-items:center;gap:.45rem;padding-left:1.5rem;
  font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;
}
/* El verde es el mismo del badge de envío del catálogo, aclarado para
   que tenga contraste sobre el fondo oscuro. */
.cinta-item i{font-size:.95rem;color:#5BD48C}
.cinta-item b{font-weight:800;color:#5BD48C}
/* Separador entre avisos, en flujo normal: el cuadradito aporta la
   mitad derecha del aire y el padding del siguiente item la otra
   mitad. Cuadrado y no círculo, que acá el radio es 0 en todo. */
.cinta-item::after{
  content:'';width:3px;height:3px;flex-shrink:0;
  background:rgba(255,255,255,.34);margin-left:1.5rem;
}

.topbar{background:var(--sup-3);color:var(--txt-2);font-size:.78rem;border-bottom:1px solid var(--linea)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;height:34px}
.topbar span{display:inline-flex;align-items:center;gap:.4rem}
.topbar i{color:var(--naranja);font-size:.95rem}
.topbar .oculta-mv{display:none}
@media(min-width:900px){.topbar .oculta-mv{display:inline-flex}}

.nav{position:sticky;top:0;z-index:60;background:var(--sup-2);color:var(--txt);border-bottom:1px solid var(--linea)}
/* clase propia, NO `.nav .wrap`: ese selector también alcanzaba al .wrap
   de adentro del mega menú y le imponía display:flex y height:72px. */
.nav-fila{
  max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,40px);
  display:flex;align-items:center;gap:clamp(12px,2.5vw,32px);height:72px;
}

/* Logo real: la mascota del badge oficial + el logotipo compuesto en
   texto, respetando la estructura del original ("Ferretería" en regular
   sobre "DOS CLAVOS" en bold espaciado). En texto y no en imagen para
   que quede nítido en cualquier tamaño y se pueda poner en blanco. */
.marca{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.marca img{height:46px;width:auto;flex-shrink:0}
.marca-txt{display:flex;flex-direction:column;line-height:1.08}
.marca .m1{font-size:.92rem;font-weight:400;letter-spacing:-.005em}
.marca .m2{font-size:1.02rem;font-weight:800;letter-spacing:.105em}
@media(max-width:520px){
  .marca img{height:38px}
  .marca .m1{font-size:.8rem}
  .marca .m2{font-size:.88rem}
}

.nav-cats{
  display:none;align-items:center;gap:.5rem;padding:.6rem 1.1rem;
  background:var(--azul);color:#fff;font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;
  transition:background .18s var(--ease);
}
@media(min-width:1080px){.nav-cats{display:inline-flex}}
.nav-cats:hover,.nav-cats[aria-expanded="true"]{background:var(--azul-osc)}

.buscador{flex:1;display:none;position:relative;min-width:0}
@media(min-width:760px){.buscador{display:block}}
.buscador input{
  width:100%;height:44px;padding:0 2.9rem 0 1rem;border:1px solid var(--linea);
  border-radius:var(--r);background:var(--sup-3);color:var(--tinta);
  font-size:.92rem;font-family:inherit;
}
.buscador input::placeholder{color:#6C7079}
.buscador input:focus{outline:3px solid var(--naranja);outline-offset:1px}
.buscador button{
  position:absolute;right:0;top:0;height:44px;width:46px;color:var(--txt-2);
  display:grid;place-items:center;font-size:1.15rem;
}

.nav-acc{display:flex;align-items:center;gap:.25rem;margin-left:auto;flex-shrink:0}
.nav-ico{
  display:grid;place-items:center;width:44px;height:44px;font-size:1.3rem;
  color:var(--txt);transition:color .18s var(--ease);position:relative;
}
.nav-ico:hover{color:var(--azul)}
.nav-ico .bolita{
  position:absolute;top:6px;right:5px;background:var(--naranja);color:#fff;
  font-size:.6rem;font-weight:800;min-width:16px;height:16px;display:grid;
  place-items:center;padding:0 3px;
}
.wa-btn{
  display:none;align-items:center;gap:.5rem;padding:.6rem 1rem;background:#1E9E5A;
  color:#fff;font-weight:700;font-size:.82rem;text-transform:uppercase;
}
@media(min-width:1200px){.wa-btn{display:inline-flex}}
.wa-btn:hover{background:#178A4C}

/* ── MEGA MENÚ ────────────────────────────────────────────
   Rehecho: antes era una grilla plana de 12 celdas colgando de
   un absolute, y el panel solo pintaba fondo en la primera fila.
   Ahora el fondo va en un elemento propio con altura de contenido
   y las categorías están agrupadas por rubro, que además se lee
   mucho mejor que una lista de doce. */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--sup-2);color:var(--txt);
  box-shadow:0 20px 40px rgba(21,22,26,.14);
  border-bottom:3px solid var(--azul);
  display:none;
}
.mega.abierto{display:block}
.mega-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  padding-block:2.2rem 2.4rem;
}
.mega-col h5{
  margin:0 0 .9rem;font-size:.68rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--azul);
  padding-bottom:.6rem;border-bottom:1px solid var(--linea);
}
.mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.mega-col a{
  display:flex;align-items:center;gap:.65rem;padding:.5rem .55rem;
  font-size:.9rem;font-weight:500;color:var(--txt);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.mega-col a:hover{background:var(--sup-3);color:var(--azul)}
.mega-col a i{font-size:1.2rem;color:var(--azul);flex-shrink:0}
.mega-pie{
  border-top:1px solid var(--linea);padding-block:1rem;
  display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;font-size:.85rem;color:var(--txt-2);
}
.mega-pie b{color:var(--txt)}
.mega-pie span{display:inline-flex;align-items:center;gap:.45rem}
.mega-pie i{color:var(--naranja);font-size:1.1rem}

/* ═══ HERO · banners editables ══════════════════════════
   Partido en dos: el texto sobre blanco a la izquierda y la foto
   a sangre a la derecha. Antes era foto oscurecida con texto encima;
   sin velos oscuros la página entera respira de día. */
.hero{background:var(--sup-2);border-bottom:1px solid var(--linea)}
.slide{display:none}
.slide.on{display:grid;grid-template-columns:1fr}
.slide-bg{position:relative;min-height:clamp(230px,44vw,420px)}
.slide-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-txt{
  padding:clamp(32px,5vw,60px) clamp(16px,4vw,40px) clamp(28px,4vw,52px);
  display:flex;flex-direction:column;justify-content:center;
}
@media(min-width:900px){
  .slide.on{grid-template-columns:1fr 1.08fr;min-height:clamp(420px,44vw,520px)}
  .slide-txt{
    order:-1;
    padding-left:max(clamp(16px,4vw,40px), calc((100vw - var(--max)) / 2 + clamp(16px,4vw,40px)));
    padding-right:clamp(28px,3.5vw,56px);
  }
  .slide-bg{min-height:100%}
}
.slide-txt .inner{max-width:34rem}
.slide-tag{
  display:inline-block;background:var(--naranja);color:#fff;font-size:.72rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .8rem;margin-bottom:1.1rem;
}
.slide h1{
  color:var(--txt);font-size:clamp(2.1rem,4.6vw,3.5rem);
  font-variation-settings:'wdth' 112;font-weight:900;letter-spacing:-.028em;
  line-height:1.03;text-transform:uppercase;margin:0;
}
.slide h1 em{font-style:normal;color:var(--azul)}
.slide p{color:var(--txt-2);font-size:1.05rem;margin:1rem 0 0;max-width:32rem}
.slide .acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}

.hero-nav{
  max-width:var(--max);margin-inline:auto;
  padding:0 clamp(16px,4vw,40px) 1.3rem;
  display:flex;align-items:center;gap:.5rem;
}
.punto{width:34px;height:4px;background:var(--sup-4);transition:background .25s var(--ease)}
.punto.on{background:var(--naranja)}
.hero-flechas{margin-left:auto;display:flex;gap:.3rem}
.hero-flechas button{
  width:40px;height:40px;display:grid;place-items:center;color:var(--txt);font-size:1.2rem;
  background:var(--sup-3);transition:background .18s var(--ease),color .18s var(--ease);
}
.hero-flechas button:hover{background:var(--azul);color:#fff}

/* ═══ SERVICIOS ═════════════════════════════════════════ */
.servicios{background:var(--sup-3);border-bottom:1px solid var(--linea)}
.servicios .wrap{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.servicios .wrap{grid-template-columns:repeat(4,1fr)}}
.serv{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:1.4rem clamp(12px,2vw,22px);border-left:1px solid var(--linea);
}
.serv:first-child{border-left:0}
@media(max-width:899px){
  .serv:nth-child(odd){border-left:0}
  .serv:nth-child(n+3){border-top:1px solid var(--linea)}
}
.serv i{font-size:1.6rem;color:var(--azul);flex-shrink:0;line-height:1}
.serv b{display:block;font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.serv span{display:block;font-size:.8rem;color:var(--txt-2);line-height:1.4;margin-top:.15rem}

/* ═══ CATEGORÍAS ════════════════════════════════════════ */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem;flex-wrap:wrap}

.cats{display:grid;gap:1px;background:var(--linea);grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.cats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.cats{grid-template-columns:repeat(4,1fr)}}
.cat{
  background:var(--sup-2);padding:1.6rem 1.3rem;display:flex;flex-direction:column;
  gap:.75rem;min-height:150px;position:relative;overflow:hidden;
  transition:background .2s var(--ease);
}
.cat:hover{background:var(--sup-3)}
.cat i{font-size:2rem;color:var(--azul);line-height:1}
.cat b{font-size:1rem;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.cat span{font-size:.8rem;color:var(--txt-2);margin-top:auto}
.cat .flecha{
  position:absolute;right:1.1rem;bottom:1.2rem;font-size:1.1rem;color:var(--azul);
  opacity:0;transform:translateX(-6px);transition:all .22s var(--ease);
}
.cat:hover .flecha{opacity:1;transform:translateX(0)}

/* La última celda se estira lo que haga falta para cerrar la fila.
   Los rubros cambian —eran 11, ahora 13— y sin esto la última fila
   queda coja. En una y dos columnas no aplica: ahí ya cierra sola. */
.cat-cierra{grid-column:span var(--cierra,1)}
@media(max-width:719px){.cat-cierra{grid-column:span 1}}
.cat-foto{grid-column:span 2;background:var(--sup-3);padding:0;min-height:190px}
/* A 2 columnas la celda doble no entra al lado de la primera y deja un
   hueco. Mandándola al principio abre la grilla y las 10 restantes
   cierran en 5 filas exactas. */
@media(max-width:719px){.cat-foto{order:-1}}
.cat-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-foto .sobre{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:var(--sup-2);border-top:1px solid var(--linea);
  padding:1rem 1.3rem 1.1rem;display:flex;flex-direction:column;
}
.cat-foto b{color:var(--txt)}
.cat-foto .sobre span{color:var(--txt-2);margin-top:.2rem}

/* ═══ PRODUCTOS ═════════════════════════════════════════ */
.carril{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  gap:1px;background:var(--linea);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.carril::-webkit-scrollbar{height:6px}
.carril::-webkit-scrollbar-thumb{background:var(--linea)}
@media(min-width:1040px){.carril{grid-auto-columns:1fr;overflow:visible;grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}}

.prod{background:var(--sup-2);scroll-snap-align:start;display:flex;flex-direction:column;transition:background .2s var(--ease)}
.prod:hover{background:var(--sup-3)}
.prod-img{position:relative;aspect-ratio:1;background:var(--sup-3);overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.04)}
.prod-tag{
  position:absolute;top:0;left:0;background:var(--azul);color:#fff;
  font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .7rem;
}
.prod-tag.oferta{background:var(--naranja);color:var(--tinta)}
.prod-info{padding:1.1rem 1.15rem 1.3rem;display:flex;flex-direction:column;flex:1;gap:.15rem}
.prod-marca{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-2)}
.prod-nom{font-size:.95rem;font-weight:600;line-height:1.32;margin:.25rem 0 .7rem;letter-spacing:-.01em}
.prod-precio{font-size:1.4rem;font-weight:800;letter-spacing:-.03em;font-variation-settings:'wdth' 108;margin-top:auto}
.prod-cuota{font-size:.76rem;color:var(--txt-2);margin-top:.25rem;display:flex;align-items:center;gap:.3rem}
.prod-cuota i{color:#1E9E5A;font-size:.95rem}
.prod-btn{
  margin-top:.9rem;width:100%;justify-content:center;padding:.7rem .6rem;
  background:var(--azul);color:#fff;font-weight:700;text-transform:uppercase;
  transition:background .18s var(--ease);
  /* Con dos tarjetas en 360 px, «Agregar al carrito» no entraba y se cortaba
     contra el borde. El cuerpo y el interletrado siguen al ancho disponible,
     y el texto puede partirse en dos líneas antes que desbordar. */
  font-size:clamp(.66rem,2.6vw,.8rem);
  letter-spacing:.02em;
  text-align:center;text-wrap:balance;line-height:1.25;
  min-width:0;
}
@media(min-width:640px){ .prod-btn{font-size:.8rem;letter-spacing:.04em;padding-inline:1rem} }
.prod-btn:hover{background:var(--azul-osc)}

/* ── PRODUCTO SIN FOTO · ficha técnica ────────────────────
   No imita una foto: muestra el dato que la foto no daba. Grilla de
   plano tenue, la marca arriba y el dato abajo en grande. El mismo
   cuadrado sirve en la tarjeta y en la ficha, así que todo va en
   unidades relativas. */
.prod-ph-tec{
  position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:1.05rem;
  background:
    linear-gradient(#E4E7EC 1px,transparent 1px) 0 0/100% 22px,
    linear-gradient(90deg,#E4E7EC 1px,transparent 1px) 0 0/22px 100%,
    #FAFBFC;
}
/* El degradé apaga la grilla en el centro para que el ícono y el dato
   respiren, sin tener que achicar la grilla. */
.prod-ph-tec::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(250,251,252,.92) 100%);
}
.prod-ph-tec > *{position:relative;z-index:1}
.prod-ph-tec .ph-marca{
  font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);
}
.prod-ph-tec .ph-ico{position:absolute;inset:0;display:grid;place-items:center}
.prod-ph-tec .ph-ico i{font-size:clamp(3rem,6vw,4.6rem);color:var(--tinta);opacity:.13}
.prod-ph-tec .ph-rot{
  display:block;font-size:.6rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-2);margin-bottom:.2rem;
}
.prod-ph-tec .ph-val{
  display:block;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:800;
  font-variation-settings:'wdth' 88;letter-spacing:-.01em;color:var(--tinta);line-height:1.1;
}

/* ── AVISO DE ENVÍO ───────────────────────────────────────
   Badge sobre la foto y línea arriba del precio. El badge va a la
   derecha porque la esquina izquierda ya es de la etiqueta de
   Oferta: así conviven sin pisarse y sin correr nada. */
.badge-envio{
  position:absolute;top:0;right:0;z-index:3;
  background:#1E9E5A;color:#fff;display:flex;align-items:center;gap:.3rem;
  font-size:.63rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .6rem;
}
.badge-envio i{font-size:.85rem}

.prod-envio{
  display:flex;flex-direction:column;gap:.1rem;margin-top:auto;
  padding-top:.5rem;line-height:1.3;
}
.prod-envio .pe-fila{
  display:flex;align-items:center;gap:.32rem;
  font-size:.76rem;font-weight:700;color:#1E9E5A;
}
.prod-envio .pe-fila i{font-size:.95rem}
.prod-envio .pe-zona{font-size:.68rem;color:var(--txt-2)}
/* El precio deja de empujar solo cuando ya empujó la línea de envío. */
.prod-envio + .prod-precio{margin-top:.35rem}

/* En la ficha el envío es un bloque, no una línea: acá es donde el
   visitante decide, y es el dato que el sitio no daba en ninguna
   parte mientras los competidores lideraban con él. */
.ficha-envio{
  margin:1.1rem 0 0;padding:.85rem 1rem;
  border:1px solid #BFE3CE;background:#F1FAF4;
}
.ficha-envio.neutro{border-color:var(--linea);background:var(--sup-3)}
.ficha-envio .fe-tit{
  display:flex;align-items:center;gap:.45rem;margin:0;
  font-size:.95rem;font-weight:700;color:#178A4C;
}
.ficha-envio.neutro .fe-tit{color:var(--txt)}
.ficha-envio .fe-tit i{font-size:1.15rem}
.ficha-envio .fe-zona{margin:.3rem 0 0;font-size:.8rem;line-height:1.5;color:var(--txt-2)}

/* La línea del carrito repite el aviso: si llegó hasta acá por el
   envío gratis, no puede desaparecerle justo al final. */
.linea-envio{
  display:flex;align-items:center;gap:.3rem;margin-top:.3rem;
  font-size:.75rem;font-weight:700;color:#178A4C;
}

/* ── VARIANTES ────────────────────────────────────────────
   Un producto variable es el mismo producto en otra presentación:
   látex de 1, 4 o 20 litros. Cada una tiene su precio, su código y su
   stock, así que elegir cambia las tres cosas en el lugar.
   Botones y no un <select>: en mobile se tocan mejor y dejan ver los
   precios de todas las opciones sin desplegar nada. */
.variantes{margin:1.3rem 0 0}
.var-rot{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-2);margin-bottom:.55rem;
}
.var-ops{display:flex;flex-wrap:wrap;gap:.5rem}
.var-op{
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  padding:.6rem .9rem;border:1px solid var(--linea);background:var(--sup-2);
  text-align:left;transition:border-color .15s var(--ease),background .15s var(--ease);
}
.var-op b{font-size:.92rem;font-weight:700;letter-spacing:-.01em}
.var-op span{font-size:.78rem;color:var(--txt-2)}
.var-op:hover:not(:disabled){border-color:var(--txt)}
.var-op.on{border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul);background:#F4F7FF}
.var-op.on span{color:var(--azul)}
/* La agotada se muestra igual: saber que existe en 20 litros y hoy no
   hay es información, esconderla es hacerle perder el viaje. */
.var-op.sin{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.var-cod{font-size:.78rem;color:var(--txt-2);margin:.7rem 0 0}

/* "desde $ X" en la tarjeta de un producto variable */
.prod-desde{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-2);font-variation-settings:'wdth' 100;
}
.prod-btn-consulta{background:#1E9E5A;display:flex;align-items:center;gap:.4rem}
.prod-btn-consulta:hover{background:#178A4C}
.prod-stock-agotado i{color:var(--txt-2)}
.disp.agotado i{color:var(--txt-2)}

/* La variante también se nombra en el carrito y en el panel: si no,
   dos líneas del mismo látex se ven idénticas. */
.linea-variante,.pl-variante{
  display:block;font-size:.78rem;font-weight:700;color:var(--azul);margin-top:.15rem;
}
.pl-variante{font-size:.72rem}

/* ── CHECKOUT · entrega y pago ────────────────────────────
   Cada opción muestra su precio a la derecha del título: el visitante
   compara sin tener que elegir para enterarse de cuánto sale. */
.opcion-precio{
  float:right;font-size:.85rem;font-weight:800;color:var(--azul);
  font-variation-settings:'wdth' 100;
}
.opcion b i{margin-right:.35rem;color:var(--azul)}
.opcion-nota{
  display:block;margin-top:.4rem;font-size:.78rem;font-weight:600;color:var(--txt-2);
}

/* La opción bloqueada se muestra igual, apagada y con el motivo. Si se
   escondiera, el visitante no entendería por qué desapareció el envío
   que vio anunciado en la ficha. */
.opcion-off{opacity:.5;cursor:not-allowed}
.opcion-off .opcion-nota{color:#b32d2e}

/* ── aviso de solo retiro ─────────────────────────────── */
.aviso-retiro{
  border-color:var(--naranja);background:#FFF6EF;align-items:flex-start;
}
.aviso-retiro i{color:var(--naranja)}
.aviso-retiro p{margin:0 0 .5rem}
.aviso-retiro p:last-child{margin-bottom:0}
.aviso-retiro ul{margin:.2rem 0 .6rem;padding-left:1.1rem}
.aviso-retiro li{font-weight:600;margin-bottom:.2rem}

/* ── datos bancarios ──────────────────────────────────── */
.datos-banco{border:1px solid var(--linea);background:var(--sup-3);padding:1.1rem;margin-top:1rem}
.banco-falso{
  display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .9rem;
  font-size:.82rem;line-height:1.5;color:#8A4B00;
  background:#FFF6EF;border:1px solid var(--naranja);padding:.7rem .85rem;
}
.banco-falso i{color:var(--naranja);font-size:1.1rem;flex-shrink:0}
.banco-grid{display:grid;gap:.7rem}
@media(min-width:620px){.banco-grid{grid-template-columns:1fr 1fr}}
.banco-item{background:var(--sup-2);border:1px solid var(--linea);padding:.8rem .9rem}
.banco-nom{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--azul)}
.banco-tipo{display:block;font-size:.78rem;color:var(--txt-2);margin:.15rem 0 .35rem}
.banco-num{font-size:1.05rem;font-weight:800;letter-spacing:.02em;font-variation-settings:'wdth' 100}
.banco-pie{font-size:.82rem;color:var(--txt-2);margin:.8rem 0 0}

/* ── errores de formulario ────────────────────────────────
   El mensaje va pegado al campo, no solo en el aviso flotante: el
   flotante se va solo y deja al visitante sin saber qué corregir.
   Y no alcanza con pintar el borde de rojo, porque el color solo no
   es una señal para quien no lo distingue. */
.campo .error{
  display:flex;align-items:center;gap:.3rem;margin-top:.35rem;
  font-size:.8rem;font-weight:700;color:#b32d2e;
}
/* `display:flex` le gana al atributo `hidden`, así que el error se
   vería siempre. Hay que apagarlo explícitamente. */
.campo .error[hidden]{display:none}
.campo .error::before{content:'⚠';font-size:.9rem}
.campo input.mal,.campo textarea.mal{border-color:#b32d2e;box-shadow:inset 0 0 0 1px #b32d2e}
.campo .opc{text-transform:none;font-weight:400}

/* Foco visible en todo lo que se puede tocar con el teclado. */
.opcion:focus-within{outline:2px solid var(--azul);outline-offset:2px}

/* ── PAGINADO ─────────────────────────────────────────────
   El catálogo real son 11.517 productos: 480 páginas. Por eso no
   alcanza con anterior/siguiente y hay que poder saltar. */
.paginado{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding:clamp(28px,4vw,44px) 0 0;
}
.paginado:empty{display:none}
.pag-cuenta{margin:0;font-size:.85rem;color:var(--txt-2)}
.pag-cuenta b{color:var(--txt);font-weight:700}
.pag-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem}
.pag-b{
  min-width:42px;height:42px;padding:0 .7rem;
  display:grid;place-items:center;
  border:1px solid var(--linea);background:var(--sup-2);
  font-family:inherit;font-size:.9rem;font-weight:600;color:var(--txt);
  cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease);
}
.pag-b:hover:not(:disabled):not(.on){border-color:var(--txt)}
.pag-b:disabled{opacity:.4;cursor:not-allowed}
/* La página actual no se marca solo con color: además no es clicable
   y lleva aria-current, para quien no distingue el azul. */
.pag-b.on{background:var(--azul);border-color:var(--azul);color:#fff;cursor:default}
.pag-b:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.pag-b i{font-size:1.05rem}
.pag-puntos{display:grid;place-items:center;min-width:28px;height:42px;color:var(--txt-2)}

/* Plegar la lista de marcas: una ferretería puede tener cincuenta. */
.ver-mas{
  margin-top:.5rem;padding:.35rem 0;background:none;border:0;
  font-family:inherit;font-size:.82rem;font-weight:700;color:var(--azul);
  cursor:pointer;text-align:left;
}
.ver-mas:hover{text-decoration:underline;text-underline-offset:3px}

/* ═══ FACHADA ═══════════════════════════════════════════
   La foto se muestra limpia, sin velo, y los datos van en una banda
   blanca debajo. Familia de layout distinta a la del hero partido. */
.fachada{background:var(--sup-3);border-block:1px solid var(--linea)}
.fachada-foto{position:relative;height:clamp(240px,34vw,420px);background:var(--sup-4)}
.fachada-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fachada-datos{
  background:var(--sup-2);border-top:1px solid var(--linea);
}
.fachada-datos .wrap{
  padding-block:clamp(28px,3.5vw,44px);display:grid;gap:1.6rem;align-items:center;
}
@media(min-width:900px){.fachada-datos .wrap{grid-template-columns:1fr auto}}
.fachada h2{margin:0}
.fachada .direccion{
  font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:600;
  margin:.9rem 0 0;letter-spacing:-.01em;
}
.fachada .horario{color:var(--txt-2);font-size:.95rem;margin:.4rem 0 0}
.fachada .acciones{display:flex;flex-wrap:wrap;gap:.7rem}

/* ═══ QUIÉNES SOMOS · texto tal cual la web vieja ═══════ */
.nosotros{background:var(--sup-3);border-block:1px solid var(--linea)}
.nosotros .wrap{padding-block:clamp(48px,6vw,76px)}
.nosotros h2{
  font-size:1.35rem;font-weight:800;letter-spacing:-.015em;margin:0 0 1.6rem;
  text-transform:none;
}
.nosotros .cuerpo{columns:2;column-gap:3rem;max-width:74rem}
@media(max-width:820px){.nosotros .cuerpo{columns:1}}
.nosotros p{
  margin:0 0 1.05rem;color:var(--txt-2);font-size:1rem;line-height:1.7;
  break-inside:avoid;
}
.nosotros p:first-child{color:var(--txt);font-weight:600}

/* ═══ MARCAS ════════════════════════════════════════════ */
.marcas{border-bottom:1px solid var(--linea);background:var(--sup-2);padding-block:2.2rem;overflow:hidden}
.marquee{display:flex;gap:3.4rem;width:max-content;animation:corre 34s linear infinite}
@keyframes corre{to{transform:translateX(-50%)}}
.marcas:hover .marquee{animation-play-state:paused}
.marca-item{
  font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--txt);
  opacity:.34;font-variation-settings:'wdth' 105;text-transform:uppercase;
  white-space:nowrap;transition:opacity .2s var(--ease),color .2s var(--ease);
}
.marca-item:hover{opacity:1;color:var(--azul)}

/* ═══ FOOTER ════════════════════════════════════════════ */
.pie{background:var(--sup-3);color:var(--txt-2);border-top:1px solid var(--linea);padding-block:clamp(44px,6vw,72px) 0}
.pie .wrap{display:grid;gap:2.4rem}
@media(min-width:860px){.pie .wrap{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.pie h4{color:var(--txt);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.1rem}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9rem}
.pie a:hover{color:var(--azul)}
.pie .dato{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;margin-bottom:.7rem}
.pie .dato i{color:var(--naranja);font-size:1.1rem;flex-shrink:0;margin-top:.1rem}
.pie .marca .m1,.pie .marca .m2{color:var(--txt)}
.pie .marca img{height:52px}
.pie-legal{
  margin-top:2.8rem;border-top:1px solid var(--linea);padding-block:1.3rem;
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;font-size:.8rem;color:var(--txt-2);
}

/* ═══ REVEAL ════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .marquee{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   INTERIORES · listado, ficha y carrito
   Todo lo de abajo se suma al sistema de la home sin tocarlo:
   mismos tokens, mismo radio 0, mismas familias de layout.
   ═══════════════════════════════════════════════════════════ */

/* ── MENÚ MOBILE ─────────────────────────────────────────
   La home no lo necesitaba porque era una sola pantalla. Con
   interiores sí: abajo de 1080px no había forma de llegar a
   una categoría, el botón PRODUCTOS estaba oculto. */
.nav-burger{
  display:grid;place-items:center;width:44px;height:44px;font-size:1.5rem;
  color:var(--txt);flex-shrink:0;
}
@media(min-width:1080px){.nav-burger{display:none}}

.velo{
  position:fixed;inset:0;background:rgba(21,22,26,.45);z-index:80;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s;
}
.velo.abierto{opacity:1;visibility:visible}

.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);z-index:90;
  background:var(--sup-2);border-right:1px solid var(--linea);
  transform:translateX(-100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.abierto{transform:none}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(16px,4vw,22px);border-bottom:1px solid var(--linea);
}
.drawer-top button{font-size:1.5rem;color:var(--txt);display:grid;place-items:center;width:40px;height:40px}
.drawer-body{padding:1.2rem clamp(16px,4vw,22px) 2rem}
.drawer .buscador{display:block;margin-bottom:1.4rem}
.drawer h5{
  margin:1.5rem 0 .6rem;font-size:.68rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--azul);padding-bottom:.5rem;border-bottom:1px solid var(--linea);
}
.drawer h5:first-child{margin-top:0}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer ul a{
  display:flex;align-items:center;gap:.65rem;padding:.6rem .3rem;
  font-size:.95rem;font-weight:500;border-bottom:1px solid var(--linea);
}
.drawer ul a i{font-size:1.2rem;color:var(--azul)}
.drawer ul a:hover{color:var(--azul)}
.drawer-pie{margin-top:1.8rem;display:grid;gap:.6rem}

/* ── PANEL DE CARRITO · la compra rápida ──────────────────
   Entra por la derecha para no confundirse con el menú, que entra
   por la izquierda. El pie queda fijo abajo: el subtotal y el botón
   se ven siempre, por largo que sea el carrito. */
.panel{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:90;
  background:var(--sup-2);border-left:1px solid var(--linea);
  transform:translateX(100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;
}
.panel.abierto{transform:none}
.panel-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem clamp(16px,4vw,22px);border-bottom:1px solid var(--linea);flex-shrink:0;
}
.panel-top b{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.panel-top button{font-size:1.5rem;color:var(--txt);display:grid;place-items:center;width:40px;height:40px}
.panel-body{flex:1;overflow-y:auto;padding:.4rem clamp(16px,4vw,22px)}

.panel-linea{
  display:grid;grid-template-columns:64px 1fr auto;gap:.85rem;align-items:start;
  padding:1rem 0;border-bottom:1px solid var(--linea);
}
.panel-linea:last-child{border-bottom:0}
/* Lo recién agregado se marca un momento para que se entienda qué
   entró, sobre todo cuando el carrito ya tenía cosas. */
.panel-linea.nuevo{
  box-shadow:inset 3px 0 0 var(--azul);
  padding-left:.7rem;margin-left:-.7rem;
}
.pl-img{position:relative;width:64px;aspect-ratio:1;background:var(--sup-3);overflow:hidden;display:block}
.pl-img img{width:100%;height:100%;object-fit:cover}
.pl-datos{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.pl-marca{font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-2)}
.pl-nom{font-size:.87rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.pl-nom:hover{color:var(--azul)}
.pl-envio{
  display:flex;align-items:center;gap:.28rem;
  font-size:.7rem;font-weight:700;color:#1E9E5A;margin-top:.15rem;
}
.pl-fila{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-top:.55rem}
.pl-sub{font-size:.95rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.pl-quitar{color:var(--txt-2);font-size:1.05rem;width:32px;height:32px;display:grid;place-items:center}
.pl-quitar:hover{color:var(--naranja)}

.cant-mini button{width:32px;min-height:34px;font-size:.85rem}
.cant-mini input{width:34px;min-height:34px;font-size:.85rem}

.panel-vacio{text-align:center;padding:3rem 1rem}
.panel-vacio i{font-size:2.6rem;color:var(--linea)}
.panel-vacio b{display:block;margin:.8rem 0 .4rem;font-size:1rem}
.panel-vacio p{font-size:.85rem;color:var(--txt-2);line-height:1.55;margin:0}

.panel-pie{
  flex-shrink:0;border-top:1px solid var(--linea);
  padding:1.1rem clamp(16px,4vw,22px) 1.3rem;display:grid;gap:.6rem;
}
.panel-total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.panel-total span{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.panel-total b{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;font-variation-settings:'wdth' 108}
.panel-envio{
  display:flex;align-items:flex-start;gap:.4rem;margin:0;
  font-size:.78rem;line-height:1.45;color:var(--txt-2);
}
.panel-envio i{font-size:1rem;flex-shrink:0;margin-top:.05rem}
.panel-envio.ok{color:#178A4C;font-weight:600}
.panel-envio.mixto{color:var(--txt)}
.panel-pie .btn{width:100%;justify-content:center}

/* ── MIGAS ───────────────────────────────────────────────── */
.migas{background:var(--sup-3);border-bottom:1px solid var(--linea);font-size:.82rem;color:var(--txt-2)}
.migas .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding-block:.85rem}
.migas a:hover{color:var(--azul)}
.migas i{font-size:.85rem;opacity:.55}
.migas b{color:var(--txt);font-weight:600}

/* ── ENCABEZADO DE PÁGINA ────────────────────────────────── */
.cab{background:var(--sup-2);border-bottom:1px solid var(--linea)}
.cab .wrap{padding-block:clamp(28px,4vw,52px)}
.cab h1{
  font-size:clamp(1.8rem,3.6vw,2.9rem);font-variation-settings:'wdth' 110;
  font-weight:800;letter-spacing:-.022em;line-height:1.05;text-transform:uppercase;margin:0;
}
.cab .bajada{color:var(--txt-2);margin:.7rem 0 0;font-size:1rem;max-width:52ch}
.cab .conteo{font-size:.85rem;color:var(--txt-2);margin:.9rem 0 0}
.cab .conteo b{color:var(--txt)}

/* chips de categorías: navegación rápida entre rubros.
   Borde por chip y no grilla de 1px: cuando la última fila queda
   incompleta, un contenedor con fondo dejaba una banda gris colgando. */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chips a{
  background:var(--sup-2);padding:.55rem 1rem;font-size:.85rem;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--linea);
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.chips a:hover{background:var(--sup-3);color:var(--azul);box-shadow:inset 0 0 0 1px var(--azul)}
.chips a.on{background:var(--azul);color:#fff;box-shadow:inset 0 0 0 1px var(--azul)}

/* ── LAYOUT DE LISTADO ───────────────────────────────────── */
.listado{padding-block:clamp(32px,4vw,56px) clamp(56px,8vw,96px)}
.listado .wrap{display:grid;gap:clamp(24px,3vw,44px);align-items:start}
.listado .wrap>*{min-width:0}
@media(min-width:960px){.listado .wrap{grid-template-columns:250px 1fr}}

.filtros{position:sticky;top:88px}
@media(max-width:959px){.filtros{position:static}}
.filtros-caja{border:1px solid var(--linea);background:var(--sup-2)}
.filtro{border-bottom:1px solid var(--linea);padding:1.1rem 1.15rem}
.filtro:last-child{border-bottom:0}
.filtro h4{
  margin:0 0 .8rem;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt);
}
.filtro label{
  display:flex;align-items:center;gap:.6rem;padding:.32rem 0;font-size:.9rem;
  color:var(--txt-2);cursor:pointer;transition:color .15s var(--ease);
}
.filtro label:hover{color:var(--txt)}
.filtro input[type=checkbox],.filtro input[type=radio]{
  appearance:none;width:17px;height:17px;border:1.5px solid var(--linea);
  background:var(--sup-2);flex-shrink:0;display:grid;place-items:center;cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.filtro input[type=radio]{border-radius:50%}
.filtro input:checked{background:var(--azul);border-color:var(--azul)}
.filtro input[type=checkbox]:checked::after{
  content:'';width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.filtro input[type=radio]:checked::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff}
.filtro input:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}
.filtro .cuenta{margin-left:auto;font-size:.78rem;color:var(--txt-2);opacity:.75}
.btn-limpiar{
  width:100%;padding:.75rem;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--txt);box-shadow:inset 0 0 0 1px var(--linea);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.btn-limpiar:hover{background:var(--txt);color:var(--sup)}

.filtros-movil{
  display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;width:100%;
  justify-content:center;font-weight:700;font-size:.85rem;text-transform:uppercase;
  letter-spacing:.04em;box-shadow:inset 0 0 0 2px var(--txt);margin-bottom:1rem;
}
@media(min-width:960px){.filtros-movil{display:none}}
@media(max-width:959px){
  .filtros-caja{display:none}
  .filtros-caja.abierto{display:block;margin-bottom:1.5rem}
}

.barra-orden{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  padding-bottom:1.1rem;border-bottom:1px solid var(--linea);margin-bottom:1.6rem;
}
.barra-orden .resultado{font-size:.88rem;color:var(--txt-2)}
.barra-orden .resultado b{color:var(--txt)}
.barra-orden label{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--txt-2)}
.barra-orden select{
  font-family:inherit;font-size:.88rem;padding:.55rem 2rem .55rem .8rem;border:1px solid var(--linea);
  background:var(--sup-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235E636E'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right .6rem center/12px;
  color:var(--txt);border-radius:0;appearance:none;cursor:pointer;
}
.barra-orden select:focus{outline:3px solid var(--naranja);outline-offset:1px}

/* pastillas de filtros aplicados */
.aplicados{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.aplicados:empty{display:none}
.pastilla{
  display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .7rem;
  background:var(--sup-3);border:1px solid var(--linea);font-size:.8rem;font-weight:600;
}
.pastilla button{color:var(--txt-2);font-size:.95rem;display:grid;place-items:center}
.pastilla button:hover{color:var(--naranja)}

/* ── GRILLA DE PRODUCTOS ─────────────────────────────────── */
/* El borde va en cada tarjeta y no en el fondo de la grilla: cuando la
   última fila queda incompleta, el fondo del contenedor asomaba como un
   bloque gris. Con gap de 1px los bordes de las vecinas se tocan y dan
   la misma línea fina de siempre. */
/* ⚠️ `minmax(0,1fr)` y no `1fr` a secas. Un track `1fr` tiene min-width auto,
   o sea que no baja del min-content de la tarjeta más ancha: con nombres como
   "Adaptador Atornillador 11 PCS MOD.23701" el par de columnas medía 452 px
   dentro de un contenedor de 358, y la página entera scrolleaba de costado en
   mobile. Con minmax(0,…) el track puede achicarse y el texto envuelve. */
.grid-prods{display:grid;gap:1px;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-prods .prod{box-shadow:0 0 0 1px var(--linea);min-width:0}
@media(min-width:640px){.grid-prods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1180px){.grid-prods{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Códigos y medidas largas ("MOD.23701", "1/2\"") no tienen dónde cortar:
   sin esto desbordan la tarjeta aunque el track ya achique bien. */
.grid-prods .prod-nom,.grid-prods .prod-marca{overflow-wrap:anywhere}

/* Placeholder para los productos sin foto todavía: en vez de repetir
   la misma imagen 30 veces, la celda muestra el ícono del rubro. Se lee
   como catálogo esperando fotos, que es exactamente lo que es. */
.prod-ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(160deg,#F7F8FA,#EDEFF2);
}
.prod-ph i{font-size:clamp(2.4rem,5vw,3.4rem);color:var(--azul);opacity:.17}
.prod-ph span{
  position:absolute;bottom:.7rem;left:0;right:0;text-align:center;
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-2);opacity:.55;
}
.prod-stock-bajo i{color:var(--naranja)}
.prod-stock-pedido i{color:var(--txt-2)}

/* estado vacío */
.vacio{
  border:1px solid var(--linea);padding:clamp(38px,6vw,72px) 1.5rem;text-align:center;
  background:var(--sup-2);
}
.vacio i{font-size:2.6rem;color:var(--linea)}
.vacio b{display:block;font-size:1.15rem;margin:.9rem 0 .4rem;letter-spacing:-.01em}
.vacio p{color:var(--txt-2);margin:0 auto 1.5rem;max-width:40ch;font-size:.95rem}

/* ── FICHA DE PRODUCTO ───────────────────────────────────── */
.ficha{padding-block:clamp(32px,4vw,56px)}
.ficha .wrap{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media(min-width:900px){.ficha .wrap{grid-template-columns:1.05fr 1fr}}

.ficha-foto{position:relative;aspect-ratio:1;background:var(--sup-3);border:1px solid var(--linea);overflow:hidden}
.ficha-foto>img{width:100%;height:100%;object-fit:cover}
.ficha-foto .prod-tag{z-index:2}

.ficha-marca{
  font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--azul);margin:0 0 .6rem;
}
.ficha h1{
  font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;letter-spacing:-.022em;
  line-height:1.15;margin:0;
}
.ficha .sku{font-size:.8rem;color:var(--txt-2);margin:.7rem 0 0}
.ficha .precio{
  font-size:clamp(2.1rem,4vw,2.9rem);font-weight:800;letter-spacing:-.035em;
  font-variation-settings:'wdth' 108;margin:1.3rem 0 .4rem;line-height:1;
}
.ficha .iva{font-size:.82rem;color:var(--txt-2);margin:0}
.ficha .disp{display:flex;align-items:center;gap:.45rem;font-size:.9rem;font-weight:600;margin:1.1rem 0 0}
.ficha .disp i{font-size:1.15rem;color:#1E9E5A}
.ficha .disp.bajo i{color:var(--naranja)}
.ficha .disp.pedido i{color:var(--txt-2)}

.compra{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch;
  margin:1.6rem 0 0;padding:1.4rem 0;border-block:1px solid var(--linea);
}
.cant{display:flex;align-items:center;border:1px solid var(--linea);flex-shrink:0}
.cant button{width:44px;height:100%;min-height:48px;display:grid;place-items:center;font-size:1.1rem;color:var(--txt);transition:background .15s var(--ease)}
.cant button:hover{background:var(--sup-3)}
.cant input{
  width:52px;height:48px;border:0;border-inline:1px solid var(--linea);text-align:center;
  font-family:inherit;font-weight:700;font-size:1rem;background:var(--sup-2);color:var(--txt);
  -moz-appearance:textfield;
}
.cant input::-webkit-outer-spin-button,.cant input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.compra .btn{flex:1;justify-content:center;min-width:190px;padding-block:1rem}

.ficha-servicios{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:1.6rem}
.ficha-servicios .serv{border-left:0;border-top:0;background:var(--sup-2);padding:1.1rem 1.2rem}

.bloques{padding-bottom:clamp(56px,8vw,96px)}
.bloque{border-top:1px solid var(--linea);padding-top:clamp(28px,3.5vw,44px);margin-top:clamp(28px,3.5vw,44px)}
.bloque h2{font-size:1.25rem;font-weight:800;letter-spacing:-.015em;margin:0 0 1.2rem;text-transform:none}
.bloque p{color:var(--txt-2);line-height:1.7;margin:0 0 1rem;max-width:70ch}

.tabla-specs{width:100%;border-collapse:collapse;max-width:44rem;font-size:.92rem}
.tabla-specs tr{border-bottom:1px solid var(--linea)}
.tabla-specs tr:first-child{border-top:1px solid var(--linea)}
.tabla-specs th{
  text-align:left;font-weight:600;color:var(--txt-2);padding:.8rem 1.2rem .8rem 0;
  width:42%;vertical-align:top;
}
.tabla-specs td{padding:.8rem 0;font-weight:600}

/* ── CARRITO ─────────────────────────────────────────────── */
.carrito{padding-block:clamp(32px,4vw,56px) clamp(56px,8vw,96px)}
.carrito .wrap{display:grid;gap:clamp(24px,3vw,44px);align-items:start}
@media(min-width:900px){.carrito .wrap{grid-template-columns:1fr 340px}}

.lineas{border:1px solid var(--linea);background:var(--sup-2)}
.linea{display:grid;grid-template-columns:88px 1fr;gap:1rem;padding:1.15rem;border-bottom:1px solid var(--linea)}
.linea:last-child{border-bottom:0}
@media(min-width:720px){.linea{grid-template-columns:96px 1fr auto;align-items:center;gap:1.4rem}}
.linea-img{position:relative;aspect-ratio:1;background:var(--sup-3);overflow:hidden;border:1px solid var(--linea)}
.linea-img img{width:100%;height:100%;object-fit:cover}
.linea-marca{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-2)}
.linea-nom{font-size:.95rem;font-weight:600;line-height:1.3;margin:.2rem 0 .55rem;letter-spacing:-.01em}
.linea-nom a:hover{color:var(--azul)}
.linea-unit{font-size:.82rem;color:var(--txt-2)}
.linea-acc{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.7rem}
@media(min-width:720px){.linea-acc{margin-top:0;flex-direction:column;align-items:flex-end;gap:.7rem}}
.linea .cant button{min-height:38px;height:38px;width:36px}
.linea .cant input{height:38px;width:44px;font-size:.92rem}
.linea-sub{font-size:1.15rem;font-weight:800;letter-spacing:-.025em;white-space:nowrap}
.linea-quitar{font-size:.8rem;color:var(--txt-2);display:inline-flex;align-items:center;gap:.35rem}
.linea-quitar:hover{color:var(--naranja)}

.resumen{border:1px solid var(--linea);background:var(--sup-2);position:sticky;top:88px}
@media(max-width:899px){.resumen{position:static}}
.resumen h3{
  margin:0;padding:1.1rem 1.3rem;font-size:.75rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;border-bottom:1px solid var(--linea);
}
.resumen-cuerpo{padding:1.3rem}
.resumen .fila{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;color:var(--txt-2);margin-bottom:.7rem}
.resumen .fila b{color:var(--txt);font-weight:600}
.resumen .total{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px solid var(--linea);margin-top:1.1rem;padding-top:1.1rem;
}
.resumen .total span{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.resumen .total b{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;font-variation-settings:'wdth' 108}
.resumen .btn{width:100%;justify-content:center;margin-top:1.2rem}
.resumen .nota{font-size:.78rem;color:var(--txt-2);line-height:1.55;margin:1.1rem 0 0}

/* ── AVISO FLOTANTE AL AGREGAR ───────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:120;
  display:flex;align-items:center;gap:.7rem;background:var(--tinta);color:#fff;
  padding:.9rem 1.3rem;font-size:.9rem;font-weight:600;max-width:calc(100vw - 32px);
  box-shadow:0 12px 30px rgba(21,22,26,.24);transition:transform .35s var(--ease);
}
.toast.on{transform:translate(-50%,0)}
.toast i{font-size:1.3rem;color:#5BD48C;flex-shrink:0}
.toast a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .toast,.drawer,.velo,.panel{transition-duration:.001ms!important}
}

/* ── CHECKOUT ────────────────────────────────────────────── */
.pasos{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.paso{background:var(--sup-2);padding:clamp(20px,2.5vw,30px)}
.paso-titulo{display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem}
.paso-num{
  width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;
  background:var(--azul);color:#fff;font-size:.85rem;font-weight:800;
}
.paso-titulo h2{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.015em;text-transform:none}

.campos{display:grid;gap:1rem}
@media(min-width:620px){.campos.dos{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-2)}
.campo input,.campo textarea,.campo select{
  font-family:inherit;font-size:.95rem;padding:.75rem .9rem;border:1px solid var(--linea);
  background:var(--sup-2);color:var(--txt);border-radius:0;width:100%;
}
.campo textarea{resize:vertical;min-height:88px}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:3px solid var(--naranja);outline-offset:1px}
.campo .ayuda{font-size:.78rem;color:var(--txt-2)}

/* opciones de entrega y pago: la etiqueta entera es el control */
.opciones{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.opcion{
  display:flex;gap:.85rem;align-items:flex-start;background:var(--sup-2);
  padding:1rem 1.1rem;cursor:pointer;transition:background .15s var(--ease);
}
.opcion:hover{background:var(--sup-3)}
/* 🚨 `display` explícito le gana al atributo `hidden` del HTML, así que sin
   esta línea un `<label hidden>` se sigue viendo.

   Mordió el 28/8/2026: el checkout esconde «Efectivo o tarjeta en el local»
   cuando el pedido va a domicilio, y la opción seguía visible y clickeable.
   Quien la elegía llegaba hasta el final y el servidor le rechazaba el pedido
   con «no se puede pagar en el mostrador un pedido que va a domicilio». */
.opcion[hidden]{display:none}
.opcion:has(input:checked){background:var(--sup-3);box-shadow:inset 3px 0 0 var(--azul)}
.opcion input{
  appearance:none;width:18px;height:18px;border:1.5px solid var(--linea);border-radius:50%;
  flex-shrink:0;margin-top:.15rem;display:grid;place-items:center;cursor:pointer;
}
.opcion input:checked{background:var(--azul);border-color:var(--azul)}
.opcion input:checked::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff}
.opcion input:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}
.opcion b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.01em}
.opcion span{display:block;font-size:.83rem;color:var(--txt-2);line-height:1.45;margin-top:.15rem}

.entrega-dir{display:none;margin-top:1.2rem}
.entrega-dir.on{display:grid}

/* resumen del pedido dentro del checkout */
.resumen-lineas{display:grid;gap:.8rem;padding-bottom:1.1rem;border-bottom:1px solid var(--linea);margin-bottom:1.1rem}
.resumen-linea{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;line-height:1.4}
.resumen-linea span{color:var(--txt-2)}
.resumen-linea b{white-space:nowrap;font-weight:700}

/* El aviso de que la pasarela no está conectada. Va en la página, no
   escondido en un alert: es información del estado del proyecto. */
.aviso{
  display:flex;gap:.8rem;align-items:flex-start;background:#FFF6EC;
  border:1px solid #F3D2AE;padding:1rem 1.15rem;margin-top:1.3rem;
}
.aviso i{color:var(--naranja);font-size:1.3rem;flex-shrink:0;line-height:1.3}
.aviso p{margin:0;font-size:.86rem;line-height:1.6;color:#6B4415}
.aviso b{color:#4A2E0C}
.toast i.alerta{color:#FFB35C}

/* ── Las dos formas de recibirlo ──────────────────────────────────────────
   Van una al lado de la otra en el resumen del carrito. El retiro no es
   letra chica: cuando el envío dice "se coordina" es la única opción con
   precio cierto, y es lo que evita que la persona cierre la pestaña. */
.entrega-op{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 4px}
.entrega-op .op{border:1px solid var(--linea);padding:11px 12px;display:flex;
  flex-direction:column;gap:2px;background:#fff}
.entrega-op .op i{font-size:19px;color:var(--txt-2);margin-bottom:2px}
.entrega-op .op b{font-size:13.5px;line-height:1.25}
.entrega-op .op span{font-size:12px;color:var(--txt-2);line-height:1.35}
/* La opción con precio cierto se marca; la otra queda neutra. */
.entrega-op .op-cierta{border-color:var(--azul);background:#F5F7FF}
.entrega-op .op-cierta i,.entrega-op .op-cierta b{color:var(--azul)}
@media (max-width:420px){.entrega-op{grid-template-columns:1fr}}

/* ═══ PÁGINAS DE TEXTO ══════════════════════════════════════
   Términos y Preguntas frecuentes. Vienen del sitio anterior, que se
   da de baja. Una sola columna y medida de lectura corta: son páginas
   para leer, no para escanear como el catálogo. */
.prosa{background:var(--sup-3);border-bottom:1px solid var(--linea)}
.prosa .wrap{padding-block:clamp(40px,5.5vw,72px);max-width:56rem}
.prosa h2{
  font-size:1.15rem;font-weight:800;letter-spacing:-.015em;
  margin:2.6rem 0 .9rem;text-transform:none;
}
.prosa h2:first-child{margin-top:0}
.prosa p,.prosa li{color:var(--txt-2);font-size:1rem;line-height:1.72;margin:0 0 1rem}
.prosa ul{margin:0 0 1.2rem;padding-left:1.15rem}
.prosa li{margin-bottom:.45rem}
.prosa strong{color:var(--txt);font-weight:700}
.prosa a{color:var(--acento);text-decoration:underline;text-underline-offset:2px}

/* Cada pregunta abre y cierra: son doce y de largo desparejo, una lista
   abierta obliga a scrollear de más para encontrar la que interesa. */
.faq{border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.2rem 1.15rem 0;position:relative;
  font-weight:700;color:var(--txt);font-size:1.02rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:.55rem;top:1.55rem;width:9px;height:9px;
  border-right:2px solid var(--txt-2);border-bottom:2px solid var(--txt-2);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--acento)}
.faq .resp{padding:0 0 1.3rem}
.faq .resp p:last-child,.faq .resp ul:last-child{margin-bottom:0}