/* 1808 Devs — "interface com senso de humor": papel creme, tinta grossa, sombras duras, adesivos tortos */
:root{
  --paper:#FFF7E8; --paper-2:#FDEFD6; --card:#FFFFFF;
  --ink:#14130F; --ink-2:#4A4740; --line-light:#14130F;
  --navy-950:#071431; --navy-900:#0B1F4A; --navy-800:#12306B;
  --blue:#2F6BFF; --blue-ink:#1B4FD6; --teal:#2DE0C0; --teal-ink:#0A7563;
  --orange:#FF8A1F; --orange-hi:#FFA149; --sun:#FFD23F; --bubble:#FF9EC4; --mint:#A8F0DC;
  --on-dark:#FFF7E8; --on-dark-2:#C9D3EA; --line-dark:rgba(255,247,232,.22);
  --danger:#B42318;
  --font-head:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --s-section:clamp(4rem,2.8rem + 5vw,7rem);
  --gap:clamp(1rem,.8rem + .8vw,1.5rem);
  --text-sm:.98rem; --text-lead:clamp(1.05rem,1rem + .3vw,1.18rem);
  --text-h3:clamp(1.18rem,1.08rem + .4vw,1.35rem); --text-h2:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);
  --bw:2.5px; --radius:14px; --radius-lg:20px;
  --shadow:5px 5px 0 var(--ink); --shadow-lg:8px 8px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink);
  --ease:cubic-bezier(.16,1,.3,1); --boing:cubic-bezier(.34,1.56,.64,1); --fast:160ms; --normal:280ms;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--font-head);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - 2rem);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--sun);color:var(--ink);padding:.7rem 1rem;border:var(--bw) solid var(--ink);border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:1rem}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons: apertáveis de verdade */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;padding:.8rem 1.4rem;border-radius:12px;font:700 1rem/1 var(--font-body);text-decoration:none;border:var(--bw) solid var(--ink);color:var(--ink);cursor:pointer;touch-action:manipulation;box-shadow:var(--shadow-sm);transition:transform var(--fast) var(--boing),box-shadow var(--fast) var(--ease),background var(--fast)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn .ico{transition:transform var(--normal) var(--boing)}
.btn:hover .ico{transform:translateX(4px)}
.btn-primary{background:var(--orange)}
.btn-primary:hover{background:var(--orange-hi)}
.btn-ghost{background:var(--card)}
.btn-ghost:hover{background:var(--mint)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background var(--normal),border-color var(--normal);border-bottom:var(--bw) solid transparent}
.nav.stuck{background:rgba(255,247,232,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand img{width:46px;height:46px;object-fit:contain;padding:4px;background:var(--navy-950);border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:var(--shadow-sm);transform:rotate(-6deg);transition:transform var(--normal) var(--boing)}
.brand:hover img{transform:rotate(8deg) scale(1.06)}
.brand b{font:800 1.2rem/1 var(--font-head);letter-spacing:.01em}
.brand small{display:block;font:600 .62rem/1.2 var(--font-mono);letter-spacing:.18em;color:var(--ink-2);text-transform:uppercase;margin-top:.25rem}
.links{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0}
.links a{position:relative;display:inline-flex;white-space:nowrap;align-items:center;min-height:44px;padding:0 .8rem;color:var(--ink);text-decoration:none;font-weight:600}
.links a:not(.btn)::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:8px;height:3px;border-radius:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform var(--normal) var(--boing)}
.links a:not(.btn):hover::after,.links a[aria-current]::after{transform:scaleX(1)}
.links .btn{min-height:44px;padding:.6rem 1.1rem;margin-left:.5rem}
.menu-btn{display:none;background:var(--card);border:var(--bw) solid var(--ink);color:var(--ink);width:48px;height:48px;border-radius:12px;cursor:pointer;place-items:center;box-shadow:var(--shadow-sm)}
.menu-btn .ico{width:24px;height:24px}
.menu-btn .i-x{display:none}
.menu-btn[aria-expanded=true] .i-x{display:block}
.menu-btn[aria-expanded=true] .i-menu{display:none}

/* stickers & rabiscos reutilizáveis */
.sticker{display:inline-flex;align-items:center;gap:.5rem;font:700 .78rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:.55rem .85rem;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--sun);color:var(--ink);box-shadow:var(--shadow-sm);transform:rotate(-2.5deg)}
.scribble{position:relative;white-space:nowrap;z-index:0}
.scribble::before{content:"";position:absolute;z-index:-1;left:-.12em;right:-.12em;bottom:.04em;height:.42em;background:var(--teal);border-radius:.2em;transform:rotate(-1.5deg) skewX(-8deg)}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(7.5rem,6rem + 6vw,10.5rem) 0 clamp(4rem,3rem + 4vw,6.5rem);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(20,19,15,.16) 1.2px,transparent 1.3px);background-size:22px 22px}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero h1{font-size:clamp(2.5rem,1.2rem + 4.4vw,4.8rem);margin:1.3rem 0;text-wrap:balance}
.hero h1 em{font-style:normal}
.hero .lede{font-size:clamp(1.08rem,1rem + .4vw,1.28rem);color:var(--ink-2);max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.aside{display:inline-block;margin-top:1.3rem;font:500 .82rem/1.4 var(--font-mono);color:var(--ink-2);transform:rotate(-1deg)}
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 0;padding:0;list-style:none;font:600 .8rem/1 var(--font-mono)}
.facts li{display:flex;align-items:center;gap:.45rem;padding:.5rem .75rem;border:2px solid var(--ink);border-radius:999px;background:var(--card)}
.facts .ico{color:var(--teal-ink);width:1.05em;height:1.05em}

