/* ==========================================================================
   AirPix Digital — sistema visual
   Cores extraidas do logotipo oficial (assets/brand/airpix-logo.png):
   navy #013B69 e vermelho #FE0D2D. Nenhuma cor de marca foi inventada.
   Conceito: "Energia Forjada" — presenca, precisao, contraste, execucao.
   O vermelho funciona como TALLY: marca sempre o que esta ativo/no ar.
   As barras escalonadas vem do proprio wordmark ("||||||||DIGITAL").
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:        #05182b;
  --ink-raised: #0b2740;
  --ink-line:   #16344f;
  --navy:       #013b69;
  --navy-lift:  #0a5390;
  /* --red e o vermelho exato do logotipo. Sobre branco ele rende 3.96:1 —
     suficiente para grafismo (minimo 3:1), insuficiente para texto (4.5:1).
     Por isso --red-ink, um tom mais fechado da mesma familia, cobre texto
     vermelho em fundo claro e botao vermelho com letra branca (5.10:1). */
  --red:        #fe0d2d;
  --red-ink:    #dc0a26;
  --red-deep:   #c00a22;
  /* O mesmo raciocinio do --red-ink, para o outro lado: sobre fundo escuro
     o vermelho da marca rende 4.36:1 e reprova como texto. --red-lift e um
     tom aberto da mesma familia, com 5.75:1 sobre --ink. */
  --red-lift:   #ff5c6e;
  --paper:      #ffffff;
  --fog:        #eef2f6;
  --fog-line:   #d7e0e9;
  --steel:      #56718a;
  /* --steel so serve sobre fundo claro: sobre escuro rende 2.99:1. O tom
     aberto abaixo da 5.15:1 no submenu e 6.06:1 sobre --ink, e continua
     visivelmente mais apagado que --mist, preservando a hierarquia. */
  --steel-lift: #8099b0;
  --mist:       #9db4c8;

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --rail:  clamp(1.25rem, 5vw, 2.5rem);
  --stack: clamp(4rem, 10vw, 7.5rem);
  --max:   76rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red-ink); color: #fff; padding: .75rem 1.25rem;
  font: 600 .875rem/1 var(--mono); text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--rail); }

/* ---------- tipografia ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

/* A inclinacao em vw e mais ingreme que a das outras fontes de proposito: a
   coluna do titulo encolhe mais rapido que a tela, e sem isso a linha
   "para fazer sua empresa" quebra no meio em telas de desktop menores. */
h1 { font-size: clamp(2.15rem, .6rem + 4.4vw, 3.85rem); font-weight: 900; }
h2 { font-size: clamp(1.85rem, 1.2rem + 3vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .6vw, 1.4rem); font-stretch: 105%; letter-spacing: -.012em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.075rem, 1rem + .5vw, 1.3rem);
  line-height: 1.55;
  color: var(--steel);
  max-width: 46ch;
}
.on-dark .lede { color: var(--mist); }

/* ---------- motivo: barras escalonadas do wordmark ---------- */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 1.15rem; }
.bars i {
  display: block; width: 3px; height: 100%;
  background: currentColor; opacity: .18;
}
.bars i:nth-child(2) { opacity: .3; }
.bars i:nth-child(3) { opacity: .42; }
.bars i:nth-child(4) { opacity: .56; }
.bars i:nth-child(5) { opacity: .72; }
.bars i:nth-child(6) { opacity: .88; }
.bars i:nth-child(7) { opacity: 1; }
.bars i.live { background: var(--red); opacity: 1; width: 4px; }

/* ---------- eyebrow com tally ---------- */
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  /* 12px e o piso de leitura, e vale em qualquer tela — nao so no celular.
     Rotulo em caixa alta cansa antes de comunicar quando fica menor que isso. */
  font: 600 .78rem/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 1.15rem;
}
.on-dark .eyebrow { color: var(--mist); }
.eyebrow::before {
  content: ""; flex: none;
  width: 1.4rem; height: 3px; background: var(--red);
}

/* ---------- botoes ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 600 .9rem/1 var(--body);
  letter-spacing: .005em;
  padding: 1.02rem 1.5rem;
  border: 2px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--red-ink); color: #fff; border-color: var(--red-ink); }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep); }

.btn-ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.32); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(255,255,255,.07); }

.btn-outline { background: transparent; color: var(--navy); border-color: var(--fog-line); }
.btn-outline:hover { border-color: var(--navy); background: var(--fog); }

/* WhatsApp: verde do app, nao da marca AirPix — o botao precisa ser
   reconhecido pelo que abre, sem se confundir com um CTA qualquer.
   O verde claro do app (#25D366) rende so 1.98:1 com letra branca; este
   tom fechado da mesma familia rende 5.02:1 e continua lendo como WhatsApp. */
.btn-whats {
  margin-top: 1.75rem;
  background: #15803d; color: #fff; border-color: #15803d;
}
.btn-whats:hover { background: #11702f; border-color: #11702f; }
.btn-whats .ico { flex: none; }

.btn .arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- cabecalho ---------- */
.head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,24,43,.92);
  /* O Safari, no iPhone e no Mac, so entende a versao com prefixo. Sem ela o
     cabecalho perde o desfoque justamente onde ele mais aparece. */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
}
.head-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.25rem;
}
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 2.1rem; width: auto; }

/* ---------- navegacao ----------
   Um markup so para as duas telas. No celular o <nav> vira painel que abre;
   no desktop vira barra horizontal com submenu suspenso. */

