/* Plantilla "Bento" — port del diseño de referencia del usuario.
   El carrito (drawer/overlay + clases .kc-drawer-item*) es el MISMO
   markup que usa carrito.js en la plantilla "almacen" (ver
   catalogo/static/catalogo/js/carrito.js) — acá solo cambia el CSS,
   para que se vea como bottom-sheet en vez de drawer lateral. No
   renombrar esas clases/ids sin actualizar carrito.js. */
:root{
  --ink:#171927; --ink-soft:#5a5d72; --ink-faint:#9497a8;
  --paper:#faf9f6; --surface:#ffffff; --surface-2:#f2f0e9;
  --line:#e6e3da; --line-soft:#efece4;

  --indigo:#262b52; --indigo-2:#343a6e; --indigo-soft:#e7e7f0;
  --lime:#6fa525; --lime-dark:#527a19; --lime-soft:#e9f2dc;
  --amber:#c98a2c; --amber-dark:#976a1f; --amber-soft:#f6ecd8;
  --red:#c0392b; --red-soft:#f8e0dc;

  --r-lg:18px; --r-md:12px; --r-sm:8px; --r-pill:999px;
  --shadow-sm:0 1px 3px rgba(23,25,39,.06);
  --shadow-md:0 10px 28px -12px rgba(23,25,39,.18);
  --shadow-lg:0 30px 60px -20px rgba(23,25,39,.3);

  --f-display:'Space Grotesk', sans-serif;
  --f-body:'Inter', sans-serif;
  --f-mono:'JetBrains Mono', monospace;
  /* Solo para título y precio del detalle de producto — pedido puntual de
     replicar la tipografía exacta de la referencia (sans-serif del sistema,
     no Space Grotesk/JetBrains Mono como el resto de Bento). */
  --f-system:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html[data-theme="dark"]{
  --ink:#f1f1f5; --ink-soft:#b3b5c4; --ink-faint:#7a7d90;
  --paper:#121320; --surface:#1a1c2c; --surface-2:#20223570;
  --line:#2c2e42; --line-soft:#24263a;
  --indigo-soft:#242849;
  --lime-soft:#233420;
  --amber-soft:#3a2f1c;
  --red-soft:#3a201d;
}
.kc-bento *{box-sizing:border-box;}
.kc-bento{
  background:var(--paper); color:var(--ink); font-family:var(--f-body);
  line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .2s,color .2s;
  min-height:100vh; margin:0;
}
.kc-bento img{max-width:100%; display:block;}
.kc-bento button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
.kc-bento input,.kc-bento select,.kc-bento textarea{font-family:inherit;}
.kc-bento a{color:inherit; text-decoration:none;}
.kc-bento ul{list-style:none; margin:0; padding:0;}
.kc-bento :focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }
.kc-bento .shell{ max-width:1320px; margin:0 auto; padding:0 26px; }
.kc-bento .hide-scrollbar::-webkit-scrollbar{ display:none; }
.kc-bento .hide-scrollbar{ scrollbar-width:none; cursor:grab; }
.kc-bento .hide-scrollbar.dragging{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.kc-bento .hide-scrollbar.dragging *{ pointer-events:none; }

/* ================= Ticker — franja de anuncios arriba del header ================= */
.kc-bento .ticker{ background:var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center; gap:16px; padding:10px 20px; position:relative; }
.kc-bento .ticker-btn{ background:none; border:none; color:rgba(255,255,255,.55); cursor:pointer; font-size:15px; padding:4px 8px; line-height:1; transition:color .15s; flex:none; }
.kc-bento .ticker-btn:hover{ color:#fff; }
.kc-bento .ticker-msgs{ position:relative; height:16px; flex:1; max-width:560px; text-align:center; }
.kc-bento .ticker-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:12px; letter-spacing:.01em; opacity:0; transition:opacity .45s; padding:0 8px; }
.kc-bento .ticker-msg.active{ opacity:1; }
@media (max-width:600px){ .kc-bento .ticker{ padding:9px 14px; } .kc-bento .ticker-msg{ font-size:11px; } }

/* ================= Topbar ================= */
.kc-bento .topbar{ position:sticky; top:0; z-index:80; background:var(--surface); border-bottom:1px solid var(--line); transition:padding .2s, box-shadow .2s; }
.kc-bento .topbar.shrink{ box-shadow:var(--shadow-sm); }
.kc-bento .topbar-inner{ display:flex; align-items:center; gap:16px; padding:16px 0; transition:padding .2s; }
.kc-bento .topbar.shrink .topbar-inner{ padding:10px 0; }

.kc-bento .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
/* Sin fondo de color — antes era necesario para las iniciales de texto (ya
   no existen, siempre hay una imagen: el logo real o el ícono de Kai-Cart de
   respaldo) y con un logo de fondo transparente un cuadro de color detrás
   sobra. */
.kc-bento .brand-mark{ display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kc-bento .brand-mark img{ height:36px; width:auto; max-width:140px; object-fit:contain; }
.kc-bento .brand-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.kc-bento .brand-name{ font-family:var(--f-display); font-weight:700; font-size:16.5px; letter-spacing:-.01em; }
.kc-bento .brand-sub{ font-size:11px; color:var(--ink-faint); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.kc-bento .search-wrap{ flex:1; max-width:360px; position:relative; }
.kc-bento .search-input{ width:100%; background:var(--surface-2); border:1.5px solid transparent; border-radius:var(--r-pill); padding:9px 14px 9px 38px; font-size:13.5px; color:var(--ink); transition:.15s; }
.kc-bento .search-input:focus{ border-color:var(--lime); background:var(--surface); }
.kc-bento .search-icon{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--ink-faint); pointer-events:none; }

/* ---- Desplegable de sugerencias en vivo del buscador ---- */
.kc-bento .search-dropdown{ display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:90; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; }
.kc-bento .search-dropdown--abierto{ display:block; }
.kc-bento .search-dropdown-item{ display:flex; align-items:center; gap:10px; padding:9px 13px; border-bottom:1px solid var(--line-soft); }
.kc-bento .search-dropdown-item:hover{ background:var(--surface-2); }
.kc-bento .search-dropdown-img{ width:38px; height:38px; flex-shrink:0; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); display:flex; align-items:center; justify-content:center; }
.kc-bento .search-dropdown-img img{ width:100%; height:100%; object-fit:contain; }
.kc-bento .search-dropdown-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kc-bento .search-dropdown-nombre{ font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc-bento .search-dropdown-precio{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-faint); }
.kc-bento .search-dropdown-vertodos{ display:block; text-align:center; padding:10px; font-size:12px; font-weight:700; color:var(--lime-dark); background:var(--lime-soft); }
.kc-bento .search-dropdown-vertodos:hover{ background:color-mix(in srgb, var(--lime) 22%, white); }

/* Navegación principal (Catálogo/Ofertas/Combos/La tienda) — antes no existía en el
   header de Bento, la única forma de llegar a "La tienda" era scrollear al pie. */
.kc-bento .main-nav{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.kc-bento .main-nav a{ font-family:var(--f-display); font-weight:600; font-size:13px; color:var(--ink-soft); padding:6px 1px; position:relative; white-space:nowrap; transition:color .15s; }
.kc-bento .main-nav a:hover{ color:var(--ink); }
.kc-bento .main-nav a.active{ color:var(--ink); }
.kc-bento .main-nav a.active::after{ content:''; position:absolute; left:1px; right:1px; bottom:-2px; height:2px; border-radius:2px; background:var(--lime); }

.kc-bento .top-actions{ display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
/* .icon-btn.search-toggle (no solo .search-toggle) para ganarle en especificidad
   a ".icon-btn{display:flex}" sin importar el orden en la hoja de estilos. */
.kc-bento .icon-btn.search-toggle{ display:none; }
.kc-bento .theme-switch{ width:42px; height:24px; border-radius:var(--r-pill); background:var(--surface-2); position:relative; flex-shrink:0; transition:.15s; }
.kc-bento .theme-switch i{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--indigo); transition:.2s; display:flex; align-items:center; justify-content:center; font-size:11px; }
html[data-theme="dark"] .kc-bento .theme-switch i{ left:20px; background:var(--lime); }
.kc-bento .icon-btn{ position:relative; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:.15s; }
.kc-bento .icon-btn:hover{ background:var(--surface-2); color:var(--ink); }
.kc-bento .icon-btn svg{ width:18px; height:18px; }
.kc-bento .badge-dot{ position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px; border-radius:var(--r-pill); background:var(--lime); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); }
.kc-bento .badge-dot[hidden]{ display:none; }
.kc-bento .btn-login{ display:flex; align-items:center; gap:6px; padding:8px 15px; border-radius:var(--r-pill); background:var(--indigo); color:#fff; font-size:12.5px; font-weight:600; flex-shrink:0; transition:.15s; }
.kc-bento .btn-login:hover{ background:var(--indigo-2); }
.kc-bento .btn-login svg{ width:14px; height:14px; }

/* ================= Hero carousel ================= */
/* Fila bento del hero: tarjeta principal (carrusel o fallback) + columna
   lateral con 2 tarjetas apiladas (stat real de catálogo + combo/producto
   destacado). display:grid con align-items:stretch (default) hace que
   .hero-side se estire al alto real de .hero-main-col para que sus 2
   .side-card puedan repartirse ese alto con flex — mismo mecanismo que
   ya se usó para el sticky de /catalogo-online/ (ver catalogo_online.css). */
.kc-bento .hero-row{ display:grid; grid-template-columns:1.7fr 1fr; gap:14px; margin-top:20px; }
@media (max-width:900px){ .kc-bento .hero-row{ grid-template-columns:1fr; } }
.kc-bento .hero-main-col{ min-width:0; }
/* width:100% explícito — sin esto, aspect-ratio:16/9 + height:100% deriva el ancho
   del contenido intrínseco (la imagen del slide) en vez del ancho real de la columna
   del grid, provocando scroll horizontal en toda la home en mobile (confirmado: sin
   esto el documento medía 532px de ancho con viewport de 375px). */
.kc-bento .carousel-track-wrap{ position:relative; width:100%; height:100%; min-height:280px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:16/9; background:var(--indigo); }
.kc-bento .carousel-track{ display:flex; height:100%; transition:transform .5s cubic-bezier(.65,0,.35,1); }
.kc-bento .c-slide{ min-width:100%; height:100%; position:relative; }
.kc-bento .c-slide img{ width:100%; height:100%; object-fit:cover; }
.kc-bento .c-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(23,25,39,.78) 0%, rgba(23,25,39,.35) 48%, rgba(23,25,39,0) 75%); display:flex; flex-direction:column; justify-content:center; padding:0 44px; max-width:70%; }
.kc-bento .c-eyebrow{ font-family:var(--f-mono); font-size:11.5px; color:var(--lime); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.kc-bento .c-title{ font-family:var(--f-display); font-weight:700; font-size:clamp(24px,3vw,36px); color:#fff; line-height:1.12; letter-spacing:-.01em; margin-bottom:10px; }
.kc-bento .c-desc{ font-size:14px; color:rgba(255,255,255,.78); max-width:380px; margin-bottom:18px; }
.kc-bento .c-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--lime); color:#fff; font-weight:700; font-size:13px; padding:11px 20px; border-radius:var(--r-pill); width:max-content; transition:.15s; }
.kc-bento .c-cta:hover{ background:var(--lime-dark); }
.kc-bento .hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.kc-bento .btn-ghost{ color:#fff; font-weight:600; font-size:13px; opacity:.85; transition:opacity .15s; }
.kc-bento .btn-ghost:hover{ opacity:1; }
.kc-bento .hero-simple{ position:relative; height:100%; min-height:280px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); background:var(--indigo); padding:44px 52px; display:flex; flex-direction:column; justify-content:center; }

/* ---- columna lateral del hero ---- */
/* 2 tarjetas "spotlight" a pantalla completa (antes: 1 stat sin imagen +
   1 tarjeta con miniatura chica de 68px) — ahora ambas son foto de
   producto/combo real ocupando el 100% de la tarjeta, con degradé +
   nombre/precio superpuestos, mismo lenguaje que .c-overlay/.flash-card. */
.kc-bento .hero-side{ display:flex; flex-direction:column; gap:14px; }
.kc-bento .side-spot{ position:relative; flex:1; min-height:0; border-radius:var(--r-lg); overflow:hidden; background:var(--indigo); box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; display:block; }
.kc-bento .side-spot:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kc-bento .side-spot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.kc-bento .side-spot:hover img{ transform:scale(1.04); }
.kc-bento .side-spot-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; background:linear-gradient(0deg, rgba(15,16,26,.86) 0%, rgba(15,16,26,.25) 55%, rgba(15,16,26,0) 100%); }
.kc-bento .side-spot-overlay .tag{ display:inline-block; background:var(--lime); color:#fff; font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); margin-bottom:8px; width:max-content; }
.kc-bento .side-spot-overlay h3{ font-family:var(--f-display); font-size:14.5px; font-weight:700; color:#fff; margin:0 0 3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kc-bento .side-spot-overlay .price{ font-family:var(--f-mono); font-weight:700; font-size:15px; color:#fff; }
/* Bajo 900px .hero-side pasa de columna lateral (estirada por el grid al
   alto de .hero-main-col) a apilarse debajo — sin alto propio ahí, sus 2
   .side-spot (flex:1, min-height:0 arriba) colapsaban a casi 0px porque
   nada les daba una altura de la que repartirse. Va DESPUÉS de la regla
   base (misma especificidad, gana la última en cascada). */
@media (max-width:900px){
  .kc-bento .hero-side{ flex-direction:row; }
  .kc-bento .side-spot{ min-height:200px; }
}
@media (max-width:560px){ .kc-bento .hero-side{ flex-direction:column; } }

/* ---- Grilla de promos (4, estática) — reusa BannerCatalogo posición
   "antes de la grilla" (banners_antes_grilla, ver catalogo/views.py),
   la misma que Almacén usa para su franja "cinturón" — acá en Bento
   se renderiza distinto: fija, sin scroll, tarjetas altas y gráficas
   con degradé propio de la marca cuando no hay foto (a propósito NADA
   parecida a .ads-rail, que ya cubre "carrusel" — esta es la otra forma:
   grilla fija de tarjetas altas). ---- */
.kc-bento .promo-grid-wrap{ padding:34px 0 4px; }
.kc-bento .promo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.kc-bento .promo-card{ position:relative; aspect-ratio:3/4; border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.kc-bento .promo-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.kc-bento .promo-card::before{ content:''; position:absolute; inset:-20% -20% auto auto; width:70%; height:70%; border-radius:50%; background:rgba(255,255,255,.08); }
.kc-bento .promo-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kc-bento .promo-card.has-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,16,26,.85) 0%, rgba(15,16,26,.15) 55%, transparent 100%); }
.kc-bento .promo-card-copy{ position:relative; z-index:1; }
.kc-bento .promo-card-copy b{ font-family:var(--f-display); font-weight:800; font-size:15.5px; line-height:1.2; display:block; }
.kc-bento .promo-card-copy small{ font-size:11px; opacity:.85; margin-top:4px; display:block; }
.kc-bento .promo-card-cta{ display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,.95); color:#0f101a; font-family:var(--f-display); font-weight:700; font-size:10.5px; padding:6px 10px; border-radius:var(--r-pill); margin-top:9px; width:fit-content; }
.kc-bento .promo-card.pg1{ background:linear-gradient(160deg, var(--lime), #3f5c16); }
.kc-bento .promo-card.pg2{ background:linear-gradient(160deg, var(--indigo), #12142a); }
.kc-bento .promo-card.pg3{ background:linear-gradient(160deg, var(--amber), #7a5219); }
.kc-bento .promo-card.pg4{ background:linear-gradient(160deg, #c0392b, #7a251c); }
@media (max-width:760px){ .kc-bento .promo-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---- Anuncios/banners manuales — mismo concepto que la
   franja "cinturón" de Almacén, pero acá el dueño reportó que con forma
   cuadrada+overlay se veían "exactamente igual" a otra sección de la home
   (categorías/marcas destacadas, después sacada de Bento por redundante).
   El criterio de fondo sigue vigente: forma/tamaño distintos evitan la
   sensación de redundancia entre secciones. Ahora son
   tarjetas APAISADAS (banner, no chip), con texto siempre visible (no solo
   al hover) y un botón real (no solo una etiqueta) — forma, tamaño y
   affordance distintos, no solo posición. ---- */
.kc-bento .ads-wrap{ padding:34px 0 10px; margin-top:6px; }
.kc-bento .ads-rail{ display:flex; gap:16px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
.kc-bento .ad-card{ position:relative; flex:0 0 320px; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; display:block; scroll-snap-align:start; }
.kc-bento .ad-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.kc-bento .ad-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.kc-bento .ad-card:hover img{ transform:scale(1.05); }
.kc-bento .ad-card-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; padding:20px; }
.kc-bento .ad-card-overlay--scrim{ background:linear-gradient(100deg, rgba(15,16,26,.9) 0%, rgba(15,16,26,.55) 48%, rgba(15,16,26,.05) 100%); }
.kc-bento .ad-card-copy{ max-width:75%; display:flex; flex-direction:column; gap:5px; }
.kc-bento .ad-card-title{ font-family:var(--f-display); font-weight:800; font-size:17px; color:#fff; line-height:1.22; }
.kc-bento .ad-card-text{ font-size:12.5px; color:rgba(255,255,255,.85); line-height:1.35; }
.kc-bento .ad-card-cta{ display:inline-flex; align-self:flex-start; align-items:center; gap:6px; background:var(--lime); color:#0f101a; font-family:var(--f-display); font-weight:700; font-size:12px; padding:8px 14px; border-radius:var(--r-pill); width:fit-content; transition:transform .15s; }
.kc-bento .ad-card:hover .ad-card-cta{ transform:translateX(3px); }
@media (max-width:600px){ .kc-bento .ad-card{ flex-basis:80vw; } }

/* ---- Franja ancha de banner(es) — versión Bento de la franja "completa"
   que ya usa Almacén, para las posiciones "antes de Destacados"/"antes de
   Combos" (ver catalogo/plantillas/bento/_banner_strip.html). A propósito
   ancha y baja (no apaisada-chica como .ad-card) — un mensaje editorial
   de paso, no una tarjeta de catálogo. ---- */
.kc-bento .banner-strip{ display:flex; flex-direction:column; gap:14px; padding:22px 0; }
.kc-bento .banner-strip-item{ position:relative; min-height:180px; border-radius:var(--r-lg); overflow:hidden; display:flex; align-items:center; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.kc-bento .banner-strip-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kc-bento .banner-strip-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kc-bento .banner-strip-item.has-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(15,16,26,.85) 0%, rgba(15,16,26,.4) 55%, rgba(15,16,26,.05) 100%); }
.kc-bento .banner-strip-copy{ position:relative; z-index:1; padding:26px 30px; max-width:520px; color:#fff; }
.kc-bento .banner-strip-copy b{ font-family:var(--f-display); font-weight:800; font-size:19px; line-height:1.25; display:block; }
.kc-bento .banner-strip-copy p{ font-size:13px; color:rgba(255,255,255,.85); margin:6px 0 0; }
.kc-bento .banner-strip-cta{ display:inline-flex; align-items:center; gap:6px; background:var(--lime); color:#0f101a; font-family:var(--f-display); font-weight:700; font-size:12px; padding:9px 16px; border-radius:var(--r-pill); margin-top:14px; width:fit-content; }
@media (max-width:600px){ .kc-bento .banner-strip-item{ min-height:150px; } .kc-bento .banner-strip-copy{ padding:20px; } }

/* ---- Cabecera de "modo búsqueda" (reemplaza el hero cuando hay `q`) ---- */
.kc-bento .search-results-head{ padding:32px 0 6px; }
.kc-bento .search-results-head .src-eyebrow{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; }
.kc-bento .search-results-head h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:-.01em; margin-bottom:6px; }
.kc-bento .search-results-head p{ font-size:13px; color:var(--ink-soft); }
.kc-bento .search-results-head p a{ color:var(--lime-dark); font-weight:600; }
.kc-bento .search-results-head p a:hover{ text-decoration:underline; }

.kc-bento .c-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); z-index:5; transition:.15s; }
.kc-bento .c-arrow:hover{ background:#fff; }
.kc-bento .c-arrow.prev{ left:16px; } .kc-bento .c-arrow.next{ right:16px; }
.kc-bento .c-arrow svg{ width:18px; height:18px; }
.kc-bento .c-dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:5; }
.kc-bento .c-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); transition:.2s; border:none; padding:0; }
.kc-bento .c-dot.active{ background:#fff; width:20px; border-radius:5px; }

/* ================= Stories category rail ================= */
.kc-bento .stories-wrap{ padding:26px 0 4px; }
/* Rail compacto, alineado con el margen general. Las categorías conservan
   un ancho legible y, cuando son muchas, continúan en una única fila que se
   puede arrastrar horizontalmente con mouse, trackpad o pantalla táctil. */
.kc-bento .stories-rail{
  max-width:1320px; margin:0 auto; padding:2px 26px 6px;
  display:flex; gap:16px; overflow-x:auto;
  scroll-snap-type:x proximity; scroll-padding-left:26px;
}
.kc-bento .story{
  flex:0 0 92px; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:8px; scroll-snap-align:start;
}
.kc-bento .story-ring{ width:60px; height:60px; border-radius:50%; padding:3px; background:linear-gradient(135deg, var(--lime), var(--amber)); display:flex; align-items:center; justify-content:center; transition:.15s; }
.kc-bento .story:not(.active) .story-ring{ background:var(--line); opacity:.8; }
.kc-bento .story-ring-inner{ width:100%; height:100%; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.kc-bento .story-ring-inner svg{ width:22px; height:22px; }
.kc-bento .story-label{
  width:100%; min-height:3.6em; padding:0 3px;
  font-size:11px; font-weight:600; color:var(--ink-soft); text-align:center; line-height:1.2;
  overflow-wrap:anywhere; hyphens:auto;
}
.kc-bento .story.active .story-label{ color:var(--ink); }

/* ================= Sub toolbar ================= */
.kc-bento .subbar{ position:sticky; top:var(--topbar-h, 0px); z-index:60; background:var(--paper); }
.kc-bento .subbar-inner{ display:flex; align-items:center; gap:12px; padding:16px 0; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.kc-bento .subbar-right{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.kc-bento .result-count{ font-size:12.5px; color:var(--ink-faint); margin-right:4px; }
.kc-bento .sort-select{ border:1.5px solid var(--line); background:var(--surface); border-radius:var(--r-sm); padding:8px 10px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.kc-bento .filter-fab{ display:flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:var(--surface); border-radius:var(--r-sm); padding:8px 13px; font-size:12.5px; font-weight:600; }
.kc-bento .filter-fab svg{ width:14px; height:14px; }
.kc-bento .filter-fab .n{ background:var(--lime); color:#fff; font-family:var(--f-mono); font-size:10px; border-radius:var(--r-pill); padding:1px 6px; }

/* ================= Bento grid ================= */
/* Tarjetas de tamaño UNIFORME (antes cada tile tenía un span de grilla
   distinto según oferta/destacado — un mismo diseño "bento" con dense
   packing, pero cada fila terminaba con una cantidad distinta de columnas
   ocupadas y la última fila de cada página casi nunca cerraba pareja,
   dejando huecos en blanco grandes y una sensación de desorden). Con
   auto-fill + minmax, cada tarjeta mide lo mismo y la grilla nunca deja un
   hueco a mitad de fila — la única variación visual entre destacado/oferta
   ahora es la etiqueta (.tile-tag), no el tamaño de la tarjeta. */
.kc-bento .bento{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px; padding:24px 0 60px; }
.kc-bento .tile{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s; cursor:pointer;
}
.kc-bento .tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

.kc-bento .tile-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--surface-2); }
.kc-bento .tile-media img{ width:100%; height:100%; object-fit:contain; transition:transform .3s; }
.kc-bento .tile:hover .tile-media img{ transform:scale(1.04); }
.kc-bento .tile-collage{ display:flex; width:100%; height:100%; }
.kc-bento .tile-collage span{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border-left:1px solid var(--line-soft); color:var(--ink-faint); }
.kc-bento .tile-collage span:first-child{ border-left:none; }
.kc-bento .tile-collage img{ width:100%; height:100%; object-fit:contain; }

.kc-bento .tile-tag{ position:absolute; top:10px; left:10px; z-index:2; padding:4px 9px; border-radius:var(--r-sm); font-size:10px; font-weight:700; font-family:var(--f-mono); }
.kc-bento .tag-featured{ background:var(--indigo); color:#fff; }
.kc-bento .tag-offer{ background:var(--red); color:#fff; }
.kc-bento .tag-bundle{ background:var(--amber); color:#fff; }
.kc-bento .tag-new{ background:var(--lime); color:#fff; }
.kc-bento .tile-tag + .tile-tag{ top:38px; }

.kc-bento .tile-body{ padding:12px 13px 13px; display:flex; flex-direction:column; gap:5px; flex:1; }
.kc-bento .tile-cat{ font-size:9.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
/* min-height de 2 líneas — sin esto, nombres cortos vs. largos hacían que
   el precio/botón quedaran a distinta altura entre tarjetas de la misma fila. */
.kc-bento .tile-name{ font-size:13px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.kc-bento .tile-includes{ font-size:11px; color:var(--ink-soft); margin-top:1px; }
.kc-bento .tile-price-row{ display:flex; align-items:baseline; gap:7px; margin-top:auto; flex-wrap:wrap; }
.kc-bento .tile-price{ font-family:var(--f-mono); font-weight:600; font-size:14.5px; }
.kc-bento .tile-price-old{ font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); text-decoration:line-through; }
.kc-bento .tile-price-off{ font-family:var(--f-mono); font-weight:600; font-size:14.5px; color:var(--red); }
.kc-bento .tile-consultar{ font-family:var(--f-mono); font-size:12.5px; color:var(--ink-faint); }
.kc-bento .tile-agregar{ margin-top:6px; }
.kc-bento .tile-agregar button{ width:100%; padding:8px; border-radius:var(--r-sm); background:var(--lime); color:#fff; font-weight:700; font-size:12px; }
.kc-bento .tile-agregar button:hover{ background:var(--lime-dark); }
.kc-bento .tile-agregar--opciones{ display:block; width:100%; padding:8px; border-radius:var(--r-sm); background:var(--lime); color:#fff; font-weight:700; font-size:12px; text-align:center; text-decoration:none; transition:.15s; }
.kc-bento .tile-agregar--opciones:hover{ background:var(--lime-dark); }
.kc-bento .kc-en-pedido{ display:block; font-size:10.5px; font-weight:700; color:var(--lime-dark); margin-top:4px; }

/* ================= Franja de confianza ================= */
.kc-bento .trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:22px 0 8px; }
.kc-bento .trust-item{ display:flex; align-items:center; gap:13px; padding:12px; border-radius:var(--r-md); transition:background .15s; }
.kc-bento .trust-item:hover{ background:var(--surface-2); }
.kc-bento .trust-ic{ width:40px; height:40px; border-radius:50%; color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.kc-bento .trust-item:nth-child(1) .trust-ic{ background:var(--lime); }
.kc-bento .trust-item:nth-child(2) .trust-ic{ background:var(--amber); }
.kc-bento .trust-item:nth-child(3) .trust-ic{ background:var(--indigo); }
.kc-bento .trust-item strong{ display:block; font-size:13.5px; margin-bottom:2px; }
.kc-bento .trust-item small{ font-size:12px; color:var(--ink-soft); }
@media (max-width:760px){ .kc-bento .trust{ grid-template-columns:1fr; } }

/* ================= Franja "Ofertas de la semana" ================= */
.kc-bento .flash{ background:var(--indigo); border-radius:var(--r-lg); padding:24px 24px 20px; margin-top:24px; }
.kc-bento .flash .rail-title{ color:#fff; }
.kc-bento .flash .rail-eyebrow{ color:#d7ff8f; }
.kc-bento .flash .rail-link{ color:rgba(255,255,255,.7); }
.kc-bento .flash .rail-link:hover{ color:#fff; }
.kc-bento .flash-row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:2px; }
.kc-bento .flash-card{ flex:0 0 164px; background:var(--surface); border-radius:var(--r-md); overflow:hidden; transition:transform .18s; }
.kc-bento .flash-card:hover{ transform:translateY(-3px); }
.kc-bento .flash-media{ position:relative; aspect-ratio:1; background:var(--surface-2); }
.kc-bento .flash-media img{ width:100%; height:100%; object-fit:contain; }
.kc-bento .flash-pct{ position:absolute; top:8px; left:8px; z-index:2; background:var(--red); color:#fff; font-family:var(--f-mono); font-weight:700; font-size:10.5px; padding:3px 8px; border-radius:var(--r-pill); }
.kc-bento .flash-body{ padding:10px 11px 12px; }
.kc-bento .flash-name{ font-size:12px; font-weight:600; line-height:1.3; display:block; margin-bottom:6px; min-height:2.4em; }
.kc-bento .flash-prices{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.kc-bento .flash-new{ font-family:var(--f-mono); font-weight:700; font-size:13.5px; color:var(--red); }
.kc-bento .flash-old{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-faint); text-decoration:line-through; }

/* ---- Destacados — rail de productos marcados "destacado", distinto de
   .flash (que es solo ofertas con descuento): reusa .tile-media/.tile-tag/
   .tile-body/.tile-cat/.tile-name/.tile-price-row/.tile-agregar tal cual
   (ya son clases genéricas, no dependen de estar dentro de ".tile"), solo
   hace falta el contenedor de rail + la tarjeta angosta. ---- */
.kc-bento .destacados-wrap{ margin-top:24px; }
.kc-bento .destacados-row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:2px; }
.kc-bento .destacado-card{ flex:0 0 190px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s, box-shadow .18s; }
.kc-bento .destacado-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ================= Combos armados (spotlight) ================= */
.kc-bento .combos-section{ padding:38px 0 10px; margin-top:14px; border-top:1px solid var(--line); }
/* auto-fill con un ancho de tarjeta chico (antes 3 columnas fijas hacían tarjetas
   enormes en pantallas anchas) — se acomodan solas según el espacio disponible. */
.kc-bento .combos-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px; }
@media (max-width:600px){ .kc-bento .combos-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); } }
.kc-bento .combo-spot{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.kc-bento .combo-spot:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.kc-bento .combo-spot-media{ position:relative; display:block; aspect-ratio:4/3; background:var(--amber-soft); overflow:hidden; }
.kc-bento .combo-spot-media img{ width:100%; height:100%; object-fit:contain; }
.kc-bento .combo-spot-body{ padding:12px 13px 13px; display:flex; flex-direction:column; }
.kc-bento .combo-spot-body .tile-name{ font-family:var(--f-display); font-size:13.5px; font-weight:700; display:block; margin-bottom:4px; }
.kc-bento .combo-spot-body .tile-includes{ margin-bottom:9px; font-size:11px; }
.kc-bento .combo-spot-priceblock{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.kc-bento .combo-sum{ font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); text-decoration:line-through; }
.kc-bento .combo-final{ font-family:var(--f-mono); font-weight:700; font-size:15px; color:var(--amber-dark); }
.kc-bento .combo-save-lg{ display:block; font-size:11px; font-weight:600; color:var(--lime-dark); margin-top:2px; margin-bottom:10px; }

/* ================= Secondary rail (destacados) ================= */
.kc-bento .rail-section{ padding:38px 0 56px; margin-top:14px; border-top:1px solid var(--line); }
.kc-bento .rail-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.kc-bento .rail-head--center{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; }
.kc-bento .rail-eyebrow{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:5px; }
.kc-bento .rail-title{ font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:-.005em; }
.kc-bento .rail-title--ic{ display:inline-flex; align-items:center; gap:7px; }
.kc-bento .rail-title--ic svg{ flex:none; color:var(--lime); }
.kc-bento .flash .rail-title--ic svg{ color:#d7ff8f; }
.kc-bento .rail-link{ font-size:12.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; padding-bottom:3px; transition:color .15s; }
.kc-bento .rail-link:hover{ color:var(--ink); }
.kc-bento .rail-track{ display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:4px; }
.kc-bento .rail-card{ flex:0 0 168px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; cursor:pointer; transition:.15s; }
.kc-bento .rail-card:hover{ box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.kc-bento .rail-card img{ aspect-ratio:1/1; object-fit:contain; width:100%; background:var(--surface-2); }
.kc-bento .rail-card-body{ padding:9px 10px 11px; }
.kc-bento .rail-card-name{ font-size:12px; font-weight:600; line-height:1.25; margin-bottom:5px; min-height:30px; }
.kc-bento .rail-card-price{ font-family:var(--f-mono); font-weight:600; font-size:13px; }

/* ================= Filter drawer ================= */
.kc-bento .drawer-overlay{ position:fixed; inset:0; background:rgba(20,20,30,.4); z-index:120; opacity:0; pointer-events:none; transition:.2s; }
.kc-bento .drawer-overlay.open{ opacity:1; pointer-events:auto; }
.kc-bento .drawer{ position:fixed; top:0; right:0; bottom:0; width:340px; max-width:88vw; background:var(--surface); z-index:121; transform:translateX(100%); transition:.25s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.kc-bento .drawer.open{ transform:translateX(0); }
.kc-bento .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.kc-bento .drawer-head h3{ font-family:var(--f-display); font-weight:700; font-size:17px; }
.kc-bento .drawer-close{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.kc-bento .drawer-close:hover{ background:var(--surface-2); }
.kc-bento .drawer-body{ flex:1; overflow-y:auto; padding:20px 22px; }
.kc-bento .d-group{ padding:16px 0; border-top:1px solid var(--line-soft); }
.kc-bento .d-group:first-child{ border-top:none; padding-top:0; }
.kc-bento .d-group-title{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:12px; }
.kc-bento .d-group-help{ font-size:11.5px; color:var(--ink-faint); margin:-8px 0 10px; }
.kc-bento .d-check{ display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13.5px; cursor:pointer; }
/* [hidden] tiene que ganarle a ".d-check{display:flex}" — mismo bug ya
   encontrado en la plantilla "almacen" (ver .kc-filtro-check[hidden] en
   catalogo.css): una regla de autor con la misma especificidad que
   [hidden] siempre gana si no se agrega esta excepción explícita. */
.kc-bento .d-check[hidden]{ display:none; }
.kc-bento .d-check input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; accent-color:var(--lime); }
.kc-bento .d-check.active{ color:var(--lime-dark); font-weight:700; }
.kc-bento .d-precio{ display:flex; align-items:center; gap:8px; }
.kc-bento .d-precio input{ width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; font-size:13px; }
.kc-bento .drawer-foot{ padding:18px 22px; border-top:1px solid var(--line); }
.kc-bento .btn-apply{ width:100%; padding:13px; border-radius:var(--r-sm); background:var(--indigo); color:#fff; font-weight:700; font-size:13.5px; }
.kc-bento .d-limpiar-link{ display:block; text-align:center; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.kc-bento .d-limpiar-link:hover{ color:var(--ink); }

/* ================= Carrito — bottom sheet ================= */
/* Mismo markup/ids que carrito.js espera (drawer lateral en "almacen") —
   acá se re-estila como bottom-sheet, sin tocar una línea de JS. */
.kc-bento #kcOverlay{ position:fixed; inset:0; background:rgba(20,20,30,.4); z-index:140; opacity:0; pointer-events:none; transition:.2s; }
.kc-bento #kcOverlay.kc-abierto{ opacity:1; pointer-events:auto; }
.kc-bento #kcDrawer{
  position:fixed; left:0; right:0; bottom:0; z-index:141; background:var(--surface);
  border-radius:24px 24px 0 0; max-height:82vh; display:flex; flex-direction:column;
  transform:translateY(100%); transition:.28s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg); margin:0 auto; max-width:520px;
}
.kc-bento #kcDrawer.kc-abierto{ transform:translateY(0); }
.kc-bento .kc-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 22px 14px; }
.kc-bento .kc-drawer-head::before{ content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:4px; background:var(--line); }
.kc-bento .kc-drawer-head h3{ font-family:var(--f-display); font-weight:700; font-size:17px; margin-top:8px; }
.kc-bento #kcDrawerCerrar{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:8px; }
.kc-bento #kcDrawerCerrar:hover{ background:var(--surface-2); }
.kc-bento #kcDrawerItems{ flex:1; overflow-y:auto; padding:4px 22px; }
.kc-bento .kc-drawer-vacio{ text-align:center; padding:36px 0; color:var(--ink-faint); font-size:13.5px; }
.kc-bento .kc-drawer-item{ display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.kc-bento .kc-drawer-item-img{ width:46px; height:46px; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink-faint); }
.kc-bento .kc-drawer-item-img img{ width:100%; height:100%; object-fit:contain; }
.kc-bento .kc-drawer-item-info{ flex:1; min-width:0; }
.kc-bento .kc-drawer-item-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.kc-bento .kc-drawer-item-nombre{ font-size:13px; font-weight:600; }
.kc-bento .kc-drawer-item-quitar{ color:var(--ink-faint); padding:2px; flex-shrink:0; }
.kc-bento .kc-drawer-item-quitar:hover{ color:var(--red); }
.kc-bento .kc-drawer-item-oferta{ display:inline-block; font-family:var(--f-mono); font-size:10px; color:var(--lime-dark); background:var(--lime-soft); border-radius:var(--r-sm); padding:1px 6px; margin-top:3px; }
.kc-bento .kc-drawer-item-variante{ display:block; font-family:var(--f-mono); font-size:11px; color:var(--ink-faint); margin:1px 0 2px; }
.kc-bento .kc-drawer-item-row{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.kc-bento .kc-stepper{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-sm); }
.kc-bento .kc-stepper button{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.kc-bento .kc-stepper span{ width:26px; text-align:center; font-family:var(--f-mono); font-size:12.5px; }
.kc-bento .kc-drawer-item-precio{ font-family:var(--f-mono); font-weight:600; font-size:13px; }
.kc-bento #kcCarritoBadge{ }

.kc-bento .kc-drawer-foot{ padding:14px 22px 22px; border-top:1px solid var(--line); }
.kc-bento .sf-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); padding:3px 0; }
.kc-bento .sf-row.total{ font-weight:700; color:var(--ink); font-size:17px; font-family:var(--f-mono); margin-top:6px; padding-top:10px; border-top:1px dashed var(--line); }
/* [hidden] tiene que ganarle a ".sf-row{display:flex}" — mismo bug ya
   encontrado antes en la plantilla "almacen" (ver catalogo.css:
   .kc-drawer-sub[hidden]) — si no, "Descuento"/"Total" quedan visibles
   en $0 aunque carrito.js les puso hidden=true. */
.kc-bento .sf-row[hidden]{ display:none; }
.kc-bento .btn-checkout{ width:100%; margin-top:14px; padding:14px; border-radius:var(--r-sm); background:var(--lime); color:#fff; font-weight:700; font-size:14px; }
.kc-bento .btn-checkout:hover{ background:var(--lime-dark); }
.kc-bento .btn-checkout:disabled{ opacity:.6; cursor:default; }
.kc-bento .btn-volver{ width:100%; margin-top:10px; padding:12px; border-radius:var(--r-sm); border:1.5px solid var(--line); font-weight:600; font-size:13.5px; }
.kc-bento .kc-form-field{ margin-bottom:14px; }
.kc-bento .kc-form-field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; }
.kc-bento .kc-form-field label span{ font-weight:400; color:var(--ink-faint); }
.kc-bento .kc-form-field input, .kc-bento .kc-form-field textarea{ width:100%; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-size:13.5px; background:var(--surface); color:var(--ink); }
.kc-bento .kc-form-error{ font-size:12.5px; color:var(--red); margin-bottom:10px; }
.kc-bento .kc-drawer-exito{ text-align:center; padding:20px 0 6px; }
.kc-bento .kc-drawer-exito svg{ color:var(--lime); margin:0 auto 10px; }

/* ================= Detalle de producto ================= */
.kc-bento .kc-breadcrumb{ padding:18px 0 4px; font-size:12.5px; color:var(--ink-faint); display:flex; gap:6px; flex-wrap:wrap; }
.kc-bento .kc-breadcrumb a:hover{ color:var(--ink); }
/* align-items:start (no stretch) — la columna de info es siempre más larga
   (ficha técnica completa con "—" en los campos vacíos), así que sin esto la
   galería se estiraba dejando un hueco vacío debajo de las miniaturas. Con
   sticky, la galería acompaña el scroll de la info en vez de quedar estática
   con espacio de sobra (mismo patrón ya usado en Almacén). */
/* Toda la sección (galería+info) vive en UNA sola tarjeta — antes era un grid
   pelado sin fondo/sombra, se sentía desconectado del resto de Bento (que usa
   tarjeta+sombra en todo). Inspirado en una referencia que trajo el usuario. */
.kc-bento .kc-detalle{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin:20px 0 40px; padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.kc-bento .kc-galeria-col{ position:sticky; top:76px; }

/* Alto fijo (no aspect-ratio:1/1) — la imagen cuadrada quedaba mucho más
   grande de lo que mostraba la referencia; con alto fijo el ancho de la
   columna ya no infla la altura de la imagen. */
.kc-bento .kc-galeria-principal{ position:relative; height:420px; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); }
.kc-bento .kc-galeria-principal img{ width:100%; height:100%; object-fit:contain; cursor:zoom-in; }
.kc-bento .kc-galeria-badges{ position:absolute; top:12px; left:12px; z-index:2; display:flex; gap:6px; flex-wrap:wrap; }
.kc-bento .kc-galeria-badges .tile-tag{ position:static; }
.kc-bento .kc-galeria-expandir{
  position:absolute; bottom:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; color:var(--ink); box-shadow:var(--shadow-sm); transition:.15s;
}
.kc-bento .kc-galeria-expandir:hover{ background:var(--surface); }
.kc-bento .kc-galeria-thumbs{ display:flex; gap:10px; margin-top:12px; }
.kc-bento .kc-thumb{ width:64px; height:64px; border-radius:var(--r-sm); overflow:hidden; border:1.5px solid var(--line); opacity:.7; }
.kc-bento .kc-thumb--activo{ opacity:1; border-color:var(--lime); }
.kc-bento .kc-thumb img{ width:100%; height:100%; object-fit:contain; background:var(--surface-2); }

/* Lightbox del zoom — overlay simple, sin librería (ver bento.js) */
.kc-bento .kc-lightbox{ position:fixed; inset:0; z-index:200; background:rgba(15,16,26,.92); display:flex; align-items:center; justify-content:center; padding:5vh 5vw; opacity:0; pointer-events:none; transition:opacity .18s; }
.kc-bento .kc-lightbox.open{ opacity:1; pointer-events:auto; }
.kc-bento .kc-lightbox img{ max-width:100%; max-height:90vh; width:auto; border-radius:var(--r-md); box-shadow:var(--shadow-lg); }
.kc-bento .kc-lightbox-cerrar{ position:absolute; top:20px; right:24px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; }
.kc-bento .kc-lightbox-cerrar:hover{ background:rgba(255,255,255,.22); }

.kc-bento .kc-detalle-topmeta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.kc-bento .kc-meta-sep{ color:var(--ink-faint); font-size:11px; }
.kc-bento .kc-stock-indicador{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 10px 3px 8px; border-radius:var(--r-pill); }
.kc-bento .kc-stock-indicador--ok{ color:var(--lime-dark); background:var(--lime-soft); }
.kc-bento .kc-stock-indicador--no{ color:var(--ink-faint); background:var(--surface-2); }
.kc-bento .kc-stock-dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); }

.kc-bento .kc-detalle-nombre{ font-family:var(--f-system); font-weight:800; font-size:29.5px; line-height:1.25; letter-spacing:normal; margin:8px 0 4px; }
.kc-bento .kc-detalle-marca{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; }

.kc-bento .kc-detalle-precio-card{ background:var(--surface-2); border-radius:var(--r-md); padding:16px 18px; margin-bottom:14px; }
.kc-bento .kc-detalle-precio{ display:flex; align-items:baseline; gap:10px; }
.kc-bento .kc-precio-final--grande{ font-family:var(--f-system); font-weight:800; font-size:35px; letter-spacing:-.5px; }
.kc-bento .kc-detalle-unidad{ font-size:13px; color:var(--ink-faint); }
.kc-bento .kc-detalle-ahorro{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--lime-dark); margin:8px 0 0; }

/* Descripción simple, sin título — va justo debajo del precio, separada del
   resto por un borde inferior (antes tenía un <h2>"Descripción" y vivía más
   abajo, después del botón; el orden nuevo deja leer antes de decidir comprar). */
.kc-bento .kc-detalle-desc-plain{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--line); }

.kc-bento .kc-detalle-descripcion{ margin-bottom:18px; }
.kc-bento .kc-detalle-descripcion h2{ font-family:var(--f-display); font-size:15px; font-weight:700; margin-bottom:8px; }
.kc-bento .kc-detalle-incluye li{ font-size:13.5px; padding:4px 0; color:var(--ink-soft); }

.kc-bento .kc-detalle-agregar{ margin:0 0 18px; }
.kc-bento .kc-detalle-agregar button{ width:100%; padding:14px 28px; border-radius:var(--r-sm); background:var(--lime); color:#fff; font-weight:700; font-size:14px; }
.kc-bento .kc-detalle-agregar button:hover:not(:disabled){ background:var(--lime-dark); }
.kc-bento .kc-detalle-agregar button:disabled{ opacity:.5; cursor:not-allowed; }

/* Selector de variantes (color/sabor/talle) — mismo lenguaje mosaico/lima
   que el resto de Bento. La lógica de click/resolución vive en
   variantes.js (compartida con las otras plantillas), acá solo el
   aspecto. */
.kc-bento .kc-variantes{ margin:0 0 16px; }
.kc-bento .kc-variante-grupo{ margin-bottom:12px; }
.kc-bento .kc-variante-tipo-nombre{ display:block; font-size:12px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px; }
.kc-bento .kc-variante-opciones{ display:flex; flex-wrap:wrap; gap:8px; }
.kc-bento .kc-variante-opcion{ font-size:13px; font-weight:600; padding:8px 15px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--surface); color:var(--ink); transition:.15s; }
.kc-bento .kc-variante-opcion:hover{ border-color:var(--lime); }
.kc-bento .kc-variante-opcion.kc-variante-activa{ border-color:var(--lime); background:var(--lime); color:#fff; }
.kc-bento .kc-variante-estado{ font-size:12.5px; color:var(--ink-faint); margin:6px 0 0; }

.kc-bento .kc-detalle-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:18px; }
.kc-bento .kc-tag-chip{ font-size:11.5px; font-weight:600; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 11px; }

/* Ficha técnica: grid único de specs con dato real (los campos vacíos no
   generan fila — antes se mostraban todos con "—", muy cargado). Las 4
   banderas de seguridad (frágil/refrigeración/peligroso/perecedero) son la
   excepción: se muestran siempre en Sí/No, porque un "No" real es información
   útil y omitirla perdería esa garantía. */
.kc-bento .kc-detalle-ficha{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.kc-bento .kc-detalle-ficha h3{ font-family:var(--f-display); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:12px; }
.kc-bento .kc-detalle-specs{ display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }
@media (max-width:560px){ .kc-bento .kc-detalle-specs{ grid-template-columns:1fr; } }
.kc-bento .kc-detalle-specs div{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding-bottom:6px; border-bottom:1px dashed var(--line); }
.kc-bento .kc-detalle-specs span{ color:var(--ink-soft); }
.kc-bento .kc-detalle-specs strong{ font-weight:600; text-align:right; }
.kc-bento .kc-spec-si{ color:var(--red); }
.kc-bento .kc-spec-no{ color:var(--ink-faint); font-weight:500; }

.kc-bento .kc-detalle-badges{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.kc-bento .kc-detalle-badge{
    font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px;
    background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);
}
.kc-bento .kc-detalle-badge--fragil  { color:#b45309; border-color:rgba(180,83,9,.3); background:rgba(180,83,9,.08); }
.kc-bento .kc-detalle-badge--frio    { color:#1e6fa8; border-color:rgba(30,111,168,.3); background:rgba(30,111,168,.08); }
.kc-bento .kc-detalle-badge--peligro { color:#dc2626; border-color:rgba(220,38,38,.3); background:rgba(220,38,38,.08); }

.kc-bento .kc-detalle-caracteristicas{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.kc-bento .kc-detalle-caracteristicas h2{ font-family:var(--f-display); font-size:15px; font-weight:700; margin-bottom:8px; }
.kc-bento .kc-detalle-caracteristicas ul{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.kc-bento .kc-detalle-caracteristicas li{ font-size:13px; color:var(--ink-soft); padding-left:16px; position:relative; }
.kc-bento .kc-detalle-caracteristicas li::before{
    content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--lime);
}

/* Franja de confianza en caja propia (fondo suave) — antes era una lista
   suelta sin agrupar, se perdía entre el resto de secciones. Mismo copy que
   la franja de la home (.trust-item), reusado tal cual, no inventado de nuevo. */
.kc-bento .kc-detalle-trust{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; padding:14px 16px; background:var(--surface-2); border-radius:var(--r-md); }
.kc-bento .kc-detalle-trust-item{ display:flex; align-items:center; gap:11px; }
.kc-bento .kc-detalle-trust-ic{ width:32px; height:32px; border-radius:9px; background:var(--indigo-soft); color:var(--indigo); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
html[data-theme="dark"] .kc-bento .kc-detalle-trust-ic{ color:#9aa3ff; }
.kc-bento .kc-detalle-trust-item strong{ display:block; font-size:12.5px; }
.kc-bento .kc-detalle-trust-item small{ display:block; font-size:11.5px; color:var(--ink-soft); margin-top:1px; }

/* ================= "La tienda" — página institucional ================= */
.kc-bento .inst-portada{ position:relative; background:var(--indigo); overflow:hidden; margin-top:0; }
.kc-bento .inst-portada-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.kc-bento .inst-portada::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(23,25,39,.25), rgba(23,25,39,.75)); }
.kc-bento .inst-portada--sin-imagen::after{ background:none; }
.kc-bento .inst-portada-inner{ position:relative; z-index:2; padding:64px 26px; text-align:center; max-width:640px; margin:0 auto; }
.kc-bento .inst-portada-inner h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(26px,3.6vw,38px); color:#fff; letter-spacing:-.015em; margin-bottom:12px; }
.kc-bento .inst-portada-inner p{ color:rgba(255,255,255,.78); font-size:14.5px; line-height:1.6; }

/* Sub-nav ancorado sticky — top medido en vivo por bento.js (--topbar-h),
   no un valor fijo (ver comentario en bento.js sobre por qué). */
.kc-bento .inst-subnav{ position:sticky; top:var(--topbar-h, 68px); z-index:50; display:flex; gap:22px; overflow-x:auto; padding:14px 26px; background:var(--surface); border-bottom:1px solid var(--line); }
.kc-bento .inst-subnav a{ font-family:var(--f-display); font-weight:600; font-size:12.5px; color:var(--ink-soft); white-space:nowrap; padding-bottom:2px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
.kc-bento .inst-subnav a:hover{ color:var(--ink); }
.kc-bento .inst-subnav a.inst-subnav-activo{ color:var(--ink); border-color:var(--lime); }
.kc-bento [id^="kc-inst-"]{ scroll-margin-top:calc(var(--topbar-h, 68px) + 46px); }

/* Banda de historia — abre el mosaico, "abraza" junto con .inst-contacto
   (misma banda sólida al final) el tablero de tiles del medio. A propósito
   NO es una tarjeta más de la grilla: es el único bloque a todo el ancho
   entre la portada y el mosaico, para que el ritmo de la página sea
   banda→mosaico→banda en vez de secciones apiladas todas iguales (que es
   justo lo que hacía sentir a esta página igual a la de Almacén). */
.kc-bento .tm-historia{ background:var(--indigo); }
.kc-bento .tm-historia-inner{ position:relative; padding:52px 26px; max-width:760px; }
.kc-bento .tm-historia-quote{ color:var(--lime); opacity:.9; margin-bottom:14px; }
.kc-bento .tm-historia .rail-eyebrow{ display:block; color:#d7ff8f; margin-bottom:10px; }
.kc-bento .tm-historia p{ font-family:var(--f-display); font-size:clamp(17px,2.2vw,22px); font-weight:600; line-height:1.5; color:#fff; letter-spacing:-.005em; }

/* Versión "pausa" de la banda de historia, para la home (ver bento/home.html)
   — mismo bloque que La Tienda pero más bajo, con un link corto en vez de
   ser la sección principal de la página. */
.kc-bento .tm-historia--home .tm-historia-inner{ padding:38px 26px; }
.kc-bento .tm-historia--home p{ font-size:clamp(15.5px,1.8vw,18px); }
.kc-bento .tm-historia-link{ display:inline-block; margin-top:16px; font-family:var(--f-display); font-weight:700; font-size:13px; color:var(--lime); }
.kc-bento .tm-historia-link:hover{ text-decoration:underline; }

/* ---- Marcas — logos circulares, solo prestigio (no filtran el catálogo). ---- */
.kc-bento .brands-wrap{ padding:36px 0; text-align:center; }
.kc-bento .brands{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.kc-bento .brand-badge{ width:72px; height:72px; border-radius:50%; border:1px solid var(--line); overflow:hidden; filter:grayscale(1); opacity:.75; transition:.2s; }
.kc-bento .brand-badge img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.kc-bento .brand-badge:hover{ filter:none; opacity:1; border-color:var(--lime); }

/* ---- Banda CTA final — misma familia que .tm-historia pero en lima, para
   no repetir el color índigo dos veces cerca (esta va al final, lejos de
   "Nuestra historia") y para que se lea como un mensaje distinto (servicio,
   no la historia de la marca). Título vacío = no se muestra (ver home.html). ---- */
.kc-bento .cta-band{ position:relative; background:var(--lime); background-size:cover; background-position:center; padding:44px 26px; margin-top:14px; text-align:center; overflow:hidden; }
.kc-bento .cta-band.has-img::before{ content:''; position:absolute; inset:0; background:linear-gradient(rgba(20,24,10,.6), rgba(20,24,10,.6)); }
.kc-bento .cta-band .shell{ position:relative; z-index:1; }
.kc-bento .cta-band .rail-eyebrow{ color:rgba(255,255,255,.8); }
.kc-bento .cta-band h3{ font-family:var(--f-display); font-size:clamp(19px,2.4vw,26px); color:#fff; margin:0 auto 8px; max-width:520px; }
.kc-bento .cta-band p{ color:rgba(255,255,255,.85); font-size:13px; margin:0 auto 16px; max-width:440px; }
.kc-bento .cta-band .btn{ display:inline-block; background:#fff; color:var(--lime-dark); font-family:var(--f-display); font-weight:700; font-size:13px; padding:11px 22px; border-radius:var(--r-pill); }

/* Mosaico central — celdas de tamaño mixto en una sola grilla (mismo
   lenguaje que .bento/.stories-rail de la home), reemplaza las 3 tarjetas
   iguales + la grilla de galería separada que tenía antes. */
.kc-bento .tm-mosaico{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; grid-auto-flow:dense; gap:14px; padding:28px 0 8px; }
@media (max-width:900px){ .kc-bento .tm-mosaico{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .kc-bento .tm-mosaico{ grid-template-columns:1fr; grid-auto-rows:auto; } .kc-bento .tm-mosaico .tm-tile--grande,.kc-bento .tm-mosaico .tm-tile--ancha{ grid-column:auto; grid-row:auto; min-height:220px; } }

.kc-bento .tm-tile{ position:relative; border-radius:var(--r-lg); overflow:hidden; transition:transform .2s, box-shadow .2s; }
.kc-bento .tm-tile--grande{ grid-column:span 2; grid-row:span 2; }
.kc-bento .tm-tile--ancha{ grid-column:span 2; grid-row:span 1; }

.kc-bento .tm-tile--num{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:20px; display:flex; flex-direction:column; }
.kc-bento .tm-tile--num:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.kc-bento .tm-tile--grande.tm-tile--num{ justify-content:flex-end; }
/* Número decorativo grande de fondo — sin esto la tarjeta grande quedaba con
   mucho espacio vacío arriba (solo texto anclado abajo en una caja 2x2). */
.kc-bento .tm-tile--grande.tm-tile--num::before{ content:attr(data-num); position:absolute; top:8px; right:16px; font-family:var(--f-mono); font-weight:700; font-size:88px; line-height:1; color:var(--lime-soft); z-index:0; }
.kc-bento .tm-tile--grande.tm-tile--num > *{ position:relative; z-index:1; }
.kc-bento .tm-num{ display:block; font-family:var(--f-mono); font-weight:700; font-size:12px; color:var(--lime-dark); background:var(--lime-soft); border-radius:var(--r-pill); padding:2px 9px; width:max-content; margin-bottom:12px; }
.kc-bento .tm-tile--grande.tm-tile--num .tm-num{ display:none; }
.kc-bento .tm-tile--num h3{ font-family:var(--f-display); font-size:15.5px; font-weight:700; margin-bottom:6px; }
.kc-bento .tm-tile--grande.tm-tile--num h3{ font-size:19px; }
.kc-bento .tm-tile--num p{ font-size:13px; color:var(--ink-soft); line-height:1.55; }

.kc-bento .tm-tile--stats{ background:var(--lime-soft); display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:0 22px; }
.kc-bento .tm-tile--stats .inst-stat{ display:flex; flex-direction:column; gap:1px; }
.kc-bento .tm-tile--stats .inst-stat-num{ font-family:var(--f-mono); font-weight:700; font-size:24px; color:var(--lime-dark); letter-spacing:-.02em; }
.kc-bento .tm-tile--stats .inst-stat-label{ font-size:11px; color:var(--ink-soft); }

.kc-bento .tm-tile--foto{ background:var(--surface-2); display:block; }
.kc-bento .tm-tile--foto img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.kc-bento .tm-tile--foto:hover img{ transform:scale(1.05); }
.kc-bento .tm-foto-caption{ position:absolute; left:0; right:0; bottom:0; padding:8px 10px; font-size:11.5px; color:#fff; background:linear-gradient(0deg, rgba(23,25,39,.75), transparent); }

.kc-bento .inst-info{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:24px 0; }
@media (max-width:760px){ .kc-bento .inst-info{ grid-template-columns:1fr; } }
.kc-bento .inst-info-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:20px 22px; }
.kc-bento .inst-info-card h3{ display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-size:13.5px; font-weight:700; color:var(--indigo); margin-bottom:10px; }
html[data-theme="dark"] .kc-bento .inst-info-card h3{ color:#9aa3ff; }
.kc-bento .inst-info-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.kc-bento .inst-info-vacio{ color:var(--ink-faint); font-style:italic; }
.kc-bento .inst-mapa-wrap{ margin:10px 0; border-radius:var(--r-md); overflow:hidden; height:200px; }
.kc-bento .inst-mapa-wrap iframe{ width:100%; height:100%; border:0; display:block; }

.kc-bento .inst-contacto{ padding:14px 0 56px; }
.kc-bento .inst-contacto-card{ background:var(--indigo); border-radius:var(--r-lg); padding:34px 36px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.kc-bento .inst-contacto-texto h2{ font-family:var(--f-display); font-size:20px; font-weight:700; color:#fff; margin-bottom:8px; }
.kc-bento .inst-contacto-texto p{ font-size:13.5px; color:rgba(255,255,255,.75); max-width:420px; margin-bottom:10px; }
.kc-bento .inst-contacto-datos{ display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.85); margin-bottom:10px; }
.kc-bento .inst-contacto-card .foot-redes a{ background:rgba(255,255,255,.1); }
.kc-bento .inst-contacto-card .foot-redes a:hover{ background:rgba(255,255,255,.2); }
.kc-bento .inst-whatsapp-btn{ margin-top:0; flex-shrink:0; }

/* padding-bottom era 100px — quedaba una franja vacía enorme debajo de la
   línea de copyright, mucho más alto que cualquier otro pie del sitio. */
footer.kc-bento-footer{ background:var(--indigo); color:rgba(255,255,255,.65); padding:48px 0 0; }
footer.kc-bento-footer .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; }
@media (max-width:760px){ footer.kc-bento-footer .foot-grid{ grid-template-columns:1fr; gap:26px; } }
footer.kc-bento-footer b{ color:#fff; font-family:var(--f-display); font-size:14.5px; font-weight:700; }
footer.kc-bento-footer h4{ color:rgba(255,255,255,.85); font-family:var(--f-mono); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; }
footer.kc-bento-footer .foot-col{ font-size:12.5px; line-height:1.6; }
footer.kc-bento-footer .foot-col--brand{ max-width:360px; }
/* logo + nombre — antes solo había texto, sin ninguna marca visual en el pie */
.kc-bento .foot-brand-head{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
/* Sin celda de fondo ni tamaño fijo (mismo criterio que .brand-mark del
   header): siempre hay una imagen real, un cuadro detrás la recortaba y la
   achicaba de más si el logo no era cuadrado. */
.kc-bento .foot-brand-mark{ flex-shrink:0; display:flex; align-items:center; }
.kc-bento .foot-brand-mark img{ height:32px; width:auto; max-width:120px; object-fit:contain; }
footer.kc-bento-footer .foot-links{ display:flex; flex-direction:column; gap:9px; }
footer.kc-bento-footer .foot-links a:hover{ color:var(--lime); }
/* fila de íconos de redes — reusada también en la página institucional */
.kc-bento .foot-redes{ display:flex; gap:10px; margin-top:16px; }
.kc-bento .foot-redes a{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .15s; }
.kc-bento .foot-redes a:hover{ background:var(--lime); color:#fff; }
/* botón CTA de WhatsApp — reusado también en la página institucional (.inst-contacto-card), no es exclusivo del footer */
.kc-bento .footer-wa{ display:inline-flex; align-items:center; gap:8px; background:var(--lime); color:#fff; font-weight:700; font-size:12.5px; padding:10px 16px; border-radius:var(--r-pill); margin-top:14px; width:max-content; transition:background .15s; }
.kc-bento .footer-wa:hover{ background:var(--lime-dark); }
footer.kc-bento-footer .foot-contacto{ font-size:12px; }
footer.kc-bento-footer .foot-contacto div{ display:flex; align-items:flex-start; gap:8px; margin-bottom:9px; }
footer.kc-bento-footer .foot-contacto div svg{ flex-shrink:0; margin-top:1px; opacity:.6; }
footer.kc-bento-footer .foot-bottom{ max-width:1320px; margin:36px auto 0; padding:18px 26px 26px; border-top:1px solid rgba(255,255,255,.12); font-size:11.5px; color:rgba(255,255,255,.45); text-align:center; }
#kcFooterContacto:empty{ display:none; }

/* Nav principal envuelve a una segunda fila scrolleable en pantallas angostas
   (mismo lenguaje visual que .stories-rail/.subbar-inner) en vez de desaparecer —
   Ofertas/Combos/La tienda tienen que seguir siendo alcanzables en mobile. */
@media (max-width:980px){
  .kc-bento .topbar-inner{ flex-wrap:wrap; row-gap:8px; }
  .kc-bento .main-nav{ order:5; flex-basis:100%; overflow-x:auto; gap:18px; padding-bottom:2px; scrollbar-width:none; }
  .kc-bento .main-nav::-webkit-scrollbar{ display:none; }
}

@media (max-width:860px){
  .kc-bento .search-wrap{ display:none; }
  .kc-bento .icon-btn.search-toggle{ display:flex; }
  .kc-bento .topbar.search-open .search-wrap{ display:flex; order:6; flex-basis:100%; max-width:none; margin-top:2px; }
  .kc-bento .c-overlay{ max-width:80%; padding:0 26px; }
}

@media (max-width:700px){
  .kc-bento .bento{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .kc-bento .kc-detalle{ grid-template-columns:1fr; gap:24px; padding:20px; margin:14px 0 28px; }
  .kc-bento .kc-galeria-col{ position:static; }
  .kc-bento .kc-galeria-principal{ height:300px; }
}

/* ================= Responsive integral de Bento =================
   Los breakpoints anteriores resolvían piezas aisladas. Este bloque ordena
   la composición completa (header, home, detalle e institucional) y va al
   final para que las decisiones de mobile ganen por cascada. */
@media (max-width:900px){
  .kc-bento .shell{ padding-left:20px; padding-right:20px; }
  .kc-bento .topbar-inner{ padding-left:20px; padding-right:20px; }
  .kc-bento .topbar.shrink .topbar-inner{ padding-left:20px; padding-right:20px; }
  .kc-bento .hero-row{ margin-top:14px; }
  .kc-bento .hero-side{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kc-bento .side-spot{ min-height:0; aspect-ratio:16/9; }
  .kc-bento .promo-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kc-bento .tm-historia-inner{ padding-left:20px; padding-right:20px; }
  footer.kc-bento-footer .foot-bottom{ padding-left:20px; padding-right:20px; }
}

@media (max-width:700px){
  .kc-bento{ overflow-x:clip; }
  .kc-bento .shell{ padding-left:16px; padding-right:16px; }

  .kc-bento .ticker{ min-height:36px; }
  .kc-bento .ticker-msg{ line-height:1.25; }

  .kc-bento .topbar-inner{ gap:8px; padding:10px 16px; }
  .kc-bento .topbar.shrink .topbar-inner{ padding:8px 16px; }
  .kc-bento .brand{ min-width:0; }
  .kc-bento .brand-mark img{ height:32px; max-width:112px; }
  .kc-bento .brand-text{ display:none; }
  .kc-bento .top-actions{ gap:2px; }
  .kc-bento .theme-switch{ width:38px; }
  .kc-bento .theme-switch i{ width:18px; height:18px; top:3px; }
  html[data-theme="dark"] .kc-bento .theme-switch i{ left:17px; }
  .kc-bento .btn-login{ width:36px; height:36px; padding:0; justify-content:center; font-size:0; }
  .kc-bento .btn-login svg{ width:16px; height:16px; }
  .kc-bento .main-nav{ gap:16px; margin:0 -16px; padding:4px 16px 3px; }
  .kc-bento .main-nav a{ font-size:12px; }
  .kc-bento .topbar.search-open .search-wrap{ margin-top:0; }

  .kc-bento .hero-row{ gap:10px; }
  .kc-bento .carousel-track-wrap,
  .kc-bento .hero-simple{ height:auto; min-height:0; aspect-ratio:4/3; border-radius:var(--r-md); }
  .kc-bento .hero-simple{ padding:24px; }
  .kc-bento .c-overlay{
    max-width:none; padding:22px; justify-content:flex-end;
    background:linear-gradient(0deg,rgba(23,25,39,.9) 0%,rgba(23,25,39,.5) 60%,rgba(23,25,39,.08) 100%);
  }
  .kc-bento .c-eyebrow{ font-size:10px; margin-bottom:6px; }
  .kc-bento .c-title{ font-size:clamp(22px,7vw,30px); margin-bottom:7px; }
  .kc-bento .c-desc{ font-size:12.5px; line-height:1.4; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .kc-bento .c-cta{ padding:9px 14px; font-size:12px; }
  .kc-bento .c-arrow{ width:34px; height:34px; }
  .kc-bento .c-arrow.prev{ left:10px; }
  .kc-bento .c-arrow.next{ right:10px; }
  .kc-bento .c-dots{ bottom:10px; }
  .kc-bento .hero-side{ gap:10px; }
  .kc-bento .side-spot{ aspect-ratio:4/3; border-radius:var(--r-md); }
  .kc-bento .side-spot-overlay{ padding:12px; }
  .kc-bento .side-spot-overlay .tag{ font-size:8.5px; margin-bottom:5px; }
  .kc-bento .side-spot-overlay h3{ font-size:12.5px; }
  .kc-bento .side-spot-overlay .price{ font-size:13px; }

  .kc-bento .trust{
    display:flex; gap:10px; overflow-x:auto; padding:14px 0 4px; margin:0;
    scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .kc-bento .trust::-webkit-scrollbar{ display:none; }
  .kc-bento .trust-item{ flex:0 0 min(280px,calc(100vw - 64px)); padding:11px; background:var(--surface); border:1px solid var(--line); scroll-snap-align:start; }
  .kc-bento .trust-ic{ width:36px; height:36px; }
  .kc-bento .trust-item strong{ font-size:12.5px; }
  .kc-bento .trust-item small{ font-size:11px; }

  .kc-bento .stories-wrap{ padding:20px 0 2px; }
  .kc-bento .stories-rail{
    display:flex; gap:12px; max-width:none; margin:0; padding:2px 16px 6px;
    overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .kc-bento .stories-rail::-webkit-scrollbar{ display:none; }
  .kc-bento .story{ flex:0 0 84px; scroll-snap-align:start; }
  .kc-bento .story-ring{ width:54px; height:54px; }
  .kc-bento .story-label{ min-height:3.6em; font-size:10px; }

  .kc-bento .ads-wrap,
  .kc-bento .promo-grid-wrap{ padding-top:26px; }
  .kc-bento .rail-head{ align-items:center; margin-bottom:12px; }
  .kc-bento .rail-title{ font-size:17px; }
  .kc-bento .rail-eyebrow{ font-size:9.5px; }
  .kc-bento .ads-rail{ gap:12px; scroll-padding-left:0; }
  .kc-bento .ad-card{ flex-basis:calc(100vw - 48px); max-width:360px; border-radius:var(--r-md); }
  .kc-bento .ad-card-overlay{ padding:15px; gap:8px; }
  .kc-bento .ad-card-title{ font-size:15px; }
  .kc-bento .ad-card-text{ font-size:11.5px; }
  .kc-bento .ad-card-cta{ font-size:11px; padding:7px 12px; }
  .kc-bento .promo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .kc-bento .promo-card{ padding:12px; border-radius:var(--r-md); }

  .kc-bento .subbar{ box-shadow:0 5px 14px -12px rgba(23,25,39,.4); }
  .kc-bento .subbar-inner{ padding:10px 16px; gap:8px; }
  .kc-bento .subbar-right{ gap:6px; }
  .kc-bento .result-count{ font-size:11px; }
  .kc-bento .sort-select,
  .kc-bento .filter-fab{ min-height:36px; padding:7px 9px; font-size:11.5px; }

  .kc-bento .flash{ padding:18px 14px 16px; margin-top:18px; border-radius:var(--r-md); }
  .kc-bento .flash-row,
  .kc-bento .destacados-row{ gap:10px; }
  .kc-bento .flash-card{ flex-basis:150px; }
  .kc-bento .destacado-card{ flex-basis:165px; }
  .kc-bento .bento{ gap:10px; padding:18px 0 38px; }
  .kc-bento .tile{ border-radius:var(--r-md); }
  .kc-bento .tile-body{ padding:10px; }
  .kc-bento .tile-name{ font-size:12px; }
  .kc-bento .tile-agregar button,
  .kc-bento .tile-agregar--opciones{ font-size:11.5px; padding:8px 5px; }
  .kc-bento .banner-strip{ padding:16px 0; }
  .kc-bento .banner-strip-item{ min-height:140px; border-radius:var(--r-md); }
  .kc-bento .banner-strip-copy{ padding:18px; max-width:88%; }
  .kc-bento .banner-strip-copy b{ font-size:16px; }
  .kc-bento .combos-section{ padding-top:28px; }
  .kc-bento .cta-band{ padding:34px 16px; }
  .kc-bento .brands-wrap{ padding:28px 0; }
  .kc-bento .brands{ gap:14px; }
  .kc-bento .tm-historia-inner,
  .kc-bento .tm-historia--home .tm-historia-inner{ padding:34px 16px; }

  .kc-bento .drawer{ width:100%; max-width:100vw; }
  .kc-bento #kcDrawer{ max-width:none; max-height:88dvh; }
  .kc-bento #kcDrawerItems{ padding-left:16px; padding-right:16px; }
  .kc-bento .kc-drawer-foot{ padding:12px 16px calc(16px + env(safe-area-inset-bottom)); }

  .kc-bento .kc-breadcrumb{ padding-top:12px; }
  .kc-bento .kc-detalle{ gap:18px; padding:14px; margin:10px 0 24px; border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
  .kc-bento .kc-galeria-principal{ height:auto; aspect-ratio:1; border-radius:var(--r-md); }
  .kc-bento .kc-galeria-thumbs{ overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }
  .kc-bento .kc-galeria-thumbs::-webkit-scrollbar{ display:none; }
  .kc-bento .kc-detalle-nombre{ font-size:clamp(23px,7vw,29px); }
  .kc-bento .kc-detalle-precio-card{ padding:14px; }
  .kc-bento .kc-detalle-specs{ grid-template-columns:1fr; }

  .kc-bento .inst-portada-inner{ padding:44px 16px; }
  .kc-bento .inst-subnav{ padding:11px 16px; gap:18px; scrollbar-width:none; }
  .kc-bento .inst-subnav::-webkit-scrollbar{ display:none; }
  .kc-bento .tm-mosaico{ gap:10px; padding-top:18px; }
  .kc-bento .tm-tile--num{ padding:18px; }
  .kc-bento .tm-tile--stats{ padding:18px; }
  .kc-bento .inst-info{ gap:10px; padding:18px 0; }
  .kc-bento .inst-info-card{ padding:18px; }
  .kc-bento .inst-contacto{ padding:8px 0 36px; }
  .kc-bento .inst-contacto-card{ padding:24px 20px; align-items:stretch; }
  .kc-bento .inst-whatsapp-btn{ justify-content:center; width:100%; }

  footer.kc-bento-footer{ margin-top:34px; padding-top:34px; }
  footer.kc-bento-footer .foot-grid{ gap:22px; }
  footer.kc-bento-footer .foot-bottom{ margin-top:26px; padding-left:16px; padding-right:16px; }
}

@media (max-width:420px){
  .kc-bento .hero-simple{ padding:20px; }
  .kc-bento .c-overlay{ padding:18px; }
  .kc-bento .c-desc{ -webkit-line-clamp:2; }
  .kc-bento .c-arrow{ display:none; }
  .kc-bento .story{ flex-basis:78px; }
  .kc-bento .promo-grid{ gap:8px; }
  .kc-bento .promo-card-copy b{ font-size:13px; }
  .kc-bento .promo-card-copy small{ font-size:10px; }
  .kc-bento .promo-card-cta{ font-size:9.5px; padding:5px 8px; }
  .kc-bento .result-count{ flex-basis:100%; }
  .kc-bento .subbar-right{ width:100%; }
  .kc-bento .subbar-right form{ flex:1; }
  .kc-bento .sort-select{ width:100%; }
  .kc-bento .filter-fab{ flex:none; }
  .kc-bento .bento{ gap:8px; }
  .kc-bento .tile-body{ padding:9px; }
  .kc-bento .tile-cat{ font-size:8.5px; }
  .kc-bento .tile-price,
  .kc-bento .tile-price-off{ font-size:13px; }
}