/* ───────────────────────────────────────────────────────────────────────────
   Base do site — paleta, tipografia, cabeçalho, rodapé e botões.

   Vive num arquivo só porque agora há mais de uma página. Enquanto era uma, a
   folha morava dentro do HTML e isso era o certo; com três, a paleta repetida
   em três lugares garante que a próxima troca de cor fique pela metade — e o
   arquivo esquecido é sempre o que ninguém abriu naquele dia.

   Aqui entra só o que TODA página usa. O que é de uma página só continua no
   <style> dela: espalhar tudo aqui traria de volta o mesmo problema pelo
   avesso, com cada página carregando o estilo das outras.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Tirada do retrato: o blazer rosa-pó, o bege quente do fundo e o dourado
     da luz atrás dela. O verde do sistema não vem para cá — lá dentro ele
     marca segurança clínica, aqui a página é a pessoa. */
  --verde: #8f5754;          /* rosa profundo: botões, acentos, texto de destaque */
  --verde-fundo: #4d332f;    /* rosewood escuro da seção invertida */
  --verde-claro: #f0dbd5;    /* rosa-pó do blazer */
  --osso: #faf5f1;
  --osso-fundo: #f2e7e0;
  --tinta: #2b2320;
  --tinta-media: #6b5a55;
  /* Escurecido de #9a8781 para passar no contraste WCAG AA. O tom original
     dava 3,15:1 sobre o osso e 2,81:1 sobre o osso-fundo, onde o mínimo para
     texto pequeno é 4,5:1 — e é justamente ele que carrega os rótulos, as
     dicas dos formulários e as legendas, ou seja, o texto miúdo que mais
     precisa ser legível. Este dá 5,09 / 4,53 / 5,51 sobre osso, osso-fundo e
     branco. Quem clarear de novo, meça nos três fundos. */
  --tinta-fraca: #77655f;
  --argila: #b98a5e;         /* dourado da luz */
  --linha: #e7d7d1;
  /* Verde-sálvia, o único acréscimo à paleta do retrato. Entra como detalhe:
     o ponto de cada cenário, o fio que acende numa etapa, a barra de uma frase
     de destaque. Nunca como fundo de seção nem como cor de botão — o primário
     é o rosewood, e dois primários brigando é o que faz uma página parecer
     costurada de pedaços. */
  --salvia: #8a9a86;
  --serifa: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --sans: ui-sans-serif, -apple-system, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max: 76rem;
  /* Ícone de calendário, usado como máscara no link da agenda — a marcação
     desse link vem do Doctoralia e não leva <svg> dentro. */
  --icone-agenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* O atraso tem de cair junto com a duração. Zerar só a duração deixa a
     entrada da abertura em animation-delay de até 380ms com fill backwards —
     ou seja, a primeira tela fica invisível quase meio segundo para justamente
     quem pediu menos movimento. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

