/* ============================================================
   PRODE MUNDIALERO — Estilos personalizados
   Identidad Argentina · Mundial 2026
   ============================================================ */

:root{
  --celeste:#75AADB;
  --celeste-dark:#5a93c9;
  --blanco:#ffffff;
  --azul:#1a3a5c;
  --azul-deep:#0e2235;
  --dorado:#f0c040;
  --naranja:#e85d04;
  --negro:#0a0f16;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Roboto Condensed',system-ui,sans-serif;
  background:var(--azul-deep);
  color:#e9f1f8;
  margin:0;
  overflow-x:hidden;
}

h1,h2,h3,.font-title{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.5px;}
.font-vintage{font-family:'Special Elite',monospace;}
.font-num{font-family:'Oswald',sans-serif;font-weight:700;font-variant-numeric:tabular-nums;}

/* ----- Fondo con textura de ruido ----- */
.bg-noise{position:relative;}
.bg-noise::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----- Patrón camiseta albiceleste (rayas) ----- */
.jersey-stripes{
  background-image:repeating-linear-gradient(
    90deg,
    rgba(117,170,219,.16) 0px,
    rgba(117,170,219,.16) 38px,
    rgba(255,255,255,.05) 38px,
    rgba(255,255,255,.05) 76px
  );
}
.jersey-card{
  background:
    repeating-linear-gradient(90deg,
      rgba(117,170,219,.10) 0 24px, rgba(255,255,255,.03) 24px 48px),
    linear-gradient(160deg,#163150,#0e2235);
}

/* ----- Campo de fútbol (fondo decorativo) ----- */
.field-bg{position:absolute;inset:0;z-index:0;opacity:.10;pointer-events:none;}

/* ----- Estrellas de campeón con shimmer ----- */
.stars-champion{display:flex;gap:10px;justify-content:center;}
.stars-champion .star{
  width:34px;height:34px;color:var(--dorado);
  filter:drop-shadow(0 0 6px rgba(240,192,64,.7));
  animation:starPulse 2.4s ease-in-out infinite;
}
.stars-champion .star:nth-child(2){animation-delay:.3s;}
.stars-champion .star:nth-child(3){animation-delay:.6s;}
@keyframes starPulse{
  0%,100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 4px rgba(240,192,64,.5));}
  50%{transform:scale(1.18) rotate(-4deg);filter:drop-shadow(0 0 14px rgba(240,192,64,1));}
}
.shimmer{
  background:linear-gradient(110deg,#f0c040 25%,#fff6cf 45%,#f0c040 60%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 3s linear infinite;
}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ----- Trofeo glow ----- */
.trophy-glow{filter:drop-shadow(0 0 18px rgba(240,192,64,.55));animation:floatY 4s ease-in-out infinite;}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

/* ----- CTA principal con pulso ----- */
.btn-cta{
  background:var(--naranja);color:#fff;font-family:'Oswald',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;border:none;cursor:pointer;
  padding:18px 46px;border-radius:12px;font-size:20px;
  box-shadow:0 8px 24px rgba(232,93,4,.45);transition:transform .15s,box-shadow .15s;
  animation:ctaPulse 2.2s ease-in-out infinite;
}
.btn-cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 34px rgba(232,93,4,.6);}
.btn-cta:active{transform:translateY(0) scale(.98);}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 8px 24px rgba(232,93,4,.45);}
  50%{box-shadow:0 8px 38px rgba(232,93,4,.85);}
}

.btn-ghost{
  background:transparent;border:2px solid var(--celeste);color:var(--celeste);
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;
  padding:13px 30px;border-radius:10px;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block;
}
.btn-ghost:hover{background:var(--celeste);color:var(--azul-deep);transform:translateY(-2px);}

/* ----- Cards con hover de cancha ----- */
.card{
  background:linear-gradient(160deg,#163150,#0e2235);
  border:1px solid rgba(117,170,219,.18);border-radius:16px;
  position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(117,170,219,.5);box-shadow:0 18px 40px rgba(0,0,0,.45);}
.card::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(circle at 50% 120%,rgba(34,150,80,.25),transparent 60%);
}
.card:hover::after{opacity:1;}

/* ============================================================
   SCOREBOARD RETRO (selector de predicciones)
   ============================================================ */
