/* Ocultar el objeto de búsqueda por defecto*/
.site-header .search-form, 
#search-form,
.search-form {
    display: none !important;
}

/* Ocultar el enlace o botón de búsqueda avanzada */
.advanced-search, 
a[href*="search"], 
.search-link {
    display: none !important;
}




/* 1. Importar la fuente (si usas una de Google Fonts) */
@import url('https://googleapis.com');

/* 2. TEXTO GENERAL (Cuerpo, párrafos, listas, menús) */
body, p, span, li, a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important; /* Tamaño del texto normal (cambiar de ser necesario) */
    line-height: 1.6 !important; /* Controla el espacio entre líneas para que sea legible */
}

/* 3. TÍTULO PRINCIPAL DEL SITIO (En la cabecera) */
.site-title, .site-title a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 30px !important; 
    font-weight: 700 !important;
}

/* 4. TÍTULOS DE LAS PÁGINAS Y RECURSOS (Los más grandes, H1) */
h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 34px !important;
    font-weight: 700 !important;
}

/* 5. SUBTÍTULOS (Secciones internas, H2 y H3) */
h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 38px !important;
    font-weight: 600 !important;
}

h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
}



/*(apagado)*****Ocultar únicamente el menú de navegación dentro del área del pie de página*****(Apagado) */
/*footer nav, */
/*.site-footer nav,*/
/*footer ul {*/
 /*   display: none !important;*/
/*}*/
/***(esta opción de ocultar se encuentra temporalmente apagada) ***/




/* 1. CONTENEDOR DEL MENÚ (Ajustado para nivelar la altura) */
footer .navigation {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;    
    gap: 12px !important;              
    padding: 0 !important;
    list-style: none !important;
    
    /* --- CONTROL DE ALTURA --- */
    margin-top: 35px !important; /* Añade espacio arriba para empujar todo el bloque hacia abajo */
}

/* 2. OPCIONES DEL MENÚ */
footer .navigation a, 
footer .navigation li {
    white-space: nowrap !important;    
    display: block !important;         
    text-align: center !important;     
    
    font-family: 'Helvetica', 'Arial', sans-serif !important; 
    font-size: 15px !important;                               
    font-weight: normal !important;                           
}

/* 3. TÍTULO DEL MENÚ */
footer .navigation::before {
    content: "Menú de Navegación";     
    display: block !important;
    text-align: center !important;
    
    font-family: 'Georgia', 'Times New Roman', serif !important; 
    font-size: 20px !important;                                  
    font-weight: bold !important;                                
    
    color: #ffffff !important;         
    margin-bottom: 18px !important; /* Espacio extra entre el título y el primer enlace "Inicio" */   
}



/* Oculta el tercer elemento del menú del footer (POLÍTICAS) */
footer .navigation a:nth-child(2),
footer .navigation li:nth-child(2) {
    display: none !important;
}


/* Oculta el tercer elemento del menú del footer (SITIOS) */
footer .navigation a:nth-child(3),
footer .navigation li:nth-child(3) {
    display: none !important;
}

/* Oculta el cuarto elemento del menú del footer (UCLA) */
footer .navigation a:nth-child(4),
footer .navigation li:nth-child(4) {
    display: none !important;
}



/* ========================================================
  Inicio: EFECTOS para tarjeta del sitio (en prueba)
   ======================================================== */

/* --- CONTENEDOR EXTERNO (Controla el flujo normal de la página) --- */
.tarjeta-opcion-contenedor {
    width: 100%;
    max-width: 800px;        
    margin: 30px auto 30px auto !important; /* Asegura un margen limpio arriba y abajo */
    position: relative !important;
    display: block !important;
    clear: both !important; /* Evita que elementos flotantes se encimen */
}

/* --- BLOQUE BASE DE LA TARJETA --- */
.tarjeta-opcion-bloque {
    display: block !important;
    width: 100% !important;
    height: 450px !important; /* Altura fija solicitada */
    position: relative !important;
    overflow: hidden !important;
    border-radius: 6px;
    background-color: #333333; 
}

