/* =====================================================================
   Blog OdontoSin v2 (02/10/2026)
   v1 + revisão: menos enfeite. Assinatura única = 4 pontos sob o H1.
   Cara: Manual da Marca (verde água #16D2D4 chapado + azul #050519).
   Movimento: só o que explica. Um CSS para todos os artigos.
   Atende os dois dialetos de HTML do blog
   (artigos novos: .hero/.artigo/.btn-wa; antigos: .blog-hero/.article-content/.btn-whatsapp).
   Regra: todo texto sobre verde água é azul #050519.
   ===================================================================== */

/* ---------- fontes (auto-hospedadas; reserva calibrada para não pular) ---------- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:optional;src:url(fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:optional;src:url(fonts/barlow-700.woff2) format('woff2')}
/* títulos: swap (pré-carregada; a reserva calibrada abaixo segura o CLS) */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Reserva';font-weight:400;src:local('Arial'),local('ArialMT');size-adjust:95.3%;ascent-override:104.9%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:'Barlow Reserva';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:91.8%;ascent-override:108.9%;descent-override:21.8%;line-gap-override:0%}
@font-face{font-family:'Barlow Cond Reserva';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:75.6%;ascent-override:132.3%;descent-override:26.5%;line-gap-override:0%}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --agua:#16D2D4;--agua-tinta:#E7FAFB;--agua-linha:#c9eef0;--agua-escura:#0B6E70;--agua-media:#13A0A5;
  --azul:#050519;--azul-2:#0D0D3B;--azul-3:#1F1F83;--lilas:#eeeef7;
  --wa:#25D366;--wa-escuro:#1fbf5b;
  --txt:#1b1b2e;--txt-2:#4a4f5c;--branco:#fff;
  --font-display:'Barlow Condensed','Barlow Cond Reserva','Arial Narrow',sans-serif;
  --font-corpo:'Barlow','Barlow Reserva',Arial,sans-serif;
  --raio:18px;--raio-btn:999px;
  --container:780px;
  --barra-h:76px; /* altura da barra fixa do celular (sem a área segura) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-press:160ms;--t-ui:220ms;--t-explica:700ms;
  --navy:var(--azul);--navy-claro:var(--azul-3);--navy-darker:#020206;
  --turquesa:var(--agua);--turquesa-medio:var(--agua-media);--turquesa-escuro:var(--agua-escura);
  --whatsapp-green:var(--wa);--whatsapp-green-dark:var(--wa-escuro);
  --cinza-fundo:var(--agua-tinta);--cinza-card:var(--agua-linha);--text-secondary:var(--txt-2);
  --radius-card:var(--raio);--radius-btn:var(--raio-btn);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-corpo);font-size:18px;line-height:1.7;color:var(--txt);background:var(--branco);overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.container-wide{max-width:1140px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;color:var(--azul);text-wrap:balance}
h1{font-size:3.1rem;letter-spacing:.003em}
h2{font-size:2.3rem}
h3{font-size:1.45rem;line-height:1.2}
h4{font-family:var(--font-display);font-weight:700}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--azul-3);outline-offset:3px;border-radius:6px}
/* foco visível sobre fundo azul */
.final :focus-visible,.final-cta :focus-visible,.blog-cta :focus-visible,.resposta :focus-visible,.site-footer :focus-visible,thead :focus-visible{outline-color:var(--agua)}

/* ---------- fio de leitura ---------- */
/* com scroll-timeline: CSS puro no body::before; sem: o JS cria .ler-fio e move por transform */
body::before,.ler-fio{content:'';position:fixed;top:0;left:0;right:0;height:4px;background:var(--azul);transform-origin:0 50%;transform:scaleX(0);z-index:1001;pointer-events:none;will-change:transform}
body::before{display:none}
@supports (animation-timeline:scroll()){
  body::before{display:block;animation:ler linear both;animation-timeline:scroll(root)}
  @keyframes ler{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-corpo);font-weight:700;font-size:1.02rem;line-height:1.25;padding:14px 26px;min-height:48px;border-radius:var(--raio-btn);cursor:pointer;border:0;text-align:center;text-wrap:balance;touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-press) var(--ease-out),background-color 200ms ease}
