/* ==========================================================================
   Dra. Catarina Schiavo — Cardiologia
   Design system: "clínico editorial".

   Tipografia: Roboto Condensed em toda a interface — 400 no corpo, 600 nos links e
   rótulos, 700 nos botões e 800 nos títulos. Uma família só, hierarquia por peso.

   Superfícies alternadas: branco → papel quente (#edeeef) → petróleo profundo.
   O papel quente é o que tira o site da frieza clínica sem perder sobriedade.

   Assinatura visual: o FIO — 2px de turquesa que marca o início de seção, o
   item ativo do menu e a borda superior dos cards no hover. Ecoa o arco do
   favicon e a ideia de eixo/alinhamento, que é do que trata a ortopedia.
   ========================================================================== */

/* ---- Roboto Condensed — 400/600/700/800, servida localmente.
   Substituiu a Manrope em 26/08/2026. Os arquivos sao subsets pt-BR em
   WOFF2: os quatro pesos somam 51,9 KB contra 117,9 KB da Manrope. ---- */
/* @font-face e :root MIGRARAM para tokens.css (fundação única site+blog,
   26/08/2026). Este arquivo pressupõe tokens.css carregado ANTES — sem
   ele, todo var() falha silenciosamente (declaração zerada, sem erro no
   console). page-head.php e 404.php fazem o par na ordem certa. */


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
/* o cabeçalho é sticky: âncoras precisam parar abaixo dele */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px;}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-body);background:var(--surface-card);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;}
p{margin:0;}
::selection{background:var(--teal-200);color:var(--tinta);}

/* foco visível e consistente em todo o site */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--teal-500);outline-offset:3px;border-radius:var(--radius-xs);
}

/* pular para o conteúdo */
.bb-skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--azul-500);color:#fff;
  padding:14px 22px;border-radius:0 0 var(--radius-md) 0;font-weight:500;text-decoration:none;font-size:.9rem;}
.bb-skip:focus{left:0;}

/* ==========================================================================
   3. MOTION — entrada ao rolar
   O CSS só esconde quando <html> tem .js-rv, marcado por reveal.js ANTES da
   pintura. Sem JS, ou com prefers-reduced-motion, nada fica oculto.
   ========================================================================== */
html.js-rv [data-rv]{opacity:0;will-change:opacity,transform;
  transition:opacity .62s var(--ease-out-quart),transform .62s var(--ease-out-quart);
  transition-delay:calc(var(--rv-i,0) * 78ms);}
html.js-rv [data-rv="up"]   {transform:translate3d(0,26px,0);}
html.js-rv [data-rv="left"] {transform:translate3d(-30px,0,0);}
html.js-rv [data-rv="right"]{transform:translate3d(30px,0,0);}
html.js-rv [data-rv="scale"]{transform:scale(.965);}
html.js-rv [data-rv="fade"] {transform:none;}
html.js-rv [data-rv].rv-in{opacity:1;transform:none;}
/* depois de entrar, libera a camada de composição */
html.js-rv [data-rv].rv-in{will-change:auto;}

/* o fio de seção desenha-se da esquerda */
.rule{display:block;width:56px;height:2px;background:var(--teal-500);border-radius:2px;transform-origin:left center;}
html.js-rv .rule[data-rv]{opacity:1;transform:scaleX(0);
  transition:transform .7s var(--ease-out-quart);transition-delay:calc(var(--rv-i,0) * 78ms);}
html.js-rv .rule[data-rv].rv-in{transform:scaleX(1);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js-rv [data-rv],html.js-rv .rule[data-rv]{opacity:1!important;transform:none!important;transition:none!important;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter);}
.wrap-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter);}
.sec{padding-block:var(--sec-y);position:relative;}
.sec-tight{padding-block:calc(var(--sec-y) * .62);}

/* tons de superfície — o ritmo branco → papel → escuro dá hierarquia à página */
.tone-paper{background:var(--surface-page);}
.tone-paper-soft{background:var(--gradient-paper);}
.tone-brand-soft{background:var(--azul-50);}
.tone-deep{background:var(--azul-800);color:rgba(255,255,255,.84);position:relative;isolation:isolate;}
.tone-deep::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);
  background-size:140px;opacity:.15;mix-blend-mode:overlay;pointer-events:none;}
