/* ============================================================
   IO.CSS — Sistema visual RECONSTRUIDO v2.1 (Imágenes Oncológicas)
   Reemplaza por completo a site.css. Nada heredado de las maquetas
   antiguas: escala de espaciado y ritmo de sección ESTRICTOS para
   eliminar el caos de paddings. Marca conservada (Gabarito/Satoshi/
   JetBrains Mono · cian/navy). Todo se deriva de tokens.
   Capas: 1) reset 2) tokens 3) base 4) layout 5) chrome 6) componentes 7) utils
   ============================================================ */

/* ---------- 1 · RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;}
/* font-size raíz = base del rem. 62.5% hace que 1rem valga 10px, así cada token se
   lee como px÷10 (--fs-xs 1.3rem = 13px). En pantallas grandes SUBE (abajo) y, como
   todo el sistema está en rem, escala proporcional SIN `zoom` → el scroll/pin/sticky
   no se descuadran (unidades de layout reales). */
html{font-size:62.5%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{min-height:100%;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img,svg,video{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
:focus-visible{outline:0.2rem solid var(--cyan);outline-offset:0.2rem;}
/* skip-link: oculto hasta recibir foco por teclado (WCAG 2.4.1 bypass blocks) */
.skip-link{position:fixed;top:0.8rem;left:0.8rem;z-index:1000;transform:translateY(-150%);opacity:0;transition:transform .15s ease,opacity .15s ease;
  background:var(--navy);color:#fff;padding:0.8rem 1.4rem;border-radius:0.8rem;font-size:var(--fs-sm);font-weight:600;box-shadow:var(--shadow-2);}
.skip-link:focus{transform:translateY(0);opacity:1;}

/* ---------- 2 · TOKENS ---------- */
:root{
  /* — Marca: color (invariante) — */
  --cyan:#00AEEF;          /* única acción + resalte */
  --cyan-deep:#0090C8;     /* cian legible sobre claro */
  --cyan-ink:#073245;      /* texto sobre fill cian */
  --cyan-wash:#E8F8FF;     /* superficie cian suave */
  --navy:#152555;          /* tinta principal (NUNCA #000) */
  --navy-700:#0F1C44;      /* navy medio */
  --navy-800:#0C1638;      /* navy profundo */
  --navy-900:#080F26;      /* navy casi-negro (base oscura) */
  --slate:#5C6784;         /* cuerpo */
  --slate-soft:#8A93AD;    /* cuerpo tenue / captions */
  --lavender:#C9CEF2;      /* acento humano (no acción) */
  --lav-wash:#EEF0FB;      /* franja humana */
  --paper:#FFFFFF;         /* canvas */
  --paper-1:#F6F8FD;       /* superficie nivel 1 */
  --paper-2:#EDF1FA;       /* superficie nivel 2 */
  --page:#F8F9FD;          /* canvas de página (fondo del body, no blanco) */
  --line:#E2E7F2;          /* hairline */
  --line-strong:#D2D9EA;   /* hairline marcada */

  /* — Marca: tipografía (invariante) — */
  --font-display:'Gabarito','Helvetica Neue',Arial,sans-serif;
  --font-body:'Satoshi','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* — Escala de espaciado (0.4rem base) — ÚNICA fuente de spacing — */
  --sp-1:0.4rem; --sp-2:0.8rem; --sp-3:1.2rem; --sp-4:1.6rem; --sp-5:2rem;
  --sp-6:2.4rem; --sp-7:3.2rem; --sp-8:4rem; --sp-9:4.8rem; --sp-10:6.4rem;
  --sp-11:8rem; --sp-12:9.6rem; --sp-13:12.8rem;

  /* — Ritmo de sección (consistente en TODO el sitio) — */
  --section-y:clamp(7.2rem,9vw,12.8rem);     /* padding vertical de banda estándar */
  --section-y-tight:clamp(4.8rem,6vw,8.8rem);/* banda densa */
  --head-gap:clamp(4rem,5vw,6.4rem);       /* separación encabezado→contenido de sección */
  --stack-gap:var(--sp-6);               /* ritmo vertical dentro de un bloque */

  /* — Contenedor — */
  --container:128rem;        /* 128rem = 1280px (Figma) */
  --container-wide:132rem;  /* 132rem @16 */
  --gutter:clamp(2.4rem,5vw,6rem);
  --header-h:6.4rem;          /* 6.4rem @16 */

  /* — Radios — */
  --r-xs:0.8rem; --r-sm:1.2rem; --r-md:1.6rem; --r-lg:2.2rem; --r-xl:3rem; --r-pill:999px;

  /* — Elevación: navy en capas, sin glow — */
  --shadow-1:0 0.1rem 0.2rem rgba(12,22,56,.05),0 0.2rem 0.6rem rgba(12,22,56,.05);
  --shadow-2:0 0.2rem 0.4rem rgba(12,22,56,.06),0 1rem 2.4rem rgba(12,22,56,.08);
  --shadow-3:0 0.8rem 4rem rgba(8,15,38,.16);
  --shadow-cta:0 0.6rem 1.8rem rgba(0,174,239,.30);

  /* — Tipo: escala fluida — */
  --fs-display:clamp(4rem,6vw,7.6rem);
  --fs-display-xl:clamp(5.2rem,8vw,10.4rem);
  --fs-h2:clamp(3rem,3.6vw,4.6rem);
  --fs-h3:clamp(2.2rem,2.2vw,2.8rem);
  --fs-lead:clamp(1.7rem,1.5vw,2rem);
  --fs-body:1.6rem;        /* 16 */
  --fs-sm:1.4rem;      /* 14 — texto secundario */
  --fs-xs:1.3rem;     /* 13 — meta, listas chicas, chips */
  --fs-2xs:1.2rem;      /* 12 — etiquetas mínimas */
  --fs-mono:1.2rem;     /* 12 — sólo para texto en fuente mono */
}

/* ---------- 3 · BASE ---------- */
body{font-family:var(--font-body);font-size:var(--fs-body);color:var(--navy);background:var(--page);}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--navy);text-wrap:balance;}
p{color:var(--slate);text-wrap:pretty;}                 /* anti-huérfanas universal en cuerpo */
blockquote,.quote-card blockquote,.dr-quote,figcaption{text-wrap:balance;} /* quotes: líneas parejas */
strong{color:var(--navy);}
.em{color:var(--cyan);}                       /* resalte de 1 palabra */
.mono{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.06em;text-transform:uppercase;}

/* ---------- 4 · LAYOUT (el corazón del orden) ---------- */
.section{padding-block:var(--section-y);position:relative;}
.section--tight{padding-block:var(--section-y-tight);}
.section--flush-top{padding-top:0;}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
/* unificado al ancho de .container (= padding lateral del hero de segunda-op, look premium
   validado por el usuario). El token --container-wide queda sin uso de ancho a propósito. */
.container--wide{max-width:var(--container);}
/* Pantallas grandes: se sube el font-size RAÍZ → todo lo que está en rem (tipos,
   gaps, radios, contenedores) escala proporcional, igual que el viejo zoom pero en
   unidades de layout REALES (el scroll/pin/sticky no se descuadran). Factores
   ×1.14 / ×1.24 / ×1.34 sobre la base 62.5% (10px → 11.4 / 12.4 / 13.4px). El
   container en rem ya escala con la raíz; el valor por breakpoint da el ancho
   visual que tenía el container+zoom anterior. */
@media(min-width:1700px){ html{font-size:71.25%;} :root{--container:132rem;--container-wide:138rem;} }
@media(min-width:2100px){ html{font-size:77.5%;} :root{--container:136rem;--container-wide:146rem;} }
@media(min-width:2500px){ html{font-size:83.75%;} :root{--container:140rem;--container-wide:154rem;} }

/* encabezado de sección: eyebrow → título → lede, con ritmo fijo */
.section__head{max-width:62ch;margin-bottom:var(--head-gap);}
.section__head.center{margin-inline:auto;text-align:center;}
.section__head > * + *{margin-top:var(--sp-5);}
.section__head .lead{margin-top:var(--sp-5);}

/* ritmo vertical reutilizable (en vez de márgenes sueltos) */
.stack{display:flex;flex-direction:column;gap:var(--stack-gap);}
.stack-sm{display:flex;flex-direction:column;gap:var(--sp-3);}
.stack-lg{display:flex;flex-direction:column;gap:var(--sp-8);}

/* grids responsivos estándar */
.grid{display:grid;gap:var(--sp-6);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3.2rem,5vw,6.4rem);align-items:center;}
@media(max-width:960px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-split{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}

/* tipografía utilitaria */
.display{font-size:var(--fs-display);line-height:.95;letter-spacing:-.025em;text-wrap:balance;}
.display-xl{font-size:var(--fs-display-xl);line-height:.88;letter-spacing:-.03em;text-wrap:balance;}
.h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.02em;text-wrap:balance;}
.h3{font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.01em;text-wrap:balance;}
.lead{font-family:var(--font-body);font-size:var(--fs-lead);line-height:1.55;color:var(--slate);font-weight:400;letter-spacing:0;text-wrap:balance;}
.muted{color:var(--slate-soft);}

/* superficies de banda (alternancia controlada) */
.bg-paper{background:var(--paper);}
.bg-paper-1{background:var(--paper-1);}
.bg-lav{background:var(--lav-wash);}
.bg-navy{background:var(--navy-900);color:#fff;}  /* navy sólido (sin degradado), consistente con el home */
.bg-navy *{border-color:rgba(255,255,255,.14);}
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff;}
.bg-navy p,.bg-navy .lead{color:rgba(255,255,255,.78);}

/* ---------- ORNAMENTOS · círculos degradados de fondo + parallax ----------
   Referencia: el sistema "Ornamentos" del Figma (Blobs + Overlay+Blur + anillos).
   Se usan radial-gradients (no filter:blur, que es caro al animar) dentro de un
   contenedor .orn que se auto-recorta (overflow:hidden), así no sangran fuera de
   su sección aunque sea .flow (sin overflow propio). El parallax lo mueve
   fullscreen.js por scroll (rect-based, zoom-safe); data-sp = intensidad/px.
   El contenido va por ENCIMA: .fs__in queda en z-index 1. */
.orn{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.orn > span{position:absolute;border-radius:50%;will-change:transform;}
.orn .b-cyan{background:radial-gradient(circle,rgba(0,174,239,.12),transparent 62%);}
.orn .b-lav{background:radial-gradient(circle,rgba(229,231,255,.38),transparent 66%);}
.orn .b-sky{background:radial-gradient(circle,rgba(130,207,255,.10),transparent 64%);}
.orn .b-glow{background:radial-gradient(circle,rgba(0,174,239,.11),transparent 60%);} /* para fondos navy */
.orn .ring{border:0.1rem solid rgba(0,174,239,.13);}
.fs__in{position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){.orn > span{transform:none!important;}}

/* ---------- 5 · CHROME (header / menú / footer) ---------- */
/* HEADER */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(1.4rem);backdrop-filter:blur(1.4rem);border-bottom:0.1rem solid var(--line);}
/* el cambio claro↔oscuro (over-dark / is-dark) se FUNDE, no salta — pero SOLO tras
   el primer paint (.hdr-ready la pone fullscreen.js en <html> en el 1er frame): así
   el header NACE en su color final sin fundirse desde el blanco al recargar. */
html.hdr-ready .site-header{transition:background-color .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease,border-color .35s ease;}
html.hdr-ready .site-header .brand__white{transition:opacity .35s ease;}
html.hdr-ready .site-header .nav__link{transition:color .35s ease;}
.site-header__inner{height:100%;display:flex;align-items:center;gap:var(--sp-8);}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);}
/* dos logos apilados (ambos con el ICONO cyan; cambia solo el wordmark navy↔blanco).
   El blanco se funde encima por opacidad → el icono queda cyan siempre, sin filtro. */
