/*
 * Direção de arte da home e unidade visual das internas.
 *
 * Fica fora de fosfo.css para poder ser ligada e desligada inteira: é o que faz o botão
 * Antes / Depois do ambiente local. As cópias com :root:root ganham do fosfo.css sem !important.
 * Origem: prévia aprovada em docs/previa-refino/v18-sem-faixa/.
 */

:root:root .nav__links{gap: 24px;}
@media (min-width: 1024px){:root:root .nav__links{gap: 40px;}}:root:root .nav__link{font-size: 15px; font-weight: 600; letter-spacing: .08em; color: var(--t-2);}
:root:root .nav__link:hover,:root:root .nav__link[aria-current="page"]{color: var(--t-1);}
:root:root .btn.btn--nav{font-size: 14px; letter-spacing: .1em; padding: 12px 26px;}
:root:root .nav__link, :root:root .btn--nav{white-space: nowrap;}
@media (min-width: 768px) and (max-width: 1023px){:root:root .nav__links{display: none;}:root:root .nav__toggle{display: flex;}}
:root:root .btn{font-size: 14px; letter-spacing: .14em; padding: 22px 38px;}
:root:root .btn--vazado{padding: 20px 36px;}
:root:root .link-seta{font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--orange);}
:root:root .link-seta:hover,:root:root .link-seta:focus-visible{color: var(--t-1);}
:root:root .sec--light .link-seta{color: var(--orange-dark);}
:root:root .sec--light .link-seta:hover{color: var(--t-dark-1);}
:root:root .cases__rodape .link-seta{font-size: 14px !important; letter-spacing: .14em !important;
  color: var(--t-1); border: 2px solid var(--orange); padding: 20px 36px;
  transition: background var(--dur-fast), gap .18s ease;}
:root:root .cases__rodape .link-seta:hover{background: var(--orange);}
:root:root .label,:root:root .hero__kicker{font-size: 13px; letter-spacing: .24em;}
:root:root .label--neutro{color: var(--t-2);}
:root:root .stat__rotulo{font-size: 13px; letter-spacing: .16em; color: var(--t-2);}
:root:root .caseb__cat{font-size: 13px; letter-spacing: .2em; color: var(--t-2);}
:root:root .caseb__go{font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--orange);}
:root:root .caseb:hover .caseb__go{color: var(--t-1);}
:root:root .form__label{font-size: 13px; letter-spacing: .2em; color: var(--t-2);}
:root:root .texto{font-size: 17px; line-height: 1.6; color: var(--t-2);}
:root:root .sec--light .texto{color: var(--t-dark-2);}
:root:root .texto--lg,:root:root .cases__cabeca .texto{font-size: 21px; line-height: 1.5; color: var(--t-2); max-width: 36rem;}
:root:root .sec--light .texto--lg{color: var(--t-dark-2);}
:root:root .hero__abaixo p{max-width: 32rem;}
:root:root .necessidades__item p{font-size: 17px;}
:root:root .caseb__resultado{font-size: 18px; color: var(--t-2);}
:root:root .pq-decisao__texto{font-size: 19px;}
:root:root .pq-decisao__experiencia p{font-size: 16px;}
:root:root .pq-decisao__pontos span{font-size: 17px;}
:root:root .pq-decisao__pontos{border-top: 0;}
:root:root .pq-decisao__pontos p{border-bottom: 0;}
:root:root .pq-decisao__rotulo{color: var(--t-dark-2);}
:root:root .card__num{color: rgba(255, 255, 255, .16);}
:root:root .hero__stats{border-top: 0;}
:root:root .prova .label{font-size: 16px; letter-spacing: .2em; color: var(--t-2);}
:root:root .prova-slot{aspect-ratio: 5 / 3;}
:root:root .prova-slot__logo,:root:root .prova-slot__logo{padding: 14px 24px;}
:root:root .prova-slot__img{max-height: min(76px, 100%); opacity: .75;}
@media (min-width: 1152px){:root:root .prova-slot{aspect-ratio: 5 / 3;}
:root:root .prova-slot__img{max-height: min(92px, 100%);}}
:root:root .laranja__texto{font-size: 20px; color: var(--t-on-orange);}
:root:root .laranja__links > span{font-size: 13px; color: var(--t-on-orange);}
:root:root .laranja__links a{font-size: 16px; font-weight: 600;}
:root:root .contato__item span{font-size: 16px; color: var(--t-2);}
:root:root .form__consent label{font-size: 14px; color: var(--t-2);}
:root:root .rodape__desc,:root:root .rodape__col a,:root:root .rodape__contato .contato__item span{font-size: 15px; color: var(--t-2);}
:root:root .rodape__base{font-size: 13px; color: var(--t-2);}
:root:root .rodape__legal{color: var(--t-2);}
:root:root .atende__links a{font-size: 15px; color: var(--t-2);}