.tone-deep::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(68% 88% at 84% 6%,rgba(187,128,90,.24) 0%,rgba(0,155,162,0) 62%);}
.tone-deep h1,.tone-deep h2,.tone-deep h3,.tone-deep strong{color:#fff;}
.tone-deep .eyebrow,.lp-sec-tinta .eyebrow{color:#e3c7ad;}
.tone-deep .sh .lead{color:rgba(255,255,255,.76);}
/* fio de separação entre faixas de mesmo tom */
.edge-top{border-top:1px solid var(--linha);}
.edge-bottom{border-bottom:1px solid var(--linha);}

/* ==========================================================================
   5. TIPOGRAFIA
   ========================================================================== */
.display{font-family:var(--font-title);font-weight:400;font-synthesis:none;letter-spacing:normal;font-size:var(--fs-display);
  line-height:var(--lh-display);color:var(--text-strong);text-wrap:balance;}

/* olho / eyebrow — sempre acompanhado do fio */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-sans);
  font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--cobre-texto);line-height:1;}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;border-radius:2px;flex-shrink:0;opacity:.85;}
.eyebrow.no-rule::before{display:none;}

/* cabeçalho de seção */
.sh{max-width:64ch;}
.sh.center{text-align:center;max-width:58ch;margin-inline:auto;}
.sh.center .eyebrow{justify-content:center;}
.sh .eyebrow{margin-bottom:var(--space-4);}
.sh h2{font-family:var(--font-title);font-weight:400;font-synthesis:none;letter-spacing:normal;font-size:var(--fs-h2);
  line-height:var(--lh-heading);color:var(--text-strong);text-wrap:balance;}
.sh .lead{margin-top:var(--space-4);font-size:var(--fs-lead);line-height:var(--lh-snug);
  color:var(--text-muted);text-wrap:pretty;}

/* corpo de leitura longa */
.prose p{color:var(--text-body);line-height:var(--lh-body);text-wrap:pretty;}
.prose p + p{margin-top:1.05em;}
.prose strong{color:var(--text-strong);font-weight:500;}
.prose ul{margin:1.1em 0 0;padding-left:1.15em;}
.prose li{color:var(--text-body);line-height:var(--lh-body);margin-bottom:.6em;}
.prose li::marker{color:var(--teal-500);}
.prose li:last-child{margin-bottom:0;}
.prose ul + p{margin-top:1.1em;}

/* numeral editorial */
.numeral{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;
  color:var(--teal-500);line-height:1;}

/* ==========================================================================
   6. BOTÕES
   Raio de 12px (não pílula): lê como "considerado", não como template.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:500;line-height:1;letter-spacing:-.005em;
  border-radius:var(--radius-md);cursor:pointer;text-decoration:none;border:1.5px solid transparent;
  position:relative;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn .ico,.btn svg{transition:transform var(--dur) var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn:hover .ico{transform:translateX(3px);}
.btn:active{transform:translateY(0) scale(.985);}
.btn-sm{padding:9px 16px;font-size:.85rem;min-height:40px;}
.btn-md{padding:13px 24px;font-size:.97rem;min-height:48px;}
.btn-lg{padding:17px 32px;font-size:1.03rem;min-height:58px;}
.btn-block{width:100%;}

.btn-primary{background:var(--teal-600);color:#fff;box-shadow:var(--shadow-brand);}
.btn-primary:hover{background:#a56f4b;box-shadow:0 16px 34px -12px rgba(165,111,75,.6);}
/* O hover escurece em vez de clarear: branco sobre o cobre #bb805a rende
   só 3,4:1 e reprovaria no WCAG AA. --teal-700 mantém 6,2:1. */
