/* ============================================================
   UM LUGAR COMUNIDADE — SISTEMA CLARO — LP ESTRATÉGIA
   componentes.css · componentes e layout de cada capítulo desta
   página. Reset, tokens, @font-face, tipografia base, .env, .ato,
   .grid, foco e utilitários já estão em base.css — não repetidos
   aqui. Animação e revelação (.rev, .linha, cascata de grade,
   respiração de .vaga) estão em motion.css — aqui só o estado
   visual parado e as transições curtas e locais de hover/foco
   que pertencem à interação do próprio componente.
   Página própria: NÃO usa as classes do preview (.swatch, .card,
   .post, .abas, .comparador...) — são de outra peça.
   ============================================================ */


/* ============================================================
   SPRITE — símbolos <use>, nunca visível por conta própria
   ============================================================ */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ============================================================
   PULA — link de acesso rápido, aparece só no foco de teclado
   ============================================================ */
.pula {
  position: absolute;
  top: 0;
  left: var(--e-4);
  z-index: var(--z-modal);
  padding: var(--e-3) var(--e-5);
  background: var(--c-carvao);
  color: var(--c-papel);
  font-family: var(--f-texto);
  font-weight: var(--p-bold);
  font-size: var(--t-mini);
  transform: translateY(-120%);
  transition: transform var(--d-ui) var(--ease-firme);
}

.pula:focus { transform: translateY(var(--e-4)); }


/* ============================================================
   PROGRESSO — barra de leitura fixa no topo
   ============================================================ */
.progresso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: var(--z-nav);
  background: var(--c-linha);
  pointer-events: none;
}

.progresso__i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--c-laranja);
  transform-origin: left center;
}


/* ============================================================
   NAV-PONTOS — navegação lateral, um ponto por capítulo.
   Ponto inativo é bolinha discreta; o do capítulo em tela vira
   o pin do logotipo da Comunidade. Mesma trilha do preview do
   Sistema Claro. Escala de hover/foco vem de motion.css.
   ============================================================ */
.nav-pontos {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
}

.nav-pontos__i {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-carvao);
}

/* bolinha do estado inativo */
.nav-pontos__i::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-fumaca);
  opacity: .7;
  transition:
    background var(--d-micro) var(--ease-suave),
    transform var(--d-micro) var(--ease-suave),
    opacity var(--d-micro) var(--ease-suave);
}

/* pin do logotipo, escondido até o capítulo entrar em tela */
.nav-pontos__i svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(.4);
  transition:
    opacity var(--d-ui) var(--ease-suave),
    transform var(--d-ui) var(--ease-suave);
}

.nav-pontos__i:hover::before,
.nav-pontos__i:focus-visible::before {
  background: var(--c-laranja);
  opacity: 1;
  transform: scale(1.25);
}

.nav-pontos__i:active::before { transform: scale(.9); }

.nav-pontos__i[aria-current="true"]::before { opacity: 0; transform: scale(0); }

.nav-pontos__i[aria-current="true"] svg {
  opacity: 1;
  transform: scale(1);
  color: var(--c-laranja);
}


/* ============================================================
   00 · ABERTURA — capa da peça. Recorte da pessoa fica ao lado
   do bloco de texto, nunca atrás dele — cuidado tomado na régua
   de largura e na reorganização em coluna no breakpoint 768.
   ============================================================ */

/* ------------------------------------------------------------
   HERO — foto inteira no fundo, sem recorte. O veu sobe do papel
   para o texto ter contraste sem apagar a imagem.
   ------------------------------------------------------------ */
.abertura__fundo { position: absolute; inset: 0; z-index: var(--z-fundo); overflow: hidden; }

.abertura__foto {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  display: block;
}

.abertura__veu {
  position: absolute; inset: 0; z-index: var(--z-media);
  background: linear-gradient(
    180deg,
    rgba(244, 240, 234, .10)  0%,
    rgba(244, 240, 234, .18) 30%,
    rgba(244, 240, 234, .62) 62%,
    rgba(244, 240, 234, .92) 84%,
    var(--c-papel) 100%
  );
}

.ato--abertura {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--e-9);
  background: var(--c-papel);
}

