/* Silverbox · sitio 2026. Lenguaje de marca compartido con los brochures y el stand (repo marketing: marca/). */
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(/assets/fuentes/IBMPlexMono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(/assets/fuentes/IBMPlexMono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url(/assets/fuentes/IBMPlexMono-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:700;font-display:swap;src:url(/assets/fuentes/IBMPlexMono-700.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:100 900;font-display:swap;src:url(/assets/fuentes/Jost-latin.woff2) format('woff2')}

:root{
  --navy:#020236; --navy-2:#14134d; --card:#0B0B44; --card-2:#121256;
  --green:#00E28B; --green-ink:#00966A; --indigo:#4449F0; --lav:#B3B0EE; --coral:#FF7175; --tono:#08083F; --tono-2:#0E0E4F;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.26); --dim:rgba(255,255,255,.7); --dimmer:rgba(255,255,255,.5);
  --c-planningbox:#4449F0; --t-planningbox:#8C8FFF; --i-planningbox:#3438D6;
  --c-pipe:#00E28B; --t-pipe:#00E28B; --i-pipe:#00966A;
  --c-taskbox:#FF7175; --t-taskbox:#FF7175; --i-taskbox:#D94449;
  --c-flowbox:#B3B0EE; --t-flowbox:#B3B0EE; --i-flowbox:#6A66C9;
  --p:var(--green); --pt:var(--green); --pi:var(--green-ink);
  --ancho:1240px; --gutter:24px; --radio:16px;
  --sec:clamp(80px,11vw,140px);
}
[data-producto=planningbox]{--p:var(--c-planningbox);--pt:var(--t-planningbox);--pi:var(--i-planningbox)}
[data-producto=pipe]{--p:var(--c-pipe);--pt:var(--t-pipe);--pi:var(--i-pipe)}
[data-producto=taskbox]{--p:var(--c-taskbox);--pt:var(--t-taskbox);--pi:var(--i-taskbox)}
[data-producto=flowbox]{--p:var(--c-flowbox);--pt:var(--t-flowbox);--pi:var(--i-flowbox)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:#fff;font:400 16px/1.7 'IBM Plex Mono',ui-monospace,monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--green);color:var(--navy);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.saltar:focus{top:12px}

.caja-ancho{width:100%;max-width:calc(var(--ancho) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec) 0;position:relative}
/* sección de acento: navy más claro con retícula y un brillo del color del producto; los bordes se funden con el navy */
.sec.tono::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(55% 60% at 88% 6%,color-mix(in srgb,var(--p) 15%,transparent),transparent 70%),
             linear-gradient(rgba(179,176,238,.055) 1px,transparent 1px) 0 0/44px 44px,
             linear-gradient(90deg,rgba(179,176,238,.055) 1px,transparent 1px) 0 0/44px 44px,var(--tono);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 110px,#000 calc(100% - 110px),transparent);
          mask-image:linear-gradient(180deg,transparent,#000 110px,#000 calc(100% - 110px),transparent)}
.sec.tono>*{position:relative;z-index:1}
/* el borde entre secciones se traza desde el centro cuando la sección entra, con un brillo del color del producto */
.sec.borde::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,color-mix(in srgb,var(--pt) 55%,transparent) 50%,var(--line-2) 82%,transparent)}
.sec.borde.on::after{transform:none}

/* ---------- tipografía ---------- */
.rot{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pt)}
.rot::before{content:"";width:10px;height:10px;background:currentColor;flex:none}
.h1{font-size:clamp(40px,6.4vw,86px);font-weight:600;line-height:1.04;letter-spacing:-.03em}
.h2{font-size:clamp(30px,4.2vw,54px);font-weight:600;line-height:1.1;letter-spacing:-.02em;margin-top:18px;max-width:22ch}
.h2.ancho{max-width:none}
.h3{font-size:clamp(20px,2vw,24px);font-weight:600;line-height:1.3}
.us{color:var(--pt)}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.65;color:var(--dim);max-width:62ch;margin-top:22px}
.suave{color:var(--dim)}
.nota{font-size:13px;color:var(--dimmer);margin-top:26px;max-width:80ch}
.cab-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:clamp(32px,5vw,72px);align-items:start;margin-bottom:56px}
/* el párrafo arranca a la altura del titular (la etiqueta mide ~27 px y el titular baja 18 px más), nunca por encima */
.cab-sec .lead{margin-top:44px;max-width:46ch}
@media (max-width:900px){.cab-sec{grid-template-columns:minmax(0,1fr)}.cab-sec .lead{margin-top:18px}}

/* wordmark de producto: Jost + caja, como el logo */
.wm{font-family:'Jost',sans-serif;font-weight:400;letter-spacing:.04em;display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap}
/* la caja mide como en el logo: 1,31 veces la altura de las minúsculas de Jost (0,46 em) y baja 0,08 em de la línea base */
.wm .caja{display:inline-block;width:.54em;height:.6em;margin:0 .03em;background:url(/assets/img/logo/caja.svg) center/contain no-repeat;transform:translateY(.08em)}
.wm.pipe{font-weight:500;letter-spacing:.1em}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;
     border:2px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn.prim{background:var(--green);color:var(--navy)}
.btn.prim:hover{background:#3df0a8}
.btn.sec2{border-color:var(--line-2);color:#fff;background:rgba(2,2,54,.35);backdrop-filter:blur(6px)}
.btn.sec2:hover{border-color:#fff}
.btn svg{width:18px;height:18px;flex:none}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.enlace{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--pt);border-bottom:2px solid transparent;transition:border-color .2s}
.enlace:hover{border-color:currentColor}

/* ---------- aviso SIFLOR ---------- */
.aviso{background:var(--green);color:var(--navy);font-size:13px;font-weight:600;letter-spacing:.04em;position:relative;z-index:60}
.aviso .caja-ancho{display:flex;align-items:center;justify-content:center;gap:14px;min-height:42px;text-align:center;padding-top:6px;padding-bottom:6px}
.aviso a{text-decoration:none;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.aviso b{background:var(--navy);color:var(--green);padding:2px 10px;border-radius:999px;font-size:11px;letter-spacing:.14em}
.aviso .cerrar{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:20px;line-height:1;padding:6px;color:var(--navy)}
.aviso.oculto{display:none}

/* ---------- navegación ---------- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.solida,.nav.siempre{background:rgba(2,2,54,.86);backdrop-filter:saturate(140%) blur(14px);border-color:var(--line)}
.nav .caja-ancho{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.nav .logo img{height:24px;width:auto}
.menu{display:flex;align-items:center;gap:6px}
.menu>li>a,.menu>li>button{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:10px;text-decoration:none;font-size:14px;font-weight:500;
                         background:none;border:0;cursor:pointer;color:var(--dim);transition:color .2s,background .2s}
.menu>li>a:hover,.menu>li>button:hover,.menu>li>a[aria-current]{color:#fff;background:rgba(255,255,255,.06)}
.menu .demo{margin-left:10px}
.menu .demo a{background:var(--green);color:var(--navy)!important;padding:10px 18px;border-radius:999px;font-weight:600}
.menu .demo a:hover{background:#3df0a8}
.prods{position:relative}
.prods>button svg{width:12px;transition:transform .2s}
.prods.abierto>button svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);width:min(640px,92vw);background:#0a0a40;border:1px solid var(--line-2);
      border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:0;visibility:hidden;transition:.2s;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.prods.abierto .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega a{display:flex;gap:14px;padding:14px;border-radius:12px;text-decoration:none;transition:background .2s}
.mega a:hover{background:rgba(255,255,255,.06)}
.mega .ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;background:color-mix(in srgb,var(--p) 16%,transparent);color:var(--pt)}
.mega .ico svg{width:26px;height:26px}
.mega b{display:block;font-size:15px}
.mega span{display:block;font-size:12.5px;line-height:1.5;color:var(--dim);margin-top:2px}
.mega .todo{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;border-radius:0 0 10px 10px;justify-content:space-between;font-size:13px;color:var(--dim)}
.hamb{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:10px;margin-right:-10px}
.hamb span{display:block;height:2px;background:#fff;margin:6px 0;transition:.25s}
.nav.menu-abierto .hamb span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.menu-abierto .hamb span:nth-child(2){opacity:0}
.nav.menu-abierto .hamb span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- héroe ---------- */
.heroe{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden;margin-top:-73px;padding-top:73px}
.heroe .fondo{position:absolute;inset:0;z-index:0}
.heroe .fondo img,.heroe .fondo video{width:100%;height:100%;object-fit:cover}
/* la foto es el primer cuadro del video y los dos se acercan juntos (empiezan a la vez, al pintarse la página): cuando el
   video aparece encima, empalma sin salto */
.heroe .fondo img,.p-heroe .fondo img,.heroe .fondo video,.p-heroe .fondo video{animation:acerca 30s ease-out both}
.fondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.fondo video.lista{opacity:1}
@keyframes acerca{from{transform:scale(1.12)}to{transform:scale(1)}}
.heroe .fondo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(2,2,54,.5) 0%,rgba(2,2,54,0) 24%,rgba(2,2,54,.12) 62%,var(--navy) 100%),
  linear-gradient(90deg,rgba(2,2,54,.9) 0%,rgba(2,2,54,.6) 36%,rgba(2,2,54,.1) 70%,rgba(2,2,54,0) 100%)}
@media (max-width:820px){.heroe .fondo::after{background:linear-gradient(180deg,rgba(2,2,54,.6) 0%,rgba(2,2,54,.4) 38%,rgba(2,2,54,.78) 72%,var(--navy) 100%)}}
.heroe .caja-ancho{position:relative;z-index:1;padding-top:clamp(40px,7vw,90px);padding-bottom:clamp(56px,8vw,96px)}
.heroe .h1{max-width:15ch;margin-top:22px}
.heroe .lead{color:rgba(255,255,255,.86);max-width:58ch}
.pruebas{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:16px 44px;margin-top:52px;padding-top:28px;border-top:1px solid var(--line-2);max-width:980px}
.pruebas div{font-size:13px;color:var(--dim);line-height:1.4}
.pruebas b{display:block;font-size:26px;color:#fff;font-weight:600;letter-spacing:-.01em}
.pixeles{position:absolute;display:grid;grid-template-columns:repeat(3,22px);gap:0;z-index:1}
.pixeles i{width:22px;height:22px;display:block}

/* ---------- la cadena (inicio) ---------- */
.cadena{position:relative;margin-top:10px}
.cadena svg.lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.cadena svg.lineas path{fill:none;stroke-width:2.5;stroke-linecap:round;transition:opacity .3s}
.cadena svg.lineas path.flujo{stroke-dasharray:2 12;animation:fluye 1.2s linear infinite}
.cadena svg.lineas path.ret{stroke-dasharray:1 10;stroke-width:2.5;animation:fluye 2.4s linear infinite}
@keyframes fluye{to{stroke-dashoffset:-28}}
.cad-grid{position:relative;z-index:1;display:grid;grid-template-columns:.62fr 1fr 1fr 1fr;grid-template-rows:auto auto auto;gap:18px 56px;align-items:center}
/* en la cadena cada caja ya es el enlace: sin "ver producto" y más compacta */
.cadena .nodo{padding:16px 18px 15px}
.cadena .nodo .ir{display:none}
.cadena .nodo .nom{font-size:20px;margin-top:6px}
.cadena .nodo p{font-size:13px;line-height:1.45;margin-top:6px}
.cad-entrada{grid-row:1/4;border:2px dashed var(--line-2);border-radius:14px;padding:20px;font-size:13px;color:var(--dim)}
.cad-entrada b{display:block;color:#fff;font-size:17px;line-height:1.35;margin-top:8px}
.nodo{position:relative;display:block;text-decoration:none;background:var(--card);border:2px solid color-mix(in srgb,var(--p) 55%,transparent);border-radius:var(--radio);
      padding:22px 22px 20px;transition:transform .25s,border-color .25s,box-shadow .25s,opacity .25s}
.nodo:hover,.nodo.on{transform:translateY(-4px);border-color:var(--p);box-shadow:0 24px 60px color-mix(in srgb,var(--p) 22%,transparent)}
.cadena.foco .nodo:not(.on){opacity:.45}
.nodo .paso{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pt)}
.nodo .nom{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;margin-top:10px}
.nodo .nom svg{width:30px;height:30px;color:var(--pt);flex:none}
.nodo .nom small{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--pt);align-self:flex-end;margin:0 0 3px -4px}
.nodo p{font-size:13.5px;line-height:1.55;color:var(--dim);margin-top:8px}
.nodo .tipo{position:absolute;top:-11px;left:16px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--navy);
            border:1px solid var(--line-2);color:var(--dim);padding:3px 10px;border-radius:999px;white-space:nowrap}
