/* ============================================================
   DAidea Soluções Inteligentes — estilos globais
   Cores extraídas do logo real. Não trocar sem conferir o logo.
   ============================================================ */

/* Switzer (Fontshare / Indian Type Foundry, licença ITF FFL: uso comercial e
   hospedagem própria liberados; NÃO pode modificar nem recortar o arquivo).
   Escolhida em 18/09 a partir do noho.ink. Licença em docs/licencas/. */
@font-face{font-family:Switzer;src:url(assets/fontes/Switzer-Variable.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(assets/fontes/Switzer-VariableItalic.woff2) format("woff2");
  font-weight:100 900;font-style:italic;font-display:swap}
/* reserva com as MESMAS medidas da Switzer (calculadas com fontTools): enquanto
   ela não chega, a Arial ocupa o mesmo espaço e o texto não pula na troca */
@font-face{font-family:"Switzer Reserva";src:local("Arial");size-adjust:100.6%;
  ascent-override:97.4%;descent-override:24.8%;line-gap-override:8.9%}

:root{
  /* tipografia — trocar aqui troca o site inteiro */
  --fonte-titulo:Switzer,"Switzer Reserva",system-ui,sans-serif;
  --fonte-texto:Switzer,"Switzer Reserva",system-ui,sans-serif;

  /* marca */
  --verde-fundo:#0A3D2A;   /* fundo escuro (derivado do verde da marca) */
  --verde-marca:#0C603C;   /* verde do "idea" no logo */
  --verde-folha:#84C048;   /* verde do "Da" e das folhas — cor de ação */
  --verde-folha-hover:#95d152;
  --creme:#F6F4EE;         /* fundo claro quente */
  --tinta:#14201A;         /* texto — nunca preto puro */
  --tinta-fraca:#4a5a51;   /* texto secundário (contraste 7:1 no creme) */
  --linha:rgba(255,255,255,.16);
  --linha-clara:rgba(20,32,26,.13);

  /* ritmo de espaçamento — múltiplos de 4 */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px; --e5:48px; --e6:64px; --e7:96px;

  --raio:20px;
  --largura:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
/* com o Lenis ligado, o "smooth" nativo briga com ele (cada passo vira outra
   animação) — CSS recomendado pelo próprio Lenis */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
body{
  margin:0;
  font-family:var(--fonte-texto);
  font-size:16px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--fonte-titulo);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--verde-folha);outline-offset:3px;border-radius:4px}

