.elementor-168 .elementor-element.elementor-element-a6490b0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-f82bdcb *//* =====================================================
   HERO VIDEO – TEXTO LEGIBLE (VERSIÓN FINAL DEPURADA)
   ===================================================== */



.hero.hero--video {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}



.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.42) 35%,
    rgba(255,255,255,0.22) 60%,
    rgba(255,255,255,0.08) 80%,
    rgba(255,255,255,0) 100%
  );
  z-index: 1;
}


.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}



/* CAJA DE CONTRASTE DEL TEXTO */
.hero.hero--video .hero-text {
  position: relative;
  z-index: 3;

  background-color: rgba(255, 255, 255, 0.88);
  padding: 26px 30px;
  border-radius: 12px;
  max-width: 680px;

  box-shadow:
    0 18px 40px rgba(0,0,0,0.12),
    0 6px 18px rgba(0,0,0,0.08);

  isolation: isolate;
}

/* TÍTULO */
.hero.hero--video .hero-text h1 {
  margin: 0 0 14px;
  font-size: clamp(36px, 4.8vw, 48px);
  font-weight: 800;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  color: #2A2A2A;
  text-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

/* SUBTÍTULO */

.hero.hero--video .hero-text {
  position: relative;
  z-index: 3;

  background: none;      /* 🔥 elimina la pantalla blanca */
  box-shadow: none;      /* 🔥 elimina el efecto de tarjeta */
  border-radius: 0;

  padding: 800;            /* opcional: elimina espacios extras */
  max-width: 680px;
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .hero.hero--video .hero-content {
    justify-content: center;
    text-align: center;
  }

  .hero.hero--video .hero-text {
    margin: 0 auto;
    padding: 20px 22px;
  }
}

/* FADE-IN DEL TEXTO */
.animate-fade {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn 1s ease-out forwards;
  animation-delay: 0.3s;
}

.animate-fade p {
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeIn 1s ease-out forwards;
  animation-delay: 0.5s;
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade,
  .animate-fade p {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.udimeb-footer {
  background: #3A424C; /* Gris claro corporativo UDIMEB */
  padding: 60px 0 30px;
  color: #F1F4F8; /* gris muy claro (casi blanco) para texto */
  font-family: "Inter", system-ui, sans-serif;
}

.udimeb-footer__container {
  width: min(1200px, 90%);
  margin: 0 auto;
}

.udimeb-footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: 40px;
}

.udimeb-footer__title {
  font-size: 1rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.udimeb-footer__text {
  margin: 0 0 16px;
  line-height: 1.65;
  color: #E5E9EF; /* gris claro sutil */
}

.udimeb-footer__links a {
  display: inline-block;
  margin-right: 16px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  transition: color .2s ease;
}

.udimeb-footer__links a:hover {
  color: #0F2E66; /* azul UDIMEB */
}

.udimeb-footer__social {
  display: flex;
  gap: 12px;
}

.udimeb-footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #4A535E; /* gris medio para íconos */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease;
}

.udimeb-footer__social a:hover {
  background: #0F2E66; /* azul UDIMEB hover */
}

.icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
}

.icon-facebook { background-image: url('/wp-content/uploads/icons/facebook-white.svg'); }
.icon-useic    { background-image: url('/wp-content/uploads/icons/useic-white.svg'); }
.icon-udibi    { background-image: url('/wp-content/uploads/udimeb/UDIBI_BN.png'); }

.udimeb-footer__copy {
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  color: #ECEFF3;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.udimeb-footer__dev {
  font-weight: 600;
  margin-top: 8px;
}

/* LINKS – HOVER NARANJA UDIMEB */
.udimeb-footer__links a:hover {
  color: #F28C28; /* Naranja UDIMEB */
}

/* ICONOS sociales – opcional si también deseas hover naranja */
.udimeb-footer__social a:hover {
  background: #F28C28 !important;
}


/* =========================
   FOOTER – LOGOS COMO BOTONES (SOLO LOGO)
   ========================= */

.udimeb-footer__sites {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.udimeb-footer__sites a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Botón compacto, sin texto */
  width: 52px;
  height: 52px;

  background: #4A535E;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;

  cursor: pointer;
  transition:
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
}

/* Hover / Focus */
.udimeb-footer__sites a:hover,
.udimeb-footer__sites a:focus-visible {
  background: #F28C28;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  outline: none;
}

/* Active */
.udimeb-footer__sites a:active {
  transform: translateY(0);
}

/* LOGO: único elemento visible */
.udimeb-footer__sites img {
  height: 28px;
  width: auto;
  max-width: 36px;
  object-fit: contain;
}

/* Mobile: centrado */
@media (max-width: 768px) {
  .udimeb-footer__sites {
    justify-content: center;
  }
}
.hero-overlay {
  pointer-events: none;
}
``/* End custom CSS */
/* Start custom CSS *//* ============================================
   FORZAR que la barra tenga el ANCHO COMPLETO
   como en la maqueta final
============================================ */

/* 1) Romper límite del contenedor */
#inicio .container{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Hacer que la zona de búsqueda maneje su propio ancho */
#inicio .hero-search{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:10px;
}

