/* 
1. CUERPO GENERAL 
2. TIPOGRAFIA





*/



*{
  
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden; /* Corta y oculta cualquier cosa que intente salirse por los lados */
    width: 100%;
    max-width: 100%;
}
 
/*1 CUERPO GENERAL  */
 body {
     background-image: url(img/FONDO.jpg);
     background-repeat: no-repeat;
     background-size: cover; /* Hace que cubra todo sin deformarse */
    background-position: center; /* Centra la imagen */
    background-attachment: fixed; /* ¡ESTA ES LA SOLUCIÓN! Deja el fondo anclado */
     min-height: 100vh;
     padding: 0;
     margin: 0;
     font-family: 'Poppins', sans-serif;
 }

 body.portafolio {
     background-image: linear-gradient(rgba(0, 0, 0, 75%), rgba(0, 0, 0, 60%)), url(img/FONDO.jpg);
 }

 body.compodigital {
     background-image: linear-gradient(rgba(0, 0, 0, 70%), rgba(0, 0, 0, 70%)), url(img/FONDO.jpg);
 }

  body.secuencia {
     background-image: linear-gradient(rgba(0, 0, 0, 70%), rgba(0, 0, 0, 70%)), url(img/FONDO.jpg);
 }

body.visor {
    background-image: url('img/FONDO.jpg') !important;
    background-color: rgba(0, 0, 0, 0.7) !important; /* Aquí pones la oscuridad */
    background-blend-mode: multiply !important; /* Esto fusiona el color negro con tu imagen */
    background-size: cover !important;
    margin: 0;
    padding: 0;
    width: 100vw; /* 100% del ancho de la pantalla */
    height: 100dvh; /* 100% del alto dinámico (perfecto para celulares) */
    overflow: hidden; /* EL TRUCO MAGICO: Elimina el scroll para siempre */
    position: relative; /* Ayuda a que los iconos absolutos se queden en su sitio */
}


 body.entornos {
     background-image: linear-gradient(rgba(0, 0, 0, 70%), rgba(0, 0, 0, 70%)), url(img/FONDO.jpg);
 }

  body.ryt {
     background-image: linear-gradient(rgba(0, 0, 0, 70%), rgba(0, 0, 0, 70%)), url(img/FONDO.jpg);
 }
 body.seccion-videos {     background-image: linear-gradient(rgba(0, 0, 0, 70%), rgba(0, 0, 0, 70%)), url(img/FONDO.jpg);


 }

 body.proyectos {     background-image: linear-gradient(rgba(0, 0, 0, 70%), rgba(0, 0, 0, 70%)), url(img/FONDO.jpg);


 }

/* FIN */

/*2 TIPOGRAFIA */

/* Para los encabezados y títulos (Garamond) */
h1, h2, h3, h4, h5, h6, .titulo-carrusel {
    font-family: 'Garamond', serif;
}

/* Para los bloques de texto y párrafos (Georgia) */
body, p, a, li {
    font-family: 'Georgia', serif;
}

/* ⭕ */


/* INDEX */

    /* INDEX- PRESENTACION ABAJO */
 #presentacion {
     color: white;
     height: 80%;
     width: 100%;
     background-color: rgba(0, 0, 0, 0.6);
     margin-top: 1px;
     padding-top: 18px;
     border-top: 2px solid rgb(212, 175, 55);
 }

 #presentacion h1 {
     text-align: center;
     font-size: 20px;
     font-family: 'Montserrat', sans-serif;
     font-weight: 800;
     margin-top: 40px;
 }


 #presentacion p {
     text-align: justify;
     width: 80%;
     margin: 0 auto;
     padding-bottom: 20px;
     
 }
    /* 🔴 */

    /* INDEX - "VIDEO" */
 #vini {
     text-align: justify;
     width: 100%;
     height: auto;
     background: linear-gradient(180deg, rgba(75, 25, 25, 1) 0%, rgba(0, 0, 0, 1) 100%);

 }

 #vini img {
     width: 95%;
     height: auto;
     border: 2px solid rgb(212, 175, 55);
     margin-left: 10px;
     margin-top: 10px;
 }
    /* 🔴 */

    /* CIRCULO ROJO  */

 #botini img {
    width: 100%;
    height: 100%; /* Forzamos a que llene la caja exacta */
    object-fit: contain; /* Asegura que la imagen no se deforme */
    animation: brillar-logo 2s infinite alternate;
    transition: transform 0.5s ease;
 }

    /*🔴 */


     /* INDEX - LOGO DEL CIRCULO */



 
