/* base de la home (lab/src/intro.html) */

/* Layout: una sola pantalla. Un panel azul se retira en diagonal y, sobre un hero navy, una figura se arma con miles de caracteres mono (WebGL).
   El dock inferior es el laboratorio para comparar figuras, diseño final, origen de la onda, ritmo, densidad y color del rastro. */
:root{
  color-scheme: dark;
  /* color */
  --ink-0:#030814;
  --ink-1:#071330;
  --ink-2:#0c1f4d;
  --blue:#2f6bff;
  --blue-hi:#7fa9ff;
  --ice:#dce9ff;
  --white:#f3f7ff;
  --mute:#8193b8;
  --line:rgba(127,169,255,.16);
  --line-2:rgba(127,169,255,.34);
  /* type */
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* runtime */
  --S:1;
  --dock-h:0px;
  --lede:#b9c7e4;
  --eyebrow:var(--blue-hi);
  --dot:rgba(127,169,255,.18);
  --veil:3,8,20;
  --dock-bg:linear-gradient(180deg,rgba(14,35,86,.78),rgba(6,16,40,.86));
  /* vidrio líquido (los botones, al estilo Liquid Glass): claro, teñido de azul, borde de luz, desenfoque y resorte */
  /* como el vidrio de iOS 26: casi sin relleno; el borde se ilumina en dos esquinas opuestas (arriba a la izquierda y
     abajo a la derecha), un filo fino adentro le da espesor y lo de atrás se ve apenas desenfocado y más vivo */
  --f-ui:"IBM Plex Sans",system-ui,sans-serif;                 /* la misma letra en iPhone, Android y PC (se carga el 600) */
  --lg-fill:rgba(255,255,255,.035);
  --lg-fill-hi:rgba(255,255,255,.075);
  --lg-tint:linear-gradient(180deg,rgba(127,169,255,.26),rgba(47,107,255,.15));
  --lg-tint-hi:linear-gradient(180deg,rgba(127,169,255,.36),rgba(47,107,255,.24));
  --lg-rim:conic-gradient(from 300deg,rgba(255,255,255,.95),rgba(255,255,255,.16) 12%,rgba(255,255,255,.04) 26%,rgba(255,255,255,.14) 40%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.14) 60%,rgba(255,255,255,.04) 76%,rgba(255,255,255,.18) 90%,rgba(255,255,255,.95));
  --lg-rim-tint:conic-gradient(from 300deg,rgba(214,230,255,.95),rgba(127,169,255,.24) 12%,rgba(127,169,255,.07) 26%,rgba(127,169,255,.2) 40%,rgba(190,212,255,.75) 50%,rgba(127,169,255,.2) 60%,rgba(127,169,255,.07) 76%,rgba(127,169,255,.24) 90%,rgba(214,230,255,.95));
  --lg-blur:blur(3px) saturate(180%) brightness(1.08);
  --lg-spring:cubic-bezier(.34,1.56,.64,1);
  --lg-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 -1px 1px rgba(255,255,255,.08),inset 0 0 14px rgba(255,255,255,.045),0 8px 20px -12px rgba(0,0,0,.55);
  --lg-glow:0 8px 24px -14px rgba(47,107,255,.6);
  --lg-knob:rgba(255,255,255,.08);
}
/* Fondo negro: la figura en blancos y grises, el azul solo para lo especial */
body[data-fondo="negro"]{
  --ink-0:#000;
  --ink-1:#060607;
  --ink-2:#0d0e11;
  --mute:#8b8f98;
  --ice:#e6e8ee;
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.22);
  --lede:#a6aab3;
  --eyebrow:#9aa0ab;
  --dot:rgba(255,255,255,.07);
  --veil:0,0,0;
  --dock-bg:linear-gradient(180deg,rgba(18,18,21,.82),rgba(6,6,8,.9));
  /* modo oscuro: vidrio ahumado (más oscuro que lo de atrás, con el borde de luz tenue); en claro queda el vidrio de :root */
  --lg-fill:rgba(6,7,10,.55);
  --lg-fill-hi:rgba(16,18,24,.62);
  --lg-tint:linear-gradient(180deg,rgba(30,56,140,.62),rgba(10,22,70,.7));
  --lg-tint-hi:linear-gradient(180deg,rgba(40,72,170,.7),rgba(14,30,90,.76));
  --lg-rim:conic-gradient(from 300deg,rgba(255,255,255,.5),rgba(255,255,255,.09) 12%,rgba(255,255,255,.02) 26%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.36) 50%,rgba(255,255,255,.08) 60%,rgba(255,255,255,.02) 76%,rgba(255,255,255,.1) 90%,rgba(255,255,255,.5));
  --lg-rim-tint:conic-gradient(from 300deg,rgba(170,198,255,.6),rgba(90,130,230,.16) 12%,rgba(90,130,230,.04) 26%,rgba(90,130,230,.13) 40%,rgba(150,182,255,.42) 50%,rgba(90,130,230,.13) 60%,rgba(90,130,230,.04) 76%,rgba(90,130,230,.16) 90%,rgba(170,198,255,.6));
  --lg-blur:blur(3px) saturate(160%) brightness(.8);
  --lg-shadow:inset 0 1px 1px rgba(255,255,255,.14),inset 0 -1px 1px rgba(255,255,255,.04),0 8px 20px -12px rgba(0,0,0,.7);
  --lg-glow:0 6px 18px -12px rgba(47,107,255,.4);
  --lg-knob:rgba(255,255,255,.05);
}
*{box-sizing:border-box}
html,body{min-height:100%}
/* Android (y celulares en general): sin el rectángulo al tocar y sin agrandar el texto por su cuenta */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lock,html.lock body{overflow:hidden}
body{margin:0;background:var(--ink-0);color:var(--white);font:400 13px/1.5 var(--f-mono);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:1px solid var(--blue-hi);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- escenario ---------- */
.pg-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(90% 70% at 78% 16%, rgba(47,107,255,.20), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(26,70,214,.22), transparent 70%),
    radial-gradient(60% 50% at 50% 55%, rgba(12,31,77,.55), transparent 80%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 78%)}
