/* Base: tokens, reset, tipografia e peças comuns (wrap, section, eyebrow, btn, brand, skip). */
:root{--paper:#f5f0e9;--warm:#eae2d7;--ink:#121212;--mute:#615c56;--rule:#cfc6bb;--blue:#0646e8;--cream:#fff9f0;--display:Impact,'Arial Narrow','Arial Black',sans-serif;--body:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.6' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ff8b42;outline-offset:5px}
button{cursor:pointer}
.wrap{max-width:1440px;margin:auto;padding:0 5%}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:10px}
.dot{height:7px;width:7px;border-radius:100%;background:currentColor;display:inline-block}
.brand{font-weight:900;letter-spacing:-2px;font-size:33px;line-height:.85;display:flex;align-items:flex-end;gap:9px}
.brand span{font-size:8px;letter-spacing:.22em;line-height:1.5;font-weight:700;margin-bottom:1px}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:17px 24px;background:var(--blue);border:1px solid var(--blue);color:var(--cream);border-radius:50px;font-size:12px;font-weight:700;transition:transform .2s,background .2s}
.btn:hover{background:#0335b5;transform:translateY(-2px)}
.btn .arrow{font-size:20px;line-height:1}
.section{padding:94px 0}
.section-top{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-bottom:48px}
.section h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(48px,5.4vw,82px);letter-spacing:-.025em;line-height:1;max-width:770px;margin:0}
.section h2 em{color:var(--blue);font-style:normal}
.section-top .eyebrow{align-self:start;margin-top:9px}
.skip{position:absolute;top:-100px;left:16px;background:var(--ink);color:white;padding:12px;z-index:20}
.skip:focus{top:10px}
/* Animações da nova arte: só transform. Pausam com o botão (data-movimento) e somem com movimento reduzido. */
.flutua{animation:flutua var(--duracao,7s) var(--atraso,0s) ease-in-out infinite alternate}
@keyframes flutua{to{transform:translateY(var(--altura,-12px)) rotate(var(--giro,1.5deg))}}
/* Faixa com o dobro da largura: desliza metade e recomeça sem emenda (background-size divide 50%). */
.nuvens{position:absolute;left:0;width:200%;background:url('../img/nova-arte/nuvens-brancas-isoladas-em-fundo-transparente-10.webp') repeat-x 0 0/25% auto;animation:nuvens var(--duracao,80s) linear infinite}
@keyframes nuvens{to{transform:translateX(-50%)}}
[data-movimento="pausado"] .flutua,[data-movimento="pausado"] .nuvens,[data-movimento="pausado"] .camera-reflexo:before{animation-play-state:paused}
@media(max-width:900px){
  .section{padding:72px 0}
  .section-top{grid-template-columns:.65fr 2fr}
}
@media(max-width:650px){
  html{scroll-padding-top:25px}
  .wrap{padding:0 6%}
  .brand{font-size:29px}
  .eyebrow{font-size:9px}
  .section{padding:58px 0}
  .section-top{display:block;margin-bottom:32px}
  .section-top .eyebrow{margin-bottom:22px}
  .section h2{font-size:48px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}
.section h2{font-weight:400;letter-spacing:-.015em}
@media(max-width:650px){
  html{scroll-padding-top:24px}
}
@media(max-width:360px){
  .section h2{font-size:40px}
  .brand span{font-size:7px}
}
/* Frases manuscritas (.escrita): escritas letra a letra pelo escrita.js, ficam um tempo, somem e são reescritas.
   Sem JS ou sem movimento, aparecem inteiras. Posição, cor e tamanho ficam no CSS de cada seção. */
@font-face{font-family:'Gloria Hallelujah';src:url('../fonts/gloria-hallelujah.woff2') format('woff2');font-display:swap}
.escrita{font-family:'Gloria Hallelujah',cursive;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-12deg)}
.escrita:after{content:'';display:block;width:2.6em;height:2px;margin:.4em 0 0 2.4em;border-radius:2px;background:currentColor;transform-origin:left}
.escrita.pronta span{opacity:0}
.escrita.pronta:after{transform:scaleX(0)}
.escrita.escrevendo span{animation:letra .15s ease-out forwards;animation-delay:calc(var(--i) * 85ms)}
.escrita.escrevendo:after{animation:traco .5s ease-out forwards;animation-delay:calc(var(--total) * 85ms)}
.escrita.apagando{animation:apaga 3.5s forwards}
@keyframes letra{to{opacity:1}}
@keyframes apaga{0%,85%{opacity:1}to{opacity:0}}
@keyframes traco{to{transform:scaleX(1)}}
[data-movimento="pausado"] .escrita,[data-movimento="pausado"] .escrita span,[data-movimento="pausado"] .escrita:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .escrita.pronta span{opacity:1}
  .escrita.pronta:after{transform:none}
}