/* --- LA IMAGEN DE FONDO --- */
.tarjeta-opcion-imagen {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important; /* Forzada al fondo absoluto */
    transition: transform 0.5s ease !important;
}

/* --- TRUCO DEL ENLACE INVISIBLE --- */
.tarjeta-opcion-vinculo-invisible {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important; /* Por encima de todo para capturar el clic */
    text-decoration: none !important;
}

/* --- RECTÁNGULO DE TEXTO (Fijo en la base de la tarjeta) --- */
.tarjeta-opcion-contenido {
    position: absolute !important;
    bottom: 0 !important;         
    left: 0 !important;           
    width: 100% !important;       
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.70) !important; /* Opacidad controlada */
    padding: 25px 30px !important;
    z-index: 2 !important; /* Por delante de la imagen, detrás del enlace invisible */
    
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* --- SOLUCIÓN DEFINITIVA AL TEXTO AZUL (Fuerza color blanco) --- */
.tarjeta-opcion-bloque .tarjeta-opcion-titulo,
.tarjeta-opcion-contenido .tarjeta-opcion-titulo,
.tarjeta-opcion-titulo {
    margin: 0 0 8px 0 !important;
    font-size: 21px !important;       
    font-weight: 600 !important;
    color: #FFFFFF !important; /* Blanco puro */
    text-decoration: none !important;
    font-family: Arial, sans-serif !important;
}

.tarjeta-opcion-bloque .tarjeta-opcion-descripcion,
.tarjeta-opcion-contenido .tarjeta-opcion-descripcion,
.tarjeta-opcion-descripcion {
    margin: 0 !important;
    font-size: 14.5px !important;       
    line-height: 1.6 !important;      
    color: #FFFFFF !important; /* Blanco puro */
    text-decoration: none !important;
    font-family: Arial, sans-serif !important;
}

/* ========================================================
   EFECTOS UNIFICADOS AL ACERCAR EL CURSOR (HOVER)
   ======================================================== */

.tarjeta-opcion-bloque:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.45) !important;
}

/* El bloque único de texto sube levemente */
.tarjeta-opcion-bloque:hover .tarjeta-opcion-contenido {
    transform: translateY(-5px) !important; 
    background: rgba(0, 0, 0, 0.85) !important; 
}

/* La imagen de la biblioteca hace zoom */
.tarjeta-opcion-bloque:hover .tarjeta-opcion-imagen {
    transform: scale(1.04) !important;
}

/* ========================================================
  Fin: EFECTOS para tarjeta del sitio (en prueba)
   ======================================================== */


/*========================================================
Inicio: efecto de scroll del bloque HTML - no funcionó (pendiente)
   ==========================================================*/
/* --- CONFIGURACIÓN DE ANIMACIÓN COMPATIBLE OMEKA S --- */
.animar-al-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* El navegador cambia el estado de forma automática al entrar en el campo visual */
@supports (animation-timeline: view()) {
    .animar-al-scroll {
        animation: aparecerBloque linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 25%;
    }
}

/* Respaldo tradicional si el navegador es antiguo */
.animar-al-scroll {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.8s ease-in-out;
}

