/* Asegura que el html y body ocupen toda la pantalla */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* Este contenedor crecerá para ocupar todo el espacio sobrante */
.site-wrapper {
    flex: 1 0 auto;
}





/* Estilos de PORTADA */

#div_pruebas {
	background-color: yellow;
	border-radius: 25px;
	padding: 20px;
}


.btn-flat {
	padding-left: 0;
	padding-right: 1rem;
}

/* ---CONFIGURACIÓN PARA PANTALLAS GRANDES --*/
/*@media (max-width: 3000px) {*/
    p.ficha-texto { font-size: 1.05rem; }
    p.ficha-titulo { font-size: 1.2rem; }
    
    .main-container {
        width: 100%;
		gap: 22px !important;
    }
	
	.card-master .btn-text {
        flex: 0 0 70%; /* El texto ocupa el 70% restante */
        max-width: 600px; /* AJUSTA ESTE VALOR: al reducirlo, el texto "choca" antes y salta de línea */
		text-align: left;
        padding-right: 20px;
 /*   }*/


	
}

/* --- CONFIGURACIÓN TABLET (992px) --- */
@media (max-width: 1500px) {
	.main-container {
        /* Forzamos el 100% real anulando el 70% de escritorio */
        width: 100% !important; 
        max-width: 100% !important;
        
        /* Eliminamos el centrado automático para que expanda a los bordes */
        margin: 20px 0 !important; 
        
        /* Quitamos el padding lateral para que los botones toquen el borde */
        padding: 0 !important; 
        
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important;
    }

    .card-full {
        grid-column: span 2 !important; /* Los banners ocupan las 2 columnas */
    }
}

/* --- CONFIGURACIÓN MÓVIL (600px) --- */
@media (max-width: 600px) {
    .main-container {
        /* Mantenemos el ancho total */
        width: 100% !important;
        /* PERO forzamos 1 sola columna (esto sobreescribe la regla de tablet) */
        grid-template-columns: 1fr !important; 
        gap: 15px !important;
    }

    .card-full {
        /* En móvil, el banner solo puede ocupar 1 columna */
        grid-column: span 1 !important; 
        height: auto !important;
        min-height: 180px;
    }

    /* Tu diseño de logo arriba para el primer botón */
    .card-full .content {
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Botones pequeños siguen en horizontal pero uno debajo de otro */
    .card-small {
        grid-column: span 1 !important;
        flex-direction: row !important;
        height: auto !important;
        min-height: 100px;
    }
	
	/* RESET para el botón de Máster en móvil */
    .card-master .content {
        flex-direction: column !important; /* Logo arriba, texto abajo */
        padding: 20px !important;
    }

    .card-master .logo-wrapper {
        width: 100% !important;
        height: 120px !important; /* Reducimos el área del logo */
        flex: none !important;   /* Anulamos el flex: 0 0 30% */
        margin-right: 0 !important;
        margin-bottom: 0px;
    }

    .card-master .btn-text {
        width: 100% !important;
        max-width: 100% !important; /* Anulamos los 600px de escritorio */
        flex: none !important;      /* Anulamos el flex: 0 0 70% */
        text-align: center !important; /* Centramos el texto para que case con el logo */
        padding-right: 0 !important;
    }
	
	/* Reducir el tamaño del texto solo en el botón de Máster */
    .card-master .btn-text p {
        font-size: 1rem !important; /* Ajusta este valor (0.8rem o 0.9rem) a tu gusto */
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }

    /* Si quieres que la primera línea (Máster Universitario en) sea distinta: */
    .card-master .btn-text p b {
        font-size: 0.85rem !important;
        color: #ffd300;
    }
	
}

@media print {
	#Fondo,	#Actualidad, .fichaA, .fichaB, .fichaC { display: none; }
	.fichaImprimir { display: block !important}
	p.ficha-tipo { font-size: 8pt; margin: 0; padding: 0 }
	p.ficha-titulo { font-size: 10pt; margin: 0; padding: 0 }
	.proximas-apartado { font-size: 18pt !important}
	.proximas-titulo { font-size: 10pt !important}	
}

/* FONDO */
#Fondo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: -100;
	/*background-color: #F8F8F8;*/
	background-color: #436c9f;
	
}
#FondoContenido {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#FondoProfesor {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 40%;
}            
#FondoPensando {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 40%;
}


