/* HAI Labs · home v3. A primeira tela é o trabalho: vídeo de campanha de um lado, sistema do outro, símbolo em partículas na emenda. */
.home .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.home #gl{z-index:4}
.home :focus-visible{outline:2px solid #FBF8EF;outline-offset:4px;border-radius:4px}
.home [data-t=light] :focus-visible,.home [data-t=sage] :focus-visible{outline-color:var(--green)}

/* ---------- primeira tela ---------- */
.duo{display:flex;height:100svh;min-height:600px;position:relative;overflow:hidden;background:var(--wine)}
.duo .pane{flex:1 1 0;min-width:0;position:relative;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;color:#FBF8EF;transition:flex-grow .7s cubic-bezier(.2,.7,.1,1)}
@media (hover:hover) and (min-width:901px){.duo .pane:hover,.duo .pane:focus-visible{flex-grow:1.32}}
.duo .pane:focus-visible{outline-offset:-6px}
.duo .pm{background:var(--wine)}
.duo .pt{background:var(--green)}
.duo video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.duo .pm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(54,20,23,.5) 0%,rgba(54,20,23,0) 28%,rgba(54,20,23,.1) 50%,rgba(54,20,23,.92) 100%)}
.duo .pt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,63,58,.35) 0%,rgba(0,63,58,0) 30%,rgba(0,63,58,.15) 52%,rgba(0,50,46,.96) 88%)}
.duo .stage{position:absolute;inset:0;perspective:1400px;display:block}
.duo .screen{position:absolute;left:16%;top:14%;width:92%;aspect-ratio:16/11;border-radius:10px;overflow:hidden;display:block;transform:rotateY(-16deg) rotateX(7deg) rotateZ(1deg);transform-origin:20% 50%;box-shadow:0 60px 120px -40px rgba(0,0,0,.7),0 0 0 1px rgba(197,212,199,.25);will-change:transform}
.duo .screen img{width:100%;height:auto;animation:pan 46s ease-in-out infinite alternate}
@keyframes pan{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(-57%)}}
.duo .say{position:relative;z-index:5;display:block;padding:0 max(28px,4vw) clamp(36px,7vh,72px);max-width:34rem}
.duo .pt .say{margin-left:0}
.duo .line{display:block;font-family:var(--serif);font-variation-settings:"opsz" 11;font-weight:500;font-size:clamp(2.1rem,3.7vw,3.7rem);line-height:1.04;letter-spacing:-.005em;text-wrap:balance;animation:rise 1.1s .25s cubic-bezier(.2,.7,.1,1) both}
.duo .pt .line{animation-delay:.45s}
.duo .sub{display:block;margin-top:18px;font-size:1.02rem;line-height:1.6;color:rgba(251,248,239,.82);max-width:38ch;animation:rise 1.1s .7s cubic-bezier(.2,.7,.1,1) both}
.duo .go{display:inline-block;margin-top:22px;font-size:.92rem;font-weight:500;padding-bottom:5px;border-bottom:1px solid rgba(251,248,239,.5);transition:border-color .2s,padding .25s;animation:rise 1.1s .85s cubic-bezier(.2,.7,.1,1) both}
.duo .pane:hover .go{border-color:#FBF8EF;padding-right:14px}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- capítulos ---------- */
.hx{position:relative;padding:clamp(88px,14vh,160px) 0}
.hx .lead{max-width:46ch}
.hx .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.hx .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.tech .grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}

