/* =====================================================================
   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}
/* Los enlaces del menú, PERO NO los botones: .nav a le ganaba por
   especificidad a .btn-verde y a .btn-violeta, así que "Registrate" y
   "Salir" quedaban con la letra gris del menú sobre su fondo de color; y
   al pasar el mouse el :hover les pintaba el fondo de gris claro.
   Con :not(.btn) cada botón conserva lo suyo y la especificidad no cambia. */
.nav a:not(.btn){
  padding:9px 15px; border-radius:9px; font-weight:600; font-size:.94rem;
  color:var(--tinta-2); transition:all var(--trans);
}
.nav a:not(.btn):hover,.nav a:not(.btn).activo{background:var(--fondo-2); color:var(--tinta)}
.nav__acciones{display:flex; align-items:center; gap:10px; margin-left:14px}
.cta-cel{display:none}   /* solo existe en pantalla chica */
.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}

/* Variante para elegir Persona/Empresa en el registro: tiene que quedar
   clarísimo cuál está elegida, con tilde y todo. */
.rango--tipo button{padding:14px 0; font-size:.95rem; position:relative}
.rango--tipo button:not(.activo){background:var(--fondo-2); color:var(--tinta-3)}
.rango--tipo button:not(.activo):hover{background:#fff; color:var(--tinta-2)}
.rango--tipo button.activo{
  box-shadow:0 4px 14px rgba(0,153,0,.3);
  transform:scale(1.02);
}
.rango--tipo button.activo::before{content:'✓'; margin-right:8px; font-weight:900}

.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 cliente ------------------------------------------------ */
.panel-cliente{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}

/* --- Cartel "estás viendo como otro perfil" ------------------------- */
.viendo-como{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:2000; background:#161b1f; color:#fff; border-radius:999px;
  padding:10px 18px; font-size:.88rem; box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex; gap:14px; align-items:center; white-space:nowrap; max-width:94vw;
}
.viendo-como a{
  color:#7bd97b; font-weight:800; text-decoration:none;
  border:1.5px solid rgba(123,217,123,.5); border-radius:999px; padding:4px 12px;
}
.viendo-como a:hover{background:rgba(123,217,123,.15); color:#9df09d}

/* --- 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){
  /* Las tres líneas van a la IZQUIERDA, donde el pulgar las espera:
     hamburguesa · logo · … · botones de acción */
  .hamburguesa{display:block; margin-left:0; order:-1; padding-left:0}
  .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}
  /* Los botones de acción ya están fijos en la barra: en el menú
     desplegable solo quedan los enlaces de navegación. */
  .nav .nav__acciones{display:none}

  /* Ingresar / Sumate siempre a la vista en la barra (que además es
     sticky, así que quedan a mano en todo el scroll) */
  .cabecera__int{gap:12px}
  .cta-cel{display:flex; gap:7px; margin-left:auto}
  .cta-cel .btn{padding:9px 12px; font-size:.8rem; white-space:nowrap; border-width:1.5px}

  .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}
}

/* En pantallas bien chicas el nombre junto al logo no entra con los dos
   botones: queda el isotipo solo (la marca igual está en toda la página). */
@media (max-width:560px){
  .marca span{display:none}
  .marca img{width:42px; height:42px}
}
@media (max-width:360px){
  .cta-cel .btn{padding:8px 9px; font-size:.75rem}
}

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


/* =====================================================================
   TEXTO CON FORMATO (lo que se escribe en el editor del panel)
   Las mismas reglas que usa el editor, para que lo que se ve al escribir
   sea lo que se publica.
   ===================================================================== */
