*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
    background-color: rgb(218, 218, 218);
}
/* Estilos para el contenedor principal */

.fondo {
    background-image: url('/media/abstract.png'); 
    background-size: cover; /* Cubrir todo el área del contenedor */
    background-position: center; /* Centrar la imagen de fondo */
    position: relative; /* Posición relativa para que los elementos hijos se posicionen correctamente */
    overflow: hidden; /* Para ocultar cualquier contenido que se desborde del contenedor */
}

.blur {
    filter: blur(10px); /* Agregar un desenfoque a la imagen de fondo */
    position: absolute; /* Posición absoluta para que la imagen se superponga al fondo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Colocar la imagen detrás de los otros elementos */
}


.nombre {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    margin-top: 100px;
}

/* Estilos para la imagen del nombre */
.nombre img {
    max-width: 100%; /* Asegurar que la imagen no exceda el tamaño del contenedor */
    width: 750px;
    position: relative;
    top: 0;
    animation: bounce 0.8s infinite alternate;
}
@keyframes bounce {
            0% {
                transform: translateY(0); /* No hay desplazamiento en el eje Y al inicio */
            }
            100% {
                transform: translateY(-20px); /* Desplazamiento hacia arriba en el eje Y */
            }
        }

/* Estilos para el contenedor de la imagen */
.container {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: flex-end; /* Alinear la imagen en la parte inferior del contenedor */
    margin-top: 30px;
}

/* Estilos para la imagen del contenedor */
.container img {
    max-width: 250px; /* Tamaño máximo de la imagen */
    max-height: 250px; /* Tamaño máximo de la imagen */
    margin-bottom: 50px;
    object-fit: cover;; /* Asegurar que la imagen no exceda el tamaño del contenedor */
    margin-top: 20px;
    transition: transform 0.3s; /* Transición suave para el efecto hover */
    border-radius: 50%;
    background: #85286a;
    box-shadow:  20px -20px 60px #71225a,
            -20px 20px 60px #992e7a;
}
/* Efecto hover */
.container img:hover {
    transform: scale(1.1); /* Hacer la imagen un poco más grande al pasar el ratón */
}
@media (max-width: 425px) {
    .nombre {
        flex-direction: column; /* Cambiar a disposición de columna */
        align-items: center; /* Centrar horizontalmente */
        margin-top: 80px; /* Reducir el margen superior */
        margin-left: 30px;
        margin-right: 20px;
    }

    .container {
        margin-top: 20px; /* Reducir el margen superior */
    }

    .nombre img{
        max-width: 300px; /* Reducir el tamaño de las imágenes */
        max-height: 300px; /* Reducir el tamaño de las imágenes */
    }
    .container img{
        max-width: 150px; /* Reducir el tamaño de las imágenes */
        max-height: 150px;
        border-radius: 50%;
    background: #85286a;
    box-shadow:  10px -10px 40px #71225a,
            -10px 10px 40px #992e7a;
    }

    .container2 img{
        max-width: 300px; /* Reducir el tamaño de las imágenes */
        max-height: 300px
    }
}

.video{ 
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    gap: 10px;
}

.video {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    gap: 10px; /* Espacio entre las columnas */
}
.video .video1 {
    display: flex;
    /* flex-direction: column;  */
    align-items: center;
}
.video .video3 {
    margin-top: 10px; /* Espacio entre los videos */
}
@media screen and (max-width: 430px) {
    .video {
        flex-direction: column; /* Cambia a una columna */
        width: 80%; /* Ocupa el 80% del ancho de la pantalla */
        margin: 0 auto; /* Centra el contenedor */
        margin-top: 50px;
        background-color: white;
        padding: 10px;
    }

    .video video, iframe {
        width: 100%; /* Toma todo el ancho disponible */
        height: auto; /* Altura automática para mantener la proporción */
        /* margin-top: 50px;
        margin-bottom: 20px; */
    }
    
    .titulo img{
        max-width: 300px; /* Reducir el tamaño de las imágenes */
        max-height: 300px;
    }
}

@media screen and (max-width: 768px) {
    .nombre{
        margin-left: 30px;
        margin-right: 20px;
    }
    .video2 {
        text-align: center; /* Centra los iframes uno debajo del otro */
    }
    .video2 video, iframe {
        display: block;
        margin: auto; /* Esto centrará cada iframe */
    }
    .video2 #video3{
        margin-top: 50px;
    }
}
@media screen and (max-width: 1300px) {
    .video2 {
        text-align: center; /* Centra los iframes uno debajo del otro */
    }
    .video2 video, iframe {
        display: block;
        margin: auto; /* Esto centrará cada iframe */
    }
    .video2 #video3{
        margin-top: 50px;
    }
}


.titulo{
    display: flex;
    justify-content: center;
    margin-top: 100px;
    margin-bottom:100px ;
    pointer-events: none;
    
}

.titulo {
    text-align: center;
    margin: 100px 0 50px 0;
    ;
  }
  
  .demos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas con el mismo ancho */
    grid-gap: 10px; /* Espacio entre los videos */
  }
  

  .demos video {
    width: 100%;
    border-radius: 15px;
}
  
  .video-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 900px; /* Ajusta el ancho según tus preferencias */
    /* height: 500px; */
    background-color: rgba(0, 0, 0, 0.5); /* Color de fondo con transparencia */
    border-radius: 10px; /* Radio de borde opcional */
    overflow: hidden; /* Para recortar el video si es más grande que el contenedor */
    backdrop-filter: blur(8px);
}

.video-container.show {
    display: block;
}
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain
}
  .close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: transparent;
    color: white;
    border: none;
    font-size: 50px;
    cursor: pointer;
  }

  .close-button:hover {
    color: rgb(0, 0, 0);
}

  @media screen and (max-width: 768px) {
    .demos {
      grid-template-columns: repeat(1, 1fr); /* 2 columnas en dispositivos móviles */
    }
  }
/* Estilos para el footer */
.footer {
    margin-top: 50px;
    width: 100%;
    height: 100%;
    background-color: #111111;
    background-image: linear-gradient(
        32deg,
        rgba(8, 8, 8, 0.74) 30px,
        transparent
    );
    background-size: 60px 60px;
    background-position: -5px -5px; /* Color de fondo del footer */
    color: #fff; /* Color de texto del footer */
    padding: 50px 0; /* Espaciado interno superior e inferior del footer */
}

.footer {
    text-align: center; /* Centra todo el contenido del footer */
}
.container2 img{
    width: 400px;
    margin-bottom: 20px;
}
.iconos {
    margin-top: 10px; /* Ajusta el margen superior de los iconos */
}

.iconos label {
    display: inline-block; /* Para alinear los iconos horizontalmente */
    margin: 0 10px; /* Ajusta el espacio entre los iconos */
}
.iconos label:nth-child(3) .radio-icon svg {
    fill: rgb(85, 182, 221); /* Cambia el color del tercer icono */
}
.radio-icon svg {
    width: 60px; /* Reduzca el tamaño de los iconos */
    height: 60px; /* Reduzca el tamaño de los iconos */
}
.iconos input[type="radio"] {
    display: none; /* Ocultar el input radio */
}
.row {
    margin-top: 23px; /* Margen superior de 23px para la fila */
}
.copyright{
    box-sizing: border-box;
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-style: italic;
}