:root{
  --azul:#007BA7; --azul-d:#005a7d; --creme:#F5F5B8; --terracota:#A6522E; --minerio:#6B2A1D; --urucum:#D4532A;
  --papel:#F3F0E8; --branco:#fff; --chumbo:#3A3A37; --breu:#1D1D1B; --linha:#dcd7c8;
  --r-xl:40px; --r-l:28px; --r-m:18px; --r-p:999px;
  --display:'Sofia Sans Extra Condensed','Barlow Condensed','Arial Narrow',sans-serif;
  --text:'Sofia Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(14px,2vw,24px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--breu);font:400 17px/1.55 var(--text);overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);text-transform:uppercase;margin:0;line-height:.92;font-weight:800;letter-spacing:.005em}
p{margin:0 0 1em}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:3px solid var(--urucum);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--breu);color:var(--creme);padding:10px 18px;border-radius:var(--r-p);z-index:300;transition:top .2s}
.skip:focus{top:12px}
.lbl{font:700 13px var(--text);letter-spacing:.12em;text-transform:uppercase;color:#B03F1C;display:block;margin-bottom:10px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}

/* ===== cabeçalho ===== */
.nav{position:sticky;top:12px;z-index:100;margin:12px var(--gut) 0;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 22px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-radius:var(--r-p);box-shadow:0 6px 24px rgba(29,29,27,.1);max-width:1240px;margin-inline:auto}
@media(min-width:1290px){.nav{margin-inline:auto}}
.nav .logo{display:block;flex:none}.nav .logo img{height:52px;width:auto}
.nav ul{display:flex;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{display:block;text-decoration:none;font:600 15px var(--text);padding:10px 16px;border-radius:var(--r-p);transition:background .2s}
.nav ul a:hover{background:var(--papel)}
.nav ul a[aria-current=page]{background:var(--papel);box-shadow:inset 0 0 0 1.5px var(--breu)}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;background:var(--papel);place-items:center}
.burger i{display:block;width:18px;height:2px;background:var(--breu);box-shadow:0 6px 0 var(--breu),0 -6px 0 var(--breu);transition:transform .3s}
.menu{position:fixed;inset:0;z-index:200;background:var(--azul);color:var(--creme);padding:90px 28px 28px;display:none;flex-direction:column;gap:6px}
.menu.on{display:flex;animation:in .35s var(--ease)}
.menu a{font:800 clamp(52px,16vw,84px)/1 var(--display);text-transform:uppercase;text-decoration:none}
.menu .x{position:absolute;right:20px;top:20px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);font-size:20px}
.menu .btn{align-self:flex-start;margin-top:18px}
@media(max-width:900px){.nav ul,.nav>.btn{display:none}.burger{display:grid}}

