/* Portafolio MSD v2. Tokens desde marca-tokens/msd.tokens.json (modo oscuro). */
:root{
  --fondo:#181818; --superficie:#232323; --superficie2:#2b2b2b;
  --tinta:#FFFFFF; --tinta2:#B9BDC4; --rotulo:#8E929A; --linea:#333333; --linea2:#454545;
  --acento:#FE9100; --resalte:#FFB43C; --sobre-acento:#181818; --ok:#00C896; --alerta:#FF5252;
  --acento-rgb:254,145,0; --fondo-rgb:24,24,24;
  --f-titulo:"Montserrat",system-ui,sans-serif;
  --f-texto:"Lato",system-ui,sans-serif;
  --ancho:1240px; --gutter:clamp(16px,4vw,48px);
  --radio:18px; --radio-s:10px;
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--f-texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-titulo);line-height:1.05;margin:0;overflow-wrap:break-word;min-width:0}
h2{font-size:clamp(34px,5.4vw,78px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);width:100%}
.ac{color:var(--acento)}
:focus-visible{outline:2px solid var(--resalte);outline-offset:4px;transition:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--acento);color:var(--sobre-acento);padding:8px 14px;border-radius:var(--radio-s);z-index:300}
.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Capas fijas ---------- */
#colmena{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block}
.no-webgl #colmena{display:none}
.no-webgl body,.no-js-fondo{background:radial-gradient(ellipse at 70% 30%,rgba(var(--acento-rgb),.16),transparent 55%),var(--fondo)}
.velo{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(var(--fondo-rgb),.9) 0%,rgba(var(--fondo-rgb),.72) 45%,rgba(var(--fondo-rgb),.35) 100%);opacity:0}
.grano{position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Carga ---------- */
#carga{display:none}
.js #carga{display:grid;position:fixed;inset:0;z-index:400;background:var(--fondo);place-items:center;align-content:center;gap:18px}
#carga svg{width:84px;height:auto;overflow:visible}
.hex-trazo{fill:none;stroke:var(--acento);stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:320;stroke-dashoffset:320}
.hex-relleno{fill:var(--acento);opacity:0}
#carga-num{font-family:var(--f-titulo);font-weight:800;font-size:15px;color:var(--tinta);min-width:4ch;text-align:center}
.carga-txt{font-size:14px;color:var(--rotulo);margin-top:-12px}

/* ---------- Cursor ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor-on .cursor{display:block;position:fixed;left:0;top:0;z-index:350;pointer-events:none}
  .cursor-on body,.cursor-on a,.cursor-on button,.cursor-on input{cursor:none}
}
.c-punto,.c-anillo{position:fixed;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
.c-punto{width:6px;height:6px;background:var(--acento)}
.c-anillo{width:38px;height:38px;border:1.5px solid rgba(var(--acento-rgb),.7);display:grid;place-items:center;font-family:var(--f-titulo);font-weight:700;font-size:12px;color:var(--sobre-acento);transition:width .35s var(--ease),height .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease)}
.c-anillo span{opacity:0;transition:opacity .2s ease}
.cursor.sobre .c-anillo{width:64px;height:64px;background:rgba(var(--acento-rgb),.12)}
.cursor.etiqueta .c-anillo{width:84px;height:84px;background:var(--acento);border-color:var(--acento)}
.cursor.etiqueta .c-anillo span{opacity:1}
.cursor.etiqueta .c-punto{opacity:0}

/* ---------- Botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-titulo);font-weight:700;font-size:15px;padding:16px 26px;border-radius:999px;text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.btn-pri{background:var(--acento);color:var(--sobre-acento)}
.btn-pri::before{content:"";position:absolute;inset:0;background:var(--resalte);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;border-radius:inherit}
.btn-pri:hover::before{transform:translateY(0)}
.btn-sec{border-color:var(--linea2);color:var(--tinta);background:rgba(var(--fondo-rgb),.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-sec:hover{border-color:var(--acento);color:var(--acento)}
.mag{will-change:transform}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:transform .5s var(--ease),background-color .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
.nav.solida{background:rgba(var(--fondo-rgb),.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--linea)}
.nav.oculta{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo img{height:40px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--tinta2);font-size:15px;position:relative;padding:4px 0}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--acento);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav ul a:hover{color:var(--tinta)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-der{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;border:1px solid var(--linea2);border-radius:999px;padding:3px;background:rgba(var(--fondo-rgb),.5)}
.lang button{background:none;border:0;color:var(--rotulo);font-weight:700;font-size:13px;padding:6px 11px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--acento);color:var(--sobre-acento)}
.nav .btn{padding:11px 18px;font-size:14px}
@media (max-width:960px){.nav ul{display:none}}
@media (max-width:560px){.nav .btn{display:none}}

/* ---------- Texto partido ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.wi{display:inline-block;will-change:transform}
.ch{display:inline-block;will-change:transform,opacity}
.js .rev{opacity:0;transform:translateY(40px)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 90px}
.para{font-size:16px;color:var(--tinta2);margin-bottom:26px;display:flex;align-items:center;gap:12px}
.para::before{content:"";width:12px;height:14px;background:var(--acento);clip-path:var(--hex);flex:none}
.para strong{color:var(--tinta)}
.titulo-hero{font-size:clamp(58px,11.5vw,168px);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.88;display:flex;flex-direction:column;perspective:900px}
.titulo-hero .linea{display:block}
.titulo-hero .vida{color:var(--acento);text-shadow:0 0 50px rgba(var(--acento-rgb),.55),0 0 120px rgba(var(--acento-rgb),.25)}
.hero-pie{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;margin-top:40px}
.bajada{font-size:clamp(18px,1.9vw,23px);color:var(--tinta2);max-width:560px}
.bajada strong{color:var(--tinta)}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.baja{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;color:var(--rotulo)}
.raton{width:22px;height:34px;border:1.5px solid var(--linea2);border-radius:12px;position:relative}
.raton::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--acento);animation:rueda 1.8s infinite var(--ease)}
@keyframes rueda{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* ---------- Marquesina ---------- */
.marquesina{padding:34px 0;border-block:1px solid var(--linea);background:rgba(var(--fondo-rgb),.72);overflow:hidden;display:grid;gap:12px}
.mq-fila{display:flex;white-space:nowrap}
.mq-pista{display:flex;align-items:center;gap:38px;padding-right:38px;flex:none;font-family:var(--f-titulo);font-weight:800;font-size:clamp(30px,4.6vw,64px);text-transform:uppercase;letter-spacing:-.02em;will-change:transform}
.mq-fila.inv .mq-pista{color:transparent;-webkit-text-stroke:1.2px var(--linea2)}
.mq-pista .hx{width:.42em;height:.48em;background:var(--acento);clip-path:var(--hex);flex:none}
.mq-fila.inv .hx{background:var(--linea2)}

/* ---------- Manifiesto ---------- */
.manifiesto{padding:170px 0 120px}
.mani-txt{font-family:var(--f-titulo);font-weight:700;font-size:clamp(30px,4.4vw,64px);line-height:1.12;letter-spacing:-.02em;max-width:1100px}
.mani-txt .ac{color:var(--acento)}
.js .mani-txt .wd{opacity:.16}
.principios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:90px}
.principio{border-top:1px solid var(--linea2);padding-top:24px}
.principio .n{font-family:var(--f-titulo);font-weight:800;color:var(--acento);font-size:14px;display:block;margin-bottom:14px}
.principio h3{font-size:22px;margin-bottom:10px}
.principio p{color:var(--tinta2);font-size:16px}
@media (max-width:800px){.principios{grid-template-columns:minmax(0,1fr)}}