.menu-abrir {
  display: inline-flex; align-items: center; gap: .55rem;
  background: transparent; border: 1px solid var(--ink-line);
  border-radius: 4px; padding: .6rem .8rem;
  color: var(--paper); font: 600 .82rem/1 var(--body);
  cursor: pointer; min-height: 44px;
}
.menu-abrir:hover { border-color: var(--mist); }
.menu-barras { display: grid; gap: 3px; }
.menu-barras i { display: block; width: 17px; height: 2px; background: currentColor; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.menu-abrir[aria-expanded="true"] .menu-barras i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-abrir[aria-expanded="true"] .menu-barras i:nth-child(2) { opacity: 0; }
.menu-abrir[aria-expanded="true"] .menu-barras i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-lista { list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font: 500 1rem/1.3 var(--body); color: var(--mist);
  text-decoration: none;
  padding: .85rem 0; min-height: 44px;
  transition: color .18s var(--ease);
}
.nav-link:hover { color: var(--paper); }
.nav-gatilho { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.seta {
  width: .5rem; height: .5rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--ease);
}
.nav-gatilho[aria-expanded="true"] .seta { transform: rotate(-135deg) translate(-2px, -2px); }

.submenu a {
  display: block; text-decoration: none; color: var(--mist);
  padding: .7rem 0 .7rem .9rem;
  border-left: 2px solid var(--ink-line);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.submenu a:hover, .submenu a:focus-visible { color: var(--paper); border-left-color: var(--red); }
.submenu strong { display: block; font-weight: 600; font-size: .95rem; }
.submenu span { display: block; font-size: .85rem; color: var(--steel-lift); margin-top: .15rem; }

/* --- celular: painel que abre --- */
@media (max-width: 61.99rem) {
  .head-in { flex-wrap: wrap; }
  .nav {
    flex-basis: 100%;
    display: none;
    padding: .5rem 0 1.25rem;
    border-top: 1px solid var(--ink-line);
    margin-top: .75rem;
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
  }
  .nav.aberto { display: block; }
  .nav-item + .nav-item, .tem-sub .submenu { border-top: 1px solid var(--ink-line); }
  /* Fechado por padrao: abrir tudo de uma vez enche a tela de rolagem. */
  .submenu { display: none; padding: .35rem 0 .75rem; }
  .submenu.aberto { display: block; }
  .nav-cta { margin-top: 1.15rem; width: 100%; justify-content: center; }
}

/* --- desktop: barra horizontal com submenu suspenso --- */
@media (min-width: 62rem) {
  .menu-abrir { display: none; }
  .nav { display: flex; align-items: center; gap: 1.5rem; }
  .nav-lista { display: flex; align-items: center; gap: 1.5rem; }
  .nav-item { position: relative; }
  .nav-link {
    position: relative; width: auto;
    font-size: .875rem; padding: .4rem 0; min-height: 0;
  }
  .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem;
    height: 2px; background: var(--red);
    transform: scaleX(0); transform-origin: left;
    transition: transform .2s var(--ease);
  }
  /* Dois usos do mesmo tally: "page" marca a pagina em que estamos,
     "true" marca a secao visivel enquanto se rola a home. */
  .nav-link:hover::after, .nav-link[aria-current]::after,
  .tem-sub:hover .nav-gatilho::after { transform: scaleX(1); }
  .nav-link[aria-current] { color: var(--paper); }

  .submenu {
    position: absolute; top: calc(100% + .9rem); left: -1rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1.25rem;
    width: 40rem; padding: 1.15rem;
    background: var(--ink-raised);
    border: 1px solid var(--ink-line);
    border-radius: 6px;
    box-shadow: 0 24px 48px rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  /* Ponte invisivel entre o item e o painel: sem ela o menu fecha quando o
     ponteiro atravessa o vao. */
  .tem-sub::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1rem;
  }
  .tem-sub:hover .submenu,
  .tem-sub:focus-within .submenu,
  .submenu.aberto { opacity: 1; visibility: visible; transform: none; }
  .submenu a { padding: .65rem .8rem; border-left: 0; border-radius: 4px; }
  .submenu a:hover, .submenu a:focus-visible { background: rgba(255,255,255,.05); }
}

.head .btn { padding: .72rem 1.1rem; font-size: .82rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 6.5vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
/* A cena ja nasce dividida: escuro a esquerda, rede luminosa subindo para a
   direita. `right center` mantem o nucleo de brilho no terco direito, e o
   corte de `cover` come o lado esquerdo — que na arte e vazio de proposito.
   `image-set` entrega WebP a quem aceita e JPEG a quem nao aceita; o navegador
   escolhe, sem media query nem script. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: url("../img/hero-rede.jpg");
  background-image: image-set(
    url("../img/hero-rede.webp") type("image/webp"),
    url("../img/hero-rede.jpg")  type("image/jpeg")
  );
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Opacidade alta de proposito: a rede E o assunto do hero. Quem escurece
     aqui e o gradiente de baixo, que age so onde o texto passa. */
  opacity: .92;
}
/* O overlay trabalha na horizontal: opaco onde o texto vive, quase ausente
   sobre o nucleo luminoso. Sem isso o titulo disputa com os pontos; com um
   overlay uniforme, a rede vira massa escura e some. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg,
      var(--ink) 0%,
      rgba(5,24,43,.94) 30%,
      rgba(5,24,43,.72) 48%,
      rgba(5,24,43,.34) 66%,
      rgba(5,24,43,.10) 84%,
      rgba(5,24,43,0)   100%),
    linear-gradient(to top, var(--ink) 1%, transparent 34%);
}

/* No celular a coluna e unica: o texto atravessa a area onde a rede aparece.
   O enquadramento desloca para 78% — mantem o nucleo de brilho visivel na
   borda direita sem jogar os pontos mais fortes atras do titulo — e o
   gradiente sobe de opacidade, porque agora ele protege a largura toda. */
@media (max-width: 48rem) {
  .hero::before { background-position: 78% center; opacity: .82; }
  .hero::after {
    background:
      linear-gradient(168deg,
        var(--ink) 0%,
        rgba(5,24,43,.92) 34%,
        rgba(5,24,43,.66) 60%,
        rgba(5,24,43,.30) 86%,
        rgba(5,24,43,.12) 100%),
      linear-gradient(to top, var(--ink) 2%, transparent 30%);
  }
}

/* Tela cheia nas paginas de recado (404 e obrigado).
   No iPhone, 100vh mede a tela SEM as barras do navegador, entao a secao fica
   mais alta que o espaco visivel e empurra o conteudo para fora. 100dvh mede
   o que esta realmente a vista. O 100vh fica antes como reserva para
   navegador antigo que nao conhece dvh. */
.tela-cheia {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}

.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
/* Duas colunas so a partir de 68rem: abaixo disso a coluna do titulo fica
   estreita demais para a manchete, e a assinatura desce sem prejuizo. */
@media (min-width: 68rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 11rem;
    column-gap: 2.5rem;
    align-items: end;
  }
}

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--red); }
/* as quebras manuais servem a leitura no desktop; no celular atrapalham */
@media (max-width: 40rem) { .hero h1 br { display: none; } }
.hero .lede { max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.25rem; }

