/* ==========================================================
   Divi Capsule Header v1.3
   ----------------------------------------------------------
   - 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.
   ========================================================== */

/* --- 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: transparent;
  transition:
    background-color 0.35s ease,
    backdrop-filter 0.35s ease,
    color 0.35s ease;
  position: relative;
  z-index: 99999;
  isolation: isolate; /* evita conflictos de apilamiento sin romper el blur */
}

/* 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 (igual para ambos) --- */
.capsule-menu-1.scrolled,
.capsule-menu-2.scrolled {
  background-color: rgba(87, 94, 85, 0.4);
  backdrop-filter: blur(38px);
  -webkit-backdrop-filter: blur(38px);
}

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

/* 🔹 Estado al hacer scroll: logo y texto en blanco */
.capsule-menu-2.scrolled img {
  filter: brightness(0) invert(1) !important;
}

.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 extra para Divi: forzar color en enlaces activos y hover */
.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 de texto
   ========================================================== */

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




/* ==========================================================
   AJUSTES DE 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 Y PRIORIDAD VISUAL
   ========================================================== */

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

.et_pb_sticky,
.et_pb_sticky_content {
  z-index: 10 !important; /* mantiene sticky del contenido por debajo */
}

/* ==========================================================
   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;
  }
}





/* =======================================================
   SUBMENÚS SIMULANDO BLUR CON COLOR TRANSLÚCIDO
   ======================================================= */

/* ---------- MENÚ 1 ---------- */
/* Submenús con el mismo fondo translúcido que la cápsula principal */
.capsule-menu-1 .et-menu-nav ul ul,
.capsule-menu-1 .et-menu-nav ul ul ul {
  background: rgba(87, 94, 85, 0.8) !important;
  border-radius: 12px;
  transition: background 0.35s ease, color 0.35s ease;
  z-index: 9999 !important;
}

/* ---------- MENÚ 2 ---------- */
/* Antes de hacer scroll: submenú blanco translúcido */
.capsule-menu-2 .et-menu-nav ul ul,
.capsule-menu-2 .et-menu-nav ul ul ul {
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 12px;
  transition: background 0.35s ease, color 0.35s ease;
  z-index: 9999 !important;
}

/* Después de hacer scroll: mismo color que .capsule-menu-1 */
.capsule-menu-2.scrolled .et-menu-nav ul ul,
.capsule-menu-2.scrolled .et-menu-nav ul ul ul {
  background: rgba(87, 94, 85, 0.8) !important;
}

/* ---------- Colores de texto ---------- */
.capsule-menu-1 .et-menu-nav ul ul a {
  color: inherit !important;
}

.capsule-menu-2 .et-menu-nav ul ul a {
  color: #000 !important;
}

.capsule-menu-2.scrolled .et-menu-nav ul ul a {
  color: #fff !important;
}

/* ---------- Fix para reglas del theme ---------- */
.capsule-menu-1 .et_pb_menu .nav li ul,
.capsule-menu-2 .et_pb_menu .nav li ul {
  background: transparent !important;
  border: none !important;
}


/* Forzar módulos en la misma columna a alinearse horizontalmente
   útil cuando logo + menú están en la misma columna */
.capsule-menu-1 .et_pb_column,
.capsule-menu-2 .et_pb_column {
  display: flex !important;
  flex-direction: row !important;     /* horizontal */
  align-items: center !important;     /* centrar verticalmente */
  justify-content: flex-start !important; /* o space-between si quieres espacio */
  gap: 12px !important;               /* separación entre logo y menú */
  padding: 0 !important;              /* evita paddings extra de la columna */
}

/* Evitar que los módulos (logo / menú) se estiren */
.capsule-menu-1 .et_pb_column > .et_pb_module,
.capsule-menu-2 .et_pb_column > .et_pb_module {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Si el menú ocupa todo el ancho (por ejemplo tiene width:100%), limitar su crecimiento */
.capsule-menu-1 .et_pb_column .et_pb_menu,
.capsule-menu-2 .et_pb_column .et_pb_menu {
  flex: 0 0 auto !important;
}

/* Reversión en móvil: apilar verticalmente para evitar cortes */
@media (max-width: 980px) {
  .capsule-menu-1 .et_pb_column,
  .capsule-menu-2 .et_pb_column {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }
}