/* ============================================================
   FSQ SITE ENHANCE  (aditivo — carregado por último)
   - Correção do rodapé
   - Responsividade mobile
   - Efeitos dinâmicos (respeitando prefers-reduced-motion)
   Reversível: basta remover o <link> deste arquivo no index.html.
   ============================================================ */

/* ---------- 1) Rodapé: espaçar os links de navegação ---------- */
.future-footer-trust nav{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}

/* ---------- 2) Responsividade mobile ---------- */
/* Elimina o overflow horizontal (~10px) causado pelas camadas ambiente */
html,body{overflow-x:clip}
.future-ambient-space,.future-ambient-particles{max-width:100vw!important;left:0!important;right:0!important}
.future-hero-watermark-mask{max-width:100%!important}

@media (max-width:600px){
  .section{padding-top:64px;padding-bottom:64px}
  .container,.container.wide{padding-left:20px;padding-right:20px}
  /* CTAs do hero empilhados e com alvo de toque confortável */
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px}
  .hero-actions .btn{width:100%;justify-content:center;min-height:52px}
  .btn{min-height:48px}
  /* cards em largura total */
  .capability,.mission-card,.product-panel{width:100%}
  /* formulário de contato em coluna única */
  .site-contact-grid{grid-template-columns:1fr!important}
  /* rodapé centralizado e respirando */
  .future-footer-trust nav{justify-content:center}
}
@media (max-width:380px){
  .future-hero h1,.hero h1{font-size:clamp(38px,12vw,52px);line-height:1.03}
}

/* ---------- 3) Efeitos dinâmicos ---------- */
@media (prefers-reduced-motion:no-preference){

  /* Reveal com variações direcionais (data-reveal setado via JS) + escala */
  .reveal{will-change:opacity,transform}
  .reveal[data-reveal="left"]{transform:translateX(-30px)}
  .reveal[data-reveal="right"]{transform:translateX(30px)}
  .reveal[data-reveal="zoom"]{transform:scale(.94)}
  .reveal.visible{transform:none!important}

  /* Hover: elevação + brilho teal nos cards */
  .capability,.mission-card,.product-panel{
    transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease}
  .capability:hover,.mission-card:hover,.product-panel:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 60px rgba(0,210,190,.20);
    border-color:rgba(88,231,214,.45)}

  /* Brilho que segue o cursor dentro do card (--mx/--my via JS) */
  .capability,.product-panel{position:relative;overflow:hidden}
  .capability::after,.product-panel::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(88,231,214,.16),transparent 62%)}
  .capability:hover::after,.product-panel:hover::after{opacity:1}

  /* Botão quantum: brilho deslizante no hover */
  .btn.quantum{position:relative;overflow:hidden}
  .btn.quantum::before{
    content:"";position:absolute;top:0;left:-130%;width:65%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-18deg);transition:left .65s ease;pointer-events:none}
  .btn.quantum:hover::before{left:150%}

  /* Sublinhado animado nos links do rodapé */
  .future-footer-trust nav a{position:relative}
  .future-footer-trust nav a::after{
    content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:#58e7d6;transition:width .3s ease}
  .future-footer-trust nav a:hover::after{width:100%}

  /* Pulso suave nos rótulos "overline" (SECURITY / CAPABILITIES ...) */
  .overline{animation:fsqOverlinePulse 3.4s ease-in-out infinite}
  @keyframes fsqOverlinePulse{0%,100%{opacity:.82}50%{opacity:1}}

  /* Badges de confiança do rodapé: leve realce no hover */
  .future-trust-badges span{transition:transform .3s ease,color .3s ease}
  .future-trust-badges span:hover{transform:translateY(-2px);color:#fff}

  /* Parallax suave (translateY via --fsq-parallax setado no JS) */
  [data-parallax]{will-change:transform;transform:translate3d(0,var(--fsq-parallax,0),0)}
}

/* ============================================================
   4) BOTÃO DE TEMA — símbolo SVG (sol/lua) com transição
   ============================================================ */
#themeToggle{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;color:#d5e7e6;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:background .25s,border-color .25s,transform .2s}
#themeToggle:hover{background:rgba(88,231,214,.14);border-color:rgba(88,231,214,.5);color:#eafffb}
#themeToggle:active{transform:scale(.92)}
html[data-theme="light"] #themeToggle{color:#0b2a2c;background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.fsq-theme-ico{width:22px;height:22px;display:block}
.fsq-theme-ico .ico-sun,.fsq-theme-ico .ico-moon{transform-origin:12px 12px}
@media (prefers-reduced-motion:no-preference){
  .fsq-theme-ico .ico-sun,.fsq-theme-ico .ico-moon{transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
}
/* Claro => Sol; Escuro => Lua (baseado só em html[data-theme]) */
.fsq-theme-ico .ico-moon{opacity:0;transform:rotate(-90deg) scale(.4)}
.fsq-theme-ico .ico-sun{opacity:1;transform:none}
html[data-theme="dark"] .fsq-theme-ico .ico-sun{opacity:0;transform:rotate(90deg) scale(.4)}
html[data-theme="dark"] .fsq-theme-ico .ico-moon{opacity:1;transform:none}

/* ============================================================
   5) NAV MOBILE — Tab bar flutuante iOS 26 "Liquid Glass"
   ============================================================ */
@media (max-width:900px){
  .mobile-menu-toggle{display:none!important}
  .mobile-menu{display:none!important}
  .mobile-sticky-cta{display:none!important}
  body{padding-bottom:104px}
}
@media (min-width:901px){ .fsq-tabbar{display:none!important} }

.fsq-tabbar{
  position:fixed!important;left:0!important;right:0!important;bottom:max(14px,env(safe-area-inset-bottom))!important;
  top:auto!important;z-index:1500!important;display:flex;justify-content:center;align-items:stretch;gap:10px;
  padding:0 14px;pointer-events:none;margin:0!important}
.fsq-tabbar>*{pointer-events:auto}

/* pílulas de vidro (liquid glass) */
.fsq-tabbar__pill,.fsq-tabbar__aux{
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.34));
  border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);
  box-shadow:0 18px 44px rgba(9,40,38,.22), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -8px 16px rgba(255,255,255,.28)}