body {
  margin: 0;
  background: var(--osso);
  color: var(--tinta);
  font-family: var(--serifa);
  font-size: clamp(1.0625rem, .55vw + .95rem, 1.1875rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0 0 1.1em; max-width: 62ch; }
a { color: inherit; }

.env { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Todo destino de âncora recua a altura do cabeçalho, mais uma folga.

   O cabeçalho é fixo e mede ~85px. Sem este recuo, cada item do menu levava a
   pessoa a um ponto em que o rótulo da seção e parte do título ficavam
   escondidos atrás dele — medido: de 81 a 102 pixels engolidos, em toda
   âncora, nas duas versões do menu. Fica em :where() para ter especificidade
   zero e não disputar com nada. */
:where([id]) { scroll-margin-top: 7rem; }

/* Rótulo de seção: versalete numerado, o fio que organiza a página. */
.rotulo {
  font-family: var(--sans);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.rotulo::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.rotulo .num { color: var(--verde); font-variant-numeric: tabular-nums; }

/* ── Cabeçalho ──────────────────────────────────────────────────────────── */
/* Fio de progresso no alto: a inicial é longa e a avaliação floral é
   longuíssima. Ocupa 2px e responde "quanto falta" sem tirar espaço de nada.
   Ele vive dentro do cabeçalho, que é fixo, para acompanhar a rolagem. */
#progresso {
  position: absolute; inset: auto 0 -1px 0; height: 2px;
  background: linear-gradient(90deg, var(--verde-claro), var(--verde));
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--osso) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
header.rolou { border-bottom-color: var(--linha); }
.barra { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.15rem; }
.marca { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.marca b { font-family: var(--serifa); font-weight: 500; font-size: 1.2rem; letter-spacing: -.02em; }
/* Não há tarja de vertentes no cabeçalho, e isso é decisão, não esquecimento.
   Ela já disputou a linha com o nome e o perdedor era sempre o nome, que se
   enrolava em três linhas — num cabeçalho fixo, um sexto da tela em toda a
   rolagem. Depois de o menu chegar a seis itens ela deixou de caber em largura
   nenhuma: a barra é limitada a 76rem pelo .env, o que dá 1056px de conteúdo,
   e o cabeçalho com tarja pede 1095px. Quem quiser trazê-la de volta precisa
   antes tirar item do menu ou soltar o .env — e medir. As mesmas três palavras
   abrem o texto da página inicial logo abaixo, então não se perde nada. */
nav.menu { display: none; gap: 2rem; font-family: var(--sans); font-size: .8125rem; letter-spacing: .02em; }
nav.menu a { text-decoration: none; color: var(--tinta-media); padding-block: .25rem; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
nav.menu a:hover { color: var(--verde); border-bottom-color: var(--verde); }
/* A página em que se está não se oferece como destino: fica marcada, sem link. */
nav.menu a[aria-current='page'] { color: var(--verde); border-bottom-color: var(--verde-claro); }
@media (min-width: 62rem) { nav.menu { display: flex; } }

/* ── Menu do celular ────────────────────────────────────────────────────────
   Abaixo de 62rem o menu de cima some, e por um tempo foi só isso que segurou
   a navegação: no celular — que é quase todo aparelho que abre este site — não
   havia menu nenhum, e as páginas de formulário só existiam para quem soubesse
   rolar até o rodapé. Este <details> é o menu de lá. */
.menu-movel { position: relative; }
@media (min-width: 62rem) { .menu-movel { display: none; } }

.menu-movel > summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center; gap: .28rem;
  width: 2.75rem; height: 2.75rem;   /* 44px: o mínimo que um dedo acerta */
  border: 1px solid var(--linha); border-radius: 100px; background: #fff;
}
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel > summary::marker { content: ''; }
.menu-movel > summary i { display: block; width: 1.05rem; height: 1.5px; background: var(--verde); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.menu-movel[open] > summary { background: var(--verde); border-color: var(--verde); }
.menu-movel[open] > summary i { background: #fff; }
/* Aberto, as tres barras viram um X: o mesmo botao que abre precisa dizer que
   fecha, senao a pessoa toca fora para sair e acha que o menu travou. */
.menu-movel[open] > summary i:nth-child(1) { transform: translateY(.44rem) rotate(45deg); }
.menu-movel[open] > summary i:nth-child(2) { opacity: 0; }
.menu-movel[open] > summary i:nth-child(3) { transform: translateY(-.44rem) rotate(-45deg); }
.menu-movel > summary:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 25%, transparent); }

.menu-movel .painel {
  position: absolute; right: 0; top: calc(100% + .7rem); z-index: 70;
  min-width: 13.5rem; background: var(--osso);
  border: 1px solid var(--linha); border-radius: .6rem;
  box-shadow: 0 1rem 2.5rem rgba(43, 35, 32, .16);
  padding: .4rem;
  display: flex; flex-direction: column;
}
.menu-movel .painel a {
  font-family: var(--sans); font-size: .9375rem; text-decoration: none;
  color: var(--tinta); padding: .72rem .9rem; border-radius: .4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.menu-movel .painel a:hover { background: color-mix(in srgb, var(--verde-claro) 45%, transparent); }
.menu-movel .painel a[aria-current='page'] { color: var(--verde); font-weight: 500; background: color-mix(in srgb, var(--verde-claro) 35%, transparent); }
/* Fio separando o site das duas paginas de formulario: sao gestos diferentes —
   ler sobre o atendimento, e sentar para preencher. */
.menu-movel .painel .divisor { height: 1px; background: var(--linha); margin: .4rem .5rem; }
.menu-movel .painel .marca-form { padding: .35rem .9rem; font-family: var(--sans); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); }

/* No celular o botao do WhatsApp fica so com o icone. Com o rotulo, ele mais o
   nome mais o menu nao cabem na barra, e quem cede e o nome — que se enrola em
   tres linhas num cabecalho que e fixo. O icone e reconhecivel sozinho, e o
   aria-label mantem o nome para quem usa leitor de tela. */
@media (max-width: 61.99rem) {
  header .barra > .botao { padding-inline: .85rem; }
  header .barra > .botao .rotulo-botao { display: none; }
}

.botao {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; padding: .7rem 1.25rem; border-radius: 100px;
  background: var(--verde); color: #fff; border: 1px solid var(--verde);
  transition: background .2s ease, transform .2s ease;
}
.botao:hover { background: var(--verde-fundo); box-shadow: 0 .35rem 1rem color-mix(in srgb, var(--verde-fundo) 26%, transparent); }
.botao:active { transform: translateY(1px); }
.botao.fantasma { background: transparent; color: var(--verde); }
.botao.fantasma:hover { background: color-mix(in srgb, var(--verde) 8%, transparent); }
.botao svg { width: 1rem; height: 1rem; flex: none; }
.botao[disabled] { opacity: .45; pointer-events: none; }

/* ── Seções ─────────────────────────────────────────────────────────────── */
section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.duas { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 60rem) { .duas { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
.duas h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); }

.escuro { background: var(--verde-fundo); color: var(--osso); }
.escuro .rotulo { color: color-mix(in srgb, var(--osso) 55%, transparent); }
.escuro .rotulo::after { background: color-mix(in srgb, var(--osso) 20%, transparent); }
.escuro .rotulo .num { color: var(--verde-claro); }
.escuro p { color: color-mix(in srgb, var(--osso) 78%, transparent); }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--linha); padding-block: 3rem 4rem; }
footer p { font-size: .8125rem; color: var(--tinta-fraca); font-family: var(--sans); line-height: 1.7; max-width: 68ch; }
.creditos { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: baseline; margin-top: 2rem; font-family: var(--sans); font-size: .8125rem; color: var(--tinta-fraca); }

/* Botão flutuante de WhatsApp — some quando a seção de contato aparece. */
.flutuante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60;
  box-shadow: 0 .5rem 1.5rem rgba(18,53,43,.22);
  transition: opacity .3s ease, transform .3s ease;
}
.flutuante[hidden] { opacity: 0; transform: translateY(.75rem); pointer-events: none; display: inline-flex; }

