@charset "utf-8";
/***********************
		-	BASICS 	-
***********************/
/*************************************************************************************************/

.cabezal-general-angeo{
	position:relative;
	width:100%;
	height:80px;
margin:20px 0 0 0;
  display: block;     

}
.logo-cordis-cabezal{ margin:0 0 0 6%; position:relative;  display: block;   
	}
.logo-cordis-cabezal img{ width:100; height:auto;}
	
	#bot-home-angeo{
	position: absolute;
	z-index:30;
	padding-top: 3px;
	width: 102px;
	height: 16px;
	top: 5px;
	right:5px;
	transition: all .4s  ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}
#bot-home-angeo p  {
	font-family: 'source_sans_proregular';
	color:#fff;
	font-size:.8em;
	text-align:center;
	line-height:14px;
	margin-top:5px;
	letter-spacing:.2em;
}
#bot-home-angeo a {
	text-align:center;
}
#bot-home-angeo span {
	font-size:.8em; color:#999; text-align:center;
}

#bot-home-angeo:hover {
	opacity:.8;
}



/*/////////////////LAS IMAGENESGRANDES////////*/
.imagen-1-angeo{
	position:absolute;
	width:45%;
	top:-20px;
	right:-3px;
	z-index: 10;
	}
	.imagen-1-angeo img{
	width:100%;
	height:auto;
    display: block;
    }

.imagen-2-angeo{
	position:absolute;
	width:28%;
	top:-70px;
	left:5%;
	z-index: 10;
	}
	.imagen-2-angeo img{
	width:100%;
	height:auto;
    display: block;
	}

.imagen-3-angeo{
	position:absolute;
	width:43%;
	top:73%;
	right:10%;
	z-index: 10;
	}
	.imagen-3-angeo img{
	width:100%;
	height:auto;
    display: block;
	}
	
	.imagen-4-angeo{
	position:absolute;
	width:49%;
	z-index: 10;
	left:-10%;
	top:35%;
	}
	.imagen-4-angeo img{
	width:100%;
	height:auto;
    display: block;
	}
	
	
	.imagen-5-angeo{
	position:absolute;
	width:29%;
	z-index: 10;
	right:8%;
	top:-20%;
	}
	.imagen-5-angeo img{
	width:100%;
	height:auto;
    display: block;
	}
	
	.imagen-6-angeo{
	position:absolute;
	width:30%;
	z-index: 10;
	right:-10%;
	top:20%;
	}
	.imagen-6-angeo img{
	width:100%;
	height:auto;
    display: block;
	}
	
	

/*///////////////////////////////////////////////////*/
.cabezal-angeo{
	background-color:#a4c46f;
	position:relative;
	width:100%;
	height:330px;
margin:8px 0 28vh 0;
}
.cabezal-angeo li {
  width: 50%;         /* opcional */
  text-align: center; /* centra horizontal */
    font-family: 'source_sans_proregular';
	color: rgba(0,0,0,1);
	font-size:2.5em;
}

.cabezal-angeo li img {
    display: block;        /* para que respete el margin */
    margin: 0 auto;        /* centrado horizontal */
}

.cabezal-angeo ul {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente los li */
  height: 100%;            /* el ul ocupa todo el alto del contenedor */
  padding: 0;
  margin: 0;
  list-style: none;
}
.contenido-logo-angeo {
    width: 80%;          /* mismo ancho del logo */
    margin: 0 auto;      /* centrado horizontal */
	margin-top:1%;
}

.logo-angel {
   width: 20%;          /* ancho de la imagen */
    display: block;      
    margin-left: auto;   /* empuja la imagen a la derecha */
    margin-right: 0; 
}

/*****************************************************************************/
.conteiner-angeo{
	position:relative;
	margin:0 auto;
	width:90%;
	height:auto;
	}
	
/**********************************************************************/
.modulo-general { 
  margin: 0 auto; /* 20% del alto de la ventana */
	}
	.contenido-textos1{ 
width:51%;
margin:0 0 0 40%;
	}
	
.titulo-angeo{
		font-family: 'source_sans_prosemibold';
		color:#4f937e;
	font-size:2.2em;
		letter-spacing: -0.04em;
		line-height:1;
		text-align:left;
	}
	
	.descripcion-angeo{ 
		font-family: 'source_sans_proregular';
		color:#000;
	font-size:1.3em;
	letter-spacing: -0.01em;
	margin:2vh 0 5vh;
	text-align:left;
	
		}
		
/*/////////modulo 2////////////////*/
.modulo2y4 {
	position:relative;
	border-radius: 20px;
	}