/* 3) Barra del buscador (pastilla completa) */
#inicio .searchbar{
  display:flex;
  align-items:center;
  gap:12px;

  /* 🔥 ANCHO REAL — como en tu segunda imagen */
  width: min(1100px, 90vw);

  background:#ffffff;
  border:1px solid #EAECF0;
  border-radius:22px;
  padding:8px;
  box-shadow:0 4px 16px rgba(16,24,40,.12);
}

/* 4) Input grande */
#inicio .searchbar input[type="search"]{
  flex:1;
  padding:16px 20px;
  border:1px solid #E6EAF2;
  border-radius:14px;
  font-size:16px;
}

/* 5) Botones escritorio */
#inicio .searchbar #btnSearch,
#inicio .searchbar #btnShowAll{
  padding:14px 24px !important;
  font-size:15px;
  font-weight:700;
  border-radius:14px !important;
  white-space:nowrap;
}

/* Botón azul */
#inicio .searchbar #btnSearch{
  background:#1F3E8A !important;
  color:#fff !important;
  border:1px solid #1F3E8A !important;
}

/* Botón blanco */
#inicio .searchbar #btnShowAll{
  background:#fff !important;
  border:1px solid #E2E8F0 !important;
  color:#344054 !important;
}

/* 6) Responsive móvil */
@media(max-width:720px){
  #inicio .searchbar{
    flex-direction:column;
    width:94%;
    padding:16px;
  }
  #inicio .searchbar #btnSearch,
  #inicio .searchbar #btnShowAll{
    width:100%;
  }
}

/*************************************************
   UDIMEB — Vacantes: Hover naranja para filtros
   Aplica SOLO a los chips/píldoras dentro de #vacantes
**************************************************/

#vacantes .chip:hover,
#vacantes .vac-filter:hover,
#vacantes button:hover:not(.is-active) {
  background: #f97316 !important;   /* naranja */
  color: #ffffff !important;         /* texto blanco para equilibrio */
  border-color: #f97316 !important;
  cursor: pointer;
}

/* Texto naranja al pasar cursor (alternativa si prefieres texto naranja, no blanco) */
#vacantes .chip:hover *,
#vacantes .vac-filter:hover *,
#vacantes button:hover:not(.is-active) * {
  color: #f97316 !important;
}

/* Estado ACTIVO se mantiene azul #1f3b8a */
#vacantes .chip.is-active,
#vacantes .vac-filter.is-active,
#vacantes button.is-active {
  background: #1f3b8a !important;
  color: #ffffff !important;
  border-color: #1f3b8a !important;
}


/************************************************************
   UDIMEB — Chips Vacantes (Tamaño reducido estilo referencia)
************************************************************/

