/* ─────────────────────────────────────────────────────────────────────────────
   Hoja de estilo del sitio público de RadionicBoost.

   **Una sola copia, compartida por las cinco páginas** — la portada, las tres
   guías y la privacidad. Vivió duplicada dentro de cada guía mientras fueron
   ficheros sueltos que se abrían a mano: dos copias primero y tres desde que la
   guía se desglosó por tipo de cuenta, unas 230 líneas cada una. Al pasar las
   guías al servidor esa duplicación dejó de tener excusa.

   El bloque de tokens de abajo viene tal cual de las guías: es el sistema que ya
   existía, con sus tres estados de tema (claro, oscuro por preferencia del
   sistema, y oscuro forzado). No se ha rediseñado nada al mudarlo.
   ───────────────────────────────────────────────────────────────────────────── */

  :root {
    --ground: #f0f2f5;
    --surface: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #55606e;
    --ink-faint: #8a94a3;
    --line: #e2e6ec;
    --accent: #4a7fe5;
    --accent-soft: #eaf0fc;
    --go: #2e7d32;
    --wait: #e65100;
    --stop: #c62828;
    --radius-block: 20px;
    --radius-inline: 8px;
  }
  :root:not([data-theme="light"]) {
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground: #12151a;
      --surface: #1a1e26;
      --ink: #e7eaef;
      --ink-soft: #a8b2c1;
      --ink-faint: #78828f;
      --line: #2a303a;
      --accent: #7ea6f0;
      --accent-soft: #1e2735;
      --go: #6fbf73;
      --wait: #ffa451;
      --stop: #ef7a75;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --ground: #12151a;
    --surface: #1a1e26;
    --ink: #e7eaef;
    --ink-soft: #a8b2c1;
    --ink-faint: #78828f;
    --line: #2a303a;
    --accent: #7ea6f0;
    --accent-soft: #1e2735;
    --go: #6fbf73;
    --wait: #ffa451;
    --stop: #ef7a75;
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
  }

  .bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem clamp(1rem, 4vw, 2rem);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .brand {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .brand span { color: var(--ink-faint); font-weight: 500; font-size: 0.82rem; }
  .lang { display: flex; gap: 0.25rem; }
  .lang button {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.6rem;
    color: var(--ink-soft);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
  }
  .lang button[aria-pressed="true"] {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }
  :root[data-theme="dark"] .lang button[aria-pressed="true"],
  :root:not([data-theme="light"]) .lang button[aria-pressed="true"] { color: var(--ground); }
  .lang button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  main {
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) 5rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 5.5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  .lede { margin: 0; color: var(--ink-soft); font-size: 1.05rem; max-width: 34rem; }

  section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-block);
    padding: clamp(1.1rem, 3.5vw, 1.6rem);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
  }
  h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0;
    text-wrap: balance;
  }
  h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0.4rem 0 0;
  }
  p, li { margin: 0; }
  ul, ol { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
  ol.steps { counter-reset: s; list-style: none; padding-left: 0; gap: 0.9rem; }
  /* El número va en un ::before ABSOLUTO, y no en una rejilla. Con `display:
     grid` en el <li>, cada elemento hijo —un <strong>, un <br>, el <span> de la
     clave— se convierte en un ítem de rejilla propio y se reparte por celdas:
     el texto salía descolocado y la clave de ejemplo caía en una columna
     estrecha, a una cifra por línea. En flujo normal el contenido de un paso
     vuelve a ser lo que es, un párrafo, y el número flota a su izquierda. */
  ol.steps > li {
    counter-increment: s;
    position: relative;
    padding-left: 2.6rem;
    min-height: 1.55rem;
  }
  ol.steps > li::before {
    content: counter(s);
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.55rem;
    height: 1.55rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.55rem;
    text-align: center;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
  }
  strong { font-weight: 700; }
  .ui {
    font-weight: 600;
    color: var(--ink);
    background: var(--accent-soft);
    border-radius: 5px;
    padding: 0.05em 0.35em;
    white-space: nowrap;
  }
  .note {
    border-left: 3px solid var(--accent);
    padding-left: 0.85rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
  }
  .note.warn { border-left-color: var(--wait); }

  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid currentColor;
  }
  .chip.go { color: var(--go); }
  .chip.wait { color: var(--wait); }
  .chip.stop { color: var(--stop); }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

  .states { display: flex; flex-direction: column; gap: 0.8rem; }
  .state { display: flex; flex-direction: column; gap: 0.25rem; }
  .state p { color: var(--ink-soft); font-size: 0.95rem; }

  footer {
    color: var(--ink-faint);
    font-size: 0.85rem;
    text-align: center;
    padding-bottom: 2rem;
  }
  /* El bloque de cada idioma es hijo de `main` y las secciones son NIETAS, así
     que la separación de `main` no les llegaba: salían todas pegadas. Cada
     `.doc` necesita su propia columna. El `!important` de abajo es lo que
     mantiene el ocultado por encima de este `display`. */
  .doc { display: flex; flex-direction: column; gap: 1.75rem; }
  [hidden] { display: none !important; }
  .seen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  @media (max-width: 32rem) { .seen { grid-template-columns: 1fr; } }
  .seen > div { display: flex; flex-direction: column; gap: 0.4rem; }
  .seen h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
  }
  .seen .yes h3 { color: var(--go); }
  .seen .no h3 { color: var(--stop); }
  .seen ul { padding-left: 1.1rem; font-size: 0.95rem; color: var(--ink-soft); gap: 0.35rem; }

  .key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.28em;
    font-weight: 600;
    color: var(--accent);
  }


