/* =========================================================
   Prode Mundial 2026 — estilos compartidos de mockups
   ========================================================= */

:root {
  --bg:        #070b18;
  --bg-2:      #0d1326;
  --card:      #121a30;
  --card-2:    #18223f;
  --line:      rgba(255,255,255,.08);
  --txt:       #f4f7ff;
  --muted:     #8b96b5;
  --green:     #00e08a;
  --green-d:   #00b06d;
  --gold:      #ffd24a;
  --blue:      #3d7bff;
  --pink:      #ff5d8f;
  --purple:    #8b5cff;
  --orange:    #ff8a3d;
  --radius:    22px;
  --shadow:    0 20px 50px rgba(0,0,0,.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(61,123,255,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(0,224,138,.12), transparent 55%),
    var(--bg);
  color: var(--txt);
  line-height: 1.45;
  min-height: 100vh;
  padding: 40px 16px 80px;
}

.display { font-family: 'Archivo Black', sans-serif; letter-spacing: -.5px; }
a { color: inherit; text-decoration: none; }

/* ---------- page intro / section header ---------- */
.intro { max-width: 1180px; margin: 0 auto 46px; text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,224,138,.12); color: var(--green);
  border: 1px solid rgba(0,224,138,.3);
  padding: 7px 14px; border-radius: 100px; font-size: 13px; font-weight: 700;
  margin-bottom: 18px; text-transform: uppercase; letter-spacing: .8px;
}
.intro h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.05; margin-bottom: 14px; }
.intro h1 span { background: linear-gradient(100deg, var(--green), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro p { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 16px; }

.backlink { display:inline-flex; align-items:center; gap:6px; color: var(--muted); font-weight:700; font-size:14px; margin-bottom:22px; }
.backlink:hover { color: var(--green); }

/* ---------- showcase grid of phones ---------- */
.screens {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 40px; justify-items: center; align-items: start;
}
.phone-wrap { width: 100%; max-width: 372px; }
.screen-label {
  text-align: center; color: var(--muted); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px;
}
.phone {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 42px;
  padding: 12px;
  box-shadow: var(--shadow);
  position: relative;
}
.notch {
  width: 120px; height: 26px; background: #000; border-radius: 0 0 16px 16px;
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30;
}
.viewport {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-radius: 32px; overflow: hidden; height: 720px;
  display: flex; flex-direction: column; position: relative;
}
.vp-scroll { overflow: hidden; flex: 1; display: flex; flex-direction: column; }

/* ---------- app header ---------- */
.app-head { padding: 42px 20px 16px; display: flex; align-items: center; justify-content: space-between; }
.app-head .title { font-size: 21px; font-weight: 800; }
.app-head .title small { display:block; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--pink)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; }

/* wallet chips (coins / packs) */
.wallet { display:flex; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:5px; background: var(--card); border:1px solid var(--line); padding:6px 11px; border-radius:100px; font-weight:800; font-size:13px; }
.chip.gold { color: var(--gold); border-color: rgba(255,210,74,.3); }

/* segmented control */
.seg { margin: 0 20px 14px; background: var(--card); border:1px solid var(--line); border-radius: 14px; padding: 4px; display:flex; gap:4px; }
.seg div { flex:1; text-align:center; padding:9px; border-radius:10px; font-size:13px; font-weight:700; color: var(--muted); }
.seg div.on { background: linear-gradient(135deg, var(--green), var(--green-d)); color:#04210f; }

/* ---------- scrollable body ---------- */
.body-pad { padding: 0 20px 24px; overflow-y: auto; flex:1; }
.body-pad::-webkit-scrollbar { width: 0; }
.section-title { font-size: 15px; font-weight: 800; margin: 18px 0 12px; }
.group-tag { font-size: 12px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 1.4px; margin: 6px 0 12px; }

/* ---------- match (prediction) cards ---------- */
.match { background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin-bottom: 14px; }
.match .meta { display:flex; justify-content:space-between; align-items:center; color: var(--muted); font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.match .meta .live { color: var(--pink); font-weight:800; display:flex; align-items:center; gap:5px; }
.dot { width:6px; height:6px; background: var(--pink); border-radius:50%; box-shadow:0 0 0 0 rgba(255,93,143,.6); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,93,143,.6);} 70%{box-shadow:0 0 0 7px rgba(255,93,143,0);} 100%{box-shadow:0 0 0 0 rgba(255,93,143,0);} }

.teams { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.team { display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; }
.team img { width:46px; height:46px; border-radius:10px; object-fit:cover; box-shadow:0 6px 14px rgba(0,0,0,.4); background:#222; }
.team span { font-size:13px; font-weight:700; text-align:center; }
.vs { color: var(--muted); font-weight:800; font-size:13px; }
.score { font-family:'Archivo Black',sans-serif; font-size:24px; }

.picks { display:flex; gap:8px; }
.pick { flex:1; text-align:center; padding:11px 0; border-radius:12px; font-weight:800; font-size:14px; background: rgba(255,255,255,.04); border:1px solid var(--line); color: var(--txt); cursor:pointer; transition: transform .12s; }
.pick small { display:block; font-size:9px; font-weight:600; color: var(--muted); margin-top:3px; letter-spacing:.5px; }
.pick.sel { background: linear-gradient(135deg, var(--green), var(--green-d)); color:#04210f; border-color:transparent; }
.pick.sel small { color: rgba(4,33,15,.7); }
.pick.win { border-color: var(--green); color: var(--green); }
.pick.lose { opacity:.4; }
.pick:active { transform: scale(.96); }

/* ---------- standings / ranking rows ---------- */
.rank-row { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:14px; background: var(--card); border:1px solid var(--line); margin-bottom:9px; }
.rank-row.me { background: linear-gradient(135deg, rgba(0,224,138,.14), rgba(61,123,255,.12)); border-color: rgba(0,224,138,.35); }
.rank-pos { width:24px; font-weight:900; font-size:15px; color: var(--muted); text-align:center; }
.rank-pos.top { color: var(--gold); }
.rank-av { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex-shrink:0; }
.rank-name { flex:1; font-weight:700; font-size:14px; }
.rank-name small { display:block; color: var(--muted); font-weight:500; font-size:11px; }
.rank-pts { font-weight:900; font-size:16px; }
.rank-pts span { font-size:11px; color: var(--muted); font-weight:600; }

/* ---------- panini / trading card (ficha) ---------- */
.ficha { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4.1; background: linear-gradient(160deg, #1c2747, #0e1730); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 30px rgba(0,0,0,.5); padding: 12px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; isolation:isolate; }
.ficha::before { content:''; position:absolute; inset:0; z-index:0; opacity:.5; mix-blend-mode:screen; background: conic-gradient(from 200deg at 30% 20%, rgba(0,224,138,.7), rgba(61,123,255,.5), rgba(139,92,255,.6), rgba(255,93,143,.5), rgba(255,210,74,.6), rgba(0,224,138,.7)); filter: blur(2px); }
.ficha::after { content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, transparent 35%, rgba(7,11,24,.85) 100%); }
.ficha > * { position:relative; z-index:2; }
.ficha.locked { filter: grayscale(1) brightness(.5); }
.ficha .lockicon { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; font-size:30px; opacity:.8; }
.ficha-flag { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; position:absolute; top:14px; left:50%; transform: translateX(-50%); box-shadow: 0 6px 16px rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.25); }
.ficha-rarity { position:absolute; top:12px; right:12px; z-index:3; font-size:9px; font-weight:900; background: var(--gold); color:#231a00; padding:3px 7px; border-radius:6px; letter-spacing:.5px; }
.ficha-rarity.rara { background: var(--blue); color:#fff; }
.ficha-rarity.epic { background: var(--purple); color:#fff; }
.ficha-rarity.legend { background: linear-gradient(90deg, var(--gold), var(--orange)); color:#231a00; }
.ficha-name { font-family:'Archivo Black',sans-serif; font-size:15px; text-align:center; line-height:1; }
.ficha-sub { font-size:10px; color: var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-top:5px; }
.ficha-num { font-size:9px; color: var(--muted); margin-top:7px; font-weight:600; }
/* player photo variant */
.ficha-photo { position:absolute; top:0; left:0; width:100%; height:72%; object-fit:cover; z-index:0; }
.ficha.player::after { background: linear-gradient(180deg, transparent 30%, rgba(7,11,24,.95) 75%); }

/* ---------- bottom nav ---------- */
.nav { display:flex; justify-content:space-around; padding:12px 8px 26px; background: rgba(10,15,30,.85); backdrop-filter: blur(12px); border-top:1px solid var(--line); }
.nav div { display:flex; flex-direction:column; align-items:center; gap:4px; color: var(--muted); font-size:10px; font-weight:700; }
.nav div.on { color: var(--green); }
.nav .ic { font-size:20px; }

/* ---------- buttons ---------- */
.btn { width:100%; padding:14px; border-radius:14px; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); cursor:pointer; background: var(--card); color: var(--txt); }
.btn-primary { background: linear-gradient(135deg, var(--green), var(--green-d)); color:#04210f; border-color:transparent; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--orange)); color:#231a00; border-color:transparent; }
.btn-google { background:#fff; color:#1a1a1a; }
.btn-apple { background:#000; color:#fff; }

/* ---------- generic cards / progress ---------- */
.panel { background: var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px; }
.progress-bar { height: 8px; background: rgba(255,255,255,.07); border-radius:100px; overflow:hidden; }
.progress-bar i { display:block; height:100%; background: linear-gradient(90deg, var(--green), var(--gold)); border-radius:100px; }
.kpi-row { display:flex; gap:10px; }
.kpi { flex:1; background: var(--card); border:1px solid var(--line); border-radius:14px; padding:13px; text-align:center; }
.kpi b { display:block; font-family:'Archivo Black',sans-serif; font-size:22px; }
.kpi span { font-size:10px; color: var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.6px; }

/* ---------- footer note ---------- */
.footer-note { max-width:1180px; margin:54px auto 0; text-align:center; color: var(--muted); font-size:13px; }
.footer-note code { background: var(--card); padding:2px 7px; border-radius:6px; color: var(--green); }