/* Avivate — identidad: alta tecnología, transparencia, Argentina. Números SIEMPRE en mono.

   RETEMAR: tocá SOLO los dos bloques de :root. La "paleta cruda" son los colores físicos;
   los "tokens semánticos" dicen qué ROL cumple cada uno y son lo único que usa el resto
   del archivo (los tintes translúcidos derivan por color-mix, así siguen a la paleta). */

:root {
  /* ── Paleta cruda ── */
  --noche: #0b0f14;
  --noche-suave: #0f1520;
  --pizarra: #121a26;
  --grafito: #1d2938;
  --nube: #dde6f0;
  --niebla: #8fa1b6;
  --celeste-bandera: #74acdf;
  --celeste-claro: #9cc9f0;
  --sol-de-mayo: #f6b40e;
  --menta: #2fd48f;
  --coral: #ff6b6b;
  --tinta-oscura: #06111c;
  --tinta-sobre-sol: #171204;

  /* ── Tokens semánticos ── */
  --fondo: var(--noche);                    /* fondo de la página */
  --fondo-suave: var(--noche-suave);        /* fondos secundarios (inputs, cajas) */
  --panel: var(--pizarra);                  /* superficie de cards y paneles */
  --borde: var(--grafito);                  /* todos los bordes */
  --texto: var(--nube);
  --texto-suave: var(--niebla);
  --interactivo: var(--celeste-bandera);    /* links, botones, foco */
  --interactivo-vivo: var(--celeste-claro); /* hover de lo interactivo */
  --sobre-interactivo: var(--tinta-oscura); /* texto encima de un botón interactivo */
  --marca: var(--sol-de-mayo);              /* identidad: punto del logo, etiquetas, pro */
  --sobre-marca: var(--tinta-sobre-sol);    /* texto encima del color de marca */
  --exito: var(--menta);                    /* plata, márgenes, vivo, positivo */
  --peligro: var(--coral);                  /* advertencias y negativo */

  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

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

html { scroll-behavior: smooth; font-size: 17.5px; }

body {
  background: var(--fondo);
  background-image: radial-gradient(1200px 500px at 70% -10%, color-mix(in srgb, var(--interactivo) 7%, transparent), transparent),
                    radial-gradient(800px 400px at 10% 20%, color-mix(in srgb, var(--marca) 4%, transparent), transparent);
  color: var(--texto);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--interactivo); text-decoration: none; }
a:hover { color: var(--interactivo-vivo); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.marca, .marca-pie {
  font-family: var(--mono);
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--texto);
}
.punto { color: var(--marca); }
.bandera { font-size: 1.05rem; }
.nav-marca { display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
.tagline {
  font-family: var(--mono); font-size: 0.78rem; color: var(--texto-suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a { color: var(--texto-suave); font-size: 0.95rem; }
.nav-links a:hover { color: var(--texto); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.boton {
  display: inline-block;
  background: var(--interactivo); color: var(--sobre-interactivo) !important;
  font-weight: 600; border-radius: 8px;
  padding: 0.7rem 1.4rem;
  border: none; cursor: pointer; font-size: 1rem;
  transition: transform 0.1s, background 0.15s;
}
.boton:hover { background: var(--interactivo-vivo); transform: translateY(-1px); }
.boton-chico { padding: 0.45rem 0.95rem; font-size: 0.9rem; }
.boton-fantasma {
  background: transparent; color: var(--texto) !important;
  border: 1px solid var(--borde);
}
.boton-fantasma:hover { background: var(--panel); border-color: var(--interactivo); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.seccion { padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem); max-width: 1120px; margin: 0 auto; }
.seccion-angosta { max-width: 820px; }

.etiqueta {
  font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--marca); margin-bottom: 0.8rem;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.12; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.01em; margin-bottom: 1rem; }
h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }

.texto-suave { color: var(--texto-suave); }
.acento { color: var(--interactivo); }
.plata { color: var(--exito); font-family: var(--mono); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center;
  padding-top: clamp(3rem, 8vw, 6rem);
}
.hero p.bajada { margin: 1.3rem 0 2rem; font-size: 1.13rem; color: var(--texto-suave); max-width: 34rem; }
.hero .ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.badge-vivo {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--exito);
  border: 1px solid color-mix(in srgb, var(--exito) 35%, transparent); border-radius: 999px;
  padding: 0.3rem 0.85rem; margin-bottom: 1.4rem;
  background: color-mix(in srgb, var(--exito) 6%, transparent);
}
.pulso {
  width: 8px; height: 8px; border-radius: 50%; background: var(--exito);
  animation: pulso 1.6s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--exito) 60%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--exito) 0%, transparent); }
}

