@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&display=swap');

:root {
  --radius: 18px;
  --font-display: 'Baloo 2', sans-serif;
}

.banners-wrap{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));
    gap:24px;

    width:100%;
    max-width:1400px;
    margin:auto; 
}
/* ---------- BASE BANNER ---------- */

.cta-banner {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 28px 28px;
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.25);
}

.cta-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-sizing: border-box;
    max-width: 100%;    /* Evita que se desborde si el texto es más ancho que la tarjeta */
}


.cta-content {
  position: relative;
  z-index: 2;  
}

.cta-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17.5px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
  background: #cfaeae2e;
}

.cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 18px;
  margin: 0;
  flex: 1;
}

.cta-button {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  padding: 13px 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.cta-banner:hover .cta-button {
  background: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

/* ---------- PARTICLES (shared) ---------- */

.particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.particle {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #ffffff;
  opacity: var(--o);
  animation: drift var(--d) ease-in-out infinite;
  animation-delay: var(--del);
}

@keyframes drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: var(--o);
  }
  50% {
    transform: translate(4px, -10px) scale(1.15);
    opacity: calc(var(--o) * 1.5);
  }
}

/* ---------- BANNER 1: REFER (blue/violet) ---------- */

.cta-banner--refer {
  background: linear-gradient(135deg, #5E72D8 0%, #6E80E4 55%,  #9baef9 100%);
}

/* ---------- BANNER 2: DIWALI (purple/magenta) ---------- */

.cta-banner--diwali {
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(115deg, #3B1B52 0%, #5C2370 32%, #9A2E8F 62%, #E8569E 100%);
}

.cta-banner--diwali .cta-title {
  color: #FFE9B8;
}

.particle--glow {
  background: radial-gradient(circle, rgba(255, 110, 180, 0.9) 0%, rgba(255, 110, 180, 0) 70%);
  filter: blur(6px);
  animation: glow-pulse var(--d) ease-in-out infinite;
  animation-delay: var(--del);
}

@keyframes glow-pulse {
  0%, 100% { opacity: var(--o); transform: scale(1); }
  50%      { opacity: calc(var(--o) * 1.3); transform: scale(1.08); }
}

.particle--dot {
  background: #FFD9EC;
}

/* ---------- BANNER 3: CANDY (pink/orange) ---------- */

.cta-banner--candy {
  background: linear-gradient(105deg, #FF6FAE 0%, #FF8C72 55%, #FFC15C 100%);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 480px) {
  body {
    padding-top: 16px;
  }

  .cta-banner {
    padding: 22px 20px;
  }

  .cta-content {
    max-width: 100%;
  }

  .cta-eyebrow {
    font-size: 17.5px;
    background: #cfaeae2e;
  }

  .cta-title {
    font-size: 25px;
    margin-bottom: 14px;
  }

  .cta-button {
    font-size: 13px;
    padding: 11px 20px;
  }
}

@media (max-width: 360px) {
  .cta-content {
    max-width: 100%;
  }

  .cta-title {
    font-size: 25px;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .particle {
    animation: none;
  }
}


/* ---------- SPARKLE PARTICLE (estrella de 4 puntas) ---------- */

.particle--sparkle {
  background: #ffffff;
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
  animation: twinkle var(--d) ease-in-out infinite;
  animation-delay: var(--del);
}

@keyframes twinkle {
  0%, 100% { opacity: calc(var(--o) * 0.5); transform: scale(0.7) rotate(0deg); }
  50%      { opacity: var(--o); transform: scale(1.15) rotate(12deg); }
}

/* ---------- BANNER 4: FESTIVAL CONTEST (violeta a rosa) ---------- */

.cta-banner--festival {
  background: linear-gradient(120deg, #7C6FE8 0%, #A767D9 50%, #E867A8 100%);
}

/* ---------- BANNER 5: PRACTICE LEAGUES (teal oscuro a arena) ---------- */

.cta-banner--practice {
  background: linear-gradient(100deg, #2F4A52 0%, #5C6B5C 45%, #C7B481 100%);
}

/* ---------- BANNER 6: JOIN WITH FRIENDS (verde a cian) ---------- */

.cta-banner--join {
  background: linear-gradient(110deg, #2E9B63 0%, #1F8E92 55%, #1B7FA8 100%);
}

/* ---------- BANNER 7: VOTE FOR YOUR GAME (coral a rosa) ---------- */

.cta-banner--vote {
  background: linear-gradient(105deg, #F0915A 0%, #E76E8B 55%, #DE5A9E 100%);
}

/* ---------- BANNER 8: VOTE FOR YOUR GAME (frambuensa) ---------- */
.cta-banner--raspberry { 
  background: linear-gradient(105deg, #E61B56 0%, #FF4D6D 55%, #FF85A2 100%); 
}


@media(max-width:768px){

    .banners-wrap{
        grid-template-columns:1fr;
        gap:16px;
    }

}

@media(min-width:769px) and (max-width:1200px){
    .banners-wrap{
        grid-template-columns:repeat(2,1fr);
    }

}   

.resultados-bar{
    margin:30px auto;
    padding:20px;
    background:#fff;
    border-radius:18px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.resultados-bar-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}

#titulo-resultados{
    margin:0;
    font-size:1.7rem;
    font-weight:800;
    color:#0f172a;
}

#btn-reset-resultados{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:#ef4444;
    color:#fff;
    font-size:22px;
    transition:.25s;
}

#btn-reset-resultados:hover{
    transform:rotate(90deg);
    background:#dc2626;
}

.resultados-filtro-label{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:13px;
    font-weight:700;

    color:#475569;

    margin-bottom:12px;

    text-transform:uppercase;
    letter-spacing:.8px;
}
/*BADGES MODERNOS*/

.blz-badges-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.blz-badge{
    border:none;
    border-radius:999px;
    padding:10px 18px;
    background:#eef2ff;
    color:#1e40af;
    font-weight:600;
    transition:.2s;
    cursor:pointer;
}

.blz-badge:hover{
    background:#2563eb;
    color:white;
    transform:translateY(-2px);
}

@media (max-width:768px){
    .resultados-header{
        flex-direction:column;
        align-items:flex-start;
    }

    #btn-reset-resultados{
        width:auto;
        height:auto;
        border-radius:999px;
        padding:10px 16px;
        font-size:14px;
    }

    #titulo-resultados{
        font-size:1.2rem;
    }

}

/*compactar banner, titulo, btn, descripcion y particulas*/

.banners-wrap.modo-compacto{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}

.banners-wrap.modo-compacto .cta-banner {
  height:72px;
  min-height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
}

.banners-wrap.modo-compacto .cta-title{
  display:none;
}

.banners-wrap.modo-compacto .cta-button{
  display:none;
}

.banners-wrap.modo-compacto .cta-title{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:white;
}

.banners-wrap.modo-compacto .particles{
  opacity:.25;
}