@font-face{font-family:"TikTok Sans";src:url(/fonts/tiktok-sans-300_900.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url(/fonts/reenie-beanie-400.woff2) format("woff2");font-display:swap}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}

/* Paleta derivada del logo: azul Ardanas #235DF4 y su índigo de sombra */
:root{
  --blue:#235df4;--blue-hi:#2562ff;--indigo:#1b1c7a;--navy:#0b1437;--sky:#7fb0ff;--ice:#e7effe;--coral:#ff6b4a;--mint:#16b98a;
  --bg:#fff;--fg:#0b1437;--muted:#5a6685;--soft:#f2f5fd;--soft-2:#e7ecf9;--card:#fff;--line:rgba(11,20,55,.07);--line-2:#dfe6f6;
  --ink:var(--navy);--ink-fg:#fff;--brand-text:#1f55e6;
  --glass:rgba(255,255,255,.55);--glass-line:rgba(255,255,255,.65);
  --stage:var(--navy);--stage-fg:#f2f5fd;
  --sans:"TikTok Sans",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--hand:"Reenie Beanie",cursive;
  --hold:#c5d9fd;color-scheme:light;
}
.dark{
  --bg:#060a1c;--fg:#eef2ff;--muted:#9aa7cc;--soft:#10173a;--soft-2:#1a2350;--card:#0d1330;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.13);
  --ink:#eef2ff;--ink-fg:#0b1437;--brand-text:#8fb2ff;
  --glass:rgba(255,255,255,.08);--glass-line:rgba(255,255,255,.15);--stage:#0a1030;--hold:#2c3f86;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
.sprite{position:absolute}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--ink-fg);padding:8px 14px;border-radius:8px}
.skip:focus{top:16px}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.sm{width:14px;height:14px}.ico.lg{width:24px;height:24px;stroke-width:1.5}.ico.xl{width:44px;height:44px;stroke-width:1.2}
.muted{color:var(--muted)}

/* transición de tema en círculo */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2;animation:reveal .65s cubic-bezier(.4,0,.2,1)}
@keyframes reveal{from{clip-path:circle(0 at var(--rx) var(--ry))}to{clip-path:circle(var(--rend) at var(--rx) var(--ry))}}

