/* Prevenir modo oscuro forzado - mantener colores originales */
html {
    color-scheme: light;
}

/* Prevenir modo oscuro específicamente en el preloader */
#loader, #loader * {
    color-scheme: light !important;
}

/* Regla adicional para navegadores que fuerzan modo oscuro */
@media (prefers-color-scheme: dark) {
    #loader, #loader * {
        color-scheme: light !important;
        -webkit-color-scheme: light !important;
    }
}

/* Estilos de selección de texto */
::selection {
    background-color: #105644; /* Fondo verde Hydnum */
    color: #F5F5FC; /* Texto blanco Hydnum */
}

::-moz-selection {
    background-color: #105644; /* Fondo verde Hydnum - Firefox */
    color: #F5F5FC; /* Texto blanco Hydnum - Firefox */
}

/* Estilos para animaciones GSAP */
.split-title, .split-subtitle {
    overflow: hidden;
}

/* Estados iniciales para animaciones desde abajo */
.split-subtitle, .fade-in {
    opacity: 0;
    transform: translateY(30px);
}

/* Estados iniciales para página de entrevistas */
.entrevistas-logo, .entrevistas-text, #inicio-btn, .scroll-indicator {
    opacity: 0;
    transform: translateY(30px);
}

/* Estado inicial para título de entrevistas */
.entrevistas-title {
    opacity: 0;
    visibility: hidden;
}

/* Estados iniciales para panel de entrevista - columna 4 */
.entrevista-panel-header,
.entrevista-panel-logo {
    opacity: 0;
}

/* Ajustar padding lateral de los textos del header */
.entrevista-panel-header {
    padding-left: 17px !important;
    padding-right: 17px !important;
}

/* Estado inicial del panel principal - clip-path achicado hacia la izquierda */
.entrevista-panel-main {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

/* Estado inicial para imagen con botón play - grande ocupando todo el alto */
.entrevista-panel-image {
    opacity: 0;
    transform: scale(3) translateY(-20%);
}

/* Estado inicial para textos del contenido - ocultos */
.entrevista-panel-text {
    opacity: 0;
    transform: translateY(30px);
}

/* Estados iniciales para elementos móviles - ocultos por defecto */
.scroll-indicators-mobile,
.entrevistas-images-mobile,
.mobile-back-button {
    display: none;
}

.split-mask-words-mask {
    padding-block: 0.2em;
    margin-block: -0.2em;
}

/* CSS Custom Properties para carrusel - tamaño único */
:root {
    --carousel-item-width: 390px;
    --carousel-item-height: 390px;
    --carousel-margin: 1rem;
    --carousel-total-width: calc(36 * (var(--carousel-item-width) + var(--carousel-margin)));
    --carousel-move-distance: calc(-18 * (var(--carousel-item-width) + var(--carousel-margin)));
}

/* Tamaños para pantallas menores a 768px */
@media (max-width: 767px) {
    :root {
        --carousel-item-width: 289px;
        --carousel-item-height: 393px;
        --carousel-total-width: calc(36 * (var(--carousel-item-width) + var(--carousel-margin)));
        --carousel-move-distance: calc(-18 * (var(--carousel-item-width) + var(--carousel-margin)));
    }
}

/* Carrusel infinito */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(var(--carousel-move-distance));
    }
}

.scroll-animation {
    animation: scroll 90s linear infinite; /* Más lento en móvil */
}

@media (min-width: 768px) {
    .scroll-animation {
        animation: scroll 60s linear infinite; /* Velocidad normal en desktop */
    }
}

.carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.carousel-track {
    display: flex;
    width: var(--carousel-total-width);
    will-change: transform;
}

.carousel-item {
    flex-shrink: 0;
    margin-right: var(--carousel-margin);
    width: var(--carousel-item-width);
    height: var(--carousel-item-height);
}

.carousel-item video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

