/**
* Flávia Fisio — Fisioterapia Neurofuncional Pediátrica
* Camada de marca sobre o MediNest. Carregada DEPOIS de main.css.
*
* Paleta e tipografia vêm do manual de identidade da cliente, não de escolha
* minha. As cinco cores oficiais são:
*
*   #4DB6AC  teal        #B89CCF  lilás      #FFB39A  coral
*   #E6F2F2  gelo        #DAD6D2  cinza quente
*
* PROBLEMA QUE PRECISOU SER RESOLVIDO: nenhuma delas serve para texto.
* Contra o branco dão 2,44 / 2,42 / 1,73 / 1,14 / 1,45 — e o mínimo da WCAG
* para texto é 4,5. É uma paleta desenhada para impresso e para mancha grande,
* não para corpo de texto em tela.
*
* A saída não é trocar a paleta, é dividir os papéis:
*   - as cores OFICIAIS ficam no decorativo — fundo de seção, ícone, o logo,
*     tarja, borda. É onde a identidade é vista.
*   - o texto e os botões usam variantes ESCURECIDAS da mesma matiz, que
*     preservam a cor da marca e passam no contraste:
*       teal texto  #26766D (5,39:1)   teal forte  #1F625A (7,11:1)
*       lilás texto #6A4C96 (6,80:1)
*
* Tipografia oficial: Cormorant Garamond (títulos) + Montserrat (corpo).
*
* ATENÇÃO — colisão conhecida: o washington-nery/ também usa Cormorant
* Garamond nos títulos e também tem teal como cor principal. Os dois sites são
* de fisioterapia no DF. Aqui o teal é claro (#4DB6AC) contra o petróleo dele
* (#014550), e ela tem lilás e coral que ele não tem — mas a serifa é a mesma.
* Isso veio do manual dela e não é escolha nossa; está registrado para que
* ninguém descubra por acidente depois.
*/

/* Fontes auto-hospedadas (30/08): o <link> do Google Fonts bloqueava a
   renderizacao e chamava terceiro antes do consentimento. Arquivos variaveis,
   subset latin (cobre todo o portugues), um por familia. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
}

:root {
  --default-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --nav-font: "Montserrat", sans-serif;

  /* Cores oficiais da marca — uso decorativo */
  --brand-teal: #4db6ac;
  --brand-lilas: #b89ccf;
  --brand-coral: #ffb39a;
  --brand-gelo: #e6f2f2;
  --brand-cinza: #dad6d2;

  /* Variantes acessíveis, derivadas das oficiais — uso em texto e botão */
  --brand-teal-texto: #26766d;
  --brand-teal-forte: #1f625a;
  --brand-lilas-texto: #6a4c96;

  /* Avaliado em tela (30/08): a paleta pura nos tokens principais ficou
     lavada — o teal 2,4:1 dos titulos sumia no branco. Texto e acao assumem
     as variantes escuras; as cores oficiais seguem nas superficies e nas
     manchas decorativas, que e o uso que o manual preve. */
  --background-color: #ffffff;
  --default-color: #4a4a52;
  --heading-color: #26766d;
  --accent-color: #26766d;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}

:root {
  --nav-color: #4a4a52;
  --nav-hover-color: #26766d;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #4a4a52;
  --nav-dropdown-hover-color: #26766d;
}

.light-background {
  --background-color: var(--brand-gelo);
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #1f625a;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #26766d;
  --contrast-color: #ffffff;
}

/* ---------------------------------------------------------------- tipografia */

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: 0.005em;
}

.hero .hero-title,
.section-title h2 {
  font-weight: 700;
}

/* A marca escreve o nome em serifa com as duas linhas em cores diferentes.
   No cabeçalho o nome curto repete esse contraste: teal + lilás. */
.logo .sitename {
  font-family: var(--heading-font);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand-teal);
}

.logo .sitename span {
  color: var(--brand-lilas);
}

.logo img {
  max-height: 52px;
  width: auto;
}

/* ------------------------------------------------------------ cor de apoio */

.hero .hero-badge,
.department-category,
.section-title h2::after {
  background-color: var(--brand-teal-texto);
  color: var(--contrast-color);
}

.certification-badge {
  background-color: var(--brand-teal-texto);
  color: var(--contrast-color);
}

.certification-badge i {
  color: var(--brand-coral);
}