#Botonini{
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 1;
    left: 50%;
    top:60%;
    transform: translateX(-50%) translatey(-30%);
  
    #logobot{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
         z-index: 2;
        & img{
           width: 70px; 
        }
        
        
    }
    #botini{
        position: absolute;
        & img{
           width: 100px; 

        }
  
    }
}
    /*🔴*/

/* INDEX- RECTANGULO ROJO */
 #desplegado {
    position: relative;
     background-color: rgba(0, 0, 0, 1);
     color: white;
     padding: 20px;
     border-radius: 15px;
     text-align: center;
     z-index: 100;
     width: 100%;


 }
 .desplegadoOpen{
    display: flex;
    #Botonini{
        position: relative !important;
        transform: none !important;
        left: 15% !important;
        top: 0 !important;
        margin-top: 25px;
        
        
    }
    #botini{
        position: relative !important;
    }
    .derecha{
        position: relative !important;
        transform: none !important;
        top: 0 !important;
        left: 0 !important;
    }

    #listadesple{
        
     margin: 0px !important;
     padding-left: 0px !important;
    
 }

 }

 #desplegado ul {
     list-style: none;
     padding: 0;

 }



 /* 1. Controlamos el tamaño de la cámara para que no sea gigante */
 #desplegado img {
     width: 30px;
     /* Ajusta este número si la quieres más grande o pequeña */
     height: auto;
 }

 /* 2. Alineamos la imagen y el texto al lado del otro */
 #desplegado a {
     display: flex;
     align-items: center;
     /* Centra verticalmente la cámara con el texto */
     gap: 12px;
     /* Espacio de separación entre la cámara y el texto */
     text-decoration: none;
     /* Quita el subrayado azul por defecto de los links */
     color: white;
 }

    /* INDEX- JV DEL BOTON DESPLE */
  

    .mostrar {
     display: block !important;
     animation: aparecer 0.4s ease forwards;  
    
    
 }


  .derecha {
    transform: translate(-60%, -50%) translate(-100px, -50px) !important;
    animation: aparecer 0.4s ease forwards;

 }

 
#logobot.derecha img {
     width: 100px; /* Aquí controlas qué tan grande se ve el botondesple.png */
     height: auto;
     filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
     /* Eliminamos los margin-left y margin-top negativos que tenías porque lo estaban tirando a la izquierda */
}



 /* 3. Limpiamos estilos de la lista para que no se amontone */
 #desplegado li {
     font-size: 20px;
     list-style: none;
     margin: 10px 0px 0px 90px;
     
 }

 @keyframes entrarIzquierda {
     from {
         opacity: 0;
         transform: translateX(-30px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 #desplegado.mostrar li {
     opacity: 0;
     animation: entrarIzquierda 0.4s ease forwards;
 }

 #desplegado.mostrar li:nth-child(1) {
     animation-delay: 0.1s;
 }

 #desplegado.mostrar li:nth-child(2) {
     animation-delay: 0.2s;
 }

 #desplegado.mostrar li:nth-child(3) {
     animation-delay: 0.3s;
 }

 #desplegado.mostrar li:nth-child(4) {
     animation-delay: 0.4s;
 }
 #listadesple{
    display: none;
    
 }


 @keyframes aparecer {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .ocultar {
     opacity: 0 !important;
     visibility: hidden !important;
 }

 @keyframes brillar-logo {
     0% {

         filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.3)) brightness(0.8);
     }

     100% {

         filter: drop-shadow(0 0 25px rgb(152, 128, 50)) brightness(1.2);
     }
 }



 #prob {
     background-color: aqua;
 }




 #flevol {
     position: absolute;
     z-index: 10;
     top: 15px;
     left: 17px;
     
 }

 #flevol img {
     width: 70px;
     height: auto;
 }

 #logoprin {
     position: relative;
     left: 80%;
     top: 10px
 }

 #logoprin img {
     width: 20% !important;
    
 }

.contenedores{
    padding-bottom:60px ;
}
 #composiciondigital {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     margin: 0 auto;
     top: 20px;
     padding-bottom: 60px;
 }

 #contenido {
     display: none;
     margin-top: -10px;
     margin-left: 10px;
     width: auto;
 }

 @keyframes entradaEscalonada {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 #contenido.mostrar {
     display: flex !important;
 }

