/* ==========================================================================
   Medicinarte Diagnósticos por Imagem — prévia de site (home)
   Fonte Manrope local + tokens do design system + componentes.
   ========================================================================== */

/* ---- 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');}

/* ---- Tokens ---- */
:root{
  --brand-azul-escuro:#2d536f;--brand-azul-claro:#36ACE2;--brand-verde-escuro:#2B7C77;--brand-verde-claro:#38BEB7;--brand-cinza:#8F8F8F;
  --azul-50:#eef6fb;--azul-100:#d6ebf6;--azul-200:#aed6ee;--azul-300:#7dbde3;--azul-400:#52a0d1;--azul-500:#2d536f;--azul-600:#2f688f;--azul-700:#285573;--azul-800:#22455c;--azul-900:#1c3849;
  --cyan-300:#7dd0f2;--cyan-400:#52bdea;--cyan-500:#36ACE2;--cyan-600:#2b8bb6;
  --teal-50:#e9f8f6;--teal-100:#cdefec;--teal-200:#9ce0da;--teal-300:#63cdc4;--teal-400:#38BEB7;--teal-500:#2fa39d;--teal-600:#2B7C77;--teal-700:#236360;--teal-800:#1d4f4c;
  --gray-0:#fff;--gray-25:#fbfcfd;--gray-50:#f5f7f9;--gray-100:#eef1f4;--gray-200:#dfe4ea;--gray-300:#c6cdd6;--gray-400:#a2abb6;--gray-500:#8F8F8F;--gray-600:#6b7280;--gray-700:#4b5563;--gray-800:#313842;--gray-900:#2d536f;
  --success:#2fa39d;--info:#36ACE2;--warning:#d99a2b;--danger:#d1495b;
  --color-primary:var(--azul-500);--color-primary-hover:var(--azul-600);--color-secondary:var(--teal-600);--color-accent:var(--cyan-500);
  /* --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:'Manrope',system-ui,sans-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(31,56,73,.06);--shadow-sm:0 2px 6px rgba(31,56,73,.08);--shadow-md:0 8px 24px rgba(31,56,73,.10);--shadow-lg:0 18px 44px rgba(31,56,73,.14);--shadow-brand:0 12px 30px rgba(45,83,111,.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;}

/* ---- 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;}
h1,h2,h3,h4{margin:0;}

/* ---- í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:800;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);}
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 12px 30px rgba(37,211,102,.28);}
.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{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:800;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{margin-top:32px;}
.hero-conv-lbl{display:block;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--text-muted);margin-bottom:12px;}
.hero-conv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:404px;}
.hero-conv-cards .conv-card{min-height:66px;padding:12px;border-radius:var(--radius-md);}
.hero-conv-cards .conv-card img{max-height:34px;}
/* 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:8px;flex-wrap:wrap;justify-content:center;min-width:0;}
.slider-dot{width:9px;height:9px;border-radius:999px;border:none;padding:0;background:var(--gray-300);cursor:pointer;transition:background var(--dur),width var(--dur) var(--ease-out);}
.slider-dot.active{background:var(--color-primary);width:24px;}
@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:700;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;}
.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:700;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:#eef6fb;}
.conv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px;margin-top:40px;}
.conv-card{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:18px;min-height:104px;box-shadow:var(--shadow-xs);transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur);}
.conv-card:hover{transform:translateY(-3px);border-color:var(--azul-200);box-shadow:var(--shadow-md);}
.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;}
.doc h3{margin:0 0 3px;font-size:1.02rem;font-weight:700;color:var(--text-strong);line-height:1.3;}
.doc .spec{margin:0;font-size:.85rem;color:var(--color-secondary);font-weight:600;}
.doc .reg{margin:5px 0 0;font-size:.8rem;color:var(--text-muted);letter-spacing:.01em;}
.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;}

/* FAQ accordion */
.acc{display:flex;flex-direction:column;gap:12px;margin-top:40px;}
.acc .item{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--dur);}
.acc .item.open{border-color:var(--azul-200);box-shadow:var(--shadow-sm);}
.acc .q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:1.02rem;font-weight:600;color:var(--text-strong);}
.acc .q .chev{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--azul-50);color:var(--color-primary);transition:all var(--dur);font-size:15px;}
.acc .item.open .q .chev{background:var(--color-primary);color:#fff;transform:rotate(180deg);}
.acc .a{max-height:0;opacity:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-out),opacity var(--dur);}
.acc .item.open .a{max-height:420px;opacity:1;}
.acc .a p{margin:0;padding:0 20px 20px;color:var(--text-muted);line-height:1.6;font-size:.95rem;}

/* contato */
.contato{background:var(--gradient-brand-soft);}
.contato .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
/* 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á. */
.contato-cta{padding:var(--space-7) clamp(1.25rem,3vw,2rem);text-align:center;}
.contato-cta h3{font-size:1.35rem;font-weight:800;color:var(--text-strong);margin:0 0 12px;}
.contato-cta p{color:var(--text-body);line-height:1.6;margin:0 0 24px;}
.contato-cta p.alt{margin:14px 0 0;font-size:.875rem;color:var(--text-muted);}
.contato-cta p.alt a{color:var(--color-primary);font-weight:600;text-decoration:none;}
.contato-cta p.alt a:hover{text-decoration:underline;}
/* 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-mapa{padding:0;display:flex;flex-direction:column;}
.contato-mapa iframe{width:100%;height:290px;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(--azul-200);padding-top:16px;}
.cinfo .row .itile{width:44px;height:44px;background:#fff;color:var(--color-primary);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);}
.cinfo .val{font-weight:600;color:var(--text-strong);}
.cinfo a.val{text-decoration:none;}
.cinfo a.val:hover{color:var(--color-primary);}
.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:800;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. */
.field input,.field textarea,.field select{width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem;color:var(--text-strong);background:#fff;border:1.5px solid #8a94a1;border-radius:var(--radius-md);padding:13px 15px;outline:none;transition:border-color var(--dur),box-shadow var(--dur);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--focus-ring);}
.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='%236b7280' 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;}
.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){
  .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 var(--color-secondary);border-radius:var(--radius-lg);padding:18px 20px;margin:0 0 26px;}
.ex-tldr .ex-tldr-lbl{display:block;font-size:.6875rem;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);}
.ex-revisor{display:flex;align-items:center;gap:8px;margin:0 0 26px;font-size:.875rem;font-weight:600;color:var(--color-secondary);}
.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 ---- */
.ex-cta-mid{margin:36px 0;padding:20px 24px;background:var(--surface-brand-soft);border:1px solid var(--azul-100);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:var(--text-strong);font-size:1.02rem;line-height:1.35;}
.ex-cta-mid .btn{flex-shrink:0;}

/* ---- 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:800;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::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;
  background:var(--gradient-brand);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out);
}
.exam:hover::after{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);
}
::selection{background:var(--azul-100);color:var(--text-strong);}
.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::after{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;}

/* ---- 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. */
.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;}
}