/* =====================================================================
   ANMABE Education · tokens de marca (v1.3, octubre 2026)
   v1.3 (ronda 6, rediseño web v2): progreso de 6 tramos con fosforito,
   fondo de cuadrícula de cuaderno, estados hover/active/focus con
   respuesta, aviso emergente (toast) y botón de icono «ver» (ojo).
   v1.2 (ronda 5, rediseño web): rejilla de 8 pt, controles de 56 px,
   botones en minúscula de frase, estados deshabilitado/enviando/error,
   casilla, avisos, progreso y transiciones con movimiento reducido.
   Especificación: brand/rediseno-web/ESPECIFICACION.md
   Base: dirección C «Fosforito». Lema, anotaciones e iconos a mano.
   Producto: «La No Chuleta de Mates II».
   Lema oficial: «Para que no te haga falta ninguna en el examen».
   Uso: importar este fichero antes que el CSS de la web.
   Las fuentes se AUTOALOJAN (ver README.md): no se cargan de Google.
   ===================================================================== */

:root {
  /* ---------- Color: paleta ---------- */
  --anm-color-papel: #FFFFFF;          /* fondo (folio de fotocopia) */
  --anm-color-tinta: #121212;          /* texto, logotipo, botones, iconos */
  --anm-color-fosforito: #FFE14D;      /* claro: relleno o recuadro; oscuro: solo recuadro; NUNCA texto */
  --anm-color-fosforito-rosa: #FF6FAE; /* avisos; recuadro y notas en oscuro; NUNCA texto sobre blanco */
  --anm-color-rosa-tinta: #B3135A;     /* lema, anotaciones a mano, foco, errores (6,7:1 sobre papel) */
  --anm-color-gris: #5C5C5C;           /* texto secundario y legal (6,7:1 sobre papel) */
  --anm-color-noche: #151515;          /* superficie oscura */
  --anm-color-tiza: #F4F2EC;           /* texto y fórmulas sobre noche (16,3:1) */
  --anm-color-linea: #DADADA;          /* filetes y separadores; nunca texto */
  --anm-color-deshabilitado: #8C8C8C;  /* borde discontinuo de lo deshabilitado (3,4:1); nunca texto */
  --anm-color-solo-lectura: #F4F4F4;   /* fondo de campo bloqueado mientras se envía */
  --anm-color-fosforito-suave: #FFF6C7;/* fondo del aviso correcto (tinta encima: 17,2:1) */
  --anm-color-rosa-suave: #FCE8F1;     /* fondo del aviso de error (rosa tinta encima: 5,7:1) */
  --anm-color-progreso-vacio: #CFCFCF; /* v1.3: borde del tramo pendiente (antes relleno #E6E6E6) */
  --anm-color-rosa-pulsado: #F7D0E0;   /* fondo del botón «ver» al pulsarlo */
  /* Fondo de cuaderno: cuadrícula de 24 px al 5 % de tinta (no resta legibilidad: tinta sobre él sigue en ~18:1) */
  --anm-cuadricula: linear-gradient(rgba(18,18,18,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(18,18,18,.05) 1px, transparent 1px);
  --anm-cuadricula-paso: 24px;

  /* ---------- Color: roles (usar estos en componentes) ---------- */
  --anm-fondo: var(--anm-color-papel);
  --anm-texto: var(--anm-color-tinta);
  --anm-texto-secundario: var(--anm-color-gris);
  --anm-enfasis: var(--anm-color-fosforito);   /* color del relleno o del recuadro */
  --anm-aviso: var(--anm-color-fosforito-rosa);
  --anm-nota: var(--anm-color-rosa-tinta);
  --anm-foco: var(--anm-color-rosa-tinta);
  --anm-error: var(--anm-color-rosa-tinta);
  --anm-boton-fondo: var(--anm-color-tinta);
  --anm-boton-texto: var(--anm-color-papel);
  --anm-borde: var(--anm-color-tinta);
  --anm-icono-acento: var(--anm-color-rosa-tinta); /* detalle de iconos/*.svg en línea */

  /* ---------- Tipografía ---------- */
  --anm-fuente-titular: "Archivo", "Archivo Variable", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --anm-fuente-texto: "Literata", "Literata Variable", Georgia, "Times New Roman", serif;
  --anm-fuente-mano: "Kalam", "Segoe Print", "Bradley Hand", sans-serif;
  --anm-fuente-math: "New Computer Modern Math", "NewCMMath-Regular", "Latin Modern Math", "STIX Two Math", "Cambria Math", serif; /* MathML; con MathJax 4 usar la fuente mathjax-newcm */
  --anm-ancho-titular: 125%;   /* font-stretch: Archivo Expanded */
  --anm-ancho-boton: 112.5%;   /* Archivo SemiExpanded */
  --anm-peso-titular: 800;
  --anm-peso-titular-max: 900;
  --anm-peso-etiqueta: 800;
  --anm-peso-texto: 400;
  --anm-peso-texto-fuerte: 600;
  --anm-peso-nota: 700;

  /* Escala (móvil primero; 1rem = 16px) */
  --anm-tam-xs: 0.8125rem;   /* 13px: legal, metadatos */
  --anm-tam-s: 0.9375rem;    /* 15px */
  --anm-tam-m: 1.0625rem;    /* 17px: texto */
  --anm-tam-l: 1.25rem;      /* 20px: entradilla, lema */
  --anm-tam-xl: 1.5rem;      /* 24px */
  --anm-tam-2xl: 1.875rem;   /* 30px: titular móvil */
  --anm-tam-3xl: clamp(2.25rem, 6vw, 3.5rem); /* titular escritorio */
  --anm-tam-nota: 1.125rem;  /* 18px: anotaciones a mano */
  --anm-interlineado-texto: 1.5;
  --anm-interlineado-titular: 1.06;
  --anm-espaciado-etiqueta: 0.06em;

  /* Escala de la web de captación (390 px; en ≤ 370 px se usan los valores --estrecho) */
  --anm-web-h1: 1.875rem;            /* 30px; 26px en estrecho */
  --anm-web-texto: 1.0625rem;        /* 17px: texto, campo y botón; 16px en estrecho */
  --anm-web-pequeno: 0.875rem;       /* 14px: casilla, pistas, errores; 13,5px en estrecho */
  --anm-web-legal: 0.8125rem;        /* 13px: línea legal y pie; 12,5px en estrecho */
  --anm-web-nota: 1.25rem;           /* 20px: Kalam */

  /* ---------- Espaciado (rejilla de 8 pt; 4 solo para ajustes ópticos) ---------- */
  --anm-rejilla: 8px;
  --anm-esp-1: 4px;
  --anm-esp-2: 8px;
  --anm-esp-3: 12px;
  --anm-esp-4: 16px;
  --anm-esp-5: 24px;
  --anm-esp-6: 32px;
  --anm-esp-7: 48px;
  --anm-esp-8: 64px;
  --anm-margen-lateral: 24px; /* 16px en pantallas de ≤ 370 px */
  --anm-margen-lateral-estrecho: 16px;
  --anm-ancho-columna: 440px;  /* columna de la web en tableta y escritorio */
  --anm-ancho-lectura: 34em;   /* ~65 caracteres por línea como máximo */

  /* ---------- Radios y bordes ---------- */
  --anm-radio-0: 0;            /* campos, botones y tarjetas: esquinas rectas */
  --anm-radio-s: 3px;
  --anm-radio-avatar: 22%;
  --anm-radio-fosforito: 3px 8px 4px 9px / 8px 4px 9px 3px;   /* borde irregular del subrayado */
  --anm-radio-recuadro: 4px 10px 5px 12px / 10px 5px 12px 4px;
  --anm-borde-grosor: 2px;     /* v1.2: 2px (antes 2,5px) para que no se emborrone a 1x */
  --anm-error-grosor: 3px;
  --anm-foco-grosor: 3px;
  --anm-foco-separacion: 3px;
  --anm-recuadro-grosor: 3px;
  --anm-recuadro-relleno: 0.6em 1em;
  --anm-alto-control: 56px;    /* v1.2: botones y campos (antes 54px) */
  --anm-alto-control-s: 48px;  /* botones dentro de tarjetas */
  --anm-objetivo-tactil: 48px; /* área pulsable mínima (enlaces, casilla, Atrás) */
  --anm-casilla: 24px;

  /* ---------- Movimiento ---------- */
  --anm-dur-rapida: 120ms;     /* pulsado, foco, cambio de estado de un control */
  --anm-dur-pantalla: 200ms;   /* cambio de pantalla */
  --anm-curva-salida: cubic-bezier(0.2, 0, 0, 1);
  --anm-curva-entrada: cubic-bezier(0.3, 0, 1, 1);
  --anm-desplazamiento: 24px;  /* deslizamiento horizontal al cambiar de pantalla */
}

@media (max-width: 370px) {
  :root {
    --anm-margen-lateral: var(--anm-margen-lateral-estrecho);
    --anm-web-h1: 1.625rem;
    --anm-web-texto: 1rem;
    --anm-web-pequeno: 0.84375rem;
    --anm-web-legal: 0.78125rem;
  }
}

/* Movimiento reducido: sin deslizamientos; cambios instantáneos */
@media (prefers-reduced-motion: reduce) {
  :root { --anm-dur-pantalla: 0ms; --anm-dur-rapida: 0ms; --anm-desplazamiento: 0px; }
}

/* ---------- Superficie oscura ---------- */
.anm-noche {
  --anm-fondo: var(--anm-color-noche);
  --anm-texto: var(--anm-color-tiza);
  --anm-texto-secundario: #B9B6AE;           /* 9,0:1 sobre noche */
  --anm-nota: var(--anm-color-fosforito-rosa); /* 7,1:1 sobre noche */
  --anm-foco: var(--anm-color-fosforito);
  --anm-boton-fondo: var(--anm-color-tiza);  /* v1.2: tiza (antes fosforito); el fosforito en oscuro es solo recuadro */
  --anm-boton-texto: var(--anm-color-tinta);
  --anm-borde: var(--anm-color-tiza);
  --anm-enfasis: var(--anm-color-fosforito);
  --anm-icono-acento: var(--anm-color-fosforito-rosa);
  background: var(--anm-fondo);
  color: var(--anm-texto);
}

/* ---------- Énfasis de ecuaciones y palabras clave ----------
   CLARO:  .anm-fosforito (relleno, por defecto) o .anm-recuadro (alternativa).
   OSCURO: siempre .anm-recuadro (fosforito, --rosa o --tiza). Nunca relleno ni subrayado.
   Siempre se puede dejar una fórmula sin énfasis.
   Máximo 3 por hoja de PDF y 1 por pantalla, vídeo o email. */
.anm-fosforito {
  background: var(--anm-color-fosforito);
  color: var(--anm-color-tinta);
  padding: 0 0.14em;
  border-radius: var(--anm-radio-fosforito);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.anm-fosforito--bloque { display: inline-block; padding: 0.3em 0.55em; } /* para fórmulas con fracciones */
.anm-fosforito--rosa { background: var(--anm-color-fosforito-rosa); }    /* solo avisos en claro */

.anm-recuadro {
  display: inline-block;
  padding: var(--anm-recuadro-relleno);
  border: var(--anm-recuadro-grosor) solid var(--anm-enfasis);
  border-radius: var(--anm-radio-recuadro);
}
.anm-recuadro--rosa { --anm-enfasis: var(--anm-color-fosforito-rosa); }
.anm-recuadro--tiza { --anm-enfasis: var(--anm-color-tiza); }
/* Trazo a mano: mismo recuadro con el SVG de svg/recuadro-*.svg como fondo */
.anm-recuadro--mano { border: 0; padding: 0.95em 1.3em; background: url("svg/recuadro-fosforito.svg") center / 100% 100% no-repeat; }
.anm-recuadro--mano.anm-recuadro--rosa { background-image: url("svg/recuadro-rosa.svg"); }
.anm-recuadro--mano.anm-recuadro--tiza { background-image: url("svg/recuadro-tiza.svg"); }

/* En oscuro, el fosforito se convierte en recuadro: nunca relleno (regla del fundador) */
.anm-noche .anm-fosforito {
  background: none;
  color: inherit;
  display: inline-block;
  padding: var(--anm-recuadro-relleno);
  border: var(--anm-recuadro-grosor) solid var(--anm-color-fosforito);
  border-radius: var(--anm-radio-recuadro);
}

/* PROHIBIDO desde la ronda 4: recuadro o subrayado de rotulador negro (.anm-marcador)
   y subrayado amarillo en oscuro. No usar; se mantienen fuera del sistema a propósito. */

/* Fórmula sobre superficie oscura */
.anm-tiza {
  background: var(--anm-color-noche);
  color: var(--anm-color-tiza);
  padding: var(--anm-esp-4) var(--anm-esp-5);
}

/* ---------- Anotación a mano ---------- */
.anm-nota {
  font-family: var(--anm-fuente-mano);
  font-weight: var(--anm-peso-nota);
  font-size: var(--anm-tam-nota);
  line-height: 1.15;
  color: var(--anm-nota);
  display: inline-block;
  transform: rotate(-2deg);
}

/* Lema oficial: siempre a mano, debajo del nombre del producto */
.anm-lema {
  font-family: var(--anm-fuente-mano);
  font-weight: var(--anm-peso-nota);
  font-size: var(--anm-tam-l);
  line-height: 1.15;
  color: var(--anm-nota);
  transform: rotate(-2deg);
  transform-origin: left center;
}

/* ---------- Tipografía base ---------- */
.anm-titular {
  font-family: var(--anm-fuente-titular);
  font-stretch: var(--anm-ancho-titular);
  font-weight: var(--anm-peso-titular);
  line-height: var(--anm-interlineado-titular);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Titular de la web (v1.2): minúscula de frase, SemiExpanded, 30/26 px */
.anm-titular--frase { text-transform: none; font-stretch: 112.5%; font-size: var(--anm-web-h1); line-height: 1.12; }
.anm-etiqueta {
  font-family: var(--anm-fuente-titular);
  font-weight: var(--anm-peso-etiqueta);
  font-size: var(--anm-tam-xs);
  text-transform: uppercase;
  letter-spacing: var(--anm-espaciado-etiqueta);
}
.anm-texto {
  font-family: var(--anm-fuente-texto);
  font-size: var(--anm-tam-m);
  line-height: var(--anm-interlineado-texto);
}

/* ---------- Controles ---------- */
/* Botón (v1.2): minúscula de frase, una línea, 56 px. Uno principal por pantalla. */
.anm-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--anm-esp-2);
  min-height: var(--anm-alto-control);
  padding: 0 var(--anm-esp-4);
  border: 0; border-radius: var(--anm-radio-0);
  background: var(--anm-boton-fondo); color: var(--anm-boton-texto);
  font-family: var(--anm-fuente-titular); font-stretch: 100%; font-weight: 700;
  font-size: var(--anm-web-texto); line-height: 1.15; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--anm-dur-rapida) var(--anm-curva-salida), transform var(--anm-dur-rapida) var(--anm-curva-salida);
}
.anm-boton--bloque { display: flex; width: 100%; }
.anm-boton--s { min-height: var(--anm-alto-control-s); }
.anm-boton svg { width: 20px; height: 20px; flex: none; }
/* v1.3: respuesta visible. Ratón encima (solo dispositivos con hover): subrayado fosforito y la flecha avanza.
   Pulsado: baja 2 px. Foco: contorno rosa tinta de 3 px (más abajo). */
