/* diagnostico.css — lo propio de /diagnostico.
   Sale de polara/docs/diseno/2026-08-04-prediagnostico-v1.html, partido el
   2026-08-05 porque la política del sitio dice `script-src 'self'` y el bloque
   de 47 KB que traía en línea habría sido bloqueado: la página cargaría y no
   funcionaría nada. El estilo sí podía quedarse en línea —la política permite
   estilos— pero se parte igual: se cachea y tiene que cargar en orden después
   del design system. */
/* ══ LO PROPIO DEL DIAGNÓSTICO ═══════════════════════════════════════════════
   Todo lo demás lo hereda de _ds/. La pieza traía una copia verbatim de 97
   tokens del design system; 53 de los 56 compartidos ya valían exactamente lo
   mismo, así que redeclararlos solo abría la puerta a que un día divergieran
   sin que nadie lo notara. Aquí queda únicamente lo que el sistema NO tiene.
   Y el bloque [data-theme="dark"] se fue completo: esta página hereda el tema
   claro del sitio, y el momento oscuro no se pierde porque el cielo de la
   constelación es siempre noche por decisión de la propia pieza. */
:root{
  /* LOS TIPOS DE LA PIEZA VAN MÁS CHICOS A PROPÓSITO: es una herramienta que se
     contesta, no una portada que se admira. Con nombre propio esa decisión
     queda escrita y protegida. --diag-display existe en el sistema con OTRO
     valor (clamp(2.5rem,6vw,4.5rem)) y conviviendo ganaba el que cargara al
     último: un reorden de <link> cambiaba la tipografía sola. */
  --diag-display:clamp(2.2rem,5.6vw,4rem);
  --diag-t1:clamp(1.75rem,3.6vw,2.6rem);
  --diag-t2:clamp(1.3rem,2.4vw,1.75rem);

  /* El sistema llega hasta --radio-2xl:24px. Este se queda como propio en vez
     de tocar _ds/, que es copia exportada y una re-exportación se lo llevaría. */
  --radio-3xl:32px;

  /* El cielo es SIEMPRE noche: una constelación de día no existe. */
  --cielo-1:#120E1C;--cielo-2:#1C1220;--cielo-3:#0B0910;
  --cielo-txt:#F6F1EA;--cielo-txt-2:#A99CB0;--cielo-txt-3:#DCD3E0;

  /* El color de cada pieza del ecosistema. Son las SEIS herramientas más el
     Consejo: los tonos de las piezas que el catálogo fundió o absorbió se
     fueron con ellas, y los que quedan conservan su valor de siempre para que
     una pieza no cambie de color al cambiar de nombre. */
  --c-kairos:#4FD996;--c-finanzas:#3FD3CE;--c-operacion:#5FB8F5;--c-estudio:#F87BAD;
  --c-consejo:#F5A34B;--c-atencion:#B49BFF;--c-clientes:#F68392;
  --c-servicio:#C9BEB1;--c-tu:#FFB27A;

  /* ── LOS MISMOS, PARA CUANDO VAN SOBRE PAPEL (2026-08-07) ──
     Los de arriba se diseñaron para el cielo OSCURO de la constelación y ahí
     están bien. Sobre el papel del cuerpo hace falta otra rampa: un color
     pensado para brillar sobre noche no sostiene su lectura sobre claro, y la
     frase "Lo primero es <em>X</em>" es la que carga toda la pieza. Estos
     son esa segunda rampa, cada uno con su medición al lado.

     Cómo se obtuvieron, y por qué son literales y no un color-mix:
     es `color-mix(in oklab, <el de arriba> 65%, #1D1917)`, ya resuelto. Se
     escribe el resultado porque `color-mix(in oklab, ...)` COMPUTA A
     `oklab(...)`, y NINGUNO de los dos medidores del repo sabe leer ese
     formato -- el de contraste.js lo leería como casi negro, que es la trampa
     que ese archivo ya documenta. Un arreglo que el instrumento no puede
     verificar no es un arreglo.

     El 65% es el punto donde todos pasan 3:1 con margen conservando dos
     tercios del color, o sea sin dejar de ser reconocibles como su nodo del
     mapa. Al 75% tres de ellos se caen a 2.86.

     ⚠️ SIRVEN PARA TEXTO ≥24px (el umbral de 3:1). El h2 del veredicto arranca
     en 1.9rem = 30.4px por su clamp, así que cumple siempre. Para texto chico
     sobre papel hacen falta otros: el peor de estos da 3.63 y el mínimo sería
     4.5. */
  --c-kairos-papel:#458F66;      /* 3.63 */
  --c-finanzas-papel:#3E8C88;    /* 3.67 */
  --c-operacion-papel:#4A7C9F;   /* 4.17 */
  --c-estudio-papel:#A45774;     /* 4.65 */
  --c-consejo-papel:#A26F3B;     /* 4.01 */
  --c-atencion-papel:#7A6AA6;    /* 4.40 */
  --c-clientes-papel:#A35C63;    /* 4.57 */
  --c-servicio-papel:#877F76;    /* 3.66 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* ⚠️ EL CLIP VA EN <html> Y NO SOLO EN <body>, Y LO PIDIO UNA MEDICION QUE UN
   NAVEGADOR SIN VENTANA NO PUEDE HACER.
   El acorde de la portada sangra con `margin-inline:calc(50% - 50vw)`, y ahi
   hay una trampa: `50vw` se resuelve contra el viewport CON la barra de scroll
   reservada, mientras que `50%` se resuelve contra el ancho real del
   contenedor, SIN ella. La diferencia es media barra por orilla -- 7.5px de
   cada lado con la barra clasica de Windows-- y el documento crecia 8px.
   Medido headed en 1024, 1280, 1440 y 1920: los cuatro se deslizaban.
   ⚠️ Y EN MODO SIN VENTANA NO SE REPRODUCE, que es lo que lo hizo invisible:
   ese modo no reserva espacio de barra, asi que clientWidth == innerWidth y
   todo sale verde. Cualquier prueba de desbordamiento en esta pagina tiene que
   imprimir `innerWidth - clientWidth` para demostrar que su entorno SI tiene
   barra; si esa resta da cero, el verde no significa nada.
   Va en <html> porque el clip del <body> no alcanza: con el <html> en
   `visible`, el overflow del <body> SE PROPAGA al viewport y el body pasa a
   comportarse como visible. Y es `clip`, no `hidden`: `clip` no crea un
   contenedor de scroll, asi que el encabezado fijo sigue anclado al viewport. */
html{overflow-x:clip}
/* ⭐ EL ENCABEZADO FLOTANTE TAPABA EL HORARIO QUE LA PERSONA ACABABA DE ESCOGER.
   Al escoger un horario, la página de Clientes lleva su formulario a la vista
   con scrollIntoView, y ese scroll CRUZA el marco y mueve también esta página.
   Lo dejaba pegado al borde de arriba — justo debajo de la marca y el menú, que
   son `position:fixed`. Medido en producción el 2026-09-22: el renglón «Martes,
   6 de octubre a las 3:30 p.m.» quedaba en y=21–65 y la marca ocupa y=16–68, en
   320, 375, 390 y 1280 por igual. Quien escogía no veía qué había escogido.
   ⚠️ NO SE ARREGLA DEL LADO DE CLIENTES: se probó `scroll-margin-top` en su
   formulario y NO cruza al documento padre (0, 88px y 5.5rem dieron lo mismo).
   El relleno de desplazamiento del viewport de AQUÍ sí lo respeta. Con él el
   renglón baja a y=105 en los cuatro anchos y el botón de apartar sigue
   entrando completo en 375, 390 y 1280; en 320×568 el formulario mide 681px y
   ya no cabe con o sin esto. La cuenta es la del encabezado —su `top` y sus
   52px de alto, en pagina.css `.nav__marca`— más un respiro. */
html{scroll-padding-top:calc(max(var(--e-4),env(safe-area-inset-top)) + 52px + var(--e-4))}
body{background:var(--lienzo);color:var(--texto-principal);font-family:var(--fuente-nucleo);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
/* ⚠️ AQUI VIVIA UN overflow-x:clip, Y SE QUITO AL ESTRENAR EL ACORDE.
   Estaba por el resplandor decorativo de la portada -- un ::before con inset
   -25% que sobresalia unos 280px por orilla y deslizaba la pagina 128px en 1440
   y 70px en 390. Ese resplandor ya no existe: lo sustituyo el acorde de verdad.
   Se comprobo antes de quitarlo, recorriendo el cuestionario ENTERO con el clip
   apagado: 90 pantallas en los seis anchos, cero deslizamiento -- y la primera
   vuelta de esa medicion NO VALIA, porque corrio en un navegador sin ventana y
   ahi no existe la barra de scroll. Se repitio con ventana real y la resta
   innerWidth - clientWidth dando 15px en los seis anchos, que es la prueba de
   que el entorno si tenia barra. Ver la nota del clip de <html> mas arriba.

   Y NO PODIA QUEDARSE "por si acaso": .app mide 1200px como maximo, asi que su
   clip recortaba el acorde justo a ese ancho y dejaba dos franjas de papel a los
   lados. Lo que se gana no es limpieza, es que el arte llegue a la orilla.

   LO QUE SI SE QUEDA es el clip del <body>, y conviene saber por que no bastaba
   solo: cuando el <html> esta en `visible`, el overflow del <body> SE PROPAGA al
   viewport y el body pasa a comportarse como visible -- su valor computado sigue
   diciendo `clip`, o sea que leer getComputedStyle ahi da un verde que no
   significa nada. Con el elemento que sobresalia ya borrado, esa red alcanza.

   Y una nota de metodo que costo una ronda: un pseudoelemento no aparece en
   querySelectorAll, asi que el barrido que busca cajas pasadas del borde
   devolvia CERO mientras la pagina se deslizaba de verdad. Lo que lo encuentra
   es medir scrollWidth contra clientWidth, no enumerar elementos. */
/* ══════════ EL HUECO DE ARRIBA NO ES UN 72 A OJO ══════════
   El encabezado del sitio es position:fixed, o sea que no reserva espacio para
   nadie. Las otras cuatro paginas lo libran porque sus secciones traen su
   propio aire arriba; esta no tiene secciones, y sin esta linea el chip del
   wordmark cae encima del epigrafe de la portada y del titulo de la pregunta
   -- medido a 320, 390 y 1024, y el titulo pierde el arranque por la izquierda,
   que es justo donde se empieza a leer.

   LOS TRES SUMANDOS, y por que ninguno es un numero suelto:
   · max(--e-4, env(safe-area-inset-top)) es LA MISMA EXPRESION con la que se
     anclan el chip y el boton en pagina.css. Copiar el resultado (16) en vez de
     la expresion dejaria este hueco viejo el dia que cambie --e-4.
   · 52px es el alto declarado de los dos.
   · --e-3 es el aire, y es lo unico que se eligio mirando.

   ⚠️ UN 72 PLANO ARREGLARIA EL ESCRITORIO Y ROMPERIA EL TELEFONO CON MUESCA.
   Ahi el inset de arriba ronda los 59, la capsula termina cerca de y=111, y un
   hueco fijo de 72 dejaria la barra de progreso debajo del reloj y encima de
   los controles flotantes del sistema. Con la expresion, en ese aparato el
   hueco crece solo.

   El `0px` del env() no es adorno: sin respaldo, un navegador que no conozca
   env() invalida la variable entera, y con ella se cae el padding COMPLETO de
   .app -- tambien el de los lados y el de abajo, porque van en la misma
   abreviada. Con el respaldo, lo peor que pasa es que valga cero. */
.app{--reserva-arriba:calc(max(var(--e-4),env(safe-area-inset-top,0px)) + 52px + var(--e-3));
  max-width:1200px;margin:0 auto;
  padding:var(--reserva-arriba) clamp(16px,4vw,40px) 80px}

.progreso{flex:1;display:flex;align-items:center;gap:var(--e-3);min-width:0}
/* EL `hidden` DE ESTA BARRA NO SERVIA DE NADA, y no era un descuido del motor:
   el motor SI le pone el atributo al llegar al veredicto. Lo que pasa es que
   `display:flex` de la linea de arriba es una regla de autor y `[hidden]
   {display:none}` es del navegador, y en la cascada el autor gana siempre, sin
   que la especificidad tenga nada que decir. O sea que la barra se quedaba
   encendida, llena y con su rotulo, en la pantalla del resultado -- justo donde
   ya no falta nada. Cualquier elemento con display declarado necesita esta
   pareja; pagina.css ya la tiene escrita para su velo. */
.progreso[hidden]{display:none}
.barra{flex:1;height:3px;background:var(--borde-sutil);border-radius:var(--radio-pill);overflow:hidden;max-width:320px}
/* El avance se dibuja con transform, no con width: el navegador no recalcula
   la caja en cada cuadro. Quien lo lee recibe el scaleX y lo vuelve por ciento. */
.barra i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;border-radius:inherit;
  background:linear-gradient(90deg,var(--aurora-ambar),var(--marca));
  transition:transform var(--dur-lenta) var(--ease-salida)}
#progreso-t{font-size:var(--txt-meta);color:var(--texto-terciario);font-variant-numeric:tabular-nums;white-space:nowrap}
h1{font-size:var(--diag-display);line-height:.98;letter-spacing:var(--track-display);font-weight:var(--peso-black);
  margin:0 0 var(--e-4);text-wrap:balance}
h2{font-size:var(--diag-t1);line-height:1.1;letter-spacing:var(--track-titulo);font-weight:var(--peso-bold);
  margin:0 0 var(--e-4);text-wrap:balance}
h3{font-size:var(--diag-t2);line-height:1.2;letter-spacing:var(--track-titulo);font-weight:var(--peso-bold);margin:0 0 var(--e-3)}
.epigrafe{font-size:var(--txt-meta);letter-spacing:var(--track-etiqueta);text-transform:uppercase;
  color:var(--texto-terciario);font-weight:var(--peso-semi);margin:0 0 var(--e-4)}
.lede{font-size:var(--txt-cuerpo-lg);color:var(--texto-secundario);max-width:var(--ancho-lectura);margin:0 0 var(--e-8)}

.pantalla{animation:sube var(--dur-revelado) var(--ease-salida) both}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── portada ── */
/* LA PORTADA DEVUELVE EL HUECO Y SE LO QUEDA COMO RELLENO, y no es un truco de
   adorno: es la unica pantalla con acorde, y el acorde sangra hasta la orilla.
   Con el hueco de .app tal cual, el arte arrancaba 80px mas abajo y dejaba una
   franja de papel cruzando el borde de arriba. El margen negativo sube la CAJA
   (o sea el arte) hasta
   y=0; el mismo valor sumado a su relleno deja el TEXTO donde lo puso .app.
   Los dos salen de --reserva-arriba, asi que no pueden separarse. */
.portada{min-height:66vh;display:flex;flex-direction:column;justify-content:center;
  margin-top:calc(-1 * var(--reserva-arriba));
  padding:calc(var(--e-10) + var(--reserva-arriba)) 0 var(--e-10);position:relative}

/* ══════════ LA PORTADA USA UN ACORDE DE VERDAD ══════════
   Aquí vivía un resplandor hecho A MANO: tres degradados radiales con
   --aurora-naranja, --aurora-violeta y --aurora-ambar, desenfocados 22px. El
   sistema de diseño dice de esos tres pigmentos que "no se usan como color de
   texto ni de UI; su único destino son los acordes", así que esta pantalla era
   la única del sitio que IMITABA una aurora en vez de usar una — y se notaba:
   junto al pie, que sí lleva acorde, el de aquí se veía lavado.

   Ahora es Amanecer, el mismo archivo que ya usa el mapa de /ecosistema.

   ⚠️ LA REGLA VIEJA TENÍA QUE BORRARSE, NO CONVIVIR. El arte del acorde lo
   pinta `.aurora::before`, que es EL MISMO pseudoelemento. Las dos reglas
   valen una clase, o sea la misma especificidad, y esta hoja carga después de
   _ds/ y de pagina.css: en un empate gana la última, así que dejar el
   resplandor aquí habría tapado el acorde entero sin un solo error.

   ⚠️ Y EL CUERPO SE QUEDA EN PAPEL. El acorde va en la sección de la portada y
   no en .app, que envuelve también las 29 preguntas: "nadie lee un inventario
   sobre un gradiente". */
.portada.aurora{
  /* A SANGRE, porque así entra un acorde en todo el resto del sitio. La portada
     vive dentro de .app, que mide 1200px como máximo; sin esto el arte queda
     encajonado con franjas de papel a los lados y se lee como una tarjeta
     flotando, no como el fondo de la pantalla. El margen negativo la lleva a la
     orilla y el relleno devuelve el texto a su columna: los dos usan el mismo
     par 50%/50vw, así que el contenido no se mueve ni un pixel. */
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  /* ⚠️ EL ENCUADRE VA AQUI Y NO CON data-costura, Y LA DIFERENCIA IMPORTA.
     data-costura es el mecanismo de la CADENA: existe para que secciones
     consecutivas de una pagina de scroll empalmen sus orillas, y el sistema
     dice que una lamina aislada no lo lleva. Esta portada es una lamina: es la
     unica seccion con acorde de la pagina, porque el cuerpo se queda en papel.
     Pero el encuadre si es una decision, y --acorde-y es su palanca.
     POR QUE ESTE VALOR, medido y no elegido a ojo: con el arte centrado,
     Amanecer enseña su banda coral justo detras de las dos puertas, y ahi el
     boton primario -terracota- deja de distinguirse del fondo: 1.15 a 1440.
     Con la banda de arriba sube a 2.68. Ninguna vara de la casa lo caza,
     porque las dos miden TEXTO contra su fondo y esto es una superficie contra
     otra. En telefono da igual (1.13 en los dos): ahi manda el recorte
     horizontal, no la Y. */
  --acorde-y:0%;
  /* ⚠️ ESTE VELO NO ES PARA EL ARTE, Y ESA ES LA PARTE QUE IMPORTA.
     Contra el arte no hace falta ninguno: el calibrador de la casa, barrido
     desde cero en cuatro anchos, dice que Amanecer aquí necesita alfa 0 — lo
     que salva el texto chico es el vidrio del botón y el de las píldoras, no
     oscurecer el fondo.
     Hace falta para cuando el arte NO CARGA. Entonces queda a la vista
     --acorde-base, el color sólido de respaldo (#A56872), y el texto papel
     encima da 4.08 contra un piso de 4.5: reprueba. El velo es un degradado,
     así que se pinta igual aunque la imagen falle, y con él ese mismo texto da
     6.47. Comprobado bloqueando la petición del gradiente y midiendo píxeles:
     5.52 medido en pantalla, contra 15.67 con la imagen puesta.
     Por eso el número es chico: solo tiene que levantar el piso del respaldo,
     no domar el arte. */
  --velo-aurora:rgb(var(--vidrio-tinta)/.28);
}
.portada h1 em{font-style:normal;
  background:linear-gradient(96deg,var(--marca),var(--aurora-ambar) 55%,var(--aurora-rosa));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* ══════════ LA RED DEL TITULAR RECORTADO ══════════
   `background-clip:text` con `-webkit-text-fill-color:transparent` no falla
   pálido: en un navegador que no sabe recortar, la frase NO SE DIBUJA. Y la que
   se pierde es media portada: "y quédatelo." es la mitad del titular.
   La red ya estaba escrita para el wordmark en pagina.css; la lección se había
   aplicado en un archivo y no en el otro. El degradado NO se toca: es la paleta
   de la marca y se queda. Lo único que se agrega es el piso.
   Se pregunta por LAS DOS formas —con y sin prefijo— porque un navegador puede
   soportar una y no la otra, y basta con que falte la que este código usa. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .portada h1 em{background:none;-webkit-text-fill-color:currentColor;color:inherit}
}
/* ══════════ LAS DOS ENTRADAS ══════════
   La profundidad se elige antes de empezar, así que la portada deja de tener un
   botón y pasa a tener una decisión. Cada entrada carga su propio costo escrito:
   quien toma el rápido lo toma SABIENDO que existe uno más hondo, y quien toma
   el completo lo toma con el precio por delante.
   Rejilla y no fila: dos botones de dos renglones en un teléfono de 320 se
   parten feo con flex-wrap, y aquí el ancho tiene que ser el mismo para que la
   comparación sea justa. Una columna abajo de 760, dos arriba. */
.puertas{display:grid;grid-template-columns:1fr;gap:var(--e-3);margin:var(--e-8) 0 0;
  max-width:var(--ancho-lectura);align-items:stretch}
@media(min-width:760px){.puertas{grid-template-columns:1fr 1fr}}
/* El .btn de la casa es una píldora de una línea y centrada. Estas son fichas:
   se apilan, se alinean a la izquierda y crecen con su texto.
   ⚠️ VA COMO `.btn.puerta-modo` Y NO COMO `.puerta-modo` A SECAS. Las dos son
   una sola clase, o sea la misma especificidad, y `.btn` está declarado 50
   líneas MÁS ABAJO en esta hoja: en un empate gana el último, así que la regla
   suelta perdía cuatro propiedades sin avisar. Medido en el navegador: salía
   radio 999px en vez de 12, align center en vez de flex-start, relleno 0 24px
   en vez de 20 20 24, y alto mínimo 50 en vez de 0 — o sea DOS PÍLDORAS con el
   texto centrado, no las fichas que este comentario dice construir.
   Todos los demás modificadores de la hoja (.btn.pri, .btn.sec, .btn.txt) ya
   se escriben así; esta era la única suelta. */
.btn.puerta-modo{flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:var(--e-2);text-align:left;white-space:normal;
  padding:var(--e-5) var(--e-5) var(--e-6);border-radius:var(--radio-lg);min-height:0}
.btn.puerta-modo b{font-size:var(--txt-ui);font-weight:var(--peso-bold);line-height:1.2}
.btn.puerta-modo small{font-size:var(--txt-meta);font-weight:var(--peso-normal);line-height:1.45}
/* Marca el recomendado sin estrenar color: hereda el del botón y se separa por
   filo y por caja, que es como el sistema marca sus etiquetas. */
/* order:-1 la sube al principio de la ficha SIN moverla en el documento: en el
   DOM va después del título, para que quien lo oiga escuche primero qué botón es
   y luego que es el recomendado. Dentro de un botón —que es UN solo punto de
   tabulación— separar el orden visual del orden del documento no crea ninguna
   trampa de navegación. */
.recom{order:-1;font-size:var(--txt-meta);font-weight:var(--peso-semi);letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;line-height:1;padding:.35em .6em;border-radius:var(--radio-pill);
  border:1px solid currentColor;opacity:.9}
.dato{display:flex;flex-wrap:wrap;gap:var(--e-6);margin:var(--e-10) 0 0;padding:0;list-style:none}
.dato li{font-size:var(--txt-ui);color:var(--texto-terciario)}
.dato b{color:var(--texto-principal);font-weight:var(--peso-semi)}

/* ══════════ LA POLARIDAD DE LA PORTADA, QUE NO ES OPCIONAL ══════════
   Amanecer es acorde de NOCHE: `[data-acorde="amanecer"]` pide texto papel.
   Poner la clase .aurora voltea SOLO lo que hereda el color — el h1 y el <em>
   del degradado se arreglan solos. Todo lo de aquí abajo pedía su color por
   nombre (--texto-terciario, --texto-secundario, --texto-principal, --borde),
   que son tintas de papel, y se habría quedado en tinta oscura sobre arte
   oscuro. Sin esto, la pantalla de entrada del diagnóstico queda ilegible
   para todo el que llega.

   ⚠️ SE JERARQUIZA CON PESO Y TAMAÑO, NO ATENUANDO EL COLOR. La tentación es
   traducir "terciario" a un papel al 70%, pero el sistema lo prohíbe: apagar
   texto para jerarquizarlo es bajarle el contraste, y sobre un arte que cambia
   de banda con el ancho eso no se puede presupuestar. Los tres niveles de la
   portada ya se distinguen por cuerpo, peso y versalitas. */
.portada.aurora .epigrafe,
.portada.aurora .lede,
.portada.aurora .dato li,
.portada.aurora .dato b{color:inherit}
/* EL TEXTO CHICO SOBRE AURORA VA EN VIDRIO, y no es adorno: es la doctrina del
   sistema —"el texto chico sobre aurora va en un panel; los títulos sí van a
   pelo, son display y aguantan"— y aquí el calibrador puso el número. Estos
   cuatro renglones de 14px caen al pie de la portada, que es donde Amanecer
   abre su banda clara, y a 320/390 daban 2.46. Sin vidrio, la única forma de
   salvarlos era subirle el velo al acorde hasta .50: apagar el arte de toda la
   pantalla para rescatar la letra chica. Cada sujeto con su remedio.
   Píldora por renglón y no una barra para los cuatro: en un teléfono la fila se
   parte en dos, y una sola caja envolvente dejaría un hueco de vidrio colgando
   donde no hay texto. */
.portada.aurora .dato{gap:var(--e-3) var(--e-4)}
/* ⚠️ EL RADIO NO ES DECORACIÓN AQUÍ: ES LO QUE DISTINGUE UNA CAJA DE UN BOTÓN.
   La primera versión de estas píldoras usaba --radio-pill, y con eso quedaban
   con EL MISMO relleno, EL MISMO filo y EL MISMO radio que .btn.sec —el botón
   "Diagnóstico rápido" que vive dos renglones arriba— siendo texto inerte. Una
   caja que se viste de control promete algo que no cumple, y lo promete en el
   renglón donde alguien busca tranquilidad justo antes de empezar.
   Se van las DOS señales de control y se queda la que hace el trabajo: el
   relleno, que es lo que levanta el contraste. Sin filo y con radio suave, esto
   lee como texto resaltado sobre el arte, que es lo que es. */
.portada.aurora .dato li{
  background:rgb(var(--vidrio-tinta)/var(--vidrio-alfa));
  border-radius:var(--radio-sm);
  padding:.4em .75em;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
/* ⚠️ CAMBIAR EL FONDO DE UNA CAJA LE CAMBIA EL SUELO A TODO LO QUE VIVE
   ADENTRO. Estos enlaces heredaban el terracota de la casa, y sobre el vidrio
   oscuro que resolvió los cuatro renglones de arriba caían a entre 2.27 y 3.43
   contra un piso de 4.5. O sea que el remedio de un sujeto estrenó el defecto
   del vecino, medido en píxeles y arreglado aquí: ahora dan de 9.11 a 17.18.
   Van en papel, y lo que los identifica como enlace es el subrayado, no el
   color. El hover engrosa ese subrayado y NO mueve el color: virar a
   --acento-hover aquí sería ir hacia un contraste todavía más bajo. */
.portada.aurora .dato a{
  color:var(--texto-sobre-aurora);
  -webkit-text-fill-color:var(--texto-sobre-aurora);
  text-decoration:underline;text-underline-offset:3px;
}
.portada.aurora .dato a:hover,
.portada.aurora .dato a:active{
  color:var(--texto-sobre-aurora);
  -webkit-text-fill-color:var(--texto-sobre-aurora);
  text-decoration-thickness:2px;
}
/* El de contorno es el único que traía tinta por dentro Y por fuera. Sobre la
   noche el vidrio claro se abre y su texto se va a papel (regla 8): un cristal
   cerrado sobre negro da gris, y un botón gris parece deshabilitado.
   -webkit-text-fill-color va explícito porque .btn.sec lo declara, y sin
   repetirlo aquí el relleno del texto le gana al color. */
.portada.aurora .btn.sec{
  /* VIDRIO OSCURO, y el par lo decidió la aritmética, no el gusto. El primer
     intento fue un blanco al .10 y lo reprobó el calibrador: su texto de 12px
     era EL SUJETO MÁS APRETADO de la pantalla, y por él solo el acorde entero
     habría necesitado subir su velo a .55 — o sea apagar el arte que esta tanda
     acaba de estrenar, para salvar el renglón chico de un botón. El vidrio
     oscuro con texto papel es uno de los dos pares que el sistema declara
     seguros sobre cualquier fondo que el arte pueda producir, así que el botón
     se defiende solo y el acorde se queda como es. */
  background:rgb(var(--vidrio-tinta)/var(--vidrio-alfa));
  border-color:var(--vidrio-filo);
  color:var(--texto-sobre-aurora);
  -webkit-text-fill-color:var(--texto-sobre-aurora);
}
/* El texto se ve IGUAL con el ratón encima, que es regla de la casa: el reposo
   es el estado que está medido. Responden el relleno y el filo, y el movimiento
   ya se lo da .btn.sec:hover unas líneas más abajo. */
.portada.aurora .btn.sec:hover{
  background:rgb(var(--vidrio-tinta)/var(--vidrio-alfa-hover));
  border-color:var(--vidrio-filo-alto);
}
/* Y EL PRESIONADO NECESITA SU PROPIA REGLA AQUÍ, con las mismas cuatro clases.
   Sin ella, la respuesta al dedo de esta puerta se queda en un hundimiento de
   1px: la regla general de la hoja pesa tres clases y esta de contexto pesa
   cuatro, así que le gana el relleno y el filo AUNQUE el botón esté presionado
   —la cascada se resuelve por especificidad, no por si el selector menciona el
   pseudo-estado—. Es la puerta corta de la portada, o sea el primer control que
   toca quien va a contestar.
   Se cierra el vidrio al mismo escalón que el ratón, que es el patrón con que
   el sistema ya resolvió esto mismo en la marca del encabezado: en un teléfono
   no hubo hover antes, así que el salto que percibe el dedo va del reposo a
   este estado. */
.portada.aurora .btn.sec:active{
  background:rgb(var(--vidrio-tinta)/var(--vidrio-alfa-hover));
  border-color:var(--vidrio-filo-alto);
}
/* AQUÍ HABÍA UN ANILLO PROPIO PARA LA PORTADA, Y SE FUE A PROPÓSITO.
   Existía porque el anillo de sitio era de un solo color y sobre este arte se
   perdía: medido a 1440 daba entre 2.11 y 3.12 contra el mínimo de 3:1. Ahora el
   anillo de sitio ya es el par claro+oscuro, así que copiarlo aquí sería
   mantener el mismo valor en dos lados, que es como se separan. */

/* ── preguntas ── */
.pregunta{max-width:var(--ancho-lectura)}
/* ⚠️ EL ENCABEZADO DE LA PREGUNTA ES h1 POR JERARQUÍA, NO POR TAMAÑO.
   Subió de h2 a h1 porque el documento arrancaba sin h1. Sin esta regla
   hereda h1{} —el tamaño de PORTADA— y medido daba 64px peso 800 a 1440px, o
   sea EXACTAMENTE el mismo cuerpo que "Encuentra tu camino": las 29 preguntas
   con tipografía de portada. Aquí se repite lo que le daba h2{}, que es lo que
   dice la cabecera de esta hoja: los tipos de la pieza van más chicos a
   propósito, porque es una herramienta que se contesta. */
.pregunta h1{font-size:var(--diag-t1);line-height:1.1;letter-spacing:var(--track-titulo);
  font-weight:var(--peso-bold)}
.ayuda{font-size:var(--txt-ui);color:var(--texto-terciario);margin:0 0 var(--e-6);max-width:54ch}
.ops{display:grid;gap:var(--e-3);margin:0 0 var(--e-8)}
@media(min-width:640px){.ops.dos{grid-template-columns:1fr 1fr}}
.op{appearance:none;text-align:left;width:100%;min-height:var(--tap-min);background:var(--superficie);
  border:1px solid var(--borde);border-radius:var(--radio-lg);padding:var(--e-4) var(--e-5);cursor:pointer;
  font:inherit;color:var(--texto-principal);display:flex;align-items:center;gap:var(--e-4);
  transition:border-color var(--dur-rapida),background var(--dur-rapida),transform var(--dur-rapida),box-shadow var(--dur-rapida);
  /* ⚠️ `backwards` Y NO `both`, Y LA DIFERENCIA NO ES COSMÉTICA. `both` retiene
     el último fotograma mientras el elemento viva, y los estilos de una
     animación pesan MÁS en la cascada que las declaraciones normales: con la
     retención puesta, el `transform:none` del fotograma final le gana a
     cualquier `transform` de `:hover` y de `:active`.
     Lo que sí hace falta es `backwards`: durante el retraso escalonado de abajo
     la opción tiene que estar en el fotograma inicial, o parpadearía visible
     antes de entrar. Y soltar la retención final no cambia un píxel, porque ese
     fotograma —`opacity:1; transform:none`— es idéntico al reposo natural. */
  animation:sube var(--dur-media) var(--ease-salida) backwards;animation-delay:calc(var(--i,0)*28ms)}
.op:hover{border-color:var(--marca);transform:translateX(4px);box-shadow:0 4px 14px -6px rgb(var(--sombra-color)/.18)}
/* LA SEÑAL AL TOCAR. En un teléfono no hay hover: lo único que una persona
   percibe con el dedo puesto es :active, así que la opción responde con el
   gesto que el sistema usa en todo el sitio —hundirse 1px— más el filo de
   marca que el ratón también le da.
   ⚠️ El transform se escribe COMPLETO —con su translateX— porque transform no
   se acumula: una segunda declaración REEMPLAZA a la del hover en vez de
   sumarse, y sin repetirlo la opción daría un salto lateral al presionarse.
   Y no declara box-shadow, para no disputarle esa propiedad al anillo de foco,
   que es quien tiene que ganar mientras alguien navega con el teclado. */
.op:active{transform:translateX(4px) translateY(1px);border-color:var(--marca)}
/* La opción NO apaga el outline ni pone anillo propio: recibe el de sitio.
   Antes hacía las dos cosas —`outline:none` más una sombra de marca al 38%— y
   eso deja a la opción SIN anillo de contorno en la única pantalla donde se
   contesta el cuestionario. Una sombra tenue del mismo color de la marca no es
   un indicador de foco: es el color de la marca otra vez.
   Lo único que sí repite es el HALO, y por especificidad: `.op:hover` declara
   box-shadow y pesa más que el anillo de sitio, así que con el puntero encima
   —cosa normal, la lista aparece donde estaba el ratón— el halo desaparecía y
   quedaba el filo blanco solo sobre papel claro. Va después del hover a
   propósito: pesan igual y decide el orden. */
.op:focus-visible{box-shadow:0 0 0 5px var(--foco-halo)}
.op.on{border-color:var(--marca);background:var(--marca-tenue)}
.op .caja{flex:none;width:20px;height:20px;border:1.5px solid var(--borde);border-radius:var(--radio-sm);
  display:grid;place-items:center;font-size:var(--txt-piso);color:var(--texto-sobre-marca);transition:all var(--dur-rapida)}
.op.rd .caja{border-radius:var(--radio-pill)}
.op.on .caja{background:var(--marca);border-color:var(--marca)}
.op .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.op .txt b{font-weight:var(--peso-semi)}
.op .txt small{color:var(--texto-terciario);font-size:var(--txt-meta);line-height:1.4}

.acciones{display:flex;flex-wrap:wrap;gap:var(--e-3);align-items:center}
.btn{appearance:none;font:inherit;font-weight:var(--peso-semi);cursor:pointer;min-height:50px;padding:0 var(--e-6);
  border-radius:var(--radio-pill);border:1px solid transparent;display:inline-flex;align-items:center;gap:var(--e-2);
  transition:background var(--dur-rapida),border-color var(--dur-rapida),transform var(--dur-rapida),opacity var(--dur-rapida)}
/* -webkit-text-fill-color manda sobre color: se declara SIEMPRE, que es lo que
   dejó el botón primario sin texto el 1-ago. */
.btn.pri{background:var(--marca);color:var(--texto-sobre-marca);-webkit-text-fill-color:var(--texto-sobre-marca)}
/* EL HOVER NO LE CAMBIA EL COLOR AL TEXTO. NUNCA. (decisión del dueño,
   2026-08-07 — extiende una anterior, que ya había decidido "movimiento, no
   viraje" y dejaba sin definir cuál movimiento.)
   ⚠️ EN MATERIAL PÚBLICO LAS DECISIONES SE FIRMAN "el dueño", NUNCA CON UN
   NOMBRE PROPIO, y este archivo se sirve tal cual —sin minificar— así que un
   comentario es material público como cualquier otro texto de la página.
   Aquí estaba el único lugar del sitio que sí lo hacía: .btn.sec:hover pintaba
   el texto con --marca, o sea terracota sobre papel, y encima subía el filo al
   mismo tono. En pantallas con poco contraste ese viraje se lee peor que el
   estado de reposo — y el reposo es el que está medido.
   El movimiento son 2px hacia arriba: el mismo gesto que ya usan las tarjetas
   interactivas del mapa, así que el sitio no estrena vocabulario. Va en
   transform, que no obliga al navegador a recalcular el plano.
   Lo que la regla NO prohíbe es que responda el FONDO: .btn.pri:hover pasa de
   --marca a --marca-hover, y los dos son pares medidos con su mismo texto. La
   regla es sobre el color del TEXTO, que no se mueve. */
.btn.pri:hover{background:var(--marca-hover);transform:translateY(-2px)}
/* El mismo par que ya usa el sistema para el estado presionado:
   --marca-press es el tercer escalón de la rampa (marca -> hover -> press) y
   existe desde que se definió el color. El translateY(1px) CANCELA el -2px del
   hover, así que con ratón el recorrido son 3px de hundimiento y con el dedo
   —donde no hubo hover— es 1px más el fondo, que es la señal fuerte.
   La regla del hover vale igual aquí: el texto NO se mueve de color. */
.btn.pri:active{background:var(--marca-press);transform:translateY(1px)}
.btn.sec{background:transparent;border-color:var(--borde-fuerte);color:var(--texto-secundario);-webkit-text-fill-color:var(--texto-secundario)}
/* El filo del secundario va en --borde-fuerte por WCAG 1.4.11, como
   .pol-btn--secundario del sistema de diseño: sin relleno, ese filo es lo único
   que dibuja la caja, y en --borde daba 1.39 sobre la tarjeta y 1.29 sobre el
   lienzo —«Sí, así es» se leía como texto suelto—. Ahora 4.15 y 3.85 (P-28,
   2026-09-23; lo mide botones.test.js).
   Con el ratón encima el filo se marca con un neutro más fuerte, no con el color
   de marca: da la señal de "esto se puede tocar" sin meter un tono nuevo. Es el
   mismo recurso que .pol-ctrl:hover del sistema de diseño. */
.btn.sec:hover{border-color:var(--texto-terciario);transform:translateY(-2px)}
/* El secundario no tiene relleno, así que su señal al tacto es
   ESTRENAR uno: --marca-tenue, el mismo tono suave con que la hoja pinta la
   opción ya elegida y el primer paso de la escalera. El filo acompaña con el
   neutro fuerte del hover, y el texto se queda donde está. */
.btn.sec:active{background:var(--marca-tenue);border-color:var(--texto-terciario);transform:translateY(1px)}
.btn[disabled]{opacity:.38;cursor:not-allowed;transform:none}
/* EL APAGADO SE VE APAGADO PERO ESTÁ VIVO. Recibe el clic y contesta qué
   falta, así que no lleva pointer-events:none ni cursor:not-allowed: los dos
   mienten sobre lo que pasa al tocarlo.
   Y por eso mismo NO puede usar la opacidad de .btn[disabled]: WCAG 1.4.3 exime
   del contraste a los componentes INACTIVOS, y uno que responde al clic no lo
   es. Toma la piel del secundario, que ya está medida y pasa. */
/* El filo va en --borde-fuerte y no en --borde: WCAG 1.4.11 le pide 3:1 al
   contorno de un control, y --borde sobre papel da 1.29 — medido. Ese filo es
   lo ÚNICO que dibuja la caja de este botón (no tiene relleno), así que si no
   se ve, el botón deja de parecer un botón justo cuando más falta hace que lo
   parezca: cuando todavía no se puede usar pero sí contesta. */
.btn.pri.apagado{background:transparent;border-color:var(--borde-fuerte);
  color:var(--texto-secundario);-webkit-text-fill-color:var(--texto-secundario)}
/* Sólo el filo cambia. El texto se queda igual —regla del hover— y el
   translateY lo hereda de .btn.pri:hover, que es el movimiento de la casa. */
.btn.pri.apagado:hover{background:transparent;border-color:var(--texto-terciario)}
/* REGLA PROPIA, y no es duplicación: sin ella heredaría el terracota
   sólido de .btn.pri:active, que es exactamente el relleno que este botón evita
   —se ve apagado a propósito porque todavía no se puede avanzar—. Y necesita
   señal MÁS que ninguno: es el botón que la gente presiona sin saber que le
   falta contestar, y su respuesta al tacto es lo que acompaña al renglón que le
   dice qué falta.
   ⚠️ SU RELLENO ES EL NEUTRO HUNDIDO, NO EL TENUE DE MARCA. El tono de marca
   suave es el que esta misma hoja usa para decir "esta es tu respuesta" y para
   el primer peldaño de la escalera: encenderlo aquí prometería que algo se
   logró justo en el momento en que el mensaje es que falta contestar. El
   neutro dice lo que tiene que decir —te oí, y sigues aquí— sin prometer
   nada. */
.btn.pri.apagado:active{background:var(--superficie-hundida);border-color:var(--texto-terciario);transform:translateY(1px)}
/* ⭐ Y LA VARIANTE SECUNDARIA, que nació con R7: "Ver horarios" es .btn.sec y
   está apagado hasta que la persona deja su correo. Misma doctrina que el
   primario —se ve apagado, se anuncia con aria-disabled, y AL TOCARLO CONTESTA
   qué falta—: nada muerto al tacto. Lleva el mismo filo que el encendido
   (4.15 sobre la tarjeta) pero PUNTEADO, y el texto baja a --texto-terciario:
   se distingue por algo que no es color, y nunca tiene más texto ni más filo
   que el encendido. Al pasar el ratón el filo sube a --texto-terciario y sigue
   punteado. El relleno ya era transparente (P-28, 2026-09-23). */
.btn.sec.apagado{border-style:dashed;border-color:var(--borde-fuerte);color:var(--texto-terciario);
  -webkit-text-fill-color:var(--texto-terciario)}
.btn.sec.apagado:hover{border-color:var(--texto-terciario)}
.btn.sec.apagado:active{background:var(--superficie-hundida);border-color:var(--texto-terciario);transform:translateY(1px)}
/* El renglón que dice qué falta. Nace vacío y sin alto: cuando no hay nada que
   decir no empuja el diseño ni un píxel. */
.pista{margin:var(--e-3) 0 0;color:var(--texto-secundario);font-size:var(--txt-ui);
  max-width:var(--ancho-lectura);min-height:0}
.pista:empty{display:none}
/* "Atrás" es el control de regreso del cuestionario y se usa en el teléfono,
   así que va al piso de toque de la casa. Medía 64×25px porque este modificador
   anulaba con `min-height:auto` los 50px que .btn ya traía. Sigue viéndose como
   un renglón subrayado —no se convierte en botón, que sería rediseño— pero su
   caja ya se puede tocar cómodo. */
.btn.txt{background:none;border:0;color:var(--texto-terciario);-webkit-text-fill-color:var(--texto-terciario);padding:0 var(--e-3);
  text-decoration:underline;text-underline-offset:3px;min-height:var(--tap-piso)}
/* No tiene caja ni filo, así que su única señal posible es estrenar
   fondo. Cae dentro del radio de píldora que ya hereda de .btn, y por eso la
   caja que aparece al presionar tiene la forma de la zona que de verdad se
   puede tocar: la señal enseña además DÓNDE estaba el blanco.
   Oscurecerle el texto sería lo obvio y está prohibido: es la regla del reposo
   medido, y rige :active igual que el hover. */
.btn.txt:active{background:var(--marca-tenue)}

/* ══════════ EL CIELO ══════════ */
.confirma{border-left:3px solid var(--marca);padding:var(--e-1) 0 var(--e-1) var(--e-6);margin:0 0 var(--e-10);max-width:var(--ancho-lectura)}
.confirma p{margin:0 0 var(--e-2)}
.confirma .eco{font-size:var(--diag-t2);font-weight:var(--peso-bold);letter-spacing:var(--track-titulo);line-height:1.25}

/* ── el veredicto: la frase que carga toda la pieza ── */
.veredicto{position:relative;margin:0 0 var(--e-10);padding:var(--e-10) 0 var(--e-8);max-width:var(--ancho-lectura)}
.veredicto::before{content:"";position:absolute;left:-8%;right:20%;top:0;height:190px;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 70% at 24% 46%,color-mix(in oklab,var(--aurora-ambar) 24%,transparent),transparent 72%),
             radial-gradient(38% 62% at 62% 30%,color-mix(in oklab,var(--aurora-rosa) 18%,transparent),transparent 70%);
  filter:blur(26px)}
.veredicto .ep{font-size:var(--txt-meta);letter-spacing:var(--track-etiqueta);text-transform:uppercase;
  color:var(--texto-terciario);font-weight:var(--peso-semi);margin:0 0 var(--e-3)}
/* ⚠️ Estos tres subieron de h2 a h1 y de h3/h4 a h2 porque el documento
   arrancaba sin h1 y saltaba niveles—, y el tamaño de un encabezado aquí lo fija
   la ETIQUETA. Así que cada uno repite a mano lo que le daba su etiqueta vieja:
   peso, interlínea y espaciado de letra, no sólo el font-size. Sin esto, subir
   de nivel es un cambio de diseño disfrazado de arreglo de accesibilidad. */
.veredicto h1{font-size:var(--txt-titulo-1);line-height:1.04;margin:0 0 var(--e-5);
  letter-spacing:var(--track-titulo);font-weight:var(--peso-bold)}
.veredicto h1 em{font-style:normal}
.veredicto .raz{font-size:var(--txt-cuerpo-lg);color:var(--texto-secundario);margin:0;max-width:52ch}
.veredicto .giro{margin:var(--e-5) 0 0;padding:var(--e-5);border-radius:var(--radio-lg);
  background:var(--aviso-tenue);border:1px solid var(--aviso-borde);font-size:var(--txt-ui);max-width:54ch}
.veredicto .qui{margin:var(--e-4) 0 0;font-size:var(--txt-meta);color:var(--texto-terciario);font-style:italic}
.veredicto.ok h1{color:var(--exito)}

.cielo{position:relative;border-radius:var(--radio-3xl);overflow:hidden;margin:0 0 var(--e-10);
  background:radial-gradient(120% 90% at 50% 12%,var(--cielo-2),var(--cielo-1) 46%,var(--cielo-3));
  box-shadow:0 30px 80px -40px rgb(0 0 0/.6),inset 0 1px 0 rgb(255 255 255/.05)}
.cielo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 65% at 50% 45%,transparent 42%,rgb(0 0 0/.42));}
.cielo svg{display:block;width:100%;height:auto;position:relative;z-index:1}