/* ===== ESTADO NORMAL ===== */
#vacantes .chip,
#vacantes .vac-filter,
#vacantes button.vac-filter {
  background:#eef2ff !important;       /* azul gris claro */
  color:#1f3b8a !important;            /* azul UDIMEB */
  border:1px solid #d6dcf5 !important; /* borde leve */
  font-size:14px !important;           /* 🔥 tamaño texto referencia */
  font-weight:700;
  border-radius:999px !important;      /* forma cápsula */
  
  /* 🔥 Padding reducido EXACTO a referencia */
  padding:6px 16px !important;

  /* 🔥 reduce altura visual (el truco para que se vean delgadas) */
  line-height:1.1;

  transition:0.18s ease-in-out;
  white-space:nowrap;
}

/* ===== ESTADO ACTIVO (ej. “Todos”) ===== */
#vacantes .chip.is-active,
#vacantes .vac-filter.is-active,
#vacantes button.vac-filter.is-active {
  background:#fde7d3 !important;      /* naranja pastel */
  border-color:#f97316 !important;
  color:#f97316 !important;
}

/* ===== ESTADO HOVER ===== */
#vacantes .chip:hover:not(.is-active),
#vacantes .vac-filter:hover:not(.is-active),
#vacantes button.vac-filter:hover:not(.is-active) {
  background:#f97316 !important;      /* naranja vivo */
  border-color:#f97316 !important;
  color:#ffffff !important;
}

/* Título de la sección Vacantes */
/* Se aplica solo dentro del section#vacantes */
#vacantes .section-title h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F172A; /* o #000 si prefieres más oscuro */
  margin-bottom: 12px;
}
/* Título de la sección Áreas para aplicar */
/* Se aplica solo dentro del section#areasparaaplicar */
#areas .section-title h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F172A; /* o #000 si prefieres más oscuro */
  margin-bottom: 12px;
}

/************************************************************
   UDIMEB – Tarjetas de Vacantes (títulos 16px bold + texto 14px)
************************************************************/


/* ===== TEXTO DE DESCRIPCIÓN (fuera de chips y botones) ===== */
#vacantes .card p,
#vacantes .card .description,
#vacantes .card .excerpt {
  font-size: 14px !important;       /* Texto general 14px */
  font-weight: 400 !important;      /* No negritas */
  color: #475467 !important;        /* Gris profesional */
  line-height: 1.55 !important;     /* Legible */
  margin-bottom: 14px;
}

/* ===== AJUSTE: que chips, botones y etiquetas NO cambien ===== */
#vacantes .chip,
#vacantes .vac-filter,
#vacantes .pill,
#vacantes .tag,
#vacantes button {
  font-size: 14px !important; /* Mantener tamaño visual de filtros */
  font-weight: 700 !important;
}

/************************************************************
   UDIMEB — Títulos de tarjetas de vacantes (16px, bold)
   Compatible con tarjetas expandibles y collapsed
************************************************************/

/************************************************************
   UDIMEB — Títulos de tarjetas de vacantes (16px, bold)
   Selector hiper-específico para vencer CSS de Elementor
************************************************************/

#vacantes .card h2,
#vacantes .card .entry-title,
#vacantes .vacante-card h2,
#vacantes .vacante-item h2,
#vacantes h2[class*="vac"],
#vacantes .card-header h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.3 !important;
}

/* Texto general dentro de la tarjeta (se mantiene en 14px) */
#vacantes .card p,
#vacantes .card ul,
#vacantes .card li,
#vacantes .card .excerpt,
#vacantes .card .description {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #475467 !important;
  line-height: 1.55 !important;
}

/************************************************************
   UDIMEB — Títulos de VACANTE EXPANDIDA (detalle)
   Tamaño 16px, bold, seguro y específico
************************************************************/

#vacantes .vacante-expanded h2,
#vacantes .vacante-detail h2,
#vacantes .vacante-full h2,
#vacantes .card-expanded h2,
#vacantes .vacante-item-full h2,
#vacantes .vacante-content h2,
.single-vacante h2,
.frm_display_508_container h2,
#vacantes h2.vacante-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0F172A !important;
  margin-bottom: 12px !important;
}