#contenido.mostrar h1 {
    /* Ejecuta tu entrada primero, y luego arranca el latido amarillo esperando 1s */
    animation: 
        entradaEscalonada 0.4s ease forwards, 
        latidoAmarillo 2.5s ease-in-out 1s infinite;
}


/* ==========================================
   NUEVA ANIMACIÓN: Brillo Amarillo
   ========================================== */
@keyframes latidoAmarillo {
    0% {
        box-shadow: 0 0 0px transparent;
        color: white; /* Texto normal */
    }
    50% {
        /* Genera un resplandor en la caja y tiñe un poco el texto de amarillo/dorado */
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); 
        color: #FFD700; 
    }
    100% {
        box-shadow: 0 0 0px transparent;
        color: white; /* Vuelve a la normalidad */
    }
}




 #contenido.mostrar p {
     opacity: 0;
     animation: entradaEscalonada 0.4s ease 0.25s forwards;
 }

#contenido h1 {
    height: 87px;
    padding: 12px;
    margin-top: 22px;
    color: white;
    background-color: #4B1919;
    font-size: 24px;
    font-family: 'Garamond', serif; /* ¡Corregido a la tipografía de Undifox! */
    cursor: pointer; /* ESTO ES VITAL: Pone el cursor de la manito */
}

 #contenido p {

     margin-top: 22px;
     margin-right: 10px;
     margin-left: 5px;
     font-size: 13px;
     padding-left: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     height: 100px;
     word-wrap: break-word;
     color: white;
     background-color: rgba(183, 79, 79, 50%);
 }



 .titulo-preview {
     color: white;
     margin: 10px 0px 20px 0px;
     text-align: center;
     display: block;
     font-size: 24px;
     font-weight: 800;
    

 }

 /* 2. Cuando se maximiza la imagen (#composiciondigital tiene la clase .activo), se oculta */
 #composiciondigital.activo .titulo-preview {
     display: none;

 }

 /* 2. Cuando se maximiza la imagen (#composiciondigital tiene la clase .activo), se oculta */
 #composiciondigital.activo .titulo-preview {
     display: none;
 }


 ---------------------
  #secuencias {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     margin: 0 auto;
     top: 20px;
 }

 #contenidosec {
     display: none;
     margin-top: -10px;
     margin-left: 10px;
     width: auto;
 }

 @keyframes entradaEscalonada {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 #contenidosec.mostrar {
     display: flex !important;
 }

 #contenidosec.mostrar h1 {
         /* Ejecuta tu entrada primero, y luego arranca el latido amarillo esperando 1s */
    animation: 
        entradaEscalonada 0.4s ease forwards, 
        latidoAmarillo 2.5s ease-in-out 1s infinite;
 }

 #contenidosec.mostrar p {
     opacity: 0;
     animation: entradaEscalonada 0.4s ease 0.25s forwards;
 }

 #contenidosec h1 {
    height: 87px;
    padding: 12px;
    margin-top: 22px;
    color: white;
    background-color: #4B1919;
    font-size: 24px;
    font-family: 'Garamond', serif; /* ¡Corregido a la tipografía de Undifox! */
    cursor: pointer; /* ESTO ES VITAL: Pone el cursor de la manito */
 }

 #contenidosec p {

     margin-top: 22px;
     margin-right: 10px;
     margin-left: 5px;
     font-size: 13px;
     padding-left: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     height: 100px;
     word-wrap: break-word;
     color: white;
     background-color: rgba(183, 79, 79, 50%);
 }



 .titulo-previewsec {
     color: white;
     margin: 10px 0px 20px 0px;
     text-align: center;
     display: block;
     font-size: 24px;
     font-weight: 800;

 }

 /* 2. Cuando se maximiza la imagen (#composiciondigital tiene la clase .activo), se oculta */
 #secuencias.activo .titulo-previewsec {
     display: none;

 }


 --------------------------------------

   #entorno {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     margin: 0 auto;
     top: 20px;
 }

 #contenidoent {
     display: none;
     margin-top: -10px;
     margin-left: 10px;
     width: auto;
 }

 @keyframes entradaEscalonada {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 #contenidoent.mostrar {
     display: flex !important;
 }

 #contenidoent.mostrar h1 {
             /* Ejecuta tu entrada primero, y luego arranca el latido amarillo esperando 1s */
    animation: 
        entradaEscalonada 0.4s ease forwards, 
        latidoAmarillo 2.5s ease-in-out 1s infinite;
 }

 #contenidoent.mostrar p {
     opacity: 0;
     animation: entradaEscalonada 0.4s ease 0.25s forwards;
 }

 #contenidoent h1 {
    height: 87px;
    padding: 12px;
    margin-top: 22px;
    color: white;
    background-color: #4B1919;
    font-size: 24px;
    font-family: 'Garamond', serif; /* ¡Corregido a la tipografía de Undifox! */
    cursor: pointer; /* ESTO ES VITAL: Pone el cursor de la manito */
 }

 #contenidoent p {

     margin-top: 22px;
     margin-right: 10px;
     margin-left: 5px;
     font-size: 13px;
     padding-left: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     height: 100px;
     word-wrap: break-word;
     color: white;
     background-color: rgba(183, 79, 79, 50%);
 }



 .titulo-previewent {
     color: white;
     margin: 10px 0px 20px 0px;
     text-align: center;
     display: block;
     font-size: 24px;
     font-weight: 800;

 }

 /* 2. Cuando se maximiza la imagen (#composiciondigital tiene la clase .activo), se oculta */
 #entorno.activo .titulo-previewent {
     display: none;

 }
