/* Paginas de nicho da landing (01/10/2026). A primeira e a de cursos e
   escolas (/landing-pages/online-courses/); a ideia e ter uma por publico
   que o portfolio sustenta com caso real, e todas usam este arquivo.

   Sao paginas para o Google: leves, sem GSAP nem Lenis, em ingles, com o
   orcamento na landing principal (../#orcamento). O desenho e o do blog,
   que ja e a parte "de leitura" do site: Bricolage nos titulos, Hanken em
   todo o resto, nada de mono, espacamento entre letras no maximo .04em,
   rotulo (eyebrow) em Hanken e sem ponto, secoes alternando branco e
   cinza. Nenhum botao se mexe: o hover so troca cor, e o unico animado e
   o de orcamento (.fz-orc), o mesmo da landing.

   Desde 02/10/2026 este arquivo tambem serve as paginas de servico de
   marca (/branding/) e de criativos (/ad-creatives/): as classes sv-* no
   fim. Elas tem o orcamento na propria pagina, que vai para a mesma funcao
   novo-lead da landing.

   Mudou este arquivo? Trocar o ?v= do link em todas as paginas que usam
   ele (nicho e servico). */
:root{--bg:#ffffff;--cinza:#f3f3ef;--ink:#0e0e0e;--ink-dim:#6f6f6b;--line:rgba(0,0,0,.12);
  --verde:#222625;--salvia:#cad2c6;--areia:#e6e5dd;--ease:cubic-bezier(.22,1,.36,1);
  --ink-2:#3d3d38;--ink-3:#4a4a45;--ink-corpo:#2e2e2a;--card:#ffffff;--sobre-ink:#ffffff;--vidro:rgba(255,255,255,.9);
  --erro:#b3261e;--ok:#1d6b43}
/* modo escuro (o tema.js poe data-theme no <html>): a paleta do site.
   As vitrines nao mudam: sao fotos de paginas, com fundo proprio. */
:root[data-theme="dark"]{--bg:#111312;--cinza:#171a18;--ink:#eef0ec;--ink-dim:#9fa49c;--line:rgba(238,240,236,.13);
  --ink-2:#d6dad3;--ink-3:#c0c4bc;--ink-corpo:#dfe2db;--card:#191c1a;--sobre-ink:#111312;--vidro:rgba(17,19,18,.88);
  --erro:#ff9d9a;--ok:#8fe0b4}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:18px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1340px,92vw);margin-inline:auto}
.eyebrow{font-size:.95rem;color:var(--ink-dim)}
.cinza{background:var(--cinza);box-shadow:0 0 0 100vmax var(--cinza);clip-path:inset(0 -100vmax)}

/* topo: o mesmo do blog, preso no alto */
.nc-topo{position:sticky;top:0;z-index:50;background:var(--vidro);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.nc-topo.rolou{border-bottom-color:var(--line)}
.nc-topo-in{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0}
.nc-marca{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.nc-links{display:flex;align-items:center;gap:26px;font-size:.95rem}
.nc-links a{text-decoration:none;color:var(--ink-dim);white-space:nowrap;transition:color .3s var(--ease)}
.nc-links a:hover,.nc-links a[aria-current]{color:var(--ink)}
.nc-links .nc-tema{display:flex;color:var(--ink)}
/* entre 700 e 860 px o espaco normal passava da tela. O "Client area" e o
   celular (painel do menu) ficam no topo.css, comum ao blog (02/10/2026). */
@media(max-width:860px){.nc-links{gap:16px}}

/* ------------------------------------------------------------ abertura */
.nc-cab{padding:clamp(36px,6vw,84px) 0 clamp(36px,5vw,64px)}
.nc-trilha{display:flex;flex-wrap:wrap;gap:8px;font-size:15px;color:var(--ink-dim)}
.nc-trilha a{text-decoration:none;transition:color .3s var(--ease)}
.nc-trilha a:hover{color:var(--ink)}
.nc-cab h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(2.6rem,6.6vw,6rem);
  line-height:.98;letter-spacing:-.045em;margin:18px 0 26px;max-width:15ch}
.nc-cab .lead{font-size:clamp(19px,1.7vw,23px);line-height:1.5;color:var(--ink-corpo);max-width:60ch}
.nc-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
.nc-link{font-weight:600;font-size:16px;text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:5px;transition:text-decoration-color .3s var(--ease)}
.nc-link:hover{text-decoration-color:var(--ink)}

/* a vitrine: as paginas de cima a baixo, em janelas estreitas lado a lado */
.nc-vitrine{position:relative;margin-top:clamp(40px,5vw,64px);aspect-ratio:21/9;border-radius:16px;overflow:hidden;
  isolation:isolate;background:var(--salvia);color:#0e0e0e}
.nc-vitrine-cred{position:absolute;left:2.6%;top:6%;right:2.6%;font-size:13px;line-height:1.3;opacity:.72;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-vitrine .nc-janela{position:absolute;top:16%;bottom:-6%;width:22%}
.nc-vitrine .nc-janela:nth-of-type(1){left:12%}
.nc-vitrine .nc-janela:nth-of-type(2){left:39%;top:24%}
.nc-vitrine .nc-janela:nth-of-type(3){left:66%}
@media(max-width:700px){.nc-vitrine{aspect-ratio:4/3}
  .nc-vitrine-cred{left:5%;top:5%}
  .nc-vitrine .nc-janela{width:28%;top:15%}
  .nc-vitrine .nc-janela:nth-of-type(1){left:5%}
  .nc-vitrine .nc-janela:nth-of-type(2){left:36%;top:22%}
  .nc-vitrine .nc-janela:nth-of-type(3){left:67%}}
.nc-janela{border-radius:10px 10px 0 0;overflow:hidden;background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.08)}
.nc-janela::before{content:"";display:block;height:16px;background:#f2f2ee;border-bottom:1px solid rgba(0,0,0,.07)}
.nc-janela img{display:block;width:100%;height:calc(100% - 16px);object-fit:cover;object-position:top center}

/* ------------------------------------------------------------ secoes */
.nc-sec{padding:clamp(72px,9vw,128px) 0}
.nc-titulo{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.02;letter-spacing:-.035em;margin:12px 0 18px;max-width:20ch}
.nc-intro{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2);max-width:58ch}

/* os casos: a pagina numa janela, sobre a cor do projeto, e o texto ao lado */
.nc-casos{display:grid;gap:clamp(56px,7vw,96px);margin-top:clamp(44px,5vw,72px)}
.nc-caso{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.nc-caso:nth-child(even) .nc-caso-foto{order:2}
@media(max-width:860px){.nc-caso{grid-template-columns:1fr}.nc-caso:nth-child(even) .nc-caso-foto{order:0}}
.nc-caso-foto{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;isolation:isolate;background:var(--salvia)}
.nc-caso-foto[data-fundo="areia"]{background:var(--areia)}
.nc-caso-foto[data-fundo="verde"]{background:var(--verde)}
/* aqui a janela mostra a primeira tela inteira, sem cortar as laterais
   (cortada, a do Questao de Ordem perdia o comeco do titulo): flutua no
   meio da cor, na proporcao da foto */
.nc-caso-foto .nc-janela{position:absolute;left:7%;right:7%;top:50%;transform:translateY(-50%);border-radius:10px}
.nc-caso-foto .nc-janela img{height:auto}
.nc-caso-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:15px;color:var(--ink-dim)}
.nc-caso-meta span+span::before{content:"·";margin-right:10px}
.nc-caso h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.05;letter-spacing:-.03em;margin:10px 0 14px}
.nc-caso p{color:var(--ink-corpo);max-width:52ch;margin-bottom:14px}
.nc-caso .nc-papel{font-size:15.5px;color:var(--ink-2)}
.nc-caso .nc-papel strong{font-weight:600;color:var(--ink)}

/* o que a pagina precisa ter: lista numerada em duas colunas */
.nc-lista{list-style:none;counter-reset:nc;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,5vw,80px);margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
@media(max-width:760px){.nc-lista{grid-template-columns:1fr}}
.nc-lista li{counter-increment:nc;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;align-content:start;
  padding:26px 0 28px;border-bottom:1px solid var(--line)}
.nc-lista li::before{content:counter(nc,decimal-leading-zero);grid-row:1/3;font-size:15px;color:var(--ink-dim);padding-top:5px}
.nc-lista h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.25rem,1.8vw,1.5rem);
  line-height:1.2;letter-spacing:-.02em}
.nc-lista p{font-size:16.5px;color:var(--ink-3);max-width:52ch}
.nc-nota{margin-top:clamp(40px,5vw,56px);padding:26px 0 28px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.nc-nota p{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1.28;letter-spacing:-.02em;max-width:44ch}

/* precos: os tres niveis da landing, em uma linha cada */
.nc-precos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,60px)}
@media(max-width:900px){.nc-precos{grid-template-columns:1fr}}
.nc-preco{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,2.6vw,32px)}
.nc-preco h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:1.5rem;letter-spacing:-.02em}
.nc-preco h3 small{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:14px;letter-spacing:0;color:var(--ink-dim)}
.nc-preco ul{list-style:none;border-top:1px solid var(--line)}
.nc-preco li{padding:9px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-3)}
.nc-preco .nc-valor{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.6rem,2.4vw,2rem);
  letter-spacing:-.025em;margin:8px 0 12px}
