/* Overrides locales para réplica offline de medicina.usac.edu.gt */

/* ==========================================================================
   TÍTULOS DE NOTICIAS, ARTÍCULOS Y SECCIONES (PROPORCIONADOS Y ELEGANTES)
   Garantiza que ningún título quede gigante ni desproporcionado en ninguna página
   ========================================================================== */

/* 1. Títulos de Artículos y Noticias Individuales (noticia.html y artículos) */
#noticia-titulo,
h1#noticia-titulo,
h2#noticia-titulo,
.noticia-main-title,
article#noticia-container #noticia-titulo,
.noticia-card-single #noticia-titulo,
.noticia-card-single h1,
.post-content #noticia-titulo,
.post-content h1.noticia-main-title,
#awb-ptb-heading,
.fusion-page-title-bar .entry-title,
.fusion-page-title-bar h1,
.avada-page-titlebar-wrapper h1,
body.single-post .entry-title,
body.single-post h1.entry-title,
body.wp-singular #awb-ptb-heading,
body.wp-singular .entry-title {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0a284c !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 768px) {
    #noticia-titulo,
    h1#noticia-titulo,
    h2#noticia-titulo,
    .noticia-main-title,
    article#noticia-container #noticia-titulo,
    .noticia-card-single #noticia-titulo,
    .noticia-card-single h1,
    #awb-ptb-heading,
    .fusion-page-title-bar .entry-title,
    .fusion-page-title-bar h1,
    .avada-page-titlebar-wrapper h1 {
        font-size: 17px !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }
}

/* 2. Títulos de Sección en Páginas (Noticias, Herramientas, etc.) */
/* Reducir los encabezados de sección que estaban desproporcionados a un tamaño armónico y elegante (34px) */
.fusion-builder-row-3 .fusion-title-2 h2.fusion-title-heading,
.fusion-title-noticias h2,
.fusion-title-noticias .fusion-title-heading,
.fusion-builder-column-noticias h2,
.fusion-builder-column-noticias .fusion-title-heading,
body.home .fusion-title-2 h2.fusion-title-heading {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 34px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
}

@media (max-width: 768px) {
    .fusion-builder-row-3 .fusion-title-2 h2.fusion-title-heading,
    .fusion-title-noticias h2,
    .fusion-title-noticias .fusion-title-heading,
    .fusion-builder-column-noticias h2,
    .fusion-builder-column-noticias .fusion-title-heading,
    body.home .fusion-title-2 h2.fusion-title-heading {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
}

/* === Tarjetas de "Noticias" (Diseño Editorial Profesional y Moderno) ===
   - Tarjetas de título ejecutivas, limpias y profesionales (sin aspecto de globo de caricatura)
   - Altura y tamaño 100% uniforme e idéntico en todas las tarjetas (82px)
   - Tipografía moderna sans-serif ('Montserrat', 'Inter', sans-serif) semibold 600
   - Acento superior institucional azul USAC (#0e6fb7) con transición a dorado (#f6bf11) en hover
   - Centrado perfecto y respiración limpia para títulos de 1, 2 o 3 líneas
   - Micro-movimiento sutil y sobrio (respiración de 3px, sin inclinaciones ni rotaciones)
   - Hover sofisticado con elevación sutil y sincronizada con la imagen */

body.home .fusion-post-cards {
    padding-top: 10px !important;
    margin-top: 4px !important;
    overflow: visible !important;
}

body.home .fusion-post-cards .swiper,
body.home .fusion-post-cards .swiper-wrapper {
    overflow: visible !important;
    padding-top: 6px !important;
}

body.home .fusion-post-cards .fusion_builder_column.post-card,
body.home .fusion-post-cards .swiper-slide {
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.home .fusion-post-cards .fusion-column-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.home .fusion-post-cards .fusion-column-inner-bg,
body.home .fusion-post-cards .fusion-column-inner-bg-image {
    background: transparent !important;
    display: none !important;
}

/* 1. Tarjeta de Título: Formato editorial moderno, uniforme y sobrio */
body.home .fusion-post-cards .fusion-title {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    margin: 0 0 16px 0 !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(10, 40, 76, 0.10) !important;
    border-top: 3.5px solid #0e6fb7 !important;
    box-shadow: 0 4px 14px rgba(10, 40, 76, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    z-index: 10 !important;
    will-change: transform, box-shadow, border-color;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease,
                background 0.3s ease !important;
}

/* Eliminar completamente colitas y brillos tipo globo/caricatura */
body.home .fusion-post-cards .fusion-title::before,
body.home .fusion-post-cards .fusion-title::after {
    content: none !important;
    display: none !important;
}

/* 2. Tipografía Sans-Serif moderna, seria y de alta legibilidad académica */
body.home .fusion-post-cards .fusion-title,
body.home .fusion-post-cards .fusion-title .fusion-title-heading,
body.home .fusion-post-cards .fusion-title h4,
body.home .fusion-post-cards .fusion-title a {
    font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    letter-spacing: -0.012em !important;
    color: #0a284c !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    position: relative !important;
    z-index: 2 !important;
    transition: color 0.25s ease !important;
}

body.home .fusion-post-cards .fusion-title .fusion-title-heading {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-height: 60px !important;
}

/* 3. Micro-movimiento sutil y sobrio (respiración suave de 3px, sin inclinaciones ni rotaciones) */
body.home .fusion-post-cards .swiper-slide:nth-child(4n + 1) .fusion-title {
    animation: fcmTituloSerio1 5.2s ease-in-out 0s infinite !important;
}
body.home .fusion-post-cards .swiper-slide:nth-child(4n + 2) .fusion-title {
    animation: fcmTituloSerio2 4.8s ease-in-out 0.6s infinite !important;
}
body.home .fusion-post-cards .swiper-slide:nth-child(4n + 3) .fusion-title {
    animation: fcmTituloSerio3 5.4s ease-in-out 1.2s infinite !important;
}
body.home .fusion-post-cards .swiper-slide:nth-child(4n + 4) .fusion-title {
    animation: fcmTituloSerio4 5.0s ease-in-out 1.8s infinite !important;
}

@keyframes fcmTituloSerio1 {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-3px); }
}

@keyframes fcmTituloSerio2 {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-3px); }
}

@keyframes fcmTituloSerio3 {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-3px); }
}

@keyframes fcmTituloSerio4 {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-3px); }
}

/* 4. Imagen de la noticia debajo del título (orden 2) con estética institucional */
body.home .fusion-post-cards .fusion-image-element {
    order: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(10, 40, 76, 0.10) !important;
    border: 1px solid rgba(10, 40, 76, 0.08) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

body.home .fusion-post-cards .fusion-image-element img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.45s ease !important;
}

/* 5. Hover profesional: Elevación refinada, acento dorado institucional y contraste elegante */
body.home .fusion-post-cards .fusion_builder_column:hover .fusion-title,
body.home .fusion-post-cards .fusion-title:hover {
    animation-play-state: paused !important;
    transform: translateY(-5px) !important;
    border-top-color: #f6bf11 !important;
    border-color: rgba(246, 191, 17, 0.45) !important;
    box-shadow: 0 12px 26px rgba(10, 40, 76, 0.14),
                0 3px 8px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
}

body.home .fusion-post-cards .fusion_builder_column:hover .fusion-title a,
body.home .fusion-post-cards .fusion_builder_column:hover .fusion-title .fusion-title-heading,
body.home .fusion-post-cards .fusion-title:hover a,
body.home .fusion-post-cards .fusion-title:hover .fusion-title-heading {
    color: #0e6fb7 !important;
}

body.home .fusion-post-cards .fusion_builder_column:hover .fusion-image-element {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(10, 40, 76, 0.20) !important;
}

body.home .fusion-post-cards .fusion_builder_column:hover .fusion-image-element img {
    transform: scale(1.04) !important;
}

body.home .fusion-post-cards .fusion-text {
    display: none !important;
}

/* Acercar el carrusel al titulo "Noticias" */
body.home .fusion-layout-column:has(.fusion-post-cards) {
    margin-top: 8px !important;
}

/* ==========================================================================
   BOTONES DE NAVEGACIÓN DEL CARRUSEL DE NOTICIAS (FLECHAS IZQUIERDA Y DERECHA)
   ========================================================================== */

/* 1. Ocultar fuentes o iconos rotos dentro de los botones */
.awb-swiper-button i,
.awb-swiper-button .fas,
.awb-swiper-button [class*="fa-"] {
    display: none !important;
}

/* 2. Botones circulares modernos tipo cápsula flotante Glassmorphism */
body.home .awb-swiper-button,
.fusion-post-cards .awb-swiper-button {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: calc(50% + 22px) !important;
    transform: translateY(-50%) !important;
    z-index: 40 !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    
    /* Acabado premium USAC: azul marino translúcido y aro dorado */
    background: linear-gradient(135deg, rgba(10, 40, 76, 0.94) 0%, rgba(14, 111, 183, 0.88) 100%) !important;
    border: 2px solid #f6bf11 !important;
    color: #f6bf11 !important;
    box-shadow: 0 8px 24px rgba(10, 40, 76, 0.45), 0 0 14px rgba(246, 191, 17, 0.28) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    opacity: 0.95 !important;
    outline: none !important;
    
    /* Transición elástica suave */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease,
                opacity 0.3s ease !important;
}

/* 3. Posicionamiento en los extremos */
body.home .awb-swiper-button-prev,
.fusion-post-cards .awb-swiper-button-prev {
    left: -12px !important;
    right: auto !important;
}

body.home .awb-swiper-button-next,
.fusion-post-cards .awb-swiper-button-next {
    right: -12px !important;
    left: auto !important;
}

/* 4. Estilo de los iconos SVG dentro de los botones */
.awb-swiper-button svg.awb-arrow-svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    pointer-events: none !important;
}

/* Fallback de máscara si no hubiera SVG en el DOM */
.awb-swiper-button-prev:not(:has(svg))::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

