/* ============================================================
   El Analista — sistema de diseño
   Lounge de sportsbook VIP: mesa de fieltro oscura, marcador de
   cuotas en vivo (numeros con brillo neon), ribete de oro solo
   para señalar lo premium. Cada membresia sigue usando el color
   real de su piedra: Jadeita = jade, Zafiro = azul, Rosa = rosa.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #0a0c0c;
  --bg-elevated: #14181a;
  --bg-elevated-2: #1a201f;
  --line: #262e2c;
  --text: #ede9e2;
  --text-muted: #8d938f;

  --jade: #35a06b;
  --jade-dim: #1f6e4a;
  --zafiro: #5b8def;
  --zafiro-dim: #33509b;
  --rosa: #e8709c;
  --rosa-dim: #a84b6f;

  /* Acentos nuevos: neon = el marcador de cuotas en vivo (la jugada
     distintiva del sitio, en todo numero de cuota/probabilidad/precio).
     oro = solo para señalar "esto es lo premium" (plan destacado, CTA
     principal) - deliberadamente escaso para que siga viendose fino. */
  --neon: #2bff9e;
  --neon-dim: #15a86a;
  --gold: #d9b273;
  --gold-bright: #f0cf94;
  --gold-dim: #7a6438;

  --font-display: 'Fraunces', serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 10px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(43, 255, 158, 0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(217, 178, 115, 0.045), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grano sutil sobre todo el fondo - la mesa tiene textura, no es un color
   plano. mix-blend-mode hace que se sienta como parte de la superficie, no
   como una capa pegada encima. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { color: var(--text-muted); max-width: 62ch; }

a { color: inherit; }

.mono { font-family: var(--font-mono); }

/* Marcador de cuotas en vivo: la jugada distintiva del sitio. Se aplica
   a todo numero que sea cuota/probabilidad/precio/porcentaje - un solo
   tratamiento repetido con disciplina en vez de dispersar el neon por
   todos lados. */
.cifra-viva {
  font-family: var(--font-mono);
  color: var(--neon);
  text-shadow: 0 0 10px rgba(43, 255, 158, 0.45), 0 0 1px rgba(43, 255, 158, 0.6);
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Navegacion --- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 100;
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
}

.nav__brand span {
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(217, 178, 115, 0.4);
}

.nav__links { display: flex; gap: 28px; align-items: center; }

.nav__links a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.nav__links a:hover { color: var(--text); }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:active { transform: scale(0.98); }

/* Boton principal: ficha de oro sobre la mesa - el unico lugar (junto al
   plan destacado) donde el oro se ve como superficie, no solo como texto. */
.btn--primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #241c0e;
  border-color: var(--gold-dim);
}
.btn--primary:hover {
  box-shadow: 0 0 0 1px var(--gold-dim), 0 6px 20px rgba(217, 178, 115, 0.25);
  filter: brightness(1.04);
}

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--gold-dim); color: var(--gold-bright); }

.btn--block { width: 100%; }

/* --- Hero --- */
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--neon);
  text-shadow: 0 0 8px rgba(43, 255, 158, 0.4);
  margin-bottom: 14px;
}

.hero__cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* --- Tablero de cuotas en vivo (pieza central del hero) ---
   Un solo movimiento orquestado: el barrido de luz que cruza el tablero
   cada pocos segundos, como el reflejo de luz sobre un tablero LED real. */
.board {
  position: relative;
  background: linear-gradient(180deg, #10201a, var(--bg-elevated) 40%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(43, 255, 158, 0.06),
    0 30px 60px -24px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.board__scan {
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(43, 255, 158, 0.06), transparent);
  animation: board-scan 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes board-scan {
  0%   { left: -30%; }
  55%  { left: 110%; }
  100% { left: 110%; }
}
@media (prefers-reduced-motion: reduce) {
  .board__scan { animation: none; display: none; }
}

.board__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.board__titulo { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.board__vivo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--neon);
  text-transform: lowercase;
}
.board__punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px 1px var(--neon);
  animation: board-pulse 1.8s ease-in-out infinite;
}
@keyframes board-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.board__row:nth-child(odd) { background: rgba(255, 255, 255, 0.015); }

.board__match { font-size: 0.92rem; letter-spacing: 0.02em; }
.board__odd {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--neon);
  text-shadow: 0 0 10px rgba(43, 255, 158, 0.5);
  min-width: 3.2ch;
  text-align: right;
}

.board__lock {
  text-align: center;
  padding: 14px 10px 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 6px;
  border-top: 1px dashed var(--line);
}

.hero__prueba {
  display: inline-block;
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 1px;
}
.hero__prueba:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

.seccion__intro { text-align: center; max-width: 560px; margin: 0 auto 8px; }
.seccion__intro h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.seccion__intro p { margin: 0 auto; }

/* --- Tarjetas de membresia: cada una con la identidad de su piedra ---
   El plan destacado se eleva como una mesa VIP bajo un haz de luz dorado,
   en vez de ser un cuadro identico mas con distinto borde. */
.planes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 20px;
  padding: 64px 0 96px;
}

.planes::before {
  content: "";
  position: absolute;
  top: -56px; left: 50%;
  transform: translateX(-50%);
  width: 380px; height: 460px;
  background: radial-gradient(ellipse at top, rgba(217, 178, 115, 0.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .planes { grid-template-columns: 1fr; }
  .plan--destacado { order: -1; transform: none !important; }
}

.plan {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.plan:hover {
  border-color: var(--gema);
  box-shadow: 0 0 0 1px var(--gema), 0 12px 32px -12px var(--gema);
  transform: translateY(-2px);
}

.plan::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gema);
}

.plan--jadeita { --gema: var(--jade); order: 1; }
.plan--azul    { --gema: var(--zafiro); order: 3; }
.plan--rosa    { --gema: var(--rosa); order: 2; }

.plan__gema {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--gema);
  margin-bottom: 18px;
  box-shadow: 0 0 18px -2px var(--gema);
}

.plan__nombre { font-size: 1.3rem; margin-bottom: 2px; }
.plan__precio {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gema);
  text-shadow: 0 0 14px color-mix(in srgb, var(--gema) 55%, transparent);
  margin: 10px 0 20px;
}
.plan__precio small { font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; color: var(--text-muted); text-shadow: none; }

.plan__lista { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.plan__lista li {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--text);
  display: flex;
  gap: 10px;
}

.plan__lista li:last-child { border-bottom: none; }

.plan__lista li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gema);
  margin-top: 7px;
  flex-shrink: 0;
}

.plan .btn--primary { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #241c0e; }
.plan .btn--primary:hover { filter: brightness(1.06); }

/* El plan destacado se marca en ORO (no en el color de su piedra) - el
   oro es la señal aparte de "esta es la recomendada", igual que una mesa
   VIP se distingue por el ribete dorado, no por el color del fieltro. */
.plan--destacado {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 1px var(--gold-dim), 0 24px 60px -20px rgba(217, 178, 115, 0.4);
  transform: translateY(-26px) scale(1.045);
  z-index: 2;
}
.plan--destacado::before { background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright), var(--gold-dim)); }
.plan--destacado:hover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 24px 60px -20px rgba(217, 178, 115, 0.55); transform: translateY(-30px) scale(1.045); }

.plan__badge {
  position: absolute;
  top: 18px; right: 20px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #241c0e;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
}

/* --- Formularios (login / registro) --- */
.auth {
  max-width: 400px;
  margin: 80px auto;
  padding: 0 24px;
}

.form-field { margin-bottom: 16px; }

.form-field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-field input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.form-field input:focus {
  outline: 2px solid var(--neon);
  outline-offset: 1px;
  border-color: transparent;
}

.form-error {
  background: rgba(232, 112, 156, 0.12);
  border: 1px solid var(--rosa-dim);
  color: var(--rosa);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.auth__switch {
  text-align: center;
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.auth__switch a { color: var(--neon); text-decoration: none; }

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Dashboard (estado vacio, sin membresia o sin picks del dia) --- */
.dash-empty {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  margin-top: 24px;
}

/* --- Dashboard: picks del dia --- */
.picks-seccion { margin: 32px 0; }
.picks-seccion h3 { margin-bottom: 14px; }

.aviso-cuotas {
  background: rgba(91, 141, 239, 0.1);
  border: 1px solid rgba(91, 141, 239, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 16px 0 24px;
}

.aviso-incompleto {
  background: rgba(141, 147, 157, 0.1);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 12px 0 20px;
}

.stats-resumen {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  text-align: center;
  margin-top: 20px;
}
.stats-porcentaje {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: var(--neon);
  text-shadow: 0 0 18px rgba(43, 255, 158, 0.4);
}
.stats-detalle {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}
.stats-dias {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.rendimiento-tier { margin: 32px 0; }
.rendimiento-tier h3 { margin-bottom: 14px; }
.rendimiento-semana {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rendimiento-semana__fechas { color: var(--text-muted); font-size: 0.85rem; }
.rendimiento-semana__porcentaje { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--neon); text-shadow: 0 0 10px rgba(43, 255, 158, 0.35); }
.rendimiento-semana__detalle { display: flex; gap: 6px; }
.rendimiento-semana__vacio { color: var(--text-muted); font-size: 0.85rem; }
.rendimiento-cta { text-align: center; margin-top: 32px; }

.historial-dia__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.historial-dia__resumen { display: flex; gap: 8px; flex-wrap: wrap; }

.pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.pick-row__partido { font-weight: 600; }
.pick-row__liga { color: var(--text-muted); font-size: 0.82rem; }
.pick-row__mercado { color: var(--text); font-size: 0.92rem; }
.pick-row__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--neon);
  text-shadow: 0 0 8px rgba(43, 255, 158, 0.35);
}
.pick-row__hora { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.82rem; text-shadow: none; }
.pick-row__casa { color: var(--text-muted); font-size: 0.8rem; }

.resultado-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 100px;
  margin-top: 4px;
}
.resultado-badge--ganada { background: rgba(43, 255, 158, 0.14); color: var(--neon); }
.resultado-badge--perdida { background: rgba(232, 112, 156, 0.15); color: var(--rosa); }
.resultado-badge--pendiente { background: rgba(141, 147, 157, 0.15); color: var(--text-muted); }

.grupo-card {
  background: var(--bg-elevated-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}

.grupo-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.grupo-card__titulo { font-family: var(--font-display); font-weight: 600; }
.grupo-card__combinado { font-family: var(--font-mono); color: var(--gold-bright); font-size: 1.1rem; text-shadow: 0 0 10px rgba(217, 178, 115, 0.4); }

.grupo-card .pick-row { background: transparent; border: none; padding: 8px 0; margin-bottom: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.grupo-card .pick-row:last-child { border-bottom: none; }

/* ============================================================
   Rediseño siguiendo el mockup (sep 2026) - nav con corona,
   tablero con pestañas, fila de caracteristicas, seccion de
   membresias con ambiente de estadio. Fotos reales de jugadores
   y escudos de clubes NO se reproducen (derechos de imagen/marca) -
   se reemplazan por tratamiento grafico (luces, degradados) y el
   mismo criterio de datos ocultos que ya usa el resto del sitio.
   ============================================================ */

.nav__crown {
  width: 20px; height: 14px;
  color: var(--gold);
  margin-right: 8px;
  vertical-align: -2px;
}
.nav__brand { display: inline-flex; align-items: center; }

.nav__avatar {
  display: inline-block;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
}

.nav__salir { padding: 8px 18px; font-size: 0.88rem; }

.hero__punto { color: var(--gold); margin: 0 4px; }
.dorado {
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 40px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 700px 500px at 10% 0%, rgba(43, 255, 158, 0.1), transparent 60%),
    radial-gradient(ellipse 900px 600px at 95% 10%, rgba(217, 178, 115, 0.09), transparent 55%),
    radial-gradient(ellipse 1200px 400px at 50% 100%, rgba(43, 255, 158, 0.05), transparent 70%);
}

.hero__grid {
  padding: 56px 24px 0;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; padding-top: 32px; } }

.btn__icono { width: 16px; height: 11px; margin-right: 6px; vertical-align: -1px; }

/* --- tablero: pestañas + fila liga/partido/1X2 --- */
.board__tabs {
  display: flex;
  gap: 6px;
  padding: 0 2px 14px;
  flex-wrap: wrap;
}
.board__tab {
  font-size: 0.76rem;
  padding: 5px 12px;
  border-radius: 100px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--line);
}
.board__tab--activo {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #241c0e;
  border-color: transparent;
  font-weight: 600;
}

