/* MAGLIVE: página de inicio */

/* ---------- Hero con video ligado al scroll ---------- */
.hero{position:relative;height:500vh;background:var(--deep)}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;color:#F4F6F8}
.poster,.poster-end{position:absolute;inset:0;background:var(--deep) center/cover no-repeat}
.poster-end{opacity:0}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-out);transform:translateZ(0);will-change:transform}
.video-ready #hero-video{opacity:1}
.video-failed #hero-video{display:none}
/* El video es muy claro: una capa uniforme suave más la viñeta, para que ningún cuadro quede crudo detrás del texto */
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 40%,rgba(10,10,18,.5) 100%),linear-gradient(rgba(10,12,16,.24),rgba(10,12,16,.24))}

.band{position:absolute;z-index:3;opacity:0;text-shadow:var(--tshadow);pointer-events:none}
.band.on{pointer-events:auto}
.band>*{position:relative}
/* El scrim de cada banda llega a las esquinas de su caja, así cubre todo el bloque de texto y se desvanece afuera */
.band::before{content:"";position:absolute;inset:-40% -28%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(farthest-corner at 50% 50%,rgba(5,5,10,var(--sa,.7)) 0%,rgba(5,5,10,var(--sa,.7)) 40%,rgba(5,5,10,calc(var(--sa,.7)*.6)) 58%,rgba(5,5,10,0) 70%)}
.b1{--sa:.72;left:max(24px,4.5vw);top:50%;width:min(34vw,500px);transform:translateY(-44%)}
.b2{--sa:.78;right:max(24px,6.5vw);top:50%;width:min(33vw,500px);transform:translateY(-44%)}
.b2 .display{font-size:clamp(1.6rem,2.6vw,2.7rem)}
.b3{--sa:.72;left:50%;top:calc(var(--header-h) + 5vh);width:min(860px,90vw);transform:translateX(-50%);text-align:center}
.band .kicker{color:#E4E8EC;margin:0}
.band .display{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(1.9rem,3.3vw,3.3rem);line-height:1.04;letter-spacing:-.01em;margin:.35em 0 .5em;color:#fff}
.b3 .display{font-size:clamp(2.3rem,4.8vw,4.6rem)}
.band .sub{font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.5;color:#EEF1F3;max-width:36ch}
.b3 .sub{margin-inline:auto;max-width:46ch}
.b3 .cta{justify-content:center;margin-top:26px}
.band .btn{text-shadow:none}
.band .btn-ghost.light,.static-copy .btn-ghost.light{background:rgba(10,12,16,.42);border-color:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.band .btn-ghost.light:hover,.static-copy .btn-ghost.light:hover{background:rgba(10,12,16,.6);border-color:#fff}

.split-text .w{display:inline-block;white-space:nowrap}
.split-text .c{display:inline-block}

/* Banda 1: las palabras bajan, como la cabina */
.fx-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}
.fx-drift .kicker{opacity:clamp(0,var(--k,0)*3,1)}
.fx-drift .sub,.fx-glide .sub{--ks:clamp(0,(var(--k,0) - .45)*2.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
/* Banda 2: las palabras se deslizan en diagonal, como los escalones de las escaleras */
.fx-glide .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*-28px),calc((1 - var(--kc))*16px))}
/* Banda 3: llegada; palabras que suben y se asientan en tres tiempos */
.fx-settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.fx-settle .sub{--ks:clamp(0,(var(--k,0) - .66)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*12px))}
.fx-settle .cta{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}

.chip{background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85)}
.hud{position:absolute;z-index:4;left:max(24px,4.5vw);bottom:26px;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;color:#EEF1F3}
.hud .mono{font-size:.72rem}
.hud-floor{font-size:1.15rem !important;letter-spacing:.04em;min-width:2.4ch;color:#fff}
.hud-arrow{color:var(--accent);font-size:.7rem}
/* Carga y señal de scroll al centro, para dejar la esquina al botón de WhatsApp */
.ring{position:absolute;z-index:4;left:50%;bottom:24px;width:44px;height:44px;color:#fff;transform:translateX(-50%) rotate(-90deg);transition:opacity .6s var(--ease-out)}
.video-ready .ring{opacity:0}
.cue{position:absolute;z-index:4;left:50%;bottom:26px;width:44px;height:44px;margin-left:-22px;display:grid;place-items:center;color:#fff}
.cue svg{width:22px;height:22px;animation:cue 2.4s var(--ease-io) infinite;animation-delay:-.8s}
@keyframes cue{0%,100%{transform:translateY(-3px);opacity:.6}50%{transform:translateY(4px);opacity:1}}
.static-copy{display:none}
@media (max-height:560px){.hud{display:none}}

/* Las cinco compuertas: celulares, tabletas verticales, táctil vertical, celular horizontal y movimiento reducido */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:100vh;height:100svh;min-height:600px;background:var(--deep) url("../hero-static.jpg?v=20261102") center top/cover no-repeat}
  /* En vertical va una imagen hecha para celular (1440×2560); empieza bajo el encabezado para que no tape la cabina */
  @media (orientation: portrait){.stage{background-image:url("../hero-static-vertical.jpg?v=20261102");background-position:center var(--header-h)}}
  #hero-video,.poster,.poster-end,.band,.hud,.ring,.cue{display:none}
  .scrim{background:linear-gradient(180deg,rgba(10,12,16,0) 0%,rgba(10,12,16,0) 34%,rgba(10,12,16,.6) 60%,rgba(10,12,16,.9) 100%)}
  .static-copy{display:block;position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 max(16px,5vw) clamp(32px,7vh,64px);text-shadow:var(--tshadow);color:#fff}
  .static-copy .kicker{color:#E4E8EC;margin:0}
  .static-copy .display{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(2.1rem,8.4vw,4rem);line-height:1.02;margin:.3em 0 .45em}
  .static-copy .sub{max-width:40ch;color:#EEF1F3;margin-bottom:22px}
  .static-copy .btn{text-shadow:none}
}

/* ---------- Indicador de piso (firma, escritorio amplio) ---------- */
.floor-ind{display:none}
@media (min-width:1400px) and (hover:hover){
  .floor-ind{display:grid;position:fixed;z-index:40;right:14px;top:50%;transform:translateY(-50%);justify-items:center;gap:14px;pointer-events:none}
}
.floor-ind{transition:opacity .5s var(--ease-out)}
.floor-ind.in-hero{opacity:0}
.fi-read{width:54px;height:54px;display:grid;place-items:center;align-content:center;gap:2px;background:var(--deep);color:#fff;border-radius:6px;box-shadow:0 10px 30px rgba(20,24,29,.25);border:1px solid rgba(255,255,255,.08)}
.fi-num{font-family:var(--f-mono);font-weight:500;font-size:1.15rem;line-height:1;transition:opacity .25s,transform .35s var(--ease-out)}
.fi-num.tick{opacity:.2;transform:translateY(6px)}
.fi-arrow{font-size:.58rem;line-height:1;color:var(--accent);opacity:0;transition:opacity .3s,transform .3s}
.floor-ind.moving .fi-arrow{opacity:1}
.floor-ind.up .fi-arrow{transform:rotate(180deg)}
.fi-rail{list-style:none;margin:0;padding:0;display:grid;gap:11px;position:relative}
.fi-rail::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:var(--line-strong);transform:translateX(-50%)}
.floor-ind.dark .fi-rail::before{background:rgba(238,241,243,.35)}
.fi-rail li{width:9px;height:9px;border-radius:50%;background:var(--canvas);border:1.5px solid var(--line-strong);position:relative;transition:background-color .3s,border-color .3s,transform .4s var(--ease-out)}
.floor-ind.dark .fi-rail li{background:var(--deep);border-color:rgba(238,241,243,.45)}
.fi-rail li.on{background:var(--accent) !important;border-color:var(--accent) !important;transform:scale(1.3)}.fi-rail li span{display:none}

/* ---------- Piso 5: la empresa y "Llama al elevador" ---------- */
.empresa-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,100px);align-items:center}
.empresa-grid .link-arrow{display:inline-flex}
/* Cifras: panel grafito, sin interacción; las cifras cuentan una sola vez al aparecer */
.cifras{position:relative;overflow:hidden;background:var(--deep);color:var(--on-deep);border-radius:10px;padding:clamp(24px,3vw,40px);box-shadow:inset 0 4px 0 var(--accent),0 30px 70px rgba(20,24,29,.22)}
.cifras::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(255,255,255,.1),transparent 70%)}
.cifras::after{content:"";position:absolute;left:clamp(24px,3vw,40px);right:clamp(24px,3vw,40px);top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0}
.cifras.live::after{animation:sweep 6s ease-in-out infinite;animation-delay:-2s}
@keyframes sweep{0%,100%{opacity:0;transform:scaleX(.3)}50%{opacity:.9;transform:scaleX(1)}}
.cifras-label{position:relative;color:var(--on-deep-2);margin-bottom:22px}
.stats{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;width:100%}
.stats li{display:grid;gap:2px;padding:16px 0;border-top:1px solid rgba(238,241,243,.12)}
.stats li:last-child{grid-column:1 / -1}
.stats .v{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(1.2rem,1.9vw,1.7rem);line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.stats .v .u{color:var(--accent)}
.stats .l{font-size:.88rem;line-height:1.35;color:var(--on-deep-2)}
@keyframes glow{0%,100%{opacity:0}50%{opacity:.85}}

/* ---------- Piso 4: aplicaciones ---------- */
.app-wrap{position:relative;padding-left:44px}
.app-rail{position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--line)}
.app-car{position:absolute;left:-7px;top:0;width:16px;height:24px;border-radius:2px;background:var(--accent);transform:translateY(var(--y,30px));transition:transform .8s var(--ease-io)}
.app-car::after{content:"";position:absolute;inset:-5px;border-radius:4px;box-shadow:0 0 18px 2px rgba(227,27,35,.45);opacity:0}
.app-wrap.live .app-car::after{animation:glow 4.8s ease-in-out infinite;animation-delay:-2s}
.app-list{list-style:none;margin:0;padding:0}
.app-list li{display:grid;grid-template-columns:52px minmax(150px,1fr) 2fr minmax(220px,1.3fr);gap:8px 24px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.app-list li:last-child{border-bottom:1px solid var(--line)}
.app-list .idx{color:var(--accent)}
.app-list h3{font-size:clamp(1.1rem,1.6vw,1.4rem)}
.app-list p{color:var(--text-secondary)}
.app-list .links{display:grid;gap:8px;justify-items:start}
.app-list .links a{display:inline-flex;align-items:baseline;gap:.4em;font-weight:600;font-size:.96rem;text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px;transition:border-color .3s var(--ease-out)}
.app-list .links a:hover{border-color:var(--accent)}
.app-list .links .arr{transition:transform .4s var(--ease-out)}
.app-list .links a:hover .arr{transform:translateX(4px)}
@media (max-width:900px){
  .app-wrap{padding-left:34px}
  .app-list li{grid-template-columns:36px 1fr}
  .app-list li p,.app-list li .links{grid-column:2}
}

/* ---------- Piso 3: productos ---------- */
.prod-head{grid-template-columns:1fr 1fr;align-items:end;gap:24px 48px}
@media (max-width:900px){.prod-head{grid-template-columns:1fr}}

/* ---------- Piso 2: presencia ---------- */
/* Banda blanca: el rojo queda solo en las rutas, la sede y los acentos */
.presencia{background:var(--panel);border-block:1px solid var(--line)}
.pres-grid{display:grid;grid-template-columns:1fr 1.45fr;gap:clamp(32px,5vw,80px);align-items:center}
.pres-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.pres-big .n{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(3rem,6vw,5.2rem);line-height:1;color:var(--text-primary)}
.pres-big .u{color:var(--accent)}
.pres-big .mono{color:var(--text-secondary)}
/* Mapa de puntos en gris acero; rutas rojas que se dibujan con el scroll y destinos que aparecen al llegar */
.route{margin:0;display:grid;gap:18px}
.route svg{width:100%;height:auto;overflow:visible}
.route .land{fill:none;stroke:#C2CAD1;stroke-width:2.7;stroke-linecap:round}
.route .arc{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--draw,1)}
.route .leg circle{fill:#fff;stroke:var(--accent);stroke-width:1.8;opacity:calc(1 - var(--draw,1)*5)}
.route .pin circle{fill:var(--accent);stroke:#fff;stroke-width:2}
.route .halo{fill:none !important;stroke:var(--accent) !important;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.route.live .halo{animation:halo 3.6s ease-out infinite;animation-delay:-1.2s}
@keyframes halo{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
.route-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;color:var(--text-secondary);font-size:.7rem}
.route-key span{display:inline-flex;align-items:center;gap:8px}
.route-key i{width:10px;height:10px;border-radius:50%}
.route-key .k-hub{background:var(--accent);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--accent)}
.route-key .k-dest{background:#fff;border:2px solid var(--accent)}
.route-key .route-note{margin-left:auto;opacity:.8}
@media (max-width:960px){.pres-grid{grid-template-columns:1fr}}
@media (max-width:600px){.route .land{stroke-width:3.6}.route-key .route-note{margin-left:0}}

/* ---------- Planta baja: cotiza ---------- */
.cotiza-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,5vw,80px);align-items:center}
.cot-img{aspect-ratio:16/11;border-radius:2px}
/* La foto grande lleva el marco de marca y un bloque rojo desfasado detrás, como una segunda hoja */
.cot-frame{position:relative;margin:12px}
.cot-frame::before{content:"";position:absolute;inset:-12px;transform:translate(22px,22px);background:var(--accent);border-radius:2px}
.cot-frame .cot-img{position:relative}
@media (max-width:560px){.cot-frame{margin:8px}.cot-frame::before{inset:-8px;transform:translate(12px,12px)}}
.cot-img.live.in img{animation:kb 24s ease-in-out infinite alternate;animation-delay:1.8s}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (max-width:960px){.empresa-grid,.cotiza-grid{grid-template-columns:1fr}}

/* Movimiento reducido: arcos dibujados y cifras en su valor final */
@media (prefers-reduced-motion:reduce){
  .route .arc{stroke-dashoffset:0 !important}
  .route .leg circle{opacity:1}
}