/* ==========================================================================
   Dr. Bruno Bandeira — Ortopedia e Traumatologia
   Design system: "clínico editorial".

   Tipografia: Manrope 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.
   ========================================================================== */

/* ---- Manrope — 400/600/700/800, servida localmente ---- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/manrope-400.woff2') format('woff2'),url('fontes/manrope-400.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fontes/manrope-600.woff2') format('woff2'),url('fontes/manrope-600.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fontes/manrope-700.woff2') format('woff2'),url('fontes/manrope-700.ttf') format('truetype');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fontes/manrope-800.woff2') format('woff2'),url('fontes/manrope-800.ttf') format('truetype');}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* --- marca ---
     Petróleo #1e3d4f + turquesa #009BA2 (preenchimento: fios, ícones,
     gradientes). Em 04/08/2026 o cliente trocou as cores de texto:
     títulos/texto forte de #14262f para #3a5474 (7,7:1 no branco, passa AA)
     e o antigo --teal-600 #007A80 para #628ab5 — ATENÇÃO: #628ab5 rende
     3,6:1 no branco e REPROVA AA para texto de tamanho normal; passa apenas
     para texto grande/bold. Decisão do cliente, registrada. */
  --brand-escuro:#1e3d4f;--brand-turquesa:#009BA2;--brand-turquesa-claro:#2bbcc3;

  --azul-50:#eff5f8;--azul-100:#d8e5ec;--azul-200:#b3ccd9;--azul-300:#84a9bd;--azul-400:#4e7f9a;
  --azul-500:#1e3d4f;--azul-600:#2a5670;--azul-700:#1a3644;--azul-800:#30435b;--azul-900:#0f212b;
  --teal-50:#e8f8f9;--teal-100:#c9f0f2;--teal-200:#96e2e6;--teal-300:#628ab5;--teal-400:#2bbcc3;
  --teal-500:#009BA2;--teal-600:#628ab5;--teal-700:#00666b;--teal-800:#004f53;

  /* --- papel quente: o contraponto ao azul frio --- */
  --papel:#edeeef;--papel-2:#f1ede6;--papel-3:#e7e1d6;

  --gray-0:#fff;--gray-50:#f6f7f8;--gray-100:#eef1f4;--gray-200:#dfe4ea;--gray-300:#c6cdd6;
  /* --gray-600 é o texto secundário. Sobre o papel quente (#edeeef) o #6b7280
     antigo caía para 4,4:1 e reprovava no WCAG AA — este rende 5,0:1 no papel
     e 5,4:1 no branco, mantendo a leitura "suave" sem perder acessibilidade. */
  --gray-400:#a2abb6;--gray-500:#8F8F8F;--gray-600:#626a76;--gray-700:#4b5563;--gray-800:#313842;
  --tinta:#3a5474;

  --success:#628ab5;--info:#628ab5;--warning:#b8801f;--danger:#c0392f;

  --color-primary:var(--azul-500);--color-primary-hover:var(--azul-600);
  --color-secondary:var(--teal-600);--color-accent:var(--teal-500);
  --text-strong:var(--tinta);--text-body:var(--gray-700);--text-muted:var(--gray-600);
  --text-on-brand:#fff;--text-link:var(--azul-500);
  --surface-card:#fff;--surface-page:var(--papel);--surface-brand-soft:var(--azul-50);--surface-teal-soft:var(--teal-50);
  --border-subtle:var(--gray-200);--border-default:var(--gray-300);--border-brand:var(--azul-500);
  /* contorno sobre papel quente: cinza puro fica sujo, este acompanha o tom */
  --linha:rgba(30,61,79,.10);--linha-forte:rgba(30,61,79,.18);
  --focus-ring:rgba(0,155,162,.42);

  /* --- tipografia --- */
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(2.35rem,1.4rem + 3.9vw,4.1rem);
  --fs-h1:clamp(2.1rem,1.35rem + 3.1vw,3.4rem);
  --fs-h2:clamp(1.8rem,1.25rem + 2.3vw,2.75rem);
  --fs-h3:clamp(1.15rem,1.05rem + .45vw,1.35rem);
  --fs-lead:clamp(1.06rem,1rem + .38vw,1.28rem);
  --fs-body:1.0625rem;
  --fs-eyebrow:.75rem;
  --lh-display:1.03;--lh-heading:1.1;--lh-snug:1.45;--lh-body:1.72;
  --ls-display:-.028em;--ls-tight:-.022em;--ls-eyebrow:.16em;

  /* --- ritmo --- */
  --space-3:.875rem;--space-4:1.25rem;--space-5:1.75rem;--space-6:2.25rem;--space-7:3rem;
  --space-8:3.75rem;--space-9:4.5rem;
  --sec-y:clamp(4.25rem,3rem + 5.2vw,8rem);
  --container:1180px;--container-narrow:730px;--container-wide:1320px;
  --gutter:clamp(1.25rem,.9rem + 1.8vw,3rem);

  /* --- forma --- */
  --radius-xs:6px;--radius-sm:9px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;
  --radius-2xl:28px;--radius-pill:999px;

  /* --- sombra: empilhada, baixa opacidade, com tom da marca --- */
  --shadow-xs:0 1px 2px rgba(20,38,47,.05);
  --shadow-sm:0 1px 2px rgba(20,38,47,.05),0 3px 8px -3px rgba(20,38,47,.08);
  --shadow-md:0 2px 4px rgba(20,38,47,.04),0 10px 26px -10px rgba(20,38,47,.14);
  --shadow-lg:0 4px 8px rgba(20,38,47,.04),0 22px 48px -18px rgba(20,38,47,.20);
  --shadow-xl:0 6px 12px rgba(20,38,47,.05),0 38px 76px -28px rgba(20,38,47,.28);
  --shadow-brand:0 10px 24px -10px rgba(30,61,79,.55);
  --shadow-teal:0 10px 24px -10px rgba(0,155,162,.5);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --dur-fast:150ms;--dur:260ms;--dur-slow:480ms;

  --gradient-brand:linear-gradient(115deg,var(--azul-500) 0%,var(--teal-600) 62%,var(--teal-500) 100%);
  --gradient-paper:linear-gradient(180deg,#fff 0%,var(--papel) 100%);
  /* halo do hero: turquesa muito diluído — profundidade sem sujar o texto */
  --glow-teal:radial-gradient(58% 68% at 80% 18%,rgba(0,155,162,.14) 0%,rgba(0,155,162,0) 66%);
  --glow-navy:radial-gradient(52% 58% at 6% 94%,rgba(30,61,79,.09) 0%,rgba(30,61,79,0) 70%);
  /* grão sutil nas faixas escuras — evita o "banding" do degradê chapado */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ==========================================================================
   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:600;}
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:700;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(0,155,162,.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{color:var(--teal-300);}
.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-display);font-weight:800;font-size:var(--fs-display);
  line-height:var(--lh-display);letter-spacing:var(--ls-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:700;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--color-secondary);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-display);font-weight:800;font-size:var(--fs-h2);
  line-height:var(--lh-heading);letter-spacing:var(--ls-display);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:700;}
