:root{
  --navy:#061a33;
  --blue:#0066ff;
  --gold:#d4af37;
  --dark:#020813;
  --white:#ffffff;
  --muted:#aeb8c8;
  --glass:rgba(255,255,255,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Montserrat,Arial,sans-serif;background:#f4f6f9;color:#101828;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:20;
  display:grid;
  grid-template-columns:120px 1fr 120px;
  align-items:center;
  gap:28px;
  padding:16px 6%;
  background:rgba(3,12,28,.72);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.brand{
  justify-self:start;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:76px;
  height:76px;
}
.header-team-logo{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:76px;
  height:76px;
}
.brand img,
.header-team-logo img{
  width:72px;
  height:72px;
  object-fit:contain;
  display:block;
}
.nav{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,2.4vw,34px);
  font-weight:700;
  font-size:14px;
}
.nav a{opacity:.9}.nav a:hover{color:var(--gold)}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),#f7dc73);color:#071a31;font-weight:900;border-radius:999px;padding:15px 24px;border:0;box-shadow:0 12px 30px rgba(212,175,55,.25);cursor:pointer}.btn-small{padding:11px 18px}.btn-outline{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:none}

.hero{
    min-height:100vh;
    position:relative;
    display:grid;
    align-items:center;
    padding:130px 6% 60px;

    background:
    linear-gradient(
        120deg,
        rgba(2,8,19,.82),
        rgba(6,26,51,.55)
    ),
    url('../img/cancha-emporio-noche.png');

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.hero-content{position:relative;z-index:2;max-width:820px;color:#fff}.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:2px;font-weight:900;font-size:13px;margin-bottom:14px}.hero h1{font-size:clamp(44px,7vw,92px);line-height:.94;text-transform:uppercase;font-weight:900;letter-spacing:-3px}.hero-text{font-size:21px;max-width:650px;margin:24px 0;color:#d8e1ef}.hero-actions{display:flex;gap:16px;flex-wrap:wrap}.stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;max-width:900px}.stats div{background:var(--glass);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(14px);border-radius:24px;padding:24px;color:#fff}.stats strong{font-size:38px;color:var(--gold);display:block}.stats span{text-transform:uppercase;font-size:12px;letter-spacing:1px}.section{padding:90px 6%}.dark{background:linear-gradient(180deg,#020813,#061a33);color:#fff}.section-title{text-align:center;max-width:760px;margin:0 auto 46px}.section-title h2,.split h2,.contact h2{font-size:clamp(32px,4vw,56px);line-height:1;font-weight:900;text-transform:uppercase}.section-title p,.split p,.contact p{color:#667085;margin-top:14px;line-height:1.7}.dark .section-title p,.dark p{color:#c3cedd}.cards{display:grid;gap:24px}.three{grid-template-columns:repeat(3,1fr)}.card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:28px;min-height:245px;display:flex;flex-direction:column;gap:16px;transition:.35s}.card:hover{transform:translateY(-8px);border-color:var(--gold)}.card h3{font-size:25px}.card a{color:var(--gold);font-weight:900;margin-top:auto}.tag{width:max-content;padding:8px 12px;border-radius:999px;background:rgba(212,175,55,.18);color:var(--gold);font-weight:900}.price{font-size:22px;color:var(--gold)}.split{display:grid;grid-template-columns:1fr 430px;gap:50px;align-items:center;background:#fff}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.features span{background:#eef4ff;border-radius:999px;padding:12px 16px;font-weight:800;color:var(--navy)}.booking-card{background:linear-gradient(160deg,var(--navy),#0d3970);color:#fff;border-radius:34px;padding:32px;box-shadow:0 26px 80px rgba(6,26,51,.25)}.booking-card h3{font-size:30px;margin-bottom:18px}.booking-card form{display:grid;gap:14px}.booking-card input,.booking-card select{width:100%;padding:15px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff}.booking-card input::placeholder{color:#d9e2ee}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.gallery-item{
  position:relative;
  height:180px;
  border-radius:28px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,#16396f,#27323b);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}

.gallery-item::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );
  transform:skewX(-18deg);
  transition:left .7s ease;
  pointer-events:none;
}

