/* El calificador, y la caja que lo envuelve.

   Aquí vivieron también la franja de cinco cifras bajo el hero, el «para quién
   sí y para quién no» y la rejilla de dominios. Eran del home anterior a la
   fusión y ninguna de las 88 páginas los escribe ya.

   Espaciado: padding, margin y gap bajan a la escala de tokens.css cuando el literal
   cae a 2px o menos de un escalón. Los que sobreviven (20px, 28px, 36px) están a 4px
   o más del escalón vecino, y los empates (10px, 14px) caen justo en medio de dos:
   moverlos sería rediseñar, no normalizar, así que se quedan como estaban. */

/* ---------- LA CAJA ----------
   Genérica de nombre y única de uso: hoy sólo la escribe la sección del
   calificador, <section class="blk blk--line qualifier-section">. */
.blk{padding:var(--s10) 0;position:relative}
.blk--line{border-top:1px solid var(--hairline)}


/* ---------- CALIFICADOR ----------
   REJILLA PARTIDA, Y EL FORMULARIO DENTRO DE UNA TARJETA. Es la forma que esta
   sección tuvo antes del ancho completo, y vuelve por lo que el ancho completo
   costaba: cinco desplegables apilados de lado a lado del `.wrap`, sobre el
   mismo lienzo que la prosa que tienen encima, no se leen como un formulario.
   A 1252px de ancho una fila de 17px con una flecha en el extremo derecho lee
   como el renglón de una tabla, y el bloque entero como una lista de cinco.
   Nada dice dónde empieza y dónde acaba lo que hay que rellenar.

   El argumento con el que se retiró la tarjeta era de CONTRASTE —que
   --surface-4 (#e8f2f8) sobre --surface (#f4f7fa) separa el campo del lienzo
   tanto como lo separaría una tarjeta— y era cierto y no venía al caso. La
   tarjeta no está aquí para que se vea el campo: está para DELIMITAR EL
   FORMULARIO, que es una pieza con principio, final y una acción al fondo. Eso
   no lo resuelve el relleno de un campo suelto, lo resuelve el marco.

   La prosa a la izquierda, la consulta a la derecha. El titular recupera su
   escala de sección (46px de base.css) porque ya no vive encima de los campos:
   lo que lo obligaba a bajar a 38px era compartir columna con ellos.

   DOS FILAS Y NO UNA, y la tarjeta las cruza. Con una sola fila los tres hijos
   —cabecera, formulario y línea de trato— se colocan solos en (1,1), (1,2) y
   (2,1), y la fila 1 mide lo que mide la tarjeta: la línea de trato caía 400px
   por debajo de la bajada a la que pertenece, sola en mitad del blanco. Con
   `auto 1fr` y la tarjeta abarcando las dos filas, la línea vuelve a colgar de
   su párrafo y el sobrante queda donde no molesta, debajo de ella.

   LA PARTICIÓN SE DESHACE A 1180px, Y EL NÚMERO ESTÁ MEDIDO, NO ELEGIDO. La
   columna de la tarjeta es .8fr, y la respuesta más larga del formulario
   —«Alturas y espacios confinados», 233px a 17px— necesita 375px de tarjeta
   para caber entera: 233 de texto, 24 y 52 de relleno del campo, 64 de relleno
   de la tarjeta y 2 de filete. Eso pide unos 1070px de ventana. Debajo de ahí
   la partición corta la respuesta que el visitante acaba de elegir, que es el
   único fallo que este campo no puede permitirse. A 1181 la tarjeta mide 420 y
   al campo le sobran 44px sobre el peor caso de los dos idiomas; era donde
   había que poner el corte, con holgura y no al filo.
   Y al deshacerse, la tarjeta NO se va a todo el ancho: se queda en 520px. Sin
   ese tope, de 520 a 1180 volvía el bloque de lado a lado que esta sección
   acaba de dejar atrás, sólo que en una ventana más estrecha. */
.consult{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:auto 1fr;
  column-gap:var(--s7);align-items:start}
.consult .qual{grid-column:2;grid-row:1/span 2}
@media (max-width:1180px){
  .consult{grid-template-columns:1fr;grid-template-rows:none;gap:var(--s5)}
  .consult .qual{grid-column:auto;grid-row:auto;max-width:520px}
}