.brand__logo{position:relative;display:inline-flex;}
.brand__logo img{height:3rem;width:auto;display:block;}
.brand__white{position:absolute;left:0;top:0;opacity:0;}  /* transición gateada por html.hdr-ready (no funde al cargar) */
.site-header.over-dark .brand__white,.site-header.is-dark .brand__white{opacity:1;}
.nav{display:flex;align-self:stretch;align-items:stretch;gap:var(--sp-1);margin-left:var(--sp-4);}
/* el subrayado activo vive al BORDE INFERIOR del header (no bajo el texto) */
.nav__link{position:relative;display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--font-body);font-weight:500;font-size:var(--fs-sm);color:var(--slate);padding:0 1.4rem;}  /* color transiciona vía html.hdr-ready (no funde al cargar) */
.nav__link::after{content:"";position:absolute;left:1.4rem;right:1.4rem;bottom:0;height:0.3rem;border-radius:0.3rem 0.3rem 0 0;background:var(--cyan);transform:scaleX(0);transform-origin:center;transition:transform .18s ease;}
.nav__link:hover{color:var(--navy);}
.nav__link:hover::after{transform:scaleX(.5);background:var(--line-strong);}
.nav__link.is-active{color:var(--navy);}
.nav__link.is-active::after{transform:scaleX(1);background:var(--cyan);}
.header-cta{margin-left:auto;}
/* CTA del header compacto: acompaña la altura esbelta (6.4rem) sin dominarla */
.header-cta .btn{padding:1rem 2rem;font-size:var(--fs-sm);}
.burger{display:none;margin-left:auto;width:4.4rem;height:4.4rem;border:0.1rem solid var(--line);border-radius:var(--r-sm);background:var(--paper);align-items:center;justify-content:center;cursor:pointer;}
.burger span{display:block;width:1.8rem;height:0.2rem;background:var(--navy);position:relative;transition:background-color .35s ease;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:1.8rem;height:0.2rem;background:var(--navy);transition:background-color .35s ease;}
.burger span::before{top:-0.6rem;} .burger span::after{top:0.6rem;}
/* header oscuro (B2B) */
.site-header.is-dark{background:rgba(12,22,56,.7);border-bottom-color:rgba(255,255,255,.1);}
.site-header.is-dark .nav__link{color:rgba(255,255,255,.72);}
.site-header.is-dark .nav__link:hover,.site-header.is-dark .nav__link.is-active{color:#fff;}
.site-header.is-dark .burger{background:transparent;border-color:rgba(255,255,255,.2);}
.site-header.is-dark .burger span,.site-header.is-dark .burger span::before,.site-header.is-dark .burger span::after{background:#fff;}

/* MENÚ MÓVIL */
.menu{position:fixed;inset:0;z-index:200;background:linear-gradient(165deg,var(--navy),var(--navy-900));
  display:flex;flex-direction:column;padding:var(--sp-7) var(--gutter) var(--sp-9);
  transform:translateY(-100%);opacity:0;visibility:hidden;transition:transform .32s ease,opacity .25s;}
.menu.open{transform:translateY(0);opacity:1;visibility:visible;}
.menu__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-10);}
.menu__top .brand img{height:3.2rem;}
.menu__close{width:4.4rem;height:4.4rem;border:0.1rem solid rgba(255,255,255,.2);border-radius:var(--r-sm);background:transparent;color:#fff;font-size:var(--fs-h3);cursor:pointer;}
.menu__nav{display:flex;flex-direction:column;}
.menu__link{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);color:#fff;padding:var(--sp-5) 0;border-bottom:0.1rem solid rgba(255,255,255,.1);}
.menu__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-5);}
.menu__cta{width:100%;justify-content:center;}
.menu__wa{font-family:var(--font-mono);font-size:var(--fs-mono);color:rgba(255,255,255,.6);}
body.menu-open{overflow:hidden;}