/* Entrada suave, uma vez só. Quem tira o opacity:0 é o script; o <noscript> de
   cada página devolve o conteúdo quando não há script nenhum. */
.surge { opacity: 0; transform: translateY(1.25rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.surge.visivel { opacity: 1; transform: none; }


/* ── Entrada da abertura ────────────────────────────────────────────────────
   A primeira tela sobe uma vez, ao carregar, com os três blocos escalonados.
   É animação de chegada, não de rolagem: repeti-la a cada volta ao topo
   cansaria. O @media de movimento reduzido, lá em cima, já derruba a duração
   para 0,01ms — quem pediu menos movimento recebe a página parada e inteira. */
@keyframes sobe {
  from { opacity: 0; transform: translateY(1.4rem); }
  to   { opacity: 1; transform: none; }
}
.entra > * { animation: sobe .75s cubic-bezier(.2,.7,.3,1) backwards; }
.entra > *:nth-child(1) { animation-delay: .05s; }
.entra > *:nth-child(2) { animation-delay: .16s; }
.entra > *:nth-child(3) { animation-delay: .27s; }
.entra > *:nth-child(4) { animation-delay: .38s; }


/* ── Agenda do Doctoralia ───────────────────────────────────────────────────
   O script troca o #zl-url pelo calendário dele, e o calendário já vem com
   moldura, fundo branco e cantos próprios. Este bloco chegou a ter um quadro
   de fio em volta e foi um erro duas vezes: virava moldura dentro de moldura,
   e o respiro do quadro roubava uns 38px da largura — o bastante para a aba
   "Teleconsulta" aparecer cortada num celular de 390px.

   Então aqui não há quadro. Só a largura máxima, para o calendário não se
   esparramar no desktop, e a garantia de que ele não passa da tela.

   O .zl-url é vestido pelo CSS, e não por uma classe no HTML, porque ele some
   quando o widget carrega — estilo de elemento que deixa de existir mora no
   CSS. Enquanto o script não chega, e se ele nunca chegar, é este link que a
   pessoa vê. */
.agenda {
  margin-top: 1.75rem;
  /* Sem teto de largura: o calendário ocupa a coluna inteira. Ele chegou a ser
     limitado a 32rem para pesar menos na página, e não pesou — a altura é a
     mesma em qualquer largura, porque o que a define é o número de linhas de
     horário, não a de colunas. O que a largura muda é quantos dias aparecem
     lado a lado antes da seta: estreitar só custava opção visível. */
  /* Chão de bege quente, e não mais uma borda. O calendário é um cartão branco
     de cantos redondos sobre um fundo quase branco — sem um chão ele flutua,
     e com uma borda em volta vira moldura dentro de moldura. O bege é o mesmo
     degrau da paleta que a página já usa, então ele encosta o widget na
     página em vez de cercá-lo. */
  background: var(--osso-fundo);
  padding: 1rem;
}
.agenda iframe { display: block; max-width: 100%; border: 0; }

/* No celular o chão sangra até a margem da página, virando faixa. É a única
   forma de ter respiro em volta sem tirar largura de dentro: o padding lateral
   já custou 37px uma vez, e foi o bastante para a aba "Teleconsulta" aparecer
   cortada. Aqui a margem negativa devolve exatamente o que o padding toma. */
@media (max-width: 58rem) {
  .agenda {
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 1rem var(--gutter) 1.25rem;
  }
}

/* O link cru, antes de o calendário entrar. */
.agenda .zl-url {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .875rem; font-weight: 500;
  text-decoration: none; padding: .7rem 1.25rem; border-radius: 100px;
  background: var(--verde); color: #fff; border: 1px solid var(--verde);
  transition: background .2s ease;
}
.agenda .zl-url:hover { background: var(--verde-fundo); }
.agenda .zl-url::before {
  content: ''; width: 1rem; height: 1rem; flex: none;
  background: currentColor;
  -webkit-mask: var(--icone-agenda) center / contain no-repeat;
  mask: var(--icone-agenda) center / contain no-repeat;
}


/* ── Foco ───────────────────────────────────────────────────────────────────
   Um anel para tudo que o teclado alcança. Antes só campo de formulário e
   pílula de escolha tinham foco visível; link, botão, resumo do acordeão e
   botão do menu não tinham nenhum, e a navegação por Tab atravessava a página
   sem deixar rastro. O :focus-visible só aparece para quem navega por teclado,
   então não polui o clique de mouse. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 2px;
}