.loader { display: none; }
/* Se o JavaScript falhar, o loader some sozinho depois de 8 s. */
.carregando .loader:not([hidden]) {
  animation: loader-limite 0s 8s forwards;
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.8rem;
  background: #000;
  color: var(--cor-titulo);
  pointer-events: none;
}
.loader img { display: block; width: 9rem; height: auto; }
.lente-loader {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  aspect-ratio: 1;
  border: 1px solid #41413e;
  border-radius: 50%;
}
.lente-loader::before, .lente-loader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.lente-loader::before {
  inset: -1px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-bottom-color: #858580;
  animation: giro-lente 1.2s linear infinite;
}
.lente-loader::after {
  inset: 20%;
  border: 1px solid #94948e;
  box-shadow: inset 0 0 0 5px #000, inset 0 0 0 6px #51514c;
  animation: foco-lente 1s ease-in-out infinite alternate;
}
@keyframes giro-lente { to { transform: rotate(360deg); } }
@keyframes foco-lente { to { transform: scale(.72); } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dupla-marca { overflow: hidden; }
  .dupla-marca img, .dupla-pecas img, .ficha-marca span, .ficha h3 span,
  .legenda-peca span, .botao-whatsapp span {
    transition: transform .32s cubic-bezier(.2,.7,.25,1);
  }
  .projeto-marca:is(:hover, :focus-visible) .dupla-marca img {
    transform: scale(1.025);
  }
  .dupla-pecas a:is(:hover, :focus-visible) img { transform: translateY(-3px); }
  .projeto-marca:is(:hover, :focus-visible) .ficha-marca span,
  .projeto-web:is(:hover, :focus-visible) .ficha h3 span,
  .dupla-pecas a:is(:hover, :focus-visible) .legenda-peca span,
  .botao-whatsapp:is(:hover, :focus-visible) span { transform: translate(3px,-3px); }
}
@keyframes loader-limite { to { visibility: hidden; opacity: 0; } }
@media (prefers-reduced-motion: reduce), print {
  .loader { display: none !important; }
}


/* Itens ainda abaixo da tela aguardam a entrada suave (interacoes.js). */
@media screen and (prefers-reduced-motion: no-preference) {
  [data-revelar] { opacity: 0; }
}

/* Cursor suave (cursor.js): só com mouse ou trackpad e sem preferência por movimento reduzido. */
.cursor-suave {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  transform-origin: 12.7px 2.7px;
  will-change: transform;
}
.cursor-suave svg { display: block; }
.cursor-suave.visivel { opacity: 1; }
@media screen and (forced-colors: none) {
  .com-cursor-suave, .com-cursor-suave * { cursor: none !important; }
  .com-cursor-suave :is(input, textarea, select) { cursor: text !important; }
}
@media (forced-colors: active), print {
  .cursor-suave { display: none; }
}

/* Títulos com distorção de vidro (warp-titulos.js). O texto real continua no h2;
   só a tinta fica transparente enquanto o canvas desenha as letras. */
.warp-titulo { position: relative; }
.warp-titulo.warp-ativo, .warp-titulo.warp-ativo * { -webkit-text-fill-color: transparent; }
.warp-camada { position: absolute; left: 0; top: 0; opacity: 1; pointer-events: none; }
@media (forced-colors: active), print {
  .warp-camada { display: none; }
  .warp-titulo.warp-ativo, .warp-titulo.warp-ativo * { -webkit-text-fill-color: currentColor; }
}

/* WhatsApp: CTA no topo da primeira dobra e botão flutuante a partir das marcas (whatsapp.js). */
.icone-whatsapp { display: block; flex: none; }

.whatsapp-flutuante {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 9;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(243, 243, 241, .32);
  border-radius: 50%;
  background: #050505;
  color: var(--cor-titulo);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.92);
  transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.25,1), visibility 0s .3s, background-color .2s, color .2s;
}
.whatsapp-flutuante.visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.25,1), visibility 0s, background-color .2s, color .2s;
}
.whatsapp-flutuante:hover, .whatsapp-flutuante:focus-visible { background: var(--cor-titulo); color: #050505; }
.whatsapp-flutuante:focus-visible { outline: 2px solid var(--cor-titulo); outline-offset: 3px; }
@media (max-width: 520px) { .whatsapp-flutuante { width: 3.25rem; height: 3.25rem; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-flutuante, .whatsapp-flutuante.visivel { transition: none; transform: none; } }
@media print { .whatsapp-flutuante { display: none; } }
.topo a { white-space: nowrap; }

/* Rodapé: e-mail à esquerda, redes juntas à direita; no celular, e-mail em cima. */
@media (max-width: 520px) {
  .canais-contato a:first-child { flex-basis: 100%; margin-right: 0; }
}