.nebulosa{mix-blend-mode:screen}
.polvo{opacity:.9}
.estrellita{animation:centella var(--dur,4s) ease-in-out infinite;animation-delay:var(--del,0s)}
@keyframes centella{0%,100%{opacity:var(--o,.5)}50%{opacity:calc(var(--o,.5)*.28)}}

.trazo{fill:none;stroke-linecap:round;
  stroke-dasharray:var(--largo,600);stroke-dashoffset:var(--largo,600);
  animation:traza 1100ms var(--ease-salida) forwards;animation-delay:var(--del,0ms)}
@keyframes traza{to{stroke-dashoffset:0}}

/* EL GRUPO QUE POSICIONA NO SE ANIMA, Y EL QUE SE ANIMA NO POSICIONA.
   En SVG el atributo transform="translate(x y)" y la propiedad CSS transform
   son LA MISMA propiedad: cualquier keyframe con transform —aunque sea
   scale(1)— REEMPLAZA el translate y manda la estrella al origen. Se veía
   como un cielo vacío con los rótulos apilados en la esquina, y las líneas
   bien puestas, porque esas usan x1/y1 y el CSS no las toca.
   De ahí que vayan anidados: fuera el translate, dentro la escala. */
.pos{pointer-events:none}
.pos>.astro{pointer-events:auto}
.astro{cursor:pointer;transform-box:fill-box;transform-origin:center;
  animation:nace 620ms var(--ease-salida) both;animation-delay:var(--del,0ms)}