/* assinatura: pilha de barras forjadas, escala grande do wordmark */
.forge { display: flex; align-items: flex-end; gap: .45rem; height: clamp(6rem, 16vw, 11rem); }
.forge b {
  display: block; flex: 1; border-radius: 1px;
  background: linear-gradient(to top, var(--navy-lift), rgba(157,180,200,.55));
  transform-origin: bottom;
  animation: forge-rise .85s var(--ease) both;
}
.forge b:nth-child(1) { height: 22%; animation-delay: .05s; }
.forge b:nth-child(2) { height: 34%; animation-delay: .12s; }
.forge b:nth-child(3) { height: 48%; animation-delay: .19s; }
.forge b:nth-child(4) { height: 63%; animation-delay: .26s; }
.forge b:nth-child(5) { height: 79%; animation-delay: .33s; }
.forge b:nth-child(6) { height: 100%; animation-delay: .4s;
  background: linear-gradient(to top, var(--red-deep), var(--red)); }
@keyframes forge-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .forge b { animation: none; } }

/* ==========================================================================
   Assinatura visual de cada pagina de servico
   O grafico de degraus (.forge) fica so em Estrategia & Crescimento. As
   demais paginas ganham uma arte propria, para nao serem a mesma pagina com
   o titulo trocado. Tudo em CSS: nenhuma delas e material de cliente.
   ========================================================================== */
.arte { position: relative; display: block; width: 100%; height: clamp(7rem, 18vw, 12rem); }
.arte i, .arte b { position: absolute; display: block; }

/* Home: quatro frentes convergindo para um ponto — "em uma so direcao". */
.arte-convergencia i {
  right: 18%; height: 2px; width: 62%; transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(157,180,200,.55));
}
.arte-convergencia .v1 { top: 50%; transform: rotate(-21deg); }
.arte-convergencia .v2 { top: 50%; transform: rotate(-7deg); }
.arte-convergencia .v3 { top: 50%; transform: rotate(7deg); }
.arte-convergencia .v4 { top: 50%; transform: rotate(21deg); }
.arte-convergencia .foco {
  right: 15%; top: calc(50% - 8px);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 9px rgba(254,13,45,.16);
}

/* Sobre: linha do tempo, com o inicio marcado. */
.arte-tempo .linha { left: 0; right: 0; top: 50%; height: 2px; background: rgba(157,180,200,.3); }
.arte-tempo i.marca { top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: rgba(157,180,200,.55); }
.arte-tempo .t1 { left: 0; background: var(--red); box-shadow: 0 0 0 7px rgba(254,13,45,.15); }
.arte-tempo .t2 { left: 34%; }
.arte-tempo .t3 { left: 62%; }
.arte-tempo .t4 { right: 0; }
.arte-tempo b {
  left: 0; top: calc(50% + 1.1rem);
  font: 600 .78rem/1.4 var(--mono); letter-spacing: .1em; color: var(--mist);
}

/* Audiovisual: sequencia de quadros, como uma tira de filme. */
.arte-video i {
  top: 8%; height: 84%; width: 30%;
  border: 2px solid rgba(157,180,200,.45); border-radius: 3px;
}
.arte-video .f1 { left: 0; }
.arte-video .f2 { left: 35%; border-color: rgba(157,180,200,.7); }
.arte-video .f3 { left: 70%; border-color: var(--red); background: rgba(254,13,45,.1); }
.arte-video::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(157,180,200,.25);
}

/* Eventos: mosaico de cameras com o sinal de no ar. */
.arte-eventos i { background: rgba(157,180,200,.16); border: 1px solid rgba(157,180,200,.3); border-radius: 3px; }
.arte-eventos .m1 { left: 0;   top: 0;   width: 54%; height: 58%; background: rgba(157,180,200,.26); }
.arte-eventos .m2 { left: 58%; top: 0;   width: 42%; height: 58%; }
.arte-eventos .m3 { left: 0;   top: 64%; width: 26%; height: 36%; }
.arte-eventos .m4 { left: 30%; top: 64%; width: 26%; height: 36%; }
.arte-eventos .m5 { left: 60%; top: 64%; width: 40%; height: 36%; border-color: var(--red); background: rgba(254,13,45,.12); }
.arte-eventos .live {
  left: 1rem; top: 1rem;
  font: 600 .78rem/1 var(--mono); letter-spacing: .12em;
  color: #fff; background: var(--red-ink);
  padding: .4rem .55rem; border-radius: 3px;
}
.arte-eventos .live::before {
  content: ""; display: inline-block; width: .45rem; height: .45rem;
  border-radius: 50%; background: #fff; margin-right: .4rem;
  vertical-align: middle;
  animation: pulso 1.8s ease-in-out infinite;
}
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .arte-eventos .live::before { animation: none; } }