.btn-secondary{background:var(--teal-600);color:#fff;box-shadow:var(--shadow-teal);}
.btn-secondary:hover{background:var(--teal-700);box-shadow:0 16px 34px -12px rgba(187,128,90,.6);}
.btn-outline{background:transparent;color:var(--azul-500);border-color:var(--linha-forte);box-shadow:var(--shadow-xs);}
.btn-outline:hover{border-color:var(--azul-500);background:var(--azul-50);box-shadow:var(--shadow-sm);}
.btn-ghost{background:transparent;color:var(--color-secondary);border-color:transparent;padding-inline:10px;}
.btn-ghost:hover{color:var(--teal-700);background:var(--teal-50);}
/* Verde OFICIAL do WhatsApp (#25D366) com tipografia branca: as duas coisas
   pedidas pelo cliente em 19/08/2026, depois de eu ter proposto texto escuro.
   REGISTRO: branco sobre #25D366 rende 1,98:1 e REPROVA o WCAG AA (mínimo
   4,5:1) — decisão do cliente, comunicada. Se um dia quiser corrigir sem
   perder a identidade do WhatsApp, há dois caminhos: texto #0b141a sobre o
   mesmo verde (9,4:1) ou o verde escuro oficial #075E54 com branco (7,7:1). */
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 10px 24px -12px rgba(37,211,102,.75);}
.btn-whatsapp:hover{background:#1fbe5b;color:#fff;}
.btn-whatsapp .ico,.btn-whatsapp svg{color:#fff;}
/* sobre faixa escura */
.tone-deep .btn-outline{color:#fff;border-color:rgba(255,255,255,.32);}
.tone-deep .btn-outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.6);}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none;}.btn:hover .ico{transform:none;}}

/* link com seta — microinteração padrão do site */
.go{display:inline-flex;align-items:center;gap:7px;min-height:28px;font-size:.9rem;font-weight:500;
  color:var(--cobre-texto);text-decoration:none;transition:color var(--dur);}
.go .ico{transition:transform var(--dur) var(--ease);}
.go:hover{color:#a56f4b;}
.go:hover .ico{transform:translateX(4px);}
/* Alvo de toque: nos cards em que o .go é o ÚNICO link, ele cobre o card inteiro.
   O texto continua sendo o rótulo acessível, mas a área clicável passa de ~25px
   de altura para o card todo — o padrão "stretched link". Só é aplicado nas
   variantes de card que não têm outros links dentro. */
/* chip de categoria nos cards de artigo (26/08): sobre a capa, clicavel
   por cima do alvo de toque do card (z-index acima do .go::after) */
.post-card .capa{position:relative}
.post-card .cat-chip{position:absolute;left:12px;top:12px;z-index:2;padding:5px 12px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.93);color:#a56f4b;
  font-size:.65rem;font-weight:500;letter-spacing:normal;text-transform:uppercase;
  text-decoration:none;box-shadow:var(--shadow-xs);
  transition:background var(--dur),color var(--dur);}
.post-card .cat-chip:hover{background:var(--teal-600);color:#fff;}
.post-card .cat-chip.semcapa{position:static;display:inline-block;margin-bottom:10px;
  border:1px solid var(--linha-forte);box-shadow:none;}
/* Card de area (compartilhado home + paginas de indice, 26/08 — antes
   vivia no CSS embutido do index antigo e sumiu na reescrita da home) */
.area-card{display:flex;flex-direction:column}
.area-card .capa{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  background:var(--surface-page)}
.area-card .capa img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.area-card h3{font-family:var(--font-display);font-weight:500;font-size:1.28rem;letter-spacing:-.02em;
  color:var(--text-strong);line-height:1.24;margin-bottom:9px}
.area-card p{color:var(--text-muted);line-height:1.58;font-size:.93rem;flex-grow:1;margin-bottom:var(--space-5)}
.area-card .go::after,.post-card .go::after,
.area-mini .go::after,.proc-box .go::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
}

/* link de texto com sublinhado que cresce */
.link-underline{color:var(--color-primary);font-weight:500;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-size:0 1.5px;
  background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .32s var(--ease-out-quart),color var(--dur);}
.link-underline:hover{background-size:100% 1.5px;}

/* ==========================================================================
   7. CARDS — hover: elevação + fio turquesa na borda superior
   ========================================================================== */
.card{
  position:relative;background:var(--surface-card);border:1px solid var(--linha);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:var(--space-6);
  /* overflow:hidden prende o fio do hover DENTRO do contorno arredondado —
     sem ele, a linha reta vazava para fora dos cantos de 22px. A box-shadow
     não é afetada (sombras não são recortadas pelo overflow do próprio elemento). */
  overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur);
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--teal-600);transform:scaleX(0);transform-origin:left center;
  transition:transform .42s var(--ease-out-quart);
}
.card-interactive:hover,.card-interactive:focus-within{
  transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(187,128,90,.45);
}
.card-interactive:hover::before,.card-interactive:focus-within::before{transform:scaleX(1);}
.card-flat{box-shadow:none;}
.card-paper{background:var(--surface-page);}
.tone-paper .card{border-color:rgba(75,79,69,.10);}
@media (prefers-reduced-motion:reduce){
  .card-interactive:hover{transform:none;}
  .card::before{display:none;}
}

