:root{
  --bg:#05070d; --line:#222c40; --text:#f4f7fc; --muted:#8c98ad;
  --blue:#2f8cff; --promo:#0b2350;
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
html{scroll-behavior:smooth}
body{color:var(--text);padding-bottom:84px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ic{width:24px;height:24px;stroke:currentColor;fill:none;flex:none}

main{max-width:1200px;margin:0 auto;padding:0 16px}
.promo{display:flex;align-items:center;gap:14px;margin:12px 0 18px;padding:12px 18px;background:var(--promo);border:1px solid #163a78;border-radius:12px;font-family:var(--font)}
.bolt{width:42px;height:42px;color:var(--blue)}
.bolt use{fill:var(--blue)}
.promo-text{flex:1;padding-right:14px}
.promo p{font-size:14px;color:#5fa6ff}
.promo h2{font-size:clamp(20px,4.6vw,34px);font-weight:800;line-height:1.1;color:#4a9bff;margin:0}
.timer{border-left:1px solid #2a4f94;padding-left:16px;text-align:center}
.timer strong{display:block;font-size:clamp(18px,3.4vw,28px);letter-spacing:2px;font-variant-numeric:tabular-nums;color:#4a9bff}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;font-family:var(--font)}
.chip{display:flex;align-items:center;gap:10px;height:48px;padding:0 20px;border:1px solid var(--line);border-radius:24px;font:inherit;font-size:16px;color:var(--text);background:none;white-space:nowrap;cursor:pointer}
.chip .ic{width:22px;height:22px;color:var(--muted)}
.chip[aria-pressed="true"]{border-color:var(--blue);background:#0d2a5e;box-shadow:0 0 0 1px var(--blue) inset}
.chip[aria-pressed="true"] .ic{color:var(--text)}

@media (max-width:720px){
        .chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        margin-right: -16px;
        padding-right: 16px;
        padding-bottom: 4px;
        scrollbar-color: #2f8cff #555555;    
    }
    
    .chips:-webkit-scrollbar {
    transition: width 0.3s ease;
    }
    
       .chips:-webkit-scrollbar:hover {
    transition: width 0.3s ease;
    }
    
}

/* Bloques de productos del CMS */
.cms-bloque[hidden]{display:none}
.cms-bloque hr{border-top-color:var(--line)}
.cms-bloque .cms-prod-title{color:var(--text)} /* el fondo es oscuro; quita esta línea si tu CMS ya lo resuelve */

/* Menú inferior (mobile) */
.tabbar{position:fixed;inset:auto 0 0 0;z-index:20;display:flex;justify-content:space-around;padding:12px 0 18px;background:var(--bg);border-top:1px solid var(--line);font-family:var(--font)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:15px;color:var(--muted)}
.tabbar a.on{color:var(--blue)}
@media (min-width:900px){.tabbar{display:none}body{padding-bottom:32px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}