/* Comunidade GUARDIÕES — folha da página.

   Herda tokens.css do consórcio sem tocar em nenhum valor: mesma tinta, mesmo
   osso, mesma escala. A razão não é economia — é que aquela paleta é a única
   desta casa que passou por medição de contraste, e refazer paleta é refazer a
   medição.

   Duas regras que vieram de erro cometido antes e que valem aqui inteiras:

   1. FUNDO CLARO, ESCURO COMO RECURSO. O escuro aparece DUAS vezes em nove
      seções: a citação assinada e o fecho. Escuro por toda parte achata — tudo
      passa a ter o mesmo peso e nada puxa o olho, que foi exatamente o que o
      CEO chamou de "sem vida".
   2. O OURO TEM DOIS VALORES. --ouro sobre claro, --ouro-luz sobre escuro.
      Trocar reprova contraste. */

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

body {
  margin: 0;
  background: var(--osso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo-2);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinta); color: var(--osso-sobre-escuro);
  padding: 12px 18px; border-radius: 0 0 var(--raio) 0;
}
.pular:focus { left: 0; }

.limite { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- topo ---------- */
.faixa-topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 244, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fio);
}
.faixa-topo-grade { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca img { border-radius: 7px; }
.marca span { font-family: var(--titulo); font-weight: var(--p-forte); letter-spacing: 0.14em; font-size: var(--t-micro); }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px;
  background: var(--tinta); color: var(--osso-sobre-escuro);
  border: 1px solid var(--tinta); border-radius: 100px;
  font-family: var(--sans); font-size: var(--t-corpo-2); font-weight: var(--p-medio);
  text-decoration: none; cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.botao:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(17, 28, 53, 0.6); }
.botao:focus-visible { outline: var(--foco); outline-offset: 3px; }
.botao-vazado { background: transparent; color: var(--tinta); }
.botao-claro { background: var(--osso); color: var(--tinta); border-color: var(--osso); }
.botao-compacto { min-height: 40px; padding: 0 20px; font-size: var(--t-etiqueta); }

/* ---------- abertura ---------- */
.abertura { padding: var(--e-6) 0 var(--e-5); }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: var(--e-6); align-items: center; }
.sobrancelha {
  font-size: var(--t-etiqueta); letter-spacing: var(--ls-etiqueta); text-transform: uppercase;
  color: var(--tinta-mudo); margin: 0 0 var(--e-2);
}
.abertura h1 {
  font-family: var(--titulo); font-size: var(--t-titulo-1); font-weight: var(--p-forte);
  line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo);
  margin: 0 0 var(--e-3); max-width: 17ch; text-wrap: balance;
}
.linha-fina { font-size: var(--t-corpo); color: var(--tinta-2); max-width: 46ch; margin: 0 0 var(--e-4); }
.cta-par { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }
.rodape-cta { font-size: var(--t-micro); color: var(--tinta-mudo); max-width: 46ch; margin: 0; }
.rodape-cta strong { color: var(--tinta); font-weight: var(--p-medio); }

.abertura-figura { margin: 0; }
.abertura-figura img { border-radius: var(--raio-g); box-shadow: 0 30px 70px -40px rgba(17, 28, 53, 0.7); }
.abertura-figura figcaption {
  margin-top: var(--e-1); font-size: var(--t-etiqueta); color: var(--tinta-mudo);
  max-width: 44ch; line-height: 1.45;
}

/* ---------- seções ---------- */
.secao { padding: var(--e-6) 0; }
.secao-clara { background: var(--osso-2); }
.secao h2 {
  font-family: var(--titulo); font-size: var(--t-titulo-2); font-weight: var(--p-forte);
  line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo);
  margin: 0 0 var(--e-3); max-width: 20ch; text-wrap: balance;
}
.texto-largo { font-size: var(--t-corpo); color: var(--tinta-2); max-width: 46ch; margin: 0 0 var(--e-2); }
.destaque-linha {
  border-left: 3px solid var(--ouro); padding-left: var(--e-2);
  color: var(--tinta); font-style: italic;
}
.nota-secao { font-size: var(--t-micro); color: var(--tinta-mudo); max-width: 56ch; margin: var(--e-3) 0 0; }
.nota-secao strong { color: var(--tinta-2); font-weight: var(--p-medio); }

