:root {
  --bg: #0f1410;
  --bg-alt: #161d17;
  --card: #1b241c;
  --border: #2a352b;
  --text: #eef2ee;
  --text-dim: #a9b6a9;
  --brand: #f2b705;
  --brand-dim: #b98a04;
  --accent: #4caf6e;
  --radius: 14px;
  --maxw: 980px;
}

* { box-sizing: border-box; }

/* Sin esto, el atributo "hidden" no ocultaba nada en cualquier elemento cuya clase fije su
   propio "display" (p.ej. .cards { display: grid }, .callout { display: flex }...): una
   regla de autor con esa especificidad gana siempre a la hoja de estilos por defecto del
   navegador ([hidden] { display: none }, de origen "user agent"), sin importar el orden -
   el elemento se quedaba visible aunque el JS pusiera el.hidden = true (hallazgo 2026-08-17,
   ver notas.txt: #precios-planes en /precios/ no se ocultaba estando ya suscrito). Esta
   regla, al ser tambien de autor pero mas especifica ([hidden] + !important), gana siempre. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

a { color: inherit; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(15, 20, 16, 0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.nav-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-btn {
  display: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
}

.nav-toggle-btn:hover { background: var(--bg-alt); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}

.brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

nav.site-nav {
  display: flex;
  gap: 22px;
  font-size: 0.92rem;
}

nav.site-nav a {
  text-decoration: none;
  color: var(--text-dim);
}

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

nav.site-nav a.active {
  color: var(--brand);
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lang-switch-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* Separado del resto de pestañas con margen + borde, no solo el gap
     normal entre enlaces del nav - para que se lea como un grupo aparte. */
  margin-left: 12px;
  padding-left: 24px;
  border-left: 1px solid var(--border);
}

.lang-switch-header a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}

.lang-switch-header a:hover { color: var(--text); }

.lang-switch-header a.active { color: var(--brand); }

.lang-switch-header .lang-sep { color: var(--border); font-size: 0.85rem; }

/* Menú móvil: antes de esto, nav.site-nav simplemente se ocultaba por debajo de 760px
   sin ningún sustituto — sin forma de navegar a otra sección desde el móvil. Desplegable
   sin JS: el checkbox oculto + label (arriba) hacen de botón hamburguesa. */
@media (max-width: 760px) {
  .nav-toggle-btn { display: block; }

  .header-right {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 14px;
  }

  .nav-toggle-input:checked ~ .header-right { display: flex; }

  nav.site-nav {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }

  /* En columna el borde izquierdo no separa nada - se cambia a un borde
     superior + hueco. */
  .lang-switch-header {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-top: 14px;
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

.hero {
  padding: 72px 0 56px;
  text-align: center;
}

.hero-logo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0 0 18px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 10px;
}

.hero .tagline {
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 22px;
  font-size: 1.1rem;
}

.hero p.lead {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-dim);
  font-size: 1.05rem;
}

/* Fondo de /vivigo/: el .hero base es liso (mismo que usan las paginas de
   texto legal, cuenta, etc.), pero para la landing de un juego se sentia
   "triste" comparado con el propio juego, que ya usa manchas de color
   suaves de fondo (ver FondoSuave.jsx en viviGo/screens/components) - aqui
   se traduce esa misma idea a CSS puro (radial-gradient). Alcance limitado
   a .hero-vivigo a proposito: el resto de paginas (legal, cuenta...) se
   quedan con el .hero liso. */
.hero-vivigo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 12% 15%, rgba(242, 183, 5, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 10%, rgba(76, 175, 110, 0.22), transparent 60%),
    radial-gradient(ellipse 65% 60% at 50% 105%, rgba(242, 183, 5, 0.1), transparent 65%);
}

.hero-vivigo .wrap {
  position: relative;
  z-index: 1;
}

