/* ====================================================================
   VARIÁVEIS
   ==================================================================== */
:root {
  /* Paleta — nenhuma cor deve aparecer fora destas variáveis.
     Família do azul, mais vívida, a pedido do cliente (a paleta
     roxo/cinza anterior não agradou). Papel/linho/grafite passaram de
     tons quentes (bege) para tons frios, para combinar com o azul —
     o bege não combinava, mesmo depois de tirar o roxo. */
  --tinta: #102A47;
  --papel: #F3F5F8;
  --linho: #E1E7EE;
  --azul: #1560A8;
  --azul-escuro: #0E4577;
  --azul-claro: #2F86D6;
  --grafite: #262B31;
  --branco: #FFFFFF;
  --zap: #25D366;

  /* Tipografia */
  --fonte-display: 'Newsreader', serif;
  --fonte-corpo: 'Karla', sans-serif;

  /* Estrutura */
  --raio: 12px;
  --raio-botao: 18px;
  --sombra: 0 1px 3px rgba(16, 42, 71, .10);
  --sombra-hover: 0 8px 20px rgba(16, 42, 71, .18);
  --largura-container: 1120px;
  --altura-cabecalho: 68px;
  --espaco-secao-mobile: 72px;
  --espaco-secao-desktop: 112px;
}

/* ====================================================================
   RESET
   ==================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  padding-top: var(--altura-cabecalho);
}

img, picture, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

/* Base de acessibilidade: todo elemento focável precisa de foco visível */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* ====================================================================
   TIPOGRAFIA
   ==================================================================== */
body {
  font-family: var(--fonte-corpo);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--grafite);
  background-color: var(--papel);
}

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.2;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
}

h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
}

/* ====================================================================
   COMPONENTES REUTILIZÁVEIS
   ==================================================================== */

/* Container padrão de largura máxima */
.container {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Bloco de texto com largura de leitura confortável */
.texto {
  max-width: 34em;
}

/* Botão principal de CTA */
.btn-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background-color: var(--azul);
  color: var(--branco);
  border-radius: var(--raio-botao);
  padding: 16px 28px;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--sombra);
  transition: background-color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out;
}

.btn-principal svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-principal:hover {
  background-color: var(--azul-escuro);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 42, 71, .22);
}

.btn-principal:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Botão pequeno do cabeçalho */
.btn-cabecalho {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background-color: var(--azul);
  color: var(--branco);
  border-radius: var(--raio-botao);
  padding: 10px 16px;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: .875rem;
  transition: background-color .16s ease-out, transform .16s ease-out;
}

.btn-cabecalho:hover {
  background-color: var(--azul-escuro);
  transform: translateY(-1px);
}

/* Cabeçalho fixo */
.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--papel);
  border-bottom: 1px solid var(--linho);
}

.cabecalho__conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}

.cabecalho__assinatura {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.cabecalho__nome {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--tinta);
}

.cabecalho__credencial {
  font-family: var(--fonte-corpo);
  font-size: .75rem;
  color: var(--grafite);
}

/* Rodapé */
.rodape {
  background-color: var(--tinta);
  color: var(--papel);
  padding-block: 56px 32px;
}

.rodape__conteudo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(243, 245, 248, .15);
  margin-bottom: 24px;
}

.rodape__nome {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.rodape p + p {
  margin-top: 4px;
}

.rodape a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rodape a:hover {
  color: var(--azul-claro);
}

.rodape__titulo {
  font-weight: 700;
  margin-bottom: 8px;
}

.rodape__copyright {
  font-size: .875rem;
  opacity: .8;
}

.rodape__aviso {
  font-size: .8125rem;
  opacity: .75;
  margin-top: 12px;
  max-width: 34em;
}

/* Botão flutuante do WhatsApp */
.whatsapp-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--zap);
  color: var(--branco);
  box-shadow: var(--sombra);
  transition: filter .2s ease;
}

.whatsapp-flutuante svg {
  width: 28px;
  height: 28px;
}

.whatsapp-flutuante:hover {
  filter: brightness(0.92);
}

/* Botão voltar ao topo */
.voltar-topo {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 90;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linho);
  border-radius: var(--raio);
  background-color: var(--branco);
  box-shadow: var(--sombra);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.voltar-topo.is-visivel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.voltar-topo svg {
  width: 20px;
  height: 20px;
  color: var(--azul-claro);
}

/* Placeholder de foto: cor sólida até a foto real chegar,
   caminho e nome de arquivo já corretos no src */
.foto-placeholder {
  width: 100%;
  height: auto;
  background-color: var(--linho);
  object-fit: cover;
}

