/* ==========================================================================
   AUDANTRA · SISTEMA DE DISEÑO  (Inicio + Despachos)
   Marca: tinta #191723 · violeta #9575FC · cian #34BDE2 · menta #4FE5C2
   Titulares de dos tonos con punto final (.t-dim / .t-hi)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

:root {
  --bg: #0A0B18;
  --bg-2: #0D0F20;
  --ink: #191723;
  --panel: #121428;
  --s1: rgba(255,255,255,.035);
  --s2: rgba(255,255,255,.065);
  --line: rgba(255,255,255,.085);
  --line-2: rgba(255,255,255,.16);

  --tx: #F4F3FB;
  --tx-2: #BBBDD2;
  --tx-3: #8A8DA8;
  --dim: #A99BF0;

  --lav: #9575FC;
  --lav-2: #BCA9FF;
  --cyan: #34BDE2;
  --mint: #4FE5C2;
  --green: #00BE2B;
  --amber: #FFB84D;
  --red: #FF7A85;
  --grad: linear-gradient(100deg, #4FE5C2 0%, #34BDE2 45%, #9575FC 100%);

  --fd: 'Manrope', system-ui, -apple-system, sans-serif;
  --fb: 'Inter', system-ui, -apple-system, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 18px;
  --r-lg: 24px;
  --wrap: 1200px;
  --gut: 24px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

body.aud {
  margin: 0; background: var(--bg); color: var(--tx);
  font: 400 17px/1.6 var(--fb);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; position: relative;
}
/* grano sutil */
body.aud::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aud main, .aud .foot { position: relative; z-index: 1; }
:where(.aud) img { max-width: 100%; height: auto; }
:where(.aud) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(.aud) :where(ul, ol) { padding: 0; list-style: none; }
:where(.aud) a { color: inherit; }
:where(.aud) button { font: inherit; color: inherit; }
:where(.aud) code { font-family: var(--fm); }
.aud :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.aud ::selection { background: rgba(149,117,252,.45); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: clamp(64px, 7.5vw, 112px) 0; position: relative; }
.sec-tight { padding: 0 0 clamp(40px, 6vw, 80px); position: relative; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Tipografía ---------- */
.display { font: 600 clamp(38px, 5.3vw, 70px)/1.04 var(--fd); letter-spacing: -.04em; text-wrap: balance; }
.display span { display: block; }
.h2 { font: 600 clamp(30px, 4vw, 52px)/1.09 var(--fd); letter-spacing: -.035em; text-wrap: balance; }
.h3 { font: 600 clamp(23px, 2.7vw, 33px)/1.15 var(--fd); letter-spacing: -.03em; text-wrap: balance; }
.t-dim { color: var(--dim); }
.t-hi { color: #fff; }
.display em, .grad-tx { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin-bottom: 20px; }
.eyebrow::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--mint); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(20deg); }
.lead { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; color: var(--tx-2); max-width: 62ch; margin-top: 20px; text-wrap: pretty; }
.center .lead { margin-left: auto; margin-right: auto; }
.sec-head { max-width: 860px; margin-bottom: clamp(32px, 4vw, 52px); }
.link { color: var(--lav-2); text-underline-offset: 3px; }
.link:hover { color: #fff; }
.fund, .src { font: 400 11.5px/1.5 var(--fm); color: var(--tx-3); letter-spacing: .01em; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 15px/1 var(--fd); letter-spacing: -.01em; padding: 14px 22px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s; }
.btn .ic { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }
.btn-primary { background: #fff; color: #0C0D1C; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 14px 44px -12px rgba(149,117,252,.85), 0 6px 22px -10px rgba(79,229,194,.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 20px 56px -12px rgba(149,117,252,1), 0 8px 26px -8px rgba(79,229,194,.8); }
.btn-ghost { background: rgba(255,255,255,.045); border-color: var(--line-2); color: var(--tx); }
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }
.btn-lg { padding: 18px 26px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

.chip { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--fm); letter-spacing: .02em; color: var(--tx-2); padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--s1); }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(79,229,194,.18); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.8); } }

/* ---------- Aparición ---------- */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
/* Títulos y textos no esperan a la animación; solo entran las piezas visuales */
.js .sec-head.rv, .js .svc-tx.rv, .js .svc-inc-w.rv, .js .svc-k.rv, .js .svc-rows.rv, .js .svc-foot.rv, .js .sols-h.rv, .js .sv-who.rv, .js .nots.rv, .js .faq-list.rv, .js .reasons .rv, .js .trio-card.rv, .js .pcard.rv { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Spotlight en tarjetas ---------- */
[data-spot] { position: relative; }
[data-spot]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(149,117,252,.13), transparent 62%); }
[data-spot]:hover::after { opacity: 1; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.nav.stuck { background: rgba(10,11,24,.72); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--line); }
.nav-in { max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); height: 70px; display: flex; align-items: center; gap: 36px; }
.nav-logo { display: flex; flex: none; }
.nav-logo img { height: 27px; width: auto; display: block; }
.nav-links { display: flex; gap: 28px; margin-right: auto; }
.nav-links a, .nav-login { font-size: 14.5px; font-weight: 500; color: var(--tx-2); text-decoration: none; transition: color .2s; }
.nav-links a:hover, .nav-login:hover, .nav-links a.on { color: #fff; }
.nav-act { display: flex; align-items: center; gap: 20px; }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--s1); cursor: pointer; position: relative; padding: 0; }
.nav-burger i { position: absolute; left: 12px; right: 12px; height: 1.6px; background: #fff; border-radius: 2px; transition: transform .25s var(--ease), top .25s var(--ease); }
.nav-burger i:first-child { top: 16px; } .nav-burger i:last-child { top: 24px; }
.nav-burger[aria-expanded="true"] i:first-child { top: 20px; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] i:last-child { top: 20px; transform: rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; padding: 8px var(--gut) 22px; background: rgba(10,11,24,.96); border-bottom: 1px solid var(--line); }
.nav-mobile a { padding: 14px 2px; font: 600 17px var(--fd); text-decoration: none; border-bottom: 1px solid var(--line); }
.nav-mobile a:last-child { border-bottom: 0; color: var(--tx-2); }
.nav-progress { position: absolute; left: 0; bottom: -1px; height: 1.5px; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .9; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero { position: relative; padding: clamp(128px, 15vh, 176px) 0 0; text-align: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; }
.aurora.a1 { width: 620px; height: 620px; left: 50%; top: -260px; margin-left: -520px; background: #6C4BF0; animation: drift1 18s ease-in-out infinite alternate; }
.aurora.a2 { width: 540px; height: 540px; left: 50%; top: -180px; margin-left: 40px; background: #1F8FC0; opacity: .38; animation: drift2 22s ease-in-out infinite alternate; }
.aurora.a3 { width: 460px; height: 460px; left: 50%; top: 260px; margin-left: -230px; background: #26B99A; opacity: .16; animation: drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(90px, 50px, 0) scale(1.12); } }
@keyframes drift2 { to { transform: translate3d(-110px, 70px, 0) scale(.92); } }
.hero-orbit { position: absolute; left: 50%; top: -150px; width: 1180px; height: 1180px; margin-left: -590px; opacity: .3; }
.hero-orbit circle { fill: none; stroke-width: 1.2; stroke-linecap: round; transform-origin: 400px 400px; }
.hero-orbit .o1 { stroke: rgba(79,229,194,.55); animation: spin 90s linear infinite; }
.hero-orbit .o2 { stroke: rgba(52,189,226,.5); animation: spin 70s linear infinite reverse; }
.hero-orbit .o3 { stroke: rgba(149,117,252,.55); animation: spin 54s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-in { position: relative; z-index: 2; max-width: 1040px; }
.hero-in > * { animation: rise .8s var(--ease) both; }
.hero-in > :nth-child(2) { animation-delay: .06s; } .hero-in > :nth-child(3) { animation-delay: .14s; }
.hero-in > :nth-child(4) { animation-delay: .22s; } .hero-in > :nth-child(5) { animation-delay: .3s; }
.hero-chip { margin-bottom: 28px; }
.hero-sub { font-size: clamp(17.5px, 1.65vw, 21px); line-height: 1.55; color: var(--tx-2); max-width: 60ch; margin: 26px auto 0; text-wrap: pretty; }
.hero-cta { display: inline-flex; align-items: stretch; gap: 8px; margin-top: 38px; padding: 8px; border-radius: 22px; background: rgba(255,255,255,.055); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.hero-field { display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 4px 8px 4px 16px; cursor: text; }
.hero-field span { font-size: 12px; color: var(--tx-3); line-height: 1.2; }
.hero-field input { width: 198px; background: transparent; border: 0; outline: 0; color: #fff; font: 600 18px/1.3 var(--fd); padding: 2px 0 0; -moz-appearance: textfield; }
.hero-field input::placeholder { color: rgba(255,255,255,.34); font-weight: 500; }
.hero-field input::-webkit-outer-spin-button, .hero-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hero-note { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--tx-2); } .hero-note b { color: #fff; font-weight: 600; }
.hero-note a { color: var(--tx-2); text-underline-offset: 3px; margin-left: 6px; white-space: nowrap; }
.hero-note a:hover { color: #fff; }


/* Riel */
.rail { position: relative; z-index: 2; margin-top: clamp(56px, 7vw, 88px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 17px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); background: rgba(255,255,255,.015); }
.rail-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.rail:hover .rail-track { animation-play-state: paused; }
.rail-set { display: flex; flex: none; }
.rail-set span { display: inline-flex; align-items: center; gap: 14px; padding: 0 22px; font: 500 12px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.rail-set span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); opacity: .8; }
.rail-set span.alt { color: var(--lav-2); } .rail-set span.alt::before { background: var(--lav); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   2 · QUÉ ES
   ========================================================================== */
.analogy { max-width: 1020px; margin: 0 auto clamp(40px, 5vw, 64px); display: grid; gap: 14px; }
.an-row { display: grid; grid-template-columns: 1fr 56px 1.15fr 56px 1.7fr; align-items: center; }
.an-node { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--s1); min-height: 78px; display: flex; flex-direction: column; justify-content: center; }
.an-node small { font: 500 10.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.an-node b { display: flex; align-items: center; gap: 9px; font: 600 18px/1.25 var(--fd); letter-spacing: -.02em; margin-top: 8px; }
.an-line { height: 1px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); background-size: 12px 1px; }
.an-old { opacity: .62; }
.an-new .an-node { border-color: rgba(149,117,252,.4); background: linear-gradient(120deg, rgba(79,229,194,.07), rgba(149,117,252,.11)); }
.an-new .an-mid { border-color: rgba(79,229,194,.6); box-shadow: 0 0 0 4px rgba(79,229,194,.08), 0 20px 50px -20px rgba(79,229,194,.45); }
.an-new .an-line { height: 2px; background: repeating-linear-gradient(90deg, var(--mint) 0 6px, transparent 6px 12px); background-size: 12px 2px; animation: flow 1s linear infinite; }
@keyframes flow { to { background-position: 12px 0; } }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trio-card { padding: 30px 28px 32px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--s2), rgba(255,255,255,.01)); }
.trio-n { font: 500 12px var(--fm); color: var(--mint); letter-spacing: .1em; }
.trio-card h3 { font: 600 22px/1.2 var(--fd); letter-spacing: -.025em; margin: 14px 0 10px; }
.trio-card p { font-size: 15.5px; color: var(--tx-2); }

/* Soluciones: seis tarjetas a la vista, cada una con una muestra de su pantalla */
.sols-h { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.sols-h b { font: 600 19px/1.3 var(--fd); letter-spacing: -.02em; }
.sols-h span { font-size: 14.5px; color: var(--tx-3); }
.sols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sol { display: flex; flex-direction: column; min-width: 0; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, #14162B, #0F1123); overflow: hidden; }
.js .sol.rv.in { transition: opacity .8s var(--ease), transform .45s var(--ease), border-color .3s; }
.sol:hover { border-color: var(--line-2); transform: translateY(-3px) !important; }
.sol header { display: flex; align-items: center; gap: 12px; }
.sol-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.sol-ic .ic { width: 18px; height: 18px; }
.sol-orb { --s: 36px; }
.sol h3 { font: 600 18.5px/1.25 var(--fd); letter-spacing: -.02em; }
.sol > p { font-size: 14.5px; line-height: 1.55; color: var(--tx-2); margin: 12px 0 18px; }
.sol-ui { display: flex; flex-direction: column; justify-content: center; min-height: 122px; margin-top: auto; padding: 5px 12px; border-radius: 10px; background: var(--b-bg); color: var(--b-tx); font: 400 12.5px/1.45 var(--fb); box-shadow: 0 0 0 4px rgba(255,255,255,.03), 0 0 0 5px rgba(255,255,255,.06); }
.sol-ui .fc-r:first-child { border-top: 0; }
.sol-ui .fc-r code { color: var(--b-tx); }
.sol-ui .ev-q { font-weight: 600; line-height: 1.35; padding-top: 8px; }
.sol-ui .fc-tt { padding-top: 8px; } .sol-ui .fc-bar { margin: 6px 0 8px; }
.bdg.sw { position: relative; overflow: hidden; padding: 0; background: none; }
.bdg.sw span { display: grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 99px; }
.bdg.sw .mut { color: var(--b-tx2); background: var(--b-mut-bg); } .bdg.sw .ok { color: var(--b-ok); background: var(--b-ok-bg); }
.bdg.sw .t-b { position: absolute; inset: 0; opacity: 0; }
.sol.in .bdg.sw .t-b { animation: showup .4s 1.1s forwards; }
.mc { gap: 9px; padding: 12px; }
.mc-q { align-self: flex-end; max-width: 90%; padding: 7px 10px; border-radius: 10px 10px 3px 10px; background: var(--b-you); color: #fff; }
.mc-a { display: flex; gap: 8px; align-items: flex-start; } .mc-a .av { margin-top: 1px; }
.cs-steps { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 0 8px; border-top: 1px solid var(--b-line); font-size: 11.5px; color: var(--b-tx3); }
.cs-steps li { position: relative; padding-top: 14px; }
.cs-steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--b-track); z-index: 1; }
.cs-steps li::after { content: ""; position: absolute; left: 8px; right: 0; top: 3.5px; height: 1px; background: var(--b-line2); }
.cs-steps li:last-child::after { display: none; }
.cs-steps .is-done { color: var(--b-tx2); } .cs-steps .is-done::before { background: var(--b-ok); }
.cs-steps .is-now { color: var(--b-you); font-weight: 600; } .cs-steps .is-now::before { background: var(--b-you); box-shadow: 0 0 0 3px var(--b-you-bg); }
.ev { gap: 8px; padding: 12px; }
.ev-q { font-weight: 600; line-height: 1.35; }
.ev-o { display: flex; flex-wrap: wrap; gap: 5px; }
.ev-o span { font-size: 11px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--b-line2); color: var(--b-tx2); }
.ev-o .on { border-color: var(--b-you); background: var(--b-you-bg); color: var(--b-you); font-weight: 600; }
.ev small { font-size: 11.5px; color: var(--b-tx3); }

.plat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 28px; align-items: center; margin-top: 16px; padding: 22px 26px; border-radius: var(--r-lg); border: 1px solid rgba(149,117,252,.3); background: linear-gradient(100deg, rgba(79,229,194,.06), rgba(149,117,252,.11)); }
.plat-t { font-size: 15px; line-height: 1.55; color: var(--tx-2); }
.plat-t b { display: block; font: 600 17.5px/1.3 var(--fd); letter-spacing: -.02em; color: #fff; margin-bottom: 4px; }
.plat ul { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.plat li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 99px; font-size: 13.5px; color: #fff; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); white-space: nowrap; }
.plat li .ic { width: 15px; height: 15px; color: var(--mint); }
@media (max-width: 1020px) { .sols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plat { grid-template-columns: 1fr; gap: 16px; } .plat ul { justify-content: flex-start; } }
@media (max-width: 640px) { .sols { grid-template-columns: minmax(0, 1fr); } .sols-h { flex-direction: column; gap: 4px; } .plat { padding: 20px; } .plat li { white-space: normal; } }

.nots { margin-top: 22px; border: 1px dashed var(--line-2); border-radius: var(--r); padding: 22px 26px; display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; }
.nots-t { font: 500 11.5px/1.5 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.nots ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.nots li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; color: var(--tx-2); }
.nots li .ic { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: rgba(255,122,133,.14); color: var(--red); stroke-width: 2.4; margin-top: 1px; }
.nots b { color: #fff; font-weight: 600; }

/* ==========================================================================
   3 · PROBLEMA
   ========================================================================== */
.prob { background: linear-gradient(180deg, transparent, rgba(149,117,252,.045) 40%, transparent); }
.prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pcard { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); padding-bottom: 26px; overflow: hidden; }
.pcard h3 { font: 600 20.5px/1.25 var(--fd); letter-spacing: -.025em; padding: 24px 26px 0; }
.pcard p { padding: 12px 26px 0; font-size: 15px; color: var(--tx-2); }
.pcard .src { padding-top: 14px; font-size: 11.5px; color: var(--tx-3); }
.pviz { height: 190px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(80% 100% at 50% 0%, rgba(255,255,255,.05), transparent 70%); }

.pviz-radar { display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(7, 1fr); padding: 22px 26px; gap: 0; place-items: center; }
.pviz-radar b { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.2); animation: scan 5.6s linear infinite; animation-delay: calc(var(--x) * .35s - 5.6s); }
.pviz-radar b.hit { animation-name: scanhit; }
@keyframes scan { 0%, 6% { background: rgba(255,255,255,.75); transform: scale(1.5); } 14%, 100% { background: rgba(255,255,255,.2); transform: none; } }
@keyframes scanhit { 0%, 5% { background: #fff; transform: scale(1.6); box-shadow: none; } 9%, 78% { background: var(--amber); transform: scale(2); box-shadow: 0 0 0 5px rgba(255,184,77,.18), 0 0 18px rgba(255,184,77,.8); } 92%, 100% { background: rgba(255,255,255,.2); transform: none; box-shadow: none; } }
.pviz-radar .sweep { position: absolute; top: 0; bottom: 0; left: 0; width: 80px; background: linear-gradient(90deg, transparent, rgba(52,189,226,.22)); border-right: 1px solid rgba(52,189,226,.8); animation: sweep 5.6s linear infinite; }
@keyframes sweep { from { transform: translateX(-80px); } to { transform: translateX(460px); } }

.pviz-rule { display: flex; flex-direction: column; justify-content: flex-end; }
.rule-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end; height: 132px; padding: 0 26px; }
.rule-blocks span { height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(149,117,252,.9), rgba(149,117,252,.12)); transform-origin: 50% 100%; position: relative; }
.rule-blocks span:nth-child(2) { background: linear-gradient(180deg, rgba(122,140,245,.9), rgba(122,140,245,.12)); }
.rule-blocks span:nth-child(3) { background: linear-gradient(180deg, rgba(52,189,226,.9), rgba(52,189,226,.12)); }
.rule-blocks span:nth-child(4) { background: linear-gradient(180deg, rgba(79,229,194,.95), rgba(79,229,194,.12)); }
.js .rule-blocks span { transform: scaleY(0); transition: transform 1s var(--ease); }
.js .in .rule-blocks span { transform: none; }
.js .in .rule-blocks span:nth-child(2) { transition-delay: .15s; } .js .in .rule-blocks span:nth-child(3) { transition-delay: .3s; } .js .in .rule-blocks span:nth-child(4) { transition-delay: .45s; }
.rule-axis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 9px 26px 12px; border-top: 1px solid var(--line-2); font: 500 11px/1 var(--fm); color: var(--tx-2); position: relative; }
.rule-axis b { font-weight: 500; }
.rule-cap { position: absolute; left: 26px; top: 18px; font: 500 10.5px/1.5 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }

.sc { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px; background: rgba(255,255,255,.06); border: 1px solid var(--line-2); font: 400 11.5px/1 var(--fm); color: var(--tx-2); white-space: nowrap; animation: bob 7s ease-in-out infinite; }
.sc .ic { width: 13px; height: 13px; color: var(--tx-3); }
.sc.s1 { left: 7%; top: 14%; rotate: -6deg; } .sc.s2 { right: 4%; top: 31%; rotate: 5deg; animation-delay: -2s; }
.sc.s3 { left: 12%; top: 52%; rotate: 3deg; animation-delay: -4s; } .sc.s4 { right: 10%; top: 72%; rotate: -5deg; animation-delay: -1s; }
.sc.s5 { left: -4%; top: 80%; rotate: 8deg; animation-delay: -5s; opacity: .6; }
@keyframes bob { 50% { transform: translateY(-9px); } }

.now { margin-top: clamp(48px, 6vw, 72px); }
.now-t { display: flex; align-items: center; gap: 9px; font: 500 12px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 26px; }
.now-t .ic { width: 15px; height: 15px; color: var(--mint); }
.now-line { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-2); }
.now-line li { position: relative; padding: 24px 22px 0 0; }
.now-line li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--lav); }
.now-line time { font: 500 12.5px var(--fm); color: var(--lav-2); }
.now-line b { display: block; font: 600 15.5px/1.3 var(--fd); margin: 8px 0 6px; }
.now-line span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--tx-3); }
.now-line .hot::before { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 0 5px rgba(255,184,77,.2); animation: pulse 2s ease-in-out infinite; }
.now-line .hot time { color: var(--amber); }