/* hero mock */
.stage{position:relative;padding:1.5rem 0 2.5rem}
.mark{position:absolute;z-index:3;width:clamp(76px,7.5vw,104px);right:-.4rem;top:-4.4rem;padding:8px;background:var(--navy-950);border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:var(--shadow);transform:rotate(8deg);animation:bob 6s ease-in-out infinite;cursor:pointer;font:inherit;transition:box-shadow var(--fast)}
.mark img{display:block;width:100%;height:auto;pointer-events:none}
.mark:hover{box-shadow:var(--shadow-lg)}
.mark:active{box-shadow:var(--shadow-sm)}
.mark:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.say{position:absolute;z-index:5;right:calc(clamp(76px,7.5vw,104px) + 1.2rem);top:-3.6rem;max-width:15rem;margin:0;padding:.55rem .8rem;background:var(--sun);color:var(--ink);border:var(--bw) solid var(--ink);border-radius:14px 14px 4px 14px;box-shadow:var(--shadow-sm);font:700 .78rem/1.3 var(--font-mono);transform:rotate(-3deg);animation:pop .35s var(--boing)}
.say[hidden]{display:none}
@keyframes pop{from{transform:rotate(-3deg) scale(.6);opacity:0}}
@keyframes bob{50%{transform:rotate(3deg) translateY(-10px)}}
.win{position:relative;border-radius:var(--radius-lg);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-lg);overflow:hidden;font-size:.82rem;line-height:1.5;transform:rotate(-1deg)}
.win-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;border-bottom:var(--bw) solid var(--ink);background:var(--sun)}
.win-bar i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:var(--card)}
.win-bar i:nth-child(1){background:var(--bubble)}.win-bar i:nth-child(2){background:var(--orange)}.win-bar i:nth-child(3){background:var(--teal)}
.win-bar span{margin-left:.6rem;font:700 .72rem var(--font-mono);color:var(--ink)}
.win-body{display:grid;grid-template-columns:1fr 12.5rem;min-height:330px}
.ticket{padding:1rem 1.1rem;display:grid;gap:.9rem;align-content:start}
.ticket h4{margin:0;font:800 1rem var(--font-head);color:var(--ink)}
.ticket .meta{font:500 .68rem var(--font-mono);color:var(--ink-2)}
.msg{display:grid;gap:.3rem;padding:.75rem .85rem;border-radius:14px 14px 14px 4px;background:var(--paper);border:2px solid var(--ink)}
.msg.agent{background:var(--mint);margin-left:1.4rem;border-radius:14px 14px 4px 14px}
.msg b{font-size:.7rem;color:var(--ink)}
.msg p{font-size:.76rem;line-height:1.5;color:var(--ink)}
.side{border-left:var(--bw) solid var(--ink);padding:.9rem;background:var(--paper-2);display:grid;gap:.8rem;align-content:start}
.side .label{font:700 .62rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.app{border-radius:12px;padding:.85rem;background:var(--card);border:2px solid var(--ink);display:grid;gap:.55rem;box-shadow:var(--shadow-sm)}
.app header{display:flex;align-items:center;gap:.45rem;font:700 .74rem var(--font-head);color:var(--ink)}
.app header img{width:20px;height:20px;padding:2px;border-radius:5px;background:var(--navy-950)}
.app dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;font-size:.72rem}
.app dt{color:var(--ink-2)}
.app dd{margin:0;color:var(--ink);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.pill{justify-self:start;font:700 .62rem/1 var(--font-mono);padding:.32rem .5rem;border-radius:6px;border:2px solid var(--ink);background:var(--teal);color:var(--ink)}
.mini-btn{border:2px solid var(--ink);border-radius:8px;padding:.5rem;background:var(--orange);color:var(--ink);font:700 .72rem var(--font-body);cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform var(--fast) var(--boing),box-shadow var(--fast),background var(--fast)}
.mini-btn:hover{background:var(--orange-hi)}
.mini-btn:active{transform:translate(2px,2px);box-shadow:none}
.chip{position:absolute;z-index:4;left:-1.8rem;bottom:.4rem;display:flex;align-items:center;gap:.6rem;padding:.7rem .95rem;border-radius:14px;background:var(--bubble);border:var(--bw) solid var(--ink);box-shadow:var(--shadow);font-weight:700;font-size:.82rem;color:var(--ink);transform:rotate(-5deg);animation:bob2 7s ease-in-out -2s infinite}
@keyframes bob2{50%{transform:rotate(-2deg) translateY(-8px)}}
.chip small{display:block;color:var(--ink);font:500 .66rem var(--font-mono);opacity:.8}

/* faixa rolante */
.ticker{overflow:hidden;background:var(--ink);color:var(--paper);border-block:var(--bw) solid var(--ink);transform:rotate(-1.2deg);margin:-.6rem -1rem 0;position:relative;z-index:2}
.ticker div{display:flex;gap:2.2rem;width:max-content;padding:.85rem 0;font:700 1rem/1 var(--font-head);text-transform:uppercase;letter-spacing:.04em;animation:slide 32s linear infinite}
.ticker span{display:flex;align-items:center;gap:2.2rem;white-space:nowrap}
.ticker span::after{content:"✳";color:var(--sun)}
.ticker.paused div{animation-play-state:paused}
.ticker-pause{position:absolute;right:1.4rem;top:50%;translate:0 -50%;min-height:44px;padding:0 .9rem;font:700 .72rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--sun);border:2px solid var(--paper);border-radius:8px;cursor:pointer}
.ticker-pause:hover{background:var(--mint)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
main{overflow-x:clip}
section{position:relative}
.sec{padding:var(--s-section) 0}
.light{background:var(--paper);color:var(--ink)}
.dark{background:var(--navy-950);color:var(--on-dark)}
.kicker{display:inline-block;font:700 .76rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:.5rem .75rem;background:var(--sun);border:2px solid var(--ink);border-radius:8px;transform:rotate(-2deg)}
.dark .kicker{background:var(--teal)}
.sec h2{font-size:var(--text-h2);margin:1.1rem 0 1rem;text-wrap:balance;max-width:18em}
.sec .sub{color:var(--ink-2);max-width:38em;font-size:var(--text-lead)}
.dark .sub{color:var(--on-dark-2)}
.sec.tight{padding-bottom:calc(var(--s-section)*.6)}
.head{margin-bottom:clamp(2.2rem,4vw,3.5rem)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius-lg);padding:clamp(1.3rem,1rem + 1vw,1.7rem);display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow);transition:transform var(--normal) var(--boing),box-shadow var(--normal) var(--ease)}
.card:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.card:nth-child(even):hover{transform:translate(-3px,-3px) rotate(.6deg)}
.card .ico-box{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--sun);color:var(--ink);border:2px solid var(--ink);transform:rotate(-4deg);transition:transform var(--normal) var(--boing)}
.card:hover .ico-box{transform:rotate(6deg) scale(1.08)}
.card .ico-box .ico{width:24px;height:24px}
.card h3{font-size:var(--text-h3);margin-top:.4rem}
.card p{color:var(--ink-2);font-size:var(--text-sm)}
.c-a{grid-column:span 4;background:var(--navy-950);color:var(--on-dark)}
.c-a p{color:var(--on-dark-2)}
.c-a .ico-box{background:var(--teal)}
.c-b{grid-column:span 2;background:var(--mint)}
.c-b p,.c-d p,.c-f p{color:var(--ink)}
.c-c,.c-d,.c-e{grid-column:span 2}
.c-d{background:var(--paper-2)}
.c-d .ico-box{background:var(--bubble)}
.c-e .ico-box{background:var(--teal)}
.c-f,.c-g{grid-column:span 3}
.c-f{background:var(--sun)}
.c-f .ico-box{background:var(--card)}
.c-g .ico-box{background:var(--orange)}
.code{margin-top:auto;padding:1rem 1.1rem;border-radius:12px;background:#050B1C;border:2px solid var(--line-dark);font:.8rem/1.7 var(--font-mono);color:#E8EEFA;overflow-x:auto;white-space:pre}
.code .k{color:#7FA7FF} .code .s{color:var(--teal)} .code .c{color:#8394B8} .code .o{color:var(--orange-hi)}

/* exemplos */
/* exemplos: fichas numeradas, sem caixa — contrasta com o bento logo acima */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(2rem,5vw,4.5rem);counter-reset:caso}
.case{counter-increment:caso;display:grid;grid-template-columns:auto 1fr;align-content:start;gap:.45rem 1.3rem;padding:1.7rem 0 2rem;border-top:var(--bw) solid var(--ink)}
.case::before{content:"#" counter(caso,decimal-leading-zero);grid-row:1/span 3;align-self:start;min-width:3.4rem;padding:.45rem .5rem .4rem;text-align:center;font:800 1.35rem/1 var(--font-head);font-variant-numeric:tabular-nums;background:var(--paper-2);border:2px solid var(--ink);border-radius:10px;box-shadow:var(--shadow-sm);transform:rotate(-4deg);transition:transform var(--normal) var(--boing),background var(--fast)}
.case:nth-child(3n+2)::before{transform:rotate(3deg)}
.case:hover::before{background:var(--sun);transform:rotate(6deg) scale(1.08)}
.case:nth-child(3n+2):hover::before{background:var(--teal);transform:rotate(-6deg) scale(1.08)}
.case:nth-child(3n):hover::before{background:var(--bubble)}
.case h3{font-size:var(--text-h3)}
.case p{color:var(--ink-2);font-size:var(--text-sm);max-width:34em}
.case .tag{justify-self:start;font:700 .68rem/1 var(--font-mono);padding:.35rem .55rem;border:2px solid var(--ink);border-radius:6px;background:var(--mint)}

/* temas */
.themes{background:var(--paper-2);border-block:var(--bw) solid var(--ink)}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.theme{display:flex;flex-direction:column;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;transition:transform var(--normal) var(--boing),box-shadow var(--normal) var(--ease)}
.theme:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.theme:nth-child(even):hover{transform:translate(-3px,-3px) rotate(.6deg)}
.theme img{display:block;width:100%;height:auto;aspect-ratio:700/520;object-fit:cover;object-position:top;border-bottom:var(--bw) solid var(--ink);background:var(--paper)}
.theme-body{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.15rem 1.2rem;flex:1}
.theme h3{font-size:var(--text-h3)}
.theme p{color:var(--ink-2);font-size:.92rem;line-height:1.5}
.theme{position:relative}
.theme-open{all:unset;cursor:pointer}
.theme-open::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg)}
.theme-open:focus-visible{outline:none}
.theme:has(.theme-open:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.theme-more{margin-top:auto;padding-top:.5rem;font-weight:700;font-size:.88rem;color:var(--blue-ink)}
.theme-cta{margin:clamp(2rem,4vw,3rem) 0 0;text-align:center}

/* galeria do tema */
body:has(.gal[open]){overflow:hidden}
.gal{width:min(1040px,100% - 1.5rem);max-height:calc(100dvh - 1.5rem);padding:0;border:var(--bw) solid var(--ink);border-radius:var(--radius-lg);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lg);overflow:auto}
.gal::backdrop{background:rgba(20,19,15,.72)}
.gal-box{display:grid;gap:1rem;padding:1rem clamp(1rem,2.5vw,1.5rem) 1.25rem}
.gal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.gal-x,.gal-nav,.gal-chip{font:700 .95rem/1 var(--font-body);color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);cursor:pointer;touch-action:manipulation;box-shadow:var(--shadow-sm);transition:transform var(--fast) var(--boing),box-shadow var(--fast) var(--ease),background var(--fast)}
.gal-x,.gal-nav{width:44px;height:44px;border-radius:12px}
.gal-chip{min-height:40px;padding:.5rem .9rem;border-radius:999px}
.gal-x:hover,.gal-nav:hover,.gal-chip:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.gal-x:active,.gal-nav:active,.gal-chip:active{transform:translate(2px,2px);box-shadow:none}
.gal-chip[aria-pressed=true]{background:var(--sun)}
.gal-stage{position:relative;display:grid;width:100%;place-items:center;aspect-ratio:16/10;max-height:calc(100dvh - 15rem);min-height:14rem;background:var(--paper-2);border:var(--bw) solid var(--ink);border-radius:var(--radius);overflow:hidden}
.gal-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.gal-nav{position:absolute;top:50%;translate:0 -50%}
#galPrev{left:.6rem}#galNext{right:.6rem}
.gal-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.gal-cta{justify-self:start}
.js .theme.rv.in:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:var(--shadow-lg)}
.js .theme.rv.in:nth-child(even):hover{transform:translate(-3px,-3px) rotate(.6deg)}