@keyframes nace{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
.astro .aura{animation:respira 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes respira{0%,100%{opacity:.34;transform:scale(1)}50%{opacity:.62;transform:scale(1.16)}}
.astro .orbita{transform-box:fill-box;transform-origin:center;animation:gira 14s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.astro .nucleo{transition:r var(--dur-media) var(--ease-salida)}
/* El tercer estado entra en la MISMA regla y con un escalón más: reposo, ratón
   encima, y dedo puesto. En un teléfono los dos primeros no existen, así que
   sin :active la estrella no contestaba nada hasta que abría su ficha — y esta
   es la pantalla que uno recorre después de contestar todo.
   Crece el núcleo en vez de hundirse el grupo, porque el grupo entra con una
   animación que retiene su último fotograma y le ganaría al transform; el
   núcleo no tiene animación propia, así que su radio sí está libre. Es además
   el mismo recurso que ya usaba el ratón: un escalón más de lo mismo, no un
   gesto nuevo. */
.astro:hover .nucleo,.astro:focus-visible .nucleo{r:calc(var(--rn,8px) + 3px)}
.astro:active .nucleo{r:calc(var(--rn,8px) + 6px)}
/* La estrella tampoco apaga el outline: recibe el anillo de sitio como todo lo
   demás. Antes lo apagaba y lo sustituía por el trazo de abajo, que es de UN
   color sobre un cielo que va de casi negro a los tonos del arte — o sea el
   mismo problema que el anillo naranja, y encima son QUINCE estrellas: la
   pantalla con más piezas enfocables del sitio se recorría a ciegas. El trazo se
   queda como refuerzo, no como sustituto.
   ⚠️ AQUÍ LLEGA MEDIO ANILLO, Y NO ES DESCUIDO: box-shadow no se pinta sobre
   elementos de SVG, así que el halo oscuro no existe en la estrella aunque el
   estilo computado lo declare. Se comprobó apagándolo y contando píxeles: en un
   enlace de HTML cambian 1048, aquí 17. Lo que sí se pinta es el outline, y su
   contraste está medido en esta superficie: de 10.77 a 20.04 contra el cielo en
   las quince, con piso 3. Por eso no se cambia nada del dibujo. */
.astro:focus-visible .foco{stroke:var(--cielo-txt);stroke-width:1.5;opacity:.9}
.astro text{font-family:var(--fuente-nucleo);text-anchor:middle;paint-order:stroke;
  stroke:rgb(10 8 14/.85);stroke-width:4px;stroke-linejoin:round}
.astro .nom{font-size:var(--txt-ui);font-weight:var(--peso-bold);fill:var(--cielo-txt);letter-spacing:-.01em}
/* El rótulo de estado va al piso de tamaño del sistema (--txt-piso,
   12px), y ahí se queda. Esto es SVG: el texto no se reacomoda solo, así que
   cada punto de tamaño se paga en el margen que separa un rótulo de su vecino,
   y a 12px ese margen ya baja a 1.7px. Ahí termina el presupuesto: subirlo más
   no cabe. */
.astro .est{font-size:var(--txt-piso);font-weight:var(--peso-semi)}
.astro.off .nom{fill:var(--cielo-txt-2)}

.rotulo-cielo{position:absolute;z-index:2;left:var(--e-6);top:var(--e-6);pointer-events:none}
.rotulo-cielo b{display:block;font-size:var(--txt-meta);letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;color:var(--cielo-txt-2);font-weight:var(--peso-semi)}
.leyenda{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:var(--e-5);padding:0 var(--e-6) var(--e-6)}
.leyenda div{display:flex;align-items:center;gap:var(--e-2);font-size:var(--txt-meta);color:var(--cielo-txt-2)}
.leyenda i{width:10px;height:10px;border-radius:var(--radio-pill);flex:none}

/* En el teléfono el cielo va SIN rótulos: dieciséis nombres a 340px no se leen,
   se amontonan. Los nombres viven en la lista de abajo, que sí respira. */
.cielo.compacto .astro text{display:none}
.cielo.compacto .astro.toca text{display:block}

.ficha{position:absolute;z-index:3;right:var(--e-6);bottom:var(--e-6);max-width:290px;
  background:color-mix(in srgb,var(--cielo-1) 92%,transparent);backdrop-filter:blur(12px);border:1px solid rgb(255 255 255/.14);
  border-radius:var(--radio-xl);padding:var(--e-5);color:var(--cielo-txt);
  animation:sube var(--dur-media) var(--ease-salida) both}
/* Sólo se pisan las tres que .ficha h4 pisaba. La interlínea, el tracking y el
   balance se DEJAN caer a h2{}, porque _ds/tokens/base.css agrupa h1..h4 con
   los mismos valores: el h4 viejo ya recibía 1.1 y -0.02em de ahí. Fijarlos en
   "normal" —que fue el primer intento— los reseteaba al defecto del navegador
   y le quitaba a los 16 nombres del mapa el tracking del sistema. */
.ficha h2{margin:0 0 var(--e-1);font-size:var(--txt-ui);font-weight:var(--peso-bold)}
/* El rótulo de capa sube de 10px al piso del sistema. Esto sí es copy de
   usuario -el nombre de la capa a la que pertenece la pieza- y el sistema dice
   que por debajo de 12px no se renderiza copy. La ficha es HTML, no SVG: aquí
   el texto sí se reacomoda, y la caja tiene max-width:290px con lugar de sobra. */
.ficha .capa{font-size:var(--txt-piso);letter-spacing:var(--track-etiqueta);text-transform:uppercase;
  color:var(--cielo-txt-2);margin:0 0 var(--e-3);font-weight:var(--peso-semi)}
.ficha p{margin:0;font-size:var(--txt-meta);line-height:1.5;color:var(--cielo-txt-3)}
.ficha .cierra{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--cielo-txt-2);
  cursor:pointer;font-size:16px;line-height:1;padding:4px;border-radius:var(--radio-pill)}
/* No tenía ningún estado: ni con el ratón encima ni con el dedo puesto. Es el
   control que cierra la ficha de una pieza, y en el teléfono lo único que se
   percibe es este. Un velo claro sobre el vidrio de la ficha, del mismo
   material que el resto de la pieza, y el radio para que la señal tenga la
   forma de la zona que se toca. El color del texto no se mueve. */
.ficha .cierra:hover{background:rgb(255 255 255/.10)}
.ficha .cierra:active{background:rgb(255 255 255/.18)}
@media(max-width:720px){.ficha{position:static;max-width:none;margin:0 var(--e-4) var(--e-4);border-radius:var(--radio-lg)}}

/* ── pasos ── */
.pasos{display:grid;gap:var(--e-5);margin:0 0 var(--e-12)}
@media(min-width:900px){.pasos{grid-template-columns:repeat(3,1fr);align-items:start}}
.paso{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-xl);padding:var(--e-6);position:relative}
.paso.p1{border-color:var(--marca-borde);background:var(--marca-tenue)}
.paso .num{font-size:var(--txt-meta);letter-spacing:var(--track-etiqueta);text-transform:uppercase;
  color:var(--texto-terciario);font-weight:var(--peso-bold);margin:0 0 var(--e-1)}
.paso .cuando{font-size:var(--txt-meta);color:var(--texto-terciario);margin:0 0 var(--e-5)}
.paso ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-4)}
.paso li{display:flex;gap:var(--e-3)}
.paso li .pt{flex:none;width:9px;height:9px;border-radius:var(--radio-pill);margin-top:7px;
  box-shadow:0 0 10px 1px currentColor}