/* ---------- os quatro materiais ---------- */
.materiais { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--e-2); }
.materiais li {
  background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio-g);
  padding: var(--e-3); display: flex; flex-direction: column; gap: 6px;
}
.material-num { font-family: var(--titulo); font-size: var(--t-etiqueta); font-weight: var(--p-forte); color: var(--ouro); letter-spacing: 0.1em; }
.materiais h3 { font-family: var(--titulo); font-size: var(--t-titulo-3); font-weight: var(--p-forte); margin: 0; }
.materiais p { margin: 0; font-size: var(--t-micro); color: var(--tinta-2); }
.material-quando {
  margin-top: auto !important; padding-top: var(--e-2);
  font-size: var(--t-etiqueta) !important; color: var(--tinta-mudo) !important;
  border-top: 1px solid var(--fio);
}

/* ---------- passos ---------- */
.passos { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e-2); counter-reset: p; }
.passos li { counter-increment: p; padding: var(--e-3); background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio-g); }
.passos li::before {
  content: counter(p, decimal-leading-zero);
  display: block; font-family: var(--titulo); font-size: var(--t-etiqueta);
  font-weight: var(--p-forte); color: var(--ouro); letter-spacing: 0.1em; margin-bottom: 6px;
}
.passos strong { display: block; font-family: var(--titulo); font-size: var(--t-titulo-3); font-weight: var(--p-forte); margin-bottom: 4px; }
.passos span { font-size: var(--t-micro); color: var(--tinta-2); }

/* ---------- faixas escuras: DUAS na página ---------- */
.faixa-escura { background: var(--tinta); color: var(--osso-sobre-escuro); padding: var(--e-6) 0; }
.faixa-escura blockquote { margin: 0; max-width: 34ch; }
.faixa-escura blockquote p {
  font-family: var(--titulo); font-size: var(--t-titulo-2); font-weight: var(--p-leve);
  line-height: 1.22; letter-spacing: var(--ls-titulo); margin: 0 0 var(--e-3);
}
.faixa-escura footer span { font-size: var(--t-micro); color: var(--ouro-luz); letter-spacing: 0.06em; }
.faixa-fecho { text-align: left; padding: var(--e-7) 0; }
.faixa-fecho h2 {
  font-family: var(--titulo); font-size: var(--t-titulo-2); font-weight: var(--p-forte);
  line-height: var(--lh-titulo); letter-spacing: var(--ls-titulo); margin: 0 0 var(--e-1); max-width: 20ch;
}
.faixa-fecho p { font-size: var(--t-corpo); color: var(--mudo-sobre-escuro); max-width: 46ch; margin: 0 0 var(--e-4); }

/* ---------- recusa ---------- */
.recusa { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-2); max-width: 64ch; }
.recusa li { padding: var(--e-3); background: var(--papel); border: 1px solid var(--fio); border-left: 3px solid var(--alerta); border-radius: var(--raio); font-size: var(--t-micro); color: var(--tinta-2); }
.recusa strong { display: block; color: var(--tinta); font-size: var(--t-corpo-2); font-weight: var(--p-medio); margin-bottom: 4px; }
/* O "não" da manchete em vermelho e em itálico: cor NÃO é o único sinal — o
   itálico carrega o mesmo aviso para quem não distingue vermelho. */
.negacao { color: var(--alerta); font-style: italic; }

/* ---------- planos ---------- */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--e-2); margin-top: var(--e-4); max-width: 720px; }
.plano { background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio-g); padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }
.plano-praca { font-size: var(--t-etiqueta); letter-spacing: var(--ls-etiqueta); text-transform: uppercase; color: var(--tinta-mudo); margin: 0; }
.plano-preco { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.plano-preco strong { font-family: var(--titulo); font-size: var(--t-titulo-2); font-weight: var(--p-forte); color: var(--ouro); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-titulo); }
.plano-preco span { font-size: var(--t-micro); color: var(--tinta-mudo); }

