/* Página de vendas — "Correio do Polo Norte". Só a home usa este arquivo (o quiz segue no style.css). */
:root {
  --noite: #13204a;
  --noite-funda: #0c1533;
  --neve: #f4f7fb;
  --tinta: #1c2541;
  --tinta-suave: #55607e;
  --ouro: #e9b949;
  --lacre: #c8283c;
  --verde: #1e9e4a;
  --verde-escuro: #157338;
  --aurora: #5fe3b4;
  --linha: #dfe5ef;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--neve); color: var(--tinta);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.55;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 540px; margin: 0 auto; padding: 0 20px; }
h1, h2, .titulo { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-variation-settings: "SOFT" 100; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; }

/* faixa de prazo */
.faixa-topo { background: var(--lacre); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 20px; text-align: center; }

/* ---------- topo: céu do Polo Norte ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(90% 40% at 80% 0%, rgba(95,227,180,.22), transparent 70%),
    radial-gradient(70% 35% at 0% 10%, rgba(95,160,227,.18), transparent 70%),
    linear-gradient(180deg, var(--noite-funda), var(--noite) 70%);
  padding: 26px 0 40px;
}
.hero::before { /* neve fininha */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
    radial-gradient(1px 1px at 85% 60%, #fff, transparent),
    radial-gradient(1px 1px at 10% 85%, #fff, transparent);
  background-size: 180px 180px;
}
.hero .wrap { position: relative; }
.pre { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--aurora); }
.hero h1 { font-size: 34px; line-height: 1.08; font-weight: 700; margin: 0 0 14px; letter-spacing: -.01em; }
.hero h1 span { display: block; margin-top: 6px; font-style: italic; font-weight: 500; color: #ffe7a8; }
.sub { margin: 0 0 22px; color: rgba(255,255,255,.86); font-size: 17px; }

/* vídeo emoldurado como selo postal */
.selo-video {
  position: relative; margin: 0 auto 26px; max-width: 360px; padding: 12px;
  background: #fff;
  /* furos só na borda: a área do vídeo (content-box) fica sólida por cima do padrão de furos */
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 7px at 7px 7px, transparent 98%, #000) -7px -7px / 22px 22px;
  -webkit-mask-composite: source-over;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 7px at 7px 7px, transparent 98%, #000) -7px -7px / 22px 22px;
          mask-composite: add;
}
.selo-video .tela { position: relative; aspect-ratio: 9 / 16; background: #000; overflow: hidden; }
.selo-video video { width: 100%; height: 100%; object-fit: cover; }
.lacre {
  position: absolute; z-index: 2; right: -6px; bottom: 54px; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e2475a, var(--lacre) 55%, #8f1526);
  box-shadow: 0 6px 18px rgba(0,0,0,.4), inset 0 -4px 8px rgba(0,0,0,.25);
  display: grid; place-items: center; text-align: center; color: #ffd9de;
  font-family: "Fraunces", serif; font-size: 12px; font-weight: 700; line-height: 1.1; transform: rotate(-12deg);
}
.lacre b { display: block; font-size: 22px; }
.video-area { position: relative; }
.som {
  position: absolute; z-index: 3; left: 50%; top: 28px; transform: translateX(-50%);
  white-space: nowrap; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px;
  color: var(--tinta); background: #fff; padding: 11px 18px; border-radius: 99px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion: no-preference) {
  .som { animation: chama 2.4s ease-in-out infinite; }
  @keyframes chama { 0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.6); } 50% { box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 10px rgba(255,255,255,0); } }
}

/* botão */
.btn {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  background: var(--verde); color: #fff; border: 0; border-radius: 14px;
  font-family: "Figtree", sans-serif; font-weight: 800; font-size: 19px; padding: 18px 20px;
  box-shadow: 0 5px 0 var(--verde-escuro);
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--verde-escuro); }
.btn-nota { margin: 12px 0 0; font-size: 14px; text-align: center; opacity: .8; }

