body {
  margin: 0; 
  font-family: "Outfit", sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
 
}
body, ul, li {
    margin: 0;
    padding: 0;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background-color: #023e8a;
  height: auto;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 20px; 
  color: white;
}

.header-top .logo img {
    max-height: 70px; /* Ajusta este valor según necesites */
    margin-right: 20px;
    object-fit: contain;
}
.header-top .logo img:hover {
max-height: 180px;
    margin-right: 20px;
    object-fit: contain;
  
}

.header-top .titulo h1 {
  margin: 0;
  font-size: 2.25em;
  color: #ffffff;
  font-weight: light !important;
  /*text-shadow: 3px 2px 2px #0077b6; */
}

header nav.botones {
  display: flex;
  margin-left: 1px;
  padding: 2px 2px;
}

header nav.botones a {
  color: white;
  text-decoration: none;
  margin-left: 15px;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
  font-size: 0.9em;
}

header nav.botones a:hover {
  border-color: lightblue;
  /*border: 1px solid ; */
  background-color: #149813;
  transition: all .5s;
    transform: rotate(-3deg) scale(1.1);
    box-shadow: 0px 3px 5px rgba(0,0,0,.4);
  
}
nav-menu{
    font-family: "Boldonse", sans-serif;
}
h3 {
  text-shadow: 2px 2px 3px #023e8a;
}
.video-background {
  position: fixed; /* El video se mantiene fijo como fondo */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Coloca el video detrás de otros elementos */
  overflow: hidden; /* Evita que el video sobresalga de los límites */
}

.video-background video {
  position: absolute;
  top: 50%; /* Centra el video verticalmente */
  left: 50%; /* Centra el video horizontalmente */
  transform: translate(-50%, -50%); /* Asegura el centrado perfecto */
  min-width: 100%; /* Asegura que cubra todo el ancho */
  min-height: 100%; /* Asegura que cubra todo el alto */
  width: auto;
  height: auto;
  object-fit: cover; /* Recorta el video para ajustarlo al contenedor */
  z-index: -1; /* Mantén el video en el fondo */
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Ajusta la opacidad y el color */
}
.video-container {
  position: fixed; /* Fija el video en la pantalla */
  bottom: 10%; /* Ajusta la posición desde la parte inferior */
  right: 5%; /* Ajusta la posición desde la derecha */
  width: 300px; /* Tamaño ajustable */
  height: 170px; /* Tamaño ajustable */
  z-index: 10; /* Mantiene el video encima de otros elementos */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Añade un estilo moderno */
  border-radius: 10px; /* Bordes redondeados */
}

video {
  width: 100%; /* Asegura que el video sea responsivo */
  height: auto;
  object-fit: contain;
}


nav.main-nav {
	font-family: "Archivo", sans-serif;
    display: flex;
    overflow-x: auto; /* Permite el scroll horizontal */
    white-space: nowrap; /* Evita que los elementos se envuelvan */
    padding: 0px 5px;
    background-color: #0077b6;
}

nav.main-nav a {
font-family: "Archivo", sans-serif;
    margin-right: 15px;
    color: white;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}


nav.main-nav a:hover {
  border-color: white;
}

/* ESTA SECCION DEFINE LA ANCHURA DEL CONTENIDO
	ENTRE OTRAS QUE LA IMAGEN OCUPE TODO EL ANCHO DE PANTALLA */

main {
	/*width: 100%;*/
  padding-top: 120px;   /Mejor valor 120 hasta ahora */
  padding-bottom: 150px;
  padding-left: 0px; /* 20 a 0 */
  padding-right: 0px;
}

.navbar {
    background-color: #3498db; /* Azul */
    color: #ecf0f1; /* Blanco suave */
}

.navbar .container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 10px;
}

.nav-menu {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-item {
    margin: 0 15px;
}

.nav-item a {
    color: #ecf0f1;
    text-decoration: none;
    padding: 5px 5px;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-size: 16px;
}

.nav-item a:hover {
    background-color: #2980b9; /* Azul más oscuro al pasar el mouse */
}

.nav-item.active a {
    background-color: #023e8a; /* Color para el ítem activo */
}

.has-submenu {
    position: relative;
}

.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    position: fixed;
    background-color: #3498db;
    display: none;
    width: 200px;
    border-radius: 0px;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
    z-index: 1;
}