.abertura__t {
  margin: var(--e-4) 0 var(--e-5);
  max-width: 14ch;
  font-size: clamp(2.75rem, 8vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: var(--ls-display);
}

.abertura__sub {
  margin: 0;
  font-family: var(--f-texto);
  font-weight: var(--p-medium);
  font-size: var(--t-lead);
  color: var(--c-neblina);
}

/* ============================================================
   CAP — cabeçalho de capítulo, comum a todos. O número é
   grafismo em contorno (fill transparente, stroke em carvão),
   igual ao princípio__n do preview — nunca precisa de contraste
   de texto porque não é lido como texto corrido.
   ============================================================ */
.cap {
  display: grid;
  gap: var(--e-2);
  margin-bottom: var(--e-7);
}

.cap__n {
  margin: 0 0 calc(var(--e-3) * -1);
  font-family: var(--f-display);
  font-weight: var(--p-black);
  line-height: 0.76;
  letter-spacing: -0.07em;
  color: var(--c-laranja);
}

.cap__t {
  min-width: 0;
  font-family: var(--f-display);
  font-weight: var(--p-black);
  text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}


/* ============================================================
   DESTAQUE — três usos: a frase grande de impacto (base), o
   rótulo pequeno antes de um bloco (--rotulo) e o fecho em
   laranja (--laranja). O rótulo some inteiro e vira outra coisa;
   não é uma variação de tamanho, é outro papel tipográfico.
   ============================================================ */
.destaque {
  margin-block: var(--e-7);
  max-width: 34rem;
  font-family: var(--f-display);
  font-weight: var(--p-xbold);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-carvao);
}

.destaque--rotulo {
  margin-block: 0 var(--e-3);
  max-width: none;
  font-family: var(--f-texto);
  font-weight: var(--p-bold);
  text-transform: uppercase;
  font-size: var(--t-kicker);
  line-height: 1.2;
  letter-spacing: var(--ls-kicker);
  color: var(--c-neblina);
}

/* laranja em texto só com peso >=500 e tamanho >=18px — a frase
   aqui é xbold e nunca cai abaixo de 22px, dentro da mitigação
   registrada em CLAUDE.md para o laranja oficial sobre o papel */
.destaque--laranja {
  margin-block: var(--e-5) 0;
  max-width: 30rem;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  color: var(--c-laranja-texto);
}


/* ============================================================
   SUB — subtítulo de seção (h3) e sua variação menor (h4).
   Tipografia (Condensed, caixa alta) já vem do h3/h4 em base.css.
   ============================================================ */
.sub { margin-bottom: var(--e-4); }

.sub--menor {
  margin-bottom: var(--e-3);
  font-size: var(--t-mini);
  font-weight: var(--p-bold);
  color: var(--c-neblina);
}


/* ============================================================
   FOTOGRAFIA — moldura simples de foto única (.faixa-foto). A
   imagem ocupa a largura do bloco e mantém a proporção do
   arquivo.
   ============================================================ */
.faixa-foto img {
  width: 100%;
  height: auto;
}


/* ============================================================
   02 · BIO — coluna do link personalizado ao lado da coluna de
   destaques ainda sem arte. align-items:start evita que uma
   coluna alta estique a outra.
   ============================================================ */
/* ------------------------------------------------------------
   VAGA — placeholder de imagem ainda não produzida. Lê como
   espaço reservado com acabamento, não como imagem quebrada:
   moldura tracejada, campo levemente diferente do papel, rótulo
   centralizado. A respiração sutil é de motion.css.
   ------------------------------------------------------------ */
.vaga {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-4);
  text-align: center;
  background: var(--c-papel-2);
  border: 1px dashed var(--c-linha-forte);
}

.vaga--1x1 { aspect-ratio: 1; }

/* ------------------------------------------------------------
   MOCK-BIO — moldura de celular. Única exceção ao canto reto do
   sistema. Altura travada e imagem alinhada ao topo porque a
   captura da linkpage é bem mais longa que a tela do mockup.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   LINK-BIO — CTA para a linkpage. A seta desliza no hover; o
   botão inteiro sobe um pouco (regra geral em motion.css, via
   .btn, .link-bio).
   ------------------------------------------------------------ */
.link-bio {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
  padding: var(--e-3) var(--e-5);
  background: var(--c-laranja);
  color: var(--c-branco);
  font-family: var(--f-display);
  font-weight: var(--p-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-titulo);
  font-size: var(--t-corpo);
}

.link-bio:hover { color: var(--c-branco); }

