/* ==========================================================================
   WingstoWin Solutions - Header Modular Styles
   Archivo específico para cabecera, navegación y menú móvil responsive
   ========================================================================== */

/* Contenedor principal de la cabecera flotante */
.div--u-ib5wmj05w,
.w2w-header-wrapper,
#ib5wmj05w_0 {
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 708px !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Barra superior horizontal */
.div--u-icds6ax30,
.w2w-header-bar {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 52px !important;
  height: auto !important;
  padding: 8px 20px !important;
  background-color: rgb(13, 13, 13) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Logo WingstoWin */
.link-block.menu-logo,
.link-block--u-i095gq8fu {
  display: inline-flex !important;
  align-items: center !important;
  column-gap: 10px !important;
  text-decoration: none !important;
  color: #ffffff !important;
  z-index: 10 !important;
}

.image--u-ifte1wj7c,
.w2w-logo-wrap {
  width: 22px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}

.image--u-ifte1wj7c img,
.w2w-logo-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Tipografía de menú */
.text-menu {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
  text-transform: uppercase !important;
  color: #eeeeee !important;
  transition: color 0.2s ease !important;
}

/* Contenedores de enlaces de navegación */
.div--u-ixrpcd1ga {
  display: flex !important;
  align-items: center !important;
  column-gap: 24px !important;
  color: rgba(238, 238, 238, 1) !important;
  width: auto !important;
}

.div--u-iex5a75o4 {
  display: flex !important;
  align-items: center !important;
  column-gap: 20px !important;
}

/* Enlace individual de menú */
.link-block.menu-link {
  display: inline-flex !important;
  align-items: center !important;
  column-gap: 8px !important;
  color: rgba(238, 238, 238, 1) !important;
  position: relative !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.menu-link_circle {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(238, 238, 238, 0.9) !important;
  transition: all 250ms ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.link-block.menu-link:hover .menu-link_circle,
.link-block.menu-link.is-current .menu-link_circle {
  background-color: rgb(238, 238, 238) !important;
  transform: scale(0.85) !important;
}

.link-block.menu-link:hover .text-menu,
.link-block.menu-link.is-current .text-menu {
  color: #ffffff !important;
}

#iis1dwjxy_0,
[aria-label="Servicios"] {
  cursor: pointer !important;
}

/* Botón Burger móvil / desktop */
.image--u-i1m2ptl0z {
  width: 22px !important;
  height: 22px !important;
  cursor: pointer !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}

.div--u-ipqvxwhta {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  row-gap: 4px !important;
  cursor: pointer !important;
  overflow: visible !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.div--u-ipqvxwhta:hover {
  transform: scale(1.1) !important;
}

.burger-line {
  height: 2px !important;
  width: 18px !important;
  background-color: rgb(238, 238, 238) !important;
  border-radius: 1px !important;
  transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease !important;
  display: block !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

.div--u-ipqvxwhta:hover .burger-line {
  background-color: #ffffff !important;
}

/* Menú overlay desplegable (móvil y responsive) */
.div--u-iqojfyhk7 {
  display: none !important;
  border-radius: 0 0 6px 6px !important;
  background-color: rgb(13, 13, 13) !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 24px 32px 36px 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: rgb(238, 238, 238) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: none !important;
  max-height: calc(85vh - 70px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative !important;
  z-index: 9 !important;
  margin-top: -2px !important;
}

/* Estado abierto del menú */
.div--u-iqojfyhk7.is-open,
body.w2w-menu-open .div--u-iqojfyhk7 {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: w2wHeaderFadeIn 0.25s ease forwards !important;
}

@keyframes w2wHeaderFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Asegurar visibilidad de todos los elementos dentro del menú desplegable */
.div--u-iqojfyhk7 .div--u-ishquajsy,
.div--u-iqojfyhk7 .link-block.menu-open_link,
.div--u-iqojfyhk7 .div--u-ix5f80og9,
.div--u-iqojfyhk7 .media_block,
.div--u-iqojfyhk7 .image--u-i3gwpfzso,
.div--u-iqojfyhk7.is-open .div--u-ishquajsy,
.div--u-iqojfyhk7.is-open .link-block.menu-open_link,
.div--u-iqojfyhk7.is-open .div--u-ix5f80og9,
.div--u-iqojfyhk7.is-open .media_block,
.div--u-iqojfyhk7.is-open .image--u-i3gwpfzso,
body.w2w-menu-open .div--u-iqojfyhk7 .div--u-ishquajsy,
body.w2w-menu-open .div--u-iqojfyhk7 .link-block.menu-open_link,
body.w2w-menu-open .div--u-iqojfyhk7 .div--u-ix5f80og9,
body.w2w-menu-open .div--u-iqojfyhk7 .media_block,
body.w2w-menu-open .div--u-iqojfyhk7 .image--u-i3gwpfzso {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Botón de cerrar menú */
.image--u-i3gwpfzso {
  width: 24px !important;
  height: 24px !important;
  margin-left: auto !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  box-sizing: content-box !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  opacity: 0.8 !important;
}

.image--u-i3gwpfzso:hover {
  transform: scale(1.15) rotate(90deg) !important;
  opacity: 1 !important;
}

.image--u-i3gwpfzso img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Navegación interna del menú */
.div--u-ishquajsy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  row-gap: 1.25rem !important;
  margin-top: 1rem !important;
  margin-bottom: 2rem !important;
}

.link-block.menu-open_link {
  display: inline-flex !important;
  align-items: center !important;
  column-gap: 0.8rem !important;
  text-decoration: none !important;
  color: #eeeeee !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.link-block.menu-open_link:hover {
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

.link-block.menu-open_link .h2 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
  color: inherit !important;
}

.link-block.menu-open_link:hover .menu-link_circle {
  background-color: rgb(238, 238, 238) !important;
  transform: scale3d(0.85, 0.85, 1) !important;
}

/* Zona comercial y consultas en menú */
.div--u-ix5f80og9 {
  display: flex !important;
  flex-direction: column !important;
  row-gap: 0.85rem !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
}

.media_block.div--u-iplcru5f0,
.media_block.div--u-i5p31aztf {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  color: rgba(238, 238, 238, 0.85) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.05rem !important;
}

.media_block a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.media_block a:hover {
  text-decoration: underline !important;
  opacity: 0.85 !important;
}

/* ==========================================================================
   Media Queries Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .div--u-ib5wmj05w,
  .w2w-header-wrapper,
  #ib5wmj05w_0 {
    width: calc(100% - 30px) !important;
    max-width: 708px !important;
  }
  .div--u-icds6ax30,
  .w2w-header-bar {
    width: 100% !important;
    padding: 8px 16px !important;
  }
  .div--u-iex5a75o4 {
    display: none !important; /* Ocultar enlaces directos en tablet/móvil */
  }
  .div--u-ipqvxwhta {
    display: flex !important; /* Mostrar burger */
  }
  .image--u-i3gwpfzso {
    display: flex !important;
  }
}

@media (max-width: 479px) {
  .div--u-ib5wmj05w,
  .w2w-header-wrapper,
  #ib5wmj05w_0 {
    top: 12px !important;
    width: calc(100% - 20px) !important;
  }
  .div--u-icds6ax30,
  .w2w-header-bar {
    padding: 8px 12px !important;
    min-height: 46px !important;
  }
  .text-menu {
    font-size: 11px !important;
  }
  .div--u-ishquajsy {
    row-gap: 14px !important;
  }
  .link-block.menu-open_link .h2 {
    font-size: 14px !important;
  }
}
