/* ==========================================================
   AMISTOSOS (DÓNDE Y CÓMO JUGAR) - Green Premium (no Copa Fácil)
   Objetivo:
   - Mantener fondo negro
   - Introducir verde distinto al de Copa Fácil (#22C55E)
   - Look premium: degradé vertical + halos repartidos + toque diagonal
   ========================================================== */

:root{
  /* Verde distinto a Copa Fácil (#22C55E): más menta premium */
  --amistosos-green: #2EE59D;
  --amistosos-green-deep: #11BFA0;
  --amistosos-ink: #07110B;

  /* Negro verdoso (base) */
  --amistosos-bg-0: #050A07;
  --amistosos-bg-1: #070F0B;
  --amistosos-bg-2: #040806;

  /* Contornos por categoría (según tu instrucción) */
  --contorno-competidor: #D4AF37; /* amarillo/dorado como está */
  --contorno-senior: #F59E0B;     /* naranjo */
  --contorno-refuerzos: #EF4444;  /* rojo */
}

#sedes.sedes-section{
  background: var(--amistosos-bg-0) !important;
  position: relative;
  overflow: hidden;
}

#sedes.sedes-section::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* base vertical NEGRO VERDOSO (no calipso) */
    linear-gradient(180deg, var(--amistosos-bg-0) 0%, var(--amistosos-bg-1) 45%, var(--amistosos-bg-2) 100%),

    /* brillo general medio/bajo (para que no se concentre arriba) */
    radial-gradient(1400px 900px at 50% 70%, rgba(46,229,157,0.12) 0%, rgba(0,0,0,0) 74%),

    /* halo superior acotado */
    radial-gradient(1100px 620px at 50% -18%, rgba(46,229,157,0.14) 0%, rgba(0,0,0,0) 72%),

    /* toque diagonal premium */
    linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(46,229,157,0.07) 50%, rgba(0,0,0,0) 100%),

    /* viñeta inferior */
    radial-gradient(1400px 700px at 50% 120%, rgba(0,0,0,0.92), rgba(0,0,0,1));
  opacity: 1;
}

#sedes.sedes-section > *{
  position: relative;
  z-index: 1;
}

/* Tag de la sección: verde (no dorado) */
#sedes.sedes-section .section-tag{
  background: rgba(46,229,157,0.10) !important;
  color: #CFFFEF !important;
  border-color: rgba(46,229,157,0.30) !important;
}

/* Texto “Amistosos DIARIOS” y línea descriptiva: verde */
#sedes.sedes-section h3[style*="AMISTOSOS DIARIOS"],
#sedes.sedes-section h3 i.fas.fa-users{
  color: var(--amistosos-green) !important;
}

#sedes.sedes-section .section-description{
  color: rgba(214,255,240,0.72) !important;
}

/* “ACTIVA” chip (en tarjetas de sedes) */
#sedes.sedes-section [style*="✓ ACTIVA"]{
  background: var(--amistosos-green) !important;
  color: #042016 !important;
}

/* Botones WhatsApp: borde/tono verde (sin tocar el layout) */
#sedes.sedes-section a[href*="wa.me"]{
  border-color: rgba(46,229,157,0.65) !important;
  color: #D7FFF2 !important;
  background: linear-gradient(135deg, rgba(46,229,157,0.12), rgba(46,229,157,0.03)) !important;
}

/* ===== GRUPOS: contornos por color (estable por CLASES) ===== */

/* Base para cards de grupos */
#sedes.sedes-section .grupo-card{
  border-radius: 12px;
}

/* TODO COMPETIDOR */
#sedes.sedes-section .grupo-card.grupo-tc{
  border-color: var(--contorno-competidor) !important;
  background: linear-gradient(145deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04)) !important;
}

#sedes.sedes-section .grupo-card.grupo-tc > div{
  background: linear-gradient(135deg, #D4AF37, #FFD700) !important;
  color: #0A0A0A !important;
}

#sedes.sedes-section .grupo-card.grupo-tc a[href*="chat.whatsapp.com"]{
  background: linear-gradient(135deg, #FFD700, #D4AF37) !important;
  color: #0A0A0A !important;
  box-shadow: 0 10px 26px rgba(212,175,55,0.22) !important;
}

/* RECREATIVO / SENIOR */
#sedes.sedes-section .grupo-card.grupo-recreativo{
  border-color: var(--contorno-senior) !important;
  background: linear-gradient(145deg, rgba(245,158,11,0.12), rgba(245,158,11,0.04)) !important;
}

#sedes.sedes-section .grupo-card.grupo-recreativo > div[style*="RECREATIVO"]{
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #0A0A0A !important;
}

#sedes.sedes-section .grupo-card.grupo-recreativo a[href*="chat.whatsapp.com"]{
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
  color: #0A0A0A !important;
  box-shadow: 0 10px 26px rgba(245,158,11,0.20) !important;
}

/* MERCADO DE REFUERZOS */
#sedes.sedes-section .grupo-card.grupo-mercado{
  border-color: var(--contorno-refuerzos) !important;
  background: linear-gradient(145deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)) !important;
}

#sedes.sedes-section .grupo-card.grupo-mercado > div[style*="MERCADO"]{
  background: linear-gradient(135deg, #EF4444, #B91C1C) !important;
  color: #FFF !important;
}

#sedes.sedes-section .grupo-card.grupo-mercado a[href*="chat.whatsapp.com"]{
  background: linear-gradient(135deg, #EF4444, #B91C1C) !important;
  color: #FFF !important;
  box-shadow: 0 10px 26px rgba(239,68,68,0.24) !important;
}

/* Todo Competidor (ya está dorado, lo reforzamos por si cambia) */
#sedes.sedes-section h4:is(:contains("Todo Competidor")){ /* fallback (no soportado) */ }
#sedes.sedes-section h4[style*="Todo Competidor"]{ /* no aplica, está en texto */ }
#sedes.sedes-section div[style*="Todo Competidor"]{ /* no aplica */ }

/* Selección robusta por presencia de títulos en el mismo card */
#sedes.sedes-section div[style*="border: 2px solid"]:has(h4:where(:not(*))){}

/* (DEPRECADO) Reglas antiguas basadas en style="...": eliminadas.
   Ahora usamos CLASES (.grupo-tc / .grupo-recreativo / .grupo-mercado)
   para evitar que vuelva a plomo/azul si cambia el inline style. */

#sedes.sedes-section a[href*="wa.me"]:hover{
  filter: brightness(1.06);
}