/* --- HERO BANNER (HEADER) --- */

.hero-banner {
    /* 1. Definimos la altura: 50% de la ventana o mínimo 400px */
    height: 50vh;
    min-height: 400px;
    width: 100%;
    
    /* 2. Configuración del fondo */
    background-size: cover;       /* Escala la imagen para cubrir todo */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat;
    
    /* 3. Centrado del texto (Flexbox) */
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    
    /* 4. Posicionamiento para el overlay */
    position: relative;
    color: white; /* Texto blanco por defecto */
}

/* Capa oscura semitransparente sobre la imagen (Overlay) */
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Negro al 50% de opacidad */
    z-index: 1; /* Se coloca encima de la imagen pero bajo el texto */
}

/* Estilo del H1 dentro del banner */
.hero-banner h1 {
    position: relative; /* Para que quede encima del overlay */
    z-index: 2;         /* Mayor nivel que el overlay */
    
    font-size: 3rem;    /* Tamaño grande */
    font-weight: 800;   /* Extra bold */
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Espaciado entre letras */
    text-align: center;
    text-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Sombra para mejor lectura */
    margin: 0;
    padding: 0 20px;
}

/* Ajuste Responsivo para móviles */
@media (max-width: 768px) {
    .hero-banner {
        height: 40vh; /* Un poco más bajo en móviles */
    }
    .hero-banner h1 {
        font-size: 2rem; /* Texto más pequeño en móviles */
    }
}

/* Career Sections */
.career-sections {
    padding: 50px 5%;
    text-align: center;
}
.career-sections h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: var(--primary-color);
}
.career-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
    justify-content: center;
    perspective: 1000px; /* Agregado para el efecto de rotación 3D */
}

/* Definimos un degradado púrpura oscuro que se usará como overlay */
.overlay-gradient {
    background-image: linear-gradient(to top, rgba(150, 42, 76, 0.7), rgba(150, 42, 76, 0.4));
}

/* Estilo para simular el efecto de la imagen subiendo o agrandándose en hover */
.card-container {
    overflow: hidden;
    position: relative;
}

.card-container img {
    transition: transform 0.5s ease-in-out;
    transform-origin: center center;
}

.card-container:hover img {
    transform: scale(1.05); /* Zoom ligero al pasar el ratón */
}

/* Asegura que el contenido (texto y botón) esté siempre encima */
.card-content {
    z-index: 10;
}

/*
Clase para crear el efecto de "punta de flecha" o "bandera" en la sección superior.
Utiliza un pseudo-elemento ::after para crear el triángulo blanco.
*/
.decan-header {
    position: relative;
    background-color: #f7f7f7; /* Fondo gris claro */
}

.decan-header::after {
    content: '';
    position: absolute;
    bottom: -30px; /* Mueve el triángulo hacia abajo para que quede fuera del div */
    left: 0;
    width: 0;
    height: 0;
    /* Crea el triángulo usando bordes */
    border-left: 50vw solid transparent; /* Mitad del ancho de la vista (para responsividad) */
    border-right: 50vw solid transparent;
    border-top: 30px solid #f7f7f7; /* Color del fondo (gris claro) */
}

/* Contenedor de la imagen con el color de fondo sólido */
.image-container {
    background-color: #f86f7b; /* Color similar al rojo/rosa de tu imagen */
}

/* Estilo para el título DECANO */
.decan-title {
    position: relative;
    display: inline-block;
    font-size: 2.5rem; /* Ajuste para el tamaño del texto */
    font-weight: 900;
    color: #2c2c2c; /* Color oscuro para el texto */
}

/* Línea inferior roja bajo el título DECANO */
.decan-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background-color: #962a4c; /* Color principal */
}

/* Definimos la altura de la sección para que sea prominente en la vista */
.full-height-section {
    /* Ahora que ocupa todo el ancho, nos aseguramos de que sea alta */
    min-height: 80vh; 
}