.nc-preco p{font-size:16px;color:var(--ink-3)}
.nc-precos-pe{margin-top:24px;font-size:16px;color:var(--ink-2);max-width:70ch}

/* perguntas */
.nc-faq{margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--line)}
.nc-faq details{border-bottom:1px solid var(--line)}
.nc-faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:24px 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.15rem,1.7vw,1.4rem);
  line-height:1.3;letter-spacing:-.015em;transition:color .3s var(--ease)}
.nc-faq summary::-webkit-details-marker{display:none}
.nc-faq summary:hover{color:var(--ink-dim)}
.nc-faq summary::after{content:"+";flex:none;font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:1.5rem;line-height:1}
.nc-faq details[open] summary::after{content:"−"}
.nc-faq p{padding:0 40px 26px 0;font-size:16.5px;line-height:1.65;color:var(--ink-3);max-width:66ch}

/* fecho com o orcamento */
.nc-fecho{text-align:center;padding:clamp(72px,9vw,120px) 0}
.nc-fecho .nc-titulo{margin:12px auto 16px;max-width:18ch}
.nc-fecho p{color:var(--ink-2);max-width:48ch;margin:0 auto 30px}
.nc-rodape{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0 40px;font-size:14.5px;color:var(--ink-dim)}
.nc-rodape a{text-decoration:none;transition:color .3s var(--ease)}
.nc-rodape a:hover{color:var(--ink)}
.nc-rodape nav{display:flex;gap:18px;flex-wrap:wrap}

