/* ================================ */
/* CONFIGURACIÓN GENERAL */
/* ================================ */

/* Estilo de imágenes dentro de columnas */
.masonry-item img,
.masonry-item2 img {
    width: 100%;
    min-height: 300px; /* Altura mínima */
    aspect-ratio: 16 / 9; /* Mantiene la proporción máxima */
    object-fit: cover;
    object-position: center;
    filter: saturate(0);
    mix-blend-mode: multiply;
    transition: all 0.3s ease;
}

.masonry-item-special img {
    width: 100%;
    min-height: 300px; /* Altura mínima */
    aspect-ratio: 16 / 9; /* Mantiene la proporción máxima */
    object-fit: cover;
    object-position: top;
    filter: saturate(0);
    mix-blend-mode: multiply;
    transition: all 0.3s ease;
}

.masonry-item img:hover,
.masonry-item2 img:hover,
.masonry-item-special img:hover {
    filter: saturate(1);
    mix-blend-mode: normal;
}

@media (max-width: 1024px) {
    .masonry-item img,
    .masonry-item2 img,
    .masonry-item-special img {
      filter: saturate(1);
      mix-blend-mode: normal;
    }
  
    .masonry-item img:hover,
    .masonry-item2 img:hover,
    .masonry-item-special img:hover {
      /* Esto asegura que no haya cambios extra al hacer hover en pantallas táctiles */
      filter: saturate(1);
      mix-blend-mode: normal;
    }
  }

/* Imágenes de portada */
.masonry-item-cover img {
    width: 100vw;
    min-height: 50vh;
    display: block;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

/* Imagenes de ecosistema_inv */
#ecosystem {
    width: 90vw;
}

.translate_billboard {
    transform: translateY(-20%);
}

/* ================================ */
/* LIGHTBOX */
/* ================================ */

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 22, 29, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 4px;
}





/* Navegación dentro del Lightbox */
.nav-btn {
    position: absolute; /* esencial para posicionamiento correcto */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1100;
}

.nav-btn img {
    width: 40px;  /* ajusta al tamaño deseado */
    height: 40px;
    object-fit: contain;
    pointer-events: none;
}

.nav-btn.prev {
    left: 10px;  /* posición izquierda */
}

.nav-btn.next {
    right: 10px; /* posición derecha corregida */
}
.lightbox-header {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #eaeaea;
    background: rgba(0, 0, 0, 0.01);
    z-index: 1200;
    width: 80%;
}

.lightbox-title {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    font-size: 1.5rem;
}

.lightbox-description {
    font-size: 1rem;
    line-height: 1rem;
}

/* ================================ */
/* GALERÍA */
/* ================================ */

/* Contenedores de galería */
.gallery_container_cover {
    height: 40vh;
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    overflow: hidden;
}

.gallery_container_1column {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1500px;
    height: 30vmax;
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    overflow: hidden;
}



.gallery_container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    overflow: hidden;
}

.gallery_container2 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 5px;
    mix-blend-mode: multiply;
}

.gallery_container3 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 5px;
    mix-blend-mode: multiply;
}

.gallery_container4 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    mix-blend-mode: multiply;
}

/* Elementos individuales dentro de la galería */
.masonry-item,
.masonry-item2,
.masonry-item-special {
    width: 100%;
    transition: width 0.3s ease;
}


.masonry-item-cover {
    position: relative;
    width: 100%;
    height: 50vh;
    overflow: hidden;
}



@media (min-aspect-ratio: 10/9) {
    .masonry-item-cover img {
        transform: translate(0%, -50%);
    }
}

.masonry-item-info.gallery_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.masonry-item-cover.multiply {
    position: relative;
    z-index: 1;
}

/* ================================ */
/* RESPONSIVE */
/* ================================ */

