/* LÍDER ARGENTINO — Salón de la Fama
   Bodoni Moda (didone, placa de trofeo) + Archivo (Omnibus-Type, Argentina) */

:root {
  --bg: #0b0b10;
  --bg-raise: #12121a;
  --bg-plaque: #16141c;
  --gold: #d4af37;
  --gold-hi: #f5d061;
  --gold-lo: #8a6d1d;
  --gold-line: rgba(212, 175, 55, 0.28);
  --gold-faint: rgba(212, 175, 55, 0.10);
  --ink: #eae6da;
  --ink-dim: #9a948a;
  --ink-faint: #5f5a52;
  --danger: #e06c5a;
  --font-display: "Bodoni Moda", "Didot", "Playfair Display", serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;
  --font-num: "Archivo Narrow", "Archivo", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.13), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* grano sutil encima de todo */
.grain {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hidden { display: none !important; }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 8px;
  max-width: 860px; margin: 0 auto;
}
.wordmark { display: flex; flex-direction: column; line-height: 0.95; }
.wordmark-lider {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 7vw, 44px);
  letter-spacing: 0.04em;
  background: linear-gradient(175deg, var(--gold-hi) 20%, var(--gold) 55%, var(--gold-lo));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.wordmark-arg {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 15px);
  letter-spacing: 0.52em;
  color: var(--ink-dim);
  margin-top: 4px;
}
.live-wrap { display: flex; align-items: center; gap: 7px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 0 0 rgba(245, 208, 97, 0.6);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 208, 97, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(245, 208, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 208, 97, 0); }
}
.live-label { font-family: var(--font-num); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; color: var(--gold); }

