/* =========================================================
   PLATAFORMA — estilos exclusivos da página de metodologia.
   Carregado só aqui, para a home não pagar por isso.

   O tabuleiro não é ilustração: ao passar por um módulo ele
   acende exatamente as casas que aquela peça alcança a partir
   da casa de origem. O movimento É a definição do módulo.
   ========================================================= */

.plat-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.h1-plat {
  font-family: var(--font-brand);
  font-size: clamp(2.2rem, 5vw, 3.9rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.05em;
  color: var(--fg);
}
.h1-plat em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: .05em;
  text-underline-offset: .11em;
}

.plat-dica {
  margin-top: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ---------- tabuleiro ---------- */
.plat-tabuleiro { position: relative; width: 100%; }

.tabuleiro {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1;
  border: 1px solid var(--line);
}

.casa {
  background: transparent;
  opacity: 0;
  transform: scale(.9);
  transition:
    background var(--dur-lenta) var(--ease-out),
    opacity .5s var(--ease-out),
    transform .5s var(--ease-mola);
}
/* entrada em cascata diagonal, casa por casa */
.tabuleiro.is-in .casa {
  opacity: 1;
  transform: none;
  transition-delay: var(--entrada, 0ms);
}
.casa-escura { background: rgb(var(--fg-rgb) / .07); }

.casa.em-alcance {
  background: rgb(var(--fg-rgb) / .34);
  transition-delay: var(--atraso, 0ms);
}
.casa.na-origem { background: var(--fg); }

/* a peça fica sobre a casa de origem, acima da grade */
.peca-no-tabuleiro {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  left: calc(var(--coluna, 4) * 12.5%);
  top: calc(var(--linha, 4) * 12.5%);
  padding: 1.2%;
  color: var(--bg);
  fill: currentColor;
  pointer-events: none;
  animation: plat-pop var(--dur-lenta) var(--ease-mola);
}

@keyframes plat-pop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: none; }
}

/* ---------- lista de módulos ---------- */
.modulos { display: grid; }

.modulo {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 24px;
  gap: 0 26px;
  align-items: center;
  width: 100%;
  padding: 26px 4px;
  text-align: left;
  border-top: 1px solid var(--line-soft);
  transition: background var(--dur-base) var(--ease-out);
}
.modulos li:last-child .modulo { border-bottom: 1px solid var(--line-soft); }

.modulo-peca {
  width: 46px;
  height: 46px;
  /* cor vem de `color`, não de `fill`: o cavalo tem contorno em
     currentColor para arredondar os cantos, e as duas precisam ser
     a mesma cor */
  color: var(--text-mute);
  fill: currentColor;
  transition: color var(--dur-base) var(--ease-out), transform var(--dur-lenta) var(--ease-mola);
}

.modulo-texto { display: grid; gap: 4px; min-width: 0; }

.modulo-nome {
  font-family: var(--font-brand);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--fg);
}
.modulo-papel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.modulo-resumo { margin-top: 6px; font-size: .95rem; color: var(--text-dim); }

.modulo-seta {
  width: 20px; height: 20px;
  color: var(--text-mute);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.modulo:hover,
.modulo:focus-visible { background: rgb(var(--fg-rgb) / .035); }
.modulo:hover .modulo-peca,
.modulo:focus-visible .modulo-peca { color: var(--fg); transform: translateY(-3px); }
.modulo:hover .modulo-seta,
.modulo:focus-visible .modulo-seta { opacity: 1; transform: none; color: var(--fg); }

/* ---------- princípios ---------- */
.principios { display: grid; counter-reset: p; }
.principios li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 6px 8px;
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
}
.principios li:last-child { border-bottom: 1px solid var(--line-soft); }
.principios li::before {
  content: "0" counter(p);
  grid-row: 1 / span 2;
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-mute);
  padding-top: 5px;
}
.principios h3 {
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--fg);
}
.principios p { color: var(--text-dim); font-size: .98rem; }

/* ---------- detalhe do módulo ---------- */
body.detalhe-aberto { overflow: hidden; }

