/* =====================
       Variables de tema
       ===================== */
       :root{
        /* Fondo general */
        --page:#0e0c14;
  
        /* Gradientes morado/azul (hero, tarjetas, disclaimer) */
        --c-bg-1:#1a0228; /* púrpura profundo */
        --c-bg-2:#2c0164; /* púrpura más oscuro */
        --card1:#1b1530;
        --card2:#241a48;
  
        /* Acentos neón */
        --accent-pink:#ff3bd2;
        --accent-blue:#33d1ff;
        --accent-violet:#7f3bff;
  
        /* Bordes y vidrio */
        --card-bg: rgba(255,255,255,.06);
        --card-stroke: rgba(255,255,255,.12);
        --stroke: rgba(255,255,255,.12);
        --muted: rgba(255,255,255,.80);
  
        /* Tira de categorías */
        --chip-1:#2c2450;
        --chip-2:#352a66;
  
        --radius: 1rem;
      }
  
      body{ background: var(--page); color:#fff; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
  
      /* =====================
         HERO
         ===================== */
      .hero-wrap{
        position: relative; overflow: hidden; color: #fff; border-radius: 1.25rem;
        padding: clamp(1rem, 2vw, 1.5rem);
        min-height: 420px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
        background:
          radial-gradient(1200px 300px at 60% 40%, rgba(127,59,255,.35), rgba(127,59,255,0) 60%),
          radial-gradient(900px 400px at 20% 20%, rgba(255,59,210,.35), rgba(255,59,210,0) 60%),
          linear-gradient(135deg, var(--c-bg-1), var(--c-bg-2));
      }
      .hero-wrap::before,
      .hero-wrap::after{ content:""; position:absolute; inset:0; pointer-events:none; }
      .hero-wrap::before{ /* franjas diagonales */
        background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.06) 35% 36%, transparent 36% 42%, rgba(255,255,255,.06) 42% 43%, transparent 43% 100%);
        mix-blend-mode: screen;
      }
      .hero-wrap::after{
        background:
          radial-gradient(400px 400px at 85% 20%, rgba(51,209,255,.45), transparent 70%),
          radial-gradient(350px 350px at 75% 80%, rgba(255,59,210,.35), transparent 70%);
        opacity: .9;
      }
  
      .headline{ font-family: Orbitron, Inter, sans-serif; letter-spacing:.02em; }
      .headline .title{ font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 700; text-transform: uppercase; }
      .headline .kicker{ font-size:.95rem; opacity:.9; text-transform: uppercase; letter-spacing:.15em; }
  
      .btn-neon{
        --bs-btn-color:#0d0416; --bs-btn-bg:var(--accent-blue); --bs-btn-border-color:var(--accent-blue);
        --bs-btn-hover-bg:#71e2ff; --bs-btn-hover-border-color:#71e2ff; --bs-btn-active-bg:#9befee;
        font-weight:700; text-transform:uppercase; letter-spacing:.08em; border-radius:999px; padding:.85rem 1.25rem;
        box-shadow: 0 0 24px rgba(51,209,255,.6), inset 0 0 12px rgba(255,255,255,.25);
      }
  
      .hero-figure{ /* imagen del personaje */
        position:absolute; right: clamp(240px, 28vw, 380px); bottom: 0;
        width: clamp(260px, 30vw, 420px); height:auto; object-fit:contain;
        filter: drop-shadow(0 12px 28px rgba(127,59,255,.55)); transform: translateY(10px);
      }
  
      .leader-card{ background:var(--card-bg); border:1px solid var(--card-stroke); border-radius:var(--radius);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding:.9rem 1rem; display:flex; align-items:center; gap:.75rem; }
      .leader-card + .leader-card{ margin-top:.75rem; }
      .trophy{ width:38px; height:38px; flex:0 0 38px; }
      .amount{ font-family: Orbitron, Inter, sans-serif; font-size:1.15rem; }
      .amount small{ opacity:.85; font-size:.8rem; margin-left:.25rem; }
  
      @media (max-width: 991.98px){ .hero-figure{ right:45%; opacity:.9; } }
      @media (max-width: 767.98px){ .hero-wrap{ min-height:560px; } .hero-figure{ right:50%; transform: translate(50%, 10px); width:min(70vw, 420px); opacity:.7; } }
  
      /* =====================
         Tira de categorías
         ===================== */
      .cat-strip{ position:relative; padding-block:.5rem; }
      .cat-scroll{ overflow-x:auto; overflow-y:hidden; white-space:nowrap; scroll-behavior:smooth; padding-inline:2.75rem; }
      .cat-scroll::-webkit-scrollbar{ height:0; }
  
      .cat-pill{ position:relative; display:inline-flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; margin-right:1.1rem; padding:.45rem 1.1rem; padding-right:1.6rem; border-radius:9999px; border:1px solid rgba(255,255,255,.08);
        background: radial-gradient(60% 120% at 20% 20%, rgba(255,255,255,.12), transparent 60%), linear-gradient(180deg, var(--chip-1), var(--chip-2));
        box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; font-weight:600; }
      .cat-pill.small{ font-weight:500; opacity:.9; }
      .cat-pill:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 24px rgba(127,92,255,.2); }
      .cat-pill.active{ outline:none; box-shadow: 0 0 0 2px rgba(127,92,255,.5), 0 6px 22px rgba(127,92,255,.35); }
  
      .chip-ico{ display:grid; place-items:center; width:28px; height:28px; border-radius:50%; flex:0 0 28px;
        background: radial-gradient(60% 100% at 30% 25%, rgba(255,255,255,.22), transparent 70%), linear-gradient(180deg, #8d7cff, #543bff);
        box-shadow: 0 0 14px rgba(127,92,255,.45), inset 0 0 0 1px rgba(255,255,255,.25); }
      .chip-ico i{ font-size:16px; }
  
      .edge{ position:absolute; top:0; bottom:0; width:42px; pointer-events:none; }
      .edge.left{ left:0; background: linear-gradient(90deg, var(--page), transparent); border-top-left-radius:1rem; border-bottom-left-radius:1rem; }
      .edge.right{ right:0; background: linear-gradient(270deg, var(--page), transparent); border-top-right-radius:1rem; border-bottom-right-radius:1rem; }
  
      .scroll-btn{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg, #2c2450, #352a66); color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.35); cursor:pointer; z-index:3; }
      .scroll-btn:hover{ filter:brightness(1.1); }
      .scroll-btn.left{ left:.5rem; } .scroll-btn.right{ right:.5rem; }
  
      @media (max-width:576px){ .hero-figure{
        display: none;
      }
        .cat-pill{ margin-right:.8rem; padding:.4rem .9rem; } .cat-scroll{ padding-inline:2.25rem; } }
  
      /* =====================
         Tarjetas promo (trío)
         ===================== */
      .neon-card{ position:relative; overflow:hidden; border-radius: calc(var(--radius) + .25rem);
        background:
          radial-gradient(80% 120% at 10% 10%, rgba(255,59,210,.20), transparent 60%),
          radial-gradient(80% 120% at 90% 40%, rgba(50,213,255,.15), transparent 60%),
          linear-gradient(180deg, var(--card1), var(--card2));
        border:1px solid var(--stroke); box-shadow: 0 16px 50px rgba(0,0,0,.45); min-height:220px; }
      .neon-card::before{ content:""; position:absolute; inset:-30%; pointer-events:none; background:
        radial-gradient(500px 220px at 80% 30%, rgba(127,59,255,.35), transparent 70%),
        radial-gradient(380px 220px at 15% 85%, rgba(255,59,210,.25), transparent 70%); }
      .neon-card .content{ position:relative; z-index:2; }
  
      .card-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:999px; font-weight:700; font-family: Orbitron, Inter, sans-serif; letter-spacing:.04em; color:#140a1f; background:linear-gradient(90deg, var(--accent-pink), var(--accent-blue)); box-shadow:0 0 24px rgba(127,59,255,.35), inset 0 0 0 1px rgba(255,255,255,.15); }
      .subtitle{ font-family: Orbitron, Inter, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-size:.9rem; }
      .title{ font-family: Orbitron, Inter, sans-serif; text-transform:uppercase; font-size:clamp(1.2rem, 1.4vw, 1.6rem); letter-spacing:.02em; }
      .bullet{ display:flex; align-items:center; gap:.6rem; color:var(--muted); }
      .bullet svg{ width:18px; height:18px; flex:0 0 18px; }
      .hero-img{ position:absolute; right:.75rem; bottom:-45px; height:150%; max-height:320px; object-fit:contain; filter: drop-shadow(0 12px 28px rgba(127,59,255,.55)); pointer-events:none; }
      @media (max-width:991.98px){ .hero-img{ opacity:.9; max-height:280px; } }
      @media (max-width:767.98px){ .hero-img{ position:relative; right:auto; display:block; margin-inline:auto; max-height:240px; } }
  
      /* =====================
         Disclaimer
         ===================== */
      .disc-wrap{ position:relative; overflow:hidden; border-radius:1.25rem; padding: clamp(1rem, 2vw, 1.5rem);
        background: radial-gradient(90% 140% at 15% 20%, rgba(255,59,210,.16), transparent 60%), radial-gradient(80% 120% at 85% 50%, rgba(50,213,255,.16), transparent 60%), linear-gradient(180deg, var(--card1), var(--card2));
        border:1px solid var(--stroke); box-shadow:0 18px 60px rgba(0,0,0,.45); }
      .disc-wrap::before{ content:""; position:absolute; inset:-25%; pointer-events:none; background:
        radial-gradient(600px 260px at 80% 25%, rgba(127,59,255,.32), transparent 70%),
        radial-gradient(420px 220px at 20% 90%, rgba(255,59,210,.22), transparent 70%); }
  
      .disc-title{ font-family: Orbitron, Inter, sans-serif; text-transform:uppercase; letter-spacing:.06em; }
      .disc-title .grad{ background:linear-gradient(90deg, var(--accent-pink), var(--accent-blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
      .stamp{ font-size:.85rem; color:var(--muted); }
  
      .neon-panel{ position:relative; border-radius: calc(var(--radius) + .25rem); border:1px solid var(--stroke); background:
        radial-gradient(80% 120% at 10% 10%, rgba(255,59,210,.14), transparent 60%),
        radial-gradient(60% 120% at 90% 30%, rgba(50,213,255,.12), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
      }
  
      .list-check{ --c:#a7b0ff; }
      .list-check li{ display:flex; gap:.65rem; align-items:flex-start; margin-bottom:.6rem; color:var(--muted); }
      .list-check svg{ width:18px; height:18px; flex:0 0 18px; color:var(--c); }
  
      .badge-18{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; background:linear-gradient(90deg, var(--accent-violet), var(--accent-blue)); color:#0f0719; font-weight:800; font-family: Orbitron, Inter, sans-serif; box-shadow:0 0 24px rgba(127,59,255,.35), inset 0 0 0 1px rgba(255,255,255,.15); }
  
      .cta-btn{ border-radius:999px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#0f0719; background:linear-gradient(90deg, var(--accent-pink), var(--accent-blue)); border:0; box-shadow:0 0 24px rgba(127,59,255,.35), inset 0 0 0 1px rgba(255,255,255,.15); }
  
      .accordion-button{ background-color:transparent !important; color:#fff; }
      .accordion-button:not(.collapsed){ box-shadow:none; }
      .accordion-item{ background:transparent; border-color:var(--stroke); }
      .accordion-body{ color:var(--muted); }
      
      .game-card {
        position: relative;
        background: linear-gradient(145deg, #181828, #0d0d15);
        border: 1px solid rgba(255,255,255,0.1);
        color: #fff;
        height: 100%;
      }
      
      .tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 20px;
        background: rgba(255,255,255,0.08);
        font-size: 0.8rem;
      }
      
      .rank {
        font-size: 1.2rem;
        font-weight: bold;
        color: #0ff;
        background: rgba(255,255,255,0.1);
        padding: 5px 12px;
        border-radius: 12px;
      }
      
      .btn-gradient {
        background: linear-gradient(90deg, #ff00cc, #00ccff);
        color: #fff;
        font-weight: 600;
        border: none;
      }
      
      .btn-outline-light {
        border: 1px solid rgba(255,255,255,0.3);
        color: #fff;
      }
      .age-warning {
        max-width: 800px;
      }
      
      .warning-card {
        background: linear-gradient(145deg, #181828, #0d0d15);
        border: 1px solid rgba(255,255,255,0.15);
        color: #fff;
        box-shadow: 0 0 25px rgba(255,0,128,0.3);
      }
      
      .warning-ico {
        font-size: 3rem;
        color: #ff0066;
      }
      
      .gradient-text {
        background: linear-gradient(90deg, #ff00cc, #00ccff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
      }
      
      .btn-gradient {
        background: linear-gradient(90deg, #ff00cc, #00ccff);
        color: #fff;
        font-weight: 600;
        border: none;
        border-radius: 10px;
      }
      
      .btn-outline-light {
        border: 1px solid rgba(255,255,255,0.3);
        color: #fff;
        border-radius: 10px;
      }
      .site-footer {
        background: linear-gradient(145deg, #0d0d15, #181828);
        border-top: 1px solid rgba(255,255,255,0.15);
        color: #aaa;
        font-size: 0.9rem;
      }
      
      .site-footer a {
        color: #fff;
        text-decoration: none;
        position: relative;
        transition: color 0.3s ease;
      }
      
      .site-footer a:hover {
        color: #00ccff;
      }
      
      .age-limit {
        font-weight: 600;
        color: #ff0066;
      }
      
      .gradient-text {
        background: linear-gradient(90deg, #ff00cc, #00ccff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 700;
      }
      .faq-section {
        background: linear-gradient(180deg, #0d0d15, #181828);
        border-top: 1px solid rgba(255,255,255,0.15);
        border-bottom: 1px solid rgba(255,255,255,0.15);
        color: #fff;
      }
      
      .faq-title {
        font-size: 2rem;
        font-weight: 700;
        background: linear-gradient(90deg, #ff00cc, #00ccff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .faq-item {
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }
      
      .faq-question {
        width: 100%;
        background: none;
        border: none;
        color: #fff;
        font-size: 1.1rem;
        text-align: left;
        padding: 1rem;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        transition: color 0.3s ease;
      }
      
      .faq-question:hover {
        color: #00ccff;
      }
      
      .faq-answer {
        display: none;
        padding: 0 1rem 1rem;
        color: #aaa;
        font-size: 0.95rem;
      }
      
      .faq-item.active .faq-answer {
        display: block;
      }
      
      .faq-item.active .toggle {
        transform: rotate(45deg);
      }
                  
      .privacy-policy {
        background: linear-gradient(180deg, #0b0b14, #161627);
        color: #e0e0e0;
        padding: 3rem 2rem;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      
      .policy-title {
        font-size: 2.5rem;
        font-weight: 800;
        text-transform: uppercase;
        background: linear-gradient(90deg, #ff00cc, #00ccff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .privacy-policy h2 {
        margin-top: 2rem;
        font-size: 1.5rem;
        color: #00ccff;
        font-weight: 700;
      }
      
      .privacy-policy p, 
      .privacy-policy li {
        font-size: 1rem;
        line-height: 1.6;
        color: #aaa;
      }
      
      .privacy-policy a {
        color: #ff00cc;
        text-decoration: none;
        font-weight: bold;
      }
      
      .privacy-policy a:hover {
        color: #00ccff;
      }
      .terms {
        background: linear-gradient(180deg, #0a0a12, #151522);
        color: #e0e0e0;
        padding: 3rem 2rem;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      
      .terms-title {
        font-size: 2.5rem;
        font-weight: 800;
        text-transform: uppercase;
        background: linear-gradient(90deg, #ff0099, #00e0ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .terms h2 {
        margin-top: 2rem;
        font-size: 1.5rem;
        color: #00e0ff;
        font-weight: 700;
      }
      
      .terms p, 
      .terms li {
        font-size: 1rem;
        line-height: 1.6;
        color: #bbb;
      }
      
      .terms a {
        color: #ff00cc;
        text-decoration: none;
        font-weight: bold;
      }
      
      .terms a:hover {
        color: #00e0ff;
      }
      iframe{
        display: block;
        margin: 0 auto;
        width: 80%;
        height: 500px;
      }

      .cookie {
        background: linear-gradient(180deg, #0a0a12, #151522);
        color: #e0e0e0;
        padding: 3rem 2rem;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      
      .cookie-title {
        font-size: 2.5rem;
        font-weight: 800;
        text-transform: uppercase;
        background: linear-gradient(90deg, #ffcc00, #ff0099);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .cookie h2 {
        margin-top: 2rem;
        font-size: 1.5rem;
        color: #ffcc00;
        font-weight: 700;
      }
      
      .cookie p,
      .cookie li {
        font-size: 1rem;
        line-height: 1.6;
        color: #bbb;
      }
      
      .cookie a {
        color: #ffcc00;
        font-weight: bold;
        text-decoration: none;
      }
      
      .cookie a:hover {
        color: #ff0099;
      }