/* LAB · 16/10/2026 · testes pedidos pelo Victor no encontro (o site/ original fica intocado).
   1. elementos sobem com fade ao entrar na tela (como no site dele no Lovable)
   2. botão flutuante de WhatsApp no canto inferior direito, em toda página
   3. só no celular, na home: o vídeo vira o fundo fixo em tela cheia e os blocos sobem por cima */

/* 1 · subida */
.sobe { opacity: 0; transform: translateY(42px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--atraso, 0ms); will-change: opacity, transform; }
.sobe.visto { opacity: 1; transform: none; }

/* 2 · botão flutuante (a barra larga do celular sai) */
.barra-celular { display: none !important; }
.zap-flutua { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--azul); color: #fff; text-decoration: none; font: 600 14px/1 var(--f-corpo); letter-spacing: .06em;
  box-shadow: 0 10px 28px rgba(0, 117, 242, .38), 0 2px 8px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(20px) scale(.92); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.zap-flutua.ligado { opacity: 1; transform: none; pointer-events: auto; }
.zap-flutua svg { width: 20px; height: 20px; fill: currentColor; }
.zap-flutua:hover { filter: brightness(1.08); }

/* 3 · vídeo de fundo fixo (classe posta pelo lab.js, só celular e só na home) */
.fundo-fixo { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: -1; margin: 0; background: #000; }
.fundo-fixo video, .fundo-fixo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
.fundo-veu { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #050608; opacity: var(--veu, .25); }
/* 16/10 17h17: print do Victor no iPhone, título azul e texto branco ilegíveis em cima do motor iluminado.
   O degradê escurece de baixo pra cima atrás do texto e deixa o mecânico limpo em cima. */
.fundo-degrade { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,6,8,.45) 0, transparent 14%, transparent 30%, rgba(5,6,8,.72) 46%, rgba(5,6,8,.9) 62%, rgba(5,6,8,.96) 100%); }

html.video-fundo body { background: transparent; }
html.video-fundo { background: #050608; }
html.video-fundo .abre { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 0 92px; background: transparent; }
html.video-fundo .abre > .midia-topo, html.video-fundo .abre > .abre-veu { display: none; }
html.video-fundo .abre { padding-bottom: 40px; }
html.video-fundo .abre h1 { font-size: 29px !important; line-height: 1.12; margin-bottom: 14px; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 4px 24px rgba(0,0,0,.7); }
html.video-fundo .abre .apoio { color: #fff; font-size: 16px; line-height: 1.5; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 2px 14px rgba(0,0,0,.7); }
html.video-fundo main > section:not(.abre) { background: transparent; }
html.video-fundo main > section:not(.abre) :is(article, li, details, form, .cartao, figure) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.video-fundo .rodape { background: rgba(5,6,8,.9); }

@media (prefers-reduced-motion: reduce) {
  .sobe { opacity: 1; transform: none; transition: none; }
}

/* 4 · logo nova (16/10, a 09 escolhida pelo Victor e pelo Junior) no lugar do DC + texto */
.logo-img { height: 40px; width: auto; display: block; }
.logo-rodape .logo-img { height: 40px; }
.logo-img-claro { display: none; }
:root[data-tema="claro"] .logo-img-escuro { display: none; }
:root[data-tema="claro"] .logo-img-claro { display: block; }
@media (max-width: 860px) { .barra .logo-img { height: 36px; } }

/* 5 · 16/10 noite: calculadora da página Perguntas passava 2 px da tela no celular (campo de data) */
@media (max-width: 860px) {
  .revisao-grade { grid-template-columns: minmax(0, 1fr) !important; }
  #calculadora .campo-dupla { grid-template-columns: minmax(0, 1fr); }
  #calculadora input, #montador input, #montador select { min-width: 0; max-width: 100%; box-sizing: border-box; }
}