/* sections.css: estilos das seções
   Nota: elementos com [data-depth] recebem `transform` via JS (Tarefa 3).
   Por isso, deslocamentos fixos deles usam a propriedade `translate`, que se compõe com `transform`.
   Tarefa 10: seções da página: hero, tratamentos, agendar, sobre e contato, rodapé.
   (A faixa "terceira idade" e as "Dúvidas frequentes" saíram; o código está em .superpowers/removed-sections.md.)
   Tarefa 11 (direção "Acolhedor"): fundo menta, círculos suaves no lugar das manchas desfocadas, anel azul-marinho
   decorativo, cantos maiores e nomes dos tratamentos em pílulas brancas.
   Tarefa 12: hero com foto grande de fundo; o hero ficou sem círculos e sem anel (o anel só aparece em Sobre).
   Tarefa 13: foto com pessoas, nítida e sem véu (máscara em degradê); cartões do hero viraram uma barra na base.
   Tarefa 14: textos novos do cliente; barra "Nossos diferenciais" com 5 itens; sem a citação em Sobre.
   Tarefa 15: fotos do cliente: exercício com faixa no hero (fundo translúcido no celular), sala de fisioterapia
   translúcida atrás dos cartões de agendamento e retrato da Dra. Deise em Sobre.
   Tarefa 16: só o celular (<600px, e a borda de cima da foto até 899px): foto do hero menos ampliada, ícones, retrato e
   espaçamentos menores, página mais curta. Tudo dentro de media queries max-width; o desktop (≥900px) não muda. */

/* ---------- Luz global que segue o ponteiro (--mx/--my, Tarefa 3) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(500px circle at var(--mx) var(--my), rgba(95, 220, 196, .25), transparent 60%);
}

/* --hero-overhang: quanto a barra de diferenciais avança abaixo do hero (Tarefa 14; só no desktop largo e alto) */
main { position: relative; z-index: 1; --hero-overhang: 0px; }

