:root{
    --draw-bg: rgba(255,255,255,0.55);
    --draw-latest-bg: #ffffff;
    --plum:#241B3D;
    --plum-2:#33254F;
    --violet:#8B2AA0;
    --violet-deep:#4A1054;
    --magenta:#9B2FAE;
    --pink:#FF3E8E;
    --gold:#FFC93C;
    --gold-2:#FFB000;
    --mint:#2FD9A7;
    --blue:#2D9CDB;
    --lavender-bg:#F4EEFB;
    --rose-card:#FBE3E3;
    --lavender-card:#EFE7F9;
    --gray-card:#EAEAEF;
    --cream-card:#FDF3D8;
    --cream:#FFF9EC;
    --paper:#FFFDF7;
    --ink:#1B2333;
    --text-main:#1B2333;
    --text-soft:#5B6473;
    --pill-text:var(--violet-deep);
    --surface:#FFFFFF;
    --input-bg:var(--lavender-bg);
    --font-display:'Baloo 2', system-ui, sans-serif;
    --font-body:'Nunito', system-ui, sans-serif;
    --font-mono:'Space Mono', monospace;
  }

  /* ---------- MODO OSCURO ----------
     Las tarjetas de colores (resultados, juegos, "Elige tus sorteos") se
     quedan igual de pasteles en los dos modos — son el acento de color del
     sitio, y su texto usa --ink, que a propósito NUNCA cambia (sigue
     oscuro siempre, porque esas tarjetas siguen claras siempre). Lo que sí
     cambia es el "fondo de la casa" (--paper, --lavender-bg, --surface) y
     el texto que vive directo sobre ese fondo (--text-main, --text-soft,
     --pill-text) — ese texto sí tiene que aclararse para poder leerse. */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --rose-card: #282140;
      --gray-card: #282140;
      --cream-card: #282140;
      --ink: #EDE7F6;
      --draw-bg: rgba(0,0,0,0.25);
      --draw-latest-bg: rgba(0,0,0,0.45);
      --paper:#161020;
      --lavender-bg:#1D1730;
      --surface:#332B4D;
      --input-bg:#1B1530;
      --text-main:#EDE7F6;
      --text-soft:#B9AFCB;
      --pill-text:#D9C9F0;
      --lavender-card:#282140;
    }
  }
  :root[data-theme="dark"]{
      --rose-card: #282140;
      --gray-card: #282140;
      --cream-card: #282140;
      --ink: #EDE7F6;
      --draw-bg: rgba(0,0,0,0.25);
      --draw-latest-bg: rgba(0,0,0,0.45);
    --paper:#161020;
    --lavender-bg:#1D1730;
    --surface:#332B4D;
    --input-bg:#1B1530;
    --text-main:#EDE7F6;
    --text-soft:#B9AFCB;
    --pill-text:#D9C9F0;
      --lavender-card:#282140;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;background:var(--paper);color:var(--text-main);font-family:var(--font-body);line-height:1.5;
    cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTQgMCBMMTcgMTEgTDI4IDE0IEwxNyAxNyBMMTQgMjggTDExIDE3IEwwIDE0IEwxMSAxMSBaIiBmaWxsPSIjRkZDOTNDIiBzdHJva2U9IiM0QTEwNTQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") 8 8, auto;
  }
  /* Destellos que van quedando al mover el mouse por la página. */
  .cursor-spark{
    position:fixed;z-index:9999;pointer-events:none;width:10px;height:10px;
    background:var(--gold);clip-path:polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
    animation:cursorSparkFade .6s ease-out forwards;
  }
  @keyframes cursorSparkFade{0%{opacity:1;transform:scale(1) rotate(0deg);}100%{opacity:0;transform:scale(0.2) rotate(50deg);}}
  img{max-width:100%;display:block;}
  a{color:inherit;}
  h1,h2,h3{font-family:var(--font-display);margin:0;}
  button{font-family:var(--font-body);cursor:pointer;}
  :focus-visible{outline:3px solid var(--pink);outline-offset:3px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
  }

  .wrap{max-width:1160px;margin:0 auto;padding:0 24px;}

  /* ---------- NAV ---------- */
  header.site-nav{
    position:sticky;top:0;z-index:50;
    background:linear-gradient(120deg, var(--plum), var(--violet-deep));
    border-bottom:4px solid var(--gold);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;max-width:1160px;margin:0 auto;}
  .brand{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;}
  .brand-coin{
    width:34px;height:34px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #FFE585, var(--gold-2) 70%);
    border:2px solid #B87A00;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;color:#7A4E00;font-size:16px;flex-shrink:0;
  }
  .brand-text{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:0.3px;}
  .brand-text span{color:var(--gold);}
  nav.links{display:flex;gap:22px;font-weight:700;font-size:14px;}
  nav.links a{text-decoration:none;color:#E7DAF2;padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s, border-color .15s, transform .15s;}
  nav.links a:hover{color:var(--gold);border-color:var(--gold);}
  nav.links a.nav-hot {
    background: linear-gradient(135deg, #FF3E8E, #FF9B00);
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 999px;
    border: none;
    box-shadow: 0 4px 10px rgba(255, 62, 142, 0.3);
  }
  nav.links a.nav-hot:hover {
    transform: scale(1.05);
    border: none;
  }
  .nav-toggle{display:none;background:none;border:none;color:var(--cream);font-size:26px;padding:4px 8px;}
  .theme-toggle{
    background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.18);color:var(--cream);
    font-size:16px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin-left:6px;flex-shrink:0;transition:transform .15s ease,background .15s ease;
  }
  .theme-toggle:hover{background:rgba(255,255,255,0.18);transform:translateY(-1px);}

  @media (max-width:720px){
    nav.links{
      position:absolute;top:100%;left:0;right:0;background:var(--plum);
      flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:max-height .25s ease;
      border-bottom:4px solid var(--gold);
    }
    nav.links.open{max-height:320px;}
    nav.links a{padding:14px 24px;border-bottom:1px solid #3A2B5C;}
    nav.links a.nav-hot{margin:12px;text-align:center;}
    .nav-toggle{display:block;}
  }

  /* ---------- TICKER ---------- */
  .ticker-bar{background:var(--gold);overflow:hidden;white-space:nowrap;padding:8px 0;border-bottom:3px solid var(--plum);}
  .ticker-track{display:inline-flex;gap:40px;animation:tickerScroll 22s linear infinite;padding-left:100%;}
  .ticker-track span{font-family:var(--font-mono);font-weight:700;font-size:13px;color:#4A2E00;}
  @keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
  @media (prefers-reduced-motion: reduce){ .ticker-track{animation:none;padding-left:0;} }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(circle at 15% 10%, rgba(255,201,60,0.28), transparent 50%),
      radial-gradient(circle at 85% 85%, rgba(47,217,167,0.18), transparent 45%),
      linear-gradient(165deg, var(--violet-deep) 0%, var(--violet) 55%, #7A1F8E 100%);
    padding:28px 0 20px;color:var(--cream);
  }
  .hero .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:20px;align-items:center;}
  @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;text-align:center;} .hero-art{order:-1;} }

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,201,60,0.16);border:1px solid var(--gold);color:var(--gold);
    font-weight:800;font-size:12.5px;letter-spacing:0.8px;text-transform:uppercase;
    padding:6px 14px;border-radius:999px;margin-bottom:12px;
  }
  .hero h1{font-size:clamp(28px, 4.5vw, 42px);line-height:1.03;font-weight:800;color:var(--paper);}
  .hero h1 .hl{color:var(--gold);}
  .hero p.lede{margin-top:12px;font-size:16px;color:#EADCF4;max-width:46ch;}
  @media (max-width:860px){ .hero p.lede{margin-inline:auto;} }

  .hero-ctas{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap;}
  @media (max-width:860px){ .hero-ctas{justify-content:center;} }
  .btn{font-weight:800;font-size:15px;padding:14px 26px;border-radius:12px;border:none;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .15s ease, box-shadow .15s ease;}
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--gold);color:#4A2E00;box-shadow:0 8px 0 var(--gold-2);}
  .btn-primary:active{transform:translateY(2px);box-shadow:0 4px 0 var(--gold-2);}
  .btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.35);color:var(--paper);}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold);}

  .hero-art{position:relative;max-width:240px;margin:0 auto;}
  .hero-art::before{
    content:'';position:absolute;inset:-60px;z-index:0;
    background:
      radial-gradient(circle, rgba(255,201,60,0.35) 0%, rgba(255,201,60,0) 60%),
      conic-gradient(from 0deg, rgba(47,217,167,0.18), rgba(255,201,60,0.18), rgba(255,62,142,0.18), rgba(47,217,167,0.18));
    border-radius:50%;filter:blur(18px);animation:heroSwirl 14s linear infinite, heroPulse 3.2s ease-in-out infinite;
  }
  .hero-parallax{position:absolute;inset:0;z-index:0;pointer-events:none;transition:transform .18s ease-out;}
  .hero-rays{
    position:absolute;inset:-100px;border-radius:50%;
    background:repeating-conic-gradient(from 0deg, rgba(255,255,255,0.14) 0deg 3deg, transparent 3deg 20deg);
    mix-blend-mode:screen;animation:heroSwirl 22s linear infinite reverse;
  }
  .hero-art .frame{position:relative;z-index:1;border-radius:24px;overflow:hidden;border:4px solid var(--gold);box-shadow:0 20px 40px rgba(0,0,0,0.35);}
  .hero-art img{width:100%;position:relative;z-index:1;animation:heroFloat 4.5s ease-in-out infinite;}
  .float-coin{
    position:absolute;z-index:2;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #FFE585, var(--gold-2) 70%);
    border:2px solid #B87A00;box-shadow:0 6px 14px rgba(0,0,0,.3);animation:bob 3.4s ease-in-out infinite;
  }
  .float-coin.c1{width:46px;height:46px;top:-14px;left:-14px;animation-delay:.2s;}
  .float-coin.c2{width:30px;height:30px;bottom:10%;right:-10px;animation-delay:1s;}
  .float-coin.c3{width:22px;height:22px;top:20%;right:-24px;animation-delay:1.8s;animation-duration:4.1s;}
  .float-coin.c4{width:18px;height:18px;bottom:-6px;left:18%;animation-delay:.6s;animation-duration:3.8s;}
  .float-coin.c5{width:26px;height:26px;top:-22px;right:22%;animation-delay:2.3s;animation-duration:4.6s;}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-14px) rotate(12deg);}}
  @keyframes heroFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
  @keyframes heroSwirl{to{transform:rotate(360deg);}}
  @keyframes heroPulse{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}

  .float-clover{position:absolute;z-index:2;font-size:22px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));animation:drift 5s ease-in-out infinite;}
  .float-clover.cl1{top:6%;left:-22px;font-size:20px;animation-delay:.3s;}
  .float-clover.cl2{bottom:14%;right:-26px;font-size:24px;animation-delay:1.6s;animation-duration:5.6s;}
  .float-clover.cl3{bottom:-16px;left:36%;font-size:18px;animation-delay:2.6s;animation-duration:4.7s;}
  @keyframes drift{0%,100%{transform:translateY(0) rotate(-8deg);}50%{transform:translateY(-16px) rotate(10deg);}}

  .float-sparkle{position:absolute;z-index:2;width:14px;height:14px;animation:twinkle 1.8s ease-in-out infinite;}
  .float-sparkle svg{width:100%;height:100%;display:block;}
  .float-sparkle.sp1{top:10%;left:8%;animation-delay:.1s;}
  .float-sparkle.sp2{top:38%;right:-6px;animation-delay:.7s;}
  .float-sparkle.sp3{bottom:22%;left:-10px;animation-delay:1.2s;}
  .float-sparkle.sp4{top:-8px;left:44%;animation-delay:.4s;width:10px;height:10px;}
  @keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6) rotate(0deg);}50%{opacity:1;transform:scale(1.15) rotate(25deg);}}

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:60px 0;}
  .section-head{max-width:640px;margin:0 auto 34px;text-align:center;}
  .section-head.left{text-align:left;margin:0 0 34px;max-width:none;}
  .section-head .kicker{font-family:var(--font-mono);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--pink);font-weight:700;}
  .section-head h2{font-size:clamp(26px,3.4vw,38px);margin-top:8px;color:var(--text-main);}
  .section-head p{margin-top:10px;color:var(--text-soft);font-size:16px;}

  /* ---------- STICKER NUMBER (signature element) ---------- */
  .sticker-ball{
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:radial-gradient(circle at 35% 28%, #fff7dd, var(--gold-2) 78%);
    color:#4A2E00;font-family:var(--font-mono);font-weight:700;
    border:1.5px solid #B87A00;box-shadow:0 3px 6px rgba(74,16,84,0.18);
  }
  .sticker-ball:nth-child(odd){transform:rotate(-4deg);}
  .sticker-ball:nth-child(even){transform:rotate(4deg);}

  /* ---------- RESULTADOS (cuerpo principal) ---------- */
  #resultados.section{
    background:var(--lavender-bg);
    position:relative;
  }
  #resultados::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(circle 5px at 8% 20%, rgba(255,62,142,0.25), transparent 60%),
      radial-gradient(circle 4px at 92% 30%, rgba(47,217,167,0.3), transparent 60%),
      radial-gradient(circle 6px at 15% 85%, rgba(255,201,60,0.3), transparent 60%),
      radial-gradient(circle 4px at 88% 90%, rgba(139,42,160,0.25), transparent 60%);
  }
  #resultados .wrap{position:relative;}

  .subscribe-bar{
    background:var(--surface);border-radius:12px;padding:8px 16px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    box-shadow:0 4px 14px rgba(74,16,84,0.1);margin-bottom:16px;
  }
  .subscribe-left{display:flex;align-items:center;gap:12px;}
  .bell-badge{width:32px;height:32px;border-radius:50%;background:var(--gold);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;}
  .subscribe-left strong{display:block;font-size:14px;color:var(--text-main);}
  .subscribe-left span{display:block;font-size:12px;color:var(--text-soft);margin-top:0px;}
  .btn-suscribe{
    background:linear-gradient(120deg,var(--pink),var(--violet-deep));
    color:#fff;font-weight:800;font-size:13px;padding:8px 16px;border-radius:999px;border:none;
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  }
  .btn-suscribe:hover{filter:brightness(1.08);}

  .results-datebar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
  .results-datebar h3{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--violet);}
  .results-datebar h3 strong{color:var(--violet-deep);}
  .pill-today{background:var(--surface);color:var(--pill-text);font-weight:800;font-size:12px;padding:5px 14px;border-radius:999px;}
  .date-nav{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;}
  .date-pick-pill{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1.5px solid #E3D9EE;border-radius:999px;padding:6px 14px;font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--pill-text);cursor:pointer;}
  .date-pick-pill input[type="date"]{border:none;background:transparent;font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--pill-text);cursor:pointer;color-scheme:light dark;}
  .btn-anteriores{background:var(--mint);color:#0B3D2E;font-weight:800;font-size:12.5px;padding:8px 16px;border:none;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform .15s ease;}
  .btn-anteriores:hover{transform:translateY(-1px);}

  .results-panel{
    background:linear-gradient(180deg, rgba(139,42,160,0.07), rgba(139,42,160,0.02));
    border-radius:24px;padding:26px;
  }
  .results-timehead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;flex-wrap:wrap;gap:6px;}
  .results-timehead h4{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text-main);}
  .results-timehead span{font-size:12px;color:var(--text-soft);}

  .results-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .results-col{display:flex;flex-direction:column;gap:18px;}
  @media (max-width:900px){ .results-columns{grid-template-columns:1fr 1fr;} }
  @media (max-width:640px){ .results-columns{grid-template-columns:1fr;} }

  .rcard{border-radius:18px;padding:18px 18px 20px;transition:transform .15s ease,opacity .15s ease,outline-color .15s ease;outline:2px solid transparent;outline-offset:-2px;}
  .rcard:hover{transform:translateY(-3px);}
  .rcard.dragging-card{opacity:0.35;}
  .rcard.card-drag-over{outline-color:var(--violet);}
  /* El agarre para mover la tarjeta entera vive en el encabezado (ver
     habilitarDragTarjetas) — así nunca choca con arrastrar las cajitas de
     adentro, que ocupan el resto de la tarjeta. */
  .rcard-head{cursor:grab;}
  .rcard-head:active{cursor:grabbing;}
  .rcard.bg-rose{background:var(--rose-card);}
  .rcard.bg-lavender{background:var(--lavender-card);}
  .rcard.bg-gray{background:var(--gray-card);}
  .rcard.bg-cream{background:var(--cream-card);}
  .bg-paper{background:var(--paper);}
  .rcard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
  .rcard-title{display:flex;align-items:center;gap:8px;}
  .rcard-logo{width:26px;height:26px;border-radius:8px;background:var(--violet);color:#fff;font-family:var(--font-mono);font-weight:800;font-size:10.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .rcard-title strong{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--ink);}
  .rcard-icons{color:#9C93AE;font-size:13px;display:flex;gap:8px;}
  .rcard-meta{font-size:11.5px;color:#8A8496;display:flex;align-items:center;gap:6px;margin:6px 0 12px;}
  .rcard-meta .time-pill{background:rgba(0,0,0,0.07);color:#514A63;font-weight:700;padding:2px 9px;border-radius:999px;}

  /* Igual que .anim-draws-list: la tarjeta queda de altura fija y adentro
     se hace scroll para ver los demás sorteos del día, en vez de estirar
     la tarjeta (y la página) sin límite. */
  .triple-draws-scroll{max-height:260px;overflow-y:auto;padding-right:4px;}
  /* Sorteos de un solo número (Triple Dorado, Triple Fácil): grilla de 2
     columnas en vez de una fila completa por hora. */
  .triple-draws-scroll.triple-draws-scroll-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;}
  .triple-box.compact{display:flex;flex-direction:column;}
  .triple-box.compact .t-label{opacity:.75;}
  .triple-draw-group{margin-bottom:14px;}
  .triple-draw-group:last-child{margin-bottom:0;}
  .triple-draw-group .tdg-time{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#8A8496;margin-bottom:6px;}
  .triple-draw-group.latest .tdg-time{color:var(--violet);}
  .triple-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .triple-box{background:var(--draw-bg);border-radius:12px;padding:9px 12px;cursor:grab;transition:opacity .15s ease,outline-color .15s ease;outline:2px solid transparent;outline-offset:-2px;}
  .triple-box:active{cursor:grabbing;}
  .triple-box.dragging{opacity:0.35;}
  .triple-box.drag-over{outline-color:var(--violet);}
  .triple-box.wide{grid-column:1/-1;}
  .triple-box .t-label{font-size:10px;font-weight:800;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.4px;}
  .triple-box .t-value{font-family:var(--font-mono);font-weight:700;font-size:19px;color:var(--ink);margin-top:2px;}
  .triple-box .t-sub{font-size:12.5px;font-weight:700;color:var(--ink);margin-left:6px;}

  .animal-row{display:flex;align-items:center;gap:14px;}
  .animal-tile{width:60px;height:60px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(160deg,#DCEFE3,#B9E0C9);}
  .animal-tile.plain{background:transparent;font-size:38px;}
  .animal-num{font-family:var(--font-display);font-weight:800;font-size:28px;color:var(--ink);line-height:1;}
  .animal-name{font-size:13px;color:#6B7280;font-weight:700;margin-top:4px;}

  /* Lista de varios sorteos horarios en una misma tarjeta (ej: Lotto Activo) */
  .anim-draws-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;padding-right:4px;}
  .anim-draws-list::-webkit-scrollbar{width:6px;}
  .anim-draws-list::-webkit-scrollbar-thumb{background:rgba(122,31,61,0.18);border-radius:999px;}
  .anim-draw-row{display:flex;align-items:center;gap:10px;background:var(--draw-bg);border-radius:12px;padding:7px 10px;}
  .anim-draw-row .adr-time{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#8A8496;width:66px;flex-shrink:0;}
  .anim-draw-row .adr-emoji{font-size:20px;flex-shrink:0;}
  .anim-draw-row .adr-num{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink);width:28px;flex-shrink:0;}
  .anim-draw-row .adr-name{font-size:12.5px;color:#6B7280;font-weight:700;}
  .anim-draw-row.latest{background:var(--draw-latest-bg);box-shadow:0 2px 6px rgba(74,16,84,0.1);}
  .anim-draw-row.doble{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
  .anim-draw-row.doble .adr-chip{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink);background:var(--draw-latest-bg);border-radius:999px;padding:3px 10px;}

  /* Lista de varios sorteos "triple" (El Arrejuntao, Triple Zulia) en una tarjeta */
  .triple-draws-list{display:flex;flex-direction:column;gap:8px;max-height:270px;overflow-y:auto;padding-right:4px;}
  .triple-draws-list::-webkit-scrollbar{width:6px;}
  .triple-draws-list::-webkit-scrollbar-thumb{background:rgba(122,31,61,0.18);border-radius:999px;}
  .triple-draw-row{background:var(--draw-bg);border-radius:12px;padding:9px 12px;}
  .triple-draw-row.latest{background:var(--draw-latest-bg);box-shadow:0 2px 6px rgba(74,16,84,0.1);}
  .triple-draw-row .tdr-time{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:#8A8496;margin-bottom:5px;}
  .triple-draw-row .tdr-values{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink);}
  .triple-draw-row .tdr-values .tdr-label{font-size:9.5px;font-weight:800;color:var(--text-soft);text-transform:uppercase;margin-right:3px;}
  .triple-draw-row .tdr-values .tdr-sub{font-size:11px;font-weight:700;color:var(--ink);margin-left:2px;}

  .results-more{display:flex;justify-content:center;margin-top:28px;}
  .btn-pill-ghost{background:var(--surface);border:1.5px solid #E3D9F0;color:var(--pill-text);font-weight:800;font-size:13.5px;padding:11px 22px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;font-family:inherit;}
  /* Colapsado (por defecto): solo se ven las primeras 2 tarjetas de cada
     columna — el resto queda oculto hasta tocar "Ver todos los resultados".
     Como es por posición (no por sorteo puntual), se adapta solo si el
     usuario reordena las tarjetas arrastrando. */
  .results-columns:not(.expandido) .results-col > .rcard:nth-child(n+3){display:none;}
  .btn-pill-ghost:hover{border-color:var(--violet);}

  .disclaimer{margin-top:28px;font-size:12.5px;color:var(--text-soft);text-align:center;max-width:680px;margin-inline:auto;line-height:1.6;}
  .disclaimer strong{color:var(--text-main);}

  /* ---------- DIVERSION (bento dinámico: juegos + pirámide + suerte) ---------- */
  #diversion.section{background:var(--paper);}
  .fun-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;grid-auto-flow:dense;}
  @media (max-width:900px){ .fun-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:620px){ .fun-grid{grid-template-columns:1fr;} }

  .fun-card{border-radius:18px;padding:24px;position:relative;overflow:hidden; height: 100%; display: flex; flex-direction: column; justify-content: flex-start;}
.fun-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--plum);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
  }

  .pronosticos-row .fun-badge{ display: none; }
  .fun-card h3{font-size:18px;color:var(--ink);display:flex;align-items:center;gap:8px;}
  .fun-card p.desc{color:var(--text-soft);font-size:13px;margin:4px 0 12px;line-height:1.3;}

  .fc-ttt{grid-column:span 4;background:var(--rose-card);}
  .fc-rps{grid-column:span 4;background:var(--cream-card);}
  .fc-pyramid{grid-column:span 4;background:var(--lavender-card);}
  .fc-lucky{background:linear-gradient(135deg, var(--plum) 0%, var(--violet-deep) 100%);color:var(--cream);}
  .fc-lucky h3{color:var(--gold);}
  .fc-lucky p.desc{color:#C7B7DA;}
  @media (max-width:900px){ .fc-ttt,.fc-rps,.fc-pyramid,.fc-lucky,.fc-dream{grid-column:1/-1;grid-row:auto;} }

  .fc-dream{
    background:linear-gradient(135deg, var(--plum) 0%, var(--violet-deep) 100%);color:var(--cream);
  }
  .fc-dream h3{color:var(--gold);}
  .fc-dream p.desc{color:#C7B7DA;}
  .dream-search{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap;}
  .dream-search input{
    flex:1;min-width:180px;padding:12px 16px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.08);color:var(--cream);font-family:var(--font-body);font-size:14.5px;
  }
  .dream-search input::placeholder{color:#B9AFCB;}
  .dream-search input:focus-visible{outline:2px solid var(--gold);}
  .dream-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px;max-width:460px;margin-left:auto;margin-right:auto;}
  .dream-chip{
    background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.16);color:#E7DAF2;
    border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s;
  }
  .dream-chip:hover{background:rgba(255,255,255,0.16);}
  #dreamResult{max-width:460px;margin:18px auto 0;min-height:0;}
  .dream-card{
    display:flex;align-items:center;gap:16px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,201,60,0.35);
    border-radius:16px;padding:16px 18px;text-align:left;
  }
  .dream-emoji{font-size:34px;flex-shrink:0;}
  .dream-word{font-family:var(--font-display);font-weight:700;font-size:16px;color:#FFF;text-transform:capitalize;}
  .dream-meaning{font-size:12.5px;color:#C7B7DA;margin-top:2px;}
  .dream-number{
    font-family:var(--font-mono);font-weight:700;font-size:26px;color:var(--gold);margin-top:6px;letter-spacing:1px;
  }
  .dream-empty{color:#B9AFCB;font-size:13.5px;text-align:center;}

  /* Tic Tac Toe */
  #ttt-board{display:grid;grid-template-columns:repeat(3,75px);justify-content:center;gap:12px;margin:20px auto;}
  .cell{width:75px;height:75px;background:var(--draw-bg);border:2px solid rgba(122,31,61,0.18);border-radius:12px;font-family:var(--font-display);font-size:32px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--plum);transition:background .12s;box-sizing:border-box;padding:0;margin:0;}
  .cell:hover:not(:disabled){background:var(--draw-latest-bg);}
  .cell:disabled{cursor:default;}
  .cell.x{color:var(--pink);}
  .cell.o{color:var(--blue);}
  .game-status{text-align:center;margin-top:14px;font-weight:800;color:var(--ink);font-family:var(--font-mono);font-size:13px;min-height:18px;}
  .game-foot{display:flex;justify-content:center;margin-top:14px;}
  .btn-small{background:var(--plum);color:var(--gold);font-weight:800;font-size:13px;padding:9px 18px;border-radius:9px;border:none;}
  .btn-small:hover{background:var(--violet-deep);}

  /* RPS */
  .rps-choices{display:flex;justify-content:center;gap:12px;margin-top:4px;}
  .rps-btn{width:80px;height:80px;border-radius:50%;font-size:38px;background:var(--draw-bg);border:2px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;transition:transform .12s, background .12s;}
  .rps-btn:hover{transform:translateY(-3px) scale(1.05);background:var(--draw-latest-bg);}
  .rps-arena{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px;min-height:60px;}
  .rps-slot{width:80px;height:80px;border-radius:50%;background:var(--plum);display:flex;align-items:center;justify-content:center;font-size:38px;color:var(--cream);}
  .rps-vs{font-family:var(--font-mono);font-weight:700;color:#9C8AA6;font-size:12px;}
  .rps-score{display:flex;justify-content:center;gap:16px;margin-top:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink);font-weight:700;}

  /* Piramide */
  .date-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .date-form input{font-family:var(--font-mono);font-size:15px;text-align:center;width:64px;padding:10px 4px;border-radius:10px;border:2px solid rgba(122,31,61,0.15);background:#fff;color:var(--plum);}
  .date-form input:nth-child(3){width:82px;}
  .date-form label{font-size:10.5px;color:var(--text-soft);display:block;margin-bottom:4px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
  .date-field{display:flex;flex-direction:column;}
  #pyramid-out{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:20px;min-height:170px;}
  .pyr-row{display:flex;gap:5px;}
  .pyr-digit{width:28px;height:28px;border-radius:8px;background:var(--plum);color:var(--gold);font-family:var(--font-mono);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;}
  .pyr-row.top .pyr-digit{background:var(--pink);color:#fff;width:38px;height:38px;font-size:17px;}
  .pyramid-numbers{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center;}
  .pyramid-numbers .sticker-ball{width:40px;height:40px;font-size:13px;}
  .pyr-placeholder{color:#B9A8C6;font-size:13px;text-align:center;margin-top:50px;}

  /* Lucky */
  .lucky-balls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0;min-height:56px;}
  .lucky-balls .sticker-ball{width:52px;height:52px;font-size:17px;}
  .lucky-balls .sticker-ball.digit{width:44px;height:44px;font-size:20px;}
  .lucky-animal-chip{
    display:inline-flex;flex-direction:column;align-items:center;gap:2px;
    min-width:76px;padding:8px 10px;border-radius:14px;
    background:radial-gradient(circle at 35% 28%, #fff7dd, var(--gold-2) 78%);
    color:#4A2E00;border:1.5px solid #B87A00;box-shadow:0 3px 6px rgba(74,16,84,0.18);
  }
  .lucky-animal-chip:nth-child(odd){transform:rotate(-3deg);}
  .lucky-animal-chip:nth-child(even){transform:rotate(3deg);}
  .lucky-animal-chip .lac-emoji{font-size:22px;line-height:1;}
  .lucky-animal-chip .lac-num{font-family:var(--font-mono);font-weight:700;font-size:15px;}
  .lucky-animal-chip .lac-name{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;}
  .lucky-note{font-size:13px;color:#C7B7DA;max-width:52ch;margin:14px auto 0;text-align:center;}
  .fc-lucky .fun-inner{max-width:420px;margin:0 auto;text-align:center;}

  
  /* Action Chips */
  .action-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--c);
    background: transparent;
    color: #b9afcb;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
  .action-chip:hover {
    background: var(--c);
    color: #fff;
  }
  .action-chip svg {
    stroke: currentColor;
    opacity: 0.8;
  }

  /* ---------- ALERTAS EN 3 PASOS ---------- */
  #alertas.section{background:var(--lavender-bg);}
  .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
  @media (max-width:860px){ .steps-grid{grid-template-columns:1fr;} }
  .step-card{border-radius:22px;padding:26px;min-height:280px;display:flex;flex-direction:column;}
  .step-card.s1{background:var(--surface);color:var(--ink);}
  .step-card.s2{background:linear-gradient(160deg,#6A1C7D,#3D0F52);color:#fff;}
  .step-card.s3{background:linear-gradient(160deg,var(--plum),#12101E);color:#fff;}
  .step-badge{width:30px;height:30px;border-radius:50%;background:var(--gold);color:#4A2E00;font-family:var(--font-mono);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
  .step-card h3{font-size:19px;font-weight:700;}
  .step-card p{font-size:13.5px;line-height:1.5;margin-top:8px;opacity:0.85;max-width:34ch;}
  .step-preview{margin-top:20px;}
  .mini-card{background:var(--lavender-card);border-radius:14px;padding:14px 16px;color:var(--ink);}
  #sorteosList{max-height:160px;overflow-y:auto;padding-right:4px;margin-top:2px;}
  .step-card.s2 .mini-card, .step-card.s3 .mini-card{background:rgba(255,255,255,0.06);color:#fff;}
  .mini-row{display:flex;align-items:center;gap:9px;font-size:13px;padding:6px 0;}
  .mini-row input[type="checkbox"], .mini-row input[type="radio"]{
    appearance:none;-webkit-appearance:none;width:17px;height:17px;border-radius:5px;
    border:2px solid #C9C0D8;background:transparent;flex-shrink:0;cursor:pointer;margin:0;
  }
  .mini-row input[type="radio"]{border-radius:50%;}
  .mini-row input:checked{background:var(--violet);border-color:var(--violet);}
  .mini-row input:disabled{opacity:0.4;cursor:not-allowed;}
  .mini-row label{cursor:pointer;}
  .step-card.s2 .mini-row input{border-color:rgba(255,255,255,0.35);}
  .mini-row.sub{padding-left:22px;}
  .mini-row.dim{color:#B9B2C6;}
  .step-card.s2 .mini-row.dim{color:rgba(255,255,255,0.4);}
  .mini-field{margin-bottom:9px;}
  .mini-field label{display:block;font-size:11px;font-weight:700;color:#5B6473;margin-bottom:3px;}
  .step-card.s3 .mini-field label{color:rgba(255,255,255,0.6);}
  .mini-field input{width:100%;padding:7px 11px;border-radius:9px;border:2px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:#fff;font-family:var(--font-body);font-size:13.5px;}
  .mini-summary{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,0.75);margin-top:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.1);}
  .mini-summary strong{color:var(--gold);}
  .mini-card .mini-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.5px;opacity:0.6;margin-bottom:6px;font-weight:700;}
  .siete-logo{font-family:var(--font-display);font-weight:800;font-size:15px;text-align:center;color:#fff;margin-bottom:2px;}
  .siete-sub{font-size:11px;text-align:center;color:rgba(255,255,255,0.6);margin-bottom:12px;}
  .siete-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .siete-box{background:rgba(255,255,255,0.08);border-radius:10px;padding:7px 10px;}
  .siete-box.wide{grid-column:1/-1;}
  .siete-box .t-label{font-size:9.5px;opacity:0.6;text-transform:uppercase;font-weight:700;}
  .siete-box .t-value{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--gold);margin-top:2px;}

  /* ---------- CTA BANNER ---------- */
  .cta-banner{background:var(--gold);padding:56px 0;position:relative;overflow:hidden;}
  .cta-banner .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative;}
  .cta-banner h2{font-size:clamp(28px,4.2vw,42px);color:var(--plum);}
  .btn-dark{background:var(--plum);color:#fff;font-weight:800;font-size:14.5px;padding:14px 26px;border-radius:12px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
  .btn-dark:hover{background:var(--violet-deep);}

  /* ---------- MODALES ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(18,10,28,0.55);z-index:100;
    display:none;align-items:center;justify-content:center;padding:20px;
  }
  .modal-overlay.open{display:flex;}
  .modal-box{
    background:var(--surface);border-radius:20px;padding:28px;max-width:420px;width:100%;
    box-shadow:0 20px 50px rgba(0,0,0,0.35);position:relative;max-height:90vh;overflow-y:auto;
  }
  .modal-box h3{font-size:20px;color:var(--text-main);margin-bottom:4px;}
  .modal-box p.modal-sub{font-size:13px;color:var(--text-soft);margin-bottom:18px;}
  .modal-close{position:absolute;top:14px;right:14px;background:none;border:none;font-size:20px;color:var(--text-soft);line-height:1;}
  .modal-field{margin-bottom:14px;}
  .modal-field label{display:block;font-size:12px;font-weight:700;color:var(--text-soft);margin-bottom:5px;}
  .modal-field input, .modal-field select{
    width:100%;padding:11px 12px;border-radius:10px;border:2px solid #E3D6EE;
    font-family:var(--font-body);font-size:14px;background:var(--input-bg);color:var(--text-main);
  }
  .modal-checks{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
  .modal-checks label{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--text-main);}
  .modal-submit{width:100%;justify-content:center;}
  .modal-msg{margin-top:14px;font-size:13px;font-weight:700;text-align:center;min-height:18px;}
  .modal-msg.ok{color:var(--mint);}
  .modal-msg.err{color:var(--pink);}
  .rcard-request-btn{
    margin-top:12px;width:100%;background:var(--draw-bg);border:1.5px dashed #B98AB0;
    color:var(--text-main);font-weight:800;font-size:12px;padding:8px;border-radius:10px;
  }
  .rcard-request-btn:hover{background:#fff;}
  /* Escondido hasta conectar el pedido real con WhatsApp + el integrador
     que recibe las apuestas. Mientras tanto se ve el botón de pronóstico. */
  .rcard-request-btn[data-request-btn]{display:none;}
  .rcard-forecast-btn{
    margin-top:12px;width:100%;background:rgba(255,201,60,0.18);border:1.5px dashed var(--gold-2);
    color:var(--gold);font-weight:800;font-size:12px;padding:8px;border-radius:10px;cursor:pointer;
  }
  .rcard-forecast-btn:hover{background:rgba(255,201,60,0.3);}
  .rcard-forecast-out{
    margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;
    background:var(--lavender-bg);border-radius:10px;padding:8px;font-family:var(--font-mono);font-weight:700;font-size:13px;
  }
  .rcard-forecast-out .rf-emoji{font-size:18px;}

  /* ---------- FOOTER ---------- */
  
  
  

  /* ---------- SMALL SCREENS ---------- */
  @media (max-width:600px){
    .wrap{padding:0 16px;}
    .section{padding:44px 0;}
    .hero{padding:24px 0 16px;}
    .hero-ctas{flex-direction:column;align-items:stretch;}
    .btn{justify-content:center;}

    .subscribe-bar{padding:10px 12px;flex-direction:row;align-items:center;text-align:left;gap:8px;}
    .subscribe-left{flex-direction:row;text-align:left;gap:8px;}
    .subscribe-left span{display:none;} /* Ocultar texto secundario en móvil para ahorrar espacio */
    .btn-suscribe{justify-content:center;padding:6px 12px;font-size:12px;}
    .results-datebar h3{font-size:18px;}
    .results-panel{padding:16px;border-radius:16px;}
    .rcard{padding:14px;}
    .animal-tile{width:50px;height:50px;font-size:24px;}
    .animal-num{font-size:22px;}

    
    #ttt-board{grid-template-columns:repeat(3,62px);}
    .cell{width:62px;height:62px;font-size:26px;}
    .rps-btn{width:52px;height:52px;font-size:22px;}
    .rps-slot{width:50px;height:50px;font-size:22px;}
    .date-form{gap:6px;}
    .date-form input{width:56px;padding:9px 4px;font-size:13px;}
    .date-form input:nth-child(3){width:74px;}

    .step-card{padding:22px;min-height:auto;}
    .steps-grid{gap:16px;}
    .cta-banner{padding:40px 0;text-align:center;}
    .cta-banner .wrap{justify-content:center;text-align:center;}
  }

  @media (max-width:380px){
    .brand-text{font-size:17px;}
    .hero h1{font-size:26px;}
    .section-head h2{font-size:24px;}
    .date-form{justify-content:center;}
  }
@media (max-width:900px){ .pronosticos-row { grid-template-columns: 1fr !important; } }


/* ================= EFECTOS DE ILUMINACION Y GRADIENTES (MODO OSCURO) ================= */
@keyframes darkAura {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[data-theme="dark"] body {
  background: linear-gradient(-45deg, #11091c, #261742, #160d29, #22143b) !important;
  background-size: 400% 400% !important;
  animation: darkAura 15s ease infinite !important;
}

[data-theme="dark"] .rcard, 
[data-theme="dark"] .step-card.s1 {
  background: linear-gradient(145deg, #2f254a, #1d1630) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}

[data-theme="dark"] .rcard:hover, 
[data-theme="dark"] .step-card.s1:hover {
  box-shadow: 0 8px 30px rgba(139, 42, 160, 0.35) !important;
  border: 1px solid rgba(139, 42, 160, 0.2) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background: linear-gradient(-45deg, #11091c, #261742, #160d29, #22143b) !important;
    background-size: 400% 400% !important;
    animation: darkAura 15s ease infinite !important;
  }
  :root:not([data-theme="light"]) .rcard,
  :root:not([data-theme="light"]) .step-card.s1 {
    background: linear-gradient(145deg, #2f254a, #1d1630) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(255,255,255,0.03) !important;
  }
  :root:not([data-theme="light"]) .rcard:hover,
  :root:not([data-theme="light"]) .step-card.s1:hover {
    box-shadow: 0 8px 30px rgba(139, 42, 160, 0.35) !important;
    border: 1px solid rgba(139, 42, 160, 0.2) !important;
  }
}

.rcard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.action-btn {
  background: var(--draw-bg);
  border: 1.5px solid rgba(122,31,61,0.08);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.action-btn:hover {
  background: var(--draw-latest-bg);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.action-btn.action-fav {
  border-color: rgba(255, 201, 60, 0.3);
  color: var(--gold-2);
}
.action-btn.action-fav:hover {
  background: rgba(255, 201, 60, 0.1);
}
[data-theme="dark"] .action-btn {
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .action-btn.action-fav {
  color: var(--gold);
}

/* Efecto de iluminación para la sección de estadísticas */
@keyframes highlightSection {
  0% { box-shadow: inset 0 0 0px 0px rgba(139, 42, 160, 0); }
  15% { box-shadow: inset 0 0 60px 15px rgba(139, 42, 160, 0.7); background-color: var(--violet-deep) !important; }
  85% { box-shadow: inset 0 0 60px 15px rgba(139, 42, 160, 0.7); background-color: var(--violet-deep) !important; }
  100% { box-shadow: inset 0 0 0px 0px rgba(139, 42, 160, 0); }
}
.highlight-glow {
  animation: highlightSection 2.5s ease-out;
  border-radius: 12px;
  transition: all 0.3s ease;
}

  /* ---------- FOOTER BANNER ---------- */
  .footer-banner { background: var(--gold); padding: 50px 0; }
  .footer-banner .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
  .footer-banner h2 { font-family: var(--font-display); font-weight: 800; font-size: 42px; color: #241B3D; margin: 0; line-height: 1.1; }
  .btn-empezar { background: #33254F; color: #fff; border: none; padding: 14px 28px; font-weight: 700; font-size: 14.5px; border-radius: 999px; cursor: pointer; transition: transform 0.2s, background 0.2s; }
  .btn-empezar:hover { background: #4A1054; transform: scale(1.05); }

  /* ---------- NEW FOOTER ---------- */
  .site-footer { background: #181525; color: #9C93AE; padding: 60px 0 30px; font-size: 13.5px; }
  .footer-links-grid { display: flex; justify-content: center; gap: 140px; margin-bottom: 50px; }
  .footer-col h4 { color: #fff; font-weight: 800; margin-bottom: 18px; font-size: 14.5px; }
  .footer-col a { display: block; color: #9C93AE; text-decoration: none; margin-bottom: 12px; transition: color 0.2s; }
  .footer-col a:hover { color: var(--gold); }
  
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
  .footer-legal-text p { margin: 0 0 8px 0; font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,0.45); }
  .footer-legal-text p:last-child { margin: 0; }
  .footer-legal-text a { color: rgba(255,255,255,0.55); text-decoration: underline; }
  .footer-legal-text a:hover { color: #fff; }
  
  .footer-18 { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 2.5px solid #E53935; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #E53935; font-size: 12px; flex-shrink: 0; }

  @media (max-width: 768px) {
    .footer-banner h2 { font-size: 32px; text-align: center; width: 100%; }
    .footer-banner .wrap { justify-content: center; }
    .footer-links-grid { flex-direction: column; align-items: center; text-align: center; gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  }