/* Dr. Conteudo: marketing medico
 *
 * SISTEMA DE DESIGN (travado, nao variar por secao)
 * Tema:    claro unico. Nenhuma secao inverte para escuro.
 * Acento:  UMA cor, --verde, em toda a pagina. Sem segunda cor de destaque.
 * Raio:    botao/input 10px · cartao 16px · selo (pill) 999px. Regra documentada.
 * Fonte:   Instrument Sans em toda a interface + JetBrains Mono nas
 *           referencias de norma. A mono nao e enfeite: ela marca o que e
 *           citacao de artigo e o que e texto nosso, e da a pagina cara de
 *           documento tecnico em vez de landing de SaaS.
 * Raio:     quase reto de proposito. Canto muito arredondado virou assinatura
 *           de site gerado por IA, e aqui o conteudo e normativo.
 * Movimento: MOTION_INTENSITY 4. Transicao de hover, :active com escala,
 *            revelacao na entrada por IntersectionObserver. Nada de parallax,
 *            nada de laco infinito, nada de listener de scroll.
 */

/* ---------- tokens ---------- */
/* Paleta e escala tipografica extraidas do arquivo Figma do template
   Healthcrea (chave AkTYCCYF6Z9MoiS636C5ra) pela API, nao estimadas de print.
   Os 10 tons de cada rampa vem do frame Colors; a escala de texto vem do
   frame Typography. O acento --verde e o Primary 700 do template, que por
   coincidencia e quase o #0E5049 que ja estava travado aqui. */
:root {
  /* rampa Primary do template */
  --p50:  #E9F1F0;  --p100: #BAD3CF;  --p200: #99BDB8;  --p300: #6A9F98;
  --p400: #4D8D84;  --p500: #217065;  --p600: #1E665C;  --p700: #175048;
  --p800: #123E38;  --p900: #0E2F2A;

  /* rampa Neutral do template */
  --n50:  #FAFAFA;  --n100: #B4B6B6;  --n200: #8F9292;  --n300: #5C6160;
  --n400: #3D4241;  --n700: #0C1312;  --n800: #090D0D;  --n900: #050808;

  /* papeis semanticos.
     ⚠️ --verde, --tinta e --papel sao as cores OFICIAIS DA MARCA, tiradas dos
     SVGs do logo (identidade entregue em 19/09/2026). Nao trocar pelos tons
     do template: o logo e chapado nelas e qualquer desvio aparece como
     mancha no cabecalho. As rampas --p* e --n* servem so para os tons
     intermediarios que a marca nao define. */
  --papel:        #F6F8F7;
  --papel-alto:   #FFFFFF;
  --papel-fundo:  var(--p50);
  --tinta:        #101F1C;       /* marca. 16.4:1 no papel */
  --tinta-media:  var(--n400);   /* 9.1:1  no papel, passa AAA */
  --tinta-fraca:  var(--n300);   /* 5.9:1  no papel, passa AA  */
  --verde:        #0E5049;       /* MARCA. 8.6:1 com branco, seguro em botao */
  --verde-escuro: #0A3B36;
  --verde-vivo:   var(--p500);   /* so decorativo, nunca texto pequeno */
  --verde-veu:    var(--p50);
  --linha:        #D7DEDB;
  --linha-veu:    #E8EDEB;

  --raio-botao: 3px;
  --raio-cartao: 4px;

  --texto: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* escala do template: 64 48 32 24 20 18 16 14, com as alturas de linha
     medidas nos proprios nos de texto (1.2 no display, 1.4 no meio, 1.6 no corpo) */
  --t64: clamp(2.35rem, 5vw, 4rem);
  --t48: clamp(1.95rem, 3.6vw, 3rem);
  --t32: clamp(1.55rem, 2.6vw, 2rem);
  --t24: clamp(1.3rem,  1.8vw, 1.5rem);
  --t20: 1.25rem;
  --t18: 1.125rem;
  --t16: 1rem;
  --t14: 0.875rem;

  /* sombra tingida com o verde, como no estilo Shadow do template */
  --sombra: 0 1px 2px rgba(14, 47, 42, 0.05), 0 14px 34px -14px rgba(14, 47, 42, 0.16);

  --saida: cubic-bezier(0.23, 1, 0.32, 1);
  --entra-sai: cubic-bezier(0.77, 0, 0.175, 1);

  --largura: 1200px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t16);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--texto);
  font-weight: 600;
  letter-spacing: -0.017em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t64); line-height: 1.2; }
