/* ==========================================================================
   Dr. Jorge Petry — 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 ---
     Paleta do Dr. Jorge Petry, aplicada em 21/09/2026 por decisão do Marco:
     petróleo #1e3d4f + turquesa #009BA2. Substituiu o par azul-arroxeado
     herdado do site modelo (#3a5474 e #628ab5).

     Ganho medido nos títulos: #3a5474 rendia 7,78:1 no branco e 6,69:1 no
     papel; #1e3d4f rende 11,44:1 e 9,85:1.

     ATENÇÃO ao turquesa COMO TEXTO: #009BA2 rende 3,38:1 no branco e
     2,91:1 sobre o papel quente — reprova AA para texto normal e, no
     papel, reprova até para texto grande. Ele é cor de PREENCHIMENTO:
     fios, ícones, bordas, fundo de botão. Para turquesa em texto existe
     o --teal-700 #00666b, que rende 6,75:1 no branco e 5,81:1 no papel.
     O painel administrativo já separa os dois papéis assim
     (--teal / --teal-acao). Pendente de decisão para o site. */
  --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;
  /* 800 era #30435b, um índigo fora da família petróleo. Passou a apontar
     para o tom da marca: .tone-deep fica coerente com header e rodapé, e
     o branco a 84% sobre ele sobe de 8,4:1 para 9,5:1. */
  --azul-800:var(--azul-500);--azul-900:#0f212b;
  --teal-50:#e8f8f9;--teal-100:#c9f0f2;--teal-200:#96e2e6;--teal-400:#2bbcc3;
  --teal-500:#009BA2;--teal-700:#00666b;--teal-800:#004f53;
  /* 300 e 600 guardavam o azul #628ab5 do site modelo. Agora são apelidos
     do turquesa da marca — alias em vez de hex repetido, para não existir
     três fontes de verdade para a mesma cor. 300 é usado em borda de
     acordeão; 600, em ícone. */
  --teal-300:var(--teal-500);--teal-600:var(--teal-500);

  /* --teal-acao — o turquesa QUANDO É TEXTO.
     O #009BA2 é cor de preenchimento: rende 3,38:1 no branco e 2,91:1 no
     papel quente, o que reprova AA. Como elemento gráfico (ícone, borda,
     fio) ele passa, porque a exigência ali é 3:1 — por isso os ícones
     seguem no turquesa vivo. Para texto entra este #00666b: 6,75:1 no
     branco e 5,81:1 no papel. É a mesma separação que o painel
     administrativo já faz entre --teal e --teal-acao.
     Em bloco ESCURO o raciocínio inverte: sobre o petróleo #1e3d4f o
     #00666b cai para 1,70:1. Lá o token é redefinido para --teal-400
     (#2bbcc3, 4,95:1) — ver .tone-deep e o bloco de CTA. */
  --teal-acao:#00666b;

  /* --- 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. Saiu do #626a76 azulado em 21/09/2026,
     a pedido do Marco, para um cinza neutro.
     O primeiro valor testado, #6b6b6b, reprovava sobre o papel quente
     (#edeeef): 4,08:1. Ficou o #6b6b6b, o neutro mais próximo que passa
     nos DOIS fundos — 5,33:1 no branco e 4,59:1 no papel.
     Não clarear daqui: acima de #6e6e6e o papel volta a reprovar. */
  --gray-400:#a2abb6;--gray-500:#8F8F8F;--gray-600:#6b6b6b;--gray-700:#4b5563;--gray-800:#313842;
  --tinta:#1e3d4f;

  --success:#009ba2;--info:#009ba2;--warning:#b8801f;--danger:#c0392f;

  --color-primary:var(--azul-500);--color-primary-hover:var(--azul-600);
  --color-secondary:var(--teal-acao);--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;
  /* ESCALA RECALCULADA PARA O CELULAR em 22/09/2026, a pedido do cliente.
     O topo da escala NÃO mudou: os valores a 1440px são os mesmos que já
     estavam no ar. Só a ponta estreita desceu.

       token          390px antes → depois     1440px
       --fs-display   37,6 → 31,0              65,6 (igual)
       --fs-h1        33,6 → 28,0              54,4 (igual)
       --fs-h2        29,0 → 24,0              44,0 (igual)
       --fs-h3        18,6 → 16,8              21,6 (igual)
       --fs-lead      17,5 → 16,0              20,5 (igual)
       --fs-body      17,0 → 16,0              17,0 (igual)
       --fs-eyebrow   12,0 → 11,0              12,0 (igual)

     Não bastava baixar o MÍNIMO do clamp: em clamp(min, preferido, max) o
     mínimo só entra quando o preferido cai abaixo dele, e no h2 o preferido
     a 390px já valia 28,97px contra um mínimo de 28,8. Quem manda no celular
     é o termo do meio — e é ele que foi recalculado, fixando os dois
     extremos (o valor novo a 390 e o atual a 1440) e resolvendo a reta.

     O CORPO PARA EM 16px. É o piso de leitura confortável, e o público de
     ortopedia tem muita gente de 50 anos para cima: abaixo disso o ganho
     estético sai do bolso de quem precisa ler. */
  --fs-display:clamp(1.95rem,1.13rem + 3.29vw,4.1rem);
  --fs-h1:clamp(1.75rem,1.14rem + 2.51vw,3.4rem);
  --fs-h2:clamp(1.5rem,1.035rem + 1.9vw,2.75rem);
  --fs-h3:clamp(1.05rem,.94rem + .46vw,1.35rem);
  --fs-lead:clamp(1rem,.9rem + .43vw,1.28rem);
  --fs-body:clamp(1rem,.977rem + .095vw,1.0625rem);
  /* fixo: quem governa o .eyebrow é a regra de piso de 12px mais abaixo,
     e um clamp aqui seria um token morto. */
  --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 */