/* ---------- Cabeçalho de vidro ---------- */
.site-header {
  position: fixed;
  z-index: 50;
  top: .75rem;
  left: 50%;
  translate: -50% 0;
  width: min(1180px, 100% - 1.5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .35rem .5rem .35rem .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 40px rgba(18, 62, 58, .08);
}

/* Marca: emblema circular do cliente (sem recorte nem recoloração) + nome em texto real (Tarefa 9) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark {
  width: 64px;
  height: auto;
  flex: none;
  filter: drop-shadow(0 4px 10px rgba(13, 31, 60, .14));
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.brand__name { display: flex; flex-direction: column; min-width: 0; }
.brand__kicker {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--teal-deep);
}
.brand__title {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--ink);
}

.site-header__brand {
  flex: 0 1 auto;
  padding-right: .5rem;
  border-radius: 999px;
}
.site-header__brand:hover .brand__mark { transform: scale(1.04); }
.site-header__brand:hover .brand__title { color: var(--teal-deep); }

/* telas estreitas: emblema e nome menores, sempre visíveis ao lado do botão de menu */
@media (max-width: 859.98px) {
  .site-header__brand { gap: .55rem; }
  .brand__mark { width: 56px; }
  .brand__title { font-size: 1.1875rem; }
}
@media (max-width: 374.98px) {
  .site-header__brand { gap: .45rem; padding-right: 0; }
  .brand__mark { width: 50px; }
  .brand__title { font-size: 1.0625rem; }
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 .85rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.nav__link:hover { background: rgba(255, 255, 255, .85); color: var(--teal-deep); }
.nav__cta { padding-inline: 1.25rem 1.4rem; }

.nav__toggle {
  display: none;
  order: 3;
  margin-left: auto;
  width: 48px;
  height: 48px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  position: relative;
}
.nav__toggle-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}
.nav__toggle-bar:first-child { top: 19px; }
.nav__toggle-bar:last-child { top: 27px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-child { top: 23px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-child { top: 23px; transform: rotate(-45deg); }

@media (max-width: 1060px) and (min-width: 960px) {
  .nav { gap: .5rem; }
  .nav__link { padding: 0 .6rem; }
  .nav__cta { padding-inline: 1rem 1.1rem; }
}

/* Menu mobile: painel de vidro que abre com [aria-expanded="true"] no botão */
/* Tarefa 9: com o nome ao lado do emblema, o menu completo só cabe a partir de 960px */
@media (max-width: 959.98px) {
  .site-header { padding: .35rem .45rem; }
  .nav__toggle { display: block; }
  .nav {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding: .75rem;
    border-radius: 28px;
    /* opaco: backdrop-filter aninhado sob o cabeçalho não desfoca o fundo da página, e com .94 o título do hero
       aparecia por trás dos links (Tarefa 10) */
    background: #fbfefd;
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 60px rgba(13, 31, 60, .16);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition: opacity .25s ease, translate .25s ease, visibility 0s linear .25s;
  }
  .nav__toggle[aria-expanded="true"] ~ .nav {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity .25s ease, translate .25s ease, visibility 0s;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__link { display: flex; justify-content: space-between; padding: 0 1rem; font-size: 1.0625rem; min-height: 52px; }
  .nav__list li + li { border-top: 1px solid rgba(13, 31, 60, .06); }
  .nav__link::after {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--teal);
    border-right: 2px solid var(--teal);
    rotate: 45deg;
  }
  .nav__cta { width: 100%; min-height: 52px; }
}

/* ---------- Primeira tela ---------- */
/* Tarefa 13: foto com pessoas (fisioterapeuta e paciente).
   Desktop (≥900px): a foto ocupa os 2/3 direitos do hero, nítida, sem véu; uma máscara em degradê funde a borda esquerda
   e a de baixo ao fundo menta, e o texto fica sobre a parte clara à esquerda. Os diferenciais (Tarefa 14: 5 itens,
   sem o horário) formam uma barra de vidro na base, abaixo das pessoas.
   Celular e tablet (<900px), Tarefa 15: a foto vira um fundo translúcido atrás do texto, com véu menta (ver o bloco
   "celular e tablet" abaixo); a barra mostra só os títulos com ícone. */
.hero {
  display: grid;
  grid-template-rows: 1fr auto;
  row-gap: clamp(1.5rem, 3.5vh, 2.25rem);
  position: relative;
  /* corta só na horizontal: a sombra da barra continua suave sobre a seção seguinte (a foto é cortada por .hero__media) */
  overflow: hidden;
  overflow: clip visible;
  padding: clamp(6.5rem, 13vh, 8rem) 0 clamp(1.25rem, 3vh, 2rem);
  isolation: isolate;
}

.hero__media {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
/* imagem real no HTML (alt, fetchpriority, width/height), não background */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* luz do ponteiro também sobre a foto (a luz global do body fica atrás do hero); `fixed` usa as mesmas
   coordenadas de tela (--mx/--my) da luz global */
@media (hover: hover) and (pointer: fine) {
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(500px circle at var(--mx) var(--my), rgba(95, 220, 196, .2), transparent 60%) fixed;
  }
}

.hero__grid {
  display: grid;
  align-items: center;
}

.hero__copy { max-width: 36rem; }

.hero__title {
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
/* único acento de cor da página: reto (sem itálico), só no título principal */
.hero__title em {
  font-style: normal;
  font-weight: 500;
  color: var(--teal-deep);
}

.hero__lead {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32ch;
  margin-bottom: 1.75rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.hero__actions .btn { min-height: 54px; padding-inline: 1.5rem; font-size: 1.0625rem; }
.hero__actions .btn--primary { box-shadow: 0 10px 28px rgba(13, 31, 60, .22); }
.hero__actions .btn--ghost { background: rgba(255, 255, 255, .55); border-color: rgba(13, 31, 60, .85); }
.btn__icon { flex: none; }

.hero__place {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-soft);
  text-wrap: balance;
}
.hero__place svg { color: var(--teal-deep); flex: none; margin-top: .1em; }

/* Tarefa 14: barra de vidro "Nossos diferenciais" (5 itens; o horário saiu da barra).
   Cada item é uma grade: ícone + título na primeira linha; a descrição (só no desktop largo e alto) ocupa a linha de baixo. */
.hero__bar-wrap { position: relative; }
.hero__bar {
  border-radius: 28px;
  background: rgba(255, 255, 255, .8);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 24px 60px rgba(18, 62, 58, .12);
}
.hero__list { list-style: none; margin: 0; padding: 0; display: grid; }
.hero__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon title" "text text";
  align-items: center;
  align-content: start;
  column-gap: .7rem;
  line-height: 1.35;
}
.hero__item .hero__icon { grid-area: icon; }
.hero__item-title { grid-area: title; font-weight: 700; font-size: 1.0625rem; text-wrap: balance; }
.hero__item-text { grid-area: text; display: none; color: var(--ink-soft); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }

.hero__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  color: var(--teal-deep);
  background: var(--mint);
  border: 2px solid #fff;
}

/* ----- desktop ----- */
@media (min-width: 900px) {
  /* no máximo 85svh; o conteúdo manda nas telas baixas */
  .hero { min-height: min(85svh, max(50vw, 620px)); }

  /* A caixa da foto ocupa os 60% direitos. Tarefa 15: hero-faixa.jpg já tem a proporção da caixa (1597x1078 ≈ 60/40,5),
     então a imagem é dimensionada pela largura, inteira: as mãos (ombro, cotovelo, punho na faixa) ficam entre 15% e 78%
     da altura, fora dos degradês de cima e de baixo, e a partir de 50% da largura, longe do degradê da esquerda.
     Altura da caixa = a da imagem (40,5vw), limitada para terminar logo abaixo do topo da barra (--hero-bar-reserva).
     `top` desce a foto só nas telas de ~1000px, para a mão no ombro não ficar sob o cabeçalho. */
  .hero {
    --hero-media-w: 60%;
    --hero-media-h: 40.5vw;
    --hero-media-top: max(0px, 7.5rem - 8.15vw);
    --hero-bar-reserva: 4.4rem; /* barra só com os títulos; 7.8rem quando mostra as descrições */
  }
  /* Tarefa 14: o título novo tem 4 linhas; máximo de 56px (antes 60px), para "acompanhamento" terminar antes do
     cotovelo do paciente; nas telas baixas (ex.: 1366x657) ele também encolhe com a altura, para o hero caber em ~85svh */
  .hero__title { font-size: clamp(2.4rem, min(3.9vw, 7.8vh), 3.5rem); max-width: 9.5em; }
  .hero__media {
    position: absolute;
    z-index: -1;
    top: var(--hero-media-top);
    right: 0;
    width: var(--hero-media-w);
    height: min(var(--hero-media-h), 100% - var(--hero-media-top) - var(--hero-bar-reserva));
    /* bordas esquerda, de cima e de baixo fundidas ao menta; nada de véu sobre as pessoas */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, transparent 6%, rgba(0, 0, 0, .3) 12%, rgba(0, 0, 0, .85) 19%, #000 23%),
      linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, transparent 6%, rgba(0, 0, 0, .3) 12%, rgba(0, 0, 0, .85) 19%, #000 23%),
      linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
  /* +10px na largura: o parallax (data-depth="3", ±1,5px com o mouse e até ~15px para baixo na rolagem) nunca mostra
     a borda direita; em cima, a borda é o respiro sintético, já sob a máscara */
  .hero__photo {
    inset: 0 auto auto 0;
    width: calc(100% + 10px);
    height: auto;
    will-change: transform;
  }

  /* 5 diferenciais em 5 colunas: ícone + título (nas telas baixas ou estreitas, sem a descrição) */
  .hero__bar { padding: .85rem 1.25rem; }
  .hero__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem 1.5rem; }
  .hero__item-title { font-size: 1rem; }
}
/* 900–1199px: coluna de texto mais estreita e foto um pouco menor, para as pessoas não encostarem no título;
   na barra o ícone vai para cima do título (as colunas ficam estreitas para ícone e título lado a lado) */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .hero__copy { max-width: 32rem; }
  .hero__title { max-width: 8.6em; font-size: clamp(2.4rem, 4.5vw, 3.25rem); }
  /* os dois botões na mesma linha (o de WhatsApp tem o texto mais longo) */
  .hero__actions .btn { padding-inline: 1.1rem; }
  .hero__list { gap: 1rem 1.1rem; }
  .hero__item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "title"; row-gap: .5rem; align-items: start; }
  .hero__icon { width: 38px; height: 38px; }
  .hero__icon svg { width: 20px; height: 20px; }
}
/* Telas largas e altas: cabem as descrições. A barra fica mais alta, então ela avança sobre a borda de baixo do hero
   (--hero-overhang) em vez de esticar o hero além de ~85svh; "Tratamentos" ganha o mesmo tanto de respiro em cima.
   A foto termina logo abaixo do topo da barra (--hero-bar-reserva), sem as mãos ficarem sob ela. */
