/* =========================================================
   NEOTECH SOLUCOES - Base + Header

   PALETA
   A mesma do neotechsolucoes.com. O azul da marca e detalhe -- botao,
   link, tag, foco -- e nunca o fundo de uma secao. Tres conjuntos:

     pagina  (--bg / --surface / --text ...)     segue o tema
     painel  (--panel / --panel-text ...)        segue o tema (servicos,
                                                 contato, rodape)
     hero    (--over-text / --over-accent ...)   sempre claro sobre escuro,
                                                 porque o video e escuro
                                                 nos dois temas

   Claro e branco de verdade (#FFF / #F2F2F2); escuro e #121212, nao preto.

   TEMA
   :root                      = claro
   :root[data-theme=dark]     = escolha explicita do visitante
   @media prefers-color-scheme = sistema, quando nao ha escolha salva
   ========================================================= */

:root{
  color-scheme:light;

  /* ---------- Marca (a paleta do neotechsolucoes.com) ---------- */
  --brand:          #003B8C;   /* azul principal */
  --brand-2:        #3C6AA2;   /* azul de apoio */
  --brand-soft:     #86BBE3;   /* azul-claro: o azul que le sobre escuro */

  /* ---------- Acento ----------
     O azul e detalhe: botao, link, tag, foco. Nunca o fundo de uma secao. */
  --accent:         var(--brand);
  --accent-hover:   #002A66;
  --accent-text:    var(--brand);
  --accent-soft:    rgba(0,59,140,.07);
  --accent-line:    rgba(0,59,140,.18);
  --on-accent:      #FFFFFF;
  --highlight:      #F5B300;   /* estrelas e destaques quentes */

  /* ---------- Pagina ---------- */
  --bg:             #FFFFFF;
  --surface:        #FFFFFF;   /* cards */
  --surface-2:      #F2F2F2;   /* secoes alternadas */
  --surface-3:      #E9E9E9;
  --border:         #E5E5E5;
  --border-strong:  #D1D5DB;

  --text:           #222222;
  --text-soft:      #4A4A4A;
  --text-mute:      #8E8E8E;

  /* ---------- Paineis (servicos, contato, rodape) ----------
     Seguem o tema: claros no claro, escuros no escuro. */
  --panel:          #F2F2F2;
  --panel-2:        #FFFFFF;
  --panel-3:        #FFFFFF;
  --panel-card:     #FFFFFF;
  --panel-text:     #222222;
  --panel-soft:     #4A4A4A;
  --panel-mute:     #8E8E8E;
  --panel-line:     #E5E5E5;
  --panel-accent:   var(--brand);
  --panel-accent-d: rgba(0,59,140,.08);
  --panel-shadow:   0 10px 30px rgba(0,0,0,.08);

  /* ---------- Sobre a hero ----------
     O video e escuro nos dois temas, entao o que fica por cima dele
     e sempre claro. Nao confundir com os paineis acima. */
  --over-text:      #FFFFFF;
  --over-soft:      rgba(255,255,255,.82);
  --over-mute:      rgba(255,255,255,.58);
  --over-line:      rgba(255,255,255,.16);
  --over-accent:    var(--brand-soft);
  --over-accent-d:  rgba(134,187,227,.16);

  /* ---------- Header ---------- */
  --header-bg:      rgba(255,255,255,.92);   /* so depois de rolar */
  --header-fg:      #222222;
  --header-fg-soft: rgba(34,34,34,.72);

  /* Arte que so aparece num tema. Vale para a logo (branca x colorida) e
     para a foto da abertura, quando o site tem uma para cada tema. O CSS
     mostra uma e esconde a outra: antes um filtro pintava a logo branca de
     azul chapado, e isso comia o degrade da marca. */
  --only-light:     block;
  --only-dark:      none;

  /* O cabecalho antes de rolar. No claro ele ja nasce solido -- com a barra
     transparente o menu branco so aparecia depois de rolar um pouco, e a
     primeira tela do site mostrava o tema errado. */
  --header-top-bg:        var(--header-bg);
  --header-top-blur:      saturate(140%) blur(10px);
  --header-top-shadow:    var(--shadow-header);
  --header-top-line:      0;
  --header-top-fg:        var(--header-fg-soft);
  --header-top-fg-strong: var(--header-fg);
  --header-top-logo:      none;
  --header-top-cta-bg:    var(--accent);
  --header-top-cta-fg:    var(--on-accent);

  /* ---------- Aliases da paleta antiga ----------
     O CSS abaixo ainda fala "azul"/"grafite". Os nomes continuam,
     os valores agora saem dos tokens acima. */
  --azul:           var(--accent);
  --azul-2:         var(--brand-2);
  --azul-claro:     var(--over-accent);
  --azul-900:       var(--accent-hover);
  --branco:         #FFFFFF;
  --grafite:        var(--text);
  --cinza:          var(--text-mute);
  --cinza-claro:    var(--surface-2);
  --grad-azul:      linear-gradient(120deg, #001A40 0%, #061018 55%, #0B1620 100%);

  /* ---------- Layout ---------- */
  --container:      1240px;
  --header-h:       84px;
  --header-h-sm:    68px;
  --topbar-h:       40px;
  --cookie-banner-height:0px;
  --radius:         12px;

  /* ---------- Sombras ---------- */
  --shadow-sm:      0 2px 4px rgba(0,0,0,.05);
  --shadow-md:      0 4px 8px rgba(0,0,0,.10);
  --shadow-card:    0 4px 12px rgba(0,0,0,.08);
  --shadow-card-hi: 0 12px 32px rgba(0,0,0,.14);
  --shadow-header:  0 4px 18px rgba(0,0,0,.10);

  --ease:           cubic-bezier(.4, 0, .2, 1);

  /* Uma volta inteira do carrossel de depoimentos. Mais alto = mais lento. */
  --marquee:        70s;

  /* Ritmo vertical das secoes (um valor, o site inteiro obedece) */
  --section-y:      clamp(76px, 8vw, 120px);
  --section-head:   clamp(34px, 4.4vw, 52px);
  --card-radius:    22px;

  /* Posicao dos focos do fundo (animados pelo scroll) */
  --bg1x: 18%;  --bg1y: 16%;
  --bg2x: 86%;  --bg2y: 58%;
  --bg3x: 46%;  --bg3y: 98%;
}

/* ---------------------------------------------------------
   TEMA ESCURO
   Um unico bloco de tokens, aplicado nas duas portas de entrada:
   escolha salva (data-theme) e preferencia do sistema (sem escolha).
   Nada aqui e "quase preto": o fundo e #121212, como no site atual.
   --------------------------------------------------------- */

:root[data-theme="dark"]{
  color-scheme:dark;

  --accent:         var(--brand-2);         /* azul que aguenta texto branco no escuro */
  --accent-hover:   #4A7CB8;
  --accent-text:    var(--brand-soft);      /* azul-claro le melhor como texto */
  --accent-soft:    rgba(134,187,227,.10);
  --accent-line:    rgba(134,187,227,.22);

  --bg:             #121212;
  --surface:        #2A2A2A;
  --surface-2:      #1E1E1E;
  --surface-3:      #333333;
  --border:         #444444;
  --border-strong:  #565656;

  --text:           #E0E0E0;
  --text-soft:      #A0A0A0;
  --text-mute:      #8E8E8E;

  --panel:          #1E1E1E;
  --panel-2:        #1E1E1E;
  --panel-3:        #121212;
  --panel-card:     #2A2A2A;
  --panel-text:     #E0E0E0;
  --panel-soft:     #A0A0A0;
  --panel-mute:     #8E8E8E;
  --panel-line:     #444444;
  --panel-accent:   var(--brand-soft);
  --panel-accent-d: rgba(134,187,227,.14);
  --panel-shadow:   0 10px 30px rgba(0,0,0,.40);

  --header-bg:      rgba(30,30,30,.95);
  --header-fg:      #E0E0E0;
  --header-fg-soft: rgba(224,224,224,.74);
  --only-light:     none;
  --only-dark:      block;

  /* No escuro a barra se funde com a hero: transparente ate rolar. */
  --header-top-bg:        transparent;
  --header-top-blur:      none;
  --header-top-shadow:    none;
  --header-top-line:      1;
  --header-top-fg:        var(--over-soft);
  --header-top-fg-strong: var(--over-text);
  --header-top-logo:      drop-shadow(0 2px 8px rgba(0,0,0,.25));
  --header-top-cta-bg:    #FFFFFF;
  --header-top-cta-fg:    var(--brand);

  --branco:         #E0E0E0;

  --shadow-sm:      0 2px 4px rgba(0,0,0,.20);
  --shadow-md:      0 4px 8px rgba(0,0,0,.30);
  --shadow-card:    0 4px 12px rgba(0,0,0,.30);
  --shadow-card-hi: 0 12px 32px rgba(0,0,0,.45);
  --shadow-header:  0 4px 18px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --accent:         var(--brand-2);         /* azul que aguenta texto branco no escuro */
    --accent-hover:   #4A7CB8;
    --accent-text:    var(--brand-soft);      /* azul-claro le melhor como texto */
    --accent-soft:    rgba(134,187,227,.10);
    --accent-line:    rgba(134,187,227,.22);

    --bg:             #121212;
    --surface:        #2A2A2A;
    --surface-2:      #1E1E1E;
    --surface-3:      #333333;
    --border:         #444444;
    --border-strong:  #565656;

    --text:           #E0E0E0;
    --text-soft:      #A0A0A0;
    --text-mute:      #8E8E8E;

    --panel:          #1E1E1E;
    --panel-2:        #1E1E1E;
    --panel-3:        #121212;
    --panel-card:     #2A2A2A;
    --panel-text:     #E0E0E0;
    --panel-soft:     #A0A0A0;
    --panel-mute:     #8E8E8E;
    --panel-line:     #444444;
    --panel-accent:   var(--brand-soft);
    --panel-accent-d: rgba(134,187,227,.14);
    --panel-shadow:   0 10px 30px rgba(0,0,0,.40);

    --header-bg:      rgba(30,30,30,.95);
    --header-fg:      #E0E0E0;
    --header-fg-soft: rgba(224,224,224,.74);
    --only-light:     none;
    --only-dark:      block;

    /* No escuro a barra se funde com a hero: transparente ate rolar. */
    --header-top-bg:        transparent;
    --header-top-blur:      none;
    --header-top-shadow:    none;
    --header-top-line:      1;
    --header-top-fg:        var(--over-soft);
    --header-top-fg-strong: var(--over-text);
    --header-top-logo:      drop-shadow(0 2px 8px rgba(0,0,0,.25));
    --header-top-cta-bg:    #FFFFFF;
    --header-top-cta-fg:    var(--brand);

    --branco:         #E0E0E0;

    --shadow-sm:      0 2px 4px rgba(0,0,0,.20);
    --shadow-md:      0 4px 8px rgba(0,0,0,.30);
    --shadow-card:    0 4px 12px rgba(0,0,0,.30);
    --shadow-card-hi: 0 12px 32px rgba(0,0,0,.45);
    --shadow-header:  0 4px 18px rgba(0,0,0,.45);
  }
}


/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;      /* iOS nao infla o texto em paisagem */
  text-size-adjust:100%;
}

/* toque: sem o flash azul do Android e sem rolagem horizontal acidental */
*{ -webkit-tap-highlight-color:transparent; }
body{ overflow-x:clip; }

body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* O <a> so ganha a maozinha do navegador quando tem href, e botao morto nao
   pode prometer clique. */
a, summary, label[for], [role="button"]{ cursor:pointer; }
:disabled, [aria-disabled="true"]{ cursor:not-allowed; }
/* Todo icone e Font Awesome solid (brands so para as marcas). O <i>
   herda a cor do texto e o tamanho vem do font-size de cada contexto.
   NAO declarar display aqui: um seletor de atributo ganha de .classe,
   e era isso que fazia o alternador mostrar sol e lua ao mesmo tempo. */
