/* contravigilancia.org — envelope (o que se vê de fora) e carta (o que está dentro) */

@font-face { font-family: "Mao"; src: url("/fontes/mao.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Condensada"; src: url("/fontes/condensada.woff2") format("woff2"); font-weight: 1 1000; font-display: swap; }
@font-face { font-family: "Carta"; src: url("/fontes/serif.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --mesa: #E6E9ED;        /* fundo da página: a mesa onde o envelope está */
  --envelope: #FBFBF7;    /* papel do envelope */
  --carta: #F4F5F1;       /* papel da carta */
  --tinta: #16203A;       /* texto */
  --caneta: #1D3C9E;      /* esferográfica azul: o que foi "escrito à mão" */
  --carimbo: #AE2A2E;     /* tinta de carimbo */
  --apagado: #556074;     /* texto secundário */
  --trama: #9AA8C2;       /* trama de envelope de segurança */
  --fio: #C7CDD6;         /* fios e bordas */
  --sombra: 0 1px 0 rgba(22, 32, 58, .06), 0 18px 40px -18px rgba(22, 32, 58, .35);
  --serif: "Carta", "Source Serif 4", Georgia, "Times New Roman", serif;
  --cond: "Condensada", "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --mao: "Mao", "Kalam", "Segoe Print", "Bradley Hand", cursive;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mesa: #0F131B;
    --envelope: #1A2030;
    --carta: #141925;
    --tinta: #E5E8EF;
    --caneta: #9FB6FF;
    --carimbo: #F0726C;
    --apagado: #A3ABBA;
    --trama: #34415E;
    --fio: #2C3447;
    --sombra: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--mesa);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}

a { color: var(--caneta); text-underline-offset: .18em; text-decoration-thickness: .06em; }
a:hover { text-decoration-thickness: .12em; }
:focus-visible { outline: 3px solid var(--caneta); outline-offset: 3px; border-radius: 2px; }

/* o atributo hidden vale mesmo onde a classe define display (formulários, botões) */
[hidden] { display: none !important; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- barra de leitura ---------- */
.leitura { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; pointer-events: none; }
.leitura span { display: block; height: 100%; width: 100%; background: var(--carimbo); transform-origin: 0 50%; transform: scaleX(0); }

.topo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  max-width: 50rem; margin: 0 auto; padding: 1.1rem 1rem .4rem;
  font-family: var(--cond); font-size: 1.05rem; font-weight: 600; letter-spacing: .01em;
}
.topo a { color: inherit; text-decoration: none; }
.topo .relogio { font-weight: 500; color: var(--apagado); font-variant-numeric: tabular-nums lining-nums; }

/* ---------- abertura: o envelope ---------- */
.abertura { max-width: 50rem; margin: 0 auto; padding: .75rem 1rem 2.5rem; }

.envelope {
  position: relative;
  background: var(--envelope);
  border-radius: 4px;
  box-shadow: var(--sombra);
  /* no celular, selo e carimbo ocupam uma faixa no alto e o texto vem abaixo */
  padding: 8.4rem 1.1rem 1.6rem;
  overflow: hidden;
}
@media (min-width: 40rem) {
  .envelope { padding: 1.6rem 1.8rem 1.8rem; min-height: 21rem; display: flex; flex-direction: column; justify-content: space-between; }
}
/* borda de correio aéreo, só em cima e embaixo, discreta */
.envelope::before, .envelope::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--carimbo) 0 10px, transparent 10px 20px, var(--caneta) 20px 30px, transparent 30px 40px);
  opacity: .55;
}
.envelope::before { top: 0; }
.envelope::after { bottom: 0; }

.remetente { font-family: var(--mao); color: var(--caneta); font-size: 1.2rem; line-height: 1.5; }
.remetente .r { display: block; }
@media (min-width: 40rem) { .remetente { max-width: calc(100% - 17rem); font-size: 1.32rem; } }
.remetente .rot { font-family: var(--serif); font-size: .78rem; color: var(--apagado); letter-spacing: .01em; margin-right: .35em; }

.ip-btn {
  font: inherit; color: inherit; background: none; border: 0; padding: 0 .1em; cursor: pointer;
  border-bottom: 1.5px dashed currentColor;
}