/* Ícone sobre fundo escuro: o coral rende bem porque ali ele é mancha,
   não texto. */
.dark-background .feature-icon i,
.dark-background .card-icon i {
  color: var(--brand-coral);
}

/* ---------------------------------------------------------------- botões */

.btn-primary,
.btn-getstarted,
.btn-cta,
.primary-btn {
  /* teal-texto, nao o puro: branco sobre #4db6ac dava 2,2:1 */
  background-color: var(--brand-teal-texto);
  border-color: var(--brand-teal-texto);
  color: var(--contrast-color);
}

.btn-primary:hover,
.btn-getstarted:hover,
.btn-cta:hover,
.primary-btn:hover {
  background-color: var(--brand-teal-forte);
  border-color: var(--brand-teal-forte);
  color: var(--contrast-color);
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--brand-lilas);
  color: var(--brand-lilas);
}

.btn-secondary:hover {
  background-color: var(--brand-lilas-texto);
  color: var(--contrast-color);
}

/* ------------------------------------------------------- faixa e trajetória */

/* Faixa do atendimento particular: regiao morna do coral em mancha de fundo
   — na dobra do hero (que e gelo) o tom quente e o que a destaca, sem a
   borda lateral que fazia esse papel antes. */
.particular-strip {
  background-color: color-mix(in srgb, var(--brand-coral) 12%, #ffffff);
  padding: 18px 22px;
  border-radius: 8px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.particular-strip i {
  color: var(--brand-teal);
  font-size: 22px;
  flex: 0 0 auto;
}

.particular-strip strong {
  color: var(--brand-teal-texto);
}

.journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.journey-step {
  background-color: #ffffff;
  border: 1px solid var(--brand-cinza);
  border-radius: 10px;
  padding: 22px 20px;
  position: relative;
}

.journey-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--brand-teal);
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}

.journey-step h4 {
  font-size: 19px;
  color: var(--brand-teal-texto);
  margin-bottom: 6px;
}

.journey-step p {
  font-size: 15px;
  margin: 0;
}

/* -------------------------------------------------------------- cartão WA */

/* Superficie morna: o cartao de conversa e o momento humano da pagina e e a
   regiao que o coral possui — em mancha de fundo, como o manual preve. */
.wa-card {
  background-color: color-mix(in srgb, var(--brand-coral) 14%, #ffffff);
  border: 1px solid var(--brand-coral);
  border-radius: 14px;
  padding: 38px 28px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.wa-card h2,
.wa-card h3 {
  /* coral acessivel: titulo grande, 4,17:1 passa com folga os 3:1 */
  color: #c2603f;
  margin-bottom: 12px;
}

.wa-card p {
  max-width: 560px;
  margin: 0 auto 22px;
}

.wa-card .btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--brand-teal-texto);
  color: #ffffff;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  min-height: 48px;
  transition: background-color 0.2s ease;
}

.wa-card .btn-wa:hover {
  background-color: var(--brand-teal-forte);
  color: #ffffff;
}

.wa-card .wa-note {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--default-color);
}

/* ------------------------------------------------- ícones próprios da marca */

/* Os cinco ícones do manual (neurociência, desenvolvimento, movimento,
   cuidado, cada passo importa) entram como imagem, não como fonte de ícone:
   são desenho da identidade dela, não pictograma genérico. */
.icone-marca {
  width: 72px;
  height: auto;
  display: block;
  margin-bottom: 14px;
}

.icone-marca-lg {
  width: 104px;
}

/* ------------------------------------------------------------ hero cheio */

/* O hero ocupa a primeira tela inteira. svh no lugar de vh: no celular o vh
   conta a barra do navegador que some ao rolar, e o hero fica mais alto que a
   tela. O ritmo interno é preso ao svh para caber tambem em notebook. */
.hero {
  /* 80vh do main.css nao enche a tela. E o padding dele (120 no topo, 80
     embaixo) somava com o que eu pus no .container, criando vao morto no
     topo e empurrando o conteudo para fora da dobra. O respiro fica so no
     container, entao aqui zera. */
  /* 90svh, nao 100: os ~10% que sobram mostram o aviso de atendimento
     particular espiando na dobra — convite a rolar e informacao que filtra
     lead errado antes do primeiro toque. */
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: var(--brand-gelo);
}