i[class*="fa-"]{ vertical-align:-.08em; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--surface); color:var(--accent-text);
  padding:12px 18px; border-radius:0 0 var(--radius) 0; font-weight:600;
}
.skip-link:focus{ left:0; }

/* =========================================================
   BOTOES
   ========================================================= */
.btn{
  --btn-bg:var(--azul);
  --btn-fg:var(--branco);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 24px;
  border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:15px; font-weight:600; letter-spacing:.01em;
  white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover,
a.btn:hover,
button.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active,
a.btn:active,
button.btn:active{ transform:translateY(0); }

.btn--light{ --btn-bg:#FFFFFF; --btn-fg:var(--brand); }
.btn--light:hover{ box-shadow:0 10px 26px rgba(0,0,0,.22); }

/* O botao branco do header so le sobre a hero, entao ele so vale enquanto a
   barra esta transparente -- o que hoje e so no tema escuro. Com fundo
   proprio (rolagem, pagina sem hero, menu mobile) ele vira o cheio. */
.header .nav__cta{
  --btn-bg:var(--header-top-cta-bg); --btn-fg:var(--header-top-cta-fg);
}
body.is-scrolled .header .nav__cta{
  --btn-bg:var(--accent); --btn-fg:var(--on-accent);
}

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--over-text);
  border:1.5px solid rgba(255,255,255,.55);
}
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--branco); }

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--topbar-h);
  background:var(--brand);
  color:rgba(255,255,255,.84);
  font-size:13.5px;
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.topbar__inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.topbar__contacts{ display:flex; align-items:center; gap:28px; }
.topbar__contacts li{ display:flex; align-items:center; gap:8px; }
.topbar__contacts i{ font-size:14px; color:var(--brand-soft); }
.topbar__contacts a{ transition:color .25s var(--ease); }
.topbar__contacts a:hover{ color:#FFFFFF; }

.topbar__social{ display:flex; align-items:center; gap:6px; }
.topbar__social a{
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  font-size:15px;
  transition:background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.topbar__social a:hover{
  background:rgba(255,255,255,.16); color:#FFFFFF; transform:translateY(-2px);
}

/* Topbar recolhe ao rolar */
body.is-scrolled .topbar{ transform:translateY(-100%); opacity:0; }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; left:0; right:0; top:var(--topbar-h); z-index:80;
  height:var(--header-h);

  /* Tudo aqui e o estado de TOPO, antes de rolar, e ele muda com o tema:
     no escuro a barra e transparente sobre a hero, no claro ja nasce
     solida. Rolar (ou uma pagina sem hero) troca pelos valores abaixo. */
  background:var(--header-top-bg);
  -webkit-backdrop-filter:var(--header-top-blur);
  backdrop-filter:var(--header-top-blur);
  box-shadow:var(--header-top-shadow);
  --nav-fg:        var(--header-top-fg);
  --nav-fg-strong: var(--header-top-fg-strong);
  transition:top .35s var(--ease), height .35s var(--ease),
             background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header::after{ /* linha sutil enquanto transparente */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--over-line), transparent);
  opacity:var(--header-top-line); transition:opacity .3s var(--ease);
}
.header__inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.header__actions{
  display:flex; align-items:center; gap:4px;
  flex:0 0 auto;
}

/* Estado apos rolar */
body.is-scrolled .header{
  top:0;
  height:var(--header-h-sm);
  --nav-fg:        var(--header-fg-soft);
  --nav-fg-strong: var(--header-fg);
  background:var(--header-bg);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(150%) blur(9px);
  box-shadow:var(--shadow-header);
}
body.is-scrolled .header::after{ opacity:0; }

/* Paginas sem hero escuro atras do header (ex.: /solucoes/{slug}).
   Sem isto o menu branco e a logo branca caem sobre fundo claro e somem. */
body.has-solid-header .header{
  --nav-fg:        var(--header-fg-soft);
  --nav-fg-strong: var(--header-fg);
  background:var(--header-bg);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow-header);
}
body.has-solid-header .header::after{ opacity:0; }
body.has-solid-header .brand__logo{ filter:none; }
body.has-solid-header .header .nav__cta{
  --btn-bg:var(--accent); --btn-fg:var(--on-accent);
}

/* Barra de progresso da leitura */
.header__progress{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--brand-soft), var(--accent));
  opacity:0; transition:opacity .3s var(--ease);
}
body.is-scrolled .header__progress{ opacity:1; }

/* ---------- Marca ---------- */
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand__logo{
  height:42px; width:auto;
  transition:height .35s var(--ease), filter .35s var(--ease);
  filter:var(--header-top-logo);
}
body.is-scrolled .brand__logo{ filter:none; }
body.is-scrolled .brand__logo{ height:34px; }

/* A branca so le sobre fundo escuro, a colorida so sobre fundo claro. Como a
   barra segue o tema desde o topo, o tema resolve sozinho qual das duas. */
.brand__logo--white{ display:var(--only-dark); }
.brand__logo--color{ display:var(--only-light); }

/* ---------- Navegacao ---------- */
.nav{ display:flex; align-items:center; gap:38px; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:6px; }

.nav__link{
  position:relative;
  display:block;
  padding:10px 14px;
  font-size:15px; font-weight:500; letter-spacing:.01em;
  color:var(--nav-fg);
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  border-radius:2px;
  background:var(--accent-text);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active{ color:var(--nav-fg-strong); }
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }

/* Existem apenas no menu mobile: no desktop nao podem ocupar espaco no header */
.nav__close,
.nav__foot{ display:none; }

/* ---------- Botao hamburguer ---------- */
.burger{
  display:none;
  width:44px; height:44px;
  border-radius:10px;
  position:relative;
  transition:background-color .25s var(--ease);
}
.burger span{
  position:absolute; left:11px; right:11px; height:2px; border-radius:2px;
  background:var(--nav-fg-strong);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger:hover{ background:color-mix(in srgb, var(--nav-fg-strong) 14%, transparent); }

/* ---------- Alternador de tema ----------
   Fica sempre sobre o header escuro, entao usa os tokens de painel
   nos dois temas. Os dois icones ficam no DOM e so um aparece:
   trocar innerHTML no clique perde o foco do teclado. */
.theme-toggle{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:12px;
  color:var(--nav-fg-strong);
  border:1px solid color-mix(in srgb, var(--nav-fg-strong) 20%, transparent);
  background:color-mix(in srgb, var(--nav-fg-strong) 7%, transparent);
  transition:background-color .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), transform .25s var(--ease);
}
.theme-toggle:hover{
  background:color-mix(in srgb, var(--nav-fg-strong) 14%, transparent);
  border-color:color-mix(in srgb, var(--nav-fg-strong) 34%, transparent);
  transform:translateY(-2px);
}
.theme-toggle i{ font-size:17px; }
/* O icone mostra o destino do clique, nao o estado atual:
   no claro aparece a lua (leva ao escuro) e no escuro, o sol. */
.theme-toggle__sun{ display:none; }
:root[data-theme="dark"] .theme-toggle__moon{ display:none; }
:root[data-theme="dark"] .theme-toggle__sun{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle__moon{ display:none; }
  :root:not([data-theme="light"]) .theme-toggle__sun{ display:block; }
}

/* ---------- Overlay ---------- */
.overlay{
  position:fixed; inset:0; z-index:70;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s var(--ease);
}
.overlay.is-visible{ opacity:1; }

/* =========================================================
   FOCO VISIVEL
   ========================================================= */
:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:3px;
  border-radius:6px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + var(--topbar-h) + 56px) 0 120px;
  color:var(--over-text);
  overflow:hidden;
  isolation:isolate;
}

/* ---------- Fundo da abertura ---------- */
/* Escolhido na tela Site > Inicio. Cada opcao desenha UMA composicao: o
   empilhado de video + malha + particulas + marca d'agua saiu porque cinco
   camadas decorativas ao mesmo tempo e o que deixava a dobra com cara de
   template pronto. Sobrou o fundo e o veu que o texto precisa para ler. */
.hero__media{
  position:absolute; inset:0; z-index:-1;
  background:var(--grad-azul);           /* nunca falta, mesmo sem arquivo */
  overflow:hidden;
}

/* Cor da marca: um vinco de luz na diagonal da direita, nada mais. */
.hero__media--gradient{
  background:
    radial-gradient(120% 92% at 88% 8%, rgba(134,187,227,.26), transparent 58%),
    linear-gradient(118deg, transparent 0 46%, rgba(134,187,227,.09) 46% 48%, transparent 48%),
    linear-gradient(160deg, #001A40 0%, #002A66 52%, #003B8C 100%);
}

.hero__video,
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Uma foto por tema, quando a tela Site > Inicio tem as duas cadastradas. */
.hero__photo--light{ display:var(--only-light); }
.hero__photo--dark{ display:var(--only-dark); }

.hero__video{
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.1s var(--ease), transform 6s var(--ease);
}
.hero__media.is-ready .hero__video{ opacity:1; transform:scale(1); }

/* Veu: garante o contraste do texto sobre qualquer fundo. No degrade ele
   entra fraco, porque a cor ja nasce escura do lado do texto. */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,12,15,.95) 0%, rgba(13,15,19,.86) 42%, rgba(13,15,19,.56) 72%, rgba(13,15,19,.40) 100%),
    linear-gradient(180deg, rgba(8,9,11,.74) 0%, transparent 34%, rgba(8,9,11,.70) 100%);
}
.hero__media--gradient .hero__veil{
  background:linear-gradient(90deg, rgba(8,9,11,.52) 0%, rgba(8,9,11,.22) 52%, transparent 78%);
}

.hero__inner{ position:relative; max-width:880px; }

/* Com print cadastrado na tela Inicio, a dobra vira duas colunas: o texto
   para de flutuar sozinho sobre o video e o lado direito mostra o que a
   NeoTech entrega de fato. Sem print, nada muda. */
.hero__inner--split{
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0, 560px) minmax(0, 1fr);
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
.hero__copy{ min-width:0; }

.hero__shots{
  --shot-step:14%;
  position:relative;
  min-width:0;
  aspect-ratio:4 / 3;
}
.hero__shot{
  --shot:0;                    /* o indice de cada print vem no style= */
  position:absolute;
  top:calc(var(--shot) * var(--shot-step));
  right:calc(var(--shot) * var(--shot-step));
  z-index:calc(10 - var(--shot));
  width:76%;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  box-shadow:0 34px 80px rgba(0,0,0,.52);
}
.hero__shot img{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:top center;
}

.hero__tag{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px; margin-bottom:26px;
  border:1px solid rgba(134,187,227,.42);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:600; letter-spacing:.10em; text-transform:uppercase;
  color:var(--azul-claro);
}
.hero__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--over-accent);
  box-shadow:0 0 0 0 rgba(134,187,227,.65);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(134,187,227,.60); }
  70% { box-shadow:0 0 0 10px rgba(134,187,227,0); }
  100%{ box-shadow:0 0 0 0 rgba(134,187,227,0); }
}

