/* O Checklist do Laudo Certo · paginas de venda A e B · 12/10/2026
   Paleta do sistema visual "O Laudo Certo" (petroleo + dourado) sobre papel claro.
   Sem fonte externa: Georgia nos titulos (a mesma familia do material) e a fonte do aparelho no texto. */
:root {
  --petroleo: #0A2A38;
  --petroleo-alto: #0E3A47;
  --ouro: #F5C518;
  --ouro-no-claro: #8A6A10;
  --papel: #FBF8F1;
  --papel-2: #F1ECE0;
  --tinta: #14242B;
  --tinta-suave: #47585F;
  --linha: #DDD5C3;
  --branco-88: rgba(255, 255, 255, .88);
  --branco-64: rgba(255, 255, 255, .64);
  --serifa: Georgia, "Times New Roman", serif;
  --sem: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #06151B;
  color: var(--tinta);
  font-family: var(--sem);
  font-size: 17px;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }

.pagina {
  max-width: 480px;
  margin: 0 auto;
  background: var(--papel);
  overflow: hidden;
}

.barra {
  background: var(--ouro);
  color: #1B1602;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  padding: 9px 16px;
}

section { padding: 44px 22px; }
section.escuro {
  background: radial-gradient(120% 90% at 50% -10%, var(--petroleo-alto) 0%, var(--petroleo) 65%);
  color: var(--branco-88);
}
section.papel-2 { background: var(--papel-2); }