/* ==========================================================================
   8. LADRILHOS DE ÍCONE
   ========================================================================== */
/* min-* e não width/height: reserva a caixa do ícone ANTES do icons.js
   injetar o SVG (senão o texto do botão pula ~16px quando ele chega),
   mas não atropela os .itile, que são o mesmo elemento com tamanho
   próprio bem maior. */
.ico{display:inline-flex;align-items:center;justify-content:center;line-height:0;
  min-width:1em;min-height:1em;}
.ico svg{width:1em;height:1em;display:block;}
.itile{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);
  flex-shrink:0;transition:transform var(--dur) var(--ease),background var(--dur),color var(--dur);}
.itile-azul{background:var(--azul-50);color:var(--azul-500);}
.itile-teal{background:var(--teal-600);color:#fff;}
.itile-line{background:transparent;border:1.5px solid var(--linha-forte);color:var(--teal-600);}
.card-interactive:hover .itile{transform:scale(1.06) rotate(-3deg);}
.card-interactive:hover .itile-teal{background:rgba(187,128,90,.22);color:var(--teal-600);}
@media (prefers-reduced-motion:reduce){.card-interactive:hover .itile{transform:none;}}

/* ==========================================================================
   9. AVISOS E DESTAQUES
   ========================================================================== */
.alert{display:flex;gap:15px;align-items:flex-start;border-radius:var(--radius-lg);padding:18px 20px;}
.alert-care{background:var(--teal-50);border:1px solid var(--teal-100);}
.alert .ai{color:var(--teal-600);flex-shrink:0;font-size:20px;margin-top:2px;}
.alert .at{font-weight:500;color:var(--teal-700);margin-bottom:4px;font-size:.95rem;}
.alert .ad{color:var(--text-body);font-size:.93rem;line-height:1.62;}

/* (.ex-tldr/.ex-cta-mid/.pull do modelo removidos no QA de 26/08 — sem uso) */
/* ==========================================================================
   10. GRADES E LISTAS
   ========================================================================== */
.grid-auto{display:grid;gap:clamp(14px,1.5vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));}
.grid-2{display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:1fr 1fr;align-items:center;}
.grid-2>*{min-width:0;}
@media (max-width:900px){.grid-2{grid-template-columns:1fr;}}
/* Grade determinística para conjuntos de 4 cards: 4 → 2×2 → 1.
   O auto-fill encaixava 3 colunas no desktop e largava o 4º card órfão
   numa linha sozinha — nunca mais. */
.grid-4{display:grid;gap:clamp(14px,1.5vw,20px);grid-template-columns:repeat(4,1fr);}
@media (max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-4{grid-template-columns:1fr;}}
/* Par de cards largos (hub das áreas): 2×2 no desktop, 1 coluna no mobile. */
.grid-2x2{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(2,1fr);}
.grid-2x2>*{min-width:0;}
@media (max-width:760px){.grid-2x2{grid-template-columns:1fr;}}

/* ==========================================================================
   10.5 SLIDER — fileiras longas de cards viram páginas deslizáveis.
   Scroll-snap nativo: o arrasto/swipe é do navegador; o slider.js só cuida
   das setas e das bolinhas. Sem JS, vira uma fileira com scroll horizontal —
   nada fica escondido.
   Variantes: .slider-4 (4 por vista), .slider-3 (3 por vista) e .slider-2
   (2 por vista). As duas primeiras caem para 2 no tablet; todas caem para
   86% (com espiada do próximo) no celular.
   A variante é escolhida pela largura da VIEWPORT, não do container — um
   slider dentro de meia coluna precisa da variante menor para não espremer
   os cartões. É o caso do .ag-info em agendamento.php.
   ========================================================================== */
.slider{margin-top:var(--space-8);}
/* O padding/margin negativos dão ar para a sombra e o lift do hover DENTRO do
   scrollport — um scroll container recorta overflow vertical dos filhos. */