.awb-swiper-button-next:not(:has(svg))::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* 5. Hover dinámico y resplandeciente */
body.home .awb-swiper-button:hover,
.fusion-post-cards .awb-swiper-button:hover {
    background: linear-gradient(135deg, #ffc926 0%, #f6bf11 100%) !important;
    border-color: #ffffff !important;
    color: #0a284c !important;
    transform: translateY(-50%) scale(1.15) !important;
    box-shadow: 0 14px 30px rgba(246, 191, 17, 0.6), 0 0 20px rgba(246, 191, 17, 0.4) !important;
    opacity: 1 !important;
}

/* Micro-animación direccional de las flechas en hover */
body.home .awb-swiper-button-prev:hover svg,
.fusion-post-cards .awb-swiper-button-prev:hover svg {
    transform: translateX(-3px) !important;
}

body.home .awb-swiper-button-next:hover svg,
.fusion-post-cards .awb-swiper-button-next:hover svg {
    transform: translateX(3px) !important;
}

/* 6. Respuesta táctil al hacer Clic (Active) */
body.home .awb-swiper-button:active,
.fusion-post-cards .awb-swiper-button:active {
    transform: translateY(-50%) scale(0.92) !important;
    box-shadow: 0 4px 12px rgba(10, 40, 76, 0.4) !important;
}

/* 7. Estado deshabilitado si se alcanza el fin o inicio */
.awb-swiper-button.swiper-button-disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* 8. Adaptabilidad en pantallas móviles y tablets */
@media (max-width: 900px) {
    body.home .awb-swiper-button,
    .fusion-post-cards .awb-swiper-button {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }
    body.home .awb-swiper-button-prev,
    .fusion-post-cards .awb-swiper-button-prev {
        left: 4px !important;
    }
    body.home .awb-swiper-button-next,
    .fusion-post-cards .awb-swiper-button-next {
        right: 4px !important;
    }
    .awb-swiper-button svg.awb-arrow-svg {
        width: 18px !important;
        height: 18px !important;
    }
}


/* ================= NEWSLETTER (Home): compacto, moderno y animado ================= */
/* Tarjeta unica: gradiente navy, mas compacta, con sombra y animacion de entrada */
body.home .fusion-column-wrapper:has(.fusion-form-789) {
    padding: 24px 34px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #0a2e57 0%, #0a284c 55%, #123f6f 100%) !important;
    box-shadow: 0 22px 55px rgba(10, 40, 76, .40) !important;
    overflow: hidden !important;
    position: relative !important;
    animation: nlFadeUp .9s cubic-bezier(.2, .75, .25, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
}
/* Neutralizar cajas/paddings anidados para que sea UNA sola tarjeta */
body.home .fusion-form-789 .fusion-fullwidth,
body.home .fusion-form-789 .fusion-column-wrapper,
body.home .fusion-form-789 .fusion-column-inner-bg,
body.home .fusion-form-789 .fusion-column-inner-bg-image {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.home .fusion-form-789 .fusion-fullwidth {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/* Titulo y textos compactos */
body.home .fusion-column-wrapper:has(.fusion-form-789) p {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
body.home .fusion-text-8 p {
    font-size: 30px !important;
    line-height: 1.12 !important;
}
/* Input moderno: efecto al pasar el mouse (hover) y brillo al enfocar */
body.home .fusion-form-789 .fusion-form-input {
    height: 46px !important;
    border-radius: 26px !important;
    border: 2px solid transparent !important;
    transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease !important;
}
body.home .fusion-form-789 .fusion-form-input:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .20) !important;
    border-color: rgba(246, 191, 17, .55) !important;
}
body.home .fusion-form-789 .fusion-form-input:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 0 3px rgba(246, 191, 17, .55), 0 10px 24px rgba(0, 0, 0, .18) !important;
    border-color: #f6bf11 !important;
}
/* Boton moderno: elevacion suave + destello (shine) al pasar el mouse (sin pulso) */
body.home .fusion-form-789 .fusion-button {
    border-radius: 26px !important;
    position: relative !important;
    overflow: hidden !important;
    animation: none !important;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease !important;
}
body.home .fusion-form-789 .fusion-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(246, 191, 17, .45) !important;
}
body.home .fusion-form-789 .fusion-button::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -130% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%) !important;
    transform: skewX(-20deg) !important;
    transition: left .65s ease !important;
    pointer-events: none !important;
}
body.home .fusion-form-789 .fusion-button:hover::after {
    left: 140% !important;
}
@keyframes nlFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
}

/* Que la seccion de ondas (con movimiento) suba y cubra la franja blanca
   que quedaba entre el newsletter y las ondas azules */
body.home .fusion-builder-row-3.fusion-fullwidth {
    padding-bottom: 6px !important;
}

/* Seccion "Unidades y Departamentos": compactar el espacio entre el encabezado,
   el titulo y los iconos (antes tenian margenes de 100px / 60px) */