.nodo .ir{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;color:var(--pt);margin-top:14px}
/* Flowbox va en dos nodos: propagación (lo que planea PIPE) y producción de flor (lo que planea Planningbox) */
.n-pb{grid-column:2;grid-row:1/4}
.n-pipe{grid-column:3;grid-row:1}
.n-task{grid-column:3;grid-row:3}
.n-fprop{grid-column:4;grid-row:1}
.n-flow{grid-column:4;grid-row:2}
.cad-leyenda{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;font-size:12.5px;color:var(--dim)}
.cad-leyenda span{display:inline-flex;align-items:center;gap:10px}
.cad-leyenda i{width:26px;height:0;border-top:3px dotted currentColor;display:block}

/* ---------- tarjetas de producto ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.prod-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;
           transition:transform .3s,border-color .3s}
.prod-card:hover{transform:translateY(-6px);border-color:var(--p)}
.prod-card .foto{aspect-ratio:16/8;overflow:hidden;position:relative}
.prod-card .foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.prod-card:hover .foto img{transform:scale(1.05)}
.prod-card .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--card))}
.prod-card .cuerpo{padding:0 30px 30px;margin-top:-34px;position:relative;display:flex;flex-direction:column;flex:1}
.prod-card .wm{font-size:40px}
.prod-card .paso{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pt);margin-top:14px}
.prod-card p{color:var(--dim);margin-top:10px;font-size:15px}
.prod-card .dato{display:flex;align-items:baseline;gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.prod-card .dato b{white-space:nowrap;font-size:34px;font-weight:700;letter-spacing:-.03em;color:var(--pt);line-height:1}
.prod-card .dato>span{font-size:13px;color:var(--dim);line-height:1.4}
.prod-card .ir{margin-top:auto;padding-top:22px;font-weight:600;font-size:14px;color:var(--pt);display:flex;align-items:center;gap:8px}
.prod-card .sello{position:absolute;top:18px;right:18px;z-index:2;background:var(--navy);border:1px solid var(--green);color:var(--green);font-size:11px;font-weight:600;letter-spacing:.14em;padding:5px 12px;border-radius:999px}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.cifra{background:var(--navy);padding:34px 28px 30px}
.tono .cifra{background:var(--tono-2)}
.cifra .k{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pt);display:flex;align-items:center;gap:8px}
.cifra .k svg{width:18px;height:18px}
.cifra .v{font-size:clamp(40px,4.4vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:22px}
.tono .cifra .v{color:var(--pt)}
.cifra .v small{font-size:.5em;letter-spacing:-.02em}
.cifra .l{font-size:14px;line-height:1.5;margin-top:14px;color:var(--dim)}

/* ---------- pilares / tarjetas genéricas ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cifras.c3{grid-template-columns:repeat(3,1fr)}
.pasos.c4{grid-template-columns:repeat(4,1fr)}
.t{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:28px 28px 30px;position:relative}
.tono .t{background:var(--tono-2)}
.t .n{display:inline-flex;min-width:30px;height:30px;padding:0 8px;align-items:center;justify-content:center;background:var(--p);color:var(--navy);font-size:13px;font-weight:700;border-radius:7px;margin-bottom:20px}
[data-producto=planningbox] .t .n{color:#fff}
.t .ico{display:block;width:40px;height:40px;color:var(--pt);margin-bottom:18px}
.t .ico svg{width:100%;height:100%}
a.t{display:block;text-decoration:none;transition:transform .25s,border-color .25s}
a.t:hover{transform:translateY(-4px);border-color:var(--p)}
.t h3{font-size:18px;line-height:1.35;font-weight:600}
.t p{font-size:14.5px;line-height:1.6;color:var(--dim);margin-top:10px}
.t.acento{border-color:var(--p)}
.t .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.t .tags span{font-size:11.5px;letter-spacing:.06em;border:1px solid var(--line-2);padding:4px 10px;border-radius:999px;color:var(--dim)}

/* modelos vs software */
.dos{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:20px}
.dos .t{display:flex;gap:24px;align-items:flex-start}
.dos .marcas{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.dos .marcas span{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid}

/* ---------- implementación ---------- */
/* al aparecer, la línea avanza de paso en paso (2,4 s, lineal): cada paso se enciende cuando la línea lo alcanza
   (--i × 0,6 s) y el último, "en vivo", queda latiendo */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:p;position:relative}
.pasos::before,.pasos::after{content:"";position:absolute;left:0;right:0;top:15px;height:2px}
.pasos::before{background:var(--line)}
.pasos::after{background:linear-gradient(90deg,var(--green),var(--indigo));transform-origin:left;transform:scaleX(0);transition:transform 2.4s linear .3s}
.pasos.on::after{transform:none}
.paso-i{--i:0;position:relative;padding-right:24px}
.paso-i:nth-child(2){--i:1} .paso-i:nth-child(3){--i:2} .paso-i:nth-child(4){--i:3}
.paso-i::before{counter-increment:p;content:counter(p,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
                background:var(--navy);border:2px solid var(--line-2);font-size:12px;font-weight:700;color:var(--dim);position:relative;z-index:1;
                transition:background .35s,border-color .35s,color .35s;transition-delay:calc(.3s + var(--i)*.6s)}
.tono .paso-i::before{background:var(--tono)}
.pasos.on .paso-i::before{background:var(--green);border-color:var(--green);color:var(--navy);animation:toque .9s ease-out calc(.3s + var(--i)*.6s) backwards}
.paso-i:last-child::after{content:"";position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;border:2px solid var(--green);opacity:0;pointer-events:none}
.pasos.on .paso-i:last-child::after{animation:vivo 2.2s ease-out 2.4s infinite}
.paso-i h3,.paso-i p{transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.4s + var(--i)*.6s)}
.pasos.rev:not(.on) .paso-i h3,.pasos.rev:not(.on) .paso-i p{opacity:0;transform:translateY(12px)}
@keyframes toque{from{box-shadow:0 0 0 0 rgba(0,226,139,.7)}to{box-shadow:0 0 0 16px rgba(0,226,139,0)}}
@keyframes vivo{from{transform:scale(1);opacity:.9}to{transform:scale(2.3);opacity:0}}
.paso-i h3{font-size:16px;margin-top:22px}
.paso-i p{font-size:13.5px;line-height:1.6;color:var(--dim);margin-top:8px}

/* ---------- noticias / premio ---------- */
.premio{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;background:linear-gradient(135deg,#0d0c52,#050540);border:1px solid var(--line);border-radius:24px;padding:clamp(28px,4vw,56px);overflow:hidden;position:relative}
.premio .medalla{width:84px;height:84px;border-radius:50%;border:3px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--green);margin-bottom:26px}
.premio .h2{max-width:none;font-size:clamp(28px,3.2vw,42px)}
.premio .datos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.premio .datos div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:22px 18px}
.premio .datos b{display:block;font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.03em;color:var(--coral);line-height:1}
.premio .datos span{display:block;font-size:12.5px;line-height:1.45;color:var(--dim);margin-top:10px}
.noticias{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.noticias .t .fecha{font-size:11.5px;letter-spacing:.16em;color:var(--dimmer);text-transform:uppercase}
.noticias .t h3{margin-top:12px}

/* ---------- aliados ---------- */
.aliados{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.aliados .pista{display:flex;gap:20px;width:max-content;animation:desliza 40s linear infinite}
.aliados:hover .pista{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(calc(-50% - 10px))}}
.aliados .logo-a{width:190px;height:96px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:18px 26px;flex:none}
.aliados .logo-a img{max-height:56px;max-width:100%;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.82}

/* ---------- contacto ---------- */
.contacto{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,6vw,90px);align-items:start}
.canales{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.canal{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-color .2s,background .2s}
.canal:hover{border-color:var(--green);background:rgba(0,226,139,.05)}
.canal .ic{width:42px;height:42px;border-radius:10px;background:rgba(0,226,139,.12);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.canal .ic svg{width:22px;height:22px}
.canal b{display:block;font-size:14px}
.canal span{display:block;font-size:13px;color:var(--dim);overflow-wrap:anywhere}
.contacto>*,.partida>*,.grid2>*,.cab-sec>*{min-width:0}
.form{background:var(--card);border:1px solid var(--line-2);border-radius:22px;padding:clamp(24px,3vw,40px)}
.form .barra{display:flex;gap:8px;align-items:center;margin-bottom:26px;font-size:12px;color:var(--dimmer);letter-spacing:.12em}
.form .barra i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.form .barra i:nth-child(1){background:var(--coral)} .form .barra i:nth-child(2){background:var(--lav)} .form .barra i:nth-child(3){background:var(--green)}
.form .barra>span{margin-left:8px}
.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.campo label{font-size:13px;font-weight:600;color:var(--dim)}
.campo input,.campo select{background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;font-size:15px;outline:none;transition:border-color .2s,background .2s;width:100%}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.campo select option{background:var(--navy)}
.campo input:focus,.campo select:focus{border-color:var(--green);background:rgba(0,226,139,.05)}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .btn{width:100%;justify-content:center;margin-top:8px}
.form .legal{font-size:12px;color:var(--dimmer);margin-top:16px;line-height:1.55}
.form .gracias{display:none;text-align:center;padding:40px 10px}
.form.enviado form{display:none}
.form.enviado .gracias{display:block}
.form .gracias b{display:block;font-size:26px;margin:18px 0 10px}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--line);padding:70px 0 40px;background:#01012a}
.pie .cols{display:grid;grid-template-columns:1.6fr repeat(2,1fr);gap:40px}
.pie .logo img{height:26px}
.pie h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);font-weight:600;margin-bottom:16px}
.pie li{margin:8px 0}
.pie li a{text-decoration:none;color:var(--dim);font-size:14px}
.pie li a:hover{color:#fff}
.pie .firma{font-size:13px;color:var(--dim);margin-top:18px;max-width:34ch}
.pie .redes{display:flex;gap:10px;margin-top:22px}
.pie .redes a{width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;display:flex;align-items:center;justify-content:center}
.pie .redes a:hover{border-color:var(--green);color:var(--green)}
.pie .redes svg{width:18px;height:18px}
.pie .bajo{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dimmer)}
.pie .bajo .verde{color:var(--green)}