.slider-track{display:grid;grid-auto-flow:column;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:8px 4px 30px;margin:-8px -4px -30px;}
.slider-track::-webkit-scrollbar{display:none;}
.slider-track>*{scroll-snap-align:start;}
.slider-4 .slider-track{grid-auto-columns:calc((100% - 48px)/4);}
.slider-3 .slider-track{grid-auto-columns:calc((100% - 32px)/3);}
.slider-2 .slider-track{grid-auto-columns:calc((100% - 16px)/2);}
@media (max-width:1080px){
  .slider-4 .slider-track,.slider-3 .slider-track{grid-auto-columns:calc((100% - 16px)/2);}
}
@media (max-width:640px){
  .slider-4 .slider-track,.slider-3 .slider-track,
  .slider-2 .slider-track{grid-auto-columns:86%;}
}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:var(--space-5);}
.slider-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--linha-forte);
  background:var(--surface-card);color:var(--azul-500);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;
  transition:border-color var(--dur),background var(--dur),color var(--dur),opacity var(--dur);}
.slider-btn svg{width:18px;height:18px;}
.slider-btn:hover:not(:disabled){border-color:var(--teal-500);background:var(--teal-50);color:var(--teal-700);}
.slider-btn:disabled{opacity:.32;cursor:default;}
/* min-width:0 + wrap: como item de flex, a fila de bolinhas não encolhe abaixo
   do conteúdo e estouraria a tela se houvesse muitas páginas. */
.slider-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-width:0;}
/* O ponto mede 8px, mas o BOTÃO precisa de área de toque: 8px de altura
   reprova o mínimo de 24px da WCAG 2.2 (2.5.8) e é difícil de acertar no
   celular. O padding cria a área; o background-clip mantém o ponto
   visualmente pequeno. */
/* padding lateral so para o ALVO: o ponto continua com 8px visuais por causa
   do background-clip:content-box, mas a area clicavel vai a 24px, que e o
   minimo do WCAG 2.5.8. */
.slider-dot{width:8px;height:8px;border-radius:var(--radius-pill);border:none;
  padding:9px 8px;background-clip:content-box;box-sizing:content-box;
  /* background-COLOR, nao o atalho: o atalho reseta o background-clip acima
     e o ponto passaria a pintar o alvo inteiro em vez dos 8px visuais. */
  background-color:var(--gray-300);cursor:pointer;
  transition:background var(--dur),width var(--dur) var(--ease-out-quart);}
.slider-dot:hover{background-color:var(--gray-400);}
.slider-dot.active{background-color:var(--teal-500);width:24px;}
@media (prefers-reduced-motion:reduce){.slider-track{scroll-behavior:auto;}.slider-dot{transition:none;}}

/* lista de checagem — padrão do site para enumerar condições/itens */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;line-height:1.52;
  color:var(--text-body);margin:0;}
.checklist li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;color:var(--teal-600);
  stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
/* régua entre itens (coluna única): linha sob todos, menos o último */
.checklist-ruled{gap:0;}
.checklist-ruled li{margin:0;padding:11px 0;border-bottom:1px solid var(--linha);}
.checklist-ruled li:first-child{padding-top:0;}
.checklist-ruled li:last-child{border-bottom:0;padding-bottom:0;}
.checklist-boxed li{background:var(--surface-card);border:1px solid var(--linha);
  border-radius:var(--radius-md);padding:13px 16px;
  transition:border-color var(--dur),transform var(--dur) var(--ease),box-shadow var(--dur);}
.checklist-boxed li:hover{border-color:var(--teal-200);transform:translateX(3px);box-shadow:var(--shadow-xs);}
/* Duas colunas por CSS columns, não por grid: no grid cada linha herdava a
   altura do item mais alto do par e criava "buracos" de espaçamento quando um
   item de 1 linha ficava ao lado de um de 2. Columns mantém o ritmo contínuo.
   Fio entre os itens: régua sutil sob TODOS (inclusive os últimos de cada
   coluna — o CSS não enxerga quebras de coluna, e o padding uniforme é o que
   mantém o topo das duas colunas alinhado). */
.checklist-cols{display:block;columns:2;column-gap:36px;}
.checklist-cols li{break-inside:avoid;margin-bottom:0;padding:11px 0;
  border-bottom:1px solid var(--linha);}
@media (max-width:640px){.checklist-cols{columns:1;}}
@media (prefers-reduced-motion:reduce){.checklist-boxed li:hover{transform:none;}}

/* ==========================================================================
   11. PADRÕES DE PÁGINA INTERNA
   Herói, migalhas e coluna de leitura: usados por todas as páginas internas,
   para que nenhuma delas precise reinventar o próprio cabeçalho.
   ========================================================================== */

