/* ===== Inicio que da confianza: franja de confianza, oferta de la semana, descuento por cantidad, cómo comprar,
   cuenta mayorista, opiniones, marcas y local (app.js: «Inicio que da confianza»). Va último. ===== */
.ini-x.vacio{display:none!important}
.estilo-may .ini-x{display:none!important}
html.es-mayorista #mayInvita{display:none}
.ix-tit{font-family:'Barlow Condensed','Roboto Condensed',sans-serif;font-size:clamp(24px,2.6vw,32px);font-weight:800;color:var(--azul);margin:0;line-height:1.1}
.ix-sub{color:var(--gris);margin:6px 0 0;font-size:15px}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:#1FA855;color:#fff;font-weight:600;font-size:14px;padding:11px 22px;border-radius:24px;transition:background .2s}
.btn-wa:hover{background:#178A45}
.btn-wa .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

/* oferta de la semana en el inicio */
#ofInicio{padding:22px 0 6px}
.oi-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
#ofInicio .of-hero-img{min-height:300px}
.oi-mas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}

/* descuento por cantidad */
#escalaInicio{padding:20px 0 6px}
.es-caja{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;background:linear-gradient(120deg,var(--azul) 0%,#1450C8 100%);color:#fff;border-radius:18px;padding:26px 30px;box-shadow:0 8px 26px rgba(8,42,116,.18)}
.es-pill,.mi-pill{display:inline-block;background:var(--rojo);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px}
.es-txt h2{font-family:'Barlow Condensed','Roboto Condensed',sans-serif;font-size:clamp(26px,3vw,38px);font-weight:800;margin:10px 0 8px;line-height:1.05}
.es-txt p{margin:0;font-size:15px;line-height:1.5;color:#DCE6FB}
.es-tabla{background:#fff;color:var(--texto);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.es-cab{font-size:13px;color:var(--gris);padding-bottom:6px;border-bottom:1px solid var(--linea)}
.es-f{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--linea)}
.es-c{font-weight:600}
.es-p{background:#FDECEB;color:var(--rojo);font-weight:800;font-size:13px;padding:3px 8px;border-radius:12px}
.es-u{font-weight:800;color:var(--azul);font-size:17px;text-align:right}
.es-u small{font-weight:400;color:var(--gris);font-size:12px}
.es-ver{align-self:flex-end;color:var(--azul);font-weight:600;font-size:14px;margin-top:4px}

/* cómo comprar */
#comoComprar{padding:30px 0 10px;text-align:center}
.cc-pasos{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:none}
.cc-pasos li{position:relative;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:26px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 3px 14px rgba(8,42,116,.06)}
.cc-n{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--rojo);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(200,35,27,.35)}
.cc-pasos .ic{width:40px;height:40px;fill:none;stroke:var(--azul);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.cc-pasos strong{font-size:17px;color:var(--texto)}
.cc-pasos small{font-size:14px;color:var(--gris);line-height:1.45;max-width:30ch}
.cc-acc{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* invitación a cuenta mayorista */
#mayInvita{padding:26px 0 8px}
.mi-caja{display:flex;align-items:center;gap:24px;justify-content:space-between;background:#FFF6E8;border:1px solid #F3D9A8;border-radius:18px;padding:22px 28px}
.mi-txt h2{font-family:'Barlow Condensed','Roboto Condensed',sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--texto);margin:8px 0 6px;line-height:1.1}
.mi-txt p{margin:0;color:#5B5146;font-size:14.5px;line-height:1.5;max-width:70ch}
.mi-caja .btn-rojo{flex:0 0 auto;white-space:nowrap}

/* opiniones, marcas y local (solo si hay datos en CONFIANZA) */
#opiniones,#marcas,#local{padding:26px 0 8px}
.op-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:14px}
.op{margin:0;background:#fff;border:1px solid var(--linea);border-radius:14px;padding:18px}
.op blockquote{margin:0 0 10px;font-size:15px;line-height:1.5;color:var(--texto)}
.op figcaption{display:flex;flex-direction:column;font-size:13px;color:var(--gris)}
.op figcaption strong{color:var(--azul)}
.mc-marcas{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mca{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:8px 18px;border:1px solid var(--linea);border-radius:12px;background:#fff;font-weight:700;color:var(--azul)}
.mca img{max-height:38px;max-width:120px;object-fit:contain}
.lc-caja{display:flex;gap:24px;align-items:center;background:#F4F7FD;border-radius:18px;padding:20px;flex-wrap:wrap}
.lc-foto{width:min(420px,100%);aspect-ratio:16/10;object-fit:cover;border-radius:14px}
.lc-txt{flex:1 1 260px}
.lc-txt .cc-acc{justify-content:flex-start}
.lc-dir{font-weight:600;font-size:16px}

/* precio de oferta en las tarjetas */
.pr-con-of s{color:var(--gris);font-weight:400;font-size:.82em;margin-right:6px}
.pr-of{color:var(--rojo);font-weight:800}

@media (max-width:900px){
  .es-caja{grid-template-columns:1fr;padding:22px 20px}
  .oi-mas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-pasos{grid-template-columns:1fr;gap:22px}
  .mi-caja{flex-direction:column;align-items:flex-start;padding:20px}
  #ofInicio .of-hero-img{min-height:220px}
}
@media (max-width:600px){
  .cc-acc a{flex:1 1 100%;justify-content:center}
}
#escalaInicio{padding-bottom:22px}

/* franja de logros (+20 años, +700 productos, +500 clientes mayoristas, toda Jujuy) */
#logros{padding:18px 0 4px}
.lg-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--azul);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(8,42,116,.16)}
.lg-it{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 12px;color:#fff;position:relative;min-width:0}
.lg-it+.lg-it::before{content:"";position:absolute;left:0;top:22%;bottom:22%;border-left:1px solid rgba(255,255,255,.22)}
.lg-it strong{font-family:'Barlow Condensed','Roboto Condensed',sans-serif;font-size:clamp(32px,3.6vw,46px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.lg-it span{font-size:14px;color:#D4E0FA;margin-top:4px}
.lg-it:last-child strong{color:#FFD9D6}

/* «Conocenos»: fotos reales del local, almacén y vehículo + enlace a Quiénes somos */
#conocenos{padding:26px 0 8px}
.cn-caja{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;background:#F4F7FD;border-radius:18px;padding:20px}
.cn-fotos{display:grid;gap:10px;grid-template-columns:1fr 1fr;grid-auto-rows:150px}
.cn-fotos.cn-n1{grid-template-columns:1fr;grid-auto-rows:260px}
.cn-n3 .cn-f:first-child{grid-row:span 2}
.cn-f{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#DCE5F6}
.cn-f img{width:100%;height:100%;object-fit:cover;display:block}
.cn-vehiculo img{object-position:18% 60%}
.cn-f figcaption{position:absolute;left:8px;bottom:8px;background:rgba(8,42,116,.85);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:12px}
.cn-txt p{color:#4A5260;font-size:15px;line-height:1.55;margin:10px 0 16px}
.cn-txt .ix-tit{margin-top:10px}
.mi-ya{font-weight:700;color:var(--rojo)!important;margin-top:6px!important}
@media (max-width:900px){.cn-caja{grid-template-columns:1fr}.cn-fotos.cn-n1{grid-auto-rows:200px}}
@media (max-width:600px){.lg-lista{grid-template-columns:1fr 1fr}.lg-it:nth-child(3)::before{display:none}.lg-it:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18)}}

/* Banner del inicio más alto (antes 34vw: quedaba muy alargado) y logros como tarjetas a la derecha, dentro del banner */
.banner{height:clamp(400px,46vw,620px)}
.ban-logros{position:absolute;z-index:2;top:50%;transform:translateY(-50%);right:max(20px,calc((100% - 1240px)/2 + 20px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(360px,34%)}
.ban-logros[hidden]{display:none}
.ban-logros .lg-it{background:rgba(255,255,255,.93);color:var(--texto);border-radius:16px;padding:16px 10px 14px;box-shadow:0 10px 28px rgba(8,42,116,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ban-logros .lg-it::before{display:none}
.ban-logros .lg-it strong{color:var(--azul);font-size:clamp(30px,3.2vw,44px)}
.ban-logros .lg-it:last-child strong{color:var(--rojo);font-size:clamp(22px,2.3vw,30px);line-height:1.2}
.ban-logros .lg-it span{color:var(--gris);font-size:13px;line-height:1.3}
@media (max-width:900px){
  .banner{height:clamp(420px,70vw,560px)}
  .ban-logros{top:auto;bottom:16px;transform:none;left:20px;right:20px;width:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .ban-logros .lg-it{padding:10px 6px}
  .ban-logros .lg-it strong{font-size:clamp(22px,4vw,32px)}
  .ban-logros .lg-it:last-child strong{font-size:clamp(16px,2.8vw,22px)}
  .ban-logros .lg-it span{font-size:11.5px}
}
@media (max-width:600px){
  .banner{height:440px}
  .ban-logros{grid-template-columns:repeat(2,minmax(0,1fr));left:12px;right:12px;bottom:12px}
}
@media (min-width:701px) and (max-width:900px){.banner .slide{background-position:22% 55%}}

/* v135: secciones todas a la vista (grilla, sin carrusel) */
#categorias{padding:24px 0 6px}
.cat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.cat-grid .tarjeta{flex:none;width:auto;display:block}
.cat-grid .tarjeta.sk{aspect-ratio:3/4}
/* al pasar el mouse: la foto se desvanece y aparecen productos de la sección + leyenda y cantidad */
.tarjeta .cat-foto{transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.cat-mas{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;opacity:0;transition:opacity .45s ease;background:#fff;pointer-events:none}
.cat-mosaico{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;padding:46px 8px 4px;background:#F4F6FA}
.cat-mosaico.n1{grid-template-columns:1fr;grid-template-rows:1fr}
.cat-mosaico.n2,.cat-mosaico.n3{grid-template-rows:1fr}
.cat-mosaico.n3 i:first-child{grid-row:span 1}
.cat-mosaico i{display:block;background:#fff;border-radius:8px;overflow:hidden;opacity:0;transform:scale(.85)}
.cat-mosaico img{width:100%;height:100%;object-fit:contain}
.cat-ley{background:var(--azul);color:#fff;padding:9px 10px 10px;display:flex;flex-direction:column;gap:3px;transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.cat-ley p{margin:0;font-size:12.5px;line-height:1.3;color:#DCE6FB}
.cat-n{font-size:14px;color:#fff}
.cat-ley em{font-style:normal;font-size:12.5px;font-weight:700;color:#FFD9D6}
.tarjeta:hover .cat-foto{opacity:0}
.tarjeta:hover .cat-mas,.tarjeta:focus-visible .cat-mas{opacity:1}
.tarjeta:hover .cat-ley,.tarjeta:focus-visible .cat-ley{transform:none}
.tarjeta:hover .cat-mosaico i{animation:catFoto .45s ease forwards}
.tarjeta:hover .cat-mosaico i:nth-child(2){animation-delay:.08s}
.tarjeta:hover .cat-mosaico i:nth-child(3){animation-delay:.16s}
.tarjeta:hover .cat-mosaico i:nth-child(4){animation-delay:.24s}
@keyframes catFoto{to{opacity:1;transform:none}}
.tarjeta>span{z-index:3}
.tarjeta:hover>span{color:var(--azul);text-shadow:none}
.tarjeta:hover::after{opacity:0}
@media (max-width:1100px){.cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
@media (max-width:600px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cat-grid .tarjeta span{font-size:13px;top:8px}}
@media (hover:none){.cat-mas{display:none}}

/* banner «Ver todos los productos» (en lugar de «Los más comprados») */
#verTodos{padding:26px 0 6px}
.vt-ban{position:relative;display:flex;align-items:center;min-height:170px;border-radius:18px;overflow:hidden;background:linear-gradient(110deg,var(--azul) 0%,#1450C8 55%,#0B2A6B 100%);color:#fff;box-shadow:0 8px 26px rgba(8,42,116,.2)}
.vt-fotos{position:absolute;right:0;top:0;bottom:0;width:58%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:8px;padding:12px;opacity:.95;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.vt-fotos i{background:#fff;border-radius:10px;overflow:hidden;transition:transform .5s ease}
.vt-fotos img{width:100%;height:100%;object-fit:contain}
.vt-txt{position:relative;z-index:2;padding:22px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.vt-txt strong{font-family:'Barlow Condensed','Roboto Condensed',sans-serif;font-size:clamp(30px,3.6vw,46px);font-weight:800;line-height:1}
.vt-ir{background:var(--rojo);font-weight:700;font-size:14px;padding:8px 18px;border-radius:22px;transition:transform .2s}
.vt-info{position:absolute;z-index:3;right:20px;top:50%;transform:translate(20px,-50%);opacity:0;background:rgba(255,255,255,.97);color:var(--texto);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:3px;box-shadow:0 10px 26px rgba(0,0,0,.25);transition:opacity .35s,transform .35s;pointer-events:none;min-width:220px}
.vt-info b{font-family:'Barlow Condensed','Roboto Condensed',sans-serif;font-size:30px;color:var(--azul);line-height:1}
.vt-info span{font-size:13.5px;color:var(--gris)}
.vt-ban:hover .vt-info,.vt-ban:focus-visible .vt-info{opacity:1;transform:translate(0,-50%)}
.vt-ban:hover .vt-fotos i{transform:scale(.94)}
.vt-ban:hover .vt-ir{transform:translateX(4px)}
@media (max-width:700px){.vt-fotos{width:100%;opacity:.25}.vt-info{position:static;transform:none;opacity:1;margin:0 20px 18px;min-width:0}.vt-ban{flex-direction:column;align-items:stretch}}
#categorias{padding-bottom:22px}
.tarjeta-todos{background:linear-gradient(150deg,var(--azul),#1450C8 60%,var(--rojo) 140%)!important;display:flex!important;flex-direction:column;justify-content:flex-end}
.tarjeta-todos::after{display:none}
.tt-cuerpo{position:relative;z-index:2;padding:14px;display:flex;flex-direction:column;gap:6px;color:#fff}
.tt-cuerpo .cat-n{font-size:15px}
.tt-cuerpo em{font-style:normal;align-self:flex-start;background:var(--rojo);font-weight:700;font-size:13px;padding:6px 14px;border-radius:18px;transition:transform .2s}
.tarjeta-todos:hover em{transform:translateX(4px)}
.tarjeta-todos:hover>span{color:#fff}