body.home .fusion-text-11 {
    margin: 0 !important;
    line-height: 1 !important;
}
body.home .fusion-title-9 {
    margin-top: -6px !important;
    margin-bottom: -8px !important;
}
body.home .fusion-title-9 h2 {
    font-size: 46px !important;
    --fontSize: 46 !important;
    line-height: 0.92 !important;
}
body.home .fusion-layout-column:has(.fusion-title-9) {
    margin-bottom: 0 !important;
}
/* Compactar TODA la seccion para que quepa en pantalla (solo en pantallas de escritorio). */
@media (min-width: 769px) {
    body.home .fusion-builder-row-4.fusion-fullwidth {
        zoom: 0.72;
    }
    /* Separador SVG en forma de ola: compensar el zoom de la fila para que se extienda
       al 100% del ancho de la pantalla (full width) sin dejar margenes en los costados */
    body.home .fusion-builder-row-4 .fusion-section-separator-2 .fusion-section-separator-svg.fusion-section-separator-fullwidth,
    body.home .fusion-builder-row-4 .fusion-section-separator-2 .fusion-section-separator-spacer.fusion-section-separator-fullwidth {
        width: calc(100vw / 0.72) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* Ondas (separador) de la seccion Unidades a ANCHO COMPLETO de pantalla */
body.home .fusion-builder-row-4 .fusion-section-separator {
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
html body.home .fusion-builder-row-4 .fusion-section-separator-svg {
    width: 100% !important;
    left: 0 !important;
    height: 255px !important;
}
html body.home .fusion-builder-row-4 svg.fusion-hills-opacity-candy {
    width: 100% !important;
    height: 255px !important;
}

html, body {
    overflow-x: hidden !important;
}

/* ================= CURSOR PERSONALIZADO: estetoscopio ================= */
:root {
    --steth-cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'34'%20height%3D'34'%20viewBox%3D'0%200%2032%2032'%3E%3Cg%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'4.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206.5%20C9%2013%2013%2013.5%2013%2017%20L13%2020.5%20C13%2026%2018%2026.5%2022%2025'%2F%3E%3Cpath%20d%3D'M17%206.5%20C17%2012%2013.5%2013%2013%2015'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'none'%20stroke%3D'%2312233b'%20stroke-width%3D'1.9'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206.5%20C9%2013%2013%2013.5%2013%2017%20L13%2020.5%20C13%2026%2018%2026.5%2022%2025'%2F%3E%3Cpath%20d%3D'M17%206.5%20C17%2012%2013.5%2013%2013%2015'%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D'9'%20cy%3D'6.5'%20r%3D'2.2'%20fill%3D'%2312233b'%20stroke%3D'%23fff'%20stroke-width%3D'1.1'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'6.5'%20r%3D'2.2'%20fill%3D'%2312233b'%20stroke%3D'%23fff'%20stroke-width%3D'1.1'%2F%3E%3Ccircle%20cx%3D'23.5'%20cy%3D'24.8'%20r%3D'4.6'%20fill%3D'%23fff'%2F%3E%3Ccircle%20cx%3D'23.5'%20cy%3D'24.8'%20r%3D'4.1'%20fill%3D'%2316283f'%2F%3E%3Ccircle%20cx%3D'23.5'%20cy%3D'24.8'%20r%3D'2.2'%20fill%3D'none'%20stroke%3D'%235b6b80'%20stroke-width%3D'1'%2F%3E%3C%2Fsvg%3E") 6 4;
}
body, body * {
    cursor: var(--steth-cursor), auto !important;
}
/* Campos de texto conservan el cursor de texto para poder escribir */
body input, body textarea, body select, body [contenteditable="true"] {
    cursor: var(--steth-cursor), text !important;
}

@font-face {
    font-family: "awb-icons";
    src: url("../media/awb-icons.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Avada-Yoga";
    src: url("../media/Avada-Yoga.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

/* Subir un poco el menu principal del encabezado */
.awb-menu__main-ul {
    margin-top: -18px !important;
}

/* Escudo de acreditacion del hero (home) al 70% (500px -> 350px)
   position+z-index para que quede POR ENCIMA de la onda/Noticias y no se recorte */
body.home .wp-image-1469 {
    width: 350px !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 20 !important;
}

/* Acercar la onda/Noticias al escudo del hero (reducir el espacio inferior) */
body.home .fusion-builder-row-2.fusion-fullwidth {
    padding-bottom: 0 !important;
    margin-bottom: -55px !important;
}

/* La fila del hero y la de Noticias comparten z-index:10; al empatar, Noticias
   (posterior en el DOM) tapaba el escudo. Subimos la fila del hero por encima
   para que la onda de Noticias pase POR DETRAS del escudo. */
body.home .fusion-builder-row-2 .fusion-builder-row.fusion-row {
    z-index: 30 !important;
    position: relative !important;
}

/* Subir el titulo "Herramientas" para acercarlo a la onda (con algo de espacio) */
body.home .fusion-title.fusion-title-2 {
    margin-top: -30px !important;
}

/* Herramientas: carnet donante + guia estudiantes + guia profesores en UNA
   sola fila de 3 columnas iguales (antes el carnet ocupaba una fila aparte). */
body.home .fusion-layout-column:has(img[src*="CARNET-DONANTE"]),
body.home .fusion-layout-column:has(img[src*="manualestudiantes"]),
body.home .fusion-layout-column:has(img[src*="manualprofesores"]) {
    width: 30% !important;
    max-width: 30% !important;
    flex: 0 0 30% !important;
    margin-left: 1.5% !important;
    margin-right: 1.5% !important;
    clear: none !important;
}
/* El carnet es mas pequeno: centrarlo verticalmente respecto a las guias */
body.home .fusion-layout-column:has(img[src*="CARNET-DONANTE"]) {
    align-self: center !important;
}

/* Orden dentro de la fila de Herramientas: titulo, luego estudiantes | carnet | profesores,
   y el resto (noticias, newsletter) al final. Se ordena TODA la fila para no empujar
   las tarjetas hacia abajo. El mismo prefijo de fila mantiene la especificidad correcta. */
body.home .fusion-builder-row.fusion-row:has(img[src*="CARNET-DONANTE"]) > .fusion-layout-column {
    order: 20 !important;
}
body.home .fusion-builder-row.fusion-row:has(img[src*="CARNET-DONANTE"]) > .fusion-layout-column:has(.fusion-title-2)               { order: 1 !important; }
body.home .fusion-builder-row.fusion-row:has(img[src*="CARNET-DONANTE"]) > .fusion-layout-column:has(img[src*="manualestudiantes"]) { order: 2 !important; }
body.home .fusion-builder-row.fusion-row:has(img[src*="CARNET-DONANTE"]) > .fusion-layout-column:has(img[src*="CARNET-DONANTE"])    { order: 3 !important; }
body.home .fusion-builder-row.fusion-row:has(img[src*="CARNET-DONANTE"]) > .fusion-layout-column:has(img[src*="manualprofesores"]) { order: 4 !important; }
/* Nuevo titulo "Noticias" entre las herramientas y las tarjetas de noticias */
body.home .fusion-builder-row.fusion-row:has(img[src*="CARNET-DONANTE"]) > .fusion-builder-column-noticias {
    order: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Si el JS de Avada no anima, el contenido no debe quedar invisible */
.fusion-animated {
    visibility: visible !important;
    opacity: 1 !important;
}

.awb-menu.loading {
    opacity: 1 !important;
}

/* Imagen central de Unidades y Departamentos (Recursos Estudiantiles) -- SOLO HOME.
   .fusion-builder-row-4 / -8 son clases genericas de Avada presentes en TODAS las
   paginas, por eso se acotan a body.home para no filtrarse a las paginas internas. */
body.home .fusion-builder-row-4.fusion-fullwidth {
    background-image: url("../media/ICONO-CENTRAL-RECURSOS-1-1024x1018.png") !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-size: 500px auto !important;
}

@media (max-width: 640px) {
    body.home .fusion-builder-row-4.fusion-fullwidth {
        background-image: url("../media/bg-flip-600x350-1.jpg") !important;
        background-size: cover !important;
    }
}

body.home .fusion-builder-row-8.fusion-fullwidth {
    background-image: linear-gradient(0deg, var(--awb-color4) 21%, var(--awb-color4) 78%), url("../media/CUM-OTTODRONE-53-1024x428.jpg") !important;
    background-size: cover !important;
    background-position: center bottom !important;
}

/* ==========================================================================
   SECCIÓN ACERCA DE NOSOTROS: TAMAÑO COMPACTO Y CENTRADO
   ========================================================================== */

/* Reducción de espaciados de la sección para que quepa cómodamente en pantalla */
body.home .fusion-builder-row-8.fusion-fullwidth {
    --awb-padding-top: 35px !important;
    --awb-padding-bottom: 125px !important;
    padding-top: 35px !important;
    padding-bottom: 125px !important;
}

/* Bajar la ola/separador inferior para que no invada las tarjetas de Misión y Visión */
body.home .fusion-section-separator-4 {
    --awb-margin-top: -110px !important;
    margin-top: -110px !important;
}

/* Título más estilizado y proporcionado */
body.home .fusion-builder-column-33 {
    --awb-padding-bottom: 10px !important;
    padding-bottom: 10px !important;
}

body.home .fusion-title-10 {
    --awb-margin-top: 0px !important;
    --awb-margin-bottom: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

body.home .fusion-title-10 h2 {
    font-size: 38px !important;
    --fontSize: 38 !important;
    line-height: 1.15 !important;
}

/* Contenedor de las dos tarjetas (Misión y Visión) */
body.home .fusion-builder-column-34 .fusion-column-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.home .fusion-builder-column-34 .fusion-flip-boxes {
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

body.home .fusion-builder-column-34 .fusion-flip-box-wrapper {
    flex: 0 0 50% !important;
    max-width: 390px !important;
    width: 50% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
}

/* Altura y proporciones compactas de las tarjetas (Misión y Visión) */
body.home .fusion-builder-row-8 .fusion-flip-box,
body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-inner-wrapper,
body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-front,
body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-back {
    min-height: 350px !important;
    height: 350px !important;
    border-radius: 12px !important;
}

/* Cursor de lupa para indicar que se puede agrandar con clic */
body.home .fusion-builder-row-8 .fusion-flip-box {
    cursor: zoom-in !important;
}

/* Frente de la tarjeta: centrar y escalar imagen del edificio */
body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-front {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
}

body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-front-inner {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-grafix img {
    max-width: 280px !important;
    width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Reverso de la tarjeta: fondo completo y nítido */
body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-back {
    background-size: cover !important;
    background-position: center center !important;
}

body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-back-inner p {
    display: none !important;
}

@media (max-width: 768px) {
    body.home .fusion-builder-column-34 .fusion-flip-box-wrapper {
        flex: 0 0 100% !important;
        max-width: 330px !important;
        width: 100% !important;
        margin: 0 auto 20px auto !important;
    }
    body.home .fusion-builder-row-8 .fusion-flip-box,
    body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-inner-wrapper,
    body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-front,
    body.home .fusion-builder-row-8 .fusion-flip-box .flip-box-back {
        min-height: 320px !important;
        height: 320px !important;
    }
    body.home .fusion-title-10 h2 {
        font-size: 30px !important;
        --fontSize: 30 !important;
    }
    body.home .fusion-section-separator-4 {
        --awb-margin-top: -30px !important;
        margin-top: -30px !important;
    }
}

/* ==========================================================================
   MODAL DE AMPLIACIÓN (LIGHTBOX) PARA MISIÓN Y VISIÓN
   ========================================================================== */
.facmed-zoom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.facmed-zoom-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.facmed-zoom-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 40, 76, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.facmed-zoom-dialog {
    position: relative;
    z-index: 2;
    max-width: min(1100px, 92vw);
    width: auto;
    max-height: 90vh;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.facmed-zoom-modal.is-open .facmed-zoom-dialog {
    transform: scale(1);
}

.facmed-zoom-img {
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
    background: #fff;
    display: block;
    cursor: default;
}

.facmed-zoom-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f6bf11;
    color: #0a284c;
    border: 2px solid #ffffff;
    font-size: 26px;
    line-height: 38px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    z-index: 3;
    padding: 0;
}

.facmed-zoom-close:hover {
    background: #0a284c;
    color: #f6bf11;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .facmed-zoom-dialog {
        max-width: 95vw;
    }
    .facmed-zoom-close {
        top: -12px;
        right: -10px;
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
}


/* ==========================================================================
   FORMULARIO DE CONTACTO (fusion-form-799): COMPACTO, CENTRADO Y MODERNO
   ========================================================================== */

/* Alineación centrada del contenedor principal de la columna */
.fusion-builder-column:has(.fusion-form-799) .fusion-column-wrapper {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* 1. Contenedor exterior estilizado tipo tarjeta Glassmorphism moderna */
.fusion-form.fusion-form-builder.fusion-form-799,
.fusion-form-form-wrapper.fusion-form-799 {
    max-width: 760px !important;
    width: 100% !important;
    margin: 0 auto !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 20px !important;
    padding: 32px 38px 34px 38px !important;
    box-sizing: border-box !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.fusion-form.fusion-form-builder.fusion-form-799:hover {
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.42), 0 0 25px rgba(246, 191, 17, 0.1) !important;
    border-color: rgba(246, 191, 17, 0.3) !important;
}

/* Limpieza de márgenes heredados en filas internas */
.fusion-form-799 .fusion-fullwidth {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 2. Grid simétrico para equilibrar los campos (2 columnas organizadas) */
.fusion-form-799 .fusion-builder-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.fusion-form-799 .fusion-layout-column,
.fusion-form-799 .fusion-column-wrapper {
    display: contents !important;
}

/* Asignación de posiciones simétricas y orden equilibrado */
.fusion-form-799 .fusion-form-field:has([name="your_name"]),
.fusion-form-799 .field-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.fusion-form-799 .fusion-form-field:has([name="apellido"]),
.fusion-form-799 .field-apellido {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.fusion-form-799 .fusion-form-field:has([name="your_email"]),
.fusion-form-799 .field-email {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

.fusion-form-799 .fusion-form-field:has([name="subject"]),
.fusion-form-799 .field-subject {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.fusion-form-799 .fusion-form-textarea-field,
.fusion-form-799 .field-message {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
}

.fusion-form-799 .fusion-form-submit-field,
.fusion-form-799 .field-submit {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
}

.fusion-form-799 .form-submission-notices,
.fusion-form-799 .local-form-ok {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    width: 100% !important;
}

/* 3. Etiquetas (Labels) con alto contraste, legibilidad y animación de foco */
.fusion-form-799 .fusion-form-field {
    margin-bottom: 0 !important;
    position: relative;
}

.fusion-form-799 .fusion-form-label-wrapper label,
.fusion-form-799 .fusion-form-textarea-field > label {
    display: block !important;
    color: #f1f5f9 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 6px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease !important;
}

.fusion-form-799 .fusion-form-field:focus-within label {
    color: #f6bf11 !important;
    text-shadow: 0 0 10px rgba(246, 191, 17, 0.5) !important;
    transform: translateX(2px) !important;
}

.fusion-form-799 .fusion-form-element-required {
    color: #f6bf11 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    margin-left: 2px !important;
}

/* 4. Inputs y Textarea compactos con micro-interacciones */
.fusion-form-799 .fusion-form-input-with-icon {
    position: relative !important;
}

.fusion-form-799 .fusion-form-input {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #0a284c !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1.5px solid rgba(246, 191, 17, 0.55) !important;
    border-radius: 10px !important;
    padding: 8px 14px 8px 40px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    outline: none !important;
}

.fusion-form-799 .fusion-form-input::placeholder {
    color: #8391a3 !important;
    font-size: 13px !important;
    opacity: 0.8 !important;
}

/* Textarea compacto con altura elegante */
.fusion-form-799 textarea.fusion-form-input {
    height: 95px !important;
    min-height: 95px !important;
    max-height: 180px !important;
    resize: vertical !important;
    padding: 10px 14px 10px 40px !important;
    line-height: 1.45 !important;
}

/* Micro-interacción: Hover suave en los campos */
.fusion-form-799 .fusion-form-input:hover {
    border-color: #f6bf11 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Micro-interacción: Foco iluminado y elevación táctil */
.fusion-form-799 .fusion-form-input:focus {
    border-color: #f6bf11 !important;
    box-shadow: 0 0 0 4px rgba(246, 191, 17, 0.28), 0 8px 20px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-2px) !important;
    background: #ffffff !important;
}

/* Iconos integrados con micro-animación de foco */
.fusion-form-799 .fusion-form-input-with-icon i.awb-form-icon,
.fusion-form-799 .fusion-form-input-with-icon i.fas {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #0e6fb7 !important;
    font-size: 14px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.fusion-form-799 .fusion-form-textarea-field i.fas {
    top: 22px !important;
    transform: none !important;
}

.fusion-form-799 .fusion-form-field:focus-within i.awb-form-icon,
.fusion-form-799 .fusion-form-field:focus-within i.fas {
    color: #0a284c !important;
    transform: translateY(-50%) scale(1.2) !important;
}

.fusion-form-799 .fusion-form-textarea-field:focus-within i.fas {
    transform: scale(1.2) !important;
}

/* 5. Botón ENVIAR: Centrado, moderno, con efecto Shimmer luminoso y micro-animación */
.fusion-form-799 button.form-form-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 190px !important;
    padding: 13px 44px !important;
    background: linear-gradient(135deg, #f6bf11 0%, #e6a800 100%) !important;
    color: #0a284c !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(246, 191, 17, 0.35) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Efecto Shimmer / Barrido de luz al pasar el cursor */
.fusion-form-799 button.form-form-submit::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -70% !important;
    width: 45% !important;
    height: 200% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%) !important;
    transform: rotate(25deg) !important;
    pointer-events: none !important;
    transition: none !important;
}

.fusion-form-799 button.form-form-submit:hover::after {
    left: 150% !important;
    transition: left 0.75s ease-in-out !important;
}

.fusion-form-799 button.form-form-submit:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 12px 28px rgba(246, 191, 17, 0.5) !important;
    background: linear-gradient(135deg, #ffc926 0%, #f6bf11 100%) !important;
    color: #0a284c !important;
}

.fusion-form-799 button.form-form-submit:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 4px 12px rgba(246, 191, 17, 0.25) !important;
}

/* 6. Título "Contáctanos": Proporcionado y con sutil línea decorativa dorada */
body.home .fusion-title-11,
.fusion-builder-column:has(.fusion-form-799) .fusion-title {
    margin-bottom: 24px !important;
    margin-top: 0 !important;
    text-align: center !important;
}

body.home .fusion-title-11 h2,
.fusion-builder-column:has(.fusion-form-799) .fusion-title h2 {
    font-size: 34px !important;
    --fontSize: 34 !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    position: relative !important;
    display: inline-block !important;
}

body.home .fusion-title-11 h2::after,
.fusion-builder-column:has(.fusion-form-799) .fusion-title h2::after {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 3px !important;
    background: #f6bf11 !important;
    margin: 10px auto 0 !important;
    border-radius: 2px !important;
}

/* 7. Mensajes de confirmación y alertas (ocultos por defecto, visibles al enviar) */
.fusion-form .form-submission-notices,
.fusion-form .fusion-alert,
.fusion-form .fusion-form-response,
.local-form-ok {
    display: none !important;
}

.fusion-form-799 .local-form-ok.is-visible,
.fusion-form-799 .form-submission-notices.is-visible,
.fusion-form-799 .fusion-alert.alert-success.is-visible {
    display: block !important;
    background: #0a284c !important;
    color: #f6bf11 !important;
    border: 1.5px solid #f6bf11 !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    margin-top: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    animation: formAlertSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes formAlertSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 8. Adaptabilidad móvil fluida y centrada */
@media (max-width: 768px) {
    body.home .fusion-builder-row-10.fusion-fullwidth,
    .fusion-fullwidth:has(.fusion-form-799) {
        --awb-padding-left: 0px !important;
        --awb-padding-right: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.home .fusion-builder-row-10 > .fusion-builder-row,
    .fusion-builder-row:has(.fusion-form-799) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    body.home .fusion-builder-column-36,
    .fusion-builder-column:has(.fusion-form-799) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    body.home .fusion-builder-column-36 .fusion-column-wrapper,
    .fusion-builder-column:has(.fusion-form-799) .fusion-column-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    body.home .fusion-title-11,
    .fusion-builder-column:has(.fusion-form-799) .fusion-title {
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
    }
    .fusion-form.fusion-form-builder.fusion-form-799,
    .fusion-form-form-wrapper.fusion-form-799 {
        width: 90% !important;
        max-width: 390px !important;
        margin: 0 auto !important;
        padding: 22px 16px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .fusion-form-799,
    .fusion-form-799 .fusion-fullwidth,
    .fusion-form-799 .fusion-builder-row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    .fusion-form-799 .fusion-builder-row {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .fusion-form-799 .fusion-form-field:has([name="your_name"]),
    .fusion-form-799 .field-name {
        order: 1 !important;
        width: 100% !important;
    }
    .fusion-form-799 .fusion-form-field:has([name="apellido"]),
    .fusion-form-799 .field-apellido {
        order: 2 !important;
        width: 100% !important;
    }
    .fusion-form-799 .fusion-form-field:has([name="your_email"]),
    .fusion-form-799 .field-email {
        order: 3 !important;
        width: 100% !important;
    }
    .fusion-form-799 .fusion-form-field:has([name="subject"]),
    .fusion-form-799 .field-subject {
        order: 4 !important;
        width: 100% !important;
    }
    .fusion-form-799 .fusion-form-textarea-field,
    .fusion-form-799 .field-message {
        order: 5 !important;
        width: 100% !important;
    }
    .fusion-form-799 .fusion-form-submit-field,
    .fusion-form-799 .field-submit {
        order: 6 !important;
        width: 100% !important;
    }
    .fusion-form-799 .form-submission-notices,
    .fusion-form-799 .local-form-ok {
        order: 7 !important;
        width: 100% !important;
    }
    body.home .fusion-title-11 h2,
    .fusion-builder-column:has(.fusion-form-799) .fusion-title h2 {
        font-size: 28px !important;
        --fontSize: 28 !important;
    }
}

/* Portales locales (UNADE, Control Académico, etc.) */
.top-bar {
    background: #0a284c;
    color: #fff;
    font-size: 13px;
    padding: 10px 0;
}

.top-bar-content,
.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.top-info {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.top-social a {
    color: #f6bf11;
    font-weight: 700;
}

.main-header {
    background: #ffffff;
    border-bottom: 4px solid #f6bf11;
    padding: 18px 0;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #0a284c;
    text-decoration: none;
}

.brand-logo img {
    height: 72px;
    width: auto;
}

.brand-text h1 {
    font-size: 22px;
    margin: 0;
    color: #0a284c;
}

.brand-text p {
    margin: 4px 0 0;
    color: #556070;
    font-size: 13px;
}

.btn-usac {
    display: inline-block;
    background: #0e6fb7;
    color: #fff !important;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.btn-usac:hover {
    background: #0a284c;
    color: #f6bf11 !important;
}

.btn-usac-outline {
    background: transparent;
    color: #0a284c !important;
    border: 2px solid #0a284c;
}

body {
    margin: 0;
}

/* Evitar que Fusion pida recursos remotos rotos */
img[src=""],
img:not([src]) {
    visibility: hidden;
}

/* ==========================================================================
   SECCIÓN TRÁMITES ESTUDIANTILES: TAMAÑO COMPACTO, MOVIMIENTO Y HOVER
   ========================================================================== */

/* Limpieza absoluta de sombras de recuadro */
body.home .fusion-builder-row-7 .fusion-column-wrapper,
body.home .fusion-builder-row-7 .fusion-image-element,
body.home .fusion-builder-row-7 .fusion-imageframe,
body.home .fusion-builder-row-7 .fusion-imageframe a,
body.home .fusion-builder-row-7 .fusion-imageframe img {
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    filter: none;
}

/* Evitar que cualquier contenedor recorte la imagen en cuadrado al agrandarse en hover */
body.home .fusion-builder-row-7 .fusion-column-wrapper,
body.home .fusion-builder-row-7 .fusion-image-element,
body.home .fusion-builder-row-7 .fusion-imageframe,
body.home .fusion-builder-row-7 .imageframe-19,
body.home .fusion-builder-row-7 .imageframe-20,
body.home .fusion-builder-row-7 .imageframe-21,
body.home .fusion-builder-row-7 .imageframe-22,
body.home .fusion-builder-row-7 .imageframe-20 a,
body.home .fusion-builder-row-7 .imageframe-21 a,
body.home .fusion-builder-row-7 .imageframe-22 a {
    overflow: visible !important;
}

/* 1. Banner "TRÁMITES ESTUDIANTILES" - Más compacto y con movimiento */
body.home .fusion-builder-column-28 {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
    --awb-padding-top: 10px !important;
    --awb-padding-bottom: 20px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

body.home .fusion-builder-row-7 .imageframe-19 {
    display: inline-block !important;
    max-width: 360px !important;
    width: 80% !important;
    margin: 0 auto !important;
    animation: tramitesBannerFloat 3.8s ease-in-out infinite;
    will-change: transform;
}

body.home .fusion-builder-row-7 .imageframe-19 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease !important;
}

body.home .fusion-builder-row-7 .imageframe-19:hover {
    animation-play-state: paused !important;
}

body.home .fusion-builder-row-7 .imageframe-19:hover img {
    transform: translateY(-6px) scale(1.05) !important;
    filter: brightness(1.05) !important;
}

/* 2. Tarjetas Circulares (Solicitud, Primer Ingreso, Registro y Estadística) */
body.home .fusion-builder-row-7 .fusion-builder-column-29 .fusion-column-wrapper,
body.home .fusion-builder-row-7 .fusion-builder-column-30 .fusion-column-wrapper,
body.home .fusion-builder-row-7 .fusion-builder-column-31 .fusion-column-wrapper {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body.home .fusion-builder-row-7 .fusion-builder-column-29 .fusion-image-element,
body.home .fusion-builder-row-7 .fusion-builder-column-30 .fusion-image-element,
body.home .fusion-builder-row-7 .fusion-builder-column-31 .fusion-image-element {
    --awb-max-width: 165px !important;
    max-width: 165px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.home .fusion-builder-row-7 .imageframe-20,
body.home .fusion-builder-row-7 .imageframe-21,
body.home .fusion-builder-row-7 .imageframe-22 {
    display: inline-block !important;
    max-width: 165px !important;
    width: 100% !important;
    text-align: center !important;
    will-change: transform;
}

/* Movimiento continuo más evidente, dinámico y desfasado */
body.home .fusion-builder-row-7 .imageframe-20 {
    animation: tramitesCardFloat1 3.2s ease-in-out infinite;
}

body.home .fusion-builder-row-7 .imageframe-21 {
    animation: tramitesCardFloat2 3.6s ease-in-out 0.5s infinite;
}

body.home .fusion-builder-row-7 .imageframe-22 {
    animation: tramitesCardFloat3 3.4s ease-in-out 1.0s infinite;
}

/* Pausar flotación y elevar plano z al interactuar */
body.home .fusion-builder-row-7 .imageframe-19:hover,
body.home .fusion-builder-row-7 .imageframe-20:hover,
body.home .fusion-builder-row-7 .imageframe-21:hover,
body.home .fusion-builder-row-7 .imageframe-22:hover {
    animation-play-state: paused !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Contenedores de enlaces e imágenes */
body.home .fusion-builder-row-7 .imageframe-20 a,
body.home .fusion-builder-row-7 .imageframe-21 a,
body.home .fusion-builder-row-7 .imageframe-22 a {
    display: block !important;
    cursor: pointer !important;
    overflow: visible !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease !important;
}

body.home .fusion-builder-row-7 .imageframe-20 img,
body.home .fusion-builder-row-7 .imageframe-21 img,
body.home .fusion-builder-row-7 .imageframe-22 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    pointer-events: none;
    overflow: visible !important;
}

/* Animación elástica sin recortes al pasar el mouse (hover) */
body.home .fusion-builder-row-7 .imageframe-20 a:hover,
body.home .fusion-builder-row-7 .imageframe-21 a:hover,
body.home .fusion-builder-row-7 .imageframe-22 a:hover {
    transform: translateY(-12px) scale(1.12) !important;
    filter: brightness(1.08) !important;
    overflow: visible !important;
}

/* Respuesta táctil al hacer click (active) */
body.home .fusion-builder-row-7 .imageframe-20 a:active,
body.home .fusion-builder-row-7 .imageframe-21 a:active,
body.home .fusion-builder-row-7 .imageframe-22 a:active {
    transform: translateY(-4px) scale(1.03) !important;
}

/* Keyframes de animación continua (sin sombras externas que generen recuadros) */
@keyframes tramitesBannerFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes tramitesCardFloat1 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    50% {
        transform: translateY(-15px) rotate(-1.5deg) scale(1.02);
    }
}

@keyframes tramitesCardFloat2 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    50% {
        transform: translateY(-17px) rotate(1.5deg) scale(1.02);
    }
}

@keyframes tramitesCardFloat3 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    50% {
        transform: translateY(-14px) rotate(-1.2deg) scale(1.02);
    }
}

/* Adaptabilidad para pantallas móviles */
@media (max-width: 768px) {
    body.home .fusion-builder-row-7 .imageframe-19 {
        max-width: 280px !important;
    }
    body.home .fusion-builder-row-7 .fusion-builder-column-29 .fusion-image-element,
    body.home .fusion-builder-row-7 .fusion-builder-column-30 .fusion-image-element,
    body.home .fusion-builder-row-7 .fusion-builder-column-31 .fusion-image-element,
    body.home .fusion-builder-row-7 .imageframe-20,
    body.home .fusion-builder-row-7 .imageframe-21,
    body.home .fusion-builder-row-7 .imageframe-22 {
        --awb-max-width: 145px !important;
        max-width: 145px !important;
    }
    body.home .fusion-builder-row-7 .fusion-builder-column-29,
    body.home .fusion-builder-row-7 .fusion-builder-column-30,
    body.home .fusion-builder-row-7 .fusion-builder-column-31 {
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   SECCIÓN REDES SOCIALES: TAMAÑO COMPACTO, TIKTOK, MOVIMIENTO DINÁMICO Y HOVER
   ========================================================================== */

/* 1. Contenedor y fila de Redes Sociales: Más compacto y proporcionado */
body.home .fusion-builder-row-6.fusion-fullwidth {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    --awb-padding-top: 24px !important;
    --awb-padding-bottom: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.home .fusion-builder-row-6.fusion-no-small-visibility,
body.home .fusion-builder-row-6.fusion-no-medium-visibility {
    display: block !important;
}

body.home .fusion-builder-column-26 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    --awb-padding-top: 0px !important;
    --awb-padding-bottom: 0px !important;
    margin-bottom: 0 !important;
    --awb-margin-bottom-large: 0px !important;
}

body.home .fusion-builder-column-26 .fusion-column-wrapper {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Separador inferior de la sección de redes sociales */
body.home .fusion-builder-column-26 .fusion-separator {
    display: none !important;
}

/* 2. Banner "REDES SOCIALES" más pequeño, elegante y con movimiento continuo */
body.home .fusion-builder-column-26 .fusion-image-element {
    margin-bottom: 18px !important;
    text-align: center !important;
}

body.home .fusion-builder-column-26 .imageframe-18 {
    display: inline-block !important;
    max-width: 320px !important;
    width: 80% !important;
    margin: 0 auto !important;
    animation: socialBannerFloat 3.8s ease-in-out infinite;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease !important;
}

body.home .fusion-builder-column-26 .imageframe-18 img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}

body.home .fusion-builder-column-26 .imageframe-18:hover {
    animation-play-state: paused !important;
    transform: translateY(-4px) scale(1.03) !important;
    filter: drop-shadow(0 10px 22px rgba(246, 191, 17, 0.35)) brightness(1.06) !important;
}

@keyframes socialBannerFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-7px);
    }
}

/* 3. Contenedor de iconos sociales */
.redes-sociales-items {
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.redes-sociales-items .fusion-social-networks-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}

/* 4. Botones circulares modernos, compactos (56px) con micro-interacciones */
.redes-sociales-items .fusion-social-network-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    line-height: 56px !important;
    font-size: 25px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    text-decoration: none !important;
    perspective: 600px;
    
    /* Fondo estilo glassmorphism USAC */
    background: linear-gradient(135deg, rgba(14, 111, 183, 0.45) 0%, rgba(10, 40, 76, 0.85) 100%) !important;
    border: 2px solid rgba(246, 191, 17, 0.45) !important;
    color: #f6bf11 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    
    /* Transición elástica suave */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                background 0.35s ease,
                border-color 0.35s ease,
                color 0.35s ease,
                filter 0.35s ease !important;
    will-change: transform, box-shadow;
}

/* Efecto Shimmer (destello de luz que cruza el botón en hover) */
.redes-sociales-items .fusion-social-network-icon::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -130% !important;
    width: 60% !important;
    height: 200% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%) !important;
    transform: rotate(25deg) !important;
    pointer-events: none !important;
    transition: none !important;
    z-index: 3 !important;
}

.redes-sociales-items .fusion-social-network-icon:hover::after {
    left: 170% !important;
    transition: left 0.75s ease-in-out !important;
}

/* 5. Movimiento continuo orgánico y desfasado (Levitación de las redes sociales) */
.redes-sociales-items .fusion-facebook {
    animation: socialFloat1 3.2s ease-in-out infinite !important;
}
.redes-sociales-items .fusion-tiktok {
    animation: socialFloat2 3.6s ease-in-out 0.45s infinite !important;
}
.redes-sociales-items .fusion-instagram {
    animation: socialFloat3 3.4s ease-in-out 0.9s infinite !important;
}
.redes-sociales-items .fusion-youtube {
    animation: socialFloat4 3.8s ease-in-out 1.35s infinite !important;
}
.redes-sociales-items .fusion-whatsapp {
    animation: socialFloat1 3.5s ease-in-out 0.6s infinite !important;
}

@keyframes socialFloat1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-7px) rotate(-1.5deg); }
}
@keyframes socialFloat2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(1.8deg); }
}
@keyframes socialFloat3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-6.5px) rotate(-1.2deg); }
}
@keyframes socialFloat4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-7.5px) rotate(1.5deg); }
}

/* 6. Pausar flotación y elevar z-index en hover */
.redes-sociales-items .fusion-social-network-icon:hover {
    animation-play-state: paused !important;
    z-index: 10 !important;
    transform: translateY(-10px) scale(1.18) !important;
}

/* Hover FACEBOOK: Azul oficial, brillo envolvente e icono blanco */
.redes-sociales-items .fusion-facebook:hover {
    background: linear-gradient(135deg, #1877f2 0%, #0d65d9 100%) !important;
    border-color: #1877f2 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(24, 119, 242, 0.6), 0 0 24px rgba(24, 119, 242, 0.45) !important;
}

/* Hover TIKTOK: Negro cibernético con aberración cromática cian y magenta */
.redes-sociales-items .fusion-tiktok:hover {
    background: #010101 !important;
    border-color: #00f2fe !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7),
                -4px 4px 20px rgba(0, 242, 254, 0.65),
                4px -4px 20px rgba(254, 9, 121, 0.65) !important;
}

.redes-sociales-items .fusion-tiktok:hover svg,
.redes-sociales-items .fusion-tiktok:hover::before {
    filter: drop-shadow(-2.5px 1.8px 0px #00f2fe) drop-shadow(2.5px -1.8px 0px #fe0979) !important;
    transform: scale(1.14);
}

/* Hover INSTAGRAM: Gradiente atardecer característico y halo fucsia */
.redes-sociales-items .fusion-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
    border-color: #d6249f !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(214, 36, 159, 0.6), 0 0 24px rgba(253, 89, 73, 0.45) !important;
}

/* Hover YOUTUBE: Rojo puro vibrante y brillo incandescente */
.redes-sociales-items .fusion-youtube:hover {
    background: linear-gradient(135deg, #ff0000 0%, #c40000 100%) !important;
    border-color: #ff0000 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(255, 0, 0, 0.65), 0 0 24px rgba(255, 0, 0, 0.45) !important;
}

/* Hover WHATSAPP: Verde vibrante oficial */
.redes-sociales-items .fusion-whatsapp:hover {
    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(37, 211, 102, 0.6), 0 0 24px rgba(37, 211, 102, 0.45) !important;
}

/* Micro-animación en los iconos internos al hacer hover */
.redes-sociales-items .fusion-social-network-icon:hover::before,
.redes-sociales-items .fusion-social-network-icon:hover svg {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease !important;
}

.redes-sociales-items .fusion-facebook:hover::before {
    transform: scale(1.14) rotate(4deg) !important;
}
.redes-sociales-items .fusion-instagram:hover::before {
    transform: scale(1.14) rotate(-4deg) !important;
}
.redes-sociales-items .fusion-youtube:hover::before {
    transform: scale(1.14) rotate(4deg) !important;
}
.redes-sociales-items .fusion-whatsapp:hover::before {
    transform: scale(1.14) rotate(-4deg) !important;
}

/* 7. Respuesta táctil de rebote elástico al hacer CLIC */
.redes-sociales-items .fusion-social-network-icon:active {
    transform: translateY(-2px) scale(0.93) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

/* 8. Renderizado del icono de TikTok */
.redes-sociales-items .fusion-tiktok svg.tiktok-svg-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    fill: currentColor !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Fallback de máscara si no hay SVG embebido */
.redes-sociales-items .fusion-tiktok:not(:has(svg))::before {
    content: "" !important;
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17A122.18,122.18,0,0,0,381,102.39,121.43,121.43,0,0,0,448,122.53Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17A122.18,122.18,0,0,0,381,102.39,121.43,121.43,0,0,0,448,122.53Z'/%3E%3C/svg%3E") no-repeat center / contain !important;
    vertical-align: middle !important;
    position: relative !important;
    z-index: 2 !important;
}

.redes-sociales-items .fusion-tiktok:has(svg)::before {
    display: none !important;
}

/* Onda expansiva (Ripple) al hacer clic generada por JS */
.social-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: socialRippleAnimation 0.6s linear;
    pointer-events: none;
    z-index: 4;
}

@keyframes socialRippleAnimation {
    to {
        transform: scale(3.5);
        opacity: 0;
    }
}

/* 9. Adaptabilidad móvil fluida */
@media (max-width: 768px) {
    body.home .fusion-builder-column-26 .imageframe-18 {
        max-width: 260px !important;
        width: 85% !important;
    }
    .redes-sociales-items .fusion-social-network-icon {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        line-height: 50px !important;
        font-size: 22px !important;
    }
    .redes-sociales-items .fusion-tiktok svg.tiktok-svg-icon,
    .redes-sociales-items .fusion-tiktok::before {
        width: 21px !important;
        height: 21px !important;
    }
    .redes-sociales-items .fusion-social-networks-wrapper {
        gap: 14px !important;
    }
}

/* ==========================================================================
   SECCIÓN UNIDADES Y DEPARTAMENTOS: ANIMACIÓN SUAVE EN BUCLE Y HOVER IMPRESIONANTE
   ========================================================================== */

/* 1. Limpieza de contenedores para evitar recortes de sombras, elevación y auras */
body.home .fusion-builder-row-4,
body.home .fusion-builder-row-4 .fusion-builder-row,
body.home .fusion-builder-row-4 .fusion-layout-column,
body.home .fusion-builder-row-4 .fusion-column-wrapper,
body.home .fusion-builder-row-4 .fusion-content-boxes,
body.home .fusion-builder-row-4 .content-box-column,
body.home .fusion-builder-row-4 .content-box-wrapper,
body.home .fusion-builder-row-4 .heading,
body.home .fusion-builder-row-4 .heading-link,
body.home .fusion-builder-row-4 .image,
body.home .fusion-builder-row-4 .fusion-imageframe {
    overflow: visible !important;
}

/* 2. Enlace contenedor del icono orbital */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important;
    will-change: transform;
    perspective: 500px;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 3. Contenedor de imagen (.image) que recibe el salto y el tilt 3D */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link .image {
    position: relative !important;
    display: inline-block !important;
    transform-origin: center center !important;
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 4. Imagen circular del icono con sombra ambiental y contorno de luz dorada */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link .image img {
    display: block !important;
    max-width: 155px !important;
    width: 150px !important;
    height: auto !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.42))
            drop-shadow(0 0 10px rgba(246, 191, 17, 0.3));
    transition: filter 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    will-change: filter, transform;
}

/* 5. Aura resplandeciente de energía detrás del círculo (Halo cósmico) */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 146px !important;
    height: 146px !important;
    margin-top: -80px !important;
    margin-left: -73px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(246, 191, 17, 0.7) 0%, rgba(14, 111, 183, 0.5) 45%, rgba(0, 195, 255, 0.28) 65%, transparent 78%) !important;
    opacity: 0 !important;
    transform: scale(0.6) !important;
    pointer-events: none !important;
    z-index: -1 !important;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 6. Barrido de destello luminoso diagonal (Shimmer beam) */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link::after {
    content: '' !important;
    position: absolute !important;
    top: -25% !important;
    left: -130% !important;
    width: 65% !important;
    height: 150% !important;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%) !important;
    transform: rotate(25deg) !important;
    pointer-events: none !important;
    z-index: 6 !important;
    opacity: 0;
    transition: none !important;
}

/* 7. ANIMACIONES SUAVES EN BUCLE (Flotación orgánica desfasada para cada icono) */

/* CMS (Centro Superior) */
body.home .fusion-builder-row-4 .fusion-builder-column-20 .heading-link,
body.home .fusion-builder-row-4 .fusion-content-boxes-1 .heading-link {
    animation: fcmUnidadesFloatTop 4.0s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
}

/* UTIC (Superior Derecha) */
body.home .fusion-builder-row-4 .fusion-builder-column-22 .heading-link,
body.home .fusion-builder-row-4 .fusion-content-boxes-3 .heading-link {
    animation: fcmUnidadesFloatTopRight 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.5s infinite !important;
}

/* CONTROL ACADÉMICO (Medio Derecha) */
body.home .fusion-builder-row-4 .fusion-builder-column-25 .content-box-column-1 .heading-link,
body.home .fusion-builder-row-4 .fusion-content-boxes-5 .content-box-column-1 .heading-link {
    animation: fcmUnidadesFloatMidRight 4.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1.0s infinite !important;
}

/* BIBLIOTECA (Inferior Derecha) */
body.home .fusion-builder-row-4 .fusion-builder-column-25 .content-box-column-2 .heading-link,
body.home .fusion-builder-row-4 .fusion-content-boxes-5 .content-box-column-2 .heading-link {
    animation: fcmUnidadesFloatBotRight 3.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1.5s infinite !important;
}

/* UNEV (Inferior Izquierda) */
body.home .fusion-builder-row-4 .fusion-builder-column-23 .content-box-column-2 .heading-link,
body.home .fusion-builder-row-4 .fusion-content-boxes-4 .content-box-column-2 .heading-link {
    animation: fcmUnidadesFloatBotLeft 4.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) 2.0s infinite !important;
}

/* UNADE (Medio Izquierda) */
body.home .fusion-builder-row-4 .fusion-builder-column-23 .content-box-column-1 .heading-link,
body.home .fusion-builder-row-4 .fusion-content-boxes-4 .content-box-column-1 .heading-link {
    animation: fcmUnidadesFloatMidLeft 3.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) 2.5s infinite !important;
}

/* CAMPUSMED (Superior Izquierda) */
body.home .fusion-builder-row-4 .fusion-builder-column-21 .heading-link,
body.home .fusion-builder-row-4 .fusion-content-boxes-2 .heading-link {
    animation: fcmUnidadesFloatTopLeft 3.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) 3.0s infinite !important;
}

