/* Entre Amigos — papel creme, tinta preta, marca-texto e personagens desenhados (public/art).
   Fontes OFL servidas localmente por causa do CSP. */
@font-face{font-family:Outfit;src:url(fonts/outfit-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Caveat;src:url(fonts/caveat-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --primary:#2f6b52;--hl:#f5b82e;
  --ink:#1d1d1b;--paper:#f0ece5;--card:#fffdf8;--muted:#5d5a54;--pill:#e4ddd1;--note:#d2463a;--red:#c8372d;
  --font:Outfit,system-ui,-apple-system,"Segoe UI",sans-serif;--hand:Caveat,"Segoe Print","Comic Sans MS",cursive;
  --radius:18px;--shadow:5px 5px 0 var(--ink);
  color-scheme:light;font-family:var(--font);font-size:17px;line-height:1.55
}
.pal-vermelho{--primary:#d63c33;--hl:#ffb4a8}
.pal-verde{--primary:#2f6b52;--hl:#f5b82e}
.pal-noite{--primary:#283a8f;--hl:#f5c84c}
.pal-lilas{--primary:#7a55c9;--hl:#d9c6ff}
.pal-coral{--primary:#e8553f;--hl:#ffd166}
.pal-turquesa{--primary:#11897a;--hl:#ffb36b}
.pal-rosa{--primary:#d6427f;--hl:#ffc2dc}
.pal-dourado{--primary:#a36a12;--hl:#ffe08a}
.theme-ano_novo .liquid{fill:#f4c542}

*{box-sizing:border-box}
body{margin:0;color:var(--ink);background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x:hidden}
a{color:inherit;text-underline-offset:4px}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input,textarea,label{touch-action:manipulation}
button{cursor:pointer}
h1,h2,h3,p{margin:0 0 1rem}
h1,h2,h3{font-weight:900;line-height:1;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.6rem);text-transform:uppercase;line-height:.98}
h2{font-size:1.6rem}
h3{font-size:1.15rem;font-weight:800;margin-top:1.4rem}
.hl{background:var(--hl);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hand{font-family:var(--hand);font-weight:700;color:var(--note);font-size:1.45rem;line-height:1.05}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
input,textarea,select{width:100%;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:11px 14px;min-width:0}
input:focus,textarea:focus{outline:none;box-shadow:4px 4px 0 var(--hl)}
textarea{resize:vertical}
label{display:grid;gap:6px;font-weight:700}
form{display:grid;gap:18px;margin-top:22px}
form>button,form>.button{justify-self:start}
button,.button{border:3px solid var(--ink);border-radius:14px;background:var(--primary);color:#fff;padding:12px 24px;text-decoration:none;font-weight:800;font-size:1.05rem;text-align:center;display:inline-block;box-shadow:4px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s}
button:hover,.button:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
button:active,.button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.button.yellow,button.yellow{background:var(--hl);color:var(--ink)}
.small{padding:7px 14px;font-size:.88rem;box-shadow:3px 3px 0 var(--ink);border-width:2.5px}
.ghost{background:#fff;color:var(--ink)}
.danger{background:var(--red);color:#fff}
.text-button{padding:0;background:none;color:var(--ink);font-weight:600;font-size:.95rem;border:0;box-shadow:none}
.text-button:hover,.text-button:active{transform:none;box-shadow:none}
.check{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-weight:600;font-size:.95rem}
.check input{width:18px;height:18px;flex-shrink:0;accent-color:var(--primary)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* Cabeçalho e rodapé */
.site-header{max-width:1180px;margin:auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{text-decoration:none;display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:1.35rem;line-height:.95;letter-spacing:-.03em}
.brand img{width:52px;height:52px;rotate:-6deg}
.site-header nav{display:flex;align-items:center;gap:24px;font-weight:600;font-size:.98rem}
.site-header nav a:not(.button){text-decoration:none}
.site-header nav a:not(.button):hover{text-decoration:underline;text-decoration-thickness:2px}
.site-header nav form{margin:0}
main{max-width:1120px;margin:auto;padding:4px 28px 72px;min-height:70vh}
.dev-banner{font-size:.78rem;color:var(--muted);text-align:center;margin:0 0 6px}
footer{max-width:1120px;margin:auto;padding:28px 28px 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.9rem;color:var(--muted);border-top:3px solid var(--ink)}
footer p{margin:0}
footer .brand{font-size:1.05rem;color:var(--ink)}
footer .brand img{width:36px;height:36px}

/* Blocos */
.card{background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);padding:28px;min-width:0;box-shadow:var(--shadow)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:800;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--pill);border-radius:999px;padding:4px 14px;font-weight:600;font-size:.9rem}
.pill.on{background:var(--primary);color:#fff}
.pill.warn{background:var(--hl)}
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.muted{font-size:.9rem;color:var(--muted)}
.link{font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.badge{display:inline-block;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:3px 12px;font-size:.8rem;font-weight:800;white-space:nowrap}
.notice{border:3px solid var(--ink);background:var(--hl);padding:12px 18px;border-radius:14px;margin:16px 0;overflow-wrap:anywhere;font-weight:700;box-shadow:4px 4px 0 var(--ink)}
.notice ul{margin:0;padding-left:20px}
.notice.error{background:#ffd9d4;color:var(--red)}
.multiline{white-space:pre-wrap;overflow-wrap:anywhere}
hr{border:0;border-top:3px dashed var(--pill);margin:28px 0}
details summary{cursor:pointer;font-weight:800}
details p{margin-top:16px}
.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:30px 0}
.page-heading h1{font-size:clamp(2rem,4.5vw,3.4rem)}
.section-title{margin:48px 0 20px;text-transform:uppercase}
.form-card{max-width:880px;margin:24px auto}
.form-card h1{font-size:clamp(2rem,4.5vw,3.2rem)}
.auth{max-width:520px;margin:30px auto;position:relative}
.auth h1{font-size:2.3rem}
.auth .buddy{position:absolute;top:-58px;right:-20px;width:96px}
.legal{max-width:850px;margin:30px auto}
.legal h2{margin-top:32px}
.legal p{color:var(--muted)}
.sparkle{position:absolute;width:26px;pointer-events:none}
.sparkle.big{width:34px}
.twinkle{animation:twinkle 3s ease-in-out infinite}
.twinkle:nth-of-type(2n){animation-delay:-1.5s}
@keyframes twinkle{0%,100%{scale:1;rotate:0deg}50%{scale:.75;rotate:20deg}}

/* Personagens e balões
   Camadas separadas para as animações se somarem sem saltos:
   botão = flutuar (bob) · .buddy-art = pulo do clique · braços = aceno. */
.buddy{position:relative;display:inline-grid;justify-items:center;align-content:end;background:none;border:0;box-shadow:none;padding:0;border-radius:0;color:var(--ink);font-weight:400}
.buddy:hover,.buddy:active{transform:none;box-shadow:none}
.buddy-art{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%;will-change:transform}
.buddy .arm-left,.buddy .arm-right{transform-box:fill-box;transition:rotate .35s cubic-bezier(.3,1.5,.5,1)}
.buddy .arm-left{transform-origin:100% 100%}
.buddy .arm-right{transform-origin:0% 100%}
button.buddy{animation:bob 3.6s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
button.buddy:nth-child(2n){animation-delay:-1.2s}
button.buddy:nth-child(3n){animation-delay:-2.4s}
button.buddy:hover .arm-left{rotate:-24deg}
button.buddy:hover .arm-right{rotate:18deg}
button.buddy.hop .buddy-art{animation:hop .75s linear}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hop{
  0%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.3,0,.6,1)}
  14%{transform:translateY(0) scale(1.12,.86);animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  48%{transform:translateY(-34px) scale(.94,1.08);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  76%{transform:translateY(0) scale(1.08,.92);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  88%{transform:translateY(-4px) scale(.98,1.02)}
  100%{transform:translateY(0) scale(1,1)}}
.bubble{position:relative;display:inline-block;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 14px;font-weight:800;font-size:1.02rem;line-height:1.15;box-shadow:3px 3px 0 var(--ink);white-space:nowrap;margin-bottom:12px;rotate:var(--tilt,-3deg);transform-origin:50% 100%}
.bubble::after{content:"";position:absolute;left:50%;bottom:-11px;width:16px;height:16px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);translate:-50% 0;rotate:45deg}
.bubble.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.6);opacity:.2}100%{transform:scale(1);opacity:1}}
.buddy:nth-child(2n) .bubble{--tilt:3deg}
.buddy:nth-child(3n) .bubble{--tilt:-1deg}

/* Aparecer ao rolar (só para o que começa fora da tela; ver app.js) */
.will-reveal{opacity:0;transform:translateY(34px) rotate(var(--rest,0deg));transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.will-reveal.in{opacity:1;transform:translateY(0) rotate(var(--rest,0deg))}

/* Home */
.hero{position:relative;text-align:center;padding:34px 0 0}
.hero h1{font-size:clamp(2.6rem,7.4vw,5.4rem)}
.hero .lede{font-size:1.2rem;max-width:620px;margin:18px auto 26px}
.hero-actions{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.hero-actions .button{font-size:1.15rem;padding:14px 26px}
.hero-note{position:absolute;right:0;top:250px;width:210px;rotate:-5deg;text-align:left;margin:0}
.hero .s1{left:6%;top:12%}.hero .s2{right:9%;top:30%;width:20px}.hero .s3{left:15%;top:58%;width:18px}

/* Festa: os personagens trocando presentes */
.stage{position:relative;margin:30px auto 0;max-width:1000px;padding:84px 10px 0}
.stage::before{content:"";position:absolute;left:2%;right:2%;bottom:-150px;height:320px;border-radius:50%;background:var(--hl);border:3px solid var(--ink);z-index:-2}
.bunting{position:absolute;left:0;right:0;top:0;width:100%;height:auto;z-index:-1;transform-origin:50% 0;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
.stage-note{position:absolute;left:57%;top:62px;rotate:-3deg;margin:0;z-index:2}
.buddies{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,2vw,26px);flex-wrap:nowrap}
.buddies .buddy{width:clamp(96px,15vw,160px)}
.stage .s4{left:1%;top:44%}.stage .s5{right:0;top:56%}
/* meia oferecida pelo envelope ao presente */
.sock{position:absolute;width:clamp(34px,4.6vw,56px);left:clamp(-28px,-2.6vw,-16px);top:52%;transform-origin:80% 80%;animation:offer 2.6s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
@keyframes offer{0%,100%{transform:rotate(-14deg) translateX(0)}50%{transform:rotate(-24deg) translateX(-10px)}}
.buddy-gift.recoil .buddy-art{animation:recoil 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes recoil{0%,100%{transform:rotate(0) translateX(0)}50%{transform:rotate(-6deg) translateX(-5px)}}
/* presentinhos voando: o trilho anda na horizontal, o presente faz o arco */
.toss{position:absolute;bottom:34%;height:0;pointer-events:none}
.toss-x{position:absolute;left:0;bottom:0;width:100%;animation:toss-x 6s linear infinite}
.toss-y{display:block;width:clamp(26px,3.4vw,40px);translate:-50% 0;animation:toss-y 6s infinite}
.toss-y img{display:block;width:100%;animation:spin 6s linear infinite}
.toss.t1{left:58%;width:20%}
.toss.t2{left:58%;width:20%;transform:scaleX(-1)}
.toss.t2 .toss-x,.toss.t2 .toss-y,.toss.t2 .toss-y img{animation-delay:-3s}
@keyframes toss-x{0%,12%{transform:translateX(0);opacity:0}14%{opacity:1}44%{transform:translateX(100%);opacity:1}47%,100%{transform:translateX(100%);opacity:0}}
@keyframes toss-y{
  0%,14%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  29%{transform:translateY(-64px);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  44%,100%{transform:translateY(0)}}
@keyframes spin{0%,14%{rotate:0deg}44%,100%{rotate:360deg}}

/* Fita de aviso */
.tapes{position:relative;height:190px;margin:170px -28px 10px;overflow:hidden}
.tape{position:absolute;left:-5%;width:110%;background:var(--hl);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;white-space:nowrap;padding:10px 0;font-weight:900;font-size:1.25rem;letter-spacing:.02em;text-transform:uppercase}
.tape.a{top:50px;rotate:-3deg}
.tape.b{top:80px;rotate:2.5deg;background:#ffcf5c}
.tape-track{display:inline-flex;gap:0;will-change:transform;animation:marquee 32s linear infinite}
.tape.b .tape-track{animation-direction:reverse;animation-duration:38s}
.tape-track span{padding:0 18px}
.tape-track span::after{content:"•";padding-left:36px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Como funciona */
.how{position:relative;text-align:center;margin-top:40px}
.how h2{font-size:clamp(2rem,5vw,3.4rem);text-transform:uppercase;line-height:1.02}
.how h2 .hl{background:#7fd6b0}
.how .hand{margin:-4px 0 30px}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;text-align:left;align-items:start}
.how-card{position:relative;border:3px solid var(--ink);border-radius:20px;padding:22px 22px 26px;box-shadow:6px 6px 0 var(--ink);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.how-card:hover{transform:rotate(0deg) translateY(-6px)!important}
.how-card.c1{background:#f5c04a;--rest:-2deg}
.how-card.c2{background:#f2836b;--rest:2deg;margin-top:34px}
.how-card.c3{background:#8fdcbf;--rest:-1.5deg}
.how-card:not(.will-reveal){transform:rotate(var(--rest))}
.how-card h3{margin:0 0 10px;font-size:1.3rem;font-weight:900}
.how-card img{display:block;height:120px;width:auto;margin:6px auto 14px}
.how-card p{margin:0;font-weight:500}
.how-card .hand{position:absolute;font-size:1.3rem;color:var(--ink);white-space:nowrap;margin:0}
.c1 .hand{left:-6px;bottom:-40px;rotate:-4deg}.c2 .hand{right:-10px;bottom:-40px;rotate:3deg}.c3 .hand{right:6px;top:-38px;rotate:-6deg}
.how-arrow{position:absolute;width:56px;height:30px;top:46%;z-index:1}
.how-arrow.a1{left:calc(33.3% - 37px)}.how-arrow.a2{left:calc(66.6% - 21px);top:58%}

/* Simulador e recursos */
.playground{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;margin-top:90px;align-items:start}
.sim-title{font-weight:900;font-size:1.3rem;margin:0 0 10px;text-align:center}
.sim{position:relative;border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow);padding:26px;text-align:center;background-color:#fffdf8;background-image:linear-gradient(rgba(29,29,27,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,27,.07) 1px,transparent 1px);background-size:22px 22px}
.sim h3{margin:0 0 6px;font-size:1.5rem;font-weight:900}
.sim .buddy{width:130px;margin:6px auto 0}
.sim .buddy.shake .buddy-art{animation:shake .6s ease-in-out}
.sim-note{position:absolute;left:16px;top:46%;rotate:-6deg;margin:0}
.sim-slip{max-width:330px;margin:30px auto 18px}
.sim-note{transition:opacity .3s}
.sim:has([data-sim-open]:not([hidden])) .sim-note{opacity:0}
.sim-slip .slip strong{font-size:2.6rem}
.sim-slip .slip p{margin:12px 0 0;font-size:.95rem;color:var(--muted)}
.sim button.roll{background:#e8553f}
.features{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.features h3{grid-column:1/-1;margin:0;font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:900}
.feature{background:var(--card);border:3px solid var(--ink);border-radius:16px;padding:16px;box-shadow:4px 4px 0 var(--ink);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.feature:hover{transform:translateY(-4px) rotate(-1deg)}
.feature img{height:58px;width:auto;display:block;margin-bottom:8px}
.feature strong{display:block;font-weight:900;line-height:1.1;margin-bottom:4px}
.feature span{font-size:.88rem;color:var(--muted);line-height:1.35;display:block}
.final-cta{text-align:center;margin:100px 0 20px}
.final-cta h2{font-size:clamp(2.2rem,6vw,4.2rem);text-transform:uppercase;line-height:1}
.final-cta .hero-actions{margin-top:26px}

/* Convite: cabeçalho temático */
.party-hero{position:relative;text-align:center;padding:30px 0 10px}
.party-hero h1{font-size:clamp(2.4rem,7vw,5rem);margin:12px auto 14px;max-width:16ch;overflow-wrap:anywhere}
.party-hero .hello{font-size:1.2rem;max-width:560px;margin:0 auto 18px}
.party-hero .buddy{position:absolute;right:1%;bottom:-6px;width:150px}
.party-hero .buddy-note{position:absolute;right:15%;bottom:-18px;rotate:-5deg}
.party-hero .s1{left:4%;top:18%}.party-hero .s2{left:12%;bottom:12%;width:18px}.party-hero .s3{right:22%;top:6%;width:20px}
.party-hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.stickers{display:flex;justify-content:center;gap:10px;font-size:1.5rem;margin-top:6px}

/* Recado do organizador */
.note-card{position:relative;background:#fff3b0;border:3px solid var(--ink);border-radius:4px;padding:26px 28px 20px;margin:34px auto 34px;max-width:680px;rotate:-1deg;box-shadow:var(--shadow)}
.note-card::before{content:"";position:absolute;top:-16px;left:50%;width:120px;height:30px;translate:-50% 0;rotate:-3deg;background:rgba(255,255,255,.65);border:2px solid rgba(29,29,27,.25)}
.note-label{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.note-text{font-family:var(--hand);font-size:2rem;line-height:1.1;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}

.note-spacer{height:34px}
/* Datas */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 32px;padding:0;list-style:none}
.timeline li{background:var(--card);border:3px solid var(--ink);border-radius:16px;padding:14px 18px;display:flex;gap:14px;align-items:center;box-shadow:4px 4px 0 var(--ink);font-size:.86rem;font-weight:600;color:var(--muted)}
.timeline li>span{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;border:3px solid var(--ink);background:#fff;font-weight:900;color:var(--ink)}
.timeline strong{display:block;font-size:1.1rem;font-weight:900;color:var(--ink);margin-top:1px}
.timeline .done{opacity:.6}
.timeline .done strong{text-decoration:line-through;text-decoration-thickness:2px}
.timeline .done>span{background:var(--pill)}
.timeline .now{background:var(--hl);color:var(--ink)}

/* Papelzinho */
.reveal{text-align:center;position:relative}
.reveal h2{text-transform:uppercase;font-size:1.9rem}
.opener{display:block;margin:12px auto 0;width:190px}
.opener .bubble{font-size:1.1rem}
.opener.is-shaking .buddy-art{animation:shake .7s ease-in-out}
.opener.is-open .buddy-art{scale:1.25;opacity:0;transition:scale .35s ease-in,opacity .35s}
.opener.is-locked{cursor:default}
.opener.is-locked .buddy-art{filter:grayscale(.55)}
.lock{position:absolute;right:16px;bottom:30px;font-size:2.4rem;rotate:10deg}
@keyframes shake{0%,100%{rotate:0deg}15%{rotate:-10deg}30%{rotate:9deg}45%{rotate:-8deg}60%{rotate:7deg}75%{rotate:-4deg}}
.slip-wrap{perspective:900px;margin:18px auto 24px;max-width:420px}
.slip{position:relative;background:#fffdf4;background-image:repeating-linear-gradient(transparent 0 33px,rgba(29,29,27,.12) 33px 35px);border:3px solid var(--ink);border-radius:4px;padding:34px 22px 24px;box-shadow:var(--shadow);rotate:-2deg;animation:unfold .9s cubic-bezier(.2,1.4,.4,1) both;transform-origin:top center}
.slip::before{content:"";position:absolute;top:-16px;left:50%;width:110px;height:28px;translate:-50% 0;rotate:4deg;background:var(--hl);border:2px solid rgba(29,29,27,.3)}
.slip small{display:block;font-weight:700;color:var(--muted);font-size:1rem}
.slip strong{display:block;font-family:var(--hand);font-weight:700;font-size:clamp(2.6rem,6vw,3.7rem);line-height:1.05;margin-top:6px;overflow-wrap:anywhere}
@keyframes unfold{from{transform:rotateX(-90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
.wish-box{text-align:left;background:#fff;border:3px dashed var(--ink);border-radius:14px;padding:16px 18px;margin:0 0 16px}
.wish-box h3{margin:0 0 6px;font-size:1rem;text-transform:uppercase;letter-spacing:.04em}
.wish-box p{margin:0}
.reveal .pill{margin:4px 0 18px}
.countdown{display:flex;justify-content:center;gap:10px;margin:14px 0 18px}
.countdown span{display:grid;min-width:68px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:8px 6px;box-shadow:3px 3px 0 var(--ink);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.countdown b{font-size:2rem;font-weight:900;line-height:1.1;color:var(--ink);letter-spacing:0}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-40px;display:block;width:11px;height:16px;border:2px solid var(--ink);border-radius:2px}
.confetti b{position:absolute;top:-60px;font-size:2rem;font-weight:400}

.receipt{margin-top:28px}
.receipt form{max-width:560px}
.receipt-photo{max-width:100%;max-height:350px;object-fit:contain;border:3px solid var(--ink);margin-top:20px;rotate:1.5deg;background:#fff;padding:8px 8px 30px;box-shadow:var(--shadow)}
input[type=file]{background:#fff;border-style:dashed}

/* Organizador */
.people{list-style:none;padding:0;margin:16px 0}
.people li{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:2px dashed var(--pill);padding:14px 0}
.people li>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--hl);border:3px solid var(--ink);font-weight:900}
.people small{display:block;font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.participant-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.participant-actions>span{font-size:.82rem;text-align:right}
.status{border-radius:999px;padding:2px 10px;font-weight:800;border:2px solid var(--ink);background:#fff}
.status-confirmed{background:#c9efd4}.status-declined{background:#f7d2cd}.status-invited{background:#fff1b8}
.resend-form{margin:0;display:block}
.resend-form button{font-size:.78rem;padding:4px 11px;box-shadow:2px 2px 0 var(--ink);border-width:2px}
.event-card{text-decoration:none;display:block;overflow:hidden;padding-top:0;transition:transform .15s}
.event-card:hover{transform:translate(-2px,-2px) rotate(-.6deg)}
.event-band{margin:0 -28px 16px;height:110px;background:var(--primary);border-bottom:3px solid var(--ink);display:flex;align-items:flex-end;justify-content:space-between;padding:0 18px 0 24px}
.event-band .buddy{width:84px;margin-bottom:-4px}
.event-band .badge{align-self:center}
.event-card h2{margin:0 0 6px;font-size:1.35rem}
.event-card p{color:var(--muted);font-size:.9rem}
.event-card strong{text-decoration:underline;text-decoration-color:var(--hl);text-decoration-thickness:4px}
.empty{text-align:center;padding:30px 20px;border:3px dashed var(--ink);border-radius:var(--radius);background:#fff}
.empty .buddy{width:90px;margin-bottom:10px}

/* Personalização */
.customize{border-top:3px dashed var(--pill);padding-top:22px;margin-top:6px}
.customize>h2{text-transform:uppercase;margin-bottom:6px}
.customize-layout{display:grid;gap:24px}
.picker{border:0;padding:0;margin:0;min-width:0}
.picker legend{font-weight:800;margin-bottom:10px;padding:0}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.theme-option{position:relative;display:grid;justify-items:center;gap:2px;text-align:center;padding:14px 10px 12px;border:3px solid var(--ink);border-radius:16px;background:#fff;cursor:pointer;font-weight:800;transition:transform .12s}
.theme-option:hover{transform:translate(-1px,-2px)}
.theme-option input,.swatch-option input,.mascot-option input{position:absolute;opacity:0;pointer-events:none}
.theme-option .emoji{font-size:2rem}
.theme-option small{font-weight:500;color:var(--muted);font-size:.74rem;line-height:1.3}
.theme-option:has(input:checked){background:var(--hl);box-shadow:4px 4px 0 var(--ink)}
.theme-option:has(input:focus-visible),.mascot-option:has(input:focus-visible),.swatch-option:has(input:focus-visible){outline:3px solid var(--primary);outline-offset:3px}
.swatches,.mascots{display:flex;flex-wrap:wrap;gap:12px}
.swatch-option,.mascot-option{position:relative;cursor:pointer;display:grid;justify-items:center;gap:4px;font-size:.74rem;font-weight:700;color:var(--muted)}
.swatch{display:block;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary) 50%,var(--hl) 50%);border:3px solid var(--ink)}
.swatch.auto{background:conic-gradient(#d63c33,#f5b82e,#11897a,#283a8f,#d6427f,#d63c33)}
.swatch-option:has(input:checked) .swatch{box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--ink)}
.swatch-option:has(input:checked){color:var(--ink)}
.mascot-option .tile{display:grid;place-items:center;width:84px;height:96px;border-radius:14px;border:3px solid var(--ink);background:#fff;padding:6px}
.mascot-option .buddy{width:62px}
.mascot-option .auto-tile{font-weight:900;font-size:.85rem;color:var(--ink);text-align:center;line-height:1.1}
.mascot-option:has(input:checked) .tile{background:var(--hl);box-shadow:4px 4px 0 var(--ink)}
.mascot-option:has(input:checked){color:var(--ink)}
.preview{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;overflow:hidden}
.preview-text{padding-bottom:22px}
.preview h1{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:6px 0 10px}
.preview .buddy{width:120px;flex-shrink:0;margin-bottom:-4px}
.preview .buddy[hidden]{display:none}

/* Patrocínio e consentimento */
.sponsors{margin-top:50px}
.sponsor{text-decoration:none}
.sponsor p{font-size:.9rem;margin-top:10px}
.sponsor span{font-size:.8rem;font-weight:800}
.consent{margin-top:40px}
.consent h2{font-size:1.1rem}
.consent p{font-size:.9rem}
.consent form{display:flex;flex-wrap:wrap}

[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:900px){
  .hero-note{position:static;margin:6px auto 0;width:auto;rotate:-2deg;text-align:center}
  .hero-note img{display:none}
  .stage-note{position:static;display:block;text-align:center;margin-bottom:8px}
  .party-hero .buddy{position:static;display:inline-grid;margin-top:10px}
  .party-hero .buddy-note{position:static;display:block}
}
@media(max-width:860px){
  .columns{grid-template-columns:1fr}
  .site-header{padding:16px 18px}
  .site-header nav{gap:16px}
  main{padding:4px 18px 45px}
  footer{padding:24px 18px 36px;flex-wrap:wrap}
  .playground{grid-template-columns:1fr}
  .how-steps{grid-template-columns:1fr;max-width:460px;margin:auto;gap:60px}
  .how-card.c2{margin-top:0}
  .how-arrow{display:none}
}
@media(max-width:620px){
  .site-header{flex-wrap:wrap}
  .site-header nav{flex-wrap:wrap;gap:12px;font-size:.92rem}
  .buddies{flex-wrap:wrap;row-gap:10px}
  .buddies .buddy{width:30%}
  .buddies .bubble{font-size:.85rem;padding:4px 9px;white-space:normal}
  .stage::before{bottom:-110px;height:220px}
  .stage{padding-top:50px}
  .toss,.stage-note{display:none}
  .tapes{margin:130px -18px 0;height:150px}
  .tape{font-size:1rem}
  .how-steps,.playground,.features{grid-template-columns:1fr}
  .how-card.c2{margin-top:0}
  .how-arrow{display:none}
  .how-steps{gap:56px}
  .timeline{grid-template-columns:1fr;gap:12px}
  .page-heading{align-items:flex-start;flex-direction:column}
  .card{padding:22px}
  .event-band{margin:0 -22px 16px}
  .people li{align-items:flex-start;flex-direction:column}
  .participant-actions{justify-content:flex-start}
  .hero-actions{flex-direction:column;align-items:stretch}
  .countdown span{min-width:58px}
  .preview{flex-direction:column;align-items:center;text-align:center}
  footer{align-items:flex-start;flex-direction:column}
}

/* Privacidade: Meus dados e política */
.data-list,.legal ul{padding-left:20px}
.data-list li,.legal li{margin:6px 0}
.legal li{color:var(--muted)}
.legal .controller{border:3px solid var(--ink);border-radius:18px;padding:14px 18px;margin:18px 0}
.legal .controller p{margin:4px 0}
.legal .pending{color:var(--red);font-weight:700}
.erase-card{margin-top:24px}
.erase-card form{margin-top:12px}
footer .legal-id{font-size:.8rem}