/* ==========================================================================
   Navegacao e ajustes do site novo — escrito a mao, NAO vem da base visual.
   O site atual nao tem menu nenhum (o cabecalho so tem a logo), e o site novo
   tem 19 enderecos. Tudo aqui segue a identidade medida em
   site/referencia-visual.md: Poppins, verde #25B45F, titulos #123226.
   ========================================================================== */

:root{
  --rp-verde:#25B45F; --rp-verde-esc:#158348; --rp-verde-prof:#123226;
  --rp-laranja:#FF9138; --rp-laranja-esc:#E97821;
  --rp-texto:#65716B; --rp-claro-1:#EBF7F0; --rp-claro-3:#F5FAF7;
  --rp-borda:#DFECE5;
}

/* ---------- cabecalho com menu ---------- */
.rp-nav{position:sticky;top:0;z-index:999;background:#EBF7F0;border-bottom:1px solid rgba(18,50,38,.06)}
.rp-nav-inner{max-width:var(--rp-largura);margin-inline:auto;padding:22px;
  display:flex;align-items:center;gap:28px}
.rp-nav-logo{flex:0 0 auto;display:flex}
.rp-nav-logo img{width:160px;height:auto}   /* 160px ≈ 46px de altura → header de 90px */
.rp-nav-links{display:flex;align-items:center;gap:22px;margin-left:auto;list-style:none}
.rp-nav-links a{font-size:13.5px;font-weight:600;color:var(--rp-verde-prof);
  text-decoration:none;letter-spacing:-.01em;transition:color .2s ease}
.rp-nav-links a:hover,.rp-nav-links a[aria-current="page"]{color:var(--rp-verde)}
.rp-nav-cta{background:var(--rp-verde);color:#fff !important;border-radius:12px;
  padding:11px 18px;font-size:13px;font-weight:700;white-space:nowrap;
  box-shadow:0 10px 22px rgba(37,180,95,.22);transition:transform .2s ease}
.rp-nav-cta:hover{transform:translateY(-2px);color:#fff !important}

/* menu no celular */
.rp-nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:8px;
  cursor:pointer;color:var(--rp-verde-prof)}
.rp-nav-toggle svg{display:block}
@media(max-width:900px){
  .rp-nav-inner{padding:16px;gap:12px}
  .rp-nav-logo img{width:138px}   /* ≈ 40px de altura → header de 72px */
  .rp-nav-toggle{display:block}
  .rp-nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:#EBF7F0;padding:8px 16px 18px;
    border-bottom:1px solid var(--rp-borda);display:none}
  .rp-nav[data-aberto="1"] .rp-nav-links{display:flex}
  .rp-nav-links li{border-top:1px solid rgba(18,50,38,.07)}
  .rp-nav-links a{display:block;padding:14px 2px;font-size:15px}
  .rp-nav-cta{text-align:center;margin-top:12px;padding:14px}
}

/* ---------- topo das paginas internas (nao e o hero da home) ---------- */
.rp-topo{background:var(--rp-claro-1);padding:56px 22px 48px}
.rp-topo-inner{max-width:1024px;margin-inline:auto}
.rp-trilha{font-size:12px;color:var(--rp-texto);margin-bottom:16px}
.rp-trilha a{color:var(--rp-texto);text-decoration:none}
.rp-trilha a:hover{color:var(--rp-verde)}
.rp-topo h1{font-size:clamp(28px,4.2vw,42px);font-weight:800;line-height:1.08;
  letter-spacing:-.035em;color:var(--rp-verde-prof);max-width:20ch}
.rp-topo-abertura{margin-top:20px;max-width:62ch}
.rp-topo-abertura p{font-size:15.5px;line-height:1.75;color:var(--rp-texto);margin-bottom:14px}
.rp-topo-acoes{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- corpo de texto das paginas internas ---------- */
.rp-corpo{padding:56px 22px}
.rp-corpo-inner{max-width:1024px;margin-inline:auto}
.rp-corpo h2{font-size:clamp(23px,3vw,32px);font-weight:800;line-height:1.14;
  letter-spacing:-.03em;color:var(--rp-verde-prof);margin:44px 0 16px}
.rp-corpo h2:first-child{margin-top:0}
.rp-corpo h3{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.02em;
  color:var(--rp-verde-prof);margin:26px 0 8px}
.rp-corpo p{font-size:15.5px;line-height:1.78;color:var(--rp-texto);margin-bottom:14px;max-width:70ch}
.rp-corpo ul{margin:0 0 16px;padding:0;list-style:none;max-width:70ch}
.rp-corpo ul li{position:relative;padding-left:26px;margin-bottom:9px;
  font-size:15px;line-height:1.7;color:var(--rp-texto)}
.rp-corpo ul li::before{content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;
  border-radius:50%;background:var(--rp-verde)}
.rp-corpo a{color:var(--rp-verde-esc);text-decoration:underline;text-underline-offset:3px}

/* aviso de seguranca (labirintite, pediatria) */
.rp-aviso{border-left:4px solid var(--rp-laranja);background:#FFF7F0;
  padding:16px 18px;border-radius:0 12px 12px 0;margin:22px 0;max-width:70ch}
.rp-aviso p{margin:0;color:#7a5326;font-size:14.5px}

/* ---------- cartoes do hub de especialidades ---------- */
.rp-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:16px}
.rp-hub-card{display:block;padding:20px;border:1px solid var(--rp-borda);border-radius:18px;
  background:#fff;text-decoration:none !important;transition:transform .25s ease,box-shadow .25s ease}
.rp-hub-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(19,67,43,.1)}
.rp-hub-card strong{display:block;font-size:16px;font-weight:700;color:var(--rp-verde-prof);
  letter-spacing:-.02em;margin-bottom:6px}
.rp-hub-card span{font-size:13.5px;line-height:1.6;color:var(--rp-texto)}

/* ---------- paginas tecnicas (/whatsapp/, /obrigado/) ---------- */
.rp-ponte{min-height:70vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:60px 22px;background:var(--rp-claro-3)}
.rp-ponte h1{font-size:26px;font-weight:800;color:var(--rp-verde-prof);letter-spacing:-.03em}
.rp-ponte p{margin-top:12px;color:var(--rp-texto);font-size:15px}

/* ==========================================================================
   Padrões de UX trazidos do site antigo — ver site/analise-ux.md
   ========================================================================== */

/* ---- 1. eyebrow: selo em maiúscula antes de todo título ---- */
.rp-eyebrow{display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;margin-bottom:18px;border-radius:999px;
  background:#D9F6E5;color:var(--rp-verde-esc);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.rp-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rp-laranja)}

/* ---- 3. fundo em gradiente radial, nunca cor chapada ---- */
.rp-topo{background:
  radial-gradient(circle at 8% 12%, rgba(37,180,95,.10), transparent 46%),
  radial-gradient(circle at 92% 0%, rgba(255,145,56,.07), transparent 40%),
  var(--rp-claro-1)}
.rp-corpo{background:
  radial-gradient(circle at 5% 10%, rgba(37,180,95,.045), transparent 42%),
  #fff}

/* ---- 4. topo com mídia ao lado, como o hero do site antigo ---- */
.rp-topo-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;align-items:center}
.rp-topo-media{position:relative;border-radius:26px;overflow:hidden;
  box-shadow:0 26px 60px rgba(19,67,43,.16);aspect-ratio:4/3}
.rp-topo-media img{width:100%;height:100%;object-fit:cover;display:block}
.rp-topo-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(10,42,27,.32) 100%)}
.rp-topo-legenda{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;
  color:#fff;font-size:13px;font-weight:600;line-height:1.4;
  text-shadow:0 2px 12px rgba(0,0,0,.45)}