h2 { font-size: var(--t48); line-height: 1.25; }
h3 { font-size: var(--t20); line-height: 1.4; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; max-width: 65ch; }
a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

.env { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 560px) { .env { padding-inline: 18px; } }

section { padding-block: clamp(56px, 8vw, 104px); }
.faixa-fundo { background: var(--papel-fundo); }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  height: 68px;                       /* teto de 80px, nunca ultrapassar */
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--saida);
}
.topo[data-rolou="sim"] { border-bottom-color: var(--linha); }

.topo .env { display: flex; align-items: center; gap: 28px; }

.marca {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--tinta); white-space: nowrap;
}
/* O carimbo e vetor puro. A palavra fica em HTML, em Outfit, porque texto
   dentro de SVG depende da fonte instalada e nao e selecionavel. */
.marca__carimbo { height: 28px; width: auto; flex: none; display: block; }
.marca__nome {
  font-family: "Outfit", var(--texto);   /* Outfit e a fonte DO LOGO, so aqui */
  font-weight: 600; font-size: 1.32rem; letter-spacing: -0.028em;
  line-height: 1;
}
/* ⚠️ A assinatura tem classe propria de proposito. Um seletor `.marca span`
   pega tambem o .marca__nome, vence na especificidade e derruba o Outfit do
   logotipo. Foi o que aconteceu ate 19/09/2026. */
.marca__tag {
  font-family: var(--texto); font-size: 0.74rem; font-weight: 400;
  color: var(--tinta-fraca); letter-spacing: 0.01em;
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--linha);
  line-height: 1.1;
}
/* some so a assinatura; o logotipo nunca some */
@media (max-width: 860px) { .marca__tag { display: none; } }
@media (max-width: 400px) {
  .marca__carimbo { height: 24px; }
  .marca__nome { font-size: 1.15rem; }
}

.topo nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.topo nav a:not(.botao) {
  color: var(--tinta-media); text-decoration: none; font-size: 0.95rem;
  white-space: nowrap;
  transition: color 160ms ease;
}
.topo nav a:not(.botao):hover { color: var(--tinta); }
@media (max-width: 760px) { .topo nav a:not(.botao) { display: none; } }

/* ---------- botoes ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--raio-botao);
  border: 1px solid transparent;
  font-family: var(--texto);
  font-size: 0.97rem; font-weight: 600;
  white-space: nowrap;               /* rotulo nunca quebra em duas linhas */
  text-decoration: none; cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, transform 140ms var(--saida);
}
.botao--cheio { background: var(--verde); color: #fff; }   /* 9.2:1 */
.botao--cheio:hover { background: var(--verde-escuro); }
.botao--vazio { background: transparent; color: var(--verde); border-color: var(--linha); }
.botao--vazio:hover { border-color: var(--verde); background: var(--verde-veu); }
.botao:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .botao:active { transform: none; } }

.botao--grande { padding: 15px 28px; font-size: 1.02rem; }