/* Tira de fotos: substituiu a faixa de arte gerada em 19/08, quando o medico
   entregou as fotos reais. Tres retratos lado a lado, cada um em ~1/3 da
   largura — dentro dos 600px nativos do arquivo, entao nao ha upscale.
   A ALTURA e travada (nao o aspect-ratio): com 3/4 a tira viraria um bloco de
   600px de altura no desktop. O object-position sobe o corte ate o rosto. */
/* (tira de fotos do site-modelo removida no QA de 26/08 — sem uso) */
/* RESTAURO 27/08: a excisao acima comeu tambem os kits VIVOS da secao
   (migalhas, herois de pagina interna, coluna de leitura, caixas e docs
   legais). Reinseridos abaixo exatamente como eram antes do corte. */

/* --- migalhas --- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 2px;font-size:.8rem;
  color:var(--text-muted);margin-bottom:var(--space-5)}
.crumbs a{color:var(--cobre-texto);text-decoration:none;font-weight:500;
  padding:2px 0;transition:color var(--dur)}
.crumbs a:hover{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px}
/* --gray-300 rendia 1,5:1 sobre o papel: o ">" praticamente sumia e a trilha
   lia como uma palavra só. --gray-500 dá ~3:1, visível sem competir com os
   links. É decorativo (aria-hidden), mas precisa ser visto. */
.crumbs .sep{margin:0 8px;color:var(--gray-500)}
.crumbs [aria-current]{color:var(--text-body)}

/* --- herói de página interna --- */
.phero{position:relative;isolation:isolate;overflow:hidden;background:var(--gradient-paper);
  border-bottom:1px solid var(--linha)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--glow-brand)}
.phero .in{max-width:var(--container);margin:0 auto;padding:clamp(2.25rem,1.6rem + 2.6vw,3.75rem) var(--gutter) clamp(2.75rem,2rem + 3vw,4.5rem)}
.phero .tile{width:58px;height:58px;font-size:28px;margin-bottom:var(--space-5)}
.phero .eyebrow{margin-bottom:var(--space-4)}
.phero h1{font-family:var(--font-title);font-weight:400;font-synthesis:none;letter-spacing:normal;font-size:var(--fs-h1);
  line-height:var(--lh-heading);color:var(--text-strong);
  max-width:19ch;text-wrap:balance}
.phero .lead{margin-top:var(--space-5);font-size:var(--fs-lead);line-height:1.56;
  color:var(--text-body);max-width:60ch;text-wrap:pretty}
.phero .stack-cta{margin-top:var(--space-6)}
/* variante centrada (agendamento, páginas legais) */
.phero.center-hero .in{text-align:center}
.phero.center-hero .crumbs{justify-content:center}
.phero.center-hero .eyebrow{justify-content:center}
.phero.center-hero h1{margin-inline:auto;max-width:22ch}
.phero.center-hero .lead{margin-inline:auto}
.phero.center-hero .stack-cta{justify-content:center}

/* --- coluna de leitura longa --- */
.article{max-width:var(--container-narrow);margin-inline:auto;padding:var(--sec-y) var(--gutter);}
.article-block + .article-block{margin-top:clamp(2.5rem,4vw,3.5rem)}
.article-block h2{font-family:var(--font-title);font-weight:400;font-synthesis:none;letter-spacing:normal;
  font-size:clamp(1.5rem,1.25rem + 1.1vw,2rem);line-height:1.18;
  color:var(--text-strong);margin-bottom:var(--space-4);text-wrap:balance}
.article-block h3{font-size:var(--fs-h3);font-weight:500;color:var(--text-strong);
  margin:var(--space-5) 0 var(--space-3)}
.article-block p{color:var(--text-body);line-height:var(--lh-body);text-wrap:pretty}
.article-block p + p{margin-top:1.05em}
.article-block strong{color:var(--text-strong);font-weight:500}
.article-block ul{margin:1.15em 0 0;padding-left:1.2em}
.article-block li{color:var(--text-body);line-height:var(--lh-body);margin-bottom:.65em}
.article-block li::marker{color:var(--teal-500)}
.article-block li:last-child{margin-bottom:0}
.article-block ul + p{margin-top:1.15em}
.article-block .alert{margin-top:var(--space-6)}