/* ===== botões ===== */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 15px var(--text);padding:13px 24px;border-radius:var(--r-p);background:var(--breu);color:var(--creme);text-decoration:none;transition:transform .25s var(--ease),background .2s,box-shadow .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(29,29,27,.18)}
.btn.l{background:var(--creme);color:var(--breu)}.btn.w{background:#fff;color:var(--breu)}
.btn.u{background:#C24A25;color:#fff}
.btn.g{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}.btn.g:hover{box-shadow:inset 0 0 0 1.5px currentColor,0 10px 24px rgba(29,29,27,.14)}
.btn.s{padding:9px 18px;font-size:14px}
.btn .arr{width:24px;height:24px;border-radius:50%;background:var(--creme);color:var(--breu);display:grid;place-items:center;font-size:13px;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(3px) rotate(-45deg)}
.btn.l .arr,.btn.w .arr{background:var(--breu);color:var(--creme)}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* ===== hero ===== */
.hero{position:relative;isolation:isolate;overflow:hidden;color:var(--creme);border-radius:var(--r-xl);margin:12px var(--gut) 0;padding:clamp(70px,12vw,150px) clamp(22px,5vw,64px) 0;min-height:clamp(380px,74vh,700px);display:flex;flex-direction:column;justify-content:flex-end;background:var(--azul-d) center/cover no-repeat}
.hero.s{min-height:clamp(300px,42vh,430px);padding-top:clamp(60px,9vw,110px)}
.hero h1{font-size:clamp(54px,11vw,150px);color:#fff;max-width:11em;line-height:.86}
.hero.s h1{font-size:clamp(50px,8vw,104px)}
.hero p.sub{max-width:36em;margin:18px 0 24px;font-size:clamp(17px,2vw,21px)}
.hero .btns{margin-bottom:34px}
.dagua{height:4px;border-radius:4px;background:currentColor;opacity:.9;position:relative;margin:0 calc(-1*clamp(22px,5vw,64px))}
.dagua:before{content:"";position:absolute;left:clamp(22px,5vw,64px);top:-1px;width:72px;height:6px;border-radius:6px;background:var(--urucum)}
.hero .ft{display:flex;justify-content:space-between;gap:12px;font:700 12px var(--text);letter-spacing:.12em;text-transform:uppercase;padding:14px 0 18px}
.hero--areia{color:var(--minerio)}.hero--areia h1{color:var(--minerio)}

/* ===== painéis ===== */
.panel{border-radius:var(--r-xl);margin:12px var(--gut) 0;padding:clamp(26px,5vw,64px);position:relative}
.panel>.in{max-width:1180px;margin:0 auto}
.panel.dk{background:var(--breu);color:var(--papel)}.panel.dk .lbl{color:var(--creme)}
.panel.az{color:#fff}.panel.az h2{color:var(--creme)}.panel.az .lbl{color:#fff}.panel.az .note{opacity:1}
.panel.az{background:var(--azul);color:#fff}.panel.cr{background:var(--creme)}.panel.w{background:#fff}.panel.ch{background:#262624;color:var(--papel)}
.panel h2{font-size:clamp(38px,6vw,76px);margin-bottom:22px}
.panel .lead{font-size:clamp(17px,1.8vw,20px);max-width:40em}
.g2,.g3,.g4{display:grid;gap:14px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}
@media(max-width:560px){.g3,.g4{grid-template-columns:1fr}}
.gap{gap:clamp(18px,4vw,48px)}.mid{align-items:center}

/* faixa de formatos */
.mq{overflow:hidden;margin:18px 0 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq .tr{display:flex;gap:8px;width:max-content;animation:mq 40s linear infinite}
.mq:hover .tr{animation-play-state:paused}
.mq span{font:600 15px var(--text);padding:9px 18px;border-radius:var(--r-p);background:#fff;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}

/* tiles */
.tile{border-radius:var(--r-l);padding:24px;background:var(--papel);position:relative;overflow:hidden;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;transition:transform .4s var(--ease),box-shadow .4s}
.tile:before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(245,245,184,.7),transparent 60%);opacity:0;transition:opacity .3s}
.tile:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(29,29,27,.14)}.tile:hover:before{opacity:1}
.tile>*{position:relative}
.tile .n{font:800 52px var(--display);color:var(--urucum);line-height:1}
.tile h3{font-size:36px;margin:4px 0 6px}.tile p{font-size:15px;margin:0;color:#4b4a43}
.tile .go{position:absolute;right:20px;top:20px;width:40px;height:40px;border-radius:50%;background:var(--breu);color:var(--creme);display:grid;place-items:center;transition:transform .35s var(--ease)}
.tile:hover .go{transform:rotate(-45deg) scale(1.1)}
.tile.dk{background:#262624;color:#fff}.tile.dk p{color:#bdbaae}.tile.w{background:#fff}

/* seletor "eu sou" e abas */
.aud{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.aud button,.pillbtn{padding:11px 20px;border-radius:var(--r-p);font:600 15px var(--text);background:rgba(0,0,0,.2);color:#fff;transition:background .2s,color .2s}
.aud button[aria-selected=true]{background:var(--creme);color:var(--breu)}
.audbox{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:center}
.audbox .q{font:800 clamp(34px,5vw,64px)/.92 var(--display);text-transform:uppercase;color:#fff}
.stack{display:grid;gap:10px}
@media(max-width:900px){.audbox{grid-template-columns:1fr}}

/* ===== cartões de vídeo ===== */
.film{display:block;text-decoration:none;color:inherit;transition:transform .45s var(--ease)}
.film[hidden]{display:none}
.film .th{position:relative;border-radius:var(--r-m);aspect-ratio:16/10;overflow:hidden;background:#101010;transition:box-shadow .4s}
.film .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.film .th:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%)}
.film:hover .th{box-shadow:0 18px 40px rgba(0,0,0,.34)}.film:hover .th img{transform:scale(1.06)}
.film .pl{position:absolute;left:14px;bottom:14px;width:42px;height:42px;border-radius:50%;background:var(--creme);display:grid;place-items:center;z-index:2;transition:transform .35s var(--ease),background .2s}
.film .pl:after{content:"";border-left:12px solid var(--breu);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.film:hover .pl{transform:scale(1.25);background:var(--urucum)}
.film .star{position:absolute;right:12px;top:12px;z-index:2;font:700 11px var(--text);letter-spacing:.1em;text-transform:uppercase;background:var(--creme);color:var(--breu);padding:5px 11px;border-radius:var(--r-p)}
.film h3{font-size:28px;margin:12px 4px 0;line-height:.95}
.film small{display:block;font:500 14px var(--text);margin:4px 4px 0;opacity:.7}

.toolbar{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.seg{display:inline-flex;background:rgba(255,255,255,.1);border-radius:var(--r-p);padding:4px}
.seg button{padding:9px 18px;border-radius:var(--r-p);font:600 14px var(--text);color:var(--papel);transition:background .2s,color .2s}
.seg button[aria-pressed=true]{background:var(--creme);color:var(--breu)}
.cnt{font:600 14px var(--text);opacity:.8}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.chips button{padding:9px 16px;border-radius:var(--r-p);font:600 14px var(--text);background:rgba(255,255,255,.1);color:var(--papel);transition:background .2s,color .2s}
.chips button:hover{background:rgba(255,255,255,.2)}
.chips button[aria-pressed=true]{background:var(--creme);color:var(--breu)}
.empty{opacity:.75;grid-column:1/-1}

/* modal */
.modal{position:fixed;inset:0;z-index:400;background:rgba(14,14,13,.78);backdrop-filter:blur(8px);display:none;place-items:center;padding:16px}
.modal.on{display:grid;animation:in .3s var(--ease)}
.mbox{background:var(--papel);color:var(--breu);border-radius:var(--r-xl);padding:16px;width:min(940px,100%);max-height:94vh;overflow:auto}
.mbox .vid{aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:#000}
.mbox .vid.v{aspect-ratio:9/16;max-height:70vh;margin:0 auto;width:auto}
.mbox iframe{width:100%;height:100%;border:0;display:block}
.mbox .mi{padding:18px 8px 6px;display:flex;gap:14px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.mbox h3{font-size:clamp(34px,5vw,52px)}
.mbox .mx{width:44px;height:44px;border-radius:50%;background:var(--breu);color:var(--creme);font-size:18px;float:right;margin:0 0 10px 10px}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===== cases de design ===== */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0;border-radius:var(--r-xl);overflow:hidden;background:var(--cb,#1269C7);color:var(--cf,#EDF1F5);margin-top:14px}
.case:first-of-type{margin-top:0}
.case__t{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.case h3{font-size:clamp(46px,6vw,84px);color:inherit;margin:4px 0 14px}
.case .kick{font:700 13px var(--text);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.case .tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}
.case .tabs button{padding:9px 16px;border-radius:var(--r-p);background:rgba(0,0,0,.2);font:600 14px var(--text);color:inherit;transition:background .2s,color .2s}
.case .tabs button[aria-selected=true]{background:var(--cf,#EDF1F5);color:var(--cb,#1269C7)}
.case__v{position:relative;background:rgba(0,0,0,.18);min-height:320px;display:grid;place-items:center;padding:clamp(14px,2vw,28px)}
.case__v img{width:100%;height:auto;border-radius:var(--r-m);box-shadow:0 20px 50px rgba(0,0,0,.28);transition:opacity .3s}
.case__v img.sw{opacity:0}
.case.y{--cb:#F7D95A;--cf:#1d1d1b}.case.y .tabs button{background:rgba(29,29,27,.12)}.case.y .tabs button[aria-selected=true]{background:#1d1d1b;color:#F7D95A}
.case.y .case__v{background:rgba(29,29,27,.12)}
@media(max-width:900px){.case{grid-template-columns:1fr}.case__v{min-height:0}}
.shot{display:block;text-decoration:none}
.shot .th{aspect-ratio:16/10;border-radius:var(--r-l);overflow:hidden;background:#101010;transition:transform .5s var(--ease),box-shadow .4s}
.shot .th img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
.shot:hover .th{box-shadow:0 18px 40px rgba(0,0,0,.2)}.shot:hover .th img{transform:scale(1.04)}
.shot h3{font-size:34px;margin:14px 4px 2px}.shot small{margin:0 4px;font-size:15px;opacity:.75;display:block}
.steps{counter-reset:s}

/* ===== formação ===== */
.stats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.stats span{font:700 14px var(--text);padding:9px 16px;border-radius:var(--r-p);background:rgba(255,255,255,.14)}
.pillrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 18px}
.pillrow span{font:600 14px var(--text);padding:8px 15px;border-radius:var(--r-p);background:var(--creme);color:var(--breu)}
.fld{border-radius:var(--r-m);background:rgba(255,255,255,.1);padding:14px 18px;font-size:15.5px}
.mod{background:var(--papel);border-radius:var(--r-m);overflow:hidden;color:var(--breu)}
.mod+.mod{margin-top:8px}
.mod>button{width:100%;display:flex;gap:12px;align-items:center;padding:15px 18px;text-align:left;font:600 15.5px var(--text)}
.mod>button b{font:800 28px var(--display);color:var(--azul);min-width:28px}.mod>button span{flex:1}
.mod>button small{font:600 12.5px var(--text);background:#fff;border-radius:var(--r-p);padding:5px 12px}
.mod .bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}.mod.open .bd{grid-template-rows:1fr}
.mod .bd>div{overflow:hidden}.mod .bd p{margin:0;padding:0 18px 16px 58px;font-size:14.5px;color:#4b4a43}
.note{font-size:13px;opacity:.7;margin-top:14px}
.vidcard{position:relative;display:block;width:100%;border-radius:var(--r-l);overflow:hidden;aspect-ratio:16/9;background:#000;text-align:left}
.vidcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.vidcard:hover img{transform:scale(1.05)}
.vidcard .pl{position:absolute;left:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:var(--creme);display:grid;place-items:center;transition:transform .35s var(--ease),background .2s}
.vidcard .pl:after{content:"";border-left:15px solid var(--breu);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.vidcard:hover .pl{transform:scale(1.2);background:var(--urucum)}

/* ===== apps ===== */
.app{background:#262624;border-radius:var(--r-l);padding:18px;color:var(--papel);display:flex;flex-direction:column}
.app .th{aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;background:linear-gradient(135deg,#3a3a37,#1d1d1b);display:grid;place-items:center;color:#8a877b;font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase}
.app .th img{width:100%;height:100%;object-fit:cover;object-position:top}
.app h3{font-size:clamp(40px,5vw,56px);margin:14px 0 8px;color:#fff}.app p{font-size:15px;color:#cfccc0}
.stt{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--text);letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:var(--r-p);background:rgba(255,255,255,.1);align-self:flex-start;margin-top:16px}
.stt:before{content:"";width:8px;height:8px;border-radius:50%;background:#46c279;box-shadow:0 0 0 3px rgba(70,194,121,.25)}
.stt.dev:before{background:#f0b429;box-shadow:0 0 0 3px rgba(240,180,41,.25)}
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}.app.open .more{grid-template-rows:1fr}
.more>div{overflow:hidden;font-size:14.5px;color:#bdbaae}.more ul{margin:0 0 14px;padding-left:20px}.more li{margin-bottom:4px}
.app .btns{margin-top:auto;padding-top:6px}

/* ===== sobre e contato ===== */
.tl{display:grid;gap:8px}
.tl div{background:rgba(255,255,255,.08);border-radius:var(--r-m);padding:14px 18px;font-size:15.5px;transition:background .25s,transform .3s var(--ease)}
.tl div:hover{background:rgba(255,255,255,.16);transform:translateX(6px)}
.tl b{font:800 24px var(--display);color:var(--creme);margin-right:10px}
.form{display:grid;gap:12px}
.form label{display:block}
.form input,.form textarea{width:100%;font:inherit;color:inherit;border:0;border-radius:var(--r-m);padding:15px 18px;background:rgba(255,255,255,.18);outline-offset:2px}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.88)}
.form textarea{min-height:130px;resize:vertical}
.form .chips{margin:0}.form .chips button{background:rgba(0,0,0,.22);color:#fff}.form .chips button[aria-pressed=true]{background:var(--creme);color:var(--breu)}
.panel.w .form input,.panel.w .form textarea,.panel.cr .form input,.panel.cr .form textarea{background:var(--papel);color:var(--breu)}
.panel.w .form input::placeholder,.panel.w .form textarea::placeholder,.panel.cr .form input::placeholder,.panel.cr .form textarea::placeholder{color:#7a7668}
.panel.w .form .chips button,.panel.cr .form .chips button{background:var(--papel);color:var(--breu)}
.panel.w .form .chips button[aria-pressed=true],.panel.cr .form .chips button[aria-pressed=true]{background:var(--breu);color:var(--creme)}
.ph{border-radius:var(--r-l);background:linear-gradient(135deg,var(--azul),var(--azul-d));min-height:320px;display:grid;place-items:center}
.ph img{width:60%;max-width:340px}
.info{display:grid;gap:10px;margin-top:18px}.info a{font:700 clamp(24px,3.5vw,38px) var(--display);text-transform:uppercase;text-decoration:none}

/* ===== rodapé ===== */
.foot{margin:12px var(--gut) var(--gut);border-radius:var(--r-xl);background:var(--breu);color:#bdbaae;padding:clamp(28px,5vw,60px)}
.foot .in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.foot img{height:110px;width:auto;margin-bottom:12px}
.foot h4{font:700 13px var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--creme);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}.foot a{text-decoration:none}.foot a:hover{color:var(--creme)}
.foot .legal{grid-column:1/-1;border-top:1px solid #34342f;padding-top:18px;font-size:13px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
@media(max-width:800px){.foot .in{grid-template-columns:1fr}}

/* revelar ao rolar */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .rv{opacity:1;transform:none}}