/* botao de orcamento, o mesmo da landing e do blog */
.fz-orc{position:relative;display:inline-flex;align-items:center;padding:4px;border:0;border-radius:60px;background:transparent;cursor:pointer;text-decoration:none;--fundo:var(--cinza);--cor:var(--ink)}
.fz-orc-circ{position:absolute;left:4px;top:4px;bottom:4px;width:48px;border-radius:60px;background:var(--cor);transition:width .5s var(--ease)}
.fz-orc-seta{position:absolute;left:16px;top:50%;width:24px;height:24px;margin-top:-12px;color:var(--fundo);transition:transform .5s var(--ease)}
.fz-orc-txt{position:relative;display:block;padding:0 26px 0 66px;line-height:48px;white-space:nowrap;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--cor);transition:color .5s var(--ease)}
.fz-orc:hover .fz-orc-circ,.fz-orc:focus-visible .fz-orc-circ{width:calc(100% - 8px)}
.fz-orc:hover .fz-orc-seta,.fz-orc:focus-visible .fz-orc-seta{transform:translateX(.4rem)}
.fz-orc:hover .fz-orc-txt,.fz-orc:focus-visible .fz-orc-txt{color:var(--fundo)}
.nc-cab .fz-orc{--fundo:var(--bg)}
@media (prefers-reduced-motion:reduce){.fz-orc-circ,.fz-orc-seta,.fz-orc-txt{transition:none}}

/* ============================================================ servico
   Paginas de servico (marca e criativos), 02/10/2026. */

/* numeros de prova logo abaixo da abertura: so os que o Mateus confirmou */
.sv-numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,4vw,56px);
  margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
@media(max-width:700px){.sv-numeros{grid-template-columns:1fr}}
.sv-numeros div{padding:22px 0 0}
@media(max-width:700px){.sv-numeros div{padding:18px 0;border-bottom:1px solid var(--line)}}
.sv-numeros b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;
  font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.05;letter-spacing:-.03em}
.sv-numeros span{display:block;margin-top:6px;font-size:16px;color:var(--ink-2)}

/* galeria: trabalhos em quadros 16:9, duas colunas, com legenda embaixo */
.sv-galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(16px,2.4vw,32px);
  margin-top:clamp(40px,5vw,64px)}
@media(max-width:760px){.sv-galeria{grid-template-columns:1fr}}
.sv-peca{margin:0}
/* height:auto e obrigatorio: o atributo height da tag vira altura fixa e
   anula o aspect-ratio (a foto saia alta e cortada) */