/* Barra de ACTUALIDAD */
.actualidad-apartado {
	font-size: 1.5rem;
	color: #000000;
}
.actualidad-elemento {
	display: none;
	font-size: 1rem;
	font-weight: bold;
	background-color: rgba(130,181,220,1);
	color: #FFFFFF;
}
.actualidad-elementoEntrada {
	display: block;
}
.actualidad-linea {
	font-size: 1rem;
	font-weight: bold;
	background-color: rgba(130,181,220,1);
	color: #FFFFFF;
}
.actualidad-icono {
	color: #FFFFFF;
}
.actualidad-titulo {
	margin: 0 0 0 3rem;
	line-height: 1.5rem;
	padding: 0.8rem 0 0.8rem 0;
}
.actualidad-tipo {
	font-size: 0.9rem;
	font-weight: normal;
	color: #F9F9F9;
}
.actualidad-cuerpo {
	font-size: 1rem;
	background-color: #FFFFFF;
	padding: 1rem 1rem 0 1rem;
}
.actualidad-imagen {
	height: 6rem;
	float: left;
	margin: 0 1rem 1rem 0;
}
.actualidad-descripcion {
	margin: 0;
	color: #000000;
}
.actualidad-dato {
	margin: 0;
	font-weight: bold;
	color: #000000;
} 
.actualidad-etiqueta {
	margin: 0;
	font-weight: normal;
} 
.actualidad-acceso {
	margin: 0;
	text-align: right;
	word-wrap: break-word;
	margin-bottom: 1rem;
}

/* Actividades PRÓXIMAS */
#Proximas > li {
	margin-bottom: 0.5rem;
}
.proximas-apartado {
	font-size: 2rem;
	background-color: rgba(130,181,220,1);
	color: #FFFFFF;
	text-align: center;
	padding: 0.5rem;
	
}
.proximas-linea {
	font-size: 1.2rem;
	background-color: rgba(245,245,245,1);
	color: #000000;
	font-weight: bold;
	/*border-radius: 15px;*/
}		
.proximas-icono {
	color: rgba(130,181,220,1);
}
.proximas-titulo {
	margin: 0 0 0 3rem;
	line-height: 1.5rem;
	padding: 0.8rem 0 0.8rem 0;
}

.proximas-tipo {
	font-size: 0.9em;
	color: #303030;
}
.proximas-cuerpo {
	font-size: 1rem;
	background-color: #FFFFFF;
	padding: 1rem 1rem 0 1rem;
}			
.proximas-imagen {
	width: 6rem;
	margin: 0 1rem 1rem 0;
	float: left;
}
.proximas-descripcion {
	font-size: 1rem;
	margin: 0 0 0 7rem;
}
.proximas-dato {
	margin: 0;
	font-size: 1rem;
	font-weight: bold;
	margin: 0 0 0 7rem;
}
.proximas-etiqueta {
	font-size: 1rem;
	font-weight: normal;
}
.proximas-acceso {
	margin: 0;
	text-align: right;
	word-wrap: break-word;
	margin-bottom: 1rem;
}

/* FICHAS */
.ficha-tipo {
	font-size: 0.9rem;
	color: #505050;
	margin: 0;
	padding: 0.5rem 0 0 0.5rem;
	}
.ficha-titulo {
	font-size: 1.5rem;
	color: #000000;
	font-weight: bold;
	margin: 0;
	padding: 0.5rem;
}
.ficha-texto {
	font-size: 1.2rem;
	color: #000000;
	margin-top:0;
}
.fichaA {
	height: 11.5rem;
	background-color: #FFFFFF;
	margin-bottom: 1.5rem;
	overflow: hidden;
	/*border-radius: 15px;*/
}			
.fichaA-contenido {
	padding: 0.5rem;
	height: 8rem;
	overflow: hidden;
}
.fichaA-contenido-imagen {
	height: 100%;
	float: left;
}
.fichaA-accion {
	height: 3.5rem;
	color: rgba(234,167,121,1);
	width: 100%;
	padding: 0.5rem;
	text-align: right;
	border-top: 1px solid #D0D0D0;
}
.fichaB {
	height: 9rem;
	background-color: #FFFFFF;
	margin-bottom: 1.5rem;
	/*border-radius: 15px;*/
}
.fichaB-imagen {
	height: 100%;
	display: block;
	float: left;
	margin-right: 0.5rem;
}
.fichaB-contenido {
	height: 9rem;
	overflow: hidden;
}
.fichaB-boton {
	position: relative;
	float: right;
	top: 7.5rem;
	margin-right: 1rem;
}
.fichaC {
	background-color: #FFFFFF;
	margin-bottom: 1.5rem;
}
.fichaC-imagen {
	width: 100%;
}
.fichaC-boton {
	position: relative;
	float: right;
	top: -1.2rem;
	margin-right: 1rem;
}
.fichaImprimir {
	display: none;
	border-bottom: 4pt solid #F0F0F0;
	margin-top: 20pt;
}
.fichaImprimir-imagen {
	height: 4rem;
}


