@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
		
 * { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --max-width: 1440px;
    --red-line: 3px solid #FF0000; /* Línea roja para submenús */
}
body {font-family: "Montserrat", sans-serif;}


header {
	
	
	 z-index: 9999; /* Valor alto para que esté siempre por encima */

    /* PROPIEDADES AÑADIDAS/MODIFICADAS PARA STICKY */
    position: sticky; /* Hacemos el menú sticky */
    top: 0; /* Se pegará en la parte superior del viewport */
}



.logotopmovil {
	display: none;
}



/* Estilos generales de la barra de navegación */
.navbar {
    background-color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    justify-content: center; /* Centra el contenido para el ancho máximo */
	position: relative; /* Asegura que z-index funcione */
    z-index: 9999; /* Valor alto para que esté siempre por encima */
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    width: 100%; /* Asegura que ocupe todo el ancho disponible hasta el max-width */
    padding: 0 20px; /* Espaciado interno para evitar que el contenido toque los bordes */
    height: 100px; /* Altura fija para la barra de navegación */
}

.navbar-logo {
    color: #333;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.navbar-logo img {
    margin-right: 10px;
}

/* Menú principal */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-links {
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
	font-weight: bold;
	font-size:12px;
	transition: color 0.3s ease;
}

.nav-links:hover {
    color: #DF2127; /* Color al pasar el ratón */
}

/* Icono de flecha para submenús */
.arrow {
    border: solid #333;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown .nav-links:hover .arrow.down {
    transform: rotate(45deg);
}

.arrow.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* Submenú desplegable */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FFFFFF;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    list-style: none;
    padding: 0;
    min-width: 220px; /* Ancho mínimo para los submenús */
    z-index: 10000; /* Asegura que el submenú esté por encima de la barra principal y otros elementos */
    border-top: 5px solid #DF2127;
	
}

.dropdown-item {
    position: relative;
}

.dropdown-menu li {
    border-bottom: 1px solid #eee; /* Separador entre elementos del submenú */
}

.dropdown-menu li:last-child {
    border-bottom: none; /* Eliminar el borde inferior del último elemento */
}

.dropdown-link {
    color: #333;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
	font-size: 12px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-link:hover {
    background-color: #f1f1f1;
    color: #DF2127;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block; /* Muestra el submenú al pasar el ratón */
}

/* Menú hamburguesa (oculto por defecto en desktop) */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #333;
    transition: all 0.3s ease-in-out;
}