@keyframes aparecerBloque {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ========================================================
  Fin: efecto de scroll del bloque HTML - no funcionó (pendiente)
   ======================================================== */

/*======================INICIO===================================
   OTRO EFECTO DE LA TARJETA
   ======================================================== */
/* --- CONTENEDOR EXTERNO --- */
.tarjeta-panoramica-contenedor {
    width: 100%;
    max-width: 800px;        /* Tamaño panorámico ideal */
    margin: 0 auto 30px auto;/* Centra la tarjeta en la página */
    box-sizing: border-box !important;
}

/* --- ENLACE BASE DE LA TARJETA (Control de animación unificado) --- */
.tarjeta-transparente-enlace {
    display: block !important;
    width: 100% !important;
    height: 420px !important; /* Altura exacta de tu diseño anterior */
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: inherit !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    cursor: pointer;
    
    /* Animación del bloque completo al pasar el mouse */
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* --- LA IMAGEN DE FONDO --- */
.tarjeta-imagen-fondo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Cubre todo el fondo sin deformarse */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;        /* Forzada estrictamente por detrás del texto */
    transition: transform 0.25s ease !important;
}

/* --- BLOQUE DE TEXTO CON OPACIDAD (Ocupa la base de la tarjeta) --- */
.fondo-gris-variable {
    position: absolute !important;
    bottom: 0 !important;         /* Pegado al borde de abajo */
    left: 0 !important;
    width: 100% !important;
    height: 42% !important;       /* Ocupa exactamente el 42% como tu código original */
    z-index: 2 !important;        /* Flota por delante de la imagen */
    box-sizing: border-box !important;
    
    /* TU CONFIGURACIÓN ORIGINAL DE COLOR, MÁRGENES Y BORDES */
    background: rgba(190, 200, 209, 0.68) !important; /* Gris translúcido base */
    padding: 25px 24px 20px !important;
    border-top: 6px solid #0D0D0D !important;          /* Línea negra superior */
    
    /* Animación del fondo del texto */
    transition: background 0.25s ease, transform 0.25s ease !important;
}

/* --- ESTILOS DE TEXTO INTERNOS (Evitan conflictos con Omeka S) --- */
.tarjeta-titulo-interno {
    margin: 0 0 10px 0 !important; 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    text-align: center !important; 
    color: #FFFFFF !important;    /* Título siempre blanco */
    font-family: Arial, sans-serif !important;
}

.tarjeta-descripcion-interna {
    margin: 0 !important; 
    font-size: 14.5px !important; 
    line-height: 1.65 !important; 
    text-align: justify !important; /* Justificado como lo solicitaste */
    color: #0D0D0D !important;    /* Texto oscuro original para legibilidad */
    font-family: Arial, sans-serif !important;
}

/* ========================================================
   EFECTOS UNIFICADOS AL ACERCAR EL CURSOR (HOVER)
   ======================================================== */
/* --- CONTENEDOR EXTERNO --- */
.tarjeta-panoramica-contenedor {
    width: 100%;
    max-width: 800px;        
    margin: 0 auto 30px auto;
    box-sizing: border-box !important;
}

/* --- CONTENEDOR BASE DE LA TARJETA --- */
.tarjeta-transparente-bloque {
    display: block !important;
    width: 100% !important;
    height: 420px !important; /* Altura exacta de tu diseño anterior */
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    
    /* Animación del bloque completo al pasar el mouse */
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* --- LA IMAGEN DE FONDO --- */
.tarjeta-imagen-fondo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important; /* Forzada al fondo absoluto */
    transition: transform 0.25s ease !important;
}

/* --- TRUCO DEL ENLACE INVISIBLE (Cubre toda la tarjeta) --- */
.tarjeta-enlace-invisible {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important; /* Se pone por encima de todo para capturar el clic */
    text-decoration: none !important;
}

/* --- BLOQUE DE TEXTO CON OPACIDAD (Ocupa la base) --- */
.fondo-gris-variable {
    position: absolute !important;
    bottom: 0 !important;         
    left: 0 !important;
    width: 100% !important;
    height: 42% !important;       /* Ocupa exactamente el 42% de tu código anterior */
    z-index: 2 !important;        /* Flota por delante de la imagen, detrás del enlace invisible */
    box-sizing: border-box !important;
    
    /* TU CONFIGURACIÓN ORIGINAL DE COLOR, MÁRGENES Y BORDES */
    background: rgba(190, 200, 209, 0.68) !important; 
    padding: 25px 24px 20px !important;
    border-top: 6px solid #0D0D0D !important;          
    
    /* Animación del fondo del texto */
    transition: background 0.25s ease, transform 0.25s ease !important;
}

/* --- ESTILOS DE TEXTO INTERNOS (Obliga el renderizado) --- */
.tarjeta-titulo-interno {
    margin: 0 0 10px 0 !important; 
    font-size: 19px !important; 
    font-weight: 700 !important; 
    text-align: center !important; 
    color: #FFFFFF !important;    /* Título blanco */
    font-family: Arial, sans-serif !important;
}

.tarjeta-descripcion-interna {
    margin: 0 !important; 
    font-size: 14.5px !important; 
    line-height: 1.65 !important; 
    text-align: justify !important; /* Justificado */
    color: #0D0D0D !important;    /* Texto oscuro original */
    font-family: Arial, sans-serif !important;
}

/* ========================================================
   EFECTOS UNIFICADOS AL ACERCAR EL CURSOR (HOVER)
   ======================================================== */

/* 1. Al pasar el cursor sobre la tarjeta, todo el bloque se eleva */
.tarjeta-transparente-bloque:hover {
    transform: translateY(-6px) !important; 
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important; 
}

/* 2. El bloque de texto cambia de color al hacer hover sobre el contenedor */
.tarjeta-transparente-bloque:hover .fondo-gris-variable {
    background: rgba(175, 185, 195, 0.85) !important; 
    transform: translateY(-2px) !important;
}

/* 3. La imagen del fondo reacciona con el sutil zoom */
.tarjeta-transparente-bloque:hover .tarjeta-imagen-fondo {
    transform: scale(1.03) !important;
}



/* =================FIN=========================================
   OTRO EFECTO DE LA TARJETA
   ======================================================== */

/*================###########################################============================*/

/*=========INICIO============TARJETA ÚNICA CON TRES EFECTOS EN UN BLOQUE=========
    ==============================================================================*/
/* --- CONTENEDOR GENERAL DE LA FILA --- */
.fila-tarjetas-ucla {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important; 
    gap: 25px !important;              
    width: 100% !important;
    max-width: 1200px !important;      
    margin: 30px auto !important;
    box-sizing: border-box !important;
    clear: both !important;
}

/* --- BLOQUE BASE DE CADA TARJETA --- */
.tarjeta-presentacion-bloque {
    flex: 1 !important;                
    min-width: 280px !important;       
    max-width: 380px !important;       
    height: 430px !important;          
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;    
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
    background-color: #222222 !important;
    
    /* Efecto de elevación base idéntico para mantener armonía al flotar */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
}

.tarjeta-presentacion-bloque:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.4) !important;
}