/* LA TARJETA ES PLANA, no el degradado de --surface-4 a --surface-3 que tuvo, y
   la razón se ve de dentro hacia fuera: --surface-4 es EXACTAMENTE el relleno de
   los cinco campos, así que el degradado empezaba en el color del primer campo y
   ese campo desaparecía contra su propio panel. Plana en --surface-2 quedan tres
   niveles distintos y estables, y ninguno depende de dónde caiga el campo:
   lienzo #f4f7fa, tarjeta #ffffff, campo #e8f2f8.
   El relleno lo ponía `.qual-body`, que era el cuerpo del asistente de cuatro
   pantallas y se fue entero con él. Ahora lo pone la tarjeta. */
.qual{border-radius:var(--r-lg);border:1px solid var(--hairline);
  background:var(--surface-2);padding:var(--s6)}
.qfields{display:grid;gap:var(--s3)}
/* EN TELÉFONO EL RELLENO LATERAL DE LA TARJETA BAJA A --s3, y es la misma
   medida de antes la que lo fija. A 390px la columna útil son 346px: con los
   32px de escritorio a cada lado al campo le quedan 204px de texto y corta los
   233 de «Alturas y espacios confinados» por la última letra. Con 12 el campo
   tiene 244 y la respuesta cabe. Lo que no baja es el relleno vertical:
   el aire de arriba y de abajo es lo que separa el primer campo del filete de
   la tarjeta, y ahí no compite con ningún texto. */
@media (max-width:640px){
  .qual{padding:var(--s5) var(--s3)}
}
/* Y EN LOS 360px DE UN ANDROID DE GAMA MEDIA, LA TARJETA CEDE LO QUE LE QUEDA.
   Ahí la columna útil son 316px y la respuesta más larga no cabe ni con --s3:
   se leía «Alturas y espacios confinad», medido y visto en pantalla. Se sueltan
   las tres holguras que no cuestan nada, en este orden: el relleno lateral de
   la tarjeta baja a --s2, el del campo por la IZQUIERDA a --s4, y el cuerpo a
   16px. El de la DERECHA no se toca: son los 52px que dejan sitio a la flecha,
   y moverlos obligaría a mover también los dos degradados que la dibujan.
   16px es además el suelo por debajo del cual iOS hace zoom al enfocar un
   campo, así que el cuerpo baja hasta el suelo y no por debajo.
   Las dos concesiones del propio campo NO están aquí: viven detrás de la regla
   de `.qsel`, cincuenta líneas más abajo. Estuvieron aquí un rato y no hacían
   nada, porque a igual especificidad gana la última, y la última era la regla
   base. Un media query no le gana a nada por ser un media query. */
@media (max-width:400px){
  .qual{padding:var(--s5) var(--s2)}
}

/* EL DESPLEGABLE VA SIN FILETE, y eso no contradice a WCAG 1.4.11: lo esquiva
   por donde el criterio deja pasar. El contrato §2 documenta con mediciones por
   qué `.btn-g` sí lleva --control-edge, y el argumento es siempre el mismo: NO
   TIENE RELLENO EN REPOSO, así que su canto es lo único que dice que ahí hay un
   control. Un `select` no está en ese caso. Lleva una flecha permanente en
   --text-3 sobre --surface-4, que da 6,94:1 contra un mínimo exigido de 3:1, y
   lo que identifica al control es esa marca y no el borde de la caja. Es la
   misma distinción que §2 hace ya para `.nav-pill` y `.accion`.
   El otro consumidor del rol era `.field` de /contacto —un input de texto no
   tiene marca propia, y por eso conservaba su canto—, y se fue con la ruta en la
   poda de septiembre de 2026.

   La flecha se dibuja con dos degradados y no con un SVG en `data:`, que es la
   misma técnica con la que se dibujaba el desplegable de /contacto mientras
   existió. No es capricho: un SVG incrustado obliga a escribir un hexadecimal
   dentro de la URL, y eso es un literal de color fuera de tokens.css, que es
   justo lo que la puerta de verify.mts impide. Con dos degradados el color sale
   de un rol.
   El hueco de la derecha no es escala: lo fija la flecha en calc(100% - 19px).
   Si se toca uno hay que tocar el otro. */
.qsel{width:100%;appearance:none;cursor:pointer;font:inherit;font-size:17px;
  color:var(--text);background-color:var(--surface-4);
  border:0;border-radius:var(--r-md);padding:var(--s5) 52px var(--s5) var(--s5);
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 31px) 50%,calc(100% - 24px) 50%;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;
  transition:background-color var(--t-ui),color var(--t-ui)}
