/* ============================================================================
   FINANZAS CON SHIR — hoja fiel al sitio en producción.
   Todos los valores salen medidos del sitio real (estilos en línea del origen
   + estilos computados a 1920px). No hay valores estimados.
   ============================================================================ */

:root{
  --mag:#CD0046; --rosa:#DA1C4B; --tinta:#0E2F44; --navy:#1A3A52;
  --amar:#FFCA2B; --ambar:#F59E0B; --blanco:#FFFFFF;
  --menu:#00072B; --gris:#666; --gris2:#888; --linea:#E0E0E0;
  --inter:'Inter',sans-serif; --anton:'Anton',sans-serif; --urb:'Urbanist',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--inter);color:var(--tinta);background:#fff;-webkit-font-smoothing:antialiased}
/* Ninguna linea termina con una palabra sola colgando: el navegador reparte el
   ultimo renglon. Vale para todo el texto corrido del sitio. */
p,li,figcaption,.intro,.ph__desc,summary{text-wrap:pretty}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amar);color:var(--tinta);
  padding:12px 18px;font-weight:700;border-radius:0 0 10px 0}
.saltar:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--amar);outline-offset:2px}

/* ───────────────────────── HEADER (89px, medido) ───────────────────────── */
.cab{position:sticky;top:0;z-index:100;background:#fff;width:100%}
.cab__int{max-width:1400px;margin:0 auto;padding:19.5px 0;display:flex;align-items:center;gap:0}
@media (max-width:1440px){.cab__int{padding:20px 5%}}
.marca{display:flex;align-items:center;gap:13px;flex:0 0 auto;margin-right:34px}
/* La marca en la web es solo el texto. La firma manuscrita quedo para ebooks,
   firmas de mail y cierres de pagina (pedido de Shir, 22-sep-2026). */
.marca span{font-family:var(--inter);font-size:20px;font-weight:600;color:var(--mag);
  letter-spacing:.5px;text-transform:uppercase;line-height:1;white-space:nowrap}
.menu{display:none;list-style:none;margin:0;padding:0;align-items:center;gap:30px;margin-right:auto}
.menu>li{position:relative}
.menu>li>a{font-family:var(--urb);font-size:15px;font-weight:700;text-transform:uppercase;
  color:var(--menu);display:inline-flex;align-items:center;gap:14px;white-space:nowrap;padding:12px 0}
.menu>li>a:hover,.menu>li.act>a{color:var(--mag)}
.menu .flecha{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:5px solid currentColor;transition:transform .18s}
.menu>li:hover .flecha{transform:rotate(180deg)}
.sub{position:absolute;top:100%;left:-14px;min-width:262px;background:#fff;border-radius:14px;
  box-shadow:0 18px 44px rgba(14,47,68,.16);padding:10px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}
.menu>li:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:10px 14px;border-radius:9px;font-size:14px;font-weight:500;color:var(--tinta)}
.sub a:hover{background:#F7F9FB;color:var(--mag)}
.cta-cab{font-family:var(--urb);font-size:15px;font-weight:900;text-transform:uppercase;
  background:var(--mag);color:#fff;padding:12px 24px;border-radius:30px;
  display:none;align-items:center;gap:9px;white-space:nowrap;flex:0 0 auto;transition:.18s}
.cta-cab:hover{background:var(--rosa)}
.burger{margin-left:auto;width:44px;height:44px;border:0;background:none;display:flex;flex-direction:column;
  justify-content:center;gap:5px;cursor:pointer;padding:0}
.burger span{height:2.5px;background:var(--tinta);border-radius:2px;display:block}
.movil{display:none;border-top:1px solid #eee;padding:8px 5% 20px}
.movil.abierto{display:block}
/* La cabecera es sticky: con el menu abierto y un grupo desplegado median 4.026 px
   en un iPhone de 844 y bajar la pagina no movia el menu (22-sep-2026). Ahora el
   menu scrollea adentro y la pagina de atras queda quieta. */
.movil.abierto{max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
/* Solo en html, NUNCA en body (26-sep-2026): con body{overflow:hidden} el body pasa a ser
   su propia caja de scroll, la cabecera sticky se pega a ESA caja (que esta en 0) y el menu
   abierto a mitad de pagina quedaba 14.000 px arriba, fuera de pantalla, con todo congelado. */
html:has(.movil.abierto){overflow:hidden}
/* con el menu abierto, WhatsApp, "volver arriba" y la franja de captura tapaban el pie del menu (28-sep-2026) */
html:has(.movil.abierto) .wa,html:has(.movil.abierto) .arriba,html:has(.movil.abierto) .franja{display:none}
.movil details summary span{transition:transform .2s ease;font-size:18px;line-height:1}
.movil details[open] summary span{transform:rotate(45deg)}
.burger span{transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.movil a{display:block;padding:13px 2px;font-weight:600;font-size:15px;border-bottom:1px solid #f2f2f2}
.movil details summary{padding:13px 2px;font-weight:600;font-size:15px;cursor:pointer;list-style:none;
  border-bottom:1px solid #f2f2f2;display:flex;justify-content:space-between}
.movil details summary::-webkit-details-marker{display:none}
.movil .adentro a{padding-left:16px;font-weight:500;color:var(--gris)}
.movil .cta-mov{margin-top:16px;background:var(--mag);color:#fff;text-align:center;border-radius:30px;
  padding:16px;font-weight:900;text-transform:uppercase;font-family:var(--urb);border:0}

/* ───────────── botones (medidas exactas del origen) ───────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:12px;
  font-family:var(--inter);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;line-height:1.5;
  transition:transform .18s,box-shadow .18s,background .18s;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn--hero{background:var(--mag);color:#fff;padding:20px 45px;font-size:16px}
.btn--grande{background:var(--mag);color:#fff;padding:22px 60px;font-size:18px;
  box-shadow:0 20px 50px rgba(205,0,70,.45)}
.btn--tarjeta{padding:14px;font-size:14px;letter-spacing:.5px;gap:8px;width:100%;line-height:1.2}
/* 28-sep-2026: .btn--mag/--tinta/--amar solo fijan color, no padding; sin esto
   quedan en 24-25px de alto, bajo el minimo tactil de 28px. Regla general para
   cubrir cualquier combinacion .btn que no traiga su propio padding. */
.btn:not(.btn--hero):not(.btn--grande):not(.btn--tarjeta):not(.btn--linea){padding:14px 28px}
.btn--mag{background:var(--mag);color:#fff}
.btn--tinta{background:var(--tinta);color:#fff}
.btn--amar{background:var(--amar);color:var(--tinta)}
.btn--linea{background:none;color:#fff;border:2px solid rgba(255,255,255,.3);padding:16px 34px;font-size:14px;
  letter-spacing:1px;border-radius:12px}
.btn--linea:hover{background:rgba(255,255,255,.08)}

/* eyebrow: Inter 13px 700 #CD0046 ls2px mb16 */
.ceja{font-family:var(--inter);font-size:13px;color:var(--mag);font-weight:700;margin-bottom:16px;
  letter-spacing:2px;text-transform:uppercase}
.ceja--amar{color:var(--amar)}

/* títulos: Anton 70px 600 uppercase ls1.5px */
/* `text-wrap:balance` reparte las lineas parejo cuando un titular se parte
   solo, en vez de dejar una palabra colgando en el ultimo renglon. Los <br>
   escritos a mano se respetan igual. */
.tit{font-family:var(--anton);font-size:70px;font-weight:600;line-height:1.2;margin-bottom:20px;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--tinta);text-wrap:balance}
.tit--blanco{color:#fff}
.c-mag{color:var(--mag)} .c-amar{color:var(--amar)} .c-navy{color:var(--navy)} .c-ambar{color:var(--ambar)}
.bajada{font-family:var(--inter);font-size:18px;color:var(--gris);line-height:1.8;max-width:700px;
  margin:0 auto;text-wrap:pretty}
.bajada--claro{color:rgba(255,255,255,.7)}

/* ═════════════════ S1 · HERO ═════════════════ */
.s1{background-color:var(--navy);padding:30px 5% 0;width:100%;overflow:hidden}
/* Las columnas van en fr y no en 60%/40%: con `gap:80px` los dos porcentajes
   sumaban 1280 adentro de un contenedor de 1200 y el grid se desbordaba 80px
   hacia la derecha. Nadie lo veia porque `overflow:hidden` lo tapaba. */
/* La foto es CUADRADA: su alto no puede pasar del ancho de su columna. Con
   la columna en 555px la foto quedaba 92px por debajo del techo del texto y
   la home se veia coja al lado de las otras. Ahora la columna de la foto es
   la ancha (1fr contra .9fr) y es ella la que fija el alto de la fila. */
.s1__grid{max-width:1400px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1fr);gap:40px;
  width:100%;align-items:end}
/* `align-self:center` reparte el aire sobrante arriba y abajo del texto. Con
   `end` quedaba todo junto arriba: eran 141px de navy vacio sobre la ceja. */
.s1__texto{padding:0 0 34px;align-self:center}
.s1 h1{font-size:70px;font-weight:600;color:#fff;line-height:1.1;margin-bottom:26px;
  text-transform:uppercase;letter-spacing:1.5px;font-family:var(--anton)}
.s1__desc{font-size:18px;color:rgba(255,255,255,.78);line-height:1.8;margin-bottom:36px;
  max-width:620px;font-family:var(--inter);font-weight:400}
.s1__sellos{font-size:13px;color:rgba(255,255,255,.35);margin-top:16px;font-family:var(--inter)}
.s1__img{display:flex;justify-content:center;align-items:flex-end}
.s1__img img{width:100%;max-width:740px;height:auto;max-height:780px;object-fit:contain;object-position:bottom}

/* ═════════════════ S2 · CAMINO (4 pasos) ═════════════════ */
.s2{background:#fff;padding:100px 5%;width:100%}
.s2__int{max-width:1400px;margin:0 auto}
.s2__cab{text-align:center;margin-bottom:60px}
.s2__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.paso{position:relative;border-radius:20px;overflow:hidden;min-height:500px;display:block;
  box-shadow:0 10px 30px rgba(0,0,0,.15);transition:transform .25s,box-shadow .25s}
.paso:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(0,0,0,.22)}
.paso__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.paso__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.75) 100%)}
.paso__cont{position:relative;z-index:2;padding:35px 25px;height:100%;min-height:500px;display:flex;
  flex-direction:column;justify-content:space-between}
.paso__n{align-self:flex-start;background:var(--amar);color:var(--tinta);padding:8px 16px;border-radius:12px;
  font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-family:var(--inter)}
.paso__pie{margin-top:auto}
.paso h3{font-size:28px;font-weight:400;color:#fff;margin-bottom:14px;line-height:1.2;
  text-transform:uppercase;font-family:var(--anton);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.paso p{font-size:15px;color:rgba(255,255,255,.85);line-height:1.6;margin-bottom:22px;font-family:var(--inter)}
.paso__btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--tinta);
  padding:12px 22px;border-radius:30px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;font-family:var(--inter)}

/* ═════════════════ S3 · DIFERENCIAL (3 pilares) ═════════════════ */
.s3{padding:100px 5%;background-color:#fff;width:100%}
.s3__int{max-width:1200px;margin:0 auto}
.s3__cab{text-align:center;margin-bottom:60px}
.s3__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.pilar{background:#fff;border:2px solid var(--linea);border-radius:20px;padding:45px 35px;
  text-align:center;min-height:380px;display:flex;flex-direction:column}
.circ{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin:0 auto 28px;flex-shrink:0}
.circ--mag{background:linear-gradient(135deg,var(--mag),var(--rosa));box-shadow:0 10px 30px rgba(205,0,70,.25)}
.circ--amar{background:linear-gradient(135deg,var(--amar),#F0A500);box-shadow:0 10px 30px rgba(255,202,43,.3)}
/* los generadores escriben circ--nav y el CSS definia solo circ--navy: uno de
   cada tres circulos de icono salia sin fondo. Valen los dos nombres. */
.circ--navy,.circ--nav{background:linear-gradient(135deg,var(--navy),var(--tinta));box-shadow:0 10px 30px rgba(26,58,82,.25)}
/* EL ICONO DE ADENTRO. Los <svg> de `ico()` vienen con stroke="currentColor",
   asi que heredaban el color del texto de la tarjeta, que es navy. Sobre el
   circulo magenta daba 2,44:1 y sobre el navy 1,17:1: el icono no se veia.
   Se fija el color por variante y currentColor resuelve stroke y fill juntos.
   La regla de `.circ svg` existe para ganarle al `stroke="white"` que algunas
   piezas traen escrito en el atributo: un atributo de presentacion pierde
   contra cualquier selector CSS. Sin eso, el amarillo del home seguia con el
   icono blanco sobre fondo amarillo.
   Los colores van FIJOS y no con var(--tinta): el fondo del circulo es el
   mismo en los dos temas, pero --tinta se da vuelta a #E8EDF2 en el oscuro y
   el icono del circulo amarillo salia claro sobre amarillo en /mercados. */
.circ--mag,.circ--navy,.circ--nav{color:#fff}
.circ--amar{color:#0E2F44}
.circ svg{stroke:currentColor}
.etiq{display:inline-block;padding:5px 16px;border-radius:15px;margin-bottom:16px;font-size:12px;
  font-weight:700;font-family:var(--inter);letter-spacing:.3px}
.etiq--mag{background:rgba(205,0,70,.08);color:var(--mag)}
.etiq--amar{background:rgba(255,202,43,.16);color:#9A6B00}
.etiq--navy{background:rgba(26,58,82,.08);color:var(--navy)}
.pilar h3{font-size:22px;color:var(--tinta);font-weight:700;margin-bottom:20px;
  font-family:var(--inter);line-height:1.3}
.pilar p{font-size:16px;color:var(--gris);line-height:1.8;font-family:var(--inter);flex-grow:1}

/* ═════════════════ S4 · SERVICIOS (navy) ═════════════════ */
.s4{padding:100px 5%;background-color:var(--navy);width:100%}
.s4__int{max-width:1200px;margin:0 auto}
.s4__cab{text-align:center;margin-bottom:60px}
.s4__f1{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
.s4__f2{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.serv{background:#fff;border-radius:20px;padding:40px 32px;display:flex;flex-direction:column;position:relative}
.serv__badge{position:absolute;top:20px;right:20px;color:#fff;padding:5px 12px;border-radius:10px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-family:var(--inter)}
.badge--mag{background:var(--mag)} .badge--amar{background:var(--amar);color:var(--tinta)}
.badge--navy{background:var(--tinta)}
.serv__ico{margin-bottom:24px;color:var(--mag)}
.serv h3{font-size:22px;color:var(--tinta);font-weight:700;margin-bottom:14px;text-transform:uppercase;
  font-family:var(--inter);line-height:1.2}
.serv p{font-size:15px;color:var(--gris);line-height:1.7;margin-bottom:28px;font-family:var(--inter);flex-grow:1}
.s4__pie{text-align:center;margin-top:48px}
.link-blanco{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--inter);
  font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.link-blanco:hover{color:var(--amar)}

/* ═════════════════ S5 · NÚMEROS ═════════════════ */
.s5{padding:100px 5%;background-color:#fff;width:100%}
.s5__int{max-width:1200px;margin:0 auto}
.s5__cab{text-align:center;margin-bottom:60px}
.s5__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:35px;max-width:860px;margin:0 auto}
.metr{background:#fff;border:2px solid #F0F0F0;border-radius:24px;padding:56px 44px;text-align:center}
.metr .circ{width:70px;height:70px;margin:0 auto 28px}
.metr h3{font-size:72px;font-weight:900;margin-bottom:14px;font-family:var(--anton);line-height:1.2}
.metr__t{font-size:18px;color:var(--tinta);font-weight:700;margin:0 0 12px;font-family:var(--inter);line-height:1.4}
.metr__s{font-size:14px;color:var(--gris2);margin:0;font-family:var(--inter);line-height:1.6}

/* ═════════════════ S6 · HERRAMIENTAS ═════════════════ */
.s6{padding:100px 5%;background-color:#fff;width:100%}
.s6__int{max-width:1200px;margin:0 auto}
.s6__cab{text-align:center;margin-bottom:60px}
.s6__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.herr{background:#fff;border:2px solid var(--linea);border-radius:20px;padding:44px 32px;
  display:flex;flex-direction:column;text-align:center}
.herr h3{font-size:20px;color:var(--tinta);font-weight:700;margin-bottom:14px;
  font-family:var(--inter);line-height:1.3}
.herr p{font-size:15px;color:var(--gris);line-height:1.7;margin-bottom:28px;font-family:var(--inter);flex-grow:1}

/* ═════════════════ S7 · TESTIMONIOS ═════════════════ */
.s7{padding:100px 5%;background-color:#fff;width:100%}
.s7__int{max-width:1200px;margin:0 auto}
.s7__cab{text-align:center;margin-bottom:60px}
.s7__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{background:#fff;border:2px solid #E8E8E8;border-radius:20px;padding:36px 32px;
  display:flex;flex-direction:column}
.estrellas{display:flex;gap:3px;margin-bottom:20px}
.testi p.cita{font-size:15px;color:var(--tinta);line-height:1.8;margin-bottom:28px;
  font-family:var(--inter);font-style:italic;flex-grow:1}
.testi__quien{display:flex;align-items:center;gap:14px}
.ini{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;font-weight:700;font-family:var(--inter);flex-shrink:0}
.ini--mag{background:var(--mag)} .ini--navy{background:var(--tinta)}
.testi h4{font-size:15px;color:var(--tinta);font-weight:700;margin:0 0 3px;font-family:var(--inter)}
.testi__rol{font-size:13px;color:var(--gris2);margin:0;font-family:var(--inter)}

/* ═════════════════ S8 · CTA FINAL ═════════════════ */
.s8{background-color:var(--navy);padding:100px 5%;width:100%;text-align:center}
.s8__int{max-width:900px;margin:0 auto}
.s8 p.intro{font-size:18px;color:rgba(255,255,255,.7);line-height:1.8;margin-bottom:36px;font-family:var(--inter)}
.s8__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:44px}
.s8__pills div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;
  padding:10px 20px;display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;
  font-weight:600;font-family:var(--inter)}
.s8__fino{font-size:14px;color:rgba(255,255,255,.35);margin-top:20px;font-family:var(--inter)}

/* ═════════════════ PIE ═════════════════ */
.pie{background-color:var(--navy);padding:70px 5% 30px;color:rgba(255,255,255,.7);font-family:var(--inter)}
.pie__int{max-width:1400px;margin:0 auto;position:relative;z-index:1}
.pie__cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr 1.35fr;gap:40px}
.pie__col a{display:block;padding:6px 0;font-size:13.5px;line-height:1.45;transition:.15s;
  color:rgba(255,255,255,.62)}
.pie__col a:hover{color:#fff;transform:translateX(3px)}
.pie__col a:last-child{color:rgba(255,255,255,.42);font-weight:600}
.pie__col a:last-child:hover{color:var(--amar)}
.pie__marca{font-family:var(--anton);font-size:26px;color:#fff;text-transform:uppercase;letter-spacing:1px;
  margin-bottom:18px;display:block}
.pie__marca-col p,.pie__news p{font-size:14px;line-height:1.75;max-width:330px}
.pie h4{color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:18px}
/* Las redes. Los glifos son de relleno, por eso van con `ico_marca`. */
.pie__redes{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.pie__red{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);transition:.18s}
.pie__red:hover{background:var(--mag);border-color:var(--mag);color:#fff;transform:translateY(-2px)}
.pie__dato{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:14.5px}
.pie__dato a{text-decoration:underline;text-underline-offset:3px}
.pie input{width:100%;padding:13px;border-radius:10px;border:0;margin:12px 0;font-family:inherit;font-size:15px}
/* El cierre del pie va CENTRADO, no alineado a la izquierda.
   La leyenda de la CNV y el copyright son texto institucional corto debajo de
   cuatro columnas anchas: pegados al margen izquierdo quedaban colgando de una
   esquina, con medio ancho de pie vacio al lado. Centrado se lee como el
   remate del bloque, que es lo que es. `max-width` para que la leyenda no se
   estire a 1400px y quede en un solo renglon finito de punta a punta. */
/* .55 y no .45 en la leyenda, el copyright y los links de abajo: a .45 daban
   4,03:1 sobre el navy del pie, abajo del minimo de 4,5. Son textos de 12,5px,
   asi que no zafan por tamaño. A .55 dan 5,27 sobre navy y 6,13 sobre el pie
   oscuro de /mercados. Y justo ahi viven la matricula de la CNV y los links
   legales, que son los que menos conviene que cuesten leer. */
.pie__legal{border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:24px;
  font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.55);
  text-align:center;max-width:900px;margin-left:auto;margin-right:auto}
.pie__abajo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;
  border-top:1px solid rgba(255,255,255,.09);margin-top:22px;padding-top:20px}
.pie__copy{font-size:12.5px;color:rgba(255,255,255,.55);margin:0}
.pie__abajo-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
.pie__abajo-links a{font-size:12.5px;color:rgba(255,255,255,.55);transition:.15s}
.pie__abajo-links a:hover{color:var(--amar)}

.wa{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25D366;
  color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(37,211,102,.45);
  z-index:120;transition:transform .2s}
.wa:hover{transform:scale(1.08)}
.wa svg{width:29px;height:29px}

/* Volver arriba. Va en la misma columna que el de WhatsApp pero por encima, no
   al lado: dos botones flotantes pegados en la misma linea se tocan en mobile.
   Aparece recien cuando bajaste pantalla y media (lo decide el JS del pie). */
.arriba{position:fixed;right:22px;bottom:90px;width:46px;height:46px;border-radius:50%;
  background:#fff;color:var(--tinta);border:1px solid var(--linea);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(14,47,68,.16);
  z-index:120;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,transform .25s,visibility .25s,background .2s,color .2s}
.arriba--on{opacity:1;visibility:visible;transform:none}
.arriba:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.arriba svg{width:20px;height:20px}
@media (max-width:768px){
  .arriba{right:18px;bottom:82px;width:42px;height:42px}
  .arriba svg{width:18px;height:18px}
}

/* ══════════════════ BREAKPOINTS (los del sitio real) ══════════════════ */
@media (min-width:1200px){ .menu{display:flex} .cta-cab{display:inline-flex} .burger{display:none} }

/* De 1200 para arriba el hero deja de reservar el 5% de cada lado y usa 40px
   fijos. El 5% se comia 144px a 1440 y esa era la plata que le faltaba a la
   columna del titular: con el 5% puesto, agrandar la foto solo se podia
   haciendo mas angosto el texto, y "Es no tener un plan." (625px) se partia.
   El contenedor de adentro sigue topeado en 1400, asi que en pantallas muy
   anchas el hero no se estira: se centra igual que el resto del sitio. */
@media (min-width:1200px){
  .s1,.ph{padding-left:40px;padding-right:40px}
}

/* Franja de escritorio angosto: entre 1025 y 1400 la columna del titular no da
   para "Es no tener un plan." a 70px (593px de linea contra 562 de columna a
   1280). A 64px entra y el hero no se parte de mas. Arriba de 1400 vuelve a 70. */
@media (min-width:1025px) and (max-width:1400px){
  .s1 h1,.ph h1{font-size:64px}
}

@media (max-width:1024px){
  .cab__int{padding:16px 5%}
  .s1{padding:60px 5% 0}
  .s1__grid{grid-template-columns:1fr;gap:0;text-align:center;align-items:center}
  .s1__texto{order:1;padding-top:0;padding-bottom:26px;align-self:auto}
  .s1__img{order:2;justify-content:center}
  .s1__img img{max-width:430px;max-height:460px}
  .s1 h1{font-size:56px}
  .s1__desc{font-size:17px;max-width:560px;margin-left:auto;margin-right:auto}
  .btn--hero{padding:18px 36px;font-size:15px}
  .s2,.s3,.s4,.s5,.s6,.s7,.s8{padding:80px 5%}
  .tit{font-size:54px}
  .s2__grid{grid-template-columns:repeat(2,1fr)}
  .s3__grid{grid-template-columns:1fr;gap:24px}
  .pilar{min-height:auto}
  .s4__f1,.s4__f2{grid-template-columns:1fr;max-width:100%}
  .s6__grid{grid-template-columns:1fr;gap:24px}
  .s7__grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .s8 p.intro{font-size:17px}
  .pie__cols{grid-template-columns:1fr;gap:34px}
}

@media (max-width:768px){
  .s1{padding:40px 5% 0}
  .s1 h1{font-size:36px;letter-spacing:1px;margin-bottom:20px}
  .s1__desc{font-size:16px;max-width:100%;margin-bottom:26px;line-height:1.65}
  .s1__img img{max-width:330px;max-height:350px}
  .btn--hero{width:100%;justify-content:center;padding:18px 28px;font-size:14px}
  .s2,.s3,.s4,.s5,.s6,.s7,.s8{padding:64px 5%}
  .tit{font-size:40px}
  .s2__grid{grid-template-columns:1fr;gap:20px}
  .paso,.paso__cont{min-height:400px}
  .s5__grid{grid-template-columns:1fr;gap:20px;max-width:100%}
  .s7__grid{grid-template-columns:1fr;gap:16px}
  .testi{padding:28px 24px}
  .s8__pills{flex-direction:column;align-items:center}
  .btn--grande{width:100%;justify-content:center;padding:20px 28px;font-size:15px}
}

@media (max-width:480px){
  .s1{padding:30px 5% 0}
  .s1 h1{font-size:30px}
  .s1__img img{max-width:270px;max-height:290px}
  .s2,.s3,.s4,.s5,.s6,.s7,.s8{padding:56px 5%}
  .tit{font-size:32px}
  .paso,.paso__cont{min-height:360px}
  .btn--grande{font-size:13px;letter-spacing:1px}
  .metr h3{font-size:56px}
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE-HERO de páginas internas (medido: alto 620, H1 Anton 70/1.2)
   ════════════════════════════════════════════════════════════════════════ */
.ph{background-color:var(--navy);padding:30px 5% 0;width:100%;overflow:hidden}
.ph__grid{max-width:1400px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1fr);gap:40px;
  width:100%;align-items:end}
.ph__texto{padding:0 0 34px;align-self:center}
.ph h1{font-size:70px;font-weight:600;color:#fff;line-height:1.15;margin-bottom:22px;
  text-transform:uppercase;letter-spacing:1.5px;font-family:var(--anton)}
.ph__desc{font-size:18px;color:rgba(255,255,255,.78);line-height:1.8;margin-bottom:34px;
  max-width:640px;font-family:var(--inter)}
.ph__img{display:flex;justify-content:center;align-items:flex-end}
.ph__img img{width:100%;max-width:740px;height:auto;max-height:780px;object-fit:contain;object-position:bottom}
/* ESPEJO: la foto a la izquierda y el texto a la derecha. Lo pidio Julian para
   /servicios, /seguros-y-proteccion y /planificacion-de-retiro. Se hace con
   `order` y no cambiando el orden del HTML: primero el <h1>, despues la foto,
   que es como lo quiere leer un lector de pantalla y como lo indexa Google. */
.ph--espejo .ph__grid{grid-template-columns:minmax(0,1fr) minmax(0,.94fr)}
.ph--espejo .ph__img{order:1}
.ph--espejo .ph__texto{order:2}

/* ════════════════ HERO CON FOTO DE AMBIENTE ════════════════════════════
   Algunas fotos vienen con su escenario —la oficina, la ventana, el
   escritorio— y no como silueta sobre transparente. Esas no se pegan encima
   del hero: SON el fondo del hero, enmascaradas hacia el lado del texto. Una
   silueta siempre deja un borde contra el fondo; un degradado de mascara, no.

   El hero toma un gris muy claro sacado de la propia foto y la tipografia se
   da vuelta a navy. La alternativa era dejar el navy y ponerle un velo encima
   a la foto, pero eso deja a Shir a oscuras en su propia foto: se descarto el
   8-sep. Los colores van escritos y no en variables a proposito: si tomaran
   `--tinta` o `--navy`, el tema noche los daria vuelta y quedaria texto claro
   sobre fondo claro. */
.ph--foto{position:relative;padding:30px 40px 0;overflow:hidden;
  /* cada pagina las pisa en su <section>; ver `FONDOS` en hero_fotos.py */
  --foto-fondo:#e9edf1;   /* el gris que acompaña a esa foto           */
  --foto-borde:40%;       /* donde arranca (o termina) la foto         */
  --foto-zoom:1;          /* cuanto se acerca, cuando la foto es lejana*/
  --foto-texto:.66fr;     /* el ancho que le queda a la columna de texto*/
  background:var(--foto-fondo)}
.ph--foto .ph__foto{position:absolute;top:0;right:0;bottom:0;left:var(--foto-borde);z-index:0}
.ph--foto .ph__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--foto-zoom));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 12%,rgba(0,0,0,.88) 32%,#000 46%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 12%,rgba(0,0,0,.88) 32%,#000 46%)}
.ph--foto .ph__grid{position:relative;z-index:2;
  grid-template-columns:minmax(0,var(--foto-texto)) minmax(0,1fr);
  min-height:660px;align-items:center;gap:40px}
.ph--foto .ph__texto{padding:56px 0;align-self:center}
.ph--foto .ph__desc{max-width:520px;color:#4a5b68}
.ph--foto h1{color:#0E2F44}
.ph--foto .c-amar{color:#CD0046}
.ph--foto .ceja--amar{color:#9a6c00}
html[data-oscuro] .ph--foto,html[data-tema="azul"] .ph--foto{background:var(--foto-fondo)}

/* espejo: la foto entra por la izquierda y el texto va a la derecha */
.ph--foto.ph--espejo .ph__foto{left:0;right:var(--foto-borde)}
.ph--foto.ph--espejo .ph__foto img{
  -webkit-mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.3) 12%,rgba(0,0,0,.88) 32%,#000 46%);
          mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.3) 12%,rgba(0,0,0,.88) 32%,#000 46%)}
.ph--foto.ph--espejo .ph__grid{grid-template-columns:minmax(0,1fr) minmax(0,var(--foto-texto))}
/* `order` no sirve aca: la foto esta posicionada en absoluto y no es un item
   de la grilla, asi que el unico hijo es el texto y siempre cae en la columna
   1. Hay que mandarlo a la 2 a mano, o queda escrito encima de la foto. */
.ph--foto.ph--espejo .ph__texto{grid-column:2}

@media (max-width:1024px){
  /* En una columna la foto no puede entrar de costado: va abajo del texto, a
     lo ancho, y se disuelve hacia arriba en vez de hacia el costado. */
  .ph--foto{padding:0}
  .ph--foto .ph__foto,.ph--foto.ph--espejo .ph__foto{left:0;right:0;top:auto;height:340px}
  .ph--foto .ph__foto img{transform:none}
  .ph--foto .ph__foto img,.ph--foto.ph--espejo .ph__foto img{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 22%,#000 46%);
            mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 22%,#000 46%)}
  .ph--foto .ph__grid,.ph--foto.ph--espejo .ph__grid{grid-template-columns:1fr;min-height:0}
  .ph--foto .ph__texto,.ph--foto.ph--espejo .ph__texto{grid-column:1;padding:56px 5% 360px;text-align:center}
  .ph--foto .ph__desc{margin-left:auto;margin-right:auto}
}
@media (max-width:480px){
  .ph--foto .ph__foto,.ph--foto.ph--espejo .ph__foto{height:280px}
  .ph--foto .ph__texto,.ph--foto.ph--espejo .ph__texto{padding:44px 5% 300px}
}

/* ── cuando al hero lo sigue una onda ──────────────────────────────────────
   Sin esto la foto termina 90px arriba del blanco y su borde desvanecido
   queda flotando sobre el navy. Es lo que Julian marco con el circulo rojo
   en /servicios el 8-sep.
   El hero deja 90px extra de navy abajo, la onda se sube encima y pierde su
   fondo propio —lo que se ve detras pasa a ser el navy del hero— y la foto
   baja esos mismos 90px. Asi el corte de la foto cae justo en el borde de
   abajo de la onda, la unica linea donde la onda es blanca de lado a lado
   (el pico mas bajo de la curva llega a y=69 de 90). El alto total de la
   pagina no cambia: lo que se agrega de padding se descuenta del margen. */
.ph:has(+ .corte){padding-bottom:90px}
.ph:has(+ .corte) + .corte{margin-top:-90px;position:relative;background:transparent}
.ph:has(+ .corte) .ph__img img{margin-bottom:-90px}
.ph--simple .ph__grid{grid-template-columns:1fr;text-align:center;max-width:900px}
.ph--simple .ph__texto{padding-bottom:70px}
.ph--simple .ph__desc{margin-left:auto;margin-right:auto;max-width:720px}

.sec{padding:100px 5%;width:100%;background:#fff}
.sec--navy{background-color:var(--navy)}
.sec--alto{padding:120px 5%}
.sec__int{max-width:1200px;margin:0 auto}
.sec__int--ancho{max-width:1400px}
.sec__int--angosto{max-width:900px}
.sec__cab{text-align:center;margin-bottom:60px}

.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pasoN{background:#fff;border:2px solid var(--linea);border-radius:20px;padding:40px 28px;text-align:center}
.pasoN.destacado{background:var(--tinta);border-color:var(--tinta)}
.pasoN__n{font-family:var(--anton);font-size:46px;color:var(--amar);line-height:1;margin-bottom:14px}
.pasoN h3{font-size:17px;font-weight:700;color:var(--tinta);margin-bottom:12px;font-family:var(--inter);
  text-transform:uppercase;letter-spacing:.4px}
.pasoN p{font-size:14.5px;color:var(--gris);line-height:1.7;font-family:var(--inter)}
.pasoN.destacado h3{color:#fff}
.pasoN.destacado p{color:rgba(255,255,255,.75)}

.faq{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq details{background:#fff;border:2px solid var(--linea);border-radius:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-size:16px;font-weight:700;
  color:var(--tinta);font-family:var(--inter);display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mag);font-size:24px;font-weight:400;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 26px 24px;font-size:15.5px;color:var(--gris);line-height:1.8;font-family:var(--inter)}
.faq__nota{text-align:center;margin-top:30px;font-size:14px;color:var(--gris2);font-family:var(--inter)}

.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--gris);line-height:1.7;
  font-family:var(--inter)}
.checks svg{flex:0 0 auto;margin-top:4px;color:var(--mag)}
.checks--claro li{color:rgba(255,255,255,.82)}
.checks--claro svg{color:var(--amar)}

/* El aviso de la CNV. Tenia margin:36px auto 0, o sea CERO abajo: quedaba
   pegado al borde de la banda que venia despues. Ahora respira arriba y abajo. */
.aviso{border-left:4px solid var(--mag);background:rgba(205,0,70,.05);border-radius:0 14px 14px 0;
  padding:24px 28px;font-size:14px;color:var(--gris);line-height:1.8;font-family:var(--inter);
  max-width:1000px;margin:40px auto 32px;text-wrap:pretty}
.aviso strong{color:var(--tinta)}
.aviso--amar{border-left-color:var(--amar);background:rgba(255,202,43,.09)}

/* Cuando el aviso cae entre dos bloques navy, la franja blanca alrededor
   cortaba la pagina en dos. En ese caso el aviso va SOBRE el navy, con el
   texto en claro, y la pagina sigue de corrido hasta el cierre. */
.sec--aviso{padding-top:64px;padding-bottom:0}
.aviso--claro{background:rgba(255,255,255,.07);border-left-color:var(--amar);
  color:rgba(255,255,255,.72);margin-bottom:0}
.aviso--claro strong{color:#fff}
.aviso--claro a{color:var(--amar)}

.cita-caja{border-left:4px solid var(--mag);background:rgba(205,0,70,.05);border-radius:0 14px 14px 0;
  padding:26px 30px;font-size:17px;color:var(--tinta);line-height:1.8;font-style:italic;
  font-family:var(--inter);margin:32px 0}

.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

.tarj{background:#fff;border:2px solid var(--linea);border-radius:20px;padding:36px 30px;
  display:flex;flex-direction:column}
.tarj h3{font-size:19px;font-weight:700;color:var(--tinta);margin-bottom:12px;font-family:var(--inter);line-height:1.3}
.tarj p{font-size:15px;color:var(--gris);line-height:1.7;font-family:var(--inter);flex-grow:1}
.tarj .etiq{align-self:flex-start}

.post{background:#fff;border:2px solid var(--linea);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.post:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(14,47,68,.14)}
/* height:auto es obligatorio: sin eso el atributo height="450" del <img> gana
   sobre aspect-ratio y la portada sale de 380x450 en vez de 16/10 */
.post__foto{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.post__cuerpo{padding:26px 24px;display:flex;flex-direction:column;flex:1}
.post h3{font-size:17.5px;font-weight:700;color:var(--tinta);margin:14px 0 10px;line-height:1.4;font-family:var(--inter)}
.post p{font-size:14.5px;color:var(--gris);line-height:1.7;font-family:var(--inter);flex:1}
.post__leer{margin-top:18px;color:var(--mag);font-weight:700;font-size:13px;text-transform:uppercase;
  letter-spacing:.8px;display:inline-flex;align-items:center;gap:7px}

/* ══════════ LA PAGINA DE ARTICULO, A DOS COLUMNAS ══════════
   Estaba en 940px y con el padding del 5% el contenido util quedaba en ~846:
   las tarjetas, las tablas y las calculadoras se veian apretadas, y los
   "Articulos relacionados" iban en una seccion aparte a 1200px, o sea que la
   misma pieza tenia dos anchos distintos segun donde cayera.
   Ahora: 1400 de contenedor, ~1260 utiles, columna de contenido de ~892 (mas
   ancha que los 846 de antes) y una columna al lado de 320 que acompaña la
   lectura. Los relacionados viven DENTRO de la columna de contenido, asi que
   miden exactamente lo mismo que las tarjetas del cuerpo. */
.art{max-width:1400px;margin:0 auto;padding:0 5%}
/* `align-items:stretch` (el de fabrica) y no `start`: la columna de al lado
   tiene que medir lo mismo que la nota para que lo pegajoso de adentro tenga
   por donde viajar. Con `start` medía lo que medía su contenido y el bloque
   pegado se despegaba a los 700px de scroll. */
.art__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:stretch}
.art__main{min-width:0}
.art__relacionados{margin-top:64px;padding-top:48px;border-top:1px solid var(--linea)}
.art__relacionados .sec__cab{text-align:left;margin-bottom:28px}
.art__relacionados .tit{font-size:38px}
.art__relacionados .g3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* la columna de al lado */
/* LOS 34px DE ARRIBA. La columna arrancaba a la altura de las migas de pan y
   se leia como si la nota empezara a la derecha. Bajada, su borde de arriba
   queda a la altura del titular, que es donde empieza a leer cualquiera. */
.art__lado{min-width:0;height:100%;padding-top:34px}
/* `align-content:start` apila las piezas arriba en vez de repartirlas por los
   1.200px de alto que ahora mide la columna. El alto completo existe solo para
   que la ultima pieza tenga recorrido. */
.art__lado-int{display:grid;gap:20px;height:100%;align-content:start}
/* LA PIEZA QUE ACOMPAÑA LA LECTURA.
   Se pega la ULTIMA y solo la ultima. Pegar la columna entera (que es lo que
   habia: `position:sticky` sobre `.art__lado-int`) no hacia nada: el bloque
   mide mas que la pantalla, asi que se apoyaba arriba una vez y despues subia
   con el scroll como cualquier cosa. Pegando solo la ultima, los temas y la
   tienda se leen al principio y se van, y las lecturas recomendadas quedan a
   la vista hasta el final de la nota.
   El `max-height` es la red: en una pantalla baja el bloque no entra entero, y
   sin eso su parte de abajo quedaria cortada para siempre. */
.art__lado-int > *:last-child{position:sticky;top:104px;
  max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent}
.art__lado-int > *:last-child::-webkit-scrollbar{width:6px}
.art__lado-int > *:last-child::-webkit-scrollbar-thumb{background:var(--linea);border-radius:3px}
.lado__caja{border:1px solid var(--linea);border-radius:16px;padding:20px 22px;background:#fff}
.lado__tit{font-family:var(--anton);font-size:19px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--tinta);margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--amar)}
.lado__temas{display:grid}
.lado__temas a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:var(--inter);font-size:14px;color:var(--gris);padding:9px 0;
  border-bottom:1px solid var(--linea);line-height:1.35}
.lado__temas a:last-child{border-bottom:none}
.lado__temas a span{font-size:12px;font-weight:700;color:var(--mag);flex:0 0 auto}
.lado__temas a:hover{color:var(--mag)}
.lado__temas a.on{color:var(--tinta);font-weight:700}

/* el espacio propio: 250x250 exactos */
.lado__propio{width:250px;height:250px;margin:0 auto;border-radius:16px;padding:24px 22px;
  background:linear-gradient(150deg,var(--navy),var(--tinta));display:flex;flex-direction:column;
  justify-content:space-between;text-align:left;overflow:hidden}
.lado__propio-ceja{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--amar)}
.lado__propio-tit{font-family:var(--anton);font-size:26px;line-height:1.12;color:#fff;
  text-transform:uppercase;letter-spacing:.5px}
.lado__propio-cta{display:inline-flex;align-items:center;gap:7px;font-family:var(--inter);
  font-size:13px;font-weight:700;color:var(--amar)}
.lado__propio:hover .lado__propio-cta{gap:11px}

/* te recomendamos */
.lado__reco{display:grid}
.reco{display:grid;grid-template-columns:20px minmax(0,1fr) 76px;gap:10px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--linea)}
.reco:last-child{border-bottom:none;padding-bottom:0}
.reco:first-child{padding-top:0}
.reco__n{font-family:var(--anton);font-size:15px;color:var(--mag);line-height:1.5}
.reco__tx strong{display:block;font-family:var(--inter);font-size:14px;font-weight:700;
  color:var(--tinta);line-height:1.4;margin-bottom:4px}
.reco__tx span{font-family:var(--inter);font-size:12.5px;color:var(--gris);line-height:1.5}
.reco img{width:76px;height:58px;object-fit:cover;border-radius:8px;display:block}
.reco:hover .reco__tx strong{color:var(--mag)}

@media (max-width:1180px){
  .art__grid{grid-template-columns:1fr;gap:0}
  .art__lado{margin-top:56px;height:auto;padding-top:0}
  .art__lado-int{position:static;height:auto;grid-template-columns:1fr 1fr;align-items:start}
  /* Apilada debajo de la nota, no hay nada a lo que acompañar. */
  .art__lado-int > *:last-child{position:static;max-height:none;overflow:visible}
  .art__relacionados .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (max-width:760px){
  .art__lado-int{grid-template-columns:1fr}
  .art__relacionados{margin-top:44px;padding-top:34px}
  .art__relacionados .tit{font-size:28px}
}
.art__migas{font-size:13px;color:var(--gris2);padding:26px 0;font-family:var(--inter)}
.art__migas a:hover{color:var(--mag)}
.art h1{font-family:var(--anton);font-size:46px;font-weight:600;color:var(--tinta);line-height:1.15;margin-bottom:26px}
/* height:auto obligatorio: el atributo height="675" del <img> gana si no esta,
   y la portada sale estirada en vez de 16/9 */
.art__portada{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;margin-bottom:34px;display:block}
.art__cuerpo{max-width:820px}
/* El contenedor se ensancho para que respiren las tarjetas, las tablas y las
   calculadoras. El texto corrido NO sigue ese ancho: una linea de 1044px son
   mas de 110 caracteres y se pierde el renglon al volver. Se limita solo al
   parrafo de primer nivel de cada bloque, que es el texto; lo que vive adentro
   de una tarjeta o una tabla usa todo el ancho disponible. */
.art__legacy > div > p,
.art__legacy > div > ul,
.art__legacy > div > ol,
.art__legacy > section > p{max-width:840px}
.art__cuerpo p{font-size:17px;color:#4a5a66;line-height:1.9;margin-bottom:22px;font-family:var(--inter)}
.art__cuerpo strong{color:var(--tinta);font-weight:700}
.art__cuerpo h2{font-size:27px;font-weight:700;color:var(--tinta);font-family:var(--inter);
  line-height:1.3;margin:44px 0 18px;padding-left:18px;border-left:5px solid var(--mag)}
.art__cuerpo h3{font-size:20px;font-weight:700;color:var(--tinta);font-family:var(--inter);margin:30px 0 12px}
.art__cuerpo ul{margin:0 0 22px 0;padding-left:22px}
.art__cuerpo li{font-size:17px;color:#4a5a66;line-height:1.9;margin-bottom:9px;font-family:var(--inter)}
.statcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0}
.statcard{background:#fff;border:2px solid var(--linea);border-radius:16px;padding:26px 22px}
.statcard__n{font-family:var(--anton);font-size:38px;color:var(--mag);line-height:1;margin:12px 0 10px}
.statcard p{font-size:14px;color:var(--gris);line-height:1.6;margin:0;font-family:var(--inter)}
.statcard__fuente{font-size:11.5px;color:#aaa;margin-top:12px;font-style:italic;line-height:1.5}

.prod{background:#fff;border:2px solid var(--linea);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.prod:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(14,47,68,.14)}
.prod__tapa{aspect-ratio:3/4;background:linear-gradient(150deg,var(--navy),var(--tinta));
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;text-align:center;padding:20px}
.prod__cuerpo{padding:24px 22px;display:flex;flex-direction:column;flex:1;gap:10px}
.prod h3{font-size:17px;font-weight:700;color:var(--tinta);line-height:1.35;font-family:var(--inter)}
.prod p{font-size:14px;color:var(--gris);line-height:1.65;font-family:var(--inter);flex:1}
.prod__precio{font-family:var(--anton);font-size:26px;color:var(--mag)}
.prod__precio.pronto{font-family:var(--inter);font-size:14px;font-weight:700;color:#1a7f4b}
.prod .btn{margin-top:auto}

.legal-txt{max-width:820px;margin:0 auto;padding:0 5%}
.legal-txt h2{font-size:22px;font-weight:700;color:var(--tinta);margin:36px 0 14px;font-family:var(--inter)}
.legal-txt p,.legal-txt li{font-size:16px;color:var(--gris);line-height:1.85;margin-bottom:14px;font-family:var(--inter)}

.merc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.merc__t{background:#fff;border:2px solid var(--linea);border-radius:20px;padding:32px 28px}
.merc__t h3{font-size:18px;font-weight:700;color:var(--tinta);margin:16px 0 10px;font-family:var(--inter)}
.merc__t p{font-size:14.5px;color:var(--gris);line-height:1.7;font-family:var(--inter)}
.merc__dato{font-family:var(--anton);font-size:34px;color:var(--mag);line-height:1}

.tema{width:42px;height:42px;border-radius:50%;border:2px solid var(--linea);background:none;
  display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--tinta);
  flex:0 0 auto;margin-left:18px;transition:.18s}
.tema:hover{border-color:var(--mag);color:var(--mag)}
.tema svg{width:19px;height:19px}
.tema .luna{display:none}
@media (min-width:1200px){.tema{display:flex}}
.movil .tema{display:flex;width:100%;border-radius:12px;margin:14px 0 0;height:46px;gap:10px;
  font-family:var(--urb);font-weight:700;text-transform:uppercase;font-size:13px}

@media (max-width:1024px){
  .ph{padding:60px 5% 0}
  .ph__grid{grid-template-columns:1fr;gap:0;text-align:center;align-items:center}
  .ph__texto{order:1;padding-bottom:26px;align-self:auto}
  /* con el hero en una columna el parrafo se centra: si no, el bloque de
     620px queda pegado a la izquierda y el texto centrado adentro se lee
     descolgado del titular. */
  .ph__desc{margin-left:auto;margin-right:auto}
  .ph__img{order:2}
  .ph__img img{max-width:460px;max-height:480px}
  /* `.corte--onda` mide 64px aca; el solape lo tiene que acompañar */
  .ph:has(+ .corte){padding-bottom:64px}
  .ph:has(+ .corte) + .corte{margin-top:-64px}
  .ph:has(+ .corte) .ph__img img{margin-bottom:-64px}
  .ph h1{font-size:54px}
  /* El espejo es solo de escritorio: en una columna Shir va siempre abajo del
     titular, en las 16 paginas por igual. */
  .ph--espejo .ph__grid{grid-template-columns:1fr}
  .ph--espejo .ph__texto{order:1}
  .ph--espejo .ph__img{order:2}
  .sec,.sec--alto{padding:80px 5%}
  .pasos,.g4{grid-template-columns:repeat(2,1fr)}
  .g3,.merc,.statcards{grid-template-columns:1fr}
  .art h1{font-size:36px}
}
@media (max-width:768px){
  .ph{padding:40px 5% 0}
  .ph h1{font-size:38px}
  .ph__desc{font-size:16px;line-height:1.65;margin-bottom:28px}
  .ph__img img{max-width:350px;max-height:370px}
  .ph:has(+ .corte){padding-bottom:46px}
  .ph:has(+ .corte) + .corte{margin-top:-46px}
  .ph:has(+ .corte) .ph__img img{margin-bottom:-46px}
  .sec,.sec--alto{padding:64px 5%}
  .pasos,.g2,.g4{grid-template-columns:1fr}
  .art h1{font-size:30px}
  .art__cuerpo p,.art__cuerpo li{font-size:16px}
}
@media (max-width:480px){
  .ph{padding:30px 5% 0}
  .ph h1{font-size:30px}
  .ph__img img{max-width:270px;max-height:290px}
  .sec,.sec--alto{padding:56px 5%}
}

/* ════════════════════════════════════════════════════════════════════════
   LAS DOS PIELES OSCURAS
   ────────────────────────────────────────────────────────────────────────
   Las reglas de abajo cuelgan de `html[data-oscuro]`, que llevan las dos, y
   no tienen ni un color escrito adentro: leen estas seis variables de
   superficie. Agregar una piel nueva es escribir seis colores, no duplicar
   sesenta selectores.

     --f0   el fondo de la pagina y de la cabecera
     --f1   la superficie alterna: las secciones navy y el pie
     --f2   las cajas (KPI, tarjeta, grafico, ficha)
     --f3   la caja adentro de otra caja, y el hover
     --bd   el borde de una caja
     --bd2  la linea fina: separadores y borde de la cabecera

   NOCHE es el negro de siempre, byte por byte: el de los productos de Shir
   (tablero Deuda Cero BLACK y Planilla V3 Negra "Loba de Wall Street").

   AZUL entro el 28-ago para /mercados, a pedido de Shir: la cabina va toda en
   el navy de la marca y no queda ni un negro en pantalla. Las cajas suben un
   escalon de luz sobre el fondo para que la informacion se despegue sola, que
   es exactamente lo que se pidio. Contraste medido contra los tres fondos:
   texto principal #EAF3FA sobre #0A2138 da 14,3:1; secundario #A9C4DA sobre la
   caja #14395B da 5,9:1; el fino #8AA8C2 sobre la misma caja da 4,7:1. El
   minimo de la AA es 4,5.
   ════════════════════════════════════════════════════════════════════════ */
html[data-tema="noche"]{
  --magtx:#FF8199;
  --f0:#0A0C10; --f1:#0F1620; --f2:#131A24; --f3:#1B2430;
  --bd:#232C38; --bd2:#1B2430;
  --tinta:#E8EDF2; --navy:#0F1620; --linea:#232C38;
  --gris:#98A6B4; --gris2:#7A8794; --menu:#E8EDF2;
  --sombra:rgba(0,0,0,.6);
}
html[data-tema="azul"]{
  --magtx:#FF8199;
  --f0:#0A2138; --f1:#0E2C47; --f2:#14395B; --f3:#1B4A73;
  --bd:#24608F; --bd2:#1A4066;
  --tinta:#EAF3FA; --navy:#0E2C47; --linea:#24608F;
  --gris:#A9C4DA; --gris2:#8AA8C2; --menu:#EAF3FA;
  --sombra:rgba(4,20,36,.66);
}
html[data-oscuro] body{background:var(--f0);color:var(--tinta)}
html[data-oscuro] .cab{background:var(--f0);border-bottom:1px solid var(--bd2)}
html[data-oscuro] .sec,
html[data-oscuro] .s2,html[data-oscuro] .s3,
html[data-oscuro] .s5,html[data-oscuro] .s6,html[data-oscuro] .s7{background:var(--f0)}
html[data-oscuro] .s1,html[data-oscuro] .s4,html[data-oscuro] .s8,
html[data-oscuro] .ph,html[data-oscuro] .sec--navy,html[data-oscuro] .pie{background-color:var(--f1)}
html[data-oscuro] .pilar,html[data-oscuro] .serv,html[data-oscuro] .metr,
html[data-oscuro] .herr,html[data-oscuro] .testi,html[data-oscuro] .tarj,
html[data-oscuro] .post,html[data-oscuro] .prod,html[data-oscuro] .pasoN,
html[data-oscuro] .faq details,html[data-oscuro] .statcard,
html[data-oscuro] .merc__t,
html[data-oscuro] .kpi,html[data-oscuro] .tkr,
html[data-oscuro] .pick,html[data-oscuro] .graf,
html[data-oscuro] .termcard,html[data-oscuro] .cosa,
html[data-oscuro] .pil{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .pil__r li{background:var(--f3,rgba(255,255,255,.07))}
html[data-oscuro] .term__c{background:var(--f1);border-color:var(--bd2)}
html[data-oscuro] .sub{background:var(--f2);box-shadow:0 18px 44px var(--sombra)}
html[data-oscuro] .sub a{color:var(--tinta)}
html[data-oscuro] .sub a:hover{background:var(--f3)}
html[data-oscuro] .pilar h3,html[data-oscuro] .serv h3,html[data-oscuro] .herr h3,
html[data-oscuro] .tarj h3,html[data-oscuro] .post h3,html[data-oscuro] .prod h3,
html[data-oscuro] .testi h4,html[data-oscuro] .metr__t,html[data-oscuro] .faq summary,
html[data-oscuro] .art h1,html[data-oscuro] .art__cuerpo h2,
html[data-oscuro] .art__cuerpo h3,html[data-oscuro] .legal-txt h2,
html[data-oscuro] .merc__t h3,html[data-oscuro] .pasoN h3{color:var(--tinta)}
html[data-oscuro] .testi p.cita,html[data-oscuro] .art__cuerpo p,
html[data-oscuro] .art__cuerpo li,html[data-oscuro] .legal-txt p,
html[data-oscuro] .legal-txt li{color:var(--gris)}
html[data-oscuro] .art__cuerpo strong{color:var(--tinta)}
html[data-oscuro] .tit{color:var(--tinta)}
html[data-oscuro] .c-navy{color:#7FB3D5}
html[data-oscuro] .btn--tinta{background:var(--f3)}
html[data-oscuro] .aviso{background:rgba(205,0,70,.1)}
html[data-oscuro] .aviso strong,html[data-oscuro] .cita-caja{color:var(--tinta)}
html[data-oscuro] .pasoN.destacado{background:var(--f3);border-color:var(--f3)}
html[data-oscuro] .tema{border-color:var(--bd);color:var(--tinta)}
html[data-oscuro] .tema .sol{display:none}
html[data-oscuro] .tema .luna{display:block}
html[data-oscuro] .burger span{background:var(--tinta)}
html[data-oscuro] .movil{border-top-color:var(--bd2)}
html[data-oscuro] .movil a,html[data-oscuro] .movil details summary{border-bottom-color:var(--bd2)}
/* El campo del newsletter va BLANCO tambien en tema noche, igual que en home.
   Pintado de #131A24 el campo se fundia con el pie y el placeholder gris del
   navegador encima quedaba practicamente invisible. Un campo de formulario
   tiene que verse como un campo: es el unico lugar del pie donde se espera que
   la persona escriba. */
html[data-oscuro] .pie input{background:#fff;color:#0E2F44}
html[data-oscuro] .pie input::placeholder{color:rgba(14,47,68,.70)}
html[data-oscuro] .etiq--gris,html[data-oscuro] .etiq--navy{background:var(--f3);color:var(--gris)}

/* ── EL TEXTO SOBRE FONDOS QUE NO SE DAN VUELTA ──
   `--tinta` se invierte en noche (#0E2F44 -> #E8EDF2). Donde el fondo tambien
   se invierte, perfecto. El problema son los fondos FIJOS y claros: el amarillo
   de marca, el blanco de un input, el blanco de un boton. Ahi el texto salia
   claro sobre claro y desaparecia.
   Medido en /mercados antes de esto: el boton de la caja de captura daba
   1,30:1 y el campo de email 1,18:1, contra un minimo de 4,5. Con el color
   fijo dan 8,59:1 y 12,63:1.
   Esta es la lista completa de fondos fijos claros del sitio. Si se agrega otro
   elemento con fondo claro fijo, hay que sumarlo aca. */
html[data-oscuro] .btn--amar,
html[data-oscuro] .cap__mail,
html[data-oscuro] .paso__n,
html[data-oscuro] .paso__btn,
html[data-oscuro] .badge--amar,
html[data-oscuro] .saltar,
html[data-oscuro] .arriba{color:#0E2F44}
html[data-oscuro] .arriba:hover{background:#0E2F44;color:#fff;border-color:#0E2F44}
html[data-oscuro] .cap__mail::placeholder{color:rgba(14,47,68,.70)}

/* ═══════════════ NAVEGACION · 7 pestañas + separador + boton ═══════════════
   El menu es el mapa del sitio. Se aprieta en tres escalones antes de romper,
   y el separador garantiza que el boton nunca quede pegado a la ultima pestaña. */

/* aire real entre la ultima pestaña y el CTA: linea fina + 26px de cada lado */
.cab__sep{flex:0 0 auto;width:1px;height:26px;background:var(--linea);margin:0 26px 0 30px}

/* etiqueta NUEVO de los desplegables */
.menu .new,.movil .new{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:20px;
  background:rgba(205,0,70,.1);color:var(--mag);font-family:var(--inter);font-size:10px;
  font-weight:800;letter-spacing:.6px;text-transform:uppercase;vertical-align:middle;line-height:1.6}

/* panel de la Tienda: tres columnas, una por tema */
/* El panel se centra en la PANTALLA, no en su pestaña. Centrado en la pestaña,
   el de Blog (que tiene 4 columnas y esta a la izquierda de la barra) se salia
   204px por fuera del borde a 1400px. Con position:fixed queda siempre adentro
   y de paso cubre la pestaña, asi el mouse llega sin que se cierre. */
.sub--mega{display:flex;gap:8px;min-width:720px;position:fixed;top:89px;left:50%;
  transform:translateX(-50%) translateY(8px);padding:18px}
.menu>li:hover .sub--mega{transform:translateX(-50%) translateY(0)}
.mega__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.mega__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1}
/* al pie de la columna solo se manda el "Ver todos". Si el ultimo item es una
   seccion real, se queda donde va y no deja un hueco raro arriba. */
.mega__col li.mega__todos{margin-top:auto}
.mega__tit{display:block;padding:6px 14px 10px;margin-bottom:4px;border-bottom:1px solid var(--linea);
  font-family:var(--urb);font-size:12px;font-weight:900;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--mag)}
.mega__tit:hover{color:var(--tinta)}
.sub--mega a{white-space:normal;line-height:1.35}
/* solo el "Ver todos" va apagado. Antes esto era :last-child y dejaba en gris
   secciones reales que caian ultimas en su columna. */
.sub--mega .mega__todos a{color:var(--gris2);font-weight:700;font-size:13px}
.sub--mega .mega__todos a:hover{color:var(--mag)}
.sub--mega4{min-width:960px}

/* encabezado de grupo dentro del menu movil */
.movil .adentro__tit{display:block;padding:12px 2px 6px;font-family:var(--urb);font-size:11px;
  font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--mag)}

@media (max-width:1600px){
  .marca{margin-right:26px}
  .menu{gap:22px}
  .menu>li>a{font-size:14px;gap:10px}
  .cab__sep{margin:0 20px 0 24px}
  .cta-cab{font-size:14px;padding:11px 20px}
  .tema{margin-left:12px;width:38px;height:38px}
}
@media (max-width:1400px){
  .marca span{font-size:16px;letter-spacing:.3px}
  .marca{margin-right:20px}
  .menu{gap:17px}
  .menu>li>a{font-size:13px;gap:8px}
  .cab__sep{margin:0 16px 0 18px}
  .cta-cab{font-size:13px;padding:11px 17px}
}
@media (max-width:1260px){
  .menu{gap:13px}
  .menu>li>a{font-size:12.5px;letter-spacing:0}
  .sub--mega{min-width:660px}
  .sub--mega4{min-width:840px}
}

/* ═══════════════ CAMINO DE ENTRADA (/empezar) ═══════════════ */
.camino{display:flex;flex-direction:column;gap:18px;max-width:900px;margin:0 auto}
.camino__paso{display:flex;gap:26px;background:#fff;border:2px solid var(--linea);
  border-radius:20px;padding:30px 32px;transition:border-color .2s}
.camino__paso:hover{border-color:var(--mag)}
.camino__n{font-family:var(--anton);font-size:44px;line-height:1;color:var(--mag);
  flex:0 0 auto;width:64px}
.camino__cuerpo{flex:1;min-width:0}
.camino__cuerpo h3{font-family:var(--anton);font-size:27px;font-weight:400;text-transform:uppercase;
  letter-spacing:.6px;color:var(--tinta);margin-bottom:10px}
.camino__cuerpo>p{font-family:var(--inter);font-size:15.5px;color:var(--gris);line-height:1.75;
  margin-bottom:16px}
.camino__links{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:7px}
.camino__links a{display:inline-flex;align-items:center;gap:7px;font-family:var(--inter);
  font-size:15px;font-weight:600;color:var(--tinta)}
.camino__links a:hover{color:var(--mag)}
.camino__links svg{color:var(--mag);flex:0 0 auto}
@media (max-width:768px){
  .camino__paso{flex-direction:column;gap:12px;padding:24px 20px}
  .camino__n{font-size:34px;width:auto}
  .camino__cuerpo h3{font-size:22px}
}
html[data-oscuro] .camino__paso{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .camino__cuerpo h3,html[data-oscuro] .camino__links a{color:var(--tinta)}

/* ═══════════════ BALANZ ═══════════════
   El boton de apertura de cuenta nunca va solo: abajo va la aclaracion de que
   es un link de referido. Shir esta matriculada; eso se declara. */
/* El boton y su aclaracion son UNA pieza y se maquetan como una: la caja se
   centra y el boton, que es width:100%, se queda del ancho de la caja en vez
   de estirarse a los 1138px de la seccion. Antes la nota tenia max-width:560px
   con margin:0, o sea que arrancaba pegada al borde izquierdo debajo de un
   boton de ancho completo, con el texto centrado adentro: quedaba desalineada
   y parecia cortada. */
.balanz-cta{margin:30px auto 0;max-width:520px;text-align:center}
.balanz-cta .btn{margin-bottom:14px}
.balanz-cta__nota{font-family:var(--inter);font-size:13px;line-height:1.7;
  color:var(--gris2);max-width:none;margin:0;text-align:center;text-wrap:pretty}
html[data-oscuro] .balanz-cta__nota{color:var(--gris2)}

/* el conmutador de tema ya no existe: el sitio va siempre con los colores de
   Shir y el negro se decide por pagina */
.tema{display:none !important}
@media (max-width:1199px){
  .burger{display:flex}
  .menu,.cta-cab,.cab__sep{display:none}
  .marca span{display:inline;font-size:17px}
}

/* ═══════════════ TIENDA EN TRES TEMAS ═══════════════ */
.prod{position:relative}
.prod__tapa{aspect-ratio:16/7;color:rgba(255,255,255,.72);font-weight:700}
.prod__precio--txt{font-family:var(--inter);font-size:13px;font-weight:700;
  color:var(--gris2);text-transform:uppercase;letter-spacing:.8px}

/* las tres puertas de arriba de la tienda */
.temas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:900px;margin:0 auto}
.tema-puerta{background:#fff;border:2px solid var(--linea);border-radius:20px;padding:34px 24px;
  text-align:center;display:flex;flex-direction:column;align-items:center;transition:.2s}
.tema-puerta:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(14,47,68,.14);border-color:var(--mag)}
.tema-puerta h3{font-family:var(--anton);font-size:26px;font-weight:400;text-transform:uppercase;
  letter-spacing:1px;color:var(--tinta);margin:20px 0 6px}
.tema-puerta p{font-family:var(--inter);font-size:13px;font-weight:700;color:var(--mag);
  text-transform:uppercase;letter-spacing:1px}
@media (max-width:768px){.temas{grid-template-columns:1fr}}
html[data-oscuro] .tema-puerta{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .tema-puerta h3{color:var(--tinta)}

/* tarjeta de blog sin portada: degradado navy, sin estilo en linea */
.post__foto--vacia{background:linear-gradient(150deg,#21506e,#0E2F44)}

/* glifo de texto convertido a SVG (flecha y tilde de verificacion) */
.ico-txt{display:inline-block;vertical-align:-2px;flex:0 0 auto}

/* ═══════════════ ARTICULOS DEL BLOG ═══════════════
   El cuerpo de cada articulo viene con sus propios estilos en linea, escritos
   para fondo blanco. En vez de reescribir 70 archivos, el cuerpo vive dentro
   de una hoja clara que se mantiene clara tambien en modo noche. */
.art__ceja{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--mag);margin-bottom:14px}
.art__firma{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--inter);
  font-size:13.5px;color:var(--gris2);margin:-14px 0 28px;line-height:1.6}
.art__firma svg{color:var(--mag);flex:0 0 auto}
.art__legacy{margin-top:10px}
.art__legacy img{max-width:100%;height:auto;border-radius:14px}
.art__legacy table{max-width:100%}
.art__legacy form{margin:0}
/* nada del articulo puede empujar la pagina a lo ancho */
.art__legacy>*{max-width:100%}
.art{overflow-x:clip}

.link-mag{display:inline-flex;align-items:center;gap:10px;color:var(--mag);font-family:var(--inter);
  font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.link-mag:hover{color:var(--tinta)}

/* la grilla de secciones del blog: 10 puertas */
.temas--10{grid-template-columns:repeat(5,1fr);max-width:1200px;gap:18px}
.temas--10 .tema-puerta{padding:26px 14px}
.temas--10 .tema-puerta h3{font-size:19px;margin:14px 0 4px}
.temas--10 .circ{width:58px;height:58px}
.temas--10 .circ svg{width:28px;height:28px}
@media (max-width:1024px){.temas--10{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.temas--10{grid-template-columns:repeat(2,1fr)}}

/* ─────────────────────────────────────────────────────────────────────────
   `.art__legacy` ES UN CONTENEDOR, Y ESO ARREGLA 19 BLOQUES ROTOS
   Los 70 articulos vienen de WordPress con sus estilos en linea escritos para
   un cuerpo de 1200px, y traen sus cortes como `@media`, o sea contra la
   ventana. Acá el cuerpo mide 771px con la ventana en 1512: la ventana decia
   "escritorio" y un bloque de `grid-template-columns: 55% 45%` se armaba a dos
   columnas de 381 y 312px, con la imagen recortada y medio bloque vacio.
   Medido en /planificar-gastos-mensuales, bloque 11.
   `gen_articulos.cortes_por_columna()` reescribe esos `@media` como
   `@container articulo`, y esta linea es la otra mitad del arreglo: sin
   declarar el contenedor, las reglas convertidas no matchean nunca.
   ───────────────────────────────────────────────────────────────────────── */
.art__legacy{container-type:inline-size;container-name:articulo}

html[data-oscuro] .art__legacy{background:#F7F8FA;color:#0E2F44;border-radius:20px;
  padding:34px 30px;margin-left:-30px;margin-right:-30px}
@media (max-width:768px){
  html[data-oscuro] .art__legacy{padding:22px 16px;margin-left:-16px;margin-right:-16px}
}

/* tema noche del panel de tienda */
html[data-oscuro] .cab__sep{background:var(--bd)}
html[data-oscuro] .mega__tit{border-bottom-color:var(--bd)}
html[data-oscuro] .mega__tit:hover{color:var(--tinta)}
html[data-oscuro] .menu .new,html[data-oscuro] .movil .new{background:rgba(205,0,70,.22)}


/* ════════════════════════════════════════════════════════════════════════
   /mercados, LA CABINA
   Estas clases viven solo en /mercados, que sale siempre en tema noche.
   El criterio es densidad: es un tablero, no un folleto. Nada de titulares
   Anton de 70px adentro de la cabina, nada de 100px de padding por bloque.
   Todo el tablero tiene que verse de una.
   Verde, azul, ambar, violeta y rosa son semanticos, no de marca: son los
   mismos que ya usa el tablero maestro.
   ════════════════════════════════════════════════════════════════════════ */
.t-sube{color:#34D399}
.t-baja{color:#FB7185}
.t-igual{color:var(--gris)}

/* ── la barra de arriba ── */
.cabm{padding:16px 5% 12px;border-bottom:1px solid var(--linea)}
.cabm__int{max-width:1400px;margin:0 auto;display:flex;align-items:flex-end;
  justify-content:space-between;gap:20px 28px;flex-wrap:wrap}
.cabm__tit{flex:1 1 560px;min-width:0}
.cabm h1{font-family:var(--anton);font-size:33px;font-weight:600;line-height:1.05;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--tinta)}
.cabm__baj{font-size:13.5px;line-height:1.5;color:var(--gris);max-width:none;margin-top:5px}
.cabm__vivo{display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  flex:0 0 auto}
.cabm__linea{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  justify-content:flex-end}
.cabm__fecha{font-family:var(--inter);font-size:14px;font-weight:700;
  letter-spacing:.3px;color:var(--tinta);text-align:right;line-height:1.3}
.cabm__fecha:empty{display:none}
.cabm__estado{font-size:12.5px;font-weight:600;color:var(--gris);display:inline-flex;
  align-items:center;gap:8px}
.cabm__estado::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gris2);flex:0 0 auto}
.cabm__estado--ok::before{background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.cabm__estado--flojo::before{background:var(--amar)}
.cabm__btn{font-family:var(--urb);font-size:12px;font-weight:900;text-transform:uppercase;
  letter-spacing:.5px;color:var(--tinta);background:none;border:1px solid var(--linea);
  border-radius:30px;padding:8px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.cabm__btn:hover{border-color:var(--mag);color:var(--mag)}
.cabm__btn[disabled]{opacity:.45;cursor:progress}
.cabm__nojs{max-width:1400px;margin:12px auto 0;font-size:13px;line-height:1.6;color:var(--gris)}

/* ── el tablero: una sola seccion, densa ── */
.sec--tablero{padding:16px 5% 36px}
.sec--tablero .sec__int{max-width:1400px}
.rot{display:flex;align-items:center;gap:9px;font-family:var(--inter);font-size:11px;
  font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--gris2);
  margin:17px 0 9px}
.rot:first-child{margin-top:0}
.rot__p{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:block}
.rot__p--verde{background:#34D399}
.rot__p--azul{background:#38BDF8}
.rot__p--amar{background:#FBBF24}
.rot__p--violeta{background:#A78BFA}
.rot__p--rosa{background:#FB7185}

/* ── tarjetas de numero ── */
.kpis{display:grid;gap:12px}
.kpis--8{grid-template-columns:repeat(4,1fr)}
.kpi{border:1px solid var(--linea);border-left-width:3px;border-radius:12px;
  padding:13px 15px 11px;display:flex;flex-direction:column}
.kpi--verde{border-left-color:#34D399}
.kpi--azul{border-left-color:#38BDF8}
.kpi--amar{border-left-color:#FBBF24}
.kpi--violeta{border-left-color:#A78BFA}
.kpi--rosa{border-left-color:#FB7185}
.kpi__v{font-family:var(--anton);font-size:31px;font-weight:900;line-height:1.05;
  font-variant-numeric:tabular-nums;word-break:break-word}
.kpi--verde .kpi__v{color:#34D399}
.kpi--azul .kpi__v{color:#38BDF8}
.kpi--amar .kpi__v{color:#FBBF24}
.kpi--violeta .kpi__v{color:#A78BFA}
.kpi--rosa .kpi__v{color:#FB7185}
.kpi__var{font-family:var(--inter);font-size:12px;font-weight:700;margin-top:3px}
.kpi__e{font-family:var(--inter);font-size:11.5px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--tinta);margin-top:7px}
.kpi__g{font-size:12.5px;line-height:1.5;color:var(--gris2);margin-top:4px}
.dato__v--nulo{font-family:var(--inter)!important;font-size:17px!important;
  font-weight:700;color:var(--gris2)!important}
.dato__f{font-size:12px;line-height:1.4;color:var(--gris2);margin-top:auto;
  padding-top:8px;border-top:1px solid var(--linea)}
.dato__f--viejo{color:var(--amar)}
.dato__f--bloque{margin-top:10px;padding-top:0;max-width:900px;border-top:0}

/* ── graficos ── */
.grafs{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.graf{border:1px solid var(--linea);border-left-width:3px;border-radius:12px;
  padding:14px 16px 11px;display:flex;flex-direction:column}
.graf--verde{border-left-color:#34D399}
.graf--amar{border-left-color:#FBBF24}
.graf h3{font-family:var(--inter);font-size:11.5px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--tinta);margin-bottom:10px}
.graf__caja{height:146px;display:flex;align-items:flex-end}
.graf__svg{width:100%;height:146px;display:block}
.graf__eje{font-family:var(--inter);font-size:9px;fill:var(--gris2)}
.graf__nulo{font-size:13px;color:var(--gris2);align-self:center}
.barras{display:flex;align-items:flex-end;gap:4px;height:146px;width:100%;padding-top:4px}
.barra{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:4px;height:100%}
.barra__n{font-size:9px;color:var(--gris2);font-variant-numeric:tabular-nums;white-space:nowrap}
.barra__b{width:100%;max-width:24px;background:linear-gradient(180deg,#FBBF24,rgba(251,191,36,.22));
  border-radius:4px 4px 0 0;display:block}
.barra__m{font-size:9px;color:var(--gris2)}

/* ── el termometro: interpreta, no repite ── */
.termcard{border:1px solid var(--linea);border-left:3px solid #A78BFA;border-radius:12px;padding:14px 16px}
.term{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.term__c{border:1px solid var(--linea);border-radius:10px;padding:12px 13px}
.term__e{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--gris2);display:block;margin-bottom:8px}
.term__v{font-family:var(--anton);font-size:22px;font-weight:900;line-height:1.15;
  color:var(--tinta);display:block;font-variant-numeric:tabular-nums}
.term__q{font-size:12.5px;line-height:1.6;color:var(--gris);display:block;margin-top:6px}
.term__pie{font-size:11px;line-height:1.6;color:var(--gris2);margin-top:11px;max-width:900px}

/* ── el mundo ── */
.mundo{display:grid;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));gap:12px}
.tkr{border:1px solid var(--linea);border-radius:12px;padding:12px 14px 10px}
.tkr__cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.tkr__n{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--tinta)}
.chip{font-family:var(--inter);font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:20px;
  background:rgba(139,147,167,.16);color:var(--gris2);white-space:nowrap;flex:0 0 auto}
.chip.t-sube{background:rgba(52,211,153,.16);color:#34D399}
.chip.t-baja{background:rgba(251,113,133,.16);color:#FB7185}
.tkr__p{font-family:var(--anton);font-size:25px;font-weight:900;line-height:1.05;
  color:var(--tinta);font-variant-numeric:tabular-nums}
.tkr__m{font-family:var(--inter);font-size:11px;font-weight:700;margin-top:3px;color:var(--gris2)}
.spark{height:32px;margin-top:7px}
.spark__svg{width:100%;height:32px;display:block}
.tkr__q{font-size:10.5px;line-height:1.45;color:var(--gris2);margin-top:6px}

/* ── las listas educativas ── */
.cosas{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cosa{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--linea);
  border-radius:14px;padding:22px}
.cosa__n{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--anton);font-size:19px;line-height:1}
.cosa__n--hoy{background:rgba(255,202,43,.14);color:var(--amar)}
.cosa__n--mes{background:rgba(205,0,70,.14);color:var(--mag)}
.cosa__c{min-width:0}
.cosa__c h3{font-family:var(--inter);font-size:18px;font-weight:700;line-height:1.35;color:var(--tinta)}
.cosa__c>p{font-size:15px;line-height:1.75;color:var(--gris);margin-top:8px}
.cosa__s{font-size:14px;line-height:1.6;margin-top:12px;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.cosa__s svg{flex:0 0 auto;color:var(--mag)}
.cosa__s a{color:var(--amar);font-weight:600;border-bottom:1px solid rgba(255,202,43,.35)}
.cosa__s a:hover{color:var(--mag);border-bottom-color:var(--mag)}
.cosa__p{color:var(--gris2);font-weight:400}
.vivo{font-variant-numeric:tabular-nums;color:var(--amar)}

/* ── el gancho de la epoca ── */
.temp{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:22px;
  padding:16px 20px;border-radius:14px;border:1px solid rgba(255,202,43,.3);
  background:rgba(255,202,43,.07)}
.temp__e{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--amar);flex:0 0 auto}
.temp__txt{font-size:15px;line-height:1.65;color:var(--tinta);margin:0}

/* ── el S&P explicado ── */
.sp{max-width:860px}
.sp__p{font-size:16px;line-height:1.8;color:var(--gris);margin-bottom:16px}
.sp__ojo{border:1px solid rgba(255,202,43,.3);background:rgba(255,202,43,.06);
  border-radius:14px;padding:24px;margin:24px 0}
.sp__ojo h3{font-family:var(--inter);font-size:17px;font-weight:700;color:var(--amar);margin-bottom:12px}
.sp__ojo p{font-size:15px;line-height:1.75;color:var(--gris);margin-bottom:12px}
.sp__ojo p:last-child{margin-bottom:0}
.sp__ojo b{color:var(--tinta)}
.sp__regla{border-left:3px solid var(--mag);padding-left:14px;color:var(--tinta)!important}

/* ── el diccionario de instrumentos ── */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.pick{border:1px solid var(--linea);border-radius:14px;padding:22px;display:flex;flex-direction:column}
.pick__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.pick__cab h3{font-family:var(--inter);font-size:17px;font-weight:700;color:var(--tinta);line-height:1.3}
.pick__tk{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--gris2);text-align:right;flex:0 0 auto;max-width:44%;line-height:1.4}
.pick>p{font-size:14px;line-height:1.75;color:var(--gris);flex:1 1 auto}
.pick__pie{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea)}
.pick__pie .cosa__s{margin-top:10px}
.rk{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;padding:4px 10px;border-radius:20px}
.rk--bajo{background:rgba(52,211,153,.14);color:#34D399}
.rk--medio{background:rgba(255,202,43,.14);color:var(--amar)}
.rk--alto{background:rgba(251,113,133,.14);color:#FB7185}

/* ── cortes responsive ── */
@media (max-width:1100px){
  .kpis--8{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .cabm h1{font-size:30px}
  .kpi__v{font-size:27px}
}
@media (max-width:768px){
  .cabm{padding:18px 5% 12px}
  .cabm h1{font-size:27px}
  .cabm__int{align-items:flex-start}
  .cabm__vivo{align-items:flex-start;width:100%}
  .cabm__linea{justify-content:flex-start}
  .cabm__fecha{text-align:left;font-size:13px}
  .sec--tablero{padding:18px 5% 34px}
  .kpi__v{font-size:26px}
  .term__v{font-size:20px}
  .cosa{padding:18px;gap:14px}
  .cosa__n{width:34px;height:34px;font-size:17px}
}
@media (max-width:480px){
  .cabm h1{font-size:24px}
  .cabm__baj{font-size:13px}
  .kpis--8{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:13px 13px 11px}
  .kpi__v{font-size:22px}
  .kpi__e{font-size:10.5px}
  .mundo{grid-template-columns:1fr 1fr;gap:10px}
  .tkr__p{font-size:21px}
  .barra__n{display:none}
  .graf{padding:14px}
  .graf__caja,.graf__svg,.barras{height:132px}
  .cosa{flex-direction:column;gap:12px}
  .pick__cab{flex-direction:column;gap:6px}
  .pick__tk{text-align:left;max-width:100%}
}


/* ═════════════════════ CORTES ENTRE SECCIONES ═════════════════════
   La juntura entre una seccion y la siguiente. El bloque toma el color de la
   seccion que termina y la figura toma el color de la que empieza, con
   `currentColor`: por eso el par de colores se elige con la clase
   `corte--<de>-<a>` y no tocando el SVG.
   El SVG va con preserveAspectRatio="none", asi que se estira al ancho de la
   pantalla sin desbordar nunca. Cada variante fija su alto aca.
   `vector-effect:non-scaling-stroke` es obligatorio: sin eso, al estirar el
   viewBox el trazo sale grueso en vertical y finito en horizontal. */
.corte{width:100%;line-height:0;overflow:hidden;background:#fff;color:var(--navy)}
.corte svg{display:block;width:100%;height:100%}
.corte__fig{fill:currentColor}
.corte__tenue{fill:currentColor;opacity:.26}
.corte__filo{fill:none;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.corte--blanco-navy{background:#fff;color:var(--navy)}
.corte--navy-blanco{background-color:var(--navy);color:#fff}
/* El filo va en el color de marca que se lee contra el fondo que queda arriba. */
.corte--blanco-navy .corte__filo{stroke:var(--amar);opacity:.6}
.corte--navy-blanco .corte__filo{stroke:var(--mag);opacity:.55}
.corte--onda{height:90px}
.corte--siluetas{height:150px}
.corte--cinta{height:84px}
.corte--firma{height:78px}
/* Un corte se come parte de la respiracion de las dos secciones que junta.
   Sin esto quedan 190px de vacio entre el contenido y la juntura. */
.corte + .sec,.corte + .s8,.corte + .s2,.corte + .s3,.corte + .s5,.corte + .s6,.corte + .s7{padding-top:56px}
.sec:has(+ .corte),.s2:has(+ .corte),.s3:has(+ .corte),.s5:has(+ .corte),.s6:has(+ .corte),.s7:has(+ .corte){padding-bottom:52px}
.ph:has(+ .corte) .ph__texto{padding-bottom:30px}
@media (max-width:1024px){
  .corte--onda{height:64px} .corte--siluetas{height:104px}
  .corte--cinta{height:60px} .corte--firma{height:56px}
}
@media (max-width:768px){
  .corte--onda{height:46px} .corte--siluetas{height:74px}
  .corte--cinta{height:42px} .corte--firma{height:40px}
  .corte + .sec,.corte + .s8{padding-top:44px}
}


/* ═══════════════════ FLECHITAS HACIA LOS CTA ═══════════════════
   Van al costado de un boton, en posicion absoluta: no ocupan lugar, no
   empujan nada y no tapan texto. Se trazan solas cuando el bloque entra en
   pantalla (el JS de la base pone la clase `dibujada`).
   Abajo de 1100px no se muestran: ahi el boton ya ocupa el ancho entero. */
.con-flecha{position:relative;display:inline-block}
.flechita{display:none}
@media (min-width:1100px){
  .flechita{display:block;position:absolute;top:50%;width:176px;height:128px;
    margin-top:-90px;pointer-events:none;z-index:1}
  .flechita--izq{right:100%;margin-right:4px}
  .flechita--der{left:100%;margin-left:4px;transform:scaleX(-1)}
}
.flechita svg{width:100%;height:100%;overflow:visible}
.flechita__linea{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:0 11}
.flechita--amar .flechita__linea{stroke:var(--amar)}
.flechita--amar .flechita__punta{fill:var(--amar)}
.flechita--mag .flechita__linea{stroke:var(--mag)}
.flechita--mag .flechita__punta{fill:var(--mag)}
/* El trazo de la mascara arranca escondido y se corre hasta destaparse entero.
   pathLength="100" hace que 100 sea el largo de la curva, mida lo que mida. */
.flechita__mask{stroke-dasharray:100;stroke-dashoffset:100}
.flechita__punta{opacity:0}
.flechita.dibujada .flechita__mask{animation:trazo 1.05s cubic-bezier(.4,0,.2,1) forwards}
.flechita.dibujada .flechita__punta{animation:punta .28s ease .92s forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
@keyframes punta{to{opacity:1}}

/* ═══════════════════ REMATE DEL PIE ═══════════════════
   Se enciende con la clase `remate` en el body. Mientras esa clase este en una
   sola pagina, el resto del sitio sigue con el pie de siempre. */
.pie__filo{display:none}
/* EL COLOR DEL PIE VA FIJO, NO CON var(--tinta).
   `--tinta` se da vuelta en el tema oscuro: vale #0E2F44 de dia y #E8EDF2 de
   noche. Como /mercados corre con tema='noche', el pie de esa pagina salia
   pintado de #E8EDF2, o sea casi blanco, con los links blancos encima: medido,
   1,11:1 de contraste. Ilegible. El pie es el mismo en las 129 paginas, asi que
   el color va literal. Es el gotcha 6 del handoff 18, que volvio a morder. */
/* Los 104px de arriba eran el aire del sello. Sin sello siguen: es la franja
   por donde corre el friso de grabado, que ocupa ese mismo borde. */
body.remate .pie{position:relative;overflow:hidden;background-color:#0E2F44;
  padding-top:104px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 -26px 60px -30px rgba(14,47,68,.70)}
/* En las paginas de tema noche (hoy /mercados) el pie sigue el negro con el que
   viene terminando la pagina: la ultima seccion es #0F1620 y el pie ahora es el
   mismo. Con el navy quedaba un salto de color justo en el borde, como si el pie
   fuera de otro sitio. Va con especificidad mayor que `body.remate .pie` a
   proposito, que es la regla que lo pintaba parejo en las 129. */
html[data-oscuro] body.remate .pie{background-color:var(--f1)}
body.remate .pie__int{position:relative;z-index:1}
/* EL SELLO SE SACO EL 28-AGO, A PEDIDO DE SHIR. Era el disco blanco de 96px
   con la firma adentro, asomado sobre el borde de arriba. Sobre el friso de
   grabado se leia como una calcomania. Queda solo el filo. Su CSS, si vuelve:
   body.remate .pie__remate{display:block;position:relative;height:0;z-index:3;
     max-width:1200px;margin:0 auto;padding:0 5%}
   body.remate .pie__sello{position:absolute;left:5%;top:-48px;width:96px;
     height:96px;border-radius:50%;background:#fff;border:3px solid var(--amar);
     display:flex;align-items:center;justify-content:center;
     box-shadow:0 16px 34px rgba(14,47,68,.38)}
   body.remate .pie__sello img{width:56px;height:48px;object-fit:contain}      */
/* Acá vivía `.pie__relieve`: siete elipses concéntricas en el costado derecho,
   dibujadas dos veces con 3px de desfasaje para simular relieve. Se sacó el
   25-ago. Cumplían cuando el pie no tenía otra textura, pero desde que entró el
   friso de grabado a todo el ancho eran dos cosas peleándose en el mismo
   bloque, y el círculo se leía como una mancha suelta al lado del oso. */
/* El filo de marca que se abre desde el centro cuando el pie entra en pantalla. */
body.remate .pie__filo{display:block;position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--amar) 28%,var(--mag) 72%,transparent);
  transform:scaleX(0);transform-origin:center;z-index:2;
  transition:transform 1.15s cubic-bezier(.22,.8,.2,1) .1s}
body.remate .pie.dibujada .pie__filo{transform:scaleX(1)}
@media (max-width:1024px){
  body.remate .pie{padding-top:88px}
}
/* Con movimiento reducido no se anima nada: todo aparece ya puesto. */
@media (prefers-reduced-motion:reduce){
  .flechita__mask{stroke-dashoffset:0;animation:none}
  .flechita__punta{opacity:1;animation:none}
  .flechita.dibujada .flechita__mask,.flechita.dibujada .flechita__punta{animation:none}
  body.remate .pie__filo{transform:scaleX(1);transition:none}
}


/* ═════════════════════ CAPTURA DE MAIL ═════════════════════
   Tres piezas con el mismo formulario adentro:
     .cap    el bloque que va en el contenido. Siempre visible, es contenido
             real de la pagina y por eso es el unico que suma para SEO.
     .pop    la ventana modal. Sale del HTML con `hidden`: el buscador ve una
             pagina normal y el lector no la ve hasta que el JS la abre.
     .franja  la franja de abajo, que es la pieza de mobile.
   Ninguna de las tres empuja contenido al cargar: cero salto de layout. */

/* ── el bloque en linea ── */
.cap{display:grid;grid-template-columns:58px 1fr 330px;gap:26px;align-items:center;
  border-radius:22px;padding:30px 34px;margin:46px auto;max-width:1000px;
  font-family:var(--inter);text-align:left}
.cap--angosta{grid-template-columns:1fr;text-align:center;max-width:520px;gap:18px}
.cap--angosta .cap__ico{margin:0 auto}
.cap__ico{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.cap__ceja{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:8px}
.cap__tit{font-family:var(--anton);font-size:27px;line-height:1.15;letter-spacing:.5px;
  text-transform:uppercase;margin-bottom:10px;text-wrap:balance}
.cap__txt{font-size:14.5px;line-height:1.75;margin:0}
.cap__cnv{font-size:12px;line-height:1.6;margin-top:10px;opacity:.72}
.cap__form{display:flex;flex-direction:column;gap:10px}
.cap__mail{width:100%;padding:14px 16px;border-radius:11px;border:2px solid transparent;
  font-family:inherit;font-size:15px;color:var(--tinta);background:#fff}
.cap__mail:focus{outline:none;border-color:var(--amar)}
.cap__fino{font-size:12px;line-height:1.6;margin-top:10px;text-align:center}
.cap__ok{font-size:14px;font-weight:700;line-height:1.6;margin-top:12px;text-align:center}
.cap__ok[hidden]{display:none}

/* claro, acento magenta */
.cap--mag{background:linear-gradient(135deg,#F8FAFC,#EDF2F6);border:2px solid var(--linea);
  border-left:6px solid var(--mag);color:var(--gris)}
.cap--mag .cap__ico{background:rgba(205,0,70,.10);color:var(--mag)}
.cap--mag .cap__ceja{color:var(--mag)}
.cap--mag .cap__tit{color:var(--tinta)}
.cap--mag .cap__tit2{color:var(--mag)}
.cap--mag .cap__mail{border-color:var(--linea)}
.cap--mag .cap__fino{color:var(--gris2)}
.cap--mag .cap__ok{color:var(--mag)}

/* oscuro, acento amarillo */
.cap--navy,.cap--amar{background:linear-gradient(135deg,var(--navy),var(--tinta));
  border:2px solid rgba(255,255,255,.10);color:rgba(255,255,255,.76)}
/* En las pieles oscuras --tinta vale casi blanco, asi que el degrade de arriba
   terminaba en blanco y se comia el texto. Ahi va de superficie a superficie. */
html[data-oscuro] .cap--navy,html[data-oscuro] .cap--amar{
  background:linear-gradient(135deg,var(--f2),var(--f1));border-color:var(--bd)}
.cap--amar{border-left:6px solid var(--amar)}
.cap--navy{border-left:6px solid var(--amar)}
.cap--navy .cap__ico,.cap--amar .cap__ico{background:rgba(255,202,43,.14);color:var(--amar)}
.cap--navy .cap__ceja,.cap--amar .cap__ceja{color:var(--amar)}
.cap--navy .cap__tit,.cap--amar .cap__tit{color:#fff}
.cap--navy .cap__tit2,.cap--amar .cap__tit2{color:var(--amar)}
.cap--navy .cap__fino,.cap--amar .cap__fino{color:rgba(255,255,255,.45)}
.cap--navy .cap__ok,.cap--amar .cap__ok{color:var(--amar)}
.cap--navy .cap__cnv,.cap--amar .cap__cnv{color:rgba(255,255,255,.5)}

@media (max-width:900px){
  .cap{grid-template-columns:1fr;gap:16px;padding:26px 22px;margin:34px auto;text-align:left}
  .cap__tit{font-size:23px}
}

/* ── la ventana modal ── */
.pop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;font-family:var(--inter)}
.pop[hidden]{display:none}
.pop__fondo{position:absolute;inset:0;background:rgba(14,47,68,.74);
  opacity:0;transition:opacity .3s}
.pop.abierto .pop__fondo{opacity:1}
.pop__caja{position:relative;width:100%;max-width:560px;border-radius:26px;
  padding:46px 46px 30px;text-align:center;
  box-shadow:0 44px 96px rgba(14,47,68,.5);
  opacity:0;transform:translateY(24px) scale(.96);
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,.9,.24,1)}
.pop.abierto .pop__caja{opacity:1;transform:none}
.pop__caja .cap__ceja,.pop__caja .cap__txt{text-align:center}
.pop__ico{width:66px;height:66px;border-radius:20px;display:flex;align-items:center;
  justify-content:center;margin:0 auto 20px}
.pop__tit{font-family:var(--anton);font-size:38px;line-height:1.12;letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:14px;text-wrap:balance}
.pop__caja .cap__txt{font-size:15.5px;margin-bottom:24px}
.pop__caja .cap__form{max-width:400px;margin:0 auto}
.pop__x{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;
  border:0;background:rgba(14,47,68,.07);color:var(--tinta);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.18s}
.pop__x:hover{background:rgba(14,47,68,.14)}
.pop__no{display:block;margin:16px auto 0;border:0;background:none;cursor:pointer;
  font-family:var(--inter);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.pop__caja--mag{background:#fff;color:var(--gris)}
.pop__caja--mag .cap__ceja{color:var(--mag)}
.pop__caja--mag .pop__ico{background:rgba(205,0,70,.10);color:var(--mag)}
.pop__caja--mag .pop__tit{color:var(--tinta)}
.pop__caja--mag .cap__tit2{color:var(--mag)}
.pop__caja--mag .cap__mail{border-color:var(--linea)}
.pop__caja--mag .cap__fino,.pop__caja--mag .pop__no{color:var(--gris2)}
.pop__caja--mag .cap__ok{color:var(--mag)}
.pop__caja--navy,.pop__caja--amar{background:linear-gradient(150deg,var(--navy),#0B2436);
  color:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.10)}
.pop__caja--navy .cap__ceja,.pop__caja--amar .cap__ceja{color:var(--amar)}
.pop__caja--navy .pop__ico,.pop__caja--amar .pop__ico{background:rgba(255,202,43,.14);color:var(--amar)}
.pop__caja--navy .pop__tit,.pop__caja--amar .pop__tit{color:#fff}
.pop__caja--navy .cap__tit2,.pop__caja--amar .cap__tit2{color:var(--amar)}
.pop__caja--navy .pop__x,.pop__caja--amar .pop__x{background:rgba(255,255,255,.10);color:#fff}
.pop__caja--navy .pop__x:hover,.pop__caja--amar .pop__x:hover{background:rgba(255,255,255,.2)}
.pop__caja--navy .cap__fino,.pop__caja--amar .cap__fino,
.pop__caja--navy .pop__no,.pop__caja--amar .pop__no{color:rgba(255,255,255,.45)}
.pop__caja--navy .cap__ok,.pop__caja--amar .cap__ok{color:var(--amar)}
.pop__caja--navy .cap__cnv,.pop__caja--amar .cap__cnv{color:rgba(255,255,255,.5)}
@media (max-width:600px){
  .pop__caja{padding:36px 24px 24px;border-radius:20px}
  .pop__tit{font-size:29px}
}

/* ── la franja de abajo ── */
.franja{position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:linear-gradient(100deg,var(--tinta),var(--navy));
  border-top:2px solid var(--amar);box-shadow:0 -14px 40px rgba(14,47,68,.36);
  transform:translateY(115%);transition:transform .45s cubic-bezier(.22,.9,.24,1);
  font-family:var(--inter)}
.franja[hidden]{display:none}
.franja.abierta{transform:none}
.franja__int{max-width:1200px;margin:0 auto;padding:14px 5%;display:flex;align-items:center;
  gap:22px}
.franja__txt{flex:1 1 auto;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.65);margin:0}
.franja__txt strong{display:block;color:#fff;font-family:var(--anton);font-size:19px;
  letter-spacing:.5px;text-transform:uppercase;font-weight:400}
/* Los dos `min-width:0` son el arreglo del 8-sep-2026, y no son de adorno: un
   item flex arranca en `min-width:auto`, o sea que no baja de su ancho minimo
   de contenido. El del campo de mail es 234px, y el boton mide entre 179px
   ("Quiero leerlo") y 268px ("Sumarme al newsletter") segun la zona: la fila
   pedia hasta 510px adentro de una franja de 351, y el boton se iba hasta
   139px afuera de la pantalla en un telefono de 390. Estaban cortadas las 18
   zonas. No lo caza un chequeo de scrollWidth, porque la franja es `fixed` y
   no desborda el documento: hay que medir el rectangulo del boton contra
   innerWidth, que es lo que hace
   `_generador/verificar_franja_navegador.py`.

   Los 420px de ancho (antes 390) son por el mismo boton de 268: con 390 al
   campo le quedaban 114px y no se puede escribir un mail ahi. Solo se usan de
   761 a 900, que es donde la franja se ve con la maqueta de escritorio. */
.franja__form{flex:0 0 auto;width:420px;min-width:0}
.franja__form .cap__form{flex-direction:row;gap:8px}
.franja__form .cap__mail{width:auto;flex:1 1 auto;min-width:0;border-color:transparent}
.franja__form .btn{width:auto;flex:0 0 auto;padding:14px 20px;white-space:nowrap}
.franja__form .cap__fino{display:none}
.franja__form .cap__ok{color:var(--amar);margin:0}
.franja__x{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.10);color:#fff;display:flex;align-items:center;justify-content:center}
.franja__x:hover{background:rgba(255,255,255,.2)}
/* Los dos botones flotantes suben cuando la franja esta abierta, si no quedan
   tapados justo cuando mas se los necesita.

   Los numeros son el alto real de la franja + 12px de aire, medido el
   8-sep-2026 en Chrome sin ventana sobre las 18 zonas de captura: 159px de 761
   a 900 (arriba de 900 el JS ya no muestra la franja, `chico()` corta en 900),
   133px de 461 a 760, y 209px abajo de 460, que es donde el campo y el boton
   se apilan. El `.arriba` va 68px mas arriba: 58 del boton de WhatsApp y 10 de
   aire. Los de antes (100 y 168) estaban calculados sobre una franja de 81px,
   que es la que se ve solo arriba de 900, o sea nunca: la franja le tapaba el
   WhatsApp entre 24 y 59px. Si cambia el texto de una zona, hay que volver a
   medir. */
/* El `html` de adelante no es de adorno: en las 11 paginas que ademas tienen
   la barra de agendar, `body.sv-fija-on .wa{bottom:96px}` vive en el bloque
   generado de paginas de servicio, mas abajo y con la misma especificidad, y
   ganaba por orden. Con las dos barras prendidas la que se ve es la franja
   (z-index 150 contra 90), asi que es la que tiene que mandar. */
html body.franja-on .wa{bottom:171px}
html body.franja-on .arriba{bottom:239px}
@media (max-width:760px){
  .franja__int{flex-wrap:wrap;gap:10px;padding:12px 5% 14px}
  .franja__txt{flex:1 1 100%;font-size:13px;padding-right:40px}
  .franja__txt strong{font-size:16px}
  .franja__form{flex:1 1 100%;width:auto}
  .franja__x{position:absolute;right:14px;top:12px}
  html body.franja-on .wa{bottom:145px}
  html body.franja-on .arriba{bottom:213px}
}
/* Abajo de 460px ya no entran los dos en fila. Con el boton mas largo del
   sitio ("Sumarme al newsletter", 268px) al campo le quedarian menos de 120px,
   que no alcanza para escribir un mail: mejor apilados. El corte sale de la
   cuenta: 0.9 x ancho - 8 de hueco - 268 de boton >= 120 da 440px, y 460 deja
   aire. Apilada la franja mide 209px y no 133, asi que los flotantes suben. */
@media (max-width:460px){
  .franja__form .cap__form{flex-direction:column}
  .franja__form .btn{width:100%}
  html body.franja-on .wa{bottom:221px}
  html body.franja-on .arriba{bottom:289px}
}
/* Con el modal abierto no se scrollea el fondo. */
body.pop-on{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .pop__fondo,.pop__caja,.franja{transition:none}
}

/* La caja de captura cuando va suelta entre dos secciones: toma el margen
   lateral del sitio y aporta su propio aire, no el de una seccion entera.

   VA SOBRE NAVY Y NO SOBRE BLANCO. Esta banda es lo ultimo antes del pie, y en
   blanco cortaba la pagina en dos justo ahi: quedaba una franja clara metida
   entre el bloque navy de arriba y el pie oscuro. Ahora la seccion es navy y la
   caja pasa a panel translucido, que es el mismo recurso que ya usan las
   tarjetas sobre navy en el resto del sitio.

   EL AIRE GRANDE DE ABAJO VA SOLO CUANDO LA CAJA ES LO ULTIMO ANTES DEL PIE.
   Medido el 25-ago sobre las 20 paginas que llevan la caja: en 18 hay dos o
   tres secciones mas despues, y ahi un padding grande abajo no arregla nada,
   mete un hueco en el medio de la pagina. Solo en 2 (/plantilla-presupuesto y
   /recursos) la caja toca el pie, y son las unicas donde el sello de la firma
   se le venia encima, porque el disco de 96px asoma sobre el borde del pie.
   Por eso el `:last-child`: apunta exactamente a ese caso. El sello y el pie
   viven AFUERA de <main>, asi que la caja pegada al pie es la que cierra el
   <main>. Probe primero con `:has(+ .pie__remate)` y no matcheaba nunca por eso
   mismo: no son hermanos. */
.sec--cap{background:var(--navy);padding:56px 5% 72px}
main > .sec--cap:last-child{padding-bottom:104px}

/* EL AIRE PARA EL SELLO, EN LA ULTIMA SECCION DE CUALQUIER PAGINA.
   El disco de la firma mide 96px y asoma 48px por arriba del borde del pie. Con
   los 100px de padding que traia la ultima seccion, su borde de arriba quedaba a
   52px del ultimo renglon de texto y se leia encimado. Con 160 queda a 112px.
   Va en `section:last-of-type` y no en `*:last-child` porque /mercados cierra el
   <main> con un <script>, que no tiene padding: apuntar al ultimo hijo no
   agarraba nada justo en esa pagina.
   La regla de .sec--cap de arriba es mas especifica y gana con sus 176, que es
   el valor que deja el aire de arriba y el de abajo iguales en esas 2 paginas. */
main > section:last-of-type{padding-bottom:104px}
.sec--cap .cap{margin:0 auto;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  border-left-color:var(--amar);color:rgba(255,255,255,.76)}
.sec--cap .cap__ico{background:rgba(255,202,43,.14);color:var(--amar)}
.sec--cap .cap__ceja{color:var(--amar)}
.sec--cap .cap__tit{color:#fff}
.sec--cap .cap__tit2{color:var(--amar)}
.sec--cap .cap__mail{border-color:rgba(255,255,255,.18)}
/* .66 y no .5: sobre el panel translucido (que compuesto da rgb(40,70,92)) el
   .5 daba 3,80:1 en un texto de 12px, abajo del minimo de 4,5. Con .66 da 5,2. */
.sec--cap .cap__fino,.sec--cap .cap__cnv{color:rgba(255,255,255,.66)}
.sec--cap .cap__ok{color:var(--amar)}

/* En mobile el aire de arriba baja a 92px (las secciones achican su padding),
   asi que el de abajo lo acompaña o queda al reves de desbalanceado: con los
   176 de desktop la caja quedaba pegada arriba y suelta abajo. Y el sello acá
   mide 78px con top:-39px, asi que 92 le deja 53px libres, de sobra. */
@media (max-width:900px){
  .sec--cap{padding:36px 5% 56px}
  main > .sec--cap:last-child{padding-bottom:92px}
  /* Acá el sello mide 78px y asoma 39: con 120 su borde queda a 81px del texto,
     que es la misma proporcion que los 112 de desktop. */
  main > section:last-of-type{padding-bottom:120px}
}
/* El cartel de confirmacion que el motor crea cuando el formulario heredado de
   un articulo no trae uno propio. */
.cap__ok--suelto{font-family:var(--inter);font-size:14px;font-weight:700;color:var(--mag);
  line-height:1.6;margin:10px 0}


/* ═════════════════════ LAS 15 CALCULADORAS ═════════════════════
   Una pieza por pagina, en /calculadoras/<slug>. El resultado se recalcula
   solo mientras la persona escribe: no hay boton de calcular. Todo el JS va
   en la propia pagina, sin librerias y sin pedir nada a la red. */
.sec--calc{padding-top:56px}
.calc{border:2px solid var(--linea);border-radius:22px;padding:30px 32px;background:#fff;
  font-family:var(--inter);box-shadow:0 14px 40px rgba(14,47,68,.07)}
.calc__nota{text-align:center;font-size:13px;color:var(--gris2);margin-top:16px;font-family:var(--inter)}

/* ── el selector de modo ── */
.calc__modos{display:flex;flex-wrap:wrap;gap:6px;background:#F1F4F7;border-radius:14px;
  padding:6px;margin-bottom:24px}
.calc__modo{flex:1 1 auto;border:0;cursor:pointer;border-radius:10px;padding:11px 14px;
  font-family:var(--inter);font-size:14px;font-weight:600;color:var(--gris);background:none;
  transition:.16s;white-space:nowrap}
.calc__modo:hover{color:var(--tinta)}
.calc__modo.on{background:#fff;color:var(--mag);font-weight:700;box-shadow:0 2px 8px rgba(14,47,68,.10)}

/* ── los campos ── */
.calc__campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc__campo[hidden]{display:none}
.calc__label{display:block;font-size:13.5px;font-weight:600;color:var(--tinta);margin-bottom:7px}
.calc__caja{display:flex;align-items:center;border:2px solid var(--linea);border-radius:12px;
  background:#fff;transition:border-color .16s}
.calc__caja:focus-within{border-color:var(--mag)}
.calc__caja input{width:100%;border:0;background:none;outline:none;padding:13px 12px;
  font-family:var(--inter);font-size:16px;font-weight:600;color:var(--tinta);min-width:0}
.calc__pre{padding-left:13px;color:var(--gris2);font-weight:700;font-size:15px}
.calc__suf{padding-right:13px;color:var(--gris2);font-weight:600;font-size:14px;white-space:nowrap}
.calc__ayuda{display:block;font-size:12px;line-height:1.55;color:var(--gris2);margin-top:6px;text-wrap:pretty}

/* ── el resultado ── */
.calc__vacio{margin-top:24px;padding:30px 22px;border-radius:14px;background:#F7F9FB;
  text-align:center;font-size:14.5px;color:var(--gris2);line-height:1.7}
.calc__vacio[hidden],.calc__res[hidden]{display:none}
.calc__res{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.calc__titular{background:linear-gradient(135deg,var(--navy),var(--tinta));border-radius:16px;
  padding:26px 20px;text-align:center}
.calc__titular-et{font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--amar);margin-bottom:8px}
.calc__titular-v{font-family:var(--anton);font-size:44px;line-height:1.05;color:#fff;letter-spacing:.5px}
.calc__cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.calc__cifra{border:2px solid var(--linea);border-radius:14px;padding:15px 12px;text-align:center;
  background:#FBFCFD}
.calc__cifra-et{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--gris2);line-height:1.35;margin-bottom:7px;text-wrap:balance}
.calc__cifra-v{font-family:var(--inter);font-size:19px;font-weight:800;color:var(--tinta);
  line-height:1.2;text-wrap:balance}

/* ── el grafico ── */
.calc__graf{border:2px solid var(--linea);border-radius:14px;padding:16px 18px 12px}
.calc__graf-et{font-size:12.5px;font-weight:700;color:var(--gris);margin-bottom:12px}
.calc__svg{display:block;width:100%;height:140px}
.calc__svg rect{fill:var(--mag);opacity:.82}
.calc__graf-pie{display:flex;justify-content:space-between;gap:12px;margin-top:9px;
  font-size:11.5px;font-weight:700;color:var(--gris2)}

/* ── el bloque que interpreta el número ── */
.calc__explica{border-left:5px solid var(--amar);background:rgba(255,202,43,.10);
  border-radius:0 14px 14px 0;padding:18px 22px}
.calc__explica-et{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--tinta);margin-bottom:8px}
.calc__explica-et svg{color:var(--mag);flex:0 0 auto}
.calc__explica p{font-size:15px;line-height:1.75;color:var(--gris);text-wrap:pretty}

/* ── la prosa de "qué está haciendo" ── */
.calc__prosa{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.calc__prosa p{font-size:16px;line-height:1.85;color:var(--gris);font-family:var(--inter);text-wrap:pretty}

/* ── la tarjeta del índice ── */
.calc-tarj{display:flex;flex-direction:column;background:#fff;border:2px solid var(--linea);
  border-radius:20px;padding:28px 26px;transition:transform .2s,box-shadow .2s,border-color .2s;
  font-family:var(--inter);height:100%}
.calc-tarj:hover{transform:translateY(-4px);border-color:var(--mag);box-shadow:0 16px 36px rgba(14,47,68,.13)}
.calc-tarj h3{font-size:18px;font-weight:700;color:var(--tinta);margin:16px 0 8px;line-height:1.3}
.calc-tarj p{font-size:14.5px;line-height:1.7;color:var(--gris);flex-grow:1}
.calc-tarj__ir{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;
  font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mag)}
.calc-tarj:hover .calc-tarj__ir{gap:11px}
.sec--navy .calc-tarj{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.sec--navy .calc-tarj h3{color:#fff}
.sec--navy .calc-tarj p{color:rgba(255,255,255,.7)}
.sec--navy .calc-tarj__ir{color:var(--amar)}
.sec--navy .calc-tarj:hover{border-color:var(--amar)}

@media (max-width:900px){
  .calc{padding:24px 20px;border-radius:18px}
  .calc__campos{grid-template-columns:1fr;gap:15px}
  .calc__cifras{grid-template-columns:1fr 1fr}
  .calc__titular-v{font-size:34px}
  .calc__modo{font-size:13px;padding:10px 10px}
}
@media (max-width:480px){
  .calc__titular-v{font-size:28px}
  .calc__cifra-v{font-size:17px}
  .calc__modos{flex-direction:column}
}

/* ── el pie a seis columnas, achicándose ── */
@media (max-width:1300px){
  .pie__cols{grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:34px}
  .pie__news{grid-column:span 2}
}
@media (max-width:980px){
  .pie__cols{grid-template-columns:1fr 1fr 1fr;gap:30px}
  .pie__marca-col{grid-column:span 3}
  .pie__marca-col p{max-width:560px}
  .pie__news{grid-column:span 3}
  .pie__news p{max-width:560px}
  .pie__news .cap__form{max-width:420px}
}
@media (max-width:640px){
  .pie{padding-left:6%;padding-right:6%}
  .pie__cols{grid-template-columns:1fr 1fr;gap:26px}
  .pie__marca-col,.pie__news{grid-column:span 2}
  .pie__abajo{flex-direction:column;align-items:flex-start}
}
@media (max-width:400px){
  .pie__cols{grid-template-columns:1fr}
  .pie__marca-col,.pie__news{grid-column:span 1}
}

/* ═══════════════════ LAS PIEZAS DE GRABADO ═══════════════════
   La serie de laminas en negativo: linea crema sobre negro, un solo acento
   ambar. Los prompts viven en la carpeta 34, archivo 03-PROMPTS-MERCADOS.
   Mientras el archivo de cada pieza no exista, el generador no escribe el
   elemento y ninguna de estas reglas llega a aplicarse. */

/* LAS LAMINAS NO SON TARJETAS: NO LLEVAN CAJA, NI BORDE, NI ESQUINA REDONDEADA.
   Antes tenian `border-radius` y se leian como una foto pegada encima de la
   pagina. Ahora el PNG viene recortado con alpha desde `img_sitio._sin_fondo()`,
   asi que lo unico que hay es la tinta: el fondo de la seccion se ve a traves.
   Van al FINAL de su seccion, con margen arriba y no abajo, porque rematan el
   bloque en vez de encabezarlo.
   La opacidad las baja de tono para que acompañen al texto en lugar de
   competirle: son ilustracion de apoyo, no el contenido. */
.merc__lam{margin:52px auto 0;max-width:1000px;opacity:.62}
.merc__lam img{width:100%;height:auto;display:block}
.merc__lam--ancha{max-width:1200px;margin-top:44px}
@media (max-width:900px){
  .merc__lam{margin-top:36px;opacity:.7}
}

/* El apoyo que acompana al bloque de Balanz. Va chico y centrado: ese bloque
   ya tiene titular, tres tarjetas y el boton. La imagen acompana, no manda. */
.balanz-fig{max-width:720px;margin:32px auto 0;opacity:.72}
.balanz-fig img{width:100%;height:auto;display:block}

/* ── Las dos planchas verticales de los costados ──
   Son una COLUMNA de la grilla, no un elemento en posicion absoluta. Con
   posicion absoluta habria que esperar a que la pantalla tenga margen sobrante
   afuera de los 1200px de .sec__int, que recien pasa arriba de 1700px. Como
   columna entran desde 1180. La seccion se ensancha a 1400 (sec__int--ancho)
   solo cuando hay plancha, para que la lista no quede mas angosta que en el
   resto de la pagina. */
/* 240 y no 180: a 180 la plancha quedaba tan chica que no se leia que dibujo
   era. Con 240 la lista de instrumentos pasa de 4 columnas a 3, que ademas
   ordena mejor las 5 tarjetas (3+2 en vez de 4+1). */
.conlam{display:grid;gap:44px;align-items:start}
.conlam--izq{grid-template-columns:240px minmax(0,1fr)}
.conlam--der{grid-template-columns:minmax(0,1fr) 240px}
.conlam__c{min-width:0}
.lam{position:sticky;top:104px}
.lam img{width:100%;height:auto;display:block;opacity:.72}

@media (max-width:1180px){
  .conlam{grid-template-columns:1fr}
  .lam{display:none}
}

/* ── El friso ──
   A todo el ancho y en el borde de ARRIBA, no abajo a la derecha: ahi ya vive
   .pie__relieve con sus 460px de curvas de nivel, y dos piezas en la misma
   esquina se pelean. Ademas el sello de la firma ya esta asomado sobre ese
   mismo borde: con la banda corriendo por ahi deja de leerse como una
   calcomania suelta y pasa a ser el centro de una cornisa.
   Entra en los 104px de padding que body.remate ya reserva arriba, va muy
   tenue y se desvanece hacia abajo con una mascara, porque atras estan las
   cuatro columnas de links y los legales, que no pueden costar un lector. */
/* EL ALTO VA EN vw, NO EN px, Y ESA ES LA REGLA QUE IMPORTA.
   Con alto fijo, la fraccion visible de la banda cambiaba con el ancho de la
   pantalla: la imagen es 4,73:1, asi que a todo el ancho de 1920 se dibuja de
   406px de alto y una caja de 132px mostraba el 32% de arriba; a 390px de
   viewport mostraba el 90%. La misma pieza se leia distinta en cada
   dispositivo, y en desktop cortaba el toro, el oso y las velas por abajo.
   Con el alto atado al ancho (100/4,73 = 21,14vw) la proporcion es constante y
   se ve la banda ENTERA en todos los anchos: 406px a 1920, 176 a 834, 82 a 390.
   Si algun dia cambia la proporcion de la imagen, este numero cambia con ella.
   `background-position:center` y no `center top` por lo mismo: el prompt pedia
   aire arriba de las figuras, asi que anclar arriba mostraba el vacio. */
/* LA OPACIDAD ES .18 Y NO .26 POR CONTRASTE, NO POR GUSTO.
   Al pasar la banda de 132 a 406px se metio 302px por detras de las columnas de
   links. Medido sobre los pixeles reales del friso, en el peor caso (la linea
   mas clara del grabado justo abajo de un link): a .26 daba 4,82:1 sobre el pie
   de /mercados pero 3,95:1 sobre el #0E2F44 del resto del sitio, abajo del
   minimo de 4,5. A .18 da 6,09:1 y 4,86:1. Si se cambia la imagen del friso por
   una mas clara, hay que volver a medir esto antes de subir la opacidad. */
.pie__friso{position:absolute;left:0;top:0;width:100%;height:21.14vw;z-index:0;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  opacity:.18;pointer-events:none;
  /* LA MASCARA SE APAGA EN 72% Y NO EN 100% POR UNA RAZON MEDIDA.
     El grabado trae una regla horizontal recta en el 76% de su alto: medido
     sobre los pixeles, esa franja tiene brillo 143 contra 31 de media, o sea
     4,6 veces el resto. Cayendo en el 76% de una banda de 406px queda a 309px
     del borde del pie, que es exactamente la altura de la cuarta fila de links,
     y cruzaba las cuatro columnas de lado a lado como un tachon.
     Cortando la mascara en 72% esa regla no llega a dibujarse. Lo que se pierde
     es la fila de velas de abajo; el toro, el oso y la ciudad viven arriba del
     60% y quedan enteros. Si se cambia la imagen del friso hay que volver a
     medir donde cae su linea antes de mover este numero. */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 38%,transparent 72%);
  mask-image:linear-gradient(to bottom,#000 0,#000 38%,transparent 72%)}

@media (max-width:900px){
  .pie__friso{opacity:.14}
}
@media (prefers-reduced-motion:no-preference){
  .pie__friso{transition:opacity .7s ease .15s}
  body.remate .pie:not(.dibujada) .pie__friso{opacity:0}
}

/* ═══════════════ LAS CAPTURAS REALES DE LA APERTURA ═══════════════
   Un articulo que explica como abrir una cuenta se gana la confianza mostrando
   la pantalla de verdad, no una ilustracion de una pantalla. Por eso estas van
   como captura y no como grabado: son las unicas imagenes del universo Balanz
   que NO son de la serie de laminas.
   .caps--alta es para las capturas verticales de telefono (376x720): mas
   columnas y mas angostas. Las apaisadas de escritorio (740x460) van con la
   base, que da columnas mas anchas. */
.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:22px;margin:30px 0 14px}
.caps--alta{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.caps__i{margin:0;display:flex;flex-direction:column;gap:9px}
.caps__i img{width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid var(--linea);background:#fff}
.caps__i figcaption{font-family:var(--inter);font-size:12.5px;line-height:1.5;
  color:var(--gris);display:flex;gap:7px;align-items:baseline}
.caps__i figcaption b{font-family:var(--anton);font-size:14px;color:var(--mag);
  flex:0 0 auto;line-height:1.2}
.caps__pie{font-family:var(--inter);font-size:13px;line-height:1.6;
  color:var(--gris2);border-left:3px solid var(--linea);padding-left:14px;
  margin-bottom:8px}

@media (max-width:520px){
  .caps,.caps--alta{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
}

/* === LANDINGS DE PRODUCTO · generado por _MOTOR/css_landing.py — NO EDITAR A MANO === */
/* ───────────────────────────── MIGAS ───────────────────────────── */
.migas-prod{background:#F7F9FB;border-bottom:1px solid var(--linea);padding:14px 5%;font-size:13px;color:var(--gris)}
.migas-prod a{color:var(--mag);font-weight:600}
.migas-prod a:hover{text-decoration:underline}

/* ─────────────────────── HERO DE PRODUCTO ─────────────────────── */
/* Ojo: .sec trae `padding:100px 5%`. Si acá se pisa el padding con `0`
   horizontal, el hero pierde el margen lateral y en celular el texto sale
   pegado al borde y se corta. Se pisa solo el vertical. */
.phx{padding:70px 5% 80px}
/* Tres áreas, no dos columnas. En escritorio el texto se parte en dos filas a
   la izquierda y la tapa ocupa la derecha entera; en celular el orden queda
   titular -> tapa -> botón. Ver el comentario de `hero()` en landing.py. */
.phx__grid{display:grid;grid-template-columns:1.05fr .95fr;
  grid-template-areas:"head arte" "accion arte";gap:0 60px;align-items:center}
.phx__head{grid-area:head}
.phx__arte{grid-area:arte}
.phx__accion{grid-area:accion}
.phx__grid--solo{grid-template-columns:1fr;grid-template-areas:"head" "accion";max-width:820px}
.ceja--claro{color:var(--amar)}
.phx__h1{font-family:var(--anton);font-weight:400;font-size:clamp(38px,5.2vw,64px);line-height:1.04;
  color:#fff;text-transform:uppercase;letter-spacing:.5px;margin:0 0 20px;text-wrap:balance}
.phx__h1 .amar{color:var(--amar)}
.phx__desc{font-size:18px;line-height:1.75;color:rgba(255,255,255,.86);margin:0 0 26px;max-width:56ch}
.phx__bul{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:11px}
.phx__bul li{display:flex;align-items:flex-start;gap:11px;color:#fff;font-size:16px;line-height:1.5}
.phx__bul li svg{color:var(--amar);flex:0 0 auto;margin-top:3px}

.phx__precio{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.phx__ancla{font-size:20px;color:rgba(255,255,255,.45);text-decoration:line-through}
.phx__num{font-family:var(--anton);font-size:46px;color:var(--amar);line-height:1}
.phx__num--gratis{color:#fff}
.phx__pago{font-size:13px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1.4px}
.phx__fudline{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.phx__fud{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:rgba(255,255,255,.72)}
.phx__fud svg{color:var(--amar)}
/* La tapa se sale del PDF y cae sobre un fondo navy casi del mismo tono que
   ella. Sin un borde y un halo, la imagen no se lee como un objeto: se lee
   como una mancha más oscura del fondo. El anillo claro y la peana son lo que
   la despegan. */
.phx__arte{position:relative;display:flex;justify-content:center}
.phx__arte::after{content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  width:74%;height:46px;border-radius:50%;background:rgba(0,0,0,.34);filter:blur(22px)}
/* Se acota por ALTO y no por ancho, porque en el catálogo conviven tapas de
   libro (verticales, 0,7) con capturas de tablero (apaisadas, 1,3) y con la
   captura de la planilla (muy apaisada, 3,3). Con un ancho fijo, la vertical
   quedaba bien y la apaisada quedaba diminuta. Con alto tope, las tres ocupan
   un espacio parecido. */
.phx__arte img{position:relative;z-index:1;width:auto;height:auto;
  max-width:100%;max-height:560px;margin:0 auto;
  border-radius:14px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 10px rgba(255,255,255,.04)}

/* ─────────────────── TARJETAS DE /TIENDA CON TAPA ─────────────────── */
/* Las tapas de los libros son verticales (0,7) y las capturas de tablero son
   apaisadas (1,3). Metidas crudas en la grilla, cada tarjeta arranca a una
   altura distinta y la página se ve rota. La caja de tapa fija la proporción y
   la imagen entra completa adentro, sobre navy. */
.prod__tapa--img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:var(--navy);overflow:hidden;padding:18px;border-radius:0}
.prod__tapa--img img{width:auto;height:100%;max-width:100%;object-fit:contain;
  border-radius:4px;box-shadow:0 10px 26px rgba(0,0,0,.34)}
.prod__ceja{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.4px;color:var(--mag);margin-bottom:8px}
.prod__precio s{color:var(--gris2);font-weight:500;margin-right:6px}
/* El ancla vieja existe solo para que no se rompan los enlaces ya publicados
   (/tienda#deuda-cero y compañía). No ocupa lugar y no se ve, pero sí es un
   destino válido de scroll, con aire arriba para que no quede bajo la
   cabecera fija. */
.ancla-vieja{display:block;height:0;scroll-margin-top:110px}

/* ───────────────────── BARRA DE PRUEBA SOCIAL ───────────────────── */
.sec--prueba{background:#F7F9FB;padding:26px 5%;border-bottom:1px solid var(--linea)}
.barra-prueba{display:flex;gap:44px;flex-wrap:wrap;justify-content:center}
.pruebita{display:flex;align-items:center;gap:13px;max-width:400px}
.pruebita__ic{width:44px;height:44px;border-radius:50%;background:rgba(205,0,70,.09);color:var(--mag);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pruebita strong{display:block;font-size:15px;color:var(--tinta);line-height:1.3}
.pruebita p{font-size:13px;color:var(--gris);margin:2px 0 0;line-height:1.45}

/* ──────────────────────────── DOLOR ──────────────────────────── */
.tarj--dolor h3{color:var(--tinta)}

/* ──────────────────────────── AGITA ──────────────────────────── */
.sec--agita{padding:64px 5%}
.agita{font-family:var(--inter);font-weight:700;font-size:clamp(22px,3vw,32px);line-height:1.45;
  color:#fff;text-align:center;max-width:900px;margin:0 auto;text-wrap:balance}

/* ────────────────────── LO QUE VAS A LOGRAR ────────────────────── */
.tarj--logro h3{color:var(--tinta)}

/* ─────────────── SIN SISTEMA / CON EL SISTEMA ─────────────── */
.contraste{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
.contraste__col{border-radius:18px;padding:32px 30px}
.contraste__col h3{font-size:15px;text-transform:uppercase;letter-spacing:1.6px;
  margin-bottom:20px;font-family:var(--urb);font-weight:900}
.contraste__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contraste__col li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.6}
.contraste__col li svg{flex:0 0 auto;margin-top:4px}
.contraste__col--antes{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.contraste__col--antes h3{color:rgba(255,255,255,.55)}
.contraste__col--antes li{color:rgba(255,255,255,.6)}
.contraste__col--antes li svg{color:rgba(255,255,255,.4)}
.contraste__col--despues{background:rgba(255,202,43,.09);border:1px solid rgba(255,202,43,.34)}
.contraste__col--despues h3{color:var(--amar)}
.contraste__col--despues li{color:#fff}
.contraste__col--despues li svg{color:var(--amar)}

/* ─────────────────────── TABLA DE ENTREGA ─────────────────────── */
.tabla-envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-entrega{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tabla-entrega th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--gris2);padding:0 14px 12px;border-bottom:2px solid var(--linea)}
.tabla-entrega td{padding:15px 14px;border-bottom:1px solid var(--linea);color:var(--tinta);vertical-align:top}
.tabla-entrega code{background:#F7F9FB;border:1px solid var(--linea);border-radius:6px;padding:3px 8px;
  font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tinta);word-break:break-all}
.entrega__nota{margin-top:20px;font-size:14px;color:var(--gris);line-height:1.7}
.entrega__licencia{margin-top:12px;font-size:13.5px;color:var(--gris2);line-height:1.7;
  display:flex;align-items:flex-start;gap:9px}
.entrega__licencia svg{color:var(--amar);flex:0 0 auto;margin-top:4px}
.entrega__licencia strong{color:var(--tinta)}

/* ───────────────────────── PARA QUIÉN ───────────────────────── */
.pq__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pq{border-radius:18px;padding:32px 30px;border:1px solid var(--linea);background:#fff;
  box-shadow:0 10px 30px rgba(14,47,68,.06)}
.pq h3{display:flex;align-items:center;gap:11px;font-size:19px;margin-bottom:18px;color:var(--tinta)}
.pq ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:11px}
.pq li{font-size:15.5px;line-height:1.65;color:var(--gris)}
.pq--si{border-top:4px solid var(--mag)}
.pq--si h3 svg{color:var(--mag)}
.pq--no{border-top:4px solid var(--gris2);background:#FAFBFC}
.pq--no h3 svg{color:var(--gris2)}

/* ──────────────────────── CAJA DE OFERTA ──────────────────────── */
.sec--oferta{background:#F7F9FB;padding:80px 5%}
.oferta{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border-radius:22px;overflow:hidden;
  background:#fff;box-shadow:0 26px 64px rgba(14,47,68,.14)}
.oferta__izq{padding:44px 44px 40px}
.oferta__tit{font-size:27px;line-height:1.25;color:var(--tinta);margin:6px 0 22px;font-weight:800}
.oferta__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.oferta__lista li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--gris);line-height:1.55}
.oferta__lista li svg{color:var(--mag);flex:0 0 auto;margin-top:4px}
.oferta__der{background:var(--tinta);color:#fff;padding:44px 38px;display:flex;flex-direction:column;
  justify-content:center;text-align:center}
.oferta__antes{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:6px}
.oferta__antes s{color:rgba(255,255,255,.55)}
.oferta__num{font-family:var(--anton);font-size:56px;color:var(--amar);line-height:1;display:block}
.oferta__num--txt{font-size:30px}
.oferta__pago{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;
  color:rgba(255,255,255,.6);margin-top:10px}
.oferta__precio{margin-bottom:26px}
.oferta__der .btn{width:100%}
.oferta__fud{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:16px;line-height:1.6}
.garantia{display:flex;align-items:center;gap:18px;max-width:800px;margin:32px auto 0;
  background:#fff;border:1px solid var(--linea);border-left:4px solid var(--amar);
  border-radius:14px;padding:22px 26px}
.garantia svg{color:var(--amar);flex:0 0 auto}
.garantia div{font-size:15px;color:var(--gris);line-height:1.65}
.garantia strong{color:var(--tinta)}

/* ─────────────────── BARRA FIJA DE COMPRA (MÓVIL) ─────────────────── */
/* El 95% del trafico entra por celular. Sin esto, quien llega al final de la
   pagina tiene que volver a subir para comprar, y la mitad no vuelve. */
.barra-fija{display:none}
@media (max-width:900px){
  .barra-fija{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;
    border-top:1px solid var(--linea);box-shadow:0 -8px 26px rgba(14,47,68,.13);
    padding:10px 4% calc(10px + env(safe-area-inset-bottom))}
  .barra-fija__int{display:flex;align-items:center;gap:14px;max-width:640px;margin:0 auto}
  .barra-fija__txt{flex:1;min-width:0;line-height:1.25}
  .barra-fija__txt strong{display:block;font-size:13.5px;color:var(--tinta);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra-fija__txt span{font-size:15px;font-weight:800;color:var(--mag)}
  .barra-fija__btn{width:auto!important;flex:0 0 auto;padding:13px 22px!important}
  body.remate .pie{padding-bottom:96px}
}

/* ──────────────────────────── RESPONSIVE ──────────────────────────── */
@media (max-width:1024px){
  .phx__grid{grid-template-columns:1fr;grid-template-areas:"head" "arte" "accion";gap:32px}
  .phx__arte img{max-height:320px}
  .phx__arte::after{width:60%;bottom:-18px;height:32px}
  .oferta{grid-template-columns:1fr}
  .pq__grid{grid-template-columns:1fr}
  .contraste{grid-template-columns:1fr}
}
@media (max-width:640px){
  .phx{padding:44px 5% 56px}
  .phx__num{font-size:38px}
  .phx__arte img{max-height:250px}
  .oferta__izq,.oferta__der{padding:32px 24px}
  .oferta__num{font-size:44px}
  .barra-prueba{gap:20px;flex-direction:column;align-items:flex-start}
  .garantia{flex-direction:column;text-align:center;gap:12px}
}

/* === FIN LANDINGS DE PRODUCTO === */

/* ════════════════════════════════════════════════════════════════════════
   EL INFORME DE MERCADO  ·  /mercados
   ────────────────────────────────────────────────────────────────────────
   Tres paginas de lectura corrida adentro de una pagina que hasta aca fue
   toda tablero. Por eso rompe con el ancho del resto: el tablero usa los
   1200px enteros porque son fichas que se leen de un vistazo, y esto es
   texto, que arriba de 70 caracteres por renglon se lee peor. La columna va
   a 760px y centrada.

   El cuerpo lo escribe el JavaScript (informe.py). Estas clases son el
   contrato: si cambia el motor, tienen que seguir existiendo estas.
   ════════════════════════════════════════════════════════════════════════ */
.inf{max-width:1200px;margin:0 auto}

/* ── la cabecera: titulo a la izquierda, sello de fecha a la derecha ── */
.inf__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  flex-wrap:wrap;padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid var(--linea)}
.inf__cab-tx{flex:1 1 460px;min-width:0}
.inf__ceja{display:inline-flex;align-items:center;gap:8px;font-family:var(--inter);
  font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--amar);margin-bottom:12px}
.inf__h{font-family:var(--anton);font-size:44px;font-weight:600;line-height:1.02;
  letter-spacing:1px;text-transform:uppercase;color:var(--tinta)}
.inf__baj{font-size:15px;line-height:1.7;color:var(--gris);margin-top:10px;max-width:620px}
.inf__sello{flex:0 1 320px;font-size:11.5px;line-height:1.6;color:var(--gris2);
  text-align:right;padding-bottom:4px}
.inf__sello--viejo{color:var(--amar)}
.inf__cargando{font-size:15px;line-height:1.7;color:var(--gris2);
  max-width:760px;margin:0 auto;padding:26px 0}

/* ── la columna de lectura ── */
.inf__cuerpo{max-width:760px;margin:0 auto}
.inf__cuerpo p{font-size:17px;line-height:1.85;color:var(--gris);margin-bottom:18px}
.inf__cuerpo p b,.inf__cuerpo li b{color:var(--tinta);font-weight:700}

/* ── titular y bajada del dia ── */
.inf__tit{font-family:var(--anton);font-size:34px;font-weight:600;line-height:1.12;
  letter-spacing:.6px;color:var(--tinta);text-wrap:balance;margin-bottom:14px}
.inf__bajada{font-size:18px !important;line-height:1.7 !important;color:var(--gris) !important;
  border-left:3px solid var(--mag);padding-left:18px;margin-bottom:34px !important}

/* ── el resumen ejecutivo: la unica caja del informe ── */
.inf__res{background:var(--f2, rgba(14,47,68,.05));border:1px solid var(--bd, var(--linea));
  border-left:4px solid var(--amar);border-radius:16px;padding:26px 30px;margin-bottom:40px}
.inf__res-t{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--amar);margin-bottom:16px}
.inf__res ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.inf__res li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.75;color:var(--gris)}
.inf__res li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--amar)}

/* ── cada bloque de tema ── */
.inf__b,.inf__sint{margin-bottom:40px}
.inf__k{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--mag);margin-bottom:8px}
.inf__b h3,.inf__sint h3{font-family:var(--inter);font-size:24px;font-weight:800;
  line-height:1.25;color:var(--tinta);margin-bottom:16px;letter-spacing:-.2px}

/* ── el "que significa para vos": el remate de cada bloque ── */
.inf__lectura{background:rgba(255,202,43,.07);border-left:3px solid var(--amar);
  border-radius:0 12px 12px 0;padding:16px 20px;margin:22px 0 0 !important;
  font-size:15.5px !important;line-height:1.75 !important}
.inf__lectura b{color:var(--amar) !important}

/* ── los links de salida de cada bloque ── */
.inf__salida{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin-top:16px;font-size:14.5px;line-height:1.6}
.inf__salida a{color:var(--amar);font-weight:600;border-bottom:1px solid rgba(255,202,43,.35)}
.inf__salida a:hover{color:var(--mag);border-bottom-color:var(--mag)}
.inf__o{color:var(--gris2);font-weight:400}

/* La sintesis cierra con una linea arriba, para que se lea como cierre y no
   como un bloque mas de la lista. */
.inf__sint{border-top:1px solid var(--linea);padding-top:30px}

@media (max-width:768px){
  .inf__cab{gap:14px;margin-bottom:26px}
  .inf__h{font-size:32px}
  .inf__sello{text-align:left;flex:1 1 100%}
  .inf__tit{font-size:26px}
  .inf__bajada{font-size:16.5px !important;padding-left:14px}
  .inf__cuerpo p{font-size:16px;line-height:1.8}
  .inf__b h3,.inf__sint h3{font-size:20px}
  .inf__res{padding:22px 20px;border-radius:14px}
}

/* ════════════════════════════════════════════════════════════════════════
   LA TIENDA EN LA COLUMNA DEL ARTICULO
   ────────────────────────────────────────────────────────────────────────
   Entro el 28-ago en el lugar del bloque navy de la reunion. Es el mismo navy
   de marca, pero abierto por familias: cinco filas que dicen que hay adentro
   y cuantas piezas, mas la salida a la tienda entera.

   POR QUE FILAS Y NO TARJETAS
   La columna mide 320px. Cinco tarjetas ahi entran de a una por renglon y el
   bloque se iba a 900px de alto, que es mas que la pantalla del que lee. En
   filas mide 380 y se recorre de un vistazo, que es lo que tiene que hacer una
   pieza que esta al costado de otra cosa que la persona vino a leer.

   El CSS de `.lado__propio`, el bloque que estaba antes, queda mas abajo por si
   Shir lo quiere de vuelta.
   ════════════════════════════════════════════════════════════════════════ */
.lado__tienda{position:relative;overflow:hidden;border-radius:16px;padding:24px 22px 22px;
  background:linear-gradient(160deg,#0E2F44,#123A55 62%,#0B2637);
  border:1px solid rgba(255,202,43,.16);
  box-shadow:0 18px 40px -22px rgba(14,47,68,.65)}
/* el filo de marca arriba, el mismo recurso del pie */
.lado__tienda::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--amar),var(--mag))}
.ltie__ceja{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--amar);margin-bottom:8px}
.ltie__tit{font-family:var(--anton);font-size:25px;line-height:1.1;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;margin-bottom:18px}
.ltie__secs{display:grid;gap:2px;margin-bottom:16px}
.ltie__f{display:flex;align-items:center;gap:11px;padding:10px 10px 10px 9px;border-radius:10px;
  transition:background .16s,transform .16s}
.ltie__f:hover{background:rgba(255,255,255,.07);transform:translateX(2px)}
.ltie__i{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:flex;
  align-items:center;justify-content:center;
  background:rgba(255,202,43,.13);color:var(--amar)}
.ltie__tx{min-width:0;flex:1 1 auto;display:block}
.ltie__tx b{display:block;font-family:var(--inter);font-size:14px;font-weight:700;
  color:#fff;line-height:1.25}
.ltie__tx span{display:block;font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.55);
  margin-top:2px}
.ltie__f:hover .ltie__tx b{color:var(--amar)}
.ltie__n{flex:0 0 auto;min-width:22px;height:22px;padding:0 7px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.72);
  font-family:var(--inter);font-size:11px;font-weight:800}
.ltie__fino{font-size:11px;line-height:1.55;color:rgba(255,255,255,.42);
  padding-top:14px;border-top:1px solid rgba(255,255,255,.09)}
.ltie__cta{display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  font-family:var(--inter);font-size:12.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--amar);transition:gap .16s}
.ltie__cta:hover{gap:11px}
@media (max-width:1024px){
  /* Apilada debajo de la nota la columna va a dos columnas, y ahi la caja de la
     tienda puede respirar como en la home. */
  .lado__tienda{padding:26px 24px 24px}
}

/* ════════════════════════════════════════════════════════════════════════
   /trabaja-con-nosotros
   ────────────────────────────────────────────────────────────────────────
   Cuatro piezas propias, todas construidas con los tokens del sitio. Ver el
   porque de la pagina entera en la cabeza de gen_trabaja.py.
   ════════════════════════════════════════════════════════════════════════ */

/* ── las cuatro tarjetas de beneficio ──
   Dos formas, y la segunda gana cuando hay foto. Sin foto es la tarjeta blanca
   de siempre; con foto es la foto a sangre con el texto encima, abajo, que es
   como estaba en la pagina vieja y es lo que se pidio recuperar.
   El velo de abajo NO es negro: es el navy de marca. Con negro las cuatro fotos
   quedaban con un pie gris sucio que no es de ningun lado del sitio. */
.tcn{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:30px 26px;
  transition:transform .2s,box-shadow .2s}
.tcn:hover{transform:translateY(-6px);box-shadow:0 20px 44px -20px rgba(14,47,68,.28)}
.tcn__ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;background:rgba(205,0,70,.09);color:var(--mag);margin-bottom:18px}
.tcn:nth-child(2) .tcn__ico{background:rgba(255,202,43,.18);color:var(--ambar)}
.tcn:nth-child(3) .tcn__ico{background:rgba(14,47,68,.08);color:var(--tinta)}
.tcn:nth-child(4) .tcn__ico{background:rgba(205,0,70,.09);color:var(--mag)}
.tcn h3{font-family:var(--inter);font-size:19px;font-weight:700;color:var(--tinta);
  line-height:1.3;margin-bottom:10px}
.tcn p{font-size:15px;line-height:1.7;color:var(--gris)}

/* ── la version con foto ── */
.tcn--foto{position:relative;overflow:hidden;padding:0;border:0;border-radius:20px;
  aspect-ratio:3/4;min-height:400px;display:flex;flex-direction:column;
  justify-content:flex-end;isolation:isolate;
  box-shadow:0 18px 44px -22px rgba(14,47,68,.55)}
.tcn--foto .tcn__foto{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;transition:transform .5s cubic-bezier(.22,.8,.2,1)}
/* El velo. Arriba casi no toca la foto y abajo la cierra en navy, que es lo que
   hace legible el texto sin apagar la imagen entera. */
.tcn--foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,33,56,.14) 0%,
    rgba(10,33,56,.06) 30%,
    rgba(12,40,62,.72) 66%,
    rgba(11,32,48,.95) 100%)}
.tcn--foto:hover{transform:translateY(-8px);box-shadow:0 28px 60px -26px rgba(14,47,68,.7)}
.tcn--foto:hover .tcn__foto{transform:scale(1.05)}
.tcn--foto .tcn__ico{position:absolute;top:20px;left:20px;z-index:2;margin:0;
  width:42px;height:42px;border-radius:12px;
  background:rgba(255,202,43,.92);color:var(--tinta);
  box-shadow:0 6px 18px rgba(10,33,56,.4)}
.tcn--foto .tcn__tx{position:relative;z-index:2;padding:26px 24px 26px}
/* El filete de marca arriba del titulo: es lo unico que dice que la tarjeta es
   de Shir y no una foto de banco de imagenes cualquiera. */
.tcn--foto .tcn__tx::before{content:"";display:block;width:36px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--amar),var(--mag));margin-bottom:14px}
.tcn--foto h3{font-family:var(--anton);font-size:26px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;line-height:1.1;color:#fff;margin-bottom:10px;
  text-shadow:0 2px 12px rgba(6,20,34,.55)}
.tcn--foto p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(6,20,34,.5)}
@media (max-width:1024px){
  .tcn--foto{aspect-ratio:4/3;min-height:300px}
}
@media (max-width:640px){
  .tcn--foto{aspect-ratio:3/4;min-height:380px}
}

/* ── las dos tarjetas enfrentadas ── */
/* Van apiladas y no lado a lado: son dos listas de cuatro renglones cada una y
   en dos columnas de 570px los renglones se parten en dos lineas todos. Apiladas
   y a 800px entra cada punto en un renglon, que es como se lee una lista. */
.duales{display:grid;gap:26px;max-width:820px;margin:0 auto}
.dual{background:#fff;border-radius:22px;padding:44px 42px;border:1px solid var(--linea);
  box-shadow:0 18px 50px -30px rgba(14,47,68,.35)}
.dual--navy{background:linear-gradient(135deg,#0E2F44,#1A4460);border-color:rgba(255,255,255,.12)}
.dual__et{display:inline-block;padding:9px 20px;border-radius:30px;margin-bottom:22px;
  font-family:var(--inter);font-size:12px;font-weight:900;letter-spacing:.8px;text-transform:uppercase}
.dual__et--mag{background:var(--mag);color:#fff}
.dual__et--amar{background:var(--amar);color:var(--tinta)}
.dual h3{font-family:var(--anton);font-size:34px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;line-height:1.1;color:var(--tinta);margin-bottom:26px}
.dual--navy h3{color:#fff}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.chk li{display:flex;align-items:flex-start;gap:13px;font-size:16.5px;line-height:1.65;color:var(--gris)}
.chk li svg{flex:0 0 auto;margin-top:4px;width:22px;height:22px;padding:4px;border-radius:50%;color:#fff}
.chk--mag li svg{background:var(--mag)}
.chk--amar li svg{background:var(--amar);color:var(--tinta)}
.chk--mag li b{color:var(--tinta)}
.chk--amar li{color:rgba(255,255,255,.86)}
.chk--amar li b{color:#fff}

/* ── las tres fichas del perfil ── */
.perfs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.perf{position:relative;overflow:hidden;background:#fff;border:1px solid var(--linea);
  border-left:6px solid var(--mag);border-radius:18px;padding:38px 32px;
  transition:transform .2s,box-shadow .2s}
.perf--amar{border-left-color:var(--amar)}
.perf--navy{border-left-color:var(--tinta)}
.perf:hover{transform:translateY(-6px);box-shadow:0 22px 50px -24px rgba(14,47,68,.3)}
.perf__n{position:absolute;top:-24px;right:14px;font-family:var(--anton);font-size:130px;
  line-height:1;color:rgba(205,0,70,.06);pointer-events:none}
.perf--amar .perf__n{color:rgba(255,202,43,.16)}
.perf--navy .perf__n{color:rgba(14,47,68,.07)}
.perf__c{position:relative;z-index:1}
.perf h3{font-family:var(--anton);font-size:27px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;line-height:1.15;color:var(--tinta);margin-bottom:14px}
.perf p{font-size:15.5px;line-height:1.75;color:var(--gris)}

/* ── el formulario de postulacion ──
   SE LLAMA `.sumate` Y NO `.post`, Y ESTO NO ES UNA PREFERENCIA.
   El 28-ago se llamo `.post`, por POSTulacion. `.post` ya era la tarjeta del
   blog, que esta en 114 paginas: la regla de abajo les impuso una grilla de
   dos columnas y la foto de cada tarjeta cayo en una columna de 0px. Medido en
   /blog/presupuesto: la imagen bajaba entera (naturalWidth 1200) y se dibujaba
   en 0x0. Se publico asi y se vieron 114 paginas con las tarjetas sin foto y
   el texto cortado.
   Antes de inventar un nombre de clase corto y generico, buscarlo en esta hoja.
   El gate lo chequea desde entonces (verificar.py, "clases nuevas"). */
.sumate{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:52px;align-items:start}
.sumate__baj{font-size:17px;line-height:1.8;color:rgba(255,255,255,.72);margin:16px 0 26px;max-width:520px}
.sumate__otros{display:grid;gap:12px}
.sumate__otros a{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;
  color:var(--amar);width:fit-content;border-bottom:1px solid rgba(255,202,43,.35)}
.sumate__otros a:hover{color:#fff;border-bottom-color:#fff}
.sumate__form{display:grid;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:20px;padding:26px 24px}
.sumate__form input,.sumate__form textarea{width:100%;padding:14px 16px;border-radius:11px;
  border:2px solid transparent;font-family:inherit;font-size:15px;color:var(--tinta);
  background:#fff;resize:vertical}
.sumate__form input:focus,.sumate__form textarea:focus{outline:none;border-color:var(--amar)}
.sumate__fino{font-size:12px;line-height:1.6;color:rgba(255,255,255,.45);text-align:center}

@media (max-width:1024px){
  .perfs{grid-template-columns:1fr}
  .sumate{grid-template-columns:1fr;gap:32px}
  .dual{padding:36px 30px}
  .dual h3{font-size:28px}
}
@media (max-width:560px){
  .dual{padding:30px 22px;border-radius:18px}
  .dual h3{font-size:24px}
  .chk li{font-size:15.5px}
  .perf{padding:30px 24px}
  .perf h3{font-size:23px}
}

/* ════════════════════════════════════════════════════════════════════════
   CORTES DE CINTA  ·  /mercados
   ────────────────────────────────────────────────────────────────────────
   Los cortes del prototipo (/prototipo/pack-deuda-cero-v2) son la juntura
   entre dos fondos distintos: la curva se ve porque arriba hay crema y abajo
   navy. En /mercados el fondo es UN solo azul de punta a punta, asi que una
   curva de esas seria invisible.

   Estos son otra cosa: una cinta. La franja es del mismo azul del fondo y la
   curva va dibujada encima en dos trazos sobre el mismo path: uno grueso y
   translucido en el azul de las cajas, que es el cuerpo de la cinta, y uno
   fino con degrade de marca, que es el filo. Resultado: ritmo entre secciones
   sin meter un solo bloque de color que rompa el fondo unico.

   `vector-effect:non-scaling-stroke` NO SE PUEDE SACAR. El SVG se estira a lo
   ancho con `preserveAspectRatio="none"`, y con eso el grosor del trazo se
   deforma con la pantalla: medido, la cinta salia de 26px a 1400 de ancho y
   de 7px a 390. Con el vector-effect el grosor queda en pixeles de pantalla.
   ════════════════════════════════════════════════════════════════════════ */
.cz{display:block;line-height:0;background:var(--f0);margin:0;padding:0;overflow:hidden}
.cz svg{display:block;width:100%;height:clamp(52px,6vw,88px)}
.cz__cinta{fill:none;stroke:var(--f2);stroke-width:26;stroke-linecap:round;
  stroke-linejoin:round;opacity:.62;vector-effect:non-scaling-stroke}
.cz__filo{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
@media (max-width:768px){
  .cz svg{height:44px}
  .cz__cinta{stroke-width:16}
  .cz__filo{stroke-width:2}
}
/* Con movimiento reducido no cambia nada: los cortes no se animan. Estan aca
   por si algun dia se les pone entrada, para que quede dicho. */

/* ════════════════════════════════════════════════════════════════════════
   UN SOLO AZUL DE PUNTA A PUNTA  ·  piel azul
   ────────────────────────────────────────────────────────────────────────
   En la piel NOCHE las secciones alternan dos negros, que es lo que hace el
   resto del sitio. En AZUL no: se pidio un fondo unico y el segundo azul
   reservado para las cajas. Esto apaga la alternancia en las cuatro clases
   que la producian, mas el pie y el cierre, que traian el tono claro desde
   `[data-oscuro]`.
   Si alguna vez se quiere volver a la alternancia, se borra este bloque y
   `sec--navy` vuelve a pintar sola.
   ════════════════════════════════════════════════════════════════════════ */
html[data-tema="azul"] .sec--navy,
html[data-tema="azul"] .s1,html[data-tema="azul"] .s4,html[data-tema="azul"] .s8,
html[data-tema="azul"] .ph,
html[data-tema="azul"] body.remate .pie,
html[data-tema="azul"] .pie{background-color:var(--f0)}

/* ════════════════════════════════════════════════════════════════════════
   EL MAGENTA CUANDO ES LETRA Y NO FONDO  ·  pieles oscuras
   ────────────────────────────────────────────────────────────────────────
   `--mag` (#CD0046) nacio como fondo de boton, con texto blanco encima. Como
   color de LETRA sobre oscuro no llega: medido en /mercados, la ceja daba
   2,86:1 y el numero de "Las 10 cosas del mes" 2,09:1, contra un minimo de
   4,5. El rosa de las variaciones se quedaba en 4,42, a centesimas.

   `--magtx` es el mismo magenta subido en luz hasta pasar en los tres fondos
   de la pagina con un solo valor: 6,7:1 sobre el fondo, 5,0:1 sobre la caja y
   5,2:1 sobre el circulo del numero.

   OJO: esto no toca `--mag`. Los botones, los filetes y los fondos magenta
   siguen igual, porque ahi el magenta es fondo y el que tiene que leerse es el
   blanco de encima. Solo cambian los lugares donde el magenta ES la letra.
   Si se agrega otro texto magenta sobre oscuro, va en esta lista.
   ════════════════════════════════════════════════════════════════════════ */
html[data-oscuro] .ceja:not(.ceja--amar),
html[data-oscuro] .c-mag,
html[data-oscuro] .inf__k,
html[data-oscuro] .cosa__n--mes,
html[data-oscuro] .cosa__s svg,
html[data-oscuro] .chip.t-baja,
html[data-oscuro] .kpi__var.t-baja,
html[data-oscuro] .tkr__m.t-baja,
html[data-oscuro] .term__v.t-baja,
html[data-oscuro] .rk--alto{color:var(--magtx)}
html[data-oscuro] .chip.t-baja{background:rgba(255,129,153,.14)}
html[data-oscuro] .kpi--rosa .kpi__v{color:var(--magtx)}

/* ── el logo sobre fondo oscuro ──
   Las palabras van blancas junto con la firma. Sin esto quedaban en magenta al
   lado de una firma blanca, que es peor que dejar las dos en magenta. */
html[data-oscuro] .marca span{color:#fff}

/* ── la foto que entra abriendo un hueco, adentro del cuerpo del articulo ──
   Se usa cuando la nota no traia token de imagen. Va a sangre del ancho de la
   columna y con aire arriba y abajo, para que se lea como un corte del texto y
   no como una ilustracion metida al pasar.
   Varias de estas imagenes son grabados de tinta clara sobre fondo casi negro.
   Sobre la hoja clara del cuerpo se leen como una lamina, que es exactamente lo
   que son: por eso la sombra y el radio, y por eso NO se recortan. */
.art__plancha{margin:38px 0;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px -26px rgba(14,47,68,.45)}
.art__plancha img{width:100%;height:auto;display:block}
@media (max-width:768px){
  .art__plancha{margin:28px 0;border-radius:12px}
}

/* ════════════════════════════════════════════════════════════════════════
   /unete-al-equipo  ·  LAS SOLAPAS
   ────────────────────────────────────────────────────────────────────────
   Dos paneles y una sola barra. La barra se pega abajo de la cabecera al
   scrollear: en una pagina de 84 KB, sin eso se pierde de vista a los dos
   scrolls y nadie se entera de que hay una segunda solapa.

   SIN JAVASCRIPT SE VEN LOS DOS PANELES, uno abajo del otro. El JS esconde el
   que no toca. Es al reves de lo comun (esconder en el HTML, mostrar con JS) a
   proposito: asi el buscador y quien tenga el JS apagado ven TODO el contenido.
   ════════════════════════════════════════════════════════════════════════ */
/* EL `top` ES EL ALTO DE LA CABECERA, MEDIDO, NO ESTIMADO.
   La cabecera es sticky y mide 90px en escritorio y 82 en telefono. Con 88 la
   barra de solapas se metia 2px debajo de la cabecera y, como la cabecera tiene
   mas z-index, le comia el borde de arriba. Si algun dia cambia el alto de la
   cabecera, hay que cambiar estos dos numeros. */
/* LA BARRA DE SOLAPAS YA NO SE USA (1-sep). Las dos secciones del equipo se
   fueron al menu, que es donde se pidio que estuvieran. El bloque queda porque
   el patron esta completo y accesible, y sirve el dia que haga falta. */
.tabs{position:sticky;top:90px;z-index:40;background:#fff;
  border-bottom:1px solid var(--linea);box-shadow:0 10px 24px -20px rgba(14,47,68,.4)}
.tabs__int{max-width:1200px;margin:0 auto;padding:0 5%}
.tabs__lista{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.tabs__lista::-webkit-scrollbar{display:none}
.tabs__b{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:18px 22px;border:0;background:none;cursor:pointer;
  font-family:var(--urb);font-size:15px;font-weight:900;letter-spacing:.6px;
  text-transform:uppercase;color:var(--gris);position:relative;
  transition:color .18s}
.tabs__b svg{opacity:.7;transition:opacity .18s}
.tabs__b:hover{color:var(--tinta)}
.tabs__b::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:transparent;transition:background .18s}
.tabs__b[aria-selected="true"]{color:var(--mag)}
.tabs__b[aria-selected="true"] svg{opacity:1}
.tabs__b[aria-selected="true"]::after{background:linear-gradient(90deg,var(--amar),var(--mag))}
.tabs__panel[hidden]{display:none}
@media (max-width:768px){
  .tabs{top:82px}
  .tabs__b{padding:14px 14px;font-size:13px;gap:7px}
}

/* ── el posicionamiento, la frase que ordena la pagina ── */
.posic{max-width:900px;margin:0 auto;text-align:center;
  font-family:var(--anton);font-size:clamp(26px,3.4vw,42px);font-weight:600;
  line-height:1.15;letter-spacing:.5px;color:var(--tinta);text-wrap:balance}
.posic::before{content:"";display:block;width:56px;height:4px;border-radius:3px;
  margin:0 auto 26px;background:linear-gradient(90deg,var(--amar),var(--mag))}

/* ── los tres perfiles A / B / C ── */
.abcs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:34px}
.abc{position:relative;display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--linea);border-radius:18px;padding:30px 26px;
  transition:transform .2s,box-shadow .2s}
.abc:hover{transform:translateY(-5px);box-shadow:0 22px 48px -26px rgba(14,47,68,.32)}
.abc__l{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-family:var(--anton);font-size:24px;
  background:var(--tinta);color:#fff}
.abc:nth-child(1) .abc__l{background:var(--mag)}
.abc:nth-child(2) .abc__l{background:var(--amar);color:var(--tinta)}
.abc h3{font-family:var(--inter);font-size:18px;font-weight:700;color:var(--tinta);
  line-height:1.3;margin-bottom:9px}
.abc p{font-size:15px;line-height:1.7;color:var(--gris)}

/* lo concreto: horas, colchon y ganas */
.reqs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--linea);border:1px solid var(--linea);border-radius:16px;overflow:hidden}
.req{background:#F7F9FB;padding:24px 22px}
.req h3{font-family:var(--inter);font-size:16px;font-weight:800;color:var(--tinta);margin-bottom:7px}
.req p{font-size:14px;line-height:1.65;color:var(--gris)}

/* ── los cinco atributos con su peso ──
   Los pesos se publican a proposito: decirle a alguien exactamente que se mira
   y en que proporcion es lo contrario de un aviso de trabajo generico.
   La barra va a `peso * 4` y no a `peso`: el mayor es 25 sobre 100, y una barra
   que nunca pasa del cuarto del ancho se lee como un error, no como un dato. */
.atrs{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 44px;margin-bottom:38px}
.atr__cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:10px}
.atr h3{font-family:var(--inter);font-size:17px;font-weight:800;color:#fff;line-height:1.2}
.atr__p{font-family:var(--anton);font-size:24px;color:var(--amar);line-height:1;flex:0 0 auto}
.atr__p i{font-style:normal;font-size:12px;opacity:.55;font-family:var(--inter);font-weight:700}
.atr__barra{height:7px;border-radius:5px;background:rgba(255,255,255,.13);overflow:hidden;margin-bottom:11px}
.atr__barra i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--amar),var(--mag))}
.atr p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.72)}

.alertas{border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--mag);
  border-radius:0 16px 16px 0;padding:26px 30px;background:rgba(205,0,70,.09)}
.alertas__t{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--amar);margin-bottom:16px}
.alertas ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.alertas li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.65;
  color:rgba(255,255,255,.86)}
.alertas li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:2px;
  border-radius:2px;background:var(--mag)}

/* ── el arsenal: lo que ya esta hecho ── */
.arses{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.arse{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:28px 26px;
  transition:transform .2s,box-shadow .2s}
.arse:hover{transform:translateY(-5px);box-shadow:0 22px 48px -26px rgba(14,47,68,.3)}
.arse__ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:rgba(255,202,43,.2);color:var(--ambar);margin-bottom:16px}
.arse h3{font-family:var(--inter);font-size:17px;font-weight:600;color:var(--gris);
  line-height:1.3;margin-bottom:10px}
.arse h3 b{font-family:var(--anton);font-size:26px;font-weight:600;color:var(--tinta);
  letter-spacing:.4px;display:inline-block;margin-right:5px;vertical-align:-1px}
.arse p{font-size:15px;line-height:1.75;color:var(--gris)}

/* ── las dos pruebas ── */
.prues{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:20px}
.prue{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:32px 30px;display:flex;flex-direction:column}
.prue__ceja{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--amar);margin-bottom:12px}
.prue h3{font-family:var(--anton);font-size:30px;font-weight:600;letter-spacing:.5px;
  color:#fff;line-height:1.1;margin-bottom:14px}
.prue__tx{font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.78);margin-bottom:24px;flex:1 1 auto}
.prues__fino{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.5);text-align:center;
  max-width:640px;margin:0 auto}

/* ── el proceso y el camino: dos listas numeradas ── */
.procs,.carrs{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.proc,.carr{display:flex;gap:20px;align-items:flex-start;
  border:1px solid var(--linea);border-radius:16px;padding:24px 26px;background:#fff}
.proc__n,.carr__n{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-family:var(--anton);font-size:18px;
  background:rgba(205,0,70,.1);color:var(--mag)}
.proc h3,.carr__c h3{font-family:var(--inter);font-size:18px;font-weight:700;
  color:var(--tinta);line-height:1.3;margin-bottom:7px}
.proc p,.carr__c p{font-size:15px;line-height:1.75;color:var(--gris)}
.carr__t{display:inline-block;font-family:var(--inter);font-size:11px;font-weight:800;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--mag);margin-bottom:8px}
/* sobre navy */
.sec--navy .proc,.sec--navy .carr{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.sec--navy .proc h3,.sec--navy .carr__c h3{color:#fff}
.sec--navy .proc p,.sec--navy .carr__c p{color:rgba(255,255,255,.75)}
.sec--navy .proc__n,.sec--navy .carr__n{background:rgba(255,202,43,.18);color:var(--amar)}
.sec--navy .carr__t{color:var(--amar)}

@media (max-width:1024px){
  .abcs,.reqs,.atrs,.arses,.prues{grid-template-columns:1fr}
  .reqs{gap:1px}
}

/* ════════════════════════════════════════════════════════════════════════
   LA UNIVERSIDAD
   ────────────────────────────────────────────────────────────────────────
   El modelo es el AI Engineer Learning OS de Robin Singh: ruta de modulos sin
   candado, "segui por aca" como siguiente no completada, progreso real y
   biblioteca aparte del curriculum. Lo que NO se copia es la racha diaria:
   esto son trece modulos que se hacen en dos semanas y despues se consultan,
   no un habito de 15 minutos por dia.

   El progreso vive en el localStorage del que lee. No hay cuentas ni servidor.
   ════════════════════════════════════════════════════════════════════════ */
.uni__cab{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:44px;align-items:center;
  padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.uni__baj{font-size:16.5px;line-height:1.8;color:rgba(255,255,255,.72);margin-top:14px;max-width:620px}
.uni__estado{text-align:center}
.uni__aro{position:relative;width:118px;height:118px;margin:0 auto 14px}
.uni__aro svg{width:100%;height:100%;transform:rotate(-90deg)}
.uni__aro circle{fill:none;stroke-width:3.4}
.uni__aro-f{stroke:rgba(255,255,255,.14)}
.uni__aro-p{stroke:url(#g) ;stroke:var(--amar);stroke-linecap:round;
  stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset .5s cubic-bezier(.22,.8,.2,1)}
.uni__aro span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--anton);font-size:27px;color:#fff}
.uni__estado-tx{font-size:14.5px;color:rgba(255,255,255,.82)}
.uni__estado-tx b{color:var(--amar);font-weight:800}
.uni__estado-min{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:3px}
.uni__reset{margin-top:14px;border:1px solid rgba(255,255,255,.2);background:none;
  color:rgba(255,255,255,.6);font-family:var(--inter);font-size:11.5px;font-weight:700;
  letter-spacing:.6px;padding:7px 14px;border-radius:20px;cursor:pointer;transition:.18s}
.uni__reset:hover{border-color:var(--amar);color:var(--amar)}

/* "segui por aca": el siguiente modulo no hecho */
.uni__hoy{background:linear-gradient(135deg,rgba(255,202,43,.14),rgba(205,0,70,.10));
  border:1px solid rgba(255,202,43,.3);border-radius:20px;padding:26px 30px;margin-bottom:40px}
.uni__hoy[hidden]{display:none}
.uni__hoy-ceja{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--amar);margin-bottom:10px}
.uni__hoy h3{font-family:var(--anton);font-size:28px;font-weight:600;letter-spacing:.5px;
  color:#fff;line-height:1.15;margin-bottom:9px}
.uni__hoy p{font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.8)}

.uni__k{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--amar);margin-bottom:10px}
.uni__k--sep{margin-top:8px}
.uni__bloque{margin-bottom:48px}
.uni__bloque h3{font-family:var(--anton);font-size:32px;font-weight:600;letter-spacing:.6px;
  color:#fff;line-height:1.1;margin-bottom:12px}
.uni__intro{font-size:16px;line-height:1.8;color:rgba(255,255,255,.72);max-width:720px;margin-bottom:26px}

/* ── los cinco pilares del metodo ──
   #metodo es .sec (blanca), no .sec--navy: este bloque estaba escrito en blancos
   translucidos y los cinco pilares quedaban con contraste 1,00. Va por tokens para
   que siga andando con data-oscuro. Medido el 22-sep-2026. */
.pils{display:grid;gap:16px;margin-bottom:30px}
.pil{display:flex;gap:22px;align-items:flex-start;background:rgba(14,47,68,.035);
  border:1px solid rgba(14,47,68,.12);border-left:4px solid var(--amar);
  border-radius:0 18px 18px 0;padding:26px 30px}
.pil__n{flex:0 0 auto;font-family:var(--anton);font-size:34px;line-height:1;
  color:var(--tinta);opacity:.32}
.pil__c h3{font-family:var(--inter);font-size:20px;font-weight:800;color:var(--tinta);
  line-height:1.25;margin-bottom:10px}
.pil__c>p{font-size:15.5px;line-height:1.8;color:var(--gris);margin-bottom:14px}
.pil__r{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pil__r li{font-size:13px;line-height:1.5;color:var(--tinta);
  background:rgba(14,47,68,.06);border-radius:20px;padding:6px 14px}

/* las siete preguntas del diagnostico */
.proto{border:1px dashed rgba(255,255,255,.22);border-radius:18px;padding:28px 32px}
.proto__t{font-family:var(--inter);font-size:15px;font-weight:800;color:var(--amar);margin-bottom:16px}
.proto ol{margin:0;padding-left:22px;display:grid;gap:9px}
.proto li{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.84)}
.proto li::marker{color:var(--amar);font-weight:800}
.proto__f{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  font-size:15px;line-height:1.75;font-style:italic;color:rgba(255,255,255,.66)}

/* ── la ruta de formacion ── */
.rutas{display:grid;gap:26px;margin-bottom:34px}
.ruta__t{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px}
.mods{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mod{display:flex;align-items:flex-start;gap:16px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:16px 20px;
  transition:background .18s,border-color .18s}
.mod:hover{background:rgba(255,255,255,.075)}
.mod__tic{flex:0 0 auto;width:26px;height:26px;margin-top:2px;border-radius:8px;
  border:2px solid rgba(255,255,255,.3);background:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;transition:.18s}
.mod__tic span{width:11px;height:6px;border-left:2.5px solid var(--tinta);
  border-bottom:2.5px solid var(--tinta);transform:rotate(-45deg) translate(1px,-2px);opacity:0}
.mod__tic:hover{border-color:var(--amar)}
.mod--ok .mod__tic{background:var(--amar);border-color:var(--amar)}
.mod--ok .mod__tic span{opacity:1}
.mod__c{min-width:0;flex:1 1 auto}
.mod__c h4{display:flex;align-items:center;gap:8px;font-family:var(--inter);font-size:16px;
  font-weight:700;color:#fff;line-height:1.3;margin-bottom:4px}
.mod__c p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.62)}
.mod__lock{display:inline-flex;color:rgba(255,255,255,.35);flex:0 0 auto}
.mod__min{flex:0 0 auto;font-family:var(--inter);font-size:11.5px;font-weight:800;
  color:rgba(255,255,255,.45);padding-top:3px;white-space:nowrap}
.mod--ok{opacity:.62}
.mod--ok .mod__c h4{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}

.uni__aviso{display:flex;gap:16px;align-items:flex-start;
  border:1px solid rgba(255,202,43,.28);background:rgba(255,202,43,.07);
  border-radius:16px;padding:22px 26px;margin-bottom:48px}
.uni__aviso svg{flex:0 0 auto;color:var(--amar);margin-top:2px}
.uni__aviso p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.78)}
.uni__aviso b{color:#fff}

/* ── las diez lecciones abiertas ── */
.lecs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lec{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:18px 20px}
.lec__n{flex:0 0 auto;font-family:var(--anton);font-size:20px;color:rgba(255,202,43,.55);line-height:1.2}
.lec__c h4{font-family:var(--inter);font-size:15.5px;font-weight:700;color:#fff;
  line-height:1.35;margin-bottom:5px}
.lec__c p{font-size:14px;line-height:1.65;color:rgba(255,255,255,.62)}

/* ── la biblioteca ── */
.bibs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bib{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  border-radius:16px;padding:22px 24px}
.bib h4{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--amar);margin-bottom:14px}
.bib ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.bib li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.55;
  color:rgba(255,255,255,.8)}
.bib li svg{flex:0 0 auto;margin-top:4px;color:var(--amar)}

@media (max-width:1024px){
  .uni__cab{grid-template-columns:minmax(0,1fr);gap:26px}
  .uni__estado{display:flex;align-items:center;gap:20px;text-align:left}
  .uni__aro{margin:0;width:88px;height:88px}
  .uni__aro span{font-size:21px}
  .uni__reset{margin-top:0}
  .lecs,.bibs{grid-template-columns:1fr}
  .pil{padding:22px 24px;gap:16px}
}
@media (max-width:560px){
  .uni__bloque h3{font-size:25px}
  .uni__hoy h3{font-size:23px}
  .mod{padding:14px 16px;gap:12px}
  .mod__min{display:none}
  .proto{padding:22px 20px}
}

/* ════════════════════════════════════════════════════════════════════════
   /unete-al-equipo  ·  LO NUEVO
   ════════════════════════════════════════════════════════════════════════ */

/* ── la prueba en el hero, en lugar de la foto ──
   El hero salio sin la foto de Shir el 1-sep. En vez de otra foto van los
   cuatro numeros del ecosistema: es lo unico verificable de toda la pagina y
   lo que la separa de un aviso de reclutamiento comun. */
.hprueba{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:38px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.hprueba div{display:flex;flex-direction:column;gap:2px}
.hprueba b{font-family:var(--anton);font-size:34px;line-height:1;color:var(--amar)}
.hprueba span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.66)}
@media (max-width:560px){
  .hprueba{gap:12px 26px;margin-top:28px;padding-top:22px}
  .hprueba b{font-size:26px}
  .hprueba span{font-size:12px}
}

/* ── el pedido del CV, adentro del formulario ── */
.sumate__cv{margin-top:26px;padding:20px 22px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.sumate__cv-t{display:flex;align-items:center;gap:9px;font-family:var(--inter);
  font-size:15px;font-weight:800;color:var(--amar);margin-bottom:8px}
.sumate__cv>p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.72);margin-bottom:16px}
.sumate__cv .sumate__otros{gap:9px}
.sumate__cv .sumate__otros a{font-size:14px}
.sumate__form select{width:100%;padding:14px 16px;border-radius:11px;border:2px solid transparent;
  font-family:inherit;font-size:15px;color:var(--tinta);background:#fff;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230E2F44' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.sumate__form select:focus{outline:none;border-color:var(--amar)}
/* el formulario externo embebido, cuando exista */
.sumate--emb{grid-template-columns:1fr;gap:26px}
.sumate__tx--ancho{max-width:720px}
.sumate__iframe{border-radius:20px;overflow:hidden;background:#fff;min-height:640px}
.sumate__iframe iframe{width:100%;height:660px;border:0;display:block}
.sumate--emb .sumate__fino{text-align:left}
.sumate--emb .sumate__fino a{color:var(--amar);border-bottom:1px solid rgba(255,202,43,.4)}

/* ════════════════════════════════════════════════════════════════════════
   /formacion  ·  EL MANUAL DE TRABAJO
   ────────────────────────────────────────────────────────────────────────
   Es la pagina mas larga del sitio: ocho bloques, siete areas de diagnostico,
   diez objeciones y cinco role plays. Por eso lleva indice pegajoso: sin el,
   volver a "objeciones" desde el final son cuatro scrolls a ciegas.
   ════════════════════════════════════════════════════════════════════════ */

/* ── el indice ── */
.idx{position:sticky;top:90px;z-index:40;background:#fff;
  border-bottom:1px solid var(--linea);box-shadow:0 10px 24px -20px rgba(14,47,68,.4)}
.idx__int{max-width:1200px;margin:0 auto;padding:0 5%;display:flex;gap:4px;
  overflow-x:auto;scrollbar-width:none}
.idx__int::-webkit-scrollbar{display:none}
.idx a{flex:0 0 auto;padding:15px 16px;font-family:var(--urb);font-size:13.5px;
  font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:var(--gris);
  position:relative;white-space:nowrap;transition:color .18s}
.idx a:hover{color:var(--tinta)}
.idx a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:transparent;transition:background .18s}
.idx a.on{color:var(--mag)}
.idx a.on::after{background:linear-gradient(90deg,var(--amar),var(--mag))}
@media (max-width:768px){
  .idx{top:82px}
  .idx a{padding:12px 12px;font-size:12px}
}

.sub-k{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--mag);margin:0 0 18px}
.sec--navy .sub-k{color:var(--amar)}

/* ── las siete areas del diagnostico ──
   Van plegadas: son siete areas con cinco preguntas cada una y desplegadas
   hacen una pagina de tres metros que nadie recorre. */
.ars{display:grid;gap:10px;margin-bottom:34px}
.ar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:16px;overflow:hidden}
.ar[open]{background:rgba(255,255,255,.075);border-color:rgba(255,202,43,.3)}
.ar summary{display:flex;align-items:center;gap:16px;padding:18px 22px;cursor:pointer;
  list-style:none}
.ar summary::-webkit-details-marker{display:none}
.ar__n{flex:0 0 auto;font-family:var(--anton);font-size:22px;color:rgba(255,202,43,.5);line-height:1}
.ar__t{flex:1 1 auto;min-width:0;display:block}
.ar__t b{display:block;font-family:var(--inter);font-size:17px;font-weight:700;color:#fff;
  line-height:1.3}
.ar__t span{display:block;font-size:14px;line-height:1.6;color:rgba(255,255,255,.62);margin-top:3px}
.ar__mas{flex:0 0 auto;color:rgba(255,255,255,.45);transition:transform .2s}
.ar[open] .ar__mas{transform:rotate(180deg);color:var(--amar)}
.ar__c{padding:4px 22px 24px 60px}
.ar__k{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--amar);margin:16px 0 10px}
.ar__q{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ar__q li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.65;
  color:rgba(255,255,255,.86)}
.ar__q li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:2px;
  border-radius:2px;background:var(--amar)}
.ar__d{display:flex;flex-wrap:wrap;gap:8px}
.ar__d span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.07);border-radius:20px;padding:6px 14px}
.ar__no{margin-top:18px;padding:14px 18px;border-radius:0 12px 12px 0;
  border-left:3px solid var(--mag);background:rgba(205,0,70,.1);
  font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.82)}
.ar__no b{color:var(--magtx,#FF8199)}
@media (max-width:640px){ .ar__c{padding-left:22px} }

.proto ol li b{color:var(--amar)}

/* ── las autopresentaciones ── */
.spes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:40px}
.spe{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--amar);
  border-radius:0 14px 14px 0;padding:20px 22px}
.spe__t{font-family:var(--inter);font-size:11.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--mag);margin-bottom:9px}
.spe__x{font-size:16px;line-height:1.75;color:var(--tinta);font-style:italic}

/* ── los canales ── */
.cans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.can{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:26px 24px}
.can__ceja{font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--mag);margin-bottom:8px}
.can h3{font-family:var(--inter);font-size:19px;font-weight:700;color:var(--tinta);margin-bottom:10px}
.can>p{font-size:15px;line-height:1.75;color:var(--gris)}
.can__r{margin-top:14px;padding-top:14px;border-top:1px solid var(--linea);
  font-size:14.5px;line-height:1.7;color:var(--gris)}
.can__r b{color:var(--tinta)}

/* ── las plantillas, con boton de copiar ── */
.plas{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:34px}
.pla{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:16px;padding:22px 24px;display:flex;flex-direction:column}
.pla__cab{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.pla h3{font-family:var(--inter);font-size:16px;font-weight:700;color:#fff;line-height:1.3}
.pla__copiar{flex:0 0 auto;border:1px solid rgba(255,255,255,.24);background:none;
  color:rgba(255,255,255,.72);font-family:var(--inter);font-size:11.5px;font-weight:800;
  letter-spacing:.6px;padding:6px 13px;border-radius:20px;cursor:pointer;transition:.18s}
.pla__copiar:hover{border-color:var(--amar);color:var(--amar)}
.pla__copiar--ok{background:var(--amar);border-color:var(--amar);color:var(--tinta)}
.pla__x{flex:1 1 auto;margin:0 0 14px;padding:16px 18px;border-radius:12px;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);
  font-family:var(--inter);font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.9);
  white-space:pre-wrap;word-break:break-word}
.pla__n{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.55)}
.pla--objecion{border-left:3px solid var(--amar)}
.pla--seguimiento{border-left:3px solid #A78BFA}
.pla--reunion{border-left:3px solid #34D399}
.pla--whatsapp{border-left:3px solid #38BDF8}

.noesc{border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--mag);
  border-radius:0 16px 16px 0;padding:24px 28px;background:rgba(205,0,70,.09)}
.noesc__t{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--amar);margin-bottom:14px}
.noesc ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.noesc li{font-size:15px;line-height:1.65;color:rgba(255,255,255,.8)}
.noesc li b{display:block;color:#fff}

/* ── las objeciones ── */
.objs{display:grid;gap:16px}
.obj{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:26px 28px}
.obj__cab{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.obj h3{font-family:var(--inter);font-size:19px;font-weight:700;color:var(--tinta);line-height:1.35}
.obj__t{flex:0 0 auto;font-family:var(--inter);font-size:11px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;padding:5px 12px;border-radius:20px;white-space:nowrap}
.obj__t--plata{background:rgba(205,0,70,.11);color:var(--mag)}
.obj__t--tiempo{background:rgba(255,202,43,.22);color:#8A6400}
.obj__t--confianza{background:rgba(14,47,68,.09);color:var(--tinta)}
.obj__t--prioridad{background:rgba(167,139,250,.18);color:#5B3FBF}
.obj p{font-size:15px;line-height:1.75;color:var(--gris);margin-bottom:10px}
.obj p b{color:var(--tinta)}
.obj__e{margin:16px 0 0;padding:16px 20px;border-radius:0 12px 12px 0;
  border-left:4px solid var(--amar);background:#FFFBF0;
  font-size:15.5px;line-height:1.8;color:var(--tinta);font-style:italic}

/* ── los role plays ── */
.rps{display:grid;gap:16px}
.rp{display:flex;gap:22px;align-items:flex-start;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:26px 28px}
.rp__n{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--anton);font-size:19px;
  background:rgba(255,202,43,.18);color:var(--amar)}
.rp h3{font-family:var(--inter);font-size:19px;font-weight:700;color:#fff;
  line-height:1.3;margin-bottom:9px}
.rp__s{font-size:15px;line-height:1.75;color:rgba(255,255,255,.76);margin-bottom:14px}
.rp__m{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.rp__m li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.65;
  color:rgba(255,255,255,.82)}
.rp__m li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;
  border-radius:2px;background:var(--amar)}
.rp__e{font-size:14.5px;line-height:1.7;color:var(--magtx,#FF8199);
  padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}

/* ── la llamada en frio ── */
.llas{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
.lla{display:flex;gap:20px;align-items:flex-start;background:#fff;
  border:1px solid var(--linea);border-radius:16px;padding:24px 26px}
.lla__n{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--anton);font-size:17px;
  background:rgba(205,0,70,.1);color:var(--mag)}
.lla h3{font-family:var(--inter);font-size:17px;font-weight:700;color:var(--tinta);margin-bottom:6px}
.lla p{font-size:14.5px;line-height:1.7;color:var(--gris)}
.lla blockquote{margin:12px 0 0;padding:14px 18px;border-radius:0 12px 12px 0;
  border-left:4px solid var(--amar);background:#FFFBF0;
  font-size:15px;line-height:1.75;color:var(--tinta);font-style:italic}
.regs{border:1px solid var(--linea);border-left:4px solid var(--mag);
  border-radius:0 16px 16px 0;padding:24px 28px;background:#FDF5F7}
.regs__t{font-family:var(--inter);font-size:12px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--mag);margin-bottom:14px}
.regs ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.regs li{position:relative;padding-left:20px;font-size:15px;line-height:1.65;color:var(--gris)}
.regs li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:2px;
  border-radius:2px;background:var(--mag)}

.bibs__f{margin-top:22px;font-size:15px;line-height:1.75;color:var(--gris)}
.bibs__f a{color:var(--mag);font-weight:600;border-bottom:1px solid rgba(205,0,70,.3)}

/* en /formacion la biblioteca va sobre blanco */
.sec:not(.sec--navy) .bib{background:#fff;border-color:var(--linea)}
.sec:not(.sec--navy) .bib h4{color:var(--mag)}
.sec:not(.sec--navy) .bib li{color:var(--gris)}
.sec:not(.sec--navy) .bib li svg{color:var(--mag)}

@media (max-width:1024px){
  .spes,.cans,.plas{grid-template-columns:1fr}
  .rp{padding:22px 22px;gap:16px}
  .obj{padding:22px 22px}
  .obj__cab{flex-direction:column;gap:10px}
}

/* === PAGINAS DE SERVICIO · generado por _generador/css_servicios.py — NO EDITAR A MANO === */
/* ─────────────── LA CINTA ENTRE DOS SECCIONES DEL MISMO AZUL ───────────────
   `corte_azul()` de `bloques.py` nacio para /mercados, que es una pagina en
   tema AZUL: ahi `--f0` y `--f2` existen. En una pagina de tema claro esas dos
   variables no estan definidas, la declaracion queda invalida y la cinta sale
   con FONDO BLANCO entre dos secciones navy: justo la franja que venia a
   evitar. Se veia en /planificacion-financiera entre "Tu viaje financiero" y
   "Qué vas a lograr".

   Por eso las paginas de servicio usan `cinta_navy()`, que agrega esta clase.
   No se toca la regla original: /mercados sigue exactamente igual. */
.cz--sv{background:var(--navy)}
.cz--sv .cz__cinta{stroke:rgba(255,255,255,.07)}
html[data-oscuro] .cz--sv{background:var(--f1)}
html[data-oscuro] .cz--sv .cz__cinta{stroke:var(--f2)}

/* ───────────────────── CINTA DE PRUEBA (bajo el hero) ─────────────────────
   Tres sellos: la matricula, el formato y el precio de entrar. Va pegada al
   hero porque son las tres objeciones que aparecen en los primeros segundos y
   contestarlas ahi cuesta 60px de alto. */
.sv-prueba{background:#F7F9FB;padding:22px 5%;border-bottom:1px solid var(--linea)}
.sv-prueba__int{max-width:1200px;margin:0 auto;display:flex;gap:18px 54px;
  flex-wrap:wrap;justify-content:center}
.sv-sello{display:flex;align-items:center;gap:12px;max-width:340px}
.sv-sello__ic{width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:rgba(205,0,70,.09);color:var(--mag);
  display:flex;align-items:center;justify-content:center}
.sv-sello strong{display:block;font-family:var(--inter);font-size:14.5px;
  font-weight:700;color:var(--tinta);line-height:1.3}
/* `strong+span` y NO `.sv-sello span`: el circulo del icono tambien es un
   <span>, y la regla suelta le ganaba por especificidad a `.sv-sello__ic`
   (0,1,1 contra 0,1,0). Le ponia display:block y se perdia el centrado del
   flex: los tres iconos quedaban pegados arriba a la izquierda del circulo en
   las 16 paginas con cinta. Lo marco Julian el 17-sep-2026. */
.sv-sello strong+span{display:block;font-family:var(--inter);font-size:13px;
  color:var(--gris);line-height:1.45;margin-top:2px}

/* ─────────────────────── SITUACIONES ("¿te suena familiar?") ───────────────
   Tarjeta de dolor. Se distingue de `.tarj` en tres cosas y las tres importan:
   no lleva icono en circulo (un dolor con una pelotita de color al lado se lee
   como un beneficio), lleva el numero grande en gris muy claro atras, y lleva
   un filo magenta arriba. */
.sv-sits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sv-sits--2{grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto}
.sv-sits--4{grid-template-columns:repeat(2,1fr)}
.sv-sit{position:relative;background:#fff;border:1px solid var(--linea);
  border-top:4px solid var(--mag);border-radius:18px;padding:34px 30px 30px;
  overflow:hidden;box-shadow:0 10px 30px rgba(14,47,68,.06)}
/* El numero va CON reserva de espacio y no con `max-width` en el titulo: con
   un ancho porcentual, un titulo de dos renglones en una tarjeta angosta se
   metia igual debajo del numero. `padding-right` en el h3 reserva pixeles
   fijos, que es lo unico que no depende del ancho de la columna. */
.sv-sit__n{position:absolute;top:2px;right:14px;font-family:var(--anton);
  font-size:64px;line-height:1;color:rgba(14,47,68,.055);pointer-events:none}
.sv-sit h3{position:relative;font-family:var(--inter);font-size:19px;font-weight:700;
  color:var(--tinta);line-height:1.32;margin:0 0 12px;padding-right:54px}
.sv-sit p{font-family:var(--inter);font-size:15px;color:var(--gris);line-height:1.7;margin:0}
.sv-sit__tit{display:block;font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.6px;color:var(--mag);margin:22px 0 12px}
.sv-sit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.sv-sit li{display:flex;gap:10px;align-items:flex-start;font-family:var(--inter);
  font-size:14.5px;color:var(--gris);line-height:1.6}
.sv-sit li svg{flex:0 0 auto;margin-top:3px;color:var(--mag)}

/* ─────────────────────────── REMATE (frase sobre navy) ─────────────────────
   La frase que hoy queda enterrada en una `.cita-caja` gris. Es el puente
   entre el dolor y la solucion: si no se lee, la pagina se parte en dos. */
.sv-remate{padding:74px 5%;background-color:var(--navy);width:100%}
.sv-remate__int{max-width:940px;margin:0 auto;text-align:center}
.sv-remate__filo{width:56px;height:4px;border-radius:3px;background:var(--amar);margin:0 auto 26px}
/* La lamina de grabado, cuando la pagina tiene una. Va recortada a alfa, asi
   que no lleva marco ni fondo: flota sobre el navy. `max-height` la acota para
   que no se coma la frase, que es lo que la seccion vino a decir. */
.sv-remate__fig{margin:0 auto 34px;max-width:760px}
.sv-remate__fig img{width:100%;height:auto;max-height:300px;object-fit:contain;
  margin:0 auto;opacity:.94}
@media (max-width:768px){.sv-remate__fig{max-width:100%;margin-bottom:26px}
  .sv-remate__fig img{max-height:190px}}
.sv-remate p{font-family:var(--inter);font-weight:700;
  font-size:clamp(21px,2.7vw,31px);line-height:1.45;color:#fff;
  text-wrap:balance;margin:0}
.sv-remate p em{font-style:normal;color:var(--amar)}
/* La linea fina es tambien un `<p>` adentro de `.sv-remate`, asi que `.sv-remate p`
   (0,1,1) le ganaba a `.sv-remate__fino` (0,1,0) y salia del mismo tamanio que
   la frase principal. Con el selector calificado da (0,2,0) y gana. */
.sv-remate p.sv-remate__fino{font-family:var(--inter);font-size:16px;font-weight:400;
  color:rgba(255,255,255,.62);line-height:1.7;margin-top:20px}

/* ───────────────────── ENFRENTADAS (sin / con) ─────────────────────────────
   Dos columnas del mismo alto sobre navy: la de la izquierda apagada, la de la
   derecha en amarillo. El amarillo y no el magenta: contra el navy el magenta
   da 1,6:1 y se lee como una mancha. Es la misma regla que ya sigue `banda_cta`. */
.sv-vs{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1060px;margin:0 auto}
.sv-vs__col{border-radius:20px;padding:34px 32px}
.sv-vs__col--mal{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.sv-vs__col--bien{background:rgba(255,202,43,.09);border:1px solid rgba(255,202,43,.36)}
.sv-vs__cab{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.sv-vs__cab h3{font-family:var(--urb);font-size:15px;font-weight:900;text-transform:uppercase;
  letter-spacing:1.6px;margin:0}
.sv-vs__col--mal .sv-vs__cab h3{color:rgba(255,255,255,.58)}
.sv-vs__col--bien .sv-vs__cab h3{color:var(--amar)}
.sv-vs__col--mal .sv-vs__cab svg{color:rgba(255,255,255,.42)}
.sv-vs__col--bien .sv-vs__cab svg{color:var(--amar)}
.sv-vs__sub{font-family:var(--inter);font-size:14px;line-height:1.5;margin:0 0 24px}
.sv-vs__col--mal .sv-vs__sub{color:rgba(255,255,255,.46)}
.sv-vs__col--bien .sv-vs__sub{color:rgba(255,255,255,.72)}
.sv-vs__it{padding-top:18px;border-top:1px solid rgba(255,255,255,.10)}
.sv-vs__it h4{font-family:var(--inter);font-size:15.5px;font-weight:700;margin:0 0 7px}
.sv-vs__col--mal .sv-vs__it h4{color:rgba(255,255,255,.72)}
.sv-vs__col--bien .sv-vs__it h4{color:#fff}
.sv-vs__it p{font-family:var(--inter);font-size:14.5px;line-height:1.65;margin:0}
.sv-vs__col--mal .sv-vs__it p{color:rgba(255,255,255,.50)}
.sv-vs__col--bien .sv-vs__it p{color:rgba(255,255,255,.80)}
.sv-vs__it+.sv-vs__it{margin-top:18px}
/* lista simple, cuando el item no tiene descripcion */
.sv-vs__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.sv-vs__lista li{display:flex;gap:11px;align-items:flex-start;font-family:var(--inter);
  font-size:15.5px;line-height:1.6}
.sv-vs__lista li svg{flex:0 0 auto;margin-top:4px}
.sv-vs__col--mal .sv-vs__lista li{color:rgba(255,255,255,.58)}
.sv-vs__col--mal .sv-vs__lista li svg{color:rgba(255,255,255,.40)}
.sv-vs__col--bien .sv-vs__lista li{color:#fff}
.sv-vs__col--bien .sv-vs__lista li svg{color:var(--amar)}

/* ───────── EL CASO PAREADO: un hecho, sus dos desenlaces pegados ──────────
   Lo que arregla, y esta medido: `.sv-vs` colapsa a una columna a 768px, asi
   que en el celular los tres desenlaces malos quedaban seguidos y los tres
   buenos seis bloques mas abajo. El apareo —que ES el argumento de
   /seguros-y-proteccion— se perdia justo donde entra el 95% del trafico.
   Aca el hecho es el titulo de la fila y los dos lados cuelgan de el: al
   apilarse siguen debajo de su hecho.

   VIVE SOBRE NAVY, igual que `.sv-vs`: el texto es blanco fijo. Si alguna vez
   hace falta sobre blanco, hay que escribir la variante, no reusarlo. */
.sv-caso{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.sv-caso__fila{border-radius:20px;padding:26px 28px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.sv-caso__hecho{font-family:var(--urb);font-size:clamp(17px,2.1vw,20px);font-weight:900;
  color:#fff;line-height:1.25;margin:0 0 18px;letter-spacing:.2px}
.sv-caso__par{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sv-caso__lado{border-radius:14px;padding:18px 20px}
.sv-caso__lado--mal{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11)}
.sv-caso__lado--bien{background:rgba(255,202,43,.09);border:1px solid rgba(255,202,43,.34)}
/* El rotulo va SIEMPRE visible en cada lado y no en una fila de encabezado que
   se esconda en movil: un solo camino de codigo y nada que se rompa el dia que
   se mueva el breakpoint. */
.sv-caso__rot{display:flex;align-items:center;gap:9px;font-family:var(--urb);
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;
  line-height:1.3;margin-bottom:11px}
.sv-caso__rot svg{flex:0 0 auto}
/* .70 y .66, y no los .52 / .56 con que arranco esto copiando `.sv-vs`:
   medido por CDP, sobre el fondo compuesto de la tarjeta daban 3,8:1 y 4,1:1,
   los dos abajo del 4,5:1 que pide AA para texto normal. Y no es texto de
   relleno: es la mitad «sin cobertura» de la comparacion, o sea justo lo que
   la pagina quiere que se lea. */
.sv-caso__lado--mal .sv-caso__rot{color:rgba(255,255,255,.70)}
.sv-caso__lado--bien .sv-caso__rot{color:var(--amar)}
.sv-caso__lado p{font-family:var(--inter);font-size:14.5px;line-height:1.68;margin:0}
.sv-caso__lado--mal p{color:rgba(255,255,255,.66)}
.sv-caso__lado--bien p{color:rgba(255,255,255,.86)}

/* ───────── EL AUTOCHEQUEO DE LOS SEIS FRENTES (solo /planificacion) ────────
   Va pegado abajo de las columnas enfrentadas, sobre el mismo navy y adentro
   de la misma seccion: es la parte que hace CONTESTAR el argumento que las dos
   columnas afirman. Por eso no lleva caja propia de color ni se separa con un
   corte; se lee como el pie de la comparacion, no como otra seccion.

   LA CASILLA ES NATIVA Y ESTA ESCONDIDA, NO REEMPLAZADA. El <input> sigue ahi,
   en absoluto y con opacidad 0, asi que el teclado y los lectores de pantalla
   lo ven igual; lo que se dibuja es el <span> de al lado. El anillo de foco se
   pasa del input a ese span con `:focus-visible`, o sea que quien navega con
   Tab ve exactamente donde esta parado. Reemplazar la casilla por un div con
   `role="checkbox"` habria sido la forma facil de romper esto. */
.sv-auto{max-width:1060px;margin:34px auto 0;border-radius:20px;
  padding:32px 32px 26px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14)}
.sv-auto__cab h3{font-family:var(--inter);font-size:20px;font-weight:700;color:#fff;
  margin:0 0 8px;line-height:1.32}
.sv-auto__cab p{font-family:var(--inter);font-size:14.5px;line-height:1.62;
  color:rgba(255,255,255,.62);margin:0 0 24px;max-width:660px}
.sv-auto__lista{list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.sv-auto__it{position:relative;display:flex;gap:12px;align-items:flex-start;
  cursor:pointer;padding:13px 15px;border-radius:12px;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.03);
  transition:border-color .18s,background .18s}
.sv-auto__it:hover{border-color:rgba(255,202,43,.40);background:rgba(255,202,43,.05)}
.sv-auto__it:has(input:checked){border-color:rgba(255,202,43,.45);
  background:rgba(255,202,43,.09)}
.sv-auto__it input{position:absolute;top:14px;left:16px;width:20px;height:20px;
  opacity:0;margin:0}
.sv-auto__box{flex:0 0 auto;width:21px;height:21px;border-radius:6px;margin-top:1px;
  border:1.5px solid rgba(255,255,255,.32);background:rgba(255,255,255,.05);
  color:transparent;display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s,color .18s}
.sv-auto__it input:checked+.sv-auto__box{background:var(--amar);
  border-color:var(--amar);color:#0E2F44}
.sv-auto__it input:focus-visible+.sv-auto__box{outline:3px solid rgba(255,202,43,.75);
  outline-offset:2px}
.sv-auto__et{font-family:var(--inter);font-size:14.8px;line-height:1.5;
  color:rgba(255,255,255,.78)}
.sv-auto__it input:checked~.sv-auto__et{color:#fff}
.sv-auto__res{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;
  display:grid;grid-template-columns:1fr 1fr;gap:24px 34px;align-items:start}
/* Con los seis frentes marcados, la columna de "lo que queda abierto" se va y
   la frase quedaba apretada en media caja con la otra mitad vacia. */
.sv-auto__res:has(>[hidden]){grid-template-columns:1fr}
.sv-auto__cuenta{display:flex;align-items:baseline;gap:11px;margin:0 0 13px}
.sv-auto__cuenta b{font-family:var(--anton);font-size:46px;line-height:.9;color:var(--amar)}
.sv-auto__cuenta span{font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.55);line-height:1.4}
.sv-auto__barra{height:8px;border-radius:6px;background:rgba(255,255,255,.10);
  overflow:hidden;margin-bottom:15px}
.sv-auto__barra i{display:block;height:100%;width:0;border-radius:6px;
  background:var(--amar);transition:width .45s cubic-bezier(.22,.61,.36,1)}
.sv-auto__dice{font-family:var(--inter);font-size:15px;line-height:1.68;
  color:rgba(255,255,255,.78);margin:0}
.sv-auto__falta-et{display:block;font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.6px;color:var(--amar);margin-bottom:13px}
.sv-auto__falta ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:13px}
.sv-auto__falta li{font-family:var(--inter);font-size:13.8px;line-height:1.6;
  color:rgba(255,255,255,.56);padding-left:14px;border-left:2px solid rgba(255,202,43,.35)}
.sv-auto__falta li b{display:block;font-weight:700;color:rgba(255,255,255,.88);
  margin-bottom:3px}
/* Sin JavaScript nadie puede ir tachando, asi que la lista se queda en el
   estado cero. Cortarla en tres es lo mismo que hace el script: seis
   consecuencias seguidas es un muro y las tres primeras ya dicen todo. */
.sv-auto:not(.sv-auto--js) .sv-auto__falta li:nth-child(n+4){display:none}
.sv-auto__pie{display:flex;align-items:center;flex-wrap:wrap;gap:16px 26px;
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.sv-auto__btn{flex:0 0 auto;padding:17px 34px;font-size:15px}
.sv-auto__nota{flex:1 1 250px;display:flex;align-items:flex-start;gap:8px;margin:0;
  font-family:var(--inter);font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.45)}
.sv-auto__nota svg{flex:0 0 auto;margin-top:2px}
@media (prefers-reduced-motion:reduce){
  .sv-auto__barra i,.sv-auto__it,.sv-auto__box{transition:none}
}

/* ──────────────────── PROYECCION (plazo fijo vs cartera) ───────────────────
   Los mismos $10.000 en dos lugares, a hoy, 5 y 10 anios. La barra mide el
   monto y no es decorativa: 10K es el 40% del ancho y 25K el 100%, asi que la
   diferencia de largo ES la diferencia de plata. */
.sv-proy{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
.sv-proy__col{border-radius:20px;padding:32px 30px}
.sv-proy__col--gris{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.sv-proy__col--vivo{background:rgba(255,202,43,.09);border:1px solid rgba(255,202,43,.36)}
.sv-proy__col h3{font-family:var(--urb);font-size:15px;font-weight:900;text-transform:uppercase;
  letter-spacing:1.6px;margin:0 0 5px}
.sv-proy__col--gris h3{color:rgba(255,255,255,.58)}
.sv-proy__col--vivo h3{color:var(--amar)}
.sv-proy__col>p{font-family:var(--inter);font-size:14px;margin:0 0 26px;line-height:1.5}
.sv-proy__col--gris>p{color:rgba(255,255,255,.46)}
.sv-proy__col--vivo>p{color:rgba(255,255,255,.72)}
.sv-hito{margin-bottom:20px}
.sv-hito__fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}
.sv-hito__cuando{font-family:var(--urb);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.4px;color:rgba(255,255,255,.55)}
.sv-hito__monto{font-family:var(--anton);font-size:30px;line-height:1;color:#fff}
.sv-proy__col--vivo .sv-hito__monto{color:var(--amar)}
.sv-hito__barra{height:9px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden}
.sv-hito__barra i{display:block;height:100%;border-radius:6px;background:rgba(255,255,255,.30)}
.sv-proy__col--vivo .sv-hito__barra i{background:var(--amar)}
.sv-hito__delta{font-family:var(--inter);font-size:12.5px;margin-top:6px;color:rgba(255,255,255,.5)}
.sv-proy__pie{font-family:var(--inter);font-size:14.5px;line-height:1.65;
  padding-top:18px;margin:6px 0 0;border-top:1px solid rgba(255,255,255,.10)}
.sv-proy__col--gris .sv-proy__pie{color:rgba(255,255,255,.5)}
.sv-proy__col--vivo .sv-proy__pie{color:rgba(255,255,255,.8)}
.sv-proy__saldo{max-width:1000px;margin:30px auto 0;text-align:center}
.sv-proy__saldo strong{display:block;font-family:var(--anton);font-size:clamp(26px,3.4vw,40px);
  color:var(--amar);line-height:1.15;letter-spacing:.5px}
.sv-proy__saldo span{display:block;font-family:var(--inter);font-size:13.5px;
  color:rgba(255,255,255,.55);line-height:1.65;margin-top:12px;max-width:640px;
  margin-inline:auto}

/* ───────────────────────── FORMULA DEL NUMERO ──────────────────────────────
   La pieza central de /planificacion-de-retiro. Cada factor es una caja y cada
   operador va SUELTO entre dos cajas: en el HTML publicado hoy los `x`, `÷` y
   `=` estan adentro de un `<li>` con un tilde magenta al lado, que es como
   decir "✓ ÷". */
.sv-form{display:flex;align-items:stretch;justify-content:center;gap:14px;flex-wrap:wrap;
  max-width:1000px;margin:0 auto}
.sv-form__p{flex:1 1 168px;max-width:230px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px 18px;text-align:center}
.sv-form__p--res{background:rgba(255,202,43,.11);border-color:rgba(255,202,43,.42)}
.sv-form__et{display:block;font-family:var(--urb);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.55);margin-bottom:10px}
.sv-form__v{display:block;font-family:var(--anton);font-size:clamp(28px,3.4vw,40px);
  line-height:1;color:#fff}
.sv-form__p--res .sv-form__v{color:var(--amar)}
.sv-form__p--res .sv-form__et{color:var(--amar)}
/* Los operadores van en Inter y no en Anton: Anton no trae los glifos de
   multiplicacion ni de division, el navegador cae a una fuente de sistema y los
   dibuja a la mitad del tamanio pedido. Se veia en la captura del 8-sep. */
.sv-form__op{flex:0 0 auto;display:flex;align-items:center;font-family:var(--inter);
  font-weight:600;font-size:30px;line-height:1;color:rgba(255,255,255,.66);padding:0 4px}
.sv-form__pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:1000px;margin:44px auto 0}
.sv-form__paso{border-top:1px solid rgba(255,255,255,.14);padding-top:20px}
.sv-form__paso b{display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:rgba(255,202,43,.18);color:var(--amar);
  font-family:var(--urb);font-size:14px;font-weight:800;margin-bottom:13px}
.sv-form__paso h4{font-family:var(--inter);font-size:16px;font-weight:700;color:#fff;margin:0 0 7px}
.sv-form__paso p{font-family:var(--inter);font-size:14.5px;line-height:1.65;
  color:rgba(255,255,255,.66);margin:0}
.sv-form__paso code{display:inline-block;margin-top:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:7px;padding:5px 10px;color:var(--amar)}

/* ──────────────────────────── NUMEROS CON FUENTE ───────────────────────────
   Un dato sin fuente es una opinion con tipografia grande. La fuente va en el
   mismo bloque, chica pero visible: es lo que hace que RR.HH. pueda copiar el
   numero adentro de su propia presentacion. */
.sv-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px}
.sv-num{background:#fff;border:1px solid var(--linea);border-radius:18px;
  padding:34px 28px;text-align:center;box-shadow:0 10px 30px rgba(14,47,68,.06)}
.sv-num__n{display:block;font-family:var(--anton);font-size:clamp(44px,5.4vw,64px);
  line-height:1;color:var(--mag);letter-spacing:.5px}
.sv-num h3{font-family:var(--urb);font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:1.8px;color:var(--tinta);margin:14px 0 10px}
.sv-num p{font-family:var(--inter);font-size:14.5px;color:var(--gris);line-height:1.65;margin:0}
.sv-num cite{display:block;font-style:normal;font-family:var(--inter);font-size:12px;
  color:var(--gris2);margin-top:16px;padding-top:14px;border-top:1px solid var(--linea)}
/* La variante oscura: la usa /seguros-y-proteccion, donde la prueba externa
   tiene que ir sobre navy por la regla de las dos claras seguidas. El numero
   pasa de magenta a ambar porque el magenta sobre navy da 1,6:1 y se lee como
   una mancha, no como una cifra. */
.sv-nums--navy .sv-num{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.13);box-shadow:none}
.sv-nums--navy .sv-num__n{color:var(--amar)}
.sv-nums--navy .sv-num h3{color:#fff}
.sv-nums--navy .sv-num p{color:rgba(255,255,255,.76)}
.sv-nums--navy .sv-num cite{color:rgba(255,255,255,.68);
  border-top-color:rgba(255,255,255,.13)}
/* La aclaracion de abajo del bloque. Existe porque el numero es el PISO
   obligatorio y no todo lo que una persona puede tener: sin esta linea, tres
   cifras oficiales sobre navy se leen como «esto es lo que tenes», que seria
   falso para quien ademas tiene una colectiva de la empresa. */
.sv-nums__fino{max-width:820px;margin:26px auto 0;text-align:center;
  font-family:var(--inter);font-size:14.5px;line-height:1.7;
  color:rgba(255,255,255,.76);text-wrap:pretty}
.sv-nums__fino strong{color:var(--amar);font-weight:700}
.sv-roi{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  background:var(--tinta);border-radius:22px;padding:38px 42px;margin-top:28px}
.sv-roi__n{font-family:var(--anton);font-size:clamp(52px,7vw,84px);line-height:1;color:var(--amar)}
.sv-roi h3{font-family:var(--urb);font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:1.8px;color:var(--amar);margin:0 0 10px}
.sv-roi p{font-family:var(--inter);font-size:16px;line-height:1.7;color:rgba(255,255,255,.82);margin:0}
.sv-roi cite{display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.5);margin-top:12px}

/* ─────────────────────────────── MITO / REALIDAD ───────────────────────────
   El mito arriba, en gris y entre comillas; la realidad abajo, en tinta plena
   y separada por una linea. La jerarquia hace el trabajo: se lee primero la
   creencia propia y despues el desmentido. */
.sv-mitos{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sv-mito{background:#fff;border:1px solid var(--linea);border-radius:18px;overflow:hidden;
  box-shadow:0 10px 30px rgba(14,47,68,.06)}
.sv-mito__a{background:#F7F9FB;padding:26px 30px;border-bottom:1px solid var(--linea)}
.sv-mito__b{padding:26px 30px}
.sv-mito__et{display:inline-flex;align-items:center;gap:7px;font-family:var(--urb);
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.7px;margin-bottom:11px}
.sv-mito__a .sv-mito__et{color:var(--gris2)}
.sv-mito__b .sv-mito__et{color:var(--mag)}
.sv-mito__a p{font-family:var(--inter);font-size:17px;font-weight:600;color:var(--gris);
  line-height:1.5;margin:0;font-style:italic}
.sv-mito__b p{font-family:var(--inter);font-size:15px;color:var(--tinta);line-height:1.75;margin:0}

/* ─────────────────────── ERRORES (con "lo que cambia") ─────────────────────*/
.sv-errs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sv-err{background:#fff;border:1px solid var(--linea);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px rgba(14,47,68,.06)}
.sv-err__a{padding:32px 30px 26px;flex-grow:1}
.sv-err__n{display:inline-block;font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.7px;color:#fff;background:var(--mag);
  border-radius:20px;padding:5px 13px;margin-bottom:16px}
.sv-err h3{font-family:var(--inter);font-size:19px;font-weight:700;color:var(--tinta);
  line-height:1.32;margin:0 0 12px}
.sv-err p{font-family:var(--inter);font-size:15px;color:var(--gris);line-height:1.7;margin:0}
.sv-err__b{background:#F7F9FB;border-top:1px solid var(--linea);padding:22px 30px}
.sv-err__b span{display:block;font-family:var(--urb);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.7px;color:var(--mag);margin-bottom:9px}
.sv-err__b p{font-size:14.5px;color:var(--tinta);line-height:1.65}

/* ────────────────────────────── TABLA DE 3 COLUMNAS ────────────────────────*/
.sv-tabla-caja{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--linea);border-radius:18px;background:#fff;
  box-shadow:0 10px 30px rgba(14,47,68,.06)}
.sv-tabla{width:100%;border-collapse:collapse;min-width:660px}
.sv-tabla thead th{font-family:var(--urb);font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:1.5px;text-align:left;padding:20px 24px;border-bottom:2px solid var(--linea)}
.sv-tabla thead th:nth-child(1){color:var(--gris2);width:22%}
.sv-tabla thead th:nth-child(2){color:var(--gris2);width:39%}
.sv-tabla thead th:nth-child(3){color:var(--mag);width:39%;background:rgba(205,0,70,.04)}
/* La primera celda de cada fila es un `th scope=row`, no un `td`: por eso la
   columna 1 se estila aparte y la destacada es la 3, contando el th. */
.sv-tabla tbody th{text-align:left;padding:20px 24px;border-bottom:1px solid var(--linea);
  vertical-align:top;font-family:var(--inter);font-size:15px;font-weight:700;color:var(--tinta)}
.sv-tabla td{padding:20px 24px;border-bottom:1px solid var(--linea);vertical-align:top;
  font-family:var(--inter);font-size:14.5px;line-height:1.65;color:var(--gris)}
.sv-tabla tbody td:nth-child(3){color:var(--tinta);background:rgba(205,0,70,.04)}
.sv-tabla tbody tr:last-child th,.sv-tabla tbody tr:last-child td{border-bottom:0}

/* ─────────────────────── TIMELINE DE PASOS CON ETIQUETA ────────────────────
   Los `.pasoN` de hoy pierden la etiqueta del fuente ("30 minutos · Gratis",
   "Plan 100% personalizado"), que es justo la parte que baja la ansiedad. Aca
   la etiqueta es parte del componente y la linea que une los pasos se dibuja
   con un ::before del contenedor, no con un div extra. */
.sv-linea{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sv-linea--3{grid-template-columns:repeat(3,1fr);max-width:1000px;margin:0 auto}
/* CLARO PRIMERO Y NAVY DESPUES, que es la convencion del resto del archivo.
   Hasta el 8-sep-2026 este bloque era el unico escrito al reves —navy primero
   y sin variante clara— y por eso era el unico que se rompia: sobre seccion
   blanca el titulo salia #fff sobre #fff, o sea contraste 1:1, y el paso
   quedaba con el circulo amarillo y NADA de texto.

   Eran cuatro lineas de tiempo en tres paginas: /sesion-para-parejas,
   /seguros-y-proteccion y /servicios-empresas dos veces. Las tres que van
   sobre navy —planificacion, inversiones, retiro— salian bien, que es
   justamente por lo que nadie lo vio leyendo el codigo.

   Es el mismo defecto que ya estaba anotado para `corte_azul()` y para la
   lamina de Balanz: un componente escrito para un solo fondo y usado en los
   dos. Medido y documentado en
   `42. CAMBIO A CLOUDFLARE\3. REDISENO DE PAGINAS\05 SESION PARA PAREJAS
    \11-HALLAZGO-LINEA-DE-PASOS-INVISIBLE.md`.

   Como los valores claros son `--tinta` y `--gris`, la piel oscura sale sola:
   esas dos variables se dan vuelta con el tema. */
.sv-linea::before{content:"";position:absolute;left:9%;right:9%;top:27px;height:2px;
  background:linear-gradient(90deg,rgba(224,224,224,0),var(--linea) 12%,
    var(--linea) 88%,rgba(224,224,224,0));z-index:0}
.sv-paso{position:relative;z-index:1;text-align:center}
.sv-paso__n{width:54px;height:54px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--amar);color:#0E2F44;font-family:var(--anton);font-size:24px;line-height:1;
  box-shadow:0 0 0 8px rgba(255,202,43,.13)}
.sv-paso h3{font-family:var(--inter);font-size:17px;font-weight:700;color:var(--tinta);
  line-height:1.32;margin:0 0 11px}
.sv-paso p{font-family:var(--inter);font-size:14.5px;line-height:1.7;
  color:var(--gris);margin:0}
.sv-paso__et{display:inline-block;margin-top:16px;font-family:var(--urb);font-size:11.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:1.4px;color:var(--mag);
  background:rgba(205,0,70,.06);border:1px solid rgba(205,0,70,.22);
  border-radius:20px;padding:6px 14px}
.sv-paso ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;
  gap:9px;text-align:left}
.sv-paso li{display:flex;gap:9px;align-items:flex-start;font-family:var(--inter);
  font-size:13.5px;line-height:1.55;color:var(--gris)}
.sv-paso li svg{flex:0 0 auto;margin-top:3px;color:var(--mag)}
/* y sobre navy, exactamente lo que habia antes */
.sec--navy .sv-linea::before{background:linear-gradient(90deg,rgba(255,202,43,0),
  rgba(255,202,43,.42) 12%,rgba(255,202,43,.42) 88%,rgba(255,202,43,0))}
.sec--navy .sv-paso h3{color:#fff}
.sec--navy .sv-paso p{color:rgba(255,255,255,.70)}
.sec--navy .sv-paso li{color:rgba(255,255,255,.62)}
.sec--navy .sv-paso li svg{color:var(--amar)}
.sec--navy .sv-paso__et{color:var(--amar);background:rgba(255,202,43,.13);
  border-color:rgba(255,202,43,.3)}

/* ────────────────────────── PERFILES CON PREGUNTA ──────────────────────────*/
.sv-perfs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sv-perf{background:#fff;border:1px solid var(--linea);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 30px rgba(14,47,68,.06)}
.sv-perf__a{padding:32px 30px 26px;flex-grow:1}
.sv-perf__et{display:block;font-family:var(--urb);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.8px;color:var(--mag);margin-bottom:14px}
.sv-perf h3{font-family:var(--inter);font-size:19px;font-weight:700;color:var(--tinta);
  line-height:1.32;margin:0 0 12px}
.sv-perf p{font-family:var(--inter);font-size:15px;color:var(--gris);line-height:1.7;margin:0}
.sv-perf__q{background:var(--tinta);padding:22px 30px;
  font-family:var(--inter);font-size:15px;font-weight:600;color:#fff;line-height:1.55;
  display:flex;gap:12px;align-items:flex-start}
.sv-perf__q svg{flex:0 0 auto;margin-top:3px;color:var(--amar)}

/* ───────────────────────── LOGROS (sobre navy) ─────────────────────────────*/
.sv-logros{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1060px;margin:0 auto}
.sv-logros--4{grid-template-columns:repeat(4,1fr);max-width:none}
.sv-logro{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  border-radius:18px;padding:30px 28px;display:flex;gap:18px;align-items:flex-start}
.sv-logro__ic{width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  background:rgba(255,202,43,.14);color:var(--amar);
  display:flex;align-items:center;justify-content:center}
.sv-logro h3{font-family:var(--inter);font-size:16.5px;font-weight:700;color:#fff;
  line-height:1.35;margin:0 0 9px}
.sv-logro p{font-family:var(--inter);font-size:14.5px;line-height:1.65;
  color:rgba(255,255,255,.70);margin:0}

/* ──────────────────── HERRAMIENTAS REALES (la captura) ─────────────────────
   El equivalente de "paginas reales, no una promesa" de las landings de
   producto. La captura va con marco y peana; sin eso, sobre el blanco de la
   seccion se lee como un rectangulo pegado y no como un objeto. */
.sv-herr{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* La imagen a la derecha. Existe porque /planificacion-financiera muestra dos
   capturas seguidas —la planilla y la sesion por Zoom— y dos bloques con la
   misma composicion uno abajo del otro se leen como una repeticion. Se apila
   igual que el normal abajo de 1024: ahi el orden lo decide `order:0`. */
.sv-herr--espejo .sv-herr__arte{order:2}
.sv-herr__arte{position:relative;display:flex;justify-content:center}
.sv-herr__arte::after{content:"";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  width:70%;height:38px;border-radius:50%;background:rgba(14,47,68,.16);filter:blur(20px)}
.sv-herr__arte img{position:relative;z-index:1;width:auto;height:auto;max-width:100%;max-height:430px;
  border-radius:14px;border:1px solid var(--linea);box-shadow:0 30px 60px rgba(14,47,68,.20)}
.sv-herr h3{font-family:var(--inter);font-size:clamp(22px,2.5vw,28px);font-weight:700;
  color:var(--tinta);line-height:1.3;margin:0 0 18px}
.sv-herr>div>p{font-family:var(--inter);font-size:16px;color:var(--gris);line-height:1.8;margin:0 0 20px}
/* LA VARIANTE TIRA, para una captura mucho mas ancha que alta.
   La de la planilla mide 1600x487. En media columna de 522px entra a 33% y los
   numeros quedan de 5px: la captura deja de ser prueba y pasa a ser una mancha
   clara al costado del texto. A lo ancho entra a 69% y se leen. Va en una sola
   columna, la imagen arriba y el texto abajo.
   Es opcional: sin `tira=True` el componente sale igual que siempre, o sea que
   las paginas que ya lo usan no se mueven. */
.sv-herr--tira{grid-template-columns:1fr;gap:30px}
.sv-herr--tira .sv-herr__arte img{max-height:none;width:100%}
.sv-herr--tira .sv-herr__arte::after{bottom:-16px}
/* LA VARIANTE MOCK, para una imagen que ya trae su marco.
   Los dos mockups de la planilla de /recursos son dispositivos recortados con
   fondo transparente. El estilo de arriba le pone al <img> borde de 1px, radio
   de 14px y una sombra de 30px: sobre una captura rectangular esta bien, sobre
   una notebook recortada dibuja el rectangulo del contenedor alrededor de la
   computadora y tira la sombra sobre el aire de al lado. Acá el <img> va
   limpio —el dispositivo ya trae su sombra— y la peana se corre para abajo,
   porque el borde inferior de la imagen no es el borde de la pantalla. */
.sv-herr--mock .sv-herr__arte img{border:0;border-radius:0;box-shadow:none;max-height:400px}
.sv-herr--mock .sv-herr__arte::after{bottom:-6px;width:56%;height:26px;opacity:.6}

/* ── .sv-msj · el mensaje firmado de /plantilla-presupuesto ────────────────
   Es la unica seccion del sitio donde Shir habla en primera persona fuera de
   /sobre-mi y de los articulos: la excepcion declarada en 07-VOZ-DE-EMPRESA.
   Va angosta y centrada porque es una carta, no una seccion de producto: a
   1100px de ancho un parrafo de tres renglones se lee como copy de venta. */
.sv-msj{max-width:720px;margin-inline:auto}
.sv-msj p{font-family:var(--inter);font-size:17px;line-height:1.85;
  color:var(--gris);margin:0 0 18px}
/* El fondo es el mismo #F7F9FB de `.sv-prueba`, `.sv-mito__a` y `.sv-err__b`.
   NO se usa `var(--crema)`: esa variable no existe en `sitio.css` y una
   declaracion invalida deja la cita con fondo transparente sobre la seccion
   blanca, o sea sin caja. Ya paso con `--f0` y `--f2` en las paginas claras. */
.sv-msj__cita{margin:26px 0 0;padding:22px 26px;border-left:3px solid var(--mag);
  background:#F7F9FB;border-radius:0 14px 14px 0;
  font-family:var(--inter);font-size:18px;font-weight:600;line-height:1.7;
  color:var(--tinta)}
.sv-msj__firma{display:flex;flex-direction:column;gap:2px;margin:24px 0 0}
.sv-msj__firma b{font-family:var(--inter);font-size:16px;font-weight:700;
  color:var(--tinta)}
.sv-msj__firma span{font-family:var(--urb);font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mag)}

/* ── .sv-pte · el puente a la tienda de /recursos ──────────────────────────
   Es la caja que dice QUE YA TE LLEVAS GRATIS, abajo de la lista de lo que
   suma la version paga. El orden importa y por eso es un bloque aparte y no
   dos columnas: primero se lee lo que la de la tienda agrega y despues, con
   otro peso, lo que la gratis ya resuelve. Al reves queda un cuadro
   comparativo, y un cuadro comparativo en una pagina de cosas gratis se lee
   como una tabla de planes.
   Va sobre navy, asi que el filo es amarillo: el magenta contra el navy da
   1,6:1 y se lee como una mancha, que es la misma trampa de `enfrentadas`. */
.sv-pte{margin-top:34px;padding:22px 26px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);border-left:3px solid var(--amar);
  background:rgba(255,255,255,.05)}
.sv-pte__t{font-family:var(--urb);font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amar);margin:0 0 14px}
.sv-pte .checks{margin:0}
.sv-pte__n{font-family:var(--inter);font-size:14.5px;line-height:1.7;
  color:rgba(255,255,255,.62);margin:16px 0 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12)}
.sv-herr__pie{font-family:var(--inter);font-size:13.5px;color:var(--gris2);
  line-height:1.6;margin-top:24px;padding-top:18px;border-top:1px solid var(--linea)}
.sv-herr__pie a{color:var(--mag);font-weight:700}
.sv-herr__pie a:hover{text-decoration:underline}
/* El mismo bloque, sobre navy. Sin esto el titulo sale en `--tinta` y los
   parrafos en `--gris`: tinta oscura sobre azul oscuro, ilegible. Se veia en
   /servicios-empresas con la foto de la charla. */
.sec--navy .sv-herr h3{color:#fff}
.sec--navy .sv-herr>div>p{color:rgba(255,255,255,.78)}
.sec--navy .sv-herr .checks li{color:rgba(255,255,255,.82)}
.sec--navy .sv-herr .checks svg{color:var(--amar)}
.sec--navy .sv-herr__pie{color:rgba(255,255,255,.55);
  border-top-color:rgba(255,255,255,.14)}
.sec--navy .sv-herr__pie a{color:var(--amar)}
.sec--navy .sv-herr__arte img{border-color:rgba(255,255,255,.16)}
.sec--navy .sv-herr__arte::after{background:rgba(0,0,0,.40)}

/* ─────────────────────────── VIDEO CON EPIGRAFE ────────────────────────────*/
.sv-video{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.sv-video--espejo .sv-video__arte{order:2}
.sv-video--espejo .sv-video__txt{order:1}
.sv-video__arte{position:relative;max-width:360px;margin:0 auto;width:100%}
.sv-video__arte video{width:100%;border-radius:20px;display:block;
  box-shadow:0 20px 50px rgba(14,47,68,.22)}
.sv-video__dur{position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--urb);font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;background:rgba(14,47,68,.82);color:#fff;
  border-radius:20px;padding:6px 13px;backdrop-filter:blur(4px)}
.sv-video__pie{font-family:var(--inter);font-size:13.5px;color:var(--gris2);
  line-height:1.6;text-align:center;margin-top:16px}
.sv-video h3{font-family:var(--inter);font-size:clamp(21px,2.4vw,27px);font-weight:700;
  color:var(--tinta);line-height:1.32;margin:0 0 18px}
.sv-video__txt>p{font-family:var(--inter);font-size:16px;color:var(--gris);
  line-height:1.8;margin:0 0 16px}

/* ────────────────────────── QUE INCLUYE (lista numerada) ───────────────────
   Seis tarjetas iguales en fila se leen como un menu de restaurante. Una lista
   numerada a dos columnas se lee como un contrato: se sabe cuantas cosas son y
   se puede volver a una. */
.sv-incl{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;max-width:1080px;margin:0 auto}
.sv-inc{display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:26px 0;border-bottom:1px solid var(--linea)}
.sv-inc__n{font-family:var(--anton);font-size:26px;line-height:1;color:var(--mag);
  min-width:38px;padding-top:2px}
.sv-inc h3{font-family:var(--inter);font-size:17px;font-weight:700;color:var(--tinta);
  line-height:1.35;margin:0 0 8px}
.sv-inc p{font-family:var(--inter);font-size:14.5px;color:var(--gris);line-height:1.7;margin:0}

/* ──────────────────────────── TEMAS (empresas) ─────────────────────────────*/
.sv-temas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sv-tema{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--amar);
  border-radius:0 16px 16px 0;padding:26px 26px 24px}
.sv-tema h3{font-family:var(--inter);font-size:16.5px;font-weight:700;color:var(--tinta);
  line-height:1.35;margin:0 0 9px}
.sv-tema p{font-family:var(--inter);font-size:14.5px;color:var(--gris);line-height:1.65;margin:0}

/* ───────────────────────── LA REUNION (cierre a dos columnas) ──────────────
   Esta en los seis fuentes y no estaba en ninguna de las seis paginas. Es el
   bloque que contesta "y si agendo, que pasa exactamente". */
.sv-reu{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1060px;margin:0 auto}
.sv-reu__col{background:#fff;border:1px solid var(--linea);border-radius:20px;
  padding:36px 34px;box-shadow:0 10px 30px rgba(14,47,68,.06)}
.sv-reu__col--a{border-top:4px solid var(--mag)}
.sv-reu__col--b{border-top:4px solid var(--amar);background:#FAFBFC}
.sv-reu__col h3{display:flex;align-items:center;gap:11px;font-family:var(--inter);
  font-size:18px;font-weight:700;color:var(--tinta);margin:0 0 22px}
.sv-reu__col--a h3 svg{color:var(--mag)}
.sv-reu__col--b h3 svg{color:var(--ambar)}
.sv-reu__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.sv-reu__col li{display:flex;gap:11px;align-items:flex-start;font-family:var(--inter);
  font-size:15px;color:var(--gris);line-height:1.65}
.sv-reu__col li svg{flex:0 0 auto;margin-top:4px}
.sv-reu__col--a li svg{color:var(--mag)}
.sv-reu__col--b li svg{color:var(--ambar)}
.sv-reu__col li b{display:block;color:var(--tinta);font-weight:700;margin-bottom:3px}
.sv-reu__fino{max-width:1060px;margin:26px auto 0;text-align:center;
  font-family:var(--inter);font-size:15px;color:var(--gris);line-height:1.7}
.sv-reu__fino strong{color:var(--tinta)}
/* El boton del cierre a dos columnas. La seccion cuenta punto por punto que
   pasa en esa media hora y hasta el 8-sep-2026 no tenia forma de agendarla: el
   boton mas cercano quedaba dos secciones arriba. */
.sv-reu__cta{text-align:center;margin-top:32px}

/* ────────────────── PROSA A UNA COLUMNA ────────────────────────────────
   Para el relato de /sobre-mi. Una biografia en tres columnas de tarjetas no
   se lee: se escanea, que es exactamente lo contrario de lo que esa pagina
   necesita. Ancho de lectura y nada mas. */
.sv-prosa{max-width:720px;margin:0 auto}
.sv-prosa p{font-family:var(--inter);font-size:18px;line-height:1.85;
  color:var(--gris);margin:0 0 22px;text-wrap:pretty}
.sv-prosa p:last-child{margin-bottom:0}
.sv-prosa strong{color:var(--tinta)}
html[data-oscuro] .sv-prosa strong{color:var(--tinta)}

/* ────────────────── LOS TRES VIDEOS DE /sobre-mi ───────────────────────── */
.sv-tresv{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  max-width:1000px;margin:0 auto}
/* Un boton suelto centrado al pie de una seccion. Existe porque el `<div
   style="text-align:center">` estaba escrito a mano en tres archivos del
   generador y cada uno con su margen. */
.sv-centro{text-align:center;margin-top:38px}

/* ────────────────── LA FOTO DE PRUEBA (credencial, registro) ───────────── */
/* Va abajo de un bloque de numeros y no al lado: la foto ES el pie de pagina
   de la cifra, no una ilustracion que compite con ella. */
.sv-pruebaf{margin:34px auto 0;max-width:620px;text-align:center}
.sv-pruebaf img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--linea);box-shadow:0 16px 40px rgba(14,47,68,.12)}
.sv-pruebaf figcaption{font-family:var(--inter);font-size:13px;color:var(--gris2);
  line-height:1.6;margin-top:13px}
.sv-pruebaf--navy img{border-color:rgba(255,255,255,.16)}
.sv-pruebaf--navy figcaption{color:rgba(255,255,255,.62)}
/* Los collages con Shir (11-sep). Van adentro de una seccion que ya existe,
   a 880 px: el ancho medido en el que se dibuja un hueco de cuerpo en una
   MacBook. En el telefono ocupan el ancho de la columna. */
.sv-collage{margin:40px auto 0;max-width:880px;text-align:center}
.sv-collage img{width:100%;height:auto;display:block;border-radius:18px;
  box-shadow:0 18px 44px rgba(14,47,68,.16)}
.sv-collage figcaption{font-family:var(--inter);font-size:13px;color:var(--gris2);
  line-height:1.6;margin-top:13px}
.sv-collage--navy img{box-shadow:0 20px 48px rgba(0,0,0,.38)}
.sv-collage--navy figcaption{color:rgba(255,255,255,.62)}
@media (max-width:760px){.sv-collage{margin-top:28px}.sv-collage img{border-radius:14px}}

/* `position:relative` cuelga el reloj de duracion; `height:auto` deja que el
   navegador use la proporcion real (720x1280) que ahora viaja en los atributos
   del <video>. Sin `height:auto`, el `height="1280"` del atributo ganaria y el
   video mediria 1280 px de alto. */
.sv-tresv__v{margin:0;position:relative}
.sv-tresv__v video{width:100%;height:auto;border-radius:18px;display:block;
  box-shadow:0 16px 40px rgba(14,47,68,.18);background:var(--tinta);
  object-fit:cover}
.sv-tresv__dur{position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--urb);font-size:11.5px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;background:rgba(14,47,68,.82);color:#fff;
  border-radius:20px;padding:6px 13px;backdrop-filter:blur(4px);
  pointer-events:none}
.sv-tresv figcaption{margin-top:16px;font-family:var(--inter);font-size:15px;
  font-weight:600;color:var(--tinta);line-height:1.4}
.sv-tresv figcaption span{display:block;font-family:var(--urb);font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:1.6px;color:var(--mag);
  margin-bottom:7px}

/* ────────────────── LAS VIAS DE CONTACTO ───────────────────────────────── */
.sv-vias{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px;align-items:stretch}
.sv-via{background:#fff;border:1px solid var(--linea);border-radius:20px;
  padding:32px 30px;display:flex;flex-direction:column;
  box-shadow:0 10px 30px rgba(14,47,68,.06)}
.sv-via--dest{border:2px solid var(--mag);box-shadow:0 20px 50px rgba(205,0,70,.14)}
.sv-via__ic{width:52px;height:52px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;background:rgba(205,0,70,.08);
  color:var(--mag);margin-bottom:20px}
.sv-via--dest .sv-via__ic{background:var(--mag);color:#fff}
.sv-via__ce{display:block;font-family:var(--urb);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.7px;color:var(--mag);margin-bottom:10px}
.sv-via h3{font-family:var(--inter);font-size:20px;font-weight:700;color:var(--tinta);
  line-height:1.3;margin:0 0 11px}
.sv-via p{font-family:var(--inter);font-size:15px;color:var(--gris);line-height:1.7;
  margin:0 0 18px}
.sv-via .checks{margin-bottom:22px}
.sv-via .checks li{font-size:14.5px}
.sv-via .btn{margin-top:auto}

/* ────────────────── LA LINEA DE TIEMPO DE /sobre-mi ────────────────────── */
.sv-hitos{list-style:none;margin:0 auto;padding:0;max-width:760px;position:relative}
.sv-hitos::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;
  width:2px;background:linear-gradient(180deg,rgba(255,202,43,.55),rgba(255,202,43,.12))}
.sv-hito{position:relative;padding-left:52px;padding-bottom:34px}
.sv-hito:last-child{padding-bottom:0}
.sv-hito::before{content:"";position:absolute;left:4px;top:7px;width:16px;height:16px;
  border-radius:50%;background:var(--amar);box-shadow:0 0 0 5px rgba(255,202,43,.18)}
.sv-hito__anio{display:block;font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.7px;color:var(--amar);margin-bottom:8px}
.sv-hito h3{font-family:var(--inter);font-size:18px;font-weight:700;color:#fff;
  line-height:1.35;margin:0 0 9px}
.sv-hito p{font-family:var(--inter);font-size:15px;line-height:1.75;
  color:rgba(255,255,255,.72);margin:0}

/* ────────────────── LAS HERRAMIENTAS GRATIS (home) ─────────────────────── */
.sv-herrs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sv-herrc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);
  border-radius:18px;padding:30px 26px;box-shadow:0 10px 30px rgba(14,47,68,.06);
  transition:transform .2s cubic-bezier(.32,.72,0,1),box-shadow .2s,border-color .2s}
.sv-herrc:hover{transform:translateY(-5px);border-color:var(--mag);
  box-shadow:0 22px 48px rgba(14,47,68,.14)}
.sv-herrc--dest{border:2px solid var(--mag)}
.sv-herrc__ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:rgba(205,0,70,.08);color:var(--mag);margin-bottom:18px}
.sv-herrc--dest .sv-herrc__ic{background:var(--mag);color:#fff}
.sv-herrc__ce{display:block;font-family:var(--urb);font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.6px;color:var(--mag);margin-bottom:9px}
.sv-herrc h3{font-family:var(--inter);font-size:18px;font-weight:700;color:var(--tinta);
  line-height:1.3;margin:0 0 10px}
.sv-herrc p{font-family:var(--inter);font-size:14.5px;color:var(--gris);line-height:1.7;
  margin:0 0 18px;flex-grow:1}
.sv-herrc__ir{display:flex;align-items:center;gap:7px;font-family:var(--urb);font-size:12px;
  font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--mag)}

/* ────────────────── EL CAMINO DE CUATRO PASOS (home) ───────────────────── */
.sv-camino{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sv-paso4{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linea);
  border-radius:20px;overflow:hidden;box-shadow:0 12px 32px rgba(14,47,68,.08);
  transition:transform .22s cubic-bezier(.32,.72,0,1),box-shadow .22s}
.sv-paso4:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(14,47,68,.16)}
.sv-paso4__foto{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.sv-paso4__foto img{width:100%;height:100%;object-fit:cover;object-position:center 28%;
  transition:transform .5s cubic-bezier(.32,.72,0,1)}
.sv-paso4:hover .sv-paso4__foto img{transform:scale(1.05)}
.sv-paso4__n{display:block;font-family:var(--anton);font-size:15px;letter-spacing:2px;
  color:var(--mag);margin:24px 26px 10px}
.sv-paso4 h3{font-family:var(--inter);font-size:19px;font-weight:800;color:var(--tinta);
  line-height:1.25;margin:0 26px 11px}
.sv-paso4 p{font-family:var(--inter);font-size:14.5px;color:var(--gris);line-height:1.7;
  margin:0 26px 20px;flex-grow:1}
.sv-paso4__ir{display:flex;align-items:center;gap:7px;font-family:var(--urb);font-size:12px;
  font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--mag);
  margin:0 26px 26px}

/* ────────────────── LA FRANJA DE TAPAS DE LA TIENDA ────────────────────── */
.sv-tapas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sv-tapa{display:flex;flex-direction:column;text-align:center;
  transition:transform .2s cubic-bezier(.32,.72,0,1)}
.sv-tapa:hover{transform:translateY(-5px)}
.sv-tapa__img{display:block;background:var(--navy);border-radius:14px;overflow:hidden;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:14px;
  box-shadow:0 14px 34px rgba(14,47,68,.16)}
.sv-tapa__img img{width:auto;height:100%;max-width:100%;object-fit:contain;
  border-radius:4px}
/* La ESCENA (el producto adentro de un aparato) trae su propio fondo y viene a
   4:5. Va de borde a borde y en su relacion real: metida en la caja 4:3 con
   `contain` quedaban dos franjas de navy a los costados del navy de la escena.
   Mismo criterio que `tn-tapa--escena` en /tienda. */
.sv-tapa__img--escena{aspect-ratio:4/5;padding:0}
.sv-tapa__img--escena img{width:100%;height:100%;object-fit:cover;border-radius:0}
.sv-tapa__t{display:block;font-family:var(--inter);font-size:14.5px;font-weight:700;
  color:var(--tinta);line-height:1.35;margin-top:14px}
.sv-tapa__p{display:block;font-family:var(--inter);font-size:14px;font-weight:800;
  color:var(--mag);margin-top:5px}
/* ── EL PRODUCTO ESTRELLA · la tarjeta ancha que abre la franja ────────────
   Desde el 12-sep-2026. Deuda Cero no entra a la grilla: con siete tapas
   iguales la fila de tres quedaba 3+3+1 —un hueco de dos columnas— y el pack
   de $67.900 se leia igual que el ebook de $16.900.

   La imagen es UNA COLUMNA FIJA de 300px y no un porcentaje: la escena viene a
   4:5 y con `1fr 1.6fr` a 1200px de caja la tablet salia a 460px de ancho,
   mas alta que todo el bloque de texto de al lado. Con la columna fija el alto
   de la tarjeta lo decide el texto, que es lo que tiene que mandar. */
.sv-dest{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:center;
  background:#fff;border:1px solid var(--linea);border-radius:22px;
  padding:26px 34px 26px 26px;margin-bottom:26px;
  box-shadow:0 18px 46px rgba(14,47,68,.10)}
.sv-dest .sv-tapa__img{width:100%}
.sv-dest__txt{min-width:0}
.sv-dest__sello{display:inline-block;font-family:var(--urb);font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:1.6px;color:#fff;
  background:var(--mag);border-radius:999px;padding:6px 13px;margin-bottom:13px}
.sv-dest__ceja{font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--gris2);margin:0 0 7px}
.sv-dest__t{font-family:var(--anton);font-size:clamp(28px,3.2vw,40px);line-height:1.06;
  color:var(--tinta);margin:0 0 12px;letter-spacing:.4px}
.sv-dest__p{font-family:var(--inter);font-size:15.5px;line-height:1.7;
  color:var(--gris);margin:0 0 16px;max-width:56ch;text-wrap:pretty}
.sv-dest__li{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.sv-dest__li li{position:relative;padding-left:26px;font-family:var(--inter);
  font-size:14.5px;line-height:1.55;color:var(--tinta)}
/* El tilde va como fondo y no como caracter: `gen_final.py` recorre TODAS las
   paginas cambiando los tildes de verificacion escritos en texto por SVG, y un
   ✓ puesto aca se lo comeria en la corrida siguiente. */
.sv-dest__li li::before{content:'';position:absolute;left:0;top:.42em;
  width:15px;height:15px;border-radius:50%;background:var(--mag);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l1.4-1.4 2.8 2.8 7.6-7.6L18.6 7z'/%3E%3C/svg%3E") center/125% no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l1.4-1.4 2.8 2.8 7.6-7.6L18.6 7z'/%3E%3C/svg%3E") center/125% no-repeat}
.sv-dest__precio{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  font-family:var(--anton);font-size:32px;color:var(--tinta);margin:0 0 18px;
  letter-spacing:.5px}
.sv-dest__ancla{font-family:var(--inter);font-size:16px;font-weight:600;
  color:var(--gris2);text-decoration:line-through}
.sv-dest__btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--mag);color:#fff;font-family:var(--urb);font-size:13px;
  font-weight:800;text-transform:uppercase;letter-spacing:1.3px;
  border-radius:999px;padding:15px 30px;
  transition:transform .2s cubic-bezier(.32,.72,0,1),box-shadow .2s}
.sv-dest__btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(205,0,70,.26)}
.sv-tapas__pie{text-align:center;margin-top:30px;font-family:var(--inter);
  font-size:15px;color:var(--gris)}
.sv-tapas__pie a{color:var(--mag);font-weight:700}
.sv-tapas__pie a:hover{text-decoration:underline}

/* ═══════════════════ LAS PIEZAS QUE CALCULAN ═══════════════════════════════
   Una por pagina. El visitante ve el argumento de la pagina con SUS numeros,
   que es lo que separa una pagina que se ve bien de una que vende. El motor
   esta en `calc_servicio.py`. */
.sv-calc{background:#fff;border:1px solid var(--linea);border-radius:22px;
  padding:38px 38px 30px;box-shadow:0 18px 46px rgba(14,47,68,.10);
  max-width:1000px;margin:0 auto}
.sv-calc__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:22px 26px;margin-bottom:32px}
/* LA CALCULADORA DE CUATRO CAMPOS, EN UNA SOLA FILA.
   Con `minmax(215px,1fr)` y 26px de hueco, cuatro columnas piden 938px y la
   caja mide 924: por catorce pixeles el cuarto campo caia solo a una segunda
   fila, con medio ancho vacio al lado. Se achica el hueco en vez del minimo,
   asi las etiquetas conservan su ancho.
   El `:has()` acota la regla a las de EXACTAMENTE cuatro campos: las de tres
   (el colchon, el repartidor) y las de cinco (la proyeccion) siguen como
   estaban. Sin eso habria que bajar el minimo para todas y las de cinco
   pasarian de 3+2 a 4+1, que es peor.
   Y `subgrid`: puestos en una fila, «Ingreso mensual que querés tener» ocupa
   dos renglones y las otras tres etiquetas uno, asi que los cuatro campos
   arrancaban su input a distinta altura. Con `subgrid` las cuatro columnas
   comparten los tres renglones —etiqueta, campo, ayuda— y los inputs quedan
   alineados aunque las etiquetas midan distinto. */
@media (min-width:901px){
  .sv-calc__campos:has(> .sv-calc__campo:nth-child(4):last-child){
    grid-template-columns:repeat(4,1fr);column-gap:18px;
    grid-template-rows:auto auto auto}
  .sv-calc__campos:has(> .sv-calc__campo:nth-child(4):last-child)
    > .sv-calc__campo{display:grid;grid-row:span 3;grid-template-rows:subgrid;
    row-gap:0;align-content:start}
}
.sv-calc__campo{display:block}
/* La etiqueta lleva clase propia y no `.sv-calc__campo>span`: ese selector
   (0,1,1) tambien matcheaba a `.sv-calc__inp` (0,1,0) y le ganaba, asi que el
   contenedor del campo salia `display:block` y el `$` y el `%` caian cada uno
   en su propio renglon. Se veia en la captura del 8-sep. */
.sv-calc__lab{display:block;font-family:var(--inter);font-size:14px;
  font-weight:600;color:var(--tinta);margin-bottom:9px;line-height:1.35}
.sv-calc__inp{display:flex;align-items:center;background:#fff;
  border:2px solid var(--linea);border-radius:12px;overflow:hidden;
  transition:border-color .16s,box-shadow .16s}
.sv-calc__inp:focus-within{border-color:var(--mag);box-shadow:0 0 0 4px rgba(205,0,70,.10)}
.sv-calc__inp i,.sv-calc__inp em{flex:0 0 auto;font-style:normal;font-family:var(--inter);
  font-size:15px;font-weight:600;color:var(--gris2);padding:0 4px}
.sv-calc__inp i{padding-left:16px}
.sv-calc__inp em{padding-right:16px}
.sv-calc__inp input{flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:var(--inter);font-size:19px;font-weight:700;color:var(--tinta);
  padding:14px 16px;width:100%}
.sv-calc__inp--pre input{padding-left:6px}
.sv-calc__inp--suf input{padding-right:6px}
.sv-calc__campo small{display:block;font-family:var(--inter);font-size:12.5px;
  color:var(--gris2);margin-top:7px;line-height:1.45}

/* el resultado: la caja tinta con el numero grande */
.sv-calc__res{background:var(--tinta);border-radius:18px;padding:32px 34px;text-align:center}
.sv-calc__et{font-family:var(--urb);font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:2px;color:var(--amar);margin:0 0 12px}
/* `overflow-wrap:anywhere` no es decoracion: el motor deja cargar 9 digitos
   por campo y el resultado puede llegar a 26 caracteres en Anton, que a 390px
   mide 459px adentro de una caja de 265px. Sin esto, el numero se sale, empuja
   el ancho del documento a 521px y la pagina entera queda con scroll lateral.
   Medido el 8-sep-2026. */
.sv-calc__v{overflow-wrap:anywhere;
  font-family:var(--anton);font-size:clamp(38px,6vw,64px);line-height:1.05;
  color:#fff;margin:0;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.sv-calc__txt{font-family:var(--inter);font-size:15px;line-height:1.75;
  color:rgba(255,255,255,.78);margin:18px auto 0;max-width:680px;text-wrap:pretty}

/* las barras comparadas */
.sv-calc__barras{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.sv-calc__barra span{display:block;font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--gris2);margin-bottom:8px}
.sv-calc__barra i{display:block;height:14px;border-radius:8px;background:#EEF2F5;overflow:hidden}
.sv-calc__barra b{display:block;height:100%;width:0;border-radius:8px;background:var(--gris2);
  transition:width .7s cubic-bezier(.32,.72,0,1)}
.sv-calc__barra--vivo span{color:var(--mag)}
.sv-calc__barra--vivo b{background:linear-gradient(90deg,var(--mag),var(--rosa))}

/* la fila de cifras de abajo */
.sv-calc__cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;margin-top:26px}
.sv-calc__cifra{background:#F7F9FB;border:1px solid var(--linea);border-radius:14px;
  padding:16px 18px;text-align:center}
.sv-calc__cifra span{display:block;font-family:var(--urb);font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.4px;color:var(--gris2);line-height:1.35;
  margin-bottom:8px}
.sv-calc__cifra b{overflow-wrap:anywhere;
  display:block;font-family:var(--inter);font-size:17px;font-weight:800;
  color:var(--tinta);line-height:1.2;font-variant-numeric:tabular-nums;
  /* Los campos aceptan hasta 9 digitos, asi que un resultado puede llegar a
     13: «USD 1.199.999.998.800» no entra en la tarjeta a 390px y desbordaba
     la pagina 45px. No cambia nada para un numero que entra. Medido. */
  overflow-wrap:anywhere}
/* La tabla del repartidor tiene CINCO columnas, no tres: los anchos y la
   columna destacada de `.sv-tabla` estan pensados para la de parejas y aca
   apretaban las dos ultimas hasta partir «pone quien gana menos» en cuatro
   renglones. Lo destacado son las dos columnas de plata libre, que es la
   comparacion que la pieza vino a hacer. */
.sv-calc__tabla{margin-top:26px}
.sv-tabla--calc thead th:nth-child(1){width:18%}
.sv-tabla--calc thead th:nth-child(n+2){width:20.5%;color:var(--gris2)}
.sv-tabla--calc thead th:nth-child(3),
.sv-tabla--calc thead th:nth-child(5){color:var(--mag);background:rgba(205,0,70,.05)}
.sv-tabla--calc tbody td{background:none;color:var(--gris);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-tabla--calc tbody td:nth-child(3),
.sv-tabla--calc tbody td:nth-child(5){background:rgba(205,0,70,.05);
  color:var(--tinta);font-weight:700}
@media (max-width:900px){
  .sv-tabla--calc{min-width:600px}
  .sv-tabla--calc thead th,.sv-tabla--calc tbody th,
  .sv-tabla--calc tbody td{padding:14px 14px;font-size:13.5px}
}
/* el boton que va DESPUES de la nota, cuando el visitante acaba de ver su
   numero. Separado por una linea para que no se lea como parte de la letra
   chica de arriba. */
.sv-calc__pie{margin:26px -10px -6px;padding-top:26px;text-align:center;
  border-top:1px solid var(--linea)}
.sv-calc__pie span{display:block;font-family:var(--inter);font-size:13px;
  color:var(--gris2);margin-top:14px}
.sv-calc--navy .sv-calc__pie{border-top-color:rgba(255,255,255,.14)}
.sv-calc--navy .sv-calc__pie span{color:rgba(255,255,255,.68)}
.sv-calc__nota{display:flex;align-items:flex-start;gap:9px;justify-content:center;
  font-family:var(--inter);font-size:13px;color:var(--gris2);line-height:1.6;
  margin:24px auto 0;max-width:660px;text-align:left}
.sv-calc__nota svg{flex:0 0 auto;margin-top:3px;color:var(--mag)}

/* la variante sobre navy: la usa la formula del retiro, que YA vive ahi */
.sv-calc--navy{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
  box-shadow:none}
.sv-calc--navy .sv-calc__lab{color:#fff}
.sv-calc--navy .sv-calc__inp{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.sv-calc--navy .sv-calc__inp:focus-within{border-color:var(--amar);
  box-shadow:0 0 0 4px rgba(255,202,43,.16)}
.sv-calc--navy .sv-calc__inp input{color:#fff}
/* .68 y no .55. Medido por CDP el 8-sep sobre el fondo compuesto real: con
   .55 la ayuda de cada campo, el rotulo de cada cifra, el prefijo del input y
   la nota legal daban entre 3,87:1 y 4,34:1, todos abajo del 4,5:1 que pide
   AA para texto normal. Es texto chico sobre navy, o sea el peor caso, y uno
   de los cuatro es la nota que dice que no se guarda nada de lo que el
   visitante carga: la que menos puede costar leer. Vale para las seis
   calculadoras. La medicion se rehace con `_scratchpad/contraste.py`. */
.sv-calc--navy .sv-calc__inp i,.sv-calc--navy .sv-calc__inp em{color:rgba(255,255,255,.74)}
.sv-calc--navy .sv-calc__campo small{color:rgba(255,255,255,.68)}
.sv-calc--navy .sv-calc__res{background:rgba(255,202,43,.10);
  border:1px solid rgba(255,202,43,.34)}
.sv-calc--navy .sv-calc__v{color:var(--amar)}
.sv-calc--navy .sv-calc__cifra{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.13)}
.sv-calc--navy .sv-calc__cifra span{color:rgba(255,255,255,.74)}
.sv-calc--navy .sv-calc__cifra b{color:#fff}
.sv-calc--navy .sv-calc__nota{color:rgba(255,255,255,.68)}
.sv-calc--navy .sv-calc__nota svg{color:var(--amar)}
.sv-calc--navy .sv-calc__barra span{color:rgba(255,255,255,.68)}
.sv-calc--navy .sv-calc__barra i{background:rgba(255,255,255,.09)}
.sv-calc--navy .sv-calc__barra b{background:rgba(255,255,255,.3)}
.sv-calc--navy .sv-calc__barra--vivo b{background:var(--amar)}

/* ══════════ LA ESCALERA DE COBERTURA (/seguros-y-proteccion) ══════════════
   Los meses que el visitante pidio cubrir, como UNA linea de tiempo partida en
   los tramos que sostiene cada cosa. Reemplazo a las dos barras comparadas de
   esa pieza, que repetian el monto que ya estaba escrito arriba en letras
   grandes sin decir QUIEN cubre.

   SIN SEPARADORES entre tramos, a proposito: un borde de 2px se seguiria
   viendo cuando el tramo mide cero, o sea que dibujaria una cobertura que no
   existe. Los tres colores alcanzan, y ademas el color NO carga informacion
   sola: la lista de abajo nombra cada tramo y dice su duracion en palabras
   (WCAG 1.4.1). El riel es la figura y va `aria-hidden`. */
.sv-esc{margin-top:28px}
.sv-esc__et{font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.6px;color:var(--gris2);margin:0 0 12px}
.sv-esc__riel{display:flex;height:26px;border-radius:13px;overflow:hidden;
  background:#EEF2F5}
.sv-esc__t{display:block;height:100%;width:0;
  transition:width .7s cubic-bezier(.32,.72,0,1)}
.sv-esc__t--ahorro{background:var(--gris2)}
.sv-esc__t--poliza{background:var(--ambar)}
.sv-esc__t--hueco{background:linear-gradient(90deg,var(--mag),var(--rosa))}
/* la frase del acantilado: es el remate de la pieza y por eso es la unica
   linea en negrita de todo el bloque */
.sv-esc__corte{font-family:var(--inter);font-size:clamp(15px,1.9vw,17px);
  font-weight:700;color:var(--tinta);line-height:1.55;margin:16px 0 0;
  text-wrap:pretty}
.sv-esc__pasos{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:16px}
.sv-esc__paso{background:#F7F9FB;border:1px solid var(--linea);border-radius:14px;
  padding:18px 20px;border-top-width:3px}
.sv-esc__paso--ahorro{border-top-color:var(--gris2)}
.sv-esc__paso--poliza{border-top-color:var(--ambar)}
.sv-esc__paso--hueco{border-top-color:var(--mag)}
/* Las tres pastillas se midieron una por una: la de ahorro daba 4,50:1
   clavado y la de poliza 4,27:1. Se subio la tinta y se bajo el fondo, que es
   lo que mueve la aguja sin cambiar el color de marca. */
.sv-esc__rango{display:inline-block;font-family:var(--urb);font-size:11.5px;
  font-weight:900;text-transform:uppercase;letter-spacing:1.3px;line-height:1.2;
  padding:6px 11px;border-radius:999px;margin-bottom:11px;
  font-variant-numeric:tabular-nums}
.sv-esc__paso--ahorro .sv-esc__rango{background:rgba(136,136,136,.16);color:var(--gris)}
.sv-esc__paso--poliza .sv-esc__rango{background:rgba(245,158,11,.16);color:#9A6206}
.sv-esc__paso--hueco .sv-esc__rango{background:rgba(205,0,70,.10);color:var(--mag)}
.sv-esc__paso h4{font-family:var(--inter);font-size:15.5px;font-weight:800;
  color:var(--tinta);line-height:1.3;margin:0 0 7px}
.sv-esc__paso p{font-family:var(--inter);font-size:14px;line-height:1.65;
  color:var(--gris);margin:0;text-wrap:pretty}

/* sobre navy, que es donde vive hoy */
.sv-calc--navy .sv-esc__et{color:rgba(255,255,255,.72)}
.sv-calc--navy .sv-esc__riel{background:rgba(255,255,255,.09)}
.sv-calc--navy .sv-esc__t--ahorro{background:rgba(255,255,255,.42)}
.sv-calc--navy .sv-esc__corte{color:#fff}
.sv-calc--navy .sv-esc__paso{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.13)}
.sv-calc--navy .sv-esc__paso--ahorro{border-top-color:rgba(255,255,255,.42)}
.sv-calc--navy .sv-esc__paso--poliza{border-top-color:var(--amar)}
.sv-calc--navy .sv-esc__paso--hueco{border-top-color:var(--rosa)}
.sv-calc--navy .sv-esc__paso--ahorro .sv-esc__rango{background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.90)}
.sv-calc--navy .sv-esc__paso--poliza .sv-esc__rango{background:rgba(255,202,43,.08);
  color:var(--amar)}
.sv-calc--navy .sv-esc__paso--hueco .sv-esc__rango{background:rgba(218,28,75,.22);
  color:#FFB3C4}
.sv-calc--navy .sv-esc__paso h4{color:#fff}
.sv-calc--navy .sv-esc__paso p{color:rgba(255,255,255,.72)}

/* ═══════════════ LA CURVA DEL CAPITAL (/planificacion-de-retiro) ══════════
   Un SVG con viewBox 720x356 y `width:100%`, asi que a 390px de pantalla
   escala a 0,54. Por eso NINGUN texto largo vive adentro del dibujo: la
   leyenda, la lectura y el pie son HTML normal debajo, que se acomodan solos
   y se leen a cualquier tamaño. Adentro quedan solo tres etiquetas de eje, y
   esas suben de cuerpo por media query: `font-size` en un `<text>` de SVG se
   mide en unidades del viewBox, no en pixeles de pantalla. */
.sv-curva{margin-top:28px}
.sv-curva__g{display:block;width:100%;height:auto;overflow:visible;
  /* el gesto vertical sigue siendo scroll de la pagina; solo el horizontal
     recorre los años. Sin esto el dedo queda presa del grafico. */
  touch-action:pan-y;cursor:crosshair;outline:none;border-radius:12px}
.sv-curva__g:focus-visible{box-shadow:0 0 0 3px rgba(255,202,43,.55)}
/* Las dos bandas van planas en tema claro y en DEGRADADO sobre navy: un ambar
   plano al 25% sobre azul oscuro da verde militar, no oro. El degradado deja
   saturado el borde de arriba, que es el que toca la linea, y ahi el ojo lee
   oro. Las paradas se pintan desde aca para que el ambar de marca siga
   viviendo en `--amar` y no en un hex escondido en un `<stop>`. */
.sv-curva__area--vos{fill:rgba(14,47,68,.13)}
.sv-curva__area--int{fill:rgba(205,0,70,.16)}
.sv-curva__p0{stop-color:var(--amar);stop-opacity:.52}
.sv-curva__p1{stop-color:var(--amar);stop-opacity:.10}
.sv-curva__q0{stop-color:#fff;stop-opacity:.22}
.sv-curva__q1{stop-color:#fff;stop-opacity:.07}
.sv-curva__eje{stroke:rgba(14,47,68,.20);stroke-width:1.5}
.sv-curva__meta{stroke:var(--mag);stroke-width:1.5;stroke-dasharray:7 6;opacity:.7}
.sv-curva__metaet{font-family:var(--urb);font-size:15px;font-weight:800;
  letter-spacing:1.3px;fill:var(--mag)}
.sv-curva__fan{fill:none;stroke:rgba(14,47,68,.45);stroke-width:2.5;
  stroke-dasharray:8 7;stroke-linecap:round}
.sv-curva__tot{fill:none;stroke:var(--mag);stroke-width:3.5;
  stroke-linecap:round;stroke-linejoin:round}
.sv-curva__tx{font-family:var(--urb);font-size:15px;font-weight:800;
  letter-spacing:1.2px;fill:rgba(14,47,68,.5)}
.sv-curva__tx--c{text-anchor:middle}
.sv-curva__tx--r{text-anchor:end}
/* la marca del recorrido: aparece cuando hay dedo, mouse o foco de teclado */
.sv-curva__scrub{opacity:0;transition:opacity .18s}
.sv-curva--marca .sv-curva__scrub{opacity:1}
.sv-curva__scrub line{stroke:rgba(14,47,68,.35);stroke-width:1.5;stroke-dasharray:3 4}
.sv-curva__scrub circle{fill:var(--mag);stroke:#fff;stroke-width:2.5}

.sv-curva__leyenda{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  margin-top:14px}
.sv-curva__ll{display:flex;align-items:center;gap:8px;font-family:var(--inter);
  font-size:13px;font-weight:600;color:var(--gris2);line-height:1.4}
.sv-curva__ll::before{content:"";width:16px;height:10px;border-radius:3px;flex:0 0 auto}
.sv-curva__ll--vos::before{background:rgba(14,47,68,.22)}
.sv-curva__ll--int::before{background:rgba(205,0,70,.30)}
.sv-curva__ll--fan::before{height:0;border-top:2.5px dashed rgba(14,47,68,.45);
  border-radius:0}
/* La lectura tiene dos estados y no uno: mientras dice «pasá el dedo» es una
   instruccion y va en gris; cuando dice un numero es un dato y va en blanco y
   en negrita. Con un solo estilo, la instruccion gritaba igual que el dato. */
.sv-curva__lee{font-family:var(--inter);font-size:14.5px;font-weight:500;
  color:var(--gris2);text-align:center;line-height:1.5;margin:16px auto 0;
  max-width:620px;min-height:44px;font-variant-numeric:tabular-nums;
  transition:color .18s}
.sv-curva--marca .sv-curva__lee{font-weight:700;color:var(--tinta)}
.sv-curva__pie{font-family:var(--inter);font-size:14.5px;color:var(--gris);
  text-align:center;line-height:1.7;margin:6px auto 0;max-width:680px;
  text-wrap:pretty}
.sv-curva__aclara{font-family:var(--inter);font-size:12.5px;color:var(--gris2);
  text-align:center;line-height:1.6;margin:12px auto 0;max-width:600px;
  text-wrap:pretty}
.sv-calc--navy .sv-curva__aclara{color:rgba(255,255,255,.45)}

/* sobre navy, que es donde vive hoy */
.sv-calc--navy .sv-curva__area--vos{fill:url(#sv-curva-vos)}
.sv-calc--navy .sv-curva__area--int{fill:url(#sv-curva-int)}
.sv-calc--navy .sv-curva__eje{stroke:rgba(255,255,255,.22)}
.sv-calc--navy .sv-curva__meta{stroke:var(--amar);opacity:.8}
.sv-calc--navy .sv-curva__metaet{fill:var(--amar)}
.sv-calc--navy .sv-curva__fan{stroke:rgba(255,255,255,.55)}
.sv-calc--navy .sv-curva__tot{stroke:var(--amar)}
.sv-calc--navy .sv-curva__tx{fill:rgba(255,255,255,.6)}
.sv-calc--navy .sv-curva__scrub line{stroke:rgba(255,255,255,.45)}
.sv-calc--navy .sv-curva__scrub circle{fill:var(--amar);stroke:var(--navy)}
.sv-calc--navy .sv-curva__ll{color:rgba(255,255,255,.62)}
/* el cuadradito de la leyenda repite el degradado de su banda, si no dice un
   color que en el dibujo no existe */
.sv-calc--navy .sv-curva__ll--vos::before{
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.07))}
.sv-calc--navy .sv-curva__ll--int::before{
  background:linear-gradient(rgba(255,202,43,.52),rgba(255,202,43,.10))}
.sv-calc--navy .sv-curva__ll--fan::before{border-top-color:rgba(255,255,255,.55)}
.sv-calc--navy .sv-curva__lee{color:rgba(255,255,255,.6)}
.sv-calc--navy .sv-curva--marca .sv-curva__lee{color:#fff}
.sv-calc--navy .sv-curva__pie{color:rgba(255,255,255,.68)}

/* EL TRAZADO AL ENTRAR EN PANTALLA. `pathLength="1"` en el `<path>` normaliza
   el largo a 1, asi que un `stroke-dasharray:1` esconde la linea entera sin
   tener que medirla, y sigue valiendo cuando el visitante cambia los numeros
   y la curva se redibuja. La clase que ESCONDE la pone el JavaScript, nunca
   el CSS: sin JavaScript la curva sale dibujada, no invisible. */
.sv-curva__tot{stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.15s cubic-bezier(.32,.72,0,1)}
.sv-curva__area,.sv-curva__fan{opacity:1;transition:opacity .75s ease .3s}
/* La linea de meta y su etiqueta entran PRIMERO y sin demora: la curva tiene
   que verse subiendo hacia un blanco que ya esta puesto. Si aparecen juntas,
   el dibujo no cuenta nada. */
.sv-curva__metaet{opacity:1;transition:opacity .45s ease}
.sv-curva__meta{transition:opacity .45s ease}
.sv-curva--porvenir .sv-curva__tot{stroke-dashoffset:1}
.sv-curva--porvenir .sv-curva__area,
.sv-curva--porvenir .sv-curva__fan,
.sv-curva--porvenir .sv-curva__meta,
.sv-curva--porvenir .sv-curva__metaet{opacity:0}

/* EL REVELADO. Se cuelga del `data-anim` que el sitio ya tiene en chrome.py:
   un solo observador para todo, y con `prefers-reduced-motion` o sin
   IntersectionObserver la clase se pone de una y se ve el estado final. */
.sv-calc[data-anim],.sv-auto[data-anim]{opacity:0;transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.32,.72,0,1),transform .65s cubic-bezier(.32,.72,0,1)}
.sv-calc[data-anim].dibujada,.sv-auto[data-anim].dibujada{opacity:1;transform:none}
/* Sin JavaScript nadie agrega `.dibujada` y la calculadora quedaba INVISIBLE,
   justo al reves de la regla que dice que sin JavaScript la pieza muestra el
   ejemplo resuelto. `scripting: none` es la unica forma de preguntarlo desde
   CSS. Vale para las seis paginas de servicio. */
@media (scripting:none){
  .sv-calc[data-anim],.sv-auto[data-anim]{opacity:1;transform:none;transition:none}
}
@media (prefers-reduced-motion:reduce){
  .sv-calc[data-anim],.sv-auto[data-anim]{opacity:1;transform:none;transition:none}
  .sv-calc__barra b{transition:none}
  /* Los tramos de la escalera saltan a su ancho final en vez de deslizarse.
     La pieza no pierde nada: el ancho lo escribe el motor igual y la lista de
     abajo dice en palabras lo mismo que dice la figura. */
  .sv-esc__t{transition:none}
  .sv-curva__tot{transition:none;stroke-dashoffset:0}
  .sv-curva__area,.sv-curva__fan,.sv-curva__meta,.sv-curva__metaet{transition:none}
  .sv-curva__scrub{transition:none}
}

/* ══════════════════ LA BARRA FIJA DE ACCION (celular) ══════════════════════
   Copiada de las landings de producto. Existe porque el 95% del trafico entra
   por celular y quien llega al final tendria que volver a subir para actuar.
   Aparece cuando el hero sale de pantalla y se esconde al llegar al cierre:
   ahi abajo ya hay un boton mas grande y dos pegados se leen como un error. */
.sv-fija{display:none}
@media (max-width:900px){
  .sv-fija{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:#fff;border-top:1px solid var(--linea);
    box-shadow:0 -8px 26px rgba(14,47,68,.14);
    padding:10px 4% calc(10px + env(safe-area-inset-bottom));
    transform:translateY(115%);transition:transform .28s cubic-bezier(.32,.72,0,1);
    pointer-events:none}
  .sv-fija.on{transform:none;pointer-events:auto}
  .sv-fija__int{display:flex;align-items:center;gap:14px;max-width:640px;margin:0 auto}
  .sv-fija__txt{flex:1;min-width:0;line-height:1.25}
  .sv-fija__txt strong{display:block;font-family:var(--inter);font-size:13.5px;
    font-weight:800;color:var(--tinta);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .sv-fija__txt span{display:block;font-family:var(--inter);font-size:11.5px;
    color:var(--gris2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sv-fija__btn{flex:0 0 auto;padding:13px 20px!important;font-size:13px!important;
    letter-spacing:.6px!important;gap:8px!important}
  /* el pie necesita aire para que la barra no le tape la ultima linea */
  body.remate .pie{padding-bottom:96px}
  /* El globo de WhatsApp y el boton de subir viven pegados abajo a la derecha
     y quedaban ENCIMA del boton de la barra: el «Agendar» salia cortado por la
     pelota verde. Cuando la barra esta puesta, los dos suben lo que mide la
     barra. Se movio la barra flotante y no la barra de accion porque la accion
     es lo que la pagina vino a conseguir.
     La clase la pone el motor en el body y no se usa `:has()`: la barra solo
     aparece si el JavaScript corre, asi que la clase es exacta y ademas no
     depende del soporte del selector. */
  body.sv-fija-on .wa{bottom:96px}
  body.sv-fija-on .arriba{bottom:164px}
}
@media (prefers-reduced-motion:reduce){.sv-fija{transition:none}}
html[data-oscuro] .sv-fija{background:var(--f2);border-top-color:var(--bd)}
html[data-oscuro] .sv-fija__txt strong{color:var(--tinta)}

/* ══════════════════════════ LAS PIELES OSCURAS ═════════════════════════════
   Las cajas blancas de arriba leen las seis variables de superficie, igual que
   `.tarj` y `.faq details`. Lo que va sobre navy no cambia: en tema oscuro el
   navy pasa a --f1 y el texto claro sigue siendo claro. */
html[data-oscuro] .sv-prueba{background:var(--f1);border-bottom-color:var(--bd2)}
html[data-oscuro] .sv-calc,
html[data-oscuro] .sv-sit,
html[data-oscuro] .sv-num,
html[data-oscuro] .sv-mito,
html[data-oscuro] .sv-err,
html[data-oscuro] .sv-perf,
html[data-oscuro] .sv-tema,
html[data-oscuro] .sv-tabla-caja,
html[data-oscuro] .sv-reu__col{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .sv-reu__col--b{background:var(--f3)}
html[data-oscuro] .sv-mito__a,
html[data-oscuro] .sv-err__b{background:var(--f3);border-color:var(--bd)}
html[data-oscuro] .sv-sit h3,
html[data-oscuro] .sv-num h3,
html[data-oscuro] .sv-err h3,
html[data-oscuro] .sv-perf h3,
html[data-oscuro] .sv-tema h3,
html[data-oscuro] .sv-inc h3,
html[data-oscuro] .sv-herr h3,
html[data-oscuro] .sv-video h3,
html[data-oscuro] .sv-reu__col h3,
html[data-oscuro] .sv-mito__b p,
html[data-oscuro] .sv-err__b p,
html[data-oscuro] .sv-reu__col li b,
html[data-oscuro] .sv-reu__fino strong{color:var(--tinta)}
html[data-oscuro] .sv-sit__n{color:rgba(255,255,255,.05)}
html[data-oscuro] .sv-sello strong{color:var(--tinta)}
html[data-oscuro] .sv-tabla thead th{border-bottom-color:var(--bd)}
html[data-oscuro] .sv-tabla tbody th,
html[data-oscuro] .sv-tabla td{border-bottom-color:var(--bd2)}
html[data-oscuro] .sv-tabla tbody th,
html[data-oscuro] .sv-tabla tbody td:nth-child(3){color:var(--tinta)}
html[data-oscuro] .sv-inc{border-bottom-color:var(--bd2)}
html[data-oscuro] .sv-herr__arte img{border-color:var(--bd)}
html[data-oscuro] .sv-herr__pie{border-top-color:var(--bd2)}
/* El amarillo es un fondo claro FIJO: en tema oscuro `--tinta` se da vuelta y
   el numero del paso quedaria claro sobre claro. Misma lista que ya tiene
   `sitio.css` para `.btn--amar` y `.paso__n`. */
html[data-oscuro] .sv-paso__n{color:#0E2F44}

/* ══════════════════════════════ RESPONSIVE ═════════════════════════════════*/
@media (max-width:1024px){
  .sv-sits,.sv-nums,.sv-errs,.sv-perfs,.sv-temas{grid-template-columns:repeat(2,1fr)}
  .sv-logros--4{grid-template-columns:repeat(2,1fr)}
  .sv-linea{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .sv-linea--3{grid-template-columns:repeat(3,1fr)}
  .sv-linea::before{display:none}
  .sv-herr,.sv-video{grid-template-columns:1fr;gap:36px}
  .sv-video--espejo .sv-video__arte{order:0}
  .sv-video--espejo .sv-video__txt{order:0}
  .sv-herr--espejo .sv-herr__arte{order:0}
  .sv-auto__lista{grid-template-columns:1fr}
  .sv-incl{grid-template-columns:1fr;gap:0}
  .sv-roi{grid-template-columns:1fr;gap:18px;text-align:center}
  .sv-form__pasos{grid-template-columns:1fr;gap:0}
  .sv-form__paso{padding:20px 0}
  .sv-form__paso b{margin-inline:auto}
  .sv-form__paso{text-align:center}
}
@media (max-width:768px){
  .sv-vs,.sv-proy,.sv-mitos,.sv-reu,.sv-logros{grid-template-columns:1fr}
  .sv-sits,.sv-sits--2,.sv-sits--4,.sv-nums,.sv-errs,.sv-perfs,.sv-temas,
  .sv-linea,.sv-linea--3,.sv-logros--4{grid-template-columns:1fr}
  .sv-prueba__int{flex-direction:column;align-items:flex-start;gap:16px}
  .sv-remate{padding:54px 5%}
  /* La formula se apila y los operadores quedan centrados entre caja y caja.
     `flex:0 0 auto` es obligatorio: con `flex-basis:168px` en direccion
     COLUMNA, esos 168px pasan a ser el ALTO y cada caja salia de 170px de alto
     con el numero perdido en el medio. */
  .sv-form{flex-direction:column;align-items:stretch}
  .sv-form__p{max-width:none;flex:0 0 auto;padding:20px 18px}
  .sv-form__op{justify-content:center;padding:10px 0;font-size:26px}
  .sv-sit{padding:28px 24px 26px}
  .sv-vs__col,.sv-proy__col,.sv-reu__col{padding:28px 24px}
  /* El caso pareado: los dos desenlaces se apilan pero siguen DEBAJO de su
     hecho, que es lo que `.sv-vs` no podia hacer. */
  .sv-caso__par{grid-template-columns:1fr;gap:14px}
  .sv-caso__fila{padding:22px 20px;border-radius:16px}
  .sv-caso__lado{padding:16px 17px}
  /* La escalera apilada. El riel adelgaza porque a 390 el tramo mas chico
     puede medir 30px de ancho y una barra de 26px de alto se lee como una
     caja, no como un tramo de una linea de tiempo. */
  .sv-esc__riel{height:20px;border-radius:10px}
  .sv-esc__pasos{grid-template-columns:1fr;gap:12px}
  .sv-esc__paso{padding:16px 18px}
  .sv-calc{padding:26px 22px 24px;border-radius:18px}
  .sv-calc__campos{grid-template-columns:1fr;gap:18px;margin-bottom:26px}
  .sv-calc__res{padding:26px 20px}
  .sv-calc__cifras{grid-template-columns:1fr 1fr;gap:10px}
  .sv-calc__nota{text-align:left}
  /* En un SVG el `font-size` se mide en unidades del viewBox, no en pixeles
     de pantalla, asi que hay que compensar la escala a mano. Entre 561 y
     900px el dibujo mide unos 615 de ancho contra 720 del viewBox: escala
     0,85 y un cuerpo 22 se lee 18,7px. */
  .sv-curva__metaet{font-size:22px;letter-spacing:1px}
  .sv-curva__tx{font-size:21px;letter-spacing:.6px}
  .sv-curva__lee{font-size:14px;min-height:60px}
  .sv-curva__leyenda{gap:6px 16px}
  .sv-curva__ll{font-size:12.5px}
  .sv-tresv{grid-template-columns:1fr;gap:30px;max-width:420px}
  .sv-vias{grid-template-columns:1fr}
  .sv-via{padding:28px 24px}
  .sv-tapas{grid-template-columns:repeat(2,1fr);gap:16px}
  /* La destacada en celular: una columna, y la escena TOPEADA a 210px. A
     ancho completo, una imagen 4:5 mide 437px de alto a 350px de caja y el
     visitante tiene que hacer scroll para llegar al precio de la unica
     tarjeta que lo trae grande. */
  .sv-dest{grid-template-columns:1fr;gap:20px;padding:22px;border-radius:18px;
    margin-bottom:20px;text-align:center}
  .sv-dest .sv-tapa__img{max-width:210px;margin:0 auto}
  .sv-dest__p{margin-left:auto;margin-right:auto}
  .sv-dest__li{text-align:left;max-width:380px;margin-left:auto;margin-right:auto}
  .sv-dest__precio{justify-content:center}
  .sv-dest__btn{width:100%}
  .sv-hito{padding-left:44px;padding-bottom:28px}
  .sv-camino{grid-template-columns:1fr;gap:18px}
  .sv-paso4__foto{aspect-ratio:16/9}
  .sv-herrs{grid-template-columns:1fr;gap:16px}
  .sv-herrc{padding:26px 22px}
  /* El autochequeo en celular. `.sv-auto__pie` se queda en fila CON wrap y no
     pasa a columna: con `flex-direction:column`, el `flex:1 1 250px` de la nota
     convierte esos 250px en el ALTO. Es la misma trampa que dejo la formula del
     retiro con cajas de 170px de alto. */
  .sv-auto{padding:26px 20px 24px;border-radius:18px;margin-top:26px}
  .sv-auto__it{padding:12px 14px}
  .sv-auto__res{grid-template-columns:1fr;gap:24px}
  .sv-auto__cuenta b{font-size:40px}
  .sv-auto__btn{flex:1 1 100%;width:100%;padding:17px 20px}
  .sv-auto__nota{flex:1 1 100%}
}
/* En celular el dibujo entra en una caja de unos 305px contra 720 del
   viewBox: escala 0,42. Con el cuerpo de arriba las etiquetas del eje salian
   a 9px, que es ilegible. Medido a 390px con la captura, no a ojo. */
@media (max-width:560px){
  .sv-curva__metaet{font-size:30px;letter-spacing:1.2px}
  .sv-curva__tx{font-size:27px;letter-spacing:.8px}
  .sv-curva__scrub circle{r:8}
}
@media (max-width:1024px) and (min-width:769px){
  .sv-tresv{grid-template-columns:repeat(3,1fr);gap:18px}
  .sv-vias{grid-template-columns:1fr 1fr}
  .sv-via--dest{grid-column:1 / -1}
  .sv-tapas{grid-template-columns:repeat(3,1fr)}
  .sv-dest{grid-template-columns:230px 1fr;gap:26px;padding:22px}
  .sv-camino{grid-template-columns:repeat(2,1fr)}
  .sv-herrs{grid-template-columns:repeat(2,1fr)}
}
html[data-oscuro] .sv-via,html[data-oscuro] .sv-paso4,
html[data-oscuro] .sv-herrc{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .sv-via h3,html[data-oscuro] .sv-tresv figcaption,
html[data-oscuro] .sv-paso4 h3,html[data-oscuro] .sv-herrc h3,
html[data-oscuro] .sv-tapa__t{color:var(--tinta)}

/* ══════════ GRUPOS DE CAMPOS DENTRO DE UNA CALCULADORA ═════════════════════
   Cuando una pieza pide seis numeros y tres son de una naturaleza y tres de
   otra, seis casillas iguales en fila se leen como un formulario de tramite.
   El repartidor pide dos ingresos y cuatro categorias de gasto: separarlos y
   poner el total del segundo grupo ARRIBA —que es el numero que antes habia
   que sumar de cabeza— es lo que lo convierte en algo que da ganas de tocar.

   `--cols` lo escribe `grupo()` en linea. Con `auto-fit` no alcanzaba: dos
   campos en una grilla de cinco huecos se estiran a 550 px cada uno. */
.sv-calc__grupo + .sv-calc__grupo{margin-top:24px}
.sv-calc__gcab{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.sv-calc__gcab > span{font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--gris2)}
.sv-calc__gtot{font-family:var(--inter);font-size:13px;color:var(--gris2);white-space:nowrap}
.sv-calc__gtot b{font-family:var(--inter);font-size:17px;font-weight:800;color:var(--tinta)}
.sv-calc__grupo .sv-calc__campos{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  margin-bottom:0}
.sv-calc--navy .sv-calc__gcab{border-bottom-color:rgba(255,255,255,.14)}
.sv-calc--navy .sv-calc__gcab > span,
.sv-calc--navy .sv-calc__gtot{color:rgba(255,255,255,.55)}
.sv-calc--navy .sv-calc__gtot b{color:var(--amar)}

/* ══════════ LAS FICHAS DE METODO DEL REPARTIDOR ════════════════════════════
   Una ficha por metodo, y adentro los dos lados enfrentados. La barra es lo
   que hace que el argumento se vea antes de leerlo: mide la plata libre COMO
   PORCENTAJE DEL INGRESO DE CADA UNO, asi que con el proporcional las dos
   barras salen exactamente iguales y con mitad y mitad no. Eso es lo que la
   pagina viene a decir, dicho sin una sola palabra.

   Va CLARO PRIMERO aunque hoy solo se use sobre navy. Es la leccion de la
   linea de pasos, doce lineas mas arriba: un componente que solo sabe vivir
   en un fondo se rompe el dia que alguien lo mueve. */
.sv-mets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.sv-met{background:#fff;border:1px solid var(--linea);border-radius:16px;
  padding:20px 20px 18px;display:flex;flex-direction:column}
.sv-met__cab{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sv-met__n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:rgba(205,0,70,.09);
  color:var(--mag);font-family:var(--urb);font-size:11.5px;font-weight:800}
.sv-met h4{margin:0;font-family:var(--inter);font-size:16px;font-weight:800;color:var(--tinta)}
.sv-met__lados{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex-grow:1}
.sv-met__lado{min-width:0}
.sv-met__quien{display:block;font-family:var(--urb);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.2px;color:var(--gris2);margin-bottom:8px}
.sv-met__dato{display:block;font-family:var(--inter);font-size:13px;color:var(--gris);
  line-height:1.5}
/* nowrap: el saldo negativo empieza con un signo menos y el navegador
   corta el renglon justo despues, o sea que en el celular quedaba «le
   queda −» arriba y «$200.000» abajo. Con el tope de 9 digitos el
   numero mas largo mide 95 px y la columna 150, asi que no se sale. */
.sv-met__dato b{font-family:var(--inter);font-size:14.5px;font-weight:800;
  color:var(--tinta);white-space:nowrap}
.sv-met__barra{display:block;height:7px;border-radius:5px;background:#EEF2F5;
  overflow:hidden;margin:10px 0 6px}
.sv-met__barra b{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--mag),var(--rosa));transition:width .5s ease}
.sv-met__pct{display:block;font-family:var(--inter);font-size:12px;color:var(--gris2)}
.sv-met__ver{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linea);
  font-family:var(--inter);font-size:13.5px;line-height:1.6;color:var(--gris)}
.sv-met__lado--mal .sv-met__pct{color:var(--mag);font-weight:700}
.sv-met__lado--mal .sv-met__barra b{background:rgba(205,0,70,.25)}
.sv-met--mal{border-color:rgba(205,0,70,.4)}
/* sobre navy */
.sv-calc--navy .sv-met{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.sv-calc--navy .sv-met__n{background:rgba(255,202,43,.16);color:var(--amar)}
.sv-calc--navy .sv-met h4{color:#fff}
.sv-calc--navy .sv-met__quien{color:rgba(255,255,255,.5)}
.sv-calc--navy .sv-met__dato{color:rgba(255,255,255,.68)}
.sv-calc--navy .sv-met__dato b{color:#fff}
.sv-calc--navy .sv-met__barra{background:rgba(255,255,255,.10)}
.sv-calc--navy .sv-met__barra b{background:var(--amar)}
.sv-calc--navy .sv-met__pct{color:rgba(255,255,255,.55)}
.sv-calc--navy .sv-met__ver{color:rgba(255,255,255,.68);border-top-color:rgba(255,255,255,.14)}
.sv-calc--navy .sv-met--mal{border-color:rgba(255,150,150,.45);background:rgba(255,120,120,.06)}
.sv-calc--navy .sv-met__lado--mal .sv-met__pct{color:#FFB0B0}
.sv-calc--navy .sv-met__lado--mal .sv-met__barra b{background:rgba(255,150,150,.35)}
@media (max-width:900px){.sv-mets{grid-template-columns:1fr}}
@media (max-width:1024px){.sv-calc__grupo .sv-calc__campos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){
  .sv-calc__grupo .sv-calc__campos{grid-template-columns:1fr}
  .sv-calc__gcab{flex-direction:column;align-items:flex-start;gap:4px}
  .sv-met{padding:18px 16px 16px}
  .sv-met__lados{gap:12px}
  .sv-met__dato{font-size:12.5px}
  .sv-met__dato b{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){.sv-met__barra b{transition:none}}

/* ══════════ LA TABLA QUE SE PUEDE LEER DE A UNA FILA ═══════════════════════
   Dos cosas, las dos por el mismo problema: en el celular esta tabla mide
   660 px de ancho dentro de una ventana de 390 y hay que arrastrarla de
   costado para llegar a la tercera columna. Resaltar la fila no arregla eso:
   la fila sigue sin entrar. Por eso van las dos.

   1 · APILADA (<=700 px). Cada fila pasa a ser una ficha con las tres celdas
       una abajo de la otra, cada una con su rotulo sacado de `data-col`. Cero
       scroll lateral. Cambiar `display` a `block` le saca al navegador la
       semantica de tabla —es el defecto conocido de este patron— y por eso
       `tabla(tocable=True)` escribe los `role` explicitos en el HTML.

   2 · TOCABLE, en todos los anchos. Se resalta la fila que el visitante
       apunta con el mouse (`:hover`), toca con el dedo o alcanza con el
       tabulador (`:focus`, y las filas llevan `tabindex="0"`). Es CSS puro:
       ni una linea de JavaScript, o sea que funciona igual con el script
       bloqueado, que es donde la tabla mas se necesita.

   El resalte de columnas va en `min-width:701px` para no pelearse con el de
   la version apilada, donde lo que se resalta es la ficha entera. */
.sv-tabla--tocable tbody tr:focus{outline:0}
@media (min-width:701px){
  .sv-tabla--tocable tbody tr > *{transition:background .16s ease}
  .sv-tabla--tocable tbody tr:hover > *,
  .sv-tabla--tocable tbody tr:focus > *{background:rgba(14,47,68,.05)}
  .sv-tabla--tocable tbody tr:hover > td:nth-child(3),
  .sv-tabla--tocable tbody tr:focus > td:nth-child(3){background:rgba(205,0,70,.11)}
  .sv-tabla--tocable tbody tr:focus > th{box-shadow:inset 3px 0 0 var(--mag)}
}
@media (max-width:700px){
  .sv-tabla-caja--apilada{background:none;border:0;box-shadow:none;overflow:visible}
  .sv-tabla--apilada{min-width:0;display:block}
  /* el thead se esconde a la vista pero lo sigue leyendo un lector de
     pantalla: los rotulos de columna pasan a los `data-col` de cada celda */
  .sv-tabla--apilada thead{position:absolute;width:1px;height:1px;margin:-1px;
    padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .sv-tabla--apilada tbody{display:block}
  .sv-tabla--apilada tbody tr{display:block;background:#fff;border:1px solid var(--linea);
    border-radius:16px;margin:0 0 12px;overflow:hidden;
    box-shadow:0 8px 22px rgba(14,47,68,.06);transition:border-color .16s ease}
  .sv-tabla--apilada tbody tr:last-child{margin-bottom:0}
  .sv-tabla--apilada tbody th{display:block;background:#F5F8FA;padding:14px 18px;
    border-bottom:1px solid var(--linea);font-size:15.5px}
  .sv-tabla--apilada tbody td{display:block;padding:14px 18px 16px;border-bottom:0}
  .sv-tabla--apilada tbody td + td{border-top:1px solid var(--linea)}
  .sv-tabla--apilada tbody td::before{content:attr(data-col);display:block;
    font-family:var(--urb);font-size:10.5px;font-weight:800;text-transform:uppercase;
    letter-spacing:1.4px;color:var(--gris2);margin-bottom:6px}
  .sv-tabla--apilada tbody td:nth-child(3)::before{color:var(--mag)}
  .sv-tabla--apilada tbody tr:last-child th{border-bottom:1px solid var(--linea)}
  .sv-tabla--tocable.sv-tabla--apilada tbody tr:hover,
  .sv-tabla--tocable.sv-tabla--apilada tbody tr:focus{border-color:var(--mag)}
  html[data-oscuro] .sv-tabla--apilada tbody tr{background:var(--f2);border-color:var(--bd)}
  html[data-oscuro] .sv-tabla--apilada tbody th{background:var(--f3);border-bottom-color:var(--bd)}
  html[data-oscuro] .sv-tabla--apilada tbody td + td{border-top-color:var(--bd2)}
}
@media (prefers-reduced-motion:reduce){
  .sv-tabla--tocable tbody tr > *,.sv-tabla--apilada tbody tr{transition:none}
}


/* ══════════ EL PIE QUE SE LLEVA EL CASO · solo /servicios-empresas ═════════
   Va ADENTRO de la caja de la calculadora, como panel propio y con su borde:
   nada de sangrado con margenes negativos, que obligarian a repetir aca el
   padding de `.sv-calc` y a mantener los dos numeros iguales para siempre.

   La hoja es un <pre> con `pre-wrap`: el texto viene de renglones cortos, pero
   si alguien carga un sueldo de nueve cifras el renglon crece, y sin `pre-wrap`
   un <pre> empuja el ancho de la pagina entera. Cero desborde horizontal es
   requisito, asi que la hoja envuelve y ademas tiene su propio scroll. */
.sv-llevar{margin-top:30px;background:#F7F9FB;border:1px solid var(--linea);
  border-radius:16px;padding:26px 24px 22px}
.sv-llevar__tit{font-family:var(--urb);font-size:clamp(17px,2.1vw,20px);
  font-weight:800;letter-spacing:-.01em;color:var(--tinta);margin:0 0 8px}
.sv-llevar__txt{font-family:var(--inter);font-size:14.5px;line-height:1.7;
  color:var(--gris);margin:0 0 18px}
.sv-llevar__hoja{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.75;color:var(--tinta);background:#fff;
  border:1px solid var(--linea);border-radius:12px;padding:20px 18px;margin:0;
  white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}
.sv-llevar__hoja:focus-visible{outline:2px solid var(--mag);outline-offset:2px}
.sv-llevar--vacia .sv-llevar__hoja{color:var(--gris);font-style:italic;
  font-family:var(--inter);font-size:14px}
.sv-llevar__acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.sv-llevar__btn{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--inter);font-size:14px;font-weight:700;color:var(--tinta);
  background:#fff;border:1px solid var(--linea);border-radius:999px;
  padding:11px 20px;cursor:pointer;text-decoration:none;
  transition:border-color .18s,color .18s,background .18s}
.sv-llevar__btn:hover{border-color:var(--mag);color:var(--mag)}
.sv-llevar__btn:focus-visible{outline:2px solid var(--mag);outline-offset:3px}
.sv-llevar__btn svg{flex:0 0 auto}
.sv-llevar__btn--vivo{background:var(--mag);border-color:var(--mag);color:#fff}
.sv-llevar__btn--vivo:hover{background:var(--tinta);border-color:var(--tinta);
  color:#fff}
/* apagados: los dos botones con `disabled` y el enlace, que se apaga sacandole
   el href para que tampoco reciba foco */
.sv-llevar__btn[disabled],.sv-llevar__btn[aria-disabled="true"]{opacity:.42;
  cursor:default;pointer-events:none}
.sv-llevar__ok{font-family:var(--inter);font-size:13.5px;font-weight:700;
  color:var(--mag);margin:14px 0 0;min-height:19px}
.sv-llevar__nota{display:flex;align-items:flex-start;gap:9px;
  font-family:var(--inter);font-size:12.5px;line-height:1.6;color:var(--gris);
  margin:8px 0 0}
.sv-llevar__nota svg{flex:0 0 auto;margin-top:2px;color:var(--mag)}
/* El pie del bloque de numeros con fuente. Estaba como `style=` en linea. */
.sv-nums__pie{font-family:var(--inter);font-size:13px;line-height:1.7;
  color:var(--gris);text-align:center;max-width:760px;margin:26px auto 0}
@media (max-width:768px){
  .sv-llevar{padding:22px 18px 18px;border-radius:14px}
  .sv-llevar__hoja{font-size:11.5px;padding:16px 14px;max-height:280px}
  .sv-llevar__acc{flex-direction:column;align-items:stretch}
  .sv-llevar__btn{justify-content:center}
}
html[data-oscuro] .sv-llevar{background:var(--f3);border-color:var(--bd)}
html[data-oscuro] .sv-llevar__tit{color:var(--tinta)}
html[data-oscuro] .sv-llevar__hoja,
html[data-oscuro] .sv-llevar__btn{background:var(--f2);border-color:var(--bd);
  color:var(--tinta)}
html[data-oscuro] .sv-llevar__btn--vivo{background:var(--mag);
  border-color:var(--mag);color:#fff}
@media (prefers-reduced-motion:reduce){
  .sv-llevar__btn{transition:none}
}

/* ═══════════ EL RUTEADOR · "¿dónde estás hoy?" / "¿en qué estás?" ════════
   CLARO PRIMERO Y NAVY DESPUES, que es la convencion de este archivo y la que
   mide `verificar_servicios.py`.

   POR QUE SE DIO VUELTA EL 8-SEP-2026
   Nacio para el home, que lo usa sobre navy, y por eso estaba escrito entero
   con `#fff` y `rgba(255,255,255,…)` sin variante clara. /recursos lo estrena
   sobre una seccion CLARA y ahi el panel entero salia blanco sobre blanco:
   exactamente el defecto que tenia `.sv-paso` y que el gate ya no deja pasar.
   Ahora los valores por defecto son los del tema claro y el bloque
   `.sec--navy .sv-ruta…` de mas abajo repite UNO POR UNO los valores viejos,
   asi `index.html` —que es HTML congelado y no se regenera— sale igual.

   EL CAMBIO DE PANEL ES CSS PURO. Los `<input type="radio">` son los primeros
   hijos de `.sv-ruta`, asi que `:checked ~` alcanza tanto a `.sv-ruta__ops`
   (para pintar la etiqueta elegida) como a `.sv-ruta__res` (para mostrar su
   panel). Las reglas por indice se generan desde Python, mas abajo en este
   mismo archivo, para que la cuenta no se desincronice del componente.

   EL INPUT NO SE OCULTA CON `display:none`. Eso lo sacaria del orden de foco y
   la pieza dejaria de funcionar con el teclado, que es la mitad del punto. Se
   lo deja de 1px con opacidad 0 y el anillo de foco se dibuja sobre la
   etiqueta con `:focus-visible ~`. */
.sv-ruta{max-width:1100px;margin:0 auto;position:relative}
.sv-ruta__in{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;
  margin:0;pointer-events:none}

/* Las situaciones. GRID y no flex a proposito: `flex:1 1 168px` adentro de un
   contenedor que en movil pasa a `column` convierte esos 168px en el ALTO, y
   ya dejo cajas de 170px con el texto perdido en el medio. */
.sv-ruta__ops{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin-bottom:26px}
.sv-ruta__op{display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:14px 15px;border-radius:13px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--linea);
  transition:background .18s ease,box-shadow .18s ease}
.sv-ruta__op:hover{background:#F7F8FA}
.sv-ruta__ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#EDF1F5;color:var(--tinta);
  transition:background .18s ease,color .18s ease}
.sv-ruta__et{font-family:var(--inter);font-size:14px;font-weight:600;
  line-height:1.32;color:var(--tinta)}

.sv-ruta__res{position:relative}
.sv-ruta__pan{display:none}
.sv-ruta__dice{font-family:var(--anton);font-size:clamp(20px,2.5vw,28px);
  line-height:1.24;color:var(--tinta);margin:0 0 22px;letter-spacing:.2px;
  text-wrap:balance}

/* Las puertas. Grid otra vez, por lo mismo de arriba.
   `auto-fit` y no `repeat(3,1fr)`: hay situaciones con DOS puertas y no tres
   —en el home porque no hay producto de la tienda para inversion ni para
   proteccion; en /recursos porque el sitio tiene DOS archivos para descargar y
   no uno por tema—. Con tres columnas fijas esas quedaban con un agujero a la
   derecha; con `auto-fit` las dos ocupan el ancho entero y las tres siguen en
   tercios. */
.sv-ruta__puertas{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sv-ruta__pu{display:flex;flex-direction:column;gap:5px;padding:20px 19px 18px;
  border-radius:15px;background:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--linea);
  border-top:3px solid var(--linea);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.sv-ruta__pu:hover{box-shadow:inset 0 0 0 1px #C3CBD3;transform:translateY(-2px)}
/* Los tonos del home dicen CUANTO CUESTA cada puerta: gratis, producto,
   servicio. */
.sv-ruta__pu--free{border-top-color:var(--amar)}
.sv-ruta__pu--prod{border-top-color:var(--tinta)}
.sv-ruta__pu--serv{border-top-color:var(--mag)}
/* Los de /recursos dicen QUE HACE cada puerta, porque ahi las tres son gratis
   y el precio no distingue nada: un numero, un archivo, una lectura. */
.sv-ruta__pu--calc{border-top-color:var(--amar)}
.sv-ruta__pu--baja{border-top-color:var(--mag)}
.sv-ruta__pu--leer{border-top-color:var(--tinta)}
.sv-ruta__pu-ce{font-family:var(--inter);font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gris)}
/* El amarillo de marca sobre blanco da 1,6:1 y no se lee. La ceja de la puerta
   gratis va en el ambar quemado, que sobre blanco da 5,3:1. Sobre navy vuelve
   a ser el amarillo de siempre, mas abajo. */
.sv-ruta__pu--free .sv-ruta__pu-ce,
.sv-ruta__pu--calc .sv-ruta__pu-ce{color:#8A6100}
.sv-ruta__pu--baja .sv-ruta__pu-ce{color:var(--mag)}
.sv-ruta__pu-t{font-family:var(--inter);font-size:16.5px;font-weight:800;
  line-height:1.26;color:var(--tinta)}
.sv-ruta__pu-d{font-family:var(--inter);font-size:13.5px;line-height:1.5;
  color:var(--gris);flex:1 1 auto}
.sv-ruta__pu-ir{display:flex;align-items:center;gap:6px;margin-top:9px;
  font-family:var(--inter);font-size:13.5px;font-weight:700;color:var(--mag)}
.sv-ruta__pu-ir svg{transition:transform .18s ease}
.sv-ruta__pu:hover .sv-ruta__pu-ir svg{transform:translateX(3px)}
.sv-ruta__nota{display:flex;align-items:flex-start;gap:9px;margin:22px auto 0;
  max-width:1100px;font-family:var(--inter);font-size:13px;line-height:1.55;
  color:var(--gris)}
.sv-ruta__nota svg{flex:0 0 auto;margin-top:1px;color:var(--mag)}

/* ── EL MISMO RUTEADOR SOBRE NAVY (el home) ──────────────────────────────
   Valor por valor, los que tenia el bloque antes de darlo vuelta. */
.sec--navy .sv-ruta__op{background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.sec--navy .sv-ruta__op:hover{background:rgba(255,255,255,.1)}
.sec--navy .sv-ruta__ic{background:rgba(255,255,255,.1);color:#fff}
.sec--navy .sv-ruta__et{color:rgba(255,255,255,.9)}
.sec--navy .sv-ruta__dice{color:#fff}
.sec--navy .sv-ruta__pu{background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  border-top-color:rgba(255,255,255,.28)}
.sec--navy .sv-ruta__pu:hover{background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sec--navy .sv-ruta__pu--free,
.sec--navy .sv-ruta__pu--calc{border-top-color:var(--amar)}
.sec--navy .sv-ruta__pu--prod{border-top-color:#fff}
.sec--navy .sv-ruta__pu--serv,
.sec--navy .sv-ruta__pu--baja{border-top-color:var(--mag)}
.sec--navy .sv-ruta__pu--leer{border-top-color:#fff}
.sec--navy .sv-ruta__pu-ce{color:rgba(255,255,255,.62)}
.sec--navy .sv-ruta__pu--free .sv-ruta__pu-ce,
.sec--navy .sv-ruta__pu--calc .sv-ruta__pu-ce{color:var(--amar)}
.sec--navy .sv-ruta__pu--baja .sv-ruta__pu-ce{color:#FF7BA8}
.sec--navy .sv-ruta__pu-t{color:#fff}
.sec--navy .sv-ruta__pu-d{color:rgba(255,255,255,.72)}
.sec--navy .sv-ruta__pu-ir{color:#fff}
.sec--navy .sv-ruta__nota{color:rgba(255,255,255,.6)}
.sec--navy .sv-ruta__nota svg{color:var(--amar)}

@media (max-width:1000px){
  .sv-ruta__ops{grid-template-columns:repeat(2,1fr)}
  .sv-ruta__puertas{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sv-ruta__ops{grid-template-columns:1fr;gap:8px}
  .sv-ruta__op{padding:12px 13px}
  .sv-ruta__ic{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .sv-ruta__op,.sv-ruta__pu,.sv-ruta__pu-ir svg{transition:none}
  .sv-ruta__pu:hover{transform:none}
  .sv-ruta__pu:hover .sv-ruta__pu-ir svg{transform:none}
}

/* el estado marcado y el panel de cada situacion.
   Van los DOS temas: el claro por defecto y el navy colgado de
   `.sec--navy`, igual que el resto del bloque. El anillo de foco
   cambia de color con el fondo porque el amarillo de marca sobre
   blanco da 1,6:1 y no se veria. */
.sv-ruta__in:nth-of-type(1):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(1){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(1):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(1){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(1):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(1) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(1):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(1){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(1):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(1){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(1):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(1){display:block}
.sv-ruta__in:nth-of-type(2):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(2){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(2):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(2){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(2):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(2) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(2):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(2){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(2):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(2){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(2):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(2){display:block}
.sv-ruta__in:nth-of-type(3):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(3){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(3):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(3){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(3):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(3) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(3):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(3){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(3):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(3){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(3):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(3){display:block}
.sv-ruta__in:nth-of-type(4):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(4){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(4):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(4){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(4):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(4) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(4):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(4){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(4):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(4){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(4):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(4){display:block}
.sv-ruta__in:nth-of-type(5):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(5){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(5):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(5){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(5):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(5) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(5):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(5){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(5):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(5){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(5):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(5){display:block}
.sv-ruta__in:nth-of-type(6):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(6){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(6):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(6){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(6):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(6) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(6):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(6){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(6):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(6){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(6):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(6){display:block}
.sv-ruta__in:nth-of-type(7):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(7){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(7):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(7){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(7):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(7) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(7):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(7){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(7):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(7){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(7):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(7){display:block}
.sv-ruta__in:nth-of-type(8):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(8){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(8):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(8){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(8):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(8) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(8):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(8){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(8):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(8){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(8):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(8){display:block}
.sv-ruta__in:nth-of-type(9):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(9){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(9):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(9){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(9):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(9) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(9):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(9){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(9):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(9){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(9):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(9){display:block}
.sv-ruta__in:nth-of-type(10):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(10){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(10):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(10){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(10):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(10) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(10):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(10){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(10):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(10){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(10):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(10){display:block}
.sv-ruta__in:nth-of-type(11):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(11){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(11):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(11){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(11):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(11) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(11):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(11){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(11):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(11){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(11):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(11){display:block}
.sv-ruta__in:nth-of-type(12):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(12){background:#FFF8E4;box-shadow:inset 0 0 0 2px var(--amar)}
.sec--navy .sv-ruta__in:nth-of-type(12):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(12){background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px var(--amar)}
.sv-ruta__in:nth-of-type(12):checked ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(12) .sv-ruta__ic{background:var(--amar);color:var(--navy)}
.sv-ruta__in:nth-of-type(12):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(12){outline:3px solid var(--mag);outline-offset:3px}
.sec--navy .sv-ruta__in:nth-of-type(12):focus-visible ~ .sv-ruta__ops .sv-ruta__op:nth-of-type(12){outline:3px solid var(--amar);outline-offset:3px}
.sv-ruta__in:nth-of-type(12):checked ~ .sv-ruta__res .sv-ruta__pan:nth-of-type(12){display:block}

/* ══════════════════ LA TIRA DE DOCE MESES (/medicos) ══════════════════════
   Una columna por mes con la linea del sueldo parejo cruzandolas. Reemplazo
   a las dos barras comparadas, que repetian con un rectangulo dos numeros
   escritos tres centimetros mas arriba en letras grandes.

   SIN `gap` EN LA TIRA, a proposito: los dos rotulos de abajo se estiran con
   `flex-grow` en la misma proporcion que las columnas (4 y 8 de 12). Con
   separacion entre columnas los dos anchos dejarian de coincidir y cada
   rotulo caeria corrido respecto del grupo que nombra. La separacion visual
   la da el `padding` de cada columna, que va POR DENTRO de su caja y no
   mueve la grilla.

   EL COLOR NO CARGA INFORMACION SOLO (WCAG 1.4.1): abajo de la figura, la
   fila de grupos dice «4 meses flojos · 8 meses buenos» en palabras y la
   leyenda nombra las dos lineas y el color de las columnas flojas. La caja
   del dibujo va `aria-hidden`. */
/* Cuatro campos en una fila. La grilla compartida pide 215px de minimo y
   cuatro de esos con sus separaciones no entran en los 924px utiles de la
   caja: se pasan por 14px y el cuarto campo cae a un renglon solo. Con 196
   entran los cuatro, y abajo de 1024px la regla compartida ya los apila. */
.sv-calc__campos--4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}

.sv-anio{margin-top:30px}
.sv-anio__et{font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.6px;color:var(--gris2);margin:0 0 14px}
.sv-anio__caja{position:relative;height:clamp(148px,24vw,208px)}
.sv-anio__tira{display:flex;align-items:flex-end;height:100%}
.sv-anio__col{flex:1 1 0;min-width:0;height:100%;padding:0 3px;
  box-sizing:border-box;display:flex;align-items:flex-end}
.sv-anio__m{display:block;width:100%;height:0;border-radius:4px 4px 0 0;
  background:rgba(14,47,68,.20);
  transition:height .7s cubic-bezier(.32,.72,0,1)}
.sv-anio__m--flojo{background:var(--mag)}
/* Las dos lineas se posicionan por `bottom` sobre la misma escala que las
   columnas, asi que cruzan donde tienen que cruzar. La llena es el sueldo
   parejo; la punteada, los gastos fijos. */
.sv-anio__linea{position:absolute;left:0;right:0;bottom:0;height:0;
  border-top:2px solid var(--ambar);
  transition:bottom .7s cubic-bezier(.32,.72,0,1)}
.sv-anio__linea--fijos{border-top:2px dashed rgba(14,47,68,.42)}
/* La leyenda va DEBAJO de la figura y no colgada de las lineas. Dos
   pastillas flotando adentro del dibujo se pisan con las columnas: la del
   sueldo parejo caia encima de las barras altas, y la de los gastos fijos
   queda por debajo del techo de un mes flojo siempre que los fijos sean
   menores que el peor mes, o sea casi siempre. Y abajo de 560px habia que
   esconderlas, con lo cual en celular la figura no nombraba sus lineas. */
.sv-anio__leyenda{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0 0;
  font-family:var(--inter);font-size:12.5px;color:var(--gris)}
.sv-anio__lg{display:inline-flex;align-items:center;gap:8px}
.sv-anio__lg::before{content:"";width:18px;flex:0 0 18px}
.sv-anio__lg--parejo::before{border-top:2px solid var(--ambar)}
.sv-anio__lg--fijos::before{border-top:2px dashed rgba(14,47,68,.42)}
.sv-anio__lg--flojo::before{height:11px;border-radius:2px;background:var(--mag)}
.sv-anio__grupos{display:flex;margin-top:0}
.sv-anio__gr{flex-basis:0;min-width:0;padding:9px 3px 0;box-sizing:border-box;
  text-align:center;border-top:2px solid rgba(14,47,68,.20)}
.sv-anio__gr--flojo{border-top-color:var(--mag)}
.sv-anio__gr b{display:block;font-family:var(--inter);font-size:12.5px;
  font-weight:700;color:var(--tinta);line-height:1.3;
  font-variant-numeric:tabular-nums}
.sv-anio__pie{font-family:var(--inter);font-size:13.5px;line-height:1.65;
  color:var(--gris);margin:12px 0 0;text-wrap:pretty}

/* sobre navy, que es donde vive hoy. El rosa claro (#FF8199) y el blanco al
   46% se eligieron midiendo: dan 5,0:1 y 3,8:1 contra el azul de la caja, o
   sea arriba del 3:1 que pide WCAG 1.4.11 para un elemento grafico. El
   `--rosa` de la escalera daba 2,2:1 y no se ve.

   VA EL COLOR LITERAL Y NO `var(--magtx)`, que es donde vive ese mismo rosa:
   esa variable SOLO esta declarada adentro de `html[data-oscuro]`. En una
   pagina de tema claro el `var()` no resuelve, y un `var()` sin definir no
   cae en la declaracion anterior: la propiedad computa a su valor inicial.
   Las cuatro columnas flojas salian TRANSPARENTES. Mismo error que dejo
   `corte_azul()` con fondo blanco por usar `--f0`. */
.sv-calc--navy .sv-anio__et{color:rgba(255,255,255,.72)}
.sv-calc--navy .sv-anio__m{background:rgba(255,255,255,.46)}
.sv-calc--navy .sv-anio__m--flojo{background:#FF8199}
.sv-calc--navy .sv-anio__linea{border-top-color:var(--amar)}
.sv-calc--navy .sv-anio__linea--fijos{border-top-color:rgba(255,255,255,.55)}
.sv-calc--navy .sv-anio__linea b{background:rgba(14,47,68,.92);color:var(--amar);
  border-color:rgba(255,202,43,.45)}
.sv-calc--navy .sv-anio__linea--fijos b{color:rgba(255,255,255,.80);
  border-color:rgba(255,255,255,.28)}
.sv-calc--navy .sv-anio__gr{border-top-color:rgba(255,255,255,.28)}
.sv-calc--navy .sv-anio__gr--flojo{border-top-color:#FF8199}
.sv-calc--navy .sv-anio__gr b{color:#fff}
.sv-calc--navy .sv-anio__pie{color:rgba(255,255,255,.62)}
.sv-calc--navy .sv-anio__leyenda{color:rgba(255,255,255,.78)}
.sv-calc--navy .sv-anio__lg--parejo::before{border-top-color:var(--amar)}
.sv-calc--navy .sv-anio__lg--fijos::before{border-top-color:rgba(255,255,255,.55)}
.sv-calc--navy .sv-anio__lg--flojo::before{background:#FF8199}

/* Los dos rotulos colgados de las lineas se van a los 560px: a 390 las dos
   pastillas se pisan cuando el sueldo parejo y los gastos fijos quedan
   cerca. No se pierde informacion — el epigrafe de abajo nombra las dos
   lineas con todas las letras y sigue ahi. */
@media (max-width:560px){
  .sv-anio__col{padding:0 2px}
  .sv-anio__m{border-radius:3px 3px 0 0}
  .sv-anio__gr b{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .sv-anio__m,.sv-anio__linea{transition:none}
}

.sv-agd{max-width:1100px;margin:34px auto 0;border-radius:20px;
  padding:32px 32px 26px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14)}
.sv-agd__cab h3{font-family:var(--inter);font-size:20px;font-weight:700;color:#fff;
  margin:0 0 8px;line-height:1.32}
.sv-agd__cab p{font-family:var(--inter);font-size:14.5px;line-height:1.62;
  color:rgba(255,255,255,.62);margin:0 0 26px;max-width:680px}
/* Las tres partes se acomodan por AREAS y no por orden, asi que el HTML puede
   llevar el reloj primero —que es lo que necesita el celular— sin mover nada
   en escritorio: la lista ocupa la columna izquierda entera y a la derecha va
   el reloj arriba y la agenda armada abajo. */
.sv-agd__cuerpo{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  grid-template-areas:"lista reloj" "lista plan";gap:22px 36px;align-items:start}
.sv-agd__c-lista{grid-area:lista}
.sv-agd__c-reloj{grid-area:reloj}
.sv-agd__c-plan{grid-area:plan}
.sv-agd__et{display:block;font-family:var(--urb);font-size:11.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.6px;color:var(--amar);margin-bottom:13px}

/* la columna de la izquierda: las casillas */
.sv-agd__lista{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr;gap:9px}
/* El <li> estira a lo alto de su fila y la etiqueta lo llena. Sin esto, en la
   grilla de dos columnas del celular una casilla de un renglon queda 15px mas
   baja que la de tres que tiene al lado, y la lista se ve dentada. */
.sv-agd__lista li{display:flex}
.sv-agd__it{position:relative;flex:1 1 auto;display:flex;gap:12px;align-items:center;
  cursor:pointer;min-height:46px;padding:11px 14px;border-radius:12px;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.03);
  transition:border-color .18s,background .18s}
.sv-agd__it:hover{border-color:rgba(255,202,43,.40);background:rgba(255,202,43,.05)}
.sv-agd__it:has(input:checked){border-color:rgba(255,202,43,.45);
  background:rgba(255,202,43,.09)}
.sv-agd__it input{position:absolute;top:13px;left:15px;width:20px;height:20px;
  opacity:0;margin:0}
.sv-agd__box{flex:0 0 auto;width:21px;height:21px;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.32);background:rgba(255,255,255,.05);
  color:transparent;display:flex;align-items:center;justify-content:center;
  transition:background .18s,border-color .18s,color .18s}
.sv-agd__it input:checked+.sv-agd__box{background:var(--amar);
  border-color:var(--amar);color:#0E2F44}
.sv-agd__it input:focus-visible+.sv-agd__box{outline:3px solid rgba(255,202,43,.75);
  outline-offset:2px}
.sv-agd__nom{font-family:var(--inter);font-size:14.6px;line-height:1.45;
  color:rgba(255,255,255,.78)}
.sv-agd__it input:checked~.sv-agd__nom{color:#fff}

/* el reloj de los 30 minutos */
.sv-agd__reloj{display:flex;height:12px;border-radius:7px;overflow:hidden;
  background:rgba(255,255,255,.08);margin-bottom:9px}
.sv-agd__reloj i{display:block;height:100%;background:var(--amar);
  box-shadow:inset -2px 0 0 var(--navy);
  transition:width .42s cubic-bezier(.22,.61,.36,1)}
.sv-agd__reloj i[hidden]{display:none}
.sv-agd__reloj .sv-agd__fijo{background:rgba(255,255,255,.28);box-shadow:none}
.sv-agd__regla{display:flex;justify-content:space-between;gap:14px;margin:0 0 17px;
  font-family:var(--urb);font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.sv-agd__dice{font-family:var(--inter);font-size:14.6px;line-height:1.65;
  color:rgba(255,255,255,.80);margin:0 0 20px;min-height:48px}

/* la agenda armada */
.sv-agd__plan{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:13px}
.sv-agd__fila{display:flex;gap:14px;align-items:flex-start;padding-left:14px;
  border-left:2px solid rgba(255,202,43,.42)}
.sv-agd__fila[hidden]{display:none}
.sv-agd__fila--fijo{border-left-color:rgba(255,255,255,.24)}
.sv-agd__min{flex:0 0 52px;padding-top:3px;font-family:var(--urb);font-size:10px;
  font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  color:rgba(255,255,255,.48)}
.sv-agd__min b{display:block;font-family:var(--anton);font-size:26px;
  line-height:.95;letter-spacing:0;color:var(--amar)}
.sv-agd__fila--fijo .sv-agd__min b{color:rgba(255,255,255,.72)}
.sv-agd__fila h4{font-family:var(--inter);font-size:15.2px;font-weight:700;
  color:#fff;margin:0 0 3px;line-height:1.35}
.sv-agd__fila p{font-family:var(--inter);font-size:13.6px;line-height:1.6;
  color:rgba(255,255,255,.58);margin:0}

/* el pie */
.sv-agd__pie{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.sv-agd__btn{flex:0 0 auto;padding:17px 32px;font-size:15px}
.sv-agd__copiar{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  padding:15px 22px;border-radius:12px;cursor:pointer;
  font-family:var(--inter);font-size:14px;font-weight:600;
  color:rgba(255,255,255,.85);background:transparent;
  border:1px solid rgba(255,255,255,.26);
  transition:border-color .18s,color .18s,background .18s}
.sv-agd__copiar:hover{border-color:var(--amar);color:var(--amar);
  background:rgba(255,202,43,.06)}
.sv-agd__copiar:focus-visible{outline:3px solid rgba(255,202,43,.75);
  outline-offset:2px}
.sv-agd__copiar[hidden]{display:none}
.sv-agd__nota{flex:1 1 240px;display:flex;align-items:flex-start;gap:8px;margin:0;
  font-family:var(--inter);font-size:12.5px;line-height:1.55;
  color:rgba(255,255,255,.45)}
.sv-agd__nota svg{flex:0 0 auto;margin-top:2px}

/* El revelado al entrar en pantalla, con reglas propias y no colgado de las
   del `.sv-calc`: tocar aquella linea es tocar seis paginas mas. */
.sv-agd[data-anim]{opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.sv-agd[data-anim].dibujada{opacity:1;transform:none}
@media (scripting:none){.sv-agd[data-anim]{opacity:1;transform:none;transition:none}}
@media (prefers-reduced-motion:reduce){
  .sv-agd[data-anim]{opacity:1;transform:none;transition:none}
  .sv-agd__reloj i,.sv-agd__it,.sv-agd__box,.sv-agd__copiar{transition:none}
}
/* APILADO: reloj, casillas, agenda. Y las ocho casillas a DOS columnas, que no
   es estetica: en una sola columna miden 460px y el reloj se iba de pantalla,
   asi que el visitante marcaba y no veia moverse nada. A dos columnas la lista
   mide 280px y entra entera abajo del reloj en un telefono de 844px. */
@media (max-width:900px){
  .sv-agd__cuerpo{grid-template-columns:1fr;
    grid-template-areas:"reloj" "lista" "plan";gap:26px}
  .sv-agd__lista{grid-template-columns:1fr 1fr;gap:9px 10px}
}
@media (max-width:768px){
  .sv-agd{padding:26px 20px 24px;border-radius:18px;margin-top:26px}
  .sv-agd__it{padding:10px 12px;gap:10px}
  .sv-agd__nom{font-size:13.4px;line-height:1.36}
  .sv-agd__dice{min-height:0;font-size:14.2px}
  .sv-agd__min{flex:0 0 46px}
  .sv-agd__min b{font-size:23px}
  .sv-agd__regla{font-size:9.5px;letter-spacing:.9px}
  /* El boton y el de copiar a lo ancho, uno abajo del otro. En una fila de dos,
     en 390px, "Copiada: pegala en el calendario" parte en tres renglones y el
     boton de al lado queda de tres pisos de alto. */
  .sv-agd__btn,.sv-agd__copiar{width:100%;justify-content:center;text-align:center}
}

/* Las tres tarjetas de recursos, que pesan lo mismo. La grilla por defecto de
   `.sv-vias` es `1.25fr 1fr 1fr` porque ahi la primera es la que queremos. */
.sv-vias--iguales{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px) and (min-width:769px){
  .sv-vias--iguales{grid-template-columns:1fr 1fr}
  .sv-vias--iguales .sv-via:last-child{grid-column:1 / -1}
}
/* Y LA COLUMNA UNICA EN CELULAR, QUE HAY QUE REPETIR ACA. La regla de arriba
   es `.sv-vias--iguales` (dos clases) y la de celular es `.sv-vias` (una): la
   mia ganaba por especificidad y a 390px las tres tarjetas seguian en fila.
   Medido: scrollWidth 619 contra clientWidth 390. */
@media (max-width:768px){.sv-vias--iguales{grid-template-columns:1fr}}

.sv-agd:not(.sv-agd--js) .sv-agd__min,
.sv-agd:not(.sv-agd--js) .sv-agd__reloj,
.sv-agd:not(.sv-agd--js) .sv-agd__regla,
.sv-agd:not(.sv-agd--js) .sv-agd__dice{display:none}
.sv-agd:not(.sv-agd--js) .sv-agd__fila[data-t]{display:none}
/* Y estas PISAN el atributo `hidden` que el renglon trae del HTML,
   a proposito: sin script nadie se lo saca. Un renglon abierto por
   esta regla sigue teniendo `hidden` puesto, asi que para saber si
   se ve hay que mirar el `display` calculado y no el atributo. */
.sv-agd:not(.sv-agd--js):has(input[data-t="0"]:checked) .sv-agd__fila[data-t="0"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="1"]:checked) .sv-agd__fila[data-t="1"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="2"]:checked) .sv-agd__fila[data-t="2"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="3"]:checked) .sv-agd__fila[data-t="3"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="4"]:checked) .sv-agd__fila[data-t="4"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="5"]:checked) .sv-agd__fila[data-t="5"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="6"]:checked) .sv-agd__fila[data-t="6"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="7"]:checked) .sv-agd__fila[data-t="7"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="8"]:checked) .sv-agd__fila[data-t="8"]{display:flex}
.sv-agd:not(.sv-agd--js):has(input[data-t="9"]:checked) .sv-agd__fila[data-t="9"]{display:flex}

/* ═══════ EL PEDIDO DE PROPUESTA POR ESCRITO · solo /servicios-empresas ════
   La segunda puerta de la pagina: Calendly para quien puede agendar, esto para
   quien primero tiene que mostrar algo adentro de su empresa.

   La trampa antirrobots (`_gotcha`) NO se esconde con `display:none`: hay
   robots que ignoran los campos que no se muestran. Se saca de pantalla, que
   es lo que recomienda Formspree. */
.sv-prop{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--linea);
  border-radius:22px;padding:34px 34px 30px;box-shadow:0 18px 46px rgba(14,47,68,.10)}
.sv-prop__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sv-prop__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px 24px}
.sv-prop__campo{display:block}
.sv-prop__campo--ancho{display:block;margin-top:20px}
.sv-prop__lab{display:block;font-family:var(--inter);font-size:14px;font-weight:700;
  color:var(--tinta);margin-bottom:8px}
.sv-prop__lab i{font-style:normal;font-weight:600;color:var(--gris2)}
.sv-prop__campo input,.sv-prop__campo textarea{display:block;width:100%;
  box-sizing:border-box;font-family:var(--inter);font-size:16px;color:var(--tinta);
  background:#fff;border:1.5px solid var(--linea);border-radius:12px;
  padding:13px 15px;outline:0;transition:border-color .18s,box-shadow .18s}
.sv-prop__campo textarea{resize:vertical;min-height:82px;line-height:1.6}
.sv-prop__campo input:focus,.sv-prop__campo textarea:focus{border-color:var(--mag);
  box-shadow:0 0 0 4px rgba(205,0,70,.10)}
.sv-prop__campo small{display:block;font-family:var(--inter);font-size:12.5px;
  color:var(--gris);margin-top:7px;line-height:1.5}
.sv-prop__check{display:flex;align-items:flex-start;gap:10px;margin-top:20px;
  font-family:var(--inter);font-size:14px;line-height:1.6;color:var(--gris);
  cursor:pointer}
.sv-prop__check input{flex:0 0 auto;margin-top:3px;width:17px;height:17px;
  accent-color:var(--mag)}
.sv-prop__pie{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;
  margin-top:26px;padding-top:24px;border-top:1px solid var(--linea)}
/* `.btn` no trae padding: lo pone el modificador de tamano, y `btn--mag`
   es solo color. Sin esto el boton sale de 22px de alto. */
.sv-prop__btn{flex:0 0 auto;padding:18px 40px;font-size:16px}
.sv-prop__fino{flex:1;min-width:220px;font-family:var(--inter);font-size:13px;
  line-height:1.65;color:var(--gris);margin:0}
.sv-prop__ok{font-family:var(--inter);font-size:16px;line-height:1.7;
  font-weight:700;color:var(--tinta);margin:0;padding:22px 24px;
  background:#F7F9FB;border:1px solid var(--linea);border-radius:16px}
@media (max-width:768px){
  .sv-prop{padding:26px 20px 24px;border-radius:18px}
  .sv-prop__grid{grid-template-columns:1fr;gap:18px}
  .sv-prop__pie{flex-direction:column;align-items:stretch}
  .sv-prop__btn{width:100%;justify-content:center}
  .sv-prop__fino{text-align:center}
}
html[data-oscuro] .sv-prop{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .sv-prop__lab,html[data-oscuro] .sv-prop__ok{color:var(--tinta)}
html[data-oscuro] .sv-prop__campo input,
html[data-oscuro] .sv-prop__campo textarea,
html[data-oscuro] .sv-prop__ok{background:var(--f3);border-color:var(--bd);
  color:var(--tinta)}


/* ── .sv-gr · grupos con enlaces ──────────────────────────────────────── */
/* `align-items:start` y no el `stretch` por defecto: los cuatro grupos no
   tienen la misma cantidad de calculadoras —son 4, 4, 2 y 5— y estirados a la
   altura de la fila el de dos quedaba con 150px de caja vacia abajo. */
.sv-gr{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);
  align-items:start;max-width:1100px;margin:0 auto}
.sv-gr__g{padding:24px 24px 20px;border-radius:18px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--linea)}
.sv-gr__cab{display:flex;align-items:center;gap:13px;margin-bottom:9px}
.sv-gr__ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#EDF1F5;color:var(--tinta)}
.sv-gr__t{font-family:var(--inter);font-size:17.5px;font-weight:800;
  line-height:1.25;color:var(--tinta);margin:0}
.sv-gr__n{display:block;font-size:12px;font-weight:700;color:var(--gris);
  letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.sv-gr__b{font-family:var(--inter);font-size:13.5px;line-height:1.55;
  color:var(--gris);margin:0 0 16px}
.sv-gr__lista{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sv-gr__a{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;
  border-radius:12px;background:#F6F8FA;text-decoration:none;
  transition:background .16s ease,transform .16s ease}
.sv-gr__a:hover{background:#EDF1F5;transform:translateX(2px)}
.sv-gr__a svg{flex:0 0 auto;margin-top:4px;color:var(--mag)}
.sv-gr__an{display:block;font-family:var(--inter);font-size:14.5px;
  font-weight:700;line-height:1.3;color:var(--tinta)}
.sv-gr__ad{display:block;font-family:var(--inter);font-size:12.5px;
  line-height:1.45;color:var(--gris);margin-top:2px}
.sv-gr__pie{display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  font-family:var(--inter);font-size:13.5px;font-weight:700;color:var(--mag);
  text-decoration:none}
.sv-gr__pie svg{transition:transform .16s ease}
.sv-gr__pie:hover svg{transform:translateX(3px)}

.sec--navy .sv-gr__g{background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sec--navy .sv-gr__ic{background:rgba(255,255,255,.1);color:#fff}
.sec--navy .sv-gr__t{color:#fff}
.sec--navy .sv-gr__n{color:rgba(255,255,255,.6)}
.sec--navy .sv-gr__b{color:rgba(255,255,255,.72)}
.sec--navy .sv-gr__a{background:rgba(255,255,255,.06)}
.sec--navy .sv-gr__a:hover{background:rgba(255,255,255,.12)}
.sec--navy .sv-gr__a svg{color:var(--amar)}
.sec--navy .sv-gr__an{color:#fff}
.sec--navy .sv-gr__ad{color:rgba(255,255,255,.7)}
.sec--navy .sv-gr__pie{color:var(--amar)}

/* ── .sv-mos · mosaico de tarjetas-enlace ─────────────────────────────── */
.sv-mos{display:grid;gap:12px;max-width:1100px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.sv-mos__a{display:flex;flex-direction:column;gap:5px;padding:17px 18px 15px;
  border-radius:15px;background:#fff;text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--linea);
  border-left:3px solid var(--amar);
  transition:box-shadow .16s ease,transform .16s ease}
.sv-mos__a:hover{box-shadow:inset 0 0 0 1px #C3CBD3;transform:translateY(-2px)}
.sv-mos__t{font-family:var(--inter);font-size:16px;font-weight:800;
  line-height:1.25;color:var(--tinta)}
.sv-mos__d{font-family:var(--inter);font-size:13px;line-height:1.5;
  color:var(--gris);flex:1 1 auto}
.sv-mos__n{display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:var(--inter);font-size:12.5px;font-weight:700;color:var(--mag)}
.sv-mos__n svg{transition:transform .16s ease}
.sv-mos__a:hover .sv-mos__n svg{transform:translateX(3px)}

.sec--navy .sv-mos__a{background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sec--navy .sv-mos__a:hover{background:rgba(255,255,255,.11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.sec--navy .sv-mos__t{color:#fff}
.sec--navy .sv-mos__d{color:rgba(255,255,255,.72)}
.sec--navy .sv-mos__n{color:var(--amar)}

/* ── LAS SECCIONES CON ANCLA FRENAN DEBAJO DE LA CABECERA ───────────────
   `.cab` es `position:sticky;top:0` y mide 90px en escritorio y 82 en el
   telefono. Sin esto el navegador para en el borde EXACTO de la seccion y la
   ceja y media palabra del titular quedan abajo de la barra.

   Medido el 8-sep-2026 con /recursos#guias, que es justamente el link que el
   mega-menu prometia desde hacia meses: la seccion frenaba en y=0, la ceja
   caia en y=56 y la cabecera terminaba en y=90. O sea que el link recien
   arreglado seguia llevando a un titulo tapado, que es la mitad del defecto.

   Los 110px son los mismos que ya usa el ancla invisible de los articulos, asi
   que no se inventa una medida nueva.

   SE CUELGA DE `.cab ~ main` Y NO ES POR SER PROLIJO. Los 110px compensan la
   cabecera pegajosa, y las 30 landings de producto NO LA TIENEN:
   `pack-deuda-cero.html` no tiene `.cab` y si tiene `<section id="comprar">`.
   Con la regla suelta, ese ancla frenaria 110px mas arriba de lo que debe y se
   veria el final de la seccion anterior. `.cab` y `<main>` son hermanos en
   todas las paginas con chrome del sitio y en ninguna landing, asi que el
   selector separa exactamente los dos casos.
   Las que ya tenian ancla y si llevan chrome —los cuatro grupos de
   /calculadoras y las nueve secciones de /tienda— dejan de quedar tapadas. */
.cab ~ main section[id]{scroll-margin-top:110px}

/* ── el boton que cierra una seccion de indice ────────────────────────── */
.sv-cierre{text-align:center;margin-top:34px}
/* `.btn--tarjeta` trae `width:100%` porque nacio para llenar una tarjeta.
   Suelto en el medio de una seccion de 1100px sale una barra de punta a punta,
   que no se lee como un boton. Aca vuelve a medir lo que dice. */
.sv-cierre .btn{width:auto;display:inline-flex;padding:15px 32px;font-size:14.5px}

/* ── .sv-guia · la ficha de la guia en PDF ─────────────────────────────────
   Reemplaza los estilos en linea con los que estaba escrito el bloque en
   `gen_resto.bloque_guia_balanz()`. Eran `color:var(--tinta)` y
   `color:var(--gris)` fijos, que sobre el navy de esta seccion serian tinta
   oscura sobre fondo oscuro: la misma trampa de `.cita-caja`. Claro primero,
   navy despues, como todo el archivo. */
.sv-guia__t{font-family:var(--inter);font-size:clamp(21px,2.4vw,26px);
  font-weight:700;line-height:1.3;color:var(--tinta);margin:0 0 18px}
.sv-guia__p{font-family:var(--inter);font-size:16px;line-height:1.8;
  color:var(--gris);margin:0 0 16px}
.sv-guia__p + .checks{margin-top:4px}
.checks + .sv-guia__p{margin:18px 0 0}
.sv-guia__a{color:var(--mag);font-weight:700}
.sv-guia__nota{font-family:var(--inter);font-size:13px;line-height:1.65;
  color:var(--gris);margin:14px auto 0;max-width:420px}
.sec--navy .sv-guia__t{color:#fff}
.sec--navy .sv-guia__p{color:rgba(255,255,255,.78)}
.sec--navy .sv-guia__a{color:var(--amar)}
.sec--navy .sv-guia__nota{color:rgba(255,255,255,.6)}

@media (max-width:860px){
  .sv-gr{grid-template-columns:1fr}
  .sv-gr__g{padding:20px 18px 18px}
}
@media (max-width:560px){
  .sv-mos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sv-gr__a,.sv-gr__pie svg,.sv-mos__a,.sv-mos__n svg{transition:none}
  .sv-gr__a:hover,.sv-mos__a:hover{transform:none}
  .sv-gr__pie:hover svg,.sv-mos__a:hover .sv-mos__n svg{transform:none}
}

/* === FIN PAGINAS DE SERVICIO === */

/* === LA BRECHA · generado por _generador/brecha.py — NO EDITAR A MANO === */
.sv-brecha{margin:26px 0 0}
.sv-brecha__ley{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 14px}
.sv-brecha__ll{display:flex;align-items:center;gap:8px;font-family:var(--urb);
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px}
.sv-brecha__ll::before{content:"";width:16px;height:3px;border-radius:2px;
  background:currentColor;flex:0 0 auto}
.sv-brecha__ll--f{color:rgba(255,255,255,.5)}
.sv-brecha__ll--c{color:var(--amar)}

/* `touch-action:pan-y` deja que el gesto vertical siga siendo el scroll de la
   pagina. El barrido con el dedo NO se toma aca sino en el mando: secuestrar
   el gesto vertical arriba del dibujo deja al visitante preso adentro del
   grafico, que es el error clasico de los graficos tactiles. */
.sv-brecha__lienzo{position:relative;touch-action:pan-y}
.sv-brecha__svg{display:block;width:100%;height:auto;overflow:visible}
.sv-brecha__rej line{stroke:rgba(255,255,255,.08);stroke-width:1}
.sv-brecha__gap{fill:url(#sv-brecha-tinta)}
.sv-brecha__lf{fill:none;stroke:rgba(255,255,255,.58);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.sv-brecha__lc{fill:none;stroke:var(--amar);stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round}
.sv-brecha__guia{stroke:rgba(255,255,255,.32);stroke-width:1;stroke-dasharray:3 4}
.sv-brecha__pf{fill:var(--tinta);stroke:rgba(255,255,255,.75);stroke-width:2}
.sv-brecha__pc{fill:var(--amar);stroke:var(--tinta);stroke-width:2.5}

/* El mando. Es un `range` nativo: trae arrastre con el dedo, flechas y
   Inicio/Fin con el teclado, foco visible y `aria-valuetext` sin escribir una
   linea de JavaScript. El alto de 30 px es zona de dedo, no adorno. */
.sv-brecha__mando{display:block;margin-top:8px}
.sv-brecha__scrub{-webkit-appearance:none;appearance:none;display:block;
  width:100%;height:30px;margin:0;background:none;cursor:ew-resize}
.sv-brecha__scrub::-webkit-slider-runnable-track{height:4px;border-radius:3px;
  background:rgba(255,255,255,.16)}
.sv-brecha__scrub::-moz-range-track{height:4px;border-radius:3px;
  background:rgba(255,255,255,.16)}
.sv-brecha__scrub::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--amar);
  border:3px solid var(--tinta);box-shadow:0 2px 10px rgba(0,0,0,.4)}
.sv-brecha__scrub::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--amar);border:3px solid var(--tinta);
  box-shadow:0 2px 10px rgba(0,0,0,.4)}

.sv-brecha__ejes{display:flex;justify-content:space-between;margin-top:-2px;
  font-family:var(--urb);font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.sv-brecha__lee{font-family:var(--inter);font-size:15px;line-height:1.75;
  color:rgba(255,255,255,.78);margin:16px auto 0;max-width:620px;
  text-align:center;text-wrap:pretty}
.sv-brecha__lee b{color:#fff;font-weight:800;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sv-brecha__acel{display:block;margin-top:8px;color:var(--amar);font-weight:600}
.sv-brecha__acel:empty{display:none}

/* Mientras los campos esten vacios no hay nada que dibujar. Se apaga el
   dibujo y se deja el renglon, que ya dice guiones: una curva vieja al lado de
   un numero en blanco se lee como que la pieza se colgo. */
.sv-brecha--vacia .sv-brecha__svg{opacity:.25}

@media (max-width:768px){
  .sv-brecha__lee{font-size:14px;margin-top:14px}
  .sv-brecha__ll{font-size:10.5px;letter-spacing:1.2px}
  .sv-brecha__ejes{font-size:10px}
}

/* === FIN LA BRECHA === */

/* === TIENDA · generado por _generador/css_tienda.py — NO EDITAR A MANO === */
/* ── LA TAPA ────────────────────────────────────────────────────────────
   Caja 4:5 con fondo de marca. La imagen va CONTENIDA, nunca recortada: las
   tapas de `img/producto` vienen en tres proporciones distintas y la grilla
   vieja las forzaba todas al mismo hueco. `--tn-esc` es cuanto de la caja
   ocupa la imagen, y cambia segun la forma real del archivo. */
.tn-tapa{--tn-esc:86%;position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/5;width:100%;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0,#24506F 0,var(--navy) 45%,#12293C 100%)}
.tn-tapa::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.10) 0,transparent 42%)}
.tn-tapa img{max-width:var(--tn-esc);max-height:var(--tn-esc);width:auto;height:auto;
  object-fit:contain;border-radius:4px;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.42)) drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.tn-tapa--alta img{--tn-esc:88%;border-radius:3px 6px 6px 3px}
.tn-tapa--ancha{--tn-esc:84%}
.tn-tapa--ancha img{border-radius:7px;border:1px solid rgba(255,255,255,.14)}
.tn-tapa--tira{--tn-esc:92%}
.tn-tapa--tira img{border-radius:6px;border:1px solid rgba(255,255,255,.14)}
/* La escena ya trae su fondo y su proporcion 4:5: llena la caja entera, sin
   sombra propia (la tiene dibujada adentro) y sin brillo encima. */
.tn-tapa--escena{background:none}
.tn-tapa--escena::after{content:none}
.tn-tapa--escena img{max-width:100%;max-height:100%;width:100%;height:100%;
  object-fit:cover;border-radius:0;filter:none}
/* el hover NO puede desplazar una imagen que llena la caja: dejaria una franja
   del fondo de la tarjeta asomando abajo. Solo se acerca. */
.tn-f:hover .tn-tapa--escena img{transform:scale(1.035)}
/* en la ficha ancha la escena manda su propia proporcion: recortada a la
   altura de la columna se le cortan los aparatos por los costados. */
.tn-tapa--grande.tn-tapa--escena{aspect-ratio:4/5;height:auto;min-height:0}
.tn-tapa--vacia{align-items:flex-end;padding:20px}
.tn-tapa--vacia span{font-family:var(--inter);font-size:13px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.tn-tapa--grande{aspect-ratio:auto;height:100%;min-height:340px;border-radius:18px}

/* ── LA FICHA ───────────────────────────────────────────────────────────
   La tarjeta ENTERA es el enlace. La vieja tenia el area tocable solo en el
   boton de abajo: en un telefono eso es una franja de 44 px de una tarjeta
   de 420. */
.tn-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:26px}
/* Los cinco esenciales que acompanan a la estrella van en UNA fila. Con el
   `auto-fill` de arriba entraban cuatro y el quinto quedaba solo, en una fila
   propia, con tres huecos al lado: el producto numero seis en importancia
   parecia un descarte. */
.tn-grilla--cinco{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.tn-grilla--cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}
.tn-grilla--tres{grid-template-columns:repeat(3,minmax(0,1fr));max-width:920px;margin:0 auto}
/* Los SEIS que acompanan a la estrella, desde el 10-sep. Van en dos filas de
   tres y no en una de seis: seis tarjetas en una fila de 1440 dan 190 px cada
   una y la tapa deja de leerse. A tres columnas a lo ancho dan 375 px, que es
   mas grande que las cinco de antes. Sin el `max-width` de `--tres`: aca la
   fila tiene que ocupar el ancho entero, como la ficha de la estrella que
   tiene arriba. */
.tn-grilla--seis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){
  .tn-grilla--cinco,.tn-grilla--cuatro{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .tn-grilla--cinco,.tn-grilla--cuatro,.tn-grilla--tres,.tn-grilla--seis{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
.tn-f{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid var(--linea);text-decoration:none;
  box-shadow:0 2px 4px rgba(14,47,68,.05);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.tn-f:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(14,47,68,.17);
  border-color:rgba(205,0,70,.45)}
.tn-f__marco{display:block;position:relative}
.tn-f:hover .tn-tapa img{transform:translateY(-4px) scale(1.02)}
.tn-tapa img{transition:transform .25s}
.tn-f__cuerpo{display:flex;flex-direction:column;gap:9px;padding:22px 20px 20px;flex:1}
.tn-f__ceja{font-family:var(--inter);font-size:11px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--mag)}
.tn-f__tit{font-family:var(--inter);font-size:17px;font-weight:700;line-height:1.32;
  color:var(--tinta)}
.tn-f__txt{font-family:var(--inter);font-size:13.5px;line-height:1.62;color:var(--gris);flex:1}
.tn-f__pie{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;padding-top:14px;border-top:1px solid var(--linea)}
.tn-f__ver{display:inline-flex;align-items:center;gap:5px;font-family:var(--inter);
  font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--mag)}
.tn-precio{font-family:var(--anton);font-size:25px;line-height:1;color:var(--mag)}
.tn-precio s{font-family:var(--inter);font-size:13px;font-weight:600;color:var(--gris2);
  margin-right:5px;text-decoration-thickness:1.5px}
.tn-precio--txt{font-family:var(--inter);font-size:12.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--gris)}
.tn-precio--grande{font-size:52px;color:var(--amar)}
.tn-precio--grande s{font-size:18px;color:rgba(255,255,255,.55)}

/* ── LA ESTRELLA ────────────────────────────────────────────────────────
   El unico producto que se imprime a lo ancho. Va sobre navy adentro de una
   seccion clara: es el contraste lo que lo hace pesar mas que los otros
   cinco, no el tamano de la letra. */
.tn-est{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:44px;
  align-items:center;background:linear-gradient(135deg,var(--tinta),var(--navy) 60%,#20486A);
  border-radius:26px;padding:40px;margin-bottom:44px;
  box-shadow:0 26px 60px rgba(14,47,68,.28)}
.tn-est__img{align-self:stretch;display:flex}
.tn-est__img a{display:block;width:100%;border-radius:18px;overflow:hidden}
.tn-est__ceja{font-family:var(--inter);font-size:12px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--amar);margin-bottom:12px}
.tn-est h3{font-family:var(--anton);font-size:clamp(34px,4.4vw,52px);font-weight:400;
  text-transform:uppercase;letter-spacing:.5px;line-height:1.02;color:#fff;margin-bottom:16px}
.tn-est__promesa{font-family:var(--inter);font-size:16px;line-height:1.72;
  color:rgba(255,255,255,.86);margin-bottom:22px}
.tn-est__lista{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px}
.tn-est__lista li{display:flex;gap:11px;align-items:flex-start;font-family:var(--inter);
  font-size:14.5px;line-height:1.55;color:#fff}
.tn-est__lista svg{flex:none;margin-top:3px;color:var(--amar)}
.tn-est__pie{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:24px}
.tn-est__ahorro{font-family:var(--inter);font-size:13px;font-weight:600;
  color:rgba(255,255,255,.72)}
.tn-est__btns{display:flex;gap:14px;flex-wrap:wrap}
.tn-est__btns .btn{padding:17px 30px;font-size:14px}
/* El borde del `btn--linea` del sitio es blanco al 30%: sobre el degrade de
   esta tarjeta el boton se leia como texto suelto, no como boton. Se sube el
   borde solo aca; el del hero y el resto del sitio no se tocan. */
.tn-est__btns .btn--linea{border-color:rgba(255,255,255,.55)}
.tn-est__btns .btn--linea:hover{border-color:var(--amar);color:var(--amar)}

/* ── EL RUTEADOR ────────────────────────────────────────────────────────
   Cinco filas. La izquierda es lo que dice la persona; la derecha, que le
   servimos y POR QUE ese. Sin el porque vuelve a ser una lista de productos. */
.tn-ruta{display:flex;flex-direction:column;gap:14px;max-width:1000px;margin:0 auto}
.tn-ruta__f{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.15fr);gap:22px;
  align-items:center;padding:22px 26px;border-radius:16px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:background .2s,border-color .2s,transform .2s}
.tn-ruta__f:hover{background:rgba(255,255,255,.12);border-color:var(--amar);transform:translateX(4px)}
.tn-ruta__n{font-family:var(--anton);font-size:30px;color:var(--amar);line-height:1;text-align:center}
.tn-ruta__dice{font-family:var(--inter);font-size:16.5px;font-weight:600;line-height:1.42;color:#fff}
.tn-ruta__dice::before{content:"\201C"}
.tn-ruta__dice::after{content:"\201D"}
.tn-ruta__rta{display:flex;flex-direction:column;gap:5px}
.tn-ruta__prod{font-family:var(--inter);font-size:14px;font-weight:700;letter-spacing:.3px;
  color:var(--amar)}
.tn-ruta__pq{font-family:var(--inter);font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.78)}
.tn-ruta__pre{font-family:var(--anton);font-size:19px;color:#fff}

/* ── LA FRANJA DE PRECIO ────────────────────────────────────────────────*/
.tn-baratos{margin-top:46px;text-align:center}
.tn-baratos__tit{font-family:var(--inter);font-size:12px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--gris);margin-bottom:18px}
.tn-baratos__fila{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.tn-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  border:1px solid var(--linea);background:#fff;text-decoration:none;
  transition:border-color .2s,transform .2s}
.tn-chip:hover{border-color:var(--mag);transform:translateY(-2px)}
.tn-chip span{font-family:var(--inter);font-size:13.5px;font-weight:600;color:var(--tinta)}
.tn-chip b{font-family:var(--anton);font-size:17px;font-weight:400;color:var(--mag)}

/* ── COMO ES LA COMPRA ──────────────────────────────────────────────────*/
.tn-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.tn-paso{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:30px 26px}
.tn-paso__n{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:var(--amar);color:var(--tinta);font-family:var(--anton);
  font-size:22px;margin-bottom:16px}
.tn-paso h3{font-family:var(--inter);font-size:18px;font-weight:700;color:#fff;margin-bottom:9px}
.tn-paso p{font-family:var(--inter);font-size:14.5px;line-height:1.68;color:rgba(255,255,255,.8)}
.tn-sellos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;
  margin-top:34px;padding-top:32px;border-top:1px solid rgba(255,255,255,.16)}
.tn-sello{display:flex;flex-direction:column;gap:5px}
.tn-sello span{color:var(--amar)}
.tn-sello b{font-family:var(--inter);font-size:14.5px;font-weight:700;color:#fff}
.tn-sello i{font-family:var(--inter);font-size:13px;font-style:normal;line-height:1.55;
  color:rgba(255,255,255,.72)}

/* ── LA TABLA ───────────────────────────────────────────────────────────*/
.tn-tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px;
  border:1px solid var(--linea);background:#fff}
.tn-tabla table{width:100%;border-collapse:collapse;min-width:720px}
.tn-tabla thead th{font-family:var(--inter);font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:#fff;background:var(--tinta);padding:16px 18px;text-align:left}
.tn-tabla tbody th{font-family:var(--inter);font-size:15px;font-weight:700;color:var(--tinta);
  padding:18px;text-align:left;vertical-align:top}
.tn-tabla tbody th a{color:inherit;text-decoration:none;border-bottom:2px solid var(--mag)}
.tn-tabla td{font-family:var(--inter);font-size:14px;line-height:1.6;color:var(--gris);
  padding:18px;vertical-align:top}
.tn-tabla tbody tr+tr{border-top:1px solid var(--linea)}
.tn-tabla tbody tr:hover{background:rgba(205,0,70,.035)}
.tn-tabla__pre{font-family:var(--anton);font-size:23px;color:var(--mag);white-space:nowrap}

/* ── EL REMATE ──────────────────────────────────────────────────────────*/
.tn-remate{max-width:940px;margin:0 auto;text-align:center}
.tn-remate__f{font-family:var(--anton);font-size:clamp(30px,4.6vw,54px);font-weight:400;
  text-transform:uppercase;line-height:1.08;color:#fff;letter-spacing:.5px}
.tn-remate__f em{font-style:normal;color:var(--amar)}
.tn-remate__fino{font-family:var(--inter);font-size:16px;line-height:1.7;
  color:rgba(255,255,255,.8);margin-top:22px}

/* ── LA TARJETA DEL MENU ────────────────────────────────────────────────
   La cuarta columna del mega de Tienda. Es la unica imagen del menu del
   sitio. El ancho es fijo y no `flex:1` como las otras tres: una tapa que se
   estira deja las columnas de texto sin lugar en pantallas de 1280. */
.mega__col--card{flex:0 0 214px}
.megac{display:flex;flex-direction:column;gap:0;border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,var(--tinta),var(--navy));text-decoration:none;
  border:1px solid rgba(255,255,255,.10);transition:transform .2s,box-shadow .2s}
.megac:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(14,47,68,.3)}
.megac__tapa{display:block;padding:16px 16px 0}
.megac__tapa img{display:block;width:100%;height:auto;border-radius:4px;
  box-shadow:0 10px 22px rgba(0,0,0,.42)}
/* La ESCENA trae su propio fondo. El marco de 16px que necesita una tapa
   suelta -para que no quede pegada al borde- alrededor de una escena deja una
   franja del degrade de la tarjeta rodeando el degrade de la imagen, que se ve
   como un error de recorte. Va a sangre y sin sombra propia: la sombra ya esta
   dibujada adentro de la escena. */
.megac__tapa--escena{padding:0}
.megac__tapa--escena img{border-radius:0;box-shadow:none}
.megac__txt{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px}
.megac__txt b{font-family:var(--inter);font-size:14px;font-weight:700;color:#fff;line-height:1.3}
.megac__txt i{font-family:var(--inter);font-size:11.5px;font-style:normal;
  color:rgba(255,255,255,.7);line-height:1.4}
.megac__pre{font-family:var(--anton);font-size:24px;color:var(--amar);line-height:1.1;margin-top:5px}
.megac__btn{margin-top:9px;display:inline-block;text-align:center;padding:9px 12px;
  border-radius:9px;background:var(--mag);color:#fff;font-family:var(--inter);font-size:11.5px;
  font-weight:700;letter-spacing:.9px;text-transform:uppercase}
/* Debajo de 1200 el panel ya viene achicado a 840 px de minimo: la tapa
   empujaria las tres columnas de texto y el menu saldria de la pantalla. Se
   esconde SOLO la tarjeta; los tres destinos que ofrece siguen en el menu. */
@media (max-width:1200px){.mega__col--card{display:none}}

/* ── LAS PIELES OSCURAS ─────────────────────────────────────────────────
   Cuelgan de `html[data-oscuro]` porque `--f2`, `--f3` y `--bd` solo existen
   ahi. Fuera de este selector, esas variables no resuelven y la caja saldria
   transparente. */
html[data-oscuro] .tn-f{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .tn-f__tit{color:var(--tinta)}
html[data-oscuro] .tn-f__pie{border-top-color:var(--bd)}
html[data-oscuro] .tn-f__ceja,html[data-oscuro] .tn-f__ver,
html[data-oscuro] .tn-precio,html[data-oscuro] .tn-chip b{color:var(--magtx)}
html[data-oscuro] .tn-chip{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .tn-chip span{color:var(--tinta)}
html[data-oscuro] .tn-tabla{background:var(--f2);border-color:var(--bd)}
html[data-oscuro] .tn-tabla thead th{background:var(--f3);color:var(--tinta)}
html[data-oscuro] .tn-tabla tbody th{color:var(--tinta)}
html[data-oscuro] .tn-tabla tbody tr+tr{border-top-color:var(--bd)}
html[data-oscuro] .tn-tabla__pre{color:var(--magtx)}
html[data-oscuro] .tn-tabla tbody tr:hover{background:var(--f3)}

/* ── TELEFONO ───────────────────────────────────────────────────────────*/
@media (max-width:900px){
  .tn-est{grid-template-columns:1fr;gap:28px;padding:28px}
  .tn-est__img a{max-width:280px;margin:0 auto}
  .tn-tapa--grande{min-height:0;aspect-ratio:4/5}
  .tn-ruta__f{grid-template-columns:40px minmax(0,1fr);gap:14px;row-gap:14px}
  .tn-ruta__rta{grid-column:2}
}
@media (max-width:640px){
  .tn-grilla{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:16px}
  .tn-f__cuerpo{padding:16px 14px 15px;gap:7px}
  .tn-f__tit{font-size:15px}
  .tn-f__txt{display:none}
  .tn-precio{font-size:21px}
  /* EL PIE VA EN DOS RENGLONES EN PANTALLA CHICA.
     Acá estaba `.tn-f__ver span{display:none}`, que no seleccionaba nada: el
     texto de `.tn-f__ver` es un nodo suelto, no un `<span>` hijo. La regla
     parecía resolver el problema y no se aplicaba nunca.
     Medido a 390 px: con el precio tachado de ocho dígitos ($140.000 del Pack,
     $103.300 de Tu Año en 7 Hábitos) el `space-between` empuja el "Ver la
     ficha" hasta x=418 en una pantalla de 390, y `.tn-f` lo tapa con su
     `overflow:hidden`. En columna no hay precio que lo rompa. */
  .tn-f__pie{flex-direction:column;align-items:flex-start;gap:7px}
  .tn-est h3{font-size:32px}
  .tn-precio--grande{font-size:42px}
  .tn-est__btns .btn{width:100%}
}

/* === FIN TIENDA === */

/* === EMPRESAS (gen_empresas.py) · NO EDITAR A MANO === */
.sv-prop__campo select{display:block;width:100%;font-family:var(--inter);font-size:16px;
  color:var(--tinta);background:#fff;border:1.5px solid var(--linea);border-radius:12px;
  padding:13px 14px;min-height:50px}
.sv-prop__campo select:focus{border-color:var(--mag);outline:none}
.sv-prop__check a{color:var(--mag);font-weight:700}
.sv-vias.emp-vias--dos{grid-template-columns:repeat(2,minmax(0,380px));justify-content:center}
.sv-vias.emp-vias--dos .sv-via:last-child{grid-column:auto}
@media (max-width:768px){.sv-vias.emp-vias--dos{grid-template-columns:1fr}}
.emp-aviso{max-width:820px;margin:28px auto 0}
.emp-aviso a{color:var(--mag);font-weight:700;overflow-wrap:anywhere}
.emp-lim{max-width:900px;margin:0 auto}
.emp-lim ul{margin:0;padding-left:20px}
.emp-lim li{margin:0 0 12px;line-height:1.7}
.emp-lim li:last-child{margin-bottom:0}
.emp-desc{max-width:860px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;
  gap:18px 24px;align-items:center;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:28px 30px}
.emp-desc__ic{display:flex;width:56px;height:56px;border-radius:16px;align-items:center;
  justify-content:center;background:rgba(255,202,43,.14);color:#FFCA2B}
.emp-desc__txt h3{font-family:var(--inter);font-size:20px;font-weight:700;color:#fff;margin:0 0 6px}
.emp-desc__txt p{font-family:var(--inter);font-size:15px;line-height:1.7;
  color:rgba(255,255,255,.78);margin:0}
.emp-desc__btn{white-space:nowrap}
.emp-desc__fino{grid-column:1/-1;font-family:var(--inter);font-size:13px;
  color:rgba(255,255,255,.62);margin:0;text-align:right}
@media(max-width:760px){
  .emp-desc{grid-template-columns:1fr;padding:24px 20px;text-align:left}
  .emp-desc__btn{width:100%;justify-content:center;white-space:normal}
  .emp-desc__fino{text-align:center}
}
/* === FIN EMPRESAS === */