/* ============================================================
   LASUS — HOME (hook displayHome, HomeRenderer)
   Extiende landing.css: mismos tokens (:root ya declarado ahí),
   mismas clases base (.section, .wrap, .cards, .btn, .hero, .proof…).
   Este archivo solo agrega las clases específicas del home.
   ============================================================ */

/* ---------- FULL-BLEED: cancela el padding-top:20px de #wrapper (tema,
   global, usado en todo el sitio) SOLO en el home — sin esto queda una
   franja blanca entre el nav y el hero oscuro. Acotado a .lsu-home para
   no afectar el padding de #wrapper en categorías/productos/landings. ---------- */
.lsu-home > .hero:first-child{margin-top:-20px}

/* ---------- HERO: sidebar de categorías en vez de formulario ---------- */
.hero__grid--sidebar{grid-template-columns:1fr}
@media(min-width:900px){
  .hero__grid--sidebar{grid-template-columns:1.2fr 0.8fr; align-items:start}
}
.hero__sidebar{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg); padding:var(--space-5); margin-top:var(--space-8);
}
@media(min-width:900px){.hero__sidebar{margin-top:0}}
.hero__sidebar-title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(255,255,255,.55); margin-bottom:var(--space-3);
}
.hero__sidebar-list{list-style:none}
.hero__sidebar-list li+li{border-top:1px solid rgba(255,255,255,.08)}
.hero__sidebar-list a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:11px 2px; color:rgba(255,255,255,.86); font-size:14.5px; font-weight:600;
  text-decoration:none;
}
.hero__sidebar-list a:hover{color:#fff; text-decoration:none}
.hero__sidebar-count{
  font-size:12.5px; font-weight:700; color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums lining-nums;
}
.hero__sidebar-more{
  display:block; margin-top:var(--space-4); font-size:13.5px; font-weight:700;
  color:var(--accent); text-decoration:none;
}
.hero__sidebar-more:hover{text-decoration:underline}

/* ---------- BANDA DE RENTING ---------- */
.promo-band{background:linear-gradient(135deg,var(--orange-600) 0%,#B84300 100%); padding:var(--space-8) 0}
.promo-band__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-6);
}
.promo-band__copy{flex:1 1 320px}
.promo-band__eyebrow{
  display:flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:rgba(255,255,255,.85); margin:0 0 var(--space-2);
}
.promo-band__icon{width:14px; height:14px; flex-shrink:0}
.promo-band h2{color:#fff; font-size:clamp(21px,3vw,27px)}
.promo-band__stats{
  list-style:none; display:flex; gap:var(--space-6); flex-wrap:wrap;
}
.promo-band__stat-value{display:block; font-size:26px; font-weight:900; color:#fff; line-height:1}
.promo-band__stat-label{display:block; font-size:11.5px; color:rgba(255,255,255,.8); margin-top:3px; max-width:14ch}
.promo-band__cta{
  background:#fff; color:var(--fg-1); flex-shrink:0; box-shadow:var(--shadow-md);
}
.promo-band__cta:hover{background:var(--neutral-50); color:var(--fg-1)}

/* ---------- CARRUSEL DE MÁS COTIZADOS (una sola fila) ---------- */
.section__head--row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap}
.stock-grid__all{font-size:13.5px; font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap}
.stock-grid__all:hover{text-decoration:underline}
.stock-carousel__controls{display:flex; align-items:center; gap:var(--space-3)}
.stock-carousel__nav{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:var(--radius-pill); border:1px solid var(--border-2); background:#fff;
  color:var(--fg-1); cursor:pointer; flex-shrink:0;
}
.stock-carousel__nav svg{width:16px; height:16px}
.stock-carousel__nav:hover{border-color:var(--accent); color:var(--accent)}
.stock-carousel{
  list-style:none; display:flex; gap:var(--space-4); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--space-2);
  -webkit-overflow-scrolling:touch; padding-bottom:var(--space-2);
}
.stock-carousel::-webkit-scrollbar{height:6px}
.stock-carousel::-webkit-scrollbar-thumb{background:var(--border-2); border-radius:var(--radius-pill)}
.stock-grid__card{
  border:1px solid var(--border-1); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; display:flex; flex-direction:column; flex:0 0 auto;
  width:240px; scroll-snap-align:start;
}
@media(min-width:640px){.stock-grid__card{width:260px}}
.stock-grid__media{
  position:relative; background:var(--bg-soft); aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--divider);
}
.stock-grid__media img{max-height:100%; object-fit:contain}
.stock-grid__badge{
  position:absolute; top:10px; left:10px; background:var(--success); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px;
}
.stock-grid__body{padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); flex:1}
.stock-grid__name{
  font-size:14.5px; font-weight:700; color:var(--fg-1); line-height:1.35;
  text-decoration:none;
}
.stock-grid__name:hover{color:var(--accent); text-decoration:none}
.stock-grid__price{font-size:19px; font-weight:900; color:var(--fg-1); margin-top:auto}
.stock-grid__cta{width:100%; margin-top:var(--space-2)}

