@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; }

html {
	scroll-behavior: smooth;
	
}

:root {
    --max-width: 1440px;
    --red-line: 3px solid #FF0000; /* Línea roja para submenús */
}
body {font-family: "Montserrat", sans-serif;}

/* slide noticias */

.news-slider-container {
  width: 90%;
  max-width: 1440px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	margin-left: auto;
	margin-right: auto;
}

.news-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.news-slide {
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
}

.news-slide-left {
    flex: 1;
    min-width: 300px;
    padding-right: 40px;
    padding-left: 40px;
    
	color: #ffffff;
}

.news-slide-left h2 {
  font-size: 2.5em;
  margin-top: 0;
  color: #333;
}

.news-slide-left p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #666;
}

.news-slide-right {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.news-slide-right img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Efecto Hover --- */
.news-slide:hover {
    background-color: #7E7E7E;
    transform: scale(1.02);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
}

.news-slide:hover h2 {
  color: #007bff;
}

/* --- Estilos de las flechas --- */
.news-prev-btn, .news-next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 15px 20px;
  cursor: pointer;
  z-index: 100;
  font-size: 1.5em;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.news-prev-btn:hover, .news-next-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.news-prev-btn {
  left: 20px;
}

.news-next-btn {
  right: 20px;
}


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

.news-slide .news-slide-left .cuando {
	color: #cccccc; padding-left:20px;
	margin-bottom: 8px;
}

.news-slide .news-slide-left p {
    font-size: 14px;
    line-height: 20px;
    padding: 15px; /* Este padding interno del párrafo también puede requerir ajuste en móvil */
	color: #ffffff;
}



/* end slide noticias */


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;
}

.hoverimg 	{
  /* Establece una transición suave para la animación */
  transition: transform 0.5s ease;	
}

.hoverimg:hover {
  /* Aplica el efecto de zoom (1.2 significa 120%) */
  transform: scale(1.2); 
}


.hovernoticias 	{
  /* Establece una transición suave para la animación */
  transition: transform 0.5s ease;	
}

.hovernoticias:hover {
  /* Aplica el efecto de zoom (1.2 significa 120%) */
   transform: scale(1.1); 
}


.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;height: 65px;}
.slide h5 {
    font-size: 12px;
    text-align: left;
    margin-bottom: 10px;
    color: #666666;

}

        .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: 16px;
    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: #e02227;
	margin-top: 25px;
	margin-bottom: 25px;
	
}
.formcamponews {
    padding: 20px;
    border: 3px solid #707070;
	width: 95%;
}

.camponewsletter {
	 padding: 20px;
    border: 3px solid #e02227;
	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%;
}


.btnews2 {
    padding: 20px;
    background-color: #e02227;
    width: 90%;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #E02227;
}
.btnews2:hover {
	
	  padding: 20px;
	background-color:#000000;
	width: 90%;
}

.btnews2::placeholder {
 color: #e02227;
}

.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: 5px;
	display: block;
	height: 25px;
	width: fit-content;	
	margin-bottom: 22px;
}
.menupie:hover {
    border-bottom: 2px solid #DF2127;
}
.submenupie:link, .submenupie:active, .submenupie:visited, .submenupie:focus {
    font-weight: normal;
    font-size: 16px;
    padding: 5px;
    display: block;
	width: fit-content;
}
.submenupie:hover {
    font-size: 16px;
	font-weight: bold;
	color: #DF2127;
}

.footer-column .ulpiemenu {
    list-style-type: none;
	margin-left: 50px;
}

.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: min(90%, 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: #000000;
}

.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;
	max-width: 90vw;
}

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






.imgpresentacionrela2 .cajabs  {
	position: absolute;top:50px;right: 10%;
	width: 480px;
	max-width: calc(90vw - 20px);
}

.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 .texnoticia {
    font-size: 20px;
    line-height: 30px;
}

.infopage article .texnoticia ul {
    
	padding: 8px;
	
}

.infopage article .texnoticia ul li {
    margin-bottom: 40px; 
}



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


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