@media (hover: hover) {
  .anm-boton:hover:not([aria-disabled="true"]):not(.anm-boton--secundario) { background: #000; box-shadow: 0 4px 0 var(--anm-color-fosforito); }
  .anm-boton:hover:not([aria-disabled="true"]) svg:last-child { transform: translateX(3px); }
  .anm-boton--secundario:hover:not([aria-disabled="true"]) { background: var(--anm-color-fosforito-suave); }
  .anm-enlace:hover, .anm-legal a:hover { background: var(--anm-color-fosforito); color: var(--anm-color-tinta); }
}
.anm-boton svg { transition: transform var(--anm-dur-rapida) var(--anm-curva-salida); }
.anm-boton:active:not([aria-disabled="true"]) { background: #000; box-shadow: 0 1px 0 var(--anm-color-fosforito); transform: translateY(2px); }
.anm-boton--secundario {
  background: var(--anm-fondo); color: var(--anm-texto);
  box-shadow: inset 0 0 0 var(--anm-borde-grosor) var(--anm-borde);
}
.anm-boton--secundario:active:not([aria-disabled="true"]) { background: var(--anm-color-fosforito); color: var(--anm-color-tinta); box-shadow: inset 0 0 0 var(--anm-borde-grosor) var(--anm-borde); }
.anm-boton--secundario[aria-pressed="true"] { background: var(--anm-color-tinta); color: var(--anm-color-papel); }

/* Botón de icono «Ver en una pestaña» (v1.3): ojo manuscrito en rosa tinta (6,7:1; el fosforito rosa no llega a 3:1 sobre blanco).
   Siempre con aria-label="Ver en una pestaña" (y title con el mismo texto). */
.anm-boton-ver {
  flex: none; display: grid; place-items: center; width: var(--anm-objetivo-tactil); height: var(--anm-objetivo-tactil);
  border: var(--anm-borde-grosor) solid var(--anm-color-rosa-tinta); background: var(--anm-fondo); color: var(--anm-color-rosa-tinta);
  transition: background-color var(--anm-dur-rapida) var(--anm-curva-salida), transform var(--anm-dur-rapida) var(--anm-curva-salida);
}
.anm-boton-ver svg { width: 30px; height: 30px; }
@media (hover: hover) { .anm-boton-ver:hover { background: var(--anm-color-rosa-suave); } }
.anm-boton-ver:active { background: var(--anm-color-rosa-pulsado); transform: scale(0.96); }
/* Deshabilitado: borde discontinuo + texto gris + candado + explicación debajo (aria-describedby).
   Usar aria-disabled="true", NO el atributo disabled: así sigue recibiendo foco y se lee la explicación. */
.anm-boton[aria-disabled="true"]:not([aria-busy="true"]) {
  background: var(--anm-fondo); color: var(--anm-texto-secundario);
  box-shadow: none; border: var(--anm-borde-grosor) dashed var(--anm-color-deshabilitado);
  cursor: not-allowed;
}
/* Enviando: mismo color que activo, con indicador que gira y texto «Enviando…» */
.anm-boton[aria-busy="true"] { cursor: progress; }
.anm-giro { width: 20px; height: 20px; animation: anm-giro 0.9s linear infinite; }
@keyframes anm-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .anm-giro { animation-duration: 3s; } }

/* Enlace de texto con área pulsable de 48 px */
.anm-enlace {
  display: inline-flex; align-items: center; min-height: var(--anm-objetivo-tactil);
  font-family: var(--anm-fuente-titular); font-weight: 700; font-size: 0.9375rem; color: var(--anm-texto);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}

/* Campo (v1.2): etiqueta visible encima, nunca solo marcador de posición */
.anm-etiqueta-campo { display: block; margin-bottom: var(--anm-esp-2); font-family: var(--anm-fuente-titular); font-weight: 700; font-size: 0.9375rem; }
.anm-campo {
  min-height: var(--anm-alto-control); width: 100%;
  padding: 0 var(--anm-esp-4);
  border: var(--anm-borde-grosor) solid var(--anm-borde); border-radius: var(--anm-radio-0);
  background: var(--anm-fondo); color: var(--anm-texto);
  font-family: var(--anm-fuente-texto); font-size: max(16px, var(--anm-web-texto)); /* ≥ 16px: iOS no hace zoom */
}
.anm-campo:focus-visible, .anm-campo:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--anm-fondo), 0 0 0 calc(2px + var(--anm-foco-grosor)) var(--anm-foco);
}
.anm-campo[aria-invalid="true"] { border: var(--anm-error-grosor) solid var(--anm-error); padding-left: calc(var(--anm-esp-4) - 1px); }
.anm-campo[readonly] { background: var(--anm-color-solo-lectura); color: var(--anm-texto-secundario); border-color: var(--anm-color-deshabilitado); }
.anm-error-campo { display: flex; gap: var(--anm-esp-2); margin-top: var(--anm-esp-2); color: var(--anm-error); font-size: var(--anm-web-pequeno); font-weight: 600; line-height: 1.45; }
.anm-error-campo svg { width: 20px; height: 20px; flex: none; }