/* seções */
section { padding: 52px 0; }
h2 { font-size: 30px; line-height: 1.12; font-weight: 700; margin: 0 0 16px; letter-spacing: -.01em; }
.contraste p { margin: 0 0 14px; }
.contraste .grande { font-family: "Fraunces", serif; font-size: 22px; line-height: 1.3; font-style: italic; color: var(--tinta); margin-top: 22px; }

/* linha do tempo do vídeo */
.minutos { background: #fff; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.minutos ol { list-style: none; margin: 8px 0 30px; padding: 0; position: relative; }
.minutos ol::before { content: ""; position: absolute; left: 39px; top: 10px; bottom: 10px; border-left: 2px dotted #c3cbe0; }
.minutos li { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: center; padding: 10px 0; position: relative; }
.minutos img { width: 80px; height: 100px; object-fit: cover; border-radius: 10px; }
.minutos time { display: block; font-size: 13px; font-weight: 700; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.minutos li p { margin: 2px 0 0; font-weight: 600; line-height: 1.35; }

/* como funciona */
.passos { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.passos li { counter-increment: p; position: relative; padding: 0 0 22px 52px; }
.passos li::before {
  content: counter(p); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--noite); color: #fff; display: grid; place-items: center; font-family: "Fraunces", serif; font-weight: 700;
}
.passos b { display: block; font-size: 18px; }
.passos span { color: var(--tinta-suave); }

/* oferta: envelope de correio aéreo */
.envelope {
  position: relative; background: #fff; padding: 30px 22px 26px; border-radius: 6px;
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--lacre) 0 14px, #fff 14px 22px, var(--verde) 22px 36px, #fff 36px 44px) 10;
  box-shadow: 0 18px 40px rgba(19,32,74,.14);
}
.envelope h2 { font-size: 26px; }
.envelope ul { list-style: none; margin: 0 0 20px; padding: 0; }
.envelope li { padding: 9px 0 9px 30px; position: relative; border-bottom: 1px solid var(--linha); }
.envelope li::before { content: "✓"; position: absolute; left: 2px; top: 8px; color: var(--verde); font-weight: 800; }
.ancora { margin: 0 0 6px; color: var(--tinta-suave); font-size: 15px; }
.preco { font-family: "Fraunces", serif; font-size: 52px; font-weight: 800; line-height: 1; color: var(--tinta); margin: 0; }
.preco small { display: block; font-family: "Figtree", sans-serif; font-size: 15px; font-weight: 600; color: var(--tinta-suave); margin-top: 8px; }
.envelope .btn { margin-top: 20px; }
.garantia { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; margin-top: 24px; font-size: 15.5px; }
.garantia .lacre { position: static; width: 72px; height: 72px; transform: rotate(-8deg); font-size: 11px; }
.garantia .lacre b { font-size: 24px; }

/* dúvidas */
.duvidas details { border-bottom: 1px solid var(--linha); padding: 16px 0; }
.duvidas summary { font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 28px; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after { content: "+"; position: absolute; right: 0; top: -3px; font-size: 24px; color: var(--tinta-suave); }
.duvidas details[open] summary::after { content: "–"; }
.duvidas details p { margin: 10px 0 0; color: var(--tinta-suave); }

/* fechamento: a carta assinada */
.fechamento { background: linear-gradient(180deg, var(--noite), var(--noite-funda)); color: #fff; }
.fechamento p { color: rgba(255,255,255,.86); margin: 0 0 14px; }
.assinatura { font-family: "Fraunces", serif; font-style: italic; font-size: 24px; color: #ffe7a8; margin: 18px 0 26px !important; }

footer { padding: 26px 0 120px; text-align: center; font-size: 13px; color: var(--tinta-suave); }
footer a { margin: 0 6px; }

.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: rgba(244,247,251,.96); backdrop-filter: blur(6px); border-top: 1px solid var(--linha);
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .25s;
}
.barra-fixa.on { transform: none; }
.barra-fixa .btn { max-width: 500px; margin: 0 auto; font-size: 17px; padding: 15px; }