@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800;900&display=swap');
/* Montserrat en pesos muy bold para titulares (2026-09-25, petición del usuario: fusión ligera
   con la estética de la web oficial de LaLiga -- geométrica, muy bold, en mayúsculas -- sin tocar
   fondo oscuro ni color de acento, que se quedan igual). Sustituye a Oswald como `--display`. */

:root {
  --bg: #08090a;
  --bg-alt: #0c0d0f;
  --surface: #131518;
  --surface-2: #191c20;
  --border: #262a2f;
  --border-soft: #1c2024;
  --text: #f2f3f4;
  --muted: #8a909a;
  --muted-2: #5f656e;
  --accent: #e8393f;
  --accent-dim: #8f2226;
  --accent-glow: #ff5a52;
  --accent-ink: #ffffff;
  --danger: #ff6b6b;
  --warn: #e8a33d;
  --mono: 'Montserrat', var(--body);
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --display: 'Montserrat', var(--body);
  --radius: 3px;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  margin: 0;
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
}

img { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding-inline: 24px; }

a { color: var(--accent); }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
h1 { font-weight: 900; }

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

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
.eyebrow b { color: var(--accent); font-weight: 600; }

hr.hair { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ---------- Scope frame: marcas de esquina tipo visor, en vez de bordes redondeados ---------- */
.scope {
  position: relative;
  padding: 2px;
}
.scope::before, .scope::after,
.scope .c2::before, .scope .c2::after { content: ""; position: absolute; width: 16px; height: 16px; border: 1.5px solid var(--accent); z-index: 2; }
.scope::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.scope::after { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.scope .c2::before { bottom: -1px; left: -1px; border-right: none; border-top: none; position: absolute; }
.scope .c2::after { bottom: -1px; right: -1px; border-left: none; border-top: none; position: absolute; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; gap: 16px; }
.brand { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 9px; }
.brand .dot { color: var(--accent); font-family: var(--mono); font-weight: 700; }
.nav-links { display: flex; gap: 30px; font-family: var(--display); font-weight: 700; font-size: 13.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-weight: 600; font-size: 13.5px; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: var(--radius); padding: 15px 26px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 16px; font-size: 12px; }
.btn-arrow::after { content: "→"; }

/* ---------- Hero ---------- */
.hero { padding-block: 74px 0; position: relative; border-bottom: 1px solid var(--border); }
.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: end; padding-bottom: 56px; }
.hero h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 0.98; margin: 18px 0 22px; text-transform: uppercase; }
.hero h1 .hl { color: var(--accent); }
.hero p.lead { color: var(--muted); font-size: 17px; max-width: 44ch; margin-bottom: 32px; }

.lead-list { list-style: none; margin: 20px 0 32px; padding: 0; max-width: 46ch; display: flex; flex-direction: column; }
.lead-list li {
  color: var(--muted); font-size: 15.5px; line-height: 1.5;
  padding: 13px 0 13px 22px; position: relative; border-top: 1px solid var(--border-soft);
}
.lead-list li:first-child { border-top: none; padding-top: 0; }
.lead-list li:last-child { padding-bottom: 0; }
.lead-list li::before { content: "//"; position: absolute; left: 0; top: 13px; color: var(--accent); font-family: var(--mono); font-size: 13px; font-weight: 700; }
.lead-list li:first-child::before { top: 0; }
.lead-list .k { color: var(--text); font-weight: 700; }
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-note { font-family: var(--mono); font-size: 12px; color: var(--muted-2); margin-top: 18px; }