/* smooth só DEPOIS do load (classe .pronto, reveal.js): com ele ativo desde
   o início, abrir um link com âncora (/pagina#duvidas) virava rolagem
   animada no carregamento, e o Chrome não registrava LCP nessa visita. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px;}
html.pronto{scroll-behavior:smooth;}
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 */
/* --teal-700 desde 23/09/2026: o #009BA2 dava 2,91:1 no papel e 3,13:1 no
   hero — abaixo dos 3:1 de indicador de foco (WCAG 1.4.11). #00666b: 5,81:1
   no papel, 6,75:1 no branco. Superfícies escuras (rodapé, faixa) têm regra
   própria com o turquesa claro. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--teal-700);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.
   ========================================================================== */
/* sem will-change no estado oculto (23/09/2026): opacity/transform ja sao
   compostos, e com a rede de seguranca restrita os blocos longe da tela
   ficariam segurando camada indefinidamente */
html.js-rv [data-rv]{opacity:0;
  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;}
/* O topo da página NÃO entra animado (05/10/2026). Retrato e título são o LCP:
   escondidos até o reveal, o Lighthouse media ~1 s de "element render delay"
   no desktop (a foto chegava em 50 ms e só aparecia depois da animação).
   Agora aparecem na primeira pintura; o resto da página segue animando ao
   rolar. reveal.js também deixa de marcar os filhos de .rv-hero. */
html.js-rv .hero [data-rv],html.js-rv .phero [data-rv],html.js-rv .lp-hero [data-rv]{opacity:1;transform:none;transition:none;}
/* impressão / "Salvar como PDF": o IntersectionObserver não roda, então nada
   que dependa dele pode sair oculto no papel */
@media print{
  html.js-rv [data-rv],html.js-rv .rule[data-rv]{opacity:1!important;transform:none!important;transition:none!important;}
}

/* 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);}
/* Dentro de bloco escuro o turquesa de ação inverte: escurecer aqui
   derrubaria para 1,70:1. Redefinir o token faz qualquer sobretítulo
   aninhado herdar a variante clara sem regra extra. */
.tone-deep{--teal-acao:var(--teal-400);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;}
/* O olho em UMA linha no celular. A quebra não era o tamanho da fonte: há uma
   regra de PISO mais abaixo nesta folha — ".eyebrow,.cat,.crumbs,… {font-size:
   12px}" — que vence o token e existe de propósito, para rótulo pequeno não
   encolher. Medido com a fonte real, a 390px (347px úteis):
     12px + .16em  → 365 + 27 de fio e vão = 392   quebra
     12px + .10em  → 339 + 27 = 366                quebra
     12px + .055em → 316 + 22 = 338                cabe, 9px de folga
   Então o que cede é o espaçamento e o fio, não o corpo da letra. */
