@font-face{font-family:AltFrantic;src:url("../assets/fonts/Alt_Frantic.ttf") format("truetype");font-display:swap}
@font-face{font-family:BrushRouta;src:url("../assets/fonts/BrushRouta-Regular.otf") format("opentype");font-display:swap}
@font-face{font-family:OpenSans;src:url("../assets/fonts/OpenSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:OpenSans;src:url("../assets/fonts/OpenSans-SemiBold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --pink:#f973cc;--purple:#984bcb;--yellow:#ffc200;--white:#fff;--ink:#21122c;
  --paper:#fff8ef;--muted:#6b5875;--line:rgba(33,18,44,.16);--shadow:0 24px 70px rgba(82,29,100,.22);
  --radius:22px;--focus:#111;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:OpenSans,Arial,sans-serif;line-height:1.55;overflow-x:hidden}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.high-contrast{--paper:#fff;--ink:#08030d;--muted:#1d1424;--line:#08030d;--focus:#000}
a{color:inherit}
img{max-width:100%;display:block}
.skip-link{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:#fff;padding:.75rem 1rem;border-radius:.5rem;z-index:20}
.skip-link:focus{top:1rem}
:focus-visible{outline:4px solid var(--focus);outline-offset:4px}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem clamp(1rem,3vw,2rem);background:rgba(255,248,239,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand img{width:clamp(104px,14vw,144px);height:auto}.nav{display:flex;gap:1rem;font-weight:700}.nav a{text-decoration:none}.nav a:hover{color:var(--purple)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:9px;background:none;border:none;cursor:pointer}
.nav-toggle span{display:block;height:3px;width:100%;background:var(--ink);border-radius:3px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.a11y-actions{display:flex;gap:.5rem;flex-wrap:wrap}.control-btn,.btn{border:2px solid var(--ink);border-radius:999px;padding:.78rem 1rem;font-weight:800;background:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.control-btn{font-size:.82rem}.btn.primary{background:var(--ink);color:#fff;box-shadow:6px 6px 0 var(--yellow)}.btn.secondary{background:#fff;color:var(--ink)}
.scene{position:relative;min-height:100vh;padding:clamp(5rem,9vw,8rem) clamp(1rem,5vw,5rem);isolation:isolate}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);align-items:center;gap:clamp(2rem,5vw,5rem);overflow:hidden;background:var(--paper)}
.hero-bg,.hero-bg::after{position:absolute;inset:0;z-index:-2}.hero-bg::after{content:"";background:linear-gradient(90deg,rgba(255,248,239,.92),rgba(255,248,239,.48) 48%,rgba(255,248,239,.82))}
.hero-scroll-video,.hero-collage{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scroll-video{z-index:-3;opacity:.72;filter:saturate(1.08) contrast(1.03)}
.hero-collage{z-index:-4;opacity:.82}.hero-pattern{position:absolute;right:-8vw;bottom:-12vw;width:min(55vw,760px);opacity:.18;mix-blend-mode:multiply}
.eyebrow{margin:0 0 .9rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--purple)}
h1,h2,h3{margin:0;line-height:.95}h1,h2,.campaign-number{font-family:AltFrantic,Impact,sans-serif;text-transform:uppercase}
h1{font-size:clamp(4rem,11vw,9.5rem);max-width:10ch;color:var(--purple);text-shadow:4px 4px 0 var(--yellow)}
h2{font-size:clamp(3rem,7vw,6.5rem);max-width:11ch;color:var(--purple)}h3{font-size:1.25rem}.hero-sub{font-size:clamp(1.15rem,2.2vw,1.8rem);max-width:40rem;font-weight:800}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}.hero-portrait{position:relative;align-self:end}.portrait{max-height:78vh;margin-inline:auto;filter:drop-shadow(18px 18px 0 var(--pink))}
/* ===== Dobra 1: vídeo full-screen com scrub por scroll ===== */
.video-intro{position:relative;height:100vh;width:100%;margin:0;padding:0;background:#0d0715;overflow:hidden}
.video-intro-stage{position:absolute;inset:0;height:100vh;width:100%}
.video-intro-media{width:100%;height:100%;object-fit:cover;display:block;background:#0d0715}
.video-intro-mobile,.video-intro-seq{display:none}
.video-intro-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:2;padding:.5rem 1rem;border-radius:999px;background:rgba(13,7,21,.55);backdrop-filter:blur(6px);color:#fff;font-weight:900;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;animation:introCue 1.8s ease-in-out infinite}
@keyframes introCue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
.number-badge,.campaign-number{background:var(--yellow);color:var(--purple);border:4px solid var(--ink);box-shadow:9px 9px 0 var(--pink)}
.number-badge{position:absolute;right:0;bottom:8%;font-family:AltFrantic;font-size:clamp(2.4rem,6vw,5rem);padding:.35rem .8rem;transform:rotate(-4deg)}
.scroll-cue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);font-weight:900;color:var(--muted)}
.pattern-scene{display:grid;align-items:center;grid-template-columns:minmax(0,1fr) minmax(280px,520px);background:#fff;overflow:hidden}
.pattern-static{position:absolute;inset:4%;background:url("../assets/img/noise-pattern-scene.webp") center/cover no-repeat;border-radius:var(--radius);box-shadow:var(--shadow);z-index:-2}
#pattern-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.95}
.scene-copy,.section-head{max-width:760px}.scene-copy{grid-column:2;background:rgba(255,255,255,.88);padding:clamp(1.2rem,3vw,2rem);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--yellow)}
.data-scene{background:linear-gradient(135deg,#fff 0%,#fff8ef 55%,#ffe3f6 100%)}.section-head{margin-bottom:2rem}
.data-grid,.proposal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.data-card,.proposal-card{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:1.25rem;box-shadow:7px 7px 0 rgba(152,75,203,.22)}
.data-card strong{display:block;font-family:AltFrantic;font-size:clamp(3rem,8vw,6rem);line-height:.9;color:var(--pink);text-shadow:3px 3px 0 var(--yellow)}
.infinity-line{display:block;width:min(680px,100%);margin:3rem auto 0;filter:drop-shadow(0 8px 16px rgba(152,75,203,.22));animation:infPulse 5.5s ease-in-out infinite}
.infinity-line path{stroke-dasharray:1550;stroke-dashoffset:0;animation:infHue 9s linear infinite}
html.js .infinity-line path{stroke-dashoffset:1550;transition:stroke-dashoffset 1.8s ease}
html.js .infinity-line.is-visible path{stroke-dashoffset:0}
/* Segmento de luz que percorre o infinito para sempre */
.infinity-line .infinity-flow{stroke-dasharray:58 1097;stroke-dashoffset:0;opacity:0;filter:drop-shadow(0 0 6px rgba(255,255,255,.9));animation:infFlow 3.4s linear infinite;transition:opacity .5s ease .9s}
html.js .infinity-line .infinity-flow{stroke-dashoffset:0}
.infinity-line.is-visible .infinity-flow{opacity:.92}
@keyframes infFlow{to{stroke-dashoffset:-1155}}
@keyframes infPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.02)}}
@keyframes infHue{to{filter:hue-rotate(360deg)}}
.proposals{background:
  radial-gradient(circle at 12% 18%,rgba(249,115,204,.26) 0 9rem,transparent 9.2rem),
  radial-gradient(circle at 88% 8%,rgba(152,75,203,.22) 0 10rem,transparent 10.2rem),
  radial-gradient(circle at 80% 86%,rgba(255,194,0,.28) 0 13rem,transparent 13.2rem),
  linear-gradient(180deg,var(--paper),#fff 46%,#fff1bd);
  color:var(--ink)}
.proposals::before{content:"";position:absolute;inset:0;background:url("../assets/img/pattern.webp") center/620px repeat;opacity:.08;z-index:-1}
.proposals .section-head{position:relative;background:rgba(255,255,255,.94);border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(1.1rem,3vw,2rem);box-shadow:9px 9px 0 var(--yellow)}
.proposals .section-head h2{max-width:12ch;text-shadow:3px 3px 0 rgba(255,194,0,.65)}
.proposals .section-head p:last-child{font-weight:800}
.proposal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.proposal-card{min-height:320px;background:rgba(255,255,255,.94);transition:transform .25s ease,box-shadow .25s ease;position:relative;overflow:hidden}
.proposal-card::after{content:"";position:absolute;inset:auto -16% -28% auto;width:170px;height:170px;border-radius:999px;background:linear-gradient(135deg,var(--yellow),var(--pink));opacity:.16;z-index:0}
.proposal-card>*{position:relative;z-index:1}
.proposal-card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:12px 12px 0 var(--yellow)}
.cause-icon{width:clamp(96px,36%,150px);aspect-ratio:1.25;object-fit:contain;margin:-.4rem 0 .6rem;filter:drop-shadow(5px 7px 0 rgba(152,75,203,.16))}
.cause-kicker{display:inline-flex;margin-bottom:.35rem;padding:.22rem .55rem;border:2px solid var(--ink);border-radius:999px;background:var(--yellow);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
html.js .cause-card .cause-icon{transform:translateY(18px) scale(.88) rotate(-4deg);opacity:0}
.cause-card.is-visible .cause-icon{transform:none;opacity:1;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .55s ease;transition-delay:calc(var(--i) * 80ms)}
.timeline{background:#fff;min-height:auto;padding-block:clamp(3rem,6vw,4.5rem)}
.timeline .section-head{margin-bottom:2.2rem}
.timeline-list{list-style:none;margin:0;padding:0;max-width:820px;position:relative}
.timeline-list::before{content:"";position:absolute;left:138px;top:.9rem;bottom:1.4rem;width:4px;border-radius:4px;background:linear-gradient(180deg,var(--pink),var(--purple) 55%,var(--yellow))}
.timeline-list li{position:relative;display:grid;grid-template-columns:120px 1fr;gap:2rem;padding:.85rem 0;align-items:baseline}
.timeline-list li::before{content:"";position:absolute;left:131px;top:1.35rem;width:18px;height:18px;border-radius:50%;background:var(--yellow);border:4px solid var(--ink);box-shadow:0 0 0 5px #fff;z-index:1}
.timeline-list li:last-child::before{background:var(--pink)}
.timeline-list time{font-family:AltFrantic;font-size:clamp(1.7rem,3vw,2.3rem);color:var(--pink);text-align:right;line-height:1}
.timeline-list li span{font-weight:700;font-size:clamp(1rem,1.5vw,1.15rem);color:var(--ink)}
.conversion{min-height:80vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff}.conversion-card{text-align:center;max-width:860px}.conversion-card h2{color:#fff;text-shadow:4px 4px 0 var(--ink);margin:auto}
.campaign-number{display:inline-block;margin:2rem auto;padding:.25rem 1rem;font-size:clamp(5rem,18vw,13rem);line-height:.85}
.footer{background:var(--ink);color:#fff;padding:2rem clamp(1rem,5vw,5rem);display:grid;gap:1rem}.footer img{max-width:132px}.footer p{max-width:950px;margin:0;font-size:.92rem}
.js .reveal{opacity:0;transform:translateY(28px)}.reveal.is-visible{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
/* ===== Movimento dos cards: entrada com mola + tilt 3D (JS) ===== */
.js .data-card.reveal,.js .proposal-card.reveal{opacity:0;transform:translateY(34px) scale(.95)}
.data-card.reveal.is-visible,.proposal-card.reveal.is-visible{opacity:1;transform:none;animation:cardPop .75s cubic-bezier(.34,1.55,.62,1) both}
.data-card.reveal,.proposal-card.reveal{transition:transform .18s ease,box-shadow .28s ease;transform-origin:center}
.data-grid .data-card:nth-child(2){animation-delay:.09s}
.data-grid .data-card:nth-child(3){animation-delay:.18s}
.proposal-card.reveal.is-visible{animation-delay:calc(var(--i,0) * 70ms)}
.js .timeline-list li.reveal{opacity:0;transform:translateX(-26px)}
.timeline-list li.reveal.is-visible{opacity:1;transform:none;animation:cardSlide .7s cubic-bezier(.34,1.5,.6,1) both}
.timeline-list li:nth-child(2){animation-delay:.08s}.timeline-list li:nth-child(3){animation-delay:.16s}.timeline-list li:nth-child(4){animation-delay:.24s}
.timeline-list li{transition:transform .2s ease}
.timeline-list li:hover{transform:translateX(6px)}
@keyframes cardPop{from{opacity:0;transform:translateY(34px) scale(.95)}to{opacity:1;transform:none}}
@keyframes cardSlide{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
/* ===== Hero (2ª dobra): formas geométricas flutuantes ===== */
.hero-shapes{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.hero-shape{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:var(--c);opacity:.42;mix-blend-mode:multiply;will-change:transform;animation:heroFloat var(--dur,12s) ease-in-out var(--d,0s) infinite}
.hero-shape.hs-circle{border-radius:50%}
.hero-shape.hs-square{border-radius:16px}
.hero-shape.hs-ring{background:transparent;border-radius:50%;border:14px solid var(--c);opacity:.5}
.hero-shape.hs-tri{clip-path:polygon(50% 3%,97% 97%,3% 97%)}
@keyframes heroFloat{0%,100%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(16px,-26px) rotate(9deg)}66%{transform:translate(-14px,14px) rotate(-7deg)}}
/* ===== Faixa marquee (divisor girando) ===== */
.marquee{position:relative;z-index:2;overflow:hidden;width:108%;margin:2.5rem 0 2.5rem -4%;padding:.85rem 0;background:var(--ink);color:#fff;border-block:4px solid var(--purple);transform:rotate(-2.2deg)}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marqueeScroll 24s linear infinite}
.marquee-group{display:flex;align-items:center;gap:2rem;padding-right:2rem;flex:0 0 auto}
.marquee span{font-family:AltFrantic,Impact,sans-serif;text-transform:uppercase;font-size:clamp(1.3rem,3vw,2.1rem);line-height:1;white-space:nowrap}
.marquee .marquee-star{color:var(--yellow)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.reduce-motion .marquee-track{animation:none}
body.reduce-motion .infinity-flow{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal,.js .data-card.reveal,.js .proposal-card.reveal,.js .timeline-list li.reveal{opacity:1;transform:none;animation:none}.infinity-line,.infinity-line path{animation:none!important}.infinity-line path{stroke-dashoffset:0!important}.infinity-flow{display:none}.marquee-track{animation:none!important}.hero-shape{animation:none!important}#pattern-canvas{display:none}.layer{transform:none!important}.hero-scroll-video{display:none}}
@media (max-width:900px){.video-intro-desktop{display:none}.video-intro-mobile{display:none}.video-intro-seq{display:block;object-position:center 30%}.topbar{position:absolute;top:0;left:0;right:0;background:none;border:none;backdrop-filter:none;padding:.7rem 1rem;align-items:flex-start}.brand img{width:74px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}.a11y-actions{display:none}.nav-toggle{display:flex}.nav-toggle span{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5)}.nav{display:none;position:absolute;top:100%;right:1rem;flex-direction:column;gap:.2rem;min-width:190px;padding:.6rem;background:rgba(13,7,21,.96);border:2px solid var(--purple);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.45)}.nav.is-open{display:flex}.nav a{color:#fff;padding:.7rem .9rem;border-radius:10px;font-weight:800}.nav a:hover{background:rgba(255,255,255,.14)}.hero,.pattern-scene{grid-template-columns:1fr}.scene{min-height:auto}.hero{padding-top:5rem}.portrait{max-height:55vh}.scene-copy{grid-column:auto}.data-grid,.proposal-grid{grid-template-columns:1fr}.timeline-list li{grid-template-columns:1fr}.number-badge{right:1rem}.hero-pattern{width:90vw}}