/* Casilla: caja de 24 px; toda la fila (48 px) es la etiqueta pulsable.
   Marcado: <label class="anm-casilla"><input type="checkbox" required><span>Tengo <b>16 años o más</b> y acepto…</span></label>
   (el texto va en un <span> para que la fila flex no lo trocee) */
.anm-casilla { display: flex; align-items: center; gap: var(--anm-esp-3); min-height: var(--anm-objetivo-tactil); font-size: var(--anm-web-pequeno); line-height: 1.45; cursor: pointer; }
.anm-casilla input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: var(--anm-casilla); height: var(--anm-casilla);
  border: var(--anm-borde-grosor) solid var(--anm-borde); border-radius: var(--anm-radio-0); background: var(--anm-fondo);
  display: grid; place-content: center; cursor: pointer;
}
.anm-casilla input:checked {
  background: var(--anm-color-tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.anm-casilla input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--anm-fondo), 0 0 0 calc(2px + var(--anm-foco-grosor)) var(--anm-foco); }
.anm-casilla input:disabled { border-color: var(--anm-color-deshabilitado); background-color: var(--anm-color-deshabilitado); }

/* Texto de apoyo */
.anm-pista { font-size: var(--anm-web-pequeno); line-height: 1.45; color: var(--anm-texto-secundario); }
.anm-legal { font-size: var(--anm-web-legal); line-height: 1.5; color: var(--anm-texto-secundario); }
.anm-legal b, .anm-legal strong { color: var(--anm-texto); font-weight: 700; }
.anm-legal a { color: inherit; }