.paso li b{display:block;font-weight:var(--peso-semi)}
.paso li small{display:block;color:var(--texto-secundario);font-size:var(--txt-meta);line-height:1.45}
.paso li .porque{display:block;color:var(--aviso);font-size:var(--txt-meta);line-height:1.45;margin-top:5px}
.paso li .quien{display:block;color:var(--texto-terciario);font-size:var(--txt-meta);margin-top:4px;font-style:italic}
.vacio{color:var(--texto-terciario);font-size:var(--txt-ui);margin:0}

.tiene{background:var(--exito-tenue);border:1px solid var(--exito-borde);border-radius:var(--radio-xl);
  padding:var(--e-6);margin:0 0 var(--e-10)}
.tiene h2{color:var(--exito);margin-bottom:var(--e-3);font-size:var(--diag-t2);line-height:1.2}
.chips{display:flex;flex-wrap:wrap;gap:var(--e-2);margin:0;padding:0;list-style:none}
.chips li{font-size:var(--txt-meta);border:1px solid var(--exito-borde);border-radius:var(--radio-pill);padding:5px var(--e-3)}

.nota{background:var(--aviso-tenue);border:1px solid var(--aviso-borde);border-radius:var(--radio-lg);
  padding:var(--e-5) var(--e-6);margin:0 0 var(--e-10);font-size:var(--txt-ui);max-width:var(--ancho-lectura)}

