/* ==========================================================================
   Clínica Pró-Saúde — Campos do Jordão/SP
   Fontes locais (Manrope + Playfair Display) + tokens + componentes.

   Tipografia da marca: Manrope no corpo de texto, Playfair Display nos
   títulos (h1–h6). Ambas servidas do próprio domínio — nada de CDN de
   fonte, que além do custo de conexão manda o IP do visitante para
   terceiro (o site é de saúde e coleta dados de paciente).
   ========================================================================== */

/* ---- Manrope (local) ---- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/manrope-400.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fontes/manrope-500.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fontes/manrope-600.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fontes/manrope-700.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fontes/manrope-800.woff2') format('woff2');}

/* ---- Playfair Display (local, variável 400–900) ----
   Um arquivo só cobre todos os pesos: é fonte variável. O subset latin-ext
   entra separado e só é baixado se a página tiver algum caractere dele. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('fontes/playfair-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('fontes/playfair-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---- Tokens ---- */
:root{
  /* ---- Paleta oficial da Clínica Pró-Saúde ----
     Três cores da marca: verde escuro, verde claro e cinza exército.
     A escala 500 é sempre a cor da marca; 600 é a variação MAIS CLARA
     (usada em hover) e 700 a mais escura — essa inversão é herdada do
     motor e vários componentes dependem dela. Não "arrume". */
  --verde-50:#eef5f0;--verde-100:#d7e8dd;--verde-200:#b0d2ba;--verde-300:#82b891;--verde-400:#52a351;
  --verde-500:#2b6c3c;--verde-600:#35814a;--verde-700:#235a31;--verde-800:#1c4826;--verde-900:#16391e;
  --acento-50:#eef7ef;--acento-100:#d9eeda;--acento-200:#b3ddb4;--acento-300:#86c887;--acento-400:#52a351;
  --acento-500:#469247;--acento-600:#3a7d3b;--acento-700:#2f6630;--acento-800:#265227;

  /* Aliases legados: os nomes "azul/teal/cyan" vieram do motor de origem e
     são usados em centenas de lugares. Foram remapeados para o verde em vez
     de renomeados — renomear exigiria varrer o CSS inteiro e o ganho seria
     só cosmético. O NOME mente; o VALOR está certo. */
  --brand-azul-escuro:var(--verde-500);--brand-azul-claro:var(--acento-400);
  --brand-verde-escuro:var(--verde-500);--brand-verde-claro:var(--acento-400);--brand-cinza:var(--gray-500);
  --azul-50:var(--verde-50);--azul-100:var(--verde-100);--azul-200:var(--verde-200);--azul-300:var(--verde-300);--azul-400:var(--verde-400);--azul-500:var(--verde-500);--azul-600:var(--verde-600);--azul-700:var(--verde-700);--azul-800:var(--verde-800);--azul-900:var(--verde-900);
  --cyan-300:var(--acento-300);--cyan-400:var(--acento-400);--cyan-500:var(--acento-500);--cyan-600:var(--acento-600);
  --teal-50:var(--acento-50);--teal-100:var(--acento-100);--teal-200:var(--acento-200);--teal-300:var(--acento-300);--teal-400:var(--acento-400);--teal-500:var(--acento-500);--teal-600:var(--acento-600);--teal-700:var(--acento-700);--teal-800:var(--acento-800);

  /* Cinza exército (#6b7869) é a cor de marca, mas rende 4,5:1 no branco —
     fica no limite do WCAG AA. Texto corrido usa gray-600/700, mais escuros. */
  --gray-0:#fff;--gray-25:#fbfcfb;--gray-50:#f4f7f4;--gray-100:#edf1ed;--gray-200:#dde5de;--gray-300:#c3cec4;--gray-400:#9daa9f;--gray-500:#6b7869;--gray-600:#5b6659;--gray-700:#454f45;--gray-800:#2f362f;--gray-900:var(--verde-500);
  --success:var(--acento-600);--info:var(--verde-600);--warning:#b8791f;--danger:#c0392f;
  --color-primary:var(--verde-500);--color-primary-hover:var(--verde-600);--color-secondary:var(--acento-600);--color-accent:var(--acento-400);
  /* --text-muted usa gray-600: o gray-500 (#8F8F8F) rende 3,2:1 no branco e reprova no WCAG AA (mín. 4,5:1). */
  --text-strong:var(--gray-900);--text-body:var(--gray-700);--text-muted:var(--gray-600);--text-on-brand:#fff;--text-link:var(--azul-500);
  --surface-page:var(--gray-50);--surface-card:#fff;--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);
  --focus-ring:color-mix(in srgb, var(--azul-500) 45%, transparent);
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --fs-display:clamp(2.4rem,5vw,3.7rem);--fs-h2:clamp(1.7rem,2.6vw,2.25rem);--fs-h3:1.5rem;--fs-h4:1.25rem;--fs-lead:1.1875rem;--fs-eyebrow:0.8125rem;
  --lh-heading:1.2;--lh-snug:1.35;--lh-body:1.65;--ls-tight:-0.02em;--ls-eyebrow:0.14em;
  --space-3:0.875rem;--space-4:1.25rem;--space-6:2.25rem;--space-7:3rem;--space-9:4.5rem;--space-12:clamp(4.5rem,9vw,8rem);
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:26px;--radius-2xl:34px;--radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(27,45,32,.06);--shadow-sm:0 2px 6px rgba(27,45,32,.08);--shadow-md:0 8px 24px rgba(27,45,32,.10);--shadow-lg:0 18px 44px rgba(27,45,32,.14);--shadow-brand:0 12px 30px rgba(43,108,60,.28);
  --container:1200px;--container-narrow:820px;--gutter:clamp(1.25rem,4vw,3rem);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);--dur-fast:140ms;--dur:220ms;--dur-slow:400ms;
  --gradient-brand:linear-gradient(120deg,var(--azul-500) 0%,var(--teal-500) 100%);
  --gradient-brand-soft:linear-gradient(135deg,var(--azul-50) 0%,var(--teal-50) 100%);
}

*{box-sizing:border-box;}
/* scroll-padding-top compensa o header sticky (76px): sem isso, ao clicar em
   #convenios / #faq / #sobre a página rolava até a âncora e o título ficava
   ESCONDIDO atrás do cabeçalho. O blog já usava esse ajuste; o site não. */
html{scroll-behavior:smooth;scroll-padding-top:88px;}
@media (max-width:680px){html{scroll-padding-top:80px;}}
/* respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ---- reveal ao rolar (reveal.js marca html.js-reveal antes da pintura;
   sem JS nada disto se aplica, então o conteúdo nunca fica oculto) ---- */
html.js-reveal .rvz{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);will-change:opacity,transform;}
html.js-reveal .rvz.rvz-in{opacity:1;transform:none;}
/* brilho único que varre a imagem quando o card aparece */
html.js-reveal .rvz-fig{position:relative;}
html.js-reveal .rvz-fig::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);transform:translateX(-130%) skewX(-12deg);opacity:0;}
html.js-reveal .rvz-fig.rvz-in::after{animation:rvShine 1.15s .2s ease-out;}
@keyframes rvShine{0%{transform:translateX(-130%) skewX(-12deg);opacity:0}18%{opacity:1}100%{transform:translateX(130%) skewX(-12deg);opacity:0}}
@media (prefers-reduced-motion:reduce){
  html.js-reveal .rvz{opacity:1;transform:none;transition:none;}
  html.js-reveal .rvz-fig::after{display:none;}
}

body{margin:0;font-family:var(--font-sans);font-size:1rem;line-height:var(--lh-body);color:var(--text-body);background:var(--surface-card);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
/* Playfair Display em TODOS os títulos, de uma vez só. As regras individuais
   mais abaixo (.hero h1, .exam h3, .dif h3…) só definem tamanho/peso/cor —
   nenhuma redefine font-family, então esta regra vale para todas elas. */
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);}