html[data-theme="dark"] .fsq-tabbar__pill,
html[data-theme="dark"] .fsq-tabbar__aux{
  background:linear-gradient(180deg, rgba(48,58,62,.55), rgba(22,28,30,.42));
  border-color:rgba(255,255,255,.24);
  box-shadow:0 18px 46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 16px rgba(255,255,255,.06)}

.fsq-tabbar__pill{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;justify-content:space-between;
  border-radius:999px;padding:6px}
.fsq-tabbar__aux{flex:none;width:62px;border-radius:999px;display:flex;align-items:center;justify-content:center}

/* item (ícone + rótulo) */
.fsq-tab{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:8px 2px 6px;border-radius:999px;border:none;background:transparent;
  cursor:pointer;text-decoration:none;color:#3a4a4c;font:600 9.5px/1 Inter,-apple-system,sans-serif;
  letter-spacing:-.01em;transition:color .25s ease}
html[data-theme="dark"] .fsq-tab{color:#cfe0e0}
.fsq-tab svg{width:22px;height:22px;display:block;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fsq-tab:active svg{transform:scale(.86)}
.fsq-tab__lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fsq-tab.is-active{color:#00b3a0}
html[data-theme="dark"] .fsq-tab.is-active{color:#5ff0dd}
.fsq-tab.is-active::before{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;
  background:rgba(0,200,180,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

/* botão auxiliar (Acessar) */
.fsq-tabbar__aux{color:#0b6a60;transition:transform .2s ease}
html[data-theme="dark"] .fsq-tabbar__aux{color:#5ff0dd}
.fsq-tabbar__aux svg{width:25px;height:25px}
.fsq-tabbar__aux:active{transform:scale(.92)}

@media (prefers-reduced-motion:no-preference){
  .fsq-tabbar{transform:translateY(140%);opacity:0;transition:transform .6s cubic-bezier(.22,1.1,.36,1),opacity .4s ease}
  .fsq-tabbar.is-in{transform:none;opacity:1}
}
