/* Pantalla de la evaluación: una idea por pantalla, aire y nada que obligue a
   leer dos veces. Es deliberadamente más ligera que el informe, que es denso
   porque se lee sentado. Mobile primero: la mayoría llega desde LinkedIn.

   Tema: el de uhorizon.ai (oscuro entero, decisión de Juan Miguel del 17-sep).
   Los colores salen de los tokens `--fondo`, `--superficie`, `--texto`,
   `--acento` (verde) y `--acento-2` (azul) de tokens.css; aquí no hay
   hexadecimales sueltos. La estructura y los nombres de clase no cambiaron:
   el JavaScript pinta lo mismo que antes. */

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

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

body {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--alto-cabecera);
}

/* Cabecera fija y oscura, como la del sitio. */
.barra-marca {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--alto-cabecera);
  background: rgba(9, 9, 11, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  padding: 0 calc(var(--paso) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--paso) * 1.5);
}
/* El wordmark es el camino de vuelta a la portada desde cualquier pantalla. */
.barra-marca__nombre {
  font: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
.marca-texto { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.marca-chip {
  width: 26px; height: 26px; border-radius: 4px; background: var(--degradado-cta);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; color: #fff; line-height: 1;
}
.barra-marca__nombre:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 4px; }
.barra-marca__pieza { font-weight: 500; color: var(--texto-suave); font-size: 0.8125rem; letter-spacing: 0.02em; }

.lienzo {
  max-width: var(--ancho-lectura);
  margin: 0 auto;
  padding: calc(var(--paso) * 5) calc(var(--paso) * 3) calc(var(--paso) * 10);
}

.pantalla[hidden] { display: none; }

/* Eyebrow en versalitas verdes, como el kicker del sitio. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 calc(var(--paso) * 1.5);
}

h1 {
  font-size: clamp(1.9rem, 5.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 calc(var(--paso) * 2);
  color: #fff;
}
h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: calc(var(--paso) * 5) 0 calc(var(--paso) * 2);
  color: var(--texto);
}
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 var(--paso); color: var(--texto); }

.bajada { font-size: 1.0625rem; color: var(--texto-suave); margin: 0 0 calc(var(--paso) * 3); }
.nota { font-size: 0.875rem; color: var(--texto-suave); }

/* Entrada */
.puntos { list-style: none; margin: calc(var(--paso) * 3) 0; padding: 0; display: grid; gap: calc(var(--paso) * 2); }
.punto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-web);
  padding: calc(var(--paso) * 2);
}
.punto strong { display: block; color: var(--texto); }
.punto span { color: var(--texto-suave); font-size: 0.9375rem; }
.punto__linea { display: block; }
.aviso--definicion { margin-bottom: calc(var(--paso) * 3); }

/* Portada: dos rutas, una al lado de la otra, grandes y con icono. La
   individual lleva el verde y la de empresa el azul: los dos acentos del sitio. */
.rutas { display: grid; gap: calc(var(--paso) * 2); grid-template-columns: 1fr; margin-top: calc(var(--paso) * 2); }
.ruta-tarjeta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--paso);
  text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde); border-top: 3px solid var(--acento);
  border-radius: var(--radio-web); padding: calc(var(--paso) * 3);
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
}
.ruta-tarjeta + .ruta-tarjeta { border-top-color: var(--acento-2); }
.ruta-tarjeta:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); transform: translateY(-2px); }
.ruta-tarjeta:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.ruta-tarjeta__icono { color: var(--acento); }
.ruta-tarjeta + .ruta-tarjeta .ruta-tarjeta__icono { color: var(--acento-2); }
.ruta-tarjeta__titulo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.ruta-tarjeta__texto { color: var(--texto-suave); font-size: 0.9375rem; flex: 1; }
.ruta-tarjeta__accion { margin-top: var(--paso); font-weight: 700; color: var(--acento); }
.ruta-tarjeta + .ruta-tarjeta .ruta-tarjeta__accion { color: var(--acento-2); }
.ruta-tarjeta__accion::after { content: " →"; }

