/* ============ Consultaí — Design System v2 ============ */
/* ============================================================
   VERSAO DO ARQUIVO: v6  ·  31/07/2026
   Para saber qual style.css esta no servidor, abra
   https://vemconsultai.com.br/style.css e procure (Ctrl+F) por:
        VERSAO DO ARQUIVO
   A linha acima diz a versao. Se nao existir essa linha,
   o arquivo no ar e anterior a v6.
   ============================================================ */
/* ===== CORES DA MARCA =====
   --coral (#FF6B4A) e o laranja da identidade: logo, bolha do banner, barras
   decorativas. Ele NAO carrega texto.
   --btn (#E52A00) e o mesmo laranja, mesmo matiz de 10,9 graus e mesma
   saturacao, so mais escuro. Ele existe porque branco sobre #FF6B4A da
   contraste de 2,82:1, e o texto do botao tem 17px em negrito, que nao conta
   como "texto grande", entao a regra de acessibilidade exige 4,5:1. O #E52A00
   entrega 4,50:1. Decisao do Dr. Joao em 03/08/2026: escurecer SO onde ha
   texto branco em cima, preservando a marca no resto. */
:root{--teal:#15A39A;--deep:#0C4A52;--ink:#14333A;--coral:#FF6B4A;--btn:#E52A00;--soft:#F1FBF9;--mut:#5C7178;--line:#E3EFEC}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,'Segoe UI',Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;color:var(--ink);background:#fff;line-height:1.55}
h1,h2,h3,.brandfont{font-family:'Poppins','Inter',"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* Buttons */
.btn{display:inline-block;background:var(--btn);color:#fff;font-weight:700;font-family:'Poppins',sans-serif;
  padding:16px 30px;border-radius:14px;text-decoration:none;font-size:17px;transition:.18s;box-shadow:0 8px 24px rgba(229,42,0,.32)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(229,42,0,.42)}
.btn.ghost{background:#fff;color:var(--deep);box-shadow:none;border:2px solid var(--line);padding:10px 20px;font-size:15px}
.btn.ghost:hover{border-color:var(--teal)}

/* Header */
header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px;position:relative}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo svg{width:40px;height:40px}
.logo .w{font-family:'Poppins';font-weight:800;font-size:24px;color:var(--deep);letter-spacing:-.5px}
.logo .w .d{color:var(--coral)}
.menu{display:flex;align-items:center;gap:20px;font-size:14.5px;font-weight:600;color:var(--mut)}
.menu a{text-decoration:none;transition:.15s;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a.on{color:var(--teal);border-bottom-color:var(--teal)}
.menu a.mobcta{display:none}
.nav-right{display:flex;align-items:center;gap:10px}
/* Hamburger (menu mobile) */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px}
.hamburger span{display:block;width:24px;height:2.5px;background:var(--deep);border-radius:2px;transition:.25s}
.nav.open .hamburger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.open .hamburger span:nth-child(2){opacity:0}
.nav.open .hamburger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Hero */
/* ATENCAO ao mexer no degrade abaixo. Ele nao e so decoracao, e o fundo que
   sustenta QUATRO textos claros: o h1 branco, o destaque em pessego (.hl), o
   subtitulo (#D9F2EF) e os itens com visto (.trust). Se clarear, os quatro
   perdem contraste de uma vez.
   Medicao de 04/08/2026 no banner de verdade, pior caso do degrade (o tom mais
   claro entre os 40 mais frequentes atras de cada texto), PC 1280 e iPhone 13:
     com o verde antigo (#15A39A -> #0C4A52) e bolha branca em .12
       destaque    2,91 PC / 2,37 celular  (precisa 3,0)   REPROVAVA nos dois
       subtitulo   3,85 PC / 3,03 celular  (precisa 4,5)   REPROVAVA nos dois
       itens visto 4,51 PC / 4,37 celular  (precisa 4,5)   REPROVAVA no celular
     com o verde de agora (#0D7F79 -> #08383F) e bolha branca em .07
       destaque    4,40 PC / 3,71 celular   OK
       subtitulo   5,77 PC / 4,72 celular   OK
       itens visto 6,07 PC / 6,36 celular   OK
       h1 branco   5,83 PC / 4,92 celular   OK
   Clarear o texto NAO resolve: testado, o pessego so passaria virando quase
   branco, o que apaga o destaque. Escolha do Dr. Joao em 04/08/2026 (opcao B).
   Se um dia alguem quiser o verde antigo de volta, tem que refazer esta conta. */
.hero{background:linear-gradient(160deg,#0D7F79,#08383F);color:#fff;padding:72px 0 84px;position:relative;overflow:hidden}
.hero .blob{position:absolute;border-radius:50%;opacity:.07;background:#fff}
.hero .b1{width:520px;height:520px;top:-180px;right:-140px}
.hero .b2{width:340px;height:340px;bottom:-160px;left:-120px;background:#FF6B4A;opacity:.18}
.hero .grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);padding:8px 18px;border-radius:40px;font-size:14px;font-weight:600;margin-bottom:18px}
.pill svg{width:17px;height:17px}
.hero h1{font-size:52px;line-height:1.06;font-weight:800;letter-spacing:-1.5px}
.hero h1 .hl{color:#FFD7CC}
.hero p.sub{font-size:20px;color:#D9F2EF;margin:20px 0 28px;max-width:520px}
.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.price-tag{display:flex;align-items:baseline;gap:8px}
.price-tag .v{font-family:'Poppins';font-weight:800;font-size:34px}
.price-tag .s{font-size:14px;color:#CFEFEA}
.trust{margin-top:22px;font-size:14px;color:#CFEFEA;display:flex;gap:18px;flex-wrap:wrap}
.trust span{display:flex;align-items:center;gap:6px}

/* Hero sub-page (internal pages) */
.hero.mini{padding:56px 0 60px}
.hero.mini h1{font-size:40px}

/* Phone mock */
.mock{background:#fff;border-radius:26px;padding:14px;box-shadow:0 30px 60px rgba(3,30,34,.35);color:var(--ink)}
.mock .bar{background:linear-gradient(135deg,var(--teal),var(--deep));border-radius:16px 16px 0 0;padding:12px 14px;color:#fff;display:flex;align-items:center;gap:8px;margin:-14px -14px 12px}
.mock .bar svg{width:26px;height:26px}
.mock .bar b{font-family:'Poppins';font-size:15px}
.mbubble{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;margin-bottom:8px}
.mopts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mopt{background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:9px;text-align:center;font-size:12px;font-weight:600;color:var(--deep)}

a.mock-link{display:block;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
a.mock-link:hover{transform:translateY(-4px);box-shadow:0 36px 70px rgba(3,30,34,.42)}
a.mock-link .mopt{transition:.15s}
a.mock-link:hover .mopt{border-color:var(--teal);color:var(--teal)}
.mocktip{text-align:center;font-size:12.5px;font-weight:600;color:var(--mut);padding:10px 0 2px}

/* Sections */
section{padding:72px 0}
/* O verde da marca (#15A39A) da 3,12:1 sobre o branco, abaixo dos 4,5:1
   exigidos para texto. O #0F766E e o mesmo verde mais fechado e da 5,47:1.
   Vale so para os kickers, o rotulo em maiusculas acima do titulo da secao.
   O resto do site continua com o --teal original. */
.kicker{color:#0F766E;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;text-align:center}
h2.title{font-size:36px;font-weight:800;color:var(--deep);text-align:center;letter-spacing:-1px;margin:8px 0 8px}
.lead{text-align:center;color:var(--mut);max-width:620px;margin:0 auto 40px;font-size:17px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:28px;transition:.2s}
.step:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(12,74,82,.10);border-color:#CDEAE4}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;font-family:'Poppins';font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:19px;color:var(--deep);margin-bottom:6px}
.step p{color:var(--mut);font-size:15px}

/* Chips (o que dá pra resolver) — hover animation */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:760px;margin:0 auto}
.chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1.5px solid var(--line);border-radius:40px;padding:12px 22px;font-weight:600;color:var(--deep);font-size:15px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;cursor:default}
.chip svg{width:19px;height:19px;flex:none}
.chip:hover{transform:translateY(-4px) scale(1.04);border-color:var(--teal);background:var(--soft);box-shadow:0 12px 24px rgba(21,163,154,.18);color:var(--teal)}

/* Grade "O que dá para resolver" — cartões simétricos */
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:900px;margin:0 auto}
.rcard{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:22px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:122px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;cursor:default}
.rcard:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(21,163,154,.15);border-color:var(--teal)}
.rcard .ic{width:34px;height:34px;flex:none}
.rcard span{font-weight:700;color:var(--deep);font-size:14px;line-height:1.3;font-family:'Poppins',sans-serif}
@media(max-width:820px){.rgrid{grid-template-columns:repeat(2,1fr)}}

/* Price section */
.pricebox{max-width:520px;margin:0 auto;background:#fff;border:2px solid var(--teal);border-radius:22px;overflow:hidden;box-shadow:0 20px 44px rgba(12,74,82,.10)}
.pricebox .top{background:linear-gradient(135deg,var(--teal),var(--deep));color:#fff;text-align:center;padding:14px;font-weight:700;font-family:'Poppins';letter-spacing:1px;font-size:14px;text-transform:uppercase}
.pricebox .body{padding:30px;text-align:center}
.pricebox .v{font-family:'Poppins';font-weight:800;font-size:56px;color:var(--deep);letter-spacing:-2px}
.pricebox .per{color:var(--mut);font-size:15px;margin-bottom:14px}
.pricebox ul{list-style:none;margin:16px 0 22px;text-align:left;display:inline-block}
.pricebox li{padding:6px 0;color:var(--ink);font-size:15px}
.pricebox li::before{content:'✓ ';color:var(--teal);font-weight:800}

/* Feature cards */
.gridcards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:860px;margin:0 auto}
.gridcards .feat{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:.2s}
.gridcards .feat:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(12,74,82,.10)}
.gridcards .feat .ic{min-width:44px;height:44px;border-radius:12px;background:#EAF7F4;color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.gridcards .feat h3{font-size:17px;color:var(--deep);margin-bottom:3px}
.gridcards .feat p{color:var(--mut);font-size:14px}

/* Trust bar (fatos verificáveis) */
.trustbar{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center;transition:.2s}
.tcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(12,74,82,.10)}
.tcard .em{margin-bottom:10px;color:var(--teal);line-height:0}
.tcard .em svg{width:40px;height:40px;vertical-align:middle}
/* o ">" evita a mesma armadilha do .takeaways: sem ele, um negrito no meio
   de uma frase dentro do cartao viraria bloco e partiria a frase. */
.tcard > b{display:block;color:var(--deep);font-size:15px;margin-bottom:4px;font-family:'Poppins'}
.tcard span{color:var(--mut);font-size:13px}
.depowrap{position:relative;margin-top:34px}
.depoimentos{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 6px;-ms-overflow-style:none;scrollbar-width:none}
.depoimentos::-webkit-scrollbar{display:none}
.depo{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:22px 24px;text-align:left}
.depo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);color:var(--deep);font-family:'Poppins',sans-serif;font-size:22px;
  line-height:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(12,74,82,.16);transition:.15s;padding:0 0 3px}
.depo-nav:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 8px 22px rgba(21,163,154,.25)}
.depo-nav[disabled]{opacity:.32;cursor:default;box-shadow:none}
.depo-nav.prev{left:4px}
.depo-nav.next{right:4px}
@media(min-width:1180px){.depo-nav.prev{left:-20px}.depo-nav.next{right:-20px}}
.depo-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:16px}
.depo-dots i{width:7px;height:7px;border-radius:50%;background:#CFE0DD;display:block;transition:.22s}
.depo-dots i.on{background:var(--teal);width:22px;border-radius:4px}
.depo .stars{color:var(--teal);font-size:17px;letter-spacing:3px}
.depo p{color:var(--ink);font-size:15px;line-height:1.55;margin:12px 0 16px}
.depo .who{font-weight:700;color:var(--deep);font-family:'Poppins';font-size:14px}
.depo .city{color:var(--mut);font-size:12px;margin-top:2px}
.depo-nota{max-width:760px;margin:22px auto 0;text-align:center;font-size:13px;color:var(--mut);line-height:1.65}
.depo-nota b{color:var(--deep)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 20px;margin-bottom:12px}
summary{cursor:pointer;font-weight:600;color:var(--deep);padding:14px 0;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-size:22px;color:var(--teal)}
details[open] summary::after{content:'–'}
details p{color:var(--mut);padding:0 0 16px;font-size:15px}

/* CTA band — centralizado */
.bandwrap{padding:0 22px}
.band{background:linear-gradient(135deg,var(--teal),var(--deep));color:#fff;text-align:center;border-radius:26px;padding:56px 24px;max-width:1036px;margin:0 auto}
.band h2{font-size:34px;font-weight:800;letter-spacing:-1px}
.band p{color:#D9F2EF;margin:12px 0 26px;font-size:18px}

/* Article (páginas internas de conteúdo) */
.article{max-width:760px;margin:0 auto;font-size:16.5px;color:#33474d}
.article h2{font-size:26px;color:var(--deep);font-weight:800;letter-spacing:-.5px;margin:34px 0 12px}
.article h3{font-size:19px;color:var(--teal);margin:24px 0 8px}
.article p{margin-bottom:14px;line-height:1.7}
.article ul{margin:0 0 14px 20px}
.article li{margin-bottom:6px;line-height:1.6}
.article .note{background:var(--soft);border-left:4px solid var(--teal);border-radius:8px;padding:14px 18px;font-size:15px;margin:18px 0}

/* Footer */
footer{background:var(--ink);color:#9FB4B8;padding:52px 0 30px;font-size:14px;margin-top:72px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px;margin-bottom:28px}
footer .w{font-family:'Poppins';font-weight:800;color:#fff;font-size:20px}
/* Eram <h4> logo depois de um <h2> do conteudo, pulando o <h3>. Quem navega
   por titulos com leitor de tela sentia um degrau faltando. Viraram <h2>,
   que nao pula nivel em pagina nenhuma. A aparencia continua identica. */
footer h2{color:#fff;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;font-family:'Poppins';font-weight:600}
footer a{color:#9FB4B8;text-decoration:none;transition:.15s}
footer a:hover{color:#5BD6CB}
footer .lk{display:block;padding:4px 0}
footer .contact p{padding:3px 0}
footer .contact .init{font-size:12.5px;color:#7C969B;margin-top:2px;letter-spacing:.3px}
footer .contact .octa{color:#CDE0E3;font-weight:600;margin-top:12px}
footer a.cta-ic{display:inline-flex;align-items:center;gap:8px;color:#9FB4B8;text-decoration:none;padding:4px 0;transition:.15s;white-space:nowrap}
footer a.cta-ic svg{width:16px;height:16px;fill:currentColor;flex:none;opacity:.9;transition:.15s}
footer a.cta-ic:hover{color:#5BD6CB}
footer a.cta-ic:hover svg{opacity:1}
footer .legal{border-top:1px solid #24484f;padding-top:18px;font-size:12.5px;line-height:1.8;color:#7C969B}

/* Formulário de contato (Trabalhe conosco) */
.formcard{max-width:640px;margin:6px auto 0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 16px 40px rgba(12,74,82,.08)}
.formcard .frow{margin-bottom:16px}
.formcard label{display:block;font-size:13px;font-weight:700;color:var(--deep);margin-bottom:6px;font-family:'Poppins',sans-serif}
/* ATENCAO AO 16px. Qualquer campo abaixo disso faz o iPhone dar zoom sozinho
   quando a pessoa toca: a tela salta e ela digita torto. Estava em 15px. */
.formcard input,.formcard select,.formcard textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff;transition:.15s}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(21,163,154,.12)}
.formcard textarea{min-height:150px;resize:vertical;line-height:1.5}
.formcard .btn{width:100%;border:none;cursor:pointer;margin-top:6px}
.formnote{max-width:640px;margin:16px auto 0;text-align:center;color:var(--mut);font-size:13.5px;line-height:1.6}

/* WhatsApp float */
.wa{position:fixed;bottom:22px;right:22px;width:62px;height:62px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.28);z-index:60;transition:.15s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:35px;height:35px;fill:#fff}
.wa::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.5;animation:waPulse 2.1s ease-out infinite;z-index:-1}
@keyframes waPulse{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* ===== Tablet (até 1024px) ===== */
@media(max-width:1024px){
  .hero h1{font-size:44px}
  .steps{gap:16px}.step{padding:22px}
  .trustbar{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr 1fr}
  .menu{gap:14px;font-size:13.5px}
}
/* ===== Menu de celular: ate 1000px (NAO e 820px, e de proposito) =====
   Medido em 05/08/2026: o menu de computador so cabe em UMA linha a partir de
   967px de largura. Entre 821px e 966px o site mostrava o desenho de computador
   num espaco em que ele nao cabe: os itens quebravam em duas linhas (52px de
   altura dentro de uma barra de 69px) e o botao "Agendar consulta" ficava com
   71px, mais alto que a propria barra, encostando na borda.
   Essa faixa e exatamente a do celular DEITADO: iPhone 17 Pro Max 956px,
   15 Pro Max 932px, iPhone 13 844px. Foi o Dr. Joao quem achou, virando o
   telefone. O limite aqui e 1000px para ter folga sobre os 967px.
   Testada a alternativa de encolher o menu para caber: precisaria de fonte
   12,5px e espacamento 10px, e sobrariam 7px de folga num iPhone 13 deitado.
   Pequeno demais para o dedo e frágil demais. Por isso o hamburguer.
   >>> Se um dia entrar um item novo no menu, REFAZER essa medicao. <<< */
@media(max-width:1000px){
  /* Menu vira dropdown acionado pelo hambúrguer */
  .hamburger{display:flex}
  .menu{
    position:fixed;top:68px;left:0;right:0;
    height:calc(100vh - 68px);
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:none;box-shadow:none;
    padding:0 22px;overflow-y:auto;opacity:0;pointer-events:none;
    transition:opacity .22s ease}
  .nav.open .menu{opacity:1;pointer-events:auto;padding:10px 22px 28px}
  .menu a{padding:14px 2px;border-bottom:1px solid var(--line);border-radius:0;font-size:15.5px}
  .menu a:hover,.menu a.on{border-bottom-color:var(--line);color:var(--teal)}
  .nav-right .btn.ghost{display:none}
  .menu a.mobcta{display:block;margin-top:12px;background:var(--btn);color:#fff;text-align:center;
    border:none;border-radius:12px;padding:14px;font-weight:700;font-family:'Poppins',sans-serif;
    box-shadow:0 8px 20px rgba(229,42,0,.28)}
  .menu a.mobcta:hover{color:#fff}
}
/* Celular DEITADO: tela baixa. Sem isto, o menu aberto nao cabe (mostrava 6 dos
   8 itens em 956x440) e o botao "Agendar consulta" ficava abaixo da dobra,
   obrigando a rolar dentro do proprio menu. */
@media(max-width:1000px) and (max-height:560px){
  .menu a{padding:9px 2px;font-size:15px}
  .nav.open .menu{padding:6px 22px 18px}
  .menu a.mobcta{margin-top:8px;padding:11px}
}
/* ===== Celular (até 820px) ===== */
@media(max-width:820px){
  .hero .grid{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:38px}.hero.mini h1{font-size:30px}
  .steps{grid-template-columns:1fr}
  .gridcards{grid-template-columns:1fr}
  h2.title{font-size:28px}
  .mock{max-width:340px;margin:0 auto}
  .band h2{font-size:26px}
  section{padding:54px 0}
}
/* ===== Celular pequeno (até 400px) ===== */
@media(max-width:400px){
  .hero h1{font-size:32px}
  .btn{padding:14px 22px;font-size:15.5px}
  .pricebox .v{font-size:44px}
  .trustbar{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr;gap:26px}
}

@media(max-width:820px){
  .depo{flex:0 0 86%}
  .depo-nav{display:none}   /* no celular o swipe com o dedo resolve melhor que seta */
}

.chip svg{width:17px;height:17px}

/* ===== Blog ===== */
.crumb{font-size:13px;color:#D9F2EF;margin-bottom:34px}
.article a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.article a:hover{color:var(--deep)}
.crumb a{color:#fff;text-decoration:none;opacity:.9}
.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 6px;opacity:.6}

.meta-post{display:flex;align-items:center;gap:12px;margin:0 0 26px;padding-bottom:20px;border-bottom:1px solid var(--line);font-size:14px}
.meta-post .av{flex:none;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--deep));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:15px}
.meta-post b{color:var(--deep)}
.meta-post .muted{color:var(--mut)}

/* Post em destaque */
/* Hero do blog: mais baixo que os demais (só na listagem) */
.hero.mini.blogtop{padding:34px 0 40px}
.hero.mini.blogtop h1{font-size:34px}
.hero.mini.blogtop .sub{font-size:16px;margin:14px 0 0;max-width:520px}
.hero.mini.blogtop .pill{margin-bottom:14px}
/* Destaque: card claro (mint) com faixa lateral — não briga com o verde do hero */
.feat{display:block;text-decoration:none;background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--teal);color:inherit;border-radius:18px;padding:28px 32px;margin:18px 0 34px;box-shadow:0 10px 26px rgba(12,74,82,.07);transition:transform .18s ease,box-shadow .18s ease}
.feat:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(12,74,82,.12)}
.feat-tag{display:inline-block;background:#FDE7E0;color:#C8401C;font-size:12px;font-weight:700;padding:5px 14px;border-radius:30px;margin-bottom:14px;letter-spacing:.3px}
.feat h2{font-family:'Poppins',sans-serif;font-weight:800;font-size:25px;line-height:1.18;letter-spacing:-.5px;margin-bottom:10px;color:var(--deep)}
.feat p{color:#5C7178;font-size:15.5px;line-height:1.6;max-width:660px}
.feat-link{display:inline-block;margin-top:16px;font-weight:700;font-family:'Poppins',sans-serif;color:var(--teal)}

/* Grade de cards */
.grid-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.pcard{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.pcard:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(21,163,154,.14);border-color:var(--teal)}
.pcat{display:inline-block;font-size:12px;font-weight:700;color:var(--teal);background:var(--soft);padding:4px 12px;border-radius:20px;margin-bottom:12px;font-family:'Poppins',sans-serif}
.pcard h3{font-family:'Poppins',sans-serif;font-weight:700;color:var(--deep);font-size:18px;line-height:1.3;margin-bottom:10px}
.pcard p{color:#33474d;font-size:14.5px;line-height:1.55;margin-bottom:14px}
.pcard .pmeta{font-size:12.5px;color:var(--mut)}
.pcard.soon{opacity:.72}
.pcard.soon .pcat{color:var(--mut);background:#f2f5f6}

.blog-cta{text-align:center;margin:50px 0 8px}
.blog-cta p{color:var(--mut);margin-bottom:16px;font-size:16px}

@media(max-width:820px){
  .grid-posts{grid-template-columns:1fr}
  .feat{padding:32px 26px}
  .feat h2{font-size:24px}
}

/* Barra de categorias do blog */
.catbar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:4px 0 30px}
.cbtn{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--mut);background:#fff;border:1.5px solid var(--line);border-radius:30px;padding:9px 18px;cursor:pointer;transition:.15s}
.cbtn:hover{border-color:var(--teal);color:var(--teal)}
.cbtn.on{background:var(--teal);border-color:var(--teal);color:#fff}
@media(max-width:520px){.cbtn{font-size:13px;padding:8px 14px}}

/* Blocos do padrão editorial (blog) */
.takeaways{background:#EAF7F4;border:1px solid #CDEBE5;border-radius:14px;padding:18px 22px;margin:22px 0}
/* ATENCAO AO ">" DAQUI. Antes a regra era ".takeaways b", sem o sinal de
   maior, entao ela pegava TODO <b> dentro da caixa, inclusive os que estao no
   meio das frases dos itens. Resultado: qualquer palavra em negrito virava um
   bloco proprio e partia a frase em tres pedacos na tela. Foi o que quebrou o
   "Resumo rapido" dos artigos de diarreia e de infeccao urinaria.
   O ">" limita a regra ao <b> que e FILHO DIRETO da caixa, que e o titulo. */
.takeaways > b{display:block;color:var(--deep);font-family:'Poppins',sans-serif;margin-bottom:8px;font-size:15px}
/* e o negrito dentro dos itens volta a ser negrito de frase, na linha */
.takeaways li b{display:inline;color:var(--deep);font-family:inherit;font-size:inherit;font-weight:700;margin:0}
.takeaways ul{margin:0 0 0 18px}
.takeaways li{margin-bottom:6px;line-height:1.55;color:#33474d}
.leia{background:var(--soft);border-left:4px solid var(--coral);border-radius:8px;padding:14px 18px;margin:22px 0}
/* idem: so o <b> filho direto e titulo do bloco */
.leia > b{display:block;color:var(--deep);font-family:'Poppins',sans-serif;margin-bottom:6px;font-size:14px}
.leia a{display:block;color:var(--teal);text-decoration:none;padding:3px 0;font-weight:600}
.leia a:hover{text-decoration:underline}
.fontes-sec{padding:44px 0 48px}
.fontes-sec .wrap{max-width:760px}
.fontes-sec h2{font-size:18px;color:var(--deep);font-family:'Poppins',sans-serif;margin-bottom:10px}
.fontes-sec ul{margin:0 0 14px 18px}
.fontes-sec li{margin-bottom:6px;font-size:14px}
.fontes-sec a{color:var(--teal)}
.fontes-sec .rev{font-size:13px;color:var(--mut);border-top:1px solid var(--line);padding-top:12px}

/* Infográfico / imagens no artigo */
.article figure{margin:28px 0}
.article figure img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);display:block}
.article figcaption{text-align:center;font-size:13.5px;color:var(--mut);margin-top:9px}

/* ===== CARROSSEL DE DEPOIMENTOS PELO TECLADO =====
   O trilho recebeu tabindex="0" no HTML, entao quem navega apertando Tab
   agora para nele e rola com as setinhas. Sem esta regra o foco seria
   invisivel e a pessoa nao saberia onde esta. */
#depoTrack:focus{outline:none}
#depoTrack:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:14px}

/* ===== TRANSICAO ENTRE PAGINAS =====
   Por que isto existe: o menu do celular tem um desvanecer de .22s. Em link de
   ancora (#faq, #como-funciona) ele roda inteiro, porque a pagina nao troca. Em
   link que troca de pagina, o navegador derruba o documento antigo na hora e o
   desvanecer nunca chega a rodar: a pagina nova aparece em UM quadro. Foi isso
   que o Dr. Joao notou em 05/08/2026, e a gravacao do compositor confirmou.
   Solucao sem JavaScript: o proprio navegador dissolve a pagina antiga na nova.
   Medido no emulador de iPhone: de 1 quadro seco para ~280ms de animacao.
   Em navegador que nao suporta, o comportamento e exatamente o de antes, sem
   piora. Precisa da regra nas DUAS paginas, a que sai e a que entra, e por isso
   ela mora aqui no style.css, que todas carregam. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtSai .16s ease both}
::view-transition-new(root){animation:vtEntra .28s cubic-bezier(.22,.61,.36,1) both}
@keyframes vtSai{to{opacity:0}}
@keyframes vtEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Com o menu aberto, o botao flutuante do WhatsApp some. Sem isto, no celular
   DEITADO (medido em 956x440) ele fica por cima do botao "Agendar consulta" do
   menu, cobrindo 62 por 40 pixels justamente do botao principal. Em navegador
   sem :has() nada muda, o comportamento fica o de antes. */
header:has(.nav.open) ~ .wa{opacity:0;pointer-events:none}
.wa{transition:opacity .18s ease}

/* ===== BOTAO "AGENDAR CONSULTA" DA BARRA DO TOPO =====
   No alto da pagina o botao laranja do banner ja chama a acao. Se o botao da
   barra tambem fosse laranja ali, dois laranjas competiriam na mesma tela.
   Entao ele so acende quando some a porta de entrada do alto. Quem liga e
   desliga a classe "rolou" e um IntersectionObserver, presente em TODAS as
   paginas desde 05/08/2026 (antes existia so na home, e a diferenca foi vista
   pelo Dr. Joao no computador).
   O 1001px casa com o limite do menu de celular, que e 1000px: abaixo disso o
   botao vive dentro do hamburguer e esta regra nao tem efeito. Se um dia esse
   limite mudar, os dois numeros mudam juntos. */
@media(min-width:1001px){
  .nav-right .btn.ghost{transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
  body.rolou .nav-right .btn.ghost{background:var(--btn);color:#fff;border-color:transparent;
    box-shadow:0 8px 22px rgba(229,42,0,.34)}
  body.rolou .nav-right .btn.ghost:hover{box-shadow:0 12px 30px rgba(229,42,0,.42)}
}