/* Adaptación técnica de la versión aprobada para hosting estático. */

:focus-visible {
  outline: 3px solid #4fe1d0;
  outline-offset: 3px;
}

.mobile-menu-panel,
.mobile-menu-backdrop {
  display: none;
}

.mobile-menu-panel[hidden],
.mobile-menu-backdrop[hidden] {
  display: none !important;
}

@media (max-width: 819px) {
  body.menu-open {
    overflow: hidden;
  }

  .mobile-menu-backdrop:not([hidden]) {
    z-index: 48;
    display: block;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 62%);
    backdrop-filter: blur(3px);
  }

  .mobile-menu-panel:not([hidden]) {
    z-index: 49;
    display: grid;
    align-content: start;
    gap: 1.75rem;
    width: min(88vw, 24rem);
    height: 100dvh;
    padding: 6rem 1.25rem 2rem;
    position: fixed;
    top: 0;
    right: 0;
    overflow-y: auto;
    background: #111116;
    color: #fff;
    border-left: 1px solid rgb(255 255 255 / 12%);
    box-shadow: -20px 0 60px rgb(0 0 0 / 40%);
  }

  .mobile-menu-heading {
    display: grid;
    gap: .25rem;
  }

  .mobile-menu-heading strong {
    color: #fff;
    font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
    font-size: 1.45rem;
    text-transform: uppercase;
  }

  .mobile-menu-heading span,
  .mobile-sheet-cta p {
    color: #aaa8b1;
    font-size: .78rem;
  }

  .mobile-nav {
    display: grid;
  }

  .mobile-nav a {
    padding: 1rem .15rem;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    font-weight: 800;
  }

  .mobile-sheet-cta {
    display: grid;
    gap: .75rem;
  }
}

.schedule-tabs-list button:focus-visible {
  outline-color: #4fe1d0;
}

.faq-trigger {
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.faq-trigger svg {
  width: 1rem;
  flex: none;
  transition: transform .2s ease;
}

.faq-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.faq-content {
  padding: 0 .2rem 1.15rem !important;
}

.faq-content p {
  max-width: 52rem;
}

.schedule-cta > div {
  align-items: center;
  gap: .7rem;
  display: flex;
}

.schedule-cta > div > svg {
  width: 1.25rem;
  flex: none;
}

@media (min-width: 820px) {
  .mobile-menu-panel,
  .mobile-menu-backdrop {
    display: none !important;
  }
}