.hero > .container {
  width: 100%;
  /* o cabecalho e fixed-top: o topo precisa livrar a barra */
  padding-top: clamp(92px, 11svh, 118px);
  padding-bottom: clamp(24px, 6svh, 64px);
}

.hero .hero-title {
  font-size: clamp(30px, 4.6svh, 44px);
  line-height: 1.16;
}

.hero .hero-description {
  margin-bottom: clamp(14px, 3svh, 28px);
}

@media (max-width: 992px) {
  /* Em tela estreita o conteúdo é mais alto que a tela: deixa crescer,
     senão corta. */
  .hero {
    min-height: auto;
  }

  .hero .container {
    padding-top: 110px;
    padding-bottom: 56px;
  }
}

/* ------------------------------------------------------------ acessível */

a:focus-visible,
button:focus-visible,
.btn-wa:focus-visible,
.btn-getstarted:focus-visible {
  outline: 3px solid var(--brand-lilas-texto);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Correções de enquadramento
   -------------------------------------------------------------------------- */

/* O logo é horizontal e largo (900x297) e traz a assinatura "Fisioterapeuta
   Neurofuncional Pediátrica" embaixo do nome. Com os 36px que o main.css
   define, essa linha vira borrão. Precisa da mesma especificidade dele
   (.header .logo img) para vencer. */
.header .logo img {
  max-height: 108px;
  margin-right: 0;
}

.footer .footer-about .logo img {
  max-height: 84px;
}

@media (max-width: 992px) {
  .header .logo img {
    max-height: 68px;
  }
}

/* O retrato dela é 784x1368, contra 1500x2000 do layout de origem. O cartão
   flutuante caía sobre o rosto — desce para o rodapé da foto, onde há jaleco
   e não há informação. */
.hero .hero-image .floating-card.emergency-card {
  top: auto;
  bottom: 24px;
  left: -24px;
}

/* Três credenciais com rótulo longo (o número do CREFITO) não cabem numa
   linha só e estouravam a coluna: quebram em grade. */
.hero .hero-stats .stat-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.6rem;
}