/* Logotipo de viviGo (assets/vivigo-logo.png, recorte de logosYAnimacion/logovivigoDado.png
   con transparencia real): sustituye al "🎮 viviGo" en texto plano por el lockup de marca
   real del juego (mismo dorado/verde que --brand/--accent, no es casualidad). Va dentro del
   <h1> como unica hija (con su alt) para conservar el encabezado semantico sin duplicar el
   nombre visualmente dos veces. */
.hero-logo-vivigo {
  height: 84px;
  width: auto;
  margin: 0 0 8px;
}

/* Mascotas a los lados del hero (assets/logo-mono.png, el mono de la marca, y
   assets/carrera-de-la-rata.png, la rata de la Carrera de la Rata que tambien es un
   tablero/mecanica del juego) - mismos PNG ya recortados a transparente que usan el
   header (logo-mono.png) y las tarjetas de /herramientas/ (carrera-de-la-rata.png), sin
   procesar nada nuevo. Ocupan el hueco vacio a los lados de .wrap (980px) en pantallas
   anchas, que es justo lo que pedia el usuario para que la landing no se sintiera tan
   plana. Ocultas por debajo de 1150px via @media: a partir de ahi ya no cabe espacio
   limpio entre .wrap y el borde de la seccion sin solaparse con el texto. */
