/* ══════════════════════════════════════════════════════════════════════════
   CASTRIANI DIGITAL — tema claro

   A ideia visual: este estúdio faz software que CALCULA. Então a página se
   comporta como um instrumento de precisão — régua fina, numeral
   monoespaçado, espaçamento medido — e não como folheto.

   Claro por decisão, não por moda: o portfólio são capturas de tela dos
   produtos, e fundo claro devolve a cor real delas. Fundo escuro tingiria
   tudo de cinza.

   A cor vem da marca: o azul e o violeta do C em pixels, na mesma ordem
   em que aparecem no degradê da logo. O resto é papel, grafite e uma faixa
   de tinta, usada uma vez, onde o argumento precisa de peso.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --papel:#FBFBFD;            /* o fundo da página */
  --papel-2:#F2F4F9;          /* faixa alternada e superfícies */
  --tinta:#0A0E1A;            /* texto forte e a faixa escura */
  --tinta-2:#39415A;          /* texto corrido */
  --fraco:#7A8399;            /* apoio */
  --linha:#E3E7F0;
  --linha-2:#D3D9E6;
  /* medidas na própria logo: o azul do topo do C e o violeta da base.
     Duas variantes porque a mesma cor não serve nos dois fundos — a de
     fundo claro tem 5,71:1 sobre papel, a de escuro 5,66:1 sobre tinta. */
  --sinal:#1B54EF;            /* azul da marca, sobre papel */
  --sinal-2:#8B2FF0;          /* violeta: a outra ponta do degradê */
  --sinal-esc:#1240BC;
  --sinal-fraco:rgba(27,84,239,.10);
  /* erro não é cor de marca: azul leria como aviso, não como erro */
  --erro:#D93025;
  --erro-fraco:rgba(217,48,37,.09);
  --verde:#0E9F63;
  --branco:#fff;

  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --texto:'Instrument Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --raio:16px;
  --margem:clamp(20px,4.5vw,76px);
  --sombra:0 1px 2px rgba(10,14,26,.04),0 12px 30px -14px rgba(10,14,26,.16);
  --sombra-alta:0 2px 4px rgba(10,14,26,.05),0 34px 70px -28px rgba(10,14,26,.34);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--sinal);color:#fff}
:focus-visible{outline:2px solid var(--sinal);outline-offset:3px;border-radius:5px}

/* ── tipografia ───────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:.98;
  text-wrap:balance}
/* A escala anterior estourava: o h1 tomava a tela inteira e o texto ficava
   com corpo de cartaz. Aqui o título ainda domina, mas sobra página. */
h1{font-size:clamp(36px,6.2vw,82px);line-height:1.02}
h2{font-size:clamp(26px,3.6vw,44px);line-height:1.06}
h3{font-size:clamp(18px,1.7vw,21px);letter-spacing:-.02em;line-height:1.2}

.rot{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sinal);display:inline-block}
.rot.frio{color:var(--fraco)}
p{max-width:64ch;color:var(--tinta-2)}
.grande{font-size:clamp(16.5px,1.55vw,19px);line-height:1.58}