/* ---------- páginas de producto ---------- */
.p-heroe{position:relative;overflow:hidden;margin-top:-73px;padding:calc(73px + clamp(60px,9vw,120px)) 0 clamp(60px,8vw,100px)}
.p-heroe .fondo{position:absolute;inset:0;z-index:0}
.p-heroe .fondo img{width:100%;height:100%;object-fit:cover}
.p-heroe .fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,rgba(2,2,54,.9) 38%,rgba(2,2,54,.35) 75%,rgba(2,2,54,.55) 100%),linear-gradient(0deg,var(--navy),transparent 35%)}
.p-heroe .caja-ancho{position:relative;z-index:1}
.p-heroe .wm{font-size:clamp(56px,9vw,128px);margin-top:26px}
.p-heroe .linea{font-size:clamp(20px,2.2vw,28px);line-height:1.45;font-weight:500;max-width:30ch;margin-top:30px}
.p-heroe .lead{max-width:56ch}
.version{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--pt);color:var(--pt);padding:4px 12px;border-radius:999px;margin-left:16px;vertical-align:middle}
.migas{font-size:12.5px;color:var(--dimmer)}
.migas a{text-decoration:none;color:var(--dim)}
.migas a:hover{color:#fff}
.sello-f{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--green);border-radius:999px;padding:6px 18px 6px 6px;margin-top:26px;background:rgba(2,2,54,.5)}
.sello-f i{width:34px;height:34px;border-radius:50%;background:var(--green);color:var(--navy);font-style:normal;display:flex;align-items:center;justify-content:center;font-weight:700}
.sello-f span{font-size:12.5px;line-height:1.35;color:var(--dim)}
.sello-f b{display:block;color:var(--green);letter-spacing:.14em;font-size:11.5px}

.mini-cadena{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.mini-cadena a{flex:1 1 200px;display:flex;flex-direction:column;gap:6px;padding:22px 24px;text-decoration:none;border-right:1px solid var(--line);opacity:.55;transition:opacity .2s,background .2s;position:relative}
.mini-cadena a:last-child{border-right:0}
.mini-cadena a:hover{opacity:1;background:rgba(255,255,255,.03)}
.mini-cadena a.on{opacity:1;background:color-mix(in srgb,var(--p) 14%,transparent);box-shadow:inset 0 -3px 0 var(--p)}
.mini-cadena .paso{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pt)}
.mini-cadena b{display:flex;align-items:center;gap:10px;font-size:18px}
.mini-cadena b svg{width:24px;height:24px;color:var(--pt)}
.mini-cadena span{font-size:12.5px;color:var(--dim);line-height:1.45}

.flujo{display:grid;grid-template-columns:1fr 56px 1.1fr 56px 1fr;align-items:stretch;margin-top:10px}
.flujo .col{background:var(--card);border:1px solid var(--line);border-radius:var(--radio);padding:26px}
.flujo .col.mod{background:var(--navy);border:2px solid var(--p);box-shadow:0 24px 60px color-mix(in srgb,var(--p) 18%,transparent)}
.flujo .col .rot{font-size:11.5px;margin-bottom:14px}
.flujo .col .rot.gris{color:var(--dim)}
.flujo .col h3{font-size:17px;line-height:1.4;margin-bottom:12px}
.flujo .col li{font-size:14px;line-height:1.5;padding:7px 0 7px 22px;position:relative;color:rgba(255,255,255,.88)}
.flujo .col li::before{content:"";position:absolute;left:0;top:16px;width:10px;height:3px;background:var(--p)}
.flujo .fl{display:flex;align-items:center;justify-content:center;color:var(--pt)}
.flujo .fl svg{width:36px}

.partida{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.partida .foto{border-radius:22px;overflow:hidden;aspect-ratio:4/3.4}
.partida .foto img{width:100%;height:100%;object-fit:cover}
ul.raya li{padding:14px 0 14px 28px;position:relative;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55}
ul.raya li::before{content:"";position:absolute;left:0;top:25px;width:12px;height:3px;background:var(--p)}
ul.raya b{font-weight:600}

.graf{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(18px,3vw,34px)}
.graf svg{width:100%;height:auto}
.graf .leyenda{display:flex;gap:24px;flex-wrap:wrap;font-size:13px;margin-bottom:14px;color:var(--dim)}
.graf .leyenda span{display:inline-flex;align-items:center;gap:10px}
.graf .leyenda i{width:24px;height:3px;display:block}

.capt{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.capt img{width:100%}
figcaption{font-size:13px;color:var(--dim);margin-top:12px;line-height:1.5}

.casos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.caso{background:var(--tono-2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.caso .cab{background:rgba(0,226,139,.1);border-bottom:1px solid rgba(0,226,139,.3);padding:12px 18px;font-weight:600;font-size:15px;display:flex;justify-content:space-between}
.caso .cab span{font-size:11px;letter-spacing:.14em;color:var(--green)}
.caso .met{padding:12px 18px;border-bottom:1px solid var(--line)}
.caso .met:last-child{border:0}
.caso .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--dimmer)}
.caso .fila{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.caso .v{font-size:24px;font-weight:700;letter-spacing:-.02em}
.caso .d{font-size:13px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(0,226,139,.14);color:var(--green)}
.caso .d.mal{background:rgba(255,113,117,.14);color:var(--coral)}
.caso .a{font-size:12px;color:var(--dimmer)}


/* cierre de cada producto: el siguiente en la cadena y, al lado, una tarjeta compacta para agendar la demo */
.cierre{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:stretch}
.cierre>*{min-width:0}
.banda-cta{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;border-radius:22px;padding:clamp(24px,3vw,36px);
  background:linear-gradient(160deg,color-mix(in srgb,var(--green) 16%,var(--card)) 0%,var(--card) 65%);border:1px solid color-mix(in srgb,var(--green) 50%,transparent)}
.banda-cta .rot{color:var(--green)}
.banda-cta .h3{font-size:clamp(20px,1.9vw,25px);line-height:1.3;text-wrap:balance}
.banda-cta p{color:var(--dim);font-size:14.5px;line-height:1.6}
.banda-cta .btn{margin-top:8px}

.otros{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.otros a{text-decoration:none}

/* ---------- aparición al hacer scroll ---------- */
.rev{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none;filter:none!important}
  .heroe .fondo img,.p-heroe .fondo img,.fondo video,.aliados .pista,.cadena svg.lineas path{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .menu{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;background:rgba(2,2,54,.98);backdrop-filter:blur(14px);
        padding:14px var(--gutter) 28px;border-bottom:1px solid var(--line);max-height:calc(100vh - 72px);overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s}
  .nav.menu-abierto .menu{transform:none;opacity:1;visibility:visible}
  .menu>li>a,.menu>li>button{padding:14px 10px;font-size:16px;width:100%}
  .mega{position:static;transform:none;width:100%;opacity:1;visibility:visible;display:none;grid-template-columns:1fr;box-shadow:none;margin:4px 0 8px;background:rgba(255,255,255,.03)}
  .prods.abierto .mega{display:grid;transform:none}
  .menu .demo{margin:12px 0 0}
  .menu .demo a{justify-content:center}
  .hamb{display:block}
  .cad-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;gap:24px 18px;margin:0 18px}
  .cad-entrada{grid-column:1/-1;grid-row:auto}
  .n-pb{grid-column:1/-1;grid-row:auto}
  .n-pipe,.n-fprop{grid-column:1;grid-row:auto}
  .n-task,.n-flow{grid-column:2;grid-row:auto}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid5{grid-template-columns:repeat(3,1fr)}
  .pasos,.pasos.c4{grid-template-columns:1fr;gap:26px}
  .pasos::before,.pasos::after{left:15px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .pasos::after{background:linear-gradient(180deg,var(--green),var(--indigo));transform-origin:top;transform:scaleY(0)}
  .paso-i{padding:0 0 0 56px}
  .paso-i::before{position:absolute;left:0;top:0}
  .paso-i h3{margin-top:4px}
  .premio{grid-template-columns:1fr}
  .casos{grid-template-columns:repeat(2,1fr)}
  .pie .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--gutter:16px}
  .pruebas{grid-template-columns:1fr 1fr}
  .prod-grid,.grid2,.grid3,.noticias,.contacto,.partida,.dos,.otros{grid-template-columns:1fr}
  .grid5{grid-template-columns:1fr 1fr}
  .cifras.c3{grid-template-columns:1fr}
  .flujo{grid-template-columns:1fr}
  .flujo .fl{height:44px}
  .flujo .fl svg{transform:rotate(90deg)}
  .premio .datos{grid-template-columns:1fr}
  .heroe{min-height:88vh}
}
@media (max-width:560px){
  .cifras,.cifras.c3,.grid4,.grid5,.casos{grid-template-columns:1fr}
  .fila2{grid-template-columns:1fr}
  .aviso{font-size:12px}
  .aviso .caja-ancho{padding-right:40px}
  .btns .btn{width:100%;justify-content:center}
  .btn{white-space:normal;text-align:center}
}

/* ---------- mejoras: logos bajo el héroe, video, 4 → 1, preguntas, WhatsApp ---------- */
.logos-tira{padding:34px 0 42px;border-bottom:1px solid var(--line)}
.logos-tira .caja-ancho{margin-bottom:22px}
.logos-tira .rot{color:var(--dim)}
.logos-tira .logo-a{width:170px;height:80px;padding:14px 22px}
.logos-tira .logo-a img{max-height:46px}
.video-premio{margin:0}
.video-premio video{width:100%;aspect-ratio:16/9;border-radius:16px;border:1px solid var(--line-2);background:#000;display:block}
.video-premio figcaption{font-size:12.5px}
.premio{grid-template-columns:1fr 1.05fr}
/* cuatro decisiones (Taskbox): hoy se toman una tras otra; con Taskbox, todas a la vez dentro de un modelo.
   Los nodos y las relaciones se ubican en % del marco; las líneas usan el mismo sistema (viewBox 0-100, sin proporción). */
.cuatro{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,4vw,56px);align-items:start}
.cuatro .rot{display:block;margin-bottom:16px}
.pasos-hoy{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:30px}
.pasos-hoy li{position:relative;padding:14px 20px;border:1.5px dashed rgba(255,255,255,.3);border-radius:12px;font-size:16px;color:var(--dim)}
.pasos-hoy li+li::before{content:"↓";position:absolute;left:50%;top:-26px;transform:translateX(-50%);color:rgba(255,255,255,.4);font-size:15px}
.av-hoy p{font-size:14px;line-height:1.6;color:var(--dim);margin-top:18px}
.av-m{position:relative;aspect-ratio:1.85;border:2px solid var(--p);border-radius:22px;background:rgba(255,113,117,.06)}
.av-m .lin{position:absolute;inset:0;width:100%;height:100%}
.av-m .lin path{fill:none;stroke:#00E28B;stroke-width:2;stroke-opacity:.6;vector-effect:non-scaling-stroke}
.av-m .lin.movil{display:none}
.av-m .d{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--card);border:2px solid rgba(179,176,238,.5);border-radius:12px;font-size:clamp(13px,1.25vw,16px);font-weight:600;white-space:nowrap}
.av-m .d i{font-style:normal;font-size:12px;color:var(--lav)}
.av-m .d1{left:19%;top:22%} .av-m .d2{left:81%;top:22%} .av-m .d3{left:19%;top:78%} .av-m .d4{left:81%;top:78%}
.av-m .rel{position:absolute;transform:translate(-50%,-50%);padding:5px 10px;background:var(--navy);border-radius:8px;font-size:12px;line-height:1.4;text-align:center;white-space:nowrap}
.av-m .r1{left:46%;top:22%} .av-m .r2{left:19%;top:50%} .av-m .r3{left:81%;top:50%} .av-m .r4{left:50%;top:78%}
.av-m .nucleo{position:absolute;left:50%;top:50%;width:clamp(130px,15vw,180px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--green);color:var(--navy);
              display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 0 10px rgba(0,226,139,.14)}
.av-m .nucleo span{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.av-m .nucleo b{font-size:clamp(17px,1.9vw,23px);line-height:1.15;margin:6px 0}
.av-nota{display:none;font-size:14px;line-height:1.6;color:var(--dim);margin-top:16px}
@media (max-width:1000px){.cuatro{grid-template-columns:1fr}.pasos-hoy{flex-direction:row;flex-wrap:wrap;gap:12px 30px}.pasos-hoy li+li::before{content:"→";left:-22px;top:50%;transform:translateY(-50%)}}
@media (max-width:640px){
  .av-hoy{display:none}
  .av-m{aspect-ratio:.95}
  .av-m .lin.esc,.av-m .rel{display:none}
  .av-m .lin.movil{display:block}
  .av-m .d{white-space:normal;width:max-content;max-width:44%;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;font-size:13px;line-height:1.3}
  .av-m .d1{left:27%;top:12%} .av-m .d2{left:73%;top:12%} .av-m .d3{left:27%;top:88%} .av-m .d4{left:73%;top:88%}
  .av-m .nucleo{width:46%}
  .av-nota{display:block}
}
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(32px,5vw,80px);align-items:start}
.faq-i{border-bottom:1px solid var(--line)}
.faq-i:first-child{border-top:1px solid var(--line)}
.faq-i summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:600;font-size:16.5px;line-height:1.45}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";font-size:24px;line-height:1;color:var(--pt);flex:none;transition:transform .2s}
.faq-i[open] summary::after{transform:rotate(45deg)}
.faq-i p{color:var(--dim);font-size:15px;line-height:1.7;padding:0 0 22px;max-width:68ch}
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:10px;background:#25D366;color:#04210f;text-decoration:none;
             font-weight:700;font-size:14px;padding:12px 18px 12px 14px;border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.4);transition:transform .2s}