.hero-side-art {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.hero-side-art-left { left: 5%; transform: translateY(-50%) scaleX(-1); }
.hero-side-art-right { right: 5%; }

@media (max-width: 1150px) {
  .hero-side-art { display: none; }
}

section {
  padding: 56px 0;
}

section:nth-of-type(even) {
  background: var(--bg-alt);
}

section > .wrap > h2 {
  font-size: 1.6rem;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Icono de casa junto al titulo "Inmobiliario" de /herramientas/: unico
   sitio donde aparece ahora (antes se repetia en las 3 tarjetas de la
   seccion, ver .card .emoji mas abajo). */
.section-icon { width: 28px; height: 28px; object-fit: contain; }

section > .wrap > p.section-lead {
  color: var(--text-dim);
  margin: 0 0 32px;
  max-width: 640px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* Para grupos de 1-2 tarjetas (p.ej. categorías de /herramientas/ con pocas
   herramientas todavía): minmax(240px,1fr) estira una tarjeta sola a todo
   el ancho del contenedor (980px), se ve rota. Con un tope de 320px y
   justify-content:start las tarjetas mantienen un tamaño razonable y se
   quedan alineadas a la izquierda en vez de centradas/estiradas. */
.cards.cards-compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: start;
}

/* Fondo suave (var(--card), no var(--bg-alt): ese tono resultó casi imperceptible sobre
   var(--bg) en este tema oscuro - mismo hallazgo que .account-tip mas abajo) compartido
   por defecto por toda .card, sea o no un enlace - da cuerpo visual y separa unas de otras
   sin necesidad de un borde. Lo que diferencia a simple vista una .card pulsable de una que
   no lo es es el borde + la elevación al pasar el ratón, exclusivos de a.card (ver debajo):
   una <div class="card"> (planes de precios, progreso de cuenta...) se queda con el panel
   pero sin esas dos señales de "esto se puede pulsar". Excepción: .card-plain (ver más
   abajo) para las que ni siquiera llevan un CTA dentro. */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

a.card {
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.card:hover {
  border-color: var(--brand-dim);
  transform: translateY(-2px);
}

/* El CTA de una .card se queda pegado abajo del todo (margin-top: auto en un flex en
   columna), no justo debajo del texto - así no se mueve de sitio segun cuantas lineas
   ocupe la descripcion de esa tarjeta en concreto. Sin esto, en una fila de varias .card
   (p.ej. los 3 planes de /precios/) la tarjeta con el texto mas largo - el semestral,
   "26,95 €/6 meses (equivale a ~4,49 €/mes)." es mas largo que las otras dos y se parte en
   2 lineas - dejaba su botón más abajo que el resto, hallazgo del usuario con una captura.
   .cards ya estira las .card de una fila a la misma altura (align-items: stretch, valor
   por defecto de CSS grid), así que esto es lo único que faltaba para alinear los botones
   entre sí. */
.card > .cta {
  margin-top: auto;
}

/* .card-plain (junto a .card, no en su lugar: class="card card-plain") quita el panel a
   las .card que ni siquiera llevan un enlace o botón dentro - viviGo "¿Qué te vas a
   encontrar?" es el caso: 3 tarjetas puramente informativas, sin ningún sitio al que
   apunten ni un CTA propio. A diferencia de precios/cuenta (SÍ llevan un CTA real dentro,
   se quedan con el panel de .card), aquí no hay nada que agrupar visualmente como si fuera
   una acción, así que se quedan como texto plano en columna. */
.card-plain {
  background: none;
  padding: 0;
}

.card .emoji { font-size: 1.8rem; }

/* Insignia circular para los iconos SVG a medida de las 3 tarjetas de /vivigo/
   ("¿Qué te vas a encontrar?") - sustituye a los emoji sueltos (🎲/👥/🔥), que
   quedaban desentonados frente al resto de iconografía del sitio (2026-08-19). */
.card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(242, 183, 5, 0.12);
  color: var(--brand);
}

.card-badge svg { width: 26px; height: 26px; }

/* Iconos de las 3 tarjetas de /herramientas/: mismo tamaño (caja 64x64,
   object-fit: contain conserva la proporción de cada imagen sin recortarla
   ni deformarla) y centrados en su recuadro (align-self, ya que .card es
   flex-column). rentabilidad-inmobiliaria.png y carrera-de-la-rata.png son
   ilustraciones propias del usuario (fondo original quitado a
   transparente); interes-compuesto.png es un icono generado a medida en
   el mismo estilo (mismo mecanismo de sustitución que rat_race_icon_h1
   más abajo, ver tool_card_icon() en gen_site.py). */
.card-icon { width: 64px; height: 64px; object-fit: contain; align-self: center; flex-shrink: 0; }

/* Versión grande del icono de Carrera de la Rata solo para el <h1> de su
   propia página de calculadora (contexto con más espacio que la tarjeta). */
.icon-ratrace-img-h1 { width: 90px; vertical-align: -1.6rem; margin-right: 4px; }

.card h3 { margin: 0; font-size: 1.15rem; }

.card p { margin: 0; color: var(--text-dim); font-size: 0.94rem; }

.cta {
  display: inline-block;
  background: var(--brand);
  color: #16210f;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  margin-top: 8px;
}

.cta:hover { background: #ffc84d; }

.cta.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text-dim);
}

/* Sin esto, pasar el ratón por un botón secundario no hacía nada visible: .cta:hover pone
   fondo dorado, pero .cta.secondary (misma especificidad, declarada después) lo pisaba con
   su propio fondo transparente - el botón no se remarcaba nunca al pasar el ratón por
   encima (hallazgo del usuario 2026-08-18, p.ej. "Plan mensual"/"Plan anual"). */
.cta.secondary:hover {
  background: var(--bg-alt);
  border-color: var(--brand);
}

/* Insignia de ahorro del plan anual (2026-08-18, a petición expresa): en /precios/ va
   junto al "Plan anual" del card; dentro de /cuenta/ va DENTRO del propio botón (no como
   elemento hermano) para heredar gratis su atributo "hidden" sin tener que sincronizar
   visibilidad aparte en js/cuenta.js. */
.plan-savings-badge {
  display: inline-block;
  background: var(--brand);
  color: #16210f;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Etiqueta "muy pronto" para contenido visible pero aun no disponible (hoy: los mini-juegos
   de los niveles 3-8 de la Academia en el hub de /educacion/juego/). Neutra a proposito
   (borde, no relleno dorado) para que no se lea como una promo. */
.soon-badge {
  display: inline-block;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Estado del CTA hacia un nivel de la Academia cuando ese nivel esta
   despublicado ahora mismo (ver academy_cta() en scripts/gen_site.py):
   mismo tamaño que el boton normal, pero sin subrayado de enlace ni
   cursor de mano, para que quede claro que no es clicable. */
.cta.secondary.disabled {
  color: var(--text-dim);
  cursor: default;
}

/* Sin esto, un CTA deshabilitado seguía remarcándose con el fondo/borde de
   .cta.secondary:hover al pasar el ratón o tocar en móvil, pese a no hacer
   nada al pulsarlo. Anula el hover para que quede visualmente inerte igual
   que ya lo es funcionalmente. */
.cta.secondary.disabled:hover {
  background: transparent;
  border-color: var(--text-dim);
}

/* Botón destructivo: solo "Eliminar mi cuenta" en el panel de "Mi cuenta". Rojo
   apagado con borde (no relleno) para que no compita con el dorado de marca ni
   invite a pulsarlo sin querer - la acción no se puede deshacer. Mismo rojo que
   .form-error. */
.cta.danger {
  background: transparent;
  color: #e05c5c;
  border: 1px solid #e05c5c;
}
.cta.danger:hover { background: rgba(224, 92, 92, 0.12); }

/* Nota de estado "Suscrito" al final de la comparativa de /precios/ (ver
   #precios-bottom-cta en js/precios.js): a diferencia del CTA de nivel
   despublicado de arriba, aquí NO se reutiliza .cta - probado primero con
   .cta.secondary.disabled (2026-08-23) y el propio usuario señaló que,
   aunque quedara inerte, seguía teniendo forma de botón (píldora + borde),
   lo que invita a pulsarlo igual. Texto plano sin ningún borde ni fondo,
   para que se lea como una etiqueta de estado, no como una acción. */
.status-note {
  display: inline-block;
  margin-top: 8px;
  color: var(--text-dim);
  font-weight: 600;
  text-decoration: none;
}

.book {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.book-cover {
  width: 220px;
  max-width: 40vw;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.book-subtitle {
  color: var(--brand);
  font-weight: 600;
  margin: 0 0 12px;
}

.book-info .section-lead { margin-bottom: 20px; }

@media (max-width: 640px) {
  .book { flex-direction: column; align-items: center; text-align: center; }
}

/* Ruta por niveles de /educacion/ (Academia El Mono Inversor) */
.curriculum {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.level {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}

.level-badge {
  flex-shrink: 0;
  min-width: 3.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}

.level-body h3 { margin: 0 0 4px; font-size: 1.05rem; }
.level-body p { margin: 0; color: var(--text-dim); font-size: 0.92rem; }

.level-body h3 a { color: var(--text); text-decoration: none; }
.level-body h3 a:hover { color: var(--brand); text-decoration: underline; }

@media (max-width: 480px) {
  .level { flex-direction: column; gap: 6px; }
}

/* Cuerpo de una lección de la Academia (/educacion/<nivel>/) */
.lesson-body { max-width: 680px; margin: 0 auto; }

.lesson-body h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.lesson-body h2:first-of-type { margin-top: 0; }

.lesson-body p { margin: 0 0 16px; color: var(--text-dim); }
.lesson-body ul, .lesson-body ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-dim); }
.lesson-body li { margin-bottom: 6px; }
.lesson-body strong { color: var(--text); }

.lesson-tip {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
}

.lesson-tip .tip-label {
  display: block;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.lesson-tip p { margin: 0; color: var(--text); }

.lesson-example {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 24px 0;
}

.lesson-example .example-label {
  display: block;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.lesson-example p { margin: 0 0 8px; color: var(--text); }
.lesson-example p:last-child { margin-bottom: 0; }
.lesson-example ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-dim); }
.lesson-example li { margin-bottom: 4px; }

.lesson-recap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 36px;
}

.lesson-recap h2 { margin-top: 0; }
.lesson-recap ul { margin-bottom: 0; }

.lesson-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

footer.site {
  margin-top: auto;
  background: var(--card);
  padding: 22px 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.footer-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.footer-bar .brand { font-size: 0.92rem; }

.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-dim);
  text-decoration: none;
}

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

/* "Eliminar cuenta" en el footer: solo se muestra con la sesión abierta
   (data-account-user, ver js/account-visibility.js) y más pequeño y apagado que
   Privacidad/Términos/Aviso legal/Contacto - no es algo que la mayoría busque, no
   debe pesar lo mismo que el resto de enlaces legales. */
.footer-links a.footer-quiet {
  font-size: 0.8rem;
  color: #7a857a;
}
.footer-links a.footer-quiet:hover { color: var(--text-dim); }

.footer-copy {
  font-size: 0.82rem;
  text-align: left;
}

@media (max-width: 640px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Herramientas (calculadoras) */
.tool-page .wrap { padding-top: 40px; padding-bottom: 64px; }

.tool-back {
  display: inline-block;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 760px) {
  .tool-grid { grid-template-columns: 1fr; }
}

.field {
  margin-bottom: 16px;
}

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

.field input,
.field select {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--brand-dim);
}

/* Primer <select> del sitio (calculadoras de impuestos, 2026-08-18): el estilo nativo del
   navegador no hereda el fondo oscuro del tema en todos los navegadores, así que se
   normaliza igual que los <input> de al lado. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a9b6a9' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.field select option {
  background: var(--bg-alt);
  color: var(--text);
}

.results {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 90px;
}

.results h3 { margin-top: 0; }

.result-headline {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 18px;
}

.result-headline.positive { color: var(--accent); }
.result-headline.negative { color: #e05c5c; }

.result-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.result-row:last-child { border-bottom: none; }

.result-row .label { color: var(--text-dim); }

.result-row .value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.result-row .value.positive { color: var(--accent); }
.result-row .value.negative { color: #e05c5c; }

.note {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 18px;
}

.note.positive { color: var(--accent); font-weight: 600; }
.note.negative { color: #e05c5c; font-weight: 600; }
.note.warning { color: var(--brand); font-weight: 600; }

/* ---- Mini-juegos de la Academia (js/academia-juego.js) ----
   Reutiliza .cards/.card (portada de niveles), .results/.result-row/.result-headline y
   .cta (ya definidos arriba para las calculadoras) - solo lo que no existe todavia: la
   tira de progreso y la fila de dos botones de decision. .results.static anula el
   position:sticky pensado para el layout de dos columnas de una calculadora, que aqui
   no aplica (una sola columna, apilado). */
.results.static { position: static; top: auto; }

.game-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.game-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-alt);
}
.game-tab.current { color: #1a1a1a; background: var(--brand); border-color: var(--brand); }
.game-tab.acierto { color: var(--accent); border-color: var(--accent); }
.game-tab.fallo { color: #e05c5c; border-color: #e05c5c; }

.game-decision { display: flex; gap: 12px; margin-top: 20px; }
.game-decision .cta { flex: 1; }
@media (max-width: 480px) { .game-decision { flex-direction: column; } }

.game-recap { list-style: none; margin: 18px 0 0; padding: 0; }
.game-recap li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem;
}
.game-recap li:last-child { border-bottom: none; }
.game-recap .marca { font-weight: 700; }
.game-recap .marca.acierto { color: var(--accent); }
.game-recap .marca.fallo { color: #e05c5c; }

.game-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; }

/* Gráfico de evolución (interés compuesto) */
.chart-block { margin-top: 40px; }

.chart-block h3 { margin: 0 0 16px; font-size: 1.15rem; }

.chart-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.chart-wrap svg { width: 100%; height: auto; display: block; }

.bar-aportado { fill: var(--brand); }
.bar-interes { fill: var(--accent); }
.chart-axis-label { fill: var(--text-dim); font-size: 11px; }

.chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.chart-legend-item { display: flex; align-items: center; gap: 8px; }

.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.swatch-aportado { background: var(--brand); }
.swatch-interes { background: var(--accent); }

/* Bloque "¿Quieres salir antes?" (Carrera de la Rata): mismo lenguaje visual
   que .results/.result-row, para que se lea como una extensión del resultado
   principal en vez de un componente nuevo. */
.speedup-block {
  margin-top: 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.speedup-block h3 { margin: 0 0 6px; }

.speedup-block .section-lead { margin: 0 0 4px; }

.speedup-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.speedup-row:last-child { border-bottom: none; }

.speedup-row .label { color: var(--text-dim); }

.speedup-row .value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.speedup-row.current .label,
.speedup-row.current .value {
  color: var(--brand);
}

/* Dos columnas de resultado lado a lado (p.ej. "al contado" vs "financiado"
   en la calculadora contado-vs-financiado). Reutiliza .result-row dentro de
   cada columna para no crear un tercer estilo de fila de resultado. */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 18px;
}

@media (max-width: 500px) {
  .compare-grid { grid-template-columns: 1fr; }
}

/* Objetivos de enlaces ancla (#precios-planes desde el CTA de fondo de /precios/,
   #vivigo-tableros desde la fila de la tabla comparativa que enlaza a /vivigo/):
   sin esto, el header.site sticky tapa la parte de arriba de la sección al saltar. */
#precios-planes,
#vivigo-tableros {
  scroll-margin-top: 90px;
}