.inicio {

    background-image: url(../rs/inicio.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
	background-attachment: fixed;
    height: 800px;
} 




.excelencia {
	background-image: url(../rs/ambitos.webp);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 100px 50px 100px 50px;
}
.excelencia h3 {color: #ffffff;text-align: center;font-size: 30px;margin-bottom: 50px}

.excelencia .ambitos {display: none;}     

.pilares {
    margin-bottom: 100px;
    margin-top: 0px;
	padding: 100px 30px 100px 30px;
    background-image: url("../rs/fondo-pilares.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


.pilares article {
	
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}


.pilares article h1 {
	font-size: 38px;
	color: #DF2127;
	margin-bottom: 50px;
	
	
}

.pilares article p {
	
		font-size: 22px;
	line-height: 30px;
}

.pilares article h2 {font-size: 28px; text-align: center; font-weight: 800px;margin-bottom: 50px;padding-top:50px;}



.pilares article ul { display: none;
}


		
.resumen {
			
			background-color: white;width: 100%; max-width: 1200px; margin: auto;
	}
		


.resumen .presentacion {
	
	padding: 20px;
	margin-bottom: 100px;
	overflow: hidden;
	margin-top: 100px;
	
	
}

.resumen .dleft {
	
	float: left; height: 450px; width: 48%; background-image: url(../rs/quien-somos.webp); background-repeat: no-repeat; background-position: center center; background-size: cover;
}

.resumen .dright {
	
	float: right;width: 48%;
}


.resumen .dright h1 {margin-bottom: 20px;}

.resumen .dright p {font-size: 18px; line-height: 30px;}

.imgsvg {
		
			 width: 100%; max-width: 1440px;
			display: block;
			margin-right: auto;
			margin-left: auto;
		
			
		}

.letras .img50 {
		
			 width: 100%;
	max-width: 1440px;
			display: block;
			margin-right: auto;
			margin-left: auto;
	margin-top: 50px;
	margin-bottom: 50px;
		
		
			
		}
.imagecenter {
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
	
}
		
       
        .slider-container { width: 100%; max-width: 1440px; margin: auto; overflow: hidden; position: relative;padding-top: 100px; padding-bottom: 50px;}
        .slider-wrapper { display: flex; transition: transform 0.5s ease-in-out;z-index: 100; }
        .slide { flex: 0 0 33.33%; padding: 20px; }
        .slide img { width: 100%; height: auto; border-radius: 10px; }
        .slide h3 { margin: 10px 0; }
        .slide p { font-size: 14px; }
        .slide a { display: block; margin-top: 10px; text-decoration: none; color: blue; font-weight: bold; }
        .slider-controls { position: absolute; top: 10px; right: 10px; display: flex; gap: 10px; }
        .slider-controls button { 
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background-color: #ccc;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
			z-index: 2;
        }
        .slider-controls button:hover {
            background-color: #999;
        }

.site-footer {
    padding: 40px 50px; /* Espaciado interno */
    background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: -moz-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: -o-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);

}

.footer-container {
    display: flex; /* Activa Flexbox */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
    max-width: 1440px; /* Ancho máximo del contenido del footer */
    margin: 0 auto; /* Centra el contenedor */
    background-image: url(../rs/fondo-pie-flor.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 60%;
}

.footer-column {
  padding: 0 50px; /* Espaciado entre columnas */
  box-sizing: border-box; /* Incluye el padding en el ancho del elemento */
}

/* Clases para definir los anchos de las columnas en pantallas grandes */
.footer-column.col-1 {
  flex: 1 1 45%; /* flex-grow, flex-shrink, flex-basis */
  max-width: 45%;
}

.footer-column.col-2 {
  flex: 1 1 30%;
  max-width: 30%;
}

.footer-column.col-3 {
  flex: 1 1 25%;
  max-width: 25%;
}

.texto14 {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
	color: #000000;
}		

.textodireccion {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
	color: #000000;
}	

.pielogo img {
	width: 450px;
	padding-bottom: 25px;
}


a:link, a:active, a:visited, a:focus {
	
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	
}

a:hover{
	
	color:#DF2127;
	font-weight: bold;
}



.ico-tel {
    font-size: 25px;
    font-weight: 300;
    color: #000000;
    background-image: url(../rs/ico-tel.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 35px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.ico-email {
    font-size: 25px;
    font-weight: 300;
    color: #000000;
    background-image: url(../rs/ico-mail.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.newsletter {
	font-size: 18px;
	line-height: 25px;
	font-weight: normal;
	color: #000000;
	margin-top: 25px;
	margin-bottom: 25px;
	
}
.formcamponews {
    padding: 20px;
    border: 3px solid #707070;
	width: 95%;
}

.btnews {
	
	padding: 20px;
	background-color:#707070;
	width: 90%;
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
}
.btnews:hover {
	
	  padding: 20px;
	background-color:#000000;
	width: 90%;
}
.texto10 {
	font-weight: normal;
	font-size: 12px;
	line-height: 15px;
	color: #000000;
}
.menupie:link, .menupie:active, .menupie:visited, .menupie:focus {	
	font-weight: bold;
	font-size: 16px;
	padding: 10px;
	display: block;
	height: 35px;
	width: 200px;	
}
.menupie:hover {
    border-bottom: 5px solid #DF2127;
}
.submenupie:link, .submenupie:active, .submenupie:visited, .submenupie:focus {
    font-weight: normal;
    font-size: 16px;
    padding: 10px;
    display: block;
    height: 35px;
}
.submenupie:hover {
    font-size: 16px;
	font-weight: bold;
	color: #DF2127;
}

.footer-column .ulpiemenu {
    list-style-type: none;	
}

.footer-column .ulpiemenu ul {
	list-style-type: none;
	padding-left: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.redes img {
	margin-left: 10px;
	margin-top: 50px;
}
.footer-bottom .linea-logos-usce img {	
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: 50px;
	width: 65%;
	max-width: 900px;	
}
.footer-bottom .linea-logos-eu img {
	margin-bottom:15px;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	display: block;
	max-width: 1200px;
}
.leftform {
	float: left; width: 60%
}
.righform {
	float: right;width: 35%
}

.textoayuda {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
	color: #000000;
	text-align: center;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}	
	 
.excelencia .ambitos h4 {
	
	color: #f5a991;
	font-size: 2em;
}


.lineasinvestigacion {
    padding: 100px 50px 100px 50px;
    margin: 0px auto 0px auto;
    overflow: hidden;
    background-image: url(../rs/fondo-lineas.png);
    background-repeat: no-repeat;
    background-position: right top;
    max-width: 1440px;
    background-size: auto 30%;
}

.lineasinvestigacion h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 35px;
    border-bottom: 1px solid #CCCCCC;
	padding-left: 20px;
}

.lineasinvestigacion .container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
    justify-content: center; /* Centra los elementos horizontalmente */
    padding: 20px;
    gap: 20px; /* Espacio entre los elementos */
	margin-top: 200px;
}

.lineasinvestigacion .item {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
            flex-basis: calc(50% - 20px); /* Aproximadamente la mitad del contenedor menos el gap */
        max-width: calc(50% - 20px);
    align-items: center; /* Centra el contenido verticalmente */
}

.lineasinvestigacion .item .icon {
    /* Estilos para el contenedor del icono */
    width: 120px;
    height: 120px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px; /* Tamaño de ejemplo para el icono */
    color: #fff; /* Color de ejemplo para el icono */
    /* Aquí iría tu icono real, ya sea una imagen de fondo, un elemento <i> de una librería, etc. */
}

.lineasinvestigacion .item .text {
    font-size: 20px; /* Tamaño de fuente relativo */
	font-weight: bold;
    color: #000000;

}


.spacer {
	margin: 50px 0px 50px 0px;
	overflow: hidden;
}

.lineasinvestigacion .btninfo {
    width: 350px;
    padding: 20px 20px 20px 60px;
    margin: 0px auto 0px auto;
	display: block;
    background-image: url(../rs/ico-boton-mas-info.png);
    background-repeat: no-repeat;
    background-position: 15px center;
  	background-color: #666666;
    border: 4px solid #CCCCCC;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    border-radius: 30px;
	cursor: pointer;
}

.lineasinvestigacion .btninfo:hover {

    background-color: #DF2127;
    border: 4px solid #CCCCCC;

}
.pilares-item {
    list-style: none; /* Opcional: remueve los puntos de la lista */
    padding: 0; /* Opcional: remueve el padding por defecto */
    margin: 20px 0; /* Espacio arriba y abajo de la lista */

    display: flex; /* Habilita Flexbox en el contenedor ul */
    flex-wrap: wrap; /* Permite que los elementos li pasen a la siguiente línea */
    gap: 20px; /* Espacio entre los elementos li */
}

/* Estilos para los elementos de la lista li */
.pilares-item  li {
   
    padding: 15px;
 
    box-sizing: border-box; /* Incluye padding y borde en el tamaño del elemento */
    text-align: center; /* Centra el texto */

    /* Por defecto (mobile first), cada elemento ocupa todo el ancho */
    flex-basis: 100%;
    max-width: 100%;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 25px;
}

.pilares-item  li img {
	
	width: 40%; margin-left: auto; margin-right: auto;display: block;margin-bottom: 25px;
	
}

.eventos {
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 100px 30px 100px 30px;
    background-image: url("../rs/fondo-eventos.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* Asegúrate de que esta sección o sus padres no tengan un ancho fijo que limite el contenido */
    width: 100%;
    box-sizing: border-box; /* Incluye padding en el cálculo del width */
}

/* Estilos para el artículo que centra el contenido */
.eventos article {
    max-width: 1440px; /* Ancho máximo del contenido en pantallas grandes */
    margin-left: auto; /* Centra el artículo */
    margin-right: auto; /* Centra el artículo */
    /* padding: 0 15px;  Opcional: un pequeño padding lateral para que el contenido no toque los bordes en pantallas un poco más pequeñas que el max-width */
}

.eventos article h1 {
    font-size: 38px;
    color: #666666;
    margin-bottom: 50px;
    text-align: center;
}

/* Estilos para el contenedor de cada evento (donde están left y right) */
.eventos article .evento {
    display: flex; /* Habilita Flexbox para layout horizontal por defecto */
    align-items: stretch; /* Asegura que los elementos hijos tengan la misma altura */
    margin-bottom: 20px; /* Espacio entre diferentes bloques de evento */
    /* gap: 20px;  Opcional: si quieres espacio entre left y right en desktop */
    /* Asegura que el contenedor del evento también ocupe el 100% del ancho de su padre (el article) */
    width: 100%;
    
}

/* Estilos para el bloque de la izquierda (contenido de texto) */
.eventos article .evento .left {
    width: 48%; /* Ancho en pantallas grandes */
    /* Si usaste gap en el padre, ajusta este width a calc(50% - gap/2) */
    padding: 50px; /* Ajustaremos este padding en la Media Query para móvil */
    background-color: #333333;
    color: #ffffff;
    line-height: 30px;
    box-sizing: border-box; /* Incluye padding y borde en el tamaño */
    border-left: 4px solid #CCCCCC;
    border-top: 4px solid #CCCCCC;
    border-bottom: 4px solid #CCCCCC;
}

.eventos article .evento .left h3 {
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 25px;
}

.eventos article .evento .left p {
    font-size: 14px;
    line-height: 25px;
    padding: 15px; /* Este padding interno del párrafo también puede requerir ajuste en móvil */
}


/* Estilos para el bloque de la derecha (imagen de fondo) */
.eventos article .evento .right {
    width: 48%; /* Ancho en pantallas grandes */
    /* Si usaste gap en el padre, ajusta este width a calc(50% - gap/2) */
    padding: 8px; /* Padding dentro del bloque de imagen */
    background-image: url("../up/curso-verano.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box; /* Incluye padding y borde en el tamaño */
    /* Añadimos un min-height también para desktop si la imagen debe verse aunque no haya mucho contenido en .left */
    min-height: 250px;
    border-top: 4px solid #CCCCCC;
    border-right: 4px solid #CCCCCC;
    border-bottom: 4px solid #CCCCCC;
	background-color: #ffffff;
}

.eventos article .evento .right2 {
    width: 48%; /* Ancho en pantallas grandes */
    /* Si usaste gap en el padre, ajusta este width a calc(50% - gap/2) */
    padding: 8px; /* Padding dentro del bloque de imagen */
    background-image: url("../up/evento01.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box; /* Incluye padding y borde en el tamaño */
    /* Añadimos un min-height también para desktop si la imagen debe verse aunque no haya mucho contenido en .left */
    min-height: 250px;
    border-top: 4px solid #CCCCCC;
    border-right: 4px solid #CCCCCC;
    border-bottom: 4px solid #CCCCCC;
    background-color: #ffffff;
}




.btnevento:link, .btnevento:active, .btnevento:visited, .btnevento:focus {
    font-weight: bold;
    font-size: 20px;
    padding: 30px;
    display: block;
    height: 35px;
    width: 250px;
    background-image: url(../rs/ico-flecha.svg);
 
	background-position: 90% 25px;
    background-repeat: no-repeat;
    margin-right: 60px;
    float: right;
    color: #ffffff;
    letter-spacing: 4px;
}
.btnevento:hover {
     background-position: right 25px;
   color: #999999;
}

.otroseventos {
    margin-top: 40px; /* Espacio arriba, ajusta según necesites para separar del evento destacado */
    margin-bottom: 40px; /* Espacio abajo */
    padding: 0 20px; /* Padding lateral para que la lista no toque los bordes en pantallas pequeñas */
    /* Ya está dentro de .eventos article con max-width y auto margins, lo cual lo centra */
}

/* Estilos para la lista (ul) */
.otroseventos ul {
    list-style: none; /* Remueve los puntos de la lista */
    padding: 0; /* Remueve el padding por defecto */
    margin: 0; /* Remueve el margin por defecto */

    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que los elementos li pasen a la siguiente línea */
    gap: 20px; /* Espacio entre los elementos li (horizontal y vertical) */
    align-items: stretch; /* Asegura que los elementos li tengan la misma altura */
	color: #ffffff;
}

/* Estilos para cada elemento de la lista (li) */
.otroseventos ul li {
 
    padding: 15px;
    border-radius: 8px;
    box-sizing: border-box; /* Incluye padding y borde en el tamaño */
    text-align: center; /* Centra el contenido */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* **Estilos por defecto (Mobile First): 1 columna** */
       flex-basis: calc(33.33% - 20px); /* 33.33% menos el gap. Ajusta si usas un gap diferente */
        max-width: calc(33.33% - 20px); /* Asegura que no crezcan más allá */

    display: flex; /* Habilita Flexbox dentro del li para organizar su contenido */
    flex-direction: column; /* Apila el contenido (título, imagen, enlace) */
    align-items: center; /* Centra el contenido horizontalmente dentro del li */
    justify-content: space-between; /* Distribuye el espacio verticalmente dentro del li si es necesario */
}

/* Estilos para la imagen dentro del li */

.otroseventos ul li h4 {
   font-size: 18px;
	line-height: 30px;
	text-align: left;
	height: 80px;
}

.otroseventos ul li img {
    max-width: 100%; /* La imagen no excederá el ancho del li */
    max-height: 200px; /* Mantiene la proporción de la imagen */
    margin-bottom: 10px; /* Espacio entre la imagen y el enlace/texto siguiente */
    border-radius: 4px; /* Bordes redondeados para la imagen */
}




/* Estilos para el enlace "Más información" */
.otroseventos ul li a {
    display: inline-block; /* Permite aplicar padding/margin y transformaciones */
    margin-top: auto; /* Empuja el enlace hacia abajo */
    color: #ffffff; /* Color del enlace, ajusta según tu diseño */
    text-decoration: none; /* Remueve el subrayado del enlace */
    padding-top: 10px;
    padding-right: 60px;
    padding-left: 10px;
    padding-bottom: 10px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave al pasar el ratón */
    background-image: url(../rs/ico-flecha-der.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 15px;
}

.otroseventos ul li a:hover {
    background-color: #666666;
    color: #cccccc;
}


 .eventos article .evento .left .cuando {
	color: #999999; padding-left:20px;
}

.imgpresentacion {
	margin-bottom: 15px;
	text-align: center;
}

.imgpresentacionrela {
	margin-bottom: 15px;
	text-align: center;
	position: relative;
}

.imgpresentacionrela img {
	max-width: 100%;
	height: auto;
	
}
.imgpresentacionrela .cajabs  {
	position: absolute;top:100px;right: 10%;
}

.imgpresentacionrela .cajabs h2  {
	font-size: 30px;
	font-weight: 300;
	text-align: center;
	line-height: 40px;
	color: #333333;
}

.imgpresentacionrela .cajabs img {
	width: 420px;
}

.imgpresentacionrela2 {
	margin-bottom: 15px;
	text-align: center;
	position: relative;
}






.imgpresentacionrela2 .cajabs  {
	position: absolute;top:50px;right: 10%;
	width: 480px;
}

.imgpresentacionrela2 .cajabs h2  {
	font-size: 30px;
	font-weight: 300;
	text-align: center;
	line-height: 40px;
	color: #666666;
	margin-top: 25px;
	padding-top: 25px;
}

.imgpresentacionrela2 .cajabs hr {
    height: 10px;
    width: 50%;
    background-color: #cccccc;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 25px;
   
}

.imgpresentacionrela2 .cajabs img {
	max-width: 100%;
}

.imgpresentacionrela2 img {
	max-width: 100%;
	height: auto;
	
}




.imgpresentacion img {
	max-width: 100%;
	height: auto;
	
}

.infopage {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	margin-bottom: 100px;
	
}




.infopage article {
		
	margin-left: auto; margin-right: auto; width:70%
}


.infopage article  h1 {
	
	
	font-size: 60px;margin-top: 75px; margin-bottom: 75px;
}


.infopage article p {
	
	
	font-size: 18px;line-height: 25px;font-weight: normal;
}


.infopage article .obtex {
	
	
	font-size: 18px;line-height: 25px;font-weight: normal;
	
	width: 50%;
	
}


.intro {
    background-image: url(../rs/fondo-quienes-somos.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	padding-top: 100px;
	padding-bottom: 100px;
}


.intro article {
	
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;

}


.intro article .seccioninfo {
    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que los elementos .item pasen a la siguiente línea */
    gap: 20px; /* Espacio entre los elementos .item (horizontal y vertical) */
    justify-content: center; /* Centra los items si no llenan completamente la fila */
    align-items: flex-start; /* Alinea los items al inicio del eje cruzado (arriba). Si quieres que tengan la misma altura, usa 'stretch'. */
    /* align-items: stretch; */ /* Usa este si quieres que las "cajas" .item tengan la misma altura */

    margin-top: 40px; /* Espacio arriba de esta sección, ajusta si es necesario */
    margin-bottom: 40px; /* Espacio abajo de esta sección, ajusta si es necesario */
    padding: 0 20px; /* Añade un padding lateral para que no toque los bordes en pantallas pequeñas */
    /* Si el article padre ya tiene padding, este padding podría ser redundante o necesitar ajuste */
}

/* Estilos para cada elemento individual (Flex Item) */
.intro article .seccioninfo .item {
    /* Estilos básicos de apariencia */
   
    padding: 20px;
    border-radius: 8px;
   
    text-align: center; /* Centra el contenido (la imagen) horizontalmente */
    box-sizing: border-box; /* Incluye padding y borde en el cálculo del tamaño */

    /* **Estilos por defecto (Mobile First): 1 columna** */
    /* En pantallas pequeñas, cada item ocupa todo el ancho */
       flex-basis: calc(33.33% - 13.33px); /* Aproximadamente un tercio menos el espacio del gap */
        max-width: calc(33.33% - 13.33px); /* Asegura que no crezca más allá */
    

    display: flex; /* Habilita Flexbox dentro del item para organizar su contenido */
    flex-direction: column; /* Apila el contenido (solo la imagen en este caso) */
    align-items: center; /* Centra la imagen verticalmente dentro del item */
}

/* Estilos para la imagen dentro del item */
.intro article .seccioninfo .item img {
    max-width: 80%; /* La imagen no excederá el ancho del item */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Ayuda a centrar si el item es más ancho que la imagen */
    margin: 0 auto; /* Centra la imagen */
}





.conoequipo {

	padding-top: 100px;
	padding-bottom: 100px;
}


.conoequipo  article {
	
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;

}


.conoequipo  article h2 {
    font-weight: bold;
    font-size: 35px;
    text-align: center;
    color: #666666;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 25px;
    padding-bottom: 25px;
}


.conoequipo  article .seccioninfo {
    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que los elementos .item pasen a la siguiente línea */
    gap: 20px; /* Espacio entre los elementos .item (horizontal y vertical) */
    justify-content: center; /* Centra los items si no llenan completamente la fila */
    align-items: flex-start; /* Alinea los items al inicio del eje cruzado (arriba). Si quieres que tengan la misma altura, usa 'stretch'. */
    /* align-items: stretch; */ /* Usa este si quieres que las "cajas" .item tengan la misma altura */

    margin-top: 40px; /* Espacio arriba de esta sección, ajusta si es necesario */
    margin-bottom: 40px; /* Espacio abajo de esta sección, ajusta si es necesario */
    padding: 0 20px; /* Añade un padding lateral para que no toque los bordes en pantallas pequeñas */
    /* Si el article padre ya tiene padding, este padding podría ser redundante o necesitar ajuste */
}

/* Estilos para cada elemento individual (Flex Item) */
.conoequipo  article .seccioninfo .item {
    /* Estilos básicos de apariencia */
   
    padding: 20px;
    border-radius: 8px;
   
    text-align: center; /* Centra el contenido (la imagen) horizontalmente */
    box-sizing: border-box; /* Incluye padding y borde en el cálculo del tamaño */

    /* **Estilos por defecto (Mobile First): 1 columna** */
    /* En pantallas pequeñas, cada item ocupa todo el ancho */
      flex-basis: calc(50% - 15px); /* 15px es la mitad de tu gap de 30px */
    max-width: calc(50% - 15px);
    flex-grow: 1; /* Permite que las columnas crezcan si hay espacio */
    

    display: flex; /* Habilita Flexbox dentro del item para organizar su contenido */
    flex-direction: column; /* Apila el contenido (solo la imagen en este caso) */
    align-items: center; /* Centra la imagen verticalmente dentro del item */
}

/* Estilos para la imagen dentro del item */
.conoequipo  article .seccioninfo .item img {
    max-width: 100%; /* La imagen no excederá el ancho del item */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Ayuda a centrar si el item es más ancho que la imagen */
    margin: 0 auto; /* Centra la imagen */
}

.conoequipo  article .seccioninfo .item h3 {
	
	font-size: 25px;
	margin-top: 15px;
	height: 50px;
	
}


.infopage .naveinfo {
	
	font-size: 14px;
	font-weight: normal;
	color:#666666;
	margin-bottom: 15px;
	padding-left: 25px;
	
} 

.infopage .naveinfo {
	
	font-size: 14px;
	font-weight: normal;
	color:#666666;
	text-decoration: none;
	
} 


.root:link, .root:active, .root:visited, .root:focus {
	
	font-size: 14px;
	font-weight: normal;
	color:#666666;
	text-decoration: none;
	
}

.root:hover {
	
	color:#000000;
	font-weight: bold;
	text-decoration: none;
	
}


.rootlink:link, .rootlink:active, .rootlink:visited, .rootlink:focus {
	
	font-size: 14px;
	font-weight: bold;
	color:#666666;
	text-decoration: none;
	
}

.rootlink:hover {
	
	color:#DF2127;
	text-decoration: none;
	
}

.pieequipo {
	max-width: 75%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.infopage article .left {
	
	float: left;
	width: 48%;

}

.infopage article .right {
	
	float: right;
	width: 48%;
	
	font-size: 18px;line-height: 25px;font-weight: normal;

}

.infopage article .left .ulpilares {
    list-style-type: none;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.infopage article .left .ulpilares li {
    list-style-type: none;
    margin-bottom: 100px;
}

.infopage article .left .ulpilares li h2 {
    background-image: url(../rs/ico-pilar.svg);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 145px;
	height: 112px;

    /* Añadido para alinear el texto abajo */
    display: flex;
    align-items: flex-end; /* Alinea el contenido (el texto) a la parte inferior */
    box-sizing: border-box; /* Asegura que el padding se incluya dentro de la altura definida */
	font-size: 25px;
	font-weight: 600;
	color: #666666;
}

.infopage article .left .ulpilares li p {
	margin-top: 20px;
	color: #666666;
	font-size: 18px;
	line-height: 25px;
	
	
}

.fondopifun {
    background-image: url(../rs/fondo-pilares2.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.equipocaja {
  margin: 20px auto; /* Centra el contenedor y añade margen */
  max-width: 900px; /* Ancho máximo para pantallas grandes */
  padding: 0 15px; /* Añade algo de padding en los lados en móviles */
}

/* Estilos para cada item (perfil de persona) */
.item {
  display: flex; /* <-- Crucial para Flexbox */
  flex-direction: row; /* Por defecto, los elementos se ponen en fila (para pantallas grandes) */
  gap: 30px; /* Añade espacio entre la imagen y el contenido */
  margin-bottom: 40px; /* Espacio entre cada item (si hay varios) */
  align-items: flex-start; /* Alinea los elementos al principio (arriba) */
  border: 1px solid #eee; /* Ejemplo: Borde ligero alrededor de cada item */
  padding: 20px; /* Espacio interno */
  border-radius: 8px; /* Bordes redondeados */
  background-color: #fff; /* Fondo blanco */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra ligera */
}

/* Estilos para el contenedor de la imagen */
.item-imagen {
  /* En pantallas grandes, ocupa ~30% del espacio */
  flex-basis: 30%; /* <-- Crucial para el ancho en fila */
  /* Evita que la imagen se encoja menos de su base */
  flex-shrink: 0;
  /* Permite que ocupe el ancho completo en móviles (ajustado en media query) */
  width: 100%;
  max-width: 150px; /* Ancho máximo para la imagen en desktop */
  margin: 0 auto; /* Centra la imagen si el contenedor es más grande (en desktop si max-width aplica) */
}

/* Asegura que la imagen dentro de .item-imagen sea responsive */
.item-imagen img {
  display: block; /* Elimina el espacio extra debajo de la imagen */
  max-width: 100%; /* <-- Crucial: La imagen nunca superará el ancho de su contenedor padre */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 4px; /* Bordes redondeados para la imagen */
  object-fit: cover; /* Recorta la imagen si es necesario para llenar el contenedor */
  aspect-ratio: 1 / 1; /* Opcional: Intenta mantener una proporción cuadrada */
}


/* Estilos para el contenedor del contenido (texto) */
.item-contenido {
  /* En pantallas grandes, ocupa el espacio restante (~65%) */
  flex-basis: 65%; /* <-- Crucial para el ancho en fila */
  /* Permite que el contenido crezca para llenar el espacio */
  flex-grow: 1;
  /* Permite que ocupe el ancho completo en móviles (ajustado en media query) */
  width: 100%;
}




.infopage article .right .ambitosactuacion {
	
	font-size: 30px;
	font-weight: 300;
	color:#333333;
	text-align: left;
	margin-top: 50px;
	margin-bottom: 50px;
}

.infopage article .cita {
	
	font-size: 25px; width: 628px;line-height: 30px; font-weight: bold;margin-left: auto; margin-right: auto;color: #333333;
	
}


.infopage article .right .ambitoitem {
    font-size: 18px;
    color: #000000;
    list-style-type: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.infopage article .right .ambitoitem .am01 {
    background-image: url(../rs/ico-ambitos01.svg);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 90px;
    background-size: auto 65px;
	margin-bottom: 50px;
	color: #000000;
}

.infopage article .right .ambitoitem .am02 {
background-image: url(../rs/ico-ambitos03.svg);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 90px;
    background-size: auto 65px;
	margin-bottom: 50px;
	color: #000000;
	
}

.infopage article .right .ambitoitem .am03 {
	background-image: url(../rs/ico-ambitos02.svg);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 90px;
    background-size: auto 65px;
	margin-bottom: 50px;
	color: #000000;

	
}

.infopage article .right .ambitoitem .am04 {
background-image: url(../rs/ico-ambitos04.svg);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 90px;
    background-size: auto 65px;
	margin-bottom: 50px;
	color: #000000;
}

.infopage .article .left .imgtrans {
	
}

.fondodegradado {
    background-image: url("../rs/img-investigacion-transferencia.webp");
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size:45%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}




.lineasinvestigacion2 {
   padding: 50px 20px; /* Ajustado para ser más responsivo en los laterales */
    margin: 0 auto; /* Centra el bloque */
    overflow: hidden;
    background-image: url(../rs/fondo-trans-elementos.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
	
	
.lineasinvestigacion2 .container2 {
      display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que los items pasen a la siguiente línea en pantallas pequeñas */
    justify-content: center; /* Centra los items horizontalmente cuando hay menos de 2 por fila */
    padding: 0; /* Quitamos el padding aquí para mejor control con el gap */
    gap: 40px 20px; /* Espacio entre filas (40px) y entre columnas (20px) */
    margin-top: 50px; /* Ajustado, 150px puede ser mucho espacio */
    max-width: 1200px; /* Ancho máximo del contenedor, ajusta si es necesario */
    margin-left: auto;
    margin-right: auto;
}

	  
	  
	  
 .lineasinvestigacion2 .container2  .item2 {
       display: flex; /* Habilita Flexbox dentro del item para alinear icono y texto */
    align-items: flex-start; /* Alinea los items al inicio (arriba) */
    flex-direction: row; /* Icono y texto en la misma fila por defecto */
    /* Para 2 columnas en pantallas grandes */
    flex-basis: calc(50% - 10px); /* Aproximadamente la mitad del contenedor menos la mitad del gap horizontal */
    max-width: calc(50% - 10px);
    box-sizing: border-box; /* Incluye padding y borde en el tamaño total */
    }
	  

.lineasinvestigacion2 h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 35px;
    border-bottom: 1px solid #CCCCCC;
	padding-left: 20px;
}

.lineasinvestigacion2 .item2 .icon {
    /* Estilos para el contenedor del icono */
    width: 120px;
    height: 120px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px; /* Tamaño de ejemplo para el icono */
    color: #fff; /* Color de ejemplo para el icono */
    /* Aquí iría tu icono real, ya sea una imagen de fondo, un elemento <i> de una librería, etc. */
}

.lineasinvestigacion2 .item2 .text {
    font-size: 18px; /* Tamaño de fuente relativo */
	font-weight: normal;
    color: #000000;
	padding-left: 30px;
	padding-top: 15px;

}

.infopage article .icoformcion {
    width: 300px;
	color: #666666;
	font-size: 25px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background-image: url(../rs/ico-formacions.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 25px;
}

.infopage article .citaformacion {
	font-size: 25px;
	line-height: 35px;
	font-weight: 300;
	color: #333333;
	text-align: left;
	padding: 0px;
	margin-bottom: 50px;
	
}

/* Contenedor principal de las noticias */
.infopage article .noticias-grid {
    display: grid;
    gap: 30px; /* Espacio entre las noticias */
    padding: 20px 0; /* Padding vertical, ya que el padding horizontal lo manejamos en .infopage article */
	grid-template-columns: repeat(2, 1fr);
}

/* Estilos para cada item de noticia */
.infopage article .noticia-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.infopage article .fotonoticia {
    width: 100%;
    height: 400px; /* Altura fija para la imagen, ajusta si es necesario */
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.infopage article .fotonoticia img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    display: block;
}

.infopage article .titulo-noticia {
    padding: 15px;
}

.infopage article .titulo-noticia h2 {
    font-size: 1.3em;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.3;
}

.infopage article .resumen-noticia {
    padding: 0 15px 15px 15px;
    flex-grow: 1; /* Permite que el resumen ocupe el espacio restante */
}

.infopage article .resumen-noticia p {
    font-size: 1em;
    color: #666;
    line-height: 1.5;
    margin-bottom: 0;
}

.infopage article .noticia-item hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px;
}

.infopage article .botonleermas {
    padding: 15px;
    text-align: right;
}

.infopage article .btn-read-more {
    display: inline-block;
    padding: 8px 15px;
    background-color: #666666; /* Usando el color de tu marca que ya tienes definido */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-size: 0.95em;
}

.infopage article .btn-read-more:hover {
    background-color: #000000; /* Color al pasar el ratón, puedes ajustar a tu gusto */
}









.infopage article .contactopanel {
    display: flex; /* Habilita el flexbox para las columnas */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
    gap: 20px; /* Espacio entre las columnas */
    justify-content: center; /* Centra las columnas horizontalmente */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
    margin-top: 30px; /* Un poco de margen superior para separar del párrafo */
    margin-bottom: 50px; /* Margen inferior */
}

/* Estilos base para las columnas de contacto */
  .contactopanel .correos {
        flex: 0 0 calc(25% - 20px); /* 25% menos el gap */
        max-width: calc(25% - 20px);
    }

    .contactopanel .formulariocontacto {
        flex: 0 0 calc(50% - 20px); /* 50% menos el gap */
        max-width: calc(50% - 20px);
    }

    .contactopanel .direccioncontacto {
        flex: 0 0 calc(25% - 20px); /* 25% menos el gap */
        max-width: calc(25% - 20px);
    }
.infopage article .contactopanel .correos img,
.infopage article .contactopanel .formulariocontacto img,
.infopage article .contactopanel .direccioncontacto img {
    max-width: 60px; /* Ajusta el tamaño de los iconos */
    height: auto;
    margin-bottom: 15px; /* Espacio debajo del icono */
}

.infopage article .contactopanel .correos h5,
.infopage article .contactopanel .direccioncontacto h5 {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
	margin-top: 10px;
}

.infopage article .contactopanel .correos p,
.infopage article .contactopanel .direccioncontacto p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.5;
}

/* Estilos específicos para el formulario de contacto */
.formulariocontacto form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre los grupos de formulario */
    text-align: left; /* Alinea el texto del formulario a la izquierda */
}

.formulariocontacto .form-group {
    margin-bottom: 10px; /* Espacio entre cada grupo de label/input */
}

.formulariocontacto label {
    display: block; /* Asegura que la etiqueta esté en su propia línea */
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 0.9em;
}

.formulariocontacto input[type="text"],
.formulariocontacto input[type="email"],
.formulariocontacto input[type="tel"],
.formulariocontacto textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box; /* Esencial para que el padding no afecte el ancho total */
}

.formulariocontacto textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
    min-height: 100px;
}

.formulariocontacto .checkbox-group {
    display: flex;
    align-items: flex-start; /* Alinea el checkbox en la parte superior con el texto */
    gap: 8px; /* Espacio entre el checkbox y el label */
    font-size: 0.85em;
    color: #555;
    margin-top: 10px;
}

.formulariocontacto .checkbox-group input[type="checkbox"] {
    margin-top: 3px; /* Pequeño ajuste para alinear el checkbox */
    flex-shrink: 0; /* Evita que el checkbox se encoja */
}

.formulariocontacto .checkbox-group a {
    color: #666666; /* Color para los enlaces */
    text-decoration: none;
}

.formulariocontacto .checkbox-group a:hover {
    text-decoration: underline;
}

.formulariocontacto button[type="submit"] {
    background-color: #666666; /* Color de botón azul */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius:20px;
    cursor: pointer;
    font-size: 1.1em;
    margin-top: 20px;
    transition: background-color 0.3s ease;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}

.formulariocontacto button[type="submit"]:hover {
    background-color: #000000;
}

/* Ajustes adicionales para la dirección */
.direccioncontacto h5 {
    margin-top: 15px; /* Espacio superior para el título de la dirección */
}
.equipocaja .item .item-contenido h4 {
	
	font-size: 30px;
	font-weight: bold;
	margin-top: 35px;
}



.textocontaco {
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	margin-top: 25px;
}

.logostop {
      background-image: url("../rs/logos-top.svg");
    background-color: #E2E2E2;
    height: 60px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-position: 35% center;
    background-size: auto 30px;
}

.logostop .usccitus {
	
	max-height: 30px;

	
	
}

.video-container {
    position: relative;
    width: 100%;
    /* Modificado para una proporción 16:9 */
    padding-bottom: 56.25%; /* (9 / 16) * 100 para mantener la proporción de 16:9 */
    height: auto;
    overflow: hidden;

}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto es importante para asegurar que el video cubra todo el espacio sin distorsionarse, recortando si es necesario. */
}


/* Estilos del Pop-up */
.popup-overlay {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden; /* Oculto por defecto */
  opacity: 0; /* Oculto por defecto */
  transition: visibility 0s, opacity 0.3s ease-in-out;
	
}

.popup-overlay.active {
  visibility: visible;
  opacity: 1;
}

.popup-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 90%; /* Ajuste para responsividad */
  width: 500px;
  position: relative;
  transform: scale(0.9); /* Pequeña escala para el efecto */
  transition: transform 0.3s ease-in-out;
	 /* Valor alto para que esté siempre por encima */
}

.popup-overlay.active .popup-content {
  transform: scale(1); /* Vuelve a la escala normal al activarse */
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 28px;
  cursor: pointer;
  color: #333;
}

.close-button:hover {
  color: #f00;
}

.popup-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 20px;
}

.popup-content h2 {
  font-size: 2em;
  color: #333;
  margin-bottom: 15px;
}

.popup-content p {
  font-size: 1.1em;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

.popup-button {
    display: inline-block;
    background-color: #DF2127; /* Un color azul para el botón */
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.popup-button:hover {
  background-color: #666666; /* Un azul más oscuro al pasar el ratón */
	color: #ffffff;
	
}

.pass {
    padding: 20px;
    text-align: center;
    border: 10px solid #C8E8C9;
    font-weight: 300;
    font-size: 20px;
	margin-top: 50px;
	margin-bottom: 50px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}













  @media (max-width: 1024px) { 
	  
.nav-menu {
        display: none; /* Oculta el menú principal por defecto en pantallas pequeñas */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 150px; /* Debajo de la barra de navegación */
        left: 0;
        background-color: #FFFFFF;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        border-top: var(--red-line);
        z-index: 9998; /* Asegura que el menú móvil esté por encima de la página */
    }

    .nav-menu.active {
        display: flex; /* Muestra el menú cuando está activo */
    }

    .nav-item {
        text-align: center;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-item:last-child {
        border-bottom: none;
    }

    .dropdown-menu {
        position: static; /* Cambia a posición estática para que se despliegue dentro del flujo del menú */
        width: 100%;
        box-shadow: none; /* Eliminar sombra duplicada */
        border-top: none; /* La línea roja ya está en el menú principal */
    }

    .dropdown-menu li {
        text-align: center;
    }

    .dropdown-link {
        padding-left: 40px; /* Indentación para elementos del submenú */
    }

    .hamburger-menu {
        display: block; /* Muestra el icono de hamburguesa */
    }

    /* Animación del icono de hamburguesa */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
	  
	  
.contactopanel {
        flex-direction: column; /* Apila las columnas verticalmente */
        align-items: center; /* Centra las columnas apiladas */
        padding: 0 15px; /* Pequeño padding horizontal en pantallas pequeñas */
    }

    .contactopanel .correos,
    .contactopanel .formulariocontacto,
    .contactopanel .direccioncontacto {
        flex: 0 0 100%; /* Ocupa el 100% del ancho */
        max-width: 90%; /* Un poco menos del 100% para evitar que toque los bordes */
        margin-bottom: 20px; /* Espacio entre los elementos apilados */
        padding: 20px; /* Ajusta el padding para móviles */
    }

    .contactopanel .formulariocontacto {
        order: 2; /* Para que el formulario aparezca en medio en móviles */
    }
    .contactopanel .correos {
        order: 1;
    }
    .contactopanel .direccioncontacto {
        order: 3;
    }

.slide { flex: 0 0 50%; }

.inicio {
	background-image: url(../rs/inicio.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;height:500px;
}

.resumen .presentacion {
	padding: 20px;
	margin-top: 25px;
	margin-bottom: 25px;
	overflow: hidden;	
}

.slider-container { width: 100%; max-width: 1440px; margin: auto; overflow: hidden; position: relative;padding-top: 100px; padding-bottom: 0px;}

.slide {		
	flex: 0 0 100%; }			
 .col-1, .col-2, .col-3 {
	flex: 0 0 100%;
    }
.resumen .dleft {
	display: none;
}

.resumen .dright {
	float: none;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
	.pilares {
	
	margin-bottom: 100px;
	padding: 35px;
	
}	
			
	.excelencia {
	
	margin-bottom: 0px;

	
}

.site-footer {
    padding: 40px 50px; /* Espaciado interno */
    background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: -moz-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: -o-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);

}
.footer-container {
    flex-direction: column; /* Apila las columnas en pantallas pequeñas */
    width: 100%; /* Asegura que el contenedor Flex ocupe el 100% */
    max-width: 100%; /* Elimina la restricción de ancho máximo de escritorio */
    margin: 0; /* Elimina el margen auto en móvil si el contenedor debe ocupar todo el ancho */
	 background-image: url(../rs/fondo-pie-flor.png);
    background-repeat: no-repeat;
    background-position: right 75%;
    background-size: auto 30%;
}		

		
.footer-column {
    flex: 1 1 100%; /* Cada columna ocupa el 100% del espacio disponible */
    max-width: 100%; /* Asegura que no se restrinja el ancho máximo */
    margin-bottom: 50px; /* Espacio entre columnas apiladas */
    padding: 0 10px; /* **Mantén o ajusta el padding horizontal si es necesario** */
    /* Si quieres que el contenido llegue más a los bordes (considerando solo el padding del .site-footer), puedes poner: */
    /* padding: 0; */
  }
/* Clases para definir los anchos de las columnas en pantallas grandes */
.footer-column.col-1 {
  flex: 1 1 100%; /* flex-grow, flex-shrink, flex-basis */
  max-width: 100%;
}

.footer-column.col-2 {
  flex: 1 1 100%;
  max-width: 100%;
}

.footer-column.col-3 {
  flex: 1 1 100%;
  max-width: 100%;
}			


.pielogo img {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding-bottom: 25px;
}
.textodireccion {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
	color: #000000;
	text-align: center;
}	
	  
	  
.ico-tel {
    font-size: 25px;
    font-weight: 300;
    color: #000000;
    background-image: url(../rs/ico-tel.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 35px;
    padding-top: 15px;
    padding-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	width: 250px;
	display: block;

}

.ico-email {
    font-size: 25px;
    font-weight: 300;
    color: #000000;
    background-image: url(../rs/ico-mail.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	width: 350px;
	display: block;

	
}

.footer-bottom .linea-logos-usce img {
	
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: 50px;
	width: 80%;
	max-width: 1024px;
}

.footer-bottom .linea-logos-eu img {
	margin-bottom:15px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	display: block;
	max-width: 1024px;
}

.letras .img50 {
		
	 width: 100%;
	max-width: 1440px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 40px;
	
}

.textoayuda {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
	color: #000000;
	text-align: center;
}	
	 
	.excelencia .ambitos h4 {
	
	color: #f5a991;
	font-size: 1.5em;
}
 
.lineasinvestigacion {
    padding: 50px 50px 50px 50px;
    margin: 0px auto 0px auto;
    overflow: hidden;
    background-image: url(../rs/fondo-lineas.png);
    background-repeat: no-repeat;
    background-position: right top;
    max-width: 1440px;
 background-size: auto 15%;
}
	
	
.lineasinvestigacion .container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
    justify-content: center; /* Centra los elementos horizontalmente */
    padding: 20px;
    gap: 20px; /* Espacio entre los elementos */
	margin-top: 150px;
}

	  
	  
	  
 .lineasinvestigacion  .item {
        /* Para 2 columnas */
        flex-basis: calc(50% - 20px); /* Aproximadamente la mitad del contenedor menos el gap */
        max-width: calc(50% - 20px);
    }
	  
	 .lineasinvestigacion .item .text {
    font-size: 1.5em; /* Tamaño de fuente relativo */
	font-weight: bold;
    color: #000000;

}
	
	  .otroseventos ul li {
        /* Para 2 columnas */
        flex-basis: calc(50% - 10px); /* 50% del ancho menos la mitad del gap */
        max-width: calc(50% - 10px);
    }

.infopage article {
		
	margin-left: auto; margin-right: auto; width:85%
}


.infopage article  h1 {
	
	
	font-size: 50px;margin-top: 50px; margin-bottom: 50px;
}


.infopage article p {
	
	
	font-size: 16px;line-height: 25px;font-weight: normal;
}	

.intro {
    background-image: url(../rs/fondo-quienes-somos.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	padding-top: 80px;
	padding-bottom: 80px;
}
.infopage {
	
	margin-bottom: 75px;
	
}
.conoequipo {

	padding-top: 50px;
	padding-bottom: 50px;
}
	  
.conoequipo  article .seccioninfo .item h3 {
	
	font-size: 22px;
	margin-top: 15px;
	height: auto;
	
}

.conoequipo  article h2 {
    font-weight: bold;
    font-size: 28px;
    text-align: center;
    color: #666666;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 25px;
    padding-bottom: 25px;
}
	  
.imgpresentacionrela .cajabs  {
	position: absolute;top:70px;right: 10%;
}
	  
	  
	  
.imgpresentacionrela .cajabs img {
	width: 350px;
}


.imgpresentacionrela2 .cajabs  {
	position: absolute;top:40px;right: 5%;
	width: 380px;
}
.imgpresentacionrela2 .cajabs h2  {
	font-size: 24px;
	font-weight: 300;
	text-align: center;
	line-height: 30px;
	color: #666666;
	margin-top: 25px;
	padding-top: 25px;
}

.imgpresentacionrela2 .cajabs hr {
    height: 10px;
    width: 50%;
    background-color: #cccccc;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 0px;
   
}
	  
	.fondodegradado {
    background-image: url("../rs/img-investigacion-transferencia.webp");
    background-position: left 75%;
    background-repeat: no-repeat;
    background-size:50%;
}
	  
.infopage article .noticias-grid {
        grid-template-columns: repeat(2, 1fr);
    }
	  
	  	  
 .popup-content {
    padding: 20px;
    width: 95%; /* Ocupa más ancho en pantallas pequeñas */
  }

  .popup-content h2 {
    font-size: 1.8em;
  }

  .popup-content p {
    font-size: 1em;
  }

  .popup-button {
    padding: 10px 20px;
    font-size: 0.9em;
  }
	  .logostop {
      background-image: url("../rs/logos-top.svg");
    background-color: #E2E2E2;
    height: 60px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-position: 27% center;
    background-size: auto 25px;
}
	  
}
    


























@media (max-width: 768px) { 
	
	
.logotop {
	display: none;
}
	.logotopmovil {
	display:block;
}

	
.nav-menu {
        display: none; /* Oculta el menú principal por defecto en pantallas pequeñas */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100px; /* Debajo de la barra de navegación */
        left: 0;
        background-color: #FFFFFF;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        border-top: var(--red-line);
        z-index: 9998; /* Asegura que el menú móvil esté por encima de la página */
    }

    .nav-menu.active {
        display: flex; /* Muestra el menú cuando está activo */
    }

    .nav-item {
        text-align: center;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .nav-item:last-child {
        border-bottom: none;
    }

    .dropdown-menu {
        position: static; /* Cambia a posición estática para que se despliegue dentro del flujo del menú */
        width: 100%;
        box-shadow: none; /* Eliminar sombra duplicada */
        border-top: none; /* La línea roja ya está en el menú principal */
    }

    .dropdown-menu li {
        text-align: center;

    }

    .dropdown-link {
        padding-left: 40px; /* Indentación para elementos del submenú */
    }

    .hamburger-menu {
        display: block; /* Muestra el icono de hamburguesa */
    }

    /* Animación del icono de hamburguesa */
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
	
	
.excelencia .ambitos h4 {
	
	color: #f5a991;
	font-size: 2em;
	text-align: center;
}

.inicio {
	background-image: url(../rs/inicio.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;height:300px;
	
}

.resumen .presentacion {
	
	padding: 20px;
	margin-top: 25px;
	margin-bottom: 25px;
	overflow: hidden;
	
}

.slider-container { width: 100%; max-width: 1440px; margin: auto; overflow: hidden; position: relative;padding-top: 100px; padding-bottom: 0px;}

.slide {flex: 0 0 100%; }
			
 .col-1, .col-2, .col-3 { flex: 0 0 100%;   }

.resumen .dleft {display: none;}

.resumen .dright {float: none;width: 90%;margin-left: auto; margin-right: auto;}

.pilares {
	margin-bottom: 50px;
		padding: 35px;
}	
			
.excelencia {
	margin-bottom: 0px;
	padding: 35px;	
}
			
	
			
		
.site-footer {
    padding: 40px 50px; /* Espaciado interno */
    background-image: -webkit-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: -moz-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: -o-linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);
    background-image: linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(204,204,204,1.00) 100%);

}
.footer-container {
    flex-direction: column; /* Apila las columnas en pantallas pequeñas */
    width: 100%; /* Asegura que el contenedor Flex ocupe el 100% */
    max-width: 100%; /* Elimina la restricción de ancho máximo de escritorio */
    margin: 0; /* Elimina el margen auto en móvil si el contenedor debe ocupar todo el ancho */
	   background-image: url(none);
  }		

		
.footer-column {
    flex: 1 1 100%; /* Cada columna ocupa el 100% del espacio disponible */
    max-width: 100%; /* Asegura que no se restrinja el ancho máximo */
    margin-bottom: 20px; /* Espacio entre columnas apiladas */
    padding: 0 10px; /* **Mantén o ajusta el padding horizontal si es necesario** */
    /* Si quieres que el contenido llegue más a los bordes (considerando solo el padding del .site-footer), puedes poner: */
    /* padding: 0; */
  }


/* Clases para definir los anchos de las columnas en pantallas grandes */
.footer-column.col-1 {
  flex: 1 1 100%; /* flex-grow, flex-shrink, flex-basis */
  max-width: 100%;
}

.footer-column.col-2 {
  flex: 1 1 100%;
  max-width: 100%;
}

.footer-column.col-3 {
  flex: 1 1 100%;
  max-width: 100%;
}	
			


.textodireccion {
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
	color: #000000;
	text-align: center;
}	
	
.textoayuda {
    font-weight: bold;
    font-size: 11px;
    line-height: 15px;
	color: #000000;
	text-align: center;
}	
	 
	  
	  
.ico-tel {
    font-size: 22px;
    font-weight: 300;
    color: #000000;
    background-image: url(../rs/ico-tel.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 35px;
    padding-top: 15px;
    padding-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	display: block;

}

.ico-email {
    font-size: 22px;
    font-weight: 300;
    color: #000000;
    background-image: url(../rs/ico-mail.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	display: block;

	
}			
			
.pielogo img {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding-bottom: 25px;
}	
	

.footer-bottom .linea-logos-usce img {
	
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: 20px;
	width: 95%;
	max-width: 768px;

	
}

.footer-bottom .linea-logos-eu img {

	margin-bottom:15px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	display: block;
	max-width: 768px;
	
	
}

.letras .img50 {
		
	 width: 100%;
	max-width: 1440px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 20px;
	
}
	
.leftform {
	float: none;
	width: 100%;
}

.righform {
	float: none;
	width: 150px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
}
.btnews {
	
	padding: 20px;
	background-color:#707070;
	width: 150px;
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
}
.excelencia .ambitos {
    display: contents;
    background-image: url(../rs/ico-boton-mas-info.png);
}   
.excelencia .dshow {display: none;}  
	
.excelencia .icoadn {

	display: block;
	width:30%;
	margin: 25px auto 25px auto;
}

	.excelencia .ambitos ul {
    list-style-type: none;	
	 font-size: 1,5em;
	
}

.am01 {
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 50px;
    background-image: url(../rs/ico-ambitos-01.png);
    background-repeat: no-repeat;
    background-position: left top;
	background-size: 35px auto;
    margin-bottom: 50px;
    line-height: 1,5em;
   
    
}

.am02 {
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 50px;
    background-image: url(../rs/ico-ambitos-02.png);
    background-repeat: no-repeat;
    background-position: left top;
	background-size: 35px auto;
    margin-bottom: 50px;
    line-height: 1,5em;

    
}

.am03 {
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 50px;
    background-image: url(../rs/ico-ambitos-03.png);
    background-repeat: no-repeat;
    background-position: left top;
	background-size: 35px auto;
    margin-bottom: 50px;
    line-height: 1,5em;


    
}
.am04 {
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 50px;
    background-image: url(../rs/ico-ambitos-04.png);
    background-repeat: no-repeat;
    background-position: left top;
	background-size: 35px auto;
    margin-bottom: 50px;
    line-height: 1,5em;

    
}
	
.lineasinvestigacion {
    padding: 25px;
    margin: 0px auto 0px auto;
    overflow: hidden;
    background-image: none;
    background-repeat: no-repeat;
    background-position: none;
    max-width: 1440px;
    background-size: contain;
}
	
	
.lineasinvestigacion .container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
    justify-content: center; /* Centra los elementos horizontalmente */
    padding: 20px;
    gap: 20px; /* Espacio entre los elementos */
	margin-top: 30px;
}

 .lineasinvestigacion  .item {
        /* Para 1 columna, ocupan todo el ancho disponible */
        flex-basis: 100%;
        max-width: 100%;
    }

.lineasinvestigacion .item .text {
    font-size: 1,5em; /* Tamaño de fuente relativo */
	font-weight: bold;
    color: #000000;

}


.lineasinvestigacion h2 {
    font-size: 1.8em;
    font-weight: bold;
    line-height: 35px;
     border-bottom: 1px solid #CCCCCC;
    padding-left: 20px;
    text-align: center;
}


	.lineasinvestigacion .btninfo {
    width: 320px;
    padding: 20px 20px 20px 60px;
    margin: 0px auto 0px auto;
	display: block;
    background-image: url(../rs/ico-boton-mas-info.png);
    background-repeat: no-repeat;
    background-position: 15px center;
  	background-color: #666666;
    border: 4px solid #CCCCCC;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    border-radius: 30px;
	cursor: pointer;
}
	
.pilares article h1 {
	font-size: 30px;
	color: #DF2127;
	margin-bottom: 25px;
	text-align: center;
	
	
}

.pilares article p {
    font-size: 16px;
    line-height: 25px;
    text-align: justify;
}

.pilares article h2 {font-size: 1.5em; text-align: center; font-weight: 800px;margin-bottom: 25px;padding-top:25px;}



.pilares article ul { display:contents;
}
.pilares article .pilaresgrafico {display:none; 
	}
 .eventos {
        padding: 50px 15px; /* Ajusta el padding de la sección principal en móvil si 100px es mucho */
    }

    .eventos article .evento {
        flex-direction: column; /* Apila los elementos verticalmente en móvil */
        /* gap: 0; */ /* Elimina o reduce el gap si lo usaste en el contenedor principal en móvil */
        width: 100%; /* Asegura que el contenedor .evento ocupe todo el ancho en móvil */
    }

    .eventos article .evento .right, .eventos article .evento .right2,
    .eventos article .evento .left {
    width: 100%; /* **Asegura que ocupen el 100% del ancho del padre .evento en móvil** */
    flex-basis: auto; /* Permite que la altura se determine por el contenido */
    border-width: none;        /* **Ajusta el padding para pantallas pequeñas si 50px es demasiado para .left** */
        /* El padding del .right ya es pequeño (8px), puede que no necesite ajuste */
    }

    .eventos article .evento .left {
        padding: 20px; /* Padding ajustado para el bloque de texto en móvil */
        margin-bottom: 0px; /* Espacio entre el bloque de texto y el de imagen apilados */
		 border-left: none;
    border-top: none;
    border-bottom: none;	 background-color:transparent; 
	
    }

     .eventos article .evento .left p {
         padding: 0; /* Elimina el padding interno del párrafo si no lo quieres en móvil */
     }


    .eventos article .evento .right {
		width: 100%;
        /* **Asegura una altura mínima para el bloque de imagen en móvil** */
        min-height: 250px; /* Ajusta según cuánta parte de la imagen quieras mostrar como mínimo */
        /* Si el padding general de los items se ajustó y necesitas un valor diferente para .right en móvil, ponlo aquí */
        /* padding: 15px; */
		 border-top: none;
    border-right: none;
    border-bottom: none;
    }
	
	
	
    .eventos article .evento .right2 {
    /* **Asegura una altura mínima para el bloque de imagen en móvil** */
    min-height: 250px; /* Ajusta según cuánta parte de la imagen quieras mostrar como mínimo */
    /* Si el padding general de los items se ajustó y necesitas un valor diferente para .right en móvil, ponlo aquí */
        /* padding: 15px; */
    border-top: none;
    border-right: none;
    border-bottom: none;
    }
	
	
	   .otroseventos ul li {
        /* Para 3 columnas */
        flex-basis: 100%; /* Un tercio menos 2/3 del gap */
        max-width:100%;
    }
.eventos article .evento .left .cuando {
	color: #999999; padding-left: 0px;
}

	
.infopage article {
		
	margin-left: auto; margin-right: auto; width:95%
}


.infopage article  h1 {
	
	
	font-size: 35px;margin-top: 35px; margin-bottom: 35px;padding-left: 20px; padding-right: 20px;
}


.infopage article p {
	
	
	font-size: 16px;line-height: 25px;font-weight: normal;
	padding-left: 20px; padding-right: 20px;
}	
	

.intro article .seccioninfo .item {
        /* Para 3 columnas de igual tamaño */
        /* Calculamos el ancho para que quepan 3 elementos más el espacio entre ellos */
        /* (100% - (número de gaps * tamaño del gap)) / número de columnas */
        /* En 3 columnas hay 2 gaps horizontales, pero flex-basis y gap interactúan de forma que la formula es más sencilla: */
        /* calc(100% / número de columnas - (gap * (número de columnas - 1) / número de columnas)) */
        /* Con gap de 20px y 3 columnas: calc(33.333% - (20px * 2 / 3)) ≈ calc(33.333% - 13.333px) */
         flex-basis: 100%; /* Aproximadamente un tercio menos el espacio del gap */
         max-width: 75%; /* Asegura que no crezca más allá */
    }
	
.infopage {
	
	margin-bottom: 50px;
	
}

.conoequipo article .seccioninfo .item {
        /* Para 3 columnas de igual tamaño */
        /* Calculamos el ancho para que quepan 3 elementos más el espacio entre ellos */
        /* (100% - (número de gaps * tamaño del gap)) / número de columnas */
        /* En 3 columnas hay 2 gaps horizontales, pero flex-basis y gap interactúan de forma que la formula es más sencilla: */
        /* calc(100% / número de columnas - (gap * (número de columnas - 1) / número de columnas)) */
        /* Con gap de 20px y 3 columnas: calc(33.333% - (20px * 2 / 3)) ≈ calc(33.333% - 13.333px) */
         flex-basis: 100%; /* Aproximadamente un tercio menos el espacio del gap */
         max-width: 100%; /* Asegura que no crezca más allá */
    }	
.conoequipo  article .seccioninfo .item h3 {
	
	font-size: 22px;
	margin-top: 15px;
	height: auto;
	
}
.conoequipo  article h2 {
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    color: #666666;
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 25px;
    padding-bottom: 25px;
}
.pieequipo {
	max-width: 95%;
}
	
.imgpresentacionrela .cajabs  {
	display: none;
}
	
	
	
.imgpresentacionrela2 .cajabs  {
	display: none;
}
.imgpresentacionrela2 .cajabs h2  {
	font-size: 16px;
	font-weight: 300;
	text-align: center;
	line-height: 30px;
	color: #666666;
	margin-top: 25px;
	padding-top: 25px;
}

.imgpresentacionrela2 .cajabs hr {
    height: 10px;
    width: 50%;
    background-color: #cccccc;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 0px;
   
}
	
.infopage article .obtex {
	
	
	font-size: 18px;line-height: 25px;font-weight: normal;
	
	width: 100%;
	margin-bottom: 35px;
	
}
.infopage article .left, .infopage article .right {
	
	float: none;
	width: 100%;
	margin-bottom: 50px;

}
.infopage article .left .ulpilares li {
    list-style-type: none;
    margin-bottom: 35px;
}

.infopage article .left .ulpilares li h2 {
    background-image: url(../rs/ico-pilar.svg);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 120px;
	height: 80px;

    /* Añadido para alinear el texto abajo */
    display: flex;
    align-items: flex-end; /* Alinea el contenido (el texto) a la parte inferior */
    box-sizing: border-box; /* Asegura que el padding se incluya dentro de la altura definida */
	font-size: 18px;
	font-weight: 600;
	color: #666666;
}
.fondodegradado {
    background-image: none;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size:50%;
}
.infopage article .cita {
	
	font-size: 18px;width:90%;line-height: 25px; font-weight: bold;margin-left: auto; margin-right: auto;color: #333333;
	
}

.infopage article .right .ambitosactuacion {
	
	font-size: 24px;
	font-weight: 300;
	color:#333333;
	text-align: center;
	margin-top: 25px;
	margin-bottom: 25px;
}

.lineasinvestigacion2 .container2 .item2 {
        flex-basis: 100%; /* Ocupa todo el ancho */
        max-width: 100%; /* Ocupa todo el ancho */
        flex-direction: column; /* Icono y texto en columna en pantallas pequeñas */
        align-items: center; /* Centra el contenido en columna */
        text-align: center; /* Centra el texto en columna */
    }

    .lineasinvestigacion2 .item2 .icon {
        margin-bottom: 15px; /* Espacio entre icono y texto en columna */
        margin-right: 0; /* Asegura que no haya margin a la derecha en columna */
    }



/* Estilos del título h2 */
.lineasinvestigacion2 h2 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3; /* Usar unidad relativa */
    border-bottom: 1px solid #CCCCCC;
    padding-left: 20px;
    margin-bottom: 30px; /* Espacio después del título */
    text-align: center; /* Centra el título si lo deseas */
}

/* Estilos para el contenedor del icono */
.lineasinvestigacion2 .item2 .icon {
    /* Ajustes para alineación con el texto */
    width: 80px; /* Tamaño del icono ajustado, modifica si es necesario */
    height: 80px; /* Tamaño del icono ajustado, modifica si es necesario */
    flex-shrink: 0; /* Evita que el icono se encoja */
    margin-right: 0px; /* Espacio a la derecha del icono */
    /* Tus estilos para el icono (fondo, fuente, color, etc.) */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
}

.lineasinvestigacion2 .item2 .text {
    font-size: 18px; /* Tamaño de fuente ajustado, usa rem o em para mejor responsividad */
    font-weight: normal;
    color: #000000;
     flex-grow: 1;
	padding-left: 1px;
	padding-top: 15px;
}	
	
.infopage article .citaformacion {
	font-size: 22px;
	line-height: 30px;
	font-weight: 300;
	color: #333333;
	text-align: center;
	padding: 0px;
	margin-bottom: 50px;
	
}
.infopage article .noticias-grid {
        grid-template-columns: 1fr;
    }
	
	
	.logostop {
	display: none;
}
	.item-imagen {
  /* En pantallas grandes, ocupa ~30% del espacio */
  flex-basis: 100%; /* <-- Crucial para el ancho en fila */
  /* Evita que la imagen se encoja menos de su base */
  flex-shrink: 0;
  /* Permite que ocupe el ancho completo en móviles (ajustado en media query) */
  width: 100%;
  max-width: 50px; /* Ancho máximo para la imagen en desktop */
  margin: 0 auto; /* Centra la imagen si el contenedor es más grande (en desktop si max-width aplica) */
}

/* Asegura que la imagen dentro de .item-imagen sea responsive */
.item-imagen img {
  display: block; /* Elimina el espacio extra debajo de la imagen */
  max-width: 100%; /* <-- Crucial: La imagen nunca superará el ancho de su contenedor padre */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 4px; /* Bordes redondeados para la imagen */
  object-fit: cover; /* Recorta la imagen si es necesario para llenar el contenedor */
  aspect-ratio: 1 / 1; /* Opcional: Intenta mantener una proporción cuadrada */
}
	.popup-content {
    padding: 15px;
  }

  .popup-content h2 {
    font-size: 1.5em;
  }

  .popup-content p {
    font-size: 0.9em;
  }

  .popup-button {
    padding: 8px 15px;
    font-size: 0.8em;
  }

	
}