/* ---------- GRILLA COMPLETA DE CATEGORÍAS ---------- */
.categories-grid{
  list-style:none; display:grid; gap:var(--space-3);
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:640px){.categories-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:960px){.categories-grid{grid-template-columns:repeat(6,1fr)}}
.categories-grid a{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-2);
  padding:var(--space-4) var(--space-2); border:1px solid var(--border-1); border-radius:var(--radius-lg);
  background:#fff; text-decoration:none; height:100%;
}
.categories-grid a:hover{border-color:var(--accent); text-decoration:none}
.categories-grid__icon{color:var(--accent)}
.categories-grid__icon svg{width:26px; height:26px}
.categories-grid__label{font-size:12.5px; font-weight:600; color:var(--fg-2); line-height:1.3}

/* ---------- COMPRAR POR MARCA ---------- */
.brand-grid{
  list-style:none; display:grid; gap:var(--space-4);
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:640px){.brand-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.brand-grid{grid-template-columns:repeat(5,1fr)}}
/* El archivo real de cada marca (core Manufacturer) ya es un lienzo
   cuadrado de 452x452 con el logo centrado y bastante relleno blanco
   propio (confirmado inspeccionando el archivo — normal en imágenes de
   fabricante de PrestaShop, no es un logo recortado a medida). Sumarle
   padding/max-height propios duplicaba el achique. Acá la tarjeta es
   cuadrada (aspect-ratio) y la imagen llena el 100% con object-fit:contain,
   así el único margen que queda es el que ya trae el archivo. */
.brand-grid a{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-1); border-radius:var(--radius-lg); background:#fff;
  padding:var(--space-2); aspect-ratio:1;
}
.brand-grid img{width:100%; height:100%; object-fit:contain}
.brand-grid a:hover{border-color:var(--accent); box-shadow:var(--shadow-sm)}

/* ---------- ¿ERES DISTRIBUIDOR? ---------- */
.distributor-cta__inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--space-5); text-align:center;
}
.distributor-cta__inner h2{margin:0}
.distributor-cta__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-pill);
  background:var(--orange-50); color:var(--accent); flex-shrink:0;
}
.distributor-cta__icon svg{width:22px; height:22px}

/* ---------- HEADING DE "ALGUNOS DE NUESTROS CLIENTES" (home-only) ---------- */
.proof__heading{text-align:center; margin:0; padding-top:var(--space-12)}
@media(min-width:900px){.proof__heading{padding-top:var(--space-16)}}
.proof + .proof__heading, .proof__heading + .proof{padding-top:0}

/* ---------- ÍCONOS EN SIDEBAR DEL HERO ---------- */
.hero__sidebar-list a{gap:var(--space-2)}
.hero__sidebar-icon{
  display:inline-flex; flex-shrink:0; color:var(--accent); opacity:.85;
}
.hero__sidebar-icon svg{width:16px; height:16px}
.hero__sidebar-list .hero__sidebar-label{flex:1; display:flex; align-items:center; gap:8px}