/* ==================================================
   0. VARIABLES DE MARCA (cambia aquí y se aplica a todo)
   ================================================== */
:root {
  --bs-dark: #033a3f;
  --bs-dark-2: #043233;
  --bs-cream: #f2f1d5;
  --bs-mint: #c4d9b8;
  --bs-mint-2: #d1ddbc;
  --bs-pink: #e30052;
  --bs-header-pad-top: 80px;   /* espacio superior en escritorio */
  --bs-header-z: 99990;        /* alto, pero por debajo del carrito pop-up */
}

/* ==================================================
   1. HEADER
   ================================================== */
.ob-custom-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: transparent !important;
  padding: var(--bs-header-pad-top) 0 20px 0 !important;
  z-index: var(--bs-header-z) !important;
  box-sizing: border-box !important;
  transition: padding 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease !important;
}

.ob-custom-header.is-scrolled {
  background-color: rgba(4, 50, 51, 0.95) !important;
  padding: 15px 0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Si estás logueado en WordPress, el header no queda tapado por la barra de admin */
body.admin-bar .ob-custom-header { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar .ob-custom-header { top: 46px !important; }
}

/* OPCIONAL: header siempre oscuro en páginas internas con fondo claro.
   Descomenta si en alguna página el menú crema no se lee.
body:not(.home) .ob-custom-header {
  background-color: rgba(4, 50, 51, 0.95) !important;
  padding: 15px 0 !important;
}
*/

.ob-header-container {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  width: 90% !important;
  max-width: 1250px !important;
  margin: 0 auto !important;
}

.ob-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.ob-logo img {
  max-height: 55px !important;
  width: auto !important;
  transition: max-height 0.3s ease !important;
}

.ob-custom-header.is-scrolled .ob-logo img {
  max-height: 45px !important;
}

/* ---------- Menú ---------- */
.ob-nav-wrapper {
  background-color: transparent !important;
  border: 1px solid var(--bs-cream) !important;
  border-radius: 50px !important;
  padding: 5px !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ob-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.ob-nav-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ob-nav-list li::before { display: none !important; }

.ob-nav-list li a {
  display: block !important;
  text-decoration: none !important;
  color: var(--bs-cream) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  padding: 10px 24px !important;
  border: 1px solid transparent !important;
  border-radius: 50px !important;
  background: transparent !important;
  white-space: nowrap !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.ob-nav-list li:not(.active) a:hover {
  background-color: rgba(242, 241, 213, 0.15) !important;
  color: #ffffff !important;
}

.ob-nav-list li.active a {
  background-color: var(--bs-mint) !important;
  color: var(--bs-dark) !important;
  font-weight: 700 !important;
}

/* "Hacer Test" destacado como acción principal */
.ob-nav-list li.ob-nav-cta a {
  color: var(--bs-mint) !important;
  border-color: rgba(196, 217, 184, 0.6) !important;
  font-weight: 700 !important;
}
/* Si "Hacer Test" es la página activa, el texto oscuro sobre el fondo menta (antes quedaba menta sobre menta) */
.ob-nav-list li.ob-nav-cta.active a {
  color: var(--bs-dark) !important;
  border-color: transparent !important;
}
.ob-nav-list li.ob-nav-cta:not(.active) a:hover {
  background-color: var(--bs-mint) !important;
  color: var(--bs-dark) !important;
}

/* ---------- Íconos ---------- */
.ob-right-elements {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  flex-shrink: 0 !important;
}

.ob-icon-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  color: var(--bs-cream) !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.ob-icon-btn:hover {
  background-color: rgba(242, 241, 213, 0.15) !important;
  transform: translateY(-2px) !important;
}

.ob-icon-btn svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

/* Contador del carrito: admite 2 dígitos y se oculta cuando está en 0 */
.ob-icon-btn .xoo-wsc-items-count,
.ob-cart-count {
  position: absolute !important;
  top: -2px !important;
  right: -4px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--bs-mint) !important;
  color: var(--bs-dark) !important;
  border: 2px solid var(--bs-dark-2) !important;
  border-radius: 999px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}
.ob-icon-btn .xoo-wsc-items-count.is-empty {
  opacity: 0 !important;
  transform: scale(0.5) !important;
}

/* ---------- Botón hamburguesa (se convierte en X) ---------- */
.ob-mobile-toggle {
  display: none !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  flex-direction: column !important;
  gap: 5px !important;
  padding: 8px !important;
  margin-left: 5px !important;
}

.ob-mobile-toggle span {
  display: block !important;
  width: 25px !important;
  height: 3px !important;
  background-color: var(--bs-cream) !important;
  border-radius: 3px !important;
  transition: transform 0.3s ease, opacity 0.2s ease !important;
}

/* Foco visible para quien navega con teclado */
.ob-custom-header a:focus-visible,
.ob-custom-header button:focus-visible {
  outline: 2px solid var(--bs-mint) !important;
  outline-offset: 3px !important;
}

/* ---------- Laptops pequeñas: evita que el menú se desborde ---------- */
@media (min-width: 981px) and (max-width: 1240px) {
  .ob-nav-list li a {
    padding: 10px 14px !important;
    font-size: 14px !important;
  }
  .ob-right-elements { gap: 6px !important; }
}

/* ---------- Tablet y móvil ---------- */
@media (max-width: 980px) {
  .ob-custom-header { padding: 20px 0 15px 0 !important; }
  .ob-logo img,
  .ob-custom-header.is-scrolled .ob-logo img { max-height: 40px !important; }
  .ob-right-elements { gap: 5px !important; }
  .ob-icon-btn { width: 38px !important; height: 38px !important; }
  .ob-icon-btn svg { width: 19px !important; height: 19px !important; }

  .ob-mobile-toggle { display: flex !important; }
  .ob-mobile-toggle span { width: 22px !important; height: 2px !important; }
  .ob-mobile-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .ob-mobile-toggle.is-open span:nth-child(2) { opacity: 0 !important; }
  .ob-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  .ob-nav-wrapper {
    position: absolute !important;
    top: calc(100% + 12px) !important; /* siempre pegado debajo del header, haga scroll o no */
    right: 0 !important;
    width: min(260px, 90vw) !important;
    background-color: var(--bs-dark-2) !important;
    border-radius: 18px !important;
    padding: 15px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s !important;
  }
  .ob-nav-wrapper.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
  .ob-nav-list {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .ob-nav-list li a {
    text-align: center !important;
    padding: 14px 20px !important; /* área táctil cómoda */
  }
}

/* ---------- Móviles angostos (375 px y menos): el menú ☰ ya no se sale de la pantalla ----------
   Con 375 px el logo, los tres iconos y el botón sumaban unos 14 px más que el 90 % disponible. */
@media (max-width: 400px) {
  .ob-header-container { width: 92% !important; gap: 8px !important; }
  .ob-logo img,
  .ob-custom-header.is-scrolled .ob-logo img { max-height: 34px !important; }
  .ob-icon-btn { width: 34px !important; height: 34px !important; }
  .ob-mobile-toggle { margin-left: 0 !important; padding: 8px 6px !important; }
}
@media (max-width: 340px) {
  .ob-logo img,
  .ob-custom-header.is-scrolled .ob-logo img { max-height: 28px !important; }
}

/* ---------- "Hacer Test": una luz mínima con los colores de los sistemas recorre el borde ---------- */
@property --bs-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.ob-nav-list li.ob-nav-cta a { position: relative !important; isolation: isolate !important; }
.ob-nav-list li.ob-nav-cta a::before,
.ob-nav-list li.ob-nav-cta a::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  padding: 2px !important;
  border-radius: inherit !important;
  background: conic-gradient(from var(--bs-ang), transparent 0deg 215deg, #009966 250deg, #ff6633 272deg, #ffcc33 294deg, #0057d9 316deg, #7b61ff 338deg, #e30052 358deg, transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none !important;
  animation: bsBorde 4.2s linear infinite;
  z-index: 1 !important;
}
/* Resplandor suave del mismo recorrido */
.ob-nav-list li.ob-nav-cta a::after { filter: blur(5px); opacity: 0.55; }
@keyframes bsBorde { to { --bs-ang: 360deg; } }

/* ---------- "Sistemas": desplegable con los 6 sistemas ---------- */
.ob-nav-list li.ob-has-sub { position: relative !important; display: flex !important; align-items: center !important; }
.ob-nav-list li.ob-has-sub > a { padding-right: 6px !important; }
.ob-sub-toggle {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 30px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--bs-cream) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
}
.ob-nav-list li.ob-has-sub.is-current > a { background-color: var(--bs-mint) !important; color: var(--bs-dark) !important; font-weight: 700 !important; }
.ob-has-sub.is-current .ob-sub-toggle { color: var(--bs-dark) !important; }
.ob-chev { width: 11px !important; height: 8px !important; fill: none !important; stroke: currentColor !important; stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important; transition: transform 0.25s ease !important; }
.ob-has-sub.is-open .ob-chev { transform: rotate(180deg) !important; }

.ob-nav-list .ob-sub {
  list-style: none !important;
  position: absolute !important;
  top: calc(100% + 16px) !important;
  left: 50% !important;
  z-index: 20 !important;
  min-width: 250px !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(242, 241, 213, 0.2) !important;
  border-radius: 24px !important;
  background: rgba(4, 50, 51, 0.97) !important;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.42) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s !important;
}
/* Puente invisible para que el desplegable no se cierre al bajar el cursor */
.ob-nav-list .ob-sub::before { content: "" !important; position: absolute !important; left: 0; right: 0; top: -20px; height: 20px; display: block !important; }
.ob-nav-list .ob-has-sub:hover > .ob-sub,
.ob-nav-list .ob-has-sub:focus-within > .ob-sub,
.ob-nav-list .ob-has-sub.is-open > .ob-sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.ob-has-sub:hover .ob-chev { transform: rotate(180deg) !important; }

.ob-nav-list .ob-sub li { display: block !important; }
.ob-nav-list .ob-sub li a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 16px 8px 8px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.ob-sub-ico {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, var(--c, #c4d9b8), var(--cd, #8fb286)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}
.ob-sub-ico img { display: block !important; width: 21px !important; height: 21px !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }

@media (max-width: 980px) {
  /* Con el desplegable abierto el panel puede ser alto: en pantallas bajas se desplaza dentro de sí mismo */
  .ob-nav-wrapper { max-height: calc(100vh - 110px) !important; max-height: calc(100dvh - 110px) !important; overflow-y: auto !important; overscroll-behavior: contain; }
  .ob-nav-list li.ob-has-sub { flex-wrap: wrap !important; }
  .ob-nav-list li.ob-has-sub > a { flex: 1 1 auto !important; }
  .ob-nav-list .ob-sub {
    position: static !important;
    flex: 1 0 100% !important;
    display: none !important;
    min-width: 0 !important;
    margin: 6px 0 4px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    background: rgba(242, 241, 213, 0.06) !important;
    box-shadow: none !important;
    opacity: 1;
    visibility: visible;
    transform: none !important;
  }
  .ob-nav-list .ob-sub::before { display: none !important; }
  .ob-nav-list .ob-has-sub.is-open > .ob-sub { display: block !important; }
  .ob-nav-list .ob-has-sub:hover > .ob-sub:not(:focus-within) { transform: none !important; }
}

/* Respeta a quien desactiva animaciones en su sistema */
@media (prefers-reduced-motion: reduce) {
  .ob-custom-header,
  .ob-custom-header * { transition: none !important; }
  .ob-nav-list li.ob-nav-cta a::before,
  .ob-nav-list li.ob-nav-cta a::after { animation: none !important; }
}

/* ==================================================
   2. CARRITO POP-UP (plugin Side Cart de Xootix)
   El diseño y los textos están en cart.css; aquí solo el orden de capas.
   ================================================== */

/* El carrito siempre por encima del header. El panel va un nivel por encima del
   fondo oscuro; con el mismo z-index el fondo (que viene después) lo tapaba. */
.xoo-wsc-modal,
.xoo-wsc-opac { z-index: 999998 !important; }
.xoo-wsc-container { z-index: 999999 !important; }

/* ==================================================
   3. INTEGRACIÓN CON DIVI THEME BUILDER (encabezado global)
   ================================================== */

/* Divi envuelve el módulo de Código en sección/fila/columna con fondo blanco y
   relleno. Se anulan para que el header fijo no deje una franja ni empuje el contenido. */
.et-l--header,
.et-l--header .et_builder_inner_content,
.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_column,
.et-l--header .et_pb_code,
.et-l--header .et_pb_code_inner {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Divi da z-index: 2 a la columna del header y el contenido de la página lo tapaba.
   Se eleva toda la zona del header (sigue por debajo del carrito pop-up). */
.et-l--header {
  position: relative !important;
  z-index: var(--bs-header-z) !important;
}