@media (min-width: 1200px) and (min-height: 800px) {
  main { --hero-overhang: 5.5rem; }
  .hero { --hero-bar-reserva: 6.5rem; padding-bottom: 0; }
  .hero__bar { padding: 1.2rem 1.4rem 1.3rem; }
  .hero__list { gap: 1rem 1.6rem; }
  .hero__item { row-gap: .6rem; }
  .hero__item-title { font-size: 1.0625rem; }
  .hero__item-text { display: block; }
}
.hero__bar-wrap { margin-bottom: calc(-1 * var(--hero-overhang)); }
.hero + .section { padding-top: calc(clamp(2.5rem, 6vw, 5rem) + var(--hero-overhang)); }

/* ----- celular e tablet ----- */
/* Tarefa 15: a foto vira um fundo translúcido atrás do texto (sem caixa nem cantos). Ela começa sob o cabeçalho
   (a mão no ombro aparece logo abaixo dele, no espaço antes do título) e se funde ao menta embaixo. Dois véus menta:
   um leve sobre a foto inteira (.hero__media::after) e um mais forte só atrás do texto (.hero__copy::before), em degradê:
   ~.6 nas duas linhas azul-marinho do título, ~.8 no trecho verde e ~.85 no subtítulo, botões e endereço
   (valores efetivos; contraste medido no pior ponto da foto). */
@media (max-width: 899.98px) {
  .hero {
    --hero-t: min(2.4rem, 10.2vw); /* corpo do título: também posiciona o degradê do véu atrás do texto */
    --hero-veil: 238, 248, 245;    /* = --bg */
    grid-template-rows: auto;
    row-gap: 0;
    padding: 9.25rem 0 1.25rem;
  }
  .hero__media {
    position: absolute;
    z-index: -1;
    inset: 4.5rem 0 0;
    /* Tarefa 16: o topo surge devagar (antes em 2rem): sem a faixa acinzentada logo abaixo do cabeçalho de vidro */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .12) 1.5rem, rgba(0, 0, 0, .6) 3.5rem, #000 5.5rem, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .12) 1.5rem, rgba(0, 0, 0, .6) 3.5rem, #000 5.5rem, #000 82%, transparent 100%);
  }
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(var(--hero-veil), .36);
  }
  /* mãos e faixa ficam no lado direito do arquivo */
  .hero__photo { object-position: 81% 0; }

  .hero__copy { position: relative; max-width: 40rem; }
  .hero__copy::before {
    --pad: 1.25rem;
    --l2: calc(var(--pad) + 2.12 * var(--hero-t)); /* fim da 2ª linha do título (line-height 1.06) */
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(-1 * var(--pad)) -1.25rem;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(var(--hero-veil), 0) 0,
      rgba(var(--hero-veil), .38) var(--pad),
      rgba(var(--hero-veil), .38) calc(var(--l2) - .5 * var(--hero-t)),
      rgba(var(--hero-veil), .72) calc(var(--l2) - .12 * var(--hero-t)),
      rgba(var(--hero-veil), .78) calc(var(--l2) + 2.2 * var(--hero-t)),
      rgba(var(--hero-veil), .78) calc(100% - var(--pad)),
      rgba(var(--hero-veil), 0) 100%);
  }
  .hero__title { font-size: var(--hero-t); max-width: 9.5em; margin-bottom: .8rem; }
  .hero__lead { margin-bottom: 1.25rem; }
  .hero__actions { margin-bottom: 1rem; }

  /* só os títulos com ícone, em lista compacta (sem as descrições) */
  .hero__bar-wrap { margin-top: 1.15rem; }
  .hero__bar { padding: .6rem .8rem; border-radius: 24px; }
  .hero__list { gap: .3rem; }
  .hero__item { column-gap: .65rem; }
  .hero__item-title { font-size: 1rem; }
  .hero__icon { width: 34px; height: 34px; }
  .hero__icon svg { width: 18px; height: 18px; }
}
@media (max-width: 599.98px) {
  .hero__actions .btn { flex: 1 1 100%; padding-inline: 1rem; }
}
/* Tarefa 16, celular (<600px): foto menos ampliada e hero mais curto.
   A foto (recorte aberto: fisioterapeuta, braço, faixa e parte da sala) aparece inteira na largura da tela, no alto do
   hero, atrás do título; surge devagar abaixo do cabeçalho e se funde ao menta antes dos botões.
   Título um pouco menor (34px em 375), menos respiro entre cabeçalho e título, e diferenciais em lista mais compacta. */