/* ==========================================================================
   4 · LO QUE CUESTA
   ========================================================================== */
/* Dos columnas: el argumento a la izquierda y, a la derecha, un estado de cuenta claro
   con el mismo lenguaje del tablero (tokens --b-*) */
.cost-cols { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cost .sec-head { margin-bottom: 0; }
.cost .lead b { color: #fff; font-weight: 600; }
.cost-cta { margin-top: 28px; }
.stmt { border-radius: 14px; overflow: hidden; background: var(--b-bg); color: var(--b-tx); font: 400 13px/1.45 var(--fb); box-shadow: 0 0 0 6px rgba(255,255,255,.03), 0 0 0 7px rgba(255,255,255,.07), 0 60px 120px -50px rgba(0,0,0,.9), 0 30px 70px -40px rgba(88,66,214,.45); }
.stmt-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--b-line); background: var(--b-side); }
.stmt-h b { font-size: 13.5px; font-weight: 600; }
.stmt-h span { font-size: 12px; color: var(--b-tx3); }
.stmt-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tx n" "viz viz"; gap: 14px 20px; align-items: start; padding: 20px 22px; border-top: 1px solid var(--b-line); }
.stmt-h + .stmt-r { border-top: 0; }
.stmt-tx { grid-area: tx; min-width: 0; }
.stmt-tx b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.stmt-tx small, .stmt-n small, .stmt-viz small { font-size: 12px; color: var(--b-tx3); }
.stmt-n { grid-area: n; text-align: right; }
.stmt-n b { display: block; font: 600 22px/1.2 var(--fd); letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stmt-n em { font: 500 13px var(--fb); font-style: normal; letter-spacing: 0; color: var(--b-tx3); margin-right: 2px; }
.stmt-viz { grid-area: viz; }
/* rango de la multa: de 250 a 5,000 UMA sobre una misma escala */
.rng, .yr { position: relative; display: flex; justify-content: space-between; padding-top: 14px; font-size: 11.5px; color: var(--b-tx3); font-variant-numeric: tabular-nums; }
.rng::before, .yr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 99px; background: var(--b-track); }
.rng i, .yr i { position: absolute; top: 0; height: 6px; border-radius: 99px; transform-origin: 0 50%; }
.rng i { left: 5%; right: 0; background: linear-gradient(90deg, #E9B44C, #D9822B); }
.rng span:first-of-type { margin-left: 5%; transform: translateX(-30%); }
.yr i { left: 0; width: var(--w, 75%); background: var(--b-you); }
.yr i::after { content: ""; position: absolute; right: -5px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--b-you); border: 3px solid var(--b-bg); box-shadow: 0 0 0 1px var(--b-you); }
.js .stmt .rng i, .js .stmt .yr i { transform: scaleX(0); transition: transform 1.3s var(--ease) .5s; } .js .stmt.in .rng i, .js .stmt.in .yr i { transform: none; }
.both { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.both .bdg { height: 24px; padding: 0 10px; font-size: 12px; }
.both small { margin-left: 4px; }
.stmt-f { padding: 12px 22px 14px; border-top: 1px solid var(--b-line); background: var(--b-side); font-size: 11.5px; line-height: 1.5; color: var(--b-tx3); }
@media (max-width: 960px) { .cost-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .stmt-r { grid-template-columns: 1fr; grid-template-areas: "tx" "n" "viz"; gap: 10px; padding: 18px; } .stmt-n { text-align: left; } .stmt-h, .stmt-f { padding-left: 18px; padding-right: 18px; } .stmt-n b { font-size: 20px; } }
.turn { font: 500 clamp(20px, 2.4vw, 29px)/1.35 var(--fd); letter-spacing: -.025em; color: var(--dim); margin-top: clamp(48px, 6vw, 72px); max-width: 30em; text-wrap: balance; }
.turn b { color: #fff; font-weight: 600; }
.turn.center { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   5 · CÓMO FUNCIONA
   Los cuatro pasos siempre a la vista, en una línea de tiempo. Nada avanza solo
   ni queda oculto: cada paso muestra su pantalla y quién hace qué (Tú / Audantra).
   ========================================================================== */
.flow { position: relative; padding-top: 24px; }
.js .flow.rv { opacity: 1; transform: none; }
.flow-line { position: absolute; left: 17px; right: calc(25% - 17px); top: 41px; height: 1px; background: var(--line-2); }
.flow-line::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; }
.js .flow-line::after { transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; } .js .flow.in .flow-line::after { transform: none; }
.flow-loop { position: absolute; left: calc(25% + 17px); right: calc(25% - 17px); top: 0; height: 24px; border: 1.5px dashed rgba(79,229,194,.5); border-bottom: 0; border-radius: 14px 14px 0 0; }
.flow-loop::before { content: ""; position: absolute; left: -5.75px; bottom: -3px; border: 5px solid transparent; border-top-color: var(--mint); }
.flow-loop span { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; background: var(--bg); font: 500 11px/1.4 var(--fm); color: var(--mint); white-space: nowrap; }
.flow-loop .ic { width: 12px; height: 12px; }
.js .flow-loop { opacity: 0; transition: opacity .8s 1.6s; } .js .flow.in .flow-loop { opacity: 1; }

.flow-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
.fstep { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.js .flow .fstep { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 150ms + 150ms); }
.js .flow.in .fstep { opacity: 1; transform: none; }
.fstep-h { padding: 0 18px 18px 0; }
.fnode { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--fm); color: var(--tx-2); background: #12132A; border: 1px solid var(--line-2); transition: background .5s, color .5s, border-color .5s, box-shadow .4s; transition-delay: calc(var(--i) * 300ms + 350ms); }
.flow.in .fnode, html:not(.js) .fnode { background: #fff; color: #0C0D1C; border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.07); }
.fstep:hover .fnode { box-shadow: 0 0 0 6px rgba(79,229,194,.28); transition-delay: 0s; }
.fstep-h h3 { font: 600 19.5px/1.25 var(--fd); letter-spacing: -.025em; margin-top: 16px; max-width: 12.5em; text-wrap: balance; }

/* Pantallas: mismos tokens claros del tablero */
.fcard { display: flex; flex-direction: column; min-height: 248px; margin-right: 18px; padding: 14px 14px 12px; border-radius: 12px; background: var(--b-bg); color: var(--b-tx); font: 400 12.5px/1.45 var(--fb); box-shadow: 0 0 0 5px rgba(255,255,255,.03), 0 0 0 6px rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.85); transition: transform .4s var(--ease); }
.fstep:hover .fcard { transform: translateY(-4px); }
.fc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.fc-h b { font-size: 12.5px; font-weight: 600; }
.fc-h span { font: 400 10px/1 var(--fm); padding: 4px 7px; border: 1px solid var(--b-line2); border-radius: 99px; color: var(--b-tx3); }
.fc-big { font: 600 16.5px/1.25 var(--fd); letter-spacing: -.02em; margin-bottom: 9px; }
.fc-r, .fc-a { display: flex; align-items: center; gap: 8px; min-height: 34px; border-top: 1px solid var(--b-line); }
.fc-r code { font: 500 11px var(--fm); color: var(--b-tx3); flex: none; }
.fc-a time { width: 42px; flex: none; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fc-a { min-height: 42px; } .fc-a:first-of-type { border-top: 0; }
.fc-r span, .fc-a span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--b-tx2); }
.bdg { display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 99px; flex: none; font-style: normal; font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--b-tx2); background: var(--b-mut-bg); }
.bdg.ok { color: var(--b-ok); background: var(--b-ok-bg); } .bdg.warn { color: var(--b-warn); background: var(--b-warn-bg); } .bdg.you { color: var(--b-you); background: var(--b-you-bg); }
.fc-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--b-line); font-size: 11.5px; color: var(--b-tx3); }
.fc-f b { font: 600 14px var(--fd); color: var(--b-tx); }
.fc-t { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--b-line); }
.fc-t:first-of-type { border-top: 0; padding-top: 2px; }
.fc-t b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; } .fc-t small { font-size: 11.5px; color: var(--b-tx3); }
.fc-t-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.fc-tt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fc-tt em { font-style: normal; font-size: 11.5px; color: var(--b-tx3); font-variant-numeric: tabular-nums; }
.fc-bar { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--b-track); }
.fc-bar::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 2px; background: var(--b-fill); transform-origin: 0 50%; }
.js .flow .fc-bar::after { transform: scaleX(0); transition: transform 1.2s var(--ease) 1.1s; } .js .flow.in .fc-bar::after { transform: none; }
.fc-btn { position: relative; overflow: hidden; display: inline-grid; place-items: center; height: 28px; min-width: 88px; padding: 0 12px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--b-btn); color: #fff; }
.fc-btn .t-b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--b-ok); opacity: 0; }
.fc-btn .t-b .ic { width: 12px; height: 12px; stroke-width: 2.8; }
.flow.in .fc-btn .t-b { animation: showup .35s 2.7s forwards; }
@keyframes showup { to { opacity: 1; } }
.fc-doc { position: relative; min-height: 128px; margin-bottom: 6px; padding: 12px 12px 10px; border-radius: 8px; border: 1px solid var(--b-line); background: #FBFBFD; }
.fc-doc-k { font: 500 9.5px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--b-you); }
.fc-doc-t { font: 600 13.5px/1.25 var(--fd); letter-spacing: -.01em; margin: 5px 0 10px; }
.fc-l { display: block; width: 60%; height: 5px; border-radius: 3px; background: var(--b-track); margin-bottom: 7px; } .fc-l.s { width: 38%; }
.fc-sig { display: block; width: 84px; height: 26px; margin-top: 4px; fill: none; stroke: #2A2860; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; }
.flow.in .fc-sig { animation: sign 1.1s var(--ease) 1.5s both; }
.fc-doc .holo { --s: 58px; right: 10px; bottom: 10px; }
.js .flow:not(.in) .fc-doc .holo { opacity: 0; }
.fc-doc .holo { animation: none; }
.flow.in .fc-doc .holo { animation: stampin .55s cubic-bezier(.3,1.5,.5,1) 2.5s both; }
.fc-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0 0; font-size: 11.5px; color: var(--b-tx3); }
.fc-meta code { font-size: 11.5px; color: var(--b-tx); } .fc-meta b { font-weight: 500; color: var(--b-tx); }

