/* ============================================================
   PRECISO DE PRECIOS — FINILAGER S.A.
   Paleta corporativa FINILAGER:
     Azul  PANTONE 295C  #002856
     Rojo  PANTONE 485C  #e1251b
     Gris  PANTONE 7544U #9aa4af
   Catálogo promocional. Sin precios: sólo % de descuento.
   ============================================================ */

:root{
  --azul:#002856;
  --azul-deep:#001b3c;
  --azul-soft:#0a3a70;
  --rojo:#e1251b;
  --rojo-deep:#b91b13;
  --gris:#9aa4af;
  --gris-100:#f2f4f7;
  --gris-200:#e2e6ec;
  --gris-300:#cfd6de;
  --wa:#1eb053;
  --wa-dark:#189446;
  --ink:#111820;
  --muted:#5f6b78;
  --card:#ffffff;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(0,40,86,.06), 0 3px 10px rgba(0,40,86,.05);
  --shadow-md:0 12px 30px rgba(0,40,86,.14);
  --header-h:74px;
  --font:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 80px)}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--gris-100);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
svg{fill:currentColor}
.ic{width:18px;height:18px;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--rojo);color:#fff;padding:10px 16px;z-index:200;font-weight:700}
.skip-link:focus{left:8px;top:8px}

:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}

/* ───────────── HEADER ───────────── */
.header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:3px solid var(--rojo)}
.header-inner{
  max-width:1400px;margin:0 auto;padding:0 20px;
  min-height:var(--header-h);display:flex;align-items:center;gap:18px;
}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand-fini{height:32px;width:auto}
.brand-preciso{height:40px;width:auto}
.brand-sep{width:1px;height:28px;background:var(--gris-300)}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--azul);font-size:.85rem;font-weight:700;letter-spacing:.02em;
  padding:11px 14px;border-radius:8px;transition:background .18s,color .18s;
}
.nav a:hover{background:var(--gris-100);color:var(--rojo)}
.nav .nav-wa{background:var(--wa);color:#fff;font-weight:800;margin-left:8px}
.nav .nav-wa:hover{background:var(--wa-dark);color:#fff}

.burger{display:none;margin-left:auto;width:46px;height:46px;border:0;background:transparent;cursor:pointer;padding:11px}
.burger span{display:block;height:2.5px;background:var(--azul);border-radius:2px;margin:4px 0;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ───────────── HERO ───────────── */
.hero{position:relative;background:#fff;color:var(--azul);overflow:hidden}
/* textura industrial: trama diagonal + retícula, en gris corporativo */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(154,164,175,.30) 0 1.5px, transparent 1.5px 10px),
    linear-gradient(rgba(154,164,175,.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,164,175,.42) 1px, transparent 1px);
  background-size:auto, 72px 72px, 72px 72px;
}
.hero-inner{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:48px 20px 44px}
.hero-copy{max-width:760px}
.hero-logo{width:min(420px,82%);height:auto}
.hero-kicker{
  margin:24px 0 6px;font-size:.74rem;font-weight:800;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gris);
}
.hero-claim{margin:0;display:flex;flex-direction:column;line-height:1}
.hero-up{font-size:clamp(1rem,3vw,1.6rem);font-weight:700;letter-spacing:.34em;color:var(--azul)}
.hero-num{
  font-size:clamp(5.5rem,18vw,12rem);font-weight:900;letter-spacing:-.05em;color:var(--azul);
  line-height:.86;margin:6px 0 0;
}
.hero-num .pc{font-size:.42em;vertical-align:super;color:var(--rojo);margin-left:.02em}
.hero-down{
  align-self:flex-start;margin-top:10px;
  font-size:clamp(1.2rem,4vw,2.4rem);font-weight:900;letter-spacing:.06em;color:#fff;
  background:var(--rojo);padding:8px 18px;border-radius:6px;
}
.hero-sub{margin:22px 0 0;max-width:46ch;color:var(--muted);font-size:1.02rem;line-height:1.55}
.hero-stock{
  display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;padding:9px 16px;
  background:#fff;border:1.5px solid var(--gris-300);border-radius:999px;
  font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);
}
.hero-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rojo);flex:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:10px;border:0;cursor:pointer;
  font-weight:800;font-size:.9rem;letter-spacing:.05em;
  transition:background .16s ease, transform .16s ease;
}
.btn .ic{width:19px;height:19px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--rojo);color:#fff}
.btn-primary:hover{background:var(--rojo-deep)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-dark)}
.btn-outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-block{width:100%}

