/* ==========================================================================
   Insumia — estilos compartilhados
   Tokens de cor, tipografia (Figtree), header, rodapé, animações e helpers.
   Usado por: index.html, privacidade.html, termos.html
   Estilos específicos da landing ficam inline no index.html.
   ========================================================================== */

:root {
  --primary: #1B498C;
  --primary-dark: #233D64;
  --primary-deep: #093A67;
  --accent-cyan: #9AECFF;
  --accent-blue: #0068FF;
  --accent-blue-soft: #94C0FF;
  --alert: #FF8282;
  --bg: #F2F2F2;
  --surface: #FFFFFF;
  --surface-alt: #F6F8FA;
  --text: #202020;
  --text-muted: #4A4A4A;
  --text-subtle: #969696;
  --border: #E0E0E0;
  /* Botões: retângulo de cantos curvados na mesma proporção do squircle da logo
     (raio ~22,5% do lado). Botão de ~44px de altura -> ~10px; 12px para arredondar. */
  --radius-btn: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Figtree', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: var(--primary); }
::selection { background: var(--accent-cyan); color: var(--primary-deep); }
img { max-width: 100%; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* Reveal animation */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
/* Variantes direcionais: entram na horizontal em vez de subir, de mais longe e
   com uma desaceleração mais longa que o reveal padrão. O JS observa
   [data-reveal] e casa com qualquer valor, então basta o atributo. */
[data-reveal="left"], [data-reveal="right"] {
  transition: opacity 1.6s ease, transform 3s cubic-bezier(.16,1,.3,1);
}
/* A distância sai da viewport, não de um valor fixo: o 50vw leva o centro do
   elemento até a borda da tela e o 50% (metade da largura dele mesmo) leva o
   resto para fora. Assim eles entram de fato pela lateral da janela, e não da
   margem do container. O overflow:hidden do .hero apara a sobra. */
[data-reveal="left"] { transform: translateX(calc(-50vw - 50%)); }
[data-reveal="right"] { transform: translateX(calc(50vw + 50%)); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  /* Assinatura Bahtech: marca inteira parada, sem abertura nem véu de clique
     (o script também não registra o clique nesse modo). */
  .bahtech-sig-window { width: 111px; transition: none; }
  .bahtech-sig-tech { opacity: 1; transform: none; transition: none; }
}

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
header.site.scrolled {
  background: rgba(255,255,255,0.85);
  box-shadow: 0 6px 24px rgba(16,42,80,0.08);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 32px; max-width: 1200px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; }
.brand img { width: 40px; height: 40px; display: block; flex: none; }
.brand span { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary-dark); }
nav.main { display: flex; align-items: center; gap: 8px; }
nav.main a.link { padding: 10px 14px; border-radius: 31px; color: var(--text-muted); font-weight: 500; font-size: 15px; }
nav.main a.link:hover { background: var(--bg); color: var(--primary); }
.btn-cta {
  margin-left: 8px; padding: 12px 22px; border-radius: var(--radius-btn);
  background: var(--primary); color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 20px rgba(27,73,140,0.25);
}
.btn-cta:hover { color: #fff; background: #163c76; }
.nav-toggle { display: none; }

/* ---------- Store badges (hero + CTA) ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.store-badges img { display: block; height: 56px; width: auto; }
.badge-link { display: inline-block; transition: transform .2s ease; }
.badge-link:hover { transform: translateY(-2px); }

/* ---------- Helpers de seção ---------- */
section .wrap { padding-top: 88px; padding-bottom: 88px; }
.section-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.pill { display: inline-block; padding: 8px 16px; border-radius: 31px; font-weight: 600; font-size: 13px; margin-bottom: 18px; }
h2.title { font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.section-head p { font-size: 18px; line-height: 1.5; color: var(--text-muted); margin: 14px 0 0; }

/* ---------- Footer ---------- */
footer.site { background: var(--primary-dark); color: #C6D4E6; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 64px 32px 40px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-brand img { width: 40px; height: 40px; display: block; flex: none; }
.footer-brand span { font-size: 22px; font-weight: 700; color: #fff; }
.footer-grid > div > p { font-size: 15px; line-height: 1.5; margin: 0; max-width: 280px; }
.footer-grid h4 { font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 0.04em; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { color: #C6D4E6; font-size: 15px; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; }
.footer-bottom p { margin: 0; font-size: 14px; color: var(--accent-blue-soft); }
/* Rodapé com a assinatura: ela fica colada na esquerda, o copyright centralizado
   na página e as redes à direita. As duas colunas laterais são 1fr iguais, então
   o texto do meio fica centralizado de verdade. A classe .with-sig existe porque
   as páginas internas usam o mesmo .footer-bottom com só dois filhos. */
.footer-bottom.with-sig { display: grid; grid-template-columns: 1fr auto 1fr; }
.footer-bottom.with-sig .bahtech-sig { justify-self: start; }
.footer-bottom.with-sig p { text-align: center; }
.footer-bottom.with-sig .socials { justify-self: end; }
.socials { display: flex; gap: 12px; }
.socials a { width: 40px; height: 40px; border-radius: 34px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.socials a:hover { background: rgba(255,255,255,0.16); }

/* ---------- Assinatura Bahtech (rodapé) ----------
   Porte do componente React BahtechSignature.tsx. A marca completa mede 111px
   com 24px de altura (2723/591 do viewBox); a janela mostra só os primeiros
   60px — exatamente até o fim do "BAH" — e abre até 111px no hover/foco,
   enquanto o grupo "TECH" desliza de -400 unidades do viewBox e aparece.
   O <a> já reserva os 111px para o copyright ao lado não andar na animação. */
/* min-width junto do width: nas larguras intermediárias (~721–900px) as colunas
   1fr do .footer-bottom.with-sig apertam, e sem o piso a assinatura seria
   espremida e sumiria dentro do overflow:hidden da janela. */
.bahtech-sig {
  flex: none; display: inline-flex; align-items: center;
  width: 111px; min-width: 111px; height: 24px; opacity: 0.8;
  transition: opacity 0.2s ease;
}
/* A marca é desenhada com fill="currentColor", e o a:hover global lá em cima
   troca a cor por --primary — que some contra o --primary-dark do rodapé.
   Por isso o branco é reafirmado no hover e no foco. */
.bahtech-sig, .bahtech-sig:hover, .bahtech-sig:focus-visible { color: #fff; }
.bahtech-sig:hover, .bahtech-sig:focus-visible { opacity: 1; }
.bahtech-sig-window {
  position: relative; display: block; height: 24px; width: 60px; overflow: hidden;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.bahtech-sig:hover .bahtech-sig-window,
.bahtech-sig:focus-visible .bahtech-sig-window { width: 111px; }
.bahtech-sig-mark { position: absolute; left: 0; top: 0; height: 24px; width: auto; }
.bahtech-sig-tech {
  opacity: 0; transform: translateX(-400px);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.bahtech-sig:hover .bahtech-sig-tech,
.bahtech-sig:focus-visible .bahtech-sig-tech { opacity: 1; transform: translateX(0); }

/* Em telas de toque não existe hover: a marca completa fica sempre aberta. */
@media (hover: none) {
  .bahtech-sig .bahtech-sig-window { width: 111px; }
  .bahtech-sig .bahtech-sig-tech { opacity: 1; transform: none; }
}

/* Véu do clique: círculo azul da Bahtech (#2A42F2 é cor de marca de terceiro,
   por isso fica fora dos tokens) crescendo do centro da assinatura até cobrir
   a tela, com a marca completa surgindo só depois. O elemento é criado sob
   demanda por assets/bahtech-signature.js. */
.bahtech-veil {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.bahtech-veil.is-open { visibility: visible; opacity: 1; }
.bahtech-veil-circle {
  position: absolute; width: 300vmax; height: 300vmax; border-radius: 50%;
  background: #2A42F2; transform: translate(-50%, -50%) scale(0);
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.bahtech-veil.is-open .bahtech-veil-circle { transform: translate(-50%, -50%) scale(1); }
.bahtech-veil-mark {
  position: relative; z-index: 1; width: 300px; height: auto; color: #fff; opacity: 0;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.3));
  transition: opacity 0.4s ease 0.8s;
}
.bahtech-veil.is-open .bahtech-veil-mark { opacity: 1; }
/* Desmonte instantâneo depois que a nova aba assume, como no original. */
.bahtech-veil.is-instant, .bahtech-veil.is-instant * { transition: none !important; }

/* ---------- Páginas legais (privacidade, termos) ---------- */
.legal-hero { background: var(--primary-dark); color: #fff; }
.legal-hero .wrap { padding-top: 64px; padding-bottom: 64px; }
.legal-hero h1 { font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; }
.legal-hero p { margin: 0; color: #C6D4E6; font-size: 16px; }
.legal { max-width: 820px; margin: 0 auto; padding: 64px 32px 88px; }
.legal h2 { font-size: 24px; font-weight: 600; color: var(--primary-dark); margin: 40px 0 12px; }
.legal > h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: 18px; font-weight: 600; color: var(--primary-dark); margin: 24px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.legal ul { padding-left: 20px; margin: 12px 0; }
.legal li { margin-bottom: 8px; }
.legal .updated { color: var(--text-subtle); font-size: 14px; margin-top: 0; }
.legal .callout { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; margin: 24px 0; font-size: 15px; color: var(--text-muted); }
.placeholder { color: var(--primary); font-weight: 600; }

/* ---------- Responsive (compartilhado) ---------- */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* Tablet/iPad também usa o hambúrguer: a nav horizontal cabe folgada em 1024px
     (iPad Pro retrato) mas começa a apertar contra a marca por volta de ~900px. */
  .nav-links { display: none; }
  .nav-links.open { display: flex; }
  nav.main { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 31px; border: none; cursor: pointer;
    background: var(--bg);
  }
  .nav-links {
    flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: calc(100% + 12px); right: 0;
    background: #fff; border-radius: 24px; padding: 12px;
    box-shadow: 0 20px 45px rgba(16,42,80,0.15); min-width: 220px; z-index: 60;
  }
  .nav-links .btn-cta { margin-left: 0; text-align: center; }
}
@media (max-width: 720px) {
  .header-inner { padding: 14px 20px; }
  .wrap, .header-inner, .footer-inner { padding-left: 20px; padding-right: 20px; }
  h2.title { font-size: 30px; }
  .footer-grid { grid-template-columns: 1fr; }
  /* No mobile os três blocos empilham centralizados no meio do rodapé. */
  .footer-bottom.with-sig { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-bottom.with-sig .bahtech-sig { justify-self: center; }
  .footer-bottom.with-sig p { text-align: center; }
  .footer-bottom.with-sig .socials { justify-self: center; }
  /* A marca completa fica sempre aberta no mobile. O @media (hover: none) lá em
     cima só pega aparelho de toque de verdade — em janela estreita de desktop e
     no modo responsivo do DevTools a janela continuava recortada nos 60px do
     "BAH", que é a assinatura "sumindo" em alguns tamanhos de tela. */
  .bahtech-sig-window { width: 111px; }
  .bahtech-sig-tech { opacity: 1; transform: none; }
  .bahtech-veil-mark { width: 200px; }
  .store-badges img { height: 50px; }
  .legal-hero h1 { font-size: 30px; }
  .legal-hero .wrap { padding-left: 20px; padding-right: 20px; }
  .legal { padding: 48px 20px 64px; }
}

/* ---------- Páginas de contato / ajuda ---------- */
.channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0 8px; }
.channel { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 28px; }
.channel-icon { width: 48px; height: 48px; border-radius: 34px; background: #EAF1FA; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.channel-icon.whatsapp { background: rgba(37,211,102,0.14); }
.channel h3 { font-size: 19px; font-weight: 600; color: var(--primary-dark); margin: 0 0 6px; }
.channel p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0 0 16px; }
.channel .value { display: block; font-weight: 600; color: var(--primary-dark); font-size: 16px; margin-bottom: 16px; word-break: break-word; }

.btn-whatsapp { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; padding: 12px 22px; border-radius: 31px; font-weight: 600; font-size: 15px; box-shadow: 0 8px 20px rgba(37,211,102,0.28); }
.btn-whatsapp:hover { color: #fff; background: #1fb757; }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--primary); color: var(--primary); padding: 11px 22px; border-radius: 31px; font-weight: 600; font-size: 15px; }
.btn-outline:hover { background: var(--primary); color: #fff; }

.help-list { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.help-item { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; }
.help-item h3 { font-size: 17px; font-weight: 600; color: var(--primary-dark); margin: 0 0 6px; }
.help-item p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 0; }

@media (max-width: 720px) {
  .channels { grid-template-columns: 1fr; }
}