/* DESIGN.CSS — Distribuidora Fama — Navy + Naranja Cálido */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;500;700&display=swap');

:root {
  --n:   #1B2A5E;   /* navy profundo */
  --n2:  #0f1d45;   /* navy oscuro */
  --o:   #F03031;   /* naranja acción */
  --o2:  #c44008;   /* naranja hover */
  --w:   #FFFFFF;
  --s:   #F5F6FA;   /* superficie */
  --br:  #E2E5F0;   /* borde */
  --tx:  #111827;   /* texto */
  --mu:  #5E6887;   /* muted */
  --dk:  #0D1426;   /* fondo oscuro */
}

body { font-family:'Barlow',sans-serif!important; background:var(--w)!important; color:var(--tx)!important; }
h1,h2,h3,h4,strong { font-family:'Barlow Condensed',sans-serif!important; }

/* TOP STRIP */
.top-strip { background:var(--n)!important; border-bottom:none!important; padding:7px 24px!important; position:sticky!important; top:0!important; z-index:201!important; }
.top-strip__inner { justify-content:center!important; }
.top-strip__links a { color:rgba(255,255,255,.65)!important; font-size:12px!important; }
.top-strip__links a:hover { color:#fff!important; }
.top-strip__wa { color:#6EE7A0!important; font-weight:700!important; }
.top-strip__nav { color:#93c5fd!important; }

/* HEADER */
.hdr { background:#F7F8FC!important; border-bottom:2px solid var(--n)!important; box-shadow:0 2px 20px rgba(27,42,94,.12)!important; position:sticky!important; top:31px!important; z-index:200!important; }
.hdr__inner { max-width:1360px!important; padding:10px 24px 12px!important; height:auto!important; align-items:flex-end!important; }
.hdr__logo { width:90px!important; height:90px!important; background:#fff!important; border:1.5px solid var(--br)!important; border-radius:12px!important; box-shadow:0 2px 10px rgba(27,42,94,.1)!important; padding:4px!important; }
.hdr__logo img { width:100%!important; height:100%!important; object-fit:contain!important; }
.hdr__name { color:var(--tx)!important; font-size:17px!important; font-weight:900!important; }
.hdr__sub { color:var(--n)!important; font-size:10px!important; font-weight:700!important; letter-spacing:.1em!important; text-transform:uppercase!important; }
.site-nav a { color:var(--mu)!important; font-size:13px!important; font-weight:700!important; letter-spacing:.04em!important; text-transform:uppercase!important; padding:5px 11px!important; border-radius:7px!important; }
.site-nav a:hover,.site-nav a.is-active { color:var(--n)!important; background:rgba(27,42,94,.07)!important; }
.sbar { background:var(--s)!important; border:1.5px solid #bfdbfe!important; border-radius:10px!important; }
.sbar.open { border-color:var(--n)!important; box-shadow:0 0 0 3px rgba(27,42,94,.1)!important; }
.sbar__input::placeholder { color:var(--mu)!important; }
.hdr__count { font-size:12px!important; font-weight:700!important; color:var(--mu)!important; background:var(--s)!important; border:1px solid var(--br)!important; border-radius:999px!important; }
.btn-cart { background:var(--n)!important; color:#fff!important; border:none!important; border-radius:9px!important; font-size:13px!important; font-weight:800!important; letter-spacing:.04em!important; padding:9px 18px!important; box-shadow:0 4px 14px rgba(27,42,94,.28)!important; }
.btn-cart:hover { background:var(--n2)!important; }
.btn-cart__badge { background:var(--o)!important; border:2px solid #fff!important; }
.btn-ia { background:var(--s)!important; color:var(--n)!important; border:1.5px solid var(--br)!important; border-radius:9px!important; font-size:13px!important; font-weight:800!important; }
.btn-ia:hover { border-color:rgba(27,42,94,.3)!important; background:rgba(27,42,94,.06)!important; }
.nav-toggle { background:var(--s)!important; border-radius:8px!important; color:var(--tx)!important; }
.search-dd { border-color:var(--br)!important; box-shadow:0 12px 32px rgba(0,0,0,.1)!important; border-radius:0 0 12px 12px!important; }
.search-dd__label { color:var(--n)!important; font-weight:800!important; letter-spacing:.1em!important; }
.search-dd__item:hover { background:var(--s)!important; }
.search-dd__item b { color:var(--o)!important; }

/* HERO */
.landing-hero { display:none!important; }
.fd-hero { background:var(--w); border-bottom:1px solid var(--br); }
.fd-hero__main { display:grid; grid-template-columns:1fr 400px; min-height:70vh; }
.fd-hero__track { position:relative; overflow:hidden; min-height:70vh; }
.fd-hero__slide {
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding:48px 5% 48px 8%;
  opacity:0; pointer-events:none;
  transition:opacity .65s ease;
  background:var(--w);
}
.fd-hero__slide.is-active { opacity:1; pointer-events:auto; }
.fd-hero__slide::before {
  content:''; position:absolute;
  left:0; top:12%; bottom:12%; width:4px; z-index:3;
  background:linear-gradient(to bottom,var(--o),var(--n));
  border-radius:0 3px 3px 0;
}
.fd-hero__slide--2 { background:var(--s); }

/* Slides con imagen de fondo — archivos en frontend/assets/imagenes_banner/ */
.fd-hero__slide--1 { background-image:url('../assets/imagenes_banner/banner1.jpg'); background-size:cover; background-position:top right; }
.fd-hero__slide--2 { background-image:url('../assets/imagenes_banner/banner2.jpg'); background-size:cover; background-position:top right; }
.fd-hero__slide--3 { background-image:url('../assets/imagenes_banner/banner3.jpg'); background-size:cover; background-position:top right; }

/* Overlay: blanco sólido a la izquierda, transparente a la derecha → imagen visible sin cubrir el texto.
   Posiciones parametrizadas por --hero-overlay (0-100, seteado por brand.js según el cliente).
   Con --hero-overlay:52 (default) esto reproduce exactamente los stops originales: 38%,52%,70%,88%,100%. */
:root { --hero-overlay: 52; }
.fd-hero__slide::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right,
    rgba(255,255,255,1)   calc(var(--hero-overlay) * 1% - 14%),
    rgba(255,255,255,.92) calc(var(--hero-overlay) * 1%),
    rgba(255,255,255,.5)  calc(var(--hero-overlay) * 1% + 18%),
    rgba(255,255,255,.1)  calc(var(--hero-overlay) * 1% + 36%),
    transparent           calc(var(--hero-overlay) * 1% + 48%));
}
.fd-hero__content { position:relative; z-index:2; max-width:100%; width:100%; }

.fd-hero__eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px;
  background:rgba(27,42,94,.07); border:1px solid rgba(27,42,94,.14);
  border-radius:999px; color:var(--n);
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:20px;
}
.fd-hero__h1 {
  font-size:clamp(50px,7vw,90px)!important; font-weight:900!important;
  line-height:.9!important; letter-spacing:-.02em!important;
  color:var(--tx)!important; margin:0 0 20px!important;
}
.fd-hero__h1 em { font-style:normal; color:var(--o); display:block; }
.fd-hero__h1 s  { font-style:normal; text-decoration:none; color:var(--mu); display:block; font-size:.6em; font-weight:700; margin-top:4px; letter-spacing:-.01em; }
.fd-hero__sub { font-size:16px; font-weight:500; color:var(--mu); max-width:450px; line-height:1.6; margin:0 0 32px; }
.fd-hero__cta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.fd-hero__cta .fd-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; background:var(--o); color:#fff;
  font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  border-radius:9px; text-decoration:none;
  box-shadow:0 6px 20px rgba(232,80,10,.3);
  transition:background .15s,transform .12s;
}
.fd-hero__cta .fd-btn-primary:hover { background:var(--o2); transform:translateY(-2px); }

.fd-hero__cta .fd-btn-outline {
  display:inline-flex; align-items:center; gap:7px;
  padding:13px 22px; background:transparent;
  border:1.5px solid var(--br); color:var(--tx);
  font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-radius:9px; text-decoration:none;
  transition:border-color .15s,color .15s,background .15s;
}
.fd-hero__cta .fd-btn-outline:hover { border-color:var(--n); color:var(--n); background:rgba(27,42,94,.05); }

.fd-hero__cta .fd-btn-wa {
  display:inline-flex; align-items:center; gap:7px;
  padding:13px 22px; background:#25d366; color:#fff;
  font-size:14px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  border-radius:9px; text-decoration:none;
  box-shadow:0 5px 16px rgba(37,211,102,.28);
  transition:background .15s,transform .12s;
}
.fd-hero__cta .fd-btn-wa:hover { background:#1fb555; transform:translateY(-2px); }

/* Panel marcas */
.fd-hero__panel {
  background:var(--n); border-left:none;
  padding:40px 22px 28px;
  display:flex; flex-direction:column; gap:12px;
}
.fd-hero__panel-title { font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:7px; }
.fd-hero__panel-link { color:rgba(255,255,255,.7); font-size:12px; font-weight:700; text-decoration:none; letter-spacing:.03em; }
.fd-hero__panel-link:hover { color:#fff; }

.fd-hero__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:40px; height:40px; border-radius:50%;
  background:#fff; border:1.5px solid var(--br); color:var(--tx);
  font-size:15px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.07);
  transition:border-color .15s,color .15s;
}
.fd-hero__nav:hover { border-color:var(--n); color:var(--n); }
.fd-hero__nav--prev { left:18px; }
.fd-hero__nav--next { right:18px; }
.fd-hero__dots { position:absolute; bottom:22px; left:9%; display:flex; gap:8px; z-index:10; }
.fd-hero__dot { width:8px; height:8px; border-radius:999px; background:var(--br); border:none; cursor:pointer; padding:0; transition:width .3s,background .3s; }
.fd-hero__dot.is-active { width:24px; background:var(--n); }

/* Stats */
.fd-hero__stats { display:grid; grid-template-columns:repeat(3,1fr); background:var(--n); }
.fd-hero__stat { display:flex; flex-direction:column; align-items:center; padding:18px 10px; gap:2px; text-align:center; border-right:1px solid rgba(255,255,255,.1); }
.fd-hero__stat:last-child { border-right:none; }
.fd-hero__stat strong,
#heroStatProducts,#heroStatCategories,#heroStatBrands {
  font-size:34px!important; font-weight:900!important; line-height:1!important;
  color:#fff!important; letter-spacing:-.01em!important;
}
.fd-hero__stat span { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* RIBBON */
.fd-ribbon { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-bottom:1px solid var(--br); }
.fd-ribbon__item { display:flex; align-items:center; gap:12px; padding:18px 20px; border-right:1px solid var(--br); }
.fd-ribbon__item:last-child { border-right:none; }
.fd-ribbon__icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fd-ribbon__icon--blue { background:rgba(27,42,94,.08); color:var(--n); }
.fd-ribbon__icon--red  { background:rgba(232,80,10,.1); color:var(--o); }
.fd-ribbon__icon--acc  { background:rgba(27,42,94,.06); color:var(--n); }
.fd-ribbon__text strong { display:block; font-size:14px; font-weight:900; color:var(--tx); }
.fd-ribbon__text span { display:block; font-size:12px; color:var(--mu); margin-top:1px; }

/* SECCIONES */
.fd-shell { max-width:1360px; margin:0 auto; padding:0 24px; }
.fd-section { padding:64px 0; }
.fd-section--gray { background:var(--s); }
.fd-section--blue { background:var(--n); }
.fd-section--dark { background:var(--dk); }

.fd-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px; }
.fd-section-head__label { display:block; font-size:11px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--o); margin-bottom:6px; }
.fd-section--dark .fd-section-head__label { color:rgba(255,255,255,.45); }
.fd-section--blue .fd-section-head__label { color:rgba(255,255,255,.5); }
.fd-section-head h2 { font-size:clamp(26px,4vw,48px)!important; font-weight:900!important; line-height:.92!important; letter-spacing:-.02em!important; color:var(--tx)!important; margin:0!important; }
.fd-section--dark .fd-section-head h2,
.fd-section--blue .fd-section-head h2 { color:#fff!important; }

.fd-see-more {
  display:inline-flex; align-items:center; gap:5px;
  padding:9px 18px; border:1.5px solid var(--n); color:var(--n);
  font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  border-radius:8px; text-decoration:none; white-space:nowrap;
  transition:background .15s,color .15s;
}
.fd-see-more:hover { background:var(--n); color:#fff; }
.fd-section--dark .fd-see-more,.fd-section--blue .fd-see-more { border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.65); }
.fd-section--dark .fd-see-more:hover,.fd-section--blue .fd-see-more:hover { background:rgba(255,255,255,.1); color:#fff; }

/* ══ CARRUSELES DE PRODUCTOS: fondo navy + cards blancas ══ */

/* Sección: gradiente navy — glow bakeado en background (sin ::before para no tapar contenido) */
.pc-section{
  background:
    radial-gradient(ellipse 80% 55% at 50% 110%, rgba(240,48,49,.13) 0%, transparent 60%),
    linear-gradient(150deg, var(--n2) 0%, var(--n) 60%, #1e3270 100%)!important;
  padding:44px 0 48px!important;
}

/* Section header sobre fondo oscuro */
.pc-section .section-head{margin-bottom:24px!important}
.pc-section .section-head__copy small{color:rgba(255,255,255,.52)!important}
.pc-section .section-head__copy h2{color:#fff!important}
/* Botón "Ver catálogo": pill blanca visible sobre navy */
.pc-section .btn-link-xl{
  background:rgba(255,255,255,.1)!important;
  border-color:rgba(255,255,255,.45)!important;
  color:#fff!important;
}
.pc-section .btn-link-xl:hover{
  background:#fff!important;
  border-color:#fff!important;
  color:var(--n)!important;
}

/* Cards: blancas, borde-top rojo, sombra dramática */
.pc-section .pc-card{
  background:#fff!important;
  border:none!important;
  border-top:4px solid var(--o)!important;
  border-radius:14px!important;
  box-shadow:0 8px 28px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.18)!important;
  overflow:hidden!important;
}
.pc-section .pc-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 22px 56px rgba(0,0,0,.38), 0 0 0 1.5px rgba(240,48,49,.22)!important;
}
/* Imagen: fondo blanco limpio */
.pc-section .pc-img{background:#fff!important}

/* Botones de acción en los cards: colores más vivos para no perderse en el card blanco */
.pc-section .pc-act--add{background:var(--n)!important;color:#fff!important;border-color:var(--n)!important}
.pc-section .pc-act--add:hover{background:var(--n2)!important;border-color:var(--n2)!important}
.pc-section .pc-act--wa{background:#16a34a!important;color:#fff!important;border-color:#16a34a!important}
.pc-section .pc-act--wa:hover{background:#15803d!important;border-color:#15803d!important}
.pc-section .pc-act--ia{background:var(--o)!important;color:#fff!important;border-color:var(--o)!important}
.pc-section .pc-act--ia:hover{background:var(--o2)!important;border-color:var(--o2)!important}
.pc-section .pc-act--copy{background:#475569!important;color:#fff!important;border-color:#475569!important}
.pc-section .pc-act--copy:hover{background:#334155!important;border-color:#334155!important}

/* Flechas navegación: glass sobre navy */
.pc-section .pc-arrow{
  background:rgba(255,255,255,.13)!important;
  border:1.5px solid rgba(255,255,255,.3)!important;
  color:#fff!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  box-shadow:none!important;
}
.pc-section .pc-arrow:hover{
  background:var(--o)!important;
  border-color:var(--o)!important;
  color:#fff!important;
  box-shadow:0 4px 16px rgba(240,48,49,.45)!important;
}

/* Texto/labels globales: sin cambios (fuera de pc-section se mantienen igual) */
.section-head__copy small{font-size:11px!important;font-weight:900!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--o)!important}
.section-head__copy h2{font-size:clamp(26px,3.8vw,46px)!important;font-weight:900!important;line-height:.92!important;letter-spacing:-.02em!important;color:var(--tx)!important}
.btn-link-xl{display:inline-flex!important;align-items:center!important;gap:5px!important;padding:9px 18px!important;border:1.5px solid var(--n)!important;color:var(--n)!important;font-size:12px!important;font-weight:800!important;letter-spacing:.07em!important;text-transform:uppercase!important;border-radius:8px!important;text-decoration:none!important;white-space:nowrap!important;transition:background .15s,color .15s,border-color .15s!important}
.btn-link-xl:hover{background:var(--n)!important;color:#fff!important}

.pc-card { flex:0 0 245px!important; background:#fff!important; border:1px solid var(--br)!important; border-radius:14px!important; overflow:hidden!important; box-shadow:0 1px 4px rgba(0,0,0,.04)!important; transition:transform .2s,box-shadow .2s,border-color .2s!important; }
.pc-card:hover { transform:translateY(-6px)!important; box-shadow:0 14px 36px rgba(27,42,94,.1)!important; border-color:rgba(27,42,94,.2)!important; }
.pc-img { height:185px!important; background:#fff!important; }
.pc-img img { transition:transform .35s!important; }
.pc-card:hover .pc-img img { transform:scale(1.06)!important; }
/* Categoría: ocupa todo el ancho disponible, corta limpio con ellipsis */
.pc-cat{
  display:block!important;
  color:var(--n)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
/* Nombre: misma familia que la categoría (Barlow regular), 2px más grande */
.pc-name{
  font-family:'Barlow',sans-serif!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  color:var(--tx)!important;
  line-height:1.38!important;
}
.pc-price { font-size:22px!important; font-weight:900!important; color:var(--o)!important; letter-spacing:-.01em!important; }
.pc-badge--ok { background:rgba(27,42,94,.08)!important; color:var(--n)!important; font-weight:800!important; border-radius:6px!important; }
.pc-badge--no { background:rgba(0,0,0,.05)!important; color:#aaa!important; }
.pc-badge--pedido  { background:rgba(240,48,49,.10)!important; color:var(--o)!important; font-weight:800!important; border-radius:6px!important; }
.pc-badge--transit { background:rgba(27,42,94,.08)!important; color:var(--n)!important; font-weight:800!important; border-radius:6px!important; }
.pc-arrow { width:42px!important; height:42px!important; border-radius:50%!important; background:#fff!important; border:1px solid var(--br)!important; color:var(--n)!important; font-size:16px!important; box-shadow:0 2px 8px rgba(0,0,0,.06)!important; transition:background .15s,border-color .15s,color .15s!important; }
.pc-arrow--l { left:-19px!important; }
.pc-arrow--r { right:-19px!important; }
.pc-arrow:hover { background:var(--o)!important; border-color:var(--o)!important; color:#fff!important; box-shadow:0 6px 18px rgba(232,80,10,.3)!important; }

/* MARQUEE */
.fd-section--blue .brand-marquee { background:transparent!important; border:none!important; border-radius:0!important; }
.fd-section--blue .brand-marquee__item { color:rgba(255,255,255,.7)!important; font-size:15px!important; font-weight:900!important; letter-spacing:.06em!important; text-transform:uppercase!important; border-right:1px solid rgba(255,255,255,.12)!important; height:62px!important; min-width:175px!important; }
.fd-section--blue .brand-marquee__item:hover { color:#fff!important; background:rgba(255,255,255,.07)!important; }

/* CATEGORÍAS */
.fd-cat-scroll { display:flex!important; overflow-x:auto!important; scroll-snap-type:x mandatory!important; -webkit-overflow-scrolling:touch!important; gap:12px!important; padding:4px 2px 16px!important; scrollbar-width:none!important; background:transparent!important; border:none!important; }
.fd-cat-scroll::-webkit-scrollbar { display:none!important; }
.fd-section--dark .showcase-card { flex:0 0 180px!important; scroll-snap-align:start!important; background:rgba(255,255,255,.05)!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:14px!important; padding:22px 16px!important; cursor:pointer!important; text-decoration:none!important; position:relative!important; overflow:hidden!important; transition:background .2s,transform .2s!important; }
.fd-section--dark .showcase-card:hover { background:rgba(255,255,255,.09)!important; transform:translateY(-5px)!important; }
.fd-section--dark .showcase-card::before { content:''!important; position:absolute!important; top:0;left:0;right:0!important; height:3px!important; background:var(--o)!important; border-radius:14px 14px 0 0!important; }
.fd-section--dark .showcase-card:nth-child(3n+2)::before { background:var(--n)!important; }
.fd-section--dark .showcase-card:nth-child(3n+3)::before { background:#6E8FD4!important; }
.fd-section--dark .showcase-card .showcase-card__icon { width:42px!important; height:42px!important; border-radius:11px!important; background:rgba(255,255,255,.08)!important; color:#fff!important; display:flex!important; align-items:center!important; justify-content:center!important; margin-bottom:12px!important; }
.fd-section--dark .showcase-card strong { display:block!important; font-size:14px!important; font-weight:900!important; color:#fff!important; margin-bottom:3px!important; }
.fd-section--dark .showcase-card span { font-size:11px!important; color:rgba(255,255,255,.38)!important; }

/* MARCAS */
.brands-grid { display:grid!important; grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important; gap:12px!important; }
.brand-card { background:#fff!important; border:1px solid var(--br)!important; border-radius:12px!important; padding:20px!important; transition:transform .18s,box-shadow .18s,border-color .18s!important; }
.brand-card:hover { transform:translateY(-4px)!important; box-shadow:0 12px 28px rgba(27,42,94,.08)!important; border-color:rgba(27,42,94,.18)!important; }
.brand-card strong { font-size:15px!important; font-weight:900!important; color:var(--tx)!important; }
.brand-card span { font-size:11px!important; color:var(--mu)!important; }
.brand-card i { display:block!important; height:3px!important; margin-top:12px!important; background:linear-gradient(90deg,var(--o),var(--n))!important; border-radius:2px!important; }

/* BENEFICIOS */
.benefit-grid { display:grid!important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important; gap:14px!important; }
.benefit-card { background:var(--s)!important; border:1px solid var(--br)!important; border-radius:14px!important; padding:26px 22px!important; transition:transform .18s,box-shadow .18s,border-color .18s!important; }
.benefit-card:hover { transform:translateY(-4px)!important; box-shadow:0 12px 28px rgba(27,42,94,.07)!important; border-color:rgba(27,42,94,.15)!important; }
.benefit-card__icon { width:46px!important; height:46px!important; border-radius:13px!important; display:flex!important; align-items:center!important; justify-content:center!important; margin-bottom:14px!important; }
.benefit-card:nth-child(1) .benefit-card__icon { background:rgba(232,80,10,.1)!important; color:var(--o)!important; }
.benefit-card:nth-child(2) .benefit-card__icon { background:rgba(27,42,94,.1)!important; color:var(--n)!important; }
.benefit-card:nth-child(3) .benefit-card__icon { background:rgba(232,80,10,.1)!important; color:var(--o)!important; }
.benefit-card:nth-child(4) .benefit-card__icon { background:rgba(27,42,94,.1)!important; color:var(--n)!important; }
.benefit-card strong { font-size:16px!important; font-weight:900!important; color:var(--tx)!important; display:block!important; margin-bottom:6px!important; }
.benefit-card p { font-size:14px!important; color:var(--mu)!important; line-height:1.55!important; margin:0!important; }

/* CTA */
.fd-cta-section { background:var(--n)!important; }
.fd-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:64px 0; }
.fd-cta-eyebrow { display:inline-block; margin-bottom:12px; font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.fd-cta-inner h2 { font-size:clamp(40px,5.5vw,76px)!important; font-weight:900!important; line-height:.9!important; letter-spacing:-.02em!important; color:#fff!important; margin:0 0 12px!important; }
.fd-cta-inner p { color:rgba(255,255,255,.6)!important; font-size:15px!important; max-width:420px!important; line-height:1.55!important; }
.fd-cta-actions { display:flex; flex-direction:column; gap:10px; flex-shrink:0; min-width:210px; }
.fd-btn-cta-w { display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; background:#fff; color:var(--n); font-size:15px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; border-radius:9px; text-decoration:none; box-shadow:0 6px 20px rgba(0,0,0,.14); transition:background .15s,transform .12s; }
.fd-btn-cta-w:hover { background:#EDF0FF; transform:translateY(-2px); }
.fd-btn-wa-cta { display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 28px; background:#25d366; color:#fff; font-size:15px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; border-radius:9px; text-decoration:none; box-shadow:0 6px 18px rgba(37,211,102,.28); transition:background .15s,transform .12s; }
.fd-btn-wa-cta:hover { background:#1fb555; transform:translateY(-2px); }

/* FOOTER */
.footer-shell,.site-footer { background:var(--dk)!important; }
.site-footer { border-top:2px solid rgba(232,80,10,.25)!important; }
.site-footer__brand strong { font-size:19px!important; font-weight:900!important; color:#fff!important; }
.site-footer__brand p { color:rgba(255,255,255,.38)!important; font-size:13px!important; line-height:1.55!important; }
.site-footer__col h4 { font-size:11px!important; font-weight:900!important; letter-spacing:.16em!important; text-transform:uppercase!important; color:rgba(255,255,255,.3)!important; }
.site-footer__col a,.site-footer__col span { color:rgba(255,255,255,.48)!important; font-size:13px!important; }
.site-footer__col a:hover { color:#fff!important; }
.site-footer__bottom { border-top:1px solid rgba(255,255,255,.06)!important; }
.site-footer__bottom span { color:rgba(255,255,255,.22)!important; font-size:12px!important; }
.footer-chip { background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.1)!important; color:rgba(255,255,255,.55)!important; border-radius:999px!important; }
.footer-chip:hover { background:rgba(255,255,255,.11)!important; color:#fff!important; }
.footer-chip--wa { color:#6EE7A0!important; }

/* RESPONSIVE */
@media(max-width:1100px){.fd-hero__main{grid-template-columns:1fr}.fd-hero__panel{display:none}.fd-hero__track{min-height:66vh}}
@media(max-width:860px){.fd-ribbon{grid-template-columns:repeat(2,1fr)}.fd-hero__stats{grid-template-columns:repeat(2,1fr)}.fd-cta-inner{flex-direction:column}.fd-cta-actions{width:100%}}
@media(max-width:640px){.fd-hero__slide{padding:40px 20px 68px}.fd-hero__h1{font-size:clamp(44px,13vw,72px)!important}.fd-hero__dots{left:20px}.fd-shell{padding:0 16px}.fd-section{padding:44px 0}}
@media(max-width:440px){.fd-ribbon{grid-template-columns:1fr 1fr}.fd-hero__stats{grid-template-columns:repeat(2,1fr)}}

/* ════════════════════════════════════════════
   PÁGINAS DE CONTENIDO — Nosotros / Contacto / Reglamentos
════════════════════════════════════════════ */

/* ─── HÉROES DE PÁGINA — diseño unificado ───────────────────────
   .page-hero  → catálogo, categorías, marcas  (con card interna)
   .pg-hero    → nosotros, contacto, reglamentos (texto directo)
──────────────────────────────────────────────────────────────── */

/* Fondo compartido: superficie clara de marca */
.page-hero{background:var(--s)!important;padding:44px 0 32px!important}
.pg-hero{background:var(--s)!important;padding:52px 0 44px!important;border-bottom:1px solid var(--br)!important}

/* Card interna (catálogo, cats, marcas): limpia con acento navy */
.page-hero__card{
  background:#fff!important;
  border:1px solid var(--br)!important;
  border-left:4px solid var(--n)!important;
  border-radius:16px!important;
  box-shadow:0 4px 24px rgba(27,42,94,.07)!important;
  padding:40px 44px!important;
}

/* H1 unificado: peso 700, legible, sin letras fusionadas */
.page-hero h1,.pg-hero h1{
  font-size:clamp(24px,3vw,40px)!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
  color:var(--n)!important;
  margin:6px 0 14px!important;
}

/* Eyebrow / etiqueta: píldora navy suave — igual en ambos grupos */
.page-hero .eyebrow,.pg-eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:5px 13px!important;
  background:rgba(27,42,94,.08)!important;
  border:1px solid rgba(27,42,94,.18)!important;
  border-radius:999px!important;
  color:var(--n)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  margin-bottom:14px!important;
}

/* Descripción */
.page-hero p{color:var(--g500)!important;font-size:15px!important;line-height:1.65!important;margin-top:0!important}

/* Breadcrumb y subtítulo para pg-hero (fondo claro) */
.pg-hero__sub,.pg-sub{font-size:15px!important;color:var(--g500)!important;line-height:1.65!important;margin:0!important}
.pg-breadcrumb{display:flex!important;align-items:center!important;gap:5px!important;margin:16px 0 0!important;font-size:12px!important;color:var(--g500)!important}
.pg-breadcrumb a{color:var(--n)!important;opacity:.65!important;text-decoration:none!important}
.pg-breadcrumb a:hover{opacity:1!important}
.pg-breadcrumb span{color:var(--g500)!important;opacity:.4!important}

/* Secciones de página */
.pg-section{padding:60px 0}
.pg-section--white{background:#fff}
.pg-section--gray{background:var(--s)}
.pg-section--dark{background:var(--dk)}
.pg-label{display:block;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--o);margin-bottom:10px}
.pg-label--light{display:block;font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:10px}
.pg-section h2{font-size:clamp(26px,4vw,44px)!important;font-weight:900!important;line-height:.92!important;letter-spacing:-.02em!important;color:var(--tx)!important;margin:0 0 20px!important}
.pg-section--dark h2{color:#fff!important}
.pg-section p{font-size:15px;color:var(--mu);line-height:1.7}
.pg-section--dark p{color:rgba(255,255,255,.5)}

/* 2 columnas */
.pg-2col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.pg-2col__text p{font-size:16px;color:var(--mu);line-height:1.7;margin-top:16px}
@media(max-width:768px){.pg-2col{grid-template-columns:1fr;gap:32px}}

/* Stats */
.pg-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pg-stat{background:var(--s);border:1px solid var(--br);border-radius:14px;padding:20px;text-align:center}
.pg-stat strong{display:block;font-size:32px;font-weight:900;color:var(--n);line-height:1;margin-bottom:4px}
.pg-stat span{font-size:12px;font-weight:700;color:var(--mu);letter-spacing:.04em}

/* Misión y Visión */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mv-card{padding:36px;border-radius:16px}
.mv-card--mission{background:var(--n)}
.mv-card--vision{background:var(--o)}
.mv-card__icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:20px}
.mv-card h3{font-size:22px!important;font-weight:900!important;color:#fff!important;margin:0 0 12px!important}
.mv-card p{font-size:15px;color:rgba(255,255,255,.75);line-height:1.65;margin:0}
@media(max-width:600px){.mv-grid{grid-template-columns:1fr}}

/* Valores */
.values-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:32px}
.value-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:22px;transition:background .2s}
.value-card:hover{background:rgba(255,255,255,.08)}
.value-card h4{font-size:15px!important;font-weight:900!important;color:#fff!important;margin:0 0 8px!important}
.value-card p{font-size:13px;color:rgba(255,255,255,.45);line-height:1.6;margin:0}

/* Contacto */
.contact-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:32px}
.ci-card{background:#fff;border:1px solid var(--br);border-radius:16px;padding:26px}
.ci-card__icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ci-card h3{font-size:16px!important;font-weight:900!important;color:var(--tx)!important;margin:0 0 10px!important}
.ci-card p,.ci-card a{font-size:14px;color:var(--mu);line-height:1.65;display:block;text-decoration:none}
.ci-card a:hover{color:var(--n)}
.ci-card__link{margin-top:12px;font-size:13px;font-weight:700;color:var(--n)!important}
.ci-card__link:hover{color:var(--o)!important}
.ci-card--addr .ci-card__icon{background:rgba(27,42,94,.08);color:var(--n)}
.ci-card--tel .ci-card__icon{background:#dcfce7;color:#16a34a}
.ci-card--mail .ci-card__icon{background:rgba(232,80,10,.08);color:var(--o)}
.ci-card--hora .ci-card__icon{background:rgba(27,42,94,.06);color:var(--n)}

/* Mapa */
.pg-map-wrap{border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.pg-map-wrap iframe{width:100%;height:400px;border:0;display:block}
@media(max-width:640px){.pg-map-wrap iframe{height:260px}}

/* Reglamentos */
.pg-toc{background:var(--s);border:1px solid var(--br);border-radius:14px;padding:24px;margin-bottom:36px}
.pg-toc h3{font-size:14px!important;font-weight:900!important;color:var(--tx)!important;margin:0 0 12px!important;letter-spacing:.04em!important}
.pg-toc ol{padding-left:20px;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px}
.pg-toc li{font-size:13px}
.pg-toc a{color:var(--n);text-decoration:none}
.pg-toc a:hover{color:var(--o);text-decoration:underline}
@media(max-width:600px){.pg-toc ol{grid-template-columns:1fr}}
.reg-sections{display:flex;flex-direction:column;gap:10px}
details.reg-section{background:#fff;border:1px solid var(--br);border-radius:14px;overflow:hidden}
details.reg-section summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;user-select:none;-webkit-user-select:none}
details.reg-section summary::-webkit-details-marker{display:none}
details.reg-section summary h3{font-size:15px!important;font-weight:900!important;color:var(--tx)!important;margin:0!important}
details.reg-section summary::after{content:'+';font-size:22px;font-weight:300;color:var(--mu);flex-shrink:0;line-height:1}
details.reg-section[open] summary::after{content:'−'}
details.reg-section summary:hover{background:var(--s)}
.reg-section__body{padding:0 22px 22px;font-size:14px;color:var(--mu);line-height:1.75;border-top:1px solid var(--br)}
.reg-section__body p{margin:12px 0 0}
.reg-section__body ul{margin:10px 0 0 20px}
.reg-section__body ul li{margin-top:6px}
.reg-section__body strong{color:var(--tx)}

/* CTA de contacto */
.pg-cta{background:var(--n);padding:60px 0}
.pg-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.pg-cta h2{font-size:clamp(30px,4.5vw,56px)!important;font-weight:900!important;line-height:.92!important;letter-spacing:-.02em!important;color:#fff!important;margin:0 0 12px!important}
.pg-cta p{color:rgba(255,255,255,.55)!important;font-size:15px!important;max-width:420px!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.pg-cta__btns{display:flex;gap:10px;flex-wrap:wrap}
.pg-btn-w{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:#fff;color:var(--n);font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border-radius:9px;text-decoration:none;transition:background .15s,transform .12s}
.pg-btn-w:hover{background:#eef;transform:translateY(-2px)}
.pg-btn-wa{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;background:#25d366;color:#fff;font-size:14px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border-radius:9px;text-decoration:none;box-shadow:0 5px 16px rgba(37,211,102,.28);transition:background .15s,transform .12s}
.pg-btn-wa:hover{background:#1fb555;transform:translateY(-2px)}

/* Footer actualizado */
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:48px 24px 32px;max-width:1360px;margin:0 auto}
@media(max-width:900px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer__bottom{padding:16px 24px;max-width:1360px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Responsive páginas */
@media(max-width:768px){.pg-hero{padding:44px 0}.pg-section{padding:44px 0}}
@media(max-width:480px){.contact-info-grid{grid-template-columns:1fr}.values-grid{grid-template-columns:1fr}}

/* ── Contacto: mapa prominente ── */
.pg-map-wrap--hero iframe{height:500px}
@media(max-width:640px){.pg-map-wrap--hero iframe{height:280px}}

/* ── Reglamentos: jerarquía visual y ancho de lectura ── */
details.reg-section summary{font-size:15px!important;font-weight:900!important;color:var(--tx)!important;letter-spacing:-.01em!important}
details.reg-section{margin-bottom:10px}
details.reg-section:last-child{margin-bottom:0}
details.reg-section[open]{box-shadow:0 3px 18px rgba(27,42,94,.09)}
.reg-section__body{max-width:700px;padding-top:16px!important;padding-bottom:24px!important}
.reg-section__body p:first-child{margin-top:0}
.pg-toc{max-width:720px}
.pg-toc strong{display:block!important;font-size:11px!important;font-weight:900!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--mu)!important;margin-bottom:12px!important}

/* ══════════════════════════════════════
   AUDITORÍA RESPONSIVE
══════════════════════════════════════ */

/* Prevención de scroll horizontal global */
html{max-width:100%}
body{overflow-x:hidden;max-width:100%}

/* Padding vertical en secciones de páginas de contenido */
.pg-section--white,.pg-section--gray{padding:60px 0}
@media(max-width:768px){.pg-section--white,.pg-section--gray{padding:40px 0}}
@media(max-width:480px){.pg-section--white,.pg-section--gray{padding:28px 0}}

/* Asegurar que fd-shell use padding correcto en móvil */
@media(max-width:640px){.fd-shell{padding-left:16px!important;padding-right:16px!important}}

/* Top strip no desborde en pantallas pequeñas */
@media(max-width:480px){
  .top-strip__meta{display:none!important}
  .top-strip__links{gap:10px!important;flex-wrap:wrap!important}
}

/* Header: compresión en tablet */
@media(max-width:1080px){
  .hdr__right{gap:6px!important}
}

/* Carrusel: flecha no se salga en móvil */
@media(max-width:480px){
  .pc-arrow--l{left:-8px!important}
  .pc-arrow--r{right:-8px!important}
}

/* Tablas en reglamentos: scroll horizontal en lugar de desborde */
.reg-section__body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Contact info grid: 2 columnas en tablet, 1 en móvil */
@media(min-width:481px) and (max-width:768px){.contact-info-grid{grid-template-columns:repeat(2,1fr)!important}}

/* Imágenes y iframes no desbordan */
iframe,img{max-width:100%}

/* Ribbon stats en móvil: 2 columnas */
@media(max-width:480px){.fd-hero__stats{grid-template-columns:repeat(2,1fr)!important}}

/* CTA page buttons wrap en móvil */
@media(max-width:480px){
  .pg-cta .fd-shell>div{flex-direction:column!important;align-items:center!important}
}

/* ══════════════════════════════════════
   HEADER MOBILE + TABLET
   Tablet+: 761-1280px  |  Mobile: ≤760px
══════════════════════════════════════ */

/* Eliminar backdrop-filter en móvil (rendimiento + legibilidad) */
@media(max-width:760px){
  .hdr{backdrop-filter:none!important;background:#F7F8FC!important}
}

/* Tablet + modo-escritorio-en-celular: 761-1280px — nav colapsado a
   hamburguesa, barra de links completa solo desde 1281px.

   OBJETIVO (lo que el cliente pidió desde el inicio): que el header se
   vea "como en escritorio" — logo, buscador y opciones alineados en UNA
   SOLA FILA, no apilados. El celular en "modo escritorio" (Request
   Desktop Site) reporta un viewport de 980px, que entra en este rango.

   Historial de intentos fallidos (para no repetirlos):
   - display:contents dejaba a la barra sin área de grid asignada → se
     iba a una celda cualquiera y rompía la alineación.
   - Apilar en 3 filas (logo / buscador / acciones) NO se pisaba pero se
     veía "chueco/gigante": el header quedaba de ~218px de alto y el
     cliente lo rechazó — quería una sola fila, no un stack.

   SOLUCIÓN (verificada EN VIVO a 980px sobre dev.vfdgroup.cloud):
   grid de UNA fila con 4 columnas explícitas — logo | buscador(1fr) |
   acciones | hamburguesa. A 980px: logo≈221px + acciones≈195px +
   toggle≈38px dejan ≈444px para el buscador, sin solaparse. El header
   baja de 218px a ~80px de alto. Como cada elemento tiene su propia
   columna, nada depende de un ancho exacto adivinado. Se oculta
   hdr__count ("N productos") para ganar el espacio necesario. */
@media(min-width:761px) and (max-width:1280px){
  .hdr__inner{
    height:auto!important;padding:8px 16px!important;gap:12px!important;
    grid-template-columns:auto auto 1fr auto!important;
    grid-template-rows:auto!important;
    grid-template-areas:"logo toggle search actions"!important;
    align-items:center!important;
  }
  .hdr__logo{width:62px!important;height:62px!important}
  .hdr__logo img{width:100%!important;height:100%!important}
  .hdr__brand{grid-area:logo!important;align-self:center!important;margin-bottom:0!important;justify-self:start!important}
  .sbar-wrap{grid-area:search!important;align-self:center!important;max-width:none!important;width:100%!important;padding:0!important}
  .sbar{min-height:44px!important;padding:7px 14px!important}
  .sbar__input{font-size:13px!important}
  .hdr__right{grid-area:actions!important;align-self:center!important;width:auto!important;gap:6px!important;flex-shrink:0!important;flex-wrap:nowrap!important;justify-content:flex-end!important}
  .hdr__count{display:none!important}
  .btn-cart{padding:7px 12px!important;font-size:12px!important}
  .nav-toggle{display:inline-flex!important;grid-area:toggle!important;justify-self:center!important;align-self:center!important;flex-shrink:0!important;width:38px!important;height:38px!important;border-radius:10px!important;align-items:center!important;justify-content:center!important;margin-bottom:0!important}
  .site-nav:not(.site-nav--open){display:none!important}
  .site-nav--open{position:fixed!important;top:112px!important;left:0!important;right:0!important;display:flex!important;flex-direction:column!important;gap:3px!important;background:#fff!important;border-bottom:2px solid var(--n)!important;padding:10px 14px 16px!important;box-shadow:0 10px 28px rgba(0,0,0,.16)!important;z-index:999!important;max-height:calc(100vh - 112px)!important;overflow-y:auto!important}
  .site-nav--open a{padding:11px 14px!important;border-radius:10px!important;font-size:14px!important;width:100%!important}
}

/* Mobile ≤760px: layout 3-columnas compacto */
@media(max-width:760px){
  /* Top-strip móvil: solo WA + Cómo llegar (email/teléfono se ocultan) */
  .top-strip{padding:5px 14px!important}
  .top-strip__links a:not(.top-strip__wa):not(.top-strip__nav){display:none!important}
  /* Header bajo el strip simplificado (~27px) */
  .hdr{top:27px!important}
  /* Header móvil como FILA FLEX simple (no grid): logo | hamburguesa |
     buscador, con gaps consistentes. El grid heredado dejaba huecos
     horizontales irregulares (columnas auto/minmax desalineadas). */
  .hdr__inner{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:10px!important;
    padding:8px 12px!important;
    min-height:56px!important;
    height:auto!important;
  }
  /* Logo compacto */
  .hdr__brand{flex:0 0 auto!important;margin:0!important;align-self:center!important}
  .hdr__logo{width:44px!important;height:44px!important}
  .hdr__logo img{width:34px!important;height:34px!important}
  .hdr__name{font-size:15px!important}
  .hdr__brandtxt{display:none!important}
  /* Centro: hamburguesa + buscador en una fila que ocupa el resto */
  .hdr__center{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
    max-width:none!important;
    flex:1 1 auto!important;
    width:auto!important;
    overflow:visible!important;
  }
  /* Buscador ocupa todo el espacio disponible */
  .sbar-wrap{flex:1!important;min-width:0!important}
  .sbar{min-height:40px!important;border-radius:12px!important}
  .sbar__input{font-size:13px!important}
  /* Nav hamburger fijo (no se estira) */
  .nav-toggle{flex-shrink:0!important;width:38px!important;height:38px!important;border-radius:10px!important}
  /* Nav desplegado: dropdown fijo con fondo sólido por encima del hero */
  .site-nav--open{
    position:fixed!important;
    top:91px!important;
    left:0!important;
    right:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    background:#fff!important;
    border-bottom:2px solid var(--n)!important;
    padding:10px 14px 16px!important;
    box-shadow:0 10px 28px rgba(0,0,0,.16)!important;
    z-index:999!important;
    max-height:calc(100vh - 91px)!important;
    overflow-y:auto!important;
  }
  .site-nav--open a{
    padding:11px 14px!important;
    border-radius:10px!important;
    font-size:14px!important;
    white-space:normal!important;
    flex-shrink:unset!important;
    width:100%!important;
  }
  /* Derecha: comprimir */
  .hdr__right{gap:5px!important;flex-shrink:0!important}
  .btn-cart{padding:7px 12px!important;font-size:12px!important}

  /* ── Vista lista responsive: ocultar columnas no esenciales ── */
  .ltbl-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  /* Ocultar encabezados: código, categoría, marca, inv. */
  .lc-c,.lc-k,.lc-m,.lc-n{display:none!important}
  /* Ocultar celdas equivalentes en TDs */
  .ltbl .lt-cod,
  .ltbl td:has(.chip--c),
  .ltbl td:has(.chip--m),
  .ltbl .lt-inv{display:none!important}
  /* Imagen más compacta */
  .lt-thumb{width:44px!important;height:44px!important}
  .lt-ph{width:44px!important;height:44px!important}
  /* Texto y padding compacto */
  .ltbl{font-size:12px!important}
  .ltbl td,.ltbl th{padding:5px 7px!important}
  .lt-name{font-size:12px!important;max-width:none!important}
  .lt-price{white-space:nowrap!important;font-size:12px!important}
  /* Deshabilitar zoom en lista (confuso en móvil) */
  .lt-thumb:hover{transform:none!important;box-shadow:none!important}

  /* Hero card: padding reducido en móvil */
  .page-hero__card{padding:24px 20px!important;border-radius:12px!important}
  .page-hero{padding:24px 0 20px!important}
  .pg-hero{padding:36px 0 28px!important}
  .page-hero h1,.pg-hero h1{font-size:clamp(22px,7vw,32px)!important}
}

/* Mobile extra pequeño ≤480px */
@media(max-width:480px){
  .hdr__inner{padding:6px 10px!important;gap:6px!important}
  .hdr__name{font-size:14px!important}
  .hdr__sub{display:none!important}
  .hdr__logo{width:40px!important;height:40px!important}
  .hdr__logo img{width:32px!important;height:32px!important}
  .btn-ia{display:none!important}
}

/* ══════════════════════════════════════
   TRANSPARENCIAS Y CONTRASTE
══════════════════════════════════════ */

/* Fondos sólidos en componentes clave */
.search-dd{background:#fff!important;border:1px solid var(--br)!important}
.sbar{background:#fff!important}

/* Modal: sin transparencia */
.modal__box{background:#fff!important}

/* Chips y badges: legibles */
.chip{background:var(--s)!important;color:var(--n)!important}
.chip--m{background:rgba(240,48,49,.08)!important;color:var(--o)!important}

/* Chips categoría en catalog grid: igual visual que pc-cat en carrusel */
.chip--c{background:transparent!important;color:var(--card-navy,var(--n))!important;border:none!important;padding:0!important;border-radius:0!important;font-size:10px!important;font-weight:700!important;letter-spacing:.13em!important;text-transform:uppercase!important;max-width:none!important;flex:1!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:inline-block!important;}

/* Nombre del producto en catalog grid: mayor especificidad que .page-hero p (!important) */
.card .card__name{font-family:'Inter',sans-serif!important;font-size:13px!important;font-weight:700!important;text-transform:uppercase!important;color:var(--card-text,#222222)!important;line-height:1.4!important;}
@media(max-width:760px){ .card .card__name{font-size:10px!important;} }

/* ══════════════════════════════════════
   BOTONES IA Y COTIZACIÓN EN MOBILE
══════════════════════════════════════ */

/* btn-ia visible hasta 760px (ya oculto en ≤480px arriba) */
@media(max-width:760px){
  .btn-ia{font-size:12px!important;padding:7px 10px!important}
  .btn-cart{font-size:12px!important;padding:7px 12px!important}
}

/* Acciones del modal: legibles en móvil */
@media(max-width:480px){
  .modal__wa-btn,.modal__ia-btn,.modal__copy-btn{font-size:12px!important;padding:9px 12px!important}
  .modal__add-row{flex-wrap:wrap!important;gap:8px!important}
  .btn-addcart{width:100%!important;justify-content:center!important}
}

/* ══════════════════════════════════════
   CARDS EN TABLET Y MOBILE
══════════════════════════════════════ */

/* Grid de catálogo: ajustar columnas */
@media(max-width:1024px) and (min-width:769px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
}
@media(max-width:768px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))!important;gap:10px!important}
}
@media(max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
}

/* Carrusel pc-scroll: márgenes en mobile */
@media(max-width:480px){
  .pc-scroll{gap:10px!important;padding:4px 2px 12px!important}
  .pc-card{flex:0 0 155px!important}
  .pc-img{height:120px!important}
}

/* ══════════════════════════════════════
   FONDOS OSCUROS — SIN RUIDO/ARTEFACTOS
   Fondo sólido corporativo en mobile/tablet
══════════════════════════════════════ */

/* Garantizar color sólido sin image ni gradiente externo */
.fd-section--dark{background-color:var(--dk)!important;background-image:none!important}
.pg-section--dark{background-color:var(--dk)!important;background-image:none!important}

/* Cards en dark section: mayor opacidad en tablet/mobile */
@media(max-width:1024px){
  .fd-section--dark .showcase-card{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.16)!important}
  .fd-section--dark .showcase-card:hover{background:rgba(255,255,255,.15)!important}
}

/* ══════════════════════════════════════
   SECCIÓN VALORES (nosotros.html)
   Contraste, jerarquía y accesibilidad
══════════════════════════════════════ */

/* Tarjeta con más contraste */
.value-card{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.16)!important;padding:24px!important}
.value-card:hover{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.24)!important}

/* Icono con fondo acento visible */
.value-card svg{
  display:block!important;
  width:32px!important;height:32px!important;
  padding:6px!important;box-sizing:border-box!important;
  background:rgba(240,48,49,.16)!important;
  color:var(--o)!important;stroke:var(--o)!important;
  border-radius:10px!important;
  margin-bottom:14px!important;
}

/* Título — HTML usa <strong>, no <h4> */
.value-card strong{
  display:block!important;
  font-size:15px!important;font-weight:900!important;
  color:#fff!important;
  margin:0 0 8px!important;letter-spacing:-.01em!important;
}

/* Texto descriptivo */
.value-card p{color:rgba(255,255,255,.68)!important;font-size:13px!important;line-height:1.6!important;margin:0!important}

/* Grid responsive de valores */
@media(max-width:768px){.values-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}}
@media(max-width:480px){.values-grid{grid-template-columns:1fr!important}}

/* ══════════════════════════════════════
   HEADER MOBILE — MENOS PROTAGONISMO
   Priorizar logo + buscador
══════════════════════════════════════ */

/* Ocultar texto del brand en mobile pequeño: solo logo */
@media(max-width:640px){
  .hdr__brandtxt{display:none!important}
}
/* Logo ligeramente más pequeño para compensar */
@media(max-width:640px){
  .hdr__logo{width:42px!important;height:42px!important}
  .hdr__logo img{width:34px!important;height:34px!important}
}

/* ══════════════════════════════════════
   BUSCADOR — MINIATURAS Y RECOMENDADOS
══════════════════════════════════════ */

/* Miniatura en cada resultado de búsqueda */
.search-dd__thumb{
  flex-shrink:0;
  width:40px;height:40px;
  border-radius:8px;
  overflow:hidden;
  background:var(--s);
  border:1px solid var(--br);
  display:flex;align-items:center;justify-content:center;
}
.search-dd__thumb img{width:100%;height:100%;object-fit:contain;display:block}

/* Ajustar item para layout con thumbnail */
.search-dd__item{display:flex!important;align-items:center!important;gap:10px!important}

/* Label de sección recomendados */
.search-dd__label--recs{
  background:var(--s)!important;
  border-top:1px solid var(--br)!important;
  margin-top:2px!important;
  color:var(--o)!important;
}

/* ══════════════════════════════════════
   BUSCADOR MOBILE — DROPDOWN REFINADO
   No cubre todo el contenido visible
══════════════════════════════════════ */

@media(max-width:760px){
  .search-dd{
    max-height:52vh!important;
    overflow-y:auto!important;
    border-radius:0 0 14px 14px!important;
  }
  .search-dd__item{padding:10px 14px!important}
  .search-dd__thumb{width:34px!important;height:34px!important}
  .search-dd__meta strong{font-size:12px!important}
  .search-dd__meta span{font-size:11px!important}
}

/* fsel deshabilitado (subcategoría sin opciones) */
.fsel:disabled{opacity:.45;cursor:not-allowed;}

/* ═══════════════════════════════════════════
   BÚSQUEDA LOCAL EN CATÁLOGO
═══════════════════════════════════════════ */
.catalog-lsearch{
  display:flex;align-items:center;gap:10px;
  background:#fff;
  border:2px solid var(--br);
  border-radius:14px;
  padding:11px 16px;
  margin-bottom:12px;
  transition:border-color .15s,box-shadow .15s;
}
.catalog-lsearch:focus-within{border-color:var(--n);box-shadow:0 0 0 3px rgba(27,42,94,.08);}
.catalog-lsearch__ico{flex-shrink:0;color:var(--mu);}
.catalog-lsearch__input{
  flex:1;border:none;background:transparent;
  font-size:14px;color:var(--tx);outline:none;font-family:inherit;
}
.catalog-lsearch__input::placeholder{color:var(--mu);}
.catalog-lsearch__clear{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:var(--mu);font-size:16px;line-height:1;padding:2px 4px;border-radius:4px;
}
.catalog-lsearch__clear:hover{color:var(--o);}

/* ═══════════════════════════════════════════
   DIRECTORIO CATEGORÍAS — JERARQUÍA
═══════════════════════════════════════════ */
/* Convierte .directory-card en contenedor flex para que las sub-chips queden debajo */
.directory-card{
  display:flex!important;flex-direction:column!important;
  padding:0!important;background:transparent!important;
  border:none!important;box-shadow:none!important;
  border-radius:0!important;transform:none!important;
}
.directory-card:hover{transform:none!important;box-shadow:none!important;}
.directory-card__main{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(13,59,141,.08);
  box-shadow:0 18px 34px rgba(16,33,63,.05);
  border-radius:22px;padding:22px;
  text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  flex:1;
}
.directory-card__main:hover{
  transform:translateY(-4px);
  border-color:rgba(244,119,33,.3);
  box-shadow:0 28px 40px rgba(16,33,63,.08);
}
.directory-card__main strong{display:block;color:var(--tx);}
.directory-card__main span{display:block;color:var(--mu);margin-top:6px;}
.directory-card__main em{
  display:inline-flex;margin-top:14px;
  color:var(--n);font-size:12px;font-weight:800;font-style:normal;
}
.directory-card__subs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 4px 4px;
}
.directory-card__sub-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(27,42,94,.06);
  border:1px solid rgba(27,42,94,.14);
  border-radius:20px;padding:4px 10px;
  font-size:11px;font-weight:600;
  color:var(--n);text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.directory-card__sub-chip:hover{
  background:rgba(240,48,49,.10);
  border-color:rgba(240,48,49,.3);
  color:var(--o);
}
.directory-card__sub-count{
  background:rgba(27,42,94,.12);
  border-radius:99px;padding:1px 5px;
  font-size:10px;font-weight:700;
}
@media(max-width:768px){
  .catalog-lsearch{padding:9px 12px;margin-bottom:8px;}
  .catalog-lsearch__input{font-size:13px;}
  .directory-card__subs{gap:4px;padding:6px 2px 2px;}
  .directory-card__sub-chip{font-size:10px;padding:3px 8px;}
}

/* ══════════════════════════════════════
   NOTICE MODAL — reemplaza alert()
══════════════════════════════════════ */
.notice-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;}
.notice-modal[hidden]{display:none!important;}
.notice-modal__bg{position:absolute;inset:0;background:rgba(15,29,69,.55);backdrop-filter:blur(4px);}
.notice-modal__box{position:relative;background:#fff;border-radius:18px;padding:36px 28px 28px;max-width:360px;width:100%;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.22);border-top:4px solid var(--o);}
.notice-modal__icon{width:52px;height:52px;border-radius:50%;background:rgba(240,48,49,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--o);}
.notice-modal__msg{font-size:15px;color:#374062;line-height:1.55;margin:0 0 24px;font-weight:500;}
.notice-modal__btn{background:var(--n);color:#fff;border:none;padding:11px 32px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s;letter-spacing:.03em;}
.notice-modal__btn:hover{background:var(--n2);transform:translateY(-1px);}

/* ══════════════════════════════════════
   QUOTE MODAL — opción WhatsApp
══════════════════════════════════════ */
.dopt__box--wa{border-color:#25d366!important;color:#16a34a!important;display:flex;align-items:center;gap:6px;}
.dopt input[value="wa"]:checked ~ .dopt__box--wa{background:#f0fdf4!important;border-color:#16a34a!important;color:#15803d!important;}
.btn-quote-send--wa{background:#25d366!important;border-color:#25d366!important;color:#fff!important;}
.btn-quote-send--wa:hover{background:#1fb855!important;border-color:#1fb855!important;}
.wa-fields{padding:20px 0 8px;}
.wa-fields__info{display:flex;align-items:flex-start;gap:14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:18px 16px;}
.wa-fields__title{font-size:14px;font-weight:700;color:#15803d;margin:0 0 4px;}
.wa-fields__sub{font-size:13px;color:#166534;line-height:1.5;margin:0;}

/* ── Zoom con navegación multi-imagen ───────────────────────── */
.zoom-nav{
  position:absolute;top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);color:#1B2A5E;
  border:none;cursor:pointer;font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  transition:background .15s,transform .15s;
  z-index:3;
}
.zoom-nav--prev{left:-20px;}
.zoom-nav--next{right:-20px;}
.zoom-nav:hover{background:#1B2A5E;color:#fff;transform:translateY(-50%) scale(1.1);}
@media(max-width:640px){
  .zoom-nav--prev{left:6px;}
  .zoom-nav--next{right:6px;}
}
.zoom-counter{
  position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#fff;
  font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;
  white-space:nowrap;
}

/* ── AI chat: botón agregar al carrito ──────────────────────── */
.ai-add-btn{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:6px 13px;background:var(--n);color:#fff;border:none;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,transform .1s;}
.ai-add-btn:hover:not(:disabled){background:var(--n2);transform:scale(1.03);}
.ai-add-btn--done{background:#22c55e!important;cursor:default;}
.ai-msg__bubble .ai-link{color:#1a3fa0;text-decoration:underline;word-break:break-all;}
.ai-wa-btn{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:6px 13px;background:#25d366;color:#fff;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;transition:background .15s,transform .1s;}
.ai-wa-btn:hover{background:#1ebe5d;transform:scale(1.03);color:#fff;}

/* ── AI FAB — píldora flotante en móvil ────────────────────── */
.ai-fab{
  display:none;
  position:fixed;
  bottom:22px;right:14px;
  z-index:9998;
  align-items:center;
  gap:10px;
  padding:10px 18px 10px 10px;
  border-radius:40px;
  background:linear-gradient(135deg,#1B2A5E 0%,#243580 100%);
  color:#fff;
  border:2px solid rgba(255,255,255,.18);
  cursor:pointer;
  box-shadow:0 6px 22px rgba(27,42,94,.42),0 2px 6px rgba(0,0,0,.15);
  transition:transform .18s,box-shadow .18s;
  text-align:left;
}
.ai-fab:active{transform:scale(.97);}
/* Ícono circular dentro de la píldora */
.ai-fab__icon{
  width:36px;height:36px;flex-shrink:0;
  background:rgba(255,255,255,.15);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.25);
}
.ai-fab__icon svg{display:block;pointer-events:none;}
/* Textos */
.ai-fab__body{display:flex;flex-direction:column;gap:1px;}
.ai-fab__label{font-size:11px;font-weight:600;opacity:.72;letter-spacing:.04em;line-height:1;}
.ai-fab__cta{font-size:13px;font-weight:800;line-height:1.2;letter-spacing:-.01em;}
/* Punto verde "en línea" */
.ai-fab__dot{
  width:9px;height:9px;border-radius:50%;
  background:#22c55e;
  border:1.5px solid #fff;
  position:absolute;top:9px;left:39px;
}
/* Animación atención */
@keyframes ai-fab-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.ai-fab--idle{animation:ai-fab-bob 2.8s ease-in-out infinite;}
.ai-fab--idle:hover{animation:none;transform:translateY(-2px);box-shadow:0 10px 30px rgba(27,42,94,.5);}

@media(max-width:760px){
  .ai-fab{display:flex;bottom:16px!important;right:10px!important;padding:7px 12px 7px 7px!important;gap:7px!important;transition:padding .18s,opacity .18s,transform .18s;}
  .ai-fab__icon{width:28px!important;height:28px!important;flex-shrink:0;}
  .ai-fab__icon svg{width:16px!important;height:16px!important;}
  .ai-fab__label{font-size:9px!important;}
  .ai-fab__cta{font-size:11px!important;}
  .ai-fab__dot{width:7px!important;height:7px!important;top:6px!important;left:30px!important;}
  body.ai-open .ai-fab{display:none!important;}
  /* Scroll activo: colapsa a solo ícono para no tapar productos */
  body.fabs-compact .ai-fab{padding:0!important;width:42px!important;height:42px!important;justify-content:center!important;opacity:.88;}
  body.fabs-compact .ai-fab__body,
  body.fabs-compact .ai-fab__dot{display:none!important;}
}

/* ── Cotizar FAB — apilado sobre el AI FAB en móvil ─────────── */
.cart-fab{
  display:none;
  position:fixed;
  bottom:96px;right:14px;
  z-index:9998;
  align-items:center;
  gap:10px;
  padding:10px 18px 10px 10px;
  border-radius:40px;
  background:linear-gradient(135deg,#F03031 0%,#c81f20 100%);
  color:#fff;
  border:2px solid rgba(255,255,255,.18);
  cursor:pointer;
  box-shadow:0 6px 22px rgba(200,31,32,.38),0 2px 6px rgba(0,0,0,.15);
  transition:transform .18s,box-shadow .18s;
  text-align:left;
}
.cart-fab:active{transform:scale(.97);}
.cart-fab__icon{
  width:36px;height:36px;flex-shrink:0;
  background:rgba(255,255,255,.15);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(255,255,255,.25);
}
.cart-fab__icon svg{display:block;pointer-events:none;}
.cart-fab__label{font-size:13px;font-weight:800;line-height:1.2;letter-spacing:-.01em;}
.cart-fab__badge{
  position:absolute;top:6px;left:39px;
  background:#fff;color:#c81f20;
  font-size:10px;font-weight:800;
  min-width:17px;height:17px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;border:1.5px solid #c81f20;
}

@media(max-width:760px){
  .cart-fab{display:flex;bottom:66px!important;right:10px!important;padding:7px 12px 7px 7px!important;gap:7px!important;transition:padding .18s,opacity .18s,transform .18s;}
  .cart-fab__icon{width:28px!important;height:28px!important;flex-shrink:0;}
  .cart-fab__icon svg{width:16px!important;height:16px!important;}
  .cart-fab__label{font-size:11px!important;}
  .cart-fab__badge{width:15px!important;height:15px!important;min-width:15px!important;font-size:9px!important;top:4px!important;left:30px!important;}
  body.ai-open .cart-fab,
  body.cart-open .cart-fab,
  body.cart-open .ai-fab{display:none!important;}
  /* Scroll activo: colapsa a solo ícono para no tapar productos */
  body.fabs-compact .cart-fab{padding:0!important;width:42px!important;height:42px!important;justify-content:center!important;opacity:.88;}
  body.fabs-compact .cart-fab__label{display:none!important;}
  body.fabs-compact .cart-fab__badge{top:-3px!important;left:26px!important;}
}

/* ── Imágenes en cards: sin recorte en touch/móvil ─────────── */
/* En dispositivos touch el :hover queda pegado y el scale con
   overflow:hidden recorta la imagen. Se desactiva en touch. */
@media(hover:none){
  .card:hover{transform:none!important;}
  .card:hover .card__img img{transform:none!important;}
  .pc-card:hover{transform:none!important;}
  .pc-card:hover .pc-img img{transform:none!important;}
}

/* Imagen catálogo — centrado confiable en móvil ─────────────
   El padding sobre height:100% falla en algunos motores WebKit.
   En ≤640px cambiamos a cuadrado y centramos con flex en la capa
   de slides, pasando la imagen a auto-size con max constraints. */
@media(max-width:640px){
  .card__img{aspect-ratio:1/1!important;}
  .card__slides{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .card__img img{
    width:auto!important;
    height:auto!important;
    max-width:calc(100% - 20px)!important;
    max-height:calc(100% - 20px)!important;
    padding:0!important;
    object-fit:unset!important;
    position:static!important;
    transform:none!important;
  }
  /* Carousel index/categorias — mismo patrón */
  .pc-img{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .pc-img img{
    width:auto!important;
    height:auto!important;
    max-width:calc(100% - 16px)!important;
    max-height:calc(100% - 16px)!important;
    padding:0!important;
    object-fit:unset!important;
  }
}

/* ── Botón Cotización en móvil — ícono + micro-label ─────────
   Sin texto largo (ocupa espacio y solapa el buscador).
   El ícono clipboard comunica "cotización"; micro-label confirma. */
@media(max-width:640px){
  .btn-cart{
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    padding:5px 8px!important;
    gap:2px!important;
    border-radius:10px!important;
    min-width:44px!important;
    font-size:0!important;       /* oculta texto heredado */
  }
  .btn-cart svg{width:20px!important;height:20px!important;}
  .btn-cart__lbl{
    display:block!important;
    font-size:9px!important;
    font-weight:700!important;
    letter-spacing:.03em!important;
    line-height:1!important;
    opacity:.9!important;
  }
  .btn-cart__badge{
    top:-5px!important;
    right:-5px!important;
  }
}

/* ── Pager: ir a página ──────────────────────────────────────── */
.pager__goto{
  display:flex;align-items:center;gap:4px;
}
.pager__goto-input{
  width:80px;padding:6px 8px;
  border:1.5px solid var(--g200);border-radius:var(--r);
  font-size:13px;font-weight:500;color:var(--g900);
  background:var(--g50);outline:none;text-align:center;
  transition:border-color .15s;
  -moz-appearance:textfield;
}
.pager__goto-input::-webkit-outer-spin-button,
.pager__goto-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pager__goto-input:focus{border-color:var(--blue);}
.pager__goto-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--blue);color:#fff;border:none;
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .1s;flex-shrink:0;
}
.pager__goto-btn:hover{background:#1048b8;transform:scale(1.08);}
@media(max-width:640px){
  .pager{flex-wrap:wrap;gap:10px;}
  .pager__goto-input{width:64px;font-size:12px;}
}

/* ── Filtros barra — móvil ───────────────────────────────────── */
@media(max-width:640px){
  .filters-bar__inner{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px 12px!important;
    padding:12px 14px!important;
  }
  .fgroup{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:3px!important;
    min-width:0!important;
  }
  .flbl{font-size:12px!important;}
  .fsel{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    font-size:12px!important;
    padding:5px 24px 5px 8px!important;
  }
  .fbtn-reset{
    grid-column:1/-1!important;
    margin-left:0!important;
    width:100%!important;
    text-align:center!important;
  }
}