.link-bio svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--d-micro) var(--ease-firme);
}

.link-bio:hover svg,
.link-bio:focus-visible svg { transform: translateX(4px); }


/* ============================================================
   CARROSSEL — usado em 03 · A MENSAGEM (slides do carrossel de
   apresentação) e em 05 · FORTALECENDO A MENSAGEM (fotos dos
   encontros). Ambas são seções de campo escuro (data-campo="escuro"
   no HTML); todo componente aqui usa os tokens de cor, nunca um
   literal, para herdar a inversão automaticamente.
   ============================================================ */
.carrossel-bloco { margin-top: var(--e-7); }

.carrossel-bloco__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-4);
  margin-bottom: var(--e-4);
}

.carrossel-bloco__topo .destaque--rotulo { margin: 0 auto 0 0; }

.carrossel__nav {
  display: flex;
  gap: var(--e-2);
  flex-shrink: 0;
}

.carrossel__b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--c-papel-2);
  border: 1px solid var(--c-linha-forte);
  color: var(--c-carvao);
  transition: background-color var(--d-ui) var(--ease-firme),
              border-color var(--d-ui) var(--ease-firme),
              color var(--d-ui) var(--ease-firme);
}

.carrossel__b svg { width: 1.25rem; height: 1.25rem; }

.carrossel__b:hover {
  background: var(--c-laranja);
  border-color: var(--c-laranja);
  color: var(--c-branco);
}

.carrossel__b:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

/* trilho com scroll-snap nativo — funciona no dedo e no trackpad
   sem depender do JS; os botões só adiantam o que o scroll já
   faz sozinho. Scrollbar escondida, scroll mantido. */
.carrossel { position: relative; }

.carrossel__trilho {
  display: flex;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carrossel__trilho::-webkit-scrollbar { display: none; }

/* min(78%, 22rem): no celular ocupa quase a tela toda com um
   respiro do próximo slide; no desktop trava em 22rem pra não
   virar um slide gigante — o próximo sempre espia na borda */
.carrossel__i {
  flex: 0 0 min(78%, 22rem);
  margin: 0;
  scroll-snap-align: start;
}

.carrossel__i img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}


/* ============================================================
   05 · FORTALECENDO A MENSAGEM — só a prova de comentário aqui.
   ------------------------------------------------------------
   PROVA — prints de comentário do Instagram emoldurados: fundo
   branco, borda fina, sombra baixa. Lado a lado em duas colunas
   pra não ocupar a altura toda da tela.
   ============================================================ */
.prova {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-top: var(--e-6);
}

.prova__par {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: var(--e-3);
  max-width: 40rem;
}

.prova__img {
  margin: 0;
  padding: var(--e-2);
  background: var(--c-branco);
  border: 1px solid var(--c-linha);
  box-shadow: var(--sombra-baixa);
}

.prova__img img { width: 100%; height: auto; }


/* ============================================================
   06 · EDITORIAS SEMANAIS — os três objetivos (.tripe) e os
   sete formatos em cartão numerado (.lista-cards + .card-item).
   ------------------------------------------------------------
   TRIPE — três blocos de peso igual; o do meio carrega o campo
   laranja pra quebrar a repetição visual dos três iguais.
   ============================================================ */
.tripe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  margin: var(--e-6) 0 var(--e-8);
  padding: 0;
  list-style: none;
}

.tripe__i {
  margin: 0;
  padding: var(--e-6) var(--e-5);
  background: var(--c-papel-2);
  border: 1px solid var(--c-linha);
  font-family: var(--f-display);
  font-weight: var(--p-bold);
  text-transform: uppercase;
  font-size: var(--t-h4);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--c-carvao);
}

.tripe__i:nth-child(2) {
  background: var(--c-laranja);
  border-color: var(--c-laranja);
  color: var(--c-branco);
}

/* ------------------------------------------------------------
   LISTA-CARDS — container genérico de cartões em grade; os
   modificadores mudam só a contagem de colunas, o cartão em si
   muda de classe filha (.card-item, .pergunta ou .passo).
   ------------------------------------------------------------ */
.lista-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  margin: var(--e-6) 0 0;
  padding: 0;
  list-style: none;
}

.lista-cards--perguntas { grid-template-columns: repeat(2, 1fr); }
.lista-cards--passos { grid-template-columns: repeat(4, 1fr); }

