/* ============================================================
GERPRO — Ecosistema + Gerpro IA² · v2 dark / futurista
Solo el home (el cubo). La paleta, el reset y el fondo estan en
tokens.css, que se carga antes que este archivo y lo comparten
el home y los seis subsitios de servicio.
============================================================ */
:root{
/* Medidas propias del cubo (ahora chico, vive en .dims-nav — ver mas abajo);
el resto de tokens viene de tokens.css */
--cube:clamp(96px, 9.5vw, 138px);
--half:calc(var(--cube) / 2);
}
body.ia{ overflow:hidden; }
/* ---------- Logos oficiales ---------- */
/* width:auto es obligatorio: el — si los tres
fueran hijos directos de header, space-between los separaria entre si
con huecos iguales en vez de dejarlos pegados a la derecha. */
.head-r{ display:flex; align-items:center; gap:26px; }
nav{ display:flex; align-items:center; gap:26px; }
nav a{
font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color:var(--ink); text-decoration:none; opacity:.6; transition:opacity .2s;
}
nav a:hover{ opacity:1; }
/* Acción principal del header: relleno sólido, como los demás CTA del sitio */
/* Sin el resplandor morado pulsante que traia antes (@keyframes btn-ia-glow):
queda solo la sombra de elevacion, a pedido de Juan. */
.btn-ia{
border:none; background:var(--ia-violeta); color:#fff;
font-family:var(--display); font-weight:800;
font-size:15px; letter-spacing:.01em;
padding:13px 26px; border-radius:var(--radius-pill);
display:inline-flex; align-items:center; gap:0;
box-shadow:0 10px 26px rgba(0,0,0,.35);
transition:background .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.btn-ia .sup{ color:#fff; font-weight:800; }
.btn-ia .arw{ margin-left:11px; transition:transform .25s cubic-bezier(.22,1,.36,1); }
.btn-ia:hover{
background:var(--ia-fucsia); transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.4);
}
.btn-ia:hover .arw{ transform:translateX(4px); }
.btn-ia:active{ transform:scale(.97); }
/* ---------- Escenario 3D (fijo) ---------- */
/* ---------- Cubo de navegación (chico, dentro de .dims-nav) ----------
Mismo cubo 3D de siempre (misma geometria ortogonal f-front/f-right/
f-back/f-left/f-top/f-bottom), pero ya no mide su rotacion contra el
scroll de toda la pagina: ahora vive a tamaño de icono arriba del menu
de pestañas de .dims-nav y solo gira cuando se elige una pestaña (ver
KF/setActiveDim en ecosistema.js), con una transicion CSS en vez de la
interpolacion cuadro a cuadro de antes — no hace falta rAF para una
rotacion que ocurre una vez por clic. Las caras ya no llevan el
contenido del producto dentro (nombre/logo/tag): esa informacion ya
esta al lado, en .txt — el cubo es identidad visual, no un duplicado. */
.dims-cube{
perspective:480px; perspective-origin:50% 46%;
position:relative;
width:var(--cube); height:var(--cube);
/* Centrado (0 auto), no a la izquierda: probado a ras con el menu y Juan
lo prefirió centrado sobre la fila de botones — ver la maqueta que
mandó. 80px de por medio con el menu, a pedido explícito. */
margin:0 auto 80px;
}
/* Quieto: antes giraba con @keyframes orb, quitado a pedido de Juan junto
con el resto de animaciones que ?lowfx apagaba. */
.orbit{
position:absolute; left:50%; top:50%;
width:calc(var(--cube) * 1.9); height:calc(var(--cube) * 1.9);
margin:calc(var(--cube) * -0.95) 0 0 calc(var(--cube) * -0.95);
border-radius:50%;
border:1px solid rgba(127,192,183,.30);
transform:rotateX(76deg);
pointer-events:none;
}
#cubeWrap{ position:relative; width:100%; height:100%; transform-style:preserve-3d; }
#cube{
width:var(--cube); height:var(--cube);
position:relative; transform-style:preserve-3d;
transition:transform .7s var(--ease-out);
}
/* Caras: vidrio holográfico, sin contenido — solo se tiñen al activarse. */
.face{
position:absolute; inset:0;
background:linear-gradient(155deg, rgba(127,192,183,.10), rgba(41,46,89,.10) 55%, rgba(255,255,255,.03));
border:1px solid var(--hair);
transition:background .5s ease, border-color .5s ease;
}
.face.on{
background:linear-gradient(160deg,
color-mix(in srgb, var(--c) 30%, transparent),
color-mix(in srgb, var(--c) 10%, transparent) 60%,
rgba(255,255,255,.02));
border-color:color-mix(in srgb, var(--c) 75%, transparent);
}
/* esquinas HUD en la cara activa */
.face .hud{ position:absolute; width:9px; height:9px; opacity:0; transition:opacity .4s ease; }
.face.on .hud{ opacity:.9; }
.hud{ border:0 solid var(--c); }
.hud.tl{ top:5px; left:5px; border-top-width:1.5px; border-left-width:1.5px; }
.hud.tr{ top:5px; right:5px; border-top-width:1.5px; border-right-width:1.5px; }
.hud.bl{ bottom:5px; left:5px; border-bottom-width:1.5px; border-left-width:1.5px; }
.hud.br{ bottom:5px; right:5px; border-bottom-width:1.5px; border-right-width:1.5px; }
.f-front { transform:rotateY(0deg) translateZ(var(--half)); }
.f-right { transform:rotateY(90deg) translateZ(var(--half)); }
.f-back { transform:rotateY(180deg) translateZ(var(--half)); }
.f-left { transform:rotateY(-90deg) translateZ(var(--half)); }
.f-top { transform:rotateX(90deg) translateZ(var(--half)); }
.f-bottom{ transform:rotateX(-90deg) translateZ(var(--half)); }
/* Núcleo: Gerpro dentro del cubo, siempre de frente (billboard vía JS,
el mismo calculo de rotateY(-ry) rotateX(-rx) de siempre — solo que
ahora se aplica una vez por clic, no en cada fotograma). */
#core{
position:absolute; inset:0; z-index:2;
display:flex; align-items:center; justify-content:center;
pointer-events:none;
transition:transform .7s var(--ease-out);
}
#core .glogo{ width:46%; }
/* ---------- Portal de entrada (pantalla previa al cubo) ----------
Traslucido a proposito — SIN backdrop-filter, que difuminaba justo lo que
se pidio ver: deja la malla de particulas y las estrellas del fondo
(#heroFx, #stars — z-index 0 y 1) nitidas detras del texto, con una viñeta
suave (mas oscura arriba/abajo, casi limpia al centro) solo para que el
texto blanco no dependa del contraste que trae el fondo en ese instante.
Acentos morados (--ia-violeta/--ia-fucsia), no ambar: esta pantalla es la
puerta a Gerpro IA², que tiene su propia identidad — ver tokens.css.
Lo que SI tapa por completo es el cubo y el hero (mas abajo), para que
"antes de que salga el cubo" siga siendo literal aunque el fondo se vea
vivo. z-index (45) va por encima del escenario (10), las secciones (20) y
el riel (40), pero por debajo de la cabecera (50), que sigue accesible. */
#introGate{
position:fixed; inset:0; z-index:45;
display:flex; align-items:flex-start; justify-content:center;
/* overflow-y:auto — el rediseño 2026-09-09 apila titulo + parrafo + CTA +
chat + las seis dimensiones en una sola columna: en cualquier ancho eso
puede superar el alto disponible, y el visitante tiene que poder
desplazarse DENTRO del portal para llegar al campo, sin que nada se
corte. align-items:flex-start (no center) por lo mismo: con contenido
mas alto que el viewport, centrar verticalmente scrollea igual hacia
arriba que hacia abajo, que se siente roto. */
overflow-y:auto;
/* header es fixed y a proposito no trae fondo propio en esta pantalla (se
lo pone despues, al pasar el cubo — ver body.past-cube header): sin este
padding-top, la primera linea del portal queda debajo del logo y
"Productos"/"Gerpro IA²", ilegibles superpuestos. 92px cubre el alto
real del header en cualquier ancho (mismo valor que ya usaba el
breakpoint movil de la version anterior) mas aire de sobra. */
padding:max(92px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
background:
radial-gradient(60vmax 46vmax at 15% -6%, rgba(133,32,214,.24), transparent 60%),
radial-gradient(60vmax 46vmax at 100% 104%, rgba(195,78,252,.18), transparent 58%),
linear-gradient(180deg, rgba(9,11,28,.4) 0%, rgba(9,11,28,.14) 26%, rgba(9,11,28,.14) 72%, rgba(9,11,28,.44) 100%);
transition:opacity .6s ease, transform .6s cubic-bezier(.6,.05,.2,1), visibility .6s;
}
body.gate-done #introGate{
opacity:0; transform:translateY(-4vh) scale(.98);
visibility:hidden; pointer-events:none;
}
/* Ojo con esto: #introGate es position:fixed;inset:0, SI cubre el viewport
entero pase lo que pase con el scroll — pero su fondo es TRASLUCIDO a
proposito (para que se vean las particulas/estrellas detras, ver el
comentario de "Portal de entrada" mas abajo). Cubrir el viewport no alcanza
si lo que hay detras no esta oculto: .dims y .final son las dos secciones
que caen en esa primera pantalla (justo detras del portal), y sin este
apagado se transparentaban a traves del degradado — bug real, reproducido
con captura real y con CDP forzando scroll a distintos puntos (y=40 con
gate-done aun falso, y tambien al volver a subir el scroll de golpe con
`Runtime.evaluate` + scrollTo, que revierte gate-done). */
body:not(.gate-done) .dims,
body:not(.gate-done) .final{ opacity:0 !important; visibility:hidden !important; }
/* El flotante de WhatsApp (nav.css) es una segunda puerta de salida, pero el
portal ya trae su propio CTA (Agendar una demostración) y el chat: se
retira mientras el portal sigue arriba, en cualquier ancho, para que no se
monte encima de las seis dimensiones al final de la columna. */
body.gp-home:not(.gate-done) .wa-fab{ display:none; }
/* .ig-cue en flujo normal (no clavado al fondo del viewport): con la columna
unica el contenido ya puede superar el alto disponible en cualquier ancho,
y un cue "position:absolute;bottom:5vh" (el .cue generico) terminaba
montado encima de las tarjetas de dimension. */
#introGate .ig-cue{ position:static; transform:none; margin-top:4px; }
/* ---------- Una sola columna: promesa, chat y las seis dimensiones ----------
Antes eran dos columnas lado a lado (que es Gerpro | caja de Gerpro IA).
Rediseño 2026-09-09: todo apilado y centrado, en el orden en que un
visitante nuevo lo necesita leer — titulo (que es Gerpro) → parrafo (como
conecta el ciclo completo) → CTA de demo (via tradicional) → chat (via IA)
→ las seis dimensiones como prueba visual y entrada directa a cada una. */
.ig-inner{
width:100%; max-width:1320px;
/* Antes margin:auto 0 (centrado vertical clasico de flex-item): el
sobrante que ese auto reparte por igual arriba Y abajo crece sin techo
con el alto del viewport — en un monitor grande (4K, o cualquier
pantalla bien alta) dejaba el titular flotando en medio de una franja
negra enorme de cada lado (bug real, reportado por un visitante con
pantalla grande). El clamp() de aca abajo tapa cuanto puede crecer SOLO
el margen de arriba: en laptops normales el sobrante real es chico y se
sigue viendo centrado como siempre, pero pasado cierto alto de viewport
el aire de arriba se congela en 140px en vez de seguir repartiendose a
la mitad del vacio. Sin margin-bottom:auto el resto del sobrante ya no
empuja el bloque hacia el centro — cae abajo, detras de "Deslice para
conocer mas", que es donde una franja de fondo (estrellas/degradado) se
ve intencional y no como un hueco. 783px es el alto real medido del
bloque completo (titulo+parrafo+CTA+chat+tarjetas) a font-size normal. */
margin:clamp(0px, calc((100vh - 783px) / 2), 140px) 0 0;
display:flex; flex-direction:column; align-items:center;
gap:clamp(22px,3vw,34px);
text-align:center;
}
.ig-info{ display:flex; flex-direction:column; align-items:center; max-width:800px; }
.ig-info h1{
font-family:var(--display); font-weight:800; color:#fff;
font-size:clamp(32px, 5.4vw, 58px); line-height:1.08; letter-spacing:-.02em;
text-wrap:balance; margin:10px 0 18px;
text-shadow:0 2px 28px rgba(5,4,16,.7), 0 1px 3px rgba(5,4,16,.65);
}
/* Solido, sin glow: el halo difuminado alrededor de "ecosistema" (text-shadow
0 0 Npx) se veia borroso, no nitido — quitado a pedido de Juan. */
.ig-info h1 em{ font-style:normal; color:var(--ambar); }
/* Entrada del titular: mismo lenguaje que igTemaIn (blur+scale+translateY,
ver mas abajo en .ig-tema) para que las dos animaciones del portal se
sientan como UNA sola coreografia y no dos efectos sueltos. Cada renglon
—envuelto en .ig-h1-line en el markup— entra por separado con un pequeno
desfase: "Seis dimensiones." primero, "Un solo ecosistema." justo detras,
en vez de las dos lineas encendiendo de golpe. display:inline-block es
necesario: sin el, transform/filter no tienen efecto en un span inline. */
.ig-info h1 .ig-h1-line{
display:inline-block;
animation:igTitleIn 760ms var(--ease-out) both;
}
.ig-info h1 .ig-h1-line:nth-child(1){ animation-delay:0ms; }
.ig-info h1 .ig-h1-line:nth-child(2){ animation-delay:130ms; }
@keyframes igTitleIn{
from{ opacity:0; transform:translateY(28px) scale(.94); filter:blur(9px); }
to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@media (prefers-reduced-motion: reduce){
.ig-info h1 .ig-h1-line{ animation:igTemaFade 300ms ease both; animation-delay:0ms !important; }
}
.ig-claim{
font-size:clamp(15px, 1.7vw, 18.5px); line-height:1.6; color:var(--ink-dim);
max-width:74ch;
}
/* .hero-accion perdio su estilo de boton cuando se quito el hero-cubo (rediseno
2026-09) — esta regla queda aqui como unico dueno del look, ya que el cubo
no vuelve. */
.hero-accion.ig-cta{
display:inline-block; margin-top:22px;
background:var(--ambar); color:#171B3A; text-decoration:none;
font-family:var(--display); font-weight:500; font-size:14.5px; letter-spacing:.01em;
padding:12px 24px; border-radius:999px;
box-shadow:0 10px 24px rgba(0,0,0,.32);
transition:background .2s, transform .2s, box-shadow .2s;
}
.hero-accion.ig-cta:hover{
background:#F0A053; transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.42);
}
.hero-accion.ig-cta:active{ transform:scale(.97); }
.ig-box{ width:100%; max-width:660px; display:flex; flex-direction:column; align-items:center; }
.ig-q{
font-family:var(--display); font-weight:800; color:#fff;
font-size:clamp(24px, 3.2vw, 36px); line-height:1.2; letter-spacing:-.01em;
text-wrap:balance; margin-bottom:18px;
/* la viñeta del portal es casi transparente al centro a proposito (para que
se vean las particulas): esta sombra es la que de verdad sostiene el
contraste del titular, no el fondo. */
text-shadow:0 2px 28px rgba(5,4,16,.7), 0 1px 3px rgba(5,4,16,.65);
}
.ig-q .grad{
/* solido, no degradado: el violeta del extremo izquierdo se perdia contra
el fondo oscuro. El fucsia del boton de enviar tiene brillo de sobra. */
color:var(--ia-fucsia);
}
/* ---------- Las seis dimensiones ----------
Antes: fila chica de pildoras arriba del campo, logo del producto de fondo
a modo de marca de agua (casi invisible, ver historial). Ahora son la
prueba visual de "seis dimensiones" del titular — tarjetas con el mismo
tratamiento tintado por color de producto que ya usa .mods-mini (nunca una
sombra gris plana identica en las seis): logo real y visible, el problema
que resuelve, y un ejemplo real de lo que se le puede preguntar (la primera
de sus data-frases, la misma que ya rota en el placeholder). Elegir una
sigue haciendo lo mismo de siempre (aplicarTema() en ecosistema.js).
DataMAX cierra la fila con tratamiento propio (borde punteado): no es un
producto que se elige, es el campo abierto de analitica e IA a la medida. */
.ig-temas{
display:grid; grid-template-columns:repeat(6, 1fr); gap:12px;
width:100%; max-width:1320px;
}
.ig-tema{
position:relative;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
min-height:104px; padding:22px 18px; border-radius:var(--radius-lg);
border:1px solid color-mix(in srgb, var(--pc) 40%, transparent);
background:linear-gradient(155deg,
color-mix(in srgb, var(--pc) 15%, transparent), rgba(41,46,89,.28));
box-shadow:0 10px 22px rgba(0,0,0,.28);
color:#fff; text-align:center; cursor:pointer;
transition:background .25s var(--ease-out), border-color .25s var(--ease-out),
transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.ig-tema:hover{
transform:translateY(-3px); border-color:var(--pc);
background:linear-gradient(155deg,
color-mix(in srgb, var(--pc) 28%, transparent), rgba(41,46,89,.32));
box-shadow:0 16px 30px rgba(0,0,0,.34);
}
.ig-tema:active{ transform:translateY(-1px) scale(.98); }
.ig-tema[aria-pressed="true"]{
border-color:var(--pc);
background:linear-gradient(155deg,
color-mix(in srgb, var(--pc) 40%, transparent), rgba(41,46,89,.34));
box-shadow:0 0 0 1px var(--pc), 0 16px 30px rgba(0,0,0,.34);
}
.ig-tema-open{ border-style:dashed; }
/* Una sola altura pareja NO se ve pareja: cada logo trae su propio viewBox
(MAFP y CrewCore son marcas altas y angostas, IngeMAX y Forecast son
wordmarks anchos) — a igual altura, IngeMAX terminaba mas de 3 veces mas
ancho que CrewCore. Se afina la altura por tema para que el ancho
renderizado (lo que el ojo realmente compara) quede parejo entre los seis. */
.ig-tema-logo{ height:34px; max-width:100%; width:auto; object-fit:contain; }
.ig-tema[data-tema="mafp"] .ig-tema-logo{ height:44px; }
.ig-tema[data-tema="ingemax"] .ig-tema-logo{ height:19px; }
.ig-tema[data-tema="crewcore"] .ig-tema-logo{ height:52px; }
.ig-tema[data-tema="leanbuilt"] .ig-tema-logo{ height:30px; }
.ig-tema[data-tema="forecast"] .ig-tema-logo{ height:24px; }
.ig-tema-t{
font-family:var(--display); font-weight:700; font-size:16.5px; line-height:1.28;
}
/* Entrada de las seis dimensiones: se ve UNA sola vez, al cargar la pagina
(#introGate ya esta montado y visible desde el primer paint — no hay
"abrir panel" que dispare esto de nuevo; ocultar/mostrar el portal al
scrollear solo atenua su opacidad, no vuelve a montar estas tarjetas).
Por eso se permite un poco mas de vuelo que en una interaccion repetida:
scale+blur+translateY entrando con var(--ease-out) (la curva fuerte de
tokens.css, no el ease-out plano del navegador), en cascada por tarjeta
para que la mirada recorra las seis en vez de verlas encender todas de
golpe. animation, no transition: no hay ningun estado "anterior" del que
partir, es una aparicion, no un cambio de estado. */
.ig-tema{
animation:igTemaIn 640ms var(--ease-out) both;
}
.ig-tema:nth-child(1){ animation-delay:60ms; }
.ig-tema:nth-child(2){ animation-delay:120ms; }
.ig-tema:nth-child(3){ animation-delay:180ms; }
.ig-tema:nth-child(4){ animation-delay:240ms; }
.ig-tema:nth-child(5){ animation-delay:300ms; }
.ig-tema:nth-child(6){ animation-delay:360ms; }
@keyframes igTemaIn{
from{ opacity:0; transform:translateY(22px) scale(.92); filter:blur(7px); }
to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@media (prefers-reduced-motion: reduce){
/* Sigue avisando que algo llego (no aparece de golpe sin mas), pero sin
movimiento ni desenfoque — solo color/opacidad, como pide el resto del
archivo (ver el bloque de reduced-motion mas abajo). */
.ig-tema{ animation:igTemaFade 300ms ease both; animation-delay:0ms !important; }
@keyframes igTemaFade{ from{ opacity:0; } to{ opacity:1; } }
}
/* ---------- Tira de actividad del motor ----------
El campo de texto solo, sin nada mas, se lee como un chatbot generico
pegado a la pagina. Esta tira no mide nada real (no hay telemetria que
exponer aqui): es deliberadamente decorativa, para que ANTES de escribir
ya se sienta un motor conectado y en marcha, no una caja vacia esperando
texto. Al elegir un tema (aplicarTema() en ecosistema.js) toma el --pc de
ese producto; sin tema usa el violeta de Gerpro IA por defecto. */
.ig-pulse{
--pc:var(--ia-violeta);
display:flex; align-items:center; gap:10px;
margin-bottom:12px; padding:8px 14px;
border-radius:var(--radius-pill);
border:1px solid color-mix(in srgb, var(--pc) 32%, rgba(255,255,255,.12));
background:color-mix(in srgb, var(--pc) 10%, rgba(20,14,34,.4));
transition:border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.ig-pulse-dot{
flex:none; width:7px; height:7px; border-radius:50%;
background:var(--pc); box-shadow:0 0 8px var(--pc);
animation:ig-pulse-glow 2s ease-in-out infinite;
}
.ig-pulse-label{
flex:none; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
text-transform:uppercase; color:rgba(234,236,248,.62);
}
.ig-pulse-bars{ display:flex; align-items:center; gap:3px; height:16px; margin-left:auto; }
.ig-pulse-bars i{
width:3px; height:100%; border-radius:2px; background:var(--pc); opacity:.75;
animation:ig-pulse-bar 1.6s ease-in-out infinite;
transform:scaleY(.2); transform-origin:50% 100%;
}
.ig-pulse-bars i:nth-child(1){ animation-delay:-1.4s; }
.ig-pulse-bars i:nth-child(2){ animation-delay:-.9s; }
.ig-pulse-bars i:nth-child(3){ animation-delay:-1.6s; }
.ig-pulse-bars i:nth-child(4){ animation-delay:-.4s; }
.ig-pulse-bars i:nth-child(5){ animation-delay:-1.1s; }
.ig-pulse-bars i:nth-child(6){ animation-delay:-.2s; }
.ig-pulse-bars i:nth-child(7){ animation-delay:-.7s; }
@keyframes ig-pulse-glow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes ig-pulse-bar{
0%, 100%{ transform:scaleY(.2); }
50%{ transform:scaleY(1); }
}
@media (max-width:560px){
.ig-pulse-label{ display:none; }
}
@media (prefers-reduced-motion: reduce){
.ig-pulse-dot, .ig-pulse-bars i{ animation:none; }
.ig-pulse-bars i{ transform:scaleY(.6); }
}
.ig-chat{
width:100%;
display:flex; align-items:center; gap:10px;
background:rgba(20,14,34,.45);
/* blur solo aqui, no en #introGate entero: la barra queda vidriada y
legible sin apagar las particulas del resto de la pantalla. */
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border:1.5px solid rgba(133,32,214,.55);
border-radius:var(--radius-pill);
padding:8px 8px 8px 26px;
/* Sombra de elevacion lisa, sin el halo pulsante que traia antes
(@keyframes ig-glow, quitado a pedido de Juan por "borroso"). */
box-shadow:0 14px 34px rgba(0,0,0,.35);
transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.ig-chat:focus-within{
border-color:rgba(195,78,252,.9);
box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.ig-input{
flex:1; min-width:0; background:none; border:none; outline:none;
color:#fff; font-family:var(--body);
/* el piso NO puede bajar de 16px: por debajo de eso, iOS Safari hace zoom
automatico al enfocar el input (para "leerlo mejor"), y ese zoom es
justo lo que se veia como "el sitio ocupa mas del 100% del ancho" al
ponerse a escribir. */
font-size:clamp(16px,1.6vw,18px);
padding:12px 0;
}
.ig-input::placeholder{ color:rgba(234,236,248,.82); opacity:1; }
.ig-send{
flex:none; width:44px; height:44px; border-radius:50%;
border:none; background:var(--ia-violeta); color:#fff;
display:flex; align-items:center; justify-content:center;
cursor:pointer; transition:background .2s var(--ease-out), transform .2s var(--ease-out);
}
.ig-send:hover{ background:var(--ia-fucsia); transform:translateX(2px); }
.ig-send:active{ transform:translateX(2px) scale(.9); }
/* .ig-cue va en flujo normal en cualquier ancho — ver la regla
#introGate .ig-cue{position:static} mas arriba. */
.ig-cue:hover{ transform:translateY(2px); }
/* ---------- Enrutamiento a un asesor dentro del chat (gancho de front) ----------
Lo agrega ecosistema.js una sola vez, a partir de la 2a respuesta del
agente (nunca en la primera). Mismo verde de marca que el flotante de
WhatsApp (nav.css .wa-fab), para que se lea como la misma puerta. */
.ig-wa{
align-self:flex-start; max-width:88%;
display:flex; flex-direction:column; gap:10px;
padding:14px 16px; border-radius:16px;
background:rgba(37,211,102,.12);
border:1px solid rgba(37,211,102,.4);
}
.ig-wa p{ font-size:13.5px; line-height:1.5; color:rgba(234,236,248,.94); }
.ig-wa-links{ display:flex; flex-wrap:wrap; gap:8px; }
.ig-wa-links a{
display:inline-flex; align-items:center; gap:6px;
padding:8px 14px; border-radius:var(--radius-pill);
background:#25D366; color:#0B2015; font-weight:700; font-size:12.5px;
text-decoration:none; transition:background .2s;
}
.ig-wa-links a:hover{ background:#1EBE5A; }
@media (max-width:960px){
.ig-info, .ig-box{ max-width:560px; }
/* Tablet: seis columnas ya no caben con texto legible — dos filas de 3. */
.ig-temas{ grid-template-columns:repeat(3, 1fr); max-width:560px; }
}
@media (max-width:640px){
.ig-chat{ padding-left:20px; }
.ig-info h1{ font-size:clamp(26px,8vw,34px); }
.ig-q{ font-size:clamp(21px,6.5vw,26px); }
/* Movil: tres filas de 2 en vez de dos de 3 — cada tarjeta sigue teniendo
ancho de sobra para el logo y las dos lineas de texto. */
.ig-temas{ grid-template-columns:1fr 1fr; }
}
/* Hilo de conversacion con el agente. Oculto por completo mientras esta
vacio (.has-msgs lo activa desde JS): un div vacio dentro de un flex con
gap todavia se cuenta para el espaciado, y dejaba un hueco antes del
primer mensaje. */
.ig-thread{
display:none;
width:100%; max-width:640px;
flex-direction:column; gap:10px;
max-height:40vh; overflow-y:auto;
padding:2px 4px;
}
.ig-thread.has-msgs{ display:flex; }
.ig-msg{
max-width:88%;
padding:11px 17px;
border-radius:16px;
font-size:14.5px; line-height:1.55;
text-align:left; white-space:pre-wrap; overflow-wrap:break-word;
}
.ig-msg a{ color:var(--ia-fucsia); text-decoration:underline; text-underline-offset:2px; }
.ig-msg a:hover{ color:#fff; }
.ig-msg.user a{ color:#fff; text-decoration-color:rgba(255,255,255,.6); }
.ig-msg.user{
align-self:flex-end;
background:var(--ia-violeta); color:#fff;
border-bottom-right-radius:4px;
}
.ig-msg.agent{
align-self:flex-start;
background:rgba(20,14,34,.55);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
border:1px solid rgba(133,32,214,.35);
color:rgba(234,236,248,.94);
border-bottom-left-radius:4px;
}
.ig-msg.agent.error{ border-color:rgba(248,82,47,.5); color:rgba(255,209,199,.92); }
/* Insignia del motor que respondio (tema activo al momento del envio) y
cifra resaltada — la respuesta deja de ser una fila mas de texto plano y
se lee como que la contesto un motor especifico, no un chat generico. */
.ig-msg.agent[style*="--pc"]{ border-color:color-mix(in srgb, var(--pc) 45%, transparent); }
.ig-msg-src{
display:flex; align-items:center; gap:6px; margin-bottom:8px;
font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
color:var(--pc, var(--ia-fucsia));
}
.ig-msg-src img{ height:14px; width:auto; max-width:28px; object-fit:contain; }
.ig-msg-stat{
display:block; font-family:var(--display); font-weight:800;
font-size:clamp(22px, 3vw, 30px); line-height:1.1;
color:var(--pc, var(--ia-fucsia));
margin-bottom:4px;
}
/* Tres puntos que rebotan en cascada — reemplaza el "Escribiendo…" en
cursiva de antes, que se leia igual que cualquier chat generico. */
.ig-dots{ display:inline-flex; align-items:center; gap:5px; padding:2px 4px; }
.ig-dots i{
width:6px; height:6px; border-radius:50%; background:var(--ia-fucsia);
animation:ig-dot-pulse 1.1s ease-in-out infinite;
}
.ig-dots i:nth-child(2){ animation-delay:.15s; }
.ig-dots i:nth-child(3){ animation-delay:.3s; }
/* Antes rebotaba en vertical (translateY). Se reemplaza por una respiración
de opacidad + escala — misma cadencia, sin easing de rebote. */
@keyframes ig-dot-pulse{
0%, 60%, 100%{ opacity:.35; transform:scale(.85); }
30%{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
.ig-dots i{ animation:none; opacity:.85; }
}
/* ---------- Contenido por sección (overlays fijos) ---------- */
.sec{
position:fixed; inset:0; z-index:20;
pointer-events:none;
opacity:0; visibility:hidden;
}
/* will-change solo en las secciones que se estan viendo (clase .live, la pone
el motor). Antes estaba fijo en las 10: eran 10 capas del tamano de la
pantalla promovidas a la vez y, en moviles con poca memoria de GPU, el
navegador empieza a descartar y recomponer capas. Eso es el parpadeo. */
.sec .inner{ position:absolute; inset:0; pointer-events:auto; }
.sec.live .inner{ will-change:transform; }
.sec a, .sec button{ pointer-events:auto; }
.eyebrow{
font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
color:var(--ambar); margin-bottom:14px;
}
/* Es un boton, no un rotulo: ademas de anunciar el gesto, baja hasta el
siguiente bloque de la pagina. */
.cue{
position:absolute; bottom:5vh; left:50%; transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:6px;
background:none; border:0; padding:6px 10px;
font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
color:var(--menta); opacity:.75;
transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.cue:hover{ opacity:1; transform:translateX(-50%) translateY(2px); }
.cue:active{ transform:translateX(-50%) scale(.94); }
.cue:focus-visible{ opacity:1; }
.cue svg{ animation:bob 1.6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }
@keyframes nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(8px);} }
/* ---------- Las seis dimensiones: tarjetas que se apilan con el scroll ----------
Antes: seis "sec svc" a pantalla completa con .txt/.vis en capas absolutas
alrededor del cubo fijo, cruzando opacidad con el scroll de toda la pagina
(el motor viejo de KF/rAF). Primer rediseño: una sola tarjeta con pestañas
de clic. Segundo rediseño el mismo día, con una referencia de
salesforce.com: las seis tarjetas conviven en flujo normal dentro de
`.dims-stack`, cada una `position:sticky` con un `top` escalonado por
índice (`--i`, la variable que ya trae cada `.dims-card` en el markup):
al bajar, la tarjeta activa queda fija en su `top`, la siguiente sube
desde abajo y la cubre — como la siguiente está despues en el DOM, pinta
encima sin necesidad de z-index — dejando visible solo `.dims-card-bar`
(pregunta + logo) de la anterior, que es exactamente su alto (58px), el
mismo salto que hay entre un `--i` y el siguiente. Ningun rAF ni interpo-
lacion: el apilado es 100% CSS. El menu/cubo de `.dims-nav` quedan aparte,
sticky tambien, y un scroll listener liviano en ecosistema.js (no el motor
viejo) decide cual tarjeta esta arriba del todo para girar el cubo y
marcar la pestaña — ver setActiveDim()/observeStack() ahi. */
.dims{ padding:clamp(56px,9vh,110px) clamp(20px,4vw,56px) clamp(64px,10vh,140px); }
.dims-layout{
width:min(1440px, 95vw); margin:0 auto;
/* minmax(0,1fr), no "1fr" a secas: un track 1fr trae un minimo automatico
igual al min-content de lo que haya adentro (la pregunta de la barra en
nowrap, el SVG del grafico) — sin el 0 explicito, la columna crecia mas
alla del contenedor en vez de encoger, y el texto de la barra empujaba
el logo fuera de la pantalla en movil (bug real, visto en captura). */
display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr);
gap:clamp(28px,4vw,56px); align-items:start;
}
.dims-nav{
position:sticky; top:112px;
/* min-height + justify-content:center: sin esto el cubo+menu quedaban
pegados arriba de su propio panel sticky, con un hueco vacio grande
debajo (el panel es tan alto como el viewport visible, pero el
contenido real —cubo + seis pestañas— es mucho mas bajo). Centrado en
el alto real que queda visible bajo el header, no en toda la columna. */
min-height:calc(100vh - 152px); min-height:calc(100svh - 152px);
display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
/* padding-bottom sin padding-top: centra el contenido en una caja mas
corta que arranca igual arriba pero termina antes abajo — el resultado
visual es que el cubo+menu quedan un poco mas arriba que el centro
exacto, que es lo que Juan pidió ("subirlo un poco"). */
padding-bottom:12vh;
}
/* align-items:stretch explicito: el markup es un , y el `nav{
align-items:center }` generico del header (pensado para SU fila de
enlaces) tambien le pegaba a este por el tag — centraba cada boton en vez
de estirarlo, y por eso no quedaban a ras con el cubo (bug real, medido
con getBoundingClientRect: el boton empezaba 37px mas adentro que el
cubo). */
.dims-menu{ display:flex; flex-direction:column; align-items:stretch; gap:8px; width:100%; }
.dims-tab{
display:flex; align-items:center; gap:12px;
padding:13px 16px; border-radius:var(--radius-md);
border:1px solid color-mix(in srgb, var(--pc) 30%, transparent);
background:color-mix(in srgb, var(--pc) 10%, transparent);
color:var(--ink-dim); text-align:left; cursor:pointer;
transition:background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.dims-tab-logo{ height:22px; width:38px; object-fit:contain; flex:none; }
.dims-tab span{ font-size:14.5px; font-weight:600; line-height:1.3; }
.dims-tab:hover{ border-color:var(--pc); color:#fff; }
.dims-tab.is-active{
background:color-mix(in srgb, var(--pc) 30%, transparent);
border-color:var(--pc); color:#fff;
box-shadow:0 0 0 1px var(--pc);
}
.dims-stack{ position:relative; }
/* --bar: alto de la barra colapsada; el salto entre topes consecutivos DEBE
medir lo mismo que este alto, o la tarjeta de atras queda con una tira o
un sobrante visible en vez de un corte limpio justo en su propio borde. */
.dims-card{
--bar:58px;
position:sticky; top:calc(112px + var(--i) * var(--bar));
/* Antes 32px, despues 26vh: seguia asomando la barra de la siguiente casi
de inmediato. La ventana en la que la siguiente tarjeta empieza a
asomarse por abajo (desde que su borde superior entra al viewport hasta
que se clava del todo) mide siempre "alto del viewport menos su propio
top:sticky" — una constante grande que NO se acorta con mas margen; lo
unico que el margen mueve es CUANDO en el recorrido empieza esa ventana.
Con 26vh todavia empezaba muy pronto. 60vh le da a cada tarjeta un tramo
largo en solitario antes de que la siguiente asome — Juan: "bajo y ya
se ven dos fichas". */
margin-bottom:60vh; border-radius:var(--radius-xl); overflow:hidden;
/* 100% opaco a proposito, de punta a punta del degradado: la tarjeta de
atras tiene que quedar TAPADA del todo por la de encima, o se
transparentaba y se veian las dos superpuestas (bug real, visto en
capturas reales del apilado — "transparent" en un extremo del gradiente
dejaba pasar el 86% del fondo de atras). color-mix contra un color solido
(#141733, no "transparent") mantiene el degradado opaco en todo su alto. */
background:linear-gradient(155deg,
color-mix(in srgb, var(--c) 16%, #141733), color-mix(in srgb, var(--c) 6%, #0E1230) 60%);
border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
box-shadow:0 30px 70px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
}
/* NO tocar el margin-bottom de la ultima tarjeta: position:sticky la
mantiene clavada solo mientras queda espacio de sobra despues de ella en
.dims-stack — si se lo recortamos, se queda sin recorrido para terminar
de treparse y cubrir a la anterior (bug real: LeanBuilt aparecia ya
destrabada, a medio camino, en vez de tapar a Forecast). El hueco vacio
que deja esos 60vh sin una tarjeta siguiente que los llene se recorta
aca afuera, tirando de la seccion siguiente hacia arriba, SIN afectar la
caja interna que usa el calculo de sticky. */
.dims-stack{ margin-bottom:calc(80px - 60vh); }
.dims-card-bar{
height:var(--bar); padding:0 clamp(20px,3vw,32px);
display:flex; align-items:center; justify-content:space-between; gap:20px;
background:linear-gradient(155deg,
color-mix(in srgb, var(--c) 38%, #141733), color-mix(in srgb, var(--c) 16%, #0E1230));
}
.dims-card-bar-q{
/* flex:1 y min-width:0 son los que de verdad permiten encoger dentro del
flex — sin min-width:0 un hijo flex nunca se achica mas alla de su
ancho intrinseco, y el texto empujaba .dims-card-bar-name fuera de la
pantalla en vez de truncarse con "…" (bug real, visto en movil real). */
flex:1 1 auto; min-width:0;
font-family:var(--display); font-weight:700; font-size:14.5px; color:#fff;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dims-card-bar-name{
flex:none; display:flex; align-items:center; gap:8px;
font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--c);
}
.dims-bar-logo{ height:17px; width:auto; object-fit:contain; }
/* En movil la barra no tiene ancho para la pregunta completa en una linea
y el "…" cortaba a mitad de palabra (bug real, visto en capturas de
iPhone). --bar mas alta le da lugar a 2 lineas — top:sticky y
margin-bottom de .dims-card ya usan var(--bar), asi que el apilado
se reacomoda solo, sin tocar el JS. */
@media (max-width:640px){
.dims-card{ --bar:74px; }
.dims-card-bar-q{
white-space:normal; text-overflow:clip;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
line-height:1.25;
}
}
.dims-card-body{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
gap:clamp(28px,3.4vw,54px); padding:clamp(28px,3.8vw,52px);
}
.dims-card .eyebrow{ color:var(--c); }
.dims-card h2{
font-family:var(--display); font-weight:800;
font-size:clamp(28px, 2.9vw, 42px); line-height:1.05; letter-spacing:-.015em;
color:#fff; margin-bottom:14px;
}
/* El titular de cada dimension es la pregunta canonica del negocio, no el
producto: el logo baja a marca del motor, encima de la pregunta. Cuerpo
menor que el h2 generico, que esta dimensionado para un logo o dos
palabras y no para una frase de ocho. */
.dims-card h2.q{
font-size:clamp(21px, 2.15vw, 30px); line-height:1.2; letter-spacing:-.01em;
margin-bottom:12px; text-wrap:balance;
}
.txt > .slogo{ height:32px; margin-bottom:13px; }
.txt > .slogo.tall{ height:62px; }
.dims-card p{ font-size:15px; line-height:1.6; color:var(--ink-dim); margin-bottom:16px; }
/* Los tres beneficios de cada cara (§2.5 a §2.10). Cuerpo menor que el parrafo:
son la letra chica de la promesa, no compiten con la pregunta. */
.bens{ list-style:none; margin:0 0 18px; display:flex; flex-direction:column; gap:8px; }
.bens li{
position:relative; padding-left:18px;
font-size:13.5px; line-height:1.5; color:var(--ink-dim);
}
.bens li::before{
content:''; position:absolute; left:1px; top:.5em;
width:6px; height:6px; border-radius:50%;
background:var(--c);
}
.more{
display:inline-flex; align-items:center; gap:8px;
font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:var(--c); text-decoration:none;
border-bottom:2px solid color-mix(in srgb, var(--c) 70%, transparent);
padding-bottom:3px; transition:gap .2s var(--ease-out), text-shadow .2s var(--ease-out);
}
.more:hover{ gap:14px; }
.card{
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.13);
border-radius:var(--radius-lg); padding:14px;
box-shadow:0 22px 60px rgba(0,0,0,.45);
backdrop-filter:blur(8px);
}
.card svg{ display:block; width:100%; height:auto; border-radius:8px; }
/* módulos enlazables dentro de una tarjeta (cuadros GO/GC/GF/GD/GT) */
.card a.mod{ cursor:pointer; }
.card a.mod rect{ transition:filter .2s var(--ease-out), transform .2s var(--ease-out); transform-origin:center; transform-box:fill-box; }
.card a.mod:hover rect{ filter:brightness(1.22) drop-shadow(0 0 6px rgba(255,255,255,.35)); transform:scale(1.05); }
.card a.mod:focus-visible rect{ outline:2px solid var(--ambar); outline-offset:2px; }
.card a.mod:focus-visible{ outline:none; }
/* --- Final --- */
.final{ padding:clamp(64px,12vh,120px) 24px; }
.final .inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.final h2{
font-family:var(--display); font-weight:800;
font-size:clamp(30px, 4.4vw, 56px); line-height:1.05; letter-spacing:-.02em;
color:#fff; max-width:760px;
}
.final p{ margin-top:16px; max-width:520px; font-size:16px; color:var(--ink-dim); }
.cta{
margin-top:32px; border:none; background:var(--ia-violeta); color:#fff; text-decoration:none;
font-size:15px; font-weight:700; padding:16px 30px; border-radius:var(--radius-pill);
display:inline-flex; align-items:center; gap:10px;
box-shadow:0 14px 36px rgba(0,0,0,.4);
transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.cta .sup{ font-weight:800; }
.cta:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.cta:active{ transform:scale(.97); }
/* ---------- Panel Gerpro IA² ---------- */
#iaPanel{
position:fixed; inset:0; z-index:60;
background:
radial-gradient(90vmax 70vmax at 82% 18%, rgba(133,32,214,.14), transparent 55%),
radial-gradient(80vmax 70vmax at 12% 88%, rgba(25,148,164,.16), transparent 55%),
linear-gradient(150deg, #101433, #070919 70%);
color:var(--ink);
transform:translateX(101%);
transition:transform .6s cubic-bezier(.7,0,.2,1);
overflow-y:auto;
border-left:1px solid rgba(133,32,214,.35);
box-shadow:-40px 0 120px rgba(0,0,0,.6);
}
#iaPanel.open{ transform:translateX(0); }
/* ==========================================================================
MANIFIESTO GERPRO IA² · siete actos, del m² al IA²
Fuente: "Gerpro IA2 Manifiesto v2" — misma paleta y tipografías del deck
========================================================================== */
/* Goteos de color: el lienzo mide una pantalla y el JS lo reposiciona con el
scroll del panel, así la lluvia acompaña siempre lo que estás leyendo sin
tener que pintar los 4.500px del manifiesto completo. */
#iaDrips{
position:absolute; top:0; left:0; width:100%; height:100%;
z-index:0; pointer-events:none; will-change:transform;
}
.ia2{
position:relative; z-index:1;
--card:rgba(255,255,255,.045);
--edge:rgba(255,255,255,.16);
--mono:'IBM Plex Mono', ui-monospace, monospace;
max-width:1240px; margin:0 auto;
padding:clamp(96px,13vh,140px) clamp(22px,5vw,80px) clamp(80px,12vh,120px);
}
.ia2-act{ padding:clamp(46px,7vh,80px) 0; border-top:1px solid rgba(255,255,255,.08); }
.ia2-act:first-child{ border-top:0; padding-top:0; }
/* entrada al hacer scroll dentro del panel */
.ia2-act .rv{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.ia2-act.in .rv{ opacity:1; transform:none; }
.ia2-act.in .rv:nth-child(2){ transition-delay:.08s; }
.ia2-act.in .rv:nth-child(3){ transition-delay:.16s; }
.ia2-act.in .rv:nth-child(4){ transition-delay:.24s; }
.ia2 .kicker{
font-family:var(--mono); font-size:12.5px; font-weight:500;
letter-spacing:.24em; text-transform:uppercase; color:var(--ia-violeta);
display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.ia2 .kicker::before{ content:''; width:26px; height:1px; background:currentColor; flex:none; }
.ia2 .kicker.rojo{ color:var(--rojo); }
/* El acto 1 usa la .eyebrow generica del sitio (ambar) en vez de .kicker o
.sec-eyebrow: sin este override, el unico rotulo del manifiesto que no
queda morado es justo el primero que se lee. */
.ia2 .eyebrow{ color:var(--ia-violeta); text-shadow:0 0 16px rgba(133,32,214,.5); }
.ia2 h2{
font-family:var(--display); font-weight:800;
font-size:clamp(27px,3.5vw,50px); line-height:1.08; letter-spacing:-.02em; color:#fff;
}
.ia2 h2 .am{ color:var(--ia-violeta); }
/* .am solo estaba definido dentro de h2 y de dos bloques sueltos: los enfasis
violeta de .statement, .firma y el hero salian en blanco. Una sola regla
para todo el manifiesto. */
.ia2 .am{ color:var(--ia-violeta); }
.ia2 .lead{ font-size:clamp(15px,1.5vw,20px); line-height:1.6; color:var(--ink-dim); max-width:62ch; }
.ia2 .note{ font-size:clamp(14px,1.35vw,17px); line-height:1.6; color:var(--ink-dim); max-width:70ch; }
.ia2 .note b, .ia2 .lead b{ color:#fff; font-weight:700; }
.ia2 .foot{ font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,236,248,.42); }
/* --- Acto 1 · el m² que se vuelve IA² --- */
.morph{ display:flex; align-items:center; justify-content:center; gap:clamp(20px,4vw,54px); margin:clamp(30px,5vh,56px) 0; flex-wrap:wrap; }
.morph .glyph{
font-family:var(--display); font-weight:800; letter-spacing:-.04em; line-height:.86;
font-size:clamp(76px,13vw,190px); color:#fff;
}
.morph .glyph sup{ font-size:.46em; vertical-align:super; }
.morph .was{ color:rgba(234,236,248,.26); }
.morph .now sup{ color:var(--ia-violeta); }
.morph .now{ filter:drop-shadow(0 0 40px rgba(133,32,214,.35)); }
.morph .arrow{ color:var(--ia-violeta); font-size:clamp(22px,3vw,40px); font-weight:300; }
/* --- Acto 2 · los modelos que tiene cualquiera --- */
.claim{
font-family:var(--display); font-weight:800;
font-size:clamp(34px,6vw,86px); line-height:1; letter-spacing:-.03em; color:#fff;
}
.claim .am{ color:var(--ia-violeta); }
.formula{
margin-top:30px; font-size:clamp(15px,1.6vw,22px); font-weight:500; color:#fff;
}
.formula .eq{ color:rgba(234,236,248,.42); }
.formula .x{ color:var(--ia-violeta); font-weight:800; font-size:1.25em; padding:0 8px; vertical-align:-.06em; }
/* --- Actos 3, 4 y 5 · rejillas de tarjetas --- */
.ia2-row{ display:flex; align-items:stretch; gap:18px; margin:38px 0; flex-wrap:wrap; }
.ia2-row .op{
align-self:center; font-family:var(--display); font-weight:800;
font-size:clamp(26px,3vw,44px); color:var(--ia-violeta); line-height:1;
}
.ia2-card{
flex:1 1 260px; background:var(--card); border:1px solid var(--edge); border-radius:12px;
padding:26px 28px; display:flex; flex-direction:column; gap:11px;
transition:border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}
.ia2-card:hover{ border-color:rgba(133,32,214,.55); background:rgba(133,32,214,.06); transform:translateY(-3px); }
.ia2-card h3{ font-family:var(--display); font-weight:700; font-size:clamp(17px,1.7vw,23px); color:#fff; letter-spacing:-.01em; line-height:1.2; }
.ia2-card p{ font-size:14.5px; line-height:1.6; color:rgba(234,236,248,.72); }
.ia2-card p b{ color:#fff; font-weight:700; }
/* tarjetas de "los ceros": el mismo patrón, en rojo y hundido */
.ia2-card.cero{ border-color:rgba(248,82,47,.38); background:rgba(248,82,47,.05); }
.ia2-card.cero:hover{ border-color:rgba(248,82,47,.7); background:rgba(248,82,47,.09); transform:none; }
.ia2-card.cero .tag{ font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(248,82,47,.9); }
.ia2-card.cero .zero{
margin-top:auto; padding-top:14px; font-family:var(--display); font-weight:800;
font-size:clamp(38px,5vw,64px); line-height:1; color:var(--rojo);
}
.ia2-card.cero em{ font-style:normal; color:var(--rojo); font-weight:800; }
/* tarjetas de la Tríada: barra de color a la izquierda */
.ia2-card.triada{ position:relative; padding-left:34px; overflow:hidden; }
.ia2-card.triada::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--k); }
.ia2-card.triada .tag{ font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,236,248,.62); }
.ia2-card.triada .word{ font-family:var(--display); font-weight:800; font-size:clamp(24px,2.6vw,34px); letter-spacing:.02em; line-height:1; color:#fff; }
.ia2-row .chain{ align-self:center; flex:none; color:var(--ia-violeta); }
/* resultado de la ecuación */
.result{ margin:8px 0 30px; }
.result .lbl{ font-family:var(--mono); font-size:12.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--menta); }
.result .val{ font-family:var(--display); font-weight:800; font-size:clamp(40px,6vw,80px); line-height:1; color:#fff; margin-top:8px; }
.result .val .am{ color:var(--ia-violeta); }
.result .bar{ height:6px; border-radius:3px; background:var(--ia-violeta); margin-top:12px; max-width:340px; transform:scaleX(0); transform-origin:0 50%; transition:transform .8s cubic-bezier(.22,1,.36,1) .3s; }
.ia2-act.in .result .bar{ transform:scaleX(1); }
/* --- Acto 6 · el gobierno, con la firma que se dibuja --- */
.verdict{ font-family:var(--display); font-weight:800; font-size:clamp(34px,5.6vw,80px); line-height:1.02; letter-spacing:-.03em; color:#fff; margin:26px 0 0; }
.verdict .am{ color:var(--ia-violeta); }
.sign{ margin:26px 0 22px; max-width:520px; }
.sign svg{ width:100%; height:auto; display:block; }
.sign path, .sign line{ stroke-dasharray:1; stroke-dashoffset:1; }
.ia2-act.in .sign .l1{ transition:stroke-dashoffset .5s ease .1s; stroke-dashoffset:0; }
.ia2-act.in .sign .l2{ transition:stroke-dashoffset 1.7s cubic-bezier(.4,0,.3,1) .5s; stroke-dashoffset:0; }
.ia2-act.in .sign .l3{ transition:stroke-dashoffset .6s ease 2s; stroke-dashoffset:0; }
.ia2 .aside{ font-size:clamp(14px,1.35vw,17px); font-style:italic; color:rgba(234,236,248,.42); }
/* --- Acto 7 · el sello --- */
.ia2-close{ text-align:center; }
/* Escenario de convergencia: las soluciones vuelan desde el borde y estallan
dentro del sello. El canvas queda detrás; el sello es el núcleo. */
.ia2 .fusion-stage{
position:relative; width:min(700px,100%); height:clamp(330px,44vh,450px);
margin:0 auto clamp(18px,3vh,30px);
}
.ia2 .fusion-stage canvas{
position:absolute; inset:0; width:100%; height:100%; display:block;
/* sin esto el rectángulo del canvas recorta el polvo orbital en línea recta
y las soluciones aparecen de golpe en el punto de salida */
-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%, #000 52%, rgba(0,0,0,.55) 76%, transparent 99%);
mask-image:radial-gradient(ellipse closest-side at 50% 50%, #000 52%, rgba(0,0,0,.55) 76%, transparent 99%);
}
.seal{
position:absolute; left:50%; top:50%; width:clamp(196px,26vw,280px); aspect-ratio:1;
/* el translate lo escribe el JS junto con el pulso de cada impacto */
transform:translate(-50%,-50%);
border-radius:50%; border:2px solid rgba(133,32,214,.85);
background:radial-gradient(circle at 50% 50%, rgba(11,14,34,.92) 60%, rgba(11,14,34,.6));
box-shadow:0 0 110px rgba(133,32,214,.2), inset 0 0 56px rgba(133,32,214,.07);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.seal .sub{
font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
color:rgba(234,236,248,.62); margin-top:2px; white-space:nowrap;
}
.seal .mark{ font-family:var(--display); font-weight:800; font-size:clamp(60px,9vw,92px); line-height:1; letter-spacing:-.02em; color:#fff; }
.seal .mark sup{ color:var(--ia-violeta); font-size:.58em; vertical-align:super; }
.seal img{ height:26px; display:block; }
.seal::before, .seal::after{
content:''; position:absolute; inset:-2px; border-radius:50%;
border:1.5px solid rgba(133,32,214,.8); pointer-events:none;
animation:seal-ring 6.6s linear infinite;
}
.seal::after{ animation-delay:3.3s; }
@keyframes seal-ring{ from{ transform:scale(1); opacity:.22; } to{ transform:scale(1.55); opacity:0; } }
.ia2-close .claim{ font-size:clamp(30px,4.6vw,64px); }
.ia2-close .guia{ margin-top:18px; font-size:clamp(18px,2.2vw,30px); font-weight:500; color:#fff; }
.ia2-close .guia b{ color:var(--ia-violeta); font-weight:800; }
.ia2-close .foot{ margin-top:30px; line-height:2.1; }
.ia2 .ia-actions{ justify-content:center; margin-top:38px; }
@media (max-width:860px){
.ia2-row{ gap:14px; }
.ia2-row .op, .ia2-row .chain{ align-self:flex-start; margin-left:6px; }
.ia2-card{ flex-basis:100%; }
.morph{ gap:18px; }
}
.ia-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.ia-link{
font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:var(--menta); text-decoration:none;
border-bottom:1px solid rgba(127,192,183,.5); padding-bottom:2px;
}
.ia-back{
/* Centrado dentro de la barra de secciones del manifiesto: la barra mide 64px
y el boton unos 38px, asi que (64-38)/2 = 13px. Los dos se leen como una
sola cabecera en vez de un boton flotando por encima. */
position:fixed; top:13px; left:clamp(20px,4vw,56px); z-index:61;
/* el manifiesto scrollea por debajo: el fondo debe ser opaco, no un velo */
background:rgba(16,20,51,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
box-shadow:0 8px 28px rgba(0,0,0,.5);
border:1px solid rgba(255,255,255,.28); color:var(--ink);
font-size:13px; font-weight:600; letter-spacing:.04em;
padding:10px 18px; border-radius:var(--radius-pill);
display:none; align-items:center; gap:8px;
transition:border-color .2s var(--ease-out), background .2s var(--ease-out),
box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
body.ia .ia-back{ display:inline-flex; }
.ia-back:hover{ border-color:var(--ia-violeta); background:rgba(133,32,214,.12); box-shadow:0 0 20px rgba(133,32,214,.25); }
.ia-back:active{ transform:scale(.97); }
.ia-foot{
grid-column:1 / -1; text-align:center;
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:rgba(234,236,248,.35); padding-top:10px;
}
/* ---------- Modulos de IngeMAX en el home ----------
Sustituye al SVG de iniciales (GO, GC, GF...) por los logos oficiales de cada
modulo. Cada ficha toma su color en --pc, que pone el markup. */
.mods-mini{
display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.mods-mini .mm{
display:flex; align-items:center; justify-content:center;
min-height:76px; padding:12px 14px;
border-radius:10px; text-decoration:none;
border:1px solid color-mix(in srgb, var(--pc) 38%, transparent);
background:linear-gradient(155deg,
color-mix(in srgb, var(--pc) 16%, transparent), rgba(41,46,89,.20));
transition:border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}
.mods-mini .mm:hover{
border-color:var(--pc);
background:linear-gradient(155deg,
color-mix(in srgb, var(--pc) 30%, transparent), rgba(41,46,89,.26));
transform:translateY(-2px);
}
/* Acotado a img: si no, este display:block (0,2,0) gana al flex-column del
lockup tipografico .mlogo-txt (0,1,0) y sus dos lineas salen en fila.
max-height subido de 34 a 46: a 34 el texto "GESTION DE OBRA" bajo el
isotipo IMX quedaba ilegible. */
.mods-mini img.mm-logo{
max-width:100%; max-height:46px; width:auto; height:auto;
object-fit:contain; display:block;
}
.mods-mini .mlogo-txt{ max-width:100%; }
.mods-mini .mlogo-txt b{ font-size:12px; }
.mods-mini .mlogo-txt span{ font-size:7.5px; letter-spacing:.12em; }
.mods-mini .mm-foot{
grid-column:1 / -1; margin-top:4px;
font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--ink-dim); opacity:.5; white-space:nowrap;
}
/* Lockup tipografico para el modulo que aun no tiene logo propio (Gestion del
Talento). Misma familia visual; se retira solo en cuanto exista el PNG. */
.mlogo-txt{
display:flex; flex-direction:column; align-items:center; gap:1px;
line-height:1.05; text-align:center;
}
.mlogo-txt b{
font-family:var(--display); font-weight:800; font-size:13px;
letter-spacing:.01em; color:#fff;
}
.mlogo-txt span{
font-size:8.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color:var(--pc, var(--menta));
}
/* ==========================================================================
GERPRO IA² — el manifiesto como PÁGINA, no como pase de diapositivas.
Estructura tomada del documento de referencia gerpro-ia2.html: barra de
navegación con anclas, hero que define qué es, secciones con nombre y ritmo
alterno (band), barra de resultado, panel de gobierno contenido y pie con
contactos. La piel es la oscura del ecosistema, no la clara del referente.
El fondo (#iaPanel, #iaDrips) y el acto de cierre (.ia2-close, con la fusión
de las soluciones) NO se tocan.
========================================================================== */
/* ---------- Barra de secciones ----------
Pegajosa dentro del panel, que es el contenedor con overflow-y:auto.
Alineada a la derecha a propósito: el hueco de la izquierda lo ocupa el botón
fijo "Volver al ecosistema", y así los dos se leen como una sola barra. */
.ia2-nav{
/* top:0 bastaba dentro del panel modal (#iaPanel), que no tenia otra
cosa fija encima. En page-gerpro-ia.php si la hay: el .sub-header fijo
del sitio (62-70px segun el ancho) — sin este offset, .ia2-nav se
pega justo debajo de el en su posicion natural mientras la pagina esta
en el tope, y ambos se ven superpuestos. */
position:sticky; top:64px; z-index:3;
display:flex; justify-content:flex-end; align-items:center;
gap:clamp(14px, 2vw, 30px);
padding:0 clamp(18px, 4vw, 46px);
height:64px;
/* El home trae `nav{display:flex;gap:26px}` sin clase y esta barra lo hereda:
por eso el display y el gap van explicitos aqui. */
height:64px;
background:rgba(10,13,32,.82);
backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
border-bottom:1px solid rgba(255,255,255,.09);
}
.ia2-nav a{
font-size:12.5px; font-weight:500; letter-spacing:.02em;
color:rgba(234,236,248,.62); text-decoration:none; white-space:nowrap;
/* `nav a` del home impone versalitas y opacidad .6; se anulan aqui. */
text-transform:none; opacity:1;
transition:color .2s var(--ease-out);
}
.ia2-nav a:hover{ color:#fff; }
/* El CTA "Agendar demostración" quedaba duplicado: este mismo texto ya vive
en el .btn-1 de la cabecera (.sub-header), justo encima. Se quito el
.nv-cta de aqui para no repetirlo — a Juan le parecian dos botones
apilados. Con el se va tambien la barra en movil (ya no tiene CTA propio
que mostrar, y el de la cabecera sigue disponible en el hamburguesa). */
@media (max-width:900px){
.ia2-nav{ display:none; }
}
/* Con el nv-cta afuera, el "Agendar demostración" de la cabecera (.btn-1)
queda como unico CTA de la pagina — y se leia deslavado: hereda
opacity:.6 del `nav a` generico del home (pensado para enlaces de texto,
no para un boton solido) y color oscuro (#0B0E22, pensado para los
colores claros de los demas subsitios) sobre el violeta oscuro de esta
pagina. Mismo tamaño y radio que en cualquier subsitio: solo se corrige
opacidad y color de texto para que se lea como el CTA que reemplaza. */
body.ia2-page .sub-header .btn-1{ opacity:1; color:#fff; }
/* El artículo ya no necesita el gran relleno superior: lo ocupa la barra. */
.ia2{ padding-top:clamp(28px, 4vh, 46px); }
/* ---------- Ritmo de secciones ----------
Lo que hacía que esto se leyera como diapositivas era que todas las secciones
fuesen iguales y se separaran por un borde. Ahora alternan fondo (.band) como
en una página normal, y cada bloque tiene forma propia. */
.ia2-act:not(.ia2-close){
border-top:0;
padding:clamp(56px, 9vh, 96px) 0;
}
.ia2-act.band{
position:relative;
padding-inline:clamp(20px, 3.4vw, 42px);
border-radius:20px;
background:rgba(255,255,255,.028);
border:1px solid rgba(255,255,255,.07);
margin:clamp(10px,1.6vh,18px) 0;
}
.sec-head{ margin-bottom:clamp(28px, 4vh, 44px); }
.sec-eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--mono); font-size:12px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(--ia-violeta);
margin-bottom:14px;
}
.sec-eyebrow::before{ content:''; width:24px; height:1px; background:currentColor; }
.sec-eyebrow.rojo{ color:var(--rojo); }
.sec-eyebrow.menta{ color:var(--menta); }
.ia2 .sec-head h2{
font-family:var(--display); font-weight:800;
font-size:clamp(25px, 3.3vw, 44px); line-height:1.1; letter-spacing:-.018em;
color:#fff; max-width:22ch; margin-bottom:14px;
}
.sec-intro{ font-size:clamp(15px,1.4vw,18px); line-height:1.62; color:var(--ink-dim); max-width:60ch; }
.sec-intro b{ color:#fff; font-weight:700; }
.statement{
font-family:var(--display); font-weight:800;
font-size:clamp(26px, 3.6vw, 48px); line-height:1.08; color:#fff;
letter-spacing:-.018em; margin-top:clamp(26px,4vh,40px);
}
.statement.center{ text-align:center; }
/* ---------- Hero ---------- */
.ia2-hero{ padding-top:clamp(34px,5vh,60px) !important; }
.hero-t{
font-family:var(--display); font-weight:800;
font-size:clamp(46px, 9vw, 118px); line-height:.94; letter-spacing:-.025em;
color:#fff; margin-bottom:16px;
}
.hero-t sup{ color:var(--ia-violeta); font-size:.5em; }
.hero-s{
font-family:var(--display); font-weight:700;
font-size:clamp(17px, 2.2vw, 27px); line-height:1.25; color:#fff;
max-width:30ch; margin-bottom:18px;
}
.hero-l{ font-size:clamp(15px,1.45vw,18px); line-height:1.65; color:var(--ink-dim); max-width:66ch; }
.hero-l b{ color:#fff; font-weight:600; }
.xf-claim{
font-family:var(--display); font-weight:800;
font-size:clamp(28px, 4.4vw, 58px); line-height:1; letter-spacing:-.02em;
color:#fff; margin-top:6px;
}
.xf-claim sup{ font-size:.5em; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:34px; }
/* Fila de iconos del resumen de home (ia2-teaser en front-page.php) — el
.f-icon suelto, sin ir dentro de .factor/.tri-card/etc, cae en su color
por defecto (violeta), que es justo el que hace falta aqui. */
.teaser-icons{ display:flex; gap:14px; margin-top:26px; }
/* Resumen de Gerpro IA² en el home (front-page.php): centrado en la pantalla,
no alineado a la izquierda como el resto de .ia2 (que sí necesita ese
orden de lectura para el manifiesto completo en page-gerpro-ia.php). */
.ia2-teaser{ text-align:center; }
.ia2-teaser .hero-l{ margin-inline:auto; }
.ia2-teaser .teaser-icons,
.ia2-teaser .hero-cta{ justify-content:center; }
.ia2-btn{
display:inline-flex; align-items:center; gap:9px;
background:var(--ia-violeta); color:#fff;
font-family:var(--display); font-weight:800; font-size:14.5px;
padding:13px 26px; border-radius:9px; text-decoration:none;
transition:background .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.ia2-btn:hover{ background:#C34EFC; transform:translateY(-2px); box-shadow:0 10px 30px rgba(133,32,214,.35); }
.ia2-btn:active{ transform:scale(.97); }
.hero-badge{
font-family:var(--mono); font-size:12.5px; color:rgba(234,236,248,.72);
border:1px solid rgba(255,255,255,.16); border-radius:100px;
padding:9px 18px; background:rgba(255,255,255,.03);
}
.hero-badge sup{ color:var(--ia-violeta); }
/* Transformación m² → IA² */
.xform{ display:flex; align-items:center; gap:clamp(14px,3vw,38px); margin:clamp(30px,4.5vh,52px) 0 4px; }
.xf-a, .xf-b{
font-family:var(--display); font-weight:800;
font-size:clamp(36px, 7vw, 92px); line-height:.9;
}
.xf-a{ color:rgba(234,236,248,.32); }
.xf-b{ color:var(--ia-violeta); text-shadow:0 0 30px rgba(133,32,214,.55), 0 0 80px rgba(133,32,214,.25); }
.xf-a sup, .xf-b sup{ font-size:.5em; }
.xf-arrow{ display:flex; align-items:center; gap:6px; }
.xf-arrow i{
display:block; width:clamp(14px,2.4vw,30px); height:2px;
background:var(--ia-violeta); opacity:.25; animation:xfrun 1.8s ease-in-out infinite;
}
.xf-arrow i:nth-child(2){ animation-delay:.18s; }
.xf-arrow i:nth-child(3){ animation-delay:.36s; }
@keyframes xfrun{ 0%,100%{ opacity:.2; } 45%{ opacity:1; box-shadow:0 0 12px rgba(133,32,214,.8); } }
/* Panel derecho del hero: la tarjeta ".hero-visual" y el grid de dos
columnas vienen de subsitio.css (esta pagina ya la carga, junto con la de
los 11 subsitios normales) — la transformacion m² → IA² de arriba, que
antes iba apilada a todo lo ancho debajo del texto, ahora vive adentro
para llenar el hueco vacio que quedaba a la derecha del hero, en vez de
inventar un grafico nuevo. `.hero-visual.ia2-xform-card` (dos clases,
mayor especificidad) es necesario para el padding: subsitio.css se carga
DESPUES de este archivo y su `.hero-visual{padding:16px}` ganaria contra
un simple `.ia2-xform-card{padding:...}` de aqui. */
.hero-visual.ia2-xform-card{
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:22px;
padding:clamp(28px,4vw,44px) 24px;
min-height:280px;
}
.ia2-xform-card .xform{ margin:0; }
/* Los tamaños originales de .xf-a/.xf-b/.xf-claim estan pensados para ocupar
el ancho completo de .ia2 (hasta 1240px): dentro de los ~380px de esta
columna se desbordaban. Reescalados solo aqui, con selector descendiente
(mas especifico que `.xf-a`/`.xf-claim` a secas, gana sin importar el
orden de carga). */
.ia2-xform-card .xf-a, .ia2-xform-card .xf-b{ font-size:clamp(30px, 5.2vw, 50px); }
.ia2-xform-card .xf-claim{ font-size:clamp(19px, 2.6vw, 26px); margin-top:0; }
@media (max-width:920px){
.hero-visual.ia2-xform-card{ min-height:0; }
}
/* "El punto de partida" es una provocacion corta (titulo + parrafo + 4
chips), sin una grilla debajo que reparta el ancho como el resto de
secciones (la ecuacion, los ceros, las puertas) — quedaba todo el bloque
pegado a la izquierda con medio contenedor vacio a la derecha. Ensanchar
el texto (subir el max-width en ch) empeoraria la lectura; se centra el
bloque entero en su lugar, mismo tratamiento que `.statement.center` (ya
usado mas abajo, en "los ceros"). */
#ia2-partida .sec-head{ text-align:center; }
#ia2-partida .sec-head h2,
#ia2-partida .sec-intro{ margin-inline:auto; }
#ia2-partida .chips{ justify-content:center; }
#ia2-partida .statement{ text-align:center; }
/* ---------- Chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
font-family:var(--mono); font-size:12.5px; letter-spacing:.05em;
padding:8px 16px; border-radius:100px; color:rgba(234,236,248,.66);
border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
}
/* ---------- La ecuación ---------- */
.equation{
display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
gap:clamp(10px,1.4vw,18px); align-items:stretch;
}
.factor{
padding:28px 26px; border-radius:14px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.12);
border-top:3px solid var(--ia-violeta);
transition:border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}
.factor.f2{ border-top-color:var(--teal); }
.factor.f3{ border-top-color:var(--menta); }
.factor:hover{ background:rgba(255,255,255,.07); transform:translateY(-3px); }
/* Entran en cascada, no los tres a la vez: cada .factor es su propio .rv (ver
front-page.php), asi que la transicion base ya corre por separado en cada
uno — este delay es lo unico que faltaba para que se lean como una
secuencia (01 -> 02 -> 03) y no como un solo bloque. */
.factor.f1{ transition-delay:0s; }
.factor.f2{ transition-delay:.12s; }
.factor.f3{ transition-delay:.24s; }
.f-icon{
display:flex; align-items:center; justify-content:center;
width:40px; height:40px; margin-bottom:14px; border-radius:var(--radius-md);
color:var(--ia-violeta);
background:color-mix(in srgb, var(--ia-violeta) 14%, transparent);
border:1px solid color-mix(in srgb, var(--ia-violeta) 32%, transparent);
}
.factor.f2 .f-icon{ color:var(--teal); background:color-mix(in srgb, var(--teal) 14%, transparent); border-color:color-mix(in srgb, var(--teal) 32%, transparent); }
.factor.f3 .f-icon{ color:var(--menta); background:color-mix(in srgb, var(--menta) 14%, transparent); border-color:color-mix(in srgb, var(--menta) 32%, transparent); }
.f-icon svg{ width:22px; height:22px; }
.f-i{
display:block; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:rgba(234,236,248,.5); margin-bottom:10px;
}
.ia2 .factor h3{
font-family:var(--display); font-weight:700; font-size:clamp(16px,1.6vw,20px);
color:#fff; margin-bottom:10px; line-height:1.2;
}
.factor p{ font-size:14.5px; line-height:1.6; color:rgba(234,236,248,.72); }
.factor p b{ color:#fff; font-weight:700; }
.times{
display:flex; align-items:center; justify-content:center;
font-family:var(--display); font-weight:800;
font-size:clamp(20px,2.4vw,30px); color:var(--ia-violeta);
}
.result-bar{
/* La ecuacion debe leerse de corrido: formula y resultado pegados a la
izquierda, y la salvedad despues. Con space-between el "= Potencia" saltaba
al extremo opuesto y se perdia la lectura. */
display:flex; align-items:baseline; justify-content:flex-start;
gap:12px 26px; flex-wrap:wrap; margin-top:26px;
padding:24px clamp(22px,3vw,34px); border-radius:14px;
background:linear-gradient(110deg, rgba(133,32,214,.16), rgba(41,46,89,.34) 60%);
border:1px solid rgba(133,32,214,.32);
}
.rb-formula{
font-family:var(--mono); font-size:clamp(15px, 1.5vw, 18px);
letter-spacing:.04em; color:var(--menta);
}
.rb-eq{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:10px 14px; }
.rb-out{
font-family:var(--display); font-weight:800;
font-size:clamp(19px, 2vw, 25px); color:#fff; white-space:nowrap;
}
.rb-note{ font-size:15px; color:var(--ink-dim); }
.rb-note em{ font-style:normal; font-weight:700; color:var(--ia-violeta); }
/* ---------- Los tres ceros ---------- */
.zeros{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); }
.zero-card{
padding:26px 24px; border-radius:14px;
background:rgba(248,82,47,.05);
border:1px solid rgba(248,82,47,.26);
display:flex; flex-direction:column;
transition:border-color .25s, background .25s;
}
.zero-card:hover{ border-color:rgba(248,82,47,.6); background:rgba(248,82,47,.09); }
.zero-card:nth-child(1){ transition-delay:0s; }
.zero-card:nth-child(2){ transition-delay:.12s; }
.zero-card:nth-child(3){ transition-delay:.24s; }
.zero-card .f-icon{ color:var(--rojo); background:color-mix(in srgb, var(--rojo) 14%, transparent); border-color:color-mix(in srgb, var(--rojo) 32%, transparent); }
.zero-card .tag{
font-family:var(--mono); font-size:11px; letter-spacing:.16em;
text-transform:uppercase; color:var(--rojo); font-weight:600;
}
.ia2 .zero-card h3{
font-family:var(--display); font-weight:700; font-size:clamp(16px,1.6vw,20px);
color:#fff; margin:10px 0 8px; line-height:1.2;
}
.zero-card p{ font-size:14.5px; line-height:1.58; color:rgba(234,236,248,.72); }
.zero-card .zero{
margin-top:auto; padding-top:18px;
font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,46px);
color:var(--rojo); line-height:1; text-shadow:0 0 22px rgba(248,82,47,.4);
}
/* ---------- La Tríada ---------- */
.triada{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); }
.tri-card{
padding:28px 26px; border-radius:14px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.12);
border-left:3px solid var(--k);
transition:background .25s var(--ease-out), transform .25s var(--ease-out);
}
.tri-card:hover{ background:rgba(255,255,255,.075); transform:translateY(-3px); }
.tri-card:nth-child(1){ transition-delay:0s; }
.tri-card:nth-child(2){ transition-delay:.12s; }
.tri-card:nth-child(3){ transition-delay:.24s; }
.tri-card .f-icon{ color:var(--k); background:color-mix(in srgb, var(--k) 14%, transparent); border-color:color-mix(in srgb, var(--k) 32%, transparent); }
.tri-card .num{
font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--k);
}
.ia2 .tri-card h3{
font-family:var(--display); font-weight:800; font-size:clamp(18px,1.9vw,24px);
color:#fff; margin:10px 0 10px; line-height:1.15;
}
.tri-card p{ font-size:14.5px; line-height:1.6; color:rgba(234,236,248,.72); }
.note-block{
margin-top:30px; padding:20px 26px;
border-left:3px solid var(--menta);
border-radius:0 12px 12px 0;
background:rgba(127,192,183,.09);
font-size:15.5px; line-height:1.62; color:var(--ink-dim); max-width:78ch;
}
.note-block b{ color:#fff; font-weight:700; }
/* ---------- Las tres puertas ---------- */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); }
.door{
padding:28px 26px; border-radius:14px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.12);
transition:border-color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out);
}
.door:hover{ border-color:rgba(133,32,214,.5); background:rgba(255,255,255,.075); transform:translateY(-3px); }
.door-mid{ border-color:rgba(133,32,214,.38); background:linear-gradient(160deg, rgba(133,32,214,.11), rgba(255,255,255,.03) 66%); }
.door:nth-child(1){ transition-delay:0s; }
.door:nth-child(2){ transition-delay:.12s; }
.door:nth-child(3){ transition-delay:.24s; }
.door .f-icon{ color:var(--ia-violeta); background:color-mix(in srgb, var(--ia-violeta) 14%, transparent); border-color:color-mix(in srgb, var(--ia-violeta) 32%, transparent); }
.d-i{
display:block; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:color-mix(in srgb, var(--ia-violeta) 55%, #fff 45%); margin-bottom:10px;
}
.ia2 .door h3{
font-family:var(--display); font-weight:700; font-size:clamp(16px,1.7vw,21px);
color:#fff; margin-bottom:10px; line-height:1.2;
}
.door p{ font-size:14.5px; line-height:1.6; color:rgba(234,236,248,.72); }
.door p b{ color:#fff; font-weight:700; }
.tecnico{
margin-top:24px; border:1px solid rgba(255,255,255,.12);
border-radius:10px; background:rgba(255,255,255,.02);
}
.tecnico summary{
list-style:none; cursor:pointer; padding:14px 18px;
font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
text-transform:uppercase; color:rgba(234,236,248,.6);
display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.tecnico summary::-webkit-details-marker{ display:none; }
.tecnico summary::after{ content:'+'; color:var(--ia-violeta); font-size:17px; }
.tecnico[open] summary::after{ content:'−'; }
.tecnico .tc-body{
padding:0 18px 18px; font-size:14px; line-height:1.62;
color:rgba(234,236,248,.66); max-width:76ch;
}
.tecnico .tc-body b{ color:#fff; font-weight:700; }
/* ---------- Panel de gobierno ----------
Contenido y relleno, como en el referente: rompe la monotonía de secciones
abiertas y marca el momento más serio del manifiesto. */
.gov-panel{
border-radius:22px; padding:clamp(38px,5.5vw,62px) clamp(26px,4.4vw,56px);
background:linear-gradient(155deg, rgba(41,46,89,.85), rgba(11,14,34,.9));
border:1px solid rgba(133,32,214,.26);
box-shadow:0 30px 90px rgba(7,9,25,.55);
text-align:center;
}
.gov-panel .sec-eyebrow{ justify-content:center; }
.ia2 .gov-panel h2{
font-family:var(--display); font-weight:800;
font-size:clamp(22px,3vw,38px); line-height:1.14; color:#fff;
max-width:24ch; margin:0 auto 14px;
}
.gov-lead{ font-size:clamp(15px,1.4vw,18px); color:var(--ink-dim); }
.firma{
font-family:var(--display); font-weight:800;
font-size:clamp(26px,4.2vw,52px); line-height:1.1; color:#fff;
margin:26px 0 6px;
}
.gov-panel .sign{ max-width:460px; margin:0 auto; }
.gov-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
margin-top:34px; text-align:left;
}
.gov-i{ padding-top:16px; border-top:1px solid rgba(255,255,255,.14); }
.gov-i h4{
font-family:var(--display); font-weight:700; font-size:15px;
color:#fff; margin-bottom:6px;
}
.gov-i p{ font-size:13.5px; line-height:1.55; color:rgba(234,236,248,.66); }
/* ---------- La ruta de madurez ---------- */
.ladder{ list-style:none; display:grid; gap:2px; }
.ladder li{
display:grid; grid-template-columns:clamp(80px,10vw,116px) minmax(0,1fr);
gap:clamp(14px,2vw,26px); align-items:start;
padding:22px clamp(18px,2.4vw,26px);
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.10);
transition:border-color .25s, background .25s;
}
.ladder li:first-child{ border-radius:14px 14px 0 0; }
.ladder li:last-child{ border-radius:0 0 14px 14px; }
.ladder li:hover{ border-color:rgba(133,32,214,.45); background:rgba(133,32,214,.05); }
/* --step es la fraccion de la ruta ya recorrida en ese nivel (0 a 1), no un
porcentaje: la usa el anillo de progreso de .lv-ring-fg mas abajo, y una
longitud de trazo se calcula multiplicando, no dividiendo entre un %. */
.ladder li:nth-child(1){ --step:.26; transition-delay:0s; }
.ladder li:nth-child(2){ --step:.5; transition-delay:.1s; }
.ladder li:nth-child(3){ --step:.74; transition-delay:.2s; }
.ladder li:nth-child(4){ --step:1; transition-delay:.3s; }
.ladder .lv{
display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
/* Anillo de progreso en vez de la barra bajo el texto: se lee de un vistazo
como diagrama (cuanto se ha recorrido de la ruta), no como una etiqueta con
subrayado. circunferencia = 2*pi*15.5 ~= 97.4. */
.lv-ring{ width:46px; height:46px; transform:rotate(-90deg); flex:none; }
.lv-ring-bg{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:3; }
.lv-ring-fg{
fill:none; stroke:var(--ia-violeta); stroke-width:3; stroke-linecap:round;
stroke-dasharray:97.4px;
stroke-dashoffset:97.4px;
transition:stroke-dashoffset 1s var(--ease-standard, ease) .3s;
filter:drop-shadow(0 0 4px rgba(133,32,214,.6));
}
/* .in lo pone el observador en el , no en cada
.rv por separado (ver armManifiesto() en ecosistema.js) — de ahi el
selector por el ancestro y no por .ladder li.in, que nunca existiria. */
.ia2-act.in .lv-ring-fg{ stroke-dashoffset:calc(97.4px * (1 - var(--step))); }
.lv-label{
font-family:var(--mono); font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:rgba(234,236,248,.55);
}
.ia2 .ladder h3{
font-family:var(--display); font-weight:700; font-size:clamp(16px,1.6vw,21px);
color:#fff; margin-bottom:6px;
}
.ladder p{ font-size:14.5px; line-height:1.58; color:rgba(234,236,248,.72); max-width:70ch; }
/* ---------- Pie del manifiesto ---------- */
.ia2-foot{
margin-top:clamp(30px,5vh,56px); padding-top:30px;
border-top:1px solid rgba(255,255,255,.10);
display:flex; flex-wrap:wrap; gap:18px 30px;
align-items:center; justify-content:space-between;
}
/* .ia2-links y no .fc: `.fc` ya es el contenido de las caras del cubo, que
vive en opacity:0 hasta activarse. Reusar ese nombre dejaba invisibles los
contactos del pie. */
.ia2-foot .ia2-links{ display:flex; flex-wrap:wrap; gap:12px 26px; }
.ia2-foot a{ font-size:13.5px; color:var(--menta); text-decoration:none; font-weight:500; }
.ia2-foot a:hover{ text-decoration:underline; }
.ia2-foot .fs{ font-size:12.5px; color:rgba(234,236,248,.5); }
.ia2-foot .fs b{ color:rgba(234,236,248,.8); font-weight:600; }
/* ---------- Responsive ---------- */
@media (max-width:900px){
.equation{ grid-template-columns:1fr; }
.times{ transform:rotate(90deg); padding:2px 0; }
.zeros, .triada, .doors, .gov-grid{ grid-template-columns:1fr; }
.ladder li{ grid-template-columns:1fr; gap:8px; }
.lv{ flex-direction:row; align-items:center; gap:12px; }
}
@media (prefers-reduced-motion: reduce){
.xf-arrow i{ animation:none; opacity:.85; }
.factor:hover, .tri-card:hover, .door:hover, .ia2-btn:hover{ transform:none; }
}
/* ---------- Responsive ---------- */
@media (max-width:1150px){
/* header nav, no "nav" a secas: del panel Gerpro IA²
tambien es un , y un selector sin acotar le apagaba TODOS sus
enlaces (incluido "Agendar demostración") en cualquier laptop de menos
de 1150px de ancho.
Debajo de este ancho el nav entero se convierte en el panel que abre el
hamburguesa — mismo patron que .sub-header en subsitio.css (mismo ancho
y sombra que .prod-m), asi que en movil el home se ve y se comporta
igual que cualquier subsitio (MAFP incluido). El boton Gerpro IA² queda
fuera del panel, siempre visible: es la excepcion a esta unificacion. */
.sub-burger{ display:inline-flex; }
header nav{
position:fixed; top:64px; right:12px; left:auto;
width:min(300px, calc(100vw - 24px));
flex-direction:column; align-items:stretch; gap:2px;
padding:10px; border-radius:16px; border:1px solid var(--hair);
background:rgba(20,23,51,.94);
backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
box-shadow:0 24px 60px rgba(11,14,34,.6);
}
header nav[hidden]{ display:none; }
header nav a{
display:block; opacity:1; padding:11px 12px; border-radius:11px;
font-size:13px; font-weight:500; letter-spacing:normal; text-transform:none;
}
header nav a:hover{ background:rgba(127,192,183,.10); }
header .prod{ display:block; }
header .prod-t{
width:100%; padding:11px 12px; justify-content:space-between;
font-size:13px; letter-spacing:normal; text-transform:none; opacity:1;
}
@media (prefers-reduced-motion: no-preference){
header nav{ opacity:0; transform:translateY(-8px); transition:opacity .18s var(--ease-out), transform .18s var(--ease-out); }
header nav[data-open]{ opacity:1; transform:translateY(0); }
}
/* el botón crece a lo ancho y chocaba con el logo: aquí vuelve a medida */
header{ padding:14px 16px; }
.hlogo{ height:24px; }
.btn-ia{ font-size:13px; padding:10px 17px; white-space:nowrap; }
.btn-ia .arw{ margin-left:8px; }
.mods-mini{ grid-template-columns:repeat(2, 1fr); }
/* Sin cubo fijo a pantalla completa que le dispute el espacio, la tarjeta
ya no necesita fondo opaco, apilarse al pie con position:absolute ni
esconder el grafico o los beneficios para caber en un alto de viewport
fijo (limitaciones todas del diseño anterior) — aqui solo se acomoda a
una columna, cubo+menu arriba (ya NO sticky: con el header fijo Y las
tarjetas sticky de por medio, un tercer elemento sticky angosto no
sumaba nada y complicaba el orden de apilado), texto arriba y grafico
abajo dentro de cada tarjeta. */
.dims-layout{ grid-template-columns:minmax(0,1fr); }
.dims-nav{ position:static; text-align:center; margin-bottom:8px; }
/* En movil el menu es una fila que envuelve (wrap), no una lista vertical
con un borde izquierdo claro al cual alinear el cubo — ahi si se ve
mejor centrado, como antes. */
.dims-cube{ margin:0 auto 20px; }
.dims-menu{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
.dims-tab{ flex:1 1 auto; justify-content:center; }
.dims-card{ top:calc(92px + var(--i) * var(--bar)); }
.dims-card-body{ grid-template-columns:minmax(0,1fr); text-align:left; }
.fx-floor{ transform:translateX(-50%) perspective(360px) rotateX(68deg); opacity:.72; }
/* Celda mas pequena en pantalla estrecha. Va en ::before, que es quien lleva
el fondo desde que la rejilla se mueve con transform; en .fx-floor no haria
nada. Y el recorrido y el desborde superior deben medir lo mismo que la
celda o el bucle da un salto visible cada 4,5 s. */
.fx-floor::before{ background-size:46px 46px; top:-46px; }
}
/* En celular las seis pestañas de texto (Evaluación de tierras, Operación...)
ya no aportan nada — quedan apiladas arriba del todo, lejos de la tarjeta
que describen, y el cubo pierde sentido rodeado de una lista larga en vez
de quedar como la pieza central que es (pedido real de Juan, visto en
captura). El cubo sigue: es quien de verdad indica en cual dimension esta
parado el scroll (ver observeStack() en ecosistema.js, que lo gira solo). */
@media (max-width:640px){
.dims-menu{ display:none; }
/* min-height:calc(100vh - 152px) (regla base, pensada para el .dims-nav
sticky de escritorio) sigue puesta aca porque ninguna otra regla la
pisaba: con las 6 pestañas ese alto se llenaba solo, pero al ocultarlas
quedaba un hueco vacio enorme debajo del cubo (bug real, visto en
captura — el mismo tipo de hueco por min-height/vh ya visto en el
apilado de tarjetas). */
.dims-nav{ min-height:0; margin-bottom:0; padding-bottom:0; }
.dims-cube{ margin:0 auto; }
}
/* En pantallas estrechas la cabecera lleva tres piezas — logo, Productos y el
boton IA — y a 390px se desbordaba. Aqui se aprietan para que quepan. */
/* Con Eventos en el nav son cuatro piezas: entre 960 y 1100px el espacio queda
ajustado, asi que se recorta el interletrado antes de que se solapen. */
@media (max-width:1100px){
nav{ gap:18px; }
nav a{ letter-spacing:.1em; }
}
@media (max-width:560px){
header{ padding:12px 12px; gap:8px; }
.hlogo{ height:19px; }
.btn-ia{ font-size:11px; padding:8px 12px; }
.btn-ia .arw{ margin-left:6px; }
}
@media (prefers-reduced-motion: reduce){
.cue svg{ animation:none; }
#iaPanel, #cube, #core{ transition:none; }
}
/* El aura, el barrido de luz, la malla neural, el giro del riel, el pulso del
logo del cubo y el resplandor del boton Gerpro IA² ya no existen (se
quitaron a pedido de Juan, ver los comentarios donde vivia cada uno) — el
modo austero de GFX (ecosistema.js) que los apagaba en equipos lentos ya
no tiene nada que apagar, asi que body.lowfx no necesita reglas propias.
Pasado el cubo, #aiSections (blanco y opaco) tapa el fondo completo: se
sigue ocultando por si acaso, aunque ya no anima nada debajo. */
body.past-cube #heroFx,
body.past-cube #stars{ visibility:hidden; }
/* ==========================================================================
SECCIONES PORTADAS DE gerpro-ai.html · van después del recorrido del cubo
Todo el bloque está aislado bajo #aiSections para no chocar con los estilos
del cubo (.cta, .ia, .ia-grid y .eyebrow existen en ambas hojas).
========================================================================== */
#aiSections{
position:relative; z-index:30; /* por encima del escenario fijo (10) y los overlays (20) */
background:var(--paper);
color:#333; line-height:1.65;
--font-display:var(--display); /* una sola identidad tipográfica en el documento */
--font-body:var(--body);
--font-mono:'IBM Plex Mono', ui-monospace, monospace;
--paper:#FFFFFF; --paper-soft:#F8F9FA; --line:#E0E0E0;
--radius:20px; --ease:cubic-bezier(.22,1,.36,1);
--shadow:0 24px 70px -24px rgba(41,46,89,.28);
font-family:var(--font-body);
}
/* el header es texto claro sin fondo: sobre las secciones blancas necesita respaldo */
body.past-cube header{
background:rgba(28,32,64,.9);
backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
box-shadow:0 8px 30px rgba(20,23,51,.35);
}
header{ transition:background .4s var(--ease-out), box-shadow .4s var(--ease-out); }
/* :not(:where(...)) — el pie (tokens.css, .site-footer) ya trae su propio
color de enlace y tamaño de logo; sin esta exclusion el reset de
#aiSections gana por especificidad de ID y el pie del home se ve distinto
al de los subsitios (logo a tamaño natural, enlaces en var(--teal)).
El :where() adentro del :not() es a proposito: sin el, :not(.site-footer
img) sube la especificidad de la regla (le suma un tipo "img" de mas) y
esta regla pasa por encima de otras mas especificas que tambien parten
de "#aiSections img", como #aiSections .marquee-track img (el carrusel
de clientes) — :where() tiene especificidad cero, asi que no cambia nada
mas que excluir el pie. */
#aiSections img:not(:where(.site-footer img)){max-width:100%;height:auto;display:block}
#aiSections a:not(:where(.site-footer a)){color:var(--teal);text-decoration:none}
#aiSections h1, #aiSections h2, #aiSections h3{font-family:var(--font-display);color:var(--indigo);line-height:1.1;letter-spacing:-.02em}
#aiSections .wrap{width:min(1180px,92vw);margin-inline:auto}
#aiSections .eyebrow{
font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;
text-transform:uppercase;color:var(--ambar);display:inline-flex;align-items:center;gap:.6rem;
}
#aiSections .eyebrow::before{content:"";width:26px;height:1px;background:var(--ambar)}
#aiSections .scrub-el{will-change:transform,opacity}
#aiSections .reveal{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
#aiSections .reveal.in{opacity:1;transform:none}
#aiSections .reveal-d1{transition-delay:.1s}#aiSections .reveal-d2{transition-delay:.2s}
#aiSections .reveal-d3{transition-delay:.3s}#aiSections .reveal-d4{transition-delay:.4s}
#aiSections .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.2rem}
#aiSections .btn{
display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.98rem;
padding:.85rem 1.7rem;border-radius:var(--radius-pill);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
#aiSections .btn-primary{background:var(--ambar);color:#fff}
#aiSections .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(236,142,57,.45)}
#aiSections .btn-ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff}
#aiSections .btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
#aiSections .btn:active{transform:scale(.97)}
#aiSections .hero-badge{
display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.75rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--menta);
border:1px solid rgba(127,192,183,.35);border-radius:var(--radius-pill);padding:.45rem 1rem;
background:rgba(127,192,183,.08);
}
/* ==========================================================================
MANIFIESTO — texto gigante que se ilumina palabra a palabra con el scroll
========================================================================== */
#aiSections .manifesto-wrap{height:280vh;position:relative;background:var(--indigo-night)}
#aiSections .manifesto{
position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;
overflow:hidden;
}
#aiSections .manifesto .glow{
position:absolute;width:60vmax;height:60vmax;border-radius:50%;
background:radial-gradient(circle,rgba(236,142,57,.14) 0%,transparent 60%);
top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}
#aiSections .manifesto-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:3rem;align-items:center}
#aiSections .manifesto p{
font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
font-size:clamp(1.35rem,2.8vw,2.3rem);line-height:1.3;max-width:34rem;position:relative;z-index:2;
}
#aiSections .manifesto p#manifestoSub{
font-weight:400;letter-spacing:0;font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.55;margin-top:1.6rem;
}
#aiSections .manifesto .w{color:rgba(185,192,228,.16);transition:color .18s linear}
#aiSections .manifesto .w.lit{color:#fff}
#aiSections .manifesto .w.hl-1.lit{color:var(--ambar)}
#aiSections .manifesto .w.hl-2.lit{color:var(--menta)}
/* ------- Lienzo: los datos llegan y levantan el edificio ------- */
#aiSections .build-stage{position:relative;z-index:2;height:min(64vh,560px)}
#aiSections .build-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:900px){
#aiSections .manifesto-grid{grid-template-columns:1fr;gap:1.2rem}
#aiSections .manifesto p{font-size:clamp(1.02rem,3.9vw,1.5rem);max-width:none}
#aiSections .manifesto p#manifestoSub{font-size:clamp(.92rem,3.4vw,1.1rem);margin-top:1.1rem}
#aiSections .build-stage{height:30svh;order:-1}
}
/* ==========================================================================
Cabecera de sección compartida
========================================================================== */
#aiSections .section-head{max-width:46rem;margin-bottom:3.2rem}
#aiSections .section-head h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:.9rem 0 1rem}
#aiSections .section-head p{color:#5A5F73;font-size:1.05rem}
/* ==========================================================================
IA EN EL NÚCLEO — restaurado: se borró sin querer en una edición anterior
de esta misma sesión (ver "IA en el núcleo" en page-gerpro-ia.php, que
depende de estas reglas para no caer sin estilo).
========================================================================== */
#aiSections .ia{background:linear-gradient(180deg,var(--paper) 0%,#F2F4FB 100%);padding:clamp(5rem,10vw,8rem) 0}
#aiSections .ia-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
#aiSections .ia-card{
border-radius:var(--radius);padding:2.1rem 1.8rem;background:var(--paper);
border:1px solid var(--line);transition:box-shadow .45s var(--ease);
}
#aiSections .ia-card:hover{box-shadow:var(--shadow)}
#aiSections .ia-ico{
width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.2rem;
background:color-mix(in srgb,var(--c,var(--teal)) 12%,white);color:var(--c,var(--teal));
}
#aiSections .ia-ico svg{width:26px;height:26px}
#aiSections .ia-card h3{font-size:1.15rem;margin-bottom:.6rem}
#aiSections .ia-card p{font-size:.93rem;color:#5A5F73}
@media (max-width:900px){#aiSections .ia-grid{grid-template-columns:1fr}}
/* ==========================================================================
RESULTADOS
========================================================================== */
#aiSections .res{padding:clamp(5rem,10vw,8rem) 0}
#aiSections .res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
#aiSections .res-item{
display:flex;gap:1.2rem;background:var(--paper-soft);border-radius:var(--radius);
padding:1.7rem;border:1px solid var(--line);
transition:box-shadow .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);
}
#aiSections .res-item:hover{
box-shadow:var(--shadow); transform:translateY(-3px);
border-color:color-mix(in srgb,var(--c,var(--ambar)) 35%,var(--line));
}
/* Mismo lenguaje que .ia-ico arriba (icono en su color, sobre un tinte del
mismo color): reemplaza el numero suelto en un cuadro con borde, que era
la parte que se sentia mas generica de la seccion. */
#aiSections .res-item .n{
color:var(--c,var(--ambar));
background:color-mix(in srgb,var(--c,var(--ambar)) 12%,white);
border-radius:14px;
width:52px;height:52px;display:grid;place-items:center;flex-shrink:0;
}
#aiSections .res-item .n svg{width:26px;height:26px}
#aiSections .res-item h3{font-size:1.08rem;margin-bottom:.4rem}
#aiSections .res-item p{font-size:.9rem;color:#5A5F73}
@media (max-width:760px){#aiSections .res-grid{grid-template-columns:1fr}}
/* ==========================================================================
CLIENTES — franja de marca con logos reales en carrusel continuo.
Mismo gradiente radial navy que .cta (ver mas abajo): la franja rompe el
blanco de #aiSections a proposito, como el bloque azul de "confiables"
de salesforce.com o el de gerprolatam.com — logos reales a color, no
monocromos, porque no tenemos versiones "solo blanco" de cada marca.
========================================================================== */
/* El resplandor central se apaga a transparent (no a --indigo-night): la
franja no mide siempre lo mismo que la elipse de 480px, y si el ultimo
color del gradiente es solido, el borde inferior real se queda a mitad de
camino del degradado en vez de tocar --indigo-night — ese era el corte
duro contra .gx (abajo) y .cta (mas abajo, mismo gradiente). Con
--indigo-night puesto aparte como fondo base, el borde real de la seccion
—sea cual sea su alto— siempre cae en --indigo-night, igual que el fondo
base de sus vecinas. */
#aiSections .clients{
background:
radial-gradient(900px 480px at 50% 0%,#343B73 0%,var(--indigo) 45%,transparent 100%),
var(--indigo-night);
padding:clamp(3.4rem,6vw,4.6rem) 0 clamp(3.8rem,7vw,5.2rem);
}
#aiSections .clients h2{text-align:center;font-size:.82rem;font-family:var(--font-mono);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--menta);margin-bottom:clamp(2rem,4vw,2.8rem)}
#aiSections .marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#aiSections .marquee-track{display:flex;align-items:center;gap:clamp(2.4rem,4.5vw,4rem);width:max-content;animation:ai-scroll 58s linear infinite}
#aiSections .marquee:hover .marquee-track{animation-play-state:paused}
#aiSections .marquee-track img{
height:clamp(24px,3.1vw,34px);width:auto;max-width:150px;object-fit:contain;
flex-shrink:0;opacity:.9;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
#aiSections .marquee-track img:hover{opacity:1;transform:translateY(-2px)}
@keyframes ai-scroll{to{transform:translateX(-50%)}}
@media (max-width:640px){
#aiSections .marquee-track{gap:2rem;animation-duration:42s}
#aiSections .marquee-track img{height:22px;max-width:110px}
}
/* ==========================================================================
CTA — entra con zoom estilo Apple
========================================================================== */
#aiSections .cta{
background:
radial-gradient(900px 500px at 50% 0%,#343B73 0%,var(--indigo) 45%,transparent 100%),
var(--indigo-night);
color:#fff;text-align:center;padding:clamp(5.5rem,11vw,9rem) 0;
}
#aiSections .cta-inner{transform-origin:center top}
#aiSections .cta h2{color:#fff;font-size:clamp(1.9rem,4vw,3.1rem);max-width:48rem;margin:1.2rem auto}
#aiSections .cta p{color:#C9CEE8;max-width:38rem;margin:0 auto 2.4rem}
#aiSections .cta-channels{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}
#aiSections .channel{
border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:1rem 1.5rem;
font-family:var(--font-mono);font-size:.82rem;color:#C9CEE8;transition:border-color .3s var(--ease),transform .3s var(--ease);
}
#aiSections .channel:hover{border-color:var(--ambar);transform:translateY(-3px);color:#fff}
#aiSections .channel b{display:block;color:#fff;font-family:var(--font-body);font-size:.95rem;margin-bottom:.2rem}
/* ------- Footer -------
El componente (fondo, columnas, redes) vive en tokens.css como
.site-footer: lo comparten el home y los subsitios. Aqui solo queda el
ajuste de layout que corresponde al home dentro de #aiSections. */
/* .cta existe también en la hoja del cubo, donde es un botón (el del cierre y
el del manifiesto IA²) con border-radius:var(--radius-pill) (pastilla). Se neutralizan
las propiedades que se filtran aquí: sin el display:block/width:100% la
seccion CTA hereda display:inline-flex y sale angosta; sin el
border-radius:0, la seccion entera (ancha y no muy alta) hereda la
pastilla del boton y se ve como un ovalo blanco y azul gigante. */
#aiSections .cta{
display:block; width:100%; margin-top:0;
align-items:normal; gap:normal;
font-size:1rem; font-weight:400;
box-shadow:none; transition:none; border-radius:0;
}
#aiSections .cta:hover{ transform:none; box-shadow:none; }
@media (prefers-reduced-motion: reduce){
#aiSections .manifesto-wrap{ height:auto; }
#aiSections .manifesto{ position:relative; height:auto; min-height:100svh; padding:6rem 0; }
#aiSections .manifesto .w{ color:#fff; }
#aiSections .reveal{ opacity:1; transform:none; }
}
/* ==========================================================================
GERPRO X — seccion del home, entre .clients (clara) y .cta (oscura).
Banda oscura a proposito: hace de puente entre el bloque claro de arriba y
el cierre oscuro, y separa la escuela del catalogo de producto.
Todas las clases van con prefijo gx- : dentro de esta hoja conviven el CSS
del cubo, el del manifiesto y el de #aiSections, y los nombres genericos
(.card, .demo, .fc...) ya han chocado antes.
========================================================================== */
#aiSections .gx{
position:relative; overflow:hidden;
/* Mismo #141733 (--indigo-night) que el borde de .clients arriba y el
borde de .cta abajo (los dos usan el mismo radial-gradient, que se
apaga a --indigo-night fuera de su elipse) — antes terminaba en un
#0C1029 mas oscuro con una linea blanca de 1px en cada borde
(border-block), y esos dos "cortes" se veian como un corte duro entre
las tres secciones en vez de un solo fondo continuo. */
background:
radial-gradient(70vmax 50vmax at 15% 0%, rgba(25,148,164,.16), transparent 60%),
radial-gradient(60vmax 46vmax at 88% 100%, rgba(236,142,57,.14), transparent 58%),
var(--indigo-night);
color:var(--ink);
padding:clamp(4rem, 9vh, 7rem) 0;
}
/* ---------- Cabecera ---------- */
#aiSections .gx-head{ max-width:52rem; margin-bottom:clamp(2.4rem,5vh,3.6rem); }
/* El logo lleva "ESCUELA DE FORMACION EJECUTIVA" en una linea muy fina bajo la
marca: a 44px de alto esa linea era ilegible. El archivo es 1024x367 (2,8:1),
asi que a ~78px de alto la bajada ya se lee. */
#aiSections .gx-logo{
height:clamp(58px, 6.4vw, 82px); width:auto; display:block;
margin:1.2rem 0 1.4rem;
}
#aiSections .gx h2{
color:#fff; font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.12;
letter-spacing:-.018em; margin:0 0 1rem;
}
#aiSections .gx h2 em{ font-style:normal; color:var(--ambar); }
#aiSections .gx-lead{ color:#C3C8E2; font-size:1.02rem; line-height:1.65; max-width:58ch; }
#aiSections .gx-kick{
font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--ambar); margin-bottom:1rem;
}
/* ---------- El metodo, como ciclo ----------
Tres tiempos unidos por flechas y una etiqueta de retorno: se lee como un
bucle semanal, no como tres tarjetas sueltas. */
#aiSections .gx-ciclo{
position:relative;
display:grid; grid-template-columns:1fr auto 1fr auto 1fr;
gap:.9rem; align-items:stretch;
padding-bottom:2.4rem; margin-bottom:clamp(2.4rem,5vh,3.4rem);
}
#aiSections .gx-beat{
padding:1.5rem 1.4rem; border-radius:16px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.13);
transition:border-color .3s var(--ease), transform .3s var(--ease);
}
#aiSections .gx-beat:hover{ border-color:rgba(236,142,57,.55); transform:translateY(-3px); }
#aiSections .gx-n{
display:block; font-family:var(--font-mono); font-size:.72rem;
letter-spacing:.2em; color:var(--ambar); margin-bottom:.7rem;
}
#aiSections .gx-beat h3{ color:#fff; font-size:1.05rem; margin-bottom:.5rem; }
#aiSections .gx-beat p{ color:#AEB4D2; font-size:.88rem; line-height:1.55; }
#aiSections .gx-arrow{
align-self:center; width:26px; height:2px; background:var(--ambar); opacity:.5;
position:relative;
}
#aiSections .gx-arrow::after{
content:''; position:absolute; right:-1px; top:-4px;
border-top:5px solid transparent; border-bottom:5px solid transparent;
border-left:7px solid var(--ambar);
}
/* Retorno del bucle: una linea que baja, cruza y vuelve al principio. */
#aiSections .gx-loop{
position:absolute; left:0; right:0; bottom:0;
font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em;
text-transform:uppercase; color:rgba(234,236,248,.5);
text-align:center; padding-top:.7rem;
border-top:1px dashed rgba(236,142,57,.4);
}
#aiSections .gx-loop::before,
#aiSections .gx-loop::after{
content:''; position:absolute; top:-14px; width:1px; height:14px;
background:rgba(236,142,57,.4);
}
#aiSections .gx-loop::before{ left:8%; }
#aiSections .gx-loop::after{ right:8%; }
/* ---------- Programas + credencial ---------- */
#aiSections .gx-split{
display:grid; grid-template-columns:1.35fr .95fr;
gap:clamp(1.2rem,2.4vw,2.2rem); align-items:start;
}
#aiSections .gx-list{ list-style:none; display:grid; gap:2px; }
#aiSections .gx-list li{
display:grid; grid-template-columns:auto 1fr auto; gap:.5rem 1.1rem;
align-items:center;
padding:1rem 1.2rem;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.10);
border-left:3px solid var(--gk);
transition:background .25s var(--ease), border-color .25s var(--ease);
}
#aiSections .gx-list li:first-child{ border-radius:14px 14px 0 0; }
#aiSections .gx-list li:last-child{ border-radius:0 0 14px 14px; }
#aiSections .gx-list li:hover{ background:rgba(255,255,255,.075); }
#aiSections .gx-fam{
font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--gk);
border:1px solid color-mix(in srgb, var(--gk) 42%, transparent);
border-radius:100px; padding:.28rem .6rem; white-space:nowrap;
}
#aiSections .gx-nom{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:1rem; }
#aiSections .gx-carga{
font-family:var(--font-mono); font-size:.78rem; color:#AEB4D2; white-space:nowrap;
}
#aiSections .gx-carga b{ color:var(--ambar); font-size:1.05rem; }
#aiSections .gx-nota{
margin-top:1.1rem; font-size:.86rem; line-height:1.6; color:#9AA0BC; max-width:60ch;
}
#aiSections .gx-cred{
position:relative;
padding:1.7rem 1.6rem 1.9rem; border-radius:18px;
background:linear-gradient(160deg, rgba(236,142,57,.13), rgba(255,255,255,.03) 62%);
border:1px solid rgba(236,142,57,.30);
}
#aiSections .gx-hud{ position:absolute; width:14px; height:14px; border:0 solid var(--ambar); }
#aiSections .gx-hud.tl{ top:9px; left:9px; border-top-width:2px; border-left-width:2px; }
#aiSections .gx-hud.tr{ top:9px; right:9px; border-top-width:2px; border-right-width:2px; }
#aiSections .gx-hud.bl{ bottom:9px; left:9px; border-bottom-width:2px; border-left-width:2px; }
#aiSections .gx-hud.br{ bottom:9px; right:9px; border-bottom-width:2px; border-right-width:2px; }
#aiSections .gx-cert-t{ margin-top:1rem; font-size:.86rem; line-height:1.6; color:#C3C8E2; }
#aiSections .gx-cert-t b{ color:#fff; }
#aiSections .gx-datos{
display:grid; grid-template-columns:1fr 1fr; gap:1rem;
margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.14);
}
#aiSections .gx-datos dt{
font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
text-transform:uppercase; color:#9AA0BC; margin-bottom:.35rem;
}
#aiSections .gx-datos dd{
font-family:var(--font-display); font-weight:800; font-size:1.9rem;
color:var(--ambar); line-height:1;
}
#aiSections .gx-datos dd span{ font-size:.72rem; font-weight:600; color:#9AA0BC; letter-spacing:.02em; }
#aiSections .gx-cta{ margin-top:clamp(2rem,4vh,2.8rem); }
/* ---------- Panel a la derecha del resumen (home) ----------
El resumen de Gerpro X en el home solo trae gx-head + gx-cta: sin nada
mas, el lado derecho del .wrap quedaba vacio en pantallas anchas. Mismo
vocabulo .hero-visual/.hv-query/.hv-answer/.hv-source que ya usan los 11
subsitios (ver subsitio.css, "Visual del hero" — la tarjeta-respuesta:
pregunta -> SVG que la responde -> fuente), reescrito aqui porque
ecosistema.css y subsitio.css no se cargan juntos en ninguna pagina. */
#aiSections .hero-grid{
display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,380px);
gap:clamp(30px,5vw,64px); align-items:center;
}
#aiSections .hero-copy{ min-width:0; }
#aiSections .hero-visual{
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.13);
border-radius:var(--radius-lg,16px); padding:16px;
box-shadow:0 22px 60px rgba(0,0,0,.4), inset 0 0 40px rgba(127,192,183,.04);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#aiSections .hero-visual svg{ display:block; width:100%; height:auto; border-radius:8px; }
#aiSections .hv-query{
display:flex; align-items:baseline; gap:8px;
padding:2px 4px 14px;
font-family:var(--font-mono); font-size:12.5px; line-height:1.4;
color:var(--ink);
}
#aiSections .hv-caret{ color:var(--ambar); font-weight:700; }
#aiSections .hv-answer{
border-top:1px solid rgba(255,255,255,.1);
border-bottom:1px solid rgba(255,255,255,.1);
padding:14px 0;
}
#aiSections .hv-source{
display:flex; align-items:center; gap:8px;
padding:14px 4px 2px;
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em;
color:#9AA0BC;
}
#aiSections .hv-dot{
flex:none; width:6px; height:6px; border-radius:50%;
background:var(--ambar);
box-shadow:0 0 0 3px rgba(236,142,57,.25);
}
/* ---------- La respuesta se "escribe" sola ----------
Mismo truco que .hv-bar/.hv-hito/.hv-hoy de subsitio.css (ver
[[hero-visual-subsitios]]): las lineas se dibujan con scaleX en vez de
width (no dispara layout), y las anotaciones aparecen despues, en el
orden en que se leen. Unica diferencia real con subsitio.css: alli el
hero esta arriba del pliegue y la secuencia dispara sola al cargar la
pagina; aqui la tarjeta esta mas abajo del scroll, asi que todo queda
gateado a ".hero-visual.in" (la clase que el propio IntersectionObserver
de .reveal ya le agrega la primera vez que se ve — ver ecosistema.js). */
#aiSections .hero-visual.in .hv-bar{
transform-box:fill-box; transform-origin:0% 50%;
animation:hv-bar-in 420ms var(--ease-out) both;
}
@keyframes hv-bar-in{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
#aiSections .hero-visual.in .hv-flag,
#aiSections .hero-visual.in .hv-fade-2,
#aiSections .hero-visual.in .hv-fade-3{
opacity:0; animation:hv-fade-in 280ms var(--ease-out) both;
}
@keyframes hv-fade-in{ from{ opacity:0; } to{ opacity:1; } }
/* El retardo escalonado va SIEMPRE despues de la regla base .hv-bar (fija
la propiedad "animation" completa, que resetea animation-delay a 0
aunque no lo mencione) — mismo bug ya documentado en subsitio.css si
esto se declarara antes. */
#aiSections .hero-visual.in .hv-bar-1{ animation-delay:640ms; }
#aiSections .hero-visual.in .hv-bar-2{ animation-delay:700ms; }
#aiSections .hero-visual.in .hv-bar-3{ animation-delay:760ms; }
#aiSections .hero-visual.in .hv-bar-4{ animation-delay:820ms; }
#aiSections .hero-visual.in .hv-flag{ animation-delay:1150ms; }
#aiSections .hero-visual.in .hv-fade-2{ animation-delay:1400ms; }
#aiSections .hero-visual.in .hv-fade-3{ animation-delay:1600ms; }
/* ---------- Responsive ---------- */
@media (max-width:1000px){
#aiSections .gx-split{ grid-template-columns:1fr; }
}
@media (max-width:920px){
#aiSections .hero-grid{ grid-template-columns:1fr; }
#aiSections .hero-visual{ max-width:460px; margin-inline:auto; }
}
@media (max-width:860px){
#aiSections .gx-ciclo{ grid-template-columns:1fr; gap:.8rem; }
#aiSections .gx-arrow{ justify-self:center; transform:rotate(90deg); }
#aiSections .gx-list li{ grid-template-columns:1fr; gap:.45rem; }
#aiSections .gx-carga{ white-space:normal; }
}
@media (prefers-reduced-motion: reduce){
#aiSections .gx-beat:hover{ transform:none; }
#aiSections .hero-visual.in .hv-bar,
#aiSections .hero-visual.in .hv-flag,
#aiSections .hero-visual.in .hv-fade-2,
#aiSections .hero-visual.in .hv-fade-3{
animation:none; opacity:1; transform:none;
}
}