/* Kayto Beraldo — layout e componentes das páginas.
   As cores, fontes e cantos vêm de tokens.css. Aqui não entra cor nova.
   Mobile primeiro: o estilo base é o do celular; telas maiores ajustam no fim. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

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

/* Títulos: Bricolage 800 com espaçamento apertado */
h1, h2, h3 { letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.75rem); line-height: 1.1; margin: 0; }
h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.12; margin: 0 0 1.5rem; }
h3 { font-size: 1.75rem; line-height: 1.1; margin: 0 0 1rem; letter-spacing: -0.025em; }
p  { margin: 0 0 1rem; }

/* O <mark> do navegador já vem amarelo; aqui ele passa a usar o grifo da marca */
mark.grifo { color: var(--tinta); padding: 0 .14em; }

/* Foco visível em tudo que é clicável */
a:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Link "pular para o conteúdo": só aparece ao navegar pelo teclado */
.pular {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--papel);
  padding: .5rem 1rem;
  font-family: var(--fonte-nota);
  z-index: 10;
}
.pular:focus { top: 1rem; }

/* Moldura: largura máxima e respiro lateral de 16px no celular */
.moldura {
  max-width: 75rem;
  margin: 0 auto;
  padding-left: clamp(1rem, 5vw, 3.5rem);
  padding-right: clamp(1rem, 5vw, 3.5rem);
}
.texto { max-width: 42rem; }
/* Moldura e texto no mesmo elemento: a largura da página fica, o conteúdo estreita */
.moldura.texto { max-width: 75rem; }
.moldura.texto > * { max-width: 42rem; }

/* Rótulo de seção em mono, caixa alta: a "anotação" do livro */
.rotulo {
  font-family: var(--fonte-nota);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nota);
  margin: 0 0 1.25rem;
}

/* Cabeçalho */
.topo-site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Assinatura: "Kayto" em tinta + "Beraldo" grifado, em Bricolage 800 */
.assinatura {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
}
.assinatura__grifo {
  background: var(--grifo);
  border-radius: var(--r-grifo);
  padding: 0 .2em;
}

/* Menu: sem JavaScript; no celular os itens quebram linha */
.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.75rem;
}
.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1rem;
}
.menu ul a { display: inline-block; padding: .6rem 0; text-decoration: none; }
.menu ul a:hover { text-decoration: underline; }
.cta--menor { padding: .75rem 1.4rem; font-size: 1rem; }

/* Topo da Home: texto e foto lado a lado no desktop */
.abertura {
  display: grid;
  gap: 3rem;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 4.5rem;
}
.abertura__texto h1 { margin-bottom: 1.75rem; }
.lide { font-size: 1.25rem; color: var(--texto); max-width: 34em; }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

/* Foto de pessoa: P&B (filtro em tokens.css), canto de 10px, legenda em mono */
.foto { margin: 0; }
.foto img {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  object-fit: cover;
  object-position: 62% 40%;
}
.foto--paisagem img { aspect-ratio: 5 / 4; object-position: center; }
.foto__legenda {
  margin-top: .75rem;
  font-family: var(--fonte-nota);
  font-size: .8125rem;
  color: var(--nota);
}

/* Nota sobre a foto: o "papelzinho" colado na imagem, canto de 8px como card */
.foto--com-nota { position: relative; }
.foto__nota {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: 24rem;
  background: var(--papel);
  border-radius: var(--r-card);
  padding: 1rem 1.25rem;
  display: grid;
  gap: .35rem;
}
.foto__nota-rotulo {
  font-family: var(--fonte-nota);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nota);
}
.foto__nota-texto { font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: var(--tinta); }

/* Seções */
.secao { padding: 4.5rem 0; }
.secao--filete > .moldura { border-top: var(--linha); padding-top: 4rem; }
.secao--filete { padding-top: 0; }

/* Seção escura: rótulos em filete (claro o bastante sobre tinta), nota com filete em papel */
.secao--escura .rotulo { color: var(--filete); }
.secao--escura p { color: var(--papel); }
.secao--escura .nota-margem { color: var(--filete); border-left-color: var(--papel); }
.secao--escura a { color: var(--papel); }
.secao--escura a:focus-visible { outline-color: var(--papel); }
.secao--escura .cta { color: var(--papel); }

/* Texto com nota na margem: embaixo no celular, ao lado no desktop */
.com-margem { display: grid; gap: 2rem; }
.h2--largo { font-size: clamp(2rem, 4.6vw, 3.6rem); margin: 0; max-width: 18em; }

