/* =========================================================
   CLINICARE — Especialidades: melhorias visuais
   Carregar DEPOIS de style.css e especialidades.css.
   ========================================================= */

/* O style.css põe overflow-x:hidden em html E body, o que impede o position:sticky.
   "clip" evita o deslize lateral sem criar uma área de scroll. */
html, body { overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Barra de categorias: fixa por baixo do cabeçalho, numa só linha ---------- */
body .especialidades-filters-bar { position: sticky; top: calc(var(--hdr, 76px) + 10px); z-index: 900; }
.especialidades-filters {
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  width: max-content; max-width: min(100%, 1200px); margin-inline: auto;
}
.especialidades-filters::-webkit-scrollbar { display: none; }
.especialidades-filters > .especialidade-filter:first-child { margin-left: auto; }          /* centradas quando cabem */
.especialidades-filters > .especialidade-filter:last-child { margin-right: auto; }
.especialidade-filter { flex: none; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.especialidade-filter[data-count]::after {
  content: attr(data-count); font-size: .72rem; font-weight: 700; line-height: 1;
  padding: .22rem .5rem; border-radius: 999px; background: rgba(0,0,0,.07); opacity: .8;
}
.especialidade-filter:hover[data-count]::after, .especialidade-filter.active[data-count]::after { background: rgba(255,255,255,.26); opacity: 1; }
.especialidade-filter.is-empty:not(.active) { opacity: .45; }
.especialidade-filter:focus-visible { outline: 3px solid #0af; outline-offset: 2px; }
@media (max-width: 1100px) {
  .especialidades-filters {
    scroll-padding-inline: 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
  }
}

/* ---------- Cartões com a fotografia da especialidade ---------- */
.especialidades-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.especialidade-card.is-hidden { display: none !important; }

.especialidades-grid .especialidade-card {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left;
  padding: 0; min-height: 0; overflow: hidden; cursor: pointer;
}
.especialidade-card:focus-visible { outline: 3px solid #0af; outline-offset: 3px; }

.esp-photo {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(110deg, #e6edf3 8%, #f5f8fb 18%, #e6edf3 33%); background-size: 220% 100%;
  animation: espShimmer 1.4s linear infinite;
}
.esp-photo.is-loaded { animation: none; background: #e9eff4; }
@keyframes espShimmer { to { background-position: -220% 0; } }
.esp-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.02); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.esp-photo.is-loaded img { opacity: 1; transform: none; }
.esp-photo::after {                                                  /* degradê leve no fundo da foto */
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(6,20,38,.38), rgba(6,20,38,0));
}
.especialidade-card:hover .esp-photo img { transform: scale(1.06); }

/* o ícone antigo passa a selo no canto da fotografia */
.especialidades-grid .especialidade-card .esp-photo > i.esp-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--color-primary, #005eb8); font-size: 1rem;
  box-shadow: 0 6px 16px rgba(6,20,38,.22); backdrop-filter: blur(6px);
}
.esp-photo.is-broken { display: grid; place-items: center; }
.esp-photo.is-broken > i.esp-badge { position: static; width: 64px; height: 64px; font-size: 1.5rem; }

.esp-body { display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: 14px 16px 16px; }
.especialidades-grid .especialidade-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; text-align: left; }
.esp-units { display: flex; flex-wrap: wrap; gap: .4rem; }
.esp-unit {
  display: inline-flex; align-items: center; padding: .22rem .6rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: #e8f3fc; color: #075a9a; border: 1px solid #cfe5f6;
}
.esp-unit-jat { background: #e7f7f1; color: #0b6a4e; border-color: #c6ebdd; }
.especialidades-grid .especialidade-card .especialidade-link { margin-top: auto; padding-top: .25rem; justify-content: flex-start; }

/* pesquisa: destaque e a linha "Serviço: …" quando o termo está num serviço */
mark.esp-mark { color: inherit; background: linear-gradient(transparent 52%, #bfe6ff 52%); padding: 0 1px; border-radius: 2px; }
.esp-hint { display: flex; gap: .45rem; align-items: flex-start; font-size: .8rem; line-height: 1.35; color: #4a5a6c; }
.esp-hint i { margin-top: .12rem; color: #0a7cc4; }
.esp-hint b { font-weight: 700; color: #2a3a4d; }

/* ---------- Modal: dados importantes primeiro, botão sem esconder conteúdo ---------- */
.modal-especialidade-text { display: flex; flex-direction: column; }
.modal-especialidade-text > * { order: 3; }
.modal-especialidade-text > h2 { order: 1; }
.modal-especialidade-text > .modal-disponibilidade { order: 2; margin-bottom: 1rem; }     /* "Disponível nas unidades" logo a seguir ao título */
.modal-especialidade-text > .modal-agendamento { order: 9; margin-top: auto; }

/* navegação entre especialidades (sobre a imagem do modal) */
.esp-nav {
  position: absolute; left: 16px; bottom: 16px; z-index: 5; display: inline-flex; align-items: center; gap: .35rem;
  padding: 5px; border-radius: 999px; background: rgba(6,20,38,.55); backdrop-filter: blur(8px); color: #fff;
}
.esp-nav-btn {
  width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; transition: background-color .2s;
}
.esp-nav-btn:hover { background: rgba(255,255,255,.3); }
.esp-nav-btn:focus-visible { outline: 3px solid #8fd8ff; outline-offset: 2px; }
.esp-nav-count { min-width: 56px; text-align: center; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.esp-nav [hidden], .esp-nav-btn[hidden], .esp-nav-count[hidden] { display: none; }

/* =========================================================
   TELEMÓVEL (até 768px)
   ========================================================= */
@media (max-width: 768px) {

  /* banner: fotografia visível em cima, texto por baixo */
  body:not(.home) .banner.especialidades-hero {
    --esp-strip: clamp(200px, 56vw, 320px);
    display: block; height: auto !important; min-height: 0 !important; max-height: none !important;
    background: linear-gradient(180deg, #0a2f52 0%, #071a30 100%) !important;
  }
  .especialidades-hero::before {
    content: ""; position: relative; display: block; height: var(--esp-strip);
    background: url("../../images/banner-especialidades.webp") 70% center / cover no-repeat;
  }
  .especialidades-hero::after, .especialidades-hero .banner-overlay { display: none; }
  body:not(.home) .especialidades-hero .banner-content { width: 100%; max-width: none; padding: 1.5rem 1.25rem 2.3rem; gap: .6rem; }
  .especialidades-hero-text { position: static; width: 100%; max-width: none; transform: none; padding: 0; }
  body:not(.home) .especialidades-hero .banner-text h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); margin-bottom: .8rem; text-shadow: none; }
  body:not(.home) .especialidades-hero .banner-text p { font-size: 1rem; line-height: 1.6; margin-bottom: 0; text-shadow: none; }

  /* categorias fixas, numa só linha */
  body .especialidades-filters-bar { top: var(--hdr, 64px); margin-top: 0; }
  .especialidades-filters { width: 100%; max-width: 100%; }
  .especialidade-filter { min-height: 44px; }

  /* cartões em duas colunas */
  .especialidades-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .esp-body { padding: 10px 12px 13px; gap: .4rem; }
  .especialidades-grid .especialidade-card h3 { font-size: .92rem; }
  .esp-photo > i.esp-badge { top: 8px; left: 8px; width: 32px; height: 32px; font-size: .85rem; }
  .esp-unit { font-size: .62rem; padding: .18rem .5rem; }

  /* modal */
  .esp-nav { left: 10px; bottom: 10px; }
  .esp-nav-btn { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .esp-photo img, .esp-photo { transition: none; animation: none; }
  .esp-photo img { opacity: 1; transform: none; }
}

/* =========================================================
   CLINICARE — Especialidades: acabamento visual dos cartões
   Carregar DEPOIS de especialidades-melhorias.css.
   ========================================================= */

/* o brilho e a linha do cartão antigo não combinam com a fotografia */
.especialidades-grid .especialidade-card::before,
.especialidades-grid .especialidade-card::after { display: none; }

/* cartão: cantos maiores, sombra suave, elevação ao passar o rato */
.especialidades-grid .especialidade-card {
  border-radius: 20px; background: #fff; border: 1px solid #e3ebf2;
  box-shadow: 0 2px 4px rgba(10,40,70,.04), 0 10px 26px -14px rgba(10,40,70,.2);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .3s;
}
.especialidades-grid .especialidade-card:hover {
  transform: translateY(-6px); border-color: #bcd8ee;
  box-shadow: 0 4px 8px rgba(10,40,70,.05), 0 26px 44px -18px rgba(0,91,153,.38);
}
.especialidades-grid .especialidade-card:active { transform: translateY(-2px) scale(.99); }

/* entrada em cascata (só os primeiros, para não atrasar) */
.especialidade-card.is-filtering { animation-delay: calc(min(var(--i, 0), 8) * 35ms); }

/* selo: roda/enche de cor ao passar o rato */
.especialidades-grid .especialidade-card .esp-photo > i.esp-badge { transition: background-color .3s, color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.especialidades-grid .especialidade-card:hover .esp-photo > i.esp-badge {
  background: var(--color-primary, #005b99); color: #fff; transform: scale(1.08) rotate(-4deg);
}

/* título: 2 linhas no máximo, para os cartões ficarem alinhados */
.especialidades-grid .especialidade-card h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em; color: #14283d; font-weight: 750; text-wrap: balance;
}
.especialidades-grid .especialidade-card:hover h3 { color: var(--color-primary, #005b99); }

/* nº de serviços ao lado das unidades */
.esp-count { margin-left: auto; font-size: .72rem; font-weight: 600; color: #6b7c8f; white-space: nowrap; align-self: center; }

/* link sempre visível: botão-seta à direita, com separador */
.especialidades-grid .especialidade-card .especialidade-link {
  opacity: 1; transform: none; width: 100%; justify-content: space-between;
  margin-top: auto; padding-top: .7rem; border-top: 1px solid #edf2f7;
  font-size: .76rem; letter-spacing: .02em; color: var(--color-primary, #005b99);
}
.especialidades-grid .especialidade-card .especialidade-link > i {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: #eaf4fc; color: var(--color-primary, #005b99); font-size: .7rem;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background-color .3s, color .3s;
}
.especialidades-grid .especialidade-card:hover .especialidade-link > i { background: var(--color-primary, #005b99); color: #fff; transform: translateX(3px); }

/* telemóvel: cartões compactos, sem a linha "N serviços" a apertar as unidades */
@media (max-width: 768px) {
  .especialidades-grid .especialidade-card { border-radius: 16px; }
  .especialidades-grid .especialidade-card:hover { transform: none; }
  .esp-count { display: none; }
  .especialidades-grid .especialidade-card .especialidade-link { padding-top: .5rem; font-size: .68rem; }
  .especialidades-grid .especialidade-card .especialidade-link > i { width: 24px; height: 24px; }
  .especialidades-grid .especialidade-card h3 { min-height: 2.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .especialidades-grid .especialidade-card, .especialidades-grid .especialidade-card .especialidade-link > i,
  .especialidades-grid .especialidade-card .esp-photo > i.esp-badge { transition: none; }
  .especialidades-grid .especialidade-card:hover { transform: none; }
}

/* =========================================================
   MODAL — serviços em separadores + deslizar para fechar
   (o CSS antigo só estilizava .modal-servicos-list/.modal-servico-items, que o JS não gera;
    aqui estilizam-se as classes que o especialidades.js realmente escreve)
   ========================================================= */

.modal-servicos-list { display: block; }

/* ---- separadores: controlo segmentado ---- */
.esp-tabs {
  display: flex; gap: 4px; margin: 0 0 1rem; padding: 5px; border-radius: 18px;
  background: #eef4fa; box-shadow: inset 0 1px 2px rgba(10,40,70,.08);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.esp-tabs::-webkit-scrollbar { display: none; }
.esp-tab {
  --cat-color: #0b7fc0;
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .35rem .9rem .35rem .45rem; margin: 0;
  border: 0; border-radius: 14px; background: transparent; color: #4a6075;
  font-family: inherit; font-weight: 700; font-size: .84rem; line-height: 1; letter-spacing: .01em;
  white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .3s, color .3s, box-shadow .3s, transform .2s;
}
.esp-tab-ico {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px;
  background: #e3edf6; background: color-mix(in srgb, var(--cat-color) 14%, #fff);
  color: var(--cat-color); font-size: .9rem; transition: background-color .3s, color .3s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.esp-tab-n {
  min-width: 22px; padding: .22rem .5rem; border-radius: 999px; background: #dde8f2; color: #4a6075;
  font-size: .68rem; font-weight: 800; text-align: center; transition: background-color .3s, color .3s;
}
.esp-tab:hover:not([aria-selected="true"]) { background: rgba(255,255,255,.75); color: #1d3349; }
.esp-tab:hover:not([aria-selected="true"]) .esp-tab-ico { transform: scale(1.08); }
.esp-tab[aria-selected="true"] {
  color: #fff; background: var(--cat-color);
  background: linear-gradient(135deg, var(--cat-color), color-mix(in srgb, var(--cat-color) 72%, #000));
  box-shadow: 0 10px 20px -10px var(--cat-color), 0 2px 4px rgba(10,40,70,.12);
}
.esp-tab[aria-selected="true"] .esp-tab-ico { background: rgba(255,255,255,.22); color: #fff; }
.esp-tab[aria-selected="true"] .esp-tab-n { background: rgba(255,255,255,.26); color: #fff; }
.esp-tab:active { transform: scale(.97); }
.esp-tab:focus-visible { outline: 3px solid #0af; outline-offset: 2px; }

/* ---- painel: cartão branco com linhas de serviço ---- */
.esp-panel[hidden] { display: none; }
.esp-panel, .modal-servico-grupo {
  --cat-tint: #eff6fb; --cat-tint: color-mix(in srgb, var(--cat-color, #0b7fc0) 8%, #fff);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
  padding: .85rem; border: 1px solid #e4edf5; border-left: 1px solid #e4edf5; border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(10,40,70,.04), 0 14px 28px -20px rgba(10,40,70,.28);
}
.esp-panel { animation: espPanelIn .35s cubic-bezier(.2,.7,.2,1) both; }
.esp-panel:hover, .modal-servico-grupo:hover { transform: none; box-shadow: 0 1px 2px rgba(10,40,70,.04), 0 14px 28px -20px rgba(10,40,70,.28); }
.esp-panel > .modal-servico-tipo { display: none; }          /* o nome já está no separador */
@keyframes espPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.modal-servico-item {
  display: flex; align-items: center; gap: .65rem; min-height: 46px; padding: .6rem .8rem;
  border-radius: 12px; background: var(--cat-tint);
  color: #213549; font-size: .86rem; font-weight: 600; line-height: 1.35;
  transition: background-color .25s, transform .25s;
}
.modal-servico-item:hover { transform: translateX(2px); }
.modal-servico-item > i {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cat-color, #0b7fc0); color: #fff; font-size: .62rem;
}
.modal-servico-item > i::before { font-size: .62rem; }

/* grupo sem separadores (um só tipo): título em "etiqueta" */
.modal-servico-tipo {
  grid-column: 1 / -1; justify-self: start; margin: 0 0 .15rem; padding: .3rem .7rem; border-radius: 999px;
  background: var(--cat-tint); color: var(--cat-color, #0b7fc0);
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* deslizar para fechar (só em ecrãs pequenos) */
.esp-grabber { display: none; }
@media (max-width: 900px) {
  .esp-panel, .modal-servico-grupo { grid-template-columns: 1fr; padding: .7rem; }
  .esp-tab { padding-right: .75rem; font-size: .8rem; }
  .esp-tab-n { display: none; }
  .modal-especialidade-content { touch-action: pan-y; will-change: transform; }
  .modal-especialidade-text { overscroll-behavior: contain; }
  .esp-grabber {
    display: block; position: absolute; top: 8px; left: 50%; z-index: 7; width: 44px; height: 5px; margin-left: -22px;
    border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 1px 4px rgba(6,20,38,.45); pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) { .esp-panel { animation: none; } .esp-tab { transition: none; } }

/* =========================================================
   BANNER NO TELEMÓVEL — fotografia inteira em cima, texto por baixo
   (o especialidades.css usa !important e um transform:translateY(-50%) que puxava o texto
    para cima da fotografia; aqui ganha-se com especificidade + !important)
   ========================================================= */
@media (max-width: 768px) {

  body:not(.home) .banner.especialidades-hero {
    display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    background: #0a2f52 !important;
  }
  /* fotografia: faixa em cima, a fundir-se suavemente com o azul do texto */
  body:not(.home) .banner.especialidades-hero::before {
    content: ""; display: block; position: relative; height: var(--esp-strip, clamp(200px, 56vw, 320px));
    background: linear-gradient(to bottom, rgba(10,47,82,0) 62%, #0a2f52 100%),
                url("../../images/banner-especialidades.webp") 70% center / cover no-repeat;
  }
  body:not(.home) .banner.especialidades-hero::after,
  body:not(.home) .banner.especialidades-hero .banner-overlay { display: none !important; }

  /* o bloco de texto passa a ocupar a largura toda, em fluxo normal (sem posição absoluta nem transform) */
  body:not(.home) .banner.especialidades-hero .banner-content.container {
    display: block !important; width: 100% !important; max-width: none !important; min-height: 0 !important;
    margin: 0 !important; padding: .2rem 1.25rem 2rem !important; pointer-events: auto;
  }
  body:not(.home) .banner.especialidades-hero .banner-content .banner-text.especialidades-hero-text {
    position: static !important; top: auto !important; left: auto !important; transform: none !important;
    width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
    display: block !important;
  }

  /* letras proporcionais ao ecrã */
  body:not(.home) .banner.especialidades-hero .especialidades-hero-kicker {
    margin: 0 0 .55rem !important; font-size: .72rem !important; letter-spacing: .18em !important;
  }
  body:not(.home) .banner.especialidades-hero .especialidades-hero-title {
    max-width: none !important; font-size: clamp(1.7rem, 7.4vw, 2.3rem) !important; line-height: 1.1 !important;
    letter-spacing: -.03em !important; text-shadow: none !important;
  }
  body:not(.home) .banner.especialidades-hero .especialidades-hero-title::after {
    width: 56px !important; height: 3px !important; margin: .85rem 0 .8rem !important;
  }
  body:not(.home) .banner.especialidades-hero .especialidades-hero-desc {
    max-width: 34rem !important; font-size: .95rem !important; line-height: 1.6 !important; text-shadow: none !important;
  }
}
@media (max-width: 360px) {
  body:not(.home) .banner.especialidades-hero .banner-content.container { padding: .1rem 1rem 1.6rem !important; }
  body:not(.home) .banner.especialidades-hero .especialidades-hero-title { font-size: 1.6rem !important; }
  body:not(.home) .banner.especialidades-hero .especialidades-hero-desc { font-size: .9rem !important; }
}


/* =========================================================
   MODAL — botão "Agendar Consulta" sempre visível dentro do modal
   O botão está FORA da zona que rola (.modal-especialidade-text) e a altura do modal
   usa dvh (altura realmente visível no telemóvel, sem a barra do navegador).
   ========================================================= */
.modal-especialidade { --esp-m: 1.5rem; padding: var(--esp-m); }

/* rodapé do modal: sempre presente, nunca depende do scroll */
.modal-especialidade-body > .modal-agendamento {
  position: static; flex: none; z-index: 6; margin: 0;
  padding: 1rem 2.6rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid #e6eef5;
  box-shadow: 0 -12px 26px -16px rgba(10,40,70,.2);
}
.modal-especialidade-body > .modal-especialidade-text { min-height: 0; padding-bottom: 1.3rem; }

/* computador: duas colunas — foto à esquerda; texto (rola) + botão (fixo) à direita */
@media (min-width: 1101px) {
  .modal-especialidade-content { height: min(680px, calc(100vh - 3rem)); height: min(680px, calc(100dvh - 3rem)); max-height: none; }
  .modal-especialidade-body { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  .modal-especialidade-body > .modal-especialidade-img  { grid-column: 1; grid-row: 1 / span 2; }
  .modal-especialidade-body > .modal-especialidade-text { grid-column: 2; grid-row: 1; }
  .modal-especialidade-body > .modal-agendamento        { grid-column: 2; grid-row: 2; }
}

/* tablet e telemóvel: foto em cima, texto no meio (rola), botão em baixo (fixo) */
@media (max-width: 1100px) {
  .modal-especialidade-content {
    display: flex; flex-direction: column; height: auto;
    max-height: calc(100vh - 2 * var(--esp-m)); max-height: calc(100dvh - 2 * var(--esp-m));
  }
  .modal-especialidade-body { display: contents; }
  .modal-especialidade-body > .modal-especialidade-img  { flex: none; }
  .modal-especialidade-body > .modal-especialidade-text { flex: 1 1 auto; max-height: none; }
  .modal-especialidade-body > .modal-agendamento { padding: .9rem 1.8rem calc(1.1rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 768px) {
  .modal-especialidade { --esp-m: .7rem; }
  .modal-especialidade-body > .modal-agendamento { padding: .8rem 1.3rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 480px) {
  .modal-especialidade { --esp-m: .5rem; }
  .modal-especialidade-body > .modal-agendamento { padding: .75rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  .modal-especialidade { --esp-m: .4rem; }
  .modal-especialidade-body > .modal-agendamento { padding: .7rem .8rem calc(.8rem + env(safe-area-inset-bottom, 0px)); }
}
/* ecrãs baixos (ex.: telemóvel na horizontal): foto mais baixa para sobrar espaço ao texto */
@media (max-width: 1100px) and (max-height: 600px) {
  .modal-especialidade-img { height: clamp(72px, 20dvh, 130px); }
}