/* 8. EFECTO IMPRESIONANTE AL PASAR EL MOUSE (HOVER) */

/* Pausar bucle y traer al frente con prioridad z-index */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link:hover {
    animation-play-state: paused !important;
    z-index: 120 !important;
}

/* Elevación tridimensional y ampliación elástica */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link:hover .image {
    transform: translateY(-18px) scale(1.18) !important;
}

/* Despliegue de aura energética pulsante */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link:hover::before {
    opacity: 1 !important;
    transform: scale(1.38) !important;
    animation: fcmAuraShockwave 1.6s ease-in-out infinite alternate !important;
}

/* Destello luminoso que recorre el icono */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link:hover::after {
    opacity: 1 !important;
    left: 150% !important;
    transition: left 0.75s ease-in-out, opacity 0.2s ease !important;
}

/* Resplandor multicapa con brillo dorado y azul/cian médico USAC de alta intensidad */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link:hover .image img {
    filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 22px rgba(246, 191, 17, 0.95))
            drop-shadow(0 0 45px rgba(14, 111, 183, 0.85))
            drop-shadow(0 0 70px rgba(0, 195, 255, 0.65))
            brightness(1.14) contrast(1.06) !important;
}

/* Respuesta táctil elástica al hacer clic (ACTIVE) */
body.home .fusion-builder-row-4 .fusion-content-boxes .heading-link:active .image {
    transform: translateY(-8px) scale(1.08) !important;
    transition: transform 0.1s ease !important;
}