.hero__title{
  margin:0 0 18px;
  font-size:clamp(40px, 6.6vw, 82px);
  line-height:1.02; font-weight:800; letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero__title-accent{
  position:relative;
  background:linear-gradient(100deg, var(--over-accent) 0%, #BFDCF3 55%, #FFFFFF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  white-space:nowrap;
}

/* --- Split text: cada palavra revelada por uma mascara --- */
.hero__title .word{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.14em;
  margin-bottom:-.14em;
}
.hero__title .word__in{ display:inline-block; will-change:transform, filter; }

/* --- Linha dinamica "Feita para ..." --- */
.hero__kicker{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:10px;
  margin:0 0 26px;
  font-size:clamp(17px, 1.9vw, 22px);
  font-weight:600; letter-spacing:-.01em;
}
.hero__kicker-label{ color:var(--over-mute); }
.hero__kicker-word{
  position:relative;
  color:var(--azul-claro);
  padding-bottom:3px;
  border-bottom:2px solid rgba(134,187,227,.45);
  white-space:nowrap;
}
/* caracteres aleatorios do efeito scramble */
.hero__kicker-word .dud{
  color:rgba(134,187,227,.5);
  -webkit-text-fill-color:rgba(134,187,227,.5);
}

/* --- Rede de particulas sobre o video --- */
.hero__title-accent::after{
  content:""; position:absolute; left:0; right:0; bottom:.02em; height:.09em;
  border-radius:99px;
  background:linear-gradient(90deg, var(--over-accent), rgba(134,187,227,0));
}

.hero__text{
  margin:0 0 36px;
  max-width:620px;
  font-size:clamp(16px, 1.35vw, 18.5px);
  line-height:1.75;
  color:var(--over-soft);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__actions .btn i{ font-size:15px; transition:transform .25s var(--ease); }
.hero__actions .btn:hover i{ transform:translateX(4px); }

/* ---------- Indicador de rolagem ---------- */
.hero__scroll{
  position:absolute; left:50%; bottom:34px; z-index:2;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--over-mute);
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:color .25s var(--ease), opacity .35s var(--ease);
}
.hero__scroll:hover{ color:var(--over-text); }
.hero__scroll-mouse{
  position:relative;
  width:24px; height:38px;
  border:1.5px solid currentColor; border-radius:999px;
}
.hero__scroll-mouse span{
  position:absolute; left:50%; top:8px;
  width:3px; height:7px; border-radius:99px;
  background:currentColor;
  animation:wheel 1.9s ease-in-out infinite;
}
@keyframes wheel{
  0%      { transform:translate(-50%,0);    opacity:0; }
  25%     { opacity:1; }
  75%     { transform:translate(-50%,13px); opacity:0; }
  100%    { transform:translate(-50%,13px); opacity:0; }
}
body.is-scrolled .hero__scroll{ opacity:0; pointer-events:none; }

/* ---------- Entrada dos elementos ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.hero.is-in .reveal{ opacity:1; transform:none; }
.hero.is-in .hero__tag       { transition-delay:.10s; }
.hero.is-in .hero__kicker    { transition-delay:.30s; }
.hero.is-in .hero__text      { transition-delay:.40s; }
.hero.is-in .hero__actions   { transition-delay:.52s; }

/* Secoes provisorias */
.placeholder{ padding:110px 0; background:var(--surface); }
.placeholder--alt{ background:var(--surface-2); }
.placeholder h2{ margin:0 0 10px; font-size:34px; letter-spacing:-.01em; }
.placeholder p{ margin:0; color:var(--text-mute); }

/* =========================================================
   UTILITARIOS DE SECAO (reutilizados nas demais secoes)
   ========================================================= */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:18px;
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azul-2);
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
}

.section__title{
  margin:0 0 24px;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.14; font-weight:800; letter-spacing:-.025em;
  color:var(--grafite);
  text-wrap:balance;
}
.text-accent{ color:var(--accent-text); }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600;
  color:var(--accent-text);
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow::after{
  content:"→";
  transition:transform .25s var(--ease);
}
.link-arrow:hover{ color:var(--accent); gap:12px; }

/* Revelacao no scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s var(--ease) var(--delay, 0s),
             transform .55s var(--ease) var(--delay, 0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }

[data-reveal="clip"]{
  opacity:1; transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .85s var(--ease) var(--delay, 0s);
}
[data-reveal="clip"].is-in{ clip-path:inset(0 0 0 0); }

/* =========================================================
   SOBRE
   ========================================================= */
.about{
  position:relative;
  padding:0 0 var(--section-y);
  background:transparent;
  overflow:hidden;
}
.about::before{ /* brilho azul suave ao fundo */
  content:""; position:absolute; left:-10%; top:18%;
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, var(--accent-soft), transparent 68%);
  pointer-events:none;
}

/* ---------- Faixa tipografica com velocidade ---------- */
.velocity{
  position:relative;
  padding:34px 0 76px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.velocity__track{
  display:flex;
  width:max-content;
  will-change:transform;
}
.velocity__group{
  display:flex; align-items:center; gap:.4em;
  padding-right:.4em;
  /* A escala da faixa mora aqui, e nao na palavra: o separador e irmao dela,
     entao so assim o `em` dele acompanha o tipo. */
  font-size:clamp(38px, 6.4vw, 92px);
  transform:skewX(var(--skew, 0deg));
  transition:transform .18s var(--ease);
}
.velocity__word{
  font-weight:800; letter-spacing:-.035em; line-height:1;
  white-space:nowrap;
  color:var(--text);
}
.velocity__word--outline{
  color:transparent;
  /* A CAUSA REAL: contornar um peso 800. Vazado nao desenha "uma letra fina
     feita de linha" — desenha a SILHUETA da letra gorda. Cada haste do peso 800
     vira duas linhas paralelas quase encostadas (a borda esquerda e a direita),
     e onde haste encontra curva essas linhas se cruzam. E o emaranhado que se
     ve no "e", no "a" e no "g". Espessura de traco e aperto nao resolvem isso:
     o que resolve e contornar um peso leve, onde cada haste e um canal so. */
  font-weight:500;
  /* O traco do -webkit-text-stroke e CENTRADO na silhueta: metade dele cai para
     dentro da letra. Com 1.5px fixo sobre um tipo que vai de 30px a 92px, no
     tamanho menor o traco valia 0,05em e fechava as contraformas — o olho do
     "e" e a menor delas, some primeiro; "a", "o" e "s" vem logo atras.
     Em `em` a espessura acompanha o tipo; o max() segura um minimo para o
     contorno nao sumir em tela sem retina. */
  -webkit-text-stroke-width:max(.6px, .009em);
  -webkit-text-stroke-color:var(--text-mute);
  /* O aperto de -.035em foi calibrado para o tipo CHEIO, onde letras encostadas
     simplesmente se fundem. Contornada, cada letra ganha a espessura do traco
     dos dois lados e o encontro vira risco cruzando o desenho. Tipo contornado
     pede ar: o valor vai para o positivo. */
  letter-spacing:.012em;
  opacity:.72;
}
/* O separador era a logo da marca, em px, ao lado de um tipo de ate 92px: ela
   ficava com um terco da altura das letras e lia como sujeira, nao como ritmo.
   Alem disso gastava o simbolo da marca como pontuacao, quatro vezes por volta,
   competindo com a logo do cabecalho. Virou um ponto dimensionado em `em`:
   acompanha o tipo em qualquer tela e o azul mantem a marca presente. */
.velocity__dot{
  flex:0 0 auto;
  width:.16em; height:.16em;
  border-radius:50%;
  background:var(--brand-soft);
  opacity:.75;
}

/* ---------- Time ----------
   Nome e funcao, sem retrato. E o padrao que agencias usam quando nao ha foto
   boa de todo mundo: o bloco apresenta as pessoas sem virar um mosaico de
   retratos desalinhados, e o peso fica na tipografia. Ele fecha a secao Sobre,
   depois da empresa — quem chega quer primeiro saber o que a NeoTech faz. */
.team{
  margin-top:clamp(56px, 7vw, 96px);
  padding-top:clamp(36px, 4vw, 56px);
  border-top:1px solid var(--border);
}
.team__head{ margin-bottom:clamp(26px, 3vw, 40px); }
.team__title{
  margin:10px 0 0;
  font-size:clamp(24px, 2.6vw, 34px);
  font-weight:700; letter-spacing:-.02em; line-height:1.2;
  color:var(--text);
}
/* Flex, e nao grid com `gap:1px` sobre fundo: aquele truque desenhava a linha
   inteira, entao com UMA pessoa cadastrada sobrava uma barra cinza atravessando
   a secao. Aqui cada cartao tem a propria borda e a linha so ocupa o que tem. */
.team__grid{
  display:flex; flex-wrap:wrap;
  gap:18px;
  list-style:none; margin:0; padding:0;
}
.team__member{
  flex:1 1 250px;
  max-width:300px;
  display:flex; flex-direction:column;
  overflow:hidden;
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--surface);
  transition:transform .3s var(--ease), border-color .3s var(--ease),
             box-shadow .3s var(--ease);
}
.team__member:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card-hi);
}

/* O retrato e o elemento do cartao, nao um enfeite: como avatar de 56px nao
   dava para reconhecer ninguem. Quadrado e de ponta a ponta, entao o cartao
   fica do mesmo tamanho tendo foto ou nao. */
.team__portrait{
  position:relative;
  aspect-ratio:1 / 1;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.team__portrait img{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  transition:transform .5s var(--ease);
}
.team__member:hover .team__portrait img{ transform:scale(1.04); }

/* Quem nao mandou foto ocupa a mesma area com as iniciais: sem isso a grade
   fica remendada entre retrato e buraco. */
.team__initials{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:clamp(38px, 4vw, 52px);
  font-weight:800; letter-spacing:-.03em;
  color:var(--accent-text);
  background:var(--accent-soft);
}

.team__body{
  display:flex; flex-direction:column; gap:5px;
  padding:20px 22px 24px;
}
.team__name{
  font-size:18px; font-weight:700; letter-spacing:-.01em;
  color:var(--text);
}
.team__role{
  font-size:13.5px; line-height:1.45; font-weight:600;
  color:var(--accent-text);
}
.team__quote{
  margin:8px 0 0;
  font-size:13.8px; line-height:1.6;
  color:var(--text-mute);
}

/* ---------- Grid ---------- */
.about__content{ position:relative; }
.about__inner{ position:relative; }

/* Titulo a esquerda, texto a direita. Empilhados, sobrava meia tela vazia ao
   lado do titulo — que e curto de proposito. */
.about__intro{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.about__copy{ display:flex; flex-direction:column; gap:16px; }

/* Preenche o vao abaixo do titulo, que e curto de proposito. Trocada em
   Site > Sobre; sem arquivo enviado o bloco nem sai no HTML. */
.about__image{
  margin:clamp(28px, 3vw, 44px) 0 0;
  border-radius:var(--card-radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}
.about__image img{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:center;
}
.about__cta{ margin-top:clamp(18px, 2vw, 26px); }

.about__text{
  margin:0 0 20px;
  font-size:16.5px; line-height:1.8;
  color:var(--text-soft);
  max-width:60ch;
}

/* ---------- Pilares ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:clamp(16px, 1.8vw, 24px);
  margin:clamp(46px, 5vw, 76px) 0 0;
  padding:clamp(40px, 4vw, 60px) 0 0;
  border-top:1px solid var(--border);
  list-style:none;
}
/* Cartao, e nao linha de texto solta: o bloco e o que a empresa promete
   entregar, entao ganha superficie propria e o mesmo peso dos servicos. */
.pillar{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:clamp(22px, 2.2vw, 30px);
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--surface);
  transition:transform .28s var(--ease), border-color .28s var(--ease),
             box-shadow .28s var(--ease);
}
.pillar:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}
.pillar strong{
  font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--text);
}
.pillar small{
  font-size:14px; line-height:1.6;
  color:var(--text-mute);
}
.pillar__icon{
  display:grid; place-items:center;
  width:52px; height:52px; border-radius:15px;
  font-size:22px;
  color:var(--accent-text);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.pillar:hover .pillar__icon{
  background:var(--accent); color:var(--on-accent); transform:translateY(-3px);
}
.about__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; }
.about__cta .btn i{ font-size:15px; transition:transform .25s var(--ease); }
.about__cta .btn:hover i{ transform:translateX(4px); }

/* =========================================================
   SERVICOS (cards fixados / pinned)
   ========================================================= */
.services{
  position:relative;
  padding:var(--section-y) 0 calc(var(--section-y) + 20px);
  background:
    radial-gradient(70% 50% at 15% 0%, var(--panel-accent-d), transparent 58%),
    linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  color:var(--panel-text);
  overflow:clip;   /* NAO usar overflow:hidden — quebraria o position:sticky */
}
.services::before{ /* malha sutil */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--panel-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--panel-line) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
  mask-image:radial-gradient(80% 60% at 50% 0%, #000, transparent 75%);
  pointer-events:none;
}