h1, h2 {
  font-family: var(--serifa);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
  text-wrap: balance;
}
h1 { font-size: 31px; }
h2 { font-size: 26px; }
.escuro h1, .escuro h2 { color: #fff; }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
p { margin: 0 0 14px; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
.destaque { color: var(--ouro); }

.logo { width: 150px; margin: 0 auto 26px; }
.etiqueta {
  display: table;
  margin: 0 auto 18px;
  border: 1px solid rgba(180, 193, 116, .78);
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--ouro);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.capa { text-align: center; padding-top: 30px; }
.capa .sub { font-size: 17.5px; color: var(--branco-88); }

.botao {
  display: block;
  width: 100%;
  margin: 22px 0 0;
  padding: 17px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--ouro);
  color: #1B1602;
  font-family: var(--sem);
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.botao:active { transform: translateY(1px); }
.botao.fino {
  background: transparent;
  color: var(--ouro);
  border: 1.5px solid var(--ouro);
  box-shadow: none;
  font-weight: 700;
  padding: 13px 14px;
  margin-top: 12px;
}
.selos {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--branco-64);
  text-align: center;
}
section:not(.escuro) .selos { color: var(--tinta-suave); }

/* Composicao da capa: o guia no celular e a folha do checklist ao lado */
.dupla { position: relative; height: 330px; margin: 30px 0 4px; }
.dupla img { position: absolute; border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.dupla .folha { width: 58%; right: 2%; top: 26px; transform: rotate(4deg); border-radius: 4px; }
.dupla .celular { width: 46%; left: 5%; top: 0; border: 5px solid #05090B; border-radius: 22px; transform: rotate(-3deg); }
.tripla { position: relative; height: 320px; margin: 30px 0 4px; }
.tripla img { position: absolute; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.tripla .folha { width: 50%; right: 0; top: 34px; transform: rotate(5deg); border-radius: 4px; }
.tripla .word { width: 56%; left: 22%; top: 150px; border-radius: 4px; }
.tripla .celular { width: 40%; left: 2%; top: 0; border: 5px solid #05090B; border-radius: 20px; transform: rotate(-4deg); }

ul.marcas, ol.passos { list-style: none; margin: 18px 0; padding: 0; }
ul.marcas li {
  position: relative;
  padding: 0 0 0 30px;
  margin: 0 0 13px;
}
ul.marcas li::before {
  content: "";
  position: absolute;
  left: 4px; top: .42em;
  width: 13px; height: 7px;
  border-left: 3px solid var(--ouro-no-claro);
  border-bottom: 3px solid var(--ouro-no-claro);
  transform: rotate(-45deg);
}
.escuro ul.marcas li::before { border-color: var(--ouro); }
ul.marcas.dor li::before {
  width: 9px; height: 9px;
  border: 0;
  border-radius: 50%;
  background: #B4533A;
  transform: none;
  left: 6px; top: .55em;
}

ol.passos { counter-reset: passo; }
ol.passos li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 0 48px;
  margin: 0 0 18px;
}
ol.passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--petroleo);
  color: var(--ouro);
  font-family: var(--serifa);
  font-weight: 700;
  font-size: 18px;
  line-height: 34px;
  text-align: center;
}
.escuro ol.passos li::before { background: var(--ouro); color: var(--petroleo); }

.fecho {
  margin-top: 20px;
  padding: 14px 16px;
  border-left: 3px solid var(--ouro-no-claro);
  background: rgba(138, 106, 16, .08);
  font-weight: 600;
}
.escuro .fecho { border-color: var(--ouro); background: rgba(245, 197, 24, .09); color: #fff; }

.vitrine { margin: 22px 0 0; }
.vitrine figure { margin: 0 0 26px; }
.vitrine img {
  width: 78%;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}
.vitrine img.larga { width: 100%; border-radius: 4px; }
.vitrine figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  text-align: center;
  color: var(--tinta-suave);
}
.escuro .vitrine figcaption { color: var(--branco-64); }
.nota { font-size: 14.5px; color: var(--tinta-suave); text-align: center; }
.escuro .nota { color: var(--branco-64); }

.rota {
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px;
  margin: 0 0 12px;
}

.autor { text-align: center; }
.autor img {
  width: 132px; height: 132px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 3px solid var(--ouro);
  object-fit: cover;
}
.autor p { text-align: left; }

.cartao-oferta {
  background: #fff;
  border: 2px solid var(--petroleo);
  border-radius: 16px;
  padding: 26px 20px 24px;
  box-shadow: 0 14px 34px rgba(10, 42, 56, .16);
}
.cartao-oferta h2 { text-align: center; }
.preco { text-align: center; margin: 20px 0 0; }
.preco .de { font-size: 16px; color: var(--tinta-suave); }
.preco .por {
  display: block;
  font-family: var(--serifa);
  font-size: 54px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--petroleo);
}
.preco .como { font-size: 14.5px; color: var(--tinta-suave); }

table.caminhos { width: 100%; border-collapse: collapse; margin: 18px 0 0; font-size: 15px; }
table.caminhos th, table.caminhos td { padding: 12px 10px; vertical-align: top; text-align: left; width: 50%; }
table.caminhos th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
table.caminhos th:first-child, table.caminhos td:first-child { color: var(--branco-64); }
table.caminhos th:last-child { color: var(--ouro); }
table.caminhos td:last-child { color: #fff; font-weight: 600; background: rgba(245, 197, 24, .08); }
table.caminhos tr + tr td { border-top: 1px solid rgba(255, 255, 255, .14); }

.garantia { text-align: center; }
.selo-7 {
  width: 84px; height: 84px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid var(--ouro-no-claro);
  color: var(--ouro-no-claro);
  font-family: var(--serifa);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.selo-7 small { font-family: var(--sem); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }

details {
  border-bottom: 1px solid var(--linha);
  padding: 15px 0;
}
details:first-of-type { border-top: 1px solid var(--linha); }
summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  position: relative;
  padding-right: 30px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: -3px;
  font-size: 24px;
  font-weight: 400;
  color: var(--ouro-no-claro);
}
details[open] summary::after { content: "–"; }
details p { margin: 10px 0 0; color: var(--tinta-suave); }

footer {
  background: #06151B;
  color: rgba(255, 255, 255, .56);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  padding: 26px 22px 34px;
}
footer a { color: rgba(255, 255, 255, .72); }

@media (min-width: 481px) {
  body { padding: 24px 0; }
  .pagina { border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
}