/* ===========================================================================
   seguro-de-vida — hoja de estilo de la app del armador
   ===========================================================================
   Esto vivía como <style> inline dentro de seguro-de-vida/index.html. Se sacó a
   un archivo aparte el 2026-08-17 por una razón de posicionamiento, no de orden:
   el HTML pesaba 233 KB y el 91% era este CSS y el JS. Un archivo bajo /assets/
   se cachea un ano (ver _headers), el HTML no; y con el HTML liviano lo que
   Google mide en celular mejora sin tocar una linea de la app.

   NO SE CAMBIO NI UNA REGLA. Es el mismo CSS, en el mismo orden.

   DOS COSAS QUE HAY QUE RESPETAR AL TOCAR ESTO
   1. El <link> de este archivo va DESPUES del de /assets/css/styles.css en el
      HTML. A igual peso gana la ultima regla, y de eso depende que lo propio de
      la app le siga ganando al CSS del sitio. Si se invierte el orden, se rompe.
   2. Al final esta el bloque COMPATIBILIDAD, que neutraliza adentro de la app lo
      global que trae styles.css (el reset, las reglas de `a` y de los
      encabezados). Leerlo antes de tocar cualquier cosa de ahi para abajo.

   Al editar: bumpear el ?v= del <link> en el HTML, o el cambio queda invisible
   hasta un ano por el cache immutable.
   =========================================================================== */

  :root{
    --mag:#DF3569; --mag-600:#C42A59; --mag-50:#FDEEF3;
    --violet:#6C2A88; --violet-50:#F4EDF8;
    --mint:#2FA98C; --mint-50:#E8F7F3;
    --ink:#1A1320; --slate:#6B6070; --faint:#9A8FA2;
    --paper:#FBF7F9; --card:#FFFFFF; --line:#EDE4EF;
    --stage-a:#241030; --stage-b:#48194F;
    --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, que es sólo claro. Estos dos
       tokens son los que les permiten acompañar el modo oscuro de esta página
       (se usan en el bloque COMPATIBILIDAD del final). */
    --nav-bg:rgba(255,255,255,.86); --panel-bg:rgba(255,255,255,.97);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --nav-bg:rgba(30,22,38,.92); --panel-bg:rgba(30,22,38,.98);
      --mag:#F4568A; --mag-600:#FF6E9C; --mag-50:#3A1428;
      --violet:#B984D6; --violet-50:#2A1633;
      --mint:#4FD3B0; --mint-50:#123329;
      --ink:#F6EFF8; --slate:#B4A6BC; --faint:#8B7D94;
      --paper:#140E19; --card:#1E1626; --line:#332A3B;
      --stage-a:#120817; --stage-b:#2E0F36;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
      --n-auto:#4FD3B0;  --n-auto-bg:#123329;
      --n-decl:#E2A93F;  --n-decl-bg:#3A2A0F;
      --n-med:#F2825A;   --n-med-bg:#3D1E13;
      --n-cons:#B984D6;  --n-cons-bg:#2A1633;
    }
  }
  :root[data-theme="dark"]{
    --nav-bg:rgba(30,22,38,.92); --panel-bg:rgba(30,22,38,.98);
    --mag:#F4568A; --mag-600:#FF6E9C; --mag-50:#3A1428;
    --violet:#B984D6; --violet-50:#2A1633;
    --mint:#4FD3B0; --mint-50:#123329;
    --ink:#F6EFF8; --slate:#B4A6BC; --faint:#8B7D94;
    --paper:#140E19; --card:#1E1626; --line:#332A3B;
    --stage-a:#120817; --stage-b:#2E0F36;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --n-auto:#4FD3B0;  --n-auto-bg:#123329;
    --n-decl:#E2A93F;  --n-decl-bg:#3A2A0F;
    --n-med:#F2825A;   --n-med-bg:#3D1E13;
    --n-cons:#B984D6;  --n-cons-bg:#2A1633;
  }
  :root[data-theme="light"]{
    --nav-bg:rgba(255,255,255,.86); --panel-bg:rgba(255,255,255,.97);
    --mag:#DF3569; --mag-600:#C42A59; --mag-50:#FDEEF3;
    --violet:#6C2A88; --violet-50:#F4EDF8;
    --mint:#2FA98C; --mint-50:#E8F7F3;
    --ink:#1A1320; --slate:#6B6070; --faint:#9A8FA2;
    --paper:#FBF7F9; --card:#FFFFFF; --line:#EDE4EF;
    --stage-a:#241030; --stage-b:#48194F;
    --shadow:0 1px 2px rgba(26,19,32,.06),0 8px 24px rgba(26,19,32,.06);
    --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;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    /* La tipografía de marca del sitio (Mulish, definida en styles.css como
       --font). El stack de sistema queda como respaldo si el CSS del sitio o
       Google Fonts no cargan. */
    font-family:var(--font,ui-sans-serif),system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
    padding-bottom:calc(92px + env(safe-area-inset-bottom));overflow-x:hidden;
  }
  .wrap{max-width:520px;margin:0 auto;padding:0 16px;}
  .proto{
    background:var(--violet);color:#fff;font-size:11.5px;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:7px 16px;line-height:1.4;
  }

  /* El encabezado de la página (volanta + h1 + bajada) pasó al hero del sitio el
     2026-08-03; lo que había acá —header.top, .eyebrow, .sub— quedó sin uso. */

  /* ===== ESCENARIO: la persona al centro y los adicionales alrededor ======== */
  .stage{
    position:relative;width:100%;max-width:392px;margin:14px auto 0;aspect-ratio:1;
    border-radius:24px;overflow:hidden;
    background:radial-gradient(115% 105% at 50% 6%,var(--stage-b) 0%,var(--stage-a) 74%);
  }
  .stage svg.ring{position:absolute;inset:0;width:100%;height:100%;}
  .halo{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:42%;aspect-ratio:1;border-radius:50%;background:var(--mag);
    opacity:.2;filter:blur(30px);pointer-events:none;
  }
  .slot-track{stroke:rgba(255,255,255,.15);}
  .slot-arc{stroke:var(--mint);stroke-linecap:butt;transition:stroke-dashoffset .45s cubic-bezier(.22,1,.36,1);}
  .cap-arc{stroke:rgba(255,255,255,.5);stroke-linecap:butt;transition:stroke-dashoffset .45s cubic-bezier(.22,1,.36,1);}
  .life-arc{stroke:var(--mag);stroke-linecap:round;transition:stroke-dashoffset .45s cubic-bezier(.22,1,.36,1),stroke-width .3s ease;}
  .figure{fill:rgba(255,255,255,.92);}

  /* lectura del centro: cuántos módulos puestos y el precio */
  .core{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    text-align:center;pointer-events:none;width:29%;
  }
  .core__fig{margin:0 auto 2px;display:block;}
  .core__n{font-size:11px;font-weight:800;color:rgba(255,255,255,.8);letter-spacing:.02em;line-height:1.3;}
  .core__n b{color:#fff;}

  /* nodos de los adicionales.
     UN SOLO blanco por nodo. Antes había dos superpuestos —el ícono prendía la
     cobertura y un «+» de 19px pegado al borde abría la ficha—, y con el pulgar
     el chico era imposible de embocar: se terminaba prendiendo la cobertura sin
     haber leído nunca qué cubre. Ahora todo el nodo abre la ficha y la cobertura
     se pone desde ahí, que es donde está la explicación y el capital. */
  .node{
    position:absolute;transform:translate(-50%,-50%);
    width:88px;display:flex;flex-direction:column;align-items:center;gap:5px;
    background:none;border:0;padding:0;font:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:left .45s cubic-bezier(.22,1,.36,1),top .45s cubic-bezier(.22,1,.36,1);
  }
  /* El rótulo va siempre del lado de AFUERA. Para los nodos de la mitad
     superior, "abajo del ícono" apunta al centro y el texto se montaba sobre el
     anillo (medido: 4 de 6 rótulos entraban hasta 20px dentro del gráfico). */
  .node.arriba{flex-direction:column-reverse;}
  .node__ic{
    /* position:relative porque el «+» cuelga del ÍCONO, no del nodo. Colgado del
       nodo, en los seis de arriba —donde el rótulo va arriba— el «+» aterrizaba
       encima del texto y le comía la última sílaba: "Cuidado", "Acciden". */
    position:relative;
    width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.26);
    transition:background .22s ease,border-color .22s ease,transform .22s ease;
  }
  .node__ic svg{width:26px;height:26px;fill:none;stroke:rgba(255,255,255,.88);stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;}
  .node.is-on .node__ic{background:var(--mint);border-color:var(--mint);transform:scale(1.06);}
  .node.is-on .node__ic svg{stroke:#fff;stroke-width:2;}
  .node__lb{
    font-size:11px;font-weight:700;line-height:1.2;color:rgba(255,255,255,.78);
    text-align:center;width:100%;letter-spacing:.01em;text-wrap:balance;
  }
  .node.is-on .node__lb{color:#fff;}
  /* Los colores del sello son fijos, no variables del tema: con var(--card) /
     var(--slate) en modo oscuro quedaba gris oscuro sobre el fondo oscuro del
     escenario y directamente no se veía. */
  .node__mas{
    position:absolute;top:-2px;right:-2px;width:24px;height:24px;border-radius:50%;
    background:#fff;color:#2a1b3d;border:0;box-shadow:0 2px 7px rgba(0,0,0,.45);
    font-size:15px;font-weight:900;display:grid;place-items:center;line-height:1;
    pointer-events:none;   /* el blanco táctil es el nodo entero */
  }
  .node.is-on .node__mas{background:var(--mint);color:#0f2a22;}
  .node:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:12px;}
  @media (hover:hover){
    .node:hover .node__ic{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);}
  }
  /* El mensaje salió de adentro del escenario: ahí abajo se peleaba el lugar con
     los rótulos de los dos nodos de abajo (en pantallas de 360px se tocaban), y
     además es la instrucción principal — merece tamaño de texto, no de nota. */
  .stage-msg{
    max-width:392px;margin:11px auto 0;text-align:center;
    font-size:13.5px;color:var(--slate);padding:0 10px;line-height:1.5;text-wrap:pretty;
  }
  .stage-msg b{color:var(--ink);font-weight:800;}

  /* ===== rueda de edad ==================================================== */
  .wheel-block{margin-top:16px;}
  .wheel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .label{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);}

  /* La línea del porqué. Una sola en toda la página, arriba del número del
     respaldo. Es texto de LECTURA, no de interfaz: por eso no va en versalitas
     de 10.5px como el rótulo que tiene justo abajo, que es una etiqueta de
     dato. El peso 500 es deliberado — en esta página todo lo que quiere que lo
     escuchen crece a 900 (.age-big, .cap-big, .bar__num, .pq), y una frase así
     en 900 suena a eslogan gritado. Acá el tono tiene que ser bajo. (El 500
     está cargado de verdad en el <link> de Mulish, wght@400;500;700;900.)

     EL AIRE VA EN PADDING Y NO EN MARGIN, y no es capricho: .wheel-block no
     tiene borde ni relleno arriba, así que un margin-top en el primer hijo
     COLAPSA con sus 16px y el silencio quedaría en 26px en vez de 42 — la frase
     se leería como un renglón suelto en lugar de como una pausa, que es lo
     único que la sostiene. El padding no colapsa. Y le gana al padding:revert
     del bloque COMPATIBILIDAD porque una clase pesa más que aquel :where().

     QUIETA A PROPÓSITO: sin color de acento, sin animación, sin reaccionar al
     capital. Está a cinco centímetros del botón «+» que sube el monto. Mientras
     no se mueva, es una frase; el día que se tiña o se anime con el número pasa
     a ser un empujón a gastar más en el momento de mayor carga emocional. */
  .porque{
    margin:0 0 7px;padding:26px 0 0;
    font-size:clamp(16px,4.4vw,17.5px);font-weight:500;line-height:1.35;
    letter-spacing:-.015em;color:var(--ink);text-wrap:balance;
  }
  .age-row{display:flex;align-items:center;gap:10px;margin-top:2px;}
  /* Mismo trato que .cap-big: el número grande se tiñe con el color del nivel
     de trámite. La edad también mueve el requisito —a partir de los 66 la tabla
     de Sancor es otra— y quedaba en negro, como si no tuviera nada que ver. */
  .age-big{font-size:44px;font-weight:900;letter-spacing:-.04em;line-height:1;
    font-variant-numeric:tabular-nums;color:var(--c,var(--ink));transition:color .3s ease;}
  .age-big small{font-size:15px;font-weight:700;color:var(--slate);letter-spacing:0;margin-left:3px;}
  /* Más chico que .age-big porque "$ 50.000.000" son 12 caracteres y tiene que
     convivir con los botones − / + en 375px. */
  .cap-big{font-size:clamp(25px,7.4vw,33px);font-weight:900;letter-spacing:-.035em;line-height:1.1;
    font-variant-numeric:tabular-nums;color:var(--c,var(--ink));transition:color .3s ease;}
  .pm{display:flex;gap:6px;margin-left:auto;}
  .pm button{
    width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line);
    background:var(--card);color:var(--ink);font:inherit;font-size:20px;font-weight:900;
    cursor:pointer;line-height:1;
  }
  .pm button:disabled{opacity:.35;cursor:not-allowed;}
  .wheel{
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    display:flex;align-items:flex-end;height:56px;margin-top:8px;
    cursor:grab;touch-action:pan-x;
  }
  .wheel.arrastrando{cursor:grabbing;scroll-snap-type:none;}
  .wheel::-webkit-scrollbar{display:none;}
  .wheel .spacer{flex:0 0 50%;}
  .tick{flex:0 0 26px;scroll-snap-align:center;display:grid;place-items:end center;height:100%;position:relative;cursor:pointer;}
  .tick i{display:block;width:2px;border-radius:2px;background:var(--line);height:15px;pointer-events:none;}
  .tick.dec i{height:24px;background:var(--faint);}
  .tick.cut i{height:32px;background:var(--mag);}
  .tick b{position:absolute;bottom:-3px;font-size:10px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;pointer-events:none;}
  .tick.cut b{color:var(--mag);}
  /* La rueda del capital se pinta por tramo: el cliente ve DÓNDE están los
     cortes antes de llegar, en vez de descubrirlos al pasarlos. Las marcas sin
     rótulo van al 42% para que el tramo se lea como una franja de color y no
     como 60 rayas gritando. Van después de .tick.dec porque comparten
     especificidad y acá gana el orden. */
  .tick[class*="n-"] i{background:var(--c);opacity:.42;}
  .tick.dec[class*="n-"] i{opacity:1;}
  .tick[class*="n-"] b{color:var(--c);}
  /* El primer escalón de cada tramo lleva la marca más alta: es el borde exacto
     donde cambia el trámite. */
  .tick.borde i{height:28px;opacity:1;}
  /* Los 65 de la rueda de edad son un corte propio —desde ahí se emite sólo la
     cobertura de vida— y mandan sobre el color del tramo. Va DESPUÉS de las
     reglas n-* porque comparten especificidad y acá gana el orden. */
  .tick.cut i{background:var(--mag);opacity:1;}
  .tick.cut b{color:var(--mag);}
  .wheel-axis{position:relative;height:20px;}
  .needle{position:absolute;left:50%;top:-56px;width:2px;height:56px;background:var(--mag);transform:translateX(-50%);border-radius:2px;pointer-events:none;}
  .cut-hint{font-size:12px;color:var(--slate);margin:4px 0 0;min-height:1.4em;}
  .escalon{
    display:block;margin-top:10px;padding:11px 13px;border-radius:12px;
    background:var(--violet-50);border:1px solid var(--line);border-left:3px solid var(--violet);
    font-size:12.5px;line-height:1.55;color:var(--slate);
  }
  .escalon b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;}
  .escalon[hidden]{display:none;}

  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
  .chip{
    font:inherit;font-size:13px;font-weight:700;cursor:pointer;
    border:1.5px solid var(--line);background:var(--card);color:var(--slate);
    border-radius:999px;padding:9px 14px;min-height:44px;display:inline-flex;align-items:center;
  }
  .chip[aria-pressed="true"]{border-color:var(--mint);background:var(--mint-50);color:var(--ink);}
  .chip:focus-visible,.pm button:focus-visible,.tbtn:focus-visible,.cta:focus-visible{outline:2px solid var(--mag);outline-offset:2px;}

  /* ===== resumen ========================================================== */
  h2{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin:22px 0 8px;}
  .sum{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:4px 14px;box-shadow:var(--shadow);}
  .sum__r{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
  .sum__r:last-child{border-bottom:0;}
  .sum__n{flex:1;min-width:0;}
  .sum__n b{display:block;font-weight:800;font-size:13.5px;line-height:1.3;}
  .sum__n span{display:block;font-size:11px;color:var(--faint);line-height:1.3;}
  .sum__p{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;}

  /* ===== capa de detalle ================================================== */
  .capa{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
    background:rgba(26,19,32,.6);backdrop-filter:blur(3px);}
  .capa[hidden]{display:none;}
  .capa__box{
    width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--card);
    border-radius:20px 20px 0 0;padding:18px 18px 22px;position:relative;
  }
  @media (min-width:560px){ .capa{align-items:center;} .capa__box{border-radius:20px;} }
  .capa__x{position:absolute;top:12px;right:12px;width:34px;height:34px;border:0;border-radius:50%;
    background:var(--paper);color:var(--slate);font-size:17px;cursor:pointer;line-height:1;}
  .capa__ic{width:44px;height:44px;border-radius:12px;background:var(--mint-50);display:grid;place-items:center;margin-bottom:10px;}
  .capa__ic svg{width:23px;height:23px;fill:none;stroke:var(--mint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .capa h3{font-size:19px;font-weight:900;letter-spacing:-.02em;margin:0 0 3px;padding-right:40px;line-height:1.2;}
  .capa__pol{font-size:11.5px;color:var(--faint);margin:0 0 12px;line-height:1.4;}
  .capa__txt{font-size:14px;color:var(--slate);line-height:1.6;margin:0 0 14px;text-wrap:pretty;}
  .capa__nota{font-size:12px;color:var(--faint);background:var(--paper);border-radius:10px;padding:9px 11px;margin:0 0 14px;line-height:1.5;}
  .capa__cond{font-size:11.5px;color:var(--faint);line-height:1.5;margin:0 0 10px;}
  .capa__cap{border-top:1px solid var(--line);padding-top:13px;}
  .capa__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
  .capa__val{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;}
  input[type=range]{width:100%;margin:10px 0 2px;accent-color:var(--mag);height:32px;}
  .capa__lim{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;}
  .capa__costo{margin:12px 0 0;font-size:13px;color:var(--slate);}
  .capa__costo b{color:var(--ink);font-weight:900;font-variant-numeric:tabular-nums;}
  .capa__acc{display:flex;gap:8px;margin-top:16px;}
  .capa__acc button{flex:1;min-height:48px;border-radius:999px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;border:1.5px solid var(--line);}
  .b-quitar{background:var(--card);color:var(--slate);}
  .b-listo{background:var(--mag);color:#fff;border-color:var(--mag);}

  /* ===== barra fija ======================================================= */
  .bar{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1.5px solid var(--line);
    padding:9px 16px calc(9px + env(safe-area-inset-bottom));z-index:20;box-shadow:0 -6px 20px rgba(26,19,32,.07);}
  .bar__in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px;}
  .bar__txt{flex:1;min-width:0;}
  .bar__lab{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
  .bar__num{font-size:25px;font-weight:900;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums;}
  .bar__num small{font-size:12.5px;font-weight:700;color:var(--slate);letter-spacing:0;}
  .cta{flex:none;background:var(--mag);color:#fff;border:0;border-radius:999px;padding:13px 17px;
    font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;min-height:47px;}
  .cta:hover{background:var(--mag-600);}

  /* ===== sello de trámite ================================================= */
  /* El nivel se pinta con una sola variable --c, que cada clase n-* redefine.
     Así el sello, el número grande y las marcas de la rueda comparten color sin
     repetir reglas por nivel. El verde menta es el mismo que usa el anillo para
     "protección puesta", así que leerlo como "resuelto" no hay que aprenderlo. */
  .n-auto{--c:var(--n-auto); --c-bg:var(--n-auto-bg);}
  .n-declara{--c:var(--n-decl); --c-bg:var(--n-decl-bg);}
  .n-medico{--c:var(--n-med); --c-bg:var(--n-med-bg);}
  .n-consulta{--c:var(--n-cons); --c-bg:var(--n-cons-bg);}

  .sello{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding:12px 14px;
    border-radius:13px;border:1.5px solid var(--c,var(--line));background:var(--c-bg,var(--card));
    transition:border-color .3s ease,background-color .3s ease;}
  .sello__ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
    background:var(--c,var(--line));margin-top:1px;}
  .sello__ic svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.4;
    stroke-linecap:round;stroke-linejoin:round;}
  .sello__tx{min-width:0;font-size:13px;line-height:1.5;color:var(--slate);}
  .sello__tt{display:block;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:1px;}
  .sello__nt{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--faint);}
  .sello__tx a{color:var(--mag);font-weight:800;text-decoration:underline;text-underline-offset:2px;}

  /* La salida hacia los otros dos deducibles y el simulador ya no vive acá: es
     el componente .dedu-nav de styles.css, el mismo de las otras tres páginas
     del tema. El remapeo de sus colores al modo oscuro está en el bloque
     COMPATIBILIDAD, al final de este <style>. */

  .sum__p--inc{color:var(--n-auto);font-size:12px;letter-spacing:.03em;text-transform:uppercase;}
  .legal{margin:20px 0 6px;font-size:11.5px;line-height:1.6;color:var(--faint);border-top:1px solid var(--line);padding-top:13px;}
  .legal b{color:var(--slate);font-weight:800;}
  .warn{margin-top:11px;background:var(--mag-50);border:1px solid var(--line);border-left:3px solid var(--mag);
    border-radius:0 10px 10px 0;padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--ink);}
  .tbtn{background:none;border:1.5px solid var(--line);border-radius:999px;color:var(--slate);
    font:inherit;font-size:12px;font-weight:700;padding:7px 13px;cursor:pointer;min-height:38px;}

  .skip{position:absolute;left:-9999px;}
  .skip:focus{left:8px;top:8px;z-index:40;background:var(--card);color:var(--ink);
    padding:10px 14px;border-radius:10px;border:1.5px solid var(--mag);}

  /* ===== 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;}
  .flow__bar{grid-column:1/-1;height:3px;border-radius:3px;background:var(--line);overflow:hidden;}
  .flow__bar i{display:block;height:100%;background:var(--mag);border-radius:3px;
    transition:width .3s cubic-bezier(.22,1,.36,1);}

  #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. */
  .pk{font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
    color:var(--mag);margin:0 0 6px;}
  .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;}
  .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;}

  .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);}

  .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;}

  @media (prefers-reduced-motion:reduce){ *{transition-duration:0s !important;} }

  /* ===== COMPATIBILIDAD CON EL CSS DEL SITIO ================================
     Va último a propósito: acá se corrigen las tres cosas globales que trae
     styles.css y que, si no, cambiarían cómo se ve o cómo funciona el
     cotizador. Si algo del cotizador se ve raro después de tocar styles.css,
     mirar acá primero.
     ========================================================================= */

  /* 1. styles.css trae `*{margin:0;padding:0}`. Este HTML depende de los
        márgenes que da el navegador por defecto en muchos <p>, <ul> y <h2> de
        los pasos y de las fichas. `revert` los devuelve tal como estaban.
        El `:where()` no suma especificidad: cada regla propia de la app le
        sigue ganando a esto, y el marco del sitio (nav, hero, pie) queda
        afuera, con el reset del sitio intacto. */
  :where(#cot,#flow,#capa,.bar) *{margin:revert;padding:revert;}

  /* 2. styles.css pone `scroll-behavior:smooth` en el html. El cotizador salta
        al tope al cambiar de paso: con scroll suave el salto se convierte en una
        animación y el usuario ve pasar todo el formulario. Se mantiene el
        comportamiento original. */
  html{scroll-behavior:auto;}

  /* 3. styles.css pone `a{color:inherit;text-decoration:none}`. Los links que
        estaban con el estilo del navegador (el mail del pie legal) quedarían
        indistinguibles del texto. */
  .legal a{color:var(--mag);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

  /* El nav del sitio es blanco translúcido y el menú también: con los tokens de
     esta página acompañan el modo oscuro. */
  .nav.is-scrolled{background:var(--nav-bg);border-bottom-color:var(--line);}
  .nav.is-scrolled .nav__links a:not(.btn),
  .nav.is-scrolled .nav__droplink{color:var(--slate);}
  .nav__panel,.nav__links.is-open{background:var(--panel-bg);border-color:var(--line);}
  /* Los links del dropdown los pinta styles.css con `color:var(--fg-2)!important`,
     así que no alcanza con declarar el color: hay que cambiarle el valor de
     --fg-2 adentro del panel. En claro se deja el del sitio para que el menú se
     vea igual que en las otras 42 páginas. */
  @media (prefers-color-scheme:dark){ .nav__panel{--fg-2:var(--slate);} }
  :root[data-theme="dark"] .nav__panel{--fg-2:var(--slate);}
  :root[data-theme="light"] .nav__panel{--fg-2:#463A52;}
  .nav.is-scrolled .nav__burger span{background:var(--ink);}

  /* La ficha de cada cobertura es una capa modal; el nav del sitio vive en
     z-index 100 y se le montaba encima. */
  .capa{z-index:200;}

  /* El flujo de contratación es una pantalla de formulario, no una página del
     sitio: mientras está abierto, el marco se corre del medio (su barra de
     pasos es sticky y quedaba tapada por el nav fijo). Puro CSS, sin tocar el
     JS del cotizador. */
  body:has(#flow:not([hidden])) .nav,
  body:has(#flow:not([hidden])) #hero,
  body:has(#flow:not([hidden])) .footer{display:none;}

  /* El conmutador de deducciones (.dedu-nav, en styles.css) es de tema claro.
     Sus colores salen de variables locales, así que acá se las apunta a los
     tokens de esta página, que sí acompañan el modo oscuro. Una sola regla y
     queda bien en los dos temas — el mismo truco que --nav-bg de más arriba.
     El chip del simulador va CONTORNEADO y no relleno: en oscuro --mag es un
     rosa claro y el texto blanco encima no llega al contraste mínimo. */
  .dedu-nav{
    --dn-bg:var(--card); --dn-line:var(--line); --dn-fg:var(--slate);
    --dn-accent:var(--mag-600);
    --dn-hub-bg:transparent; --dn-hub-fg:var(--mag-600); --dn-hub-line:var(--mag-600);
    --dn-here-bg:var(--violet-50); --dn-here-fg:var(--violet); --dn-here-line:var(--violet);
  }

  /* El hero ya trae el aire de arriba; la app arranca pegada a él. */
  #cot{padding-top:20px;}

  /* En el celular el hero da el contexto en dos líneas y se corre: lo que el
     visitante vino a hacer es mover la rueda, y eso tiene que asomar en la
     primera pantalla. Sin esto el hero se come 508 px y el armador arranca
     recién a los 542. */
  @media (max-width:640px){
    #hero{padding:4.7rem 0 1.3rem;}
    #hero .crumbs{margin-bottom:.7rem;}
    #hero .overline{margin-bottom:.5rem;font-size:.66rem;}
    #hero .hero__title{font-size:clamp(1.5rem,6.4vw,1.95rem);margin:.35rem 0 .6rem;}
    #hero .hero__sub{font-size:.88rem;line-height:1.5;margin-bottom:0;}
  }

  /* La nota de autoría (.tool-cr) vive en styles.css, que es sólo claro: acá se
     le remapean los tokens a los de esta página para que acompañe el modo
     oscuro, igual que se hace arriba con .nav__panel. */
  .tool-cr{--fg-2:var(--slate);--fg-3:var(--faint);--border-1:var(--line);
    --border-2:var(--line);--ink-400:var(--faint);max-width:none;}
  .tool-cr a{color:var(--mag);}

  /* ===========================================================================
     CONTENIDO LEGIBLE (.vinfo*) — agregado el 2026-08-17
     ===========================================================================
     Por qué existe este bloque: hasta hoy TODO lo que explica el producto
     —cuánto sale, qué cubre cada módulo, las siete enfermedades graves— vivía
     únicamente adentro del JS y sólo aparecía cuando el visitante tocaba un
     ícono. Un buscador leía 590 palabras de esta página, y los crawlers de IA,
     que no ejecutan JS, no leían nada de eso. Era justo el contenido escrito
     para que nos citen.

     Va DESPUÉS del bloque COMPATIBILIDAD a propósito: a igual peso gana la
     última regla, y así el reset de styles.css (`*{margin:0;padding:0}`) y sus
     reglas de encabezados y de `a` no pisan nada de acá.

     Los nombres de clase llevan prefijo `vinfo` porque ni styles.css (276
     clases) ni esta hoja (123) usan nada que empiece así — verificado. Esta
     página ya tuvo una colisión por clases cortas (`.mas`), no repetirla.
     ========================================================================= */

  .vinfo{margin-top:34px;}
  .vinfo + .vinfo{margin-top:30px;}
  .vinfo__h{font-size:1.16rem;font-weight:900;color:var(--ink);line-height:1.3;
    margin:0 0 6px;letter-spacing:-.01em;}
  .vinfo__lead{font-size:.92rem;line-height:1.6;color:var(--slate);margin:0 0 14px;
    max-width:62ch;}
  .vinfo__lead b{color:var(--ink);font-weight:700;}
  .vinfo a{color:var(--mag);text-decoration:underline;text-underline-offset:2px;}

  /* --- Qué cubre cada protección: lista de definiciones ------------------- */
  .vinfo-cob{margin:0;display:grid;gap:10px;}
  .vinfo-cob__it{background:var(--card);border:1px solid var(--line);border-radius:13px;
    padding:13px 15px;box-shadow:var(--shadow);}
  .vinfo-cob__t{margin:0 0 3px;font-size:.97rem;font-weight:800;color:var(--ink);
    line-height:1.35;}
  .vinfo-cob__tag{display:inline-block;margin-left:7px;font-size:.63rem;font-weight:800;
    letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:5px;
    vertical-align:.14em;background:var(--mint-50);color:var(--mint);}
  .vinfo-cob__p{margin:0 0 6px;font-size:.72rem;color:var(--faint);line-height:1.45;
    letter-spacing:.01em;}
  .vinfo-cob__d{margin:0;font-size:.9rem;line-height:1.58;color:var(--slate);}
  .vinfo-cob__nt{display:block;margin-top:6px;font-size:.79rem;line-height:1.5;
    color:var(--faint);}

  /* --- Tabla de referencia ----------------------------------------------- */
  .vinfo-tab{margin:0 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:var(--card);border:1px solid var(--line);border-radius:13px;
    box-shadow:var(--shadow);}
  .vinfo-tab table{border-collapse:collapse;width:100%;min-width:430px;
    font-variant-numeric:tabular-nums;}
  .vinfo-tab th,.vinfo-tab td{padding:9px 13px;text-align:right;font-size:.87rem;
    border-bottom:1px solid var(--line);white-space:nowrap;}
  .vinfo-tab thead th{font-size:.7rem;font-weight:800;letter-spacing:.07em;
    text-transform:uppercase;color:var(--faint);background:var(--paper);}
  .vinfo-tab th:first-child,.vinfo-tab td:first-child{text-align:left;
    font-weight:700;color:var(--ink);}
  .vinfo-tab td{color:var(--slate);}
  .vinfo-tab tbody tr:last-child th,.vinfo-tab tbody tr:last-child td{border-bottom:0;}

  .vinfo-note{margin:0;font-size:.79rem;line-height:1.55;color:var(--faint);}
  .vinfo-note b{color:var(--slate);font-weight:700;}

  /* --- Preguntas frecuentes ---------------------------------------------- */
  /* Van en <details> abiertos-por-clic pero con el texto SIEMPRE en el HTML:
     un <details> cerrado igual se indexa y se cita, a diferencia de lo que se
     inyecta por JS. Y el texto de acá es idéntico al del FAQPage del <head>:
     si se edita uno hay que editar el otro, o Google marca discrepancia. */
  .vinfo-faq{display:grid;gap:8px;}
  .vinfo-faq details{background:var(--card);border:1px solid var(--line);
    border-radius:13px;box-shadow:var(--shadow);overflow:hidden;}
  .vinfo-faq summary{cursor:pointer;list-style:none;padding:12px 15px;
    font-size:.94rem;font-weight:800;color:var(--ink);line-height:1.4;
    display:flex;gap:10px;align-items:flex-start;}
  .vinfo-faq summary::-webkit-details-marker{display:none;}
  .vinfo-faq summary::after{content:'+';margin-left:auto;flex:0 0 auto;
    font-weight:700;color:var(--mag);font-size:1.15rem;line-height:1;
    transition:transform .18s ease;}
  .vinfo-faq details[open] summary::after{content:'−';}
  .vinfo-faq summary:focus-visible{outline:2px solid var(--mag);outline-offset:-2px;}
  .vinfo-faq__a{margin:0;padding:0 15px 14px;font-size:.9rem;line-height:1.6;
    color:var(--slate);}
  .vinfo-faq__a b{color:var(--ink);font-weight:700;}
  @media (prefers-reduced-motion:reduce){
    .vinfo-faq summary::after{transition:none;}
  }