/* ==========================================================================
   CORPORACIÓN X — v7: una sola pantalla, vistas y escenas de pilar
   --------------------------------------------------------------------------
   La página no se desplaza. Las vistas se superponen y se funden; la escena
   3D queda siempre de fondo y cambia de encuadre con cada una (js/home.js).
   ========================================================================== */

html, body{ height:100%; overflow:hidden; overscroll-behavior:none; }

/* ------------------------------------------------------------------ menú */
.menu{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:20px;
  padding:14px var(--edge);
  background:linear-gradient(180deg, rgba(5,9,15,.78), rgba(5,9,15,.35) 65%, rgba(5,9,15,0));
  opacity:0; transform:translateY(-8px);
  transition:opacity .8s var(--ease-out) .5s, transform .8s var(--ease-out) .5s;
}
body.is-ready .menu{ opacity:1; transform:none; }

.menu__marca{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:.24em; color:var(--text);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.menu__marca img{ width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(37,234,242,.35)); }
/* en la portada el nombre ya está en grande: el menú solo lleva los enlaces */
body[data-vista="portada"] .menu__marca{ opacity:0; transform:translateX(-8px); pointer-events:none; }

.menu__nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.menu__grupo{ position:relative; }
.menu__btn, .menu__link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 15px; border-radius:var(--r-pill);
  font-family:var(--font-head); font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); cursor:pointer;
  transition:color .25s, background .25s;
}
.menu__btn:hover, .menu__link:hover, .menu__grupo.is-abierto .menu__btn{ color:var(--text); background:rgba(255,255,255,.05); }
.menu__link.is-actual, .menu__grupo.is-actual .menu__btn{ color:var(--cyan); }
.menu__chev{
  width:6px; height:6px; margin-top:-3px;
  border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg); transition:transform .3s var(--ease-io), margin .3s;
}
.menu__grupo.is-abierto .menu__chev{ transform:rotate(225deg); margin-top:3px; }

.menu__desp{
  position:absolute; top:calc(100% + 10px); left:50%;
  min-width:300px; padding:8px;
  display:flex; flex-direction:column; gap:2px;
  border:var(--rule) solid var(--line); border-radius:var(--r-lg);
  background:rgba(7,12,20,.93);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translate(-50%, -6px);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s;
}
.menu__desp::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }   /* puente para el ratón */
.menu__grupo.is-abierto .menu__desp{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; }
.menu__desp a{
  display:flex; flex-direction:column; gap:3px;
  padding:11px 14px; border-radius:var(--r-md);
  transition:background .2s;
}
.menu__desp a:hover, .menu__desp a.is-actual{ background:rgba(37,234,242,.07); }
.menu__desp a b{ font-family:var(--font-head); font-size:13.5px; font-weight:700; color:var(--text); letter-spacing:.02em; }
.menu__desp a span{ font-size:12px; color:var(--text-3); }
.menu__desp--pilares{ min-width:330px; }
.menu__desp--pilares a:not(.menu__todos){
  display:grid; grid-template-columns:14px 1fr; column-gap:10px; row-gap:2px; align-items:center;
}
.menu__desp--pilares a span{ grid-column:2; }
.menu__desp--pilares a:hover b, .menu__desp--pilares a.is-actual b{ color:var(--acc); }
.menu__pip{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 10px var(--acc);
}
.menu__todos{
  margin-top:4px; border-top:var(--rule) solid var(--line-soft); border-radius:0 0 var(--r-md) var(--r-md) !important;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan) !important;
}

/* menú móvil */
.menu__hamb{
  display:none; margin-left:auto; width:42px; height:42px; border-radius:50%;
  border:var(--rule) solid var(--line); background:rgba(8,14,22,.7);
  position:relative; cursor:pointer;
}
.menu__hamb i{
  position:absolute; left:12px; right:12px; height:1.5px; background:var(--text);
  transition:transform .3s var(--ease-io), top .3s var(--ease-io);
}
.menu__hamb i:first-child{ top:16px; }
.menu__hamb i:last-child{ top:24px; }
.menu__hamb[aria-expanded="true"] i:first-child{ top:20px; transform:rotate(45deg); }
.menu__hamb[aria-expanded="true"] i:last-child{ top:20px; transform:rotate(-45deg); }
.menu-movil{
  position:fixed; inset:0; z-index:58;
  display:flex; flex-direction:column; gap:2px;
  padding:88px var(--edge) 100px; overflow:auto;
  background:rgba(5,9,15,.95);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .3s var(--ease-out);
}
html.menu-movil-abierto .menu-movil{ opacity:1; }
/* sin esto el display:flex anula [hidden] y el menú, invisible, tapa la pantalla y se come el puntero */
.menu-movil[hidden]{ display:none; }
.menu-movil a{
  padding:12px 4px; border-bottom:var(--rule) solid var(--line-soft);
  font-family:var(--font-head); font-size:21px; font-weight:700; color:var(--text);
}
.menu-movil a.is-actual{ color:var(--cyan); }
.menu-movil__rot{ margin:22px 0 4px; font-size:10px; letter-spacing:.24em; color:var(--text-3); }
.menu-movil a.menu-movil__pilar{ display:flex; align-items:center; gap:12px; font-size:16px; padding:10px 4px; }
.menu-movil a.menu-movil__pilar.is-actual{ color:var(--acc); }

