/* Mobile Menu */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: 4px solid var(--black);
  font-size: 24px;
  cursor: pointer;
  align-self: flex-start;
}

@media (max-width: 768px) {
  .compact-nav ul {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
    position: absolute;
    top: 10px;
    left: 20px;
    right: auto;
    z-index: 2000; /* por encima del resto */
  }

  .mobile-menu-open .compact-nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    background: var(--white);
    gap: 20px;
    font-size: 24px;
    z-index: 1500;
  }

  .accessibility-wrapper {
    right: 20px;
    z-index: 2000;
  }

  /* Fondo negro para el menú full-screen */
  .mobile-menu-open .compact-nav ul {
    background: var(--black); /* usa tu variable */
  }

  /* Enlaces en blanco */
  .mobile-menu-open .compact-nav ul li a {
    color: var(--white);
  }

  /* Oculta los números */
  .mobile-menu-open .compact-nav ul li a .menu-number {
    display: none;
  }

  /* Invertir color y cambiar texto del botón al estado abierto */
  .mobile-menu-open .mobile-menu-toggle {
    color: var(--white); /* texto blanco */
  }

  /* Animación de entrada para el overlay */
  @keyframes menuSlideIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Invertir color y cambiar texto del botón al estado abierto */
  .mobile-menu-open .mobile-menu-toggle {
    color: var(--white); /* texto blanco */
  }

  /* Animación de entrada para el overlay */
  @keyframes menuSlideIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-menu-open .compact-nav ul {
    animation: menuSlideIn 0.3s ease-out forwards;
  }

  /* Muestra siempre el texto */
  .mobile-menu-open .compact-nav ul li a .menu-text {
    display: inline; /* asegúrate de que no esté oculto */
    opacity: 1 !important; /* fuerza visibilidad */
    transform: none !important; /* sin desplazamiento */
    width: auto !important; /* para que quepa el texto */
  }
  /* 1) Ocultar siempre el nav por defecto */
  .compact-nav ul {
    display: none !important;
  }

  /* 2) Solo mostrarlo cuando body tenga la clase mobile-menu-open */
  body.mobile-menu-open .compact-nav ul {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: fixed;
    inset: 0; /* top/right/bottom/left: 0 */
    background: var(--black);
    z-index: 1500;
    padding: 2rem 0; /* un poco de espacio arriba y abajo */
    gap: 1.5rem; /* separación entre links */
    overflow-y: auto; /* por si hay muchos items */
  }

  /* 3) Asegurarse de que .active no fuerce display */
  body.mobile-menu-open .compact-nav a.active {
    /* solo estilos de active, sin display:block ni nada */
    padding-right: 0;
  }

  h1 {
    font-size: 2rem !important;

    line-height: 1.7rem !important;
    padding-top: 20px !important;
  }

  .parrafo-centro {
    line-height: 1.5rem;
    width: 100% !important;
  }
  .number-side {
    display: none !important;
  }

  .number-side-right {
    display: none !important;
  }

  .content-side {
    gap: 0px !important;
    padding-left: 0px !important;
  }

  .content-side-right {
    gap: 0px !important;
    padding-right: 0px !important;
  }

  .content-side p {
    padding-left: 0px;
  }

  .subtitle-color-content {
    height: auto !important;
  }

  .button-52 {
    padding: 13px 50px 13px;
  }
}

@media (min-width: 768px) {
  .number-box.mobile {
    display: none;
  }
}