/*
Theme Name: UNIPAC 2026
Theme URI: https://unipac.edu.mx
Description: Tema a medida para UNIPAC, basado en Hello Elementor
Author: VisorLab en unión con Claude
Version: 1.1.0
Template: hello-elementor
Text Domain: unipac-2026
*/

/* ==========================================================================
   UNIPAC 2026 — Hoja de estilos del tema hijo
   ==========================================================================

   CONVENCIONES
   ------------
   · Nomenclatura: `unipac_*` para bloques de sección, `UNIPAC_*` para
     componentes reutilizables. Se respeta lo existente en Elementor; no
     renombrar clases sin actualizar los widgets que las usan.
   · Rutas de medios: siempre relativas a la raíz (`/wp-content/uploads/...`).
     Nunca con dominio absoluto: rompe al pasar a staging y a producción.
   · Colores y tipografías: usar los tokens de §1. Los valores literales solo
     se admiten dentro de los `@keyframes`, donde las variables no interpolan.
   · Media queries: conviven con su componente, no agrupadas al final. Para
     localizar todo lo responsive de un bloque, basta leer su sección.

   PUNTOS DE CORTE (coinciden con los de Elementor)
   ------------------------------------------------
   Móvil     ≤  767px
   Tablet    768px – 1024px
   Laptop    1025px – 1440px
   Escritorio ≥ 1441px

   ÍNDICE
   ------
   1.  Tokens: color, tipografía y medios
   2.  Utilidades y correcciones globales
   3.  Encabezado y navegación
   4.  Botones
   5.  Héroe e imagen destacada
   6.  Sección Introducción
   7.  Sección Programas
   8.  Licenciaturas y posgrados
   9.  Preguntas frecuentes
   10. Newsletter (WPForms #4174)
   11. Pie de página
   12. Terceros
   13. Arte animado
   14. Accesibilidad: movimiento reducido

   ========================================================================== */


/* ==========================================================================
   1. TOKENS: COLOR, TIPOGRAFÍA Y MEDIOS
   --------------------------------------------------------------------------
   Punto único de cambio para la identidad visual. Si una marca cambia de
   color, se edita aquí y se propaga a todo el tema.

   PENDIENTE: trasladar estos valores a Elementor › Ajustes del sitio ›
   Colores globales y Fuentes globales, y sustituir aquí por
   `var(--e-global-color-*)`. Mientras tanto los colores globales del sitio
   siguen siendo los de fábrica de Elementor.
   ========================================================================== */

:root {
    /* Paleta institucional */
    --unipac-morado: #7E4292;
    --unipac-magenta: #E140AC;
    --unipac-naranja: #EE7326;
    --unipac-verde: #198043;
    --unipac-lima: #D3DC4B;
    --unipac-gris: #DDE0D1;
    --unipac-gris-2: #D6D9CA;
    --unipac-azul: #678AB4;
    --unipac-cian: #43CFE1;

    /* Texto */
    --unipac-texto: #656565;
    --unipac-texto-invertido: #FFFFFF;
    --unipac-error: #FFE3E3;

    /* Tipografía */
    --unipac-fuente-titulos: "Montserrat", sans-serif;
    --unipac-fuente-texto: "Roboto", sans-serif;
    --unipac-fuente-destaque: "Libre Baskerville", serif;

    /* Medios: divisores y adornos.
     Centralizados para poder migrarlos de carpeta sin buscar por el archivo. */
    --unipac-img-divisor-licenciaturas: url("/wp-content/uploads/2026/09/unipac_divisor_licenciaturas.svg");
    --unipac-img-divisor-bachillerato: url("/wp-content/uploads/2026/10/unipac_divisor_bachillerato.svg");
    --unipac-img-divisor-licenciaturas-h: url("/wp-content/uploads/2026/09/unipac_divisor_licenciaturas_horizontal.svg");
    --unipac-img-divisor-postgrado: url("/wp-content/uploads/2026/09/unipac_divisor_postgrado.svg");
    --unipac-img-divisor-postgrado-h: url("/wp-content/uploads/2026/09/unipac_divisor_postgrado_horizontal.svg");
    --unipac-img-icono-abrir: url("/wp-content/uploads/2026/09/unipac_icono_abrir.svg");
    --unipac-img-volver-arriba: url("/wp-content/uploads/2026/09/unipac_regresar_arriba.svg");
    --unipac-img-divisor-diplomados: url("/wp-content/uploads/2026/10/unipac-img-divisor-diplomados.svg");
    --unipac-img-divisor-diplomados-h: url("/wp-content/uploads/2026/10/unipac-img-divisor-diplomados-h.svg");
    --unipac-img-divisor-becas: url("/wp-content/uploads/2026/10/unipac_divisor_rosa.svg");

    /* Divisor punteado de la sección Introducción: va en línea (data URI)
     porque es un trazo de 2×37px y evitarse una petición compensa. */
    --unipac-img-divisor-punteado: url("data:image/svg+xml,%3Csvg width='2' height='37' viewBox='0 0 2 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 36L1 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-dasharray='2 5'/%3E%3C/svg%3E");

    /* Animación */
    --unipac-transicion: .3s ease;
}


/* ==========================================================================
   2. UTILIDADES Y CORRECCIONES GLOBALES
   ========================================================================== */

/* Elementor envuelve el contenido de los widgets de texto en <p> con margen
   propio. Estas clases lo anulan donde el espaciado lo controla el contenedor. */
.parrafo_margen p,
.UNIPAC_texto--pie-de-pagina p {
    margin: 0;
}

.unipac_copyright p {
    margin: 0 !important;
}

.unipac_programa_letra * {
    margin: 0;
    padding: 0;
}

