/* EL FORMULARIO POR PASOS.

   Sustituye a tres formularios de Tally metidos en un iframe. Un iframe se nota
   siempre: tarda, trae su propia tipografía y se lo comen los bloqueadores. Esto
   es de la casa — Poppins, el naranja y el resplandor del contacto — y pesa 9 KB.

   La forma es la de Tally por un motivo, no por copiarla: una pregunta a la vez
   se contesta y no se abandona. Un formulario de seis campos asusta al verlo; el
   mismo partido en seis pantallas se rellena sin pensarlo, y en móvil es la
   diferencia entre escribir cómodo y pelearse con el teclado.

   Todo lo que se mueve está detrás de prefers-reduced-motion. */

.fm{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;
  background:var(--bg);overflow:clip}

/* el resplandor: el mismo gesto que la luz del contacto, pero a lo ancho y
   quieto detrás de todo. Da profundidad sin pedir nada al navegador */
.fm::before{content:"";position:absolute;inset:auto -15% -12% -15%;height:66%;z-index:0;pointer-events:none;
  opacity:.62;filter:blur(90px);
  background:radial-gradient(46% 62% at 20% 78%,rgba(255,95,0,.62),transparent 72%),
             radial-gradient(40% 55% at 82% 92%,rgba(255,150,60,.34),transparent 72%)}

/* ── la barra de progreso, pegada arriba del todo ──
   2 px. Un formulario que enseña cuánto queda se abandona menos, pero una barra
   gorda se convierte en el protagonista de la pantalla y no lo es. */
.fm_barra{position:sticky;top:0;z-index:5;height:2px;background:rgba(255,255,255,.07)}
.fm_barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff9a4d);
  transition:width .45s cubic-bezier(.22,1,.36,1)}

.fm_top{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.1rem clamp(1.1rem,4vw,2.4rem)}
.fm_logo img{height:30px;display:block}
.fm_cuenta{font-family:var(--font-m);font-size:.76rem;letter-spacing:.16em;color:var(--muted)}
.fm_cuenta b{color:var(--accent-text);font-weight:600}

/* ── el escenario ── */
.fm_cuerpo{position:relative;z-index:2;flex:1;display:flex;align-items:center;
  padding:clamp(1.4rem,5vh,3rem) clamp(1.1rem,4vw,2.4rem) clamp(5.5rem,12vh,7rem)}
.fm_col{width:100%;max-width:38rem;margin:0 auto}

.fm_paso{display:none}
.fm_paso.is-on{display:block;animation:fmEntra .5s cubic-bezier(.22,1,.36,1) both}
@keyframes fmEntra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.fm_eyebrow{margin:0 0 .7rem;font-family:var(--font-m);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-text);font-weight:600}
.fm_q{margin:0;font-size:clamp(1.55rem,4.4vw,2.7rem);font-weight:700;line-height:1.15;
  letter-spacing:-.03em;text-wrap:balance;color:var(--ink)}