/* Aviso pequeno, sem caixa de destaque */
.aviso-discreto {
  margin-top: 24px;
  margin-bottom: 32px;
  color: var(--grafite);
  opacity: .65;
  font-size: .875rem;
}

/* ====================================================================
   SEÇÕES
   Fonte única de verdade para o espaçamento vertical: só .secao define
   padding-block. Nenhuma seção individual deve sobrescrever isso.
   ==================================================================== */
.secao {
  padding-block: var(--espaco-secao-mobile);
}

.secao--linho {
  background-color: var(--linho);
}

.secao--tinta {
  background-color: var(--tinta);
  color: var(--papel);
}

/* Hero com metade do respiro padrão no topo — o cabeçalho fixo já
   ocupa espaço próprio, dobrar o respiro ali ficava grande demais. */
.secao--topo {
  padding-top: calc(var(--espaco-secao-mobile) / 2);
}

.secao--tinta h1,
.secao--tinta h2,
.secao--tinta h3 {
  color: var(--papel);
}

/* Botões principais centralizados a partir do desktop, em toda seção
   depois da 01 (a hero é a única exceção — ver abaixo). */
@media (min-width: 768px) {
  .btn-principal {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  .topo__conteudo .btn-principal {
    margin-inline: 0;
  }
}

/* ---------- Seção 01 · Topo ---------- */
.topo__grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.topo__foto {
  position: relative;
  order: 1;
  width: 100%;
  margin-bottom: 20px;
}

/* Mesmo cartão decorativo atrás da foto que a seção "Quem é o Fabio"
   usa, sem legenda aqui — nome e CRP já estão no cabeçalho. */
.topo__foto::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  background-color: var(--tinta);
  border-radius: var(--raio);
  z-index: 0;
}

.topo__foto img {
  position: relative;
  z-index: 1;
  border-radius: var(--raio);
}

.topo__conteudo {
  order: 2;
}

.topo__conteudo .texto {
  margin-top: 16px;
}

.topo__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-block: 24px;
}

.topo__selos li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  color: var(--grafite);
}

.topo__selos svg {
  width: 18px;
  height: 18px;
  color: var(--azul-claro);
  flex-shrink: 0;
}

/* ---------- Seção 02 · O que a terapia pode ----------
   Itens em formato de card (fundo, raio, sombra, elevação no hover) —
   tratamento que o cliente validou e pediu para manter. */
.lista-beneficios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}

.lista-beneficios li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background-color: var(--papel);
  border-radius: var(--raio);
  padding: 20px;
  box-shadow: var(--sombra);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.lista-beneficios li:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.lista-beneficios svg {
  width: 22px;
  height: 22px;
  color: var(--azul-claro);
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform .2s ease-out;
}

.lista-beneficios li:hover svg {
  transform: scale(1.08);
}

.lista-beneficios strong {
  color: var(--tinta);
}

/* ---------- Seção 03 · Quem é o Fabio ----------
   No celular, o texto vem antes da foto (pedido do cliente, inspirado em
   referência de outro site) — por isso .sobre__conteudo vem primeiro na
   ordem visual mesmo estando depois no HTML. */
.sobre__grade {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sobre__foto-wrap {
  position: relative;
  order: 2;
  margin-bottom: 20px;
}

/* Cartão decorativo atrás da foto — mesma ideia de "camadas" da
   referência que o cliente gostou, com nossa paleta em vez da dele. */
.sobre__foto-wrap::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  background-color: var(--tinta);
  border-radius: var(--raio);
  z-index: 0;
}

.sobre__foto {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: var(--raio);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Legenda com nome + CRP sobreposta na base da foto */
.sobre__legenda {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background-color: var(--branco);
  border-radius: var(--raio);
  padding: 12px 16px;
  box-shadow: var(--sombra-hover);
}

.sobre__legenda-nome {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--tinta);
}

.sobre__legenda-credencial {
  font-size: .8125rem;
  color: var(--grafite);
  opacity: .75;
}

.sobre__conteudo {
  order: 1;
}

.sobre__conteudo h2 {
  margin-bottom: 20px;
}

.sobre__conteudo .texto {
  margin-bottom: 32px;
}

.sobre__conteudo .texto p + p {
  margin-top: 16px;
}


/* ---------- Seção 04 · Análise na prática ----------
   Stepper de círculos numerados ligados por uma linha, inspirado numa
   referência que o cliente indicou — passa ideia de progressão melhor
   que a grade de cards que tínhamos antes. Sigilo fica de fora do
   stepper, como um cartão de destaque à parte (não é um "passo"). */
