/* =============================================================
   site-ritmo.css — camada de ritmo visual
   Carregada por último em todas as páginas.

   Por que existe: o site renderizava vinte cards em oito aparências
   que diferiam por dois pixels de raio e um centésimo de opacidade de
   borda, e a classe .section-soft, responsável pela alternância de
   fundo, computava fundo transparente. O leitor rolava treze telas
   sem nenhum marco para medir progresso.

   A correção inverte a lógica: o card tem uma aparência só e a
   variedade vem da superfície da seção.

   O marco é o BRANCO, não o escuro. Num site inteiro em bege, o
   branco é o contraste que alivia; o escuro pesa e briga com a
   paleta. E a inversão card/fundo dá o segundo nível de leitura sem
   introduzir nenhuma cor nova.
   ============================================================= */

:root{
  --sup-bege:#F6F1EA;    /* superfície base, o bege do site */
  --sup-branca:#FFFFFF;  /* marco: seção clara, respiro */
  --card-no-bege:#FFFFFF;
  --card-no-branco:#F7F3EC;
  --linha:rgba(76,58,35,.11);
  --linha-forte:rgba(76,58,35,.16);
}

/* ---------- 1. SUPERFÍCIES ----------
   Duas superfícies, ambas claras, com diferença perceptível.
   Beges quase iguais foi o problema original — não repetir. */
main > section{
  position:relative;
  background-color:var(--sup-bege);
  background-image:none;
  padding-block:clamp(38px,7vw,62px) !important;
}
main > section.section-soft,
main > section.faixa{
  background-color:var(--sup-branca) !important;
  background-image:none !important;
}

/* Seções com regra antiga por id (que vence classe por
   especificidade) precisam ser reafirmadas com id. */
main > section#contato.section-soft,
main > section#duvidas.section-soft{
  background-color:var(--sup-branca) !important;
  background-image:none !important;
}
/* A faixa de avaliações traz gradiente próprio; fixamos o bege para
   ela não virar um terceiro tom quase igual aos outros dois. */
main > section.reviews-band{
  background-color:var(--sup-bege) !important;
  background-image:none !important;
}
/* A faixa de avaliações entra na mesma alternância das outras seções:
   sem isso ela caía sempre no bege e criava dois beges seguidos. */
main > section.reviews-band.section-soft{
  background-color:var(--sup-branca) !important;
}

/* Fio na junção: marca a troca de assunto mesmo entre duas
   superfícies iguais. */
main > section + section::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:1px; background:var(--linha);
}
/* Entre bege e branco o próprio degrau já marca; o fio vira sujeira. */
main > section.section-soft::before,
main > section.faixa::before,
main > section.section-soft + section::before,
main > section.faixa + section::before{display:none}

/* ---------- 2. CARD ÚNICO, COM INVERSÃO ----------
   Uma aparência por superfície. Em seção bege o card é branco; em
   seção branca o card é bege. O contraste se mantém sem nova cor. */
.card,
.review-card,
.faq-card,
.tvp-card,
.highlight-box,
.cards4 .card,
.useful-grid .card,
.contact-grid .card,
.intro-cards .card,
.premium-grid .card,
.reveal-group .card,
.trombose-page .tvp-card,
.reviews-grid .review-card{
  background:var(--card-no-bege) !important;
  background-image:none !important;
  border:1px solid var(--linha) !important;
  border-radius:16px !important;
  box-shadow:0 1px 2px rgba(63,45,29,.03), 0 6px 16px rgba(63,45,29,.045) !important;
}

main > section.section-soft .card,
main > section.reviews-band .card,
main > section.faixa .card,
main > section.section-soft .review-card,
main > section.reviews-band .review-card,
main > section.faixa .review-card,
main > section.section-soft .faq-card,
main > section.section-soft .highlight-box,
main > section.faixa .highlight-box,
main > section.section-soft .cards4 .card,
main > section.faixa .cards4 .card,
main > section.section-soft .premium-grid .card,
main > section.faixa .premium-grid .card,
main > section.section-soft .reveal-group .card,
main > section.faixa .reveal-group .card,
main > section.section-soft .intro-cards .card,
main > section.faixa .intro-cards .card,
main > section.section-soft .contact-grid .card,
main > section.reviews-band .reviews-grid .review-card{
  background:var(--card-no-branco) !important;
  border-color:var(--linha-forte) !important;
  box-shadow:none !important;
}

/* Sem salto no toque: 90% do tráfego é celular, onde hover não
   existe e o estado fica grudado depois do toque. */