/* FOOTER */
.site-footer{background:var(--navy-900);color:#fff;padding-block:var(--sp-12) var(--sp-8);}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(2.8rem,4vw,5.6rem);}
.site-footer h5{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:var(--sp-5);}
.site-footer__brand img{height:3.4rem;margin-bottom:var(--sp-5);}
.site-footer p,.site-footer a{color:rgba(255,255,255,.74);font-size:var(--fs-xs);line-height:1.7;}
.site-footer a:hover{color:#fff;}
.site-footer__col a{display:block;}
/* botones de redes (íconos) */
.site-footer__soc{display:flex;gap:1rem;margin:0 0 var(--sp-4);}
.site-footer__soc a{width:3.8rem;height:3.8rem;border-radius:1rem;background:rgba(255,255,255,.07);border:0.1rem solid rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;}
.site-footer__soc a:hover{background:rgba(0,174,239,.16);border-color:rgba(0,174,239,.5);}
.site-footer__soc a svg{width:1.7rem;height:1.7rem;}
.site-footer__bottom{margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:0.1rem solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;}
.site-footer__bottom,.site-footer__bottom a{color:rgba(255,255,255,.5);font-size:var(--fs-2xs);}
@media(max-width:860px){.site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--sp-7);}}
@media(max-width:520px){.site-footer__grid{grid-template-columns:1fr;gap:var(--sp-8);}}