/* ── Panel terminal (stats) ──────────────────────────────────────────────── */
.terminal {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.terminal-cabecera {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.65rem 1rem; border-bottom: 1px solid var(--borde);
  font-family: var(--mono); font-size: 0.78rem; color: var(--texto-suave);
}
.terminal-cabecera .luz { width: 10px; height: 10px; border-radius: 50%; }
.luz-r { background: #ff5f57; } .luz-a { background: #febc2e; } .luz-v { background: #28c840; }
.terminal-cabecera span { margin-left: 0.6rem; }

.grilla-stats { display: grid; grid-template-columns: 1fr 1fr; }
.stat {
  padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--borde);
}
.stat:nth-child(odd) { border-right: 1px solid var(--borde); }
.stat:nth-last-child(-n+2) { border-bottom: none; }
.stat .valor { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; color: var(--texto); }
.stat .valor.verde { color: var(--exito); }
.stat .valor.celeste { color: var(--interactivo); }
.stat .nombre { font-size: 0.8rem; color: var(--texto-suave); margin-top: 0.15rem; }

/* ── Manifiesto (la bajada de línea) ─────────────────────────────────────── */
.manifiesto {
  border-left: 3px solid var(--marca);
  background: linear-gradient(90deg, color-mix(in srgb, var(--marca) 5%, transparent), transparent 60%);
  padding: 1.8rem 2rem; border-radius: 0 12px 12px 0;
}
.manifiesto p { font-size: 1.15rem; margin-bottom: 1rem; max-width: 44rem; }
.manifiesto p:last-child { margin-bottom: 0; }
.manifiesto strong { color: var(--marca); }
.manifiesto .remate { color: var(--texto); font-weight: 600; font-size: 1.25rem; }

/* ── Cards (pasos, planes) ───────────────────────────────────────────────── */
.grilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
.grilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; }

.card {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
  padding: 1.6rem;
}
.card .numero {
  font-family: var(--mono); font-size: 0.85rem; color: var(--interactivo);
  border: 1px solid var(--borde); border-radius: 6px;
  display: inline-block; padding: 0.1rem 0.55rem; margin-bottom: 0.9rem;
}
.card p { color: var(--texto-suave); font-size: 0.95rem; }

/* Mismo formato de tabla para el ejemplo de la mecánica y para la proyección del 1%: son la
   misma pieza visual (números en mono sobre una card), así que comparten regla en vez de
   duplicarla. */
.ejemplo, .tabla-compuesto { font-family: var(--mono); font-size: 0.9rem; margin-top: 2rem; overflow-x: auto; }
.ejemplo table, .tabla-compuesto table { width: 100%; border-collapse: collapse; }
.ejemplo td, .ejemplo th,
.tabla-compuesto td, .tabla-compuesto th { padding: 0.55rem 1rem; text-align: left; border-bottom: 1px solid var(--borde); }
.ejemplo th, .tabla-compuesto th { color: var(--texto-suave); font-weight: 500; font-size: 0.8rem; }
.ejemplo .resultado td { border-bottom: none; color: var(--exito); font-weight: 700; }

/* ── Interés compuesto ───────────────────────────────────────────────────── */
.tabla-compuesto .numero-celda { text-align: right; white-space: nowrap; }
.tabla-compuesto th:not(:first-child) { text-align: right; }
.tabla-compuesto .verde { color: var(--exito); }
.tabla-compuesto .resultado td { border-bottom: none; font-weight: 700; font-size: 1.02rem; }
.tabla-compuesto .multiplo { color: var(--texto-suave); font-weight: 400; font-size: 0.8rem; }
.tabla-compuesto .pie-tabla {
  font-size: 0.78rem; color: var(--texto-suave); padding: 0.7rem 1rem 0; border-top: 1px solid var(--borde);
}
/* El aviso NO es letra chica: va del mismo tamaño que el resto y pegado a la tabla, porque el
   número de arriba sin estos supuestos es exactamente lo que promete un esquema. */
