/* Árvores de links — Idea Digital */
/* 28/08/2026 — endereço queimado de propósito.
   As regras de .pausada existiam aqui mas nunca tinham sido enviadas ao
   servidor: o ciclo de publicação do painel subia só a pasta do cliente. Por
   algumas horas, o endereço arvore.css?v=305f84b1 entregou o arquivo ANTIGO —
   e como ele é "immutable" por um ano, quem carregou nessa janela guardou o
   conteúdo errado para sempre. Foi assim que a página da Fast Motos apareceu
   toda branca no navegador do Instagram e certa no navegador de fora.
   Corrigir o arquivo no servidor não alcança quem já cacheou. Só endereço novo
   alcança, e é o que esta linha faz. */
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/rubik-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/rubik-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('fontes/rubik-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('fontes/rubik-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url('fontes/rubik-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url('fontes/rubik-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('fontes/rubik-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('fontes/rubik-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/barlow-condensed-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('fontes/barlow-condensed-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fontes/barlow-condensed-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fontes/barlow-condensed-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fontes/barlow-condensed-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fontes/barlow-condensed-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{margin:0;padding:0;box-sizing:border-box}

/* Todo link herda a cor de onde está.

   Sem esta regra o navegador pinta de azul (#0000ee) qualquer <a> que não
   tenha cor própria — e o cliente escolhe a cor no <h2>, não no link dentro
   dele. Foi o que deixou o nome e o endereço da MS Cimentos azuis por cima
   da foto de fundo, apesar do JSON pedir branco e laranja.

   Vale também para link que envolve imagem: se a imagem não carregar, o
   texto alternativo aparece na cor do tema em vez de azul.

   Os botões não são afetados: eles definem a própria cor logo abaixo. */
a{color:inherit}
/* ---- encaixe na tela do celular ----

   A árvore é aberta quase sempre pela bio do Instagram, e o navegador de
   dentro do app come umas duas barras de altura: num aparelho de 844px
   sobram cerca de 640px de área visível. Nessa altura a assinatura da Idea
   ficava fora da tela mesmo numa árvore de três botões.

   A saída é medir as folgas em svh (small viewport height — a altura da
   tela COM as barras aparecendo, que é o pior caso) em vez de pixels fixos.
   Cada medida sai como min(valor de projeto, fração da tela): em tela alta
   vale o valor de projeto e nada muda; em tela baixa tudo encolhe junto e
   o conteúdo cabe.

   Os clamp() põem um piso, senão numa árvore de dez botões tudo espremeria
   até ficar ilegível — nesse caso é melhor rolar mesmo.

   A linha sem svh vem antes de propósito: é o que navegador antigo entende. */
body{
  min-height:100vh;
  min-height:100svh;
  font-family:var(--fonte),system-ui,-apple-system,sans-serif;
  color:var(--cor-texto);
  display:flex;justify-content:center;
  padding:32px 16px 40px;
  padding:clamp(10px,3svh,32px) 16px clamp(12px,3.4svh,40px);
  position:relative;
  -webkit-font-smoothing:antialiased;
}
.fundo-slides{position:fixed;inset:0;z-index:-1;overflow:hidden}
/* O enquadramento vem por variável, com o centro como padrão. Foto vertical de
   celular numa tela de celular quase sempre corta em algum lugar: "cover"
   preenche e sobra imagem fora da moldura. Poder dizer QUAL parte fica visível
   é a diferença entre a foto mostrar o produto ou mostrar o teto da loja. */
.fundo-slides .slide{
  position:absolute;inset:0;background-size:cover;
  background-position:var(--enquadramento,center);
  opacity:0;animation:trocaSlide linear infinite;
}
@keyframes trocaSlide{0%{opacity:0}4%{opacity:1}29%{opacity:1}37%{opacity:0}100%{opacity:0}}
.fundo-slides::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45)}

.arvore{
  width:100%;max-width:var(--largura-coluna);
  display:flex;flex-direction:column;align-items:center;
  gap:var(--espacamento);
  gap:min(var(--espacamento), 2svh);
  position:relative;z-index:1;
}

/* ---- teto de altura da logo e dos botões em imagem ----

   Só vale em tela estreita. Encaixar tudo sem rolar é problema de celular; no
   computador sobra altura, e comprimir ali só deixava a árvore pequena à toa. */
@media (max-width: 700px){

  /* O teto vai na IMAGEM, e não na caixa em volta dela.

     Na caixa não funcionava: max-height no pai não cria altura definida, então
     o max-height:100% do filho não tinha contra o que resolver. A imagem
     mantinha o tamanho natural e transbordava por cima do bloco de baixo — era
     a sobreposição que aparecia na A & Z Madeiras ao rolar.

     Com max-width e max-height na própria imagem, e width/height automáticos,
     o navegador reduz a imagem inteira mantendo a proporção, e a caixa
     acompanha em vez de ser furada por dentro. */
  /* O teto de altura NÃO entra aqui como max-height nem como width:auto — isso
     anularia os atributos width/height do <img> e a imagem não carregada
     ocuparia 0x0, saltando para o tamanho real ao carregar e empurrando o
     conteúdo (a sobreposição da A & Z Madeiras). O teto já vem convertido em
     limite de LARGURA no style de cada imagem, calculado com a proporção real
     do arquivo. Ver a função que monta a tag <img>. */

  /* No fundo redondo a caixa é quadrada, então o limite é de largura mesmo. */
  .arvore > .caixa-da-logo.redondo{max-width:var(--teto-da-logo)}
}

/* Imagens que fazem papel de botão. Só em tela estreita — mesmo motivo do
   bloco da logo: no computador sobra altura, não há por que comprimir.
   Usam max-width em vez de width (ver "propriedade" na função que gera o
   <img>), então o limite de altura aqui diminui a imagem toda, mantendo a
   proporção, em vez de deixar faixa vazia dos lados. */
/* (O teto dos botões em imagem também vive no style de cada <img>, como limite
   de largura — mesmo motivo do bloco acima.) */

/* Uma página só, que se adapta a qualquer tela. As classes abaixo existem apenas
   para casos em que um bloco realmente precise sumir num tamanho específico. */
@media (max-width:767px){ .oculto-mobile{display:none !important} }
@media (min-width:768px) and (max-width:1024px){ .oculto-tablet{display:none !important} }
@media (min-width:1025px){ .oculto-desktop{display:none !important} }

.logo{max-width:100%;height:auto;object-fit:contain}
.imagem{max-width:100%;height:auto;border-radius:10px}
.imagem-link{display:block;max-width:100%;transition:transform .15s ease}
.imagem-link:hover{transform:scale(1.02)}
.imagem-link img{display:block;margin:0 auto}

/* Caixa clara atrás da logo, para marca escura não sumir sobre foto de fundo.
   O respiro e o arredondamento vêm do JSON do cliente (item.fundo).

   display:flex e não inline-block: a coluna da árvore é um container flex, e
   dentro dele o inline-block é convertido para block — a caixa esticava para
   a largura toda e o border-radius:50% saía como elipse em vez de círculo.
   align-self:center e width:fit-content impedem esse esticamento. */
.tem-fundo{
  display:flex;align-items:center;justify-content:center;
  align-self:center;width:fit-content;max-width:100%;
  box-shadow:0 6px 26px rgba(0,0,0,.22);
}
/* Só o fundo circular precisa ser quadrado; o arredondado pode acompanhar a
   forma da imagem. Dentro do círculo a logo se encaixa sozinha, mantendo a
   proporção — por isso ela não leva largura fixa. */
/* min-height:0 é indispensável: item de flex nasce com min-height:auto e se
   recusa a ficar menor que o conteúdo, então a altura da logo vencia o
   aspect-ratio e o círculo saía 10px mais alto que largo. */
.tem-fundo.redondo{aspect-ratio:1;min-height:0}
.tem-fundo.redondo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.imagem-caixa{max-width:100%}

.video{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);
  background:#000;
}
/* sem controles: nem o menu do botão direito nem toque pausam o vídeo */
.video-sem-controles{pointer-events:none}
.video-sem-controles::-webkit-media-controls{display:none !important}
.video-sem-controles::-webkit-media-controls-enclosure{display:none !important}

/* O h2 continua EXATAMENTE como era: 83 dos 88 títulos são nível 2, e mexer
   neles mudaria a cara das 35 árvores que já estão no ar. Os outros níveis
   ganham tamanho próprio — antes todos saíam como h2 e a hierarquia não
   existia. */
.titulo{font-size:1.15rem;font-weight:500;text-align:center;line-height:1.35}
h1.titulo{font-size:clamp(1.6rem,7vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
h3.titulo{font-size:1.05rem}
h4.titulo{font-size:1rem}
h5.titulo,h6.titulo{font-size:.94rem;opacity:.85}
.titulo a{text-decoration:none}
.titulo a:hover{text-decoration:underline}
.texto{font-size:.98rem;text-align:center;line-height:1.5;opacity:.92}

.lista{list-style:none;display:flex;flex-direction:column;gap:8px;width:100%}
.lista li{display:flex}
.lista li>*,.lista li{align-items:center}
.lista li a,.lista li>span,.lista li{display:flex;gap:9px;text-decoration:none;font-size:.97rem;line-height:1.4}
.lista li a{width:100%}
.lista svg{width:17px;height:17px;flex:none;opacity:.85}
.lista li a:hover{text-decoration:underline}

/* ============================================================
   BOTÃO
   ============================================================
   Três camadas, e cada uma resolve uma coisa:

   1. "background-color" — a cor do cliente, ou o vidro (ver abaixo).
   2. "background-image"  — o degradê. Ele NÃO pinta o meio do botão: clareia
      só a borda de cima e escurece só a de baixo, e some entre 38% e 62%, que
      é exatamente onde o texto fica. Assim o botão ganha volume sem que o
      contraste do texto mude uma casa — dá para conferir com o
      checar-contraste.js, que continua passando igual.
   3. "box-shadow"        — a sombra que descola o botão da foto, mais um risco
      claro por dentro na borda de cima. Sobre foto escura a sombra sozinha
      quase não aparece; é o risco de dentro que faz o olho ler "objeto".

   Precisa vir separado ("background-color" + "background-image") e não no
   atalho "background": o atalho zera a imagem, e é por isso que o gerador
   também parou de escrever "background:" inline nos botões. */
.botao{
  display:block;width:100%;
  padding:15px 20px;text-align:center;text-decoration:none;
  padding:clamp(11px,1.9svh,15px) 20px;
  font-weight:500;font-size:1rem;line-height:1.3;
  color:var(--cor-texto-botao);
  background-color:var(--cor-botao);
  background-image:linear-gradient(180deg,
    rgba(255,255,255,.17) 0%,
    rgba(255,255,255,.02) 38%,
    rgba(0,0,0,.03) 62%,
    rgba(0,0,0,.13) 100%);
  border-radius:var(--raio-botao);
  --sombra-botao:
    0 2px 5px rgba(0,0,0,.24),
    0 10px 22px -12px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.15);
  box-shadow:var(--sombra-botao);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.botao:hover{
  transform:scale(1.03);filter:brightness(1.12);
  box-shadow:
    0 4px 10px rgba(0,0,0,.28),
    0 16px 30px -14px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.2);
}
/* O toque afunda o botão. Sem isto o dedo aperta e nada responde até a página
   trocar — no celular, que é onde essas árvores vivem, isso parece travamento. */
.botao:active{transform:translateY(1px) scale(.995)}

/* ---------- vidro: o botão vazado ganha corpo ----------
   Quase todos os botões das árvores herdadas são "transparent" com contorno de
   2px, ou seja, um retângulo vazado com o texto pousado direto na foto. Fica
   chapado e, dependendo da foto que estiver passando, ilegível.

   O vidro põe um preenchimento por baixo do contorno. A cor do cliente
   continua sendo a do contorno e a da letra — nada de identidade muda, o botão
   só deixa de ser um buraco.

   O "backdrop-filter" é enfeite, não estrutura: o preenchimento sozinho já
   resolve a legibilidade, então navegador que não fizer o desfoque mostra a
   mesma coisa um pouco menos bonita, e não um botão transparente de novo. */
.botao-vidro{
  background-color:rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(6px) saturate(115%);
  backdrop-filter:blur(6px) saturate(115%);
}
.botao-vidro-claro{
  background-color:rgba(255,255,255,.60);
  --sombra-botao:
    0 2px 5px rgba(0,0,0,.18),
    0 10px 22px -12px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.5);
  box-shadow:var(--sombra-botao);
}
.botao-vidro-claro:hover{
  box-shadow:
    0 4px 10px rgba(0,0,0,.22),
    0 16px 30px -14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* ---------- foco visível ----------
   Não existia nenhuma regra de foco nestas páginas. Quem percorre a árvore pelo
   teclado, por controle adaptado ou pelo teclado que sobe no celular passava de
   um botão a outro sem nenhum sinal de onde estava.

   São DOIS anéis, e não um: o branco por dentro some numa foto clara, o escuro
   por fora some numa foto escura, e um dos dois sempre aparece. Sobre foto que
   muda a cada cinco segundos, um anel só é aposta.

   ":focus-visible" e não ":focus": assim o anel aparece para quem navega pelo
   teclado e não pisca no dedo de quem toca na tela. */
.botao:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(0,0,0,.65),var(--sombra-botao);
}
.imagem-link:focus-visible,
.caixa-imagem:focus-visible,
.arvore a:focus-visible,
.assinatura a:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(0,0,0,.65);
  border-radius:8px;
}