/* Quién hace qué: dos carriles continuos bajo los cuatro pasos */
.flane { margin: 0; padding: 14px 18px 15px; font-size: 14.5px; line-height: 1.5; }
.flane em { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 600 12px/1.2 var(--fb); font-style: normal; }
.flane em img { width: 13px; height: auto; }
.flane span { display: block; }
.flane.you { margin-top: 24px; color: var(--tx-2); background: rgba(255,255,255,.035); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.flane.you em { color: #fff; } .flane.you b { color: #fff; font-weight: 600; }
.flane.we { color: #fff; background: rgba(149,117,252,.11); border-top: 1px solid rgba(149,117,252,.28); border-bottom: 1px solid rgba(149,117,252,.28); border-left: 1px solid rgba(149,117,252,.28); }
.flane.we em { color: var(--lav-2); }
.fstep:first-child .flane.you { border-top-left-radius: 14px; } .fstep:first-child .flane.we { border-bottom-left-radius: 14px; }
.fstep:last-child .flane.you { border-right: 1px solid var(--line); border-top-right-radius: 14px; } .fstep:last-child .flane.we { border-right: 1px solid rgba(149,117,252,.28); border-bottom-right-radius: 14px; }
.flow-note { display: flex; gap: 10px; align-items: flex-start; max-width: 70ch; margin-top: 22px; font-size: 13.5px; line-height: 1.5; color: var(--tx-3); }
.flow-note .ic { width: 16px; height: 16px; color: var(--mint); margin-top: 2px; }

@media (max-width: 1020px) {
  .flow { padding-top: 0; } .flow-line, .flow-loop { display: none; }
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; column-gap: 20px; }
  .fstep:nth-child(n+3) .fstep-h { padding-top: 44px; }
  .fstep-h { padding-right: 0; } .fcard { margin-right: 0; }
  .flane.you { margin-top: 16px; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0 !important; }
  .flane.we { border: 1px solid rgba(149,117,252,.28); border-radius: 0 0 14px 14px !important; }
}
@media (max-width: 640px) {
  .flow-steps { grid-template-columns: minmax(0, 1fr); }
  .fstep + .fstep .fstep-h { padding-top: 44px; }
  .fstep-h h3 { max-width: none; }
}

/* Piezas que comparten otras secciones (radiografía, Cadena, cartera, despachos) */
.rx-title { font: 600 22px/1.3 var(--fd); letter-spacing: -.025em; }
.rx-title b { color: var(--mint); font-weight: 700; }
.rxt-list li { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 11px; background: var(--s1); font-size: 13.5px; color: var(--tx-2); }
.rxt-list code { font-size: 12.5px; color: #fff; }
em.miss { color: var(--amber); background: rgba(255,184,77,.13); } em.ok { color: var(--mint); background: rgba(79,229,194,.13); }
.blurred { filter: blur(8px); user-select: none; opacity: .8; }
.paper { position: relative; background: #F6F5FB; color: #1B1A2B; border-radius: 10px; padding: 22px 20px 26px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }
.paper-k { font: 500 10.5px var(--fm); letter-spacing: .1em; text-transform: uppercase; color: #6E7180; }
.paper-t { font: 700 17px/1.25 var(--fd); letter-spacing: -.02em; margin: 8px 0 20px; }

/* ==========================================================================
   6 · QUÉ CUBRE
   ========================================================================== */
.cover { background: linear-gradient(180deg, transparent, rgba(52,189,226,.04) 50%, transparent); }
/* Tabla de cobertura: todo a la vista, agrupado, con filas separadas por líneas finas.
   El control de tamaño enciende las exigencias (.tier) que ya aplican. */
/* Consola de cobertura: barra de filtros, índice con buscador, detalle con regla de umbrales
   y barra inferior. La lista completa siempre a la vista; el alcance, de uno en uno. */
.cov { position: relative; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; overflow: hidden; background: radial-gradient(80% 50% at 100% 0%, rgba(149,117,252,.12), transparent 60%), linear-gradient(180deg, #14162C, #0D0F20); box-shadow: 0 0 0 6px rgba(255,255,255,.028), 0 0 0 7px rgba(255,255,255,.07), 0 80px 150px -60px rgba(0,0,0,.95), 0 34px 80px -40px rgba(88,66,214,.45), inset 0 1px 0 rgba(255,255,255,.09); }
.cov::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(320px 240px at 5% 0%, rgba(255,255,255,.45), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.cov-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; padding: 14px 18px 14px 14px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.18); }
.cov-seg button { display: inline-flex; align-items: center; gap: 7px; }
.cov-seg em { font: 500 11px/1 var(--fm); font-style: normal; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.1); color: var(--tx-2); }
.cov-seg .is-on em { background: rgba(12,13,28,.1); color: #0C0D1C; }
.cov-size { display: flex; align-items: center; gap: 16px; }
.cov-size label { font-size: 14px; color: var(--tx-2); white-space: nowrap; }
.cov-size output { display: inline-block; min-width: 3.2ch; text-align: right; font: 700 20px/1 var(--fd); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.cov .cov-size input[type=range] { width: 220px; margin: 0; }

.cov-x { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); background: linear-gradient(90deg, rgba(0,0,0,.2) 340px, transparent 340px); }
.cov-x::before { content: ""; position: absolute; left: 340px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.cov-find { grid-column: 1; display: flex; align-items: center; gap: 9px; height: 38px; margin: 14px 12px 2px; padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--tx-3); transition: border-color .2s, background .2s; cursor: text; }
.cov-find:focus-within { border-color: var(--lav); background: rgba(149,117,252,.08); }
.cov-find .ic { width: 15px; height: 15px; }
.cov-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 400 14px var(--fb); -webkit-appearance: none; appearance: none; }
.cov-find input::placeholder { color: var(--tx-3); }
.cov-find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cov-empty { grid-column: 1; padding: 18px 22px; font-size: 13.5px; color: var(--tx-3); }
.cov-g { grid-column: 1; display: flex; align-items: baseline; gap: 10px; padding: 18px 22px 8px; }
.cov-g b { font: 600 13px var(--fb); color: #fff; } .cov-g span { font-size: 12.5px; color: var(--tx-3); }
.cov-i[hidden], .cov-g[hidden], .cov-empty[hidden] { display: none; }
.cov-hl { position: absolute; z-index: 0; left: 8px; top: 0; width: 324px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; pointer-events: none; transition: top .38s var(--ease), height .38s var(--ease), opacity .2s; }
.cov-hl::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2.5px; border-radius: 2px; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.cov-hl.on { opacity: 1; }
.cov-i { grid-column: 1; position: relative; z-index: 1; display: grid; grid-template-columns: 60px minmax(0, 1fr) 15px; align-items: center; gap: 2px 12px; width: 100%; padding: 9px 20px 9px 22px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--tx-2); transition: color .2s; }
.cov-i:last-of-type { margin-bottom: 14px; }
.cov-i code { grid-row: span 2; font-size: 11.5px; color: var(--tx-3); letter-spacing: .02em; }
.cov-i b { min-width: 0; font: 500 14.5px/1.35 var(--fb); }
.cov-i .cov-m { grid-column: 2; justify-self: start; }
.cov-i .ic { grid-column: 3; grid-row: 1 / span 2; }
.cov-i .ic { width: 15px; height: 15px; color: var(--tx-3); opacity: .45; transform: rotate(-90deg); transition: transform .25s var(--ease), opacity .2s, color .2s; }
.cov-m { font: 500 10.5px/1 var(--fm); font-style: normal; padding: 3px 6px; border-radius: 6px; color: var(--mint); background: rgba(79,229,194,.12); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cov-m:empty { display: none; }
.cov-i:hover, .cov-i.on { color: #fff; }
.cov-i.on .ic { opacity: 1; color: var(--mint); transform: rotate(-90deg) translateY(2px); }

.cov-p { grid-column: 2; grid-row: 1 / span 24; align-self: start; padding: 32px 36px 34px; min-width: 0; }
.js .cov-p:not(.on) { display: none; }
.js .cov-p.on > * { animation: rise .45s var(--ease) both; }
.js .cov-p.on > :nth-child(2) { animation-delay: .05s; } .js .cov-p.on > :nth-child(3) { animation-delay: .1s; }
.cov-p header { display: flex; align-items: center; gap: 16px; }
.cov-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.cov-ic .ic { width: 18px; height: 18px; }
.cov-p .cov-ic { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(145deg, rgba(149,117,252,.28), rgba(79,229,194,.12)); border-color: rgba(149,117,252,.4); box-shadow: 0 12px 30px -12px rgba(149,117,252,.7); } .cov-p .cov-ic .ic { width: 24px; height: 24px; }
.cov-orb { --s: 52px; }
.cov-p header code { display: block; font-size: 12px; color: var(--tx-3); letter-spacing: .02em; }
.cov-p h3 { font: 600 clamp(21px, 2.2vw, 28px)/1.2 var(--fd); letter-spacing: -.025em; margin-top: 2px; }
.cov-tag { margin-left: auto; align-self: flex-start; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--tx-2); white-space: nowrap; }
.cov-about { font-size: 16.5px; line-height: 1.55; color: var(--tx-2); max-width: 58ch; margin: 18px 0 24px; }
.cov-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.cov-one { grid-template-columns: minmax(0, 1fr); }
.cov-two h4 { font: 600 13.5px var(--fb); color: var(--tx-2); margin-bottom: 14px; }

/* Regla de umbrales: dónde está tu empresa frente a lo que pide la norma */
.ruler { position: relative; height: 70px; margin: 0 10px 14px; }
.ruler::before { content: ""; position: absolute; left: -10px; right: -10px; top: 32px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); }
.ruler-fill { position: absolute; left: -10px; top: 32px; height: 6px; width: calc(var(--me, 50%) + 10px); border-radius: 99px; background: linear-gradient(90deg, rgba(79,229,194,.3), var(--mint)); transition: width .18s ease-out; }
.ruler-tick { position: absolute; top: 26px; width: 2px; height: 18px; margin-left: -1px; border-radius: 2px; background: rgba(255,255,255,.22); transition: background .3s; }
.ruler-tick b { position: absolute; top: 23px; left: 50%; transform: translateX(-50%); font: 500 11px/1 var(--fm); color: var(--tx-3); transition: color .3s; }
.ruler-tick.on { background: #fff; } .ruler-tick.on b { color: #fff; }
.ruler-me { position: absolute; left: var(--me, 50%); top: 25px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(79,229,194,.25), 0 4px 10px rgba(0,0,0,.5); transition: left .18s ease-out; }
.ruler-me b { position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%); padding: 4px 9px; border-radius: 99px; font: 700 12px/1 var(--fd); white-space: nowrap; color: #06281F; background: var(--mint); font-variant-numeric: tabular-nums; }
.ruler-end { position: absolute; top: 49px; left: -10px; font: 400 11px/1 var(--fm); color: var(--tx-3); } .ruler-end.r { left: auto; right: -10px; }

.cov-t { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tier { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 99px; font-size: 14px; white-space: nowrap; color: var(--tx-3); border: 1px dashed var(--line-2); transition: color .35s, background .35s, border-color .35s; }
.tier::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; transition: background .35s, opacity .35s; }
.tier em { font-style: normal; font-size: 12.5px; opacity: .85; }
.tier.on { color: #fff; border: 1px solid rgba(79,229,194,.42); background: rgba(79,229,194,.1); }
.tier.on::before { background: var(--mint); opacity: 1; } .tier.on em { color: var(--mint); opacity: 1; }
/* Lo que recibes / alcance: cada entregable como una pieza */
.cov-l { display: grid; gap: 8px; }
.cov-one .cov-l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cov-l li { position: relative; padding: 11px 14px 11px 40px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 14.5px; line-height: 1.4; color: var(--tx); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.cov-l li:hover { border-color: rgba(79,229,194,.35); background: rgba(79,229,194,.05); transform: translateX(3px); }
.cov-l li::before { content: ""; position: absolute; left: 13px; top: 12px; width: 17px; height: 17px; border-radius: 50%; background: rgba(79,229,194,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FE5C2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 10px no-repeat; }
.js .cov-p.on .cov-l li { animation: rise .4s var(--ease) both; }
.js .cov-p.on .cov-l li:nth-child(2) { animation-delay: .05s; } .js .cov-p.on .cov-l li:nth-child(3) { animation-delay: .1s; } .js .cov-p.on .cov-l li:nth-child(4) { animation-delay: .15s; } .js .cov-p.on .cov-l li:nth-child(5) { animation-delay: .2s; }

.cov-bar { display: flex; align-items: center; gap: 22px; padding: 12px 14px 12px 22px; border-top: 1px solid var(--line); background: rgba(0,0,0,.24); }
.cov-note { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--tx-2); }
.cov-note b { color: #fff; font-weight: 600; }
.cov-keys { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--tx-3); white-space: nowrap; }
.cov-nav { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cov-nav b { color: #fff; font-weight: 600; } .cov-nav i { font-style: normal; }
.cov-nav button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.cov-nav button:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.cov-nav button .ic { width: 15px; height: 15px; } #covPrev .ic { transform: rotate(180deg); }
@media (max-width: 1100px) { .cov-keys { display: none; } }
@media (max-width: 900px) {
  .cov-x { grid-template-columns: minmax(0, 1fr); background: none; } .cov-x::before, .cov-hl { display: none; }
  .cov-find { margin: 14px 14px 6px; } .cov-find kbd { display: none; }
  .cov-i { padding: 13px 18px; border-top: 1px solid var(--line); } .cov-i .ic, .cov-i.on .ic { transform: none; } .cov-i.on .ic { transform: rotate(180deg); }
  .cov-i.on { background: rgba(255,255,255,.05); }
  .cov-g { padding: 22px 18px 10px; border-top: 1px solid var(--line); } .cov-g + .cov-i { border-top: 0; }
  .cov-i:last-of-type { margin-bottom: 0; }
  .cov-p { grid-column: 1; grid-row: auto; padding: 8px 18px 26px; background: rgba(255,255,255,.03); }
  .cov-p header > div, .cov-p header .cov-ic, .cov-p header .orbav { display: none; } .cov-tag { margin-left: 0; white-space: normal; }
  .cov-about { margin: 14px 0 18px; font-size: 15.5px; }
  .cov-two { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 18px; } .cov-one .cov-l { grid-template-columns: minmax(0, 1fr); }
  .cov-bar { flex-wrap: wrap; gap: 12px 16px; padding: 14px 18px; } .cov-note { flex-basis: 100%; } .cov-nav { display: none; } .cov-bar .btn { flex: 1; }
}
@media (max-width: 640px) {
  .cov-top { padding: 12px; }
  .cov-seg { width: 100%; } .cov-seg button { flex: 1 1 0; min-width: 0; justify-content: center; gap: 5px; padding-left: 4px; padding-right: 4px; font-size: 13px; }
  .cov-size { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; padding: 0 6px 4px; } .cov .cov-size input[type=range] { width: 100%; }
  .tier { white-space: normal; }
}

/* 7 · DEFENSE FILE: ver COMPONENTES DE PRODUCTO */

/* ==========================================================================
   8 · AGENTES
   ========================================================================== */
.agents .sec-head { margin-bottom: 30px; }
.agent-list { display: grid; gap: 10px; }
.agent { --ac: var(--lav); display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--s1); }
.js .agent.rv.in { transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .35s, background .35s; }
.agent[data-agent="cotejo"] { --ac: var(--cyan); } .agent[data-agent="norte"] { --ac: var(--mint); }
.agent:hover { border-color: color-mix(in srgb, var(--ac) 50%, transparent); background: color-mix(in srgb, var(--ac) 7%, rgba(255,255,255,.035)); }
.agent:hover .orbav, .tut-top:hover .orbav { transform: scale(1.12); box-shadow: 0 0 38px 4px var(--og), inset 0 0 0 1px rgba(255,255,255,.5); }
.agent:active .orbav { transform: scale(.94); }
.agent h3 { font: 600 17.5px/1.3 var(--fd); }
.agent h3 small { font: 400 11.5px var(--fm); color: var(--tx-3); margin-left: 8px; white-space: nowrap; }
.agent p { font-size: 14.5px; line-height: 1.5; color: var(--tx-2); margin-top: 4px; }

/* ==========================================================================
   9 · CRITERIO
   ========================================================================== */
.trust { background: linear-gradient(180deg, transparent, rgba(149,117,252,.05) 45%, transparent); }
.trust-grid { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.sign { padding: 30px; border-radius: var(--r-lg); border: 1px solid rgba(149,117,252,.35); background: linear-gradient(160deg, rgba(149,117,252,.16), rgba(52,189,226,.05) 60%, transparent), var(--panel); position: sticky; top: 100px; }
.sign-ph { position: relative; width: 132px; height: 132px; box-shadow: 0 18px 44px -16px rgba(149,117,252,.75); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #4FE5C2, #34BDE2 45%, #9575FC); margin-bottom: 22px; }
.sign-ph span { font: 700 34px var(--fd); color: #0B0C1A; letter-spacing: -.02em; }
.sign-ph img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.sign-k { display: inline-flex; align-items: center; gap: 7px; font: 500 11px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.sign-k .ic { width: 14px; height: 14px; }
.sign figcaption b { display: block; font: 700 25px/1.2 var(--fd); letter-spacing: -.025em; margin-top: 12px; }
.sign figcaption span { display: block; color: var(--lav-2); font-size: 15px; margin-top: 2px; }
.sign figcaption p { font-size: 15px; line-height: 1.6; color: var(--tx-2); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.reasons li { display: grid; grid-template-columns: 46px 1fr; padding: 22px 0; border-top: 1px solid var(--line); }
.reasons li:first-child { border-top: 0; padding-top: 0; }
.reasons li > span { font: 500 13px/1.9 var(--fm); color: var(--mint); }
.reasons h3 { font: 600 19.5px/1.3 var(--fd); letter-spacing: -.02em; }
.reasons p { font-size: 15.5px; color: var(--tx-2); margin-top: 5px; max-width: 58ch; }

.cmp { margin-top: clamp(64px, 8vw, 104px); }
.cmp-t { font: 600 clamp(22px, 2.6vw, 31px)/1.25 var(--fd); letter-spacing: -.03em; max-width: 26em; color: var(--dim); text-wrap: balance; }
.cmp-t span { color: #fff; }
.cmp-table { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); }
.cmp-r { display: grid; grid-template-columns: 1.15fr 1fr 1.5fr; gap: 24px; padding: 17px 24px; border-top: 1px solid var(--line); font-size: 15px; align-items: center; }
.cmp-r b { font-weight: 600; display: flex; align-items: center; gap: 9px; } .cmp-r span { color: var(--tx-2); }
.cmp-h { border-top: 0; background: var(--s1); padding-top: 14px; padding-bottom: 14px; }
.cmp-h span { font: 500 11px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.cmp-us { background: linear-gradient(100deg, rgba(79,229,194,.14), rgba(52,189,226,.1) 45%, rgba(149,117,252,.2)); padding-top: 21px; padding-bottom: 21px; }
.cmp-us b { font: 700 17px var(--fd); } .cmp-us span { color: #fff; }

.proof { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: 28px 32px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--s1); }
.proof-n { display: flex; align-items: center; gap: 18px; }
.proof-n b { font: 700 58px/1 var(--fd); letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.proof-n span { font-size: 15.5px; line-height: 1.4; color: var(--tx-2); max-width: 17ch; }
.proof ul { display: grid; gap: 9px; }
.proof li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--tx-2); }
.proof li .ic { width: 17px; height: 17px; color: var(--mint); margin-top: 3px; stroke-width: 2.2; }

/* ==========================================================================
   10 · DESPACHOS (franja) · 11 · FAQ
   ========================================================================== */
.firm-card { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: clamp(28px, 4vw, 46px); border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(115deg, rgba(79,229,194,.11), rgba(52,189,226,.05) 42%, rgba(149,117,252,.15)), var(--panel); overflow: hidden; }
.firm-card .eyebrow { margin-bottom: 14px; }
.firm-card p:not(.eyebrow) { color: var(--tx-2); margin-top: 12px; max-width: 52ch; }
.firm-card .h3 { max-width: 22em; }

.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq .sec-head { margin-bottom: 0; position: sticky; top: 110px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; cursor: pointer; font: 600 18.5px/1.35 var(--fd); letter-spacing: -.02em; transition: color .2s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--lav-2); }
.faq-list summary .ic { width: 18px; height: 18px; color: var(--tx-3); transition: transform .35s var(--ease), color .2s; }
.faq-list details[open] summary .ic { transform: rotate(45deg); color: var(--mint); }
.faq-list details p { padding: 0 44px 24px 0; color: var(--tx-2); font-size: 16px; }
.faq-list details[open] p { animation: rise .4s var(--ease) both; }

/* ==========================================================================
   12 · RADIOGRAFÍA
   ========================================================================== */
.rx { overflow: hidden; }
.rx-bg { position: absolute; inset: 0; pointer-events: none; }
.rx-bg .a1 { top: 8%; margin-left: -620px; opacity: .34; } .rx-bg .a2 { top: 30%; margin-left: 120px; opacity: .26; }
.rx .wrap { position: relative; }
.rxt { display: grid; grid-template-columns: 5fr 6fr; grid-template-areas: "ctl out" "lead out"; border: 1px solid var(--line-2); border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #15172E, #0F1124); box-shadow: 0 60px 130px -50px rgba(0,0,0,.95), 0 0 120px -40px rgba(149,117,252,.5); }
.rxt > * { min-width: 0; }
.rxt-ctl { grid-area: ctl; padding: 32px 32px 26px; display: grid; gap: 24px; align-content: start; }
.rxt-lead { grid-area: lead; padding: 0 32px 32px; }
.rxt-out { grid-area: out; border-left: 1px solid var(--line); background: rgba(0,0,0,.24); }
.rxt-f label, .rxt-l { display: flex; align-items: baseline; justify-content: space-between; font-size: 14.5px; color: var(--tx-2); }
.rxt-f output { font: 700 30px/1 var(--fd); color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rxt input[type=range], .cov-size input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; margin: 18px 0 10px; cursor: pointer; background: linear-gradient(90deg, var(--mint), var(--cyan) var(--v, 69%), rgba(255,255,255,.12) var(--v, 69%)); }
.rxt input[type=range]::-webkit-slider-thumb, .cov-size input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(79,229,194,.22), 0 6px 16px rgba(0,0,0,.5); transition: box-shadow .2s; }
.rxt input[type=range]::-moz-range-thumb, .cov-size input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 5px rgba(79,229,194,.22), 0 6px 16px rgba(0,0,0,.5); }
.rxt input[type=range]:active::-webkit-slider-thumb, .cov-size input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(79,229,194,.25), 0 6px 16px rgba(0,0,0,.5); }
.rxt-marks { position: relative; height: 16px; margin: 0 12px; }
.rxt-marks span { position: absolute; left: var(--p); transform: translateX(-50%); font: 400 10.5px var(--fm); color: var(--tx-3); }
.rxt-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.rxt-l { display: block; line-height: 1.4; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; flex: none; }
.stepper button { width: 42px; height: 42px; background: transparent; border: 0; font-size: 19px; cursor: pointer; transition: background .2s; }
.stepper button:hover { background: var(--s2); }
.stepper output { width: 42px; text-align: center; font: 700 17px/1 var(--fd) !important; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.07); flex: none; }
.seg button { padding: 9px 18px; border-radius: 9px; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--tx-2); cursor: pointer; transition: background .2s, color .2s; }
.seg button.is-on { background: #fff; color: #0C0D1C; }
.rxt-form { border-top: 1px solid var(--line); padding-top: 24px; display: grid; gap: 14px; }
.rxt-ft { font: 600 17.5px var(--fd); letter-spacing: -.02em; }
.rxt-fs { font-size: 13.5px; line-height: 1.5; color: var(--tx-3); margin: -6px 0 14px; }
.rxt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rxt-fields label { display: grid; gap: 6px; }
.rxt-fields label span { font-size: 12.5px; color: var(--tx-3); } .rxt-fields label i { font-style: normal; opacity: .7; }
.rxt-fields input { width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 13px; color: #fff; font: 400 15px var(--fb); transition: border-color .2s, background .2s; }
.rxt-fields input:focus { outline: 0; border-color: var(--lav); background: rgba(149,117,252,.08); }
.rxt-fields input.bad { border-color: var(--red); }
.rxt-fields .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rxt-legal { font-size: 12.5px; color: var(--tx-3); }
.rxt-legal a { text-underline-offset: 3px; } .rxt-legal.err { color: var(--red); }
.rxt-ok { border-top: 1px solid var(--line); padding-top: 26px; display: grid; gap: 12px; justify-items: start; }
.rxt-ok[hidden] { display: none; }
.rxt-ok h3 { font: 600 22px/1.25 var(--fd); letter-spacing: -.025em; } .rxt-ok p { color: var(--tx-2); font-size: 15.5px; }
.rxt-pad { padding: 24px 28px 28px; }
.rxt-list { display: grid; gap: 7px; margin: 16px 0; }
.rxt-list li { grid-template-columns: 78px 1fr; }
.rxt-list li.bump { animation: bump .7s var(--ease); }
@keyframes bump { 0% { background: rgba(79,229,194,.22); box-shadow: inset 0 0 0 1px rgba(79,229,194,.6); } 100% { background: var(--s1); box-shadow: inset 0 0 0 1px transparent; } }
.rxt-list li.off { display: none; }
.rxt-repse code { color: var(--mint) !important; }
.rxt-expo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rxt-expo div { padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-2); }
.rxt-expo span { display: block; font-size: 12.5px; color: var(--tx-3); }
.rxt-expo b { display: block; font: 700 20px/1.3 var(--fd); letter-spacing: -.02em; margin: 4px 0 3px; }
.rxt-expo small { font: 400 10.5px var(--fm); color: var(--tx-3); }
.rxt-note { font-size: 12px; line-height: 1.5; color: var(--tx-3); margin-top: 14px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { border-top: 1px solid var(--line); padding: 64px 0 36px; background: rgba(0,0,0,.25); }
.foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand img { height: 28px; width: auto; display: block; }
.foot-brand p { color: var(--tx-3); font-size: 15px; max-width: 28ch; margin: 16px 0 14px; }
.foot-tel { font: 500 14px var(--fm); color: var(--tx-2); text-decoration: none; }
.foot-col h4 { font: 500 11.5px var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 12px; }
.foot-col a { display: block; font-size: 14.5px; color: var(--tx-2); text-decoration: none; padding: 5px 0; transition: color .2s; }
.foot-col a:hover, .foot-tel:hover { color: #fff; }
.foot-src { margin-top: 44px; border-top: 1px solid var(--line); }
.foot-src summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 18px 0; cursor: pointer; font: 500 11.5px var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.foot-src summary::-webkit-details-marker { display: none; }
.foot-src summary .ic { width: 14px; height: 14px; transition: transform .3s; } .foot-src[open] summary .ic { transform: rotate(45deg); }
.foot-src ul { display: grid; gap: 7px; padding-bottom: 20px; font-size: 13px; color: var(--tx-3); max-width: 90ch; }
.foot-src b { color: var(--tx-2); font-weight: 500; }
.foot-bot { display: flex; justify-content: space-between; gap: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--tx-3); }
.foot-bot span:last-child { text-align: right; max-width: 60ch; padding-right: 64px; }

/* ==========================================================================
   WHATSAPP
   ========================================================================== */
.wa { position: fixed; right: 22px; bottom: 22px; z-index: 90; font-family: var(--fb); }
.wa-launch { position: relative; width: 56px; height: 56px; cursor: pointer; margin-left: auto; }
.wa-btn { position: absolute; inset: 0; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -6px rgba(37,211,102,.6); border: 2px solid rgba(255,255,255,.16); transition: transform .2s; }
.wa-launch:hover .wa-btn { transform: scale(1.06); }
.wa-btn svg { width: 30px; height: 30px; fill: #fff; }
.wa-panel { position: absolute; right: 0; bottom: 70px; width: min(330px, calc(100vw - 44px)); background: #14162B; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 26px 60px -20px rgba(0,0,0,.7); opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom right; pointer-events: none; transition: .25s; }
.wa-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.wa-hd { display: flex; align-items: center; gap: 12px; padding: 16px; background: radial-gradient(90% 140% at 10% 0%, rgba(149,117,252,.3), transparent 65%); }
.wa-av { width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: var(--grad); flex: none; }
.wa-av span { display: flex; width: 100%; height: 100%; border-radius: 50%; background: #0F0D17; align-items: center; justify-content: center; }
.wa-av img { width: 24px; height: auto; }
.wa-t { flex: 1; } .wa-t b { display: block; font: 800 15.5px var(--fd); }
.wa-t small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx-2); margin-top: 2px; }
.wa-t small i { width: 7px; height: 7px; border-radius: 50%; background: #25D366; }
.wa-close { color: rgba(255,255,255,.5); cursor: pointer; font-size: 18px; line-height: 1; background: none; border: 0; padding: 4px; margin: -4px; border-radius: 6px; }
.wa-rule { height: 2px; background: var(--grad); }
.wa-bd { padding: 16px 15px 15px; }
.wa-intro { color: var(--tx-2); font-size: 13.5px; line-height: 1.5; margin-bottom: 12px !important; }
.wa-opts { display: flex; flex-direction: column; gap: 8px; }
.wa-opt { display: flex; align-items: center; gap: 12px; background: var(--s1); border: 1px solid var(--line); padding: 12px 14px; border-radius: 13px; text-decoration: none; transition: background .15s, border-color .15s; }
.wa-opt:hover { background: var(--s2); border-color: var(--line-2); }
.wa-opt .lb { flex: 1; } .wa-opt .lb b { display: block; font-weight: 700; font-size: 13.5px; } .wa-opt .lb small { color: var(--tx-3); font-size: 11.5px; }
.wa-opt .ch { color: rgba(255,255,255,.3); font-size: 18px; line-height: 1; }
.wa-call { margin-top: 12px; text-align: center; font-size: 12px; color: var(--tx-3); }
.wa-call a { color: var(--cyan); font-weight: 600; text-decoration: none; }

/* ==========================================================================
   COMPONENTES DE PRODUCTO · tablero, Defense File y Tutela
   Piezas compartidas: haz de borde (.ui-beam), sello holográfico (.holo),
   cursor animado (.fcursor) y el orbe de Tutela (.orbav).
   ========================================================================== */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ang { to { --ang: 360deg; } }

.ui-beam { position: absolute; inset: -1px; z-index: 4; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 60%, rgba(79,229,194,0) 64%, rgba(79,229,194,.95) 78%, rgba(149,117,252,.95) 89%, transparent 97%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: ang 8s linear infinite; }

.holo { --s: 84px; position: absolute; right: 14px; bottom: 14px; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(from var(--ang), #4FE5C2, #34BDE2, #9575FC, #F2A7F5, #FFE2A8, #4FE5C2); animation: ang 9s linear infinite; box-shadow: 0 10px 24px -8px rgba(107,72,232,.6), inset 0 0 0 1px rgba(255,255,255,.55); }
.holo::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #302A66, #14132B 72%); }
.holo::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: linear-gradient(calc(125deg + var(--gl, 0deg)), rgba(255,255,255,.4), transparent 42%); pointer-events: none; }
.holo svg { position: relative; width: 100%; height: 100%; }
.holo text { font: 600 7.4px var(--fm); letter-spacing: 1px; fill: rgba(255,255,255,.85); transform-origin: 50px 50px; animation: spin 26s linear infinite; }
.holo-ck { fill: none; stroke: #7DF5D8; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(125,245,216,.7)); }
.holo-sm { --s: 38px; position: relative; right: auto; bottom: auto; }
.holo-sm .ic { position: relative; width: 18px; height: 18px; color: #7DF5D8; stroke-width: 2.8; }

.fcursor { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform 1.15s cubic-bezier(.55,.05,.2,1), opacity .35s; }
.fcursor.on { opacity: 1; }
.fcursor.jump { transition: none; }
.fcursor svg { display: block; width: 22px; height: 22px; fill: #fff; stroke: #0B0C1A; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 5px 8px rgba(0,0,0,.55)); transform-origin: 4px 3px; }
.fcursor span { position: absolute; left: 16px; top: 19px; font: 700 10.5px/1 var(--fd); color: #06281F; background: var(--mint); padding: 4px 8px; border-radius: 4px 99px 99px 99px; white-space: nowrap; box-shadow: 0 6px 14px -4px rgba(79,229,194,.7); }
.fcursor.click svg { animation: clk .4s var(--ease); }
.fcursor.click::after { content: ""; position: absolute; left: -11px; top: -12px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; animation: ripple .55s ease-out forwards; }
@keyframes clk { 45% { transform: scale(.76); } }
@keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* Orbe de agente. Cada agente tiene su paleta; el brillo (--hx, --hy) sigue al cursor */
@property --hx { syntax: '<percentage>'; initial-value: 32%; inherits: true; }
@property --hy { syntax: '<percentage>'; initial-value: 28%; inherits: true; }
.orbav { --s: 38px; --o1: #4FE5C2; --o2: #34BDE2; --o3: #9575FC; --o4: #C8A8FF; --og: rgba(149,117,252,.85); position: relative; width: var(--s); height: var(--s); border-radius: 50%; flex: none; background: conic-gradient(from var(--ang), var(--o1), var(--o2), var(--o3), var(--o4), var(--o1)); animation: ang 5s linear infinite; box-shadow: 0 0 24px -2px var(--og), inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .4s var(--ease), box-shadow .4s var(--ease), --hx .28s ease-out, --hy .28s ease-out; }
.orbav::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at var(--hx) var(--hy), rgba(255,255,255,.92), transparent 40%), radial-gradient(circle at calc(100% - var(--hx)) calc(100% - var(--hy)), rgba(10,11,24,.62), transparent 58%); }
.orbav::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--o2); opacity: 0; pointer-events: none; }
.orbav.ping::after { animation: orbping .75s ease-out; }
@keyframes orbping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.orbav-lg { --s: 46px; }
.orbav.cotejo { --o1: #8FE9FF; --o2: #34BDE2; --o3: #2F6BF2; --o4: #A9D4FF; --og: rgba(52,160,240,.85); }
.orbav.norte { --o1: #D6FFE4; --o2: #4FE5C2; --o3: #12B58C; --o4: #F2ECA6; --og: rgba(79,229,194,.8); }
kbd { font: 500 10.5px/1 var(--fm); padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.08); border: 1px solid var(--line); color: var(--tx-2); }

/* ---------- Tablero ----------
   Dashboard sobrio, con tokens propios (--b-*). Tema claro por defecto;
   data-theme="dark" en .board cambia al oscuro neutro. El color solo marca estado. */
.hero-stage { position: relative; z-index: 2; margin-top: clamp(52px, 6vw, 80px); perspective: 1800px; animation: rise 1s var(--ease) .35s both; }
.hero-stage::before { content: ""; position: absolute; left: 8%; right: 8%; top: -5%; height: 70%; background: radial-gradient(50% 60% at 50% 40%, rgba(149,117,252,.34), rgba(52,189,226,.1) 55%, transparent 75%); filter: blur(60px); z-index: -1; }
.board {
  --b-bg: #111113; --b-side: #0D0D0F; --b-card: #18191B; --b-line: #26282B; --b-line2: #33363A;
  --b-tx: #EDEEF0; --b-tx2: #B0B4BA; --b-tx3: #777B84; --b-hover: rgba(255,255,255,.035); --b-fill: #B0B4BA; --b-track: #2A2C30;
  --b-ok: #3DD68C; --b-ok-bg: rgba(61,214,140,.12); --b-warn: #F5B94A; --b-warn-bg: rgba(245,185,74,.12); --b-you: #B1A1FF; --b-you-bg: rgba(149,117,252,.16); --b-mut-bg: rgba(255,255,255,.06);
  --b-btn: #6E56CF; --b-btn-tx: #FFFFFF;
  position: relative; text-align: left; border-radius: 14px; background: var(--b-bg); color: var(--b-tx); border: 1px solid rgba(255,255,255,.1); font: 400 13px/1.45 var(--fb);
  transform-origin: 50% 0; transform: rotateX(var(--tilt, 13deg)) scale(var(--sc, .955)); will-change: transform;
}
.board[data-theme="light"], .lt, .sv-stage {
  --b-bg: #FFFFFF; --b-side: #F9F9FB; --b-card: #FFFFFF; --b-line: #E8E8EC; --b-line2: #D9D9E0;
  --b-tx: #1C2024; --b-tx2: #60646C; --b-tx3: #8B8D98; --b-hover: #F6F6F9; --b-fill: #60646C; --b-track: #E8E8EC;
  --b-ok: #218358; --b-ok-bg: #E6F6EB; --b-warn: #AB6400; --b-warn-bg: #FEF3D6; --b-you: #5B45D6; --b-you-bg: #EFECFE; --b-mut-bg: #F0F0F3;
  --b-btn: #5B45D6; --b-btn-tx: #FFFFFF;
  border-color: rgba(255,255,255,.7);
}
.hero-stage .board { --glow: rgba(70,56,170,.4); } .hero-stage .board::before, .hero-stage .board::after { display: none; }
.app { display: grid; grid-template-columns: 186px minmax(0, 1fr); border-radius: inherit; overflow: hidden; background: var(--b-bg); }

.app-side { display: flex; flex-direction: column; padding: 12px 10px; background: var(--b-side); border-right: 1px solid var(--b-line); }
.ws { display: flex; align-items: center; gap: 9px; padding: 5px 8px 13px; font-weight: 600; }
.ws-b { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; font: 700 9.5px var(--fb); color: #fff; background: linear-gradient(135deg, #7C66F2, #5B45D6); }
.ws .ic { width: 14px; height: 14px; margin-left: auto; color: var(--b-tx3); }
.snav { display: grid; gap: 1px; }
.snav span { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 7px; font-weight: 500; color: var(--b-tx2); }
.snav span .ic { width: 15px; height: 15px; color: var(--b-tx3); }
.snav span.on { background: var(--b-hover); color: var(--b-tx); box-shadow: inset 0 0 0 1px var(--b-line); } .snav span.on .ic { color: var(--b-tx); }
.snav em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--b-tx3); font-variant-numeric: tabular-nums; }
.snav-h { font-size: 11.5px; font-weight: 500; color: var(--b-tx3); padding: 16px 8px 5px; }
.snav-sub span i { width: 6px; height: 6px; border-radius: 2px; background: var(--b-line2); margin: 0 4px 0 5px; }
.side-me { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 11px 8px 2px; border-top: 1px solid var(--b-line); }
.side-me b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; } .side-me small { font-size: 11.5px; color: var(--b-tx3); }

.av { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 7.5px/1 var(--fb); font-style: normal; letter-spacing: 0; color: var(--b-tx2); background: var(--b-track); }
.av-you { background: var(--b-you); color: #fff; }
.av-tut { background: conic-gradient(from 210deg, #4FE5C2, #34BDE2, #9575FC, #C8A8FF, #4FE5C2); }
.av-cot { background: conic-gradient(from 210deg, #8FE9FF, #34BDE2, #2F6BF2, #8FE9FF); }
.av-aud { background: none; } .av-aud img { width: 15px; height: auto; display: block; }
.side-me .av { width: 26px; height: 26px; font-size: 9px; }

.app-main { min-width: 0; }
.app-top { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--b-line); }
.crumb { font-weight: 600; }
.app-search { margin-left: auto; display: flex; align-items: center; gap: 8px; width: 276px; height: 30px; padding: 0 6px 0 10px; border-radius: 8px; border: 1px solid var(--b-line2); font-size: 12.5px; color: var(--b-tx3); }
.app-search .ic { width: 14px; height: 14px; } .app-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-tag { font: 400 10.5px/1 var(--fm); color: var(--tx-3); padding: 5px 9px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; }
.board .win-tag { color: var(--b-tx3); border-color: var(--b-line2); }
.board kbd { background: var(--b-hover); border-color: var(--b-line2); color: var(--b-tx2); }

.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.app-col { padding: 20px 22px 22px; min-width: 0; }
.pg-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.pg-h h3 { font: 600 20px/1.2 var(--fd); letter-spacing: -.02em; }
.pg-h p { font-size: 12.5px; color: var(--b-tx3); margin-top: 3px; }
.pg-sum { width: 200px; flex: none; }
.pg-sum p { margin: 0; font-size: 12.5px; color: var(--b-tx2); white-space: nowrap; }
.pg-sum b { font: 600 15px/1 var(--fd); color: var(--b-tx); letter-spacing: -.01em; margin-right: 3px; font-variant-numeric: tabular-nums; }
.pg-sum b i { font-style: normal; display: inline-block; } .pg-sum b i.tick { animation: tick .5s var(--ease); }
@keyframes tick { from { transform: translateY(45%); opacity: 0; } }
.kseg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 8px; }
.kseg i { height: 5px; border-radius: 2px; background: var(--b-track); transition: background .5s; } .kseg i.on { background: var(--b-ok); }

.todo { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 16px; margin-bottom: 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--b-you) 32%, var(--b-line)); background: var(--b-you-bg); transition: background .5s, border-color .5s; }
.todo-tx { min-width: 0; }
.todo-k { display: block; font-size: 11.5px; font-weight: 600; color: var(--b-you); transition: color .5s; }
.todo b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.todo small { font-size: 12px; color: var(--b-tx2); } .todo code { font-size: 11.5px; }
.todo-note { margin: 0 0 0 auto; font-size: 12px; color: var(--b-tx2); white-space: nowrap; }
.ubtn { height: 32px; padding: 0 16px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--b-btn); color: var(--b-btn-tx); box-shadow: 0 1px 2px rgba(28,32,36,.18), inset 0 1px 0 rgba(255,255,255,.18); transition: background .3s, color .3s; }
.todo.done { background: var(--b-ok-bg); border-color: color-mix(in srgb, var(--b-ok) 30%, var(--b-line)); }
.todo.done .todo-k { color: var(--b-ok); }
.todo.done .ubtn { width: 32px; padding: 0; border-radius: 50%; background: var(--b-ok); color: #fff; box-shadow: none; }
.todo.done .ubtn .ic { width: 15px; height: 15px; stroke-width: 2.6; }

.tbl { border: 1px solid var(--b-line); border-radius: 10px; overflow: hidden; }
.tr { --c: var(--b-ok); --cb: var(--b-ok-bg); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px 84px 108px 46px; gap: 12px; align-items: center; height: 42px; padding: 0 14px; border-top: 1px solid var(--b-line); transition: background .25s; }
.tr.th { height: 34px; border-top: 0; font-size: 12px; font-weight: 500; color: var(--b-tx3); background: var(--b-side); }
.tr span:last-child { text-align: right; }
.tr[data-s="run"] { --c: var(--b-tx2); --cb: var(--b-mut-bg); } .tr[data-s="warn"] { --c: var(--b-warn); --cb: var(--b-warn-bg); } .tr[data-s="sign"] { --c: var(--b-you); --cb: var(--b-you-bg); }
.tr:not(.th):hover, .tr.hot { background: var(--b-hover); }
.tr.sealing::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--b-ok) 14%, transparent) 50%, transparent 70%); animation: sweepx .9s var(--ease); }
@keyframes sweepx { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.c-n { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.c-n code { font: 500 11.5px var(--fm); color: var(--b-tx3); flex: none; }
.c-n b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-s { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 22px; padding: 0 8px 0 7px; border-radius: 99px; font-size: 12px; white-space: nowrap; color: var(--c); background: var(--cb); transition: color .4s, background .4s; }
.c-s i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.c-s b { font-weight: 500; }
.c-p { display: flex; align-items: center; gap: 8px; }
.caps { display: flex; gap: 2px; font-style: normal; }
.caps i { width: 8px; height: 4px; border-radius: 1.5px; background: var(--b-track); transition: background .45s; }
.caps[data-on="1"] i:nth-child(-n+1), .caps[data-on="2"] i:nth-child(-n+2), .caps[data-on="3"] i:nth-child(-n+3), .caps[data-on="4"] i:nth-child(-n+4), .caps[data-on="5"] i:nth-child(-n+5) { background: var(--b-fill); }
.c-p em { font-style: normal; font-size: 11.5px; color: var(--b-tx3); font-variant-numeric: tabular-nums; }
.c-o { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--b-tx2); white-space: nowrap; }
.c-d { font-size: 12.5px; color: var(--b-tx2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.app-rail { display: flex; flex-direction: column; gap: 20px; padding: 20px 18px; min-width: 0; border-left: 1px solid var(--b-line); }
.app-rail section + section { padding-top: 18px; border-top: 1px solid var(--b-line); }
.app-rail h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 13px/1.2 var(--fb); margin-bottom: 10px; }
.app-rail h4 span { font-size: 12px; font-weight: 400; color: var(--b-tx3); white-space: nowrap; }
.due li, .sup li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--b-tx2); }
.due time { width: 42px; flex: none; font-variant-numeric: tabular-nums; color: var(--b-tx); font-weight: 500; }
.due span, .sup span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.due em, .sup em { margin-left: auto; flex: none; font-style: normal; font-size: 11.5px; color: var(--b-tx3); white-space: nowrap; }
.due li:first-child time { color: var(--b-warn); } .due li.done time, .due li.done span { color: var(--b-tx3); text-decoration: line-through; } .due li.done em { color: var(--b-ok); }
.sup i { width: 6px; height: 6px; border-radius: 50%; background: var(--b-warn); flex: none; transform: translateY(-1px); } .sup em { color: var(--b-warn); font-weight: 500; }
.bfeed li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--b-tx2); padding: 6px 0; }
.bfeed li.new { animation: feedIn .6s var(--ease) both; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } }
.bfeed .av { margin-top: 1px; } .bfeed span { min-width: 0; }
.bfeed b { color: var(--b-tx); font-weight: 600; }
.bfeed time { margin-left: auto; padding-left: 6px; font-size: 11.5px; color: var(--b-tx3); flex: none; font-variant-numeric: tabular-nums; }

.board-toast { position: absolute; z-index: 6; left: 236px; bottom: -24px; display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 11px; border-radius: 14px; background: rgba(22,23,32,.92); color: #fff; border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 50px -16px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1); opacity: 0; transform: translateY(14px) scale(.95); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.board-toast.show { opacity: 1; transform: none; }
.board-toast b { display: block; font: 600 13.5px/1.25 var(--fb); }
.board-toast small { display: block; font: 400 11.5px/1.4 var(--fm); color: rgba(255,255,255,.6); margin-top: 1px; }
.seal-mini { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #07251E; display: grid; place-items: center; flex: none; }
.seal-mini .ic { width: 17px; height: 17px; stroke-width: 2.4; }
.seal-mini.lg { width: 48px; height: 48px; } .seal-mini.lg .ic { width: 24px; height: 24px; }

@media (max-width: 1180px) {
  .app { grid-template-columns: 176px minmax(0, 1fr); }
  .app-body { grid-template-columns: minmax(0, 1fr) 250px; }
  .tr { grid-template-columns: minmax(0, 1fr) 96px 52px 104px 46px; } .c-p em { display: none; }
  .app-search { width: 220px; } .todo-note { display: none; } .todo .ubtn { margin-left: auto; }
}
@media (max-width: 1020px) {
  .app { grid-template-columns: minmax(0, 1fr); } .app-side { display: none; }
  .board-toast { left: 28px; }
}
@media (max-width: 880px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-rail { border-left: 0; border-top: 1px solid var(--b-line); display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .app-rail section + section { border-top: 0; padding-top: 0; } .app-rail section:last-child { grid-column: 1 / -1; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--b-line); }
}
@media (max-width: 720px) {
  .app-top { padding: 0 14px; } .app-search { display: none; } .app-top .win-tag { margin-left: auto; }
  .app-col { padding: 16px 14px; }
  .pg-h { flex-direction: column; align-items: stretch; gap: 12px; } .pg-sum { width: auto; }
  .todo { flex-wrap: wrap; gap: 10px; padding: 12px; } .todo-tx { flex: 1; }
  .tr { grid-template-columns: minmax(0, 1fr) auto; height: 48px; padding: 0 12px; } .tr .c-p, .tr .c-o, .tr .c-d, .tr.th span:nth-child(n+3) { display: none; }
  .c-n { flex-direction: column; gap: 0; line-height: 1.3; }
  .app-rail { display: flex; padding: 16px 14px; gap: 16px; } .app-rail section + section, .app-rail section:last-child { padding-top: 16px; margin-top: 0; border-top: 1px solid var(--b-line); }
  .board-toast, .board .fcursor { display: none; }
}

/* ventanas de las demás pantallas (cómo funciona, radiografía, cartera) */
.win-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 400 12px/1 var(--fm); color: var(--tx-3); }
.win-dots { display: flex; gap: 6px; } .win-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.win-url { display: inline-flex; align-items: center; gap: 6px; } .win-url .ic { width: 12px; height: 12px; }
.win-bar .win-tag { margin-left: auto; }

/* ---------- Defense File ---------- */
.df { overflow-x: hidden; overflow-x: clip; }
.df-chaos { position: relative; height: 150px; max-width: 1040px; margin: 0 auto; }
.df-lbl { text-align: center; font: 500 11.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.dc { position: absolute; left: var(--x); top: var(--y); rotate: var(--r); display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: #1A1C36; border: 1px solid var(--line-2); font: 400 12px/1 var(--fm); color: var(--tx-2); white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); }
.dc .ic { width: 14px; height: 14px; color: var(--amber); }
.js .dc { animation: bob 7s ease-in-out infinite; animation-delay: calc(var(--d) * -1.1s); }
.df-stage.go .dc { animation: absorb 1.7s var(--ease) both; animation-delay: calc(var(--d) * 120ms + 1100ms); }
@keyframes absorb { 0% { opacity: 1; transform: none; } 52% { opacity: 0; transform: translate(var(--cx), 170px) scale(.45); } 53% { opacity: 0; transform: none; } 100% { opacity: .42; transform: none; border-style: dashed; } }
.df-arrow { display: flex; flex-direction: column; align-items: center; height: 54px; margin: 6px auto 12px; color: var(--mint); }
.df-arrow i { flex: 1; width: 2px; background: repeating-linear-gradient(180deg, var(--mint) 0 5px, transparent 5px 10px); background-size: 2px 10px; animation: flowy 1s linear infinite; opacity: .7; }
.df-arrow .ic { transform: rotate(90deg); margin-top: 2px; }
@keyframes flowy { to { background-position: 0 10px; } }

.dos { position: relative; border-radius: 22px; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(90% 60% at 100% 0%, rgba(149,117,252,.14), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(79,229,194,.07), transparent 60%), linear-gradient(180deg, #14162C, #0D0F20); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 80px 150px -60px rgba(0,0,0,.95), 0 0 120px -50px rgba(79,229,194,.4), inset 0 1px 0 rgba(255,255,255,.09); }
.dos-top { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.dos-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--mint); background: rgba(79,229,194,.12); box-shadow: inset 0 0 0 1px rgba(79,229,194,.3); }
.dos-name small { display: block; font: 500 10.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.dos-name b { display: block; font: 700 16.5px/1.3 var(--fd); letter-spacing: -.015em; margin-top: 4px; white-space: nowrap; }
.dos-meta { display: flex; gap: 22px; margin-left: 14px; padding-left: 24px; border-left: 1px solid var(--line); font-size: 12.5px; color: var(--tx-3); }
.dos-meta b { font: 700 15px var(--fd); color: #fff; margin-right: 5px; font-variant-numeric: tabular-nums; }
.df-state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px; color: var(--mint); background: rgba(79,229,194,.12); white-space: nowrap; }
.df-state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(79,229,194,.18); }
.dos-body { display: grid; grid-template-columns: 196px minmax(0, 1fr) 400px; }
.dos-tree { display: grid; gap: 2px; align-content: start; padding: 12px; border-right: 1px solid var(--line); background: rgba(0,0,0,.2); }
.dos-tree button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; color: var(--tx-2); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.dos-tree button .ic { width: 15px; height: 15px; color: var(--tx-3); transition: color .2s; }
.dos-tree button:hover { background: var(--s1); color: #fff; }
.dos-tree button.on { background: var(--s2); color: #fff; box-shadow: inset 0 0 0 1px var(--line); } .dos-tree button.on .ic { color: var(--mint); }
.dos-tree em { margin-left: auto; font: 400 11px var(--fm); font-style: normal; color: var(--tx-3); }
.dos-list { padding: 18px 16px; min-width: 0; }
.df-path { font: 500 11px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin: 0 0 12px 12px; }
.dos-list ol { display: grid; gap: 4px; }
.dos-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 24px; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid transparent; font-size: 13.5px; cursor: pointer; transition: background .25s, border-color .25s; }
.dos-list li:hover { background: var(--s1); }
.dos-list li.on { background: var(--s2); border-color: var(--line-2); }
.dos-list li.in { animation: rise .45s var(--ease) both; animation-delay: calc(var(--d) * 55ms); }
.df-cap { font: 400 11px var(--fm); color: var(--tx-3); }
.df-nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.df-hash { font-size: 11.5px; color: var(--tx-3); transition: color .3s; }
.df-seal { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(79,229,194,.14); color: var(--mint); }
.df-seal .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.js .df-stage:not(.go) .dos-list li { opacity: .18; } .js .df-stage:not(.go) .df-seal { transform: scale(0); }
.js .df-stage.go .dos-list li { transition: opacity .6s var(--ease) calc(var(--d) * 170ms + 1700ms), background .25s, border-color .25s; }
.js .df-stage.go .df-seal { transition: transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d) * 170ms + 2000ms); }
.js .df-stage.ready .dos-list li, .js .df-stage.ready .df-seal { transition-delay: 0s; }
.dos-list li.checking { border-color: rgba(52,189,226,.55); background: rgba(52,189,226,.07); } .dos-list li.checking .df-hash { color: var(--cyan); }
.dos-list li.verified .df-hash { color: var(--mint); }
.dos-list li.verified .df-seal { background: var(--mint); color: #06281F; box-shadow: 0 0 14px rgba(79,229,194,.6); }

.dos-prev { display: flex; flex-direction: column; gap: 18px; padding: 34px 22px 18px; border-left: 1px solid var(--line); background: radial-gradient(80% 55% at 50% 30%, rgba(149,117,252,.16), transparent 72%); }
.sheet-wrap { position: relative; rotate: -1.2deg; perspective: 900px; }
.sheet-wrap::before, .sheet-wrap::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: #DAD6EE; transform-origin: 50% 0; }
.sheet-wrap::before { transform: translateY(-13px) scale(.9); opacity: .3; } .sheet-wrap::after { transform: translateY(-7px) scale(.95); opacity: .55; }
.sheet-pill { position: absolute; z-index: 2; left: 16px; top: -12px; display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--fm); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; color: var(--mint); background: #11132A; border: 1px solid rgba(79,229,194,.55); box-shadow: 0 8px 18px -6px rgba(79,229,194,.55); white-space: nowrap; }
.sheet-pill .ic { width: 11px; height: 11px; stroke-width: 2.2; } .sheet-pill b { font-weight: 500; }
.sheet { position: relative; z-index: 1; overflow: hidden; border-radius: 10px; padding: 22px 20px 20px; min-height: 262px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out; color: #1B1A2B; background: linear-gradient(180deg, #FCFBFF, #EFEDF9); box-shadow: 0 34px 60px -26px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.6) inset; }
.sheet.swap { animation: sheetin .5s var(--ease); }
@keyframes sheetin { from { opacity: 0; transform: translateY(14px) rotate(1.5deg); } }
.sheet-h { display: flex; justify-content: space-between; gap: 10px; font: 500 9.5px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: #8A8CA0; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #E1DFEE; }
.sheet-h code { color: #6B48E8; }
.sheet-k { font: 500 10px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: #6B48E8; }
.sheet-t { font: 700 18px/1.25 var(--fd); letter-spacing: -.02em; margin: 7px 0 14px; min-height: 2.5em; padding-right: 30px; }
.sheet-l { display: block; height: 6px; border-radius: 3px; background: #DEDCEB; margin-bottom: 9px; } .sheet-l.s { width: 56%; } .sheet-l.m { width: 78%; }
.sheet-sig { width: 128px; margin-top: 12px; }
.sheet-sig svg { display: block; width: 120px; height: 36px; fill: none; stroke: #2A2860; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 0; }
.sheet.swap .sheet-sig svg, .df-stage.go .sheet-sig svg { animation: sign 1.1s var(--ease) .25s both; }
.df-stage.go:not(.ready) .sheet-sig svg { animation-delay: 2.2s; }
@keyframes sign { from { stroke-dashoffset: 320; } }
.sheet-sig span { display: block; border-top: 1px solid #C9C6DC; padding-top: 5px; font: 500 9px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: #6E7180; }
.js .df-stage:not(.go) .holo { opacity: 0; }
.df-stage.go .sheet .holo { animation: ang 9s linear infinite, stampin .6s cubic-bezier(.3,1.5,.5,1) 2.9s both; }
.df-stage.ready .sheet .holo { animation: ang 9s linear infinite; }
.sheet.swap .holo { animation: ang 9s linear infinite, stampin .55s cubic-bezier(.3,1.5,.5,1) .5s both !important; }
@keyframes stampin { from { opacity: 0; transform: scale(2.1) rotate(-18deg); } }
.sheet-scan { position: absolute; left: 0; right: 0; top: 0; height: 56px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(52,189,226,.3)); border-bottom: 1.5px solid #34BDE2; box-shadow: 0 6px 18px rgba(52,189,226,.5); }
.sheet.scan .sheet-scan { opacity: 1; animation: scan2 1s linear infinite; }
@keyframes scan2 { from { transform: translateY(-60px); } to { transform: translateY(300px); } }
.cust { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.cust::before { content: ""; position: absolute; left: 10%; right: 10%; top: 5px; height: 2px; background: linear-gradient(90deg, rgba(79,229,194,.25), var(--mint)); }
.cust li { position: relative; text-align: center; padding-top: 20px; }
.cust li::before { content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #11132A; border: 2px solid var(--mint); }
.cust li:last-child::before { background: var(--mint); box-shadow: 0 0 0 4px rgba(79,229,194,.2), 0 0 14px rgba(79,229,194,.8); }
.cust.run li { animation: rise .4s var(--ease) both; animation-delay: calc(var(--d) * 110ms + 150ms); }
.cust b { display: block; font-size: 11.5px; font-weight: 600; } .cust time { font: 400 10.5px var(--fm); color: var(--tx-3); }

.dos-foot { display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-top: 1px solid var(--line); border-radius: 0 0 22px 22px; background: rgba(0,0,0,.24); }
.hx span { display: block; font: 500 9.5px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 5px; }
.hx code { display: block; font-size: 12px; color: var(--tx-3); min-width: 14ch; transition: color .3s; }
.hx-eq { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 14px/1 var(--fm); font-style: normal; color: var(--tx-3); background: var(--s2); transition: background .3s, color .3s, transform .3s; }
.hx-eq.ok { background: rgba(79,229,194,.2); color: var(--mint); transform: scale(1.15); }
.dos-foot.ok .hx code { color: var(--mint); }
#dfMsg { margin-left: auto; font-size: 14px; line-height: 1.4; color: var(--tx-2); text-align: right; max-width: 36ch; transition: color .3s; }
#dfMsg.ok { color: var(--mint); font: 600 15.5px/1.35 var(--fd); letter-spacing: -.01em; }

/* ---------- Tutela ---------- */
.agents-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.tut { position: relative; display: flex; flex-direction: column; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(100% 50% at 50% -8%, rgba(149,117,252,.22), transparent 62%), linear-gradient(180deg, #14162C, #0D0F20); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 70px 140px -60px rgba(0,0,0,.95), 0 0 120px -46px rgba(149,117,252,.6), inset 0 1px 0 rgba(255,255,255,.09); }
.tut-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.tut-top b { display: flex; align-items: center; gap: 9px; font: 700 16px/1.2 var(--fd); }
.tut-top b code { font: 500 10px/1 var(--fm); letter-spacing: .04em; padding: 4px 7px; border-radius: 5px; color: var(--mint); border: 1px solid rgba(79,229,194,.4); background: rgba(79,229,194,.08); }
.tut-top small { display: block; font-size: 12px; color: var(--tx-3); margin-top: 2px; }
.tut-top .win-tag { margin-left: auto; }
.tut-ctx { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 18px 13px; border-bottom: 1px solid var(--line); font: 500 10px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.tut-ctx span { margin-right: 4px; }
.tut-ctx em { font: 500 11.5px/1 var(--fb); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--tx-2); padding: 5px 9px; border-radius: 99px; background: var(--s2); border: 1px solid var(--line); }
.tut-body { display: flex; flex-direction: column; gap: 13px; padding: 18px; }
.js .tm { display: none; }
.js .tm.show { display: block; animation: rise .45s var(--ease) both; }
.tm.me { align-self: flex-end; max-width: 86%; padding: 11px 15px; border-radius: 16px 16px 5px 16px; font-size: 14.5px; line-height: 1.45; color: #fff; background: linear-gradient(135deg, #6A4FE0, #5540C8); box-shadow: 0 12px 26px -12px rgba(95,69,214,.9), inset 0 1px 0 rgba(255,255,255,.18); }
.trace { display: grid; gap: 7px; padding-left: 2px; font-size: 12.5px; color: var(--tx-3); }
.js .tm.trace.show { display: grid; }
.trace li { display: flex; align-items: center; gap: 9px; }
.js .trace li { opacity: 0; transform: translateY(5px); transition: opacity .35s, transform .35s; } .js .trace li.on { opacity: 1; transform: none; }
.trace li i { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1.5px solid var(--line-2); border-top-color: var(--mint); animation: spin .7s linear infinite; }
.trace li.ok i, .trace .trace-sum i, html:not(.js) .trace li i { animation: none; border-color: transparent; background: rgba(79,229,194,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FE5C2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 9px no-repeat; }
.trace .trace-sum { display: none; } .trace.fold li { display: none; } .trace.fold .trace-sum { display: flex; opacity: 1; transform: none; animation: rise .4s var(--ease) both; }
.trace em { white-space: nowrap; font: 400 11px/1 var(--fm); font-style: normal; color: var(--tx-2); padding: 3px 7px; border-radius: 6px; background: var(--s2); }
.tm.bot { font-size: 14.5px; line-height: 1.55; }
.stream.typing::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 3px; border-radius: 1px; background: var(--mint); vertical-align: -2px; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.arts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.art { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 12px 13px 13px; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.js .art { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js .art.show { opacity: 1; transform: none; }
.art header { display: flex; align-items: center; gap: 6px; font: 500 10px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.art header .ic { width: 13px; height: 13px; color: var(--lav-2); }
.art b { font: 600 13.5px/1.3 var(--fd); letter-spacing: -.01em; }
.avs { display: flex; }
.avs i { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; margin-left: -7px; font: 700 9px var(--fd); font-style: normal; color: #0B0C1A; border: 2px solid #191B35; background: var(--mint); }
.avs i:first-child { margin-left: 0; } .avs i:nth-child(2) { background: var(--cyan); } .avs i:nth-child(3) { background: var(--lav-2); } .avs i:nth-child(4) { background: #FFD9A0; }
.avs i:last-child { background: #2A2D4E; color: var(--tx-2); }
.art-st { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 12px; color: var(--mint); } .art-st .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.mini { display: grid; gap: 5px; padding: 9px 10px; border-radius: 7px; background: #F6F5FB; }
.mini i { height: 4px; border-radius: 2px; background: #D9D7E8; } .mini .hl { background: #A98BFF; box-shadow: 0 0 0 3px rgba(149,117,252,.22); } .mini .s { width: 60%; }
.art-btn { position: relative; overflow: hidden; margin-top: auto; padding: 10px 10px; border: 0; border-radius: 9px; background: #fff; color: #0C0D1C; font: 700 12.5px/1 var(--fd); cursor: pointer; box-shadow: 0 8px 20px -8px rgba(255,255,255,.5); transition: transform .2s var(--ease); }
.art-btn:hover { transform: translateY(-1px); }
.art-btn .t-b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--mint); color: #06281F; opacity: 0; transition: opacity .3s; } .art-btn .t-b .ic { width: 14px; height: 14px; stroke-width: 2.8; }
.art-btn.done { pointer-events: none; box-shadow: 0 8px 20px -8px rgba(79,229,194,.7); } .art-btn.done .t-b { opacity: 1; }
.cite { display: flex; align-items: center; gap: 7px; margin-top: 11px; font: 400 11px/1.4 var(--fm); color: var(--mint); } .cite .ic { width: 13px; height: 13px; }
.js .cite { opacity: 0; transition: opacity .5s; } .js .cite.show { opacity: 1; }
.tm.evt { align-self: flex-end; font-size: 12.5px; color: var(--tx-2); padding: 7px 12px; border-radius: 99px; border: 1px dashed var(--line-2); }
.tm.evt, .js .tm.evt.show { display: inline-flex; align-items: center; gap: 7px; } .js .tm.evt:not(.show) { display: none; }
.tm.evt .ic { width: 13px; height: 13px; color: var(--mint); stroke-width: 2.6; }
.steps3 { margin-top: 12px; padding: 5px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--s1); }
.steps3 li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; color: var(--tx-3); }
.steps3 li + li::before { content: ""; position: absolute; left: 7.5px; top: -8px; width: 1px; height: 16px; background: var(--line-2); }
.steps3 li i { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 1.5px solid var(--line-2); background: #14162B; position: relative; z-index: 1; }
.steps3 li.is-done, .steps3 li.is-now { color: #fff; }
.steps3 li.is-done i { border-color: transparent; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306281F' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 10px no-repeat; }
.steps3 li.is-now i { border-color: var(--lav-2); box-shadow: 0 0 0 4px rgba(149,117,252,.22); animation: pulse 1.8s ease-in-out infinite; }
.tut-sug { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; margin-top: auto; }
.tut-sug span { font-size: 12px; color: var(--tx-2); padding: 7px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--s1); }
.tut-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 18px 18px; padding: 10px 10px 10px 16px; border-radius: 14px; background: #10122A; font-size: 14px; color: var(--tx-3); }
.tut-in::before { content: ""; position: absolute; inset: -1px; border-radius: 15px; padding: 1px; pointer-events: none; background: conic-gradient(from var(--ang), rgba(79,229,194,.8), rgba(52,189,226,.15), rgba(149,117,252,.9), rgba(149,117,252,.15), rgba(79,229,194,.8)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: ang 6s linear infinite; }
.tut-in i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; color: #0C0D1C; }
.tut-in .ic { width: 15px; height: 15px; stroke-width: 2.2; transform: rotate(-90deg); }

/* Marco de los tres componentes: doble bisel, destello superior y brillo de esquina */
.board, .dos, .tut { box-shadow: 0 0 0 6px rgba(255,255,255,.028), 0 0 0 7px rgba(255,255,255,.07), 0 0 0 8px rgba(0,0,0,.5), 0 90px 170px -60px rgba(0,0,0,.95), 0 34px 70px -34px var(--glow, rgba(88,66,214,.5)), inset 0 1px 0 rgba(255,255,255,.1); }
.dos { --glow: rgba(79,229,194,.34); } .tut { --glow: rgba(149,117,252,.6); }
.board::before, .dos::before, .tut::before { content: ""; position: absolute; z-index: 5; left: 14%; right: 14%; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(149,117,252,.95) 30%, rgba(79,229,194,.95) 70%, transparent); box-shadow: 0 0 14px 1px rgba(125,190,240,.55); }
.board::after, .dos::after, .tut::after { content: ""; position: absolute; z-index: 3; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: radial-gradient(320px 240px at 5% 0%, rgba(255,255,255,.5), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

/* Las animaciones continuas se pausan cuando el componente no está a la vista */
.js .agent-list:not(.live) .orbav, .js .board:not(.live) *, .js .board:not(.live) *::before, .js .board:not(.live) *::after, .js .dos:not(.live) *, .js .dos:not(.live) *::before, .js .dos:not(.live) *::after, .js .tut:not(.live) *, .js .tut:not(.live) *::before, .js .tut:not(.live) *::after { animation-play-state: paused !important; }

/* ---------- Componentes · responsive ---------- */
@media (max-width: 1180px) {
  .dos-body { grid-template-columns: 180px minmax(0, 1fr) 340px; }
}
@media (max-width: 1020px) {
  .dos-body { grid-template-columns: 170px minmax(0, 1fr); } .dos-prev { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); flex-direction: row; align-items: center; } .dos-prev .sheet-wrap { flex: 1; max-width: 360px; } .dos-prev .cust { flex: 1; }
  .dos-meta { display: none; }
  .dc:nth-of-type(7) { left: auto; right: 0; }
}
@media (max-width: 960px) {
  .agents-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .fcursor { display: none; }
  .df-chaos { height: 236px; max-width: 360px; }
  .dc { font-size: 11px; padding: 8px 10px; --cx: 0px !important; }
  .dc:nth-of-type(1) { left: 0; top: 30px; } .dc:nth-of-type(2) { left: 30%; top: 70px; } .dc:nth-of-type(3) { left: 8%; top: 112px; } .dc:nth-of-type(4) { left: 42%; top: 150px; }
  .dc:nth-of-type(5) { left: 2%; top: 188px; } .dc:nth-of-type(6) { left: 46%; top: 30px; } .dc:nth-of-type(7) { display: none; }
  .dos-top { padding: 14px 16px; flex-wrap: wrap; } .dos-name b { white-space: normal; font-size: 15px; } .df-state { font-size: 11.5px; padding: 6px 10px; }
  .dos-body { grid-template-columns: minmax(0, 1fr); }
  .dos-tree { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; gap: 6px; scrollbar-width: none; } .dos-tree::-webkit-scrollbar { display: none; }
  .dos-tree button { width: auto; flex: none; white-space: nowrap; padding: 8px 11px; } .dos-tree em { margin-left: 4px; }
  .dos-list { padding: 14px 10px; } .dos-list li { grid-template-columns: minmax(0, 1fr) 24px; gap: 4px 10px; } .df-cap { display: none; } .df-hash { grid-column: 1; grid-row: 2; } .df-seal { grid-column: 2; grid-row: 1 / span 2; }
  .dos-prev { flex-direction: column; align-items: stretch; padding: 36px 14px 18px; } .dos-prev .sheet-wrap { max-width: none; rotate: 0deg; }
  .dos-foot { flex-wrap: wrap; gap: 12px 14px; padding: 14px 16px; } .dos-foot .btn { width: 100%; } #dfMsg { margin-left: 0; text-align: left; max-width: none; width: 100%; }
  .tut-body { padding: 14px; } .tm.me { max-width: 92%; } .arts { grid-template-columns: 1fr; } .tut-sug span:nth-child(2) { display: none; } .tut-sug, .tut-in { margin-left: 14px; margin-right: 14px; padding-left: 0; padding-right: 0; } .tut-in { padding: 10px 10px 10px 14px; }
}

.js .measure .tm { display: block !important; animation: none !important; }
.js .steps3 { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); } .js .steps3.show { opacity: 1; transform: none; }

/* ==========================================================================
   DESPACHOS
   ========================================================================== */
.hero-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.hero-firm { padding-bottom: clamp(56px, 7vw, 96px); }
.hero-stage-flat { position: relative; z-index: 2; margin-top: clamp(48px, 6vw, 72px); animation: rise 1s var(--ease) .35s both; }
.hero-stage-flat .analogy { margin-bottom: 0; text-align: left; }
.an-3 { grid-template-columns: 1fr 56px 1fr 56px 1.25fr; }

.split { display: grid; grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); }
.split-col { padding: 34px 36px 38px; }
.split-us { border-left: 1px solid var(--line); background: linear-gradient(140deg, rgba(79,229,194,.09), rgba(149,117,252,.13)); }
.split-h { display: flex; align-items: center; gap: 10px; font: 700 19px var(--fd); letter-spacing: -.02em; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.split-h .ic { color: var(--lav-2); }
.split li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; font-size: 16px; color: var(--tx-2); border-bottom: 1px dashed var(--line); }
.split li:last-child { border-bottom: 0; padding-bottom: 0; }
.split li .ic { width: 18px; height: 18px; color: var(--mint); margin-top: 4px; stroke-width: 2.2; }
.split-us li { color: #fff; }

.port { border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #15172E, #0F1124); box-shadow: 0 60px 130px -50px rgba(0,0,0,.95), 0 0 110px -40px rgba(149,117,252,.5); }
.port-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.port-stats div { --c: #fff; padding: 22px 26px; border-left: 1px solid var(--line); }
.port-stats div:first-child { border-left: 0; }
.port-stats b { display: block; font: 700 36px/1 var(--fd); letter-spacing: -.03em; color: var(--c); }
.port-stats span { font-size: 13.5px; color: var(--tx-3); }
.s-ok { --c: var(--mint) !important; } .s-warn { --c: var(--amber) !important; } .s-call { --c: var(--lav-2) !important; }
.port-rows { padding: 8px; }
.port-r { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1.4fr; gap: 20px; align-items: center; padding: 14px 18px; border-radius: 12px; font-size: 14px; color: var(--tx-2); }
.port-r:not(.port-h):hover { background: var(--s1); }
.port-h { font: 500 11px var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); padding-top: 10px; padding-bottom: 10px; }
.pc b { display: block; color: #fff; font-weight: 600; font-size: 15px; } .port-r small { display: block; font-size: 12.5px; color: var(--tx-3); margin-top: 2px; }
.port-r em { display: inline-block; font: 600 12px/1 var(--fb); font-style: normal; padding: 6px 11px; border-radius: 99px; }
em.call { color: var(--lav-2); background: rgba(149,117,252,.18); box-shadow: inset 0 0 0 1px rgba(149,117,252,.5); }
.stg { display: flex; align-items: center; gap: 5px; }
.stg i { width: 22px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); }
.stg[data-n="1"] i:nth-child(-n+1), .stg[data-n="2"] i:nth-child(-n+2), .stg[data-n="3"] i:nth-child(-n+3), .stg[data-n="4"] i:nth-child(-n+4) { background: var(--cyan); }
.stg[data-n="4"] i { background: var(--mint) !important; }
.port-r .stg em { padding: 0 0 0 6px; font: 400 11.5px var(--fm); color: var(--tx-3); }

.brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.brand .sec-head { margin-bottom: 0; }
.brand-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; font-size: 14.5px; color: var(--tx-2); }
.paper-lg { min-height: 0; padding: 28px 28px 24px; rotate: 1.2deg; border-radius: 14px; }
.bd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px solid #1B1A2B; min-height: 56px; }
.bd-head small { font: 500 10.5px var(--fm); letter-spacing: .1em; text-transform: uppercase; color: #6E7180; margin-left: auto; }
.bd-firm { display: inline-flex; align-items: center; gap: 10px; font: 800 17px var(--fd); letter-spacing: -.02em; }
.bd-firm i { width: 34px; height: 34px; border-radius: 9px; background: #1B1A2B; color: #fff; display: grid; place-items: center; font: 800 12px var(--fd); font-style: normal; }
.bd-aud img { height: 24px; width: auto; display: block; }
[data-brand="firm"] .bd-aud, [data-brand="aud"] .bd-firm { display: none; }
.brand-doc .paper-t { font-size: 21px; margin-bottom: 18px; }
.bd-row { display: grid; grid-template-columns: 1fr 90px 58px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #E4E2EF; font-size: 13.5px; }
.bd-row i { height: 6px; border-radius: 99px; background: #E4E2EF; position: relative; overflow: hidden; }
.bd-row i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 99px; background: #6B48E8; }
.bd-row b { font-size: 12px; text-align: right; color: #4A3BB0; }
.bd-foot { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid #E4E2EF; font: 500 11px var(--fm); color: #6E7180; }
.bd-foot .bd-firm { font: inherit; letter-spacing: 0; }
.brand-doc { filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); }

.cmp-firm .cmp-r span:last-child { color: var(--mint); font-weight: 500; }
.final { overflow: hidden; } .final .wrap { position: relative; } .final .sec-head { margin-bottom: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .now-line { grid-template-columns: repeat(3, 1fr); row-gap: 34px; }
  .now-line li:nth-child(n+4) { border-top: 1px solid var(--line-2); margin-top: -1px; }
}
@media (max-width: 960px) {
  .nav-links, .nav-login { display: none; }
  .nav-burger { display: block; }
  .nav-in { gap: 16px; } .nav-act { margin-left: auto; gap: 12px; }
  .nav-mobile.open { display: flex; }
  .trio, .prob-grid { grid-template-columns: 1fr; }
  .nots { grid-template-columns: 1fr; gap: 16px; } .nots ul { grid-template-columns: 1fr; gap: 12px; }
  .agents-grid, .trust-grid, .faq-grid { grid-template-columns: 1fr; }
  .sign, .faq .sec-head { position: static; }
  .faq .sec-head { margin-bottom: 32px; }
  .firm-card { flex-direction: column; align-items: flex-start; }
  .rxt { grid-template-columns: 1fr; grid-template-areas: "ctl" "out" "lead"; }
  .rxt-out { border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .rxt-lead { padding-top: 8px; } .rxt-form, .rxt-ok { border-top: 0; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .an-row { grid-template-columns: 1fr; gap: 0; }
  .an-line { width: 1px; height: 16px; margin: 0 auto; background: var(--line-2) !important; animation: none !important; }
  .an-new .an-line { width: 2px; background: var(--mint) !important; }
  .an-node { min-height: 0; }
  .analogy { grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .an-row { align-content: start; }
}
@media (max-width: 720px) {
  :root { --gut: 18px; }
  body.aud { font-size: 16px; }
  .hero { padding-top: 112px; }
  .hero-chip { font-size: 11px; line-height: 1.4; text-align: left; border-radius: 14px; }
  .hero-cta { display: flex; flex-direction: column; width: 100%; border-radius: 20px; }
  .hero-field { padding: 8px 12px 6px; } .hero-field input { width: 100%; }
  .hero-note a { display: block; margin: 8px 0 0; }
  .hero-orbit { width: 760px; height: 760px; margin-left: -380px; top: -60px; }
  .board { --tilt: 0deg !important; --sc: 1 !important; }
  .win-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .analogy { grid-template-columns: 1fr; }
  .now-line { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-2); row-gap: 0; }
  .now-line li { padding: 0 0 26px 22px; border-top: 0 !important; margin-top: 0 !important; }
  .now-line li::before { left: -5px; top: 5px; }
  .agent h3 small { display: block; margin: 2px 0 0; }
  .cmp-h { display: none; }
  .cmp-r { grid-template-columns: 1fr; gap: 5px; padding: 18px 20px; font-size: 14.5px; }
  .cmp-r:nth-child(2) { border-top: 0; }
  .cmp-r:not(.cmp-us) span:nth-child(2)::before { content: "Hace bien · "; color: var(--mint); font: 500 10.5px var(--fm); text-transform: uppercase; letter-spacing: .06em; }
  .cmp-r:not(.cmp-us) span:nth-child(3)::before { content: "Le falta · "; color: var(--amber); font: 500 10.5px var(--fm); text-transform: uppercase; letter-spacing: .06em; }
  .proof { grid-template-columns: 1fr; padding: 24px 22px; } .proof-n b { font-size: 48px; }
  .faq-list summary { font-size: 17px; padding: 18px 0; } .faq-list details p { padding-right: 8px; }
  .rxt-ctl { padding: 24px 20px 20px; } .rxt-lead { padding: 8px 20px 24px; } .rxt-pad { padding: 20px; }
  .rxt-fields, .rxt-expo { grid-template-columns: 1fr; }
  .rxt-row { align-items: flex-start; flex-direction: column; gap: 10px; }
  .rxt-list li { grid-template-columns: 70px 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-bot { flex-direction: column; gap: 10px; } .foot-bot span:last-child { text-align: left; }
  .wa { right: 14px; bottom: 14px; }
  .aurora { animation: none; filter: blur(70px); }
}

/* Despachos · responsive */
@media (max-width: 960px) {
  .an-3 { grid-template-columns: 1fr; }
  .hero-stage-flat .analogy { grid-template-columns: 1fr; max-width: 520px; }
  .split { grid-template-columns: 1fr; } .split-us { border-left: 0; border-top: 1px solid var(--line); }
  .brand-grid { grid-template-columns: 1fr; } .brand .sec-head { margin-bottom: 8px; }
  .port-stats { grid-template-columns: 1fr 1fr; } .port-stats div:nth-child(3) { border-left: 0; } .port-stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .port-h { display: none; }
  .port-r { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px 14px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .port-r:last-child { border-bottom: 0; }
}
@media (max-width: 720px) {
  .split-col { padding: 26px 22px 28px; }
  .port-stats div { padding: 16px 18px; } .port-stats b { font-size: 28px; }
  .port-r { grid-template-columns: 1fr; }
  .paper-lg { padding: 22px 20px; rotate: 0deg; } .bd-row { grid-template-columns: 1fr 50px 52px; font-size: 12.5px; }
  .cmp-firm .cmp-r span:nth-child(2)::before { content: "Por qué · " !important; }
  .cmp-firm .cmp-r span:nth-child(3)::before { content: "Empieza con · " !important; color: var(--mint) !important; }
}

/* ==========================================================================
   SERVICIOS
   Página /servicios: índice, navegación lateral con posición y un bloque por servicio.
   Las pantallas de ejemplo (.sv-win) usan los mismos tokens claros --b-* del tablero.
   ========================================================================== */
.aud-servicios .nav-links a[data-nav="servicios"], .aud-despachos .nav-links a[data-nav="despachos"] { color: #fff; }

/* Inicio: cada tarjeta de solución y cada servicio de la consola llevan a su detalle */
.sol-a { text-decoration: none; }
.sol-a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.sol-arr { width: 17px; height: 17px; margin-left: auto; color: var(--tx-3); opacity: .55; transition: opacity .25s, transform .25s var(--ease), color .25s; }
.sol:hover .sol-arr, .sol:focus-within .sol-arr { opacity: 1; transform: translateX(3px); color: var(--mint); }
.sols-h .link { white-space: nowrap; }
.cov-more, .svc-go { display: inline-flex; align-items: center; gap: 7px; font: 600 14.5px/1 var(--fd); letter-spacing: -.01em; color: var(--lav-2); text-decoration: none; white-space: nowrap; transition: color .2s; }
.cov-more .ic, .svc-go .ic { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.cov-more:hover, .svc-go:hover { color: #fff; } .cov-more:hover .ic, .svc-go:hover .ic { transform: translateX(3px); }
.cov-more { margin-top: 20px; }

/* ---------- Hero e índice ---------- */
.hero-sv { padding-bottom: clamp(36px, 5vw, 60px); }
.hero-sv .hero-in { max-width: 940px; }
.sv-idx { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 72px); text-align: left; animation: rise 1s var(--ease) .35s both; }
.sv-idx-t { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.sv-idx-t b { font: 500 12px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.sv-idx-t span { font-size: 14px; color: var(--tx-3); }
.sv-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, #14162B, #0F1123); text-decoration: none; overflow: hidden; transition: border-color .3s, transform .35s var(--ease); }
.sv-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.sv-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sv-card-h em { font: 500 11.5px/1 var(--fm); font-style: normal; letter-spacing: .06em; color: var(--tx-3); transition: color .25s; }
.sv-card:hover .sv-card-h em { color: var(--mint); }
.sv-card b { font: 600 16.5px/1.25 var(--fd); letter-spacing: -.02em; }
.sv-card > span:last-child { font-size: 13.5px; line-height: 1.45; color: var(--tx-2); }

/* ---------- El reparto ---------- */
.sv-split { padding-top: clamp(20px, 3vw, 36px); }
.sv-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.7fr); gap: clamp(24px, 4vw, 52px); align-items: center; padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 36px); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--s1); }
.sv-who .eyebrow { margin-bottom: 14px; }
.sv-who .h3 { font-size: clamp(21px, 2.1vw, 26px); }
.sv-who ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-who li { padding: 2px 0 2px 20px; border-left: 1px solid var(--line); }
.sv-who li + li { margin-left: 20px; }
.sv-who li > span { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.sv-who li > span .ic { width: 16px; height: 16px; }
.sv-who li.is-you > span { color: var(--mint); background: rgba(79,229,194,.12); border-color: rgba(79,229,194,.32); }
.sv-who li b { display: block; font: 600 15.5px/1.3 var(--fd); letter-spacing: -.015em; margin: 12px 0 6px; }
.sv-who li p { font-size: 13.5px; line-height: 1.5; color: var(--tx-2); }

/* ---------- Índice lateral + lista ---------- */
.sv-lay { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: clamp(36px, 4.5vw, 64px); align-items: start; padding-top: clamp(44px, 5.5vw, 76px); padding-bottom: clamp(24px, 3vw, 40px); position: relative; }
.sv-toc { position: sticky; top: 104px; }
.sv-toc-btn { display: none; }
.sv-toc-list { position: relative; display: grid; padding-left: 16px; border-left: 1px solid var(--line); }
.sv-toc-t { font: 500 11px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); padding: 2px 0 4px; }
.sv-toc-g { font-size: 12px; line-height: 1; color: var(--tx-3); padding: 20px 0 7px; }
.sv-toc-list > a[data-name] { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--tx-2); text-decoration: none; transition: color .2s; }
.sv-toc-list > a[data-name] i { flex: none; font: 400 11px var(--fm); font-style: normal; color: var(--tx-3); transition: color .2s; }
.sv-toc-list > a[data-name] { padding-left: 10px; margin-left: -10px; border-radius: 8px; }
.sv-toc-list > a[data-name]:hover, .sv-toc-list > a.on { color: #fff; }
.sv-toc-list > a.on { background: rgba(149,117,252,.14); box-shadow: inset 0 0 0 1px rgba(149,117,252,.25); font-weight: 600; }
.sv-toc-list > a.on i { color: var(--mint); }
.sv-toc-hl { position: absolute; left: -1.5px; top: 0; width: 2px; height: var(--h, 0px); border-radius: 2px; background: linear-gradient(180deg, var(--mint), var(--lav)); transform: translateY(var(--y, 0px)); transition: transform .4s var(--ease), height .4s var(--ease); }
.sv-toc-cta { display: grid; gap: 6px; margin-top: 26px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--s1); text-decoration: none; font-size: 13px; line-height: 1.3; color: var(--tx-3); transition: border-color .25s, background .25s; }
.sv-toc-cta b { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.2 var(--fd); color: #fff; }
.sv-toc-cta .ic { width: 15px; height: 15px; color: var(--mint); transition: transform .25s var(--ease); }
.sv-toc-cta:hover { border-color: var(--line-2); background: var(--s2); } .sv-toc-cta:hover .ic { transform: translateX(3px); }

.sv-list { min-width: 0; }
.sv-grp { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sv-grp b { font: 500 12px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.sv-grp span { font-size: 14px; color: var(--tx-3); }
.svc + .sv-grp { margin-top: clamp(40px, 5vw, 72px); }

/* ---------- Bloque de servicio ---------- */
.svc { padding: clamp(28px, 3.5vw, 44px) 0 clamp(34px, 4.5vw, 56px); }
.svc + .svc { border-top: 1px solid var(--line); }
.svc-k { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.svc-no { font: 500 12px/1 var(--fm); letter-spacing: .08em; color: var(--tx-3); }
.svc-k h2 { font: 600 17.5px/1.2 var(--fd); letter-spacing: -.015em; color: #fff; }
.svc-tag { font-size: 12.5px; line-height: 1; font-weight: 500; color: var(--tx-2); padding: 7px 11px; border-radius: 99px; border: 1px solid var(--line-2); }
.svc-tx { max-width: 720px; margin-bottom: clamp(20px, 2.6vw, 28px); }
.svc-inc-w { display: flex; align-items: flex-start; gap: 14px 18px; flex-wrap: wrap; margin: 22px 0 0; }
.svc-inc-w .svc-l { margin: 8px 0 0; flex: none; }
.svc-h { font: 600 clamp(25px, 2.6vw, 35px)/1.13 var(--fd); letter-spacing: -.032em; text-wrap: balance; }
.svc-h span { display: block; }
.svc-lead { font-size: 16.5px; line-height: 1.6; color: var(--tx-2); margin-top: 16px; text-wrap: pretty; }
.svc-l { font: 500 12.5px/1 var(--fm); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-2); margin: 26px 0 13px; }
.svc-inc { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.svc-inc li { position: relative; padding: 7px 12px 7px 32px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 14px; line-height: 1.35; color: var(--tx); }
.svc-inc li::before { content: ""; position: absolute; left: 10px; top: 8px; width: 17px; height: 17px; border-radius: 50%; background: rgba(79,229,194,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FE5C2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.svc-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; border-radius: var(--r); border: 1px solid var(--line); background: var(--s1); overflow: hidden; }
.svc-rows > div { padding: 18px 20px 20px; }
.svc-rows > div + div { border-left: 1px solid var(--line); }
.svc-rows dt { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 10px; }
.svc-rows dt img { width: 12px; height: auto; } .svc-rows dt .ic { width: 14px; height: 14px; }
.svc-rows dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--tx); }
.svc-rows .is-df { background: linear-gradient(120deg, rgba(79,229,194,.07), rgba(149,117,252,.11)); }
.svc-rows .is-df dt { color: var(--mint); }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; }
.svc-fact { font-size: 14px; line-height: 1.5; color: var(--tx-2); max-width: 64ch; }
.svc-fact b { font-weight: 600; color: var(--tx-2); }
.svc-foot .svc-go { margin-left: auto; }

/* ---------- Pantallas de ejemplo ---------- */
.svc-viz { position: relative; }
.sv-win { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; background: var(--b-bg); color: var(--b-tx); font: 400 13px/1.45 var(--fb); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 80px -30px rgba(0,0,0,.9); }
.sv-bar { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; background: var(--b-side); border-bottom: 1px solid var(--b-line); }
.sv-bar b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.sv-bar > span { flex: 1; min-width: 0; font-size: 12px; color: var(--b-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-bar code { font: 500 10.5px/1 var(--fm); color: var(--b-you); background: var(--b-you-bg); padding: 4px 7px; border-radius: 99px; }
.sv-eg { margin-left: auto; flex: none; font: 400 10px/1 var(--fm); font-style: normal; padding: 4px 7px; border: 1px solid var(--b-line2); border-radius: 99px; color: var(--b-tx3); }
.sv-bd { padding: 6px 14px 12px; }
.sv-pills { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 14px 0; }
.sv-pills span { font: 500 11px/1 var(--fm); padding: 5px 8px; border-radius: 6px; border: 1px solid var(--b-line); color: var(--b-tx3); }
.sv-pills .on { background: var(--b-tx); border-color: var(--b-tx); color: #fff; }
.sv-prog { display: grid; gap: 6px; padding: 8px 0 12px; }
.sv-prog b { font-size: 12.5px; font-weight: 600; } .sv-prog small { font-size: 11.5px; color: var(--b-tx3); }
.fc-bar.is-warn::after { background: var(--b-warn); } .fc-bar.is-ok::after { background: var(--b-ok); }
.sv-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 50px; border-top: 1px solid var(--b-line); }
.sv-row b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.sv-row small { display: block; font-size: 11.5px; color: var(--b-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-dot { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.sv-dot .ic { width: 10px; height: 10px; stroke-width: 3.2; }
.sv-dot.ok { background: var(--b-ok-bg); color: var(--b-ok); }
.sv-dot.run { border: 1.5px dashed var(--b-line2); }
.sv-dot.you { background: radial-gradient(circle, var(--b-you) 0 3.5px, var(--b-you-bg) 4px); }

.sv-th, .sv-tr { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 10px; }
.sv-t-pl { --cols: minmax(0, 1.5fr) minmax(0, 1fr) 62px 104px; }
.sv-t-cs { --cols: 44px minmax(0, 1fr) auto; }
.sv-t-rp { --cols: minmax(0, 1.2fr) minmax(0, 1.15fr) minmax(0, .95fr) 62px; }
.sv-t-sg { --cols: minmax(0, 1fr) auto; }
.sv-t-df { --cols: 18px minmax(0, 1fr) auto 16px; }
.sv-th { min-height: 30px; font-size: 11.5px; color: var(--b-tx3); }
.sv-tr { min-height: 42px; padding: 5px 0; border-top: 1px solid var(--b-line); font-size: 12.5px; color: var(--b-tx2); }
.sv-tr > span { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; }
.sv-tr > span:first-child { color: var(--b-tx); font-weight: 500; }
.sv-tr > .sv-2l { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; }
.sv-tr b { font-weight: 600; } .sv-tr small { font: 400 10.5px var(--fm); color: var(--b-tx3); }
.sv-tr code, .sv-tr em { font: 400 11px var(--fm); font-style: normal; color: var(--b-tx3); }
.sv-tr > code:first-child { font-weight: 500; color: var(--b-tx2); }
.sv-tr > .is-warn { white-space: normal; line-height: 1.25; font-weight: 500; color: var(--b-warn); }
.sv-tr .bdg { justify-self: start; }
.sv-t-sg .bdg, .sv-t-cs .bdg { justify-self: end; }
.sv-tr.is-sel { margin: 0 -14px; padding-left: 14px; padding-right: 14px; background: var(--b-hover); box-shadow: inset 2px 0 0 var(--b-you); }
.sv-tb > .sv-tr:first-child { border-top: 0; }

.sv-sub { margin-top: 10px; padding: 12px 12px 4px; border-radius: 10px; border: 1px solid var(--b-line); background: var(--b-side); }
.sv-sub > p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.sv-sub b { font-size: 12.5px; font-weight: 600; }
.sv-sub small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--b-tx3); }
.sv-sub small .ic { width: 12px; height: 12px; }
.sv-sub .cs-steps { border-top: 0; padding: 0 0 8px; }
.sv-steps4 { grid-template-columns: repeat(4, 1fr); }
.sv-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 10px; padding: 11px 12px; border-radius: 10px; background: var(--b-you-bg); font-size: 12.5px; line-height: 1.45; color: var(--b-tx); }
.sv-note .av { margin-top: 1px; }
.sv-note b { display: block; font-size: 12px; font-weight: 600; color: var(--b-you); margin-bottom: 1px; }
.sv-note small { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: var(--b-tx2); }
.sv-note small .ic { width: 12px; height: 12px; }
.av-nor { background: conic-gradient(from 210deg, #D6FFE4, #4FE5C2, #12B58C, #F2ECA6, #D6FFE4); }
.sv-ft { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 10px 14px; border-top: 1px solid var(--b-line); background: var(--b-side); font-size: 11.5px; color: var(--b-tx3); }
.sv-ft em { font-style: normal; font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 99px; background: var(--b-bg); border: 1px solid var(--b-line2); color: var(--b-tx2); }
.sv-ft code { font-size: 11.5px; color: var(--b-tx); }
.sv-ft .bdg { margin-left: auto; }

/* Tutela */
.sv-chat .sv-bd { display: grid; gap: 10px; padding: 14px; }
.sv-q { justify-self: end; max-width: 86%; padding: 8px 12px; border-radius: 12px 12px 3px 12px; background: var(--b-you); color: #fff; }
.sv-a { display: grid; gap: 8px; }
.sv-ref { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--b-line); }
.sv-ref time { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-ref b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sv-ref small { display: block; font-size: 11.5px; color: var(--b-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-ref .fc-btn { min-width: 0; height: 26px; }
.sv-cite { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--b-tx2); }
.sv-cite .ic { width: 13px; height: 13px; color: var(--b-you); }
.sv-sug { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.sv-sug span { flex: none; font-size: 11.5px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--b-line2); color: var(--b-tx2); white-space: nowrap; }
.sv-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 14px 14px; padding: 8px 8px 8px 13px; border-radius: 10px; border: 1px solid var(--b-line2); font-size: 12.5px; color: var(--b-tx3); }
.sv-in i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--b-btn); color: #fff; }
.sv-in .ic { width: 14px; height: 14px; }

/* Evaluaciones y firmas: dos paneles */
.sv-eval-g, .sv-sign-g { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 16px; padding: 14px; align-items: start; }
.sv-phone { display: grid; gap: 5px; padding: 14px 10px 11px; border-radius: 20px; border: 5px solid #1C2024; background: #fff; box-shadow: 0 12px 26px -14px rgba(0,0,0,.45); }
.sv-phone-k { font: 500 9.5px/1 var(--fm); letter-spacing: .08em; text-transform: uppercase; color: var(--b-you); }
.sv-phone-q { font: 600 12.5px/1.3 var(--fd); letter-spacing: -.01em; margin: 2px 0 4px; }
.sv-phone > span { font-size: 11px; line-height: 1.2; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--b-line2); color: var(--b-tx2); }
.sv-phone > span.on { border-color: var(--b-you); background: var(--b-you-bg); color: var(--b-you); font-weight: 600; }
.sv-phone-b { display: grid; place-items: center; height: 28px; margin-top: 4px; border-radius: 8px; background: var(--b-btn); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 600; }
.sv-res .sv-prog { padding-top: 2px; }
.sv-res-t { font-size: 11.5px; color: var(--b-tx3); padding: 9px 0 2px; border-top: 1px solid var(--b-line); }
.sv-lvl { display: grid; grid-template-columns: minmax(0, 1fr) 48px 58px; align-items: center; gap: 8px; min-height: 32px; font-size: 12.5px; }
.sv-lvl span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-plain { margin-top: 8px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--b-line); background: var(--b-side); font-size: 12px; line-height: 1.45; color: var(--b-tx2); }
.sv-plain b { font-weight: 600; color: var(--b-tx); }
.sv-sign-g .fc-doc { min-height: 0; margin: 0; }
.sv-sign-g .fc-doc small { display: block; margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--b-line); font-size: 10px; color: var(--b-tx3); }
.sv-sign-g .sv-prog { padding-top: 2px; }

/* Defense File */
.sv-df-g { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.sv-tree { display: grid; align-content: start; gap: 1px; padding: 8px; background: var(--b-side); border-right: 1px solid var(--b-line); }
.sv-tree span { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--b-tx2); white-space: nowrap; }
.sv-tree span.on { background: var(--b-bg); color: var(--b-tx); box-shadow: inset 0 0 0 1px var(--b-line); }
.sv-tree em { font: 400 10.5px var(--fm); font-style: normal; color: var(--b-tx3); }
.sv-path { font-size: 11.5px; color: var(--b-tx3); padding: 6px 0 8px; }

/* Entrada: las filas aparecen una tras otra y las barras se llenan (sin avance automático) */
.js .svc-viz .sv-float { opacity: 0; translate: 0 14px; }
.js .svc-viz.in .sv-float { opacity: 1; translate: 0 0; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.js .svc-viz.in .sv-float:nth-of-type(2) { transition-delay: .2s; } .js .svc-viz.in .sv-float:nth-of-type(3) { transition-delay: .32s; } .js .svc-viz.in .sv-float:nth-of-type(4) { transition-delay: .44s; }
.js .svc-viz .fc-bar::after { transform: scaleX(0); transition: transform 1.1s var(--ease) .7s; }
.js .svc-viz.in .fc-bar::after { transform: none; }

/* ---------- Escenario por servicio: ventana principal + capas flotantes que explican una sola idea ---------- */
.sv-stage { position: relative; height: 470px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(55% 70% at 28% 18%, rgba(149,117,252,.24), transparent 70%), radial-gradient(45% 60% at 88% 85%, rgba(79,229,194,.13), transparent 70%), #0E1022; }
.sv-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(75% 85% at 50% 45%, #000 15%, transparent 100%); mask-image: radial-gradient(75% 85% at 50% 45%, #000 15%, transparent 100%); }
.sv-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(14,16,34,0), rgba(14,16,34,.92)); }
.sv-stage .sv-win { position: absolute; left: 36px; top: 36px; z-index: 2; transform: translate(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -5px)); transition: transform .5s var(--ease); }
.sv-float { position: absolute; z-index: 3; background: var(--b-bg); color: var(--b-tx); border-radius: 14px; font: 400 12.5px/1.45 var(--fb); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 30px 60px -22px rgba(0,0,0,.85); transform: translate(calc(var(--px, 0) * var(--d, 8) * 1px), calc(var(--py, 0) * var(--d, 8) * 1px)); transition: transform .5s var(--ease); }
.sv-float[data-lead]::before { content: ""; position: absolute; z-index: -1; border: 0 dashed rgba(255,255,255,.45); }
.sv-float[data-lead]::after { content: ""; position: absolute; z-index: -1; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(79,229,194,.22); }
.sv-float[data-lead="left"]::before { right: 100%; top: 50%; width: var(--len, 40px); border-top-width: 1.5px; }
.sv-float[data-lead="left"]::after { right: calc(100% + var(--len, 40px) - 3px); top: calc(50% - 3px); }
.sv-float[data-lead="up"]::before { left: 50%; bottom: 100%; height: var(--len, 40px); border-left-width: 1.5px; }
.sv-float[data-lead="up"]::after { left: calc(50% - 3px); bottom: calc(100% + var(--len, 40px) - 3px); }
.sv-card { width: 262px; padding: 12px 14px 10px; }
.sv-card > b { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; line-height: 1.3; padding-bottom: 9px; margin-bottom: 3px; border-bottom: 1px solid var(--b-line); }
.sv-card > b .ic { width: 15px; height: 15px; color: var(--b-you); flex: none; }
.sv-card-s { display: block; font-size: 11.5px; color: var(--b-tx3); margin: 6px 0 10px; }
.sv-card .cs-steps { border-top: 0; padding: 4px 0 10px; }
.sv-li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 34px; font-size: 12.5px; }
.sv-li + .sv-li { border-top: 1px solid var(--b-line); }
.sv-li span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-li time { font: 400 11px var(--fm); color: var(--b-tx3); white-space: nowrap; }
.sv-li .sv-dot { width: 16px; height: 16px; }
.sv-li-f { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--b-line); font-size: 11.5px; color: var(--b-tx2); }
.sv-li-f .ic { width: 13px; height: 13px; color: var(--b-you); flex: none; }
.sv-dot.warn { background: var(--b-warn-bg); color: var(--b-warn); font: 700 10px/1 var(--fb); font-style: normal; }
.sv-toast { display: flex; align-items: center; gap: 11px; width: 252px; padding: 11px 13px; }
.sv-toast > i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--b-mut-bg); color: var(--b-tx2); }
.sv-toast > i .ic { width: 16px; height: 16px; }
.sv-toast > div { flex: 1; min-width: 0; }
.sv-toast b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.sv-toast small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--b-tx3); }
.sv-toast small code { font-size: 11px; color: var(--b-tx); }
.sv-toast .fc-btn { min-width: 0; height: 26px; }
.sv-toast.you > i { background: var(--b-you-bg); color: var(--b-you); }
.sv-toast.ok > i { background: var(--b-ok-bg); color: var(--b-ok); }
.sv-toast.warn > i { background: var(--b-warn-bg); color: var(--b-warn); }
.sv-toast.mint { width: 276px; } .sv-toast.mint > i { background: rgba(79,229,194,.18); color: #12B58C; }
.sv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; color: var(--tx); background: rgba(18,20,42,.85); box-shadow: 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sv-chip .ic { width: 14px; height: 14px; color: var(--mint); }
.sv-doc { width: 236px; padding: 14px 14px 12px; border-radius: 10px; background: #FBFBFD; }
.sv-doc-lg { width: 262px; padding: 18px 16px 16px; }
.sv-doc .fc-doc-t { margin-bottom: 12px; }
.sv-doc-lg .fc-doc-t { font-size: 15px; }
.sv-doc .fc-l { margin-bottom: 8px; }
.sv-doc .fc-sig { margin-top: 10px; }
.sv-doc-f { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--b-line); font-size: 11px; color: var(--b-tx3); }
.sv-doc-f .ic { width: 13px; height: 13px; color: var(--b-you); flex: none; }
.sv-doc .holo { --s: 66px; right: 12px; bottom: 44px; }
.sv-stage .sv-phone { width: 196px; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 30px 60px -22px rgba(0,0,0,.85); }
.sv-phone-sm { width: 176px; }
.sv-phone-t { display: flex; align-items: center; gap: 5px; font-size: 11px; padding: 6px 9px; border-radius: 8px; background: var(--b-side); color: var(--b-tx2); }
.sv-phone-t b { font-weight: 600; color: var(--b-tx); } .sv-phone-t .ic { width: 12px; height: 12px; }
.sv-phone-b.ok { background: var(--b-ok); }
.sv-who4 { grid-template-columns: 16px minmax(0, 1fr) 18px auto; }
.sv-row.is-hl { margin: 0 -14px; padding: 0 14px; background: var(--b-you-bg); border-top-color: transparent; border-radius: 8px; }
.sv-row.is-hl + .sv-row { border-top-color: transparent; }
.sv-cnt { font-style: normal; font-weight: 600; color: var(--b-tx); }
.sv-btn { margin-top: 12px; height: 30px; gap: 6px; display: inline-flex; align-items: center; }
.sv-btn .ic { width: 14px; height: 14px; }
.sv-cap { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--tx-2); }
.sv-cap i { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--mint); box-shadow: 0 0 0 4px rgba(79,229,194,.18); }
.sv-cap b { color: #fff; font-weight: 600; }
@media (max-width: 900px) {
  .svc-g { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .svc-inc-w .svc-l { margin-top: 22px; }
  .svc-viz { max-width: none; }
  .sv-stage { height: auto; display: grid; gap: 12px; padding: 14px; }
  .sv-stage::after { display: none; }
  .sv-stage .sv-win, .sv-float { position: static; width: auto !important; transform: none !important; }
  .sv-float[data-lead]::before, .sv-float[data-lead]::after { display: none; }
  .sv-stage .sv-phone { width: 100% !important; max-width: 220px; justify-self: center; }
  .sv-chip { justify-self: start; }
  .sv-doc .holo { bottom: 40px; }
}

/* ---------- Escenarios a la medida: Tutela, altas y bajas, evaluaciones y canal ---------- */
.sv-stage-tall { height: 584px; }

/* Tutela: hilo + panel del documento (patrón Harvey / artefactos) */
.sv-stage-xl { height: 640px; }
.t2 { display: flex; flex-direction: column; height: 584px; }
.t2 .sv-bar > span { flex: 1; }
.t2-caps { display: flex; gap: 6px; padding: 10px 14px 0; }
.t2-caps span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--b-line2); color: var(--b-tx2); }
.t2-caps .on { background: var(--b-tx); border-color: var(--b-tx); color: #fff; }
.t2-caps .ic { width: 12px; height: 12px; }
.t2-body { flex: 1; min-height: 0; display: grid; align-content: start; gap: 10px; padding: 12px 14px; overflow: hidden; }
.t2-trace { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--b-side); border: 1px solid var(--b-line); font-size: 12px; color: var(--b-tx2); }
.t2-trace b { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--b-tx); }
.t2-trace b em { margin-left: auto; font: 400 11px var(--fm); font-style: normal; color: var(--b-tx3); }
.t2-trace b .ic { width: 13px; height: 13px; color: var(--b-you); }
.t2-trace span { display: flex; align-items: center; gap: 8px; }
.t2-a { display: flex; gap: 9px; align-items: flex-start; }
.t2-a .av { margin-top: 2px; }
.t2-a > div { display: grid; gap: 8px; min-width: 0; }
.t2-a p { font-size: 13px; line-height: 1.5; }
.t2-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.t2-people span { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 7px; align-items: center; padding: 8px 9px; border-radius: 9px; border: 1px solid var(--b-line); font-size: 12px; }
.t2-people b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2-people em { grid-column: 2; font-style: normal; font-size: 11px; color: var(--b-warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2-btn { justify-self: start; height: 28px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.t2-btn .ic { width: 13px; height: 13px; }
.t2-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 14px 14px; padding: 8px 8px 8px 13px; border-radius: 12px; border: 1px solid var(--b-line2); background: var(--b-bg); font-size: 12.5px; color: var(--b-tx3); box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); }
.t2-send { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #7C66F2, #5B45D6); color: #fff; }
.t2-send .ic { width: 14px; height: 14px; }
.t2-art { width: 320px; padding: 14px 16px; }
.t2-art-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 11.5px; color: var(--b-tx3); }
.t2-art-h span { display: inline-flex; align-items: center; gap: 6px; }
.t2-art-h .ic { width: 13px; height: 13px; }
.t2-art-t { font: 600 15.5px/1.25 var(--fd); letter-spacing: -.015em; }
.t2-art-s { font-size: 11.5px; color: var(--b-tx3); margin: 4px 0 12px; }
.t2-toc { display: grid; gap: 4px; }
.t2-toc li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; border: 1px solid transparent; font-size: 12.5px; }
.t2-toc em { width: 14px; font: 500 10.5px var(--fm); font-style: normal; color: var(--b-tx3); }
.t2-toc .hl { background: var(--b-you-bg); border-color: rgba(91,69,214,.18); color: var(--b-you); font-weight: 500; }
.t2-toc .hl em { color: var(--b-you); }
.t2-art-f { display: flex; gap: 6px; margin-top: 12px; }
.t2-art-f .fc-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-width: 0; }
.t2-art-f .ic { width: 13px; height: 13px; }
.t2-ghost { background: var(--b-mut-bg); color: var(--b-tx); }
.t2-art-n { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--b-tx3); }
.t2-art-n .ic { width: 12px; height: 12px; color: var(--b-you); }

/* Plantilla: una captura y el abanico de lo que corre solo */
.pl2 { display: grid; grid-template-columns: 224px 96px minmax(0, 1fr) 212px; grid-template-rows: auto auto; align-items: start; padding: 28px 32px 24px; }
.pl-in, .pl-out, .pl-baja { background: var(--b-bg); color: var(--b-tx); border-radius: 14px; font: 400 12.5px/1.45 var(--fb); box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 30px 60px -22px rgba(0,0,0,.85); }
.pl-in { position: relative; z-index: 2; overflow: hidden; }
.pl-form { display: grid; gap: 7px; padding: 12px 14px 2px; }
.pl-form label { display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--b-line2); }
.pl-form small { font-size: 10.5px; color: var(--b-tx3); }
.pl-form b { font-size: 12.5px; font-weight: 500; }
.pl-go { position: relative; margin: 10px 14px 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 9px; }
.pl-go .ic { width: 14px; height: 14px; }
.pl-note { display: block; padding: 10px 14px 12px; font-size: 11px; color: var(--b-tx3); }
.pl-wires { grid-column: 2; width: 96px; height: 350px; margin-top: 6px; overflow: visible; }
.pl-wires path { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.2; }
.pl-wires .go { stroke: url(#plGrad); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
.pl-steps { grid-column: 3; display: grid; gap: 10px; align-content: start; margin-top: 6px; padding-right: 16px; }
.pl-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 8px 12px; border-radius: 12px; background: var(--b-bg); color: var(--b-tx); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 20px 40px -22px rgba(0,0,0,.8); }
.pl-steps b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.pl-steps small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--b-tx3); }
.pl-steps time { font: 400 11px var(--fm); color: var(--b-tx3); }
.pl-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--b-ok-bg); color: var(--b-ok); }
.pl-ic .ic { width: 13px; height: 13px; stroke-width: 2.8; }
.pl-out { grid-column: 4; position: relative; margin-top: 6px; padding: 16px 16px 14px; background: #FBFBFD; }
.pl-out .fc-doc-t { margin-bottom: 8px; }
.pl-docs { display: grid; gap: 5px; font-size: 12px; color: var(--b-tx2); }
.pl-docs li { position: relative; padding-left: 18px; }
.pl-docs li::before { content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--b-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23218358' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 7px no-repeat; }
.pl-out .holo { --s: 62px; right: 12px; bottom: 42px; }
.pl-out .sv-doc-f { margin-top: 12px; }
.pl-baja { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; padding: 10px 14px; font-size: 12px; color: var(--b-tx2); }
.pl-baja b { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: 12.5px; font-weight: 600; color: var(--b-tx); }
.pl-baja b .ic { width: 13px; height: 13px; color: var(--b-tx3); }
.pl-baja span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 99px; border: 1px solid var(--b-line2); }
.pl-baja .is-done { color: var(--b-ok); background: var(--b-ok-bg); border-color: transparent; }
.pl-baja .is-done .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.pl-baja .is-now { color: var(--b-you); background: var(--b-you-bg); border-color: transparent; font-weight: 500; }
.pl-baja i { width: 14px; height: 1px; background: var(--b-line2); }
/* Se reproduce una vez al entrar a la vista: clic, cables, pasos, expediente */
.js .svc-viz .pl-out, .js .svc-viz .pl-baja { opacity: 0; translate: 0 16px; }
.js .svc-viz.in .pl-out, .js .svc-viz.in .pl-baja { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.js .svc-viz.in .pl-out { transition-delay: 2.7s; }
.js .svc-viz.in .pl-baja { transition-delay: 3.1s; }
.js .svc-viz.in .pl-go { animation: plpress .6s var(--ease) .7s; }
@keyframes plpress { 40% { transform: scale(.96); box-shadow: 0 0 0 6px rgba(91,69,214,.25); } }
.js .svc-viz .pl-steps li { opacity: .35; transform: translateX(8px); }
.js .svc-viz.in .pl-steps li { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(.9s + var(--i) * .34s); }
.js .svc-viz .pl-ic .ic { opacity: 0; transform: scale(.4); }
.js .svc-viz.in .pl-ic .ic { opacity: 1; transform: none; transition: opacity .3s, transform .35s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(1.25s + var(--i) * .34s); }
.js .svc-viz.in .pl-wires .go { animation: pldraw .9s var(--ease) forwards; animation-delay: calc(.7s + var(--i) * .34s); }
@keyframes pldraw { to { stroke-dashoffset: 0; } }
.js .svc-viz .pl-out .holo { opacity: 0; }
.js .svc-viz.in .pl-out .holo { animation: stampin .55s cubic-bezier(.3,1.5,.5,1) 3.3s both; }

/* Evaluaciones: una pregunta a la vez + escala de la norma */
.ev-ph { width: 236px; padding: 16px 14px 14px; border-radius: 26px; border: 6px solid #1C2024; background: #fff; }
.ev-top { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--b-tx2); }
.ev-top span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--b-tx); }
.ev-top .ic { width: 13px; height: 13px; color: var(--b-you); }
.ev-top em { font: 500 11px var(--fm); font-style: normal; color: var(--b-tx3); }
.ev-bar { display: block; height: 5px; margin: 10px 0 14px; border-radius: 3px; background: var(--b-track); overflow: hidden; }
.ev-bar b { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--b-you); transform-origin: 0 50%; }
.ev-k { font: 500 9.5px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--b-you); }
.ev-q2 { font: 600 14.5px/1.3 var(--fd); letter-spacing: -.015em; margin: 6px 0 12px; }
.ev-opts { display: grid; gap: 6px; }
.ev-opts span { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--b-line2); font-size: 12.5px; font-weight: 500; color: var(--b-tx); }
.ev-opts i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font: 600 10.5px var(--fb); font-style: normal; border: 1px solid var(--b-line2); color: var(--b-tx3); }
.ev-opts b { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--b-you); color: #fff; }
.ev-opts b .ic { width: 10px; height: 10px; stroke-width: 3; }
.ev-opts .on { border-color: var(--b-you); background: var(--b-you-bg); color: var(--b-you); box-shadow: 0 0 0 3px rgba(91,69,214,.12); }
.ev-opts .on i { background: var(--b-you); border-color: var(--b-you); color: #fff; }
.ev-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.ev-nav small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--b-ok); }
.ev-nav small .ic { width: 11px; height: 11px; stroke-width: 2.6; }
.ev-nav .fc-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 0; font-style: normal; }
.ev-nav .fc-btn .ic { width: 13px; height: 13px; }
.ev-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0 12px; border-bottom: 1px solid var(--b-line); }
.ev-sum small { font-size: 11.5px; color: var(--b-tx3); }
.ev-sum > div b { display: block; font: 600 18px/1.2 var(--fd); letter-spacing: -.02em; }
.ev-sum p { grid-column: 1 / -1; font-size: 12px; color: var(--b-tx2); }
.ev-lv { padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.lv-0 { background: #E6F6EB; color: #218358; } .lv-1 { background: #E1F5EE; color: #0F766E; } .lv-2, .ev-lv.medio { background: #FEF3D6; color: #AB6400; } .lv-3 { background: #FDE8D8; color: #C2410C; } .lv-4 { background: #FCE4E4; color: #B42318; }
.ev-scale, .ev-dom { display: grid; grid-template-columns: 148px minmax(0, 1fr) 62px; align-items: center; gap: 10px; }
.ev-scale { padding: 10px 0 4px; }
.ev-scale > div { display: grid; grid-template-columns: repeat(5, 1fr); font-size: 10px; color: var(--b-tx3); text-align: center; }
.ev-dom { min-height: 34px; border-top: 1px solid var(--b-line); font-size: 12.5px; }
.ev-dom > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-band { position: relative; display: block; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--b-track) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); }
.ev-band::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 20%); width: calc(20% - 3px); border-radius: 3px; background: currentColor; transform-origin: 0 50%; }
.ev-band.lv-0 { color: #218358; } .ev-band.lv-1 { color: #0F766E; } .ev-band.lv-2 { color: #AB6400; } .ev-band.lv-3 { color: #C2410C; } .ev-band.lv-4 { color: #B42318; }
.ev-dom em { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; text-align: center; }
.js .svc-viz .ev-band::after { transform: scaleX(0); } .js .svc-viz.in .ev-band::after { transform: none; transition: transform .7s var(--ease) .9s; }
.js .svc-viz .ev-opts .on { border-color: var(--b-line2); background: transparent; color: var(--b-tx); box-shadow: none; }
.js .svc-viz .ev-opts .on i { background: transparent; border-color: var(--b-line2); color: var(--b-tx3); }
.js .svc-viz .ev-opts .on b { opacity: 0; transform: scale(.4); }
.js .svc-viz.in .ev-opts .on { border-color: var(--b-you); background: var(--b-you-bg); color: var(--b-you); box-shadow: 0 0 0 3px rgba(91,69,214,.12); transition: all .3s var(--ease) 1.2s; }
.js .svc-viz.in .ev-opts .on i { background: var(--b-you); border-color: var(--b-you); color: #fff; transition: all .3s var(--ease) 1.2s; }
.js .svc-viz.in .ev-opts .on b { opacity: 1; transform: none; transition: opacity .3s 1.3s, transform .4s cubic-bezier(.3,1.5,.5,1) 1.3s; }
.js .svc-viz .ev-bar b { transform: scaleX(.85); } .js .svc-viz.in .ev-bar b { transform: none; transition: transform .5s var(--ease) 1.5s; }

/* Canal de apoyo: quien reporta, en su celular; RH, en la mesa */
.cn-ph { display: grid; gap: 10px; width: 236px; padding: 14px 12px 12px; border-radius: 26px; border: 6px solid #1C2024; background: #fff; }
.cn-top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; }
.cn-top span { display: inline-flex; align-items: center; gap: 5px; }
.cn-top .ic { width: 13px; height: 13px; color: var(--b-ok); }
.cn-top em { font: 500 10.5px var(--fm); font-style: normal; padding: 3px 7px; border-radius: 99px; background: var(--b-ok-bg); color: var(--b-ok); }
.cn-chat { display: grid; gap: 7px; font-size: 12px; line-height: 1.4; }
.cn-sys { padding: 0 6px; text-align: center; font-size: 10.5px; color: var(--b-tx3); }
.cn-me { justify-self: end; max-width: 92%; padding: 8px 10px; border-radius: 12px 12px 3px 12px; background: var(--b-you); color: #fff; }
.cn-bot { display: flex; gap: 6px; align-items: flex-start; }
.cn-bot .av { margin-top: 2px; width: 16px; height: 16px; }
.cn-bot span { padding: 8px 10px; border-radius: 12px 12px 12px 3px; background: var(--b-side); border: 1px solid var(--b-line); }
.cn-rh { max-width: 92%; padding: 8px 10px; border-radius: 12px 12px 12px 3px; background: var(--b-side); border: 1px solid var(--b-line); }
.cn-rh small { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 600; color: var(--b-you); }
.cn-st { padding: 10px 0 0; border-top: 1px solid var(--b-line); font-size: 10.5px; }
.cn-in { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 11px; border-radius: 10px; border: 1px solid var(--b-line2); font-size: 11.5px; color: var(--b-tx3); }
.cn-in i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--b-btn); color: #fff; }
.cn-in .ic { width: 12px; height: 12px; }
.cn-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 14px 0; }
.cn-col p { display: flex; justify-content: space-between; padding-bottom: 8px; font-size: 11.5px; font-weight: 600; color: var(--b-tx2); }
.cn-col p em { font-style: normal; font-weight: 400; color: var(--b-tx3); }
.cn-card { display: grid; gap: 3px; margin-bottom: 8px; padding: 10px 11px; border-radius: 10px; border: 1px solid var(--b-line); background: var(--b-bg); font-size: 12px; }
.cn-card code { font: 500 10.5px var(--fm); color: var(--b-tx3); }
.cn-card b { font-weight: 600; }
.cn-card small { font-size: 11px; color: var(--b-tx3); }
.cn-card .bdg { justify-self: start; height: auto; margin-top: 4px; padding: 3px 7px; white-space: normal; text-align: left; line-height: 1.3; }
.cn-card.is-sel { border-color: var(--b-you); box-shadow: 0 0 0 3px var(--b-you-bg); }
.cn-empty { padding: 14px 10px; border-radius: 10px; border: 1px dashed var(--b-line2); font-size: 11.5px; color: var(--b-tx3); text-align: center; }
.cn-note { margin: 4px 14px 14px; }
.cn-note .fc-btn { align-self: center; height: 28px; min-width: 0; flex: none; }
.js .svc-viz .cn-chat > * { opacity: .3; translate: 0 4px; }
.js .svc-viz.in .cn-chat > * { opacity: 1; translate: 0 0; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.js .svc-viz.in .cn-chat > :nth-child(2) { transition-delay: .5s; } .js .svc-viz.in .cn-chat > :nth-child(3) { transition-delay: 1.1s; } .js .svc-viz.in .cn-chat > :nth-child(4) { transition-delay: 1.8s; }

@media (max-width: 900px) {
  .sv-stage-tall, .sv-stage-xl { height: auto; }
  .t2 { height: auto; }
  .t2-body { overflow: visible; }
  .t2-people { grid-template-columns: minmax(0, 1fr); }
  .t2-caps { flex-wrap: wrap; }
  .pl2 { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .pl-wires { display: none; }
  .pl-steps, .pl-out, .pl-in, .pl-baja { grid-column: auto; margin: 0; padding-right: 0; }
  .pl-steps { margin: 12px 0; }
  .pl-baja { margin-top: 12px; }
  .ev-ph, .cn-ph { width: 100% !important; max-width: 260px; justify-self: center; }
  .ev-scale, .ev-dom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px; }
  .cn-board { grid-template-columns: minmax(0, 1fr); }
  .cn-empty { display: none; }
}

/* Entrada por necesidad + etiquetas de perspectiva + cadena REPSE + firmado/recibido */
.sv-needs { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(44px, 6vw, 68px); text-align: left; animation: rise 1s var(--ease) .35s both; }
.sv-needs .sv-idx-t { grid-column: 1 / -1; }
.sv-need { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 22px 20px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(180deg, #14162B, #0F1123); text-decoration: none; overflow: hidden; transition: border-color .3s, transform .35s var(--ease); }
.sv-need:hover { border-color: rgba(149,117,252,.45); transform: translateY(-3px); }
.sv-need > b { font: 600 20px/1.2 var(--fd); letter-spacing: -.025em; margin-top: 6px; }
.sv-need > span:not(.sol-ic) { font-size: 14.5px; line-height: 1.5; color: var(--tx-2); }
.sv-need em { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-style: normal; font-size: 13px; font-weight: 500; color: #fff; }
.sv-need em i { font: 400 10.5px var(--fm); font-style: normal; color: var(--mint); margin-left: 6px; } .sv-need em i:first-child { margin-left: 0; }
.sv-needs-f { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--tx-2); }
.sv-needs-f .ic { width: 16px; height: 16px; color: var(--mint); flex: none; }
.sv-needs-f a { color: #fff; text-underline-offset: 3px; }
.sv-lbl { position: absolute; z-index: 4; font: 500 11px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); padding: 5px 9px; border-radius: 99px; background: rgba(79,229,194,.1); border: 1px solid rgba(79,229,194,.3); white-space: nowrap; }
.cn-priv { color: var(--mint); }
.rp-chain { width: 300px; }
.rp-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 0; }
.rp-step + .rp-step { border-top: 1px dashed var(--b-line2); }
.rp-step i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 10.5px var(--fb); font-style: normal; }
.rp-step.warn i { background: var(--b-warn-bg); color: var(--b-warn); } .rp-step.you i { background: var(--b-you-bg); color: var(--b-you); }
.rp-step b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.3; } .rp-step small { display: block; font-size: 11.5px; color: var(--b-tx3); }
.fs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 8px; }
.fs-k { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--b-line); background: var(--b-side); }
.fs-k small { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .fs-k small .ic { width: 12px; height: 12px; }
.fs-k.ok small { color: var(--b-ok); } .fs-k.you small { color: var(--b-you); }
.fs-k b { display: block; font: 600 18px/1.2 var(--fd); margin: 4px 0 2px; } .fs-k span { font-size: 11px; color: var(--b-tx3); line-height: 1.35; display: block; }
@media (max-width: 900px) { .sv-needs { grid-template-columns: minmax(0, 1fr); } .sv-lbl { position: static; justify-self: start; } .svc-inc-w { flex-direction: column; gap: 10px; } .fs-two { grid-template-columns: 1fr; } .rp-chain { width: auto; } }

/* ---------- Todo termina en el mismo expediente ---------- */
.sv-one { padding-top: clamp(64px, 8vw, 112px); }
.conv { display: grid; grid-template-columns: minmax(0, 1.1fr) 150px minmax(0, .9fr); align-items: center; }
.conv-src { display: grid; gap: 10px; }
.conv-src a { display: grid; grid-template-columns: 36px auto minmax(0, 1fr); align-items: center; gap: 12px; height: 54px; padding: 0 16px 0 9px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, #14162B, #0F1123); text-decoration: none; transition: border-color .25s, transform .3s var(--ease); }
.conv-src a:hover { border-color: var(--line-2); transform: translateX(3px); }
.conv-src b { font: 600 15px/1.2 var(--fd); letter-spacing: -.015em; white-space: nowrap; }
.conv-src em { font-style: normal; font-size: 12.5px; color: var(--tx-3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-wires { display: block; width: 150px; height: 438px; overflow: visible; }
.conv-wires path { fill: none; }
.conv-base path { stroke: rgba(255,255,255,.22); stroke-width: 1.2; }
.conv-flow path { stroke: url(#convGrad); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 16 260; stroke-dashoffset: 276; animation: convflow 2.8s linear infinite; animation-delay: calc(var(--i) * -.4s); }
.conv-end { fill: var(--lav); filter: drop-shadow(0 0 6px rgba(149,117,252,.9)); }
@keyframes convflow { to { stroke-dashoffset: 0; } }
.js .conv:not(.live) *, .js .conv:not(.live) *::before, .js .conv:not(.live) *::after { animation-play-state: paused !important; }
.conv-df { position: relative; display: grid; justify-items: start; gap: 8px; padding: clamp(24px, 3vw, 32px); border-radius: var(--r-lg); border: 1px solid rgba(149,117,252,.42); background: linear-gradient(140deg, rgba(79,229,194,.1), rgba(52,189,226,.04) 40%, rgba(149,117,252,.18)), var(--panel); text-decoration: none; box-shadow: 0 30px 80px -40px rgba(149,117,252,.75); transition: transform .35s var(--ease), border-color .3s; }
.conv-df:hover { transform: translateY(-3px); border-color: rgba(149,117,252,.7); }
.conv-df .holo { --s: 76px; position: relative; right: auto; bottom: auto; margin-bottom: 10px; }
.conv-df small { font: 500 12px/1 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.conv-df b { font: 600 clamp(20px, 2vw, 25px)/1.2 var(--fd); letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.conv-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.conv-meta i { font-style: normal; font-size: 12.5px; line-height: 1; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--tx-2); }
.conv + .plat { margin-top: clamp(28px, 4vw, 44px); }

/* ---------- Por dónde empezar ---------- */
.sv-start { padding-top: 0; }
.sv-role { display: flex; flex-direction: column; }
.sv-role .trio-n { text-transform: uppercase; }
.sv-role p { flex: 1; }
.sv-role .svc-go { align-self: flex-start; margin-top: 22px; }

/* ---------- Servicios · responsive ---------- */
@media (max-width: 1100px) {
  .sv-who { grid-template-columns: minmax(0, 1fr); }
  .sv-lay { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sv-toc { top: 70px; z-index: 40; margin: 0 calc(var(--gut) * -1) 30px; padding: 8px var(--gut); background: rgba(10,11,24,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .sv-toc-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--s1); cursor: pointer; text-align: left; }
  .sv-toc-btn small { flex: none; font: 500 10.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
  .sv-toc-btn b { flex: 1; min-width: 0; font: 600 14.5px/1.2 var(--fd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sv-toc-btn em { flex: none; font: 400 11.5px/1 var(--fm); font-style: normal; color: var(--tx-3); } .sv-toc-btn em i { font-style: normal; color: var(--mint); }
  .sv-toc-btn .ic { width: 18px; height: 18px; color: var(--tx-2); transition: transform .25s var(--ease); }
  .sv-toc.open .sv-toc-btn .ic { transform: rotate(180deg); }
  .sv-toc-list { display: none; position: absolute; left: var(--gut); right: var(--gut); top: calc(100% + 6px); padding: 4px 16px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: #12142A; box-shadow: 0 30px 60px -20px rgba(0,0,0,.85); max-height: calc(100vh - 160px); overflow: auto; }
  .sv-toc.open .sv-toc-list { display: grid; }
  .sv-toc-t, .sv-toc-hl { display: none; }
  .sv-toc-g { padding: 16px 0 6px; }
  .sv-toc-list > a[data-name] { padding: 9px 0; font-size: 15px; }
  .sv-toc-cta { margin-top: 16px; }
  .svc, .sv-grp { scroll-margin-top: 36px; }
  .conv { grid-template-columns: minmax(0, 1.2fr) 110px minmax(0, .9fr); }
  .conv-wires { width: 110px; }
  .conv-src em { display: none; }
  .conv-src a { grid-template-columns: 36px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sv-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-who ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .sv-who li:nth-child(odd) { margin-left: 0; }
  .svc-g { grid-template-columns: minmax(0, 1fr); }
  .svc-rows { grid-template-columns: minmax(0, 1fr); }
  .svc-rows > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .svc-foot { flex-direction: column; align-items: flex-start; } .svc-foot .svc-go { margin-left: 0; }
  .conv { grid-template-columns: minmax(0, 1fr); }
  .conv-wires { display: none; }
  .conv-src em { display: block; }
  .conv-src a { grid-template-columns: 36px auto minmax(0, 1fr); }
  .conv-df { margin-top: 44px; }
  .conv-df::before { content: ""; position: absolute; left: 50%; top: -45px; width: 1.5px; height: 44px; background: linear-gradient(180deg, transparent, var(--lav)); }
}
@media (max-width: 560px) {
  .sv-idx { gap: 8px; } .sv-idx-t { flex-direction: column; gap: 6px; }
  .sv-card { padding: 14px 14px 15px; } .sv-card-h { margin-bottom: 8px; } .sv-card b { font-size: 15px; }
  .sv-card > span:last-child { font-size: 12.5px; }
  .sv-who ol { grid-template-columns: minmax(0, 1fr); row-gap: 18px; } .sv-who li + li { margin-left: 0; }
  .sv-toc-btn small { display: none; }
  .sv-sub > p { flex-direction: column; gap: 2px; }
  .svc-k { gap: 10px; } .svc-tag { order: 5; }
  .sv-eval-g, .sv-sign-g { grid-template-columns: minmax(0, 1fr); }
  .sv-phone { max-width: 210px; width: 100%; justify-self: center; }
  .sv-df-g { grid-template-columns: minmax(0, 1fr); }
  .sv-tree { display: flex; flex-wrap: wrap; gap: 4px; border-right: 0; border-bottom: 1px solid var(--b-line); }
  .sv-tree span { gap: 5px; height: 26px; } .sv-tree span:not(.on) em { display: none; }
  .sv-t-pl { --cols: minmax(0, 1fr) 56px 104px; } .sv-t-pl > * > :nth-child(2) { display: none; }
  .sv-t-rp { --cols: minmax(0, 1fr) minmax(0, 1fr) 62px; } .sv-t-rp > * > :nth-child(3) { display: none; }
  .conv-src a { grid-template-columns: 36px minmax(0, 1fr); height: auto; min-height: 54px; padding: 9px 14px 9px 9px; row-gap: 2px; }
  .conv-src a > :first-child { grid-row: span 2; } .conv-src b { white-space: normal; } .conv-src em { grid-column: 2; text-align: left; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aud *, .aud *::before, .aud *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .rv { opacity: 1; transform: none; }
  .board { --tilt: 0deg !important; --sc: 1 !important; }
  .rail-track { animation: none !important; }
}