/* Adaptaciones de layout para pantallas pequeñas. */
@media (max-width: 900px) {
  .directory-intro {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .directory-note { max-width: 340px; }
  .professional-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-footer { align-items: flex-start; flex-wrap: wrap; }
  .directory-footer p { flex-basis: 100%; }
}

@media (max-width: 620px) {
  .shell { padding-left: 16px; padding-right: 16px; }
  .nav { height: auto; min-height: 64px; flex-wrap: wrap; gap: 0 12px; padding-top: 10px; }
  .nav .brand { flex: 1 1 auto; min-width: 0; font-size: 23px; }
  .nav > .button { flex: 0 0 auto; padding: 10px 12px; font-size: 12px; white-space: nowrap; }
  .nav .links { order: 3; width: 100%; min-width: 0; overflow-x: auto; justify-content: flex-start; gap: 18px; padding: 10px 0 12px; scrollbar-width: none; }
  .nav .links::-webkit-scrollbar { display: none; }
  .nav .links a { flex: 0 0 auto; white-space: nowrap; }
  .mobile-nav-trigger { position: fixed; top: 78px; right: 16px; z-index: 18; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--forest); box-shadow: 0 8px 20px rgba(36,61,52,.14); font-size: 21px; line-height: 1; }
  .mobile-nav-menu { position: fixed; top: 128px; right: 16px; z-index: 17; display: grid; width: min(220px, calc(100vw - 32px)); gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 14px 32px rgba(36,61,52,.16); }
  .mobile-nav-menu[hidden] { display: none; }
  .mobile-nav-menu a { padding: 12px 13px; border-radius: 9px; color: var(--ink); font-weight: 700; }
  .mobile-nav-menu a:active, .mobile-nav-menu a:focus-visible { background: var(--sage); outline: none; }
  .mobile-nav-trigger:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  body { padding-bottom: 70px; }
  .mobile-help-bar { position: fixed; right: 14px; bottom: 14px; left: 14px; z-index: 15; display: flex; min-height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: var(--forest); color: var(--white); box-shadow: 0 12px 28px rgba(36,61,52,.2); font-weight: 700; }
  .directory-page { padding-top: 40px; }
  .directory-intro { padding-bottom: 38px; }
  .directory-intro p { font-size: 16px; }
  .directory-toolbar { display: grid; gap: 17px; }
  .professional-grid { grid-template-columns: 1fr; }
  .professional-card--rich { padding: 22px; }
  .directory-footer { display: grid; gap: 14px; margin-top: 24px; }
  .directory-footer .eyebrow { white-space: normal; }
  .directory-footer .button { width: 100%; }
}

@media (min-width: 621px) {
  .mobile-nav-trigger, .mobile-nav-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .directory-note,
  .professional-card--rich,
  .availability-dot {
    animation: none;
    transition: none;
  }
}
