/*
 * La superficie de las piezas narrativas: la landing y la puerta. El anillo es luz sobre oscuridad, y
 * por eso van sobre negro profundo. Las apps son claras: son herramientas de trabajo y se leen durante
 * minutos.
 *
 * La landing tiene además una variante clara, el anillo como tinta sobre papel, que SOLO se pinta
 * cuando alguien la ha elegido con el conmutador «Modo oscuro» (`data-tema="claro"`). Sin elección
 * la landing es oscura aunque el sistema esté en claro: la noche es su identidad. La puerta no lleva
 * conmutador ni guion de aspecto, así que nunca recibe el atributo.
 *
 * Los tonos de etapa como texto: en oscuro, el tono; en claro, su valor para texto sobre blanco.
 * Contrastes medidos sobre `--fondo` y las superficies, en los dos, en `tests/contraste.test.ts`.
 */

:root {
  color-scheme: dark;
  --fondo: #0b0c10;
  --superficie: #15171d;
  --superficie-2: #1d2028;
  --borde: #2c303a;
  --texto: #eceae5;
  --texto-suave: #a9a7a0;
  --acento: #a3adff;
  --acento-texto: #10131a;
  --primario-hover: #ffffff;
  --borde-control: #a9a7a0;
  /* Los canales del velo y de los paneles que flotan sobre el anillo: cada regla pone su opacidad. */
  --velo-rgb: 11 12 16;
  --panel-rgb: 21 23 29;
}

@media screen {
  :root[data-tema="claro"] {
    color-scheme: light;
    --fondo: #f7f6f3;
    --superficie: #ffffff;
    --superficie-2: #efeee9;
    --borde: #d6d4ce;
    --texto: #111111;
    --texto-suave: #4d4d4d;
    --acento: #2329e4;
    --acento-texto: #ffffff;
    --primario-hover: #333333;
    --borde-control: #55534d;
    --foco: #b8500a;
    --velo-rgb: 247 246 243;
    --panel-rgb: 255 255 255;

    --etapa-clasifica: var(--etapa-clasifica-texto);
    --etapa-cuantifica: var(--etapa-cuantifica-texto);
    --etapa-cobra: var(--etapa-cobra-texto);
    --etapa-cede: var(--etapa-cede-texto);
    --etapa-combina: var(--etapa-combina-texto);
    --etapa-financia: var(--etapa-financia-texto);
    --etapa-capitaliza: var(--etapa-capitaliza-texto);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1.0625rem/1.6 var(--fuente-cuerpo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--fuente-display); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: -0.01em; font-synthesis-weight: none; }
p { margin: 0; max-width: 62ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: var(--radio); }

/* El lienzo del anillo: fijo detrás de todo, nunca intercepta el puntero. */
.anillo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.boton {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.3rem; border: 1px solid transparent; border-radius: var(--radio);
  font: 600 1rem/1 var(--fuente-cuerpo); text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease;
}
.boton:active { transform: scale(.97); }
.boton-primario { background: var(--texto); color: var(--fondo); }
.boton-secundario { background: transparent; color: var(--texto); border-color: var(--borde); }
@media (hover: hover) and (pointer: fine) {
  .boton-primario:hover { background: var(--primario-hover); }
  .boton-secundario:hover { border-color: var(--texto-suave); }
}
.flecha { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .boton:hover .flecha { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .boton, .flecha { transition: none; } .boton:active { transform: none; } }