---------------------------------------
 #retraele {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     margin: 0 auto;
     top: 20px;
 }

 #contenidoretra {
     display: none;
     margin-top: -10px;
     margin-left: 10px;
     width: auto;
 }

 @keyframes entradaEscalonada {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 #contenidoretra.mostrar {
     display: flex !important;
 }

 #contenidoretra.mostrar h1 {
         animation: 
        entradaEscalonada 0.4s ease forwards, 
        latidoAmarillo 2.5s ease-in-out 1s infinite;
 }

 #contenidoretra.mostrar p {
     opacity: 0;
     animation: entradaEscalonada 0.4s ease 0.25s forwards;
 }

 #contenidoretra h1 {
    height: 87px;
    padding: 12px;
    margin-top: 22px;
    color: white;
    background-color: #4B1919;
    font-size: 24px;
    font-family: 'Garamond', serif; /* ¡Corregido a la tipografía de Undifox! */
    cursor: pointer; /* ESTO ES VITAL: Pone el cursor de la manito */
 }

 #contenidoretra p {

     margin-top: 22px;
     margin-right: 10px;
     margin-left: 5px;
     font-size: 13px;
     padding-left: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     height: 100px;
     word-wrap: break-word;
     color: white;
     background-color: rgba(183, 79, 79, 50%);
 }



 .titulo-previewretra {
     color: white;
     margin: 10px 0px 20px 0px;
     text-align: center;
     display: block;
     font-size: 24px;
     font-weight: 800;

 }

 /* 2. Cuando se maximiza la imagen (#composiciondigital tiene la clase .activo), se oculta */
 #retraele.activo .titulo-previewretra {
     display: none;

 }

 --------------------------------------

   #montaje {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     margin: 0 auto;
     top: 20px;
 }

 #contenidomon {
     display: none;
     margin-top: -10px;
     margin-left: 10px;
     width: auto;
 }

 @keyframes entradaEscalonada {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 #contenidomon.mostrar {
     display: flex !important;
 }

 #contenidomon.mostrar h1 {
              animation: 
        entradaEscalonada 0.4s ease forwards, 
        latidoAmarillo 2.5s ease-in-out 1s infinite;
 }

 #contenidomon.mostrar p {
     opacity: 0;
     animation: entradaEscalonada 0.4s ease 0.25s forwards;
 }

 #contenidomon h1 {
    height: 87px;
    padding: 12px;
    margin-top: 22px;
    color: white;
    background-color: #4B1919;
    font-size: 24px;
    font-family: 'Garamond', serif; /* ¡Corregido a la tipografía de Undifox! */
    cursor: pointer; /* ESTO ES VITAL: Pone el cursor de la manito */
 }

 #contenidomon p {

     margin-top: 22px;
     margin-right: 10px;
     margin-left: 5px;
     font-size: 13px;
     padding-left: 5px;
     padding-top: 5px;
     padding-bottom: 5px;
     height: 100px;
     word-wrap: break-word;
     color: white;
     background-color: rgba(183, 79, 79, 50%);
 }



 .titulo-previewmon {
     color: white;
     margin: 10px 0px 20px 0px;
     text-align: center;
     display: block;
     font-size: 22px;
     font-weight: 800;

 }

 /* 2. Cuando se maximiza la imagen (#composiciondigital tiene la clase .activo), se oculta */
 #montaje.activo .titulo-previewmon {
     display: none;

 }

 /* Agrupamos todas las imágenes para que tengan el mismo tamaño y proporción */
