html { scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.lp { min-height: 100vh; overflow-x: hidden; }
.env { width: min(var(--env, 1120px), 100% - clamp(32px, 6vw, 96px)); margin-inline: auto; }
.s { padding-block: clamp(52px, 7.5vw, 108px); }
.s:first-of-type { padding-top: clamp(36px, 5vw, 68px); }

.texto { max-width: 36em; }
.texto p { margin: 0 0 1.05em; }
.texto p:last-child { margin-bottom: 0; }
.itens { list-style: none; margin: 32px 0 0; padding: 0; }

.cta:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid currentColor; outline-offset: 3px;
}
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
/* O triangulo nativo sai, mas alguma coisa tem que dizer que a linha abre.
   O sinal vive no ::after de todas as tres; so a cor muda por marca. */
.faq summary { display: flex; align-items: baseline; gap: 12px; }
.faq summary > .p { flex: 1; }
.faq summary::after {
  content: '+'; flex: none; font-family: var(--fonte-dado); font-size: 15px;
  line-height: 1; opacity: .55; transition: opacity .12s;
}
.faq details[open] summary::after { content: '\2212'; opacity: 1; }
.faq summary:hover::after { opacity: 1; }

/* faixa de prototipo: some do print e nao entra no ritmo da pagina */
.prototipo {
  padding: 9px 16px; text-align: center; font-size: 11.5px;
  border-bottom: 1px solid currentColor;
}
@media print { .prototipo { display: none; } }

/* o flex vive no .env, nunca no <header>: e o .env que carrega a goteira lateral
   da pagina inteira, e o topo tem que sentar na mesma coluna das secoes. */
.topo { padding-block: 22px; }
.topo .env {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.rodape { padding-block: 44px clamp(44px, 6vw, 76px); }
.rodape p { margin: 0 0 10px; max-width: 60ch; }

@media (max-width: 760px) {
  .cabeca-secao { grid-template-columns: 1fr !important; gap: 8px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


.marca-n2 { --env: 1080px; }
.marca-n2 .prototipo { background: var(--primaria); color: var(--base); border-color: var(--primaria); }
.marca-n2 .topo { border-bottom: var(--borda) solid var(--linha); }

/* a pauta do caderno: fio claro a cada 34px, atras de tudo */
.marca-n2 main {
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, #E7E2D4 33px 34px);
  background-attachment: local;
}

.marca-n2 .cabeca-secao { display: grid; grid-template-columns: 78px 1fr; gap: 26px; align-items: start; }
/* o indice e um no do diagrama; o fio vertical liga um no ao proximo */
.marca-n2 .indice {
  font-family: var(--fonte-dado); font-size: 13px; font-weight: 600; color: var(--primaria);
  border: var(--borda) solid var(--primaria); background: var(--base);
  width: 44px; height: 30px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.marca-n2 .indice::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: var(--borda);
  height: clamp(52px, 7.5vw, 108px); background: var(--primaria); opacity: .3;
}
.marca-n2 .s:last-of-type .indice::after { display: none; }

.marca-n2 h1.display { font-size: clamp(31px, 3.9vw, 54px); line-height: 1.1; }
.marca-n2 h2.display { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.14; }
.marca-n2 .subhead { font-family: var(--fonte-citacao); font-size: clamp(18px, 1.2vw + 12px, 24px);
  line-height: 1.42; color: var(--primaria); margin: 22px 0 0; max-width: 32em; }
.marca-n2 .texto { font-size: clamp(16.5px, .4vw + 15px, 18.5px); line-height: 1.62; margin-top: 26px; }
/* negrito na copy vira marca-texto: e a anotacao de quem estuda o proprio caso */
.marca-n2 .texto strong { font-weight: 400; background: var(--marcacao);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 3px; }

.marca-n2 .itens { display: grid; gap: 14px; margin-top: 30px; }
.marca-n2 .itens li { font-size: 16.5px; line-height: 1.5; }
/* o leque: tres nos saindo do mesmo ponto, o simbolo da marca virado layout */
.marca-n2 .leque { position: relative; padding-left: 40px; }
/* o stub sai da linha vertical (x=0 do ul) e para antes do texto.
   O deslocamento e negativo porque o li ja comeca depois do padding-left do ul. */
.marca-n2 .leque li::before {
  content: ''; position: absolute; left: -40px; width: 32px; height: var(--borda);
  background: var(--primaria); top: 0.72em;
}
.marca-n2 .leque li { position: relative; }
.marca-n2 .leque::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: var(--borda); background: var(--primaria);
}

.marca-n2 .realce { border: var(--borda) solid var(--linha); background: var(--superficie);
  padding: clamp(22px, 2.6vw, 34px); margin-top: 32px; }
.marca-n2 .realce .texto { margin-top: 0; }

.marca-n2 .acao { margin-top: 34px; }
.marca-n2 .cta:hover { background: var(--primaria-2); }

.marca-n2 .faq { display: grid; gap: 12px; }
.marca-n2 .faq details { border: var(--borda) solid var(--linha); background: var(--base); padding: 16px 18px; }
.marca-n2 .faq summary { font-weight: 600; font-size: 17px; line-height: 1.4; display: flex; gap: 12px; }
.marca-n2 .faq summary::before { content: attr(data-n); font-family: var(--fonte-dado);
  font-size: 13px; color: var(--primaria); flex: none; padding-top: 2px; }
.marca-n2 .faq .resposta { margin-top: 12px; padding-left: 30px; font-size: 16px; line-height: 1.6; max-width: 42em; }
.marca-n2 .rodape { border-top: var(--borda) solid var(--linha); background: var(--superficie); }