.gallery-item:hover{
  transform:translateY(-10px) scale(1.02);
  border-color:var(--gold);
  background:linear-gradient(135deg,#1b477f,#3a3c32);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    0 0 25px rgba(212,175,55,.25);
}

.gallery-item:hover::before{
  left:140%;
}

.gallery-item:active{
  transform:translateY(-4px) scale(.995);
}

.gallery-item:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:4px;
}.academy{background:linear-gradient(90deg,#fff 50%,#eef4ff)}.programs{display:grid;gap:18px}.programs div{background:#fff;border-left:7px solid var(--gold);border-radius:22px;padding:26px;box-shadow:0 20px 50px rgba(16,24,40,.08)}.programs strong{display:block;font-size:24px;color:var(--navy)}.programs span{color:#667085}.match-table{max-width:980px;margin:auto;display:grid;gap:14px}.match-table div{display:grid;grid-template-columns:180px 1fr 120px;gap:20px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:22px}.match-table span{color:var(--gold);font-weight:900}.match-table em{font-style:normal;color:#c3cedd;text-align:right}.stats-zone{background:#f4f6f9}.light{background:#fff;color:#101828;border:1px solid #e4e7ec;box-shadow:0 18px 45px rgba(16,24,40,.06)}.light ol{padding-left:20px;line-height:2}.contact{min-height:480px;background:linear-gradient(120deg,rgba(2,8,19,.92),rgba(6,26,51,.78)),url('https://images.unsplash.com/photo-1459865264687-595d652de67e?auto=format&fit=crop&w=1800&q=80') center/cover;display:grid;place-items:center;color:#fff}.contact-box{text-align:center;max-width:760px}.contact-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:25px}.whatsapp{position:fixed;right:22px;bottom:22px;z-index:30;background:#25d366;color:#fff;padding:14px 18px;border-radius:999px;font-weight:900;box-shadow:0 16px 40px rgba(0,0,0,.25)}footer{padding:36px 6%;text-align:center;background:#020813;color:#fff}footer p{color:#aeb8c8;margin-top:8px}.reveal{opacity:0;transform:translateY(26px);transition:1s}.reveal.active{opacity:1;transform:translateY(0)}
@media(max-width:900px){
  .header{
    grid-template-columns:80px 1fr 80px;
    padding:12px 18px;
    gap:12px;
  }
  .brand,
  .header-team-logo{
    width:62px;
    height:62px;
  }
  .brand img,
  .header-team-logo img{
    width:58px;
    height:58px;
  }
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    justify-self:center;
  }
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    gap:0;
    padding:12px 20px 18px;
    background:rgba(13,28,48,.98);
    border-top:1px solid rgba(255,255,255,.08);
    border-radius:0 0 20px 20px;
  }
  .nav.active,
  .nav.show{
    display:flex;
  }
  .nav a{
    width:100%;
    padding:14px 0;
    text-align:center;
  }
  .header .btn-small{display:none}
  .stats,.three,.gallery,.split{grid-template-columns:1fr}
  .hero h1{letter-spacing:-1px}
  .match-table div{grid-template-columns:1fr}
  .match-table em{text-align:left}
  .section{padding:70px 6%}
  .hero{padding-top:120px}
}

/* ==========================================================================
   CARRUSEL TIPO NETFLIX - PRÓXIMOS TORNEOS
   ========================================================================== */

.torneos-carousel{
  position:relative;
  width:100%;
  overflow:visible;
  padding:0 34px;
}

.torneos-viewport{
  width:100%;
  overflow:hidden;
}

.torneos-track{
  display:flex;
  gap:24px;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.torneos-track .card{
  flex:0 0 calc((100% - 48px) / 3);
  min-width:0;
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(6,26,51,.94);
  color:var(--gold);
  font-size:28px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  z-index:10;
  box-shadow:0 14px 34px rgba(0,0,0,.30);
  transition:background .25s ease,color .25s ease,transform .25s ease;
}

.carousel-btn:hover{
  background:var(--gold);
  color:var(--navy);
  transform:translateY(-50%) scale(1.06);
}

.carousel-prev{
  left:0;
}

.carousel-next{
  right:0;
}

.carousel-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
}

@media(max-width:900px){
  .torneos-track{
    gap:16px;
  }

  .torneos-track .card{
    flex:0 0 100%;
  }

  .carousel-prev{
    left:0;
  }

  .carousel-next{
    right:0;
  }
}

/* ==========================================================================
   FORMULARIO DE RESERVACIÓN
   ========================================================================== */

.booking-card select{
  color:#fff;
}

.booking-card select option{
  color:#101828;
  background:#fff;
}

.booking-card select option:checked{
  color:#fff;
  background:#0d3970;
}

.reserva-mensaje[hidden]{
  display:none;
}

.reserva-mensaje{
  display:grid;
  gap:6px;
  margin-bottom:16px;
  padding:14px 16px;
  border-radius:14px;
  font-size:14px;
  line-height:1.45;
}

