/* ==========================================================================
   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 { position: relative; 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); right: 0; left: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: .15rem 1.25rem;
    width: min(40rem, calc(100vw - 3rem)); 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;
  }
    /* O item NAO cria contexto de posicionamento: com ele relativo, um
       painel de 40rem se ancorava num item de 111px e nao cabia de nenhum
       lado numa tela de ~1000px — saia 67px pela direita ou 94px pela
       esquerda. Ancorado no .nav ele encosta na direita e sobra espaco. */
    .tem-sub { position: static; }

    /* Ponte entre o item e o painel: sem ela o menu fecha quando o ponteiro
       atravessa o vao. Padding com margem negativa faz o mesmo que o
       ::after absoluto, sem exigir o item relativo de volta. */
    .tem-sub { padding-bottom: 1rem; margin-bottom: -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. */
/* Os quadros da arte de video e a linha que os cruzava sairam em 02/09/2026:
   eram forma sem conteudo. O fundo tecnologico da secao ficou no lugar. */

/* Eventos: mosaico de cameras com o sinal de no ar. */
.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 3.4s ease-in-out infinite;
}

/* 3,4s e nao 1,8s, e o fundo cai a .45 e nao a .25: em 1,8s indo quase a zero
   o ponto PISCAVA, e piscar e linguagem de alerta. Um indicador de
   transmissao no ar respira — diz "estou ligado", nao "olhe para mim".

   O selo inteiro tambem respira, com meio segundo a mais que o ponto: os dois
   em fase seriam um pulso so, mais forte. Defasados, o conjunto parece vivo
   sem que nenhuma das partes chame atencao sozinha. */
.arte-eventos .live { animation: live-respira 3.9s ease-in-out infinite; }

@keyframes pulso        { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
@keyframes live-respira { 0%,100% { filter: brightness(1) } 50% { filter: brightness(1.14) } }

@media (prefers-reduced-motion: reduce) {
  .arte-eventos .live::before,
  .arte-eventos .live { animation: none; filter: 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. */

/* A arte de tecnologia — painel com barra de janela, dois pontos e tres
   linhas, uma delas vermelha — saiu em 02/09/2026. Era forma sem conteudo,
   e nada entrou no lugar: o fundo tecnologico da secao ja preenche a
   regiao. As regras que a pintavam sairam junto para nao virarem peso
   morto. */

.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); }

/* Segundo tom escuro, para quando duas secoes escuras se encostam.
   O site alterna claro e escuro para que blocos vizinhos nao virem um so —
   mas com o hero, o ecossistema e o contato escuros por desenho, a
   alternancia perfeita nao fecha e sobram emendas. Aqui a separacao vem do
   TOM, nao do tema: #153b5f contra #05182b da 1,56 de razao — perceptivel como bloco distinto,
   contra os 1,18 do --ink-raised, que a olho nu nao separava nada. E o texto
   branco mantem 11,5 de contraste sobre ele. Nao obriga o texto a mudar de cor
   a mudar de cor, que foi o que inviabilizou clarear estas secoes — a de
   projetos tinha doze textos reprovando contraste sobre fundo branco, um
   deles branco sobre branco. */
.section-dark--alto { background: #153b5f; }

/* ---------- 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;
}
/* As ilustracoes das frentes eram feitas de <i> posicionados em absoluto, e
   as regras que os pintavam viveram aqui ate 02/09/2026. Sairam junto com
   eles: os seis cards passaram a usar SVG, que anima e escala sem depender
   de porcentagem sobre uma caixa de altura fixa. O historico do git guarda
   o desenho antigo. */

/* ---------- 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;
}
  /* Sobre o tom escuro alto o vermelho da tag cai de 5,98 para 3,84 de
     contraste, abaixo do minimo de 4,5 — o fundo mais claro come a diferenca.
     Clareado so onde esse fundo esta; o tom da marca segue intacto no resto. */
  .section-dark--alto .pending .tag {
    color: #ff98a4;
    border-color: rgba(255, 152, 164, .5);
  }

.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; }
/* 75rem (1200px) e nao 62rem, e o numero saiu de medir, nao de convencao.
   A coluna lateral de 13rem mais o vao de 3rem tiram 256px da largura util.
   Com ela ao lado sobravam 849px em 1200 (tres cards de 270px, apertados mas
   inteiros) e apenas 673px em 1024 — ali os tres cards da frente 02 caem
   para 213px e a linha quebrava em 2+1, desmanchando a leitura 2/3/1 que a
   tela aprovada estabelece.
   Abaixo de 1200 a coluna sobe para cima do bloco e devolve os 256px: em
   1024 os tres cards voltam a caber, com 304px cada. */
@media (min-width: 75rem) {
  .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; }
/* Uma coluna abaixo de 62rem, dito explicitamente.

   `.areas` tem regras genericas proprias em 46rem (duas colunas) e 72rem
   (tres). Elas vinham de quando os seis cards eram uma grade unica, e na
   faixa de 768 a 992px ainda venciam: a frente 02 saia em 2+1, com um card
   sozinho na segunda linha — o oposto da leitura que a tela mobile mostra.

   Declarar a coluna unica aqui e mais seguro que apagar as regras genericas:
   se `.areas` voltar a ser usada em outro lugar, ela mantem o comportamento
   antigo e so as frentes seguem esta. */
.frente-area .areas { grid-template-columns: minmax(0, 1fr); }

/* Dois limiares, os dois medidos:

   62rem (992px) — abaixo daqui os cards EMPILHAM, que e a composicao da tela
   mobile aprovada. Em 768px a faixa util e de 688px e tres cards de 256px
   precisam de 804: nao cabem, e insistir produzia a linha 2+1 que desmancha
   a leitura 2/3/1.

   16rem (256px) de minimo, e nao 17rem — a diferenca decide 1200px. Ali a
   faixa mede 849px e tres cards de 17rem pedem 852. Faltavam tres pixels, e
   a frente 02 quebrava em duas linhas bem no tamanho de tela mais comum de
   notebook. */
@media (min-width: 62rem) {
  .frente-area .areas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 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; }
}