/* serviços: dois blocos de cor, largura total */
.serv{padding-bottom:clamp(48px,8vh,96px)}
.serv .wide{padding:0 clamp(16px,2.6vw,44px);max-width:1340px;margin:0 auto}
.serv h2{font-size:clamp(1.7rem,3.25vw,2.95rem);line-height:1.16;max-width:none;text-wrap:balance;padding:0 clamp(8px,1.6vw,28px)}
.box{margin-top:clamp(20px,2.4vw,36px);border-radius:22px;color:#FBF8EF;display:grid;gap:clamp(24px,3.4vw,60px);padding:clamp(20px,2.4vw,38px);align-items:stretch;--ln:rgba(251,248,239,.18)}
.serv h2+.box{margin-top:clamp(40px,6vh,72px)}
.box.bm{background:var(--wine);grid-template-columns:minmax(0,6fr) minmax(0,5fr);box-shadow:0 50px 90px -60px rgba(54,20,23,.9)}
.box.bt{background:var(--green);grid-template-columns:minmax(0,7fr) minmax(0,5fr);box-shadow:0 50px 90px -60px rgba(0,63,58,.9)}
.box.bt .txt{order:2}
.box .txt{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(4px,1vw,16px) 0}
.box .kind{margin:0 0 18px;font-size:.95rem;font-weight:500;color:var(--sage)}
.home .box h3{color:#FBF8EF;font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1.06}
.box .about{margin:14px 0 0;color:rgba(251,248,239,.78);line-height:1.6;max-width:40ch}
.box .acc{list-style:none;margin:clamp(22px,3vh,36px) 0 0;padding:0;width:100%;border-top:1px solid var(--ln)}
.box .acc li{border-bottom:1px solid var(--ln)}
.box .acc button{font:inherit;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:12px 0;color:inherit;display:block}
.box .acc b{font-family:var(--serif);font-variation-settings:"opsz" 11;font-weight:500;font-size:clamp(1.15rem,1.4vw,1.35rem);line-height:1.2;color:rgba(251,248,239,.5);transition:color .2s}
.box .acc li.on b,.box .acc button:hover b{color:#FBF8EF}
.box .acc .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.box .acc .more>*{min-height:0;overflow:hidden}
.box .acc .more p{margin:0;font-size:.95rem;line-height:1.55;color:rgba(251,248,239,.8);max-width:46ch}
.box .acc .more a{font-size:.88rem;font-weight:500;color:var(--sage);text-underline-offset:4px;height:0;display:block}
.box .acc li.on .more{grid-template-rows:1fr;padding-bottom:18px}
.box .acc li.on .more a{height:auto;margin-top:10px}
.box .txt .btn{margin-top:26px}
.prev{position:relative;border-radius:12px;overflow:hidden;min-height:clamp(360px,54vh,500px);background:rgba(0,0,0,.25);display:block}
.prev>img,.prev>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:0;transform:scale(1.04);transition:opacity .45s,transform .9s cubic-bezier(.2,.7,.1,1)}
.prev>.on{opacity:1;transform:none}
.prev.scr{font:inherit;color:inherit;border:0;padding:0;cursor:zoom-in;width:100%;background:#0d1626;box-shadow:0 0 0 1px rgba(197,212,199,.22)}
.prev.scr>img{object-position:left top}
.prev.scr>img.tall{object-fit:contain;object-position:center top;background:#2c060c}
.prev .hint{position:absolute;right:14px;bottom:14px;background:#FBF8EF;color:var(--green);font-size:.8rem;font-weight:500;padding:9px 14px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.prev.scr:hover .hint,.prev.scr:focus-visible .hint{opacity:1;transform:none}
@media (hover:none){.prev .hint{opacity:1;transform:none}}

/* exemplos em tela cheia */
.show{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#0a1210;color:#FBF8EF}
.show[open]{display:flex;flex-direction:column}
.show::backdrop{background:#0a1210}
.show .sbar{flex:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px max(16px,3vw);font-size:.86rem;border-bottom:1px solid rgba(251,248,239,.14)}
.show .sbar div{display:flex;gap:8px}
.show button{font:inherit;font-size:.86rem;font-weight:500;color:#FBF8EF;background:none;border:1px solid rgba(251,248,239,.35);border-radius:999px;padding:9px 16px;cursor:pointer}
.show button:hover{background:#FBF8EF;color:var(--green)}
.show .sbody{flex:1;overflow:auto;padding:max(16px,3vw);text-align:center}
.show .sbody img{max-width:min(1440px,100%);height:auto;margin:0 auto;border-radius:8px;display:block}
.show .sbody img.tall{max-width:min(430px,100%)}

.fim{padding:clamp(56px,9vh,96px) 0}
.fim .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,6rem);align-items:center}
.fim .marca{height:clamp(58px,6vw,78px);width:auto;display:block;margin-bottom:26px}
.fim .simb{width:clamp(260px,32vw,440px);height:auto;display:block;justify-self:end}
.home .fim h2{font-size:clamp(1.45rem,2.3vw,2.1rem);line-height:1.45;letter-spacing:.015em}
.fim .ctt{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px 34px}
.fim .ctt a,.fim .ctt .a{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--green)}
.fim .ctt .ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--green);display:grid;place-items:center;transition:background .25s,transform .25s cubic-bezier(.2,.7,.1,1)}
.fim .ctt .ic img{display:block}
.fim .ctt .ic svg{width:22px;height:22px;fill:none;stroke:#FBF8EF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fim .ctt a:hover .ic{background:var(--wine);transform:translateY(-2px)}
.fim .ctt span span,.fim .ctt a>span{display:grid;font-size:1.02rem;font-weight:500;line-height:1.3}
.fim .ctt small{font-size:.78rem;font-weight:400;opacity:.75}
.fim .ctt .end{flex-basis:100%}
.fim .ctt .end span span{max-width:34ch}
.fim .btns{margin-top:30px}

@media (max-width:900px){
  .fim .wrap{grid-template-columns:1fr}
  .fim .simb{order:-1;justify-self:start;width:min(250px,70%);margin-bottom:6px}
  .duo{flex-direction:column;height:100svh;min-height:620px}
  .duo .pane{flex:1 1 0;min-height:0}
  .duo .screen{left:8%;top:8%;width:125%}
  .duo .pt::after{background:linear-gradient(180deg,rgba(0,63,58,.2) 0%,rgba(0,55,50,.55) 45%,rgba(0,50,46,.97) 78%)}
  .duo .line{font-size:clamp(1.8rem,7.6vw,2.5rem);max-width:11em}
  .duo .sub{display:none}
  .duo .go{margin-top:14px}
  .duo .say{padding-bottom:26px}
  .box.bm,.box.bt{grid-template-columns:1fr;border-radius:16px}
  .box .prev{order:-1;min-height:0;aspect-ratio:1/1;position:sticky;top:80px;z-index:3;box-shadow:0 24px 40px -24px rgba(0,0,0,.7)}
  .box .prev.scr{aspect-ratio:16/11}
  .box.bt .txt{order:0}
}
@media (prefers-reduced-motion:reduce){
  .duo .line,.duo .sub,.duo .go,.duo .screen img{animation:none}
  .duo .pane,.svc a,.duo .go{transition:none}
}

/* título que acende: as palavras sobem e a luz atravessa o texto */
.fx .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.fx .w i{display:inline-block;font-style:normal;transform:translateY(112%);background:linear-gradient(100deg,var(--fx-on,#FBF8EF) 0 44%,var(--fx-off,rgba(251,248,239,.24)) 56% 100%);background-size:230% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxup 1s cubic-bezier(.2,.7,.1,1) forwards,fxlit 1.1s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(.1s + var(--i)*.08s),calc(.75s + var(--i)*.14s)}
@keyframes fxup{to{transform:none}}
@keyframes fxlit{to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.fx .w i{animation:none;transform:none;background-position:0 0}}

/* abertura da home: o símbolo se forma, a frase acende e a home entra */
#intro{display:none;position:fixed;inset:0;z-index:40;background:radial-gradient(90% 70% at 50% 38%,#4A1B20 0%,var(--wine) 60%,#2a0f12 100%);transition:opacity .9s ease}
.intro-on #intro,.intro-out #intro{display:block}
.intro-out #intro{opacity:0;pointer-events:none}
.intro-on,.intro-on body{overflow:hidden}
.intro-on #gl,.intro-out #gl{z-index:41}
#intro p{position:absolute;left:0;right:0;top:63%;margin:0;padding:0 24px;text-align:center;font-family:var(--serif);font-variation-settings:"opsz" 11;font-weight:500;font-size:clamp(1.7rem,3.9vw,3.5rem);line-height:1.1;color:#FBF8EF}
#intro .fx .w i{animation-delay:calc(.9s + var(--i)*.07s),calc(1.3s + var(--i)*.11s);animation-duration:.9s,.9s}
#intro button{position:absolute;right:max(20px,3vw);bottom:max(20px,3vh);font:inherit;font-size:.85rem;font-weight:500;color:rgba(251,248,239,.7);background:none;border:1px solid rgba(251,248,239,.3);border-radius:999px;padding:9px 16px;cursor:pointer;z-index:42}
#intro button:hover{color:#FBF8EF;border-color:#FBF8EF}
.intro-on .duo .line,.intro-on .duo .sub,.intro-on .duo .go{animation-play-state:paused}

/* marcas atendidas (os nomes dão lugar às logos quando chegarem: trocar o texto do <li> por <img>) */
.marcas{padding:clamp(48px,8vh,84px) 0 clamp(8px,2vh,24px)}
.home .marcas h2{font-size:clamp(1.3rem,2vw,1.8rem);text-align:center;color:var(--green)}
.faixa{display:flex;overflow:hidden;margin-top:clamp(24px,4vh,40px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.faixa ul{flex:none;display:flex;align-items:center;gap:clamp(44px,5vw,80px);padding:0 clamp(22px,2.5vw,40px);margin:0;list-style:none;animation:faixa 64s linear infinite}
.faixa:hover ul{animation-play-state:paused}
.faixa li{font-family:var(--serif);font-variation-settings:"opsz" 11;font-weight:500;font-size:clamp(1.4rem,2.2vw,2rem);color:var(--green);white-space:nowrap;opacity:.82}
.faixa li img{display:block;max-width:none}
@keyframes faixa{to{transform:translateX(-100%)}}
.marcas+.serv{padding-top:clamp(56px,9vh,104px)}
@media (prefers-reduced-motion:reduce){.faixa{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}.faixa ul{animation:none;flex-wrap:wrap;justify-content:center}.faixa ul+ul{display:none}}