/* Deslanchou · Cinema · A Lente
   Preto de verdade; papel no texto; âmbar só como luz; vermelho só no ponto do DEMO. */

:root {
  --preto: #000;
  --grafite: #141416;
  --papel: #f3efe6;
  --papel-2: #c9c5bc;
  --poeira: #8c887f;
  --ambar: 255, 177, 92; /* #FFB15C, em RGB pra luz com transparência */
  --rec: #ff3b30;
  --linha: rgba(243, 239, 230, 0.12);
  --grade: rgba(243, 239, 230, 0.045);
  --fonte: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --margem: clamp(1rem, 4vw, 3rem);
  --largura: 72rem;
  color-scheme: dark;
}

/* Base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--preto);
  color: var(--papel);
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }

p { margin: 0 0 1em; }

strong { font-weight: 600; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(243, 239, 230, 0.4);
}

a:hover { text-decoration-color: currentColor; }

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

::selection { background: var(--papel); color: var(--preto); }

/* Títulos: Inter Tight 600, caixa alta, tracking de 0,03 a 0,06 em */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.3rem, 0.9rem + 6.6vw, 6.25rem);
  letter-spacing: 0.03em;
  line-height: 0.98;
}

h2 { font-size: clamp(1.85rem, 1.2rem + 2.8vw, 3.5rem); }

h3 {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  letter-spacing: 0.05em;
  line-height: 1.25;
}

/* Rótulo de claquete: JetBrains Mono, sempre em caixa alta */

.rotulo {
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--poeira);
}

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

.pular {
  position: absolute;
  top: 0.75rem;
  left: var(--margem);
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--papel);
  color: var(--preto);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-300%);
}

.pular:focus { transform: none; }

/* Grade da página */

.envelope {
  width: min(100% - 2 * var(--margem), var(--largura));
  margin-inline: auto;
}

.envelope--texto {
  width: min(100% - 2 * var(--margem), 46rem);
  margin-inline: auto;
}

/* Topo: a assinatura clara sobre preto, com respiro de pelo menos a altura do D */

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
}

.topo__marca { display: block; padding-block: 0.25rem; }

.topo__marca img { width: clamp(9.5rem, 28vw, 12.5rem); }

.idioma {
  padding: 0.6rem 0.25rem 0.6rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--poeira);
  text-decoration: none;
}

.idioma:hover { color: var(--papel); }

/* Herói: preto de sala e uma luz quente só, o risco anamórfico, abaixo do texto */

.heroi {
  --altura-risco: clamp(3rem, 8vh, 5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 11vh, 8rem) clamp(7.5rem, 19vh, 11.5rem);
}

.heroi::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 68%;
  bottom: var(--altura-risco);
  width: min(92vw, 64rem);
  height: 26rem;
  transform: translate(-50%, 50%);
  background: radial-gradient(closest-side, rgba(var(--ambar), 0.11), rgba(var(--ambar), 0.035) 55%, transparent);
  pointer-events: none;
}

.heroi__lead {
  max-width: 35rem;
  margin: 1.75rem 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--papel-2);
}

.risco {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--altura-risco);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--ambar), 0) 0%,
    rgba(var(--ambar), 0.18) 22%,
    rgba(var(--ambar), 0.85) 68%,
    rgba(var(--ambar), 0.25) 86%,
    rgba(var(--ambar), 0) 100%);
}

.risco::before {
  content: "";
  position: absolute;
  inset: -2px 0;
  background: inherit;
  filter: blur(3px);
  opacity: 0.9;
}

.risco::after {
  content: "";
  position: absolute;
  left: 68%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff8ec;
  box-shadow:
    0 0 6px 2px rgba(var(--ambar), 0.95),
    0 0 26px 9px rgba(var(--ambar), 0.45),
    0 0 80px 30px rgba(var(--ambar), 0.14);
  animation: respira 6s ease-in-out infinite;
}

@keyframes respira {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

/* Ações e botões (o papel é o projetor; o âmbar só aparece como brilho) */

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2.25rem;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--papel);
  color: var(--preto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: box-shadow 0.3s ease;
}

.botao:hover {
  box-shadow: 0 0 0 1px rgba(var(--ambar), 0.55), 0 0 36px rgba(var(--ambar), 0.28);
}

.botao__seta { transition: transform 0.3s ease; }

.botao:hover .botao__seta { transform: translateX(3px); }

/* Reservado pro botão do WhatsApp: o verde é função, não cor da marca */
.botao--whatsapp { background: #25d366; color: #000; }

.link-sec { color: var(--papel-2); }

/* Selo DEMO: pílula escura e o ponto vermelho REC */

.nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--poeira);
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--grafite);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel);
  white-space: nowrap;
}