.compare-col h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--text-dim);
}

/* Tabla comparativa (varios % de financiación): primera <table> del sitio
   público - el resto de resultados van en filas .result-row/.speedup-row,
   pero comparar 3 métricas × 5 escenarios en filas sueltas sería menos
   legible que una tabla real. */
.table-scroll { overflow-x: auto; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.compare-table th,
.compare-table td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
}

.compare-table thead th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.compare-table tbody tr.current td {
  color: var(--brand);
  font-weight: 700;
}

/* Aviso/CTA dentro de una herramienta (p.ej. invitar a probar viviGo) */
.callout {
  margin-top: 40px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.callout p { margin: 0; color: var(--text); font-weight: 600; }

/* Páginas legales (privacidad, términos, aviso legal, contacto, eliminar cuenta).
   Tope de 820px en escritorio (antes 700px se veía como una columna fina con
   mucho hueco a los lados); por debajo de ese ancho el bloque llena la pantalla
   y el padding de .wrap (24px) mantiene el margen contra el borde. */
.legal-body {
  max-width: 820px;
}

/* /precios/: mismo bloque de texto legal (h2/p/tabla), pero 700px se veía
   como una columna de móvil metida en una pagina de escritorio ancha -
   aquí hay una tabla comparativa de 3 columnas, no solo texto largo para
   leer, así que le hace falta más aire que a las páginas legales. */
.legal-body.wide {
  max-width: 900px;
}

.legal-body .meta {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.legal-body h2 {
  font-size: 1.15rem;
  margin: 34px 0 10px;
}

.legal-body h2:first-of-type { margin-top: 0; }

.legal-body p,
.legal-body li {
  color: var(--text-dim);
  margin-bottom: 14px;
}

.legal-body ul {
  padding-left: 20px;
  margin: 0 0 14px;
}

.legal-body strong { color: var(--text); }

.legal-body .placeholder {
  color: #e0a95c;
}

.maintenance-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  padding: 24px;
}

.maintenance-logo { margin-bottom: 20px; border-radius: var(--radius); }

.maintenance-screen h1 { margin: 0 0 12px; font-size: 1.8rem; }

.maintenance-screen p {
  color: var(--text-dim);
  max-width: 420px;
  margin: 0;
}

/* /cuenta/* (login, registro, recuperar contraseña) - columna estrecha centrada, a
   diferencia de .legal-body (700px) porque aquí no hay texto largo que leer, solo un
   formulario. */
.account-form {
  max-width: 380px;
  margin: 0 auto 64px;
}

/* Panel de "Mi cuenta" ya logueado (progreso + próximos pasos, ver cuenta-logged-in en
   scripts/gen_content.py): más ancho que el formulario de login/registro porque ya no es
   solo una columna de campos, tiene tarjetas de progreso en fila. Clase alternada por JS
   (js/cuenta.js, wireAuthState) en vez de :has(#cuenta-logged-in:not([hidden])) - más
   predecible entre navegadores y ya estábamos tocando esa misma función para el
   hero/título dinámico (ver más abajo). */
.account-form.logged-in {
  max-width: 760px;
}

.account-form #cuenta-progress {
  margin: 24px 0;
}