.detalhe {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: plat-entra .42s var(--ease-out);
}
@keyframes plat-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.detalhe-barra {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgb(var(--bg-rgb) / .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.detalhe-barra-inner { display: flex; align-items: center; height: var(--header-h); }

.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  transition: color var(--dur-base) var(--ease-out);
}
.btn-voltar:hover { color: var(--fg); }
.btn-voltar .ico { width: 17px; height: 17px; }

.detalhe-corpo {
  max-width: 720px;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

.detalhe-peca {
  width: 64px;
  height: 64px;
  color: var(--fg);
  fill: currentColor;
  margin-bottom: 30px;
}

.detalhe-corpo h2 {
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.06;
  color: var(--fg);
}
.detalhe-corpo h2:focus { outline: none; }
.detalhe-corpo h2 span {
  display: block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.detalhe-lead {
  margin-top: 28px;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--text);
}
.detalhe-corpo > p { margin-top: 20px; color: var(--text-dim); }
.detalhe-intro { color: var(--text); font-weight: 600; }

.detalhe-lista { margin-top: 10px; counter-reset: d; }
.detalhe-lista li {
  counter-increment: d;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
}
.detalhe-lista li:last-child { border-bottom: 1px solid var(--line-soft); }
.detalhe-lista li::before {
  content: "0" counter(d);
  grid-row: 1 / span 2;
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-mute);
  padding-top: 5px;
}
.detalhe-lista h3 {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--fg);
}
.detalhe-lista p { color: var(--text-dim); font-size: .97rem; }

.detalhe-nota {
  margin-top: 36px;
  padding-left: 20px;
  border-left: 2px solid var(--fg);
  display: grid;
  gap: 12px;
}
.detalhe-nota p { color: var(--text-dim); font-size: .98rem; }
.detalhe-nota strong { color: var(--fg); font-weight: 700; }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .plat-topo { grid-template-columns: 1fr; }
  .plat-tabuleiro { max-width: 420px; }
}

@media (max-width: 560px) {
  .modulo { grid-template-columns: 40px minmax(0, 1fr); gap: 0 18px; padding: 22px 2px; }
  .modulo-peca { width: 34px; height: 34px; }
  .modulo-seta { display: none; }
  .principios li,
  .detalhe-lista li { grid-template-columns: 38px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .casa,
  .peca-no-tabuleiro,
  .detalhe { animation: none !important; }
  .tabuleiro .casa { opacity: 1; transform: none; }
}

/* o método tem nome próprio e ele aparece sempre em itálico */
.eyebrow em { font-style: italic; text-transform: none; letter-spacing: .06em; }

/* Os recortes das peças — a fenda da mitra do bispo e o olho do
   cavalo — são vazados: pintam com a cor do fundo por baixo. No
   tabuleiro a peça fica sobre casa acesa, então lá o vazado inverte. */
.corte { fill: none; stroke: var(--bg); stroke-width: 4.5; stroke-linecap: round; }
.olho { fill: var(--bg); }
.peca-no-tabuleiro .corte { stroke: var(--fg); }
.peca-no-tabuleiro .olho { fill: var(--fg); }

/* ---------- ações do hero da plataforma ---------- */
.plat-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- tela de login ---------- */
.pagina-login { display: grid; place-items: center; min-height: 100svh; }
.login-tela { width: 100%; padding: clamp(32px, 6vw, 64px) var(--gutter); }
.login-caixa { width: 100%; max-width: 360px; margin-inline: auto; }
.login-logo { margin-bottom: clamp(36px, 6vw, 56px); }

.login-titulo {
  font-family: var(--font-brand);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--fg);
}
.login-lead { margin-top: 10px; color: var(--text-dim); font-size: .96rem; }

.login-form { display: grid; gap: 22px; margin-top: 36px; }
.login-form .field input:disabled { opacity: .55; cursor: not-allowed; }
.login-form .btn:disabled { opacity: .45; cursor: not-allowed; }