@media (max-width: 599.98px) {
  .hero {
    --hero-t: min(2.125rem, 9.1vw);
    padding: 6.75rem 0 1rem;
  }
  .hero__media {
    inset: 4.75rem 0 auto;
    aspect-ratio: 860 / 833;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .3) 1.25rem, rgba(0, 0, 0, .75) 2.25rem, #000 3.25rem, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .3) 1.25rem, rgba(0, 0, 0, .75) 2.25rem, #000 3.25rem, #000 60%, transparent 100%);
  }
  /* véu leve na foto inteira (.36 → .22: a cena aparece mais) e véu do texto um pouco mais forte no trecho verde,
     no subtítulo e abaixo (≥3:1 no título e ≥4,5:1 no subtítulo, medidos no pior ponto) */
  .hero__media::after { background: rgba(var(--hero-veil), .22); }
  .hero__copy::before {
    background: linear-gradient(to bottom,
      rgba(var(--hero-veil), 0) 0,
      rgba(var(--hero-veil), .38) var(--pad),
      rgba(var(--hero-veil), .38) calc(var(--l2) - .5 * var(--hero-t)),
      rgba(var(--hero-veil), .78) calc(var(--l2) - .12 * var(--hero-t)),
      rgba(var(--hero-veil), .84) calc(var(--l2) + 2.2 * var(--hero-t)),
      rgba(var(--hero-veil), .84) calc(100% - var(--pad)),
      rgba(var(--hero-veil), 0) 100%);
  }
  .hero__photo { object-position: 50% 0; }
  .hero__title { margin-bottom: .7rem; }
  .hero__lead { margin-bottom: 1rem; }
  .hero__actions { gap: .6rem; margin-bottom: .85rem; }
  .hero__actions .btn { min-height: 52px; }

  .hero__bar-wrap { margin-top: 1rem; }
  .hero__bar { padding: .5rem .75rem; border-radius: 22px; }
  .hero__list { gap: .2rem; }
  .hero__item { column-gap: .6rem; }
  .hero__icon { width: 28px; height: 28px; border-width: 1.5px; }
  .hero__icon svg { width: 16px; height: 16px; }
}
/* celulares grandes (480–599px): a foto fica com 28rem, à direita, com a borda esquerda fundida ao menta
   (na largura toda ela voltaria a parecer ampliada) */
@media (min-width: 480px) and (max-width: 599.98px) {
  .hero__media {
    left: auto;
    width: 28rem;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .3) 1.25rem, rgba(0, 0, 0, .75) 2.25rem, #000 3.25rem, #000 60%, transparent 100%),
      linear-gradient(to right, transparent 0, #000 30%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .3) 1.25rem, rgba(0, 0, 0, .75) 2.25rem, #000 3.25rem, #000 60%, transparent 100%),
      linear-gradient(to right, transparent 0, #000 30%);
    mask-composite: intersect;
  }
}
/* tablet: o texto ocupa a metade esquerda; à direita a foto aparece mais (véu do texto some em degradê);
   os diferenciais em 3 colunas (3 + 2) */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero { --hero-t: clamp(2.4rem, 5.2vw, 4.25rem); }
  .hero__photo { object-position: 100% 0; }
  .hero__copy { max-width: 34rem; }
  .hero__copy::before {
    right: -9rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 11rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 11rem), transparent);
  }
  .hero__bar { padding: .8rem 1rem; }
  .hero__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo { will-change: auto; }
}

/* ---------- Cabeçalho de seção (reutilizável) ---------- */
.section-head {
  display: grid;
  gap: .75rem 3rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.section-title {
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.section-head__lead {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1.0625rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .section-head:not(.section-head--solo) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }
  .section-head__lead { justify-self: end; padding-bottom: .25rem; }
}
/* Tarefa 16, celular: seções e cabeçalhos de seção com menos respiro (40px → 28px nas bordas das seções);
   títulos de seção com 26px (antes 28px), abaixo do título do hero (34px) e acima dos títulos dos cartões (~21px) */
@media (max-width: 599.98px) {
  .section,
  .hero + .section { padding-block: 1.75rem; }
  .section-head { gap: .5rem; margin-bottom: 1.1rem; }
  .section-title { font-size: 1.625rem; }
  .section-head__lead { line-height: 1.5; }
}

/* ---------- Tratamentos ---------- */
.treatments { overflow-x: clip; }

/* Tarefa 11: círculos suaves de fundo em todas as seções (mesmo vocabulário do hero), sem blur.
   Um círculo grande no elemento __glow e um menor e mais claro no ::before da seção.
   As seções têm overflow-x: clip, então os círculos podem sair pela borda sem criar rolagem. */
.treatments__glow,
.booking__glow,
.about__glow,
.treatments::before,
.booking::before,
.about::before {
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--mint) 0 93%, rgba(191, 238, 226, 0) 100%);
  pointer-events: none;
}
.treatments::before,
.booking::before,
.about::before {
  content: "";
  background: radial-gradient(circle closest-side, var(--mint-soft) 0 92%, rgba(214, 244, 235, 0) 100%);
}
/* tratamentos: grande à esquerda, atrás dos cartões; o menor à direita, na altura do título */
.treatments__glow { width: clamp(320px, 42vw, 600px); top: 26%; left: -14%; }
/* Tarefa 12: começa um pouco abaixo do topo (antes -2%): o hero, agora opaco (foto), cortava o topo do círculo */
.treatments::before { width: clamp(200px, 24vw, 340px); top: 4%; right: -7%; }

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1080px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  --cx: 50%;
  --cy: 0%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 1rem .9rem 1.25rem;
  border-radius: 28px;
  /* branco translúcido sobre o menta: o nome em pílula branca se destaca do cartão */
  background: rgba(255, 255, 255, .46);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 14px 40px rgba(18, 62, 58, .07);
  transition: transform .25s ease-out, box-shadow .3s ease, background .3s ease;
}