/* "Sesión iniciada como X" pasa de <p> normal con el email en negrita a .note (texto
   pequeño y apagado) - con el saludo por nombre en el hero (ver loadGreeting en
   js/cuenta.js) quedaban dos confirmaciones de identidad seguidas compitiendo por
   atención; esta se queda como referencia secundaria (hallazgo del usuario 2026-08-18).
   Sin margin-top de .note aquí: es el primer elemento del panel, no hace falta el hueco
   extra que .note suele llevar respecto al texto de encima. */
.account-session-info {
  margin-top: 0;
}

/* Consejo motivacional (js/cuenta.js, loadMotivationalTip) - antes era .note a secas,
   texto suelto que se perdía entre el resto del panel (hallazgo del usuario 2026-08-18).
   Sin tocar .note en sí: se reutiliza en otras páginas (calculadoras, avisos) y no debe
   llevar este tratamiento ahí. */
.account-tip {
  margin: 24px 0;
  padding: 12px 16px;
  /* var(--bg-alt) se parece demasiado a var(--bg) de la página - la caja casi no se
     distinguía, solo el borde izquierdo (hallazgo del usuario 2026-08-18). var(--card),
     el mismo fondo que usan las tarjetas de progreso, contrasta de verdad. */
  background: var(--card);
  border-left: 3px solid var(--brand);
  border-radius: 8px;
}