/* ---- ícones ---- */
.ico{display:inline-flex;align-items:center;justify-content:center;}
.ico svg{width:1em;height:1em;display:block;}

/* ---- helpers ---- */
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding-inline:var(--gutter);}
.sec{padding-block:var(--space-12);}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-secondary);}
.sh{max-width:none;}
.sh.center{text-align:center;max-width:680px;margin-inline:auto;}
.sh .eyebrow{display:block;margin-bottom:var(--space-3);}
.sh h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-tight);color:var(--text-strong);}
.sh .lead{margin:var(--space-4) 0 0;font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--text-muted);}

/* ---- botões ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;line-height:1;letter-spacing:.01em;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;border:1px solid transparent;transition:transform var(--dur-fast) var(--ease-out),filter var(--dur) var(--ease-out),background var(--dur);}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn:active{transform:scale(.98);}
.btn .ico{font-size:1.1em;}
.btn-sm{padding:8px 16px;font-size:.875rem;min-height:38px;}
.btn-md{padding:12px 24px;font-size:1rem;min-height:46px;}
.btn-lg{padding:16px 30px;font-size:1.0625rem;min-height:56px;}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-brand);}
.btn-secondary{background:var(--color-secondary);color:#fff;box-shadow:0 12px 30px rgba(43,124,119,.26);}
.btn-outline{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);}
/* Verde OFICIAL do WhatsApp (#25D366) com texto BRANCO — os dois escolhidos
   pelo Marco em 21/08.
   NÃO "corrigir" para texto escuro nem escurecer o fundo: branco sobre este
   verde dá 1,98:1 e reprova o WCAG AA. O número foi medido e apresentado a
   ele, que optou pelo branco mesmo assim. Foi por causa desse contraste que o
   botão vinha antes num verde escurecido (#0F7B3F, 5,35:1) — a troca é
   deliberada, em favor da cor de marca. O ícone acompanha (currentColor).
   O hover escurece um degrau, o que de quebra melhora um pouco a leitura.
   Sombra neutra escura, não verde: glow da própria cor lê como borrão. */
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 12px 30px -12px rgba(12,26,16,.45);}
.btn-whatsapp:hover{background:#1FBE58;color:#fff;}
.btn-block{width:100%;}

/* ---- cards ---- */
.card{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6);overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.card-interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.card-accent::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--gradient-brand);}

/* ---- tags / badges ---- */
/* .tag virou <button> (era <span> com onclick, inoperável por teclado):
   font/appearance precisam ser zerados para o visual não mudar. */
.tag{font-family:inherit;appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:.875rem;font-weight:600;color:var(--text-body);background:#fff;border:1.5px solid var(--border-default);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--dur) var(--ease-out);user-select:none;}
.tag:hover{border-color:var(--color-primary);}
.tag.active{color:#fff;background:var(--color-primary);border-color:var(--color-primary);}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;font-size:.78rem;font-weight:700;letter-spacing:.03em;border-radius:var(--radius-pill);white-space:nowrap;}
.badge-sm{padding:3px 9px;font-size:.7rem;}
.badge-azul{background:var(--azul-50);color:var(--azul-700);}
.badge-teal{background:var(--teal-50);color:var(--teal-700);}

/* ---- tiles de ícone ---- */
.itile{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);flex-shrink:0;}
.itile-azul{background:var(--azul-50);color:var(--color-primary);}
.itile-teal{background:var(--teal-50);color:var(--color-secondary);}

/* ---- pular para o conteúdo ----
   Primeira parada de tabulação da página: quem usa teclado ou leitor de tela
   pula os ~27 links de navegação e vai direto ao conteúdo. Invisível ao mouse,
   aparece só ao receber foco. */
.skip-link{position:absolute;left:8px;top:-60px;z-index:100;padding:12px 20px;background:var(--color-primary);color:#fff;font-weight:700;font-size:.9375rem;border-radius:0 0 var(--radius-md) var(--radius-md);text-decoration:none;transition:top .16s ease;}
.skip-link:focus{top:0;}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle);}
/* A .wrap trava em 1200px com gutter de 48px, então a barra tem 1104px FIXOS em
   qualquer desktop — aumentar a viewport não dá espaço nenhum. O conteúdo pedia
   ~1156px: o logo a 40px valia 241px (o arquivo é 500x83) e os 6 itens do menu
   somavam ~723px, e como o nav tem white-space:nowrap todo o excesso caía no CTA,
   que era espremido até quebrar "Acessar exame" em duas linhas. Logo a 36px, meia
   folga no padding do menu e gap de 12px devolvem ~68px e a barra passa a caber. */
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:76px;}
/* flex-shrink:0 protege a marca: sem ele o logo absorve todo o excesso da barra
   e distorce (object-fit padrão é fill), em vez de estourar de forma visível. */
.brand-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.brand-logo img{height:36px;width:auto;flex-shrink:0;}
.desktop-nav{display:flex;align-items:center;gap:2px;align-self:stretch;}
.desktop-nav a{padding:9px 5px;font-size:.875rem;font-weight:600;border-radius:var(--radius-sm);color:var(--text-body);text-decoration:none;white-space:nowrap;transition:background var(--dur),color var(--dur);}
.desktop-nav a:hover{color:var(--color-primary);background:var(--azul-50);}
/* flex-shrink:0 + nowrap: rede de segurança para o rótulo nunca mais quebrar em
   duas linhas caso o menu ganhe outro item no futuro. */
.header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.header-cta .btn{white-space:nowrap;}
.menu-btn{display:none;width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:#fff;color:var(--color-primary);font-size:22px;align-items:center;justify-content:center;cursor:pointer;}
/* max-height + scroll: com uma categoria aberta o menu passa da altura da tela e,
   como o header é sticky, o fim do menu (CTA do WhatsApp) ficaria inalcançável. */
/* Abertura/fechamento suaves: grid-template-rows 0fr→1fr anima a altura até o
   conteúdo real (o display:none/flex antigo era abrupto). Respiro/scroll no wrapper
   interno, que também recorta ao colapsar. Mesma técnica do acordeão do site. */
/* visibility:hidden tira os ~27 links do menu fechado da ordem de tabulação —
   opacity:0 sozinho os mantinha focáveis, e quem navega por teclado percorria
   dezenas de paradas invisíveis antes de chegar ao conteúdo. O delay na
   visibility deixa a animação de fechamento terminar antes de sumir.
   Mesma técnica já usada no acordeão do site. */
.mobile-nav{display:grid;grid-template-rows:minmax(0,0fr);opacity:0;visibility:hidden;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1),opacity .24s ease,visibility 0s linear .34s;}
.mobile-nav-in{min-height:0;overflow-y:auto;max-height:75vh;display:flex;flex-direction:column;gap:4px;padding:10px var(--gutter) 20px;}
.mobile-nav.open{grid-template-rows:minmax(0,1fr);opacity:1;visibility:visible;border-top:1px solid var(--border-subtle);transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1),opacity .24s ease,visibility 0s;}
@media(prefers-reduced-motion:reduce){.mobile-nav{transition:none;}}
.mobile-nav a{padding:11px 12px;font-weight:600;border-radius:var(--radius-sm);color:var(--text-body);text-decoration:none;}

/* ---- submenu de exames (desktop) ---- */
/* o wrapper ocupa toda a altura do header: sem vão entre o botão e o menu (hover contínuo) */
.sub-wrap{position:relative;align-self:stretch;display:flex;align-items:center;}
.sub-wrap>a{display:inline-flex;align-items:center;gap:6px;}
.sub-wrap>a .cv{width:13px;height:13px;transition:transform .18s var(--ease-out);}
.sub-wrap:hover>a .cv,.sub-wrap:focus-within>a .cv{transform:rotate(180deg);}
/* Escopado em .sub-wrap: solto, o .sub pegava também o <p class="sub"> do card do
   hero e o escondia (display:none), porque .hero-card .sub não redefine display. */