#composiciondigital img,
#secuencias img,
#entorno img,
#retraele img,
#montaje img {
    width: 75%; 
    height: 60%;
    aspect-ratio: 16 / 9; /* Hace que el ancho sea un tris mayor que el alto (formato paisaje) */
    object-fit: cover; /* Recorta la imagen para llenar el espacio SIN deformarla ni estirarla */
    display: block;
    margin: 0 auto;
    border: 2px solid #D4AF37;
    cursor: pointer;
    transition: width 0.4s ease, transform 0.4s ease;
}


/* Este hace que las img no se agranden todas , solo una */
#composiciondigital.activo > img,
#secuencias.activo > img,
#entorno.activo > img,
#retraele.activo > img,
#montaje.activo > img {
    width: 95%;
}
/* -- */

/* FLECHAS */
.flecha-scroll{
    width: 50px !important ;
    position: fixed;
    left: 50%;
    z-index: 100;
    transition: opacity 0.4s ease, visibility 0.4s ease; /* Transición suave */
    opacity: 1;
    visibility: visible;
}

.flecha-oculta {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none; /* Evita que se puedan hacer clic por accidente cuando estén invisibles */
}
    
#flearri{
    transform: translateX(-50%) rotate(180deg);
    top: 5%;
}

#fleabajo{
    top: 85%;
transform: translateX(-50%);
}

#flecha-izq {
    position: absolute;
    left: 50px; /* Se coloca elegantemente al lado izquierdo del carrusel */
    transform: translateY(-1000%) rotate(90deg);
    width: 50px;
    height: 50px;
    z-index: 50;
    background: rgba(75, 25, 25, 90%); /* <--- El '0.5' le da un 50% de transparencia solo al fondo */
    border-radius: 50%;
    padding: 8px;  /* <--- Espacio interno para que el fondo crezca alrededor del icono */
    box-sizing: border-box; /* <--- Evita que el padding deforme las medidas */
    /* Esto centra perfectamente el icono de la flecha dentro del nuevo círculo grande */
    display: flex;
    align-items: center;
    justify-content: center;
   
}

#flecha-der {
position: absolute;
    right: 50px; 
    transform: translateY(-1000%) rotate(-90deg); /* Ojo: ten cuidado con el -1500%, eso mandaba la flecha volando fuera de la pantalla */
    width: 50px;   /* <--- Aumentado de 40px a 50px para hacer el fondo más grande */
    height: 50px;  /* <--- Debe medir lo mismo que el width para que siga siendo un círculo perfecto */
    z-index: 50;
    background: rgba(75, 25, 25, 90%); /* <--- El '0.5' le da un 50% de transparencia solo al fondo */
    border-radius: 50%; /* <--- ¡Aquí faltaba el punto y coma! */
    padding: 8px;  /* <--- Espacio interno para que el fondo crezca alrededor del icono */
    box-sizing: border-box; /* <--- Evita que el padding deforme las medidas */
    /* Esto centra perfectamente el icono de la flecha dentro del nuevo círculo grande */
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* El de pag secuencia */
#flecha-izqse {
    position: absolute;
    left: 10px; /* Se coloca elegantemente al lado izquierdo del carrusel */
    transform: translateY(-580%) rotate(90deg);
    width: 50px;
    height: 50px;
    z-index: 50;
    background: rgba(75, 25, 25, 90%); /* <--- El '0.5' le da un 50% de transparencia solo al fondo */
    border-radius: 50%;
    padding: 8px;  /* <--- Espacio interno para que el fondo crezca alrededor del icono */
    box-sizing: border-box; /* <--- Evita que el padding deforme las medidas */
    /* Esto centra perfectamente el icono de la flecha dentro del nuevo círculo grande */
    display: flex;
    align-items: center;
    justify-content: center;
   
}

#flecha-derse {
position: absolute;
    right: 10px; 
    transform: translateY(-580%) rotate(-90deg); /* Ojo: ten cuidado con el -1500%, eso mandaba la flecha volando fuera de la pantalla */
    width: 50px;   /* <--- Aumentado de 40px a 50px para hacer el fondo más grande */
    height: 50px;  /* <--- Debe medir lo mismo que el width para que siga siendo un círculo perfecto */
    z-index: 50;
    background: rgba(75, 25, 25, 90%); /* <--- El '0.5' le da un 50% de transparencia solo al fondo */
    border-radius: 50%; /* <--- ¡Aquí faltaba el punto y coma! */
    padding: 8px;  /* <--- Espacio interno para que el fondo crezca alrededor del icono */
    box-sizing: border-box; /* <--- Evita que el padding deforme las medidas */
    /* Esto centra perfectamente el icono de la flecha dentro del nuevo círculo grande */
    display: flex;
    align-items: center;
    justify-content: center;
}