/* Drone: percurso do voo, do chao ao alto. */
.arte-drone .traco {
  left: 0; right: 0; top: 20%; bottom: 20%;
  border-bottom: 2px solid rgba(157,180,200,.35);
  border-right: 2px solid rgba(157,180,200,.35);
  border-radius: 0 0 60% 0;
}
.arte-drone .alvo {
  right: -7px; top: calc(20% - 7px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 8px rgba(254,13,45,.15);
}
.arte-drone .base { left: 0; bottom: 20%; width: 10px; height: 10px; border-radius: 50%; background: rgba(157,180,200,.5); transform: translate(-4px, 5px); }

/* Marketing: grade editorial com uma peca em destaque. */
.arte-marketing i { border-radius: 3px; background: rgba(157,180,200,.18); border: 1px solid rgba(157,180,200,.3); }
.arte-marketing .g1 { left: 0;   top: 0;    width: 30%; height: 46%; }
.arte-marketing .g2 { left: 34%; top: 0;    width: 30%; height: 46%; background: rgba(157,180,200,.3); }
.arte-marketing .g3 { left: 68%; top: 0;    width: 32%; height: 100%; border-color: var(--red); background: rgba(254,13,45,.1); }
.arte-marketing .g4 { left: 0;   top: 54%;  width: 30%; height: 46%; background: rgba(157,180,200,.3); }
.arte-marketing .g5 { left: 34%; top: 54%;  width: 30%; height: 46%; }

/* Tecnologia: um painel, com barra de janela e linhas de conteudo. */
.arte-tech .janela {
  left: 0; right: 0; top: 0; bottom: 0;
  border: 1px solid rgba(157,180,200,.35); border-radius: 5px;
  background: rgba(157,180,200,.06);
}
.arte-tech .barra { left: 0; right: 0; top: 0; height: 1.6rem; border-bottom: 1px solid rgba(157,180,200,.28); }
.arte-tech .ponto1, .arte-tech .ponto2 { top: .6rem; width: 7px; height: 7px; border-radius: 50%; background: rgba(157,180,200,.5); }
.arte-tech .ponto1 { left: .7rem; }
.arte-tech .ponto2 { left: 1.5rem; }
.arte-tech .l1, .arte-tech .l2, .arte-tech .l3 { left: 1rem; height: 8px; border-radius: 4px; background: rgba(157,180,200,.3); }
.arte-tech .l1 { top: 2.6rem; width: 55%; }
.arte-tech .l2 { top: 4rem;   width: 38%; }
.arte-tech .l3 { top: 5.4rem; width: 46%; background: var(--red); }

.forge-label {
  margin-top: .9rem;
  font: 600 .75rem/1.5 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--mist);
}

.hero-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.1rem;
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-line);
  font: 500 .78rem/1.5 var(--mono);
  letter-spacing: .11em; text-transform: uppercase; color: var(--mist);
}
.hero-foot .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--red); flex: none; }

/* ---------- secoes ---------- */
.section { padding-block: var(--stack); }
.section-dark { background: var(--ink); color: var(--paper); }
.section-fog { background: var(--fog); }

/* ---------- superficie clara dentro de secao escura ----------
   .section-dark pinta o texto de branco e todo mundo dentro herda isso.
   Um bloco de fundo claro colocado ali dentro fica com letra branca sobre
   fundo branco: o titulo some, o paragrafo (que tem cor propria) fica, e o
   bloco parece apenas ter perdido o titulo. E o tipo de defeito que passa
   por revisao porque nao parece quebrado.

   Esta regra vale para toda superficie clara do site de uma vez. Bloco
   claro novo entra nesta lista — a auditoria falha se esquecerem. */
.section-dark .card,      .on-dark .card,
.section-dark .area,      .on-dark .area,
.section-dark .limits,    .on-dark .limits,
.section-dark .panel-claro, .on-dark .panel-claro,
.section-dark .steps li,  .on-dark .steps li {
  color: var(--ink);
}
/* .card-lead e a excecao: fundo navy, letra branca de proposito. */
.section-dark .card.card-lead, .on-dark .card.card-lead { color: var(--paper); }

/* espinha: coluna estreita de rotulo + coluna larga de conteudo */
.spine { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 62rem) {
  .spine { grid-template-columns: 13rem minmax(0, 1fr); gap: 4rem; }
  .spine > .spine-label { padding-top: .35rem; }
}
/* A coluna lateral ficava pequena demais para ler no desktop. O rotulo sobe
   para ~14px e o texto explicativo para ~16px, com entrelinha mais folgada e
   menos espacamento entre letras. Linha vermelha, cores e alinhamento seguem
   iguais. */
.spine-label .eyebrow {
  margin-bottom: .75rem;
  font-size: .875rem;
  letter-spacing: .1em;
}
.spine-label .note {
  font: 400 1rem/1.55 var(--body); color: var(--steel); margin: 0;
}
.on-dark .spine-label .note, .section-dark .spine-label .note { color: var(--mist); }

.section h2 + .lede { margin-top: 1.25rem; }

/* ---------- bloco problema ---------- */
.split { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); margin-top: 2.5rem; }
@media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; } }

.panel {
  padding: clamp(1.5rem, 3.5vw, 2rem);
  border: 1px solid var(--ink-line);
  background: rgba(255,255,255,.03);
  border-radius: 3px;
}
.panel h3 { margin-bottom: .85rem; }
.panel p { color: var(--mist); font-size: .95rem; margin-bottom: 0; }
.panel.is-live { border-color: rgba(254,13,45,.5); background: rgba(254,13,45,.06); }
.panel.is-live h3 { color: var(--paper); }

/* Mesmo painel, em secao de fundo claro. O .panel nasceu para fundo escuro:
   o texto dele usa --mist, que sobre branco nao alcanca contraste de leitura. */
.panel-claro {
  border-color: var(--fog-line);
  background: var(--fog);
}
.panel-claro h3 { color: var(--navy); }
.panel-claro p { color: var(--steel); }

/* Frase de encerramento de pagina. Nao e titulo de secao: e a ultima coisa
   que a pessoa le, entao tem peso de manchete sem virar h2. */
.frase-destaque {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  max-width: 22ch;
  margin: 0 0 2rem;
  text-wrap: balance;
}

/* ---------- lista de escopo ---------- */
.scope { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
.scope li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .95rem 0;
  border-top: 1px solid var(--fog-line);
  font-size: .97rem;
}
.scope li:last-child { border-bottom: 1px solid var(--fog-line); }
.scope li::before {
  content: ""; flex: none; width: .85rem; height: 2px;
  background: var(--red); transform: translateY(-.35em);
}