@media (max-width:560px){
  .eyebrow{letter-spacing:.055em;gap:8px;}
  .eyebrow::before{width:14px;}
}
.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.
   Usa --teal-acao, nao o turquesa vivo: em 38px ele conta como texto grande,
   que exige 3:1, e o #009BA2 sobre o papel quente entrega so 2,91:1 — e a
   opacidade de 90% aplicada em .step .numeral ainda reduz um pouco mais.
   Com #00666b sao 5,81:1, margem que aguenta a opacidade sem reprovar. */
.numeral{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  color:var(--teal-acao);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);}
/* BOTÃO VERDE DA MARCA. O fundo é --teal-700 (#00666b), não o turquesa vivo:
   branco sobre #009BA2 rende 3,4:1, e o rótulo tem 16,48px em negrito — não
   chega aos 18,66px que a WCAG classifica como texto grande, então a
   exigência é 4,5:1 e ele reprova. Texto escuro também não salva: #1e3d4f
   sobre #009BA2 dá 3,36:1. O verde vivo simplesmente não carrega rótulo de
   botão neste tamanho; ele continua sendo a cor de ícone, borda e fio, onde a
   exigência é 3:1. Com #00666b o rótulo fica em 6,2:1.
   É o mesmo verde que o site já usa quando o turquesa precisa carregar TEXTO
   (--teal-acao). O hover escurece mais um degrau, em vez de clarear. */
.btn-secondary{background:var(--teal-700);color:#fff;box-shadow:var(--shadow-teal);}
.btn-secondary:hover{background:var(--teal-800);box-shadow:0 16px 34px -12px rgba(0,102,107,.62);}
.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 ESCURA.
   O branco rendia 1,98:1 em repouso e 2,45:1 no hover — reprovava o WCAG AA
   com folga. Invertido para o petróleo da marca: 5,77:1 e 4,67:1, ambos
   aprovados, e sem tocar no verde, que é o sinal de reconhecimento do canal.
   (O botão do biolink NÃO segue este: desde 23/09/2026 ele usa o verde
   padrão dos botões de agendar, #00666b com texto branco.)
   Se um dia quiser mais margem ainda, #0b141a sobre o mesmo verde dá 9,4:1 —
   mas aí o texto deixa de ser da paleta. */
.btn-whatsapp{background:#25D366;color:#1e3d4f;box-shadow:0 10px 24px -12px rgba(37,211,102,.75);}
.btn-whatsapp:hover{background:#1fbe5b;color:#1e3d4f;}
.btn-whatsapp .ico,.btn-whatsapp svg{color:#1e3d4f;}
/* 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);}
/* hover em --teal-700 (6,7:1); o --teal-600 = #009BA2 dava 3,4:1 e reprovava */
.go:hover{color:var(--teal-700);}
.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.8 CARTÃO DE UNIDADE — informação à esquerda, mapa à direita.
   Morava no <style> de locais-de-atendimento.php até 22/09/2026, quando a
   página de agendamento passou a usar o mesmo cartão. Cartão definido dentro
   de uma página não existe para a outra — mesma consolidação já feita no
   cartão de artigo (§10.6) e no de área (§10.7).
   O nome da unidade é <h2> em /locais (onde é o título do bloco) e <h3> na
   página de agendamento (onde a seção já tem o seu <h2>): o seletor cobre os
   dois, para a ordem dos títulos ficar certa nas duas páginas.
   ========================================================================== */
.un{overflow:hidden;padding:0;}
.un + .un{margin-top:clamp(1.5rem,2.5vw,2rem);}
.un .grid{display:grid;grid-template-columns:1.1fr .9fr;}
.un .info{padding:clamp(1.6rem,3.2vw,2.35rem);}
.un .badge-un{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--color-secondary);margin-bottom:12px;}
.un h2,.un h3{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem);
  letter-spacing:-.022em;color:var(--text-strong);line-height:1.22;margin-bottom:var(--space-3);}
.un .end{margin:0;font-size:1rem;line-height:1.62;color:var(--text-body);}
.un dl{margin:var(--space-5) 0 0;padding:var(--space-5) 0 0;border-top:1px solid var(--linha);}
.un dt{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:12px;}
.un dd{margin:0;}
.un .hor{display:grid;}
.un .hor .l{display:flex;justify-content:space-between;gap:16px;font-size:.94rem;padding:10px 0;
  color:var(--text-body);}
.un .hor .l + .l{border-top:1px solid var(--linha);}
.un .hor .l b{color:var(--text-strong);font-weight:700;}
/* Frase que entra no lugar da tabela enquanto os dias reais não chegam. */
.un .hor-aviso{margin:0;font-size:.94rem;line-height:1.6;color:var(--text-body);}
.un .tels{display:flex;flex-wrap:wrap;gap:10px;}
.un .tels a{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;
  color:var(--color-primary);text-decoration:none;background:var(--surface-page);
  border:1px solid var(--linha);border-radius:var(--radius-md);padding:11px 17px;
  transition:border-color var(--dur),background var(--dur),transform var(--dur) var(--ease);}
.un .tels a:hover{border-color:var(--teal-300);background:var(--teal-50);transform:translateY(-2px);}
.un .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-6);}
.un .mapa{position:relative;min-height:300px;background:var(--surface-page);
  border-left:1px solid var(--linha);display:flex;flex-direction:column;}
.un .mapa iframe{width:100%;height:100%;min-height:300px;border:0;display:block;flex:1;
  filter:saturate(.92);}
/* Fachada do mapa em /agendamento (05/10/2026): o Google Maps só carrega no
   toque (reveal.js). Mesma linguagem do rodapé — quadrícula de ruas girada e
   um halo turquesa —, em versão clara. O rodapé tem as próprias regras
   (.bbf .mapa…), escuras, no partials/footer.php; o rodapé TAMBÉM usa
   .un, por isso tudo aqui é preso à classe própria .mapa-cartao. */
.un .mapa-cartao{overflow:hidden;}
.un .mapa-cartao::before{content:"";position:absolute;inset:-30%;pointer-events:none;transform:rotate(-22deg);
  background-image:repeating-linear-gradient(90deg,rgba(30,61,79,.075) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(0deg,rgba(30,61,79,.075) 0 1px,transparent 1px 46px);}
.un .mapa-cartao::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 46%,rgba(0,155,162,.16),transparent 72%);}
.un .mapa-cartao.aberto::before,.un .mapa-cartao.aberto::after{display:none;}
.mapa-cartao .mapa-face{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;width:100%;padding:32px 22px;background:transparent;border:0;
  font:inherit;color:var(--text-strong);text-align:center;cursor:pointer;
  transition:background var(--dur) var(--ease);}