.wa-flotante:hover{transform:translateY(-3px)}
.wa-flotante{transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.wa-flotante.apartado,body.cine .wa-flotante{transform:translateY(160%);opacity:0;pointer-events:none}
.wa-flotante svg{width:24px;height:24px}
.cadena svg.lineas path.banda{stroke-width:14;stroke-opacity:.13;stroke-dasharray:1 2;animation:none}
@media (max-width:1080px){.premio{grid-template-columns:1fr}}
@media (max-width:820px){
  .faq{grid-template-columns:1fr}
}
@media (max-width:560px){.wa-flotante span{display:none}.wa-flotante{padding:14px}}

/* ---------- móvil: páginas más cortas ----------
   En pantallas angostas los grupos de tarjetas (.riel) se deslizan de lado, con puntos que marcan dónde vas;
   la cadena queda como diagrama compacto y se recortan espacios. */
.sep{margin-top:clamp(40px,6vw,80px)}
.riel-puntos{display:none}
@media (max-width:820px){
  .riel{display:flex!important;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
        margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter));padding:6px var(--gutter) 10px;scroll-padding-inline:var(--gutter)}
  .riel::-webkit-scrollbar{display:none}
  .riel>*{flex:0 0 min(84%,380px);scroll-snap-align:start;min-width:0}
  .riel>.rev{opacity:1;transform:none;transition:none}
  .riel>.fl{display:none}
  .riel .col.mod{box-shadow:none}
  .riel-puntos{display:flex;justify-content:center;gap:7px;margin-top:12px}
  .riel-puntos i{width:6px;height:6px;border-radius:6px;background:var(--line-2);transition:width .25s,background .25s}
  .riel-puntos i.on{width:22px;background:var(--pt)}
  .cierre{grid-template-columns:1fr}
  .cierre .banda-cta{display:none}
  .partida .foto{aspect-ratio:16/10}
}
@media (max-width:560px){
  :root{--sec:56px}
  .cab-sec{margin-bottom:26px}
  .cab-sec .lead{margin-top:12px}
  .lead{font-size:16px;margin-top:14px}
  .btns{margin-top:26px}
  .h2{margin-top:14px}
  .t{padding:22px 20px 24px}
  .t .ico{width:34px;height:34px;margin-bottom:14px}
  .t .n{margin-bottom:14px}
  ul.raya li{padding:11px 0 11px 26px;font-size:14.5px}
  ul.raya li::before{top:22px}
  .nota{margin-top:18px}

  /* héroes */
  .heroe .caja-ancho{padding-bottom:40px}
  .pruebas{margin-top:30px;padding-top:20px;gap:14px 20px}
  .pruebas b{font-size:21px}
  .p-heroe{padding:calc(73px + 40px) 0 44px}
  .p-heroe .linea{margin-top:20px}
  .sello-f{margin-top:20px}

  /* logos */
  .logos-tira{padding:24px 0 28px}
  .logos-tira .caja-ancho{margin-bottom:16px}
  .logos-tira .logo-a{width:132px;height:62px;padding:12px 18px}
  .logos-tira .logo-a img{max-height:36px}

  /* la cadena: diagrama compacto, PIPE y Taskbox lado a lado; el detalle está en las tarjetas de producto */
  .cad-grid{gap:20px 12px}
  .cad-entrada{padding:14px 16px;font-size:12px}
  .cad-entrada b{font-size:16px;margin-top:4px}
  .nodo{padding:14px}
  .nodo .tipo,.nodo p,.nodo .ir{display:none}
  .nodo .paso{display:block;font-size:10px;letter-spacing:.1em;line-height:1.45}
  .nodo .nom{font-size:18px;margin-top:6px;gap:2px 8px;flex-wrap:wrap}
  .nodo .nom small{flex-basis:100%;margin:0;font-size:11px}
  .nodo .nom svg{width:22px;height:22px}
  .cad-leyenda{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:24px;font-size:11.5px;line-height:1.4}
  .cad-leyenda span:last-child{grid-column:1/-1}
  .mini-cadena{display:grid;grid-template-columns:1fr 1fr}
  .mini-cadena a{padding:14px 16px;border-bottom:1px solid var(--line)}
  .mini-cadena a:nth-child(2n){border-right:0}
  .mini-cadena a:nth-child(n+3){border-bottom:0}
  .mini-cadena a>span:last-child{display:none}
  .mini-cadena b{font-size:16px}

  /* tarjetas de producto */
  .prod-card .cuerpo{padding:0 20px 22px}
  .prod-card .wm{font-size:34px}
  .prod-card p{font-size:14px}
  .prod-card .dato{margin-top:16px;padding-top:14px}
  .prod-card .dato b{font-size:24px}
  .prod-card .ir{padding-top:16px}

  /* cifras: una fila por cifra, el número a la izquierda */
  .cifra{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:18px;padding:18px 20px}
  .cifra .k{grid-column:1/-1;margin-bottom:10px}
  .cifra .v{font-size:40px;margin-top:0}
  .cifra .l{margin-top:0;font-size:13px}

  .flujo .col{padding:22px 20px}
  .pasos,.pasos.c4{gap:20px}
  .paso-i p{margin-top:4px}
  .premio{padding:24px 20px;gap:28px;border-radius:20px}
  .premio .medalla{width:52px;height:52px;font-size:24px;border-width:2px;margin-bottom:16px}
  .noticias{margin-top:16px}
  .faq-i summary{padding:18px 0;font-size:15.5px}

  /* contacto: los canales en una fila de tres */
  .contacto{gap:28px}
  .canales{flex-direction:row;gap:8px;margin-top:24px}
  .canal{flex:1 1 0;flex-direction:column;justify-content:center;gap:8px;padding:14px 6px;text-align:center}
  .canal>span:last-child>span{display:none}
  .canal b{font-size:13px}
  .form{padding:22px 18px}
  .form .barra{margin-bottom:18px}
  .campo{margin-bottom:14px}

  /* pie: marca arriba, Productos y Silverbox lado a lado */
  .pie{padding:44px 0 28px}
  .pie .cols{grid-template-columns:1fr 1fr;gap:28px 20px}
  .pie .cols>div:first-child{grid-column:1/-1}
  .pie .bajo{margin-top:32px}
}