/* 🔴 */


/* Pie de Pagina */
    /* La caja principal */
#piepag {

    position: fixed; 
    bottom: 0;       /* Lo pega totalmente al piso de la pantalla */
    left: 0;         /* Lo pega al borde izquierdo */
    z-index: 100;
    width: 100%;
    box-sizing: border-box;     /* Mantiene todo dentro de la pantalla */
    display: flex;
    align-items: center;
    gap: 15px;                    
    background-color: rgba(75, 25, 25);
    border-top: 2px solid #D4AF37;
    padding: 15px 10px;
    
}

            /* correo a la derecha */
#correo {
    display: flex;
    align-items: center;
    gap: 10px;                    
    margin-left: auto;            /* ¡Esta es la magia! Empuja el bloque a la derecha automáticamente */
}

#piepag a {
    display: flex;
    align-items: center;
    justify-content: center;
}

#piepag img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border: none;
    transition: transform 0.3s ease;
}

#piepag img:hover {
    transform: scale(1.1);
}

#piepag p {
    color: #D4AF37;               /* Cambié el color para que haga match con tu diseño (dorado) */
    font-family: 'Montserrat', sans-serif; /* En tu imagen parece usar la fuente de los títulos */
    font-size: 10px;
    font-weight: bold;
    margin: 0;
}

/* Los estilos del # en los contenedores  */

/* Limpiamos y estilizamos todos los enlaces dentro de los contenedores de texto */
#contenido a,
#contenidosec a,
#contenidoent a,
#contenidoretra a,
#contenidomon a {
    text-decoration: none; /* Adiós subrayado azul */
    color: inherit;        /* Hereda el color blanco del h1 */
    display: block;        /* Hace que toda la caja del h1 sea clickeable */
    cursor: pointer;
}

/* Efecto visual sutil cuando el usuario pasa el mouse por encima para indicar que es un enlace */
#conteidoh1:hover, /* (o sobre los h1 en general dentro de los contenidos) */
#contenido a h1:hover,
#contenidosec a h1:hover,
#contenidoent a h1:hover,
#contenidoretra a h1:hover,
#contenidomon a h1:hover {
    color: #D4AF37; /* El color dorado de tu marca para que brille un poco al pasar el mouse */
    transition: color 0.3s ease;
}

/* PAG COMPODIGITAL*/

#cajacom{ /* cuerpo */
position: relative;
    width: 90%;          
    max-width: 350px; /* Igualamos el tope al tamaño exacto que quieres para la foto */
    margin: 30px auto;   
    border: 3px solid #D4AF37; /* El marco dorado abraza a ambos elementos por igual */
    overflow: hidden; /* Asegura que nada se salga de los bordes del marco */
}


#imgfond{
width: 100%;
    z-index: 1;
    border: 1px solid #D4AF37; /* el solid es el grosor  */
}

#imgfond img {
    width: 100%;      /* La imagen llena su contenedor dinámicamente */
    height: 580px;
    object-fit: cover; /* Evita que la foto se estire feo si cambia el ancho */
    display: block;
    filter: blur(4px);
}


#texcom{
    
    padding: 8px;
    background: rgba(64, 15, 15, 50%); /* Opcional: una capa oscura semitransparente detrás del texto para que se lea mejor */
    font-size: 14px;
    border-radius: 30px;
}

/* El texto se posiciona de forma absoluta por encima de la imagen */
#concomp {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    padding: 20px; /* Ahora el padding es exacto respecto a la imagen, sin importar el tamaño de pantalla */
    box-sizing: border-box; 
    color: #ffffff; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el texto verticalmente de forma automática */

}

#concomp h1 {
    text-align: center;
}



/* =========================================
   GALERÍA COMPOSICIÓN DIGITAL (CARRUSEL + GRID)
   ========================================= */

/* Caja contenedora general que une carrusel y flechas en el mismo espacio */
.contenedor-galeria-general {
    position: fixed;
    width: 100%;
    margin: 40px auto 120px auto; /* Centrado perfecto y espacio para el footer */
    padding-left: 25px !important;  /* Forzamos aire a la izquierda */
    padding-right: 25px !important; /* Forzamos aire a la derecha */
    top: 900px;
    left: 1;
    z-index: 500;
}



