/* ==========================================================================
   Portal REPSE — sistema de diseño «producto oscuro»
   Superficies oscuras para hero, producto y cierre; claras para el long-form.
   Un solo archivo, sin build, sin dependencias.
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol[class]{list-style:none;padding:0}
img,picture,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

/* ---------- Tokens ---------- */
:root{
  /* superficies oscuras */
  --d-950:#050B14;
  --d-900:#08111F;
  --d-850:#0C1929;
  --d-800:#122236;
  --d-750:#1A2F47;
  --d-line:rgba(160,196,238,.13);
  --d-line-2:rgba(160,196,238,.24);
  --d-text:#EAF1F9;
  --d-body:#9FB2C8;
  --d-mute:#6E8299;

  /* superficies claras */
  --l-bg:#FFFFFF;
  --l-bg-2:#F4F7FB;
  --l-bg-3:#E9F0F8;
  --l-line:#E1E9F3;
  --l-line-2:#C6D3E3;
  --ink:#0A1421;
  --ink-2:#1C2C40;
  --body:#4A5B70;
  --mute:#6B7D93;

  /* marca + semántica */
  /* Azules del logo BIMETRICS: #005090 (barra profunda) y #6C8CBC (barra clara) */
  --accent:#0B63B4;          /* azul de acción */
  --accent-lit:#5FA6EE;      /* sobre oscuro */
  --accent-ink:#005090;      /* exacto del logo — legible sobre claro */
  --accent-soft:#E8F1FB;
  --accent-steel:#6C8CBC;    /* exacto del logo — acentos secundarios */
  --brand-graphite:#383838;  /* gris del wordmark */

  --risk:#E5484D;            /* exposición — sobre oscuro */
  --risk-ink:#C0272D;        /* sobre claro */
  --risk-soft:#FDECEC;
  --warn:#F5A524;
  --warn-ink:#A96A05;
  --warn-soft:#FEF4E3;
  --ok:#3ECF8E;
  --ok-ink:#0F7A52;
  --ok-soft:#E6F7EF;

  /* La fuente se carga sin bloquear el render; hasta que llega manda la pila
     del sistema, que en Windows y macOS ya es moderna. */
  --sans:'Instrument Sans','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,'Cascadia Mono','Segoe UI Mono',Menlo,Consolas,monospace;

  --wrap:1240px;
  --measure:68ch;
  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:24px;

  --sh-1:0 1px 2px rgba(10,20,33,.05),0 4px 12px -4px rgba(10,20,33,.08);
  --sh-2:0 2px 4px rgba(10,20,33,.04),0 14px 34px -12px rgba(10,20,33,.16);
  --sh-3:0 4px 8px rgba(10,20,33,.05),0 34px 70px -24px rgba(10,20,33,.3);
  --sh-app:0 2px 6px rgba(5,11,20,.28),0 30px 70px -20px rgba(5,11,20,.55),0 90px 140px -60px rgba(5,11,20,.6);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
body{
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.62;
  font-weight:400;
  color:var(--body);
  background:var(--l-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","cv01";
}
@media (max-width:640px){body{font-size:16px}}

h1,h2,h3,h4{color:var(--ink);font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(2rem,1.3rem + 2.35vw,2.95rem);line-height:1.06;letter-spacing:-.032em;font-weight:600}

h2{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.5rem);line-height:1.1;letter-spacing:-.028em}
h3{font-size:clamp(1.1rem,1rem + .48vw,1.28rem);line-height:1.3;letter-spacing:-.016em;font-weight:600}
h4{font-size:1rem;font-weight:600;letter-spacing:-.01em}

p{max-width:var(--measure)}
strong,b{font-weight:600;color:var(--ink)}
small{font-size:.85rem}
.num,.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

a.link,.prose a{
  color:var(--accent-ink);font-weight:500;
  box-shadow:inset 0 -1px 0 0 color-mix(in srgb,var(--accent-ink) 32%,transparent);
  transition:box-shadow .18s var(--ease),color .18s var(--ease);
}
a.link:hover,.prose a:hover{box-shadow:inset 0 -1.5px 0 0 var(--accent-ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
.wrap-narrow{max-width:820px}

/* ---------- Cabecera de artículo ----------
   Dos columnas: el titular y la entradilla a la izquierda, el índice a la
   derecha. Antes esa mitad derecha estaba vacía en las cinco páginas largas. */
.article-head{padding-block:clamp(26px,3vw,44px) clamp(30px,3.4vw,50px)}
.article-head-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(230px,22vw,290px));
  gap:clamp(30px,4vw,68px);align-items:start;
}
.article-head-copy{min-width:0;max-width:44rem}
.article-head-copy>h1{max-width:none;margin-bottom:0;text-wrap:pretty}
.article-head-copy>p:not(.meta-line):not(.eyebrow),.article-head-copy .stack p{max-width:62ch}
.article-head-copy .meta-line{max-width:none}
@media (max-width:980px){
  .article-head-grid{grid-template-columns:1fr;gap:clamp(24px,3.4vw,34px)}
}

.toc{
  position:sticky;top:96px;
  border-left:2px solid var(--l-line);padding-left:clamp(14px,1.4vw,20px);
}
.toc-tit{
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.95em;
}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:.62em;counter-reset:toc}
.toc li{counter-increment:toc;display:flex;gap:.65em;align-items:baseline}
.toc li::before{
  content:counter(toc,decimal-leading-zero);
  font-size:.66rem;font-weight:600;color:var(--l-line-2);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
.toc a{
  font-size:.845rem;line-height:1.4;color:var(--body);
  transition:color .16s var(--ease);text-wrap:pretty;
}
.toc a:hover{color:var(--accent-ink)}
@media (max-width:980px){
  .toc{
    position:static;border-left:0;padding-left:0;padding-top:clamp(18px,2vw,24px);
    border-top:1px solid var(--l-line);
  }
  .toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em clamp(16px,2.4vw,30px)}
}
@media (max-width:560px){.toc ol{grid-template-columns:1fr}}

