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-n3 { --env: 1140px; }
.marca-n3 .prototipo { background: var(--tinta); color: #FFF; border-color: var(--tinta); }
.marca-n3 .topo { border-bottom: var(--borda) solid var(--tinta); }

/* a regua: tique fino a cada 11px, tique alto a cada 55px */
.marca-n3 .regua {
  height: 13px; border-bottom: var(--borda) solid var(--linha);
  background-image:
    repeating-linear-gradient(to right, var(--linha) 0 1px, transparent 1px 55px),
    repeating-linear-gradient(to right, var(--linha) 0 1px, transparent 1px 11px);
  background-size: 100% 13px, 100% 6px;
  background-position: bottom left, bottom left;
  background-repeat: repeat-x;
}

.marca-n3 .cabeca-secao { display: block; }
.marca-n3 .faixa {
  display: flex; align-items: center; gap: 16px; padding-bottom: 12px;
  border-bottom: var(--borda) solid var(--tinta); margin-bottom: clamp(26px, 3vw, 40px);
}
.marca-n3 .faixa .fio { flex: 1; height: var(--borda); background: var(--linha); }

.marca-n3 h1.display { font-size: clamp(33px, 4.4vw, 62px); line-height: 1.02; }
.marca-n3 h2.display { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.06; }
.marca-n3 .subhead { font-size: clamp(17px, 1vw + 12px, 22px); line-height: 1.4; font-weight: 500;
  color: var(--primaria-2); margin: 20px 0 0; max-width: 34em; }
.marca-n3 .texto { font-size: clamp(16px, .35vw + 14.5px, 17.5px); line-height: 1.58; margin-top: 26px; }
.marca-n3 .texto strong { font-weight: 700; }

/* itens viram celulas de grade: e assim que uma ficha lista campo */
.marca-n3 .itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  margin-top: 34px; border-top: var(--borda) solid var(--linha); border-left: var(--borda) solid var(--linha); }
.marca-n3 .itens li { border-right: var(--borda) solid var(--linha);
  border-bottom: var(--borda) solid var(--linha); padding: 18px 20px 22px;
  font-size: 16px; line-height: 1.48; }
.marca-n3 .itens li .rotulo { display: block; margin-bottom: 10px; }

.marca-n3 .realce { background: var(--superficie); padding: clamp(22px, 2.6vw, 36px); margin-top: 32px;
  border-left: 3px solid var(--tinta); }
.marca-n3 .realce .texto { margin-top: 0; }

.marca-n3 .acao { margin-top: 36px; }
.marca-n3 .cta:hover { background: var(--acento-2); }
.marca-n3 .s + .s { border-top: var(--borda) solid var(--linha); }

.marca-n3 .faq { border-top: var(--borda) solid var(--linha); }
.marca-n3 .faq details { border-bottom: var(--borda) solid var(--linha); padding: 18px 0; }
.marca-n3 .faq summary { font-family: var(--fonte-display); font-weight: 700; font-stretch: 78%;
  text-transform: uppercase; letter-spacing: .02em; word-spacing: .14em;
  font-size: 16px; line-height: 1.3; display: flex; gap: 14px; }
.marca-n3 .faq summary::before { content: attr(data-n); color: var(--cinza); flex: none; }
.marca-n3 .faq .resposta { margin-top: 12px; padding-left: 34px; font-size: 16px; line-height: 1.58; max-width: 44em; }
.marca-n3 .rodape { border-top: var(--borda) solid var(--tinta); }