/* ============================================================
   Ventas Baratas — HOME rediseñada (= mockup aprobado)
   Todo scopeado bajo .hp. Datos reales (banners/productos/cat).
   ============================================================ */
.hp{
  --ground:#F6F4F1;--surface:#FFFFFF;--surface-2:#FBFAF8;
  --ink:#1E2430;--ink-soft:#3C4453;--muted:#6A7280;
  --line:#ECE7E1;--line-2:#E3DED7;
  --brand:#FF9A00;--brand-deep:#E67B00;--brand-ink:#8A4B00;
  --tint:#FFF3E2;--tint-2:#FFE7C7;
  --trust:#0FA958;--trust-tint:#E7F6EE;--star:#F5A524;
  --sh-sm:0 1px 2px rgba(30,36,48,.05),0 1px 3px rgba(30,36,48,.06);
  --sh-md:0 6px 20px -6px rgba(30,36,48,.14);
  --sh-lg:0 18px 44px -18px rgba(30,36,48,.28);
  --r:14px;--r-lg:20px;--r-xl:28px;
  background:var(--ground);color:var(--ink);padding-bottom:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.hp *{box-sizing:border-box}
.hp .wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.hp .hp-h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hp .eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep)}
.hp h1,.hp h2,.hp h3{margin:0;letter-spacing:-.02em}
.hp .section{padding:52px 0}
.hp .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.hp .section-head h2{font-size:clamp(21px,2.9vw,29px);font-weight:800;color:var(--ink)}
.hp .section-head .sub{color:var(--muted);font-size:14px;margin-top:6px}
.hp .link-more{font-size:14px;font-weight:700;color:var(--brand-deep);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.hp .link-more svg{width:15px;height:15px}
.hp .ui{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;font-family:inherit;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s}
.hp .btn:active{transform:translateY(1px)}
.hp .btn--primary{background:var(--brand);color:#3a2400;padding:14px 26px;font-size:15px;box-shadow:0 8px 18px -8px rgba(230,123,0,.7)}
.hp .btn--primary:hover{background:var(--brand-deep);color:#fff}
.hp .btn--ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);padding:13px 24px;font-size:15px}
.hp .btn--ghost:hover{border-color:var(--brand);color:var(--brand-deep)}

/* Hero — banner a lo ancho completo (carrusel) --------------- */
.hp .hp-hero{padding:26px 0 4px}
.hp .hp-slider{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--sh-md);border:1px solid var(--line);line-height:0;background:var(--surface)}
.hp .hp-slide{display:block}
.hp .hp-slide img,.hp .hp-slide video{width:100%;height:auto;display:block}
/* Con varios banners: crossfade. El primero (en flujo) define el alto; el resto se superpone. */
.hp .hp-slider--multi .hp-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.hp .hp-slider--multi .hp-slide:first-child{position:relative}
.hp .hp-slider--multi .hp-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hp .hp-slider--multi .hp-slide:not(:first-child) img,
.hp .hp-slider--multi .hp-slide:not(:first-child) video{height:100%;object-fit:cover}
.hp .hp-slider__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--ink);font-size:24px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:var(--sh-sm);transition:background .14s,color .14s}
.hp .hp-slider__nav:hover{background:#fff;color:var(--brand-deep)}
.hp .hp-slider__nav.prev{left:14px}.hp .hp-slider__nav.next{right:14px}
.hp .hp-slider__dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px}
.hp .hp-slider__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.65);border:0;cursor:pointer;padding:0;transition:width .18s,background .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.hp .hp-slider__dot.is-active{width:22px;border-radius:5px;background:#fff}
@media(max-width:560px){.hp .hp-slider__nav{width:34px;height:34px;font-size:20px}}

/* Trust strip ------------------------------------------------- */
.hp .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
.hp .trust__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh-sm)}
.hp .trust__ic{width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--brand-deep);display:grid;place-items:center;flex-shrink:0}
.hp .trust__ic svg{width:22px;height:22px}
.hp .trust__card b{font-size:14px;color:var(--ink);display:block}
.hp .trust__card small{font-size:12.5px;color:var(--muted)}

