/*html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
		border:0;
		font-size:100%;
		font:inherit;
		vertical-align:baseline;
		margin:0;
		padding:0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display:block;
}
body{
	line-height:1;
}
ol,ul{
	list-style:none;
}
blockquote,q {
	quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
*/
body {
    font-family: 'Open Sans', sans-serif;
	/*background: #050321;*/
	background: white;	
}

.section {
    clear: both;
    width: 100%;
    height: 900px;
    box-sizing: border-box;
    position: relative;
}
.section:nth-child(even) {
    color: #050321;
}
.section:nth-child(odd) {
    /*background: #220044;*/
	background: #050321;
    color: white;
}
#welcome {
	font-size: 2rem;
    height: 100px;
    margin: auto;
    display: block;
    width: fit-content;
}


/*------------- welcome---------------*/
#welcome {
	width: auto;
    max-width: max-content;
    z-index: 600;
    font-size: calc(20px + 1vh);
    font-weight: 700;
    line-height: 1em;
    position: absolute;
    top: calc(16px + 0.5vh);
    left: 0;
    right: 0;
    text-align: center;
    color: black;
	letter-spacing: 1.5vw;
}	
@media (max-width: 768px) {
    #welcome {
        font-size: 6vw;
    }
}



/*------------- sec_logo---------------*/
#sec_logo {
    text-align: center;
	height: 25vh;
	min-height:200px;
    background-color: white;
}
#logo {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: -102px;
	max-width:95%;
	margin:auto;
}
#logo img {
	width: auto;
    max-height: calc(150px + 2vh);
	position:relative;	
	z-index:600;
	max-width: 90%;
    margin: auto;
    display: block;
	animation: fadeIn 2s ease-in;
}
@media (max-width: 768px) {
    #logo {
		/*bottom: calc(35vh - (calc(80px + 40vh) / 2));*/
    }
}

/*------------- home---------------*/
#home {
	border-bottom: 15px solid #44c8f5;
	text-align: center;
	height: 40vh;
    background: white;
}
#home span {
	z-index: 11000;
	position: relative;
	color: white;
	font-size: calc(40px + 0.4vh + 0.4vw);
	top: 42%;
	letter-spacing: 1.5vw;
	text-shadow: 2px 2px 5px gray;
	font-weight:550;
}
@media (max-width: 768px) {
	#home span {
		font-size: calc(30px + 0.4vh + 0.4vw);
	}
}	
#home #vibes {
    position: absolute;
    top: calc(35vh - (454px / 2));
    left: 0;
    right: 0;
    text-align: center;
	animation: fadeIn 2s ease-in;
}
#vibes #rosa {
    font-size: calc(35px + 4vh + 2vw);
	font-weight: 100;
    line-height: 1em;
    position: absolute;
    top: 1vh;
    left: 0;
    right: 0;
    text-align: center;
    color: black;
    text-shadow: 5px 0px #f5accc;
}
#vibes #azul {
    font-size: calc(35px + 4vh + 2vw);
	font-weight: 100;
    line-height: 1em;
    position: absolute;
    top: 1vh;
    left: 0;
    right: 0;
    text-align: center;
    color: black;
    text-shadow: -5px 0px #26a9e0;
}
@media (max-width: 768px) {
    #vibes #rosa,
	#vibes #azul {
        /*font-size: 30vw;*/
    }
}
#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 65vh;
    width: 100%;
    object-fit: cover;
    z-index: 0;
}

/*--------------------------- Intro-----------------------*/

#intro {
	height:auto;
	/*background-color: #f6adcd;*/
	background-color: white;
	margin-bottom:5vh;
}
#intro .titulo {
	color: #26a9e0;
	display: block;
	margin: auto;
	font-size: calc(45px + 0.4vh + 0.4vw);
	line-height: 0.7em;
	padding-top: 6vh;
	font-weight: 700;
	padding-bottom: 0vh;
}
@media (max-width: 768px) {
	#intro .titulo {
		font-size: calc(35px + 0.4vh + 0.4vw);
	}
}	
#intro .subtitulo {
	color:#f5accc;
	font-weight: 700;
}
#intro .subsubtitulo {
	font-weight: 700;
}
#intro .titulo img {
    position: relative;
    left: -4vw;
}
#intro .highlight {
	font-weight: 700;
}	
#intro span {
	color: #101039;
    display: block;
    width: 90%;
    max-width: 1110px;
    margin: auto;
    font-size: calc(12px + 0.4vh + 0.4vw);
    line-height: 1.3em;
    padding-top: 3vh;
    font-weight: 400;
}
#intro li {
	display: list-item;
	color: #101039;
    width: 90%;
    max-width: 1110px;
    margin: auto;
    font-size: calc(10px + 0.4vh + 0.4vw);
    line-height: 1.3em;
    padding-top: 1vh;
    font-weight: 400;
}
#intro ul {
	list-style: disc;
	padding-left: 5vw;
}
.cenefa {
	width: auto!important;
	height: auto;
	position: relative;
	z-index: 600;
	max-width: 60px;
	margin: auto;
	display: block;
	margin-top: 4vh;
	padding-bottom: 4vh;
}

