/* Versão estática da home (D14) e o que muda no cabeçalho sem o 3D. Escrito à mão (não sai do producao.py).
   Mesmo sistema da experiência: preto profundo, PP Neue Montreal nos títulos, PT Mono nas etiquetas, palco de 1200px. */

/* quem decide: com .exp3d no <html> roda a experiência; sem ela, a versão estática */
html.exp3d #estatico{display:none}
html:not(.exp3d) #trilho{display:none}

/* atalho para a versão em texto, visível só no foco do teclado */
.pular{position:fixed;z-index:40;top:8px;left:8px;padding:12px 16px;background:var(--branco);color:var(--preto);font-family:var(--f-mono);font-size:13px;text-decoration:none;transform:translateY(-200%)}
.pular:focus{transform:none}
html:not(.exp3d) .pular{display:none}

/* cabeçalho sem 3D: sem som, menu sempre aberto e quebrando linha no celular (o botão Menu depende do JS da cena) */
html:not(.exp3d) #som,html:not(.exp3d) #abrir{display:none}
html:not(.exp3d) #topo{position:sticky;flex-wrap:wrap;row-gap:0;background:var(--preto);border-bottom:1px solid rgba(245,243,247,.08)}
html:not(.exp3d){scroll-padding-top:84px}
@media (max-width:1100px){
  html:not(.exp3d){scroll-padding-top:128px}
  html:not(.exp3d) #menu{display:flex;position:static;order:3;flex-basis:100%;flex-direction:row;flex-wrap:nowrap;gap:0 18px;padding:0;background:none;border:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  html:not(.exp3d) #menu a{flex:none}
}

#estatico{
  --mg:max(clamp(24px,5.5vw,104px),calc((100vw - 1200px)/2));
  --agua:#5fffff;--rosa:#ff2d7a;--laranja:#ff9600;--roxo:#a35cff;--linha:rgba(245,243,247,.12);
  font-family:var(--f-tit);font-size:18px;line-height:1.55;color:var(--branco);
  background:radial-gradient(120% 60% at 50% 0%,rgba(163,92,255,.10),transparent 60%),var(--preto)}