/* placements */
.place{background-color:var(--navy-950);background-image:radial-gradient(rgba(255,247,232,.09) 1.2px,transparent 1.3px);background-size:22px 22px}
.place .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.tabs{display:grid;gap:.6rem;margin-top:2rem}
.tab{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.8rem 1.1rem;text-align:left;border-radius:12px;border:var(--bw) solid var(--on-dark-2);background:transparent;color:var(--on-dark);font:700 1rem var(--font-body);cursor:pointer;transition:transform var(--fast) var(--boing),background var(--fast),box-shadow var(--fast),border-color var(--fast)}
.tab code{font:600 .72rem var(--font-mono);opacity:.8}
.tab:hover{border-color:var(--paper);transform:translateX(4px)}
.tab[aria-selected=true]{background:var(--teal);border-color:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--paper);transform:translate(-2px,-2px)}
.panel{margin-top:1.8rem;color:var(--on-dark-2);min-height:5.5em}
.ws{position:relative;aspect-ratio:16/11;border-radius:var(--radius-lg);border:var(--bw) solid var(--paper);background:var(--navy-900);display:grid;grid-template:"top top top" 11% "nav main side" 1fr/9% 1fr 34%;gap:7px;padding:9px;overflow:hidden;box-shadow:8px 8px 0 var(--teal);transform:rotate(1deg)}
.ws [data-r]{border-radius:8px;background:rgba(201,211,234,.12);position:relative;transition:background var(--normal),box-shadow var(--normal)}
.ws [data-r=top_bar]{grid-area:top}
.ws [data-r=nav_bar]{grid-area:nav}
.ws [data-r=ticket]{grid-area:main;display:grid;gap:8px;padding:10px;align-content:start}
.ws [data-r=ticket_sidebar]{grid-area:side}
.ws [data-r=ticket] i{display:block;height:8px;border-radius:4px;background:rgba(201,211,234,.3)}
.ws [data-r=ticket] i:nth-child(2){width:70%}.ws [data-r=ticket] i:nth-child(3){width:85%}.ws [data-r=ticket] i:nth-child(4){width:50%}
.ws [data-on]{background:var(--sun);box-shadow:inset 0 0 0 2px var(--ink)}
.ws [data-on]::after{content:attr(data-label);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 clamp(.55rem,1.3vw,.74rem) var(--font-mono);color:var(--ink);white-space:nowrap}
.ws [data-r=nav_bar][data-on]::after{transform:translate(-50%,-50%) rotate(-90deg)}
.ws .modal{position:absolute;inset:22% 22%;border-radius:14px;background:var(--sun);border:var(--bw) solid var(--ink);box-shadow:0 0 0 999px rgba(7,20,49,.7);display:grid;place-items:center;font:800 clamp(.55rem,1.3vw,.74rem) var(--font-mono);color:var(--ink);opacity:0;transform:scale(.8) rotate(-4deg);pointer-events:none;transition:opacity var(--normal),transform var(--normal) var(--boing)}
.ws .modal[data-on]{opacity:1;transform:rotate(-2deg)}
.ws .modal[data-on]::after{content:none}
.ws .bg{position:absolute;left:calc(9% + 20px);bottom:16px;padding:.45rem .7rem;border-radius:8px;font:700 clamp(.55rem,1.3vw,.7rem) var(--font-mono);background:rgba(201,211,234,.14);color:var(--on-dark-2);transition:background var(--normal),color var(--normal)}
.ws .bg[data-on]{background:var(--teal);color:var(--ink)}
.ws .bg[data-on]::after{content:none}
.ws.is-bg{outline:2px dashed var(--teal);outline-offset:-9px}