@media (hover:hover) and (pointer:fine){
  .card:hover,
  .cards4 .card:hover,
  .useful-grid .card:hover,
  .about-premium:hover,
  .reviews-shell:hover,
  .contact-grid .card:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 2px 6px rgba(63,45,29,.05), 0 12px 26px rgba(63,45,29,.08) !important;
    border-color:var(--linha-forte) !important;
  }
}
@media (hover:none){
  .card:hover,.cards4 .card:hover,.useful-grid .card:hover,
  .about-premium:hover,.reviews-shell:hover,.contact-grid .card:hover{
    transform:none !important;
  }
}

/* ---------- 3. PASSOS COMO LINHA DO TEMPO ----------
   Sequência não se comunica com cards lado a lado. */
@media (max-width:820px){
  .steps{
    display:block !important;
    position:relative;
    margin-top:20px !important;
    padding-left:34px;
  }
  .steps::before{
    content:"";
    position:absolute; left:15px; top:6px; bottom:6px;
    width:2px; background:linear-gradient(180deg,rgba(200,176,142,.9),rgba(200,176,142,.25));
  }
  .steps .step{
    position:relative;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 0 24px !important;
    border-radius:0 !important;
  }
  .steps .step:last-child{padding-bottom:0 !important}
  .steps .step::before{
    position:absolute; left:-34px; top:0;
    width:32px !important; height:32px !important;
    margin-bottom:0 !important;
    box-shadow:0 0 0 5px var(--sup-bege);
  }
  main > section.section-soft .steps .step::before,
  main > section.faixa .steps .step::before{box-shadow:0 0 0 5px var(--sup-branca)}
  .steps .step h3{margin-top:4px !important}
}

/* ---------- 4. ESPAÇAMENTO DO TÍTULO ----------
   O site já traz um traço decorativo abaixo do h2. Um segundo
   marcador seria o mesmo ruído que esta folha veio eliminar. */
main > section > .container > h2{margin-bottom:12px}

/* ---------- 5. BLOCOS EXPANSÍVEIS ----------
   O próprio título é o botão. Colapsados, os títulos formam o
   panorama da página: o leitor vê tudo que existe, abre o que
   interessa e fecha para seguir. Torna o índice desnecessário —
   a página passa a ser o próprio sumário. */
