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-n1 { --env: 1040px; }
.marca-n1 .prototipo { background: var(--superficie); color: var(--primaria); border-color: var(--linha); }
.marca-n1 .topo { border-bottom: 1px solid var(--linha); }

.marca-n1 .cabeca-secao { display: grid; grid-template-columns: 84px 1fr; gap: 24px; align-items: start; }
.marca-n1 .indice { font-family: var(--fonte-display); font-size: 15px; font-weight: 700;
  color: var(--acento); padding-top: 10px; letter-spacing: .04em; }

.marca-n1 h1.display { font-size: clamp(37px, 5.2vw, 72px); }
.marca-n1 h2.display { font-size: clamp(27px, 3vw, 42px); }
.marca-n1 .subhead {
  font-family: var(--fonte-display); font-weight: 400; font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-size: clamp(19px, 1.5vw + 12px, 27px); line-height: 1.36; color: var(--primaria);
  margin: 26px 0 0; max-width: 30em;
}
.marca-n1 .texto { font-size: clamp(17px, .5vw + 15px, 19.5px); line-height: 1.64; margin-top: 30px; }
.marca-n1 .texto strong { font-weight: 700; color: var(--primaria); }

/* lista editorial: fio fino separando, nunca bolinha */
.marca-n1 .itens li { border-top: 1px solid var(--linha); padding: 15px 0 15px 26px; position: relative;
  font-size: 17px; line-height: 1.55; max-width: 36em; }
.marca-n1 .itens li::before { content: ''; position: absolute; left: 0; top: 24px;
  width: 9px; height: 3px; background: var(--acento); }

/* o bloco de destaque e papel de outra gramatura, nao um card com sombra */
.marca-n1 .realce { background: var(--superficie); padding: clamp(26px, 3vw, 40px);
  border-radius: var(--raio); margin-top: 34px; }
.marca-n1 .realce .texto { margin-top: 0; }

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

.marca-n1 .faq details { border-top: 1px solid var(--linha); padding: 20px 0; }
.marca-n1 .faq details:last-of-type { border-bottom: 1px solid var(--linha); }
.marca-n1 .faq summary { font-family: var(--fonte-display); font-weight: 700; font-size: 19px;
  line-height: 1.35; color: var(--primaria); }
.marca-n1 .faq .resposta { margin-top: 12px; font-size: 16.5px; line-height: 1.62; max-width: 40em; }
.marca-n1 .rodape { background: var(--superficie); }