/* ---------- limites (o que a AirPix nao faz) ---------- */
.limits {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--fog-line);
  border-left: 4px solid var(--navy);
  background: var(--paper);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 3px;
}
.limits h3 { margin-bottom: .8rem; }
.limits p { color: var(--steel); font-size: .95rem; max-width: 60ch; }
.limits ul {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.limits li {
  font: 500 .78rem/1 var(--mono);
  letter-spacing: .05em;
  color: var(--steel);
  border: 1px solid var(--fog-line);
  border-radius: 2px;
  padding: .55rem .7rem;
  background: var(--fog);
}

/* ---------- cards de frente ---------- */
.cards { display: grid; gap: 1px; margin-top: 2.75rem; background: var(--fog-line); border: 1px solid var(--fog-line); border-radius: 3px; overflow: hidden; }
@media (min-width: 44rem) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper);
  padding: clamp(1.5rem, 3vw, 1.9rem);
  display: flex; flex-direction: column; gap: .75rem;
  position: relative;
  transition: background-color .2s var(--ease);
  /* O card inteiro e o alvo do clique, entao ele nao pode se parecer com
     texto sublinhado — mas o titulo precisa avisar que leva a algum lugar. */
  color: inherit;
  text-decoration: none;
}
a.card h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .18em; transition: text-decoration-color .2s var(--ease); }
a.card:hover h3, a.card:focus-visible h3 { text-decoration-color: currentColor; }
.card:hover { background: #fbfcfe; }
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--red); transform: scaleY(0); transform-origin: top;
  transition: transform .22s var(--ease);
}
.card:hover::before { transform: scaleY(1); }
.card .bars { color: var(--navy); height: .85rem; margin-bottom: .35rem; }
.card p { font-size: .93rem; color: var(--steel); margin: 0; }
.card.card-lead { background: var(--navy); color: var(--paper); }
.card.card-lead:hover { background: var(--navy-lift); }
.card.card-lead p { color: rgba(255,255,255,.82); }
.card.card-lead .bars { color: #fff; }
/* Escrito como ".card .card-tag", e nao ".card-tag": com uma classe so ele
   perdia para ".card p", que tem especificidade maior, e o rotulo saia cinza.
   O vermelho e a sinalizacao do site — sem ele, o card perde o sinal. */
.card .card-tag {
  margin-top: auto; padding-top: .9rem;
  font: 600 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-ink);
}
.card.card-lead .card-tag { color: #fff; }

/* ==========================================================================
   Areas de atuacao na home
   Seis blocos clicaveis. Cada um tem uma arte propria feita em CSS, para o
   olho distinguir as frentes antes de ler. Nada aqui e foto de portfolio:
   sao formas abstratas da marca, nao trabalho de cliente.
   ========================================================================== */
.areas {
  display: grid; gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--fog-line);
  border: 1px solid var(--fog-line);
  border-radius: 6px;
  overflow: hidden;
}
@media (min-width: 46rem) { .areas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .areas { grid-template-columns: repeat(3, 1fr); } }

.area {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
  color: inherit; text-decoration: none;
  transition: background-color .22s var(--ease);
}
.area:hover, .area:focus-visible { background: #fbfcfe; }
.area::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--red); transform: scaleY(0); transform-origin: top;
  transition: transform .24s var(--ease);
}
.area:hover::before, .area:focus-visible::before { transform: scaleY(1); }

.area h3 { margin: 1.15rem 0 .6rem; }
.area p { font-size: .93rem; color: var(--steel); margin: 0 0 1.35rem; }
.area-cta {
  margin-top: auto;
  font: 600 .82rem/1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--red-ink);
  display: inline-flex; align-items: center; gap: .45rem;
}
.area:hover .area-cta .arrow { transform: translateX(3px); }
.area-cta .arrow { transition: transform .18s var(--ease); }

/* --- a arte de cada frente --- */
.area-arte {
  position: relative; display: block;
  height: 4.5rem; width: 100%;
  overflow: hidden;
}
.area-arte i, .area-arte b { position: absolute; display: block; }

/* Estrategia: degraus subindo — a unica que herda o motivo do heroi. */
.area-estrategia .area-arte i { bottom: 0; width: 14%; background: var(--navy); border-radius: 1px; opacity: .25; }
.area-estrategia .a1 { left: 0;   height: 30%; }
.area-estrategia .a2 { left: 18%; height: 52%; opacity: .45; }
.area-estrategia .a3 { left: 36%; height: 74%; opacity: .65; }
.area-estrategia .a4 { left: 54%; height: 100%; background: var(--red); opacity: 1; }

/* Audiovisual: tres quadros de uma sequencia. */
.area-video .area-arte i { top: 12%; height: 76%; width: 26%; border: 2px solid var(--navy); opacity: .3; border-radius: 2px; }
.area-video .q1 { left: 0; }
.area-video .q2 { left: 30%; opacity: .55; }
.area-video .q3 { left: 60%; opacity: .85; border-color: var(--red); }

/* Eventos: mosaico multicamera com o sinal de no ar. */
.area-eventos .area-arte i { background: var(--navy); opacity: .22; border-radius: 2px; }
.area-eventos .c1 { left: 0;   top: 0;   width: 46%; height: 55%; opacity: .4; }
.area-eventos .c2 { left: 50%; top: 0;   width: 30%; height: 55%; }
.area-eventos .c3 { left: 0;   top: 60%; width: 30%; height: 40%; }
.area-eventos .c4 { left: 34%; top: 60%; width: 46%; height: 40%; opacity: .32; }
.area-eventos .live {
  right: 0; top: 0;
  font: 600 .78rem/1 var(--mono); letter-spacing: .1em;
  color: #fff; background: var(--red-ink);
  padding: .3rem .4rem; border-radius: 2px;
}

