/* =====================================================================
   NUCLEA2 · Sitio público
   Paleta tomada del logo: verde #009900 · naranja #FF7F00 · violeta #7030A0
   ===================================================================== */

:root{
  --verde:#009900;   --verde-osc:#007a00;  --verde-cl:#e8f6e8;
  --naranja:#FF7F00; --naranja-osc:#e06f00;--naranja-cl:#fff2e3;
  --violeta:#7030A0; --violeta-osc:#5b2683;--violeta-cl:#f3ecf9;

  --tinta:#161b1f;
  --tinta-2:#4a545c;
  --tinta-3:#7c878f;
  --linea:#e4e8ea;
  --fondo:#ffffff;
  --fondo-2:#f6f8f9;

  --radio:14px;
  --radio-lg:24px;
  --sombra:0 1px 2px rgba(22,27,31,.06), 0 8px 24px rgba(22,27,31,.06);
  --sombra-lg:0 2px 4px rgba(22,27,31,.05), 0 20px 48px rgba(22,27,31,.12);
  --trans:.25s cubic-bezier(.4,0,.2,1);

  --tri:linear-gradient(100deg,var(--verde) 0%,var(--naranja) 52%,var(--violeta) 100%);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.6; color:var(--tinta);
  background:var(--fondo); -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
p{margin:0 0 1rem}
a{color:var(--violeta); text-decoration:none; transition:color var(--trans)}
a:hover{color:var(--violeta-osc)}
img{max-width:100%; height:auto}

.contenedor{width:100%; max-width:1180px; margin:0 auto; padding:0 20px}
.seccion{padding:clamp(56px,8vw,104px) 0}
.seccion--gris{background:var(--fondo-2)}
.centrado{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.maxw-680{max-width:680px}

/* --- Utilidades de color ------------------------------------------ */
.txt-verde{color:var(--verde)} .txt-naranja{color:var(--naranja)} .txt-violeta{color:var(--violeta)}
.txt-2{color:var(--tinta-2)} .txt-3{color:var(--tinta-3)}
.mini{font-size:.83rem; line-height:1.6}
.degradado{background:var(--tri); -webkit-background-clip:text; background-clip:text; color:transparent}

/* --- Etiqueta / eyebrow ------------------------------------------- */
.etiqueta{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:7px 15px; border-radius:999px; margin-bottom:18px;
  background:var(--verde-cl); color:var(--verde-osc);
}
.etiqueta--naranja{background:var(--naranja-cl); color:var(--naranja-osc)}
.etiqueta--violeta{background:var(--violeta-cl); color:var(--violeta-osc)}
.etiqueta .punto{width:7px;height:7px;border-radius:50%;background:currentColor;animation:latido 2s infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* --- Botones ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:.97rem; line-height:1;
  padding:15px 28px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:all var(--trans); white-space:nowrap; text-decoration:none;
}
.btn:focus-visible{outline:3px solid var(--violeta); outline-offset:2px}
.btn-verde{background:var(--verde); color:#fff}
.btn-verde:hover{background:var(--verde-osc); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,153,0,.3)}
.btn-naranja{background:var(--naranja); color:#fff}
.btn-naranja:hover{background:var(--naranja-osc); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,127,0,.32)}
.btn-violeta{background:var(--violeta); color:#fff}
.btn-violeta:hover{background:var(--violeta-osc); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(112,48,160,.3)}
.btn-linea{background:transparent; border-color:var(--linea); color:var(--tinta)}
.btn-linea:hover{border-color:var(--tinta); color:var(--tinta); background:transparent}
.btn-blanco{background:#fff;color:var(--violeta)}
.btn-blanco:hover{background:#fff;color:var(--violeta-osc);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.btn-lg{padding:18px 36px; font-size:1.05rem}
.btn-sm{padding:10px 18px; font-size:.86rem}
.btn-bloque{width:100%}

/* --- Cabecera ------------------------------------------------------ */
.cabecera{
  position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;
  transition:border-color var(--trans), box-shadow var(--trans);
}
.cabecera.fija{border-bottom-color:var(--linea); box-shadow:0 4px 20px rgba(22,27,31,.05)}
.cabecera__int{display:flex; align-items:center; gap:28px; height:74px}
.marca{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.22rem; color:var(--tinta); letter-spacing:-.02em}
.marca:hover{color:var(--tinta)}
.marca img{width:40px; height:40px}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{
  padding:9px 15px; border-radius:9px; font-weight:600; font-size:.94rem;
  color:var(--tinta-2); transition:all var(--trans);
}
.nav a:hover,.nav a.activo{background:var(--fondo-2); color:var(--tinta)}
.nav__acciones{display:flex; align-items:center; gap:10px; margin-left:14px}
.hamburguesa{display:none; background:none; border:0; padding:8px; cursor:pointer; margin-left:auto}
.hamburguesa span{display:block; width:24px; height:2px; background:var(--tinta); border-radius:2px; transition:all var(--trans)}
.hamburguesa span+span{margin-top:6px}

/* --- Hero ---------------------------------------------------------- */
.hero{position:relative; overflow:hidden; padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,88px)}
.hero__fondo{position:absolute; inset:0; z-index:0; pointer-events:none}
.mancha{position:absolute; border-radius:50%; filter:blur(80px); opacity:.2}
.mancha--v{width:520px;height:520px;background:var(--verde);   top:-190px; left:-140px; animation:flotar 22s ease-in-out infinite}
.mancha--n{width:440px;height:440px;background:var(--naranja); top:130px;  right:-130px;animation:flotar 26s ease-in-out infinite reverse}
.mancha--p{width:400px;height:400px;background:var(--violeta); bottom:-200px; left:38%; animation:flotar 30s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,-26px) scale(1.07)}66%{transform:translate(-26px,20px) scale(.95)}}

.hero__grid{position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center}
.hero h1{margin-bottom:20px}
.hero__bajada{font-size:clamp(1.03rem,1.7vw,1.22rem); color:var(--tinta-2); max-width:540px; margin-bottom:30px}
.hero__ctas{display:flex; flex-wrap:wrap; gap:13px; margin-bottom:34px}
.hero__prueba{display:flex; align-items:center; gap:14px; font-size:.9rem; color:var(--tinta-3)}
.avatares{display:flex}
.avatares span{
  width:34px;height:34px;border-radius:50%;border:2.5px solid #fff;margin-left:-11px;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;
}
.avatares span:first-child{margin-left:0}

/* --- Calculadora de ahorro ---------------------------------------- */
.calc{
  background:#fff; border-radius:var(--radio-lg); padding:30px;
  box-shadow:var(--sombra-lg); border:1px solid var(--linea); position:relative;
}
.calc::before{
  content:''; position:absolute; inset:-1px -1px auto; height:5px;
  background:var(--tri); border-radius:var(--radio-lg) var(--radio-lg) 0 0;
}
.calc__tit{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.1rem; margin-bottom:5px}
.calc__sub{font-size:.87rem; color:var(--tinta-3); margin-bottom:22px}
.campo{margin-bottom:17px}
.campo label{display:block; font-size:.83rem; font-weight:700; color:var(--tinta-2); margin-bottom:7px}
.campo input,.campo select,.campo textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--linea); border-radius:11px;
  font-size:1rem; font-family:inherit; color:var(--tinta); background:#fff;
  transition:border-color var(--trans), box-shadow var(--trans);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgba(0,153,0,.1);
}
.campo--error input{border-color:#dc3545}
.campo__error{font-size:.8rem;color:#dc3545;margin-top:5px;display:block}
.campo__ayuda{font-size:.79rem;color:var(--tinta-3);margin-top:5px;display:block}

/* --- Celular con selector de país ----------------------------------- */
.campo-cel{display:flex; gap:0}
.campo-cel__pais{
  flex:0 0 auto; width:auto; max-width:44%;
  border-top-right-radius:0 !important; border-bottom-right-radius:0 !important;
  border-right:none !important;
  background:var(--fondo-2); font-weight:600; cursor:pointer;
  padding-right:8px;
}
.campo-cel__num{
  flex:1 1 auto; min-width:0;
  border-top-left-radius:0 !important; border-bottom-left-radius:0 !important;
}
/* El foco tiene que verse como un solo control, no como dos cajas */
.campo-cel:focus-within .campo-cel__pais,
.campo-cel:focus-within .campo-cel__num{
  border-color:var(--verde);
}
.campo-cel:focus-within{border-radius:11px; box-shadow:0 0 0 4px rgba(0,153,0,.1)}
.campo-cel:focus-within .campo-cel__pais,
.campo-cel:focus-within .campo-cel__num{box-shadow:none}
.campo--error .campo-cel__pais,.campo--error .campo-cel__num{border-color:#dc3545}

.rango{display:flex; gap:9px}
.rango button{
  flex:1; padding:11px 0; border:1.5px solid var(--linea); background:#fff;
  border-radius:10px; font-weight:700; font-size:.87rem; cursor:pointer;
  color:var(--tinta-2); transition:all var(--trans);
}
.rango button:hover{border-color:var(--tinta-3)}
.rango button.activo{background:var(--verde); border-color:var(--verde); color:#fff}

.calc__res{
  background:linear-gradient(135deg,var(--verde-cl),#fff); border:1.5px solid rgba(0,153,0,.22);
  border-radius:15px; padding:20px; margin-top:22px; text-align:center;
}
.calc__res .rotulo{font-size:.79rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--verde-osc)}
.calc__res .monto{font-size:clamp(1.9rem,4.5vw,2.7rem); font-weight:900; color:var(--verde-osc); line-height:1.1; margin:6px 0; letter-spacing:-.03em}
.calc__res .detalle{font-size:.85rem; color:var(--tinta-2)}
.calc__pie{font-size:.77rem; color:var(--tinta-3); text-align:center; margin-top:13px}

/* --- Franja de métricas -------------------------------------------- */
.metricas{background:var(--tri); color:#fff; padding:44px 0}
.metricas__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; text-align:center}
.metrica .n{font-size:clamp(1.9rem,4vw,2.9rem); font-weight:900; line-height:1; letter-spacing:-.03em}
.metrica .t{font-size:.87rem; opacity:.94; margin-top:7px; font-weight:600}

/* --- Tarjetas ------------------------------------------------------ */
.tarjetas{display:grid; gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.tarjeta{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-lg);
  padding:30px; transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.tarjeta:hover{transform:translateY(-5px); box-shadow:var(--sombra-lg); border-color:transparent}
.tarjeta__icono{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
  margin-bottom:18px; font-size:1.5rem;
}
.ic-verde{background:var(--verde-cl); color:var(--verde-osc)}
.ic-naranja{background:var(--naranja-cl); color:var(--naranja-osc)}
.ic-violeta{background:var(--violeta-cl); color:var(--violeta-osc)}
.tarjeta h3{margin-bottom:9px}
.tarjeta p{color:var(--tinta-2); font-size:.95rem; margin:0}

/* --- Pasos --------------------------------------------------------- */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:paso}
.paso{position:relative; padding-top:52px}
.paso::before{
  counter-increment:paso; content:counter(paso);
  position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%;
  background:var(--tri); color:#fff; display:grid; place-items:center;
  font-weight:900; font-size:1.05rem;
}
.paso h3{font-size:1.08rem; margin-bottom:7px}
.paso p{font-size:.92rem; color:var(--tinta-2); margin:0}

/* --- Compras grupales ---------------------------------------------- */
.compra{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--trans), box-shadow var(--trans);
}
.compra:hover{transform:translateY(-5px); box-shadow:var(--sombra-lg)}
.compra__img{aspect-ratio:16/10; background:var(--fondo-2); position:relative; overflow:hidden}
.compra__foto{width:100%; height:100%; object-fit:cover; display:block}
.compra__cat{
  position:absolute; top:13px; left:13px; background:rgba(255,255,255,.95);
  padding:6px 13px; border-radius:999px; font-size:.74rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--violeta);
}
.compra__cierra{
  position:absolute; top:13px; right:13px; background:var(--naranja); color:#fff;
  padding:6px 13px; border-radius:999px; font-size:.74rem; font-weight:800;
}
.compra__cuerpo{padding:22px; flex:1; display:flex; flex-direction:column}
.compra__cuerpo h3{font-size:1.14rem; margin-bottom:7px}
.compra__desc{font-size:.9rem; color:var(--tinta-2); flex:1; margin-bottom:16px}

.barra{height:9px; background:var(--fondo-2); border-radius:999px; overflow:hidden; margin-bottom:9px}
.barra__int{height:100%; background:var(--tri); border-radius:999px; transition:width 1s cubic-bezier(.4,0,.2,1)}
.barra__txt{display:flex; justify-content:space-between; font-size:.82rem; color:var(--tinta-2); margin-bottom:17px}
.barra__txt b{color:var(--verde-osc)}

.precios{display:flex; align-items:baseline; gap:11px; margin-bottom:17px}
.precio-lista{font-size:.92rem; color:var(--tinta-3); text-decoration:line-through}
.precio-grupal{font-size:1.45rem; font-weight:900; color:var(--verde-osc); letter-spacing:-.02em}
.ahorro-pill{background:var(--verde-cl); color:var(--verde-osc); padding:4px 11px; border-radius:999px; font-size:.78rem; font-weight:800}

/* --- Testimonios --------------------------------------------------- */
.testimonio{background:#fff; border:1px solid var(--linea); border-radius:var(--radio-lg); padding:28px}
.testimonio__txt{font-size:1rem; color:var(--tinta); margin-bottom:20px; font-style:italic}
.testimonio__pie{display:flex; align-items:center; gap:13px}
.testimonio__ini{width:46px;height:46px;border-radius:50%;background:var(--tri);color:#fff;display:grid;place-items:center;font-weight:800}
.testimonio__nom{font-weight:800; font-size:.95rem}
.testimonio__loc{font-size:.83rem; color:var(--tinta-3)}
.testimonio__ahorro{margin-left:auto; text-align:right}
.testimonio__ahorro b{display:block; color:var(--verde-osc); font-size:1.05rem; font-weight:900}
.testimonio__ahorro span{font-size:.75rem; color:var(--tinta-3)}

/* --- FAQ ----------------------------------------------------------- */
.faq__item{border-bottom:1px solid var(--linea)}
.faq__q{
  width:100%; background:none; border:0; text-align:left; cursor:pointer;
  padding:22px 44px 22px 0; font-size:1.03rem; font-weight:700; color:var(--tinta);
  position:relative; font-family:inherit;
}
.faq__q::after{
  content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:1.5rem; font-weight:400; color:var(--violeta); transition:transform var(--trans);
}
.faq__item.abierto .faq__q::after{transform:translateY(-50%) rotate(45deg)}
.faq__a{max-height:0; overflow:hidden; transition:max-height .35s ease}
.faq__a p{padding:0 44px 22px 0; color:var(--tinta-2); margin:0}

/* --- CTA final ----------------------------------------------------- */
.cta{background:var(--tri); color:#fff; border-radius:var(--radio-lg); padding:clamp(40px,6vw,68px); text-align:center; position:relative; overflow:hidden}
.cta h2{color:#fff; margin-bottom:14px}
.cta p{color:rgba(255,255,255,.93); font-size:1.08rem; max-width:560px; margin:0 auto 28px}
.cta__btns{display:flex; gap:13px; justify-content:center; flex-wrap:wrap}

/* --- Pie ----------------------------------------------------------- */
.pie{background:var(--tinta); color:rgba(255,255,255,.72); padding:60px 0 26px; margin-top:0}
.pie__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:38px; margin-bottom:42px}
.pie h4{color:#fff; font-size:.87rem; text-transform:uppercase; letter-spacing:.09em; margin-bottom:16px}
.pie a{color:rgba(255,255,255,.72); display:block; padding:5px 0; font-size:.93rem}
.pie a:hover{color:#fff}
.pie__marca{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:14px}
.pie__marca img{width:38px;height:38px}
.pie__legal{border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.85rem}

/* --- WhatsApp flotante --------------------------------------------- */
.wapp{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform var(--trans);
}
.wapp:hover{transform:scale(1.09); color:#fff}
.wapp svg{width:29px;height:29px}

/* --- Alertas ------------------------------------------------------- */
.alerta{padding:14px 18px; border-radius:12px; margin-bottom:18px; font-size:.94rem; font-weight:600; display:flex; gap:10px; align-items:flex-start}
.alerta-success{background:var(--verde-cl); color:var(--verde-osc)}
.alerta-danger{background:#fdeaea; color:#b02a37}
.alerta-warning{background:var(--naranja-cl); color:var(--naranja-osc)}
.alerta-info{background:var(--violeta-cl); color:var(--violeta-osc)}

/* --- Formularios de acceso ----------------------------------------- */
.acceso{min-height:calc(100vh - 74px); display:grid; place-items:center; padding:44px 20px; background:var(--fondo-2)}
.acceso__caja{width:100%; max-width:430px; background:#fff; border-radius:var(--radio-lg); padding:38px; box-shadow:var(--sombra-lg)}
.acceso__caja h1{font-size:1.7rem; margin-bottom:7px}
.acceso__caja .sub{color:var(--tinta-3); font-size:.94rem; margin-bottom:26px}
.pin-inputs{display:flex; gap:11px; justify-content:center}
.pin-inputs input{
  width:56px; height:64px; text-align:center; font-size:1.6rem; font-weight:800;
  border:1.5px solid var(--linea); border-radius:13px;
}
.pin-inputs input:focus{outline:none; border-color:var(--verde); box-shadow:0 0 0 4px rgba(0,153,0,.1)}

/* --- Panel del socio ------------------------------------------------ */
.panel-socio{background:var(--fondo-2); min-height:calc(100vh - 74px); padding:40px 0}
.panel-tabs{display:flex; gap:6px; border-bottom:1px solid var(--linea); margin-bottom:28px; overflow-x:auto}
.panel-tabs a{padding:13px 20px; font-weight:700; font-size:.94rem; color:var(--tinta-3); border-bottom:3px solid transparent; white-space:nowrap}
.panel-tabs a.activo{color:var(--violeta); border-bottom-color:var(--violeta)}

.kpi{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px}
.kpi .r{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-3)}
.kpi .v{font-size:1.85rem;font-weight:900;letter-spacing:-.02em;margin-top:6px}

.tabla{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radio); overflow:hidden}
.tabla th{background:var(--fondo-2); padding:13px 15px; text-align:left; font-size:.79rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-2)}
.tabla td{padding:14px 15px; border-top:1px solid var(--linea); font-size:.92rem}
.tabla tbody tr:hover{background:var(--fondo-2)}
.chip{display:inline-block; padding:4px 11px; border-radius:999px; font-size:.75rem; font-weight:800}
.chip-ok{background:var(--verde-cl);color:var(--verde-osc)}
.chip-pend{background:var(--naranja-cl);color:var(--naranja-osc)}
.chip-info{background:var(--violeta-cl);color:var(--violeta-osc)}
.chip-off{background:#eef0f1;color:var(--tinta-3)}

/* =====================================================================
   CATÁLOGO · componentes de e-commerce
   ===================================================================== */

/* --- Hero compacto para portada de tienda ---------------------------- */
.hero--compacto{padding:clamp(34px,5vw,58px) 0 clamp(28px,4vw,42px)}

/* --- Encabezado de sección con acción a la derecha ------------------- */
.titulo-seccion{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:28px;
  padding-bottom:16px; border-bottom:2px solid var(--linea); position:relative;
}
.titulo-seccion::after{
  content:''; position:absolute; left:0; bottom:-2px; width:74px; height:2px;
  background:var(--tri);
}
.titulo-seccion h2{margin:0}

/* --- Buscador del hero ---------------------------------------------- */
.buscador{
  display:flex; gap:8px; background:#fff; padding:8px; border-radius:999px;
  box-shadow:var(--sombra-lg); max-width:560px; border:1px solid var(--linea);
}
.buscador input{
  flex:1; border:0; padding:12px 18px; font-size:1rem; font-family:inherit;
  background:transparent; color:var(--tinta); min-width:0;
}
.buscador input:focus{outline:none}
.buscador .btn{padding:13px 26px}

/* --- Rejilla de categorías ------------------------------------------- */
/* Tira horizontal, como la barra de rubros de cualquier tienda: en grilla
   ocupaba media pantalla y empujaba los productos abajo de todo. */
.categorias{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:4px 0 12px; margin-bottom:4px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.categorias::-webkit-scrollbar{height:6px}
.categorias::-webkit-scrollbar-thumb{background:var(--linea); border-radius:3px}
.categorias::-webkit-scrollbar-thumb:hover{background:var(--tinta-3)}

.categoria{
  flex:0 0 auto; scroll-snap-align:start; min-width:132px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:14px 16px; background:#fff; border:1px solid var(--linea);
  border-radius:var(--radio); text-decoration:none; color:var(--tinta);
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  text-align:center; position:relative; overflow:hidden;
}
.categoria::after{
  content:''; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--tri); transform:scaleX(0); transition:transform var(--trans);
}
.categoria:hover{transform:translateY(-4px); box-shadow:var(--sombra-lg); color:var(--tinta); border-color:transparent}
.categoria:hover::after{transform:scaleX(1)}
.categoria__ic{font-size:1.5rem; line-height:1}
.categoria__nom{font-weight:700; font-size:.84rem; line-height:1.25}
.categoria__n{font-size:.72rem; color:var(--tinta-3)}

/* --- Barra de filtros del catálogo ----------------------------------- */
.catalogo{display:grid; grid-template-columns:236px 1fr; gap:32px; align-items:start}
/* Sin esto un hijo de la grilla no baja de su contenido (min-width:auto) y
   la tira de rubros, en vez de recortarse, estira la página a lo ancho. */
.catalogo > *{min-width:0}
.filtros-lat{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:20px; position:sticky; top:96px;
}
.filtros-lat h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tinta-3); margin:0 0 12px}
.filtros-lat h3+h3{margin-top:24px}
.filtro-lista{display:flex; flex-direction:column; gap:2px}
.filtro-lista a{
  display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:9px;
  font-size:.9rem; color:var(--tinta-2); font-weight:600;
}
.filtro-lista a:hover{background:var(--fondo-2); color:var(--tinta)}
.filtro-lista a.activo{background:var(--violeta-cl); color:var(--violeta-osc)}
.filtro-lista .n{margin-left:auto; font-size:.78rem; color:var(--tinta-3); font-weight:600}

/* El botón y el desplegable solo existen en pantalla chica */
.filtros-abrir{display:none}
.filtros-nota{border-top:1px solid var(--linea); margin-top:22px; padding-top:16px}
.filtros-nota p{margin:0}

.catalogo__barra{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:22px;
}
.catalogo__conteo{font-size:.92rem; color:var(--tinta-2)}
.catalogo__conteo b{color:var(--tinta)}

/* --- Tarjeta de producto · formato placa ------------------------------- */
/*  Imagen cuadrada como las placas que ya se usan en redes, con el avance
    superpuesto abajo. La foto es lo que vende: se le da todo el ancho.   */
.prod{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-lg);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.prod:hover{transform:translateY(-6px); box-shadow:var(--sombra-lg); border-color:transparent}

.prod__img{
  aspect-ratio:1/1; background:var(--fondo-2); position:relative; overflow:hidden;
  display:grid; place-items:center;
}
/* Precarga tipo Facebook: una franja de brillo recorre el lugar de la
   foto mientras baja. Al cargar, la imagen aparece con un fundido y el
   brillo se apaga. Así el listado no “parpadea” con huecos grises. */
.prod__img::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,
    var(--fondo-2) 30%, rgba(255,255,255,.75) 50%, var(--fondo-2) 70%);
  background-size:220% 100%;
  animation:cargando 1.25s ease-in-out infinite;
}
.prod__img.cargada::before{opacity:0; animation:none; transition:opacity .4s ease}
.prod__img--emoji::before{display:none}   /* las de emoji no precargan nada */

.prod__img img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.prod__img.cargada img{opacity:1}
.prod:hover .prod__img img{transform:scale(1.05)}
.prod__img .sinfoto{
  position:relative; z-index:1;
  font-size:3.4rem; opacity:.3;
  background:linear-gradient(140deg,var(--fondo-2),#fff);
  width:100%; height:100%; display:grid; place-items:center;
}

@keyframes cargando{
  0%   {background-position:160% 0}
  100% {background-position:-160% 0}
}

/* Avance superpuesto sobre la foto, con degradado para que se lea */
.prod__sobre{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:34px 14px 12px;
  background:linear-gradient(to top,rgba(10,14,18,.86) 12%,rgba(10,14,18,.45) 55%,transparent);
  color:#fff;
}
.prod__barra{height:5px; background:rgba(255,255,255,.28); border-radius:999px; overflow:hidden; margin-bottom:7px}
.prod__barra i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--naranja),var(--verde));
  transition:width 1.1s cubic-bezier(.4,0,.2,1);
}
.prod__avance-txt{display:flex; justify-content:space-between; gap:10px; font-size:.79rem; font-weight:600}
.prod__avance-txt b{font-weight:800}

.prod__etiquetas{position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; z-index:2}
.prod__etiquetas--der{left:auto; right:12px; align-items:flex-end}
.pill{
  padding:5px 11px; border-radius:999px; font-size:.71rem; font-weight:800;
  letter-spacing:.02em; white-space:nowrap;
  box-shadow:0 2px 8px rgba(10,14,18,.14);
}
.pill-cat{background:rgba(255,255,255,.96); color:var(--violeta)}
.pill-desc{background:var(--verde); color:#fff}
.pill-cierra{background:var(--naranja); color:#fff}
.pill-venta{background:var(--violeta); color:#fff}
.pill-servicio{background:var(--tinta); color:#fff}
.pill-cerrada{background:rgba(255,255,255,.96); color:var(--tinta-3)}
.pill-urgente{background:#dc3545; color:#fff; animation:latido 1.8s infinite}

.prod__cuerpo{padding:18px 20px 20px; flex:1; display:flex; flex-direction:column}
.prod__marca{font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:4px}
.prod__tit{font-size:1.06rem; font-weight:800; line-height:1.3; margin:0 0 7px; letter-spacing:-.015em}
.prod__tit a{color:var(--tinta)}
.prod__tit a:hover{color:var(--violeta)}
.prod__desc{font-size:.87rem; color:var(--tinta-2); margin:0 0 16px; flex:1; line-height:1.55}

.prod__precio{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid var(--linea); margin-bottom:14px;
}
.precio-tachado{font-size:.85rem; color:var(--tinta-3); text-decoration:line-through}
.precio-final{font-size:1.55rem; font-weight:900; color:var(--verde-osc); letter-spacing:-.03em; line-height:1}
.precio-unidad{font-size:.79rem; color:var(--tinta-3)}
.precio-consultar{font-size:1.02rem; font-weight:800; color:var(--violeta)}

.prod .btn{position:relative; overflow:hidden}
.prod .btn::after{
  content:''; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg); transition:left .55s ease;
}
.prod:hover .btn::after{left:120%}

.prod__pie{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-top:10px; font-size:.79rem; color:var(--tinta-3);
}
.prod__pie .punto{width:6px;height:6px;border-radius:50%;background:var(--verde);animation:latido 2s infinite}

/* --- Ficha de producto ------------------------------------------------- */
.ficha{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start}
.ficha__galeria img{width:100%; height:auto; border-radius:var(--radio-lg); display:block}
.ficha__galeria .sinfoto{
  aspect-ratio:4/3; background:var(--fondo-2); border-radius:var(--radio-lg);
  display:grid; place-items:center; font-size:5rem; opacity:.25;
}
.ficha__panel{position:sticky; top:96px}

.ficha__specs{list-style:none; margin:22px 0 0; padding:0; border-top:1px solid var(--linea)}
.ficha__specs li{display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--linea); font-size:.92rem}
.ficha__specs .k{color:var(--tinta-3); min-width:150px; font-weight:600}
.ficha__specs .v{color:var(--tinta); font-weight:600}

.caja-compra{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio-lg);
  padding:26px; box-shadow:var(--sombra-lg); position:relative; overflow:hidden;
}
.caja-compra::before{content:''; position:absolute; inset:-1px -1px auto; height:4px; background:var(--tri)}

/* --- Franja de confianza ------------------------------------------------ */
.confianza{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.confianza div{display:flex; gap:12px; align-items:flex-start}
.confianza .ic{font-size:1.5rem; line-height:1}
.confianza b{display:block; font-size:.92rem; margin-bottom:2px}
.confianza span{font-size:.83rem; color:var(--tinta-2)}

/* --- Cinta de combustible siempre disponible --------------------------- */
.cinta-comb{
  background:linear-gradient(100deg,var(--naranja),var(--verde));
  color:#fff; border-radius:var(--radio-lg); padding:clamp(26px,4vw,40px);
  display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center;
}
.cinta-comb h2{color:#fff; margin:0 0 8px; font-size:clamp(1.4rem,2.6vw,2rem)}
.cinta-comb p{color:rgba(255,255,255,.93); margin:0; font-size:1rem}
.cinta-comb__precio{text-align:right; white-space:nowrap}
.cinta-comb__precio .n{font-size:clamp(2rem,4.5vw,3rem); font-weight:900; line-height:1; letter-spacing:-.03em}
.cinta-comb__precio .u{font-size:.9rem; opacity:.9}

@media (max-width:991px){
  .catalogo{grid-template-columns:1fr; gap:20px}
  .ficha{grid-template-columns:1fr; gap:30px}
  .ficha__panel{position:static}
  .confianza{grid-template-columns:repeat(2,1fr)}

  /* --- Filtros del catálogo en pantalla chica ------------------------
     En columna medían 1019px: había que pasar dos pantallas de links
     para llegar al primer grupo de compra. Ahora los rubros son una
     tira horizontal y el resto queda detrás de "Más filtros".        */
  .filtros-lat{
    position:static; background:none; border:0; padding:0;
    border-bottom:1px solid var(--linea); padding-bottom:16px;
  }
  .filtros-lat h3{margin-bottom:9px}
  .filtros-lat h3+h3{margin-top:18px}

  .filtro-lista--chips{
    flex-direction:row; flex-wrap:nowrap; gap:8px;
    overflow-x:auto; scroll-snap-type:x proximity;
    margin-left:-20px; margin-right:-20px;
    padding:2px 20px 10px;
    scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  }
  .filtro-lista--chips::-webkit-scrollbar{height:5px}
  .filtro-lista--chips::-webkit-scrollbar-thumb{background:var(--linea); border-radius:3px}
  .filtro-lista--chips a{
    flex:0 0 auto; scroll-snap-align:start; white-space:nowrap;
    border:1.5px solid var(--linea); border-radius:999px;
    padding:8px 14px; background:#fff;
  }
  .filtro-lista--chips a.activo{
    border-color:var(--violeta); background:var(--violeta-cl); color:var(--violeta-osc);
  }
  .filtro-lista--chips .n{margin-left:5px}

  .filtros-abrir{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; margin-top:14px; padding:11px 15px; background:#fff;
    border:1.5px solid var(--linea); border-radius:11px;
    font-family:inherit; font-size:.9rem; font-weight:700; color:var(--tinta-2);
    cursor:pointer;
  }
  .filtros-abrir b{color:var(--violeta)}
  .filtros-abrir__flecha{
    width:8px; height:8px; border-right:2px solid currentColor;
    border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);
    transition:transform var(--trans);
  }
  .filtros-abrir[aria-expanded="true"]{border-color:var(--violeta); color:var(--violeta-osc)}
  .filtros-abrir[aria-expanded="true"] .filtros-abrir__flecha{transform:rotate(-135deg) translate(-2px,-2px)}

  .filtros-mas{display:none; padding-top:6px}
  .filtros-mas.abierto{display:block}
  .filtros-nota{margin-top:16px; padding-top:14px}
}
@media (max-width:767px){
  .cinta-comb{grid-template-columns:1fr; text-align:center}
  .cinta-comb__precio{text-align:center}
  .confianza{grid-template-columns:1fr}

  /* El encabezado con el enlace al costado se apilaba y comía 171px
     antes del primer producto. En el teléfono va todo en una línea. */
  .titulo-seccion{
    flex-wrap:nowrap; align-items:center; gap:12px;
    margin-bottom:20px; padding-bottom:12px;
  }
  .titulo-seccion .etiqueta{display:none}
  .titulo-seccion h2{font-size:1.45rem}
  .titulo-seccion .btn{
    flex:0 0 auto; padding:7px 13px; font-size:.82rem; border-width:1.5px;
  }

  /* La tira se estira hasta el borde de la pantalla: así el rubro que queda
     cortado a la derecha avisa solo que hay más para el costado. Con los
     chips anchos entraban dos y parecía que eran los únicos. */
  .categorias{
    margin-left:-20px; margin-right:-20px;
    padding-left:20px; padding-right:20px;
    gap:9px;
  }
  /* Ancho fijo: con min-width los nombres largos ("Combustible y
     lubricantes") estiraban el chip y entraban dos por pantalla. */
  /* min-width le gana a width, así que hay que bajarlo también */
  .categoria{min-width:0; width:104px; flex:0 0 104px; padding:11px 8px; gap:5px}
  .categoria__ic{font-size:1.35rem}
  .categoria__nom{
    font-size:.78rem; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; overflow-wrap:anywhere;
  }
  .categoria__n{font-size:.69rem}
}

/* --- Migas de pan --------------------------------------------------- */
.migas{padding:18px 0 0}
.migas ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; font-size:.85rem}
.migas li{display:flex; align-items:center; gap:6px; color:var(--tinta-3)}
.migas li+li::before{content:'›'; color:var(--tinta-3)}
.migas a{color:var(--tinta-3)}
.migas a:hover{color:var(--violeta)}
.migas [aria-current]{color:var(--tinta-2); font-weight:600}

/* --- Enlace de salto (accesibilidad) -------------------------------- */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--violeta); color:#fff; padding:12px 20px;
  border-radius:0 0 10px 0; font-weight:700; font-size:.9rem;
}
.saltar:focus{left:0; color:#fff}

/* --- Animación de entrada ------------------------------------------ */
/* Solo se oculta para animar si hay JS que después la revela; sin JS
   (o si el observer falla) el contenido queda visible, nunca en blanco. */
.js .revelar{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.revelar.visible{opacity:1; transform:none}

/* --- Responsive ----------------------------------------------------- */
@media (max-width:991px){
  .hero__grid{grid-template-columns:1fr; gap:40px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .metricas__grid{grid-template-columns:repeat(2,1fr); gap:30px}
  .pie__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .hamburguesa{display:block}
  .nav{
    position:fixed; inset:74px 0 auto; background:#fff; flex-direction:column;
    align-items:stretch; padding:18px; gap:2px; border-bottom:1px solid var(--linea);
    box-shadow:var(--sombra-lg); display:none;
  }
  .nav.abierto{display:flex}
  .nav__acciones{flex-direction:column; align-items:stretch; margin:10px 0 0}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .seccion{padding:48px 0}
  .hero__ctas .btn{width:100%}
  .pie__grid{grid-template-columns:1fr; gap:28px}
  .pin-inputs input{width:48px;height:56px;font-size:1.35rem}
}

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