.ponto {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rec);
}

/* Seções */

.secao {
  padding-block: clamp(4.5rem, 10vw, 8rem);
  border-top: 1px solid var(--grade);
}

.secao__topo { max-width: 46rem; }

.secao__intro {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  color: var(--papel-2);
}

/* Cartões em grafite, separados por linha fina */

.grade {
  display: grid;
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--linha);
}

.cartao {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--grafite);
}

.cartao__num {
  display: block;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--poeira);
}

.cartao h3 { margin-bottom: 0.75rem; }

.cartao p { margin: 0; color: var(--papel-2); }

/* Passos */

.passos {
  display: grid;
  gap: 2.25rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.passo {
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
}

.passo__num {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--poeira);
}

.passo h3 { margin-bottom: 0.75rem; }

.passo p { margin: 0; color: var(--papel-2); }

/* Oferta */

.painel {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--grafite);
}

.painel h3 { margin-bottom: 1rem; }

.preco {
  margin: 0;
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.preco__sub { margin: 0.75rem 0 0; color: var(--poeira); }

.lista {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lista li {
  display: flex;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--linha);
}

.lista li::before {
  content: "+";
  font-family: var(--mono);
  color: var(--poeira);
}

.prazos {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--linha);
  border-radius: 4px;
  background: var(--linha);
}

.prazos li {
  padding: 1rem 1.15rem;
  background: var(--preto);
  color: var(--papel-2);
}

.prazos strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel);
}

.miudo {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--poeira);
}

/* Dúvidas */

.duvidas {
  max-width: 48rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linha);
}

.duvidas details { border-bottom: 1px solid var(--linha); }

.duvidas summary {
  position: relative;
  padding: 1.2rem 2.5rem 1.2rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.duvidas summary::-webkit-details-marker { display: none; }

.duvidas summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--poeira);
}

.duvidas details[open] summary::after { content: "\2212"; }

.duvidas details p {
  max-width: 40rem;
  margin: 0 0 1.25rem;
  color: var(--papel-2);
}

/* Chamada final */

.chamada h2 { max-width: 16ch; margin-top: 1.5rem; }

.chamada p { max-width: 36rem; }

.chamada .secao__intro { margin-top: 1.25rem; }

/* Rodapé */

.rodape {
  padding-block: 2.25rem 2.75rem;
  border-top: 1px solid var(--linha);
  font-size: 0.875rem;
  color: var(--poeira);
}

.rodape__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.rodape p { margin: 0; }

.rodape ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape a { color: var(--papel-2); }

.rodape a:hover { color: var(--papel); }

/* Páginas de texto (privacidade, termos, exclusão) */

.doc { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem); }

.doc h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
  line-height: 1.02;
}

.doc__intro {
  margin: 1.5rem 0 0;
  font-size: 1.125rem;
  color: var(--papel-2);
}

.resumo {
  margin: 2rem 0 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: var(--grafite);
  color: var(--papel-2);
}

.resumo p { margin: 0; }

.resumo strong { color: var(--papel); }

.indice {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha);
}

.indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2 15rem;
  column-gap: 2rem;
}

.indice li { margin: 0 0 0.55rem; break-inside: avoid; }

.indice a {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--papel-2);
  text-decoration: none;
}

.indice a:hover { color: var(--papel); text-decoration: underline; }

.corpo h2 {
  margin: 3.25rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  letter-spacing: 0.05em;
  line-height: 1.2;
  scroll-margin-top: 1.5rem;
}

.corpo h2 .num {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--poeira);
}

.corpo p,
.corpo li { color: var(--papel-2); }

.corpo strong { color: var(--papel); }

.corpo a { color: var(--papel); }

.corpo ul,
.corpo ol { margin: 0 0 1.25em; padding-left: 1.25rem; }

.corpo li { margin-bottom: 0.55rem; }

.corpo li::marker { color: var(--poeira); }

/* Erro 404 */

.erro {
  display: grid;
  align-content: center;
  min-height: 60vh;
  padding-block: 4rem;
}

/* Telas maiores */

@media (min-width: 52rem) {
  .grade { grid-template-columns: repeat(3, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

@media (min-width: 60rem) {
  .painel { grid-template-columns: 1fr 1fr; }
}

/* Movimento só pra quem quer */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }
}

/* Impressão (pros termos e a política) */

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; }
  .pular, .idioma, .indice, .acoes, .risco, .heroi::before { display: none !important; }
  .topo__marca img { filter: invert(1); }
  .corpo p, .corpo li, .corpo strong, .corpo a, .doc__intro, .rotulo, .rodape, .rodape a { color: #000; }
  .resumo, .cartao, .painel { background: none; border-color: #999; color: #000; }
}