/* Avance */
.avance { margin-bottom: calc(var(--paso) * 4); }
.avance__etiquetas {
  display: flex; justify-content: space-between; gap: var(--paso);
  font-size: 0.8125rem; color: var(--texto-suave); margin-bottom: var(--paso);
}
.avance__bloque { font-weight: 600; color: var(--texto); }
.avance__pista { height: 6px; background: var(--superficie-3); border-radius: 999px; overflow: hidden; }
.avance__relleno { height: 100%; width: 0; background: var(--degradado-cta); border-radius: 999px; transition: width 220ms ease; }

/* Preguntas */
.pregunta__enunciado { font-size: 1.375rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 var(--paso); color: #fff; }
.pregunta__ayuda { color: var(--texto-suave); font-size: 0.9375rem; margin: 0 0 calc(var(--paso) * 2); }
.pregunta__pie { color: var(--texto-suave); font-size: 0.8125rem; margin-top: calc(var(--paso) * 2); }
.pregunta__obligatoria { color: var(--texto-suave); font-size: 0.8125rem; font-weight: 500; }

.opciones { display: grid; gap: calc(var(--paso) * 1.5); margin: 0; padding: 0; border: 0; }
.opcion {
  display: flex; align-items: flex-start; gap: calc(var(--paso) * 1.5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-web);
  padding: calc(var(--paso) * 2);
  cursor: pointer;
  color: var(--texto);
  transition: border-color 140ms ease, background 140ms ease;
  min-height: 52px;
}
.opcion:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.opcion input { margin: 3px 0 0; width: 20px; height: 20px; accent-color: var(--acento); flex: 0 0 auto; }
.opcion__texto { display: block; }
.opcion__titulo { font-weight: 500; }
.opcion__detalle { display: block; color: var(--texto-suave); font-size: 0.875rem; margin-top: 2px; }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcion input:disabled + .opcion__texto { opacity: 0.45; }

.campo { display: block; margin-bottom: calc(var(--paso) * 3); }
.campo__etiqueta { display: block; font-weight: 600; margin-bottom: var(--paso); color: var(--texto); }
input[type="email"], input[type="text"], input[type="tel"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-boton);
  padding: calc(var(--paso) * 1.5);
  color-scheme: dark;
}
input::placeholder, textarea::placeholder { color: var(--texto-apagado); }
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}

/* Matriz de la P20: tabla en escritorio, tarjetas apiladas en móvil */
.matriz { display: grid; gap: calc(var(--paso) * 2); }
.matriz__fila { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-web); padding: calc(var(--paso) * 2); }
.matriz__afirmacion { font-weight: 500; margin-bottom: calc(var(--paso) * 1.5); color: var(--texto); }
.matriz__escala { display: flex; gap: var(--paso); justify-content: space-between; }
.matriz__punto { flex: 1; text-align: center; }
.matriz__punto input { width: 22px; height: 22px; accent-color: var(--acento); }
.matriz__punto span { display: block; font-size: 0.75rem; color: var(--texto-suave); margin-top: 4px; }
.matriz__extremos { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--texto-suave); margin-top: var(--paso); }

/* Acciones: primario verde sólido, secundario transparente con borde, como el sitio. */
.acciones { display: flex; gap: calc(var(--paso) * 1.5); align-items: center; margin-top: calc(var(--paso) * 4); flex-wrap: wrap; }
.boton {
  font: inherit; font-weight: 600;
  border-radius: var(--radio-boton);
  padding: calc(var(--paso) * 1.75) calc(var(--paso) * 3);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  transition: background 140ms ease, border-color 140ms ease;
}
.boton--primario { background: var(--acento); color: #fff; }
.boton--primario:hover { background: var(--acento-hover); }
.boton--secundario { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
.boton--secundario:hover { border-color: var(--texto-suave); background: var(--superficie-2); }
.boton:disabled { opacity: 0.5; cursor: default; }
.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.boton--pendiente { background: var(--superficie-3); color: var(--texto-suave); cursor: not-allowed; }
/* El llamado a la reunión es un enlace, y tiene que leerse como el botón que es:
   sobre la banda de gradiente del cierre, transparente con borde blanco. */
a.boton { display: inline-block; text-decoration: none; text-align: center; }
.boton--agenda {
  background: transparent; color: #fff; font-weight: 600;
  border-color: rgba(255, 255, 255, 0.55);
  padding: calc(var(--paso) * 2) calc(var(--paso) * 3.5);
}
.boton--agenda:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }

.error {
  color: var(--peligro); font-size: 0.9375rem; font-weight: 500;
  margin-top: calc(var(--paso) * 2);
}
.aviso {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-web); padding: calc(var(--paso) * 2);
  font-size: 0.9375rem; color: var(--texto-suave);
}
.aviso h3 { color: var(--texto); }

