@media (min-width: 1025px) {

    /* 1163 /858 */


/* 
1.Index
2.Portafolio
3.Compodigital
4.SECUENCIA





*/
    
/* 1.Index */
#vini {
    display: flex;
    justify-content: center; /* Esto centra la imagen horizontalmente sin importar el tamaño de pantalla */
}

#vini img {
    width: 700px;
    height: 500px;
    border: 2px solid rgb(212, 175, 55);
    margin-top: 10px;
    margin-bottom: 10px;
    /* Cero necesidad de márgenes laterales */
}
 #presentacion h1 {
    
     font-size: 30px;
   

 }

 #presentacion p {
     text-align: justify;
     width:70%;
     margin: 0 auto;
    padding-bottom: 80px;
    font-size: 20px;
     
 }

#desplegado li {
        font-size: 30px;
        list-style: none;
        margin: 0 !important; /* Limpiamos el margen de 750px que rompía la fila */
        opacity: 1 !important; /* Hace que el texto se vea sin necesidad del JS */
        animation: none !important; /* Apaga las animaciones móviles */
    }

#desplegado img {
        width: 40px;
        height: auto;
    }


#listadesple {
        display: block !important;
        width: 100%;
        margin-top: 20px;
    }

    #desplegado ul {
        display: flex;
        flex-direction: row;
        justify-content: center; /* Centra todos los botones en la pantalla */
        gap: 50px; /* Controla la separación exacta entre cada botón */
        padding: 0;
        margin: 0;
    }

    #desplegado li {
        font-size: 30px;
        list-style: none;
        margin: 0 !important; /* Limpiamos el margen de 750px que rompía la fila */
        opacity: 1 !important; /* Hace que el texto se vea sin necesidad del JS */
        animation: none !important; /* Apaga las animaciones móviles */
    }

    #Botonini{
display: none !important;
    }

    /* 🔴 */



/* PORTAFOLIO */


    /* Contenedor principal que arma la cuadrícula de 2 en 2 */
    .contenedores {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        gap: 20px; 
        padding: 10px;
        max-width: 5000px; 
        margin: 0 auto; 
    }

    /* Ajuste de cada tarjeta individual */
    #composiciondigital, #secuencias, #entorno, #retraele, #montaje {
        width: 40% !important; 
        display: flex !important;
        flex-direction: column !important; /* Mantiene el título debajo de la foto */
        position: static !important;
        margin: 0 !important;
    }

    /* Imágenes estandarizadas */
    .contenedores{
        padding-bottom:60px ;
    }


    .contenedores > div > img {
        width: 100% !important;
        height: 500px !important;
        object-fit: cover !important; 
        border: 2px solid rgb(212, 175, 55) !important;
        display: block !important;
    
    }
}

 #logoprin img {
    width: 12% !important;
    
     padding-bottom: 20px;
 }

    /* los textos de las categorias */
 #contenido p {
    font-size: 16PX;
 }
#contenidosec p {
    font-size: 16PX;

}

 #contenidoent p {
    font-size: 16PX;
 }

  #contenidoretra p {
    font-size: 16PX;
 }


    /* ⭕ */



/* COMPODIGITAL */
/* 1. Unimos ambas cajas en un contenedor Flex */


    /* 2. La mitad exacta para la imagen */
    #imgfond {
        width: 100%;
        margin: 0; 
        padding: 0;
    }

    #imgfond img {
        width: 100%;
        height: 100%;
        object-fit: cover;    /* Recorta la imagen para que llene su mitad sin deformarse */
        display: block;
    }

    /* 3. La otra mitad exacta para el texto */

    /* Ajustes opcionales para que el texto se vea bien */

#texcom p {
        text-align: justify;
        line-height: 1.6;
        font-size: 20px;
      
    }

    #concomp h1{
                font-size: 38px;
    }
       #concomp h2{
                font-size: 20px;
    }
        #concomp ul {
            margin-bottom: 17px;

        }
       #concomp li{
                font-size: 17px;
    }

#cajacom {
    max-width: 3000px;
    width: 70%;
}




    #carrusel-galeria img {
  
    aspect-ratio: 5 / 5;
 
}



/* 1. Contenedor general de la galería en PC */
    #carrusel-galeria {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 40px;
        width: 100%;
        max-width: 1024px;  /* Limita el ancho global para que no ocupe toda la pantalla gigante */
        margin:  auto;    /* Centra el carrusel perfectamente */
        margin-bottom: 80px;
        padding: 10px 0;
        scrollbar-width: none;
    }

    /* 4. Alturas profesionales para PC */
   .img-panoramica {
        grid-column: span 2;
        height: 500px !important; /* Usa una altura lógica para que no rompa la página */
    }


    #flecha-der {

    width: 80px;
    height: 80px;
}

#flecha-izq {
    width: 80px;
    height: 80px;
}

#imagen-dinamica{
    margin: -150px auto -60px auto;
}


    /* ⭕ */




/* SECUENCIA */

  #carrusel-galeria img {
    flex: 0 0 100%; /* Reducimos el ancho para que dejen espacio a los lados */
    max-width: 500PX; /* Le ponemos un tope para que no crezcan demasiado */


}



    /* ⭕ */