:root{
  --papel:#ECEEEC;
  --painel:#E3E7E4;
  --tinta:#15191C;
  --tinta-2:#575F60;
  --tinta-3:#7B8385;
  --regua:#CFD6D2;
  --selo:#1F5C48;
  --selo-claro:#2E7A62;

  --serif:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --medida:34rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--serif);
  font-size:1.1875rem;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

.folha{
  max-width:var(--medida);
  margin:0 auto;
  padding:0 1.5rem;
}

/* ---------- cabecalho ---------- */
.topo{
  border-bottom:1px solid var(--regua);
  margin-bottom:3.5rem;
}
.topo .folha{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding-top:1.5rem;
  padding-bottom:1.125rem;
}
.marca{
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:-.01em;
}
.marca-fina{font-weight:400;color:var(--tinta-2)}
.origem{
  font-family:var(--sans);
  font-size:.75rem;
  color:var(--tinta-3);
  letter-spacing:.03em;
}

/* ---------- abertura ---------- */
.abertura{margin-bottom:3rem}
.abertura h1{
  font-family:var(--serif);
  font-size:clamp(2rem,6.5vw,2.9rem);
  line-height:1.14;
  font-weight:400;
  letter-spacing:-.021em;
  margin:0 0 1.25rem;
  text-wrap:balance;
}
.abertura h1 em{
  font-style:italic;
  color:var(--selo);
}
.linha-fina{
  font-size:1.0625rem;
  color:var(--tinta-2);
  margin:0;
}

.carta p{margin:0 0 1.15rem}
.carta p:last-child{margin-bottom:0}

/* ---------- rotulos de secao ---------- */
.rotulo{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--tinta-3);
  margin:0 0 1.125rem;
  padding-top:2.75rem;
  border-top:1px solid var(--regua);
}
section{margin-top:2.75rem}

/* ---------- lista do que fazemos ---------- */
.faz{list-style:none;padding:0;margin:0}
.faz li{
  padding:.625rem 0 .625rem 1.5rem;
  position:relative;
  border-bottom:1px solid var(--regua);
}
.faz li:last-child{border-bottom:0;padding-bottom:0}
.faz li::before{
  content:"";
  position:absolute;
  left:0;top:1.35rem;
  width:.4375rem;height:.4375rem;
  background:var(--selo);
  border-radius:50%;
}

/* ---------- ASSINATURA: o recibo ---------- */
.recibo{
  background:var(--painel);
  border:1px solid var(--regua);
  padding:1.5rem 1.5rem 1.375rem;
  margin:0 0 1.25rem;
}
.recibo dl{margin:0}
.item{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.5rem;
  padding:.6875rem 0;
}
.item + .item{border-top:1px solid var(--regua)}
.item dt{
  font-family:var(--sans);
  font-size:.9375rem;
  color:var(--tinta);
  white-space:nowrap;
}
.item .pontos{
  flex:1;
  border-bottom:1px dotted var(--tinta-3);
  transform:translateY(-.25rem);
  min-width:1.5rem;
  opacity:.65;
}
.item dd{
  margin:0;
  font-family:var(--mono);
  font-size:1rem;
  font-weight:500;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.gratis{
  color:var(--selo);
  font-weight:500;
  letter-spacing:.02em;
}
/* Nota da linha: ocupa a largura toda logo abaixo, para nao espremer
   os pontinhos nem empurrar o valor para fora do alinhamento. */
.item .nota{
  width:100%;
  order:5;
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:400;
  color:var(--tinta-3);
  margin:-.1875rem 0 0;
  white-space:normal;
  text-align:right;
  letter-spacing:0;
}
.recibo-rodape{
  font-family:var(--sans);
  font-size:.8125rem;
  line-height:1.55;
  color:var(--tinta-2);
  margin:1rem 0 0;
  padding-top:.875rem;
  border-top:1px solid var(--regua);
}

.explica{
  font-size:1rem;
  color:var(--tinta-2);
  margin:0;
}

/* ---------- perguntas ---------- */
.perg{margin:0 0 1.75rem}
.perg:last-child{margin-bottom:0}
.perg h3{
  font-family:var(--sans);
  font-size:.9375rem;
  font-weight:600;
  margin:0 0 .4375rem;
  letter-spacing:-.005em;
}
.perg p{
  margin:0;
  font-size:1.0625rem;
  color:var(--tinta-2);
}

/* ---------- fechamento ---------- */
.fecho{
  background:var(--tinta);
  color:var(--papel);
  margin-top:4rem;
  padding:2.75rem 0 2.5rem;
}
.fecho h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;
  line-height:1.3;
  margin:0 0 .75rem;
  letter-spacing:-.015em;
}
.fecho p{
  margin:0;
  color:#B9C2C0;
  font-size:1.0625rem;
}
.fecho a{color:var(--papel);text-decoration:underline;text-underline-offset:.2em}

/* ---------- rodape ---------- */
footer{
  padding:2rem 0 3rem;
  font-family:var(--sans);
  font-size:.8125rem;
  line-height:1.7;
  color:var(--tinta-3);
}
footer a{color:var(--tinta-2)}
footer .quem{color:var(--tinta-2);margin:0 0 .75rem}
footer p{margin:0 0 .5rem}

a{color:var(--selo)}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--selo);
  outline-offset:3px;
}

/* ---------- entrada ---------- */
@media (prefers-reduced-motion:no-preference){
  .anima{animation:surge .55s cubic-bezier(.2,.7,.3,1) both}
  .anima:nth-child(2){animation-delay:.06s}
  @keyframes surge{
    from{opacity:0;transform:translateY(.5rem)}
    to{opacity:1;transform:none}
  }
}

@media (max-width:34rem){
  body{font-size:1.125rem}
  .item{flex-wrap:wrap}
  .item .pontos{min-width:1rem}
  .item .nota{text-align:left;width:100%}
}