.sub-wrap .sub{display:none;position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--border-subtle);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lg);padding:8px;flex-direction:column;gap:1px;z-index:70;}
.sub-wrap:hover .sub,.sub-wrap:focus-within .sub{display:flex;}
.sub a{padding:10px 12px;font-size:.875rem;font-weight:600;color:var(--text-body);border-radius:var(--radius-sm);white-space:nowrap;text-decoration:none;}
.sub a:hover{background:var(--azul-50);color:var(--color-primary);}
.sub a.all{color:var(--color-primary);border-bottom:1px solid var(--border-subtle);border-radius:var(--radius-sm) var(--radius-sm) 0 0;margin-bottom:5px;padding-bottom:11px;}
/* o último dropdown abre alinhado à direita p/ não estourar a tela */
.sub-wrap:last-of-type .sub{left:auto;right:0;}

/* ---- submenu de exames (mobile) ---- */
.m-sub summary{padding:11px 12px;font-weight:600;color:var(--text-body);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;border-radius:var(--radius-sm);}
.m-sub summary::-webkit-details-marker{display:none;}
.m-sub summary::after{content:"+";color:var(--color-primary);font-weight:800;}
.m-sub[open] summary::after{content:"–";}
.m-list{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 10px;border-left:2px solid var(--azul-50);margin-left:12px;}
.m-list a{font-size:.88rem;font-weight:500;padding:9px 12px;color:var(--text-body);text-decoration:none;border-radius:var(--radius-sm);}
.m-list a:hover{background:var(--azul-50);color:var(--color-primary);}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:var(--gradient-brand-soft);}
.hero .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(3rem,7vw,6rem);}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--text-strong);}
.hero .lead{margin:22px 0 0;font-size:var(--fs-lead);line-height:1.45;color:var(--text-body);max-width:520px;}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
/* trust na dobra: principais convênios (mesmo card da seção de convênios, menor) */
/* .hero-conv* saiu em 20/08: o bloco de convênios do hero da home foi excluído
   a pedido do Marco (junto com o selo do Google do hero). O .conv-card das
   OUTRAS superfícies vive em partials/convenios.php e não passava por aqui. */
/* imagem circular da hero (webp com fundo transparente): sem moldura quadrada;
   drop-shadow acompanha o recorte do círculo (box-shadow criaria um retângulo). */
.hero-media{display:flex;justify-content:center;align-items:center;}
.hero-media img{width:100%;max-width:560px;height:auto;display:block;filter:drop-shadow(0 22px 46px rgba(31,56,73,.26));}

/* ---- grids de conteúdo ---- */
/* min(Xpx,100%): sem isso a coluna mantém o mínimo fixo em telas muito estreitas
   (~320px) e os cards são cortados, sem scroll para ver o resto (overflow-x:hidden). */
.grid-exams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;}
.grid-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:18px;margin-top:44px;}

/* ---- slider (seção Sobre) ----
   Scroll-snap nativo: o arrasto/swipe é do navegador; o JS só cuida das setas
   e das bolinhas. Zero biblioteca. */
.slider{margin-top:44px;}
.slider-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px;margin:-4px;}
.slider-track::-webkit-scrollbar{display:none;}
.slider-track>.card{scroll-snap-align:start;}
.slider-track:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px;border-radius:var(--radius-sm);}
@media (max-width:980px){.slider-track{grid-auto-columns:calc((100% - 20px)/2);}}
@media (max-width:620px){.slider-track{grid-auto-columns:100%;}}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px;}
.slider-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border-default);background:#fff;color:var(--color-primary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--dur),background var(--dur),opacity var(--dur);}
.slider-btn svg{width:18px;height:18px;}
.slider-btn:hover:not(:disabled){border-color:var(--color-primary);background:var(--azul-50);}
.slider-btn:disabled{opacity:.35;cursor:default;}
.slider-btn:focus-visible,.slider-dot:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
/* min-width:0 + wrap: como item de flex, .slider-dots não encolhe abaixo do
   conteúdo (min-width:auto) e uma fila longa estoura a tela — 18 bolinhas do
   mobile dos depoimentos dariam ~437px em 375px. Com poucas bolinhas é no-op. */
.slider-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;min-width:0;}
/* O botão tem 26px de área de toque; a bolinha visível é o ::before, de 9px.
   Antes o botão INTEIRO tinha 9px — abaixo do mínimo de 24x24 do WCAG 2.5.8 e
   difícil de acertar com o dedo. Separar alvo de toque da forma desenhada
   resolve sem mudar o visual. O gap caiu de 8px para 2px porque agora o
   respiro entre bolinhas vem do padding do próprio botão. */
.slider-dot{width:26px;height:26px;border:none;padding:0;background:none;cursor:pointer;display:grid;place-items:center;}
.slider-dot::before{content:"";width:9px;height:9px;border-radius:999px;background:var(--gray-300);transition:background var(--dur),width var(--dur) var(--ease-out);}
.slider-dot.active::before{background:var(--color-primary);width:24px;}
.slider-dot:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:999px;}
@media (prefers-reduced-motion:reduce){.slider-track{scroll-behavior:auto;}.slider-dot{transition:none;}}

/* diferenciais card */
.dif .itile{width:52px;height:52px;font-size:26px;margin-bottom:16px;}
.dif h3{margin:0 0 7px;font-size:1.15rem;font-weight:600;color:var(--text-strong);}
.dif p{margin:0;color:var(--text-muted);line-height:1.55;font-size:.95rem;}

/* exames */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 32px;}
/* ---- cards com foto: sem borda (21/08) --------------------------------------
   Pedido do Marco. O motivo é visual e concreto: a foto sangra até a caixa de
   padding, mas a borda de 1px fica POR FORA dela — o resultado é um fio claro
   contornando a imagem, que lê como moldura dupla junto com o raio do card.
   Com border:0 a foto encosta na borda do card e o recorte fica limpo.

   `border:0`, e não `border-color:transparent`: com a borda transparente
   sobraria 1px do fundo branco do card em volta da foto — trocaria um fio
   cinza por um fio branco. Zerar de vez faz a imagem ir até a aresta.

   Sem a borda, a SOMBRA vira a única definição do card — e a --shadow-sm
   herdada não dava conta: nas páginas de categoria estes cards são brancos
   sobre fundo BRANCO (medido), e com 6%/8% de opacidade eles dissolviam na
   página. A sombra abaixo é mais espalhada e um degrau mais densa: continua
   discreta sobre o cinza-claro da home e do /exames, e sustenta o card sobre
   o branco. O hover sobe de elevação, como antes.
   A regra de hover que pintava a borda (.card-interactive) vira no-op aqui,
   sem precisar de exceção.

   .contato-mapa entra na lista mesmo sem ter img: o mapa é um iframe que
   sangra até a aresta com padding:0, então a borda o abraçava exatamente como
   abraçava as fotos — é a mesma patologia com outra tag. */
.card.exam,.card.doc,.card.esp-mini,.card.contato-mapa{
  border:0;
  box-shadow:0 1px 3px rgba(27,45,32,.07),0 10px 26px -10px rgba(27,45,32,.18);
}
.card-interactive.exam:hover,.card-interactive.doc:hover,.card-interactive.esp-mini:hover{
  box-shadow:0 2px 6px rgba(27,45,32,.09),0 20px 40px -14px rgba(27,45,32,.26);
}
.exam{display:flex;flex-direction:column;}
/* foto sangra até a borda do card: puxa o padding do .card para fora.
   max-width:none é obrigatório — o img{max-width:100%} global grampearia a
   largura na caixa de conteúdo e a sangria não aconteceria. */
/* height:auto é obrigatório: com a largura vinda do CSS e sem altura declarada,
   o atributo height="630" do HTML vira valor usado e a foto estica p/ 630px. */
.exam .foto{width:calc(100% + var(--space-6) * 2);max-width:none;height:auto;margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) 16px;aspect-ratio:1200 / 630;object-fit:cover;background:var(--surface-page);}
.exam h3{margin:0 0 6px;font-size:1.1rem;font-weight:600;color:var(--text-strong);}
.exam p{margin:0 0 16px;color:var(--text-muted);line-height:1.5;font-size:.9rem;flex-grow:1;}
.exam .go{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:var(--color-primary);text-decoration:none;}
.exam .go .ico{font-size:15px;}