/* Responsive button padding */
@media (min-width: 768px) {
    .btn-responsive {
        padding: 19px 45px !important;
    }
}

/* Texto del preloader más pequeño en móvil */
@media (max-width: 768px) {
    #loader h2 {
        font-size: 1.5rem !important; /* Más pequeño que el default */
    }
    
    #loader p {
        font-size: 0.9rem !important; /* Más pequeño que el default */
    }
}

/* Espaciado extra en HOME para separar elementos */
/* Margen arriba del título principal en home */
.split-title:not(.entrevistas-title) {
    margin-top: 2rem;
}

/* Margen abajo del botón en home */
#testimonios-btn {
    margin-bottom: 2rem;
}

/* En desktop, aumentar aún más el espaciado */
@media (min-width: 768px) {
    .split-title:not(.entrevistas-title) {
        margin-top: 3rem;
    }
    
    #testimonios-btn {
        margin-bottom: 3rem;
    }
}

/* Estilos específicos para página de entrevistas */
.entrevistas-logo {
    width: 150px; /* Móvil */
}

.entrevistas-title {
    font-size: 48px;
    line-height: 1;
    font-weight: 700; /* bold */
}

.entrevistas-text {
    font-size: 16px;
    line-height: 24px;
}

/* Estilos para las imágenes scrolleables */
.entrevistas-images-column {
    width: 132px; /* 132px ancho del wrapper */
    height: 100vh; /* Altura completa sin padding */
    position: relative;
}

.entrevistas-images-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 2rem 0; /* Padding superior e inferior, sin derecha */
    
    /* Ocultar scrollbar pero mantener funcionalidad */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    
    /* Cursor para drag scroll */
    cursor: grab;
    user-select: none;

    overflow-x: visible;
}

.entrevistas-images-scroll:active {
    cursor: grabbing;
}

/* Ocultar scrollbar en WebKit browsers (Chrome, Safari, Edge) */
.entrevistas-images-scroll::-webkit-scrollbar {
    display: none;
}

/* Wrapper para las animaciones de entrada */
.entrevistas-image-wrapper {
    margin-bottom: 32px; /* Separación constante para scroll infinito */
    width: 132px; /* Ancho máximo para el wrapper */
    display: flex;
    justify-content: flex-end; /* Alinear imagen a la derecha del wrapper */
}

.entrevistas-image-item {
    width: 103px;
    height: 79px;
    transition: all 0.4s ease;
}

.entrevistas-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}

.entrevistas-image-item.center-active {
    width: 132px;
    height: 103px;
}

/* Estilos para indicadores de scroll */
.scroll-indicators-column {
    width: 105px; /* 45px + 28px + 32px */
    height: 100vh;
    position: relative;
}

.scroll-indicators-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 48px;
    padding-right: 32px;
    gap: 11.5px;
}

.scroll-indicator {
    width: 10px;
    height: 1.5px;
    background-color: #105644;
    transition: width 0.3s ease;
    flex-shrink: 0;
}

.scroll-indicator.active {
    width: 28px;
}

/* Desktop sizes */
@media (min-width: 1024px) {
    .entrevistas-logo {
        width: 200px;
    }
    
    .entrevistas-title {
        font-size: 77px;
        line-height: 1;
    }
    
    .entrevistas-text {
        font-size: 18px;
        line-height: 27px;
    }
}

/* Responsive adjustments para entrevistas */
@media (max-width: 1700px) {
    .entrevistas-title {
        font-size: 66px !important;
    }
}

@media (max-width: 1500px) {
    .entrevistas-title {
        font-size: 59px !important;
    }
    
    .entrevista-panel-text h3 {
        font-size: 35px !important;
    }
}

