/* =========================================================
   Forensis UX Nav + Sticky Header + Espaciados — 9114cf39
   v2.0.0
   ========================================================= */

/* ──────────────────────────────────────────────────────────
   1. STICKY HEADER — Transparente → Sólido al hacer scroll
   ────────────────────────────────────────────────────────── */

/* El header Elementor usa .e-con (container flex) en el root */
.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9990 !important;
  width: 100% !important;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

/* Estado inicial: transparente */
.elementor-location-header > .e-con:first-child,
.elementor-location-header > .elementor-section:first-child {
  background-color: rgba(255, 255, 255, 0) !important;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
  box-shadow: none !important;
}

/* Estado con scroll — clase .forensis-header-scrolled añadida por JS */
.elementor-location-header.forensis-header-scrolled > .e-con:first-child,
.elementor-location-header.forensis-header-scrolled > .elementor-section:first-child {
  background-color: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 2px 20px rgba(4, 39, 97, 0.12) !important;
}

body.admin-bar .elementor-location-header {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .elementor-location-header {
    top: 46px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   2. LAYOUT DEL HEADER: Logo izquierda / Menú derecha
   ────────────────────────────────────────────────────────── */

/* Contenedor raíz del header */
.elementor-location-header > .e-con:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  padding: 10px 40px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Sub-contenedores directos del header (logo + nav) */
.elementor-location-header > .e-con:first-child > .e-con {
  flex-shrink: 0;
}

/* Contenedor del LOGO: ancho fijo al contenido */
.elementor-location-header > .e-con:first-child > .e-con:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 220px !important;
}

/* Contenedor del MENÚ: ocupa el espacio restante, alineado a la derecha */
.elementor-location-header > .e-con:first-child > .e-con:last-child {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* ──────────────────────────────────────────────────────────
   3. NAV-MENU DE ELEMENTOR — Alineación y estilos correctos
   ────────────────────────────────────────────────────────── */

/* Widget nav-menu de Elementor Pro */
.elementor-widget-nav-menu {
  width: 100% !important;
}

/* Lista de ítems en desktop */
.elementor-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ítems del menú */
.elementor-nav-menu > li {
  position: relative;
  white-space: nowrap;
}

/* Links nivel 1 */
.elementor-nav-menu--main .elementor-item {
  color: #21238F !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  padding: 8px 14px !important;
  display: block;
  transition: color 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: #456AB1 !important;
}

/* Submenú desplegable */
.elementor-nav-menu--dropdown {
  background: #ffffff !important;
  border-top: 3px solid #456AB1 !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 30px rgba(4, 39, 97, 0.13) !important;
  min-width: 200px !important;
  padding: 6px 0 !important;
}

.elementor-nav-menu--dropdown .elementor-item {
  color: #21238F !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 20px !important;
  display: block;
  transition: background 0.15s, color 0.15s;
}

.elementor-nav-menu--dropdown .elementor-item:hover {
  background: #EEF4FF !important;
  color: #456AB1 !important;
}

/* ──────────────────────────────────────────────────────────
   4. ESPACIO BLANCO FINAL — Eliminar padding sobrante
   ────────────────────────────────────────────────────────── */

/* Última sección de la página antes del footer */
.elementor-section:last-of-type,
.e-con:last-of-type {
  margin-bottom: 0 !important;
}

/* Eliminar cualquier padding-bottom excesivo en el body/wrapper */
.elementor-page .elementor {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* El espacio blanco entre contenido y footer */
.elementor-template-canvas,
.page-template-elementor_canvas {
  padding-bottom: 0 !important;
}

/* Forzar que el footer quede pegado al contenido */
.elementor-location-footer {
  margin-top: 0 !important;
}

/* ──────────────────────────────────────────────────────────
   5. RESPONSIVE — Menú en móvil/tablet
   ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .elementor-location-header > .e-con:first-child {
    padding: 10px 20px !important;
  }
}

@media (max-width: 767px) {
  .elementor-location-header > .e-con:first-child {
    padding: 8px 16px !important;
    flex-wrap: wrap !important;
  }

  /* En móvil el logo ocupa ancho completo y el menú hamburguesa aparece */
  .elementor-location-header > .e-con:first-child > .e-con:first-child {
    max-width: 160px !important;
  }

  /* Ocultar menú horizontal en móvil (el widget tiene su propio toggle) */
  .elementor-nav-menu--layout-horizontal {
    display: none !important;
  }

  /* Mostrar botón hamburguesa */
  .elementor-menu-toggle {
    display: flex !important;
  }
}

/* ──────────────────────────────────────────────────────────
   6. SHORTCODE INSTITUCIONAL
   ────────────────────────────────────────────────────────── */

.forensis-institucional-9114cf39 { margin: 40px 0; }
.forensis-institucional-9114cf39 .fi-grid {
  display: flex; flex-wrap: wrap; gap: 20px;
}
.forensis-institucional-9114cf39 .fi-card {
  flex: 1 1 220px;
  background: #fff;
  border-left: 4px solid #456AB1;
  border-radius: 6px;
  padding: 20px 18px;
  box-shadow: 0 2px 12px rgba(63,111,189,.08);
}
.forensis-institucional-9114cf39 .fi-icon { font-size: 1.6rem; display: block; margin-bottom: 8px; }
.forensis-institucional-9114cf39 .fi-card h3 {
  color: #456AB1; font-size: 1rem; font-weight: 700;
  margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em;
}
.forensis-institucional-9114cf39 .fi-card p,
.forensis-institucional-9114cf39 .fi-card ul {
  color: #333; font-size: .9rem; line-height: 1.6; margin: 0; padding: 0;
}
.forensis-institucional-9114cf39 .fi-card ul { list-style: none; }
.forensis-institucional-9114cf39 .fi-card ul li::before { content: '✓ '; color: #456AB1; font-weight: 700; }
@media (max-width: 767px) {
  .forensis-institucional-9114cf39 .fi-grid { flex-direction: column; }
  .forensis-institucional-9114cf39 .fi-card { flex: 1 1 100%; }
}
/* ──────────────────────────────────────────────────────────
   7. CORRECCIÓN CONTENEDOR FLEX (WRAP)
   ────────────────────────────────────────────────────────── */
.elementor-element-d862690 {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Evita que los hijos se encojan y fuerza el salto de línea a los 300px */
.elementor-element-d862690 > .e-con-child,
.elementor-element-d862690 > .elementor-widget {
  flex: 1 0 300px !important;
}