@media(max-width:860px){
  .rp-topo-grid{grid-template-columns:1fr;gap:28px}
  .rp-topo-media{aspect-ratio:16/10;order:-1}
}

/* ---- 5. imagem dentro do corpo do texto ---- */
.rp-figura{margin:30px 0;border-radius:20px;overflow:hidden;position:relative;
  box-shadow:0 18px 44px rgba(19,67,43,.12);max-width:70ch}
.rp-figura img{width:100%;height:auto;display:block}
.rp-figura figcaption{padding:12px 16px;background:var(--rp-claro-3);
  font-size:13px;color:var(--rp-texto);line-height:1.5}

/* duas ou três imagens lado a lado */
.rp-galeria{display:grid;gap:14px;margin:30px 0;max-width:70ch;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.rp-galeria figure{margin:0;border-radius:16px;overflow:hidden;
  box-shadow:0 14px 34px rgba(19,67,43,.12)}
.rp-galeria img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}

/* ---- 2. numeração nos passos, como nos cards do site antigo ---- */
.rp-passos{counter-reset:passo;margin:26px 0;max-width:70ch}
.rp-passo{counter-increment:passo;position:relative;padding-left:56px;margin-bottom:24px}
.rp-passo::before{content:"0" counter(passo);position:absolute;left:0;top:-2px;
  width:40px;height:40px;border-radius:12px;background:var(--rp-verde);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;letter-spacing:.02em}