/* 1. El carrusel que se mueve a los lados */
#carrusel-galeria {
    display: flex;
    overflow-x: auto; /* Activa el scroll horizontal */
    scroll-snap-type: x mandatory; /* Imanta los bloques */
    gap: 30px;
    width: 100%;
    margin: 0;
    padding: 15px;
    margin-bottom: 1%;
    scrollbar-width: none; /* Oculta la barra de scroll en Firefox */
}

/* Ocultar barra de scroll en Chrome/Safari */
#carrusel-galeria::-webkit-scrollbar {
    display: none;
}

/* 2. El diseño de las columnas y filas (Grid) */
.bloque-masonry {
    min-width: 100%;
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 3. Estilos de los enlaces que actúan como celdas */
.bloque-masonry a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* 4. Forzar a que la imagen cubra exactamente su celda con el marco dorado */
.bloque-masonry a img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que se deformen */
    border: 2px solid #D4AF37; /* Tu marco dorado */
    border-radius: 2px;
    display: block;
}

/* 5. Clases específicas para dar forma al rompecabezas sin dejar espacios extra */
.img-panoramica {
    grid-column: span 2;
    height: 140px; /* Altura fija para eliminar espacios sobrantes */
}

.img-vertical {
    height: 170px; /* Altura fija limpia */
}

.img-horizontal {
    height: 110px; /* Altura fija limpia */
}


/* =========================================
   FLECHAS CARRUSEL (Ahora posicionadas de forma segura)
   ========================================= */



/* VISOR */

#imagen-dinamica {
    /* 1. LOS LÍMITES: Le decimos "crece todo lo que quieras, pero NO te pases de aquí" */
    max-width: 90%; 
    max-height: 65vh;
    
    /* 2. EL TRUCO MAGICO: Esto hace que el marco dorado se pegue a la foto real */
    width: auto;
    height: auto;
    
    /* 3. EL MARCO DORADO */
    border: 3px solid #D4AF37;
   
    
    /* 4. CENTRADO EN PANTALLA */
    display: block; 
    margin: -30px auto -60px auto; 
}
    /* Modificacion del logo  */

.cerrar #logoprin {
    /* Tus estilos aquí afectarán SOLO al logo de esta página */
    width: 100%; 
    top: -60px;
}
   /* 🔴 */

#flechafond img{
    position: absolute; /* ¡Esto es lo que "despierta" al left! */
    left: 90%;
    top: 40%;   
}

    /* HUELLA */
#iconohu{
    position: absolute; /* ¡Esto es lo que "despierta" al left! */
    left: 50%;
    transform: translateX(-50%);
    top: 80%;

}


/* Le damos una transición suave a todo lo que queremos que desaparezca para que no sea un corte brusco */
header, #flechafond, #piepag, #iconohu {
    transition: opacity 0.3s ease;
}

/* Esta es la clase que JavaScript va a encender y apagar */
body.modo-inmersivo header,
body.modo-inmersivo #flechafond,
body.modo-inmersivo #piepag {
    opacity: 0 !important;
    visibility: hidden !important; 
    pointer-events: none; /* Evita que el usuario haga clic en cosas invisibles */
}

/* Ocultamos la huella también, PERO solo con opacidad. 
   Si le ponemos visibility hidden, el celular corta el evento táctil y se bugea */
body.modo-inmersivo #iconohu {
    opacity: 0 !important;
}

/* Mantenemos la misma configuración de la animación */
#iconohu img {
    animation: brillo-dorado-intenso 1.5s infinite alternate ease-in-out;
}

/* Actualizamos los Keyframes para más potencia */
@keyframes brillo-dorado-intenso {
    0% {
        /* Estado bajo: Un brillo sutil para que no desaparezca del todo */
        filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.5));
        transform: scale(1);
    }
    100% {
        /* ESTADO ALTO: Aquí está el truco de apilar sombras */
        filter: 
            
            drop-shadow(0 0 2px #D4AF37)     /* 2. Brillo dorado intenso cerca del borde */
            drop-shadow(0 0 6px #D4AF37);    /* 3. Halo dorado amplio y suave */
        
        transform: scale(1.1); /* Subimos un pelín más la escala para el efecto latido */
    }
}
    /* 🔴 */


    /* =========================================
   PANEL LATERAL DE INFORMACIÓN
   ========================================= */

#panel-info {
    position: fixed; /* Se queda fijo en la pantalla */
    top: 0;
    right: 0;
    width: 80%; /* Ocupará el 80% de la pantalla del celular */
    max-width: 350px; /* Límite para que no se vea gigante en PC */
    height: 100dvh;
    background-color: rgba(15, 15, 15, 0.95); /* Fondo muy oscuro, casi negro, algo transparente */
    color: #fff;
    border-left: 2px solid #D4AF37; /* Línea dorada para mantener tu identidad visual */
    z-index: 1000; /* Asegura que este panel aparezca por encima de TODA la página */
    
    /* El truco de la animación: Lo empujamos 100% hacia la derecha para esconderlo */
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out; /* Animación fluida de 0.4 segundos */
    
    /* Usamos Flexbox para organizar el contenido interior fácilmente */
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.7); /* Sombra para darle profundidad */
}