.has-submenu:hover .submenu {
    display: block;
}

.submenu li a {
    display: block;
    padding: 10px 15px;
    color: #ecf0f1;
    text-decoration: none;
}

.submenu li a:hover {
    background-color: #2980b9;
}
.contenido-principal,
.otra-seccion {

    width: 100%;
    margin-bottom: 30px;
}

.contenido-interno {
    max-width: 960px; /* Ancho máximo para pantallas anchas */
    margin: 0 auto; /* Centra el contenido en pantallas anchas */
    
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
  padding: 20px ;
  border-radius: 10px;
}

p {
    line-height: 1.6; /* Mejora la legibilidad del texto */
    margin-bottom: 10px;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto; /* Centra imágenes y videos */
}
.informacion-adicional {
    background-color: #023e8a; /* Mismo color que el footer */
    color: white;
    text-align: center;
    padding: 20px 0; /* Ajusta el relleno según necesites */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    
}
.columna-izquierda {
    width: 60%; /* Ancho de la columna izquierda */
    text-align: center; /* Centramos el contenido */
}

.columna-derecha {
    width: 40%; /* Ancho de la columna derecha */
}

.columna-izquierda img {
    width: 50px; /* Ajusta el ancho de las imágenes */
    height: 50px; /* Ajusta la altura de las imágenes */
    margin: 5px; /* Espacio entre las imágenes */
    display: inline-block; /* Muestra las imágenes en línea */
    border-radius: 50%; /* Hace que las imágenes sean redondas */
    object-fit: cover; /* Ajusta la imagen al contenedor */
    }
  
.imagen-adicional {
    width: 200px;
    height: auto;
    margin-top: 10px;
    display: block;
    object-fit: contain; /* Mantiene la relación de aspecto */
    border-radius: 10px; /* Aplica bordes redondeados */
}
.columna-izquierda a img.imagen-adicional { /* Estilos para la imagen adicional dentro de un enlace */
    width: 200px;
    height: auto;
    margin-top: 10px auto 0;
    display: inline-block;
    object-fit: contain; /* Mantiene la relación de aspecto */
    border-radius: 10px; /* Aplica bordes redondeados */
    text-align: center;
}
.columna-izquierda a img { /* Estilos para las imágenes redondas dentro de los enlaces */
    width: 50px;
    height: 50px;
    margin: 5px;
    display: inline-block;
    border-radius: 50%;
    object-fit: cover;
}


.informacion-adicional a {
    color: white; /* Color de los enlaces */
    margin: 0 10px; /* Espacio entre los enlaces */
    text-decoration: none; /* Elimina el subrayado */
}
footer {
    background-color: #023e8a;
    color: white;
    text-align: center;
    padding: 2px 0; /* Añade padding vertical */
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.8em; /*Disminuye el tamaño de la fuente*/
}



.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #ecf0f1;
    margin: 3px 0;
}

/* Formato de la galería de imágenes */

.gallery {
	margin: 0px ;
	padding: 0;
	box-sizing: border-box;
    width: 100%;  /*Ancho del contenedor (puedes ajustarlo) */
    max-width: none; /*Ancho máximo del contenedor */
    max-height: 550px;
     /* Centra el contenedor horizontalmente */
    position: relative;
    overflow: hidden; /* Oculta el contenido que se desborda */;
}

.slides {
    width: 100%;
    /* height: 100%;    valor modificado */
    display: flex;
    transition: transform 3s ease-in-out;
}

.slide {
    min-width: 100%; /* Cada slide ocupa el ancho completo */
    position: relative; /* Necesario para el posicionamiento absoluto de los botones */
    /* height: 100%; valor modificado*/
    /* overflow: hidden; valor modificado */
}

.slide img {
    width: 100%;
    height: 80%;
    object-fit: cover; /* Ajusta la imagen al contenedor */
    object-position: center;
     display: block; 
    margin: 0 auto;
}


.controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.control {
    width: 20px;
    height: 20px;
    background-color: rgba(0, 125, 255, 0.5);
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

/* Estilos para el slide activo (puedes personalizarlos) */
#slide1:target ~ .controls a:nth-child(1),
#slide2:target ~ .controls a:nth-child(2),
#slide3:target ~ .controls a:nth-child(3),
#slide4:target ~ .controls a:nth-child(4),
#slide5:target ~ .controls a:nth-child(5),
#slide6:target ~ .controls a:nth-child(6) {
    background-color: white;
}

/* Transición automática (simulada con animaciones CSS) */
.slides {
    animation: autoplay 18s infinite; /* 3 segundos por slide x 4 slides */
}

@keyframes autoplay {
    0%, 16.66% { transform: translateX(0); } /* Imagen 1 */
    18%, 33.32% { transform: translateX(-100%); } /* Imagen 2 */
    35%, 49.98% { transform: translateX(-200%); } /* Imagen 3 */
    51%, 66.64% { transform: translateX(-300%); } /* Imagen 4 */
    68%, 83.3% { transform: translateX(-400%); } /* Imagen 5 */
    85%, 100% { transform: translateX(-500%); } /* Imagen 6 */
}
@media (max-width: 1200px) and (min-width: 769px) {
    .header-top {
        padding: 1px 5px;
    }

    .header-top .titulo h1 {
        font-size: 1.2em;
    }
}
/* cambio para pantallas medianas */
/* @media only screen and (max-width: 900px) {
	.nav-menu {
	    
	    display: flex;
	   
	    
	}
	    .nav-item a {
	    
	    font-size: 14px;
	    
	}
  

	.header-top .titulo h1 {
	  margin: 0;
	  font-size: 1.5em; 
	  color: #efefef; 
	  
	}
} */
@media (max-width: 768px) {
    

    .navbar .container {
        flex-direction: row; /* Cambiado a row */
        justify-content: flex-start; /* Alinea a la izquierda */
        align-items: flex-start;
        position: relative; /* Añadido para posicionar el menú */
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute; /* Posiciona el menú absolutamente */
        top: 100%; /* Coloca el menú debajo del botón hamburguesa */
        left: 0; /* Alinea a la izquierda */
        width: 200px; /* Ajusta el ancho según necesites */
        background-color: #3498db;
        z-index: 10;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-item {
        margin: 0;
    }

    .nav-item a {
        padding: 10px;
        display: block;
        color: #ecf0f1; /* Color agregado en el último cambio */
    }

    .has-submenu {
        position: relative;
    }

    .submenu {
    		/* TODO ESTE BLOQUE HA CAMBIADO */
        position: absolute;
        top: 0;
        left: 100%; /* Coloca el submenú al frente del menú principal */
        width: 200px; /* Ajusta el ancho según necesites */
        background-color: #2980b9;
        display: none;
        z-index: 1;
    }

    .has-submenu.active .submenu {
        display: block;
    }

    .submenu li a {
        color: #ecf0f1;  /* ANTERIORMENTE EL COLOR ESTABA EN #000 */
        display: block;
        padding: 10px;
    }

    .hamburger {
    			/* TODO ESTE BLOQUE HA CAMBIADO */
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }
    	
    .bar {
        width: 25px;
        height: 3px;
        background-color: #ecf0f1;
        margin: 3px 0;
    }

    .header-top {
        padding: 1px 1px;
    }

    .header-top .logo img {
        max-height: 60px !important;
        margin-right: 10px;
    }

    
     .header-top .titulo h1 {
        font-size: 16px;
        text-align: center,
        margin-left: 1px;
    }
    .header-top .botones a {
        font-size: 12px;
        padding: 0px 1px;
        margin-left: 1px; 
    }
    
main {
	/*width: 100%;*/
  padding-top: 125px;   /Mejor valor 120 hasta ahora */
  padding-bottom: 60px;
  padding-left: 0px; /* 20 a 0 */
  padding-right: 0px;
}
    .gallery {
        width: 100%;
    }

    .control {
        width: 10px;
        height: 10px;
    }
    .contenido-interno {
        max-width: 100%; /* ancho en pantallas pequeñas */
        padding: 5px;
    }
}