/* Bolboreta Labs — Ingeniería de software a medida: estilos propios */

/* (continuación, solo en esta página) Sección que cambia con el scroll (.ia-flip): por defecto queda como está en el HTML (fondo negro, */
.ia-flip .pp-skill-list p { transition: color var(--ia-flip-fade) ease; }            /* en esta página los textos de los tres puntos son blancos */
.ia-flip.is-light .pp-skill-list p { color: var(--tp-common-black) !important; }

/* Sección con vídeo dentro de las letras (.ia-vmask-section): al llegar se ve el vídeo a pantalla completa,
   la sección se queda fija y el título viene desde cerca con el vídeo como relleno sobre fondo negro;
   al final el título va a su sitio y la lámina funde a la sección normal. Lo dirige el script del final. */
.ia-vmask-section { position: relative; }
.ia-vmask {
    position: absolute; top: 0; left: 0; width: 100%; height: 100vh; /* el script ajusta la altura exacta */
    z-index: 5; overflow: hidden; pointer-events: none;
    /* fondo de respaldo si el vídeo no carga */
    background: linear-gradient(120deg, #12001f, #9f3cff, #1b0b3a, #5b1fd1, #12001f);
    background-size: 400% 400%;
    animation: ia-vmask-bg 14s ease-in-out infinite;
}
@keyframes ia-vmask-bg { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ia-vmask-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .ia-vmask { display: none; } }

/* Scroll horizontal fijado (los cuatro puntos: Entender, Diseñar, Construir, Garantizar) */
.ing-hz { position: relative; overflow: hidden; background-color: var(--tp-common-white); padding: 40px 0 60px; border-top: 1px solid rgba(18,18,18,.08); border-bottom: 1px solid rgba(18,18,18,.08); } /* no ocupa toda la pantalla: se fija centrado y se ve parte de lo anterior/posterior */
.ing-hz-track { display: flex; align-items: flex-start; gap: 3.5vw; padding: 0 8vw; will-change: transform; }
.ing-hz-panel { flex: 0 0 min(40vw, 560px); position: relative; padding: 150px 0 30px 2.4vw; border-left: 1px solid rgba(18,18,18,.12); } /* más estrechos: se ven dos y parte del tercero */
.ing-hz-num { position: absolute; left: -.08em; top: -.1em; font-family: var(--tp-ff-thunder-semibold); font-weight: 600; font-size: clamp(150px, 17vw, 240px); line-height: 1; color: rgba(18,18,18,.06); pointer-events: none; will-change: transform; }
.ing-hz-panel .cr-service-title-sm { position: relative; font-size: 84px; }
.ing-hz-panel p { position: relative; font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--tp-common-black-6); max-width: 26em; margin: 22px 0 0; }
@media (max-width: 1599px) { .ing-hz-panel .cr-service-title-sm { font-size: 76px; } }
@media (max-width: 1199px) { .ing-hz-panel .cr-service-title-sm { font-size: 64px; } .ing-hz-panel { flex-basis: 46vw; } }
@media (max-width: 991px) { /* en móvil también en horizontal: paneles de ~80 % del ancho */
    .ing-hz { padding: 24px 0 40px; } .ing-hz-track { gap: 6vw; padding: 0 6vw; }
    .ing-hz-panel { flex: 0 0 min(80vw, 420px); padding: 105px 0 16px 16px; } .ing-hz-panel .cr-service-title-sm { font-size: 48px; }
    .ing-hz-panel p { font-size: 16px; margin-top: 16px; } .ing-hz-num { font-size: 140px; top: -.1em; }
}
@media (prefers-reduced-motion: reduce) { .ing-hz-track { display: block; } }
.ing-hz-panel .cr-service-title-sm { color: #9f3dff; }            /* títulos de los puntos en violeta, como el resto de la página */
.ing-hz-section { background-color: var(--tp-common-black); } /* el bloque horizontal es negro desde el principio */

/* Al empezar el desplazamiento horizontal el bloque pasa a negro (textos en blanco); al volver arriba, a blanco. Misma duración que los otros cambios. */
.ing-hz, .ing-hz-panel, .ing-hz-panel p, .ing-hz-num { transition: background-color var(--ia-flip-fade) ease, color var(--ia-flip-fade) ease, border-color var(--ia-flip-fade) ease; }
.ing-hz.is-dark { background-color: var(--tp-common-black); border-color: rgba(255,255,255,.12); }
.ing-hz.is-dark .ing-hz-panel { border-color: rgba(255,255,255,.18); }
.ing-hz.is-dark .ing-hz-panel p { color: var(--tp-common-white); }
.ing-hz.is-dark .ing-hz-num { color: rgba(255,255,255,.08); }

/* …y con él, la sección anterior (la del vídeo) y el resto de esta, para que todo se vea unido en negro mientras dura el desplazamiento */
.ia-vmask-section, .ing-hz-section { transition: background-color var(--ia-flip-fade) ease; }
.ia-vmask-section .tp-section-title, .ia-vmask-section .tp-section-subtitle { transition: color var(--ia-flip-fade) ease; }
body.ing-hz-dark .ia-vmask-section, body.ing-hz-dark .ing-hz-section { background-color: var(--tp-common-black); }
body.ing-hz-dark .ia-vmask-section .tp-section-title, body.ing-hz-dark .ia-vmask-section .tp-section-subtitle { color: var(--tp-common-white); }

/* Transición «destapar» (estilo Apple): la sección saliente se desplaza por encima de la entrante, que ya está quieta debajo.
   El script del final desplaza la entrante -100vh→0 mientras la saliente recorre su último tramo. */
.ing-cover { position: relative; }
.ing-cover-a { z-index: 3; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* al menos una pantalla: B (que empieza 100vh antes) no debe asomar por encima de A */
.ing-statement { position: relative; z-index: 4; }   /* la sección anterior siempre por encima de las que se solapan */

/* B y C empiezan 100vh antes (margen negativo), detrás de la sección anterior; al llegar arriba se fijan (pin) durante 100vh,
   que es lo que tarda la anterior en salir por encima. Después siguen su scroll normal. */
.ing-cover-b { z-index: 2; background-color: var(--tp-common-white); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; margin-top: -100vh; }
.ing-cover-c { z-index: 1; margin-top: -100vh; }
.ia-vmask-section { background-color: var(--tp-common-black); }
.ia-vmask-section .tp-section-title, .ia-vmask-section .tp-section-subtitle { color: var(--tp-common-white); }
.ia-vmask-content { position: relative; z-index: 6; }                      /* el contenido queda por encima de la lámina */
.ia-vmask-shade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; }
.ia-vmask-section .tp-section-title { will-change: transform, opacity; }
.ia-vmask-rest { opacity: 0; transform: translateY(22px); transition: opacity .45s ease, transform .45s ease; } /* el resto del contenido: fundido rápido por tiempo al llegar al punto */
.ia-vmask-section.is-rest-in .ia-vmask-rest { opacity: 1; transform: none; }
.ing-cover-a, .ing-cover-b { box-shadow: 0 24px 60px rgba(0, 0, 0, .22); } /* sombra bajo la saliente: se lee el apilado */

/* Título del hero (INGENIERÍA): tamaño inicial equivalente al ajuste por JS */
.ing-hero .ing-hero-word { font-size: calc((100vw - 60px) * 0.1812); }
@media (max-width: 575px) { .ing-hero .ing-hero-word { font-size: calc((100vw - 40px) * 0.1812); } }
@media (min-width: 992px) { .ing-hero .ing-hero-word { font-size: calc((100vw - 200px) * 0.1812); } }

/* Título del hero en inglés (ENGINEERING es más ancho que INGENIERÍA: 0.1812 × 527.4/623.6) */
html[lang="en"] .ing-hero .ing-hero-word { font-size: calc((100vw - 60px) * 0.1532); }
@media (max-width: 575px) { html[lang="en"] .ing-hero .ing-hero-word { font-size: calc((100vw - 40px) * 0.1532); } }
@media (min-width: 992px) { html[lang="en"] .ing-hero .ing-hero-word { font-size: calc((100vw - 200px) * 0.1532); } }