/* Ajustes para móviles */
@media (max-width: 767px) {
    .gallery_container,
    .gallery_container2,
    .gallery_container3,
    .gallery_container4,
    .gallery_container_info {
        grid-template-columns: 1fr;
    }

    .lightbox .nav-btn {
        top: 90%;
    }

    .masonry-item,
    .masonry-item2,
    .masonry-item-special {
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lightbox-header {
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
    }

    .gallery_container_1column {
        margin: 0px 5px 0px 5px;
    }
}

/* Ajustes para tabletas */
@media (min-width: 768px) and (max-width: 1024px) {
    .gallery_container,
    .gallery_container2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lightbox img {
        max-width: 85%;
        max-height: 85%;
    }
}

/* ================================ */
/* TEXTO EN LA GRILLA */
/* ================================ */


.gallery_logo {
    width: 300px;
    height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
}



/*ESTILOS ESPECIFICOS PORTFOLIOS*/

/* MENU DE CLIENTES */
.menu_clients {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5vmax;
    z-index: 999;
    box-sizing: border-box;
    overflow: hidden;
}

/* Botón 1 - esquina superior izquierda */
.menu_clients #btn1 {
    display: flex;
}

/* Contenedor de los botones 2, 3 y 4 en la esquina superior derecha */
.menu_clients .botones-derecha {
    display: flex;
    gap: 10px; /* Espaciado entre los botones */
}

/* Estilo general de los botones */
.boton {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}


/* Botón 1 - altura de 90px */
#btn1 img {
    height: 60px;
    width: auto; /* Mantiene la proporción */
}

/* Resto de los botones - altura de 40px */
.botones-derecha .boton img {
    height: 40px;
    max-width: 40px;
}  


/* Estilo para el botón deshabilitado */
.boton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/*IAAI*/

.section_iaai_video {
    position: relative;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;

}

.video-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* Mantiene la proporción original del video */
    overflow: hidden;
    border-radius: 8px;
}


/*INV*/

.app-cover {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* O ajusta según tu diseño */
    height: 100vh; /* O ajusta según tu diseño */
  }
  
  .app-cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta la imagen sin recortarla */
  }

#placeholder_inv_video_still {
    transform: translateX(0%);
}

#logos_iron, #ecosystem {
    max-width: 1400px;
}

#video-background {
    width: 100vw;
}

#ecosystem {
    width: 100vw;
}

.carrusel_app_contenedor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carrusel_app {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 50px;
    margin: 5vmin 0 20vmin 0;
    overflow: scroll;

}

.cuadrado_1 {
    position: absolute;
    width: 30vw;
    height: 100%;
    background: linear-gradient(to right, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 0) 100%);
    left: 0;
}

.cuadrado_2 {
    position: absolute;
    width: 30vw;
    height: 100%;
    background: linear-gradient(to left, rgba(234, 234, 234, 1) 0%, rgba(234, 234, 234, 0) 100%);
    right: 0;
}