.btn svg{width:22px;height:22px;flex-shrink:0}
.btn-wa,.btn-whatsapp{background:var(--wa);color:var(--azul)!important;box-shadow:0 5px 0 var(--azul)}
.btn-wa svg,.btn-whatsapp svg{fill:currentColor;color:var(--azul)}
.btn-wa:active,.btn-whatsapp:active{transform:translateY(4px);box-shadow:0 1px 0 var(--azul)}
.btn-phone{background:transparent;color:var(--azul);box-shadow:inset 0 0 0 2px currentColor}
.btn-phone:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn-wa:hover,.btn-whatsapp:hover{background:var(--wa-escuro);transform:translateY(-2px);box-shadow:0 7px 0 var(--azul)}
  .btn-wa:active,.btn-whatsapp:active{transform:translateY(4px);box-shadow:0 1px 0 var(--azul)}
  .btn-phone:hover{background:rgba(255,255,255,.12)}
}
.btn-grande{font-size:1.1rem;padding:18px 30px;min-height:58px}

/* ---------- topo: chapado verde água com logo oficial em azul ---------- */
.site-header{background:var(--agua);padding:14px 0 6px;position:relative;z-index:100}
.site-header .container-wide{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:var(--container)}
.logo,.site-header__logo{display:block;flex-shrink:0;width:150px;height:44px;background:var(--azul);
  -webkit-mask:url(/img/logo-odontosin.webp) left center/contain no-repeat;mask:url(/img/logo-odontosin.webp) left center/contain no-repeat;
  margin-left:-9px} /* a imagem tem 20px de margem transparente: o desenho alinha com o título */
.logo-main,.logo-sub,.site-header__logo-main,.site-header__logo-sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header__actions{display:flex;align-items:center;gap:18px}
.site-header__phone{display:flex;align-items:center;gap:6px;min-height:44px;color:var(--azul);font-weight:600;font-size:.95rem}
.site-header__phone svg{flex-shrink:0}
.site-header .btn{font-size:.92rem;padding:10px 18px;min-height:44px;box-shadow:0 3px 0 var(--azul)}
.site-header .btn svg{width:18px;height:18px}
.site-header .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--azul)}
/* índice: a grade de cartões é larga; topo e capa acompanham a mesma coluna */
body:has(.blog-grid) .site-header .container-wide,body:has(.blog-grid) .blog-hero .container,body:has(.blog-grid) .blog-cta .container{max-width:1140px}

