/* =====================================================================
   home_restyle.css — capa de "skin" para la home (web/index.php)
   Aditivo: no reemplaza style.css ni style_custom_nano.css.
   Todo cuelga de body.home-2026 para NO afectar otras páginas.
   Modificadores de color con prefijo hsj- para NO chocar con las clases
   .rojo/.verde/.amarillo de style.css (que tienen !important).
   ===================================================================== */

/* ---------- Tipografía nueva ("las letras") ---------- */
body.home-2026{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:#2c2f36;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
body.home-2026 .dohyeon,
body.home-2026 .font-250,
body.home-2026 .card_categorias,
body.home-2026 .hsj-pill,
body.home-2026 .hsj-prod .ti{
  font-family:'Poppins',system-ui,sans-serif !important;
}

/* =====================================================================
   PADDING LATERAL DE TODA LA HOME
   Se aplica a .content (envuelve slider, contenido original y secciones
   nuevas). Además se neutraliza la sangría interna original (px-md-5)
   para que TODO quede alineado al mismo margen.
   ===================================================================== */
body.home-2026{--hpad:clamp(24px, 8vw, 200px);}
body.home-2026 .content{
  padding-left:var(--hpad);
  padding-right:var(--hpad);
}
/* el slider (banner de arriba de todo) va a TODO el ancho, sin padding */
body.home-2026 .content > .h-auto{
  margin-left:calc(-1 * var(--hpad));
  margin-right:calc(-1 * var(--hpad));
}
/* anular la doble sangría px-md-5 del layout original (NO la de la píldora) */
body.home-2026 .fondo_geo_nar .px-1.px-md-5{
  padding-left:0 !important;padding-right:0 !important;
}
body.home-2026 .fondo_geo_nar > .col-md-12 > .px-1.px-md-5 > .row > .px-md-5{
  padding-left:0 !important;padding-right:0 !important;
}

/* ---------- Píldoras de sección existentes (¿Qué buscás? / Lo más vendido) ---------- */
body.home-2026 .bg-warning.rounded-pill,
body.home-2026 .bg-success.rounded-pill{
  box-shadow:0 6px 18px rgba(20,25,40,.10);
  border-radius:40px !important;
}
body.home-2026 .font-250{
  font-size:2rem !important;
  font-weight:700;
  letter-spacing:.3px;
  padding-top:.4rem !important;
  padding-bottom:.4rem !important;
}

/* ---------- Cards de categoría existentes ---------- */
/* hover SUTIL (sin movimiento) y texto SIEMPRE oscuro (no se pierde sobre el ámbar del hover) */
body.home-2026 .cards-inicio{padding:5px !important;}
body.home-2026 .cards-inicio .card-cat{
  background:#fff;
  border:1px solid #e9ecf1 !important;
  border-radius:14px;
  box-shadow:0 3px 12px rgba(20,25,40,.05);
  overflow:hidden;
  transition:box-shadow .18s ease, border-color .18s ease;
}
body.home-2026 .cards-inicio:hover .card-cat{
  box-shadow:0 6px 18px rgba(20,25,40,.10);
  border-color:#ffcf9e !important;
}
body.home-2026 .card_categorias{
  font-size:1.95rem !important;         /* MÁS GRANDE que el original (25px) */
  font-weight:600 !important;
  padding:14px 6px;
  color:#1f2127 !important;             /* negro siempre */
}
body.home-2026 .cards-inicio:hover .card_categorias{color:#1f2127 !important;}
/* sacar el contorno/borde negro al hacer click o foco en las cards de categoría */
body.home-2026 .cards-inicio:focus,
body.home-2026 .cards-inicio:active,
body.home-2026 .cards-inicio:focus-visible{outline:none !important;box-shadow:none !important;}
body.home-2026 .cards-inicio:focus .card-cat,
body.home-2026 .cards-inicio:active .card-cat{border-color:#ffcf9e !important;}

/* ---------- Cards de producto (swiper "Lo más vendido") — hover sutil ---------- */
body.home-2026 .swiper-slide.cards-inicio{
  border-radius:14px !important;
  border:1px solid #e9ecf1 !important;
  box-shadow:0 3px 12px rgba(20,25,40,.05);
  overflow:hidden;
  transition:box-shadow .18s ease, border-color .18s ease;
}
body.home-2026 .swiper-slide.cards-inicio:hover{
  box-shadow:0 6px 18px rgba(20,25,40,.10);
  border-color:#ffcf9e !important;
}

/* =====================================================================
   SECCIONES NUEVAS (Ofertas / Lo que más comprás / Novedades / Marcas)
   El padding lateral ya lo da .content; aquí solo el contenido interno.
   ===================================================================== */
.hsj-sec{
  width:100%;
  padding:48px 0;
  border-top:1px solid #ebedf1;
}
.hsj-sec.hsj-alt{
  background:#f5f6f8;
  /* la banda gris se extiende hasta los bordes del .content padded */
  border-radius:18px;
}
.hsj-wrap{width:100%;margin:0;}

/* píldora full-width (de punta a punta, igual que "Lo Más Vendido") */
.hsj-head{display:block;margin:0 0 30px;}
.hsj-pill{
  font-weight:700;font-size:1.8rem;color:#fff !important;
  padding:13px 54px;border-radius:40px;
  box-shadow:0 6px 18px rgba(20,25,40,.10);
  display:flex;width:100%;align-items:center;justify-content:center;gap:10px;text-align:center;
}
.hsj-pill.hsj-amarillo{background:#ffc107;color:#5a4500 !important;}
.hsj-pill.hsj-verde{background:#28a745;}
.hsj-pill.hsj-rojo{background:#da0015;}
.hsj-pill.hsj-azul{background:#2f6fed;}
.hsj-pill.hsj-naranja{background:#ff8000;}

.hsj-logueado{display:flex;justify-content:center;margin:-16px 0 24px;}
.hsj-logueado span{
  display:inline-flex;align-items:center;gap:7px;
  background:#eaf4ff;color:#2f6fed;border:1px dashed #2f6fed;
  border-radius:30px;padding:6px 18px;font-size:1rem;font-weight:600;
}

/* Grilla de cards de producto reutilizando el componente de categorías,
   forzada a 6 por fila (igual que "¿Qué estás buscando?") */
body.home-2026 .hsj-cards-6{justify-content:flex-start;}
body.home-2026 .hsj-cards-6 > [class*="col-"]{
  flex:0 0 16.6666% !important;max-width:16.6666% !important;
  padding:5px !important;
}
@media (max-width:1199.98px){
  body.home-2026 .hsj-cards-6 > [class*="col-"]{flex:0 0 25% !important;max-width:25% !important;}
}
@media (max-width:991.98px){
  body.home-2026 .hsj-cards-6 > [class*="col-"]{flex:0 0 33.3333% !important;max-width:33.3333% !important;}
}
@media (max-width:575.98px){
  body.home-2026 .hsj-cards-6 > [class*="col-"]{flex:0 0 50% !important;max-width:50% !important;}
}

/* La card de producto moderna vive en card_moderna.css (compartida con la
   página de categorías). Acá solo queda el layout/grilla del home. */

.hsj-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;}
.hsj-prod{
  background:#fff;border:1px solid #e9ecf1;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:#2c2f36;
  box-shadow:0 3px 12px rgba(20,25,40,.05);
  transition:box-shadow .18s ease, border-color .18s ease;
}
.hsj-prod:hover{box-shadow:0 6px 20px rgba(20,25,40,.12);border-color:#ffcf9e;}
.hsj-prod .thumb{
  height:200px;display:flex;align-items:center;justify-content:center;
  position:relative;background:#fff;border-bottom:1px solid #e9ecf1;padding:14px;
}
.hsj-prod .thumb img{max-height:165px;max-width:90%;object-fit:contain;}
.hsj-prod .tag{
  position:absolute;top:11px;left:11px;font-size:.82rem;font-weight:700;
  padding:5px 12px;border-radius:20px;color:#fff;letter-spacing:.3px;
}
.hsj-prod .tag.of{background:#da0015;}
.hsj-prod .tag.nu{background:#28a745;}
.hsj-prod .tag.re{background:#2f6fed;}
.hsj-prod .body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1;}
.hsj-prod .ti{font-size:1.5rem;font-weight:600;line-height:1.28;color:#2c2f36;}  /* MÁS GRANDE */
.hsj-prod .meta{margin-top:auto;color:#6b7280;font-size:.98rem;}
.hsj-prod .ver{
  margin:0 18px 18px;background:#fff3e6;color:#e96f00;border:1px solid #ffd9b0;
  border-radius:30px;padding:12px;font-weight:700;text-align:center;font-size:1.08rem;
  transition:.16s;
}
.hsj-prod:hover .ver{background:#ff8000;color:#fff;border-color:#ff8000;}

.hsj-vertodos{text-align:center;margin-top:30px;}
.hsj-vertodos a{
  display:inline-block;background:#fff;border:2px solid #ff8000;color:#ff8000 !important;
  font-weight:700;font-size:1.25rem;padding:13px 38px;border-radius:30px;text-decoration:none;
  transition:.16s;
}
.hsj-vertodos a:hover{background:#ff8000;color:#fff !important;}

/* ---------- Marcas (todas + buscador) ---------- */
.hsj-marca-search{display:flex;justify-content:center;margin:0 0 26px;}
.hsj-marca-search input{
  width:100%;max-width:460px;border:2px solid #e3e6ec;border-radius:30px;
  padding:13px 24px;font-size:1.1rem;outline:none;background:#fff;color:#2c2f36;
}
.hsj-marca-search input:focus{border-color:#ff8000;}
.hsj-marcas{display:grid;grid-template-columns:repeat(7,1fr);gap:11px;}
.hsj-marca{
  background:#fff;border:1px solid #e9ecf1;border-radius:12px;
  height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px;box-shadow:0 3px 12px rgba(20,25,40,.05);
  transition:box-shadow .18s ease, border-color .18s ease;gap:6px;
}
.hsj-marca:hover{box-shadow:0 6px 18px rgba(20,25,40,.10);border-color:#ffcf9e;}
.hsj-marca img{max-width:100%;max-height:60px;object-fit:contain;}
.hsj-marca .nom{font-size:1.25rem;color:#3f4651;font-weight:600;text-align:center;line-height:1.15;}
.hsj-marca.hide{display:none;}
.hsj-marca-vacio{display:none;text-align:center;color:#6b7280;padding:18px;font-weight:600;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hsj-grid{grid-template-columns:repeat(3,1fr);}
  .hsj-marcas{grid-template-columns:repeat(5,1fr);}
}
@media (max-width:640px){
  .hsj-grid{grid-template-columns:repeat(2,1fr);}
  .hsj-marcas{grid-template-columns:repeat(3,1fr);}
  .hsj-pill{font-size:1.4rem;padding:11px 34px;}
  body.home-2026 .font-250{font-size:1.6rem !important;}
  body.home-2026 .card_categorias{font-size:1.4rem !important;}
  .hsj-prod .ti{font-size:1.2rem;}

  /* En celular: menos padding lateral del home (aprovechar el ancho).
     Reuso la variable --hpad para que el slider siga full-bleed. */
  body.home-2026{--hpad:8px;}

  /* Cards de producto más juntas (menos gutter entre sí) */
  body.home-2026 .hsj-cards-6 > [class*="col-"]{padding:3px !important;}

  /* Foto del producto MÁS GRANDE: a todo el ancho de la card, arriba */
  body.home-2026 .hsj-cards-6 .cards-productos .card-custom-img{
    flex:0 0 100% !important;max-width:100% !important;padding:14px 14px 4px !important;
  }
  body.home-2026 .hsj-cards-6 .cards-productos .card-custom-img img{
    max-height:none !important;width:auto !important;max-width:100% !important;
  }
  /* el texto debajo, a todo el ancho */
  body.home-2026 .hsj-cards-6 .cards-productos .card-body{padding:6px 10px 10px !important;}

  /* Tipografía de la card adaptada a 2-por-fila (media pantalla):
     en escritorio el título va 1.75rem, pero en celular eso desborda. */
  body.home-2026 .hsj-cards-6 .cards-productos .card-custom-img img{
    max-height:150px !important;margin:0 auto !important;
  }
  body.home-2026 .hsj-cards-6 .cards-productos .card-title.font-120{
    font-size:1.32rem !important;line-height:1.2 !important;
  }
  body.home-2026 .hsj-cards-6 .cards-productos .card-title:not(.font-120){
    font-size:.82rem !important;
  }
  body.home-2026 .hsj-cards-6 .cards-productos .precio_prod{
    font-size:1.3rem !important;
  }
  body.home-2026 .hsj-cards-6 .cards-productos .carrito_icono{
    height:38px !important;width:38px !important;
  }
  /* el "+ iva" y descuentos no deben empujar el layout */
  body.home-2026 .hsj-cards-6 .cards-productos .badge{font-size:.62rem !important;}
}