/* Las anclas no pueden quedar debajo de la cabecera pegajosa */
:is(h2,h3)[id]{scroll-margin-top:96px}

/* En las páginas con índice el cuerpo se alinea a la izquierda, igual que la
   cabecera. Centrado quedaba desalineado con el titular y desperdiciaba el
   margen izquierdo. */
/* El contenedor sigue centrado a 1240 px (para que el margen izquierdo
   coincida con el de la cabecera), y es el contenido de dentro el que se
   limita a la medida de lectura, alineado a la izquierda. */
.doc .wrap.wrap-narrow,.vp-pane.doc .wrap.wrap-narrow{max-width:var(--wrap);margin-inline:auto}
.doc .wrap.wrap-narrow>*,.vp-pane.doc .wrap.wrap-narrow>*{max-width:820px}
.doc .wrap>.wrap-narrow{margin-inline:0}
.section{padding-block:clamp(52px,6vw,92px)}
.section-tight{padding-block:clamp(38px,4.2vw,60px)}
.section--paper2{background:var(--l-bg-2)}
.section--line{border-top:1px solid var(--l-line)}

.stack>*+*{margin-top:1.05em}
.grid-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4.2vw,64px);align-items:center}
.grid-split--top{align-items:start}
@media (max-width:900px){.grid-split{grid-template-columns:1fr;gap:34px}}
/* Banda de una idea: rótulo a la izquierda, frase grande a la derecha */
.split-note{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);gap:clamp(24px,3.4vw,60px);align-items:start}
.split-note h3{font-size:clamp(1.02rem,.96rem + .3vw,1.16rem);color:var(--mute);font-weight:600;letter-spacing:-.01em;padding-top:.28em}
.split-note h2{font-size:clamp(1.5rem,1.15rem + 1.4vw,2.1rem);max-width:16ch}
.split-note .eyebrow{margin-bottom:.7em}
.split-note .stack{display:grid;gap:1.2em;max-width:60ch}
.split-note .stack p{max-width:none}
.split-note .lede{font-size:clamp(1.05rem,.97rem + .38vw,1.24rem);color:var(--ink-2);line-height:1.5;max-width:52ch;letter-spacing:-.01em;font-weight:400}
@media (max-width:900px){.split-note{grid-template-columns:1fr;gap:14px}.split-note .lede{max-width:none}}
.surface-dark .split-note h3{color:var(--d-mute)}
.surface-dark .split-note .lede{color:var(--d-text)}

/* ---------- Superficie oscura ----------
   Todo lo que va dentro de .surface-dark hereda la paleta oscura. */
.surface-dark{
  background:var(--d-900);
  color:var(--d-body);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.surface-dark h1,.surface-dark h2,.surface-dark h3,.surface-dark h4{color:#fff}
.surface-dark strong,.surface-dark b{color:#fff}
.surface-dark a.link{color:var(--accent-lit);box-shadow:inset 0 -1px 0 0 color-mix(in srgb,var(--accent-lit) 38%,transparent)}
.surface-dark a.link:hover{box-shadow:inset 0 -1.5px 0 0 var(--accent-lit)}
.surface-dark .eyebrow{color:var(--d-mute)}
.surface-dark .eyebrow::before{background:var(--accent-lit)}
.surface-dark .lede{color:var(--d-body)}

/* Malla de color + rejilla técnica de fondo */
.surface-dark::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:150%;z-index:-2;
  background:
    radial-gradient(48% 60% at 78% 2%,rgba(11,99,180,.26),transparent 62%),
    radial-gradient(42% 54% at 6% 96%,rgba(108,140,188,.16),transparent 64%),
    radial-gradient(64% 72% at 48% 122%,rgba(11,99,180,.18),transparent 70%);
  pointer-events:none;
}
.surface-dark::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
}

/* ---------- Etiqueta de sección ---------- */
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.15em;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);flex-shrink:0}

.lede{font-size:clamp(1.05rem,.99rem + .38vw,1.2rem);color:var(--body);line-height:1.58;font-weight:400}

/* ---------- Header ---------- */
/* Cabecera clara: el logo de Bimetrics vive sobre blanco, como en el manual
   de marca. El hero oscuro empieza justo debajo. */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--l-line);
  background:rgba(255,255,255,.95);
  box-shadow:0 1px 24px -12px rgba(10,20,33,.28);
}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);min-height:68px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-logo{width:auto;height:26px;flex-shrink:0;transition:opacity .18s var(--ease)}
.brand:hover .brand-logo{opacity:.78}
.site-footer .brand-logo{height:24px}
@media (max-width:420px){.brand-logo{height:22px}}

.nav-links{display:flex;align-items:center;gap:clamp(8px,1.1vw,15px);margin-left:auto}
.nav-links a{
  font-size:.905rem;font-weight:500;color:var(--body);
  padding:.45em .62em;border-radius:8px;white-space:nowrap;position:relative;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.nav-links a:hover{color:var(--ink);background:var(--l-bg-3)}
.nav-links a[aria-current="page"]{color:var(--accent-ink);font-weight:600}
.nav-links a:first-child{font-weight:600;color:var(--ink)}
.site-footer .nav-links a:first-child{color:inherit}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:.62em;right:.62em;bottom:.02em;height:2px;
  background:var(--accent);border-radius:2px;
}
.nav-toggle{
  display:none;background:var(--l-bg-2);border:1px solid var(--l-line-2);
  border-radius:9px;padding:.55em .7em;cursor:pointer;margin-left:auto;
}
.nav-toggle span{display:block;width:17px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),opacity .2s}
.nav-toggle span+span{margin-top:4.5px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.1px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.1px) rotate(-45deg)}