.mapa-cartao .mapa-face:hover{background:rgba(0,155,162,.05);}
.mapa-cartao .mapa-face .pin{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;
  border-radius:50%;background:var(--teal-acao);color:#fff;box-shadow:0 0 0 9px rgba(0,155,162,.16);
  transition:transform .28s var(--ease-out-quart);}
.mapa-cartao .mapa-face:hover .pin{transform:translateY(-3px) scale(1.04);}
.mapa-cartao .mapa-face .pin svg{width:24px;height:24px;display:block;}
.mapa-cartao .mapa-face .tx b{display:block;font-size:1rem;font-weight:800;color:var(--text-strong);}
.mapa-cartao .mapa-face .tx small{display:block;margin-top:4px;font-size:.88rem;line-height:1.45;color:var(--text-muted);}
.mapa-cartao.aberto:focus-within{box-shadow:inset 0 0 0 2px var(--teal-acao);}
@media (max-width:900px){
  .un .grid{grid-template-columns:1fr;}
  .un .mapa{border-left:0;border-top:1px solid var(--linha);min-height:250px;}
}
@media (max-width:520px){.un .acoes .btn{width:100%;}.un .tels a{width:100%;justify-content:center;}}

/* ==========================================================================
   10.7 CARTÃO DE ÁREA — foto no topo, texto embaixo.
   Morava no <style> do index.php até 22/09/2026, quando a página do Dr. Jorge
   passou a usar o mesmo bloco: cartão definido dentro de uma página não existe
   para a outra. Mesma consolidação feita no cartão de artigo (§10.6).
   ========================================================================== */
.areas-grid{margin-top:var(--space-8);}
.area-card{display:flex;flex-direction:column;}
.area-card .itile{width:54px;height:54px;font-size:26px;margin-bottom:var(--space-4);}
/* Capa sangrando até a borda do cartão: a margem negativa anula o padding do
   .card, e o overflow:hidden que ele já tem recorta a imagem no canto
   arredondado.
   Desde 22/09/2026 os arquivos são 400×300 (4/3) e o slot é 16/9: o
   object-fit:cover mantém 100% da LARGURA e corta 25% da altura, 12,5% em
   cima e 12,5% embaixo. Conferido nas quatro — o assunto está centrado e nada
   essencial sai. */