/* CARD-ITEM — cartão de formato. Ganha presença por três frentes:
   filete laranja no topo, sombra que o descola do papel e o número
   em bloco chapado. O laranja chapado é uso liberado pelo sistema. */
.card-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding: var(--e-5);
  background: var(--c-branco);
  border: 1px solid var(--c-linha);
  border-top: 4px solid var(--c-laranja);
  box-shadow: var(--sombra-media);
  transition: transform var(--d-ui) var(--ease-firme),
              box-shadow var(--d-ui) var(--ease-firme);
}

.card-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
}

.card-item p { font-weight: var(--p-medium); }

.card-item__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-family: var(--f-display);
  font-weight: var(--p-black);
  font-size: 1.625rem;
  line-height: 1;
  color: var(--c-branco);
  background: var(--c-laranja);
  -webkit-text-stroke: 0;
}


/* ============================================================
   07 · TROCA COM O PÚBLICO
   ============================================================ */
.blocos-troca { align-items: center; }

/* LISTA-SIMPLES — marcador próprio, um traço curto em laranja,
   no lugar do disc padrão do navegador */
.lista-simples {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.lista-simples li {
  position: relative;
  padding-left: var(--e-5);
  margin-top: 0;
}

.lista-simples li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 2px;
  background: var(--c-laranja);
}

/* PERGUNTA — cartão de prompt para a caixinha de perguntas e
   para os incentivos de repost; borda de citação, sem número */
.pergunta {
  margin: 0;
  padding: var(--e-5);
  background: var(--c-papel-2);
  border-left: 3px solid var(--c-laranja);
}

/* BLOCO-MENSAGENS — caixa de destaque final do capítulo */
.bloco-mensagens {
  margin-top: var(--e-8);
  padding: var(--e-6);
  background: var(--c-papel-2);
  border-left: 3px solid var(--c-laranja);
}


/* ============================================================
   08 · RESPOSTAS À INTERAÇÃO — dois cartões lado a lado
   ============================================================ */
.card-bloco {
  padding: var(--e-6);
  background: var(--c-branco);
  border: 1px solid var(--c-linha);
}

.card-bloco p { color: var(--c-neblina); }


/* ============================================================
   09 · CONEXÃO ENTRE AGÊNCIA E CLIENTE
   ------------------------------------------------------------
   CHECKLIST — ícone de check alinhado com a primeira linha do
   texto, tamanho fixo, sempre em laranja (grafismo, sem
   restrição de contraste — não é texto corrido).
   ============================================================ */
.checklist {
  margin: var(--e-6) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.checklist__i {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
}

.checklist__i svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2em;
  color: var(--c-laranja);
}


/* ============================================================
   10 · PRÓXIMOS PASSOS — reusa .lista-cards--passos (acima)
   ------------------------------------------------------------
   PASSO — cartão de próxima ação, filete superior em laranja
   ============================================================ */
.passo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  background: var(--c-branco);
  border: 1px solid var(--c-linha);
  border-top: 4px solid var(--c-laranja);
}

.passo__n {
  font-family: var(--f-display);
  font-weight: var(--p-black);
  font-size: var(--t-h4);
  color: var(--c-laranja-texto);
}


/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape {
  border-top: 1px solid var(--c-linha);
  padding-block: var(--e-8);
}

.rodape .env {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}

.rodape__logo { width: clamp(8rem, 18vw, 11rem); }

.rodape__credito {
  margin: 0;
  font-size: var(--t-mini);
  color: var(--c-neblina);
}


/* ============================================================
   RESPONSIVO — 1440 / 1024 / 768 / 480
   Conteúdo largo rola dentro do próprio container (o carrossel),
   nunca no body: nenhuma regra abaixo abre scroll horizontal
   na página.
   ============================================================ */
@media (max-width: 1440px) {
}

@media (max-width: 1024px) {
  .nav-pontos { right: var(--e-3); }

  .cap { gap: var(--e-4); }

.lista-cards--passos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-pontos { display: none; }

  .ato--abertura {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto;
    padding-block: var(--e-8) 0;
  }
  .ato--abertura .env { max-width: none; }
    position: relative;
    right: auto; bottom: auto;
    z-index: auto;
    margin: var(--e-6) auto 0;
    width: min(70%, 20rem);
    max-width: 100%;
    height: auto;
  }

  .tripe { grid-template-columns: 1fr; }
  .lista-cards,
  .lista-cards--passos { grid-template-columns: repeat(2, 1fr); }
  .lista-cards--perguntas { grid-template-columns: 1fr; }

  .card-item, .passo, .pergunta, .card-bloco, .bloco-mensagens {
    padding: var(--e-4);
  }