@media (max-width:820px){
  .menu__nav{ display:none; }
  .menu__hamb{ display:block; }
}

/* ---------------------------------------------------------------- vistas */
#vistas{ position:fixed; inset:0; z-index:10; pointer-events:none; }
.vista{
  position:absolute; inset:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .5s var(--ease-out), visibility 0s .5s;
}
.vista.is-activa{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .8s var(--ease-out) .18s, visibility 0s;
}
.vista--portada.is-activa{ pointer-events:none; }       /* la X y la órbita reciben el ratón */
.vista--portada.is-activa .hero__marca{ pointer-events:auto; }
.vista.hero{ min-height:0; }

/* páginas: columna de lectura a la izquierda, la figura a la derecha */
.vista--pagina{
  display:flex; align-items:center;
  padding:84px var(--edge) 86px;
}
.vista__panel{
  width:min(1020px, 62vw); max-height:100%;
  overflow-y:auto; overscroll-behavior:contain;
  padding:6px 14px 6px 2px;
  scrollbar-width:thin; scrollbar-color:rgba(37,234,242,.25) transparent;
  transform:translateY(22px);
  transition:transform .9s var(--ease-out);
}
.vista.is-activa .vista__panel{ transform:none; transition-delay:.18s; }
.vista--pilares .vista__panel{ width:min(1340px, 100%); }
.vista .seccion__cab{ margin-bottom:clamp(22px,4vh,44px); }
.vista .seccion__cab{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease-out) .25s, transform .7s var(--ease-out) .25s; }
.vista.is-activa .seccion__cab{ opacity:1; transform:none; }
.vista__pie{ margin-top:clamp(26px,4vh,44px); font-size:9.5px; letter-spacing:.16em; color:var(--text-3); }
.vista .mvv__sub{ margin-top:clamp(24px,4vh,48px); }

/* el velo cambia con la vista */
.scrim{ opacity:1; transition:opacity .9s var(--ease-out), background .9s; }
body[data-vista="portada"] .scrim{ opacity:0; }
body[data-vista="pilares"] .scrim{ background:rgba(6,11,20,.74); }
body[data-vista="pilar"] .scrim{
  background:linear-gradient(260deg,
    rgba(6,11,20,.86) 0%, rgba(6,11,20,.62) 34%, rgba(6,11,20,.12) 56%, rgba(6,11,20,0) 70%);
}

/* menú de pilares: toda la ficha entra en la escena */
.vista--pilares .pilar{ cursor:pointer; }
.pilar__abrir{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc); transition:gap .3s var(--ease-io);
}
.pilar:hover .pilar__abrir{ gap:13px; }
.pilar__isologo img{ width:min(260px, 100%); }

/* ------------------------------------------------- la escena de un pilar */
.vista--pilar{
  display:flex; align-items:center; justify-content:flex-end;
  padding:84px var(--edge) 86px;
}
.ep{
  --acc:var(--cyan);
  position:relative;
  width:min(500px, 42vw); max-height:100%;
  overflow-y:auto; overscroll-behavior:contain;
  padding:26px 28px 20px;
  border:var(--rule) solid color-mix(in srgb, var(--acc) 38%, transparent);
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--acc) 13%, transparent), transparent 60%),
    linear-gradient(170deg, rgba(10,17,27,.9), rgba(6,11,19,.92));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 40px 90px -40px color-mix(in srgb, var(--acc) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--acc) 40%, transparent) transparent;
  transform:translateX(34px); opacity:0;
  transition:transform .9s var(--ease-out) .2s, opacity .7s var(--ease-out) .2s, border-color .6s, box-shadow .6s;
}
.vista--pilar.is-activa .ep{ transform:none; opacity:1; }
.ep.is-cambiando{ opacity:0 !important; transform:translateY(10px) !important; transition:opacity .24s, transform .24s; }

.ep__cab{
  display:flex; justify-content:space-between; gap:12px; padding-right:38px; margin-bottom:20px;
  font-size:10px; letter-spacing:.2em;
}
.ep__codigo{ color:var(--acc); }
.ep__cuenta{ color:var(--text-3); }
.ep__cerrar{
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font-size:20px; line-height:1; color:var(--text-2);
  border:var(--rule) solid var(--line-soft);
  transition:color .2s, border-color .2s, background .2s;
}
.ep__cerrar:hover{ color:var(--text); border-color:var(--acc); background:rgba(255,255,255,.04); }

.ep__marca{ margin:0 0 12px; line-height:0; }
.ep__isologo img{ display:block; width:min(330px, 100%); height:auto; }
.ep__isologo .isologo-alphax b{ font-size:50px; }
.ep__isologo .isologo-alphax i{ font-size:16px; }
.ep__titulo{
  margin:0 0 10px; font-family:var(--font-head); font-weight:800;
  font-size:clamp(28px,3vw,42px); letter-spacing:.01em; line-height:1.05; color:var(--text);
  text-shadow:0 0 34px color-mix(in srgb, var(--acc) 35%, transparent);
}
.ep__dominio{ margin:0 0 16px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); }
.ep__resumen{ margin:0 0 18px; font-size:clamp(15px,1.2vw,17.5px); line-height:1.6; color:var(--text); }
.ep__servicios{
  list-style:none; margin:0 0 18px; padding:0;
  display:grid; gap:7px;
}
.ep__servicios li{
  position:relative; padding-left:18px; font-size:13.5px; line-height:1.45; color:var(--text-2);
}
.ep__servicios li::before{
  content:""; position:absolute; left:2px; top:.5em; width:6px; height:6px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 8px var(--acc);
}
.ep__datos{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  margin:0 0 20px; padding:14px 0; border-top:var(--rule) solid var(--line-soft); border-bottom:var(--rule) solid var(--line-soft);
}
.ep__datos dt{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px; }
.ep__datos dd{ margin:0; font-size:14px; color:var(--text); }
.ep__sello{ display:inline-flex; align-items:center; gap:6px; color:var(--cyan) !important; }

.ep__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.ep__ir{
  color:#fff; border-color:color-mix(in srgb, var(--acc) 70%, transparent);
  background:color-mix(in srgb, var(--acc) 18%, transparent);
}
.ep__ir:hover{ background:color-mix(in srgb, var(--acc) 32%, transparent); border-color:var(--acc); color:#fff; }
.ep__bot{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-2);
  border-bottom:var(--rule) solid transparent; transition:color .2s, border-color .2s;
}
.ep__bot:hover{ color:var(--acc); border-color:var(--acc); }
.ep__pronto{ font-size:9.5px; letter-spacing:.16em; color:var(--text-3); }

.ep__nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:22px; padding-top:14px; border-top:var(--rule) solid var(--line-soft);
}
.ep__flecha{
  display:inline-flex; align-items:center; gap:6px; min-width:0; flex:1;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  transition:color .2s;
}
.ep__flecha span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ep__flecha--sig{ justify-content:flex-end; }
.ep__flecha:hover{ color:var(--text); }
.ep__pips{ display:flex; gap:9px; flex:none; }
.ep__pips a{
  width:8px; height:8px; border-radius:50%; background:var(--acc); opacity:.3;
  transition:opacity .2s, transform .3s var(--ease-io), box-shadow .3s;
}
.ep__pips a:hover{ opacity:.8; }
.ep__pips a.is-on{ opacity:1; transform:scale(1.4); box-shadow:0 0 10px var(--acc); }

/* --------------------------------------------------------------- móvil
   En vertical la figura sube (scene-core: encuadrePilar) y el panel es una
   hoja por abajo; las páginas ocupan todo el ancho. */
@media (max-width:1024px){
  .vista__panel{ width:100%; }
}
@media (max-aspect-ratio: 6/5){
  .vista--pilar{ align-items:flex-end; justify-content:center; padding:76px 12px 74px; }
  .ep{ width:min(560px, 100%); max-height:50dvh; padding:20px 20px 16px; transform:translateY(30px); }
  .ep__isologo img{ width:min(250px, 100%); }
  .ep__isologo .isologo-alphax b{ font-size:38px; }
  body[data-vista="pilar"] .scrim{
    background:linear-gradient(0deg, rgba(6,11,20,.88) 0%, rgba(6,11,20,.55) 45%, rgba(6,11,20,0) 62%);
  }
}
@media (max-width:640px){
  .vista--pagina{ padding:74px 16px 74px; }
  .ep__datos{ grid-template-columns:repeat(2, 1fr); }
  .ep__flecha span{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .vista, .vista__panel, .ep, .vista .seccion__cab{ transition:none !important; transform:none !important; }
}