/* ==========================================================================
   Home Page: Image Gallery Section
   ========================================================================== */

.hero-image-gallery {
    position: relative;
    /* TÉCNICA FULL-WIDTH: Rompe el contenedor padre para ocupar toda la pantalla */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    
    /* ALTO FIJO SOLICITADO */
    height: 864px; 
    overflow: hidden;
    background-color: #000; /* Color de respaldo */
}

/* Imagen base estática al fondo */
.gallery-base-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre todo el espacio sin deformarse */
    z-index: 1;
}

/* Imágenes dinámicas preparadas para la transición */
.gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;

    /* EL TRUCO MAGNÍFICO: clip-path */
    /* inset(top right bottom left) -> 50% en todo crea un punto invisible en el centro exacto */
    clip-path: inset(50% 50% 50% 50%);
    
    /* La transición del recorte durará exactamente 1 segundo */
    transition: clip-path 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Clase que aplicará el JavaScript para abrir el cuadrado */
.gallery-slide.is-visible {
    /* El cuadrado se expande a los bordes (0 recorte) revelando la imagen */
    clip-path: inset(0 0 0 0);
}

/* Opcional: Ajuste para móvil (lo definiremos bien después, por ahora un alto base) */
@media (max-width: 1023px) {
    .hero-image-gallery {
        height: 60vh; /* Alto temporal para móvil */
    }
}

/* ==========================================================================
   Gallery Overlay & Animated Logo
   ========================================================================== */

/* Contenedor invisible que alinea el logo */
.gallery-overlay-container {
    position: absolute;
    top: 0;
    
    /* LA MAGIA PARA CENTRAR SIN ROMPER EL FILTRO */
    left: 0;
    right: 0;
    margin: 0 auto; 
    
    width: 100%;
    max-width: 1600px; /* Ancho máximo Figma */
    height: 100%;
    
    /* Sin z-index, sin padding, sin transform */
    pointer-events: none; 
}

/* El bloque del logo posicionado a la derecha de su contenedor */
.gallery-animated-logo {
    position: absolute;
    top: 50px; 
    
    /* AHORA SÍ RESPETA LOS 64PX DESDE EL BORDE DEL CONTENEDOR DE 1600px */
    right: 64px; 
    
    width: 240px;
    height: 238px;
    
    /* LA SOLUCIÓN AL FILTRO */
    z-index: 10; /* Z-index directo en el elemento que necesita verse arriba */
    mix-blend-mode: difference; /* Filtro negativo real */
    
    pointer-events: auto; 
}

/* Capa 1: Texto Rotatorio */
.gallery-rotating-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rotateGalleryLogo 20s linear infinite;
}

/* Capa 2: D Estática */
.gallery-central-d {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 74px;
}

/* Animación Rotatoria */
@keyframes rotateGalleryLogo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   MOBILE VIEW (< 1024px)
   Ajustes de Galería y Logo Superpuesto
   ========================================================================== */
@media (max-width: 1023px) {
    
    .hero-image-gallery {
        height: 60vh; /* Alto ajustado para móvil */
        overflow: visible; /* IMPORTANTE: Permite que el logo sobresalga por arriba */
    }

    /* --- Reseteo del Contenedor de Logo --- */
    .gallery-overlay-container {
        /* Eliminamos el centrado de escritorio */
        left: auto;
        right: 0;
        margin: 0;
        max-width: none;
        width: 100%;
        padding: 0;
    
    }

    /* --- El Logo: Reducción de tamaño y Superposición --- */
    .gallery-animated-logo {
        /* APLICAMOS SUPERPOSICIÓN: Valor top negativo.
           Ajustado para que cruce el borde superior según Figma. */
        top: -60px; 
        right: 20px; /* Padding móvil estándar a la derecha */
        
        /* REDUCCIÓN DE TAMAÑO SOLICITADA (Ej: Mitad del tamaño desktop) */
        width: 120px; 
        height: 119px; /* Proporcional a 240x238 */
        
        /* Mantenemos el efecto de filtro negativo */
        mix-blend-mode: difference;
    }

    /* Redimensionado de las imágenes internas proporcionalmente */
    .gallery-rotating-text {
        width: 120px;
        height: 119px;
    }

    .gallery-central-d {
        /* Proporcional a 84x74 */
        width: 42px; 
        height: 37px;
    }
}