/*------------- sec_foto01---------------*/
#sec_foto01 {
    text-align: center;
	height: 50vh;
    background-color: white;
	margin-top:5vh;
	margin-bottom:0vh;
}

.foto01 .foto {
    object-fit: cover;
	width:100%;
	height:100%;
	height:45vh;	
}
.section .marca_agua {
	z-index:1000;
	position:absolute;
	bottom:0px;
	left:10%;
	padding-bottom: 5vh;
	max-width: 30vw;
}
#sec_foto01 span {
	height:5vh;	
	color: #101039;
    display: block;
    width: 90%;
    margin: 0px 0px 0px 10vw;
    font-size: calc(12px + 0.4vh + 0.4vw);
    line-height: 1.3em;
    font-weight: 700;
	position:relative;
	z-index:1001;
	text-align:left;
}

/*------------- sec_foto02---------------*/
#sec_foto02 {
    text-align: center;
	height: 50vh;
    background-color: white;
}

.foto02 .foto {
    object-fit: cover;
	width:100%;
	height:100%;
	height:45vh;	
}
.section .marca_agua {
	z-index:1000;
	position:absolute;
	bottom:0px;
	left:10%;
	padding-bottom: 5vh;
	max-width: 30vw;
}
#sec_foto02 span {
	height:5vh;	
	color: #101039;
    display: block;
    width: 90%;
    margin: 20px 0px 0px 10vw;
    font-size: calc(12px + 0.4vh + 0.4vw);
    line-height: 1.3em;
    font-weight: 700;
	position:relative;
	z-index:1001;
	text-align:left;
}

/*------------- sec_logo2---------------*/
#sec_logo2 {
    text-align: center;
    background-color: white;
	width: 100%;
	height: 40vh;
}
/*
#logo2 {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
	max-width:95%;
	margin:auto;
}
*/
#sec_logo2 img {
max-height: calc(150px + 20vh);
    z-index: 600;
    margin: auto;
    display: block;
    animation: fadeIn 2s ease-in;
    max-width: 400px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
}

@media (max-width: 768px) {
    #logo2 {
		/*bottom: calc(35vh - (calc(80px + 40vh) / 2));*/
		top:-76px;
    }
}





/*------------------------------------------------------------------------------------------*/
.comfortaa {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.mulish {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*----------------------- Pre-Footer -------------------------------*/
#pre_footer {
	height:5vh;
}
#pre_footer div {
    width: 100%;
    height: 200px;
    background-image: url(resources/mosaico_footer.png);
    background-repeat: repeat-x;
	background-size: contain;
	position:relative;
	top:-90px;
}
/*----------------------- Footer -------------------------------*/
footer {
    background-color: #101039;
    color: white;
    text-align: center;
    padding: 5em 0;
}

footer a {
    color: white;
    text-decoration: none;
}
footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
	margin:auto;
}

footer .box {
    flex: 1 1 30%;
    margin: 10px;
    padding: 20px;
    color: white;
    text-align: center;
    border-radius: 5px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    footer .box {
        flex: 1 1 100%;
    }
}
footer .container img {
	max-width:200px;
	width:50%;
}
footer .box.logo_andalucia img {
    max-width: 400px;
    width: 100%;
}

/* -----------------------------------------------------------------*/
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* -----------------------------------------------------------------*/

/* Estilos para la galería de imágenes */

/* Estilos del Modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 2000; /* Aparece por encima de todo */
    left: 0;
    top: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente */
	padding: 15px 0px 0px 0px;
}

/* Imagen dentro del Modal */
.modal-content {
    display: block;
    margin: auto;
    max-width: 95%; /* Limitar el tamaño de la imagen */
    max-height: 95%;
}

/* Cerrar el Modal (botón) */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

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