/* ---------- quem pediu menos movimento ----------
   O balanço dos botões já respeitava esta preferência; o slideshow de tela
   cheia, não — e ele é a maior superfície em movimento da página, justamente o
   que a preferência existe para desligar.

   Fica a primeira foto, parada. Isso também é o que segura o carregamento
   adiado: como as outras nunca vão aparecer, o script não as busca. */
@media (prefers-reduced-motion:reduce){
  .fundo-slides .slide{animation:none;opacity:0}
  .fundo-slides .slide:first-child{opacity:1}
}

/* Balanço do botão de WhatsApp.

   Fica parado a maior parte do tempo e dá uma balançada curta a cada 5s: o
   movimento contínuo vira ruído e o olho aprende a ignorar; o intervalado
   chama atenção sem incomodar. Os ângulos são pequenos de propósito
   (1,5 grau) — o suficiente para o canto do olho perceber.

   A animação é pausada ao passar o mouse, senão brigaria com o scale do
   :hover, que usa a mesma propriedade transform. */
@keyframes balanco-zap{
  0%,86%,100%{transform:rotate(0) scale(1)}
  88%{transform:rotate(-1.5deg) scale(1.012)}
  90.5%{transform:rotate(1.3deg) scale(1.018)}
  93%{transform:rotate(-.9deg) scale(1.012)}
  95.5%{transform:rotate(.5deg) scale(1.005)}
}
/* ============================================================
   TEMA MODERNO — opcional, ligado por "tema":"moderno" no estilo
   ============================================================
   As 35 árvores herdadas NÃO usam isto e continuam exatamente como estavam:
   nada aqui vale sem a classe no body. Foi pedido explicitamente que elas não
   mudassem, e um tema global mudaria todas de uma vez.

   As medidas saíram de páginas reais do linkme.bio (Decathlon e Bela Gil),
   medidas no navegador e não estimadas: botão de 57px de altura, canto de 12px,
   peso 500, corpo de 16px, largura quase cheia. As duas usam cor SÓLIDA, sem
   gradiente — o que dá vida ali não é degradê, é o botão ser alto, a fonte não
   ser condensada e o toque responder.

   O degradê entra como ESCOLHA (--grad-botao no JSON), porque foi pedido, e não
   porque as referências usam. */