/* Rastro do cursor */
.trail{
  position:sticky; top:0; z-index:3;   /* acima dos cards, mas sem capturar cliques */
  height:0;
  pointer-events:none;
}
.trail canvas{
  position:absolute; top:0; left:50%;
  transform:translateX(-50%);
  width:100vw; height:100vh;
  opacity:.9;
}

/* ---------- Cabecalho ---------- */
.services__head{
  position:relative; z-index:2;
  max-width:760px; margin:0 auto var(--section-head);
  text-align:center;
}
.eyebrow--light{ color:var(--panel-accent); justify-content:center; }
.eyebrow--light::before{ background:linear-gradient(90deg, transparent, var(--panel-accent)); }
.section__title--light{ color:var(--panel-text); }
.text-accent-light{ color:var(--panel-accent); }
.services__sub{
  margin:0;
  font-size:17px; line-height:1.7;
  color:var(--panel-soft);
}

/* ---------- Pilha fixada ---------- */
.services__stack{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  gap:38px;
}

.service{
  position:sticky;
  top:calc(var(--header-h-sm) + 26px + var(--i) * 14px);
  display:grid;
  grid-template-columns:minmax(0, .82fr) minmax(0, 1fr);
  gap:clamp(28px, 4vw, 56px);
  align-items:center;
  padding:clamp(26px, 3vw, 44px);
  border-radius:28px;
  border:1px solid var(--panel-line);
  background:
    linear-gradient(150deg, var(--panel-accent-d), transparent 55%),
    var(--panel-card);
  box-shadow:var(--panel-shadow);
  overflow:hidden;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.service:hover{
  border-color:var(--accent-line);
  box-shadow:var(--shadow-card-hi);
}

.service__num{
  position:absolute; right:26px; top:14px;
  font-size:clamp(56px, 7vw, 104px);
  /* Mesmo motivo da faixa: o "0" em peso 800 vazado virava dois aneis
     concentricos, e o "4" cruzava por cima. Vazado pede peso leve. */
  font-weight:500; line-height:1;
  /* Mesmo caso da faixa: contorno em px sobre tipo fluido, e -.05em enfiava o
     "4" dentro do "0". Contornado, o numero precisa de folga, nao de aperto. */
  letter-spacing:.01em;
  color:transparent;
  -webkit-text-stroke-width:max(.6px, .009em);
  -webkit-text-stroke-color:var(--border-strong);
  pointer-events:none;
}

/* Imagem */
.service__media{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.service__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(0,59,140,.10), transparent 45%);
  pointer-events:none;
}
.service__media img{
  width:100%; height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.service:hover .service__media img{ transform:scale(1.045); }

/* Conteudo */
.service__body{ position:relative; z-index:1; min-width:0; }
.service__title{
  margin:0 0 10px;
  font-size:clamp(24px, 2.5vw, 33px);
  font-weight:800; letter-spacing:-.025em; line-height:1.15;
}
.service__lead{
  margin:0 0 16px;
  font-size:clamp(15.5px, 1.4vw, 17.5px); font-weight:600; line-height:1.55;
  color:var(--panel-accent);
}
.service__desc{
  margin:0 0 24px;
  font-size:15.5px; line-height:1.75;
  color:var(--panel-soft);
  max-width:56ch;
}

.service__list{
  display:grid; gap:11px;
  margin:0 0 30px;
  padding-top:22px;
  border-top:1px solid var(--panel-line);
}
.service__list li{
  position:relative;
  padding-left:30px;
  font-size:14.8px; line-height:1.5;
  color:var(--panel-text);
}
.service__list li::before{
  content:""; position:absolute; left:0; top:1px;
  width:19px; height:19px; border-radius:50%;
  background:var(--panel-accent-d);
  border:1px solid var(--accent-line);
}
.service__list li::after{
  content:""; position:absolute; left:6px; top:6.5px;
  width:7px; height:4px;
  border-left:1.8px solid var(--panel-accent);
  border-bottom:1.8px solid var(--panel-accent);
  transform:rotate(-45deg);
}

.service__cta i{ font-size:15px; transition:transform .25s var(--ease); }
.service__cta:hover i{ transform:translateX(4px); }

/* =========================================================
   FUNDO EM GRADIENTE QUE MUDA ENTRE AS SECOES
   ========================================================= */
.bg-shift{
  position:fixed; inset:0; z-index:-2;
  pointer-events:none;
  background:var(--bg);
  overflow:hidden;
}
.bg-shift span{
  position:absolute;
  width:80vw; height:80vw;
  border-radius:50%;
  will-change:transform;
}
.bg-shift .b1{
  left:-22vw; top:-18vw;
  background:radial-gradient(circle, rgba(0,59,140,.05), transparent 66%);
}
.bg-shift .b2{
  right:-24vw; top:28vh;
  background:radial-gradient(circle, rgba(134,187,227,.10), transparent 70%);
}
.bg-shift .b3{
  left:18vw; bottom:-32vw;
  background:radial-gradient(circle, rgba(60,106,162,.07), transparent 68%);
}
/* as secoes claras deixam o fundo aparecer */
.about, .solutions, .placeholder{ background:transparent; }
.placeholder--alt{ background:var(--surface-2); }

/* =========================================================
   TEXT CLIP-PATH REVEAL
   ========================================================= */
html.gsap-on [data-clip]{
  clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
}

/* =========================================================
   SOLUCOES

   Antes eram duas secoes dizendo a mesma coisa: "Solucoes" num
   carrossel horizontal fixado e "Portfolio" numa grade com filtros,
   repetindo os mesmos cinco projetos. Viraram uma so: a grade com
   filtros, com a moldura de navegador que era o melhor do carrossel.
   O scroll horizontal fixado saiu junto (era ele que prendia a pagina
   no meio do caminho e exigia o pin do GSAP).
   ========================================================= */
.solutions{
  position:relative;
  padding:var(--section-y) 0;
}
.solutions__head{ max-width:860px; margin-bottom:var(--section-head); }
.solutions__sub{
  margin:0;
  max-width:62ch;
  font-size:16.5px; line-height:1.75;
  color:var(--text-soft);
}

/* ---------- Filtros ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.filters__btn{
  padding:9px 20px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  font-size:14.5px; font-weight:600;
  color:var(--text-soft);
  transition:background-color .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .28s var(--ease),
             box-shadow .28s var(--ease);
}
.filters__btn:hover{
  transform:translateY(-2px);
  color:var(--text);
  border-color:var(--border-strong);
}
.filters__btn.is-active{
  background:var(--accent); color:var(--on-accent);
  border-color:var(--accent);
  box-shadow:var(--shadow-sm);
}

/* ---------- Grade ---------- */
.solutions__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(420px, 1fr));
  gap:30px;
  align-items:stretch;
}
.solutions__empty,
.services__empty{
  margin:40px 0 0; text-align:center;
  font-size:15px; color:var(--text-mute);
}

/* ---------- Card ---------- */
.solution{
  contain:content;
  min-width:0;          /* item de grid: sem isto o 1fr cresce ate o min-content */
  display:flex; flex-direction:column;
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             border-color .4s var(--ease), opacity .32s var(--ease);
}
.solution:hover{
  transform:translateY(-6px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card-hi);
}
/* estados do filtro */
.solution.is-out{ opacity:0; transform:scale(.96); pointer-events:none; }
.solution.is-hidden{ display:none; }

/* Moldura de navegador */
.solution__frame{ background:var(--surface-2); border-bottom:1px solid var(--border); }
.solution__bar{
  display:flex; align-items:center; gap:14px;
  height:46px; padding:0 18px;
  border-bottom:1px solid var(--border);
}
.solution__dots{ display:flex; gap:6px; }
.solution__dots span{
  width:10px; height:10px; border-radius:50%;
  background:var(--border-strong);
}
.solution__dots span:first-child{ background:rgba(226,90,80,.60); }
.solution__dots span:nth-child(2){ background:rgba(232,178,60,.60); }
.solution__url{
  flex:1;
  height:28px; padding:0 14px;
  display:flex; align-items:center; gap:8px;
  border-radius:99px;
  background:var(--surface);
  border:1px solid var(--border);
  font-size:12.5px; color:var(--text-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.solution__url i{ font-size:10px; opacity:.7; }
.solution__shot{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--surface-3);
}
.solution__shot img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .8s var(--ease);
}
.solution:hover .solution__shot img{ transform:scale(1.05); }

/* Corpo */
.solution__body{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
  padding:clamp(24px, 2.2vw, 32px);
  flex:1;
}
.solution__tag{
  display:inline-block;
  padding:6px 14px; border-radius:99px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-text);
}
.solution__title{
  margin:0;
  font-size:clamp(23px, 2vw, 27px); font-weight:800; letter-spacing:-.025em;
  color:var(--text);
}
.solution__desc{
  margin:0;
  font-size:15.8px; line-height:1.7;
  color:var(--text-soft);
}

/* O que o sistema faz, em pedacos. E o detalhe que faltava para o card
   nao ser so print + paragrafo. */
.solution__specs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:2px 0 auto;
}
.solution__specs li{
  padding:5px 11px;
  border-radius:8px;
  background:var(--surface-2);
  border:1px solid var(--border);
  font-size:12.5px; font-weight:500;
  color:var(--text-soft);
}

/* O link ganha uma linha propria, separado do resto por um fio. */
.solution__foot{
  width:100%;
  margin-top:20px; padding-top:18px;
  border-top:1px solid var(--border);
}
.solution__cta{ height:46px; margin-top:6px; }

.solution--feature .solution__specs li{
  background:rgba(255,255,255,.10);
  border-color:rgba(134,187,227,.28);
  color:var(--over-soft);
}

/* ---------- Card em destaque: Roleta ----------
   Unico card em painel escuro: e o convite a testar, nao mais um projeto. */
.solution--feature{
  border-color:rgba(134,187,227,.28);
  background:linear-gradient(140deg, #002A66 0%, var(--brand) 60%, #0A4699 100%);
  box-shadow:var(--shadow-card-hi);
}
.solution--feature:hover{ border-color:rgba(134,187,227,.50); }
@media (min-width: 1000px){
  .solution--feature{
    grid-column:1 / -1;        /* ocupa a linha inteira, seja qual for o numero de colunas */
    display:grid;
    grid-template-columns:minmax(0, 38%) minmax(0, 1fr);
    align-items:stretch;
  }
  /* Sem altura propria a roleta esticava o card e sobrava um campo azul
     vazio do lado do texto. Agora quem manda na altura e o corpo. */
  .solution--feature .wheel{ aspect-ratio:auto; height:100%; min-height:340px; }
  .solution--feature .solution__body{
    justify-content:center;
    gap:16px;
    padding:clamp(32px, 3.6vw, 52px);
  }
  .solution--feature .solution__desc{ max-width:52ch; }
  /* Nos outros cards o margin-bottom:auto empurra o link para o rodape.
     Aqui nao ha rodape, entao ele so abriria um buraco no meio. */
  .solution--feature .solution__specs{ margin-bottom:0; }
}
.solution__tag--light{
  background:rgba(255,255,255,.12);
  border-color:rgba(134,187,227,.35);
  color:var(--brand-soft);
}
.solution__title--light{ color:var(--over-text); }
.solution__desc--light{ color:var(--over-soft); }

/* Roleta */
.wheel{
  position:relative;
  display:grid; place-items:center;
  aspect-ratio:16 / 11;
  padding:clamp(20px, 2.4vw, 34px);
  overflow:hidden;
}
.wheel img{
  /* O print e a tela inteira do app. O recorte por aspect-ratio mostra
     o logo e a roleta e deixa a faixa branca do editor fora do quadro. */
  width:min(100%, 320px); height:auto; max-width:none;
  aspect-ratio:268 / 396;
  object-fit:cover;
  object-position:top center;
  border-radius:10px;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.45));
  transition:transform .8s var(--ease);
}
.solution--feature:hover .wheel img{ transform:translateY(-14px) scale(1.03); }