.aviso-honesto {
  margin-top: 1.2rem; padding: 1.1rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--peligro) 35%, transparent); border-radius: 12px;
  background: color-mix(in srgb, var(--peligro) 6%, transparent);
}
.aviso-honesto p { color: var(--texto-suave); font-size: 0.92rem; }
.aviso-honesto p + p { margin-top: 0.7rem; }
.aviso-honesto strong { color: var(--texto); }

/* ── Planes ──────────────────────────────────────────────────────────────── */
.plan { display: flex; flex-direction: column; }
.plan ul { list-style: none; margin: 1.2rem 0 1.6rem; flex: 1; }
.plan li { padding: 0.42rem 0; color: var(--texto-suave); font-size: 0.97rem; }
.plan li::before { content: "→ "; color: var(--interactivo); font-family: var(--mono); }
.plan li.no::before { content: "✕ "; color: var(--peligro); }
.plan li.no { opacity: 0.6; }
.plan .precio { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; }
.plan-pro { border-color: color-mix(in srgb, var(--marca) 50%, transparent); position: relative; }
.plan-pro .cinta {
  position: absolute; top: -0.7rem; right: 1.2rem;
  background: var(--marca); color: var(--sobre-marca); font-weight: 700; font-size: 0.75rem;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.2rem 0.7rem; border-radius: 6px;
}

/* ── Tablero de portada ──────────────────────────────────────────────────── */
.tablero-portada { padding-top: 2rem; }
.tablero-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.titulo-plataforma { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-top: 0.6rem; }
.strip-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-end; }
.mini-stat { display: flex; flex-direction: column; }
.mini-stat .valor { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; }
.mini-stat .valor.verde { color: var(--exito); }
.mini-stat .valor.celeste { color: var(--interactivo); }
.mini-stat .nombre { font-size: 0.72rem; color: var(--texto-suave); }
.aclaracion { opacity: 0.7; }

.tablero-grilla { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
/* La columna izquierda arranca con el latido ("datos actualizados hace N min"), que vive dentro
   del fragmento que refresca HTMX y por eso no se puede sacar de ahí. El aside compensa esa
   altura para que su borde superior quede a la misma línea que la primera card. */
.tablero-aside {
  position: sticky; top: 4.6rem; display: flex; flex-direction: column; gap: 1rem;
  margin-top: calc(1rem + 0.8rem);
}
.aside-box {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
  padding: 1.2rem 1.3rem;
}
.aside-box h3 { font-size: 1.02rem; }
.aside-box p { color: var(--texto-suave); font-size: 0.88rem; margin: 0.5rem 0 0.9rem; }
.aside-telegram { border-color: color-mix(in srgb, var(--interactivo) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--interactivo) 8%, var(--panel)), var(--panel)); }
.aside-telegram .boton { width: 100%; text-align: center; }
.enlace-secundario { display: inline-block; margin-top: 0.6rem; font-size: 0.82rem; color: var(--texto-suave); text-decoration: underline; }
.lista-casas { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.7rem; }
.lista-casas li { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.88rem; line-height: 1; }
.lista-casas img { display: block; border-radius: 4px; }
.proximamente { font-size: 0.78rem; color: var(--texto-suave); margin-top: 0.7rem; font-style: italic; }

/* ── Cards de arbitraje ──────────────────────────────────────────────────── */
.latido {
  font-family: var(--mono); font-size: 0.78rem; color: var(--exito);
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; min-height: 1rem;
}
.lista-cards { display: flex; flex-direction: column; gap: 0.6rem; }

.card-arb {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
  overflow: hidden;
}
.card-viva { border-color: color-mix(in srgb, var(--exito) 35%, transparent); }
.card-vencida { opacity: 0.72; }

