/* ============================================================================
   base.css — tokens, reset, tipografía, controles.
   Compartido por la landing pública y el dashboard.
   Sin dependencias externas: ni CDNs, ni fuentes remotas, ni librerías.

   La paleta se eligió midiendo contraste WCAG, no a ojo. Los ratios anotados
   son los medidos sobre el fondo indicado en cada bloque.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Tipografía: pila del sistema. Cero descargas, render inmediato en
     conexiones móviles lentas, y cada plataforma usa su fuente nativa. */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Escala tipográfica. El h1 y el h2 son fluidos para que el móvil no herede
     tamaños de escritorio. Los valores fijos evitan saltos raros. */
  --fs-hero: clamp(2rem, 1.42rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.28rem + 0.95vw, 2.125rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* Espaciado: escala de 4px. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --container: 1120px;
  --measure: 62ch; /* ancho máximo de párrafo legible */

  --shadow-sm: 0 1px 2px rgba(16, 22, 32, 0.06),
    0 1px 3px rgba(16, 22, 32, 0.04);
  --shadow: 0 2px 4px rgba(16, 22, 32, 0.05),
    0 6px 16px -6px rgba(16, 22, 32, 0.12);
  --shadow-lg: 0 4px 8px rgba(16, 22, 32, 0.06),
    0 18px 40px -12px rgba(16, 22, 32, 0.18);
}

/* --- Tema claro (por defecto) --- */
:root,
:root[data-tema="claro"] {
  --bg: #ffffff;
  --bg-alt: #f6f7f9;
  --surface: #ffffff;
  --surface-alt: #f6f7f9;

  --text: #12161c;        /* 18.15:1 sobre --bg */
  --muted: #5a6572;       /*  5.93:1 sobre --bg */
  --faint: #6e7884;

  --line: #e2e5ea;        /* separadores decorativos */
  --line-strong: #cbd1da;
  --field-line: #8a919b;  /*  3.18:1 sobre --bg — borde de control */

  --brand: #12468f;       /*  9.14:1 con blanco */
  --brand-hover: #0d3670;
  --brand-ink: #ffffff;
  --brand-tint: #edf2fa;
  --brand-tint-line: #c9d8ef;
  --link: #12468f;

  --ok: #15703f;
  --ok-tint: #e8f4ed;
  --warn: #8a5a00;
  --warn-tint: #fbf2df;
  --err: #a32020;
  --err-tint: #fbebeb;

  --focus: #12468f;
  --shadow-sm: 0 1px 2px rgba(16, 22, 32, 0.06),
    0 1px 3px rgba(16, 22, 32, 0.04);
  --shadow: 0 2px 4px rgba(16, 22, 32, 0.05),
    0 6px 16px -6px rgba(16, 22, 32, 0.12);
  --shadow-lg: 0 4px 8px rgba(16, 22, 32, 0.06),
    0 18px 40px -12px rgba(16, 22, 32, 0.18);
}

/* --- Tema oscuro --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #0e1116;
    --bg-alt: #141922;
    --surface: #161b24;
    --surface-alt: #1b212b;

    --text: #e7ebf1;      /* 15.81:1 sobre --bg */
    --muted: #9aa5b4;     /*  6.92:1 sobre --surface */
    --faint: #7e8a99;

    --line: #262e3a;
    --line-strong: #333d4b;
    --field-line: #6b7686; /* 3.75:1 sobre --surface */

    --brand: #2f6ad6;      /* 5.06:1 con blanco */
    --brand-hover: #3d79e4;
    --brand-ink: #ffffff;
    --brand-tint: #15233a;
    --brand-tint-line: #24395c;
    --link: #7fb0f5;       /* 8.49:1 sobre --bg */

    --ok: #4ec27f;
    --ok-tint: #122a1e;
    --warn: #e0a84a;
    --warn-tint: #2c2413;
    --err: #f07575;
    --err-tint: #2e1718;

    --focus: #7fb0f5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35),
      0 18px 40px -12px rgba(0, 0, 0, 0.6);
  }
}