/* Drone: trajetoria de voo com o ponto em movimento. */
.area-drone .rota {
  left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--navy) 20%, var(--navy) 80%, transparent);
  opacity: .35;
  transform: rotate(-8deg);
}
.area-drone .ponto {
  left: 62%; top: calc(50% - 9px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(254,13,45,.14);
  transition: left .35s var(--ease);
}
.area-drone:hover .ponto { left: 80%; }

/* Marketing: peças de campanha em ritmo. */
.area-marketing .area-arte i { bottom: 0; width: 11%; background: var(--navy); border-radius: 2px 2px 0 0; opacity: .3; }
.area-marketing .p1 { left: 0;   height: 45%; }
.area-marketing .p2 { left: 15%; height: 80%; opacity: .5; }
.area-marketing .p3 { left: 30%; height: 60%; opacity: .38; }
.area-marketing .p4 { left: 45%; height: 100%; background: var(--red); opacity: 1; }
.area-marketing .p5 { left: 60%; height: 70%; opacity: .44; }

/* Tecnologia: blocos ligados por um fluxo. */
.area-tech .area-arte i { top: 28%; height: 44%; border-radius: 3px; }
.area-tech .j1 { left: 0;   width: 22%; background: var(--navy); opacity: .32; }
.area-tech .j2 { left: 30%; width: 22%; background: var(--navy); opacity: .5; }
.area-tech .j3 { left: 60%; width: 22%; background: var(--red); opacity: 1; }
.area-tech .area-arte::after {
  content: ""; position: absolute; left: 22%; right: 38%; top: calc(50% - 1px);
  height: 2px; background: var(--navy); opacity: .3;
}

/* ---------- projetos (estado marcado) ---------- */
.pending {
  margin-top: 2.5rem;
  border: 1px dashed var(--ink-line);
  border-radius: 3px;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: left;
  background: rgba(255,255,255,.02);
}
.pending .tag {
  display: inline-block;
  font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-lift); border: 1px solid rgba(255,92,110,.45);
  padding: .5rem .65rem; border-radius: 2px; margin-bottom: 1.25rem;
}
.pending p { color: var(--mist); max-width: 56ch; font-size: .95rem; }
.pending-lista {
  list-style: none; margin: 1.35rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.pending-lista li {
  font: 500 .82rem/1 var(--mono); letter-spacing: .04em;
  color: var(--mist);
  border: 1px solid var(--ink-line); border-radius: 3px;
  padding: .55rem .7rem;
}

/* ---------- diferenciais ---------- */
.marks { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--ink-line); }
@media (min-width: 48rem) { .marks { grid-template-columns: 1fr 1fr; } }
.marks li {
  background: var(--ink);
  padding: 1.35rem clamp(1.1rem, 3vw, 1.6rem);
  display: flex; gap: 1rem; align-items: flex-start;
  font-size: .95rem; color: var(--mist);
}
.marks li strong { color: var(--paper); font-weight: 600; display: block; margin-bottom: .3rem; font-size: 1rem; }
.marks li .idx {
  flex: none; font: 600 .78rem/1.75 var(--mono); color: var(--red); letter-spacing: .08em;
}

/* ---------- processo (sequencia real, numerada) ---------- */
.steps { list-style: none; counter-reset: s; margin: 2.75rem 0 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fog-line); } }
.steps li {
  counter-increment: s;
  background: var(--paper);
  padding: 1.6rem 0 1.6rem;
  border-top: 1px solid var(--fog-line);
}
@media (min-width: 56rem) { .steps li { padding: 1.75rem 1.4rem 1.9rem; border-top: 3px solid var(--navy); } }
.steps li:first-child { border-top-color: var(--red); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: block;
  font: 600 .78rem/1 var(--mono); letter-spacing: .1em;
  color: var(--red-ink); margin-bottom: .8rem;
}
.steps h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.steps p { font-size: .9rem; color: var(--steel); margin: 0; }

/* ---------- contato ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); } }

.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; }
.field label { font: 600 .76rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.5 var(--body);
  color: var(--paper);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); background: rgba(255,255,255,.08); }
/* a lista aberta do select e desenhada pelo sistema: fixar cor e fundo
   evita texto escuro sobre fundo escuro em alguns navegadores */
.field select option { color: #05182b; background: #ffffff; }
.field-row { display: grid; gap: 0 1.1rem; }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; }

.form-note { font-size: .82rem; color: var(--mist); margin-top: 1rem; }

.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.contact-list li { border-top: 1px solid var(--ink-line); padding: 1.1rem 0; }
.contact-list li:last-child { border-bottom: 1px solid var(--ink-line); }
.contact-list .k { display: block; font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: .45rem; }
.contact-list .v { color: var(--paper); text-decoration: none; font-size: 1rem; border-bottom: 1px solid transparent; transition: border-color .18s var(--ease); }
a.v:hover { border-bottom-color: var(--red); }
.contact-list .pend { color: var(--red); font: 500 .8rem/1.5 var(--mono); }

/* ---------- rodape ---------- */
.foot { background: #030f1c; color: var(--mist); padding-block: clamp(2.5rem, 6vw, 3.5rem); border-top: 1px solid var(--ink-line); }

/* Tres colunas em vez da lista completa de servicos: eles ja estao no menu
   e na home. Rodape que repete tudo vira mapa do site e nao ajuda ninguem. */
.foot-topo { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) { .foot-topo { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 3rem; } }

.foot img { height: 1.9rem; width: auto; margin-bottom: 1.25rem; }
.foot p { font-size: .84rem; line-height: 1.7; margin: 0; max-width: 44ch; }

.foot-nav { display: flex; flex-direction: column; gap: .1rem; }
.foot-nav a, .foot-destaque {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--mist); font-size: .9rem; text-decoration: none;
  transition: color .18s var(--ease);
}
.foot-nav a:hover, .foot-destaque:hover { color: var(--paper); }
.foot-contato { display: flex; flex-direction: column; gap: .1rem; }
.foot-destaque { font-weight: 500; }

.foot-redes { display: flex; gap: .5rem; margin-top: .85rem; }
.foot-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 6px;
  border: 1px solid var(--ink-line); color: var(--mist);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.foot-redes a:hover { color: var(--paper); border-color: var(--mist); }