.card-cabecera {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.9rem; border-bottom: 1px solid var(--borde);
  font-family: var(--mono); font-size: 0.72rem; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.separador-flexible { flex: 1; }
.hora-partido { text-transform: none; letter-spacing: 0; }
.badge-card { margin-bottom: 0; padding: 0.15rem 0.6rem; font-size: 0.72rem; }
.chip-vencida {
  font-size: 0.72rem; text-transform: none; letter-spacing: 0;
  border: 1px solid var(--borde); border-radius: 999px; padding: 0.15rem 0.6rem;
}

.card-cuerpo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.55rem 0.9rem; flex-wrap: wrap;
}
.partido .equipo { font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.mercado-nombre { color: var(--texto-suave); font-size: 0.78rem; margin-top: 0.1rem; }

.cuotas { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.caja-cuota {
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 8px;
  padding: 0.3rem 0.7rem; min-width: 5.4rem;
}
.rotulo-cuota {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--texto-suave);
}
.valor-cuota { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; }
/* Doble clase a propósito: `.chip` (más abajo en este archivo) también define `display` y, con
   la misma especificidad, ganaba por orden — el chip quedaba `inline-block` y el logo `display:
   block` se iba a un renglón propio ARRIBA del nombre. Con `.chip.chip-casa` el logo queda
   siempre a la izquierda, sin depender del orden de las reglas. */
.chip.chip-casa { display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1; }
.chip-casa img { display: block; border-radius: 3px; flex-shrink: 0; }

.card-banda {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0.4rem 0.9rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--exito) 16%, transparent), color-mix(in srgb, var(--exito) 5%, transparent));
  border-top: 1px solid color-mix(in srgb, var(--exito) 30%, transparent);
}
.banda-apagada { background: var(--fondo-suave); border-top: 1px solid var(--borde); }
.margen-banda { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; color: var(--exito); }
.banda-apagada .margen-banda { color: var(--texto-suave); }
.roi-banda { font-family: var(--mono); font-size: 0.82rem; color: var(--texto-suave); align-self: baseline; }
.boton-calcular {
  font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--interactivo) 10%, var(--fondo)); color: var(--interactivo-vivo); border: 1px solid color-mix(in srgb, var(--interactivo) 40%, transparent);
  border-radius: 8px; padding: 0.32rem 0.9rem; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.boton-calcular:hover { background: color-mix(in srgb, var(--interactivo) 18%, var(--fondo)); transform: translateY(-1px); }
.boton-pro { color: var(--marca); border-color: color-mix(in srgb, var(--marca) 40%, transparent); background: color-mix(in srgb, var(--marca) 6%, transparent); }

/* ── Modal calculadora ───────────────────────────────────────────────────── */
dialog#modal-calc {
  background: transparent; border: none; padding: 1rem; margin: auto;
  max-width: 34rem; width: calc(100% - 2rem);
}
dialog#modal-calc::backdrop { background: color-mix(in srgb, var(--fondo) 75%, transparent); backdrop-filter: blur(3px); }
.modal-calc {
  position: relative; background: var(--panel); border: 1px solid var(--borde);
  border-radius: 14px; padding: 1.8rem; color: var(--texto);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.cerrar-modal {
  position: absolute; top: 0.9rem; right: 0.9rem;
  background: transparent; border: none; color: var(--texto-suave);
  font-size: 1.1rem; cursor: pointer;
}
.cerrar-modal:hover { color: var(--texto); }
.modal-titulo { font-size: 1.3rem; margin-bottom: 0.15rem; }
.modal-sub { font-size: 0.88rem; }
.countdown { font-family: var(--mono); font-size: 0.85rem; color: var(--interactivo); margin: 0.5rem 0 1rem; min-height: 1.1rem; }
.modal-monto input { font-size: 1.15rem; }
.modal-casas { margin: 1rem 0 0.6rem; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
#calc-toggles { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.toggle-casa {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.82rem;
  background: var(--fondo-suave); color: var(--texto);
  border: 1px solid var(--interactivo); border-radius: 8px;
  padding: 0.35rem 0.7rem; cursor: pointer;
}
.toggle-casa img { display: block; border-radius: 3px; }
.toggle-casa.apagada { border-color: var(--borde); color: var(--texto-suave); opacity: 0.55; text-decoration: line-through; }
.fila-modal {
  display: grid; grid-template-columns: 5.2rem 1fr 3rem 1fr 1fr; gap: 0.5rem;
  align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--borde);
  font-size: 0.9rem;
}
.fila-modal .valor-cuota { font-size: 1rem; }
.modal-totales { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 1rem; }
.modal-totales div { display: flex; flex-direction: column; }
.modal-totales span { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-suave); }
.modal-totales strong { font-family: var(--mono); font-size: 1.05rem; }
.modal-totales .beneficio strong { color: var(--exito); }