.prova__par { max-width: 100%; }
}

@media (max-width: 480px) {
  .lista-cards,
  .lista-cards--passos,
  .lista-cards--perguntas { grid-template-columns: 1fr; }

.prova__par { grid-template-columns: 1fr; max-width: 22rem; }

  .carrossel__trilho { gap: var(--e-3); }
  .carrossel-bloco__topo { gap: var(--e-3); }

  .destaque { font-size: clamp(1.5rem, 7.5vw, 2rem); }

  .rodape { padding-block: var(--e-7); }
}

@media (max-width: 760px) {
  .abertura__t { max-width: none; }
}

/* ------------------------------------------------------------
   AJUSTES DE PESO E ESCALA (pedido do cliente):
   titulo mais grosso com kerning mais justo, corpo de texto maior.
   ------------------------------------------------------------ */
.cap__n, .passo__n { color: var(--c-laranja); -webkit-text-stroke: 0; }

/* no campo escuro o laranja segue legivel; sobre carvao ele passa folgado */
[data-campo="escuro"] .cap__n,
[data-campo="escuro"] .passo__n { color: var(--c-brasa); }

h1, h2, h3, h4,
.abertura__t, .cap__t, .destaque, .sub, .tripe__i {
  font-weight: var(--p-black);
  letter-spacing: -0.035em;
}

.abertura__t { letter-spacing: -0.045em; }