.tema-moderno .botao{
  min-height:57px;display:flex;align-items:center;justify-content:center;
  font-weight:500;font-size:1rem;letter-spacing:.005em;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
/* O toque levanta o botão. É o que as duas referências fazem (as duas têm
   transição em box-shadow), e é o que separa "botão" de "retângulo pintado". */
.tema-moderno .botao:active{transform:translateY(1px) scale(.995)}
@media (hover:hover){
  .tema-moderno .botao:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.28);filter:brightness(1.06)}
}
/* Degradê quando o JSON pede, e só então. Vem por variável para o botão poder
   ter o dele sem CSS novo a cada cor. */
.tema-moderno .botao[style*="--grad"]{background-image:var(--grad-botao)!important}

/* A logo respira e ganha forma. Antes ela era só uma imagem solta no topo. */
.tema-moderno .logo{border-radius:18px}
.tema-moderno .arvore{gap:12px}
/* A ordem aqui importa. Sem a segunda linha, o seletor de duas classes
   (.tema-moderno .titulo) vence o de elemento+classe (h1.titulo) por
   especificidade, e o nome da empresa sai com peso 600 em vez de 700 — foi o
   que aconteceu na primeira tentativa. */
.tema-moderno .titulo{font-weight:600}
.tema-moderno h1.titulo{font-weight:700;margin-bottom:2px}
.tema-moderno .texto{opacity:.86;font-size:.96rem;max-width:34ch;margin:0 auto}