/* Contenedor de la imagen (lado izquierdo) */
.image-bg {
    /* Usamos la imagen de fondo del usuario */
    background-image: url('img/DIPLOMADO-FOTO.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Aplicamos una superposición de color semi-transparente sobre la imagen */
    position: relative;
}

/* Capa de color oscuro semi-transparente sobre la imagen para mejorar contraste del texto (opcional) */
.image-bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2); /* Oscurecimiento ligero */
}

/* Estilo para el contenedor de contenido (lado derecho) con el color vino */
.content-block {
    background-color: #962a4c; /* Color principal vino/púrpura */
}

/* Estilos específicos para los textos y botones de los programas */
.program-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.download-btn {
    background-color: white;
    color: #962a4c; /* Texto del color principal */
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.download-btn:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* --- NUEVOS ESTILOS PARA EL DISEÑO DE ESPECIALIZACIONES --- */

/* Definición de colores base */
:root {
    --color-principal-vino: #962a4c;
    --color-secundario-texto: #1f2937; /* Gris oscuro para el texto principal */
    --color-destacado-texto: #8b5cf6; /* Morado/Amarillo para destacar (opcional) */
}

/* Contenedor principal 50/50 - Ocupa todo el ancho */
.seccion-full-width {
    min-height: 80vh;
    background-color: white; /* El fondo es blanco ahora */
}

/* Columna de Contenido (Izquierda) */
.bloque-contenido {
    /* El contenido ahora es blanco por defecto (text-white ya no aplica a todo el bloque) */
    color: var(--color-secundario-texto); 
}

/* Contenedor de la Imagen (Derecha) */
.fondo-imagen-derecha {
    /* Usamos la imagen del usuario o una similar */
    background-image: url('img/ESPECIALIZACION-FOTO.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Estilo para los bloques de cada programa */
.tarjeta-programa {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido */
    text-align: center; /* Centra el texto */
    padding: 1rem;
    margin-bottom: 2rem; /* Espacio entre filas */
}

/* Estilo para el botón DESCARGAR */
.boton-descarga-vino {
    background-color: var(--color-principal-vino); /* Fondo Vino */
    color: white; /* Texto Blanco */
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border: none;
    text-transform: uppercase;
    font-weight: 600;
}

.boton-descarga-vino:hover {
    background-color: #7b2140; /* Vino más oscuro al pasar el ratón */
    transform: translateY(-1px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* Títulos */
.titulo-destacado {
    color: var(--color-principal-vino);
}

/* --- SEGUNDO SET DE VARIABLES CSS PARA POSTDOCTORADOS --- */

:root {
    --color-fondo-primario: #333333; /* Gris oscuro para el bloque de contenido */
    --color-texto-principal: #f3f4f6; /* Blanco/Gris claro */
    --color-resaltado-hover: #b91c1c; /* Rojo oscuro para hover del botón */
    --color-borde-seccion: #962a4c; /* Color vino/púrpura para el borde inferior */
}


/* Contenedor principal de la sección (100% ancho) */
.contenedor-ingenieria-total {
    min-height: 80vh;
    background-color: white; 
    overflow: hidden;
    /* El borde en la parte inferior de la imagen se simula con un degradado en la imagen */
}

/* Bloque de Imagen (Columna Izquierda 50%) */
.zona-visual-ingenieria {
    /* Imagen de fondo representativa de laboratorio/ingeniería */
    background-image: url('img/ESPECIALIZACION-INGENIERIA.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Bloque de Contenido (Columna Derecha 50%) */
.bloque-contenido-ingenieria {
    background-color: var(--color-fondo-primario);
    color: var(--color-texto-principal);
}

/* Estilo para cada tarjeta de programa */
.tarjeta-programa-grid {
    text-align: left; /* Alineación del texto dentro de las tarjetas */
    padding-bottom: 0.5rem;
}

/* Botón DESCAGAR (diseño plano, color blanco y texto oscuro) */
.boton-descarga-claro {
    background-color: white;
    color: var(--color-fondo-primario); 
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    padding: 0.6rem 1.5rem;
}

.boton-descarga-claro:hover {
    background-color: #f0f0f0;
    transform: translateY(-1px);
}

/* Estilo para el título de la sección */
.titulo-seccion-claro {
    color: white;
    font-weight: 800; /* Extra bold */
    letter-spacing: -0.025em; /* tracking-tight */
}

/* --- TERCER SET DE VARIABLES CSS PARA MAESTRÍAS --- */

:root {
    --color-fondo-maestrias: #962a4c; /* Fondo vino del bloque de contenido */
    --color-texto-principal-maestrias: #ffffff; /* Texto blanco */
    --color-boton-descarga-maestrias: #ffffff; /* Fondo del botón de descarga (blanco) */
    --color-texto-boton-maestrias: #962a4c; /* Texto del botón de descarga (vino) */
}

/* Contenedor principal 50/50 - Ocupa todo el ancho */
.contenedor-maestrias-full {
    min-height: 80vh;
    overflow: hidden;
}

/* Columna de Contenido (Izquierda) - Fondo Vino */
.bloque-maestrias-contenido {
    background-color: var(--color-fondo-maestrias);
    color: var(--color-texto-principal-maestrias);
}

/* Contenedor de la Imagen (Derecha) */
.fondo-maestrias-derecha {
    /* Usamos la imagen del usuario o una similar */
    background-image: url('img/MAESTRIA-FOTO.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Estilo para el título de la sección */
.titulo-maestrias-principal {
    font-weight: 800; /* Extra bold */
    letter-spacing: -0.025em; 
    line-height: 1.1;
}

/* Estilo para el botón DESCARGAR (Blanco y texto vino) */
.boton-maestrias-claro {
    background-color: var(--color-boton-descarga-maestrias); 
    color: var(--color-texto-boton-maestrias); 
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    padding: 0.5rem 1.25rem;
}

.boton-maestrias-claro:hover {
    background-color: #f0f0f0; /* Un blanco un poco más oscuro al pasar el ratón */
    transform: translateY(-1px);
}

/* Estilos para los títulos de los programas */
.titulo-programa-maestrias {
    font-weight: 700; /* Bold */
    line-height: 1.3;
}

/* --- CUARTO SET DE VARIABLES CSS PARA POSTDOCTORADOS --- */


:root {
    --color-fondo-principal-doct: #ffffff; /* Fondo blanco */
    --color-texto-oscuro-doct: #374151; /* Gris oscuro para el texto principal */
    --color-resaltado-doct: #962a4c; /* Color vino/púrpura para botones y títulos */
    --color-texto-claro-doct: #f9fafb; /* Blanco/Gris claro */
}

/* Contenedor principal 50/50 - Ocupa todo el ancho */
.contenedor-doct-full {
    min-height: 85vh;
    overflow: hidden;
}

/* Columna de Imagen (Izquierda) */
.zona-visual-doct {
    /* Imagen de fondo representativa de biblioteca/investigación */
    background-image: url('img/DOCTORADO-FOTO.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Columna de Contenido (Derecha) - Fondo Blanco */
.bloque-contenido-doct {
    background-color: var(--color-fondo-principal-doct);
    color: var(--color-texto-oscuro-doct);
}

/* Estilo para el título principal */
.titulo-doct-principal {
    color: #1f2937; /* Casi negro */
    font-weight: 700; /* Bold */
    letter-spacing: -0.025em; 
    line-height: 1.1;
}

/* Estilo para el título de los programas */
.titulo-programa-doct {
    color: #1f2937; /* Casi negro */
    font-weight: 600; /* Semi-bold */
}

/* Estilo para el botón DESCARGAR (Fondo vino/púrpura y texto blanco) */
.boton-descarga-doct {
    background-color: var(--color-resaltado-doct); 
    color: var(--color-texto-claro-doct); 
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(150, 42, 76, 0.4); /* Sombra intensa del color vino */
    text-transform: uppercase;
    font-weight: 700;
    border: none;
    padding: 0.75rem 2rem;
    width: 100%;
}

.boton-descarga-doct:hover {
    background-color: #7c2444; /* Vino un poco más oscuro al pasar el ratón */
    transform: translateY(-1px);
}

/* --- QUINTO SET DE VARIABLES CSS PARA POSTDOCTORADOS --- */

:root {
    --color-fondo-postdoct: #5c6770; /* Gris oscuro para el bloque de contenido */
    --color-texto-postdoct-principal: #ffffff; /* Texto blanco */
    --color-boton-postdoct: #ffffff; /* Fondo del botón de descarga (blanco) */
    --color-texto-boton-postdoct: #5c6770; /* Texto del botón de descarga (gris oscuro) */
    --color-texto-subtitulo-postdoct: #d1d5db; /* Gris claro para subtítulos y descripción de programas */
}

/* Contenedor principal 50/50 - Ocupa todo el ancho */
.contenedor-postdoct-full {
    min-height: 80vh;
    overflow: hidden;
}

/* Columna de Contenido (Izquierda) - Fondo Gris Oscuro */
.bloque-contenido-postdoct {
    background-color: var(--color-fondo-postdoct);
    color: var(--color-texto-postdoct-principal);
}

/* Contenedor de la Imagen (Derecha) */
.zona-visual-postdoct {
    /* Imagen de fondo representativa de la ceremonia de grado */
    background-image: url('img/postdoctorado1.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Estilo para el título de la sección */
.titulo-postdoct-principal {
    font-weight: 700; /* Bold */
    letter-spacing: -0.025em; 
    line-height: 1.1;
}

/* Estilo para el botón DESCARGAR (Blanco y texto gris oscuro) */
.boton-descarga-postdoct {
    background-color: var(--color-boton-postdoct); 
    color: var(--color-texto-boton-postdoct); 
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    padding: 0.75rem 2rem;
    width: 100%;
}

.boton-descarga-postdoct:hover {
    background-color: #f0f0f0; /* Un blanco un poco más oscuro al pasar el ratón */
    transform: translateY(-1px);
}

/* Estilos para los títulos de los programas */
.titulo-programa-postdoct {
    font-weight: 700; /* Bold */
    line-height: 1.3;
}


/* --- SEXTO SET DE VARIABLES CSS PARA BARRA DE VALORES --- */

:root {
    /* Colores para la barra central (fondo blanco, texto negro) */
    --color-fondo-barra-val: #ffffff; 
    --color-texto-barra-val: #1f2937; /* Gris muy oscuro, casi negro */
    /* Colores para las franjas de fondo arriba y abajo (gris oscuro/negro) */
    --color-franja-superior: #5c6770; /* Gris oscuro del Postdoctorado */
    --color-franja-inferior: #1f2937; /* Negro/Gris muy oscuro */
}

/* Estilo para el contenedor principal, asegurando que ocupe todo el ancho */
.contenedor-barra-val-full {
    display: flex;
    flex-direction: column;
}

/* La franja superior y la inferior dan el efecto de marco */
.franja-fondo-superior-val,
.franja-fondo-inferior-val {
    background-color: var(--color-franja-inferior); 
    height: 4vh; /* Ajuste la altura para simular las franjas de tu imagen */
}

.franja-fondo-superior-val {
    background-color: #5c6770; /* Usamos el gris de la sección anterior */
}

/* La barra de título central, que es blanca */
.barra-titulo-valores {
    background-color: var(--color-fondo-barra-val);
    color: var(--color-texto-barra-val);
    /* Sombra sutil para que destaque sobre los colores oscuros */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* Estilo del texto del título */
.texto-titulo-valores {
    font-size: 1.875rem; /* text-3xl */
    line-height: 2.25rem; 
    font-weight: 800; /* Extra bold */
    text-align: center;
}

@media (min-width: 640px) {
    .texto-titulo-valores {
        font-size: 2.5rem; /* sm:text-4xl */
        line-height: 2.5rem;
    }
}

.image-box-base {
    overflow: hidden; /* Importante para que el zoom de la imagen no salga del contenedor */
}

.zoom-image {
    transition: transform 0.4s ease-in-out;
}

.section-block:hover .zoom-image {
    
    transform: scale(1.05);
}