#estatico .est-palco{max-width:1200px;margin:0 auto;padding:0 clamp(24px,5.5vw,104px)}
@media (min-width:1309px){#estatico .est-palco{padding:0}}
#estatico section{padding:clamp(72px,11vw,160px) 0;border-top:1px solid var(--linha)}
#estatico section:first-child{border-top:0}
#estatico h1,#estatico h2,#estatico h3{font-weight:600;letter-spacing:-.025em;margin:0;text-wrap:balance}
#estatico h1{font-size:clamp(40px,7vw,96px);line-height:1;max-width:14em}
#estatico h2{font-size:clamp(34px,5.4vw,72px);line-height:1.02;max-width:16em}
#estatico h3{font-size:clamp(22px,2.2vw,28px);line-height:1.15}
#estatico em{font-style:normal;color:var(--agua)}
#estatico p{margin:0}
#estatico a{color:inherit}
#estatico .est-meta,#estatico .est-n,#estatico .est-preco,#estatico .est-eco{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
#estatico .est-meta{margin-bottom:24px}
#estatico .est-lead{font-size:clamp(20px,2vw,26px);line-height:1.35;color:#d9d5e1;max-width:30em;margin-top:28px}

/* abertura */
#estatico .est-abre{min-height:calc(100svh - 72px);display:flex;align-items:center;padding:64px 0}
#estatico .est-abre .est-palco{width:100%;box-sizing:border-box}
#estatico .est-marca{display:block;width:min(260px,60vw);height:auto;margin-bottom:56px}
#estatico .est-ruido{margin-top:56px;padding-top:24px;border-top:1px solid var(--linha);max-width:28em;font-size:20px;color:var(--cinza)}
#estatico .est-3d{display:none;margin-top:32px;font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
html.gl #estatico .est-3d{display:block}
#estatico .est-3d a{display:inline-flex;align-items:center;min-height:44px}

/* portfólio */
#estatico .est-port{list-style:none;margin:56px 0 0;padding:0;columns:4 220px;column-gap:16px}
#estatico .est-port li{break-inside:avoid;margin:0 0 16px}
#estatico .est-port img{display:block;width:100%;height:auto;border-radius:2px;background:#100e19}
#estatico .est-port span{display:block;margin-top:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--cinza)}

/* Beto */
#estatico .est-duas{display:grid;gap:40px 24px}
@media (min-width:900px){#estatico .est-duas{grid-template-columns:5fr 7fr}}
#estatico blockquote{margin:32px 0;padding-left:20px;border-left:2px solid var(--rosa);font-size:22px;line-height:1.35}
#estatico blockquote small{display:block;margin-top:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
#estatico .est-bt{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid rgba(245,243,247,.4);border-radius:2px;font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
#estatico .est-bt:hover,#estatico .est-bt:focus-visible{background:var(--branco);color:var(--preto)}
#estatico .est-bt-cheio{background:linear-gradient(90deg,var(--laranja),var(--rosa) 45%,var(--roxo));border:0;color:var(--branco)}
#estatico .est-eco{margin-top:28px}

/* clientes e depoimentos */
#estatico .est-rostos{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 16px}
#estatico .est-rostos li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.2}
#estatico .est-rostos img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;filter:saturate(.9)}
#estatico .est-depo{display:grid;gap:24px;margin-top:72px}
@media (min-width:900px){#estatico .est-depo{grid-template-columns:repeat(3,1fr)}}
#estatico .est-depo figure{margin:0;padding:28px;border:1px solid var(--linha);border-top:2px solid var(--agua);background:rgba(16,14,25,.6);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
#estatico .est-depo blockquote{margin:0;padding:0;border:0;font-size:18px;line-height:1.5;color:#d9d5e1}
#estatico .est-depo strong{color:var(--branco);font-weight:600}
#estatico .est-depo figcaption{display:grid;grid-template-columns:48px 1fr;column-gap:12px;align-items:center}
#estatico .est-depo figcaption img{grid-row:span 2;width:48px;height:48px;border-radius:50%;object-fit:cover}
#estatico .est-depo figcaption small{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}

/* processo */
#estatico .est-passos{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:24px}
@media (min-width:700px){#estatico .est-passos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){#estatico .est-passos{grid-template-columns:repeat(3,1fr)}}
#estatico .est-passos li{padding:28px 0 0;border-top:2px solid var(--agua)}
#estatico .est-passos .est-n{color:var(--agua)}
#estatico .est-passos h3{margin:10px 0 16px}
#estatico .est-passos p{font-size:16px;line-height:1.5;color:#d9d5e1;margin-top:12px}
#estatico .est-passos b{display:block;font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
#estatico .est-passos p+p b{color:var(--laranja)}

/* planos */
#estatico #planos em{color:var(--laranja)}
#estatico #planos .est-preco{margin-top:24px;color:var(--branco)}
#estatico .est-planos{display:grid;gap:24px;margin-top:56px}
@media (min-width:900px){#estatico .est-planos{grid-template-columns:repeat(3,1fr)}#estatico .est-fuw{grid-column:1/-1}}
#estatico .est-planos article{display:flex;flex-direction:column;gap:16px;padding:32px 28px;border:1px solid var(--linha);border-top:3px solid var(--c,var(--agua));background:rgba(16,14,25,.6)}
#estatico .est-planos h3{font-size:clamp(30px,3vw,40px);display:flex;flex-direction:column;gap:6px}
#estatico .est-planos h3 span{font-family:var(--f-mono);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--agua))}
#estatico .est-planos p{font-size:17px;color:#d9d5e1}
#estatico .est-planos p.est-n,#estatico .est-planos p.est-preco{font-size:13px;color:var(--cinza)}
#estatico .est-planos ul{margin:0;padding:16px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);list-style:none;display:grid;gap:8px;font-size:16px}
#estatico .est-planos ul li::before{content:'→ ';color:var(--c,var(--agua))}
#estatico .est-planos .est-r{color:var(--branco)}
#estatico .est-planos .est-bt{margin-top:auto;align-self:flex-start}
#estatico .est-fuw{--c:var(--agua);background:linear-gradient(135deg,rgba(255,150,0,.08),rgba(255,45,122,.08) 40%,rgba(163,92,255,.10) 70%,rgba(95,255,255,.06)),rgba(16,14,25,.6)!important}
@media (min-width:900px){#estatico .est-fuw ul{grid-template-columns:repeat(2,1fr)}}

/* Toró de Pitaco */
#estatico .est-textos{list-style:none;margin:56px 0 32px;padding:0;display:grid;gap:24px}
@media (min-width:900px){#estatico .est-textos{grid-template-columns:repeat(3,1fr)}}
#estatico .est-textos li{padding-top:24px;border-top:1px solid var(--linha)}
#estatico .est-textos h3{margin:12px 0}
#estatico .est-textos h3 a{text-decoration:none}
#estatico .est-textos h3 a:hover{text-decoration:underline;text-underline-offset:4px}
#estatico .est-textos p:last-child{font-size:16px;color:#d9d5e1}
#estatico .est-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase}

/* fechamento */
#estatico .est-fim{text-align:center}
#estatico .est-fim .est-palco{display:flex;flex-direction:column;align-items:center}
#estatico .est-fim h2{margin-bottom:40px}

#estatico a:focus-visible,.pular:focus-visible{outline:2px solid var(--agua);outline-offset:3px}
@media (prefers-reduced-motion:reduce){#estatico *{transition:none!important}}