/* Avisos (role="status" para el correcto; role="alert" para el error) */
.anm-aviso { display: flex; gap: var(--anm-esp-2); align-items: center; min-height: 40px; padding: var(--anm-esp-2) var(--anm-esp-3); font-size: var(--anm-web-pequeno); font-weight: 600; line-height: 1.4; }
.anm-aviso svg { width: 20px; height: 20px; flex: none; }
.anm-aviso--ok { background: var(--anm-color-fosforito-suave); border-left: 4px solid var(--anm-color-tinta); color: var(--anm-color-tinta); }
.anm-aviso--error { background: var(--anm-color-rosa-suave); border-left: 4px solid var(--anm-color-rosa-tinta); color: var(--anm-color-rosa-tinta); }

/* Progreso (v1.3): 6 tramos (Hola, Producto, Email, Revisa, Última pregunta, Descargas), de 10 px, separados 6 px.
   Hecho (incluido el paso actual) = fosforito con borde tinta; pendiente = blanco con borde gris.
   El estado lo marca el borde (tinta 18:1 frente a gris), no solo el amarillo. P5 y P6 la muestran con los pasos previos hechos. */
.anm-progreso { display: flex; gap: 6px; height: 10px; }
.anm-progreso > span { flex: 1; background: var(--anm-fondo); border: var(--anm-borde-grosor) solid var(--anm-color-progreso-vacio); }
.anm-progreso > span.is-hecho { background: var(--anm-color-fosforito); border-color: var(--anm-color-tinta); }