.carrusel_app_element {
    width: 25vw;
    max-width: 200px;
    border-radius: 20px;

}
@media (max-width: 768px) {
#advertising_inv {
margin-top: -100px;
}
}


 /* Contenedor principal para esta sección, evitando conflictos */
 .app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
  }
  
  /* Div estático: App Cover (imagen fija) */
  #app_cover.app-cover {
    flex: 0 0 auto;      /* No se encoge, tamaño fijo */
    width: 40%;          /* Puedes ajustar este porcentaje */
    padding: 10px;
    text-align: center;
  }
  
  #app_cover.app-cover img {
    max-height: 70vh;
    max-width: 60vw;
    display: block;
    margin: 0 auto; /* Centrado horizontal */
  }

    /* App Carrusel: slider a la derecha del app-cover */
    #app_carrusel.app-carrusel {
        flex: 1 1 auto;
        position: relative;
        overflow: hidden; /* Se ocultan las imágenes que se salen del viewport */
        padding: 10px;
        /* Fijamos el ancho para que se vean 3 imágenes:
           Cada imagen de 200px y 20px de margen a la derecha (menos en la última)
           => 200px * 3 + 20px * 2 = 640px */
        width: 640px;
      }
      /* Slider interno: contiene todas las imágenes en fila */
      .app-carousel-slider {
        display: flex;
        /* La animación se compone de 5 saltos (5 posiciones) de 2s cada uno = 10s total.
           Se usa steps(5) para que el cambio sea discreto. */
        animation: slide 10s steps(5) infinite;
      }
      /* Cada slide: imagen con ancho fijo y separación */
      .app-carousel-slide {
        flex-shrink: 0;
        width: 200px;
        margin-right: 20px;
      }
      .app-carousel-slide img {
        width: 100%;
        display: block;
      }
      /* Animación: se traslada el track el ancho total de 5 slides
         (los 5 originales se duplican para efecto infinito) */
      @keyframes slide {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-calc((200px + 20px) * 5));
        }
      }
      /* Responsive: en móviles se apilan los elementos verticalmente */
      @media (max-width: 768px) {
        .app-container {
          flex-direction: column;
        }
        #app_cover.app-cover,
        #app_carrusel.app-carrusel {
          width: 100%;
        }
        #app_carrusel.app-carrusel {
          margin-top: 20px;
        }
      }
  /* Responsive: en móvil se apilan verticalmente */
  @media (max-width: 768px) {
    .app-container {
      flex-direction: column;
    }
    #app_cover.app-cover,
    #app_carrusel.app-carrusel {
      width: 100%;
    }
    #app_carrusel.app-carrusel {
      margin-top: 20px;
    }
  }

/*NUUK*/
/* Contenedor principal de la sección con video */
.seccion-video-YeEAydwqpG0 {
    margin-top: 100px;
    position: relative;
    width: 100vw;
    height: 80vh; /* Asegura que la sección ocupe toda la pantalla */
    overflow: hidden;
}

/* Contenedor del video */
.contenedor-video-YeEAydwqpG0 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Configuración del iframe para cubrir toda la pantalla */
.contenedor-video-YeEAydwqpG0 iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* Relación 16:9 */
    min-width: 100vw;
    min-height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Ajuste dinámico para pantallas más altas (evita bandas negras) */
@media (max-aspect-ratio: 16/9) {
    .contenedor-video-YeEAydwqpG0 iframe {
        width: 177.78vh;
        height: 100vh;
    }
}

/* Contenido sobre el video */
.contenido-superior-YeEAydwqpG0 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: #eaeaea;
    text-align: center;
    background: rgba(22, 22, 29, 0.6); /* Overlay oscuro para mejorar legibilidad */
    width: 100%;
    height: 100%;
}

#moto {
    align-self: flex-end;
    transform: translate(-10%, -20%);
    
}

/*DUREX*/

.ball-video {
    width: 300px;
    height: 300px;
    object-fit: cover;
    mask-image: url('../images/portfolio/DUREX/ball_mask.png'); /* Máscara con forma de balón */
    -webkit-mask-image: url('../images/portfolio/DUREX/ball_mask.png'); /* Para Safari */
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.imagen_especifica_2c {
max-height: 600px;
max-width: 600px;
width: 35vmax;
}

#beer-pong {
    width: 100vw;
    transform: translateY(-200px);
    margin-bottom: -300px;
}

@media (max-width: 1024px) {
    #beer-pong {
        width: 100vw;
        transform: translateY(0px);
        margin-bottom: 0px;
    }
    
}

@media (max-width: 768px) {
    #beer-pong {
        width: 180vw;
        transform: translateY(0px);
        margin-bottom: 0px;
    }

    .imagen_especifica_2c {
        max-width: 800px;
        width: 35vmax;
        transform: translateX(0px);
        }
  }

  /*SYFY*/

  .video_container_2c {
    position: relative;
    width: 48vmax;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}

.video_container_2c iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* Responsive: Apila los vídeos en pantallas pequeñas */
@media (max-width: 768px) {
    .estandar_dos_columnas {
        flex-direction: column;
    }
    .video_container_2c {
        width: 100%;
    }
}