.foot-legal {
  margin-top: 2.5rem; padding-top: 1.35rem;
  border-top: 1px solid var(--ink-line);
}
.foot-legal p { font-size: .78rem; line-height: 1.8; color: #6f8ba3; max-width: none; }
.foot-legal a { color: #8fa8bd; text-decoration: none; }
.foot-legal a:hover { color: var(--paper); text-decoration: underline; }

/* A frase institucional e o que o rodape tem de mais importante. Ela ganha
   corpo e peso; os dados cadastrais ficam abaixo, em tamanho secundario,
   para nao disputarem a leitura com ela. */
.foot .institucional {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--paper);
  max-width: 34ch;
  margin: 0;
}
@media (min-width: 48rem) {
  .foot .institucional { font-size: 1.125rem; font-weight: 600; }
}

.foot-marca .institucional { margin-top: 0; }

/* ---------- utilitarias ----------
   Existem para que NENHUM atributo style="" sobre no HTML. Sem style inline,
   a politica de seguranca (CSP) pode proibir estilo embutido por completo —
   e estilo embutido e um dos caminhos de ataque por injecao. A troca custa
   onze classes e fecha uma porta inteira. */
.txt-secundario { color: var(--steel); }
.txt-suave      { color: var(--mist); }
.txt-forte      { color: var(--paper); }
.txt-herda      { color: inherit; }
.sem-quebra     { white-space: nowrap; }
.sem-topo       { padding-top: 0; }
.esp-md         { margin-top: 1.5rem; }
.esp-lg         { margin-top: 2rem; }
.esp-xl         { margin-top: 2.5rem; }
.medida-14      { max-width: 14ch; }
.medida-16      { max-width: 16ch; }

/* ---------- pagina de texto corrido (politica de privacidade) ---------- */
.texto { max-width: 44rem; }
.texto h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.texto h1 + .lede { margin-top: 1.35rem; }
.texto h2 {
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  margin: 2.75rem 0 .85rem;
}
.texto h2:first-of-type { margin-top: 2rem; }
.texto p, .texto li { color: var(--mist); }
.texto ul { padding-left: 1.1rem; margin: 0 0 1.15em; }
.texto li { margin-bottom: .5rem; }
.texto strong { color: var(--paper); font-weight: 600; }
.texto a { color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }
.texto .atualizado {
  font: 500 .78rem/1.5 var(--mono);
  letter-spacing: .11em; text-transform: uppercase; color: var(--mist);
  border-top: 1px solid var(--ink-line);
  padding-top: 1.25rem; margin-top: 2.75rem;
}
.texto table { width: 100%; border-collapse: collapse; margin: 0 0 1.15em; font-size: .93rem; }
.texto th, .texto td {
  text-align: left; padding: .7rem .8rem .7rem 0;
  border-bottom: 1px solid var(--ink-line); vertical-align: top;
}
.texto th { color: var(--paper); font-weight: 600; }
.texto td { color: var(--mist); }

/* ---------- revelacao no scroll ----------
   O conteudo e visivel por padrao. A animacao so entra quando o JS confirma
   que consegue reverte-la (classe .js-anim no <html>). Sem JS, sem quebra. */
html.js-anim .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
html.js-anim .reveal.seen { opacity: 1; transform: none; }

/* ==========================================================================
   Toque e leitura no celular
   Dedo nao e ponteiro: alvo abaixo de 44px erra. E rotulo em caixa alta
   abaixo de 12px cansa antes de comunicar.

   A condicao certa e o APONTADOR, nao a largura: um tablet largo tambem e
   dedo. A largura entra junto so como rede — navegador antigo sem suporte a
   `pointer`, e janela estreita no desktop, onde alvo maior nao atrapalha.
   ========================================================================== */
@media (pointer: coarse), (max-width: 48rem) {
  .contact-list .v,
  .foot-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .btn,
  .brand,
  .skip { min-height: 44px; }
  .brand { align-items: center; }
  .nav a { padding-block: .75rem; }

  /* O piso de 12px de fonte NAO mora aqui: ele vale em toda tela e ja esta
     aplicado em cada rotulo. Repetir a regra no celular criaria dois lugares
     dizendo a mesma coisa, e um deles ficaria para tras. */

  /* Link dentro de frase fica de fora do minimo de 44px de proposito:
     esticar a altura dele abriria buraco no meio do paragrafo, e a propria
     regra de acessibilidade isenta alvo embutido em texto corrido. */
  p a { min-height: 0; }
}

/* ---------- videos do canal ----------
   A capa e uma imagem NOSSA. O YouTube so entra depois do clique — antes
   disso ele nao sabe que a pagina foi aberta. E o que permite a politica de
   privacidade continuar dizendo que o site nao rastreia ninguem. */
.videos {
  display: grid; gap: 1px; margin-top: 2.5rem;
  background: var(--fog-line); border: 1px solid var(--fog-line); border-radius: 3px;
  overflow: hidden;
}
@media (min-width: 40rem) { .videos { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }

.video { position: relative; background: var(--ink); }
.video img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 16; }
@media (min-width: 40rem) { .video img { aspect-ratio: 3 / 4; } }

/* O botao cobre a capa inteira: o alvo e o video todo, nao um icone pequeno. */
.video button {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .75rem;
  width: 100%; padding: 1.1rem;
  border: 0; cursor: pointer; text-align: left;
  color: #fff;
  background: linear-gradient(to top, rgba(5,24,43,.92) 0%, rgba(5,24,43,.55) 38%, rgba(5,24,43,.08) 70%);
  transition: background .2s var(--ease);
}
.video button:hover { background: linear-gradient(to top, rgba(5,24,43,.95) 0%, rgba(5,24,43,.68) 45%, rgba(5,24,43,.2) 78%); }

.video .play {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; flex: none;
  border: 2px solid #fff; border-radius: 50%;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.video .play::before {
  content: ""; margin-left: .2rem;
  border-style: solid; border-width: .5rem 0 .5rem .8rem;
  border-color: transparent transparent transparent #fff;
}
.video button:hover .play, .video button:focus-visible .play { background: var(--red-ink); border-color: var(--red-ink); }

.video .video-titulo { font: 600 .95rem/1.35 var(--body); }

/* Depois do clique, o iframe ocupa o lugar da capa. */
.video iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; }
@media (min-width: 40rem) { .video iframe { aspect-ratio: 3 / 4; } }