@media (max-width: 768px) {
  .hero .hero-stats .stat-group {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

.hero .hero-stats .stat-group .stat .stat-text .number {
  font-size: 1rem;
  line-height: 1.3;
}

/* O logo tem assinatura embaixo do nome, entao pede altura. O cabecalho e o
   deslocamento do hero acompanham, senao o logo estoura a barra. */
.header {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Cabecalho: simbolo + nome em texto. O logo completo tem tres niveis de
   informacao e vira ruido em altura de barra; o simbolo funciona pequeno.
   O logo completo fica no rodape, onde ha espaco. */
.header .logo img {
  max-height: 64px;
}

.hero .hero-tagline {
  display: block;
  max-width: min(440px, 90%);
  height: auto;
  margin: 6px 0 22px;
}

/* --------------------------------------------------------------------------
   Hero preso a primeira tela — print do Thiago (28/08) mostrou o CREFITO
   cortado na dobra e a foto descendo alem dela.
   -------------------------------------------------------------------------- */

/* Causa 1: a foto em col-lg-5 numa tela larga vira ~1400px de altura e passa
   a mandar na altura do hero. A foto nao manda: trava no svh. */
.hero .hero-image img.main-image {
  max-height: clamp(420px, 62svh, 640px);
  width: auto;
  max-width: 100%;
  object-fit: cover;
}

/* Causa 2: em tela larga, 2 colunas de credenciais jogam o CREFITO numa
   segunda linha — que e exatamente o que a dobra corta. Em >=1200px as tres
   cabem lado a lado. */
@media (min-width: 1200px) {
  .hero .hero-stats .stat-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* E aperta o respiro vertical da coluna de texto em tela baixa */
.hero .hero-tagline {
  margin: 4px 0 clamp(12px, 2.4svh, 22px);
}

/* Badge de especialidades embaixo da foto, centralizado com ela */
.hero .badge-sob-foto {
  text-align: center;
  margin-top: 16px;
}

/* A pilula original era escopada em .hero-content; ao mudar o badge para
   baixo da foto ele perdeu o estilo e virou faixa reta. Reproduz a pilula
   do main.css (radius 25px, caixa alta), no teal da marca. */
.hero .badge-sob-foto .hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--brand-teal-texto), var(--brand-teal-forte));
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* A foto travada em 68svh nao preenche mais a coluna: a moldura abraca a
   imagem e centraliza, senao o cartao flutuante fica orfao no vao. */
.hero .hero-image {
  width: fit-content;
  margin: 0 auto;
}

/* Com a coluna de texto em 8/12, as tres credenciais cabem cada uma numa
   linha so — o print do Thiago mostrava tudo quebrando em duas. */
@media (min-width: 1200px) {
  .hero .hero-stats .stat-group {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 1rem 1.4rem;
  }

  /* nowrap impede a coluna de encolher; o CREFITO estourava o layout.
     Vao menor + corpo 0.95rem fazem as tres caberem sem quebra. */
  .hero .hero-stats .stat-group .stat .stat-text .number,
  .hero .hero-stats .stat-group .stat .stat-text .label {
    white-space: nowrap;
    font-size: 0.95rem;
  }

  .hero .hero-stats .stat-group .stat .stat-text .label {
    font-size: 0.85rem;
  }

  .hero .hero-stats .stat-group .stat {
    min-width: 0;
  }
}

/* A logo e a imagem oficial, sem nome digitado ao lado (pedido do Thiago).
   84px deixa a assinatura legivel sem inflar a barra.
   O PNG tem 45px de ar transparente a esquerda (de 900px): sem compensar,
   o desenho visivel começa 13px a direita da linha do container enquanto
   breadcrumb e titulo ficam nela. A margem negativa e proporcional a altura
   exibida (45/297 da altura). */
.header .logo img {
  max-height: 84px;
  margin-left: -13px;
}

@media (max-width: 992px) {
  .header .logo img {
    max-height: 60px;
    margin-left: -9px;
  }
}

/* --------------------------------------------------------------------------
   Coral distribuido — o site estava todo teal e o coral e 1/3 da marca.
   #FFB39A puro so em mancha decorativa; onde ha texto entra o #C2603F
   (4,17:1 sobre branco) ou texto escuro sobre o coral (5,09:1).
   -------------------------------------------------------------------------- */

/* filete dos titulos de secao */
.section-title h2::after {
  background-color: var(--brand-coral);
}

/* numerais dos passos da jornada: coral com texto escuro */
.journey-step .step-num {
  background-color: var(--brand-coral);
  color: #4a4a52;
}

/* credenciais do hero: cada caixa numa cor da marca — teal, coral, lilas */
.hero .hero-stats .stat-group .stat:nth-child(2) i {
  background-color: color-mix(in srgb, var(--brand-coral) 30%, #ffffff);
  color: var(--brand-apricot-dark, #c2603f);
}

.hero .hero-stats .stat-group .stat:nth-child(3) i {
  background-color: color-mix(in srgb, var(--brand-lilas) 26%, #ffffff);
  color: var(--brand-lilas-texto);
}

/* botao secundario: coral escuro no lugar do lilas */
.btn-secondary {
  border-color: #c2603f;
  color: #c2603f;
}

.btn-secondary:hover {
  background-color: #c2603f;
  border-color: #c2603f;
  color: #ffffff;
}

/* aviso: icone acompanha a borda coral que ja existia */
.particular-strip i {
  color: #c2603f;
}

/* volta ao topo */
.scroll-top {
  background-color: var(--brand-coral);
  color: #4a4a52;
}

.scroll-top:hover {
  background-color: #c2603f;
  color: #ffffff;
}

/* cartao do WhatsApp: moldura ganha o coral claro */
.wa-card {
  border-color: var(--brand-coral);
}

/* O aviso vive DENTRO do hero, colado no rodape da primeira tela. O hero
   volta a 100svh e o padding de baixo do container reserva o espaco da
   faixa para nada ficar escondido atras dela. */
.hero .aviso-hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.hero .aviso-hero .particular-strip {
  border-radius: 0;
  margin: 0;
}

.hero > .container {
  padding-bottom: clamp(84px, 12svh, 120px);
}

/* Icones do manual nas credenciais do hero, no lugar dos bi-* genericos.
   Caixa branca neutra: os desenhos ja trazem as cores da marca (teal,
   lilas, coral) e fundo colorido brigaria com elas. */
.hero .hero-stats .stat-group .stat .stat-icone-marca {
  width: 58px;
  height: 58px;
  object-fit: contain;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 7px;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(38, 118, 109, 0.10);
}

/* Os 5 icones com rotulo do manual substituem as credenciais do hero
   (pedido do Thiago, 28/08). Cartoes brancos uniformizam o fundo quase
   branco que vem gravado nos arquivos. */
.hero .valores-marca {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  /* space-between estica a fileira ate a borda do container: o ultimo
     cartao alinha com o Falar comigo do navbar (pedido do Thiago) */
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.hero .valores-marca img {
  /* quadros 480x480 ja normalizados (desenho centrado, margem cortada):
     cartoes quadrados identicos */
  height: 150px;
  width: auto;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(38, 118, 109, 0.10);
  padding: 6px;
}

@media (max-width: 1399px) {
  .hero .valores-marca img {
    height: 126px;
  }
}

@media (max-width: 576px) {
  .hero .valores-marca {
    justify-content: center;
  }

  .hero .valores-marca img {
    height: 74px;
  }
}

/* Links rapidos (Falar pelo WhatsApp / Eu vou ate voce / Duvidas) centrados */
.hero .cta-section .quick-actions {
  justify-content: center;
}

@media (max-width: 768px) {
  .hero .cta-section .quick-actions {
    align-items: center;
  }
}

/* Tagline maior e centrada na coluna (pedido do Thiago). O arquivo tem
   720px de largura — 680 de teto preserva a nitidez. */
.hero .hero-tagline {
  max-width: min(680px, 100%);
  /* cola na descricao: sem respiro em cima, so embaixo */
  margin: 0 auto clamp(14px, 2.6svh, 26px);
}

/* A fileira dos 5 valores atravessa o container inteiro, abaixo da foto e do
   texto: em 132px os cinco nao cabiam na coluna de 8/12 e quebravam linha. */
.hero .hero-stats-larga {
  width: 100%;
  margin-top: clamp(10px, 2svh, 22px);
}

/* com mais largura, o topo e a foto apertam um pouco para a dobra fechar */
.hero > .container {
  padding-top: clamp(84px, 10svh, 108px);
}

.hero .hero-image img.main-image {
  /* volta ao tamanho de antes da fase dos icones em largura total — o aperto
     para 56svh tinha afinado a foto */
  max-height: clamp(440px, 66svh, 700px);
}

/* o cartao do WhatsApp nao depende da largura da foto: max-content garante o
   numero inteiro mesmo com retrato estreito */
.hero .hero-image .floating-card.emergency-card {
  width: max-content;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Header nunca transparente — o template so pintava o fundo depois de 100px
   de rolagem (.scrolled no body), e nesse intervalo a foto passava por tras
   do logo. Fundo gelo desde o inicio: no topo ele se funde com o hero (que
   e gelo), e apos 100px o .scrolled troca para branco com sombra, como ja
   fazia.
   -------------------------------------------------------------------------- */
.header {
  --background-color: var(--brand-gelo);
}

/* --------------------------------------------------------------------------
   Ajustes pedidos pelo Thiago (print de 29/08)
   -------------------------------------------------------------------------- */

/* 1) Jornada 1-5: cinco colunas iguais dentro do container, escalando com a
   tela — em vez do auto-fit que deixava os cartoes de largura irregular. */
.journey {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1199px) {
  .journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .journey {
    grid-template-columns: 1fr;
  }
}

/* 2) Alinhamento do bloco de fotos com a coluna de texto: o desenho original
   fica como esta (grande a esquerda, duas menores empilhadas) — o que muda e
   que o bloco estica ate a altura exata da coluna ao lado, em vez dos 500px
   fixos. Bordas superiores e inferiores alinham; simetria vem daí. */
.home-about .image-grid {
  height: 100%;
}

.home-about .image-grid .primary-image img,
.home-about .image-grid .secondary-images .small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.home-about .image-grid .secondary-images .small-image {
  flex: 1 1 0;
  min-height: 0;
}

@media (max-width: 768px) {
  .home-about .image-grid {
    height: auto;
  }
}

/* Fotos da grade: o cover centrado cortava a cabeca nos retratos. Desce o
   enquadramento so um pouco (25% em vez dos 50% do centro) e o zoom de hover
   do template fica — com a origem acompanhando, para nao voltar a cortar a
   cabeca durante o efeito. */
.home-about .image-grid .primary-image img,
.home-about .image-grid .secondary-images .small-image img {
  object-position: center 18%;
  transform-origin: center 18%;
}

/* Coluna de texto do home-about um degrau menor, para a altura dela fechar
   com a foto grande ao lado — as fotos ficam como estao. */
.home-about .content-wrapper .highlight-box {
  padding: 20px 22px;
}

.home-about .content-wrapper .highlight-content p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
}

.home-about .content-wrapper .feature-list {
  gap: 12px;
}

.home-about .content-wrapper .feature-item .feature-text {
  font-size: 15px;
  line-height: 1.5;
}

.home-about .content-wrapper .feature-item .feature-icon {
  font-size: 18px;
}

.home-about .content-wrapper .action-buttons {
  margin-top: 18px;
}

/* Abordagens: respiro do titulo menor e imagem casada com o texto — a coluna
   da imagem estica junto (rows sem align-items-center) e preenche a altura. */
.featured-departments.section {
  padding-top: 36px;
}

.featured-departments .section-title {
  padding-bottom: 28px;
}

.featured-departments .department-visual,
.featured-departments .department-visual .image-wrapper {
  height: 100%;
}

.featured-departments .department-visual .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* "Tudo comeca por uma avaliacao": menos respiro no topo da secao e o
   paragrafo solto dos 600px do template — em ~1050px ele fecha em 2 linhas. */
.home-about.section {
  padding-top: 36px;
}

.home-about .lead-description {
  max-width: 1050px;
  font-size: 1.15rem;
}

/* Vao entre os dois departamentos: os 120px do template caem para 44px */
.featured-departments .featured-department {
  margin-bottom: 44px;
}

.featured-departments .featured-department:last-of-type {
  margin-bottom: 0;
}

/* Caixa "E se o meu filho for autista?": padding interno de 80px cai para 40 */
.featured-departments .departments-cta {
  padding: 40px 32px;
  margin-top: 44px;
}

/* Departamentos: o conteudo preenche a altura toda da imagem ao lado — os
   blocos se distribuem e o "Conhecer..." fecha na base, alinhado com a foto. */
.featured-departments .department-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.featured-departments .department-content > * {
  margin-bottom: 0;
}

/* Bloco do autismo: texto a esquerda, icone da marca a direita */
.featured-departments .departments-cta .cta-content.text-start {
  text-align: left;
}

.featured-departments .departments-cta .cta-description {
  margin-bottom: 14px;
}

.featured-departments .departments-cta .cta-checks {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: grid;
  gap: 10px;
}

.featured-departments .departments-cta .cta-checks i {
  color: var(--brand-teal-texto);
  margin-right: 8px;
}

.featured-departments .departments-cta .cta-acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.featured-departments .departments-cta .cta-acoes .cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--brand-teal-texto);
}

.featured-departments .departments-cta .cta-figura {
  max-width: min(320px, 80%);
  height: auto;
}

/* "Como a sessao acontece": respiros no ritmo das outras secoes, icone maior
   em caixa tingida e titulo ao lado do icone (nao mais empilhado). */
#movimento.section {
  padding-top: 36px;
  padding-bottom: 48px;
}

#movimento .section-title {
  padding-bottom: 28px;
}

#movimento .service-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
}

#movimento .service-card .service-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-gelo);
  border-radius: 12px;
  margin: 0;
}