@media (max-width:1240px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:2px;margin-left:0;
    background:#fff;border-bottom:1px solid var(--l-line);
    padding:10px clamp(20px,5vw,44px) 22px;
    box-shadow:0 24px 48px -20px rgba(10,20,33,.3);
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:.85em .7em;font-size:1rem}
  .nav-links a[aria-current="page"]::after{display:none}
  .nav-links .btn{margin-top:12px;justify-content:center}
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:inherit;font-size:.92rem;font-weight:600;letter-spacing:-.012em;
  padding:.72em 1.3em;border-radius:9px;border:1px solid transparent;cursor:pointer;
  white-space:nowrap;position:relative;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),
             transform .2s var(--ease),box-shadow .25s var(--ease);
}
.btn-primary{
  background:linear-gradient(180deg,#1476CC,#0A5CA8);
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 6px 18px -6px rgba(11,99,180,.55);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 10px 26px -8px rgba(11,99,180,.75)}
.btn-ghost{background:rgba(255,255,255,.05);color:#fff;border-color:var(--d-line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--l-line-2)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 6px 20px -8px rgba(0,0,0,.55)}
.btn-light:hover{transform:translateY(-1px);background:#EFF4FA;border-color:#EFF4FA;box-shadow:0 12px 28px -10px rgba(0,0,0,.6)}
.btn-outline:hover{border-color:var(--ink);background:var(--l-bg-2)}
.btn-lg{font-size:.98rem;padding:.86em 1.6em}
/* En pantallas angostas los CTA largos parten línea en vez de desbordar */
@media (max-width:620px){
  .btn{white-space:normal;text-align:center}
  .hero .btn-row .btn,.cta .btn{width:100%}
}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hero .btn-row{gap:9px;flex-wrap:wrap}
.hero .btn-row .btn-lg{font-size:.87rem;padding:.78em 1.02em;letter-spacing:-.014em}
.nav-links .btn{padding:.62em 1.15em;flex-shrink:0;color:#fff;font-weight:600}
.nav-links .btn::after{display:none}
.nav-links .btn:hover{background:linear-gradient(180deg,#1A82DC,#0B63B4);color:#fff}

.arrow-link{
  display:inline-flex;align-items:center;gap:.42em;
  font-size:.92rem;font-weight:600;color:var(--accent-ink);
  transition:gap .22s var(--ease),color .18s var(--ease);
}
.arrow-link::after{content:"→";transition:transform .22s var(--ease)}
.arrow-link:hover{gap:.68em}
.surface-dark .arrow-link{color:var(--accent-lit)}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.8rem;color:var(--mute);padding-block:20px 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.45em;align-items:center;list-style:none;padding:0;margin:0}
.crumbs li{display:flex;align-items:center;gap:.45em}
.crumbs li+li::before{content:"/";color:var(--l-line-2)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--body)}
.surface-dark .crumbs{color:var(--d-mute)}
.surface-dark .crumbs li+li::before{color:var(--d-line-2)}
.surface-dark .crumbs a:hover{color:#fff}
.surface-dark .crumbs [aria-current]{color:var(--d-body)}

/* ---------- Hero ---------- */
/* Dos columnas: el titular grande y el tablero conviven en la primera pantalla. */
.hero{padding-block:clamp(30px,3vw,46px) clamp(38px,4vw,62px);overflow:hidden}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);
  gap:clamp(30px,3.6vw,60px);
  align-items:center;
}
@media (max-width:1020px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,44px)}
}

.hero-badge{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.78rem;font-weight:500;letter-spacing:-.005em;color:var(--d-body);
  background:linear-gradient(180deg,rgba(95,166,238,.14),rgba(95,166,238,.05));
  border:1px solid rgba(95,166,238,.26);
  padding:.4em .88em .4em .62em;border-radius:999px;margin-bottom:1.1em;
}
.hero-badge i{
  width:6px;height:6px;border-radius:50%;background:var(--accent-lit);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(95,166,238,.2);
}
.hero h1{
  margin-bottom:.44em;max-width:none;text-wrap:pretty;
  font-size:clamp(2rem,1.1rem + 2.35vw,2.78rem);
  line-height:1.06;letter-spacing:-.033em;
}
@media (max-width:1020px){.hero h1{max-width:24ch}}
.hero-lede{
  font-size:clamp(1rem,.95rem + .28vw,1.09rem);color:var(--d-body);
  margin-bottom:1.35em;max-width:none;line-height:1.56;
}
.hero-note{font-size:.815rem;color:var(--d-mute);margin-top:1.05em;max-width:none;line-height:1.55}
.hero-note a{color:var(--d-body);box-shadow:inset 0 -1px 0 0 var(--d-line-2)}
.hero-note a:hover{color:#fff}

/* Los tres puntos de valor: fila de tres bajo las dos columnas */
.hero-points{
  margin:clamp(30px,3.4vw,46px) 0 0;padding:clamp(20px,2.2vw,26px) 0 0;
  list-style:none;display:grid;gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--d-line);
}
@media (max-width:860px){.hero-points{grid-template-columns:1fr;gap:14px}}
.hero-points li{position:relative;padding-left:2em;font-size:.9rem;color:var(--d-body);line-height:1.5;max-width:40ch}
.hero-points li::before{
  content:"";position:absolute;left:0;top:.15em;width:19px;height:19px;border-radius:6px;
  background:rgba(95,166,238,.12);border:1px solid rgba(95,166,238,.3);
}
.hero-points li::after{
  content:"";position:absolute;left:6.4px;top:.48em;width:4px;height:8px;
  border-right:1.7px solid var(--accent-lit);border-bottom:1.7px solid var(--accent-lit);
  transform:rotate(42deg);
}

/* Captura del producto */
.app-shot{margin:0}
.app-shot-frame{position:relative}
.app-shot img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh-app)}
.app-shot-frame::before{
  content:"";position:absolute;inset:-20% -12% -20% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 50% at 52% 42%,rgba(11,99,180,.4),transparent 72%);
  filter:blur(40px);
}
.app-shot-caption{font-size:.75rem;color:var(--d-mute);margin-top:3.3em;text-align:right}
/* En el hero la captura puede salirse un poco del contenedor: más presencia,
   sin scroll horizontal porque .hero lleva overflow:hidden. */