body[data-fondo="negro"] .pg-bg{background:
    radial-gradient(60% 50% at 88% 6%, rgba(47,107,255,.11), transparent 62%),
    radial-gradient(55% 45% at 0% 100%, rgba(47,107,255,.07), transparent 70%),
    radial-gradient(70% 60% at 50% 45%, rgba(255,255,255,.025), transparent 75%),
    #000}
.stage{position:relative;z-index:1;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at center, var(--dot) 1px, transparent 1.4px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 90% at 60% 40%, #000 25%, transparent 85%);
          mask-image:radial-gradient(120% 90% at 60% 40%, #000 25%, transparent 85%)}
.folio01,.folio,.folio-wip,footer{position:relative;z-index:1}
.grain{position:absolute;inset:-50%;z-index:6;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* el canvas del motor va en la página (no fijo) y el motor lo ubica en cada cuadro: al scrollear, la figura viaja con su
   lámina. La envoltura recorta lo que pasa por debajo de la barra de scroll, sin alargar la página */
.ascii-w{position:absolute;top:0;left:0;right:0;height:0;overflow-x:clip;z-index:0;pointer-events:none}
#ascii{position:absolute;top:0;left:0;width:100vw;height:100vh;height:100lvh;display:block;pointer-events:none;will-change:transform}
html.gl canvas.c-static{visibility:hidden}
.hero-static{position:absolute;left:11%;right:11%;top:7%;height:80%;width:78%;z-index:1}
@media (max-width:759px){ .hero-static{left:0;right:0;width:100%;top:max(64px,8svh);height:50svh} }   /* en espejo de figRect() en celular */
.veil{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%, rgba(var(--veil),.5) 55%, rgba(var(--veil),.9) 100%)}
.veil2{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  radial-gradient(55% 45% at 0% 100%, rgba(var(--veil),.85), transparent 72%),
  radial-gradient(42% 40% at 100% 92%, rgba(var(--veil),.8), transparent 75%)}
.stage[data-layout="A"] .veil{height:100%;width:62%;right:auto;
  background:linear-gradient(90deg, rgba(var(--veil),.85) 0%, rgba(var(--veil),.45) 60%, transparent 100%)}

/* leyenda de la figura: una fila fina debajo del encabezado */
.fframe{position:absolute;z-index:5;pointer-events:none;top:calc(env(safe-area-inset-top, 0px) + 74px);left:0;right:0;display:flex;justify-content:space-between;gap:16px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.fcap{font-size:9.5px;letter-spacing:.2em;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.fcap b{color:var(--blue-hi);font-weight:500}
.bracket{position:absolute;z-index:3;top:40%;right:max(16px, env(safe-area-inset-right, 0px));width:9px;height:150px;border:1px solid var(--line-2);border-left:0;pointer-events:none}

/* ---------- header ---------- */
.hdr{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:20px 0;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .iso{width:30px;height:auto;flex:none;display:block}
.brand .pal{height:15px;width:auto;display:block}
.hdr-mid{font-size:9.5px;letter-spacing:.26em;color:var(--mute)}
.hdr-r{display:flex;align-items:center;gap:10px}
.mode{width:40px;height:40px;display:grid;place-items:center;padding:0;cursor:pointer;color:var(--ice)}
.mode svg{width:15px;height:15px}
body[data-fondo="negro"] .i-moon,body:not([data-fondo="negro"]) .i-sun{display:none}
.mode svg{animation:modeIn .7s cubic-bezier(.2,.7,.1,1)}
@keyframes modeIn{from{transform:rotate(-140deg) scale(.3);opacity:0}to{transform:none;opacity:1}}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.menu{height:40px;padding:0 16px;font:600 14px/1 var(--f-ui);letter-spacing:-.01em;display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--ice)}
.menu i{width:14px;height:6px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.cta{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 5px 0 16px;text-decoration:none;font:600 14px/1 var(--f-ui);letter-spacing:-.01em}
.cta b{width:30px;height:30px}

/* ---------- hero (provisorio) ---------- */
.hero{position:absolute;inset:0;z-index:4;display:grid;pointer-events:none;
  padding-top:96px;padding-bottom:calc(var(--dock-h) + 30px);
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.hero a,.hero button{pointer-events:auto}
.stage[data-layout="B"] .hero{grid-template-columns:minmax(0,1.55fr) minmax(0,.7fr);align-content:end;align-items:end;column-gap:56px}
.stage[data-layout="A"] .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;row-gap:34px}
.stage[data-layout="A"] .sub{grid-column:1;max-width:44ch}

.eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.26em;color:var(--eyebrow);margin:0 0 22px}
.eyebrow::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--blue-hi),transparent)}
.headline{margin:0;font:600 clamp(24px,3.3vw,54px)/1.08 var(--f-display);letter-spacing:-.025em}
.stage[data-layout="A"] .headline{font-size:clamp(22px,2.8vw,46px)}
.ln{position:relative;display:block;width:fit-content;max-width:100%}
.ln .tx{display:inline-block}
.headline em{font-style:normal;background:linear-gradient(100deg,#a9c8ff 0%,#5a8dff 42%,#2a5cf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ln::before,.ln::after{content:"";position:absolute;top:6%;bottom:-8%;left:0;right:-4px;transform:scaleX(0);transform-origin:left;pointer-events:none}
.ln::before{background:linear-gradient(90deg,#4a80ff,#1d48d8)}
.ln::after{background:linear-gradient(90deg,#f3f7ff,#c9dcff)}
/* glitch ocasional del titular: copias en franjas (azul y hielo; el rojo queda solo para el isotipo) + temblor corto */
.ln .tx{position:relative}
/* las copias cortan igual que el texto y no entran en el nombre accesible (alt vacío con «/ ""») */
.ln .tx::before,.ln .tx::after{content:attr(data-g);content:attr(data-g) / "";position:absolute;left:0;right:0;top:0;white-space:normal;pointer-events:none;opacity:0}
.gl.glitch .ln{animation:gShake .46s steps(1,end)}
.gl.glitch .tx::before{color:#2f6bff;opacity:.95;animation:gSliceA .46s steps(1,end) both}
.gl.glitch .tx::after{color:var(--ice);opacity:.55;animation:gSliceB .46s steps(1,end) both}
@keyframes gShake{0%{transform:none}8%{transform:translate(-3px,0) skewX(-8deg)}16%{transform:translate(4px,0)}26%{transform:none}52%{transform:translate(-2px,1px)}60%{transform:none}100%{transform:none}}
@keyframes gSliceA{0%{clip-path:inset(10% 0 72% 0);transform:translate(-7px,0)}18%{clip-path:inset(58% 0 20% 0);transform:translate(6px,0)}36%{clip-path:inset(34% 0 46% 0);transform:translate(-10px,0)}56%{clip-path:inset(78% 0 6% 0);transform:translate(4px,0)}76%{clip-path:inset(2% 0 86% 0);transform:translate(-3px,0)}100%{clip-path:inset(0 0 100% 0);transform:none}}
@keyframes gSliceB{0%{clip-path:inset(64% 0 14% 0);transform:translate(6px,0)}22%{clip-path:inset(18% 0 66% 0);transform:translate(-5px,0)}44%{clip-path:inset(46% 0 38% 0);transform:translate(8px,0)}66%{clip-path:inset(4% 0 80% 0);transform:translate(-4px,0)}86%{clip-path:inset(70% 0 12% 0);transform:translate(3px,0)}100%{clip-path:inset(0 0 100% 0);transform:none}}
.sub{display:grid;gap:20px;min-width:0}
.lede{margin:0;color:var(--lede);font:400 13px/1.65 var(--f-mono);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 6px 0 22px;text-decoration:none;font:600 16px/1 var(--f-ui);letter-spacing:-.01em}
.btn b{width:36px;height:36px}
.link{font-size:12px;text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:3px}
@media (pointer:coarse){ .link{padding-top:12px;margin-top:-12px} }

/* reveal: bloques tipo good-fella en el titular, el resto sube con máscara (sin quedarse con el clip al terminar) */
.play .ln::before{animation:blk calc(var(--S) * .78s) cubic-bezier(.75,0,.2,1) both;animation-delay:calc(var(--S) * var(--d))}
.play .ln::after{animation:blk calc(var(--S) * .78s) cubic-bezier(.75,0,.2,1) both;animation-delay:calc(var(--S) * (var(--d) + .1s))}
.play .ln .tx{animation:txin calc(var(--S) * .78s) steps(1,end) both;animation-delay:calc(var(--S) * (var(--d) + .1s))}
.play .rv{animation:rv calc(var(--S) * .9s) cubic-bezier(.2,.7,.1,1) backwards;animation-delay:calc(var(--S) * var(--d))}
.play .fd{animation:fd calc(var(--S) * 1.1s) ease both;animation-delay:calc(var(--S) * var(--d))}
@keyframes blk{0%{transform:scaleX(0);transform-origin:left}46%{transform:scaleX(1);transform-origin:left}54%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes txin{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
@keyframes fd{from{opacity:0}to{opacity:1}}
@keyframes rv{from{opacity:0;transform:translateY(14px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* ---------- pantalla de carga ---------- */
.loader{position:fixed;inset:0;z-index:20;color:#06122b;will-change:clip-path;overflow:hidden;
  background:
    radial-gradient(70% 60% at 16% 10%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(60% 70% at 100% 100%, rgba(5,20,80,.6), transparent 70%),
    linear-gradient(155deg,#3d77ff 0%,#2457f0 38%,#1638c4 70%,#0e2890 100%)}
.loader .grain{opacity:.14;z-index:0}
.ld-in{position:absolute;inset:0;z-index:1}
.ld-ind{position:absolute;top:50%;transform:translateY(-50%);left:max(16px, calc(env(safe-area-inset-left, 0px) + 12vw));display:grid;gap:9px}
.ld-cells{display:flex;gap:3px;height:11px}
.ld-cells i{width:11px;height:11px;opacity:0;display:grid;place-items:center;font:700 11px/1 var(--f-mono);font-style:normal}
.ld-cells i.scr{opacity:1}
.ld-cells i.on{opacity:1;background:#06122b}
.ld-word{font:500 10px/1 var(--f-mono);letter-spacing:.22em;min-height:10px;white-space:nowrap}
.ld-meta{position:absolute;top:calc(env(safe-area-inset-top, 0px) + 22px);left:max(16px, env(safe-area-inset-left, 0px));font:500 9.5px/1 var(--f-mono);letter-spacing:.26em;opacity:.75}
.ld-count{position:absolute;bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);right:max(16px, env(safe-area-inset-right, 0px));font:500 11px/1 var(--f-mono);letter-spacing:.18em;font-variant-numeric:tabular-nums}
.trail{position:fixed;inset:0;z-index:19;
  background:linear-gradient(155deg,#eef4ff 0%,#b9d2ff 45%,#6f9bff 100%)}
.edge{position:fixed;inset:0;z-index:21;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 6px rgba(170,205,255,.95))}
.edge line{stroke:#f3f8ff;stroke-width:1.5;vector-effect:non-scaling-stroke}

/* ---------- dock del laboratorio ---------- */
.dock{position:fixed;z-index:30;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);transform:translateX(-50%);
  width:min(1180px, calc(100% - 32px));padding:10px 12px;display:grid;gap:8px;border-radius:24px;
  background:var(--dock-bg);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line-2);box-shadow:0 24px 60px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  transition:opacity .5s ease, transform .5s ease, visibility 0s}
.dock.away,.dock.off{opacity:0;transform:translate(-50%,14px);pointer-events:none;visibility:hidden;transition:opacity .5s ease, transform .5s ease, visibility 0s .5s}
html:not(.lab) .dock{display:none}   /* el laboratorio aparece solo con ?lab (lo marca folio.js) */
.dock-row{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-width:0}
.dock-lbl{font-size:9px;letter-spacing:.26em;color:var(--mute)}
.chips{display:flex;gap:4px;overflow-x:auto;min-width:0;max-width:100%;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.seg{display:flex;gap:2px;flex-wrap:wrap;padding:3px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 2px rgba(0,0,0,.35)}
.chip,.seg button,.replay,.dock-toggle{appearance:none;padding:8px 14px;font:500 12.5px/1 var(--f-ui);letter-spacing:0;cursor:pointer;white-space:nowrap;color:var(--ice)}
.seg button{padding:6px 12px}
.seg button:not([aria-pressed="true"]){background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.seg button:not([aria-pressed="true"])::before{opacity:0}
.replay{margin-left:auto;color:#fff;font-weight:600}
.dock-toggle{display:none}
.sep{width:1px;height:18px;background:var(--line)}
@media (max-height:520px){ .dock-toggle{display:block} .dock[data-open="false"] .dock-more{display:none} }

/* ---------- MENÚ: índice simple de las secciones (vidrio del dock y filas de especialidades) ---------- */
.menu-panel{position:absolute;top:calc(100% + 12px);right:var(--gut-r);z-index:6;width:min(340px,calc(100% - var(--gut) - var(--gut-r)));
  max-height:calc(100svh - 90px);overflow-y:auto;padding:16px 18px 8px;display:grid;gap:8px;border-radius:22px;
  background:var(--dock-bg);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line-2);box-shadow:0 24px 60px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06)}
.menu-panel[hidden]{display:none}
.menu-panel .esp-list{margin:0}
.menu-panel .esp{padding:12px 6px 12px 0;align-items:center}
.menu-panel .esp-go{grid-row:auto}
.esp-list.sin-n .esp{grid-template-columns:minmax(0,1fr) auto}   /* los folios van sin número */


/* ---------- folios: base compartida (rótulo, titular, especialidades, anexos, columna de la figura) ---------- */
:root{--gut:max(16px, env(safe-area-inset-left, 0px));--gut-r:max(16px, env(safe-area-inset-right, 0px));
  --hair:rgba(160,195,255,.5);--hair-lo:rgba(160,195,255,.12);--glass:rgba(127,169,255,.05)}
body[data-fondo="negro"]{--hair:rgba(255,255,255,.42);--hair-lo:rgba(255,255,255,.08);--glass:rgba(255,255,255,.03)}
.folio{position:relative;isolation:isolate;color:var(--white);
  padding-block:clamp(88px,13svh,150px) clamp(72px,10svh,120px);padding-left:var(--gut);padding-right:var(--gut-r);
  background:linear-gradient(90deg,var(--line-2),var(--line) 45%,transparent) top/100% 1px no-repeat}
.folio > *{position:relative;z-index:1}
.f-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);column-gap:clamp(32px,5vw,88px);align-items:start}
.f-text{display:grid;gap:22px;align-content:start;min-width:0;max-width:640px}
.f-rot{display:flex;align-items:center;gap:12px;margin:0;font:500 10px/1 var(--f-mono);letter-spacing:.26em;color:var(--eyebrow)}
.f-rot::before{content:"";width:38px;height:1px;flex:none;background:linear-gradient(90deg,var(--blue),transparent)}
.f-rot b{font-weight:500;color:var(--blue-hi)}
body:not([data-fondo="negro"]) .f-rot b{color:var(--white)}   /* en modo azul el rótulo ya es azul: lo destacado va en blanco */
.f-tit{margin:0;font:600 clamp(30px,min(4.2vw,8svh),62px)/1.04 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.f-tit em{font-style:normal;background:linear-gradient(100deg,#a9c8ff 0%,#5a8dff 42%,#2a5cf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-baj{margin:0;font:400 clamp(17px,1.4vw,20px)/1.55 var(--f-body);color:var(--white);max-width:46ch}
.f-par{margin:0;font:400 16px/1.7 var(--f-body);color:var(--lede);max-width:56ch}
.f-concl{margin:6px 0 0;font:600 clamp(18px,1.7vw,24px)/1.25 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.f-concl em,.f1-concl em{font-style:normal;background:linear-gradient(100deg,#a9c8ff 0%,#5a8dff 42%,#2a5cf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.f-dir{margin:0;display:grid;gap:6px;padding-left:14px;background:linear-gradient(180deg,var(--blue),transparent) left/1px 100% no-repeat}
.f-dir span{font:500 9.5px/1 var(--f-mono);letter-spacing:.24em;color:var(--mute)}
.f-dir p{margin:0;font:400 15px/1.55 var(--f-body);color:var(--ice)}
.f-next{justify-self:start;display:inline-block;margin-top:10px;padding-right:10px;text-decoration:none;color:var(--white);
  font:600 clamp(16px,1.4vw,19px)/1.2 var(--f-display);letter-spacing:-.01em;padding-bottom:6px;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi) 40%,transparent) bottom left/100% 1px no-repeat;transition:background-size .5s cubic-bezier(.2,.7,.1,1)}
.f-next b{display:inline-block;margin-left:10px;font:500 14px/1 var(--f-mono);color:var(--blue-hi);transition:transform .3s}   /* la flecha sigue a la última palabra, también en dos líneas */
.f-next:hover b,.f-next:focus-visible b{transform:translateX(5px)}
.f-tag{display:inline-flex;align-items:center;gap:8px;font:500 9px/1 var(--f-mono);letter-spacing:.22em;color:var(--mute);margin:0}
.f-tag::before{content:"";width:6px;height:6px;flex:none;background:linear-gradient(135deg,var(--blue-hi),var(--blue));clip-path:polygon(0 0,100% 0,0 100%)}
.f-dim{color:var(--mute)}
.tbd{font:500 .8em/1 var(--f-mono);letter-spacing:.08em;color:var(--blue-hi);opacity:.75;white-space:nowrap}

/* especialidades: filas clickeables que abren su ficha */
.esp-list{display:grid;margin:6px 0 0;padding:0;list-style:none}
.esp{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:4px 14px;align-items:start;width:100%;text-align:left;cursor:pointer;
  padding:16px 6px 16px 0;border:0;color:var(--white);font:inherit;text-decoration:none;
  background:linear-gradient(90deg,var(--hair),var(--hair-lo) 55%,transparent) top/100% 1px no-repeat}
.esp-list > li:last-child .esp{box-shadow:inset 0 -1px 0 var(--hair-lo)}
.esp::before{content:"";position:absolute;inset:1px 0 0 0;z-index:-1;pointer-events:none;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,rgba(47,107,255,.16),rgba(47,107,255,.03) 70%,transparent);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.esp:hover::before,.esp:focus-visible::before,.esp.on::before{transform:scaleX(1)}
@media (hover:none){ .esp:active::before{transform:scaleX(1);transition-duration:.18s} }   /* con el dedo: el barrido aparece al apretar la fila */
.esp-n{font:500 10px/1.9 var(--f-mono);letter-spacing:.12em;color:var(--mute);transition:color .3s}
.esp-name{font:500 clamp(16px,1.3vw,18.5px)/1.3 var(--f-body);transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.esp-hook{grid-column:2;font:400 14px/1.5 var(--f-body);color:var(--lede)}
.esp-go{grid-row:1/3;grid-column:3;align-self:center;font:500 13px/1 var(--f-mono);color:var(--blue-hi);opacity:.55;transition:opacity .3s,transform .3s}
.esp:hover .esp-name,.esp:focus-visible .esp-name,.esp.on .esp-name{transform:translateX(4px)}
.esp:hover .esp-n,.esp:focus-visible .esp-n,.esp.on .esp-n{color:var(--blue-hi)}
.esp:hover .esp-go,.esp:focus-visible .esp-go,.esp.on .esp-go{opacity:1;transform:translate(3px,-3px)}
.esp:focus-visible{outline-offset:-1px}

/* chips mono con borde en degradé */
.chips-k{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip-k{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:0;cursor:pointer;color:var(--ice);text-decoration:none;
  font:500 10px/1.2 var(--f-mono);letter-spacing:.12em;background:linear-gradient(180deg,var(--glass),transparent)}
.chip-k::before,.anexo::before{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,var(--hair),var(--hair-lo) 60%,var(--hair-lo));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.chip-k:hover,.chip-k:focus-visible,.chip-k[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,rgba(47,107,255,.22),rgba(47,107,255,.05))}
.chip-k[aria-pressed="true"]::before{background:linear-gradient(120deg,var(--blue-hi),var(--blue) 60%,rgba(47,107,255,.3))}

/* botón mono */
.btn-k{justify-self:start;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 6px 6px 22px;cursor:pointer;text-decoration:none;
  font:600 15px/1 var(--f-ui);letter-spacing:-.01em}
.btn-k b{width:36px;height:36px}
.btn-k.ghost{color:var(--ice)}
.btn-k[disabled]{opacity:.45;cursor:default}

/* ---------- vidrio líquido: todos los botones (píldoras y círculos al estilo Liquid Glass de Apple) ----------
   Capas: el vidrio desenfoca lo que pasa detrás (la figura en caracteres), un borde de luz más fuerte arriba a la
   izquierda (::before) y un reflejo que sigue al puntero (::after, --lg-x / --lg-y los escribe vidrio.js).
   Al apretar se achica y vuelve con resorte. Los llamados van teñidos de azul; el resto, en vidrio claro. */
.btn,.cta,.btn-k,.mode,.menu,.chip,.seg button,.replay,.dock-toggle,.sv-skip{position:relative;isolation:isolate;border:0;border-radius:999px;color:#fff;
  background:var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-shadow);
  -webkit-tap-highlight-color:transparent;transition:transform .5s var(--lg-spring),background .3s,box-shadow .3s,opacity .3s}
.mode,.menu,.chip,.seg button,.dock-toggle,.btn-k.ghost{color:var(--ice)}
.btn::before,.cta::before,.btn-k::before,.mode::before,.menu::before,.chip::before,.seg button::before,.replay::before,.dock-toggle::before,.sv-skip::before{
  content:"";position:absolute;inset:0;z-index:-1;padding:1px;border-radius:inherit;pointer-events:none;background:var(--lg-rim);transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.btn::after,.cta::after,.btn-k::after,.mode::after,.menu::after,.chip::after,.seg button::after,.replay::after,.dock-toggle::after,.sv-skip::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(110px 80px at var(--lg-x,30%) var(--lg-y,0%),rgba(255,255,255,.2),rgba(255,255,255,.04) 55%,transparent 75%)}
/* teñidos: los llamados y lo elegido (un velo azul, con el borde de luz azulado) */
.btn,.cta,.btn-k:not(.ghost),.sv-skip,.chip[aria-pressed="true"],.seg button[aria-pressed="true"]{background:var(--lg-tint);box-shadow:var(--lg-shadow),var(--lg-glow)}
.btn::before,.cta::before,.btn-k:not(.ghost)::before,.sv-skip::before,.chip[aria-pressed="true"]::before,.seg button[aria-pressed="true"]::before{background:var(--lg-rim-tint)}
.replay{background:var(--lg-fill-hi)}
/* al pasar el mouse (solo con mouse: en el táctil el hover queda pegado después de tocar) */
@media (hover:hover){
  .btn:hover,.cta:hover,.btn-k:hover,.mode:hover,.menu:hover,.chip:hover,.seg button:hover,.dock-toggle:hover,.sv-skip:hover{background:var(--lg-fill-hi)}
  .btn:hover::after,.cta:hover::after,.btn-k:hover::after,.mode:hover::after,.menu:hover::after,.chip:hover::after,.seg button:hover::after,.replay:hover::after,.dock-toggle:hover::after{opacity:1}
  .btn:hover,.cta:hover,.btn-k:not(.ghost):hover,.sv-skip:hover,.chip[aria-pressed="true"]:hover,.seg button[aria-pressed="true"]:hover{background:var(--lg-tint-hi)}
  .btn:hover b,.cta:hover b,.btn-k:hover b{transform:translateX(3px)}
  .cta:hover b{transform:rotate(90deg)}
}
/* la flecha (o el +) en un círculo de vidrio dentro de la píldora */
.btn b,.cta b,.btn-k b{flex:none;display:grid;place-items:center;border-radius:50%;font-weight:500;font-size:14px;letter-spacing:0;
  background:var(--lg-knob);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.26),inset 0 1px 1px rgba(255,255,255,.32),inset 0 -1px 1px rgba(255,255,255,.08);
  font:500 16px/1 var(--f-ui);
  transition:transform .5s var(--lg-spring)}
.btn-k.ghost b{background:rgba(255,255,255,.05)}
.btn:focus-visible b,.btn-k:focus-visible b{transform:translateX(3px)}
.cta:focus-visible b{transform:rotate(90deg)}
/* tocar: como en iOS, el vidrio se agranda apenas, se ilumina por dentro y vuelve con resorte */
.btn:active,.cta:active,.btn-k:not([disabled]):active,.mode:active,.menu:active,.chip:active,.seg button:active,.replay:active,.dock-toggle:active,.sv-skip:active{transform:scale(1.05);transition-duration:.18s}
.btn:active::after,.cta:active::after,.btn-k:active::after,.mode:active::after,.menu:active::after,.chip:active::after,.seg button:active::after,.replay:active::after,.dock-toggle:active::after{opacity:1}
/* sin desenfoque en el navegador: el vidrio va más denso para que el texto se lea igual */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .btn,.cta,.btn-k,.mode,.menu,.chip,.seg button,.dock-toggle,.sv-skip{background-color:rgba(20,34,72,.9)}
}
/* movimiento reducido: sin rebote ni corrimientos */
@media (prefers-reduced-motion:reduce){
  .btn,.cta,.btn-k,.mode,.menu,.chip,.seg button,.replay,.dock-toggle,.sv-skip,.btn b,.cta b,.btn-k b{transition:none}
  .btn:active,.cta:active,.btn-k:active,.mode:active,.menu:active,.chip:active,.seg button:active,.replay:active,.dock-toggle:active,.sv-skip:active,
  .btn:hover b,.btn:focus-visible b,.cta:hover b,.cta:focus-visible b,.btn-k:hover b,.btn-k:focus-visible b{transform:none}
}
/* con el dedo: 44 px de alto como mínimo */
@media (pointer:coarse){
  .cta,.menu,.btn,.btn-k{min-height:44px}
  .cta{padding-right:7px}.cta b{width:32px;height:32px}
  .mode{width:44px;height:44px}
}
/* Android y celulares angostos (menos de 400 px): el encabezado entra entero. Contacto queda como píldora sola
   (el + vuelve desde 400 px) y el logo baja apenas */
@media (max-width:399px){
  .hdr{gap:12px}
  .hdr-r{gap:6px}
  .brand{gap:9px}
  .brand .iso{width:26px}
  .brand .pal{height:13px}
  .cta b{display:none}
  .cta{padding:0 16px}
}

/* anexo del caso de demostración: una solapa de expediente con borde en degradé y esquina cortada */
.anexo{position:relative;display:grid;gap:16px;padding:30px 22px 22px;margin-top:8px;
  background:linear-gradient(160deg,rgba(47,107,255,.09),rgba(47,107,255,.015) 55%,transparent);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.anexo-h{position:absolute;left:0;top:0;display:flex;gap:10px;align-items:center;padding:7px 14px 6px 12px;
  font:500 9.5px/1 var(--f-mono);letter-spacing:.2em;color:var(--blue-hi);
  background:linear-gradient(90deg,rgba(47,107,255,.26),rgba(47,107,255,.05));clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.anexo-t{margin:0;font:600 clamp(17px,1.5vw,21px)/1.25 var(--f-display);letter-spacing:-.01em}

/* columna de la figura: un lugar fijo (sticky) donde la figura se queda mientras se lee el folio */
.f-figcol{position:relative;min-width:0;align-self:stretch}
.f-slot{position:sticky;top:calc(50svh - var(--slot-h) / 2);height:var(--slot-h);--slot-h:min(76svh, 44vw, 720px);display:grid;place-items:center}
.f-slot canvas{width:100%;height:100%;display:block}
html.gl .f-slot > :not(canvas){transition:opacity .35s}
/* !important: tiene que ganarle a .at-dial.on, .lit .at-glow, .lit .df-glow (la transición igual corre) */
html.gl .f-slot:not(.is-cur) > :not(canvas){opacity:0!important}
.f-cap{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:space-between;gap:12px;margin:0;pointer-events:none;
  font:500 9px/1 var(--f-mono);letter-spacing:.22em;color:var(--mute);font-variant-numeric:tabular-nums}
.f-cap b{font-weight:500;color:var(--blue-hi)}
.reveal-on .st{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--i,0) * 80ms)}
.reveal-on .in .st,.reveal-on .st.in{opacity:1;transform:none}
.reveal-on .ya,.reveal-on .ya .st{transition:none!important}   /* bajando rápido: aparece de una */

/* ---------- FOLIO 01 · LA FIRMA (diseño «Tres ángulos») ---------- */
.folio01{position:relative;background:none;padding:0;overflow-x:clip}
.f1-in{position:relative;min-height:100vh;min-height:100svh;display:grid;
  grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(300px,390px);grid-template-rows:auto 1fr auto;
  column-gap:clamp(28px,4vw,60px);row-gap:clamp(18px,3svh,30px);
  padding-top:calc(env(safe-area-inset-top, 0px) + clamp(96px,13svh,118px));padding-bottom:30px;padding-left:var(--gut);padding-right:var(--gut-r)}
.f1-top{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);column-gap:60px;align-items:start}
.f1-head{display:grid;gap:18px;align-content:start}
.f1-title{margin:0;font:600 clamp(32px,min(4.2vw,7.4svh),60px)/1.04 var(--f-display);letter-spacing:-.025em}
.f1-text{display:grid;gap:14px;align-content:start}
.f1-bajada{margin:0;font:400 clamp(16px,1.3vw,19px)/1.55 var(--f-body);color:var(--white)}
.f1-par{margin:0;font:400 15.5px/1.7 var(--f-body);color:var(--lede)}
.f1-concl{margin:4px 0 0;font:600 clamp(16px,1.4vw,20px)/1.3 var(--f-display);letter-spacing:-.01em}
.eye-slot{grid-column:1/3;grid-row:2;align-self:center;justify-self:center;position:relative;aspect-ratio:3/2;
  width:min(100%, clamp(330px, calc((100svh - 470px) * 1.5), 660px))}
.eye-slot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.eye-cap{position:absolute;left:0;right:0;bottom:-2px;display:flex;justify-content:space-between;gap:16px;margin:0;pointer-events:none;
  font:500 9px/1 var(--f-mono);letter-spacing:.22em;color:var(--mute);white-space:nowrap}
.eye-cap span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0;font-variant-numeric:tabular-nums;color:var(--blue-hi)}
.angulos{grid-column:3;grid-row:2;align-self:center;display:grid;gap:14px;min-width:0}
.ang{--on:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 14px;padding:30px 18px 16px 20px;
  text-decoration:none;color:var(--white);isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.1,1);
  background:linear-gradient(90deg,var(--glass),transparent 75%)}
.ang::before{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--hair),var(--hair-lo) 45%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.ang::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(70% 110% at 0% 50%,rgba(47,107,255,.26),transparent 70%)}
.ang:hover,.ang:focus-visible,.ang.on{transform:translateX(4px)}
.ang:hover::after,.ang:focus-visible::after,.ang.on::after{opacity:1}
.ang:hover::before,.ang:focus-visible::before,.ang.on::before{background:linear-gradient(90deg,var(--blue-hi),rgba(47,107,255,.5) 40%,var(--hair-lo))}
@media (hover:none){ .ang:active{transform:translateX(4px)} .ang:active::after{opacity:1} }   /* con el dedo: la tarjeta responde al apretarla */
.ang-tab{position:absolute;left:0;top:0;padding:6px 14px 5px 10px;font:500 9.5px/1 var(--f-mono);letter-spacing:.2em;color:var(--blue-hi);
  background:linear-gradient(90deg,rgba(47,107,255,.26),rgba(47,107,255,.06));clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.ang-q{font:500 clamp(15px,1.2vw,17.5px)/1.35 var(--f-body)}
.ang b{font:500 14px/1 var(--f-mono);color:var(--blue-hi)}
@keyframes dash{to{stroke-dashoffset:-64}}
.f1-foot{grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:14px;
  background:linear-gradient(90deg,var(--line-2),var(--line) 60%,transparent) top/100% 1px no-repeat;
  font:500 9.5px/1.4 var(--f-mono);letter-spacing:.22em;color:var(--mute)}
.f1-foot a{color:var(--blue-hi);text-decoration:none;letter-spacing:.12em}
.f1-foot a:hover{color:var(--white)}
/* tableta: debajo de 960, el titular y la bajada se apilan */
@media (min-width:760px) and (max-width:959px){
  .f1-top{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .f1-in{grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
  .eye-slot{grid-column:1;width:100%}
  .angulos{grid-column:2}
}

/* placeholder de lo que falta */
.folio-wip{display:grid;gap:14px;padding-block:90px;background:linear-gradient(90deg,var(--line-2),var(--line) 45%,transparent) top/100% 1px no-repeat;
  padding-left:var(--gut);padding-right:var(--gut-r)}
.folio-wip p{margin:0}.wip{font:400 15px/1.6 var(--f-body);color:var(--lede)}

@media (max-width:759px){
  .f-grid{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .f-figcol{order:-1}
  .f-slot{position:relative;top:auto;--slot-h:min(46svh, 92vw)}
  .f1-in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:18px}
  .f1-top{display:contents}
  .f1-head{order:1}.eye-slot{order:2;grid-column:1;grid-row:auto;width:calc(100% + var(--gut) + var(--gut-r));margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r))}
  .eye-cap{padding-inline:var(--gut) var(--gut-r)}
  .angulos{order:3;grid-column:1;grid-row:auto}.f1-text{order:4}.f1-foot{order:5;grid-row:auto}
  .esp{grid-template-columns:26px minmax(0,1fr) auto}
}
@media (prefers-reduced-motion: reduce){ .reveal-on .st{opacity:1;transform:none;transition:none} }

/* ---------- responsive ---------- */
@media (min-width:760px){
  .hdr,.hero,.fframe{padding-left:max(40px, env(safe-area-inset-left, 0px));padding-right:max(40px, env(safe-area-inset-right, 0px))}
  :root{--gut:max(40px, env(safe-area-inset-left, 0px));--gut-r:max(40px, env(safe-area-inset-right, 0px))}
  .ld-meta{left:max(40px, env(safe-area-inset-left, 0px))}
  .ld-count{right:max(40px, env(safe-area-inset-right, 0px))}
}
@media (max-width:759px){
  .hdr-mid,.bracket,.menu span{display:none}
  .menu{width:40px;padding:0;justify-content:center}
  @media (pointer:coarse){ .menu{width:44px} }
  .stage[data-layout] .hero{grid-template-columns:minmax(0,1fr);align-content:end;align-items:start;row-gap:22px}
  .stage[data-layout] .veil{width:100%;height:60%;right:0;background:linear-gradient(180deg,transparent 0%, rgba(3,8,20,.6) 40%, rgba(3,8,20,.94) 100%)}
  .eyebrow{letter-spacing:.14em;font-size:9.5px;gap:10px;margin-bottom:16px;
    width:fit-content;max-width:100%;padding:5px 14px 5px 0;background:linear-gradient(90deg,rgba(var(--veil),.92) 0%,rgba(var(--veil),.82) 78%,transparent 100%)}
  .eyebrow::before{width:20px}
  .fcap.r{display:none}
  .lede{font-size:12px}
  .headline,.stage[data-layout] .headline{font-size:7.2vw}
  .dock{padding:8px}
  .dock-toggle{display:block}
  .dock[data-open="false"] .dock-more{display:none}
  .sep{display:none}
}
@media (max-width:759px) and (max-height:520px){ .headline,.stage[data-layout] .headline{font-size:min(7.2vw,10svh)} }
@media (prefers-reduced-motion: reduce){
  .grain{animation:none}
  .play .ln::before,.play .ln::after,.play .ln .tx,.play .rv,.play .fd,.mode svg{animation:none}
}

/* ---------- escenas: la portada y FOLIO 01 comparten lugar; el pase es un corte diagonal ---------- */
html{overscroll-behavior-y:none}
.scenes{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr)}
.scenes > .stage,.scenes > .folio01{grid-area:1/1}
.scenes[data-scene="0"] > .folio01{clip-path:inset(0 0 100% 0)}
.scenes[data-scene="1"] > .stage{clip-path:inset(0 0 100% 0);pointer-events:none}
html.flow .scenes{display:block}
html.flow .scenes > *{clip-path:none!important}
html.flow .stage{height:auto;min-height:100svh}
html.flow .hero{position:relative;inset:auto;min-height:100svh}
.sc-chrome{position:absolute;top:0;left:0;right:0;z-index:5;pointer-events:none}
.sc-chrome .hdr{pointer-events:auto}
.sc-edge{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;opacity:0;filter:drop-shadow(0 0 6px rgba(170,205,255,.95))}
.sc-edge line{stroke:#f3f8ff;stroke-width:1.5;vector-effect:non-scaling-stroke}
/* tramos: lo que va después de <main> (el pie) y es de un tramo de más abajo se pliega; no suma alto al documento */
.tramo-plegado{height:0!important;min-height:0!important;padding-block:0!important;margin-block:0!important;border-block-width:0!important;overflow:clip!important}
html.sc #firma:not(.play) .f1-title .tx{opacity:0}

/* pie (lab/src/sec/80-pie.css) */
/* ===== PIE — todo prefijado con #pie (clases pie-) ===== */
#pie{--pie-ease:cubic-bezier(.2,.7,.1,1);
  --pie-b1:color-mix(in srgb,var(--blue) 18%,transparent);
  --pie-b2:color-mix(in srgb,var(--blue) 5%,transparent);
  position:relative;isolation:isolate;overflow:clip;color:var(--white);
  padding:clamp(80px,12svh,140px) var(--gut-r) 0 var(--gut);
  background:linear-gradient(90deg,var(--line-2),var(--line) 45%,transparent) top/100% 1px no-repeat}
#pie > *{position:relative;z-index:1}
#pie .pie-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#pie .pie-halo{position:absolute;left:-14%;bottom:-30%;width:70%;height:90%;
  background:radial-gradient(closest-side,var(--pie-b2),transparent 72%)}

/* ---------- fila superior: isotipo · cierre · índice · caso ---------- */
#pie .pie-top{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.8fr);column-gap:clamp(28px,4vw,72px);align-items:start}
#pie .pie-iso{display:grid;gap:12px;min-width:0}
#pie .pie-iso-c{position:relative;aspect-ratio:598/660;width:100%}
#pie .pie-iso-c canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#pie .pie-cap{margin:0;font:500 9px/1 var(--f-mono);letter-spacing:.22em;color:var(--mute)}
#pie .pie-cap b{font-weight:500;color:var(--blue-hi)}
#pie .pie-cierre{display:grid;gap:22px;align-content:start;min-width:0}
#pie .pie-lema{margin:0;font:600 clamp(24px,2.5vw,38px)/1.08 var(--f-display);letter-spacing:-.025em}
#pie .pie-lema > *{display:block}
#pie .pie-lema span{color:var(--ice)}
#pie .pie-lema em{font-style:normal;background:linear-gradient(100deg,color-mix(in srgb,var(--blue-hi) 64%,var(--white)) 0%,var(--blue-hi) 30%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#pie .pie-base{margin:0;font:500 9.5px/1.5 var(--f-mono);letter-spacing:.24em;color:var(--mute)}
#pie .pie-cta{justify-self:start;display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--white);
  font:500 15px/1 var(--f-body);padding-bottom:7px;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi) 40%,transparent) left bottom/100% 1px no-repeat}
#pie .pie-cta b{font:500 13px/1 var(--f-mono);color:var(--blue-hi);transition:transform .3s}
#pie .pie-cta:hover b,#pie .pie-cta:focus-visible b{transform:translateX(5px)}

#pie .pie-k{margin:0 0 10px;font:500 9px/1 var(--f-mono);letter-spacing:.26em;color:var(--mute)}
#pie .pie-k2{margin-top:26px}
#pie .pie-list{margin:0;padding:0;list-style:none;display:grid}
#pie .pie-list a{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:9px 0 10px;
  text-decoration:none;color:var(--ice);
  background:linear-gradient(90deg,var(--hair-lo),transparent 80%) top/100% 1px no-repeat}
/* la flecha es decorativa: con «/ ""» no entra en el nombre del link */
#pie .pie-list a::after{content:"↗";content:"↗" / "";font:500 11px/1 var(--f-mono);color:var(--blue-hi);opacity:0;transform:translate(-4px,3px);transition:opacity .3s,transform .3s}
#pie .pie-list a::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--blue-hi),var(--blue) 40%,transparent);transition:transform .5s var(--pie-ease)}
#pie .pie-list a:hover,#pie .pie-list a:focus-visible{color:var(--white)}
#pie .pie-list a:hover::before,#pie .pie-list a:focus-visible::before{transform:scaleX(1)}
#pie .pie-list a:hover::after,#pie .pie-list a:focus-visible::after{opacity:1;transform:none}
#pie .pie-list.sin-n a{grid-template-columns:minmax(0,1fr) auto}   /* los folios van sin número */
#pie .pie-n{font:500 9.5px/1 var(--f-mono);letter-spacing:.12em;color:var(--mute);transition:color .3s}
#pie .pie-list a:hover .pie-n,#pie .pie-list a:focus-visible .pie-n{color:var(--blue-hi)}
#pie .pie-t{font:400 14.5px/1.35 var(--f-body);transition:transform .35s var(--pie-ease)}
#pie .pie-list a:hover .pie-t,#pie .pie-list a:focus-visible .pie-t{transform:translateX(3px)}
#pie .pie-note{margin:10px 0 0;font:400 13px/1.5 var(--f-body);color:var(--mute)}
#pie .pie-fict{font:500 8.5px/1.4 var(--f-mono);letter-spacing:.18em}

/* ---------- la palabra en caracteres ---------- */
#pie .pie-word{position:relative;margin:clamp(56px,9svh,110px) calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut));padding:0 var(--gut-r) 0 var(--gut);
  height:var(--wh,auto);user-select:none}
#pie .pie-word-c{display:block;width:100%;height:100%}
/* la diagonal de la marca baja por el aire y sigue dentro de las letras como caracteres azules (la ubica el JS) */
#pie .pie-ray{position:absolute;left:var(--rx,-10px);top:0;width:1px;height:var(--rh,min(230px,26vw));transform:translateY(-100%) rotate(var(--ra,32deg));
  transform-origin:bottom;background:linear-gradient(0deg,var(--blue-hi),color-mix(in srgb,var(--blue) 60%,transparent) 35%,transparent);opacity:.75;pointer-events:none}
#pie .pie-word:not(.drawn) .pie-ray{display:none}
#pie .pie-word-t{display:block;font:800 clamp(64px,19.5vw,320px)/.8 var(--f-display);letter-spacing:-.03em;text-align:center;
  background:linear-gradient(180deg,var(--hair),transparent 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
#pie .pie-word.drawn .pie-word-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#pie .pie-word:not(.drawn) .pie-word-c{display:none}

/* ---------- barra final ---------- */
#pie .pie-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding:16px 0 calc(env(safe-area-inset-bottom, 0px) + 22px);
  background:linear-gradient(90deg,var(--line-2),var(--line) 60%,transparent) top/100% 1px no-repeat;
  font:500 9.5px/1.4 var(--f-mono);letter-spacing:.22em;color:var(--mute);font-variant-numeric:tabular-nums}
#pie .pie-bot p{margin:0}
#pie .pie-copy{color:var(--ice)}
#pie .pie-geo{display:flex;flex-wrap:wrap;gap:4px 18px}
#pie .pie-dms{color:var(--mute);opacity:.7}
#pie .pie-hora time{color:var(--blue-hi);margin:0 4px}
#pie .pie-up{display:inline-flex;align-items:center;gap:8px;color:var(--blue-hi);text-decoration:none;letter-spacing:.2em}
#pie .pie-up b{font-weight:500;transition:transform .3s}
#pie .pie-up:hover,#pie .pie-up:focus-visible{color:var(--white)}
#pie .pie-up:hover b,#pie .pie-up:focus-visible b{transform:translateY(-3px)}
/* táctil: el llamado y «volver arriba» crecen sin mover el diseño (el subrayado del llamado queda en su lugar) */
@media (pointer:coarse){
  #pie .pie-cta{padding-block:12px;margin-block:-12px -5px;background-position:left 0 bottom 5px}
  #pie .pie-up{padding-block:12px;margin-block:-12px}
}

@media (max-width:1099px) and (min-width:760px){
  #pie .pie-top{grid-template-columns:minmax(140px,180px) minmax(0,1fr) minmax(0,1fr);row-gap:44px}
  #pie .pie-cierre{grid-column:2/-1}
  #pie .pie-nav{grid-column:2}
  #pie .pie-caso{grid-column:3}
}
@media (max-width:759px){
  #pie{padding-top:72px}
  #pie .pie-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:40px;column-gap:20px}
  #pie .pie-iso{grid-column:1;max-width:150px}
  #pie .pie-cierre{grid-column:1/-1;grid-row:2}
  #pie .pie-nav{grid-column:1/-1}
  #pie .pie-caso{grid-column:1/-1}
  #pie .pie-list a{min-height:44px;align-items:center}
  #pie .pie-word{margin-top:48px}
  #pie .pie-bot{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  #pie .pie-list a::before,#pie .pie-list a::after,#pie .pie-t{transition:none}
}

/* ===== PÁGINA DE SERVICIO — clases sv- (la base de la home va antes: variables, encabezado, botones, rótulos, filas) =====
   Una columna de texto y, al lado, la figura del ángulo en caracteres, fija mientras se lee (como los folios de la home). */
.sv{display:block;position:relative;z-index:1;outline:none}
/* los [a confirmar] largos (una lista de destinatarios) pueden cortarse en el celular */
.sv .tbd{white-space:normal}
.sv-skip{position:absolute;left:var(--gut);top:-60px;z-index:40;padding:13px 18px;font:500 10px/1 var(--f-mono);letter-spacing:.2em;text-decoration:none}   /* píldora de vidrio teñida (la base de la home) */
.sv-skip:focus{top:12px}
.sv-chrome{position:absolute}
.sv-chrome .hdr-mid{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* aparición del encabezado (la base anima .rv dentro de .play) */
.sv-hero.play .rv{animation:rv calc(var(--S) * .9s) cubic-bezier(.2,.7,.1,1) backwards;animation-delay:var(--d)}
.sv-hero.play .sv-tit{animation:svTit .9s cubic-bezier(.2,.7,.1,1) backwards .1s}
@keyframes svTit{from{opacity:0;transform:translateY(18px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-10% 0 -10% 0)}}

/* ---------- la grilla: texto a la izquierda, figura fija a la derecha ---------- */
.sv-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);column-gap:clamp(32px,5vw,96px);
  padding:calc(env(safe-area-inset-top, 0px) + clamp(112px,15svh,150px)) var(--gut-r) 0 var(--gut)}
.sv-hero{grid-column:1;grid-row:1;display:grid;gap:22px;align-content:start;min-width:0;max-width:700px;padding-bottom:clamp(72px,12svh,130px)}
.sv-figcol{grid-column:2;grid-row:1/3;position:relative;min-width:0;padding-bottom:clamp(48px,8svh,90px)}   /* el relleno corta la figura fija antes del filete de abajo */
.sv-body{grid-column:1;grid-row:2;display:grid;gap:clamp(76px,12svh,128px);min-width:0;max-width:700px;padding-bottom:clamp(90px,14svh,150px)}

/* migas: dónde está esta página dentro de la home */
.sv-crumbs ol{display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0;list-style:none;font:500 9.5px/1 var(--f-mono);letter-spacing:.2em;color:var(--mute)}
.sv-crumbs li{display:flex;align-items:center}
.sv-crumbs li + li::before{content:"/";content:"/" / "";margin:0 10px;color:var(--line-2)}
.sv-crumbs a{color:var(--mute);text-decoration:none;padding:6px 0;transition:color .25s}
.sv-crumbs a:hover,.sv-crumbs a:focus-visible{color:var(--white)}
.sv-crumbs [aria-current] span{color:var(--blue-hi)}
@media (pointer:coarse){ .sv-crumbs a{padding:14px 0} }

.sv-tit{margin:0;font:600 clamp(38px,min(5.2vw,9.5svh),80px)/1.02 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
/* el glitch ocasional de la portada: copias en franjas (azul y hielo) y un temblor corto; las copias no entran en el nombre accesible */
.sv-tit{position:relative}
.sv-tit::before,.sv-tit::after{content:attr(data-g);content:attr(data-g) / "";position:absolute;inset:0;pointer-events:none;opacity:0;text-wrap:balance}
.sv-tit.glitch,.sv-hero.play .sv-tit.glitch{animation:gShake .46s steps(1,end)}   /* le gana a la entrada del título */
.sv-tit.glitch::before{color:#2f6bff;opacity:.95;animation:gSliceA .46s steps(1,end) both}
.sv-tit.glitch::after{color:var(--ice);opacity:.55;animation:gSliceB .46s steps(1,end) both}
.sv-tit em{font-style:normal;background:linear-gradient(100deg,#a9c8ff 0%,#5a8dff 42%,#2a5cf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-hero .f-baj{max-width:44ch}
/* la ficha del servicio: tres datos en fila, con filete en degradé (como la ficha de FOLIO 01) */

/* ---------- la figura ---------- */
.sv-slot{position:sticky;top:calc(50svh - var(--slot-h) / 2);height:var(--slot-h);--slot-h:min(74svh,44vw,720px);display:grid}
.sv-slot canvas{position:absolute;inset:0 0 34px;width:100%;height:calc(100% - 34px);display:block}
.sv-glow{position:absolute;inset:6% 4% 14%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 12%,transparent),transparent 72%);opacity:.8}
.sv-cap{position:absolute;left:0;right:0;bottom:8px;margin:0}
.sv-cap .sv-lect{color:var(--blue-hi);text-align:right}
.sv-now{position:absolute;top:0;right:0;margin:0;display:flex;gap:2px;font:500 9px/1 var(--f-mono);letter-spacing:.2em;color:var(--mute);font-variant-numeric:tabular-nums}
.sv-now b{font-weight:500;color:var(--blue-hi)}

/* ---------- índice de la página ---------- */
.sv-toc{display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px;padding-top:12px;margin-bottom:calc(-1 * clamp(40px,6svh,70px));
  background:linear-gradient(90deg,var(--line-2),var(--line) 60%,transparent) top/100% 1px no-repeat}
.sv-toc-k{margin:0;font:500 9px/1 var(--f-mono);letter-spacing:.24em;color:var(--mute)}
.sv-toc ol{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0;padding:0;list-style:none}
.sv-toc a{display:inline-flex;gap:8px;align-items:baseline;padding:6px 0;text-decoration:none;color:var(--lede);font:400 13.5px/1.3 var(--f-body);transition:color .25s}
.sv-toc a span{font:500 9px/1 var(--f-mono);letter-spacing:.12em;color:var(--mute);transition:color .25s}
.sv-toc a:hover,.sv-toc a:focus-visible,.sv-toc a.on{color:var(--white)}
.sv-toc a.on span,.sv-toc a:hover span{color:var(--blue-hi)}
@media (pointer:coarse){ .sv-toc a{padding:12px 0} }

/* ---------- cada sección: un número grande y su rótulo, con un filete que sigue ---------- */
.sv-s{display:grid;gap:24px;scroll-margin-top:32px;min-width:0}
.sv-k{display:flex;align-items:flex-end;gap:16px;margin:0 0 6px;font-weight:400}
.sv-k-n{font:600 clamp(40px,4vw,58px)/.8 var(--f-display);letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--blue-hi) 0%,color-mix(in srgb,var(--blue) 40%,transparent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-k-t{flex:1;display:flex;align-items:center;gap:14px;padding-bottom:4px;font:500 10px/1 var(--f-mono);letter-spacing:.26em;color:var(--eyebrow)}
.sv-k-t::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

/* 01 · qué es: las preguntas que responde, una por fila */
.sv-q{margin:0 0 6px;padding:0;list-style:none;display:grid}
.sv-q li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:16px 0 17px;
  font:600 clamp(20px,1.9vw,27px)/1.2 var(--f-display);letter-spacing:-.015em;
  background:linear-gradient(90deg,var(--hair),var(--hair-lo) 55%,transparent) top/100% 1px no-repeat}
.sv-q li:last-child{box-shadow:inset 0 -1px 0 var(--hair-lo)}
.sv-q li span{font:500 10px/1 var(--f-mono);letter-spacing:.12em;color:var(--blue-hi)}
.sv-frase{margin:0 0 4px;font:600 clamp(24px,2.5vw,36px)/1.14 var(--f-display);letter-spacing:-.02em;text-wrap:balance;
  padding:18px 0 20px;background:linear-gradient(90deg,var(--hair),var(--hair-lo) 55%,transparent) top/100% 1px no-repeat,linear-gradient(90deg,var(--hair-lo),transparent 70%) bottom/100% 1px no-repeat}
.sv-frase em{font-style:normal;background:linear-gradient(100deg,#a9c8ff 0%,#5a8dff 42%,#2a5cf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* rótulos cortos (estados de un expediente, indicadores): chips mono, sin acción */
.sv-chips{display:grid;gap:12px;margin-top:6px}
.sv-chips-k{margin:0;font:500 9px/1 var(--f-mono);letter-spacing:.22em;color:var(--mute)}
.sv-chips .chip-k{cursor:default}
.sv-chips .chip-k:hover{color:var(--ice);background:linear-gradient(180deg,var(--glass),transparent)}
.sv-para{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;margin:0;font:400 14.5px/1.55 var(--f-body);color:var(--ice)}
.sv-para-k{font:500 9px/1.9 var(--f-mono);letter-spacing:.22em;color:var(--blue-hi)}
/* el recuadro destacado de los dossiers: vidrio y filo azul a la izquierda */
.sv-nota{margin:0;padding:16px 18px 17px 20px;font:400 15px/1.6 var(--f-body);color:var(--ice);
  background:linear-gradient(90deg,var(--blue),transparent) left/1px 100% no-repeat,linear-gradient(100deg,rgba(47,107,255,.12),rgba(47,107,255,.02) 70%,transparent)}

/* 02 · qué se evalúa: tarjetas en dos columnas, con borde en degradé */
.sv-mlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.sv-m{position:relative;display:grid;align-content:start;gap:8px;padding:20px 20px 22px;min-width:0;
  background:linear-gradient(160deg,var(--glass),transparent 70%)}
.sv-m::before{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,var(--hair),var(--hair-lo) 50%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sv-m-n{font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;color:var(--blue-hi);margin-bottom:6px}
.sv-m-t{font:500 16.5px/1.3 var(--f-body);color:var(--white)}
.sv-m-d{font:400 14px/1.55 var(--f-body);color:var(--lede)}
.sv-mfin{margin:18px 0 0;font:400 15px/1.6 var(--f-body);color:var(--lede)}
.sv-mfin b{font-weight:500;color:var(--blue-hi)}
.sv-mlist > li:only-child,.sv-mlist > li:last-child:nth-child(odd){grid-column:1/-1}
/* las tarjetas se encienden como las filas de la home: un barrido de luz, el borde más claro, el título se corre */
.sv-m,.sv-llist li{isolation:isolate}
.sv-m::after,.sv-llist li::after{content:"";position:absolute;inset:1px 0 0 0;z-index:-1;pointer-events:none;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,rgba(47,107,255,.16),rgba(47,107,255,.03) 70%,transparent);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.sv-llist li{position:relative}
.sv-m-t,.sv-llist li > span{transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.sv-m::before{transition:background .35s}
.sv-m.on::after,.sv-llist li.on::after{transform:scaleX(1)}
.sv-m.on::before{background:linear-gradient(140deg,var(--blue-hi),rgba(47,107,255,.3) 45%,transparent)}
.sv-m.on .sv-m-t,.sv-llist li.on > span{transform:translateX(4px)}
.sv-m.on .sv-m-n{color:var(--white)}
@media (hover:hover){
  .sv-m:hover::after,.sv-llist li:hover::after{transform:scaleX(1)}
  .sv-m:hover::before{background:linear-gradient(140deg,var(--blue-hi),rgba(47,107,255,.3) 45%,transparent)}
  .sv-m:hover .sv-m-t,.sv-llist li:hover > span{transform:translateX(4px)}
  .sv-m:hover .sv-m-n{color:var(--white)}
}

/* el recorrido (pasos de una cuenta, de un dato…): un riel con estaciones */
.sv-rail{display:grid;gap:12px;margin:0 0 10px}
.sv-rail-k{display:flex;justify-content:space-between;margin:0;font:500 9px/1 var(--f-mono);letter-spacing:.22em;color:var(--mute)}
.sv-rail-k b{font-weight:500;color:var(--blue-hi)}
.sv-rail-l{position:relative;height:46px;margin:6px 8px 0;padding:0;list-style:none}
.sv-rail-ln{position:absolute;left:0;right:0;top:6px;height:1px;background:linear-gradient(90deg,var(--blue-hi),var(--hair) 60%,var(--hair-lo))}
.sv-st{position:absolute;top:0;left:calc(var(--x) * 100%);width:0;height:100%}
.sv-st b{position:absolute;left:0;top:0;width:13px;height:13px;transform:translateX(-50%);border-radius:50%;background:var(--ink-0);box-shadow:inset 0 0 0 1px var(--blue-hi)}
.sv-st b::after{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--white),var(--blue-hi) 45%,var(--blue))}
.sv-st span{position:absolute;top:22px;left:0;transform:translateX(-50%);white-space:nowrap;font:500 9px/1.3 var(--f-mono);letter-spacing:.14em;color:var(--ice)}
.sv-st:nth-child(2) span{transform:translateX(-6.5px)}
.sv-st:last-child span{transform:translateX(calc(-100% + 6.5px))}

/* 03 · cómo lo hacemos: cuatro pasos sobre una línea vertical */
.sv-clist{position:relative;display:grid;margin:6px 0 0;padding:0;list-style:none}
.sv-clist::before{content:"";position:absolute;left:6px;top:10px;bottom:24px;width:1px;background:linear-gradient(180deg,var(--blue-hi),var(--hair) 50%,var(--hair-lo))}
.sv-c{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:6px;padding:0 0 26px}
.sv-c::before{content:"";position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:50%;background:var(--ink-0);box-shadow:inset 0 0 0 1px var(--blue-hi)}
.sv-c::after{content:"";position:absolute;left:4px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--blue-hi)}
.sv-c-n{grid-row:1/3;padding-left:24px;font:500 9.5px/2.3 var(--f-mono);letter-spacing:.12em;color:var(--mute)}
.sv-c-t{font:600 clamp(16px,1.35vw,19px)/1.3 var(--f-display);letter-spacing:-.01em}
.sv-c-d{font:400 15px/1.6 var(--f-body);color:var(--lede)}
/* la metodología avanza: la línea se llena de azul hasta el paso que se lee (--prog); ese paso se enciende y los que siguen esperan */
.sv-clist::after{content:"";position:absolute;left:6px;top:10px;width:1px;height:var(--prog,0px);background:linear-gradient(180deg,var(--blue-hi),var(--blue));
  box-shadow:0 0 8px rgba(80,137,255,.7);transition:height .25s linear}
.sv-clist.is-full::after{height:calc(100% - 34px)}
.sv-c::before{z-index:1;transition:box-shadow .4s}
.sv-c::after{z-index:1}
.sv-c-t,.sv-c-d,.sv-c-n{transition:opacity .45s,color .45s}
.sv-c:not(.is-on) .sv-c-t,.sv-c:not(.is-on) .sv-c-d{opacity:.55}
.sv-c.is-on .sv-c-n{color:var(--blue-hi)}
.sv-c.is-cur::before{box-shadow:inset 0 0 0 1px var(--blue-hi),0 0 0 4px rgba(47,107,255,.16),0 0 16px rgba(80,137,255,.65)}

/* 04 · entregables */
.sv-llk{margin:0;font:400 16px/1.6 var(--f-body);color:var(--ice)}
.sv-llist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0;padding:0;list-style:none}
.sv-llist li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;padding:12px 0 13px;font:400 15px/1.45 var(--f-body);color:var(--white);
  background:linear-gradient(90deg,var(--hair),var(--hair-lo) 60%,transparent) top/100% 1px no-repeat}
.sv-llist i{font:500 9px/1 var(--f-mono);font-style:normal;letter-spacing:.12em;color:var(--blue-hi)}
.sv-llist:has(> li:nth-child(4)) li:last-child:nth-child(odd){grid-column:1/-1}
.sv-llist:not(:has(> li:nth-child(4))){grid-template-columns:minmax(0,1fr)}

/* el ejemplo de la entrega: se abre y se cierra */
.sv-ent{margin-top:4px}
.sv-ent-b{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:16px 8px 16px 4px;border:0;cursor:pointer;color:var(--white);text-align:left;
  background:linear-gradient(90deg,var(--hair),var(--hair-lo) 60%,transparent) top/100% 1px no-repeat}
.sv-ent-b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--hair-lo),transparent)}
.sv-ent-b::before{content:"";position:absolute;inset:1px 0 0 0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(90deg,rgba(47,107,255,.14),transparent 70%)}
.sv-ent-b:hover::before,.sv-ent-b:focus-visible::before,.sv-ent-b[aria-expanded="true"]::before{opacity:1}
.sv-ent-b:focus-visible{outline-offset:-1px}
.sv-ent-k{font:500 15.5px/1.3 var(--f-body)}
.sv-ent-n{margin-left:auto;font:500 9px/1 var(--f-mono);letter-spacing:.2em;color:var(--mute)}
.sv-ent-i{flex:none;position:relative;width:30px;height:30px;border-radius:50%;
  background:var(--lg-fill);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-shadow),inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background .3s,transform .5s var(--lg-spring)}
.sv-ent-i::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-6px 0 0 -4px;border-right:1.4px solid var(--blue-hi);border-bottom:1.4px solid var(--blue-hi);
  transform:rotate(45deg);transition:transform .4s cubic-bezier(.2,.7,.1,1),border-color .3s}
@media (hover:hover){ .sv-ent-b:hover .sv-ent-i{background:var(--lg-fill-hi)} }
.sv-ent-b[aria-expanded="true"] .sv-ent-i{background:var(--lg-tint)}
.sv-ent-b[aria-expanded="true"] .sv-ent-i::before{transform:translateY(4px) rotate(-135deg);border-color:#fff}
.sv-ent-b:active .sv-ent-i{transform:scale(.9);transition-duration:.12s}
@media (prefers-reduced-motion:reduce){ .sv-ent-i,.sv-ent-i::before{transition:none} .sv-ent-b:active .sv-ent-i{transform:none} }
.sv-ent-p{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s cubic-bezier(.2,.7,.1,1),visibility 0s .5s}
.sv-ent-b[aria-expanded="true"] + .sv-ent-p{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.2,.7,.1,1),visibility 0s}
.sv-ent-in{overflow:hidden;min-height:0}
.sv-ent-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin:16px 0 6px;font:500 8.5px/1.4 var(--f-mono);letter-spacing:.2em;color:var(--mute)}
.sv-ent-h span:first-child{color:var(--ice)}
.sv-ent-dl{margin:0;display:grid}
.sv-ent-dl div{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:4px 20px;padding:11px 2px;
  background:linear-gradient(90deg,var(--hair-lo),transparent 80%) top/100% 1px no-repeat}
.sv-ent-dl dt{display:flex;align-items:baseline;gap:9px;margin:0;font:500 11px/1.4 var(--f-mono);letter-spacing:.1em;color:var(--blue-hi)}
.sv-ent-dl dt i{font-style:normal;color:var(--mute);font-size:9px}
.sv-ent-dl dd{margin:0;font:400 13.5px/1.5 var(--f-body);color:var(--lede)}

/* 05 · encuadre */
.sv-enc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;margin:0;padding:20px 22px 21px;font:400 15.5px/1.6 var(--f-body);color:var(--ice);
  background:linear-gradient(160deg,var(--glass),transparent 70%);position:relative}