.escalera{border:1px solid var(--marca-borde);background:var(--marca-tenue);border-radius:var(--radio-xl);
  padding:var(--e-8);margin:0 0 var(--e-12);max-width:var(--ancho-lectura)}
.salida{border-top:1px solid var(--borde);padding-top:var(--e-10)}
.cols{display:grid;gap:var(--e-5)}
@media(min-width:820px){.cols{grid-template-columns:1fr 1fr}}
.tarj{background:var(--superficie);border:1px solid var(--borde);border-radius:var(--radio-xl);padding:var(--e-6)}
.tarj p{color:var(--texto-secundario);font-size:var(--txt-ui);margin:0 0 var(--e-5)}
.campo{display:flex;gap:var(--e-2);flex-wrap:wrap}
.campo input{flex:1;min-width:190px;min-height:50px;padding:0 var(--e-4);font:inherit;font-size:16px;
  background:var(--superficie-alterna);border:1px solid var(--borde);border-radius:var(--radio-lg);color:var(--texto-principal)}
/* El ÚNICO campo escribible del sitio. Ya no apaga el outline —recibe el anillo
   de sitio— y el filo de marca se queda como refuerzo.
   ⚠️ Va con :focus-visible SIN perder señal para el ratón ni para el dedo, y eso
   está medido con clic y con toque: en un campo de ESCRITURA el navegador hace
   coincidir :focus-visible siempre, venga el foco de donde venga, porque quien
   va a escribir necesita ver dónde quedó el cursor. Ojo con generalizarlo: en un
   control que NO es de texto, cambiar :focus por :focus-visible sí deja al ratón
   sin señal. */
