@import url("../fonts/fuentes.css");
@import url("../fonts/opciones.css");

/* ==========================================================================
   KEVSTORE — Prototipo tienda en línea
   Ad Center México · 2026
   Base lógica: WooCommerce (carrito / checkout / mi cuenta)
   ========================================================================== */

:root{
  --negro:#0b0b0c;          /* tinta */
  --negro-2:#17171a;
  --negro-3:#232328;
  --rojo:#d81324;           /* del logo */
  --rojo-osc:#8e0d18;
  --blanco:#ffffff;
  --hueso:#f1f1ef;          /* mármol claro — el fondo de todas sus fotos */
  --marmol:#e6e6e3;         /* veta */
  --gris:#8a8a90;
  --gris-2:#c9c9cd;
  --linea:rgba(255,255,255,.12);
  --linea-osc:rgba(0,0,0,.10);
  --verde:#13a05a;
  --ambar:#e8a317;

  --display:"Chivo","Helvetica Neue",Arial,sans-serif;
  --exp:125;   /* ancho del display */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --r:4px;
  --max:1280px;
  --shadow:0 18px 50px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--negro);background:var(--blanco);
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55;
}
img{max-width:100%;display:block}
/* Todo SVG parte de un tamaño sensato: sin esto, los que no tienen regla
   propia se estiran al ancho del contenedor (de ahí las flechas gigantes). */
svg{width:1em;height:1em;flex:0 0 auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{margin:0 0 .4em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(30px,5vw,52px)}
h2{font-size:clamp(24px,3.4vw,36px)}
.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rojo);font-weight:700;margin-bottom:10px;
}
.serif,.display{
  font-family:var(--display);font-weight:900;
  letter-spacing:-.022em;line-height:1.08;
}
/* el precio es el héroe de este negocio: se trata como cartel */
.precio-grande{
  font-family:var(--display);font-weight:900;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;
}

/* ---------- Marquee superior ---------- */
.marquee{
  background:var(--rojo);color:#fff;overflow:hidden;position:relative;z-index:60;
  padding:9px 0;white-space:nowrap;
}
.marquee-pista{display:flex;width:max-content;animation:corre 42s linear infinite}
.marquee-grupo{display:flex}
.marquee-grupo span{
  font-size:12px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;
  padding:0 26px;position:relative;
}
.marquee-grupo span::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);
}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-pista{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.marquee-pista{animation:none}}

/* ---------- Header (blanco) ---------- */
.header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);color:var(--negro);border-bottom:1px solid var(--linea-osc);
}
.header .wrap{display:flex;align-items:center;gap:28px;height:80px}
.logo{display:flex;align-items:center;gap:11px}
.logo img{width:52px;height:52px;flex:0 0 auto;border-radius:50%}
.logo-txt{font-family:var(--display);font-size:19px;letter-spacing:.14em;font-weight:800;line-height:1.1}
.logo-txt small{
  display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.26em;
  color:var(--gris);font-weight:500;text-transform:uppercase;margin-top:2px;
}

.nav{display:flex;gap:26px;margin-left:auto;align-items:center;align-self:stretch}
/* Solo los links de primer nivel llevan la caja alineada.
   Ojo: el selector NO puede ser .nav a, porque también atrapa
   los del dropdown y les impone una altura que no les cabe. */
.nav > a,.nav .dd > a{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:#3a3a3a;transition:.2s;display:inline-flex;align-items:center;
  height:34px;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav .dd{display:inline-flex;align-items:center;height:34px}
.nav > a:hover,.nav > a.on,.nav .dd > a:hover,.nav .dd > a.on{color:var(--negro);border-color:var(--rojo)}
.nav .dd{position:relative}
.dd-menu{
  position:absolute;top:40px;left:-14px;background:#fff;border:1px solid var(--linea-osc);
  box-shadow:0 12px 30px rgba(0,0,0,.09);
  min-width:235px;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;
}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:block;padding:10px 12px;border:0;letter-spacing:.04em;text-transform:none;font-size:13px}
.dd-menu a:hover{background:var(--hueso);color:var(--rojo)}

.acciones{display:flex;gap:2px;align-items:center;margin-left:18px}
.icon-btn{
  background:none;border:0;color:var(--negro);cursor:pointer;padding:9px;position:relative;
  display:grid;place-items:center;border-radius:50%;transition:.15s;
}
.icon-btn svg{width:21px;height:21px;display:block}
.icon-btn:hover{background:var(--hueso);color:var(--rojo)}
.badge{
  position:absolute;top:1px;right:1px;background:var(--rojo);color:#fff;font-size:9.5px;
  font-weight:800;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;
  padding:0 4px;border:2px solid #fff;
}
.burger{display:none}

