:root{
      --bg: #0b1020;
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.65);
      --border: rgba(255,255,255,.14);
      --accent: #ffd166;
      --accent2: #7bdff2;
      --ok: #7CFF6B;
      --shadow: 0 20px 60px rgba(0,0,0,.35);
      --radius: 18px;
      --max: 1120px;
    }
    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      color:var(--text);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(900px 420px at 20% 10%, rgba(123,223,242,.16), transparent 60%),
        radial-gradient(800px 420px at 80% 15%, rgba(255,209,102,.14), transparent 60%),
        radial-gradient(900px 520px at 50% 120%, rgba(255,99,132,.10), transparent 60%),
        var(--bg);
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    .wrap{ max-width: var(--max); margin:0 auto; padding: 0 18px; }

    /* Topbar */
    .topbar{
      position: sticky; top:0; z-index:50;
      background: rgba(11,16,32,.68);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .topbar .inner{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap: 14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight: 800;
      letter-spacing: .3px;
    }
    .logo{
      width: 36px; height: 36px; border-radius: 12px;
      background: linear-gradient(135deg, rgba(255,209,102,.95), rgba(123,223,242,.95));
      box-shadow: 0 12px 30px rgba(0,0,0,.25);
    }
    nav{
      display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end;
    }
    .pill{
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      font-weight: 650;
      color: var(--muted);
    }
    .pill:hover{ background: rgba(255,255,255,.07); color: var(--text); }

    /* Hero */
    header.hero{
      padding: 46px 0 24px;
    }
    .heroCard{
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px;
      position: relative;
      overflow:hidden;
      max-width: 920px;
      margin: 0 auto;
    }
    .heroCard:before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(500px 200px at 30% 10%, rgba(255,209,102,.20), transparent 55%),
                  radial-gradient(520px 220px at 80% 20%, rgba(123,223,242,.18), transparent 55%);
      pointer-events:none;
    }
    .heroCard > *{ position: relative; }

    h1{
      margin: 0 0 8px;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.1;
      letter-spacing: -.4px;
    }
    .subtitle{
      margin:0 0 16px;
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.5;
      max-width: 62ch;
    }
    .metaLine{
      display:flex; gap: 10px; flex-wrap:wrap;
      align-items:center;
      color: var(--muted);
      font-size: 13px;
    }
    .tag{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.03);
    }
    .dot{
      width: 8px; height: 8px; border-radius: 999px;
      background: var(--accent2);
      box-shadow: 0 0 0 3px rgba(123,223,242,.16);
    }

    /* Countdown */
    .countBox{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 18px;
    }
    @media (max-width: 520px){
      .countBox{ grid-template-columns: repeat(2, 1fr); }
    }
    .unit{
      border: 1px solid var(--border);
      border-radius: 16px;
      background: rgba(255,255,255,.04);
      padding: 14px 12px;
      text-align:center;
    }
    .num{
      font-size: clamp(26px, 4vw, 40px);
      font-weight: 900;
      letter-spacing: .5px;
    }
    .lbl{
      margin-top: 3px;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .2px;
      text-transform: uppercase;
    }
    .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top: 14px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.05);
      color: var(--text);
      font-weight: 750;
      cursor:pointer;
      user-select:none;
    }
    .btn:hover{ background: rgba(255,255,255,.08); }
    .btn.primary{
      border-color: rgba(255,209,102,.40);
      background: rgba(255,209,102,.12);
    }
    .btn.primary:hover{ background: rgba(255,209,102,.16); }
    .btn.ok{
      border-color: rgba(124,255,107,.35);
      background: rgba(124,255,107,.10);
    }
    .notice{
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
    }
    .bigMessage{
      margin-top: 12px;
      display:none;
      border: 1px solid rgba(124,255,107,.28);
      background: rgba(124,255,107,.10);
      border-radius: 14px;
      padding: 12px 12px;
      font-weight: 800;
      color: rgba(255,255,255,.95);
    }

    /* Cabalas section */
    section{ padding: 22px 0 56px; }
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap: 12px; flex-wrap:wrap;
      margin: 8px 0 14px;
    }
    .sectionHead h2{
      margin:0;
      font-size: 22px;
      letter-spacing: -.2px;
    }
    .sectionHead .hint{
      color: var(--muted);
      font-size: 13px;
    }
    .controls{
      display:flex; gap:10px; flex-wrap:wrap;
      margin: 10px 0 16px;
      align-items:center;
    }
    .search{
      flex: 1 1 260px;
      display:flex; align-items:center; gap:8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.04);
    }
    .search input{
      width:100%;
      border:0; outline:0;
      background: transparent;
      color: var(--text);
      font-size: 14px;
    }
    .filters{ display:flex; gap:8px; flex-wrap:wrap; }
    .chip{
      padding: 8px 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      border-radius: 999px;
      color: var(--muted);
      font-weight: 700;
      font-size: 13px;
      cursor:pointer;
      user-select:none;
    }
    .chip.active{
      color: var(--text);
      border-color: rgba(255,209,102,.40);
      background: rgba(255,209,102,.10);
    }
    .grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    @media (max-width: 980px){ .grid{ grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 620px){ .grid{ grid-template-columns: 1fr; } }
    .card{
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(255,255,255,.04);
      padding: 14px 14px;
      min-height: 140px;
      transition: transform .12s ease, background .12s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.06);
    }
    .cardTop{
      display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
      margin-bottom: 8px;
    }
    .emoji{ font-size: 22px; }
    .title{
      font-weight: 900;
      margin:0;
      letter-spacing: -.2px;
    }
    .cat{
      font-size: 12px;
      color: var(--muted);
      padding: 6px 9px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.03);
      white-space: nowrap;
    }
    .desc{
      margin:0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }
    .footer{
      padding: 18px 0 30px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
    }

    /* Fireworks canvas */
    #fxCanvas{
      position: fixed;
      inset: 0;
      pointer-events:none;
      z-index: 100;
      display:none;
    }


/* Mensaje central encima de los fuegos */
#newYearOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 120;            /* más que el canvas (100) */
  pointer-events: none;    /* no bloquea clics */
}

#newYearOverlay.show{
  display: flex;
  animation: overlayFade .35s ease-out;
}

#newYearOverlay .overlayInner{
  text-align: center;
  padding: 22px 26px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(11,16,32,.55);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

.overlayTitle{
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -.6px;
}

.overlayYear{
  margin-top: 6px;
  font-size: clamp(44px, 8vw, 88px);
  font-weight: 950;
  text-shadow: 0 10px 40px rgba(0,0,0,.35);
}

@keyframes overlayFade{
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}