/* ===== LA PÁGINA ES UN CUBO · Premium Edition (4 caras físicas, N secciones) ===== */
:root{--hh:77px;--ease2:cubic-bezier(.72,0,.18,1)}
body.cubo{background:#02030a}
/* ESPACIO: nebulosas a la deriva + planeta lejano; las estrellas las pinta js/space.js (canvas#space) */
body.cubo::before{content:"";position:fixed;inset:-12%;z-index:0;pointer-events:none;
 background:
  radial-gradient(ellipse 48% 42% at 16% 24%,rgba(92,52,210,.34),transparent 70%),
  radial-gradient(ellipse 44% 40% at 86% 20%,rgba(20,120,255,.30),transparent 72%),
  radial-gradient(ellipse 52% 36% at 72% 92%,rgba(190,50,170,.22),transparent 70%),
  radial-gradient(ellipse 40% 34% at 8% 88%,rgba(0,190,220,.20),transparent 72%),
  radial-gradient(circle at 50% 50%,#050816,#01020609 100%);
 animation:nebula 38s ease-in-out infinite alternate}
@keyframes nebula{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(1.5%,1.2%,0) scale(1.06)}}
#space{position:fixed;left:0;top:0;z-index:0;pointer-events:none}
body.cubo::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
/* sin JavaScript: secciones apiladas */
#src{max-width:760px;margin:0 auto;padding:30px 22px 70px}
#src .sec{border:1px solid var(--line);background:var(--card);padding:32px;margin-bottom:22px;display:flex;flex-direction:column;gap:6px}#src .ph{display:none}
.stage{display:none}
/* con JavaScript */
.js #src{display:none}
.js body.cubo{height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none}
.js body.cubo header{flex:none;position:relative;z-index:50}.js body.cubo main{flex:1;min-height:0;position:relative}
.js .stage{display:block;position:absolute;inset:0;overflow:hidden;perspective:1250px;perspective-origin:50% 42%;touch-action:none;user-select:none;-webkit-user-select:none;--h:min(calc(100svh - var(--hh) - 104px),720px);--w:var(--h)}

@keyframes breathe{50%{box-shadow:0 0 170px 34px rgba(26,140,255,.55),0 0 50px rgba(45,212,255,.38),0 0 300px 80px rgba(90,60,220,.24)}}
.floor{position:absolute;left:50%;top:calc(50% + var(--h)/2 + 6px);width:calc(var(--w)*.9);height:46px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(26,140,255,.55),rgba(26,140,255,.12) 45%,transparent 70%);filter:blur(12px);pointer-events:none}
.cube-box{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);transform-style:preserve-3d;animation:cubeIn 1.4s var(--ease) both}
@keyframes cubeIn{from{opacity:0;transform:rotateX(-80deg) scale(.78)}to{opacity:1;transform:none}}
.dolly{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(var(--tx,0)*8deg + var(--wob,0deg))) rotateX(calc(var(--ty,0)*-6deg)) scale(var(--s,1));transition:transform .42s var(--ease2)}
.cube{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--h)/-2)) rotateX(calc(var(--n,0)*90deg));transition:transform .72s var(--ease2);will-change:transform}
.face{position:absolute;inset:0;transform:rotateX(calc(var(--i)*-90deg)) translateZ(calc(var(--h)/2));backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:linear-gradient(180deg,#141a24,#0a0d13 70%);box-shadow:inset 0 0 0 1px rgba(120,190,255,calc(.12 + var(--k,0)*.5)),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -60px 80px -40px rgba(26,140,255,.14),0 0 calc(var(--k,0)*26px) rgba(45,212,255,calc(var(--k,0)*.35));transition:box-shadow .72s var(--ease2);padding:clamp(24px,3.6vw,52px);outline:none}
.face::before{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,25%),rgba(160,210,255,.10),transparent 60%);z-index:8;pointer-events:none}
.face::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--k,0)*.46);transition:opacity .72s var(--ease2);pointer-events:none;z-index:9}
.face.go{background:linear-gradient(165deg,#0b4aa3,#0a2147 55%,#070b14)}
/* fotografía de cada sección */
.ph{position:absolute;left:0;right:0;top:0;height:54%;background-position:center;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 28%,rgba(0,0,0,.35) 70%,transparent);mask-image:linear-gradient(180deg,#000 28%,rgba(0,0,0,.35) 70%,transparent);animation:kb 9s var(--ease) both,phIn 1.2s .2s both;z-index:0;transform-origin:50% 40%}
.ph.full{height:100%;-webkit-mask-image:radial-gradient(ellipse at 50% 38%,#000 20%,rgba(0,0,0,.35) 60%,transparent 92%);mask-image:radial-gradient(ellipse at 50% 38%,#000 20%,rgba(0,0,0,.35) 60%,transparent 92%)}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,14,.38),rgba(4,8,14,0) 70%)}.ph.full::after{background:radial-gradient(ellipse at 50% 45%,rgba(4,8,14,.12),rgba(4,8,14,0))}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}@keyframes phIn{from{opacity:0}to{opacity:1}}
.sec>*:not(.ph){position:relative;z-index:1}
/* ghost, puntos, contador */
.ghosts{position:absolute;left:0;right:0;bottom:0;height:1px;font-size:clamp(90px,17vw,250px);line-height:1;pointer-events:none}
.ghost{position:absolute;left:0;right:0;bottom:-.2em;text-align:center;font-weight:800;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(110,180,255,.16);white-space:nowrap;opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s var(--ease2)}.ghost.on{opacity:1;transform:none}
.dots{position:absolute;left:clamp(6px,2vw,30px);top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:flex-start}
.dots button{position:relative;width:28px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0}
.dots button::before{content:"";width:7px;height:7px;border-radius:4px;background:#3a4656;transition:height .35s var(--ease),background .25s,box-shadow .3s}
.dots button[aria-current=true]::before{height:22px;background:var(--cy);box-shadow:0 0 14px var(--cy)}.dots button:hover::before{background:#fff}
.dots button[aria-current=true]::after{content:attr(data-t);position:absolute;left:30px;top:50%;transform:translateY(-50%);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#cfe3f7;white-space:nowrap;animation:up .5s .3s both}
.dots .next{margin-top:8px;color:var(--mute)}.dots .next::before{width:9px;height:9px;border:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;border-radius:0;background:none!important;box-shadow:none!important;transform:rotate(45deg) translate(-2px,-2px)}.dots .next:hover{color:var(--cy)}
.count{position:absolute;right:clamp(14px,2.6vw,38px);top:50%;transform:translateY(-50%);z-index:6;margin:0;font-size:12px;letter-spacing:.2em;color:var(--mute);writing-mode:vertical-rl;font-variant-numeric:tabular-nums}.count b{color:#fff;font-weight:700}
.hint{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:12px;color:var(--mute);letter-spacing:.06em;transition:opacity .6s;pointer-events:none;z-index:6;animation:up .8s 3.2s both}.hint.off{opacity:0!important}
.credits-mini{position:absolute;left:0;right:0;bottom:8px;margin:0;text-align:center;font-size:11px;color:#6f7d8c;z-index:6;pointer-events:none}.credits-mini a{pointer-events:auto;color:#8c9aa9;text-decoration:underline;text-underline-offset:2px}
/* ===== contenido: minimalista y de lujo ===== */
.sec{display:flex;flex-direction:column;height:100%;min-height:0}
.f-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#bcd2e8;display:flex;align-items:center;gap:12px;margin:0 0 16px}
.f-eyebrow::before{content:"";width:22px;height:6px;background:var(--cy);box-shadow:0 0 12px var(--cy);transform:rotate(45deg);flex:none}
.f-title{font-size:clamp(28px,3.7vw,54px);line-height:1.03;margin:0 0 16px;max-width:12em;text-wrap:balance;letter-spacing:-.045em;font-weight:650;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.f-lead{font-size:clamp(15px,1.3vw,17px);max-width:30em;margin:0;color:#b4c3d2}
.body{margin-top:auto;display:flex;flex-direction:column;gap:14px}.body p{margin:0;font-size:clamp(14px,1.2vw,16px);max-width:32em;color:#b4c3d2}
.checks{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:7px;font-weight:600;font-size:14px;color:#fff}.checks li::before{content:"";display:inline-block;width:12px;height:4px;background:var(--cy);transform:rotate(45deg);margin-right:14px;vertical-align:middle}
.textlink{font-size:14px;font-weight:700;color:var(--cy)}.textlink:hover{text-decoration:underline;text-underline-offset:5px}.textlink.foot{margin-top:16px}
.rows{margin-top:auto;border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:clamp(34px,4vw,50px) 1fr auto;gap:0 12px;align-items:start;padding:clamp(11px,1.9vh,20px) 0;border-bottom:1px solid var(--line)}
.row .mn{font-size:12px;font-weight:700;color:var(--cy);letter-spacing:.14em;padding-top:5px}
.row h3{font-size:clamp(17px,1.7vw,23px);margin:0 0 4px;letter-spacing:-.025em;font-weight:650}.row p{margin:0;font-size:clamp(12.5px,1.02vw,14.5px);line-height:1.5;color:#a7b6c5}
.row a{position:absolute;inset:0}.row .ar{align-self:center;color:var(--cy);font-weight:700;font-size:20px;transition:transform .3s var(--ease)}.row:hover .ar{transform:translateX(6px)}.row:hover h3{color:var(--cy)}
.home{justify-content:center;align-items:center;text-align:center;gap:clamp(16px,3.4vh,40px)}
.home .qw{width:min(100%,500px);flex:none;overflow:visible;filter:drop-shadow(0 8px 40px rgba(26,140,255,.35))}
.qw .q path,.qw .w path,.qw .txt path{fill:#fff}
.home h1{font-size:clamp(24px,3vw,40px);line-height:1.08;margin:0 0 22px;font-weight:650}.home h1 b{color:var(--cy);font-weight:650}
.f-actions{display:flex;gap:22px;flex-wrap:wrap;align-items:center}.home .f-actions{justify-content:center}
.route{width:100%;height:auto;margin:auto 0 18px;overflow:visible}.route path{fill:none;stroke:var(--cy);stroke-width:2;stroke-dasharray:3 8;animation:dash 2.4s linear infinite;filter:drop-shadow(0 0 6px var(--cy))}.route circle{fill:#fff}.route circle:last-child{fill:var(--cy)}
@keyframes dash{to{stroke-dashoffset:-22}}
.go .f-title{font-size:clamp(30px,4.2vw,60px);max-width:10.5em}.go .f-lead{color:#d6e8fa}
.go .f-actions{margin-top:auto}.go .tag{margin:26px 0 0;color:#b9d3ee;font-size:13px;border-top:1px solid #ffffff3a;padding-top:16px}
/* entrada escalonada */
.face .rv{animation:up .55s calc(.3s + var(--j,0)*.08s) var(--ease) both}
.face .qw .q{animation:qIn .9s .3s var(--ease) both}.face .qw .w{animation:wIn .9s .85s var(--ease) both}
.face .qw .bar-logo{animation:barIn .8s 1.4s var(--ease) both}.face .qw .l{animation:up .6s calc(1.9s + var(--i)*.06s) var(--ease) both}
.face .f-copy{animation:up .8s 2.35s var(--ease) both}
/* ===== móvil / vertical ===== */
@media(max-width:760px),(max-aspect-ratio:1/1){
:root{--hh:71px}
.js .stage{--w:min(84vw,560px);--h:min(calc(100svh - var(--hh) - 92px),780px)}
.face{padding:20px}.dots button[aria-current=true]::after{display:none}.dots{left:1px}.dots button{width:24px}.count{display:none}
.f-title{font-size:clamp(24px,7vw,34px)}.go .f-title{font-size:clamp(28px,8.4vw,40px)}
.row{grid-template-columns:30px 1fr auto;padding:10px 0}.row h3{font-size:16px}.row p{font-size:12.5px;line-height:1.45}.row .ar{display:none}
.hint{display:none}.ph{height:50%}}
@media(max-height:660px){.row p{display:none}.f-lead{display:none}.body p:nth-child(2){display:none}}
@media(max-height:480px){.dots{display:none}}
@media(prefers-reduced-motion:reduce){.cube,.face,.face::after,.dolly,.ghost{transition:none}.route path{animation:none}.cube-box,.ph{animation:none}.face .rv,.face .qw *,.face .f-copy{animation:none!important;opacity:1!important}}

/* títulos legibles sobre fotos claras */
.face .f-title,.face .f-eyebrow{text-shadow:0 2px 22px rgba(2,6,14,.75),0 0 2px rgba(2,6,14,.5)}

/* ===== ARISTAS: el esqueleto del cubo aparece mientras rueda ===== */
.wire{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;opacity:0;transition:opacity .45s ease}
.cube-box.rolling .wire{opacity:1;transition:opacity .12s ease}
.wire i{position:absolute;left:0;top:50%;width:100%;height:0;border-top:2px solid rgba(255,255,255,.96);
 box-shadow:0 0 8px rgba(255,255,255,.95),0 0 22px rgba(130,205,255,.85),0 0 46px rgba(60,140,255,.55);
 transform:rotateX(calc(45deg + var(--k)*90deg)) translateZ(calc(var(--h)*.70711 + 1px))}
.wire i::before,.wire i::after{content:"";position:absolute;top:-6px;width:10px;height:10px;margin:0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.95),0 0 30px 6px rgba(80,170,255,.8)}
.wire i::before{left:0}.wire i::after{right:0;left:auto}
.wire b{position:absolute;top:0;left:calc(50% - var(--h)/2);width:var(--h);height:var(--h);border:2px solid rgba(255,255,255,.75);
 box-shadow:0 0 14px rgba(150,215,255,.7),inset 0 0 22px rgba(80,170,255,.35)}
.wire b:first-of-type{transform:translateX(calc(var(--w)/-2 - 1px)) rotateY(90deg)}
.wire b:last-of-type{transform:translateX(calc(var(--w)/2 + 1px)) rotateY(90deg)}
@media(prefers-reduced-motion:reduce){.wire{display:none}}

/* ===== SPLASH 3 s: el logo se arma solo, sin barras ni loaders ===== */
#splash{display:none}
.js #splash{display:grid;place-items:center;position:fixed;inset:0;z-index:200;pointer-events:none;
 background:radial-gradient(ellipse at 50% 50%,transparent 28%,rgba(0,0,0,.6));
 animation:spOut .55s 2.45s cubic-bezier(.55,0,.8,.2) forwards}
#splash::before{content:"";position:absolute;left:50%;top:50%;width:min(120vw,900px);height:min(120vw,900px);margin:calc(min(120vw,900px)/-2) 0 0 calc(min(120vw,900px)/-2);border-radius:50%;
 background:radial-gradient(circle,rgba(26,140,255,.38),rgba(120,70,255,.16) 40%,transparent 68%);opacity:0;animation:spGlow 2.4s .5s ease-out forwards}
.sp-logo{position:relative;width:min(78vw,540px);height:auto;overflow:visible;filter:drop-shadow(0 10px 50px rgba(26,140,255,.5))}
.sp-logo .q path,.sp-logo .w path,.sp-logo .txt path{fill:#fff}
.sp-logo .q,.sp-logo .w,.sp-logo .bar-logo{transform-box:fill-box;transform-origin:center}
.sp-logo .q{animation:qIn .9s .2s var(--ease) both}
.sp-logo .w{animation:wIn .9s .65s var(--ease) both}
.sp-logo .bar-logo{animation:barIn .8s 1.15s var(--ease) both}
.sp-logo .l{animation:up .6s calc(1.55s + var(--i)*.06s) var(--ease) both}
@keyframes spOut{to{opacity:0;transform:scale(1.18);filter:blur(6px);visibility:hidden}}
@keyframes spGlow{0%{opacity:0;transform:scale(.45)}45%{opacity:1}100%{opacity:.7;transform:scale(1)}}
html.splashing header,html.splashing .stage,html.splashing .skip{display:none!important}
.js body.cubo header{animation:hdrIn .8s var(--ease) both}
@keyframes hdrIn{from{transform:translateY(-100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){#splash,#splash::before,.sp-logo *{animation-duration:.01s!important;animation-delay:0s!important}#splash{animation:spOut .3s .6s forwards!important}.js body.cubo header{animation:none}}

/* ===== contenido de marketing ===== */
.chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin:-6px 0 4px;font-size:clamp(11px,1vw,13px);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#cfe3f7}
.chips i{width:5px;height:5px;background:var(--cy);transform:rotate(45deg);box-shadow:0 0 10px var(--cy)}
.hl{color:var(--cy);font-weight:700;white-space:nowrap}
.f-note{margin:12px 0 0;font-size:11px;line-height:1.5;color:#7f8fa1;max-width:60em}.f-note a{color:#a9c3de;text-decoration:underline;text-underline-offset:2px;pointer-events:auto}
.plats{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.plat{position:relative;display:grid;place-items:center;height:clamp(72px,13vh,118px);border:1px solid var(--line);background:rgba(255,255,255,.045);backdrop-filter:blur(6px)}
.plat img{max-width:68%;max-height:56%;object-fit:contain}
.plat .nm{display:none;font-weight:800;font-size:clamp(22px,2.7vw,36px);letter-spacing:-.04em;color:#fff}.plat.nl .nm{display:block}
.legal{max-width:760px}.legal h2{font-size:clamp(20px,2.2vw,28px);margin:34px 0 10px}.legal h2:first-child{margin-top:0}.legal p{color:var(--mute)}.legal-meta{margin-top:34px;font-size:13px}
@media(max-width:700px){.plats{grid-template-columns:1fr 1fr}.plats .plat:last-child{grid-column:1/-1}.f-note{font-size:10px}}

/* arte de fondo: se desplaza a la derecha y el velo protege el texto */
.sec:not(.home) .ph{background-position:center;background-size:cover}
.sec:not(.home) .ph::after{background:linear-gradient(90deg,rgba(4,8,14,.55) 0%,rgba(4,8,14,.28) 45%,rgba(4,8,14,0) 85%)}
@media(max-width:700px){.sec:not(.home) .ph{background-position:70% 30%}.sec:not(.home) .ph::after{background:linear-gradient(180deg,rgba(4,8,14,.80),rgba(4,8,14,.55) 60%,rgba(4,8,14,.2))}
.credits-mini{font-size:10px}.credits-mini .rs{display:none}}