/* A faixa escura atrás do conteúdo, quando há foto passando. Sem ela, texto
   branco sobre foto clara fica ilegível — e foto de fundo é justamente o que
   torna o contraste imprevisível. */
.tema-moderno.com-fundo .fundo-slides::after{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.38) 40%,rgba(0,0,0,.62))}

.botao-zap{animation:balanco-zap 5s ease-in-out infinite;transform-origin:center}
.botao-zap:hover{animation-play-state:paused}

/* Tremor: rápido e curto, com pausa longa. Serve para o que é urgente de
   verdade — plantão, entrega do dia — e não para tudo: dois botões tremendo ao
   mesmo tempo é o mesmo que nenhum tremendo. */
@keyframes tremor-botao{
  0%,88%,100%{transform:translateX(0)}
  89%{transform:translateX(-2px)}
  90.5%{transform:translateX(2px)}
  92%{transform:translateX(-2px)}
  93.5%{transform:translateX(2px)}
  95%{transform:translateX(-1px)}
  96.5%{transform:translateX(1px)}
}
.botao-tremor{animation:tremor-botao 6s ease-in-out infinite;transform-origin:center}
.botao-tremor:hover{animation-play-state:paused}

/* Pulso: cresce e volta. É o mais discreto dos três, para quando o botão
   principal já tem cor forte e balançar ficaria demais. */
