/* ============================================================
IT SERVER · SISTEMA VISUAL UNIFICADO (final) · system.css
Se carga DESPUÉS de tokens.css y styles.css; reemplaza icons.css.
Tesis: todo sale del cubo del emblema.
· 60,5° / 57,1° / extrusión 11,7° / junta constante → íconos (prismas) y superficies (corte a 60°)
· tinta plana #1B1918 / #F1F5F2 + UNA señal verde → color
· la única curva es el punto del wordmark → viñetas, estado, ojo de los íconos
Regla de superficies: se toca → pieza con corte y aro · se lee → filete (incluidos los campos del formulario) · la consola → hoja.
============================================================ */
/* ---------- 0 · tokens ---------- */
:root,[data-theme="light"]{
--ex-ang:11.7deg; --face-ratio:.602; --joint:.053; /* geometría medida del emblema */
--c-s:9px; --c-l:20px; --c-xl:28px; /* corte de hoja: tramo horizontal (el vertical es c·√3) */
--b:1px;
--ring:rgba(18,22,19,.13); --ring-hi:rgba(18,22,19,.36); /* aro decorativo: base / en los cortes */
--ring-ui:rgba(18,22,19,.52); --ring-ui-hi:rgba(18,22,19,.70); /* aro de CONTROL: 3,6:1 (WCAG 1.4.11) */
--rim:transparent;
--g-fill:rgba(255,255,255,.55); --g-fill-2:rgba(255,255,255,.80);
--spec:rgba(255,255,255,.60);
--sheet:rgba(255,255,255,.72); --well:rgba(255,255,255,.62); --band:rgba(255,255,255,.78);
--sheet-shadow:none;
--cube-off:.5; /* cubos inactivos del índice: 3,3:1 contra el fondo */
--sig-cube:#26FA28; /* señal sobre un cubo de tinta (claro) */
--focus:var(--sig);
--fs-lab:max(.69rem,11px); /* piso de las voces Michroma: 11 px */
}
[data-theme="dark"]{
--ring:rgba(255,255,255,.14); --ring-hi:rgba(255,255,255,.46);
--ring-ui:rgba(255,255,255,.38); --ring-ui-hi:rgba(255,255,255,.62);
--rim:transparent;
--g-fill:rgba(22,34,25,.58); --g-fill-2:rgba(14,24,17,.78);
--spec:rgba(255,255,255,.055);
--sheet:rgba(20,31,23,.68); --well:rgba(255,255,255,.045); --band:rgba(34,50,38,.72);
--sheet-shadow:none;
--cube-off:.42;
--sig-cube:#139632; /* señal sobre un cubo de papel (oscuro) */
}
.lab{font-size:var(--fs-lab)}
/* ---------- 1 · el corte a 60° ----------
--c = tramo horizontal; el vertical es c·√3 (60°). Cápsula: c = alto/(2√3) (el corte vale la mitad del alto).
Anidado concéntrico: c_hijo = c_padre − 0,4226·margen (la pendiente se conserva).
.cut = forma + aro (::before filete exterior con gradiente a 60°, ::after aro interior) */
.cut,.sheetwrap,.sheet,.well,.btn,.chip-opt,.status,.theme,.nav__glass,.nav__links,.stage__nav,.stage__dot,.nav__links a:not(.btn),.rows a,.fab,.fab__tip,.tl li>.mono{
--c:12px; --b:1px;
--ring-c:linear-gradient(60deg,var(--ring-hi) 0%,var(--ring) 30%,var(--ring) 70%,var(--ring-hi) 100%); --rim-c:var(--rim);
--cy:calc(var(--c)*1.7320508);
--c1:calc(var(--c) - var(--b)*.4226); --cy1:calc(var(--c1)*1.7320508);
--c2:calc(var(--c) - var(--b)*.8452); --cy2:calc(var(--c2)*1.7320508);
--shape:polygon(0 0,calc(100% - var(--c)) 0,100% var(--cy),100% 100%,var(--c) 100%,0 calc(100% - var(--cy)));
--ring-o:polygon(0 0,calc(100% - var(--c)) 0,100% var(--cy),100% 100%,var(--c) 100%,0 calc(100% - var(--cy)),0 0,
var(--b) var(--b),var(--b) calc(100% - var(--b) - var(--cy1)),calc(var(--b) + var(--c1)) calc(100% - var(--b)),calc(100% - var(--b)) calc(100% - var(--b)),calc(100% - var(--b)) calc(var(--b) + var(--cy1)),calc(100% - var(--b) - var(--c1)) var(--b),var(--b) var(--b),0 0);
--ring-i:polygon(var(--b) var(--b),calc(100% - var(--b) - var(--c1)) var(--b),calc(100% - var(--b)) calc(var(--b) + var(--cy1)),calc(100% - var(--b)) calc(100% - var(--b)),calc(var(--b) + var(--c1)) calc(100% - var(--b)),var(--b) calc(100% - var(--b) - var(--cy1)),var(--b) var(--b),
calc(var(--b)*2) calc(var(--b)*2),calc(var(--b)*2) calc(100% - var(--b)*2 - var(--cy2)),calc(var(--b)*2 + var(--c2)) calc(100% - var(--b)*2),calc(100% - var(--b)*2) calc(100% - var(--b)*2),calc(100% - var(--b)*2) calc(var(--b)*2 + var(--cy2)),calc(100% - var(--b)*2 - var(--c2)) calc(var(--b)*2),calc(var(--b)*2) calc(var(--b)*2),var(--b) var(--b));
}
/* control de aro fuerte (>= 3:1): campo, chip, ghost, tira, tema */
.chip-opt,.btn--ghost,.stage__nav,.theme{--ring-c:linear-gradient(60deg,var(--ring-ui-hi) 0%,var(--ring-ui) 30%,var(--ring-ui) 70%,var(--ring-ui-hi) 100%)}
.cut{position:relative;isolation:isolate;clip-path:var(--shape)}
.cut::before,.cut::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.cut::before{background:var(--ring-c);clip-path:var(--ring-o)}
.cut::after{background:var(--rim-c);clip-path:var(--ring-i)}
/* FOCO: el clip-path recorta el outline, así que el foco es el aro (verde de señal, 2 px). Sobre un relleno verde el aro es tinta. */
.cut:focus-visible,.btn:focus-visible,.chip-opt:focus-visible,.stage__dot:focus-visible,.rows a:focus-visible,.theme:focus-visible,.fab:focus-visible{outline:none;--ring-c:var(--focus);--b:2px}
/* anillo = verde de señal; sobre un relleno verde (chip activo, pestaña activa, botón primario en oscuro) el anillo es tinta */
.chip-opt[aria-pressed=true]:focus-visible,.stage__dot.is-on:focus-visible{--focus:var(--text);--ring-c:var(--focus);--b:2px}
[data-theme="dark"] .chip-opt[aria-pressed=true]:focus-visible,[data-theme="dark"] .stage__dot.is-on:focus-visible,[data-theme="dark"] .btn:not(.btn--ghost):focus-visible{--focus:#02140A;--ring-c:var(--focus)}
/* HOJA: .sheetwrap (sombra + relleno recortado, estáticos) > .sheet (contenido SIN recorte; aro y rim recortados).
El clip-path nunca va sobre un contenedor cuyo contenido se anima (+44 % de CPU medido). Solo 2 usos: formulario y consola. */
.sheetwrap{--c:var(--c-xl);position:relative;isolation:isolate;min-width:0}
.sheetwrap::before{content:"";position:absolute;inset:0;box-shadow:var(--sheet-shadow);pointer-events:none;z-index:-2}
.sheetwrap::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:var(--shape);background:var(--sheet)}
.sheetwrap.is-console::after{background:var(--console)}
.sheet{--c:var(--c-xl);position:relative}
.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--ring-c);clip-path:var(--ring-o)}
.sheet::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--rim-c);clip-path:var(--ring-i)}
/* ---------- 2 · íconos: línea fina uniforme (12 pictogramas Lucide, ISC, en grilla de 24; un solo punto verde de señal) ----------
(compacto: #ic-servidores-s)
Reposo estable. Hover (catálogo/gestión) y activo (escenario): se eleva como el cubo activo (+5 % / −4 %) y el punto verde crece 1,3x. */
.ico{position:relative;display:block;flex:none;width:var(--s,58px);height:var(--s,58px);transition:transform .5s var(--ease)}
.ic{display:block;width:100%;height:100%;overflow:visible;color:var(--sym);--sw:2px}
/* línea fina uniforme: mismo trazo en los 12 (px de pantalla, no escala con el tamaño del ícono); terminales y uniones redondeados como en el original */
symbol .l{fill:none;stroke:currentColor;stroke-width:var(--sw);vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.sig{fill:var(--sigc,var(--sig));transform-box:fill-box;transform-origin:center;transform:scale(var(--sigS,1));transition:transform .45s var(--ease)}
/* punto híbrido: radio 0,95 de 24 (crece con el ícono) + borde de 1,3x el trazo (sigue a la línea): no pesa en la ficha grande y se ve en los cubos chicos */
symbol .sig{stroke:var(--sigc,var(--sig));stroke-width:calc(var(--sw,2px)*1.3);vector-effect:non-scaling-stroke}
a:hover .ico,.xcard:hover .ico,.is-hot .ico,.is-active .ico,.ico.is-hot{transform:translate(5%,-4%);--sigS:1.4}
/* anillo de pulso del mismo diámetro que el punto en la ficha (7,92 % + 1,3 x 2,6 px) */
.ico__ping{position:absolute;width:calc(7.92% + 3.4px);height:calc(7.92% + 3.4px);margin:calc(-3.96% - 1.7px) 0 0 calc(-3.96% - 1.7px);border-radius:50%;border:2px solid var(--sig);opacity:0;pointer-events:none}
.is-active .ico__ping{animation:icPing 2.2s ease-out 2} /* dos pulsos al activar y se detiene */
@keyframes icPing{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.8);opacity:0}}
.lite .ico__ping{animation:none}
@media (prefers-reduced-motion:reduce){.ico__ping{animation:none!important}.ico{transition:none}}
/* ---------- 3 · controles (cápsula con corte, altos de fila: 34 / 36 / 40 / 48 / 52 / 56 / 62) ---------- */
.btn{--h:48px;--c:calc(var(--h)/3.4641016);height:var(--h);padding:0 28px;border:0;clip-path:var(--shape);filter:none;
position:relative;isolation:isolate;--ring-c:transparent;--rim-c:transparent;font-size:.76rem}
.btn::before,.btn::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border:0}
.btn::before{background:var(--ring-c);clip-path:var(--ring-o)}
.btn::after{background:var(--rim-c);clip-path:var(--ring-i)}
.btn:hover{filter:none}
.btn--sm{--h:40px;padding:0 20px}
.btn--ghost{background:var(--g-fill);color:var(--text);box-shadow:none;--ring-c:linear-gradient(60deg,var(--ring-ui-hi) 0%,var(--ring-ui) 30%,var(--ring-ui) 70%,var(--ring-ui-hi) 100%);--rim-c:var(--rim)}
[data-theme="dark"] .btn--ghost{--rim-c:var(--rim)}
.btn--ghost:hover{background:var(--g-fill-2);color:var(--accent);box-shadow:none;--ring-c:var(--accent)}
/* WhatsApp: ya no es un tercer verde. .btn--wa solo agrega el glifo; el relleno lo decide la jerarquía (primario o ghost). */
.btn--wa,.btn--wa:hover{background:var(--btn-bg);color:var(--btn-fg)}
.btn--wa:hover{background:var(--btn-hover);color:#fff}
[data-theme="dark"] .btn--wa:hover{color:#02140a}
.btn--wa.btn--ghost{background:var(--g-fill);color:var(--text)}
.btn--wa svg{width:20px;height:20px;position:relative;z-index:0;flex:none}
.btn svg{position:relative;z-index:0}
.chip-opt{--h:36px;--c:calc(var(--h)/3.4641016);height:var(--h);padding:0 18px;border:0;border-radius:0;clip-path:var(--shape);position:relative;isolation:isolate;
background:var(--g-fill);color:var(--text-2);--rim-c:var(--rim);font:700 .7rem/1 var(--font-core);font-stretch:108%;letter-spacing:.1em;text-transform:uppercase}
.chip-opt::before,.chip-opt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.chip-opt::before{background:var(--ring-c);clip-path:var(--ring-o)}
.chip-opt::after{background:var(--rim-c);clip-path:var(--ring-i)}
.chip-opt:hover{border:0;color:var(--text);--ring-c:var(--sig)}
.chip-opt[aria-pressed=true]{background:var(--fill);color:var(--on-fill);--ring-c:transparent;--rim-c:transparent;font-weight:700}
/* campos = filete: se escribe sobre el fondo, sin caja. El foco y el error engrosan el filete. */
.status{--h:40px;--c:calc(var(--h)/3.4641016);height:var(--h);padding:0 20px;border-radius:0;clip-path:var(--shape);position:relative;isolation:isolate;
background:var(--g-fill);border:0;box-shadow:none;margin:0;-webkit-backdrop-filter:none;backdrop-filter:none;display:inline-flex;align-items:center}
.status::before,.status::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;animation:none;border:0;border-radius:0;width:auto;height:auto;transform:none;opacity:1;mix-blend-mode:normal}
.status::before{background:var(--ring-c);clip-path:var(--ring-o)}
.status::after{background:var(--rim-c);clip-path:var(--ring-i)}
.status{margin-bottom:28px}
/* el punto de estado es un hijo (.dotv): el ping vive ahí, no en el pseudo de la cápsula */
.status .dotv::after{animation:pingr 2s infinite}
/* tema: pista bicolor (papel | tinta) con pulgar rómbico; sin sol/luna */
.theme{--h:34px;--c:calc(var(--h)/3.4641016);width:64px;height:var(--h);border:0;border-radius:0;clip-path:var(--shape);position:relative;isolation:isolate;
background:linear-gradient(120deg,#F1F5F2 0 50%,#1B1918 50% 100%)}
.theme::before{content:"";position:absolute;inset:0;width:auto;height:auto;top:0;left:0;border-radius:0;background:var(--ring-c);clip-path:var(--ring-o);box-shadow:none;transform:none;transition:none;z-index:2}
.theme::after{content:"";position:absolute;inset:0;background:var(--rim-c);clip-path:var(--ring-i);z-index:2;pointer-events:none}
[data-theme="dark"] .theme::before{transform:none}
.theme i{position:absolute;top:50%;left:7px;width:17px;height:26px;margin-top:-13px;background:#1B1918;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform .45s var(--ease);z-index:1}
[data-theme="dark"] .theme i{transform:translateX(33px);background:#F1F5F2}
.theme svg{display:none}
/* ---------- 4 · barra: único vidrio con desenfoque real (62 px, alto fijo) ----------
El vidrio es una capa HERMANA (.nav__glass): un ancestro con clip-path o backdrop-filter recorta / contiene al menú móvil (position:fixed). */
.nav__in{--h:62px;height:var(--h);border-radius:0;padding:0 12px 0 26px;gap:16px;position:relative;background:none;border:0;box-shadow:none;transition:none;
-webkit-backdrop-filter:none;backdrop-filter:none}
.nav.is-stuck .nav__in{height:var(--h)}
.nav__glass{--h:62px;--c:calc(var(--h)/3.4641016);position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:var(--shape);
background:var(--g-fill-2);
-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.nav__glass::before{content:"";position:absolute;inset:0;background:var(--ring-c);clip-path:var(--ring-o)}
.nav__glass::after{content:"";position:absolute;inset:0;background:var(--rim-c);clip-path:var(--ring-i)}
.nav__links{gap:6px;font-size:var(--fs-lab)}
.nav__links a:not(.btn){position:relative;isolation:isolate;--h:40px;--c:calc(var(--h)/3.4641016);height:var(--h);align-items:center;padding:0 16px;clip-path:var(--shape);--ring-c:transparent;--rim-c:transparent;transition:color .25s}
.nav__links a:not(.btn)::before{content:"";position:absolute;inset:0;background:var(--ring-c);clip-path:var(--ring-o);z-index:-1}
.nav__links a:not(.btn)::after{content:"";position:absolute;inset:0;background:var(--rim-c);clip-path:var(--ring-i);z-index:-1}
.nav__links a.is-cur{background:var(--band);color:var(--text);--ring-c:var(--ring-hi);--rim-c:var(--rim)}
.nav__cta{border-radius:0;clip-path:var(--shape);margin-left:6px}
.nav__cta:focus-visible{outline:none}
.nav__tools{gap:8px}
.burger i{height:2px;background:var(--text)}
@media (max-width:1199px){.nav__links a:not(.btn) i{display:none}} /* numerales solo con ancho de sobra */
@media (max-width:1100px) and (min-width:1021px){.nav__links a:not(.btn){padding:0 11px}.nav__links{gap:2px}}
@media (max-width:1020px){
.nav__in{padding:0 8px 0 20px}
.nav__links{--c:var(--c-l);clip-path:var(--shape);border:0;border-radius:0;background:var(--glass-solid);box-shadow:none;gap:0;position:fixed;isolation:isolate;left:clamp(20px,5vw,48px);right:clamp(20px,5vw,48px);-webkit-backdrop-filter:none;backdrop-filter:none}
.nav__links.open::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ring-c);clip-path:var(--ring-o)}
.nav__links a:not(.btn){clip-path:none;height:auto;padding:18px 0;--ring-c:transparent;border-bottom:1px solid var(--line)}
.nav__links a:not(.btn)::before,.nav__links a:not(.btn)::after{display:none}
.nav__links a:not(.btn) i{display:inline}
.nav__links .btn{margin:18px 0 0;height:48px;padding:0 28px;justify-content:center}
}
@media (max-width:360px){.theme{width:54px}.theme i{left:6px}[data-theme="dark"] .theme i{transform:translateX(26px)}.nav__in{gap:8px;padding:0 4px 0 16px}.burger{width:40px}}
/* ---------- 5 · escenario de servicios ---------- */
.stage{--gut:max(clamp(20px,5vw,48px),calc((100% - 1240px)/2))}
.stage__pin{padding:104px var(--gut) 52px;gap:clamp(28px,4.5vw,84px);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch}
.stage__left{gap:clamp(12px,2.2vh,22px);justify-content:space-between}
.stage__head .h2{font-size:clamp(1.15rem,2.4vw,2.1rem)}
.stage__emblem{max-height:none}
.stage__emblem .cw{opacity:var(--cube-off);cursor:pointer;will-change:transform,opacity}
.stage__emblem .cw.is-on{opacity:1}
.stage__emblem .cw:hover:not(.is-on){opacity:.75}
/* el cubo es el ícono: pictograma en línea sobre la cara frontal (45 % del ancho: cabe en el rombo) */
.cube__g{position:absolute;left:64.03%;top:46.9%;width:45%;aspect-ratio:1;translate:-50% -50%;color:var(--bg);--sigc:var(--sig-cube);pointer-events:none;overflow:visible}
/* en oscuro el punto de los cubos inactivos es un LED apagado (con la opacidad del cubo quedaba como una mancha verde oscura); solo el activo se enciende */
[data-theme="dark"] .cw:not(.is-on) .cube__g{--sigc:currentColor}
@container (max-width:39px){.cube__g{display:none}}
.stage__emblem .cw .cube__n{display:none}
@container (max-width:39px){.stage__emblem .cw .cube__n{display:block;font-size:max(11px,12.9cqh)}}
/* tira 01-09: cápsula con corte (52 px) y pestañas de 36 px */
.stage__nav{--h:52px;--c:calc(var(--h)/3.4641016);display:inline-flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:0 8px;align-self:flex-start;background:var(--g-fill);height:var(--h);clip-path:var(--shape);position:relative;isolation:isolate}
.stage__nav::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ring-c);clip-path:var(--ring-o);z-index:2}
.stage__nav::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--rim-c);clip-path:var(--ring-i);z-index:2}
.stage__dot{--h:36px;--c:calc(var(--h)/3.4641016);display:grid;place-items:center;gap:0;min-width:0;width:36px;height:var(--h);padding:0;border:0;background:transparent;border-radius:0;clip-path:var(--shape);color:var(--muted);transition:color .25s,background .25s;z-index:0}
.stage__dot::after{display:none}
.stage__dot .lab{font-size:var(--fs-lab);letter-spacing:.04em}
.stage__dot:hover{color:var(--text)}
.stage__dot.is-on{background:var(--fill);color:var(--on-fill)}
.stage__dot:focus-visible{outline:none;z-index:3}
.stage__bar{left:var(--gut);right:calc(var(--gut) + 84px);bottom:22px;height:2px}
/* ficha del servicio: filetes, sin caja. Las 9 comparten la celda; el marco no existe, así que no hay nada que recomponer. */
.stage__right{align-self:center;height:auto;border-top:1px solid var(--line-2);max-height:none;padding-top:clamp(18px,3.4vh,34px)}
.svc{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;align-content:stretch;padding:0;gap:clamp(14px,2.6vh,28px)}
.svc__top{display:flex;align-items:flex-end;gap:clamp(16px,2vw,30px)}
.svc__top .ico{--s:clamp(112px,22vh,232px)}
.svc__meta{display:flex;flex-direction:column;gap:8px;padding-bottom:6px;min-width:0}
.svc__n{color:var(--accent)}
.svc__n span{color:var(--muted)}
.svc h3{font:800 clamp(1.25rem,2vw,1.75rem)/1.08 var(--font-core);font-stretch:110%;text-transform:uppercase;letter-spacing:.005em}
.svc h3 small{display:block;margin-top:8px;font:400 var(--fs-lab)/1.3 var(--font-ext);letter-spacing:.14em;color:var(--accent)}
.svc__body{display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(4px,1.5vh,16px);gap:clamp(12px,2vh,20px);min-width:0}
.svc__body p{color:var(--text-2);font-size:clamp(.92rem,1.3vh + .3rem,1.15rem);line-height:1.6;max-width:58ch}
.svc ul{margin-top:0;padding-top:0;border-top:0;display:grid;gap:0;font-size:.95rem}
.svc li{display:flex;gap:12px;align-items:center;min-height:clamp(40px,5.6vh,64px);border-top:1px solid var(--line)}
.svc li:last-child{border-bottom:1px solid var(--line)}
.svc li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--sig);box-shadow:none}
.dock{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:52px}
.dock .btn{white-space:nowrap}
/* ---------- 6 · catálogo y gestión: filetes; el hover es una banda con el mismo corte ---------- */
.rows__head{display:grid;grid-template-columns:52px 64px 1.3fr 1fr 28px;gap:18px;padding:0 10px 12px;color:var(--muted);border-bottom:1px solid var(--line-2)}
.rows__head span{font:400 var(--fs-lab)/1 var(--font-ext);letter-spacing:.16em;text-transform:uppercase}
.rows{border-top:0}
.rows a{padding:12px 10px;border-bottom:1px solid var(--line);transition:none;isolation:isolate;--c:14px;grid-template-columns:52px 64px 1.3fr 1fr 28px}
.rows a::before{content:"";position:absolute;inset:4px 0;background:var(--band);clip-path:var(--shape);opacity:0;transition:opacity .3s;z-index:-1}
.rows a::after{content:"";position:absolute;inset:4px 0;background:var(--ring-c);clip-path:var(--ring-o);opacity:0;transition:opacity .3s;z-index:-1}
.rows a:hover::before,.rows a:hover::after,.rows a.is-hot::before,.rows a.is-hot::after,.rows a:focus-visible::before,.rows a:focus-visible::after{opacity:1}
.rows a:focus-visible{outline:none}
.rows a>*{transition:none}
.rows a:hover>*{transform:none}
.rows .ri{display:block;width:var(--ri,58px);height:var(--ri,58px)}
.rows .ri .ico{--s:var(--ri,58px)}
.rows b{font:700 clamp(1rem,1.6vw,1.3rem)/1.2 var(--font-core);font-stretch:108%;text-transform:uppercase}
.rows svg.arr{width:22px;height:22px;color:var(--accent);fill:currentColor;transition:transform .35s var(--ease)}
.rows a:hover svg.arr,.rows a.is-hot svg.arr,.rows a:focus-visible svg.arr{transform:translateX(5px)}
.xcard{padding-top:34px}
.xcard .ico{--s:120px}
.xcard .btn{align-self:flex-start;margin-top:auto}
.xcard ul{margin-top:auto}
@media (max-width:980px){.rows__head{display:none}.rows a{grid-template-columns:36px 54px 1fr 22px;gap:14px}.rows{--ri:52px}}
@media (max-width:430px){.rows a{grid-template-columns:24px 48px 1fr 18px;gap:10px;padding:12px 6px}.rows{--ri:46px}.rows b{font-size:.92rem}}
@media (max-width:900px){.xcard .ico{--s:104px}}
/* ---------- 7 · consola EPDR (siempre oscura): hoja oscura con el mismo corte ---------- */
.sim{--c:var(--c-xl);border-radius:0;box-shadow:none;background:none;position:relative;overflow:visible;
--ring-c:linear-gradient(60deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 30%,rgba(255,255,255,.12) 70%,rgba(255,255,255,.34) 100%);--rim-c:rgba(255,255,255,.04)}
.sim__bar{padding-right:44px}
.sim__log{padding-left:30px}
.sim::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--ring-c);clip-path:var(--ring-o)}
.sim::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:var(--rim-c);clip-path:var(--ring-i)}
.sim__svg .nd{color:#e9efe9;--sigc:var(--neon);transition:opacity .3s}
.sim__svg .nd.bad{--sigc:var(--red);animation:ndp .6s ease-in-out infinite alternate}
.sim__svg .nd.iso{--sigc:var(--red);opacity:.55}
.sim__svg .nd.fix{--sigc:var(--neon)}
@keyframes ndp{to{opacity:.55}}
/* ---------- 9 · FAB: la misma pieza, sin círculo ---------- */
.fab{--h:56px;--c:calc(var(--h)/3.4641016)}
.fab svg{width:var(--h);height:var(--h);padding:15px;border-radius:0;clip-path:var(--shape);background:var(--btn-bg);color:var(--btn-fg);box-shadow:none}
[data-theme="dark"] .fab svg{background:var(--btn-bg);color:var(--btn-fg)}
.fab::after{content:"";position:absolute;right:0;bottom:0;width:var(--h);height:var(--h);clip-path:var(--ring-i);background:transparent;pointer-events:none}
.fab.hint::before{width:var(--h);height:var(--h);border-radius:0;border:0;background:var(--sig);clip-path:var(--ring-o);--b:2px;animation:fabping 2.4s ease-out 2}
.fab:hover svg{transform:none;background:var(--btn-hover)}
.fab__tip{--h:40px;--c:calc(var(--h)/3.4641016);height:var(--h);display:inline-flex;align-items:center;padding:0 18px;border-radius:0;clip-path:var(--shape);position:relative;isolation:isolate;background:var(--g-fill-2);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font:700 .72rem/1 var(--font-core);font-stretch:108%;letter-spacing:.12em;text-transform:uppercase}
.fab__tip::before{content:"";position:absolute;inset:0;background:var(--ring-c);clip-path:var(--ring-o);z-index:1}
.fab__tip::after{content:"";position:absolute;inset:0;background:var(--rim-c);clip-path:var(--ring-i);z-index:1;mix-blend-mode:normal;opacity:1;border-radius:0}
/* ---------- 10 · marcas de interfaz: sólidas, con los ángulos del emblema (sin línea) ---------- */
.ui{display:block;width:1em;height:1em;fill:currentColor}
/* ---------- 11 · responsive del escenario ---------- */
@media (max-width:900px){
.stage__pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start;padding:88px 28px 28px;gap:16px}
.stage__left{display:grid;grid-template-columns:minmax(0,min(34vw,270px)) minmax(0,1fr);grid-template-areas:"emb head" "emb tabs";align-items:center;gap:12px 28px;height:auto;justify-content:stretch}
.stage__head{grid-area:head;align-self:end}
.stage__head .h2{font-size:clamp(1.15rem,3.2vw,1.6rem)}
.stage__emblem{grid-area:emb;max-height:none;width:100%}
.stage__emblem .emblem{height:auto;width:100%}
.stage__nav{grid-area:tabs;align-self:start;--h:56px;padding:0 10px;gap:6px}
.stage__dot{width:42px;--h:42px}
.stage__pin{grid-template-rows:auto auto;align-content:center}
.stage__emblem{margin-top:14px}
.stage__right{align-self:start;height:auto;padding-top:26px}
.svc__n{display:block}
.svc__top .ico{--s:clamp(128px,15vh,180px)}
.svc{grid-template-rows:auto auto auto;row-gap:20px;gap:20px}
.svc__body p{font-size:1.04rem;display:block;-webkit-line-clamp:unset}
.svc li{min-height:52px}
.svc li:nth-child(n+3){display:flex}
.stage__bar{display:none}
}
@media (max-width:600px){
.stage__pin{padding:80px 16px 14px;gap:10px;grid-template-rows:auto auto;align-content:start}
.stage__emblem{margin-top:6px}
.svc li{min-height:36px}
.stage__left{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "emb" "tabs";justify-items:center;gap:8px}
.stage__head{justify-self:stretch}
.stage__head .eyebrow{margin-bottom:6px}
.stage__head .h2{font-size:1.02rem;line-height:1.25}
.stage__emblem{width:min(48vw,200px)}
.stage__nav{justify-self:stretch;width:100%;--h:48px;justify-content:space-between;padding:0 6px;gap:2px}
.stage__dot{flex:1 1 0;max-width:38px;min-width:0;width:auto;height:40px;--h:40px}
.stage__dot .lab{font-size:11px;letter-spacing:0}
.stage__right{padding-top:16px}
.svc{row-gap:12px;gap:12px}
.svc__top{align-items:center;gap:14px}
.svc__top .ico{--s:92px}
.svc h3{font-size:clamp(.95rem,4.6vw,1.2rem);overflow-wrap:anywhere}
.svc__body{justify-content:flex-start;gap:10px}
.svc__body p{font-size:.9rem;line-height:1.5}
.svc ul{font-size:.88rem}
.svc li{min-height:36px}
.dock{min-height:44px}
.dock .btn{--h:44px;padding:0 18px;font-size:.72rem;flex:1 1 auto;justify-content:center}
}
@media (max-width:600px) and (max-height:780px){.svc li:nth-child(n+3){display:none}.stage__head .h2{font-size:.95rem}.stage__emblem{width:min(40vw,168px)}}
@media (max-width:600px) and (max-height:700px){
.stage__head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px}
.stage__pin{padding-top:78px}
.stage__emblem{width:min(36vw,132px)}
.svc__top .ico{--s:72px}
.svc__body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:340px){.svc__top .ico{--s:72px}.svc__top{gap:10px}}
@media (max-width:340px) and (max-height:620px){.svc ul{display:none}}
@media (min-width:601px) and (max-width:900px) and (max-height:760px){.svc li:nth-child(n+3){display:none}}
@media (min-width:901px) and (max-height:700px){
.stage__pin{padding-top:84px;padding-bottom:40px}
.svc__top .ico{--s:clamp(72px,12vh,104px)}
.svc li{min-height:34px}
}
/* pila estática (movimiento reducido o pantalla baja): cada servicio es su propia ficha con filetes */
@media (max-width:900px) and (max-height:600px),(min-width:601px) and (max-width:900px) and (max-height:900px),(max-width:1100px) and (max-height:520px){
.stage__left{display:block}
.stage__right{border-top:0;padding-top:0}
.svc{border-top:1px solid var(--line-2);padding-top:20px}
.svc li:nth-child(n+3){display:flex}
.svc__body p{display:block;-webkit-line-clamp:unset}
.stage__nav,.stage__emblem{display:none}
}
@media (prefers-reduced-motion:reduce){
.stage__nav,.stage__emblem,.stage__bar{display:none}
.stage__right{border-top:0;padding-top:0}
.svc{border-top:1px solid var(--line-2);padding-top:20px}
.svc li:nth-child(n+3){display:flex}
}
/* dock compacto en notebook chica / tablet apaisada */
@media (min-width:901px) and (max-width:1100px){.dock{gap:8px}.dock .btn{padding:0 16px;font-size:.68rem;letter-spacing:.1em}}
/* el FAB no pisa el CTA del escenario en tablet y celular */
@media (max-width:900px){.in-stage .fab{opacity:0;visibility:hidden;pointer-events:none}}
/* ---------- 12 · modo liviano / transparencia reducida ---------- */
.lite .nav__glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid)}
@media (prefers-reduced-transparency:reduce){.nav__glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid)}}
/* ---------- 13 · tipografía: pisos y voces ---------- */
.nav__links,.eyebrow,.lab,.foot__row,.ticker__track{font-size:var(--fs-lab)}
.foot__row,.ticker__track{font-size:var(--fs-lab)}
/* ---------- 14 · método: los nodos de la línea de tiempo son la misma pieza (no círculos) ---------- */
.tl li>.mono{--h:40px;--c:calc(var(--h)/3.4641016);width:var(--h);height:var(--h);border:0;border-radius:0;clip-path:var(--shape);background:linear-gradient(var(--g-fill),var(--g-fill)),var(--bg);color:var(--muted);isolation:isolate;z-index:2}
.tl li>.mono::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ring-c);clip-path:var(--ring-o);z-index:1}
.tl li>.mono::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--rim-c);clip-path:var(--ring-i);z-index:1}
.tl li.on>.mono{background:var(--btn-bg);color:var(--btn-fg);--ring-c:transparent}
/* JetBrains Mono solo en la consola: los numerales de fases y método usan la voz de rótulo */
.tl li>.mono,.phases .mono{font-family:var(--font-ext);font-size:var(--fs-lab);letter-spacing:.04em}
/* ---------- 16 · correcciones de la ronda de críticos ---------- */
/* botón ghost en oscuro: el hover de .btn (tinta) dejaba el rótulo invisible */
.btn--ghost:hover,.btn--wa.btn--ghost:hover,[data-theme="dark"] .btn--ghost:hover,[data-theme="dark"] .btn--wa.btn--ghost:hover{color:var(--accent)}
/* consola: sin círculos (la única curva es el punto del wordmark) */
.sim__bar i{width:8px;height:8px;border-radius:50%;background:var(--neon)}
.sim__bar i:nth-child(n+2){display:none}
.sim__bar span{margin-left:2px}
.sim__ring{display:none}
.sim__svg .lk{animation:none}
.sim.alert .sim__svg .lk:not(.cut){animation:flow 1.2s linear infinite}
@media (max-width:600px){.sim__svg .tag{font-size:12px}}
/* modo liviano: la barra y las píldoras conservan corte y aro */
.lite .nav__in{background:none}
.lite .status{background:var(--g-fill)}
.lite .fab__tip{background:var(--g-fill-2)}
/* gestión: listas y botones alineados entre columnas */
.xcard .btn{margin-top:0}
.xcard li::before{width:7px;height:7px;box-shadow:none}
/* foco: enlaces de la barra, tira 01-09, primarios en oscuro y FAB */
.nav__links a:not(.btn):focus-visible{outline:none;--ring-c:var(--focus);--b:2px}
.stage__dot{position:relative;--ring-c:transparent}
.stage__dot::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--ring-c);clip-path:var(--ring-o)}
[data-theme="dark"] .btn:not(.btn--ghost):focus-visible,[data-theme="dark"] .stage__dot.is-on:focus-visible{--focus:#F1F5F2;--ring-c:var(--focus)}
.fab:focus-visible::after{clip-path:var(--ring-o);--b:3px;background:var(--sig);z-index:2}
[data-theme="dark"] .fab:focus-visible::after{background:#F1F5F2}
html{scroll-padding-bottom:88px}
/* aro de los controles: ni medio píxel por debajo de 3:1 */
.chip-opt,.btn--ghost,.stage__nav,.theme{--b:1.5px}
:root,[data-theme="light"]{--ring-ui:rgba(18,22,19,.66);--ring-ui-hi:rgba(18,22,19,.80)}
[data-theme="dark"]{--ring-ui:rgba(255,255,255,.50);--ring-ui-hi:rgba(255,255,255,.70)}
/* hero en celular: la píldora respira y los CTA entran en la primera pantalla de los celulares bajos */
@media (max-width:430px){.status{height:auto;min-height:var(--h);padding-block:8px}}
@media (max-width:600px) and (max-height:700px){.hero__emblem{width:min(40vw,140px)}.status{display:none}}
@media (max-width:1100px) and (max-height:520px) and (orientation:landscape){.status{display:none}}
@media (max-width:560px){.fab__tip{display:none}}
/* menú móvil en pantallas bajas: entra completo */
@media (max-width:1020px) and (max-height:480px){.nav__links a:not(.btn){padding:10px 0}.nav__links .btn{margin-top:10px}}
/* movimiento reducido en escritorio: dos columnas, sin la mitad vacía */
@media (prefers-reduced-motion:reduce) and (min-width:901px){.stage__right{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}}
/* ---------- 17 · línea fina: trazo según el tamaño en pantalla ---------- */
/* --sw se fija sobre el propio