/* responsive header — hamburguesa entra antes para que el nav nunca se apriete */
@media(max-width:1024px){
  .nav,.header-cta{display:none;}
  .burger{display:inline-flex;}
}

/* ---------- 6 · COMPONENTES ---------- */
/* EYEBROW */
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);background:rgba(0,174,239,.1);color:var(--cyan-deep);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;
  padding:0.7rem 1.4rem;border-radius:var(--r-pill);}
.eyebrow.on-navy{background:rgba(0,174,239,.1);color:#7FDCFF;}

/* BOTONES */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-body);font-weight:700;font-size:var(--fs-body);line-height:1;
  padding:1.5rem 2.6rem;border-radius:var(--r-pill);border:0.15rem solid transparent;cursor:pointer;
  transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;white-space:nowrap;}
.btn:hover{transform:translateY(-0.1rem);}
.btn-primary{background:var(--cyan);color:#fff;box-shadow:var(--shadow-cta);}/* texto BLANCO por decisión de Estéfano (preferencia de marca). NO cambiar a navy: ya se probó por contraste (blanco/cyan 2.5:1 < AA) y se descartó a propósito. */
.btn-primary:hover{background:#00A0DC;}
.btn-outline{background:transparent;border-color:var(--line-strong);color:var(--navy);}
.btn-outline:hover{border-color:var(--navy);}
.btn-outline.on-navy{border-color:rgba(255,255,255,.4);color:#fff;}
.btn-outline.on-navy:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.btn-ghost{background:transparent;color:var(--cyan-deep);padding-inline:0;}

/* link con flecha */
.arrow-link{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--cyan-deep);font-weight:600;font-size:var(--fs-sm);}
.arrow-link::after{content:"→";transition:transform .15s;}
.arrow-link:hover::after{transform:translateX(0.3rem);}

/* CARD base */
.card{background:var(--paper);border:0.1rem solid var(--line);border-radius:var(--r-lg);padding:var(--sp-7);box-shadow:var(--shadow-1);}
.card-hover{transition:box-shadow .2s,transform .2s;}
.card-hover:hover{box-shadow:var(--shadow-2);transform:translateY(-0.3rem);}

/* CHIP / pill informativa */
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-body);font-weight:500;font-size:var(--fs-2xs);letter-spacing:.01em;
  color:var(--navy);background:var(--paper-1);border:0.1rem solid var(--line);border-radius:var(--r-pill);padding:0.6rem 1.3rem;}