/* ---------- Header NEGRO (variante) ---------- */
.header-negro{background:rgba(11,11,12,.97);border-bottom:1px solid var(--linea)}
.header-negro .logo-txt{color:#fff}
.header-negro .logo-txt small{color:var(--gris-2)}
.header-negro .nav > a,.header-negro .nav .dd > a{color:#d4d4d8}
.header-negro .nav > a:hover,.header-negro .nav > a.on,.header-negro .nav .dd > a:hover,.header-negro .nav .dd > a.on{color:#fff;border-color:var(--rojo)}
.header-negro .icon-btn{color:#fff}
.header-negro .icon-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.header-negro .badge{border-color:var(--negro)}
.header-negro .dd-menu{background:#161619;border-color:var(--linea)}
.header-negro .dd-menu a b{color:#fff}
.header-negro .dd-menu a em{color:var(--gris)}
.header-negro .dd-menu a:hover{background:rgba(255,255,255,.06)}
.header-negro .dd-menu a:hover b{color:var(--rojo)}
.header-negro .caret{opacity:.7}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border:0;border-radius:var(--r);cursor:pointer;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:.18s;
}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-osc)}
.btn-negro{background:var(--negro);color:#fff}
.btn-negro:hover{background:#333}
.btn-linea{background:transparent;color:var(--negro);border:1.5px solid var(--negro)}
.btn-linea:hover{background:var(--negro);color:#fff}
.btn-blanco{background:#fff;color:var(--negro)}
.btn-wa{background:#25d366;color:#062e14}
.btn-wa:hover{background:#1eb857}
.btn-full{width:100%}
.btn-sm{padding:10px 16px;font-size:11px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Banner de portada (imagen que ellos cambian) ---------- */
.banner{position:relative;height:var(--alto,520px);overflow:hidden;background:#1a1a1a}
.banner-img{width:100%;height:100%;object-fit:cover;display:block}
.banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,calc(var(--vel,.45) + .35)) 0%,
             rgba(0,0,0,var(--vel,.45)) 45%, rgba(0,0,0,calc(var(--vel,.45) * .45)) 100%);
}
.banner-txt{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.banner-txt.centro{text-align:center;justify-content:center}
.banner-txt.centro .banner-cta{justify-content:center}
.banner-txt h1{color:#fff;font-size:clamp(32px,4.6vw,58px);max-width:15ch;margin-bottom:16px}
.banner-txt p{color:rgba(255,255,255,.88);font-size:16.5px;max-width:48ch;margin:0 0 28px;line-height:1.6}
.banner-cta{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:640px){
  .banner{height:440px}
  .banner-txt h1{font-size:31px;max-width:none}
  .banner-txt p{font-size:14.5px}
}

/* ---------- Franja confianza ---------- */
.trust{background:var(--hueso);border-bottom:1px solid var(--linea-osc)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:26px 24px}
.trust > div{display:flex;gap:13px;align-items:center;font-size:13px}
.trust b{display:block;font-size:13.5px;line-height:1.3;margin-bottom:2px}
.trust small{color:#666;font-size:11.5px;line-height:1.45}
.trust .ico{
  width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;
  background:#fff;color:var(--rojo);border:1px solid var(--linea-osc);border-radius:50%;
}
.trust .ico svg{width:19px;height:19px}

/* ---------- Secciones ---------- */
.sec{padding:76px 0}
.sec-h{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px;flex-wrap:wrap}
.sec-h p{color:#666;margin:6px 0 0;max-width:56ch}
.link-mas{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--rojo);padding-bottom:3px}

/* ---------- Grid productos ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{position:relative;background:#fff;transition:.2s}
.card:hover{transform:translateY(-4px)}
.card-img{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:#efedea;
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .5s}
.card-img .card-hover{position:absolute;inset:0;opacity:0}
.card:hover .card-img .card-hover{opacity:1}
.card:hover .card-img img{transform:scale(1.035)}
.tags{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2}
.tag{
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;border-radius:2px;color:#fff;background:var(--negro);
}
.tag.rojo{background:var(--rojo)}
.tag.negro{background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
.tag.ambar{background:var(--ambar);color:#241a00}
.tag.verde{background:var(--verde)}
.suc{
  position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.94);
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;z-index:2;
}
.card-body{padding:14px 2px 0}
.card-cat{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.card-nom{font-size:15px;font-weight:600;margin-bottom:8px;line-height:1.3}
.card-precio{display:flex;align-items:baseline;gap:9px}
.card-precio b{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:21px}
.card-precio s{color:var(--gris);font-size:13px}
.card-vol{font-size:11.5px;color:var(--rojo);font-weight:700;margin-top:5px;letter-spacing:.02em}
.card-stock{margin-top:9px;font-size:11px;color:#b45309;font-weight:700}
.barra{height:3px;background:#eee;margin-top:5px;overflow:hidden;border-radius:2px}
.barra i{display:block;height:100%;background:var(--rojo)}
.card-btn{margin-top:12px;opacity:0;transform:translateY(4px);transition:.18s}
.card:hover .card-btn{opacity:1;transform:none}

/* ---------- Filtros catálogo ---------- */
.cat-layout{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start}
.filtros{position:sticky;top:96px;border:1px solid var(--linea-osc);padding:22px}
.f-grupo{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--linea-osc)}
.f-grupo:last-child{border:0;margin:0;padding:0}
.f-grupo h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.f-op{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;cursor:pointer;color:#333}
.f-op:hover{color:var(--rojo)}
.f-op input{accent-color:var(--rojo);width:15px;height:15px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  border:1px solid #ddd;padding:7px 12px;font-size:12px;cursor:pointer;background:#fff;
  letter-spacing:.05em;transition:.15s;
}
.chip:hover{border-color:var(--negro)}
.chip.on{background:var(--negro);color:#fff;border-color:var(--negro)}
.cat-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.cat-top p{margin:0;color:#666;font-size:13.5px}
select.sel{padding:10px 14px;border:1px solid #ddd;background:#fff;font-size:13px;font-family:inherit}

/* aviso mayoreo */
.aviso-may{
  background:linear-gradient(100deg,var(--negro),#2a0508);color:#fff;padding:22px 26px;
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:28px;
  border-left:4px solid var(--rojo);
}
.aviso-may b{font-family:var(--display);font-size:19px;display:block}
.aviso-may p{margin:4px 0 0;color:var(--gris-2);font-size:13px;max-width:60ch}

/* ---------- Producto ---------- */
.miga{font-size:12px;color:var(--gris);padding:18px 0;letter-spacing:.04em}
.miga a:hover{color:var(--rojo)}
.pdp{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:start;padding-bottom:70px}
.gal-main{aspect-ratio:4/5;background:#efedea;position:relative;overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-video{width:100%;height:100%;display:grid;place-items:center;background:#151515}
.gal-video-ph{text-align:center;color:#fff;padding:30px}
.gal-video-ph svg{width:52px;height:52px;margin:0 auto 14px;opacity:.65}
.gal-video-ph b{display:block;font-size:16px;margin-bottom:8px}
.gal-video-ph small{color:var(--gris);font-size:12.5px;line-height:1.6}

.gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumb{aspect-ratio:1;cursor:pointer;border:2px solid transparent;overflow:hidden;background:#efedea;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.on{border-color:var(--negro)}
.thumb-video{background:#151515;display:grid;place-items:center;color:#fff;gap:2px;align-content:center}
.thumb-video svg{width:20px;height:20px}
.thumb-video span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

.pdp h1{font-family:var(--display);font-size:34px;margin-bottom:6px}
.pdp-cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.stars{color:var(--ambar);font-size:14px;letter-spacing:1px}
.pdp-rev{display:flex;gap:10px;align-items:center;margin:10px 0 18px;font-size:13px;color:#666}
.precio-actual{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:40px;line-height:1}
.precio-nota{color:#666;font-size:13px;margin-top:6px}
.pdp hr{border:0;border-top:1px solid var(--linea-osc);margin:24px 0}

/* ---------- Bloque único de precios por volumen (portada) ---------- */
.vol-wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.vol-tabla{background:#fff;border:1px solid var(--linea-osc);overflow:hidden}
.vol-head{padding:20px 24px;border-bottom:1px solid var(--linea-osc)}
.vol-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.vol-head span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);font-weight:700}
.vol-tabla .tabla-vol{border:0}
.vol-tabla .tabla-vol th{background:var(--hueso);color:#555;border-bottom:1px solid var(--linea-osc)}
.vol-tabla .tabla-vol td{text-align:center}
.vol-tabla .tabla-vol td:first-child{text-align:left;padding-left:24px;font-weight:600}
.vol-tabla .tabla-vol td:last-child{padding-right:24px}
.vol-tabla .tabla-vol .ah{color:var(--verde);font-weight:700}
.vol-tabla .tabla-vol tr.tope td{background:#fff6f6}
.vol-tabla .tabla-vol tr.tope b{color:var(--rojo)}
.vol-pie{margin:0;padding:16px 24px;background:var(--hueso);font-size:12.5px;color:#666;border-top:1px solid var(--linea-osc)}
.vol-pie a{color:var(--rojo);font-weight:700;border-bottom:1px solid;margin-left:6px;white-space:nowrap}
@media(max-width:900px){.vol-wrap{grid-template-columns:1fr}}

/* enlace corto que sustituye a las tablas repetidas en otras páginas */
.vol-link{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--hueso);border:1px solid var(--linea-osc);border-left:3px solid var(--rojo);
  padding:15px 18px;font-size:13.5px;color:#444;transition:.15s;
}
.vol-link:hover{background:#f0eeeb}
.vol-link b{color:var(--negro)}
.vol-link-cta{font-size:12px;font-weight:700;color:var(--rojo);white-space:nowrap}

/* tabla volumen PDP */
.tabla-vol{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--linea-osc)}
.tabla-vol th{background:var(--negro);color:#fff;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:11px}
.tabla-vol td{padding:11px 12px;border-top:1px solid var(--linea-osc);text-align:center}
.tabla-vol tr.on td{background:#fff2f3;font-weight:700;color:var(--rojo-osc)}
.tabla-vol tr.on td:first-child::before{content:"▸ ";color:var(--rojo)}
.tabla-vol td b{font-family:var(--display);font-size:16px}

.opt-l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:22px 0 10px;display:flex;justify-content:space-between}
.opt-l a{color:var(--rojo);font-size:10.5px;border-bottom:1px solid}
.tallas{display:flex;gap:8px;flex-wrap:wrap}
.talla{width:52px;height:44px;border:1px solid #ddd;display:grid;place-items:center;cursor:pointer;font-size:13px;font-weight:600;background:#fff}
.talla:hover{border-color:var(--negro)}
.talla.on{background:var(--negro);color:#fff;border-color:var(--negro)}
.talla.off{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.colores{display:flex;gap:10px}
.color{width:34px;height:34px;border-radius:50%;border:2px solid #ddd;cursor:pointer;position:relative}
.color.on{border-color:var(--rojo);box-shadow:0 0 0 2px #fff inset}

.qty-row{display:flex;gap:12px;align-items:stretch;margin-top:22px}
.qty{display:flex;border:1px solid #ddd;align-items:center}
.qty button{width:44px;height:52px;background:#fff;border:0;font-size:19px;cursor:pointer;color:#555}
.qty button:hover{background:#f5f5f5;color:var(--rojo)}
.qty input{width:52px;height:52px;text-align:center;border:0;font-size:16px;font-weight:700;font-family:inherit}
.qty-row .btn{flex:1;padding:16px}

.saltos{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.salto{border:1px dashed var(--rojo);color:var(--rojo-osc);background:#fff7f7;padding:8px 12px;font-size:11.5px;font-weight:700;cursor:pointer;letter-spacing:.03em}
.salto:hover{background:var(--rojo);color:#fff}

.pdp-meta{margin-top:22px;font-size:13px;color:#555;display:grid;gap:9px}
.pdp-meta div{display:flex;gap:9px;align-items:flex-start}
.pdp-meta .k{color:var(--rojo);font-weight:800}

/* acordeón */
/* (el acordeón viejo con JS se eliminó — ahora es <details> nativo, ver más abajo) */

/* ---------- Reseñas ---------- */
.rev-top{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;margin-bottom:34px;
  background:#fff;border:1px solid var(--linea-osc);padding:28px}
.rev-score{text-align:center;border-right:1px solid var(--linea-osc);padding-right:32px}
.rev-score b{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:58px;font-weight:800;line-height:1;display:block;letter-spacing:-.03em}
.rev-bars{display:grid;gap:9px}
.rev-bar{display:flex;align-items:center;gap:14px;font-size:12.5px;color:#666}
.rev-bar .b{flex:1;height:8px;background:#eee;border-radius:5px;overflow:hidden}
.rev-bar .b i{display:block;height:100%;background:var(--ambar);border-radius:5px}

.rev-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{
  background:#fff;border:1px solid var(--linea-osc);border-radius:3px;padding:24px;
  display:flex;flex-direction:column;transition:.2s;
}
.rev:hover{box-shadow:0 10px 30px rgba(0,0,0,.07);transform:translateY(-2px)}
.rev-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.avatar{
  width:42px;height:42px;border-radius:50%;background:var(--hueso);color:var(--negro);
  border:1px solid var(--linea-osc);display:grid;place-items:center;font-weight:700;font-size:15px;flex:0 0 auto;
}
.rev-head b{display:block;font-size:14px}
.rev-head small{color:var(--gris);font-size:11.5px}
.rev .stars{font-size:13px;letter-spacing:1.5px}
.rev p{font-size:13.5px;color:#444;margin:9px 0 0;line-height:1.6;flex:1}
.ver{
  font-size:9.5px;color:var(--verde);font-weight:800;letter-spacing:.08em;
  background:#e9f8f0;padding:4px 8px;border-radius:20px;white-space:nowrap;
}
.rev-foto{display:flex;gap:7px;margin-top:14px}
.rev-foto img{width:56px;height:56px;object-fit:cover;border-radius:2px;border:1px solid var(--linea-osc)}
@media(max-width:900px){
  .rev-top{grid-template-columns:1fr;gap:24px}
  .rev-score{border-right:0;border-bottom:1px solid var(--linea-osc);padding:0 0 22px}
}

/* ---------- Redes + TikTok ---------- */
.tt{background:var(--negro);color:#fff}
.tt .sec-h p{color:var(--gris-2)}

.redes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px}
.red{
  display:flex;align-items:center;gap:13px;padding:16px 18px;
  background:rgba(255,255,255,.05);border:1px solid var(--linea);transition:.18s;
}
.red:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.red-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.red-ico svg{width:20px;height:20px;color:#fff}
.red.tk .red-ico{background:#000;border:1px solid rgba(255,255,255,.25)}
.red.ig .red-ico{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.red-txt b{display:block;font-family:var(--display);font-size:21px;font-weight:800;line-height:1}
.red-txt small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.red-user{margin-left:auto;text-align:right;font-size:12px;color:#e4e4e4;font-weight:600;line-height:1.35}
.red-user em{display:block;font-style:normal;font-size:10.5px;color:var(--gris);font-weight:400}
@media(max-width:900px){.redes{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.redes{grid-template-columns:1fr}.red-user{display:none}}

.tt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.tt-card{position:relative;aspect-ratio:9/16;background:#181818;border:1px solid var(--linea);overflow:hidden;cursor:pointer}
.tt-card img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:.35s}
.tt-card:hover{border-color:var(--rojo)}
.tt-card:hover img{opacity:1;transform:scale(1.05)}
.tt-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.5);
  border:1.5px solid rgba(255,255,255,.65);display:grid;place-items:center;transition:.2s;
}
.tt-play svg{width:22px;height:22px;color:#fff;margin-left:2px}
.tt-card:hover .tt-play{background:var(--rojo);border-color:var(--rojo);transform:translate(-50%,-60%) scale(1.08)}
.tt-info{position:absolute;left:0;right:0;bottom:0;padding:14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.94) 55%)}
.tt-info b{font-size:12.5px;display:block;margin-bottom:3px;line-height:1.3}
.tt-info small{color:var(--gris-2);font-size:11px}
.tt-buy{
  margin-top:9px;display:block;text-align:center;background:rgba(255,255,255,.14);
  border:1px solid var(--linea);padding:8px 9px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
}
.tt-buy:hover{background:var(--rojo);border-color:var(--rojo)}
.tt-views{
  position:absolute;top:10px;right:10px;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);
  font-size:10.5px;padding:4px 9px;font-weight:700;border-radius:2px;
}

/* ---------- Nosotros ---------- */
.nos{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.nos-fotos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nos-fotos div{aspect-ratio:3/4;background:linear-gradient(150deg,#e8e5e2,#cfccc8);display:grid;place-items:center;color:rgba(0,0,0,.2);font-size:12px;letter-spacing:.1em;text-align:center;padding:12px}
.nos-fotos div:first-child{margin-top:26px}
.nos ul{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:11px}
.nos li{font-size:14.5px;color:#444}
.nos li b{color:var(--rojo)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}

/* ---------- Footer ---------- */
.footer{background:var(--negro);color:#fff;padding:60px 0 26px;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:38px}
/* Los rótulos del pie subieron de <h4> a <h2>: eran los únicos encabezados
   de la página y brincaban de nivel. Se ven igual. */
.footer :is(h2,h4){font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--rojo);margin-bottom:16px}
.footer a,.footer p{color:var(--gris-2);font-size:13.5px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer a:hover{color:#fff}
.footer .logo-txt{color:#fff}
.footer .logo-txt small{color:var(--gris)}

.footer-redes{display:flex;gap:9px;margin-top:18px}
.footer-redes a{
  width:38px;height:38px;border:1px solid var(--linea);border-radius:50%;
  display:grid;place-items:center;color:#fff;transition:.18s;
}
.footer-redes a svg{width:18px;height:18px}
.footer-redes a:hover{background:var(--rojo);border-color:var(--rojo)}

.footer-wa{
  display:flex;align-items:center;gap:11px;background:rgba(37,211,102,.1);
  border:1px solid rgba(37,211,102,.32);padding:10px 13px;margin-bottom:9px;transition:.18s;
}
.footer-wa:hover{background:rgba(37,211,102,.2);border-color:#25d366}
.footer-wa svg{width:21px;height:21px;color:#25d366;flex:0 0 auto}
.footer-wa span{font-size:13px;color:#e8e8e8;line-height:1.3}
.footer-wa b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:700}

.footer-pagos{
  margin-top:38px;padding-top:24px;border-top:1px solid var(--linea);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.footer-pagos > span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:600}
.pagos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pagos img{height:26px;width:auto;background:#fff;padding:4px 7px;border-radius:4px}

.footer-bot{border-top:1px solid var(--linea);margin-top:24px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--gris)}
.footer-bot .aviso-num{max-width:44ch;text-align:center}
.footer-bot .aviso-num b{color:#e8e8e8}

/* ---------- Carrito ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:start;padding-bottom:70px}
.cart-tabla{width:100%;border-collapse:collapse}
.cart-tabla thead th{
  text-align:left;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);
  padding:0 0 12px;border-bottom:1px solid var(--linea-osc);font-weight:700;
}
.cart-tabla td{padding:20px 0;border-bottom:1px solid var(--linea-osc);vertical-align:top}
.cart-prod{display:flex;gap:16px}
.cart-prod .im{width:86px;height:110px;background:linear-gradient(150deg,#e8e5e2,#d2cfcb);flex:0 0 auto}
.cart-prod b{font-size:14.5px;display:block;margin-bottom:4px}
.cart-prod small{color:#777;font-size:12.5px;display:block}
.cart-prod .rm{color:var(--rojo);font-size:11.5px;background:none;border:0;padding:8px 0 0;cursor:pointer;font-weight:700}
.cart-tabla .qty{width:118px}
.cart-tabla .qty button{width:36px;height:42px}
.cart-tabla .qty input{width:44px;height:42px}
.cart-sub{text-align:right;font-family:var(--display);font-size:19px}
.cart-ahorro{display:block;font-family:var(--sans);font-size:11px;color:var(--verde);font-weight:700;margin-top:4px}

.resumen{border:1px solid var(--linea-osc);padding:26px;position:sticky;top:96px}
.resumen h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.r-row{display:flex;justify-content:space-between;padding:10px 0;font-size:13.5px;color:#444}
.r-row.total{border-top:1px solid var(--linea-osc);margin-top:10px;padding-top:16px;font-size:16px;font-weight:700;color:var(--negro)}
.r-row.total b{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:26px}
.r-row .verde{color:var(--verde);font-weight:700}
.cupon{display:flex;gap:8px;margin:16px 0}
.cupon input{flex:1;padding:12px;border:1px solid #ddd;font-size:13px;font-family:inherit}

.nudge{
  background:#fff8e6;border:1px solid #f2dfae;padding:13px 15px;font-size:12.5px;color:#6b4e00;margin-bottom:16px;
}
.nudge b{color:#8a5a00}
.nudge .barra{margin-top:9px;height:6px;background:#f0e3c2}
.nudge .barra i{background:var(--ambar)}

/* ── LOS DOS ESTADOS DE LA BARRA DE ENVÍO GRATIS ──────────────────────
   `kevreg_barra_envio()` (plugin kevstore-reglas) saca `.nudge` en dos
   estados y su comentario dice que el de "ya se lo ganó" va EN VERDE.
   La clase `.nudge-ok` se estaba imprimiendo sin que existiera una sola
   regla para ella: el aviso más vendedor de la tienda —"Tu envío es
   gratis"— salía en el ámbar de "te falta", que es el color de la
   advertencia. Un cliente que ya se lo ganó veía la misma alarma que uno
   que no.

   El verde no se inventó: es `--verde`, y el fondo/borde son el mismo
   tratamiento que ya usa `.aviso-doc.verde` (línea ~800). Va DESPUÉS del
   bloque de arriba a propósito: `.nudge-ok .barra i` y `.nudge .barra i`
   pesan igual en especificidad, así que aquí manda el orden.
   ───────────────────────────────────────────────────────────────────── */
.nudge-ok{background:#eaf7f0;border-color:#b9e2cd;color:#0d5c36}
.nudge-ok b{color:#0a7343}
.nudge-ok .barra{background:#cfeadd}
.nudge-ok .barra i{background:var(--verde)}

/* En el cajón lateral la barra es hija de `.cl-pie`, que ya es un flex en
   columna con `gap:8px`. El `margin-bottom:16px` de `.nudge` se SUMA a ese
   hueco: 24px abajo de la barra contra 8px entre todo lo demás del pie.
   Es el mismo doble espaciado (gap + margin) que ya mordió en la tanda de
   móvil. El hueco lo pone el gap; el margen sobra. */
.nudge-cajon{margin-bottom:0}

.mayoreo-lock{
  background:linear-gradient(100deg,#0a0a0a,#2a0508);color:#fff;padding:22px;margin-bottom:18px;border-left:4px solid var(--rojo);
}
.mayoreo-lock b{font-family:var(--display);font-size:18px;display:block;margin-bottom:6px}
.mayoreo-lock p{color:var(--gris-2);font-size:12.5px;margin:0 0 14px}

.envio-detalle{background:var(--hueso);padding:14px;font-size:12px;color:#555;margin-top:14px}
.envio-detalle b{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--negro)}
.envio-detalle div{display:flex;justify-content:space-between;padding:3px 0}

/* ---------- Checkout ---------- */
.co-layout{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start;padding-bottom:70px}
.co-sec{margin-bottom:34px}
.co-sec h3{font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid var(--linea-osc);margin-bottom:20px}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.full{grid-column:1/-1}
.campo label{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#444}
.campo label i{color:var(--rojo);font-style:normal}
.campo input,.campo select,.campo textarea{
  padding:13px;border:1px solid #ddd;font-size:14px;font-family:inherit;background:#fff;
}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--negro)}
.pago{border:1px solid #ddd;margin-bottom:10px}
.pago > label{display:flex;gap:12px;align-items:center;padding:16px;cursor:pointer;font-size:14px;font-weight:600}
.pago input{accent-color:var(--rojo);width:17px;height:17px}
.pago .info{display:none;padding:0 16px 16px 45px;font-size:12.5px;color:#666}
.pago.on{border-color:var(--negro);background:#fafafa}
.pago.on .info{display:block}
.pago .logos{margin-left:auto;display:flex;gap:6px}
.pago .logos span{background:#f0f0f0;padding:4px 8px;font-size:10px;font-weight:700;border-radius:3px;color:#555}
.co-items{display:grid;gap:14px;margin-bottom:18px}
.co-item{display:flex;gap:12px;align-items:center;font-size:13px}
.co-item .im{width:52px;height:64px;background:linear-gradient(150deg,#e8e5e2,#d2cfcb);position:relative;flex:0 0 auto}
.co-item .n{position:absolute;top:-7px;right:-7px;background:var(--negro);color:#fff;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}
.co-item b{display:block;font-size:13px}
.co-item small{color:#777;font-size:11.5px}
.co-item .p{margin-left:auto;font-family:var(--display);font-size:15px}
.seguro{display:flex;gap:10px;align-items:center;background:var(--hueso);padding:14px;font-size:12px;color:#555;margin-top:16px}

/* ---------- Mi cuenta ---------- */
.mc-layout{display:grid;grid-template-columns:250px 1fr;gap:40px;align-items:start;padding-bottom:70px}
.mc-nav{border:1px solid var(--linea-osc)}
.mc-nav a{display:flex;gap:11px;align-items:center;padding:14px 18px;font-size:13.5px;border-bottom:1px solid var(--linea-osc);color:#444}
.mc-nav a:last-child{border:0}
.mc-nav a:hover{background:var(--hueso)}
.mc-nav a.on{background:var(--negro);color:#fff;font-weight:700}
.mc-panel{border:1px solid var(--linea-osc);padding:30px}
.mc-hola{background:var(--hueso);padding:20px;margin-bottom:26px;font-size:14px}
.mc-hola b{font-family:var(--display);font-size:19px;display:block;margin-bottom:4px}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding:0 10px 12px 0;border-bottom:1px solid var(--linea-osc)}
.tabla td{padding:15px 10px 15px 0;border-bottom:1px solid var(--linea-osc)}
.pill{display:inline-block;padding:4px 10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:2px}
.pill.ok{background:#e3f7ec;color:#0b6b3a}
.pill.env{background:#e5efff;color:#12448f}
.pill.pend{background:#fff3d9;color:#8a5a00}
.pill.can{background:#fde8e8;color:#9b1c1c}

/* ---------- Admin ---------- */
.admin{background:#f1f2f4;min-height:100vh}
.admin-top{background:#1d2327;color:#fff;padding:0 22px;height:56px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:40}
.admin-top .lg{font-family:var(--display);letter-spacing:.1em;font-size:16px}
.admin-top .sep{width:1px;height:22px;background:rgba(255,255,255,.2)}
.admin-top small{color:#a7aaad;font-size:12px}
.admin-top .der{margin-left:auto;display:flex;gap:14px;align-items:center;font-size:12.5px;color:#c3c4c7}
.admin-layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 56px)}
.admin-nav{background:#1d2327;padding:12px 0}
.admin-nav a{display:flex;gap:11px;align-items:center;padding:12px 20px;color:#c3c4c7;font-size:13.5px}
.admin-nav a:hover{background:#2c3338;color:#fff}
.admin-nav a.on{background:var(--rojo);color:#fff;font-weight:600}
.admin-nav .grp{padding:16px 20px 7px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#787c82}
.admin-main{padding:28px 32px}
.admin-main h1{font-size:24px;font-weight:400;margin-bottom:4px}
.admin-main .sub{color:#646970;font-size:13.5px;margin-bottom:24px}
.panel{background:#fff;border:1px solid #c3c4c7;margin-bottom:22px}
.panel-h{
  padding:14px 18px;border-bottom:1px solid #dcdcde;display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;
}
.panel-h h3{font-size:14px;margin:0;font-weight:600}
.panel-h small{color:#646970;font-size:12px;display:block;margin-top:2px;font-weight:400}
.panel-b{padding:18px}
.admin-tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.admin-tabla th{
  background:#f6f7f7;text-align:left;padding:10px 12px;font-size:12px;font-weight:600;
  border-bottom:1px solid #dcdcde;color:#3c434a;
}
.admin-tabla td{padding:9px 12px;border-bottom:1px solid #f0f0f1}
.admin-tabla tr:hover td{background:#fafafa}
.admin-tabla input[type=number],.admin-tabla input[type=text]{
  width:100%;padding:7px 9px;border:1px solid #8c8f94;border-radius:3px;font-family:inherit;font-size:13px;
}
.admin-tabla input:focus{outline:0;border-color:var(--rojo);box-shadow:0 0 0 1px var(--rojo)}
.btn-wp{
  background:var(--rojo);color:#fff;border:0;padding:8px 14px;border-radius:3px;font-size:13px;
  cursor:pointer;font-weight:600;
}
.btn-wp:hover{background:var(--rojo-osc)}
.btn-wp.sec{background:#f6f7f7;color:#2271b1;border:1px solid #2271b1}
.btn-wp.sec:hover{background:#f0f0f1}
.btn-wp.mini{padding:5px 10px;font-size:12px}
.btn-wp.del{background:#fff;color:#b32d2e;border:1px solid #b32d2e}

.switch{position:relative;display:inline-block;width:44px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#c3c4c7;border-radius:24px;cursor:pointer;transition:.2s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--verde)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.sw-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #f0f0f1}
.sw-row:last-child{border:0}
.sw-row b{font-size:13.5px;display:block}
.sw-row small{color:#646970;font-size:12.5px;display:block;margin-top:2px}
.sw-row .cfg{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:#3c434a}
.sw-row .cfg input,.sw-row .cfg select{padding:6px 8px;border:1px solid #8c8f94;border-radius:3px;font-family:inherit;font-size:12.5px}
.sw-row .cfg input[type=number]{width:88px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid #c3c4c7;padding:18px}
.kpi small{color:#646970;font-size:12px;letter-spacing:.04em}
.kpi b{display:block;font-size:27px;font-weight:600;margin-top:5px}
.kpi .d{font-size:12px;color:var(--verde);font-weight:600;margin-top:3px}
.kpi .d.baja{color:#b32d2e}

.tabs{display:flex;gap:2px;border-bottom:1px solid #c3c4c7;margin-bottom:0;flex-wrap:wrap}
.tabs button{
  background:#f0f0f1;border:1px solid #c3c4c7;border-bottom:0;padding:10px 18px;font-size:13px;
  cursor:pointer;color:#50575e;margin-bottom:-1px;
}
.tabs button.on{background:#fff;color:#000;font-weight:600;border-bottom:1px solid #fff}
.tab-panel{display:none}
.tab-panel.on{display:block}

.nota{background:#fff;border-left:4px solid #72aee6;padding:12px 16px;font-size:13px;margin-bottom:18px;color:#3c434a}
.nota.warn{border-color:var(--ambar)}
.nota.dang{border-color:#b32d2e}
.nota b{display:block;margin-bottom:3px}
.mini{font-size:12px;color:#646970}

.preview-fomo{
  background:#fff;border:1px solid #dcdcde;box-shadow:0 6px 20px rgba(0,0,0,.09);padding:12px 14px;
  display:flex;gap:11px;align-items:center;max-width:330px;border-left:4px solid var(--rojo);
}
.preview-fomo .im{width:44px;height:44px;background:linear-gradient(150deg,#e6e3e0,#cfccc8);flex:0 0 auto}
.preview-fomo b{font-size:12.5px;display:block}
.preview-fomo small{font-size:11.5px;color:#666}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100;display:none;
  align-items:center;justify-content:center;padding:22px;
}
.modal.on{display:flex}
.modal-box{background:#fff;max-width:520px;width:100%;padding:34px;position:relative;max-height:88vh;overflow:auto}
.modal-box h3{font-family:var(--display);font-size:24px}
.modal .x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:24px;cursor:pointer;color:#999}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .tt-grid{grid-template-columns:repeat(3,1fr)}
  .rev-list{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .pdp,.cart-layout,.co-layout,.mc-layout,.cat-layout,.nos,.rev-top{grid-template-columns:1fr;gap:30px}
  .filtros,.resumen{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
  .admin-layout{grid-template-columns:1fr}
  .admin-nav{display:flex;overflow-x:auto}
  .admin-nav .grp{display:none}
}
@media(max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .tt-grid{grid-template-columns:repeat(2,1fr)}
  .rev-list{grid-template-columns:1fr}
  .campos{grid-template-columns:1fr}
  .sec{padding:52px 0}
  .wrap{padding:0 16px}
  .card-btn{opacity:1;transform:none}
  .fomo{left:12px;right:12px;max-width:none}
  .cart-tabla thead{display:none}
  .cart-tabla td{display:block;border:0;padding:8px 0}
  .cart-tabla tr{display:block;border-bottom:1px solid var(--linea-osc);padding:16px 0}
  .cart-sub{text-align:left}
}

/* ==========================================================================
   AÑADIDOS DEL PROTOTIPO ESTÁTICO
   ========================================================================== */

/* salto de contenido (accesibilidad) */
.saltar{
  position:absolute;left:-9999px;top:0;background:var(--negro);color:#fff;
  padding:12px 18px;z-index:200;font-size:13px;
}
.saltar:focus{left:0}

/* acordeón nativo, sin JS */
details.acc{border-top:1px solid var(--linea-osc)}
details.acc summary{
  padding:17px 0;display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;list-style:none;
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary span{transition:.2s;font-size:20px;color:var(--rojo);font-weight:400}
details.acc[open] summary span{transform:rotate(45deg)}
details.acc .body{display:block;padding:0 0 20px;color:#555;font-size:13.5px;line-height:1.65}
details.acc:hover summary{color:var(--rojo)}

/* marcos de foto pendiente */
.ph-foto{
  aspect-ratio:3/4;background:repeating-linear-gradient(45deg,#eeebe8 0 12px,#e7e4e0 12px 24px);
  display:grid;place-items:center;text-align:center;padding:16px;
  color:#9a948d;font-size:11.5px;letter-spacing:.08em;line-height:1.5;
  border:1px dashed #cfcac4;
}
.nos-fotos div:first-child{margin-top:26px}

/* documentos: nosotros, faq, envíos */
.doc-wrap{max-width:920px;margin:0 auto;padding:46px 24px 80px}
.doc-wrap h1{font-size:clamp(30px,4.2vw,44px);margin-bottom:18px}
.doc-wrap h2{margin-bottom:14px}
.doc-wrap p{color:#4a4a4a;line-height:1.75;margin:0 0 14px}
.lead{font-size:17px;color:#333!important;line-height:1.7!important}
.doc-intro{max-width:70ch}

.nos-fotos-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px;
  grid-auto-rows:1fr;
}
.nos-fotos-grid .alto{grid-row:span 2;aspect-ratio:auto}
@media(max-width:700px){.nos-fotos-grid{grid-template-columns:1fr 1fr}.nos-fotos-grid .alto{grid-row:auto;aspect-ratio:3/4}}

.confia-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.confia{border:1px solid var(--linea-osc);padding:24px;background:#fff}
.confia .ico{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--hueso);color:var(--rojo);margin-bottom:14px;
}
.confia .ico svg{width:21px;height:21px}
.confia > b{display:block;font-size:15px;margin-bottom:7px}
.confia p{font-size:13.5px;color:#666;margin:0;line-height:1.6}
@media(max-width:700px){.confia-grid{grid-template-columns:1fr}}

.cita{
  margin:52px 0;padding:34px;background:var(--negro);color:#fff;text-align:center;
}
.cita p{
  font-family:var(--display);font-size:clamp(22px,3vw,32px);font-weight:800;
  letter-spacing:-.02em;color:#fff!important;margin:0 0 10px;
}
.cita small{color:var(--gris);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

.aviso-doc{padding:20px 24px;margin:20px 0;background:var(--hueso);border-left:4px solid var(--gris)}
.aviso-doc > b{display:block;margin-bottom:6px;font-size:15px}
.aviso-doc p b{display:inline}
.aviso-doc p{margin:0;font-size:13.5px;color:#555}
.aviso-doc.verde{background:#eaf7f0;border-color:var(--verde)}
.aviso-doc.rojo{background:#fdecec;border-color:#b32d2e}
.aviso-doc.ambar{background:#fff8e6;border-color:var(--ambar)}

.tabla-doc{width:100%;border-collapse:collapse;font-size:13.5px;margin:16px 0;border:1px solid var(--linea-osc)}
.tabla-doc th{background:var(--negro);color:#fff;text-align:left;padding:12px 14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.tabla-doc td{padding:12px 14px;border-top:1px solid var(--linea-osc)}

.pasos{counter-reset:p;list-style:none;padding:0;margin:18px 0;display:grid;gap:12px}
.pasos li{
  counter-increment:p;position:relative;padding:14px 18px 14px 56px;
  background:var(--hueso);font-size:14px;color:#444;
}
.pasos li::before{
  content:counter(p);position:absolute;left:16px;top:13px;
  width:26px;height:26px;border-radius:50%;background:var(--rojo);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;
}
.lista-doc{padding-left:20px;margin:14px 0;display:grid;gap:9px}
.lista-doc li{color:#4a4a4a;font-size:14px;line-height:1.65}

.faq-grupo{
  font-size:12px!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo);margin:38px 0 4px!important;font-weight:700;
}

.cta-final{
  margin-top:52px;padding:28px;background:var(--hueso);border:1px solid var(--linea-osc);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.cta-final div > b{font-family:var(--display);font-size:19px;font-weight:800;display:block}
.cta-final p{margin:4px 0 0;font-size:13.5px;color:#666}

/* nota de prototipo (solo para la junta, no va en producción) */
.nota-proto{
  background:#fffbe8;border:1px dashed var(--ambar);padding:13px 16px;
  font-size:12.5px;color:#7a5a00;margin-bottom:16px;
}
.nota-proto b{color:#5c4300}

/* imágenes reales en carrito y checkout */
.cart-prod img.im{width:86px;height:110px;object-fit:cover;flex:0 0 auto}
.cart-prod .rm{color:var(--rojo);font-size:11.5px;display:inline-block;padding-top:8px;font-weight:700;cursor:pointer}
.co-item .im img{width:52px;height:64px;object-fit:cover;display:block}
.pago .logos img{height:22px;width:auto;background:#f4f4f4;padding:3px 6px;border-radius:3px}
.seguro svg{width:20px;height:20px;color:var(--verde);flex:0 0 auto}

/* el botón que en el prototipo no navega */
span.btn{user-select:none}

/* secciones del admin como maqueta continua */
.admin-sec{margin-top:52px;padding-top:38px;border-top:3px solid #c3c4c7}
.preview-fomo .im{width:44px;height:44px;object-fit:cover;flex:0 0 auto}
.admin input[readonly],.admin select[disabled],.admin textarea[readonly]{background:#fbfbfb;cursor:default}
.admin .switch input[disabled]+.slider{cursor:default}

/* ==========================================================================
   V2 — sistema mármol · hero collage · menú · reseñas premium
   ========================================================================== */

body{background:var(--blanco)}
.wrap-ancho{max-width:1680px;margin:0 auto;padding:0 40px}
@media(max-width:700px){.wrap-ancho{padding:0 18px}}

/* fondos de sección */
.sec-marmol{background:var(--hueso)}
.sec-tinta{background:var(--negro);color:#fff}
.sec-tinta .sec-h p{color:var(--gris-2)}
.sec-tinta h2{color:#fff}

/* ---------- Menú ---------- */
.nav-sep{width:1px;height:16px;background:var(--linea-osc);flex:0 0 auto}
.caret{
  display:inline-block;width:5px;height:5px;margin-left:5px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.6;
}
.dd-menu{min-width:318px;padding:8px;top:46px}
.dd-menu a{
  display:block;height:auto;padding:13px 15px;line-height:1.4;
  text-transform:none;letter-spacing:0;border:0;border-radius:2px;
}
.dd-menu a + a{margin-top:2px}
.dd-menu a b{display:block;font-size:14px;font-weight:600;color:var(--negro);margin-bottom:3px}
.dd-menu a em{display:block;font-style:normal;font-size:11.5px;color:var(--gris);line-height:1.45}
.dd-menu a:hover b{color:var(--rojo)}

/* ---------- HERO ---------- */
.hero{background:var(--hueso);border-bottom:1px solid var(--linea-osc);overflow:hidden}
.hero-in{
  display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;
  padding-top:60px;padding-bottom:60px;
}
.hero-txt h1{
  font-size:clamp(36px,4.4vw,62px);margin:0 0 20px;color:var(--negro);
  text-wrap:balance;
}
.hero-sub{font-size:17px;line-height:1.65;color:#4a4a52;max-width:44ch;margin:0 0 30px}
.hero-sub b{color:var(--negro)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}

.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{
  display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--linea-osc);border-radius:100px;padding:8px 14px;
  font-size:12.5px;font-weight:500;color:#3d3d44;
}
.chips li svg{width:15px;height:15px;color:var(--rojo);flex:0 0 auto}
.chips li{white-space:nowrap}
.chips .chip-precio{background:var(--negro);color:#fff;border-color:var(--negro);font-weight:700}

/* collage */
.hero-collage{
  display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(4,98px);
  gap:12px;
}
.hero-collage .c{overflow:hidden;background:var(--marmol);border-radius:2px}
.hero-collage img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.hero-collage .c:hover img{transform:scale(1.05)}
.c1{grid-column:1/3;grid-row:1/4}
.c2{grid-column:3/4;grid-row:1/3}
.c3{grid-column:3/4;grid-row:3/5}
.c4{grid-column:1/2;grid-row:4/5}
.c5{grid-column:2/3;grid-row:4/5}
@media(max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:40px}
  .hero-collage{grid-template-rows:repeat(4,68px)}
}

/* ---------- Franja confianza ---------- */
.trust{background:#fff;border-bottom:1px solid var(--linea-osc)}
.trust .wrap{padding:30px 24px}
.trust .ico{background:var(--hueso);border-color:transparent}

/* ---------- Tarjetas ---------- */
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-cat{grid-template-columns:repeat(4,1fr);gap:32px}
.card-img{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--marmol)}
.card-xl .card-img{aspect-ratio:4/5}
.card-nom{font-size:15px;font-weight:600;margin:0 0 9px;line-height:1.35;letter-spacing:0}
.card-xl .card-nom{font-size:16.5px}
.card-precio{display:flex;align-items:baseline;gap:7px}
.card-precio b{font-size:22px}
.card-precio span{font-size:12px;color:var(--gris)}
.card-vol{font-size:12px;color:var(--gris);font-weight:500;margin-top:5px;letter-spacing:0}
.card-vol b{color:var(--negro);font-weight:700}
.card-btn{display:none}
.tag{display:inline-flex;align-items:center;gap:4px}
.tag svg{width:11px;height:11px}
.suc{
  position:absolute;bottom:10px;left:10px;right:auto;background:var(--negro);color:#fff;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;
}
@media(max-width:1100px){.grid-4,.grid-cat{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid-4,.grid-cat{grid-template-columns:repeat(2,1fr)}}

/* ---------- Catálogo ancho completo ---------- */
.cat-head{background:var(--hueso);border-bottom:1px solid var(--linea-osc);padding:26px 0 40px;margin-bottom:34px}
.cat-head h1{font-size:clamp(34px,4vw,54px);margin:6px 0 12px}
.cat-head p{color:#5a5a60;max-width:62ch;margin:0}
.cat-barra{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--linea-osc);
}
.cat-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip-f{
  border:1px solid var(--linea-osc);background:#fff;border-radius:100px;padding:8px 16px;
  font-size:12.5px;font-family:inherit;cursor:pointer;color:#3d3d44;transition:.15s;
}
.chip-f:hover{border-color:var(--negro)}
.chip-f.on{background:var(--negro);color:#fff;border-color:var(--negro);font-weight:600}
.cat-div{width:1px;height:20px;background:var(--linea-osc)}
.cat-orden{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--gris)}

/* ---------- Precios por volumen ---------- */
.vol-head h3{font-size:17px}
.vol-head span{
  font-size:12px;letter-spacing:0;text-transform:none;color:var(--gris);
  font-weight:400;display:block;margin-top:3px;
}
.tabla-vol td:first-child{font-weight:600}
.vol-pie a{display:inline-flex;align-items:center;gap:4px}
.vol-pie a svg{width:13px;height:13px}
.vol-link-cta{display:inline-flex;align-items:center;gap:5px}
.vol-link-cta svg{width:13px;height:13px}
.aviso-may{background:var(--negro);border-left:0;border-radius:2px;padding:28px 32px;margin-top:30px}
.aviso-may b{font-family:var(--display);font-size:20px}
.aviso-may-btns{display:flex;gap:10px;flex-wrap:wrap}
.aviso-may .btn-wa svg{width:17px;height:17px}

/* ---------- Redes / TikTok ---------- */
.tt-card{display:block}
.tt-info b{font-size:13px}
.tt-buy{
  margin-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;
}
.tt-buy svg{width:12px;height:12px}
.tt-card:hover .tt-buy{border-color:var(--rojo);color:var(--rojo)}
.tt-views{display:inline-flex;align-items:center;gap:5px}
.tt-views svg{width:10px;height:10px}

/* ---------- Nosotros ---------- */
.nos-lead{font-size:16.5px;color:#4a4a52;line-height:1.7;margin:0 0 22px}
.nos-lista{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:14px}
.nos-lista li{
  font-size:14.5px;color:#5a5a60;line-height:1.6;padding-left:20px;position:relative;
}
.nos-lista li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--rojo);border-radius:50%;
}
.nos-lista b{color:var(--negro)}
.nos-fotos .ph-foto{position:relative;border:0;padding:0;overflow:hidden;background:var(--marmol)}
.nos-fotos .ph-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.9);opacity:.55}
.nos-fotos .ph-foto span{
  position:absolute;inset:auto 0 0 0;padding:10px;background:rgba(11,11,12,.78);
  color:#fff;font-size:10px;letter-spacing:.06em;text-transform:uppercase;text-align:center;
}

/* ---------- Reseñas premium ---------- */
.resenas-h{align-items:center}
.rev-marca{display:flex;align-items:center;gap:16px}
.rev-nota{
  font-family:var(--display);font-weight:900;font-size:56px;
  line-height:1;letter-spacing:-.03em;
}
.rev-marca .stars{color:var(--ambar);font-size:15px;letter-spacing:2px}
.rev-marca small{display:block;color:var(--gris);font-size:12.5px;margin-top:3px}

.rev-masonry{columns:3;column-gap:24px}
@media(max-width:1000px){.rev-masonry{columns:2}}
@media(max-width:640px){.rev-masonry{columns:1}}
.rev{
  break-inside:avoid;margin:0 0 24px;background:#fff;border:1px solid var(--linea-osc);
  padding:26px;display:block;border-radius:2px;
}
.rev-dest{background:var(--negro);border-color:var(--negro);color:#fff}
.rev-dest blockquote{color:#fff!important;font-size:17px!important}
.rev-dest figcaption b{color:#fff}
.rev-dest .rev-quien small{color:var(--gris-2)}
.rev-dest .avatar{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.rev-dest .ver{background:rgba(255,255,255,.12);color:#8fe3b4}
.rev .stars{color:var(--ambar);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.rev blockquote{
  margin:0;font-size:15px;line-height:1.65;color:#33333a;font-weight:400;
}
.rev figcaption{display:flex;align-items:center;gap:11px;margin-top:18px;flex-wrap:wrap}
.rev-quien{flex:1;min-width:0}
.rev-quien b{display:block;font-size:13.5px}
.rev-quien small{display:block;color:var(--gris);font-size:11.5px}
.rev .ver{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#0b6b3a;background:#e9f8f0;
  padding:5px 9px;border-radius:100px;white-space:nowrap;text-transform:uppercase;
}
.rev-foto{margin-top:14px}
.rev-foto img{border-radius:2px}

/* ---------- FAQ en portada ---------- */
.faq-home{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.faq-home h2{font-size:clamp(28px,3.4vw,42px)}
@media(max-width:860px){.faq-home{grid-template-columns:1fr;gap:32px}}
details.acc summary span{
  width:11px;height:11px;position:relative;flex:0 0 auto;
}
details.acc summary span::before,details.acc summary span::after{
  content:"";position:absolute;background:var(--rojo);transition:.2s;
}
details.acc summary span::before{left:0;top:5px;width:11px;height:1.5px}
details.acc summary span::after{left:5px;top:0;width:1.5px;height:11px}
details.acc[open] summary span::after{transform:scaleY(0)}
details.acc summary{text-transform:none;font-size:15px;letter-spacing:0;font-weight:600;gap:20px}

/* ---------- WhatsApp flotante ----------
   La PRIMERA versión de este bloque vivía aquí: una burbuja con un menú
   `.wa-opciones` que se abría al pasar el ratón. Se cambió por el `<details>`
   de style.css:1575 —para que abra con TOQUE en móvil, no sólo con hover— y
   el bloque viejo se quedó olvidado veinte tantos renglones más abajo.

   ⚠️ NO ERA CÓDIGO MUERTO INOFENSIVO, Y POR ESO SE BORRA EN VEZ DE DEJARLO.
   `.wa-opciones` no existe en ningún markup (comprobado con grep en todo
   `wp-build/`), pero el renglón de `.wa-flot` SÍ le seguía pegando al
   flotante de hoy, porque el bloque nuevo sólo vuelve a declarar
   `position/right/bottom/z-index` y no toca lo demás:

     display:flex; flex-direction:column; gap:10px

   Con `<details>` como contenedor flex, el `::details-content` cuenta como
   segundo hijo aunque esté cerrado y mida 0 — así que el `gap:10px` se
   cobraba igual. La burbuja verde quedaba 60+10 = **70 px de alto** y su
   filo de arriba a **92 px** del borde, no a los 82 que dice la cuenta de
   `kevstore-editor.php:102`.

   Consecuencia medida, no supuesta: el óvalo «Editar esta página» se para en
   `bottom:94px` para dejar 12 px de aire, y el aire real era de **2 px**. Lo
   cazó `foto.mjs` imprimiendo `-2px en y` donde su propio comentario predecía
   `-12`. Sin este borrado, cualquiera que rehaga la cuenta con los números
   del comentario se vuelve a equivocar por 10 px.

   Todo lo demás de aquí ya estaba pisado por el bloque nuevo y se va sin
   cambiar nada: `.wa-btn` 58→60 (1578), el móvil 52→54 (1623), el svg 31→32
   (`.wa-ico-abrir svg`, misma especificidad y va después), la sombra y el
   `:hover`. El `z-index:90` lo pisa el 95 de 1575. */

/* ---------- Footer ---------- */
.footer-wa svg{width:22px;height:22px}
.footer-bot .aviso-num{max-width:40ch}

/* ---------- PDP ---------- */
.pdp h1{font-size:clamp(26px,3vw,38px);margin-bottom:10px}
.pdp-rev{gap:12px}
.pdp-rev .stars{color:var(--ambar)}
.pdp-vend{color:var(--verde);font-weight:600;font-size:12.5px}
.precio-actual{font-size:46px;margin-top:6px}
.pdp .vol-link{margin:22px 0}
.salto{display:inline-flex;align-items:center;gap:6px}
.salto svg{width:13px;height:13px}

/* ---------- Documentos v2 ---------- */
.doc-hero{display:grid;grid-template-columns:1fr .9fr;gap:50px;align-items:center;padding-bottom:56px}
.doc-hero h1{font-size:clamp(32px,4vw,52px);margin-bottom:18px}
.doc-hero-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.doc-hero-fotos .ph-foto{aspect-ratio:3/4}
@media(max-width:860px){.doc-hero{grid-template-columns:1fr;gap:32px}}

.cita{background:var(--negro)}
.cita p{font-stretch:normal}

.tiendas{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.tienda-card{border:1px solid var(--linea-osc);background:#fff;overflow:hidden}
.tienda-fotos{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.tienda-fotos .ph-foto{aspect-ratio:4/3}
.tienda-info{padding:24px}
.tienda-info h3{font-family:var(--display);font-weight:900;font-size:22px;margin-bottom:10px}
.tienda-info p{margin:0 0 10px;font-size:14px;color:#5a5a60;line-height:1.6}
.tienda-hr{font-size:12.5px!important;color:var(--gris)!important}
.tienda-info .btn{margin-top:6px}
.tienda-info .btn svg{width:16px;height:16px}
@media(max-width:820px){.tiendas{grid-template-columns:1fr}}

/* contacto */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:8px 0 28px}
.contacto-card{
  display:block;border:1px solid var(--linea-osc);background:#fff;padding:30px;transition:.18s;
}
.contacto-card:hover{border-color:#25d366;box-shadow:0 10px 30px rgba(0,0,0,.07)}
.contacto-ico{
  width:46px;height:46px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;margin-bottom:16px;
}
.contacto-ico svg{width:24px;height:24px}
.contacto-card :is(h2,h3){font-family:var(--display);font-weight:900;font-size:19px;margin-bottom:6px}
.contacto-num{
  font-family:var(--display);font-weight:900;font-size:23px;
  margin:0 0 12px!important;letter-spacing:-.01em;
}
.contacto-card p{font-size:13.5px;color:#5a5a60;line-height:1.6;margin:0 0 14px}
.contacto-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#0b6b3a}
.contacto-cta svg{width:13px;height:13px}
@media(max-width:760px){.contacto-grid{grid-template-columns:1fr}}

.redes-claro .red{background:var(--hueso);border-color:var(--linea-osc)}
.redes-claro .red-txt b,.redes-claro .red-user{color:var(--negro)}
.redes-claro .red-txt small,.redes-claro .red-user em{color:var(--gris)}
.redes-claro .red:hover{background:#eceae7}
.form-simple{max-width:640px}

/* cuenta / registro */
.cuenta-wrap{padding:34px 24px 80px;max-width:1060px;margin:0 auto}
.cuenta-intro{text-align:center;max-width:56ch;margin:0 auto 40px}
.cuenta-intro h1{font-size:clamp(30px,3.8vw,46px);margin-bottom:14px}
.cuenta-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.cuenta-card{border:1px solid var(--linea-osc);background:#fff;padding:34px}
.cuenta-card.destacada{border-color:var(--negro);box-shadow:0 14px 40px rgba(0,0,0,.08)}
.cuenta-card h2{font-family:var(--display);font-weight:900;font-size:26px;margin-bottom:4px}
.cuenta-sub{color:var(--gris);font-size:13.5px;margin:0 0 22px}
.cuenta-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 20px;flex-wrap:wrap}
.cuenta-row a{font-size:12.5px;color:var(--rojo);border-bottom:1px solid}
.check{display:flex;align-items:center;gap:9px;font-size:13px;color:#4a4a52;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--rojo)}
.cuenta-nota{
  background:var(--hueso);border-left:3px solid var(--rojo);padding:14px 16px;
  font-size:13px;color:#4a4a52;line-height:1.6;margin-top:18px;
}
.cuenta-nota b{color:var(--negro)}
.cuenta-invitado{
  margin-top:34px;padding:24px 28px;background:var(--hueso);border:1px solid var(--linea-osc);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.cuenta-invitado b{font-family:var(--display);font-size:17px;display:block}
.cuenta-invitado p{margin:4px 0 0;font-size:13.5px;color:#5a5a60}
@media(max-width:820px){.cuenta-cols{grid-template-columns:1fr}}

/* ==========================================================================
   RESPONSIVE — correcciones
   ========================================================================== */

/* nada debe provocar scroll horizontal */
/* `overflow-x:clip` y NO `hidden`.
   `hidden` convierte al body en contenedor de scroll y eso ANULA el
   `position:sticky` del header: al bajar 600px la canasta quedaba en −568px,
   o sea que a media página el cliente no podía abrir el carrito ni buscar.
   `clip` recorta igual el desborde horizontal pero no crea contenedor de
   scroll, así que sticky sigue funcionando. */
html,body{overflow-x:clip;max-width:100%}

/* ---------- Header en móvil ---------- */
@media(max-width:900px){
  .header .wrap{height:66px;gap:12px}
  .logo img{width:42px;height:42px}
  .logo-txt{font-size:16px;letter-spacing:.1em}
  .logo-txt small{font-size:7.5px;letter-spacing:.2em}
  .acciones{margin-left:auto;gap:0}
  .icon-btn{padding:7px}
  .icon-btn svg{width:20px;height:20px}
  /* la lupa se va: en móvil el buscador vive dentro del menú */
  .acciones .icon-btn:first-child{display:none}
}
@media(max-width:400px){
  .logo-txt small{display:none}
  .logo-txt{font-size:15px}
}

/* ---------- WhatsApp flotante: no debe empujar el layout ----------
   El parche que sacaba `.wa-opciones` del flujo se fue con el bloque viejo
   (ver style.css:1099): el menú de hover ya no existe, y el `.wa-flot` que
   repetía `position/right/bottom` lo declara igual el bloque de 1575. */

/* ---------- Marquesina ---------- */
@media(max-width:640px){
  .marquee{padding:8px 0}
  .marquee-grupo span{font-size:10.5px;padding:0 18px}
}

/* ---------- Hero ---------- */
@media(max-width:960px){
  .hero-in{padding-top:44px;padding-bottom:44px}
  .hero-txt h1{font-size:clamp(32px,7vw,46px)}
  .hero-sub{font-size:15.5px}
}
@media(max-width:640px){
  .hero-collage{grid-template-rows:repeat(4,60px);gap:8px}
  .hero-cta{gap:9px}
  .hero-cta .btn{flex:1;min-width:0;padding:14px 12px;font-size:11px;letter-spacing:.08em}
  .chips{gap:6px}
  .chips li{font-size:11.5px;padding:7px 11px}
}

/* ---------- Franja de confianza ---------- */
@media(max-width:900px){.trust .wrap{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:560px){
  .trust .wrap{grid-template-columns:1fr;gap:14px;padding:22px 18px}
  .trust > div{gap:11px}
}

/* ---------- Secciones ---------- */
@media(max-width:640px){
  .sec{padding:48px 0}
  .sec-h{margin-bottom:24px}
  .sec-h h2{font-size:clamp(23px,6.4vw,30px)}
  .link-mas{font-size:11px}
}

/* ---------- Tarjetas de producto ---------- */
@media(max-width:560px){
  .grid,.grid-4,.grid-cat{grid-template-columns:1fr 1fr;gap:14px}
  .card-nom,.card-xl .card-nom{font-size:13px;line-height:1.3}
  .card-cat{font-size:9.5px}
  .card-precio b{font-size:18px}
  .card-precio span{font-size:10.5px}
  .card-vol{font-size:10.5px}
  .tag{font-size:8.5px;padding:4px 7px}
  .suc{font-size:8.5px;padding:4px 8px}
}

/* ---------- Catálogo ---------- */
@media(max-width:900px){
  .cat-head{padding:20px 0 30px;margin-bottom:24px}
  .cat-barra{flex-direction:column;align-items:stretch;gap:14px}
  .cat-filtros{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .cat-filtros::-webkit-scrollbar{height:0}
  .chip-f{white-space:nowrap;flex:0 0 auto}
  .cat-orden{justify-content:space-between}
}

/* ---------- Tablas de volumen ---------- */
@media(max-width:640px){
  .vol-wrap{gap:16px}
  .vol-head{padding:16px 18px}
  .vol-head h3{font-size:15px}
  .tabla-vol{font-size:12.5px}
  .tabla-vol th{font-size:9.5px;padding:9px 6px}
  .tabla-vol td{padding:10px 6px}
  .vol-tabla .tabla-vol td:first-child{padding-left:18px}
  .vol-tabla .tabla-vol td:last-child{padding-right:18px}
  .vol-pie{padding:14px 18px;font-size:11.5px}
  .vol-pie a{display:block;margin:6px 0 0}
}

/* ---------- Aviso de mayoreo ---------- */
@media(max-width:700px){
  .aviso-may{flex-direction:column;align-items:stretch;padding:22px}
  .aviso-may b{font-size:17px}
  .aviso-may-btns{flex-direction:column}
  .aviso-may-btns .btn{width:100%}
}

/* ---------- Redes y TikTok ---------- */
@media(max-width:640px){
  .tt-grid{grid-template-columns:1fr 1fr;gap:12px}
  .tt-info{padding:10px 9px}
  .tt-info b{font-size:11.5px}
  .tt-buy{font-size:10.5px}
}

/* ---------- Nosotros ---------- */
@media(max-width:900px){
  .nos{gap:32px}
  .nos-fotos div:first-child{margin-top:0}
}

/* ---------- Reseñas ---------- */
@media(max-width:900px){
  .resenas-h{flex-direction:column;align-items:flex-start;gap:18px}
  .rev-marca{gap:13px}
  .rev-nota{font-size:44px}
}
@media(max-width:640px){
  .rev{padding:20px}
  .rev blockquote{font-size:14px}
  .rev-dest blockquote{font-size:15px!important}
  .rev figcaption{gap:9px}
  .rev .ver{font-size:8.5px;padding:4px 7px}
}

/* ---------- Documentos ---------- */
@media(max-width:640px){
  .doc-wrap{padding:30px 18px 60px}
  .doc-wrap h1{font-size:clamp(26px,7vw,34px)}
  .doc-hero{padding-bottom:36px}
  .confia{padding:20px}
  .cita{padding:26px 20px;margin:36px 0}
  .cta-final{flex-direction:column;align-items:stretch;padding:22px}
  .cta-final .btn{width:100%}
  .tabla-doc{font-size:12.5px}
  .tabla-doc th,.tabla-doc td{padding:10px}
  .pasos li{padding:12px 14px 12px 48px;font-size:13.5px}
}

/* tablas anchas: que hagan scroll dentro de su caja, no en la página */
.tabla-doc,.admin-tabla,.tabla{display:block;overflow-x:auto;white-space:nowrap}
@media(min-width:760px){.tabla-doc,.tabla{display:table;white-space:normal}}

/* ---------- Carrito ---------- */
@media(max-width:900px){
  .cart-layout,.co-layout{gap:28px}
  .resumen{position:static}
}
@media(max-width:640px){
  .cart-prod img.im{width:68px;height:88px}
  .cart-prod b{font-size:13.5px}
  .cart-tabla .qty{width:auto}
  .envio-detalle{font-size:11.5px}
}

/* ---------- Cuenta ---------- */
@media(max-width:640px){
  .cuenta-wrap{padding:24px 18px 60px}
  .cuenta-card{padding:24px}
  .cuenta-invitado{flex-direction:column;align-items:stretch;text-align:left}
  .cuenta-invitado .btn{width:100%}
}

/* ---------- Contacto ---------- */
@media(max-width:640px){
  .contacto-card{padding:24px}
  .contacto-num{font-size:20px}
}

/* ---------- PDP ---------- */
@media(max-width:640px){
  .pdp{gap:26px;padding-bottom:50px}
  .precio-actual{font-size:36px}
  .gal-thumbs{grid-template-columns:repeat(5,1fr);gap:7px}
  .qty-row{flex-wrap:wrap}
  .qty-row .qty{width:100%}
  .qty-row .qty input{flex:1}
  .qty-row .btn{width:100%;flex:none!important}
  .vol-link{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- Footer ---------- */
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:560px){
  .footer{padding:44px 0 22px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-pagos{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-bot{flex-direction:column;gap:10px;text-align:left}
  .footer-bot .aviso-num{max-width:none;text-align:left}
}

/* ---------- Admin ---------- */
@media(max-width:900px){
  .admin-main{padding:20px 16px}
  .admin-top{padding:0 14px;gap:10px}
  .admin-top small,.admin-top .der span{display:none}
  .kpis{grid-template-columns:1fr 1fr;gap:12px}
  .panel-h{flex-direction:column;align-items:flex-start}
  .sw-row .cfg{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Los hijos de grid heredan min-width:auto y el texto largo del placeholder
   les impide encoger. Con min-width:0 la columna sí colapsa en móvil. */
.doc-hero-fotos > *,.tienda-fotos > *,.nos-fotos > *,.hero-collage > *,
.confia-grid > *,.contacto-grid > *,.cuenta-cols > *,.vol-wrap > *,
.grid > *,.redes > *,.tt-grid > *,.trust .wrap > *,.footer-grid > *{min-width:0}
.ph-foto span{overflow-wrap:anywhere}

@media(max-width:640px){
  .doc-hero-fotos{grid-template-columns:1fr 1fr;gap:10px}
  .doc-hero-fotos .ph-foto{aspect-ratio:1}
  .tienda-fotos .ph-foto{aspect-ratio:1}
  .ph-foto span{font-size:9px;padding:7px}
}

/* Lo mismo para los layouts de dos columnas: sin min-width:0 la tabla interna
   estira la columna y el contenido se corta en móvil. */
.mc-layout > *,.cart-layout > *,.co-layout > *,.pdp > *,.cat-layout > *,
.nos > *,.faq-home > *,.doc-hero > *,.tiendas > *,.rev-masonry > *{min-width:0}
.mc-panel,.resumen,.cart-layout table{max-width:100%}

@media(max-width:900px){
  .mc-nav{display:flex;overflow-x:auto;border-bottom:1px solid var(--linea-osc)}
  .mc-nav a{white-space:nowrap;border-bottom:0;border-right:1px solid var(--linea-osc);padding:13px 16px}
  .mc-panel{padding:22px 18px}
}

/* Los KPIs traen grid-template-columns inline; en móvil hay que ganarle. */
@media(max-width:640px){
  .kpis{grid-template-columns:1fr 1fr!important;gap:12px}
  .kpi{padding:14px}
  .kpi b{font-size:22px}
  .kpi small{font-size:11px}
  .kpi .d{font-size:11px}
}
@media(max-width:380px){.kpis{grid-template-columns:1fr!important}}

/* ---- 1. El submenú de "Nosotros" es el último del nav: se ancla a la derecha
        para que no se salga por el borde en pantallas de ~1024px ---- */
.dd-menu{left:auto;right:-14px}

/* ---- 2. El selector de orden del catálogo no debe estirar la barra ---- */
.cat-orden{min-width:0;flex-wrap:wrap}
.cat-orden .sel{max-width:100%}
@media(max-width:640px){
  .cat-orden{width:100%}
  .cat-orden .sel{flex:1;min-width:0}
}

/* ---- 3. Admin: la columna de contenido tiene tablas anchas dentro ---- */
.admin-layout > *{min-width:0}
.admin-main{min-width:0;max-width:100%}
@media(max-width:900px){
  .admin-layout{grid-template-columns:1fr}
  .admin-nav{display:flex;overflow-x:auto;padding:0}
  .admin-nav a{white-space:nowrap;padding:13px 16px}
}

/* ---- 4. Las tablas del documento de reglas hacen scroll dentro de su caja ---- */
.doc table{display:block;overflow-x:auto;white-space:nowrap;max-width:100%}
@media(min-width:760px){.doc table{display:table;white-space:normal}}
.doc{max-width:100%;overflow-x:hidden}

/* Las 4 tarjetas de redes no caben en una fila por debajo de ~1150px */
@media(max-width:1150px){.redes{grid-template-columns:1fr 1fr}}
.red{min-width:0}
.red-user{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* El selector de orden del catálogo tampoco cabe en tablet */
@media(max-width:820px){
  .cat-orden{width:100%;justify-content:space-between}
  .cat-orden .sel{max-width:60%}
}

/* Va al final a propósito: la regla de 2 columnas de arriba pisaba a esta.
   Por debajo de 560px las tarjetas de redes van en una sola columna. */
@media(max-width:560px){
  .redes{grid-template-columns:1fr}
  .red-user{display:none}
  .red-txt b{font-size:19px}
}

/* ==========================================================================
   V3 — lightbox de reseñas · aviso fijo · WhatsApp con los dos números
   ========================================================================== */

/* ---------- Fotos de reseña que se abren ---------- */
.rev-foto-abrir{position:relative;display:block;overflow:hidden;border-radius:2px}
.rev-foto-abrir img{width:60px;height:60px;object-fit:cover;transition:transform .3s}
.rev-foto-abrir:hover img{transform:scale(1.08)}
.rev-foto-lupa{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(11,11,12,.55);opacity:0;transition:.2s;
}
.rev-foto-lupa svg{width:18px;height:18px;color:#fff}
.rev-foto-abrir:hover .rev-foto-lupa,
.rev-foto-abrir:focus-visible .rev-foto-lupa{opacity:1}

.lightbox{
  position:fixed;inset:0;z-index:120;display:none;
  align-items:center;justify-content:center;padding:28px;
}
.lightbox:target{display:flex}
.lb-fondo{position:absolute;inset:0;background:rgba(11,11,12,.9);backdrop-filter:blur(3px)}
.lb-caja{position:relative;margin:0;max-width:min(560px,90vw);text-align:center}
.lb-caja img{
  width:100%;max-height:78vh;object-fit:contain;display:block;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.lb-caja figcaption{color:#fff;font-size:12.5px;margin-top:14px;opacity:.75}
.lb-cerrar{
  position:absolute;top:20px;right:24px;color:#fff;font-size:34px;line-height:1;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.12);transition:.15s;
}
.lb-cerrar:hover{background:rgba(255,255,255,.24)}

/* ---------- Aviso de compra reciente: uno solo, fijo ---------- */
.fomo{
  position:fixed;left:20px;bottom:20px;z-index:85;
  display:flex;gap:12px;align-items:center;max-width:310px;
  background:#fff;border:1px solid var(--linea-osc);border-left:3px solid var(--rojo);
  padding:12px 15px;box-shadow:0 12px 34px rgba(0,0,0,.13);
}
.fomo img{width:48px;height:48px;object-fit:cover;flex:0 0 auto;border-radius:2px}
.fomo b{display:block;font-size:13px;line-height:1.3}
.fomo small{display:block;font-size:11.5px;color:#5a5a60;line-height:1.4;margin-top:1px}
.fomo-t{display:block;font-size:10.5px;color:var(--verde);font-weight:700;margin-top:4px}
@media(max-width:900px){.fomo{display:none}}   /* en móvil estorbaría al pulgar */

/* ---------- Espaciados: ritmo vertical más parejo ---------- */
.sec{padding:88px 0}
.sec-h{margin-bottom:40px}
.sec-h p{margin-top:10px;line-height:1.65}
.vol-wrap{gap:28px}
.aviso-may{margin-top:36px}
.rev-masonry{column-gap:26px}
.rev{margin-bottom:26px;padding:28px}
.trust .wrap{padding:34px 24px}
.nos{gap:60px}
.doc-wrap h2{margin-top:8px}
.doc-wrap .confia-grid{margin-top:28px}
.cta-final{margin-top:60px;padding:32px}
@media(max-width:900px){.sec{padding:64px 0}.nos{gap:36px}}
@media(max-width:640px){.sec{padding:52px 0}.sec-h{margin-bottom:26px}.rev{padding:22px;margin-bottom:18px}}

/* ==========================================================================
   WhatsApp — burbuja flotante que despliega las dos sucursales
   Hecho con <details> para que abra con toque en móvil, no solo con hover.
   ========================================================================== */
.wa-flot{position:fixed;right:22px;bottom:22px;z-index:95}

/* la burbuja */
.wa-btn{
  width:60px;height:60px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;cursor:pointer;list-style:none;
  box-shadow:0 8px 26px rgba(37,211,102,.45);transition:.22s;margin-left:auto;
}
.wa-btn::-webkit-details-marker{display:none}
.wa-btn:hover{transform:scale(1.06)}
.wa-flot summary:focus-visible{outline:3px solid var(--negro);outline-offset:3px}
.wa-ico-abrir svg{width:32px;height:32px;display:block}
.wa-ico-cerrar{display:none;font-size:30px;line-height:1;font-weight:300}
.wa-flot[open] .wa-ico-abrir{display:none}
.wa-flot[open] .wa-ico-cerrar{display:block}
.wa-flot[open] .wa-btn{background:var(--negro);box-shadow:0 8px 26px rgba(0,0,0,.32)}

/* el panel que se despliega encima */
.wa-panel{
  position:absolute;right:0;bottom:72px;width:250px;
  background:#fff;border:1px solid var(--linea-osc);border-radius:6px;
  box-shadow:0 16px 44px rgba(0,0,0,.2);overflow:hidden;
  animation:wa-sube .22s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes wa-sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wa-panel{animation:none}}

.wa-titulo{
  margin:0;padding:13px 16px;background:var(--hueso);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4a4a52;
  border-bottom:1px solid var(--linea-osc);
}
.wa-num{display:flex;align-items:center;gap:12px;padding:14px 16px;transition:.15s}
.wa-num + .wa-num{border-top:1px solid var(--linea-osc)}
.wa-num:hover{background:#f0fbf4}
.wa-num svg{width:24px;height:24px;color:#25d366;flex:0 0 auto}
.wa-num span{font-size:14px;font-weight:600;line-height:1.25}
.wa-num b{
  display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);font-weight:700;margin-bottom:2px;
}
.wa-pie{
  margin:0;padding:11px 16px;background:var(--hueso);border-top:1px solid var(--linea-osc);
  font-size:11.5px;color:var(--gris);
}

@media(max-width:640px){
  .wa-flot{right:14px;bottom:14px}
  .wa-btn{width:54px;height:54px}
  .wa-ico-abrir svg{width:28px;height:28px}
  .wa-panel{width:min(268px,calc(100vw - 28px))}
  body{padding-bottom:0}
}

/* ==========================================================================
   V4 — banner de imagen · redes · filtros laterales · sucursal · interlineado
   ========================================================================== */

/* ---------- Interlineado: los titulares venían muy apretados ---------- */
.serif,.display{line-height:1.1;letter-spacing:-.022em}
h1.display{line-height:1.05}
.hero-sub,.lead,.nos-lead{line-height:1.7}
.sec-h p{line-height:1.7}
.card-nom{line-height:1.4}
.confia p,.rev blockquote,.lista-doc li{line-height:1.7}

/* ---------- Banner de portada: una imagen con el texto encima ---------- */
.hero-img{position:relative;background:#f5f2e9;overflow:hidden}
.hero-img-fondo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center;
}
.hero-img-txt{
  position:relative;z-index:2;
  min-height:min(600px,62vw);display:flex;flex-direction:column;justify-content:center;
  padding-top:56px;padding-bottom:56px;max-width:var(--max);
}
.hero-img-txt .eyebrow{color:var(--rojo)}
/*
 * El interlineado va AQUÍ y no colgado de la etiqueta.
 *
 * Estaba en `h1.display{line-height:1.05}` (más arriba). Al bajar los cuadros
 * 2 y 3 del carrusel a <h2> —la portada traía tres <h1>— esos dos se quedaron
 * con el 1.1 general y crecieron 5px por renglón: el titular de dos líneas
 * pasó de 105 a 110px y empujó todo el cuadro. Se veía en el comparador y no
 * en el código, que es la peor manera de encontrarlo.
 *
 * Diciéndolo en el cuadro del hero, los tres miden igual sea cual sea su
 * etiqueta, que es lo que el prototipo aprobado enseña.
 */
.hero-img-txt :is(h1,h2){font-size:clamp(29px,3.5vw,50px);line-height:1.05;max-width:11ch;margin-bottom:20px;color:var(--negro)}
.hero-img-txt .hero-sub{max-width:38ch;color:#43434b;margin-bottom:30px}
.hero-img-txt .hero-sub b{color:var(--negro)}
.hero-img-txt .chips{max-width:42ch}
.hero-img-txt .chips li{font-size:12px;padding:7px 13px}
@media(max-width:980px){
  .hero-img-fondo{object-position:72% center;opacity:.22}
  .hero-img-txt{min-height:auto;padding-top:46px;padding-bottom:46px}
  .hero-img-txt :is(h1,h2){max-width:none}
}

/* ---------- Bullets de Nosotros: título y explicación en dos líneas ---------- */
.nos-lista{gap:20px}
.nos-lista li{padding-left:22px}
.nos-lista li b{display:block;color:var(--negro);font-size:15px;margin-bottom:4px;line-height:1.35}
.nos-lista li span{display:block;font-size:14px;color:#5a5a60;line-height:1.65}
.nos-lista li::before{top:7px;width:6px;height:6px}

/* ---------- Catálogo: filtros laterales, rejilla a ancho completo ---------- */
.cat-layout-ancho{display:grid;grid-template-columns:236px 1fr;gap:44px;align-items:start;padding-bottom:10px}
.cat-lateral{position:sticky;top:98px}
.cat-lateral .f-grupo{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--linea-osc)}
.cat-lateral .f-grupo:last-child{border:0;margin-bottom:0}
/* Igual que en el pie: los rótulos del filtro eran <h4> colgando de un <h1>. */
.cat-lateral :is(h2,h4){font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:var(--gris)}
.f-op{
  display:block;padding:8px 0;font-size:14px;color:#43434b;transition:.15s;
  border-left:2px solid transparent;padding-left:11px;margin-left:-11px;
}
.f-op:hover{color:var(--rojo)}
.f-op.on{color:var(--negro);font-weight:700;border-left-color:var(--rojo)}
.f-tallas{display:flex;gap:6px;flex-wrap:wrap}
.f-check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#43434b;cursor:pointer}
.f-check input{width:16px;height:16px;accent-color:var(--rojo)}

.cat-barra{padding-bottom:18px;margin-bottom:26px}
.cat-conteo{font-size:13.5px;color:var(--gris)}
.cat-contenido{min-width:0}
.grid-cat{grid-template-columns:repeat(4,1fr)}
@media(max-width:1400px){.grid-cat{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){
  .cat-layout-ancho{grid-template-columns:1fr;gap:0}
  .cat-lateral{
    position:static;display:flex;gap:26px;overflow-x:auto;padding-bottom:16px;margin-bottom:22px;
    border-bottom:1px solid var(--linea-osc);
  }
  .cat-lateral .f-grupo{border:0;padding:0;margin:0;flex:0 0 auto}
  .cat-lateral .f-grupo:not(:first-child) h4{margin-top:0}
  .f-op{display:inline-block;padding:6px 12px;margin:0 4px 0 0;border:1px solid var(--linea-osc);
        border-radius:100px;border-left-width:1px}
  .f-op.on{background:var(--negro);color:#fff;border-color:var(--negro)}
  .grid-cat{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Ficha: de qué tienda sale ---------- */
.surte{
  display:flex;align-items:center;gap:16px;margin:22px 0;
  background:var(--hueso);border:1px solid var(--linea-osc);padding:14px;
}
.surte img{width:76px;height:60px;object-fit:cover;flex:0 0 auto;border-radius:2px}
.surte-txt{flex:1;min-width:0}
.surte-et{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600}
.surte-txt b{display:block;font-family:var(--display);font-weight:900;font-size:19px;line-height:1.2;margin:2px 0 3px}
.surte-dir{display:block;font-size:12.5px;color:#5a5a60;line-height:1.5}
.surte-link{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  color:var(--rojo);white-space:nowrap;flex:0 0 auto;
}
.surte-link svg{width:12px;height:12px}
@media(max-width:560px){
  .surte{flex-wrap:wrap}
  .surte-link{width:100%;justify-content:flex-end}
}

/* ---------- Envíos: tarifa única ---------- */
.tarifa-unica{
  display:grid;grid-template-columns:1.2fr 1fr;gap:0;
  border:1px solid var(--linea-osc);overflow:hidden;margin:8px 0 10px;
}
.tarifa-unica > div{padding:28px 30px}
.tarifa-unica > div:first-child{background:#fff}
.tarifa-monto{
  font-family:var(--display);font-weight:900;font-size:36px;line-height:1.1;
  margin:0 0 8px!important;letter-spacing:-.02em;
}
.tarifa-nota{font-size:13.5px;color:#5a5a60;margin:0!important;line-height:1.6}
.tarifa-gratis{
  background:var(--negro);color:#fff;display:flex;flex-direction:column;justify-content:center;
}
.tarifa-gratis b{font-family:var(--display);font-weight:900;font-size:26px;line-height:1.15;margin-bottom:6px}
.tarifa-gratis span{font-size:13px;color:var(--gris-2);line-height:1.55}
.nota-pendiente{
  font-size:12.5px;color:#8a6d00;background:#fff8e6;border:1px dashed #e8c86a;
  padding:9px 14px;display:inline-block;margin:0 0 8px!important;
}
@media(max-width:700px){.tarifa-unica{grid-template-columns:1fr}}

/* ---------- Botones e iconos: nada gigante ---------- */
.link-mas{display:inline-flex;align-items:center;gap:7px}
.link-mas svg{width:14px;height:14px}
.btn svg{width:17px;height:17px}
.btn-sm svg{width:15px;height:15px}
.footer-wa svg,.wa-num svg{width:22px;height:22px}
.contacto-cta svg,.vol-pie a svg,.vol-link-cta svg,.salto svg{width:13px;height:13px}

/* ==========================================================================
   FEED DE TIKTOK — formato vertical y overlay como en la app
   ========================================================================== */

/* ---------- Perfiles ---------- */
.perfiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.perfil{
  display:flex;align-items:center;gap:13px;padding:14px 16px;
  background:rgba(255,255,255,.06);border:1px solid var(--linea);
  border-radius:100px;transition:.18s;
}
.perfil:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.28)}
.perfil-ico{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
}
.perfil-ico svg{width:20px;height:20px;color:#fff}
.perfil-ico.tk{background:#000;border:1px solid rgba(255,255,255,.3)}
.perfil-ico.ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.perfil-datos{flex:1;min-width:0}
.perfil-datos b{display:block;font-size:14px;color:#fff;font-weight:600}
.perfil-datos span{display:block;font-size:12px;color:var(--gris);margin-top:2px}
.perfil-datos em{font-style:normal;color:#e4e4e4;font-weight:700}
.perfil-btn{
  background:var(--rojo);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;padding:8px 16px;border-radius:100px;flex:0 0 auto;transition:.15s;
}
.perfil:hover .perfil-btn{background:var(--rojo-osc)}
.perfil-suc .perfil-btn{background:rgba(255,255,255,.14)}
@media(max-width:900px){.perfiles{grid-template-columns:1fr}}

/* ---------- Feed ---------- */
.tt-feed{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.tt-card{
  position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:8px;
  background:#101012;isolation:isolate;
}
.tt-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tt-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(transparent 42%,rgba(0,0,0,.88));
}
.tt-card:hover img{transform:scale(1.06)}

/* el play aparece al pasar, como en el feed real */
.tt-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  z-index:3;width:58px;height:58px;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.75);
  display:grid;place-items:center;opacity:0;transition:.24s;
}
.tt-play svg{width:24px;height:24px;color:#fff;margin-left:3px}
.tt-card:hover .tt-play{opacity:1;transform:translate(-50%,-50%) scale(1)}

.tt-logo{
  position:absolute;top:12px;right:12px;z-index:3;
  width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px);display:grid;place-items:center;
}
.tt-logo svg{width:15px;height:15px;color:#fff}

.tt-info{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 13px;
  display:flex;flex-direction:column;gap:5px;
}
.tt-user{font-size:13px;font-weight:700;color:#fff}
.tt-desc{
  font-size:12.5px;color:rgba(255,255,255,.94);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tt-tags{
  font-size:11.5px;color:#7ad4f0;line-height:1.4;font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tt-son{display:flex;align-items:center;gap:6px;margin-top:3px}
.tt-son svg{width:11px;height:11px;color:rgba(255,255,255,.8)}
.tt-son em{font-style:normal;font-size:11px;color:rgba(255,255,255,.8)}

@media(max-width:1000px){.tt-feed{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  /* en móvil se recorre de lado, como el feed */
  .tt-feed{
    display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;
    padding-bottom:10px;margin-right:-18px;padding-right:18px;
  }
  .tt-feed::-webkit-scrollbar{height:0}
  .tt-card{flex:0 0 66%;scroll-snap-align:start}
  .tt-play{opacity:1;transform:translate(-50%,-50%) scale(1);width:48px;height:48px}
}

/* ==========================================================================
   TABLA DE PRECIOS POR VOLUMEN — simple: solo tipografía
   ========================================================================== */
.vol-wrap{align-items:start}
.vol-tabla{background:#fff;border:1px solid var(--linea-osc)}
.vol-head{padding:20px 26px 16px;background:var(--negro);color:#fff}
.vol-head h3{font-size:18px;font-weight:800;margin:0 0 3px;letter-spacing:-.01em;color:#fff}
.vol-head span{font-size:12.5px;color:var(--gris-2);letter-spacing:0;text-transform:none;font-weight:400}

.tabla-precio{width:100%;border-collapse:collapse}
.tabla-precio th{
  padding:12px 26px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;font-weight:700;text-align:right;background:var(--negro);
}
.tabla-precio th:first-child{text-align:left}
.tabla-precio td{padding:15px 26px;border-bottom:1px solid #f0efed;text-align:right}
.tabla-precio tr:last-child td{border-bottom:0}
.vol-tabla .tabla-precio{margin-bottom:0}

.c-pz{text-align:left!important;font-size:15px;font-weight:600;color:var(--negro);white-space:nowrap}
.c-precio{
  font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.02em;
  color:var(--negro);font-variant-numeric:tabular-nums;
}
.c-ah{font-size:13.5px;font-weight:700;color:#0b7a43;font-variant-numeric:tabular-nums;width:80px}
.tabla-precio tbody tr:first-child .c-ah{color:var(--gris);font-weight:400}

/* la línea donde cambia la regla del negocio */
.fila-corte td{
  padding:14px 26px 10px!important;border-bottom:1px solid var(--linea-osc)!important;
  text-align:center!important;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rojo);font-weight:800;background:#fdf5f5;
}

/* el mejor precio */
.fila-tope td{background:#fff6f6;border-bottom:0!important}
.fila-tope .c-pz{color:var(--negro)}
.fila-tope .c-precio{color:var(--rojo)}
.fila-tope .c-ah{color:#0b7a43}

.vol-pie{
  margin:0;padding:16px 26px;background:var(--hueso);border-top:1px solid var(--linea-osc);
  font-size:12.5px;color:#5a5a60;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;
}
.vol-pie-txt b{color:var(--negro)}
.vol-pie a{margin:0;border:0;white-space:nowrap;color:var(--rojo);font-weight:700}

@media(max-width:640px){
  .vol-head{padding:18px 18px 14px}
  .tabla-precio th{padding:0 18px 10px;font-size:9.5px}
  .tabla-precio td{padding:13px 18px}
  .c-pz{font-size:14px}
  .c-precio{font-size:17px}
  .c-ah{font-size:12.5px;width:62px}
  .fila-corte td{padding:12px 18px 9px!important}
  .vol-pie{padding:14px 18px;flex-direction:column;align-items:flex-start;gap:8px}
}

/* bullets de Nosotros: título arriba, explicación abajo */
.nos-lista li b{display:block!important;margin-bottom:4px}
.nos-lista li span{display:block!important}

/* ==========================================================================
   FOTOS REALES DE LA TIENDA
   ========================================================================== */
.foto-real{margin:0;position:relative;overflow:hidden;background:var(--marmol)}
.foto-real img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.foto-real:hover img{transform:scale(1.04)}
.foto-real figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;
  background:linear-gradient(transparent,rgba(11,11,12,.82));
  color:#fff;font-size:11.5px;letter-spacing:.02em;line-height:1.4;
}

/* portada: la de la bodega manda, es la prueba de que sí importan */
.nos-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-auto-rows:190px}
.nos-fotos .destaca{grid-column:1/-1;grid-row:span 2}
.nos-fotos .foto-real{border-radius:2px}
@media(max-width:900px){.nos-fotos{grid-auto-rows:150px}}
@media(max-width:520px){.nos-fotos{grid-auto-rows:130px}}

.doc-hero-fotos .foto-real{aspect-ratio:3/4}
.tienda-fotos .foto-real{aspect-ratio:4/3}

/* banner en la cabecera de las páginas de categoría */
.cat-head-img{position:relative;overflow:hidden;border-bottom:0}
.cat-head-fondo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;
}
.cat-head-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 42%,rgba(255,255,255,.4) 100%);
}
.cat-head-img > .wrap-ancho{position:relative;z-index:2}
@media(max-width:820px){
  .cat-head-img::after{background:rgba(255,255,255,.9)}
}

/* ==========================================================================
   AVISOS DE COMPRA RECIENTE — rotan en bucle con CSS puro
   Tres avisos comparten la esquina; cada uno es visible un tercio del ciclo.
   ========================================================================== */
.fomo-pila{position:fixed;left:20px;bottom:20px;z-index:85;width:310px;pointer-events:none}
.fomo{
  position:absolute;left:0;bottom:0;width:100%;
  display:flex;gap:12px;align-items:center;
  background:#fff;border:1px solid var(--linea-osc);border-left:3px solid var(--rojo);
  padding:12px 15px;box-shadow:0 12px 34px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(14px);
  animation:fomo-ciclo 27s infinite;
}
/* el ciclo dura 27s: cada aviso vive ~7s y descansa el resto */
.fomo.f1{animation-delay:3s}
.fomo.f2{animation-delay:12s}
.fomo.f3{animation-delay:21s}
@keyframes fomo-ciclo{
  0%     {opacity:0;visibility:hidden;transform:translateY(14px)}
  1.5%   {opacity:1;visibility:visible;transform:none}
  24%    {opacity:1;transform:none}
  27%    {opacity:0;transform:translateY(10px)}
  27.01%,100%{opacity:0;visibility:hidden}
}
@media(prefers-reduced-motion:reduce){
  .fomo{animation:none}
  .fomo.f1{opacity:1;visibility:visible;transform:none}   /* se queda el primero, quieto */
}
.fomo img{width:48px;height:48px;object-fit:cover;flex:0 0 auto;border-radius:2px}
.fomo b{display:block;font-size:13px;line-height:1.3}
.fomo small{display:block;font-size:11.5px;color:#5a5a60;line-height:1.4;margin-top:1px}
.fomo-t{display:block;font-size:10.5px;color:var(--verde);font-weight:700;margin-top:4px}
@media(max-width:900px){.fomo-pila{display:none}}   /* en móvil estorba al pulgar */

/* ==========================================================================
   OPINIONES VERIFICADAS — resumen con barras + lista apilada
   ========================================================================== */
.rs-cab{text-align:center;margin-bottom:40px}
.rs-cab h2{margin-bottom:14px}
.rs-raya{display:inline-block;width:52px;height:3px;background:var(--rojo)}

.rs-resumen{
  display:flex;align-items:center;justify-content:center;gap:56px;
  max-width:760px;margin:0 auto 26px;
}
.rs-nota{text-align:center;flex:0 0 auto}
.rs-nota b{
  font-family:var(--display);font-weight:900;font-size:56px;line-height:1;
  letter-spacing:-.03em;display:block;
}
.rs-nota .stars{color:var(--ambar);font-size:15px;letter-spacing:2px;margin-top:6px}
.rs-nota small{display:block;color:var(--gris);font-size:12.5px;margin-top:5px}

.rs-barras{flex:1;display:grid;gap:9px;min-width:0}
.rs-bar{display:flex;align-items:center;gap:13px;font-size:12.5px;color:#5a5a60}
.rs-bar > span:first-child{width:30px;flex:0 0 auto}
.rs-bar .b{flex:1;height:8px;background:#e4e3e0;border-radius:5px;overflow:hidden}
.rs-bar .b i{display:block;height:100%;background:var(--ambar);border-radius:5px}
.rs-n{width:34px;text-align:right;font-variant-numeric:tabular-nums;flex:0 0 auto}

.rs-acciones{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:40px;flex-wrap:wrap}
.rs-video svg{width:16px;height:16px}

.rs-tira-t{text-align:center;font-size:12.5px;color:var(--gris);margin:0 0 12px}
.rs-tira{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-bottom:44px}
.rs-tira .rev-foto-abrir img{width:76px;height:76px}

/* la lista apilada */
.rs-lista{max-width:880px;margin:0 auto;display:grid;gap:16px}
.rs-lista-sola{margin-top:6px}
.op{
  background:#fff;border:1px solid var(--linea-osc);border-radius:3px;
  padding:24px 28px;
}
.op-cab{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.op-cab .avatar{
  width:40px;height:40px;border-radius:50%;background:var(--hueso);color:var(--negro);
  border:1px solid var(--linea-osc);display:grid;place-items:center;
  font-weight:700;font-size:13px;flex:0 0 auto;
}
.op-quien{flex:1;min-width:0}
.op-quien b{display:block;font-size:14px}
.op-quien small{display:block;color:var(--gris);font-size:11.5px}
.op-fecha{font-size:12px;color:var(--gris);flex:0 0 auto}
.op .stars{color:var(--ambar);font-size:14px;letter-spacing:2px;margin-bottom:9px}
.op p{margin:0;font-size:14.5px;line-height:1.65;color:#33333a}
.op .rev-foto{margin-top:14px}
.op-util{
  margin-top:16px;padding-top:13px;border-top:1px solid #f0efed;
  font-size:12px;color:var(--gris);
}
.op-util b{color:#5a5a60;font-weight:600}

@media(max-width:700px){
  .rs-resumen{flex-direction:column;gap:22px}
  .rs-barras{width:100%}
  .op{padding:18px}
  .op-fecha{width:100%;order:5;margin-top:2px}
}

/* ── Versión compacta (solo el inicio) ────────────────────────────────
   En el inicio la sección medía 3,132px: nueve reseñas apiladas a 880px.
   Aquí el promedio, las barras y los botones van en una sola banda, la
   tira de fotos en una fila delgada, y las reseñas en rejilla de tres.
   producto.html se queda con la versión larga, que ahí sí corresponde. */
.rs-banda{
  display:flex;align-items:center;gap:44px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--linea-osc);border-radius:3px;
  padding:22px 30px;margin-bottom:20px;
}
.rs-banda .rs-nota b{font-size:44px}
.rs-banda .rs-barras{gap:7px;min-width:220px}
.rs-banda .rs-acciones{margin:0;flex:0 0 auto;flex-direction:column;gap:9px;align-items:stretch}
.rs-banda .rs-acciones .btn{white-space:nowrap}

/* etiqueta y miniaturas van centradas como un solo bloque, no cada una por su lado */
.rs-fotos-fila{
  display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-bottom:26px;
}
.rs-fotos-fila .rs-tira-t{margin:0;flex:0 0 auto;text-align:left}
.rs-fotos-fila .rs-tira{margin:0;justify-content:center;flex:0 1 auto;min-width:0}
.rs-fotos-fila .rs-tira .rev-foto-abrir img{width:62px;height:62px}

.rs-rejilla{
  max-width:none;grid-template-columns:repeat(3,1fr);gap:18px;
}
.rs-rejilla .op{display:flex;flex-direction:column;padding:20px 22px}
.rs-rejilla .op-cab{gap:10px;margin-bottom:10px}
.rs-rejilla .op-cab .avatar{width:34px;height:34px;font-size:11.5px}
.rs-rejilla .op-quien b{font-size:13.5px}
.rs-rejilla .op p{font-size:14px;line-height:1.6;flex:1}
/* la fecha se va abajo del nombre: en tres columnas no cabe en la misma línea */
.rs-rejilla .op-fecha{width:100%;order:5;margin-top:-4px;font-size:11.5px}
.rs-rejilla .op .rev-foto{margin-top:14px}
.rs-rejilla .op .rev-foto img{width:48px;height:48px}
.rs-rejilla .op .rev-foto-abrir img{width:48px;height:48px}

.rs-mas{text-align:center;margin-top:24px}

@media(max-width:1000px){
  .rs-rejilla{grid-template-columns:repeat(2,1fr)}
  .rs-banda{gap:26px;padding:20px}
  .rs-banda .rs-acciones{flex-direction:row;width:100%}
  .rs-banda .rs-acciones .btn{flex:1;text-align:center}
}
@media(max-width:640px){
  .rs-rejilla{grid-template-columns:1fr}
  .rs-fotos-fila{gap:10px}
  .rs-fotos-fila .rs-tira-t{width:100%}
}

/* ==========================================================================
   CAMBIOS DE PRECIOS · CUADRO DE MAYOREO
   ========================================================================== */
.vol-wrap-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.vol-wrap-3{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

/* cuadro de mayoreo en 2 columnas */
.mayoreo-cuadro{
  display:grid;grid-template-columns:1.15fr .85fr;gap:0;margin-top:30px;
  background:var(--negro);color:#fff;overflow:hidden;border-radius:3px;
}
.mc-izq{padding:38px 40px}
.mc-izq h3{font-size:clamp(26px,3vw,34px);margin:4px 0 14px;color:#fff}
.mc-izq p{color:var(--gris-2);font-size:14.5px;line-height:1.6;margin:0 0 22px;max-width:44ch}
.mc-btns{display:flex;gap:10px;flex-wrap:wrap}
.mc-btns .btn-wa svg{width:17px;height:17px}
.mc-der{
  background:rgba(255,255,255,.04);border-left:1px solid var(--linea);
  padding:28px 32px;display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.mc-dato span{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);font-weight:700;
}
.mc-dato b{display:block;font-family:var(--display);font-weight:900;font-size:20px;margin:3px 0 2px;line-height:1.1}
.mc-dato em{font-style:normal;font-size:12.5px;color:var(--gris)}
@media(max-width:820px){
  .mayoreo-cuadro{grid-template-columns:1fr}
  .mc-der{border-left:0;border-top:1px solid var(--linea);flex-direction:row;flex-wrap:wrap}
  .mc-dato{flex:1;min-width:140px}
  .mc-izq{padding:28px 22px}
}

/* ==========================================================================
   PÁGINAS NUEVAS: próximamente · mayoreo (pago + cuenta)
   ========================================================================== */
.proximo{
  max-width:620px;margin:40px auto 80px;text-align:center;
  background:#fff;border:1px solid var(--linea-osc);padding:48px 40px;border-radius:4px;
}
.proximo-tag{
  display:inline-block;background:var(--hueso);color:var(--rojo);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:16px;
}
.proximo h2{font-size:28px;margin-bottom:12px}
.proximo p{color:#5a5a60;line-height:1.7;max-width:48ch;margin:0 auto 26px}
.proximo-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.proximo-btns .btn-wa svg{width:17px;height:17px}

/* pago mayoreo: dos tarjetas */
.pago-mayoreo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 30px}
.pm-card{border:1px solid var(--linea-osc);background:#fff;padding:28px}
.pm-card-oscuro{background:var(--negro);color:#fff;border-color:var(--negro)}
.pm-monto{
  display:inline-block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;margin-bottom:12px;padding:6px 12px;border-radius:100px;
  background:var(--negro);color:#fff;
}
/* en la tarjeta oscura se invierte: pastilla clara sobre negro */
.pm-card-oscuro .pm-monto{background:#fff;color:var(--negro)}
.pm-card b{font-family:var(--display);font-weight:900;font-size:24px;display:block;margin-bottom:8px}
.pm-card p{margin:0;font-size:13.5px;line-height:1.6;color:#5a5a60}
.pm-card-oscuro p{color:var(--gris-2)}
@media(max-width:640px){.pago-mayoreo{grid-template-columns:1fr}}

/* datos de transferencia */
.cuenta-transf{background:var(--hueso);border:1px solid var(--linea-osc);padding:30px 32px;margin-top:8px}
.ct-t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:700;margin:0 0 16px}
.ct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}
.ct-grid span{display:block;font-size:11.5px;color:var(--gris);margin-bottom:4px}
.ct-grid b{font-size:16px;font-weight:700}
.ct-clabe{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-family:var(--display);font-weight:800}
.ct-nota{font-size:13.5px;color:#5a5a60;line-height:1.65;margin:0 0 18px}
.ct-btns{display:flex;gap:10px;flex-wrap:wrap}
.ct-btns .btn-wa svg{width:17px;height:17px}
@media(max-width:640px){.ct-grid{grid-template-columns:1fr;gap:14px}}

/* existencias por tienda — la ciudad manda */
.stock-tiendas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 4px}
.st-card{
  background:#fff;border:1px solid var(--linea-osc);border-radius:3px;padding:16px 18px;
  display:flex;flex-direction:column;gap:2px;position:relative;transition:.15s;
}
.st-card:hover{border-color:var(--negro)}
.st-top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.st-pin{
  width:30px;height:30px;border-radius:50%;background:var(--hueso);
  display:grid;place-items:center;color:var(--rojo);flex:0 0 auto;
}
.st-pin svg{width:16px;height:16px}
.st-ciudad{
  font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:-.02em;
  line-height:1.1;color:var(--negro);
}
.st-piezas{font-size:15px;font-weight:700;color:var(--negro)}
.st-dir{font-size:12px;color:var(--gris);margin-bottom:10px}
.st-badge{
  align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#0b7a43;background:#e9f8f0;padding:5px 10px;border-radius:100px;
}
.st-badge.st-bajo{color:#b45309;background:#fff3e0}
@media(max-width:480px){.stock-tiendas{grid-template-columns:1fr}}

/* panel de transferencia en el checkout */
.transf-panel{
  background:var(--hueso);border:1px solid var(--linea-osc);border-left:3px solid var(--rojo);
  padding:20px 22px;margin-top:12px;
}
.tp-t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:700;margin:0 0 14px}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.tp-grid span{display:block;font-size:11px;color:var(--gris);margin-bottom:3px}
.tp-grid b{font-size:15px;font-weight:700}
.tp-nota{font-size:12.5px;color:#5a5a60;line-height:1.6;margin:0 0 14px}
.tp-btns{display:flex;gap:8px;flex-wrap:wrap}
.tp-btns .btn-wa svg{width:15px;height:15px}
@media(max-width:520px){.tp-grid{grid-template-columns:1fr}}

/* ==========================================================================
   BANNER OSCURO — la imagen trae su propio espacio negro a la izquierda,
   así que el velo va suave y solo del lado del texto: el producto no se apaga.
   ========================================================================== */
.hero-oscuro{background:#0a0a0b}
.hero-oscuro .hero-img-fondo{object-position:right center;opacity:1}
.hero-oscuro::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(10,10,11,.55) 0%, rgba(10,10,11,.35) 34%,
    rgba(10,10,11,.08) 50%, rgba(10,10,11,0) 62%);
}
.hero-oscuro .hero-img-txt{z-index:2}
.hero-oscuro .eyebrow{color:var(--rojo)}
.hero-oscuro .hero-img-txt :is(h1,h2){color:#fff;max-width:16ch}
.hero-oscuro .hero-sub{color:rgba(255,255,255,.82)}
.hero-oscuro .hero-sub b{color:#fff}
/* los chips se invierten: vidrio sobre oscuro */
.hero-oscuro .chips li{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18);
  color:#e8e8ec;backdrop-filter:blur(6px);
}
.hero-oscuro .chips li svg{color:var(--rojo)}
/* el header negro se funde con el banner: quitamos la línea que los separaba */
.hero-oscuro{border-top:0}
@media(max-width:980px){
  .hero-oscuro .hero-img-fondo{object-position:70% center;opacity:.5}
  .hero-oscuro::after{background:linear-gradient(180deg,rgba(10,10,11,.9),rgba(10,10,11,.75))}
}

/* el formulario del admin traía max-width inline; en móvil hay que ganarle */
@media(max-width:640px){
  .admin .campos{grid-template-columns:1fr!important;max-width:100%!important}
  .admin .campo{min-width:0}
  .admin .campo input,.admin .campo select,.admin .campo textarea{max-width:100%}
}

/* ==========================================================================
   CARRUSEL DEL BANNER — 3 slides que rotan, CSS puro (sin JS)
   Ciclo de 21s: cada slide vive 7s con un cruce suave entre ellas.
   ========================================================================== */
.hero-carrusel{position:relative;overflow:hidden}
.hero-carrusel .hs{
  position:absolute;inset:0;opacity:0;
  animation:hs-ciclo 21s infinite;
}
.hero-carrusel .hs1{position:relative;animation-delay:0s}   /* la 1ª marca el alto */
.hero-carrusel .hs2{animation-delay:7s}
.hero-carrusel .hs3{animation-delay:14s}
@keyframes hs-ciclo{
  0%      {opacity:0}
  2.5%    {opacity:1}
  33.33%  {opacity:1}
  36%     {opacity:0}
  100%    {opacity:0}
}
/* la primera se queda de fondo para que nunca haya un hueco negro */
.hero-carrusel .hs1{animation:hs-ciclo-1 21s infinite}
@keyframes hs-ciclo-1{
  0%,33.33%{opacity:1}
  36%      {opacity:0}
  97.5%    {opacity:0}
  100%     {opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .hero-carrusel .hs{animation:none;opacity:0}
  .hero-carrusel .hs1{opacity:1}
}

/* cada slide conserva el velo del lado del texto */
.hero-carrusel .hs::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(10,10,11,.72) 0%, rgba(10,10,11,.55) 34%,
    rgba(10,10,11,.12) 52%, rgba(10,10,11,0) 66%);
}
/* el mural es más ruidoso: pide un punto más de velo */
.hero-carrusel .hs2::after{
  background:linear-gradient(90deg,
    rgba(10,10,11,.9) 0%, rgba(10,10,11,.74) 36%,
    rgba(10,10,11,.2) 54%, rgba(10,10,11,0) 68%);
}
.hero-carrusel::after{content:none}   /* el velo global sobra: lo pone cada slide */

/* indicador de progreso */
.hs-puntos{
  position:absolute;left:0;right:0;bottom:24px;z-index:4;
  display:flex;gap:8px;justify-content:center;
}
.hs-puntos i{
  width:34px;height:3px;background:rgba(255,255,255,.28);border-radius:3px;
  overflow:hidden;position:relative;
}
.hs-puntos i::after{
  content:"";position:absolute;inset:0;background:var(--rojo);
  transform:scaleX(0);transform-origin:left;animation:hs-punto 21s infinite;
}
.hs-puntos i:nth-child(2)::after{animation-delay:7s}
.hs-puntos i:nth-child(3)::after{animation-delay:14s}
@keyframes hs-punto{
  0%     {transform:scaleX(0)}
  33.33% {transform:scaleX(1)}
  36%,100%{transform:scaleX(0)}
}
@media(prefers-reduced-motion:reduce){
  .hs-puntos i::after{animation:none}
  .hs-puntos i:first-child::after{transform:scaleX(1)}
}
@media(max-width:980px){
  .hero-carrusel .hs::after,.hero-carrusel .hs2::after{
    background:linear-gradient(180deg,rgba(10,10,11,.9),rgba(10,10,11,.78));
  }
  .hero-carrusel .hero-img-fondo{opacity:.45}
  .hs-puntos{bottom:16px}
}

/* ==========================================================================
   V4 — VENTANA EMERGENTE PARA ESCRIBIR UNA OPINIÓN
   --------------------------------------------------------------------------
   ESTE BLOQUE SE AGREGÓ AL FINAL Y NO TOCA NINGUNA REGLA DE LAS DE ARRIBA.
   Es a propósito: diez de las quince páginas están entre 0% y 0.9% de
   diferencia contra el prototipo y dependen de que ese CSS quede como está.

   Por qué existe: el prototipo aprobado nunca dibujó un formulario para
   escribir opiniones —la sección de producto.html termina en la última
   tarjeta—, pero una tienda sin manera de opinar se queda sin reseñas para
   siempre. El formulario vivía abierto al final de la sección, en una tarjeta
   de 473px que corría hacia abajo todo lo que venía después. Ahora vive dentro
   del visor emergente que el prototipo SÍ trae (el de las fotos de las
   opiniones): `.lightbox` + `.lb-fondo` + `.lb-caja` + `.lb-cerrar`, CSS puro
   con `:target`, cero JavaScript.

   Así que aquí abajo NO se rehace el emergente: se reutiliza el que ya está en
   la línea 1491. Lo único que se agrega son las diferencias entre "una ventana
   con una foto" y "una ventana con un formulario", más las estrellas
   clicables, que el prototipo tampoco podía tener porque nunca dibujó el
   formulario.
   ========================================================================== */

/* ---------- El botón que la abre ----------
   `.rs-acciones` + `.btn .btn-negro .btn-sm` es el bloque tal cual del
   prototipo del inicio ("Escribir una opinión"). Lo único que cambia es el
   hueco: `.rs-acciones` trae `margin-bottom:40px` porque allá lleva la lista
   debajo; aquí es lo último de la sección y ese hueco se sumaría al relleno
   de `.sec`. */
.op-abrir{margin:26px 0 0}

/* ---------- La ventana ----------
   `.lightbox` centra su contenido con `align-items:center`, que es correcto
   para una foto (nunca es más alta que la pantalla, la limita `max-height:78vh`)
   y peligroso para un formulario: si crece más que la ventana del navegador,
   centrarlo deja la mitad de arriba fuera y sin manera de llegar a ella.
   Con `flex-start` + `margin:auto 0` queda centrado cuando cabe y pegado
   arriba —con barra de desplazamiento— cuando no. */
.lb-opinar{align-items:flex-start;overflow-y:auto}
.lb-opinar .lb-caja{
  width:100%;max-width:min(620px,92vw);margin:auto 0;text-align:left;
}
/* La misma sombra que `.lb-caja img`, para que la tarjeta se despegue del
   fondo oscuro igual que lo hace una foto. */
.lb-opinar .op{box-shadow:0 24px 70px rgba(0,0,0,.55);padding:26px 30px 28px}
/* De qué producto se está hablando. Va en gris y chico: es un dato de apoyo,
   no compite con el título. */
.op .op-prod{margin:-2px 0 18px;font-size:12.5px;color:var(--gris)}
.op .op-prod b{color:#33333a;font-weight:600}
/* `.campo input/select` ya tienen su borde negro al enfocar; el textarea se
   había quedado fuera y mostraba el contorno azul del navegador. */
.lb-opinar .campo textarea:focus{outline:0;border-color:var(--negro)}
/* Cerrar tapaba la esquina del formulario en pantallas chicas. */
@media(max-width:640px){
  .lb-opinar{padding:16px}
  .lb-opinar .lb-caja{margin-top:56px}
}

/* ---------- Las cinco estrellas, clicables y sin JavaScript ----------
   Patrón clásico: cinco radios de verdad (teclado, lector de pantalla y el
   `required` del navegador salen gratis) con la estrella dibujada por el
   <label>. En el HTML van del 5 al 1 porque `~` solo alcanza a los hermanos
   SIGUIENTES: para pintar "la escogida y todas las de su izquierda" el orden
   del documento tiene que ir al revés que el de la pantalla, y
   `row-reverse` los regresa a 1→5 de izquierda a derecha. */
.op-estrellas{
  position:relative;display:flex;flex-direction:row-reverse;
  justify-content:flex-end;gap:6px;line-height:1;padding:2px 0;
}
/* Transparentes pero DIBUJADOS. Con `display:none` Chrome no puede enfocarlos
   y, si falta la calificación, el envío se traba en silencio con
   "An invalid form control is not focusable". Van encima de la fila entera y
   sin recibir el ratón, para que el globito de "elige una opción" señale las
   estrellas y los clics lleguen a los <label>. */
.op-estrellas input{
  position:absolute;left:0;top:0;width:100%;height:100%;
  margin:0;padding:0;border:0;opacity:0;pointer-events:none;
}
.op-estrellas > label{
  font-size:30px;line-height:1;color:#d8d4cd;cursor:pointer;
  font-weight:400;letter-spacing:0;transition:color .12s,transform .12s;
}
.op-estrellas > label::before{content:"\2605"}
.op-estrellas input:checked ~ label{color:var(--ambar)}
/* Al apuntar con el ratón se apaga lo elegido y se adelanta el resultado,
   como en cualquier tienda. El orden importa: estas dos reglas tienen que ir
   DESPUÉS de la de `:checked` para ganarle. */
.op-estrellas:hover > label{color:#d8d4cd}
.op-estrellas > label:hover,
.op-estrellas > label:hover ~ label{color:var(--ambar);transform:scale(1.08)}
.op-estrellas input:focus-visible + label{outline:2px solid var(--negro);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .op-estrellas > label{transition:none}
  .op-estrellas > label:hover,
  .op-estrellas > label:hover ~ label{transform:none}
}

/* ==========================================================================
   INSIGNIA DEL CARRITO
   --------------------------------------------------------------------------
   No existía ninguna regla para `.cart-n`, así que el número caía como una
   celda más del `display:grid` de `.icon-btn` y quedaba DEBAJO de la canasta,
   estirando el botón en un óvalo. Aquí se saca del flujo y se pega a la
   esquina, como cualquier tienda.
   ========================================================================== */
.acciones .cart{position:relative;display:grid;place-items:center}
.cart-n{
  position:absolute;top:2px;right:2px;
  min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;
  background:var(--rojo);color:#fff;border-radius:100px;
  font-family:var(--sans);font-size:10.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
  /* Un aro del color del header para que la insignia no se pegue al ícono. */
  box-shadow:0 0 0 2px var(--negro);
  pointer-events:none;
}
/* Cuando pasa de 9, la insignia se ensancha en vez de deformarse. */
.cart-n:not(:empty){padding:0 5px}

/* ==========================================================================
   MENÚ MÓVIL
   --------------------------------------------------------------------------
   El CSS aprobado apaga `.nav` abajo de 900px y enciende el hamburguesa, pero
   detrás del hamburguesa no había NADA: en el teléfono la tienda se quedaba
   sin navegación. Esto es lo que faltaba.

   ⚠️  LEE ESTO ANTES DE TOCARLO. Un intento anterior dejó la tienda
   inservible: reusaba `.lb-fondo` (que es `position:absolute;inset:0`) y ese
   fondo invisible cubrió la página entera y se tragó todos los clics — no se
   podía ni escoger talla. De ahí las dos defensas de este bloque:

     · La PRIMERA regla es `.mm{display:none}`, sin condición ninguna. El
       panel solo existe cuando `:target` lo enciende, y `:target` solo puede
       pasar cuando alguien pica el hamburguesa.
     · Arriba de 900px se apaga otra vez con `!important`, aunque el hash
       quede pegado en la barra de direcciones al girar el teléfono.

   Se abre con `:target` y no con JavaScript porque es el mismo mecanismo del
   visor de fotos que el sitio ya usa: si el JS no carga, el menú funciona.
   ========================================================================== */

/* ① Cerrado SIEMPRE, salvo que se diga lo contrario. */
.mm{display:none}

/* ② Solo en teléfono, y solo cuando el hamburguesa lo señaló. */
@media(max-width:900px){
  .mm:target{display:block}

  .mm-fondo{
    position:fixed;inset:0;z-index:190;
    background:rgba(11,11,12,.6);backdrop-filter:blur(2px);
  }

  .mm-caja{
    position:fixed;top:0;right:0;bottom:0;z-index:200;
    width:min(340px,88vw);
    background:var(--negro);color:#fff;
    display:flex;flex-direction:column;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:-18px 0 44px rgba(0,0,0,.45);
    /* El cajón entra desde la derecha. `:target` no tiene estado "saliendo",
       así que solo se anima la entrada; cerrar es instantáneo y está bien. */
    animation:mm-entra .22s ease-out both;
  }
}
@keyframes mm-entra{from{transform:translateX(102%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.mm-caja{animation:none}}

/* ③ De 900px para arriba no existe, pase lo que pase con el hash. */
@media(min-width:901px){.mm,.mm:target{display:none!important}}

/* ④ Con el cajón abierto, la página de atrás no se mueve.
   Sin esto el dedo arrastra el fondo mientras el menú está encima y al
   cerrarlo el cliente aparece en otra parte de la página, sin saber por qué.
   `:has()` lo permite sin JavaScript; donde no exista simplemente no se
   bloquea y el menú sigue funcionando igual. */
@media(max-width:900px){
  html:has(.mm:target){overflow:hidden}
}

/* ---------- Cabecera del cajón ---------- */
.mm-cab{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 8px 14px 20px;border-bottom:1px solid var(--linea);
  flex:0 0 auto;
}
.mm-tit{
  font-family:var(--display);font-size:13px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris-2);
}
/* 48×48: con el pulgar, una × de 20px no se atina. Mínimo de Apple (HIG) y
   de WCAG 2.5.5, que piden 44×44. */
.mm-x{
  width:48px;height:48px;display:grid;place-items:center;
  font-size:30px;line-height:1;color:#fff;text-decoration:none;
}
.mm-x:hover,.mm-x:focus-visible{color:var(--rojo)}

/* ---------- Buscador (el del header, con otra piel) ----------
   En el teléfono la lupa del header todavía no abre nada, así que esta es la
   única forma de buscar. El formulario lo pinta kevstore_form_buscar(): aquí
   solo se le da forma para que nunca salga crudo. */
.mm .bus{display:flex;gap:0;margin:16px 20px 6px;flex:0 0 auto}
.mm .bus-lab{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.mm .bus-campo{
  flex:1 1 auto;min-width:0;height:48px;padding:0 14px;
  background:rgba(255,255,255,.07);border:1px solid var(--linea);border-right:0;
  color:#fff;font-family:var(--sans);font-size:14px;
}
.mm .bus-campo::placeholder{color:var(--gris)}
.mm .bus-campo:focus{outline:0;border-color:var(--rojo)}
.mm .bus-ok{
  flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center;
  background:var(--rojo);border:0;color:#fff;cursor:pointer;
}
.mm .bus-ok svg{width:20px;height:20px}
.mm .bus-ok span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
}

/* ---------- Los enlaces ----------
   52px de alto cada renglón: es lo que mide cómodo un dedo y deja la lista
   recorrible sin apuntar. */
.mm-links{flex:1 1 auto;padding:10px 0 6px}
.mm-a{
  display:flex;align-items:center;gap:10px;
  min-height:52px;padding:0 20px;
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#e4e4e7;border-bottom:1px solid rgba(255,255,255,.07);
  cursor:pointer;
}
.mm-a:hover,.mm-a:focus-visible{background:rgba(255,255,255,.06);color:#fff}
.mm-a.on{color:#fff;box-shadow:inset 3px 0 0 var(--rojo)}

/* Catálogo desplegable. <details> y no `:hover`: en un teléfono no hay
   puntero, así que el desplegable de escritorio nunca se abriría. Es además
   el patrón que ya usan los acordeones de Preguntas frecuentes. */
.mm-dd summary{list-style:none}
.mm-dd summary::-webkit-details-marker{display:none}
.mm-dd .caret{
  margin-left:auto;width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
.mm-dd[open] .caret{transform:rotate(-135deg) translate(-2px,-2px)}
.mm-sub{background:rgba(255,255,255,.04);padding:4px 0}
.mm-sub-a{
  display:block;min-height:48px;padding:11px 20px 11px 34px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mm-sub-a:last-child{border-bottom:0}
.mm-sub-a b{display:block;font-size:13.5px;font-weight:600;color:#fff}
.mm-sub-a em{
  display:block;font-style:normal;font-size:11.5px;color:var(--gris);
  margin-top:2px;line-height:1.4;
}
.mm-sub-a:hover,.mm-sub-a:focus-visible{background:rgba(255,255,255,.07)}
.mm-sub-a:hover b{color:var(--rojo)}

/* ---------- Cuenta y carrito ----------
   En escritorio son iconos en el header; con el hamburguesa abierto quedan
   tapados, así que se repiten aquí con su nombre escrito. */
.mm-pie{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;flex:0 0 auto;
  background:var(--linea);border-top:1px solid var(--linea);
}
.mm-pie-a{
  min-height:56px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--negro);color:#e4e4e7;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;position:relative;
}
.mm-pie-a svg{width:19px;height:19px;flex:0 0 auto}
.mm-pie-a:hover,.mm-pie-a:focus-visible{background:#17171a;color:#fff}
.mm-n{
  font-style:normal;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;background:var(--rojo);color:#fff;
  border-radius:100px;font-size:10.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}

/* ---------- WhatsApp ----------
   En esta tienda el WhatsApp no es un extra de contacto: es por donde se
   vende. Va abajo del todo y en verde, que es donde el pulgar llega solo. */
.mm-wa{display:grid;gap:1px;background:var(--linea);flex:0 0 auto}
.mm-wa-a{
  min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;
  background:#0e2e1b;color:#7bf0ac;font-size:12.5px;font-weight:700;
  letter-spacing:.05em;
}
.mm-wa-a svg{width:19px;height:19px;flex:0 0 auto}
.mm-wa-a:hover,.mm-wa-a:focus-visible{background:#123d24;color:#a6f8c8}

/* ==========================================================================
   BUSCADOR DEL HEADER Y CARRITO LATERAL
   --------------------------------------------------------------------------
   Los dos controles que la maqueta dejó de adorno. Los dos se abren con
   `:target`, el mismo mecanismo del visor de fotos de las opiniones y del
   menú móvil: cero JavaScript obligatorio.

   ⚠️ ESTE BLOQUE ES OBLIGATORIO Y VIAJA CON SU MARCADO.
   El 2 de agosto se subió un panel sin su CSS: su fondo (`position:absolute;
   inset:0`) quedó cubriendo la página entera, invisible, tragándose todos los
   clics. Las cajitas de talla dejaron de responder y NO SE PODÍA COMPRAR.
   Las dos primeras reglas de cada mitad — la que dice `display:none` y la que
   dice `:target` — son las que impiden que eso vuelva a pasar.
   ========================================================================== */

/* ---------- 1. Buscador del header ---------- */

/* NACE CERRADO. Sin esta regla el panel se queda pegado bajo el header en
   todas las páginas del sitio. */
.hd-bus{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  background:rgba(11,11,12,.98);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.hd-bus:target{display:block}
/* El header blanco (no la variante negra) necesita su propio fondo. */
.header:not(.header-negro) .hd-bus{
  background:rgba(255,255,255,.99);border-bottom:1px solid var(--linea-osc);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.hd-bus .wrap{display:flex;align-items:center;gap:14px;padding:18px 0}

/* La × de cerrar: es un enlace a "#", que quita el :target. */
.hd-bus-x{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  border-radius:50%;font-size:26px;line-height:1;color:#fff;
  background:rgba(255,255,255,.10);transition:.15s;
}
.hd-bus-x:hover{background:rgba(255,255,255,.22)}
.header:not(.header-negro) .hd-bus-x{color:var(--negro);background:var(--hueso)}
.header:not(.header-negro) .hd-bus-x:hover{background:var(--marmol)}

/* El formulario. Es un <form method="get"> normal con un campo oculto
   post_type=product: por eso la búsqueda no necesita ni una línea de JS. */
.bus{display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0}
/* La etiqueta existe para el lector de pantalla, no para la vista. Se recorta
   en vez de esconderse con display:none, que la sacaría del árbol accesible. */
.bus-lab{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.bus-campo{
  flex:1 1 auto;min-width:0;height:52px;padding:0 16px;
  font-family:var(--sans);font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--linea);
  border-right:0;border-radius:var(--r) 0 0 var(--r);
  -webkit-appearance:none;appearance:none;
}
.bus-campo::placeholder{color:var(--gris)}
.bus-campo:focus{outline:0;border-color:var(--rojo);background:rgba(255,255,255,.10)}
.header:not(.header-negro) .bus-campo{
  color:var(--negro);background:#fff;border-color:var(--linea-osc);
}
.bus-ok{
  flex:0 0 auto;height:52px;padding:0 22px;display:inline-flex;align-items:center;gap:8px;
  background:var(--rojo);color:#fff;border:0;border-radius:0 var(--r) var(--r) 0;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;transition:.15s;
}
.bus-ok:hover{background:var(--rojo-osc)}
.bus-ok svg{width:18px;height:18px}

/* En el teléfono la lupa del header está apagada por la regla de arriba
   (`.acciones .icon-btn:first-child{display:none}`), que la mandaba "dentro
   del menú". Mientras el menú móvil no traiga buscador propio, un buscador
   invisible es un buscador que no existe: aquí se vuelve a encender. Si el
   menú móvil algún día incorpora el suyo, se borra esta regla y ya. */
@media(max-width:900px){
  .acciones .icon-btn.bus-abrir{display:grid}
  .hd-bus .wrap{padding:12px 0;gap:8px}
  .bus-campo{height:46px;font-size:16px} /* 16px: menos que eso, iOS hace zoom */
  .bus-ok{height:46px;padding:0 14px}
  .bus-ok span{display:none} /* solo la lupa, no cabe la palabra */
  .hd-bus-x{width:34px;height:34px}
}

/* ---------- 2. Carrito lateral ---------- */

/* `.cl` monta sobre `.lightbox`, que ya trae `display:none` + `:target`.
   Cambia dos cosas: la colocación (el visor de fotos centra su contenido y
   este se pega al borde derecho, de arriba abajo y sin margen) y CÓMO SE
   ESCONDE.

   POR QUÉ NO `display:none`, que es lo que hace `.lightbox`:
   picar un enlace a un ancla hace que el navegador se desplace hasta ella.
   Si la capa está en `display:none` no tiene caja propia, así que Chrome se
   desplaza a su ancestro dibujado más cercano —el <body>— y la página BRINCA
   HASTA ARRIBA. Medido: con el catálogo a 600px, picar la canasta lo mandaba
   a 0. Dejándola dibujada y `position:fixed`, su caja YA está pegada al borde
   de la ventana: el navegador calcula que no hay que desplazarse nada y la
   página se queda donde estaba.

   ⚠️ EL PELIGRO DE ESTO, Y CÓMO SE APAGA:
   una capa a pantalla completa que existe siempre es exactamente lo que dejó
   la tienda sin poder vender el 2 de agosto — invisible y tragándose todos
   los clics. Aquí NO puede pasar, y por partida triple:
     · `visibility:hidden` — un elemento invisible no recibe el ratón, y sus
       hijos tampoco (incluido `.lb-fondo`, que es el que hacía el daño).
     · `pointer-events:none` — cinturón además de tirantes.
     · `opacity:0` — no pinta un solo píxel.
   Las tres se levantan SOLO en `:target`. Está comprobado con
   `elementFromPoint` en una rejilla de toda la ventana: ver el checador
   .audit-tmp/sondas/revisar.mjs. */
.lightbox.cl{
  display:flex;padding:0;align-items:stretch;justify-content:flex-end;
  visibility:hidden;opacity:0;pointer-events:none;
  /* La visibilidad espera a que termine el desvanecido para irse; si se fuera
     de golpe, el cajón desaparecería sin transición al cerrar. */
  transition:opacity .2s ease,visibility 0s linear .2s;
}
.lightbox.cl:target{
  visibility:visible;opacity:1;pointer-events:auto;
  transition:opacity .2s ease;
}

.cl-caja{
  position:relative;display:flex;flex-direction:column;
  width:min(400px,100%);max-width:100%;background:#fff;
  box-shadow:-24px 0 70px rgba(0,0,0,.35);
}
/* La animación cuelga de `:target` y no de la caja a secas: como la capa ya
   no nace en `display:none`, si estuviera suelta correría una sola vez al
   cargar la página —a escondidas— y nunca más. */
.lightbox.cl:target .cl-caja{
  /* Entra deslizándose. Va en la caja y no en la capa para que el fondo
     oscuro aparezca de golpe y el cajón sea lo único que se mueve. */
  animation:cl-entra .26s cubic-bezier(.22,.61,.36,1);
}
@keyframes cl-entra{from{transform:translateX(100%)}to{transform:none}}
.cl-cuerpo{display:flex;flex-direction:column;height:100%;min-height:0}

.cl-cab{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:20px 18px;border-bottom:1px solid var(--linea-osc);
}
.cl-cab b{font-family:var(--display);font-size:17px;letter-spacing:.02em}
.cl-piezas{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);
}
/* La × se despega a la derecha. Reusa `.lb-cerrar` para que Escape la
   encuentre (tema.js busca `.lb-cerrar` dentro del `:target` abierto), pero
   aquí no va flotando en la esquina de la pantalla sino en la barra. */
.lb-cerrar.cl-x{
  position:static;margin-left:auto;width:34px;height:34px;font-size:26px;
  color:var(--negro);background:var(--hueso);
}
.lb-cerrar.cl-x:hover{background:var(--marmol)}

.cl-vacio{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:40px 24px;text-align:center;
}
.cl-vacio p{margin:0;color:var(--gris);font-size:14px}

/* La lista es lo único que se desplaza: el encabezado y el pie con el botón
   de finalizar se quedan fijos, que es lo que se quiere en un cajón. */
.cl-lista{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px 18px}
.cl-item{
  display:grid;grid-template-columns:64px 1fr 24px;gap:12px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--linea-osc);
}
.cl-item:last-child{border-bottom:0}
.cl-foto{display:block;width:64px}
.cl-foto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.cl-datos{display:flex;flex-direction:column;gap:3px;min-width:0}
.cl-nom{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--negro)}
.cl-nom:hover{color:var(--rojo)}
.cl-var{font-size:11.5px;color:var(--gris)}
.cl-cant{font-size:13px;color:var(--gris);margin-top:2px}
.cl-cant b{color:var(--negro);font-weight:700}
.cl-quitar{
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  font-size:18px;line-height:1;color:var(--gris);transition:.15s;
}
.cl-quitar:hover{background:var(--hueso);color:var(--rojo)}

.cl-pie{
  flex:0 0 auto;padding:16px 18px 20px;border-top:1px solid var(--linea-osc);
  background:var(--hueso);display:flex;flex-direction:column;gap:8px;
}
.cl-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
.cl-row b{font-family:var(--display);font-size:19px}
/* El ahorro en verde, igual que en el resumen del carrito grande. La clase
   `.verde` por sí sola no pinta nada: la regla que le da color es
   `.r-row .verde`, y aquí los renglones son `.cl-row`. Sin esta línea el
   "−$1,500" salía en negro y no se leía como un ahorro. */
.cl-row .verde{color:var(--verde);font-weight:700}
.cl-nota{margin:2px 0 8px;font-size:11.5px;color:var(--gris)}
.cl-pie .btn{margin:0}

@media(max-width:480px){
  .cl-caja{width:100%}
  .cl-lista{padding:6px 14px}
  .cl-cab,.cl-pie{padding-left:14px;padding-right:14px}
}

/* ---------- 3. El brinco de "algo entró al carrito" ----------
   Que se note que la compra registró sin sacar al cliente de donde está.
   La clase la pone y la quita tema.js cuando el AJAX vuelve bien. */
.kev-cart.brinca{animation:kev-brinca .55s ease}
@keyframes kev-brinca{
  0%{transform:none}
  22%{transform:scale(1.28) rotate(-9deg)}
  46%{transform:scale(.92) rotate(5deg)}
  70%{transform:scale(1.1) rotate(-2deg)}
  100%{transform:none}
}
/* La insignia entra creciendo desde cero: es la parte que de verdad cuenta la
   noticia (el número cambió). */
.kev-cart.brinca .cart-n{animation:kev-pop .45s .1s backwards cubic-bezier(.34,1.56,.64,1)}
@keyframes kev-pop{from{transform:scale(0)}to{transform:none}}

@media(prefers-reduced-motion:reduce){
  .lightbox.cl,.lightbox.cl:target{transition:none}
  .lightbox.cl:target .cl-caja{animation:none}
  .kev-cart.brinca,.kev-cart.brinca .cart-n{animation:none}
}

/* ==========================================================================
   MÓVIL · ÁREAS TÁCTILES DE 44×44 Y CASILLAS VESTIDAS
   --------------------------------------------------------------------------
   El prototipo se dibujó y se aprobó a 1440px, con ratón. Un ratón acierta un
   blanco de 20px; un pulgar no. Apple pide 44×44 en sus guías (HIG) y WCAG
   2.5.5 pide lo mismo. Aquí estaban en 13, 16, 26, 34 y 36 px.

   TODO lo de este bloque vive DENTRO de una consulta de medios de 900px o
   menos: de ahí para arriba el sitio no cambia ni un píxel, que es lo que
   miden `visual.mjs` y las once páginas que están en 0–0.9%.

   Se mide solo con `bin/verificar/movil.mjs`.
   ========================================================================== */
@media(max-width:900px){

  /* ---------- Los iconos del header ----------
     Medían 34×34. Son el carrito y la cuenta: los dos botones que más se
     pican en toda la tienda, y los dos que peor se atinaban. */
  .header .icon-btn{min-width:44px;min-height:44px}
  /* Los dos logos son enlaces a la portada y medían 42 de alto. El del pie
     además ocupa todo el ancho de su columna, así que el blanco es enorme
     de lado y corto de alto: justo lo que hace fallar el pulgar. */
  .header .logo,.footer .logo{min-height:44px}

  /* ---------- Botones ----------
     `.btn` daba 37–39px de alto según el texto. Se le pone piso, no altura
     fija, para que uno de dos renglones siga creciendo. */
  .btn{min-height:46px}
  .btn-sm{min-height:44px}

  /* ---------- Migas de pan ----------
     "Inicio" medía 33×15. Es la única forma de regresar sin usar el botón
     del navegador. */
  .miga{padding:6px 0}
  /* El padding negativo devuelve el sitio: el blanco crece pero "Inicio"
     sigue empezando donde empezaba, alineado con el título de la página. */
  .miga a{
    display:inline-flex;align-items:center;
    min-height:44px;min-width:44px;justify-content:center;
    padding:0 6px;margin:0 -6px;
  }

  /* ---------- "Ver el catálogo completo" y enlaces de remate ---------- */
  .link-mas{display:inline-block;padding:12px 2px}

  /* ---------- Redes del pie ---------- */
  .footer-redes a{min-width:44px;min-height:44px}

  /* ---------- Las dos listas de enlaces del pie ----------
     Doce enlaces de 16px de alto, uno pegado al otro. Salen en las QUINCE
     páginas del sitio y son la única forma de llegar a Envíos, Devoluciones,
     Términos y Contacto desde el teléfono. Con el dedo se pica el de arriba
     o el de abajo casi siempre.
     El renglón crece a 44px pero el TEXTO no se mueve de su sitio: el alto
     extra se reparte con `align-items:center`, no con padding arriba.

     Y el hueco de 9px entre renglones se quita: si se dejara, cada enlace
     mediría 44 + 9 y el pie se estiraría casi al doble. Los 44px del propio
     renglón ya son toda la separación que hace falta. */
  .footer-grid ul{gap:0;margin-top:-8px}
  .footer-grid ul li{display:flex;align-items:center;min-height:44px}
  .footer-grid ul li a{display:flex;align-items:center;flex:1;min-width:0;min-height:44px}

  /* ---------- Ordenar por ---------- */
  select.sel,.cat-orden .sel{min-height:44px}

  /* ---------- Quitar del carrito ----------
     35×26. Con el dedo se le pega al renglón de al lado y se borra el
     producto equivocado — o peor, no se borra ninguno y el cliente cree que
     la tienda no responde. */
  .cart-prod .rm,a.remove.rm{
    display:inline-flex;align-items:center;
    min-height:44px;padding:0 10px;margin-left:-10px;
  }

  /* ---------- Cantidad del carrito ----------
     Los botones − y + medían 36×42 y la caja del número 44×42. Es el control
     que más se pica en el carrito y el que más caro sale errar: se agrega o
     se quita una pieza sin querer. En la ficha ya medían 44×52; aquí no,
     porque el carrito usa la plantilla de Woo y no la del prototipo. */
  .qty-menos,.qty-mas{min-width:44px;min-height:44px}
  .woocommerce-cart input.qty,
  .woocommerce-cart input[type="number"].input-text{min-height:44px}

  /* ---------- El carrito lateral (agregado el 3 de agosto) ----------
     El cajón lo hizo otro turno, en paralelo a esta tanda, y por eso se quedó
     fuera de la primera pasada: nació con los tres blancos chicos, la × de
     cerrar en 34×34, el nombre del producto en 21 px de alto y la × de quitar
     en 24×24. En el teléfono el cajón OCUPA TODA la pantalla
     (`.cl-caja{width:100%}` abajo de 480), así que es la pantalla del carrito,
     no un adorno. */

  /* La × de cerrar crece igual que los iconos del header, que ya pasaron de
     34 a 44 en este mismo bloque. Como está pegada a la derecha con
     `margin-left:auto`, el ancho extra se lo come hacia adentro: su orilla
     derecha no se mueve. */
  .lb-cerrar.cl-x{width:44px;height:44px}

  /* El nombre es el enlace a la ficha. Se le pone PISO de 44, no altura fija,
     para que un nombre de dos renglones siga creciendo.
     No estira el renglón: la columna de texto queda en ~82 px y la foto mide
     85 (64 de ancho × 4/3), o sea que el alto del renglón lo sigue mandando
     la foto. Lo que sí se mueve es el texto, que queda centrado en su caja. */
  .cl-nom{display:flex;align-items:center;min-height:44px}

  /* La × de quitar es la que más caro sale errar: se borra el producto
     equivocado, o no se borra ninguno y el cliente cree que la tienda no
     responde.
     Crece la CASILLA DE LA REJILLA junto con el botón, de 24 a 44. Se probó
     primero dejar la columna en 24 y estirar el botón con margen negativo
     —para que la × no se moviera ni un píxel— y está mal: a un elemento de
     rejilla con ancho fijo se le alinea la caja de MARGEN, así que el margen
     negativo lo empuja para el otro lado y se sale 30 px por la derecha. Eso
     es desborde horizontal, que es justo lo que vigila `movil.mjs`.
     Con la columna en 44 sobra lugar: a 375 px de pantalla la columna del
     texto queda en 215, contra los 235 de antes. */
  .cl-item{grid-template-columns:64px 1fr 44px}
  .cl-quitar{width:44px;height:44px}
}

/* ==========================================================================
   LAS CASILLAS Y LOS REDONDELES
   --------------------------------------------------------------------------
   Lo dijo el dueño: "las casillas se ven feas". Y era literal — el envío del
   checkout enseñaba los redondeles AZULES del sistema operativo, de 13×13 px,
   en una tienda que es roja y negra.

   El prototipo sí les puso `accent-color` rojo a CUATRO casillas concretas
   (.f-op, .pago, .check, .f-check) y se le pasaron las demás: las de
   WooCommerce, que no existían cuando se dibujó la maqueta. Por eso la regla
   NO va por clase sino por tipo: así ninguna casilla futura vuelve a salir
   azul.

   ─── 5 AGO · AHORA SE DIBUJAN EN TODOS LOS TAMAÑOS, Y ASÍ SE RESOLVIÓ ───

   Antes esto era dos tratamientos: dibujadas de 900px para abajo, y de 901
   para arriba sólo `accent-color`. El motivo escrito era que dibujarlas movía
   la maqueta (cat-playeras de 0.5% a 2.1%, checkout de 12.9% a 14.4%).

   ❌ **El motivo era cierto y la conclusión estaba mal.** Lo que movía la
   maqueta no era dibujarlas: era dibujarlas **de 20px donde la nativa mide
   16**. `accent-color` sólo pinta la palomita — la casilla APAGADA se queda
   siendo el cuadrito gris del sistema operativo, que es justo lo que el dueño
   llamó feo. O sea que el escritorio, que es donde él lo vio, era lo único
   que seguía sin arreglarse.

   La salida es dibujarlas **con la misma caja que ya ocupaban**, medida en el
   navegador antes de tocar nada:

   | Dónde | Medido |
   |---|---|
   | `.f-check` (catálogo), `terms`, Mi cuenta | 16 px |
   | `.pago` / `.input-radio` (checkout) | 17 px |
   | `.f-op` (filtros) | 15 px |
   | `.envio-detalle` (envío del carrito) | 13 px ← el redondel azulito de macOS |

   Por eso el tamaño va en un `:where()`, que **no tiene especificidad**: las
   reglas por clase de más arriba (`.f-op input{15px}`, `.pago input{17px}`)
   le siguen ganando y conservan su caja al píxel. Sólo el de 13px sube a 16,
   que es el único que sí se quería mover.

   De 900px para abajo siguen creciendo a 20px, porque ahí lo que hace falta
   es el pulgar. Esa regla sí va por tipo y va después, así que gana.
   ========================================================================== */

/* El TAMAÑO va aparte y sin especificidad: ver la tabla de arriba. */
:where(input[type="checkbox"],input[type="radio"]){width:16px;height:16px}

input[type="checkbox"],
input[type="radio"]{
  -webkit-appearance:none;appearance:none;
  accent-color:var(--rojo);
  min-width:13px;flex:0 0 auto;
  /* `padding:0` no es higiene, es un arreglo medido: la casilla del video por
     WhatsApp vive dentro de `.campo`, que le pone el relleno de los campos de
     texto. Con la casilla NATIVA ese relleno se ignoraba; al dibujarla empezó
     a contar y la caja se fue de 16 a 28 px. */
  padding:0;
  /* ⚠️ AQUÍ NO SE TOCA NI EL MARGEN NI `vertical-align`, y costó medirlo.
     El primer intento traía `margin:0 2px 0 0;vertical-align:middle` copiado
     del bloque de móvil, y con eso cat-playeras se fue de 0.6% a 2.3% y el
     checkout de 22.1% a 23.8%. No era la casilla: era que el navegador le pone
     de fábrica `margin:3px 3px 3px 4px`, y quitárselo sube UN PÍXEL todo lo
     que va debajo. Un renglón corrido un píxel pinta de rojo media página en
     el comparador. El margen del sistema se respeta; el de 2px vive sólo en el
     bloque de ≤900px, donde la casilla ya cambia de tamaño de todos modos. */
  border:1.5px solid #c7c4bf;background:#fff;border-radius:3px;
  display:inline-block;position:relative;
  cursor:pointer;transition:border-color .14s,background .14s,box-shadow .14s;
}
input[type="radio"]{border-radius:50%}

/* La palomita y el punto: pseudo-elemento escalado, no una imagen que
   descargar. Se dibujan siempre y se revelan con `transform`, para que
   marcar la casilla no reacomode nada.

   ⚠️ VAN CON `inset` EN PORCENTAJE, Y NO CON `width/height` EN PORCENTAJE.
   El primer intento fue `display:inline-grid` + `place-content:center` +
   `width:70%`, y **la palomita no se dibujó**: se vio en una captura al 8× —
   un cuadro rojo liso. En un contenedor de rejilla centrado, la pista se mide
   por su contenido, así que un `width` en porcentaje se pregunta a sí mismo
   cuánto mide y sale 0. Con `position:absolute` + `inset`, el porcentaje se
   resuelve contra la caja del `input`, que sí tiene medida.

   Y van en porcentaje —no en píxeles— porque la misma regla sirve para cajas
   de 15, 16, 17 y 20 px. */
input[type="checkbox"]::before{
  content:"";position:absolute;inset:17%;background:#fff;
  transform:scale(0);transition:transform .12s;
  clip-path:polygon(14% 44%,0 60%,39% 100%,100% 18%,84% 2%,39% 68%);
}
input[type="radio"]::before{
  content:"";position:absolute;inset:28%;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .12s;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked{background:var(--rojo);border-color:var(--rojo)}
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before{transform:scale(1)}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled){border-color:var(--negro)}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{outline:2px solid var(--negro);outline-offset:2px}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled{opacity:.45;cursor:not-allowed}

/* La casilla de "Solo con existencia" del catálogo no se pica: quien filtra
   es el enlace que la envuelve (así funciona sin JavaScript). Se le quita el
   dedito para que no prometa un clic que no da. */
.f-check input{pointer-events:none;cursor:default}
.f-check.on input{background:var(--rojo);border-color:var(--rojo)}
.f-check.on input::before{transform:scale(1)}

@media(max-width:900px){
  /* Va por tipo y va DESPUÉS de las reglas por clase, así que gana el tamaño
     a `.f-op input{15px}` y a `.pago input{17px}`. Es a propósito. */
  input[type="checkbox"],
  input[type="radio"]{
    width:20px;height:20px;min-width:20px;min-height:20px;
    margin:0 2px 0 0;vertical-align:middle;
  }

  /* El renglón entero es el blanco, no el cuadrito de 20px. Con el dedo,
     apuntarle a una casilla de 20px que está junto a un texto de 300px es
     absurdo: se pica el texto y no pasa nada. */
  .envio-detalle label,
  .wc_payment_methods li label,
  .woocommerce-form__label-for-checkbox,
  .woocommerce-form-login__rememberme{
    display:flex;align-items:flex-start;gap:10px;
    min-height:44px;padding:6px 0;cursor:pointer;
  }
  .envio-detalle label > span,
  .wc_payment_methods li label > span{flex:1;min-width:0}
}

@media(prefers-reduced-motion:reduce){
  input[type="checkbox"],input[type="radio"],
  input[type="checkbox"]::before,input[type="radio"]::before{transition:none}
}

/* ==========================================================================
   MÓVIL · LOS FILTROS DEL CATÁLOGO
   --------------------------------------------------------------------------
   Abajo de 1000px los cuatro grupos de filtros se aplastaban en UNA sola tira
   con desplazamiento horizontal: 986px de contenido metidos en 354. No
   desbordaba la página —eso ya estaba bien— pero con el dedo era inservible:

     · De los cuatro grupos solo se veía el primero y medio del segundo. TALLA
       y DISPONIBILIDAD quedaban a 600px a la derecha, sin nada que dijera que
       estaban ahí. Un cliente que quiere filtrar por talla no los encuentra.
     · El corte caía a media palabra ("SUC…"), que se lee como error, no como
       "hay más, deslízame".
     · Los chips medían 36px y 33px de alto: abajo de los 44 que pide el dedo.

   Ahora cada grupo es su propio renglón, con su título visible, y son los
   CHIPS los que se deslizan de lado dentro del renglón. Se ven los cuatro
   títulos de un vistazo y cada uno se recorre solo. Es el mismo patrón de las
   tiras de categorías de cualquier tienda en el teléfono.

   Solo CSS: el marcado del catálogo no se toca.
   ========================================================================== */
@media(max-width:1000px){

  /* La tira deja de ser una fila de grupos y pasa a ser una columna. */
  .cat-lateral{
    display:block;overflow:visible;
    padding-bottom:6px;margin-bottom:20px;
  }

  /* Cada grupo: título arriba, chips en un renglón que se desliza. */
  .cat-lateral .f-grupo{
    display:block;margin-bottom:12px;
  }
  .cat-lateral .f-grupo:last-child{margin-bottom:0}
  .cat-lateral .f-grupo h4{
    margin:0 0 8px;font-size:10.5px;letter-spacing:.16em;color:var(--gris);
  }

  /* El renglón de chips. `-18px` de margen y su padding devuelto: así el
     primer chip arranca alineado con el texto de la página pero la zona que
     se desliza llega hasta el borde de la pantalla, que es donde el pulgar
     empieza el gesto. */
  .cat-lateral .f-grupo > a,
  .cat-lateral .f-tallas{display:inline-flex}
  .cat-lateral .f-grupo{
    display:flex;flex-wrap:wrap;
  }
  .cat-lateral .f-grupo h4{flex:0 0 100%}
  .cat-lateral .f-tallas{flex-wrap:wrap;gap:8px}

  /* 44px de alto en todo lo que se pica. */
  .cat-lateral .f-op{
    min-height:44px;display:inline-flex;align-items:center;
    padding:0 16px;margin:0 8px 8px 0;
    border:1px solid var(--linea-osc);border-radius:100px;
    font-size:13.5px;white-space:nowrap;
  }
  .cat-lateral .f-op.on{background:var(--negro);color:#fff;border-color:var(--negro)}
  .cat-lateral .chip-f{
    min-width:52px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    margin:0 8px 8px 0;
  }
  /* La casilla de existencia es el blanco más chico de todos: 156×22. */
  .cat-lateral .f-check{
    min-height:44px;display:inline-flex;align-items:center;gap:10px;
    padding:0 4px 0 0;
  }
}

/* ==========================================================================
   MÓVIL · LOS ÚLTIMOS BLANCOS CHICOS
   --------------------------------------------------------------------------
   Lo que quedó después de la barrida grande, uno por uno y con su razón.
   ========================================================================== */
@media(max-width:900px){

  /* El NOMBRE del producto en la tarjeta del catálogo: 34px de alto.
     La foto de arriba es el mismo enlace y sí es enorme, así que la norma lo
     perdonaría (WCAG 2.5.5 exceptúa el control que tiene un equivalente en la
     misma página). Pero en el teléfono la foto y el nombre están pegados: el
     dedo que apunta al nombre y falla por 3px cae en el precio, que no es
     enlace, y no pasa nada. Se siente como si la tienda no respondiera. */
  .card-body > a{display:flex;align-items:center;min-height:44px}

  /* El nombre del producto en el renglón del carrito.

     ⚠️ 5 AGO · ESTA REGLA LLEVABA TIEMPO SIN PEGARLE A NADA. Decía
     `.cart-prod > a`, y ese hijo directo es el de la FOTO, que ya mide 88px:
     o sea que la regla se cumplía sola y el checador seguía marcando tres
     enlaces de 21px de alto sin que nadie entendiera por qué. El nombre no es
     hijo directo — cuelga del `<div>` de los datos:
       .cart-prod > a(foto) + .cart-prod > div > a(nombre)
     Se agrega ese camino y se excluye "Quitar", que ya trae sus 44px. */
  .cart-prod .nom,.woocommerce-cart-form__cart-item .nom,
  .cart-prod > a,.product-name > a,
  .cart-prod > div > a:not(.remove){
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* El ojito de "ver la contraseña" medía 16×6. Seis píxeles de alto.
     Es de WooCommerce, no del prototipo, y por eso se le fue a todo el mundo. */
  .show-password-input{
    width:44px;height:44px;
    background-position:center;background-size:20px 20px;
  }
  .password-input{display:flex;align-items:center}

  /* "¿Olvidaste tu contraseña?", "Armar mi próximo paquete", "3 opiniones":
     enlaces sueltos de una línea, fuera de un párrafo. El margen negativo
     mantiene el texto donde estaba y solo crece la zona que recibe el dedo. */
  .cuenta-row a,.cuenta-link,.rev-link,.op-link,.ficha-cab a{
    display:inline-flex;align-items:center;min-height:44px;
    padding:0 4px;margin:0 -4px;
  }
}

/* Los cuatro que quedaban, ya con nombre y apellido. */
@media(max-width:900px){
  /* Formas de pago y "acepto los términos": el <label> es el blanco, no el
     redondel de 20px. La regla de más arriba solo cogía los <li> de la lista
     de Woo; estos van dentro de `.pago` y de un `<p class="form-row">`. */
  .pago label,
  .form-row.validate-required > label,
  .campo.full > label{
    display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:6px 0;
  }
  .pago label > span,
  .form-row.validate-required > label > span{flex:1;min-width:0}

  /* "3 opiniones" de la ficha y "Armar mi próximo paquete" de Mi cuenta. */
  .pdp-rev a,.nudge a{
    display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0 -4px;
  }

  /* "Volver a la tienda" del carrito vacío: es el ÚNICO botón de esa página.
     Si no se atina, el cliente se queda ahí parado. */
  .return-to-shop a,a.wc-backward{
    display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  }
}

/* Y los dos últimos. */
@media(max-width:900px){
  /* "Inicia sesión" del aviso de arriba del checkout: es el atajo para que
     un cliente que ya tiene cuenta no vuelva a teclear su dirección. */
  .nota a,.woocommerce-form-login-toggle a,.showlogin{
    display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0 -4px;
  }
  /* El "Ver" y el "Repetir" de la tabla de pedidos de Mi cuenta medían
     23×16 y estaban separados por un punto. Es la única forma de abrir un
     pedido, de ver su guía de rastreo y de volver a pedir lo mismo — y
     "repetir el pedido" es de lo que más usa un cliente de mayoreo. */
  .tabla td a,.woocommerce-orders-table a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;min-width:44px;padding:0 8px;
  }
}

/* ==========================================================================
   CARRUSEL DEL HERO · las diapositivas apagadas no deben recibir clics
   --------------------------------------------------------------------------
   `opacity:0` esconde a la vista pero NO al puntero: las diapositivas 2 y 3
   seguían encima y sus `ul.chips` caían justo sobre el botón "Ver catálogo"
   de la que sí se ve. Resultado: el llamado principal de la portada no se
   podía picar en NINGÚN ancho.
   Es el mismo bicho que ya cerró la tienda una vez (un elemento invisible
   tragándose los clics), por eso aquí va explícito y comentado.
   ========================================================================== */
.hero-carrusel .hs{pointer-events:none}
.hero-carrusel .hs a,
.hero-carrusel .hs button{pointer-events:auto}
/* Solo la diapositiva visible en cada momento acepta el puntero. La
   animación las va encendiendo por turnos con el mismo ciclo de 21s. */
.hero-carrusel .hs1{animation:hs-ciclo-1 21s infinite, hs-punteros-1 21s infinite}
.hero-carrusel .hs2{animation:hs-ciclo 21s infinite 7s,  hs-punteros 21s infinite 7s}
.hero-carrusel .hs3{animation:hs-ciclo 21s infinite 14s, hs-punteros 21s infinite 14s}
@keyframes hs-punteros{0%,2.4%{pointer-events:none}2.5%,33.33%{pointer-events:auto}
  33.34%,100%{pointer-events:none}}
@keyframes hs-punteros-1{0%,33.33%{pointer-events:auto}33.34%,100%{pointer-events:none}}
@media(prefers-reduced-motion:reduce){
  .hero-carrusel .hs1{pointer-events:auto}
  .hero-carrusel .hs2,.hero-carrusel .hs3{pointer-events:none}
}

/* ==========================================================================
   MÓVIL · LO QUE ESTABA MUY PEGADO
   --------------------------------------------------------------------------
   Se quejó el dueño y tenía razón. La causa es casi siempre la misma y es
   fácil de pasar por alto: filas de botones hechas con `display:flex` +
   `gap:10px` + `flex-wrap:wrap`. En escritorio los botones van uno al lado del
   otro y 10px de separación se ve bien. En el teléfono NO CABEN, la fila se
   parte en columna, y esos mismos 10px pasan a ser el hueco VERTICAL entre dos
   botones que ocupan todo el ancho. Ahí 10px es poco: se ven apelmazados y con
   el dedo se pica el que no era.

   Lo más caro estaba en el carrito: "Finalizar compra" y "o cerrar por
   WhatsApp" quedaban a 8px. Errarle ahí saca al cliente de la compra.

   Todo va abajo de 900px. Arriba no cambia nada: en escritorio los botones
   siguen en fila y 10px sigue siendo la separación correcta.
   ========================================================================== */
/* Los 8px de escritorio que antes iban escritos en la plantilla. Aquí para
   que la consulta de medios de abajo pueda subirlos en el teléfono. */
.cart-wa{margin-top:8px}

@media(max-width:900px){

  /* Las filas de botones que se parten en columna. Son las mismas cuatro de
     siempre —Mi cuenta, "Tu próximo paquete", Contacto y las tiendas— más la
     del carrito, que va con estilo escrito en la plantilla de Woo. */
  .mc-btns,.proximo-btns,.ct-btns,.tp-btns,.btns-fila,
  .cart-abajo,.woocommerce-cart-form .actions > div{
    /* `!important` porque tres de estas filas llevan el `gap:10px` escrito
       en la plantilla, copiado tal cual del prototipo. Quitarlo de ahí
       cambiaría el escritorio; esto solo lo pisa abajo de 900px. */
    gap:14px!important;
  }

  /* El par que más importa de la tienda: comprar, o irse a WhatsApp.
     Estaban a 8px. Ver el comentario de woocommerce/cart/cart-totals.php. */
  .cart-wa{margin-top:14px}

  /* Los dos WhatsApp del pie: dos blancos verdes de 44px a 9px uno del otro,
     en las QUINCE páginas. */
  .footer-wa{margin-bottom:14px}

  /* Formas de envío y de pago del checkout: son una ELECCIÓN, y una elección
     necesita que se vea dónde termina una opción y empieza la otra. */
  .pago{margin-bottom:14px}

  /* Los avisos del carrito ("Compra lo que quieras, sin límite" y "Los
     artículos no están apartados") arrancaban pegados al botón de arriba y
     casi encimados entre ellos. */
  .cart-layout .nota,.woocommerce .nota{margin-bottom:22px}
  .woocommerce-cart-form .actions + .nota,
  .woocommerce-cart-form + .nota{margin-top:24px}

  /* Envíos: la tarjeta de la tarifa y la nota de "monto por confirmar".
     El `+` no bastaba porque entre las dos hay un `<?php if ?>` que a veces
     deja otro nodo. Se le pone el margen a la nota misma; el `!important` es
     para ganarle al `margin:0 0 8px!important` que ya traía. */
  .nota-pendiente{margin-top:16px!important}

  /* Las dos tarjetas de existencias de la ficha ("Culiacán 8 piezas" /
     "Hermosillo 6 piezas"): en teléfono se apilan y 12px las dejaba leyéndose
     como una sola tarjeta partida. */
  .stock-tiendas{gap:16px}

  /* En el resumen del carrito, el recuadro gris del ENVÍO y el renglón del
     TOTAL quedaban a 10px. Son dos cosas distintas —una es una elección, la
     otra es la cifra final— y a 10px se leen como una sola. */
  .envio-detalle{margin-bottom:20px}
}

/* ==========================================================================
   MÓVIL · LOS DOS AVISOS DEL CARRITO
   --------------------------------------------------------------------------
   🔎 HALLAZGO, NO SOLO ARREGLO: `.cart-info`, `.ci-item` y `.ci-ico` NO TIENEN
   UNA SOLA REGLA DE CSS. Ni aquí ni en el prototipo aprobado — se comprobó
   buscando las tres clases en `prototipo/assets/css/style.css` y no aparecen.
   O sea que los dos avisos del carrito ("Compra lo que quieras, sin límite" y
   "Los artículos no están apartados") salen crudos EN LOS DOS: el icono en su
   propio renglón, el título pegado abajo, y los dos bloques encimados. Es de
   las cosas que el dueño señaló como "muy pegadas".

   Aquí se les da forma SOLO abajo de 900px. En escritorio se quedan como
   están, porque ahí el prototipo es el contrato y `visual.mjs` mide contra él:
   vestirlos movería el carrito, que ya está en 29.2%. **Queda para Fer**
   decidir si se visten también en escritorio; si dice que sí, es mover estas
   mismas reglas fuera de la consulta de medios.
   ========================================================================== */
@media(max-width:900px){
  .cart-info{
    display:grid;gap:22px;
    margin:26px 0 4px;padding-top:24px;
    border-top:1px solid var(--linea-osc);
  }
  .ci-item{display:flex;gap:12px;align-items:flex-start}
  .ci-ico{
    flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
    background:var(--hueso);border:1px solid var(--linea-osc);border-radius:50%;
    color:var(--rojo);
  }
  .ci-ico svg{width:17px;height:17px;display:block}
  .ci-item b{display:block;font-size:13.5px;line-height:1.35;margin-bottom:4px}
  .ci-item p{margin:0;font-size:12.5px;line-height:1.6;color:#5a5a60}
}

/* ==========================================================================
   V13 — EL VIDEO DE LA PRENDA SE VE DENTRO DEL SITIO
   --------------------------------------------------------------------------
   Marcado: `inc/video.php` (la ventana) y `woocommerce/content-single-product.php`
   (la miniatura, que ya apunta a `#video-producto` en vez de a TikTok).
   Comportamiento: el último bloque de `assets/js/tema.js`.

   ⚠️ ESTE CSS VA EN EL MISMO COMMIT QUE SU MARCADO. `.lb-video` es una capa a
   pantalla completa; sin estas reglas hereda `.lightbox`, que ya trae
   `display:none` + `:target` — o sea que sin CSS propio NO se queda abierta
   tapando la tienda, pero tampoco se vería. Las dos mitades juntas, siempre.

   Monta sobre `.lightbox` / `.lb-fondo` / `.lb-caja` / `.lb-cerrar`, que son
   las mismas clases del visor de fotos de las opiniones: se abre y se cierra
   con `:target`, con el fondo, con la × y con Escape, sin una línea de
   JavaScript obligatoria.
   ========================================================================== */

/* La caja se ajusta al video, no al revés: se fija la ALTURA y el ancho sale
   de la proporción. Al revés (ancho fijo + `max-height`) el navegador ignora
   el `aspect-ratio` y deja la caja con franjas negras a los lados. */
.lb-caja-video{max-width:92vw;width:auto;text-align:center}
.kev-video{
  position:relative;overflow:hidden;margin:0 auto;
  height:min(74vh,640px);aspect-ratio:var(--kev-prop,9 / 16);max-width:92vw;
  background:#000;border-radius:var(--r);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
/* YouTube que no es Short viene apaisado: ahí manda el ancho. */
.kev-video-h{height:auto;width:min(92vw,860px)}

/* La portada es la foto del producto y ya está descargada. El `max-height:none`
   es para ganarle al `.lb-caja img{max-height:78vh}` de las fotos de reseñas,
   que si no recorta la portada a media caja. */
.kev-video .kev-video-portada{
  position:absolute;inset:0;width:100%;height:100%;max-height:none;
  object-fit:cover;filter:brightness(.5);box-shadow:none;
}

.kev-video-play{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:none;border:0;padding:0;cursor:pointer;color:#fff;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.kev-video-tri{
  width:66px;height:66px;border-radius:50%;background:var(--rojo);
  display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(216,19,36,.45);transition:transform .18s;
}
.kev-video-tri svg{width:28px;height:28px;margin-left:3px}
.kev-video-play:hover .kev-video-tri,
.kev-video-play:focus-visible .kev-video-tri{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){
  .kev-video-tri{transition:none}
  .kev-video-play:hover .kev-video-tri,
  .kev-video-play:focus-visible .kev-video-tri{transform:none}
}

/* El reproductor que mete el JavaScript al picar el play. */
.kev-video iframe,.kev-video video{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block;background:#000;
}

/* La salida de emergencia: si el incrustado no carga (red, video privado,
   TikTok con el embed apagado) el cliente todavía puede irse a verlo allá.
   Va discreta y abajo, no como opción principal. */
.kev-video-pie{margin:14px 0 0;min-height:18px}
.kev-video-pie a{
  color:rgba(255,255,255,.7);font-size:12.5px;
  text-decoration:underline;text-underline-offset:3px;
}
.kev-video-pie a:hover{color:#fff}

/* ==========================================================================
   LOS FILTROS PUESTOS · la fila de tachitas arriba de la rejilla
   --------------------------------------------------------------------------
   La columna de la izquierda ya dice qué está encendido, pero el cliente que
   bajó a ver los productos ya no la tiene a la vista. Con cuatro filtros
   puestos —categoría, sucursal, talla y «solo con existencia», que son cuatro
   clics normales— la rejilla puede quedar en dos productos, y desde donde él
   está mirando nada le dice por qué. Esta fila es la respuesta, y cada chip
   es también la salida.

   Los chips REPITEN la forma de `.chip-f`, que es la que el prototipo ya usa
   para las tallas. No se inventa una pastilla nueva: la tienda ya tiene la
   suya y el cliente ya sabe leerla. Lo único distinto es la ×.
   ========================================================================== */

/* Sólo para lectores de pantalla. No existía en el tema y hacía falta: la ×
   sola no dice qué hace, y `aria-label` en el enlace pisaría el nombre del
   filtro, que es lo que se quiere oír primero. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.f-puestos{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 26px;
}
/* Sin esto quedan 30px de la barra MÁS el aire de la fila: demasiado hueco
   entre el conteo y los productos. Si el navegador no entiende `:has()`, lo
   único que pasa es que sobra espacio — no se rompe nada. */
.cat-barra:has(+ .f-puestos){margin-bottom:16px}

.f-puestos-t{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
}

.f-quita{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--negro);background:var(--negro);color:#fff;
  border-radius:100px;padding:7px 14px;font-size:12.5px;font-weight:600;
  transition:background .15s,border-color .15s,color .15s;
}
/* La × va en un tono más apagado para que el nombre del filtro pese más: lo
   que el cliente lee es «Culiacán», no «cerrar». */
.f-quita span[aria-hidden]{
  font-size:15px;line-height:1;opacity:.55;transition:opacity .15s;
}
.f-quita:hover{background:var(--rojo);border-color:var(--rojo);color:#fff}
.f-quita:hover span[aria-hidden]{opacity:1}
.f-quita:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

.f-quita-todo{
  font-size:12.5px;color:var(--gris);border-bottom:1px solid var(--linea-osc);
  padding-bottom:1px;transition:color .15s,border-color .15s;
}
.f-quita-todo:hover{color:var(--rojo);border-bottom-color:var(--rojo)}

@media(max-width:900px){
  /* En el teléfono la fila va donde el pulgar la alcance: los chips crecen a
     lo que pide un dedo y «Quitar todo» se va al final del renglón, no
     apretado contra el último chip. */
  .f-puestos{gap:7px;margin-bottom:20px}
  .f-quita{min-height:38px;padding:8px 14px}
  .f-quita-todo{
    display:inline-flex;align-items:center;min-height:38px;margin-left:auto;
  }
}

/* ── LOS FILTROS PUESTOS EN EL TELÉFONO ──────────────────────────────────
   De 900px para abajo los chips SOBRAN, y no es una opinión: ahí la columna
   de filtros no está a un lado sino arriba, a tres dedos de scroll, y ya
   enseña en negro lo que está encendido. Repetirlo debajo del conteo es decir
   dos veces lo mismo y empujar la rejilla otros 90px — en un teléfono de 390
   la primera foto ya nace a 1,700px del borde.

   Lo que SÍ falta en el teléfono es la salida: la columna de arriba apaga los
   filtros de uno en uno y no tiene un «quitar todo». Ése se queda.  */
@media(max-width:900px){
  .f-puestos .f-quita,
  .f-puestos-t{display:none}
  /* Sin chips al lado, el `margin-left:auto` lo mandaba a la orilla derecha,
     justo debajo del botón flotante de WhatsApp. Se queda a la izquierda. */
  .f-quita-todo{margin-left:0}
  .f-puestos:empty{display:none}
}

/* ── LAS OPCIONES DE ENVÍO DEL CARRITO ────────────────────────────────────
   Dos cosas que estaban confundidas en una sola:

   · el PRECIO en verde cuando el envío es gratis — eso sí viene del prototipo;
   · la NEGRITA en la opción ESCOGIDA — eso faltaba, y sin ella el renglón que
     más gritaba era «Recoger en sucursal» aunque el carrito estuviera cobrando
     el envío estándar. La negrita decía lo contrario de lo que se iba a cobrar.
   ------------------------------------------------------------------------ */
.envio-op .envio-gratis{color:var(--verde);font-weight:700}
.envio-op-on{color:var(--negro)}
.envio-op-on label{font-weight:600}
/* Con la negrita puesta, el nombre del envío estándar crece y quedaba PEGADO
   al «$200»: «…días hábiles)$200», sin un pixel de aire. El renglón ya es un
   flex con `space-between`; sólo le faltaba el hueco mínimo para cuando el
   texto llena la línea. */
.envio-op{gap:12px}
/* Y al partirse en dos renglones, el segundo («hábiles)») se iba hasta el
   margen, debajo del redondel, como si fuera otra cosa. Con el label en flex y
   alineado arriba, la segunda línea cae bajo la primera y se lee como un solo
   nombre. */
.envio-op{align-items:flex-start}
.envio-op label{display:inline-flex;align-items:flex-start;gap:8px}
.envio-op label input{margin-top:2px}

/* ── EL DESTINO DEL ENVÍO, ARRIBA DEL RESUMEN ─────────────────────────────
   Copia la forma del `.campo` + `.cupon` del prototipo: etiqueta arriba, y
   abajo el desplegable con el botón pegado a la derecha. */
.kev-destino{margin-bottom:14px}
.kev-destino label{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin-bottom:7px;
}
.kev-calc-fila{display:flex;gap:8px}
.kev-calc-fila .sel{flex:1;min-width:0}
.kev-calc-fila .btn{flex:0 0 auto;white-space:nowrap}
/* El estado NO se enseña, aunque el HTML lo lleve.
   La plantilla lo imprime como campo oculto, pero `country-select.js` de
   WooCommerce lo BUSCA por su id y lo cambia por un desplegable de estados en
   cuanto el país tiene lista —México la tiene—, así que el campo oculto se
   volvía un selector de 32 entidades donde el prototipo sólo enseña el país.
   No se puede evitar desde PHP: lo hace el navegador después. Y no estorba que
   viaje: el envío se cobra por país, el estado va vacío y el checkout lo
   vuelve a pedir donde sí hace falta. */
.kev-destino #calc_shipping_state,
.kev-destino #calc_shipping_state_field,
.kev-destino .state_select,
.kev-destino span:has(> .state_select){display:none!important}
/* El botón «Aplicar» del destino se esconde SÓLO si hay JavaScript, porque
   sólo entonces el desplegable se aplica solo. La clase la pone `tema.js` en
   el `<html>`, que es lo único que WooCommerce no reemplaza cuando repinta el
   resumen por AJAX — con `hidden` en el botón, reaparecía al primer cambio de
   país. `!important` porque `.btn` trae su propio `display`. */
.kev-js .kev-calc-fila button[name="calc_shipping"]{display:none!important}

/* ==========================================================================
   EL MEDIDOR DE CONTRASEÑA NO DEBE EMPUJAR EL BOTÓN
   ==========================================================================

   Un cliente escribía su correo y su contraseña, apretaba «Crear mi cuenta»
   y NO PASABA NADA. Ni error, ni giro, ni aviso. Al segundo clic sí entraba.

   El porqué: WooCommerce no pinta el medidor de fuerza hasta que el campo
   pierde el foco. O sea, en el mismísimo momento del primer clic. El medidor
   se INSERTA dentro del renglón de la contraseña, el renglón crece unos
   20 px, y el botón se baja entre el `mousedown` y el `mouseup`. El
   navegador no cuenta eso como un clic — se pierde entero, y con él el
   único intento que muchos van a hacer.

   Se encontró clicando como cliente en `bin/verificar/panel-a-tienda.mjs`;
   leyendo el código no se ve, porque el código está bien.

   La cura es que el medidor no ocupe lugar: se le reserva su renglón y se
   pinta ahí encima, sin mover nada.
   ========================================================================== */

:where(.woocommerce-form-register,.woocommerce-EditAccountForm,.woocommerce-ResetPassword)
  .campo:has(input[type="password"]){
  position:relative;
  padding-bottom:20px;
}
.woocommerce-password-strength,
.woocommerce-password-hint{
  position:absolute;left:0;right:0;bottom:0;
  margin:0;padding:0;
  font-size:11.5px;line-height:18px;font-weight:600;
  background:none;border:0;
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad{color:var(--rojo)}
.woocommerce-password-strength.good{color:#8a6d00}
.woocommerce-password-strength.strong{color:#1d7a3c}
.woocommerce-password-hint{font-weight:400;color:var(--gris)}

/* ── El producto del que habla cada opinión de la portada ─────────────────
   No viene del prototipo. Se agregó el 7 de agosto de 2026, cuando la banda
   dejó de traer texto escrito a mano y pasó a leer las reseñas de verdad: la
   tarjeta dice «6 playeras» sin decir CUÁLES, y quien lee una opinión en la
   portada lo que quiere es ver ese producto. Sin este renglón la tarjeta es
   un callejón. `flex:1` vive en el párrafo de arriba, así que éste se queda
   pegado al fondo de la tarjeta y las tres cierran parejas. */
.rs-rejilla .op .op-de{margin:10px 0 0;font-size:12.5px;flex:0 0 auto}
.rs-rejilla .op .op-de a{color:#6b6b74;text-decoration:none;border-bottom:1px solid #d8d8de}
.rs-rejilla .op .op-de a:hover{color:#111;border-bottom-color:#111}