.link-arrow i{ font-size:13px; }
.link-arrow:has(i)::after{ content:none; }

/* ---------- Lista com marcacao, reaproveitada na pagina da solucao ---------- */
.panel__list{ display:grid; gap:10px; }
.panel__list li{
  position:relative;
  padding-left:28px;
  font-size:15px; line-height:1.5;
  color:var(--text);
}
.panel__list li::before{
  content:""; position:absolute; left:0; top:1px;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
}
.panel__list li::after{
  content:""; position:absolute; left:5.5px; top:6.5px;
  width:7px; height:4px;
  border-left:1.8px solid var(--accent-text);
  border-bottom:1.8px solid var(--accent-text);
  transform:rotate(-45deg);
}

.btn--quiet{
  --btn-bg:transparent; --btn-fg:var(--text);
  border:1.5px solid var(--border-strong);
}
.btn--quiet:hover{ background:var(--surface-3); }

/* ---------- Gatilho no card ---------- */
.solution__more{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600;
  color:var(--accent-text);
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.solution__more i{ font-size:13px; transition:transform .25s var(--ease); }
.solution__more:hover{ gap:12px; }
.solution__more:hover i{ transform:translateX(2px); }

.solution__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 20px;
}
.solution--feature .solution__more{ color:var(--brand-soft); }

/* =========================================================
   PAGINA DA SOLUCAO  (/solucoes/{slug})

   O card da home so cabe o resumo. Aqui cabe a tela inteira:
   print grande, galeria, video e o texto longo.
   ========================================================= */
.sol{ padding-top:calc(var(--header-h) + var(--topbar-h)); }

/* ---------- Topo ---------- */
.sol-hero{
  position:relative;
  padding:clamp(34px, 4vw, 56px) 0 var(--section-y);
  background:
    radial-gradient(60% 50% at 8% 0%, var(--accent-soft), transparent 62%),
    var(--surface-2);
  border-bottom:1px solid var(--border);
}
.sol-hero__back{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:clamp(24px, 3vw, 40px);
  font-size:14.5px; font-weight:600;
  color:var(--text-soft);
  transition:gap .25s var(--ease), color .25s var(--ease);
}
.sol-hero__back i{ font-size:13px; }
.sol-hero__back:hover{ gap:14px; color:var(--accent-text); }

.sol-hero__grid{
  display:grid;
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.15fr);
  gap:clamp(34px, 4.5vw, 68px);
  align-items:center;
}
.sol-hero__text{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.sol-hero__title{
  margin:0;
  font-size:clamp(34px, 5vw, 60px);
  line-height:1.04; font-weight:800; letter-spacing:-.03em;
  color:var(--text);
  text-wrap:balance;
}
.sol-hero__lead{
  margin:0;
  max-width:46ch;
  font-size:clamp(16.5px, 1.5vw, 19px); line-height:1.7;
  color:var(--text-soft);
}
.sol-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.sol-hero__actions .btn{ height:50px; }

.sol-hero__shot{
  margin:0;
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-card-hi);
  overflow:hidden;
}
.sol-hero__shot img{ width:100%; height:auto; display:block; }

/* ---------- Sobre + o que faz ---------- */
.sol-about{ padding:var(--section-y) 0; }
.sol-about__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:clamp(34px, 4.5vw, 72px);
  align-items:start;
}
.sol-about__text p{
  margin:0 0 18px;
  font-size:17px; line-height:1.8;
  color:var(--text-soft);
  max-width:62ch;
}
.sol-about__specs{
  padding:clamp(24px, 2.4vw, 32px);
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--surface-2);
}
.sol-about__subtitle{
  margin:0 0 18px;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-mute);
}

/* ---------- Video ---------- */
.sol-video{ padding:0 0 var(--section-y); }
.sol-video__frame{
  margin-top:20px;
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--panel-3);
  overflow:hidden;
  isolation:isolate;
  box-shadow:var(--shadow-card);
}
.sol-video__frame video{ width:100%; height:auto; display:block; aspect-ratio:16 / 9; background:#000; }

/* ---------- Galeria ---------- */
.sol-shots{ padding:0 0 var(--section-y); }
/* Quantas colunas cada solucao usa vem do editor, via --sol-shots-cols no
   proprio grid; 2 e o padrao. A imagem e recortada num retangulo fixo para
   que print de celular e print de desktop nao deixem o card torto. */
.sol-shots__grid{
  --sol-shots-cols:2;          /* o editor sobrescreve no style= do elemento */
  display:grid;
  grid-template-columns:repeat(var(--sol-shots-cols), minmax(0, 1fr));
  gap:24px;
  margin-top:20px;
}
.sol-shots__item{
  margin:0;
  display:flex;
  flex-direction:column;
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.sol-shots__item img{
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:top center;
}
.sol-shots__item figcaption{
  margin-top:auto;
  padding:14px 18px 16px;
  font-size:13.5px; line-height:1.5;
  color:var(--text-mute);
  border-top:1px solid var(--border);
}

/* ---------- Como funciona ---------- */
.sol-highlights{ padding:0 0 var(--section-y); }
.sol-highlights__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:22px;
  margin-top:20px;
}
.sol-highlight{
  padding:clamp(22px, 2.2vw, 30px);
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--surface);
}
.sol-highlight__num{
  display:block; margin-bottom:14px;
  font-size:13px; font-weight:800; letter-spacing:.12em;
  color:var(--accent-text);
}
.sol-highlight h3{ margin:0 0 8px; font-size:19px; font-weight:700; color:var(--text); }
.sol-highlight p{ margin:0; font-size:15px; line-height:1.65; color:var(--text-soft); }

/* ---------- Chamada ---------- */
.sol-cta{ padding:0 0 var(--section-y); }
.sol-cta__box{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px 32px;
  padding:clamp(28px, 3.2vw, 44px);
  border-radius:var(--card-radius);
  background:linear-gradient(135deg, var(--brand) 0%, #233D8A 100%);
  color:var(--over-text);
  box-shadow:var(--shadow-card-hi);
}
.sol-cta__title{
  margin:0 0 6px;
  font-size:clamp(22px, 2.4vw, 30px); font-weight:800; letter-spacing:-.025em;
}
.sol-cta__text{ margin:0; font-size:16px; line-height:1.6; color:var(--over-soft); }

/* ---------- Veja tambem ---------- */
/* O print manda no cartao: com a miniatura de 60px ninguem reconhecia o
   sistema, e segmento + nome + seta disputavam a mesma linha apertada. */
.sol-more{ padding:0 0 var(--section-y); }
.sol-more__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:20px;
  margin-top:20px;
}
.sol-more__item{
  display:flex; flex-direction:column;
  border-radius:var(--card-radius);
  border:1px solid var(--border);
  background:var(--surface);
  overflow:hidden;
  transition:transform .28s var(--ease), border-color .28s var(--ease),
             box-shadow .28s var(--ease);
}
.sol-more__item:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}
.sol-more__shot{
  display:block; overflow:hidden;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
}
.sol-more__shot img{
  display:block; width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover; object-position:top center;
  transition:transform .4s var(--ease);
}
.sol-more__item:hover .sol-more__shot img{ transform:scale(1.04); }
.sol-more__body{
  display:flex; flex-direction:column; gap:6px;
  flex:1; min-width:0;
  padding:16px 18px 18px;
}
.sol-more__body small{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute); }
.sol-more__body strong{ font-size:17px; font-weight:700; line-height:1.3; color:var(--text); }
.sol-more__text{
  font-size:13.5px; line-height:1.55; color:var(--text-mute);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden;
}
.sol-more__cta{
  margin-top:auto; padding-top:12px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700;
  color:var(--accent-text);
}
.sol-more__cta i{ font-size:12px; transition:transform .28s var(--ease); }
.sol-more__item:hover .sol-more__cta i{ transform:translateX(3px); }

/* ---------- Ampliar imagem ---------- */
.sol-zoom{
  display:block; position:relative;
  width:100%; margin:0; padding:0; border:0;
  background:none; color:inherit; font:inherit; text-align:inherit;
  cursor:zoom-in;
}
.sol-zoom__badge{
  position:absolute; right:10px; bottom:10px;
  display:grid; place-items:center;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff; font-size:13px;
  opacity:0; transform:translateY(4px);
  transition:opacity .24s var(--ease), transform .24s var(--ease);
  pointer-events:none;
}
.sol-zoom:hover .sol-zoom__badge,
.sol-zoom:focus-visible .sol-zoom__badge{ opacity:1; transform:none; }
.sol-zoom:focus-visible{ outline:2px solid var(--accent-text); outline-offset:3px; }

.lightbox{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:72px 84px;
  background:rgba(6,8,12,.93);
  opacity:0;
  transition:opacity .28s var(--ease);
}
.lightbox.is-visible{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lightbox__figure{
  margin:0; display:flex; flex-direction:column; gap:14px;
  align-items:center;
  max-width:100%; max-height:100%;
}
.lightbox__image{
  display:block;
  max-width:100%; max-height:calc(100vh - 170px);
  width:auto; height:auto;
  border-radius:14px;
  object-fit:contain;
}
.lightbox__caption{
  text-align:center; font-size:14px; line-height:1.5;
  color:#D7DCE5;
  max-width:70ch;
}
.lightbox__close,
.lightbox__nav{
  position:absolute;
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff; font-size:16px; cursor:pointer;
  transition:background .24s var(--ease), border-color .24s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.lightbox__close{ top:18px; right:18px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); }
.lightbox__nav--prev{ left:18px; }
.lightbox__nav--next{ right:18px; }
body.zoom-open{ overflow:hidden; }



/* =========================================================
   FEEDBACKS
   ========================================================= */
.feedbacks{
  position:relative;
  padding:var(--section-y) 0;
  background:var(--surface-2);
  border-block:1px solid var(--border);
}
.feedbacks__head{ max-width:860px; margin-bottom:var(--section-head); }

.google-card{
  display:inline-flex; align-items:center; gap:16px;
  margin-top:26px;
  padding:14px 20px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-card);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.google-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hi); }
.google-card__g{ display:grid; place-items:center; width:34px; height:34px; font-size:26px; }
.google-card__g i{ font-size:24px; color:var(--accent-text); }
.google-card__body{ display:flex; flex-direction:column; gap:3px; }
.google-card__count{ font-size:12.5px; color:var(--text-mute); }
.google-card__body strong{ font-size:14.5px; font-weight:700; color:var(--text); }
.google-card__stars{ display:flex; gap:2px; font-size:14px; color:var(--highlight); }
.google-card__arrow{ font-size:18px; color:var(--accent-text); transition:transform .25s var(--ease); }
.google-card:hover .google-card__arrow{ transform:translateX(4px); }

/* ---------- Carrossel ----------
   Uma linha so, passando por todos os depoimentos. O laco e continuo
   porque o Blade imprime a lista duas vezes: quando a primeira copia
   termina de sair da tela, a segunda ja esta na posicao inicial. */
.feedbacks__rail{
  position:relative;
  overflow:hidden;
  padding-block:6px;          /* espaco para a sombra do card no hover */
  /* as pontas desbotam para os cards entrarem e sairem sem corte seco */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.feedbacks__track{
  display:flex; align-items:stretch;
  gap:24px;
  width:max-content;
  animation:feedbackMarquee var(--marquee) linear infinite;
  will-change:transform;
}
/* Meio percurso = uma copia da lista. O -12px e metade do gap: sem ele
   sobra um vao entre a ultima copia e o reinicio, e o laco "pula". */
@keyframes feedbackMarquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 12px)); }
}
/* Ninguem consegue ler um card que nao para. */
.feedbacks__rail:hover .feedbacks__track,
.feedbacks__rail:focus-within .feedbacks__track{ animation-play-state:paused; }

.feedback{
  contain:content;
  flex:0 0 clamp(290px, 26vw, 355px);
  position:relative;
  display:flex; flex-direction:column; gap:16px;
  padding:32px 28px 28px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-card);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feedback:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card-hi); }