/* process: post-its */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);list-style:none;margin:0;padding:0}
.steps li{position:relative;padding:2rem 1.4rem 1.6rem;background:var(--sun);border:var(--bw) solid var(--ink);border-radius:4px 4px 18px 4px;box-shadow:var(--shadow);transform:rotate(-1.5deg);transition:transform var(--normal) var(--boing)}
.steps li::before{content:"";position:absolute;top:-12px;left:50%;width:74px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,255,255,.6);border:1.5px solid rgba(20,19,15,.25)}
.steps li:nth-child(2){background:var(--mint);transform:rotate(1.2deg)}
.steps li:nth-child(3){background:var(--bubble);transform:rotate(-.8deg)}
.steps li:nth-child(4){background:var(--orange-hi);transform:rotate(1.6deg)}
.steps li:hover{transform:rotate(0) translateY(-4px)}
.steps .n{font:800 2.4rem/1 var(--font-head);color:var(--ink)}
.steps h3{font-size:var(--text-h3);margin:.6rem 0 .5rem}
.steps p{color:var(--ink);font-size:var(--text-sm)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(3rem,5vw,5rem);padding-top:clamp(2rem,4vw,3rem);border-top:var(--bw) dashed var(--ink)}
.why h3{font-size:1.2rem;margin-bottom:.5rem;display:flex;gap:.6rem;align-items:center}
.why .ico{width:36px;height:36px;padding:6px;border:2px solid var(--ink);border-radius:10px;background:var(--teal);color:var(--ink)}
.why p{color:var(--ink-2);font-size:var(--text-sm)}