#movimento .service-card .service-icon i {
  font-size: 24px;
  color: var(--brand-teal-texto);
}

#movimento .service-card h4 {
  margin: 0;
}

#movimento .service-card p {
  grid-column: 1 / -1;
  margin: 12px 0 0;
}

/* "Para a familia": titulo numa linha, conteudo esticado ate a base da foto */
#atividade-fisica .content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#atividade-fisica .content-wrapper h2 {
  font-size: clamp(28px, 2.4vw, 38px);
  margin-bottom: 18px;
}

#atividade-fisica .content-wrapper .action-buttons {
  margin-top: auto;
}

/* A foto NAO pode participar do calculo de altura da linha: no Chrome, o
   height:100% num flex com ciclo faz a linha nascer do tamanho natural do
   retrato (~1500px em tela larga) e abre um buraco na coluna de texto.
   Absoluta dentro da moldura, ela so PREENCHE a altura que o texto definir. */
#atividade-fisica .hero-image {
  position: relative;
  height: 100%;
}

#atividade-fisica .hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

@media (max-width: 991px) {
  #atividade-fisica .hero-image img {
    position: static;
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* "Para a familia": a foto em retrato ditava ~900px de altura e sobrava vao
   na coluna de texto. Teto de 620px na moldura + a lista nova preenchem. */


#atividade-fisica .content-wrapper .cta-checks {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  display: grid;
  gap: 12px;
}