.chip {
  display: inline-block; font-family: var(--mono); font-size: 0.75rem;
  border: 1px solid var(--borde); border-radius: 6px;
  padding: 0.1rem 0.5rem; margin: 0.1rem 0.2rem 0.1rem 0;
  color: var(--interactivo);
}

/* El dato pro NUNCA viaja al navegador: esto blurea un placeholder, no el dato. */
.borroso {
  filter: blur(5px); user-select: none; opacity: 0.8;
}
.candado-pro {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--marca); border: 1px solid color-mix(in srgb, var(--marca) 40%, transparent);
  border-radius: 6px; padding: 0.12rem 0.5rem; margin-left: 0.55rem;
  vertical-align: middle;
}

.nota-tabla { margin-top: 0.9rem; font-size: 0.85rem; color: var(--texto-suave); }
.vacio {
  text-align: center; padding: 3rem 1rem !important; color: var(--texto-suave);
}
.vacio .grande { font-size: 1.05rem; color: var(--texto); margin-bottom: 0.3rem; }

/* ── Calculadora ─────────────────────────────────────────────────────────── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; align-items: start; }
.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: 0.82rem; color: var(--texto-suave); margin-bottom: 0.3rem; font-family: var(--mono); }
.campo input, .campo select {
  width: 100%; background: var(--fondo-suave); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 0.65rem 0.8rem; font-size: 1rem; font-family: var(--mono);
}
.campo input:focus { outline: none; border-color: var(--interactivo); }

.conmutador { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; margin-bottom: 1.4rem; }
.conmutador button {
  background: transparent; color: var(--texto-suave); border: none;
  padding: 0.5rem 1.1rem; cursor: pointer; font-size: 0.9rem; font-family: var(--mono);
}
.conmutador button.activo { background: var(--interactivo); color: var(--sobre-interactivo); font-weight: 700; }

.fila-pata { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0.7rem; }
.fila-pata.sin-saldo { grid-template-columns: 1.2fr 1fr; }

.resultado-calc { position: sticky; top: 5rem; }
.resultado-grande { font-family: var(--mono); font-size: 2.2rem; font-weight: 700; }
.resultado-grande.negativo { color: var(--peligro); }
.resultado-grande.positivo { color: var(--exito); }
.detalle-stakes { margin-top: 1rem; font-family: var(--mono); font-size: 0.92rem; }
.detalle-stakes td { padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--borde); }
.detalle-stakes tr:last-child td { border-bottom: none; }
.advertencia-calc {
  margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: 8px;
  background: color-mix(in srgb, var(--peligro) 8%, transparent); border: 1px solid color-mix(in srgb, var(--peligro) 35%, transparent);
  color: var(--peligro); font-size: 0.9rem;
}
.acciones-calc { margin-top: 1.2rem; display: flex; gap: 0.7rem; }

/* ── Sección Telegram ────────────────────────────────────────────────────── */
.icono-telegram { vertical-align: -0.28em; margin-right: 0.15rem; }
.icono-titulo { vertical-align: -0.22em; }
.telegram-grilla { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 2rem; align-items: start; margin-top: 1rem; }
.telegram-copy p { color: var(--texto-suave); font-size: 1.05rem; margin-bottom: 1rem; max-width: 38rem; }
.telegram-copy strong { color: var(--texto); }
.lista-pro { list-style: none; margin: 1.2rem 0; }
.lista-pro li { padding: 0.4rem 0; font-size: 1rem; }
.lista-pro li::before { content: "→ "; color: var(--interactivo); font-family: var(--mono); }
.nota-free { font-size: 0.88rem; }
.caja-precio {
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--interactivo) 45%, transparent);
  border-radius: 14px; padding: 1.8rem; text-align: center; position: sticky; top: 4.6rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.precio-grande { font-family: var(--mono); font-size: 2.6rem; font-weight: 700; margin: 0.4rem 0 1.2rem; }