details.expansivel{border-top:1px solid var(--linha)}
details.expansivel:last-of-type{border-bottom:1px solid var(--linha)}
details.expansivel > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0;
}
details.expansivel > summary::-webkit-details-marker{display:none}
details.expansivel > summary::marker{content:""}
details.expansivel > summary > h2,
details.expansivel > summary > h3{margin:0 !important; flex:1}
details.expansivel > summary > h2::after,
details.expansivel > summary > h3::after{display:none !important}
details.expansivel > summary::after{
  content:""; flex:none; width:11px; height:11px;
  border-right:2.5px solid var(--brand-ink,#A89273);
  border-bottom:2.5px solid var(--brand-ink,#A89273);
  transform:rotate(45deg); margin-top:-5px;
  transition:transform .2s ease;
}
details.expansivel[open] > summary::after{transform:rotate(-135deg); margin-top:3px}
details.expansivel > .expansivel-corpo{padding:0 0 24px}
details.expansivel > .expansivel-corpo > *:first-child{margin-top:0}

/* Dentro de uma seção que já é uma sequência de expansíveis, o
   respiro vertical da seção pode encolher. */
main > section:has(> .container > details.expansivel){padding-block:clamp(26px,5vw,44px) !important}

/* Técnicas colapsáveis dentro de Opções de tratamento */
details.expansivel.treat-block{background:transparent !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important}
details.expansivel.treat-block{
  background:transparent !important;
  border:0 !important; border-top:1px solid var(--linha) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important;
}
details.expansivel.treat-block:last-of-type{border-bottom:1px solid var(--linha) !important}

/* =============================================================
   DUAS ZONAS
   Zona de decisão: o que convence. Texto direto na superfície,
   sem card. Tipografia e espaço fazem o trabalho.
   Zona de referência: o que explica. Uma lista única de tópicos
   expansíveis — juntos e iguais, para que fique óbvio que todos
   abrem.
   Card fica reservado a UM uso: escolhas paralelas entre as quais
   a pessoa precisa optar. Em qualquer outro lugar, sai.
   ============================================================= */

/* ---------- Blocos que deixam de ser card ---------- */
.bloco-texto{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
.bloco-texto .card-title{
  font-size:clamp(20px,2.2vw,25px);
  margin:0 0 10px;
}

/* ---------- Depoimento: citação, não caixa ---------- */
.reviews-grid{display:grid; gap:26px}
.reviews-grid .review-card,
main > section .reviews-grid .review-card{
  background:transparent !important;
  border:0 !important;
  border-left:2px solid rgba(200,176,142,.9) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:2px 0 2px 18px !important;
}
.reviews-grid .review-card p{margin:0; font-size:1.02rem; line-height:1.6}
.reviews-grid .review-card strong{
  display:block; margin-top:8px;
  font-size:.9rem; font-weight:600; color:#7a6d5d; letter-spacing:.01em;
}
.reviews-shell{background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important}

/* ---------- Zona de referência ---------- */
.zona-referencia > h2{margin-bottom:10px}
.zona-referencia details.expansivel > summary > h2,
.zona-referencia details.expansivel > summary > h3{
  font-size:clamp(17px,2vw,20px) !important;
  font-weight:700; letter-spacing:-.01em;
}
/* dentro da zona, o acordeão de dúvidas usa a mesma linguagem */
.zona-referencia .accordion details,
section#duvidas .accordion details{
  background:transparent !important;
  border:0 !important; border-top:1px solid var(--linha) !important;
  border-radius:0 !important; box-shadow:none !important;
  padding:16px 0 !important;
}
.zona-referencia .accordion details:last-of-type,
section#duvidas .accordion details:last-of-type{border-bottom:1px solid var(--linha) !important}
section#duvidas .accordion summary{font-size:1rem}

/* =============================================================
   ESCALA DE TÍTULOS
   Havia cinco regras conflitantes para h2 (20px !important,
   21px !important, 22px, 1.5rem e clamp(28px,2.7vw,36px)). Uma só
   vencia e o resto era letra morta, o que produzia tamanhos
   inconsistentes entre seções. Aqui fica uma escala única.
   ============================================================= */
main > section > .container > h2,
main > section > .container > .zona-referencia > h2,
main .about-premium-copy h2,
main #atuacao h2, main #duvidas h2, main #galeria h2,
main #contato h2, main .reviews-band h2,
main #avaliacoes h2, main .related-section h2,
main .bloco-texto > h2, main .bloco-texto > .card-title,
main .cta-band > h2,
main .card > h2, main .tvp-card > h2, main .alerta-urgencia > h2,
main .container > h2{
  font-size:21px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
}
.zona-referencia details.expansivel > summary > h2,
.zona-referencia details.expansivel > summary > h3,
details.expansivel > summary > h2,
details.expansivel > summary > h3{
  font-size:18px !important;
  line-height:1.24 !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
}
main .card h3, main .step h3, main .treat-facts h3{
  font-size:17px !important; line-height:1.25 !important; font-weight:700 !important;
}

/* =============================================================
   ROTEADOR DE SINTOMAS
   É o único lugar onde card faz sentido: escolhas paralelas. Fica
   lado a lado e mais compacto, para ler como um painel de opções e
   não como seis blocos empilhados. Ganha um verde acinzentado bem
   dessaturado — a única cor de apoio do site, para quebrar o bege
   sem brigar com o tom quente da marca.
   ============================================================= */
:root{ --apoio:#EEF1ED; --apoio-borda:rgba(116,133,114,.30); --apoio-texto:#4A5548; }

#queixas .cards4{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:18px !important;
}
#queixas .cards4 .card{
  background:var(--apoio) !important;
  border:1px solid var(--apoio-borda) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  padding:15px 14px 13px !important;
  display:flex; flex-direction:column; gap:5px;
}
#queixas .cards4 .card h3{
  font-size:15px !important; line-height:1.22 !important; color:var(--apoio-texto) !important;
}
#queixas .cards4 .card .muted{
  font-size:13.2px !important; line-height:1.42 !important; margin:0 !important;
}
#queixas .cards4 .card .cta-link{
  margin-top:auto; padding-top:8px;
  font-size:13px !important; font-weight:600;
}
@media (min-width:700px){
  #queixas .cards4{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important}
}

/* Card de sintoma: só reconhecimento, sem link. Quem se identificou
   tem o menu fixo no topo o tempo todo; o bloco fica limpo e não
   compete com a barra de agendamento. */
#queixas .cards4 .card{
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:70px;
}
#queixas .cards4 .card h3{margin:0 !important; text-wrap:balance}

/* =============================================================
   v31 — Menu: os dois destinos que trazem paciente (varizes e
   vasinhos) ficam abertos; o resto entra num grupo. Contato vira
   página própria, para quem lê uma página interna não ser jogado
   de volta para a home só para ver o endereço.
   ============================================================= */
.site-header-fixed .nav-dropdown > a[tabindex]{cursor:pointer}