.campo input:focus-visible{border-color:var(--marca)}
.priv{font-size:var(--txt-meta);color:var(--texto-terciario);margin:var(--e-3) 0 0}
.atinamos{margin:var(--e-10) 0 0;padding:var(--e-6);border:1px dashed var(--borde);border-radius:var(--radio-xl);max-width:var(--ancho-lectura)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--superficie-alterna);padding:2px 5px;border-radius:var(--radio-sm)}

@media(prefers-reduced-motion:reduce){
  /* ⚠ EL RETRASO TAMBIÉN SE APAGA, Y ES LA MITAD QUE IMPORTA.
     Las piezas del resultado y las opciones de cada pregunta entran
     escalonadas: cada una lleva su propio animation-delay por índice, y el
     primer fotograma de esas animaciones es opacity:0. Apagar sólo la DURACIÓN
     deja el retraso corriendo intacto, así que quien pidió que nada se mueva se
     queda mirando una pantalla vacía hasta que le llega el turno a la última
     pieza — más de un segundo y medio en el cielo del resultado, que es la
     pantalla que se gana contestando el cuestionario entero.
     Se apaga la animación COMPLETA, que es como lo hace el sistema de
     movimiento para sus propias entradas escalonadas. */
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .trazo{stroke-dashoffset:0!important}
}
/* ── LAS DOS SALIDAS VIVAS ─────────────────────────────────────────────
   La casilla de consentimiento va DEBAJO del control que dispara, no encima:
   quien lee de arriba abajo ya sabe qué va a pasar cuando llega a ella. */