/* Sección "Plan de la Academia" del panel logueado: antes era un encabezado + botones
   sueltos directamente sobre el fondo, igual que el resto del panel salvo las 2 tarjetas
   de progreso - ahora es una tarjeta más, para que se lea como una sección aparte
   (hallazgo del usuario 2026-08-18). Los enlaces/errores de dentro usan <div> en vez de
   <p> a propósito: .card p (elemento+clase) tiene más especificidad que .account-links o
   .formerror (una sola clase) y les pisaría el centrado/color - con <div> ese selector
   de tag ni aplica, sin necesitar reglas de override duplicadas.  */
.account-plan-card {
  margin: 32px 0;
}

.account-plan-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* "Cambiar contraseña" del panel logueado (2026-08-18, a petición expresa): mismo flujo
   de Firebase que viviGo/screens/ChangePasswordScreen.js (misma cuenta en los dos
   sitios), pero como <details> plegado en vez del patrón de "pantalla de ajustes" del
   juego - aquí es un solo campo más dentro de una página, no un menú con muchas
   entradas. Solo visible para cuentas con contraseña (ver wireAuthState en js/cuenta.js);
   arranca "hidden" en el HTML y JS lo destapa si corresponde. */
.account-collapsible {
  margin-top: 24px;
}

.account-collapsible summary {
  cursor: pointer;
  color: var(--brand);
  font-size: 0.9rem;
  list-style: none;
}