.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:800;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:700;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(--azul-500);color:#fff;box-shadow:var(--shadow-brand);}
.btn-primary:hover{background:var(--azul-600);box-shadow:0 16px 34px -12px rgba(30,61,79,.62);}
/* O hover escurece em vez de clarear: branco sobre --teal-500 (#009BA2) 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(0,155,162,.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:700;
  color:var(--color-primary);text-decoration:none;transition:color var(--dur);}
.go .ico{transition:transform var(--dur) var(--ease);}
.go:hover{color:var(--teal-600);}
.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. */
.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:600;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-500);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:var(--teal-200);
}
.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(30,61,79,.09);}
@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-50);color:var(--teal-600);}
.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:var(--teal-100);}
@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:700;color:var(--teal-700);margin-bottom:4px;font-size:.95rem;}
.alert .ad{color:var(--text-body);font-size:.93rem;line-height:1.62;}

/* resposta rápida (AEO) — bloco de abertura das páginas de conteúdo */
.ex-tldr{position:relative;background:var(--surface-page);border:1px solid var(--linha);
  border-radius:var(--radius-lg);padding:22px 24px 22px 27px;margin:0 0 32px;overflow:hidden;}
.ex-tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal-500);}
.ex-tldr .ex-tldr-lbl{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-secondary);margin-bottom:9px;}
.ex-tldr p{font-size:1.03rem;line-height:1.66;color:var(--text-body);}

/* CTA no meio do conteúdo longo */
.ex-cta-mid{margin:38px 0;padding:24px 26px;background:var(--azul-50);
  border:1px solid var(--azul-100);border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;
  position:relative;overflow:hidden;}
.ex-cta-mid::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 130% at 100% 0%,rgba(0,155,162,.14),transparent 70%);}
.ex-cta-mid p{margin:0;font-weight:700;color:var(--text-strong);font-size:1.04rem;line-height:1.4;
  position:relative;max-width:44ch;}
.ex-cta-mid .btn{flex-shrink:0;position:relative;}

/* citação editorial */
.pull{font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);
  line-height:1.34;letter-spacing:-.02em;color:var(--text-strong);border-left:2px solid var(--teal-500);
  padding-left:clamp(1.1rem,2.2vw,1.75rem);margin:0;text-wrap:pretty;}

/* ==========================================================================
   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-500);
  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. */
/* max-width: acima de ~1560px a altura travada em 380px transformava a tira
   numa faixa horizontal, com menos de 45% de cada retrato visivel. */
.lp-tira{margin:0 auto;max-width:1600px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--linha);overflow:hidden}
.lp-tira img{width:100%;height:clamp(240px,26vw,380px);object-fit:cover;
  object-position:50% 20%;display:block}
/* Recorte por foto. O seletor casa pelo nome do arquivo (o src carrega
   ?v=filemtime do bb_asset, dai o *=). Valores conferidos rodando o mesmo
   corte do object-fit fora do navegador — o painel de teste nao compoe
   frames, entao a checagem visual do enquadramento nao pode ser feita nele. */