/* Esta clase es la que JavaScript encenderá para deslizar el panel */
#panel-info.abierto {
    transform: translateX(0); /* Lo devuelve a su posición original en la pantalla */
}

/* Estilos internos del panel */
#cerrar-panel {
    align-self: flex-end; /* Lo tira hacia la derecha */
    background: none;
    border: none;
    color: #D4AF37;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    cursor: pointer;
    margin-bottom: 20px;
}

.contenido-panel h2 {
    color: #D4AF37;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.contenido-panel p {
   
    font-size: 0.95rem;
    line-height: 1.6;
    color: #ddd;
}


/* SECUENCIAS */
#carrusel-galeria{
    margin-bottom: 100px;

}


  #carrusel-galeria img {
    flex: 0 0 65%; /* Reducimos el ancho para que dejen espacio a los lados */
    max-width: 100%; /* Le ponemos un tope para que no crezcan demasiado */
    aspect-ratio: 4 / 5; /* Formato vertical exacto de Instagram */
    object-fit: cover; /* Hace que la imagen se llene bien sin deformarse */
    border-radius: 8px; /* Bordes suaves estilo Instagram */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: block;
    scroll-snap-align: center; /* Efecto magnético al centrar */
     border-left: 2px solid #D4AF37; /* Línea dorada para mantener tu identidad visual */

}

/* ----------------------------------------------------
   Estilos para la Galería de Videos en Celular
   ---------------------------------------------------- */
.contenedor-videos-movil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Espacio entre video y video */
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 50px;
}

.video-item {
    width: 100%;
    display: flex;
    justify-content: center;
}

.video-item video {
    width: 100%;
    max-width: 450px; /* Tamaño grande pero controlado para pantallas de móvil */
    border-radius: 12px; /* Coherente con el estilo de tus otras secciones */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    background-color: #000;
    
    /* Agregamos el borde dorado (puedes cambiar el grosor si lo prefieres más delgado o grueso) */
    border: 3px solid #d4af37; 
}


/* PROYECTOS */


/* Espaciado general para cada bloque de proyecto */
.bloque-proyecto {
    width: 90%;
    max-width: 1000px;
    margin: 60px auto;
    text-align: center;
}

/* Estilo para el título de cada carrusel */
.titulo-carrusel {
    font-family: 'Montserrat', sans-serif;
    color: #fff; /* Cambia esto al color de tu paleta Undifox si es necesario */
    font-size: 1.8rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* El contenedor principal de la galería que mantiene las flechas adentro */
.contenedor-galeria {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Opcional: bordes redondeados */
}

/* La pista donde corren las imágenes */
.carrusel-imagenes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px; /* Separación entre las fotos de la secuencia */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Ocultar barra de scroll nativa */
.carrusel-imagenes::-webkit-scrollbar {
    display: none;
}

/* Las imágenes dentro de la pista */
.carrusel-imagenes img {
    flex: 0 0 100%; /* Cada imagen ocupa el 100% del espacio, ideal para secuencias de 1 en 1 */
    width: 100%;
    height: auto;
    object-fit: cover;
    scroll-snap-align: center;
    margin-bottom: 30px;
}

/* Estructura base de las flechas */
.flecha-galeria {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    cursor: pointer;
    z-index: 10;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.flecha-galeria:hover {
    opacity: 1;
}

/* Posición específica de cada flecha */
.flecha-izq {
    left: 15px;
    transform: translateY(-50%) rotate(90deg); /* Voltea la flecha si usas la misma imagen */
}

.flecha-der {
  
    transform: translateY(-50%) rotate(270deg); /* Voltea la flecha si usas la misma imagen */
}

.flecha-der {
    right: 15px;
}