.board__row { display: flex; flex-direction: column; gap: 8px; padding: 13px 12px; }
.board__row-liga { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; color: var(--text-muted); }
.board__row-partido { display: flex; align-items: center; gap: 8px; }
.board__liga-nombre { text-transform: uppercase; letter-spacing: 0.03em; }

.board__cuotas {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.board__cuotas > div {
  flex: 1;
  background: var(--bg-elevated-2);
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
}
.board__cuota-label { display: block; font-size: 0.68rem; color: var(--text-muted); }
.board__cuotas .board__odd { font-size: 0.85rem; }

.board__vacio {
  text-align: center;
  padding: 32px 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- fila de caracteristicas --- */
.features { padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.features__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 760px) { .features__grid { grid-template-columns: repeat(2, 1fr); } }
.feature { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.feature svg { width: 26px; height: 26px; color: var(--gold); }
.feature span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; }

/* --- seccion de membresias: ambiente de estadio --- */
.planes-seccion {
  position: relative;
  overflow: hidden;
  padding: 64px 0 20px;
}
.planes-seccion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 600px 800px at -5% 20%, rgba(43, 255, 158, 0.07), transparent 60%),
    radial-gradient(ellipse 700px 900px at 105% 70%, rgba(217, 178, 115, 0.07), transparent 60%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.008) 0px, rgba(255,255,255,0.008) 1px, transparent 1px, transparent 48px);
}

.seccion__corona { width: 30px; height: 20px; color: var(--gold); margin-bottom: 10px; }

.plan__sub { font-size: 0.8rem; color: var(--gema); font-weight: 600; margin-top: -4px; margin-bottom: 4px; }
.plan--destacado .plan__sub { color: var(--gold-bright); }

.plan__check { color: var(--gema); font-weight: 700; margin-right: 8px; }
.plan--destacado .plan__check { color: var(--gold); }

.plan { padding-bottom: 36px; }
.plan__ribbon {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  background: linear-gradient(90deg, var(--rosa-dim), var(--rosa));
  color: #1a0d12;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 7px 0;
}

