:root{
  --prof:#06143f; --azul:#1646b8; --azul2:#2a6bff; --celeste:#8fc2ff; --hielo:#e8f1ff; --blanco:#fff;
  --amarillo:#f0c91f; --verde:#22c55e; --rojo:#f87171; --tinta:#0b1e55;
  --vidrio:rgba(255,255,255,.08); --vidrio2:rgba(255,255,255,.14); --linea:rgba(255,255,255,.22);
  --fuente:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--prof);color:#fff;font-family:var(--fuente);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#fondo{position:fixed;inset:0;z-index:0;background:radial-gradient(1200px 700px at 70% 20%,#1d52d6 0%,#0f2f86 42%,#06143f 100%)}
#constelacion{position:absolute;inset:0;width:100%;height:100%}
#escenario{position:fixed;inset:0;z-index:1}
.sl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(64px,9vh,96px) clamp(20px,6vw,96px) clamp(70px,10vh,100px);opacity:0;visibility:hidden;transform:translateY(24px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s .7s;overflow:auto}
.sl.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s}
.sl.antes{transform:translateY(-24px) scale(.985)}
.sl>.in{width:100%;max-width:1240px;margin:0 auto}
.sl [data-r]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.sl.on [data-r]{opacity:1;transform:none;transition-delay:calc(var(--d,0)*90ms + 150ms)}
.etq{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--celeste);margin-bottom:14px}
.etq::before{content:"";width:28px;height:2px;background:var(--amarillo);border-radius:2px}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.04}
h2{font-size:clamp(30px,4.6vw,58px);margin-bottom:14px;text-wrap:balance}
h2 em,h1 em{font-style:normal;background:linear-gradient(90deg,#8fc2ff,#fff 55%,#f0c91f);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(15px,1.6vw,20px);line-height:1.5;color:#cfe0ff;max-width:62ch;text-wrap:pretty}
.vid{background:var(--vidrio);border:1px solid var(--linea);border-radius:22px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* HUD */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#hud>*{pointer-events:auto}
#marca{position:absolute;top:18px;left:22px;height:34px;opacity:.95}
#marca img{height:100%;display:block}
#ctl{position:absolute;top:16px;right:18px;display:flex;gap:8px}
.bt{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--vidrio2);border:1px solid var(--linea);font-size:18px;transition:transform .2s,background .2s}
.bt:hover{transform:scale(1.1);background:rgba(255,255,255,.24)}
#prog{position:absolute;left:0;top:0;height:3px;background:linear-gradient(90deg,var(--celeste),var(--amarillo));width:0;transition:width .6s ease;z-index:6}
#pie{position:absolute;left:0;right:0;bottom:16px;display:flex;align-items:center;justify-content:center;gap:16px}
#puntos{display:flex;gap:8px}
#puntos button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .3s}
#puntos button.on{width:30px;border-radius:6px;background:var(--amarillo)}
#puntos button:hover{background:#fff}
.nav{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--vidrio2);border:1px solid var(--linea);font-size:20px;transition:transform .2s,opacity .2s}
.nav:hover{transform:scale(1.12)}
.nav[disabled]{opacity:.25;pointer-events:none}
#cuenta{position:absolute;left:22px;bottom:24px;font-size:12px;color:#a9c4f5;letter-spacing:.12em}
/* Entrada */
#entrada{position:fixed;inset:0;z-index:20;display:grid;place-items:center;text-align:center;background:radial-gradient(900px 600px at 50% 40%,#1d52d6 0%,#0a2370 55%,#050f33 100%);transition:opacity .9s ease,visibility 0s .9s}
#entrada.fuera{opacity:0;visibility:hidden;pointer-events:none}
#entrada img.lg{width:min(560px,78vw);filter:drop-shadow(0 20px 50px rgba(0,0,0,.45));animation:flota 5s ease-in-out infinite}
#entrada p{color:#cfe0ff;margin:6px 0 28px;font-size:clamp(15px,1.8vw,20px)}
#entrar{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;border-radius:999px;font-weight:800;font-size:18px;color:#06143f;background:linear-gradient(90deg,#fff,#cfe3ff);box-shadow:0 0 0 0 rgba(143,194,255,.7);animation:pulso 2s infinite}
#entrar:hover{transform:scale(1.05)}
#entrada small{display:block;margin-top:18px;color:#8fb0ee;font-size:13px}
@keyframes pulso{70%{box-shadow:0 0 0 22px rgba(143,194,255,0)}100%{box-shadow:0 0 0 0 rgba(143,194,255,0)}}
@keyframes flota{50%{transform:translateY(-10px)}}
/* Portada */
#s-portada .in{text-align:center}
#s-portada h1{font-size:clamp(38px,7vw,96px);margin:12px 0 18px;text-wrap:balance}
#s-portada .sub{margin:0 auto 26px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--vidrio2);border:1px solid var(--linea);font-size:14px;font-weight:600}
.chip .ic{color:var(--amarillo)}
.baja{margin-top:34px;display:inline-flex;align-items:center;gap:8px;color:#a9c4f5;font-size:14px;animation:rebota 2s infinite}
@keyframes rebota{50%{transform:translateY(7px)}}
/* Reto */
.frases{display:grid;gap:6px;margin:8px 0 26px}
.frases p{font-size:clamp(26px,4.4vw,58px);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:rgba(255,255,255,.35);transition:color .6s}
.frases p.on,.frases p:hover{color:#fff}
.frases b{color:var(--amarillo)}
/* Pilares */
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:26px}
.flip{perspective:1200px;height:300px;cursor:pointer}
.flip>div{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flip:hover>div,.flip.v>div{transform:rotateY(180deg)}
.flip .f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:24px;padding:26px;display:flex;flex-direction:column}
.flip .fr{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid var(--linea);justify-content:flex-end}
.flip .fr .ic{font-size:44px;color:var(--amarillo);margin-bottom:auto}
.flip .fr h3{font-size:28px}
.flip .fr small{color:#a9c4f5;margin-top:6px}
.flip .at{transform:rotateY(180deg);background:#fff;color:var(--tinta);justify-content:center;gap:10px}
.flip .at h4{font-size:20px}
.flip .at li{margin-left:18px;line-height:1.45;font-size:15px}
.nota{margin-top:20px;display:flex;align-items:center;gap:12px;padding:14px 20px;font-size:16px;color:#e3eeff}
.nota .ic{color:var(--amarillo);font-size:24px}
/* Turismo */
.dos{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.tab{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:16px;background:var(--vidrio);border:1px solid var(--linea);font-weight:700;font-size:15px;transition:all .25s}
.tab .ic{font-size:22px;color:var(--celeste)}
.tab small{display:block;font-weight:500;color:#a9c4f5;font-size:12px}
.tab:hover{background:var(--vidrio2)}
.tab.on{background:#fff;color:var(--tinta);transform:translateX(6px)}
.tab.on .ic{color:var(--azul2)} .tab.on small{color:#4b5f9c}
.tel{display:grid;place-items:center}
.cel{position:relative;width:min(300px,64vw);aspect-ratio:9/18.5;border-radius:42px;padding:11px;background:linear-gradient(160deg,#27345f,#0a1230);box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.15)}
.cel::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:14px;background:#050a1f;z-index:3}
.pan{position:absolute;inset:11px;border-radius:32px;overflow:hidden;background:#0b1a4a}
.vista{isolation:isolate;position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity .5s,transform .6s;padding:48px 14px 14px;color:#fff;font-size:12px}
.vista.on{opacity:1;transform:none}
.vista .fto{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-1}
.vista .fto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,63,.55),rgba(6,20,63,.1) 40%,rgba(6,20,63,.88))}
.v-bad{display:inline-flex;gap:6px;align-items:center;background:var(--amarillo);color:#06143f;font-weight:800;padding:4px 10px;border-radius:999px;font-size:11px}
.v-tit{font-size:20px;font-weight:800;margin:8px 0 4px}
.v-c{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:10px;margin-top:8px;backdrop-filter:blur(8px)}
.v-c b{display:block}
.onda{display:flex;gap:3px;align-items:stretch;height:46px;margin-top:10px}
.onda i{flex:1;display:block;min-width:3px;background:var(--celeste);border-radius:3px;transform-origin:bottom;animation:onda 1.1s ease-in-out infinite}
.onda i:nth-child(3n){animation-delay:-.3s}.onda i:nth-child(3n+1){animation-delay:-.7s}.onda i:nth-child(5n){animation-duration:.8s}
@keyframes onda{0%,100%{transform:scaleY(.15)}50%{transform:scaleY(1)}}50%{height:100%}}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px;text-align:center}
.cal i{font-style:normal;padding:6px 0;border-radius:8px;background:rgba(255,255,255,.1)}
.cal i.m{background:var(--amarillo);color:#06143f;font-weight:800}
.mapa-svg{width:100%;height:150px;margin-top:6px}
.ruta{stroke-dasharray:6 6;animation:marcha 1s linear infinite}
@keyframes marcha{to{stroke-dashoffset:-12}}
.sello{width:90px;height:90px;border-radius:50%;margin:16px auto 6px;display:grid;place-items:center;background:radial-gradient(circle,#ffe27a,#f0c91f);color:#06143f;font-size:38px;box-shadow:0 0 0 8px rgba(240,201,31,.25);animation:flota 3s infinite}
/* Marketing */
.glob{position:relative;display:grid;place-items:center}
#globo{width:100%;max-width:600px;aspect-ratio:1;max-height:68vh}
.canales{display:grid;gap:12px;margin-top:20px}
.canal{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;transition:transform .25s,background .25s}
.canal:hover{transform:translateX(8px);background:var(--vidrio2)}
.canal .ic{font-size:26px;color:var(--amarillo);margin-top:2px}
.canal b{display:block;font-size:17px}
.canal span{color:#cfe0ff;font-size:14px;line-height:1.4}
.cifra{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.cifra div b{display:block;font-size:34px;font-weight:800;color:var(--amarillo)}
.cifra div span{font-size:12px;color:#a9c4f5}
/* Ciudadanos */
.rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:22px}
.srv{position:relative;padding:18px;border-radius:20px;min-height:128px;background:var(--vidrio);border:1px solid var(--linea);text-align:left;overflow:hidden;transition:transform .3s,background .3s}
.srv .ic{font-size:30px;color:var(--celeste);transition:all .3s}
.srv b{display:block;margin-top:10px;font-size:16px}
.srv span{display:block;font-size:12px;color:#a9c4f5;margin-top:4px;line-height:1.35;max-height:0;opacity:0;transition:all .35s}
.srv:hover,.srv.on{transform:translateY(-6px);background:#fff;color:var(--tinta)}
.srv:hover .ic,.srv.on .ic{color:var(--azul2)}
.srv:hover span,.srv.on span{max-height:90px;opacity:1;color:#3d4f8c}
/* Comercio */
.esca{display:flex;align-items:flex-end;gap:12px;height:260px;margin-top:24px}
.pel{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;min-width:0}
.pel .b{border-radius:16px 16px 6px 6px;padding:12px 10px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));border:1px solid var(--linea);transform-origin:bottom;transform:scaleY(.2);transition:transform .9s cubic-bezier(.2,.9,.2,1),background .3s}
.sl.on .pel .b{transform:scaleY(1);transition-delay:calc(var(--i)*120ms + 300ms)}
.pel:hover .b,.pel.on .b{background:linear-gradient(180deg,#fff,#cfe3ff);color:var(--tinta)}
.pel b{font-size:clamp(13px,1.5vw,18px);display:block}
.pel small{font-size:11px;opacity:.8}
.det{margin-top:18px;padding:18px 22px;min-height:96px;font-size:16px;line-height:1.5;color:#e3eeff}
.det b{color:var(--amarillo)}
/* Datos */
.kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:22px 0}
.kp div{padding:16px;text-align:center}
.kp b{display:block;font-size:clamp(30px,3.6vw,48px);font-weight:800;color:var(--amarillo);font-variant-numeric:tabular-nums}
.kp span{font-size:12px;color:#cfe0ff}
.tab-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.tab-dash .vid{padding:16px}
.tab-dash h4{font-size:13px;color:#a9c4f5;font-weight:600;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.tab-dash .num{font-size:30px;font-weight:800}
.spark{width:100%;height:46px;margin-top:6px}
.med{height:8px;border-radius:6px;background:rgba(255,255,255,.15);overflow:hidden;margin-top:10px}
.med i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--celeste),var(--verde));transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.lg-demo{font-size:11px;color:#8fb0ee;margin-top:10px}
/* Lorica */
.gal{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:200px 200px;gap:12px;margin-top:22px}
.gal .ft{position:relative;border-radius:22px;overflow:hidden;background-size:cover;background-position:center;transition:transform .5s,filter .5s;filter:saturate(1.05)}
.gal .ft:nth-child(1){grid-column:span 3;grid-row:span 2}
.gal .ft:nth-child(2){grid-column:span 3}
.gal .ft:nth-child(3){grid-column:span 2}
.gal .ft:nth-child(4){grid-column:span 1}
.gal .ft:hover{transform:scale(1.03);z-index:2}
.gal .ft span{position:absolute;left:12px;bottom:10px;font-weight:700;font-size:14px;text-shadow:0 2px 10px #000}
.gal .ft::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6))}
.gal .ft span{z-index:2}
.dato-l{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px}
.dato-l div{display:flex;gap:10px;align-items:center;color:#e3eeff;font-size:15px}
.dato-l .ic{color:var(--amarillo);font-size:22px}
/* Camino */
.cam{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative;margin-top:30px}
.cam::before{content:"";position:absolute;left:5%;right:5%;top:28px;height:3px;background:linear-gradient(90deg,var(--celeste),var(--amarillo));border-radius:3px;opacity:.6}
.pas{position:relative;text-align:center;padding-top:0}
.pas .nd{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:var(--prof);border:3px solid var(--celeste);font-weight:800;font-size:20px;transition:all .3s;position:relative;z-index:1}
.pas:hover .nd,.pas.on .nd{background:var(--amarillo);border-color:#fff;color:#06143f;transform:scale(1.15)}
.pas b{display:block;font-size:15px}
.pas small{color:#a9c4f5;font-size:12px}
.cam-d{margin-top:22px;padding:20px 24px;min-height:120px}
.cam-d h4{font-size:20px;margin-bottom:6px}
.cam-d p{color:#dbe8ff;line-height:1.5;font-size:15.5px}
/* Aliados */
.alis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:26px}
.ali{background:#fff;color:var(--tinta);border-radius:22px;padding:22px;display:grid;gap:10px;justify-items:center;text-align:center;transition:transform .3s}
.ali:hover{transform:translateY(-8px) rotate(-.6deg)}
.ali img{height:70px;object-fit:contain;max-width:100%}
.ali span{font-size:13px;color:#4b5f9c;line-height:1.4}
.ali.ds{background:linear-gradient(160deg,#1646b8,#2a6bff);color:#fff}
.ali.ds .w{font-weight:900;font-size:30px;letter-spacing:-.03em}
.ali.ds span{color:#dbe8ff}
/* Cierre */
.bene{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:22px 0}
.bene div{padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.bene .ic{font-size:26px;color:var(--amarillo);margin-top:2px}
.bene b{display:block;font-size:16px;margin-bottom:2px}
.bene span{font-size:13.5px;color:#cfe0ff;line-height:1.4}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:800;font-size:16px;text-decoration:none;transition:transform .2s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn.p{background:linear-gradient(90deg,var(--amarillo),#ffe27a);color:#06143f}
.btn.s{background:var(--vidrio2);border:1px solid var(--linea)}
.fte{margin-top:22px;font-size:11.5px;color:#8fb0ee;line-height:1.5;max-width:100ch}
/* Ayuda */
#ayuda{position:fixed;right:128px;bottom:24px;z-index:6;font-size:12px;color:#a9c4f5;text-align:right}
kbd{padding:2px 7px;border-radius:6px;background:var(--vidrio2);border:1px solid var(--linea);font-family:inherit}
@media(max-width:900px){
  .dos{grid-template-columns:1fr}.tel{order:-1}.cel{width:200px}.tabs{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,150px)}.gal .ft:nth-child(n){grid-column:auto;grid-row:auto}
  .cam{grid-template-columns:1fr;gap:14px}.cam::before{display:none}.pas{display:flex;gap:14px;text-align:left;align-items:center}.pas .nd{margin:0}
  .esca{height:auto;flex-direction:column;align-items:stretch}.pel .b{transform:none}
  #ayuda,#cuenta{display:none}
  .flip{height:260px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ===== v2: idioma, rueda de ejes, configurador, comparación ===== */
#lang{position:absolute;right:20px;bottom:18px;display:flex;border-radius:999px;overflow:hidden;border:1px solid var(--linea);background:var(--vidrio2);height:34px}
#lang button{padding:0 13px;font-weight:800;font-size:13px;letter-spacing:.06em;transition:background .2s,color .2s}
#lang button.on{background:#fff;color:var(--tinta)}
.rueda-w{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin-top:18px}
.rueda{position:relative;width:min(470px,100%);aspect-ratio:1;margin:0 auto}
.rueda::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(255,255,255,.25);animation:gira 60s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.rueda .cen{position:absolute;inset:30%;border-radius:50%;display:grid;place-items:center;text-align:center;padding:10px;background:radial-gradient(circle,#2a6bff,#1646b8);box-shadow:0 0 60px rgba(42,107,255,.6);font-weight:800;font-size:clamp(12px,1.6vw,17px)}
.rueda .nodo{position:absolute;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;background:var(--vidrio2);border:1px solid var(--linea);backdrop-filter:blur(8px);font-size:30px;transition:all .3s;cursor:pointer}
.rueda .nodo:hover,.rueda .nodo.on{background:#fff;color:var(--azul2);transform:scale(1.18);box-shadow:0 0 30px rgba(255,255,255,.4)}
.rueda .nodo small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;font-size:11px;font-weight:700;color:#cfe0ff}
.eje-d{padding:26px 28px;min-height:210px}
.eje-d .ic{font-size:44px;color:var(--amarillo)}
.eje-d h3{font-size:clamp(22px,2.6vw,32px);margin:10px 0 8px}
.eje-d p{font-size:clamp(15px,1.5vw,18px);line-height:1.55;color:#e1ecff}
.comp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.comp h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:0 6px 8px}
.comp .a h4{color:#ffb4b4}.comp .b h4{color:#9cf0b8}
.fila{display:flex;gap:12px;align-items:center;padding:14px 18px;margin-bottom:10px;font-size:clamp(14px,1.45vw,18px);line-height:1.35}
.fila .ic{font-size:22px}
.a .fila{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.3)}.a .fila .ic{color:var(--rojo)}
.b .fila{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.35)}.b .fila .ic{color:var(--verde)}
.cfg-w{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-top:14px}
.cfg-in{width:100%;padding:16px 20px;border-radius:18px;font:inherit;font-size:20px;font-weight:700;color:#fff;background:var(--vidrio2);border:1px solid var(--linea);outline:0}
.cfg-in:focus{border-color:var(--amarillo);box-shadow:0 0 0 4px rgba(240,201,31,.2)}
.cfg-in::placeholder{color:#8fb0ee}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.mod{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--vidrio);border:1px solid var(--linea);font-weight:700;font-size:14px;text-align:left;transition:all .25s}
.mod .ic{font-size:20px;color:var(--celeste)}
.mod.on{background:#fff;color:var(--tinta)}.mod.on .ic{color:var(--azul2)}
.casa{padding:22px;position:relative;overflow:hidden}
.casa .top{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.casa .top img{height:46px}
.casa .nom{font-size:clamp(24px,3.2vw,40px);font-weight:900;letter-spacing:-.02em;line-height:1.05}
.casa .nom em{font-style:normal;color:var(--amarillo)}
.casa small{color:#a9c4f5}
.casa .cj{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;min-height:92px;align-content:flex-start}
.casa .cj span{display:inline-flex;gap:6px;align-items:center;padding:7px 12px;border-radius:999px;background:var(--vidrio2);border:1px solid var(--linea);font-size:13px;font-weight:600;animation:entra .4s}
.casa .cj .ic{color:var(--amarillo)}
@keyframes entra{from{opacity:0;transform:scale(.7)}}
.casa .cuenta{margin-top:14px;font-size:14px;color:#cfe0ff}.casa .cuenta b{font-size:28px;color:var(--amarillo)}
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips2 span{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:12px;background:var(--vidrio);border:1px solid var(--linea);font-size:12.5px}
.chips2 .ic{color:var(--celeste)}
.proto{display:inline-flex;gap:8px;align-items:center;padding:6px 14px;border-radius:999px;background:var(--amarillo);color:#06143f;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.v-ej{position:absolute;bottom:14px;right:14px;z-index:3;font-size:10px;font-weight:700;background:rgba(6,20,63,.7);padding:3px 8px;border-radius:8px}
@media(max-width:900px){.rueda-w,.cfg-w,.comp{grid-template-columns:1fr}.rueda .nodo{width:62px;height:62px;margin:-31px 0 0 -31px;font-size:22px}.rueda .nodo small{display:none}#lang{height:38px}}
.fut{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.fut .col{padding:18px 18px 12px;transition:transform .3s,background .3s,opacity .3s;opacity:.78}
.fut .col.on,.fut .col:hover{opacity:1;transform:translateY(-6px);background:var(--vidrio2)}
.fut .col header{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.fut .col header .ic{font-size:28px;color:var(--amarillo)}
.fut .col header b{display:block;font-size:20px}.fut .col header small{color:#a9c4f5;font-size:12px}
.fut .col:nth-child(1) header .ic{color:var(--verde)}.fut .col:nth-child(3) header .ic{color:var(--celeste)}
.fut li{list-style:none;display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14px;line-height:1.35;border-top:1px solid rgba(255,255,255,.1)}
.fut li .ic{font-size:17px;color:var(--celeste);margin-top:1px}
@media(max-width:900px){.fut{grid-template-columns:1fr}}

/* ===== v7: para quién, un día, responsive ===== */
.mundos{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;margin-top:22px;align-items:stretch}
.mtabs{display:grid;gap:10px}
.mtab{display:flex;gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:18px;background:var(--vidrio);border:1px solid var(--linea);font-weight:800;font-size:clamp(16px,1.7vw,21px);transition:all .25s}
.mtab .ic{font-size:26px;color:var(--celeste)}
.mtab:hover{background:var(--vidrio2)}
.mtab.on{background:#fff;color:var(--tinta);transform:translateX(8px)}.mtab.on .ic{color:var(--azul2)}
.mdet{padding:clamp(20px,3vw,34px)}
.mdet>.ic{font-size:46px;color:var(--amarillo)}
.mdet h3{font-size:clamp(26px,3.2vw,40px);margin:10px 0 4px}
.mdet .lema{color:var(--celeste);font-weight:700;font-size:clamp(15px,1.6vw,19px);margin-bottom:14px}
.mdet ul{display:grid;gap:10px;list-style:none}
.mdet li{display:flex;gap:12px;align-items:flex-start;font-size:clamp(15px,1.5vw,18px);line-height:1.4;color:#e8f0ff}
.mdet li .ic{color:var(--verde);margin-top:3px;font-size:20px}
.dia{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;margin-top:22px;align-items:center}
.reloj{padding:6px 4px}
.hora{font-size:clamp(54px,9vw,120px);font-weight:900;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,#fff,#8fc2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#rango{width:100%;margin:22px 0 10px;accent-color:var(--amarillo);height:8px}
.marcas{position:relative;height:50px;margin:0 8px}
.marca{position:absolute;top:0;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--vidrio2);border:1px solid var(--linea);font-size:20px;transition:all .25s}
.marca.on{background:var(--amarillo);color:#06143f;transform:translateX(-50%) scale(1.18)}
.escena{display:flex;gap:18px;align-items:flex-start;padding:clamp(18px,2.4vw,30px);min-height:210px}
.escena .ei{flex:none;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:32px;background:linear-gradient(135deg,var(--azul2),var(--azul));box-shadow:0 10px 30px rgba(42,107,255,.5)}
.escena small{color:var(--celeste);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.escena h3{font-size:clamp(22px,2.6vw,32px);margin:4px 0 8px}
.escena p{font-size:clamp(15px,1.5vw,18px);line-height:1.5;color:#e1ecff}
.escena.pop{animation:pop .5s cubic-bezier(.2,.9,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.pt{animation:pulsoPt 1.6s ease-in-out infinite}.pt:nth-child(odd){animation-delay:-.8s}
@keyframes pulsoPt{50%{r:7;opacity:.4}}
/* HUD y bloques: celulares */
@media(max-width:900px){
  .sl{padding:66px 18px 112px;justify-content:flex-start}
  .sl>.in{margin:0 auto}
  #marca{top:12px;left:14px;height:26px}
  #ctl{top:10px;right:12px;gap:6px}
  .bt{width:36px;height:36px;font-size:16px}
  #puntos{display:none}
  #pie{bottom:12px;gap:10px;left:12px;right:12px;justify-content:space-between}
  #lang{left:50%;right:auto;transform:translateX(-50%);bottom:16px;height:36px}
  #cuenta{display:none}
  .nav{width:40px;height:40px}
  h2{font-size:clamp(26px,7.4vw,38px)}
  .sub{font-size:15px}
  #s-portada h1{font-size:clamp(34px,10vw,54px)}
  .mundos,.dia{grid-template-columns:1fr}
  .mtabs{grid-template-columns:1fr 1fr}.mtab{padding:12px;font-size:14px}.mtab .ic{font-size:20px}.mtab.on{transform:none}
  .hora{font-size:64px}
  .rueda-w{gap:16px}
  .eje-d{min-height:0;padding:18px}
  .kp{grid-template-columns:1fr 1fr}
  .tab-dash{grid-template-columns:1fr 1fr}
  .fut .col{opacity:1}
  .esca{height:auto}
  .pel .b{height:auto!important;min-height:64px}
  .glob{order:-1}#globo{max-height:46vh;margin:0 auto}
  .chips{justify-content:flex-start}
  .cta .btn{width:100%;justify-content:center}
  .cam-d{min-height:0}
  .dato-l{gap:12px}
  .casa .cj{min-height:0}
  #ayuda{display:none}
}
@media(max-width:900px) and (max-height:760px){.sl{padding-top:58px}}

/* ===== v9: contenido compacto y celular sin scroll ===== */
.futtabs{display:none}
.canal{width:100%;text-align:left;cursor:pointer}
.bene2{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}
.bene2 .vid{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;text-align:center;font-size:15px}
.bene2 .ic{font-size:32px;color:var(--amarillo)}
.alis2{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.alis2 small{color:#a9c4f5;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.alis2>div{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.alis2 img{height:42px;width:auto;background:#fff;border-radius:10px;padding:5px 10px}
.alis2 .dsn{font-weight:900;font-size:20px;letter-spacing:-.03em;padding:6px 14px;border-radius:10px;background:linear-gradient(135deg,var(--azul2),var(--azul))}
.cam .pas b{font-size:15px}
.fte{max-width:110ch}
@media(max-width:900px){
  html,body{height:100%}
  .sl{padding:52px 16px 78px;justify-content:center;overflow:hidden auto}
  .etq{font-size:10px;margin-bottom:8px}
  h2{font-size:clamp(24px,6.8vw,34px);margin-bottom:8px}
  .sub{font-size:14px;line-height:1.4}
  #s-portada h1{font-size:clamp(32px,9.6vw,48px);margin:6px 0 10px}
  #s-portada .sub{margin-bottom:14px}
  .baja{margin-top:18px;font-size:12px}
  .chip{padding:7px 12px;font-size:12.5px}
  /* para quién */
  .mundos{margin-top:12px;gap:12px}
  .mtabs{grid-template-columns:1fr 1fr;gap:8px}
  .mtab{padding:10px 12px;font-size:13.5px;gap:8px}.mtab .ic{font-size:18px}
  .mdet{padding:16px}.mdet>.ic{font-size:32px}.mdet h3{font-size:24px;margin:6px 0 2px}.mdet .lema{margin-bottom:8px;font-size:14px}.mdet li{font-size:14px;gap:8px}.mdet ul{gap:6px}
  /* día */
  .dia{margin-top:10px;gap:10px}.hora{font-size:clamp(44px,15vw,64px)}#rango{margin:10px 0 6px}.marcas{height:40px}.marca{width:36px;height:36px;font-size:16px}
  .escena{padding:14px;min-height:0;gap:12px}.escena .ei{width:48px;height:48px;font-size:24px;border-radius:14px}.escena h3{font-size:20px;margin:2px 0 4px}.escena p{font-size:14px;line-height:1.4}
  /* ejes */
  .rueda-w{margin-top:8px;gap:10px;grid-template-columns:1fr}
  .rueda{width:min(78vw,40vh)}
  .rueda .nodo{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:19px}
  .rueda .nodo small{display:none}
  .rueda .cen img{width:42px!important}
  .eje-d{padding:14px 16px;min-height:0}.eje-d .ic{font-size:30px}.eje-d h3{font-size:20px;margin:4px 0}.eje-d p{font-size:14px;line-height:1.4}
  /* inmersión */
  .dos{grid-template-columns:1fr;gap:10px}
  .tel{order:0}
  .cel{width:min(34vw,19vh);border-radius:24px;padding:6px}
  .cel::before{top:9px;width:42px;height:11px}
  .pan{inset:6px;border-radius:18px}
  .vista{padding:26px 8px 8px;font-size:8px}.v-tit{font-size:11px}.v-bad{font-size:7px;padding:2px 6px}.v-c{padding:5px;margin-top:4px;border-radius:8px}
  .v-ej{display:none}
  .tabs{grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
  .tab{flex-direction:column;gap:4px;padding:8px 2px;text-align:center;font-size:9.5px;border-radius:12px}.tab .ic{font-size:18px}.tab small{display:none}.tab.on{transform:none}
  /* futuro */
  .futtabs{display:flex;gap:8px;margin-top:10px}
  .ftab{flex:1;display:flex;gap:6px;align-items:center;justify-content:center;padding:10px 6px;border-radius:14px;background:var(--vidrio);border:1px solid var(--linea);font-weight:800;font-size:13px}
  .ftab.on{background:#fff;color:var(--tinta)}
  .fut{grid-template-columns:1fr;margin-top:10px}
  .fut .col{display:none;padding:14px;transform:none!important;opacity:1}.fut .col.on{display:block}
  .fut .col header{margin-bottom:6px}.fut li{font-size:14.5px;padding:9px 0}
  /* mundo */
  .glob{order:-1;margin:0 auto}#globo{height:34vh;width:34vh;max-width:84vw;max-height:84vw}
  .canales{gap:8px;margin-top:10px}
  .canal{padding:11px 14px;gap:10px}.canal b{font-size:15px}.canal .ic{font-size:20px}
  .canal span{display:none;font-size:13px;margin-top:2px}.canal.on span{display:block}
  /* config */
  .cfg-w{gap:10px;margin-top:8px}.cfg-in{padding:11px 14px;font-size:16px}
  .mods{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
  .mod{flex-direction:column;gap:3px;padding:8px 2px;font-size:10.5px;text-align:center;border-radius:12px}.mod .ic{font-size:17px}
  .casa{padding:14px}.casa .top img{height:32px}.casa .nom{font-size:22px}.casa .cj{display:none}.casa .cuenta{margin-top:8px}
  /* camino */
  .cam{grid-template-columns:repeat(5,1fr);gap:4px;margin-top:14px}.cam::before{display:block;top:20px}
  .pas{display:block;text-align:center}.pas .nd{width:40px;height:40px;font-size:15px;margin:0 auto 4px}.pas b{display:none}.pas{min-width:0}.cam{overflow:hidden}
  .cam-d{padding:14px;margin-top:12px;min-height:0}.cam-d h4{font-size:17px}.cam-d p{font-size:14px;line-height:1.4}
  .alis2{margin-top:12px;gap:8px}.alis2 img{height:26px;padding:3px 6px}.alis2 .dsn{font-size:14px;padding:4px 10px}.alis2>div{gap:8px}
  /* lorica */
  .gal{grid-template-columns:1fr 1fr;grid-template-rows:20vh 20vh;gap:8px;margin-top:10px}.gal .ft:nth-child(n){grid-column:auto;grid-row:auto}.gal .ft span{font-size:11px}
  .proto{font-size:10px;padding:4px 10px;margin-bottom:6px}
  /* cierre */
  .bene2{grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.bene2 .vid{padding:12px 4px;font-size:11px}.bene2 .ic{font-size:22px}
  .cta{flex-direction:column;gap:8px;align-items:stretch}.btn{padding:12px 16px;font-size:14px;justify-content:center}
  .fte{display:none}
}
@media(max-width:900px) and (max-height:680px){
  .sl{padding-top:46px;padding-bottom:70px}.sub{display:none}.cel{width:min(30vw,17vh)}
}