/* ── estrutura ────────────────────────────────────────────────────────────── */
.faixa{padding:clamp(62px,8vw,108px) var(--margem);position:relative}
.faixa-2{background:var(--papel-2)}
.escura{background:var(--tinta);color:#E6EAF3}
.escura h2,.escura h3{color:#fff}
.escura p{color:#A6B0C6}
.escura .rot.frio{color:#6D7891}
.limite{max-width:1320px;margin:0 auto;width:100%}
section[id]{scroll-margin-top:92px}

/* cabeçalho de seção assimétrico: o rótulo à esquerda acompanha a rolagem, o
   título toma a largura útil. Uma pilha centralizada faria a página inteira
   parecer o mesmo bloco repetido cinco vezes. */
.cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);
  gap:clamp(18px,3.4vw,52px);align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.cab-esq{position:sticky;top:100px}
@media(max-width:900px){
  .cab{grid-template-columns:1fr;gap:14px}
  .cab-esq{position:static}
}

/* ══ HOLOFOTE ══════════════════════════════════════════════════════════════
   Um brilho de coral que segue o cursor, de leve. Só acende onde existe
   cursor — some no toque e em quem pediu menos movimento. */
#holofote{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .6s;
  background:radial-gradient(340px circle at var(--hx,50%) var(--hy,50%),
    rgba(27,84,239,.085),transparent 62%)}
body.tem-cursor #holofote{opacity:1}

/* ══ TOPO ══════════════════════════════════════════════════════════════════
   Escuro desde o primeiro pixel, não só depois de rolar. Sobre o hero claro
   ele vira uma barra de instrumento apoiada na página; sobre as faixas
   escuras, funde. Rolando, fecha o vidro e acende o fio embaixo. */
.topo{position:fixed;inset:0 0 auto;z-index:80;padding:15px var(--margem);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  color:#EEF1F8;isolation:isolate;
  background:linear-gradient(180deg,rgba(9,12,22,.94),rgba(9,12,22,.62));
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:background .32s,padding .32s,box-shadow .32s}
.topo.rolou{background:rgba(7,10,18,.93);padding-top:11px;padding-bottom:11px;
  box-shadow:0 16px 38px -24px rgba(0,0,0,.95)}
/* o fio embaixo: aceso de leve sempre, forte quando a barra fecha */
.topo::after{content:'';position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(30,91,255,.6) 28%,
    rgba(169,59,255,.6) 72%,transparent);
  opacity:.42;transition:opacity .32s}
.topo.rolou::after{opacity:1}

/* O lockup da marca: CASTRIANI em cima, DIGITAL embaixo em azul e bem
   espaçado — a mesma proporção da logo, montada em texto vivo em vez de
   imagem, para escalar sem borrar e continuar sendo lida por buscador. */
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.marca-txt{display:grid;line-height:1}
.marca-txt b{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.005em;
  text-transform:uppercase}
.marca-txt em{font-style:normal;font-family:var(--texto);font-weight:600;font-size:8.5px;
  letter-spacing:.40em;text-transform:uppercase;color:#5B90FF;margin-top:4px;
  transition:color .25s}
.marca:hover .marca-txt em{color:#A96BFF}

.topo-nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
/* cada link tem seu próprio fio de LED que corre da esquerda ao passar o
   mouse — o mesmo gesto dos LEDs da marca, em miniatura */
.topo-nav a:not(.btn){text-decoration:none;font-size:14.5px;color:#A9B4CC;
  position:relative;padding-bottom:3px;transition:color .22s}
.topo-nav a:not(.btn)::after{content:'';position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,#4E86FF,#A96BFF);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .38s cubic-bezier(.16,1,.3,1)}
.topo-nav a:not(.btn):hover{color:#fff}
.topo-nav a:not(.btn):hover::after{transform:scaleX(1)}
@media(max-width:780px){.topo-nav a:not(.btn){display:none}}

/* ── botões ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--texto);font-size:15px;font-weight:600;padding:14px 24px;border-radius:100px;
  border:1px solid var(--sinal);background:var(--sinal);color:#fff;
  box-shadow:0 10px 26px -12px rgba(27,84,239,.7);
  transition:box-shadow .3s,border-color .25s,color .25s,background .25s}
/* o brilho que atravessa o botão ao passar o mouse */
.btn::after{content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-102%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.btn:hover::after{transform:translateX(102%)}
.btn:hover{box-shadow:0 16px 38px -12px rgba(27,84,239,.85)}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.btn:hover svg{transform:translateX(3px)}
.btn.vazio{background:transparent;color:var(--tinta);border-color:var(--linha-2);box-shadow:none}
.btn.vazio:hover{border-color:var(--tinta);background:rgba(10,14,26,.03)}
.escura .btn.vazio{color:#fff;border-color:rgba(255,255,255,.24)}
.escura .btn.vazio:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5)}
.btn.pequeno{padding:11px 18px;font-size:14px}

/* ══ HERO ══════════════════════════════════════════════════════════════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding:132px var(--margem) 0;overflow:hidden;z-index:2}
#malha{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* a aurora: três manchas de cor que giram devagar, atrás da malha */
.aurora{position:absolute;inset:-25%;z-index:0;filter:blur(90px);opacity:.6;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;display:block}
.aurora i:nth-child(1){width:52%;height:52%;left:2%;top:8%;background:rgba(27,84,239,.32);
  animation:orbita 26s ease-in-out infinite}
.aurora i:nth-child(2){width:44%;height:44%;right:4%;top:0;background:rgba(139,47,240,.26);
  animation:orbita 32s ease-in-out infinite reverse}
.aurora i:nth-child(3){width:40%;height:40%;left:38%;bottom:2%;background:rgba(78,134,255,.22);
  animation:orbita 38s ease-in-out infinite}
@keyframes orbita{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(9%,-6%) scale(1.13)}
  66%{transform:translate(-7%,7%) scale(.92)}
}
@media(prefers-reduced-motion:reduce){.aurora i{animation:none}}
/* o véu devolve legibilidade ao texto por cima de tudo */
.hero::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,251,253,.7) 0%,rgba(251,251,253,.22) 34%,
    rgba(251,251,253,.86) 82%,var(--papel) 100%)}

.hero-corpo{position:relative;z-index:3;max-width:1320px;margin:0 auto;width:100%;
  padding-bottom:clamp(38px,6vw,72px)}
.hero h1{margin:16px 0 0;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--sinal);white-space:nowrap}
.hero-sub{margin-top:clamp(20px,2.6vw,30px);max-width:52ch}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.4vw,38px)}

/* As palavras do título entram de baixo, uma depois da outra. Só quando o
   script marca .anima — sem ele, o título aparece inteiro e parado. */
.palavra{display:inline-block}
.anima .palavra{opacity:0;transform:translateY(.5em) rotate(2deg);
  animation:palavraEntra .8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--atraso,0s)}