/* Fondo partido en dos tonos: vertical en escritorio, horizontal en móvil. */
.unipac_fondo_gradiente {
    background: var(--unipac-gris-2);
    background: linear-gradient(90deg, #D6D9CA 50%, #DDE0D1 50%);
}

@media (max-width: 767px) {
    .unipac_fondo_gradiente {
        background: linear-gradient(180deg, #DDE0D1 50%, #D6D9CA 50%);
    }
}

/* Oculta los controles nativos del carrusel horizontal: la navegación se
   resuelve con el gesto de arrastre y las flechas propias del diseño. */
.unipac-hscroll-ui {
    display: none !important;
}


/* ==========================================================================
   3. ENCABEZADO Y NAVEGACIÓN
   ========================================================================== */

/* Botón hamburguesa */
.UNIPAC_menu_trigger .elementor-icon-wrapper {
    width: 32px;
    height: 32px;
}

/* Encabezado fijo al hacer scroll: fondo blanco casi opaco para que el
   contenido que pasa por debajo no reste legibilidad al menú. */
.elementor-sticky--active {
    background: #FFFFFFED;
}

/* Panel lateral (off-canvas) */
.e-off-canvas__content {
    padding-left: 60px;
}

/* --------------------------------------------------------------------------
   3.1 Indicador de submenú
   Sustituye el chevron de Font Awesome por el icono de UNIPAC, aplicado como
   máscara para poder colorearlo con `background-color`. Se coloca centrado
   bajo el texto del ítem, no a su derecha.
   -------------------------------------------------------------------------- */

.elementor-nav-menu--main .elementor-item.has-submenu {
    position: relative;
}

.elementor-nav-menu--main .elementor-item.has-submenu .sub-arrow {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    line-height: 0;
    pointer-events: none;
    opacity: 1 !important;
    background-color: var(--unipac-magenta);
    -webkit-mask: var(--unipac-img-icono-abrir) center / 24px 24px no-repeat;
    mask: var(--unipac-img-icono-abrir) center / 24px 24px no-repeat;
}

/* Oculta el chevron original de Font Awesome que Elementor inyecta dentro
   del contenedor enmascarado. */
.elementor-nav-menu--main .elementor-item.has-submenu .sub-arrow svg {
    display: none;
}

.menu-item-has-children .elementor-nav-menu--dropdown .current_page_item .elementor-sub-item.elementor-item-active{
  color:#E140AC !important;
}


/* ==========================================================================
   4. BOTONES
   ========================================================================== */

/* En móvil los botones de contacto pasan a un ancho fijo legible; dentro del
   héroe ocupan el 100% de la columna. */
@media (max-width: 767px) {
    .UNIPAC_boton_contacto a {
        width: 230px;
    }

    .unipac_botones_heroe .UNIPAC_boton_contacto a {
        width: 100%;
    }

    .UNIPAC_boton_contacto.UNIPAC_boton_programas a {
        width: 282px;
    }
}


/* ==========================================================================
   5. HÉROE E IMAGEN DESTACADA
   ========================================================================== */

.hero_tagline {
    font-family: var(--unipac-fuente-destaque);
}

@media (min-width: 768px) and (max-width: 1024px) {
    .unipac_hero .unipac_arte_imagen_destacada svg{
        width: 225px;
        height: 225px;
    }
}
@media (max-width: 1440px) {
  .unipac_formulario_arte,
  .unipac_equivalencias_arte {
    width: 100%;
    max-width: 100%;
  }

  .unipac_formulario_arte svg,
  .unipac_equivalencias_arte svg {
    display: block;
    width: 100%;
    height: auto; /* mantiene la proporción del viewBox */
  }
}

@media (max-width: 767px){

  /* Paddings fluidos */
  .unipac_hero > .e-con-inner{
    
  }
  .unipac_hero > .e-con-inner > .e-con{
    padding-inline: clamp(16px, 5.5vw, 28px);
  }

  /* Los widgets miden su propio ancho */
  .unipac_hero .hero_titulo{
    container-type: inline-size;
    min-height: 175px;
  }

  /* OFERTA EDUCATIVA en una sola línea */
  .unipac_hero .hero_kicker .elementor-heading-title{
    font-size: 8cqi !important;
    line-height: 1.1 !important;
  }

  /* Título: la palabra más larga llena el ancho */
  .unipac_hero .hero_titulo .elementor-heading-title{
    font-size: var(--fit, 15.5cqi) !important;
    line-height: 1.02 !important;
    letter-spacing: -.01em !important;
  }

  /* Párrafo: escala con el ancho, con límites de lectura */
  
}


@media (max-width: 767px){

  /* Paddings fluidos */
  .unipac_hero > .e-con-inner{
    padding-top: clamp(40px, 13.5vw, 64px);
  }
  .unipac_hero > .e-con-inner > .e-con{
    padding-inline: clamp(16px, 5.5vw, 28px);
    container-type: inline-size;   /* la columna es la referencia */
  }

  .unipac_hero .hero_kicker .elementor-heading-title{
    font-size: 8cqi;
    line-height: 1.1;
  }
  .unipac_hero .hero_titulo .elementor-heading-title{
    font-size: var(--fit, 15.5cqi);
    line-height: 1.02;
    letter-spacing: -.01em;
  }
  .unipac_hero .hero_texto .elementor-heading-title{
    font-size: clamp(1.25rem, 6.2cqi, 1.75rem);
    line-height: 1.35;
  }
}

/* --------------------------------------------------------------------------
   5.1 Indicador de "desplázate hacia abajo"
   Anima únicamente el <path> de la flecha: el <svg> y su contenedor quedan
   quietos. Requiere que el SVG esté en línea en la página (widget HTML).
   `transform-box: view-box` hace que los px sean unidades del viewBox, de
   modo que el recorrido escala junto con el SVG.
   -------------------------------------------------------------------------- */

.unipac_arte_imagen_destacada svg path {
    --u-scroll-dur: 1.8s;
    --u-scroll-ease: cubic-bezier(.45, 0, .25, 1);

    transform-box: view-box;
    animation: u-scroll-down var(--u-scroll-dur) var(--u-scroll-ease) infinite;
}

/* La flecha ocupa de y≈33 a y≈138 dentro del viewBox de 172: el recorrido
   (-20 a +24 unidades) la mantiene siempre dentro del cuadro. */
@keyframes u-scroll-down {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    70% {
        transform: translateY(17px);
        opacity: 1;
    }

    90% {
        transform: translateY(24px);
        opacity: 0;
    }

    100% {
        transform: translateY(24px);
        opacity: 0;
    }

    /* pausa antes de repetir */
}

/* --------------------------------------------------------------------------
   5.2 Tamaño y anclaje del arte decorativo por punto de corte
   El adorno sobresale del contenedor con `bottom` negativo; cada sección
   necesita su propio desplazamiento porque la altura del bloque varía.
   -------------------------------------------------------------------------- */

/* Escritorio ≥1441px */
@media (min-width: 1441px) {

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_testimoniales,
    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_testimoniales svg,
    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_licenciaturas,
    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_licenciaturas svg,
    .unipac_preguntas .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_licenciaturas {
        width: 225px;
        height: 225px;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_testimoniales {
        bottom: -155px !important;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_licenciaturas,
    .unipac_preguntas .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_licenciaturas {
        bottom: -75px !important;
    }
}

/* Laptop 1025–1440px */
@media (min-width: 1025px) and (max-width: 1440px) {

    .unipac_arte_imagen_destacada,
    .unipac_arte_imagen_destacada svg,
    .unipac_art_elecciones,
    .unipac_art_elecciones svg,
    .unipac_arte_imagen_destacada_programas,
    .unipac_arte_imagen_destacada_programas svg,
    .unipac_arte_imagen_destacada_licenciaturas,
    .unipac_arte_imagen_destacada_licenciaturas svg {
        width: 225px;
        height: 225px;
    }

    .unipac_arte_imagen_destacada_programas,
    .unipac_arte_imagen_destacada_licenciaturas {
        bottom: -56px !important;
    }

    .unipac_arte_imagen_destacada_testimoniales,
    .unipac_arte_imagen_destacada_testimoniales svg {
        width: 225px;
        height: 225px;
    }

    .unipac_arte_imagen_destacada_testimoniales {
        bottom: -112px !important;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_introduccion {
        bottom: -150px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .unipac_seccion_heroe .unipac_arte_imagen_destacada svg {
        display: block;
        width: 225px;
        height: 225px;
        margin-inline: auto 0;
    }
    /* Arte de "Elecciones": anclado abajo a la derecha, a media columna. */
    .unipac_art_elecciones {
        position: absolute !important;
        inset: auto 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    .unipac_art_elecciones svg {
        display: block;
        width: 100% !important;
        height: auto !important;
        /* proporción por el viewBox 426×426 */
    }
}

@media (max-width: 1440px) {
    .unipac_seccion_heroe .unipac_siglas svg {
        display: block;
        width: 50%;
        height: auto;
        margin: 0;
    }

    .unipac_hero .unipac_siglas svg {
        display: block;
        width: 75%;
        height: auto;
        margin: 0;
    }
}

/* Móvil ≤767px */
@media (max-width: 767px) {

    /* Por defecto el arte se reduce y se alinea a la derecha. */
    .unipac_arte_imagen_destacada svg {
        display: block;
        width: 225px;
        height: 225px;
        margin-inline: auto 0;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_colegiaturas svg {
        width: 100%;
        margin: 0;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_introduccion {
        width: auto;
        bottom: -150px !important;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_introduccion svg {
        width: 100%;
    }

    /* Testimoniales: alineado a la izquierda y desbordando hacia abajo. */
    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_testimoniales {
        position: absolute;
        inset: auto auto 0 0;
        margin-bottom: -123px !important;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_testimoniales svg {
        width: 50%;
        margin-inline: 0 auto;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_programas,
    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_licenciaturas {
        bottom: -75px !important;
    }

    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_programas svg,
    .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_licenciaturas svg {
        width: 100%;
    }

    /* En Preguntas frecuentes el mismo arte va más pequeño. */
    .unipac_preguntas .unipac_arte_imagen_destacada.unipac_arte_imagen_destacada_licenciaturas svg {
        width: 60%;
    }

    /* Arte de "Elecciones": anclado abajo a la derecha, a media columna. */
    .unipac_art_elecciones {
        position: absolute !important;
        inset: auto 0 0 auto !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    .unipac_art_elecciones svg {
        display: block;
        width: 100% !important;
        height: auto !important;
        /* proporción por el viewBox 426×426 */
    }
}

/* --------------------------------------------------------------------------
   5.3 Flechas de llamada a la acción
   Dos variantes del mismo rebote: vertical y horizontal. El viewBox de ambos
   SVG es de 96 unidades y la flecha ocupa de 12 a 84, por eso el recorrido
   (-10 a +11) nunca la saca del cuadro.
   -------------------------------------------------------------------------- */

.unipac_arrow_down svg,
.unipac_arrow_right svg {
    overflow: visible;
}

.unipac_arrow_down svg path,
.unipac_arrow_right svg path {
    --u-scroll-dur: 1.8s;
    --u-scroll-ease: cubic-bezier(.45, 0, .25, 1);

    transform-box: view-box;
    will-change: transform, opacity;
}

.unipac_arrow_down svg path {
    animation: u-arrow-down var(--u-scroll-dur) var(--u-scroll-ease) infinite;
}

.unipac_arrow_right svg path {
    animation: u-arrow-right var(--u-scroll-dur) var(--u-scroll-ease) infinite;
}

@keyframes u-arrow-down {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    70% {
        transform: translateY(8px);
        opacity: 1;
    }

    90% {
        transform: translateY(11px);
        opacity: 0;
    }

    100% {
        transform: translateY(11px);
        opacity: 0;
    }
}

@keyframes u-arrow-right {
    0% {
        transform: translateX(-10px);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    70% {
        transform: translateX(8px);
        opacity: 1;
    }

    90% {
        transform: translateX(11px);
        opacity: 0;
    }

    100% {
        transform: translateX(11px);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   5.4 Sistema fluido del héroe
   Sustituye los tamaños fijos por escalas continuas con `clamp()`: el texto y
   el mosaico interpolan entre el mínimo (móvil) y el máximo (escritorio) sin
   saltos en los puntos de corte.

   El módulo `--unipac-hero-modulo` es la unidad del mosaico decorativo
   (88px → 172px). El arte mide tres módulos de ancho.

   Este bloque gobierna el héroe por encima de los ajustes genéricos de §5.2:
   va al final de la sección a propósito.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Botones apilados y alineados a la izquierda, sin ocupar todo el ancho. */
    .unipac_hero .unipac_botones_heroe {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .unipac_hero .unipac_botones_heroe .UNIPAC_boton_contacto {
        width: auto;
        max-width: 100%;
    }

    .unipac_hero .unipac_botones_heroe .elementor-button {
        width: auto;
        min-width: 240px;  /* iguala el ancho de ambos botones */
        justify-content: center;
    }

    /* El divisor entre botones se reduce a un trazo de 35px. */
    .unipac_hero .unipac_botones_heroe .elementor-widget-divider {
        width: 35px;
        max-width: 35px;
        flex: 0 0 35px;
    }

    .unipac_hero .unipac_botones_heroe .elementor-divider {
        padding-block: 0;
    }

}

/* ==========================================================================
   6. SECCIÓN INTRODUCCIÓN
   ========================================================================== */

/* Cada ítem son dos <span>: etiqueta atenuada y valor. */
.unipac_introduccion_item>span:first-child,
.unipac_introduccion_item>span:last-child {
    font-family: var(--unipac-fuente-texto);
    font-style: normal;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: var(--unipac-texto-invertido);
}

.unipac_introduccion_item>span:first-child {
    font-weight: 700;
    opacity: 0.5;
}

.unipac_introduccion_item>span:last-child {
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   6.1 Divisor punteado entre características

   Comportamiento por punto de corte:
   ≥1441px  4 columnas · divisor vertical entre todas
   769–1440 3 columnas · se oculta en el 4.º (abre segunda fila)
   ≤767px   1 columna  · divisor horizontal sobre cada ítem
   -------------------------------------------------------------------------- */

.unipac_introduccion_caracteristicas>.e-con+.e-con {
    position: relative;
}

.unipac_introduccion_caracteristicas>.e-con+.e-con::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: 37px;
    background: var(--unipac-img-divisor-punteado) no-repeat center / contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

@media (min-width: 769px) and (max-width: 1440px) {
    .unipac_introduccion_caracteristicas>.e-con:nth-child(4 of .e-con)::before {
        display: none;
    }
}

@media (max-width: 767px) {

    /* Se reutiliza el mismo trazo girado 90°, encima del ítem. */
    .unipac_introduccion_caracteristicas>.e-con+.e-con::before {
        top: -15px;
        left: 20px;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    /* Rejilla de una columna con filas de igual altura. */
    .unipac_introduccion_container>.e-con-inner,
    .unipac_introduccion_container.e-con-full {
        display: grid;
        grid-template-columns: 100%;
        grid-auto-rows: 1fr;
    }
}


/* ==========================================================================
   7. SECCIÓN PROGRAMAS
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 Divisor entre competencias

   ≥1025px  divisor vertical entre todas las columnas
   768–1024 2 columnas · se oculta en el 3.º (abre segunda fila)
   ≤767px   1 columna  · divisor horizontal sobre cada ítem
   -------------------------------------------------------------------------- */

.unipac_programa_competencias>.e-con+.e-con {
    position: relative;
}

.unipac_programa_competencias>.e-con+.e-con::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    /* mitad del gap de 30px */
    width: 2px;
    height: 37px;
    background: var(--unipac-img-divisor-licenciaturas) no-repeat center / contain;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.unipac_programa_competencias.unipac_programa_competencias_bachillerato>.e-con+.e-con::before {
    background: var(--unipac-img-divisor-bachillerato) no-repeat center / contain;
}

.unipac_programa_competencias.unipac_programa_competencias_becas>.e-con+.e-con::before {
    background: var(--unipac-img-divisor-becas) no-repeat center / contain;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .unipac_programa_competencias>.e-con:nth-child(3 of .e-con)::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .unipac_programa_competencias>.e-con+.e-con::before {
        top: -15px;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .unipac_programa_competencias.unipac_programa_competencias_comunidad>.e-con+.e-con::before {
        top: -30px;
        left: 20px;
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

/* --------------------------------------------------------------------------
   7.2 Tarjeta "Elige tu programa"
   Al pasar el cursor sobre la sección, todo el texto y los SVG pasan a blanco.
   El botón se excluye porque conserva su propio color de marca.
   -------------------------------------------------------------------------- */

.unipac_elegir_programa :is(h1, h2, h3, h4, h5, h6, p, span, a, li, strong, em, div):not(.elementor-widget-button, .elementor-widget-button *),
.unipac_elegir_programa svg path {
    transition: color var(--unipac-transicion),
        fill var(--unipac-transicion),
        stroke var(--unipac-transicion);
}

.unipac_elegir_programa:hover :is(h1, h2, h3, h4, h5, h6, p, span, a, li, strong, em, .elementor-heading-title, .elementor-widget-text-editor):not(.elementor-widget-button, .elementor-widget-button *) {
    color: var(--unipac-texto-invertido) !important;
}

.unipac_elegir_programa:hover svg path:not(.elementor-widget-button *) {
    fill: var(--unipac-texto-invertido) !important;
}

/* El widget HTML que contiene el SVG ocupa todo el ancho del contenedor. */
.unipac_elegir_programa .elementor-widget-html {
    width: 100%;
    align-self: stretch;
}

.unipac_elegir_programa .elementor-widget-html svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   7.2.1 Tarjeta "Colegiaturas"
   Al pasar el cursor sobre la sección, todo el texto y los SVG pasan a blanco.
   El botón se excluye porque conserva su propio color de marca.
   -------------------------------------------------------------------------- */

.unipac_colegiaturas :is(h1, h2, h3, h4, h5, h6, p, span, a, li, strong, em, div):not(.elementor-widget-button, .elementor-widget-button *),
.unipac_colegiaturas svg path {
    transition: color var(--unipac-transicion),
        fill var(--unipac-transicion),
        stroke var(--unipac-transicion);
}

.unipac_colegiaturas:hover :is(h1, h2, h3, h4, h5, h6, p, span, a, li, strong, em, .elementor-heading-title, .elementor-widget-text-editor):not(.elementor-widget-button, .elementor-widget-button *) {
    color: var(--unipac-texto-invertido) !important;
}

.unipac_colegiaturas:hover svg path:not(.elementor-widget-button *) {
    fill: var(--unipac-texto-invertido) !important;
}

/* El widget HTML que contiene el SVG ocupa todo el ancho del contenedor. */
.unipac_colegiaturas .elementor-widget-html {
    width: 100%;
    align-self: stretch;
}

/* --------------------------------------------------------------------------
   7.3 Tarjeta destacada
   Invierte el esquema al pasar el cursor: fondo blanco y contenido en morado.
   El separador interno está dibujado con `stroke`, no con `fill`, de ahí la
   regla aparte.
   -------------------------------------------------------------------------- */

.unipac_destacado svg,
.unipac_destacado svg path,
.unipac_destacado .unipac_caracteristicas_descripcion p,
.unipac_destacado .elementor-button,
.unipac_destacado .elementor-button-text {
    transition: fill var(--unipac-transicion),
        stroke var(--unipac-transicion),
        color var(--unipac-transicion);
}

.unipac_destacado:hover {
    background-color: var(--unipac-texto-invertido) !important;
}

.unipac_destacado:hover svg,
.unipac_destacado:hover svg path {
    fill: var(--unipac-morado) !important;
}

.unipac_destacado:hover .unipac_caracteristicas_separador svg path {
    stroke: var(--unipac-morado) !important;
}

.unipac_destacado:hover .unipac_caracteristicas_titulo,
.unipac_destacado:hover .unipac_caracteristicas_titulo h2 {
    color: var(--unipac-morado) !important;
}

.unipac_destacado:hover .unipac_caracteristicas_descripcion,
.unipac_destacado:hover .unipac_caracteristicas_descripcion p {
    color: var(--unipac-texto) !important;
}

.unipac_destacado:hover .elementor-button,
.unipac_destacado:hover .elementor-button .elementor-button-text {
    color: var(--unipac-naranja) !important;
}

.unipac_destacado:hover .elementor-button .elementor-button-icon svg,
.unipac_destacado:hover .elementor-button .elementor-button-icon svg path {
    fill: var(--unipac-naranja) !important;
}

/* Al pasar el cursor, la inicial del programa se desplaza hacia arriba. */
.unipac_programas .unipac_programa_letra {
    transition: transform var(--unipac-transicion);
}

.unipac_programas:hover .unipac_programa_letra {
    transform: translateY(-20px);
}


/* ==========================================================================
   8. LICENCIATURAS Y POSGRADOS
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 Tarjetas
   La clase `is-hover` la aplica JS para propagar el estado desde la tarjeta
   completa al enlace; `:hover` cubre el caso del puntero directo.
   -------------------------------------------------------------------------- */

.unipac_licenciaturas,
.unipac_postgrado {
    width: 220px;
    height: 220px;
}

.unipac_licenciaturas:hover,
.unipac_licenciaturas.is-hover,
.unipac_postgrado:hover,
.unipac_postgrado.is-hover {
    background: var(--unipac-naranja) !important;
    border-bottom-left-radius: 0%;
}

.link_licenciatura:hover,
.link_licenciatura.is-hover a,
.link_postgrado:hover,
.link_postgrado.is-hover a {
    color: var(--unipac-naranja) !important;
}

/* La flecha solo aparece con el cursor encima. */
.unipac_flecha_licenciaturas {
    display: none;
}

.unipac_licenciaturas:hover .unipac_flecha_licenciaturas,
.unipac_licenciaturas.is-hover .unipac_flecha_licenciaturas,
.unipac_postgrado:hover .unipac_flecha_licenciaturas,
.unipac_postgrado.is-hover .unipac_flecha_licenciaturas {
    display: block;
}

.unipac_arte_becas {
    margin-right: -2px !important;
}

/* --------------------------------------------------------------------------
   8.2 Divisores entre tarjetas de licenciaturas
   El trazo se dibuja como `::after` del ítem, desplazado media columna de gap
   hacia su izquierda.

   ≥1441px  5 columnas · divisor vertical salvo en el primero
   1025–1440 3 columnas · además se oculta en cada 3n+1 (abre fila)
   ≤1024px  2 columnas · divisor horizontal sobre la segunda fila
   ≤767px   1 columna  · divisor horizontal sobre el segundo ítem
   -------------------------------------------------------------------------- */

.unipac_contenedor_licenciaturas {
    --sep-col-gap: var(--column-gap, 30px);
    --sep-row-gap: var(--row-gap, 30px);
}

.unipac_contenedor_licenciaturas>.e-con-inner>.e-con:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--sep-col-gap) / -2);
    width: 2px;
    background: var(--unipac-img-divisor-licenciaturas) no-repeat center;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

/* Laptop: el primer ítem de cada fila no lleva divisor a su izquierda.
   Se usa 3n+1 en vez de :nth-child(4) para que siga funcionando si se
   agregan programas. */
@media (min-width: 1025px) and (max-width: 1440px) {
    .unipac_contenedor_licenciaturas>.e-con-inner>.e-con:nth-child(3n + 1)::after {
        display: none;
    }
}

@media (max-width: 1024px) {
    .unipac_contenedor_licenciaturas>.e-con-inner>.e-con:not(:first-child)::after {
        display: none;
    }

    .unipac_contenedor_licenciaturas>.e-con-inner>.e-con:nth-child(n + 3)::after {
        display: block;
        top: calc(var(--sep-row-gap) / -2);
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 20px;
        background-image: var(--unipac-img-divisor-licenciaturas-h);
        transform: translateY(-50%);
    }
}

@media (max-width: 767px) {
    .unipac_contenedor_licenciaturas>.e-con-inner>.e-con:nth-child(2)::after {
        display: block;
        top: calc(var(--sep-row-gap) / -2);
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 20px;
        background-image: var(--unipac-img-divisor-licenciaturas-h);
        transform: translateY(-50%);
    }
}

/* --------------------------------------------------------------------------
   8.3 Divisores entre tarjetas de posgrados
   Enfoque distinto al de licenciaturas: en vez de un trazo desplazado, el
   `::after` ocupa toda la banda del gap (`left: 100%`, ancho = gap) y el SVG
   se centra dentro. Se mantiene así porque el divisor de posgrados tiene
   ancho propio.

   ≥1441px  divisor vertical salvo tras el último
   1025–1440 3 columnas · sin divisor en cada 3n (cierra fila)
   768–1024 2 columnas · sin divisor en cada 2n
   ≤767px   1 columna  · divisor horizontal bajo cada tarjeta
   -------------------------------------------------------------------------- */

.unipac_contenedor_postgrados {
    --divisor-col-gap: var(--column-gap, 30px);
    --divisor-row-gap: var(--row-gap, 30px);
}

.unipac_contenedor_postgrados>.e-con-inner>.e-con:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: var(--divisor-col-gap);
    background: var(--unipac-img-divisor-postgrado) no-repeat center / auto;
    pointer-events: none;
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .unipac_contenedor_postgrados>.e-con-inner>.e-con:nth-child(3n)::after {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .unipac_contenedor_postgrados>.e-con-inner>.e-con:nth-child(2n)::after {
        display: none;
    }
}

@media (max-width: 767px) {
    .unipac_contenedor_postgrados>.e-con-inner>.e-con:not(:last-child)::after {
        inset: 100% 0 auto;
        width: auto;
        height: var(--divisor-row-gap);
        background-image: var(--unipac-img-divisor-postgrado-h);
    }
}

/* El widget HTML de cada campus necesita altura automática en tablet y móvil
   para que la tarjeta no quede recortada. */
@media (max-width: 1023px) {
    .unipac_campus_individual {
        height: auto !important;
    }

    .unipac_campus_individual>.elementor-widget-html {
        flex: 0 0 auto !important;
    }
}


/* --------------------------------------------------------------------------
   8.5 Divisores entre tarjetas de diplomados
   Enfoque distinto al de licenciaturas: en vez de un trazo desplazado, el
   `::after` ocupa toda la banda del gap (`left: 100%`, ancho = gap) y el SVG
   se centra dentro. Se mantiene así porque el divisor de posgrados tiene
   ancho propio.

   ≥1441px  divisor vertical salvo tras el último
   1025–1440 3 columnas · sin divisor en cada 3n (cierra fila)
   768–1024 2 columnas · sin divisor en cada 2n
   ≤767px   1 columna  · divisor horizontal bajo cada tarjeta
   -------------------------------------------------------------------------- */

.unipac_contenedor_postgrados.unipac_contenedor_diplomados>.e-con-inner>.e-con:not(:last-child)::after {
    background: var(--unipac-img-divisor-diplomados) no-repeat center / auto;
}

@media (max-width: 767px) {
    .unipac_contenedor_postgrados.unipac_contenedor_diplomados>.e-con-inner>.e-con:not(:last-child)::after {
        background-image: var(--unipac-img-divisor-diplomados-h);
    }
}

/* ==========================================================================
   9. PREGUNTAS FRECUENTES
   ========================================================================== */

/* Acordeón sin bordes salvo la línea inferior de cada ítem. */
.unipac_faq .e-n-accordion .e-n-accordion-item-title,
.unipac_faq .e-n-accordion .e-n-accordion-item>.e-con {
    border: 0;
}

.unipac_faq .e-n-accordion .e-n-accordion-item {
    border-bottom: 1px solid rgba(126, 66, 146, 0.2);
    /* --unipac-morado al 20% */
}


/* ==========================================================================
   10. NEWSLETTER (WPForms #4174)
   --------------------------------------------------------------------------
   WPForms inyecta su propia hoja de estilos con selectores muy específicos.
   De ahí el prefijo `div.wpforms-container-full .wpforms-form` en cada regla:
   es el mínimo necesario para ganarle sin recurrir a `!important`.
   El formulario va sobre fondo azul, por eso el texto es blanco.
   ========================================================================== */

/* Reset de contenedores */
.UNIPAC--newsletter div.wpforms-container-full,
.UNIPAC--newsletter div.wpforms-container-full .wpforms-form,
.UNIPAC--newsletter div.wpforms-container-full .wpforms-form .wpforms-field {
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   10.1 Campo de correo
   El selector incluye `:focus:invalid` porque WPForms repinta el campo cuando
   la validación falla y revertiría el diseño.
   -------------------------------------------------------------------------- */

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form input[type="email"],
.UNIPAC--newsletter div.wpforms-container-full .wpforms-form input[type="email"]:focus:invalid {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: unset;
    padding: 20px 30px;
    background: var(--unipac-texto-invertido);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--unipac-fuente-texto);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: var(--unipac-texto);
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form input[type="email"]::placeholder {
    color: var(--unipac-texto);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   10.2 Casilla de términos
   Checkbox personalizado: se anula la apariencia nativa y la palomita se
   dibuja con un `::before` rotado.
   -------------------------------------------------------------------------- */

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form .wpforms-field-checkbox {
    margin-top: 26.5px;
    /* 31px hasta el borde del checkbox */
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 19px;
    box-sizing: border-box;
    width: 19px;
    height: 19px;
    margin: 0 12.5px 0 0;
    background: var(--unipac-texto-invertido);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form input[type="checkbox"]::before {
    content: none;
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form input[type="checkbox"]:checked::before {
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    margin: 2px auto 0;
    border: solid var(--unipac-azul);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form .wpforms-field-checkbox label {
    margin: 0;
    padding: 1px 0 0;
    font-family: var(--unipac-fuente-texto);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--unipac-texto-invertido);
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form .wpforms-field-checkbox label a {
    font-weight: 700;
    color: var(--unipac-texto-invertido);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   10.3 Botón de envío
   -------------------------------------------------------------------------- */

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form .wpforms-submit-container {
    margin-top: 27.5px;
    /* 31.5px desde el checkbox */
    padding: 0;
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form button.wpforms-submit {
    box-sizing: border-box;
    min-width: 0;
    height: unset;
    padding: 25px 30px;
    background: var(--unipac-naranja);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--unipac-fuente-titulos);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.9px;
    color: var(--unipac-texto-invertido);
    cursor: pointer;
    transition: background var(--unipac-transicion);
}

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form button.wpforms-submit:hover,
.UNIPAC--newsletter div.wpforms-container-full .wpforms-form button.wpforms-submit:focus {
    background: var(--unipac-verde);
}

/* --------------------------------------------------------------------------
   10.4 Accesibilidad y validación
   -------------------------------------------------------------------------- */

.UNIPAC--newsletter div.wpforms-container-full .wpforms-form input:focus-visible,
.UNIPAC--newsletter div.wpforms-container-full .wpforms-form button:focus-visible {
    outline: 2px solid var(--unipac-cian);
    outline-offset: 2px;
}

/* Mensajes de error legibles sobre el fondo azul. */
.UNIPAC--newsletter div.wpforms-container-full .wpforms-form label.wpforms-error,
.UNIPAC--newsletter div.wpforms-container-full .wpforms-form em.wpforms-error {
    margin-top: 6px;
    font-size: 14px;
    color: var(--unipac-error);
}


/* ==========================================================================
   11. PIE DE PÁGINA
   ========================================================================== */

/* Enlace "volver arriba": el SVG se aplica como máscara sobre un color de
   fondo, lo que permite cambiarlo en hover sin cargar un segundo archivo.
   La <img> original se conserva en el DOM —oculta visualmente— para no
   perder el texto alternativo ni las dimensiones del enlace. */
.unipac_enlace_volver_arriba a {
    display: inline-block;
    width: 103px;
    height: 14px;
    background-color: var(--unipac-texto-invertido);
    -webkit-mask: var(--unipac-img-volver-arriba) no-repeat left center / contain;
    mask: var(--unipac-img-volver-arriba) no-repeat left center / contain;
    transition: background-color var(--unipac-transicion);
}

.unipac_enlace_volver_arriba a img {
    display: block;
    visibility: hidden;
}

.unipac_enlace_volver_arriba a:hover,
.unipac_enlace_volver_arriba a:focus,
.unipac_enlace_volver_arriba a:focus-visible,
.unipac_enlace_volver_arriba a:active {
    background-color: var(--unipac-naranja);
}


/* ==========================================================================
   12. TERCEROS
   ========================================================================== */

/* Oculta el enlace promocional de Elfsight en el widget de reseñas.
   `clip-path` lo saca de la vista sin retirarlo del árbol de accesibilidad;
   `pointer-events: none` impide que se pueda activar. */
a[href*="elfsight.com/google-reviews-widget"],
a[href*="elfsight.com"][href*="utm_campaign=free-widget"] {
    clip-path: inset(50%) !important;
    width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}


/* ==========================================================================
   13. ARTE ANIMADO
   --------------------------------------------------------------------------
   Dos composiciones de bloques de color que se relevan entre sí. En ambas:

   · Los bloques NO se mueven: solo cambia su color.
   · Cada bloque toma el color del bloque anterior del recorrido, de modo que
     los colores siempre están repartidos sin repetirse y dos bloques
     contiguos nunca coinciden.
   · Cada relevo ocupa 70% en reposo y 30% de transición.

   Los literales hexadecimales dentro de los `@keyframes` son intencionales:
   `var()` no interpola de forma fiable entre fotogramas en todos los motores.
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 Pie de página — 5 bloques
   El <img> original y su flecha no se tocan: la capa de color va en un
   `::before` superpuesto, con los cuadros a 1/3 del contenedor (80 de 240px).
   `@property` registra las variables como <color> para que el navegador sepa
   interpolarlas en vez de saltar de un valor a otro.
   -------------------------------------------------------------------------- */

@property --u-b0 {
    syntax: "<color>";
    inherits: false;
    initial-value: #D3DC4B;
}

/* lima */
@property --u-b1 {
    syntax: "<color>";
    inherits: false;
    initial-value: #7E4292;
}

/* morado */
@property --u-b2 {
    syntax: "<color>";
    inherits: false;
    initial-value: #DDE0D1;
}

/* gris */
@property --u-b3 {
    syntax: "<color>";
    inherits: false;
    initial-value: #198043;
}

/* verde */
@property --u-b4 {
    syntax: "<color>";
    inherits: false;
    initial-value: #EE7326;
}

/* naranja */

.unipac_arte_pie_de_pagina {
    --u-dur: 3.5s;
    /* ciclo completo: 5 relevos de 0.7s */
    --u-ease: ease-in-out;

    --u-c0: #D3DC4B;
    /* lima */
    --u-c1: #7E4292;
    /* morado */
    --u-c2: #DDE0D1;
    /* gris */
    --u-c3: #198043;
    /* verde */
    --u-c4: #EE7326;
    /* naranja */
}

.unipac_arte_pie_de_pagina::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 33.3333% 33.3333%;
    background-image:
        linear-gradient(var(--u-b0), var(--u-b0)),
        linear-gradient(var(--u-b1), var(--u-b1)),
        linear-gradient(var(--u-b2), var(--u-b2)),
        linear-gradient(var(--u-b3), var(--u-b3)),
        linear-gradient(var(--u-b4), var(--u-b4));
    background-position:
        0% 0%,
        0% 50%,
        50% 50%,
        50% 100%,
        100% 50%;
    animation:
        u-b0 var(--u-dur) var(--u-ease) infinite,
        u-b1 var(--u-dur) var(--u-ease) infinite,
        u-b2 var(--u-dur) var(--u-ease) infinite,
        u-b3 var(--u-dur) var(--u-ease) infinite,
        u-b4 var(--u-dur) var(--u-ease) infinite;
}

/* Recorrido: lima → morado → gris → verde → naranja → lima */
@keyframes u-b0 {

    /* col 1, fila 1 */
    0.0%,
    14.0% {
        --u-b0: var(--u-c0);
    }

    20.0%,
    34.0% {
        --u-b0: var(--u-c4);
    }

    40.0%,
    54.0% {
        --u-b0: var(--u-c3);
    }

    60.0%,
    74.0% {
        --u-b0: var(--u-c2);
    }

    80.0%,
    94.0% {
        --u-b0: var(--u-c1);
    }

    100% {
        --u-b0: var(--u-c0);
    }
}

@keyframes u-b1 {

    /* col 1, fila 2 */
    0.0%,
    14.0% {
        --u-b1: var(--u-c1);
    }

    20.0%,
    34.0% {
        --u-b1: var(--u-c0);
    }

    40.0%,
    54.0% {
        --u-b1: var(--u-c4);
    }

    60.0%,
    74.0% {
        --u-b1: var(--u-c3);
    }

    80.0%,
    94.0% {
        --u-b1: var(--u-c2);
    }

    100% {
        --u-b1: var(--u-c1);
    }
}

@keyframes u-b2 {

    /* col 2, fila 2 */
    0.0%,
    14.0% {
        --u-b2: var(--u-c2);
    }

    20.0%,
    34.0% {
        --u-b2: var(--u-c1);
    }

    40.0%,
    54.0% {
        --u-b2: var(--u-c0);
    }

    60.0%,
    74.0% {
        --u-b2: var(--u-c4);
    }

    80.0%,
    94.0% {
        --u-b2: var(--u-c3);
    }

    100% {
        --u-b2: var(--u-c2);
    }
}

@keyframes u-b3 {

    /* col 2, fila 3 */
    0.0%,
    14.0% {
        --u-b3: var(--u-c3);
    }

    20.0%,
    34.0% {
        --u-b3: var(--u-c2);
    }

    40.0%,
    54.0% {
        --u-b3: var(--u-c1);
    }

    60.0%,
    74.0% {
        --u-b3: var(--u-c0);
    }

    80.0%,
    94.0% {
        --u-b3: var(--u-c4);
    }

    100% {
        --u-b3: var(--u-c3);
    }
}

@keyframes u-b4 {

    /* col 3, fila 2 */
    0.0%,
    14.0% {
        --u-b4: var(--u-c4);
    }

    20.0%,
    34.0% {
        --u-b4: var(--u-c3);
    }

    40.0%,
    54.0% {
        --u-b4: var(--u-c2);
    }

    60.0%,
    74.0% {
        --u-b4: var(--u-c1);
    }

    80.0%,
    94.0% {
        --u-b4: var(--u-c0);
    }

    100% {
        --u-b4: var(--u-c4);
    }
}

/* --------------------------------------------------------------------------
   13.2 Elecciones — 6 bloques
   El SVG va en línea y cada <rect> se identifica por su posición en el código,
   no por su posición visual: de ahí que el orden de los `nth-child` no sea
   correlativo. El recorrido elegido evita que dos bloques contiguos se
   parezcan, tanto en reposo como a mitad de un fundido.
   -------------------------------------------------------------------------- */

.unipac_art_elecciones {
    --u-el-dur: 4.2s;
    /* ciclo completo: 6 relevos de 0.7s */
    --u-el-ease: ease-in-out;

    /* Paleta en orden de recorrido */
    --u-el-c0: #198043;
    /* verde */
    --u-el-c1: #DDE0D1;
    /* gris */
    --u-el-c2: #FFFFFF;
    /* blanco */
    --u-el-c3: #EE7326;
    /* naranja */
    --u-el-c4: #D3DC4B;
    /* lima */
    --u-el-c5: #7E4292;
    /* morado */
}

.unipac_art_elecciones svg rect:nth-child(1) {
    animation: u-el-b0 var(--u-el-dur) var(--u-el-ease) infinite;
}

/* verde   · col 1, fila 2 */
.unipac_art_elecciones svg rect:nth-child(6) {
    animation: u-el-b1 var(--u-el-dur) var(--u-el-ease) infinite;
}

/* gris    · col 3, fila 2 */
.unipac_art_elecciones svg rect:nth-child(2) {
    animation: u-el-b2 var(--u-el-dur) var(--u-el-ease) infinite;
}

/* blanco  · col 2, fila 3 */
.unipac_art_elecciones svg rect:nth-child(5) {
    animation: u-el-b3 var(--u-el-dur) var(--u-el-ease) infinite;
}

/* naranja · col 3, fila 1 */
.unipac_art_elecciones svg rect:nth-child(4) {
    animation: u-el-b4 var(--u-el-dur) var(--u-el-ease) infinite;
}

/* lima    · col 2, fila 2 */
.unipac_art_elecciones svg rect:nth-child(3) {
    animation: u-el-b5 var(--u-el-dur) var(--u-el-ease) infinite;
}

/* morado  · col 3, fila 3 */

/* Recorrido: verde → gris → blanco → naranja → lima → morado → verde */
@keyframes u-el-b0 {

    /* verde */
    0.0%,
    11.667% {
        fill: var(--u-el-c0);
    }

    16.667%,
    28.333% {
        fill: var(--u-el-c5);
    }

    33.333%,
    45.0% {
        fill: var(--u-el-c4);
    }

    50.0%,
    61.667% {
        fill: var(--u-el-c3);
    }

    66.667%,
    78.333% {
        fill: var(--u-el-c2);
    }

    83.333%,
    95.0% {
        fill: var(--u-el-c1);
    }

    100% {
        fill: var(--u-el-c0);
    }
}

@keyframes u-el-b1 {

    /* gris */
    0.0%,
    11.667% {
        fill: var(--u-el-c1);
    }

    16.667%,
    28.333% {
        fill: var(--u-el-c0);
    }

    33.333%,
    45.0% {
        fill: var(--u-el-c5);
    }

    50.0%,
    61.667% {
        fill: var(--u-el-c4);
    }

    66.667%,
    78.333% {
        fill: var(--u-el-c3);
    }

    83.333%,
    95.0% {
        fill: var(--u-el-c2);
    }

    100% {
        fill: var(--u-el-c1);
    }
}

@keyframes u-el-b2 {

    /* blanco */
    0.0%,
    11.667% {
        fill: var(--u-el-c2);
    }

    16.667%,
    28.333% {
        fill: var(--u-el-c1);
    }

    33.333%,
    45.0% {
        fill: var(--u-el-c0);
    }

    50.0%,
    61.667% {
        fill: var(--u-el-c5);
    }

    66.667%,
    78.333% {
        fill: var(--u-el-c4);
    }

    83.333%,
    95.0% {
        fill: var(--u-el-c3);
    }

    100% {
        fill: var(--u-el-c2);
    }
}

@keyframes u-el-b3 {

    /* naranja */
    0.0%,
    11.667% {
        fill: var(--u-el-c3);
    }

    16.667%,
    28.333% {
        fill: var(--u-el-c2);
    }

    33.333%,
    45.0% {
        fill: var(--u-el-c1);
    }

    50.0%,
    61.667% {
        fill: var(--u-el-c0);
    }

    66.667%,
    78.333% {
        fill: var(--u-el-c5);
    }

    83.333%,
    95.0% {
        fill: var(--u-el-c4);
    }

    100% {
        fill: var(--u-el-c3);
    }
}

@keyframes u-el-b4 {

    /* lima */
    0.0%,
    11.667% {
        fill: var(--u-el-c4);
    }

    16.667%,
    28.333% {
        fill: var(--u-el-c3);
    }

    33.333%,
    45.0% {
        fill: var(--u-el-c2);
    }

    50.0%,
    61.667% {
        fill: var(--u-el-c1);
    }

    66.667%,
    78.333% {
        fill: var(--u-el-c0);
    }

    83.333%,
    95.0% {
        fill: var(--u-el-c5);
    }

    100% {
        fill: var(--u-el-c4);
    }
}

@keyframes u-el-b5 {

    /* morado */
    0.0%,
    11.667% {
        fill: var(--u-el-c5);
    }

    16.667%,
    28.333% {
        fill: var(--u-el-c4);
    }

    33.333%,
    45.0% {
        fill: var(--u-el-c3);
    }

    50.0%,
    61.667% {
        fill: var(--u-el-c2);
    }

    66.667%,
    78.333% {
        fill: var(--u-el-c1);
    }

    83.333%,
    95.0% {
        fill: var(--u-el-c0);
    }

    100% {
        fill: var(--u-el-c5);
    }
}


/* ==========================================================================
   14. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
   --------------------------------------------------------------------------
   Un único bloque para todas las animaciones del tema. Si se agrega una nueva,
   su selector va aquí también.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .unipac_arte_pie_de_pagina::before,
    .unipac_art_elecciones svg rect {
        animation: none;
    }

    .unipac_arte_imagen_destacada svg path,
    .unipac_arrow_down svg path,
    .unipac_arrow_right svg path {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* MENU PANEL LATERAL */

/* Menú responsivo con el estilo del menú de escritorio */
.elementor-element-0be7217 .elementor-nav-menu--dropdown{
  background: transparent;
}
.elementor-element-0be7217 .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(:last-child){
  margin-bottom: 15px;
}

/* Elementos de primer nivel */
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-item{
  padding: 8px 0;
  color: #656565;
  fill: #656565;
  background: transparent;
}
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-item:focus-visible,
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-item.highlighted,
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
  color: #EE7326;
  fill: #EE7326;
  background: transparent;
}

/* Flecha del submenú: hereda el color y gira al abrir */
.elementor-element-0be7217 .elementor-nav-menu--dropdown .sub-arrow{
  padding: 0 0 0 10px;
}
.elementor-element-0be7217 .elementor-nav-menu--dropdown .sub-arrow svg{
  width: 12px;
  height: 12px;
  fill: currentColor;
  transition: transform .2s;
}
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.highlighted .sub-arrow svg{
  transform: rotate(180deg);
}

/* Submenú (Bachillerato, Licenciaturas…) */
.elementor-element-0be7217 .elementor-nav-menu--dropdown .sub-menu{
  background: transparent;
  margin: 6px 0 0;
  padding-left: 14px;
  border-left: 2px solid #EE7326;
}
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-sub-item{
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.3;
  padding: 7px 0;
  color: #656565;
  background: transparent;
  border: 0;
}
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-sub-item:focus-visible,
.elementor-element-0be7217 .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active{
  color: #EE7326;
  background: transparent;
}