.chip .dot{width:0.7rem;height:0.7rem;border-radius:50%;background:var(--cyan);}
.chip.on-navy{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);}
.chip.cyan{color:var(--cyan-deep);background:var(--cyan-wash);border-color:rgba(0,174,239,.28);}
/* etiqueta discreta para contenido aún no final (testimonios de ejemplo): muted,
   no invasiva (antes era una pastilla ámbar de advertencia que robaba atención). */
.ph-pill{display:inline-flex;align-self:flex-start;align-items:center;gap:0.55rem;width:fit-content;
  font-family:var(--font-body);font-weight:500;font-size:1.0rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  padding:0.45rem 0.9rem;border-radius:var(--r-pill);background:rgba(21,37,85,.045);color:var(--slate-soft);
  border:0.1rem solid var(--line);white-space:nowrap;vertical-align:middle;}
.ph-pill::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:var(--slate-soft);opacity:.55;flex:0 0 auto;}

/* ICONO en tile hairline, surface-aware (DS-icon v2)
   estructura del glifo = currentColor (navy en claro, blanco en oscuro)
   acento = cian fijo (#00AEEF, dentro del SVG). Sin relleno tintado. */
.icon-box{width:5.2rem;height:5.2rem;flex:0 0 auto;border-radius:var(--r-md);
  background:transparent;border:0.1rem solid rgba(21,37,85,.12);
  color:var(--navy);display:grid;place-items:center;}
.icon-box svg{width:3rem;height:3rem;display:block;}
.icon-box img{width:3rem;height:3rem;}
.icon-box.sm{width:4.4rem;height:4.4rem;border-radius:var(--r-sm);}
.icon-box.sm svg,.icon-box.sm img{width:2.4rem;height:2.4rem;}
/* superficie oscura: estructura blanca + borde claro */
[data-chrome="dark"] .icon-box,.bg-navy .icon-box,.icon-box.on-navy{
  border-color:rgba(255,255,255,.16);color:#fff;}
/* Compensación de contraste del trazo (global, para todos los pictogramas):
   el mismo stroke se ve más fino en navy sobre claro que en blanco sobre navy.
   En claro se engruesa un punto; en oscuro se mantiene, para que el peso luzca
   igual entre tarjetas. Requiere que los pictos compartan viewBox (~36). */
.icon-box svg [stroke]{stroke-width:2.6;}
[data-chrome="dark"] .icon-box svg [stroke],
.bg-navy .icon-box svg [stroke],
.icon-box.on-navy svg [stroke],
.path.dark .icon-box svg [stroke]{stroke-width:2.25;}

/* credenciales / dato mono */
.cred{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.05em;color:var(--slate-soft);}
.bg-navy .cred{color:rgba(255,255,255,.6);}

/* ---------- 7 · UTILIDADES ---------- */
.center{text-align:center;}
.mt-0{margin-top:0;}
.relative{position:relative;}
[hidden]{display:none!important;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}