.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:800;font-size:1.28rem;letter-spacing:-.02em;text-wrap:balance;
  color:var(--text-strong);line-height:1.24;margin-bottom:9px;}
.area-card p{color:var(--text-muted);line-height:1.58;font-size:1rem;flex-grow:1;
  margin-bottom:var(--space-5);}

/* ==========================================================================
   10.6 CARTÃO DE ARTIGO — capa à esquerda, conteúdo à direita.

   O mesmo componente do blog (blog-includes/card.php), trazido para o site em
   22/09/2026 a pedido do cliente: a home e as quatro páginas de área ainda
   mostravam artigos no cartão vertical antigo.

   Antes disto havia TRÊS cópias do mesmo cartão — uma no <style> do
   index.php, uma no lp.css e a do blog. As duas primeiras saíram; esta é a
   única do site.

   A CAPA MANDA NA ALTURA. Sem aspect-ratio declarado, a altura da caixa vem
   do texto, que muda conforme o título tem 2 ou 3 linhas — e aí a proporção
   do recorte varia de cartão para cartão NA MESMA TELA. Com a proporção
   declarada, o corte vira um número escolhido: 9/10 sobre uma capa 16:9
   mantém 51% da largura, igual em todos.
   ========================================================================== */
.posts-grid{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(2,1fr);
  margin-top:var(--space-8);}
.posts-grid>*{min-width:0;}
/* .card.post-card e não .post-card: o .card define padding:var(--space-6) com
   a mesma especificidade, e um empate se resolveria pela ordem no arquivo —
   frágil demais para uma regra que zera o padding. */
.card.post-card{padding:0;}
.post-card{display:grid;grid-template-columns:40% 1fr;align-items:stretch;}
/* A PROPORÇÃO DA CAPA MORA NO ::before, NÃO EM aspect-ratio.

   Item de grade com aspect-ratio é esticado nos dois eixos: quando a linha
   cresce por causa do texto, o navegador aplica a proporção e AUMENTA A
   LARGURA junto, passando da coluna. Medido no ar em 22/09/2026, já com
   min-width:0: coluna de 155,33px e capa de 156,84px, invadindo o padding do
   texto — 11px de folga à esquerda contra 13 à direita. No desktop era pior:
   coluna 214, capa 231, folga de 5 contra 23. Foi o desalinhamento que o
   cliente apontou.

   Porcentagem de padding resolve contra a LARGURA do bloco que a contém.
   Então a altura continua saindo da largura, igual ao aspect-ratio, mas a
   caixa perde a regra de dimensionamento que a alargava: a capa passa a ter
   a largura da coluna, ponto.

   A imagem vira absoluta para que, no caso extremo em que o texto ainda seja
   mais alto que a proporção, ela preencha a caixa inteira em vez de deixar
   sobra embaixo. */
.post-card .capa{margin:0;background:var(--surface-page);overflow:hidden;
  position:relative;min-width:0;}
.post-card .capa::before{content:"";display:block;padding-top:111.111%;}  /* 9/10 */
.post-card .capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* min-width:0 é obrigatório: sem ele a coluna de texto não encolhe abaixo do
   conteúdo e uma palavra longa ("viscossuplementação") empurra o cartão para
   fora da grade. */
.post-card .body{padding:16px 24px;min-width:0;
  display:flex;flex-direction:column;justify-content:center;}
/* Artigo sem capa: o texto ocupa as duas colunas em vez de deixar 40% em branco. */
.post-card .body:only-child{grid-column:1/-1;}
/* letter-spacing curto e uma linha só: a categoria mais longa do acervo tem 40
   caracteres, e em duas linhas ela empurrava o texto além da altura da capa —
   era isso que fazia cartões vizinhos terem recortes diferentes. */
.post-card .cat{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--color-secondary);margin:0 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--linha);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.post-card h3{font-family:var(--font-display);font-weight:800;font-size:1.14rem;letter-spacing:-.02em;
  line-height:1.28;color:var(--text-strong);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;hyphens:auto;}