/* luz interna que segue o cursor (--cx/--cy via initCardGlow) */
.card::before,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.card::before {
  z-index: -1;
  background: radial-gradient(300px circle at var(--cx) var(--cy), rgba(95, 220, 196, .28), rgba(169, 196, 245, .12) 45%, transparent 70%);
}
/* borda iluminada perto do cursor */
.card::after {
  padding: 1px;
  background: radial-gradient(200px circle at var(--cx) var(--cy), rgba(26, 168, 143, .75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.card:hover {
  background: rgba(255, 255, 255, .66);
  box-shadow:
    0 1px 0 #fff inset,
    0 24px 56px rgba(18, 62, 58, .12);
}
.card:hover::before,
.card:hover::after { opacity: 1; }

/* revelação usa `translate` para não disputar `transform` com o tilt */
.card.reveal {
  transform: none;
  transition:
    opacity .8s ease calc(var(--i, 0) * 60ms),
    translate .8s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 60ms),
    transform .25s ease-out,
    box-shadow .3s ease,
    background .3s ease;
}
.js .card.reveal { translate: 0 24px; }
.card.reveal.is-visible { translate: 0 0; }

/* Tarefa 11: o nome do tratamento vira uma pílula branca, com o ícone pequeno ao lado (sem numeração) */
.card__title {
  display: inline-flex;
  align-self: flex-start;
  align-items: flex-start;
  gap: .45rem;
  max-width: 100%;
  /* medidas para "Incontinência Urinária" caber numa linha no cartão de 273px (4 colunas a partir de 1180px) */
  padding: .4rem .8rem .4rem .55rem;
  border-radius: 1.2rem;
  background: #fff;
  border: 1px solid rgba(11, 107, 91, .14);
  box-shadow: 0 4px 14px rgba(18, 62, 58, .06);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.25;
  margin: 0 0 .7rem;
}
.card__glyph {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .08em;
  color: var(--teal-deep);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .card__glyph { transform: translateY(-1px) scale(1.08); }
.card__text {
  margin: 0;
  padding-inline: .2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .card__text { font-size: 1.0625rem; }
}
.card__link {
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.card__link:hover { text-decoration-thickness: 2px; }

/* Tarefa 10, celular: os 8 tratamentos viram uma lista num único painel de vidro, separada por linhas finas.
   Oito cartões soltos empilhados somavam ~1000px de rolagem; o painel lê como um índice e economiza ~150px. */
@media (max-width: 599.98px) {
  .cards {
    gap: 0;
    padding: .35rem 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 18px 48px rgba(18, 62, 58, .08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .card,
  .card:hover {
    padding: .4rem .8rem .5rem; /* Tarefa 16: antes .5rem .9rem .65rem */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card + .card { border-top: 1px solid rgba(13, 31, 60, .07); }
  .card::before, .card::after { display: none; }
  /* pílula mais baixa na lista do celular: mesma altura total de antes */
  /* Tarefa 16: pílula e ícone menores (ícone de 20px → 17px), texto um pouco mais largo e entrelinha 1.45 */
  .card__title { gap: .4rem; font-size: 1.0625rem; line-height: 1.2; padding: .12rem .8rem .12rem .5rem; margin-bottom: .2rem; box-shadow: none; }
  .card__glyph { width: 17px; height: 17px; margin-top: .1em; }
  .card__text { padding-inline: .15rem; line-height: 1.45; }
  .card__link { padding-block: 2px; } /* área de toque do link em 2 linhas: 44px → 48px, sem mudar o layout */
  .cards { padding-block: .25rem; }
  .js .card.reveal { translate: 0 12px; }
  .card.reveal.is-visible { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js .card.reveal { translate: none; }
  .card::before, .card::after { display: none; }
}

/* ---------- Agendar online (Doctoralia + WhatsApp) ---------- */
.booking { overflow-x: clip; }
/* Tarefa 10/11: os círculos alternam entre as seções (tratamentos à esquerda, agendar à direita, sobre à esquerda) */
.booking__glow { width: clamp(320px, 44vw, 620px); top: 20%; right: -13%; }
.booking::before { width: clamp(180px, 22vw, 300px); bottom: -4%; left: -6%; }

.booking__grid { position: relative; display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .booking__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.5rem; }
}
/* Tarefa 15: a sala de fisioterapia, translúcida, atrás dos cartões de vidro. Decorativa (alt="" e aria-hidden),
   fora do fluxo (sem salto de layout) e com lazy-load. Ocupa a largura da tela e se funde ao menta nas quatro bordas;
   a máscara de cima termina antes do título da seção. Com opacidade baixa, o texto dos cartões continua AA. */
.booking__room {
  position: absolute;
  z-index: -1;
  top: -3.5rem;
  left: 50%;
  width: 100vw;
  max-width: none;
  height: calc(100% + 7.5rem);
  translate: -50% 0;
  object-fit: cover;
  object-position: 60% 62%;
  opacity: .28;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 24%, #000 72%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
/* celular: os cartões ficam empilhados (bloco alto e estreito); a foto fica mais discreta e centrada na maca */
@media (max-width: 899.98px) {
  .booking__room { opacity: .17; object-position: 78% 55%; }
}

.booking__card,
.booking__side {
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border-radius: 32px;
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-card);
}
.booking__side { border: 1px solid var(--glass-border); }

.booking__card-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.booking__badge {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  color: var(--teal-deep);
  background: var(--mint);
  border: 2px solid #fff;
  box-shadow: 0 6px 16px rgba(26, 168, 143, .14);
}
.booking__title { font-size: clamp(1.3rem, 1.9vw, 1.5rem); font-weight: 500; margin: 0; text-wrap: balance; }
.booking__text { margin: .15rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }

/* altura reservada (o widget mede 252px): evita salto de layout quando o iframe do Doctoralia entra */
.booking__widget {
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 24px;
  text-align: center;
  background: rgba(255, 255, 255, .6);
  border: 1px dashed rgba(11, 107, 91, .2);
}
.booking__widget[data-state="ready"] { display: block; padding: 0; background: transparent; border: 0; }
.booking__widget iframe { display: block; width: 100%; border: 0; }

.booking__status { display: none; margin: 0; max-width: 34ch; color: var(--ink-soft); }
.booking__status--loading { align-items: center; gap: .65rem; font-weight: 500; }
/* sem JS, antes de carregar ou se a agenda falhar: texto + link do perfil */
html:not(.js) .booking__status--fallback,
.booking__widget[data-state="idle"] .booking__status--fallback,
.booking__widget[data-state="fallback"] .booking__status--fallback { display: block; }
.js .booking__widget[data-state="loading"] .booking__status--loading { display: inline-flex; }
.js .booking__widget[data-state="loading"] .zl-facility-url { display: none; }

.booking__spinner {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(11, 107, 91, .2);
  border-top-color: var(--teal-deep);
  animation: booking-spin .8s linear infinite;
}
@keyframes booking-spin { to { transform: rotate(360deg); } }

/* o <a> oficial do widget, estilizado como botão enquanto é o fallback */
.booking__widget .zl-facility-url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font: 700 1rem/1.2 var(--font-body);
  color: var(--ink);
  background: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.booking__widget .zl-facility-url::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.booking__widget .zl-facility-url:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 31, 60, .18); }

.booking__side { display: flex; flex-direction: column; }
.booking__side.reveal { transition-delay: .1s; }
.booking__side-text { color: var(--ink-soft); margin-bottom: 1.25rem; }
.booking__side .btn { margin-top: auto; }
.booking__side .btn { width: 100%; min-height: 54px; box-shadow: 0 10px 28px rgba(13, 31, 60, .2); }
.booking__phone { margin: .5rem 0 0; font-size: 1rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.1rem; }
.booking__phone-label { flex-basis: 100%; }
@media (min-width: 600px) { .booking__phone-label { flex-basis: auto; } }
/* Tarefa 10: o telefone é alvo de toque de 48px (antes 21px de altura) */
.booking__phone a { display: inline-flex; align-items: center; min-height: 48px; color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.booking__phone a:hover { color: var(--teal-deep); }
.booking__hours { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
/* Tarefa 14: botão para o perfil completo no Doctoralia, abaixo da agenda. Quando a agenda falha (ou sem JS),
   o próprio link do widget já leva ao perfil: o botão some para não repetir o mesmo destino. */
.booking__more { display: flex; width: fit-content; margin: 1rem auto 0; min-height: 52px; background: rgba(255, 255, 255, .7); }
.booking__card:has(.booking__widget[data-state="fallback"]) .booking__more,
html:not(.js) .booking__more { display: none; }
@media (max-width: 599.98px) {
  .booking__side-text { margin-bottom: 1rem; }
  /* Tarefa 14: o texto do cartão voltou a aparecer no celular (o texto novo não repete o da seção) */
  .booking__card-head { align-items: flex-start; margin-bottom: .85rem; }
  .booking__more { width: 100%; }
  /* Tarefa 16: cartões com menos preenchimento, selo do ícone menor (48px → 38px) e o botão de WhatsApp numa linha só */
  .booking__grid { gap: 1rem; }
  .booking__card,
  .booking__side { padding: 1rem; border-radius: 28px; }
  .booking__card-head { gap: .7rem; margin-bottom: .75rem; }
  .booking__side .booking__card-head { align-items: center; }
  .booking__badge { width: 38px; height: 38px; border-width: 1.5px; box-shadow: 0 4px 12px rgba(26, 168, 143, .12); }
  .booking__badge svg { width: 18px; height: 18px; }
  .booking__side-text { margin-bottom: .9rem; }
  .booking__side .btn { min-height: 52px; padding-inline: 1rem; }
  .booking__more { margin-top: .85rem; }
  .booking__phone { margin-top: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .booking__spinner { display: none; }
}

/* ---------- Âncoras, skip link e utilitários (Tarefa 6) ---------- */
/* Tarefa 7: o cabeçalho fixo não cobre o alvo de âncoras nem o elemento que recebe foco pelo teclado.
   Tarefa 8: as seções sobem 2rem a mais, para o título não ficar longe do cabeçalho. */
html { scroll-padding-top: 6.5rem; }
main > section[id] { scroll-margin-top: -2rem; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .8rem 1.2rem;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  translate: 0 -200%;
  transition: translate .2s ease;
}
.skip-link:focus { translate: 0 0; }

/* ---------- Sobre e contato ---------- */
.about { overflow-x: clip; }
.about__glow { width: clamp(340px, 46vw, 640px); top: 10%; left: -15%; }
.about::before { width: clamp(220px, 28vw, 400px); bottom: 6%; right: -9%; }

/* Tarefa 11: segundo (e último) uso do anel azul-marinho, a partir de 760px: sai por trás do canto superior
   direito do cartão da Dra. Deise, ao lado da foto da porta (onde a placa mostra o emblema circular).
   No celular não aparece: ali o título ocupa a largura toda e o anel competiria com ele. */
.about__ring { display: none; }
@media (min-width: 760px) {
  .about__ring {
    --ring: clamp(190px, 17vw, 260px);
    display: block;
    position: absolute;
    z-index: -1;
    top: calc(var(--ring) * .18);
    /* só a borda do anel passa por trás do cartão (a parte desfocada fica pequena); o resto sai pela direita */
    right: calc(max(1.25rem, (100% - 1140px) / 2) - var(--ring) * .75);
    width: var(--ring);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 11px solid var(--ink);
    pointer-events: none;
  }
}

/* Tarefa 9: cartão da Dra. Deise com a foto real da porta (sala 617) como protagonista;
   contato (telefones, horários e mapa) logo abaixo. Alturas naturais: nenhum cartão estica sem conteúdo. */
.about__grid { display: grid; gap: 1.25rem; align-items: start; }

.about__bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body" "cta" "place";
  --bio-pad: clamp(1.4rem, 3vw, 2.25rem);
  padding: var(--bio-pad);
  border-radius: 32px;
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-card);
}
.about__head { grid-area: head; }
.about__body { grid-area: body; margin-top: 1.35rem; }
.about__cta { grid-area: cta; }
.about__place { grid-area: place; }

/* a partir de 760px: texto à esquerda, foto da porta à direita, na altura do texto */
@media (min-width: 760px) {
  .about__bio {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head place" "body place" "cta place";
    column-gap: clamp(1.5rem, 4vw, 3rem);
  }
}

.about__head { display: flex; align-items: center; gap: 1.25rem; }
/* Tarefa 15: retrato da Dra. Deise (foto real), redondo, com borda branca e um aro fino verde-água em volta */
.about__portrait {
  flex: none;
  width: 132px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #e9e5df;
  box-shadow: 0 0 0 1px rgba(11, 107, 91, .18), 0 14px 32px rgba(13, 31, 60, .16);
}
.about__portrait:empty { display: none; }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599.98px) {
  /* Tarefa 16: retrato de 112px → 82px; nome e cargo ganham largura (cargo em 3 linhas, não 4) */
  .about__head { gap: .8rem; }
  .about__portrait { width: 82px; border-width: 3px; box-shadow: 0 0 0 1px rgba(11, 107, 91, .18), 0 10px 24px rgba(13, 31, 60, .14); }
}
/* telas de 360px: retrato de 74px e cartão com 16px de preenchimento (ver .about__bio abaixo), para o nome caber
   numa linha */
@media (max-width: 374.98px) {
  .about__head { gap: .65rem; }
  .about__portrait { width: 74px; }
}

.about__name {
  font-size: clamp(1.5rem, 2.4vw, 1.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .2rem;
}
.about__role { margin: 0; font-size: 1.0625rem; color: var(--ink-soft); }
.about__crefito:empty { display: none; }
.about__crefito::before { content: " · "; }

.about__text { color: var(--ink-soft); max-width: 60ch; }
.about__text:first-child { color: var(--ink); font-size: clamp(1.0625rem, 1.3vw, 1.125rem); }
.about__body .about__text:last-child { margin-bottom: 0; }

.about__cta { justify-self: start; min-height: 52px; margin-top: 1.4rem; }

/* foto da porta + legenda com o endereço */
.about__place {
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0 0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(18, 62, 58, .12);
}
.about__photo {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  background: #e9e5df;
}
.about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 24%; /* placa de vidro e número 617 no enquadramento */
}
@media (min-width: 760px) {
  .about__place { margin: 0; }
  /* a foto ocupa a altura que sobra ao lado do texto (mínimo de 260px) */
  .about__photo { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
}

/* legenda: título e "Como chegar" na mesma linha quando cabem; endereço logo abaixo */
.about__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  padding: .55rem 1.25rem 1rem;
}
.about__caption-title {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  padding-block: .4rem;
}
.about__caption .contact__route { order: 2; }
.about__address {
  order: 3;
  flex-basis: 100%;
  font-style: normal;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.contact__route {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 48px;
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contact__route:hover { text-decoration-thickness: 2px; }

@media (max-width: 599.98px) {
  .about__cta { width: 100%; }
  /* Tarefa 10: a foto da porta encosta nas bordas do cartão (sem cartão dentro de cartão), mais larga e mais baixa;
     legenda alinhada ao texto do cartão, com título e "Como chegar" na mesma linha */
  .about__place {
    margin: 1.15rem calc(-1 * var(--bio-pad)) calc(-1 * var(--bio-pad));
    border-radius: 0 0 27px 27px; /* 28px do cartão (Tarefa 16) menos a borda de 1px */
    box-shadow: none;
    border-top: 1px solid rgba(13, 31, 60, .06);
  }
  .about__photo { aspect-ratio: 16 / 10; border-radius: 0; }
  .about__caption { column-gap: .75rem; padding: .45rem var(--bio-pad) 1.1rem; }
  .about__caption-title { font-size: 1.125rem; }
  .about__address { font-size: 1rem; }
  /* Tarefa 16: cartão mais enxuto: menos preenchimento, nome e cargo menores, foto da porta mais baixa (2:1; a placa e o 617 continuam no quadro) */
  .about__grid { gap: 1rem; }
  .about__bio { --bio-pad: 1.15rem; border-radius: 28px; }
  .about__name { font-size: 1.3rem; margin-bottom: .15rem; }
  .about__role { font-size: 1rem; line-height: 1.45; }
  .about__body { margin-top: 1rem; }
  /* texto corrido com 16px (o primeiro parágrafo continua com 17px, em azul-marinho) */
  .about__text { font-size: 1rem; line-height: 1.5; }
  .about__text:first-child { font-size: 1.0625rem; }
  .about__cta { margin-top: 1.15rem; }
  .about__photo { aspect-ratio: 2 / 1; }
  .about__caption { padding: .3rem var(--bio-pad) .9rem; }
}
@media (max-width: 374.98px) {
  .about__bio { --bio-pad: 1rem; }
}

/* contato: telefones e horários + mapa (lado a lado a partir de 960px) */
.contact {
  display: grid;
  gap: .75rem 1.5rem;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border-radius: 32px;
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-card);
}
.contact.reveal { transition-delay: .1s; }
@media (min-width: 960px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; }
}

.contact__grid { display: grid; column-gap: 1.5rem; padding-inline: .35rem; align-content: start; }
.contact__block { padding: .25rem 0 1rem; }
.contact__block + .contact__block { padding-top: 1rem; border-top: 1px solid rgba(13, 31, 60, .08); }
@media (min-width: 600px) and (max-width: 959.98px) {
  .contact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__block + .contact__block { padding-top: .25rem; border-top: 0; }
}

.contact__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.contact__label svg { flex: none; color: var(--teal-deep); }

.phones { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.phone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem .375rem;
}
.phone__num {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.phone__num:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 4px; }
.phone__wa {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 48px;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: none;
  background: rgba(95, 220, 196, .18);
  border: 1px solid rgba(26, 168, 143, .3);
  transition: background .2s, color .2s;
}
.phone__wa:hover { background: var(--teal-deep); color: #fff; }
/* Tarefa 10: em 360px número e botão cabem na mesma linha (antes o botão caía para a linha de baixo) */
@media (max-width: 374.98px) {
  .phone__wa { padding-inline: .65rem; gap: .3rem; }
}

.hours { margin: 0; display: grid; gap: .2rem; }
.hours__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .15rem 1rem;
  padding: .35rem 0;
}
.hours__row + .hours__row { border-top: 1px dashed rgba(13, 31, 60, .12); }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.contact__note { margin: .5rem 0 0; font-size: 1rem; color: var(--ink-soft); }
/* Tarefa 10, celular: dia e horário na mesma linha (antes quebravam em duas, desalinhando a tabela) */
@media (max-width: 599.98px) {
  .hours__row { column-gap: .75rem; font-size: 1rem; padding-block: .25rem; }
  /* Tarefa 16: cartão de contato mais enxuto */
  .contact { gap: .6rem; padding: .9rem; border-radius: 28px; }
  .contact__block { padding: .15rem 0 .75rem; }
  .contact__block + .contact__block { padding-top: .75rem; }
  .contact__label { margin-bottom: .35rem; }
  .contact__label svg { width: 17px; height: 17px; }
  .contact__note { margin-top: .35rem; }
}

.contact__map { border-radius: 24px; }
.contact__map iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  border-radius: 24px;
  background: #e3efeb;
}
/* ao lado dos contatos, o mapa acompanha a altura deles */
@media (min-width: 960px) {
  .contact__map { display: flex; }
  .contact__map iframe { height: auto; min-height: 240px; }
}
@media (max-width: 599.98px) {
  .contact__map iframe { height: 180px; } /* Tarefa 16: antes 200px */
}

/* ---------- Rodapé enxuto ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 1.25rem 0;
  /* Tarefa 11: faixa branca translúcida com cantos superiores arredondados, sobre o menta */
  border-radius: 36px 36px 0 0;
  background: rgba(255, 255, 255, .62);
  border-top: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 -12px 40px rgba(18, 62, 58, .05);
  color: var(--ink-soft);
  font-size: 1rem;
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
}
/* marca no rodapé: mesmo padrão do cabeçalho, um pouco menor */
.brand--footer { gap: .6rem; flex: none; }
.brand--footer .brand__mark { width: 52px; filter: none; }
.brand--footer .brand__title { font-size: 1.125rem; }
.brand--footer .brand__kicker { font-size: .875rem; }
.site-footer__info { margin: 0; flex: 1 1 14rem; line-height: 1.5; }
.site-footer__links { margin: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(13, 31, 60, .25);
  text-underline-offset: 3px;
}
.site-footer a:hover { color: var(--teal-deep); text-decoration-color: currentColor; }
/* Tarefa 16, celular: rodapé mais baixo (emblema menor, menos respiro); os links continuam com 48px de altura */
@media (max-width: 599.98px) {
  .site-footer { padding: .9rem 0 1rem; border-radius: 28px 28px 0 0; }
  .site-footer__row { row-gap: .3rem; }
  .brand--footer .brand__mark { width: 44px; }
  .site-footer__links { column-gap: 1rem; }
}
/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed;
  z-index: 60;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  background: #25d366;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 12px 30px rgba(13, 31, 60, .25);
  transition: transform .25s ease, opacity .25s ease, visibility 0s, box-shadow .25s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 4px #fff, 0 16px 36px rgba(37, 211, 102, .4); }
.wa-float:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.wa-float--hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
}
@media (min-width: 860px) {
  .wa-float { right: 1.5rem; bottom: 1.5rem; }
}

/* ---------- Sem JavaScript (Tarefa 7) ---------- */
/* o botão de menu depende de JS: sem ele, some */
html:not(.js) .nav__toggle { display: none; }

/* ---------- Ajustes finais ---------- */
.nowrap { white-space: nowrap; }
/* o foco entra no mapa (iframe de outro domínio): a moldura mostra onde ele está */
.contact__map:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }