/* ===== Tokens ===== */
:root {
    --vs-primary: #2f5bff;
    --vs-primary-2: #6a3cff;
    --vs-accent: #ff6a1a;
    --vs-success: #12a150;
    --vs-danger: #e5383b;
    --vs-bg: #f4f6fb;
    --vs-surface: #ffffff;
    --vs-border: #e4e8f1;
    --vs-text: #141a2e;
    --vs-muted: #6b7390;
    --vs-radius: 16px;
    --vs-shadow: 0 1px 2px rgba(20, 26, 46, .05), 0 8px 24px rgba(20, 26, 46, .06);
    --vs-shadow-lg: 0 18px 40px rgba(20, 26, 46, .14);
    --bs-primary: var(--vs-primary);
    --bs-primary-rgb: 47, 91, 255;
    --bs-body-font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
[data-bs-theme="dark"] {
    --vs-bg: #0d1120;
    --vs-surface: #161b2e;
    --vs-border: #262d45;
    --vs-text: #e8ebf5;
    --vs-muted: #9aa3c0;
    --vs-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --bs-body-bg: #0d1120;
}

body { background: var(--vs-bg); color: var(--vs-text); -webkit-font-smoothing: antialiased; }
a { color: var(--vs-primary); text-decoration: none; }
.min-w-0 { min-width: 0; }
.btn-primary { --bs-btn-bg: var(--vs-primary); --bs-btn-border-color: var(--vs-primary); --bs-btn-hover-bg: #2149e6; --bs-btn-hover-border-color: #2149e6; --bs-btn-active-bg: #1a3dcc; }
.btn-outline-primary { --bs-btn-color: var(--vs-primary); --bs-btn-border-color: var(--vs-primary); --bs-btn-hover-bg: var(--vs-primary); --bs-btn-hover-border-color: var(--vs-primary); }
.btn { border-radius: 12px; font-weight: 600; }
.form-control, .form-select { border-radius: 12px; }

/* ===== Barra superior ===== */
.topbar { background: linear-gradient(90deg, var(--vs-primary), var(--vs-primary-2)); color: #fff; padding: .4rem 0; }
.topbar a { color: #fff; }
.topbar-ticker { display: flex; gap: 2rem; overflow: hidden; white-space: nowrap; }
@media (max-width: 767px) {
    .topbar-ticker { display: block; height: 1.3em; position: relative; width: 100%; }
    .topbar-ticker span { position: absolute; inset: 0; text-align: center; opacity: 0; animation: tick 12s infinite; }
    .topbar-ticker span:nth-child(2) { animation-delay: 4s; }
    .topbar-ticker span:nth-child(3) { animation-delay: 8s; }
}
@keyframes tick { 0%, 30% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-6px); } }

/* ===== Encabezado ===== */
.site-header { background: color-mix(in srgb, var(--vs-surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--vs-border); }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--vs-text); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--vs-primary), var(--vs-primary-2)); box-shadow: 0 6px 16px rgba(47, 91, 255, .35); }
.brand-text span { color: var(--vs-primary); }
@media (max-width: 575px) { .brand-text { display: none; } }
.btn-cat { background: var(--vs-text); color: var(--vs-surface); gap: .4rem; align-items: center; padding: .55rem 1rem; }
.btn-cat:hover { background: var(--vs-primary); color: #fff; }

.search > .bi-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--vs-muted); z-index: 2; }
.search .form-control { padding: .65rem 2.6rem; background: var(--vs-bg); border: 1px solid transparent; border-radius: 14px; }
.search .form-control:focus { background: var(--vs-surface); border-color: var(--vs-primary); box-shadow: 0 0 0 4px rgba(47, 91, 255, .12); }
.search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: var(--vs-surface); color: var(--vs-muted); border: 1px solid var(--vs-border); font-size: .75rem; }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: 14px; overflow: hidden; z-index: 1050; animation: pop .15s ease-out; }
.suggest-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vs-muted); padding: .6rem 1rem .2rem; }
.suggest-item { display: flex; gap: .7rem; align-items: center; padding: .5rem 1rem; color: var(--vs-text); }
.suggest-item:hover, .suggest-item.active, .suggest-all.active { background: var(--vs-bg); }
.suggest-item mark { background: rgba(255, 106, 26, .2); color: inherit; padding: 0; }
.suggest-all { display: block; padding: .7rem 1rem; border-top: 1px solid var(--vs-border); font-weight: 600; }
.mini { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, hsl(var(--hue) 75% 55%), hsl(calc(var(--hue) + 40) 75% 45%)); }

.icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 0; background: transparent; color: var(--vs-text); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: background .15s; }
.icon-btn:hover { background: var(--vs-bg); color: var(--vs-primary); }
.icon-btn.lg { width: 48px; height: 48px; border: 1px solid var(--vs-border); }
.icon-btn-cart { width: auto; padding: 0 .7rem; font-size: 1rem; }
.icon-btn-cart .bi { font-size: 1.25rem; }
.badge-count { position: absolute; top: 2px; left: 26px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--vs-accent); color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.bump { animation: bump .45s ease; }
@keyframes bump { 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(.95); } }

.quicknav { border-top: 1px solid var(--vs-border); }
.quicknav a { white-space: nowrap; padding: .5rem .8rem; color: var(--vs-muted); font-size: .9rem; font-weight: 500; border-bottom: 2px solid transparent; }
.quicknav a:hover { color: var(--vs-primary); border-bottom-color: var(--vs-primary); }
.quicknav a.hot { color: var(--vs-accent); font-weight: 700; }
.quicknav .container { scrollbar-width: none; }

.cat-menu a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: 12px; color: var(--vs-text); font-weight: 500; }
.cat-menu a > .bi:first-child { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: hsl(var(--hue) 90% 95%); color: hsl(var(--hue) 70% 45%); }
[data-bs-theme="dark"] .cat-menu a > .bi:first-child { background: hsl(var(--hue) 40% 20%); color: hsl(var(--hue) 80% 70%); }
.cat-menu a:hover { background: var(--vs-bg); }

/* ===== Hero ===== */
.hero { padding-top: 1.25rem; }
.slide { border-radius: 24px; min-height: 340px; padding: 3rem; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; color: #fff;
    background: radial-gradient(circle at 80% 20%, hsl(var(--h2) 90% 65% / .7), transparent 50%), linear-gradient(120deg, hsl(var(--h1) 80% 45%), hsl(var(--h2) 75% 40%)); }
.slide h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.slide h1 strong { color: #ffe066; }
.slide p { opacity: .9; max-width: 420px; }
.slide .btn-light { color: hsl(var(--h1) 80% 35%); }
.slide-copy { position: relative; z-index: 2; }
.slide-art { position: relative; font-size: 11rem; opacity: .95; line-height: 1; margin-right: 2rem; animation: float 6s ease-in-out infinite; }
.slide-art .small-art { position: absolute; font-size: 5rem; right: -2.5rem; bottom: -1rem; opacity: .6; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-2deg); } }
@media (max-width: 767px) { .slide { padding: 2rem 1.5rem 3rem; min-height: 300px; } .slide-art { position: absolute; right: -2rem; bottom: -1rem; font-size: 8rem; opacity: .25; } }
.pill { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255, 255, 255, .2); padding: .3rem .8rem; border-radius: 99px; font-size: .8rem; font-weight: 600; margin-bottom: .8rem; backdrop-filter: blur(4px); }

/* ===== Secciones ===== */
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.section-head h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.section-head > a { font-weight: 600; white-space: nowrap; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } * { animation: none !important; transition: none !important; } }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .8rem; }
.cat-tile { background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); padding: 1.1rem .8rem; text-align: center; color: var(--vs-text); display: flex; flex-direction: column; align-items: center; gap: .3rem; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cat-tile .ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: hsl(var(--hue) 90% 95%); color: hsl(var(--hue) 70% 45%); transition: transform .25s; }
[data-bs-theme="dark"] .cat-tile .ico { background: hsl(var(--hue) 40% 20%); color: hsl(var(--hue) 80% 70%); }
.cat-tile .name { font-weight: 600; font-size: .92rem; }
.cat-tile .count { font-size: .75rem; color: var(--vs-muted); }
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--vs-shadow-lg); border-color: hsl(var(--hue) 70% 60%); }
.cat-tile:hover .ico { transform: scale(1.1) rotate(-6deg); }

.flash-box { background: linear-gradient(135deg, #1b1f3b, #2b1650); color: #fff; border-radius: 24px; padding: 1.5rem; }
.flash-box .section-head h2 { color: #fff; }
.countdown { display: flex; gap: 4px; font-variant-numeric: tabular-nums; font-weight: 800; }
.countdown span { background: var(--vs-accent); color: #fff; border-radius: 8px; padding: .2rem .5rem; min-width: 2.2em; text-align: center; }

.rail { position: relative; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; }
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; }
@media (min-width: 992px) { .track { grid-auto-columns: calc((100% - 3rem) / 4); } }
@media (min-width: 1400px) { .track { grid-auto-columns: calc((100% - 4rem) / 5); } }
.rail-btn { position: absolute; top: 22%; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vs-border); background: var(--vs-surface); color: var(--vs-text); box-shadow: var(--vs-shadow); display: none; }
.rail-btn.prev { left: -18px; } .rail-btn.next { right: -18px; }
@media (min-width: 992px) { .rail-btn { display: grid; place-items: center; } }
.rail-btn:hover { background: var(--vs-primary); color: #fff; }

.promo { display: flex; justify-content: space-between; align-items: center; padding: 2rem; border-radius: 24px; color: #fff; min-height: 190px; overflow: hidden; position: relative;
    background: linear-gradient(120deg, hsl(var(--h1) 85% 50%), hsl(var(--h2) 80% 45%)); transition: transform .25s; }
.promo h3 { font-weight: 800; letter-spacing: -.02em; }
.promo .link { font-weight: 600; }
.promo > .bi { font-size: 7rem; opacity: .35; transition: transform .4s; }
.promo:hover { transform: translateY(-3px); color: #fff; }
.promo:hover > .bi { transform: scale(1.15) rotate(-8deg); }

.brands { display: flex; flex-wrap: wrap; gap: .6rem; }
.brands a { padding: .7rem 1.3rem; border-radius: 99px; background: var(--vs-surface); border: 1px solid var(--vs-border); color: var(--vs-text); font-weight: 700; letter-spacing: -.01em; transition: all .2s; }
.brands a:hover { border-color: var(--vs-primary); color: var(--vs-primary); transform: translateY(-2px); }

/* ===== Tarjeta de producto ===== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.pcard { background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); overflow: hidden; display: flex; flex-direction: column; color: var(--vs-text); transition: transform .2s, box-shadow .2s; animation: fadeUp .35s ease both; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--vs-shadow-lg); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
.pcard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: hsl(var(--hue) 70% 40%);
    background: radial-gradient(circle at 30% 20%, hsl(var(--hue) 100% 97%), hsl(var(--hue) 70% 90%)); transition: transform .4s; }
.ph .bi { font-size: 4rem; filter: drop-shadow(0 8px 10px hsl(var(--hue) 70% 40% / .25)); }
.ph span { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
[data-bs-theme="dark"] .ph { background: radial-gradient(circle at 30% 20%, hsl(var(--hue) 40% 28%), hsl(var(--hue) 40% 16%)); color: hsl(var(--hue) 80% 75%); }
.pcard:hover .ph { transform: scale(1.06); }
.pcard-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.badge-off { background: var(--vs-danger); color: #fff; font-weight: 800; font-size: .78rem; padding: .2rem .5rem; border-radius: 8px; }
.badge-tag { font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 8px; color: #fff; }
.badge-tag.flash { background: #f59f00; } .badge-tag.new { background: var(--vs-success); } .badge-tag.outlet { background: #495057; }
.pcard-media .fav { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: #6b7390; display: grid; place-items: center; transition: transform .2s; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.fav:hover { color: var(--vs-danger); }
.pcard-media .fav:hover { transform: scale(1.12); }
.fav.on { color: var(--vs-danger); }
.fav.on i { animation: bump .4s; }
.quick { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 20px); opacity: 0; border: 0; border-radius: 99px; padding: .35rem .9rem; font-size: .8rem; font-weight: 600; background: rgba(20, 26, 46, .85); color: #fff; transition: all .2s; white-space: nowrap; }
.pcard:hover .quick, .quick:focus { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .quick { display: none; } }
.pcard-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.brand-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vs-primary); }
.rating { color: #f5a524; font-size: .72rem; letter-spacing: 1px; }
.pcard-name { color: var(--vs-text); font-weight: 600; font-size: .93rem; line-height: 1.3; margin: .25rem 0 .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.pcard-name:hover { color: var(--vs-primary); }
.sku { font-size: .7rem; color: var(--vs-muted); }
.prices { margin-top: .5rem; }
.prices s { color: var(--vs-muted); font-size: .82rem; }
.prices .price { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.prices .tprice { color: var(--vs-success); font-size: .82rem; font-weight: 700; }
.prices .tprice small { font-weight: 500; opacity: .85; }
.prices.big .price { font-size: 2rem; }
.save { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--vs-danger); background: rgba(229, 56, 59, .1); border-radius: 6px; padding: .1rem .4rem; margin-top: .3rem; }
.stock { font-size: .75rem; font-weight: 600; }
.stock.ok { color: var(--vs-success); } .stock.low { color: #e8590c; } .stock.out { color: var(--vs-muted); }
.ship { font-size: .72rem; font-weight: 600; color: var(--vs-primary); white-space: nowrap; }
.btn-add { background: var(--vs-primary); color: #fff; border: 0; transition: transform .1s, background .2s; }
.btn-add:hover { background: var(--vs-accent); color: #fff; }
.btn-add:active { transform: scale(.97); }
.btn-add:disabled { background: var(--vs-border); color: var(--vs-muted); }
.pcard.is-out .pcard-media { filter: grayscale(.7); opacity: .75; }

.flash-box .pcard { color: var(--vs-text); }

/* Vista lista */
.product-grid.as-list { grid-template-columns: 1fr; }
.product-grid.as-list .pcard { flex-direction: row; }
.product-grid.as-list .pcard-media { width: 220px; flex: none; aspect-ratio: auto; }
.product-grid.as-list .pcard-body { flex-direction: column; }
.product-grid.as-list .btn-add { width: auto !important; align-self: flex-start; padding-inline: 2rem; }

/* Skeleton */
.skeleton { pointer-events: none; }
.sk-media { aspect-ratio: 4 / 3; }
.sk-media, .sk-line { background: linear-gradient(90deg, var(--vs-border) 25%, var(--vs-bg) 50%, var(--vs-border) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.sk-line { height: 12px; border-radius: 6px; margin-bottom: 10px; }
.sk-line.big { height: 22px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===== Catálogo ===== */
.catalog-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.catalog-head .form-select { min-width: 190px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip { border: 1px solid var(--vs-primary); background: rgba(47, 91, 255, .08); color: var(--vs-primary); border-radius: 99px; padding: .25rem .4rem .25rem .8rem; font-size: .82rem; font-weight: 600; animation: pop .2s; }
.chip:hover { background: var(--vs-primary); color: #fff; }
@keyframes pop { from { opacity: 0; transform: scale(.9); } }
@media (min-width: 992px) { .filters { position: sticky; top: 140px; } }
.filters .offcanvas-body { padding: 0; }
@media (max-width: 991px) { .filters .offcanvas-body { padding: 1rem; } }
.filter-block { background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); padding: 1rem; margin-bottom: .8rem; }
.filter-block h6 { font-weight: 700; margin-bottom: .6rem; }
.facet-list a { display: flex; justify-content: space-between; padding: .35rem .5rem; border-radius: 8px; color: var(--vs-text); font-size: .9rem; }
.facet-list a span, .facet-list .cnt { color: var(--vs-muted); font-size: .78rem; }
.facet-list a:hover { background: var(--vs-bg); }
.facet-list a.on { background: rgba(47, 91, 255, .1); color: var(--vs-primary); font-weight: 600; }
.facet-list.scroll { max-height: 260px; overflow: auto; }
.facet-list .form-check { display: flex; align-items: center; gap: .5rem; padding: .25rem 0 .25rem 1.8rem; margin: 0; cursor: pointer; }
.facet-list .form-check .cnt { margin-left: auto; }
.price-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.price-chips button { border: 1px solid var(--vs-border); background: transparent; border-radius: 99px; font-size: .75rem; padding: .2rem .6rem; color: var(--vs-text); }
.price-chips button:hover { border-color: var(--vs-primary); color: var(--vs-primary); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--vs-muted); }
.empty-state > .bi { font-size: 3.5rem; display: block; margin-bottom: .5rem; opacity: .5; }
.empty-state.wide { grid-column: 1 / -1; }

/* ===== Producto ===== */
.pd-media { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 1; background: var(--vs-surface); border: 1px solid var(--vs-border); }
.pd-media img { width: 100%; height: 100%; object-fit: contain; }
.ph.big .bi { font-size: 10rem; }
.pd-price { background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); padding: 1rem 1.2rem; }
.pd-price s { color: var(--vs-muted); }
.pd-price .price { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; }
.pd-price .price small { font-size: .85rem; font-weight: 500; color: var(--vs-muted); letter-spacing: 0; }
.tprice-box { background: rgba(18, 161, 80, .1); color: var(--vs-success); border-radius: 10px; padding: .5rem .8rem; margin-top: .4rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--vs-border); border-radius: 12px; overflow: hidden; background: var(--vs-surface); }
.qty button { border: 0; background: transparent; width: 42px; height: 46px; font-size: 1.2rem; color: var(--vs-text); }
.qty button:hover:not(:disabled) { background: var(--vs-bg); }
.qty input { width: 48px; border: 0; text-align: center; font-weight: 700; background: transparent; color: var(--vs-text); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-sm button { width: 30px; height: 30px; font-size: 1rem; }
.qty-sm span { min-width: 24px; text-align: center; font-weight: 700; }
.ship-calc { background: var(--vs-surface); border: 1px dashed var(--vs-border); border-radius: var(--vs-radius); padding: 1rem; }
.pd-perks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; font-size: .9rem; }
.pd-perks .bi { color: var(--vs-primary); margin-right: .4rem; }
.pd-tabs { background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: 0 0 var(--vs-radius) var(--vs-radius); padding: 1.5rem; }
.specs th { width: 35%; color: var(--vs-muted); font-weight: 500; }
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--vs-surface); border-top: 1px solid var(--vs-border); padding: .7rem 1rem; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -6px 20px rgba(0, 0, 0, .08); }
.qv-media { min-height: 320px; }

/* ===== Carro lateral ===== */
.cart-drawer { width: 420px !important; max-width: 100vw; }
.cart-line { display: flex; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--vs-border); animation: fadeUp .25s; }
.cart-line .name { color: var(--vs-text); font-weight: 600; font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb { width: 64px; height: 64px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; color: hsl(var(--hue) 70% 40%); background: hsl(var(--hue) 90% 94%); position: relative; }
[data-bs-theme="dark"] .thumb { background: hsl(var(--hue) 40% 20%); color: hsl(var(--hue) 80% 70%); }
.thumb.sm { width: 46px; height: 46px; font-size: 1.2rem; }
.thumb b { position: absolute; top: -6px; right: -6px; background: var(--vs-text); color: var(--vs-surface); font-size: .7rem; border-radius: 99px; min-width: 20px; height: 20px; display: grid; place-items: center; }
.free-ship .progress-bar { background: linear-gradient(90deg, var(--vs-primary), var(--vs-success)); transition: width .5s; }
.free-ship-ok { background: rgba(18, 161, 80, .1); color: var(--vs-success); border-radius: 10px; padding: .5rem .8rem; font-size: .9rem; }

/* ===== Checkout ===== */
.steps { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; color: var(--vs-muted); }
.steps b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vs-border); margin-right: .3rem; }
.steps .on { color: var(--vs-text); font-weight: 600; }
.steps .on b { background: var(--vs-primary); color: #fff; }
.co-card { background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); padding: 1.4rem; margin-bottom: 1rem; box-shadow: var(--vs-shadow); }
.co-card h2 { font-weight: 700; margin-bottom: 1rem; }
.summary.sticky-lg-top { top: 140px; }
.sum-line { display: flex; align-items: center; gap: .8rem; padding: .4rem 0; font-size: .9rem; }
.seg { display: inline-flex; background: var(--vs-bg); border-radius: 12px; padding: 4px; }
.seg .btn { border: 0; color: var(--vs-muted); }
.seg .btn-check:checked + .btn { background: var(--vs-surface); color: var(--vs-primary); box-shadow: var(--vs-shadow); }
.option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; }
.opt { cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt > span { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; border: 2px solid var(--vs-border); border-radius: 14px; padding: .9rem 1rem; transition: all .15s; }
.opt > span .bi { grid-row: span 2; font-size: 1.6rem; color: var(--vs-muted); }
.opt > span small { color: var(--vs-muted); }
.opt input:checked + span { border-color: var(--vs-primary); background: rgba(47, 91, 255, .05); }
.opt input:checked + span .bi { color: var(--vs-primary); }
.opt input:focus-visible + span { box-shadow: 0 0 0 4px rgba(47, 91, 255, .2); }
.success-hero { text-align: center; margin-bottom: 1.5rem; }
.success-hero .check { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center; font-size: 2.8rem; color: #fff; background: var(--vs-success); box-shadow: 0 10px 30px rgba(18, 161, 80, .35); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
pre.bank { background: var(--vs-bg); border-radius: 10px; padding: 1rem; font-family: inherit; white-space: pre-wrap; }

/* ===== Beneficios y pie ===== */
.benefits { padding: 2.5rem 0; }
.benefit { display: flex; gap: .9rem; align-items: center; background: var(--vs-surface); border: 1px solid var(--vs-border); border-radius: var(--vs-radius); padding: 1rem 1.1rem; height: 100%; }
.benefit > .bi { font-size: 1.8rem; color: var(--vs-primary); }
.benefit strong { display: block; font-size: .92rem; }
.benefit span { font-size: .8rem; color: var(--vs-muted); }
.site-footer { background: var(--vs-surface); border-top: 1px solid var(--vs-border); }
.site-footer h6 { font-weight: 700; }
.site-footer li a { color: var(--vs-muted); line-height: 2; }
.site-footer li a:hover { color: var(--vs-primary); }

/* ===== Flotantes ===== */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1040; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.8rem; box-shadow: 0 8px 24px rgba(37, 211, 102, .45); transition: transform .2s; }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ring 2s infinite; }
@keyframes ring { to { transform: scale(1.5); opacity: 0; } }
.wa-float:hover { transform: scale(1.08); color: #fff; }
.to-top { position: fixed; right: 28px; bottom: 90px; z-index: 1040; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--vs-border); background: var(--vs-surface); color: var(--vs-text); box-shadow: var(--vs-shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .25s; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
body:has(.buy-bar) .wa-float { bottom: 84px; }
@media (min-width: 992px) { body:has(.buy-bar) .wa-float { bottom: 20px; } }
.toast { border-radius: 14px; box-shadow: var(--vs-shadow-lg); animation: toastIn .3s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .25s, transform .25s; }
.toast.hiding { opacity: 0; transform: translateY(10px); }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.95); } }

@media print {
    .topbar, .site-header, .benefits, .site-footer, .wa-float, .to-top, .steps, .btn { display: none !important; }
}

/* Flechas del hero: solo al pasar el mouse, sin tapar el texto */
.hero .carousel-control-prev, .hero .carousel-control-next { width: 5%; opacity: 0; transition: opacity .2s; }
.hero .carousel:hover .carousel-control-prev, .hero .carousel:hover .carousel-control-next { opacity: .8; }
.slide { padding-inline: clamp(1.5rem, 6vw, 4.5rem); }