.destaque {
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.sub { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -0.03em; }
.sub--menor { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

.tripe__i { font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 0.98; }

/* corpo de texto maior em toda a pagina */
body { font-size: 1.1875rem; }
p, li { font-size: 1.1875rem; line-height: 1.6; }
.lead { font-size: clamp(1.3125rem, 1.8vw, 1.625rem); line-height: 1.5; }
.nota { font-size: 1rem; }
.kicker { font-size: 0.875rem; }
.card-item p, .pergunta p, .passo p, .checklist__i p, .card-bloco p { font-size: 1.125rem; }
.lista-simples li { font-size: 1.1875rem; }

@media (max-width: 640px) {
  body, p, li, .lista-simples li { font-size: 1.0625rem; }
}

/* o kicker do hero fica sobre a foto: precisa de peso e cor propria */
.ato--abertura .kicker { color: var(--c-carvao); font-weight: var(--p-bold); }

/* numero triplicado (pedido do cliente): ele vira o marco visual da
   secao. Fica acima do titulo, com o titulo encostando na base dele. */
[data-campo="escuro"] .cap__n { color: var(--c-brasa); }

@media (max-width: 640px) {

}


/* ============================================================
   NUMERAÇÃO DOS CAPÍTULOS — tamanho triplicado.
   Bloco único e no fim do arquivo de propósito: o tamanho estava
   declarado em quatro lugares (regra base e três media queries) e
   a última do arquivo vencia, anulando o aumento.
   ============================================================ */
.cap__n {
  font-size: clamp(4.5rem, 11vw, 9.75rem);
  line-height: 0.74;
  letter-spacing: -0.07em;
  color: var(--c-laranja);
  -webkit-text-stroke: 0;
}
[data-campo="escuro"] .cap__n { color: var(--c-brasa); }

@media (max-width: 1024px) { .cap__n { font-size: clamp(3.75rem, 12vw, 6rem); } }
@media (max-width: 768px)  { .cap__n { font-size: clamp(3.375rem, 13vw, 4.875rem); } }
@media (max-width: 480px)  { .cap__n { font-size: clamp(2.625rem, 15vw, 3.75rem); } }


/* ------------------------------------------------------------
   HERO — o conteudo usa o MESMO container do resto da pagina
   (.env herda max-width e gutter do base.css), alinhado a esquerda
   e centralizado na vertical da primeira dobra.
   ------------------------------------------------------------ */
.ato--abertura .env {
  position: relative;
  z-index: var(--z-tipo);
  width: 100%;
  text-align: left;
}

.ato--abertura .kicker,
.abertura__t,
.abertura__sub { text-align: left; margin-inline: 0; }


/* ============================================================
   AJUSTE DE PESO E ESCALA (pedido do cliente)
   - titulos um peso abaixo: 800 (ExtraBold) no lugar de 900 (Black)
   - corpo de texto no tamanho do lead em toda a pagina
   - corpo um peso abaixo: 400 (Regular) no lugar de 500 (Medium)
   ============================================================ */
h1, h2, h3, h4,
.abertura__t, .cap__t, .destaque, .sub, .tripe__i {
  font-weight: var(--p-xbold);
}

/* o corpo herda o tamanho do lead — uma so escala de leitura */
body { font-size: clamp(1.3125rem, 1.8vw, 1.625rem); }

p, li,
.lead,
.lista-simples li,
.card-item p, .pergunta p, .passo p, .checklist__i p, .card-bloco p {
  font-size: clamp(1.3125rem, 1.8vw, 1.625rem);
  font-weight: var(--p-regular);
  line-height: 1.55;
}

/* strong continua marcando, so que sem saltar dois pesos de uma vez */
p strong, li strong { font-weight: var(--p-bold); }

.nota { font-size: 1.0625rem; font-weight: var(--p-regular); }
.kicker { font-size: 0.875rem; }

@media (max-width: 640px) {
  body, p, li, .lead, .lista-simples li,
  .card-item p, .pergunta p, .passo p, .checklist__i p, .card-bloco p {
    font-size: 1.1875rem;
  }
}



/* ------------------------------------------------------------
   SEÇÃO 2 — o link e os destaques ocupam a largura toda, um
   embaixo do outro. A proporção quadrada fica no item da lista,
   não na imagem: com aspect-ratio na img o grid esticava ela.
   ------------------------------------------------------------ */
.bio-link { margin-top: var(--e-7); }
.bio-destaques { margin-top: var(--e-8); }

.destaques {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0 0 var(--e-3);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1.25rem);
  align-items: start;
}

/* Capa de destaque é círculo com anel, como no Instagram — a
   segunda exceção ao canto reto do sistema, junto do .mock-bio.
   O anel é o padding: mostra o papel entre a borda e a capa. */
.destaques__i {
  margin: 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 3px;
  border: 1px solid var(--c-linha-forte);
  border-radius: 50%;
}

.destaques__i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

@media (max-width: 760px) {
  .destaques {
    grid-template-columns: repeat(6, minmax(5rem, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .destaques::-webkit-scrollbar { display: none; }
}


/* ============================================================
   CAPA — assinatura no lugar da palavra. A primeira linha do h1
   ("Um Lugar") recua para papel de sobrenome e a segunda vira o
   logotipo Comunidade, que passa a carregar o peso do título.
   O alt do <img> mantém o h1 lendo "Um Lugar Comunidade".
   ============================================================ */
.abertura__t {
  max-width: none;
  font-size: clamp(1.5rem, 3.6vw, 3.25rem);
  line-height: 1;
}

/* o logo sobe 20px para encostar em "Um Lugar": os dois formam
   um lockup so, nao duas linhas soltas */
.linha--logo { margin-top: -20px; }

.abertura__logo {
  display: block;
  width: clamp(19.5rem, 54.6vw, 49.4rem);
  max-width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .abertura__logo { width: min(98%, 28.6rem); }
}

/* ============================================================
   PALETA MINI — cards compactos de cor na coluna ao lado do
   texto da seção Layouts. Sem rótulo: as amostras se explicam.
   As amostras usam hex literal de propósito: dentro de
   [data-campo="escuro"] os tokens de cor estão invertidos e
   var(--c-papel) devolveria o carvão.
   ============================================================ */
.paleta-mini { min-width: 0; }

.paleta-mini__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 9 cores = 3 fileiras cheias */
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-cor {
  display: flex;
  flex-direction: column;
  padding: var(--e-3);
  background: var(--c-branco);
  border: 1px solid var(--c-linha);
}

.mini-cor__amostra {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--e-2);
  border: 1px solid var(--c-linha-forte);
}

.mini-cor__meta {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.mini-cor__meta strong {
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: var(--t-mini);
  letter-spacing: var(--ls-titulo);
  line-height: 1.1;
  color: var(--c-carvao);
}

.mini-cor__meta span {
  font-family: var(--f-texto);
  font-size: var(--t-mini);
  font-variant-numeric: tabular-nums;
  color: var(--c-laranja-texto);
}

.mini-cor--papel         .mini-cor__amostra { background: #F4F0EA; }
.mini-cor--offwhite      .mini-cor__amostra { background: #EBEBEB; }
.mini-cor--laranja       .mini-cor__amostra { background: #EC5E23; }
.mini-cor--laranja-texto .mini-cor__amostra { background: #C24100; }
.mini-cor--brasa         .mini-cor__amostra { background: #FF8A4C; }
.mini-cor--carvao        .mini-cor__amostra { background: #241F1B; }
.mini-cor--grafite       .mini-cor__amostra { background: #464647; }
.mini-cor--neblina       .mini-cor__amostra { background: #6E665E; }
.mini-cor--fumaca        .mini-cor__amostra { background: #A9A199; }

@media (max-width: 480px) {
  .paleta-mini__lista { grid-template-columns: repeat(2, 1fr); }
}


/* ------------------------------------------------------------
   FOTO RECORTADA — a foto vertical do pregador (07 · Troca com o
   Público) tinha 969px de altura ao lado de uma lista de 275px,
   e a coluna de texto boiava no meio de um vazio. O recorte tira
   a cortina vazia do topo e o piso do rodapé; a janela fica em
   20%–87% do arquivo, então a cabeça (25%) entra com folga.
   ------------------------------------------------------------ */
.faixa-foto--recorte img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 60%;
}


/* ------------------------------------------------------------
   RODAPÉ — a marca do cliente à esquerda e a assinatura da
   agência à direita, sem competir de tamanho.
   ------------------------------------------------------------ */
.rodape .rodape__linha {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-7);
  flex-wrap: wrap;
}

.rodape__logo { width: clamp(11rem, 20vw, 16rem); height: auto; }

.rodape__agencia {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e-2);
  text-align: right;
}

.rodape__credito {
  margin: 0;
  font-size: 0.9375rem;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-neblina);
}

.rodape__briin { width: clamp(6rem, 11vw, 8.5rem); height: auto; }

@media (max-width: 640px) {
  .rodape .rodape__linha { flex-direction: column; align-items: flex-start; gap: var(--e-6); }
  .rodape__agencia { align-items: flex-start; text-align: left; }
}

/* ------------------------------------------------------------
   MONOGRAMA — assinatura discreta, fixa no canto inferior direito.
   Fica acima do conteúdo mas não intercepta clique, e some no
   celular, onde rouba área de leitura.
   ------------------------------------------------------------ */
.monograma {
  position: fixed;
  right: clamp(1rem, 2.2vw, 2.25rem);
  bottom: clamp(1rem, 2.2vw, 2.25rem);
  z-index: var(--z-ui);
  width: clamp(2.25rem, 3.4vw, 3.25rem);
  height: auto;
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--d-ui) var(--ease-suave);
}

@media (max-width: 900px) { .monograma { display: none; } }
@media print { .monograma { display: none; } }

/* ============================================================
   VISOR — tela cheia das peças do carrossel
   ------------------------------------------------------------
   Três camadas empilhadas:
   · .visor__fundo  campo carvão que escurece a página
   · .visor__palco  trilho com todas as peças, translada no eixo X
   · .visor__voo    cópia da miniatura que voa do carrossel até o
                    palco na abertura e volta no fechamento
   O voo só é exato porque miniatura e peça têm a mesma proporção
   (4/5 nos dois carrosséis) — a escala é uniforme, sem distorção.
   ============================================================ */
.visor {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  /* sem isto o navegador entende o arraste como rolagem, assume o
     gesto e dispara pointercancel no segundo quadro — o swipe e o
     puxar-para-fechar nunca chegam a acontecer */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.visor[hidden] { display: none; }

/* material em vez de véu: a 96% de opacidade o texto claro da página
   ainda vazava 4% e ficava legível atrás da peça. Carvão quase cheio
   mais desfoque resolve e ainda dá profundidade ao campo. */
.visor__fundo {
  position: absolute;
  inset: 0;
  background: rgba(36, 31, 27, .88);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  backdrop-filter: blur(28px) saturate(120%);
  opacity: 0;
  transition: opacity var(--d-bloco) var(--ease-saida);
}

.visor.is-aberto .visor__fundo { opacity: 1; }

/* sem backdrop-filter o desfoque não acontece e o vazamento voltaria:
   fecha o campo em carvão sólido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .visor__fundo { background: #241F1B; }
}

/* o palco entra só depois que o voo pousa: até lá fica invisível
   para não aparecer duas vezes a mesma peça */
.visor__palco {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--d-micro) linear;
}

.visor.is-pousado .visor__palco { opacity: 1; }

.visor__trilho {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform var(--d-bloco) var(--ease-saida);
}

.visor__i {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--e-5), 6vh, var(--e-9)) clamp(var(--e-4), 5vw, var(--e-9));
}

.visor__i img {
  -webkit-user-drag: none;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* peça vizinha entra com um resto de escala — o deslize ganha
     profundidade em vez de parecer um corte seco */
  transform: scale(.94);
  opacity: .4;
  transition: transform var(--d-bloco) var(--ease-saida),
              opacity var(--d-bloco) var(--ease-saida);
}

.visor__i.is-atual img { transform: scale(1); opacity: 1; }

.visor__voo {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  object-fit: cover;
  transform-origin: top left;
  pointer-events: none;
  will-change: transform;
}

.visor__voo[hidden] { display: none; }

/* ---- controles ---- */
.visor__ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.visor__ui > * { pointer-events: auto; }

.visor__b {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: rgba(244, 240, 234, .10);
  border: 1px solid rgba(244, 240, 234, .22);
  color: #F4F0EA;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--d-ui) var(--ease-firme),
              background-color var(--d-ui) var(--ease-firme),
              border-color var(--d-ui) var(--ease-firme),
              transform var(--d-ui) var(--ease-firme);
}

/* --visor-ui: o arraste para baixo apaga os controles junto com o
   campo; sem isso os botões ficam boiando sobre a peça que sai */
.visor.is-pousado .visor__b { opacity: var(--visor-ui, 1); }

.visor__b svg { width: 1.35rem; height: 1.35rem; }

.visor__b:hover {
  background: var(--c-laranja);
  border-color: var(--c-laranja);
}

.visor__b:active { transform: scale(.94); }

.visor__b:disabled { opacity: .2; cursor: not-allowed; pointer-events: none; }
.visor.is-pousado .visor__b:disabled { opacity: .2; }

.visor__b--fechar { top: var(--e-4); right: var(--e-4); }
.visor__b--ant    { top: 50%; left: var(--e-4); margin-top: -1.5rem; }
.visor__b--prox   { top: 50%; right: var(--e-4); margin-top: -1.5rem; }

.visor__conta {
  position: absolute;
  top: var(--e-4);
  left: var(--e-4);
  margin: 0;
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: var(--t-mini);
  letter-spacing: var(--ls-titulo);
  font-variant-numeric: tabular-nums;
  color: rgba(244, 240, 234, .72);
  opacity: 0;
  transition: opacity var(--d-ui) var(--ease-firme);
}

.visor.is-pousado .visor__conta { opacity: var(--visor-ui, 1); }

/* enquanto o dedo arrasta, nada tem transição: o movimento
   acompanha o ponteiro quadro a quadro */
.visor.is-arrastando .visor__trilho,
.visor.is-arrastando .visor__i img,
.visor.is-arrastando .visor__b,
.visor.is-arrastando .visor__conta,
.visor.is-arrastando .visor__fundo { transition: none; }

/* ---- miniatura clicável no carrossel da página ---- */
.carrossel__zoom {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  transition: transform var(--d-ui) var(--ease-firme),
              box-shadow var(--d-ui) var(--ease-firme);
}

.carrossel__zoom:hover { transform: scale(1.015); box-shadow: var(--sombra-media); }
.carrossel__zoom:active { transform: scale(.99); }

/* a peça que está aberta no visor fica invisível no carrossel para
   não duplicar a imagem enquanto o voo acontece */
.carrossel__zoom.is-no-visor { visibility: hidden; }

@media (max-width: 640px) {
  .visor__b { width: 2.75rem; height: 2.75rem; }
  .visor__b--ant  { top: auto; bottom: var(--e-4); left: var(--e-4); margin-top: 0; }
  .visor__b--prox { top: auto; bottom: var(--e-4); right: var(--e-4); margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .visor__i img { transform: none; opacity: 1; }
  .carrossel__zoom:hover { transform: none; }
}