.envolt{width:min(var(--largura),calc(100% - 48px));margin-inline:auto}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:99px;
  text-decoration:none;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-verde{background:var(--verde-folha);color:#0A3D2A}
.btn-verde:hover{background:var(--verde-folha-hover)}
.btn-escuro{background:var(--verde-marca);color:#fff}
.btn-escuro:hover{background:#0e7047}
.btn-linha{border-color:rgba(255,255,255,.4);color:#fff}
.btn-linha:hover{background:rgba(255,255,255,.1)}
.btn-linha-esc{border-color:var(--linha-clara);color:var(--tinta);background:#fff}
.btn-linha-esc:hover{background:#fff;border-color:var(--verde-marca)}

/* ---------- navegação (pill flutuante) ---------- */
.nav{
  /* centralizar com left:50% + translate limita a largura automática à metade
     da tela (no celular o menu ficava estreito e o botão vazava pra fora) */
  position:fixed;top:16px;left:0;right:0;margin-inline:auto;z-index:50;
  display:flex;align-items:center;gap:6px;
  /* branca de verdade: com transparência o verde do fundo subia e ela virava
     creme. Sem vidro também é um efeito a menos pra pintar em cada rolagem. */
  background:#fff;
  border:1px solid rgba(20,32,26,.08);border-radius:99px;
  box-shadow:0 10px 34px rgba(6,32,22,.22);
  /* largura do CONTEÚDO, não da página: a pílula larga deixava um vazio
     branco enorme entre a logo e os links */
  padding:5px 6px 5px 16px;width:fit-content;max-width:calc(100% - 32px);
}
/* Acompanha a rolagem. Antes era position:absolute (presa ao TOPO DA PÁGINA):
   lá embaixo a pessoa tinha que rolar tudo de volta pra achar o menu. Agora é
   fixa na tela, some quando a pessoa desce e volta assim que ela sobe — o
   script no fim do _layout.html põe/tira .nav-oculta e .nav-solta. */
.nav{transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
/* sobe a própria altura + os 16px de folga + o alcance da sombra, senão sobra
   uma risca de sombra colada na borda de cima da tela */
.nav.nav-oculta{transform:translateY(calc(-100% - 90px))}
/* depois de rolar passa conteúdo por baixo: a pílula precisa de borda e sombra
   pra não se perder em seção branca (ganha da regra .nav inline da home v2) */
.nav.nav-solta{box-shadow:0 8px 26px rgba(6,32,22,.16);border-color:rgba(20,32,26,.12)}
@media (prefers-reduced-motion:reduce){.nav{transition:none}}
.nav > a:first-child{display:inline-flex;align-items:center;min-height:40px;flex:none}
/* só o símbolo (a lâmpada), escolha do Allan em 22/09 — o logo inteiro a 30px
   deixava o "Soluções Inteligentes" ilegível. 42px cabe dentro da pílula sem
   aumentar a altura do menu (o botão de orçamento já tem 44px). */
.nav img{height:42px;width:auto}
.nav-links{display:flex;gap:4px;margin-left:var(--e4)}
.nav-links a{
  text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;
  padding:8px 13px;border-radius:99px;min-height:40px;
  display:inline-flex;align-items:center;color:var(--tinta);
}
.nav-links a:hover{background:rgba(12,96,60,.09)}
.nav-links a[aria-current="page"]{background:rgba(12,96,60,.11);color:var(--verde-marca)}
.nav-cta{background:var(--verde-folha);color:#0A3D2A !important;font-weight:700;padding:10px 18px !important;
  white-space:nowrap}
.nav-cta:hover{background:var(--verde-folha-hover) !important}

.nav-mob{display:none;margin-left:auto;align-items:center;gap:var(--e1)}
.nav-mob .nav-cta{text-decoration:none;font-size:14px;border-radius:99px;min-height:44px;
  display:inline-flex;align-items:center}
.burger{
  width:40px;height:40px;border-radius:99px;border:1px solid rgba(20,32,26,.14);
  background:transparent;color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.burger:hover{background:rgba(12,96,60,.09)}

/* gaveta do menu mobile */
.gaveta{
  position:fixed;inset:0;z-index:60;background:var(--verde-fundo);
  display:flex;flex-direction:column;padding:var(--e3);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.gaveta[data-aberta="true"]{transform:translateY(0)}
.gaveta-topo{display:flex;align-items:center;margin-bottom:var(--e4)}
.gaveta-topo img{height:38px;width:auto}
.gaveta-fechar{
  margin-left:auto;width:44px;height:44px;border-radius:99px;
  border:1px solid var(--linha);background:transparent;color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.gaveta nav{display:flex;flex-direction:column;gap:2px}
.gaveta nav a{
  color:#fff;text-decoration:none;font-family:var(--fonte-titulo);font-size:26px;font-weight:600;
  padding:14px 0;border-bottom:1px solid var(--linha);min-height:56px;display:flex;align-items:center;
}
.gaveta .btn{margin-top:var(--e4)}

/* ---------- rodapé ---------- */
.rodape{background:var(--verde-fundo);color:#fff;padding:var(--e7) 0 var(--e4)}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--e5);margin-bottom:var(--e6)}
.rodape img{height:44px;width:auto;margin-bottom:var(--e2)}
.rodape-titulo{font-size:15px;font-family:var(--fonte-texto);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--verde-folha);margin:0 0 var(--e2)}
.rodape ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.rodape ul a{color:#cfe0d3;text-decoration:none;font-size:14.5px;padding:11px 0;
  min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.rodape ul a:hover{color:#fff;text-decoration:underline}
.rodape-sobre{color:#cfe0d3;font-size:14.5px;line-height:1.65;max-width:34ch}
.rodape-base{border-top:1px solid var(--linha);padding-top:var(--e3);
  display:flex;gap:var(--e3);flex-wrap:wrap;align-items:center;color:#9fb5a7;font-size:13.5px}
.rodape-base a{color:#9fb5a7}
.redes{display:flex;gap:var(--e1);margin-top:var(--e2)}
.redes a{
  width:44px;height:44px;border-radius:99px;border:1px solid var(--linha);
  display:inline-flex;align-items:center;justify-content:center;color:#cfe0d3;
}
.redes a:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- bloco de chamada com textura de folhagem ----------
   Usado no fim da home e de cada página interna. A foto é fundo, não conteúdo:
   entra com alt vazio e aria-hidden, pra leitor de tela ignorar. */
.cta-textura{position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:var(--e7) 0;isolation:isolate}
.cta-textura > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-textura::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,48,33,.60) 0%,rgba(8,48,33,.78) 100%)}
.cta-textura h2{font-size:clamp(30px,4.4vw,52px);margin:0 auto var(--e2);max-width:20ch;
  text-shadow:0 2px 30px rgba(6,38,26,.45)}
.cta-textura p{font-size:17px;line-height:1.6;max-width:50ch;margin:0 auto var(--e4);
  color:rgba(255,255,255,.94)}

/* ---------- abertura (só na primeira página da visita) ----------
   Mesma coreografia da Marcussi & Mazoti, traduzida pra marca da DAidea:
     0,15s  a lâmpada surge (cresce e sobe um pouco)
     0,70s  o nome se escreve da esquerda pra direita, como assinatura
     2,40s  o conjunto respira pra cima
     2,95s  a cortina sobe e o título da home entra JUNTO (evento
            daidea:abertura-saindo, ouvido pelo movimento.js)
   REGRAS QUE NÃO SE NEGOCIAM:
   1. Qualquer toque, tecla ou rolagem pula direto pra saída.
   2. Se o JS morrer, a animação "ab-seguro" tira a tela aos 4,6s sozinha.
   3. Não existe pra quem pediu menos movimento.
   4. As duas camadas do logo são VETOR e entram como imagem de fundo:
      fundo de elemento com display:none não é baixado. */
.abertura{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;
  background:var(--verde-fundo);pointer-events:none;
}
html.com-abertura{overflow:hidden}
html.com-abertura .abertura{
  display:flex;
  animation:ab-seguro .6s ease 4.6s forwards;
}
.ab-lockup{position:relative;width:min(74vw,420px);aspect-ratio:1545/994}
.ab-emblema,.ab-nome{position:absolute;inset:0;background:center/contain no-repeat}
html.com-abertura .ab-emblema{
  background-image:url(assets/logo-emblema.svg);
  opacity:0;transform-origin:55% 30%;
  animation:ab-emblema .85s cubic-bezier(.215,.61,.355,1) .15s forwards;
}
html.com-abertura .ab-nome{
  background-image:url(assets/logo-nome.svg);
  clip-path:inset(0 100% 0 0);
  animation:ab-nome 1.3s cubic-bezier(.645,.045,.355,1) .7s forwards;
}
html.com-abertura .ab-lockup{
  animation:ab-respira .5s cubic-bezier(.455,.03,.515,.955) 2.4s forwards;
}

/* saída: a cortina sobe por cima (curva forte, igual à da Marcussi) */
html.abertura-saindo .abertura{
  transform:translateY(-100%);
  transition:transform .95s cubic-bezier(.86,0,.07,1);
}
/* a pessoa mexeu: completa o logo na hora e sai rápido */
html.abertura-pula .abertura{transition-duration:.42s}
html.abertura-pula .ab-emblema,
html.abertura-pula .ab-nome{animation-duration:.01s;animation-delay:0s}

@keyframes ab-emblema{
  from{opacity:0;transform:translateY(16px) scale(.8)}
  to{opacity:1;transform:none}
}
@keyframes ab-nome{to{clip-path:inset(0 0 0 0)}}
@keyframes ab-respira{to{transform:translateY(-8px)}}
@keyframes ab-seguro{to{transform:translateY(-100%);visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  html.com-abertura .abertura{display:none !important}
  html.com-abertura{overflow:visible}
}

/* marcador de dado ainda não confirmado — nunca inventar.
   Padrão para fundo claro; a variante clara vem depois, para fundo escuro. */
.confirmar{color:#6b5010;background:#fff8e6;font-size:13px;font-weight:500;
  border:1px dashed #d9b25c;border-radius:6px;padding:4px 10px;display:inline-block}
.rodape .confirmar,.bloco-escuro .confirmar,.hero-int .confirmar{
  color:#ffd08a;background:rgba(255,208,138,.08);border-color:rgba(255,208,138,.5)}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  :root{--e7:64px;--e6:48px}
  .envolt{width:calc(100% - 40px)}
  .nav-links{display:none}
  .nav-mob{display:flex}
  .nav{padding:5px 6px 5px 14px;gap:var(--e2)}
  .nav-mob{margin-left:0}
  .nav img{height:36px}
  .rodape-grade{grid-template-columns:1fr 1fr;gap:var(--e4)}
  .rodape-sobre{grid-column:1 / -1;max-width:none}
}
@media (max-width:560px){
  .rodape-grade{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}

/* ---------- a bolinha que segue o mouse (bolinha.js) ----------
   15px, igual à do noho.ink. O cursor do sistema continua visível: ela
   é um acréscimo, não uma troca. Verde-folha porque é o único tom da
   marca que se enxerga no creme E no verde-escuro.
   pointer-events:none é obrigatório: sem isso ela rouba TODO clique. */
.bolinha{
  position:fixed;top:0;left:0;width:15px;height:15px;
  pointer-events:none;z-index:9999;
  opacity:0;transition:opacity .25s ease;
  will-change:transform;
}
/* O desenho mora no ::before e é ELE que cresce. 24/10 (T20): o crescimento era um
   `scale` na própria .bolinha, e o navegador aplica o `scale` POR FORA do transform
   que o bolinha.js escreve (a posição) — a posição também era multiplicada por 2,1 e
   a bolinha fugia pra baixo e pra direita, quase sempre pra fora da tela. Por dentro,
   só o desenho cresce, centrado. E é transform comum, que todo navegador entende. */
.bolinha::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;
  background:var(--verde-folha);
  transition:transform .25s cubic-bezier(.215,.61,.355,1);
}
.bolinha.visivel{opacity:1}
/* sobre link ou botão ela cresce — é o "magnet" do noho */
.bolinha.perto{opacity:.55}
.bolinha.perto::before{transform:scale(2.1)}