@keyframes palavraEntra{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .anima .palavra{opacity:1;transform:none;animation:none}
}

/* a régua: números que dá para conferir */
.regua{position:relative;z-index:3;max-width:1320px;margin:0 auto;width:100%;
  border-top:1px solid var(--linha);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.regua div{padding:17px 20px 22px;border-right:1px solid var(--linha)}
.regua div:last-child{border-right:none}
.regua b{display:block;font-family:var(--mono);font-size:clamp(20px,1.9vw,25px);
  font-weight:600;letter-spacing:-.03em;color:var(--tinta);font-variant-numeric:tabular-nums}
.regua i{display:block;font-style:normal;font-size:12.5px;color:var(--fraco);
  margin-top:6px;line-height:1.4}
@media(max-width:620px){
  .regua div{border-right:none;border-bottom:1px solid var(--linha)}
  .regua div:last-child{border-bottom:none}
}

/* ══ SERVIÇOS ══════════════════════════════════════════════════════════════ */
.servicos{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.servicos{grid-template-columns:1fr}}
.serv{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(22px,2.6vw,32px);position:relative;overflow:hidden;box-shadow:var(--sombra);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s,border-color .3s}
.serv:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta);border-color:var(--linha-2)}
/* um facho que acende no canto ao passar o mouse */
.serv::before{content:'';position:absolute;width:290px;height:290px;right:-95px;top:-125px;
  border-radius:50%;background:radial-gradient(circle,var(--sinal-fraco),transparent 68%);
  opacity:0;transition:opacity .45s}
.serv:hover::before{opacity:1}
.serv-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--sinal-fraco);margin-bottom:20px;position:relative;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.serv:hover .serv-ic{transform:scale(1.08) rotate(-6deg)}
.serv-ic svg{width:21px;height:21px;fill:none;stroke:var(--sinal);stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.serv h3{margin-bottom:10px;position:relative}
.serv p{font-size:15px;max-width:46ch;position:relative}
.serv ul{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:7px;position:relative}
.serv li{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--fraco);
  border:1px solid var(--linha);border-radius:100px;padding:5px 11px;background:var(--papel)}

/* ══ OBRAS — as capturas de tela ═══════════════════════════════════════════ */
.obras{display:grid;gap:clamp(34px,4.6vw,72px)}
.obra{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(22px,4vw,58px);align-items:center}
.obra.invertida .obra-txt{order:2}
@media(max-width:960px){
  .obra{grid-template-columns:1fr;gap:24px}
  .obra.invertida .obra-txt{order:0}
}
.obra-txt .rot{margin-bottom:12px}
.obra-txt h3{font-size:clamp(21px,2.3vw,28px);margin-bottom:12px}
.obra-txt p{font-size:15.5px}
.obra-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 22px}
.obra-tags li{font-family:var(--mono);font-size:11.5px;color:var(--fraco);
  border:1px solid var(--linha);border-radius:100px;padding:5px 11px}
.escura .obra-tags li{border-color:rgba(255,255,255,.14);color:#93A0BA}
.obra-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:600;font-size:15px;color:var(--sinal);
  border-bottom:1px solid transparent;transition:border-color .25s,gap .25s}
.obra-link:hover{border-bottom-color:var(--sinal);gap:12px}
.obra-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* a moldura de navegador em volta da captura, com inclinação no mouse */
.tela{position:relative;border-radius:14px;overflow:hidden;background:var(--branco);
  border:1px solid var(--linha-2);box-shadow:var(--sombra-alta);
  transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .4s,transform .2s cubic-bezier(.2,.9,.3,1)}
.escura .tela{border-color:rgba(255,255,255,.12)}
.tela-barra{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--papel-2);
  border-bottom:1px solid var(--linha)}