#atividade-fisica .content-wrapper .cta-checks i {
  color: var(--brand-teal-texto);
  margin-right: 8px;
}

/* Como funciona o atendimento: passos numerados a esquerda, mapa que estica
   junto a direita (mesma tecnica da foto: absoluto, sem ditar altura) */
.visita-passos {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 34px;
}

@media (max-width: 767px) {
  .visita-passos {
    grid-template-columns: 1fr;
  }
}

.visita-passos li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.visita-passos .passo-num {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--brand-coral);
  color: #4a4a52;
  font-weight: 700;
}

.visita-passos strong {
  display: block;
  color: var(--brand-teal-texto);
  font-size: 18px;
  margin-bottom: 4px;
}

.visita-passos p {
  margin: 0;
  font-size: 15px;
}

#consultorio .mapa-moldura {
  position: relative;
  height: calc(100% - 44px);
  min-height: 320px;
}

#consultorio .mapa-moldura iframe {
  position: absolute;
  inset: 0;
}

#consultorio .mapa-nota {
  margin: 6px 0 0;
  font-size: 15px;
}

#consultorio .mapa-nota i {
  color: var(--brand-teal-texto);
}

@media (max-width: 991px) {
  #consultorio .mapa-moldura {
    height: 320px;
  }
}

/* FAQ em cartoes: o details cru do template tinha so o triangulo nativo.
   Cada pergunta vira um cartao com marcador proprio (+ vira −). */