/* ---------- Secciones ---------- */
section{position:relative}
.bloque{padding:140px 0}
.cab{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:64px}
.cab p{color:var(--tinta2);font-size:19px;max-width:460px}
@media (max-width:860px){.cab{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:44px}}

/* ---------- Servicios: panal ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:50px;align-items:center}
.filtros>span{color:var(--rotulo);font-size:15px;margin-right:6px}
.chip{background:rgba(var(--fondo-rgb),.6);border:1px solid var(--linea2);color:var(--tinta2);font-size:15px;padding:10px 18px;border-radius:999px;cursor:pointer;transition:border-color .25s ease,color .25s ease,background-color .25s ease}
.chip:hover{color:var(--tinta);border-color:var(--rotulo)}
.chip[aria-pressed="true"]{border-color:var(--acento);color:var(--sobre-acento);background:var(--acento)}
.chip:disabled{opacity:.35;cursor:default}
.panal{--tw:clamp(220px,22vw,300px);--th:calc(var(--tw)*1.1547);--g:12px;display:grid;grid-template-columns:repeat(7,calc(var(--tw)/2 + var(--g)/2));justify-content:center;perspective:1200px}
.celda{grid-row:1;width:var(--tw);height:var(--th);grid-column:span 2;position:relative;border:0;padding:0;background:none;cursor:pointer;transform-style:preserve-3d}
.celda:nth-child(1){grid-column:1/span 2}.celda:nth-child(2){grid-column:3/span 2}.celda:nth-child(3){grid-column:5/span 2}
.celda:nth-child(4){grid-column:2/span 2;grid-row:2}.celda:nth-child(5){grid-column:4/span 2;grid-row:2}.celda:nth-child(6){grid-column:6/span 2;grid-row:2}
.celda:nth-child(n+4){margin-top:calc(var(--th)*-.25 + var(--g))}
.celda-borde,.celda-in,.celda-luz{position:absolute;inset:0;clip-path:var(--hex)}
.celda-borde{background:linear-gradient(160deg,var(--linea2),var(--linea) 60%);transition:background .4s ease}
.celda-in{inset:1.5px;background:linear-gradient(165deg,#262626,#1d1d1d);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:18% 16%}
.celda-luz{inset:1.5px;background:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(var(--acento-rgb),.32),transparent 55%);opacity:0;transition:opacity .35s ease}
.celda:hover .celda-luz,.celda:focus-visible .celda-luz,.celda.match .celda-luz{opacity:1}
.celda:hover .celda-borde,.celda:focus-visible .celda-borde,.celda.match .celda-borde{background:linear-gradient(160deg,var(--acento),var(--linea2) 70%)}
.celda:focus-visible{outline:none}
.celda:focus-visible .celda-borde{background:var(--resalte)}
.celda-in,.celda-borde{transition:opacity .4s var(--ease),filter .4s var(--ease),background .4s ease}
.celda.apagado .celda-in,.celda.apagado .celda-borde{opacity:.3;filter:grayscale(1)}
.ico{width:44px;height:44px;stroke:var(--acento);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico *{stroke-dasharray:80;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease)}
.celda:hover .ico *{animation:trazo 1.1s var(--ease)}
@keyframes trazo{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.celda-num{font-size:13px;color:var(--rotulo);font-weight:700}
.celda-t{font-family:var(--f-titulo);font-weight:800;font-size:clamp(16px,1.45vw,20px);line-height:1.15;color:var(--tinta)}
.celda-b{font-size:13.5px;color:var(--tinta2);line-height:1.35}
.panal-nota{text-align:center;color:var(--rotulo);font-size:14px;margin-top:34px}
@media (max-width:820px){
  .panal{--g:6px;--tw:min(210px,calc((100vw - 2*var(--gutter))/2.5 - var(--g)));grid-template-columns:repeat(5,calc(var(--tw)/2 + var(--g)/2))}
  .celda-t{font-size:clamp(12.5px,3.6vw,16px)}
  .celda-num{font-size:11.5px}
  .celda:nth-child(1){grid-column:1/span 2;grid-row:1}.celda:nth-child(2){grid-column:3/span 2;grid-row:1}
  .celda:nth-child(3){grid-column:2/span 2;grid-row:2}.celda:nth-child(4){grid-column:4/span 2;grid-row:2}
  .celda:nth-child(5){grid-column:1/span 2;grid-row:3}.celda:nth-child(6){grid-column:3/span 2;grid-row:3}
  .celda:nth-child(n+3){margin-top:calc(var(--th)*-.25 + var(--g))}
  .celda-b{display:none}
  .ico{width:34px;height:34px}
  .celda-in{gap:6px;padding:16% 12%}
}
.js .serv-detalles{display:none}
.serv-detalles{display:grid;gap:30px;margin-top:40px}

/* Detalle (overlay) */
.overlay{position:fixed;inset:0;z-index:250;display:flex;align-items:center;overflow-y:auto;background:radial-gradient(ellipse at 80% 10%,rgba(var(--acento-rgb),.20),transparent 55%),rgba(var(--fondo-rgb),.97);padding:90px 0 40px}
.overlay[hidden]{display:none}
.ov-wrap{position:relative}
.ov-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.ov-num{font-family:var(--f-titulo);font-weight:800;font-size:clamp(70px,12vw,170px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--acento)}
.ov-cerrar{background:none;border:1px solid var(--linea2);border-radius:999px;padding:12px 20px;cursor:pointer;font-weight:700;font-size:15px;display:inline-flex;gap:10px;align-items:center}
.ov-cerrar:hover{border-color:var(--acento);color:var(--acento)}
.det h3{font-size:clamp(34px,5.5vw,76px);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:22px}
.det .que{font-size:clamp(18px,1.8vw,23px);color:var(--tinta2);max-width:760px;margin-bottom:40px}
.det-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start}
.det h4{font-family:var(--f-texto);font-size:15px;color:var(--rotulo);font-weight:700;margin:0 0 16px}
.det ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.det li{padding-left:28px;position:relative;font-size:18px}
.det li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:14px;background:var(--acento);clip-path:var(--hex)}
.det .caso{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:26px;color:var(--tinta2)}
.det .caso strong{display:block;color:var(--tinta);font-family:var(--f-titulo);margin-bottom:6px}
.ov-nav{display:flex;justify-content:space-between;gap:12px;margin-top:50px;border-top:1px solid var(--linea);padding-top:26px}
.ov-nav button{background:none;border:0;cursor:pointer;font-family:var(--f-titulo);font-weight:700;font-size:16px;color:var(--tinta2);padding:8px 0}
.ov-nav button:hover{color:var(--acento)}
@media (max-width:820px){.det-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Demo ---------- */
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.demo-txt p{color:var(--tinta2);font-size:19px;margin:24px 0}
.demo-txt ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.demo-txt li{padding-left:26px;position:relative;color:var(--tinta2);font-size:17px}
.demo-txt li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:13px;background:var(--acento);clip-path:var(--hex)}
.escena-tel{perspective:1300px;justify-self:center;width:100%;max-width:410px}
.telefono{background:linear-gradient(170deg,#2a2a2a,#1e1e1e);border:1px solid var(--linea2);border-radius:38px;padding:14px;transform-style:preserve-3d;box-shadow:0 60px 120px -40px rgba(var(--acento-rgb),.45),0 0 0 6px #121212,0 0 0 7px var(--linea)}
.pantalla{background:var(--fondo);border-radius:28px;overflow:hidden}
.tel-cab{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--linea);background:var(--superficie)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--acento);display:grid;place-items:center;color:var(--sobre-acento);font-family:var(--f-titulo);font-weight:800;font-size:14px}
.tel-cab b{display:block;font-size:15px}
.tel-cab span{font-size:13px;color:var(--ok)}
.chat{height:400px;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
.chat::-webkit-scrollbar{display:none}
.burbuja{max-width:86%;padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;white-space:pre-line}
.b-bot{background:var(--superficie2);align-self:flex-start;border-bottom-left-radius:5px}
.b-user{background:var(--acento);color:var(--sobre-acento);align-self:flex-end;border-bottom-right-radius:5px}
.b-bot a{color:var(--resalte);word-break:break-all}
.escribiendo{display:inline-flex;gap:4px;align-items:center;height:18px}
.escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--rotulo);animation:salto 1s infinite ease-in-out}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes salto{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.opciones{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 16px;border-top:1px solid var(--linea);background:var(--superficie)}
.opciones .chip{font-size:13.5px;padding:8px 13px;background:var(--fondo)}
.opciones .chip:hover{border-color:var(--acento);color:var(--acento)}
@media (max-width:860px){.demo-grid{grid-template-columns:minmax(0,1fr);gap:44px}}

/* ---------- Casos ---------- */
.casos{padding:120px 0 80px}
.casos-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:50px;flex-wrap:wrap}
.casos-prog{display:flex;align-items:center;gap:14px;font-family:var(--f-titulo);font-weight:700;font-size:14px;color:var(--rotulo)}
.casos-prog #casos-idx{color:var(--acento)}
.barra-prog{width:160px;height:2px;background:var(--linea2);position:relative;overflow:hidden}
.barra-prog i{position:absolute;inset:0;background:var(--acento);transform-origin:left;transform:scaleX(.2)}
.casos-pista{display:flex;gap:28px;padding:0 var(--gutter)}
.caso-panel{flex:0 0 min(1060px,86vw);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center;background:linear-gradient(150deg,rgba(43,43,43,.92),rgba(30,30,30,.92));border:1px solid var(--linea);border-radius:28px;padding:clamp(26px,3.4vw,52px);min-height:min(560px,70vh)}
.caso-info .tipo{font-size:14px;color:var(--acento);display:block;margin-bottom:14px}
.caso-info h3{font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-.02em;margin-bottom:16px}
.caso-info p{color:var(--tinta2);font-size:17px}
.cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:34px;padding-top:26px;border-top:1px solid var(--linea2)}
.cifra b{display:flex;font-family:var(--f-titulo);font-size:clamp(34px,3.6vw,52px);font-weight:800;line-height:1;color:var(--tinta);letter-spacing:-.02em}
.cifra>span{display:block;font-size:13.5px;color:var(--rotulo);margin-top:10px}
.cifra b{font-variant-numeric:tabular-nums}
.odo-col{display:inline-block;height:1em;overflow:hidden;position:relative}
.odo-tira{display:flex;flex-direction:column;will-change:transform}
.odo-tira span{height:1em;line-height:1;display:block;font-size:inherit;color:inherit;margin:0}
.caso-vis{position:relative;perspective:1400px}
.marco{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--linea2);box-shadow:0 50px 90px -30px rgba(0,0,0,.8),0 0 70px -20px rgba(var(--acento-rgb),.35);transform:rotateY(-14deg) rotateX(4deg);transform-origin:left center;background:var(--superficie)}
.marco img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transform:scale(1.12)}
.marco-barra{height:30px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#1d1d1d;border-bottom:1px solid var(--linea)}
.marco-barra i{width:9px;height:9px;border-radius:50%;background:var(--linea2)}
.marco-barra span{font-size:12px;color:var(--rotulo);margin-left:10px}
.vis-hex{aspect-ratio:16/11;display:grid;place-items:center;position:relative}
.vis-hex svg{position:absolute;height:92%;width:auto;overflow:visible}
.vis-hex path{fill:none;stroke-linejoin:round}
.h-base{stroke:var(--linea2);stroke-width:1.2}
.h-flujo{stroke:var(--acento);stroke-width:2.4;stroke-dasharray:90 560;filter:drop-shadow(0 0 6px rgba(var(--acento-rgb),.9));animation:flujo 5s linear infinite}
.h-flujo.f2{stroke-dasharray:60 340;animation-duration:3.6s;animation-direction:reverse}
.h-flujo.f3{stroke-dasharray:40 180;animation-duration:2.6s}
@keyframes flujo{to{stroke-dashoffset:-650}}
.vis-hex b{position:relative;font-family:var(--f-titulo);font-weight:800;font-size:clamp(44px,5vw,78px);letter-spacing:-.03em}
.vis-hex small{position:absolute;bottom:14%;font-size:14px;color:var(--rotulo)}
@keyframes gira{to{transform:rotate(360deg)}}
@media (min-width:901px){
  .casos{padding:0}
  .casos-pin{height:100vh;display:flex;flex-direction:column;justify-content:center;gap:0}
  .casos-cab{margin-bottom:34px}
  .casos-cab h2{font-size:clamp(34px,4.2vw,62px)}
  .caso-panel{min-height:0;height:min(560px,64vh)}
  .caso-info p{font-size:16px}
}
@media (max-width:900px){
  .casos-pista{flex-direction:column;padding:0 var(--gutter)}
  .caso-panel{flex:none;grid-template-columns:minmax(0,1fr);min-height:0;gap:30px}
  .marco{transform:none}
  .casos-prog{display:none}
}

/* ---------- Calculadora ---------- */
.calc{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px}
.calc-in,.calc-out{background:rgba(35,35,35,.92);border:1px solid var(--linea);border-radius:24px;padding:36px}
.campo{margin-bottom:28px}
.campo:last-child{margin-bottom:0}
.campo label{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--tinta2);margin-bottom:12px}
.campo output{font-family:var(--f-titulo);font-weight:700;color:var(--tinta)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--p:30%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--acento) var(--p),var(--linea2) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--linea2)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--acento)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:25px;margin-top:-10.5px;background:var(--acento);clip-path:var(--hex);border:0}
input[type=range]::-moz-range-thumb{width:22px;height:25px;background:var(--acento);clip-path:var(--hex);border:0;border-radius:0}
.calc-out{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 30px;align-content:start;background:linear-gradient(160deg,rgba(var(--acento-rgb),.16),rgba(35,35,35,.92) 50%)}
.fuga{grid-column:1/-1;display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:4px 3px}
.fuga i{aspect-ratio:.866;clip-path:var(--hex);background:var(--linea2);transition:background-color .35s ease,box-shadow .35s ease}
.fuga i.o{transform:translateX(52%)}
.fuga i.perdido{background:rgba(255,82,82,.55)}
.fuga i.recup{background:var(--acento);box-shadow:0 0 12px rgba(var(--acento-rgb),.8)}
.leyenda{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--tinta2);margin-top:-8px}
.leyenda span{display:inline-flex;align-items:center;gap:8px}
.leyenda i{width:11px;height:13px;clip-path:var(--hex);background:var(--linea2)}
.leyenda .l-p i{background:rgba(255,82,82,.75)}
.leyenda .l-r i{background:var(--acento)}
.res b{display:block;font-family:var(--f-titulo);font-size:clamp(32px,3.4vw,50px);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.res span{color:var(--tinta2);font-size:14.5px;display:block;margin-top:6px}
.res.grande{grid-column:1/-1}
.res.grande b{color:var(--acento);font-size:clamp(46px,5.6vw,84px);text-shadow:0 0 40px rgba(var(--acento-rgb),.35)}
.supuestos{grid-column:1/-1;font-size:13px;color:var(--rotulo);border-top:1px solid var(--linea2);padding-top:16px}
@media (max-width:900px){.calc{grid-template-columns:minmax(0,1fr)}.calc-in,.calc-out{padding:24px}.fuga{grid-template-columns:repeat(20,minmax(0,1fr))}}

/* ---------- Proceso ---------- */
.ruta{position:relative}
.ruta-svg{position:absolute;left:0;right:0;top:15px;width:100%;height:4px;overflow:visible}
.ruta-svg path{stroke:var(--linea2);stroke-width:2;fill:none}
.ruta-svg .viva{stroke:var(--acento);stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(var(--acento-rgb),.9))}
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;position:relative}
.paso .nodo{width:30px;height:34px;clip-path:var(--hex);background:var(--linea2);display:grid;place-items:center;margin-bottom:28px;transition:background-color .4s ease,transform .4s var(--ease)}
.paso .nodo::after{content:"";width:12px;height:14px;clip-path:var(--hex);background:var(--fondo)}
.paso.on .nodo{background:var(--acento);transform:scale(1.25)}
.paso .cuando{font-size:14px;color:var(--acento);margin-bottom:10px;display:block;font-weight:700}
.paso h3{font-size:clamp(24px,2.4vw,32px);font-weight:800;text-transform:uppercase}
.paso p{color:var(--tinta2);margin-top:12px;max-width:340px}
@media (max-width:800px){.pasos{grid-template-columns:minmax(0,1fr)}.ruta-svg{display:none}}