.account-collapsible summary::-webkit-details-marker { display: none; }
.account-collapsible summary::marker { content: ""; }

.account-collapsible[open] summary {
  margin-bottom: 16px;
}

.account-collapsible form {
  max-width: 380px;
}

.account-form button.cta,
.account-form .google-btn {
  width: 100%;
  cursor: pointer;
  /* font: inherit normaliza la fuente de los <button> (por defecto usan la fuente/tamaño
     del sistema, no la de la página) - pero como abreviatura arrastra font-weight con
     ella, dejando estos botones en peso normal en vez del 700 de .cta. Un <a class="cta">
     (p.ej. "Continúa: Nivel N..." desde 2026-08-18) no es un <button> y no le afecta esta
     regla, así que se quedaba en negrita mientras los botones no - hallazgo del usuario al
     verlos uno junto al otro. font-weight explícito después restaura el 700 de .cta. */
  font: inherit;
  font-weight: 700;
  text-align: center;
}

/* Los botones del panel ya logueado no deben estirarse a los 760px del panel ancho de
   arriba - se ven mejor a su tamaño natural (con un mínimo para que no queden dispares
   entre sí, p.ej. "Jugar a viviGo" junto a "Plan mensual · 4,99 €/mes"). */
#cuenta-logged-in button.cta {
  width: auto;
  min-width: 260px;
}