.escura .tela-barra{background:#151B2A;border-bottom-color:rgba(255,255,255,.08)}
.tela-barra i{width:9px;height:9px;border-radius:50%;display:block}
.tela-barra i:nth-child(1){background:#FF5F57}
.tela-barra i:nth-child(2){background:#FEBC2E}
.tela-barra i:nth-child(3){background:#28C840}
.tela-barra span{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--fraco);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tela img{width:100%;height:auto;display:block}
/* o brilho que corre pelo vidro quando o ponteiro passa */
.tela-vidro{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(360px circle at var(--tx,50%) var(--ty,50%),
    rgba(255,255,255,.32),transparent 60%)}
.tela:hover .tela-vidro{opacity:1}

/* ══ O INSTRUMENTO ═════════════════════════════════════════════════════════ */
.inst{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  box-shadow:var(--sombra-alta)}
.escura .inst{background:#111726;border-color:rgba(255,255,255,.1)}
@media(max-width:900px){.inst{grid-template-columns:1fr}}
.inst-esq{padding:clamp(24px,3vw,40px);border-right:1px solid var(--linha)}
.escura .inst-esq{border-right-color:rgba(255,255,255,.08)}
@media(max-width:900px){
  .inst-esq{border-right:none;border-bottom:1px solid var(--linha)}
  .escura .inst-esq{border-bottom-color:rgba(255,255,255,.08)}
}
.inst-dir{padding:clamp(24px,3vw,40px);
  background:linear-gradient(180deg,var(--sinal-fraco),transparent 58%)}
.campo{margin-bottom:22px}
.campo:last-child{margin-bottom:0}
.campo label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fraco);margin-bottom:9px}
.campo input[type=range]{width:100%;accent-color:var(--sinal);height:24px;cursor:pointer}
.campo .valor{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.escura .campo .valor{color:#fff}
.inst-linha{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--linha);font-size:15px}
.escura .inst-linha{border-bottom-color:rgba(255,255,255,.08)}
.inst-linha:last-of-type{border-bottom:none}
.inst-linha span{color:var(--tinta-2)}
.escura .inst-linha span{color:#A6B0C6}
.inst-linha b{font-family:var(--mono);font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.escura .inst-linha b{color:#E6EAF3}
.inst-linha.neg b{color:#FF7A55}
.inst-linha.tot{margin-top:12px;padding-top:16px;border-top:1px solid var(--linha-2)}
.escura .inst-linha.tot{border-top-color:rgba(255,255,255,.16)}
.inst-linha.tot span{font-weight:600}
.escura .inst-linha.tot span{color:#fff}
.inst-linha.tot b{font-size:20px;color:#3FD494}
.inst-nota{margin-top:20px;padding:15px 17px;border-radius:12px;background:rgba(78,134,255,.13);
  border-left:3px solid var(--sinal);font-size:14.5px;line-height:1.55;color:#E6EAF3}

/* ══ ETAPAS ════════════════════════════════════════════════════════════════ */
.etapas{display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(226px,1fr))}
.etapa{padding-top:22px;border-top:2px solid var(--linha-2);position:relative}
.etapa::after{content:'';position:absolute;left:0;top:-2px;width:0;height:2px;
  background:var(--sinal);transition:width .55s cubic-bezier(.16,1,.3,1)}
.etapa:hover::after{width:100%}
.etapa b{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  color:var(--sinal);margin-bottom:14px}
.etapa h3{margin-bottom:8px;font-size:18px}
.etapa p{font-size:14.5px}

/* ══ CONTATO ═══════════════════════════════════════════════════════════════ */
.contato{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:900px){.contato{grid-template-columns:1fr}}

.form-cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(24px,3.2vw,40px);box-shadow:var(--sombra-alta)}
.form{display:grid;gap:17px}
.f{display:grid;gap:8px}
.f label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fraco)}
.f input,.f textarea,.f select{width:100%;font-family:var(--texto);font-size:16px;
  padding:14px 16px;border-radius:12px;border:1px solid var(--linha-2);background:var(--papel);
  color:var(--tinta);transition:border-color .2s,box-shadow .2s,background .2s}
.f textarea{min-height:132px;resize:vertical;line-height:1.55}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--sinal);
  background:var(--branco);box-shadow:0 0 0 4px var(--sinal-fraco)}
.f input::placeholder,.f textarea::placeholder{color:var(--fraco)}
.f-dupla{display:grid;grid-template-columns:1fr 1fr;gap:17px}
@media(max-width:560px){.f-dupla{grid-template-columns:1fr}}
.form-resposta{font-size:15px;line-height:1.55;padding:14px 16px;border-radius:12px;display:none}
.form-resposta.ok{display:block;background:rgba(14,159,99,.09);border:1px solid rgba(14,159,99,.3);
  color:#0A7A4C}
.form-resposta.erro{display:block;background:var(--erro-fraco);
  border:1px solid rgba(217,48,37,.3);color:#A81E14}
.form-resposta a{color:inherit;font-weight:600}

.email-cartao{border:1px solid var(--linha);border-radius:var(--raio);
  padding:clamp(22px,3vw,32px);background:var(--papel-2)}
.email-cartao .rot{display:block;margin-bottom:12px}
.email-grande{font-family:var(--mono);font-size:clamp(14px,1.7vw,18px);text-decoration:none;
  word-break:break-all;display:inline-block;border-bottom:1px solid var(--linha-2);
  padding-bottom:4px;transition:border-color .2s,color .2s;color:var(--tinta)}
.email-grande:hover{border-bottom-color:var(--sinal);color:var(--sinal)}

/* ══ RODAPÉ ════════════════════════════════════════════════════════════════
   Escuro e com fundo vivo: duas manchas de cor girando devagar atrás, no
   mesmo ritmo da aurora do hero. Fecha a página em vez de só assinar. */
footer{position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(48px,6vw,80px) var(--margem) clamp(24px,3vw,34px);
  border-top:1px solid rgba(255,255,255,.09)}
.rod-aurora{position:absolute;inset:-40% -10%;z-index:0;filter:blur(90px);opacity:.5;
  pointer-events:none}
.rod-aurora i{position:absolute;border-radius:50%;display:block}
.rod-aurora i:nth-child(1){width:46%;height:120%;left:-4%;top:-10%;
  background:rgba(30,91,255,.42);animation:orbita 30s ease-in-out infinite}
.rod-aurora i:nth-child(2){width:40%;height:110%;right:2%;top:0;
  background:rgba(139,47,240,.34);animation:orbita 36s ease-in-out infinite reverse}
@media(prefers-reduced-motion:reduce){.rod-aurora i{animation:none}}

.rod-grade{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.2fr);
  gap:clamp(26px,3.4vw,52px);align-items:start}
@media(max-width:1000px){.rod-grade{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rod-grade{grid-template-columns:1fr;gap:30px}}

.rod-marca{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.rod-marca img{width:58px;height:58px;flex:none;
  filter:drop-shadow(0 10px 22px rgba(30,91,255,.5));
  animation:flutua 5.5s ease-in-out infinite}
.marca-txt.grande b{font-size:23px;color:#fff}
.marca-txt.grande em{font-size:10.5px;letter-spacing:.46em;margin-top:6px}
/* o lema que vem na própria logo */
.rod-lema{display:block;margin-top:13px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.19em;text-transform:uppercase;color:#7D8AA5}
.rod-marca p{font-size:14.5px;line-height:1.55;max-width:38ch;color:#95A1BA;margin-top:12px}

.rod-bloco .rot{display:block;margin-bottom:15px}
.rod-bloco ul{list-style:none;display:grid;gap:10px}

/* as quatro frentes repetem o LED da marca do hero: mesma cor, mesmo pulso */
.rod-leds li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#B9C3D8}
.rod-leds i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--sinal);
  box-shadow:0 0 0 3px rgba(30,91,255,.18),0 0 12px 2px rgba(169,59,255,.7);
  animation:rodLed 3.2s ease-in-out infinite}
.rod-leds li:nth-child(2) i{animation-delay:.8s}
.rod-leds li:nth-child(3) i{animation-delay:1.6s}
.rod-leds li:nth-child(4) i{animation-delay:2.4s}
@keyframes rodLed{
  0%,100%{opacity:.5;box-shadow:0 0 0 2px rgba(30,91,255,.12),0 0 8px 1px rgba(169,59,255,.45)}
  50%{opacity:1;box-shadow:0 0 0 4px rgba(30,91,255,.22),0 0 15px 3px rgba(169,59,255,.85)}
}
@media(prefers-reduced-motion:reduce){.rod-leds i{animation:none;opacity:1}}

.rod-links a{text-decoration:none;font-size:14.5px;color:#B9C3D8;position:relative;
  display:inline-block;transition:color .22s,transform .3s cubic-bezier(.16,1,.3,1)}
.rod-links a::before{content:'';position:absolute;left:-13px;top:50%;width:6px;height:1px;
  background:var(--sinal);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.rod-links a:hover{color:#fff;transform:translateX(5px)}
.rod-links a:hover::before{transform:scaleX(1)}

.rod-fala{display:grid;gap:14px;justify-items:start}
.rod-fala .email-grande{color:#fff;border-bottom-color:rgba(255,255,255,.22);font-size:14.5px}
.rod-fala .email-grande:hover{color:var(--sinal);border-bottom-color:var(--sinal)}

.rod-fim{position:relative;z-index:1;margin-top:clamp(34px,4vw,52px);
  padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:13px;color:#7D8AA5}
.rod-lugar{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

/* ══ ENTRADA ═══════════════════════════════════════════════════════════════
   Tudo nasce VISÍVEL. Só depois de o script marcar .revelar é que os blocos
   partem de baixo — sem ele, a página aparece inteira, parada, e legível. */
.revelar{opacity:0;transform:translateY(24px)}
.revelar.dentro{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--atraso,0s)}
@media(prefers-reduced-motion:reduce){
  .revelar{opacity:1;transform:none}
  .serv:hover{transform:none}
  .tela{transform:none!important}
  .btn::after{display:none}
}

/* ══ CELULAR ═══════════════════════════════════════════════════════════════ */
.so-estreito{display:none}
@media(max-width:600px){
  .so-largo{display:none}
  .so-estreito{display:inline}
  .topo{padding:12px var(--margem)}
  .marca{gap:9px}
  .marca-txt b{font-size:15px}
  .marca-txt em{font-size:7.5px;letter-spacing:.34em}
  .btn{min-height:46px}
  #holofote{display:none}
}
@media(max-width:380px){.marca-txt b{font-size:13.5px}.marca-txt em{letter-spacing:.28em}}

/* ══════════════════════════════════════════════════════════════════════════
   FAIXAS ESCURAS

   A página alterna claro e escuro a cada seção. Não é enfeite: cada troca
   marca uma virada de assunto, e o olho descansa entre uma e outra. Aqui
   ficam os ajustes que uma faixa escura pede — o que no claro é sombra, no
   escuro precisa ser borda; o que era branco, vira grafite levantado.
   ══════════════════════════════════════════════════════════════════════════ */
.escura{background:var(--tinta);color:#E6EAF3;
  --linha:rgba(255,255,255,.09);
  --linha-2:rgba(255,255,255,.16);
  --branco:#131A2B;                 /* a "superfície branca" vira grafite */
  --papel:#0A0E1A;
  --papel-2:#111726;
  --fraco:#7D8AA5;
  --tinta-2:#A6B0C6;
  --sinal:#4E86FF;                  /* o azul da marca clareia no escuro */
  --sinal-2:#A96BFF;
  --sinal-fraco:rgba(78,134,255,.14);
  --sombra:0 1px 0 rgba(255,255,255,.04) inset,0 16px 34px -20px rgba(0,0,0,.8);
  --sombra-alta:0 1px 0 rgba(255,255,255,.05) inset,0 40px 80px -34px rgba(0,0,0,.9)}
.escura h2,.escura h3{color:#fff}
.escura p{color:#A6B0C6}
.escura .serv{background:#111726;border-color:rgba(255,255,255,.09)}
.escura .serv:hover{border-color:rgba(255,255,255,.2)}
.escura .serv li{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);color:#8C99B3}
.escura .serv-ic{background:rgba(78,134,255,.16)}
.escura .etapa{border-top-color:rgba(255,255,255,.16)}
.escura .email-cartao{background:#111726;border-color:rgba(255,255,255,.09)}
.escura .email-grande{color:#fff;border-bottom-color:rgba(255,255,255,.2)}
/* o cartão do formulário fica CLARO mesmo na faixa escura: é o ponto para
   onde a página inteira empurra, e ele tem de saltar */
/* superfície clara dentro da faixa escura: precisa devolver os tokens de
   fundo claro, senão o botão usa o azul clareado e perde contraste com o
   texto branco (3,29:1). Com o token claro volta a 5,71:1. */
.escura .form-cartao{background:#fff;color:var(--tinta);
  --sinal:#1B54EF;--sinal-2:#8B2FF0;--sinal-fraco:rgba(27,84,239,.10)}
.escura .form-cartao .f label{color:#7A8399}
.escura .form-cartao .f input,
.escura .form-cartao .f textarea,
.escura .form-cartao .f select{background:#F7F8FC;border-color:#D3D9E6;color:#0A0E1A}
.escura .form-cartao .f input:focus,
.escura .form-cartao .f textarea:focus,
.escura .form-cartao .f select:focus{background:#fff;border-color:var(--sinal)}
.escura .form-cartao .f input::placeholder,
.escura .form-cartao .f textarea::placeholder{color:#9AA3B7}

/* ══ A LOGO 3D ═════════════════════════════════════════════════════════════
   Renderizada, não desenhada. Flutua de leve o tempo todo e mergulha quando
   o ponteiro chega — o mesmo gesto de um objeto que se pega na mão. */
.marca img{width:34px;height:34px;flex:none;display:block;
  filter:drop-shadow(0 5px 12px rgba(30,91,255,.5));
  animation:flutua 4.5s ease-in-out infinite;
  transition:transform .5s cubic-bezier(.16,1,.3,1),filter .4s}
.marca:hover img{transform:rotate(-12deg) scale(1.1);
  filter:drop-shadow(0 8px 20px rgba(139,47,240,.62))}
@keyframes flutua{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .marca img{animation:none}
  .marca:hover img{transform:none}
}

/* ══ AS TELAS ANIMAM AO ENTRAR ═════════════════════════════════════════════
   Chegam ligeiramente giradas e menores, e assentam quando entram na tela —
   como uma peça que é colocada na mesa. Depois disso a inclinação passa a
   responder ao ponteiro, sem conflito: uma coisa termina antes da outra
   começar. */
.tela{opacity:0;transform:perspective(1200px) rotateX(9deg) scale(.955) translateY(28px)}
.tela.assentou{opacity:1;transform:perspective(1200px) rotateX(0) scale(1) translateY(0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
/* a imagem de dentro desliza devagar enquanto a página rola: dá profundidade
   sem tirar a foto do lugar */
.tela img{transform:translateY(var(--desliza,0px)) scale(1.045);
  transition:transform .1s linear}
@media(prefers-reduced-motion:reduce){
  .tela{opacity:1;transform:none}
  .tela img{transform:none}
}

/* ══ A LINHA QUE ACOMPANHA A ROLAGEM ═══════════════════════════════════════
   Um fio de coral no alto da página que mostra quanto falta. Custa quase
   nada e diz, o tempo todo, onde a pessoa está. */
#progresso{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:0 50%;background:linear-gradient(90deg,var(--sinal),var(--sinal-2));
  z-index:90;pointer-events:none}

/* ══════════════════════════════════════════════════════════════════════════
   A MARCA NO HERO

   O espaço à direita do título estava vazio. Aqui entra a marca em 3D, do
   tamanho de um objeto: dois anéis girando em sentidos contrários como um
   giroscópio, um halo pulsando atrás, e a peça flutuando no meio. Inclina na
   direção do ponteiro (ver pagina.js).

   Fica atrás do texto na ordem de pilha e some abaixo de 1080px, onde o
   título ocupa a largura toda e ela viraria estorvo.
   ══════════════════════════════════════════════════════════════════════════ */
/* z-index 3: acima do véu do hero (que é 2), senão a peça sai lavada. Fica
   no mesmo nível do texto, mas nunca por cima dele — a posição à direita já
   garante isso, e o pointer-events:none deixa o clique passar. */
/* z-index 3: acima do véu do hero (que é 2), senão a peça sai lavada. Fica
   no mesmo nível do texto, mas nunca por cima dele — a posição à direita já
   garante isso, e o pointer-events:none deixa o clique passar. */
.marca-hero{position:absolute;z-index:3;right:clamp(-40px,2vw,60px);top:50%;
  width:clamp(340px,33vw,500px);aspect-ratio:1;transform:translateY(-46%);
  display:grid;place-items:center;pointer-events:none}

/* a peça: azul com miolo preto e fio de luz laranja na borda. A sombra
   projetada repete as duas cores — azul larga e difusa embaixo, laranja
   curta e quente colada na peça — para o brilho da borda parecer que sai
   do próprio material e não de um filtro por cima. */
.marca-hero img{width:56%;height:auto;position:relative;z-index:3;grid-area:1/1;
  filter:drop-shadow(0 32px 62px rgba(24,74,214,.42)) drop-shadow(0 6px 18px rgba(139,47,240,.36));
  animation:mhFlutua 7s ease-in-out infinite;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
@keyframes mhFlutua{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-16px) rotate(2deg)}
}

/* o halo: uma luz que respira atrás da peça. Azul no núcleo, laranja na
   franja — a mesma mistura da logo, desfocada. */
.mh-halo{position:absolute;inset:14%;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(30,91,255,.34),rgba(139,47,240,.22) 52%,transparent 72%);
  filter:blur(30px);animation:mhPulsa 5.5s ease-in-out infinite}
@keyframes mhPulsa{
  0%,100%{opacity:.60;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}

/* ── O CIRCUITO ──────────────────────────────────────────────────────────
   Tudo no mesmo SVG para fio, ponto e nome escalarem juntos. O SVG cobre a
   caixa inteira e fica ATRÁS da peça (z-index 2 contra 3): os LEDs estão
   nas diagonais, onde a logo é transparente, então nada some. */
.mh-circuito{position:absolute;inset:0;width:100%;height:100%;z-index:2;grid-area:1/1;
  overflow:visible}

/* as órbitas: a elipse já nasce achatada; girar o grupo é o que faz ela
   varrer o espaço e ler como órbita, não como desenho de círculo */
.mh-orb{transform-origin:280px 280px;animation:mhGira 22s linear infinite}
.mh-orb.dois{animation:mhGira 34s linear reverse infinite}
@keyframes mhGira{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* os fios: o tracejado corre de dentro para fora — sai da marca, chega no
   objetivo. Cada um sai meio segundo depois do anterior, senão os quatro
   pulsam em bloco e o efeito vira pisca-pisca. */
.mh-fios line{opacity:.72;animation:mhPulso 2.6s linear infinite;
  animation-delay:calc(var(--i) * -.65s)}
@keyframes mhPulso{from{stroke-dashoffset:42}to{stroke-dashoffset:0}}

/* os LEDs: miolo laranja aceso sobre halo azul que respira */
.mh-leds .led{fill:#A93BFF;stroke:#F0E6FF;stroke-width:1.4}
.mh-leds .halo{fill:rgba(30,91,255,.16);stroke:rgba(30,91,255,.45);stroke-width:1;
  transform-box:fill-box;transform-origin:center;
  animation:mhLed 3.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * .8s)}
@keyframes mhLed{
  0%,100%{opacity:.45;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.18)}
}

/* os nomes ficam fora do aro e sempre na horizontal — por isso o aro dos
   LEDs não gira: nome de cabeça para baixo não se lê. */
.mh-nomes text{fill:var(--tinta);opacity:.68;font-size:19px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em}

@media(max-width:1080px){.marca-hero{display:none}}
@media(prefers-reduced-motion:reduce){
  .marca-hero img,.mh-halo,.mh-orb,.mh-fios line,.mh-leds .halo{animation:none}
}

/* com a marca à direita, o texto do hero cede largura para não passar por
   baixo dela */
@media(min-width:1081px){
  .hero h1{max-width:13ch}
  .hero-sub{max-width:46ch}
}

/* ══════════════════════════════════════════════════════════════════════════
   A COSTURA — o efeito de passagem entre as seções

   A página troca de claro para escuro cinco vezes. Cada emenda ganha um fio
   fino (coral de um lado, azul do outro) e, na primeira vez que a seção
   entra na tela, um pulso de luz corre por ele — a mesma linguagem dos LEDs
   da marca, agora costurando as seções umas nas outras.

   O pulso anda por background-position e não por transform: fundo nunca
   transborda a caixa, então não há como criar rolagem lateral. E roda UMA
   vez por seção (a classe .passou não sai), em vez de piscar para sempre.
   ══════════════════════════════════════════════════════════════════════════ */
.faixa::before,footer::before{content:'';position:absolute;inset:0 0 auto;height:1px;z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,rgba(30,91,255,.5) 26%,
    rgba(169,59,255,.5) 74%,transparent 96%)}
.faixa::after,footer::after{content:'';position:absolute;inset:-1px 0 auto;height:3px;z-index:5;
  pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 42%,var(--sinal) 50%,
    rgba(255,255,255,.95) 58%,transparent);
  background-size:320px 100%;background-repeat:no-repeat;background-position-x:-320px}
.faixa.passou::after,footer.passou::after{
  animation:costura 1.7s cubic-bezier(.34,.72,.28,1) .12s both}
@keyframes costura{
  0%{opacity:0;background-position-x:-320px}
  9%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;background-position-x:100vw}
}

/* ══ AS FAIXAS ESCURAS GANHAM PROFUNDIDADE ═════════════════════════════════
   Preto chapado é morto. Duas manchas de cor nos cantos e um grão finíssimo
   por cima dão a textura de um fundo fotografado. Ambos são estáticos: o
   custo é zero e o ganho de vida é o mesmo. */
.faixa.escura{
  background-color:var(--tinta);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E"),
    radial-gradient(72% 58% at 10% 0%,rgba(30,91,255,.17),transparent 62%),
    radial-gradient(64% 54% at 92% 100%,rgba(139,47,240,.16),transparent 64%);
  background-size:150px 150px,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat}
.faixa.escura::after{z-index:6}

/* ══ TÍTULOS DE SEÇÃO ENTRAM PALAVRA POR PALAVRA ═══════════════════════════
   O h1 do hero já fazia isso. Agora os h2 também, mas só quando a seção
   chega — cascata na hora certa vale mais que cascata na hora do load.
   Quando o título cascateia, o bloco em volta só aparece (sem subir), senão
   são dois movimentos disputando a mesma atenção. */
.cab.com-palavras.revelar:not(.dentro){transform:none}

/* ══ O RÓTULO ACENDE ═══════════════════════════════════════════════════════
   Um brilho que atravessa o rótulo monoespaçado quando a seção entra. É um
   elemento de 11px: custa nada e é o detalhe que se nota sem saber o quê. */
.dentro>.rot,.dentro .rot{background:linear-gradient(90deg,currentColor 0%,currentColor 36%,
    #fff 48%,currentColor 60%,currentColor 100%);
  background-size:280% 100%;background-position-x:120%;
  -webkit-background-clip:text;background-clip:text;
  animation:rotBrilho 1.5s ease-out .35s both}
@keyframes rotBrilho{
  0%{background-position-x:120%;-webkit-text-fill-color:transparent}
  99%{-webkit-text-fill-color:transparent}
  100%{background-position-x:-60%;-webkit-text-fill-color:currentColor}
}

/* ══ AS OBRAS ENTRAM PELO LADO ═════════════════════════════════════════════
   Alternando com o próprio layout: a que tem o texto à esquerda vem da
   esquerda. O movimento passa a explicar a composição em vez de enfeitá-la. */
.obra.revelar:not(.dentro){transform:translateY(20px) translateX(-30px)}
.obra.invertida.revelar:not(.dentro){transform:translateY(20px) translateX(30px)}
.serv.revelar:not(.dentro){transform:translateY(22px) scale(.975)}
.etapa.revelar:not(.dentro){transform:translateY(26px)}

/* ══ A BORDA DO CARTÃO ACENDE ══════════════════════════════════════════════
   Um anel de luz que gira na borda do cartão enquanto o ponteiro está em
   cima. Parado, não existe — a animação só roda no hover, então o custo em
   repouso é zero. */
@property --giro{syntax:'<angle>';initial-value:0deg;inherits:false}
.serv::after{content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:0;
  padding:1px;opacity:0;transition:opacity .4s;pointer-events:none;
  background:conic-gradient(from var(--giro),transparent 0deg,var(--sinal) 55deg,
    var(--sinal-2) 120deg,transparent 200deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}
.serv:hover::after{opacity:1;animation:giraBorda 3.4s linear infinite}
@keyframes giraBorda{to{--giro:360deg}}
.serv>*{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .faixa.passou::after,footer.passou::after{animation:none;opacity:0}
  .dentro>.rot,.dentro .rot{animation:none;background:none;-webkit-text-fill-color:currentColor}
  .serv:hover::after{animation:none}
  .obra.revelar:not(.dentro),.obra.invertida.revelar:not(.dentro),
  .serv.revelar:not(.dentro),.etapa.revelar:not(.dentro){transform:none}
}