/*
  Menú mobile (hamburguesa): control propio, independiente del runtime de Webflow.
  El botón .menu-button alterna el atributo [data-menu-open] en .navbar; ese estado
  fuerza la visibilidad de .nav_mobile (con !important, por encima de la regla de
  colapso [data-collapse=medium] .w-nav-menu{display:none}) y anima las 3 líneas
  del ícono hacia una X.

  Patrón de interacción (mismo criterio que logitrack.mx): al abrir, el menú toma
  toda la pantalla en vez de quedar como un panel pequeño debajo del header; el
  logo y el botón (ya animado a X) quedan por encima del panel, siempre visibles;
  los links se agrandan y espacian como lista de pantalla completa; el submenú
  "Servicios" se comporta como acordeón con su propio chevron (ya existía el
  max-height, solo faltaba mostrar el ícono en mobile); y el botón "Agenda tu
  cita" queda visible dentro del menú abierto en vez de oculto por completo.
*/
@media screen and (max-width: 1030px) {
  /* El panel permanece montado fuera de pantalla desde la carga inicial.
     Usar display:none impediría que algunos navegadores interpolaran la
     primera apertura; visibility y pointer-events lo mantienen inactivo sin
     perder el estado inicial de transform. */
  .nav_mobile {
    display: flex !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    margin-top: 0;
    padding: 8.5rem 1.5rem 2rem;
    background-color: #01273d;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
    z-index: 1050;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -100%, 0);
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1),
      visibility 0s linear 0.45s;
    will-change: transform;
  }

  .menu-button {
    display: block;
  }

  .navbar[data-menu-visible="true"] .nav_mobile {
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1),
      visibility 0s linear 0s;
  }

  .navbar[data-menu-open="true"] .nav_mobile {
    transform: translate3d(0, 0, 0);
  }

  /* Logo y botón (X) del header quedan por encima del panel de pantalla completa.
     Se refuerza con !important y se incluyen también los contenedores
     intermedios (navbar_content, nav_buttons-wrap) para que ningún elemento
     sin position/z-index propio rompa el orden de apilado dentro de .navbar. */
  .navbar[data-menu-visible="true"] .navbar_content,
  .navbar[data-menu-visible="true"] .navbar_logo-link,
  .navbar[data-menu-visible="true"] .nav_buttons-wrap,
  .navbar[data-menu-visible="true"] .menu-button {
    position: relative !important;
    z-index: 1051 !important;
  }

  .menu-button {
    z-index: 2;
  }

  .nav-button_line {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .navbar[data-menu-open="true"] .nav-button_line.is-first {
    transform: translateY(0) rotate(45deg);
  }

  .navbar[data-menu-open="true"] .nav-button_line.is-second {
    opacity: 0;
  }

  .navbar[data-menu-open="true"] .nav-button_line.is-third {
    transform: translateY(0) rotate(-45deg);
  }

  /* Lista de links: sin tarjeta/borde, ancho completo, tamaño y espaciado de menú
     de pantalla completa (en vez del panel pequeño con borde del tema base). */
  .navbar[data-menu-visible="true"] .navbar_list {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    grid-row-gap: 2rem;
    width: 100%;
  }

  .navbar[data-menu-visible="true"] .nav_links {
    font-size: 1.75rem;
    padding: 0;
    color: #ffffff;
  }

  /* Fondo azul: el título y el ícono de flecha de cada servicio (dentro del
     acordeón "Servicios") traían color oscuro fijo pensado para fondo blanco. */
  .navbar[data-menu-visible="true"] .nav_dropdown-label {
    color: #ffffff;
  }

  .navbar[data-menu-visible="true"] .nav_dropdown-arrow {
    filter: brightness(0) invert(1);
  }

  /* Lista de servicios del acordeón: el tema base los dejaba con solo 0.75rem
     entre uno y otro, muy juntos para el tamaño de texto de pantalla completa. */
  .navbar[data-menu-visible="true"] .nav_dropdown-grid {
    gap: 2.5rem;
  }

  .navbar[data-menu-visible="true"] .nav_dropdown {
    width: 100%;
    flex-flow: column;
    align-items: flex-start;
  }

  .navbar[data-menu-visible="true"] .nav_dropdown-trigger {
    font-size: 1.75rem;
    width: 100%;
    justify-content: space-between;
  }

  /* El chevron de "Servicios" se ocultaba en mobile; se muestra para que el
     acordeón tenga la misma señal visual (rotar al abrir) que en desktop. */
  .nav_dropdown-chevron {
    display: inline-block;
  }

  /* Botón "Agenda tu cita": el tema base lo oculta en mobile (hide-mobile-landscape)
     y vive fuera del panel de scroll (junto al botón X, en la barra fija del header).
     Con el menú abierto se vuelve a mostrar y se ancla como barra fija al fondo de
     la pantalla, por encima del panel, igual que el CTA de logitrack.mx. */
  .navbar[data-menu-visible="true"] .navbar_button-secondary {
    display: none;
  }

  .navbar[data-menu-visible="true"] .login-wrap.hide-mobile-landscape {
    display: flex !important;
    position: fixed;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1052;
  }

  .navbar[data-menu-visible="true"] .login-wrap .button_component {
    width: 100%;
    justify-content: center;
  }

  /* Deja espacio al final del panel para que el último link no quede tapado
     por el botón fijo "Agenda tu cita". */
  .navbar[data-menu-visible="true"] .nav_mobile {
    padding-bottom: 6rem;
  }

  /* Con el menú de pantalla completa abierto, el botón redondo de accesibilidad
     (fixed, bottom-left) queda justo debajo de la barra "Agenda tu cita" y se
     empalman. Se oculta mientras el menú está abierto (mobile-menu.js agrega
     esta clase al <body>) y vuelve a aparecer al cerrar. */
  body.mobile-menu-open .a11y-button,
  body.mobile-menu-open .a11y-panel,
  body.mobile-menu-open .a11y-overlay {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .navbar[data-menu-visible="true"] .nav_mobile {
      transition-duration: 0.01ms;
    }
  }
}