@media (max-width: 1400px) {
    .entrevistas-title {
        font-size: 50px !important;
    }
    
    .entrevistas-text {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }
    
    /* Reducir padding de scroll indicators */
    .scroll-indicators-container {
        padding-left: 38px; /* era 48px */
        padding-right: 22px; /* era 32px */
    }
    
    /* Achicar columnas de la grid */
    main.flex-1 {
        grid-template-columns: 1fr 110px 85px 55fr !important;
    }
    
    /* Ajustar ancho de columna de imágenes */
    .entrevistas-images-column {
        width: 110px; /* era 132px */
    }
    
    /* Ajustar ancho de wrapper de imágenes */
    .entrevistas-image-wrapper {
        width: 110px; /* era 132px */
    }
    
    /* Ajustar ancho de columna de indicadores */
    .scroll-indicators-column {
        width: 85px; /* era 105px */
    }
}

/* Layout mobile para entrevistas - 1200px o menos */
@media (max-width: 1200px) {
    /* Quitar margin-bottom al título principal en home */
    .split-title:not(.entrevistas-title) {
        margin-bottom: 0 !important;
    }
    
    /* Cambiar de grid a layout vertical */
    main.flex-1 {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Ocultar columnas desktop */
    .entrevistas-images-column,
    .scroll-indicators-column {
        display: none !important;
    }
    
    /* Columna izquierda - contenido principal */
    main.flex-1 > div:first-child {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 2rem !important;
    }
    
    /* Logo centrado */
    main.flex-1 > div:first-child > div:first-child {
        text-align: center !important;
    }
    
    .entrevistas-logo {
        margin: 0 auto 2rem auto !important;
    }
    
    /* Título y texto alineados a la izquierda */
    .split-title, .entrevistas-text {
        text-align: left !important;
    }
    
    /* Ajustar márgenes del título y texto */
    .split-title {
        margin-bottom: 1.5rem !important; /* Agregar margen al título */
    }
    
    .entrevistas-text {
        margin-bottom: 1rem !important; /* Reducir margen del texto */
    }
    
    /* Ocultar solo el botón, no todo el div (para mantener el texto) */
    main.flex-1 > div:first-child > div:last-child #inicio-btn {
        display: none !important;
    }
    
    /* Panel derecho - ahora ocupa todo el ancho */
    .entrevista-panel-main {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 60vh !important;
        position: relative !important;
        overflow: visible !important;
        display: block !important;
        /* Mantener clip-path para animación en mobile también */
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }
    
    /* Ocultar logo h-entrevistas en mobile */
    .entrevista-panel-logo {
        display: none !important;
    }
    
    /* Ajustar contenido del panel */
    .entrevista-panel-content {
        position: static !important;
        padding: 3rem 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    /* Bajar la imagen con botón play para que no la tapen los textos absolute */
    .entrevista-panel-image {
        margin-top: 2rem !important; /* Bajar la imagen un poco */
    }
    
    /* Mostrar elementos móviles */
    .scroll-indicators-mobile,
    .entrevistas-images-mobile,
    .mobile-back-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Indicadores verticales para mobile */
    .scroll-indicators-mobile {
        justify-content: center !important;
        align-items: flex-end !important;
        padding: 1rem 1rem !important; /* Reducido de 2rem a 1rem */
        gap: 8px !important;
        background: #F5F5FC !important;
        height: 60px !important; /* Altura fija para evitar saltitos */
    }
    
    .scroll-indicator-mobile {
        width: 1px !important;
        height: 15px !important;
        background-color: #105644 !important;
        transition: height 0.3s ease !important;
        flex-shrink: 0 !important;
    }
    
    .scroll-indicator-mobile.active {
        height: 25px !important; /* Más alta hacia arriba */
    }
    
    /* Imágenes scroll horizontal para mobile */
    .entrevistas-images-mobile {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 1rem !important; /* Reducido de 2rem a 1rem */
        background: #F5F5FC !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        cursor: grab;
        user-select: none;
        width: 100%;
        height: 100px !important; /* Altura fija para evitar que se agrande */
    }
    
    .entrevistas-images-mobile:active {
        cursor: grabbing;
    }
    
    .entrevistas-images-mobile::-webkit-scrollbar {
        display: none !important;
    }
    
    .entrevistas-images-scroll-mobile {
        display: flex !important;
        gap: 1rem !important;
        height: 80px !important;
        align-items: center !important;
        width: calc((80px + 1rem) * 87) !important; /* 3 secciones × 29 imágenes cada una */
        min-width: 100% !important;
        flex-shrink: 0 !important;
    }
    
    .entrevista-image-mobile {
        flex-shrink: 0 !important;
        width: 80px !important;
        height: 60px !important;
        transition: all 0.4s ease !important;
        cursor: pointer !important;
    }
    
    .entrevista-image-mobile.active {
        width: 100px !important;
        height: 80px !important;
        transform: translateY(-10px) !important; /* Sobresalir arriba y abajo */
    }
    
    .entrevista-image-mobile img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        pointer-events: none;
        user-select: none;
    }
    
    /* Botón volver al inicio para mobile */
    .mobile-back-button {
        display: block !important;
        text-align: center !important;
        padding: 1rem 1rem 3rem 1rem !important; /* Más espacio abajo (3rem) */
        background: #F5F5FC !important;
    }
}