/* 2 linhas, não 3. O orçamento de altura é o da capa: 214,27 × 10/9 = 238px.
   Com 3 linhas o texto pedia 257 e passava a mandar na linha da grade — e aí
   a proporção declarada da capa era ignorada calada, com o recorte mudando
   conforme os títulos tivessem 1, 2 ou 3 linhas. Com 2, o pior caso fica em
   231 e a CAPA volta a mandar, que é o que mantém o recorte igual em todos.
   (O blog segue com 3 porque o cartão dele é 14px mais largo e cabe.) */
.post-card p{font-size:.88rem;line-height:1.58;color:var(--text-muted);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post-card .go{margin-top:0;font-size:.86rem;}
/* Uma coluna já em 1100px: em duas, abaixo disso, a coluna de texto cai para
   menos de 240px e o título volta a ser cortado. Aqui a capa passa a ter
   largura FIXA — a altura do cartão é praticamente a mesma em toda a faixa, e
   é a LARGURA que precisa ser estável para o recorte não oscilar. */
@media (max-width:1099px){
  .posts-grid{grid-template-columns:1fr;}
  .post-card{grid-template-columns:300px 1fr;}
  .post-card .capa::before{padding-top:80%;}        /* 5/4 */
  .post-card .body{padding:20px 26px;}
}
/* Celular — 90% dos acessos. O resumo sai: numa coluna de ~160px ele daria um
   toco, e a altura extra ainda pioraria o recorte da capa. Ficam capa,
   categoria, título inteiro e o convite explícito — o público de ortopedia é
   leigo e precisa ser instruído, não só receber um cartão clicável. */
@media (max-width:640px){
  .post-card{grid-template-columns:min(45%,168px) 1fr;}
  .post-card .capa::before{padding-top:116.667%;}   /* 6/7 */
  .post-card .body{padding:12px 13px;}
  .post-card p{display:none;}
  .post-card .cat{white-space:normal;overflow:visible;font-size:.75rem;letter-spacing:.03em;
    line-height:1.16;margin-bottom:6px;padding-bottom:6px;}
  .post-card h3{font-size:.94rem;line-height:1.3;-webkit-line-clamp:5;margin:0 0 8px;}
  .post-card .go{font-size:.78rem;}
}
@media (max-width:360px){
  .post-card{grid-template-columns:min(42%,140px) 1fr;}
  .post-card .capa::before{padding-top:133.333%;}   /* 3/4 */
  .post-card h3{font-size:.87rem;-webkit-line-clamp:5;}
  .post-card .cat{font-size:.75rem;letter-spacing:.02em;}
}

/* ==========================================================================
   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;
  /* SEM scroll-behavior:smooth (23/09/2026): com snap obrigatorio e o
     padding de 4px, o track rolava SOZINHO de 0 a 4px no carregamento — de
     forma suave — e o Chrome encerrava a medicao de LCP antes do primeiro
     candidato: a home ficava sem LCP no CrUX/Search Console. As setas e
     bolinhas continuam suaves: o slider.js pede behavior:'smooth' no
     scrollTo; o swipe/snap nativo tambem continua animado. */
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:8px 4px 30px;margin:-8px -4px -30px;}
.slider-track::-webkit-scrollbar{display:none;}
/* o track tem 4px de respiro lateral (sombra dos cartões); sem este
   scroll-padding o snap assentava os cartões 4px fora da coluna de texto */
.slider-track{scroll-padding-inline:4px;}
.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):not([aria-disabled="true"]){border-color:var(--teal-500);background:var(--teal-50);color:var(--teal-700);}
.slider-btn:disabled{opacity:.32;cursor:default;}
/* no limite o foco FICA na seta (aria-disabled): esmaece so o desenho e a
   borda — opacity no botao inteiro levava o anel de foco a 1,6:1 */
.slider-btn[aria-disabled="true"]{cursor:default;border-color:var(--linha);}
.slider-btn[aria-disabled="true"] svg{opacity:.32;}
/* 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. */
  /* --gray-600 (4,6:1 no papel) e --teal-700 no ativo (5,8:1): o ponto é o
     único sinal visual do botão e precisa de 3:1 (WCAG 1.4.11). Antes: gray-300
     e #009BA2, ambos abaixo. */
  background-color:var(--gray-600);cursor:pointer;
  transition:background var(--dur),width var(--dur) var(--ease-out-quart);}