.scoreboard{
  background:var(--negro);
  border:3px solid #2a3138;border-radius:14px;
  box-shadow:inset 0 0 22px rgba(0,0,0,.9),0 8px 24px rgba(0,0,0,.5);
  padding:18px;position:relative;
}
.scoreboard::before{
  content:"";position:absolute;inset:4px;border-radius:10px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px);
}
.sb-team{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;color:#9fb3c6;
  letter-spacing:1px;font-size:14px;text-align:center;}
.sb-digit{
  font-family:'Oswald',sans-serif;font-weight:700;
  color:#ffd000;font-size:64px;line-height:1;text-align:center;min-width:78px;
  text-shadow:0 0 12px rgba(255,208,0,.7),0 0 2px #fff;
  background:#15181c;border-radius:8px;padding:6px 4px;
  border:1px solid #2a3138;font-variant-numeric:tabular-nums;
}
.sb-colon{color:#ffd000;font-size:54px;font-weight:700;text-shadow:0 0 12px rgba(255,208,0,.6);}
.sb-btn{
  width:46px;height:46px;border-radius:10px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#2c333b,#1a1f25);color:#ffd000;
  font-size:26px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 #0a0d10,inset 0 1px 0 rgba(255,255,255,.08);transition:transform .08s,box-shadow .08s;
  font-family:'Oswald',sans-serif;
}
.sb-btn:hover{color:#fff;}
.sb-btn:active{transform:translateY(3px);box-shadow:0 0 0 #0a0d10,inset 0 1px 0 rgba(255,255,255,.08);}

/* Estado de la predicción */
.pred-badge{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.5px;padding:5px 14px;border-radius:999px;font-size:13px;display:inline-flex;align-items:center;gap:6px;}
.badge-pendiente{background:rgba(240,192,64,.15);color:#f0c040;border:1px solid rgba(240,192,64,.4);}
.badge-exacto{background:rgba(34,197,94,.18);color:#4ade80;border:1px solid rgba(74,222,128,.5);}
.badge-correcto{background:rgba(59,130,246,.18);color:#60a5fa;border:1px solid rgba(96,165,250,.5);}
.badge-error{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(248,113,113,.5);}

/* ============================================================
   FLIP CLOCK (cuenta regresiva)
   ============================================================ */
.flipclock{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.flip-unit{display:flex;flex-direction:column;align-items:center;gap:6px;}
.flip-card{
  background:linear-gradient(180deg,#1c1f24,#0c0e11);
  color:var(--dorado);font-family:'Oswald',sans-serif;font-weight:700;
  font-size:40px;min-width:64px;padding:12px 8px;border-radius:10px;text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;font-variant-numeric:tabular-nums;
  border:1px solid #2a3138;
}
.flip-card::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.6);}
.flip-card.tick{animation:flipTick .4s ease;}
@keyframes flipTick{0%{transform:rotateX(0);}50%{transform:rotateX(-18deg);}100%{transform:rotateX(0);}}
.flip-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#8aa0b5;font-family:'Roboto Condensed';}

/* ============================================================
   TICKER DE ESTADIO
   ============================================================ */
.ticker{
  background:var(--azul);border-top:2px solid var(--dorado);border-bottom:2px solid var(--dorado);
  overflow:hidden;white-space:nowrap;padding:9px 0;
}
.ticker__track{display:inline-block;padding-left:100%;animation:tickerScroll 22s linear infinite;}
.ticker__track span{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:3px;
  color:var(--dorado);font-size:15px;text-transform:uppercase;}
.ticker__track span .dot{color:var(--celeste);margin:0 18px;}
@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* ============================================================
   ANIMACIÓN "¡GOOOL!"
   ============================================================ */
#golOverlay{
  position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(14,34,53,.78);backdrop-filter:blur(3px);
}
#golOverlay.show{display:flex;}
.gol-text{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(60px,18vw,180px);
  color:#fff;text-transform:uppercase;letter-spacing:4px;
  text-shadow:0 0 30px var(--celeste),0 0 60px var(--celeste),0 6px 0 var(--naranja);
  animation:golPop .8s cubic-bezier(.18,1.5,.4,1);
}
@keyframes golPop{0%{transform:scale(.2) rotate(-8deg);opacity:0;}55%{transform:scale(1.15) rotate(2deg);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}}
#confettiCanvas{position:fixed;inset:0;z-index:9998;pointer-events:none;}

/* ============================================================
   Reveal al entrar (fade-in + slide-up)
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* ----- Medallas top 3 ----- */
.medal{font-size:26px;animation:medalSwing 2.5s ease-in-out infinite;display:inline-block;}
@keyframes medalSwing{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(8deg);}}

/* ----- Inputs ----- */
.inp{
  width:100%;background:#0e2235;border:1px solid rgba(117,170,219,.3);border-radius:10px;
  color:#e9f1f8;padding:13px 15px;font-family:'Roboto Condensed';font-size:16px;transition:border-color .2s,box-shadow .2s;
}
.inp:focus{outline:none;border-color:var(--celeste);box-shadow:0 0 0 3px rgba(117,170,219,.2);}
.inp::placeholder{color:#6a8098;}
label.lbl{display:block;font-family:'Oswald';font-weight:500;letter-spacing:.5px;color:#bcd2e6;margin-bottom:6px;font-size:14px;text-transform:uppercase;}

/* ----- Alertas / flash ----- */
.alert{border-radius:10px;padding:13px 16px;margin-bottom:14px;font-size:15px;border:1px solid;}
.alert-error{background:rgba(239,68,68,.12);border-color:rgba(248,113,113,.5);color:#fca5a5;}
.alert-success{background:rgba(34,197,94,.12);border-color:rgba(74,222,128,.5);color:#86efac;}
.alert-info{background:rgba(117,170,219,.12);border-color:rgba(117,170,219,.5);color:#9fc8ec;}

/* ----- Tabla admin ----- */
.tbl{width:100%;border-collapse:collapse;font-size:14px;}
.tbl th{background:#11283f;color:#9fc8ec;text-align:left;padding:11px 12px;font-family:'Oswald';font-weight:500;letter-spacing:.5px;text-transform:uppercase;font-size:12px;}
.tbl td{padding:10px 12px;border-top:1px solid rgba(117,170,219,.12);}
.tbl tr:hover td{background:rgba(117,170,219,.05);}

/* ----- Scrollbar ----- */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:#0e2235;}
::-webkit-scrollbar-thumb{background:#2e5275;border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--celeste);}

/* ----- Responsive ----- */
@media (max-width:640px){
  .sb-digit{font-size:48px;min-width:60px;}
  .flip-card{font-size:30px;min-width:50px;}
}

/* ============================================================
 * Estética landing v2 (rediseño)
 * ============================================================ */

/* Escenario del hero: malla de gradientes + grilla + brillo inferior */
.hero-stage{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(117,170,219,.38), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(240,192,64,.26), transparent 26%),
    linear-gradient(135deg,#07111f 0%,#0c2945 46%,#02060c 100%);
}
.hero-stage::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:46px 46px;opacity:.22;
}
.hero-stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(117,170,219,.22), transparent 66%),
    linear-gradient(to top, rgba(0,0,0,.92), transparent);
}

/* Tarjeta "glass" */
.glass{
  background:linear-gradient(145deg, rgba(11,30,52,.9), rgba(3,8,15,.94));
  border:1px solid rgba(117,170,219,.25);
  box-shadow:0 18px 55px rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
}

/* Cajitas de cuenta regresiva estilo marcador */
.cd-box{
  background:#030303;color:#ffd000;font-family:'Oswald',sans-serif;font-weight:700;
  border:1px solid rgba(240,192,64,.45);border-radius:14px;
  text-shadow:0 0 14px rgba(240,192,64,.8);
  box-shadow:inset 0 0 18px rgba(240,192,64,.12),0 0 18px rgba(0,0,0,.5);
  padding:14px 0;font-variant-numeric:tabular-nums;line-height:1;
  font-size:clamp(28px,7vw,46px);
}

/* Franja camiseta argentina (acentos) */
.jersey-top{
  background:repeating-linear-gradient(90deg,#75AADB 0 18px,#ffffff 18px 36px);
}
.jersey-band{
  height:14px;
  background:repeating-linear-gradient(90deg,#75AADB 0 26px,#ffffff 26px 52px);
  box-shadow:0 0 24px rgba(117,170,219,.35);
}

/* Tarjeta de partido con brillo de cancha al pasar el mouse */
.gcard{transition:transform .25s ease,border-color .25s ease,background .25s ease;}
.gcard:hover{
  transform:translateY(-6px);
  border-color:rgba(117,170,219,.7);
  background:
    radial-gradient(circle at top right, rgba(33,120,64,.22), transparent 40%),
    linear-gradient(145deg, rgba(11,30,52,.92), rgba(3,8,15,.94));
}

/* Logo en el nav */
.nav-logo{height:34px;width:auto;display:block;}
@media(min-width:640px){.nav-logo{height:40px;}}