/* ---------- hero: split assimetrico 7/5, nao centralizado ---------- */
.hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 7vw, 96px); }
.hero .env {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;   /* fracionario, nao 50/50 */
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 { max-width: 13ch; }
.hero .linha-apoio {
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  color: var(--tinta-media);
  max-width: 46ch;
  margin-top: 20px;
}
.hero .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

@media (max-width: 900px) {
  .hero .env { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { max-width: 100%; }
}

/* ---------- painel do verificador (conteudo real, nao mockup) ---------- */
.painel {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.painel__topo {
  padding: 16px 20px;
  border-bottom: 1px solid var(--linha);
  font-family: var(--texto); font-weight: 600; font-size: 0.97rem;
}
.painel__topo small {
  display: block; font-family: var(--texto); font-weight: 400;
  font-size: 0.82rem; color: var(--tinta-fraca); margin-top: 2px;
  letter-spacing: 0;
}

.regra { border-bottom: 1px solid var(--linha); }
.regra:last-child { border-bottom: 0; }

.regra__gatilho {
  width: 100%; display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 20px; background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left; color: var(--tinta);
  transition: background-color 160ms ease;
}
.regra__gatilho:hover { background: var(--verde-veu); }

.selo {
  flex: none; margin-top: 2px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.71rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.selo--pode     { background: var(--verde-veu); color: var(--verde); }
.selo--nao      { background: #F6E3E0; color: #8A2B1E; }   /* 6.4:1 */
.selo--depende  { background: #F6EEDC; color: #6E5214; }   /* 6.9:1 */

.regra__texto { flex: 1; font-size: 0.97rem; line-height: 1.5; }
.regra__seta {
  flex: none; margin-top: 4px; color: var(--tinta-fraca);
  transition: transform 220ms var(--saida);
}
.regra__gatilho[aria-expanded="true"] .regra__seta { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .regra__seta { transition: none; } }

/* grid-template-rows anima com altura desconhecida e sem salto */
.regra__corpo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 260ms var(--saida);
}
.regra__gatilho[aria-expanded="true"] + .regra__corpo { grid-template-rows: 1fr; }
.regra__corpo > div { overflow: hidden; }
.regra__corpo p {
  margin: 0; padding: 0 20px 16px 20px;
  font-size: 0.92rem; color: var(--tinta-media); max-width: none;
}
.regra__fonte {
  display: block; margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--linha);
  font-family: var(--mono); font-size: 0.74rem; line-height: 1.5;
  color: var(--tinta-fraca); letter-spacing: -0.01em;
}
@media (prefers-reduced-motion: reduce) { .regra__corpo { transition: none; } }

/* ---------- cabecalho de secao: pilha vertical, nunca split ---------- */
.cabeca { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 52px); }
.cabeca p { color: var(--tinta-media); margin-top: 14px; margin-bottom: 0; }

/* ---------- achados: numero grande + texto, sem cartao ---------- */
.achados { display: grid; gap: 4px; }
.achado {
  display: grid; grid-template-columns: minmax(96px, 128px) 1fr;
  gap: clamp(18px, 3vw, 44px); align-items: baseline;
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--linha);   /* so borda superior, nunca as duas */
}
.achado__num {
  font-family: var(--texto); font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--verde);
}
.achado__txt p { margin: 0; font-size: 0.97rem; color: var(--tinta-media); }
.achado__txt strong { color: var(--tinta); font-weight: 600; }
@media (max-width: 620px) {
  .achado { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- formulario ---------- */
.form { display: grid; gap: 18px; }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form__linha { grid-template-columns: 1fr; } }

.campo { display: grid; gap: 7px; }
.campo label { font-size: 0.89rem; font-weight: 600; color: var(--tinta); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 0.97rem;
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid #B9C4C0;          /* 3.1:1 com o papel, borda visivel */
  border-radius: var(--raio-botao);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo textarea { resize: vertical; min-height: 104px; }
.campo input::placeholder, .campo textarea::placeholder { color: #697773; } /* 4.5:1 */
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-veu);
}
.campo__ajuda { font-size: 0.82rem; color: var(--tinta-fraca); }
.campo__erro  { font-size: 0.85rem; color: #8A2B1E; }

.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__aviso { font-size: 0.87rem; color: var(--tinta-fraca); }
.form__estado { font-size: 0.95rem; }
.form__estado[data-tipo="erro"] { color: #8A2B1E; }
.form__estado[data-tipo="ok"]   { color: var(--verde); font-weight: 600; }

/* ---------- rodape ---------- */
.rodape {
  background: var(--tinta); color: #C4D0CD;
  padding-block: 48px 36px; font-size: 0.92rem;
}
.rodape a { color: #fff; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape__grade {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 760px) { .rodape__grade { grid-template-columns: 1fr; gap: 26px; } }
.rodape__marca { display: flex; align-items: center; gap: 9px; color: #fff; }
.rodape__marca svg { height: 26px; width: auto; flex: none; }
.rodape__marca span {
  font-family: "Outfit", var(--texto);
  font-weight: 600; font-size: 1.22rem; letter-spacing: -0.028em;
}
.rodape h4 {
  margin: 0 0 12px; font-family: var(--texto); font-size: 0.92rem;
  font-weight: 600; color: #fff;
}
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rodape__fim {
  padding-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; font-size: 0.85rem; color: #93A29E;
}

/* ---------- revelacao na entrada ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-revela] {
    opacity: 0; transform: translateY(14px);
    transition: opacity 560ms var(--saida), transform 560ms var(--saida);
  }
  [data-revela].visivel { opacity: 1; transform: none; }
}

/* ===================================================================
   PAGINAS INTERNAS (artigo + servico)
   Mesmo sistema: mesmo acento, mesmos raios, mesmo tema claro.
   Familias de layout diferentes das da home, por regra de composicao.
   =================================================================== */

/* hero compacto: pagina interna nao repete o split da home */
.hero-int {
  padding-top: clamp(32px, 4.5vw, 62px);
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.hero-int h1 { max-width: 20ch; }
.hero-int .linha-apoio {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--tinta-media); max-width: 58ch; margin-top: 18px;
}

.migalha {
  font-size: 0.86rem; color: var(--tinta-fraca); margin-bottom: 16px;
}
.migalha a { color: var(--tinta-fraca); text-decoration: none; }
.migalha a:hover { color: var(--verde); text-decoration: underline; }

/* corpo do artigo com sumario lateral */
.artigo {
  display: grid; grid-template-columns: 220px 1fr;
  gap: clamp(28px, 5vw, 68px); align-items: start;
}
@media (max-width: 980px) { .artigo { grid-template-columns: 1fr; gap: 28px; } }

.sumario { position: sticky; top: 92px; font-size: 0.92rem; }
@media (max-width: 980px) {
  .sumario {
    position: static; background: var(--papel-alto);
    border: 1px solid var(--linha); border-radius: var(--raio-cartao);
    padding: 18px 20px;
  }
}
.sumario h2 {
  font-size: 0.84rem; font-weight: 600; color: var(--tinta-fraca);
  letter-spacing: 0.02em; margin-bottom: 12px; font-family: var(--texto);
}
.sumario ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sumario a {
  color: var(--tinta-media); text-decoration: none;
  border-left: 2px solid var(--linha); padding-left: 12px; display: block;
  transition: color 160ms ease, border-color 160ms ease;
}
.sumario a:hover { color: var(--verde); border-left-color: var(--verde); }

/* prosa */
.prosa > * + * { margin-top: 1.1rem; }
.prosa h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-top: clamp(38px, 4.5vw, 60px); scroll-margin-top: 90px;
}
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 30px; }
.prosa p { color: var(--tinta-media); }
.prosa strong { color: var(--tinta); font-weight: 600; }
.prosa ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 11px; max-width: 65ch; }
.prosa ul li {
  position: relative; padding-left: 22px; color: var(--tinta-media);
}
.prosa ul li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde);
}

/* citacao de norma: bloco de fonte, base do GEO */
.norma {
  border-left: 3px solid var(--verde);
  background: var(--verde-veu);
  border-radius: 0 var(--raio-cartao) var(--raio-cartao) 0;
  padding: 18px 22px; margin-block: 26px;
}
.norma p { margin: 0; color: var(--tinta); font-size: 0.97rem; }
.norma cite {
  display: block; margin-top: 11px; font-style: normal;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: -0.01em;
  color: var(--verde); font-weight: 500;
}

/* chamada no meio do texto */
.chamada {
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: var(--raio-cartao); padding: clamp(24px, 3vw, 34px);
  margin-block: clamp(34px, 4vw, 48px);
}
.chamada h3 { margin-bottom: 8px; }
.chamada p { margin: 0 0 18px; color: var(--tinta-media); }

/* faq */
.faq { display: grid; gap: 0; max-width: 72ch; }
.faq__item { border-top: 1px solid var(--linha); }
.faq__item:last-child { border-bottom: 1px solid var(--linha); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--texto); font-weight: 600; font-size: 1.04rem;
  text-align: left; color: var(--tinta); line-height: 1.35;
  transition: color 160ms ease;
}
.faq__q:hover { color: var(--verde); }
.faq__q svg { flex: none; margin-top: 4px; color: var(--tinta-fraca); transition: transform 220ms var(--saida); }
.faq__q[aria-expanded="true"] svg { transform: rotate(90deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--saida); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0 0 18px; color: var(--tinta-media); font-size: 0.98rem; max-width: 65ch; }
@media (prefers-reduced-motion: reduce) {
  .faq__q svg, .faq__a { transition: none; }
}