/* Ajustes responsive para página de entrevistas */
@media (max-width: 1023px) {
    .split-title {
        text-align: left;
    }
    
    .fade-in p {
        text-align: left;
    }
}

/* Utilidades adicionales para breakpoints específicos */
@media (min-width: 1920px) {
    .text-hero-desktop {
        font-size: 128px !important;
    }
}

/* Tamaños de logo personalizados */
.w-163 {
    width: 163px;
}

.w-200 {
    width: 200px;
}

/* Botón PLAY para entrevistas */
.play-button {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #ffffff74;
    backdrop-filter: blur(14px) brightness(1.5);
    -webkit-backdrop-filter: blur(14px) brightness(1.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D1D1D1;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-button:hover {
    backdrop-filter: blur(14px) brightness(0.8);
    -webkit-backdrop-filter: blur(14px) brightness(0.8);
    transform: scale(1.05);
}

/* Botón PLAY más grande para lightbox */
.play-button-large {
    width: 180px;
    height: 180px;
    font-size: 24px;
    letter-spacing: 1px;
}

/* Estilos del lightbox */
.entrevista-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.entrevista-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.entrevista-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: transparent;
    z-index: 10;
    transform: scale(0.5);
    transition: transform 0.3s ease;
}

.entrevista-lightbox.active .entrevista-lightbox-content {
    transform: scale(1);
}

.entrevista-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}



.entrevista-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid #ffffff74;
    border-radius: 50%;
    color: #d1d1d1;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    backdrop-filter: blur(14px) brightness(1.5);
    -webkit-backdrop-filter: blur(14px) brightness(1.5);
    transition: all 0.3s ease;
}

.entrevista-lightbox-close img {
    width: 17.5px;
    height: 17.5px;
}

@media (max-width: 768px) {
    .entrevista-lightbox-close {
        width: 34px;
        height: 34px;
    }

    .entrevista-lightbox-close img {
        width: 12px;
        height: 12px;
    }
}

.entrevista-lightbox-close:hover {
    backdrop-filter: blur(14px) brightness(0.8);
    -webkit-backdrop-filter: blur(14px) brightness(0.8);
    transform: scale(1.05);
}

.entrevista-lightbox-media {
    position: relative;
    width: 100%;
    height: 100%;
}

.entrevista-lightbox-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.entrevista-lightbox-image img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

.entrevista-lightbox-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.entrevista-lightbox-video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    display: none;
    cursor: pointer;
}

.entrevista-lightbox-video.active {
    display: block;
}

/* Estados para mostrar/ocultar imagen vs video */
.entrevista-lightbox.video-mode .entrevista-lightbox-image {
    display: none;
}