/* ---------- capa ---------- */
.hero,.blog-hero{background:var(--agua);color:var(--azul);padding:26px 0 78px;position:relative;overflow:hidden;border-radius:0 0 50% 50%/0 0 64px 64px}
.hero .container,.blog-hero .container{position:relative;z-index:1}
/* sorriso decorativo: só em tela larga, pequeno e discreto, fora da coluna do texto */
.sorriso-hero{display:none}
@media (min-width:1100px){
  .sorriso-hero{display:block;position:absolute;right:max(24px,calc(50% - 600px));top:64px;width:200px;opacity:.35;pointer-events:none;z-index:0}
  .sorriso-hero .arco{fill:none;stroke:#fff;stroke-width:26;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
  .sorriso-hero .pingo{display:none}
}
.breadcrumb,.blog-hero__breadcrumb{font-size:.9rem;color:var(--azul);margin-bottom:8px;font-weight:500;line-height:1.3}
.breadcrumb a,.blog-hero__breadcrumb a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(5,5,25,.35)}
.breadcrumb span,.blog-hero__breadcrumb span{font-weight:600}
.hero h1,.blog-hero h1{color:var(--azul);max-width:700px}
.blog-hero h1{text-wrap:pretty} /* títulos antigos com travessão: balance jogava o "—" para o começo da linha */
/* 4 pontos sob o título principal: a única assinatura */
.hero h1::after,.blog-hero h1::after{content:'';display:block;width:50px;height:8px;margin:14px 0 18px;background:radial-gradient(circle,currentColor 3.5px,transparent 4px) 0 0/13px 8px repeat-x}
.hero-sub,.blog-hero__subtitle{color:var(--azul);font-size:1.15rem;max-width:620px;margin-bottom:14px;line-height:1.55;text-wrap:pretty}
.hero-meta,.blog-hero__meta{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:.9rem;color:var(--azul);margin-bottom:26px;line-height:1.4}
.hero-meta span,.blog-hero__meta span{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.blog-hero__meta svg{width:15px;height:15px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.hero-cta small{color:var(--azul);font-size:.92rem}
.blog-hero__hero-img{margin-top:6px;border-radius:var(--raio);overflow:hidden;box-shadow:0 0 0 4px #fff;max-width:700px;aspect-ratio:700/381;background:var(--agua-tinta)}
.blog-hero__hero-img img{width:100%;height:100%;object-fit:cover}

/* ---------- corpo do artigo ---------- */
.artigo,.article-content{padding:44px 0 24px;counter-reset:sec}
.artigo p,.article-content p{color:var(--txt);margin-bottom:18px;max-width:70ch}
.artigo h2,.article-content h2{position:relative;margin:64px 0 18px;scroll-margin-top:16px;color:var(--azul)}
.artigo h2[id],.article-content h2[id]{counter-increment:sec}
/* número da seção: rótulo pequeno em cima do título (bate com o sumário) */
.artigo h2[id]::before,.article-content h2[id]::before{content:counter(sec,decimal-leading-zero);display:block;font-size:1rem;letter-spacing:.08em;color:var(--agua-escura);line-height:1;margin-bottom:10px}
.artigo h3,.article-content h3{margin:30px 0 10px}
.artigo ul,.artigo ol,.article-content ul,.article-content ol{margin:0 0 20px 22px;color:var(--txt);font-size:1em}
.artigo li,.article-content li{margin-bottom:8px}
.artigo li::marker,.article-content li::marker{color:var(--agua-escura);font-weight:700}
.artigo a.link,.article-content a.text-link,.article-content p a:not(.btn){color:var(--agua-escura);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:rgba(22,210,212,.7);font-weight:600}
.artigo strong,.article-content strong{color:var(--azul)}
.article-content img{border-radius:var(--raio)}
.foto{border-radius:var(--raio);margin:24px 0 6px;width:100%}
.legenda{font-size:.88rem;color:var(--txt-2)!important;text-align:center;margin:10px auto 0;max-width:60ch}

/* resposta curta: cartão azul */
.resposta{position:relative;background:var(--azul);color:#fff;border-radius:var(--raio);padding:26px 26px 22px;margin:0 0 30px}
.resposta-tit{font-family:var(--font-display);font-weight:700;font-size:1.55rem;margin-bottom:10px;color:#fff!important}
.resposta ul{margin:0 0 0 20px}
.resposta li{margin-bottom:8px;color:rgba(255,255,255,.92)}
.resposta li::marker{color:var(--agua)}
.resposta strong{color:var(--agua)!important}

/* selos */
.pills,.trust-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.pill,.trust-pills__item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--agua);border-radius:50px;padding:6px 14px;font-size:.9rem;font-weight:600;color:var(--azul);line-height:1.3}
.pill::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--agua-media)}
.trust-pills__item svg{width:18px;height:18px;flex-shrink:0}

/* sumário */
.toc{background:var(--agua-tinta);border-radius:var(--raio);padding:24px 24px 18px;margin:0 0 12px}
.toc-tit,.toc__title{font-family:var(--font-display);font-weight:700;font-size:1.6rem;margin-bottom:12px;color:var(--azul)!important;line-height:1.15;text-wrap:balance}
.toc ol{margin:0!important;list-style:none;counter-reset:t;display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}
.toc li{counter-increment:t;margin:0!important}
.toc a{display:flex;align-items:baseline;gap:10px;padding:7px 0;color:var(--azul);font-weight:500;line-height:1.3;border-bottom:1px solid rgba(11,110,112,.18);min-height:44px}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--agua-escura);min-width:30px;line-height:1}
@media (hover:hover) and (pointer:fine){.toc a:hover{color:var(--agua-escura)}}

/* diagramas */
.diagrama{margin:24px 0 8px;background:var(--agua-tinta);border-radius:var(--raio);padding:20px 12px 14px}
.diagrama>svg{margin:0 auto;max-width:520px;width:100%;overflow:visible}
.dg-implante text{font-family:var(--font-corpo)}
.dg-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dg-item{text-align:center;min-width:0}
.dg-item svg{width:100%;height:auto;overflow:visible}
.dg-nome{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin:6px 0 0!important;color:var(--azul)!important;line-height:1.2}
.dg-sub{font-size:.84rem;color:var(--txt-2)!important;margin:2px 0 0!important;line-height:1.3}
.dga-imp,.dga-enc,.dga-pro{transform-box:fill-box;transform-origin:50% 50%}