/* íconos de los brochures anteriores (src/assets/img/iconos, Material Symbols): se pintan con el color del producto */
.mi{display:block;flex:none;width:44px;height:44px;background:var(--pt);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.problemas .t{padding:24px 22px 26px}
.problemas .mi{margin-bottom:18px}
.problemas .t p{font-size:13.5px}
.cifra .k .mi{width:20px;height:20px}
/* rangos: los dos extremos con su unidad y del mismo tamaño */
.cifra .v.rango{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.03em}
@media (min-width:821px){.otros.c2{grid-template-columns:repeat(2,1fr)}}
.red-gen #red svg{display:block;width:100%;height:auto;overflow:visible;font-family:'IBM Plex Mono',monospace}
.red-gen #red{max-width:1180px;margin:0 auto}
.red-gen #red.v{max-width:440px}

/* ---------- animaciones de entrada ----------
   Todo arranca cuando el bloque recibe .on (sitio.js, al entrar en pantalla); lo que ya se veía al llegar (tarjetas de
   los rieles en móvil) recibe además .ya y no se anima. Con prefers-reduced-motion nada de esto se mueve. */
@keyframes asoma{from{opacity:0}}
@keyframes sube{from{opacity:0;transform:translateY(22px)}}
@keyframes asoma-izq{from{opacity:0;transform:translateX(-12px)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes traza{from{stroke-dashoffset:1.05}to{stroke-dashoffset:0}}
@keyframes telon{from{clip-path:inset(100% 0 0 0)}}
@keyframes telon-lado{from{clip-path:inset(0 100% 0 0)}}
@keyframes escanea{from{clip-path:inset(0 0 100% 0)}}
@keyframes barrido{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes gira{from{opacity:0;transform:translateY(.08em) rotate(-200deg) scale(0)}}
@keyframes parpadea{50%{opacity:0}}
.ya,.ya *{animation:none!important}

/* tipeo: las letras guardan su espacio; el cursor _ va detrás de la última escrita */
.tipeando .k{opacity:0;position:relative}
.tipeando .k.on{opacity:1}
.tipeando .k.cur::after{content:"_";position:absolute;left:100%;top:0;color:var(--pt)}
.us.parpadea{animation:parpadea 1.1s steps(1) infinite}

/* titulares: cada palabra sube desde detrás de su línea */
.pal{display:inline-block;vertical-align:top;overflow:hidden;padding:.12em 0 .16em;margin:-.12em 0 -.16em}
.pal>span{display:inline-block;transform:translateY(115%);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0s) + .1s + var(--i)*50ms)}
.on .pal>span{transform:none}
.ya .pal>span{transition:none}

/* cifras: el número guarda su ancho final mientras cuenta; una línea del color del producto barre cada celda */
.num{display:inline-block;text-align:right}
.cifra{position:relative}
.cifra::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--pt);transform-origin:left;transform:scaleX(0);opacity:0;pointer-events:none}
.cifras.on .cifra{animation:asoma .8s ease calc(var(--i)*.12s) backwards}
.cifras.on .cifra::before{animation:barre-cifra 1.6s cubic-bezier(.16,1,.3,1) calc(.15s + var(--i)*.12s)}
@keyframes barre-cifra{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* tarjetas: en escritorio llegan desenfocadas y se enfocan; números e íconos aparecen después */
@media (min-width:821px){
  .t.rev:not(a){filter:blur(8px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s;transition-delay:var(--d,0s)}
  .t.rev.on:not(a){filter:none}
}
.t.on .n,.on .mi{animation:pop .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + .3s) backwards}
svg.trazo :is(path,rect,circle,line,polyline){stroke-dasharray:1 2}
.rev:not(.on) svg.trazo :is(path,rect,circle,line,polyline){stroke-dashoffset:1.05}
.on svg.trazo :is(path,rect,circle,line,polyline){animation:traza 1.2s cubic-bezier(.5,0,.2,1) calc(var(--d,0s) + .2s) backwards}

/* gráficas: cada serie se traza de izquierda a derecha y el área aparece debajo */
.graf polyline[pathLength]{stroke-dasharray:1 2}
.graf.rev:not(.on) polyline[pathLength]{stroke-dashoffset:1.05}
.graf.on polyline[pathLength]{animation:traza 1.8s cubic-bezier(.45,0,.2,1) calc(var(--d,0s) + .25s + var(--s,0)*.35s) backwards}
.graf.rev:not(.on) polygon{opacity:0}
.graf.on polygon{animation:asoma 1.2s ease calc(var(--d,0s) + .9s) backwards}

/* la cadena se arma en orden: entrada, Planningbox, PIPE y Taskbox, las dos Flowbox; cada línea se traza desde su
   nodo de origen (--dl, sitio.js), luego aparecen el punteado y los paquetes; el retorno de datos va de último */
.cadena .cad-entrada,.cadena .nodo{--o:0}
.cadena .n-pb{--o:1} .cadena .n-pipe,.cadena .n-task{--o:2} .cadena .n-fprop,.cadena .n-flow{--o:3}
.cadena.on .cad-entrada,.cadena.on .nodo{animation:nodo .7s cubic-bezier(.2,.9,.3,1.15) calc(var(--o)*.4s) backwards}
@keyframes nodo{from{opacity:0;transform:translateY(18px) scale(.94)}}
.cadena.on svg.lineas path.banda{animation:traza .6s ease-out var(--dl) backwards}
.cadena.on svg.lineas path.flujo{animation:fluye 1.2s linear infinite,asoma .5s ease-out calc(var(--dl) + .4s) backwards}
.cadena.on svg.lineas path.ret{animation:fluye 2.4s linear infinite,asoma .8s ease-out var(--dl) backwards}
.cadena.on svg.lineas circle{animation:asoma .4s ease-out calc(var(--dl) + .5s) backwards}
/* ya armada: si la cadena se vuelve a dibujar (cambio de tamaño) no repite la entrada */
.cadena.trazada svg.lineas path.banda,.cadena.trazada svg.lineas circle{animation:none}
.cadena.trazada svg.lineas path.flujo{animation:fluye 1.2s linear infinite}
.cadena.trazada svg.lineas path.ret{animation:fluye 2.4s linear infinite}

/* insumos → modelo → entrega: columna por columna, con sus puntos en cascada y un pulso en el modelo */
.flujo.on>*,.lazo.on>*{animation:sube .7s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.15s) backwards}
.flujo.on .col li{animation:asoma-izq .5s ease-out calc(var(--i)*.15s + .3s + var(--j)*.07s) backwards}
.flujo.on .fl svg,.lazo.on .fl svg{animation:asoma-izq .8s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.15s + .1s) backwards}
.flujo.on .col.mod{animation:sube .7s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.15s) backwards,brilla 1.6s ease-out calc(var(--i)*.15s + .6s)}
@keyframes brilla{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 55%,transparent)}to{box-shadow:0 0 0 24px transparent}}

/* cuatro decisiones: bajan los pasos de hoy; en el modelo aparecen las cuatro, se trazan las relaciones y al final el núcleo */
@keyframes av-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
.on .pasos-hoy li{animation:asoma .5s ease backwards}
.on .pasos-hoy li:nth-child(2){animation-delay:.12s} .on .pasos-hoy li:nth-child(3){animation-delay:.24s} .on .pasos-hoy li:nth-child(4){animation-delay:.36s}
.on .av-m .d{animation:av-pop .55s cubic-bezier(.3,1.5,.5,1) .5s backwards}
.on .av-m .lin{animation:asoma .8s ease .8s backwards}
.on .av-m .rel{animation:av-pop .5s ease 1.5s backwards}
.on .av-m .nucleo{animation:av-pop .8s cubic-bezier(.3,1.4,.5,1) 1.2s backwards}
@keyframes uno{from{opacity:0;transform:scale(.85)}}

/* mini-cadena, casos, teléfonos, recorrido de Flowbox, pruebas del héroe y formulario: uno tras otro */
.on .mini-cadena a{animation:sube .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.1s) backwards}
.on .mini-cadena a.on{animation:sube .6s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.1s) backwards,subraya .7s ease calc(var(--i)*.1s + .5s) backwards}
@keyframes subraya{from{box-shadow:inset 0 0 0 var(--p)}}
.casos.on .caso{animation:sube .7s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.1s) backwards}
.moviles.on figure{animation:sube .8s cubic-bezier(.2,.8,.2,1) calc(.2s + var(--i)*.14s) backwards}
.version-c.on .recorrido span{animation:pop .4s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0s) + .6s + var(--i)*.07s) backwards}
.pruebas.on>div{animation:sube .7s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + var(--i)*.1s) backwards}
.form.on form>*{animation:sube .6s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i)*.07s) backwards}

/* fotos: telón que sube (tarjetas) o corre de lado (fotos sueltas) mientras la imagen se acerca; las capturas se
   "cargan" de arriba abajo; la caja del wordmark gira al llegar */
.prod-card.on .foto,.version-c.on .foto{animation:telon 1.1s cubic-bezier(.7,0,.2,1) calc(var(--d,0s) + .1s) backwards}
.prod-card.on .foto img,.version-c.on .foto img,.partida .foto.on img{animation:acerca 1.8s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .1s) backwards}
.partida .foto.on{animation:telon-lado 1.1s cubic-bezier(.7,0,.2,1) calc(var(--d,0s) + .1s) backwards}
.rev.on .capt-w img{animation:escanea 1.3s cubic-bezier(.7,0,.2,1) calc(var(--d,0s) + .15s) backwards}
.prod-card.on .wm .caja,.p-heroe .wm.on .caja{animation:gira .9s cubic-bezier(.3,1.4,.5,1) calc(var(--d,0s) + .55s) backwards}
.prod-card.on .sello{animation:pop .6s cubic-bezier(.3,1.6,.5,1) calc(var(--d,0s) + 1s) backwards}

/* premio y banda de llamado: la medalla gira y late, y un brillo cruza el bloque */
.premio::after,.banda-cta::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-100%)}
.premio::after{background:linear-gradient(100deg,transparent 30%,rgba(0,226,139,.12) 47%,rgba(255,255,255,.1) 50%,transparent 70%)}
.banda-cta::after{background:linear-gradient(100deg,transparent 30%,rgba(0,226,139,.14) 48%,rgba(255,255,255,.1) 50%,transparent 70%)}
.premio.on::after{animation:barrido 1.6s cubic-bezier(.5,0,.3,1) .4s}
.banda-cta.on::after{animation:barrido 1.4s cubic-bezier(.5,0,.3,1) .5s}
.premio.on .medalla{animation:medalla 1s cubic-bezier(.3,1.5,.5,1) .2s backwards,toque 1.2s ease-out 1.1s}
@keyframes medalla{from{opacity:0;transform:scale(.3) rotate(-120deg)}}