/* stack + guias + faq */
.stack{display:grid;grid-template-columns:repeat(5,max-content);gap:.6rem;margin-top:1.6rem}
.stack span{text-align:center;font:600 .85rem var(--font-mono);padding:.6rem .9rem;border-radius:10px;border:2px solid var(--on-dark-2);color:var(--on-dark);transition:transform var(--fast) var(--boing),background var(--fast),color var(--fast)}
.stack span:nth-child(odd){transform:rotate(-1.5deg)}
.stack span:nth-child(even){transform:rotate(1.2deg)}
.stack span:hover{background:var(--sun);color:var(--ink);border-color:var(--sun);transform:rotate(0) scale(1.08)}
.guides{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:clamp(2rem,4vw,3rem)}
.guide{display:flex;flex-direction:column;gap:.6rem;padding:1.6rem;border-radius:var(--radius-lg);border:var(--bw) solid var(--paper);background:var(--paper);text-decoration:none;color:var(--ink);box-shadow:6px 6px 0 var(--teal);transition:transform var(--normal) var(--boing),box-shadow var(--normal)}
.guide:nth-child(2){box-shadow:6px 6px 0 var(--orange)}
.guide:hover{transform:translate(-3px,-3px) rotate(-.8deg);box-shadow:10px 10px 0 var(--teal)}
.guide:nth-child(2):hover{box-shadow:10px 10px 0 var(--orange)}
.guide span{align-self:flex-start;font:700 .72rem var(--font-mono);color:var(--ink);letter-spacing:.1em;text-transform:uppercase;padding:.35rem .6rem;background:var(--sun);border:2px solid var(--ink);border-radius:6px}
.guide b{font:800 var(--text-h3)/1.2 var(--font-head)}
.guide small{color:var(--ink-2);font-size:var(--text-sm)}
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem)}
details{margin-bottom:.9rem;border:var(--bw) solid var(--ink);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow-sm);transition:box-shadow var(--fast),transform var(--fast)}
details[open]{background:var(--paper-2);box-shadow:var(--shadow)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:60px;padding:1rem 1.2rem;font:700 1.08rem var(--font-head);color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;background:var(--sun);font:700 1.3rem/1 var(--font-body);transition:transform var(--normal) var(--boing)}
details[open] summary::after{transform:rotate(135deg);background:var(--teal)}
details p{padding:0 1.2rem 1.3rem;color:var(--ink-2);font-size:var(--text-sm)}

