@font-face {
  font-family: Inter;
  src: url("/assets/InterLatin-v1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --roxo: #6941D9;
  --roxo-escuro: #442181;
  --tinta: #211a2b;
  --texto: #5b5363;
  --papel: #F5F5F8;
  --linha: #e4deeb;
  font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif;
  color: var(--tinta);
  background: var(--papel);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #9d78e2; outline-offset: 4px; border-radius: 5px; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 2; padding: 10px 14px; background: white; color: var(--roxo-escuro); }
.pular:focus { top: 12px; }
.topo { max-width: 1120px; margin: auto; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; }
.marca { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font-size: 1.08rem; font-weight: 760; letter-spacing: -.045em; }
.marca svg { flex: none; color: var(--roxo); }
.voltar { color: var(--roxo-escuro); text-decoration-thickness: 1px; text-underline-offset: 4px; font-size: .9rem; font-weight: 650; }
main { max-width: 1120px; margin: auto; padding: 65px 32px 48px; }
.abertura { max-width: 790px; }
.sobretitulo, .indice { margin: 0 0 13px; color: var(--roxo); font-size: .72rem; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
h1 { max-width: 760px; margin: 0; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .99; letter-spacing: -.075em; font-weight: 720; }
.resumo { max-width: 650px; margin: 25px 0 0; color: var(--texto); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; }
.explicacao { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 76px 0; padding: 28px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.explicacao h2, .demo-intro h2 { max-width: 420px; margin: 0 0 13px; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.12; letter-spacing: -.045em; }
.explicacao p:not(.indice), .demo-intro p:not(.indice) { max-width: 470px; margin: 0; color: var(--texto); font-size: .98rem; line-height: 1.7; }
.demonstracao { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(32px, 7vw, 90px); padding: 36px; border-radius: 28px; background: #eee7f7; }
.demo-intro { position: relative; }
.selo { display: inline-flex; align-items: center; min-height: 30px; margin-bottom: 28px; padding: 0 11px; border: 1px solid #c3a9ec; border-radius: 99px; color: var(--roxo-escuro); background: #f8f4ff; font-size: .74rem; font-weight: 750; letter-spacing: .04em; }
.cartao-demo { padding: 22px; border: 1px solid #d8c8f4; border-radius: 18px; background: linear-gradient(135deg, #f7f1ff, #fff 75%); box-shadow: 0 18px 50px #39205e12; }
.rotulo { margin: 0 0 17px; color: #60418d; font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cartao-conteudo { display: flex; align-items: center; gap: 16px; }
.icone-demo { flex: 0 0 60px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--roxo); font-weight: 800; letter-spacing: -.04em; }
.cartao-conteudo h3 { margin: 0; font-size: 1.05rem; }
.cartao-conteudo p { margin: 6px 0 11px; color: var(--texto); font-size: .9rem; line-height: 1.5; }
.link-demo { color: var(--roxo-escuro); font-size: .85rem; font-weight: 720; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.rodape { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 45px; padding-top: 24px; border-top: 1px solid var(--linha); }
.rodape p { max-width: 650px; margin: 0; color: var(--texto); font-size: .9rem; line-height: 1.6; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; padding: 0 18px; border-radius: 12px; color: white; background: var(--roxo); text-decoration: none; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.botao:hover { background: var(--roxo-escuro); }

@media (max-width: 700px) {
  .topo { padding: 20px 21px; }
  main { padding: 54px 21px 32px; }
  .explicacao { grid-template-columns: 1fr; gap: 32px; margin: 54px 0; padding: 25px 0; }
  .demonstracao { grid-template-columns: 1fr; gap: 28px; padding: 25px 20px; border-radius: 22px; }
  .selo { margin-bottom: 20px; }
  .rodape { align-items: flex-start; flex-direction: column; margin-top: 32px; }
}

@media (prefers-reduced-motion: no-preference) {
  .botao { transition: background-color 140ms ease; }
}