/* ── La portada ───────────────────────────────────────────────────────────────

   Lo que sigue es lo único que no viene de las guías. La portada comparte con
   ellas la barra, la tipografía y el ritmo vertical; lo que añade son la imagen
   de cabecera, las secciones con figura y el pie con la navegación.
   ───────────────────────────────────────────────────────────────────────────── */

/* La cabecera: la imagen de fondo y el texto encima. El degradado no es adorno
   — es lo que garantiza el contraste del texto sobre una foto que no controlamos
   píxel a píxel. La imagen elegida es oscura y de contraste bajo justamente para
   que este velo pueda ser suave. */
.hero {
  position: relative;
  border-radius: var(--radius-block);
  overflow: hidden;
  min-height: 20rem;
  display: flex;
  align-items: flex-end;
  background: #0d1218;
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-veil {
  position: relative;
  width: 100%;
  padding: 3.5rem 2rem 2rem;
  background: linear-gradient(to top, rgba(8, 12, 18, .92) 0%, rgba(8, 12, 18, .72) 45%, rgba(8, 12, 18, 0) 100%);
}
/* El texto de la cabecera va SIEMPRE en claro, no por tokens: se apoya en una
   foto oscura, no en el fondo de la página, así que no cambia con el tema. */
.hero-veil h1 { color: #ffffff; margin: 0 0 .6rem; }
.hero-veil p  { color: #d7dde6; margin: 0; max-width: 46ch; }

@media (max-width: 32rem) {
  .hero-veil { padding: 3rem 1.25rem 1.5rem; }
}

/* Una sección con figura al lado. En móvil la imagen se va debajo del texto:
   arriba estorbaría entre el titular y lo que explica. */
.with-figure { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: center; }
@media (min-width: 44rem) {
  .with-figure { grid-template-columns: 1fr 15rem; }
}
.with-figure figure { margin: 0; }
.with-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-block);
}
.with-figure .body { display: flex; flex-direction: column; gap: 1rem; }

/* Las modalidades: una fila por cuenta, con su nombre destacado. No es una
   tabla de precios y no debe parecerlo — no hay precios todavía. */
.tiers { display: flex; flex-direction: column; gap: 1.1rem; }
.tier { display: flex; flex-direction: column; gap: .2rem; }
.tier b { color: var(--ink); }

/* La llamada a la acción, que es una sola en toda la página. */
.cta {
  display: inline-block;
  align-self: flex-start;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  padding: .8rem 1.6rem;
  border-radius: var(--radius-inline);
}
.cta:hover  { filter: brightness(1.08); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* El pie con la navegación del sitio. Separado por un filete y en pequeño: es
   orientación, no contenido. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  justify-content: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.site-nav a { color: var(--ink-soft); text-decoration: none; font-size: .9rem; }
.site-nav a:hover { color: var(--accent); text-decoration: underline; }
.site-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }