html, body {
overflow-x: hidden; /* ¡ESTO ESCONDE EL SCROLL HORIZONTAL! */
}
/* Variables de la Línea Gráfica */
:root {
--color-primary-red: #800f39; /* Rojo Oscuro / Vino */
--color-primary-red1: #5b5b5b;
--color-secondary-red: #800f39;
--color-dark-gray: #0d0d0dff; /* Gris oscuro / Negro para secciones de texto y pestañas activas */
--color-text-light: #ffffff; /* Blanco */
--color-background-light: #f5f5f5; /* Gris muy claro */
--color-border-gray: #cccccc;
--font-family-base: 'Roboto', sans-serif;
}
/* Base y Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family-base);
color: var(--color-dark-gray);
line-height: 1.6;
background-color: var(--color-background-light);
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.section {
padding: 40px 0; /* Espaciado por defecto en la parte superior e inferior */
}
/* Estilos de Tipografía y títulos */
.title-primary {
font-size: 2.2em;
font-weight: 900;
text-transform: uppercase;
color: var(--color-dark-gray);
margin-bottom: 15px;
}
.title-secondary {
font-size: 2.5em;
font-weight: 700;
text-transform: uppercase;
line-height: 1.1;
margin-bottom: 20px;
color: var(--color-text-light);
}
.title-tertiary {
font-size: 1.8em;
font-weight: 700;
text-transform: uppercase;
color: var(--color-text-light);
border-bottom: 2px solid var(--color-text-light);
padding-bottom: 10px;
margin-bottom: 20px;
}
.centered-title {
text-align: center;
}
.white-text {
color: var(--color-text-light);
}
/* Utilidades de Color */
.bg-primary-red {
background-color: var(--color-primary-red);
color: var(--color-text-light);
}
.bg-dark-gray {
background-color: var(--color-dark-gray);
color: var(--color-text-light);
}
/* Botón */
.btn-action {
display: block;
margin: 20px auto 0;
padding: 10px 30px;
background-color: var(--color-text-light);
color: var(--color-primary-red);
border: none;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
transition: background-color 0.3s;
}
.btn-action:hover {
background-color: var(--color-background-light);
}
/* 1. HERO Y BIENVENIDA */
.hero-section {
padding: 0;
}
.hero-image-container {
width: 100%;
overflow: hidden;
max-height: 500px;
position: absolute; /* Saca la imagen del flujo */
top: 0; /* La pega al borde superior */
left: 0;
z-index: 1;
}
.hero-image {
width: 100%;
height: 590px;
display: block;
object-fit: cover;
object-position: center 10%;
}
/* Estilos de Pestañas (Tabs) */
.welcome-container {
background-color: transparent;
padding: 20px;
margin-top: 460px;
}
.tab-buttons {
display: flex;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
}
.tab-link {
background-color: transparent;
color: var(--color-dark-gray);
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 1.1em;
font-weight: 600;
transition: background-color 0.3s, color 0.3s;
outline: none;
}
/* Estilo para la pestaña ACTIVA (Fiel a la maqueta) */
.tab-link.active {
background-color: var(--color-dark-gray);
color: var(--color-text-light);
border-radius: 4px 4px 0 0;
border-right: 1px solid var(--color-dark-gray);
border-top: 1px solid var(--color-dark-gray);
border-left: 1px solid var(--color-dark-gray);
border-bottom: 1px solid var(--color-dark-gray);
}
/* Contenido de cada pestaña */
.tab-content-welcome {
display: none; /* Oculto por defecto */
padding: 10px 20px;
line-height: 1.7;
color: var(--color-dark-gray);
text-align: left;
}
/* Muestra el contenido de la pestaña activa (JavaScript lo controla) */
.tab-content-welcome.active {
display: block;
}
.welcome-container .tab-content-welcome {
padding-left: 20px;
padding-right: 20px;
}
/* ======================================================= */
/* --- ESTILOS para el BANNER DEL FUNDADOR --- */
/* ======================================================= */
.founder-banner {
position: relative;
/* --- ¡EL TRUCO PARA "ROMPER" EL CONTENEDOR! --- */
width: 100vw; /* 1. Ancho = 100% del ancho de la PANTALLA */
left: 50%; /* 2. Mueve el banner al centro de la pantalla */
margin-left: -50vw; /* 3. Lo jala hacia la izquierda la mitad del ancho de la pantalla */
/* (El resto de tu código de altura y fondo) */
padding: 10px 40px;
background-image: url('img/autoridades1/doctor-quero.jpg');
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: flex-end;
/* ¡Quitamos el border-radius porque ahora llega a los bordes! */
/* border-radius: 10px; */
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.founder-overlay-text {
position: relative;
color: #333;
max-width: 60%;
text-shadow: none;
}
.founder-overlay-text h2 {
font-size: 2.8em;
margin-bottom: 20px;
font-weight: bold;
color: #800f39;
}
.founder-overlay-text p {
font-size: 1.1em;
line-height: 1.6;
margin-bottom: 15px;
}
@media (max-width: 992px) {
.founder-banner {
justify-content: center;
text-align: center;
background-position: center center;
}
.founder-overlay-text {
max-width: 80%;
background-color: rgba(255, 255, 255, 0.9);
padding: 25px;
border-radius: 8px;
}
}
@media (max-width: 768px) {
.founder-banner {
min-height: 450px;
justify-content: center;
text-align: center;
}
.founder-overlay-text {
max-width: 95%;
background-color: rgba(255, 255, 255, 0.92);
padding: 20px;
}
.founder-overlay-text h2 {
font-size: 2.2em;
}
}
/* 2. FERMÍN TORO (CSS Grid) */
.fermin-toro-grid {
display: grid;
grid-template-columns: 2fr 1fr; /* Texto más ancho que la imagen */
gap: 40px;
align-items: center;
}
.fermin-toro-grid .person-image {
width: 100%;
max-width: 390px;
justify-self: end;
}
/* 3. HISTORIA (Fondo Vino) */
.historia-section {
background-color: var(--color-primary-red); /* Fondo ahora es Vino */
padding: 40px 0;
color: var(--color-text-light); /* Texto debe ser blanco para contraste */
}
.historia-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
align-items: center;
}
.historia-grid .building-image {
width: 100%;
order: 1;
}
.historia-grid .text-block {
order: 2;
}
.historia-grid ul {
list-style: disc;
margin-left: 20px;
}
/* Estilo del título dentro de Historia (ahora es blanco sobre vino) */
.historia-section .title-secondary {
color: var(--color-text-light); /* Texto blanco */
text-align: left;
margin-bottom: 30px;
font-size: 2.2em;
}
/* SEPARADOR (Eliminado, pero la clase queda vacía para referencia) */
.section-separator-bar {
width: 100%;
height: 0;
margin: 0;
padding: 0;
}
/* 4. AUTORIDADES y 5. DECANOS */
.autoridades-section {
margin-top: 40px;
padding-top: 0 !important;
padding-bottom: 50px;
background-color: var(--color-background-light); /* Fondo claro para el contenido */
color: var(--color-dark-gray);
}
.autoridades-title-bar {
width: 100%;
padding: 20px 0;
margin-bottom: 30px;
}
.autoridades-title-bar .title-secondary {
color: var(--color-text-light) !important;
margin-bottom: 0;
}
.person-grid {
display: grid;
gap: 20px;
margin-top: 30px;
margin-bottom: 20px;
}
/* NUEVA CLASE ESPECÍFICA PARA AUTORIDADES (4 columnas) */
.four-items-autoridades {
grid-template-columns: repeat(4, 1fr);
}
.four-items {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Estilos de la tarjeta de persona */
.person-card {
position: relative;
cursor: pointer;
overflow: hidden;
}
.person-card img {
width: 100%;
height: auto;
display: block;
border-radius: 5px;
transition: transform 0.3s ease;
}
/* EFECTO HOVER/ACTIVO en la tarjeta de autoridad */
.authority-card.expanded img {
transform: scale(1.05);
opacity: 0.8;
}
/* ---------------------------------------------------- */
/* ESTILOS DEL ICONO DE FLECHA (Menu desplegable) */
/* ---------------------------------------------------- */
.collapse-icon {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 8px 0;
font-size: 1.5em;
color: var(--color-text-light);
background: rgba(0, 0, 0, 0.4);
line-height: 1;
transition: transform 0.3s ease;
}
/* Rotación de la flecha cuando la tarjeta está expandida (apuntando hacia arriba) */
.authority-card.expanded .collapse-icon {
transform: rotate(180deg);
}
/* ---------------------------------------------------- */
/* ESTILOS DEL CONTENIDO DESPLEGABLE DE AUTORIDADES */
/* ---------------------------------------------------- */
.authority-details-container {
padding: 30px 20px;
margin-top: 0;
text-align: left;
}
.authority-details-card {
display: none;
animation: fadeIn 0.5s;
}
.authority-details-card.active {
display: block;
}
.authority-title {
font-size: 1.2em;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
.authority-details-card p {
margin-bottom: 20px;
}
/* Animación simple de aparición */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.authority-detail, .decano-detail {
text-align: center;
margin: 10px auto;
max-width: 800px;
}
/* ---------------------------------------------------- */
/* ESTILOS DEL CONTENIDO DESPLEGABLE DE DECANOS */
/* ---------------------------------------------------- */
.decanos-section {
background-color: white;
padding-top: 0 !important;
color: var(--color-dark-gray);
}
.decanos-title-bar {
width: 100%;
padding: 20px 0;
margin-bottom: 30px;
}
/* Estilo para el fondo de detalles de decanos (color vino) */
.decano-details-container {
padding: 30px 20px;
margin-top: 0;
text-align: left;
color: var(--color-text-light); /* Texto blanco sobre fondo vino */
}
.decano-details-card {
display: none;
animation: fadeIn 0.5s;
}
.decano-details-card.active {
display: block;
}
.decano-title {
font-size: 1.2em;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
}
.decanos-title-bar .title-secondary {
text-align: center;
color: var(--color-text-light) !important;
margin-bottom: 0;
}
.decano-details-card p {
margin-bottom: 20px;
text-align: left;
}
/* Ajuste del botón */
.decano-details-card .btn-action {
display: inline-block;
margin-left: 0;
margin-right: auto;
}
/* EFECTO HOVER/ACTIVO en la tarjeta de decano (similar a la autoridad) */
.decano-card.expanded img {
transform: scale(1.05);
opacity: 0.8;
}
/* Rotación de la flecha en la tarjeta de decano */
.decano-card.expanded .collapse-icon {
transform: rotate(180deg);
}
/* 6. MISIÓN Y VISIÓN (Flexbox) */
.mision-vision-section1 {
background-color: var(--color-primary-red1);
}
.mision-vision-flex {
display: flex;
gap: 40px;
}
.mision-block, .vision-block {
flex: 1;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
}
/* 7. NUESTROS VALORES */
.valores-header {
text-align: center;
padding: 15px 0;
}
.valores-nav {
display: flex;
justify-content: center;
background-color: var(--color-background-light); /* Fondo claro para la navegación */
border-bottom: 1px solid var(--color-border-gray);
border-top: 1px solid var(--color-border-gray);
padding: 0; /* Eliminamos el padding para que los botones lo proporcionen */
}
.valores-nav .tab-link {
/* Aseguramos que los botones se vean bien en esta barra */
background-color: transparent;
color: var(--color-dark-gray);
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 1em;
font-weight: 700; /* Más peso para los valores */
text-transform: uppercase;
transition: background-color 0.3s, color 0.3s;
outline: none;
/* Remover estilos de colapso antiguos */
border-radius: 0;
}
.valores-nav .tab-link.active {
background-color: var(--color-primary-red); /* Color Vino cuando está activo */
color: var(--color-text-light);
border-radius: 0; /* Sin bordes redondeados en la barra central */
/* Eliminar los bordes extra que se añadieron al .tab-link.active original */
border: none;
}
.valores-details-container {
background-color: var(--color-background-light);
padding: 30px 10px;
color: var(--color-dark-gray);
/* Usamos .container para centrar y limitar el ancho */
}
.valor-details-card {
/* Usamos .tab-content para la lógica de mostrar/ocultar */
display: none;
max-width: 900px;
margin: 0 auto;
text-align: center;
line-height: 1.7;
padding:50px 20px;
}
.valor-details-card.active {
display: block;
}
.valor-details-card h3 {
font-size: 1.5em;
color: var(--color-primary-red);
margin-bottom: 15px;
}
.valor-item {
text-decoration: none;
color: var(--color-dark-gray);
padding: 0 20px;
font-weight: 700;
text-transform: uppercase;
}
.footer-text-section {
padding: 30px 0;
font-size: 0.9em;
text-align: center;
color: #666;
background-color: var(--color-background-light);
}
.tab-content {
display: none; /* Oculto por defecto: SOLO para la sección VALORES */
line-height: 1.7;
color: var(--color-dark-gray);
text-align: left; /* Alineación del contenedor a la izquierda */
}
.tab-content p {
text-align: left !important;
}
.tab-content.active {
display: block;
}
/* ======================================================= */
/* MEDIA QUERIES para Responsividad (Dispositivos Móviles) */
/* ======================================================= */
@media (max-width: 768px) {
/* Ajuste general de títulos */
.title-primary { font-size: 1.8em; }
.title-secondary { font-size: 2em; }
.title-tertiary { font-size: 1.5em; }
.hero-image-container,
.hero-image {
max-height: 250px;
height: 250px;
}
.welcome-container {
margin-top: 220px;
}
/* FERMÍN TORO y HISTORIA: Apilado */
.fermin-toro-grid, .historia-grid {
grid-template-columns: 1fr;
text-align: center;
}
/* Reordenar en móvil para Fermín Toro (Imagen arriba, Texto abajo) */
.fermin-toro-grid .person-image {
order: 1;
margin: 0 auto;
justify-self: center;
}
.fermin-toro-grid .text-block {
order: 2;
}
/* Reordenar en móvil para Historia (Imagen arriba, Texto abajo) */
.historia-grid .building-image {
order: 1;
}
.historia-grid .text-block {
order: 2;
}
.historia-grid ul {
text-align: left;
}
/* AUTORIDADES y DECANOS */
.four-items-autoridades, .four-items {
grid-template-columns: repeat(2, 1fr);
}
/* MISIÓN Y VISIÓN: Apilado */
.mision-vision-flex {
flex-direction: column;
}
/* VALORES: Wrap */
.valores-nav {
flex-wrap: wrap;
padding: 10px 0;
}
.valor-item {
flex-basis: 45%;
text-align: center;
padding: 10px 5px;
margin: 5px 0;
}
/* Pestañas: Apiladas en móvil */
.tab-buttons {
flex-direction: column;
}
.tab-link {
width: 100%;
text-align: left;
}
}
/*iconos de trabajo y estudio */
.trayectoria-item {
/* Usamos FLEX para alinear lado a lado */
display: flex;
flex-direction: row; /* Asegura dirección horizontal */
align-items: flex-start; /* Alinea arriba */
margin-bottom: 20px;
width: 100%; /* El contenedor ocupa todo el ancho disponible */
}
.trayectoria-icon {
/* COLUMNA IZQUIERDA (Icono) */
display: flex; /* Para centrar el icono en su propia caja */
justify-content: center; /* Centrado horizontal del icono */
/* ESTAS 3 PROPIEDADES SON LA CLAVE: */
width: 40px; /* Ancho fijo */
min-width: 40px; /* Ancho mínimo obligatorio (evita que se encoja) */
margin-right: 15px; /* Separación física con el texto */
/* Estilo visual */
font-size: 1.3rem;
color: #ffffff;
padding-top: 2px; /* Ajuste óptico para alinear con la primera línea de texto */
}
.trayectoria-text {
/* COLUMNA DERECHA (Texto) */
flex: 1; /* Ocupa TODO el espacio restante */
display: block; /* Se comporta como bloque */
/* Estilo visual */
text-align: left;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-light);
}