/* Captura y privacidad */
.privacidad { margin-top: calc(var(--paso) * 3); }
.privacidad__resumen { font-size: 0.875rem; color: var(--texto-suave); }
.privacidad__detalle {
  margin-top: calc(var(--paso) * 2); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio-web);
  padding: calc(var(--paso) * 2); font-size: 0.875rem; color: var(--texto-suave);
}
.privacidad__detalle p { margin: 0 0 var(--paso); }
.enlace-texto {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--acento); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.enlace-texto:hover { color: #fff; }

/* Resultado: la escala completa, del 5 al 0, con la fila del grado evidenciado
   destacada en verde y la del declarado marcada en azul. Se lee de arriba abajo
   como una escalera. */
.escala { display: grid; gap: var(--paso); }
.escala__fila {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--paso);
  align-items: center; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-web); padding: calc(var(--paso) * 1.5) calc(var(--paso) * 2);
}
.escala__fila--evidenciado { background: var(--acento-suave); border-color: var(--acento); }
.escala__fila--declarado:not(.escala__fila--evidenciado) { border-color: var(--acento-2); background: var(--acento-2-suave); }
.escala__numero { font-size: 1.5rem; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--texto-suave); }
.escala__fila--evidenciado .escala__numero { font-weight: 700; color: var(--acento); }
.escala__fila--declarado:not(.escala__fila--evidenciado) .escala__numero { color: var(--acento-2); }
.escala__cuerpo p { margin: 0; }
.escala__nombre { font-weight: 700; font-size: 0.9375rem; color: var(--texto); }
.escala__resumen { color: var(--texto-suave); font-size: 0.8125rem; margin-top: 2px; }
.escala__marcas { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.escala__marcas:empty { display: none; }
.escala__marca {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 999px; padding: 2px 10px;
}
.escala__marca--evidenciado { background: var(--acento); color: #fff; }
.escala__marca--declarado { background: transparent; color: var(--acento-2); border: 1px solid var(--acento-2); }
.escala__leyenda { font-size: 0.8125rem; margin-top: calc(var(--paso) * 1.5); color: var(--texto-suave); }
.escala__leyenda-linea { margin: 0 0 2px; }
.ultimo-resultado { margin-top: calc(var(--paso) * 3); display: flex; gap: var(--paso); align-items: baseline; flex-wrap: wrap; }
.informe-correo__plazo { margin: calc(var(--paso) * 2) 0 0; }
.informe-correo__secciones { margin: var(--paso) 0 0; padding-left: 20px; color: var(--texto-suave); display: grid; gap: 6px; }

.comparacion {
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid var(--acento-2); border-radius: var(--radio-web);
  padding: calc(var(--paso) * 3); margin-top: calc(var(--paso) * 2);
}
.comparacion h3 { color: var(--acento-2); }
.comparacion p { margin: 0; color: var(--texto-suave); }

.retrato { display: grid; gap: calc(var(--paso) * 2); grid-template-columns: 1fr; }
.tarjeta .tarjeta__valor--chico { font-size: 1.0625rem; font-weight: 600; margin: var(--paso) 0 0; }
.familias__principal { background: var(--acento) !important; color: #fff !important; }
.familias__principal small { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.programa-correo {
  background: var(--superficie); border: 1px solid var(--borde); border-left: 3px solid var(--acento);
  border-radius: var(--radio-web); padding: calc(var(--paso) * 3); margin-top: calc(var(--paso) * 4);
}
.programa-correo h2 { margin-top: 0; }
.programa-correo p { margin: 0; color: var(--texto-suave); }

/* Modal de la ruta de empresa: panel narrativo a la izquierda, formulario a la
   derecha (opción A elegida por JM el 8-sep). En móvil el panel va arriba. El
   panel lleva el gradiente verde a azul del sitio; el formulario, la superficie. */
.con-modal { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal[hidden] { display: none; }
.modal__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.modal__caja {
  position: relative; width: 100%; max-height: 94vh; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-web) var(--radio-web) 0 0;
}
.modal__caja--doble { display: grid; grid-template-columns: 1fr; max-width: 64rem; }
.modal__panel {
  background: var(--degradado-cta); color: #fff;
  padding: calc(var(--paso) * 4) calc(var(--paso) * 3) calc(var(--paso) * 3);
}
.modal__panel-eyebrow { color: rgba(255, 255, 255, 0.85); }
.modal__panel h2 { margin: 0 0 var(--paso); color: #fff; font-weight: 700; font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.02em; }
.modal__panel-texto { margin: 0 0 calc(var(--paso) * 2); color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; }
.modal__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--paso) * 1.25); counter-reset: paso; }
.modal__pasos li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; color: rgba(255, 255, 255, 0.95); counter-increment: paso; }
.modal__pasos li::before {
  content: counter(paso); flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: #fff; color: var(--fondo); font-size: 0.75rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__panel-pie { margin: calc(var(--paso) * 3) 0 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); }
.modal__demo { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.modal__formulario { position: relative; padding: calc(var(--paso) * 4) calc(var(--paso) * 3) calc(var(--paso) * 5); }
.modal__rejilla { display: grid; grid-template-columns: 1fr; gap: 0 calc(var(--paso) * 2); }
.modal__rejilla .campo--ancho { grid-column: 1 / -1; }
.modal__cerrar {
  position: absolute; z-index: 2; top: calc(var(--paso) * 2); right: calc(var(--paso) * 2);
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2); font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--texto);
}
.modal__cerrar:hover { border-color: var(--texto-suave); }
.modal__caja .campo { margin-bottom: calc(var(--paso) * 2); }
.modal__privacidad-detalle { position: relative; margin-top: var(--paso); padding-right: calc(var(--paso) * 6); }
.privacidad__cerrar {
  position: absolute; top: var(--paso); right: var(--paso);
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2); color: var(--texto); font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.privacidad__cerrar:hover { border-color: var(--texto-suave); }
.modal__caja textarea { min-height: 80px; }
.areas-editor__entrada { display: flex; gap: var(--paso); }
.areas-editor__entrada input { margin: 0; }
.areas-editor__lista { display: flex; flex-wrap: wrap; gap: calc(var(--paso) * .75); margin-top: var(--paso); }
.area-etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border-radius: 999px; background: var(--acento-2-suave); color: var(--texto); border: 1px solid rgba(0, 119, 255, 0.35); font-size: .8125rem; }
.area-etiqueta button { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: 800; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-web); padding: calc(var(--paso) * 2.5);
}
.tarjeta__titulo { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 var(--paso); }
.tarjeta__valor { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.tarjeta__detalle { color: var(--texto-suave); font-size: 0.875rem; margin-top: 4px; }
/* Estrellas en el amarillo de la guía; las vacías solo en contorno (JM, 7-sep). */
.estrellas { color: var(--amarillo); letter-spacing: 2px; font-size: 1.75rem; line-height: 1; margin: 0; }
.estrellas__apagada { color: transparent; -webkit-text-stroke: 1px var(--borde-fuerte); }
.familias { list-style: none; margin: var(--paso) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.familias li {
  font-size: 0.8125rem; background: var(--acento-2-suave); color: var(--texto);
  border: 1px solid rgba(0, 119, 255, 0.35); border-radius: 999px; padding: 2px 10px;
}

.modulos { list-style: none; margin: calc(var(--paso) * 2) 0 0; padding: 0; display: grid; gap: calc(var(--paso) * 2); }
.modulo {
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 3px solid var(--acento-2); border-radius: var(--radio-web);
  padding: calc(var(--paso) * 2.5);
}
.modulo__cabecera { display: flex; flex-wrap: wrap; gap: var(--paso); align-items: baseline; margin-bottom: var(--paso); }
.modulo__orden { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acento-2); }
.modulo__etiqueta { font-size: 0.75rem; color: var(--texto-suave); background: var(--superficie-3); border-radius: 999px; padding: 2px 10px; }
.modulo__nombre { font-weight: 700; margin: 0 0 var(--paso); color: var(--texto); }
.modulo__campo { margin-top: var(--paso); font-size: 0.9375rem; }
.modulo__campo strong { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); }
.modulo__campo span { color: var(--texto-suave); }