.texto-rico{ line-height:1.7 }
.texto-rico > *:first-child{ margin-top:0 }
.texto-rico > *:last-child{ margin-bottom:0 }
.texto-rico p{ margin:0 0 1em }
.texto-rico h1{ font-size:1.7em; font-weight:800; margin:1.2em 0 .4em; line-height:1.2 }
.texto-rico h2{ font-size:1.4em; font-weight:800; margin:1.2em 0 .4em; line-height:1.25 }
.texto-rico h3{ font-size:1.17em; font-weight:700; margin:1.1em 0 .35em }
.texto-rico h4{ font-size:1.03em; font-weight:700; margin:1em 0 .3em }
.texto-rico ul,.texto-rico ol{ margin:0 0 1em; padding-left:1.5em }
.texto-rico li{ margin:.25em 0 }
.texto-rico blockquote{
  margin:1em 0; padding:.7em 0 .7em 1.1em;
  border-left:3px solid #7030A0; background:#faf8fc; color:#4a545c;
}
.texto-rico img{ max-width:100%; height:auto; border-radius:10px; margin:.4em 0 }
.texto-rico figure{ margin:1em 0 }
.texto-rico figcaption{ font-size:.88em; color:#7c878f; margin-top:.35em }
.texto-rico hr{ border:0; border-top:2px solid #e7eaec; margin:1.4em 0 }
.texto-rico a{ color:#7030A0; text-decoration:underline }
.texto-rico code{
  background:#f2f3f5; padding:.12em .35em; border-radius:4px;
  font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.92em;
}
.texto-rico pre{
  background:#f7f8fa; border:1px solid #e7eaec; border-radius:8px;
  padding:12px 14px; overflow-x:auto;
}
/* las tablas no deben romper el ancho en el celular */
.texto-rico table{
  border-collapse:collapse; width:100%; margin:1em 0; font-size:.95em;
  display:block; overflow-x:auto;
}
.texto-rico th,.texto-rico td{ border:1px solid #e7eaec; padding:8px 10px; text-align:left }
.texto-rico th{ background:#f7f8fa; font-weight:700 }

/* =====================================================================
   PRODUCTOS DE UNA COMPRA GRUPAL (ficha pública)
   ===================================================================== */
.prodlista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.prodlista__it{
  display:flex; gap:13px; align-items:center;
  padding:11px 13px; background:#fff;
  border:1px solid #e7eaec; border-radius:11px;
}
/* Va con .prodlista__it adelante a propósito: esta lista vive dentro de
   .ficha__galeria, y ahí manda ".ficha__galeria img{width:100%}", que por
   especificidad le ganaba a la clase sola y estiraba la miniatura a todo
   el ancho de la ficha. */
.prodlista__it .prodlista__foto{
  flex:none; width:64px; height:64px; border-radius:9px;
  object-fit:cover; background:#f4f6f8; display:block;
}
.prodlista__foto--vacia{ border:1px dashed #e7eaec }
.prodlista__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto }
.prodlista__nombre{ font-size:1rem; font-weight:800; color:#161b1f }
.prodlista__det{ font-size:.86rem; color:#5a656d }
.prodlista__pide{ font-size:.82rem; color:#007a00; font-weight:700 }
@media (max-width:479px){
  .prodlista__it .prodlista__foto{ width:52px; height:52px }
  .prodlista__nombre{ font-size:.94rem }
}

/* ---------------------------------------------------------------------
   EL PRECIO AL PÚBLICO (CompraPrecio + publico/_precio_producto)
   El de ahora grande y verde; si corre un descuento, el de antes tachado
   al lado y una pastilla con el porcentaje. Sin precio no se dibuja nada.
   En la lista va dentro del texto del producto, debajo de cómo se pide,
   así nunca le saca lugar al nombre ni al contador; en la cabecera de la
   ficha (.pp--grande) va más grande.
   --------------------------------------------------------------------- */
.prodlista__precio{ margin-top:6px }
.pp__linea{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; row-gap:2px }
.pp__desde{
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-3, #7c878f); align-self:center;
}
.pp__antes{
  font-size:.82rem; color:var(--tinta-3, #7c878f); font-weight:600;
  text-decoration:line-through; text-decoration-thickness:1.5px; white-space:nowrap;
}
.pp__ahora{
  font-size:1.24rem; font-weight:900; color:var(--verde-osc, #007a00);
  letter-spacing:-.02em; line-height:1.1; white-space:nowrap;
}
.pp__uni{ font-size:.74rem; color:var(--tinta-3, #7c878f); font-weight:600 }
.pp__sub{ display:flex; align-items:center; gap:6px; margin-top:4px; flex-wrap:wrap }
.pp__dto{
  font-size:.7rem; font-weight:800; line-height:1.4; white-space:nowrap;
  color:var(--naranja-osc, #e06f00); background:var(--naranja-cl, #fff2e3);
  border-radius:99px; padding:2px 8px;
}
.pp__nota{ font-size:.72rem; color:var(--tinta-3, #7c878f) }
.pp__ref{ font-size:.78rem; color:var(--tinta-3, #7c878f); font-weight:600 }
.pp__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* la cabecera de la ficha */
.pp--grande .pp__linea{ gap:9px }
.pp--grande .pp__ahora{ font-size:2.1rem; letter-spacing:-.03em }
.pp--grande .pp__antes{ font-size:1rem }
.pp--grande .pp__uni{ font-size:.85rem }
.pp--grande .pp__desde{ font-size:.78rem }
.pp--grande .pp__dto{ font-size:.78rem; padding:3px 10px }
.pp--grande .pp__nota{ font-size:.8rem }


/* =====================================================================
   PASE DE FOTOS DE LA FICHA
   Anda sin JavaScript: es una fila con scroll por ajuste y los puntos
   son enlaces a cada foto. El JS le suma el paso solo y las flechas.
   ===================================================================== */
.pase{position:relative; border-radius:var(--radio-lg); overflow:hidden; background:var(--fondo-2)}
.pase__pista{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pase__pista::-webkit-scrollbar{display:none}
/* start y no center: las fotos ocupan el 100%, y con start el punto de
   ajuste cae justo en un múltiplo del ancho, que es a donde apunta el JS */
.pase__foto{flex:0 0 100%; margin:0; scroll-snap-align:start}
.ficha__galeria .pase__foto img{
  width:100%; height:auto; display:block; border-radius:0;
}

/* Flechas: solo donde hay con qué apuntarlas */
.pase__flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:#161b1f;
  font-size:1.5rem; line-height:1; cursor:pointer; opacity:0;
  box-shadow:0 2px 10px rgba(0,0,0,.18); transition:opacity .18s, background .18s;
  display:grid; place-items:center; padding:0 0 3px;
}
.pase:hover .pase__flecha, .pase__flecha:focus-visible{opacity:1}
.pase__flecha:hover{background:#fff}
.pase__flecha--izq{left:12px}
.pase__flecha--der{right:12px}
@media (hover:none){ .pase__flecha{display:none} }   /* en el celular se arrastra */

.pase__puntos{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; justify-content:center; gap:7px;
}
.pase__punto{
  width:9px; height:9px; border-radius:50%; display:block;
  background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background .18s, width .18s;
}
.pase__punto.es-activo{background:#fff; width:22px; border-radius:99px}

@media (prefers-reduced-motion:reduce){
  .pase__pista{scroll-behavior:auto}
}

/* =====================================================================
   ESCALERA DE DESCUENTO DEL GRUPO
   Lo que hace que un socio invite a su vecino: se ve en cuál está el
   grupo hoy y cuánto falta para el próximo escalón.
   ===================================================================== */
.escalera{
  margin:20px 0 0; padding:14px 15px;
  background:var(--fondo-2, #f4f6f8); border-radius:12px;
}
.escalera__cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px }
.escalera__rot{
  font-size:.71rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-3, #8b959c);
}
.escalera__hoy{
  font-size:.78rem; font-weight:800; color:#fff; background:var(--verde, #009900);
  border-radius:99px; padding:3px 10px;
}
.escalera__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px }
.escalera__it{
  display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:10px;
  padding:7px 10px; border-radius:9px; background:#fff;
  border:1px solid transparent; transition:border-color .15s, background .15s;
}
.escalera__n{
  width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  background:#e9edf1; color:var(--tinta-2, #4a545c); font-size:.74rem; font-weight:800;
}
.escalera__rango{ font-size:.86rem; color:var(--tinta-2, #4a545c) }
.escalera__dto{ font-size:.95rem; font-weight:800; color:var(--tinta-3, #8b959c) }

/* La escala en la que está el grupo hoy */
.escalera__it.es-activa{ border-color:var(--verde, #009900); background:#f2fbf2 }
.escalera__it.es-activa .escalera__n{ background:var(--verde, #009900); color:#fff }
.escalera__it.es-activa .escalera__rango{ color:var(--tinta, #161b1f); font-weight:700 }
.escalera__it.es-activa .escalera__dto{ color:var(--verde-osc, #007a00) }

.escalera__falta{
  margin:10px 0 0; font-size:.85rem; line-height:1.5;
  color:var(--naranja-osc, #c25e00);
}
.escalera__falta b{ color:inherit }

/* =====================================================================
   CONTADOR POR PRODUCTO
   Cada producto se pide con su propio contador: arranca en su mínimo y
   sube de a su incremento. Botones grandes, que esto se usa con guantes
   y en el celular.
   ===================================================================== */
.cant{
  display:flex; align-items:center; gap:6px; flex:none;
  background:#fff; border:1.5px solid var(--linea, #e7eaec); border-radius:11px;
  padding:4px 6px; transition:border-color .15s, box-shadow .15s;
}
.cant:focus-within{ border-color:var(--verde, #009900); box-shadow:0 0 0 3px rgba(0,153,0,.12) }
.cant.tiene{ border-color:var(--verde, #009900); background:#f4fbf4 }

.cant__b{
  width:34px; height:34px; flex:none; border:0; border-radius:8px; cursor:pointer;
  background:var(--fondo-2, #f4f6f8); color:var(--tinta, #161b1f);
  font-size:1.25rem; line-height:1; font-weight:700;
  display:grid; place-items:center; transition:background .15s, color .15s;
}
.cant__b:hover{ background:var(--verde, #009900); color:#fff }
.cant__b:active{ transform:scale(.94) }

.cant__n{
  width:62px; border:0; background:transparent; text-align:center;
  font-size:1.02rem; font-weight:800; color:var(--tinta, #161b1f);
  padding:4px 0; -moz-appearance:textfield;
}
.cant__n::-webkit-outer-spin-button, .cant__n::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.cant__n:focus{ outline:none }
.cant__uni{
  font-size:.76rem; color:var(--tinta-3, #8b959c); font-weight:600;
  padding-right:4px; min-width:42px;
}

@media (max-width:639px){
  .prodlista__it{ flex-wrap:wrap }
  .cant{ width:100%; justify-content:space-between; margin-top:4px }
  .cant__n{ flex:1 }
}

/* =====================================================================
   RESUMEN DEL PEDIDO
   Lo que el socio lleva sumado, que es lo que aporta al grupo.
   ===================================================================== */
.pedido{
  margin-bottom:16px; padding:14px 15px; border-radius:12px;
  background:var(--fondo-2, #f4f6f8);
}
.pedido__rot{
  font-size:.71rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-3, #8b959c); margin-bottom:8px;
}
.pedido__lista{ list-style:none; margin:0; padding:0 }
.pedido__lista li{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.89rem; padding:4px 0; color:var(--tinta-2, #4a545c);
}
.pedido__lista li b{ color:var(--tinta, #161b1f); white-space:nowrap }
.pedido__vacio{ font-size:.85rem; color:var(--tinta-3, #8b959c); line-height:1.5 }

.pedido__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:9px; padding-top:10px; border-top:1px dashed #d7dde2;
  font-size:.86rem; color:var(--tinta-2, #4a545c);
}
.pedido__total b{
  font-size:1.35rem; font-weight:900; color:var(--verde-osc, #007a00);
  letter-spacing:-.02em;
}

/* =====================================================================
   QUIÉN SE ANOTA
   Para anotarse alcanza el celular. Si ya es socio no se le pide nada
   más; si es nuevo aparece el resto y queda registrado en el mismo paso.
   ===================================================================== */
.quiensos{
  margin-bottom:16px; padding:14px 15px; border-radius:12px;
  background:var(--fondo-2, #f4f6f8);
}
.quiensos .campo:last-child{ margin-bottom:0 }

.quiensos__estado{
  display:flex; align-items:flex-start; gap:8px;
  margin:-4px 0 12px; padding:9px 12px; border-radius:9px;
  font-size:.86rem; line-height:1.45; font-weight:600;
  background:#eef0f3; color:var(--tinta-2, #4a545c);
}
.quiensos__estado::before{ content:'…'; font-weight:800 }
.quiensos__estado.es-buscando::before{ content:'⏳' }
.quiensos__estado.es-si{ background:#e8f6e8; color:#007a00 }
.quiensos__estado.es-si::before{ content:'✓'; font-weight:900 }
.quiensos__estado.es-nuevo{ background:var(--naranja-cl, #fff2e3); color:var(--naranja-osc, #c25e00) }
.quiensos__estado.es-nuevo::before{ content:'👋' }

/* El resto del alta entra con un despliegue corto: se nota que apareció
   sin que la página pegue un salto. */
.quiensos__alta{ animation:altaEntra .22s ease both }
@keyframes altaEntra{
  from{ opacity:0; transform:translateY(-6px) }
  to  { opacity:1; transform:none }
}
.campo__opt{ color:var(--tinta-3, #8b959c); font-weight:400 }

@media (prefers-reduced-motion:reduce){
  .quiensos__alta{ animation:none }
}

/* =====================================================================
   MIS COMPRAS
   Una tarjeta por compra con el detalle por producto. Mientras la compra
   siga abierta se pueden mover las cantidades o sacar un producto; el
   botón de guardar aparece recién cuando algo cambió.
   ===================================================================== */
.micompras{ display:flex; flex-direction:column; gap:14px }
.micompra{
  background:#fff; border:1px solid var(--linea, #e7eaec);
  border-radius:var(--radio-lg, 16px); padding:16px 17px;
  box-shadow:var(--sombra, 0 1px 2px rgba(22,27,31,.05));
}
.micompra__cab{ display:flex; gap:14px; align-items:flex-start }
.micompra__foto{
  width:72px; height:72px; object-fit:cover; border-radius:12px; flex:0 0 72px;
}
.micompra__tit{ flex:1; min-width:0 }
.micompra__tit a{ font-weight:800; font-size:1.02rem; text-decoration:none }
.micompra__total{ font-size:.9rem; color:var(--tinta-2, #5a656d); margin-top:5px }
.micompra__total b{ color:var(--tinta, #161b1f) }
.micompra__chips{ margin-top:9px; display:flex; gap:8px; flex-wrap:wrap }

.micompra__lineas{
  list-style:none; margin:14px 0 0; padding:12px 0 0;
  border-top:1px dashed var(--linea, #e7eaec);
  display:flex; flex-direction:column; gap:8px;
}
.milinea{
  display:flex; align-items:center; gap:12px;
  padding:7px 0; transition:opacity .15s;
}
.milinea__txt{ flex:1; min-width:0 }
.milinea__txt b{ display:block; font-size:.94rem; color:var(--tinta, #161b1f) }
.milinea__txt span{ display:block; font-size:.82rem; color:var(--tinta-3, #8b959c) }
.milinea__fijo{ font-size:.92rem; font-weight:700; color:var(--tinta-2, #5a656d) }

/* Puesto en cero: se ve que va a salir, sin sacarlo todavía de la lista */
.milinea.es-baja{ opacity:.5 }
.milinea.es-baja .milinea__txt b{ text-decoration:line-through }

.milinea__x{
  width:32px; height:32px; flex:none; border:0; border-radius:9px; cursor:pointer;
  background:transparent; color:var(--tinta-3, #8b959c); font-size:1.3rem; line-height:1;
}
.milinea__x:hover{ background:#fdeaea; color:#b02a37 }

.milinea__baja{ color:#b02a37 !important; font-weight:600 }

/* Lo que sale cada linea cuando la compra ya cerro con precio */
.milinea__plata{ text-align:right; white-space:nowrap; line-height:1.3 }
.milinea__plata .milinea__unit{
  display:block; font-size:.76rem; color:var(--tinta-3, #8b959c); font-weight:600;
}
.milinea__plata b{ font-size:.95rem; color:var(--tinta, #161b1f); font-weight:800 }
.milinea__plata i{ font-size:.8rem; color:var(--tinta-3, #8b959c) }

/* =====================================================================
   A DEPOSITAR
   Una caja por moneda: lo de dolares a la cuenta en dolares y lo de
   pesos a la de pesos. El numero de cuenta se copia de un toque porque
   el socio lo va a tipear en la app del banco.
   ===================================================================== */
.cobro{
  margin-top:14px; padding:14px 15px 13px; border-radius:14px;
  background:var(--verde-cl, #e8f6e8); border:1px solid #c9e7c9;
}
.cobro__cab{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:11px;
}
.cobro__rot{
  font-size:.74rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--verde-osc, #007a00);
}
.cobro__dto{ font-size:.79rem; color:var(--tinta-2, #5a656d); font-weight:600 }
.cobro__caja{
  background:#fff; border-radius:11px; padding:11px 13px; margin-bottom:8px;
  box-shadow:0 1px 2px rgba(22,27,31,.05);
}
.cobro__caja:last-of-type{ margin-bottom:0 }
.cobro__monto{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.cobro__moneda{
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tinta-3, #8b959c);
}
.cobro__monto b{
  font-size:1.32rem; font-weight:900; letter-spacing:-.02em;
  color:var(--verde-osc, #007a00); white-space:nowrap;
}
.cobro__cta{
  margin-top:8px; padding-top:8px; border-top:1px dashed var(--linea, #e7eaec);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.cobro__ctaRot{ font-size:.8rem; color:var(--tinta-2, #5a656d); font-weight:600 }
.cobro__nro{
  font-size:.98rem; font-weight:800; color:var(--tinta, #161b1f); cursor:pointer;
  font-variant-numeric:tabular-nums; border-radius:7px; padding:3px 8px;
  background:#f4f6f8; display:inline-flex; align-items:center; gap:7px;
  transition:background .15s, color .15s;
}
.cobro__nro i{ font-style:normal; font-size:.86rem; color:var(--tinta-3, #8b959c) }
.cobro__nro:hover{ background:#e9eef2 }
.cobro__nro.es-copiado{ background:var(--verde, #009900); color:#fff }
.cobro__nro.es-copiado i::after{ content:' copiado' }
.cobro__nro.es-copiado i{ color:#fff }
/* Si el navegador no deja escribir en el portapapeles, el numero queda
   seleccionado: se le dice que lo copie el mismo */
.cobro__nro.es-nocopia{ background:#fff3cd }
.cobro__nro.es-nocopia i::after{ content:' copialo' }
.cobro__cta--falta{ font-size:.84rem; color:var(--tinta-2, #5a656d) }
.cobro__nota{ margin:9px 0 0; font-size:.79rem; color:var(--tinta-2, #5a656d); line-height:1.45 }

.micompra__pie{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--linea, #e7eaec);
  min-height:38px;
}
.micompra__aviso{ font-size:.86rem; color:var(--verde-osc, #007a00); font-weight:600 }
.micompra__aviso.es-mal{ color:#b02a37 }
.micompra__cerrada{ font-size:.85rem; color:var(--tinta-3, #8b959c) }
.micompra__guardar{ padding:9px 20px; font-size:.9rem }

@media (max-width:639px){
  .micompra__cab{ gap:11px }
  .micompra__foto{ width:56px; height:56px; flex-basis:56px }
  .milinea{ flex-wrap:wrap }
  .milinea__txt{ flex-basis:100% }
  .milinea__plata{ flex:1; text-align:left }
  .milinea__plata .milinea__unit{ display:inline; margin-right:7px }
  .cobro__monto b{ font-size:1.2rem }
  .milinea .cant{ flex:1 }
  .micompra__pie{ flex-direction:column; align-items:stretch }
  .micompra__guardar{ width:100% }
}

/* El atributo hidden tiene que ganarle a cualquier display propio: los
   .btn son inline-flex y se seguían viendo aunque estuvieran ocultos. */
[hidden]{ display:none !important }

/* --- Tacho: sacar todo el pedido de una compra ----------------------- */
.micompra__cab{ position:relative }
.micompra__tacho{
  flex:none; width:36px; height:36px; border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--tinta-3, #8b959c);
  display:grid; place-items:center; transition:background .15s, color .15s;
}
.micompra__tacho:hover{ background:#fdeaea; color:#b02a37 }
.micompra__tacho:active{ transform:scale(.94) }

/* --- Variante compacta, para el resumen de la cuenta ----------------- */
.micompras--resumen{ gap:10px; padding:4px 0 }
.micompra--chica{ padding:13px 14px; border-radius:12px }
.micompra--chica .micompra__tit a{ font-size:.95rem }
.micompra--chica .micompra__total{ font-size:.85rem }
.micompra--chica .micompra__lineas{ margin-top:11px; padding-top:10px; gap:6px }
.micompra--chica .milinea{ padding:4px 0; gap:9px }
.micompra--chica .milinea__txt b{ font-size:.89rem }
.micompra--chica .cant{ padding:2px 4px; gap:4px }
.micompra--chica .cant__b{ width:28px; height:28px; font-size:1.05rem }
.micompra--chica .cant__n{ width:48px; font-size:.94rem }
.micompra--chica .cant__uni{ min-width:0; font-size:.72rem }
.micompra--chica .micompra__guardar{ padding:7px 15px; font-size:.84rem }

/* En el resumen la caja es angosta: el contador baja solo */
@media (max-width:1099px){
  .micompra--chica .milinea{ flex-wrap:wrap }
  .micompra--chica .milinea__txt{ flex-basis:100% }
}

/* ---------- cargas del socio: cabecera con filtro ---------- */
/* El filtro va en la cabecera de la tarjeta y no arriba de todo: es de esa
   tabla y de ninguna otra cosa de la página. */
.cargas-cab{
  padding:16px 22px; border-bottom:1px solid var(--linea);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.cargas-filtro{display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap}
.cargas-filtro label{
  display:flex; flex-direction:column; gap:4px;
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tinta-3);
}
.cargas-filtro input[type=date]{
  border:1px solid var(--linea); border-radius:9px; padding:7px 10px;
  font:inherit; font-size:.85rem; color:var(--tinta); background:#fff;
}
.cargas-filtro input[type=date]:focus{outline:none; border-color:var(--violeta)}
.cargas-filtro .btn-sm{padding:8px 14px; font-size:.82rem}
.cargas-total td{border-top:2px solid var(--linea); background:#fafbfc}
@media (max-width:640px){
  .cargas-filtro{width:100%}
  .cargas-filtro label{flex:1 1 44%}
  .cargas-filtro input[type=date]{width:100%}
}