.passos {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}

.passos::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background-image: repeating-linear-gradient(to bottom, var(--linho) 0 6px, transparent 6px 14px);
}

.passos__item {
  position: relative;
  padding-left: 76px;
}

.passos__numero {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--azul);
  background-color: var(--papel);
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--azul);
}

.passos__item h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.passos__item p {
  font-size: .9375rem;
}

/* Cartão de sigilo — mesmo tratamento visual de destaque escuro,
   agora como elemento único depois do stepper, não parte de uma grade. */
.analise__card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 40px;
  margin-bottom: 40px;
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.analise__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.analise__icone {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.analise__icone svg {
  width: 20px;
  height: 20px;
}

.analise__card h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.analise__card p {
  font-size: .9375rem;
}

.analise__card--escuro {
  background-color: var(--tinta);
  color: var(--papel);
}

.analise__card--escuro h3 {
  color: var(--papel);
}

.analise__card--escuro p {
  opacity: .85;
}

.analise__card--escuro .analise__icone {
  background-color: rgba(243, 245, 248, .15);
}

.analise__card--escuro .analise__icone svg {
  color: var(--azul-claro);
}

/* ---------- Seção 05 · Reflexão sobre as dores ----------
   Mesmo tratamento de card da seção 02, por coerência visual. */
.cards-dores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}

.card-dor {
  background-color: var(--linho);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.card-dor:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.fecho-centralizado {
  max-width: 38em;
  margin: 40px auto 32px;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--tinta);
}

/* ---------- Seção 06 · Terapia focada em você ----------
   Redesenhada para ficar mais visual e com hierarquia de fonte
   consistente: bloco A vira grade de itens curtos com ícone, bloco B
   vira um cartão de destaque único (rótulo → número grande → nota). */
.terapia-blocos {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-block: 32px 40px;
}

.terapia-blocos h3 {
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.online__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.online__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--branco);
  border-radius: var(--raio);
  padding: 14px 16px;
  box-shadow: var(--sombra);
}

.online__item svg {
  width: 18px;
  height: 18px;
  color: var(--azul-claro);
  flex-shrink: 0;
  margin-top: 2px;
}

.online__item p {
  font-size: .9375rem;
}

.horario-card {
  background-color: var(--tinta);
  color: var(--papel);
  border-radius: var(--raio);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.horario-card svg {
  width: 26px;
  height: 26px;
  color: var(--azul-claro);
  margin-bottom: 6px;
}

.horario-card__dias {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .8;
}

.horario-card__horas {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--papel);
  margin-block: 2px 8px;
}

.horario-card__nota {
  font-size: .9375rem;
  opacity: .85;
  max-width: 28em;
}

/* ---------- Seção 08 · Perguntas frequentes ---------- */
.acordeao {
  margin-block: 32px 40px;
  border-top: 1px solid var(--linho);
}

.acordeao__item {
  border-bottom: 1px solid var(--linho);
}

.acordeao__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  text-align: left;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tinta);
  border-radius: var(--raio);
  transition: background-color .15s ease;
}

.acordeao__pergunta:hover {
  background-color: var(--linho);
}

.acordeao__icone {
  width: 20px;
  height: 20px;
  color: var(--azul-claro);
  flex-shrink: 0;
  transition: transform .2s ease;
}

.acordeao__pergunta[aria-expanded="true"] .acordeao__icone {
  transform: rotate(180deg);
}

.acordeao__resposta {
  max-width: 34em;
  padding-bottom: 20px;
  color: var(--grafite);
}

/* ====================================================================
   "LEIA ANTES" — conteúdo compartilhado entre a página leia-antes.html
   (fallback sem JS / link direto) e o modal (.modal-leia-antes), que é
   a experiência principal a partir do index.html e da política.
   ==================================================================== */
.avisos {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-block: 32px;
}