/* alert */
.alert{display:flex;gap:13px;align-items:flex-start;border-radius:var(--radius-md);padding:15px 18px;margin-top:30px;}
.alert-care{background:var(--teal-50);border:1px solid var(--teal-200);}
.alert .ai{color:var(--teal-700);flex-shrink:0;margin-top:1px;font-size:20px;}
.alert .at{font-weight:700;color:var(--teal-700);margin-bottom:3px;font-size:.95rem;}
.alert .ad{color:var(--text-body);font-size:.9rem;line-height:1.55;}

/* convênios */
.chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px;}
/* entrada escalonada: o app.js só arma (.chips-prep) se houver IntersectionObserver
   e o visitante não preferir movimento reduzido — sem JS, nada fica invisível */
.chips-prep .chip{opacity:0;transform:translateY(14px);}
.chips-in .chip{animation:chipIn .5s var(--ease-out) forwards;}
.chips-in .chip:nth-child(2){animation-delay:.07s;}
.chips-in .chip:nth-child(3){animation-delay:.14s;}
.chips-in .chip:nth-child(4){animation-delay:.21s;}
.chips-in .chip:nth-child(5){animation-delay:.28s;}
.chips-in .chip:nth-child(6){animation-delay:.35s;}
@keyframes chipIn{to{opacity:1;transform:none;}}
.chip{display:flex;align-items:center;gap:10px;padding:16px 26px;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);font-weight:700;color:var(--text-strong);transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur);}
.chip:hover{transform:translateY(-3px);border-color:var(--azul-200);box-shadow:var(--shadow-md);}
.chip .ico{color:var(--color-secondary);font-size:20px;transition:transform var(--dur) var(--ease-out);}
.chip:hover .ico{transform:scale(1.18) rotate(-6deg);}
@media (prefers-reduced-motion:reduce){.chip,.chip .ico{transition:none;}.chip:hover{transform:none;}.chip:hover .ico{transform:none;}}
.parceiros{text-align:center;margin-top:30px;color:var(--text-muted);font-size:.9rem;max-width:760px;margin-inline:auto;}
/* convênios & parcerias — cards com logos */
#convenios{background:var(--verde-50);}
.conv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px;margin-top:40px;}
/* .conv-card é a grade de LOGOS de convênio — hoje sem uso (as páginas usam
   .conv-chip, textual), mas volta no dia em que os arquivos de logo chegarem.
   Já nasce sem borda: com `.conv-card img` logo abaixo, ela é por definição um
   card COM imagem, e manter a borda aqui reintroduziria em silêncio o fio que
   saiu de todos os outros em 21/08. A sombra é a mesma dos cards de foto. */