/* Referencia de artigo dentro do texto corrido.
   E a assinatura da pagina: mono marca o que e citacao de norma e o que e
   texto nosso. Sem isso a lista de permissoes vira mais um texto de blog. */
.ref {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem; line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--verde);
  background: var(--verde-veu);
  padding: 2px 7px; border-radius: 3px;
  white-space: nowrap;
  vertical-align: 1px;
}
@media (max-width: 560px) { .ref { white-space: normal; } }

/* ===================================================================
   COMPOSICOES VINDAS DO TEMPLATE (Healthcrea), adaptadas
   O que foi aproveitado: a estrutura. O que foi descartado: a tematica
   de paciente (Doctor Card, agendamento de consulta).
   =================================================================== */

/* Faixa de provas logo ABAIXO do hero, nunca dentro dele.
   No template ela fica na terceira coluna do hero; aqui desce, porque
   hero com muito elemento de texto vira lista de features. */
.checks {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--linha);
}
.checks__item { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; }
.checks__item svg { margin-top: 3px; color: var(--verde); }
.checks__item h3 { font-size: var(--t16); font-weight: 600; letter-spacing: -0.005em; }
.checks__item p  { margin: 5px 0 0; font-size: var(--t14); line-height: 1.55; color: var(--tinta-media); }
@media (max-width: 860px) { .checks { grid-template-columns: 1fr; gap: 22px; } }