/* min-height NO ES ADORNO: el alto de la etiqueta salia de cuantas lineas hacia
   el texto, y entre 710 y 819px de ancho -un iPad en vertical, que es tactil-
   caia a UNA linea y la zona tocable quedaba en 24px contra un minimo de 44.
   Medido barriendo de 320 a 1920, no en un solo tamano: en 1440 daba 34.8 y el
   peor caso no aparecia.
   Y el tamano subio de --txt-meta a --txt-ui: 12px es el escalon de los
   metadatos, y esto no es un metadato, es el texto con el que alguien entrega
   sus datos. */
.consiente{display:flex;gap:var(--e-3);align-items:center;min-height:44px;margin:var(--e-4) 0 0;
  font-size:var(--txt-ui);line-height:1.45;color:var(--texto-secundario);cursor:pointer}
/* 24px y no el tamaño del sistema: una casilla de 13px en un teléfono se falla
   más de lo que se acierta, y esta es la que decide si se captura o no. */
.consiente input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--marca);cursor:pointer}
.consiente a{color:inherit;text-underline-offset:2px}
.tarj .priv{margin:var(--e-3) 0 0}
.consiente:focus-within{outline:2px solid var(--marca);outline-offset:4px;border-radius:var(--radio-sm)}

/* ⭐ EL MARCO DE LA AGENDA LLEVA ALTURA FIJA, y desde R7 por otra razón.
   Hasta el 2026-09 el recuadro era de un tercero y su <script> de ajuste
   obligaba a abrirle script-src, o sea a entregarle el JavaScript completo de
   esta página. Ahora adentro va POLARA Clientes, que es nuestro — pero sigue
   siendo otro documento, y un <iframe> no crece con su contenido. Hacerlo
   crecer pedía postMessage, que se evaluó y se difirió con razón escrita
   (decisión 7 del spec de R7). El arreglo de verdad vive del lado de Clientes:
   al escoger un horario, esa página lleva el formulario a la vista. Aquí la
   altura solo tiene que alcanzar para la lista de días. */
