/* ============================================
   ORTHOPRIDE — RIBEIRÃO DAS NEVES / MG
   Design system da franquia, extraído do bundle do orthopride.com.br.
   Mobile-first. Vanilla CSS, sem framework.
   ============================================ */

/* Fontes da própria marca, servidas localmente. */
@font-face { font-family: 'Brandon'; src: url('/assets/fontes/brandontext-light.ttf') format('truetype');   font-weight: 300; font-display: swap; }
@font-face { font-family: 'Brandon'; src: url('/assets/fontes/brandontext-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Brandon'; src: url('/assets/fontes/brandontext-medium.ttf') format('truetype');  font-weight: 500; font-display: swap; }
@font-face { font-family: 'Brandon'; src: url('/assets/fontes/brandontext-bold.ttf') format('truetype');    font-weight: 700; font-display: swap; }
@font-face { font-family: 'Brandon'; src: url('/assets/fontes/brandontext-black.ttf') format('truetype');   font-weight: 900; font-display: swap; }

:root {
  --laranja:        #F58226;
  --laranja-fim:    #F26F39;
  --laranja-claro:  #FFA245;
  --laranja-escuro: #CC821F;
  --escuro:         #353941;
  --preto-texto:    #2B2B2B;
  --texto:          #5A697E;
  --texto-aux:      #465974;
  --cinza-fundo:    #EFEFEF;
  --cinza-medio:    #F5F5F5;
  --linha:          #D8DAE8;
  --branco:         #FFFFFF;

  --fonte-titulo:   'Brandon', 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo:    'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;

  --raio:           4px;
  --raio-card:      8px;
  --largura:        1280px;
  --pad-lateral:    clamp(1.25rem, 4vw, 2rem);
  --transicao:      300ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, select { font: inherit; }
ul, ol { list-style: none; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--pad-lateral); }

/* Acessibilidade de teclado. */
.pular-para-conteudo {
  position: absolute; left: 12px; top: 12px; z-index: 300;
  background: var(--escuro); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--raio); font-weight: 700; font-family: var(--fonte-titulo);
  transform: translateY(-200%); transition: transform .2s ease;
}
.pular-para-conteudo:focus { transform: translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--laranja); outline-offset: 3px; border-radius: var(--raio);
}

/* === TIPOGRAFIA ===
   Assinatura da marca: título escuro com UMA palavra em laranja. */