.conv-card{display:flex;align-items:center;justify-content:center;background:#fff;border:0;border-radius:var(--radius-md);padding:18px;min-height:104px;box-shadow:0 1px 3px rgba(27,45,32,.07),0 10px 26px -10px rgba(27,45,32,.18);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur);}
.conv-card:hover{transform:translateY(-3px);box-shadow:0 2px 6px rgba(27,45,32,.09),0 20px 40px -14px rgba(27,45,32,.26);}
.conv-card img{max-width:100%;max-height:60px;width:auto;height:auto;object-fit:contain;}
.conv-sep{height:1px;background:var(--border-subtle);border:0;margin:44px auto 0;max-width:960px;}
.conv-parceiros-lead{text-align:center;margin:30px auto 24px;color:var(--text-muted);font-size:.95rem;max-width:720px;}
/* parceiros: 4 por linha no desktop, 2 no mobile */
.conv-grid--sm{grid-template-columns:repeat(4,1fr);gap:14px;margin-top:0;}
.conv-grid--sm .conv-card{min-height:96px;padding:16px;}
.conv-grid--sm .conv-card img{max-height:52px;}
@media (max-width:640px){.conv-grid--sm{grid-template-columns:repeat(2,1fr);}}
@media (prefers-reduced-motion:reduce){.conv-card{transition:none;}.conv-card:hover{transform:none;}}

/* corpo clínico */
/* align-items:center + sem a div .tags vazia (era um vão reservado de 20px em 14
   dos 16 cards): o bloco de texto fica verticalmente equilibrado com o avatar. */
/* gap/padding aparados (era 16/24) p/ devolver ao nome os 16px que o avatar
   de 72px tomou: sem isso "Dr. Marcus Vinicius de Godoy Bueno Caldas Mesquita"
   (415px de nome) vai p/ 3 linhas e cria uma 3ª altura de card no grid */
.doc{display:flex;gap:14px;align-items:center;padding:22px 20px;}
/* abaixo de ~420px o card fica com ~335px e o nome volta a espremer; 16px de
   padding devolve a folga e reproduz exatamente a quebra de linha do layout antigo */
@media (max-width:480px){.doc{padding:22px 16px;}}
/* foto de perfil (placeholder perfil-medico.webp por enquanto — mesma p/ todos) */
/* 72px = a altura exata do bloco de texto ao lado, então a foto alinha com ele
   e o card NÃO cresce (quem manda na altura é a .meta). Acima disso o card estica.
   Radius: --radius-md (12px); o --radius-lg dos cards (18px) arredondaria demais. */
.doc .av{flex-shrink:0;width:72px;height:72px;border-radius:var(--radius-md);object-fit:cover;background:var(--azul-50);box-shadow:0 0 0 4px var(--azul-50);}
.doc .meta{min-width:0;}
/* Ritmo repintado em 20/08 (pedido do Marco): a especialidade desce de voz
   (verde 600 -> cinza #878f85, peso 500) e ganha entrelinha de leitura; os
   espaços entre nome, especialidade e registro sobem para 5/6px.
   AVISO: #878f85 rende ~3,5:1 sobre branco — abaixo do AA para texto pequeno.
   Cor escolhida explicitamente pelo cliente. */
.doc h3{margin:0 0 5px;font-size:1.02rem;font-weight:600;color:var(--text-strong);line-height:1.35;}
.doc .spec{margin:0;font-size:.85rem;color:#878f85;font-weight:500;line-height:1.5;}
.doc .reg{margin:6px 0 0;font-size:.8rem;color:var(--text-muted);letter-spacing:.01em;line-height:1.45;}
.docs-note{margin-top:26px;text-align:center;color:var(--text-muted);font-size:.85rem;}
/* card de médico como link (páginas do corpo clínico) */
a.doc{text-decoration:none;color:inherit;align-items:flex-start;}
.doc .meta{display:flex;flex-direction:column;}
.doc .nuc{margin:6px 0 0;font-size:.78rem;font-weight:600;color:var(--color-primary);}
.doc .doc-cta{margin-top:12px;display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:700;color:var(--color-primary);transition:gap var(--dur) var(--ease-out);}
a.doc:hover .doc-cta{gap:9px;}

/* O accordion .acc saiu em 20/08 junto com a FAQ da home — era o único uso.
   As FAQs das páginas internas usam o .ex-acc (partials/acordeao-css.php). */

/* contato */
.contato{background:var(--gradient-brand-soft);}
/* stretch, não start (ajuste de alinhamento 20/08): com start a coluna do
   mapa terminava ~75px abaixo da coluna de contato e o pé da seção ficava
   escalonado. Com stretch + o iframe flexível (abaixo), o mapa absorve a
   diferença e as duas colunas fecham na mesma linha. */
.contato .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:stretch;}
/* O e-mail é um token longo sem espaço. Item de grid tem min-width:auto, então
   sem isto ele estica a coluna além da viewport e cria scroll horizontal no mobile
   (mesmo fix já aplicado na página /agendamento). */
.contato .grid>*{min-width:0;}
.cinfo .val{overflow-wrap:anywhere;}
/* Card de CTA no lugar do antigo formulário da home: o formulário agora é único,
   em /agendamento, e todos os CTAs do site apontam para lá. */
/* Repintado em 20/08: mesmo visual do CTA das páginas internas
   (partials/cta-agendamento.php) — card verde escuro, título em Playfair
   branco, botão dourado. Branco sobre #235a31 dá 8,1:1. A borda clara
   translúcida substitui a do .card, que sumiria no fundo escuro.
   As regras de p.alt sairam junto com o "Prefere ligar?" (20/08). */
/* variante do outline para fundo ESCURO: o .btn-outline padrão é verde sobre
   claro e sumiria no card verde. Usada pelo segundo CTA do card de contato. */
.btn-outline-claro{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);}
.btn-outline-claro:hover{background:rgba(255,255,255,.14);color:#fff;}
.contato-cta .btn+.btn{margin-top:10px;}
.contato-cta{padding:var(--space-7) clamp(1.25rem,3vw,2rem);text-align:center;background:var(--verde-700);border-color:rgba(255,255,255,.14);box-shadow:0 22px 48px -22px rgba(12,26,16,.55);}
.contato-cta h3{font-family:var(--font-display),Georgia,serif;font-size:1.45rem;font-weight:600;letter-spacing:-.01em;color:#fff;margin:0 0 12px;}
.contato-cta p{color:#dfeadf;line-height:1.6;margin:0 0 24px;}
/* o anel de foco padrão dos botões é verde-600 — invisível sobre o card verde */
.contato-cta .btn:focus-visible{outline-color:#fff;}
/* coluna direita: CTA + mapa empilhados (o mapa preenche o vão que o card
   sozinho deixava ao lado da coluna de contatos) */
.contato-right{display:flex;flex-direction:column;gap:20px;min-width:0;}
.contato-right{height:100%;}
.contato-mapa{padding:0;display:flex;flex-direction:column;flex:1;}
/* height vira PISO (min-height) + flex:1: o mapa estica até o pé da coluna
   vizinha em vez de deixar um degrau — parte do ajuste de alinhamento 20/08. */
.contato-mapa iframe{width:100%;min-height:290px;flex:1;border:0;display:block;}
.contato-mapa .mapa-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;font-size:.875rem;font-weight:700;color:var(--color-primary);text-decoration:none;border-top:1px solid var(--border-subtle);transition:background var(--dur);}
.contato-mapa .mapa-link:hover{background:var(--azul-50);}
.contato-mapa .mapa-link .ico{font-size:15px;}
.cinfo{display:flex;flex-direction:column;gap:16px;margin-top:32px;}
.cinfo .row{display:flex;gap:14px;align-items:center;}
/* fio discreto entre os canais de contato */
.cinfo .row+.row{border-top:1px solid var(--border-subtle);padding-top:16px;}
.cinfo .row .itile{width:44px;height:44px;background:var(--color-primary);color:#fff;box-shadow:var(--shadow-xs);font-size:20px;}
.cinfo .lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);}
/* Contato em cinza, não em verde: são dado, não chamada. O verde ficava
   competindo com o botão de envio, que é a ação de verdade da página. */
.cinfo .val{font-weight:600;color:var(--text-body);}
.cinfo a.val{text-decoration:none;}
.cinfo a.val:hover{color:var(--ouro-600);text-decoration:underline;text-underline-offset:3px;}
.hours{background:#fff;border-radius:var(--radius-md);padding:18px;box-shadow:var(--shadow-xs);}
/* fios entre o título e cada linha de horário (card é branco: cinza sutil) */
.hours .lbl{margin-bottom:0;padding-bottom:10px;border-bottom:1px solid var(--border-subtle);}
.hours .hr{display:flex;justify-content:space-between;font-size:.92rem;padding:9px 0;color:var(--text-body);}
.hours .hr+.hr{border-top:1px solid var(--border-subtle);}
.hours .hr:last-child{padding-bottom:0;}
.hours .hr strong{color:var(--text-strong);}
.form{display:grid;gap:16px;}
.form h3{font-size:1.25rem;font-weight:600;color:var(--text-strong);}
.field{display:block;}
.field .flabel{display:block;font-size:.875rem;font-weight:600;color:var(--text-body);margin-bottom:7px;}
.field .flabel .req{color:var(--danger);}
/* borda especializada aqui em vez de escurecer --border-default: o token global
   também pinta .tag e .slider-btn, e mexer nele mudaria o visual dos chips e do
   carrossel. #8a94a1 dá 3,07:1 sobre branco e cumpre o mínimo de 3:1 do WCAG
   1.4.11 para contorno de componente — o #c6cdd6 anterior dava 1,60:1 e o campo
   praticamente não tinha limite visível. */
/* Campos repintados em 20/08 (pedido do Marco):
   · a borda era #8a94a1 — um azul-acinzentado ESCURO e de fora da escala do
     site. Desceu para o gray-400 da própria paleta: visivelmente mais leve,
     esverdeado como o resto da página, e ainda com ~2,5:1 de contraste para
     o limite do campo não sumir (gray-300 seria bonito, mas 1,6:1 apaga a
     caixa para quem enxerga pouco);
   · o texto era var(--text-strong) — que NESTA marca é o verde 500 (a escala
     de cinza termina em verde de propósito). Dentro da lista nativa do
     <select> isso pintava opção e grupo de VERDE. Aqui vira o cinza escuro
     REAL da escala (gray-800), com option/optgroup declarados também, porque
     a lista nativa não herda tudo do select em todo navegador. */
.field input,.field textarea,.field select{width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem;color:var(--gray-800);background:#fff;border:1.5px solid var(--gray-400);border-radius:var(--radius-md);padding:13px 15px;outline:none;transition:border-color var(--dur),box-shadow var(--dur);}
/* foco em CINZA, não em verde (pedido 20/08): escurece dois degraus + anel
   neutro — o degrau de 400→600 dá os 3:1 de mudança que o WCAG pede. */
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gray-600);box-shadow:0 0 0 4px rgba(107,120,105,.18);}
.field textarea{resize:vertical;line-height:1.5;min-height:104px;}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7869' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;}
.field select option{color:var(--gray-800);}
.field select optgroup{color:var(--gray-700);font-style:normal;font-weight:700;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.check{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-body);}
.form-ok{text-align:center;padding:30px 10px;}
.form-ok .itile{width:64px;height:64px;background:var(--teal-50);color:var(--color-secondary);margin:0 auto 16px;font-size:32px;}

/* footer */
/* O rodapé (e o botão flutuante) agora vivem em partials/footer.php, com estilo
   próprio — a home passou a usar o mesmo arquivo das páginas internas. */

/* responsivo */
/* O .wrap trava em 1200px, então a barra dispõe de 1104px de conteúdo em QUALQUER
   desktop. O menu (6 itens) + logo + CTA não cabem abaixo disso: vira hambúrguer. */
@media (max-width:1199px){
  .desktop-nav{display:none;}
  .menu-btn{display:inline-flex;}
}
@media (max-width:900px){
  /* alvo de toque de 24px (WCAG 2.5.8) nos links pequenos de navegação */
  .ex-crumbs a,.exl-crumbs a,.exc-crumbs a,.cc-crumbs a,.sb-crumbs a,.ag-crumbs a,.pol-crumbs a,.pol-sumario a{display:inline-flex;align-items:center;min-height:24px;}
  .header-cta .btn{display:none;}
  .hero .grid,.contato .grid{grid-template-columns:1fr;}
  .hero-media img{max-width:420px;}
}
@media (max-width:760px){
  .two{grid-template-columns:1fr;}
}

/* ---- depoimentos (avaliações reais do Google) ---- */
/* --depo-star fica escopado: âmbar de estrela não é token de marca (--warning é status, não paleta) */
#depoimentos{--depo-star:#d99a2b;}
.depo-stars{color:var(--depo-star);letter-spacing:.1em;line-height:1;}
.depo-nota{display:inline-flex;align-items:center;gap:10px;margin:var(--space-4) 0 0;padding:9px 18px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);box-shadow:var(--shadow-xs);}
.depo-nota b{font-size:1.0625rem;font-weight:800;color:var(--text-strong);line-height:1;}
.depo-nota .depo-stars{font-size:.875rem;}
.depo-nota span:last-child{font-size:.8125rem;color:var(--text-muted);line-height:1.3;text-align:left;}
/* flex-column + flex:1 no texto = o rodapé do card ancora embaixo mesmo com citações de tamanhos diferentes */
.depo{display:flex;flex-direction:column;gap:14px;}
.depo .depo-stars{font-size:.9375rem;}
.depo-txt{margin:0;flex:1;font-size:.9375rem;line-height:1.6;color:var(--text-body);}
.depo-who{display:flex;align-items:center;gap:12px;padding-top:15px;border-top:1px solid var(--border-subtle);}
.depo-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--surface-brand-soft);color:var(--azul-700);font-size:.75rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
.depo-nome{font-size:.875rem;font-weight:700;color:var(--text-strong);}
.depo-link{margin:26px 0 0;text-align:center;}
.depo-link a{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:700;color:var(--text-link);text-decoration:none;}
.depo-link a:hover{text-decoration:underline;}
@media (max-width:520px){
  .depo-nota{flex-wrap:wrap;justify-content:center;gap:8px;}
}