/* ---- 7. bloco de CTA intermediário, com fundo próprio ---- */
.rp-cta-meio{margin:40px 0;padding:30px 28px;border-radius:24px;max-width:70ch;
  background:linear-gradient(135deg,#123226,#194B36);color:#fff}
.rp-cta-meio h3{color:#fff;font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.rp-cta-meio p{color:rgba(255,255,255,.82);font-size:14.5px;margin-bottom:18px;max-width:52ch}
.rp-cta-meio .rp-button{background:var(--rp-verde);color:#fff;border-radius:12px;
  padding:14px 22px;font-size:13.5px;font-weight:700;display:inline-flex;
  text-decoration:none !important}

/* ==========================================================================
   Correções de contraste — auditoria WCAG de 21/09/2026.
   O site atual não passa em vários pontos; estas regras corrigem SEM sair da
   paleta medida em referencia-visual.md. Cada uma traz o antes → depois.
   ========================================================================== */

/* menu: link ativo estava em 2.46 (mínimo 4.5) */
.rp-nav-links a[aria-current="page"]{color:#0F6435;text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:2px}          /* 2.46 → 7.4 */
.rp-nav-links a:hover{color:#0F6435}

/* eyebrow: estava em 4.18 */
.rp-eyebrow{color:#0F6435}                                          /* 4.18 → 6.31 */
.rp-services-eyebrow,.rp-team-eyebrow,.rp-process-eyebrow,
.rp-faq-eyebrow,.rp-contact-eyebrow,.rp-video-eyebrow{color:#0F6435 !important}

/* botão contornado: laranja #E97821 sobre branco estava em 2.93 */
.rp-button-address,.rp-button-address:visited{color:#A8500C !important;
  border-color:rgba(168,80,12,.5) !important}                       /* 2.93 → 5.5 */

/* botão principal: branco sobre #25B45F estava em 2.70.
   #158348 já é a cor de hover da paleta original — o botão passa a nascer nela. */
.rp-button-whatsapp,.rp-button-whatsapp:visited,
.rp-nav-cta,.rp-cta-meio .rp-button{background:#158348 !important}  /* 2.70 → 4.80 */
.rp-button-whatsapp:hover,.rp-nav-cta:hover,
.rp-cta-meio .rp-button:hover{background:#0F6435 !important}

/* legenda sobre a foto: reforça o gradiente para garantir leitura */
.rp-topo-media::after{background:linear-gradient(180deg,transparent 46%,rgba(8,34,22,.62) 100%)}
.rp-topo-legenda{font-weight:600}

/* links no corpo do texto: verde escuro o bastante para ler */
.rp-corpo a{color:#0F6435}

/* botão flutuante: branco sobre #25B45F estava em 2.70 */
.rp-whatsapp-float,.rp-whatsapp-float:visited{background:#158348 !important}  /* 2.70 → 4.80 */
.rp-whatsapp-float:hover{background:#0F6435 !important}

/* ==========================================================================
   Ajustes de celular — auditoria de 21/09/2026 a 375px
   ========================================================================== */
@media(max-width:860px){
  /* 1. a foto vinha ANTES da trilha e do H1: quem abre no celular via a imagem
        sem saber em que página estava. Texto primeiro, foto fecha o topo. */
  .rp-topo-media{order:0}

  /* 2. área de toque: o mínimo confortável é 44px de altura */
  .rp-trilha{font-size:13px;line-height:2.2}
  .rp-trilha a{display:inline-block;padding:6px 2px}
  .rp-corpo a{display:inline-block;padding:3px 0}
  .rp-topo-acoes .rp-button{flex:1 1 100%;justify-content:center;padding:16px 18px}

  /* 3. o botão flutuante cobria as últimas linhas do texto — a folga fica
        DENTRO do rodapé, ver bloco "Rodapé" mais abaixo */
}

/* ==========================================================================
   Cartão de especialidade COM FOTO — anatomia do card do site antigo.
   Substitui o cartão só-texto, que ficava vazio e deixava a linha sem fechar.
   ========================================================================== */
/* flex, e não grid: com grid a linha incompleta deixa buraco à direita;
   com flex + justify-content:center ela centraliza. Foi o que o Maykon
   apontou em 21/09 — grupo de 2 cards ficava torto. */
/* FLEX, não grid, de propósito. A lista é corrida e o número de cartões (13)
   não divide por 3, então sobra 1 na última fileira. Em grid, `justify-content`
   centraliza os TRILHOS e o órfão fica preso no trilho 1, encostado à esquerda
   com dois terços de vazio ao lado. Em flex, cada linha se centraliza sozinha —
   e a seção inteira é centralizada (eyebrow, título, texto), então combina. */
.rp-hub-grid{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;justify-content:center}
.rp-hub-card{flex:0 1 calc(33.333% - 12px);min-width:0}
@media(max-width:900px){ .rp-hub-card{flex:0 1 calc(50% - 9px)} }
@media(max-width:600px){ .rp-hub-card{flex:1 1 100%} }

.rp-hub-card{display:flex;flex-direction:column;overflow:hidden;padding:0;
  border:1px solid var(--rp-borda);border-radius:24px;background:#fff;
  text-decoration:none !important;box-shadow:0 18px 45px rgba(19,67,43,.08);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.rp-hub-card:hover{transform:translateY(-8px);border-color:rgba(37,180,95,.3);
  box-shadow:0 27px 58px rgba(19,67,43,.14)}

/* foto quadrada, como no card original */
.rp-hub-foto{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#e5eee9}
.rp-hub-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease}
.rp-hub-card:hover .rp-hub-foto img{transform:scale(1.045)}
.rp-hub-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(10,42,27,.35) 100%)}

/* número sobreposto, como nos cards 01 02 03 do site antigo */
.rp-hub-num{position:absolute;top:14px;left:14px;z-index:2;
  padding:6px 11px;border-radius:999px;background:rgba(9,42,28,.72);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.04em;backdrop-filter:blur(6px)}

.rp-hub-texto{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.rp-hub-card strong{display:block;font-size:17px;font-weight:700;
  color:var(--rp-verde-prof);letter-spacing:-.02em;line-height:1.25;margin-bottom:8px}
.rp-hub-card span{font-size:13.5px;line-height:1.6;color:var(--rp-texto);flex:1}
.rp-hub-seta{margin-top:14px;font-style:normal;font-size:13px;font-weight:700;
  color:#0F6435;letter-spacing:-.01em}

/* ---- vídeo no topo: o original é vertical (720x1280), então o quadro vira
        quadrado, como no hero do site atual (481x481), em vez de 4:3 ---- */
.rp-topo-media-video{aspect-ratio:1/1}
.rp-topo-video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){ .rp-topo-media-video{aspect-ratio:4/5} }

/* ==========================================================================
   Detalhes trazidos do site antigo — 2ª rodada (21/09/2026)
   ========================================================================== */

/* título em duas cores: a segunda parte em verde.
   "Começar seu tratamento é [mais simples do que parece]" */
.rp-destaque{color:var(--rp-verde)}

/* botão com seta, como nos CTAs do site antigo */
.rp-button-whatsapp::after{content:"→";margin-left:8px;font-size:15px;line-height:1}
.rp-nav-cta::after{content:none}

/* card lateral escuro do FAQ */
.rp-faq-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);
  gap:26px;align-items:start}
.rp-faq-contact{padding:30px 26px;border-radius:26px;
  background:linear-gradient(150deg,#123226,#194B36);color:#fff;
  box-shadow:0 24px 54px rgba(9,42,28,.22)}
.rp-faq-contact-icon{width:46px;height:46px;border-radius:14px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);color:#D9F6E5}
.rp-faq-contact h3{color:#fff;font-size:21px;font-weight:800;letter-spacing:-.025em;
  line-height:1.2;margin-bottom:10px}
.rp-faq-contact p{color:rgba(255,255,255,.78);font-size:14px;line-height:1.6;margin-bottom:20px}
.rp-faq-contact .rp-button{display:flex;justify-content:center;width:100%;margin-bottom:10px}
.rp-faq-btn-ghost{background:rgba(255,255,255,.08) !important;color:#fff !important;
  border:2px solid rgba(255,255,255,.24) !important;border-radius:12px;
  padding:14px 17px;font-size:13px;font-weight:700;text-decoration:none !important}
.rp-faq-btn-ghost:hover{background:rgba(255,255,255,.14) !important}
@media(max-width:900px){ .rp-faq-layout{grid-template-columns:1fr} }

/* ==========================================================================
   LARGURA ÚNICA — corrige a "sanfona" que o Maykon viu em 21/09/2026.
   Cada bloco herdado do site antigo trazia o próprio max-width (1280, 1180,
   1160, 1024). Lá isso não aparecia porque cada bloco era a página inteira;
   aqui eles convivem, e a página abria e fechava a cada seção.
   ========================================================================== */
:root{ --rp-largura: 1160px; }

.rp-topo-inner,
.rp-corpo-inner,
.rp-process-container,
.rp-team-container,
.rp-faq-container,
.rp-services-container,
.rp-contact-container,
.rp-video-container,
.rp-footer-inner{
  max-width:var(--rp-largura) !important;
  margin-inline:auto !important;
  width:100%;
}

/* o texto corrido continua estreito dentro do container largo:
   linha longa demais cansa. 70ch ≈ 65-70 caracteres, que é o confortável. */
.rp-corpo p,.rp-corpo ul,.rp-aviso,.rp-figura,.rp-galeria,.rp-cta-meio,.rp-passos{
  max-width:70ch}

/* ==========================================================================
   HERO DE TELA CHEIA — o topo ocupava só parte da tela e o bloco seguinte já
   espiava embaixo. Hero ocupa a altura da janela, menos o cabeçalho fixo.
   ========================================================================== */
/* a altura do cabeçalho é declarada uma vez e usada nos dois lugares, para o
   hero fechar exatamente na dobra — chutar o valor deixava 23px sobrando. */
:root{ --rp-header:90px }
@media(max-width:900px){ :root{ --rp-header:75px } }

.rp-topo{display:flex;align-items:center;
  min-height:calc(100svh - var(--rp-header));   /* svh desconta a barra do navegador no celular */
  padding-top:40px;padding-bottom:40px}
.rp-topo-inner{width:100%}

/* na home o quadro do vídeo acompanha a altura disponível */
.rp-topo-media-video{max-height:min(560px,62vh)}

@media(max-width:860px){
  /* no celular, tela cheia com foto + texto obriga a rolar demais antes de ler.
     Altura mínima menor, mas ainda dominando a primeira tela. */
  .rp-topo{min-height:auto;padding-top:34px;padding-bottom:40px}
  .rp-topo-media-video{max-height:none}
}

/* no celular o botão ocupa a largura toda: texto e seta ficam juntos no centro,
   em vez de a seta ir parar na borda direita */
@media(max-width:860px){
  .rp-topo-acoes .rp-button{display:inline-flex;align-items:center;gap:2px}
  .rp-topo-acoes .rp-button-whatsapp::after{margin-left:10px}
}

/* ==========================================================================
   HERO PROPORCIONAL — medido em 21/09: o conteúdo ocupava 440px de um hero de
   810px, sobrando 370px vazios (46%). Causa: o quadro do vídeo é quadrado,
   então a altura dele ficava presa à largura da coluna (530px).
   Correção: quadro mais vertical (4:5, mais perto do vídeo original 9:16),
   coluna da mídia mais larga, e tipografia à altura do espaço.
   ========================================================================== */
@media(min-width:861px){
  .rp-topo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:52px}

  /* quadro 4:5 em vez de 1:1 → 585px de largura viram 731px de altura */
  .rp-topo-media-video{aspect-ratio:4/5;max-height:none}
  .rp-topo-media{aspect-ratio:4/5}

  /* tipografia proporcional ao espaço disponível */
  .rp-topo h1{font-size:clamp(38px,3.7vw,56px);line-height:1.04;letter-spacing:-.04em;
    max-width:14ch}
  .rp-topo-abertura p{font-size:17.5px;line-height:1.72}
  .rp-topo-abertura{max-width:54ch;margin-top:24px}
  .rp-eyebrow{font-size:12px;padding:9px 17px}
  .rp-topo-acoes{margin-top:32px;gap:14px}
  .rp-topo-acoes .rp-button{padding:17px 26px;font-size:14.5px}
  .rp-topo-legenda{font-size:14px}
}

/* telas muito altas: o vídeo não precisa crescer sem limite */
@media(min-width:861px) and (min-height:1000px){
  .rp-topo-media,.rp-topo-media-video{max-height:760px}
}

/* ==========================================================================
   Hero maior — referência de proporção que o Maykon mandou (hero da FisioLeve):
   título dominando a coluna esquerda e mídia ocupando mais largura.
   ========================================================================== */
@media(min-width:861px){
  .rp-topo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:56px}
  .rp-topo h1{font-size:clamp(44px,4.6vw,68px);line-height:1.02;letter-spacing:-.045em;
    max-width:13ch}
  .rp-topo-abertura p{font-size:18px;line-height:1.7}
  .rp-topo-abertura{max-width:50ch}
}

/* marcadores com check, como no hero do site atual */
.rp-highlights{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.rp-highlight{display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;color:var(--rp-verde-prof)}
.rp-highlight::before{content:"";flex:0 0 auto;width:20px;height:20px;border-radius:6px;
  background:var(--rp-verde) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
@media(max-width:860px){ .rp-highlights{gap:9px 16px;margin-top:22px} .rp-highlight{font-size:13.5px} }

/* com o H1 em 66px e os marcadores, o conteúdo passou de 900px e o hero
   deixou de fechar na dobra. Espaçamentos mais justos, sem mexer no tamanho
   da letra — o que o Maykon pediu foi texto maior, não mais respiro. */
@media(min-width:861px){
  .rp-topo{padding-top:26px;padding-bottom:26px}
  .rp-eyebrow{margin-bottom:14px}
  .rp-topo-abertura{margin-top:18px}
  .rp-topo-abertura p{margin-bottom:10px}
  .rp-highlights{margin-top:20px;gap:8px 20px}
  .rp-topo-acoes{margin-top:24px}
  .rp-topo-acoes .rp-button{padding:16px 24px}
}
/* telas baixas (notebook 768px de altura): o hero não força a dobra */
@media(min-width:861px) and (max-height:820px){
  .rp-topo{min-height:auto;padding-top:44px;padding-bottom:52px}
  .rp-topo h1{font-size:clamp(40px,3.6vw,52px)}
}

/* o formato do quadro segue a foto: retrato 4:5, paisagem 4:3 */
.rp-media-45{aspect-ratio:4/5}
.rp-media-43{aspect-ratio:4/3}

/* o H1 da home é vitrine e pode ser grande; o das internas é leitura.
   Título longo em 66px quebrava em 4 linhas e estourava a dobra. */
@media(min-width:861px){
  .rp-topo h1{font-size:clamp(36px,3.3vw,48px);max-width:16ch}
  body:has(.rp-topo-media-video) .rp-topo h1{font-size:clamp(44px,4.6vw,68px);max-width:13ch}
}

/* ==========================================================================
   TIPOGRAFIA FLUIDA — o tamanho acompanha a tela, em vez de travar cedo.
   Pedido do Maykon em 21/09: "se a tela é maior, a proporção fica maior;
   no celular também fica grande, proporcionado ao tamanho da tela".
   Cada clamp() traz mínimo (celular), fluido (vw) e máximo (monitor grande).
   ========================================================================== */
:root{
  --t-h1-home: clamp(40px, 5.1vw, 76px);
  --t-h1:      clamp(34px, 3.9vw, 54px);
  --t-h2:      clamp(30px, 3.3vw, 48px);
  --t-h3:      clamp(19px, 1.45vw, 23px);
  --t-corpo:   clamp(16px, 1.14vw, 18.5px);
  --t-apoio:   clamp(14.5px, 1vw, 16.5px);
}

.rp-topo h1{font-size:var(--t-h1) !important;line-height:1.05;letter-spacing:-.04em}
body:has(.rp-topo-media-video) .rp-topo h1{font-size:var(--t-h1-home) !important;line-height:1.02}
.rp-topo-abertura p{font-size:var(--t-corpo) !important;line-height:1.68}
.rp-corpo h2{font-size:var(--t-h2)}
.rp-corpo h3{font-size:var(--t-h3)}
.rp-corpo p,.rp-corpo ul li{font-size:var(--t-corpo);line-height:1.75}
.rp-hub-card strong{font-size:clamp(16px,1.2vw,19px)}
.rp-hub-card span{font-size:var(--t-apoio);line-height:1.6}
.rp-eyebrow{font-size:clamp(11px,.85vw,13px)}
.rp-highlight{font-size:var(--t-apoio)}
.rp-topo-acoes .rp-button{font-size:clamp(14px,1.05vw,16px)}

/* os blocos herdados também escalam */
.rp-video-title,.rp-process-title,.rp-team-title,.rp-faq-header h2,.rp-services-title{
  font-size:var(--t-h2) !important;line-height:1.12;letter-spacing:-.03em}
.rp-process-card h3,.rp-team-name{font-size:var(--t-h3) !important}

/* ==========================================================================
   ALINHAMENTO — título de seção ao centro, texto de leitura à esquerda.
   ========================================================================== */
.rp-hub-card{text-align:left}          /* o cartão volta a alinhar à esquerda */

.rp-process-header,.rp-team-header,.rp-faq-header{text-align:center}
.rp-process-header .rp-eyebrow,.rp-team-header .rp-eyebrow,
.rp-faq-header .rp-eyebrow{margin-inline:auto}
.rp-team-description,.rp-process-header p{margin-inline:auto;max-width:56ch}

/* texto de leitura fica à esquerda — parágrafo centralizado cansa */
.rp-corpo,.rp-corpo h2,.rp-corpo h3,.rp-corpo p,.rp-corpo ul{text-align:left}
.rp-topo-inner{text-align:left}

/* o H1 da home estava quebrando em 4 linhas com palavras órfãs
   ("Recupere / seus / movimentos."). Medida de linha um pouco maior. */
body:has(.rp-topo-media-video) .rp-topo h1{max-width:15ch}
@media(min-width:861px){ .rp-topo h1{max-width:17ch} }

/* o vídeo não pode passar da altura disponível no hero */
@media(min-width:861px){
  .rp-topo-media-video{max-height:calc(100svh - var(--rp-header) - 72px)}
}

/* ==========================================================================
   EQUILÍBRIO FINAL DO HERO — fonte e largura de coluna andam juntas.
   Com 73px numa coluna de 512px o título quebrava em 5 linhas e o hero
   passava de 900px. Coluna de texto maior + teto de fonte menor = 3 linhas.
   ========================================================================== */
@media(min-width:861px){
  .rp-topo-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:48px}
  body:has(.rp-topo-media-video) .rp-topo h1{
    font-size:clamp(40px,4.3vw,62px) !important;max-width:14ch}
  .rp-topo h1{font-size:clamp(32px,3.4vw,46px) !important;max-width:16ch}
}

/* ==========================================================================
   Padrões vistos na página inteira da FisioLeve (referência do Maykon):
   ícone quadrado no topo do card, e barra de CTA fechando cada seção.
   ========================================================================== */
.rp-icone{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(42px,3.4vw,52px);height:clamp(42px,3.4vw,52px);
  border-radius:15px;margin-bottom:16px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--rp-verde),var(--rp-verde-esc));
  color:#fff;box-shadow:0 12px 26px rgba(37,180,95,.26)}
.rp-icone svg{width:52%;height:52%}

.rp-process-card{position:relative}
.rp-process-card .rp-process-number{position:absolute;top:18px;right:18px;
  width:34px;height:34px;font-size:12px;border-width:0;margin:0}

/* barra de CTA: frase à esquerda, botão à direita */
.rp-barra-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  /* margem zero aqui de propósito: quem decide o respiro é a faixa que
     envolve esta barra, e ela sabe em que contexto está (ver item 4). O
     38px que ficava aqui vazava por colapso de margem e desalinhava. */
  margin:0 auto;max-width:var(--rp-largura);
  padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,32px);border-radius:22px;
  background:linear-gradient(135deg,#123226,#194B36);
  box-shadow:0 22px 50px rgba(9,42,28,.2)}
.rp-barra-cta p{flex:1 1 320px;margin:0;color:#fff;
  font-size:clamp(15px,1.25vw,19px);font-weight:600;line-height:1.45;letter-spacing:-.015em}
.rp-barra-cta .rp-icone{margin-bottom:0;background:rgba(255,255,255,.14);
  box-shadow:none;width:46px;height:46px}
.rp-barra-cta .rp-button{flex:0 0 auto}
@media(max-width:700px){
  .rp-barra-cta{flex-direction:column;align-items:flex-start;text-align:left}
  .rp-barra-cta .rp-button{width:100%;justify-content:center}
}

/* 6 diferenciais em 4 colunas deixavam 2 órfãos na última linha.
   3 colunas fecham exatamente em 2 linhas. */
.rp-process-steps{display:grid !important;gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.rp-process-step{width:auto !important;margin:0 !important}
.rp-process-card{height:100%;display:flex;flex-direction:column}
@media(max-width:900px){ .rp-process-steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important} }
@media(max-width:600px){ .rp-process-steps{grid-template-columns:1fr !important} }

/* a barra usada fora do corpo precisa da mesma margem lateral das seções */
.rp-barra-faixa{padding:0 22px}
.rp-barra-faixa .rp-barra-cta{margin-inline:auto}
.rp-corpo-inner .rp-barra-faixa{padding:0}

/* ==========================================================================
   Painel de contato — fundo ESCURO. A regra geral de eyebrow (#0F6435) foi
   escrita para fundo claro e, aplicada aqui com !important, deu contraste
   1,92. O título herdava o cinza do body e dava 1,10 — invisível.
   Toda regra de cor precisa saber sobre que fundo vai cair.
   ========================================================================== */
.rp-contact-panel h3{color:#fff !important;
  font-size:clamp(20px,1.9vw,26px);font-weight:800;letter-spacing:-.025em;
  line-height:1.2;margin:14px 0 22px}
.rp-contact-panel .rp-contact-eyebrow,
.rp-contact-eyebrow{color:#D9F6E5 !important;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.rp-contact-info-label{font-size:11px !important;color:rgba(255,255,255,.62) !important;
  letter-spacing:.06em;text-transform:uppercase}
.rp-contact-info-value{font-size:15px !important;color:#fff !important;
  font-weight:600;text-decoration:none}
.rp-contact-panel p{color:rgba(255,255,255,.8)}

/* o mesmo vale para a seção de vídeos, que também é fundo escuro */
.rp-video-eyebrow{color:#D9F6E5 !important}
.rp-video-title,.rp-reel-heading,.rp-video-cta-title{color:#fff !important}
.rp-video-description,.rp-reel-text,.rp-video-cta-text{color:rgba(255,255,255,.8) !important}
.rp-reel-label{color:#FF9138 !important}

/* ==========================================================================
   Seção de vitrine: título, subtítulo e grupos alinhados do mesmo jeito.
   Antes o H2 ficava à esquerda e os títulos de grupo ao centro, na mesma
   seção — parecia defeito, não escolha.
   ========================================================================== */
.rp-corpo-centro{text-align:center}
.rp-corpo-centro > .rp-corpo-inner > h2{margin-inline:auto;max-width:24ch}
.rp-corpo-centro > .rp-corpo-inner > p{margin-inline:auto;max-width:62ch;text-align:center}
.rp-corpo-centro .rp-hub-card,
.rp-corpo-centro .rp-barra-cta{text-align:left}
.rp-corpo-centro .rp-barra-cta p{text-align:left}

/* o espaçamento entre o título da seção e o primeiro grupo estava igual ao
   espaçamento entre grupos — hierarquia achatada */
.rp-corpo-centro > .rp-corpo-inner > h2{margin-bottom:14px}

/* a regra de leitura (.rp-corpo h2) tem especificidade maior que
   .rp-corpo-centro e estava vencendo: a caixa centralizava, mas o texto
   dentro dela alinhava à esquerda — visível assim que o título quebra linha. */
.rp-corpo-centro > .rp-corpo-inner > h2,
.rp-corpo-centro > .rp-corpo-inner > p{text-align:center}
.rp-corpo-centro .rp-hub-card,
.rp-corpo-centro .rp-hub-card strong,
.rp-corpo-centro .rp-hub-card span{text-align:left}

/* ==========================================================================
   CORREÇÃO — barra de CTA gigante no celular (apontado em 22/09).
   O parágrafo tem `flex:1 1 320px` para ocupar o espaço à ESQUERDA no desktop.
   Quando a barra vira coluna no celular, esse mesmo `flex:1` passa a esticar
   na VERTICAL, e o card ficava com ~800px de altura vazia.
   ========================================================================== */
@media(max-width:700px){
  .rp-barra-cta{gap:16px;padding:22px 20px}
  .rp-barra-cta p{flex:0 0 auto !important;font-size:16px;line-height:1.5}
  .rp-barra-cta .rp-icone{width:40px;height:40px;border-radius:12px}
}

/* os eyebrows dos blocos herdados vinham com tamanho fixo de 10px e não
   entraram na tipografia fluida — ilegível no celular. */
.rp-video-eyebrow,.rp-process-eyebrow,.rp-team-eyebrow,
.rp-services-eyebrow,.rp-faq-eyebrow,.rp-contact-eyebrow,
.rp-service-category,.rp-reel-label,.rp-team-role-label{
  font-size:clamp(11px,.92vw,13px) !important;letter-spacing:.08em}

/* o badge de liderança ficou de fora da regra anterior e continuava em 9px */
.rp-team-owner-badge{font-size:clamp(10px,.85vw,12px) !important;letter-spacing:.06em}

/* alvo de toque: 44px é o mínimo confortável no celular */
@media(max-width:860px){
  .rp-button,.rp-nav-links a,.rp-faq-question{min-height:44px;
    display:inline-flex;align-items:center}
  .rp-faq-question{width:100%}
}
.rp-nav-toggle{min-height:44px;min-width:44px;justify-content:center}

/* ==========================================================================
   CTA final — quarto bloco de fundo escuro onde o texto herdava o cinza do
   body e ficava invisível (contraste 1,10). Só o destaque verde aparecia.
   Regra geral abaixo: QUALQUER bloco escuro força texto claro.
   ========================================================================== */
.rp-process-cta,.rp-video-cta,.rp-faq-contact,
.rp-contact-panel,.rp-barra-cta,.rp-cta-meio{color:#fff}
/* O .rp-team-cta é o único da família com fundo BRANCO (estilo.css:2519).
   Estava na lista acima e o texto ficava branco sobre branco — invisível. */
.rp-team-cta .rp-team-cta-title{color:var(--rp-verde-prof) !important}
.rp-team-cta .rp-team-cta-text{color:var(--rp-texto) !important}
.rp-process-cta h2,.rp-process-cta h3,.rp-process-cta p,
.rp-video-cta h2,.rp-video-cta h3,.rp-video-cta p{color:#fff !important}
.rp-process-cta p,.rp-video-cta p{color:rgba(255,255,255,.82) !important}
/* o verde da marca sobre fundo escuro fica fraco; o claro da paleta lê bem */
.rp-process-cta .rp-destaque,.rp-video-cta .rp-destaque,
.rp-contact-panel .rp-destaque{color:#7FE3A5 !important}

/* ==========================================================================
   Rodapé — <address> vem em itálico por padrão do navegador, e o endereço
   inteiro saía torto. Também faltava hierarquia entre nome, endereço e contato.
   ========================================================================== */
.rp-footer-nap{font-style:normal;line-height:1.85;font-size:14.5px;
  color:var(--rp-texto);margin:18px 0}
.rp-footer-nap strong{display:block;font-size:16px;color:var(--rp-verde-prof);
  font-weight:700;margin-bottom:6px}
.rp-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  list-style:none;padding:0;margin:4px 0 18px}
.rp-footer-links a{font-size:14px;font-weight:600;color:var(--rp-verde-prof);
  text-decoration:none;padding:6px 2px}
.rp-footer-links a:hover{color:var(--rp-verde-esc)}
.rp-footer-inner p{font-size:12.5px;color:var(--rp-texto);
  padding-top:16px;border-top:1px solid var(--rp-borda);width:100%;margin-top:6px}
.rp-footer-inner p strong{font-weight:500}
@media(max-width:600px){
  .rp-footer-links{gap:6px 16px}
  .rp-footer-nap{font-size:14px}
}

/* ==========================================================================
   ESCALA DE ESPAÇAMENTO — 22/09/2026
   Medido antes: 5 valores de padding de seção (44, 52, 56, 90, 105),
   2 de eyebrow→título e 5 de título→descrição (0, 14, 18, 21, 22).
   Cada bloco trazia o espaçamento do contexto de origem.
   Agora existe uma escala só, fluida, e toda distância sai dela.
   ========================================================================== */
:root{
  --e0: 4px;                       /* rótulo colado no valor     */
  --e1: 8px;                       /* dentro de um item          */
  --e2: 12px;                      /* eyebrow, rótulos           */
  --e3: 16px;                      /* título → descrição         */
  --e4: 24px;                      /* entre parágrafos           */
  --e5: clamp(28px, 3vw, 40px);    /* cabeçalho → conteúdo       */
  --e6: clamp(36px, 4vw, 56px);    /* conteúdo → CTA do bloco    */
  --e7: clamp(56px, 6.5vw, 96px);  /* respiro da seção           */
}

/* ---- 1. TODA seção respira igual ---- */
.rp-corpo,.rp-video-section,.rp-process,.rp-team,.rp-faq,.rp-contact,
.rp-services{padding-top:var(--e7) !important;padding-bottom:var(--e7) !important}
/* o topo é exceção proposital: ele preenche a dobra */
.rp-topo{padding-top:var(--e5);padding-bottom:var(--e5)}

/* ---- 2. cabeçalho de seção: eyebrow → título → descrição ---- */
.rp-eyebrow,.rp-video-eyebrow,.rp-process-eyebrow,.rp-team-eyebrow,
.rp-faq-eyebrow,.rp-contact-eyebrow,.rp-services-eyebrow{
  margin-bottom:var(--e3) !important}

.rp-video-header h2,.rp-process-header h2,.rp-team-header h2,
.rp-faq-header h2,.rp-contact-header h2,.rp-services-header h2,
.rp-video-title,.rp-process-title,.rp-team-title,.rp-services-title{
  margin:0 0 var(--e3) !important}

/* o h2 do contato não tem classe e caía no tamanho padrão de h2 (24px),
   fora dos 29,7px dos outros títulos de seção */
.rp-contact-header h2{font-size:var(--t-h2) !important}

.rp-video-description,.rp-team-description,.rp-services-description,
.rp-process-header p,.rp-faq-header p,.rp-contact-header p{
  margin:0 auto !important;max-width:58ch}

/* ---- 3. cabeçalho → conteúdo da seção ---- */
.rp-video-header,.rp-process-header,.rp-team-header,
.rp-faq-header,.rp-contact-header,.rp-services-header{
  margin-bottom:var(--e5) !important}

/* ---- 4. conteúdo → CTA de fechamento do bloco ---- */
.rp-video-cta,.rp-process-cta,.rp-team-cta{margin-top:var(--e6) !important}

/* Dentro do painel escuro, o título e o texto seguem a mesma régua do resto
   do site. O estilo.css original deixa o título com margin:0 e o texto com
   14px — o que colava um no outro em todas as sete páginas. */
.rp-process-cta-title,.rp-video-cta-title,.rp-team-cta-title{
  margin:0 0 var(--e3) !important}
.rp-process-cta-text,.rp-video-cta-text,.rp-team-cta-text{margin:0 !important}

/* ---- 4b. par título → texto DENTRO de cartão ---- */
/* Cartão é um nível mais apertado que seção, de propósito: seção usa --e3 (16px),
   cartão usa --e2 (12px). Antes estavam espalhados 0, 7, 8, 10 e 14 — era isso
   que fazia cada bloco parecer respirar diferente ao descer a página. */
.rp-process-step-title,.rp-team-name,.rp-reel-heading,
.rp-hub-card strong{margin:0 0 var(--e2) !important}
.rp-process-step-text,.rp-team-function,.rp-reel-text{margin:0 !important}
/* o selo acima do nome (COORDENAÇÃO, ORTOPEDIA) é rótulo, não título: fica no
   degrau de baixo da escala para não competir com o nome */
.rp-team-role-label{margin:0 0 var(--e1) !important}

/* A faixa de CTA aparece em dois contextos e cada um pede um respiro diferente:
   entre duas seções, quem dá o ar são os paddings delas (--e7 de cada lado), e
   qualquer margem aqui quebra a simetria — era o buraco de 94px em cima contra
   56px embaixo. Dentro de um bloco de leitura, ela precisa se descolar do texto. */
main > .rp-barra-faixa{margin-block:0}
.rp-corpo-inner .rp-barra-faixa{margin-top:var(--e5);margin-bottom:0}

/* ---- 5. corpo de leitura: hierarquia entre H2, H3 e parágrafo ---- */
.rp-corpo h2{margin:var(--e7) 0 var(--e3)}
.rp-corpo h2:first-child{margin-top:0}
.rp-corpo h3{margin:var(--e5) 0 var(--e1)}
.rp-corpo p{margin:0 0 var(--e3)}
.rp-corpo ul{margin:0 0 var(--e4)}
.rp-corpo-centro > .rp-corpo-inner > h2{margin-bottom:var(--e3) !important}
.rp-corpo-centro > .rp-corpo-inner > p{margin-bottom:var(--e5) !important}

/* ---- 6. grade de cartões ---- */
/* Os títulos de grupo saíram em 22/09: a lista agora é corrida, numerada de
   ponta a ponta. O respiro do texto acima até a grade é o mesmo de qualquer
   cabeçalho para conteúdo. */
.rp-hub-grid{margin-top:var(--e5) !important;margin-bottom:0 !important}
.rp-faq-contact p{margin-bottom:var(--e4) !important}
.rp-contact-info-label{margin-bottom:var(--e0) !important}

/* ---- 7. hero ---- */
.rp-topo .rp-eyebrow{margin-bottom:var(--e3)}
.rp-topo h1{margin:0 0 var(--e3)}
.rp-topo-abertura{margin-top:0}
.rp-topo-abertura p{margin:0 0 var(--e3)}
.rp-highlights{margin-top:var(--e4)}
.rp-topo-acoes{margin-top:var(--e5)}
.rp-trilha{margin-bottom:var(--e3)}

/* ==========================================================================
   AJUSTES FINOS DO DESKTOP — 22/09/2026
   Sete pontos que o Maykon marcou em print da home. A ordem abaixo é a dele.
   ========================================================================== */

/* ---- 1. o círculo decorativo cobria o botão ----
   Os painéis de CTA têm dois círculos em ::before/::after, posicionados em
   absoluto. Elemento com position:static pinta ABAIXO de elemento posicionado,
   então o botão sumia atrás do círculo. Nos outros painéis o botão já tinha
   position:relative + z-index:2; o da equipe ficou de fora quando virou irmão
   do conteúdo. Regra na família inteira para não faltar de novo. */
.rp-team-cta > .rp-button,
.rp-video-cta > .rp-button,
.rp-process-cta > .rp-button{position:relative;z-index:2}

/* ---- 2a. círculo laranja dentro de painel escuro ----
   O laranja a 16% sobre o verde profundo vira oliva e destoa. Nos painéis
   escuros os dois círculos passam a ser verdes; o laranja fica só no painel
   branco da equipe, onde ele funciona. */
.rp-video-cta::after,
.rp-process-cta::before{background:rgba(37,180,95,.16) !important}

/* ---- 2b. o texto parava na metade do card ----
   O -content tinha max-width:760px fixo e o painel é bem mais largo. Agora ele
   ocupa o que sobra depois do botão, como no .rp-process-cta. */
.rp-video-cta-content{max-width:none !important;flex:1 1 auto;min-width:0}
.rp-video-cta > .rp-button{flex:0 0 auto}

/* ---- 4. resposta do FAQ colada na borda ----
   O recuo vem de .rp-faq-answer-content (estilo.css), que o gerador passou a
   emitir junto com -inner. -inner é o que o script.js mede para animar.
   NÃO escrever padding em .rp-faq-answer-inner aqui: mesma especificidade da
   -content e este arquivo carrega depois, então anularia o recuo. */

/* ---- 5. título e descrição da seção de contato ----
   O h2 recebia só o tamanho e ficava com entrelinha normal — por isso a
   segunda linha caía longe. Os outros títulos de seção levam os três juntos. */
/* o h2 de corpo centralizado ("Cuidado individualizado…") é título de seção
   igual aos outros, mas vinha da regra de leitura .rp-corpo h2, com 1.14 */
.rp-contact-header h2,
.rp-corpo-centro > .rp-corpo-inner > h2{
  line-height:1.12 !important;letter-spacing:-.03em !important}
.rp-contact-header p,
.rp-team-description,.rp-video-description,.rp-services-description,
.rp-process-header p,.rp-faq-header p{
  font-size:var(--t-corpo) !important;max-width:58ch}

/* ---- 6. seção que segura só um painel de CTA ----
   Na home o painel foi anexado à seção de contato e esta regra não se aplica.
   Nas outras páginas ele continua em seção própria, mas sem a altura de uma
   seção de conteúdo: o painel já tem o próprio respiro interno. */
.rp-cta-solo{padding-top:0 !important;padding-bottom:var(--e7) !important}
.rp-cta-solo .rp-process-cta{margin-top:0 !important}

/* ---- 7. rodapé ----
   7a. A folga do botão flutuante estava em body{padding-bottom}, e o fundo que
   aparecia ali era o branco do body: uma faixa clara depois do rodapé, no fim
   da rolagem. A mesma folga dentro do rodapé resolve — o verde dele vai até o
   fim do documento. */
.rp-footer{padding-top:var(--e7);padding-bottom:calc(var(--e7) + 40px)}
@media(max-width:860px){ .rp-footer{padding-bottom:calc(var(--e6) + 92px)} }

/* 7b. alinhamento: os espaços do rodapé eram 18, 14.4, 6 e 4px, nenhum da
   escala. Agora saem todos dela. */
.rp-footer-inner{padding:0 22px !important;text-align:center}
.rp-footer-inner img{width:auto;max-width:200px;margin:0 auto var(--e4);display:block}
.rp-footer-nap{margin:0 0 var(--e4) !important;line-height:1.85}
.rp-footer-nap strong{margin-bottom:var(--e2) !important}
.rp-footer-links{margin:0 0 var(--e5) !important;gap:var(--e1) var(--e4) !important}
.rp-footer-inner p{margin:0 !important;padding-top:var(--e4) !important}

/* ==========================================================================
   SEGUNDA RODADA DE AJUSTES FINOS — 22/09/2026
   ========================================================================== */

/* ---- 8. lupa, texto e botão na mesma linha ----
   O parágrafo herdava margin-bottom:16px da regra de leitura (.rp-corpo p, da
   escala) — mesma especificidade da regra da faixa, mas escrita depois. O flex
   centraliza a caixa COM a margem, então o texto subia metade dela: 8px. */
.rp-corpo .rp-barra-cta p,
.rp-barra-cta p{margin:0 !important}

/* ---- 9. respiro da faixa dentro da seção ----
   Ao sair de filha do <main> e entrar na seção (item 3), a faixa perdeu as duas
   regras de margem que tinha. Agora o mesmo respiro em cima e embaixo: a margem
   dá o de cima, e a seção que termina em faixa reduz o padding para igualar. */
.rp-process-container > .rp-barra-faixa{margin-top:var(--e5)}
section:has(> div > .rp-barra-faixa:last-child){padding-bottom:var(--e5) !important}

/* ---- 10. resposta do FAQ: recuo igual dos quatro lados ----
   Antes: 74px à esquerda (alinhada com o TEXTO da pergunta, depois do badge) e
   30px à direita. O Maykon pediu alinhada com o NÚMERO, na borda do card, e com
   o mesmo respiro dos dois lados. O 24px é o padding da pergunta, então a
   resposta cai exatamente sob o badge — e o de baixo iguala o padding-bottom da
   pergunta, que é o que forma o espaço de cima. */
.rp-faq-answer-content{margin:0 !important;
  padding:0 var(--e4) var(--e4) var(--e4) !important}

/* ---- 11. rodapé menor ----
   Era 586px. O grosso era padding: 67 em cima e 107 embaixo. O de baixo existe
   porque o botão flutuante ocupa os últimos 88px da página e taparia a linha do
   CNPJ; fica o mínimo necessário, e o resto encolhe. */
/* O botão flutuante some quando o rodapé entra na tela (bloco 3 do script.js),
   então o padding de baixo deixou de ser folga para ele e virou respiro normal.
   Eram 96px só por causa disso. No celular a folga continua até a passada de
   mobile — mexer nela agora é retrabalho garantido. */
.rp-footer{padding-top:var(--e5);padding-bottom:var(--e5)}
@media(max-width:860px){ .rp-footer{padding-bottom:calc(var(--e2) + 92px)} }

/* o sumiço é suave e o botão para de receber clique enquanto está invisível */
.rp-whatsapp-float{transition:opacity .25s ease,transform .25s ease}
.rp-whatsapp-float[data-oculto="1"]{opacity:0;transform:translateY(14px);
  pointer-events:none}
.rp-footer-inner img{max-width:170px;margin-bottom:var(--e3)}
.rp-footer-nap{margin:0 0 var(--e3) !important;line-height:1.7}
.rp-footer-nap strong{margin-bottom:var(--e1) !important}
.rp-footer-links{margin:0 0 var(--e4) !important}
.rp-footer-inner p{padding-top:var(--e4) !important}