/* Palco: palavra gigante ao fundo, conteudo flutuando por cima.
   Vem da secao Services do template. Da profundidade sem cartao uniforme. */
.palco { position: relative; overflow: hidden; }
.palco__fundo {
  position: absolute; top: clamp(-10px, 1vw, 14px); left: 50%;
  transform: translateX(-50%);
  font-family: var(--texto); font-weight: 700;
  font-size: clamp(4.5rem, 15vw, 13rem); line-height: 0.85;
  letter-spacing: -0.045em; white-space: nowrap;
  color: var(--p700); opacity: 0.045;
  pointer-events: none; user-select: none;
}
.palco > .env { position: relative; }

/* Cartoes deslocados: cada um com recuo proprio, nunca em linha reta.
   O deslocamento e o que diferencia de tres cartoes iguais. */
.flutua { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.cartao {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--sombra);
}
.cartao h3 { font-size: var(--t18); margin-bottom: 7px; }
.cartao p  { margin: 0; font-size: var(--t14); line-height: 1.6; color: var(--tinta-media); }
.cartao--destaque {
  background: linear-gradient(152deg, var(--p600) 0%, var(--p800) 100%);
  border-color: transparent; color: #fff;
}
.cartao--destaque h3 { color: #fff; }
.cartao--destaque p  { color: rgba(255,255,255,0.86); }

.cartao--a { grid-column: 1 / span 5; }
.cartao--b { grid-column: 7 / span 6; margin-top: clamp(18px, 3vw, 46px); }
.cartao--c { grid-column: 2 / span 5; margin-top: clamp(4px, 1vw, 14px); }
.cartao--d { grid-column: 8 / span 5; }
.cartao--e { grid-column: 2 / span 9; margin-top: clamp(6px, 1.4vw, 20px); }

/* Terceiro nivel de superficie: branco, veu, solido. Serve para destacar
   sem criar um segundo verde cheio competindo com o cartao principal. */
.cartao--veu { background: var(--verde-veu); border-color: transparent; }
.cartao--veu p { color: var(--n400); }

/* Link de saida dentro do cartao. Fica visivel como acao, nao como
   palavra sublinhada perdida no meio do paragrafo. */
.cartao__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; font-size: var(--t14); font-weight: 600;
  color: var(--verde); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--verde) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color 160ms ease, gap 160ms var(--saida);
}
.cartao__link:hover { border-bottom-color: var(--verde); gap: 11px; }
.cartao__link svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .cartao__link { transition: none; } }

@media (max-width: 900px) {
  .flutua { grid-template-columns: 1fr; gap: 14px; }
  .cartao--a, .cartao--b, .cartao--c, .cartao--d, .cartao--e {
    grid-column: 1 / -1; margin-top: 0;
  }
}

/* Marcador de item, herdado do padrao numerado do template mas sem o
   "01 / 02 / 03" decorativo, que denuncia pagina gerada. */