.lp-tira img[src*="bandeira-um"]{object-position:50% 20%}
.lp-tira img[src*="bandeira-dois"]{object-position:50% 26%}
.lp-tira img[src*="bandeira-tres"]{object-position:50% 18%}
.lp-tira img[src*="bandeira-quatro"]{object-position:70% 30%}
/* 70%: em 58% o corte comia a placa com o nome na base do modelo anatomico */
.lp-tira img[src*="bandeira-cinco"]{object-position:50% 70%}
.lp-tira img[src*="bandeira-seis"]{object-position:50% 18%}
.lp-tira img[src*="bandeira-sete"]{object-position:50% 6%}
.lp-tira img[src*="bandeira-oito"]{object-position:50% 14%}
.lp-tira img[src*="bandeira-nove"]{object-position:50% 2%}

/* a tira da pagina do medico traz 4 fotos; as demais, 3 */
/* Quarta coluna quando a tira tem 4 fotos (só a página do médico tem).
   O min-width é obrigatório: :has() herda a especificidade do argumento, então
   este seletor vale 0,2,1 — e media query NÃO soma especificidade, então sem
   ele esta regra vencia a de 2 colunas do celular. Resultado até 19/08/2026: a
   tira de 4 fotos ficava com 4 colunas no celular e só as fotos 1 e 4 visíveis,
   ou seja, duas fotos estreitas e duas colunas em branco. */
/* complemento exato de max-width:760px — min-width:761px deixava as larguras
   fracionarias entre 760 e 761 (Windows a 125%, zoom) sem nenhuma das duas. */
@media not all and (max-width:760px){
  .lp-tira:has(img:nth-child(4)){grid-template-columns:repeat(4,1fr)}
}

/* Tablet e celular: 2 colunas com as duas primeiras fotos.
   Duas colunas é o melhor recorte possível — o slot fica quase na proporção
   nativa do arquivo (600x800), então quase nada é cortado. Em 375px a foto
   aparece praticamente inteira.
   Uma regra só para esconder, nth-child(n+3): antes havia uma media query
   escondendo a 3ª e outra escondendo a 2ª, e abaixo de 480px as duas valiam
   ao mesmo tempo — sobrava UMA foto, esticada num slot deitado. */
@media (max-width:760px){
  .lp-tira{grid-template-columns:repeat(2,1fr)}
  .lp-tira img:nth-child(n+3){display:none}
  .lp-tira img{height:clamp(250px,56vw,330px)}
}

/* --- 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(--color-secondary);text-decoration:none;font-weight:600;
  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-teal)}
.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-display);font-weight:800;font-size:var(--fs-h1);
  line-height:var(--lh-heading);letter-spacing:var(--ls-display);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-display);font-weight:800;
  font-size:clamp(1.5rem,1.25rem + 1.1vw,2rem);line-height:1.18;letter-spacing:var(--ls-tight);
  color:var(--text-strong);margin-bottom:var(--space-4);text-wrap:balance}
.article-block h3{font-size:var(--fs-h3);font-weight:700;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:700}
.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:800;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-display);font-weight:800;font-size:1.4rem;letter-spacing:var(--ls-tight);
  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:700;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:600;overflow-wrap:anywhere}
.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%;}
}

/* ==========================================================================
   TOQUE — o que so quebra no Safari do iPhone

   Nada aqui aparece no Chrome nem no painel de preview: sao comportamentos do
   motor do iOS. Agrupado em (hover:none) para valer no dedo e nao no mouse.
   ========================================================================== */
@media (hover:none){
  /* O iOS pinta um retangulo cinza atras de CADA toque. Num site claro isso
     le como falha de renderizacao. Tirar o retangulo obriga a devolver o
     retorno de toque, senao o botao fica mudo no dedo — e o que faz o
     :active logo abaixo. */
  a,button,summary,label,[role="button"]{-webkit-tap-highlight-color:transparent}
  .btn:active{transform:scale(.985)}
  .card-interactive:active{transform:translateY(1px)}

  /* Toque-e-segure em elemento decorativo abria o menu de copiar do iOS. */
  .ico,.itile,.slider-dot,.bbh-burger span{-webkit-user-select:none;user-select:none}

  /* Alvo minimo. A WCAG 2.2 pede 24px; a Apple recomenda 44. Os pontos do
     slider ja tem 24px de area por padding — aqui vao aos 44 no dedo, sem
     mudar os 8px visuais (o background-clip:content-box cuida disso). */
  .slider-dot{padding:18px 8px}
  .crumbs a,.blog-crumbs a{min-height:24px;display:inline-flex;align-items:center}
}

/* O iOS INFLA a fonte sozinho ao girar para paisagem sem esta linha, e o
   layout se desmonta. Reafirmado aqui porque o valor precisa existir tambem
   com o prefixo -webkit-, que o autoprefixer nao roda neste projeto. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Piso de tamanho de fonte no celular. Havia rotulo em 10,4px — no iPhone,
   com a tela a um palmo do rosto, isso e ilegivel para quem tem mais de 40
   anos, que e boa parte de quem procura ortopedista. */
@media (max-width:620px){
  .eyebrow,.hero-cred .sp,.cat,.olho,.badge-un,.post-byline,.crumbs{font-size:12px}
}