.feedback__quote{
  position:absolute; right:22px; top:20px;
  font-size:34px;
  color:var(--border-strong);
}
.feedback__stars{ display:flex; gap:3px; font-size:16px; color:var(--highlight); }
.feedback__text{
  margin:0 0 auto;
  font-size:15.5px; line-height:1.75;
  color:var(--text-soft);
}
.feedback__author{
  display:flex; align-items:center; gap:13px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.feedback__avatar{
  flex:0 0 auto;        /* nome longo nao pode achatar o avatar num oval */
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(140deg, var(--accent), var(--accent-hover));
  color:var(--on-accent);
  font-size:14.5px; font-weight:700; letter-spacing:.04em;
}
.feedback__who{ display:flex; flex-direction:column; gap:2px; }
.feedback__who strong{ font-size:15px; font-weight:700; color:var(--text); overflow-wrap:anywhere; }
.feedback__who small{ font-size:12.8px; color:var(--text-mute); }
.feedback__who time{ font-variant-numeric:tabular-nums; }

/* =========================================================
   CONTATO
   ========================================================= */
.contact{
  position:relative;
  padding:var(--section-y) 0;
  color:var(--panel-text);
  background:
    radial-gradient(65% 55% at 12% 8%, var(--panel-accent-d), transparent 60%),
    linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
  overflow:clip;
}
.contact::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--panel-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--panel-line) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.5;
  -webkit-mask-image:radial-gradient(75% 60% at 20% 10%, #000, transparent 72%);
  mask-image:radial-gradient(75% 60% at 20% 10%, #000, transparent 72%);
  pointer-events:none;
}

.contact__head{
  position:relative; z-index:1;
  max-width:860px; margin-bottom:var(--section-head);
}

.contact__grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:clamp(40px, 5vw, 76px);
  align-items:stretch;      /* os dois cards fecham na mesma linha embaixo */
}
.contact__info{
  display:flex; flex-direction:column; justify-content:center;
  gap:34px;
  padding:clamp(26px, 3vw, 38px);
  border-radius:20px;
  background:linear-gradient(135deg, var(--brand) 0%, #233D8A 100%);
  box-shadow:var(--shadow-card-hi);
  color:var(--over-text);

  --panel-text:     var(--over-text);
  --panel-soft:     var(--over-soft);
  --panel-mute:     var(--over-mute);
  --panel-line:     var(--over-line);
  --panel-accent:   var(--brand-soft);
  --panel-accent-d: rgba(255,255,255,.12);
}

.contact__sub{
  margin:0;
  max-width:58ch;
  font-size:16.5px; line-height:1.75;
  color:var(--panel-soft);
}

/* ---------- Lista de contatos ---------- */
.contact__list{ display:grid; gap:12px; }
.contact__item a{
  display:flex; align-items:center; gap:16px;
  padding:15px 18px;
  border-radius:16px;
  border:1px solid var(--panel-line);
  background:rgba(255,255,255,.07);
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             transform .3s var(--ease);
}
.contact__item a:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(134,187,227,.45);
  transform:translateX(5px);
}
.contact__icon{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:13px;
  font-size:20px;
  color:var(--panel-accent);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(134,187,227,.30);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.contact__item a:hover .contact__icon{ background:rgba(255,255,255,.22); }
.contact__icon--whats{
  color:#4FE07E;
  background:rgba(37,211,102,.14);
  border-color:rgba(37,211,102,.3);
}
.contact__item a:hover .contact__icon--whats{ background:rgba(37,211,102,.24); }
.contact__data{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.contact__data small{
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--panel-mute);
}
.contact__data strong{
  font-size:15.5px; font-weight:600;
  color:var(--panel-text);
  overflow-wrap:anywhere;
}

/* ---------- Redes ---------- */
.contact__social{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding-top:28px;
  border-top:1px solid var(--panel-line);
}
.contact__formwrap{ display:flex; }
.contact__formwrap .form{ flex:1; }
.contact__social-label{
  font-size:13.5px; font-weight:600; letter-spacing:.03em;
  color:var(--panel-mute);
}
.contact__social-icons{ display:flex; gap:10px; }
.contact__social-icons a{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  font-size:19px;
  color:var(--panel-soft);
  border:1px solid var(--panel-line);
  background:rgba(255,255,255,.07);
  transition:transform .25s var(--ease), color .25s var(--ease),
             background-color .25s var(--ease), border-color .25s var(--ease);
}
.contact__social-icons a:hover{
  transform:translateY(-3px);
  color:var(--brand-soft);
  background:rgba(255,255,255,.16);
  border-color:rgba(134,187,227,.40);
}

/* ---------- Formulario ---------- */
.form{
  padding:clamp(26px, 3vw, 40px);
  border-radius:24px;
  border:1px solid var(--panel-line);
  background:var(--panel-card);
  box-shadow:var(--shadow-card-hi);
}
.form__title{
  margin:0 0 26px;
  font-size:23px; font-weight:800; letter-spacing:-.02em;
}
.form__field{ margin-bottom:18px; }
.form__field label{
  display:block; margin-bottom:8px;
  font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--panel-mute);
}
.form__field input,
.form__field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:13px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-family:inherit; font-size:15px; line-height:1.5;
  transition:border-color .25s var(--ease), background-color .25s var(--ease),
             box-shadow .25s var(--ease);
}
.form__field textarea{ resize:vertical; min-height:120px; }
.form__field input::placeholder,
.form__field textarea::placeholder{ color:var(--text-mute); }
.form__field input:focus,
.form__field textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.form__field input:user-invalid,
.form__field textarea:user-invalid{ border-color:rgba(232,110,100,.7); }

.form__submit{ width:100%; height:52px; margin-top:8px; }
.form__submit i{ font-size:15px; transition:transform .25s var(--ease); }
.form__submit:hover i{ transform:translateX(4px); }

.form__status{
  margin:16px 0 0;
  min-height:20px;
  font-size:14px; line-height:1.5;
  color:var(--accent-text);
}
.form__status.is-error{ color:#C0392B; }

/* Brilho discreto no hover do botao */
.btn--glow{ position:relative; overflow:hidden; }
.btn--glow::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%;
  width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.40), transparent);
  transform:skewX(-18deg);
  transition:left .7s var(--ease);
}
.btn--glow:hover{ box-shadow:0 10px 34px rgba(0,59,140,.30); }
.btn--glow:hover::after{ left:120%; }

/* =========================================================
   RODAPE
   ========================================================= */
.footer{
  position:relative;
  padding:78px 0 0;
  background:var(--panel-3);
  color:var(--panel-soft);
  border-top:1px solid var(--panel-line);
  box-shadow:0 -6px 18px rgba(0,0,0,.05);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.25fr .85fr 1.05fr 1.15fr;
  gap:clamp(30px, 3.4vw, 54px);
  padding-bottom:56px;
}

/* Marca */
.footer__logo{
  height:44px; width:auto; margin-bottom:20px;
}
.footer__logo--white{ display:var(--only-dark); }
.footer__logo--color{ display:var(--only-light); }
.footer__tagline{
  margin:0 0 24px;
  max-width:34ch;
  font-size:14.8px; line-height:1.7;
  color:var(--panel-soft);
}
.footer__social{ display:flex; gap:10px; }
.footer__social a{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:11px;
  font-size:18px;
  color:var(--panel-soft);
  border:1px solid var(--panel-line);
  transition:transform .25s var(--ease), color .25s var(--ease),
             background-color .25s var(--ease), border-color .25s var(--ease);
}
.footer__social a:hover{
  transform:translateY(-3px);
  color:var(--panel-accent);
  background:var(--panel-accent-d);
  border-color:var(--accent-line);
}

/* Colunas */
.footer__title{
  margin:0 0 20px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--panel-text);
}
.footer__title::after{
  content:""; display:block;
  width:30px; height:2px; margin-top:10px; border-radius:2px;
  background:linear-gradient(90deg, var(--panel-accent), transparent);
}

.footer__links{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:11px 18px;
}
.footer__links a,
.footer__links button,
.footer__contacts a{
  font-size:14.5px; line-height:1.5;
  color:var(--panel-soft);
  transition:color .22s var(--ease), transform .22s var(--ease);
  display:inline-block;
}
.footer__links a:hover,
.footer__links button:hover,
.footer__contacts a:hover{ color:var(--panel-accent); transform:translateX(3px); }
.footer__links button{ padding:0; text-align:left; }
.footer__links button[hidden]{ display:none; }

.footer__contacts{ display:grid; gap:14px; }
.footer__contacts li{ font-size:14.5px; line-height:1.55; }
.footer__contacts a,
.footer__addr{ display:flex; align-items:flex-start; gap:11px; }
.footer__addr{ color:var(--panel-soft); }
.footer__ico{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:9px;
  font-size:15px;
  color:var(--panel-accent);
  background:var(--panel-accent-d);
  border:1px solid var(--accent-line);
}

/* Mapa */
.footer__map{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;          /* sem isto o iframe vaza do canto arredondado */
  border:1px solid var(--panel-line);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  aspect-ratio:16 / 10;
  background:var(--panel-2);
}
.footer__map iframe{
  width:100%; height:100%;
  display:block;
  filter:grayscale(.25);
}
.footer__map iframe[hidden],
.footer__map-consent[hidden]{ display:none; }
.footer__map-consent{
  height:100%; padding:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center;
}
.footer__map-consent > i{ font-size:24px; color:var(--panel-accent); }
.footer__map-consent p{ margin:0; font-size:12px; line-height:1.5; }
.footer__map-consent button{
  padding:4px 0; font-size:12px; font-weight:600;
  color:var(--panel-accent); text-decoration:underline; text-underline-offset:3px;
}
:root[data-theme="dark"] .footer__map iframe{
  filter:grayscale(.5) invert(.92) hue-rotate(180deg) contrast(.9);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .footer__map iframe{
    filter:grayscale(.5) invert(.92) hue-rotate(180deg) contrast(.9);
  }
}
.footer__route{
  width:100%; height:48px; margin-top:14px;
  font-size:14.5px;
}
.footer__route i{ font-size:15px; }

