/* rgb-halo.css — página de la función RGB Halo (rgb-halo.html).
   Reutiliza el design system (tokens/base/components) y las tarjetas de products.css.
   Solo añade el hero, la franja de color y la lista de beneficios. */

/* ============================================================
   HERO  (mismo patrón que .shop-hero/.tech-hero, glow RGB sutil)
   ============================================================ */
.rgb-hero{position:relative;padding:140px 0 56px;border-bottom:1px solid var(--line-2);overflow:hidden}
.rgb-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(70% 80% at 12% 0%, rgba(225,6,0,.14), transparent 58%),
    radial-gradient(60% 80% at 88% 10%, rgba(192,75,255,.10), transparent 60%),
    radial-gradient(60% 90% at 60% 0%, rgba(31,211,201,.07), transparent 62%)}
.rgb-hero .wrap{position:relative;z-index:1}
.rgb-hero h1{font-size:clamp(2.8rem,7vw,5rem);margin:14px 0 0;padding-right:.18em}
.rgb-hero .lede{color:#D6D6D6;font-size:1.12rem;max-width:44em;margin:20px 0 0}

/* Franja decorativa de color bajo el hero (sin "contar" colores). */
.rgb-strip{height:5px;width:100%;margin-top:34px;border-radius:4px;
  background:linear-gradient(90deg,#FF2616,#FFB020,#37E04B,#1FD3C9,#2F7BFF,#C04BFF,#FF2616);
  background-size:200% 100%;box-shadow:0 0 22px rgba(225,6,0,.30)}
@media(prefers-reduced-motion:no-preference){
  .rgb-strip{animation:rgbpan 14s linear infinite}
}
@keyframes rgbpan{from{background-position:0 0}to{background-position:200% 0}}

/* ============================================================
   "Be seen" — lista de beneficios
   ============================================================ */
.rgb-benefits{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:16px;max-width:54em}
.rgb-benefits li{position:relative;padding-left:30px;color:var(--silver);font-size:1rem;line-height:1.5}
.rgb-benefits li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;border-radius:50%;
  background:conic-gradient(#FF2616,#FFB020,#37E04B,#1FD3C9,#2F7BFF,#C04BFF,#FF2616);
  box-shadow:0 0 10px rgba(255,255,255,.18)}
.rgb-disclaimer{margin-top:22px;font-size:.78rem;color:var(--muted-2);font-style:italic;max-width:44em}

/* ============================================================
   Lineup  (reutiliza .product-grid/.pcard de products.css)
   ============================================================ */
.rgb-lineup .product-grid{margin-top:40px}
.rgb-empty{color:var(--muted);margin-top:24px}

/* CTA final */
.rgb-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}