.login-aviso {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-mute);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.login-aviso a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.login-aviso a:hover { color: var(--fg); }

.login-voltar { margin-top: 40px; }
/* ---------- construtor de plano ---------- */
.construtor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0 64px;
  align-items: start;
}

.construtor-campos {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

/* Cada passo é uma faixa separada por filete, como o Programa.
   fieldset precisa da reinicialização: o padrão do navegador traz
   borda e margem próprias que quebram o alinhamento. */
.passo {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
  padding: 32px 0;
  min-width: 0;
}
/* O <legend> não é um filho comum: o navegador reserva uma faixa para
   ele no topo do fieldset e o primeiro filho começa ABAIXO dessa faixa,
   então qualquer margem nesse filho vinha somada a ~32px invisíveis.
   Flutuar o legend o devolve ao fluxo; o espaçamento passa a ser dele. */
.passo legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0;
  margin-bottom: 18px;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg);
}
.passo legend + * { clear: both; margin-top: 0; }
.passo-n {
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-mute);
}
.passo-ajuda {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--text-mute);
}
.passo-alerta {
  margin-top: 14px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.passo-alerta:empty { display: none; }

/* ---------- opções em chip ---------- */
.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.opcao {
  position: relative;
  cursor: pointer;
}
/* O input fica por baixo do rótulo, não escondido: display:none o
   tiraria da ordem de tabulação e do leitor de tela. */
.opcao input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.opcao span {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-dim);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.opcao:hover span { border-color: var(--fg); color: var(--fg); }
.opcao input:checked + span {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.opcao input:focus-visible + span {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.passo .field { margin-top: 24px; }

/* ---------- resumo do plano ---------- */
.resumo { position: sticky; top: 104px; }

.resumo-caixa {
  position: relative;
  border: 1px solid var(--line);
  padding: 34px 30px 30px;
  background: var(--sunken);
}
/* Filete cheio só no topo: dá peso à caixa sem fechá-la numa moldura
   pesada, que brigaria com os filetes de 1px do resto da página. */
.resumo-caixa::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: var(--fg);
}

.resumo-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* A frequência é a decisão principal: entra como manchete da caixa. */
.resumo-manchete {
  margin-top: 18px;
  font-family: var(--font-brand);
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
  color: var(--fg);
}
.resumo-manchete em {
  font-style: normal;
  font-size: .5em;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-mute);
}
.resumo-sub {
  margin-top: 8px;
  font-size: .92rem;
  color: var(--text-dim);
}

.resumo-lista {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0;
}
.resumo-lista div {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.resumo-lista div:last-child { border-bottom: 0; }
.resumo-lista dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.resumo-lista dd {
  font-size: .93rem;
  line-height: 1.45;
  color: var(--text);
}
/* "a combinar" é ausência de escolha, não escolha: fica mais apagado. */
.resumo-lista dd[data-vazio="sim"] { color: var(--text-mute); font-style: italic; }

.resumo-carga {
  margin: 24px 0;
  padding: 16px 18px;
  background: rgb(var(--fg-rgb) / .05);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.resumo-carga-n {
  font-family: var(--font-brand);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--fg);
}
.resumo-carga-t {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.resumo-rodape {
  margin-top: 16px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text-mute);
}

/* Piscada curta quando o valor muda: confirma que a escolha entrou,
   sem animar posição (o que faria a caixa tremer a cada clique). */
@keyframes resumo-troca {
  from { opacity: .25; }
  to   { opacity: 1; }
}
.js .resumo-mudou { animation: resumo-troca var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .js .resumo-mudou { animation: none; }
}

.planos-nota {
  margin-top: 40px;
  font-size: .95rem;
  color: var(--text-mute);
}
.planos-nota a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.planos-nota a:hover { color: var(--fg); }

@media (max-width: 980px) {
  .construtor { grid-template-columns: 1fr; gap: 0; }
  /* Sem coluna lateral o resumo não pode grudar: ele passa a ser o
     fecho do formulário, logo acima do botão de envio. */
  .resumo { position: static; margin-top: 36px; }
}