.precio-periodo { font-size: 1rem; color: var(--texto-suave); font-weight: 400; }
.boton-pagar { width: 100%; font-size: 1.05rem; padding: 0.85rem 1rem; }
.boton-deshabilitado { opacity: 0.5; cursor: default; pointer-events: none; display: inline-block; }
.micro-pago { font-size: 0.78rem; color: var(--texto-suave); margin-top: 0.8rem; }

/* ── Términos ────────────────────────────────────────────────────────────── */
.legal h2 { margin-top: 2.5rem; font-size: 1.35rem; }
.legal p, .legal li { color: var(--texto-suave); margin-bottom: 0.8rem; }
.legal ul { margin: 0 0 1rem 1.4rem; }
.legal .destacado {
  background: color-mix(in srgb, var(--peligro) 7%, transparent); border: 1px solid color-mix(in srgb, var(--peligro) 30%, transparent);
  border-radius: 10px; padding: 1.2rem 1.4rem; margin: 1.4rem 0;
}
.legal .destacado p { color: var(--texto); margin-bottom: 0.5rem; }

/* ── Comunidad ───────────────────────────────────────────────────────────── */
.comunidad {
  text-align: center; border: 1px dashed var(--borde); border-radius: 14px;
  padding: 3rem 2rem; background: var(--fondo-suave);
}
.comunidad p { max-width: 36rem; margin: 0.6rem auto 1.4rem; color: var(--texto-suave); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--borde); margin-top: 4rem; padding: 3rem clamp(1rem, 4vw, 3rem) 2rem; }
.pie-grilla { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; max-width: 1120px; margin: 0 auto; }
.pie-grilla a { display: block; color: var(--texto-suave); font-size: 0.9rem; padding: 0.2rem 0; }
.pie-titulo { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-suave); margin-bottom: 0.6rem; }
.pie-bajada { color: var(--texto-suave); font-size: 0.9rem; margin-top: 0.3rem; }
.pie-bandera { margin-top: 0.8rem; font-size: 0.85rem; color: var(--texto-suave); }
.pie-legal { max-width: 1120px; margin: 2rem auto 0; border-top: 1px solid var(--borde); padding-top: 1.5rem; }
.pie-legal p { font-size: 0.8rem; color: var(--texto-suave); margin-bottom: 0.6rem; max-width: 62rem; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html { font-size: 16px; }
  body { overflow-x: clip; }
  .seccion { padding-left: 1rem; padding-right: 1rem; }
  .fecha-abs { display: none; }
  .tablero-portada .card-arb:nth-child(n+6) { display: none; }
  .card-cabecera { font-size: 0.66rem; gap: 0.4rem; padding: 0.3rem 0.7rem; }
  .card-cuerpo { gap: 0.5rem; padding: 0.5rem 0.7rem; }
  .partido .equipo { font-size: 0.9rem; }
  .caja-cuota { padding: 0.25rem 0.5rem; min-width: 4.6rem; }
  .valor-cuota { font-size: 0.95rem; }
  .card-banda { padding: 0.35rem 0.7rem; gap: 0.7rem; flex-wrap: wrap; }
  .margen-banda { font-size: 0.88rem; }
  .detalle-stakes { display: block; overflow-x: auto; }
  .precio-grande { font-size: 2.1rem; }
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .grilla-3 { grid-template-columns: 1fr; }
  .grilla-2 { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .resultado-calc { position: static; }
  .pie-grilla { grid-template-columns: 1fr; }
  .nav-links { gap: 0.9rem; }
  .nav-links a:not(.boton) { display: none; }
  .tagline { display: none; }
  .tablero-cabecera { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .tablero-grilla { grid-template-columns: 1fr; }
  .tablero-aside { position: static; order: -1; margin-top: 0; }
  .telegram-grilla { grid-template-columns: 1fr; }
  .caja-precio { position: static; }
  .card-cuerpo { flex-direction: column; align-items: stretch; }
  .cuotas { justify-content: stretch; }
  .caja-cuota { flex: 1; }
  .card-cabecera { flex-wrap: wrap; }
  .modal-totales { grid-template-columns: repeat(2, 1fr); }
  .fila-modal { grid-template-columns: 4rem 1fr 2.6rem; }
  .fila-modal span:nth-child(4), .fila-modal span:nth-child(5) { grid-column: span 3; }
}