.cartao__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--verde-veu); color: var(--verde);
  margin-bottom: 14px;
}
.cartao--destaque .cartao__marca { background: rgba(255,255,255,0.16); color: #fff; }

/* ===================================================================
   IMAGENS
   Uma so por secao, e nunca como enfeite: a foto tem que mostrar o
   LEITOR (o medico) no contexto do problema. Foto de medico atendendo
   paciente faria a agencia parecer clinica, que e o erro que ja
   descartou o mascote.
   =================================================================== */
.dupla {
  display: grid; gap: clamp(28px, 4.5vw, 64px); align-items: center;
}
.dupla--img-esq { grid-template-columns: 0.85fr 1.15fr; }
.dupla--img-dir { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 900px) {
  .dupla--img-esq, .dupla--img-dir { grid-template-columns: 1fr; }
  .dupla--img-esq .dupla__foto { order: -1; }
}

.dupla__foto {
  position: relative;
  border-radius: var(--raio-cartao);
  overflow: hidden;
  background: var(--p100);      /* cor de espera, evita salto branco */
  aspect-ratio: 1240 / 893;
}
.dupla__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Veu do acento por cima da foto: amarra a imagem a paleta da marca sem
   colorizar. Sem isso a foto entra como corpo estranho no meio do verde. */
.dupla__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(168deg,
    color-mix(in srgb, var(--verde) 12%, transparent) 0%,
    transparent 46%);
  mix-blend-mode: multiply;
}
.dupla .cabeca { margin-bottom: 0; }
.dupla .cabeca + .acoes { margin-top: 26px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* credito de foto, discreto no rodape */
.rodape__credito { font-size: 0.78rem; color: #8DA09B; }
.rodape__credito a { color: #B6C4C0; text-decoration: underline; }

/* ---------- verificador (/verificador/) ----------
   Uma pergunta por vez. O passo e um <fieldset> de verdade, com <legend>,
   para o leitor de tela anunciar a pergunta ao entrar no grupo. */
.quiz {
  max-width: 68ch;
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio-cartao);
  padding: clamp(20px, 3vw, 34px);
}
.quiz__barra {
  height: 3px; background: var(--linha-veu);
  border-radius: 999px; overflow: hidden;
}
.quiz__barra span {
  display: block; height: 100%; width: 10%;
  background: var(--verde);
  transition: width 260ms var(--saida);
}
@media (prefers-reduced-motion: reduce) { .quiz__barra span { transition: none; } }

.quiz__conta {
  font-family: var(--mono); font-size: 0.76rem;
  color: var(--tinta-fraca); margin: 14px 0 0;
  letter-spacing: 0.02em;
}

.passo { border: 0; padding: 0; margin: 18px 0 0; }
.passo legend {
  padding: 0; margin-bottom: 18px;
  font-size: clamp(1.12rem, 2.2vw, 1.34rem);
  font-weight: 600; line-height: 1.3; color: var(--tinta);
}

.opcao {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; margin-bottom: 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-botao);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.opcao:hover { border-color: var(--verde); background: var(--verde-veu); }
.opcao input { margin: 3px 0 0; accent-color: var(--verde); flex: none; }
.opcao span { font-size: 0.97rem; line-height: 1.5; color: var(--tinta-media); }
.opcao:has(input:checked) { border-color: var(--verde); background: var(--verde-veu); }
.opcao:has(input:checked) span { color: var(--tinta); }
.opcao:focus-within { outline: 2px solid var(--verde); outline-offset: 2px; }

.quiz__pe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.quiz__aviso { flex-basis: 100%; margin: 0; font-size: 0.88rem; color: #8A2B1E; }

.resultado { max-width: 68ch; }
.resultado__topo { margin-bottom: 26px; }
.resultado__conta {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--verde); margin: 0 0 8px;
}
.resultado__topo h2 { margin: 0 0 10px; }
.resultado__topo p:last-child { color: var(--tinta-media); margin: 0; }

.achado-risco {
  border-left: 2px solid var(--verde);
  padding: 2px 0 2px 18px;
  margin-bottom: 24px;
}
.achado-risco h3 { margin: 0 0 8px; font-size: 1.05rem; }
.achado-risco p { margin: 0 0 10px; color: var(--tinta-media); }

.resultado__reinicia { margin-top: 28px; }