.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: 120px; /* Espacio arriba de esta sección, ajusta si es necesario */
    margin-bottom: 120px; /* 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;
	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/);
    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;
	
	
}

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

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

.infopage article .ulpilares li h2 {
    background-image: url(../rs/);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 0px;


    /* 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 .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: 90%; max-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 */
}

.error {
	border: 8px solid #FFC8C8;
	text-align: center;
	padding:20px;
	margin-top: 15px;
	margin-bottom: 15px;
	color: #000000;
	font-weight: 800;
	background-color: #CCCCCC;
    font-size: 15px;
    line-height: 20px;
}






.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 input[type="password"],
.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;
    position: relative;
}


.logostop .redestop {

	float: right;width:150px;margin-right: 20px;display: block;
}

.logostop .lang-switcher {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.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;
  width: min(90%, 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 {
    border: 10px solid #C8E8C9;
    text-align: center;
    padding: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
    color: #000000;
    font-weight: 300;
    font-size: 20px;
    line-height: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.vernot {
	text-align: right;
	margin-right: 20px;
	padding: 5px;
}


.notiver:link, .notiver:active, .notiver:visited, .notiver:focus {
    font-weight: bold;
    font-size: 16px;
    padding: 5px;
    display: block;
    width: 200px;
    float: right;
    border: 1px solid #FFFFFF;
	text-align: center;
}


.notiver:hover {	
	font-weight: bold;
    font-size: 16px;
    padding: 5px;
    display: block;
    width: 200px;
    float: right;
    border: 1px solid #000000;
	text-align: center;
	color: #ffffff;
	background-color: #000000;
}


        /* Contenedor central (ahora <section>) con los estilos que antes estaban en <body> */
        .contendor-investigadores {
            /* Los estilos de centrado y padding movidos del body a esta sección */
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        /* Contenedor Principal de la Rejilla */
        .equipo-grid {
            display: grid;
            /* Por defecto, muestra 2 columnas con un espacio de 0px entre ellas */
            grid-template-columns: repeat(4, 1fr);
            gap: 0px; /* Celdas completamente pegadas */
            max-width: 1200px; /* Limita el ancho máximo en pantallas grandes */
            width: 100%;
			margin-bottom: 50px;
        }

        /* Estilos del Item Individual (Cuadro de la Persona) */
        .equipo-item {
            position: relative; 
            overflow: hidden; 
            background-color: #e0e0e0;
			transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; /* Añadido */
        }

.equipo-item:hover {
    transform: scale(1.03); /* Zoom muy suave del 3% */
    z-index: 1; /* Asegura que el elemento se superponga ligeramente si hay otros elementos */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2); /* Una sombra sutil */
    border: 3px solid #000000; /* Un borde azul para marcar el recuadro */
}

        /* Estilos del Enlace y el Texto */
        .equipo-item a {
           display: block; 
            text-decoration: none; 
            color: white; 
            height: 100%; /* Asegura que el enlace ocupe todo el item */
            width: 100%;
        }

        /* Estilos de la Imagen */
        .equipo-item img {
        display: block;
            width: 100%; 
            height: 100%; /* La imagen ocupa el 100% de la altura del contenedor */
            object-fit: cover;
        }

        /* Estilos del Contenedor del Nombre */

        /* Estilos del Texto del Nombre */
        .nombre-texto {
            font-size: 1.1em;
            font-weight: bold;
            line-height: 1.2;
        }
        .contendor-bio {
            /* Estilos de centrado que estaban en el body, ahora en el contenedor */
            display: flex;
            justify-content: center;
            padding: 20px;
			margin-bottom: 100px;
        }

        /* 2. Contenedor de la Ficha (Investigador) */
        .investigador-ficha {
            max-width: 900px;
            width: 100%;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden; 
            display: flex; 
            flex-direction: column;
        }

        /* 3. Área de la Foto y Nombre */
        .foto-area {
            position: relative;
            background-color: #e0e0e0;
            overflow: hidden;
        }

        .foto-area img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Overlay del Nombre */
        .nombre-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
            color: white;
            font-size: 1.8em;
            font-weight: bold;
            z-index: 10;
        }
        
        /* 4. Contenido (Descripción y Categorías) */
        .contenido-area {
            padding: 30px;
        }

        .descripcion {
            margin-bottom: 25px;
            line-height: 1.6;
            color: #555;
            text-align: justify;
        }

        /* 5. Iconos de Categorías/Áreas */
        .categorias-titulo {
                 color: #333;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 2px solid #cccccc;
			margin-top: 50px;
        }
        
        .categorias-lista {
            display: flex;
            flex-wrap: wrap; 
            gap: 10px;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .categoria-item a {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            background-color: #f0f0f0;
            border-radius: 20px;
            text-decoration: none;
            color: #555;
            font-size: 0.9em;
            transition: background-color 0.3s;
        }
        
        .categoria-item a:hover {
            background-color: #e9ecef;
        }
        
        .categoria-item i {
            margin-right: 8px;
            font-size: 1.1em;
        }
.investigador-ficha .contenido-area p { margin-bottom: 25px; line-height: 25px;
}


        /* Contenedor de la sección para centrado */
        .research-section {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
			margin-bottom: 100px;
        }

        /* ---------------------------------------------------- */
        /* Estilos de Contenedor y Responsividad (Grid) */
        /* ---------------------------------------------------- */
        .cards-container {
       display: grid;
        /* CLAVE: Siempre una sola columna */
        grid-template-columns: 1fr; 
        gap: 20px;
        }

        /* Media Query para Tablets y Desktop (2 columnas) */
           /* ---------------------------------------------------- */
        /* Estilo de la Card Individual (Flexbox) */
        /* ---------------------------------------------------- */
        .research-card {
            display: flex; /* Distribución interna: Izquierda/Derecha */
            padding: 15px;
            background-color: #ffffff;
            /* Borde, sombra y transición */
            border: 3px solid #cccccc; 
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); 
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            border-radius: 8px;
            text-decoration: none; 
            color: inherit;
			 
			
        }

        /* Efecto Hover */
        .research-card:hover {
            border-color: #666666; /* Cambio de color del borde */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); 
            cursor: pointer;
        }

        /* ---------------------------------------------------- */
        /* Sección Izquierda: Información del Investigador */
        /* ---------------------------------------------------- */
        .researcher-info {
            flex: 0 0 50%; 
            padding-right: 15px;
            text-align: center;
            border-right: 1px solid #eeeeee; 
			 justify-content: space-between;
	
        }

        .researcher-photo {
            width: 100px;
            height: 100px;
            border-radius: 50%; 
            object-fit: cover;
            margin-bottom: 10px;
            border: 2px solid #cccccc;
        }

  .researcher-photo2 {
	  
	   max-width: 200px;
            height: auto;
          
            margin-bottom: 10px;
         

        
        }

        .researcher-name {
            font-weight: bold;
            margin: 0;
            font-size: 0.95em;
            line-height: 1.2;	
			color: #333333;
        }

        .researcher-title {
            font-style: italic;
            color: #555555;
            margin: 5px 0 0 0;
            font-size: 0.85em;
            line-height: 1.2;
			margin-bottom: 25px;
			
        }

        /* ---------------------------------------------------- */
        /* Sección Derecha: Información del Artículo */
        /* ---------------------------------------------------- */
        .article-info {
            flex-grow: 1; 
            padding-left: 15px;
        }

        .article-info h2 {
            font-size: 1.3em; 
            color: #333333;
            margin-top: 0;
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .publication-medium {
            font-weight: 500;
            color: #666666; 
            margin: 0 0 5px 0;
            font-size: 0.9em;
        }

        .doi {
            font-family: monospace;
            background-color: #f7f7f7;
            padding: 3px 5px;
            border-radius: 3px;
            font-size: 0.8em;
            color: #777777;
            display: inline-block;
        }

.camelia-form-container {
    background-color: #f9f9f9; /* Fondo muy suave para separar del blanco */
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    max-width: 100%;
}

.camelia-form-container h3 {
    color: #DF2127; /* Rojo corporativo */
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

/* Layout de inputs */
.camelia-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.camelia-form .form-group {
    margin-bottom: 20px;
    width: 100%;
}

.camelia-form label {
    display: block;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.camelia-form input[type="text"], 
.camelia-form input[type="email"],
.camelia-form input[type="tel"], 
.camelia-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px; /* Radio sutil como en tu css original */
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    transition: all 0.3s ease;
    background-color: #fff;
}

/* Efecto Focus: Borde rojo corporativo */
.camelia-form input:focus, 
.camelia-form textarea:focus {
    border-color: #DF2127;
    outline: none;
    box-shadow: 0 0 5px rgba(223, 33, 39, 0.2);
}

/* =========================================
   SELECTOR MÚLTIPLE TIPO "CHIPS" (Lo que pediste)
   ========================================= */
.label-destacado {
    color: #DF2127 !important;
    margin-bottom: 12px !important;
}

.multi-select-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Escondemos el checkbox real feo */
.select-chip input[type="checkbox"] {
    display: none;
}

/* Estilo del botón (Label) */
.select-chip .chip-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 30px; /* Bordes redondeados modernos */
    cursor: pointer;
    font-size: 14px;
    color: #666;
    font-weight: 600;
    transition: all 0.3s ease;
    user-select: none;
}

.select-chip .chip-content .icon {
    font-size: 1.2em;
}

/* Efecto Hover */
.select-chip:hover .chip-content {
    border-color: #666;
    background-color: #f0f0f0;
}

/* ESTADO SELECCIONADO (CHECKED) - Magia CSS */
.select-chip input:checked + .chip-content {
    background-color: #DF2127; /* Rojo activo */
    border-color: #DF2127;
    color: #ffffff;
    transform: scale(1.02); /* Pequeño zoom */
    box-shadow: 0 4px 10px rgba(223, 33, 39, 0.3);
}

/* =========================================
   CHECKBOX LEGAL Y BOTÓN
   ========================================= */
.checkbox-legal-group {
    margin-bottom: 25px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
}

.custom-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: #DF2127; /* Colorea el checkbox nativo en navegadores modernos */
}

.custom-checkbox a {
    color: #DF2127;
    text-decoration: underline;
}

.btn-enviarformulario {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
    background-color: #666666; /* Gris oscuro base */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 15px 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s;
    letter-spacing: 1px;
}

.btn-enviarenviarformulario:hover {
    background-color: #DF2127; /* Cambio a rojo al pasar el ratón */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.ulpilareslineas {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1000px;
    display: block;
	list-style-type: none;
}

.ulpilareslineas li {
    background: transparent;
    border: none;
    /* Separación entre cada bloque de PILAR */
    margin-bottom: 50px;
    border-bottom: 1px solid #eee; /* Línea separadora sutil */
    padding-bottom: 0px;
	list-style-type: none;
    
}
/* Quitamos la línea y el margen del último elemento */
.ulpilareslineas li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
	list-style-type: none;
}

/* --- 2. Flexbox: Controla la posición Imagen vs Texto --- */
.contenido-pilar {
    display: flex; 
    align-items: center; 
    gap: 40px; 
}

/* --- 3. Imagen (Configuración Escritorio) --- */
.imagen-pilar {
    width: 40%; 
    min-width: 250px; 
    height: auto;
    object-fit: cover;
    
    /* ELIMINAMOS EL BORDE REDONDEADO SOLICITADO */
    border-radius: 0; 
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    
    /* AÑADIDO: Margen inferior para que la imagen no esté pegada al texto inferior en caso de que este se extienda */
    margin-bottom: 50px; 
}

/* --- 4. Texto --- */
.texto-pilar {
    width: 60%; 
}

.texto-pilar h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8rem; 
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.texto-pilar p {
    margin: 0;
    font-size: 18px; 
    line-height: 1.6;
    color: #000000;
}



  @media (max-width: 1024px) { 
	  

	    .equipo-grid {
                /* 4 columnas en pantallas más grandes */
                grid-template-columns: repeat(4, 1fr);
            }
	  
	  
	  .notiver:link, .notiver:active, .notiver:visited, .notiver:focus {
    font-weight: bold;
    font-size: 16px;
    padding: 5px;
    display: block;
    width: 200px;
    float: none;
    border: 1px solid #FFFFFF;
	text-align: center;
		  margin-left: auto;
		  margin-right: auto;
		  margin-bottom: 50px;
}
	  
	  
	  
.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);
    }

    .logotop { display: none; }
    .logotopmovil { display: block; }
    .lang-switcher-navbar { display: flex; align-items: center; }
    .logostop .lang-switcher { display: none; }