.selo {
  position: absolute; top: 1.2rem; right: 1.1rem; width: 5.6rem; height: 6.6rem;
  display: grid; place-items: stretch; text-align: center; padding: 6px;
  /* picote: furos da cor do envelope com o centro na borda do selo */
  background: radial-gradient(circle, var(--envelope) 3px, transparent 3.5px) -4.5px -4.5px / 9px 9px, var(--carta);
  color: var(--tinta);
}
.selo-dentro { background: var(--carta); border: 1.5px solid var(--tinta); display: grid; align-content: center; gap: .2rem; padding: .25rem; }
.selo b { font-family: var(--cond); font-weight: 800; font-size: 1.9rem; line-height: .9; font-variant-numeric: lining-nums; }
.selo small { font-family: var(--serif); font-size: .6rem; line-height: 1.15; }

/* carimbo: o círculo cai à esquerda do selo e as ondas passam por cima dele */
.carimbo {
  position: absolute; top: .9rem; right: .5rem; width: 12.6rem; height: 7.56rem;
  color: var(--carimbo); transform: rotate(-8deg); pointer-events: none; mix-blend-mode: multiply; opacity: .92;
}
@media (min-width: 40rem) {
  .selo { top: 1.6rem; right: 1.8rem; width: 6.6rem; height: 7.8rem; }
  .selo b { font-size: 2.3rem; }
  .carimbo { top: 1.1rem; right: 1rem; width: 16rem; height: 9.6rem; }
}
@media (prefers-color-scheme: dark) { .carimbo { mix-blend-mode: screen; } }
.carimbo text { font-family: var(--cond); font-weight: 700; fill: currentColor; }

.destino { margin: 1.3rem 0 0 auto; width: fit-content; max-width: 100%; font-family: var(--mao); color: var(--caneta); font-size: 1.45rem; line-height: 1.4; }
.destino .rot { display: block; font-family: var(--serif); font-size: .78rem; color: var(--apagado); }
.destino .linha { display: block; border-bottom: 1px solid var(--fio); padding: 0 .3rem .1rem 0; min-width: 14rem; }
@media (min-width: 40rem) { .destino { font-size: 1.85rem; margin-top: 1.6rem; } .destino .linha { min-width: 19rem; } }

