/* Caripará — site. Cores e fontes do guia de marca. */
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url("../assets/fonts/BricolageGrotesque-Bold.ttf") format("truetype")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url("../assets/fonts/BricolageGrotesque-ExtraBold.ttf") format("truetype")}
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url("../assets/fonts/Figtree-Regular.ttf") format("truetype")}
@font-face{font-family:"Figtree";font-weight:500;font-display:swap;src:url("../assets/fonts/Figtree-Medium.ttf") format("truetype")}
@font-face{font-family:"Figtree";font-weight:600;font-display:swap;src:url("../assets/fonts/Figtree-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url("../assets/fonts/Figtree-Bold.ttf") format("truetype")}

:root{
  --verde:#1E6B3A; --floresta:#134A29; --folha:#D5E7CC; --creme:#F7F5E8; --areia:#ECE9D3;
  --tinta:#0F2A1C; --suave:#4A5F50; --urucum:#B8431B; --sol:#F2B632; --acai:#3F2152; --linha:#D3CEB0;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --texto:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:400 18px/1.6 var(--texto);color:var(--tinta);background:var(--creme);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--tinta);color:var(--creme);padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-family:var(--display);line-height:1.05;letter-spacing:-.02em;margin:0}
h1{font-weight:800;font-size:clamp(40px,7vw,80px);margin-bottom:20px}
h2{font-weight:800;font-size:clamp(30px,4.4vw,48px);margin-bottom:28px}
h3{font-weight:700;font-size:24px;margin-bottom:8px}
p{margin:0 0 14px}
.eyebrow{font:700 14px var(--texto);letter-spacing:.14em;text-transform:uppercase;color:var(--sol);margin-bottom:14px}
.eyebrow.dark{color:var(--urucum)}
.lead{font-size:clamp(18px,2.2vw,22px);max-width:34em}

/* botões */
.btn{display:inline-block;background:var(--urucum);color:#fff;text-decoration:none;font:700 18px var(--texto);padding:15px 30px;border:2px solid var(--urucum);border-radius:999px;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:#9c3615;border-color:#9c3615}
.btn-sm{padding:9px 20px;font-size:16px}
.btn-ghost{background:transparent;color:var(--creme);border-color:var(--folha)}
.btn-ghost:hover{background:rgba(213,231,204,.16);border-color:var(--folha)}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* cabeçalho */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,245,232,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 26px var(--display);letter-spacing:-.02em;-webkit-tap-highlight-color:transparent;user-select:none}
.brand img{width:44px;height:44px}
.nav{display:flex;align-items:center;gap:26px}
.nav a:not(.btn){text-decoration:none;font-weight:600}
.nav a:not(.btn):hover{color:var(--verde);text-decoration:underline;text-underline-offset:6px}
.menu-btn{display:none;background:var(--verde);color:var(--creme);border:0;font:700 16px var(--texto);padding:10px 18px;border-radius:999px;cursor:pointer}

/* hero */
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center}
.hero-art img{width:min(420px,100%);margin-left:auto;transform:translateX(12%)}
.hero{background:var(--verde);color:var(--creme);position:relative;overflow:hidden}
.hero .lead{color:var(--folha)}

/* seções */
.section{padding:clamp(56px,8vw,96px) 0}
.section.alt{background:var(--areia)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--linha);border-radius:var(--r);padding:30px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.seal{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;background:var(--sol);color:var(--tinta);font:800 28px var(--display);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.about{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.about-art{display:grid;place-items:center}
.contact{background:var(--floresta);color:var(--creme)}
.contact .lead{color:var(--folha)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.links{display:flex;flex-direction:column;gap:6px;font-weight:600}
.links a{color:var(--sol)}
.form{background:var(--creme);color:var(--tinta);border-radius:var(--r);padding:28px;display:grid;gap:16px}
.form label{display:grid;gap:6px;font-weight:600;font-size:16px}
.form input,.form select,.form textarea{font:400 17px var(--texto);color:var(--tinta);background:#fff;border:2px solid var(--linha);border-radius:12px;padding:12px 14px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--verde)}
.form [aria-invalid="true"]{border-color:var(--urucum)}
.form-msg{margin:0;font-weight:600;color:var(--verde);min-height:1.4em}

/* rodapé */
.site-footer{background:var(--verde);color:var(--creme);position:relative;overflow:hidden}
.foot{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;position:relative}
.foot-brand{display:flex;align-items:center;gap:10px;font:800 22px var(--display)}
.foot-small{font-size:14px;color:var(--folha)}
.psiu{background:none;border:0;color:var(--folha);font:inherit;text-decoration:underline dotted;text-underline-offset:4px;cursor:pointer;padding:0;opacity:.85}
.psiu:hover{opacity:1}

/* aviso */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--tinta);color:var(--creme);padding:12px 20px;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:300;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* animação de entrada */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.js .reveal.in{opacity:1;transform:none}

/* jogo escondido */
.game-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,42,28,.9);display:grid;place-items:center;padding:16px;animation:fade .25s}
.game-box{width:min(820px,100%);background:var(--floresta);border:2px solid var(--folha);border-radius:var(--r);padding:16px;color:var(--creme)}
.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:800 20px var(--display)}
.game-close{background:transparent;color:var(--creme);border:2px solid var(--folha);border-radius:999px;font:700 15px var(--texto);padding:6px 16px;cursor:pointer}
.game-close:hover{background:rgba(213,231,204,.16)}
.game-canvas{width:100%;display:block;border-radius:12px;touch-action:none;background:var(--floresta);cursor:pointer}
.game-help{margin:10px 2px 0;font-size:14px;color:var(--folha)}
@keyframes fade{from{opacity:0}to{opacity:1}}
body.no-scroll{overflow:hidden}

/* 404 */
.page404{min-height:100vh;display:grid;align-content:center;justify-items:center;background:var(--verde);color:var(--creme);padding:28px;text-align:center;gap:14px}
.page404 h1{font-size:clamp(34px,6vw,60px)}
.page404 .game-box{margin-top:8px;text-align:left}

/* celular */
@media (max-width:820px){
  body{font-size:17px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--creme);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;border-bottom:1px solid var(--linha)}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:14px 4px;border-bottom:1px solid var(--linha)}
  .nav .btn{margin-top:14px;text-align:center}
  .hero-grid,.about,.contact-grid{grid-template-columns:1fr}
  .hero-art{order:-1}
  .hero-art img{width:150px;margin:0;transform:none}
  .cards,.steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ===== visual novo: correnteza, divisores, ícones, trabalhos ===== */
html,body{overflow-x:clip}
@keyframes flow{to{transform:translateX(-50%)}}
@keyframes flowr{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* correnteza ao fundo */
.current{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.flow{position:absolute;left:0;top:0;width:200%;height:100%}
.flow.f1{opacity:.22;animation:flow 50s linear infinite}
.flow.f2{opacity:.22;animation:flowr 72s linear infinite}
.current.soft .flow.f1,.current.soft .flow.f2{opacity:.13}
.leaf{position:absolute;left:0;width:16px;height:16px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--sol);opacity:.75;animation:drift 26s linear infinite}
.leaf.l1{top:18%;animation-duration:30s}
.leaf.l2{top:34%;width:10px;height:10px;background:var(--folha);animation-duration:22s;animation-delay:-9s}
.leaf.l3{top:52%;background:var(--urucum);animation-duration:34s;animation-delay:-14s}
.leaf.l4{top:68%;width:12px;height:12px;background:var(--folha);animation-duration:27s;animation-delay:-20s}
.leaf.l5{top:80%;width:20px;height:20px;animation-duration:38s;animation-delay:-5s}
@keyframes drift{0%{transform:translate(-5vw,0) rotate(0)}25%{transform:translate(20vw,-16px) rotate(40deg)}50%{transform:translate(50vw,10px) rotate(90deg)}75%{transform:translate(78vw,-12px) rotate(140deg)}100%{transform:translate(105vw,0) rotate(180deg)}}

/* hero */
.hero{padding:clamp(48px,8vw,100px) 0 0}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(30px,5vw,60px)}
.hero h1 .hl{color:var(--sol)}
.hero-art img{animation:bobart 7s ease-in-out infinite alternate}
@keyframes bobart{from{transform:translateX(12%) translateY(-6px) rotate(-1.5deg)}to{transform:translateX(12%) translateY(8px) rotate(1.5deg)}}
.swimmer{position:absolute;left:0;bottom:calc(clamp(110px,15vw,220px) * .5);z-index:3;background:none;border:0;padding:0;cursor:pointer;width:clamp(150px,17vw,230px);animation:swim 34s linear infinite;-webkit-tap-highlight-color:transparent}
.swimmer .bob{display:block;animation:bobfish 2.6s ease-in-out infinite alternate}
.swimmer svg{width:100%;height:auto;display:block}
@keyframes swim{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 40px))}}
@keyframes bobfish{from{transform:translateY(-9px) rotate(-3deg)}to{transform:translateY(9px) rotate(3deg)}}