.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: 100%;
	max-width: 350px;
}

.imgpresentacionrela2 .cajabs  {
	position: static;
	width: 90%;
	margin: 20px auto 0;
}
.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: 20px center;
    background-size: 75% auto;
}
	  
}
    


























@media (max-width: 768px) { 
	
	    .ulpilareslineas li {
        margin-bottom: 50px;
        padding-bottom: 30px;
    }
    .contenido-pilar {
        flex-direction: column; 
        gap: 20px;
    }

    .imagen-pilar {
        width: 100%; 
        min-width: auto;
        
        /* Aseguramos que la imagen no esté pegada al texto en móvil */
        margin-bottom:50px; 
    }

    .texto-pilar {
        width: 100%;
        text-align: left; 
		margin-bottom: 25px;
    }
	
    .camelia-form-container {
        padding: 20px;
    }
    
    .camelia-form .form-row {
        flex-direction: column; /* Apila nombre y email uno debajo del otro */
        gap: 0;
    }

    .select-chip {
        flex-grow: 1; /* En móvil, que ocupen el ancho disponible */
    }
    
    .select-chip .chip-content {
        justify-content: center; /* Texto centrado en móvil */
    }
    
    .btn-enviar {
        width: 100%; /* Botón ancho completo en móvil */
        max-width: 100%;
    }
	
	    .research-card {
                flex-direction: column; /* Apila investigador arriba y artículo abajo */
            }

            .researcher-info {
                flex: auto;
                padding: 0 0 15px 0;
                border-right: none;
                border-bottom: 1px solid #eeeeee; 
            }
            
           

	
	.researcher-photo {
                width: 80px;
                height: 80px;
            }

            .article-info {
                padding: 15px 0 0 0;
            }

	
	
	 .equipo-grid {
                /* UNA SOLA COLUMNA en pantallas muy pequeñas */
                grid-template-columns: 1fr;
		 margin-bottom: 30px;
            }
	
	
	/* slide noticias */

.news-slide {
    flex-direction: column;
    padding: 20px;
  }

  .news-slide-left {
    padding-right: 0;
	  padding-left: 0px;
    text-align: center;
	  width: 80%;
  }

  .news-slide-left h2 {
    font-size: 1.8em;
  }

  .news-slide-left p {
    font-size: 1em;
  }
  
  .news-slide-right {
    margin-top: 20px;
  }
  
  .news-prev-btn, .news-next-btn {
    padding: 10px 15px;
    font-size: 1.2em;
  }
/* end slide noticias */
	
	
	
.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%;
	    padding: 5px;
    }