.readout {
  padding: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.readout .row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-block: 14px; border-top: 1px solid var(--border-soft);
}
.readout .row:first-child { border-top: none; }
.readout .label { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.readout .value { font-family: var(--mono); font-weight: 700; font-size: 22px; color: var(--text); }
.readout .value .u { font-size: 13px; color: var(--muted); font-weight: 500; }
.readout .value.pos { color: var(--accent); }
.readout .row.stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.readout .value.q { font-family: var(--body); font-weight: 600; font-size: 15px; line-height: 1.4; }

/* ---------- Sections ---------- */
section { padding-block: 84px; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }
.section-head { max-width: 640px; margin-bottom: 52px; display: flex; align-items: baseline; gap: 22px; }
.section-head .idx { font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 6px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin-top: 10px; text-transform: uppercase; }
.section-head p { color: var(--muted); font-size: 15.5px; margin-top: 12px; }

/* ---------- Feature bento (asimétrico, no rejilla uniforme) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.bento > div { background: var(--bg); padding: 30px; }
.bento .f-lead { grid-column: span 3; grid-row: span 2; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; }
.bento .f-med { grid-column: span 3; }
.bento .f-sm { grid-column: span 2; }
.bento .tag { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; display: block; }
.bento h3 { font-size: 18px; margin-bottom: 10px; text-transform: none; letter-spacing: 0; font-weight: 700; font-family: var(--body); }
.bento .f-lead h3 { font-size: 24px; font-family: var(--display); text-transform: uppercase; }
.bento p { color: var(--muted); font-size: 14px; margin: 0; }
.bento .stat { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--accent); margin-top: 18px; }

/* Barra de titularidad */
.probbar { margin-top: 18px; }
.probbar-track { height: 8px; background: var(--surface-2); border: 1px solid var(--border); position: relative; overflow: hidden; }
.probbar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: 0 0 12px -2px var(--accent-glow); }
.probbar-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; font-family: var(--mono); }
.probbar-meta .pct { font-size: 22px; font-weight: 700; color: var(--text); }
.probbar-meta .pnote { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* Mini comparador de saldo de rivales */
.cashbars { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.cb-row { display: grid; grid-template-columns: 58px 1fr 64px; align-items: center; gap: 10px; }
.cb-label { font-family: var(--mono); font-size: 12.5px; color: var(--muted); text-transform: uppercase; }
.cb-track { height: 7px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.cb-fill { height: 100%; background: var(--muted-2); }
.cb-fill.you { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.cb-val { font-family: var(--mono); font-size: 12.5px; color: var(--text); text-align: right; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.cb-val.pos { color: var(--warn); }

/* ---------- Iconos y rating (2026-09-25: sustituyen a los emoji por SVG de Lucide o CSS puro,
   sin depender de cómo cada sistema operativo dibuje un emoji) ---------- */
.icon-inline { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; color: currentColor; }
.icon-inline.accent { color: var(--accent); }
.icon-inline.warn { color: var(--warn); }
.rating { display: inline-flex; gap: 4px; vertical-align: middle; }
.rating span { width: 9px; height: 9px; border-radius: 2px; background: var(--border); display: inline-block; }
.rating span.on { background: var(--accent); box-shadow: 0 0 8px -1px var(--accent-glow); }

/* ---------- Steps ---------- */
/* Cabecera de "Cómo funciona" a dos columnas, con el mockup de chat arriba a la derecha
   (2026-09-25, petición del usuario) -- los 3 pasos siguen debajo, a todo el ancho, sin tocar. */
.como-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: 48px; align-items: start; margin-bottom: 52px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.step { background: var(--bg); padding: 32px 28px; position: relative; }
.step .tag { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: 0.06em; display: block; margin-bottom: 20px; }
.step h3 { font-size: 17px; margin-bottom: 8px; text-transform: none; font-family: var(--body); font-weight: 700; }
.step p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- Mockup de conversación (2026-09-25, petición del usuario: mostrar cómo es hablar
   con el bot de verdad, no solo describirlo con texto). Estilo de app de mensajería genérico
   (burbujas, cabecera, botones de teclado en línea) con los colores propios de SniperFantasy, sin
   copiar el azul/logo de Telegram. ---------- */
.tg-phone { max-width: 400px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.tg-phone-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tg-phone-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--accent-ink);
  font-family: var(--display); font-weight: 800; font-size: 14px; overflow: hidden;
}
.tg-phone-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tg-phone-name { font-family: var(--display); font-weight: 800; font-size: 14.5px; }
.tg-phone-status { font-size: 11.5px; color: var(--accent-glow); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.tg-chat { padding: 20px 16px 22px; display: flex; flex-direction: column; gap: 16px; }
.tg-row { display: flex; gap: 8px; align-items: flex-end; }
.tg-row .tg-mini-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); flex: none; }
.tg-bubble {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px 14px 14px 14px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.5; max-width: 78%; color: var(--text);
}
.tg-bubble .time { display: block; margin-top: 6px; font-size: 10px; color: var(--muted-2); font-family: var(--mono); text-align: right; }
.tg-actions { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 0 30px; max-width: 78%; }
.tg-action-btn {
  border: 1px solid var(--accent-dim); color: var(--accent-glow); background: transparent;
  text-align: center; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.tg-action-btn.chosen {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.tg-action-btn.chosen svg { width: 14px; height: 14px; }

/* ---------- Vista previa del producto: alineación con puntos por jornada (izquierda) +
   mercado con proyección de valor (derecha) (2026-09-25, petición del usuario: recuadros de
   jugadores tal y como se ven desde la app). Desde 2026-09-29 con la foto real del jugador,
   igual que el panel; las iniciales sobre color quedan de respaldo si la imagen no carga.

   Aquí vivían también las reglas del maquetado viejo (`.lchip-*`, `.mkt-*`, y el `.pchip` de
   la alineación). Al sustituirlo por el `.pv-*` de ahora se borraron los SELECTORES pero se
   dejaron los cuerpos sueltos, y eso no es CSS inerte: un bloque de declaraciones sin selector
   se come la regla siguiente (el parser sigue buscando la `{` que le falta), así que `.pos-pill`
   y la rejilla de la tabla de rivales quedaron sin estilo sin que se notara. Limpiado
   2026-09-29 -- si vuelves a quitar un bloque, borra el cuerpo entero, no solo el selector. */
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

.pos-pill {
  font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); letter-spacing: 0.03em;
}
.pos-pill.gk  { border-color: var(--muted-2); color: var(--muted-2); }
.pos-pill.def { border-color: var(--accent); color: var(--accent-glow); }
.pos-pill.cen { border-color: var(--warn); color: var(--warn); }
.pos-pill.del { border-color: var(--accent-glow); color: var(--accent-glow); }
/* Tendencia real bajando (panel web, 2026-09-26): el mockup de marketing solo necesitaba el tono
   "sube" -- los datos de verdad también pueden bajar, así que hace falta el contrario. */
.pct-tag { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.pct-tag.pos { color: var(--accent-glow); }
.pct-tag.neg { color: var(--warn); }

/* ---------- Tabla de saldo estimado de los rivales ----------
   Nació a dos columnas (2026-09-25) con un simulacro de cláusula de Mbappé al lado. Ese
   simulacro se quitó (la web ya explicaba esa misma función en otros tres sitios), así que
   ahora es una sola columna centrada: a 1fr 1fr la tarjeta se quedaba pegada a la izquierda
   con medio ancho vacío. */
.rivals-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; margin-top: 56px; max-width: 560px; margin-inline: auto; }
.rivals-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 22px 22px 8px; }
.rv-row { display: grid; grid-template-columns: 110px 1fr 62px; align-items: center; gap: 12px; padding-block: 12px; border-top: 1px solid var(--border-soft); }
.rv-row:first-child { border-top: none; }
.rv-name { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-row.you .rv-name { color: var(--text); font-weight: 700; }
.rv-track { height: 7px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.rv-fill { height: 100%; background: var(--muted-2); }
.rv-fill.you { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.rv-val { font-family: var(--mono); font-size: 13px; color: var(--text); text-align: right; white-space: nowrap; }
.rv-val.warn { color: var(--warn); }

/* ---------- Pricing ---------- */
/* Ancho pensado para que las 3 tarjetas quepan en una sola fila dentro de `.wrap` (1120px):
   3 x 340px + 2 x 20px de hueco = 1060px (2026-09-25, petición del usuario: "en horizontal"). En
   pantallas estrechas, `flex-wrap: wrap` las apila solas, no hace falta media query aparte. */
.price-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.price-card {
  background: var(--surface);
  padding: 40px 30px 34px;
  max-width: 340px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.price-card .plan-name { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.price-card .amount { font-family: var(--mono); font-size: 50px; font-weight: 700; margin: 16px 0 2px; line-height: 1; }
.price-card .amount sup { font-size: 22px; color: var(--muted); font-weight: 500; }
.price-card .period { color: var(--muted-2); font-size: 13px; margin-bottom: 30px; font-family: var(--mono); }
.price-card .alt-price { color: var(--muted); font-size: 13px; margin-top: 10px; text-align: center; }
.price-card .btn-block + .alt-price { margin-top: 12px; }
.price-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; flex: 1; }
.price-list li {
  display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--text);
  padding-block: 12px; border-top: 1px solid var(--border-soft);
}
.price-list li:first-child { border-top: none; }
.price-list li::before { content: "//"; color: var(--accent); font-family: var(--mono); font-weight: 700; flex: none; font-size: 12px; }

/* Tarjeta MÁS destacada -- Founder, oferta de lanzamiento limitada (2026-09-25, petición del
   usuario: "el founder lo pondría primero y destacado") -- borde + resplandor. Premium lleva un
   destacado más ligero (`.premium-highlight`, solo el borde) para que quede claro que también es
   una opción fuerte sin competir visualmente con Founder por ser la más llamativa. */
.price-card.featured { border: 1.5px solid var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 60px -20px var(--accent-glow); }
.price-card.premium-highlight { border: 1.5px solid var(--accent-dim); }
.price-card .badge {
  /* Píldora sólida, como las etiquetas de categoría de la web de LaLiga (2026-09-25) --
     redondeada del todo en vez del rectángulo recto que llevaba antes. */
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-weight: 700;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 16px;
  white-space: nowrap; border-radius: 999px;
}
.price-card.founder .badge { background: var(--warn); }
.price-card .seats-note { font-family: var(--mono); font-size: 12.5px; color: var(--warn); margin-top: 14px; text-align: center; }
.price-card .sold-out { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: center; padding: 15px 0; border: 1px dashed var(--border); }
.price-card[hidden] { display: none; }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--border); padding-block: 22px; display: flex; gap: 22px; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item .q-idx { font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 3px; flex: none; width: 32px; }
.faq-item details { flex: 1; }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .mk { font-family: var(--mono); color: var(--accent); font-size: 15px; flex: none; }
.faq-item details[open] summary .mk { transform: rotate(45deg); display: inline-block; }
.faq-item p { color: var(--muted); margin: 14px 0 0; font-size: 14px; max-width: 62ch; }

/* ---------- Callouts ---------- */
.callout { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border-left: 2px solid var(--warn); padding: 16px 20px; font-size: 13.5px; line-height: 1.65; }
.callout b { color: var(--warn); }
.callout.ok { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-left-color: var(--accent); }
.callout.ok b { color: var(--accent); }
.callout.danger { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-left-color: var(--danger); }
.callout.danger b { color: var(--danger); }

/* ---------- Footer ---------- */
footer { padding-block: 44px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
footer p { color: var(--muted-2); font-size: 13px; margin: 0; max-width: 60ch; font-family: var(--mono); }
footer .foot-links { display: flex; gap: 22px; font-family: var(--mono); font-size: 13px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ---------- Onboarding pages ---------- */
.onb-card { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--accent); padding: 28px; margin-bottom: 20px; }
.onb-status { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.field input[type=text] { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 13px 14px; font-family: var(--mono); font-size: 13.5px; }
.field input[type=text]:focus { outline: 1.5px solid var(--accent); outline-offset: 1px; }

.result { font-family: var(--mono); font-size: 12.5px; border-radius: var(--radius); padding: 12px 14px; border: 1px solid var(--border); background: var(--surface-2); white-space: pre-wrap; word-break: break-word; margin-top: 14px; }
.result.ok { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.result.err { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: var(--danger); }

.step-list { display: flex; flex-direction: column; }
.step-list .s { display: flex; gap: 16px; padding-block: 14px; border-top: 1px solid var(--border-soft); }
.step-list .s:first-child { border-top: none; padding-top: 0; }
.step-list .s .n { font-family: var(--mono); font-weight: 700; font-size: 13px; flex: none; color: var(--accent); padding-top: 1px; }
.step-list .s .t { font-size: 14px; }
.step-list .s .t b { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; padding-bottom: 40px; }
  .como-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 36px; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .f-lead { grid-column: span 2; grid-row: span 1; }
  .bento .f-med, .bento .f-sm { grid-column: span 2; }
  .steps { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
  .rivals-grid { gap: 36px; }
  .nav-links { display: none; }
  body { background-size: 28px 28px; }
}

/* Pantalla de móvil de verdad (2026-09-25, petición del usuario: "optimízala para teléfono"):
   con solo el corte de 860px de arriba, en un móvil estrecho (360-390px) la marca + el botón de
   la nav quedan muy justos de sitio, el `.readout` (usado en el hero) muestra valores largos
   como "Lamine Yamal" al mismo tamaño que en escritorio, y el espaciado vertical de cada sección es el mismo que en un monitor grande -- hace la página mucho
   más larga de lo necesario al hacer scroll con el dedo. Se reubica solo lo que no cabía bien; el
   contenido y el orden de las secciones son los mismos que en escritorio. */
@media (max-width: 480px) {
  .wrap, .wrap-narrow { padding-inline: 18px; }
  section { padding-block: 56px; }
  .hero { padding-block: 48px 0; }
  .hero-grid { gap: 36px; padding-bottom: 32px; }
  .brand { font-size: 16px; }
  .btn-sm { padding: 8px 14px; font-size: 11px; }
  .section-head { gap: 14px; margin-bottom: 36px; }
  .readout .value { font-size: 18px; }
  .readout .value.q { font-size: 14px; }
  .bento > div { padding: 22px; }
  .price-wrap { gap: 14px; }
  .price-card { padding: 26px 20px 22px; max-width: 300px; }
  .price-card .plan-name { font-size: 11.5px; }
  .price-card .amount { font-size: 36px; margin: 12px 0 2px; }
  .price-card .amount sup { font-size: 16px; }
  .price-card .period { margin-bottom: 20px; }
  .price-list { margin-bottom: 22px; }
  .price-list li { font-size: 13px; gap: 9px; padding-block: 9px; }
  .rivals-card { padding: 18px 16px 6px; }
  .rv-row { grid-template-columns: 84px 1fr 54px; gap: 8px; }
  .rv-name, .rv-val { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Vista previa: el panel REAL, no una maqueta aparte (2026-09-28).
   La versión anterior llevaba meses divergiendo del producto -- enseñaba un
   "Índice Sniper" que se retiró en VR3 (el usuario: "el cliente no sabe
   interpretarlo"), bloques rojos en vez de fichas de jugador y botones
   ("Fichar ahora") que no existen en ninguna pantalla. Enseñar en la web de
   venta algo que el producto ya no hace es peor que no enseñar nada.
   Estos estilos replican los del panel (web/dashboard/src/styles/), con sus
   mismos valores: Montserrat, esquinas de 20px, superficie en capas con
   reflejo interior y el rojo reservado a la acción.
   --------------------------------------------------------------------------- */
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }

/* --- El campo, igual que la pestaña Mi equipo --- */
.pv-pitch {
  position: relative; background: #0b1014; border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px; padding: 26px 16px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.pv-goalbox {
  position: absolute; left: 50%; transform: translateX(-50%); width: 42%; height: 34px;
  border: 1px solid rgba(255,255,255,0.09); pointer-events: none;
}
.pv-goalbox--top { top: 0; border-top: none; }
.pv-goalbox--bottom { bottom: 0; border-bottom: none; }
.pv-halfway { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.09); }
.pv-circle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 92px; height: 92px; border: 1px solid rgba(255,255,255,0.09); border-radius: 50%;
}
.pv-row { position: relative; display: flex; justify-content: space-evenly; gap: 8px; }
.pv-player { width: 74px; text-align: center; }
.pv-photo { position: relative; width: 74px; height: 84px; }
.pv-initials {
  display: flex; align-items: center; justify-content: center; width: 74px; height: 84px;
  border-radius: 10px 10px 0 0; color: #fff; font-family: var(--display);
  font-weight: 800; font-size: 22px; letter-spacing: 0.02em;
}
/* Foto real del jugador encima de las iniciales, como PlayerAvatar en el panel: si la imagen
   no carga, `onerror` la quita y quedan las iniciales de respaldo. */
.pv-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; background: #1b1d23;
}
/* Con foto, el color de las iniciales asomaba como un filo en las esquinas redondeadas: se
   apaga mientras la foto esté; si `onerror` la quita, `:has` deja de cumplirse y vuelve el color. */
.pv-avatar:has(.pv-img), .pv-photo:has(.pv-img) .pv-initials { background: #1b1d23 !important; }
.pv-photo .pv-img { border-radius: 10px 10px 0 0; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.pv-status {
  position: absolute; z-index: 1; right: -4px; bottom: 2px; width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 2px solid #0b1014;
}
.pv-status svg { width: 11px; height: 11px; }
.pv-status.pos { background: #34d399; color: #06281c; }
.pv-status.warn { background: #fbbf24; color: #241a02; }
.pv-name {
  background: #f4f4f5; color: #12131a; border-radius: 0 0 8px 8px; padding: 4px 2px;
  font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-meta { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 5px; }
.pv-meta b.pos { color: #34d399; }
.pv-meta b.warn { color: #fbbf24; }

/* --- Las filas, igual que Mercado y Cláusulas --- */
.pv-rows { display: flex; flex-direction: column; gap: 12px; }
.pv-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(158deg, rgba(31,33,39,0.92) 0%, rgba(18,19,23,0.92) 100%);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; padding: 15px 18px;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.06) inset;
}
.pv-avatar {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: 14px; color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px;
  flex-shrink: 0; position: relative; overflow: hidden;
}
.pv-id { flex: 1 1 190px; min-width: 190px; }
.pv-card-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; }
/* Puntos de la temporada junto al nombre, como en el panel desde VR26. */
.pv-points {
  display: inline-block; margin-left: 9px; padding: 2px 9px; border-radius: 999px;
  background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.28);
  color: #34d399; font-family: var(--mono); font-size: 11.5px; font-weight: 800; vertical-align: middle;
}
.pv-card-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px;
  font-size: 12.5px; color: var(--muted); margin-top: 5px;
}
.pv-stars { white-space: nowrap; letter-spacing: 1px; font-size: 10px; }
.pv-card-sub .tone-pos { color: #34d399; font-weight: 700; }
.pv-card-sub .tone-warn { color: #fbbf24; font-weight: 700; }
.pv-actions {
  display: flex; align-items: center; gap: 16px; margin-left: auto;
  padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.08);
}
.pv-figs { display: flex; flex-direction: column; gap: 9px; }
.pv-figs .fig { display: flex; flex-direction: column; gap: 1px; }
.pv-figs .lbl {
  font-size: 9.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 700; white-space: nowrap;
}
.pv-figs .val { font-family: var(--mono); font-weight: 800; font-size: 19px; white-space: nowrap; }
.pv-figs .val.ref { font-size: 13px; color: var(--muted); }

/* El rojo solo en la acción que mueve dinero, misma regla que el panel. */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(232,57,63,0.55);
  background: linear-gradient(180deg, #e8393f 0%, #b62a2f 100%);
  color: #fff; font-family: var(--mono); font-weight: 800; font-size: 13px; white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(232,57,63,0.75);
}
.pv-stack { display: flex; flex-direction: column; gap: 7px; min-width: 172px; }
.pv-stack .pv-btn { width: 100%; }
.pv-btn--state {
  background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.28);
  color: #f87171; box-shadow: none;
}
.pv-btn--arm { background: rgba(232,57,63,0.1); color: #ff5a52; box-shadow: none; }
.pv-btn--ghost {
  background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.09);
  color: var(--text); box-shadow: none;
}

@media (max-width: 900px) {
  .preview-grid { grid-template-columns: 1fr; }
  .pv-actions { width: 100%; padding-left: 0; border-left: none; justify-content: space-between; }
}