/* escrita à mão: cada linha "se escreve" da esquerda para a direita */
.escreve { display: inline-block; clip-path: inset(0 100% 0 0); }
@media (scripting: none) { .escreve { clip-path: none; } }
.pronto .escreve { animation: escrever .9s steps(26, end) forwards; animation-delay: var(--atraso, 0s); }
.pronto .carimbo { animation: carimbar .32s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: var(--atraso-carimbo, 2.6s); }
@keyframes escrever { to { clip-path: inset(0 0 0 0); } }
@keyframes carimbar { from { opacity: 0; transform: rotate(-8deg) scale(1.45); } to { opacity: .92; transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .escreve { clip-path: none; }
  .pronto .escreve, .pronto .carimbo { animation: none; }
  .carimbo { opacity: .92; }
}

/* o "flagra": anotação à mão quando o IP e o relógio não batem */
.flagra { font-family: var(--mao); color: var(--carimbo); font-size: 1.4rem; line-height: 1.3; margin: .9rem .2rem 0; transform: rotate(-1.2deg); transform-origin: 0 50%; animation: surgir .4s ease-out both; }
@media (prefers-reduced-motion: reduce) { .flagra { animation: none; } }
.legenda { font-size: .82rem; line-height: 1.45; color: var(--apagado); margin: .7rem .2rem 0; max-width: 40rem; }

.manchete {
  font-family: var(--cond); font-weight: 820; font-size: clamp(2.7rem, 11vw, 4.9rem);
  line-height: .92; letter-spacing: -.012em; margin: 2.2rem 0 1rem; text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.chamada { font-size: 1.22rem; line-height: 1.5; max-width: 36rem; margin: 0 0 1.6rem; }
.chamada .seg { font-variant-numeric: tabular-nums lining-nums; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--cond); font-weight: 700; font-size: 1.3rem; letter-spacing: .01em;
  color: var(--envelope); background: var(--tinta); border: 0; border-radius: 3px;
  padding: .8rem 1.3rem .85rem; cursor: pointer; text-decoration: none; min-height: 3rem;
}
.botao:hover { background: var(--caneta); }
.botao.secundario { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.botao.secundario:hover { color: var(--caneta); box-shadow: inset 0 0 0 1.5px var(--caneta); }
.botao[disabled] { opacity: .6; cursor: progress; }

/* ---------- verso do envelope ---------- */
.verso {
  /* trama de envelope de segurança: o desenho que impede ler a carta contra a luz */
  background-color: var(--carta);
  background-image:
    repeating-linear-gradient(60deg, transparent 0 7px, color-mix(in srgb, var(--trama) 30%, transparent) 7px 8px),
    repeating-linear-gradient(-60deg, transparent 0 7px, color-mix(in srgb, var(--trama) 22%, transparent) 7px 8px);
  border-block: 1px solid var(--fio);
}
.verso-dentro { max-width: 50rem; margin: 0 auto; padding: 2.6rem 1rem 2.8rem; }
.verso h2, .bloco h2 { font-family: var(--cond); font-weight: 800; font-size: clamp(2rem, 7.4vw, 3.1rem); line-height: .98; margin: 0 0 .8rem; text-wrap: balance; }
.verso .intro { max-width: 36rem; margin: 0 0 1.4rem; }

.ficha { margin: 0; padding: 0; list-style: none; background: var(--envelope); border-radius: 4px; box-shadow: var(--sombra); }
.ficha li { display: grid; grid-template-columns: 8.2rem 1fr; gap: .2rem 1rem; padding: .85rem 1rem; border-top: 1px dashed var(--fio); }
.ficha li:first-child { border-top: 0; }
.ficha .k { font-size: .82rem; color: var(--apagado); line-height: 1.35; padding-top: .3rem; }
.ficha .v { font-family: var(--mao); color: var(--caneta); font-size: 1.18rem; line-height: 1.35; overflow-wrap: anywhere; }
.ficha .n { grid-column: 2; font-size: .86rem; line-height: 1.45; color: var(--apagado); }
.ficha li[hidden] { display: none; }
.ficha li.surge { animation: surgir .5s ease-out both; animation-delay: var(--atraso, 0s); }
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ficha li.surge { animation: none; } }
@media (max-width: 34rem) {
  .ficha li { grid-template-columns: 1fr; }
  .ficha .n { grid-column: 1; }
  .ficha .k { padding-top: 0; }
}

.nao-gravei { max-width: 36rem; margin: 1.6rem 0 0; }
.nao-gravei strong { font-weight: 700; }

/* ---------- cartas ---------- */
.cartas { max-width: 50rem; margin: 0 auto; padding: 3rem 1rem 1rem; }
.cartas > .abre { max-width: 36rem; margin: 0 0 2.4rem; font-size: 1.2rem; }

.carta { background: var(--carta); border-radius: 4px; box-shadow: var(--sombra); margin: 0 0 1.2rem; position: relative; overflow: hidden; }
.carta > summary { display: block; list-style: none; cursor: pointer; padding: 1.6rem 1.25rem 1.3rem; position: relative; }
.carta > summary::-webkit-details-marker { display: none; }
.carta-corpo { padding: 0 1.25rem 1.5rem; }
@media (min-width: 40rem) { .carta > summary { padding: 2.2rem 2.6rem 1.6rem; } .carta-corpo { padding: 0 2.6rem 2rem; } }
/* fechada, a carta é um envelope lacrado: aba em V e lacre vermelho */
.carta:not([open]) { background: var(--envelope); }
.carta:not([open]) > summary { padding-top: 5.2rem; }
.carta:not([open]) > summary::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3rem;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--fio) 50%, transparent calc(50% + 1px)) left top / 50.1% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), var(--fio) 50%, transparent calc(50% + 1px)) right top / 50.1% 100% no-repeat;
}
.carta:not([open]) > summary::after {
  content: "abrir"; position: absolute; top: 1.35rem; left: 50%; width: 3.4rem; height: 3.4rem; margin-left: -1.7rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--carimbo); color: var(--envelope); font-family: var(--mao); font-size: 1.12rem;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .18), 0 2px 5px rgba(0, 0, 0, .25); transition: transform .15s ease-out;
}
.carta:not([open]) > summary:hover::after { transform: scale(1.08) rotate(-6deg); }
.carta:not([open]) h2 { margin-bottom: 0; }
.carta[open] .carta-corpo { animation: surgir .35s ease-out both; }
@media (prefers-reduced-motion: reduce) { .carta[open] .carta-corpo { animation: none; } .carta:not([open]) > summary::after { transition: none; } }
.proxima { margin-top: 1.3rem; }
.carta-n { display: block; font-family: var(--cond); font-weight: 600; font-size: 1.05rem; color: var(--carimbo); margin: 0 0 .5rem; font-variant-numeric: lining-nums; }
.carta h2 { font-family: var(--cond); font-weight: 800; font-size: clamp(2rem, 7.6vw, 3rem); line-height: .98; margin: 0 0 1rem; text-wrap: balance; max-width: 38rem; }
.carta p { margin: 0 0 1rem; max-width: 36rem; }
.carta .dado { font-family: var(--cond); font-weight: 750; font-size: clamp(2.6rem, 12vw, 4rem); line-height: 1; margin: .3rem 0 .2rem; font-variant-numeric: lining-nums tabular-nums; color: var(--tinta); }
.carta .dado + .dado-leg { font-size: .9rem; color: var(--apagado); margin-top: 0; }
.carta blockquote { margin: 1.2rem 0; padding: 0 0 0 1rem; border-left: 3px solid var(--carimbo); font-size: 1.2rem; }
.carta blockquote p { margin: 0 0 .3rem; }
.carta blockquote cite { font-style: normal; font-size: .86rem; color: var(--apagado); }

