/* HOJA DE ESTILOS CSS DIAGRAMACION */

* {
  box-sizing: border-box;
}

body {
  font-family: "Gloria Hallelujah", cursive;
  font-weight: 400;
  font-style: normal;
  color: #212122;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  margin: 0px;
  border:0;
  min-height: 100vh; /* FUENTE */
}



ol,ul{list-style:none}
a{text-decoration:none}


/* ESTILO DE LOS ENLACES MENU INDICE */
.breadcrumbs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:10px auto 0;padding:0 10px;font-size:16px;font-weight:700; color:#63A5DA; gap:20px 20px;max-width:1770px;display:flex;justify-content: center;align-items: center; padding-top:inherit; padding:10px} 
.breadcrumbs .link{position:relative;color: #CCC} /*COLOR TEXTO MENU INDICE */
.breadcrumbs .link:after{content:'/';position:relative;right:-5px;color:#727272} /*BARRA DIAGONAL */
.breadcrumbs .link:focus,.breadcrumbs .link:hover{color:#212122} /*COLOR TEXTO MENU INDICE HOVER */

/* ESTILO DE LOS ENLACES MENU IDIOMA */
.menuidioma{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap; margin:10px auto 0;padding:0 10px; font-size:16px; font-weight:700; color:#63A5DA; gap:20px 20px; max-width:1770px; padding-top:inherit; padding:10px; justify-content: right;} /* CENTRADO MENU IDIOMA*/
.menuidioma .link{position:relative;color: #CCC} /*COLOR TEXTO MENU IDIOMA */
.menuidioma .link:focus,.menuidioma .link:hover{color:#212122} /*COLOR TEXTO MENU IDIOMA OVER */


.bloque_menu {
    padding: 10px;
    border-radius: 8px;
    
}

.titulo_menu {
    font-size: 24px;
    margin-bottom: 	px;
    color: #FFFFFF;
}

.enlaces {
    list-style-type: none;
    padding: 0;
}

.enlaces li {
    margin-bottom: 0px;
}

.nav-link {
    text-decoration: none;
    color: #CCCCCC;
    font-size: 18px;
	font-weight: bold;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #000000;
}

/* COLOR DEL MENU ACTIVO*/
.active {
            font-weight: bold;
            color: red;
        }

/* BOTON OCULTO SCROLL REPOSO */
.scroll-to-top {
    display: none; /* Oculto por defecto */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #FFFFFF;
    color: #CCC;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
}


/* BOTON OCULTO SCROLL HOVER*/
.scroll-to-top:hover {
    background-color: #000000;
}

.footer_main-block_socials {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* BOTONES REDES SOCIALES*/
.socials {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center; /* Centra los iconos horizontalmente */
    gap: 20px; /* Espacio entre los iconos */
}

.socials li {
    display: inline-block;
}

.socials a {
    text-decoration: none;
    color: #CCC; /* Color inicial de los iconos */
    font-size: 24px; /* Tamaño de los iconos */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

.socials a:hover {
    color: #000000; /* Color al pasar el cursor sobre los iconos */
}

/* CLASES ICONOS */
.icon-instagram:before {
    content: "\e900"; /* Código del icono de Instagram */
}

.icon-tiktok:before {
    content: "\e901"; /* Código del icono de TikTok */
}

.icon-youtube:before {
    content: "\e902"; /* Código del icono de YouTube */
}

.icon {
	display: inline-block;
	color: #444444;
    width: 1em;
	height: 1em;
	fill: currentColor;
}
.icon-home {
  /* El uso de currentColor arriba nos permite usar `color` para cambiar el color de nuestros iconos: */
  color: white;
  
  /* El ancho y alto del SVG se establecieron previamente en 1em. Esto nos permite usar `font-size` para cambiar el tamaño de nuestro icono: */
  font-size: 24px;
}

/* Limpia los flotantes después de las columnas APLICADO A TODOS LOS DIVS*/
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* ESTILO DEL HEADER */
.header {
  background-color: #63A5DA;
  vertical-align: baseline;
  padding-top:5%;
  border: none; /* Eliminar borde */
}

/* ESTILO DEL LOGO SUPERIOR */
.logo {
  height: auto; /* ALTURA */
  width: 100%; /* Ancho de la imagen en porcentaje */
  border: none; /* Eliminar borde */
  padding: 0px;
  width: 80%;
  margin: auto;
  vertical-align: bottom;
}

.img-logo {
			width: 100%; /* Ancho de la imagen en porcentaje */
			height: auto; /* Altura automática para mantener la proporción */
			border: 0;
			position: sticky; /* Posición absoluta dentro del contenedor */
			top: 5vh; /* Posición superior del texto (ajustable) */
			left: 25%; /* Posición izquierda del texto (ajustable) */
			margin-bottom:-2px;
		}
		
.cont-logo {
            width: 100%; /* Ancho de la imagen en porcentaje */
            height: auto; /* Altura automática para mantener la proporción */
			border: none; /* Eliminar borde */
        }		

/* ESTILO DEL LOGO INFERIOR */
.logo_peque {
  padding: 0px;
  text-align: center;
  padding-bottom: 0px;
  width: 60%;
  margin: auto;
  vertical-align: bottom;
  align-items: center;
  height: auto; /* ALTURA */
  border: none; /* Eliminar borde */
}

/* ESTILO DEL FOOTER */
.content {
  background-color: #FFFFFF;
  margin: auto;
  padding: 10px;
  padding-left:10%;
  padding-right:10%;
  text-align: center;
  margin-top: inherit;
  margin-bottom: inherit;
}

/* IDIOMA */
.idioma {
  float: left;
  width: 100%;
  padding: 10px;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* IDIOMA */
.indice {
  float: left;
  width: 100%;
  padding: 10px;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* BANNER */
.banner {
  float: left;
  width: 100%;
  margin-bottom: 50px;
 
}

/* 1 COLUMNA Crea 1 columnas iguales que floten una al lado de la otra */


.column1 {
    flex: 1;
    min-width: 300px; /* Ajusta este valor según tus necesidades */
    box-sizing: border-box;
    padding: 25px;
	margin-top: 25px;
    margin-bottom: 25px;
}

/* 2 COLUMNAS IGUALES Crea 2 columnas iguales que floten una al lado de la otra */
.column2 {
  float: left;
  width: 50%;
  padding: 10px;
  margin-top: 25px;
  margin-bottom: 25px;
  height: 200px; /* ALTURA */
}

/* 3 COLUMNAS IGUALES Crea tres columnas iguales que floten una al lado de la otra COLUMNAS ORIGINALES */
.column3 {
  float: left;
  width: 33.33%;
  margin-top: 25px;
  margin-bottom: 25px;
  height: 200px; /* ALTURA */
}

/* 4 COLUMNAS IGUALES FOOTER Crea 2 columnas iguales que floten una al lado de la otra */
.column4 {
  float: left;
  width: 25%;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* COPYRIGHT */
.copyright {
  float: left;
  width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
  align-items: center;

}

.footer_year{font-size:16px; color:#FFF; font-weight: bold; display:flex;justify-content: center;align-items: center; padding-top:inherit} /*AÑO COPYRIGHT*/

/* ESTILO DEL FOOTER */
.footer {
  background-color: #63A5DA;
  padding-left:10%;
  padding-right:10%;
  text-align: center;
  border: none; /* Eliminar borde */
}

/* Diseño responsivo: hace que las columnas se apilen una encima de la otra en lugar de una al lado de la otra */
@media (max-width: 600px) {
  .column1, .column2, .column3, .column4, .idioma, .indice, .copyright, .banner {
    width: 100%;
  }
}

/* INICIO CODIGO CAPA TRANSPARENTE */
.image-container {position: relative;display: inline-block; width: 100%; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; pointer-events: none;}
.image-container img {display: block; width: 100%; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; pointer-events: none;}
.overlay {position: absolute;top: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0); -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; pointer-events: none;}/* Capa transparente */
/* FIN CODIGO CAPA TRANSPARENTE */

/* INICIO CODIGO PARRAFOS */

.titular {
	font-size:3vh;
}

.textblock {
    flex: 1;
    min-width: 300px; /* Ajusta este valor según tus necesidades */
    box-sizing: border-box;		
}

.span {
    display: flex;
    flex-wrap: wrap;
}

.parrafo_1 {
    flex: 1;
	font-size: 18px;
    min-width: 100px; /* Ajusta este valor según tus necesidades */
    box-sizing: border-box;
    padding: 25px;
}

/* Media query para dispositivos móviles */
@media (max-width: 600px) {
    .parrafo_1 {
        flex: 100%;
        min-width: 100%;
    }
}

/* FIN CODIGO PARRAFOS */



/* INICIO CONTENEDOR BANNER PRINCIPAL */
.contenedor-banner {
            position: relative;
			display: inline-block; 
			width: 100%; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; pointer-events: none;
        }

        .imagen {
            width: 100%; /* Ancho de la imagen en porcentaje */
            height: auto; /* Altura automática para mantener la proporción */
			border-radius: 30px;
        }

        .img-texto {
			position: absolute; /* Posición absoluta dentro del contenedor */
			top: 30%; /* Posición superior del texto (ajustable) */
			left: 50%; /* Posición izquierda del texto (ajustable) */
			width: 30%; /* Ancho de la imagen en porcentaje */
			height: auto; /* Altura automática para mantener la proporción */
		}
				
		.character1 {
            position: absolute; /* Posición absoluta dentro del contenedor */
            top: 0%; /* Posición superior del texto (ajustable) */
            left: 5%; /* Posición izquierda del texto (ajustable) */
			width: 31.3%; /* Ancho de la imagen en porcentaje */
            height: auto; /* Altura automática para mantener la proporción */
        }
		
		.character2 {
            position: absolute; /* Posición absoluta dentro del contenedor */
            top: 0%; /* Posición superior del texto (ajustable) */
            left: 5%; /* Posición izquierda del texto (ajustable) */
			width: 31.3%; /* Ancho de la imagen en porcentaje */
            height: auto; /* Altura automática para mantener la proporción */
        }
		
		.character3 {
            position: absolute; /* Posición absoluta dentro del contenedor */
            top: 0%; /* Posición superior del texto (ajustable) */
            left: 5%; /* Posición izquierda del texto (ajustable) */
			width: 31.3%; /* Ancho de la imagen en porcentaje */
            height: auto; /* Altura automática para mantener la proporción */
        }
		
		
		/* SLIDER */
			.swiper-container {
			width: 100%;
		    height:100%;
		}
		
		.swiper-wrapper {
			display: flex;
			align-items: center;
			width: 100%;
			height:100%;
		}
			
		.swiper-slide img {
			display: flex;
			width: 100%;
			border-radius: 30px;
			height:70%; /* TAMAÑO CONTENEDOR IMAGEN */
			object-fit: cover;
			max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
		}
		
		.swiper-slide {
			display:block;
			height:100%;
			text-align: center;
			font-size: 18px;
			background: #fff;
			justify-content: center;
			align-items: center;
			padding: 1px;
			margin: 0 5px; /* Espacio entre las imágenes */
			opacity: 0.1; /* Imágenes no activas más transparentes */
			transition: opacity 0.3s ease;
		}
		
		.swiper-slide-active {
			opacity: 1; /* Imagen activa completamente visible */
		}