/* contact */
.contact{background:var(--orange);color:var(--ink)}
.contact .kicker{background:var(--card)}
.contact .sub{color:var(--ink)}
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.contact .note a{color:var(--ink);font-weight:700;text-underline-offset:3px}
form{display:grid;gap:1.1rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:var(--radius-lg);background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--shadow-lg);transform:rotate(.8deg)}
.f{display:grid;gap:.4rem}
label{font-weight:700;font-size:.92rem}
label small{font-weight:400;color:var(--ink-2)}
input,textarea{width:100%;min-height:50px;padding:.8rem 1rem;border-radius:11px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;font-size:1rem;transition:box-shadow var(--fast),background var(--fast),transform var(--fast)}
textarea{min-height:130px;resize:vertical}
input::placeholder,textarea::placeholder{color:#6B6558}
input:focus,textarea:focus{outline:none;background:var(--card);box-shadow:4px 4px 0 var(--teal);transform:translate(-2px,-2px)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger);background:#FFF1EE;box-shadow:4px 4px 0 var(--danger)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;min-height:0}
.note{font-size:.9rem;color:var(--ink-2)}
.note a{display:inline-block;padding-block:.7rem;margin-block:-.7rem}
.contact .note{color:var(--ink)}
.bullets + .note{margin-top:1.8rem}
.err{color:var(--danger);font-weight:600}
.err a{color:var(--danger)}
.ok{display:none;font-weight:700;color:var(--teal-ink)}
.ok.show{display:block}
.bullets{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:.9rem}
.bullets li{display:flex;gap:.8rem;font-weight:500}
.bullets .ico{width:28px;height:28px;padding:4px;border:2px solid var(--ink);border-radius:50%;background:var(--card);margin-top:-.1rem}

footer{background:var(--navy-950);color:var(--on-dark-2);padding:3.2rem 0 2.4rem;border-top:var(--bw) solid var(--ink);font-size:.92rem}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center}
footer img{width:84px;transform:rotate(-4deg)}
footer ul{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;list-style:none;margin:0;padding:0;justify-content:center}
.foot-links{display:grid;justify-items:end}
footer a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}
footer a:hover{color:var(--sun)}
.legal{grid-column:1/-1;font-size:.8rem;border-top:1px dashed var(--line-dark);padding-top:1.4rem;max-width:62em}