/* ===== IMPERIAL V4 — visual parity pass ===== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--font-display:'Barlow Condensed',sans-serif;--font-body:'Inter',sans-serif;--gold:#f0b928;--gold-bright:#ffd76b;--neon:#00e69a;--bg:#020908;--line:rgba(255,211,90,.24);--text:#f7f5ee;--text-muted:#a9b0ad}
body{background:#020807;color:var(--text);font-family:var(--font-body)}
.container{max-width:1280px;padding-left:clamp(18px,4vw,54px);padding-right:clamp(18px,4vw,54px)}
h1,h2,h3,h4,.nav__brand{font-family:var(--font-display);text-transform:uppercase;font-weight:800}
.nav{min-height:72px;padding:12px 0;border-bottom:1px solid rgba(255,205,62,.22)}
.nav__brand{font-size:1.35rem}.nav__crown{width:28px;color:#ffd044}.nav__links{gap:clamp(12px,2vw,30px)}.nav__links a{font-size:.86rem;color:#d2d5d3}.nav__salir{border-color:#e4b51c!important;color:#ffd553!important;padding:10px 18px!important}
.hero{position:relative;min-height:600px;background-image:linear-gradient(90deg,rgba(0,5,4,.96) 0%,rgba(0,5,4,.80) 38%,rgba(0,5,4,.18) 67%,rgba(0,5,4,.38) 100%),url('/static/hero_players.jpg');background-size:cover;background-position:center 42%;border-bottom:1px solid rgba(255,202,49,.32);overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 45%,rgba(255,180,30,.17),transparent 34%);pointer-events:none}.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,580px) 1fr;min-height:600px;align-items:center;padding-top:58px;padding-bottom:58px}.hero__visual{min-height:460px}.hero h1{font-size:clamp(3.8rem,6.1vw,6.6rem);line-height:.84;letter-spacing:-.035em;margin:0 0 24px;max-width:650px}.dorado{color:#f6c84c}.hero p{color:#e3e5e2;font-size:1rem;line-height:1.6}.hero__eyebrow{font-family:var(--font-body);font-weight:800;letter-spacing:.04em;color:#00e99b}.hero__prueba{display:inline-block;margin-top:18px;color:#ffd45a;font-size:.88rem;text-underline-offset:7px}.btn{border-radius:9px;font-family:var(--font-body);font-weight:800}.btn--primary{background:linear-gradient(180deg,#ffe38a,#efb62e);border:1px solid #ffd45a;color:#161000;box-shadow:0 0 24px rgba(255,190,38,.18)}.btn--ghost{border-color:#00bd7f;color:#fff;background:rgba(0,10,8,.45)}
.features{background:rgba(0,7,6,.97);border-top:1px solid rgba(255,204,55,.24);border-bottom:1px solid rgba(255,204,55,.24)}.features__grid{min-height:100px}.feature{color:#ffd45a}.feature span{color:#fff;font-family:var(--font-display);font-weight:700;font-size:.93rem;line-height:1.05;text-transform:uppercase}
.planes-seccion{position:relative;background-image:linear-gradient(rgba(0,12,10,.28),rgba(0,5,4,.48)),url('/static/stadium_trophy.jpg');background-size:cover;background-position:center center;background-attachment:scroll;padding:70px 0 95px}.planes-seccion:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,8,7,.2),rgba(0,7,6,.35));pointer-events:none}.planes-seccion>.container{position:relative;z-index:1}.seccion__intro h2{font-size:clamp(2.7rem,5vw,4.7rem);line-height:.95}.seccion__intro p{color:#f1f1ec}.planes{align-items:end;gap:20px}.plan{background:linear-gradient(180deg,rgba(4,20,16,.94),rgba(1,12,10,.97));border-width:2px!important;border-radius:16px!important;backdrop-filter:blur(7px);box-shadow:0 24px 55px rgba(0,0,0,.45);padding:30px 28px 24px}.plan--jadeita{border-color:#00d990!important;box-shadow:inset 0 0 45px rgba(0,255,156,.05),0 0 28px rgba(0,220,140,.08)}.plan--rosa{border-color:#ff5eaa!important;background:linear-gradient(180deg,rgba(35,8,22,.96),rgba(13,4,10,.98));box-shadow:0 0 0 1px #ffc64a,0 0 30px rgba(255,73,151,.28)}.plan--azul,.plan--zafiro{border-color:#239cff!important;background:linear-gradient(180deg,rgba(5,20,32,.96),rgba(2,11,18,.98))}.plan__nombre{font-family:var(--font-display);font-size:1.8rem;font-weight:800}.plan__sub{font-family:var(--font-display);font-weight:700}.plan__precio{font-family:var(--font-display);font-weight:800;font-size:3.2rem}.plan__lista li{border-color:rgba(255,255,255,.13)}.plan__check{border-radius:50%;font-weight:900}.plan__badge,.plan__ribbon{font-family:var(--font-display);font-weight:800;text-transform:uppercase}
/* internal modules */
.internal-page{min-height:calc(100vh - 120px);padding:0 0 80px;background:linear-gradient(180deg,rgba(0,5,4,.12),#020807 330px),url('/static/hero_players.jpg') top center/100% 360px no-repeat}.internal-hero{padding:72px 0 54px;max-width:760px}.internal-hero h1{font-size:clamp(3.2rem,7vw,5.7rem);line-height:.88;margin:0 0 15px}.internal-hero p{color:#e0e3e0;font-size:1rem}.internal-kicker{color:#00e69a;font-size:.78rem;font-weight:800;letter-spacing:.12em;margin-bottom:12px}.picks-seccion,.rendimiento-tier,.stats-resumen,.dash-empty,.aviso-cuotas,.aviso-incompleto{background:linear-gradient(180deg,rgba(4,22,18,.94),rgba(2,12,10,.98));border:1px solid rgba(0,220,150,.30);border-radius:14px;box-shadow:0 18px 45px rgba(0,0,0,.25)}.picks-seccion{padding:22px;margin:0 0 20px}.picks-seccion h3,.rendimiento-tier h3{color:#fff;font-size:1.5rem}.pick-row{background:rgba(0,5,4,.42);border:1px solid rgba(255,255,255,.09)!important;border-radius:10px;margin:10px 0;padding:16px!important}.pick-row:hover{border-color:rgba(255,201,55,.38)!important}.pick-row__partido{font-weight:800;color:#fff}.pick-row__liga,.pick-row__mercado,.pick-row__casa,.pick-row__hora{color:#9da9a5}.pick-row__meta span{background:#003f31;color:#00f0a3;border:1px solid rgba(0,240,163,.18);border-radius:6px;padding:5px 8px}.resultado-badge{border-radius:6px;font-weight:800}.resultado-badge--ganada{background:#004d38;color:#13f0a5}.resultado-badge--perdida{background:#4b1222;color:#ff678d}.resultado-badge--pendiente{background:#4a3b0b;color:#ffd253}.grupo-card{border:1px solid rgba(255,201,55,.28);border-radius:12px;background:rgba(16,12,2,.36)}.historial-dia__header{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:12px}.stats-resumen{padding:28px}.stats-porcentaje{font-family:var(--font-display);font-size:5rem;color:#00e69a;font-weight:800}.rendimiento-tier{padding:24px;margin-bottom:18px}.rendimiento-semana{border:1px solid rgba(255,255,255,.09)!important;background:rgba(0,5,4,.45);border-radius:10px}.rendimiento-semana__porcentaje{color:#00e69a!important;font-family:var(--font-display);font-size:2.2rem;font-weight:800}
.footer{border-top:1px solid rgba(255,202,49,.15)}
@media(max-width:900px){.nav{align-items:flex-start}.nav__links{flex-wrap:wrap;justify-content:flex-end}.hero{background-position:60% center}.hero__grid{grid-template-columns:1fr;min-height:650px}.hero__visual{display:none}.hero__grid>div:first-child{max-width:620px}.hero h1{font-size:clamp(3.3rem,12vw,5.5rem)}.planes{grid-template-columns:1fr;max-width:620px;margin-inline:auto}.plan--destacado{transform:none}.features__grid{grid-template-columns:repeat(2,1fr)}.internal-page{background-size:auto 320px}}
@media(max-width:620px){.container{padding-left:18px;padding-right:18px}.nav{min-height:auto}.nav__brand{font-size:1rem}.nav__links{gap:8px}.nav__links a:not(.nav__salir){font-size:.72rem}.nav__salir{padding:7px 10px!important;font-size:.72rem}.hero{min-height:670px;background-image:linear-gradient(90deg,rgba(0,5,4,.96),rgba(0,5,4,.72)),url('/static/hero_players.jpg');background-position:58% center}.hero__grid{padding-top:48px;padding-bottom:48px}.hero p{font-size:.9rem}.features__grid{grid-template-columns:1fr 1fr}.feature{padding:14px 4px}.planes-seccion{background-position:52% center}.internal-hero{padding:54px 0 38px}.pick-row{grid-template-columns:1fr!important;gap:12px}.pick-row>div:last-child{text-align:left!important}.footer{flex-direction:column;gap:6px}}

/* =========================================================
   PRONOSTICO IMPERIAL V5 — visual refinement only
   ========================================================= */
.hero{min-height:560px;background-image:linear-gradient(90deg,rgba(0,5,4,.95) 0%,rgba(0,5,4,.76) 38%,rgba(0,5,4,.08) 68%,rgba(0,5,4,.20) 100%),url('/static/hero_players.jpg');background-size:cover;background-position:center 38%}
.hero__grid{min-height:560px;padding-top:44px;padding-bottom:44px}
.hero h1{font-size:clamp(3rem,4.65vw,5.25rem);line-height:.90;letter-spacing:-.03em;max-width:590px;margin-bottom:22px}
.hero p{max-width:540px}

/* Lower half is now a clean photographic layer only. No membership screenshot. */
.planes-seccion{background-image:linear-gradient(180deg,rgba(0,10,8,.18),rgba(0,5,4,.42)),url('/static/stadium_clean.jpg');background-size:cover;background-position:center 45%;background-repeat:no-repeat}

/* Internal modules use a dedicated clean header photo, never the home hero screenshot. */
.internal-page{background:#020807!important;position:relative}
.internal-page:before{content:"";display:block;position:absolute;left:0;right:0;top:0;height:310px;background-image:linear-gradient(90deg,rgba(0,5,4,.90),rgba(0,5,4,.38),rgba(0,5,4,.72)),url('/static/internal_header.jpg');background-size:cover;background-position:center 42%;background-repeat:no-repeat;border-bottom:1px solid rgba(255,201,55,.20);z-index:0}
.internal-page>.container{position:relative;z-index:1}
.internal-hero{min-height:310px;display:flex;flex-direction:column;justify-content:center;padding:46px 0 38px;max-width:720px}
.internal-hero h1{font-size:clamp(2.8rem,5.2vw,4.8rem);line-height:.9}

@media(max-width:900px){
 .hero{min-height:600px;background-position:58% center}
 .hero__grid{min-height:600px}
 .hero h1{font-size:clamp(2.85rem,8vw,4.6rem);max-width:540px}
 .planes-seccion{background-position:58% center}
 .internal-page:before{height:270px;background-position:58% center}
 .internal-hero{min-height:270px}
}
@media(max-width:620px){
 .hero{min-height:620px;background-image:linear-gradient(90deg,rgba(0,5,4,.97),rgba(0,5,4,.62)),url('/static/hero_players.jpg');background-position:62% center}
 .hero__grid{min-height:620px;padding-top:38px;padding-bottom:38px}
 .hero h1{font-size:clamp(2.65rem,13vw,4rem);line-height:.92;max-width:94%}
 .planes-seccion{background-position:66% center;background-attachment:scroll}
 .internal-page:before{height:235px;background-position:62% center}
 .internal-hero{min-height:235px;padding:32px 0 26px}
 .internal-hero h1{font-size:clamp(2.5rem,12vw,3.7rem)}
}

/* ===== V6 IMAGE CORRECTION =====
   Dedicated photographic assets only. No UI/membership screenshot is used as a background. */
.hero{
  background-image:linear-gradient(90deg,rgba(0,5,4,.96) 0%,rgba(0,5,4,.76) 36%,rgba(0,5,4,.10) 67%,rgba(0,5,4,.18) 100%),url('/static/hero_players.jpg')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.planes-seccion{
  background-image:linear-gradient(180deg,rgba(0,10,8,.20),rgba(0,5,4,.38)),url('/static/stadium_clean.jpg')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}
@media (max-width:900px){
  .hero{background-position:60% center!important;}
  .planes-seccion{background-position:center center!important;}
}
@media (max-width:620px){
  .hero{background-position:63% center!important;}
  .planes-seccion{background-position:52% center!important;}
}

/* =========================================================
   PRONOSTICO IMPERIAL V7 — compact typography + mockup parity
   Front-end only. No engine/data logic changes.
   ========================================================= */
:root{
  --display:'Barlow Condensed',Arial Narrow,sans-serif;
  --body:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body{font-family:var(--body);font-size:14px;line-height:1.48;letter-spacing:-.006em}
.container{max-width:1240px}
.nav{min-height:60px;padding:8px 0}.nav__brand{font-family:var(--display);font-size:1.18rem;letter-spacing:.005em}.nav__crown{width:25px}.nav__links{gap:clamp(12px,1.7vw,24px)}.nav__links a{font-size:.78rem;font-weight:500}.nav__salir{padding:8px 15px!important;font-size:.76rem!important;border-radius:7px!important}
.hero{min-height:510px!important}.hero__grid{min-height:510px!important;grid-template-columns:minmax(0,520px) 1fr!important;padding-top:34px!important;padding-bottom:34px!important}.hero h1{font-family:var(--display);font-size:clamp(2.8rem,4.15vw,4.65rem)!important;line-height:.88!important;letter-spacing:-.022em!important;max-width:520px!important;margin-bottom:16px!important}.hero__eyebrow{font-size:.72rem!important;letter-spacing:.055em!important;margin-bottom:9px}.hero p{font-size:.86rem!important;line-height:1.55!important;max-width:500px!important;margin-bottom:18px}.hero__cta{gap:10px}.btn{font-size:.79rem;padding:10px 16px;border-radius:7px}.hero__prueba{font-size:.75rem!important;margin-top:13px!important}.features__grid{min-height:72px!important}.feature{gap:7px!important;padding:10px 8px}.feature svg{width:23px!important;height:23px!important}.feature span{font-size:.72rem!important;line-height:1.08!important;letter-spacing:.01em!important}
.planes-seccion{padding:42px 0 34px!important;background-position:center 48%!important}.seccion__corona{width:24px;height:16px;margin-bottom:6px}.seccion__intro{margin-bottom:25px}.seccion__intro h2{font-size:clamp(2.1rem,3.5vw,3.35rem)!important;line-height:.92!important;margin-bottom:8px}.seccion__intro p{font-size:.8rem;max-width:520px;margin-inline:auto}.planes{gap:14px!important;max-width:1040px;margin-inline:auto}.plan{padding:22px 20px 20px!important;border-radius:12px!important;min-height:0!important}.plan__gema{width:38px!important;height:38px!important;margin-bottom:9px!important}.plan__nombre{font-size:1.42rem!important;line-height:1!important}.plan__sub{font-size:.68rem!important;margin-top:2px!important;margin-bottom:9px!important}.plan__precio{font-size:2.55rem!important;line-height:1!important;margin:9px 0 14px!important}.plan__precio small{font-family:var(--body);font-size:.68rem!important;font-weight:500}.plan__lista{margin:0 0 16px!important}.plan__lista li{font-size:.76rem!important;line-height:1.3!important;padding:8px 0!important}.plan__check{font-size:.74rem;margin-right:7px!important}.plan .btn{padding:10px 12px!important;font-size:.76rem!important}.plan__badge{font-size:.67rem!important;padding:6px 10px!important}.plan__ribbon{font-size:.67rem!important;padding:5px 0!important}
/* Bottom proof area shown in the approved mockup. */
.proof-band{position:relative;overflow:hidden;background-image:linear-gradient(180deg,rgba(0,8,7,.48),rgba(0,5,4,.82)),url('/static/stadium_clean.jpg');background-size:cover;background-position:center 78%;border-top:1px solid rgba(255,202,49,.18)}
.proof-band__grid{min-height:185px;display:grid;grid-template-columns:1fr 260px 1fr;align-items:center;gap:28px;padding-top:22px;padding-bottom:0}.proof-card{display:flex;gap:15px;align-items:center}.proof-card h3{font-family:var(--display);font-size:1.35rem;line-height:.98;margin:0 0 7px;text-transform:uppercase}.proof-card p{font-size:.72rem;line-height:1.45;color:#d5d9d6;max-width:245px;margin:0 0 8px}.proof-card a{color:#ffd24e;font-size:.72rem;font-weight:700}.proof-icon{flex:0 0 42px;width:42px;height:42px;border:1px solid #00d99a;border-radius:50%;display:grid;place-items:center;color:#00efa7;font-size:1.2rem;background:rgba(0,30,22,.68);box-shadow:0 0 22px rgba(0,230,154,.12)}.proof-icon--gold{border-color:#d7a727;color:#ffd252;background:rgba(39,28,0,.58)}
.proof-phone{align-self:end;width:240px;min-height:150px;margin-inline:auto;padding:11px 12px 0;border:2px solid #7d8581;border-bottom:0;border-radius:22px 22px 0 0;background:linear-gradient(180deg,#06100e,#020807);box-shadow:0 0 0 2px #111,0 -8px 30px rgba(0,0,0,.55);color:#fff}.proof-phone__top{font-family:var(--display);font-size:.66rem;font-weight:800;color:#ffd34f;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.1)}.proof-phone__tabs{display:flex;gap:4px;padding:7px 0}.proof-phone__tabs span{font-size:.5rem;padding:3px 5px;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:#bec7c3}.proof-phone__label{font-size:.58rem;color:#d8dedb}.proof-phone__metric{display:flex;align-items:baseline;gap:12px}.proof-phone__metric strong{font-family:var(--display);font-size:2rem;line-height:1}.proof-phone__metric em{font-family:var(--display);font-size:1.05rem;font-style:normal;font-weight:800;color:#00e69a}.proof-phone__chart{width:100%;height:45px;color:#00e69a;margin-top:3px}
/* Internal pages: smaller, more dashboard-like typography. */
.internal-hero{min-height:250px!important;padding:36px 0 28px!important}.internal-page:before{height:250px!important}.internal-kicker{font-size:.66rem!important}.internal-hero h1{font-size:clamp(2.35rem,4.1vw,3.8rem)!important;line-height:.92!important;margin-bottom:9px!important}.internal-hero p{font-size:.82rem!important;max-width:650px}.picks-seccion{padding:17px!important}.picks-seccion h3,.rendimiento-tier h3{font-size:1.22rem!important}.pick-row{padding:12px!important;margin:7px 0!important}.pick-row__partido{font-size:.84rem}.pick-row__liga{font-size:.68rem!important}.pick-row__mercado{font-size:.76rem!important}.pick-row__meta{font-size:.72rem}.pick-row__meta span{padding:4px 6px!important}.pick-row__casa,.pick-row__hora{font-size:.67rem!important}.resultado-badge{font-size:.66rem!important;padding:4px 7px!important}.stats-resumen{padding:20px!important}.stats-porcentaje{font-size:3.7rem!important}.rendimiento-tier{padding:18px!important}.rendimiento-semana__porcentaje{font-size:1.75rem!important}
@media(max-width:900px){.hero{min-height:560px!important}.hero__grid{min-height:560px!important}.hero h1{font-size:clamp(2.7rem,7.5vw,4.2rem)!important}.planes{max-width:560px}.proof-band__grid{grid-template-columns:1fr 220px 1fr;gap:16px}.proof-phone{width:210px}.proof-card h3{font-size:1.15rem}.internal-page:before,.internal-hero{min-height:220px!important;height:220px!important}}
@media(max-width:680px){.nav__links a:not(.nav__salir){font-size:.66rem!important}.hero{min-height:570px!important}.hero__grid{min-height:570px!important;padding-top:30px!important;padding-bottom:30px!important}.hero h1{font-size:clamp(2.45rem,11.5vw,3.55rem)!important;max-width:92%!important}.hero p{font-size:.78rem!important;max-width:90%!important}.features__grid{min-height:auto!important}.feature span{font-size:.62rem!important}.planes-seccion{padding-top:34px!important}.plan{padding:20px 18px!important}.proof-band__grid{grid-template-columns:1fr;gap:18px;padding-top:28px;padding-bottom:0}.proof-card{max-width:360px;margin-inline:auto;width:100%}.proof-phone{order:3;width:235px}.proof-card--right{order:2}.proof-card--left{order:1}.internal-page:before{height:205px!important}.internal-hero{min-height:205px!important;height:auto!important;padding:28px 0 22px!important}.internal-hero h1{font-size:clamp(2.2rem,10vw,3rem)!important}}
\n\n/* =========================================================\n   PRONOSTICO IMPERIAL V8 — mobile navigation organization\n   Desktop remains unchanged; mobile uses a clean horizontal icon row.\n   ========================================================= */\n.nav__icon{display:none}\n@media (max-width:680px){\n  .container:has(.nav){padding-left:0!important;padding-right:0!important}\n  .nav{\n    display:grid!important;\n    grid-template-columns:1fr auto;\n    align-items:center;\n    min-height:0!important;\n    padding:0!important;\n    border-bottom:1px solid rgba(255,205,62,.22);\n    background:rgba(1,8,7,.98);\n  }\n  .nav__brand{\n    min-height:58px;\n    padding:0 16px;\n    display:flex;\n    align-items:center;\n    font-size:1.08rem!important;\n  }\n  .nav__crown{width:25px!important;margin-right:7px}\n  .nav__links{\n    grid-column:1 / -1;\n    width:100%;\n    display:grid!important;\n    grid-template-columns:repeat(5,minmax(0,1fr));\n    gap:0!important;\n    border-top:1px solid rgba(255,255,255,.08);\n    background:rgba(1,10,9,.96);\n    overflow:visible;\n  }\n  .nav__links .nav__item{\n    min-width:0;\n    min-height:68px;\n    padding:8px 3px 7px!important;\n    display:flex!important;\n    flex-direction:column;\n    align-items:center;\n    justify-content:center;\n    gap:4px;\n    text-align:center;\n    border:0!important;\n    border-right:1px solid rgba(255,255,255,.08)!important;\n    border-radius:0!important;\n    background:transparent!important;\n    box-shadow:none!important;\n    color:#e8eae8!important;\n    font-family:var(--display);\n    font-size:.66rem!important;\n    font-weight:600!important;\n    line-height:1.02!important;\n    white-space:normal;\n  }\n  .nav__links .nav__item:last-child{border-right:0!important}\n  .nav__links .nav__item:hover,\n  .nav__links .nav__item:focus{\n    color:#ffd34f!important;\n    background:rgba(255,199,55,.045)!important;\n  }\n  .nav__icon{\n    display:block;\n    height:21px;\n    font-family:Arial,sans-serif;\n    font-size:1.18rem;\n    line-height:21px;\n    color:#f6f3e9;\n  }\n  .nav__salir{color:#e8eae8!important}\n  .nav__salir .nav__icon{color:#f6f3e9}\n}\n@media (max-width:390px){\n  .nav__brand{font-size:1rem!important;padding-left:12px}\n  .nav__links .nav__item{font-size:.59rem!important;padding-inline:2px!important;min-height:66px}\n  .nav__icon{font-size:1.08rem}\n}\n
/* =========================================================
   PRONOSTICO IMPERIAL V9 — mobile alignment + desktop scale
   Presentation only. No engine/data behavior changes.
   ========================================================= */

/* Keep a single stadium/ball/trophy composition on the page. */
.proof-band{
  background-image:
    radial-gradient(ellipse 520px 220px at 50% 100%, rgba(240,185,40,.10), transparent 70%),
    linear-gradient(180deg, rgba(1,12,10,.96), #020807) !important;
  background-color:#020807 !important;
}

/* Desktop: restore a stronger, fuller dashboard scale. */
@media (min-width:1000px){
  body{font-size:15px;}
  .container{max-width:1360px;}
  .nav{min-height:68px;padding:10px 0;}
  .nav__brand{font-size:1.32rem;}
  .nav__links a{font-size:.86rem;}
  .nav__salir{font-size:.84rem!important;padding:9px 18px!important;}

  .hero{min-height:565px!important;}
  .hero__grid{
    min-height:565px!important;
    grid-template-columns:minmax(0,590px) 1fr!important;
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
  .hero h1{font-size:clamp(3.45rem,4.65vw,5.25rem)!important;max-width:590px!important;}
  .hero p{font-size:.96rem!important;max-width:555px!important;}
  .hero__eyebrow{font-size:.78rem!important;}
  .btn{font-size:.86rem;padding:11px 18px;}
  .hero__prueba{font-size:.82rem!important;}

  .features__grid{min-height:88px!important;}
  .feature span{font-size:.80rem!important;}
  .feature svg{width:26px!important;height:26px!important;}

  .planes-seccion{padding:52px 0 46px!important;background-size:cover!important;background-repeat:no-repeat!important;background-position:center 50%!important;}
  .seccion__intro{max-width:650px;margin-bottom:30px;}
  .seccion__intro h2{font-size:clamp(2.75rem,3.7vw,4rem)!important;}
  .seccion__intro p{font-size:.9rem!important;max-width:600px;}
  .planes{max-width:1180px;gap:20px!important;}
  .plan{padding:27px 25px 24px!important;}
  .plan__gema{width:44px!important;height:44px!important;}
  .plan__nombre{font-size:1.65rem!important;}
  .plan__sub{font-size:.74rem!important;}
  .plan__precio{font-size:2.95rem!important;}
  .plan__lista li{font-size:.84rem!important;padding:9px 0!important;}
  .plan .btn{font-size:.83rem!important;padding:11px 14px!important;}

  .proof-band__grid{min-height:200px;grid-template-columns:1fr 280px 1fr;}
  .proof-phone{width:260px;}
  .proof-card h3{font-size:1.5rem;}
  .proof-card p{font-size:.79rem;max-width:280px;}

  .internal-hero{min-height:285px!important;padding:44px 0 32px!important;max-width:820px;}
  .internal-page:before{height:285px!important;}
  .internal-hero h1{font-size:clamp(2.8rem,4.4vw,4.4rem)!important;}
  .internal-hero p{font-size:.92rem!important;}
  .picks-seccion{padding:22px!important;}
  .picks-seccion h3,.rendimiento-tier h3{font-size:1.42rem!important;}
  .pick-row{padding:15px!important;}
  .pick-row__partido{font-size:.92rem;}
  .pick-row__mercado{font-size:.83rem!important;}
  .stats-resumen{padding:25px!important;}
  .stats-porcentaje{font-size:4.3rem!important;}
}

/* Mobile: every navigation/module name is centered and evenly distributed. */
@media (max-width:680px){
  .nav__brand{
    grid-column:1 / -1!important;
    width:100%;
    justify-content:center!important;
    text-align:center!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .nav__links{
    grid-column:1 / -1!important;
    justify-items:stretch;
    align-items:stretch;
  }
  .nav__links > a{
    min-width:0!important;
    min-height:64px;
    margin:0!important;
    padding:9px 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    border-radius:0!important;
    white-space:normal!important;
    line-height:1.08!important;
  }
  /* Logged-in navigation: icon above centered title. */
  .nav__links > .nav__item{
    flex-direction:column!important;
    gap:4px!important;
  }
  /* Public navigation (Membresias / Rendimiento / Iniciar sesion / Crear cuenta). */
  .nav__links > a:not(.nav__item){
    font-family:var(--display)!important;
    font-size:.72rem!important;
    font-weight:700!important;
    color:#e8eae8!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
  }
  .nav__links > a:not(.nav__item):last-child{border-right:0!important;}
  .nav__links:has(> a:not(.nav__item)){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .nav__links:has(> .nav__item){
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
  }
  .nav__salir{border:0!important;background:transparent!important;box-shadow:none!important;}

  .seccion__intro,
  .internal-hero,
  .auth{
    text-align:center!important;
  }
  .internal-hero{margin-left:auto!important;margin-right:auto!important;}
  .internal-hero p{margin-left:auto;margin-right:auto;}
  .auth h1,.auth h2,.auth h3{width:100%;text-align:center!important;}
}

/* =========================================================
   PRONOSTICO IMPERIAL V10 — responsive layout stabilization
   One continuous lower stadium image + explicit mobile nav.
   Presentation only.
   ========================================================= */

/* One continuous image for memberships + proof area. */
.stadium-zone{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(0,10,8,.20) 0%,rgba(0,7,6,.30) 48%,rgba(0,7,6,.50) 100%),
    url('/static/stadium_clean.jpg') center center / cover no-repeat;
  border-top:1px solid rgba(255,205,62,.16);
  overflow:hidden;
}
.stadium-zone::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,8,7,.16),transparent 30%,transparent 70%,rgba(0,8,7,.16));
}
.stadium-zone .planes-seccion,
.stadium-zone .proof-band{
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  background-attachment:scroll!important;
}
.stadium-zone .proof-band{
  border-top:1px solid rgba(255,205,62,.18);
  box-shadow:inset 0 20px 40px rgba(0,8,7,.12);
}

/* Explicit public/private nav classes: avoids browser-dependent :has(). */
@media (max-width:680px){
  .container:has(.nav){padding-left:0!important;padding-right:0!important}
  .nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%;
    min-height:0!important;
    padding:0!important;
    background:rgba(1,8,7,.985);
  }
  .nav__brand{
    grid-column:1!important;
    width:100%!important;
    min-height:58px!important;
    justify-content:center!important;
    text-align:center!important;
    padding:0 14px!important;
    margin:0!important;
  }
  .nav__links{
    grid-column:1!important;
    width:100%!important;
    margin:0!important;
    gap:0!important;
    display:grid!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(1,10,9,.97);
  }
  .nav__links--public{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .nav__links--private{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
  .nav__public-item,
  .nav__links--private .nav__item{
    width:100%!important;
    min-width:0!important;
    min-height:62px!important;
    margin:0!important;
    padding:8px 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    line-height:1.08!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#e8eae8!important;
    font-family:var(--display)!important;
    font-size:.68rem!important;
    font-weight:700!important;
  }
  .nav__links--private .nav__item{flex-direction:column!important;gap:4px!important;}
  .nav__links > a:last-child{border-right:0!important;}
  .nav__public-item:hover,.nav__public-item:focus,
  .nav__links--private .nav__item:hover,.nav__links--private .nav__item:focus{
    color:#ffd34f!important;
    background:rgba(255,199,55,.045)!important;
  }
  .nav__salir{border:0!important;background:transparent!important;}

  .stadium-zone{
    background-position:52% center;
    background-size:auto 100%;
  }
  .stadium-zone .planes-seccion{padding-top:36px!important;padding-bottom:32px!important;}
  .stadium-zone .proof-band__grid{padding-top:26px!important;}
}

/* Tablet: preserve breathing room and a single lower image. */
@media (min-width:681px) and (max-width:999px){
  .container{max-width:860px;}
  .nav{gap:16px;}
  .nav__links{gap:12px!important;}
  .nav__links a{font-size:.74rem!important;}
  .hero h1{font-size:clamp(3rem,7vw,4.3rem)!important;}
  .stadium-zone{background-position:center center;background-size:cover;}
  .planes{max-width:620px!important;}
  .proof-band__grid{grid-template-columns:1fr 220px 1fr!important;gap:18px!important;}
}

/* Laptop/desktop: fill the canvas without oversized dead zones. */
@media (min-width:1000px){
  .stadium-zone{background-position:center 54%;background-size:cover;}
  .planes-seccion{padding-bottom:42px!important;}
  .proof-band__grid{min-height:205px!important;}
}

@media (max-width:390px){
  .nav__brand{font-size:.98rem!important;min-height:54px!important;}
  .nav__public-item,.nav__links--private .nav__item{font-size:.60rem!important;min-height:58px!important;padding:7px 2px!important;}
}


/* V11 — gemstone visuals and separated popular badge */
.plan__gema{
  width:82px!important;height:82px!important;
  border-radius:0!important;background:transparent!important;
  box-shadow:none!important;margin:0 0 10px!important;
  display:flex;align-items:center;justify-content:center;overflow:visible!important;
}
.plan__gema img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 0 12px var(--gema)) saturate(1.15) contrast(1.06);
  mix-blend-mode:screen;
}
.plan--rosa .plan__badge{
  top:-15px!important;left:50%!important;right:auto!important;
  transform:translateX(-50%)!important;min-width:112px;
  justify-content:center;z-index:5;
  background:linear-gradient(180deg,#ff6eb4,#e93c91)!important;
  color:#18040d!important;border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:0 6px 18px rgba(255,61,148,.30)!important;
}
.plan--rosa .plan__badge svg{display:none!important;}
.plan__ribbon{display:none!important;}

@media (max-width:900px){
  .plan__gema{width:72px!important;height:72px!important;margin-inline:auto!important;}
}
@media (max-width:640px){
  .plan__gema{width:68px!important;height:68px!important;}
  .plan--rosa .plan__badge{top:-13px!important;font-size:.62rem!important;min-width:102px;}
}


/* =========================================================
   V12 — mobile seam removal + visible "Más popular" badge
   ========================================================= */

/* The pink badge must sit completely above the Rosa card and never be clipped. */
.plan--rosa{
  position:relative;
  overflow:visible !important;
  margin-top:18px;
}
.plan--rosa .plan__badge{
  position:absolute !important;
  top:-18px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  min-width:124px !important;
  height:30px !important;
  padding:0 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  z-index:50 !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.03em !important;
  color:#18040d !important;
  background:linear-gradient(180deg,#ff79bc 0%,#ef4d9d 100%) !important;
  border:1px solid rgba(255,255,255,.5) !important;
  border-radius:999px !important;
  box-shadow:0 5px 18px rgba(255,61,148,.38) !important;
}

/* Prevent wrappers from cropping the badge. */
.planes,
.planes-grid,
.planes__grid,
.memberships,
.membership-grid,
.planes-section,
.memberships-section{
  overflow:visible !important;
}

/* Remove the thin horizontal seam that can appear between the responsive
   lower-background sections on mobile/tablet. The visual remains one
   continuous stadium composition. */
@media (max-width: 900px){
  .plan--rosa{margin-top:20px !important;}
  .plan--rosa .plan__badge{
    top:-17px !important;
    min-width:116px !important;
    height:28px !important;
    padding:0 14px !important;
    font-size:.68rem !important;
  }

  /* Eliminate borders/seams between the lower photographic blocks. */
  .planes-section,
  .memberships-section,
  .performance-section,
  .rendimiento-section,
  .bottom-performance,
  .home-bottom,
  .planes-wrap,
  .performance-wrap{
    border-top:0 !important;
    border-bottom:0 !important;
    outline:0 !important;
    box-shadow:none;
  }

  /* Avoid a one-pixel gap caused by fractional viewport scaling. */
  .performance-section,
  .rendimiento-section,
  .bottom-performance,
  .home-bottom{
    margin-top:-2px !important;
  }
}

@media (max-width: 640px){
  .plan--rosa{margin-top:22px !important;}
  .plan--rosa .plan__badge{
    top:-16px !important;
    min-width:110px !important;
    height:27px !important;
    padding:0 13px !important;
    font-size:.66rem !important;
  }
}


/* V13 — continuous lower composition, transparent gems, premium gold nav icons */
.stadium-zone{border-top:0!important;background-color:#06110b!important;}
.stadium-zone .planes-seccion,.stadium-zone .proof-band{border:0!important;outline:0!important;box-shadow:none!important;}
.stadium-zone .proof-band{margin-top:-1px!important;}
@media(max-width:999px){
  .stadium-zone{background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
  .stadium-zone .proof-band{margin-top:-3px!important;border-top:0!important;}
  .stadium-zone .proof-band:before,.stadium-zone .proof-band:after,.stadium-zone .planes-seccion:before,.stadium-zone .planes-seccion:after{border:0!important;box-shadow:none!important;}
}
.plan__gema{background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important;}
.plan__gema img{display:none!important;}
.gem-svg{width:100%;height:100%;display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px currentColor);}
.gem-svg .gem-main{fill:url(#gem-jadeita);fill-opacity:.78;stroke-width:2.3}.plan__gema--rosa .gem-main{fill:url(#gem-rosa)}.plan__gema--azul .gem-main{fill:url(#gem-azul)}
.gem-svg .gem-shine{fill:#fff;fill-opacity:.22;stroke:none}.plan__gema--jadeita{color:#00f0a7}.plan__gema--rosa{color:#ff4da0}.plan__gema--azul{color:#1da8ff}
.nav__icon-svg{display:block!important;width:22px!important;height:22px!important;color:#f4c84c!important;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(244,200,76,.22));}
.nav__links--private .nav__item:hover .nav__icon-svg,.nav__links--private .nav__item:focus .nav__icon-svg{color:#ffe17a!important;filter:drop-shadow(0 0 7px rgba(255,209,72,.45));}
@media(min-width:681px){.nav__links--private .nav__item{display:flex;align-items:center;gap:7px}.nav__icon-svg{width:18px!important;height:18px!important;}}
@media(max-width:680px){.nav__icon-svg{width:21px!important;height:21px!important;margin:0 auto 2px!important}.nav__links--private .nav__item{gap:5px!important}}


/* =========================================================
   V14 — premium Imperial crown + subscription checkout
   ========================================================= */
.nav__crown--real{width:38px!important;height:30px!important;object-fit:contain!important;color:transparent!important;filter:drop-shadow(0 0 7px rgba(255,194,35,.45));}
.planes-seccion__crown--real{display:block;width:48px;height:36px;object-fit:contain;margin:0 auto 4px;filter:drop-shadow(0 0 9px rgba(255,194,35,.5));}

.checkout-page{
  position:relative; isolation:isolate; min-height:calc(100vh - 110px);
  padding:24px 0 34px; background:#020908 url('/static/stadium_trophy.jpg') center 56%/cover no-repeat fixed;
}
.checkout-page__shade{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(circle at 50% 20%,rgba(255,183,31,.08),transparent 35%),
  linear-gradient(90deg,rgba(0,8,8,.83),rgba(1,10,10,.58) 48%,rgba(0,7,7,.84)),
  linear-gradient(180deg,rgba(0,8,8,.5),rgba(0,7,6,.74));}
.checkout-shell{max-width:1120px!important;}
.checkout-steps{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 22px;color:#a8b0ad;font-family:var(--display);font-weight:700;font-size:.82rem}
.checkout-steps i{display:block;width:90px;height:1px;background:rgba(255,255,255,.24)}
.checkout-step{display:flex;align-items:center;gap:8px}.checkout-step span{width:27px;height:27px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center}
.checkout-step--active{color:#ffd44f}.checkout-step--active span{color:#10100a;background:#ffd44f;border-color:#ffd44f;box-shadow:0 0 15px rgba(255,205,56,.3)}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);gap:22px;align-items:stretch}
.checkout-plan,.checkout-payment{border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}
.checkout-plan{padding:26px;border:2px solid var(--checkout-accent);background:linear-gradient(145deg,var(--checkout-wash),rgba(2,12,12,.93) 72%);box-shadow:0 0 28px var(--checkout-glow),inset 0 0 35px rgba(255,255,255,.015)}
.checkout-page--jadeita{--checkout-accent:#00e5a1;--checkout-wash:rgba(0,100,70,.24);--checkout-glow:rgba(0,229,161,.13)}
.checkout-page--rosa{--checkout-accent:#ff5aa8;--checkout-wash:rgba(105,0,48,.28);--checkout-glow:rgba(255,70,151,.17)}
.checkout-page--azul{--checkout-accent:#24aaff;--checkout-wash:rgba(0,58,105,.26);--checkout-glow:rgba(36,170,255,.15)}
.checkout-plan__top{display:flex;align-items:center;justify-content:center;gap:8px;color:#f4f4ef;text-transform:uppercase;letter-spacing:.08em;font-family:var(--display);font-size:.82rem}
.checkout-crown{width:34px;height:26px;filter:drop-shadow(0 0 8px rgba(255,202,53,.45))}
.checkout-plan__hero{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:center;margin:18px 0 14px}
.checkout-gem{width:180px;height:180px;color:var(--checkout-accent);display:grid;place-items:center;filter:drop-shadow(0 0 16px var(--checkout-accent))}
.checkout-gem .gem-svg{width:100%;height:100%}.checkout-gem .gem-main{fill:color-mix(in srgb,var(--checkout-accent) 72%,#071310)!important}
.checkout-plan__info h1{margin:0;font-family:var(--display);font-size:2.15rem;text-transform:uppercase;line-height:.96;color:#f6f5ef}
.checkout-plan__tag{margin-top:7px;color:var(--checkout-accent);font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em}
.checkout-plan__price{margin-top:14px;color:var(--checkout-accent);font-family:var(--display);font-size:2.25rem;font-weight:900}.checkout-plan__price small{font-size:.75rem;color:#eef1ef;font-weight:500}
.checkout-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:15px 0 22px;padding:0;list-style:none}
.checkout-benefits li{font-size:.82rem;color:#e5e9e6}.checkout-benefits b{display:inline-grid;place-items:center;width:19px;height:19px;margin-right:7px;border-radius:50%;background:var(--checkout-accent);color:#04100c}
.checkout-plan__metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(0,0,0,.2)}
.checkout-plan__metrics>div{padding:14px 8px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}.checkout-plan__metrics>div:last-child{border:0}
.checkout-plan__metrics span{display:block;color:#ffd34f;font-size:1.45rem}.checkout-plan__metrics img{display:block;width:30px;height:23px;margin:0 auto 3px}
.checkout-plan__metrics strong,.checkout-plan__metrics small{display:block;text-transform:uppercase}.checkout-plan__metrics strong{font-family:var(--display);font-size:.66rem}.checkout-plan__metrics small{font-size:.55rem;color:#aab2ae;margin-top:2px}

.checkout-payment{padding:24px;border:1px solid rgba(255,203,67,.45);background:linear-gradient(180deg,rgba(2,16,17,.96),rgba(1,10,11,.96));box-shadow:0 18px 55px rgba(0,0,0,.4)}
.checkout-payment__head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09)}
.checkout-payment__eyebrow{color:#ffd34f;text-transform:uppercase;font-size:.66rem;font-weight:800;letter-spacing:.09em}.checkout-payment h2{margin:3px 0 5px;font-family:var(--display);font-size:1.65rem;text-transform:uppercase}.checkout-payment p{margin:0;color:#aeb6b2;font-size:.76rem;line-height:1.45}
.checkout-payment__mini-gem{width:68px;height:68px;color:var(--checkout-accent);flex:0 0 auto;filter:drop-shadow(0 0 10px var(--checkout-accent))}
.checkout-summary{margin-top:17px;padding:15px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.025);font-size:.78rem}
.checkout-summary>span{display:block;margin-bottom:11px;font-family:var(--display);font-weight:800;text-transform:uppercase}
.checkout-summary>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.07)}.checkout-summary>div:first-of-type{border-top:0}.checkout-summary b{color:var(--checkout-accent)}
.checkout-summary__total{font-size:.95rem}.checkout-summary__total strong:last-child{color:var(--checkout-accent)}
.checkout-wompi{margin-top:16px;padding:16px;border:1px solid rgba(255,207,72,.2);border-radius:10px;background:rgba(0,0,0,.18)}
.checkout-wompi h3{margin:0 0 5px;font-family:var(--display);font-size:.92rem;text-transform:uppercase;color:#f2f2ec}.checkout-wompi p{font-size:.72rem}
.checkout-wompi__form{margin-top:14px}.checkout-wompi__form .waybox-button,.checkout-wompi__form button{width:100%!important;min-height:48px!important;border-radius:7px!important;font-family:var(--display)!important;font-weight:800!important}
.checkout-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.checkout-trust>div{text-align:center;color:#d7dcd9}.checkout-trust span{display:block;color:#ffd34f;font-size:1.2rem}.checkout-trust small{font-size:.58rem;line-height:1.25}
.checkout-cancel{display:block;width:max-content;margin:20px auto 0;color:#17e7bd;font-size:.75rem;text-decoration:none}.checkout-cancel:hover{color:#fff}

@media(max-width:900px){
 .checkout-page{background-attachment:scroll;padding-top:16px}
 .checkout-grid{grid-template-columns:1fr;max-width:680px;margin:auto}
 .checkout-plan__hero{grid-template-columns:150px 1fr}.checkout-gem{width:145px;height:145px}
 .checkout-steps i{width:45px}
}
@media(max-width:600px){
 .nav__crown--real{width:32px!important;height:25px!important}
 .checkout-shell{padding-left:13px!important;padding-right:13px!important}
 .checkout-steps{gap:7px;font-size:.61rem}.checkout-steps i{width:20px}.checkout-step{gap:4px}.checkout-step span{width:22px;height:22px}
 .checkout-plan,.checkout-payment{padding:17px;border-radius:12px}
 .checkout-plan__hero{grid-template-columns:96px 1fr;gap:13px;margin-top:12px}.checkout-gem{width:96px;height:96px}
 .checkout-plan__info h1{font-size:1.55rem}.checkout-plan__price{font-size:1.65rem}.checkout-plan__price small{font-size:.6rem}
 .checkout-benefits{grid-template-columns:1fr;gap:7px}.checkout-benefits li{font-size:.76rem}
 .checkout-plan__metrics{grid-template-columns:repeat(2,1fr)}.checkout-plan__metrics>div:nth-child(2){border-right:0}.checkout-plan__metrics>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}
 .checkout-payment__mini-gem{width:55px;height:55px}.checkout-payment h2{font-size:1.3rem}
 .checkout-summary>div{font-size:.72rem}
}


/* V15 — crown above "Elige tu membresía" matches Imperial branding */
.planes-seccion__crown,
.planes-seccion__crown--real{
  display:block!important;
  width:58px!important;
  height:44px!important;
  margin:0 auto 8px!important;
  object-fit:contain!important;
  filter:
    drop-shadow(0 0 5px rgba(255,226,105,.72))
    drop-shadow(0 0 12px rgba(221,145,0,.42))!important;
  transform:none!important;
}
@media(max-width:640px){
  .planes-seccion__crown,
  .planes-seccion__crown--real{
    width:48px!important;
    height:37px!important;
    margin-bottom:6px!important;
  }
}


/* =========================================================
   Cuadro de "Partidos de hoy" DENTRO del hero (hero__visual) -
   mismo espacio donde antes iba el bloque oculto/ticker, ahora
   con cuotas reales de Betano. Un solo cuadro dorado, no una
   seccion aparte - no parte la pagina en dos. Bloque aditivo.
   ========================================================= */
.board-card {
  position: absolute !important;
  right: clamp(18px, 4vw, 54px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, rgba(10, 8, 2, .88), rgba(4, 3, 1, .94));
  border: 2px solid rgba(255, 204, 55, .55);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 55px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 190, 38, .08);
  padding: 30px 32px;
}

.board-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 204, 55, .25);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
}
.board-card__vivo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); text-transform: none; font-weight: 700;
  font-size: .68rem; color: #00e99b;
}
.board-card__vivo i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00e99b; box-shadow: 0 0 8px 1px #00e99b;
  animation: board-card-pulse 1.8s ease-in-out infinite;
}
@keyframes board-card-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.board-card__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .08);
}
.board-card__fila:last-of-type { border-bottom: none; }
.board-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.board-card__liga { font-size: .66rem; color: #9da9a5; text-transform: uppercase; letter-spacing: .03em; }
.board-card__equipos { font-size: .85rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.board-card__cuotas { display: flex; gap: 6px; flex-shrink: 0; }
.board-card__cuotas > div { text-align: center; }
.board-card__cuotas span { display: block; font-size: .6rem; color: #9da9a5; }
.board-card__cuotas strong { font-family: var(--font-mono); font-size: .85rem; color: #ffd45a; }

.board-card__lock {
  text-align: center;
  font-size: .76rem;
  color: #c7cbc8;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, .1);
}
.board-card__vacio { text-align: center; color: #9da9a5; font-size: .85rem; padding: 20px 0; }

@media (max-width: 900px) {
  .board-card { display: none !important; }
}

/* Texto del hero sin saltos de linea forzados a mano - las frases quedan
   mas parejas al envolver solas dentro del max-width que ya tiene
   definido .hero h1 / .hero p. Justificado SOLO en el parrafo - en el
   titulo (pocas palabras, letra gigante) el justificado estira los
   espacios entre palabras de forma muy fea, asi que el h1 se queda en
   alineacion normal (izquierda). */
.hero p { text-align: justify !important; text-align-last: left !important; }
.hero h1 { text-align: left !important; }

/* Interruptor de idioma (oct 2026) - pequeño pero perceptible, en el nav */
.nav__idioma { display: flex; align-items: center; gap: 6px; margin-left: 14px; }
.nav__bandera {
  display: inline-flex;
  opacity: .45;
  filter: grayscale(60%);
  transition: opacity .15s ease, filter .15s ease;
  text-decoration: none;
}
.nav__bandera svg {
  width: 20px;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}
.nav__bandera:hover { opacity: .8; filter: grayscale(20%); }
.nav__bandera--activa { opacity: 1; filter: grayscale(0%); }

/* Menu desplegable "Cuenta" (oct 2026) - agrupa Mi perfil, banderas y
   Cerrar sesion para no ocupar espacio fijo en el nav. <details>/<summary>
   nativo de HTML, sin JavaScript (el proyecto no usa JS en ningun lado). */
.nav__cuenta { position: relative; }
.nav__cuenta-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  border-radius: 8px;
  color: inherit;
  user-select: none;
}
.nav__cuenta-toggle::-webkit-details-marker { display: none; }
.nav__cuenta-toggle::marker { content: ""; }
.nav__cuenta-toggle:hover { background: rgba(255, 255, 255, .06); }
.nav__cuenta-caret { width: 10px; height: 7px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform .15s ease; }
.nav__cuenta[open] .nav__cuenta-caret { transform: rotate(180deg); }

.nav__cuenta-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: linear-gradient(180deg, rgba(4, 22, 18, .97), rgba(2, 12, 10, .99));
  border: 1px solid rgba(255, 204, 55, .28);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__cuenta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
}
.nav__cuenta-item:hover { background: rgba(255, 255, 255, .07); }

.nav__cuenta-panel .nav__idioma {
  justify-content: center;
  margin: 6px 0 0;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Menu desplegable "Cuenta" - arreglo de capas (oct 2026).
   La regla `body > * { position: relative; z-index: 1 }` (arriba, linea ~75)
   le da el MISMO z-index (1) al contenedor que envuelve el <nav> y a la
   seccion que viene despues (hero / internal-page). Con empate, gana el que
   esta mas abajo en el HTML: el hero pintaba ENCIMA del panel desplegado y
   lo dejaba tapado. El z-index del .nav (100) no servia porque quedaba
   atrapado dentro de la capa del contenedor (que vale 1). Se sube la capa
   del contenedor del nav por encima de todo lo que le sigue. */
.container:has(.nav) { z-index: 100; }

/* Menu "Cuenta" - ajustes para convivir con las reglas existentes del nav (oct 2026) */
/* El boton "Cuenta" es un <summary>, no un <a>, asi que no recibe las reglas `.nav__links a` del nav.
   Se replican aqui con los MISMOS valores y rangos que usan los enlaces (medidos en el navegador):
   >=1000px .86rem | 681-999px .74rem | <=680px .66rem; color #d2d5d3 (hover: --text). */
.nav__cuenta-toggle { font-size: .86rem; font-weight: 500; color: #d2d5d3; }
.nav__cuenta-toggle:hover { color: var(--text); }
@media (min-width: 681px) and (max-width: 999px) { .nav__links .nav__cuenta-toggle { font-size: .74rem !important; } }
@media (max-width: 680px) { .nav__links .nav__cuenta-toggle { font-size: .66rem !important; } }
/* tu regla movil `.nav__icon-svg{margin:0 auto 2px!important}` centra cada icono en su celda
   (perfecto para los botones del nav) pero dentro del panel separaba el icono del texto */
.nav__cuenta-panel .nav__icon-svg { margin: 0 !important; flex-shrink: 0; }
@media (max-width: 680px) {
  .nav__cuenta-caret { display: none; }                      /* en la celda movil no cabe la flecha */
  .nav__links .nav__cuenta-toggle { border-right: 0 !important; }
  .nav__links .nav__cuenta-panel .nav__cuenta-item { font-size: .85rem; padding: 11px 12px; }
}

/* Estados "aplazado" / "no jugado" (oct 2026): el partido no se jugo, el pick no cuenta como acierto ni fallo.
   Colores elegidos para NO chocar con los demas estados del sitio: ganada = verde, perdida = rojo,
   pendiente = ambar (partido que SI se espera). Aplazado = violeta, no jugado = gris. */
.resultado-badge--aplazado { background: rgba(168, 139, 255, 0.16); color: #bba7ff; }
.resultado-badge--no_jugado { background: rgba(160, 168, 180, 0.14); color: #b7bec9; }

/* =========================================================
   Graficos de LINEAS (oct 2026) - SVG dibujado en el servidor, sin
   JavaScript. /estadisticas (una linea por categoria) y /rendimiento
   (una linea por membresia). Toda cifra y todo grafico lleva su titulo.
   ========================================================= */
.graf-titulo-seccion { margin: 40px 0 6px; font-family: var(--font-display); text-transform: uppercase; }
.graf-intro { margin: 0 0 4px; color: #aab3af; max-width: 860px; line-height: 1.55; }
.graf-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
@media (max-width: 860px) { .graf-grid2 { grid-template-columns: 1fr; } }

.graf-card {
  background: linear-gradient(180deg, rgba(4, 22, 18, .94), rgba(2, 12, 10, .98));
  border: 1px solid rgba(0, 220, 150, .22);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  min-width: 0;
}
.graf-card--ancho { margin: 26px 0 8px; }
.graf-card__cabecera h3 { margin: 0; font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; color: #fff; }
.graf-card__cabecera span { display: block; font-size: .76rem; color: #9da9a5; margin: 3px 0 12px; line-height: 1.45; }

/* lienzo: en escritorio se limita el ancho para que el texto no crezca de mas */
.graf-svg { width: 100%; height: auto; display: block; overflow: visible; }
.graf-svg--lineas { max-width: 560px; margin: 0 auto; }
.graf-svg text { font-family: var(--font-body); }
.graf-grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.graf-eje { fill: #8f9b97; font-size: 10px; }
.graf-etiq { fill: #c7cbc8; font-size: 10.5px; }
.graf-eje-titulo { fill: #9da9a5; font-size: 10px; letter-spacing: .02em; }
.graf-pct { font-size: 11.5px; font-weight: 700; fill: #ffd45a; }
/* en celular el lienzo se reduce, asi que el texto interno se sube para que siga legible */
@media (max-width: 620px) {
  .graf-eje { font-size: 11.5px; } .graf-etiq { font-size: 12px; } .graf-eje-titulo { font-size: 11px; } .graf-pct { font-size: 13px; }
}

/* lineas, areas y puntos - colores de las membresias = los de las tarjetas de planes */
.graf-linea { fill: none; stroke-width: 2.3; stroke-linejoin: round; stroke-linecap: round; }
.graf-punto { stroke: rgba(2, 8, 7, .95); stroke-width: 1.2; }
.graf-punto--final { stroke-width: 1.8; }
.graf-area { stroke: none; }
.graf-linea--dorado { stroke: #ffd45a; }   .graf-punto--dorado { fill: #ffd45a; }   .graf-area--dorado { fill: rgba(255, 212, 90, .12); }
.graf-linea--jadeita { stroke: #00d990; }  .graf-punto--jadeita { fill: #00d990; } .graf-pct--jadeita { fill: #00d990; }
.graf-linea--azul { stroke: #239cff; }     .graf-punto--azul { fill: #239cff; }    .graf-pct--azul { fill: #239cff; }
.graf-linea--rosa { stroke: #ff5eaa; }     .graf-punto--rosa { fill: #ff5eaa; }    .graf-pct--rosa { fill: #ff5eaa; }

/* cifras del periodo bajo cada grafico */
.graf-resumen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.graf-resumen__principal { display: flex; align-items: baseline; gap: 8px; }
.graf-resumen__etiqueta { font-size: .76rem; color: #9da9a5; }
.graf-resumen__principal strong { font-family: var(--font-display); font-size: 1.6rem; color: #ffd45a; line-height: 1; }
.graf-resumen__detalle { display: flex; flex-wrap: wrap; gap: 6px; }

.graf-leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px 0 4px; }
.graf-leyenda__item { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: #c7cbc8; }
.graf-swatch { width: 18px; height: 4px; border-radius: 3px; display: inline-block; }
.graf-swatch--jadeita { background: #00d990; } .graf-swatch--azul { background: #239cff; } .graf-swatch--rosa { background: #ff5eaa; }
.graf-explicacion { max-width: 760px; margin: 8px auto 0; font-size: .78rem; line-height: 1.55; color: #8f9b97; text-align: center; }
.graf-nota { max-width: 860px; margin: 10px 0 0; font-size: .78rem; line-height: 1.55; color: #8f9b97; }

/* cuadros de porcentaje por membresia, con su titulo y su explicacion */
.graf-bloque { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.graf-bloque__titulo { margin: 0 0 4px; font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; color: #fff; }
.graf-bloque__texto { margin: 0 0 4px; font-size: .78rem; line-height: 1.5; color: #9da9a5; max-width: 780px; }
.graf-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 8px; }
@media (max-width: 620px) { .graf-chips { grid-template-columns: 1fr; } }
.graf-chip { border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 12px 14px; text-align: center; background: rgba(0, 5, 4, .45); }
.graf-chip--jadeita { border-color: rgba(0, 217, 144, .55); }
.graf-chip--azul { border-color: rgba(35, 156, 255, .55); }
.graf-chip--rosa { border-color: rgba(255, 94, 170, .55); }
.graf-chip__nombre { font-family: var(--font-display); text-transform: uppercase; font-size: .9rem; color: #fff; }
.graf-chip__pct { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: #ffd45a; line-height: 1.1; }
.graf-chip__rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #9da9a5; margin-bottom: 2px; }
.graf-chip__detalle { font-size: .74rem; color: #9da9a5; }
.graf-vacio { padding: 38px 10px 34px; text-align: center; color: #9da9a5; font-size: .88rem; line-height: 1.5; }

/* titulos de los bloques de /estadisticas y rotulos de las cifras existentes */
.stats-bloque { margin: 6px 0 12px; }
.stats-bloque__titulo { margin: 0 0 4px; font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; color: #fff; }
.stats-bloque__texto { margin: 0; font-size: .86rem; line-height: 1.55; color: #aab3af; max-width: 820px; }
.stats-etiqueta { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: #9da9a5; margin-bottom: 4px; }
.rendimiento-semana__porcentaje small { font-size: .5em; font-weight: 500; color: #9da9a5; letter-spacing: .02em; }

/* Mensaje de exito (oct 2026): mas grande y DORADO para que se distinga de los demas textos que lo
   acompañan (el verde ya es el color de "ganada" en todo el sitio; el dorado es el de la marca). */
.form-ok {
  background: rgba(255, 212, 90, 0.10);
  border: 1px solid rgba(255, 212, 90, 0.6);
  color: #ffd45a;
  padding: 15px 18px;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
}
.perfil-ayuda { margin: 0 0 14px; font-size: .88rem; line-height: 1.55; color: #aab3af; max-width: 640px; }


/* =========================================================
   Prueba gratuita de bienvenida (oct 2026): aviso en el registro,
   bienvenida y banners en el dashboard.
   ========================================================= */
.registro-regalo {
  margin: 0 0 22px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 212, 90, 0.6);
  background: linear-gradient(135deg, rgba(255, 212, 90, 0.16), rgba(255, 212, 90, 0.05));
}
.registro-regalo__etiqueta {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
  background: #ffd45a; color: #1a1405; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.registro-regalo__titulo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; color: #ffd45a; line-height: 1.15; }
.registro-regalo__texto { margin-top: 6px; font-size: .88rem; line-height: 1.5; color: #dfe6e3; }

.bienvenida {
  margin: 26px 0 10px; padding: 28px 28px 24px; border-radius: 16px;
  border: 1px solid rgba(255, 212, 90, 0.65);
  background: linear-gradient(135deg, rgba(255, 212, 90, 0.17), rgba(0, 217, 144, 0.07) 62%, rgba(2, 12, 10, 0.92));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
}
.bienvenida__etiqueta {
  display: inline-block; margin-bottom: 12px; padding: 5px 13px; border-radius: 999px;
  background: #ffd45a; color: #1a1405; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.bienvenida h2 { margin: 0 0 10px; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.05; color: #fff; }
.bienvenida h2 span { color: #ffd45a; }
.bienvenida__lead { margin: 0 0 14px; max-width: 780px; font-size: 1.1rem; line-height: 1.55; color: #eef2f0; }
.bienvenida__lead strong { color: #ffd45a; }
.bienvenida__lista { margin: 0 0 14px; padding-left: 20px; max-width: 780px; color: #cfd6d3; line-height: 1.55; }
.bienvenida__lista li { margin-bottom: 6px; }
.bienvenida__lista strong { color: #fff; }
.bienvenida__cierre { margin: 0 0 18px; font-size: 1rem; font-weight: 600; color: #ffd45a; }

.prueba-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  margin: 22px 0 6px; padding: 14px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 212, 90, 0.5); background: rgba(255, 212, 90, 0.09);
}
.prueba-banner__texto { flex: 1 1 380px; font-size: .95rem; line-height: 1.5; color: #e6ece9; }
.prueba-banner__texto strong { color: #ffd45a; }
.prueba-banner--fin { border-color: rgba(232, 112, 156, 0.55); background: rgba(232, 112, 156, 0.08); }
.prueba-banner--fin .prueba-banner__texto strong { color: #ff8fb6; }
@media (max-width: 620px) { .bienvenida { padding: 22px 18px 20px; } }

/* Aviso "confirma tu correo" del dashboard (oct 2026): reutiliza el estilo de .bienvenida */
.verificacion .form-ok, .verificacion .form-error { max-width: 780px; }
.verificacion__ayuda { margin: 0 0 16px; font-size: .9rem; color: #aab3af; }


/* Rendimiento real en la portada (oct 2026): lo primero que ve un visitante despues del hero */
.rend-band { background: linear-gradient(180deg, rgba(0,12,9,.98), rgba(0,6,5,.98)); border-bottom: 1px solid rgba(255,204,55,.24); padding: 34px 0; }
.rend-band__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 34px; align-items: center; }
.rend-band__titulo { margin: 0 0 6px; font-family: var(--font-body); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #00e99b; }
.rend-band__cifra { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: .95; color: #ffd45a; }
.rend-band__cifra small { font-size: .5em; margin-left: 2px; }
.rend-band__leyenda { margin: 6px 0 0; font-size: .9rem; line-height: 1.5; color: #dfe3e0; }
.rend-band__leyenda strong { color: #fff; }
.rend-band__g { color: #00e99b; font-weight: 700; }
.rend-band__p { color: #ff8f8f; font-weight: 700; }
.rend-band__subtitulo { margin: 0 0 10px; font-family: var(--font-body); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a9b0ad; }
.rend-band__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rend-tier { --gema: var(--jade); display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 12px; border: 1px solid rgba(255,255,255,.1); border-top: 3px solid var(--gema); border-radius: 10px; background: rgba(255,255,255,.03); }
.rend-tier--jadeita { --gema: var(--jade); }
.rend-tier--azul { --gema: var(--zafiro); }
.rend-tier--rosa { --gema: var(--rosa); }
.rend-tier__nombre { font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--gema); }
.rend-tier__pct { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: #fff; }
.rend-tier__pct--vacio { color: #6b736f; }
.rend-tier__detalle { font-size: .76rem; color: #a9b0ad; }
.rend-band__cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.rend-band__nota { margin: 0; font-size: .74rem; line-height: 1.45; color: #8d938f; }
@media (max-width: 980px) {
  .rend-band__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .rend-band { padding: 26px 0; }
  .rend-band__lista { gap: 8px; }
  .rend-tier { padding: 11px 9px 10px; }
  .rend-tier__pct { font-size: 1.6rem; }
  .rend-tier__nombre { font-size: .68rem; }
  .rend-tier__detalle { font-size: .68rem; }
  .rend-band__cta .btn { width: 100%; text-align: center; }
}

/* Pick gratis del dia (oct 2026) */
.pg { padding-bottom: 20px; }
.pg-card { background: linear-gradient(180deg, rgba(4,22,18,.94), rgba(2,12,10,.98)); border: 1px solid rgba(255,204,55,.32); border-radius: 14px; padding: 26px; margin: 0 0 22px; box-shadow: 0 18px 45px rgba(0,0,0,.25); }
.pg-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pg-card__liga { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #9da9a5; }
.pg-card__partido { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; color: #fff; }
.pg-card__mercado { font-size: 1.05rem; color: #ffd45a; font-weight: 700; margin-bottom: 16px; }
.pg-card__etiqueta { display: inline-block; margin-right: 8px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #00e69a; }
.pg-card__chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.pg-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.03); }
.pg-chip span { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #8d938f; }
.pg-chip strong { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: #fff; }
.pg-card__sub { margin: 0 0 8px; font-family: var(--font-body); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a9b0ad; }
.pg-card__analisis { margin: 0; font-size: .98rem; line-height: 1.65; color: #e3e5e2; white-space: pre-line; }
.pg-card__analisis--espera { color: #a9b0ad; font-style: italic; }
.pg-titulo { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.5rem; color: #fff; }
.pg-como, .pg-hist { margin: 0 0 22px; color: #cfd4d1; font-size: .92rem; line-height: 1.6; }
.pg-como p, .pg-cta p { margin: 0; }
.pg-cta { margin: 0 0 26px; padding: 22px 24px; border-radius: 14px; border: 1px solid rgba(0,220,150,.30); background: rgba(0,28,21,.55); color: #e3e5e2; }
.pg-cta__botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pg-hist__resumen { margin: 0 0 12px; color: #e3e5e2; font-weight: 700; }
.pg-hist__nota { display: block; margin-top: 3px; font-weight: 400; font-size: .78rem; color: #8d938f; }
.pg-tabla { border: 1px solid rgba(255,255,255,.09); border-radius: 10px; overflow: hidden; }
.pg-fila { display: grid; grid-template-columns: 70px minmax(0, 1.4fr) minmax(0, 1.2fr) 110px; gap: 10px; align-items: center; padding: 11px 14px; border-top: 1px solid rgba(255,255,255,.07); font-size: .84rem; color: #dfe3e0; }
.pg-fila:first-child { border-top: 0; }
.pg-fila--cab { background: rgba(255,255,255,.04); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #8d938f; }
.pg-fila__partido { font-weight: 700; color: #fff; }
.pg-legal { margin: 8px 0 0; font-size: .75rem; color: #7f8783; }
@media (max-width: 640px) {
  .pg-card { padding: 18px; }
  .pg-fila { grid-template-columns: 52px minmax(0, 1fr) 96px; }
  .pg-fila > span:nth-child(3) { display: none; }
  .pg-fila--cab > span:nth-child(3) { display: none; }
  .pg-cta__botones .btn { width: 100%; text-align: center; }
}

/* Enlace al pick gratis dentro de la franja de rendimiento de la portada */
.rend-band__enlace { color: #ffd45a; font-size: .82rem; text-underline-offset: 5px; }

/* Fondo de las paginas de pago (oct 2026): la foto de cabecera semanal (/static/internal_header.jpg), igual que las demas
   paginas internas. Aplica a: confirmar membresia, confirmar pronostico adicional, resultado del pago, membresia bloqueada
   (tarjeta .auth de 480px) y la lista "Comprar pronostico adicional" (.pagos-extras). No toca login, registro ni otra pagina. */
body:has(.auth[style*="max-width: 480px"]),
body:has(.pagos-extras) { position: relative; }
body:has(.auth[style*="max-width: 480px"])::after,
body:has(.pagos-extras)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 400px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(180deg, rgba(0,5,4,.62) 0%, rgba(0,5,4,.38) 45%, #020807 100%), url('/static/internal_header.jpg');
  background-size: cover; background-position: center 42%; background-repeat: no-repeat;
}
@media (max-width: 620px) {
  body:has(.auth[style*="max-width: 480px"])::after,
  body:has(.pagos-extras)::after { height: 320px; }
}

/* Encabezados de las secciones internas (oct 2026): cuadro lateral a la derecha del encabezado (Mis pronosticos, Historial, Estadisticas,
   Rendimiento publico) y espacios parejos: lo que va justo debajo del encabezado y entre frases tiene el mismo aire arriba que abajo.
   Solo presentacion. */
.hero-lateral{
  margin:0 0 24px; padding:13px 17px; border:1px solid rgba(255,212,90,.38); border-radius:12px;
  background:linear-gradient(135deg,rgba(2,12,10,.88),rgba(18,26,12,.82)); box-shadow:0 8px 26px rgba(0,0,0,.35); text-align:left;
}
.hero-lateral__titulo{ margin:0 0 5px; font-family:var(--font-body); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#00e99b; }
.hero-lateral__texto{ margin:0; font-size:.98rem; line-height:1.5; color:#f1f3f2; font-weight:500; }
.hero-lateral__texto strong{ color:#ffd45a; font-weight:800; }
.hero-lateral__nota{ display:block; margin-top:5px; font-size:.76rem; color:#aab3af; font-weight:400; }
@media (min-width:1000px){
  .internal-page > .container{ position:relative; }
  .internal-page > .container > .hero-lateral{
    position:absolute; right:clamp(18px,4vw,54px); top:78px; width:320px; margin:0; z-index:2;
  }
  .internal-page > .container > .hero-lateral--ancho{ width:380px; top:64px; }
}

/* Espacios parejos: el mismo aire debajo del encabezado y debajo de cada frase de apoyo */
.internal-page .internal-hero{ margin-bottom:30px; }
.internal-page > .container > p{ margin:0 0 30px; }
@media (max-width:620px){
  .hero-lateral{ margin-bottom:22px; }
  .internal-page .internal-hero{ margin-bottom:22px; }
  .internal-page > .container > p{ margin:0 0 22px; }
}

/* Textos justificados y ordenados en las secciones internas (oct 2026): los parrafos quedan alineados a ambos lados, con
   division de palabras para que no se abran huecos. Los titulos y las etiquetas no cambian. En el celular el encabezado sigue
   centrado y la ultima linea de cada parrafo del encabezado se centra. Solo presentacion. */
.internal-page .internal-hero p,
.internal-page > .container > p,
.internal-page .hero-lateral__texto,
.internal-page .hero-lateral__nota,
.internal-page .aviso-cuotas,
.internal-page .aviso-incompleto,
.internal-page .graf-intro,
.internal-page .graf-explicacion,
.internal-page .graf-bloque__texto,
.internal-page .stats-bloque__texto,
.internal-page .graf-card__cabecera span{
  text-align:justify; text-justify:inter-word; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word;
}
@media (max-width:999px){
  .internal-page .internal-hero p{ text-align:justify!important; text-align-last:center; }
}