/* Estilos generales */
body {
    font-family: 'Roboto Flex', sans-serif;
    margin: 0;
    line-height: 1.6;
    color: #333;
}
html {
    scroll-behavior: smooth;
}


.cabecera-img {
    width: 100%;
    height: auto;
    display: block;
}

header {
    position: relative; /* Para que el menú se posicione dentro del header */
}
nav {
    position: fixed; /* Mantiene el menú flotando en la pantalla */
    top: 20px; /* Distancia desde la parte superior */
    right: 20px; /* Distancia desde la derecha */
    background: black; /* Fondo negro para que sea legible */
    padding: 10px 20px;
    border-radius: 10px; /* Bordes redondeados para mejor estética */
    z-index: 1000; /* Asegura que esté por encima del contenido */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline-block; /* Mantiene los elementos en una sola línea */
    margin: 0 10px;
}

nav ul li a {
    color: white; /* Texto en blanco */
    text-decoration: none;
    font-size: 1.2em;
    padding: 10px;
    transition: background 0.3s;
}

nav ul li a:hover {
    background: rgba(255, 255, 255, 0.2); /* Efecto al pasar el mouse */
    border-radius: 5px;
}

.nuevo-btn {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 15px;
    transition: background 0.3s ease;
    text-decoration: none;
}


.nuevo-btn:hover {
    background-color: #0056b3;
    color: orange;
    text-decoration: none;
}



/* Estilos para pantallas menores a 768px (dispositivos móviles) */
@media screen and (max-width: 1024px) {
    nav {
        top: 10px; /* Reduce la distancia desde la parte superior */
        right: 10px; /* Reduce la distancia desde la derecha */
        padding: 5px 10px; /* Reduce el tamaño del contenedor */
        border-radius: 5px; /* Reduce el redondeo del fondo */
    }

    nav ul li {
        margin: 0 5px; /* Reduce el espacio entre los elementos */
    }

    nav ul li a {
        font-size: 0.9em; /* Reduce el tamaño de la fuente */
        padding: 6px 8px; /* Reduce el padding interno */
    }
}


main {
    /*padding: 2rem;*/
      width: 90%;
	margin: auto;
}

section {
    margin-bottom: 3rem;
}

#inicio {
    text-align: center;
    max-width: 1200px; /* Ancho máximo para evitar que se extienda demasiado en pantallas muy grandes */
    margin: 0 auto; /* Centra horizontalmente */

}

#inicio .inicio-container {
    display: grid;
    grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    gap: 2rem;
    text-align: left; /* Alinea el texto a la izquierda */

}
#inicio .video-wrapper p:first-child { /* Selecciona el primer párrafo de cada contenedor */
    margin-bottom: 2rem; /* Ajusta el valor según el espacio que desees */
}

.video-wrapper a {
		 	text-decoration: none;
  			color: #333; 
		 }
.video-wrapper a:hover {
  text-decoration: none;
  color: #007bff;       /* Color */
  /* font-weight: bold;  Negrita */
}

.video-wrapper {
    display: flex; /* Activa Flexbox para cada contenedor de video */
    flex-direction: column; /* Apila el texto y el iframe en vertical */
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
	
}
.embed-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
	
}



/* Estilos para los videos */
.video-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los videos se ajusten en varias filas si es necesario */
    justify-content: center;
    gap: 1rem;

}

.video {
    width: 300px; /* Ajusta el ancho de los videos según tus necesidades */
    margin-bottom: 1rem;
}

.video img {
    width: 100%;
    height: auto;
}

#contacto .contacto-info p {
    margin-bottom: 0.1rem; /* Ajusta el valor según el espaciado deseado */
    margin-top: 0.1rem;
}

#contacto .contacto-info a {
		 	text-decoration: none;
  			color: #333; 
		 }
#contacto .contacto-info a:hover {
  text-decoration: none;
  color: #007bff;       /* Color */
  /* font-weight: bold;  Negrita */
}

/* Estilos para las redes sociales */
.social-icons {
    list-style: none;
    margin: 0;
    /*padding: 0;*/
    display: flex;
    justify-content: center;
}

.social-icons li {
    margin: 0 0.5rem;
}

.social-icons a {
    font-size: 1.5rem;
    color: #333;
    transition: color 0.3s ease; /* Agrega una transición suave al color */
}

.social-icons a:hover {
    color: #007bff; /* Cambia el color al pasar el mouse por encima */
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    /*padding: 1rem;*/
    width: 100%;
    min-height: 4rem;
    /*float: center;*/
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.nuevo-contenido {
    text-align: left; /* Alinea el texto a la izquierda */
    /*  margin-bottom: 1,5rem; Espacio inferior */
}

.nuevo-contenido .nuevo {
    color:#333; /* #007bff;  Color */
     font-weight: bold; /* Negrita */
}


.modal-content {
    display: flex; /* Activamos Flexbox */
    gap: 1rem; /* Espacio entre el iframe y la sinopsis */
}

.modal-video-container {
    flex: 1; /* El contenedor del video ocupa el espacio disponible */
}

.sinopsis {
    flex: 1; /* La sinopsis también ocupa el espacio disponible */
}

.modal-content .sinopsis {
    display: flex;
    flex-direction: column; /* Apila el contenido en vertical */
    justify-content: center; /* Centra verticalmente */
    text-align: justify;     /* Justifica el texto horizontalmente */
}

/* Media queries para diseño responsivo */
@media (max-width: 720px) 
{
   

    .video {
            width: 90%; /* Los videos ocupan todo el ancho en pantallas pequeñas */
           }
   #inicio {
            text-align: center;
            max-width: 95%; /* Ancho máximo para evitar que se extienda demasiado en pantallas muy grandes */
            margin: 0 auto; /* Centra horizontalmente */
           }
    .modal-content {
                    flex-direction: column; /* Apila el iframe y la sinopsis en vertical en pantallas pequeñas */
                   }
          
}

/* Media query para pantallas más grandes */
@media (min-width: 721px) {
    	#inicio .inicio-container {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas más grandes */
    }
}