.reserva-mensaje strong{
  font-size:15px;
}

.reserva-mensaje span{
  display:block;
}

.reserva-mensaje-ok{
  background:rgba(37,211,102,.16);
  border:1px solid rgba(37,211,102,.55);
  color:#eafff2;
}

.reserva-mensaje-error{
  background:rgba(239,68,68,.15);
  border:1px solid rgba(248,113,113,.55);
  color:#fff0f0;
}

#btnSolicitarReserva:disabled{
  opacity:.65;
  cursor:wait;
}

/* ==========================================================================\n   GALERÍA DE INSTALACIONES - BOTONES Y MODAL\n   ========================================================================== */

.gallery-item{
  appearance:none;
  font-family:inherit;
  color:#fff;
  text-align:center;
}
.gallery-item span{position:relative;z-index:2;display:block}
.galeria-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px}
.galeria-modal.abierta{display:flex}
.galeria-modal-backdrop{position:absolute;inset:0;background:rgba(2,8,19,.88);backdrop-filter:blur(8px)}
.galeria-modal-contenido{position:relative;z-index:2;width:min(1100px,96vw);max-height:92vh;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:28px;background:linear-gradient(180deg,#061a33,#020813);color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.galeria-modal-cerrar{position:absolute;top:14px;right:16px;z-index:5;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:28px;cursor:pointer}
.galeria-modal-cerrar:hover{background:var(--gold);color:var(--navy)}
.galeria-modal-encabezado{padding:28px 72px 18px 28px}
.galeria-modal-encabezado h3{font-size:clamp(26px,3vw,42px)}
.galeria-modal-cuerpo{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:12px;padding:0 20px}
.galeria-modal-imagen-wrap{position:relative;min-height:520px;display:grid;place-items:center;overflow:hidden;border-radius:20px;background:#01050c}
.galeria-modal-imagen-wrap img{width:100%;height:520px;object-fit:contain;display:block}
.galeria-modal-sin-fotos{padding:40px;color:#c3cedd;text-align:center}
.galeria-modal-flecha{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:var(--gold);font-size:32px;cursor:pointer}
.galeria-modal-flecha:hover{background:var(--gold);color:var(--navy)}
.galeria-modal-flecha:disabled{opacity:.25;cursor:not-allowed}
.galeria-modal-pie{display:flex;justify-content:space-between;gap:20px;padding:18px 28px 24px;color:#c3cedd}
body.modal-abierto{overflow:hidden}
@media(max-width:700px){.galeria-modal{padding:12px}.galeria-modal-cuerpo{grid-template-columns:42px 1fr 42px;gap:6px;padding:0 10px}.galeria-modal-imagen-wrap,.galeria-modal-imagen-wrap img{min-height:360px;height:360px}.galeria-modal-flecha{width:38px;height:38px;font-size:26px}.galeria-modal-pie{flex-direction:column;gap:6px}}

/* ==========================================================================
   MOMENTOS DE LA SEMANA - FECHA DESPLEGABLE Y VISOR
   ========================================================================== */

.galeria-semanal{
  position:relative;
  overflow:hidden;
}

.galeria-semanal .section-title{
  margin-bottom:24px;
}

.galeria-semanal-contenido{
  width:min(1080px,100%);
  margin:0 auto;
}

.galeria-selector-fecha{
  position:relative;
  z-index:8;
  width:min(430px,100%);
  margin:0 auto 24px;
}

.galeria-fecha-boton{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:30px 1fr 24px;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:800;
  text-align:left;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.galeria-fecha-boton:hover,
.galeria-fecha-boton[aria-expanded="true"]{
  border-color:var(--gold);
  background:rgba(212,175,55,.10);
  box-shadow:0 14px 34px rgba(0,0,0,.25);
}

.galeria-fecha-boton:focus-visible{
  outline:3px solid rgba(212,175,55,.38);
  outline-offset:3px;
}

.galeria-fecha-icono{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gold);
  color:var(--navy);
  font-size:14px;
}

.galeria-fecha-chevron{
  color:var(--gold);
  font-size:18px;
  text-align:center;
  transition:transform .25s ease;
}

.galeria-fecha-boton[aria-expanded="true"] .galeria-fecha-chevron{
  transform:rotate(180deg);
}

.galeria-calendario-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  width:min(390px,calc(100vw - 32px));
  padding:17px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:#101e32;
  box-shadow:0 24px 70px rgba(0,0,0,.48);
  transform:translateX(-50%);
}

.galeria-calendario-panel[hidden]{
  display:none;
}

.galeria-calendario-encabezado{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.galeria-calendario-encabezado strong{
  color:#fff;
  font-size:16px;
  text-align:center;
  text-transform:capitalize;
}

.galeria-calendario-mes-btn{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-family:inherit;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}

.galeria-calendario-mes-btn:hover{
  border-color:var(--gold);
  background:var(--gold);
  color:var(--navy);
}

.galeria-calendario-semana,
.galeria-calendario-dias{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
}

.galeria-calendario-semana{
  margin-bottom:7px;
}

.galeria-calendario-semana span{
  color:#8fa0b7;
  font-size:10px;
  font-weight:800;
  text-align:center;
  text-transform:uppercase;
}

.galeria-calendario-dia{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#65758c;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
}

button.galeria-calendario-dia{
  color:#fff;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

button.galeria-calendario-dia:hover{
  background:rgba(212,175,55,.20);
  color:var(--gold);
  transform:scale(1.07);
}

button.galeria-calendario-dia.tiene-fotos{
  border:1px solid rgba(212,175,55,.58);
  color:var(--gold);
}

button.galeria-calendario-dia.seleccionado{
  background:var(--gold);
  color:var(--navy);
  box-shadow:0 7px 18px rgba(212,175,55,.25);
}

.galeria-calendario-dia.otro-mes{
  opacity:0;
  pointer-events:none;
}

.galeria-semanal-carrusel{
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 62px;
  align-items:center;
  gap:16px;
  outline:none;
}

.galeria-semanal-figura{
  min-width:0;
  margin:0;
}

.galeria-semanal-imagen-wrap{
  position:relative;
  height:600px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  background:#01050c;
  box-shadow:0 25px 65px rgba(0,0,0,.40);
  touch-action:pan-y;
}

.galeria-semanal-imagen-wrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#01050c;
  opacity:1;
  transition:opacity .25s ease;
}

.galeria-semanal-imagen-wrap img.cambiando{
  opacity:0;
}

.galeria-semanal-cargando{
  position:absolute;
  z-index:2;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(2,8,19,.80);
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.galeria-semanal-vacia{
  padding:36px;
  color:#c3cedd;
  text-align:center;
}

.galeria-semanal-pie{
  min-height:42px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding:12px 6px 0;
  color:#c3cedd;
  font-size:13px;
}

.galeria-semanal-pie span{
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:800;
}

.galeria-semanal-flecha{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-family:inherit;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}

.galeria-semanal-flecha:hover:not(:disabled){
  background:var(--gold);
  color:var(--navy);
  transform:scale(1.07);
}

.galeria-semanal-flecha:disabled{
  opacity:.24;
  cursor:not-allowed;
  transform:none;
}

.galeria-semanal-aviso{
  width:min(720px,100%);
  margin:0 auto;
  padding:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:rgba(255,255,255,.06);
  color:#c3cedd;
  text-align:center;
}

@media(max-width:800px){
  .galeria-selector-fecha{
    margin-bottom:18px;
  }

  .galeria-semanal-carrusel{
    position:relative;
    display:block;
  }

  .galeria-semanal-flecha{
    position:absolute;
    top:50%;
    z-index:4;
    width:42px;
    height:42px;
    font-size:30px;
    background:rgba(2,8,19,.70);
    transform:translateY(-50%);
  }

  .galeria-semanal-flecha:hover:not(:disabled){
    transform:translateY(-50%) scale(1.05);
  }

  #galeriaSemanaAnterior{
    left:10px;
  }

  #galeriaSemanaSiguiente{
    right:10px;
  }

  .galeria-semanal-imagen-wrap{
    height:440px;
  }
}

@media(max-width:520px){
  .galeria-fecha-boton{
    min-height:44px;
    grid-template-columns:28px 1fr 22px;
    padding:8px 12px;
    font-size:12px;
  }

  .galeria-fecha-icono{
    width:26px;
    height:26px;
  }

  .galeria-calendario-panel{
    position:fixed;
    top:auto;
    right:12px;
    bottom:16px;
    left:12px;
    width:auto;
    max-height:calc(100vh - 32px);
    overflow:auto;
    padding:16px;
    border-radius:22px;
    transform:none;
  }

  .galeria-calendario-semana,
  .galeria-calendario-dias{
    gap:5px;
  }

  .galeria-semanal-flecha{
    width:36px;
    height:36px;
    font-size:26px;
  }

  #galeriaSemanaAnterior{
    left:8px;
  }

  #galeriaSemanaSiguiente{
    right:8px;
  }

  .galeria-semanal-imagen-wrap{
    height:320px;
    border-radius:16px;
  }

  .galeria-semanal-pie{
    min-height:38px;
    padding-top:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .galeria-fecha-chevron,
  .galeria-semanal-imagen-wrap img,
  .galeria-semanal-flecha{
    transition:none;
  }
}

/* ==========================================================================
   FASE 1 - ESTADÍSTICAS PÚBLICAS CONECTADAS A SCORE
   ========================================================================== */

.estadisticas-selector{
  width:min(620px,100%);
  margin:0 auto 22px;
  padding:22px;
  border:1px solid #dfe4ec;
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 45px rgba(16,24,40,.07);
}

.estadisticas-selector label{
  display:block;
  margin-bottom:10px;
  color:var(--navy);
  font-size:13px;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.estadisticas-selector-fila{
  display:flex;
  align-items:center;
  gap:12px;
}

.estadisticas-selector select{
  width:100%;
  min-height:48px;
  padding:0 16px;
  border:1px solid #ccd5e2;
  border-radius:14px;
  background:#fff;
  color:#101828;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}

.estadisticas-selector select:focus{
  border-color:var(--gold);
  outline:3px solid rgba(212,175,55,.16);
}

.estadisticas-torneo-actual{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  color:#667085;
  font-size:14px;
}

.estadisticas-torneo-actual strong{
  color:var(--navy);
}

.estadisticas-resumen{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  margin-bottom:26px;
}

.estadisticas-resumen article{
  min-width:0;
  padding:18px 14px;
  border:1px solid #dfe4ec;
  border-radius:20px;
  background:#fff;
  text-align:center;
  box-shadow:0 14px 34px rgba(16,24,40,.055);
}

.estadisticas-resumen span{
  display:block;
  min-height:32px;
  color:#667085;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.estadisticas-resumen strong{
  display:block;
  margin-top:7px;
  color:var(--navy);
  font-size:28px;
}

.estadisticas-bloque{
  padding:26px;
  border:1px solid #dfe4ec;
  border-radius:26px;
  background:#fff;
  box-shadow:0 18px 45px rgba(16,24,40,.065);
}

.estadisticas-bloque-encabezado{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:20px;
}

.estadisticas-bloque-encabezado .eyebrow{
  margin-bottom:7px;
}

.estadisticas-bloque h3{
  color:var(--navy);
  font-size:26px;
}

.estadisticas-tabla-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid #e4e7ec;
  border-radius:18px;
}

.estadisticas-tabla{
  width:100%;
  min-width:800px;
  border-collapse:collapse;
}

.estadisticas-tabla th{
  padding:14px 11px;
  background:var(--navy);
  color:#fff;
  font-size:11px;
  text-align:center;
}

.estadisticas-tabla td{
  padding:13px 11px;
  border-bottom:1px solid #edf0f4;
  color:#344054;
  font-size:13px;
  text-align:center;
}

.estadisticas-tabla tbody tr:last-child td{
  border-bottom:0;
}

.estadisticas-tabla tbody tr:hover td{
  background:#f8fafc;
}

.estadisticas-tabla .estadisticas-equipo{
  color:var(--navy);
  font-weight:800;
  text-align:left;
}

.estadisticas-posicion{
  width:28px;
  height:28px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  background:#eef4ff;
  color:var(--navy);
  font-weight:900;
}

.estadisticas-tabla tbody tr:nth-child(-n+3) .estadisticas-posicion{
  background:var(--gold);
}

.estadisticas-dos-columnas{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:24px;
}

.estadisticas-ranking,
.estadisticas-disciplina{
  list-style:none;
  display:grid;
  gap:0;
}

.estadisticas-ranking li,
.estadisticas-disciplina li{
  display:grid;
  align-items:center;
  gap:14px;
  padding:14px 4px;
  border-bottom:1px solid #edf0f4;
}

.estadisticas-ranking li{
  grid-template-columns:1fr 48px;
}

.estadisticas-disciplina li{
  grid-template-columns:1fr 44px 44px;
}

.estadisticas-ranking li:last-child,
.estadisticas-disciplina li:last-child{
  border-bottom:0;
}

.estadisticas-ranking li div,
.estadisticas-disciplina li div{
  min-width:0;
}

.estadisticas-ranking strong,
.estadisticas-disciplina strong{
  display:block;
  overflow:hidden;
  color:var(--navy);
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.estadisticas-ranking span,
.estadisticas-disciplina span{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#667085;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.estadisticas-ranking b{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--gold);
  color:var(--navy);
  font-size:15px;
}

.estadisticas-disciplina-cabecera{
  display:grid;
  grid-template-columns:1fr 44px 44px;
  gap:14px;
  padding:0 4px 8px;
  color:#667085;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.estadisticas-disciplina-cabecera span:nth-child(n+2){
  text-align:center;
}

.tarjeta-amarilla,
.tarjeta-roja{
  width:31px;
  height:38px;
  display:grid;
  place-items:center;
  justify-self:center;
  border-radius:5px;
  color:#101828;
  font-size:13px;
}

.tarjeta-amarilla{
  background:#facc15;
}

.tarjeta-roja{
  background:#ef4444;
  color:#fff;
}

.estadisticas-sin-datos{
  padding:24px !important;
  color:#667085 !important;
  text-align:center !important;
}

.estadisticas-aviso{
  width:min(760px,100%);
  margin:0 auto;
  padding:24px;
  border:1px solid #dfe4ec;
  border-radius:20px;
  background:#fff;
  color:#667085;
  text-align:center;
  box-shadow:0 18px 45px rgba(16,24,40,.06);
}

@media(max-width:1050px){
  .estadisticas-resumen{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:800px){
  .estadisticas-dos-columnas{
    grid-template-columns:1fr;
  }

  .estadisticas-bloque{
    padding:20px;
  }
}

@media(max-width:560px){
  .estadisticas-resumen{
    grid-template-columns:repeat(2,1fr);
  }

  .estadisticas-selector{
    padding:17px;
  }

  .estadisticas-torneo-actual{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .estadisticas-bloque{
    padding:17px;
    border-radius:20px;
  }

  .estadisticas-bloque h3{
    font-size:22px;
  }
}

/* ==========================================================================
   FASE 2 - CALENDARIO DE TORNEOS CONECTADO A SCORE
   ========================================================================== */

.calendario-publico{
  background:
    radial-gradient(circle at 15% 10%,rgba(212,175,55,.10),transparent 30%),
    linear-gradient(145deg,#061a33,#020b16);
}

.calendario-filtros{
  width:min(900px,100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:0 auto 18px;
  padding:22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(255,255,255,.07);
}

.calendario-campo label{
  display:block;
  margin-bottom:9px;
  color:#d7dfeb;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.calendario-campo select{
  width:100%;
  min-height:50px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:#fff;
  color:#101828;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
}

.calendario-vistas{
  width:min(620px,100%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:0 auto 24px;
  padding:7px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(0,0,0,.18);
}

.calendario-vistas a{
  padding:12px 10px;
  border-radius:12px;
  color:#cbd5e1;
  font-size:13px;
  font-weight:900;
  text-align:center;
}

.calendario-vistas a:hover,
.calendario-vistas a.activo{
  background:var(--gold);
  color:var(--navy);
}

.calendario-listado{
  width:min(1080px,100%);
  display:grid;
  gap:24px;
  margin:0 auto;
}

.calendario-dia{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  background:#fff;
}

.calendario-dia-encabezado{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:17px 22px;
  background:var(--gold);
  color:var(--navy);
}

.calendario-dia-encabezado span{
  font-size:15px;
  font-weight:900;
}

.calendario-dia-encabezado b{
  font-size:11px;
  text-transform:uppercase;
}

.calendario-partido{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) 210px;
  align-items:center;
  gap:18px;
  padding:20px 22px;
  border-bottom:1px solid #e8edf3;
}

.calendario-partido:last-child{
  border-bottom:0;
}

.calendario-partido-meta{
  display:grid;
  gap:5px;
}

.calendario-partido-meta strong{
  color:var(--navy);
  font-size:22px;
}

.calendario-partido-meta span{
  color:#667085;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.calendario-enfrentamiento{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);
  align-items:center;
  gap:10px;
}

.calendario-equipo{
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--navy);
  font-size:14px;
  font-weight:900;
}

.calendario-equipo-local{
  justify-content:flex-end;
  text-align:right;
}

.calendario-equipo-visitante{
  justify-content:flex-start;
}

.calendario-equipo strong{
  min-width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--navy);
  color:#fff;
  font-size:18px;
}

.calendario-versus{
  color:#98a2b3;
  font-size:12px;
  font-weight:900;
  text-align:center;
}

.calendario-partido-datos{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}

.calendario-cancha{
  color:#475467;
  font-size:12px;
  font-weight:800;
}

.calendario-estado{
  padding:7px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.calendario-estado-programado{
  background:#dbeafe;
  color:#1d4ed8;
}

.calendario-estado-finalizado{
  background:#dcfce7;
  color:#15803d;
}

.calendario-estado-reprogramado{
  background:#ffedd5;
  color:#c2410c;
}

.calendario-estado-pendiente{
  background:#f2f4f7;
  color:#667085;
}

.calendario-estado-vencido{
  border:1px solid #fda29b;
  background:#fef3f2;
  color:#b42318;
}

.calendario-aviso{
  width:min(800px,100%);
  margin:0 auto;
  padding:24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(255,255,255,.07);
  color:#d6deea;
  text-align:center;
}

@media(max-width:900px){
  .calendario-partido{
    grid-template-columns:90px minmax(0,1fr);
  }

  .calendario-partido-datos{
    grid-column:1 / -1;
    justify-content:center;
  }
}

@media(max-width:680px){
  .calendario-filtros{
    grid-template-columns:1fr;
    padding:17px;
  }

  .calendario-partido{
    grid-template-columns:1fr;
    gap:15px;
    padding:20px 17px;
  }

  .calendario-partido-meta{
    display:flex;
    justify-content:space-between;
  }

  .calendario-enfrentamiento{
    grid-template-columns:1fr;
    gap:9px;
  }

  .calendario-equipo,
  .calendario-equipo-local,
  .calendario-equipo-visitante{
    justify-content:space-between;
    text-align:left;
  }

  .calendario-equipo-local span{
    order:1;
  }

  .calendario-equipo-local strong{
    order:2;
  }

  .calendario-versus{
    display:none;
  }

  .calendario-partido-datos{
    grid-column:auto;
    justify-content:space-between;
    padding-top:8px;
    border-top:1px solid #edf0f4;
  }
}

@media(max-width:470px){
  .calendario-vistas{
    grid-template-columns:1fr;
  }

  .calendario-dia-encabezado{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}

/* ==========================================================================
   FASE 3.1 - MI LIGA MORELOS / PROTOTIPO DE PORTAL
   ========================================================================== */

.nav-login{
  padding:9px 14px !important;
  border:1px solid rgba(212,175,55,.65);
  border-radius:999px;
  color:var(--gold) !important;
}

.nav-login:hover{
  background:var(--gold);
  color:var(--navy) !important;
}

.portal-body{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 10% 5%,rgba(212,175,55,.16),transparent 25%),
    radial-gradient(circle at 90% 10%,rgba(35,93,160,.23),transparent 25%),
    #041426;
  color:#fff;
}

.portal-topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:16px clamp(18px,4vw,60px);
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(3,15,29,.88);
  backdrop-filter:blur(16px);
}

.portal-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
}

.portal-brand-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,var(--gold),#f7dd7f);
  color:var(--navy);
  font-size:22px;
  font-weight:1000;
}

.portal-brand strong,
.portal-brand small{
  display:block;
}

.portal-brand strong{
  font-size:16px;
}

.portal-brand small{
  margin-top:2px;
  color:#9fb0c6;
  font-size:11px;
}

.portal-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.portal-top-actions a{
  padding:9px 12px;
  border-radius:10px;
  color:#bdc9d8;
  font-size:12px;
  font-weight:800;
}

.portal-top-actions a:hover,
.portal-top-actions a.activo{
  background:rgba(255,255,255,.10);
  color:var(--gold);
}

.portal-shell{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:38px 0 70px;
}

.portal-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:24px;
}

.portal-user{
  display:flex;
  align-items:center;
  gap:18px;
}

.portal-avatar{
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:3px solid rgba(212,175,55,.72);
  border-radius:24px;
  background:linear-gradient(145deg,#123a66,#06192f);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  color:var(--gold);
  font-size:28px;
  font-weight:1000;
}

.portal-eyebrow{
  margin:0 0 7px;
  color:var(--gold);
  font-size:10px;
  font-weight:1000;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.portal-user h1{
  margin:0;
  font-size:clamp(29px,4vw,48px);
  line-height:1;
}

.portal-user p:last-child{
  margin:9px 0 0;
  color:#b5c2d3;
}

.portal-user p strong{
  color:#fff;
}

.portal-id-chip{
  min-width:145px;
  padding:15px 18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(255,255,255,.07);
  text-align:right;
}

.portal-id-chip span,
.portal-id-chip strong{
  display:block;
}

.portal-id-chip span{
  color:#8fa1b8;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.portal-id-chip strong{
  margin-top:4px;
  color:var(--gold);
  font-size:18px;
}

.portal-next-match{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  min-height:190px;
  padding:30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:
    linear-gradient(120deg,rgba(15,60,105,.97),rgba(6,24,45,.97)),
    #0b2d52;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}

.portal-next-match::after{
  content:"";
  position:absolute;
  right:-45px;
  bottom:-70px;
  width:260px;
  height:260px;
  border:45px solid rgba(212,175,55,.11);
  border-radius:50%;
}

.portal-next-copy{
  position:relative;
  z-index:1;
}

.portal-next-copy h2{
  margin:0;
  font-size:clamp(25px,4vw,43px);
}

.portal-next-copy h2 span{
  color:var(--gold);
  font-size:.6em;
  text-transform:uppercase;
}

.portal-match-meta{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
}

.portal-match-meta span{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(0,0,0,.16);
  color:#d5deea;
  font-size:11px;
  font-weight:800;
}

.portal-match-badge{
  position:relative;
  z-index:1;
  width:140px;
  height:140px;
  display:grid;
  place-content:center;
  flex:0 0 auto;
  border:2px solid rgba(212,175,55,.65);
  border-radius:50%;
  background:rgba(0,0,0,.20);
  text-align:center;
}

.portal-match-badge span{
  color:#b7c5d6;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.portal-match-badge strong{
  margin-top:4px;
  color:var(--gold);
  font-size:18px;
}

.portal-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:18px 0;
}

.portal-stats article{
  padding:19px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:rgba(255,255,255,.06);
}

.portal-stats strong,
.portal-stats span{
  display:block;
}

.portal-stats strong{
  color:#fff;
  font-size:28px;
}

.portal-stats span{
  margin-top:3px;
  color:#97a9bf;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.portal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}

.portal-card{
  min-height:205px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  padding:24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:25px;
  background:rgba(255,255,255,.06);
  color:#fff;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.portal-card:hover{
  transform:translateY(-4px);
  border-color:rgba(212,175,55,.55);
  background:rgba(255,255,255,.09);
}

.portal-card-featured{
  background:linear-gradient(145deg,#d4af37,#f4dd8e);
  color:var(--navy);
}

.portal-card-featured:hover{
  background:linear-gradient(145deg,#dfbd49,#f6e5a6);
}

.portal-card-icon{
  font-size:34px;
}

.portal-card small{
  color:#91a4bb;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}

.portal-card-featured small{
  color:#5f5121;
}

.portal-card h3{
  margin:5px 0 7px;
  font-size:24px;
}

.portal-card p{
  margin:0;
  color:#b9c5d4;
  font-size:13px;
  line-height:1.6;
}

.portal-card-featured p{
  color:#3f391f;
}

.portal-card b{
  font-size:12px;
}

.portal-feed{
  margin-top:24px;
  padding:26px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:27px;
  background:rgba(255,255,255,.05);
}

.portal-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:18px;
}

.portal-section-heading h2{
  margin:0;
}

.portal-section-heading a{
  color:var(--gold);
  font-size:12px;
  font-weight:900;
}

.portal-feed-list{
  display:grid;
}

.portal-feed-list article{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:20px;
  padding:17px 0;
  border-top:1px solid rgba(255,255,255,.09);
}

.portal-feed-list time{
  color:var(--gold);
  font-size:11px;
  font-weight:900;
}

.portal-feed-list strong{
  display:block;
  margin-bottom:4px;
}

.portal-feed-list p{
  margin:0;
  color:#9eb0c5;
  font-size:13px;
}

.portal-prototype-note{
  margin-top:18px;
  padding:16px 18px;
  border:1px dashed rgba(212,175,55,.4);
  border-radius:16px;
  background:rgba(212,175,55,.06);
}

.portal-prototype-note strong{
  color:var(--gold);
}

.portal-prototype-note p{
  margin:4px 0 0;
  color:#aebdd0;
  font-size:12px;
}

@media(max-width:760px){
  .portal-topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .portal-top-actions{
    width:100%;
    overflow-x:auto;
  }

  .portal-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .portal-id-chip{
    text-align:left;
  }

  .portal-next-match{
    align-items:flex-start;
    flex-direction:column;
  }

  .portal-match-badge{
    width:105px;
    height:105px;
  }

  .portal-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .portal-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  .portal-shell{
    width:min(100% - 22px,1180px);
    padding-top:22px;
  }

  .portal-user{
    align-items:flex-start;
  }

  .portal-avatar{
    width:61px;
    height:61px;
    border-radius:18px;
    font-size:22px;
  }

  .portal-user h1{
    font-size:28px;
  }

  .portal-next-match{
    padding:22px;
    border-radius:23px;
  }

  .portal-stats{
    gap:9px;
  }

  .portal-stats article{
    padding:15px;
  }

  .portal-feed-list article{
    grid-template-columns:1fr;
    gap:5px;
  }

  .portal-section-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}