/* ---- selo de avaliação do Google: prova social na dobra (home + exame) ---- */
.gbadge{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:9px 15px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);box-shadow:var(--shadow-xs);text-decoration:none;color:var(--text-body);font-size:.85rem;line-height:1.2;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur);}
.gbadge:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.gbadge .st{color:#d99a2b;letter-spacing:.06em;font-size:.9rem;}
.gbadge b{color:var(--text-strong);font-weight:800;font-size:1rem;}

/* ---- resposta rápida (AEO) + selo de revisão no topo do corpo do exame ---- */
.ex-tldr{background:var(--surface-page);border:1px solid var(--border-subtle);border-left:4px solid #b8af6b;border-radius:var(--radius-lg);padding:18px 20px;margin:0 0 26px;}
/* 12px é o piso de legibilidade adotado no site; .6875rem dava 11px. */
.ex-tldr .ex-tldr-lbl{display:block;font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--color-secondary);margin-bottom:7px;}
.ex-tldr p{margin:0;font-size:1rem;line-height:1.6;color:var(--text-body);}
/* mesma moldura editorial do byline do blog: fios acima e abaixo dão ao selo
   de revisão um lugar próprio, sem caixa nem fundo (port 18/08). */
/* Cor e peso pedidos em 20/08: o selo desce de voz (verde 600 → cinza-verde 500)
   e deixa de competir com o conteúdo. #626b62 dá 5,5:1 sobre branco — passa AA.
   O ✓ segue verde de propósito: é a marca de confiança, o texto é só o crédito. */
.ex-revisor{display:flex;align-items:center;gap:8px;margin:0 0 26px;padding:12px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:500;color:#626b62;}
.ex-revisor .ex-rev-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--color-secondary);color:#fff;font-size:11px;font-weight:800;flex-shrink:0;}

/* ---- CTA contextual no meio do conteúdo clínico do exame ----
   Repintado em 20/08 (mock do Marco): card verde escuro + texto branco + botão
   dourado. O verde-500 dá 6,3:1 com branco (AA); a borda verde-700 segura a
   forma sobre fundos claros sem pedir sombra. */
.ex-cta-mid{margin:36px 0;padding:22px 26px;background:var(--verde-500);border:1px solid var(--verde-700);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;}
.ex-cta-mid p{margin:0;font-weight:700;color:#fff;font-size:1.02rem;line-height:1.35;}
.ex-cta-mid .btn{flex-shrink:0;}
/* o anel de foco padrão dos botões é verde-600 — invisível sobre o card verde */
.ex-cta-mid .btn:focus-visible{outline-color:#fff;}

/* ---- prova social nas páginas de exame (depoimentos reais do Google) ---- */
/* Topo 0: o padding-bottom do .ex-body acima já dá o respiro.
   Base var(--space-7): sem ela o card das avaliações encostava direto na faixa
   colorida do .ctaf (#f9f9f9) — este respiro branco separa os dois blocos. */
.ex-depo{max-width:var(--container);margin:0 auto;padding:var(--space-9) var(--gutter) var(--space-7);}
.ex-depo .in{background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:clamp(24px,4vw,40px);}
.ex-depo .head{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:22px;}
.ex-depo .head h2{margin:0;font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.01em;color:var(--text-strong);}
.ex-depo .nota{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--text-muted);}
.ex-depo .nota b{font-size:1.1rem;font-weight:800;color:var(--text-strong);}
.ex-depo .nota .st{color:#d99a2b;letter-spacing:.06em;}
.ex-depo .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ex-depo .q{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;}
.ex-depo .q .st{color:#d99a2b;font-size:.85rem;letter-spacing:.06em;}
.ex-depo .q p{margin:9px 0 0;font-size:.92rem;line-height:1.6;color:var(--text-body);flex:1;}
.ex-depo .q .who{margin-top:14px;padding-top:12px;border-top:1px solid var(--border-subtle);font-size:.82rem;font-weight:700;color:var(--text-strong);}
.ex-depo .glink{margin:18px 0 0;font-size:.85rem;}
.ex-depo .glink a{color:var(--text-link);font-weight:700;text-decoration:none;}
.ex-depo .glink a:hover{text-decoration:underline;}
@media (max-width:820px){.ex-depo .grid{grid-template-columns:1fr;}}
@media (max-width:560px){.ex-cta-mid{flex-direction:column;align-items:stretch;text-align:center;} .ex-cta-mid .btn{width:100%;}}

/* ==========================================================================
   REFINAMENTO — "Precisão Clínica"
   Camada aditiva de acabamento. Não altera estrutura, layout nem marca:
   trabalha tipografia óptica, profundidade em duas camadas, estados de
   interação e um detalhe de assinatura (marca de calibração nos eyebrows),
   que traduz a linguagem do diagnóstico por imagem sem literalidade.
   ========================================================================== */

/* ---- 1. Sombras em duas camadas -------------------------------------------
   Uma sombra só (blur grande) achata. Sombra de contato (curta, densa) +
   ambiente (longa, difusa) é como a luz se comporta de verdade — os 15 usos
   dos tokens no site ganham profundidade de uma vez. */
:root{
  --shadow-xs:0 1px 1px rgba(31,56,73,.05), 0 1px 3px rgba(31,56,73,.05);
  --shadow-sm:0 1px 2px rgba(31,56,73,.06), 0 3px 8px -2px rgba(31,56,73,.08);
  --shadow-md:0 2px 4px rgba(31,56,73,.06), 0 10px 24px -6px rgba(31,56,73,.12);
  --shadow-lg:0 4px 8px -2px rgba(31,56,73,.08), 0 22px 48px -12px rgba(31,56,73,.20);
  --shadow-brand:0 2px 6px rgba(45,83,111,.16), 0 16px 34px -10px rgba(45,83,111,.34);
}

/* ---- 2. Tipografia óptica --------------------------------------------------
   text-wrap:balance elimina a "palavra órfã" na última linha dos títulos —
   é o ajuste que mais aproxima um site de peça diagramada à mão. */
h1,h2,h3,.sh h2,.hero h1{text-wrap:balance;}
p,.lead,.sh .lead{text-wrap:pretty;}
/* compensação óptica: título grande pede tracking negativo; texto pequeno,
   levemente positivo — senão um parece frouxo e o outro, apertado. */
.hero h1{letter-spacing:-.025em;}
.sh h2{letter-spacing:-.019em;}
.eyebrow{font-feature-settings:"cv11";}
/* números alinhados em colunas (CRM, RQE, horários, avaliações) */
.doc .reg,.ccp-reg,.gbadge b,.depo-nota b,.medf .lst,.hero .facts{font-variant-numeric:tabular-nums;}

/* ---- 3. Assinatura: marca de calibração ------------------------------------
   Um tique curto antes de cada eyebrow, como as marcas de escala de um
   equipamento de imagem. display:inline-block de propósito: funciona mesmo
   nos eyebrows que trazem style="display:block" inline. */
.eyebrow::before{
  content:"";display:inline-block;width:22px;height:2px;border-radius:2px;
  background:currentColor;opacity:.65;vertical-align:middle;
  margin-right:10px;margin-top:-2px;
}

/* ---- 4. Cartões: material, não caixa --------------------------------------- */
.card{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);}
.card-interactive:hover{border-color:var(--azul-200);}
/* o card de exame ganha um fio de luz no topo ao passar o mouse */
.exam{position:relative;}
.exam::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;
  background:#b8af6b; /* dourado, igual aos cards do blog (port 18/08) */
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out);
}
.exam:hover::before{transform:scaleX(1);}

/* ---- 5. Estados de interação ----------------------------------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm);
}
/* O eyebrow tem uma marca de calibração (::before) que só faz sentido no rótulo
   solto. Virando chip, ela abre 32px de buraco antes do texto — some. */
.ex-hero .eyebrow::before,.exl-hero .eyebrow::before,.ag-hero .eyebrow::before{display:none;}
::selection{background:var(--azul-100);color:var(--text-strong);}
/* âncora interna parava DEBAIXO do header sticky; 90px = header + ar (port 18/08) */
/* UMA compensação só: o html já tem scroll-padding-top, e esta regra somava
   outros 90px — a âncora parava ~107px abaixo do cabeçalho no celular. */
/* fio de progresso de leitura — só age onde a página imprime a div e o script
   (artigo do blog, exame, área de atendimento) */
.read-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:#b8af6b;transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none;}
.btn:active{transform:translateY(1px) scale(.995);}
/* link de texto: sublinhado que respeita as descidas das letras */
.ex-sec a:not(.btn):not(.go),.ccp-body a:not(.btn){
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:var(--azul-200);transition:text-decoration-color var(--dur);
}
.ex-sec a:not(.btn):not(.go):hover,.ccp-body a:not(.btn):hover{text-decoration-color:var(--color-primary);}

/* ---- 6. Atmosfera da hero --------------------------------------------------
   Duas fontes de luz difusa sobre o gradiente, no lugar de cor chapada.
   Fica atrás do conteúdo e não intercepta clique. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 48% at 80% 14%, rgba(56,190,183,.15), transparent 70%),
    radial-gradient(48% 42% at 6% 88%, rgba(45,83,111,.10), transparent 72%);
}
.hero>*{position:relative;z-index:1;}

/* ---- 7. Respiro do rodapé e das faixas ------------------------------------- */
.medf .lst a{text-underline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .exam::before{transition:none;}
  .btn:active{transform:none;}
}

/* ==========================================================================
   MODERNIZAÇÃO v2 — navegação viva, correções de toque e contraste
   Continuação aditiva da camada "Precisão Clínica".
   ========================================================================== */

/* ---- 8. Cabeçalho ciente da rolagem (home) ---------------------------------
   app.js marca .is-stuck quando a página desce: o header ganha corpo
   (sombra + fundo mais opaco) sem mudar de altura — zero layout shift. */
.site-header{transition:box-shadow var(--dur) var(--ease-out),background var(--dur) var(--ease-out);}
.site-header.is-stuck{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--border-subtle),0 10px 30px -14px rgba(31,56,73,.16);}