/************************************************************
   UDIMEB — Títulos de tarjetas de vacantes (body.elementor-page-168 real)
************************************************************/
#vacanciesGrid .vac-title {
    font-size: 16px !important;      /* tamaño correcto */
    font-weight: 700 !important;     /* negritas, no 800 */
    line-height: 1.3 !important;
    color: #0f172a !important;       /* mantiene tu color */
}

/* Áreas para aplicar */
#areas .elementor-heading-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
}

/* Contáctanos */
#contactanos .elementor-heading-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
}


/************************************************************
 UDIMEB — Slider Áreas para aplicar
 Títulos: 14px / bold
 Botón Filtrar: hover naranja / texto blanco siempre
************************************************************/

/* === DESCRIPCIÓN === */
#areas .area-card p,
#areas .area-card .desc {
    font-size: 14px !important;
    color: #475467 !important;
    margin-bottom: 12px !important;
    line-height: 1.45 !important;
}

/* === BOTÓN FILTRAR — estilo normal === */
#areas .area-card .btn {
    background: #1f3b8a !important;   /* azul UDIMEB */
    color: #ffffff !important;        /* texto siempre blanco */
    border: 1px solid #1f3b8a !important;
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: 0.2s ease;
}

/* === BOTÓN FILTRAR — hover correcto === */
#areas .area-card .btn:hover {
    background: #f97316 !important;   /* naranja corporativo */
    border-color: #f97316 !important;
    color: #ffffff !important;        /* texto NO debe cambiar */
}

*************************************************************
   UDIMEB — Slider Áreas para aplicar (TÍTULO 14px + bold)
*************************************************************/

/* Títulos de cada tarjeta dentro del slider */
#areas .swiper-slide .card h3,
#areas .card h3,
#areas h3 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase;
}

**************************************************************
   UDIMEB — Slider Áreas para aplicar
   Forzado total: títulos a 14px + bold
***************************************************************/

#areas .elementor-widget-heading .elementor-heading-title,
#areas .swiper-slide .elementor-widget-heading .elementor-heading-title,
#areas .card .elementor-heading-title,
#areas .swiper-slide h2.elementor-heading-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
}

/************************************************************
 UDIMEB — Slider Áreas para aplicar
 Ajuste REAL del título (h4.area-card__title)
************************************************************/

#areas .area-card__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
    text-transform: uppercase !important;
}

/***********************************************************
   UDIMEB — Sección Contáctanos
   Título 20px + botones con hover naranja
***********************************************************/

/* === TÍTULO DE LA SECCIÓN === */
#contacto .section-title h2,
#contacto h2.elementor-heading-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
}

/* === BOTONES DEL TAB (Trabajadores / Estudiantes) === */
#contacto .btn,
#contacto button {
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    transition: 0.2s ease-in-out;
}

/* === BOTÓN ACTIVO === */
#contacto .is-active {
    background: #1f3b8a !important;       /* azul UDIMEB */
    border: 1px solid #1f3b8a !important;
    color: #ffffff !important;             /* texto blanco */
}

/***********************************************************
   UDIMEB — Contáctenos (Título 20px + Tabs alineados)
***********************************************************/

/* === TÍTULO DE SECCIÓN === */
#contacto .section-title h2,
#contacto h2.elementor-heading-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 18px !important;
}


/***********************************************************
   UDIMEB — Contáctenos (alinear tabs + activo azul)
***********************************************************/

/* 1. Alinear los tabs a la derecha */
#contacto .contact-tabs {
    display: flex !important;
    justify-content: flex-end !important;  /* 🔥 A LA DERECHA */
    gap: 12px !important;
    margin-bottom: 20px !important;
}

/* 2. Estilo base de los tabs */
#contacto .contact-tab {
    padding: 8px 22px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    border: 1px solid #D0D5DD !important;
    color: #1f3b8a !important;
    cursor: pointer;
    transition: background .2s ease, border .2s ease, color .2s ease;
}