@media (min-width:1021px){
  .hero-grid .app-shot{width:calc(100% + clamp(0px,5vw,66px))}
}

.float-card{
  position:absolute;left:clamp(-26px,-2vw,-10px);bottom:-26px;width:min(232px,46%);
  background:rgba(10,20,33,.93);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--d-line-2);border-radius:var(--r);
  padding:13px 16px;
  box-shadow:0 22px 50px -14px rgba(0,0,0,.82);
}
.float-card-label{font-size:.655rem;letter-spacing:.09em;text-transform:uppercase;color:var(--d-mute);font-weight:700;margin-bottom:.4em}
.float-card-value{font-size:1.6rem;font-weight:600;color:var(--risk);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.float-card-foot{font-size:.7rem;color:var(--d-mute);margin-top:.45em;line-height:1.4}
@media (max-width:860px){.float-card{width:min(206px,58%);bottom:-24px;padding:11px 13px}.float-card-value{font-size:1.35rem}}
@media (max-width:520px){.float-card{display:none}.app-shot-caption{margin-top:1em}}
.float-chip{
  position:absolute;right:clamp(-8px,-1vw,0px);top:-16px;
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.74rem;font-weight:600;color:var(--d-text);
  background:rgba(10,20,33,.92);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--d-line-2);border-radius:999px;
  padding:.5em .95em;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.8);
}
.float-chip i{width:6px;height:6px;border-radius:50%;background:var(--warn);flex-shrink:0;box-shadow:0 0 0 3px rgba(245,165,36,.2)}
@media (max-width:860px){.float-chip{top:-12px;font-size:.7rem}}
@media (max-width:520px){.float-chip{display:none}}

/* ---------- Tablero KPI (widget en HTML) ----------
   Por defecto CLARO. La variante oscura se activa dentro de .surface-dark,
   que es donde vive el tablero del home. Al revés se rompía el formulario
   de contacto, que usa .panel sobre fondo claro. */
.panel{
  background:var(--l-bg);border:1px solid var(--l-line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-2);
}
.panel-head{display:flex;align-items:center;gap:.7rem;padding:16px 20px;border-bottom:1px solid var(--l-line);background:var(--l-bg-2)}
.panel-mark{width:auto;height:26px;flex-shrink:0;background:none;border-radius:0}
.panel-title{font-size:.94rem;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.015em}
.panel-sub{font-size:.76rem;color:var(--mute);line-height:1.3}
.panel-body{padding:18px 20px 20px}
.panel-body h2,.panel-body h3{color:var(--ink)}
.panel-foot{font-size:.755rem;color:var(--mute);padding:13px 20px;background:var(--l-bg-2);border-top:1px solid var(--l-line);line-height:1.5}
.panel-foot a{color:var(--accent-ink)}

.alert-bar{
  display:flex;gap:.75rem;align-items:flex-start;
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
  padding:12px 15px;border-radius:var(--r-sm);margin-bottom:16px;
}
.alert-bar-icon{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;margin-top:1px;
  background:var(--warn);color:#2A1A00;display:grid;place-items:center;
  font-size:.7rem;font-weight:700;line-height:1;
}
.alert-bar p{font-size:.845rem;line-height:1.5;color:var(--body);margin:0;max-width:none}
.alert-bar strong{color:var(--warn-ink)}

.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.kpi{border:1px solid var(--l-line);border-radius:var(--r);padding:13px 14px;background:var(--l-bg-2);position:relative;overflow:hidden}
.kpi-label{font-size:.665rem;letter-spacing:.085em;text-transform:uppercase;color:var(--mute);font-weight:700;line-height:1.35;margin-bottom:.45em}
.kpi-value{font-size:1.85rem;line-height:1;color:var(--ink);letter-spacing:-.035em;font-weight:600;font-variant-numeric:tabular-nums}
.kpi-foot{font-size:.71rem;color:var(--mute);margin-top:.5em;line-height:1.35}
.kpi--risk .kpi-value{color:var(--risk-ink)}
.kpi--warn .kpi-value{color:var(--warn-ink)}
.kpi--ok .kpi-value{color:var(--ok-ink)}

.exposure{margin-top:16px;border-top:1px solid var(--l-line);padding-top:14px}
.exposure-title{font-size:.665rem;letter-spacing:.085em;text-transform:uppercase;color:var(--mute);margin-bottom:.75em;font-weight:700;max-width:none}
.exposure-row{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.42em 0;font-size:.855rem;border-bottom:1px solid var(--l-line)}
.exposure-row:last-child{border-bottom:0}
.exposure-row span:first-child{color:var(--body)}
.exposure-row span:last-child{font-weight:600;color:var(--risk-ink);font-variant-numeric:tabular-nums;white-space:nowrap}

.bars{display:grid;gap:.6em}
.bar-row{display:grid;grid-template-columns:minmax(110px,1.5fr) minmax(70px,2.4fr) auto;gap:.8em;align-items:center;font-size:.82rem;color:var(--body)}
.bar{position:relative;height:6px;border-radius:3px;background:var(--l-bg-3);overflow:hidden;display:block}
.bar i{position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--ok-ink);border-radius:3px;display:block}
.bar--warn i{background:var(--warn-ink)}
.bar--risk i{background:var(--risk-ink)}
.bar-row b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);font-size:.8rem}
@media (max-width:560px){.bar-row{grid-template-columns:1fr auto;gap:.3em .8em}.bar-row .bar{grid-column:1/-1;order:3}}