/* tabelas */
.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:22px 0;border-radius:var(--raio);border:2px solid var(--azul);background:#fff}
.tabela-rolagem:focus-visible{outline-offset:2px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:1em}
thead th{background:var(--azul);color:#fff;text-align:left;padding:14px 16px;font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:.01em;vertical-align:bottom}
tbody td{padding:14px 16px;border-bottom:1px solid var(--agua-linha);color:var(--txt);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:var(--agua-tinta)}
tbody tr:nth-child(odd) td{background:#fff}
td small{color:var(--txt-2);font-size:.9em}
.price-table,.comparison-table{margin:0}
.comparativo,.comparison-table{min-width:620px}
.comparativo th:first-child,.comparativo td:first-child,.comparison-table th:first-child,.comparison-table td:first-child{position:sticky;left:0;z-index:2}
.comparativo td:first-child,.comparison-table td:first-child{font-weight:600;color:var(--azul);box-shadow:3px 0 0 var(--agua-linha)}
.comparativo th:first-child,.comparison-table th:first-child{box-shadow:3px 0 0 var(--azul)}
.preco,.price-value{font-weight:700;color:var(--agua-escura);white-space:nowrap;font-variant-numeric:tabular-nums}
.check{color:var(--agua-escura);font-weight:700}
.cross{color:var(--azul-3);font-weight:700}
.arraste{display:none}
.nota,.price-table__note{background:#fff;border:2px dashed var(--agua-media);border-radius:14px;padding:14px 18px;font-size:.95rem;color:var(--azul)!important;margin:0 0 20px}

/* régua de preço (repete os números da tabela numa escala comum; aria-hidden) */
.regua{margin:4px 0 26px;background:var(--agua-tinta);border-radius:var(--raio);padding:18px 18px 12px}
.regua-tit{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--azul);margin:0 0 10px;line-height:1.2;text-wrap:balance}
.regua-linha{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:4px 14px;margin-bottom:12px}
.regua-nome{font-size:.9rem;font-weight:600;line-height:1.25;color:var(--azul)}
.regua-nome small{display:block;font-weight:600;color:var(--agua-escura);font-size:.84rem;font-variant-numeric:tabular-nums}
.regua-trilho{position:relative;height:14px;border-radius:7px;background:#d3e9ec}
.regua-barra{position:absolute;top:0;bottom:0;left:var(--ini);width:max(8px,calc(var(--fim) - var(--ini)));border-radius:7px;background:var(--azul)}
.regua-eixo{display:flex;justify-content:space-between;margin-left:214px;font-size:.78rem;color:var(--txt-2);font-variant-numeric:tabular-nums}

/* cartões */
.cartao,.info-card,.payment-card{position:relative;border:2px solid var(--agua-linha);border-radius:var(--raio);padding:24px 26px;margin:18px 0;background:#fff}
.cartao h3,.info-card h3,.payment-card h3{margin-top:0}
.cartao>p:last-child{margin-bottom:0}
.rotulo{display:inline-block;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--agua-escura);margin-bottom:4px}
.info-cards,.payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.payment-grid{grid-template-columns:repeat(3,1fr)}
.info-cards .info-card,.payment-grid .payment-card{margin:0}
/* emojis decorativos dos artigos antigos: fora */
.info-card__icon,.payment-card__icon{display:none}
.info-card p,.payment-card p{font-size:1rem;margin-bottom:0!important}
.pros-contras{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.pros-contras>div{background:var(--agua-tinta);border-radius:14px;padding:14px 16px 6px}
.pros-contras>div:last-child{background:var(--lilas)}
.pros-contras h4{font-size:1.1rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;color:var(--agua-escura)}
.pros-contras div:last-child h4{color:var(--azul-3)}
.pros-contras ul{margin-left:18px!important;font-size:1em}
.pros-contras div:last-child li::marker{color:var(--azul-3)}

/* passo a passo (artigos antigos): número como rótulo, sem forma */
.step-list{counter-reset:passo;margin:24px 0!important;list-style:none}
.step-list li{counter-increment:passo;position:relative;padding:18px 20px 18px 64px;margin-bottom:14px!important;background:var(--agua-tinta);border-radius:var(--raio)}
.step-list li::before{content:counter(passo,decimal-leading-zero);position:absolute;left:20px;top:18px;font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1.4;color:var(--agua-escura)}
.step-list li strong{display:block;margin-bottom:4px;font-family:var(--font-display);font-size:1.25rem;line-height:1.2}

/* chamadas do meio: verde água chapado, cantos normais */
.cta-meio,.inline-cta{position:relative;background:var(--agua);border-radius:var(--raio);padding:32px 26px;margin:40px 0;text-align:center;color:var(--azul)}
.cta-meio p,.inline-cta p{color:var(--azul)!important;max-width:none;margin:0 auto 18px;font-size:1.06rem;font-weight:600;text-wrap:balance}
.cta-meio .cta-tit{font-family:var(--font-display);font-weight:700;font-size:1.95rem;line-height:1.1;margin-bottom:8px}
.inline-cta p{font-family:var(--font-display);font-size:1.5rem;line-height:1.15}

/* perguntas: respostas só ficam fechadas quando o script do FAQ marcou <html class="faq-js"> */
.faq-item{border:2px solid var(--agua-linha);border-radius:14px;margin-bottom:10px;overflow:hidden;transition:border-color var(--t-ui) ease}
.faq-item.aberto,.faq-item.open{border-color:var(--agua-media)}
.faq-q,.faq-question{width:100%;background:#fff;border:0;padding:18px 62px 18px 20px;min-height:56px;text-align:left;cursor:pointer;font-family:var(--font-corpo);font-size:1.05rem;font-weight:600;color:var(--azul);position:relative;line-height:1.4;touch-action:manipulation}
.faq-js .faq-q::before,.faq-js .faq-q::after,.faq-js .faq-question::before,.faq-js .faq-question::after{content:'';position:absolute;right:24px;top:50%;width:16px;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--azul);transition:transform var(--t-ui) var(--ease-out)}
.faq-js .faq-q::after,.faq-js .faq-question::after{transform:rotate(90deg)}
.faq-js .aberto .faq-q::after,.faq-js .open .faq-question::after{transform:rotate(0)}
@media (hover:hover) and (pointer:fine){.faq-q:hover,.faq-question:hover{background:var(--agua-tinta)}}
.faq-a,.faq-answer{display:grid;grid-template-rows:1fr}
.faq-a>*,.faq-answer>*{min-height:0;overflow:hidden;padding:0 20px 16px;margin:0!important}
.faq-js .faq-a,.faq-js .faq-answer{grid-template-rows:0fr;transition:grid-template-rows var(--t-ui) var(--ease-out)}
.faq-js .faq-a>*,.faq-js .faq-answer>*{padding-bottom:0;opacity:0;visibility:hidden;transition:opacity var(--t-ui) var(--ease-out),visibility 0s linear var(--t-ui)}
.faq-js .aberto .faq-a,.faq-js .open .faq-answer{grid-template-rows:1fr}
.faq-js .aberto .faq-a>*,.faq-js .open .faq-answer>*{opacity:1;visibility:visible;padding-bottom:16px;transition:opacity var(--t-ui) var(--ease-out),visibility 0s}
.faq-a p,.faq-answer p{font-size:1rem;color:var(--txt-2)!important}
.faq-txt h3{font-family:var(--font-corpo);font-size:1.1rem;font-weight:700;margin:22px 0 6px}

.leia,.leia-tambem{border-top:2px solid var(--agua-linha);margin-top:40px;padding-top:24px}
.leia ul,.leia-tambem ul{list-style:none;margin:0!important}
.leia li,.leia-tambem li{margin-bottom:10px;padding-left:22px;position:relative}
.leia li::before,.leia-tambem li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--agua-media)}
.revisao{font-size:.92rem;color:var(--txt-2);background:var(--agua-tinta);border-radius:14px;padding:14px 18px;margin-top:28px}
.revisao p{margin:0!important}

/* final: azul institucional, reto e limpo */
.final,.final-cta,.blog-cta{position:relative;background:var(--azul);color:#fff;text-align:center;padding:64px 0 56px;margin-top:20px}
.final .container,.final-cta .container,.blog-cta .container{position:relative}
.final h2,.final-cta h2,.blog-cta h2{color:#fff;font-size:2.4rem;max-width:720px;margin:0 auto 18px}
.final p,.final-cta p,.blog-cta p{color:rgba(255,255,255,.88);margin:0 auto 22px;max-width:560px;text-wrap:balance}
.final .end{font-size:.88rem;color:rgba(255,255,255,.7);margin:22px auto 0}
.final .tel,.final .link-claro{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--agua)}
.final .tel[data-local]{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-size:1rem}
.final .btn-wa,.final-cta .btn-whatsapp,.blog-cta .btn-whatsapp{box-shadow:0 5px 0 var(--agua)}
.final .btn-wa:active,.final-cta .btn-whatsapp:active,.blog-cta .btn-whatsapp:active{box-shadow:0 1px 0 var(--agua)}
.final-cta__stats,.blog-cta__stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin:0 auto 28px;max-width:640px}
.final-cta__stat,.blog-cta__stat{background:rgba(255,255,255,.07);border-top:4px solid var(--agua);border-radius:0 0 14px 14px;padding:12px 8px;min-width:0}
.final-cta__stat-number,.blog-cta__stat-number{display:block;font-family:var(--font-display);font-weight:700;font-size:2rem;line-height:1;color:var(--agua);white-space:nowrap}
.final-cta__stat-label,.blog-cta__stat-label{display:block;font-size:.9rem;line-height:1.3;color:rgba(255,255,255,.85);margin-top:6px;text-wrap:balance}
.final-cta__buttons,.blog-cta__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 14px}
.final-cta .btn-phone,.blog-cta .btn-phone{color:#fff}

.site-footer{background:var(--navy-darker);padding:32px 0 28px;text-align:center}
.site-footer p{color:rgba(255,255,255,.7);font-size:.86rem;margin-bottom:6px}
.site-footer a{text-decoration:underline;text-underline-offset:2px}

/* ---------- WhatsApp fixo ----------
   computador: botão redondo fixo no canto direito;
   celular: a MESMA barra nos 6 (texto curto + botão). Nos artigos antigos,
   o próprio link .whatsapp-float vira a barra (mesmo href e mesmo onclick). */
.wa-flutuante,.whatsapp-float,.barra-cel{display:none}
.wf-txt{display:block;flex:1;min-width:0;font-size:.9rem;line-height:1.3;color:var(--azul);text-align:left}
.wf-txt b{display:block;font-family:var(--font-display);font-size:1.12rem;font-weight:700}
/* computador: botão redondo fixo no canto (o topo não acompanha a rolagem) */
@media (min-width:769px){
  .wa-flutuante,.whatsapp-float{display:flex;align-items:center;justify-content:center;position:fixed;right:24px;bottom:24px;z-index:900;width:60px;height:60px;border-radius:50%;background:var(--wa);box-shadow:0 3px 0 var(--azul),0 8px 20px rgba(5,5,25,.18);transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-press) var(--ease-out)}
  .wa-flutuante svg,.whatsapp-float svg{width:30px;height:30px;fill:var(--azul);color:var(--azul)!important}
  .whatsapp-float .wf-txt{display:none}
  .whatsapp-float .wf-btn{display:flex;align-items:center;justify-content:center;font-size:0;gap:0}
  .wa-flutuante:active,.whatsapp-float:active{transform:translateY(2px);box-shadow:0 1px 0 var(--azul)}
}
@media (max-width:768px){
  .barra-cel,.whatsapp-float{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:900;background:#fff;border-top:4px solid var(--agua);box-shadow:0 -6px 18px rgba(5,5,25,.12);padding:10px 16px calc(10px + env(safe-area-inset-bottom));min-height:var(--barra-h)}
  .barra-cel .txt{flex:1;min-width:0;font-size:.9rem;line-height:1.3;color:var(--azul)}
  .barra-cel .txt b{display:block;font-family:var(--font-display);font-size:1.12rem;font-weight:700}
  .barra-cel .btn,.whatsapp-float .wf-btn{padding:12px 16px;font-size:.98rem;white-space:nowrap;box-shadow:0 3px 0 var(--azul);text-wrap:nowrap}
  .whatsapp-float .wf-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;border-radius:var(--raio-btn);background:var(--wa);color:var(--azul);font-weight:700;line-height:1.25;flex-shrink:0;transition:transform var(--t-press) var(--ease-out),box-shadow var(--t-press) var(--ease-out)}
  .whatsapp-float .wf-btn svg{width:22px;height:22px;fill:var(--azul)}
  .barra-cel .btn:active,.whatsapp-float:active .wf-btn{transform:translateY(2px);box-shadow:0 1px 0 var(--azul)}
  /* rodapé escuro desce por trás da barra: sem faixa branca entre os dois */
  .site-footer{padding-bottom:calc(28px + var(--barra-h) + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* ---------- índice do blog ---------- */
.blog-grid-section{padding:48px 0 30px}
.blog-grid-section .container{max-width:1140px}
.blog-grid-section__title{font-size:2.3rem;margin-bottom:10px}
.blog-grid-section__desc{color:var(--txt-2);margin-bottom:26px;max-width:62ch}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.blog-card{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--agua-linha);border-radius:var(--raio);overflow:hidden;color:var(--txt);transition:transform var(--t-press) var(--ease-out),border-color 200ms ease}
a.blog-card:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){a.blog-card:hover{border-color:var(--agua-media);transform:translateY(-3px)}}
.blog-card__img-wrapper{position:relative;aspect-ratio:700/435;overflow:hidden;background:var(--agua-tinta)}
.blog-card__img-wrapper img{width:100%;height:100%;object-fit:cover}
.blog-card__tag{position:absolute;left:12px;bottom:12px;background:var(--agua);color:var(--azul);font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 12px}
.blog-card__badge-soon{position:absolute;left:12px;top:12px;background:var(--azul);color:#fff;font-weight:600;font-size:.88rem;border-radius:999px;padding:3px 10px}
.blog-card__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.blog-card__title{font-size:1.45rem;line-height:1.15;margin-bottom:8px}
.blog-card__excerpt{font-size:1rem;color:var(--txt-2);margin-bottom:12px;line-height:1.55}
.blog-card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.9rem;color:var(--txt-2);margin-top:auto}
.blog-card__meta span{display:inline-flex;align-items:center;gap:6px}
.blog-card__meta svg{width:15px;height:15px}
.blog-card__read-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:700;color:var(--agua-escura)}
.blog-card__read-more svg{transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.blog-card:hover .blog-card__read-more svg{transform:translateX(4px)}}
.blog-card--coming-soon{opacity:.72}
.blog-card--coming-soon img{filter:grayscale(.6)}

/* impressão: desenhos sempre completos */
@media print{
  .diagrama.pre .dga-imp,.diagrama.pre .dga-enc,.diagrama.pre .dga-pro{opacity:1!important}
  .regua.pre .regua-barra{clip-path:none!important}
  .barra-cel,.whatsapp-float,.wa-flutuante,body::before,.ler-fio{display:none!important}
}

/* conteúdo que o JS antigo revelava: fica sempre visível (texto não se mexe) */
.fade-in{opacity:1!important;transform:none!important}

/* ---------- pop-up de saída ---------- */
.od-pop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,5,25,.66);opacity:0;visibility:hidden;transition:opacity 250ms var(--ease-out),visibility 0s linear 250ms}
.od-pop.aberto{opacity:1;visibility:visible;transition:opacity 250ms var(--ease-out),visibility 0s}
.od-pop-card{position:relative;width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:#fff;border-radius:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);transform:scale(.96);transition:transform 250ms var(--ease-out);text-align:center}
.od-pop-card:focus{outline:none}
.od-pop.aberto .od-pop-card{transform:none}
.od-pop-topo{background:var(--agua);color:var(--azul);padding:26px 24px 30px;border-radius:22px 22px 50% 50%/22px 22px 26px 26px;position:relative;overflow:hidden}
.od-pop-tag{display:inline-block;background:var(--azul);color:#fff;border-radius:999px;padding:4px 12px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.od-pop-tit{font-family:var(--font-display);font-size:1.7rem;line-height:1.12;margin:0;color:var(--azul);position:relative;z-index:1;text-wrap:balance}
.od-pop-corpo{padding:20px 24px 24px}
.od-pop-sub{font-size:.98rem;line-height:1.55;color:var(--txt-2);margin:0 0 16px}
.od-pop-lista{list-style:none;text-align:left;margin:0 0 20px;font-size:1rem;color:var(--txt)}
.od-pop-lista li{padding-left:22px;position:relative;margin-bottom:6px}
.od-pop-lista li::before{content:'';position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--agua-media)}
.od-pop-cta{width:100%;min-height:52px}
.od-pop-x{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(5,5,25,.1);color:var(--azul);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.od-pop-x:hover{background:rgba(5,5,25,.2)}}
body.od-pop-trava{overflow:hidden}
/* toque (celular): folha que sobe da base, X ao alcance do polegar no topo da folha */
@media (hover:none){
  .od-pop{align-items:flex-end;padding:0}
  .od-pop-card{max-width:560px;max-height:calc(100dvh - 24px);border-radius:22px 22px 0 0;transform:translateY(32px);padding-bottom:env(safe-area-inset-bottom)}
  .od-pop-topo{border-radius:22px 22px 0 0;padding:22px 64px 20px 20px;text-align:left}
  .od-pop-corpo{padding:16px 20px 20px;text-align:left}
  .od-pop-x{top:8px;right:8px;background:rgba(5,5,25,.12)}
  .od-pop :focus-visible{outline-width:2px;outline-offset:2px}
}

/* ---------- responsivo ---------- */
@media (max-width:992px){h1{font-size:2.6rem} h2{font-size:2rem} .blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:768px){
  .arraste{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--agua-escura);margin:18px 0 -14px}
  .arraste::before{content:'';width:22px;height:2px;background:currentColor;box-shadow:6px 0 0 0 currentColor;flex-shrink:0}
  .comparativo th:first-child,.comparativo td:first-child,.comparison-table th:first-child,.comparison-table td:first-child{width:128px;min-width:128px;max-width:128px;font-size:.95em;padding-right:10px}
}
@media (max-width:600px){
  body{font-size:17.5px}
  h1{font-size:2.25rem} h2{font-size:1.8rem} h3{font-size:1.3rem}
  .logo,.site-header__logo{width:128px;height:44px;margin-left:-8px}
  .site-header__phone{display:none}
  .hero,.blog-hero{padding:14px 0 62px;border-radius:0 0 50% 50%/0 0 40px 40px}
  .hero-cta .btn{width:100%}
  .resposta,.toc,.cartao,.info-card,.payment-card{padding:20px}
  .toc ol{grid-template-columns:1fr}
  .pros-contras,.info-cards,.payment-grid,.blog-grid{grid-template-columns:1fr}
  .cta-meio,.inline-cta{padding:26px 18px}
  .cta-meio .cta-tit{font-size:1.7rem}
  .inline-cta p{font-size:1.35rem}
  /* botões largos: ícone e texto andam juntos, centralizados, mesmo quebrando linha */
  .hero-cta .btn,.cta-meio .btn,.inline-cta .btn,.final .btn,.final-cta .btn,.blog-cta .btn{width:100%;display:block;padding-left:20px;padding-right:20px;text-wrap:pretty}
  .hero-cta .btn svg,.cta-meio .btn svg,.inline-cta .btn svg,.final .btn svg,.final-cta .btn svg,.blog-cta .btn svg{display:inline-block;vertical-align:-5px;margin-right:8px}
  .final h2,.final-cta h2,.blog-cta h2{font-size:2rem}
  .final-cta__stats,.blog-cta__stats{gap:8px}
  .final-cta__stats:has(>:nth-child(4)){grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .final-cta__stat-number,.blog-cta__stat-number{font-size:1.75rem}
  .regua-linha{grid-template-columns:1fr}
  .regua-eixo{margin-left:0}
  .step-list li{padding:16px 16px 16px 56px}
  .step-list li::before{left:16px;top:16px;font-size:1.2rem}
  .blog-grid-section__title{font-size:1.9rem}
}
@media (max-width:400px){
  /* tabela de preço de 2 colunas: o valor pode quebrar linha, nada cortado */
  .preco,.price-value{white-space:normal}
  .price-table td,.price-table th,.tabela-rolagem table:not(.comparativo):not(.comparison-table) td,.tabela-rolagem table:not(.comparativo):not(.comparison-table) th{padding:12px}
}
@media (max-width:360px){
  .dg-grade{gap:6px}
  .dg-nome{font-size:1.02rem}
  .dg-sub{font-size:.8rem}
  .site-header .btn span{display:none}
  .barra-cel .txt b,.wf-txt b{font-size:1rem}
  .barra-cel .btn,.whatsapp-float .wf-btn{padding:11px 12px;font-size:.92rem}
}

/* =====================================================================
   MOVIMENTO: só o que explica. Texto nunca se mexe.
   Com prefers-reduced-motion: nada abaixo roda (página pronta e parada).
   Estados escondidos só existem com a classe .pre, que o JS põe apenas
   em blocos FORA da tela; sem JS, nada fica invisível.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .sorriso-hero .arco{animation:desenha 1.1s var(--ease-out) .15s both}
  @keyframes desenha{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  /* diagrama das próteses: implantes entram no osso, encaixes dão o "clique", prótese desce */
  .diagrama.pre .dga-imp,.diagrama.pre .dga-enc,.diagrama.pre .dga-pro{opacity:0}
  .diagrama.ativo .dg-item{--col:0ms}
  .diagrama.ativo .dg-item:nth-child(2){--col:220ms}
  .diagrama.ativo .dg-item:nth-child(3){--col:440ms}
  .diagrama.ativo .dga-imp{animation:entra-osso 500ms var(--ease-out) var(--col,0ms) both}
  .diagrama.ativo .dga-enc{animation:aparece 220ms var(--ease-out) calc(var(--col,0ms) + 380ms) both,clique 240ms var(--ease-out) calc(var(--col,0ms) + 1080ms)}
  .diagrama.ativo .dga-pro{animation:desce 600ms var(--ease-out) calc(var(--col,0ms) + 480ms) both}
  .diagrama.ativo .dg-item:first-child .dga-pro{animation-delay:120ms}
  @keyframes entra-osso{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
  @keyframes desce{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
  @keyframes aparece{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
  @keyframes clique{50%{transform:scale(1.1)}}

  /* régua de preço: barras se desenham da esquerda para a direita, uma vez */
  .regua.pre .regua-barra{clip-path:inset(0 100% 0 0)}
  .regua.ativo .regua-barra{animation:barra var(--t-explica) var(--ease-in-out) calc(var(--i,0) * 90ms) both}
  @keyframes barra{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

  .od-pop.aberto .od-pop-card{transition:transform 280ms var(--ease-out)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-delay:0s!important}
  body::before,.ler-fio{display:none!important}
}