@keyframes pulso-botao{
  0%,90%,100%{transform:scale(1)}
  94%{transform:scale(1.035)}
}
.botao-pulso{animation:pulso-botao 4.5s ease-in-out infinite;transform-origin:center}
.botao-pulso:hover{animation-play-state:paused}

/* Quem pediu ao sistema para reduzir animações não vê movimento nenhum. É
   ajuste de acessibilidade do próprio celular, usado por quem tem enjoo com
   movimento — e vale para os três efeitos, não só para o balanço. */
@media (prefers-reduced-motion: reduce){
  .botao-zap,.botao-tremor,.botao-pulso{animation:none}
}

/* carrossel: rolagem contínua, sem biblioteca */
.carrossel{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.carrossel .trilho{display:flex;gap:14px;width:max-content;animation:desliza 28s linear infinite}
.carrossel img{height:74px;width:auto;object-fit:contain;border-radius:8px}
.carrossel:hover .trilho{animation-play-state:paused}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .carrossel .trilho{animation:none}
  .carrossel{overflow-x:auto}
}

.caixa-imagem{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;text-decoration:none;color:inherit;
}
/* páginas de apresentação (mais largas) acomodam as caixas lado a lado */
.arvore-larga{max-width:var(--largura-coluna)}
.arvore-larga .titulo{font-size:1.4rem}
.arvore-larga .caixa-imagem{max-width:260px}
@media (min-width:760px){
  .arvore-larga .botao{max-width:420px}
}
.caixa-imagem img{max-width:100%;height:auto;border-radius:10px}
.caixa-imagem h3{font-size:1.05rem;font-weight:600}
.caixa-imagem p{font-size:.94rem;opacity:.85;line-height:1.5}