.videos-canal { margin-top: 1.5rem; }
.videos-canal a { color: var(--red-ink); font-weight: 600; text-decoration: none; }
.videos-canal a:hover { text-decoration: underline; }

/* ---------- botao flutuante de WhatsApp ----------
   Mesmo desenho do site da Sao Jorge. Nasce visivel e some quando a area de
   contato ou o rodape chegam na tela: la o mesmo botao ja existe, e mostrar
   os dois duplicaria a acao e cobriria o conteudo.

   As medidas usam env(safe-area-inset-*) por causa do iPhone: sem isso o
   botao fica embaixo da barra de gestos e vira alvo dificil de acertar. */
.zap-fixo {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 90;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
/* Escondido nao e so invisivel: sem pointer-events ele nao rouba clique, e o
   JS tira do caminho do teclado. */
.zap-fixo[data-visivel="false"] {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.zap-fixo a {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: 0 1.15rem;
  border-radius: 999px;
  /* #128c7e e o verde do WhatsApp, mas com letra branca ele rende 4.14:1 e
     reprova como texto. Este e o verde escuro da propria marca, 7.67:1 —
     continua sendo WhatsApp para quem olha, e da para ler. */
  background: #075e54; color: #fff;
  font: 600 .95rem/1 var(--body);
  text-decoration: none;
  box-shadow: 0 .5rem 1.5rem rgba(5, 24, 43, .3);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.zap-fixo a:hover { background: #054d45; transform: translateY(-1px); }
.zap-fixo a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* Em tela estreita vira so o circulo: o rotulo continua existindo para
   leitor de tela, mas nao ocupa a largura que o conteudo precisa. */
@media (max-width: 30rem) {
  .zap-fixo a { width: 56px; min-height: 56px; padding: 0; justify-content: center; }
  .zap-fixo a span {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zap-fixo, .zap-fixo a { transition: none; }
}

/* ---------- as tres areas da home ----------
   As seis frentes continuam existindo, com as mesmas paginas e a mesma arte.
   O que mudou e a leitura: seis blocos lado a lado nao diziam como as coisas
   se relacionam. Tres areas dizem.

   O titulo da area nao e link. Ele nomeia um agrupamento, nao uma pagina —
   e link que nao leva a lugar nenhum ensina a pessoa a desconfiar dos
   outros. */
.frentes-areas { margin-top: 2.75rem; display: grid; gap: clamp(2.5rem, 5vw, 3.75rem); }

.frente-area { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) {
  .frente-area { grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem; align-items: start; }
}

.frente-titulo { display: grid; gap: .4rem; align-content: start; }
.frente-n {
  font: 600 .75rem/1 var(--mono); letter-spacing: .14em; color: var(--red-ink);
}
.frente-titulo h3 { font: 800 1.35rem/1.15 var(--display); letter-spacing: -.015em; }
.frente-titulo p { color: var(--steel); font-size: .95rem; line-height: 1.5; max-width: 30ch; }

/* A terceira area tem uma pagina so. Sem esta regra o cartao sozinho estica
   para a largura inteira e parece um erro de montagem. */
.frente-area .areas { margin-top: 0; }
@media (min-width: 48rem) {
  .frente-area .areas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
}

/* ---------- titulo de area dentro do submenu ---------- */
.submenu-area {
  margin: .9rem 0 .35rem;
  padding-left: .9rem;
  font: 600 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel-lift);
}
.submenu-area:first-child { margin-top: .25rem; }

/* ---------- barramento do ecossistema ----------
   Nao e constelacao de nos nem grade de cartoes: e uma mesa de sinal, que e
   o mundo da propria AirPix (transmissao multicamera, corte ao vivo). O
   vermelho marca o trecho "no ar", seguindo a regra ja documentada aqui:
   vermelho nao e enfeite, e sinalizacao — como luz de camera. */
.barramento { margin-top: 2.75rem; position: relative; }

/* A linha do barramento. Vertical no celular, horizontal no desktop: e
   recomposicao, nao reducao. */
.barramento::before {
  content: ""; position: absolute; background: var(--ink-line);
  left: 1.35rem; top: 0; bottom: 0; width: 2px;
}
@media (min-width: 62rem) {
  .barramento::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; }
}

.estacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; position: relative; z-index: 1; }
@media (min-width: 62rem) { .estacoes { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.estacao { position: relative; padding: 1.1rem 0 1.1rem 3.25rem; }
@media (min-width: 62rem) {
  /* Alterna acima e abaixo da linha: e o que permite oito estacoes caberem
     em quatro colunas sem apertar o texto. */
  .estacao { padding: 0 1rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 11rem; }
  .estacao:nth-child(even) { justify-content: flex-start; padding-top: calc(50% + 1.5rem); }
  .estacao:nth-child(odd)  { padding-bottom: calc(50% + 1.5rem); }
}

/* O ponto onde a estacao encosta na linha. */
.estacao::before {
  content: ""; position: absolute; left: 1.05rem; top: 1.6rem;
  width: .65rem; height: .65rem; background: var(--ink);
  border: 2px solid var(--steel-lift); border-radius: 50%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
@media (min-width: 62rem) { .estacao::before { left: 1rem; top: 50%; transform: translateY(-50%); } }

.estacao b { display: block; font: 600 .95rem/1.3 var(--body); color: var(--paper); }
.estacao span { display: block; margin-top: .3rem; font-size: .85rem; line-height: 1.5; color: var(--steel-lift); }
.estacao i {
  display: block; font: 600 .75rem/1 var(--mono); letter-spacing: .12em;
  color: var(--steel-lift); font-style: normal; margin-bottom: .5rem;
}

/* O pulso: um trecho de cada vez fica no ar. */
.estacao.no-ar::before { border-color: var(--red); background: var(--red); }
.estacao.no-ar i { color: var(--red-lift); }

.legenda {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-line);
  color: var(--mist); font: 600 .78rem/1.5 var(--mono); letter-spacing: .06em;
}

/* Movimento reduzido: para de vez e acende tudo. Nao fica mais lento —
   fica parado, e a informacao continua inteira. */
@media (prefers-reduced-motion: reduce) {
  .estacao::before { transition: none; }
}