.lineasinvestigacion .item .text {
    font-size: 18px; /* 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: 25px;margin-top: 30px; margin-bottom: 30px;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/);
    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 {
    background-image: url("../rs/logos-top.svg");
    background-color: #E2E2E2;
    height: 30px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 98% auto;
}
	
	
	.logostop .redestop {
	
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: 250px; /* 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;
  }
.infopage article .ulpilares {
   	width: 90%;
}

	.lineasinvestigacion .item .icon {
    /* Estilos para el contenedor del icono */
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    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 .icon img {
    /* Estilos para el contenedor del icono */
    width: 60px;
    height: 60px;
    
}
.infopage article .ulpilares li h2 {
    background-image: url(../rs/);
    background-repeat: no-repeat;
    background-position: left top;
    padding-left: 0px;
	

    /* 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;
}	
.item {
  display: flex; /* <-- Crucial para Flexbox */
  flex-direction:column; /* Por defecto, los elementos se ponen en fila (para pantallas grandes) */
}
.equipocaja .item .item-contenido h4 {
	
	font-size: 22px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 15px;
}
.infopage article .texnoticia {
    font-size: 20px;
    line-height: 30px;
	padding: 0px 20px 0px 20px;
}

.infopage article .texnoticia ul {
    
	padding: 8px;
	
}

.infopage article .texnoticia ul li {
    margin-bottom: 20px; 
}
.slide h3 { margin: 10px 0;height: auto;}

.btnevento:link, .btnevento:active, .btnevento:visited, .btnevento:focus {
    float: none;
    width: 90%;
    max-width: 280px;
    margin: 15px auto;
    display: block;
}

.ico-tel { width: 100%; max-width: 280px; }
.ico-email { width: 100%; max-width: 280px; }

.news-slide-left { width: 90%; }
}