/* 9. KEYFRAMES DE FLOTACIÓN SUAVE (Armonía orbital sinusoidal) */
@keyframes fcmUnidadesFloatTop {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-11px) scale(1.02);
    }
}

@keyframes fcmUnidadesFloatTopRight {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) translateX(3px) rotate(1.8deg);
    }
}

@keyframes fcmUnidadesFloatMidRight {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-11px) translateX(4px) rotate(1.4deg);
    }
}

@keyframes fcmUnidadesFloatBotRight {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) translateX(3px) rotate(1.2deg);
    }
}

@keyframes fcmUnidadesFloatBotLeft {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) translateX(-3px) rotate(-1.2deg);
    }
}

@keyframes fcmUnidadesFloatMidLeft {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-11px) translateX(-4px) rotate(-1.5deg);
    }
}

@keyframes fcmUnidadesFloatTopLeft {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) translateX(-3px) rotate(-1.8deg);
    }
}

@keyframes fcmAuraShockwave {
    0% {
        transform: scale(1.25);
        opacity: 0.75;
    }
    100% {
        transform: scale(1.45);
        opacity: 1;
        filter: blur(2px);
    }
}

/* 10. PARTÍCULAS LUMINOSAS (Efecto de chispas estelares al interactuar) */
.fcm-star-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f6bf11;
    box-shadow: 0 0 10px #f6bf11, 0 0 18px #00f2fe;
    pointer-events: none;
    z-index: 100;
    animation: fcmSparkDrift 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes fcmSparkDrift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--spark-tx, 20px), var(--spark-ty, -30px)) scale(0.2);
        opacity: 0;
    }
}