/* ---------- Para ti ---------- */
.parati{display:none}
.parati.activo{display:block}
.carta{border:1px solid rgba(var(--acento-rgb),.5);border-radius:28px;padding:clamp(28px,5vw,64px);background:radial-gradient(ellipse at top right,rgba(var(--acento-rgb),.18),transparent 60%),rgba(30,30,30,.92);position:relative;overflow:hidden}
.carta h2{font-size:clamp(32px,4.6vw,64px)}
.carta>p{margin-top:18px;font-size:19px;color:var(--tinta2);max-width:760px}
.recos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.reco{background:rgba(var(--fondo-rgb),.6);border:1px solid var(--linea);border-radius:var(--radio);padding:26px}
.reco h3{font-size:19px;margin:10px 0}
.reco p{color:var(--tinta2);font-size:15.5px}
.reco .ya{color:var(--ok);font-size:13.5px;font-weight:700}
.reco .sig{color:var(--acento);font-size:13.5px;font-weight:700}
@media (max-width:860px){.recos{grid-template-columns:minmax(0,1fr)}}

/* ---------- Precios ---------- */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;perspective:1400px}
.plan{position:relative;background:rgba(35,35,35,.94);border-radius:24px;padding:34px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--linea);overflow:hidden;transform-style:preserve-3d}
.plan::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--acento-rgb),.16),transparent 45%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.plan:hover::before{opacity:1}
.plan.dest{border-color:rgba(var(--acento-rgb),.7);box-shadow:0 0 80px -30px rgba(var(--acento-rgb),.6)}
.plan .etq{font-size:14px;color:var(--acento);font-weight:700}
.plan h3{font-size:21px}
.precio{font-family:var(--f-titulo);font-size:clamp(30px,2.8vw,40px);font-weight:800;line-height:1;letter-spacing:-.02em}
.precio small{font-family:var(--f-texto);font-size:15px;color:var(--tinta2);font-weight:400;display:block;margin-top:10px;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:8px 0 14px;display:grid;gap:10px;color:var(--tinta2);font-size:15px}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:12px;background:var(--acento);clip-path:var(--hex)}
.plan .btn{margin-top:auto}
@media (max-width:900px){.planes{grid-template-columns:minmax(0,1fr)}}