/* TEXTURA — grão de papel sobre a grade. Decorativa, atrás do conteúdo (z 1 < .wrap z 2). */
.nec-arte{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.nec-arte::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05  0 0 0 0 .05  0 0 0 0 .05  0 0 0 .9 -.28'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.2;mix-blend-mode:multiply}

/* ═══ Uma peça só ═══ */
#cx-b,#cx-l{position:absolute;left:0;top:0;width:100%;pointer-events:none;overflow:hidden;z-index:1}
#cx-b>*{position:absolute}
.cx-bl{background-size:80px 80px}
.cx-esc{background-color:#0d0d0d;background-image:linear-gradient(rgba(255,255,255,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.027) 1px,transparent 1px)}
.cx-esc2{background-color:#101010;background-image:linear-gradient(rgba(255,255,255,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.027) 1px,transparent 1px)}
.cx-pap{background-color:#f4f3f0;background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px)}
.cx-pre{background:#060606}
.cx-clip{overflow:hidden}
.cx-orb{position:absolute;max-width:none;opacity:var(--pq-int,.72);transform:scale(var(--pq-esc,1));transform-origin:600px 600px}
.cx-mask{position:absolute;inset:0;background:var(--pq-mask-cor,#fff);opacity:var(--pq-mask,.88)}
.cx-mask-grade{position:absolute;inset:0;background-size:80px 80px;background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px)}
.cx-gl{position:absolute;max-width:none}
.cx-grao{position:absolute;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05  0 0 0 0 .05  0 0 0 0 .05  0 0 0 .9 -.28'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:.14;mix-blend-mode:multiply}
.cx-grao--in{inset:0}
.cx-viaj{position:absolute;max-width:none;opacity:0;will-change:transform,opacity}
.nec-arte::after{opacity:.14!important}
#cx-l svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
#cx-l path{fill:none;stroke-linecap:butt}

html.cx-on .pq-decisao__principal{border-left-color:transparent}
html.cx-on .pq-decisao__texto,html.cx-on .pq-decisao__pontos span{color:var(--t-dark-1)}
/* o texto do hero fica acima das barras */
html.arte-on .hero__kicker,html.arte-on .hero__titulo,html.arte-on .hero__abaixo,html.arte-on .hero__stats{position:relative;z-index:2}
.cx-hb{position:absolute;top:0;will-change:transform}
/* respiro: os degraus do laranja não encostam no título */
html.cx-on #contato>.contato__grade{margin-top:72px}

/* rodapé: logo e títulos em branco, textos menores e um tom abaixo, linha final mais aberta */
:root:root:root .rodape__marca,:root:root:root .rodape .label{color:var(--t-1)}
:root:root:root .rodape__desc,:root:root:root .rodape__col a,:root:root:root .rodape__contato .contato__item span{font-size:var(--rd-fs,13px);color:var(--rd-t,rgba(255,255,255,.55));transition:color var(--dur-fast)}
:root:root:root .rodape__col a:hover,:root:root:root .rodape__col a:focus-visible,:root:root:root .rodape__col a:hover span,:root:root:root .rodape__col a:focus-visible span{color:var(--t-1)}
:root:root:root .rodape__col ul{gap:7px}
/* contato alinhado às linhas das outras colunas; o endereço quebra onde o texto já quebra */
:root:root:root .rodape__contato .contato__item span{line-height:20px;padding-block:3px;white-space:pre-line}
:root:root:root .rodape__contato .contato__item .ico{margin-top:6px}
:root:root:root .rodape__base{font-size:12px;letter-spacing:var(--rd-ls,.14em);color:var(--rd-t,rgba(255,255,255,.55))}
:root:root:root .rodape__legal{color:var(--rd-t,rgba(255,255,255,.55))}
:root:root:root .rodape__legal:hover,:root:root:root .rodape__legal:focus-visible{color:var(--t-1)}

/* um eixo esquerdo só, em toda a página */
@media (min-width:1200px){
  .cases__cabeca.wrap,.cases__rodape.wrap,.caseb__interno,.laranja__grade.wrap,.rodape__topo.wrap,.rodape__base.wrap{padding-inline:0}
}

/* ═══ Barras e peças que se movem, em qualquer página ═══ */
.arte-faixas{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.proj-capa .arte-faixas{z-index:2}
.proj-hero>.wrap,.arq-hero>.wrap,.pagina__hero>.wrap,.erro404>.wrap,.orc-hero>.wrap{position:relative;z-index:2}
.projeto,.orc{position:relative}
.arte-fio{position:absolute;z-index:1;width:2px;background:var(--orange);transform:scaleY(0);transform-origin:top;pointer-events:none}
.arte-apagado{transition:color .35s ease}
.proj-bloco__num.arte-acesa,.orc-processo__num.arte-acesa{color:var(--orange)}
html.arte-on .orc-processo__num.arte-apagado:not(.arte-acesa){color:rgba(255,255,255,.22)}
/* a frase do resultado ganha foco uma linha por vez, de leve; o texto é o mesmo, só separado nas linhas que já existiam */
.arte-linha{display:block;filter:blur(calc((1 - var(--p,0))*.07em));opacity:calc(.5 + var(--p,0)*.5)}
@media print{.arte-faixas,.arte-fio{display:none}.arte-linha{filter:none;opacity:1}}

/* anterior / próximo: a barra laranja cruza o link a partir da borda de fora */
.proj-nav__link{position:relative;isolation:isolate}
@media (hover:hover) and (pointer:fine){
  a.proj-nav__link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1)}
  a.proj-nav__link--proximo::before{transform-origin:right}
  a.proj-nav__link:hover::before,a.proj-nav__link:focus-visible::before{transform:scaleX(1)}
  a.proj-nav__link:hover .proj-nav__rotulo,a.proj-nav__link:focus-visible .proj-nav__rotulo{color:var(--t-on-orange)}
  a.proj-nav__link:hover{background:transparent}
}
@media (prefers-reduced-motion:reduce){a.proj-nav__link::before{transition:none}}

/* ═══ Ajustes de leitura das internas: mesma escala e mesmo tom da home ═══ */
:root:root .proj-hero__voltar{font-size:13px;letter-spacing:.2em;color:var(--t-2)}
:root:root .proj-entregas li{font-size:16px;line-height:1.55}
:root:root .proj-tech li{font-size:13px;color:var(--t-2)}
:root:root .proj-visite__dominio{font-size:14px;color:var(--t-2)}
:root:root .arq-filtro{font-size:13px}
:root:root .arq-contagem{font-size:13px;color:var(--t-2)}
:root:root .projeto-card .texto{font-size:16px;color:var(--t-2)}
:root:root .projeto-card__cat,:root:root .projeto-card__go{font-size:13px}

/* orçamento: é documento, então a leitura vem primeiro. Só tamanho e tom; nenhum campo muda de lugar. */
/* o texto da Apresentação não colava no hero: o respiro de cima fica igual ao de baixo, a olho, contando a altura da linha */
:root:root .orc-apresentacao{padding-top:64px}
:root:root .orc-hero__data{font-size:13px;color:var(--t-2)}
:root:root .orc-processo__desc{font-size:16px;color:var(--t-2)}
:root:root .orc-processo__nome,:root:root .orc-card__titulo{font-size:18px}
:root:root .orc-card__texto,:root:root .orc-cards--extenso .orc-card p,:root:root .orc-extras__texto{font-size:16px;color:var(--t-2)}
:root:root .orc-menu-grupo__lista li{font-size:16px}
:root:root .orc-menu-grupo__titulo,:root:root .orc-areas__nome{font-size:14px}
:root:root .orc-tabela{font-size:16.5px}
:root:root .orc-tabela th{font-size:13px;color:var(--t-2)}
:root:root .orc-nota{font-size:15px;color:var(--t-2)}
:root:root .orc-validade{font-size:15px;color:var(--t-2)}
:root:root .orc-linha__prazo{font-size:13px;color:var(--t-2)}

/* ═══ Telas menores: sem canvas nem composição; textura só com CSS, e leitura primeiro ═══ */
@media (max-width:1023px){
  #necessidades::before,#servicos::before,#por-que::before,#como-comecamos::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
  #necessidades::before{background:radial-gradient(circle 240px at 100% 0,rgba(255,68,0,.26),rgba(255,68,0,.07) 55%,transparent 100%)}
  #servicos::before{background:radial-gradient(circle 240px at 100% 200px,rgba(255,68,0,.26),rgba(255,68,0,.07) 55%,transparent 100%)}
  #por-que::before{background:radial-gradient(circle 240px at 100% 46%,rgba(255,122,46,.24),rgba(255,176,137,.08) 55%,transparent 100%)}
  #como-comecamos::before{background:radial-gradient(circle 240px at 100% 100%,rgba(255,68,0,.26),rgba(255,68,0,.07) 55%,transparent 100%)}
}
@media (max-width:767px){
  :root:root .texto,:root:root .necessidades__item p,:root:root .pq-decisao__pontos span{font-size:16px}
  :root:root .texto--lg,:root:root .cases__cabeca .texto,:root:root .laranja__texto{font-size:18px}
  :root:root .pq-decisao__texto{font-size:17px}
  :root:root .caseb__resultado{font-size:16px}
  :root:root .contato__item span{font-size:15px}
  :root:root .hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  :root:root .stat__rotulo{font-size:12px;letter-spacing:.1em;line-height:1.35}
  :root:root .btn{padding:18px 28px}
  :root:root .btn--vazado{padding:16px 26px}
  :root:root .prova-slot{aspect-ratio:2/1}
  :root:root .prova-slot__logo{padding:10px 16px}
  :root:root .necessidades.sec--light .necessidades__item{padding:22px 22px 24px}
  :root:root .necessidades.sec--light .necessidades__num{margin-bottom:12px}
  :root:root .arq-filtro,:root:root .link-seta,:root:root .proj-hero__voltar{min-height:44px;display:inline-flex;align-items:center}
  :root:root .rodape__col a,:root:root .rodape__legal{display:inline-flex;align-items:center;min-height:40px}
  :root:root .contato__item{min-height:44px;align-items:center}
  :root:root .label,:root:root .hero__kicker{letter-spacing:.18em}
  :root:root .proj-bloco__num{font-size:56px}
}

/* topo igual em todas as páginas: o primeiro texto começa na mesma altura e a altura vem do conteúdo */
:root:root .proj-hero,:root:root .arq-hero,:root:root .pagina__hero,:root:root .orc-hero,:root:root .erro404{min-height:0;align-items:flex-start;justify-content:flex-start;padding-top:128px;padding-bottom:64px}

/* projeto (09/11/2026): altura mínima igual à de um título em 2 linhas (Boa Vista), para o topo com vídeo não ficar estreito;
   o título não sai do lugar, só cresce o espaço abaixo. No celular a altura segue vindo do conteúdo. */
@media (min-width:768px){:root:root .proj-hero{min-height:min(78vh,700px)}}

/* orçamento: mais respiro em volta do título, igual em cima (abaixo do menu) e embaixo, para a foto de fundo aparecer */
:root:root .orc-hero{padding-top:196px;padding-bottom:96px}
@media (max-width:767px){:root:root .orc-hero{padding-top:156px;padding-bottom:72px}}

/* seção que já tem recuo lateral não soma o recuo do .wrap: o texto fica no mesmo eixo em todas as páginas */
.proj-hero>.wrap,.proj-visite>.wrap,.proj-cta>.wrap,.proj-nav>.wrap,.proj-ficha>.wrap,.arq-hero>.wrap,.arq-filtros>.wrap,.arq-grade-sec>.wrap,.arq-cta>.wrap,.pagina__hero>.wrap,.erro404>.wrap,.orc-hero>.wrap,.orc-apresentacao>.wrap,.orc-clientes>.wrap,.orc-processo>.wrap,.orc-bloco>.wrap,.orc-invest>.wrap,.orc-extras>.wrap,.orc-download>.wrap,.orc-cta>.wrap,.laranja>.wrap{padding-inline:0}

/* celular: mais largura para o texto e página mais curta */
@media (max-width:767px){
  :root:root .hero{min-height:0;justify-content:flex-start;padding-bottom:64px}
  :root:root .proj-ficha{padding:0}
  :root:root .proj-ficha__col{padding:36px var(--gutter)}
  :root:root .proj-entregas{gap:10px;margin-top:14px}
  :root:root .proj-entregas li{gap:12px;font-size:15px;line-height:1.45}
  :root:root .proj-entregas__ponto{margin-top:7px}
  :root:root .proj-corpo{padding-block:48px}
  :root:root .proj-bloco{gap:14px;padding-block:32px}
  :root:root .proj-visite{padding-block:48px}
  :root:root .projeto-card__corpo{padding:20px 20px 12px}
  :root:root .projeto-card__rodape{padding-inline:20px}
  :root:root .card{padding:24px}
  :root:root .orc-card,:root:root .orc-processo__card{padding:20px 18px}
}

/* menu do celular: painel sólido e véu escuro sobre o site, para ficar claro que está por cima. Abre como cortina, com início suave e fim longo */
.nav__mobile{background:#161616;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:2px solid var(--orange);gap:0;padding:8px var(--gutter) 20px}
.nav__mobile a:not(.btn){display:flex;align-items:center;min-height:60px;font-family:var(--fd);font-weight:900;font-size:26px;letter-spacing:.01em;color:var(--t-1);border-bottom:1px solid rgba(255,255,255,.09)}
.nav__mobile a[aria-current="page"]:not(.btn){color:var(--orange)}
.nav__mobile a.btn{margin-top:20px;color:var(--t-1)}
@keyframes menu-abre{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 -2px 0)}}
@keyframes menu-link{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nav__mobile:not([hidden]){animation:menu-abre .7s cubic-bezier(.45,.05,.2,1) both}
.nav__mobile:not([hidden]) a{animation:menu-link .55s cubic-bezier(.3,0,.2,1) both}
.nav__mobile:not([hidden]) a:nth-child(1){animation-delay:.14s}
.nav__mobile:not([hidden]) a:nth-child(2){animation-delay:.2s}
.nav__mobile:not([hidden]) a:nth-child(3){animation-delay:.26s}
.nav__mobile:not([hidden]) a:nth-child(4){animation-delay:.32s}
.nav__mobile:not([hidden]) a:nth-child(5){animation-delay:.38s}
.nav__mobile.arte-fechando[hidden]{display:flex;pointer-events:none;animation:menu-abre .42s cubic-bezier(.45,.05,.2,1) reverse both}
@keyframes veu-abre{from{opacity:0}to{opacity:1}}
.arte-menu-veu{position:fixed;inset:0;z-index:49;display:none;background:rgba(0,0,0,.72)}
html.arte-menu-aberto .arte-menu-veu{display:block;animation:veu-abre .5s cubic-bezier(.45,.05,.2,1) both}
html.arte-menu-fechando .arte-menu-veu{display:block;pointer-events:none;animation:veu-abre .42s cubic-bezier(.45,.05,.2,1) reverse both}
html.arte-menu-aberto{overflow:hidden}
html.arte-menu-aberto .nav{background:#161616}
@media (prefers-reduced-motion:reduce){.nav__mobile:not([hidden]),.nav__mobile:not([hidden]) a,.nav__mobile.arte-fechando[hidden],html.arte-menu-aberto .arte-menu-veu{animation:none}}