/* ===== sistema Dala aplicado à flyweb (ver .claude/skills/dala-design-system) =====
   troca de tokens: --iris -> laranja #E8730C ; --saffron -> #ffb829 */
:root{--fundo:#000;--painel:#000;--linha:#ffffff14;--ash:#9a9a9a;--mist:#bdbdbd;--saffron:#ffb829}
html,body{background:#000}

h1,h2,h3{font-family:Inter,system-ui,sans-serif;font-weight:400;text-transform:none;letter-spacing:-.04em;line-height:1.04;color:#fff}
h2{font-size:clamp(2.4rem,5.4vw,5rem)}
.etiqueta{font-family:var(--nav);color:var(--saffron);letter-spacing:.22em}
.sub,.pg-texto{font-family:Inter,system-ui,sans-serif;font-weight:200;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5;color:var(--mist)}
.btn{border-radius:24px}

/* páginas internas: o fundo é o das partículas */
body.pg main,body.pg .rodape{position:relative;z-index:1}
.ambiente{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
.sec,.sec-cinza,#servicos{background:transparent !important;border:0 !important}

/* títulos que sobem palavra por palavra */
.pl{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.pl>span{display:inline-block}
.revela .pl>span{transform:translateY(110%);animation:sobe 1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * 70ms + 160ms)}
@keyframes sobe{to{transform:translateY(0)}}

/* cabeçalho de página */
.pg-cab{padding:clamp(120px,19vh,180px) 0 clamp(36px,6vh,64px)}
.pg-cab-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px clamp(28px,6vw,96px);align-items:end}
.pg-cab h1{font-size:clamp(3rem,8.2vw,8rem);line-height:.98;max-width:9ch}
.pg-cab h1 em{font-style:normal;color:var(--laranja)}
.pg-lado{display:grid;gap:18px;justify-items:start}
.pg-num{font-family:var(--nav);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--ash)}
@media (max-width:900px){.pg-cab-in{grid-template-columns:1fr}.pg-cab h1{max-width:none}}

/* cursor próprio */
.cursor-proprio,.cursor-proprio a,.cursor-proprio button,.cursor-proprio .pv-item,.cursor-proprio .srv-item{cursor:none}
.cursor-anel,.cursor-ponto{position:fixed;left:0;top:0;z-index:100;pointer-events:none;border-radius:50%;opacity:1;transition:opacity .3s}
.cursor-anel{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid #fffc;transition:scale .35s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s,opacity .3s}
.cursor-anel.ativo{scale:1.9;border-color:var(--laranja);background:#e8730c1f}
.cursor-ponto{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--laranja)}

/* ---- portfólio: faixas sem borda nem gradiente ---- */
.pv-item{background:#0a0a0a !important;border:0 !important;border-radius:24px;color:#e8730c}
.pv-item::after{display:none}
.pv-item.aberta{background:#111 !important}
.pv-nome h3{font-family:Inter,sans-serif;font-weight:400;text-transform:none;letter-spacing:-.02em;font-size:clamp(1.5rem,2.3vw,2.1rem)}
.pv-arte{opacity:.14}
#portfolio.sec-pg{padding-top:0}
#portfolio .sub{display:none}

/* ---- serviços: título fixo à esquerda, lista à direita ---- */
#servicos.sec-pg{padding-top:0}
.srv-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(28px,6vw,96px);align-items:start}
.srv-lado{position:sticky;top:120px;display:grid;gap:18px;justify-items:start}
.srv{margin-top:0 !important;border-bottom:0 !important}
.srv-item{grid-template-columns:3.4rem minmax(0,1fr) 2rem !important;gap:6px 18px !important;padding:30px 0 !important;border-top:1px solid var(--linha);transition:border-color .4s,opacity .7s ease,translate .7s ease !important}
.srv-item::before{display:none !important}
.srv-desc{grid-column:2 / 3;grid-row:2;max-width:42ch}
.srv-seta{grid-row:1;grid-column:3}
.srv-item h3{font-size:clamp(1.8rem,3.4vw,3rem);transition:color .35s,translate .45s cubic-bezier(.22,1,.36,1)}
.srv-item:hover,.srv-item:focus-within{padding-inline:0 !important;border-top-color:var(--laranja)}
.srv-item:hover h3{color:var(--laranja) !important;translate:14px 0}
.srv-item:hover .srv-num,.srv-item:hover .srv-desc{color:inherit !important}
.srv-item:hover .srv-num{color:var(--laranja) !important}
.srv-item:hover .srv-desc{color:#fff !important}
.srv-item:hover .srv-seta{color:var(--laranja) !important}
@media (max-width:900px){.srv-wrap{grid-template-columns:1fr}.srv-lado{position:static}}

/* processo */
#jeito .proc-lado h2{font-size:clamp(2.2rem,4.4vw,4rem)}

/* próxima página: sem bloco laranja, a seta e o nome é que ganham cor */
.proxima{background:transparent !important;border-top:1px solid var(--linha)}
.proxima::before{display:none !important}
.proxima-nome{font-family:Inter,sans-serif;font-weight:400;text-transform:none;letter-spacing:-.05em;font-size:clamp(3.4rem,11vw,9.5rem)}
.proxima:hover .proxima-nome{color:var(--laranja) !important}
.proxima:hover .proxima-rot{color:var(--saffron) !important}
.proxima:hover .proxima-seta{color:var(--laranja) !important;translate:24px 0}

/* ---- contato ---- */
.contato-agua{min-height:92vh}
.contato-agua{padding-top:110px;padding-bottom:50px}
.contato-agua h2{font-size:clamp(2.7rem,6.6vw,6.4rem);line-height:1;max-width:13ch}
.contato-agua .contato{gap:22px}
.contato-fatos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;margin-top:18px;font-family:var(--nav);font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.contato-fatos b{font-weight:500;color:#fff}
.contato-fatos span{display:inline-flex;align-items:center;gap:10px}
.contato-fatos .vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--saffron);animation:cnPulsa 1.8s ease-in-out infinite}
.pg-cab-in.larga{width:min(1320px,100% - 40px)}