/*NUEVOS BOTONES*/

        :root {
            --radius: 25px;
            --bg-dark: #002b49;
            --shadow: 0 4px 12px rgba(0,0,0,0.1);
			 --altura-fichas: 120px;
        }
		
		* { box-sizing: border-box; margin: 0; padding: 0; }
        
		
		.main-container {
			/* Mantiene el contenido alineado al centro si usas inline-elements */
			align-content: center; 
			
			/* Define un ancho (puedes usar el 90% que ya tienes o un valor fijo) */
			width: 100%;
			max-width: 2000px; /* Es recomendable poner un tope para pantallas grandes */
			
			/* EL CAMBIO CLAVE: Centrado horizontal */
			margin: 0 auto; 
			
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-auto-rows: min-content;
			gap: 20px 20px; /* 0 vertical, 12px horizontal si lo deseas */
			margin: 0 auto;
		}
		


        .card {
            position: relative;
            text-decoration: none;
            border-radius: var(--radius);
            overflow: hidden;
            display: flex;
            transition: transform 0.2s, box-shadow 0.2s;
            border: 1px solid #e1e4e8;
            background: white;
            color: #333;
			margin: 0 !important; /* Elimina márgenes heredados */
        }
		


        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        }

        /* --- ALTURA UNIFICADA PARA LOS DOS PRIMEROS --- */
		.card-full { 
			grid-column: span 3; 
			min-height: var(--altura-fichas); /* Cambiado de height a min-height */
			height: auto; 
			border: none; 
		}
        
        .bg-layer {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }

        .overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0); transition: background 0.25s ease;
            z-index: 2;
        }

        .content {
            position: relative;
            z-index: 3;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center; /* Centrado vertical */
            justify-content: center;
            padding: 20px;
            color: white;
            text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
        }

        .logo-wrapper {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
			padding: 0px;
        }

        /* Ajuste logo Máster */
        .logo-wrapper.horizontal {
            width: 200px;
            height: var(--altura-fichas);
            margin-right: 10px;
        }
		
/* 1. Controlar el padding general del contenido (texto + logo) solo en Máster */
.card-master .content {
    padding: 10px 15px !important; /* Ajusta estos valores para reducir la altura total */
}

/* 2. Controlar el padding específico del LOGO solo en Máster */
.card-master .logo-wrapper {
    padding: 0px !important; /* Aumenta este valor si quieres el logo más pequeño y alejado de los bordes */
}		

        /* Ajuste bloque Doctorado */
        .doctorado-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .doctorado-block .logo-wrapper.square {
            width: var(--altura-fichas);
            height: auto; 
            margin-bottom: -5px; 
        }

        .doctorado-title {
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.2;
            text-align: center;
            white-space: normal; 
			color: #D5C088;
        }

        .btn-text {
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.3;
        }

        .logo-wrapper img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* --- BOTONES INFERIORES --- */
        .card-small {
            flex-direction: row;
            align-items: center;
            padding: 0px 20px;
            min-height: 150px;
        }
        
        .card-small .logo-wrapper.square {
            width: 100px;
            height: 100px;
            margin-right: 25px;
        }
        

.card-small:hover {
    background-color: #ffffff !important; /* Mantiene el fondo blanco */
    color: inherit !important;             /* Mantiene el color del texto */
    border-color: #e1e4e8 !important;      /* Mantiene el borde original */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* Ligera sombra de elevación */
}

/* IMPORTANTE: Elimina o comenta esta regla para que el icono NO cambie a blanco */
/* .card-small:hover .logo-wrapper {
    filter: brightness(0) invert(1);
} 
*/

/* Estado inicial del contenedor del logo */
.card-small .logo-wrapper {
    transition: transform 0.3s ease; /* Transición suave solo para el icono */
    backface-visibility: hidden;
}

/* Efecto al pasar por encima de la card */
.card-small:hover .logo-wrapper {
    transform: scale(1.15); /* El icono crece un 15% */
}



        .text-block { 
            flex: 1 1 auto;
            display: flex; 
            flex-direction: column; 
            gap: 3px; 
            min-width: 0; 
        }

        .text-title { 
			font-weight: 700; 
			font-size: 1rem; 
			line-height: 1.2; 
			text-wrap: balance; /* hace más armonico el texto en varias lineas */
		}
		
        .text-desc  { 
			font-weight: 500; 
			font-size: 0.8rem; 
			line-height: 1.2; 
			opacity: .9;
			text-wrap: balance; /* hace más armonico el texto en varias lineas */
			
		}

/*OVERLAY BOTONES GRANDES*/
        .card:hover .overlay { background: rgba(0,0,0,0.45); }