/* ===================================================================== */
    /* === SEÇÃO: RESET E VARIÁVEIS GLOBAIS                               === */
    /* ===================================================================== */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --color-primary: #FF4D00;
      --color-secondary: #0A0A0A;
      --color-dark: #111111;
      --color-surface: #1A1A1A;
      --color-surface-2: #222222;
      --color-accent: #FF6B35;
      --color-text: #FFFFFF;
      --color-text-muted: #888888;
      --color-grid: #2A2A2A;

      --font-display: 'Bebas Neue', sans-serif;
      --font-body: 'Inter', sans-serif;
      --font-logo: 'Jost', sans-serif;
      /* geométrica leve, p/ reproduzir a logo */

      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --maxw: 1280px;
      --sticky-top: 110px;
      /* distância do header para colunas sticky */
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* o .mobile-menu é position:fixed + transform: translateX(100%); um
         transform num elemento fixed o tira do "viewport" e o trata como
         absolute para fins de overflow, criando uma área extra de 100vw à
         direita (a "coluna" arrastável). overflow-x:clip no body não cobre
         esse caso porque não propaga para o html. */
      overflow-x: clip;
    }

    /* trava o scroll do site por trás enquanto o overlay do menu mobile
       está aberto. Usamos position:fixed no body (em vez de overflow:hidden)
       porque overflow:hidden no html/body reseta o scroll para o topo em
       alguns navegadores; o JS guarda o scrollY e aplica como "top" negativo,
       restaurando ao fechar. */
    html.menu-open,
    html.menu-open body {
      overflow: hidden;
    }

    html.menu-open body {
      position: fixed;
      width: 100%;
    }

    body {
      background: var(--color-secondary);
      color: var(--color-text);
      font-family: var(--font-body);
      font-weight: 300;
      line-height: 1.6;
      overflow-x: clip;
      /* 'clip' não cria contexto de scroll → não quebra o sticky */
    }

    ::selection {
      background: var(--color-primary);
      color: #fff;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: var(--color-dark);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--color-grid);
      border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--color-primary);
    }

    .container {
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 5vw;
    }

    .section-tag {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 1.2rem;
    }

    .section-tag::before {
      content: "[ ";
      color: var(--color-text-muted);
    }

    .section-tag::after {
      content: " ]";
      color: var(--color-text-muted);
    }

    h2.section-title {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(2.6rem, 6vw, 5rem);
      line-height: 0.95;
      letter-spacing: 0.01em;
      margin-bottom: 1.5rem;
    }

    .text-orange {
      color: var(--color-primary);
    }

    .muted {
      color: var(--color-text-muted);
    }

    /* ===================================================================== */
    /* === SEÇÃO: PRELOADER                                               === */
    /* ===================================================================== */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: var(--color-secondary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
    }

    #preloader .preloader-logo {
      font-family: var(--font-logo);
      font-weight: 400;
      font-size: clamp(2.4rem, 7vw, 5.5rem);
      line-height: 0.9;
      letter-spacing: 0.02em;
      text-align: center;
    }

    #preloader .preloader-logo span {
      color: var(--color-primary);
    }

    .preloader-bar {
      width: 180px;
      height: 2px;
      background: var(--color-grid);
      overflow: hidden;
      position: relative;
    }

    .preloader-fill {
      display: block;
      height: 100%;
      width: 0%;
      background: var(--color-primary);
      box-shadow: 0 0 12px var(--color-primary);
      transition: width 0.3s ease;
    }

    .preloader-pct {
      font-family: var(--font-body);
      font-size: 0.72rem;
      letter-spacing: 0.25em;
      color: var(--color-text-muted);
      text-transform: uppercase;
    }

    /* ===================================================================== */
    /* === SEÇÃO: CURSOR CUSTOMIZADO                                      === */
    /* ===================================================================== */
    .cursor,
    .cursor-dot {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 9998;
      mix-blend-mode: difference;
      will-change: transform;
    }

    .cursor {
      width: 24px;
      height: 24px;
      border: 1.5px solid var(--color-primary);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out),
        background 0.25s var(--ease-out);
    }

    .cursor-dot {
      width: 5px;
      height: 5px;
      background: var(--color-primary);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

    .cursor.hovering {
      width: 48px;
      height: 48px;
      background: rgba(255, 77, 0, 0.12);
    }

    @media (max-width: 1024px),
    (pointer: coarse) {

      .cursor,
      .cursor-dot {
        display: none;
      }
    }

    /* ===================================================================== */
    /* === SEÇÃO: BARRA DE PROGRESSO DE SCROLL                            === */
    /* ===================================================================== */
    #scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
      box-shadow: 0 0 12px rgba(255, 77, 0, 0.7);
      z-index: 9999;
    }

    /* ===================================================================== */
    /* === SEÇÃO: NAVBAR                                                  === */
    /* ===================================================================== */
    #navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      /* acima do .mobile-menu (z-index:1050): #navbar cria um stacking context
         que, com z-index:1000, capava o .nav-burger (z-index:1100) abaixo do
         overlay do menu mobile — o ícone virava um "X" mas ficava escondido,
         sem botão visível para fechar o menu. */
      z-index: 1100;
      padding: 1.4rem 0;
      background: transparent;
      transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease,
        border-color 0.4s ease;
      border-bottom: 1px solid transparent;
    }

    #navbar.scrolled {
      background: rgba(10, 10, 10, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: 0.9rem 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav-inner {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 5vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      display: inline-flex;
      align-items: center;
      line-height: 1;
    }

    /* logo horizontal em vetor: TELÕES branco + RECIFE laranja, AUDIOVISUAL embaixo */
    .brand-logo {
      display: block;
      height: 2.7rem;
      width: auto;
    }

    .bl-main {
      font-family: var(--font-logo);
      font-weight: 400;
      font-size: 42px;
      letter-spacing: 1.5px;
      fill: #fff;
    }

    .bl-accent {
      fill: var(--color-primary);
    }

    .bl-sub {
      font-family: var(--font-logo);
      font-weight: 300;
      font-size: 11px;
      fill: rgba(255, 255, 255, 0.7);
      /* textLength definido via JS para ocupar toda a largura de "TELÕES RECIFE" */
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2.4rem;
      list-style: none;
    }

    .nav-links a {
      position: relative;
      font-size: 0.92rem;
      font-weight: 400;
      color: var(--color-text);
      transition: color 0.25s ease;
    }

    /* underline branco — fixo, visível apenas no link ativo */
    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0;
      height: 1.5px;
      background: var(--color-text);
      transition: width 0.3s var(--ease-out);
    }

    .nav-links a.active::after {
      width: 100%;
    }

    /* underline laranja — "carrega" por cima no hover, "descarrega" ao sair,
       revelando o branco por baixo quando o link está ativo */
    .nav-links a::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0;
      height: 1.5px;
      background: var(--color-primary);
      transition: width 0.3s var(--ease-out);
      z-index: 1;
    }

    .nav-links a:hover {
      color: var(--color-primary);
    }

    .nav-links a:hover::before {
      width: 100%;
    }

    .nav-cta {
      border: 1.5px solid var(--color-primary);
      color: var(--color-primary);
      padding: 0.7rem 1.4rem;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-radius: 2px;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .nav-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--color-primary);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.35s var(--ease-out);
      z-index: -1;
    }

    .nav-cta:hover {
      color: #fff;
    }

    .nav-cta:hover::before {
      transform: scaleX(1);
    }

    /* Hambúrguer */
    .nav-burger {
      display: none;
      flex-direction: column;
      gap: 6px;
      width: 32px;
      z-index: 1100;
    }

    .nav-burger span {
      display: block;
      height: 2px;
      width: 100%;
      background: var(--color-text);
      border-radius: 2px;
      transition: transform 0.35s var(--ease-out), opacity 0.25s ease;
    }

    .nav-burger.open span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    .nav-burger.open span:nth-child(2) {
      opacity: 0;
    }

    .nav-burger.open span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    /* Menu mobile — oculto por padrão (só aparece via media query) */
    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1050;
      background: rgba(10, 10, 10, 0.98);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      transform: translateX(100%);
    }

    /* ===================================================================== */
    /* === SEÇÃO: HERO                                                    === */
    /* ===================================================================== */
    #hero {
      position: relative;
      height: 100vh;
      overflow: hidden;
      background: var(--color-secondary);
    }

    #hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      pointer-events: none;
    }

    .hero-veil {
      /* escurece o vídeo para dar contraste aos pixels/textos */
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 45%, rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0.78) 95%),
        linear-gradient(to bottom, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.35) 40%, rgba(10, 10, 10, 0.85));
    }

    #hero-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .hero-content {
      position: absolute;
      inset: 0;
      /* acima de .hero-orange/.hero-next/#orange-pixels-canvas (z-index:3):
         os .hero-stats agora vivem aqui dentro e precisam continuar visíveis
         por cima do laranja, como antes (quando eram filhos diretos do #hero
         com z-index:5). título/sub/CTAs já estão com opacity:0 nesse ponto
         da timeline, então subir o z-index não os expõe indevidamente. */
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 5vw;
      pointer-events: none;
    }

    .hero-content .pointer-on {
      pointer-events: auto;
    }

    .hero-title {
      font-family: var(--font-display);
      line-height: 0.82;
      letter-spacing: 0.02em;
      will-change: transform, opacity;
    }

    /* cada linha é uma máscara (overflow hidden) por onde as letras sobem girando */
    .hero-title .line-1,
    .hero-title .line-2,
    .hero-title .line-3 {
      display: block;
      overflow: hidden;
      padding: 0.06em 0.04em;
      /* respiro para não cortar as letras na máscara */
    }

    .hero-title .line-1 {
      font-size: clamp(1.6rem, 4.5vw, 3.2rem);
      color: var(--color-text-muted);
      padding-top: 0.32em;
      /* espaço extra p/ o acento (Ê) não ser cortado */
    }

    .hero-title .line-2 {
      font-size: clamp(4.5rem, 18vw, 16rem);
      color: var(--color-primary);
    }

    /* placeholder: reserva o espaço do TRANSFORMAM, mas quem aparece é o SVG */
    .hero-title .ilum-placeholder {
      visibility: hidden;
    }

    .hero-title .line-3 {
      font-size: clamp(2.5rem, 8vw, 7rem);
    }

    .hero-title .char {
      display: inline-block;
      will-change: transform, opacity;
    }

    /* TRANSFORMAM vetorial (SVG): revela e dá zoom no tronco do "F" sem pixelar */
    #transformam-svg {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    #transformam-text {
      fill: var(--color-primary);
      font-family: 'Bebas Neue', sans-serif;
      font-weight: 400;
      letter-spacing: -0.015em;
      /* engrossa os glifos (stroke da mesma cor) p/ casar o peso visual do HTML */
      stroke: var(--color-primary);
      stroke-width: 0.02em;
      paint-order: stroke;
    }

    .hero-sub {
      max-width: 580px;
      margin: 1.8rem auto 0;
      color: var(--color-text-muted);
      font-size: clamp(0.95rem, 1.6vw, 1.15rem);
      font-weight: 300;
      will-change: transform, opacity;
    }

    .hero-ctas {
      display: flex;
      gap: 1rem;
      margin-top: 2.4rem;
      flex-wrap: wrap;
      justify-content: center;
      will-change: transform, opacity;
    }

    .btn {
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 0.88rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 1rem 1.9rem;
      border-radius: 3px;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
    }

    .btn-primary {
      background: var(--color-primary);
      color: #fff;
      box-shadow: 0 0 0 rgba(255, 77, 0, 0);
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(255, 77, 0, 0.4);
    }

    .btn-ghost {
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      color: var(--color-text);
    }

    .btn-ghost:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
      transform: translateY(-3px);
    }

    /* camada laranja sólida: trava o fundo 100% laranja quando o "I" preenche a tela.
   fica acima do título (z2) e abaixo do wall (z4). */
    .hero-orange {
      position: absolute;
      inset: 0;
      z-index: 3;
      background: var(--color-primary);
      opacity: 0;
      pointer-events: none;
    }

    /* grade de "pixels" escuros sobre o fundo laranja, piscando como um
       painel de LED sendo energizado (sutil, antes do wall se montar) */
    #orange-pixels-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
    }

    /* restante do site (a partir do "Quem Somos"): nenhuma transformação — sobe
       pelo SCROLL NORMAL, sobre o #hero pinado (z-index acima do auto do #hero),
       enquanto o pin se estende pela altura do #quemsomos (ver heroTL no JS). */
    #after-hero {
      position: relative;
      z-index: 50;
      background: var(--color-dark);
    }

    /* === VIDEO WALL 3D (hero) === */
    .wall3d {
      /* position:fixed (e fora do #hero no DOM, ver HTML): o #hero tem
         overflow:hidden, o que recortaria os painéis no limite da sua caixa
         e impediria que voassem sobre o #after-hero (z-index:50) durante a
         dispersão (estágio 5). Como elemento fixo e irmão de #hero/#after-hero,
         o .wall3d cobre a viewport inteira e fica acima de ambos. */
      position: fixed;
      inset: 0;
      z-index: 60;
      display: grid;
      place-items: center;
      /* afasta o grid dos stats abaixo, deslocando o centro um pouco para cima */
      padding-bottom: 3vh;
      perspective: 1500px;
      /* câmera 3D compartilhada */
      pointer-events: none;
    }

    .wall3d-inner {
      position: relative;
      transform-style: preserve-3d;
      display: grid;
      gap: 0;
      /* sem espaçamento entre os telões */
      width: 59vw;
      height: 62vh;
      will-change: transform;
      /* template de colunas/linhas definido via JS (--cols/--rows) */
    }

    /* cada painel é um SÓLIDO 3D: a face frontal é a tela (vídeo), e atrás dela
       há um corpo preto com profundidade (fundo + 4 laterais), como um painel
       de LED real. .wall-tile é só o contêiner 3D; o visual fica nas faces. */
    .wall-tile {
      position: relative;
      --tile-depth: 10px;
      /* espessura física do painel */
      /* a tile NÃO pode ter opacity<1 nem will-change: ambos forçam o browser a
         ACHATAR o preserve-3d (a caixa viraria um plano). Painéis ficam sempre
         100% opacos; o "sumir" é feito voando para fora da viewport. */
      transform-style: preserve-3d;
    }

    /* FACE FRONTAL = a tela voltada para o público (vídeo + pixels + logo) */
    .tile-front {
      position: absolute;
      /* inset levemente negativo (em vez de 0): com preserve-3d/perspective,
         o Chrome (sobretudo no Windows) às vezes arredonda o tamanho das
         tracks de 1fr do .wall3d-inner para pixels inteiros ao compor,
         deixando frestas de ~1px entre painéis (varia com a altura da janela,
         que afeta o valor fracionário de 62vh/linhas). Estender cada face
         ~1px além da célula faz os painéis se sobreporem levemente e cobre
         essas frestas, sem deixar o #hero-video vazar por trás. */
      inset: -1px;
      background: #070707;
      /* fallback enquanto o vídeo carrega */
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 2px;
      overflow: hidden;
      backface-visibility: hidden;
      box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.5);
      /* tela no plano do grid; o corpo do painel é extrudado para trás */
      transform: translateZ(0);
    }

    /* CORPO PRETO do painel: fundo + laterais, dando a profundidade real.
       SEM backface-visibility:hidden → são faces sólidas, visíveis dos dois
       lados, para que ao girar e mostrar a traseira vejamos preto (nunca vazado). */
    .tile-back,
    .tile-side {
      position: absolute;
      background: #070707;
    }

    /* fundo do painel, recuado pela espessura total */
    .tile-back {
      inset: 0;
      background: #0b0b0b;
      transform: translateZ(calc(-1 * var(--tile-depth)));
      box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.85);
    }

    /* laterais: ligam a borda frontal à traseira. gradiente claro→escuro =
       quina frontal pegando luz, fundo na sombra → leitura de volume sólido. */
    .tile-side-l,
    .tile-side-r {
      top: 0;
      width: var(--tile-depth);
      height: 100%;
      transform-origin: left center;
      transform: rotateY(90deg);
      background: linear-gradient(to right, #080808, #050505 85%);
    }

    .tile-side-l {
      left: 0;
    }

    .tile-side-r {
      left: 100%;
    }

    .tile-side-t,
    .tile-side-b {
      left: 0;
      width: 100%;
      height: var(--tile-depth);
      transform-origin: center top;
      transform: rotateX(-90deg);
      background: linear-gradient(to bottom, #313131, #050505 85%);
    }

    .tile-side-t {
      top: 0;
    }

    .tile-side-b {
      top: 100%;
    }

    /* canvas que reproduz a fatia do vídeo daquele painel (atrás de tudo) */
    .tile-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 0;
    }

    /* textura de pixels LED sobre o vídeo (sempre visível, dá cara de painel) */
    .tile-grid {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(255, 107, 53, 0.28) 0.8px, transparent 1.2px);
      background-size: 9px 9px;
    }

    .tile-front::after {
      /* leve realce de varredura por tile */
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 40%);
    }

    /* conteúdo por-tile: cada tile mostra a SUA fatia da marca + brilho.
   Assim a imagem e o brilho só aparecem nos painéis (nunca nos gaps) e
   cada tile leva seu pedaço ao voar. tamanho/posição definidos via JS. */
    .tile-screen {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      /* acima do vídeo e da grade de pixels */
      opacity: 0;
      /* painel "apagado" até acender */
      will-change: opacity;
    }

    /* brilho diagonal ÚNICO que varre o GRID INTEIRO — ver heroTL. .wall-shine
       é uma "janela" do tamanho exato do grid (inset:0, igual ao
       .wall3d-inner), com overflow:hidden: mascara a faixa de luz para que ela
       só apareça sobre as faces dos painéis, nunca fora do grid. A faixa em si
       (.wall-shine-band) é bem maior (3×) e desliza por dentro dessa janela,
       entrando pelo canto inferior-direito (sem tocar nenhum painel),
       cruzando o grid em diagonal, e saindo pelo canto superior-esquerdo.
       mix-blend-mode:screen soma à imagem como um reflexo real de luz, em vez
       de cobri-la com uma cor sólida. translateZ garante que fique na frente
       das faces dos painéis (z=0) no contexto preserve-3d. Conforme a faixa
       varre cada painel, sua borda (ver heroTL) é retirada (borderWidth: 0)
       naquele instante. */
    .wall-shine {
      position: absolute;
      inset: 0;
      z-index: 50;
      overflow: hidden;
      mix-blend-mode: screen;
      pointer-events: none;
      transform: translateZ(2px);
    }

    .wall-shine-band {
      position: absolute;
      inset: -100%;
      background: linear-gradient(135deg,
          transparent 46%,
          rgba(255, 244, 230, 0.45) 49.5%,
          rgba(255, 255, 255, 0.9) 50%,
          rgba(255, 244, 230, 0.45) 50.5%,
          transparent 54%);
      will-change: transform;
    }

    /* véu de contraste (fatiado por tile → contínuo no wall), sob a logo */
    .tile-veil {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 45%, rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0.78) 95%),
        linear-gradient(to bottom, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.35) 40%, rgba(10, 10, 10, 0.85));
    }

    .tile-brand {
      /* SVG vetorial → nunca pixela ao crescer */
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* logo reproduzida em vetor (fonte geométrica leve, maiúsculas espaçadas) */
    .lg-main {
      fill: #fff;
      font-family: var(--font-logo);
      font-weight: 300;
      font-size: 150px;
      letter-spacing: 6px;
      /* mesmo glow laranja que estava na palavra TELÕES */
      filter: drop-shadow(0 0 14px rgba(255, 77, 0, 0.85));
    }

    .lg-sub {
      fill: #fff;
      font-family: var(--font-logo);
      font-weight: 300;
      font-size: 48px;
      letter-spacing: 28px;
    }

    /* Counters */
    .hero-stats {
      position: absolute;
      /* sobe na mesma proporção do grid (padding-bottom do .wall3d), para o
         conjunto grid + stats continuar centralizado verticalmente na tela */
      bottom: 8vh;
      left: 0;
      width: 100%;
      z-index: 5;
      display: flex;
      justify-content: center;
      gap: clamp(2rem, 8vw, 6rem);
      opacity: 0;
      will-change: opacity;
      pointer-events: none;
    }

    .hero-stat {
      text-align: center;
    }

    .hero-stat .num {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5vw, 4rem);
      color: var(--color-primary);
      line-height: 1;
    }

    .hero-stat .label {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-top: 0.4rem;
    }

    .scroll-hint {
      position: absolute;
      bottom: 2.2rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 5;
      color: var(--color-text-muted);
      font-size: 0.72rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      animation: hintbob 2s ease-in-out infinite;
      transition: opacity 0.4s ease;
      /* some/aparece suave conforme a rolagem */
    }

    /* escondido assim que o usuário começa a rolar (some no topo da animação) */
    .scroll-hint.is-hidden {
      opacity: 0;
      pointer-events: none;
    }

    @keyframes hintbob {

      0%,
      100% {
        transform: translate(-50%, 0);
      }

      50% {
        transform: translate(-50%, 8px);
      }
    }

    /* ===================================================================== */
    /* === SEÇÃO: QUEM SOMOS                                              === */
    /* ===================================================================== */
    .section {
      padding: 9rem 0;
      position: relative;
    }

    #quemsomos {
      background: var(--color-dark);
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 5rem;
      align-items: center;
      /* painel começa centralizado, como antes */
    }

    /* coluna direita (telão) parte da posição centralizada e gruda ao atingir o header */
    .about-visual {
      position: sticky;
      top: var(--sticky-top);
      align-self: center;
    }

    .about-text p {
      color: var(--color-text-muted);
      margin-bottom: 1.5rem;
      max-width: 520px;
    }

    .diff-list {
      list-style: none;
      margin-top: 2rem;
      display: grid;
      gap: 1.1rem;
    }

    .diff-list li {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: 1rem;
      will-change: transform, opacity;
    }

    .diff-list .ico {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid var(--color-grid);
      border-radius: 6px;
      color: var(--color-primary);
      background: var(--color-surface);
      font-size: 1.1rem;
    }

    /* Tela LED visual */
    .about-visual {
      display: flex;
      justify-content: center;
    }

    .led-screen {
      position: relative;
      width: 100%;
      max-width: 460px;
      aspect-ratio: 1 / 1;
      background: #050505;
      border-radius: 8px;
      border: 2px solid var(--color-grid);
      overflow: hidden;
      animation: floaty 6s ease-in-out infinite;
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
    }

    /* grade de "pixels" do painel — agora desenhada em <canvas> (led-dots.js)
       para que cada ponto reaja à proximidade do cursor. Fica atrás da legenda
       (z-index 2) e dos badges, e não captura cliques. */
    .led-dots {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .led-screen-glow {
      position: absolute;
      inset: -2px;
      border-radius: 8px;
      border: 2px solid var(--color-primary);
      animation: glow 2.6s ease-in-out infinite;
      pointer-events: none;
    }

    .led-caption {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 1.5rem;
      z-index: 2;
    }

    .led-caption span {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.6rem);
      line-height: 1;
      text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    }

    .led-badges {
      position: absolute;
      z-index: 3;
      inset: 0;
      pointer-events: none;
    }

    .led-badge {
      position: absolute;
      font-family: var(--font-display);
      font-size: 1.1rem;
      letter-spacing: 0.08em;
      padding: 0.3rem 0.7rem;
      background: rgba(255, 77, 0, 0.12);
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
      border-radius: 3px;
      backdrop-filter: blur(4px);
    }

    .led-badge.b1 {
      bottom: 40%;
      right: 14%;
      animation: floaty 6.4s ease-in-out infinite;
    }

    @keyframes floaty {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-14px);
      }
    }

    @keyframes glow {

      0%,
      100% {
        box-shadow: 0 0 8px rgba(255, 77, 0, 0.4);
      }

      50% {
        box-shadow: 0 0 26px rgba(255, 77, 0, 0.85);
      }
    }

    /* ===================================================================== */
    /* === SEÇÃO: SIMULADOR                                               === */
    /* ===================================================================== */
    #simulador {
      background: var(--color-secondary);
    }

    .sim-head {
      text-align: center;
      margin-bottom: 3.5rem;
    }

    .sim-head p {
      color: var(--color-text-muted);
      max-width: 600px;
      margin: 0 auto;
    }

    .sim-layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 3rem;
      align-items: start;
    }

    .sim-controls {
      background: var(--color-surface);
      border: 1px solid var(--color-grid);
      border-radius: 12px;
      padding: 2rem;
      /* controles (coluna esquerda) ficam sticky até a área acabar */
      position: sticky;
      top: var(--sticky-top);
    }

    .sim-control-block {
      margin-bottom: 2rem;
    }

    .sim-control-block:last-child {
      margin-bottom: 0;
    }

    .sim-control-block label {
      display: block;
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: 0.9rem;
    }

    .stepper {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .stepper button {
      width: 44px;
      height: 44px;
      border: 1px solid var(--color-grid);
      border-radius: 8px;
      color: var(--color-text);
      font-size: 1.3rem;
      display: grid;
      place-items: center;
      background: var(--color-surface-2);
      transition: all 0.25s ease;
    }

    .stepper button:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    .stepper .val {
      flex: 1;
      text-align: center;
      font-family: var(--font-display);
      font-size: 2.2rem;
      color: var(--color-primary);
      line-height: 1;
    }

    input[type=range] {
      -webkit-appearance: none;
      width: 100%;
      height: 4px;
      margin-top: 1rem;
      background: var(--color-grid);
      border-radius: 4px;
      outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--color-primary);
      cursor: pointer;
      box-shadow: 0 0 10px rgba(255, 77, 0, 0.7);
    }

    input[type=range]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border: none;
      border-radius: 50%;
      background: var(--color-primary);
      cursor: pointer;
      box-shadow: 0 0 10px rgba(255, 77, 0, 0.7);
    }

    .sim-stage {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .sim-matrix-wrap {
      background: var(--color-dark);
      border: 1px solid var(--color-grid);
      border-radius: 12px;
      padding: 2rem;
      height: clamp(320px, 46vh, 520px);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }

    .sim-matrix-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--color-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.18;
    }

    #sim-matrix {
      display: grid;
      gap: 0;
      /* sem espaçamento — wall contínuo */
      position: relative;
      z-index: 1;
      margin: auto;
      background: #000;
      /* moldura laranja brilhante ao redor de todo o painel */
      box-shadow: 0 0 0 2px var(--color-primary), 0 0 28px rgba(255, 77, 0, 0.45);
      /* largura/altura definidas via JS para manter cada célula em 16:9 */
    }

    /* camada de "vídeo" (canvas) por trás dos módulos, cobrindo todo o wall */
    #wall-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      display: block;
    }

    .led-module {
      position: relative;
      z-index: 1;
      background: transparent;
      /* deixa o vídeo aparecer */
      /* tracejado laranja marcando a separação entre painéis */
      border: 1px dashed rgba(255, 77, 0, 0.75);
      border-radius: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      /* textura fina de pixels LED sobreposta ao vídeo */
      background-image: radial-gradient(circle, rgba(0, 0, 0, 0.28) 0.7px, transparent 1px);
      background-size: 5px 5px;
      will-change: transform, opacity;
    }

    .led-module span {
      font-family: var(--font-display);
      font-size: clamp(0.55rem, 1.3vw, 0.95rem);
      color: rgba(255, 255, 255, 0.22);
      /* numeração discreta sobre o vídeo */
      letter-spacing: 0.05em;
      z-index: 1;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }

    .sim-specs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
    }

    .spec-card {
      background: var(--color-surface);
      border: 1px solid var(--color-grid);
      border-radius: 10px;
      padding: 1.3rem;
      transition: border-color 0.3s ease, transform 0.3s ease;
    }

    .spec-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-4px);
    }

    .spec-card .spec-ico {
      color: var(--color-primary);
      font-size: 1.1rem;
      margin-bottom: 0.7rem;
    }

    .spec-card .spec-val {
      font-family: var(--font-display);
      font-size: 2rem;
      line-height: 1;
      color: var(--color-text);
    }

    .spec-card .spec-val small {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      margin-left: 0.2rem;
    }

    .spec-card .spec-label {
      font-size: 0.74rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-top: 0.4rem;
    }

    .orientation-toggle {
      display: flex;
      gap: 0.6rem;
    }

    .orientation-toggle + .orientation-toggle {
      margin-top: 0.6rem;
    }

    .orientation-toggle button {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.8rem 0.5rem;
      border: 1px solid var(--color-grid);
      border-radius: 8px;
      background: var(--color-surface-2);
      color: var(--color-text-muted);
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: center;
      transition: all 0.25s ease;
    }

    .orientation-toggle button i {
      font-size: 1.2rem;
    }

    .orientation-toggle button .panel-icon {
      width: 1.3rem;
      height: 1.3rem;
      color: currentColor;
    }

    .orientation-toggle button:hover {
      border-color: var(--color-primary);
      color: var(--color-text);
    }

    .orientation-toggle button.active {
      border-color: var(--color-primary);
      background: rgba(255, 77, 0, 0.12);
      color: var(--color-accent);
    }

    .orientation-toggle button:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .sim-action {
      display: flex;
      justify-content: flex-start;
    }

    /* ===================================================================== */
    /* === SEÇÃO: PROJETOS                                                === */
    /* ===================================================================== */
    #projetos {
      background: var(--color-dark);
    }

    .proj-head {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .proj-filters {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.8rem;
      margin-bottom: 3rem;
    }

    .filter-btn {
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.6rem 1.3rem;
      border-radius: 30px;
      border: 1px solid var(--color-grid);
      color: var(--color-text-muted);
      transition: all 0.25s ease;
    }

    .filter-btn:hover {
      color: var(--color-text);
      border-color: var(--color-text-muted);
    }

    .filter-btn.active {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: #fff;
    }

    .proj-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.6rem;
    }

    .proj-empty {
      grid-column: 1 / -1;
      text-align: center;
      color: var(--color-text-muted);
      max-width: 600px;
      margin: 3rem auto;
    }

    .proj-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--color-grid);
      cursor: pointer;
      will-change: transform, opacity;
      transition: border-color 0.3s ease, transform 0.4s var(--ease-out);
    }

    .proj-photo {
      position: relative;
      aspect-ratio: 4 / 3;
      background: #0a0a0a;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    /* Tratamento "duotone LED": uniformiza QUALQUER foto nos tons da marca e dá
       a ela a cara do nosso próprio produto (um painel de LED), mesmo quando a
       imagem real tem cores destoantes (ex: céu azul). Some no hover, revelando
       a cor real por trás do .proj-overlay. São duas camadas empilhadas:
        ::before  -> pinta a foto de laranja preservando o desenho de luz/sombra
                     (mix-blend-mode: color = mantém a luminância da foto).
        ::after   -> malha fina de "pixels", brilho superior e scrim inferior
                     multiplicados sobre a foto, criando textura e profundidade. */
    .proj-filter {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.5s var(--ease-out);
    }

    .proj-filter::before {
      content: "";
      position: absolute;
      inset: 0;
      /* "lavada" laranja translúcida (sem blend de cor): tonaliza a foto puxando
         tudo para o laranja da marca, MAS deixa o conteúdo da imagem visível por
         baixo. No hover (.proj-filter some) a cor real reaparece. */
      background: linear-gradient(160deg,
        rgba(255, 77, 0, 0.62) 0%,
        rgba(255, 77, 0, 0.42) 55%,
        rgba(120, 28, 0, 0.5) 100%);
    }

    .proj-filter::after {
      content: "";
      position: absolute;
      inset: 0;
      /* textura/scrim LEVES: só dão a "cara de painel" e legibilidade do texto
         inferior, sem encobrir a foto — o conteúdo da imagem precisa continuar
         visível (apenas tonalizado) mesmo sem hover. */
      background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.22) 1px, transparent 1.8px) 0 0 / 6px 6px,
        linear-gradient(180deg, transparent 55%, rgba(5, 5, 5, 0.55));
      mix-blend-mode: multiply;
    }

    .proj-card:hover .proj-filter {
      opacity: 0;
    }

    .proj-cat {
      position: absolute;
      top: 1rem;
      left: 1rem;
      z-index: 2;
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.35rem 0.7rem;
      background: rgba(10, 10, 10, 0.7);
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
      border-radius: 3px;
      backdrop-filter: blur(4px);
    }

    .proj-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      background: rgba(8, 8, 8, 0.85);
      display: grid;
      place-items: center;
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .proj-overlay span {
      font-family: var(--font-display);
      font-size: 1.3rem;
      letter-spacing: 0.08em;
      color: var(--color-primary);
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .proj-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-8px);
      box-shadow: 0 18px 50px rgba(255, 77, 0, 0.18);
    }

    .proj-card:hover .proj-overlay {
      opacity: 1;
    }

    .proj-info {
      padding: 1.2rem 1.3rem 1.4rem;
      background: var(--color-surface);
    }

    .proj-info h3 {
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 0.4rem;
    }

    .proj-info .proj-dim {
      font-size: 0.82rem;
      color: var(--color-text-muted);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .proj-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      /* leve dessaturação base ajuda o laranja a dominar a paleta; volta ao
         normal no hover. Mantém brilho ~1 para o conteúdo da foto continuar
         legível sob a lavada laranja. */
      filter: saturate(0.85) contrast(1.05);
      transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
    }

    .proj-card:hover .proj-img {
      transform: scale(1.06);
      filter: none;
    }

    /* ===================================================================== */
    /* === SEÇÃO: LIGHTBOX (galeria de projetos)                          === */
    /* ===================================================================== */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: grid;
      place-items: center;
      padding: 4rem 1.5rem;
      background: rgba(5, 5, 5, 0.92);
      backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .lightbox.active {
      opacity: 1;
      visibility: visible;
    }

    .lightbox img {
      max-width: min(90vw, 1200px);
      max-height: 85vh;
      width: auto;
      height: auto;
      border-radius: 10px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
      transform: scale(0.94);
      transition: transform 0.35s var(--ease-out);
    }

    .lightbox.active img {
      transform: scale(1);
    }

    .lightbox-close {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      font-size: 1.3rem;
      color: var(--color-text);
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--color-grid);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .lightbox-close:hover {
      color: var(--color-primary);
      border-color: var(--color-primary);
      transform: rotate(90deg);
    }

    @media (max-width: 768px) {
      .lightbox {
        padding: 2rem 1rem;
      }

      .lightbox-close {
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
      }
    }

    /* ===================================================================== */
    /* === SEÇÃO: CONTATO / LOCALIZAÇÃO                                   === */
    /* ===================================================================== */
    #contato {
      background: var(--color-secondary);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: start;
      /* p/ o sticky da coluna esquerda funcionar */
    }

    .contact-col h2 {
      font-size: clamp(2rem, 4vw, 3.2rem);
    }

    /* coluna esquerda (mapa/endereço) fica sticky */
    .contact-loc {
      position: sticky;
      top: var(--sticky-top);
    }

    .map-box {
      position: relative;
      margin-top: 1.5rem;
      height: 320px;
      border-radius: 12px;
      overflow: hidden;
      background: #12121f;
      /* mesma borda cinza do painel de LED de "Quem somos" (.led-screen) */
      border: 2px solid var(--color-grid);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }

    .map-box #map-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .address {
      margin-top: 1.4rem;
      color: var(--color-text-muted);
      display: flex;
      gap: 0.7rem;
      align-items: flex-start;
    }

    .address i {
      color: var(--color-primary);
      margin-top: 0.25rem;
    }

    .hours {
      margin-top: 1.4rem;
      color: var(--color-text-muted);
      display: flex;
      gap: 0.7rem;
      align-items: flex-start;
    }

    .hours i {
      color: var(--color-primary);
      margin-top: 0.25rem;
    }

    .hours-list {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .hours-list strong {
      color: var(--color-text);
      font-weight: 600;
    }

    /* Formulário */
    .form-field {
      margin-bottom: 1.3rem;
    }

    .form-field label {
      display: block;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: 0.5rem;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      background: var(--color-surface);
      border: 1px solid var(--color-grid);
      border-radius: 8px;
      padding: 0.9rem 1rem;
      color: var(--color-text);
      font-family: inherit;
      font-size: 0.95rem;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .form-field textarea {
      resize: vertical;
      min-height: 120px;
    }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(255, 77, 0, 0.12);
    }

    .form-field select {
      appearance: none;
      cursor: pointer;
    }

    .btn-submit {
      width: 100%;
      justify-content: center;
      background: var(--color-primary);
      color: #fff;
      margin-top: 0.5rem;
    }

    .btn-submit:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(255, 77, 0, 0.4);
    }

    .btn-submit:disabled {
      opacity: 0.7;
      cursor: wait;
      transform: none;
    }

    .quick-contacts {
      margin-top: 2rem;
      display: grid;
      gap: 0.9rem;
    }

    .quick-contacts a {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      color: var(--color-text-muted);
      font-size: 0.95rem;
      transition: color 0.25s ease;
    }

    .quick-contacts a i {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid var(--color-grid);
      border-radius: 8px;
      color: var(--color-primary);
      transition: all 0.25s ease;
    }

    .quick-contacts a:hover {
      color: var(--color-primary);
    }

    .quick-contacts a:hover i {
      border-color: var(--color-primary);
      background: rgba(255, 77, 0, 0.08);
    }

    .form-success {
      display: none;
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 8px;
      background: rgba(255, 77, 0, 0.1);
      border: 1px solid var(--color-primary);
      color: var(--color-accent);
      font-size: 0.9rem;
      text-align: center;
    }
    .form-error {
      margin-top: 1rem;
      padding: 1rem;
      border-radius: 8px;
      background: rgba(220, 38, 38, 0.1);
      border: 1px solid #dc2626;
      color: #fca5a5;
      font-size: 0.9rem;
      text-align: center;
    }

    /* ===================================================================== */
    /* === SEÇÃO: WHATSAPP FAB                                             === */
    /* ===================================================================== */
    #whatsapp-fab {
      position: fixed;
      bottom: 1.75rem;
      right: 1.75rem;
      z-index: 900;
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      background: #25D366;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      opacity: 0;
      pointer-events: none;
      transform: scale(0.7);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    #whatsapp-fab.visible {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }

    #whatsapp-fab:hover {
      background: #1ebe5d;
      transform: scale(1.1);
    }

    /* === SEÇÃO: FOOTER                                                  === */
    /* ===================================================================== */
    #footer {
      position: relative;
      background: var(--color-secondary);
      border-top: 2px solid var(--color-primary);
      padding: 4.5rem 0 2rem;
      overflow: hidden;
    }

    #footer-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      opacity: 0.4;
    }

    .footer-inner {
      position: relative;
      z-index: 1;
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 2.5rem;
      margin-bottom: 3rem;
    }

    .footer-brand .nav-logo {
      margin-bottom: 1rem;
    }

    .footer-brand .brand-logo {
      height: 3rem;
    }

    .footer-brand p {
      color: var(--color-text-muted);
      max-width: 280px;
      font-size: 0.92rem;
    }

    .footer-col h4 {
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 1.1rem;
    }

    .footer-col ul {
      list-style: none;
      display: grid;
      gap: 0.7rem;
    }

    .footer-col a {
      color: var(--color-text-muted);
      font-size: 0.92rem;
      transition: color 0.25s ease;
    }

    .footer-col a:hover {
      color: var(--color-primary);
    }

    .footer-bottom {
      border-top: 1px solid var(--color-grid);
      padding-top: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-bottom p {
      color: var(--color-text-muted);
      font-size: 0.85rem;
    }

    .footer-socials {
      display: flex;
      gap: 0.8rem;
    }

    .footer-socials a {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid var(--color-grid);
      border-radius: 8px;
      color: var(--color-text-muted);
      transition: all 0.25s ease;
    }

    .footer-socials a:hover {
      color: var(--color-primary);
      border-color: var(--color-primary);
      transform: translateY(-3px);
    }

    /* ===================================================================== */
    /* === SEÇÃO: RESPONSIVIDADE                                          === */
    /* ===================================================================== */
    @media (max-width: 1024px) {
      .proj-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .sim-layout {
        grid-template-columns: 280px 1fr;
        gap: 2rem;
      }
    }

    @media (max-width: 768px) {
      .section {
        padding: 6rem 0;
      }

      .nav-links,
      .nav-cta {
        display: none;
      }

      .nav-burger {
        display: flex;
      }

      /* Menu mobile */
      .mobile-menu {
        display: flex;
      }

      .mobile-menu a {
        font-family: var(--font-display);
        font-size: 2.4rem;
        letter-spacing: 0.04em;
      }

      .mobile-menu a:hover {
        color: var(--color-primary);
      }

      .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      .sim-layout {
        grid-template-columns: 1fr;
      }

      .proj-grid {
        grid-template-columns: 1fr;
      }

      .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
      }

      /* sem sticky quando as colunas empilham (mobile) */
      .about-visual,
      .sim-controls,
      .contact-loc {
        position: static;
      }

      /* Footer mobile: só logo, redes sociais e copyright, centralizados e
         empilhados (sem as colunas de links "Empresa/Serviços/Contato"). */
      .footer-top {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
      }

      .footer-brand {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .footer-brand .nav-logo {
        margin: 0 auto 1rem;
      }

      .footer-brand p {
        display: none;
      }

      .footer-col {
        display: none;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
      }

      .footer-socials {
        order: -1;
        margin-bottom: 1.5rem;
      }

      .wall3d-inner {
        width: 86vw;
        height: 42vh;
      }

      .hero-stat .num {
        font-size: clamp(1.8rem, 7vw, 3rem);
      }

      /* aperta o espaçamento vertical da .hero-content para caber título +
         texto + CTAs + stats sem cortar nada em telas baixas */
      .hero-title .line-1 {
        font-size: clamp(1.2rem, 4vw, 3.2rem);
      }

      .hero-title .line-2 {
        font-size: clamp(3.4rem, 16vw, 16rem);
      }

      .hero-title .line-3 {
        font-size: clamp(2rem, 7vw, 7rem);
      }

      .hero-sub {
        margin-top: 1rem;
      }

      .hero-ctas {
        margin-top: 1.2rem;
      }
    }

    /* ===================================================================== */
    /* === SEÇÃO: HERO "SIMPLES" (dispositivos touch — ver isMobile no JS) === */
    /* ===================================================================== */
    /* Aplicado via classe no <html> (não por largura): a escolha entre a hero
       pinada (GSAP/desktop) e a hero simples depende do tipo de dispositivo
       (touch), não da largura da viewport — assim um tablet em paisagem
       continua de layout responsivo "normal" (várias colunas etc.), mas com
       a hero simples (sem pin/3D), e essas regras precisam valer mesmo que a
       largura seja maior que 768px. */
    html.simple-hero .hero-stats {
      /* no desktop fazem parte da animação do hero pinado (position:absolute,
         opacity controlada via GSAP); na hero simples (sem pin) entram no
         fluxo normal do .hero-content, entre o texto e os CTAs, já visíveis. */
      position: static;
      opacity: 1;
      width: auto;
      margin-top: 1.2rem;
      flex-wrap: wrap;
      row-gap: 1rem;
      column-gap: clamp(1.4rem, 7vw, 3rem);
    }

    /* com os stats ocupando o espaço inferior, o "role para explorar" não
       faz sentido sem o scroll pinado */
    html.simple-hero .scroll-hint {
      display: none;
    }

    /* em telas pequenas (ver @media abaixo) ou em qualquer dispositivo touch,
       o botão "Solicitar Orçamento" do header some — o espaço é melhor
       aproveitado pelo logo/menu, e o CTA já existe nos botões da hero */
    html.simple-hero .nav-cta {
      display: none;
    }

    /* Hero simples em telas de pouca ALTURA (celular em paisagem): título,
       texto, botões e stats ficam empilhados no fluxo normal (ver
       html.simple-hero acima) e juntos podem passar de 100vh — reduz tudo
       (fontes, espaçamentos, padding dos botões) para caber sem cortar. */
    @media (max-height: 500px) and (pointer: coarse) {
      .hero-content {
        padding: 1rem 5vw;
        justify-content: center;
        gap: 0.4rem;
      }

      .hero-title .line-1 {
        font-size: clamp(0.9rem, 3vw, 1.6rem);
        padding-top: 0.2em;
      }

      .hero-title .line-2 {
        font-size: clamp(2.4rem, 11vw, 6rem);
      }

      .hero-title .line-3 {
        font-size: clamp(1.4rem, 5vw, 3rem);
      }

      .hero-sub {
        margin-top: 0.5rem;
        font-size: 0.8rem;
      }

      .hero-ctas {
        margin-top: 0.6rem;
        gap: 0.6rem;
      }

      .hero-ctas .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.78rem;
      }

      html.simple-hero .hero-stats {
        margin-top: 0.6rem;
        row-gap: 0.4rem;
        column-gap: clamp(1rem, 5vw, 2.4rem);
      }

      .hero-stat .num {
        font-size: clamp(1.2rem, 4vw, 2rem);
      }

      .hero-stat .label {
        font-size: 0.62rem;
      }
    }