/* Dra. Clarissa Fernandes · sistema visual (ver 02-conceito/sistema.md) */
:root{
  --papel:#f5eee5;
  --folha:#fffaf1;
  --folha-2:#f8efe2;
  --lilas:#cdb2bc;
  --lilas-claro:#e3d2d6;
  --bege:#dcc49d;
  --rosa:#e7cfc4;
  --ouro:#b08a57;
  --vinho:#471016;
  --vinho-2:#6b1f2a;
  --tinta:#2b1a1b;
  --tinta-suave:#7a6564;
  --pauta:rgba(71,16,22,.2);
  --margem-vermelha:rgba(180,60,70,.28);
  --titulo:"Libre Caslon Display", "Times New Roman", serif;
  --texto:"Libre Caslon Text", Georgia, serif;
  --maquina:"Courier Prime", "Courier New", monospace;
  --margem:clamp(20px, 5vw, 80px);
  --respiro:clamp(72px, 12vh, 150px);
  --curva:cubic-bezier(.2,.8,.2,1);
  --largura:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{font-family:var(--texto);color:var(--tinta);background:var(--papel);overflow-x:hidden;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--vinho);outline-offset:3px;border-radius:2px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:12px;top:-60px;z-index:20;background:var(--vinho);color:var(--folha);padding:10px 16px;font-family:var(--maquina);font-size:14px;transition:top .2s}
.pular:focus{top:12px}

.fundo{position:fixed;inset:0;z-index:0;background:
  radial-gradient(46vw 40vw at 4% 100% in oklch, color-mix(in oklch, var(--bege) 50%, transparent), transparent 70%),
  var(--papel)}
.grao{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@keyframes sobe{to{transform:none}}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes halo{0%{background-position:0% 0%,100% 0%,50% 100%,0 0}100%{background-position:40% 30%,60% 50%,30% 60%,0 0}}
@keyframes pisca{50%{opacity:0}}
@keyframes bate{to{opacity:var(--tinta-carimbo,.78);transform:rotate(var(--giro,7deg)) scale(1)}}

/* peças comuns */
.botao{display:inline-flex;align-items:center;gap:10px;background:var(--vinho);color:var(--folha);padding:17px 26px;font-family:var(--maquina);font-weight:700;font-size:14.5px;letter-spacing:.02em;border-radius:3px;box-shadow:4px 4px 0 var(--bege);transition:transform .25s, box-shadow .25s;border:0;cursor:pointer;text-align:center}
.botao:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--bege)}
.rotulo{font-family:var(--maquina);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--vinho-2)}
.rotulo b{font-weight:700;color:var(--vinho)}
h2{font-family:var(--titulo);font-weight:400;color:var(--vinho);font-size:clamp(2.2rem, 4.8vw, 4.4rem);line-height:1.0;letter-spacing:-.015em;text-wrap:balance}
h2 em, h3 em{font-family:var(--texto);font-style:italic;font-size:.9em;letter-spacing:-.02em}
.carimbo{display:inline-block;border:2px solid var(--vinho-2);outline:1px solid var(--vinho-2);outline-offset:2px;color:var(--vinho-2);font-family:var(--maquina);font-weight:700;font-size:10.5px;letter-spacing:.14em;line-height:1.35;text-align:center;text-transform:uppercase;padding:5px 9px;border-radius:3px;mix-blend-mode:multiply;transform:rotate(var(--giro,7deg));opacity:.78}
.carimbo b{display:block;font-size:13px;letter-spacing:.1em}
.clipe{width:26px;height:64px;filter:drop-shadow(0 2px 2px rgba(71,16,22,.3))}

main{position:relative;z-index:2}
.secao{position:relative;padding:var(--respiro) var(--margem)}
.miolo{max-width:var(--largura);margin:0 auto}

/* entrada na rolagem: só esconde quando há JavaScript */
.js [data-rev]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--curva), transform .9s var(--curva);transition-delay:var(--d,0s)}
.js [data-rev].visto{opacity:1;transform:none}
.js [data-rev="folha"]{transform:translateY(34px) rotate(var(--r,0deg))}
.js [data-rev="folha"].visto{transform:rotate(var(--r,0deg))}
.js .carimbo[data-bate]{opacity:0;transform:rotate(var(--giro,7deg)) scale(1.6)}
.js .carimbo[data-bate].visto{animation:bate .35s cubic-bezier(.3,1.4,.5,1) var(--d,.3s) forwards}

/* botão de WhatsApp que acompanha a rolagem no celular */
.zap-fixo{position:fixed;z-index:25;left:12px;right:12px;bottom:12px;display:none;justify-content:center;transform:translateY(140%);transition:transform .5s var(--curva)}
.zap-fixo.ativo{transform:none}

@media (max-width: 900px){
  .zap-fixo{display:flex}
  .zap-fixo .botao{width:100%;justify-content:center;box-shadow:0 14px 30px -12px rgba(71,16,22,.6)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
}