/* ---- 9. Página ativa no menu -----------------------------------------------
   O item atual carrega a marca de calibração como sublinhado: a mesma
   assinatura dos eyebrows vira sinal de "você está aqui". */
.desktop-nav a[aria-current="page"],.desktop-nav .sub a[aria-current="page"]{
  color:var(--color-primary);
  background-image:linear-gradient(var(--color-secondary),var(--color-secondary));
  background-size:22px 2px;background-repeat:no-repeat;background-position:8px calc(100% - 3px);
}
.mobile-nav a[aria-current="page"]{color:var(--color-primary);background:var(--azul-50);}

/* ---- 10. Carrossel: alvos de toque honestos --------------------------------
   As setas encolhiam (flex-shrink) e viravam elipses; as bolinhas tinham
   9x9px de área útil. Agora: setas rígidas em 44px e bolinhas com halo de
   toque de 25px (padding + background-clip pinta só o miolo de 9px). */
.slider-btn{flex-shrink:0;min-width:44px;}
.slider-dots{gap:0;}
.slider-dot{box-sizing:content-box;width:9px;height:9px;padding:8px;background-clip:content-box;}
.slider-dot.active{width:24px;}

/* ---- 10b. Carrossel no celular: navegação numa linha só (pedido 20/08) ----
   Onze bolinhas de 25px + duas setas de 44px passam de 400px — em 375px a
   última bolinha caía para uma segunda linha. Três medidas, juntas:
     · bolinhas mais compactas (halo 5px = caixa de 18px). O alvo pequeno é
       aceitável AQUI porque as bolinhas são controle REDUNDANTE (aria-hidden,
       as setas de 44px fazem o mesmo) — exceção prevista pelo WCAG 2.5.8;
     · nowrap + overflow-x: se um slider um dia tiver bolinha demais, a fila
       rola por dentro em vez de quebrar linha ou empurrar a página;
     · centralização por margin:auto nas pontas, e NÃO por justify-content:
       center + overflow clipa as duas bordas e o início fica inalcançável —
       margens auto centralizam quando sobra espaço e zeram quando falta. */
@media (max-width:640px){
  .slider-nav{gap:10px;}
  .slider-dots{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;scrollbar-width:none;}
  .slider-dots::-webkit-scrollbar{display:none;}
  .slider-dot{width:8px;height:8px;padding:5px;flex-shrink:0;}
  .slider-dot::before{width:8px;height:8px;}
  .slider-dot.active{width:18px;}
  .slider-dot.active::before{width:18px;}
  .slider-dot:first-child{margin-left:auto;}
  .slider-dot:last-child{margin-right:auto;}
}

/* ---- 11. Menu mobile da home: botões de destaque de verdade ----------------
   .mobile-nav a (0,1,1) vencia .btn-* e os botões saíam cinza e quadrados. */