/* divisores de seção */
.div{position:relative;height:clamp(80px,11vw,170px);overflow:hidden;line-height:0;margin-bottom:-1px}
.div.tall{height:clamp(110px,15vw,220px)}
.div .lay{position:absolute;left:0;bottom:-1px;width:200%;height:100%;animation:flow linear infinite}
.div.sm{height:clamp(60px,7vw,110px)}

/* faixa em movimento */
.ribbon-wrap{position:relative;z-index:3;overflow:hidden;margin:-34px 0;padding:40px 0;background:linear-gradient(var(--creme) 50%,var(--areia) 50%)}
.ribbon{margin:0 -4vw;transform:rotate(-1.6deg);background:var(--acai);border-block:5px solid var(--sol);overflow:hidden;white-space:nowrap;box-shadow:0 10px 30px rgba(15,42,28,.18)}
.ribbon .track{display:inline-flex;align-items:center;padding:12px 0;animation:flow 46s linear infinite;will-change:transform}
.ribbon span{font:800 clamp(24px,3.4vw,40px) var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--creme);padding:0 .4em}
.ribbon i{flex:none;width:18px;height:18px;margin:0 .5em;background:var(--sol);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.sv{padding-bottom:clamp(90px,10vw,130px)}
#como{padding-top:clamp(90px,10vw,130px)}

/* cartões e ícones */
.card{transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(19,74,41,.13)}
.ico-box{width:116px;height:116px;border-radius:30px;background:var(--folha);display:grid;place-items:center;margin-bottom:22px;transition:transform .3s}
.card:hover .ico-box{transform:rotate(-4deg) scale(1.05)}
.ico{width:88px;height:88px;overflow:visible;display:block}
.net{transform-origin:48px 48px;animation:sway 6s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.kn{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.55);opacity:.55}}
.fishy{animation:fswim 3s ease-in-out infinite alternate}
@keyframes fswim{from{transform:translate(-5px,3px) rotate(-4deg)}to{transform:translate(5px,-3px) rotate(4deg)}}
.zz{animation:zzf 1.8s linear infinite}
@keyframes zzf{to{transform:translateX(24px)}}
.sun{transform-box:fill-box;transform-origin:center;animation:sunb 3s ease-in-out infinite alternate}
@keyframes sunb{to{transform:translateY(-3px) scale(1.15)}}
.cur{animation:curs 3s ease-in-out infinite}
@keyframes curs{0%,100%{transform:translate(0,0)}40%{transform:translate(-9px,-12px)}55%{transform:translate(-9px,-10px) scale(.94)}}
.rt{animation:dashf 1.2s linear infinite}
@keyframes dashf{to{stroke-dashoffset:-10}}
.mid,.goal{transform-box:fill-box;transform-origin:center;animation:pulse2 2.8s ease-in-out infinite}
.goal{animation-delay:-1.2s}
@keyframes pulse2{50%{transform:scale(1.12)}}
.card:hover .net{animation-duration:2s}
.card:hover .zz{animation-duration:.8s}
.card:hover .rt{animation-duration:.5s}