.sv-peca img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top center;border-radius:14px;background:var(--areia)}
.sv-peca figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:14px;font-size:15.5px;color:var(--ink-dim)}
.sv-peca figcaption strong{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--ink)}
.sv-peca figcaption a{margin-left:auto}

/* comparacao: tres colunas lado a lado; no celular vira um bloco por linha */
.sv-compara{margin-top:clamp(36px,4vw,52px);border-top:1px solid var(--ink)}
.sv-compara-linha{display:grid;grid-template-columns:minmax(0,.8fr) repeat(3,minmax(0,1fr));gap:0 clamp(14px,2vw,28px);
  padding:18px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-3)}
.sv-compara-linha>:first-child{font-weight:600;color:var(--ink)}
.sv-compara-cab{font-size:15px;color:var(--ink-dim)}
.sv-compara-cab>*{font-weight:400!important;color:var(--ink-dim)!important}
.sv-compara .sv-eu{color:var(--ink);font-weight:600}
.sv-compara-cab .sv-eu{color:var(--ink)!important;font-weight:600!important}
@media(max-width:760px){
  .sv-compara-cab{display:none}
  .sv-compara-linha{grid-template-columns:1fr;gap:6px}
  .sv-compara-linha>[data-quem]::before{content:attr(data-quem) ": ";color:var(--ink-dim);font-weight:400}}
.sv-fonte{margin-top:16px;font-size:14px;color:var(--ink-dim);max-width:70ch}

/* precos com dois cartoes so */
.nc-precos.dois{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.nc-precos.dois{grid-template-columns:1fr}}
.nc-preco .sv-por{font-size:15px;color:var(--ink-dim);margin:-6px 0 14px}
.nc-preco h3 small{white-space:nowrap}
.nc-preco .nc-valor small{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:16px;letter-spacing:0;color:var(--ink-dim)}
.nc-preco .sv-escolher{margin-top:18px}
.sv-oferta{margin-top:20px;padding:20px 24px;border:1px dashed var(--line);border-radius:14px;font-size:16px;color:var(--ink-2);max-width:72ch}
.sv-oferta strong{color:var(--ink);font-weight:600}

/* orcamento curto na propria pagina */
.sv-form{position:relative;display:grid;gap:34px;max-width:820px;margin-top:clamp(32px,4vw,48px)}
.sv-campo{border:0;padding:0;margin:0;min-width:0}
.sv-campo label,.sv-campo legend{display:block;font-weight:600;font-size:17px;margin-bottom:14px;padding:0}
.sv-campo input[type=text],.sv-campo input[type=email]{width:100%;font-family:'Hanken Grotesk',sans-serif;font-size:18px;
  padding:10px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);outline:0;
  transition:border-color .3s var(--ease)}
.sv-campo input[type=text]:focus,.sv-campo input[type=email]:focus{border-bottom-color:var(--ink)}
.sv-opcoes{display:flex;flex-wrap:wrap;gap:10px}
.sv-opcao{position:relative}
.sv-opcao input{position:absolute;opacity:0;width:0;height:0;margin:0}
.sv-opcao span{display:inline-flex;align-items:center;padding:12px 20px;border-radius:60px;border:1px solid var(--line);
  font-size:16px;line-height:1.3;cursor:pointer;background:var(--card);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.sv-opcao span:hover{border-color:var(--ink-dim)}
.sv-opcao input:checked+span{background:var(--ink);color:var(--sobre-ink);border-color:var(--ink)}
.sv-opcao input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.sv-duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px clamp(20px,3vw,40px)}
@media(max-width:640px){.sv-duas{grid-template-columns:1fr}}
.sv-estimativa{padding:20px 24px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.sv-estimativa .eyebrow{font-size:14.5px}
.sv-estimativa .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.6rem,2.6vw,2.1rem);
  letter-spacing:-.025em;margin:4px 0 6px}
.sv-estimativa p{font-size:15.5px;color:var(--ink-2)}
.sv-enviar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.sv-enviar small{font-size:14.5px;color:var(--ink-dim)}
.sv-form button.fz-orc{font:inherit}
.sv-form button.fz-orc:disabled{opacity:.55;cursor:default}
.sv-estado{min-height:1.4em;font-size:16.5px}
.sv-estado.erro{color:var(--erro)}
.sv-estado.ok{color:var(--ok)}
.sv-mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}