/* Bolboreta Labs — secciones compartidas por apps, ingeniería e IA: estilos propios */

/* Hero: columna flex. El título llena el ancho (Poppins 800) y el banner de texto queda
   siempre al borde inferior de la primera pantalla; el tamaño exacto lo fija el script del final. */
.ing-hero { display: flex; flex-direction: column; }
.ing-hero-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ing-hero-word-box { flex: 1 1 auto; display: flex; align-items: center; padding-bottom: 40px; }
.ing-hero-bottom { flex: 0 0 auto; }
.ing-hero-word {
    font-family: var(--tp-ff-poppins);
    font-weight: 800;
    font-size: 12vw; /* valor de respaldo sin JS */
    line-height: .8;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--tp-common-black);
    white-space: nowrap;
    margin: 0;
}
.ing-hero-text p { font-weight: 500; }
@media (max-width: 991px) {
    .ing-hero .container-fluid { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 575px) {
    .ing-hero .container-fluid { padding-left: 20px; padding-right: 20px; }
}


/* Entrada del hero: arranca en negro con textos en blanco y, al terminar las animaciones
   de texto, funde al estado normal (body.ing-hero-light lo añade el script del final) */
:root { --ing-hero-fade: 2s; } /* duración del fundido: cambiar solo aquí */
.ing-hero { background-color: var(--tp-common-black); transition: background-color var(--ing-hero-fade) ease; }
.ing-hero .ing-hero-word,
.ing-hero .ing-hero-h1,
.ing-hero .ing-hero-text p { color: var(--tp-common-white); transition: color var(--ing-hero-fade) ease; }
.ing-hero .pp-award-divider { border-color: rgba(255, 255, 255, .15); transition: border-color var(--ing-hero-fade) ease; }
#header-sticky .tp-header-logo img { transition: filter var(--ing-hero-fade) ease; }
body:not(.ing-hero-light) #header-sticky:not(.header-sticky) .tp-header-logo img { filter: invert(1); }

body.ing-hero-light .ing-hero { background-color: var(--tp-common-white); }
body.ing-hero-light .ing-hero .ing-hero-word { color: var(--tp-common-black); }
body.ing-hero-light .ing-hero .ing-hero-h1,
body.ing-hero-light .ing-hero .ing-hero-text p { color: var(--tp-common-black-2); }
body.ing-hero-light .ing-hero .pp-award-divider { border-color: rgba(18, 15, 16, .08); }


/* Banner de textos bajo el hero: acompaña al fundido (blanco sobre fondo negro → negro sobre fondo blanco) */
.tp-text-slide-area .tp-text-slide-title { color: var(--tp-common-white); transition: color var(--ing-hero-fade) ease; }
.tp-text-slide-area .tp-text-slide-title::after { background-color: var(--tp-common-white); transition: background-color var(--ing-hero-fade) ease; }
body.ing-hero-light .tp-text-slide-area .tp-text-slide-title { color: var(--tp-common-black); }
body.ing-hero-light .tp-text-slide-area .tp-text-slide-title::after { background-color: var(--tp-common-black); }

/* Barrido violeta en la línea del hero (estilo Coche Fantástico): recorre la línea de izquierda a derecha,
   vuelve de derecha a izquierda y hace una pausa antes de repetirse. Ajustes: */
:root {
    --ia-scan-color: #9f3cff;   /* color del destello */
    --ia-scan-width: 18%;       /* largo del destello respecto a la línea */
    --ia-scan-cycle: 6s;        /* duración total del ciclo: ida (30%) + vuelta (30%) + pausa (40%) */
    --ia-scan-out: 122%;        /* posición en la que el destello queda fuera del todo = 100% / (1 - ancho); con 18% → 122% */
}
.ing-hero .pp-award-divider { position: relative; }
.ing-hero .pp-award-divider::after {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; bottom: -1px; /* cubre el grosor del borde */
    background-image: linear-gradient(90deg, transparent, var(--ia-scan-color) 50%, transparent);
    background-size: var(--ia-scan-width) 100%;
    background-repeat: no-repeat;
    background-position-x: calc(100% - var(--ia-scan-out));
    animation: ia-scan var(--ia-scan-cycle) linear infinite; /* lineal: sin frenada en los extremos */
    pointer-events: none;
}
@keyframes ia-scan {
    0%        { background-position-x: calc(100% - var(--ia-scan-out)); }  /* justo fuera, por la izquierda */
    30%       { background-position-x: var(--ia-scan-out); }                /* justo fuera por la derecha y vuelve al instante */
    60%, 100% { background-position-x: calc(100% - var(--ia-scan-out)); }  /* justo fuera por la izquierda y pausa */
}
@media (prefers-reduced-motion: reduce) { .ing-hero .pp-award-divider::after { animation: none; background-image: none; } }

/* Ola de color en el título del hero: con el fondo en blanco, un violeta recorre las letras
   de izquierda a derecha (cada letra pasa a violeta y vuelve a negro). Ajustes: */
:root {
    --ing-wave-color: #9f3cff;  /* color de la ola */
    --ing-wave-cycle: 5s;       /* cada cuánto se repite la ola */
    --ing-wave-step: .12s;      /* retardo entre una letra y la siguiente */
}
@keyframes ing-wave {
    0%, 20%, 100% { color: var(--tp-common-black); }
    10% { color: var(--ing-wave-color); }
}
body.ing-hero-light .ing-hero-word .ing-wave-char {
    animation: ing-wave var(--ing-wave-cycle) ease-in-out infinite;
    /* espera a que termine el fundido a blanco y escalona letra a letra */
    animation-delay: calc(var(--ing-hero-fade) + var(--ing-i, 0) * var(--ing-wave-step));
}
@media (prefers-reduced-motion: reduce) {
    body.ing-hero-light .ing-hero-word .ing-wave-char { animation: none; }
}


/* Índice "Qué desarrollamos": sin clamp de altura y títulos más contenidos que en la demo */
.ing-what .cr-service-item { max-height: none; }
.ing-what .cr-service-title-sm { font-size: 110px; }
.ing-what .cr-service-content-right p { margin-bottom: 0; }
@media (min-width: 1400px) and (max-width: 1599px) { .ing-what .cr-service-title-sm { font-size: 96px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .ing-what .cr-service-title-sm { font-size: 84px; } }
@media (min-width: 992px) and (max-width: 1199px) { .ing-what .cr-service-title-sm { font-size: 72px; } }
@media (min-width: 768px) and (max-width: 991px) { .ing-what .cr-service-title-sm { font-size: 64px; } }
@media (max-width: 767px) {
    .ing-what .cr-service-title-sm { font-size: 52px; }
    .ing-what .cr-service-title-sm br { display: none; }
    .ing-what .cr-service-content-right { margin-top: 15px; }
}


/* Variante oscura del índice: añadir .ing-what-dark junto a .ing-what en la section.
   En reposo: fondo negro, título y número en blanco, texto secundario en gris (#909090).
   En hover: el fondo gris claro de siempre, título y número en negro; el texto secundario sigue en #909090. */
.ing-what-dark { background-color: #000000; }
.ing-what-dark .tp-section-title,
.ing-what-dark .tp-section-subtitle { color: var(--tp-common-white); }
.ing-what-dark .cr-service-item { border-top-color: rgba(255, 255, 255, .12); }
.ing-what-dark .cr-service-wrap .row [class*=col-] .cr-service-item:last-child { border-bottom-color: rgba(255, 255, 255, .12); }
.ing-what-dark .cr-service-item:not(:hover) .cr-service-content-left span,
.ing-what-dark .cr-service-item:not(:hover) .cr-service-title-sm { color: var(--tp-common-white); }
.ing-what-dark .cr-service-item .cr-service-content-right p,
.ing-what-dark .cr-service-item:hover .cr-service-content-right p { color: #909090; }


/* Frase de impacto sobre negro: gradiente del revelado en blanco/gris */
.ing-statement .tp_text_invert_2 > div { background-image: linear-gradient(to right, #ffffff 50%, #3a3a3a 50%); }


/* Cuatro conceptos: filete y punto en negro (el componente original es para fondo oscuro) */
.ing-concepts .tp-process-inner-item { padding-top: 45px; }
.ing-concepts .tp-process-inner-item::before { background-color: rgba(18, 18, 18, .1); }
.ing-concepts .tp-process-inner-dot { background-color: #121212; }
.ing-concepts .tp-process-inner-content p { font-size: 16px; color: rgba(17, 16, 19, .7); margin-bottom: 0; }


/* Lista de definición (Arquitectura / Negocio) */
.ing-def .tp-pd-list ul li { align-items: flex-start; }
.ing-def .ing-def-term { flex: 0 0 250px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--tp-common-black-2); margin: 0; padding-right: 20px; }
.ing-def .tp-pd-list ul li p { font-size: 18px; font-weight: 500; color: var(--tp-common-black-2); margin: 0; }
@media (max-width: 575px) {
    .ing-def .ing-def-term { flex: 0 0 130px; }
}


/* Acordeón timeline: separación de los tags */
.ing-acc .md-faq-accordion .accordion-body .studio-service-category { margin-top: 22px; }


/* Sección que cambia con el scroll (.ia-flip): por defecto queda como está en el HTML (fondo negro,
   textos blancos) e integrada con la sección anterior; al avanzar el scroll pasa a fondo blanco y
   textos negros para integrarse con la siguiente. Los textos grises no cambian. Al subir, vuelve. */
:root { --ia-flip-fade: var(--ing-hero-fade); } /* duración del cambio: la misma que el fundido del hero */
.ia-flip { transition: background-color var(--ia-flip-fade) ease; }
.ia-flip .tp-section-subtitle,
.ia-flip .tp-section-title { transition: color var(--ia-flip-fade) ease; }
.ia-flip.is-light { background-color: var(--tp-common-white) !important; }
.ia-flip.is-light .tp-section-subtitle,
.ia-flip.is-light .tp-section-title { color: var(--tp-common-black) !important; }