/* English Coach · base: tokens, reset y layout. Móvil primero; claro/oscuro según el sistema. */
:root {
  --fondo: #f6f7fb;
  --superficie: #ffffff;
  --superficie-2: #eef1f8;
  --texto: #1b1f2a;
  --texto-suave: #556074;
  --borde: #d5dbe8;
  --acento: #3b5bdb;
  --acento-fuerte: #2f4ac0;
  --acento-texto: #ffffff;
  --exito: #17703a;
  --exito-fondo: #e4f4ea;
  --error: #b3261e;
  --error-fondo: #fdeceb;
  --aviso: #7a4f00;
  --aviso-fondo: #fff2d6;
  --foco: #1971c2;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(20, 30, 60, 0.08), 0 4px 14px rgba(20, 30, 60, 0.06);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e6: 1.5rem;
  --e8: 2rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1218;
    --superficie: #171b24;
    --superficie-2: #1f2430;
    --texto: #e8ebf2;
    --texto-suave: #a5aec0;
    --borde: #2c3345;
    --acento: #8ea2fb;
    --acento-fuerte: #a7b6fc;
    --acento-texto: #0f1218;
    --exito: #7bdba0;
    --exito-fondo: #12301f;
    --error: #ff9a91;
    --error-fondo: #3a1715;
    --aviso: #f5c46b;
    --aviso-fondo: #33290f;
    --foco: #74c0fc;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 1.125rem; /* 18 px */
  line-height: 1.55;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 var(--e3);
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 var(--e3); }

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

[hidden] { display: none !important; }

.contenedor {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--e4);
}

.contenedor--angosto {
  max-width: 26rem;
  padding-top: var(--e8);
}

.marca-grande { font-size: 2rem; margin-bottom: var(--e1); }

.texto-suave { color: var(--texto-suave); }

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--e4);
  margin-bottom: var(--e4);
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 640px) {
  .contenedor { padding: var(--e6); }
}