/* 3. Tab ACTIVO → azul permanente */
#contacto .contact-tab[aria-selected="true"] {
    background: #1f3b8a !important;
    border-color: #1f3b8a !important;
    color: #ffffff !important;
}

/* Evitar hover sobre el activo */
#contacto .contact-tab[aria-selected="true"]:hover {
    background: #1f3b8a !important;
    border-color: #1f3b8a !important;
    color: #ffffff !important;
}

/* 4. Tab INACTIVO → hover naranja */
#contacto .contact-tab[aria-selected="false"]:hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

/***********************************************************
   UDIMEB — HEADER (Hover naranja + Activo azul)
***********************************************************/

/* === ENLACE ACTIVO (Inicio, cuando está seleccionado) === */
.udm-nav__link.is-active {
    background: #1f3b8a !important;
    border: 1px solid #1f3b8a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
}

/* === HOVER NARANJA EN LINKS INACTIVOS === */
.udm-nav__link:not(.is-active):hover {
    background: #f97316 !important;      /* 🔥 Naranja UDIMEB */
    border: 1px solid #f97316 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
}

/* === ESTADO BASE DE LOS LINKS (sin hover) === */
.udm-nav__link {
    color: #1f3b8a !important;   /* Azul UDIMEB */
    border-radius: 999px;
    transition: 0.2s ease;
    padding: 8px 14px;
    border: 1px solid transparent;
}

/***********************************************************
   BOTONES DEL HEADER (Postularme + Mostrar todo)
***********************************************************/

/* === POSTULARME (rojo → naranja UDIMEB) === */
#udmGoApply {
    background: #f97316 !important;
    border: 1px solid #f97316 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
}

#udmGoApply:hover {
    filter: brightness(1.05);
}

/* === MOSTRAR TODO (ya corregido, lo dejamos en azul UDIMEB) === */
#udmShowAll {
    background: #1f3b8a !important;
    border-color: #1f3b8a !important;
    color: #ffffff !important;
}

/***********************************************************
   RESET de hover antiguo (rojo/fucsia) que estaba afectando
***********************************************************/
.udm-nav__link:hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

/***********************************************************
   UDIMEB — Header (activar/desactivar tabs correctamente)
***********************************************************/

/* === ESTILO BASE DE LOS LINKS === */
.udm-nav__link {
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    border: 1px solid transparent;
    color: #1f3b8a !important; /* Texto azul */
    transition: .2s;
}

/* === ESTADO ACTIVO — SOLO cuando JS aplica .is-active === */
.udm-nav__link.is-active {
    background: #f97316 !important;   /* Naranja */
    border-color: #f97316 !important;
    color: #ffffff !important;        /* Texto blanco */
}

/* === HOVER: SOLO para inactivos === */
.udm-nav__link:not(.is-active):hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}
/* === HOVER SOBRE ACTIVO (se queda naranja, no cambia) === */
.udm-nav__link.is-active:hover {
    background: #f97316 !important;
    color: #ffffff !important;
}

/***********************************************************
   UDIMEB — FIX DEFINITIVO (header activo + hover)
   Fuerza máxima para vencer el critical CSS inline
***********************************************************/

/* ACTIVO: siempre naranja */
header#udimebHeader header#udimebHeader header#udimebHeader
.udm-nav .udm-nav__link.is-active {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

/* HOVER de inactivos: naranja */
header#udimebHeader header#udimebHeader header#udimebHeader
.udm-nav .udm-nav__link:not(.is-active):hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

/* ESTADO BASE: texto azul */
header#udimebHeader header#udimebHeader header#udimebHeader
.udm-nav .udm-nav__link {
    color: #1f3b8a !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-weight: 700 !important;
}
CSS. De la caja elementor 
/* Corregir texto blanco para los botones azul primario del header */
#udmShowAll,
#udmMobileShowAll {
  color: #ffffff !important;
}/* End custom CSS */