/* Três dores da eu-quipe: cards com filete claro sobre o fundo tinta */
.dores {
  display: grid;
  gap: 1rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.dores .card { font-size: 1.1875rem; line-height: 1.55; }
.secao--escura .dores .card { border-color: var(--nota); }
.dores__rotulo {
  display: block;
  font-family: var(--fonte-nota);
  font-size: .8125rem;
  color: var(--filete);
  margin-bottom: .75rem;
}

/* Cards das ofertas: só filete, sem preenchimento */
.ofertas {
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.ofertas .card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
.ofertas .card p { flex: 1; font-size: 1.0625rem; }
/* A bandeirinha marca a oferta de entrada; no card ela fica junto ao filete */
.ofertas .marcador { top: -1px; right: 1.75rem; width: 30px; height: 56px; }

/* Link com seta, para "Ver a mentoria" e afins */
.seta {
  align-self: flex-start;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  text-underline-offset: 5px;
  padding: .5rem 0;
}
.seta::after { content: " →"; }

/* Os seis atributos, numerados em mono */
.atributos {
  display: grid;
  gap: 0 3rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: atributo;
}
.atributos li {
  counter-increment: atributo;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  column-gap: 1rem;
  padding: 1.25rem 0;
  border-top: var(--linha);
  font-size: 1.0625rem;
}
.atributos li::before {
  content: counter(atributo);
  grid-row: span 2;
  font-family: var(--fonte-nota);
  font-size: .8125rem;
  color: var(--nota);
  padding-top: .3rem;
}
.atributos strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--tinta);
  margin-bottom: .25rem;
}

/* Quem fala */
.quem-fala { display: grid; gap: 2.5rem; align-items: center; }
.quem-fala__nome { font-family: var(--fonte-nota); font-size: .9375rem; color: var(--nota); }
.quem-fala__nome strong { color: var(--tinta); font-weight: 500; }

/* Fechamento: bloco escuro com canto de 10px */
.fechamento { padding-bottom: 4rem; }
.secao--escura + .fechamento { padding-top: 4.5rem; }
.fechamento__bloco {
  border-radius: var(--r-foto);
  padding: clamp(2rem, 6vw, 5rem);
}
.fechamento__bloco h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); max-width: 14em; }
.fechamento__bloco > p:not(.acoes):not(.contato) { max-width: 36em; }
.contato {
  font-family: var(--fonte-nota);
  font-size: .9375rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin: 2rem 0 0;
}

/* Menu: página atual sublinhada */
.menu ul a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Headline longa (Mentoria): um pouco menor que a da Home */
.h1--longo { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }

/* Para quem é / não é */
.para-quem { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.para-quem .card { padding: 2rem; }
.para-quem h3 { font-size: 1.5rem; }
.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.lista li { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: .75rem; }
.lista li::before { font-family: var(--fonte-nota); color: var(--tinta); }
.lista--mais li::before { content: "+"; }
.lista--menos li::before { content: "–"; }

/* Passos numerados (Como funciona) */
.passos {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
  border-top: var(--linha-forte);
}
.secao--escura .passos { border-top-color: var(--papel); }
.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: var(--linha);
}
.passos li::before {
  content: "0" counter(passo);
  grid-row: span 2;
  font-family: var(--fonte-nota);
  font-size: .9375rem;
  color: var(--filete);
  padding-top: .3rem;
}
.passos strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  margin-bottom: .25rem;
}

/* Conteúdo que ainda depende de decisão: aparece como marcador explícito */
.reservado {
  font-family: var(--fonte-nota);
  font-size: .9375rem;
  color: var(--nota);
  border: 1px dashed var(--filete);
  border-radius: var(--r-card);
  padding: 1.25rem 1.5rem;
}

.confirmacao h1 { margin-bottom: 1.5rem; }
.reservado-inline { font-family: var(--fonte-nota); font-size: .875em; color: var(--nota); }

/* Formulário: bloco com filete, campos com canto de 6px */
.formulario {
  display: grid;
  gap: 2.5rem;
  border: var(--linha);
  border-radius: var(--r-foto);
  padding: clamp(1.5rem, 5vw, 4rem);
}
.campos { display: grid; gap: 1rem; }
.campos__dupla { display: grid; gap: 1rem; }
.campo { display: grid; gap: .4rem; }
.campo label {
  font-family: var(--fonte-nota);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nota);
}
.campo input,
.campo textarea {
  font: inherit;
  font-size: 1.0625rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--nota);
  border-radius: var(--r-campo);
  padding: .85rem 1rem;
  min-width: 0;
  width: 100%;
}
.campo textarea { resize: vertical; }