#faq .faq-details {
  display: grid;
  gap: 14px;
}

#faq details {
  background-color: #ffffff;
  border: 1px solid var(--brand-cinza);
  border-radius: 12px;
  padding: 18px 22px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* O FAQ e o lar do lilas — a terceira cor do manual ganha um territorio
   proprio em vez de sumir; as duvidas sao a parte mais pessoal da pagina. */
#faq details:hover {
  border-color: var(--brand-lilas);
}

#faq details[open] {
  border-color: var(--brand-lilas-texto);
  box-shadow: 0 4px 14px rgba(106, 76, 150, 0.14);
}

#faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-weight: 600;
  font-size: 17px;
  color: var(--brand-teal-texto);
}

#faq summary::-webkit-details-marker {
  display: none;
}

#faq summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--brand-lilas) 22%, #ffffff);
  color: var(--brand-lilas-texto);
  font-size: 20px;
  font-weight: 600;
  transition: transform 0.2s ease;
}

#faq details[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

#faq details p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.65;
}

#faq.section {
  padding-top: 36px;
}

#faq .section-title {
  padding-bottom: 28px;
}

/* O cartao de conversa mora dentro do como-funciona, como passo final */
/* Paginas internas (30/08): breadcrumb como faixa propria abaixo do navbar
   e titulo abaixo dela, no desenho canonico do template — page-title branco,
   sem o light-background que colava tudo no menu. Os 80px 0 do template
   deixavam o topo arejado demais para o ritmo compacto do site. */
.page-title .heading {
  padding: 32px 0 44px;
}

/* O cartao 'Vamos conversar' fecha a secao em largura total do container,
   abaixo das duas colunas (pedido de 30/08). */
#consultorio .wa-card {
  max-width: none;
  margin-top: 44px;
}

/* Como funciona + FAQ lado a lado (30/08): uma secao, duas colunas, cada
   uma com o proprio titulo. Os passos viram fila unica porque a coluna tem
   metade da largura; no mobile o gy-5 empilha tudo como antes. */
#consultorio .lado-a-lado .visita-passos {
  grid-template-columns: 1fr;
}

#consultorio .coluna-titulo {
  padding-bottom: 30px;
}

/* #faq virou coluna dentro da secao; a ancora do menu precisa do mesmo
   respiro que as sections do template. */
#faq {
  scroll-margin-top: 90px;
}

@media (max-width: 1199px) {
  #faq {
    scroll-margin-top: 66px;
  }
}



/* --------------------------------------------------------------------------
   Faixa de conversa (30/08): o pico escuro da pagina. Os tokens
   .dark-background existiam desde o inicio e nenhuma secao os usava — a
   pagina era clara do topo ao rodape, sem um momento forte no scroll.
   Um pico so, de ponta a ponta, e o resto segue quieto ao redor.
   Nas internas o convite continua como cartao dentro do conteudo.
   -------------------------------------------------------------------------- */
