/* Intro del logo — solo en la home, solo desktop (>=1000px). Cómo funciona: 1. La capa (.tai-intro) la imprime PHP apenas abre el , no la crea JS. Así existe desde el primer repintado: no hay destello del sitio antes de que aparezca, y el navegador empieza a bajar el logo enseguida. 2. Cuelga del , fuera de .ocm-effect-wrap (que tiene z-index:10 y encierra al header). Por eso le alcanza con cualquier z-index alto para taparlo todo, header incluido — necesario ahora que el fondo es azul: si el nav quedara por encima, se vería su barra clara cruzando la pantalla. 3. Todo se activa con el atributo data-tai-intro que el JS pone en el apenas empieza a cargar la página. Si el JS no corre, ese atributo nunca aparece, la capa nunca se muestra y el sitio se ve normal — nunca queda una pantalla azul colgada. Es un atributo y no una clase a propósito: WPBakery y Lenis reescriben el className del por completo, y se llevaban puesta la marca. Al scrollear, el atributo pasa a "done" y la capa entera se desvanece: fondo y logo juntos. El logo ya no viaja hasta la barra; el del nav es otro elemento, azul, que estaba ahí desde el principio debajo de esta capa. */ /* Sin el atributo del JS, la capa no existe visualmente. Esto también la deja fuera de mobile, donde la intro no corre. */ .tai-intro { display: none; } @media only screen and (min-width: 1000px) { /* --- la capa --- */ html[data-tai-intro] body.home .tai-intro { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 9500; /* El azul es el respaldo: si la imagen "fondo-logo" no está subida, la intro igual se ve bien y del color correcto. */ background-color: #1d58fe; background-size: cover; background-position: center; background-repeat: no-repeat; transform: translate3d(0, 0, 0); will-change: transform; } /* La subida es un movimiento solo, disparado por el primer gesto de scroll. Por eso la curva vive acá y no en el JS: el JS solo fija el destino y el navegador se encarga del recorrido, que además queda en el compositor. La transición se enciende recién con el atributo, no de entrada: si estuviera siempre puesta, cualquier reajuste de posición se animaría. */ html[data-tai-subiendo] body.home .tai-intro { transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1); } @media (prefers-reduced-motion: reduce) { html[data-tai-subiendo] body.home .tai-intro { transition-duration: 0.01ms; } } /* Fondo, logo y pista se van juntos: es una sola capa, no puede desincronizarse. Al terminar queda fuera de pantalla; visibility la saca además del orden de tabulación y de recibir clics. */ html[data-tai-intro="done"] body.home .tai-intro { visibility: hidden; pointer-events: none; } /* Mientras la cortina está arriba la página no se mueve. El JS también pone overflow:hidden, pero esto lo deja escrito en el CSS: si algo fallara a mitad de camino, el estado sigue siendo coherente con lo que se ve. */ html[data-tai-intro="armed"] body.home { overflow: hidden; } /* --- logo --- */ html[data-tai-intro] body.home .tai-intro__logo { /* El video trae el fondo adentro, asi que ocupa la pantalla entera en vez de ser un logo centrado. `cover` a proposito y no `contain`: en una pantalla mas ancha o mas angosta que 16:9 recorta un poco del degradado del fondo, que no se nota, en lugar de dejar bandas o deformar el logo. */ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Arranca oculto y aparece con un fundido corto. El JS lo destapa recién cuando reemplazó la imagen por una copia nueva, que es lo que garantiza que la animación del SVG se vea desde el cuadro cero en cada carga. Sin esto se llegaba a ver un instante del logo ya dibujado. */ opacity: 0; transition: opacity 0.35s ease; } html[data-tai-intro-listo] body.home .tai-intro__logo { opacity: 1; } /* --- pista de scroll --- */ /* Decorativa y NO clickeable: es un

con aria-hidden, sin manejador de click y sin foco. Solo dice qué hacer. */ html[data-tai-intro] body.home .tai-intro__pista { position: absolute; left: 50%; bottom: 5vh; transform: translate(-50%, 10px); display: grid; justify-items: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity 0.6s ease, transform 0.6s ease; } html[data-tai-intro-pista] body.home .tai-intro__pista { opacity: 1; transform: translate(-50%, 0); } .tai-intro__pista span { font-size: 11px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } /* El riel es blanco tenue y el tramo que baja va del verde del propio fondo (#b5ff00, muestreado de la imagen). */ .tai-intro__pista i { position: relative; display: block; width: 1px; height: 46px; overflow: hidden; background: rgba(255, 255, 255, 0.3); } .tai-intro__pista i::after { content: ""; position: absolute; left: 0; width: 1px; height: 16px; background: #b5ff00; animation: tai-pista-baja 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes tai-pista-baja { 0% { transform: translateY(-16px); } 55%, 100% { transform: translateY(46px); } } /* Sin movimiento: la pista sigue estando, pero quieta. */ @media (prefers-reduced-motion: reduce) { .tai-intro__pista i::after { animation: none; height: 46px; opacity: 0.6; } } }