/* El interruptor manual gana sobre la preferencia del sistema, en ambos
   sentidos. data-tema lo escribe tema.js en <html>. */
:root[data-tema="oscuro"] {
  --bg: #0e1116;
  --bg-alt: #141922;
  --surface: #161b24;
  --surface-alt: #1b212b;
  --text: #e7ebf1;
  --muted: #9aa5b4;
  --faint: #7e8a99;
  --line: #262e3a;
  --line-strong: #333d4b;
  --field-line: #6b7686;
  --brand: #2f6ad6;
  --brand-hover: #3d79e4;
  --brand-ink: #ffffff;
  --brand-tint: #15233a;
  --brand-tint-line: #24395c;
  --link: #7fb0f5;
  --ok: #4ec27f;
  --ok-tint: #122a1e;
  --warn: #e0a84a;
  --warn-tint: #2c2413;
  --err: #f07575;
  --err-tint: #2e1718;
  --focus: #7fb0f5;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35),
    0 18px 40px -12px rgba(0, 0, 0, 0.6);
}

/* ---------- 2. Reset ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* la cabecera fija no tapa el destino del ancla */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong,
b {
  font-weight: 650;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s6) 0;
}

/* Foco visible y consistente en todo lo enfocable. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--brand-tint);
  color: var(--text);
}

/* ---------- 3. Tipografía ------------------------------------------------ */

h1,
.h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
  font-weight: 680;
  text-wrap: balance;
}

h2,
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 660;
  text-wrap: balance;
}

h3,
.h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.008em;
  font-weight: 640;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: var(--measure);
}

.sub {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.xs {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
}

.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Sólo para lectores de pantalla. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido, visible sólo al tabular. */
.saltar {
  position: absolute;
  left: var(--s4);
  top: -4rem;
  z-index: 100;
  background: var(--brand);
  color: var(--brand-ink);
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.saltar:focus {
  top: var(--s3);
}

/* ---------- 4. Contenedores --------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s4);
}

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

.seccion {
  padding-block: var(--s7);
}

@media (min-width: 768px) {
  .seccion {
    /* 88 px y no los 64 de --s8. Las ocho secciones tenían exactamente el
       mismo espaciado y alternaban blanco/gris sin excepción, así que el ojo
       recorría la página sin un solo punto de descanso: regularidad absoluta
       significa que nada destaca. Las landings de referencia usan entre 80 y
       128 px entre secciones en escritorio.

       Un valor propio en lugar de subir --s8, que es un token de la escala y
       lo usan además los márgenes internos de varios bloques: cambiarlo ahí
       habría inflado cosas que están bien. */
    padding-block: 5.5rem;
  }
}

.seccion--alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}

/* ---------- 5. Botones --------------------------------------------------- */

.btn {
  --alto: 44px; /* objetivo táctil mínimo cómodo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--alto);
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 620;
  font-size: var(--fs-body);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.14s ease, border-color 0.14s ease,
    color 0.14s ease, transform 0.08s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--primario {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}

.btn--primario:hover:not([disabled]) {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

.btn--secundario {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}

.btn--secundario:hover:not([disabled]) {
  border-color: var(--field-line);
  background: var(--surface-alt);
}

.btn--plano {
  background: transparent;
  color: var(--link);
  border-color: transparent;
  padding-inline: var(--s3);
}

.btn--plano:hover:not([disabled]) {
  background: var(--brand-tint);
}

.btn--peligro {
  background: var(--surface);
  color: var(--err);
  border-color: var(--line-strong);
}

.btn--peligro:hover:not([disabled]) {
  border-color: var(--err);
  background: var(--err-tint);
}

.btn--grande {
  --alto: 52px;
  font-size: 1.0625rem;
  padding-inline: var(--s6);
}

.btn--pequeno {
  --alto: 34px;
  font-size: var(--fs-xs);
  padding-inline: var(--s3);
  border-radius: var(--radius-sm);
}

.btn--bloque {
  width: 100%;
}

/* ---------- 6. Formularios ---------------------------------------------- */

.campo {
  display: block;
  margin-bottom: var(--s5);
}

.campo__etiqueta {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 620;
  margin-bottom: var(--s2);
  color: var(--text);
}

.campo__ayuda {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--s2);
  line-height: 1.45;
}