/* 11. ADAPTABILIDAD MÓVIL (Versión cuadrícula de iconos) */
@media (max-width: 768px) {
    body.home .fusion-builder-row-4 .fusion-image-element .fusion-imageframe {
        overflow: visible !important;
    }
    body.home .fusion-builder-row-4 .fusion-image-element .fusion-imageframe a {
        display: inline-block !important;
        position: relative !important;
        cursor: pointer !important;
        will-change: transform;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    body.home .fusion-builder-row-4 .fusion-image-element .fusion-imageframe a img {
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 8px rgba(246, 191, 17, 0.25));
        transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    body.home .fusion-builder-row-4 .imageframe-12 a { animation: fcmUnidadesFloatMidLeft 3.6s ease-in-out infinite !important; }
    body.home .fusion-builder-row-4 .imageframe-13 a { animation: fcmUnidadesFloatTopLeft 3.9s ease-in-out 0.5s infinite !important; }
    body.home .fusion-builder-row-4 .imageframe-14 a { animation: fcmUnidadesFloatBotLeft 4.1s ease-in-out 1.0s infinite !important; }
    body.home .fusion-builder-row-4 .imageframe-15 a { animation: fcmUnidadesFloatTopRight 3.8s ease-in-out 1.5s infinite !important; }
    body.home .fusion-builder-row-4 .imageframe-16 a { animation: fcmUnidadesFloatMidRight 4.2s ease-in-out 2.0s infinite !important; }
    body.home .fusion-builder-row-4 .imageframe-17 a { animation: fcmUnidadesFloatBotRight 3.7s ease-in-out 2.5s infinite !important; }

    body.home .fusion-builder-row-4 .fusion-image-element .fusion-imageframe a:hover {
        animation-play-state: paused !important;
        z-index: 10 !important;
    }
    body.home .fusion-builder-row-4 .fusion-image-element .fusion-imageframe a:hover img {
        transform: translateY(-10px) scale(1.14) !important;
        filter: drop-shadow(0 14px 25px rgba(0, 0, 0, 0.55))
                drop-shadow(0 0 18px rgba(246, 191, 17, 0.9))
                drop-shadow(0 0 35px rgba(14, 111, 183, 0.8))
                brightness(1.12) contrast(1.05) !important;
    }
}

/* ==========================================================================
   ESCUDO / SELLO DE ACREDITACIÓN: EFECTO DE FOCO DE LUZ BLANCA SUAVE Y BRILLO DORADO
   ========================================================================== */

/* Contenedor principal del escudo en el Hero */
body.home .escudo-acreditacion-wrapper,
body.home .fusion-image-element:has(.escudo-acreditacion-link) {
    text-align: center !important;
    position: relative !important;
    z-index: 30 !important;
    overflow: visible !important;
}

body.home .escudo-acreditacion-frame,
body.home .imageframe-2 {
    display: inline-block !important;
    position: relative !important;
    overflow: visible !important;
    max-width: 480px !important;
    width: 100% !important;
    text-align: center !important;
}

/* Enlace/caja interactiva del escudo */
body.home .escudo-acreditacion-link,
body.home .imageframe-2 a {
    position: relative !important;
    display: inline-block !important;
    max-width: 480px !important;
    width: 100% !important;
    vertical-align: middle !important;
    line-height: 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    will-change: transform;
    -webkit-tap-highlight-color: transparent !important;
}

body.home .escudo-acreditacion-link:hover,
body.home .imageframe-2 a:hover {
    transform: translateY(-4px) scale(1.025) !important;
}

/* Imagen del escudo: Sombra neutra suave y elegante, SIN halos amarillos */
body.home .escudo-acreditacion-img,
body.home .imageframe-2 img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.42)) !important;
    animation: none !important;
    position: relative !important;
    z-index: 1 !important;
    transition: transform 0.4s ease, filter 0.4s ease !important;
}

body.home .escudo-acreditacion-link:hover .escudo-acreditacion-img,
body.home .imageframe-2 a:hover img {
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.52)) brightness(1.04) !important;
}

/* Capa de iluminación: circular, limpia y superpuesta sobre el escudo */
.escudo-luz-brillo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 50 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Foco de luz blanca tenue y suave: barrido lento con reflejo metálico sobre el oro */
.escudo-luz-brillo::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -50% !important;
    left: 0 !important;
    width: 42% !important;
    height: 200% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.12) 20%,
        rgba(255, 255, 255, 0.45) 45%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.45) 55%,
        rgba(255, 255, 255, 0.12) 80%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    filter: blur(3px) !important;
    pointer-events: none !important;
    will-change: transform, opacity;
    animation: fcmFocoLuzBlanca 5.0s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important;
}

/* Animación lenta y suave: barrido continuo de un lado a otro (3.5s) y pausa serena (1.5s) */
@keyframes fcmFocoLuzBlanca {
    0% {
        transform: translate3d(-75%, 0, 0) rotate(25deg);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    70% {
        transform: translate3d(145%, 0, 0) rotate(25deg);
        opacity: 0;
    }
    100% {
        transform: translate3d(145%, 0, 0) rotate(25deg);
        opacity: 0;
    }
}



/* ==========================================================================
   SECCIÓN CARRERAS AFINES (PREGRADO - PÁGINA 2023):
   Tarjetas Ejecutivas Modernas, Avatares Circulares Institucionales y Alineación Perfecta
   ========================================================================== */

/* Reducción del espacio entre las tarjetas y la sección Contáctanos */
.page-id-2023 .fusion-builder-row-4.fusion-fullwidth {
    display: block !important;
    padding-top: 25px !important;
    padding-bottom: 10px !important;
    --awb-padding-bottom: 10px !important;
    margin-bottom: 0px !important;
    background-color: transparent !important;
}

/* Ocultar separador vacío redundante entre las tarjetas y Contáctanos */
.page-id-2023 .fusion-builder-column-14 {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sección Contáctanos: espaciado superior compacto y proporcionado */
.page-id-2023 .fusion-builder-row-5.fusion-fullwidth {
    padding-top: 20px !important;
    --awb-padding-top: 20px !important;
    margin-top: 0px !important;
}

.page-id-2023 .fusion-builder-column-15 {
    padding-top: 0px !important;
    --awb-padding-top: 0px !important;
    margin-top: 0px !important;
}

.page-id-2023 .fusion-title-3 {
    margin-top: 0px !important;
    --awb-margin-top: 0px !important;
    margin-bottom: 25px !important;
}

/* Grid contenedor de las 3 tarjetas: forzado a 3 columnas exactas e idénticas */
.page-id-2023 .rectangulo-terapia {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    width: 100% !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
}

/* CRUCIAL: Eliminar pseudo-elementos ::before/::after de Bootstrap/Avada que roban celdas en Grid */
.page-id-2023 .rectangulo-terapia::before,
.page-id-2023 .rectangulo-terapia::after,
.page-id-2023 .rectangulo-terapia > .fusion-clearfix {
    display: none !important;
    content: none !important;
}

/* Anulación de floats y anchos heredados de Avada para cada columna */
.page-id-2023 .rectangulo-terapia .fusion-column.content-box-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Tarjeta individual ejecutiva estilo Glassmorphism USAC */
.page-id-2023 .rectangulo-terapia .content-box-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top: 4px solid #f6bf11 !important;
    border-radius: 20px !important;
    padding: 34px 24px 28px 24px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease !important;
    text-align: center !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Efecto hover interactivo con elevación y resplandor dorado */
.page-id-2023 .rectangulo-terapia .content-box-wrapper:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(246, 191, 17, 0.18) !important;
    border-color: rgba(246, 191, 17, 0.55) !important;
}

/* 1. Marco circular para la foto del Director (enmascara recortes irregulares) */
.page-id-2023 .carreras-avatar-frame {
    width: 132px !important;
    height: 132px !important;
    border-radius: 50% !important;
    margin: 0 auto 20px auto !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #edf2f7 100%) !important;
    border: 3.5px solid #f6bf11 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(246, 191, 17, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.page-id-2023 .content-box-wrapper:hover .carreras-avatar-frame {
    transform: scale(1.05) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 0 5px rgba(246, 191, 17, 0.35) !important;
}

.page-id-2023 .carreras-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 50% !important;
}

/* 2. Título institucional de la Escuela */
.page-id-2023 .carreras-card-title {
    font-family: 'Montserrat', sans-serif !important;
    color: #f6bf11 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 16px 0 !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
}

/* Divisor decorativo sutil dorado */
.page-id-2023 .carreras-card-divider {
    height: 1px !important;
    width: 80% !important;
    margin: 0 auto 18px auto !important;
    background: linear-gradient(90deg, transparent 0%, rgba(246, 191, 17, 0.45) 50%, transparent 100%) !important;
    flex-shrink: 0 !important;
}