.faca-hoje { margin: 1.4rem 0 1rem; padding: .9rem 1rem; border: 1.5px solid var(--tinta); border-radius: 3px; max-width: 36rem; }
.faca-hoje label { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: start; cursor: pointer; font-size: 1.02rem; line-height: 1.45; }
.faca-hoje input { appearance: none; -webkit-appearance: none; width: 1.4rem; height: 1.4rem; margin: .1rem 0 0; border: 1.5px solid var(--tinta); border-radius: 2px; background: var(--envelope); display: grid; place-items: center; cursor: pointer; }
.faca-hoje input::after { content: ""; width: .8rem; height: .45rem; border: solid var(--caneta); border-width: 0 0 3px 3px; transform: rotate(-48deg) translate(1px, -2px) scale(0); transition: transform .15s ease-out; }
.faca-hoje input:checked::after { transform: rotate(-48deg) translate(1px, -2px) scale(1); }
.faca-hoje b { font-family: var(--cond); font-weight: 700; font-size: 1.12rem; }

.fonte { font-size: .8rem; line-height: 1.45; color: var(--apagado); margin: .4rem 0 0; max-width: 36rem; }
.fonte a { color: inherit; }
.ps { font-family: var(--mao); color: var(--caneta); font-size: 1.2rem; line-height: 1.4; margin: 1.3rem 0 0; max-width: 34rem; }

.contagem-feitos { font-family: var(--cond); font-weight: 600; font-size: 1.1rem; color: var(--apagado); margin: -1rem 0 2.2rem; }

/* ---------- blocos genéricos ---------- */
.bloco { max-width: 50rem; margin: 0 auto; padding: 3rem 1rem; }
.bloco > p { max-width: 36rem; }

/* ---------- plano de 2 minutos ---------- */
.plano .faca-hoje { margin: .8rem 0; }
.plano .faca-hoje small { display: block; font-size: .9rem; line-height: 1.45; color: var(--apagado); margin-top: .25rem; }
.plano .faca-hoje .caminho { display: block; margin-top: .25rem; font-size: .98rem; }