.cta-conversa {
  padding: clamp(56px, 9vw, 88px) 0;
  text-align: center;
}

/* Cormorant em forca total: e a voz que o resto da pagina ja usa, um degrau
   acima — a ousadia vem do sistema, nao de efeito novo. */
.cta-conversa h2 {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.12;
  margin-bottom: 0;
}

/* o filete coral dos titulos de secao, o motivo do proprio sistema */
.cta-conversa h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--brand-coral);
  margin: 16px auto 0;
}

.cta-conversa p {
  max-width: 620px;
  margin: 20px auto 30px;
  font-size: 17px;
  /* secundario tingido do proprio teal da superficie, nunca cinza */
  color: color-mix(in srgb, #ffffff 86%, var(--brand-teal));
}

/* Botao de wa.me no verde oficial do WhatsApp — sobre o teal profundo ele
   salta sem gritar; tinta escura por contraste (6,6:1). */
.cta-conversa .btn-wa-verde {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #25d366;
  color: #0b3627;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 17px;
  min-height: 52px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cta-conversa .btn-wa-verde:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  color: #0b3627;
}

.cta-conversa .nota {
  display: block;
  margin-top: 20px;
  font-size: 13px;
  color: color-mix(in srgb, #ffffff 80%, var(--brand-teal));
}

/* --------------------------------------------------------------------------
   Botao flutuante do WhatsApp + barra fixa mobile — o HTML veio junto na
   copia do washington-nery, mas o CSS ficou la: os links renderizavam crus
   depois do rodape. Portado igual ao padrao dos outros sites (30/08).
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 999;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: 0.3s;
}

.wa-float:hover {
  background: #1ebe5a;
  color: #fff;
  transform: scale(1.06);
}

/* Barra fixa de acao no mobile: WhatsApp | Agendar */
.mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.14);
  }

  .mobile-bar a {
    padding: 14px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
  }

  .mobile-bar .bar-wa {
    background: #25d366;
    color: #fff;
  }

  .mobile-bar .bar-agendar {
    background: var(--accent-color);
    color: #fff;
  }

  .wa-float {
    display: none;
  }

  body {
    padding-bottom: 52px;
  }
}

/* --------------------------------------------------------------------------
   Alvos de toque (auditoria mobile 30/08): area tocavel de 44px sem mudar
   o visual — padding com margem negativa compensando onde o layout nao pode
   deslocar. O cartao de WhatsApp do hero ja era link inteiro; estes eram os
   que ficavam abaixo do minimo.
   -------------------------------------------------------------------------- */

/* FAQ: o padding morava no cartao (details) e o toque so pegava a linha do
   texto. Migra para o summary — visual identico, toque de 56px+. */
#faq details {
  padding: 0;
}

#faq summary {
  padding: 18px 22px;
}

#faq details p {
  margin: 0;
  padding: 0 22px 18px;
}

/* links de acao do hero e dos departamentos */
.hero .quick-actions .action-link,
.featured-departments .cta-acoes .cta-link {
  padding: 10px 6px;
  margin: -6px;
}

/* hamburguer: 28x34 vira ~48x54 sem sair do lugar */
.mobile-nav-toggle {
  padding: 10px;
  margin: -10px;
}

/* rodape: linhas de link com folga de toque; o telefone tambem */
.footer .footer-links ul a,
.footer .footer-contact a {
  display: inline-block;
  padding: 5px 0;
  margin: -5px 0;
}

/* Rodape: o mint que antecedeu o verde (escolha final do Thiago, 30/08) —
   fundo teal 10% sobre branco, filete teal e links na cor da marca */
.footer {
  background-color: color-mix(in srgb, var(--brand-teal) 10%, #ffffff);
  border-top: 4px solid var(--brand-teal);
}

.footer .footer-links ul a {
  color: var(--brand-teal-texto);
}

.footer .footer-links ul a:hover {
  /* escurece no hover — o teal puro clareava e perdia contraste no mint */
  color: var(--brand-teal-forte);
  text-decoration: underline;
}

.footer .footer-contact a {
  color: var(--brand-teal-texto);
  font-weight: 600;
}

.footer .copyright {
  border-top: 1px solid color-mix(in srgb, var(--brand-teal) 22%, transparent);
  padding-top: 18px;
}