/* ---------- Final: interruptor ---------- */
.final{min-height:100svh;display:flex;align-items:center;text-align:center;padding:120px 0}
.final-t{font-size:clamp(50px,10vw,150px);letter-spacing:-.035em;line-height:.9;transition:color .6s ease,text-shadow .6s ease}
.final.on .final-t{color:var(--acento);text-shadow:0 0 60px rgba(var(--acento-rgb),.6)}
.switch{margin:56px auto 30px;display:block;width:200px;height:96px;border-radius:999px;border:2px solid var(--linea2);background:rgba(var(--fondo-rgb),.8);position:relative;cursor:pointer;transition:background-color .5s ease,border-color .5s ease,box-shadow .5s ease}
.switch .sw-knob{position:absolute;top:8px;left:8px;width:76px;height:76px;border-radius:50%;background:var(--linea2);display:grid;place-items:center;transition:transform .6s var(--ease),background-color .5s ease}
.switch .sw-knob::after{content:"";width:26px;height:30px;clip-path:var(--hex);background:var(--fondo)}
.switch[aria-checked="true"]{background:var(--acento);border-color:var(--acento);box-shadow:0 0 90px rgba(var(--acento-rgb),.7)}
.switch[aria-checked="true"] .sw-knob{transform:translateX(104px);background:var(--fondo)}
.switch[aria-checked="true"] .sw-knob::after{background:var(--acento)}
.final-p{font-size:clamp(18px,1.8vw,22px);color:var(--tinta2);max-width:600px;margin:0 auto 34px}
.final-acc{justify-content:center}
.js .final .final-acc{opacity:.35;transition:opacity .6s ease}
.js .final.on .final-acc{opacity:1}

footer{border-top:1px solid var(--linea);padding:36px 0;color:var(--rotulo);font-size:14px;background:rgba(var(--fondo-rgb),.9)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer img{height:32px;width:auto}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none}
  .js .mani-txt .wd{opacity:1}
  .raton::after,.h-flujo,.escribiendo i{animation:none}
  .ico *{transition:none}
  .celda:hover .ico *{animation:none}
  .switch,.switch .sw-knob,.btn,.btn-pri::before{transition:none}
  .marco{transform:none}
}