/* Tokens do contrato de design (docs/design-contrato.md).
   Identidade herdada do guia de fotos real do Maurício: papel, carmim, grotesca, anotação à mão. */

:root{
  color-scheme: light;
  --papel:#F4F1E8;
  --papel-fundo:#EDE9DE;
  --branco:#FFFFFF;
  --tinta:#16130F;
  --tinta-suave:#4A443B;
  --tinta-fraca:#7A736A;
  --carmim:#CE2029;
  --carmim-escuro:#9E1119;
  --carmim-fraco:rgba(206,32,41,.07);
  --amarelo:#FBE571;
  --linha:rgba(22,19,15,.13);
  --sombra:0 2px 18px rgba(22,19,15,.05);
  --sombra-alta:0 18px 46px rgba(22,19,15,.13);
  --raio:14px;
  --raio-btn:8px;
  --col:720px;
  --col-larga:1080px;
  --sec:88px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta-suave);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  line-height:1.58;
  overflow-x:hidden;
}

/* textura de papel, sem asset externo */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
  opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

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

h1,h2,h3{color:var(--tinta);line-height:1.06;letter-spacing:-.032em;font-weight:800;margin:0 0 .5em}
h1{font-size:46px}
h2{font-size:32px}
h3{font-size:20px;letter-spacing:-.02em;line-height:1.25}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--tinta)}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

.col{width:min(100% - 40px,var(--col));margin-inline:auto}
.col-larga{width:min(100% - 40px,var(--col-larga));margin-inline:auto}
.bloco{position:relative;padding:var(--sec) 0}
.fundo{background:var(--papel-fundo)}
.borda{border-top:1px solid var(--linha)}

/* anotação à mão: a voz do Maurício marcando a página. Três usos no total. */
.mao{
  font-family:'Caveat',cursive;
  font-size:27px;
  line-height:1.25;
  color:var(--carmim);
  font-weight:600;
  display:block;
  transform:rotate(-1.2deg);
  transform-origin:left center;
  margin-bottom:14px;
}

.pill{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--carmim);
  border:1.5px solid var(--carmim);
  padding:8px 13px;
  border-radius:3px;
  margin-bottom:26px;
}

.sub{font-size:19px;line-height:1.55;color:var(--tinta-suave)}
.destaque{color:var(--carmim)}
.marcado{background:linear-gradient(transparent 58%,var(--amarelo) 58%);padding:0 2px}

/* botão: um estilo do topo ao rodapé */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:62px;
  padding:16px 24px;
  background:var(--carmim);
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
  text-align:center;
  text-decoration:none;
  border-radius:var(--raio-btn);
  transition:background .16s ease,transform .16s ease;
}
.btn:hover{background:var(--carmim-escuro);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}

.selos-btn{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  margin-top:14px;
  font-size:13px;
  color:var(--tinta-fraca);
}
.selos-btn li{display:flex;align-items:center;gap:6px}
.selos-btn svg{width:15px;height:15px;flex:none;color:var(--carmim)}

.micro{font-size:14.5px;color:var(--tinta-fraca);margin-top:12px;text-align:center}

.card{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:26px 28px;
}

.olho{
  font-size:12px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--carmim);
  margin-bottom:16px;
}

@media (max-width:860px){
  :root{--sec:52px}
  body{font-size:16px}
  h1{font-size:30px}
  h2{font-size:25px}
  h3{font-size:18px}
  .sub{font-size:17px}
  .mao{font-size:23px}
  .card{padding:22px}
}