.slider-dot:hover{background-color:var(--gray-700);}
.slider-dot.active{background-color:var(--teal-700);width:24px;}
/* TRILHO (23/09/2026): quando as bolinhas não cabem numa linha entre as setas
   — 8 páginas no celular quebravam em 6 + 2 —, o slider.js põe .slider--rail
   e elas dão lugar a um trilho fino cujo cursor acompanha o dedo em tempo
   real. Decorativo (aria-hidden): setas e swipe seguem sendo a navegação. */
.slider-rail{display:none;position:relative;flex:0 1 200px;min-width:72px;height:4px;
  border-radius:var(--radius-pill);background:rgba(30,61,79,.12);overflow:hidden;}
.slider-rail span{position:absolute;left:0;top:0;height:100%;width:24px;
  border-radius:inherit;background:var(--teal-700);will-change:transform;}
.slider--rail .slider-dots{display:none;}
.slider--rail .slider-rail{display:block;}
@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;}
/* 16px (23/09/2026): texto de leitura, piso do publico mais velho */
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;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}
/* As nove regras de object-position por arquivo sairam em 21/09/2026.
   Elas tinham sido afinadas NAS FOTOS DO SITE MODELO — uma delas chegava a
   justificar 70% porque "em 58% o corte comia a placa com o nome na base do
   modelo anatomico", que e mobiliario de outro consultorio. Como os arquivos
   daqui sao placeholders, as regras nao faziam efeito visivel nenhum e
   sobreviveriam exatamente a troca das fotos reais, entregando enquadramento
   calibrado para o rosto de outra pessoa.
   Fica so o 50% 20% generico da regra acima. Quando as fotos reais chegarem,
   conferir foto a foto e so entao reintroduzir excecao, se precisar. */

/* 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. */
/* o separador e texto: #8F8F8F dava 3,23:1. --text-muted da 5,33:1. */
.crumbs .sep{margin:0 8px;color:var(--text-muted)}
.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;}
/* --- selo de avaliações do Google no hero (11/11/2026) ---
   Carinhas com as iniciais de avaliações reais, nota e estrelas na cor que o
   Google usa (o visitante reconhece de longe) e a contagem logo abaixo. Sem
   caixa em volta: o hero já tem as pílulas de credencial, e uma terceira
   moldura disputaria com o botão. */
.gselo{display:flex;width:fit-content;max-width:100%;align-items:center;gap:13px;color:inherit;
  text-decoration:none;border-radius:14px;-webkit-tap-highlight-color:transparent}
.gselo-rostos{display:flex;flex:none;padding-left:2px}
.gselo-rostos i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--c);color:#fff;font:700 .84rem/1 var(--font-sans);font-style:normal;
  box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px rgba(30,61,79,.10),0 2px 6px rgba(30,61,79,.16)}
/* sobreposição de 5px (11/11/2026: com 7px as fotos ficavam grudadas); o fio de
   3,5px em volta do anel branco segura a foto de fundo branco sobre o papel */
.gselo-rostos i + i{margin-left:-5px}
/* avatar ilustrado no lugar da letra (11/11/2026); o --c fica atrás enquanto carrega */
.gselo-rostos i img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.gselo-txt{display:grid;gap:4px;line-height:1.1;min-width:0}
.gselo-nota{display:flex;align-items:center;gap:8px}
.gselo-nota b{font:800 1.08rem/1 var(--font-display);letter-spacing:-.01em;color:var(--text-strong)}
.gselo-nota svg{display:block;width:85px;height:17px;fill:#F5B301}
.gselo-qtd{font-size:.84rem;font-weight:600;color:var(--text-muted)}
a.gselo:hover .gselo-qtd,a.gselo:focus-visible .gselo-qtd{color:var(--teal-700);
  text-decoration:underline;text-underline-offset:3px}
a.gselo:focus-visible{outline:2px solid var(--teal-700);outline-offset:5px}
/* páginas internas e de avaliação: o selo vem logo depois do texto de apoio */
.phero .gselo,.lp-hero .gselo{margin-top:var(--space-5)}
.phero .rg + .gselo{margin-top:var(--space-4)}
.center-hero .gselo{margin-inline:auto}
/* celular estreito (360px): 3 carinhas e um pouco menores, para "mais de 70
   avaliações no Google" caber numa linha só */
@media (max-width:380px){
  .gselo{gap:11px}
  .gselo-rostos i{width:31px;height:31px;font-size:.8rem}
  .gselo-rostos i:nth-child(4){display:none}
}
.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}
}