/* Categorías — círculos naranjas (estilo mockup) -------------- */
.hp .cat-circles{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.hp .catc{display:flex;flex-direction:column;align-items:center;gap:11px;text-decoration:none;width:100px}
.hp .catc__ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(120% 120% at 30% 18%, #FFAF45 0%, #FF7A00 55%, #EC6A00 100%);
    box-shadow:0 9px 20px -8px rgba(236,106,0,.62), inset 0 1px 0 rgba(255,255,255,.4);
    transition:transform .16s ease, box-shadow .16s ease}
.hp .catc:hover .catc__ic{transform:translateY(-5px);box-shadow:0 16px 28px -10px rgba(236,106,0,.78), inset 0 1px 0 rgba(255,255,255,.4)}
.hp .catc__ic svg{width:38px;height:38px}
.hp .catc__ic img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* Íconos-imagen de Canva: la imagen ya es el círculo naranja, sin degradado detrás */
.hp .catc__ic--img{background:none}
.hp .catc__t{font-size:13.5px;font-weight:700;color:var(--ink);text-align:center;line-height:1.2}
.hp .catc--all .catc__ic{background:radial-gradient(120% 120% at 30% 18%, #AEB4BD 0%, #6A7280 100%);box-shadow:0 9px 20px -8px rgba(106,114,128,.5), inset 0 1px 0 rgba(255,255,255,.35)}
.hp .catc--all:hover .catc__ic{box-shadow:0 16px 28px -10px rgba(106,114,128,.65), inset 0 1px 0 rgba(255,255,255,.35)}
@media(max-width:600px){.hp .cat-circles{gap:12px 14px}.hp .catc{width:84px}.hp .catc__ic{width:62px;height:62px}.hp .catc__ic svg{width:31px;height:31px}.hp .catc__t{font-size:12.5px}}

/* Promo tiles (strips reales, con imagen) --------------------- */
.hp .promos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp .promo{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);display:block;text-decoration:none;line-height:0;transition:transform .18s,box-shadow .18s}
.hp .promo:hover{transform:translateY(-3px);box-shadow:var(--sh-lg,0 12px 28px -10px rgba(0,0,0,.28))}
.hp .promo__img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.hp .promo::after{display:none}
.hp .promo__c{position:relative;z-index:2}
.hp .promo .k{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.92;display:block;margin-bottom:6px}
.hp .promo h3{font-size:21px;font-weight:850;line-height:1.08;max-width:14ch}
.hp .promo .go{display:inline-block;margin-top:14px;background:rgba(255,255,255,.95);color:var(--ink);font-weight:700;font-size:13px;padding:9px 16px;border-radius:999px}
.hp .promo--flat{background:linear-gradient(135deg,var(--brand-deep),var(--brand))}
.hp .promo--flat::after{display:none}

/* Product cards ----------------------------------------------- */
.hp .grid-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hp .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s,border-color .16s;display:flex;flex-direction:column}
.hp .card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--tint-2)}
.hp .card__link{display:flex;flex-direction:column;text-decoration:none;color:inherit;flex:1}
.hp .card__media{position:relative;aspect-ratio:1/1;background:linear-gradient(160deg,#FEFCF9,#F2ECE3);overflow:hidden}
.hp .card__media img{width:100%;height:100%;object-fit:cover;display:block}
.hp .card__ph{width:100%;height:100%;display:grid;place-items:center;color:#c9b79a;font-weight:800;font-size:13px}
.hp .card__badge{position:absolute;top:12px;left:12px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;box-shadow:var(--sh-sm);z-index:2}
.hp .card__badge.alt{background:var(--surface);color:var(--brand-deep)}
.hp .card__badge--right{left:auto;right:12px}
.hp .card__rank{position:absolute;top:12px;left:12px;z-index:2;background:#1E2430;color:#fff;font-size:11.5px;font-weight:850;padding:5px 10px;border-radius:999px;box-shadow:var(--sh-sm);letter-spacing:.02em}
.hp .card__body{padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px;flex:1}
.hp .card__name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.hp .card__stock{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--trust);background:var(--trust-tint);padding:4px 10px;border-radius:999px;align-self:flex-start}
.hp .card__stock i{width:6px;height:6px;border-radius:50%;background:var(--trust)}
.hp .card__stock.out{color:#b45309;background:#fef3c7}
.hp .card__stock.out i{background:#d97706}
.hp .card__price{margin-top:auto;padding-top:2px}
.hp .card__price b{font-size:20px;font-weight:850;color:var(--brand-deep);letter-spacing:-.02em}
.hp .card__price small{display:inline-block;margin-left:7px;font-size:12.5px;color:var(--muted);text-decoration:line-through}
.hp .card__cart{padding:2px 14px 14px}
.hp .card__cart form{margin:0}
.hp .card__atc{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--brand);color:#fff;border:0;border-radius:12px;padding:11px 8px;font-size:13px;font-weight:800;line-height:1.15;cursor:pointer;transition:background .14s,transform .12s;font-family:inherit;text-align:center}
.hp .card__atc span{white-space:normal}
.hp .card__atc:hover{background:var(--brand-deep)}
.hp .card__atc:active{transform:scale(.98)}
.hp .card__atc svg{flex-shrink:0}
.hp .card__atc.is-added{background:var(--trust)}
.hp .card__atc--out{background:#ececec;color:#9a9a9a;cursor:not-allowed}

/* Value banner ------------------------------------------------ */
.hp .value-banner{max-width:1200px;margin:0 auto;padding:0 20px}
.hp .value-banner__inner{
  background:#1b0d09; /* fallback si el video no carga */
  border-radius:var(--r-xl);padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:28px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-md)}
/* video de fondo (fuego) */
.hp .value-banner__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
/* capa oscura para legibilidad del texto (más oscura a la izquierda) */
.hp .value-banner__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,5,0,.78) 0%,rgba(12,5,0,.42) 52%,rgba(12,5,0,.30) 100%)}
.hp .value-banner__txt{position:relative;z-index:2}
.hp .value-banner__txt .eyebrow{color:#FFE08A}
.hp .value-banner__txt h2{text-shadow:0 2px 12px rgba(60,20,0,.45)}
.hp .value-banner__txt h2{font-size:clamp(22px,3vw,32px);font-weight:850;margin:8px 0 6px;line-height:1.1}
.hp .value-banner__txt p{color:rgba(255,246,238,.92);font-size:14.5px;margin:0;max-width:52ch;text-shadow:0 1px 8px rgba(60,20,0,.4)}
.hp .value-tiers{position:relative;z-index:2;display:flex;gap:12px;flex-shrink:0}
.hp .value-tier{background:rgba(15,7,2,.56);border:1px solid rgba(255,224,150,.34);border-radius:var(--r);padding:15px 18px;text-align:center;min-width:118px;backdrop-filter:blur(3px)}
.hp .value-tier b{display:block;font-size:22px;font-weight:850;color:#FFCB45;text-shadow:0 1px 6px rgba(80,25,0,.5)}
.hp .value-tier small{font-size:11.5px;color:#F4E7D8;display:block;margin-top:2px}

/* Bestsellers mini row ---------------------------------------- */
.hp .mini{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.hp .mini__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px;text-align:center;box-shadow:var(--sh-sm);transition:.16s;text-decoration:none;display:block}
.hp .mini__card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.hp .mini__media{aspect-ratio:1/1;border-radius:10px;background:linear-gradient(160deg,#FEFCF9,#F2ECE3);overflow:hidden;margin-bottom:10px}
.hp .mini__media img{width:100%;height:100%;object-fit:cover}
.hp .rank{display:inline-block;font-size:11px;font-weight:800;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);padding:2px 8px;border-radius:999px;margin-bottom:8px}
.hp .mini__card .n{font-size:12.5px;font-weight:600;color:var(--ink-soft);line-height:1.3;min-height:33px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp .mini__card .p{font-size:15px;font-weight:850;color:var(--brand-deep);margin-top:6px}

/* Values ------------------------------------------------------ */
.hp .values{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-sm)}
.hp .value{display:flex;gap:14px;align-items:flex-start}
.hp .value__ic{width:46px;height:46px;border-radius:13px;background:var(--tint);color:var(--brand-deep);display:grid;place-items:center;flex-shrink:0}
.hp .value__ic svg{width:23px;height:23px}
.hp .value b{font-size:14px;color:var(--ink);display:block;margin-bottom:2px}
.hp .value small{font-size:12.5px;color:var(--muted);line-height:1.45}

@media(max-width:900px){
  .hp .hp-hero__grid{grid-template-columns:1fr}.hp .hp-hero__art{min-height:300px;order:-1}
  .hp .trust,.hp .values{grid-template-columns:repeat(2,1fr)}
  .hp .cats{grid-template-columns:repeat(4,1fr)}
  .hp .promos{grid-template-columns:1fr}
  .hp .grid-prod{grid-template-columns:repeat(2,1fr)}
  .hp .mini{grid-template-columns:repeat(2,1fr)}
  .hp .value-banner__inner{flex-direction:column;align-items:flex-start}
  .hp .value-tiers{width:100%}.hp .value-tier{flex:1;min-width:0}
}
@media(max-width:560px){.hp .cats{grid-template-columns:repeat(3,1fr)}.hp .trust{grid-template-columns:1fr}
  .hp .card__atc{font-size:11.5px;padding:11px 4px;gap:5px;letter-spacing:-.01em}
  .hp .card__atc svg{display:none}
}

/* ── EXPLORA Y DESCUBRE (categorías) ─────────────────────────── */
.hp .catx__head{text-align:center;max-width:720px;margin:0 auto 24px}
.hp .catx__head .eyebrow{color:var(--brand);letter-spacing:.16em}
.hp .catx__head h2{font-size:clamp(25px,3.4vw,40px);font-weight:850;line-height:1.08;margin:10px 0 12px;color:var(--ink)}
.hp .catx__head h2 span{color:var(--brand);display:block}
.hp .catx__head p{color:var(--muted);font-size:15px;margin:0}
.hp .catx__row{position:relative}
.hp .catx__grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 12px;scrollbar-width:none}
.hp .catx__grid::-webkit-scrollbar{display:none}
.hp .catx__card{flex:1 0 0;min-width:182px;scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);text-decoration:none;overflow:hidden;transition:transform .16s,box-shadow .16s;display:flex;flex-direction:column}
.hp .catx__card:hover{transform:translateY(-5px);box-shadow:var(--sh-md)}
.hp .catx__media{aspect-ratio:1/1;overflow:hidden;background:linear-gradient(160deg,#FEFCF9,#F2ECE3)}
.hp .catx__media img{width:100%;height:100%;object-fit:cover;display:block}
.hp .catx__ph{width:100%;height:100%;display:grid;place-items:center;color:#c9b79a;font-weight:800;font-size:13px}
.hp .catx__body{padding:0 14px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;flex:1}
.hp .catx__ic{width:54px;height:54px;border-radius:50%;background:var(--brand);display:grid;place-items:center;box-shadow:0 9px 18px -6px rgba(232,114,10,.75);border:3px solid var(--surface);margin-top:-27px;margin-bottom:8px}
.hp .catx__ic svg{width:26px;height:26px}
.hp .catx__name{font-size:16px;font-weight:800;color:var(--ink)}
.hp .catx__count{font-size:13px;color:var(--muted)}
.hp .catx__go{margin-top:9px;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(232,114,10,.4);color:var(--brand);display:grid;place-items:center;transition:.14s}
.hp .catx__card:hover .catx__go{background:var(--brand);color:#fff;border-color:var(--brand)}
.hp .catx__arrow{position:absolute;right:-8px;top:38%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-md);display:grid;place-items:center;cursor:pointer;color:var(--ink);z-index:3}
.hp .catx__arrow:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.hp .catx__cta{margin-top:24px;background:linear-gradient(100deg,#F4780F 0%,#E45900 100%);border-radius:20px;padding:26px 32px;display:flex;align-items:center;gap:26px;color:#fff;box-shadow:0 16px 34px -14px rgba(228,89,0,.6);position:relative;overflow:hidden}
.hp .catx__cta-ic{flex-shrink:0;width:92px;height:92px;border-radius:20px;background:rgba(255,255,255,.15);display:grid;place-items:center;color:#fff}
.hp .catx__cta-txt{flex:1;min-width:0}
.hp .catx__cta-txt span{font-size:14px;opacity:.92;font-weight:600}
.hp .catx__cta-txt h3{font-size:clamp(20px,2.6vw,30px);font-weight:850;margin:4px 0 6px;line-height:1.1}
.hp .catx__cta-txt p{margin:0;font-size:14px;opacity:.92}
.hp .catx__cta-btn{flex-shrink:0;background:#fff;color:var(--brand-deep);font-weight:800;font-size:15px;padding:13px 24px;border-radius:999px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 18px -8px rgba(0,0,0,.35);transition:transform .12s}
.hp .catx__cta-btn:hover{transform:translateY(-2px)}
.hp .catx__benefits{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-sm);display:grid;grid-template-columns:repeat(4,1fr);padding:24px 8px}
.hp .catx__benefit{display:flex;align-items:flex-start;gap:13px;padding:2px 22px}
.hp .catx__benefit+.catx__benefit{border-left:1px solid var(--line)}
.hp .catx__benefit-ic{width:42px;height:42px;border-radius:12px;background:var(--tint);color:var(--brand);display:grid;place-items:center;flex-shrink:0}
.hp .catx__benefit b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.hp .catx__benefit small{font-size:12.5px;color:var(--muted);line-height:1.4}
.hp .catx__all{text-align:center;margin-top:20px}
.hp .catx__all a{color:var(--brand);font-weight:800;font-size:15px;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.hp .catx__all a:hover{color:var(--brand-deep)}
@media(max-width:900px){
  .hp .catx__card{flex:0 0 auto;min-width:158px}
  .hp .catx__benefits{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .hp .catx__benefit:nth-child(odd){border-left:0}
  .hp .catx__cta{flex-direction:column;text-align:center;align-items:center}
  .hp .catx__arrow{display:none}
}
@media(max-width:560px){
  .hp .catx__benefits{grid-template-columns:repeat(2,1fr);gap:16px 4px;padding:18px 8px}
  .hp .catx__benefit{border-left:0!important;padding:0 6px;gap:9px}
  .hp .catx__benefit-ic{width:36px;height:36px}
  .hp .catx__benefit b{font-size:12.5px}
  .hp .catx__benefit small{font-size:11.5px}
  .hp .catx__cta{gap:14px;padding:22px 20px}
  .hp .catx__cta-ic{width:58px;height:58px;border-radius:16px}
  .hp .catx__cta-txt h3{font-size:20px}
  .hp .catx__head h2{font-size:23px}
}

/* ── BENTO: por qué comprar aquí ─────────────────────────────── */
.hp .bento{display:grid;grid-template-columns:1.15fr 1fr 1fr 1.15fr;grid-template-areas:"maps envio envio tranq" "maps mayor desc tranq";gap:16px}
.hp .bento__card{border-radius:18px;box-shadow:0 8px 22px -12px rgba(70,35,0,.22);position:relative;overflow:hidden;display:flex;flex-direction:column}
.hp .bento__ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
/* Mapa */
.hp .bento__maps{background:linear-gradient(160deg,#F2760F,#E45E00);padding:20px;gap:14px;color:#fff}
.hp .bento__maps-head{display:flex;gap:12px;align-items:flex-start}
.hp .bento__maps-head .bento__ic--pin{background:rgba(255,255,255,.2);color:#fff}
.hp .bento__maps-head h3{font-size:21px;font-weight:850;margin:0 0 3px;line-height:1.1}
.hp .bento__maps-head p{margin:0;font-size:13px;color:rgba(255,255,255,.9);line-height:1.4}
.hp .bento__maps-frame{position:relative;flex:1;min-height:320px;border-radius:14px;overflow:hidden;background:#e9e9e9}
.hp .bento__maps-frame iframe{position:absolute;inset:0;width:100%;height:100%}
.hp .bento__maps-info{position:absolute;top:14px;left:14px;right:14px;max-width:230px;background:#fff;border-radius:12px;box-shadow:0 8px 20px -8px rgba(0,0,0,.3);padding:12px 14px;display:flex;gap:10px;color:#26221d}
.hp .bento__maps-info .bento__ic--sm{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff}
.hp .bento__maps-info b{display:block;font-size:14px;font-weight:800;color:#1c1a17}
.hp .bento__maps-info span{display:block;font-size:12.5px;color:#5f5a52;line-height:1.35;margin-top:1px}
.hp .bento__maps-info em{display:block;font-style:normal;font-size:12px;color:var(--brand-deep);font-weight:700;line-height:1.35;margin-top:6px}
.hp .bento__maps-btn{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--brand-deep);font-weight:800;font-size:14px;padding:11px 18px;border-radius:999px;text-decoration:none;box-shadow:0 8px 18px -8px rgba(0,0,0,.35);transition:transform .12s}
.hp .bento__maps-btn:hover{transform:translateY(-2px)}
/* Envío gratis — fondo imagen 3D */
.hp .bento__ship{grid-area:envio;background:#F5951E url(/assets/uploads/home/envio-bogota.jpg) center/cover no-repeat;color:#fff;padding:26px 30px;display:flex;align-items:center;justify-content:flex-start}
.hp .bento__ship::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(243,133,12,.92) 0%,rgba(243,133,12,.55) 40%,rgba(243,133,12,0) 64%)}
.hp .bento__ship-txt{position:relative;z-index:2;flex:0 1 auto;max-width:54%;margin-right:auto}
.hp .bento__ship-txt h3{margin:0 0 12px;font-size:clamp(22px,2.4vw,31px);font-weight:850;line-height:1.05;color:#fff;text-shadow:0 2px 12px rgba(110,45,0,.45)}
.hp .bento__ship-txt h3 b{color:#fff}
.hp .bento__ship-lead{margin:0 0 6px;font-size:14px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(110,45,0,.4)}
.hp .bento__ship-price{display:inline-block;background:#fff;color:var(--brand-deep);font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-.02em;padding:6px 18px;border-radius:12px;box-shadow:0 8px 18px -8px rgba(0,0,0,.3)}
.hp .bento__ship-sub{margin:10px 0 16px;font-size:14px;color:#fff;font-weight:700;text-shadow:0 1px 8px rgba(110,45,0,.4)}
/* Compra tranquilo — fondo imagen 3D */
.hp .bento__trust-card{grid-area:tranq;background:#FCF0E2 url(/assets/uploads/home/compra-tranquilo.jpg) center bottom/contain no-repeat;padding:22px;color:#2b241c}
.hp .bento__trust-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#FCF0E2 0%,rgba(252,240,226,.8) 26%,rgba(252,240,226,0) 46%)}
.hp .bento__trust-card>*{position:relative;z-index:1}
.hp .bento__trust-card h3{margin:0 0 8px;font-size:23px;font-weight:850;color:#1f1a14}
.hp .bento__trust-card p{margin:0;font-size:14.5px;line-height:1.5;color:#5a5248;max-width:26ch}
.hp .bento__trust-card .btn-bento{margin-top:16px}
/* Mayorista — fondo imagen 3D */
.hp .bento__whole{grid-area:mayor;background:#FDEEDD url(/assets/uploads/home/mayorista.jpg) right bottom/cover no-repeat;padding:20px;color:#2b241c}
.hp .bento__whole::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(118deg,rgba(253,238,221,.96) 0%,rgba(253,238,221,.72) 44%,rgba(253,238,221,0) 74%)}
.hp .bento__whole>*{position:relative;z-index:1}
.hp .bento__whole h3{margin:0 0 6px;font-size:19px;font-weight:850;color:#1f1a14;max-width:62%}
.hp .bento__whole h3 b{color:var(--brand-deep)}
.hp .bento__whole p{margin:0 0 14px;font-size:13.5px;line-height:1.45;color:#5a5248;max-width:60%}
/* Descuentos volumen — fondo imagen 3D */
.hp .bento__vol{grid-area:desc;background:#FFF3D0 url(/assets/uploads/home/mas-ahorro.jpg) right bottom/cover no-repeat;padding:20px;color:#2b241c}
.hp .bento__vol::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(118deg,rgba(255,243,208,.97) 0%,rgba(255,243,208,.78) 46%,rgba(255,243,208,0) 78%)}
.hp .bento__vol>*{position:relative;z-index:1}
.hp .bento__vol h3{margin:0 0 12px;font-size:19px;font-weight:850;color:#1f1a14;max-width:72%}
.hp .bento__vol-tiers{max-width:74%}
.hp .bento__vol h3 b{color:var(--brand-deep)}
.hp .bento__vol-tiers{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.hp .bento__vol-tier{display:flex;align-items:center;gap:11px}
.hp .bento__vol-pct{flex-shrink:0;background:#F6C21B;color:#5a3d00;font-weight:900;font-size:16px;padding:5px 11px;border-radius:9px;min-width:48px;text-align:center}
.hp .bento__vol-desc{font-size:13px;color:#5a5248;line-height:1.3;font-weight:600}
.hp .bento__vol-note{display:block;margin-top:10px;font-size:11.5px;color:#9a8c6f}
/* Botones bento */
.btn-bento{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14px;padding:11px 18px;border-radius:999px;text-decoration:none;cursor:pointer;border:1.6px solid transparent;white-space:nowrap;transition:transform .12s,background .14s,color .14s;align-self:flex-start}
.btn-bento:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px}
.btn-bento svg{flex-shrink:0}
.btn-bento--primary{background:#fff;color:var(--brand-deep)}
.btn-bento--primary:hover{transform:translateY(-2px)}
.btn-bento--ghost{margin-top:auto;background:#fff;color:var(--brand-deep);border-color:rgba(232,114,10,.4)}
.btn-bento--ghost:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-2px)}
/* Franja beneficios bento */
.hp .bento__benefits{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);display:grid;grid-template-columns:repeat(4,1fr);padding:22px 8px}
.hp .bento__benefit{display:flex;align-items:flex-start;gap:12px;padding:2px 22px}
.hp .bento__benefit+.bento__benefit{border-left:1px solid var(--line)}
.hp .bento__benefit-ic{width:42px;height:42px;border-radius:50%;background:var(--tint);color:var(--brand);display:grid;place-items:center;flex-shrink:0}
.hp .bento__benefit b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.hp .bento__benefit small{font-size:12.5px;color:var(--muted);line-height:1.4}
/* Responsive bento */
@media(max-width:1000px){
  .hp .bento{grid-template-columns:1fr 1fr;grid-template-areas:"envio envio" "maps tranq" "mayor desc"}
  .hp .bento__benefits{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .hp .bento__benefit:nth-child(odd){border-left:0}
}
@media(max-width:640px){
  .hp .bento{grid-template-columns:1fr;grid-template-areas:"envio" "maps" "mayor" "desc" "tranq"}
  .hp .bento__ship{text-align:left;justify-content:flex-start;min-height:280px;background-position:right center}
  .hp .bento__ship::before{background:linear-gradient(90deg,rgba(243,133,12,.95) 0%,rgba(243,133,12,.7) 48%,rgba(243,133,12,.08) 74%)}
  .hp .bento__ship-txt{max-width:60%}
  .btn-bento--primary,.hp .bento__ship .btn-bento{align-self:flex-start}
  .hp .bento__benefits{grid-template-columns:1fr}
  .hp .bento__benefit{border-left:0!important}
}