.patient-nav {
  position: relative;
}

.patient-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.patient-nav-trigger span {
  font-size: .72rem;
  transition: transform .2s ease;
}

.patient-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 120;
  width: 310px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(251, 252, 251, .99);
  box-shadow: 0 18px 45px rgba(19, 47, 54, .15);
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.patient-menu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 15px;
}

.patient-menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  line-height: 1.35;
}

.patient-menu a:hover,
.patient-menu a:focus-visible {
  background: var(--soft);
}

.patient-nav:hover .patient-menu,
.patient-nav:focus-within .patient-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

.patient-nav:hover .patient-nav-trigger span,
.patient-nav:focus-within .patient-nav-trigger span {
  transform: rotate(180deg);
}

.home-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.home-guide-card {
  display: flex;
  min-height: 270px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.home-guide-card:first-child {
  background: var(--soft);
}

.home-guide-card h3 {
  margin: 10px 0 13px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  font-weight: 400;
  line-height: 1.12;
}

.home-guide-card p {
  margin: 0 0 27px;
  color: var(--muted);
}

.home-guide-card .btn {
  margin-top: auto;
}

@media (max-width: 980px) {
  .mobile-nav.open {
    display: block;
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    z-index: 101;
    padding: 18px 0 22px;
    background: rgba(251, 252, 251, .98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(19, 47, 54, .08);
  }

  .mobile-nav.open .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  /* Reserva para navegadores que não executam ou mantêm em cache o script do menu. */
  .nav:has(.menu:focus) + .mobile-nav {
    display: block;
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    z-index: 101;
    padding: 18px 0 22px;
    background: rgba(251, 252, 251, .98);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px rgba(19, 47, 54, .08);
  }

  .nav:has(.menu:focus) + .mobile-nav .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .menu {
    position: relative;
    z-index: 2;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 8px;
    touch-action: manipulation;
  }

  .menu:hover {
    background: var(--soft);
  }

  .mobile-nav .patient-nav {
    width: 100%;
  }

  .mobile-nav .patient-nav-trigger span {
    display: none;
  }

  .mobile-nav .patient-menu {
    position: static;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 5px 0 5px 14px;
    border: 0;
    border-left: 2px solid var(--accent2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .mobile-nav .patient-menu a {
    padding: 7px 10px;
    color: var(--muted);
  }
}

@media (max-width: 640px) {
  .mobile-nav.open {
    top: 68px;
    padding: 8px 14px 18px;
    border-top: 1px solid var(--line);
  }

  .mobile-nav.open a {
    display: block;
    padding: 10px 2px;
    font-size: .9rem;
  }

  .nav:has(.menu:focus) + .mobile-nav {
    top: 68px;
    padding: 8px 14px 18px;
    border-top: 1px solid var(--line);
  }

  .nav:has(.menu:focus) + .mobile-nav a {
    display: block;
    padding: 10px 2px;
    font-size: .9rem;
  }
}

@media (max-width: 760px) {
  .home-guide-grid {
    grid-template-columns: 1fr;
  }

  .home-guide-card {
    min-height: 0;
    padding: 28px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .patient-menu,
  .patient-nav-trigger span {
    transition: none;
  }
}

/* The header deliberately follows the visitor's device appearance.  The
   original vector is retained, but becomes white over the dark header so the
   LR mark stays legible on phones using dark mode. */
@media (prefers-color-scheme: dark) {
  .header {
    background: rgba(16, 43, 49, .96);
    border-bottom-color: rgba(215, 231, 232, .18);
  }

  .header .brand strong,
  .header .links,
  .header .menu {
    color: #f7fbfb;
  }

  .header .brand small,
  .header .links a:not(.btn),
  .mobile-nav a {
    color: #c7dcde;
  }

  .header .mark img {
    filter: brightness(0) invert(1);
    opacity: .98;
  }

  .header .nav-cta,
  .mobile-nav .btn {
    background: #f7fbfb;
    border-color: #f7fbfb;
    color: #132f36;
  }

  .mobile-nav.open,
  .nav:has(.menu:focus) + .mobile-nav {
    background: rgba(16, 43, 49, .99);
    border-bottom-color: rgba(215, 231, 232, .18);
  }

  .mobile-nav .patient-menu a {
    color: #b4cbce;
  }
}