/* Barra final */
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 24px;
  /* Sangra ate a borda da tela, mas o texto continua alinhado
     com as colunas de cima. O .container do markup daria uma faixa
     azul boiando no meio do rodape. */
  max-width:none;
  padding-block:20px;
  padding-inline:max(24px, calc((100% - var(--container)) / 2 + 24px));
  background:var(--brand);
  font-size:13.5px;
  color:rgba(255,255,255,.82);
}
.footer__bottom p{ margin:0; }
.footer__bottom a{ transition:color .22s var(--ease); }
.footer__bottom a:hover{ color:#FFFFFF; }

/* =========================================================
   POLITICA DE PRIVACIDADE
   ========================================================= */
.privacy__hero{
  padding:clamp(32px, 4vw, 56px) 0;
  background:linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--surface-2);
  border-bottom:1px solid var(--border);
}
.privacy__hero .eyebrow{ display:block; margin-bottom:14px; }
.privacy__hero h1{
  max-width:850px; margin:0;
  font-size:clamp(36px, 5vw, 62px); line-height:1.1; font-weight:800; letter-spacing:-.035em;
  text-wrap:balance;
}
.privacy__hero p{ max-width:680px; margin:20px 0; font-size:17px; line-height:1.7; color:var(--text-soft); }
.privacy__updated{ display:flex; align-items:center; gap:10px; font-size:12px; line-height:1.6; color:var(--text-soft); }
.privacy__updated i{ color:var(--accent-text); }
.privacy__layout{ display:grid; grid-template-columns:260px minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); padding-block:56px 80px; }
.privacy__sidebar{ position:sticky; top:calc(var(--header-h-sm) + 24px); align-self:start; min-width:0; }
.privacy__index{ padding:22px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.privacy__index h2{ margin:0 0 14px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.privacy__index ol{ margin:0; padding:0; list-style:none; counter-reset:privacy-section; }
.privacy__index li{ counter-increment:privacy-section; }
.privacy__index a{ display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 0; font-size:13px; line-height:1.5; color:var(--text-soft); }
.privacy__index a::before{ content:counter(privacy-section, decimal-leading-zero); font-size:11px; color:var(--accent-text); }
.privacy__index a:hover{ color:var(--accent-text); }
.privacy__help{ margin-top:18px; padding:22px; border-radius:16px; background:var(--accent-soft); }
.privacy__help > i{ font-size:22px; color:var(--accent-text); }
.privacy__help h2{ margin:14px 0 8px; font-size:15px; line-height:1.5; }
.privacy__help p{ margin:0 0 16px; font-size:13px; line-height:1.65; color:var(--text-soft); }
.privacy__help button{ width:100%; }
.privacy__content{ min-width:0; max-width:800px; }
.privacy__content section + section{ margin-top:36px; padding-top:36px; border-top:1px solid var(--border); }
.privacy__content h2{ display:flex; align-items:baseline; gap:14px; margin:0 0 18px; font-size:22px; line-height:1.4; letter-spacing:-.02em; }
.privacy__content h2 > span{ flex:0 0 auto; font-size:13px; color:var(--accent-text); }
.privacy__content p,
.privacy__content li,
.privacy__content dd{ font-size:15px; line-height:1.85; color:var(--text-soft); }
.privacy__content p{ margin:0 0 16px; }
.privacy__content p:last-child{ margin-bottom:0; }
.privacy__content strong{ color:var(--text); font-weight:600; }
.privacy__content ul{ list-style:disc; padding-left:22px; margin:0 0 18px; }
.privacy__content li + li{ margin-top:10px; }
.privacy__content li::marker{ color:var(--accent-text); }
.privacy__content a{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.privacy__callout{ margin-top:22px; padding:22px; border-left:3px solid var(--accent); border-radius:0 12px 12px 0; background:var(--surface-2); }
.privacy__callout h3{ margin:0 0 10px; font-size:16px; }
.privacy__storage{ margin:20px 0; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.privacy__storage > div{ padding:18px 20px; }
.privacy__storage > div + div{ border-top:1px solid var(--border); }
.privacy__storage dt{ margin-bottom:6px; font-size:14px; font-weight:600; }
.privacy__storage dd{ margin:0; font-size:14px; }
.privacy__contact{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin:20px 0; padding:22px; border-radius:14px; background:var(--accent-soft); }
.privacy__contact a{ display:flex; align-items:center; gap:12px; max-width:100%; font-size:14px; }
.privacy__contact i{ flex:0 0 auto; }

/* =========================================================
   COOKIES E PREFERENCIAS
   ========================================================= */
.cookie-banner,
.cookie-dialog{
  padding:24px;
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 12px 48px rgba(0,0,0,.20);
}
.cookie-banner{
  position:fixed; z-index:85;
  left:max(24px, env(safe-area-inset-left));
  bottom:calc(24px + env(safe-area-inset-bottom));
  width:min(440px, calc(100% - 48px));
  max-height:calc(100dvh - 100px); overflow-y:auto;
}
.cookie-banner[hidden]{ display:none; }
body.nav-open .cookie-banner,
body.zoom-open .cookie-banner{ visibility:hidden; }
.cookie-banner__heading,
.cookie-dialog__heading,
.cookie-category__heading{ display:flex; align-items:center; gap:12px; }
.cookie-banner__icon{
  display:grid; place-items:center; flex:0 0 auto;
  width:38px; height:38px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent-text); font-size:19px;
}
.cookie-banner h2,
.cookie-dialog h2{ margin:0; font-size:18px; font-weight:700; letter-spacing:-.02em; }
.cookie-banner p,
.cookie-dialog p{ margin:14px 0 20px; font-size:13px; line-height:1.65; color:var(--text-soft); }
.cookie-actions{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.cookie-button{
  min-height:44px; padding:10px 12px;
  border:1px solid var(--accent); border-radius:10px;
  background:var(--accent); color:var(--on-accent);
  font-size:13px; font-weight:600; line-height:1.4;
  transition:background-color .2s var(--ease), border-color .2s var(--ease);
}
.cookie-button:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.cookie-button--secondary{ background:var(--surface); border-color:var(--border-strong); color:var(--text); }
.cookie-button--secondary:hover{ background:var(--surface-2); border-color:var(--text-mute); }
.cookie-settings-link{
  display:block; min-height:44px; margin:8px auto -8px; padding:8px;
  font-size:12px; font-weight:600; color:var(--accent-text);
  text-decoration:underline; text-underline-offset:3px;
}
.cookie-dialog{ width:min(520px, calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; }
.cookie-dialog::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
body:has(.cookie-dialog[open]){ overflow:hidden; }
.cookie-dialog__heading{ justify-content:space-between; }
.cookie-dialog__close{
  display:grid; place-items:center; flex:0 0 auto;
  width:44px; height:44px; margin:-8px -8px -8px 0; border-radius:10px;
  font-size:20px; color:var(--text-soft);
}
.cookie-dialog__close:hover{ background:var(--surface-2); }
.cookie-category{ margin-top:12px; padding:16px; border:1px solid var(--border); border-radius:12px; }
.cookie-category__heading{ justify-content:space-between; }
.cookie-category h3,
.cookie-category__title{ margin:0; font-size:14px; font-weight:600; }
.cookie-category__status{ flex:0 0 auto; font-size:11px; font-weight:600; color:var(--accent-text); }
.cookie-category p{ margin:8px 0 0; font-size:12px; }
.cookie-category label{ cursor:pointer; min-height:32px; }
.cookie-category input{ width:22px; height:22px; flex:0 0 auto; margin:0; accent-color:var(--accent); cursor:pointer; }
.cookie-dialog a,
.cookie-banner p a{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.cookie-dialog .cookie-dialog__note{ font-size:12px; }

/* =========================================================
   BOTOES FLUTUANTES (WhatsApp + voltar ao topo)
   ========================================================= */
.dock{
  position:fixed; z-index:75;
  right:max(24px, env(safe-area-inset-right));
  bottom:calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; visibility:hidden;
  transform:translateY(18px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.dock.is-visible{ opacity:1; visibility:visible; transform:none; }

.dock__btn{
  position:relative;
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:50%;
  font-size:26px;
  color:#FFFFFF;
  box-shadow:var(--shadow-md);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease);
}
.dock__btn:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.34); }

.dock__btn--whats{ background:#25D366; }
.dock__btn--whats:hover{ background:#1EBE5A; }

.dock__btn--top{
  font-size:22px;
  background:var(--accent); color:var(--on-accent);
}
.dock__btn--top:hover{ background:var(--accent-hover); }

/* anel pulsante do WhatsApp */
.dock__pulse{
  position:absolute; inset:0; border-radius:50%;
  background:#25D366;
  opacity:.55;
  animation:dockPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes dockPulse{
  0%  { transform:scale(1);   opacity:.5; }
  70% { transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}

/* rotulo que aparece no hover */
.dock__label{
  position:absolute; right:calc(100% + 12px); top:50%;
  transform:translateY(-50%) translateX(8px);
  padding:8px 14px; border-radius:999px;
  background:var(--brand); color:#FFFFFF;
  font-size:13.5px; font-weight:600; white-space:nowrap;
  box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.dock__btn--whats:hover .dock__label,
.dock__btn--whats:focus-visible .dock__label{
  opacity:1; transform:translateY(-50%) translateX(0);
}

/* =========================================================
   QUANDO O GSAP ASSUME AS TRANSFORMACOES
   (evita que CSS e JS disputem a mesma propriedade)
   ========================================================= */
html.gsap-on .service{ transform-origin:50% 0%; will-change:transform, opacity; }

/* =========================================================
   RESPONSIVO
   Estrutura:
     <=1120px  ajustes de grade larga
     <=900px   LAYOUT MOBILE (menu em tela cheia, uma coluna)
     <=560px   refino de celular
     <=380px   telas estreitas
     paisagem  telas baixas
   ========================================================= */

/* ---------------------------------------------------------
   Tablet / notebook estreito
   --------------------------------------------------------- */
@media (max-width: 1120px){

  .sol-shots__grid{ grid-template-columns:repeat(min(var(--sol-shots-cols), 2), minmax(0, 1fr)); }

  .nav{ gap:18px; }
  .nav__link{ padding:10px 9px; font-size:14.5px; }
  .service{ gap:30px; }
}

/* =========================================================
   MOBILE  (<= 900px)
   ========================================================= */
@media (max-width: 900px){

  .privacy__layout{ grid-template-columns:1fr; gap:32px; padding-block:32px 56px; }
  .privacy__sidebar{ position:static; }
  .privacy__index ol{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:20px; }
  .privacy__help{ display:none; }
  .privacy__content{ max-width:none; }

  .sol{ padding-top:var(--header-h); }
  .sol-hero__grid,
  .sol-about__grid{ grid-template-columns:1fr; gap:30px; }
  .sol-hero__actions{ width:100%; flex-direction:column; align-items:stretch; }
  .sol-hero__actions .btn{ width:100%; }
  .sol-shots__grid,
  .sol-highlights__grid,
  .sol-more__grid{ grid-template-columns:1fr; }
  .lightbox{ padding:64px 16px 88px; }
  .lightbox__image{ max-height:calc(100vh - 200px); }
  .lightbox__nav{ top:auto; bottom:18px; transform:none; }
  .lightbox__nav--prev{ left:calc(50% - 54px); }
  .lightbox__nav--next{ right:calc(50% - 54px); }
  .sol-cta__box{ flex-direction:column; align-items:stretch; text-align:left; }
  .sol-cta__box .btn{ width:100%; height:50px; }


  :root{
    --header-h:75px;
    --header-h-sm:64px;
    --topbar-h:0px;
    --section-y:clamp(64px, 12vw, 88px);
    --section-head:30px;
    --card-radius:18px;
  }

  .container{ padding-inline:20px; }

  /* ---------- Cabecalho ---------- */
  .topbar{ display:none; }
  .burger{ display:block; flex:0 0 auto; }
  .header__inner{ justify-content:flex-start; gap:8px; }
  .header__actions{ margin-left:auto; }
  .theme-toggle{ width:44px; height:44px; }
  .brand__logo{ height:33px; }
  body.is-scrolled .brand__logo{ height:30px; }
  body.is-scrolled .header{ background:var(--header-bg); }

  /* ---------- Menu em tela cheia ---------- */
  .nav{
    position:fixed; inset:0;
    z-index:90;
    width:100%;
    height:100dvh;
    visibility:hidden;
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    padding:calc(84px + env(safe-area-inset-top)) 26px calc(30px + env(safe-area-inset-bottom));
    background:
      radial-gradient(80% 50% at 85% 8%, var(--panel-accent-d), transparent 60%),
      linear-gradient(165deg, var(--panel-2) 0%, var(--panel) 100%);
    --nav-fg:        var(--panel-soft);
    --nav-fg-strong: var(--panel-text);
    transform:translateX(100%);
    transition:transform .38s var(--ease), visibility .38s;
    overflow-y:auto;
    overscroll-behavior:contain;
    box-shadow:none;
  }
  .nav.is-open{ transform:translateX(0); visibility:visible; }

  .nav__close{
    display:grid; place-items:center;
    position:absolute; top:calc(18px + env(safe-area-inset-top)); right:16px;
    width:46px; height:46px; border-radius:12px;
    font-size:22px; color:var(--panel-text);
    background:var(--panel-accent-d);
    border:1px solid var(--panel-line);
  }

  .nav__list{
    flex-direction:column; align-items:stretch; gap:0;
    counter-reset:navitem;
  }
  .nav__list li{
    counter-increment:navitem;
    opacity:0; transform:translateY(14px);
    transition:opacity .32s var(--ease), transform .32s var(--ease);
    border-bottom:1px solid var(--panel-line);
  }
  .nav.is-open .nav__list li{ opacity:1; transform:none; }
  .nav.is-open .nav__list li:nth-child(1){ transition-delay:.06s; }
  .nav.is-open .nav__list li:nth-child(2){ transition-delay:.11s; }
  .nav.is-open .nav__list li:nth-child(3){ transition-delay:.16s; }
  .nav.is-open .nav__list li:nth-child(4){ transition-delay:.21s; }
  .nav.is-open .nav__list li:nth-child(5){ transition-delay:.26s; }
  .nav.is-open .nav__list li:nth-child(6){ transition-delay:.31s; }

  .nav__link{
    display:flex; align-items:baseline; gap:14px;
    padding:17px 2px;
    font-size:22px; font-weight:700; letter-spacing:-.02em;
    color:var(--nav-fg-strong);
  }
  .nav__link::before{
    content:"0" counter(navitem);
    font-size:11.5px; font-weight:700; letter-spacing:.14em;
    color:var(--panel-accent); opacity:.65;
  }
  .nav__link::after{ display:none; }
  .nav__link.is-active{ color:var(--panel-accent); }

  .header .nav__cta{
    --btn-bg:var(--accent); --btn-fg:var(--on-accent);
    margin-top:26px; width:100%; height:52px; font-size:15.5px;
    opacity:0; transform:translateY(14px);
    transition:opacity .32s var(--ease) .36s, transform .32s var(--ease) .36s;
  }
  .nav.is-open .nav__cta{ opacity:1; transform:none; }

  .nav__foot{
    display:flex; flex-direction:column; gap:14px;
    margin-top:auto; padding-top:28px;
    opacity:0;
    transition:opacity .32s var(--ease) .44s;
  }
  .nav.is-open .nav__foot{ opacity:1; }
  .nav__foot-link{
    display:flex; align-items:center; gap:11px;
    font-size:14.5px; color:var(--panel-soft);
    overflow-wrap:anywhere;
  }
  .nav__foot-link i{ font-size:15px; color:var(--panel-accent); flex:0 0 auto; }
  .nav__foot-social{ display:flex; gap:10px; margin-top:6px; }
  .nav__foot-social a{
    display:grid; place-items:center;
    width:46px; height:46px; border-radius:13px;
    font-size:19px; color:var(--panel-text);
    background:var(--panel-accent-d);
    border:1px solid var(--panel-line);
  }

  /* hamburguer -> X */
  body.nav-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  body.nav-open .burger span:nth-child(2){ opacity:0; }
  body.nav-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  body.nav-open{ overflow:hidden; }
  .overlay{ display:none; }          /* o menu ocupa a tela toda */

  /* ---------- Hero ---------- */
  .hero{
    min-height:100svh;
    padding:calc(var(--header-h) + 40px) 0 calc(96px + env(safe-area-inset-bottom));
  }
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(8,9,11,.90) 0%, rgba(13,15,19,.78) 42%, rgba(8,9,11,.94) 100%),
      radial-gradient(75% 45% at 72% 16%, rgba(134,187,227,.20), transparent 68%);
  }
  .hero__scroll{ display:none; }
  .hero__tag{ font-size:11px; letter-spacing:.09em; padding:7px 14px; margin-bottom:20px; }
  .hero__title{ font-size:clamp(38px, 11.5vw, 56px); line-height:1.04; margin-bottom:14px; }
  .hero__kicker{ font-size:17px; margin-bottom:20px; }
  .hero__inner--split{ grid-template-columns:1fr; gap:36px; }
  .hero__shots{ --shot-step:10%; aspect-ratio:3 / 2; }
  .hero__text{ font-size:15.8px; line-height:1.72; margin-bottom:30px; }
  .hero__actions{ flex-direction:column; align-items:stretch; gap:11px; }
  .hero__actions .btn{ width:100%; height:52px; }

  /* ---------- Sobre ---------- */
  .velocity{ padding:22px 0 44px; }
  .velocity__group{ font-size:clamp(30px, 9vw, 52px); }

  .about__intro{ grid-template-columns:1fr; gap:26px; }
  .team__member{ flex-basis:100%; max-width:none; }
  .about__text{ font-size:15.8px; line-height:1.75; }
  .pillars{ grid-template-columns:1fr; gap:14px; }
  .pillar__icon{ width:40px; height:40px; font-size:18px; }
  .about__cta{ flex-direction:column; align-items:stretch; gap:14px; }
  .about__cta .btn{ width:100%; height:50px; }
  .about__cta .link-arrow{ justify-content:center; }

  /* ---------- Servicos ---------- */
  .services__stack{ gap:18px; }
  .service{
    position:static;                 /* sem empilhamento fixado no celular */
    grid-template-columns:1fr;
    gap:20px;
    padding:18px 18px 24px;
    border-radius:var(--card-radius);
    will-change:auto;
  }
  .service__media{
    max-width:none;
    border-radius:14px;
    aspect-ratio:16 / 10;            /* a arte quadrada tomava a tela inteira */
  }
  .service__media img{ height:100%; object-fit:cover; }
  .service__num{ right:16px; top:8px; font-size:44px; }
  .service__title{ font-size:22px; }
  .service__lead{ font-size:15px; margin-bottom:14px; }
  .service__list{ gap:10px; padding-top:16px; margin-bottom:22px; }
  .service__list li{ font-size:14.2px; }
  .service__cta{ width:100%; height:48px; }
  .trail{ display:none; }            /* nao existe cursor no toque */

  /* ---------- Solucoes ---------- */
  .solutions__grid{ grid-template-columns:1fr; gap:16px; }
  .solutions__sub{ font-size:15.5px; }
  .solution__shot{ aspect-ratio:16 / 10; }
  .solution__body{ padding:20px 20px 22px; gap:9px; }
  .solution__title{ font-size:20px; }
  .solution__desc{ font-size:14.2px; }

  .filters{
    gap:8px; margin-top:20px;
    overflow-x:auto; flex-wrap:nowrap;
    scrollbar-width:none;
    margin-inline:-20px; padding-inline:20px;
  }
  .filters::-webkit-scrollbar{ display:none; }
  .filters__btn{ flex:0 0 auto; padding:11px 20px; font-size:14px; }

  /* ---------- Feedbacks ---------- */
  /* No toque nao ha hover para pausar, entao a linha deixa de andar
     sozinha e passa a ser arrastada com o dedo. */
  .feedbacks__track{ animation:none; }
  .feedbacks__rail{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;      /* nao dispara o "voltar" do navegador */
    scrollbar-width:none;
    margin-inline:-20px; padding-inline:20px;
    -webkit-mask-image:none; mask-image:none;
  }
  .feedbacks__rail::-webkit-scrollbar{ display:none; }
  .feedback[aria-hidden="true"]{ display:none; }
  .feedback{
    flex:0 0 82vw; max-width:340px;
    scroll-snap-align:center;
    padding:26px 22px 24px; border-radius:var(--card-radius);
  }
  .feedback__text{ font-size:15px; }
  .google-card{ width:100%; margin-top:20px; }

  /* ---------- Contato ---------- */
  .contact__grid{ grid-template-columns:1fr; gap:38px; }
  .contact__sub{ margin-bottom:26px; font-size:15.8px; }
  .contact__list{ gap:10px; margin-bottom:28px; }
  .contact__item a{ padding:13px 15px; gap:13px; }
  .contact__icon{ width:42px; height:42px; }
  .contact__data strong{ font-size:15px; }
  .contact__social{ padding-top:24px; }
  .contact__social-icons a{ width:46px; height:46px; }
  .form{ padding:24px 20px 26px; border-radius:20px; }
  .form__title{ font-size:20px; margin-bottom:20px; }
  .form__field input,
  .form__field textarea{ font-size:16px; }   /* < 16px faz o iOS dar zoom */
  .form__submit{ height:54px; }

  /* ---------- Rodape ---------- */
  .footer{ padding-top:56px; }
  .footer__grid{
    grid-template-columns:1fr;
    gap:34px; padding-bottom:34px;
  }
  .footer__logo{ height:38px; }
  .footer__tagline{ max-width:none; font-size:14.2px; }
  .footer__social a,
  .contact__social-icons a{ width:46px; height:46px; }
  .footer__links{ grid-template-columns:1fr 1fr; gap:13px 16px; }
  .footer__map{ aspect-ratio:4 / 3; }
  .footer__bottom{
    flex-direction:column; text-align:center; gap:8px;
    padding-bottom:calc(88px + env(safe-area-inset-bottom));  /* espaco do botao flutuante */
  }

  /* ---------- Botoes flutuantes ---------- */
  .dock{
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    gap:10px;
  }
  .dock__btn{ width:52px; height:52px; font-size:25px; }
  .dock__btn--top{ font-size:21px; }
  .dock__label{ display:none; }      /* nao existe hover no toque */

  .cookie-banner{
    left:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    width:calc(100% - 24px); max-width:440px; padding:18px;
  }
  body.cookie-banner-open .dock{ bottom:calc(var(--cookie-banner-height) + 28px + env(safe-area-inset-bottom)); }

  /* ---------- Custo grafico ---------- */
  .bg-shift span{ width:120vw; height:120vw; will-change:auto; }

  /* alvos de toque */
  .link-arrow{ padding:6px 0; }
}

/* =========================================================
   CELULAR  (<= 560px)
   ========================================================= */
@media (max-width: 560px){
  .container{ padding-inline:18px; }

  .hero__title-accent{ white-space:normal; }
  .section__title{ font-size:clamp(25px, 7.6vw, 32px); letter-spacing:-.02em; }
  .eyebrow{ font-size:11.5px; letter-spacing:.13em; margin-bottom:14px; }

  .filters{ margin-inline:-18px; padding-inline:18px; }

  .service{ padding:16px 16px 22px; }
  .feedbacks__rail{ margin-inline:-18px; padding-inline:18px; }
  .feedback{ padding:24px 20px 22px; }
  .form{ padding:22px 18px 24px; }
  .footer__links{ gap:12px 12px; }
}

/* =========================================================
   TELAS ESTREITAS  (<= 380px)
   ========================================================= */
@media (max-width: 380px){
  .privacy__hero h1{ font-size:34px; }
  .privacy__index{ padding:16px; }
  .privacy__index ol{ column-gap:12px; }
  .privacy__index a{ font-size:12px; gap:6px; }
  .privacy__content h2{ font-size:20px; gap:10px; }
  .privacy__contact{ padding:18px 14px; }
  .privacy__contact a{ font-size:12px; gap:8px; }
  .cookie-dialog{ padding:18px; }
  .cookie-category__heading{ flex-wrap:wrap; gap:8px; }
  .hero__title{ font-size:34px; }
  .hero__kicker{ font-size:15.5px; }
  .brand__logo{ height:30px; }
  .solution{ flex:0 0 86vw; }
  .footer__links{ grid-template-columns:1fr; }
  .velocity__group{ font-size:28px; }
}

/* =========================================================
   PAISAGEM EM TELA BAIXA
   ========================================================= */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape){
  body.cookie-banner-open .dock{ visibility:hidden; }
  .hero{ min-height:auto; padding:calc(var(--header-h) + 34px) 0 56px; }
  .hero__title{ font-size:clamp(30px, 6vw, 42px); }
  .hero__text{ margin-bottom:22px; }
  .nav{ padding-top:70px; }
  .nav__link{ padding:12px 2px; font-size:18px; }
}

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  /* Sem movimento automatico: o trilho vira rolagem manual e as copias
     saem de cena, senao a lista apareceria duas vezes parada. */
  .feedbacks__track{ animation:none; }
  .feedbacks__rail{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-mask-image:none; mask-image:none;
  }
  .feedback[aria-hidden="true"]{ display:none; }
  .feedback{ scroll-snap-align:center; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__video{ opacity:1; transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
  [data-reveal="clip"]{ clip-path:none; }
  .velocity__group{ transform:none; }
  .hero__title .word{ overflow:visible; }
}