/* un brillo del color del producto sigue al puntero sobre las tarjetas (--mx/--my, sitio.js) */
@media (hover:hover){
  a.t,.tono a.t,.prod-card,.siguiente{background-image:radial-gradient(380px circle at var(--mx,50%) var(--my,-400px),color-mix(in srgb,var(--p) 14%,transparent),transparent 70%)}
}

/* héroes: al bajar, el fondo se queda atrás (paralaje) y el texto sube un poco más rápido; nada se vuelve transparente:
   al regresar sin llegar arriba del todo, el texto quedaba a medio desvanecer */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .heroe .fondo,.p-heroe .fondo{animation:paralaje linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .heroe>.caja-ancho,.p-heroe>.caja-ancho{animation:alejarse linear both;animation-timeline:scroll(root);animation-range:0 80vh}
  }
}
@keyframes paralaje{to{transform:translateY(16%) scale(1.04)}}
@keyframes alejarse{to{transform:translateY(-50px)}}

/* ---------- de una página a otra (View Transitions entre documentos) ----------
   La página sale hacia arriba y, ya ida, la nueva entra desde abajo (pasando por el navy: nunca se ven las dos a medias
   una sobre otra); el menú, el aviso y WhatsApp se quedan quietos, y el wordmark de la tarjeta (sitio.js le pone el
   nombre al hacer clic) viaja hasta el héroe del producto. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.nav{view-transition-name:nav}
.aviso{view-transition-name:aviso}
.wa-flotante{view-transition-name:wa}
.p-heroe .wm{view-transition-name:marca}
::view-transition-old(root){animation:vt-sale .24s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-entra .5s cubic-bezier(0,0,.2,1) .2s both}
::view-transition-group(marca){animation-duration:.65s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes vt-sale{to{opacity:0;transform:translateY(-28px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(36px)}}
/* durante la transición el héroe nuevo ya se ve, para que el wordmark llegue a algo visible */
@supports selector(:active-view-transition){
  html:active-view-transition .p-heroe .rev{opacity:1;transform:none;transition:none}
}

/* ---------- ronda de mejoras del 4-nov-2026 (decisiones del equipo) ---------- */
@keyframes aparece{to{opacity:1}}
@media (max-width:560px){.solo-esc{display:none}}   /* frases que en el celular se omiten para acortar */

/* navegación: progreso de lectura en productos, índice de secciones y sección actual del inicio */
.nav .progreso{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--pt);transform-origin:left;transform:scaleX(0);pointer-events:none}
.indice{position:sticky;top:73px;z-index:45;background:rgba(2,2,54,.9);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.indice .caja-ancho{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.indice .caja-ancho::-webkit-scrollbar{display:none}
.indice a{flex:none;font-size:12.5px;font-weight:500;color:var(--dim);text-decoration:none;padding:6px 13px;border-radius:999px;border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.indice a:hover{color:#fff;border-color:var(--line-2)}
.indice a.on{color:var(--navy);background:var(--pt);border-color:var(--pt)}
[data-indice],#contacto{scroll-margin-top:126px}
.menu>li>a.activo{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 -2px 0 var(--green)}
@media (max-width:1080px){
  .nav.menu-abierto .menu>li{animation:sube .45s cubic-bezier(.2,.8,.2,1) backwards}
  .nav.menu-abierto .menu>li:nth-child(2){animation-delay:.04s} .nav.menu-abierto .menu>li:nth-child(3){animation-delay:.08s}
  .nav.menu-abierto .menu>li:nth-child(4){animation-delay:.12s} .nav.menu-abierto .menu>li:nth-child(5){animation-delay:.16s}
  .nav.menu-abierto .menu>li:nth-child(6){animation-delay:.2s}
  .menu .demo{position:sticky;bottom:-28px;margin-top:auto;padding:16px 0 4px;background:linear-gradient(rgba(2,2,54,0),rgba(2,2,54,.98) 35%)}
  .mega a{border-left:3px solid color-mix(in srgb,var(--p) 70%,transparent);border-radius:0 12px 12px 0}
}

/* héroe del inicio: consola con la cadena encendiéndose (solo escritorio, sin cifras) */
.consola{display:none}
@media (min-width:1081px){
  .consola{display:block;position:absolute;right:var(--gutter);bottom:calc(clamp(56px,8vw,96px) + 128px);width:min(360px,30vw);background:rgba(2,2,54,.58);backdrop-filter:blur(10px);
           border:1px solid var(--line-2);border-radius:14px;padding:14px 18px 16px;font-size:13px;animation:sube .7s cubic-bezier(.2,.8,.2,1) 2.1s backwards}
}
.consola .barra,.consola-404 .barra{display:flex;gap:7px;align-items:center;font-size:11px;letter-spacing:.12em;color:var(--dimmer);margin-bottom:12px}
.consola .barra i,.consola-404 .barra i{width:9px;height:9px;border-radius:50%;background:var(--coral)}
.consola .barra i:nth-child(2),.consola-404 .barra i:nth-child(2){background:var(--lav)} .consola .barra i:nth-child(3),.consola-404 .barra i:nth-child(3){background:var(--green)}
.consola .barra span,.consola-404 .barra span{margin-left:6px}
.consola ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.consola li{--i:0;display:flex;align-items:baseline;gap:10px;opacity:0;animation:aparece .01s linear calc(2.6s + var(--i)*.45s) forwards}
.consola li:nth-child(2){--i:1} .consola li:nth-child(3){--i:2} .consola li:nth-child(4){--i:3}
.consola li::before{content:"›";color:var(--dimmer)}
.consola li b{color:var(--c);font-weight:600}
.consola li span{flex:1;display:flex;gap:8px;color:var(--dim)}
.consola li span::before{content:"";flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-4px)}
.consola li::after{content:"";flex:none;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--c);animation:senal 2.8s ease-out calc(4.6s + var(--i)*.7s) infinite}
@keyframes senal{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 75%,transparent)}35%,100%{box-shadow:0 0 0 8px transparent}}
.consola .cursor{margin:10px 0 0;color:var(--green);animation:parpadea 1.1s steps(1) infinite}

/* la cadena: la leyenda filtra; en el celular, el recorrido escribe qué hace cada producto */
.cad-leyenda button{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:999px;padding:4px 10px;margin:-4px -10px;font:inherit;cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.cad-leyenda button:hover{border-color:currentColor}
.cad-leyenda button[aria-pressed="true"]{border-color:currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}
.cad-tour{min-height:3.4em;margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--dim)}
.cad-tour b{color:#fff}
@media (hover:hover){.cad-tour{display:none}}

/* tarjetas de producto: el clip reemplaza la foto con el cursor encima; las cifras llevan a cómo se midieron */
.prod-card .foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.prod-card.video-on .foto video{opacity:1}
.cifra .ver{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--pt);text-decoration:none;opacity:.8;transition:opacity .2s}
.cifra .ver:hover{opacity:1;text-decoration:underline}
.cifra .ver svg{width:14px;height:14px}
@media (max-width:560px){.cifra .ver{grid-column:1/-1;margin-top:8px}}

/* nosotros: tres saberes que se cruzan, con Silverbox al centro y la mejora continua alrededor */
.saberes{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.venn{margin:0;width:100%;max-width:440px;justify-self:center}
.venn svg{width:100%;height:auto;overflow:visible}
.venn .c{stroke-width:2;mix-blend-mode:screen}
.venn .c1{fill:rgba(140,143,255,.2);stroke:#8C8FFF} .venn .c2{fill:rgba(179,176,238,.18);stroke:#B3B0EE} .venn .c3{fill:rgba(0,226,139,.16);stroke:#00E28B}
.venn .l{font:600 13px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;text-anchor:middle}
.venn .l1{fill:#8C8FFF} .venn .l2{fill:#B3B0EE} .venn .l3{fill:#00E28B}
.venn .giro{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:3 9;transform-origin:220px 205px;animation:giro-l 60s linear infinite}
.venn .giro-t{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.32em;text-transform:uppercase;fill:var(--dimmer)}
.venn .centro{transform-box:fill-box;transform-origin:center}
@keyframes giro-l{to{transform:rotate(360deg)}}
.venn.on .c1{animation:venn-1 1.1s cubic-bezier(.2,.8,.2,1) .1s backwards} .venn.on .c2{animation:venn-2 1.1s cubic-bezier(.2,.8,.2,1) .2s backwards}
.venn.on .c3{animation:venn-3 1.1s cubic-bezier(.2,.8,.2,1) .3s backwards}
@keyframes venn-1{from{opacity:0;transform:translate(-46px,-30px)}} @keyframes venn-2{from{opacity:0;transform:translate(46px,-30px)}} @keyframes venn-3{from{opacity:0;transform:translate(0,48px)}}
.venn.on .l{animation:asoma .6s ease 1s backwards}
.venn.on .centro{animation:pop .7s cubic-bezier(.3,1.5,.5,1) 1.15s backwards}
.saberes-l{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.saberes-l .t{display:flex;gap:16px;align-items:flex-start;padding:18px 20px}
.saberes-l .t .ico{width:30px;height:30px;margin:2px 0 0;flex:none}
.saberes-l h3{font-size:16px}
.saberes-l p{font-size:13.5px;margin-top:4px}
@media (max-width:820px){.saberes{grid-template-columns:1fr;gap:18px}.venn{max-width:280px}}

/* premio: en el celular, el video primero; portada propia con play y modo cine */
@media (max-width:820px){.premio>div:last-child{order:-1}}
.marco-video{position:relative;border-radius:16px}
.marco-video.en-cine{z-index:70}
.video-premio .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;background:rgba(2,2,54,.74);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);border-radius:999px;padding:9px 22px 9px 9px;cursor:pointer;color:#fff;text-align:left;font-size:12.5px;line-height:1.35;white-space:nowrap;transition:background .2s}
.video-premio .play:hover{background:rgba(2,2,54,.9)}
.video-premio .play b{display:block;font-size:15px}
.video-premio .play .ic{width:50px;height:50px;border-radius:50%;background:var(--green);color:var(--navy);display:flex;align-items:center;justify-content:center;flex:none;animation:latido 2.4s ease-out infinite;transition:transform .2s}
.video-premio .play:hover .ic{transform:scale(1.07)}
.video-premio .play .ic svg{width:22px;height:22px;margin-left:3px}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(0,226,139,.55)}70%,100%{box-shadow:0 0 0 18px rgba(0,226,139,0)}}
.cine-fondo{position:fixed;inset:0;z-index:65;background:rgba(1,1,30,.86);opacity:0;pointer-events:none;transition:opacity .4s}
body.cine .cine-fondo{opacity:1;pointer-events:auto}
@media (max-width:560px){.video-premio .play{padding:7px 16px 7px 7px}.video-premio .play .ic{width:40px;height:40px}}

/* visor de capturas */
img[data-ampliar]{cursor:zoom-in}
.visor{position:fixed;inset:0;z-index:90;background:rgba(1,1,30,.95);display:flex;align-items:center;justify-content:center;padding:60px 16px 24px;overflow:auto}
.visor[hidden]{display:none}
.visor img{max-width:min(1400px,100%);max-height:calc(100vh - 100px);width:auto;height:auto;border-radius:10px;border:1px solid var(--line-2);background:#fff}
.visor .cerrar{position:fixed;top:14px;right:14px;background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:7px 16px;color:#fff;cursor:pointer;font:inherit;font-size:13px}
body.sin-scroll{overflow:hidden}

/* rieles en el celular: se asoman una vez para mostrar que se deslizan */
.riel.asomo>*{animation:asomo 1.2s cubic-bezier(.4,0,.2,1)}
@keyframes asomo{40%{transform:translateX(-36px)}}

/* siguiente producto en la cadena */
.siguiente{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border:1px solid var(--line-2);border-radius:22px;overflow:hidden;text-decoration:none;background-color:var(--card);transition:border-color .3s,transform .3s}
.siguiente:hover{border-color:var(--p);transform:translateY(-4px)}
.siguiente .foto{min-height:240px;overflow:hidden;position:relative}
.siguiente .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.siguiente:hover .foto img{transform:scale(1.05)}
.siguiente.on .foto img{animation:acerca 1.8s cubic-bezier(.2,.8,.2,1) backwards}
.siguiente .cuerpo{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px}
.siguiente .wm{font-size:clamp(42px,5vw,66px)}
.siguiente .sig-t{font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.siguiente p{color:var(--dim);font-size:15px}
.siguiente .ir{display:inline-flex;align-items:center;gap:8px;color:var(--pt);font-weight:600}
.siguiente .ir svg{transition:transform .3s}
.siguiente:hover .ir svg{transform:translateX(6px)}
@media (max-width:820px){.siguiente{grid-template-columns:1fr}.siguiente .foto{min-height:0;aspect-ratio:16/8}}

/* bandas de cifra gigante sobre foto */
.banda-cifra{position:relative;overflow:hidden;isolation:isolate;padding:clamp(72px,10vw,130px) 0}
.banda-cifra .fondo{position:absolute;inset:0;z-index:-1}
.banda-cifra .fondo img{width:100%;height:100%;object-fit:cover}
.banda-cifra .fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,2,54,.95) 0%,rgba(2,2,54,.8) 50%,rgba(2,2,54,.55) 100%),linear-gradient(180deg,var(--navy),rgba(2,2,54,0) 24%,rgba(2,2,54,0) 76%,var(--navy))}
.banda-cifra .caja-ancho{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,5vw,72px);align-items:center}
.cifra-g{font-size:clamp(22px,2.4vw,32px);font-weight:600;color:var(--dim);line-height:1.1;white-space:nowrap}
.cifra-g b{display:block;font-size:clamp(84px,12vw,184px);font-weight:700;letter-spacing:-.05em;color:var(--pt);line-height:.9;margin:4px 0}
.cifra-g span{display:block}
.cifra-t{font-size:clamp(18px,2vw,26px);line-height:1.45;max-width:32ch}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){.banda-cifra .fondo img{animation:paralaje-b linear both;animation-timeline:view();animation-range:cover}}
}
@keyframes paralaje-b{from{transform:translateY(-7%) scale(1.16)}to{transform:translateY(7%) scale(1.16)}}
@media (max-width:820px){.banda-cifra .caja-ancho{grid-template-columns:1fr}}

