/* ==========================================================================
   Campos — o mecanismo que faz uma SEÇÃO inteira trocar de campo.

   `.lamina` já fazia isso para uma caixa. Aqui a mesma ideia sobe para o
   nível de seção, que é o que a cliente pediu ("gosto de alternância entre
   fundo escuro e claro") e o que as peças dela fazem: cada peça é INTEIRA
   clara ou INTEIRA escura. Nunca meio a meio dentro de uma.

   A classe vai NA PRÓPRIA <section>, nunca num wrapper entre ela e o .wrap:
   o seletor da animação de scroll é `.secao > .wrap > *` e o padding lateral
   vive no `.wrap`. Um div no meio mata os dois em silêncio.
   ========================================================================== */

.campo-claro {
  --bg:            var(--claro);
  --surface:       var(--claro-000);
  --surface-2:     var(--claro-000);
  --faixa:         var(--claro-000);
  --text:          var(--tinta);
  --text-2:        var(--tinta-2);
  --accent:        var(--azul-600);
  --accent-hover:  var(--azul-caixa);
  --track:         var(--azul-600);
  --line:          var(--linha-clara);
  --line-strong:   var(--linha-clara-forte);
  /* Obrigatório: o âmbar do foco dá 2,01:1 aqui e reprova a 2.4.7. */
  --focus:         var(--foco-claro);
  --acento-micro:  var(--azul-600);
  /* O lead do hero fixava --ink-200 (14,32:1 no escuro). Trocar o token
     direto mudaria a home que já está no ar; a variável preserva o escuro
     intacto e só inverte aqui. */
  --hero-lead:     var(--tinta-2);
  /* O rótulo do botão cheio inverte: sobre #0A55E0, branco dá 6,20:1 e a
     tinta escura daria 2,99:1. */
  --btn-principal-tinta: #FFFFFF;
  /* No claro não há irradiação — o texto pode pesar mais sem borrar. */
  --wght-body:  400;
  --wght-title: 620;

  background: var(--claro);
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA — INVERTIDA em 01/09/2026, pela página de referência.

   A regra anterior mandava TUDO para a sem-serifa no campo claro, com o
   argumento de que "as peças dela são sem serifa e pesadas". A referência
   faz o contrário, e é o que dá a ela a cara de documento em vez de cara
   de landing page:

     corpo  → sem serifa (Inter), 17px, entrelinha 1,65
     h1, h2 → serifa (Newsreader), peso 500 — a voz editorial
     h3     → sem serifa, peso 600 — h3 é rótulo de bloco, não título
     micro  → sem serifa, caixa alta, entreletra aberta

   A escala também encolheu. A referência tem h1 a 2,6rem e h2 a 1,85rem,
   contra 4,5rem e 2,5rem daqui. Título grande demais é o que fazia cada
   seção gritar e nenhuma conduzir.
   -------------------------------------------------------------------------- */

.campo-claro {
  font-family: var(--font-sans);
  /* 17px/1,65 — o corpo da referência. Vinha 19px porque --fs-corpo é um
     clamp que sobe com a viewport, e vinha PESO 390 porque o :root compensa
     a irradiação do tema escuro e essa compensação ficou órfã quando o campo
     virou branco: `body` está FORA de .campo-claro, então herdava 390 e o
     --wght-body: 400 daqui nunca chegava a valer. */
  font-size: 17px;
  font-weight: 400;
  --lh-corpo: 1.65;
  --fs-display: clamp(1.95rem, 1.55rem + 1.80vw, 2.60rem);
  --fs-h1:      clamp(1.95rem, 1.60rem + 1.55vw, 2.35rem);
  --fs-h2:      clamp(1.55rem, 1.37rem + 0.80vw, 1.85rem);
  --fs-h3:      1.2rem;
  --fs-lead:    clamp(1.06rem, 1.00rem + 0.27vw, 1.12rem);
}
@media (max-width: 720px) { .campo-claro { font-size: 16px; } }

.campo-claro :is(h1, h2, .display) {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.campo-claro .display { line-height: 1.16; }

/* h3 é rótulo, não manchete: sem serifa e mais pesado, para separar
   hierarquia por FORMA e não só por tamanho. */
.campo-claro :is(h3, h4) {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}
.campo-claro .btn { font-family: var(--font-sans); }
.campo-claro .micro {
  font-family: var(--font-sans);
  letter-spacing: .1em;
  font-size: .8125rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   A caixa sólida — o gesto mais forte da referência dela.
   MESMO GESTO, CORES OPOSTAS: no claro é azul-escuro com branco (6,20:1);
   no escuro INVERTE para azul-claro com quase-preto (6,95:1). Branco sobre
   o azul do campo escuro daria 3,52:1 e reprova.
   -------------------------------------------------------------------------- */

.caixa-azul {
  display: inline-block;
  padding: .35em .7em;
  background: var(--azul-600); color: #FFFFFF;
  font-family: var(--font-sans); font-weight: 600;
  border-radius: 2px;
}
.caixa-azul--invertida {
  background: var(--azul-400); color: var(--ink-950);
}

/* Palavra colorida dentro da manchete — o outro gesto dela. */
.destaque-azul { color: var(--accent); }

/* Barra cheia de largura do wrap, atravessando o conteúdo. */
.barra-azul {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3);
  align-items: baseline; justify-content: space-between;
  padding: var(--e-3) var(--e-4);
  background: var(--azul-600); color: #FFFFFF;
  border-radius: var(--raio);
}
.barra-azul a { color: #FFFFFF; text-decoration-thickness: 2px; }
/* `.micro` do base.css fixa --text-2 e vence a cor herdada do container.
   Sem isto o rótulo sai a 1,11:1 dentro da barra cheia. */
.barra-azul :is(.micro, .legenda) { color: rgba(255,255,255,.86); }
.barra-azul p { margin: 0; max-width: 62ch; }

/* --------------------------------------------------------------------------
   Card no campo claro. Branco sobre #F4F7FA dá 1,05:1 — não separa nada.
   A separação vem do filete superior, não do fundo.
   -------------------------------------------------------------------------- */

.card--claro {
  background: transparent;
  border: 0;
  border-top: 3px solid var(--track);
  border-bottom: 1px solid var(--linha-clara);
  border-radius: 0;
  padding: var(--e-3) 0 var(--e-4);
}

/* --------------------------------------------------------------------------
   Índice — lista com filete, no lugar de grade de cards. Mais denso, mais
   editorial, e não finge ser botão.
   -------------------------------------------------------------------------- */

.indice { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
@media (min-width: 768px) { .indice { grid-template-columns: 1fr 1fr; column-gap: var(--e-6); } }
.indice > li {
  border-top: 1px solid var(--line-strong);
  padding: var(--e-3) 0;
  margin: 0;
  display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline;
}
.indice__n { font-family: var(--font-mono); font-size: var(--fs-legenda); color: var(--accent); }
.indice h3 { margin: 0 0 .2em; font-size: var(--fs-lead); }
.indice p  { margin: 0; color: var(--text-2); font-size: var(--fs-legenda); }

/* --------------------------------------------------------------------------
   Painéis chão-a-teto — as duas portas em escala de meia tela.
   Os dois estão NO MESMO campo: a diferença entre eles é preenchimento,
   não campo. Isso respeita "nunca meio a meio dentro de uma peça" e resolve
   a trilha do paciente sem depender de matiz (o rótulo textual já cumpre
   a 1.4.1).
   -------------------------------------------------------------------------- */

.portas-painel {
  display: grid; grid-template-columns: 1fr; gap: 0;
  width: 100vw; margin-inline: calc(50% - 50vw);
}
@media (min-width: 860px) { .portas-painel { grid-template-columns: 1fr 1fr; } }

.porta--painel {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--e-6) var(--e-5);
  min-height: 26rem;
  text-decoration: none;
  border-top: 3px solid var(--azul-600);
}
@media (min-width: 860px) { .porta--painel { padding: var(--e-7) var(--e-6); min-height: 34rem; } }
.porta--painel h3 { font-size: var(--fs-h2); margin-bottom: var(--e-2); }
.porta--painel ul { list-style: none; padding: 0; margin: var(--e-3) 0 0; }
.porta--painel li { padding-left: 1.1em; position: relative; }
.porta--painel li::before { content: "—"; position: absolute; left: 0; opacity: .7; }

/* A porta cheia: a caixa sólida dela na maior escala que a página comporta. */
.porta--cheia {
  background: var(--azul-600); color: #FFFFFF; border-top-color: var(--azul-caixa);
}
.porta--cheia :is(h3, p, li, span) { color: #FFFFFF; }
.porta--cheia .micro { color: rgba(255,255,255,.82); }

.porta--vazia { background: var(--claro-000); color: var(--tinta); }
.porta--vazia .micro { color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   Ficha de identidade — abertura densa, no lugar de capa.
   -------------------------------------------------------------------------- */

.identidade { display: grid; gap: var(--e-3); align-items: start; }
@media (min-width: 700px) { .identidade { grid-template-columns: 88px 1fr; gap: var(--e-4); } }
.avatar-ficha {
  width: 88px; height: 88px; border-radius: 0;
  border: 1px solid var(--line-strong); object-fit: cover;
}
.identidade__filete { height: 3px; background: var(--accent); width: 3rem; margin: var(--e-3) 0; }

/* --------------------------------------------------------------------------
   Capítulo — agrupa seções do mesmo campo e mata a borda interna, para o
   conjunto ler como UMA peça em vez de duas seções vizinhas.
   -------------------------------------------------------------------------- */

.capitulo > .secao + .secao { padding-top: 0; border-top: 0; }

/* O retrato sem máscara, com aresta viva: o escuro como OBJETO sobre o
   campo claro — a inversão exata da lâmina. */
.retrato-duro {
  -webkit-mask-image: none; mask-image: none;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Faixa de comparação — SÓ nas páginas de proposta. Sai quando uma for
   escolhida e promovida para a home.
   -------------------------------------------------------------------------- */

.faixa-proposta {
  background: var(--azul-900); color: var(--paper);
  border-bottom: 1px solid var(--azul-500);
  padding-block: var(--e-3);
}
.faixa-proposta p { margin: 0 0 var(--e-1); max-width: 72ch; }
.faixa-proposta p:last-child { margin-bottom: 0; }
.faixa-proposta .micro { color: var(--azul-300); }
.faixa-proposta a { color: var(--azul-300); }

/* --------------------------------------------------------------------------
   A trilha dentro do campo claro.

   `[data-trilha]` fica NO ELEMENTO (o card da porta), então ele sobrepõe o
   acento que `.campo-claro` define no ancestral. Resultado medido: o rótulo
   da porta profissional saía em --azul-400 sobre branco (2,67:1) e o da
   porta de paciente em âmbar sobre branco (2,16:1). Os dois reprovam.

   DECISÃO DE SISTEMA: o mecanismo de trilha POR MATIZ é do campo escuro.
   No claro as duas portas se diferenciam por PREENCHIMENTO — uma cheia de
   azul, outra branca com filete —, e o rótulo textual ("Para profissionais"
   / "Para pacientes") já satisfaz a 1.4.1 sozinho. Cor nunca foi o único
   meio aqui, então nada se perde em conformidade.
   -------------------------------------------------------------------------- */

.campo-claro [data-trilha="pro"],
.campo-claro [data-trilha="paciente"],
.campo-claro [data-trilha="instituicao"],
.campo-claro [data-trilha] {
  --accent:       var(--azul-600);
  --accent-hover: var(--azul-caixa);
  --track:        var(--azul-600);
  --focus:        var(--foco-claro);
  --btn-principal-tinta: #FFFFFF;
}

/* No campo claro o ciano cai para 1,72:1 e reprova. A trilha da instituição
   entra na mesma regra das outras: no claro a diferenciação é por
   preenchimento, não por matiz. */