/* Pergunta de escolha (rádio): legenda em mono, opções em texto; marcador em tinta, nunca em índigo */
.campo--escolha { border: 0; margin: 0; padding: 0; gap: .5rem; }
.campo--escolha legend {
  font-family: var(--fonte-nota);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nota);
  margin-bottom: .5rem;
  padding: 0;
}
.campo--escolha label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
  padding: .25rem 0;
  cursor: pointer;
}
.campo--escolha input { accent-color: var(--tinta); width: 1.15rem; height: 1.15rem; margin: 0; }
.campo--escolha input:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

/* Contato em mono sobre fundo claro (fechamento da Home) */
.contato--claro { margin-top: 1.5rem; }
.campo input:focus-visible,
.campo textarea:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
button.cta { justify-self: start; font-size: 1.0625rem; cursor: pointer; }
button.cta:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.campos__aviso { font-family: var(--fonte-nota); font-size: .8125rem; color: var(--nota); margin: 0; }
.escondido { position: absolute; left: -9999px; }

/* Topo só com texto (Treinamentos, Consultoria) */
.abertura--so-texto { padding-bottom: 3.5rem; }
.abertura--so-texto .texto { max-width: 54rem; }
.abertura--so-texto h1 { margin-bottom: 1.75rem; }

/* "eu-quipe" nunca quebra no hífen */
.sem-quebra { white-space: nowrap; }

/* Bloco de formação: imagem + data, nome, descrição e link para a LP */
.formacao {
  display: grid;
  gap: 2rem;
  border: var(--linha);
  border-radius: var(--r-foto);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.formacao__imagem {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-card);
}
.formacao__imagem--reservada {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  border: 1px dashed var(--filete);
  font-family: var(--fonte-nota);
  font-size: .875rem;
  color: var(--nota);
}
/* Capa tipográfica da formação: fundo tinta, título em Bricolage, um grifo */
.formacao__capa {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.formacao__capa-rotulo {
  font-family: var(--fonte-nota);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--filete);
}
.formacao__capa-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.formacao__texto { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.formacao__data {
  font-family: var(--fonte-nota);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nota);
  margin: 0;
}
.formacao__nome { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.formacao .reservado { margin: 0; align-self: stretch; }

/* Linha do tempo (Sobre): ano em mono à esquerda, filete entre os marcos */
.linha-do-tempo { margin: 2rem 0 0; padding: 0; list-style: none; border-top: var(--linha-forte); }
.linha-do-tempo li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: var(--linha);
  font-size: 1.0625rem;
}
.linha-do-tempo__ano { font-family: var(--fonte-nota); font-size: .875rem; color: var(--nota); padding-top: .25rem; }
.linha-do-tempo strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.1875rem;
  color: var(--tinta);
  margin-bottom: .25rem;
}

/* Lista de espera dentro do bloco da formação */
.espera {
  display: grid;
  gap: 1rem;
  align-self: stretch;
  border-top: var(--linha);
  padding-top: 1.25rem;
}
.espera__titulo { margin: 0; font-weight: 600; color: var(--tinta); }

/* Bloco de contato claro, com filete (Sobre) */
.bloco-contato { border: var(--linha); }

/* Lista para copiar e levar à diretoria (Consultoria) */
.argumentos {
  margin: 0;
  padding: 1.75rem 2rem 1.75rem 3.25rem;
  background: var(--papel-2);
  border-left: var(--linha-forte);
  display: grid;
  gap: 1rem;
}
.argumentos li { padding-left: .25rem; }

/* Texto longo (Política de privacidade) */
.politica h1 { margin-bottom: .75rem; }
.politica h2 { font-size: 1.5rem; margin: 2.5rem 0 .75rem; }
.politica ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.politica li { margin-bottom: .5rem; }
.politica__data { font-family: var(--fonte-nota); font-size: .8125rem; color: var(--nota); margin-bottom: 1.5rem; }

/* Rodapé */
.rodape {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-bottom: 2.5rem;
  font-family: var(--fonte-nota);
  font-size: .8125rem;
  color: var(--nota);
}
.rodape p { margin: 0; }

/* Telas maiores */
@media (min-width: 48rem) {
  .abertura { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
  .abertura--so-texto { grid-template-columns: 1fr; }
  .secao { padding: 5.5rem 0; }
  .secao--filete { padding-top: 0; }
  .secao--filete > .moldura { padding-top: 5rem; }
  .com-margem { grid-template-columns: minmax(0, 46rem) 16rem; gap: 3rem; align-items: end; }
  .ofertas { grid-template-columns: repeat(3, 1fr); }
  .atributos { grid-template-columns: repeat(2, 1fr); }
  .quem-fala { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .para-quem { grid-template-columns: 1fr 1fr; }
  .dores { grid-template-columns: repeat(3, 1fr); }
  .formacao { grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; }
  .formulario { grid-template-columns: 1fr 1.25fr; gap: 3rem; }
  .campos__dupla { grid-template-columns: 1fr 1fr; }
}