/* gráficas: la lupa aparece cuando las líneas ya se trazaron */
.graf .lupa{opacity:0;transform:scale(.6)}
.graf.on .lupa{animation:lupa .7s cubic-bezier(.3,1.4,.5,1) 2.3s forwards}
.ya .lupa{opacity:1;transform:none}
@keyframes lupa{to{opacity:1;transform:none}}
.graf .zona{cursor:crosshair;touch-action:pan-y}

/* Planningbox: dominó del mal plan, simulador e ilustración de la plataforma */
ul.domino li{--j:0;transform-origin:left bottom}
ul.domino li:nth-child(2){--j:1} ul.domino li:nth-child(3){--j:2} ul.domino li:nth-child(4){--j:3}
.on ul.domino li{animation:domino .6s cubic-bezier(.3,1.3,.5,1) calc(.35s + var(--j)*.32s) backwards}
.on ul.domino li::before{animation:golpe .45s ease calc(.5s + var(--j)*.32s) backwards}
@keyframes domino{from{opacity:0;transform:rotate(-7deg) translateX(-16px)}}
@keyframes golpe{from{transform:scaleX(0);transform-origin:left}}
.simulador{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:center;background:var(--card);border:1px solid color-mix(in srgb,var(--p) 55%,transparent);border-radius:20px;padding:clamp(20px,3vw,34px)}
.sim-txt h3{font-size:clamp(20px,2vw,24px);line-height:1.3;margin-top:12px}
.sim-txt>p{color:var(--dim);font-size:14px;margin-top:8px}
.sim-var{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 20px}
.sim-var button,.casos-tabs button,.roles [role=tab]{border:1px solid var(--line-2);background:none;border-radius:999px;padding:7px 15px;font:inherit;font-size:13px;font-weight:600;color:var(--dim);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.sim-var button:hover,.casos-tabs button:hover,.roles [role=tab]:hover{color:#fff;border-color:#fff}
.sim-var button[aria-checked="true"],.casos-tabs button[aria-pressed="true"],.roles [role=tab][aria-selected="true"]{background:var(--p);border-color:var(--p);color:#fff}
.casos-tabs button[aria-pressed="true"],[data-producto=taskbox] .roles [role=tab][aria-selected="true"]{color:var(--navy)}
.sim-et{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-bottom:10px}
#sim-dia{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--line-2);outline-offset:6px;cursor:pointer}
#sim-dia::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:5px solid var(--pt);cursor:grab}
#sim-dia::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:5px solid var(--pt);cursor:grab}
.sim-estado{margin-top:16px;font-weight:600;font-size:15px;color:var(--coral);min-height:1.6em}
.sim-estado.bien{color:var(--green)}
.sim-estado.bien::before{content:"✓ "}
.sim-graf{width:100%;height:100%;min-height:240px;align-self:stretch;overflow:visible;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:18px 14px 8px}
@media (max-width:820px){.simulador{grid-template-columns:1fr}}
/* la ilustración va a todo el ancho y los seis puntos debajo en tres columnas: la altura de los dos bloques ya no se descuadra */
.plataforma-ilus{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.ilus{margin:0 auto;position:relative;width:100%;max-width:1000px}
.ventana{background:#0d0d4a;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);font-size:clamp(8.5px,1vw,13px)}
.v-barra{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#15155c;color:var(--dim)}
.v-barra i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28)}
.v-barra span{margin-left:8px;letter-spacing:.04em}
.v-sync{margin-left:auto;font-style:normal;color:var(--green);display:inline-flex;align-items:center;gap:6px}
.v-sync::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);animation:latido 2.4s ease-out infinite}
.v-cuerpo{display:grid;grid-template-columns:22% minmax(0,1fr) 24%;gap:12px;padding:14px}
.v-versiones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;color:var(--dimmer)}
.v-versiones li{padding:6px 8px;border-radius:6px;border:1px solid var(--line)}
.v-versiones li.on{color:#fff;border-color:var(--pt);background:color-mix(in srgb,var(--p) 18%,transparent)}
.v-centro{display:flex;flex-direction:column;gap:10px;min-width:0}
.v-graf{width:100%;height:auto}
.v-graf .nec{fill:none;stroke:rgba(255,255,255,.25);stroke-width:9;stroke-linecap:round}
.v-graf .flo{fill:none;stroke:var(--pt);stroke-width:2.5}
.v-siembras{display:flex;align-items:flex-end;gap:3px;height:clamp(48px,7vw,96px);border-bottom:1px solid var(--line-2)}
.v-siembras i{flex:1;height:calc(var(--h)*1%);background:color-mix(in srgb,var(--p) 50%,transparent);border-radius:3px 3px 0 0}
.v-siembras i:nth-child(8){background:var(--pt);animation:mueve 3.4s ease-in-out infinite}
@keyframes mueve{0%,100%{height:60%}45%,60%{height:84%}}
.v-param{display:flex;flex-direction:column;gap:7px;color:var(--dimmer)}
.v-param b{color:var(--dim);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:9px}
.v-param span{height:6px;border-radius:6px;background:var(--line)}
.v-param span i{display:block;height:100%;width:var(--w);background:var(--pt);border-radius:6px}
.v-param em{font-style:normal;padding:4px 7px;border:1px solid var(--line);border-radius:6px}
.v-param em.on{border-color:var(--pt);color:#fff}
.punto{--k:0;position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;border:2px solid #fff;background:var(--p);color:#fff;
  font:700 13px 'IBM Plex Mono',monospace;cursor:pointer;animation:latido-p 2.6s ease-out calc(var(--k)*.35s) infinite;transition:transform .2s,background .2s,color .2s}
.punto:nth-of-type(2){--k:1} .punto:nth-of-type(3){--k:2} .punto:nth-of-type(4){--k:3} .punto:nth-of-type(5){--k:4} .punto:nth-of-type(6){--k:5}
.punto.activo{background:#fff;color:var(--navy);transform:translate(-50%,-50%) scale(1.18)}
@keyframes latido-p{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 70%,transparent)}60%,100%{box-shadow:0 0 0 12px transparent}}
.ilus figcaption{font-size:12.5px;color:var(--dimmer);margin-top:10px}
.ilus-l{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ilus-l .t{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;transition:border-color .2s,background-color .2s}
.ilus-l .t.activo{border-color:var(--p);background-color:color-mix(in srgb,var(--p) 14%,var(--card))}
.ilus-l .t .n{margin:0;flex:none}
.ilus-l h3{font-size:15px}
.ilus-l p{font-size:13px;margin-top:4px}
@media (max-width:1080px){.ilus-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.v-cuerpo{gap:8px;padding:10px}.punto{width:24px;height:24px;font-size:11px}}

/* PIPE: la red se traza por niveles y viajan paquetes; al pasar el cursor por un área se ve su ruta */
.red-gen #red path.l{stroke-dasharray:1 2}
.red-gen:not(.on) #red path.l{stroke-dashoffset:1.05}
.red-gen.on #red path.l{animation:traza .7s ease-out calc(.25s + var(--n)*.35s) backwards,asoma .2s linear calc(.25s + var(--n)*.35s) backwards}
.red-gen.on #red .area{animation:asoma .5s ease calc(var(--n)*.35s) backwards}
.red-gen.on #red .pil{animation:asoma .4s ease calc(.6s + var(--n)*.35s) backwards}
.red-gen #red .paq{opacity:0;pointer-events:none}
.red-gen.on #red .paq{animation:aparece .4s ease calc(2.6s + var(--n)*.1s) forwards}
.red-gen #red .area{cursor:pointer;outline:none}
.red-gen #red .area:focus-visible rect{stroke:#fff;stroke-width:3}
.red-gen #red .area,.red-gen #red [data-a]{transition:opacity .25s}
.red-gen #red .apagada{opacity:.12!important}

/* PIPE: casos con barras, "lo que influye" como lista */
.casos-sel{background:var(--tono-2);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,30px)}
.casos-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.casos-tabs button[aria-pressed="true"]{background:var(--green);border-color:var(--green)}
.casos-barras{display:grid;gap:18px}
.ind{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:6px;align-items:center}
.ind .k{grid-column:1/-1;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--dimmer)}
.ind .b{grid-column:1;display:flex;align-items:center;gap:10px;height:24px}
.ind .b i{display:block;height:100%;width:0;border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.2,1);max-width:calc(100% - 76px)}
.ind .b span{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ind .b.pipe i{background:var(--green)} .ind .b.pipe span{color:var(--green)}
.ind .b.cli i{background:rgba(255,255,255,.3)} .ind .b.cli span{color:var(--dim)}
.ind .d{grid-column:2;grid-row:2/span 2;font-size:13px;font-weight:700;padding:3px 9px;border-radius:6px;background:rgba(0,226,139,.14);color:var(--green);font-variant-numeric:tabular-nums}
.ind .d.mal{background:rgba(255,113,117,.14);color:var(--coral)}
.casos-ley{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;font-size:12px;color:var(--dim)}
.casos-ley span{display:inline-flex;align-items:center;gap:8px}
.casos-ley span::before{content:"";width:14px;height:8px;border-radius:3px;background:var(--green)}
.casos-ley .cli::before{background:rgba(255,255,255,.3)}
.casos-tabla{margin-top:16px}
.casos-tabla summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--pt);padding:8px 0;list-style:none}
.casos-tabla summary::-webkit-details-marker{display:none}
.casos-tabla summary::before{content:"+ "}
.casos-tabla[open] summary::before{content:"− "}
.casos-tabla .casos{margin-top:12px}
.chips-l{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips-l li{--j:0;display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.35;border:1px solid var(--line-2);border-radius:999px;padding:6px 13px 6px 7px;color:rgba(255,255,255,.88)}
.chips-l li::before{content:"";flex:none;width:17px;height:17px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23020236' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.chips-l li:nth-child(2){--j:1} .chips-l li:nth-child(3){--j:2} .chips-l li:nth-child(4){--j:3} .chips-l li:nth-child(5){--j:4} .chips-l li:nth-child(6){--j:5} .chips-l li:nth-child(7){--j:6} .chips-l li:nth-child(8){--j:7}
.on .chips-l li{animation:pop .4s cubic-bezier(.3,1.5,.5,1) calc(.3s + var(--j)*.06s) backwards}

/* Taskbox: lo que recibe cada rol en pestañas, seis elementos compactos y la simulación con su marcador */
.roles{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.roles .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 18px}
.tab-p p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.9);max-width:68ch}
.tab-p:not([hidden]){animation:asoma .35s ease}
.grid3.compacto{gap:14px}
.grid3.compacto .t{padding:20px 22px 22px}
.grid3.compacto .t .n{margin-bottom:12px}
.grid3.compacto .t p{font-size:13.5px}
.sim-apoyo{margin-top:24px}
.sim-marcador{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline;margin:4px 0 14px;font-size:12.5px;color:var(--dim)}
.sim-marcador .sem{font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);min-width:17ch;font-variant-numeric:tabular-nums}
.sim-marcador b{font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;margin-right:8px;font-variant-numeric:tabular-nums}
.sim-marcador .tr b{color:rgba(255,255,255,.78)} .sim-marcador .mo b{color:var(--pt)}
.cifras.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.cifras.c2{grid-template-columns:1fr}}