/* ───────────── CARRUSEL PORTAFOLIO ───────────── */
.portafolio{position:relative;background:var(--azul)}
.portafolio-inner{max-width:1400px;margin:0 auto;padding:26px 20px 30px}
.portafolio-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.portafolio-head h2{
  margin:0;font-size:.8rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gris);
}
.portafolio-arrows{display:flex;gap:8px}
.pf-arrow{
  width:38px;height:38px;border-radius:50%;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.3);background:transparent;
  display:flex;align-items:center;justify-content:center;transition:.18s;
}
.pf-arrow svg{width:20px;height:20px}
.pf-arrow:hover{background:var(--rojo);border-color:var(--rojo)}
.pf-arrow[disabled]{opacity:.3;cursor:default}
.pf-arrow[disabled]:hover{background:transparent;border-color:rgba(255,255,255,.3)}

.pf-track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.pf-track::-webkit-scrollbar{display:none}
.pf-item{
  flex:0 0 auto;width:152px;scroll-snap-align:start;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);padding:18px 12px 14px;color:#fff;
  transition:background .18s, border-color .18s, transform .18s;
}
.pf-item:hover{background:rgba(255,255,255,.1);border-color:var(--rojo);transform:translateY(-3px)}
.pf-item[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo)}
.pf-item img{height:104px;width:auto;object-fit:contain}
.pf-item .pf-n{
  font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
  padding-top:2px;border-top:1px solid rgba(255,255,255,.14);width:100%;text-align:center;
}
.pf-item[aria-pressed="true"] .pf-n{color:rgba(255,255,255,.85);border-top-color:rgba(255,255,255,.3)}

/* ───────────── TOOLBAR / FILTROS ───────────── */
.toolbar{
  position:sticky;top:var(--header-h);z-index:50;
  background:var(--gris-100);border-bottom:1px solid var(--gris-200);
}
.toolbar-inner{max-width:1400px;margin:0 auto;padding:14px 20px 12px}
.search{position:relative;display:flex;align-items:center;max-width:520px}
.search .ic{position:absolute;left:14px;width:19px;height:19px;color:var(--muted);pointer-events:none}
.search input{
  width:100%;padding:13px 40px 13px 42px;border:1.5px solid var(--gris-300);border-radius:10px;
  background:#fff;font-size:.95rem;font-family:inherit;color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
}
.search input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,40,86,.12)}
.search .clear{
  position:absolute;right:8px;width:28px;height:28px;border:0;background:var(--gris-200);
  border-radius:50%;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;
}
.chips{
  display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{height:5px}
.chips::-webkit-scrollbar-thumb{background:var(--gris-300);border-radius:4px}
.chip{
  flex:none;border:1.5px solid var(--gris-300);background:#fff;color:var(--azul);
  padding:9px 16px;border-radius:999px;font-size:.82rem;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:.18s;
}
.chip:hover{border-color:var(--azul)}
.chip[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.chip.chip-3m[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo)}
.chip .n{opacity:.55;font-weight:600;margin-left:6px;font-size:.78em}
.count{margin:10px 0 0;font-size:.8rem;color:var(--muted);font-weight:600}
.count b{color:var(--azul)}

/* ───────────── GRID ───────────── */
.catalog{max-width:1400px;margin:0 auto;padding:26px 20px 72px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--gris-200);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gris-300)}
.card-hot{border-color:rgba(225,37,27,.4)}

.card-media{
  position:relative;aspect-ratio:1/1;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:14px;
  border-bottom:1px solid var(--gris-200);
}
.card-media img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease}
.card:hover .card-media img{transform:scale(1.04)}
.ph{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--gris-100);border-radius:10px;color:var(--gris);
}
.ph img{width:56%;height:auto;opacity:.45;object-fit:contain}
.ph span{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

.badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--rojo);color:#fff;font-weight:900;font-size:.92rem;
  padding:7px 12px;border-radius:7px;line-height:1;
}
.badge-hi{background:var(--rojo);font-size:1.05rem;padding:9px 14px}
.badge-hot{
  position:absolute;top:10px;right:10px;z-index:2;
  background:var(--azul);color:#fff;font-weight:800;font-size:.58rem;letter-spacing:.1em;
  padding:6px 9px;border-radius:6px;text-transform:uppercase;
}

.card-body{padding:14px 15px 0;display:flex;flex-direction:column;gap:6px;flex:1}
.card-brand{font-size:.67rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.card-brand.no-brand{color:var(--gris)}
.card-name{margin:0;font-size:.88rem;font-weight:700;line-height:1.32;color:var(--azul)}
.card-sku{font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.card-desc{margin:2px 0 0;font-size:.76rem;line-height:1.45;color:var(--muted)}
.card-cat{
  margin-top:auto;padding-top:10px;font-size:.63rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);
}
.card-foot{padding:12px 15px 15px}
.card-wa{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--wa);color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.05em;
  padding:12px 10px;border-radius:9px;border:0;cursor:pointer;transition:background .16s;
}
.card-wa .ic{width:17px;height:17px}
.card-wa:hover{background:var(--wa-dark)}