.secao__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.875rem, 4.4vw, 2.875rem);
  line-height: 1.05;
  color: var(--escuro);
  margin-bottom: 2rem;
  text-wrap: balance;
}
.secao__titulo span { color: var(--laranja); }
.secao__titulo--centro { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.secao__texto {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.45;
  color: var(--texto);
  max-width: 800px;
  text-wrap: pretty;
}
.secao__texto--centro { text-align: center; margin: 0 auto 3.5rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: .75rem;
}
/* Sobre o laranja da marca, branco mede 2.57:1 e reprova em qualquer tamanho.
   O escuro oficial (#353941) mede 4.61:1 e passa até em corpo de texto. */
.eyebrow--claro { color: var(--preto-texto); }

/* === BOTÕES === */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1rem;
  padding: 16px 24px; border-radius: var(--raio); min-height: 48px;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao);
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--laranja { background: var(--laranja); color: #fff; }
.btn--laranja:hover { background: var(--laranja-escuro); }
.btn--branco { background: #fff; color: var(--escuro); }
.btn--branco:hover { background: var(--cinza-fundo); }
.btn--escuro { background: var(--escuro); color: #fff; }
.btn--contorno {
  background: transparent; color: var(--laranja);
  border: 2px solid var(--laranja); padding: 8px 16px;
  font-size: .875rem; min-height: 40px;
}
.btn--contorno:hover { background: var(--laranja); color: #fff; }
.btn--grande { padding: 18px 34px; font-size: 1.0625rem; }
.btn--cheio { width: 100%; }

/* === TOPO === */
.topo {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--linha);
}
.topo__inner {
  max-width: var(--largura); margin: 0 auto;
  padding: .75rem var(--pad-lateral);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topo__marca { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.topo__logo { width: auto; height: 30px; flex: 0 0 auto; }
.topo__unidade {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: .8125rem; color: var(--texto-aux);
  padding-left: .75rem; border-left: 1px solid var(--linha);
  line-height: 1.2; white-space: nowrap;
}
.topo__cta { flex: 0 0 auto; }
/* Em tela estreita o nome da cidade quebrava em quatro linhas e o CTA subia por
   cima. A cidade some do topo (já aparece no hero, no rodapé e no mapa). */
@media (max-width: 620px) {
  .topo__logo { height: 22px; }
  .topo__unidade {
    font-size: .6875rem; padding-left: .5rem;
    white-space: normal; max-width: 8.5ch; line-height: 1.15;
  }
  .topo__cta { padding: 7px 12px; font-size: .75rem; }
  .topo__inner { gap: .5rem; padding: .625rem var(--pad-lateral); }
}
@media (max-width: 380px) {
  .topo__cta { font-size: .6875rem; padding: 7px 10px; }
}

/* === HERO === */
.hero { position: relative; background: var(--laranja); overflow: hidden; }
.hero__foto { display: block; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero__conteudo {
  position: absolute; inset: 0;
  max-width: var(--largura); margin: 0 auto;
  padding: 0 var(--pad-lateral);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__titulo {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1.15; color: var(--escuro);
  margin-bottom: 1rem; max-width: 12ch;
  text-wrap: balance;
}
/* A palavra de destaque vira um bloco branco: mantém o contraste em 11:1 e
   ecoa o botão branco que a franquia usa sobre laranja. */
.hero__titulo span {
  color: var(--escuro); background: #fff;
  padding: 0 .18em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.hero__sub {
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  line-height: 1.35; color: var(--preto-texto); margin-bottom: 1.75rem; max-width: 26ch;
}
.hero__micro { margin-top: 1rem; font-size: .8125rem; color: var(--preto-texto); }
.hero .btn { align-self: flex-start; }

/* Mobile: a pessoa fica em cima e o texto na área laranja de baixo.
   O texto sai do posicionamento absoluto e entra no fluxo, logo abaixo da foto.
   Sobrepor era o que estava jogando a headline em cima do cabelo dela. */
@media (max-width: 720px) {
  .hero { display: flex; flex-direction: column; }
  .hero__foto { flex: 0 0 auto; }
  .hero__conteudo {
    position: static; inset: auto;
    padding: 0 var(--pad-lateral) 2.75rem;
    /* A imagem já termina em laranja chapado, então o texto sobe para dentro
       dessa área sem encostar na pessoa. */
    margin-top: -16vh;
  }
  .hero__titulo, .hero__sub { max-width: none; }
  /* O botão flutuante fica no canto inferior direito e encostava no subtítulo. */
  .hero__sub, .hero__micro { padding-right: 4.5rem; }
}
/* Desktop: a pessoa fica à esquerda e o texto ocupa a metade limpa da direita. */
@media (min-width: 721px) {
  .hero__conteudo { align-items: flex-end; text-align: right; }
  .hero__conteudo > * { max-width: 46%; }
  .hero__titulo, .hero__sub { max-width: 46%; margin-left: auto; }
  .hero .btn { align-self: flex-end; }
}

/* === PRÊMIOS === */
.premios { padding: clamp(3rem, 7vw, 5.5rem) 0; background: #fff; }
.premios__figura { margin: 0 auto 2.5rem; max-width: 780px; }
.premios__lista {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: 900px; margin: 0 auto;
}
.premios__lista li {
  background: var(--cinza-fundo); border-radius: var(--raio-card);
  padding: 1.25rem 1.5rem; border-left: 4px solid var(--laranja);
}
.premios__lista strong {
  display: block; font-family: var(--fonte-titulo); font-weight: 700;
  font-size: 1.125rem; color: var(--escuro); margin-bottom: .25rem;
}
.premios__lista span { font-size: .9375rem; color: var(--texto); }
@media (min-width: 800px) { .premios__lista { grid-template-columns: repeat(3, 1fr); } }

/* === TRATAMENTOS === */
.tratamentos { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--cinza-fundo); }
.abas {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem;
  scrollbar-width: none; -ms-overflow-style: none;
  margin-bottom: .5rem;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  flex: 0 0 auto;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .9375rem;
  padding: 12px 20px; border-radius: var(--raio);
  background: #fff; color: var(--texto-aux); border: 1px solid var(--linha);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
  min-height: 44px;
}
.aba:hover { border-color: var(--laranja); color: var(--laranja); }
.aba.is-ativa { background: var(--laranja); color: #fff; border-color: var(--laranja); }
.abas__dica { font-size: .8125rem; color: var(--texto); margin-bottom: 1.5rem; }
@media (min-width: 900px) { .abas { justify-content: center; } .abas__dica { display: none; } }

.trilho {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  gap: 0;
}
.trilho::-webkit-scrollbar { display: none; }
.painel {
  flex: 0 0 100%; scroll-snap-align: start;
  background: #fff; border-radius: var(--raio-card);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center;
}
.painel__titulo {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.125rem); line-height: 1.05;
  color: var(--escuro); margin-bottom: .875rem;
}
.painel__titulo span { color: var(--laranja); }
.painel__texto p { font-size: 1.0625rem; line-height: 1.5; color: var(--texto); margin-bottom: 1.25rem; text-wrap: pretty; }
.painel__bullets { margin-bottom: 1.5rem; }
.painel__bullets li {
  position: relative; padding-left: 1.75rem; margin-bottom: .625rem;
  font-size: 1rem; color: var(--texto); line-height: 1.45;
}
.painel__bullets li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: .625rem; height: .625rem; border-radius: 50%; background: var(--laranja);
}
.painel__selos { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.painel__selos img { height: 34px; width: auto; }
.painel__figura { order: -1; display: flex; justify-content: center; }
.painel__figura img { width: min(280px, 70vw); height: auto; }
@media (min-width: 860px) {
  .painel { grid-template-columns: 1.25fr .85fr; gap: 3rem; }
  .painel__figura { order: 0; }
  .painel__figura img { width: 100%; max-width: 340px; }
}
.tratamentos__rt { margin-top: 1.75rem; font-size: .8125rem; color: var(--texto); text-align: center; }

/* === PASSOS === */
.passos { padding: clamp(3rem, 7vw, 5.5rem) 0; background: #fff; }
.passos__lista { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.passo {
  background: var(--cinza-medio); border-radius: var(--raio-card);
  padding: 1.75rem; position: relative;
}
.passo__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--laranja); color: #fff;
  font-family: var(--fonte-titulo); font-weight: 900; font-size: 1.25rem;
  margin-bottom: 1rem; font-variant-numeric: tabular-nums;
}
.passo h3 {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem;
  color: var(--escuro); margin-bottom: .5rem;
}
.passo p { font-size: 1rem; color: var(--texto); line-height: 1.45; text-wrap: pretty; }
@media (min-width: 700px) { .passos__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .passos__lista { grid-template-columns: repeat(4, 1fr); } }

/* === UNIDADE === */
.unidade { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--cinza-fundo); }
.unidade__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
/* Mosaico com as fotos reais da unidade: a da recepção manda, porque é a que
   mostra a marca aplicada no ponto. */
.unidade__fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.unidade__foto {
  width: 100%; object-fit: cover;
  border-radius: var(--raio-card); aspect-ratio: 3 / 4;
}
/* A da recepção é a que mostra a marca aplicada no ponto, então ocupa a
   largura inteira em vez de dividir espaço. */
.unidade__foto--alta { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.unidade__texto p { font-size: 1.0625rem; line-height: 1.5; color: var(--texto); margin-bottom: 1rem; text-wrap: pretty; }
.unidade__dados { margin: 1.75rem 0; }
.unidade__dados li {
  padding: .875rem 0; border-bottom: 1px solid var(--linha);
  display: grid; grid-template-columns: 1fr; gap: .125rem;
}
.unidade__dados strong {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--laranja);
}
.unidade__dados span { font-size: 1rem; color: var(--escuro); }
@media (min-width: 860px) {
  .unidade__grid { grid-template-columns: .8fr 1.2fr; gap: 4rem; }
  .unidade__dados li { grid-template-columns: 140px 1fr; gap: 1rem; align-items: baseline; }
}

/* === AVALIAÇÕES === */
.avaliacoes { padding: clamp(3rem, 7vw, 5.5rem) 0; background: #fff; }
.avaliacoes__grade { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.avaliacao {
  background: var(--cinza-medio); border-radius: var(--raio-card);
  padding: 1.5rem; display: flex; flex-direction: column;
}
.avaliacao__estrelas { color: #FFB300; font-size: 1.0625rem; letter-spacing: .1em; margin-bottom: .75rem; }
.avaliacao p { font-size: 1rem; line-height: 1.5; color: var(--escuro); margin-bottom: 1.25rem; flex: 1; text-wrap: pretty; }
.avaliacao footer { display: flex; flex-direction: column; gap: .125rem; }
.avaliacao strong { font-family: var(--fonte-titulo); font-weight: 700; font-size: .9375rem; color: var(--escuro); }
.avaliacao span { font-size: .8125rem; color: var(--texto); }
@media (min-width: 700px) { .avaliacoes__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .avaliacoes__grade { grid-template-columns: repeat(3, 1fr); } }

/* === MAPA === */
.mapa { height: clamp(280px, 40vw, 420px); background: var(--cinza-fundo); }
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* === FAQ === */
.faq { padding: clamp(3rem, 7vw, 5.5rem) 0; background: #fff; }
.faq__lista { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item summary {
  list-style: none; cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.125rem); color: var(--escuro);
  min-height: 44px; display: flex; align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--laranja); border-bottom: 2px solid var(--laranja);
  transform: rotate(45deg); transition: transform var(--transicao);
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__resposta { padding: 0 0 1.5rem; }
.faq__resposta p { font-size: 1rem; line-height: 1.55; color: var(--texto); text-wrap: pretty; }

/* === CTA FINAL === */
.cta-final {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-fim) 100%);
  text-align: center; position: relative; overflow: hidden;
}
/* Mesmo motivo do hero: sobre o laranja, o branco reprova no contraste.
   Aqui o fundo é o gradiente, onde o branco mede só 2.9:1. */
.cta-final__titulo {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.75rem, 4.4vw, 2.875rem); line-height: 1.14;
  color: var(--preto-texto); margin-bottom: 1rem; max-width: 18ch;
  margin-left: auto; margin-right: auto; text-wrap: balance;
}
.cta-final__titulo span {
  color: var(--escuro); background: #fff;
  padding: 0 .18em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.cta-final__sub {
  font-size: clamp(1rem, 2vw, 1.1875rem); color: var(--preto-texto);
  max-width: 46ch; margin: 0 auto 2rem; text-wrap: pretty;
}
.cta-final__thop {
  position: absolute; right: -20px; bottom: -20px;
  width: clamp(110px, 16vw, 180px); height: auto;
  opacity: .9; pointer-events: none;
}
@media (max-width: 620px) { .cta-final__thop { display: none; } }

/* === RODAPÉ === */
.rodape { background: var(--escuro); color: #fff; padding: 3rem 0 2rem; text-align: center; }
.rodape__logo { margin: 0 auto 1.5rem; height: 34px; width: auto; filter: brightness(0) invert(1); }
.rodape__info p { font-size: .9375rem; line-height: 1.55; color: rgba(255,255,255,.86); margin-bottom: .375rem; }
.rodape__links { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.rodape__links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  transition: background var(--transicao), border-color var(--transicao);
}
.rodape__links a:hover { background: var(--laranja); border-color: var(--laranja); }
.rodape__legal { font-size: .8125rem; color: rgba(255,255,255,.6); padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.14); }

/* === MODAL === */
.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(41,45,65,.62);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}
.modal.is-aberto { opacity: 1; visibility: visible; }
body.modal-aberto { overflow: hidden; }
.modal__caixa {
  background: #fff; border-radius: var(--raio-card);
  width: 100%; max-width: 520px; padding: clamp(1.5rem, 4vw, 2.5rem);
  margin: auto; position: relative;
  transform: translateY(12px); transition: transform var(--transicao);
}
.modal.is-aberto .modal__caixa { transform: translateY(0); }
.modal__fechar {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px; font-size: 1.75rem; line-height: 1;
  color: var(--texto); border-radius: var(--raio);
}
.modal__fechar:hover { color: var(--escuro); }
.modal__titulo {
  font-family: var(--fonte-titulo); font-weight: 700;
  font-size: clamp(1.375rem, 3.4vw, 1.75rem); line-height: 1.1;
  color: var(--escuro); margin-bottom: .5rem; padding-right: 2.5rem;
}
.modal__sub { font-size: .9375rem; color: var(--texto); margin-bottom: 1.5rem; }

.campo { margin-bottom: 1.25rem; }
.campo__label {
  display: block; font-family: var(--fonte-titulo); font-weight: 700;
  font-size: .875rem; color: var(--escuro); margin-bottom: .5rem;
}
.campo__input {
  width: 100%; padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  font-size: 1rem; color: var(--escuro); background: #fff;
  transition: border-color var(--transicao);
}
.campo__input:focus { border-color: var(--laranja); outline: none; }
.campo__input:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
select.campo__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--laranja) 50%), linear-gradient(135deg, var(--laranja) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }

.opcoes { display: flex; flex-direction: column; gap: .5rem; }
.opcao {
  display: flex; align-items: center; gap: .625rem;
  padding: 10px 14px; min-height: 48px;
  border: 1px solid var(--linha); border-radius: var(--raio);
  cursor: pointer; transition: border-color var(--transicao), background var(--transicao);
  font-size: .9375rem; color: var(--escuro);
}
.opcao:hover { border-color: var(--laranja); }
.opcao input { accent-color: var(--laranja); width: 18px; height: 18px; flex: 0 0 auto; }
.opcao:has(input:checked) { border-color: var(--laranja); background: rgba(245,130,38,.07); }

.campo__legal { font-size: .75rem; line-height: 1.45; color: var(--texto); margin-bottom: 1rem; }
.form-aviso { font-size: .875rem; margin-bottom: .875rem; min-height: 0; }
.form-aviso.is-erro { color: #ec1751; }
.form-aviso.is-ok { color: #2f8f5b; }

.modal__sucesso { text-align: center; padding: 1rem 0; }
.modal__sucesso svg { width: 56px; height: 56px; color: var(--laranja); margin: 0 auto 1rem; }
.modal__sucesso h3 {
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.375rem;
  color: var(--escuro); margin-bottom: .5rem;
}
.modal__sucesso p { font-size: 1rem; color: var(--texto); margin-bottom: 1.5rem; }

/* O botão flutuante não pode cobrir o CTA do fim da página. */
@media (max-width: 480px) { .rodape { padding-bottom: 6rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .trilho { scroll-behavior: auto; }
}

/* Botão flutuante de WhatsApp — o caminho de fuga de quem não quer preencher
   formulário nenhum. Fica acima do sticky bar do mobile. */
.whatsapp-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: transform .2s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.06); }
@media (max-width: 640px) {
  .whatsapp-float { bottom: 84px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float { transition: none; } }


/* Widget de conversa do WhatsApp — molde CliniAmp
   ------------------------------------------------------------------
   Nasceu na LP do Dr. João Quirino e virou molde em 01/09/2026. Substitui o
   modal de sucesso: em vez de abrir um popup por cima da página, a pessoa
   digita o WhatsApp dentro de uma conversa que já parece começada.

   Todas as cores saem de variáveis com valor de reserva, então o arquivo
   funciona em LP que não tem design system nenhum. Para casar com a marca do
   cliente, defina --wa-marca e --wa-marca-texto no :root da LP.             */

:root {
  --wa-verde: #25D366;
  --wa-marca: var(--brand-navy, var(--cta-primary, #111827));
  --wa-marca-texto: var(--text-on-navy, #fff);
  --wa-fundo: var(--bg-primary, #fff);
  --wa-texto: var(--text-primary, #1f2937);
  --wa-balao-in: var(--bg-secondary, #f3f4f6);
}

.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wa-verde);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  transition: transform .2s ease;
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { transform: scale(1.06); }

.wa-chat {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 61;
  width: min(340px, calc(100vw - 40px));
  background: var(--wa-fundo);
  color: var(--wa-texto);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.wa-chat.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.wa-chat__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  background: var(--wa-marca);
  color: var(--wa-marca-texto);
}
.wa-chat__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .15);
  display: inline-flex; align-items: center; justify-content: center;
}
.wa-chat__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
/* Nem toda LP tem logo em arquivo. A inicial evita o ícone de imagem quebrada. */
.wa-chat__inicial { font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; }
.wa-chat__ident { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.wa-chat__ident strong { font-size: .95rem; font-weight: 600; }
.wa-chat__ident small { font-size: .72rem; opacity: .75; display: flex; align-items: center; gap: .35rem; }
.wa-chat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-verde); display: inline-block; }
.wa-chat__close {
  background: none; border: 0; color: inherit;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  opacity: .65; padding: 0 .15rem;
}
.wa-chat__close:hover { opacity: 1; }

.wa-chat__body {
  padding: 1rem;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--wa-fundo);
}
.wa-chat__msg {
  max-width: 85%;
  padding: .55rem .7rem .35rem;
  border-radius: 12px;
  font-size: .87rem;
  line-height: 1.4;
  position: relative;
}
.wa-chat__msg p { margin: 0; }
.wa-chat__msg--in { align-self: flex-start; background: var(--wa-balao-in); border-bottom-left-radius: 4px; }
.wa-chat__msg--out { align-self: flex-end; background: #d9fdd3; color: #111b21; border-bottom-right-radius: 4px; }
.wa-chat__hora { display: block; text-align: right; font-size: .62rem; opacity: .5; margin-top: .15rem; }

.wa-chat__typing { display: inline-flex; gap: 3px; padding: .2rem 0; }
.wa-chat__typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: wa-pulso 1.2s infinite;
}
.wa-chat__typing i:nth-child(2) { animation-delay: .18s; }
.wa-chat__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes wa-pulso { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .85; } }

.wa-chat__cta {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .5rem; padding: .5rem .7rem;
  border-radius: 10px;
  background: var(--wa-verde); color: #fff;
  font-size: .82rem; font-weight: 600; text-decoration: none;
}
.wa-chat__cta svg { width: 17px; height: 17px; }

.wa-chat__aviso { margin: 0; padding: 0 1rem .5rem; font-size: .68rem; opacity: .6; }
.wa-chat__erro { margin: 0; padding: 0 1rem .4rem; font-size: .75rem; color: #b91c1c; }

.wa-chat__form { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; align-items: center; }
.wa-chat__input {
  flex: 1 1 auto; min-width: 0;
  padding: .6rem .75rem;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 999px;
  font-size: .9rem;
  font-family: inherit;
  color: var(--wa-texto);
  background: var(--wa-fundo);
}
.wa-chat__input:focus { outline: 2px solid var(--wa-verde); outline-offset: 1px; }
.wa-chat__send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: var(--wa-verde); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.wa-chat__send svg { width: 19px; height: 19px; }
.wa-chat__send:disabled { opacity: .55; cursor: default; }

@media (max-width: 640px) {
  .whatsapp-float { bottom: 84px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 28px; height: 28px; }
  .wa-chat { bottom: 148px; right: 12px; }
  .wa-chat__body { max-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float, .wa-chat { transition: none; }
  .wa-chat__typing i { animation: none; }
}