/* ==========================================================
   Divi Capsule Header v1.7
   ----------------------------------------------------------
   - Menú 1: cambia solo fondo al hacer scroll.
   - Menú 2: cambia fondo + logo + texto al hacer scroll.
   - Compatible con múltiples columnas .capsule-menu-1/2
   - Protección contra conflictos con sticky o fixed.
   - v1.4: color inicial del texto del menú 2 en blanco.
   - v1.5: blur desde el estado inicial, sombra suave en la
           cápsula y desplegables del menú 2 en blanco.
   - v1.6: fondo inicial blanco al 25% y desplegables en
           rgba(87, 94, 85, 0.4) con selector reforzado.
   - v1.8: elimina el margen inferior que Divi añade a las
           columnas hijas de la cápsula en móvil (≤980px).
   - v1.7: color de scroll y desplegables en rgba(45, 75, 99, 0.4)
           y blur de 19px en los desplegables.
   ========================================================== */


/* --- Base para ambas cápsulas --- */
.capsule-menu-1,
.capsule-menu-2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 20px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(38px);
  -webkit-backdrop-filter: blur(38px);
  box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.05);
  transition:
    background-color 0.35s ease,
    backdrop-filter 0.35s ease,
    color 0.35s ease;
  position: relative;
  z-index: 99999;
  isolation: isolate;
}


/* Asegura que los módulos internos no se expandan */
.capsule-menu-1 > .et_pb_module,
.capsule-menu-2 > .et_pb_module {
  margin: 0 !important;
  flex: 0 0 auto;
}


/* --- Estado con scroll --- */
.capsule-menu-1.scrolled,
.capsule-menu-2.scrolled {
  background-color: rgba(45, 75, 99, 0.4);
}


/* ==========================================================
   MENÚ 2: cambia logo y texto con el scroll
   ========================================================== */


/* Logo blanco al hacer scroll */
.capsule-menu-2.scrolled img {
  filter: brightness(0) invert(1) !important;
}


/* Texto blanco al hacer scroll */
.capsule-menu-2.scrolled a,
.capsule-menu-2.scrolled .menu-item a,
.capsule-menu-2.scrolled .et-menu a {
  color: #ffffff !important;
  transition: color 0.35s ease;
}


/* Refuerzo para Divi */
.capsule-menu-2.scrolled .et-menu-nav > ul > li > a,
.capsule-menu-2.scrolled .et-menu-nav > ul > li.current-menu-item > a,
.capsule-menu-2.scrolled .et-menu-nav > ul > li > a:hover {
  color: #ffffff !important;
}


/* ==========================================================
   MENÚ 2: color inicial del texto
   ========================================================== */

.capsule-menu-2 .et-menu a {
  color: #ffffff !important;
  transition: color 0.35s ease;
}


/* ==========================================================
   ESPACIADO ENTRE ENLACES
   ========================================================== */

.capsule-menu-1 .et-menu > li,
.capsule-menu-2 .et-menu > li {
  margin-right: 28px;
}

.capsule-menu-1 .et-menu > li:last-child,
.capsule-menu-2 .et-menu > li:last-child {
  margin-right: 0;
}


/* ==========================================================
   PROTECCIÓN CONTRA STICKY / FIXED
   ========================================================== */

.et-l--header,
.et_pb_section--fixed {
  position: relative;
  z-index: 99998 !important;
}

.et_pb_sticky,
.et_pb_sticky_content {
  z-index: 10 !important;
}


/* ==========================================================
   VERSIÓN MÓVIL
   ========================================================== */

@media (max-width: 980px) {

  .capsule-menu-1,
  .capsule-menu-2 {
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border-radius: 25px;
    padding: 10px 16px;
  }

  /* Divi añade margin-bottom: 30px a .et_block_row > .et_pb_column
     en móvil; las clases de cápsula están en la fila, así que se
     anula en sus columnas hijas. */
  .capsule-menu-1 > .et_pb_column,
  .capsule-menu-2 > .et_pb_column {
    margin-bottom: 0 !important;
  }

}


/* =======================================================
   SUBMENÚS
   La clase de la cápsula va repetida a propósito para
   superar en especificidad a las reglas que genera Divi
   (.et_pb_menu_0_tb_header.et_pb_menu .nav li ul).
   ======================================================= */

.capsule-menu-1.capsule-menu-1 .et_pb_menu .nav li ul,
.capsule-menu-2.capsule-menu-2 .et_pb_menu .nav li ul {
  background-color: rgba(45, 75, 99, 0.4) !important;
  backdrop-filter: blur(19px);
  -webkit-backdrop-filter: blur(19px);
  border: none !important;
  border-radius: 12px;
  transition: background-color 0.35s ease, color 0.35s ease;
  z-index: 9999 !important;
}


/* ---------- Colores de texto ---------- */

.capsule-menu-1.capsule-menu-1 .et_pb_menu .nav li ul a,
.capsule-menu-2.capsule-menu-2 .et_pb_menu .nav li ul a {
  color: #ffffff !important;
}