/* ===========================================================================
   "O que a AirPix coloca em movimento" — telas aprovadas de 02/09/2026

   A leitura da secao nao mudou: tres frentes numeradas a esquerda, os cards
   de cada uma a direita. O que mudou foi o acabamento — os cards eram um
   bloco unico dividido por linhas de 1px, e as telas mostram cartoes soltos,
   brancos, com sombra leve sobre o fundo claro.

   O DESENHO DAS LINHAS E INFORMACAO, NAO DECORACAO. A frente 01 tem dois
   cards, a 02 tem tres e a 03 tem um card largo. Isso nao e acaso de grade:
   e quantas paginas cada frente tem hoje. Uma grade de seis iguais apagaria
   essa leitura, e foi por isso que a referencia nao a usa.
   =========================================================================== */
.frentes-areas { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

/* Cartoes soltos: o bloco colado de antes virou grade com vao real. */
.frente-area .areas {
  margin-top: 0;
  gap: clamp(.9rem, 1.6vw, 1.15rem);
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.frente-area .area {
  border: 1px solid var(--fog-line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(5, 24, 43, .04), 0 8px 24px rgba(5, 24, 43, .05);
  overflow: hidden;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease),
              border-color .24s var(--ease);
}

/* A faixa vermelha lateral era do bloco colado, onde marcava a divisao. Em
   cartao solto com borda propria ela vira ruido. */
.frente-area .area::before { content: none; }

/* Hover: elevacao minima, como pedido. 2px e sombra um pouco mais aberta —
   sem escala, que deslocaria o texto e obrigaria o olho a reencontrar a
   linha que estava lendo. */
@media (hover: hover) {
  .frente-area .area:hover {
    transform: translateY(-2px);
    border-color: #c3d2e0;
    box-shadow: 0 2px 4px rgba(5, 24, 43, .05), 0 14px 34px rgba(5, 24, 43, .09);
  }
}
.frente-area .area:focus-visible {
  outline: 2px solid var(--red-ink); outline-offset: 3px;
}

/* --- A ilustracao ---------------------------------------------------------
   Altura fixa em proporcao: a arte ocupa a mesma faixa em todos os cards da
   linha, e os titulos comecam alinhados. Sem isso, um desenho mais alto
   empurraria o texto do proprio card e quebraria a linha. */
.frente-area .area-arte {
  position: relative;
  display: block;
  margin: 0 0 1.1rem;
  border-radius: 0;
  background: none;
  aspect-ratio: 220 / 150;
  max-height: 168px;
}
.frente-area .area-arte--larga { aspect-ratio: 640 / 190; max-height: 200px; }

.art { display: block; width: 100%; height: 100%; overflow: visible; }

/* Paleta da arte: azul da marca no traco, vermelho reservado para o que
   aponta direcao (a seta, o alvo, o retorno do fluxo). */
.art {
  --art-linha:  #1d63b0;
  --art-forte:  #0a4f96;
  --art-clara:  #8fb9e4;
  --art-fraca:  #cfe0f0;
  --art-acento: var(--red);
}

/* --- 01 Estrategia & Crescimento: barras e a seta ------------------------- */
.art-barras .barra { fill: var(--art-clara); }
.art-barras .b3 { fill: #6aa3dc; }
.art-barras .b4 { fill: var(--art-linha); }
.art-base  { stroke: var(--fog-line); stroke-width: 1.5; }
.art-seta  { fill: none; stroke: var(--art-acento); stroke-width: 3; stroke-linecap: round; }
.art-ponta { fill: none; stroke: var(--art-acento); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* --- 02 Estrategia de Marketing: o alvo ---------------------------------- */
.anel  { fill: none; stroke: var(--art-clara); stroke-width: 1.6; }
.an1   { stroke: var(--art-linha); }
.an4   { stroke: var(--art-fraca); }
.art-mira  { stroke: var(--art-fraca); stroke-width: 1.2; }
.art-centro { fill: var(--art-acento); }
.art-pulso  { fill: none; stroke: var(--art-acento); stroke-width: 1.5; opacity: 0; }

/* --- 03 Producao Audiovisual: a camera ----------------------------------- */
.cam-corpo { fill: #24405c; }
.cam-visor, .cam-alca, .cam-grip { fill: #35577a; }
.lente-fora  { fill: #1b3a5e; }
.lente-anel  { fill: none; stroke: #4d7fae; stroke-width: 2; }
.lente-vidro { fill: #123a63; }
.lente-luz   { fill: #cfe6ff; opacity: .55; }
.cam-brilho  { fill: #ffffff; opacity: 0; }
.cam-rec     { fill: var(--art-acento); }

/* --- 04 Eventos & Transmissoes: palco e telao ---------------------------- */
.pal-trelica line { stroke: var(--art-clara); stroke-width: 1.4; }
.pal-torre   { stroke: var(--art-linha); stroke-width: 3; stroke-linecap: round; }
.pal-telao   { fill: #24405c; }
.pal-tela    { fill: #0f3a68; }
.pal-varre   { fill: #9ed0ff; opacity: 0; }
.pal-cadeiras rect { fill: var(--art-fraca); }

/* --- 05 Drone ------------------------------------------------------------ */
.dr-casco  { fill: #2a4a68; }
.dr-braco  { stroke: #3d6084; stroke-width: 5; stroke-linecap: round; fill: none; }
.dr-motor  { fill: #24405c; }
.helice    { fill: var(--art-clara); opacity: .6; }
.dr-gimbal { fill: #35577a; }
.dr-olho   { fill: #123a63; }
.dr-led    { fill: var(--art-acento); }

/* --- 06 Sites, Apps & Automacao ------------------------------------------ */
.lap-tampa { fill: #24405c; }
.lap-tela  { fill: #f4f8fc; }
.lap-linha { fill: var(--art-fraca); }
.lap-base  { fill: #35577a; }
.fio       { fill: none; stroke-width: 1.6; }
.fio-a     { stroke: var(--art-clara); }
.fio-b     { stroke: #f2b8c0; }
.sinal     { fill: var(--art-linha); }
.sinal.volta { fill: var(--art-acento); }
.eng-caixa { fill: #f4f8fc; stroke: var(--fog-line); stroke-width: 1.2; }
.eng-dentes{ fill: #5b7f9f; }
.eng-eixo  { fill: #f4f8fc; }
.cod-caixa { fill: #1c3f6b; }
.cod-sinal { fill: none; stroke: #cfe6ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cod-barra { stroke: #7fb0e0; stroke-width: 3; stroke-linecap: round; }

/* ===========================================================================
   As seis microanimacoes — ciclo continuo desde 02/09/2026

   A versao anterior separava "gesto unico" de "estado continuo": as barras
   subiam uma vez e paravam para sempre. Depois de trinta segundos na secao,
   metade dos cards parecia morta.

   Agora todos ciclam, e a diferenca vira RITMO em vez de parada: cada ciclo
   tem uma fase de acao curta e uma pausa longa dentro do proprio keyframe. E
   a pausa que impede a repeticao de virar publicidade piscando — o grafico
   passa 60% do tempo dele em repouso, desenhado.

   O RETORNO E SUAVE, NAO UM CORTE. Zerar de uma vez faria a barra "cair" no
   fim de cada volta, e o olho pega isso na periferia mesmo sem estar olhando.
   Os ultimos 15% de cada ciclo desfazem o estado devagar.

   AS DURACOES SAO PROPOSITALMENTE DESIGUAIS: 9s, 6,5s, 7,5s, 8s, 4,5s, 14s.
   Numeros proximos entre si sincronizariam a cada poucas voltas e os seis
   cards passariam a pulsar juntos — que e exatamente a aparencia de animacao
   automatica que nao queremos.

   Fora da tela tudo fica em `paused`, e nao desligado: ao voltar, o ciclo
   continua de onde estava em vez de recomecar do zero.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Pausa enquanto o card nao esta na tela. O JS tira e poe `.ativo`. */
  .frente-area .area:not(.ativo) .art * { animation-play-state: paused !important; }

  /* --- 01 Crescimento — 9s: barras sobem, seta percorre, longa pausa ------- */
  .art-barras .barra { transform-origin: 50% 134px; }
  .frente-area .area .b1 { animation: fr-barra 9s ease-in-out infinite; animation-delay: 0s }
  .frente-area .area .b2 { animation: fr-barra 9s ease-in-out infinite; animation-delay: .18s }
  .frente-area .area .b3 { animation: fr-barra 9s ease-in-out infinite; animation-delay: .36s }
  .frente-area .area .b4 { animation: fr-barra 9s ease-in-out infinite; animation-delay: .54s }
  .art-seta  { stroke-dasharray: 100; animation: fr-seta 9s ease-in-out infinite; }
  .art-ponta { animation: fr-ponta 9s ease-in-out infinite; }

  /* --- 02 Marketing — 6,5s e 7,5s: ja era continuo ------------------------- */
  .art-centro { animation: fr-respirar 6.5s ease-in-out infinite; }
  .art-pulso  { animation: fr-varrer 7.5s ease-out infinite; }

  /* --- 03 Audiovisual — 7,5s: brilho atravessa, foco ajusta, pausa --------- */
  .cam-brilho { animation: fr-brilho 7.5s ease-in-out infinite; }
  .lente-anel { animation: fr-foco 7.5s ease-in-out infinite; }
  .cam-rec    { animation: fr-rec 3.1s ease-in-out infinite; }

  /* --- 04 Eventos — 5,5s e 8s --------------------------------------------- */
  .live      { animation: fr-live 5.5s ease-in-out infinite; }
  .pal-varre { animation: fr-varredura 8s ease-in-out infinite; }

  /* --- 05 Drone — 4,5s: oscilacao quase imperceptivel ---------------------- */
  .dr-corpo { animation: fr-flutuar 4.5s ease-in-out infinite; }
  .helice   { animation: fr-helice 2.2s ease-in-out infinite; transform-origin: center; }
  .frente-area .area .h2, .frente-area .area .h3 { animation-delay: .4s; }
  .dr-led   { animation: fr-rec 3.6s ease-in-out infinite; }

  /* --- 06 Automacao — 14s e 6s: a referencia de leveza --------------------- */
  .eng-roda { animation: fr-girar 14s linear infinite; transform-origin: 345px 97px; }
  .fio      { animation: fr-fio 6s ease-in-out infinite; }
  .fio-b    { animation-delay: 1.6s; }
}

/* A fase de acao ocupa a primeira metade; o resto e repouso, e a volta ao
   inicio acontece nos ultimos 15%, devagar. */
@keyframes fr-barra {
  0%       { transform: scaleY(.12) }
  10%      { transform: scaleY(1) }
  85%      { transform: scaleY(1) }
  100%     { transform: scaleY(.12) }
}
@keyframes fr-seta {
  0%, 6%   { stroke-dashoffset: 100; opacity: 0 }
  10%      { opacity: 1 }
  38%      { stroke-dashoffset: 0 }
  85%      { stroke-dashoffset: 0; opacity: 1 }
  100%     { stroke-dashoffset: 0; opacity: 0 }
}
@keyframes fr-ponta {
  0%, 36%  { opacity: 0 }
  44%, 85% { opacity: 1 }
  100%     { opacity: 0 }
}
@keyframes fr-respirar { 0%,100% { r: 7; opacity: 1 } 50% { r: 8.6; opacity: .85 } }
@keyframes fr-varrer   { 0% { r: 14; opacity: .5 } 62%,100% { r: 62; opacity: 0 } }
@keyframes fr-brilho {
  0%, 22%   { opacity: 0; transform: translateX(0) }
  38%       { opacity: .5; transform: translateX(24px) }
  54%, 100% { opacity: 0; transform: translateX(42px) }
}
@keyframes fr-foco     { 0%,18%,100% { r: 24 } 34% { r: 20 } }
@keyframes fr-rec      { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes fr-live     { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .82; transform: scale(.97) } }
@keyframes fr-varredura{ 0%,100% { opacity: 0 } 14% { opacity: .16 } 46% { opacity: .05 } }
@keyframes fr-flutuar  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }
@keyframes fr-helice   { 0%,100% { opacity: .6; transform: scaleX(1) } 50% { opacity: .3; transform: scaleX(.72) } }
@keyframes fr-girar    { to { transform: rotate(360deg); } }
@keyframes fr-fio      { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* Hover no desktop nao reinicia nada: o ciclo ja esta correndo, e cortar a
   volta no meio para recomeçar seria um solavanco. */

/* ===========================================================================
   Reduzir movimento: tudo para, nada some

   Os graficos ficam no estado FINAL — barra cheia, seta desenhada, ponta
   visivel. Congelar no inicio deixaria o card com o grafico vazio, e a
   preferencia de acessibilidade custaria informacao a quem a ligou.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .art-barras .barra { transform: scaleY(1); animation: none; }
  .art-seta  { stroke-dashoffset: 0; animation: none; }
  .art-ponta { opacity: 1; animation: none; }
  .art-pulso, .cam-brilho, .pal-varre { opacity: 0; animation: none; }
  .art-centro, .lente-anel, .cam-rec, .live,
  .dr-corpo, .helice, .dr-led, .eng-roda, .fio { animation: none; }
  .sinal { display: none; }
}

/* ===========================================================================
   A composicao interna do card

   Nas telas aprovadas a ilustracao fica AO LADO do texto, nao acima dele: o
   desenho ocupa a esquerda e o titulo, a descricao e o CTA correm a direita.
   Empilhado, o card fica alto demais e a arte vira uma tarja fina — medido:
   365x72px, contra os 220x150 que o desenho pede.

   Grid com areas nomeadas, e nao flex: a arte precisa ocupar as tres linhas
   de texto de uma vez, e e isso que `grid-row: 1 / -1` faz sem que ninguem
   precise calcular altura.
   =========================================================================== */
.frente-area .area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  padding: clamp(1.1rem, 2vw, 1.4rem);
}

@media (min-width: 34rem) {
  .frente-area .area {
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    column-gap: clamp(.9rem, 1.8vw, 1.35rem);
    align-items: center;
  }
  .frente-area .area-arte {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: 0;
    align-self: center;
  }
  .frente-area .area h3,
  .frente-area .area p,
  .frente-area .area .area-cta { grid-column: 2; }
}

/* O card largo da frente 03: a ilustracao atravessa o card inteiro em cima e
   o texto vem abaixo, como na referencia. Ela conta um percurso da esquerda
   para a direita — espremida numa coluna de 38% ela deixaria de contar. */
@media (min-width: 34rem) {
  .frente-area .area-tech { grid-template-columns: minmax(0, 1fr); }
  .frente-area .area-tech .area-arte {
    grid-column: 1;
    grid-row: auto;
    margin-bottom: clamp(.9rem, 2vw, 1.4rem);
  }
  .frente-area .area-tech h3,
  .frente-area .area-tech p,
  .frente-area .area-tech .area-cta { grid-column: 1; }
}

/* A arte guarda a propria proporcao em vez de ser esmagada pelo grid. */
.frente-area .area-arte {
  min-width: 0;
  /* height: auto anula os 4.5rem que .area-arte fixava para as ilustracoes
     antigas, feitas de <i> posicionados. Sem isto o aspect-ratio nao tem o
     que calcular: a altura ja estava resolvida em 72px e o desenho saia
     achatado pela metade. */
  height: auto;
  aspect-ratio: 220 / 150;
  max-height: none;
}
.frente-area .area-arte--larga { aspect-ratio: 640 / 190; }

.frente-area .area h3 { margin: 0 0 .35rem; font-size: clamp(1rem, 1.35vw, 1.15rem); }
.frente-area .area p  { margin: 0 0 .8rem; font-size: .875rem; line-height: 1.5; }
.frente-area .area .area-cta { margin-top: auto; }

/* --- Proporcao arte/texto por tamanho de linha ----------------------------
   A frente 02 tem tres cards na mesma largura que a 01 usa para dois: cada
   um fica ~25% mais estreito, e a mesma fatia de 38% para o desenho deixava
   a coluna de texto com sete caracteres por linha. Ali a arte cede espaco.

   `container-type` seria o certo, mas a largura do card depende da linha, e
   nao da tela — por isso a regra e por frente, que e o que de fato varia. */
@media (min-width: 34rem) {
  .frente-area:nth-of-type(2) .area {
    grid-template-columns: minmax(72px, 26%) minmax(0, 1fr);
  }
}

/* "Cinematografico" e a palavra mais longa dos seis titulos e decide a
   largura minima da coluna de texto. Com hifenizacao automatica ela saia
   partida como "Cinematografi-co", que fica pior de ler do que quebrar a
   linha antes. A saida foi dar espaco em vez de cortar: a arte da frente 02
   cede alguns pontos (regra acima) e a palavra passa inteira.
   overflow-wrap fica como rede: se um dia entrar um termo ainda maior, ele
   quebra em vez de escapar da caixa. */
.frente-area .area h3 { overflow-wrap: break-word; }

/* O texto da frente 03 nao acompanha a largura do card: ele atravessa a
   pagina inteira e vira uma linha longa demais para ler com conforto. */
.frente-area .area-tech p { max-width: 68ch; }

/* A frente 02 tem tres cards onde a 01 tem dois, e o titulo mais longo dos
   seis cai justamente ali. Medido em 1440px: a coluna de texto tinha 141px e
   "Cinematografico" em 18,4px peso 800 mede 154. Faltavam 13px, e a palavra
   saia partida ao meio.

   Dois ajustes pequenos em vez de um grande: a arte cede 8px de largura
   minima e o titulo desce para 16,8px. Nenhum dos dois se nota sozinho, e
   juntos dao 22px de folga sobre o necessario. Encolher so a fonte exigiria
   ir a 15px, que ja destoaria dos outros cinco titulos. */
@media (min-width: 62rem) {
  .frente-area:nth-of-type(2) .area {
    grid-template-columns: minmax(64px, 26%) minmax(0, 1fr);
  }
  .frente-area:nth-of-type(2) .area h3 {
    font-size: clamp(.95rem, 1.15vw, 1.05rem);
  }
}

/* ===========================================================================
   Celular: a ilustracao volta a ser apoio, nao protagonista — 02/09/2026

   Medido em 390px antes de mexer: nos cinco primeiros cards a arte ocupava
   203px, ou 55% da altura do card. No "Sites, Apps & Automacao" ela ocupa
   88px, 32% — e e esse o card que ficou certo.

   A diferenca nao era de estilo, era de proporcao do desenho: os cinco usam
   um quadro 220x150 (razao 1,47) e o Sites usa 640x190 (razao 3,37). Ocupando
   a largura toda do celular, o primeiro grupo cresce quase tres vezes mais em
   altura que o segundo.

   O teto de 96px alinha os cinco a altura do Sites. O SVG encolhe inteiro
   dentro dele, mantendo a propria proporcao — nada e cortado, nada e
   esticado, e as microanimacoes continuam valendo porque sao relativas ao
   viewBox, nao a pixels.

   Nada de brilho a mais para compensar o tamanho: o pedido foi discricao, e
   clarear seria devolver pela cor o peso que se tirou da escala.
   =========================================================================== */
@media (max-width: 61.99rem) {
  .frente-area .area-arte {
    /* min() e nao 96px seco: o card Sites encolhe com a largura da tela
       (razao 3,37 sobre a largura disponivel) e os cinco, com teto fixo,
       ficavam 40% mais altos que ele em 320px. Com 26vw os dois grupos
       encolhem juntos e a escala continua parecida na tela estreita. */
    max-height: min(96px, 26vw);
    margin-bottom: 1rem;
  }
  /* O card largo ja estava na escala certa: fica como esta. */
  .frente-area .area-arte--larga { max-height: 104px; }

  .art { height: 100%; }
}

/* ===========================================================================
   "Inicio": o caminho de volta nas paginas internas — 02/09/2026

   Aparece so fora da home, e o build decide isso pelo endereco da pagina.
   Convive com o botao do menu, nao o substitui: um leva para "/", o outro
   abre a navegacao, e as duas coisas sao necessarias.

   A logo continua levando ao inicio, mas logo clicavel e convencao que nem
   todo visitante conhece — e no celular ela fica na borda, onde o polegar
   raramente vai.
   =========================================================================== */
.head-inicio {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;                 /* alvo de toque: a regra do site */
  padding: .45rem .85rem;
  margin-left: auto;                /* empurra para junto do botao do menu */
  border: 1px solid var(--ink-line);
  border-radius: 6px;
  color: var(--paper);
  font: 600 .85rem/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.head-inicio:hover { border-color: var(--steel); background: rgba(255,255,255,.05); }
.head-inicio:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Seta desenhada em CSS: um caractere mudaria de forma entre sistemas. */
.head-inicio-seta {
  width: .5rem; height: .5rem; flex: none;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Desktop amplo: o atalho sai do cabecalho porque "Inicio" ja e o primeiro
   item da navegacao, que ali esta sempre aberta. Dois caminhos para o mesmo
   lugar, lado a lado, sao ruido. */
@media (min-width: 62rem) {
  .head-inicio { display: none; }
}

/* Abaixo de 62rem o cabecalho usa o botao compacto, e o atalho ocupa
   EXATAMENTE o lugar dele — nao um espaco ao lado. Na home o build escreve o
   botao; na interna, o link. Nunca os dois, entao nao ha o que separar.

   As medidas vem do .menu-abrir de proposito: o controle troca de funcao mas
   nao de tamanho nem de posicao, e o olho de quem navegou uma pagina encontra
   o proximo no mesmo canto. */
@media (max-width: 61.99rem) {
  .head-inicio {
    margin-left: auto;
    min-height: 44px;
    padding: .55rem 1rem;
  }
}

/* ===========================================================================
   A rede do hero ganha atividade — 02/09/2026

   A imagem de fundo continua exatamente a mesma. Esta camada fica POR CIMA,
   no terco direito onde a arte tem o nucleo de brilho, e nao desloca nem
   redimensiona nada: e um SVG posicionado em absoluto, atras do conteudo.

   Os numeros sao baixos de proposito. Tres pontos de luz, quatro nos, trilhos
   quase invisiveis (.06 de alfa) que existem so para os pontos terem por onde
   correr. Ciclos de 14 a 18 segundos — nesse ritmo o movimento e percebido
   pela visao periferica e nunca disputa com o titulo.

   z-index abaixo do conteudo e acima do veu: a luz aparece atraves do
   escurecimento, como se viesse de dentro da imagem.
   =========================================================================== */
.hero-vida {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;                /* o conteudo do hero fica acima */
  pointer-events: none;
  opacity: .85;
}
.hero > .wrap { position: relative; z-index: 1; }

.hv-trilhos path {
  fill: none;
  stroke: rgba(150, 205, 255, .06);
  stroke-width: 1;
}
.hv-no  { fill: #a9ddff; opacity: .18; }
.hv-luz { fill: #cfe9ff; opacity: .55; }

@media (prefers-reduced-motion: no-preference) {
  /* Os nos acendem fora de fase: em fase seriam um pisca-pisca so. */
  .hv-no { animation: hv-acender 7s ease-in-out infinite; }
  .n2 { animation-duration: 9s;  animation-delay: 1.5s }
  .n3 { animation-duration: 11s; animation-delay: 3s }
  .n4 { animation-duration: 8s;  animation-delay: 4.5s }
  .hv-luz { animation: hv-brilho 6s ease-in-out infinite; }
}

@keyframes hv-acender { 0%,100% { opacity: .12 } 50% { opacity: .5 } }
@keyframes hv-brilho  { 0%,100% { opacity: .35 } 50% { opacity: .7 } }

/* No celular a camada fica ainda mais discreta: a tela e menor, a rede ocupa
   menos area e o mesmo brilho pesaria mais na composicao. */
@media (max-width: 47.99rem) {
  .hero-vida { opacity: .6; }
}

/* Reduzir movimento: a camada permanece visivel e parada. Some-la deixaria o
   hero diferente para quem ligou a preferencia, e a regra e nao tirar nada. */
@media (prefers-reduced-motion: reduce) {
  .hv-no, .hv-luz { animation: none; }
  .hero-vida animateMotion { display: none; }
}

/* ===========================================================================
   Na home, o controle acompanha a secao — 02/09/2026

   O Menu serve para ESCOLHER um destino. Depois que a pessoa entrou numa
   secao, ele deixa de ter funcao e o que ela precisa e voltar ao topo. Por
   isso o mesmo lugar troca de conteudo quando ha hash no endereco.

   Os dois controles existem no HTML da home; um so aparece por vez. A classe
   `em-secao` no <html> e escrita pelo script conforme o hash — sem ela, o que
   se ve e o Menu, que e o estado correto de "/" puro e o unico endereco
   alcancavel por quem esta sem JavaScript.

   Nas paginas internas so existe o atalho, entao nada disto se aplica.
   =========================================================================== */
.head-inicio { display: none; }                    /* padrao na home */
:root.em-secao .menu-abrir { display: none; }
:root.em-secao .head-inicio { display: inline-flex; }

/* Fora da home o atalho e o unico controle, e aparece sempre. */
:root:not(.home) .head-inicio { display: inline-flex; }

@media (min-width: 62rem) {
  /* Desktop amplo: a navegacao inteira esta a mostra e nenhum dos dois
     controles compactos aparece, com ou sem hash.

     Os seletores repetem a especificidade das regras acima de proposito. Sem
     isso, a regra :root:not(.home) .head-inicio, que vale 0,2,0, vencia esta
     media query e o atalho aparecia ao lado do item "Inicio" da propria
     navegacao — dois caminhos para o mesmo lugar, lado a lado. Visto na
     captura de 1200px. */
  .head-inicio,
  :root.em-secao .head-inicio,
  :root:not(.home) .head-inicio { display: none; }
}