/* --- bloco de condições atendidas --- */
.cond-box{background:var(--surface-page);border:1px solid var(--linha);border-radius:var(--radius-xl);
  padding:clamp(1.6rem,3vw,2.35rem)}
.cond-box h2{margin-bottom:6px}
.cond-box .nota{margin:0 0 var(--space-5);font-size:.9rem;color:var(--text-muted);line-height:1.6}
/* só neutraliza o fundo; borda e padding ficam com a régua do .checklist-cols
   (esta regra tem especificidade maior e estava anulando as linhas) */
.cond-box .checklist li{background:transparent}

/* --- lista de etapas numeradas (avaliação cirúrgica) --- */
.etapas-lista{list-style:none;margin:var(--space-6) 0 0;padding:0;counter-reset:et;display:grid;gap:12px}
.etapas-lista li{counter-increment:et;display:flex;gap:16px;align-items:flex-start;margin:0;
  background:var(--surface-page);border:1px solid var(--linha);border-radius:var(--radius-lg);
  padding:18px 20px;transition:border-color var(--dur),transform var(--dur) var(--ease)}
.etapas-lista li:hover{border-color:var(--teal-200);transform:translateX(4px)}
/* line-height:1 + margin-top alinham o topo do numeral com o do título ao lado */
.etapas-lista li::before{content:counter(et,decimal-leading-zero);flex-shrink:0;
  font-family:var(--font-display);font-weight:500;font-size:1.3rem;line-height:1;
  color:var(--teal-500);min-width:1.7em;margin-top:2px}
.etapas-lista b{display:block;font-size:1rem;color:var(--text-strong);margin-bottom:4px}
.etapas-lista span{font-size:.93rem;line-height:1.6;color:var(--text-muted)}
@media (prefers-reduced-motion:reduce){.etapas-lista li:hover{transform:none}}

/* --- páginas legais --- */
.legal-doc h2{font-family:var(--font-title);font-weight:400;font-synthesis:none;letter-spacing:normal;font-size:1.4rem;
  color:var(--text-strong);margin:clamp(2.25rem,4vw,2.75rem) 0 var(--space-3)}
.legal-doc h2:first-child{margin-top:0}
.legal-doc h3{font-size:1.02rem;font-weight:500;color:var(--text-strong);margin:var(--space-5) 0 8px}
.legal-doc p{margin:0 0 .95em;color:var(--text-body);line-height:var(--lh-body)}
.legal-doc ul{margin:0 0 1em;padding-left:1.2em}
.legal-doc li{color:var(--text-body);line-height:var(--lh-body);margin-bottom:.5em}
.legal-doc li::marker{color:var(--teal-500)}
.legal-doc a{color:var(--color-primary);font-weight:500;overflow-wrap:anywhere}
.legal-doc strong{color:var(--text-strong);font-weight:500}
.legal-doc strong{color:var(--text-strong);font-weight:500}
.legal-doc strong{color:var(--text-strong);font-weight:500}
.legal-doc strong{color:var(--text-strong);font-weight:500}
.legal-doc strong{color:var(--text-strong);font-weight:500}
.legal-doc .cx{background:var(--surface-page);border:1px solid var(--linha);
  border-left:3px solid var(--teal-500);border-radius:var(--radius-lg);
  padding:22px 24px;margin:0 0 var(--space-6)}
.legal-doc .cx p:last-child{margin-bottom:0}

/* ==========================================================================
   12. UTILITÁRIOS
   ========================================================================== */
.mt-3{margin-top:var(--space-3);}.mt-4{margin-top:var(--space-4);}.mt-5{margin-top:var(--space-5);}
.mt-6{margin-top:var(--space-6);}.mt-7{margin-top:var(--space-7);}
.center{text-align:center;}
.stack-cta{display:flex;flex-wrap:wrap;gap:12px;}
.stack-cta.center{justify-content:center;}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* CTAs empilham em largura total no celular: alvo de toque generoso */
@media (max-width:520px){
  .stack-cta{flex-direction:column;align-items:stretch;}
  .stack-cta .btn{width:100%;}
}
/* No celular, rótulo longo quebra linha em vez de estourar a viewport — o .btn
   tem white-space:nowrap por padrão, e rótulo de CTA em português é comprido
   ("Entender qual caminho pode ser considerado" dá 431px numa linha só). */
@media (max-width:620px){
  .btn{white-space:normal;text-align:center;line-height:1.35;max-width:100%;}
}