/* ---------- o dossiê deles ---------- */
.links-dossie { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 38rem; }
.links-dossie li { padding: .75rem 0; border-top: 1px solid var(--fio); }
.links-dossie a { font-family: var(--cond); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.links-dossie span { display: block; font-size: .92rem; line-height: 1.45; color: var(--apagado); margin-top: .2rem; }
.dossie .faca-hoje i { font-style: normal; font-family: var(--cond); font-weight: 700; }

/* ---------- mito ou verdade ---------- */
.quiz-caixa { background: var(--envelope); border-radius: 4px; box-shadow: var(--sombra); padding: 1.4rem 1.2rem 1.3rem; max-width: 38rem; }
.quiz-n { font-family: var(--cond); font-weight: 600; color: var(--apagado); margin: 0 0 .4rem; font-variant-numeric: lining-nums; }
.quiz-afirmacao { font-family: var(--cond); font-weight: 750; font-size: clamp(1.7rem, 6.6vw, 2.3rem); line-height: 1.04; margin: 0 0 1.1rem; text-wrap: balance; }
.quiz-botoes { display: flex; gap: .6rem; flex-wrap: wrap; }
.quiz-botoes .botao { flex: 1 1 8rem; }
.quiz-resposta { margin: 1.1rem 0 0; }
.quiz-veredito { font-family: var(--cond); font-weight: 800; font-size: 1.7rem; margin: 0 0 .3rem; }
.quiz-veredito.certo { color: var(--caneta); }
.quiz-veredito.errado { color: var(--carimbo); }
.quiz-resposta p { margin: 0 0 .8rem; }
.quiz-estat { font-size: .9rem; color: var(--apagado); }
.quiz-fim { font-family: var(--cond); font-weight: 800; font-size: clamp(2rem, 8vw, 3rem); line-height: 1; margin: 0 0 .6rem; }
.quiz-fim:focus { outline: none; }
.quiz-caixa .form-lista { margin-top: 1rem; }
.quiz-caixa .form-lista + .quiz-fim { margin-top: 1.2rem; font-size: clamp(1.6rem, 6vw, 2.2rem); }
.quiz-desafio { font-family: var(--cond); font-weight: 700; font-size: 1.3rem; line-height: 1.2; margin: 1.6rem 0 .6rem; }
.verso .compartilhar { margin-top: 1.4rem; }

/* ---------- quem escreve ---------- */
.quem { font-size: 1.22rem; }
.quem p { max-width: 34rem; }
.quem .assinatura { font-family: var(--mao); color: var(--caneta); font-size: 1.6rem; margin-top: 1.2rem; }

/* ---------- sumário do curso ---------- */
.sumario { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 38rem; counter-reset: mod 0; }
.sumario li { counter-increment: mod; display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; padding: .6rem 0; border-top: 1px solid var(--fio); font-family: var(--cond); font-weight: 650; font-size: 1.35rem; line-height: 1.15; }
.sumario small { display: block; font-family: var(--serif); font-weight: 400; font-size: .92rem; line-height: 1.4; color: var(--apagado); margin-top: .2rem; }
.sumario li::before { content: counter(mod); font-weight: 500; color: var(--apagado); font-variant-numeric: tabular-nums lining-nums; }

/* ---------- lista de espera ---------- */
.lista { background: var(--tinta); color: var(--envelope); }
.lista .bloco { padding-block: 3.4rem; }
.lista h2 { color: var(--envelope); }
.lista a:not(.botao) { color: inherit; }
.form-lista { display: grid; gap: .8rem; max-width: 30rem; margin-top: 1.4rem; }
.form-lista input[type="email"] {
  font: inherit; font-size: 1.15rem; padding: .8rem .9rem; border-radius: 3px; border: 1.5px solid var(--tinta);
  background: var(--envelope); color: var(--tinta); min-height: 3.1rem; width: 100%;
}
.form-lista .consent { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.form-lista .consent input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--caneta); }
.form-lista .botao { font-size: 1.4rem; }
/* dentro da faixa escura da lista as cores se invertem */
.lista .form-lista input[type="email"] { border-color: var(--envelope); }
.lista .botao:not(.secundario) { background: var(--envelope); color: var(--tinta); }
.lista .botao:not(.secundario):hover { background: var(--carta); }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { min-height: 1.4em; font-size: 1rem; margin: 0; }
.form-msg.erro { color: var(--carimbo); }
.lista .form-msg.erro { color: #FFB4AE; }
@media (prefers-color-scheme: dark) { .lista .form-msg.erro { color: #A3161B; } }
.pequeno { font-size: .85rem; line-height: 1.45; opacity: .85; max-width: 32rem; }
.lista .pronto-msg { font-family: var(--mao); font-size: 1.6rem; line-height: 1.3; }
.compartilhar { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.lista .botao.secundario { color: var(--envelope); box-shadow: inset 0 0 0 1.5px var(--envelope); }

/* ---------- rodapé ---------- */
.rodape { max-width: 50rem; margin: 0 auto; padding: 2.4rem 1rem 6rem; font-size: .9rem; color: var(--apagado); }
.rodape p { max-width: 38rem; margin: 0 0 .8rem; }
.rodape a { color: inherit; }

/* ---------- pílula fixa (celular) ---------- */
.pilula {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 25;
  transform: translate(-50%, 160%); visibility: hidden; transition: transform .3s ease-out, visibility 0s linear .3s;
  font-family: var(--cond); font-weight: 700; font-size: 1.15rem; white-space: nowrap;
  background: var(--carimbo); color: var(--envelope); text-decoration: none; padding: .7rem 1.2rem; border-radius: 999px;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.45);
}
.pilula.ver { transform: translate(-50%, 0); visibility: visible; transition: transform .3s ease-out, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .pilula, .pilula.ver { transition: none; } }

/* ---------- diálogo de saída ---------- */
dialog.saida { border: 0; border-radius: 4px; padding: 1.6rem 1.4rem 1.3rem; max-width: 30rem; width: calc(100% - 2rem); background: var(--carta); color: var(--tinta); box-shadow: var(--sombra); }
dialog.saida::backdrop { background: rgba(10, 14, 24, .55); }
dialog.saida h2 { font-family: var(--cond); font-weight: 800; font-size: 2.1rem; line-height: 1; margin: 0 0 .8rem; }
dialog.saida p { margin: 0 0 1rem; }
dialog.saida .form-lista { margin-top: .6rem; }
dialog.saida .fechar { font: inherit; font-size: .9rem; background: none; border: 0; color: var(--apagado); text-decoration: underline; cursor: pointer; padding: .4rem 0; margin-top: .4rem; }

/* páginas internas (privacidade, 404) */
.pagina { max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 4rem; }
.pagina h1 { font-family: var(--cond); font-weight: 800; font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: .95; margin: 1.2rem 0 1rem; }
.pagina h2 { font-family: var(--cond); font-weight: 750; font-size: 1.7rem; line-height: 1.05; margin: 2rem 0 .6rem; }

/* ---------- prévia em vídeo ---------- */
.hero-previa { display: inline-block; margin: .9rem 0 0 .25rem; font-size: 1rem; }
.video-caixa { position: relative; max-width: 46rem; margin: 1.2rem 0 1rem; border-radius: 4px; overflow: hidden; box-shadow: var(--sombra); background: #000; }
.video-caixa video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.video-som {
  position: absolute; left: 50%; bottom: 3.4rem; transform: translateX(-50%);
  font-family: var(--cond); font-weight: 700; font-size: 1.15rem; background: var(--carimbo); color: #fff;
  border: 0; border-radius: 999px; padding: .6rem 1.15rem; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

/* ---------- o susto do "prefiro não saber" ---------- */
dialog.susto { background: var(--tinta); color: var(--envelope); max-width: 32rem; }
dialog.susto h2 { color: var(--envelope); }
.susto-lista { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.susto-lista li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; padding: .45rem 0; border-top: 1px dashed rgba(255, 255, 255, .25); }
.susto-lista .k { font-size: .82rem; opacity: .8; padding-top: .2rem; }
.susto-lista .v { font-family: var(--mao); font-size: 1.2rem; line-height: 1.3; color: #FFB4AE; overflow-wrap: anywhere; }
.susto-forte { font-family: var(--cond); font-weight: 750; font-size: 1.45rem; line-height: 1.15; }
dialog.susto .form-lista { margin-top: .6rem; }
dialog.susto .form-lista input[type="email"] { border-color: var(--envelope); }
dialog.susto .form-lista .botao { background: var(--envelope); color: var(--tinta); }
dialog.susto .form-msg.erro { color: #FFB4AE; }
dialog.susto a { color: inherit; }
dialog.susto .fechar { color: var(--envelope); opacity: .75; }
.lista .fechar { font: inherit; font-size: .9rem; background: none; border: 0; color: var(--envelope); opacity: .7; text-decoration: underline; cursor: pointer; padding: .4rem 0; margin-top: .6rem; }
@media (prefers-color-scheme: dark) {
  .susto-lista .v, dialog.susto .form-msg.erro { color: #A3161B; }
  .susto-lista li { border-top-color: rgba(0, 0, 0, .2); }
}

/* ---------- oferta de pré-venda pela lista (prazo real: 30/11/2026 23h59) ---------- */
.oferta { background: var(--carimbo); color: #fff; }
.oferta .bloco { padding-block: 3rem; }
.oferta h2 { color: #fff; font-family: var(--cond); font-weight: 800; font-size: clamp(2.2rem, 8.5vw, 3.4rem); line-height: .98; margin: 0 0 .6rem; text-wrap: balance; }
.oferta .preco { font-family: var(--cond); font-weight: 800; font-size: clamp(2.6rem, 11vw, 4.2rem); line-height: 1; margin: .2rem 0 .8rem; font-variant-numeric: lining-nums; }
.oferta .preco s { font-weight: 600; font-size: .55em; opacity: .75; margin-right: .3em; }
.oferta .contagem { font-family: var(--cond); font-weight: 700; font-size: 1.35rem; margin: 0 0 1.2rem; font-variant-numeric: tabular-nums lining-nums; }
.oferta .botao { background: #fff; color: var(--carimbo); font-size: 1.45rem; }
.oferta .botao:hover { background: var(--envelope); }
.oferta .pequeno { opacity: .9; margin-top: .9rem; }

/* ---------- oferta: 10x em destaque e os três botões de compra ---------- */
.oferta .preco-de { font-family: var(--cond); font-weight: 600; font-size: 1.4rem; margin: .4rem 0 0; opacity: .9; }
.oferta .preco-de s { opacity: .8; }
.oferta .parcelas { font-family: var(--cond); font-weight: 850; font-size: clamp(3.2rem, 15vw, 5.6rem); line-height: .95; margin: .1rem 0 .4rem; font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.oferta .preco-alt { font-size: 1.05rem; margin: 0 0 1rem; }
.botoes-oferta { display: grid; gap: .7rem; max-width: 26rem; margin: 0 0 1rem; }
.oferta .botoes-oferta .botao { width: 100%; }
.oferta .botao.secundario { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; font-size: 1.2rem; }
.oferta .botao.secundario:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.oferta .pequeno a { color: inherit; }
.comprou { background: var(--caneta); color: #fff; font-family: var(--cond); font-weight: 700; font-size: 1.25rem; line-height: 1.25; padding: 1rem; text-align: center; }

/* ---------- venda mais dura: atalho no topo, preço por dia, garantia, prazo maior ---------- */
.hero-oferta { display: block; margin: .55rem 0 0 .25rem; font-family: var(--cond); font-weight: 600; font-size: 1.15rem; color: var(--carimbo); }
.hero-oferta b { font-weight: 800; }
.oferta .por-dia { font-family: var(--cond); font-weight: 700; font-size: 1.3rem; line-height: 1.2; margin: 0 0 .8rem; }
.oferta .contagem { font-size: 1.75rem; background: rgba(0, 0, 0, .18); padding: .45rem .7rem; display: inline-block; }
.oferta .garantia { font-family: var(--cond); font-weight: 700; font-size: 1.25rem; line-height: 1.25; margin: 0 0 1rem; padding-left: .8rem; box-shadow: inset 3px 0 0 #fff; }
#previa .hero-previa { display: block; margin: .7rem 0 0 .25rem; }
dialog.saida > .botao { display: block; width: 100%; margin: 0 0 1rem; text-align: center; }
dialog.saida .ou-email { margin: 0 0 .6rem; }