/* reveal: entra com um pulinho */
.js .rv{opacity:0;transform:translateY(26px) rotate(-1deg);transition:opacity .6s var(--ease),transform .7s var(--boing);transition-delay:calc(var(--d,0)*80ms)}
.js .rv.in{opacity:1;transform:none}
.js .steps li.rv.in{transform:rotate(-1.5deg)}
.js .steps li.rv.in:nth-child(2){transform:rotate(1.2deg)}
.js .steps li.rv.in:nth-child(3){transform:rotate(-.8deg)}
.js .steps li.rv.in:nth-child(4){transform:rotate(1.6deg)}
.js .steps li.rv.in:hover{transform:rotate(0) translateY(-4px)}
.js form.rv.in{transform:rotate(.8deg)}

/* responsive */
@media (max-width:980px){
  .mark{top:-1.6rem;right:.2rem;width:72px}
  .say{top:-1.2rem;right:calc(72px + 1.2rem)}
  .hero .wrap,.place .grid,.faq-grid,.contact .grid{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .c-a{grid-column:span 6}
  .c-b,.c-c,.c-d,.c-e,.c-f,.c-g{grid-column:span 3}
  .stage{max-width:620px;margin-top:2rem}
  .theme-grid{grid-template-columns:repeat(2,1fr)}
  .mark{right:.4rem}
}
@media (max-width:1140px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .menu-btn{display:grid;margin-left:auto}
  .links{position:absolute;left:0;right:0;top:74px;flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1rem 1.2rem;background:var(--paper);border-bottom:var(--bw) solid var(--ink);display:none}
  .links.open{display:flex}
  .links a{padding:0 .5rem}
  .links a:not(.btn)::after{left:.5rem;right:auto;width:3rem}
  .links .btn{margin:.6rem 0 0}
  footer .wrap{grid-template-columns:1fr;justify-items:start}
  footer ul{justify-content:flex-start}
  .foot-links{justify-items:start}
}
@media (max-width:760px){.case-grid{grid-template-columns:1fr}.case::before{grid-row:auto;align-self:center}.case .tag{align-self:center}.case h3,.case p{grid-column:1/-1}}
@media (max-width:560px){
  .steps{grid-template-columns:1fr;gap:1.6rem}
  .c-b,.c-c,.c-d,.c-e,.c-f,.c-g{grid-column:span 6}
  .steps li{padding:1.5rem 1.2rem 1.3rem}
  .steps .n{font-size:1.9rem}
  .theme-body{padding:.75rem .8rem .9rem}
  .gal-stage{aspect-ratio:4/3}
  .gal-cta{justify-self:stretch}
  .theme h3{font-size:1.05rem}
  .theme p{font-size:.82rem}
  .win-body{grid-template-columns:1fr}
  .side{border-left:0;border-top:var(--bw) solid var(--ink)}
  .chip{left:.2rem}
  .brand small{display:none}
  .btn{width:100%}
  .links .btn{width:auto}
  .card,.win,.ws,form{box-shadow:var(--shadow)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .ticker-pause{display:none}
}

/* 404 */
.lost{min-height:100svh;display:grid;place-items:center;text-align:center;padding:6rem 0 4rem;background-color:var(--paper);background-image:radial-gradient(rgba(20,19,15,.16) 1.2px,transparent 1.3px);background-size:22px 22px}
.lost h1{display:inline-block;font-size:clamp(5rem,3rem + 14vw,12rem);line-height:.9;padding:.1em .3em;background:var(--sun);border:4px solid var(--ink);border-radius:28px;box-shadow:10px 10px 0 var(--ink);transform:rotate(-4deg);animation:bob 6s ease-in-out infinite}
.lost h2{font:800 clamp(1.4rem,1rem + 1.6vw,2.2rem)/1.2 var(--font-head);margin:2.4rem auto .8rem;max-width:20em;text-wrap:balance}
.lost p{color:var(--ink-2);max-width:32em;margin:0 auto 2rem}
.lost .btn{width:auto}
.lost .sticker{margin-bottom:2rem}

/* artigos */
.post-hero{padding:clamp(8rem,6rem + 6vw,10rem) 0 clamp(2.5rem,5vw,4rem);background-color:var(--paper);background-image:radial-gradient(rgba(20,19,15,.16) 1.2px,transparent 1.3px);background-size:22px 22px;border-bottom:var(--bw) solid var(--ink)}
.post-hero h1{font-size:clamp(2.1rem,1.2rem + 3.6vw,3.8rem);margin:1.2rem 0;max-width:19em;text-wrap:balance}
.post-hero .lede{color:var(--ink-2);font-size:1.18rem;max-width:36em}
.crumb{display:inline-block;font:700 .78rem var(--font-mono);padding:.4rem .7rem;background:var(--sun);border:2px solid var(--ink);border-radius:8px;transform:rotate(-1.5deg)}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.meta-line{margin-top:1.4rem;font:500 .8rem var(--font-mono);color:var(--ink-2)}
.post{background:var(--card);padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,8vw,7rem)}
.post article{width:min(740px,100% - 2rem);margin-inline:auto;font-size:1.12rem;line-height:1.75;color:var(--ink)}
.post h2{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.1rem);margin:3rem 0 1rem}
.post p{margin:0 0 1.2rem;color:#2A2822}
.post ul,.post ol{margin:0 0 1.4rem;padding-left:1.4rem;color:#2A2822}
.post li{margin-bottom:.5rem}
.post a:not(.btn){color:var(--blue-ink);text-underline-offset:3px;text-decoration-thickness:2px}
.post code{font:.92em var(--font-mono);background:var(--paper-2);padding:.15em .4em;border-radius:6px}
.post pre.code{margin:1.4rem 0 1.8rem;font-size:.84rem;border:var(--bw) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow)}
.post pre.code code{background:none;padding:0}
.callout{margin:2rem 0;padding:1.2rem 1.4rem;border:var(--bw) solid var(--ink);background:var(--sun);border-radius:var(--radius);box-shadow:var(--shadow);transform:rotate(-.5deg);color:var(--ink)}
.cta-box{margin-top:3.5rem;padding:2rem;border-radius:var(--radius-lg);background:var(--navy-950);color:var(--on-dark);border:var(--bw) solid var(--ink);box-shadow:8px 8px 0 var(--orange)}
.cta-box h2{margin:0 0 .6rem;color:var(--on-dark)}
.cta-box p{color:var(--on-dark-2)}
.cta-box .btn{margin-top:.6rem;width:auto}
@media (max-width:700px){.guides{grid-template-columns:1fr}.stack{grid-template-columns:repeat(2,max-content)}}