.sociais{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.sociais a{color:var(--cor-texto);display:inline-flex}
.sociais svg{width:30px;height:30px;transition:transform .15s ease}
.sociais a:hover svg{transform:scale(1.15)}

/* rodapé padrão da Idea Digital */
.assinatura{
  margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;
}
.assinatura p{font-size:.7rem;opacity:.6;letter-spacing:.01em}
.assinatura a{display:inline-block;transition:opacity .15s ease,transform .15s ease;opacity:.85}
.assinatura a:hover{opacity:1;transform:scale(1.04)}
/* 73px e não 104px: o arquivo antigo era um quadrado de 1080px com 80% de
   margem transparente em volta, então dos 104px pedidos só 73 eram marca de
   verdade. Depois de recortar a margem, 73px devolve exatamente o mesmo
   tamanho na tela — e o arquivo caiu de 57 KB para 4 KB. */
.assinatura img{width:73px;height:auto}


/* ---- página de cliente pausado ----

   Quem abre esta página veio da bio do Instagram procurando a EMPRESA. Se a
   primeira coisa que aparecer for a marca da agência, a pessoa entende que
   achou o lugar certo e manda mensagem pedindo produto do ex-cliente — foi
   exatamente o que passou a acontecer.

   Daí a hierarquia daqui: o nome da empresa procurada e o aviso de que ali
   não é ela vêm em corpo grande, sozinhos na primeira tela; o convite da
   agência vem depois, separado por uma linha, em corpo normal. */
body.pausada{
  background:radial-gradient(120% 90% at 50% 0%,#2a1650 0%,#12091f 62%,#0b0512 100%);
  min-height:100svh;
}
.pausada .arvore{justify-content:center;gap:0}
/* As folgas são medidas em svh, e não em pixels, pelo mesmo motivo das
   árvores: em tela alta vale o valor de projeto e nada muda; em tela baixa
   tudo encolhe junto, em vez de a página estourar de uma vez. */
.pausada .aviso{width:100%;text-align:center;padding:min(4px,.6svh) 0 min(20px,3svh)}
.aviso-chapeu{
  font-size:.9rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin-bottom:min(10px,1.6svh);
}
.aviso-nome{
  font-size:clamp(1.9rem,8.5vw,2.9rem);line-height:1.05;font-weight:700;
  letter-spacing:-.01em;overflow-wrap:anywhere;
}
/* a frase que a pessoa precisa ler mesmo que não leia mais nada */
.aviso-recado{
  font-size:clamp(1.3rem,5.6vw,1.7rem);line-height:1.25;font-weight:600;
  color:#ff9d5c;margin:min(14px,2.2svh) 0;
}
.aviso-texto{font-size:1rem;line-height:1.55;opacity:.85;max-width:44ch;margin:0 auto}
.aviso-texto strong{font-weight:600;opacity:1}

/* a linha existe para separar dois assuntos: "não é aqui" e "quem somos" */
.pausada .convite{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:min(12px,1.9svh);
  text-align:center;padding-top:min(20px,3svh);border-top:1px solid rgba(255,255,255,.14);
}
.convite-texto{font-size:.98rem;line-height:1.55;opacity:.88;max-width:42ch}
.convite-texto strong{font-weight:600;opacity:1}
.pausada .botao{width:100%}
.botao-destaque{
  background-color:#fe7730;color:#1a0d00;font-weight:600;border:0;
}
.botao-destaque:hover{background-color:#ff8b4d}

@media (max-width:380px){
  body{padding:24px 14px 32px}
  .botao{padding:14px 16px;font-size:.95rem}
}