.aviso-bloco {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.aviso-bloco svg {
  width: 22px;
  height: 22px;
  color: var(--azul-claro);
  flex-shrink: 0;
  margin-top: 2px;
}

.aviso-bloco h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.aviso-bloco p {
  font-size: .9375rem;
  color: var(--grafite);
}

/* Aviso de emergência: precisa ser bem visível, mas sem parecer alarme
   de erro — por isso filete e fundo neutros, não vermelho. */
.aviso-emergencia {
  background-color: var(--linho);
  border-left: 3px solid var(--azul);
  border-radius: var(--raio);
  padding: 16px 20px;
  margin-block: 32px;
}

.aviso-emergencia p {
  font-size: .9375rem;
  color: var(--grafite);
}

.leia-antes__voltar {
  display: block;
  text-align: center;
  margin-top: 24px;
  font-size: .875rem;
  color: var(--grafite);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ====================================================================
   MODAL "LEIA ANTES"
   Versão em pop-up do conteúdo de leia-antes.html, usada a partir do
   index.html e da política de privacidade. Os links continuam com
   href="leia-antes.html" de verdade (funcionam sem JS); o JS intercepta
   o clique e abre o modal em vez de navegar — ver js/script.js.
   ==================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(16, 42, 71, .55);
}

.modal-overlay[hidden] {
  display: none;
}

body.modal-aberto {
  overflow: hidden;
}

.modal-leia-antes {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--papel);
  border-radius: var(--raio);
  padding: 32px 24px;
  box-shadow: var(--sombra-hover);
}

.modal-leia-antes h2 {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  padding-right: 32px;
}

.modal__fechar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--grafite);
  transition: background-color .15s ease;
}

.modal__fechar:hover {
  background-color: var(--linho);
}

.modal__fechar svg {
  width: 20px;
  height: 20px;
}

.modal-leia-antes .avisos,
.modal-leia-antes .aviso-emergencia {
  margin-block: 24px;
}

/* ====================================================================
   PÁGINA · politica-de-privacidade.html
   ==================================================================== */
.politica {
  max-width: 42em;
  margin-top: 32px;
}

.politica h2 {
  font-size: 1.3rem;
  margin-top: 40px;
  margin-bottom: 12px;
}

.politica p {
  margin-bottom: 12px;
}

.politica ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 12px;
}

.politica li {
  margin-bottom: 6px;
}

.politica__atualizacao {
  margin-top: 40px;
  font-size: .875rem;
  color: var(--grafite);
  opacity: .7;
}

/* ====================================================================
   RESPONSIVO (a partir de 768px)
   ==================================================================== */
@media (min-width: 768px) {
  :root {
    --altura-cabecalho: 76px;
  }

  .secao {
    padding-block: var(--espaco-secao-desktop);
  }

  .secao--topo {
    padding-top: calc(var(--espaco-secao-desktop) / 2);
  }

  /* No desktop, textos curtos de introdução/subtítulo (fora das colunas
     estreitas ao lado de foto) tinham quebra de linha cedo demais e
     desnecessária, com sobra de espaço horizontal na seção. Larguras
     de coluna (.topo__conteudo, .sobre__conteudo) continuam mais
     estreitas que isso, então não são afetadas por este aumento. */
  .texto {
    max-width: 48em;
  }

  .acordeao__resposta {
    max-width: 48em;
  }

  .btn-cabecalho {
    width: auto;
  }

  .cabecalho__conteudo {
    padding-block: 18px;
  }

  .topo__grade {
    flex-direction: row;
    gap: 48px;
  }

  .topo__foto {
    order: 2;
    flex: 0 0 42%;
    margin-bottom: 0;
  }

  .topo__conteudo {
    order: 1;
    flex: 1;
  }

  .lista-beneficios {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grid em vez de flex aqui: <img> como item flex com aspect-ratio
     tem comportamento inconsistente de flex-basis entre navegadores.
     Grid resolve a largura das colunas de forma muito mais previsível. */
  .sobre__grade {
    display: grid;
    grid-template-columns: 44% 1fr;
    align-items: start;
    gap: 48px;
  }

  /* No desktop a ordem volta ao natural do HTML (foto à esquerda,
     texto à direita) — a inversão do celular não se aplica aqui. */
  .sobre__foto-wrap {
    order: 0;
    margin-bottom: 0;
  }

  .sobre__conteudo {
    order: 0;
    min-width: 0;
  }

  .topo__foto img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  /* Stepper horizontal no desktop: linha conectora na horizontal,
     números centralizados acima do título/texto de cada passo. */
  .passos {
    flex-direction: row;
    gap: 24px;
  }

  .passos::before {
    left: 28px;
    right: 28px;
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
    background-image: repeating-linear-gradient(to right, var(--linho) 0 6px, transparent 6px 14px);
  }

  .passos__item {
    flex: 1;
    padding-left: 0;
    padding-top: 76px;
  }

  .passos__numero {
    left: 50%;
    transform: translateX(-50%);
  }

  .cards-dores {
    grid-template-columns: repeat(2, 1fr);
  }

  .terapia-blocos {
    flex-direction: row;
    align-items: stretch;
  }

  .terapia-blocos > div {
    flex: 1;
  }

  .online__grade {
    grid-template-columns: repeat(2, 1fr);
  }

  .horario-card {
    justify-content: center;
  }
}