.campo__error {
  display: none;
  font-size: var(--fs-xs);
  color: var(--err);
  margin-top: var(--s2);
  font-weight: 560;
}

.campo[data-invalido="si"] .campo__error {
  display: block;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  /* 16px real evita el zoom automático de iOS Safari al enfocar. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  appearance: none;
}

textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
  opacity: 1;
}

input:hover:not([disabled]),
select:hover:not([disabled]),
textarea:hover:not([disabled]) {
  border-color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.campo[data-invalido="si"] input,
.campo[data-invalido="si"] select {
  border-color: var(--err);
}

.campo[data-invalido="si"] input:focus,
.campo[data-invalido="si"] select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 22%, transparent);
}

/* El caret del select, dibujado en CSS para no depender de un icono. */
select {
  padding-right: calc(var(--s4) + 18px);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Casilla de verificación: caja generosa, texto alineado arriba. */
.casilla {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s3);
  align-items: start;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.casilla input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  margin-top: 1px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid;
  place-content: center;
  cursor: pointer;
  flex: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.casilla input[type="checkbox"]::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--brand-ink);
  border-bottom: 2.5px solid var(--brand-ink);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform 0.12s ease;
}

.casilla input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}

.casilla input[type="checkbox"]:checked::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.casilla--invalida input[type="checkbox"] {
  border-color: var(--err);
}

/* La ayuda de un campo cuando advierte de algo, no cuando sólo explica.
   Color y no icono: es una matización, no una alarma, y el campo sigue siendo
   perfectamente válido. */
.campo__ayuda[data-tono="aviso"] {
  color: var(--warn);
}

/* RADIOS. No los estilaba nadie, así que caían al control por defecto del
   navegador -- que en varios se pinta como un punto oscuro relleno incluso sin
   seleccionar, y entonces las tres opciones parecen marcadas a la vez.

   Mismo tamaño y mismo borde que las casillas, para que el formulario tenga un
   solo lenguaje, pero redondos y con punto en vez de palomita: la forma es lo
   que distingue «elige una» de «marca las que quieras», y perder esa
   diferencia es perder la instrucción. */
.casilla input[type="radio"] {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  margin-top: 1px;
  border: 1px solid var(--field-line);
  border-radius: 50%;
  background: var(--surface);
  display: grid;
  place-content: center;
  cursor: pointer;
  flex: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.casilla input[type="radio"]::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  transition: transform 0.12s ease;
}

.casilla input[type="radio"]:checked {
  border-color: var(--brand);
  /* Aro interior: el borde se ve de 2 px sin mover el punto de sitio, que es
     lo que pasaría al cambiar `border-width`. */
  box-shadow: inset 0 0 0 1px var(--brand);
}

.casilla input[type="radio"]:checked::after {
  transform: scale(1);
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

/* Campo trampa (honeypot). Oculto a personas, alcanzable por bots.
   No se usa display:none: algunos bots lo detectan y lo saltan. */
.trampa {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 7. Piezas reutilizables ------------------------------------- */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
  white-space: nowrap;
}

.etiqueta--neutra {
  background: var(--surface-alt);
  color: var(--muted);
  border-color: var(--line);
}

.etiqueta--ok {
  background: var(--ok-tint);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 32%, transparent);
}

.etiqueta--aviso {
  background: var(--warn-tint);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

.etiqueta--error {
  background: var(--err-tint);
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 32%, transparent);
}

.etiqueta--marca {
  background: var(--brand-tint);
  color: var(--link);
  border-color: var(--brand-tint-line);
}

.punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Bloque de aviso. Usado para los tres avisos legales obligatorios. */
/* DESCARGO: el patrón de «esto hay que notarlo».
   Copiado del componente «warning text» de GOV.UK, que lo reservan para
   consecuencias legales y cosas que el usuario no puede pasar por alto: signo
   de admiración en un círculo sólido, texto en negrita, y NADA de caja ni de
   fondo.
   Sin fondo a propósito. Nielsen Norman midió con seguimiento ocular que la
   gente ignora las cajas de colores porque las asocia a publicidad; meter el
   descargo más importante de la página dentro de un cartel tintado habría sido
   la forma más segura de que nadie lo leyera. */
.descargo {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.descargo strong {
  color: var(--ink);
}

.descargo__marca {
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  flex: none;
}

/* NOTA, NO CAJA DE AVISO.
   Esto era una tarjeta con filo de color a la izquierda: fondo tintado, borde
   fino alrededor y una franja de 3 px en el canto. Es el componente más
   repetido de las interfaces hechas con plantilla, y aquí además pintaba de
   ámbar textos que sólo explican algo -- una nota que dice «los avisos llegan
   por WhatsApp o por correo» no es una advertencia, y vestirla de advertencia
   hace que las advertencias de verdad dejen de leerse.
   Ahora es un tratamiento tipográfico: una regla fina arriba, texto algo menor
   y la primera frase en negrita haciendo de entradilla. Sin caja, sin filo y
   sin color que no signifique nada. */
.aviso {
  display: flex;
  gap: var(--s3);
  padding: var(--s4) 0 0;
  border: 0;
  border-top: 2px solid var(--line-strong);
  border-radius: 0;
  background: none;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--muted);
}

.aviso strong,
.aviso b {
  color: var(--ink);
}

/* La regla arriba, teñida, es lo único que distingue el tono. Es suficiente:
   una línea de 2 px del color de marca al principio de un bloque se ve, y no
   convierte el texto en un cartel. */
.aviso--marca {
  border-top-color: var(--brand);
}

.aviso--atencion {
  border-top-color: var(--warn);
}

/* Los mensajes de error y de éxito SÍ son estados, no notas: los pinta el
   JavaScript después de una acción y tienen que saltar a la vista. Éstos
   conservan cuerpo, pero con el color en el texto y en un punto delante, no
   en una franja lateral. */
.aviso--error,
.aviso--exito {
  padding: var(--s3) var(--s4);
  border-top: 0;
  border-radius: var(--radius);
  font-weight: 560;
}

.aviso--error {
  background: var(--err-tint);
  color: var(--err);
}

.aviso--exito {
  background: var(--ok-tint, var(--brand-tint));
  color: var(--ok, var(--brand));
}

.aviso--ok {
  background: var(--ok-tint);
  border-color: color-mix(in srgb, var(--ok) 28%, transparent);
  border-left-color: var(--ok);
}

.aviso p + p {
  margin-top: var(--s2);
}

/* Interruptor de tema: mismo control en landing y dashboard. */
.tema-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  flex: none;
  transition: color 0.14s ease, border-color 0.14s ease;
}

.tema-btn:hover {
  color: var(--text);
  border-color: var(--field-line);
}

.tema-btn svg {
  width: 18px;
  height: 18px;
}

/* Sol visible en oscuro, luna visible en claro. */
.tema-btn .icono-sol {
  display: none;
}

:root[data-tema="oscuro"] .tema-btn .icono-sol {
  display: block;
}

:root[data-tema="oscuro"] .tema-btn .icono-luna {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema-btn .icono-sol {
    display: block;
  }
  :root:not([data-tema="claro"]) .tema-btn .icono-luna {
    display: none;
  }
  :root[data-tema="oscuro"] .tema-btn .icono-luna {
    display: none;
  }
}

/* El atributo `hidden` tiene que ganar SIEMPRE.
   Sin esto, cualquier clase que fije `display` (como .aviso, que usa flex)
   anula el `hidden` del HTML, porque los estilos del autor pesan más que los
   del navegador. El síntoma no es un fallo visible de CSS: es una pantalla
   que enseña bloques que el JavaScript dio por ocultos — "Anotamos tu correo
   —" a quien no dio correo, o "el canal no está configurado" cuando está
   apagado a propósito. */
[hidden] {
  display: none !important;
}