/* =============================================================
   v32 — Padrão estrutural das páginas.

   Toda página termina do mesmo jeito: sintomas em cima para a
   pessoa se reconhecer, conteúdo no meio, e o contato no fim, como
   conclusão da leitura. O menu do topo é o atalho de quem não
   desceu; o bloco final é o desfecho de quem desceu.
   ============================================================= */

/* Bloco de sintomas — igual em todas as páginas */
#sintomas .cards4{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:18px !important;
}
#sintomas .cards4 .card{
  background:var(--apoio) !important;
  border:1px solid var(--apoio-borda) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  padding:15px 14px !important;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  min-height:70px;
}
#sintomas .cards4 .card h3{
  margin:0 !important;
  font-size:15px !important; line-height:1.22 !important;
  color:var(--apoio-texto) !important;
  text-wrap:balance;
}
/* Número ímpar de cartões: o último ocupa a linha inteira, para não
   sobrar buraco. */
#sintomas .cards4 .card:last-child:nth-child(odd){grid-column:1 / -1}
@media (min-width:700px){
  #sintomas .cards4{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important}
  #sintomas .cards4 .card:last-child:nth-child(odd){grid-column:auto}
}

/* Dados de contato — o rótulo é pequeno, o dado é o que salta.
   Sem sublinhado: numa lista curta em que quase tudo é link, o
   sublinhado vira ruído. */
.dados-contato{margin:18px 0 0}
.dados-contato dt{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:#6d5a35; font-weight:700; margin-top:16px;
}
.dados-contato dt:first-child{margin-top:0}
.dados-contato dd{margin:2px 0 0; font-size:1.02rem; line-height:1.5; color:#3a332b}
.dados-contato dd a{color:inherit; font-weight:700; text-decoration:none !important}
.dados-contato dd a:hover{text-decoration:underline !important; text-underline-offset:3px}

.bloco-contato .btn-wa{margin-top:22px; display:inline-flex}
.bloco-contato .nota-horario{
  margin:14px 0 0; font-size:.88rem; color:#7a6f63;
}
.mapa-wrap{margin-top:22px;border-radius:18px;overflow:hidden;border:1px solid var(--linha-forte)}
.mapa-wrap iframe{display:block;width:100%;height:340px;border:0}
@media (max-width:820px){.mapa-wrap iframe{height:260px}}

/* =============================================================
   v33 — Correções de contraste e de paleta.
   ============================================================= */

/* O depoimento é citação, não caixa. A regra genérica de card vencia
   por especificidade e devolvia fundo e borda cinza ao depoimento —
   invisível sobre o bege, mas uma caixa bege sobre o branco. */
main > section.reviews-band .reviews-grid .review-card,
main > section.reviews-band.section-soft .reviews-grid .review-card{
  background:transparent !important;
  border:0 !important;
  border-left:2px solid rgba(184,148,92,.85) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:2px 0 2px 18px !important;
}

/* Chips de credencial em branco. Em bloco, o preenchimento cor de
   areia somava ao bege do fundo e o site inteiro virava um tom só. */
.trust-chips span{
  background:#fff !important;
  border:1px solid rgba(76,58,35,.10) !important;
  color:#4a4038 !important;
  box-shadow:0 1px 3px rgba(47,42,36,.07) !important;
}
main > section.section-soft .trust-chips span,
main > section.faixa .trust-chips span{
  background:#FCFAF6 !important;
  border-color:rgba(76,58,35,.14) !important;
}
.cred-pills span{
  background:#fff !important;
  border:1px solid rgba(76,58,35,.10) !important;
  box-shadow:0 1px 3px rgba(47,42,36,.07) !important;
}

/* Assinatura da médica na abertura: quem cai direto numa página
   interna, sem foto, precisa saber de quem é o consultório. */
.assinatura-medica{
  margin:0 0 14px;
  font-size:clamp(15px,3.6vw,17px);
  line-height:1.35;
  color:#3a332b;
}
.assinatura-medica strong{font-weight:700; display:block}
.assinatura-medica span{
  display:block;
  font-size:.86em; font-weight:600; color:#7a6d5d; letter-spacing:.01em;
}


/* Foto na página da médica: retrato contido, para não empurrar o
   texto de formação para fora da primeira tela. */
.foto-medica{margin:18px 0 22px}
.foto-medica img{
  display:block; width:100%; max-width:380px;
  aspect-ratio:4/3; object-fit:cover; object-position:50% 28%;
  border-radius:18px; border:1px solid var(--linha);
}

/* Ilustração ao lado do texto: é apoio, não protagonista. */
.illus.illus-lado{
  float:right; width:118px; max-width:34%;
  margin:6px 0 12px 18px;
}
.illus.illus-lado img{width:100%; height:auto}
.illus.illus-lado figcaption{font-size:11.5px; line-height:1.35}
@media (min-width:760px){
  .illus.illus-lado{width:170px; margin-left:26px}
}

/* A home tem regras próprias de tipografia no herói que engoliam a
   escala da assinatura e da nota. Reafirmadas com o mesmo peso. */
.assinatura-medica{margin-top:20px !important}
.home-hero .hero-copy p.assinatura-medica{
  font-size:clamp(15px,3.6vw,17px) !important;
  line-height:1.35 !important;
  color:#3a332b !important;
}
.home-hero .hero-copy p.assinatura-medica span,
.assinatura-medica span{
  font-size:.86em !important;
  font-weight:600 !important;
  color:#7a6d5d !important;
  line-height:1.3 !important;
}
.home-hero .hero-copy p.lead-cta-note,
.lead-cta-note{
  font-size:clamp(12.6px,0.9vw,14px) !important;
  line-height:1.34 !important;
  color:#7a6d5d !important;
  margin-top:16px !important;
}

/* Cartão de sintoma clicável — só na home, onde cada queixa tem uma
   página para receber. Nas páginas internas o bloco fica sem link:
   o conteúdo que ele anuncia já está logo abaixo.

   A seta é fina e só aparece no que leva a algum lugar. É ela que
   distingue os cartões clicáveis do único que não é (a queixa
   arterial, que ainda não tem página). Sem esse sinal, o toque cairia
   no vazio sem aviso. */
#sintomas .nota-toque{
  margin:10px 0 0;
  font-size:12.6px;
  line-height:1.35;
  color:#8b8073;
}
#sintomas .cards4 .card-link{
  text-decoration:none !important;
  color:inherit !important;
  position:relative;
  padding-right:24px !important;
}
#sintomas .cards4 .card-link::after{
  content:""; position:absolute; right:11px; top:50%;
  width:6px; height:6px; margin-top:-3.5px;
  border-right:1.5px solid rgba(116,133,114,.6);
  border-top:1.5px solid rgba(116,133,114,.6);
  transform:rotate(45deg);
}
#sintomas .cards4 .card-link:hover{text-decoration:none !important}