.investa {
    display: block;
    padding: 10px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 15px;
	padding-bottom: 10px;
    border-bottom: 2px solid #CCCCCC;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	color: #666666;
	font-size: 25px;
}

/* ── Language switcher ───────────────────────────────────────────────────── */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 2px 8px;
}
.lang-active {
    color: #2c5f2e;
    font-weight: 700;
}
.lang-sep {
    color: #aaa;
}
.lang-link {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}
.lang-link:hover {
    color: #2c5f2e;
}
/* Navbar switcher: hidden on desktop, shown centered on mobile/tablet */
@media (min-width: 1025px) {
    .lang-switcher-navbar { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   Cursos online — catálogo y reproductor
   (misma regla en css/stylos.css y gal/css/stylos.css)
   ══════════════════════════════════════════════════════════════════ */
.cursos-intro { color: #666666; max-width: 760px; margin-bottom: 32px; line-height: 1.6; font-size: 15px; }
.cursos-ico { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }

/* miniatura */
.cursos-thumb { display: block; text-decoration: none; flex-shrink: 0; }
.cursos-thumb-in { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: linear-gradient(135deg, #231F20, #DF2127); }
.cursos-thumb-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cursos-thumb-ico { width: 38%; height: 38%; opacity: .92; }
.cursos-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #FFFFFF; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 3px; }
.cursos-play { position: absolute; left: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.9); color: #DF2127; display: flex; align-items: center; justify-content: center; }
.cursos-play .cursos-ico { width: 12px; height: 12px; vertical-align: 0; }

/* tarjeta grande (curso básico) */
.cursos-hero { display: flex; align-items: center; gap: 24px; background: #FFFFFF; border: 1px solid #CCCCCC; border-left: 6px solid #DF2127; border-radius: 6px; padding: 20px; margin-bottom: 38px; transition: box-shadow .15s, transform .15s; }
.cursos-hero:hover { box-shadow: 0 10px 26px -14px rgba(0,0,0,.25); transform: translateY(-2px); }
.cursos-hero .cursos-thumb { width: 260px; }
.cursos-hero .cursos-body { flex: 1; min-width: 0; }
.cursos-hero h2 { font-size: 23px; margin: 0 0 8px; line-height: 1.3; font-weight: 800; }
.cursos-hero h2 a, .cursos-card h3 a { color: inherit; text-decoration: none; }
.cursos-hero h2 a:hover, .cursos-card h3 a:hover { color: #DF2127; }
.cursos-hero p { margin: 0; font-size: 13.5px; color: #666666; max-width: 560px; line-height: 1.55; }
.cursos-badge { display: inline-block; background: #DF2127; color: #FFFFFF; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 3px; margin-bottom: 12px; }
.cursos-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #666666; font-size: 12.5px; font-weight: 600; margin-top: 14px; }
.cursos-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cursos-cta { flex-shrink: 0; display: inline-block; background: #DF2127; color: #FFFFFF; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; padding: 12px 22px; border-radius: 3px; white-space: nowrap; text-transform: uppercase; text-decoration: none; transition: background .15s; }
.cursos-cta:hover { background: #B81118; color: #FFFFFF; }
.cursos-cta-ghost { background: #FFFFFF; color: #DF2127; border: 1.5px solid #DF2127; text-align: center; margin-top: 4px; }
.cursos-cta-ghost:hover { background: #DF2127; color: #FFFFFF; }

.cursos-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.cursos-links a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #333333; text-decoration: none; }
.cursos-links a:hover { color: #DF2127; }

/* etiqueta de sección y cuadrícula de monográficos */
.cursos-seccion { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #666666; margin: 8px 0 16px; border-bottom: 1px solid #CCCCCC; padding-bottom: 10px; }
.cursos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-bottom: 80px; }
.cursos-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 6px; overflow: hidden; transition: .15s; }
.cursos-card:hover { border-color: #DF2127; box-shadow: 0 8px 20px -12px rgba(0,0,0,.18); transform: translateY(-2px); }
.cursos-card .cursos-thumb-in { border-radius: 0; }
.cursos-card .cursos-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; }
.cursos-from { font-size: 10.5px; color: #DF2127; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cursos-card h3 { font-size: 15.5px; margin: 0; line-height: 1.35; font-weight: 700; }
.cursos-ponentes { font-size: 12.5px; color: #666666; }
.cursos-card p { margin: 0; font-size: 13px; color: #666666; line-height: 1.5; }
.cursos-card .cursos-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid #CCCCCC; font-size: 11.5px; gap: 6px 12px; }
.cursos-card .cursos-links { margin-top: 0; padding-top: 10px; border-top: 1px solid #CCCCCC; gap: 6px 10px; flex-wrap: nowrap; white-space: nowrap; }
.cursos-card .cursos-links a { font-size: 11px; gap: 4px; }
.cursos-card .cursos-links .cursos-ico { width: 12px; height: 12px; }

.cursos-vacio { color: #666666; border: 1px dashed #CCCCCC; padding: 30px; text-align: center; margin-bottom: 80px; }

/* reproductor */
.cursos-volver { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #666666; font-weight: 700; text-decoration: none; margin-bottom: 16px; }
.cursos-volver:hover { color: #DF2127; }
.cursos-course-links { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid #CCCCCC; }
.cursos-course-links a { font-size: 13px; }

.cursos-player { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-bottom: 80px; }
.cursos-player-main { min-width: 0; }

.cursos-video { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #1a1a1a; border-radius: 6px; overflow: hidden; }
.cursos-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cursos-video-pendiente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #EEEEEE; }
.cursos-video-tag { position: absolute; top: 14px; left: 14px; font-size: 11px; background: rgba(255,255,255,.14); color: #EEEEEE; padding: 4px 10px; border-radius: 3px; }
.cursos-play-big { width: 64px; height: 64px; border-radius: 50%; background: rgba(223,33,39,.85); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.cursos-play-big .cursos-ico { width: 28px; height: 28px; vertical-align: 0; }
.cursos-video-msg { font-size: 13px; font-weight: 600; letter-spacing: .04em; opacity: .85; }

.cursos-video-info { padding: 16px 2px 6px; }
.cursos-codigo { font-size: 12px; color: #DF2127; font-weight: 700; }
.cursos-video-info h2 { font-size: 21px; margin: 6px 0 4px; line-height: 1.3; font-weight: 800; }
.cursos-por { color: #666666; font-size: 13.5px; }
.cursos-desc { margin-top: 12px; color: #666666; font-size: 13.5px; line-height: 1.55; }

.cursos-nav { display: flex; gap: 10px; margin-top: 16px; }
.cursos-nav-btn { flex: 1; text-align: center; padding: 11px 14px; border: 1px solid #CCCCCC; border-radius: 3px; background: #FFFFFF; color: #231F20; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
a.cursos-nav-btn:hover { border-color: #DF2127; color: #DF2127; }
.cursos-nav-off { opacity: .35; }

.cursos-indice { background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 6px; padding: 6px 0; position: sticky; top: 16px; max-height: 74vh; overflow: auto; }
.cursos-indice-cab { padding: 14px 18px 10px; border-bottom: 1px solid #CCCCCC; display: flex; flex-direction: column; gap: 2px; }
.cursos-indice-cab span { font-size: 12px; color: #666666; }
.cursos-bloque { padding: 14px 12px 6px; }
.cursos-bloque-titulo { font-size: 12px; font-weight: 700; color: #231F20; text-transform: uppercase; letter-spacing: .03em; padding: 0 6px; }
.cursos-bloque-ponente { font-size: 11.5px; color: #666666; margin: 2px 0 6px; padding: 0 6px; }

.cursos-fila { display: flex; gap: 10px; align-items: flex-start; padding: 9px 6px; margin: 2px 0; border-radius: 4px; color: #231F20; text-decoration: none; line-height: 1.4; }
.cursos-fila:hover { background: #F7F7F7; }
.cursos-fila.activa { background: #FBEAEA; }
.cursos-chk { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #CFCFCF; flex-shrink: 0; margin-top: 1px; position: relative; }
.cursos-fila.activa .cursos-chk { border-color: #DF2127; }
.cursos-fila.vista .cursos-chk { background: #DF2127; border-color: #DF2127; }
.cursos-fila.vista .cursos-chk::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cursos-fila-t { font-size: 13px; flex: 1; min-width: 0; }
.cursos-fila.activa .cursos-fila-t { font-weight: 700; }
.cursos-vcode { color: #666666; font-weight: 600; font-size: 11.5px; margin-right: 6px; }
.cursos-fila-dur { font-size: 11px; color: #666666; flex-shrink: 0; padding-top: 2px; }

.cursos-opcional { margin: 2px 0 6px 20px; border-left: 2px dashed #F5AA91; padding-left: 8px; }
.cursos-opcional summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: #8a4023; background: #FDF0EA; border: 1px solid #f0d7c8; border-radius: 4px; padding: 4px 8px; display: inline-block; margin: 2px 0 4px; list-style: none; }
.cursos-opcional summary::-webkit-details-marker { display: none; }
.cursos-opcional summary::before { content: "▸ "; }
.cursos-opcional[open] summary::before { content: "▾ "; }

.cursos-relacionado { margin: 10px 6px 8px; background: #FFFFFF; border: 1px solid #CCCCCC; border-left: 4px solid #DF2127; border-radius: 4px; padding: 10px 12px; }
.cursos-relacionado-lbl { font-size: 10.5px; font-weight: 700; color: #DF2127; text-transform: uppercase; letter-spacing: .04em; }
.cursos-relacionado-nombre { font-size: 13px; font-weight: 700; margin: 3px 0 2px; }
.cursos-relacionado-dur { font-size: 11.5px; color: #666666; }
.cursos-relacionado-btn { display: block; margin-top: 8px; background: #DF2127; color: #FFFFFF; text-align: center; padding: 8px; border-radius: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.cursos-relacionado-btn:hover { background: #B81118; }

@media (max-width: 820px) {
    .cursos-player { grid-template-columns: 1fr; gap: 20px; }
    .cursos-indice { position: static; max-height: none; overflow: visible; }
    .cursos-fila { padding: 13px 6px; }
}
@media (max-width: 768px) {
    .cursos-hero { flex-direction: column; align-items: stretch; gap: 16px; padding: 14px; border-left-width: 4px; margin-bottom: 26px; }
    .cursos-hero .cursos-thumb { width: 100%; }
    .cursos-hero h2 { font-size: 19px; }
    .cursos-hero p { max-width: none; }
    .cursos-cta { text-align: center; }
    .cursos-grid { grid-template-columns: 1fr; gap: 14px; }
    .cursos-card .cursos-links { flex-wrap: wrap; }
}
@media (max-width: 420px) {
    .cursos-meta { gap: 6px 14px; }
    .cursos-links { gap: 8px 16px; }
    .cursos-nav { flex-direction: column; }
}