/* ---------- FAQ ---------- */
.faq { margin-top: var(--e-4); max-width: 64ch; display: grid; gap: var(--e-1); }
.faq details { background: var(--papel); border: 1px solid var(--fio); border-radius: var(--raio); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px var(--e-3);
  font-size: var(--t-corpo-2); font-weight: var(--p-medio); min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ouro); font-size: 20px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: var(--foco); outline-offset: -2px; border-radius: var(--raio); }
.faq p { margin: 0; padding: 0 var(--e-3) var(--e-3); font-size: var(--t-micro); color: var(--tinta-2); }

/* ---------- rodapé ---------- */
.rodape { background: var(--tinta); color: var(--mudo-sobre-escuro); padding: var(--e-5) 0 var(--e-4); font-size: var(--t-micro); }
.rodape-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--e-4); }
.rodape p { margin: 0 0 4px; }
.rodape-marca { font-family: var(--titulo); font-weight: var(--p-forte); color: var(--osso-sobre-escuro); letter-spacing: 0.08em; }
.rodape a { color: var(--ouro-luz); text-decoration: none; border-bottom: 1px solid transparent; }
.rodape a:hover, .rodape a:focus-visible { border-bottom-color: currentColor; }
.rodape-aviso { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--fio-sobre-escuro); }
.rodape-aviso p { font-size: var(--t-etiqueta); max-width: 88ch; margin-bottom: var(--e-1); }
.rodape-aviso strong { color: var(--osso-sobre-escuro); font-weight: var(--p-medio); }

/* ---------- telas estreitas ---------- */
@media (max-width: 980px) {
  .abertura-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .abertura-figura { order: -1; }
  .abertura h1, .secao h2, .faixa-fecho h2 { max-width: none; }
}
@media (max-width: 620px) {
  .secao, .abertura, .faixa-escura { padding: var(--e-5) 0; }
  .cta-par .botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
  .botao:hover { transform: none; }
}

/* No telefone a foto vinha primeiro e ocupava a tela inteira: a manchete caía
   abaixo da dobra e a primeira coisa que a pessoa via era uma porta. Limitar a
   altura e recortar pelo alto mantém o rosto e devolve a manchete para a
   primeira tela. `object-position: top` e não `center` porque o que importa
   nessa foto é a cabeça e a marca na porta, não os sapatos. */
@media (max-width: 980px) {
  .abertura-figura img {
    max-height: 46vh;
    width: 100%;
    object-fit: cover;
    object-position: 50% 22%;
  }
}

/* ---------- quem escreve ----------
   A seção era um muro de texto. Com o retrato ao lado ela passa a ter
   composição — que é o que o CEO chama de "vida" quando diz que falta. O
   retrato fica à direita e menor que a foto de abertura: é apoio, não capa. */
.autor-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr); gap: var(--e-5); align-items: center; }
.autor-figura { margin: 0; }
.autor-figura img {
  width: 100%; border-radius: var(--raio-g);
  background: var(--papel);
  /* O recorte tem fundo transparente; sem uma base clara ele flutuaria sobre o
     osso e a silhueta perderia o contorno. */
  box-shadow: 0 24px 56px -34px rgba(17, 28, 53, 0.55);
}
.autor-figura figcaption { margin-top: var(--e-1); font-size: var(--t-etiqueta); color: var(--tinta-mudo); }

@media (max-width: 980px) {
  .autor-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .autor-figura { max-width: 320px; }
}

/* O quinto cartão — a Mesa — é o único que descreve algo que ainda NÃO
   aconteceu. Ele não pode parecer igual aos outros quatro: se parecesse, a
   página estaria vendendo plano como entrega. Borda tracejada, fundo do osso em
   vez de papel, e o prazo em alerta. O sinal não é só a cor: o texto diz
   "Ainda não aconteceu" por extenso, que é o que lê quem não distingue
   vermelho. */
.material-planejado {
  background: var(--osso-2) !important;
  border-style: dashed !important;
}
.material-pendente {
  color: var(--alerta) !important;
  font-weight: var(--p-medio);
}