/* desenfoque progresivo en los bordes de la ventana */
.edge{position:fixed;inset-inline:0;z-index:40;pointer-events:none}
.edge i{position:absolute;inset:0}
.edge-t{top:0;height:96px}.edge-b{bottom:0;height:64px}
.edge i:nth-child(1){backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px)}
.edge i:nth-child(2){backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}
.edge i:nth-child(3){backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.edge i:nth-child(4){backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.edge i:nth-child(5){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.edge-t i:nth-child(1){-webkit-mask:linear-gradient(to bottom,#000 50%,transparent);mask:linear-gradient(to bottom,#000 50%,transparent)}
.edge-t i:nth-child(2){-webkit-mask:linear-gradient(to bottom,#000 42%,transparent 84%);mask:linear-gradient(to bottom,#000 42%,transparent 84%)}
.edge-t i:nth-child(3){-webkit-mask:linear-gradient(to bottom,#000 33%,transparent 66%);mask:linear-gradient(to bottom,#000 33%,transparent 66%)}
.edge-t i:nth-child(4){-webkit-mask:linear-gradient(to bottom,#000 25%,transparent 50%);mask:linear-gradient(to bottom,#000 25%,transparent 50%)}
.edge-t i:nth-child(5){-webkit-mask:linear-gradient(to bottom,#000 16%,transparent 33%);mask:linear-gradient(to bottom,#000 16%,transparent 33%)}
.edge-b i:nth-child(1){-webkit-mask:linear-gradient(to top,#000 50%,transparent);mask:linear-gradient(to top,#000 50%,transparent)}
.edge-b i:nth-child(2){-webkit-mask:linear-gradient(to top,#000 42%,transparent 84%);mask:linear-gradient(to top,#000 42%,transparent 84%)}
.edge-b i:nth-child(3){-webkit-mask:linear-gradient(to top,#000 33%,transparent 66%);mask:linear-gradient(to top,#000 33%,transparent 66%)}
.edge-b i:nth-child(4){-webkit-mask:linear-gradient(to top,#000 25%,transparent 50%);mask:linear-gradient(to top,#000 25%,transparent 50%)}
.edge-b i:nth-child(5){-webkit-mask:linear-gradient(to top,#000 16%,transparent 33%);mask:linear-gradient(to top,#000 16%,transparent 33%)}

/* barra superior */
.brand{position:fixed;left:24px;top:25px;z-index:50;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 24px -8px rgba(11,20,55,.3);transition:transform .2s}
.brand:hover{transform:scale(1.05)}
.brand img{display:block;width:30px;height:27px}
.topbar{position:fixed;inset:24px 24px auto;z-index:50;display:flex;justify-content:center;pointer-events:none}
.topbar-center{position:relative;display:flex;align-items:center;gap:8px;pointer-events:auto}
.pill{border:1px solid var(--glass-line);background:var(--glass);border-radius:999px;padding:4px;backdrop-filter:blur(24px) saturate(2);-webkit-backdrop-filter:blur(24px) saturate(2);box-shadow:0 10px 40px -10px rgba(11,20,55,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.pill ul{display:flex;gap:2px}
.pill a,.pill button{position:relative;display:flex;align-items:center;height:44px;padding:0 13px;border-radius:999px;font-size:15px;color:color-mix(in srgb,var(--fg) 72%,transparent);transition:color .15s,background .2s,box-shadow .2s}
.pill a:hover,.pill button:hover{color:var(--fg)}
.pill .on{color:var(--fg);background:var(--bg);box-shadow:0 1px 3px rgba(11,20,55,.16)}
.pill .on .ico:first-child{color:var(--blue)}
.dark .pill .on{background:rgba(255,255,255,.15)}.dark .pill .on .ico:first-child{color:var(--sky)}
.pill button[aria-expanded=true]{background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--fg)}
.lbl{display:grid;grid-template-columns:0fr;opacity:0;transition:grid-template-columns .3s cubic-bezier(.3,.9,.3,1),opacity .2s,margin .3s}
.lbl>span{overflow:hidden;white-space:nowrap}
.scrolled .lbl{grid-template-columns:1fr;opacity:1;margin-left:7px}
.sub .lbl{grid-template-columns:1fr;opacity:1;margin-left:7px}
.chev{display:none;margin-left:5px;transition:rotate .2s}
.scrolled .chev,.sub .chev{display:block}
[aria-expanded=true]>.chev{rotate:180deg}
.book{display:flex;align-items:center;gap:13px;height:50px;padding:0 24px 0 6px;border-radius:999px;background:var(--blue);color:#fff;font-weight:500;letter-spacing:.03em;box-shadow:0 10px 30px -10px rgba(35,93,244,.7);transition:transform .15s,background .15s;white-space:nowrap}
.book:hover{transform:translateY(-1px);background:var(--blue-hi)}
.dots{position:relative;display:block;width:38px;height:38px;border-radius:50%;background:#fff;animation:spin 7s linear infinite;flex:none}
.dots i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--blue)}
.dots i:nth-child(1){transform:translate(-2px,-12px)}.dots i:nth-child(2){transform:translate(7px,-6px)}.dots i:nth-child(3){transform:translate(-8px,-2px)}.dots i:nth-child(4){transform:translate(3px,3px)}.dots i:nth-child(5){transform:translate(-5px,9px)}.dots i:nth-child(6){transform:translate(7px,11px);width:3px;height:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.round{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 8px 24px -8px rgba(11,20,55,.3);transition:transform .15s}
.round:hover{transform:scale(1.05)}
.theme{position:absolute;right:0;top:1px;pointer-events:auto}
.ico-sun{display:none}.dark .ico-sun{display:block}.dark .ico-moon{display:none}
.fab{position:fixed;right:24px;bottom:24px;z-index:60;background:var(--bg)}
.ico-x{display:none}.fab[aria-expanded=true] .ico-x{display:block}.fab[aria-expanded=true] .ico-chat{display:none}

/* menús desplegables */
.mega{position:absolute;left:50%;top:62px;translate:-50% 0;width:min(680px,calc(100vw - 32px));border:1px solid var(--line-2);border-radius:22px;background:var(--bg);box-shadow:0 30px 70px -20px rgba(11,20,55,.4);overflow:hidden;animation:pop .2s}
.mega[hidden]{display:none}
.mega-s{width:min(440px,calc(100vw - 32px))}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}}
.mg-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px}
.mg-body.one{grid-template-columns:1fr}
.mg-feats{position:relative;min-height:230px}
.mg-feature{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background-color:var(--soft);transition:opacity .25s}
.mg-feature.off{opacity:0;pointer-events:none}
.mg-art{flex:1;display:grid;place-items:center;color:#fff}
.mg-title{padding:10px 12px 2px;background:var(--soft);font-size:14px;line-height:1.3}
.mg-meta{display:flex;justify-content:space-between;gap:8px;padding:6px 12px 10px;background:var(--soft);font-size:13px;color:var(--muted)}
.mg-eyebrow{padding:8px 10px;font:400 11px var(--mono);letter-spacing:.08em;color:var(--muted)}
.mg-list a{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:12px;transition:background .15s}
.mg-list a:hover,.mg-list a:focus-visible{background:var(--soft)}
.mg-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--brand-text);flex:none}
.mg-list b{display:block;font-size:14px;font-weight:500}
.mg-list small{display:block;font-size:12.5px;color:var(--muted)}
.mg-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line-2);font:400 12px var(--mono);color:var(--muted)}
.mg-foot a{display:flex;align-items:center;gap:6px;color:var(--fg)}
.mg-foot a:hover{color:var(--brand-text)}

/* fondos de marca para casos */
.b1{background:linear-gradient(135deg,#0b1437,#235df4 55%,#7fb0ff)}
.b2{background:linear-gradient(120deg,#1b1c7a,#235df4 45%,#5a8cff 70%,#b9d0ff)}
.b3{background:linear-gradient(160deg,#7fb0ff,#235df4 50%,#0b1437)}
.b4{background:linear-gradient(110deg,#e7effe,#7fb0ff 35%,#235df4 75%,#1b1c7a)}
.b5{background:linear-gradient(200deg,#0b1437,#1b1c7a 40%,#235df4 80%,#7fb0ff)}
.b6{background:linear-gradient(140deg,#235df4,#1b1c7a 60%,#ff6b4a 130%)}

/* cielo */
.sky{position:absolute;inset:0 0 auto;height:100svh;min-height:600px;overflow:hidden;pointer-events:none;z-index:-1;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.sky-grad{position:absolute;inset:0;background:linear-gradient(to bottom,#d6e5fe,rgba(231,239,254,.7) 45%,transparent);transition:filter 2.4s}
.dark .sky-grad{background:linear-gradient(to bottom,rgba(27,28,122,.55),rgba(35,93,244,.14) 45%,transparent)}
.layer{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 2.4s}
.sky[data-w=sun] .l-sun,.sky[data-w=clouds] .l-clouds,.sky[data-w=sun] .l-clouds,.sky[data-w=aurora] .l-aurora{opacity:1}
.sky[data-w=rain] .l-clouds,.sky[data-w=snow] .l-clouds{opacity:.75}
.sky[data-w=rain] .sky-grad{filter:saturate(.5) brightness(.93)}
.rays{position:absolute;right:calc(-500px + var(--rx2,0px));top:calc(-500px + var(--ry2,0px));width:1100px;height:1100px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.5) 0 5deg,transparent 5deg 13deg,rgba(255,255,255,.28) 13deg 16deg,transparent 16deg 31deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 66%);mask:radial-gradient(circle,#000 8%,transparent 66%);filter:blur(9px);animation:spin 150s linear infinite;transition:right .5s ease-out,top .5s ease-out}
.dark .rays{display:none}
.sun{position:absolute;right:-300px;top:-320px;width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.75) 30%,rgba(214,229,254,.3) 55%,transparent 72%);filter:blur(40px);animation:breathe 9s ease-in-out infinite}
.sun-core{position:absolute;right:-80px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.6) 45%,transparent 70%);filter:blur(24px)}
.dark .sun,.dark .sun-core{display:none}
@keyframes breathe{50%{transform:scale(1.07);opacity:.85}}
.cloud{position:absolute;left:0;width:288px;height:96px;animation:drift linear infinite;scale:var(--s,1)}
.cloud i{position:absolute;border-radius:999px;background:rgba(255,255,255,.92);filter:blur(12px)}
.dark .cloud i{background:rgba(143,178,255,.12)}
.cloud i:nth-child(1){left:24px;top:32px;width:160px;height:56px}.cloud i:nth-child(2){left:70px;top:8px;width:110px;height:70px}.cloud i:nth-child(3){left:150px;top:30px;width:120px;height:50px}
.c1{top:60px;--s:1.1;animation-duration:95s;animation-delay:-20s}.c2{top:130px;--s:.8;animation-duration:125s;animation-delay:-70s}.c3{top:210px;--s:1.3;animation-duration:150s;animation-delay:-110s}.c4{top:20px;--s:.65;animation-duration:110s;animation-delay:-45s}
@keyframes drift{from{transform:translateX(-340px)}to{transform:translateX(100vw)}}
#weather{position:absolute;inset:0;width:100%;height:100%}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,420px) minmax(260px,1fr);gap:48px;align-items:center;max-width:1280px;min-height:100svh;margin:auto;padding:112px 40px 64px}
h1{font-size:clamp(40px,3.5vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1.02;min-height:2.04em}
h1 .block{display:block}
h1 .ch{display:inline-block;white-space:pre}
.vapor-out{animation:vout .9s both}.vapor-in{animation:vin .9s both}
@keyframes vout{to{opacity:0;filter:blur(8px);transform:translate(var(--dx),var(--dy))}}
@keyframes vin{from{opacity:0;filter:blur(8px);transform:translate(var(--x),.5em)}}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hold{position:relative;display:inline-grid;place-items:center;height:44px;min-width:124px;padding:0 20px;overflow:hidden;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);font-size:14px;font-weight:500;touch-action:none;user-select:none;-webkit-user-select:none;transition:scale .15s}
.hold:active{scale:.98}
.hold-fill{position:absolute;inset:0;background:var(--hold);transform:translateY(100%);transition:transform .25s}
.hold.holding .hold-fill{transform:translateY(0);transition:transform 1s cubic-bezier(.3,.6,.4,1)}
.hold-lbl{position:relative}
.sheen{position:relative;display:inline-flex;height:44px;padding:2px;overflow:hidden;border-radius:999px;box-shadow:0 8px 20px -8px rgba(35,93,244,.6);font-size:14px;font-weight:500}
.sheen-ring{position:absolute;inset:0 -18%;background:linear-gradient(105deg,#0b1437,#5a6685 14%,#fff 26%,#235df4 38%,#0b1437 50%,#7fb0ff 64%,#fff 75%,#1b1c7a 87%,#0b1437);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.sheen:hover .sheen-ring{transform:translateX(-14%)}
.sheen-in{position:relative;display:flex;align-items:center;gap:8px;padding:0 18px;border-radius:999px;background:var(--bg)}
.mascot{width:100%;max-height:520px;color:var(--fg);justify-self:center}
.m-line,.m-face,.m-slots{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.m-paper,.m-neck{fill:var(--bg)}.m-rack{fill:var(--soft)}
.m-tip{fill:var(--blue)}
.m-screen{fill:var(--ice)}.dark .m-screen{fill:var(--soft)}
.m-face{stroke-width:6}
.m-eyes{fill:var(--blue)}.dark .m-eyes{fill:var(--sky)}
.eye{transition:transform .12s ease-out}
.m-slots{stroke-width:5;opacity:.25}
.m-leds circle{fill:var(--blue);stroke:currentColor;stroke-width:2.5;animation:led 2.4s steps(2) infinite}
.m-leds circle:nth-child(2){animation-delay:-.7s}.m-leds circle:nth-child(3){animation-delay:-1.3s}.m-leds circle:nth-child(4){animation-delay:-1.9s}.m-leds circle:nth-child(5){animation-delay:-.3s}
@keyframes led{50%{fill:transparent}}
.highlights li>button{display:block;width:100%;min-height:44px;padding:8px;text-align:left;font-size:17px;color:var(--muted);border-radius:8px;transition:color .2s}
.highlights li.on>button,.highlights li>button:hover{color:var(--fg)}
.panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s}
.panel p{overflow:hidden;padding-inline:8px;color:var(--muted);font-size:17px;line-height:1.55}
.on .panel{grid-template-rows:1fr}

/* marco con guías */
.frame-sec{padding-inline:40px;overflow-x:clip}
.frame{position:relative;max-width:1200px;margin:auto;border-inline:1px solid var(--line)}
.rule{position:relative;height:1px}
.rule::before{content:"";position:absolute;inset:0 -129px;background:var(--line)}
.rule::after{content:"";position:absolute;inset:-1px 0 auto;height:3px;background:radial-gradient(circle at 1.5px 1.5px,var(--fg) 1px,transparent 1.4px) left/3px 3px no-repeat,radial-gradient(circle at 1.5px 1.5px,var(--fg) 1px,transparent 1.4px) right/3px 3px no-repeat;margin-inline:-2px}
.eyebrow{padding:10px;font-size:16px;font-weight:500}
.head{padding:96px 42px 40px;display:flex;flex-direction:column;gap:12px}
.head h2,.ask h2{font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1.3}
.head p{max-width:640px;color:var(--muted)}

/* carrusel de credenciales */
.carousel{margin:0 0 24px;padding:24px 0 40px;overflow:hidden;border-radius:24px;background:color-mix(in srgb,var(--soft) 35%,transparent);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.carousel.drag{cursor:grabbing}
.carousel-track{display:flex;align-items:center;gap:32px;width:max-content;will-change:transform}
.cred{display:grid;place-content:center;text-align:center;border-radius:50%;background:var(--navy);color:#fff;flex:none;animation:bob 6s ease-in-out infinite;transition:background .5s}
.dark .cred{background:var(--soft-2)}
.cred.lit{background:var(--blue)}
.cred:nth-child(even){animation-delay:-3s}.cred:nth-child(3n){animation-delay:-1.5s}
.cred b{font-weight:600;letter-spacing:-.03em;line-height:1.05}
.cred small{font-size:12px;opacity:.75;line-height:1.2}
.cred.xl{width:190px;height:190px}.cred.xl b{font-size:30px}
.cred.l{width:160px;height:160px}.cred.l b{font-size:27px}
.cred.m{width:136px;height:136px}.cred.m b{font-size:25px}
.cred.s{width:116px;height:116px}.cred.s b{font-size:20px}
@keyframes bob{50%{transform:translateY(-10px)}}

/* servicios */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 42px 96px}
.service{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:24px;background:var(--soft);transition:transform .2s}
.service:hover{transform:translateY(-3px)}
.service .ico{color:var(--brand-text)}
.service h3{font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1.25;margin-top:6px}
.service p{color:var(--muted);font-size:15px;flex:1}
.service.hot{background:linear-gradient(150deg,var(--blue),var(--indigo));color:#fff}
.service.hot p{color:#dbe6ff}.service.hot .ico{color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:6px;font:400 12px var(--mono);color:var(--muted)}
.tags li{padding:3px 9px;border:1px solid var(--line-2);border-radius:999px}
.hot .tags{color:#fff}.hot .tags li{border-color:rgba(255,255,255,.35)}

/* muro de componentes */
.statement{padding:32px 10px 16px;font-size:clamp(28px,3.9vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1.17}
.wall-note{padding:0 10px 24px;color:var(--muted)}.wall-note strong{color:var(--fg);font-weight:500}
.wall-wrap{display:flex;justify-content:center;padding:0 10px 40px}
.wall{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;width:100%;max-width:1024px;height:800px;padding:12px;overflow-y:auto;border-radius:24px;border:1px solid var(--line);background:color-mix(in srgb,var(--soft) 40%,transparent);scrollbar-width:thin}
.tile{position:relative;grid-column:span var(--c,4);display:flex;flex-direction:column;min-height:440px;border-radius:18px;border:1px solid var(--line);background:var(--soft);overflow:hidden;min-width:0}
.tile.short{min-height:320px}
.tile-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;min-width:0}
.tile figcaption{padding:0 18px 12px;font-size:13px;color:var(--muted)}
.replay{position:absolute;right:10px;top:10px;z-index:3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--muted);box-shadow:0 1px 3px rgba(11,20,55,.15)}
.replay:hover{color:var(--fg)}
.mini{height:34px;padding:0 15px;border-radius:999px;background:var(--ink);color:var(--ink-fg);font-size:13px;font-weight:500;transition:opacity .15s}
.mini:disabled{opacity:.55;cursor:default}
.ui-card{width:100%;padding:16px;border-radius:16px;background:var(--bg);box-shadow:0 1px 3px rgba(11,20,55,.1)}

/* impresora */
.printer{width:100%;max-width:220px;display:flex;flex-direction:column;align-items:center;flex:1}
.pr-top{width:100%;display:flex;justify-content:space-between;padding:12px;border-radius:12px 12px 0 0;background:var(--bg);font-size:11px;box-shadow:0 1px 3px rgba(11,20,55,.12);z-index:1}
.pr-top span:last-child{color:var(--muted)}
.pr-slot{width:90%;height:5px;margin-top:-1px;border-radius:0 0 4px 4px;background:var(--soft-2);z-index:1}
.pr-clip{width:88%;overflow:hidden;flex:1;min-height:270px}
.receipt{padding:14px 12px;background:#fff;color:#0b1437;font-size:10.5px;line-height:1.5;transform:translateY(-101%);box-shadow:0 8px 16px rgba(11,20,55,.12)}
.receipt.out{transform:none;transition:transform 2s steps(22)}
.receipt b{display:block;text-align:center;font-size:11px}
.receipt small{display:block;text-align:center;color:#5a6685;font-size:9.5px}
.receipt hr{border:0;border-top:1px dashed #b9c4dd;margin:7px 0}
.receipt p{display:flex;justify-content:space-between;gap:6px}
.receipt .tot{font-weight:600}
.barcode{height:28px;margin-top:8px;background:repeating-linear-gradient(90deg,#0b1437 0 2px,transparent 2px 3px,#0b1437 3px 4px,transparent 4px 7px,#0b1437 7px 10px,transparent 10px 12px)}

/* depósito */
.tank-h{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:10px;font-weight:500;font-size:14px}
.st{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:var(--soft);font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
.st.warn::before{background:var(--coral)}
.tank{position:relative;width:min(170px,100%);aspect-ratio:1;margin:auto}
.tank svg{width:100%;height:100%;display:block}
.tank circle{fill:var(--soft)}
#tk-wave{fill:var(--blue);transition:fill .5s}
#tk-wave.hot{fill:var(--coral)}
.tank-v{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;text-shadow:0 1px 6px rgba(11,20,55,.45)}
.tank-v b{font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1}
.tank-v small{font-size:11px;opacity:.85}
.tank-f{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;font-weight:500}
.tank-f small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.tank-f span:last-child{text-align:right}

/* código 2FA */
.otp-title{text-align:center;font-size:13px;font-weight:500}
.otp-sub{text-align:center;font-size:11px;color:var(--muted)}
#sphere{width:176px;height:176px;margin:6px auto;display:block;cursor:pointer;touch-action:manipulation}
.otp-boxes{display:flex;justify-content:center;gap:5px}
.otp-boxes span{display:grid;place-items:center;width:27px;height:32px;border-radius:7px;background:var(--soft);border:1px solid var(--line-2);font:500 14px var(--mono);transition:background .2s,color .2s}
.otp-boxes.ok span{background:var(--blue);color:#fff;border-color:var(--blue)}
.otp-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:var(--muted)}
.linkbtn{font-size:11px;min-height:24px;color:var(--brand-text);text-decoration:underline;text-underline-offset:2px}

/* previsión */
.fc-h{width:100%;font-size:12.5px;font-weight:500}
.fc-h small{display:block;font-size:10.5px;font-weight:400;color:var(--muted)}
.fc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.fc-stats small{display:block;font-size:10px;color:var(--muted)}
.fc-stats b{font-size:21px;font-weight:500;letter-spacing:-.03em}
.fc-stats .warn{color:var(--coral)}
.chart{width:100%;height:auto;display:block;overflow:visible;font:400 9px var(--mono)}
.chart text{fill:var(--muted)}
.chart .g{stroke:var(--line-2);stroke-width:1}
.chart .bud{stroke:var(--muted);stroke-dasharray:3 3}
.chart .act{fill:none;stroke:var(--fg);stroke-width:2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.chart.play .act{transition:stroke-dashoffset 1.8s ease-out;stroke-dashoffset:0}
.chart .fc{fill:none;stroke:var(--coral);stroke-width:2;stroke-dasharray:4 4;opacity:0;transition:opacity .5s 1.6s}
.chart .band{fill:color-mix(in srgb,var(--coral) 16%,transparent);opacity:0;transition:opacity .5s 1.6s}
.chart .mk{fill:var(--bg);stroke:var(--coral);stroke-width:3;opacity:0;transition:opacity .4s 2s}
.chart.play .fc,.chart.play .band,.chart.play .mk{opacity:1}
.chart .up{fill:var(--blue);stroke:var(--blue)}.chart .dn{fill:var(--coral);stroke:var(--coral)}
.chart .cd{transform-box:fill-box;transform-origin:bottom;animation:grow .4s both}
@keyframes grow{from{transform:scaleY(0);opacity:0}}

/* carriles */
.lanes{width:100%;display:grid;gap:10px;font:400 11.5px var(--mono)}
.lane{display:grid;grid-template-columns:66px 1fr 60px;gap:8px;align-items:center}
.lane-t{position:relative;height:24px;border-radius:12px;background:var(--bg);overflow:hidden}
.lane-t i{position:absolute;inset:0 auto 0 0;width:var(--p,0);border-radius:12px;background:var(--blue);transition:width .7s linear}
.lane-s{color:var(--muted);text-align:right}
/* notificaciones */
.notifs{position:relative;width:100%;height:210px}
.notif{position:absolute;inset:auto 0 0;display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;background:var(--bg);box-shadow:0 6px 18px -8px rgba(11,20,55,.35);font-size:12.5px;transition:transform .45s cubic-bezier(.3,1.3,.5,1),opacity .35s;transform:translateY(calc(var(--n)*-22px)) scale(calc(1 - var(--n)*.05));opacity:calc(1 - var(--n)*.3);z-index:calc(5 - var(--n))}
.notif.enter{transform:translateY(40px) scale(.96);opacity:0}
.notif .ico{color:var(--brand-text)}
.notif small{display:block;color:var(--muted);font-size:11px}
/* interruptor */
.liquid{--w:124px;position:relative;display:block;width:var(--w);height:60px;border-radius:30px;background:var(--soft-2);transition:background .35s}
.liquid[aria-checked=true]{background:var(--blue)}
.liquid i{position:absolute;left:5px;top:5px;width:50px;height:50px;border-radius:25px;background:#fff;box-shadow:0 2px 6px rgba(11,20,55,.3);transition:left .42s cubic-bezier(.3,1.4,.5,1),width .2s}
.liquid:active i{width:66px}
.liquid[aria-checked=true] i{left:calc(var(--w) - 55px)}
.liquid[aria-checked=true]:active i{left:calc(var(--w) - 71px)}
.switch-l{font-size:13px;color:var(--muted);text-align:center}
/* paleta de comandos */
.cmd{width:100%;border-radius:14px;background:var(--bg);box-shadow:0 8px 24px -12px rgba(11,20,55,.4);overflow:hidden}
.cmd label{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-2)}
.cmd input{width:100%;min-width:0;border:0;outline:0;background:none;color:inherit;font:inherit;font-size:13px}
.cmd ul{height:150px;overflow:hidden;padding:5px}
.cmd li{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:8px;font-size:12.5px}
.cmd li:first-child{background:var(--soft)}
.cmd li small{color:var(--muted);font:400 10.5px var(--mono);white-space:nowrap}
/* voz */
.voice{display:flex;align-items:center;gap:3px;height:56px}
.voice i{width:4px;height:var(--h);border-radius:2px;background:var(--blue);animation:vb 1s ease-in-out infinite;animation-delay:var(--d)}
@keyframes vb{50%{transform:scaleY(.3)}}
.voice-t{min-height:60px;width:100%;font-size:13px;text-align:center}
.voice-r{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:12px;background:var(--bg);font-size:12px;opacity:0;transition:opacity .4s}
.voice-r.in{opacity:1}.voice-r .ico{color:var(--mint)}
/* estado */
.status{width:100%}
.status-h{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:500;margin-bottom:8px}
.status-h .st{font-weight:400}
.st-row{margin-top:12px;font-size:12px}
.st-row p{display:flex;justify-content:space-between;margin-bottom:4px}
.st-row small{color:var(--muted)}
.st-bars{display:flex;gap:2px;height:26px}
.st-bars i{flex:1;border-radius:2px;background:var(--blue);min-width:1px}
.st-bars i.bad{background:var(--coral)}.st-bars i.meh{background:var(--sky)}
/* acordeón */
.acc{width:100%}
.acc>div{border-bottom:1px solid var(--line-2)}
.acc button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 2px;text-align:left;font-size:13.5px;font-weight:500}
.acc button .ico{transition:rotate .25s}.acc button[aria-expanded=true] .ico{rotate:180deg}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.acc-p p{overflow:hidden;font-size:13px;color:var(--muted)}
.acc-p.open{grid-template-rows:1fr}.acc-p.open p{padding-bottom:10px}
/* dock */
.dock{display:flex;align-items:flex-end;gap:6px;padding:8px 10px;border-radius:18px;background:var(--glass);border:1px solid var(--line-2);height:74px}
.dock span{display:grid;place-items:center;width:calc(38px*var(--z,1));height:calc(38px*var(--z,1));border-radius:calc(11px*var(--z,1));background:var(--bg);color:var(--brand-text);box-shadow:0 2px 6px rgba(11,20,55,.15);transition:width .1s,height .1s}

/* casos */
.controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:0 42px}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:24px;background:var(--soft)}
.seg button{display:flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:999px;font-size:14px;color:var(--muted);transition:background .2s,color .2s}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed=true]{background:var(--bg);color:var(--fg);box-shadow:0 1px 3px rgba(11,20,55,.14)}
.seg sup{font-size:10px;margin-left:-2px}
.count{padding:14px 42px 0;font-size:13px;color:var(--muted)}
.cases{padding-bottom:48px}
.case[hidden]{display:none}
.case-head header{padding:96px 42px 40px}
.case h3{max-width:920px;font-size:clamp(24px,3vw,32px);font-weight:500;letter-spacing:-.04em;line-height:1.3}
.case h3 a:hover{color:var(--brand-text)}
.hash{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;font-size:12px;color:color-mix(in srgb,var(--fg) 50%,transparent)}
.case-main{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;padding:0 26px}
.case-media{display:flex;flex-direction:column;justify-content:space-between;min-height:532px;border-radius:24px;overflow:hidden;color:#fff;transition:transform .3s}
.case-media:hover{transform:scale(1.005)}
.media-inset{display:flex;flex-direction:column;flex:1;margin:0 0 0 26px;padding:12px 28px 16px;background:var(--bg);color:var(--fg);border-radius:0 0 0 24px}
.media-screen{flex:1;display:flex;align-items:center;justify-content:center;min-height:300px;padding:16px;border-radius:24px;background:var(--stage);color:var(--stage-fg);background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:18px 18px;margin-bottom:16px}
.prompt{display:flex;align-items:center;gap:8px}
.prompt-txt{flex:1;min-width:0;min-height:40px;padding:9px 12px;border-radius:12px;border:1px solid var(--line-2);font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--bg)}
.prompt-go{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);flex:none;position:relative}
.prompt-go::after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--blue);animation:spin 1s linear infinite}
.media-meta{display:block;padding:20px 26px}
.media-meta b{display:block;font-weight:500}
.media-meta>span{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:14px;opacity:.9}
.case-side{display:flex;flex-direction:column;gap:32px;padding:22px;border-radius:24px;background:var(--soft)}
.case-sum{flex:1;display:flex;align-items:center;padding:20px;min-height:194px;border-radius:24px;background:var(--bg);font-size:16.5px;letter-spacing:-.01em}
.case-role{display:grid;gap:10px;font-size:15px;padding-inline:2px}
.book.more{align-self:flex-end;height:48px}
.case-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 26px 0}
.case-feats li{display:flex;flex-direction:column;min-height:252px;padding:24px;border-radius:24px;border:1px solid var(--line);background:var(--soft);font-size:14.5px}
.case-feats .ico{color:var(--brand-text);margin-bottom:auto}
.case-feats h4{margin:32px 0 8px;font-weight:400;font-size:16px;color:var(--muted)}
.cases[data-view=grid]{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:24px 26px 72px}
.cases[data-view=grid] .case{padding:14px;border-radius:24px;background:var(--soft)}
.cases[data-view=grid] .rule,.cases[data-view=grid] .case-side,.cases[data-view=grid] .case-feats{display:none}
.cases[data-view=grid] .case-head header{padding:6px 6px 14px}
.cases[data-view=grid] h3{font-size:19px}
.cases[data-view=grid] .case-main{display:block;padding:0}
.cases[data-view=grid] .case-media{min-height:0}
.cases[data-view=grid] .media-screen{min-height:230px}
.cases[data-view=deck]{position:relative;margin:24px 26px 0}
.cases[data-view=deck] .case{position:absolute;inset:0 0 auto;padding:6px 6px 22px;border-radius:24px;background:var(--card);border:1px solid var(--line-2);box-shadow:0 20px 50px -24px rgba(11,20,55,.45);transition:transform .45s cubic-bezier(.3,.9,.3,1),opacity .3s;transform:translateY(calc(var(--i)*16px)) scale(calc(1 - var(--i)*.03));z-index:calc(10 - var(--i));opacity:calc(1 - var(--i)*.28)}
.cases[data-view=deck] .rule,.cases[data-view=deck] .case-feats{display:none}
.cases[data-view=deck] .case-head header{padding:20px 20px 16px}
.cases[data-view=deck] .case-main{padding:0 16px}
.cases[data-view=deck] .case.away{transform:translateX(-110%) rotate(-5deg);opacity:0}
.cases[data-view=deck] .case.buried{visibility:hidden}
.deck-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 0 72px;font:400 14px var(--mono)}
.deck-nav[hidden]{display:none}

/* vistas de ejemplo dentro de los casos */
.pv{width:100%;max-width:400px;font-size:13px;line-height:1.35}
.pv header{display:flex;justify-content:space-between;margin-bottom:12px}
.pv header b{font-weight:500}
.pv header span{color:#9fb3e0;font:400 11px var(--mono)}
.pv-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:11.5px}
.pv-board b{display:block;margin-bottom:7px;font-weight:500;color:#9fb3e0}
.pv-board p{margin-bottom:7px;padding:8px;border-radius:9px;background:rgba(255,255,255,.08)}
.pv-board em{display:block;margin-top:4px;font:400 10px var(--mono);color:var(--sky)}
.pv-agent p{margin-bottom:9px}
.pv-agent .me{margin-left:auto;width:fit-content;max-width:90%;padding:9px 12px;border-radius:12px;background:#eef2ff;color:#0b1437}
.pv-agent .thinking{display:flex;align-items:center;gap:6px;color:#9fb3e0}
.pv-agent .tool{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.08)}
.pv-agent .tool code{font:400 11.5px var(--mono)}
.pv-agent .tool span{margin-left:auto;color:#9fb3e0;font-size:11px}
.pv-agent .tool .ico{color:var(--sky)}
.pv-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pv-tiles div{padding:11px;border-radius:12px;background:rgba(255,255,255,.08)}
.pv-tiles small{display:block;color:#9fb3e0}
.pv-tiles strong{font-size:23px;font-weight:500;letter-spacing:-.03em}
.pv-tiles i{display:block;height:4px;margin-top:6px;border-radius:2px;background:linear-gradient(90deg,var(--blue) 60%,rgba(255,255,255,.14) 60%)}
.pv-tiles i.w{background:linear-gradient(90deg,var(--coral) 80%,rgba(255,255,255,.14) 80%)}
.pv-home>p,.pv-mail>p{margin-top:12px;color:#9fb3e0;font-size:11.5px}
.pv-mail li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.pv-mail em{font:500 12px var(--mono);color:var(--sky);font-style:normal}
.pv-mail em.q{color:var(--coral)}
.pv-car svg{width:100%;height:auto;display:block;margin-bottom:12px}
.pv-car path{fill:none;stroke-width:2.5;stroke-linecap:round}
.pv-car .l1{stroke:var(--sky)}.pv-car .l2{stroke:var(--coral);opacity:.8}
.pv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pv-row span{padding:8px;border-radius:9px;background:rgba(255,255,255,.08);color:#9fb3e0}
.pv-row small{display:block;font-size:10.5px}
.pv-bars{display:flex;align-items:flex-end;gap:5px;height:120px;margin-bottom:12px}
.pv-bars i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(to top,var(--blue),var(--sky))}
.h30{height:30%}.h40{height:40%}.h50{height:50%}.h60{height:60%}.h70{height:70%}.h80{height:80%}.h90{height:90%}

/* laboratorio */
.exps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:40px 26px 96px}
.exp{display:flex;flex-direction:column}
.exp-media{display:block;aspect-ratio:16/9;margin-bottom:24px;border-radius:18px;overflow:hidden;background:var(--navy);color:#fff}
.exp-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.exp h3{font-size:17px;font-weight:500;letter-spacing:-.02em}
.exp p{margin:12px 0 18px;font-size:15px;line-height:1.7;flex:1}
.exp-cta{align-self:flex-end;display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:500;background:var(--bg);box-shadow:0 2px 6px rgba(11,20,55,.08)}
.exp-cta:hover{border-color:var(--blue);color:var(--brand-text)}
.exp-glow{display:grid;place-items:center;height:100%;padding:16px;background:radial-gradient(circle at 50% 60%,#1b1c7a,#0b1437 70%)}
.chatbox.fake{display:flex;justify-content:space-between;align-items:center;width:90%;padding:12px 14px;font-size:12.5px;--bgc:#0b1437;color:#c7d5f7}
.fake-send{position:static;width:26px;height:26px}
.exp-md{display:flex;flex-direction:column;justify-content:center;gap:4px;height:100%;padding:18px 24px;font-size:13px;background:linear-gradient(140deg,#0b1437,#1b1c7a)}
.exp-md code{font-family:var(--mono)}

/* chat */
.ask{display:flex;flex-direction:column;align-items:center;gap:20px;padding:96px 42px 40px}
.ask h2{align-self:flex-start}
.chat{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.ask .log{min-height:240px}
.log{flex:1;width:100%;max-width:630px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow-y:auto}
.bot-row{display:flex;gap:10px;align-items:flex-start}
.bot-av{width:24px;height:24px;margin-top:2px;border-radius:50%;border:2px dotted var(--blue);flex:none;animation:spin 8s linear infinite}
.msg{max-width:88%;padding:10px 15px;border-radius:18px;font-size:15px;animation:tick .3s}
.bot-row .msg{max-width:none;padding:0}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff}
.msg.bot{align-self:flex-start;background:var(--soft)}
.bot-row .msg.bot{background:none}
@keyframes tick{from{transform:translateY(-6px);opacity:0}}
.sugg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:630px}
.sugg[hidden]{display:none}
.sugg button{min-height:34px;padding:4px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:13px}
.sugg button:hover{border-color:var(--blue);color:var(--brand-text)}
.chatbox{--bgc:var(--bg);position:relative;width:100%;max-width:630px;padding:14px;border-radius:24px;isolation:isolate;box-shadow:0 0 34px -8px rgba(35,93,244,.5)}
.chatbox::before,.chatbox::after{content:"";position:absolute;inset:-1px;border-radius:25px;background:conic-gradient(from var(--spin),var(--blue),#c7a5ff 18%,var(--line-2) 34%,var(--line-2) 70%,var(--blue));animation:rim 7s linear infinite;z-index:-2}
.chatbox::after{inset:1px;border-radius:23px;background:var(--bgc);animation:none;z-index:-1}
@keyframes rim{to{--spin:360deg}}
.chatbox textarea{display:block;width:100%;padding-right:44px;border:0;outline:0;resize:none;background:none;color:inherit;font:inherit;line-height:1.5}
.chatbox textarea::placeholder{color:var(--muted)}
.send{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff}
.fine{max-width:630px;text-align:center;font-size:12px;color:var(--muted)}

/* panel lateral de chat */
.drawer{position:fixed;right:16px;bottom:88px;z-index:60;display:flex;flex-direction:column;width:min(392px,calc(100vw - 32px));height:min(600px,calc(100vh - 170px));border-radius:22px;border:1px solid var(--line-2);background:var(--bg);box-shadow:0 30px 80px -20px rgba(11,20,55,.45);animation:pop .2s}
.drawer[hidden]{display:none}
.drawer>header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.drawer b{display:block;font-weight:500}
.drawer small{color:var(--muted);font-size:12px}
.ghost-x{display:grid;place-items:center;width:34px;height:34px;border-radius:50%}
.ghost-x:hover{background:var(--soft)}
.drawer .chat{flex:1;min-height:0;padding:14px}
.drawer .log{justify-content:flex-start}
.drawer .sugg{justify-content:flex-start}

/* sobre mí */
.about{padding:56px 42px 40px;display:grid;gap:16px}
.about .eyebrow{padding:0;color:var(--muted)}
.about .big{max-width:880px;font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1.3}
.about>p:not(.eyebrow){max-width:760px;font-size:17px;color:var(--muted)}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:24px 42px 64px}
.m-col{display:flex;flex-direction:column;gap:22px;height:536px}
.m-tile{border-radius:20px;background:var(--soft);display:grid;place-items:center;overflow:hidden}
.m-tile.tall{height:300px;padding:18px;color:#f2f5fd;margin-top:0;background:var(--stage)}
.m-col:first-child .tall{height:356px}.m-col:last-child .tall{height:356px;margin-top:auto}
.m-tile.mini-t{width:160px;height:160px;align-self:flex-end;color:var(--brand-text)}
.m-tile.mini-t.end{align-self:flex-start}
.m-tile.full{flex:1}
.logo-t{background:var(--ice)}.dark .logo-t{background:var(--soft)}
.logo-t img{width:45%;height:auto}
.journey{padding:24px 42px 72px}
.journey h3,.stack-in h3{margin-bottom:24px;font-size:28px;font-weight:500;letter-spacing:-.04em;line-height:1.15}
.journey li{display:grid;grid-template-columns:2.4fr 1.6fr 1fr 72px;gap:12px;align-items:baseline;padding:10px 12px;border-bottom:1px solid var(--line)}
.journey li span:first-child{font-weight:500}
.journey li span:not(:first-child){font-size:13px;color:var(--muted)}
.journey li span:last-child{text-align:right}

/* stack */
.stack-in{padding:56px 42px 40px}
.logos{display:grid;grid-template-columns:repeat(6,1fr);row-gap:40px;padding:12px 0 24px}
.logos li{height:32px}
.logos svg{height:32px;width:32px;display:block;fill:color-mix(in srgb,var(--fg) 72%,transparent);transition:fill .3s,transform .2s}
.logos li:hover svg,.logos li.lit svg{fill:var(--blue);transform:scale(1.08)}
.dark .logos li:hover svg,.dark .logos li.lit svg{fill:var(--sky)}
.logos-note{font-size:12px;color:var(--muted);padding-bottom:12px}
.net{position:relative;height:720px}
.net canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#net{cursor:grab;touch-action:pan-y}
#net.grabbing{cursor:grabbing}
.net-dust{pointer-events:none}

/* pie */
.foot{position:relative;overflow:clip;padding-top:40px}
.ascii{display:block;width:100%;height:356px;margin-bottom:-110px}
.quote{position:relative;display:flex;justify-content:center;min-height:210px;padding:60px 24px}
blockquote{max-width:560px;font:400 clamp(30px,4vw,44px)/1.1 var(--hand);text-align:center}
.quote .c{opacity:0;transition:opacity .25s;transition-delay:var(--d)}
.quote .w{display:inline-block;white-space:pre}
.quote.in .c{opacity:1}
.foot-in{position:relative;max-width:1280px;margin:auto;padding:0 40px}
.foot-top{display:flex;justify-content:space-between;gap:32px;padding-bottom:40px}
.foot-cols{display:flex;gap:40px}
.foot-cols nav{width:112px}
.foot-cols p{margin-bottom:14px;font-weight:500;color:var(--muted)}
.foot-cols a{display:block;padding:6px 0;border-bottom:1px solid var(--line-2);color:var(--muted);transition:color .15s,border-color .15s}
.foot-cols a:hover{color:var(--fg);border-color:var(--blue)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding-block:16px;font-size:14px;color:var(--muted)}
.agentbtn{min-height:32px;padding:0 10px;border-radius:8px;text-decoration:underline;text-underline-offset:3px}
.agentbtn:hover{color:var(--fg)}
.word{display:block;margin:0 0 -.24em;text-align:center;font-size:27.5vw;font-weight:600;letter-spacing:-.06em;line-height:.9;background:linear-gradient(to bottom,color-mix(in srgb,var(--blue) 26%,transparent),transparent 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}

/* vista de agente */
.agentview{width:min(760px,calc(100vw - 32px));height:min(80vh,800px);margin:auto;padding:0;border:1px solid var(--line-2);border-radius:18px;background:var(--bg);color:var(--fg);box-shadow:0 30px 80px rgba(11,20,55,.4)}
.agentview[open]{display:flex;flex-direction:column}
.agentview::backdrop{background:rgba(11,20,55,.45);backdrop-filter:blur(3px)}
.agentview header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-2);font-size:14px}
.agentview pre{flex:1;overflow:auto;padding:18px;font:400 13px/1.6 var(--mono);white-space:pre-wrap}

/* páginas de caso */
.sub-head{padding:112px 42px 40px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin-bottom:32px;color:var(--muted)}
.back:hover{color:var(--fg)}
.sub-prod{font-size:24px;font-weight:500;letter-spacing:-.03em;color:var(--muted)}
.sub-head h1{font-size:clamp(24px,3vw,32px);font-weight:500;line-height:1.3;min-height:0}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.chips a{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;box-shadow:0 2px 5px rgba(11,20,55,.08)}
.chips a:hover{border-color:var(--blue);color:var(--brand-text)}
.sub-hero{display:grid;place-items:center;min-height:520px;margin:0 26px;padding:40px;border-radius:24px}
.sub-screen{display:flex;justify-content:center;width:100%;max-width:560px;padding:32px;border-radius:24px;background:var(--stage);color:var(--stage-fg);box-shadow:0 30px 60px -20px rgba(11,20,55,.6)}
.sim-note{padding:10px 26px 0;font-size:12px;color:var(--muted);text-align:right}
.sub-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:24px 26px 64px}
.sub-facts div{padding:20px;border-radius:20px;background:var(--soft)}
.sub-facts dt{font-size:13px;color:var(--muted)}
.sub-facts dd{font-weight:500}
.sub-sec{display:grid;grid-template-columns:1fr 2fr;gap:32px;padding:80px 42px}
.sub-sec h2{font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1.3}
.sub-text{font-size:18px;display:grid;gap:16px}
.lessons{display:grid;gap:12px}
.lessons li{padding:18px 20px;border-radius:18px;background:var(--soft)}
.sub-feats{padding-block:48px 16px}
.sub-next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:40px 42px 72px}
.next-link{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:22px;font-weight:500;letter-spacing:-.03em}
.next-link:hover{color:var(--brand-text)}
.sidedots{position:fixed;left:14px;top:50%;translate:0 -50%;z-index:30;display:flex;flex-direction:column;gap:2px}
.sidedots a{display:grid;place-items:center;width:24px;height:24px}
.sidedots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background .2s,scale .2s}
.sidedots a.on i{background:var(--blue);scale:1.4}

/* responsive */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr 1fr;gap:32px}
  .highlights{grid-column:1/-1}
  .services{grid-template-columns:repeat(2,1fr)}
  .tile{grid-column:span 6}.tile.wide{grid-column:span 12}
  .case-feats{grid-template-columns:repeat(2,1fr)}
  .case-main{grid-template-columns:1fr}
  .exps{grid-template-columns:repeat(2,1fr)}
  .mosaic{grid-template-columns:1fr 1fr}.m-col:last-child{display:none}
  .logos{grid-template-columns:repeat(4,1fr)}
  .brand{display:none}
  .sidedots{display:none}
}
@media (max-width:760px){
  html{scroll-padding-top:84px}
  .topbar{inset:12px 12px auto;justify-content:flex-start}
  .pill a,.pill button{padding:0 9px;height:40px}
  .scrolled .lbl,.sub .lbl{grid-template-columns:0fr;opacity:0;margin:0}
  .scrolled .chev,.sub .chev{display:none}
  .topbar .book{height:42px;padding:0 3px;gap:0}.topbar .book-txt{display:none}.topbar .dots{width:36px;height:36px}
  .mega{position:fixed;left:16px;right:16px;top:70px;width:auto;translate:none;max-height:calc(100vh - 90px);overflow-y:auto}
  .mg-body{grid-template-columns:1fr}.mg-feats{display:none}
  .theme{width:44px;height:44px;top:0}
  .hero{grid-template-columns:1fr;padding:80px 24px 32px;gap:20px;min-height:0}
  .mascot{order:-1;max-height:280px}
  .frame-sec{padding-inline:12px}
  .head{padding:64px 18px 28px}
  .services,.controls,.count,.stack-in,.journey,.about,.ask,.mosaic,.sub-head,.sub-sec,.sub-next{padding-inline:18px}
  .services,.exps{grid-template-columns:1fr}
  .wall{height:auto;overflow:visible;grid-template-columns:1fr;padding:8px}
  .tile,.tile.wide{grid-column:auto;min-height:0}
  .carousel-track{gap:18px}
  .cred.xl{width:140px;height:140px}.cred.xl b{font-size:22px}.cred.l{width:124px;height:124px}.cred.l b{font-size:21px}.cred.m{width:108px;height:108px}.cred.m b{font-size:20px}.cred.s{width:92px;height:92px}.cred.s b{font-size:17px}
  .case-head header{padding:64px 18px 24px}
  .case-main,.case-feats,.exps{padding-inline:10px}
  .case-feats{grid-template-columns:1fr}.case-feats li{min-height:0}.case-feats h4{margin-top:18px}
  .case-media{min-height:0}
  .media-inset{margin-left:12px;padding:10px 12px 12px}
  .media-screen{min-height:240px;padding:12px}
  .pv-board{grid-template-columns:1fr}.pv-board div:nth-child(n+2){display:none}
  .cases[data-view=grid]{grid-template-columns:1fr;padding-inline:10px}
  .cases[data-view=deck]{margin-inline:10px}
  .journey li{grid-template-columns:1fr 62px;padding-inline:4px}
  .journey li span:nth-child(2),.journey li span:nth-child(3){grid-column:1}
  .journey li span:nth-child(3):empty{display:none}
  .journey li span:last-child{grid-row:1;grid-column:2}
  .mosaic{grid-template-columns:1fr}.m-col{height:auto}.m-col:first-child .mini-t{display:none}.m-col:nth-child(2){height:220px}
  .logos{grid-template-columns:repeat(3,1fr)}
  .net{height:480px}
  .foot-in{padding:0 24px}
  .foot-top{flex-direction:column}
  .sub-sec{grid-template-columns:1fr;padding-block:48px}
  .sub-text{font-size:16px}
  .sub-hero{min-height:0;margin-inline:10px;padding:16px}
  .sub-screen{padding:16px}
  .sub-facts{grid-template-columns:1fr;padding-inline:10px}
  .sub-feats{padding-inline:10px}
  .fab{right:14px;bottom:14px}
  .dock{gap:4px;padding:8px 6px}.dock span{width:calc(27px*var(--z,1));height:calc(27px*var(--z,1));border-radius:8px}.dock .ico{width:14px;height:14px}
  .drawer{right:8px;left:8px;width:auto;bottom:72px;height:calc(100vh - 96px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .quote .c{opacity:1}
  .receipt{transform:none}
}