.fm_q em{font-style:normal;color:var(--accent-text)}
.fm_ayuda{margin:.85rem 0 0;color:var(--ink2,#c3c9d4);line-height:1.6;font-size:1rem;max-width:34rem}

/* ── el campo: sin caja, solo una línea que se enciende ──
   Una caja con borde a esta escala parece un formulario de banco. La línea deja
   que la respuesta sea lo grande de la pantalla, que es de lo que va esto. */
.fm_campo{position:relative;margin-top:clamp(1.6rem,4vh,2.4rem)}
.fm_campo input,.fm_campo textarea{
  width:100%;box-sizing:border-box;display:block;
  background:none;border:0;border-bottom:2px solid rgba(255,255,255,.16);
  border-radius:0;padding:.55rem .1rem .7rem;color:var(--ink);
  font-family:var(--font-d);font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:500;
  line-height:1.45;transition:border-color .25s}
.fm_campo textarea{resize:none;min-height:5.5rem;font-size:clamp(1rem,2vw,1.2rem)}
.fm_campo input::placeholder,.fm_campo textarea::placeholder{color:rgba(255,255,255,.26)}
.fm_campo input:focus,.fm_campo textarea:focus{outline:none;border-bottom-color:var(--accent)}
/* el autorrelleno de Chrome pinta la caja de azul y se carga el diseño */
.fm_campo input:-webkit-autofill{-webkit-text-fill-color:var(--ink);
  transition:background-color 9999s;caret-color:var(--ink)}

.fm_error{margin:.7rem 0 0;color:#ff9270;font-size:.92rem;line-height:1.4;min-height:1.3em}

/* ── las casillas de consentimiento, como tarjetas que se pulsan ──
   Una casilla de 13 px al lado de un párrafo legal es imposible de acertar con
   el pulgar. Toda la tarjeta es el objetivo. */
.fm_sies{display:grid;gap:.7rem;margin-top:clamp(1.4rem,3.5vh,2rem)}
.fm_si{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  padding:1rem 1.1rem;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);
  color:var(--ink2,#c3c9d4);line-height:1.5;font-size:.95rem;
  transition:border-color .22s,background .22s}
.fm_si:hover{border-color:rgba(255,122,46,.45);background:rgba(255,95,0,.06)}
.fm_si input{position:absolute;opacity:0;width:0;height:0}
.fm_si i{width:22px;height:22px;border-radius:7px;flex:none;margin-top:.1rem;
  border:2px solid rgba(255,255,255,.28);display:grid;place-items:center;
  transition:border-color .2s,background .2s}
.fm_si i::after{content:"";width:10px;height:6px;border-left:2.5px solid #0b0c0f;
  border-bottom:2.5px solid #0b0c0f;transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .18s,transform .18s;margin-top:-3px}
.fm_si.is-on{border-color:var(--accent);background:rgba(255,95,0,.1);color:var(--ink)}
.fm_si.is-on i{background:var(--accent);border-color:var(--accent)}
.fm_si.is-on i::after{opacity:1;transform:rotate(-45deg) scale(1)}
.fm_si:focus-within{outline:2px solid var(--accent);outline-offset:3px;border-radius:16px}

/* ── el repaso final ── */
.fm_repaso{margin-top:clamp(1.4rem,3.5vh,2rem);display:grid;gap:.1rem;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.fm_fila{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;
  padding:.9rem 1.1rem;background:var(--panel-2);border-bottom:1px solid rgba(255,255,255,.05)}
.fm_fila:last-child{border-bottom:0}
.fm_fila>div{min-width:0}
.fm_fila span{display:block;font-family:var(--font-m);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.fm_fila b{display:block;font-weight:600;color:var(--ink);line-height:1.45;
  overflow-wrap:anywhere}
.fm_fila button{background:none;border:0;color:var(--accent-text);font:inherit;font-size:.85rem;
  cursor:pointer;padding:.2rem .3rem;border-radius:8px;flex:none}
.fm_fila button:hover{text-decoration:underline}

/* ── el pie: avanzar, y el atajo ── */
.fm_pie{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem clamp(1.1rem,4vw,2.4rem) calc(1rem + env(safe-area-inset-bottom));
  /* solo lo justo para que el botón se lea sobre lo que pase por debajo: opaco
     hasta arriba se comía el resplandor entero */
  background:linear-gradient(to top,rgba(10,12,16,.92) 30%,rgba(10,12,16,.55) 65%,transparent);
  backdrop-filter:blur(6px);
  border-top:1px solid transparent}
.fm_atras{background:none;border:0;color:var(--muted);font:inherit;font-size:.92rem;cursor:pointer;
  padding:.6rem .2rem;transition:color .2s}
.fm_atras:hover{color:var(--ink)}
.fm_atras[hidden]{display:none}
.fm_ok{margin-left:auto;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--accent);color:#0b0c0f;border:0;border-radius:99px;
  padding:.85rem 1.5rem;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  transition:background .2s,transform .2s}
.fm_ok:hover{background:#ff7620;transform:translateY(-1px)}
.fm_ok:disabled{opacity:.55;cursor:default;transform:none}
.fm_tecla{font-family:var(--font-m);font-size:.74rem;letter-spacing:.1em;color:var(--muted)}
.fm_tecla b{color:var(--ink2,#c3c9d4);font-weight:500;
  border:1px solid rgba(255,255,255,.16);border-radius:5px;padding:.1rem .35rem}
@media (max-width:640px){.fm_tecla{display:none}}

/* ── el final ── */
.fm_fin{text-align:center;max-width:32rem;margin:0 auto;
  animation:fmEntra .55s cubic-bezier(.22,1,.36,1) both}
.fm_marca{width:66px;height:66px;margin:0 auto 1.4rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,95,0,.14);border:1px solid rgba(255,122,46,.5)}
.fm_marca::after{content:"";width:20px;height:11px;margin-top:-5px;
  border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);
  transform:rotate(-45deg)}
/* y aquí otra vez, sin depender de que nadie lo herede bien */
.fm_fin h2{margin:0;font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.1;color:var(--ink,#f2f4f8)}
.fm_fin p{margin:1rem 0 0;color:var(--ink2,#c3c9d4);line-height:1.65}
.fm_ref{margin-top:1.6rem;font-family:var(--font-m);font-size:.76rem;letter-spacing:.12em;
  color:var(--muted)}
.fm_volver{display:inline-flex;margin-top:1.8rem;gap:.5rem;align-items:center;
  border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:.7rem 1.3rem;
  color:var(--ink);text-decoration:none;font-weight:600;transition:border-color .2s,background .2s}
.fm_volver:hover{border-color:var(--accent);background:rgba(255,95,0,.08)}

@media (prefers-reduced-motion:reduce){
  .fm_paso.is-on,.fm_fin{animation:none}
  .fm_barra i{transition:none}
}

/* ══════ LA MISMA COSA, PERO ENCIMA DE LA WEB ══════
   Se usa <dialog> nativo y no un div a mano: da el Escape, el foco atrapado
   dentro y el resto de la página inerte de serie, y eso hecho a mano se hace mal
   casi siempre. El ::backdrop es suyo, no un hermano con position:fixed. */
/* EL COLOR, EXPLÍCITO. Un <dialog> trae `color: CanvasText` del navegador, que
   en un equipo con el tema claro es NEGRO, y eso pisa el color heredado de la
   página. Todo lo que declaraba su color se veía bien y lo que no, no: el
   titular de «Solicitud recibida» salía negro sobre negro y no se leía. */
.fm_capa{padding:0;border:0;background:none;max-width:none;max-height:none;
  width:100%;height:100%;overflow:visible;color:var(--ink,#f2f4f8)}
.fm_capa::backdrop{background:rgba(4,5,7,.72);backdrop-filter:blur(6px)}
.fm_capa[open]{animation:fmCapaEntra .32s cubic-bezier(.22,1,.36,1) both}
@keyframes fmCapaEntra{from{opacity:0}to{opacity:1}}

/* dentro de la capa deja de ser una página y pasa a ser una tarjeta: se ve la
   web por los lados y por eso no da la sensación de haberse ido a otro sitio */
.fm--capa{min-height:0;height:100%;max-width:44rem;margin:0 auto;
  border:1px solid var(--line);border-radius:24px;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
@media (min-width:760px){
  .fm_capa{padding:clamp(1rem,4vh,3rem) 1rem;box-sizing:border-box}
  .fm--capa{height:min(680px,100%)}
}
@media (max-width:759px){
  /* en el móvil sí ocupa todo: una tarjeta pequeña con el teclado abierto no
     deja sitio ni para la pregunta */
  .fm--capa{border:0;border-radius:0}
}
.fm--capa .fm_barra{border-radius:24px 24px 0 0;overflow:hidden}
.fm--capa .fm_cuerpo{overflow-y:auto;padding-bottom:clamp(1.4rem,4vh,2.4rem)}
/* y el pie deja de ser translúcido: dentro de la tarjeta no hay nada que
   deba verse por debajo, y el degradado ensuciaba el borde inferior */
.fm--capa .fm_pie{background:none;backdrop-filter:none;
  border-top:1px solid rgba(255,255,255,.06)}

.fm_cerrar{margin-left:auto;width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink2,#c3c9d4);font:inherit;font-size:1rem;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.fm_cerrar:hover{border-color:var(--accent);background:rgba(255,95,0,.1);color:var(--ink)}
.fm--capa .fm_cuenta{margin-right:.2rem}

@media (prefers-reduced-motion:reduce){.fm_capa[open]{animation:none}}

/* ══════ PANTALLAS CON VARIAS PREGUNTAS ══════
   El de la franquicia son veintisiete preguntas. De una en una serían
   veintisiete pantallas, así que van agrupadas por bloque igual que en el
   formulario original: seis pantallas con su titular y sus preguntas dentro.

   Aquí el campo deja de ser el protagonista y pasa a ser una fila de una lista.
   Con el tamaño que tiene cuando está solo, nueve preguntas medían dos mil
   píxeles y parecía que no se acababa nunca. */

/* Una pantalla con nueve preguntas es más alta que el hueco. El centrado pasa a
   hacerlo el margen del hijo: align-items:center con scroll recorta por arriba
   y deja la primera pregunta fuera del alcance. */
.fm_cuerpo{align-items:stretch;overflow-y:auto}
.fm_col{margin:auto}

.fm_paso--grupo .fm_q{font-size:clamp(1.3rem,3vw,1.9rem)}
.fm_paso--grupo .fm_ayuda{margin-top:.6rem;font-size:.95rem}

/* ── una pregunta y su aire ──
   Con seis preguntas apiladas a 1,15 rem no se veía dónde acababa una y
   empezaba la siguiente: la etiqueta de la de abajo parecía la ayuda de la de
   arriba. Lo que las separa es el espacio, y nada más.

   Se probaron dos separadores y los dos ensuciaban. Una raya de lado a lado
   quedaba justo debajo del subrayado del campo, o sea dos líneas finas
   pegadas, que se leen como un borde mal hecho. Una marca corta en naranja se
   veía como suciedad encima de las tarjetas de consentimiento, que ya tienen
   su propio contorno. Aquí ya hay bastante línea: la que hace falta es la que
   no se pone. */
.fm_preg{margin-top:clamp(2.1rem,4.6vh,3.1rem)}
.fm_preg:first-of-type{margin-top:clamp(1.8rem,4vh,2.4rem)}
/* Varias casillas seguidas son UNA lista de consentimientos, no preguntas
   sueltas: van pegadas entre ellas como en .fm_sies. Con el aire de pregunta
   se separaban tanto que parecían tres apartados distintos. */
.fm_preg:has(> .fm_si) + .fm_preg:has(> .fm_si){margin-top:.7rem}
.fm_preg:has(> .fm_si) .fm_error:empty{display:none}
.fm_preg .fm_campo{margin-top:.45rem}
.fm_preg .fm_campo input,.fm_preg .fm_campo textarea{
  font-size:1.05rem;padding:.45rem .1rem .6rem}
.fm_preg .fm_campo textarea{min-height:4.6rem}
.fm_preg .fm_error{margin:.4rem 0 0;min-height:0;font-size:.86rem}
.fm_preg .fm_error:empty{display:none}

.fm_rot{display:block;font-size:1.02rem;font-weight:600;line-height:1.45;
  color:var(--ink);text-wrap:pretty;margin-bottom:.1rem}
.fm_rot em{margin-left:.45rem;font-style:normal;font-family:var(--font-m);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);vertical-align:.14em}
.fm_pista{margin:.2rem 0 0;color:var(--muted);font-size:.85rem;line-height:1.5}

/* la pregunta que falla se señala donde está, no con un aviso genérico arriba */
.fm_preg.is-mal .fm_rot{color:#ff9270}
.fm_preg.is-mal .fm_campo input,.fm_preg.is-mal .fm_campo textarea{border-bottom-color:#ff9270}
.fm_preg.is-mal .fm_ops{outline:1px solid rgba(255,146,112,.45);outline-offset:5px;border-radius:13px}

/* ── elegir una entre varias ── */
.fm_ops{display:grid;gap:.5rem;margin-top:.75rem}
.fm_op{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;
  width:100%;text-align:left;padding:.7rem .95rem;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--panel-2);
  color:var(--ink2,#c3c9d4);font:inherit;font-size:.92rem;line-height:1.35;
  transition:border-color .18s,background .18s,color .18s}
.fm_op:hover{border-color:rgba(255,122,46,.45);background:rgba(255,95,0,.06);color:var(--ink)}
.fm_op i{width:16px;height:16px;flex:none;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.28);display:grid;place-items:center;
  transition:border-color .18s}
.fm_op i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .18s cubic-bezier(.22,1.6,.4,1)}
.fm_op.is-on{border-color:var(--accent);background:rgba(255,95,0,.1);color:var(--ink);font-weight:500}
.fm_op.is-on i{border-color:var(--accent)}
.fm_op.is-on i::after{transform:scale(1)}
.fm_op:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── las de VARIAS respuestas ──
   La forma del control es lo que dice cuantas puedes elegir, y esto es una
   convencion que la gente ya trae aprendida: redondo = una, cuadrado = varias.
   Sin cambiarla, quien llega a «Profesion actual» marca una y sigue, sin
   enterarse de que podia marcar dos.
   El cuadrado lleva una marca de verificacion en vez del punto. */
.fm_ops--multi .fm_op i{border-radius:5px}
.fm_ops--multi .fm_op i::after{
  width:9px;height:5px;border-radius:0;background:none;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  margin-top:-2px;transform:rotate(-45deg) scale(0);transform-origin:center}
.fm_ops--multi .fm_op.is-on i::after{transform:rotate(-45deg) scale(1)}
/* y se dice con palabras, que la forma sola no basta */
.fm_ops--multi::before{
  content:"Puedes elegir varias";
  grid-column:1/-1;margin:-.15rem 0 .1rem;
  font-family:var(--font-m);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-text)}

/* cuando son pocas y cortas, en dos columnas: una lista de cinco «Sí/No» en
   una sola columna alarga la pantalla sin necesidad */
@media (min-width:560px){
  .fm_ops[data-corto]{grid-template-columns:1fr 1fr}
}

/* en una pantalla de una sola pregunta las opciones son el protagonista */
.fm_paso:not(.fm_paso--grupo) .fm_ops{margin-top:clamp(1.5rem,3.5vh,2.2rem);gap:.6rem}
.fm_paso:not(.fm_paso--grupo) .fm_op{padding:.95rem 1.1rem;font-size:1.02rem}

/* las casillas dentro de un grupo van juntas y sin rótulo repetido encima */
.fm_preg>.fm_si{margin-top:.5rem}
.fm_preg:has(>.fm_si){margin-top:.5rem}
.fm_preg:has(>.fm_si)+.fm_preg:has(>.fm_si){margin-top:.45rem}
.fm_preg>.fm_si{padding:.7rem .85rem;font-size:.9rem}

/* ── el repaso de una pantalla agrupada ── */
.fm_fila--grupo{align-items:start}
.fm_fila--grupo b.fm_sub{display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem;
  font-weight:600;padding:.4rem 0;border-top:1px solid rgba(255,255,255,.05)}
.fm_fila--grupo b.fm_sub:first-of-type{border-top:0;padding-top:0}
.fm_fila--grupo b.fm_sub i{font-style:normal;font-weight:400;font-size:.8rem;
  color:var(--muted);line-height:1.35}

/* el enlace a la privacidad dentro de la casilla tiene que verse que lo es:
   es lo que convierte «acepto» en algo que se ha podido leer antes */
.fm_si a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.fm_si a:hover{color:var(--accent)}