/* ───────────── BANNER 3M ───────────── */
.banner3m{
  grid-column:1/-1;position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--azul);box-shadow:var(--shadow-sm);margin:8px 0;
}
.banner3m-art{margin:0;display:block;background:var(--azul-deep)}
.banner3m-art img{width:100%;height:auto;display:block}
.banner3m-cta{
  padding:22px 26px 24px;display:grid;gap:14px 28px;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;background:var(--azul);color:#fff;
  border-top:3px solid var(--rojo);
}
.banner3m-kicker{
  grid-column:1/-1;margin:0;font-size:.68rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);
}
.banner3m-cta h2{grid-column:1;margin:0;font-size:clamp(1.15rem,2vw,1.55rem);font-weight:900;line-height:1.2}
.banner3m-cta p{grid-column:1;margin:0;font-size:.84rem;line-height:1.55;color:#cfd8e2;max-width:78ch}
.banner3m-cta .btn{grid-column:2;grid-row:2/4;align-self:center;white-space:nowrap}

/* ───────────── VACÍO ───────────── */
.empty{text-align:center;padding:60px 20px;color:var(--muted);font-weight:600;line-height:1.9}
.empty a{color:var(--azul);text-decoration:underline}

/* ───────────── FOOTER ───────────── */
.footer{background:var(--azul);color:#cfd8e2;padding:52px 20px 40px;border-top:4px solid var(--rojo)}
.footer-inner{max-width:1400px;margin:0 auto;display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr 1.4fr}
.f-brand img{height:54px;width:auto;margin-bottom:16px;background:#fff;border-radius:8px;padding:8px 12px}
.f-claim{margin:0 0 8px;font-weight:700;color:#fff;font-size:.95rem;line-height:1.5;max-width:30ch}
.f-legal{margin:0;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.f-links h3{margin:0 0 12px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.f-links a{display:block;padding:5px 0;font-size:.87rem;transition:color .16s}
.f-links a:hover{color:#fff}
.f-note p{margin:0;font-size:.78rem;line-height:1.65;color:var(--gris)}
.f-note strong{color:#fff}

/* ───────────── FLOTANTES ───────────── */
.fab-10{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:92px;height:92px;border-radius:50%;border:3px solid #fff;cursor:pointer;
  background:var(--rojo);color:#fff;box-shadow:0 8px 22px rgba(0,40,86,.3);
  transition:transform .18s ease, background .18s ease, opacity .3s ease;
}
.fab-10:hover{background:var(--rojo-deep);transform:scale(1.05)}
.fab-10-num{font-size:1.65rem;font-weight:900;line-height:1}
.fab-10-txt{font-size:.48rem;font-weight:800;letter-spacing:.09em;margin-top:3px;text-align:center}
.fab-10.tucked{transform:translateX(140%);opacity:0;pointer-events:none}

.to-top{
  position:fixed;left:18px;bottom:18px;z-index:70;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--gris-300);background:#fff;color:var(--azul);cursor:pointer;
  box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;
}
.to-top svg{width:22px;height:22px}

/* ───────────── MODAL 10% ───────────── */
.modal{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:18px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,27,60,.75)}
.modal-card{
  position:relative;z-index:1;background:#fff;border-radius:18px;max-width:840px;width:100%;
  box-shadow:var(--shadow-md);animation:pop .2s ease;max-height:92vh;overflow:hidden;
  display:grid;grid-template-columns:250px minmax(0,1fr);
}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal-bot{
  background:var(--azul);display:flex;align-items:flex-end;justify-content:center;padding:22px 14px 0;
}
.modal-bot img{width:100%;max-width:200px;height:auto;object-fit:contain}
.modal-body{padding:30px 28px 26px;overflow-y:auto;min-height:0}
.modal-x{
  position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border:0;
  background:var(--gris-100);border-radius:50%;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;
}
.modal-x:hover{background:var(--gris-200)}
.modal-kicker{
  margin:0 0 10px;padding-right:34px;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  color:var(--rojo);text-transform:uppercase;line-height:1.5;
}
.modal-title{margin:0 0 12px;font-size:1.3rem;font-weight:800;color:var(--azul);line-height:1.25}
.modal-title span{display:block;color:var(--rojo);font-size:1.85rem;font-weight:900}
.modal-text{margin:0 0 12px;font-size:.87rem;color:var(--muted);line-height:1.55}
.modal-cats{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.modal-cats li{
  background:var(--gris-100);border:1px solid var(--gris-200);border-radius:8px;padding:9px 12px;
  font-size:.79rem;font-weight:700;color:var(--azul);
}

/* ── formulario Elementor dentro del modal ── */
.modal-form{margin:0 0 16px}
.modal-form > *{max-width:100%}
/* campos "planos" por si el formulario llega sin estilos propios */
.modal-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.modal-form select,
.modal-form textarea{
  width:100%;font-family:inherit;font-size:.9rem;color:var(--ink);
  padding:12px 14px;border:1.5px solid var(--gris-300);border-radius:9px;background:#fff;
}
.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,40,86,.12);
}
.modal-form button[type=submit],
.modal-form input[type=submit],
.modal-form .elementor-button{
  width:100%;background:var(--rojo);color:#fff;border:0;border-radius:10px;cursor:pointer;
  padding:14px 20px;font-family:inherit;font-weight:800;font-size:.88rem;letter-spacing:.05em;
  text-transform:uppercase;transition:background .16s;
}
.modal-form button[type=submit]:hover,
.modal-form input[type=submit]:hover,
.modal-form .elementor-button:hover{background:var(--rojo-deep)}
/* formulario embebido desde finilager.bo */
.modal-form iframe{
  display:block;width:100%;height:560px;border:0;border-radius:10px;background:#fff;
}
.modal-form.is-loading{
  position:relative;border:1px solid var(--gris-200);border-radius:10px;background:var(--gris-100);
}
.modal-form.is-loading::after{
  content:"Cargando formulario…";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.06em;
}

.modal-or{
  margin:0 0 12px;display:flex;align-items:center;gap:12px;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
}
.modal-or::before,.modal-or::after{content:"";flex:1;height:1px;background:var(--gris-200)}

.modal-foot{margin:12px 0 0;text-align:center;font-size:.76rem;color:var(--muted);font-weight:600}

/* ───────────── RESPONSIVE ───────────── */
@media (max-width:1080px){
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  :root{--header-h:66px}
  .burger{display:block}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:3px solid var(--rojo);padding:10px 14px 18px;
    transform:translateY(-130%);transition:transform .28s ease;box-shadow:var(--shadow-md);
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .nav.open{transform:none}
  .nav a{padding:15px 12px;font-size:1rem;border-bottom:1px solid var(--gris-200);border-radius:0}
  .nav .nav-wa{margin:12px 0 0;border-radius:10px;justify-content:center;border-bottom:0}
  .banner3m-cta{grid-template-columns:1fr}
  .banner3m-cta h2,.banner3m-cta p{grid-column:1}
  .banner3m-cta .btn{grid-column:1;grid-row:auto;justify-self:stretch}
  .modal-card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-width:440px}
  .modal-bot{padding:16px 14px 0;order:-1}
  .modal-bot img{max-width:132px}
  .modal-body{padding:22px 22px 24px}
}
@media (max-width:640px){
  .hero-inner{padding:30px 16px 34px}
  .hero-logo{width:min(300px,88%)}
  .hero-num{margin-top:2px}
  .hero-sub{font-size:.94rem;margin-top:16px}
  .hero-cta{margin-top:20px}
  .hero-cta .btn{flex:1 1 100%;padding:16px 18px}
  .portafolio-inner{padding:22px 16px 26px}
  .portafolio-arrows{display:none}
  .pf-item{width:130px;padding:14px 10px 12px}
  .pf-item img{height:88px}
  .toolbar-inner{padding:12px 16px 10px}
  .catalog{padding:20px 16px 96px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card-media{padding:10px}
  .card-body{padding:11px 11px 0;gap:4px}
  .card-name{font-size:.79rem}
  .card-desc{display:none}
  .card-foot{padding:10px 11px 12px}
  .card-wa{font-size:.66rem;padding:11px 6px;gap:6px}
  .card-wa .ic{width:15px;height:15px}
  .badge{font-size:.8rem;padding:6px 9px}
  .badge-hi{font-size:.9rem;padding:7px 10px}
  /* en 2 columnas no hay espacio para los dos distintivos: manda el % */
  .badge-hot{display:none}
  .footer-inner{grid-template-columns:1fr;gap:26px}
  .fab-10{width:74px;height:74px;right:12px;bottom:12px;border-width:2px}
  .fab-10-num{font-size:1.3rem}
  .fab-10-txt{font-size:.42rem}
  .to-top{left:12px;bottom:12px;width:42px;height:42px}
  .modal-cats{grid-template-columns:1fr 1fr}
}
@media (max-width:340px){
  .grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}