.sv-enc::before{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;background:linear-gradient(120deg,var(--hair),var(--hair-lo) 60%,var(--hair-lo));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sv-enc-k{font:500 9px/2 var(--f-mono);letter-spacing:.22em;color:var(--blue-hi)}

/* ---------- más servicios del ángulo ---------- */
.sv-more{position:relative;padding:clamp(80px,12svh,130px) var(--gut-r) clamp(70px,10svh,110px) var(--gut);
  background:linear-gradient(90deg,var(--line-2),var(--line) 45%,transparent) top/100% 1px no-repeat}
.sv-more-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,96px);align-items:end}
.sv-more-h .sv-k{margin:0}
.sv-more-t{margin:0;justify-self:end;text-align:right;font:600 clamp(19px,1.6vw,24px)/1.2 var(--f-display);letter-spacing:-.015em;color:var(--ice);text-wrap:balance}
.sv-more-t em{font-style:normal;background:linear-gradient(100deg,#a9c8ff 0%,#5a8dff 42%,#2a5cf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-sibs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin:38px 0 0;padding:0;list-style:none}
.sv-sib{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto 1fr;gap:6px 12px;height:100%;padding:0 0 20px;
  text-decoration:none;color:var(--white);isolation:isolate}
.sv-sib::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity .35s;
  background:linear-gradient(180deg,rgba(47,107,255,.12),transparent 70%)}
.sv-sib:hover::after,.sv-sib:focus-visible::after,.sv-sib.on::after{opacity:1}
.sv-sib-c{grid-column:1/-1;position:relative;display:block;margin-bottom:12px}
.sv-sib-c canvas{display:block;width:100%;aspect-ratio:16/10;height:auto}
.sv-sib-c::before{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;transition:background .35s;
  background:linear-gradient(140deg,var(--hair),var(--hair-lo) 45%,transparent 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sv-sib:hover .sv-sib-c::before,.sv-sib:focus-visible .sv-sib-c::before,.sv-sib.on .sv-sib-c::before{background:linear-gradient(140deg,var(--blue-hi),rgba(47,107,255,.35) 40%,transparent 80%)}
.sv-sib-n{grid-column:1;font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;color:var(--blue-hi);padding-left:2px}
.sv-sib-t{grid-column:1;font:500 17px/1.3 var(--f-body);padding-left:2px}
.sv-sib-h{grid-column:1;font:400 13.5px/1.5 var(--f-body);color:var(--lede);padding-left:2px}
.sv-sib-go{grid-column:2;grid-row:2/4;align-self:center;font:500 13px/1 var(--f-mono);color:var(--blue-hi);opacity:.6;transition:opacity .3s,transform .3s}
.sv-sib:hover .sv-sib-go,.sv-sib:focus-visible .sv-sib-go,.sv-sib.on .sv-sib-go{opacity:1;transform:translateX(4px)}
.sv-sib-t{transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.sv-sib:hover .sv-sib-t,.sv-sib:focus-visible .sv-sib-t,.sv-sib.on .sv-sib-t{transform:translateX(4px)}
.sv-sib:focus-visible{outline-offset:2px}
.sv-otros{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;margin-top:44px;padding-top:14px;
  background:linear-gradient(90deg,var(--hair-lo),transparent 70%) top/100% 1px no-repeat}
.sv-otros-k{margin:0;font:500 9px/1 var(--f-mono);letter-spacing:.24em;color:var(--mute)}
.sv-otros ul{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;padding:0;list-style:none}
.sv-otros a{display:inline-flex;align-items:baseline;gap:9px;padding:6px 0;text-decoration:none;color:var(--ice);font:400 14px/1.3 var(--f-body);transition:color .25s}
.sv-otros a span{font:500 9px/1 var(--f-mono);letter-spacing:.12em;color:var(--mute)}
.sv-otros a b{font:500 10px/1 var(--f-mono);color:var(--blue-hi);opacity:.6;transition:opacity .3s,transform .3s}
.sv-otros a:hover,.sv-otros a:focus-visible{color:var(--white)}
.sv-otros a:hover b,.sv-otros a:focus-visible b{opacity:1;transform:translate(2px,-2px)}
@media (pointer:coarse){ .sv-otros a{padding:12px 0} }

/* ---------- llamado final ---------- */
.sv-cta{padding:0 var(--gut-r) clamp(80px,12svh,130px) var(--gut)}
.sv-cta-in{position:relative;display:grid;gap:20px;justify-items:start;padding:clamp(36px,6svh,64px) clamp(22px,4vw,64px);overflow:hidden;
  background:radial-gradient(70% 120% at 100% 0%,rgba(47,107,255,.2),transparent 60%),linear-gradient(160deg,rgba(47,107,255,.1),rgba(47,107,255,.02) 60%,transparent);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.sv-cta-in::before{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;background:linear-gradient(120deg,var(--blue-hi),var(--hair-lo) 50%,var(--hair-lo));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sv-cta-t{margin:0;font:600 clamp(28px,3.6vw,52px)/1.05 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.sv-cta-t em{font-style:normal;background:linear-gradient(100deg,#a9c8ff 0%,#5a8dff 42%,#2a5cf0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-cta .f-par{max-width:52ch}

/* ---------- tableta ---------- */
@media (max-width:1099px){
  .sv-mlist{grid-template-columns:minmax(0,1fr)}
  .sv-llist{grid-template-columns:minmax(0,1fr)}
  .sv-more-h{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .sv-more-t{justify-self:start;text-align:left}
}
/* ---------- celular: la figura va debajo del encabezado, sin quedar fija ---------- */
@media (max-width:759px){
  .sv-chrome .hdr-mid{display:none}
  .sv-grid{grid-template-columns:minmax(0,1fr);padding-top:calc(env(safe-area-inset-top, 0px) + 96px)}
  .sv-hero{grid-row:auto;padding-bottom:28px}
  .sv-figcol{grid-column:1;grid-row:auto;margin:0 calc(-1 * var(--gut-r)) 56px calc(-1 * var(--gut))}
  .sv-slot{position:relative;top:auto;--slot-h:min(62svh,100vw)}
  .sv-cap{padding-inline:var(--gut) var(--gut-r)}
  .sv-now{right:var(--gut-r)}
  .sv-body{grid-column:1;grid-row:auto}
  .sv-toc{margin-bottom:-36px}
  .sv-q li{grid-template-columns:34px minmax(0,1fr)}
  .sv-ent-dl div{grid-template-columns:minmax(0,1fr)}
  .sv-ent-n{display:none}
  .sv-enc{grid-template-columns:minmax(0,1fr);gap:8px}
  .sv-para{grid-template-columns:minmax(0,1fr);gap:4px}
  .sv-c{grid-template-columns:48px minmax(0,1fr)}
  .sv-rail-l{margin-inline:6px}
  .sv-st span{font-size:8px;letter-spacing:.08em}
}
@media (prefers-reduced-motion: reduce){
  .sv-hero.play .rv,.sv-hero.play .sv-tit{animation:none}
  .sv-ent-p,.sv-ent-i{transition:none}
}

/* ---------- páginas de «a quién» (para-empresas, para-gobierno, para-personas): los 14 servicios por ángulo ---------- */
.sv-grupo{display:grid;margin-top:30px}
.sv-grupo-k{justify-self:start;margin:0 0 6px;padding:6px 16px 5px 10px;font:500 9.5px/1 var(--f-mono);letter-spacing:.2em;color:var(--blue-hi);
  background:linear-gradient(90deg,rgba(47,107,255,.26),rgba(47,107,255,.06));clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.sv-glist{margin:0}
.sv-glist .esp{grid-template-columns:46px minmax(0,1fr) auto;padding:14px 4px 15px 0}
.sv-glist .esp-name{font-size:clamp(15.5px,1.15vw,17.5px)}
.sv-glist .esp-hook{font-size:13.5px;line-height:1.5}
@media (max-width:759px){ .sv-glist .esp{grid-template-columns:42px minmax(0,1fr) auto} }
/* el título de «a quién» es más largo (el rango y lo que exige cada caso): un poco más chico, para que la ficha entre en la primera pantalla */
body[data-pagina="para"] .sv-tit{font-size:clamp(32px,min(3.9vw,7.4svh),62px);line-height:1.05}