#marco-agenda:empty{display:none}
.agenda{width:100%;height:760px;border:1px solid var(--borde);border-radius:var(--radio-lg);
  margin-top:var(--e-5);background:#fff;display:block}
/* ⭐ A SANGRE EN PANTALLA ANGOSTA, Y SE CONSERVA — no por herencia: carga peso
   propio (decisión 8 del spec de R7). Se midió en 320px que la tarjeta solo le
   dejaba 223px al marco; saliéndose de su acolchado recupera 48px. La razón
   original era que el calendario del tercero se cortaba y no podíamos mover su
   punto de quiebre. Hoy el inquilino es nuestro y sí podríamos — pero 48px de
   ancho en un teléfono de 320 son el 15% de la pantalla, y ese ancho es el que
   decide si los horarios caben en una fila o se apilan de a uno. Se queda. */
/* 720 y no 640. El número venía de que el selector de huso horario del widget
   de antes quedaba FUERA del marco en cualquier teléfono, sin ninguna pista de
   que hubiera algo más abajo. El inquilino cambió, así que el número se volvió
   a medir contra la página de Clientes (ver la nota de arriba del bloque). */
@media(max-width:600px){
  .agenda{height:720px;width:calc(100% + var(--e-6) * 2);margin-inline:calc(var(--e-6) * -1);
    border-radius:var(--radio-md)}
}

@media print{.top,.pie,.salida,.atinamos,.escalera,body{background:#fff}.paso{break-inside:avoid}}