/* CTA dentro de una tarjeta de "Tu progreso" ("Jugar a viviGo" y "Continúa: Nivel N..." -
   ver #cuenta-progress más abajo). Ancho 100% de la tarjeta en vez del min-width:260px de
   la regla de arriba: esa tarjeta puede ser más estrecha que 260px+padding en anchos
   intermedios (grid auto-fit de .cards-compact), min-width:0 evita que el botón desborde
   la tarjeta. "Continúa: Nivel N..." pasó de enlace suelto a este mismo tratamiento el
   2026-08-18 (a petición expresa, tras notar que solo viviGo tenía botón y Academia no -
   no era una decisión deliberada de destacar el juego, solo una inconsistencia que quedó
   sin repasar al mover las acciones dentro de sus tarjetas el mismo día). */
#cuenta-progress .card .account-card-cta {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.account-form .google-btn {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
}

.account-form .google-btn:hover { background: var(--bg-alt); }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.field-checkbox input { margin: 0; }

.form-error {
  color: #e05c5c;
  font-size: 0.86rem;
  margin: -6px 0 14px;
}

.account-links {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--text-dim);
  text-align: center;
}

.account-links a { color: var(--brand); }

/* Panel de "Mi cuenta" ya logueado: centrar tiene sentido bajo un formulario estrecho de
   login/registro, pero aquí el resto del panel (tarjetas, aviso, botones) está alineado a
   la izquierda - centrar solo estos enlaces generaba una lectura en zigzag (hallazgo del
   usuario 2026-08-18). */
#cuenta-logged-in .account-links {
  text-align: left;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--brand);
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
.link-button:disabled { color: var(--text-dim); cursor: default; text-decoration: none; }

/* "Reportar un problema": botón del footer + diálogo que abre js/reporte.js (cargado en
   todas las páginas). El botón vive dentro de .footer-links, junto a los enlaces legales,
   y se ve igual que ellos (es un <button> solo porque abre un diálogo en vez de navegar);
   el diálogo reutiliza el lenguaje visual de las calculadoras (campos sobre --bg-alt,
   botón .cta). */
.footer-report {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text-dim);
  cursor: pointer;
}
.footer-report:hover { color: var(--text); }

body.report-open { overflow: hidden; }

.report-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.62);
}

.report-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
}

.report-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.report-close:hover { color: var(--text); }

.report-modal h2 { margin: 0 0 8px; font-size: 1.15rem; }
.report-intro { margin: 0 0 18px; color: var(--text-dim); font-size: 0.9rem; }

.report-form label {
  display: block;
  font-size: 0.86rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.report-form textarea,
.report-form input {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 14px;
}
.report-form textarea { resize: vertical; min-height: 96px; }
.report-form textarea:focus,
.report-form input:focus { outline: none; border-color: var(--brand-dim); }

.report-hint {
  display: block;
  margin: -8px 0 16px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Honeypot: fuera de pantalla (no display:none — algunos bots ignoran los campos
   ocultos así). Una persona nunca lo ve ni lo tabula; si llega relleno, es un bot. */
.report-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.report-submit { width: 100%; cursor: pointer; }

.report-status {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--accent);
}
.report-status.is-error { color: #ff8f6b; }