.ruta {
  background: var(--acento-suave); border: 1px solid var(--acento);
  border-radius: var(--radio-web); padding: calc(var(--paso) * 2.5); margin-top: calc(var(--paso) * 2);
}
.ruta h3 { color: var(--acento); }
.ruta p { margin: 0; color: var(--texto-suave); }

/* Cierre: la banda con el gradiente verde a azul, como el CTA del sitio. */
.cierre {
  background: var(--degradado-cta); color: #fff;
  border-radius: var(--radio-web); padding: calc(var(--paso) * 5) calc(var(--paso) * 4);
  margin-top: calc(var(--paso) * 5); text-align: center;
}
.cierre h2 { margin-top: 0; color: #fff; }
.cierre p { color: rgba(255, 255, 255, 0.9); }
.cierre .acciones { justify-content: center; }

.puerta-empresa {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-web); padding: calc(var(--paso) * 4); margin-top: calc(var(--paso) * 3);
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (min-width: 40rem) {
  .lienzo { padding-left: calc(var(--paso) * 5); padding-right: calc(var(--paso) * 5); }
  /* En escritorio la columna de 44rem dejaba demasiado aire a los lados
     (revisión de JM, 8-sep): un 20 % más de ancho de lectura. */
  .lienzo { max-width: 53rem; }
  .barra-marca { padding: 0 calc(var(--paso) * 5); }
  .escala__fila { grid-template-columns: 2.75rem 1fr auto; }
  .escala__marcas { grid-column: auto; }
  .retrato { grid-template-columns: repeat(2, 1fr); }
  .rutas { grid-template-columns: 1fr 1fr; }
  .modal { align-items: center; padding: calc(var(--paso) * 3); }
  .modal__caja { border-radius: var(--radio-web); }
  .modal__caja--doble { grid-template-columns: 22rem 1fr; }
  .modal__panel { padding: calc(var(--paso) * 5) calc(var(--paso) * 4); }
  .modal__formulario { padding: calc(var(--paso) * 5) calc(var(--paso) * 4); }
  .modal__rejilla { grid-template-columns: 1fr 1fr; }
  /* Los cinco puntos y los dos extremos comparten el mismo ancho, para que
     «Totalmente de acuerdo» quede debajo del 5 y no en la otra punta de la
     tarjeta (JM, 8-sep, tras ampliar el lienzo). */
  .matriz__escala, .matriz__extremos { max-width: 26rem; }
}

@media (prefers-reduced-motion: reduce) {
  .avance__relleno { transition: none; }
}

/* El aviso de que el informe del correo trae más que la pantalla. Es lo que hace
   que abran el correo, así que no puede leerse como una nota al pie. */
.nota--informe {
  margin-top: calc(var(--paso) * 3);
  padding: calc(var(--paso) * 2.5) calc(var(--paso) * 3);
  border-left: 3px solid var(--acento);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left-width: 3px;
  border-radius: var(--radio-web);
  color: var(--texto);
}