/* Fondo de cuaderno (v1.3): solo en la superficie de la pantalla, nunca detrás de campos, botones o tarjetas (llevan fondo blanco) */
.anm-cuaderno { background-color: var(--anm-color-papel); background-image: var(--anm-cuadricula); background-size: var(--anm-cuadricula-paso) var(--anm-cuadricula-paso); background-position: -1px -1px; }

/* Aviso emergente (v1.3): pegatina fosforito que entra, dura ~4 s y se va. Posición fija: no mueve la maquetación.
   Marcado: <div class="anm-aviso-emergente" role="status">…</div>; quitarlo del DOM al terminar la animación. */
.anm-aviso-emergente {
  position: fixed; z-index: 50; top: calc(10px + env(safe-area-inset-top, 0px)); left: var(--anm-margen-lateral); right: var(--anm-margen-lateral);
  max-width: calc(var(--anm-ancho-columna) - 2 * var(--anm-margen-lateral)); margin: 0 auto;
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: var(--anm-esp-2) var(--anm-esp-4);
  background: var(--anm-color-fosforito); color: var(--anm-color-tinta); border: var(--anm-borde-grosor) solid var(--anm-color-tinta);
  box-shadow: 4px 4px 0 var(--anm-color-tinta); font-family: var(--anm-fuente-titular); font-weight: 700; font-size: 1rem; line-height: 1.25;
  animation: anm-emergente 4.4s var(--anm-curva-salida) 0.15s both;
}
.anm-aviso-emergente svg { width: 22px; height: 22px; flex: none; }
@keyframes anm-emergente { 0% { opacity: 0; transform: translateY(-12px); } 5%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-12px); visibility: hidden; } }
@keyframes anm-emergente-fundido { 0% { opacity: 0; } 1%, 99% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .anm-aviso-emergente { animation-name: anm-emergente-fundido; } .anm-boton, .anm-boton svg, .anm-boton-ver { transition: none; } .anm-boton:active:not([aria-disabled="true"]), .anm-boton-ver:active { transform: none; } }