/* --- Variante oscura, dentro de .surface-dark --- */
.surface-dark .panel{background:var(--d-850);border-color:var(--d-line);box-shadow:0 24px 60px -22px rgba(0,0,0,.6)}
.surface-dark .panel-head{border-color:var(--d-line);background:rgba(255,255,255,.02)}
.surface-dark .panel-title{color:#fff}
.surface-dark .panel-sub,
.surface-dark .panel-foot,
.surface-dark .kpi-label,
.surface-dark .kpi-foot,
.surface-dark .exposure-title{color:var(--d-mute)}
.surface-dark .panel-foot{background:rgba(0,0,0,.22);border-color:var(--d-line)}
.surface-dark .panel-foot a{color:var(--accent-lit)}
.surface-dark .kpi{
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border-color:var(--d-line);
}
.surface-dark .kpi::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.surface-dark .kpi-value{color:#fff}
.surface-dark .kpi--risk .kpi-value{color:var(--risk)}
.surface-dark .kpi--warn .kpi-value{color:var(--warn)}
.surface-dark .kpi--ok .kpi-value{color:var(--ok)}
.surface-dark .alert-bar{background:rgba(245,165,36,.09);border-color:rgba(245,165,36,.24)}
.surface-dark .alert-bar p{color:var(--d-body)}
.surface-dark .alert-bar strong{color:#F7C46B}
.surface-dark .exposure{border-color:var(--d-line)}
.surface-dark .exposure-row{border-color:rgba(255,255,255,.045)}
.surface-dark .exposure-row span:first-child{color:var(--d-body)}
.surface-dark .exposure-row span:last-child{color:var(--risk)}
.surface-dark .bar{background:rgba(255,255,255,.08)}
.surface-dark .bar-row{color:var(--d-body)}
.surface-dark .bar-row b{color:#fff}
.surface-dark .bar i{background:var(--ok)}
.surface-dark .bar--warn i{background:var(--warn)}
.surface-dark .bar--risk i{background:var(--risk)}

/* ---------- Logos de clientes ---------- */
.logos{padding-block:clamp(30px,3.6vw,48px);border-top:1px solid var(--d-line)}
.logos-title{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--d-mute);font-weight:600;text-align:center;margin-bottom:1.9em}
.logo-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(18px,2.4vw,30px) clamp(26px,3.6vw,52px)}
/* Cada logo lleva su tamaño en los atributos width/height, calculado para que
   todos ocupen la misma área de tinta. Con una altura común, un logo cuadrado
   se ve diminuto al lado de uno muy alargado. */
.logo-grid img{
  max-width:38vw;object-fit:contain;
  opacity:.5;transition:opacity .3s var(--ease);
}
.logo-grid img:hover{opacity:.92}
@media (max-width:600px){.logo-grid img{zoom:.82}}
/* Cuando la franja va en claro */
/* Los logos son siluetas blancas con alfa: la franja va siempre en oscuro. */

/* ---------- Tarjetas ---------- */
.cards{display:grid;gap:clamp(12px,1.4vw,16px)}
.cards-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* Bento de 5: fila de 3 arriba; abajo uno ancho + uno normal. Sin huecos. */
.cards-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards-bento .card ul{gap:.34em;margin-top:.85em}
.cards-bento .card ul li{font-size:.855rem;line-height:1.45}
.cards-bento .card>p{font-size:.9rem;line-height:1.5}
.cards-bento>:nth-child(4){grid-column:span 2}
@media (max-width:1000px){
  .cards-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-bento>:nth-child(4),.cards-bento>:nth-child(5){grid-column:span 2}
}
@media (max-width:640px){
  .cards-bento{grid-template-columns:1fr}
  .cards-bento>*{grid-column:auto}
}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.card{
  background:var(--l-bg);border:1px solid var(--l-line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.card:hover{border-color:var(--l-line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.card h3{margin-bottom:.5em}
.card p{font-size:.94rem;color:var(--body);max-width:none}
.card ul{margin-top:1em;display:grid;gap:.5em}
.card ul li{font-size:.89rem;color:var(--body);padding-left:1.15em;position:relative;line-height:1.5}
.card ul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.5}
.card-num{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  font-size:.78rem;font-weight:700;margin-bottom:1.05em;
  color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}

/* Tarjetas en oscuro (bento) */
.surface-dark .card{
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border-color:var(--d-line);
}
.surface-dark .card:hover{border-color:var(--d-line-2);box-shadow:0 20px 44px -18px rgba(0,0,0,.6);transform:translateY(-3px)}
.surface-dark .card p{color:var(--d-body)}
.surface-dark .card ul li{color:var(--d-body)}
.surface-dark .card ul li::before{background:var(--accent-lit);opacity:.65}
.surface-dark .card-num{color:var(--accent-lit);background:rgba(95,166,238,.12);border-color:rgba(95,166,238,.26)}

/* ---------- Lista de documentos ---------- */
.doclist{display:grid;gap:0;border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg);overflow:hidden}
.doclist li{
  position:relative;
  display:flex;gap:.8em;align-items:flex-start;
  padding:.82em clamp(16px,2vw,22px);border-bottom:1px solid var(--l-line);
  font-size:.93rem;color:var(--body);line-height:1.5;
  transition:background .18s var(--ease);
}
.doclist li:last-child{border-bottom:0}
.doclist li:hover{background:var(--l-bg-2)}
.doclist li::before{
  content:"";flex-shrink:0;width:16px;height:16px;margin-top:.2em;border-radius:5px;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
}
.doclist li::after{
  content:"";position:absolute;left:calc(clamp(16px,2vw,22px) + 5.4px);top:1.12em;
  width:4px;height:7.5px;
  border-right:1.7px solid var(--accent-ink);border-bottom:1.7px solid var(--accent-ink);
  transform:rotate(42deg);
}
.doclist-group::after{display:none}
.surface-dark .doclist li::before{background:rgba(95,166,238,.14);border-color:rgba(95,166,238,.32)}
.surface-dark .doclist li::after{border-color:var(--accent-lit)}
.surface-dark .doclist li:hover{background:rgba(255,255,255,.045)}
.doclist-group{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--mute);
  padding:1.1em clamp(16px,2vw,22px) .5em;background:var(--l-bg-2);border-bottom:1px solid var(--l-line);
}
.doclist-group::before{display:none}
.surface-dark .doclist{background:rgba(255,255,255,.03);border-color:var(--d-line)}
.surface-dark .doclist li{color:var(--d-body);border-color:var(--d-line)}
.surface-dark .doclist-group{background:rgba(0,0,0,.24);color:var(--d-mute);border-color:var(--d-line)}

/* ---------- Tablas ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--l-line);border-radius:var(--r-lg);background:var(--l-bg);position:relative}
.table-scroll table{min-width:580px}
.tbl th,.tbl td{padding:.82em 1.05em;text-align:left;border-bottom:1px solid var(--l-line);font-size:.885rem;line-height:1.5;vertical-align:top}
.tbl thead th{
  font-size:.685rem;letter-spacing:.085em;text-transform:uppercase;font-weight:700;
  color:var(--mute);background:var(--l-bg-2);white-space:nowrap;border-bottom:1px solid var(--l-line-2);
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--l-bg-2)}
.tbl td:first-child{font-weight:600;color:var(--ink)}
.tbl .num{white-space:nowrap}

/* Chips de estado */
.chip{display:inline-block;font-size:.735rem;font-weight:600;padding:.2em .62em;border-radius:6px;white-space:nowrap;letter-spacing:-.005em}
.chip-ok{background:var(--ok-soft);color:var(--ok-ink)}
.chip-warn{background:var(--warn-soft);color:var(--warn-ink)}
.chip-risk{background:var(--risk-soft);color:var(--risk-ink)}
.chip-neutral{background:var(--l-bg-3);color:var(--body)}
.surface-dark .chip-ok{background:rgba(62,207,142,.14);color:var(--ok)}
.surface-dark .chip-warn{background:rgba(245,165,36,.14);color:var(--warn)}
.surface-dark .chip-risk{background:rgba(229,72,77,.15);color:var(--risk)}

/* Calendario de cumplimiento */
.tbl-cal td:not(:first-child):not(:last-child):not(.num){text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.tbl-cal .c0{background:#F7D4D5;color:#8E1418}
.tbl-cal .c1{background:#FBE3E4;color:#A82026}
.tbl-cal .c2{background:#FDEFD8;color:#8A5304}
.tbl-cal .c3{background:#E1F4E9;color:#166B47}
.tbl-cal .c4{background:#C9EDDA;color:#0D5335}
.cal-key{display:inline-flex;align-items:center;gap:.32em;margin-left:.85em;white-space:nowrap}
.cal-key i{width:11px;height:11px;border-radius:3px;display:inline-block}
.cal-key i.c0{background:#F7D4D5}.cal-key i.c1{background:#FBE3E4}.cal-key i.c2{background:#FDEFD8}
.cal-key i.c3{background:#E1F4E9}.cal-key i.c4{background:#C9EDDA}

/* ---------- Cita y callouts ---------- */
.pull{
  font-size:clamp(1.2rem,1.05rem + .68vw,1.62rem);
  line-height:1.34;color:var(--ink);letter-spacing:-.026em;font-weight:500;
  max-width:24ch;padding-left:1.1em;border-left:2px solid var(--accent);
}
.surface-dark .pull{color:#fff;border-color:var(--accent-lit)}
.callout{
  background:var(--l-bg);border:1px solid var(--l-line);border-left:3px solid var(--warn);
  border-radius:var(--r);padding:clamp(18px,2vw,26px);
}
.callout--risk{border-left-color:var(--risk-ink)}
.callout--accent{border-left-color:var(--accent)}
.callout h3{font-size:1rem;margin-bottom:.5em}
.callout p{font-size:.93rem;color:var(--body)}
.surface-dark .callout{background:rgba(255,255,255,.04);border-color:var(--d-line);border-left-color:var(--warn)}
.surface-dark .callout p{color:var(--d-body)}

/* ---------- Figuras ---------- */
.shot{margin-block:clamp(24px,3vw,40px)}
.shot img{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--sh-2)}
.shot figcaption{font-size:.8rem;color:var(--mute);margin-top:.9em;line-height:1.5;max-width:66ch}
.shot--framed{
  background:linear-gradient(150deg,var(--d-900),var(--d-850) 60%,#0E2A26);
  padding:clamp(16px,2.4vw,34px);border-radius:var(--r-xl);border:1px solid var(--l-line);
  position:relative;overflow:hidden;
}
.shot--framed::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 78% 0%,rgba(11,99,180,.22),transparent 68%);
}
.shot--framed img{box-shadow:var(--sh-app);border-radius:var(--r);position:relative}
.shot--framed figcaption{color:var(--d-mute);text-align:center;margin-inline:auto;position:relative}
.surface-dark .shot img{box-shadow:var(--sh-app)}
.surface-dark .shot figcaption{color:var(--d-mute)}

/* ---------- Documento anotado ---------- */
.docfig{background:var(--l-bg);border:1px solid var(--l-line);border-radius:var(--r-xl);padding:clamp(16px,2.2vw,30px);box-shadow:var(--sh-1)}
.docfig svg{width:100%;height:auto;display:block}
.docfig figcaption{font-size:.8rem;color:var(--mute);margin-top:1em;line-height:1.55;max-width:none}
.docfig-legend{display:grid;gap:.6em;margin-top:1.3em;padding-top:1.2em;border-top:1px solid var(--l-line)}
.docfig-legend li{display:flex;gap:.7em;align-items:flex-start;font-size:.875rem;color:var(--body);line-height:1.5}
.docfig-legend b{
  flex-shrink:0;width:21px;height:21px;border-radius:7px;
  background:var(--accent-ink);color:#fff;display:grid;place-items:center;
  font-size:.7rem;font-weight:700;margin-top:.08em;
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--l-line)}
.faq details{border-bottom:1px solid var(--l-line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1.2em;
  padding:1.05em 0;cursor:pointer;list-style:none;
  font-size:1rem;font-weight:600;color:var(--ink);line-height:1.45;letter-spacing:-.014em;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex-shrink:0;width:20px;height:20px;margin-top:.15em;border-radius:6px;
  background:var(--l-bg-2);border:1px solid var(--l-line);position:relative;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .3s var(--ease);
  background-image:
    linear-gradient(var(--mute),var(--mute)),
    linear-gradient(var(--mute),var(--mute));
  background-size:9px 1.5px,1.5px 9px;
  background-position:center,center;background-repeat:no-repeat;
}
.faq summary:hover{color:var(--accent-ink)}
.faq summary:hover::after{border-color:var(--l-line-2);background-color:var(--l-bg-3)}
.faq details[open] summary::after{background-size:9px 1.5px,1.5px 0;transform:rotate(180deg)}
.faq-answer{padding:0 0 1.4em;max-width:var(--measure)}
.faq-answer p{font-size:.95rem;color:var(--body)}
.faq-answer p+p{margin-top:.8em}
.faq-group{
  font-size:1.2rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;
  padding:2em 0 .85em;border-bottom:1px solid var(--l-line-2);
}
.faq-group:first-child{padding-top:.3em}

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(150deg,var(--d-900),var(--d-850) 52%,#123356);
  color:var(--d-body);border-radius:var(--r-xl);
  padding:clamp(32px,4.4vw,60px);position:relative;overflow:hidden;
  border:1px solid rgba(160,196,238,.1);
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,4vw,60px);align-items:center;
}
.cta-copy{min-width:0}
@media (max-width:900px){.cta{grid-template-columns:1fr;gap:26px}}
.cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 92% at 84% 4%,rgba(11,99,180,.42),transparent 64%),
             radial-gradient(46% 78% at 2% 100%,rgba(108,140,188,.22),transparent 68%);
}
.cta>*{position:relative}
.cta h2{color:#fff;margin-bottom:.5em;max-width:none}
.cta p{color:var(--d-body);font-size:1.02rem;margin-bottom:0;max-width:56ch}

/* ---------- Relacionados ---------- */
.related{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.related a{
  display:block;background:var(--l-bg);border:1px solid var(--l-line);border-radius:var(--r-lg);
  padding:22px 24px;position:relative;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.related a:hover{border-color:var(--l-line-2);transform:translateY(-3px);box-shadow:var(--sh-2)}
.related-kicker{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;margin-bottom:.6em}
.related h3{font-size:1.02rem;margin-bottom:.4em}
.related p{font-size:.87rem;color:var(--mute);max-width:none;line-height:1.5}
.surface-dark .related a{background:rgba(255,255,255,.04);border-color:var(--d-line)}
.surface-dark .related a:hover{border-color:var(--d-line-2);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.surface-dark .related-kicker{color:var(--accent-lit)}
.surface-dark .related p{color:var(--d-mute)}

/* ---------- Fuentes / disclaimers ---------- */
.sources{font-size:.87rem}

.sources ul{display:grid;gap:.48em;margin-top:1em}
.sources li{padding-left:1.1em;position:relative;color:var(--body);line-height:1.5}
.sources li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--l-line-2)}

/* Las citas a fuentes oficiales viven ahora en el pie, en una sola línea.
   Se quitó el bloque de cada página, pero los diez enlaces a .gob.mx siguen
   en el sitio: son la señal de autoridad de un sitio fiscal y legal. */
.disclaimer-bar{padding-block:clamp(22px,2.4vw,30px) clamp(26px,3vw,38px)}
.disclaimer-bar .disclaimer{max-width:none;font-size:.775rem;color:var(--mute);line-height:1.55;margin:0}
.footer-sources{
  display:flex;flex-wrap:wrap;gap:.4em 1.05em;align-items:baseline;
  max-width:none;margin-top:clamp(30px,3.4vw,44px);
  padding-top:clamp(20px,2.2vw,26px);border-top:1px solid var(--d-line);
  font-size:.755rem;line-height:1.5;
}
.footer-sources span{color:var(--d-mute);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.68rem}
.footer-sources a{color:var(--d-mute);transition:color .18s var(--ease)}
.footer-sources a:hover{color:var(--d-text)}
.disclaimer{font-size:.81rem;color:var(--mute);line-height:1.6;margin-top:1.5em;padding-top:1.2em;border-top:1px solid var(--l-line);max-width:78ch}
.meta-line{font-size:.79rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:.4em 1.1em;margin-bottom:1.6em}
.surface-dark .meta-line{color:var(--d-mute)}

/* ---------- Formulario ---------- */
.form-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.field{display:grid;gap:.4em}
.field-full{grid-column:1/-1}
.field label{font-size:.735rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.field input,.field select,.field textarea{
  background:var(--l-bg);border:1px solid var(--l-line-2);border-radius:9px;
  padding:.74em .85em;font-size:.94rem;width:100%;color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent);
}
.field textarea{resize:vertical;min-height:104px}
.form-note{font-size:.79rem;color:var(--mute);line-height:1.55;margin-top:1.1em}
.contact-facts{display:grid;gap:1.35em}
.contact-fact dt{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--mute);margin-bottom:.28em}
.contact-fact dd{margin:0;font-size:.96rem;color:var(--body);line-height:1.55}
.surface-dark .contact-fact dt{color:var(--d-mute)}
.surface-dark .contact-fact dd{color:var(--d-body)}

/* ---------- Footer ---------- */
.site-footer{background:var(--d-950);color:var(--d-mute);padding-block:clamp(48px,5.4vw,76px) 30px;font-size:.885rem;border-top:1px solid var(--d-line)}
.footer-grid{display:grid;gap:clamp(28px,4vw,54px);grid-template-columns:1.7fr 1fr 1fr 1fr}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;gap:28px}}
.footer-brand{max-width:34ch}
.footer-brand .brand{margin-bottom:.95em}
.footer-brand p{font-size:.875rem;line-height:1.6;color:var(--d-mute);max-width:none}
.footer-heading{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--d-mute);margin-bottom:1.1em;font-weight:700}
.site-footer ul{display:grid;gap:.62em}
.site-footer a{color:var(--d-body);transition:color .18s var(--ease)}
.site-footer a:hover{color:#fff}
.footer-bottom{
  margin-top:clamp(34px,4vw,54px);padding-top:22px;border-top:1px solid var(--d-line);
  display:flex;flex-wrap:wrap;gap:.7em 1.6em;justify-content:space-between;font-size:.79rem;color:var(--d-mute);
}

/* ---------- Utilidades ---------- */
.center{text-align:center}
.center p,.center .lede{margin-inline:auto}
.mb-lg{margin-bottom:clamp(26px,3.2vw,42px)}
.max-60{max-width:60ch}
.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}
.skip-link{position:absolute;top:-60px;left:12px;z-index:100;background:var(--accent);color:#fff;padding:.7em 1.1em;border-radius:0 0 9px 9px;font-weight:600;transition:top .2s}
.skip-link:focus{top:0}

/* ---------- Revelado ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
html.no-js .reveal,html:not(.js-ready) .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition-duration:.01ms}
}

/* ---------- Móvil ---------- */
@media (max-width:640px){
  h1{font-size:clamp(1.85rem,1.25rem + 2.8vw,2.3rem);line-height:1.08}
  .hero{padding-block:30px 40px}
  .hero-badge{margin-bottom:1.15em;font-size:.74rem}
  .hero-lede{font-size:1rem;line-height:1.5;margin-bottom:1.3em}
  .hero-points{gap:.65em;margin-bottom:1.5em}
  .hero-points li{font-size:.93rem;line-height:1.45;padding-left:1.65em}
  .hero-note{font-size:.82rem;margin-top:.85em}
  .btn-row{gap:10px}
  .btn-row .btn{width:100%}
  .section{padding-block:42px}
  .section-tight{padding-block:30px}
  .lede{font-size:1rem}
  .pull{font-size:1.14rem;max-width:none;padding-left:.9em}
  .kpi-grid{gap:8px}
  .kpi{padding:11px 12px}
  .kpi-value{font-size:1.5rem}
  .kpi-label{font-size:.62rem}
  .kpi-foot{font-size:.67rem}
  .faq summary{font-size:.95rem}
  .docfig{padding:13px}
  .cta{padding:26px 22px;border-radius:var(--r-lg)}
  .card{padding:19px 20px;border-radius:var(--r)}
  .shot--framed{padding:12px;border-radius:var(--r-lg)}
}

/* Aviso de desplazamiento en tablas anchas */
.table-scroll::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.94));
  opacity:0;transition:opacity .2s var(--ease);
}
@media (max-width:860px){.table-scroll::after{opacity:1}}

/* ---------- Impresión ---------- */
@media print{
  .site-header,.site-footer,.cta,.nav-toggle{display:none}
  body{background:#fff;font-size:11pt;color:#000}
  .surface-dark{background:#fff;color:#000}
  .surface-dark::before,.surface-dark::after{display:none}
  .reveal{opacity:1;transform:none}
}


/* ---------- Listas de prosa ---------- */
ol.stack{list-style:decimal;padding-left:1.35em}
ol.stack li{padding-left:.2em}
ol.stack li::marker{color:var(--mute);font-weight:600}
.surface-dark ol.stack li::marker{color:var(--d-mute)}
.faq-answer ul,.card p+ul{padding-left:0}

/* Bloques de texto centrados dentro de .wrap: sin doble sangría */
.wrap>.wrap-narrow{padding-inline:0}
.wrap.wrap-narrow.sources{margin-inline:0}

/* ---------------------------------------------------------------- WhatsApp
   Botón flotante. Existía en el sitio de WordPress y el aviso de privacidad
   sigue describiéndolo ("cuando haces clic en el botón de WhatsApp"), así que
   quitarlo dejó al aviso hablando de algo inexistente. Verde de marca a
   propósito: es la señal que la gente reconoce sin leer. */
.wa-flotante{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.wa-flotante svg{width:30px;height:30px;display:block}
.wa-flotante:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.26),0 3px 8px rgba(0,0,0,.16)}
.wa-flotante:focus-visible{outline:3px solid var(--accent-lit);outline-offset:3px}
@media (max-width:640px){
  .wa-flotante{right:14px; bottom:14px; width:52px; height:52px}
  .wa-flotante svg{width:28px;height:28px}
}
@media (prefers-reduced-motion:reduce){ .wa-flotante{transition:none} }
@media print{ .wa-flotante{display:none} }