/* "Atendimento particular · Não atendemos convênios" não cabia numa
   linha no celular e quebrava no meio da segunda frase. Duas linhas,
   a segunda mais discreta. */
.dados-contato dd > span{
  display:block;
  font-size:.88em;
  color:#7a6d5d;
  font-weight:400;
}
.lead-cta-note .nota-sub{display:block; text-wrap:balance}

/* Aviso de urgência — vivia só no <style> da página de trombose e,
   quando o mesmo bloco apareceu em /perna-inchada, saiu sem estilo
   nenhum. Passa a valer no site inteiro. */
.alerta-urgencia{
  margin-top:18px; padding:18px 18px 16px; border-radius:16px;
  background:rgba(176,86,62,.055);
  border:1px solid rgba(176,86,62,.28);
  border-left:4px solid rgba(176,86,62,.72);
}
.alerta-urgencia h2{margin:0 0 8px; font-size:clamp(18px,2vw,21px); color:#8c3f2c; letter-spacing:-.01em}
.alerta-urgencia h2::after{display:none !important}
.alerta-urgencia p{margin:0; color:#5d4438; line-height:1.62}

/* =============================================================
   v34 — Dois lugares onde o contraste não dava conta.
   ============================================================= */

/* 1. Cartão de sintoma. O verde de apoio (#EEF1ED) e o bege da
   seção (#F6F1EA) tinham praticamente a mesma luminosidade: o
   cartão não se descolava do fundo, só sujava o tom. Escurecido o
   suficiente para virar superfície, e a borda ficou mais firme. */
:root{ --apoio:#E3EAE1; --apoio-borda:rgba(96,115,94,.42); --apoio-texto:#3F4B3E; }

/* 2. Bloco de experiência. Sem fundo, sem borda e com o parágrafo na
   mesma cor do texto seguinte, ele lia como continuação da página.
   Ganha o mesmo fio vertical dos depoimentos — separa sem trazer
   de volta a caixa. */
.bloco-texto{
  border-left:3px solid rgba(184,148,92,.85) !important;
  padding:2px 0 2px 18px !important;
  margin-block:28px !important;
}
.bloco-texto .card-title{
  font-size:clamp(19px,2.1vw,23px);
  color:#2f2a24;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.bloco-texto p{color:#5f5346 !important}