/* ---------- pozo ---------- */
.pot-strip {
  text-align: center;
  padding: 18px 20px 6px;
  animation: rise 0.7s ease both;
}
.pot-label {
  font-family: var(--font-num); font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint);
}
.pot-amount {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(34px, 9vw, 56px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.pot-entries { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }

/* ---------- trono (#1) ---------- */
.throne {
  position: relative;
  max-width: 620px;
  margin: 26px auto 0;
  padding: 0 20px;
  animation: rise 0.7s 0.1s ease both;
}
.throne-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  outline: 1px solid rgba(212, 175, 55, 0.08);
  outline-offset: 5px;
  background:
    radial-gradient(ellipse 90% 90% at 50% 0%, rgba(212, 175, 55, 0.14), transparent 60%),
    var(--bg-plaque);
  text-align: center;
  padding: 44px 24px 30px;
}
/* Sol de Mayo: rayos en conic-gradient detrás del líder */
.throne-card::before {
  content: "";
  position: absolute; inset: -40% -20%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(212, 175, 55, 0.09) 0deg 4deg,
    transparent 4deg 12.85deg
  );
  animation: sol 90s linear infinite;
  pointer-events: none;
}
@keyframes sol { to { transform: rotate(360deg); } }
.throne-crown { font-size: 34px; display: block; filter: drop-shadow(0 3px 10px rgba(212,175,55,0.45)); }
.throne-rank {
  font-family: var(--font-num); font-weight: 700; font-size: 11px;
  letter-spacing: 0.34em; color: var(--gold); margin-top: 8px;
}
.throne-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1.05;
  margin: 8px 0 2px;
  background: linear-gradient(175deg, #fff6dd 10%, var(--gold-hi) 45%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  overflow-wrap: anywhere;
}
.throne-name a { color: inherit; text-decoration: none; -webkit-text-fill-color: transparent; }
.throne-target { position: relative; font-size: 13px; color: var(--ink-dim); overflow-wrap: anywhere; }
.throne-target a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.throne-total {
  position: relative;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 6vw, 38px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 14px;
}
.throne-clicks { position: relative; font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.throne-empty {
  border: 1px dashed var(--gold-line);
  padding: 48px 24px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 15px;
}
.throne-empty strong { color: var(--gold-hi); font-weight: 700; }

/* ---------- podio (#2 y #3) ---------- */
.podium {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-width: 620px; margin: 10px auto 0; padding: 0 20px;
  animation: rise 0.7s 0.18s ease both;
}
.podium-card {
  border: 1px solid rgba(212, 175, 55, 0.16);
  background: var(--bg-raise);
  padding: 16px 14px 14px;
  text-align: center;
}
.podium-rank { font-family: var(--font-num); font-weight: 700; font-size: 11px; letter-spacing: 0.28em; color: var(--ink-faint); }
.podium-name {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  margin: 4px 0 1px; color: var(--ink); overflow-wrap: anywhere;
}
.podium-name a { color: inherit; text-decoration: none; }
.podium-total { font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- escalera (#4+) ---------- */
.ladder-wrap { max-width: 620px; margin: 18px auto 0; padding: 0 20px; animation: rise 0.7s 0.26s ease both; }
.ladder { list-style: none; counter-reset: rank 3; }
.ladder-row {
  counter-increment: rank;
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.10);
}
.ladder-row::before {
  content: counter(rank);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink-faint); min-width: 26px; text-align: right;
}
.ladder-name { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.ladder-name a { color: var(--ink); text-decoration: none; }
.ladder-name a:hover { color: var(--gold-hi); }
.ladder-target { flex: 1; font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ladder-total { font-family: var(--font-num); font-weight: 700; font-size: 14px; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* fila que acaba de cambiar */
.flash { animation: flash 1.2s ease; }
@keyframes flash {
  0% { background: rgba(212, 175, 55, 0.22); }
  100% { background: transparent; }
}

/* ---------- CTA ---------- */
.cta-block {
  text-align: center;
  padding: 34px 20px 20px;
  animation: rise 0.7s 0.34s ease both;
}
.btn-gold {
  font-family: var(--font-num); font-weight: 700; font-size: 16px;
  letter-spacing: 0.14em;
  color: #17130a;
  background: linear-gradient(178deg, var(--gold-hi), var(--gold) 60%, #b8912c);
  border: none; cursor: pointer;
  padding: 16px 34px;
  box-shadow: 0 6px 30px rgba(212, 175, 55, 0.25), inset 0 1px 0 rgba(255, 246, 221, 0.7);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 10px 36px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255,246,221,0.7); }
.btn-gold:active { transform: translateY(0); }
.cta-sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 10px; }

/* ---------- modal ---------- */
.modal {
  border: 1px solid var(--gold-line);
  background: var(--bg-plaque);
  color: var(--ink);
  padding: 0;
  width: min(440px, calc(100vw - 32px));
  margin: auto;
}
.modal::backdrop { background: rgba(5, 5, 8, 0.82); backdrop-filter: blur(3px); }
.modal form { padding: 26px 22px 22px; position: relative; }
.modal-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--ink-dim);
  font-size: 26px; cursor: pointer; line-height: 1;
}
.modal-title {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  text-align: center; margin-bottom: 18px;
  background: linear-gradient(175deg, var(--gold-hi) 30%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.kind-toggle { border: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.kind-toggle label { display: block; }
.kind-toggle input { position: absolute; opacity: 0; }
.kind-toggle span {
  display: block; text-align: center; padding: 10px 4px;
  font-family: var(--font-num); font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
  border: 1px solid rgba(212, 175, 55, 0.2); color: var(--ink-dim); cursor: pointer;
  transition: all 0.15s ease;
}
.kind-toggle input:checked + span { border-color: var(--gold); color: var(--gold-hi); background: var(--gold-faint); }
.field { display: block; margin-bottom: 14px; }
.field-label {
  display: block;
  font-family: var(--font-num); font-weight: 700; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: 5px;
}
.field input, #amount-custom {
  width: 100%;
  background: var(--bg);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--ink);
  font-family: var(--font-body); font-size: 16px;
  padding: 11px 12px;
  outline: none;
}
.field input:focus, #amount-custom:focus { border-color: var(--gold); }
.amount-presets { border: none; margin-bottom: 6px; }
.preset-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.preset-row label { display: block; }
.preset-row input { position: absolute; opacity: 0; }
.preset-row span {
  display: block; text-align: center; padding: 9px 2px;
  font-family: var(--font-num); font-weight: 700; font-size: 13px;
  border: 1px solid rgba(212, 175, 55, 0.2); color: var(--ink-dim); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.preset-row input:checked + span { border-color: var(--gold); color: var(--gold-hi); background: var(--gold-faint); }
#amount-custom { margin-top: 8px; }
.position-hint { font-size: 13px; color: var(--gold-hi); min-height: 20px; margin: 8px 0 2px; text-align: center; }
#website { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { color: var(--danger); font-size: 13.5px; min-height: 20px; margin: 4px 0 6px; text-align: center; }
.btn-submit { width: 100%; margin-top: 4px; }
.form-fine { font-size: 11.5px; color: var(--ink-faint); text-align: center; margin-top: 12px; }
.form-fine a { color: var(--ink-dim); }

/* ---------- movimientos en vivo ---------- */
.ticker-wrap {
  max-width: 620px; margin: 6px auto 0; padding: 0 20px;
  animation: rise 0.7s 0.42s ease both;
}
.ticker-title {
  font-family: var(--font-num); font-weight: 700; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint);
  text-align: center; margin-bottom: 10px;
}
.ticker { list-style: none; display: grid; gap: 1px; }
.ticker-row {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 12px;
  background: rgba(212, 175, 55, 0.035);
  font-size: 13.5px;
  animation: rise 0.4s ease both;
}
.ticker-dot { color: var(--gold); font-size: 10px; }
.ticker-text { flex: 1; color: var(--ink-dim); overflow-wrap: anywhere; }
.ticker-text strong { color: var(--ink); font-weight: 500; }
.ticker-time { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }

/* ---------- footer ---------- */
.foot {
  max-width: 620px; margin: 30px auto 0; padding: 22px 20px 46px;
  border-top: 1px solid rgba(212, 175, 55, 0.12);
  text-align: center;
}
.share-block { text-align: center; }
.share-headline {
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  color: var(--ink); margin-bottom: 12px;
}
.share-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.share-label { font-size: 13px; color: var(--ink-dim); }
.share-link {
  font-family: var(--font-num); font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
  color: var(--gold); text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.25); padding: 9px 16px;
  background: none; cursor: pointer;
  transition: background 0.15s ease;
}
.share-link:hover { background: var(--gold-faint); }
.foot-nav { margin-top: 16px; }
.foot-nav a { color: var(--ink-dim); font-size: 13px; }
.foot-fine { font-size: 11.5px; color: var(--ink-faint); margin-top: 12px; }

/* ---------- páginas secundarias ---------- */
.page { max-width: 620px; margin: 0 auto; padding: 10px 20px 60px; }
.page h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 7vw, 40px);
  margin: 22px 0 18px;
  background: linear-gradient(175deg, var(--gold-hi) 30%, var(--gold));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.page ol { padding-left: 22px; display: grid; gap: 12px; }