/* Marca del «No» dentro de un texto corrido */
.anm-no { background: var(--anm-color-fosforito); color: var(--anm-color-tinta); padding: 0 0.12em; font-weight: 700; }

/* Cambio de pantalla: entra deslizando 24 px y fundiendo; con movimiento reducido, instantáneo */
.anm-pantalla-entra { animation: anm-entra var(--anm-dur-pantalla) var(--anm-curva-salida) both; }
.anm-pantalla-vuelve { animation: anm-vuelve var(--anm-dur-pantalla) var(--anm-curva-salida) both; }
@keyframes anm-entra { from { opacity: 0; transform: translateX(var(--anm-desplazamiento)); } }
@keyframes anm-vuelve { from { opacity: 0; transform: translateX(calc(-1 * var(--anm-desplazamiento))); } }
@media (prefers-reduced-motion: reduce) { .anm-pantalla-entra, .anm-pantalla-vuelve { animation: none; } }

/* Pregunta obligatoria: tres opciones de igual peso, sin preselección */
.anm-opcion {
  display: flex; align-items: center; gap: var(--anm-esp-3); width: 100%;
  min-height: 60px; padding: var(--anm-esp-2) var(--anm-esp-4);
  border: var(--anm-borde-grosor) solid var(--anm-borde); border-radius: var(--anm-radio-0);
  background: var(--anm-fondo); color: var(--anm-texto); text-align: left;
  font-family: var(--anm-fuente-titular); font-weight: 700; font-size: 1rem; line-height: 1.25;
  cursor: pointer;
}
.anm-opcion[aria-checked="true"], .anm-opcion[aria-pressed="true"] { background: var(--anm-color-fosforito); color: var(--anm-color-tinta); }
/* OBSOLETO desde la decisión 31 (sin código de 6 dígitos): se mantiene solo por compatibilidad */
.anm-codigo { display: flex; gap: var(--anm-esp-2); }
.anm-codigo input {
  width: 46px; height: 58px; text-align: center;
  border: var(--anm-borde-grosor) solid var(--anm-borde); border-radius: var(--anm-radio-0);
  font-family: var(--anm-fuente-titular); font-weight: 800; font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}
.anm-codigo input:focus { box-shadow: inset 0 -6px 0 var(--anm-color-fosforito); }
:where(.anm-boton, .anm-boton-ver, .anm-opcion, .anm-enlace, .anm-legal a, .anm-codigo input):focus-visible {
  outline: var(--anm-foco-grosor) solid var(--anm-foco); outline-offset: var(--anm-foco-separacion);
}