/* Flowbox: recorrido explicado, dos bloques, trazabilidad animada y capturas en marcos */
.recorrido span[data-desc]{cursor:default;transition:border-color .2s,background .2s}
.recorrido span.on{border-color:var(--pt);background:color-mix(in srgb,var(--p) 18%,transparent)}
.recorrido-desc{min-height:2.9em;margin:-12px 0 22px;font-size:13px;line-height:1.5;color:var(--dim)}
@media (max-width:820px){
  .recorrido{flex-direction:column;flex-wrap:nowrap;gap:0;margin:18px 0 22px 6px;border-left:2px solid var(--line-2);padding-left:16px}
  .recorrido span[data-desc]{display:block;border:0;border-radius:0;padding:4px 0;position:relative;font-size:13px}
  .recorrido span[data-desc] b{margin-right:8px}
  .recorrido span[data-desc]::before{content:"";position:absolute;left:-22px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--pt)}
  .recorrido span[data-desc]::after{content:attr(data-desc);display:block;font-weight:400;color:var(--dim);font-size:12px;line-height:1.4}
  .recorrido-desc{display:none}
}
.bloques{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bloque{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 26px 12px}
.bloque ul{list-style:none;padding:0;margin:14px 0 0}
.bloque li{padding:14px 0;border-top:1px solid var(--line)}
.bloque li h3{font-size:15.5px;line-height:1.4}
.bloque li p{font-size:13.5px;line-height:1.55;color:var(--dim);margin-top:4px}
@media (max-width:820px){
  .bloques{grid-template-columns:1fr;gap:26px}
  .bloque{background:none;border:0;padding:0}
  .bloque li{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--card)}
}
.traza{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px 34px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(20px,3vw,32px)}
.etiqueta{grid-row:1/3;width:124px;height:88px;background:#fff;border-radius:8px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:12px 14px}
.etiqueta .barras{height:40px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 13px)}
.etiqueta small{font-size:9px;letter-spacing:.22em;color:#555;text-transform:uppercase;margin-top:7px}
.etiqueta .scan{position:absolute;left:0;right:0;top:18%;height:2px;background:#ff3b3b;box-shadow:0 0 10px #ff3b3b;opacity:0}
.traza.on .scan{animation:escaneo 1.1s ease-in-out .3s 2}
@keyframes escaneo{0%,100%{top:16%;opacity:1}50%{top:78%;opacity:1}}
.traza ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative}
.traza ol::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--pt);transform-origin:left;transform:scaleX(0);transition:transform 1.5s ease 1.4s}
.traza.on ol::before{transform:none}
.traza li{--j:0;position:relative;padding-top:30px}
.traza li:nth-child(2){--j:1} .traza li:nth-child(3){--j:2}
.traza li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--line-2);transition:background .3s,border-color .3s,box-shadow .6s;transition-delay:calc(1.4s + var(--j)*.5s)}
.traza.on li::before{background:var(--pt);border-color:var(--pt);box-shadow:0 0 0 6px color-mix(in srgb,var(--p) 20%,transparent)}
.traza li h3{font-size:17px}
.traza li p{font-size:13.5px;line-height:1.55;color:var(--dim);margin-top:6px}
.traza .meta{grid-column:2;display:flex;gap:8px;flex-wrap:wrap}
.traza .meta span{--j:0;font-size:12px;letter-spacing:.06em;border:1px solid var(--line-2);border-radius:999px;padding:4px 12px;color:var(--dim)}
.traza .meta span:nth-child(2){--j:1} .traza .meta span:nth-child(3){--j:2}
.traza.on .meta span{animation:pop .45s cubic-bezier(.3,1.5,.5,1) calc(3s + var(--j)*.12s) backwards}
@media (max-width:820px){
  .traza{grid-template-columns:1fr}
  .etiqueta{grid-row:auto}
  .traza ol{grid-template-columns:1fr;gap:16px;padding-left:34px}
  .traza ol::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
  .traza li{padding-top:0}
  .traza li::before{left:-34px}
  .traza .meta{grid-column:1}
}
.capt-w .nav-falsa{display:flex;align-items:center;gap:6px;background:#1b1b52;padding:8px 12px}
.nav-falsa i{width:9px;height:9px;border-radius:50%;background:var(--coral)}
.nav-falsa i:nth-child(2){background:var(--lav)} .nav-falsa i:nth-child(3){background:var(--green)}
.nav-falsa span{margin-left:10px;font-size:11px;color:rgba(255,255,255,.65);background:rgba(255,255,255,.08);padding:2px 12px;border-radius:999px}
.moviles.carrusel{display:grid;grid-template-columns:minmax(0,250px);justify-content:center;margin-top:44px}
.moviles.carrusel>figure{grid-area:1/1;opacity:0;transition:opacity .6s;pointer-events:none}
.moviles.carrusel>figure.activa{opacity:1;pointer-events:auto}
.carrusel-puntos{grid-area:2/1;display:flex;justify-content:center;gap:8px;margin-top:14px}
.carrusel-puntos button{width:8px;height:8px;border-radius:8px;border:0;padding:0;background:var(--line-2);cursor:pointer;transition:width .3s,background .3s}
.carrusel-puntos button[aria-current="true"]{width:26px;background:var(--pt)}

/* 404 con estilo consola */
.pag-404{min-height:74vh;display:flex;align-items:center}
.consola-404{max-width:740px;background:var(--card);border:1px solid var(--line-2);border-radius:18px;padding:clamp(22px,3vw,36px)}
.consola-404 .cmd{font-size:13px;color:var(--dimmer);margin-top:4px;overflow-wrap:anywhere}
.consola-404 .ruta{color:var(--dim)}
.consola-404 .linea{font-size:clamp(30px,4.6vw,56px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin-top:12px}
.consola-404 .sug{color:var(--dim);margin-top:16px}
.consola-404 .sal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:22px}
.consola-404 .sal a{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-weight:600;font-size:14px;transition:border-color .2s,background .2s}
.consola-404 .sal a:hover{border-color:var(--p);background:color-mix(in srgb,var(--p) 10%,transparent)}
.consola-404 .sal svg{width:22px;height:22px;color:var(--pt);flex:none}
/* los rieles dentro de grillas: sin esto, el hijo de la grilla crece hasta el ancho de su riel */
.bloques>*,.saberes>*,.plataforma-ilus>*,.simulador>*,.traza>*,.siguiente>*,.banda-cifra .caja-ancho>*{min-width:0}

/* preguntas frecuentes: el título acompaña a la lista mientras se baja, sin dejar un hueco debajo */
@media (min-width:821px){.faq>div:first-child{position:sticky;top:140px}}

/* logos de clientes: cada uno con su altura (--h, en logos.html) para que todos pesen parecido; ya vienen en blanco */
.logos-tira .logo-a img{max-height:none;height:var(--h,32px);width:auto;max-width:100%}
@media (max-width:560px){.logos-tira .logo-a img{height:calc(var(--h,32px)*.8)}}