/* mesma cor oficial e mesmo texto branco da regra base (21/08) */
.mobile-nav a.btn-whatsapp{background:#25D366;color:#fff;border-radius:var(--radius-pill);text-align:center;justify-content:center;font-weight:700;}
.mobile-nav a.btn-primary{background:var(--color-primary);color:#fff;border-radius:var(--radius-pill);text-align:center;justify-content:center;font-weight:700;}

/* ---- 12. Microinterações de cartão e link ---------------------------------- */
.exam .foto{transition:transform .55s var(--ease-out);}
.exam:hover .foto{transform:scale(1.03);}
.go .ico{transition:transform var(--dur) var(--ease-out);}
.exam:hover .go .ico,.go:hover .ico{transform:translateX(4px);}
.gbadge{will-change:transform;}

@media (prefers-reduced-motion:reduce){
  .exam .foto,.go .ico{transition:none;}
  .exam:hover .foto{transform:none;}
}

/* ---- Título de listagem ----------------------------------------------------
   Introduzido para consertar a hierarquia de cabeçalhos: /consultas e as
   páginas de categoria iam do h1 direto para os h3 dos cards, sem o nível do
   meio. Quem navega por cabeçalho — leitor de tela, e o Google ao montar o
   outline da página — perdia a estrutura. Também dá respiro antes da grade. */
.sh-lista{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:600;
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-tight);
  color:var(--text-strong);
  margin:0 0 var(--space-4);
}

/* Título do formulário de agendamento: virou h2 para não pular nível de
   cabeçalho, mas continua com o tamanho de h3 — hierarquia é semântica,
   tamanho é visual, e os dois não precisam andar juntos. */
.form .form-titulo{font-size:clamp(1.4rem,2vw,1.625rem);font-weight:600;color:var(--text-strong);margin:0 0 var(--space-3);}

/* ---- Área de toque no mobile ------------------------------------------------
   Medição nos 6 breakpoints acusou CTAs de card com 23px de altura e links de
   rodapé com 19px. O mínimo do WCAG 2.5.8 é 24x24, e o dedo agradece 44px em
   elemento de conversão. Só cresce a área clicável — o texto não muda de
   tamanho nem a grade se mexe, porque o ganho vem de padding vertical dentro
   de espaço que já existia. */
@media (max-width:900px){
  /* alvo de toque de 24px (WCAG 2.5.8) nos links pequenos de navegação */
  .ex-crumbs a,.exl-crumbs a,.exc-crumbs a,.cc-crumbs a,.sb-crumbs a,.ag-crumbs a,.pol-crumbs a,.pol-sumario a{display:inline-flex;align-items:center;min-height:24px;}
  /* CTA do card de exame / de área de atendimento */
  .exam .go,
  .esp-card .go,
  .vercat{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  /* links em lista do rodapé: 9px de gap viram 4px + 6px de padding, mesma
     altura visual de bloco, alvo maior */
  /* .medf .lst / .medf .lst a saíram daqui em 19/08: o <style> do
     partials/footer.php declara as mesmas regras no MESMO breakpoint e vence
     por ordem de carregamento — estas nunca se aplicavam. O rodapé é servido
     também no blog, onde este styles.css nem entra: fonte única é o partial. */
  /* telefone/WhatsApp na coluna de contato das páginas internas */
  .val{min-height:32px;display:inline-flex;align-items:center;}
}

/* ==========================================================================
   ACENTO DOURADO — terceira cor da marca
   ==========================================================================
   O ouro entra como ACENTO: régua do eyebrow, ícone, botão de navegação,
   link de "ler mais". O verde continua sendo a cor da marca e a cor da ação
   principal (Agendar) — se o dourado tomasse o CTA, o site trocaria de dono.

   CONTRASTE — o motivo da escala ter dois tons:
   #afa75e sobre branco rende 2,47:1, e o WCAG AA pede 4,5:1 para texto.
   A mesma conta reprova texto branco sobre #afa75e. Então:
     · --ouro-400 (#afa75e, a cor exata da marca) = PREENCHIMENTO, ícone,
       régua, borda — tudo que é forma, não letra;
     · --ouro-600 (#afa75e desde 19/08) = TEXTO dourado.
   A olho nu leem como a mesma cor; para quem tem baixa visão, a diferença
   é entre ler e não ler.
   ========================================================================== */
:root{
  --ouro-50:#faf9f1;
  --ouro-100:#f3f0de;
  --ouro-200:#e3ddba;
  --ouro-300:#cec58e;
  --ouro-400:#afa75e;
  --ouro-500:#9a9250;
  /* 19/08: era #7d7642. O Marco pediu o tom claro em todo o site. Fica igual
     ao --ouro-700 de propósito — a escala dourada colapsou nos dois tons
     claros por decisão estética dele. Vale para TEXTO e ícone; o gradiente
     dos botões (--gradient-ouro) mantém o fecho escuro, senão perde o volume. */
  --ouro-600:#afa75e;
  /* 18/08: era #645e34; o Marco pediu o tom claro em tudo que não é botão.
     Os botões nunca usaram este token (gradiente com #7d7642), então a troca
     no valor atinge exatamente o alvo: links .go/.vercat no hover e o remap
     de ouro-600 das páginas de agendamento. */
  --ouro-700:#afa75e;
  --color-accent-warm:var(--ouro-400);
  --text-accent-warm:var(--ouro-600);
}

/* ---- Eyebrow: o rótulo pequeno acima do título ---- */
.eyebrow{color:var(--ouro-600);}
/* a marca de calibração ganha o ouro cheio: é forma, não texto */
.eyebrow::before{background:var(--ouro-400);opacity:1;}

/* ---- Botão de navegação em ouro ----
   Usado onde a ação é "ver mais", não "agendar". Texto quase preto porque
   branco sobre #afa75e reprovaria; escuro sobre ouro rende 5,2:1 e ainda
   deixa a peça com cara de selo, que combina com a Playfair. */
.btn-ouro{
  background:var(--ouro-400);
  color:#23281f;
  border:1.5px solid transparent;
  box-shadow:0 10px 26px -10px rgba(175,167,94,.55);
}
.btn-ouro:hover{background:var(--ouro-500);color:#1b1f18;transform:translateY(-2px);}
.btn-ouro .ico,.btn-ouro svg{color:currentColor;}

/* ---- Link "ver detalhes / ler artigo" ---- */
.exam .go,.esp-card .go,.vercat{color:var(--ouro-600);}
.exam .go:hover,.esp-card .go:hover,.vercat:hover{color:var(--ouro-700);}

/* ---- Tile de ícone em ouro ----
   Terceira variação, ao lado de .itile-azul e .itile-teal. O fundo é o tom
   mais claro da escala e o traço do ícone o tom de texto, que garante o
   contraste do desenho contra o fundo claro. */
.itile-ouro{background:var(--ouro-100);color:var(--ouro-600);}

/* ---- Detalhes ----
   Régua sob os títulos de seção e marcadores de lista viram ouro; a cor
   quente quebra o verde sem competir com ele. */
.sh h2::after{background:var(--ouro-400);}
.ex-tldr .ex-tldr-lbl{color:var(--ouro-600);}
.ex-sec ul li::marker{color:var(--ouro-400);}

/* ==========================================================================
   BOTÕES — degradê dourado com texto branco
   ==========================================================================
   Decisão do cliente (14/08). Fica registrado o número, porque quem mexer
   aqui depois precisa saber: branco sobre #afa75e rende 2,47:1, e o WCAG AA
   pede 4,5:1 para texto. O degradê fecha no #7d7642, que sozinho daria
   4,6:1 — então a metade inferior do botão é legível e a superior não.

   Se um dia isso precisar passar em auditoria (Google Ads de saúde audita
   destino, e o CFM olha material de clínica), a correção é UMA linha:
   trocar --gradient-ouro pela versão comentada logo abaixo, que mantém o
   ouro e passa em 4,6:1 no ponto mais claro.
   ========================================================================== */
:root{
  --gradient-ouro:linear-gradient(145deg,#bdb473 0%,#afa75e 42%,#7d7642 100%);
  --gradient-ouro-hover:linear-gradient(145deg,#afa75e 0%,#9a9250 42%,#6a6337 100%);
  /* Alternativa que passa no WCAG AA (branco sobre o ponto mais claro = 4,6:1):
     --gradient-ouro:linear-gradient(145deg,#7d7642 0%,#6f6a3a 55%,#5f5932 100%); */
  --sombra-ouro:0 10px 26px -10px rgba(125,118,66,.55);
}

/* Todo botão preenchido do site passa a usar o mesmo degradê: primário,
   secundário, o de navegação, o do cabeçalho e o do rodapé. Botão vazado
   (.btn-outline) continua vazado — é ele que dá hierarquia agora que os
   preenchidos ficaram todos iguais. */
.btn-primary,
.btn-secondary,
.btn-ouro{
  background:var(--gradient-ouro);
  color:#fff;
  border-color:transparent;
  box-shadow:var(--sombra-ouro);
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-ouro:hover{
  background:var(--gradient-ouro-hover);
  color:#fff;
  box-shadow:0 14px 32px -12px rgba(125,118,66,.6);
}
/* O ícone dentro do botão acompanha o texto */
.btn-primary .ico,.btn-secondary .ico,.btn-ouro .ico,
.btn-primary svg,.btn-secondary svg,.btn-ouro svg{color:currentColor;}

/* Foco visível: contorno verde escuro por fora do botão dourado, para o anel
   não sumir contra o próprio degradê. */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ouro:focus-visible{outline:2px solid var(--verde-600);outline-offset:3px;}