/* 3. Cuerpo de la tarjeta: Información del Director y Ubicación */
.page-id-2023 .carreras-card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.page-id-2023 .carreras-role-badge {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.page-id-2023 .carreras-director-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.35 !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Caja de ubicación sobria y elegante con altura idéntica */
.page-id-2023 .carreras-location-box {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin-top: auto !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.page-id-2023 .carreras-location-item {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    text-align: center !important;
}

.page-id-2023 .carreras-pin-icon {
    fill: #f6bf11 !important;
    color: #f6bf11 !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 2px !important;
}

/* 4. Footer de la tarjeta y Botón "SABER MÁS" perfectamente alineado */
.page-id-2023 .carreras-card-footer {
    margin-top: auto !important;
    width: 100% !important;
}

.page-id-2023 .carreras-btn-saber-mas {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 13px 24px !important;
    background: #0e6fb7 !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 14px rgba(14, 111, 183, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.page-id-2023 .carreras-btn-saber-mas:hover {
    background: #f6bf11 !important;
    color: #0a284c !important;
    box-shadow: 0 6px 20px rgba(246, 191, 17, 0.5) !important;
    transform: translateY(-2px) !important;
    border-color: #f6bf11 !important;
}

.page-id-2023 .carreras-btn-saber-mas span {
    color: inherit !important;
}

/* 5. Adaptabilidad Responsiva */
@media (max-width: 991px) {
    .page-id-2023 .rectangulo-terapia {
        grid-template-columns: 1fr !important;
        max-width: 480px !important;
        gap: 24px !important;
    }
}

/* 6. Fotografía destacada de la Directora (Reducción 30%: de 500px a 350px) */
.page-id-2023 .doctora-foto-destacada,
.page-id-2023 .fusion-builder-column-6 .fusion-image-element {
    --awb-max-width: 350px !important;
    max-width: 350px !important;
    width: 350px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -24% !important;
    display: block !important;
    text-align: center !important;
    transition: transform 0.35s ease, filter 0.35s ease !important;
}

.page-id-2023 .doctora-foto-destacada:hover,
.page-id-2023 .fusion-builder-column-6 .fusion-image-element:hover {
    transform: translateY(-4px) scale(1.02) !important;
}

.page-id-2023 .doctora-foto-destacada .fusion-imageframe,
.page-id-2023 .fusion-builder-column-6 .fusion-imageframe {
    max-width: 350px !important;
    width: 100% !important;
    display: inline-block !important;
    margin: 0 auto !important;
}

.page-id-2023 .doctora-foto-destacada .fusion-imageframe a,
.page-id-2023 .doctora-foto-destacada .fusion-imageframe img,
.page-id-2023 .fusion-builder-column-6 .fusion-imageframe a,
.page-id-2023 .fusion-builder-column-6 .fusion-imageframe img {
    max-width: 350px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .page-id-2023 .doctora-foto-destacada,
    .page-id-2023 .fusion-builder-column-6 .fusion-image-element {
        --awb-max-width: 270px !important;
        max-width: 270px !important;
        width: 270px !important;
        margin-top: -28% !important;
    }
}

/* ==========================================================================
   PIE DE PÁGINA INSTITUCIONAL UNIFICADO (FACULTAD DE CIENCIAS MÉDICAS - USAC)
   ========================================================================== */
.fusion-tb-footer,
.fusion-footer,
.fcm-global-footer {
    background-color: #0a284c !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 10 !important;
    clear: both !important;
    width: 100% !important;
}

.fusion-tb-footer .fusion-footer-widget-area,
.fusion-footer .fusion-footer-widget-area {
    padding: 0 !important;
    background-color: #0a284c !important;
    width: 100% !important;
}

.fusion-tb-footer .fusion-fullwidth,
.fusion-footer .fusion-fullwidth {
    background-color: #0a284c !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}

.fusion-tb-footer p,
.fusion-footer p,
.fcm-global-footer p {
    color: #ffffff !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.3px !important;
    -webkit-font-smoothing: antialiased !important;
}

.fcm-global-footer {
    padding: 22px 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Sticky footer para vistas portal independientes */
body:has(.fcm-global-footer) {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

body:has(.fcm-global-footer) > .container:last-of-type {
    flex: 1 0 auto !important;
}

/* === MODULO OFICIAL DE SOLICITUD DE PROGRAMAS: OVERRIDES COMPACTOS ===
   Evita que reglas globales de Avada (.post-content h2 con Playfair Display de 70px)
   inflen los títulos o desborden la pantalla en laptops. */
.spp-wrapper,
.spp-wrapper * {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    box-sizing: border-box;
}

.spp-wrapper h1,
.spp-wrapper h2,
.spp-wrapper h3,
.spp-wrapper h4,
.spp-wrapper .spp-card-title,
.post-content .spp-wrapper .spp-card-title,
#content .post-content .spp-wrapper .spp-card-title,
body #main .post-content .spp-card-title,
div.spp-card-title,
h2.spp-card-title {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0a284c !important;
    letter-spacing: -0.2px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}

.spp-wrapper .spp-card-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    margin: 2px 0 0 0 !important;
}

.spp-wrapper .spp-list-title,
.spp-wrapper .spp-list-header h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #0a284c !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* ==========================================================================
   MENÚ DE NAVEGACIÓN INSTITUCIONAL - COMPACTO Y UNIFORME
   Píldoras limpias #0f3f58, tipografía 11px, LOGIN 100% integrado en color
   ========================================================================== */

/* 1. Contenedor de lista sin flex-wrap para evitar saltos de línea */
.awb-menu__main-ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 2. Reset de márgenes en elementos de lista */
.awb-menu__main-li {
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 3. Limpieza de contenedores de fondo Avada por defecto */
.awb-menu__main-li_regular {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.awb-menu__main-background-default,
.awb-menu__main-background-active {
    display: none !important;
}

/* 4. Enlaces del Menú en formato Píldora Elegante Institucional (Color #0f3f58 uniforme) */
.awb-menu__main-a,
.awb-menu__main-a_regular {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 11px !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #f6bf11 !important;
    background-color: #0f3f58 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25px !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

/* 5. Texto interno sin corte de línea con fuente más pequeña */
.awb-menu__main-a .menu-text {
    white-space: nowrap !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #f6bf11 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 6. Efectos Hover Fluidos y Elegantes */
.awb-menu__main-a:hover,
.awb-menu__main-li:hover > .awb-menu__main-a {
    background-color: #0a284c !important;
    color: #ffffff !important;
    border-bottom: 2px solid #f6bf11 !important;
    transform: translateY(-1px) !important;
}

.awb-menu__main-a:hover .menu-text,
.awb-menu__main-li:hover > .awb-menu__main-a .menu-text {
    color: #ffffff !important;
}

/* 7. Página Activa con acento inferior dorado institucional */
.current-menu-item > .awb-menu__main-a,
.current_page_item > .awb-menu__main-a,
.current-menu-ancestor > .awb-menu__main-a {
    border-bottom: 2px solid #f6bf11 !important;
}

/* 8. Icono Flecha Desplegable en Menú */
.awb-menu__open-nav-submenu-hover {
    color: #f6bf11 !important;
    margin-left: 4px !important;
    font-size: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.awb-menu__main-a:hover .awb-menu__open-nav-submenu-hover,
.awb-menu__main-li:hover > .awb-menu__main-a .awb-menu__open-nav-submenu-hover {
    color: #ffffff !important;
}

/* 9. Botón Login 100% idéntico en color a los otros botones */
#menu-item-admin {
    margin-left: 5px !important;
}

#menu-item-admin .awb-menu__main-a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 11px !important;
    background-color: #0f3f58 !important;
    color: #f6bf11 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.25px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#menu-item-admin .awb-menu__main-a:hover {
    background-color: #0a284c !important;
    color: #ffffff !important;
    border-bottom: 2px solid #f6bf11 !important;
    transform: translateY(-1px) !important;
}

#menu-item-admin .awb-menu__main-a:hover .menu-text {
    color: #ffffff !important;
}

#menu-item-admin .menu-text {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.25px !important;
    color: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    box-shadow: none !important;
}

/* 10. Submenús Desplegables Institucionales - Ultra Compactos */
.awb-menu__sub-ul {
    background-color: #0a284c !important;
    border-top: 3px solid #f6bf11 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    padding: 3px 0 !important;
    margin-top: 2px !important;
    z-index: 99999 !important;
}

.awb-menu__sub-li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    background-color: transparent !important;
}

.awb-menu__sub-li:last-child {
    border-bottom: none !important;
}

.awb-menu__sub-a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    padding: 3.5px 14px !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    height: auto !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

.awb-menu__sub-a span {
    color: inherit !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.3px !important;
}

/* Submenús Activos y Hover: siempre legibles con texto blanco y hover dorado */
.awb-menu__sub-li.current-menu-item,
.awb-menu__sub-li.current_page_item,
.awb-menu__sub-li.current-menu-ancestor {
    background-color: transparent !important;
}

.awb-menu__sub-li.current-menu-item > .awb-menu__sub-a,
.awb-menu__sub-li.current_page_item > .awb-menu__sub-a,
.awb-menu__sub-li.current-menu-ancestor > .awb-menu__sub-a,
.awb-menu__sub-li.current-menu-item > .awb-menu__sub-a span,
.awb-menu__sub-li.current_page_item > .awb-menu__sub-a span {
    color: #ffffff !important;
}

.awb-menu__sub-a:hover,
.awb-menu__sub-li:hover > .awb-menu__sub-a,
.awb-menu__sub-li.current-menu-item:hover > .awb-menu__sub-a,
.awb-menu__sub-li.current_page_item:hover > .awb-menu__sub-a {
    background-color: #0e6fb7 !important;
    color: #f6bf11 !important;
    padding-left: 17px !important;
}

.awb-menu__sub-a:hover span,
.awb-menu__sub-li:hover > .awb-menu__sub-a span {
    color: #f6bf11 !important;
}

/* 10. Escudo Institucional en Cabecera: Sin sombras cuadradas ni artefactos */
.fusion-tb-header .fusion-builder-column-0,
.fusion-tb-header .fusion-builder-column-0 .fusion-column-wrapper,
.fusion-tb-header .fusion-builder-column-0 .fusion-image-element,
.fusion-tb-header .fusion-builder-column-0 .fusion-imageframe,
.fusion-tb-header .fusion-builder-column-0 .imageframe-1,
.fusion-tb-header .fusion-builder-column-0 a,
.fusion-tb-header .fusion-builder-column-0 img {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    --awb-box-shadow: none !important;
    --awb-inner-bg-box-shadow: none !important;
}

.fusion-tb-header .fusion-builder-column-0 img {
    filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ==================================================================
   MENÚ MÓVIL — separación entre opciones
   ==================================================================
   Por debajo de 970 px (el valor sale de data-breakpoint del <nav>) el
   menú se despliega en vertical, pero cada opción medía solo 19,5 px de
   alto y todas quedaban pegadas, difíciles de leer y de pulsar.

   Tres detalles condicionan cómo está escrito esto:

   1. Va al final de local-overrides.css a propósito: es la última hoja
      que carga la página, después de avada-child.css y de
      fusion-dynamic.min.css.

   2. Lleva !important porque hay dos reglas previas que también lo
      usan y habría que superarlas:
         .awb-menu.collapse-enabled a { padding: 0 1.5em !important }   (Avada)
         .awb-menu__sub-a { padding: 3.5px 14px !important }            (este archivo, más arriba)
      Entre reglas !important gana la de mayor especificidad, de ahí que
      los selectores incluyan .collapse-enabled.

   3. Se ajustan padding-top y padding-bottom por separado, nunca el
      atajo `padding`, para no pisar el sangrado lateral de 1.5em que
      Avada usa para indentar el menú móvil.

   .collapse-enabled solo existe cuando el menú está plegado a móvil,
   así que la vista de escritorio no se ve afectada.
   ================================================================== */

@media only screen and (max-width: 970px) {

    /* Encabezados de sección: HOME, DIRECCIONES, ESTUDIANTE... */
    .awb-menu.collapse-enabled .awb-menu__main-a {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* Opciones dentro de cada desplegable */
    .awb-menu.collapse-enabled .awb-menu__sub-a {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    /* Línea tenue entre opciones. La primera de cada grupo no la lleva,
       para no duplicarla con el borde del propio bloque. */
    .awb-menu.collapse-enabled .awb-menu__sub-li + .awb-menu__sub-li > .awb-menu__sub-a {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Aire entre un bloque desplegado y el encabezado siguiente */
    .awb-menu.collapse-enabled .awb-menu__sub-ul {
        padding-top: 4px;
        padding-bottom: 10px;
    }

    /* La flecha de desplegar acompaña la altura de la fila, para que
       siga centrada y sea cómoda de pulsar. */
    .awb-menu.collapse-enabled .awb-menu__open-nav-submenu {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
}

/* ==================================================================
   PORTADA EN MÓVIL — título y escudo
   ==================================================================
   Dos arreglos para pantallas pequeñas:

   · El título "Ciencias Médicas" se salía. Con 46,7 px la línea medía
     436 px dentro de una caja de 369 px, así que se recortaba por el
     lado derecho.

   · El escudo de acreditación ocupaba 369 px de ancho: un 92 % de la
     pantalla, dejando casi sin sitio al resto.

   En lugar de fijar un tamaño concreto se usan clamp()/min(), para que
   ambos se adapten a cualquier móvil —de 320 px a tableta— en vez de
   quedar bien solo en el modelo con el que se probó.

   El !important es necesario porque Avada calcula el tamaño del título
   con su propia regla marcada como importante
   (.fusion-responsive-typography-calculated, dentro de un media query
   de 1000 px).
   ================================================================== */

@media only screen and (max-width: 970px) {

    /* --- Título de la portada ---------------------------------------
       El título tiene dos partes con tamaños distintos:
         · "Facultad de"      → lo pone el propio h2
         · "Ciencias Médicas" → va dentro de un <span style="font-size:90px">

       Esos 90 px están escritos en el atributo style del span, así que
       no escalaban con la pantalla: en un móvil, solo la palabra
       "Ciencias" medía 403 px y se salía. De ahí que hiciera falta
       reducir el span aparte, y con !important, que es lo único que
       gana a un estilo en línea.

       Se usa vw para que ambas partes acompañen el ancho real del
       teléfono, con topes para que no se queden diminutas ni crezcan
       de más en tabletas. */
    .fusion-title-1 .fusion-title-heading,
    .fusion-title-1 .title-heading-center {
        font-size: clamp(22px, 8.5vw, 56px) !important;
        line-height: 1.1 !important;
    }

    .fusion-title-1 .fusion-title-heading span {
        font-size: clamp(38px, 16.5vw, 90px) !important;
        line-height: 1.05 !important;
    }

    /* --- Escudo de acreditación -------------------------------------
       Pasa de ocupar el 92 % del ancho a un 62 %, con un tope para que
       no crezca de más en pantallas grandes.

       El selector lleva `body.home img` porque más arriba en este mismo
       archivo hay dos reglas que ya fijan su tamaño con !important:
           body.home .escudo-acreditacion-img { width:100%; max-width:480px }
           body.home .wp-image-1469          { width:350px }
       Ambas tienen dos clases y un elemento, así que hace falta añadir
       el `img` para superarlas. */
    body.home img.escudo-acreditacion-img,
    body.home img.wp-image-1469 {
        max-width: min(62vw, 300px) !important;
        height: auto !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* El enlace que lo envuelve se ajusta al nuevo tamaño y lo centra. */
    .escudo-acreditacion-link {
        display: block;
        text-align: center;
    }
}

/* ==================================================================
   SECCIÓN "UNIDADES Y DEPARTAMENTOS" EN MÓVIL
   ==================================================================
   Dos arreglos:

   1. TÍTULO. Más arriba en este mismo archivo hay:
          body.home .fusion-title-9 h2 { font-size:46px; line-height:0.92 }
      Una altura de línea de 0,92 es MENOR que la letra, así que las
      mayúsculas y las tildes se recortaban por arriba. En escritorio
      apenas se nota; en un móvil, donde el título ocupa dos líneas,
      se ve claramente cortado.

   2. FONDO. La sección usa bg-flip-600x350-1.jpg, de solo 600x350 px,
      con background-size: cover. En un móvil la sección mide unos
      380x1330 px: para cubrir ese alto, la imagen se amplía hasta
      ~2280 px de ancho y solo se ve una franja central estirada. De
      ahí las manchas de arriba y abajo.

      Se sustituye por un degradado con los colores reales de esa
      imagen (muestreados de ella: morado oscuro arriba, azul marino
      abajo). Se ve como el diseño, no se deforma en ningún tamaño y
      no hay que descargar nada.

   Los selectores repiten exactamente los de las reglas que compiten,
   porque ya llevan !important: al tener la misma especificidad y estar
   escritos después, estos se imponen. Todo va dentro del media query,
   así que el escritorio queda igual.
   ================================================================== */

@media only screen and (max-width: 970px) {

    body.home .fusion-title-9 h2 {
        font-size: clamp(26px, 8vw, 46px) !important;
        line-height: 1.18 !important;
    }

    body.home .fusion-builder-row-4.fusion-fullwidth {
        background-image: linear-gradient(
            180deg,
            rgb(20, 3, 42) 0%,
            rgb(16, 9, 53) 45%,
            rgb(9, 23, 68) 100%
        ) !important;
        background-size: auto !important;
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
    }

    /* 3. SEPARADOR DE ONDAS.
       El separador decorativo se ancla con un desplazamiento calculado
       para el ancho del escritorio (left: 190px). En un móvil eso lo
       empuja 221 px fuera de la pantalla, y del dibujo solo asomaba un
       trozo en la esquina superior izquierda: la mancha clara que se
       veía sobre el fondo.

       Se reancla al ancho real de la pantalla y se le da una altura
       proporcional, en vez de los 255 px fijos. */
    body.home .fusion-builder-row-4 .fusion-section-separator {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    html body.home .fusion-builder-row-4 .fusion-section-separator-svg,
    html body.home .fusion-builder-row-4 svg.fusion-hills-opacity-candy {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 90px !important;
        /* El dibujo arrastra además un translateX(-190px), pensado para
           el ancho del escritorio; sin anularlo seguiría saliéndose. */
        transform: none !important;
    }
}

/* ==================================================================
   CENTRADO GENERAL EN MÓVIL
   ==================================================================
   El contenido aparecía desplazado a la izquierda, con una franja
   vacía a la derecha. Se notaba sobre todo en el formulario de
   contacto, pero afectaba a todas las secciones.

   Causa: el <body> tiene `overflow-x: hidden`. Eso lo convierte en un
   contenedor de desplazamiento propio y le hace reservar ~16 px para
   una barra vertical que nunca se ve. Medido en el sitio:

       body.offsetWidth = 397 px   (lo que ocupa)
       body.clientWidth = 381 px   (lo que deja a sus hijos)

   Esos 16 px se restaban de #boxed-wrapper y bajaban en cascada hasta
   el último elemento, descuadrando el centrado de todo.

   `overflow-x: clip` recorta igual lo que sobresalga, pero sin crear
   contenedor de desplazamiento ni reservar sitio para la barra. Es la
   forma recomendada hoy para este caso.
   ================================================================== */

@media only screen and (max-width: 970px) {

    html,
    body {
        overflow-x: clip !important;
    }

    /* Las secciones a ancho completo compensan el relleno lateral de
       #main con márgenes negativos, pero conservaban el ancho del
       contenedor y se quedaban cortas por la derecha. Con `auto` el
       ancho se recalcula contando esos márgenes. */
    body.home #main .fusion-fullwidth {
        width: auto !important;
        max-width: none !important;
    }
}