/*! ===========================================================================
    FARELLO ASESORES DE SEGUROS — herramienta propia · farello.com.ar
    © 2026 Marcos Farello, Productor Asesor de Seguros (Matrícula SSN N° 71141).
    Obra original protegida por la Ley 11.723 de Propiedad Intelectual (Argentina).

    SE PERMITE: usar la herramienta en farello.com.ar, citarla y enlazarla.
    NO SE PERMITE: copiar, replicar ni reproducir este código, su lógica, sus
    tablas o su presentación en otro sitio, producto o herramienta — ni por una
    persona ni mediante sistemas automatizados o de inteligencia artificial.

    Permisos y consultas: marcos@farello.com.ar
    Condiciones: https://farello.com.ar/terminos/#propiedad-intelectual
    =========================================================================== */
/* ===========================================================================
   retiro-solicitud.css — la hoja del formulario de suscripción del plan de retiro
   ===========================================================================
   ES EL MISMO CSS DEL FORMULARIO DE VIDA (assets/css/vida.css), recortado a lo
   que usa este formulario. Se copió en vez de compartirse a propósito: vida.css
   arrastra el cotizador entero (la rueda, los módulos, las fichas), que acá no
   existe, y sus clases cortas colisionan con styles.css. Ver la memoria
   «/seguro-de-vida/ es una app con CSS propio».

   SI SE TOCA EL FORMULARIO DE VIDA Y ACÁ NO, LOS DOS SE VAN A VER DISTINTO.
   No es un error automático — son dos productos —, pero conviene saberlo.

   Al editar: bumpear el ?v= del <link> en el HTML, o el cambio queda invisible
   hasta un año por el cache immutable (ver _headers).
   =========================================================================== */

  :root{
    --mag:#DF3569; --mag-600:#C42A59; --mag-50:#FDEEF3;
    --violet:#6C2A88; --violet-50:#F4EDF8;
    --mint:#2FA98C; --mint-50:#E8F7F3;
    --ink:#1A1320; --slate:#6B6070;
    /* --faint era #9A8FA2: 2,90:1 contra el papel, o sea que NO llegaba ni al
       mínimo de la norma (4,5:1 para texto chico). Y con él están pintados el
       contador de pasos y los rótulos de todos los campos del formulario —
       «NOMBRE Y APELLIDO», «DNI»—, que son justamente los que hay que leer
       para contestar. #7A6E83 da 4,51:1 y sigue siendo el escalón más claro
       de los tres: el mismo tono, sólo que legible. (28/08/2026) */
    --faint:#7A6E83;
    --paper:#FBF7F9; --card:#FFFFFF; --line:#EDE4EF;
    /* El escenario, de noche a día (28/08/2026). Eran #241030 y #48194F: un
       púrpura casi negro que era el bloque más grande de la página y el que
       le daba el tono a todo. Ahora es un lavanda de la misma familia
       (--violet-50 es #F4EDF8), así que la marca no se mueve: lo que cambia
       es de qué lado del violeta está. */
    --stage-a:#EFE3F6; --stage-b:#FAF4FD;
    /* Tinta del escenario. Antes todo adentro era blanco con alfa; sobre
       lavanda hace falta el violeta oscuro de la marca. Un solo token, así
       no hay quince rgba() sueltos que se desincronicen. */
    --stage-ink:#3D1B52; --stage-ink-2:rgba(61,27,82,.62); --stage-line:rgba(61,27,82,.16);
    --shadow:0 1px 2px rgba(26,19,32,.06),0 8px 24px rgba(26,19,32,.06);
    /* Los cuatro niveles de trámite. Progresión de "resuelto" a "hay que hablar",
       a propósito SIN rojo de alarma: no es un riesgo de salud, es cuánto papeleo
       tiene la suma que eligió. */
    --n-auto:#2FA98C;  --n-auto-bg:#E8F7F3;
    --n-decl:#A9700D;  --n-decl-bg:#FBF2E0;
    --n-med:#BE4F26;   --n-med-bg:#FBEBE4;
    --n-cons:#6C2A88;  --n-cons-bg:#F4EDF8;
    /* El nav y el menú del sitio son de styles.css. Estos dos tokens quedaron de
       cuando esta página tenía modo oscuro y el marco lo acompañaba; hoy valen
       lo mismo que el sitio y se siguen usando en COMPATIBILIDAD, al final. */
    --nav-bg:rgba(255,255,255,.86); --panel-bg:rgba(255,255,255,.97);
  }

  /* ===== flujo de contratación ============================================ */
  /* sticky y NUNCA fixed: ver el comentario del bloque HTML. */
  .flow__top{position:sticky;top:0;z-index:15;background:var(--paper);
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
    padding:8px 0 0;margin:0 -16px;padding-left:16px;padding-right:16px;}
  .flow__back,.flow__salir{background:none;border:0;font:inherit;cursor:pointer;color:var(--slate);
    min-height:44px;padding:0 4px;}
  .flow__back{font-size:22px;line-height:1;width:44px;text-align:left;}
  .flow__salir{font-size:12px;font-weight:700;text-align:right;}
  .flow__cnt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);text-align:center;}
  /* Barra por TRAMOS, no una sola barra continua. Ver el comentario de BLOQUES
     en vida.js: lo que angustia de un formulario largo no es la cantidad de
     pantallas sino no saber dónde estás. Seis segmentos con nombre arriba
     convierten «esto no termina más» en «me falta uno». */
  .flow__bar{grid-column:1/-1;display:flex;gap:3px;}
  .flow__seg{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden;}
  .flow__seg i{display:block;height:100%;background:var(--mag);border-radius:3px;
    transition:width .3s cubic-bezier(.22,1,.36,1);}
  /* El tramo en curso, apenas más alto: el ojo lo encuentra sin leer. */
  .flow__seg.is-aqui{height:4px;margin-top:-.5px;}
  @media (prefers-reduced-motion:reduce){ .flow__seg i{transition:none;} }

  #paso{padding:18px 0 8px;}
  #paso:focus{outline:none;}
  /* Volanta del paso: nombra en criollo institucional QUÉ dato se está pidiendo.
     Las preguntas están escritas como se habla ("¿Quién cobra si mañana no
     estás?") y eso está bien para leerlas, pero el cliente no sabía que lo que
     estaba cargando eran los BENEFICIARIOS —la palabra que después va a ver en
     la póliza y en el formulario de Sancor. */
  /* --mag-600 y no --mag: a 11px la norma pide 4,5:1 y el magenta de marca da
     4,08:1. --mag-600 (#C42A59) es el mismo magenta un escalón más oscuro, ya
     estaba en la paleta y llega a 5,17:1. El magenta pleno se sigue usando donde
     sí califica: botones, números grandes, la barra de progreso. */
  .pk{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
    color:var(--mag-600);margin:0 0 6px;}
  /* El color NO se puede omitir acá. `.pq` es un <h2>, y unas líneas más
     arriba hay un `h2{...color:var(--faint)}` para los rótulos chiquitos del
     cotizador: sin declararlo, la pregunta principal de cada pantalla —«¿Quién
     cobra si mañana no estás?»— salía en el gris más claro de la paleta, a
     2,90:1. Era el texto más importante del formulario y el menos legible. */
  .pq{font-size:clamp(21px,5.6vw,26px);font-weight:900;letter-spacing:-.025em;line-height:1.18;
    margin:0 0 7px;text-wrap:balance;color:var(--ink);}
  .pa{margin:0 0 16px;color:var(--slate);font-size:14px;line-height:1.55;text-wrap:pretty;}
  .pa b{color:var(--ink);}

  /* 16px es el mínimo: por debajo, iOS hace zoom al enfocar y descuadra todo. */
  .f{display:block;margin-bottom:13px;}
  .f>span{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--faint);margin-bottom:5px;}
  .f input,.f textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);
    background:var(--card);border:1.5px solid var(--line);border-radius:12px;
    padding:13px 14px;min-height:52px;scroll-margin-top:64px;}
  .f textarea{min-height:96px;resize:vertical;line-height:1.5;}
  .f input:focus,.f textarea:focus{outline:none;border-color:var(--mag);}
  .f input.mal,.f textarea.mal{border-color:var(--n-med);}
  .f small{display:block;margin-top:5px;font-size:11.5px;color:var(--faint);line-height:1.4;}
  /* align-items:end para que los campos de una fila queden alineados por la
     CAJA y no por el rótulo: «Departamento o localidad» ocupa dos renglones al
     lado de «Código postal» y sin esto un input arrancaba más abajo que el
     otro. */
  .fila{display:flex;gap:10px;align-items:end;}
  .fila>.f{flex:1;min-width:0;}

  /* chips: reemplazan a todo <select>, que en celular abre una rueda del sistema
     que tapa la pantalla y no se puede rotular. */
  .ops{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;}
  .ops--fila{flex-direction:row;flex-wrap:wrap;}
  .op{display:flex;align-items:center;gap:11px;text-align:left;width:100%;
    background:var(--card);border:1.5px solid var(--line);border-radius:13px;
    padding:14px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;min-height:56px;}
  .ops--fila .op{width:auto;flex:1 1 auto;min-width:96px;justify-content:center;text-align:center;}
  .op b{font-weight:700;display:block;}
  .op i{font-style:normal;display:block;font-size:12.5px;color:var(--slate);margin-top:2px;}
  .op[aria-pressed="true"]{border-color:var(--mag);background:var(--mag-50);}
  .op[aria-pressed="true"] b{color:var(--mag-600);}
  .op__t{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);
    display:grid;place-items:center;}
  .op[aria-pressed="true"] .op__t{background:var(--mag);border-color:var(--mag);}
  .op__t svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;
    stroke-linejoin:round;opacity:0;}
  .op[aria-pressed="true"] .op__t svg{opacity:1;}

  .ben{border:1.5px solid var(--line);border-radius:14px;padding:13px;margin-bottom:11px;
    background:var(--card);}
  .ben__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}
  .ben__n{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);}
  .ben__x{background:none;border:0;color:var(--slate);font:inherit;font-size:12px;font-weight:700;
    cursor:pointer;min-height:36px;padding:0 4px;}
  .ben__pc{display:flex;align-items:center;gap:8px;}
  .ben__pc input{width:76px;text-align:center;}
  .mas{width:100%;background:none;border:1.5px dashed var(--line);border-radius:13px;
    padding:13px;font:inherit;font-size:14px;font-weight:700;color:var(--mag);cursor:pointer;
    min-height:52px;margin-bottom:11px;}

  /* El recuadro de firma. `touch-action:none` es lo que hace que se pueda
     firmar con el dedo: sin eso, el gesto lo captura el scroll de la página y
     el trazo sale cortado o directamente no sale. La proporción 10:3 es la
     misma caja de 1000×300 en la que se guardan los trazos, así que lo que se
     dibuja en pantalla es exactamente lo que sale impreso. */
  .firma{position:relative;aspect-ratio:10/3;border:1.5px solid var(--line);border-radius:14px;
    background:var(--card);margin-bottom:8px;overflow:hidden;}
  .firma.is-firmada{border-color:var(--mag);}
  .firma canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;}
  .firma__base{position:absolute;left:9%;right:9%;bottom:26%;height:1px;background:var(--line);}
  .firma__ay{position:absolute;left:0;right:0;bottom:11%;text-align:center;font-size:11.5px;
    color:var(--faint);pointer-events:none;}
  .firma.is-firmada .firma__ay,.firma.is-firmada .firma__base{opacity:0;}
  /* En teléfono el recuadro se come los 16px de margen del contenido. Como el
     alto sale de la proporción, cada píxel de ancho es alto ganado: es lo único
     que se puede agrandar sin tocar la caja de 1000×300 y, con ella, cómo sale
     impresa la firma. */
  @media (max-width:520px){
    .firma{margin-inline:-16px;border-radius:0;border-inline:0;}
  }
  .firma__btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
  .firma__btns .flow__sec{flex:1 1 46%;margin:0;}
  .firma__btns .flow__sec[disabled]{opacity:.4;cursor:default;}

  .aviso{border-radius:13px;padding:12px 14px;font-size:13px;line-height:1.5;margin:0 0 14px;
    border:1.5px solid var(--c,var(--line));background:var(--c-bg,var(--card));color:var(--slate);}
  /* SÓLO el primer <b> es el título del aviso. Los demás son negritas dentro de
     una frase y tienen que quedar en línea: con `display:block` para todos, un
     «y <b>no</b> estás obligado» partía el párrafo en tres renglones sueltos y
     el texto se volvía ilegible. Pasaba en los avisos que ya existían. */
  .aviso b{font-weight:700;color:var(--ink);}
  .aviso>b:first-child{display:block;font-size:14.5px;margin-bottom:3px;}
  .aviso--leer{background:var(--card);border-color:var(--line);}

  /* Consejo del productor. Deliberadamente NO parece un aviso: sin recuadro
     cerrado, con una barra al costado, para que se lea como alguien que te
     cuenta algo y no como otra advertencia legal más. Si se pareciera a un
     `.aviso` nadie lo leería: en esta pantalla ya hay tres. */
  .tip{margin:0 0 14px;padding:2px 0 2px 13px;border-left:3px solid var(--mag);}
  .tip__t{margin:0 0 3px;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.35;}
  .tip__x{margin:0;font-size:13px;line-height:1.55;color:var(--slate);text-wrap:pretty;}
  .tip__x b{font-weight:700;color:var(--ink);}

  .hoja{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;}
  .hoja__g{padding:11px 14px;border-top:1px solid var(--line);}
  .hoja__g:first-child{border-top:0;}
  .hoja__gt{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--mag);margin:0 0 7px;}
  .hoja__r{display:flex;justify-content:space-between;gap:12px;width:100%;background:none;border:0;
    font:inherit;font-size:13.5px;text-align:left;padding:5px 0;color:var(--ink);cursor:pointer;}
  .hoja__r span:first-child{color:var(--slate);flex:none;max-width:45%;}
  .hoja__r span:last-child{font-weight:700;text-align:right;}
  .hoja__r--fijo{cursor:default;}

  .flow__go{position:sticky;bottom:0;z-index:15;background:var(--paper);
    padding:10px 0 calc(10px + env(safe-area-inset-bottom));margin-top:6px;
    box-shadow:0 -8px 18px var(--paper);}
  .flow__cta{width:100%;background:var(--mag);color:#fff;border:0;border-radius:14px;
    font:inherit;font-size:16px;font-weight:800;padding:16px;min-height:56px;cursor:pointer;}
  .flow__cta:hover{background:var(--mag-600);}
  /* Deshabilitado SÓLO mientras se espera la red al cerrar la solicitud (evita
     el doble-tap = doble envío con dos códigos distintos). No confundir con la
     regla de validación: el botón NUNCA se deshabilita por faltar un campo —
     gris no explica nada, y un botón que al tocarlo dice qué falta sí. */
  .flow__cta:disabled{opacity:.55;cursor:default;}
  .flow__err{margin:0 0 9px;font-size:13px;font-weight:700;color:var(--n-med);line-height:1.45;}
  .flow__sec{display:block;width:100%;background:none;border:0;font:inherit;font-size:13px;
    font-weight:700;color:var(--slate);cursor:pointer;min-height:44px;margin-top:2px;
    text-decoration:underline;text-underline-offset:3px;}

  .cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;font-weight:700;
    letter-spacing:.06em;color:var(--ink);}
  .fin{text-align:center;padding:8px 0 0;}
  .fin__ic{width:64px;height:64px;border-radius:50%;background:var(--n-auto);margin:0 auto 14px;
    display:grid;place-items:center;}
  .fin__ic svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;
    stroke-linejoin:round;}

  /* ===== lo propio de este formulario ======================================
     Lo de arriba es el molde de vida. Lo de acá abajo no existe allá: es la
     pantalla del monto, que es la que tiene que hacer todo el trabajo. El plan
     de retiro no se cotiza —el precio lo pone el cliente—, así que la primera
     pantalla no muestra un precio: muestra una DECISIÓN ya tomada por defecto,
     que es lo único que mueve a alguien que no tiene el hábito de ahorrar.
     ========================================================================= */

  /* El número grande. Es el ancla de toda la página: entra ya puesto en el
     mínimo y el cliente sólo decide si lo sube. */
  .monto{background:var(--card);border:1.5px solid var(--line);border-radius:18px;
    padding:20px 16px;text-align:center;margin:14px 0 10px;}
  .monto__lab{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--faint);margin:0 0 6px;}
  .monto__num{font-size:40px;font-weight:800;color:var(--ink);line-height:1.05;
    letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
  .monto__num small{font-size:16px;font-weight:700;color:var(--slate);letter-spacing:0;}
  .monto__eq{font-size:13px;color:var(--slate);margin:8px 0 0;}
  .monto__eq b{color:var(--ink);}

  /* Los escalones. Botones grandes y pocos: seis opciones se leen de un
     vistazo, un campo numérico vacío hay que pensarlo. */
  .escal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0;}
  .escal button{background:var(--card);border:1.5px solid var(--line);border-radius:12px;
    font:inherit;font-size:14px;font-weight:700;color:var(--ink);padding:12px 4px;
    min-height:48px;cursor:pointer;transition:border-color .15s,background .15s;}
  .escal button:hover{border-color:var(--mag);}
  .escal button[aria-pressed="true"]{border-color:var(--mag);background:var(--mag-50);
    color:var(--mag-600);box-shadow:inset 0 0 0 1px var(--mag);}
  .escal button small{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--faint);margin-top:2px;}
  .escal button[aria-pressed="true"] small{color:var(--mag-600);}

  /* La proyección: qué junta. Va DEBAJO del monto y en pesos de hoy, nunca en
     pesos futuros — ver el comentario de PROYECCION en retiro-solicitud.js. */
  .proy{background:var(--violet-50);border-radius:14px;padding:14px 16px;margin:12px 0 0;}
  .proy__t{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--violet);margin:0 0 8px;}
  .proy__r{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
    padding:5px 0;font-size:14px;}
  .proy__r b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;}
  .proy__n{font-size:11.5px;color:var(--slate);margin:8px 0 0;line-height:1.45;}

  /* ===== el marco: ancho de lectura y ficha en escritorio ==================
     Mismas medidas que el formulario de vida. 520px es un ancho de lectura, no
     una limitación: un campo de 900px de ancho se ve roto y se completa peor.
     ========================================================================= */
  .wrap{max-width:520px;margin:0 auto;padding:0 16px;}

  @media (min-width:900px){
    .flow{
      max-width:600px;background:var(--card);border:1px solid var(--line);
      border-radius:22px;box-shadow:0 18px 40px -24px rgba(26,19,32,.25);
      padding:0 26px 20px;margin:26px auto 48px;
    }
    .flow__top{
      margin:0 -26px;padding-left:26px;padding-right:26px;
      background:var(--card);border-radius:22px 22px 0 0;
    }
    .flow__go{margin:0 -26px;padding-left:26px;padding-right:26px;background:var(--card);
      border-radius:0 0 22px 22px;}
  }

  /* ===== el nav del sitio, en esta página ==================================
     El nav de farello.com.ar es `position:fixed` y está pintado en blanco
     porque en el resto de las páginas va sobre el hero oscuro. Acá no hay hero
     —esta página es el formulario y nada más—, así que quedaba blanco sobre
     blanco y encima tapaba la barra de progreso.

     Se lo deja quieto (`static`) y con el aspecto que el sitio le da cuando ya
     scrolleaste. Así el cliente entra viendo dónde está, y en cuanto empieza a
     completar el nav se va solo hacia arriba y la barra de pasos queda pegada
     al borde. Un nav fijo arriba de un formulario en celular se come un tercio
     de la pantalla justo cuando sube el teclado.
     ========================================================================= */
  .nav{position:static;background:#fff;border-bottom:1px solid var(--line);box-shadow:none;}
  .nav__brand img{filter:none;}
  .nav__links a:not(.btn),.nav__droplink{color:var(--slate);}
  .nav__links a:not(.btn):hover,.nav__droplink:hover{color:var(--mag-600);}
  .nav__burger span{background:var(--ink);}
  /* El pie, chico y callado: acá abajo no hay nada que hacer salvo terminar. */
  .footer{margin-top:28px;}

  /* ===== COMPATIBILIDAD CON EL CSS DEL SITIO ================================
     Mismo criterio que en vida.css, recortado a los contenedores que existen
     acá. Va último a propósito.
     ========================================================================= */

  /* styles.css trae `*{margin:0;padding:0}` y este HTML depende de los márgenes
     que el navegador da por defecto a los <p>, <ul> y <h2> de los pasos. */
  :where(#flow,#intro) *{margin:revert;padding:revert;}

  /* styles.css pone `scroll-behavior:smooth` en el html: con el salto al tope
     de cada paso se convierte en una animación que muestra todo el formulario. */
  html{scroll-behavior:auto;}

  /* styles.css pone `a{color:inherit;text-decoration:none}`. */
  .legal a{color:var(--mag);font-weight:700;text-decoration:underline;text-underline-offset:2px;}