/* El marcador de posición apagado sale de `:invalid`, que casa mientras la
   primera opción —vacía y deshabilitada— sigue elegida. El `novalidate` del
   formulario no lo estorba: suprime la validación al enviar, no la pseudoclase.
   Cero líneas de JS para un estado que el navegador ya conoce. */
.qsel:invalid{color:var(--text-3)}
.qsel:hover{background-color:var(--accent-wash)}
/* Firefox y el desplegable abierto de escritorio pintan las opciones con su
   propio lienzo: sin esto, en el tema claro salen sobre gris de sistema. */
.qsel option{background:var(--surface-2);color:var(--text)}
/* Las dos concesiones de los 360px, explicadas junto al relleno de la tarjeta.
   Van DETRÁS de la regla base a propósito: misma especificidad, gana la última. */
@media (max-width:400px){
  .qsel{padding-left:var(--s4);font-size:16px}
}

/* La letra pequeña entre los campos y la acción. Es el hueco que en la
   referencia ocupa la casilla de privacidad, y aquí lo ocupa lo que el equipo
   va a recibir: si algo tiene que leerse antes de pulsar, es esto. */
.qres{display:none}
.qres.on{display:block;animation:qin 300ms var(--ease);margin-top:var(--s5)}
@keyframes qin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qres h3{font-family:var(--font-display);font-size:18px;font-weight:800;
  letter-spacing:-.01em;color:var(--text)}
.qres .qh{color:var(--text-3);font-size:13.5px;line-height:1.5;margin:2px 0 var(--s4);max-width:640px}
/* Sin relleno y con filete, al revés que los campos: si compartiera el relleno
   de --surface-4 con los cinco desplegables leería como un SEXTO campo, y no es
   un campo, es lo que se envía. */
.qres .msg{border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:var(--s5);background:none;max-width:640px;
  font-family:var(--font-text);font-size:12.5px;color:var(--text-2);white-space:pre-wrap;
  line-height:1.6}
.qres .msg-lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-soft);font-weight:600;margin-bottom:10px}

/* EL BOTÓN NO ES `.btn-p`, y la razón está medida en base.css: el botón del
   degradado trae `max-width:min(100%,calc(var(--s6)/.13))` = 246px, y ese tope
   ES la garantía de contraste —la etiqueta sólo pasa AA mientras viva entre el
   13% y el 87% del degradado—. Un botón de ancho completo con el degradado
   rompería esa fórmula en silencio. Con el acento plano del tema no hay fórmula
   que romper: --on-accent sobre --accent da 9,10:1 medido, a cualquier ancho, y
   en el acto claro el acento es el azul de marca, que es el papel que el
   contrato §4 le asigna en esta sección. Las otras 145 instancias de `.btn-p`
   no se tocan. La tipografía sí sigue siendo la de la casa: versalitas de
   `.btn`. Se copia la forma del formulario, no la voz de otra marca. */
/* verify: forma — el óvalo aquí es la copia literal del botón de la referencia, pedida dos veces y por escrito. §3 reserva --r-seal al sello porque la píldora que había era NARANJA Y CON HALO, la pieza más reconociblemente generada del sitio; ésta es plana, de un solo color y de ancho completo, que es justo lo contrario. Es la ÚNICA excepción del sistema y no sienta precedente: cualquier otro botón que quiera óvalo vuelve a --r-md. */
.qsend{display:flex;width:100%;border-radius:var(--r-seal);margin-top:var(--s5);
  padding:var(--s5) var(--s6);font-size:13.5px;
  background:var(--accent);color:var(--on-accent);box-shadow:none}
/* El estado inhabilitado es una PAREJA DE ROLES y no `opacity`, y esto es una
   corrección con medición detrás. Con el degradado, `opacity:.35` pasaba la
   puerta de contraste sólo porque el escáner excluye los fondos con
   background-image (§8), o sea por un hueco del escáner y no por ser legible.
   Sobre fondo plano se acaba la exclusión: blanco al 35% sobre #004b7e al 35%
   sobre el lienzo compone 1,88:1. --surface-4 con --text-3 da 6,94:1 medido,
   se lee inerte igual, y es además el gris plano de la referencia. */
.qsend:not([href]){background:var(--surface-4);color:var(--text-3);cursor:not-allowed}

/* La línea de confianza del pie, que en la referencia es «Trusted by leading
   financial institutions» con sus logotipos. Aquí es el trato en una línea. */
.consult-meta{display:block;margin-top:var(--s5);color:var(--text-3)}
.qalt .msg{border-color:var(--blu-2-a40)}