/* --- LA IMAGEN DE FONDO BASE --- */
.tarjeta-presentacion-imagen {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
/* Modifica el "0.6s" (0.6 segundos) por el tiempo que desees (Efecto más lento y dramático: Sube el valor a 1.2s o 1.5s. Efecto más rápido y enérgico: Baja el valor a 0.3s o 0.2s.) */
    transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* --- ENLACE INVISIBLE SUPERPUESTO --- */
.tarjeta-presentacion-enlace {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
    text-decoration: none !important;
}

/* --- CUADRO DE TEXTO TRASLÚCIDO BASE --- */
.tarjeta-presentacion-contenido {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    background: rgba(0, 0, 0, 0.68) !important; 
    padding: 22px 20px !important;
    border-top: 5px solid #0D0D0D !important; 
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s ease !important;
}

/* --- TEXTOS EN BLANCO --- */
.tarjeta-presentacion-bloque .tarjeta-presentacion-titulo,
.tarjeta-presentacion-titulo {
    margin: 0 0 6px 0 !important; font-size: 19px !important; font-weight: 700 !important;
    color: #FFFFFF !important; font-family: Arial, sans-serif !important;
}
.tarjeta-presentacion-bloque .tarjeta-presentacion-descripcion,
.tarjeta-presentacion-descripcion {
    margin: 0 !important; font-size: 13.8px !important; line-height: 1.5 !important;
    text-align: justify !important; color: #FFFFFF !important; font-family: Arial, sans-serif !important;
}

/* ========================================================
   EFECTOS HOVER ASIMÉTRICOS Y ALEATORIOS POR TARJETA
   ======================================================== */

/* --- EFECTO TARJETA 1: ZOOM PURO CLÁSICO --- */
.tarjeta-presentacion-bloque:nth-child(1):hover .tarjeta-presentacion-imagen {
    transform: scale(1.12) !important; /* Zoom marcado hacia el frente */
}
.tarjeta-presentacion-bloque:nth-child(1):hover .tarjeta-presentacion-contenido {
    transform: translateY(-5px) !important; /* El texto sube de forma estándar */
    background: rgba(0, 0, 0, 0.80) !important;
}

/* --- EFECTO TARJETA 2: ROTACIÓN / INCLINACIÓN TRIDIMENSIONAL --- */
.tarjeta-presentacion-bloque:nth-child(2):hover .tarjeta-presentacion-imagen {
    transform: scale(1.08) rotate(2.5deg) !important; /* Zoom con giro a la derecha */
}
.tarjeta-presentacion-bloque:nth-child(2):hover .tarjeta-presentacion-contenido {
    transform: translateY(-12px) !important; /* El texto sube mucho más drásticamente */
    background: rgba(15, 23, 42, 0.85) !important; /* Cambia a un tono azul oscuro/grisáceo */
}

/* --- EFECTO TARJETA 3: DESPLAZAMIENTO HACIA ARRIBA (PANORÁMICO) --- */
.tarjeta-presentacion-bloque:nth-child(3):hover .tarjeta-presentacion-imagen {
    transform: scale(1.05) translateY(-15px) !important; /* La imagen se desplaza hacia arriba */
}
.tarjeta-presentacion-bloque:nth-child(3):hover .tarjeta-presentacion-contenido {
    transform: translateY(0) !important; /* El texto no sube, pero el fondo se vuelve totalmente opaco */
    background: rgba(0, 0, 0, 0.95) !important; 
}

/* --- DISEÑO CELULARES --- */
@media screen and (max-width: 768px) {
    .fila-tarjetas-ucla { flex-direction: column !important; align-items: center !important; }
    .tarjeta-presentacion-bloque { width: 90% !important; max-width: 100% !important; }
}



/* =========FIN===============TARJETA ÚNICA CON TRES EFECTOS EN UN BLOQUE=========
    ============================================================================== */

/*  ==================#######################################==================== */

/* ========================================================
   REESCALADO DE PANCARTA NATIVA - DESCUBRIR Y ALEJAR IMAGEN
   ======================================================== */

/* 1. Ampliamos la altura de la pancarta para descubrir el mural completo */
.site-page-banner,
.banner,
#banner {
    height: 70vh !important; /* Modifica este valor (ej. 60vh o 75vh) para ajustar la altura a tu gusto */
    min-height: 480px !important; /* Altura mínima garantizada en laptops */
    position: relative !important;
    overflow: hidden !important;
    border-bottom: 3px solid #cba258 !important; /* Sutil línea dorada inferior estilo Oxford */
}

/* 2. Forzamos a la imagen del Rectorado a alejarse y encuadrarse de forma fluida */
.site-page-banner img,
.banner img,
.banner-image img,
#banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Aleja la imagen de forma proporcional para que no se deforme ni se corte feo */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}




/* ========================================================
   FORZAR TAMAÑO DEL BANNER HEADING Y DESCRIPTION (con bloque HTML como primer bloque)
   ======================================================== */

/* TEXTO ENCIMA DEL BANNER */
.hero-overlay-text {
    position: relative;
    margin-top: -180px;        /* Sube el texto sobre la imagen */
    z-index: 10;
    text-align: left;
    padding: 0 20px;
}

.hero-overlay-text h1 {
    font-size: 75px !important;
    color: #ffffff;
    text-shadow: 0 4px 12px rgba(0,0,0,0.7);
    margin-bottom: 15px;
}

.hero-overlay-text p {
    font-size: 42px !important;
    color: #f1f5f9;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.45;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-overlay-text { margin-top: -120px; }
    .hero-overlay-text h1 { font-size: 38px !important; }
    .hero-overlay-text p { font-size: 18px !important; }
}