.page li { color: var(--ink); font-size: 15px; }
.page p { color: var(--ink-dim); margin: 14px 0; font-size: 15px; }
.page a { color: var(--gold); }
.back-link { display: inline-block; margin-top: 26px; }

/* ---------- retorno del pago ---------- */
.page-center { text-align: center; padding-top: 40px; }
.status-icon { font-size: 52px; line-height: 1; margin-bottom: 12px; animation: rise 0.5s ease both; }
.page-center h1 { margin: 0 0 10px; }
.status-text { color: var(--ink-dim); max-width: 420px; margin: 0 auto; }
.status-card {
  border: 1px solid var(--gold-line);
  background: radial-gradient(ellipse 90% 90% at 50% 0%, rgba(212, 175, 55, 0.12), transparent 65%), var(--bg-plaque);
  padding: 24px 20px;
  margin: 26px auto 0; max-width: 380px;
  animation: rise 0.5s ease both;
}
/* Especificidad de clase + elemento: si no, la regla genérica `.page p` gana y
   achica el puesto a 15px. */
.page p.status-card-label {
  font-family: var(--font-num); font-weight: 700; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0;
}
.page p.status-card-rank {
  font-family: var(--font-num); font-weight: 700; font-size: 64px; line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 6px 0 4px;
  color: var(--gold-hi);
  text-shadow: 0 2px 26px rgba(212, 175, 55, 0.4);
}
.page p.status-card-name {
  font-family: var(--font-display); font-size: 20px; color: var(--ink);
  overflow-wrap: anywhere; margin: 0;
}
.page p.status-card-total {
  font-family: var(--font-num); font-weight: 700; font-size: 14px;
  color: var(--gold); margin: 8px 0 0;
}
.page p.share-headline {
  font-family: var(--font-display); font-weight: 600; font-size: 20px;
  color: var(--ink); margin: 0 0 14px;
}
.page-center .share-block { margin-top: 34px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 460px) {
  .preset-row { grid-template-columns: repeat(2, 1fr); }
  .ladder-target { display: none; }
}