.elmod2{width:85%; background-color:#a4c46f;  margin: 11vh auto 15vh;  padding:4%;}

.logo-angeo-2{ width:23%; margin:0 0 0 -5px; }
	
.subtitulo-angeo-2{
	font-family: 'source_sans_proregular';
	color: #222d10;
	font-size:2.6em;
	margin-top:-7px;
	}
	.subtitulo-angeo-3{
	font-family: 'source_sans_probold';
	color: #222d10;
	font-size:2em;
	margin-top:10px;
	}

.fila {
  display: flex;
  justify-content: space-between;
  gap: 6%;           /* separación entre cajas */
  margin:2vh 0 5vh;
}

.caja {
  flex: 1;           /* ancho automático y adaptable */
  text-align: center;
  box-sizing: border-box;
}

.contenido-caja {
 display: flex;
  width: 100%;
}

.texto-caja {
  width: 70%;
  text-align: left;
  font-family: 'source_sans_proregular';
  font-size:1.3em;
  color: #222d10;
    line-height: 1.2;  /* interlineado más pequeño (default ~1.5) */
}

.icono-caja {
  width: 22%;
    position: relative;
	 margin-left: auto;      /* empuja el bloque hacia la derecha */
	 opacity: 0.7;
}

	.icono-caja img {
		  position: absolute;
  right: 0;           /* pegado al borde derecho */
  width: 100%;
  height: auto;
}

/**************modulo 3******************************************************/

.contenidos-textos3 {
	position:relative;
	width:90%;
	margin:18vh auto;
	}
	
.placa{
	width:43%;
	text-align: left;
   font-family: 'source_sans_proregular';
   font-size:1.2em;
     display: flex;
	}

.p1 { margin-left:2% }
.p2 { margin:-2% 0 5% 45%}
.p3 { margin:5% 0 5% 50%}
.p4 { margin:5% 0 0 40% }

.icono2 {
  width: 32%;
}
.icono2 img {
  width: 100%;
  height: auto;
}

.texto-mod3 {
  width: 65%;
  margin-left: auto;  /* genera la “calle” automáticamente */
    display: flex;             /* convierte en contenedor flexible */
  align-items: center;
}
.texto-mod3 p {
  margin: 0;                 /* elimina márgenes por defecto */
}


/*////////////////---modulo 4--//////////*/


.elmod4{background-color:#FDF9CC; margin: 0 auto; padding:3%; width:90%; }
.descripcion-en-4 {width:60%}


.contenedor-mod-4 { 
    position:relative;
    height:auto;

 
display: flex; 
display: -webkit-flex;
display: -moz-flex; 

flex-wrap:wrap;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;

justify-content:space-between;
-webkit-justify-content:space-between;
-moz-justify-content:space-between;
}


.contenedor-mod-4 li{width: 22%; margin-top:2%; position:relative; text-align:center; 	}

.img-modulo{ width:45%; position:relative; margin:0 auto}
.img-modulo img{ position:relative; width: 100%;  height: auto; }

.titulo-modulo { 
text-align: center;
   font-family: 'source_sans_probold';
   font-size:1.2em;
   line-height:1;
   }

.linea-modulo{
	position:relative;
  width: 75%;         
  height: 3px;        
  background-color:#e7bb5f;
  margin:7px auto;
}
.desarrollo-modulo{
	font-family: 'source_sans_proregular';
   font-size:1em;
   text-align: center;
   line-height:1.2;
   margin:0;
   }




.final-angeo{
		position: relative;
	width: 100%;
	margin:50px 0 30px;
	height:100px;

  display: flex;
  justify-content: space-around; 
  align-items: center;
	}

.final-angeo img{
    width: 15%;
  height: auto;
}


/*///////////////*/

#footer-angeo{
	position: relative;
	width: 100%;
	height:100px;
}


/*////////////////////responsive/////////////////*/


@media screen and (max-width: 768px) {
	
#bot-home-angeo{
	position: relative;
	margin-left: auto;   
  margin-right: 0;
  margin-top:-10px;
}
	
	html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; 
    box-sizing: border-box; 
}
*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/*/////////////////*/

.cabezal-general-angeo {
  display: flex;           /* convierte en contenedor flexible */
  justify-content: center; /* centra horizontalmente todo lo que está dentro */
  align-items: center;     /* centra verticalmente */
  width: 100%;
  height: 80px;
}

 .logo-cordis-cabezal {
width: 100%;  
margin-top:20px;
  }
   .logo-cordis-cabezal img {
width: 80%;  

  }


.imagen-1-angeo,
.imagen-2-angeo,
 .imagen-3-angeo,
.imagen-4-angeo,
 .imagen-5-angeo,
  .imagen-6-angeo{
    position: relative;
    width: 70%;
    margin: 20px auto;
    top: 0;
    left: 0;
    right: 0;
  }
.imagen-1-angeo img,   .imagen-2-angeo img,   .imagen-3-angeo img,   .imagen-4-angeo img,   .imagen-5-angeo img {width:70%; margin:0 auto}
.imagen-3-angeo img {width:100%;}


 
.cabezal-angeo{height:330px; margin:10px 0; width:100%;    border: 0;}
.cabezal-angeo li {width: 100%;margin:0 auto;font-size:2.3em; line-height:1}
.logo-angel { position:relative; width: 35%; display: block;}
.contenido-logo-angeo {width: 80%; margin: 0 auto;}
.contenido-logo-angeo p,.contenido-logo-angeo img {display: block;margin: 10px auto;text-align: center;}