.entrevista-lightbox.video-mode .entrevista-lightbox-video {
    display: block;
}

/* Line-height para título del nombre de la persona */
.entrevista-panel-text h3 {
    line-height: 1 !important;
    height: 2em !important; /* Altura fija para evitar saltos al cambiar contenido */
    display: flex !important;
    align-items: flex-start !important; /* Alinear texto arriba */
}

/* Altura fija para el texto descriptivo también - FORZADA PARA 2 LÍNEAS */
.entrevista-panel-text p {
    height: 2.4em !important; /* Altura fija para aguantar 2 líneas sin hacer lío */
    display: flex !important;
    align-items: flex-start !important; /* Alinear texto arriba */
    line-height: 1.2 !important; /* Line-height para mejor distribución en 2 líneas */
    overflow: hidden !important; /* Por si algún texto es muy largo */
}

/* Ajustes para pantallas menores a 350px */
@media (max-width: 350px) {
    /* HOME: Título más pequeño y centrado */
    .split-title:not(.entrevistas-title) {
        font-size: 2.5rem !important;
        text-align: center !important;
    }
    
    /* ENTREVISTAS: Header textos en vertical y centrados */
    .entrevista-panel-header {
        flex-direction: column !important;
        align-items: center !important; /* Centrados */
        gap: 0.5rem !important;
        text-align: center !important;
    }
    
    .entrevista-panel-header div {
        align-self: center !important; /* Ambos textos centrados */
    }
}

/* Ajustes para pantallas menores a 500px */
@media (max-width: 500px) {
    /* Reducir padding lateral en todas las páginas */
    main.flex-1 > div:first-child,
    .entrevista-panel-content {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
    
    /* Ajustes específicos para HOME */
    .split-title:not(.entrevistas-title) {
        font-size: 3rem !important;
        margin-top: 1rem !important;
        text-align: center !important; /* Centrado siempre */
    }
    
    /* Más margen abajo del botón en home */
    .fade-in:last-child {
        margin-bottom: 2rem !important;
    }
    
    /* Ajustar padding del botón móvil en entrevistas */
    .mobile-back-button {
        padding: 1rem 17px 3rem 17px !important;
    }
    
    /* Ajustar padding de indicadores móviles */
    .scroll-indicators-mobile {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
    
    /* Ajustar padding de imágenes móviles */
    .entrevistas-images-mobile {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }
    
    /* Ajustes de fuente para entrevistas.php */
    .entrevistas-title {
        font-size: 37px !important;
    }
    
    .entrevista-panel-text h3 {
        font-size: 30px !important;
    }
    
    .entrevista-panel-text p {
        font-size: 14px !important;
        display: flex !important;
        align-items: flex-start !important;
    }
    
    /* Textos del header más pequeños */
    .entrevista-panel-header div {
        font-size: 13px !important;
    }
    
    /* Imagen con play ocupa 100% del ancho de pantalla (sin padding) */
    .entrevista-panel-image {
        margin-left: -17px !important;
        margin-right: -17px !important;
        width: calc(100% + 34px) !important; /* Compensar el margin negativo */
    }
    
    /* Achicar botones de play */
    .play-button {
        width: 80px !important;
        height: 80px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {
    .play-button-large {
        width: 100px !important;
        height: 100px !important;
        font-size: 14px !important;
    }
}

/* Ajustes para pantallas con altura menor a 1080px - solo carrusel desktop */
@media (max-height: 1079px) and (min-width: 768px) {
    :root {
        --carousel-item-width: 300px;
        --carousel-item-height: 300px;
        --carousel-total-width: calc(36 * (var(--carousel-item-width) + var(--carousel-margin)));
        --carousel-move-distance: calc(-18 * (var(--carousel-item-width) + var(--carousel-margin)));
    }

    .text-hero-desktop {
        font-size: 112px !important;
    }
}