/* Condi — landing · site.css · 2026-09-12
   Depende de tokens.css (carregado antes). Sem webfont, sem framework.
   Modo escuro: só pelo visitante (data-tema no <html>). Nunca prefers-color-scheme. */

/* ---------- base ---------- */

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

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

/* barra de rolagem e widgets nativos acompanham a escolha do visitante */
:root[data-tema="escuro"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--preto);
  font-family: var(--fonte-ui);
  font-size: 1.1rem;
  line-height: 1.55;
}

/* troca de tema sem estalo. Só cor; nada se move. */
body, .folha {
  transition: background-color .2s linear, color .2s linear;
}

img, svg { max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: 3px;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: .6rem 1rem;
  background: var(--laranja-2);
  color: var(--botao-texto);
  font-weight: 700;
  border-radius: var(--raio);
}
.pular-para-conteudo:focus {
  left: 1rem;
  top: 1rem;
}

.so-leitor-de-tela {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.contem {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---------- topo ---------- */

.topo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.topo-marca {
  font-size: 1.5rem;
  text-decoration: none;
}

.topo-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: .95rem;
}

.topo-link {
  color: var(--preto);
  text-decoration: none;
  border-bottom: 1px solid var(--linha-forte);
  padding-bottom: 2px;
}
.topo-link:hover { border-bottom-color: var(--laranja-1); }

.topo-voltar { font-size: .95rem; color: var(--texto-secundario); }

/* controle de tema: discreto, na linha da navegação */
.tema-botao {
  font-family: var(--fonte-ui);
  font-size: .85rem;
  line-height: 1.2;
  padding: .35rem .7rem;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: transparent;
  color: var(--texto-secundario);
  cursor: pointer;
  white-space: nowrap;
}
.tema-botao:hover { border-color: var(--laranja-1); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: 1.5rem;
  padding-bottom: 3.2rem;
}

/* faixa de largura total: recorta as folhas na borda da tela, nunca no container */
.hero-faixa {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.grafismo-folhas {
  position: absolute;
  right: -60px;
  top: -1.5rem;
  width: 340px;
  height: 330px;
  pointer-events: none;
  z-index: 0;
}

.folha-grafica { position: absolute; border-radius: 50% 0 50% 0; }
.folha-grafica-1 { width: 230px; height: 230px; right: -60px; top: -50px; background: var(--laranja-3); transform: rotate(20deg); }
.folha-grafica-2 { width: 160px; height: 160px; right: 70px; top: 90px; background: var(--laranja-2); transform: rotate(-15deg); }
.folha-grafica-3 { width: 95px; height: 95px; right: -10px; top: 180px; background: var(--laranja-1); transform: rotate(35deg); }

.titulo {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 11ch;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(2.9rem, 8.2vw, 6.6rem);
  line-height: 1.0;
  letter-spacing: -.02em;
}

/* ---------- grifo ---------- */

.etiqueta { white-space: nowrap; }

/* o grifo sangra: pinta sem empurrar a pontuação seguinte */
.grifo {
  padding: 0 .18em;
  margin: 0 -.18em;
  background-color: transparent;
  background-image: linear-gradient(var(--grifo), var(--grifo));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  text-decoration: none;
}

.js .grifo {
  background-size: 0% 100%;
  /* antes do traço passar o texto ainda está sobre o papel, não sobre o amarelo.
     No claro os dois valem #111; no escuro isso evita texto preto no fundo escuro. */
  color: var(--preto);
  /* a cor do texto troca no meio da varredura (delays em pares: fundo, cor) */
  transition: background-size .55s cubic-bezier(.2, .7, .2, 1), color 0s linear .3s;
}

.grifo-corrido {
  display: inline;
  transform: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.grifo:hover, .grifo:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .12em;
}

/* carga: H1 */
.js.is-on .grifo-h1 { background-size: 100% 100%; color: var(--grifo-texto); transition-delay: .25s, .55s; }

/* rolagem: grifos dentro de cada fragmento da folha */
.folha-parte.is-on .grifo { background-size: 100% 100%; color: var(--grifo-texto); }
.paragrafo.is-on .grifo { background-size: 100% 100%; color: var(--grifo-texto); }
.folha-parte.is-on .grifo-t2 { transition-delay: .12s, .42s; }
.folha-parte.is-on .grifo-t3 { transition-delay: .24s, .54s; }

/* carga orquestrada: só quando o fragmento A está visível na carga */
.carga-orquestrada.is-on .grifo { transition-delay: .8s, 1.1s; }

.entra {
  opacity: 1;
  transform: none;
}
.js .entra {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s linear, transform .25s linear;
}
.js .folha-parte.is-on .entra-ancora { opacity: 1; transform: none; transition-delay: .12s; }
.js .folha-parte.is-on .entra-aviso  { opacity: 1; transform: none; transition-delay: .24s; }
.js .carga-orquestrada.is-on .entra-ancora { transition-delay: 1.3s; }
.js .carga-orquestrada.is-on .entra-aviso  { transition-delay: 1.6s; }

/* ---------- documento: margem + folha contínua ---------- */

.documento {
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: auto auto auto auto;
  column-gap: 4rem;
  row-gap: 0;
  padding-bottom: 4rem;
}

.margem {
  grid-column: 1;
  align-self: start;
  padding-bottom: 5rem;
}

.linha-a-margem { grid-row: 1; }
.linha-b-margem { grid-row: 2; }
.linha-c-margem { grid-row: 3; }
.linha-d-margem { grid-row: 4; padding-bottom: 0; }

.folha {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1 / span 4;
  display: grid;
  grid-template-rows: subgrid;
  background: var(--folha);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: var(--sombra-unica);
}

.folha-parte {
  padding: 2rem 2.2rem;
}

.linha-a-folha { grid-row: 1; }
.linha-b-folha { grid-row: 2; }
.linha-c-folha { grid-row: 3; }
.linha-d-folha { grid-row: 4; }

/* ---------- conteúdo da margem ---------- */

.margem-titulo {
  margin: 0 0 1rem;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}

.lead {
  margin: 0 0 1.6rem;
  font-size: 1.22rem;
  line-height: 1.5;
}

.margem-texto { margin: 0 0 1.1rem; }

.nota {
  margin: 1.1rem 0 0;
  font-size: .92rem;
  color: var(--texto-secundario);
}

.acoes {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.btn { text-decoration: none; }

.legenda-ids {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem .8rem;
  margin: 1.4rem 0 0;
  font-size: .92rem;
}
.legenda-ids-termo { margin: 0; }
.legenda-ids-def { margin: 0; color: var(--texto-secundario); }

.publico { margin: 0; padding: 0; list-style: none; }
.publico-item { margin: 0 0 1.1rem; }
.publico-quem { font-weight: 600; }
.publico-texto { margin: .15rem 0 0; color: var(--texto-secundario); }

/* ---------- conteúdo da folha ---------- */

.ata-cabecalho {
  margin-bottom: 1.8rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linha);
}

.ata-selo { margin-bottom: .9rem; }

.ata-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: .8rem;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ata-subtitulo {
  margin: .5rem 0 0;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  line-height: 1.4;
}

.paragrafo { margin-bottom: 1.8rem; }
.paragrafo:last-child { margin-bottom: 0; }

.paragrafo-texto {
  margin: .55rem 0 .8rem;
  font-family: var(--fonte-ata);
  font-size: 1.08rem;
  line-height: 1.7;
}

.ancoras {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.ancora-audio { text-decoration: none; }

.aviso {
  margin-top: .8rem;
  font-size: .88rem;
  line-height: 1.5;
}

.separador-parte {
  margin: 0 0 1.6rem;
  border: 0;
  border-top: 1px dashed var(--linha-forte);
}

/* inset de evidência */

.evidencia {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  background: var(--papel);
  transition: border-color .3s linear;
}
.evidencia.is-flash { border-color: var(--laranja-2); }

.evidencia-titulo {
  margin: 0 0 .7rem;
  font-family: var(--fonte-mono);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.evidencia-etiquetas {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}

.transcricao { margin: 0; padding: 0; list-style: none; }

.transcricao-linha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem;
  align-items: baseline;
  margin-bottom: .55rem;
  padding-left: .55rem;
  border-left: 3px solid transparent;
  font-family: var(--fonte-mono);
  font-size: .82rem;
  line-height: 1.5;
}
.transcricao-linha.is-chave {
  font-weight: 700;
  border-left-color: var(--v-contradita);
}
.transcricao-linha.is-chave-parcial {
  font-weight: 700;
  border-left-color: var(--v-parcial);
}
.transcricao-falante { font-weight: 600; }

.evidencia-doc {
  margin: .9rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--texto-secundario);
}

.evidencia-rodape {
  margin: .8rem 0 0;
  font-size: .78rem;
  color: var(--texto-secundario);
}

/* assinaturas */

.assinaturas {
  margin-top: 2.2rem;
  padding: 0;
  border: 0;
}
.assinaturas-titulo {
  padding: 0;
  margin: 0 0 1.2rem;
  font-family: var(--fonte-mono);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}
.assinatura { margin-bottom: 1.6rem; }
.assinatura-traco {
  width: 60%;
  height: 1px;
  background: var(--preto);
}
.assinatura-legenda {
  margin: .4rem 0 0;
  font-family: var(--fonte-mono);
  font-size: .72rem;
  color: var(--texto-secundario);
}

/* ---------- fecho e rodapé ---------- */

.fecho {
  padding-top: 3rem;
  padding-bottom: 4rem;
  border-top: 1px solid var(--linha);
  text-align: center;
}

.fecho-titulo {
  margin: 0 0 1rem;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.fecho-lead {
  margin: 0 auto 1.8rem;
  max-width: 44ch;
  font-size: 1.22rem;
}

.fecho-acoes { justify-content: center; }

.rodape {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: 1.6rem;
  padding-bottom: 2.6rem;
  border-top: 1px solid var(--linha);
  font-size: .92rem;
  color: var(--texto-secundario);
}
/* símbolo inline: prédios em currentColor, folhas nos laranjas */
.rodape-simbolo { display: inline-flex; height: 44px; color: var(--preto); }
.rodape-simbolo svg { height: 44px; width: auto; display: block; }
.rodape-ano { margin-left: auto; }

/* ---------- exemplo.html ---------- */

.pagina-exemplo { padding-bottom: 3rem; }

.folha-solta {
  position: relative;
  max-width: 46rem;
  margin: 0 auto 2rem;
  padding: 2.4rem 2.6rem;
  background: var(--folha);
  border: 1px solid var(--linha);
  border-radius: 10px;
  box-shadow: var(--sombra-unica);
}

.gaveta-botao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--fonte-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  padding: .16rem .45rem;
  border: 0;
  border-radius: var(--raio-etiqueta);
  background: var(--preto);
  color: var(--papel);
  cursor: pointer;
}

.gaveta { margin-top: .9rem; }

.voltar {
  display: block;
  max-width: 46rem;
  margin: 0 auto;
  padding-bottom: 3rem;
  font-size: .92rem;
  color: var(--texto-secundario);
}

/* ---------- mobile ---------- */

@media (max-width: 900px) {
  .contem { padding: 0 1.2rem; }

  .documento {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(8, auto);
    column-gap: 0;
    row-gap: 1.6rem;
  }

  .folha { display: contents; }

  .margem { padding-bottom: 0; }

  .folha-parte {
    padding: 1.5rem 1.3rem;
    background: var(--folha);
    border: 1px solid var(--linha);
    border-radius: 10px;
    box-shadow: var(--sombra-unica);
  }

  .linha-a-margem { grid-row: 1; }
  .linha-a-folha  { grid-row: 2; }
  .linha-b-margem { grid-row: 3; }
  .linha-b-folha  { grid-row: 4; }
  .linha-c-margem { grid-row: 5; }
  .linha-c-folha  { grid-row: 6; }
  .linha-d-margem { grid-row: 7; }
  .linha-d-folha  { grid-row: 8; }

  .margem, .folha-parte { grid-column: 1; }

  .topo { padding-bottom: 1rem; }
  .topo-cta { display: none; }
  .topo-nav { gap: 1.1rem; }
  .topo-link { font-size: .9rem; border-bottom: 0; padding-bottom: 0; }

  .hero { padding-top: 2.2rem; }
  /* canto superior direito, atrás do cabeçalho e acima do H1 */
  .grafismo-folhas { width: 140px; height: 110px; top: -77px; right: -30px; }
  .folha-grafica-1 { width: 88px; height: 88px; right: -24px; top: -18px; }
  .folha-grafica-2 { width: 58px; height: 58px; right: 28px; top: 30px; }
  .folha-grafica-3 { width: 36px; height: 36px; right: -4px; top: 62px; }

  .paragrafo-texto { font-size: 1rem; line-height: 1.65; }

  .folha-solta { padding: 1.5rem 1.3rem; }
  .titulo { margin-bottom: 1.25rem; }
}

@media (max-width: 520px) {
  .titulo { max-width: none; }
  .grafismo-folhas { opacity: .9; }
  .assinatura-traco { width: 80%; }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .grifo { background-size: 100% 100%; color: var(--grifo-texto); transition: none; }
  .js .entra { opacity: 1; transform: none; transition: none; }
  .evidencia { transition: none; }
  body, .folha { transition: none; }
}