/*///////////modulo1/////////*/
	
.contenido-textos1{width:100%; padding: 0 10px; margin:50px auto;position:relative; display:block}
.contenido-textos1 p{ margin:20px auto; position:relative; display:block}
.titulo-angeo{ height:auto; margin:50px 0; font-size:2.2em;line-height:1; position:relative; display:block}	
.descripcion-angeo{margin:30px 0; font-size:1.6em;}

/*  //////////////////modulo2//////////////*/

 /* Modulos de fondo se llevan al 100% y sin border radius */
  .elmod2,
  .elmod4 {
    width: 100%;
    border-radius: 0;
    margin: 10px 0;
    padding: 5%;
  }

.conteiner-angeo{width:100%;}
.elmod2 {width:100%; margin:0;}
.logo-angeo-2{ width:80%; margin:0 auto; }
.subtitulo-angeo-2{font-size:2em;line-height:1;}
.subtitulo-angeo-3{font-size:2em; margin-top:10px;}
.texto-caja { font-size:1.7em;line-height: 1;  }

  
  .icono-caja {
    width: 20%;
	position:relative;
  }

  .icono-caja img {
	  position:relative;
	  width:30%;
    height: auto;
    right: auto;
  }
  
  

  /* Filas de cajas se encolumnan */
  .fila {
	  width:100%;
    flex-direction: column;
    align-items: center;
    gap: 0;
	margin:20px auto;
  }

  .caja {
    width: 90%;
   margin:20px auto;
  }

  .contenido-caja {
    flex-direction: column;
    align-items: center;
  }

  .texto-caja {
    width: 100%;
    text-align: center;
  }

  .icono-caja {
    width: 50%;
    margin: 10px auto 0 auto;
    position: relative;
  }

  .icono-caja img {
    position: relative;
    width: 100%;
    height: auto;
    right: auto;
  }


/*///////modulo3/////////////*/


  .placa {
    flex-direction: column;
    width: 90%;
    margin: 20px auto;
    align-items: center;
    text-align: center;
	font-size:1.3em;
  }

 .texto-mod3 {
    width: 100%;
    margin: 10px auto;
    text-align: center;
  }

  .placa .texto-mod3 p {
    margin: 0 auto;
  }

.placa{
   font-size:1.6em;
	}

.icono2 {
  width: 45%;
}


/*///////////////////////modulo4////////////////*/

  .elmod4 {
    margin: 10px 0;
    padding-left: 5%;  padding-right: 5%;
  }

  /* Modulo 4: li se apilan, imágenes más chicas */
  .contenedor-mod-4 {
    flex-direction: column;
    align-items: center;
	margin:0 
  }

  .contenedor-mod-4 li {
    width: 100%;
    margin: 15px auto;
  }

  .img-modulo {
    width: 50%;
    margin: 0 auto 10px auto;
  }


  /* Titulos y descripciones centrados */
  .titulo-modulo,
  .desarrollo-modulo,
  .titulo-angeo,
  .descripcion-angeo,
  .subtitulo-angeo-2,
  .subtitulo-angeo-3 {
    text-align: center;
    margin: 5px auto;
  }
  
  
.titulo-angeo{ width:100%;}
  .descripcion-en-4{ width:100%;}
  
  
  
  
  .titulo-modulo { 
   font-size:1.8em;
   }

.linea-modulo{
	
  width: 90%;         
 
}
.desarrollo-modulo{
	
   font-size:1.8em;
   text-align: center;
   line-height:1.2;

   }
  
  .final-angeo{
	margin:30px 0 -20px;
	height:70px;
	}

 .final-angeo img{
	 width:30%
	}

#footer-angeo{
	position: relative;
	width: 100%;
	height:100px;
}








}


/* ------------------ MOVILES ------------------ */
@media screen and (max-width: 480px) {




.imagen-1-angeo,
  .imagen-2-angeo,
  .imagen-3-angeo,
  .imagen-4-angeo,
  .imagen-5-angeo,
  .imagen-6-angeo {
    width: 90%;
  }

  .contenido-textos1,
  .contenidos-textos3 {
    width: 95%;
  }

  .fila {
    flex-direction: column;
    gap: 3vh;
  }

  .caja {
    width: 100%;
    margin-bottom: 15px;
  }

  .contenido-caja {
    flex-direction: column;
  }





  .texto-caja,
  .icono-caja {
    width: 100%;
    text-align: center;
  }

  .icono-caja img {
    width: 50%;
    margin: 10px auto 0 auto;
  }

  .contenedor-mod-4 li {
    width: 100%;
    margin-top: 15px;
  }

  .img-modulo {
    width: 60%;
  }

.titulo-modulo,
  .desarrollo-modulo {
    font-size: 1.5em;
  }

}