@charset "UTF-8";
:root{--prode-blue:#0a42d8;--prode-deep:#03124a;--prode-mid:#061b70;--prode-gold:#ffd51f;--prode-sky:#4db5ff;--prode-green:#4ee66d;--prode-red:#ff4f5e}

*{box-sizing:border-box}

.prode-main{overflow:hidden;background:radial-gradient(circle at 10% 6%,rgba(52,132,255,.3),transparent 26%),radial-gradient(circle at 92% 16%,rgba(31,83,255,.2),transparent 30%),linear-gradient(180deg,#071d78 0,#04134d 36%,#03124a 100%);padding-bottom:40px}

.prode-preview-flag{display:block;margin:0 auto;padding:9px 18px;max-width:max-content;border-radius:0 0 14px 14px;background:var(--prode-gold);color:#071342;font-weight:900;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 6px 0 #b88900}

/* =========================================
   HERO
========================================= */

.prode-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);align-items:center;gap:32px;padding:56px clamp(20px,6vw,90px) 60px}

.prode-hero-copy .eyebrow{margin-bottom:18px}

.prode-hero h1{font-family:"Lilita One";font-size:clamp(3rem,7vw,5.6rem);line-height:.88;margin:0 0 16px;text-transform:uppercase;text-shadow:0 8px 0 rgba(0,8,56,.5)}

.prode-hero h1 strong{color:var(--prode-sky);-webkit-text-stroke:2px #fff}

.prode-hero-copy>p{max-width:560px;font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:700;line-height:1.45;color:#d8e8ff}

.prode-stat-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.prode-stat-row div{min-width:140px;padding:14px 16px;border-radius:16px;background:rgba(2,10,49,.5);border:1px solid rgba(255,255,255,.14)}

.prode-stat-row span{display:block;font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:#8ed0ff}

.prode-stat-row strong{font-family:"Lilita One";font-size:1.7rem;color:var(--prode-gold)}

.prode-hero-visual{position:relative;min-height:420px;display:grid;place-items:center}

.prode-hero-visual img{position:relative;z-index:2;width:min(480px,96%);filter:drop-shadow(0 24px 20px rgba(0,0,0,.4));animation:prodeFloat 3.4s ease-in-out infinite}

/* =========================================
   GANADOR DE LA FECHA (visible para todos)
========================================= */

.prode-winner-banner{display:flex;align-items:center;gap:clamp(14px,3vw,26px);max-width:1000px;margin:8px auto 0;padding:20px clamp(20px,4vw,34px);border-radius:22px;
  background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.5),transparent 42%),linear-gradient(135deg,#ffe259,#ffbf1f 55%,#ff9d00);
  border:2px solid rgba(255,255,255,.85);box-shadow:0 18px 44px rgba(0,0,0,.4);color:#071342;animation:pwbPop .4s cubic-bezier(.2,.9,.25,1.2) both}
.prode-winner-banner .pwb-trophy{font-size:clamp(3rem,7vw,4.2rem);line-height:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.28))}
.prode-winner-banner .pwb-eyebrow{margin:0;font-weight:900;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:#7a3b00}
.prode-winner-banner h2{margin:4px 0 4px;font-family:"Lilita One";font-size:clamp(1.6rem,4vw,2.3rem);line-height:1;text-transform:uppercase;color:#071342;display:flex;align-items:center;gap:10px}
.prode-winner-banner .pwb-avatar{font-size:1.1em;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.prode-winner-banner .pwb-sub{margin:0;font-weight:800;color:#5a3600;line-height:1.35}
@keyframes pwbPop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.prode-winner-banner{animation:none}}

/* =========================================
   PARTIDOS
========================================= */

.prode-matches{padding:10px clamp(20px,5vw,90px) 70px;max-width:1320px;margin:auto}

.prode-subcopy{text-align:center;font-weight:700;color:#b7cff4;max-width:600px;margin:8px auto 0}

.match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:36px}

.match-card{position:relative;padding:22px;border-radius:26px;background:linear-gradient(150deg,rgba(14,51,151,.9),rgba(3,13,55,.96));border:2px solid rgba(255,255,255,.14);box-shadow:0 14px 0 rgba(0,0,0,.2),0 22px 40px rgba(0,0,0,.22)}

.match-card.predicted{border-color:rgba(255,213,31,.5)}

.match-card.played.hit{border-color:rgba(78,230,109,.55)}

.match-card.played.miss{border-color:rgba(255,79,94,.45);opacity:.88}

.match-meta{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:#8fbcf5}

.match-status{padding:5px 11px;border-radius:999px;font-size:.7rem}

.match-status.open{background:rgba(78,230,109,.18);color:#7bffa0}

.match-status.locked{background:rgba(255,213,31,.18);color:var(--prode-gold)}

.match-status.played{background:rgba(255,255,255,.12);color:#cfe0ff}

.match-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:20px 0}

.team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-family:"Lilita One";font-size:1.05rem;text-transform:uppercase;line-height:1.05}

.team-badge{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);font-size:1.4rem;border:2px solid rgba(255,255,255,.2)}
.team-badge img{width:30px;height:30px;object-fit:contain}

.match-score-inputs{display:flex;align-items:center;gap:8px;color:#9fd4ff;font-weight:900}

.match-score-inputs input{width:48px;height:48px;border-radius:14px;border:2px solid rgba(255,255,255,.2);background:#020a30;color:#fff;text-align:center;font-family:"Lilita One";font-size:1.3rem}

.match-score-inputs input:focus{outline:2px solid var(--prode-gold);border-color:var(--prode-gold)}

.match-score-inputs.readonly{color:#fff}

.score-pill{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.1);font-family:"Lilita One";font-size:1.3rem}

.predict-action{width:100%;padding:13px 18px;border-radius:14px;background:var(--prode-gold);color:#081242;font-weight:900;box-shadow:0 6px 0 #b88900;transition:.2s}

.predict-action:hover{transform:translateY(-3px)}

.predict-action.locked{background:rgba(255,255,255,.1);color:#cfe0ff;box-shadow:none;cursor:not-allowed}

.predict-action.confirmed{background:var(--prode-green);box-shadow:0 6px 0 #1a9346}

.match-result{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-weight:700;color:#b7cff4;font-size:.9rem}

.result-hit{color:#7bffa0}

.result-miss{color:#ff8f9a}

/* =========================================
   CÓMO FUNCIONA
========================================= */

.prode-how{padding:10px clamp(20px,5vw,90px) 70px;max-width:1100px;margin:auto}

.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}

.how-card{padding:26px 20px;text-align:center;border-radius:24px;background:linear-gradient(150deg,rgba(14,51,151,.85),rgba(3,13,55,.92));border:2px solid rgba(255,255,255,.12);box-shadow:0 12px 0 rgba(0,0,0,.18)}

.how-card span{font-size:2.2rem}

.how-card h3{font-family:"Lilita One";font-size:1.9rem;color:var(--prode-gold);margin:10px 0 4px}

.how-card p{margin:0;font-weight:700;color:#c7d9f7}

/* =========================================
   RANKING
========================================= */

.prode-ranking{padding:10px clamp(20px,5vw,90px) 70px;max-width:900px;margin:auto}

.ranking-tabs{display:flex;gap:10px;margin-top:22px}
.ranking-tab{flex:1;padding:13px 14px;border-radius:14px;border:2px solid rgba(255,255,255,.12);background:rgba(3,13,55,.55);color:#bcd3f6;font-family:"Lilita One";font-size:1rem;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:transform .12s,border-color .12s,background .12s,color .12s}
.ranking-tab:hover{border-color:rgba(255,213,31,.35)}
.ranking-tab.active{border-color:rgba(255,213,31,.6);background:linear-gradient(150deg,rgba(14,51,151,.92),rgba(3,13,55,.95));color:#fff}
.ranking-tab:active{transform:translateY(1px)}
.ranking-scope-note{margin:12px 4px 0;font-weight:700;font-size:.85rem;color:#9dc2f2}

.ranking-lock-banner{display:flex;align-items:center;gap:12px;margin-top:18px;padding:16px 20px;border-radius:18px;background:rgba(255,213,31,.12);border:1px solid rgba(255,213,31,.4)}

.ranking-lock-banner span{font-size:1.4rem}

.ranking-lock-banner p{margin:0;font-weight:700;color:#ffe9a3;font-size:.92rem}

.ranking-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}

.ranking-row{display:grid;grid-template-columns:36px 40px 1fr auto;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:linear-gradient(150deg,rgba(14,51,151,.85),rgba(3,13,55,.92));border:2px solid rgba(255,255,255,.1)}

.ranking-row.you{border-color:rgba(255,213,31,.6);background:linear-gradient(150deg,rgba(60,80,20,.4),rgba(3,13,55,.92))}

.rank-pos{font-family:"Lilita One";font-size:1.2rem;text-align:center;color:#9fd4ff}

.rank-pos.gold{color:var(--prode-gold)}

.rank-pos.silver{color:#d8e2ef}

.rank-pos.bronze{color:#e0a25c}

.rank-avatar{font-size:1.4rem;text-align:center}

.ranking-row b{font-family:"Lilita One";font-size:1.1rem;text-transform:uppercase}

.rank-points{font-family:"Lilita One";font-size:1.1rem;color:var(--prode-gold)}

/* =========================================
   HISTORIAL
========================================= */

.prode-history{padding:10px clamp(20px,5vw,90px) 20px;max-width:900px;margin:auto}

.history-list{display:flex;flex-direction:column;gap:10px;margin-top:24px}

.history-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:linear-gradient(150deg,rgba(14,51,151,.85),rgba(3,13,55,.92));border:2px solid rgba(255,255,255,.1)}

.history-icon{font-size:1.4rem;text-align:center}

.history-row div{display:flex;flex-direction:column;gap:2px}

.history-row b{font-family:"Lilita One";font-size:1rem;text-transform:uppercase}

.history-row span{font-size:.82rem;font-weight:700;color:#a9c5f7}

.history-row strong{font-family:"Lilita One";font-size:1.1rem}

.history-row.hit strong{color:#7bffa0}

.history-row.half strong{color:var(--prode-gold)}

.history-row.miss strong{color:#ff8f9a}

/* =========================================
   APARICIÓN AL HACER SCROLL
========================================= */

.reveal-pending{opacity:0;transform:translateY(18px);transition:opacity .5s ease var(--reveal-delay,0ms),transform .5s ease var(--reveal-delay,0ms)}

.prode-visible{opacity:1;transform:translateY(0)}

/* =========================================
   ANIMACIONES
========================================= */

@keyframes prodeFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:960px){
  .how-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .prode-hero{grid-template-columns:1fr;text-align:center;padding:40px 18px 30px}
  .prode-hero-copy>p{margin-left:auto;margin-right:auto}
  .prode-stat-row{justify-content:center}
  .prode-hero-visual{min-height:320px}
  .match-teams{gap:6px}
  .team{font-size:.82rem;gap:5px}
  .team-badge{width:34px;height:34px;font-size:1.1rem}
  .match-score-inputs{gap:5px}
  .match-score-inputs input,.score-pill{width:38px;height:38px;font-size:1.05rem;border-radius:11px}
  .ranking-row{grid-template-columns:28px 32px 1fr auto;padding:12px 14px}
  .history-row{grid-template-columns:32px 1fr auto}
}

@media (prefers-reduced-motion:reduce){
  .prode-hero-visual img{animation:none}
}