/* passos ligados por correnteza */
.steps li{position:relative}
.steps li:not(:last-child)::after{content:"";position:absolute;top:30px;left:86px;right:-4px;height:4px;background:repeating-linear-gradient(90deg,var(--verde) 0 8px,transparent 8px 18px);background-size:18px 4px;opacity:.5;animation:dashmove 1s linear infinite}
@keyframes dashmove{to{background-position:18px 0}}

/* trabalhos */
.work{background:var(--floresta);color:var(--creme);position:relative;overflow:hidden}
.work .wrap{position:relative}
.works{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.work-card .mock{position:relative;margin-bottom:26px;padding-bottom:7%}
.browser{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.38);transition:transform .4s}
.bbar{display:flex;align-items:center;gap:6px;background:#e9e6d6;padding:9px 12px;font:600 12px var(--texto);color:var(--suave)}
.bbar i{width:10px;height:10px;border-radius:50%;background:#c4bf9f;flex:none}
.bbar span{margin-left:10px;background:#fff;border-radius:999px;padding:3px 14px;flex:1;max-width:62%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{display:block;height:auto;width:100%;aspect-ratio:1100/688;object-fit:cover;object-position:top}
.phone{position:absolute;right:-2%;bottom:0;width:24%;border:5px solid var(--tinta);border-radius:22px;background:var(--tinta);overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5);transition:transform .4s}
.phone img{display:block;height:auto;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top}
.work-card:hover .browser{transform:translateY(-6px) rotate(-.6deg)}
.work-card:hover .phone{transform:translateY(-14px) rotate(1.6deg)}
.work-card h3{color:var(--creme)}
.work-card p{color:var(--folha)}
.tags{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 12px}
.tags li{border:1.5px solid var(--folha);color:var(--folha);border-radius:999px;font:600 14px var(--texto);padding:3px 13px}
.more{color:var(--sol);font-weight:700}

/* a Caripará */
.about-sec{background:var(--creme)}
.values{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.values li{background:var(--folha);color:var(--floresta);border-radius:999px;padding:8px 18px;font-weight:700}
.about-art{position:relative;display:grid;place-items:center;min-height:320px}
.about-art::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;border:3px dashed var(--folha)}
.about-art img{position:relative;width:min(220px,70%);z-index:1;animation:bobart2 6s ease-in-out infinite alternate}
@keyframes bobart2{from{transform:translateY(-6px) rotate(-2deg)}to{transform:translateY(6px) rotate(2deg)}}
.orb{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--sol);animation:orbit 14s linear infinite}
.orb.o2{background:var(--urucum);animation-delay:-4.6s}
.orb.o3{background:var(--verde);animation-delay:-9.3s}
@keyframes orbit{from{transform:rotate(0) translateX(150px) rotate(0)}to{transform:rotate(360deg) translateX(150px) rotate(-360deg)}}

.contact{position:relative;overflow:hidden}
.contact .wrap{position:relative}
.site-footer{padding:36px 0 28px}

@media (max-width:820px){
  .works{grid-template-columns:1fr}
  .steps li::after{display:none}
  .about-art{min-height:280px}
  .orb{animation-name:orbit-s}
  @keyframes orbit-s{from{transform:rotate(0) translateX(120px) rotate(0)}to{transform:rotate(360deg) translateX(120px) rotate(-360deg)}}
  .about-art::before{width:240px;height:240px}
  .ico-box{width:104px;height:104px}
  .ribbon{margin:0 -6vw}
  .hero-art img{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .swimmer,.leaf{display:none}
}

.canoe{position:absolute;left:0;top:auto;bottom:calc(var(--pos) * 1%);z-index:0;animation:sail linear infinite;pointer-events:none;will-change:transform}
.canoe.rev{animation-direction:reverse}
.canoe .rock{animation:rock 3.2s ease-in-out infinite alternate;transform-origin:50% 90%}
.canoe svg{display:block;width:100%;height:auto;margin-bottom:-14%}
.canoe.rev svg{transform:scaleX(-1)}
@keyframes sail{from{transform:translateX(-200px)}to{transform:translateX(calc(100vw + 100px))}}
@keyframes rock{from{transform:translateY(3px) rotate(-3deg)}to{transform:translateY(-4px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.canoe{animation:none;left:60%}.canoe .rock{animation:none}}

/* ----- contato: redes e Instagram que gira ----- */
.social{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.soc{display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:16px;background:rgba(247,245,232,.08);border:1px solid rgba(247,245,232,.22);color:var(--creme);text-decoration:none;font-weight:700;transition:background .2s,transform .2s,border-color .2s}
.soc:hover,.soc:focus-visible{background:rgba(242,182,50,.16);border-color:var(--sol);transform:translateY(-2px)}
.soc[hidden]{display:none}
.soc small{display:block;font-weight:500;font-size:.8em;color:var(--folha);overflow-wrap:anywhere}
.ico{flex:none;color:var(--sol)}
.ig{animation:igspin 9s linear infinite;transform-origin:50% 50%}
.soc:hover .ig,.foot-ig:hover .ig{animation-duration:1.6s}
.foot-ig{display:inline-flex;color:var(--sol);padding:6px}
.foot-icons{display:inline-flex;align-items:center;gap:4px}
.foot-ig .ico{width:22px;height:22px}
@keyframes igspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ig{animation:none}}

/* jogo no celular: tela cheia, toque em qualquer lugar, sem seleção de texto */
.game-overlay{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.game-overlay.touch{display:block;padding:0;overflow:hidden;background:var(--floresta);height:100vh;height:100dvh;touch-action:none;overscroll-behavior:none}
.game-overlay.touch .game-box{box-sizing:border-box;width:100%;height:100%;max-width:none;min-width:0;min-height:0;overflow:hidden;border:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.game-overlay.touch .game-top{margin:0;font-size:22px}
.game-overlay.touch .game-close{min-height:46px;padding:10px 24px;font-size:17px}
.game-overlay.touch .game-canvas{height:auto;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.game-overlay.touch .game-help{margin:0;text-align:center;font-size:16px;line-height:1.4}
@media (max-height:480px){.game-overlay.touch .game-help{display:none}.game-overlay.touch .game-top{font-size:18px}.game-overlay.touch .game-close{min-height:40px;padding:6px 18px}}

/* faixa do simulador */
.banner-sol{background:var(--areia);border-block:2px solid var(--linha);padding:18px 0}
.banner-sol .wrap{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.banner-sol p{margin:0;font-weight:600;max-width:46em}
.banner-sol b{color:var(--urucum)}