/* Correções pontuais em cima do build do Tailwind (style.css), que é minificado
   e regerado pelo Vite. Uma regra por problema, com o motivo. */

/* .grid-site mantém 12 colunas e column-gap de 2rem em qualquer largura. Só as
   11 lacunas somam 352px, e abaixo de ~392px de viewport isso é mais largo que
   o content box do .container — os filhos col-span-12 estouravam o container e
   comiam a margem direita (em 360px chegavam a 12px além dela).
   Abaixo de lg todo filho é col-span-12, ou seja, largura total: o column-gap
   nunca aparece. Zerar resolve sem mexer no layout. As 12 trilhas continuam
   existindo para o span 12 não criar colunas implícitas. */
@media (max-width: 63.9375rem) {
  .grid-site {
    column-gap: 0;
  }
}

/* A primeira dobra ocupa a tela inteira. A altura do #hero vinha só do padding
   (pt-hero-top/pb-hero-bot), então em telas altas sobrava fundo abaixo dele e em
   telas baixas ele passava da viewport. min-height em svh usa a altura visível
   real no mobile (sem contar a barra do navegador que some ao rolar), com vh de
   fallback para navegadores antigos.
   O padding do bloco de conteúdo era o que reservava espaço para o header
   absoluto; com o conteúdo centralizado ele desequilibra a caixa, então ele sai
   do bloco e vira padding do próprio #hero — o topo continua garantindo a folga
   do header (7.125rem no desktop, ~5.25rem no mobile). */
#hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(5.25rem, 4.6rem + 2.8vw, 7.125rem);
  padding-bottom: clamp(3rem, 2.4rem + 2.6vw, 4.75rem);
}

#hero .pt-hero-top {
  padding-top: 0;
}

#hero .pb-hero-bot {
  padding-bottom: 0;
}

/* Ponto final colado no texto em títulos na Flawsome. O vão de tinta entre a
   última letra e o ponto é de apenas 0,02em — metricamente está certo —, mas
   letras que terminam no alto (o braço do "r") ou em curva (o "o") deixam um
   bolsão vazio na altura da linha de base, e em corpo grande isso lê como um
   espaço antes do ponto. A fonte não traz kerning para esses pares e CSS não
   ajusta par a par, então o ponto ganha um span e é puxado na mão.
   -0.05em foi o limite: acima disso ele começa a encostar no braço do "r". */
.ponto-junto {
  margin-left: -0.05em;
}

/* Fundo da primeira dobra. O build do Tailwind traz .hero-band com um
   linear-gradient de seis paradas; esta regra vem depois e vence por ordem. */
.hero-band {
  /* Posiciona a figura do hero. Ela saiu de dentro do #hero e passou a ser filha
     daqui porque o .canvas trava a largura em 90rem e centraliza: ancorada lá,
     a imagem parava na borda do canvas e não na do monitor. A .hero-band ocupa
     a largura toda, então agora right: 0 é a borda da tela mesmo.
     O overflow segura o deslocamento do parallax na base. */
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 52% 85%, #274563 0%, #1d3b5b 30%, #102b4c 60%, #07172f 100%),
    linear-gradient(180deg, #07172f 0%, #173754 100%);
}

/* Imagem da primeira dobra. A bg-hero.png já traz a composição inteira — fundo,
   modelo e o traço do "ar" —, então ela cobre a dobra toda em vez de ser uma
   figura posicionada. Fica fora do .canvas, como filha da .hero-band, porque o
   canvas trava a largura em 90rem: ancorada lá dentro ela pararia antes da
   borda do monitor.
   O gradiente da .hero-band continua abaixo dela, como fundo enquanto a imagem
   carrega e nas sobras que o recorte do object-fit deixar.
   O data-parallax-bleed voltou: com a imagem sangrada, deslocar sem folga
   mostraria a borda do container. */
.hero-imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* O vídeo passou a ser um <video> local no lugar do iframe do YouTube; o build
   do Tailwind só dimensiona .video-frame iframe. */
.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marcas "ar" da seção de versatilidade. A largura vem daqui e não de uma
   utility w-[..] porque o style.css é um build do Tailwind já compilado: só
   existem nele as classes que estavam no código na hora da build. */
.marca-ar-versatilidade {
  --marca-ar-largura: 56%;
  width: var(--marca-ar-largura);
}

/* A cópia do rodapé do bloco fica à esquerda. O desenho tem 205px de vazio à
   esquerda dentro do viewBox de 916 (22,4% da largura) — do lado direito o
   traço encosta na borda do arquivo. Ancorada em left: 0 ela ficaria solta da
   lateral, então o deslocamento negativo desconta esse vazio e o "ar" toca a
   borda da tela como a de cima. */
.marca-ar-versatilidade-esq {
  right: auto;
  left: calc(-0.224 * var(--marca-ar-largura));
}

/* A cópia do topo sobe 8px para fora da seção, então a borda de cima corta
   levemente o desenho. Valor conferido no navegador. O -top-8 original (32px)
   comia parte demais e o zero deixava o traço encostado, o que ainda lia como
   folga — no viewBox do SVG o desenho começa na primeira linha, sem vazio no
   topo para compensar, diferente do que acontece do lado esquerdo. */
.marca-ar-versatilidade-topo {
  top: -8px;
}

/* Marca "ar" do rodapé. Saiu de dentro do .canvas e virou filha do <footer>:
   dentro do canvas, que trava a largura em 90rem e centraliza, o right: 0
   pararia antes da borda do monitor. Por isso o recorte também mudou de lugar —
   é o footer que segura a marca agora.
   A arte preenche o arquivo inteiro, sem vazio nas bordas, então o right: 0
   basta para ela encostar na lateral. */
footer {
  position: relative;
  overflow: hidden;
}

.marca-ar-rodape {
  position: absolute;
  top: -4.25rem;
  right: 0;
  width: 70%;
  max-width: none;
  opacity: 0.2;
}

/* Entre 40rem (onde o sm: liga as tres colunas) e 48rem o card de territorio
   fica estreito demais: o texto e absoluto dentro de uma caixa de proporcao
   fixa, entao ele nao empurra a altura — vaza para fora da foto e fica branco
   sobre branco. Em 640px sobravam 29px de texto do lado de fora.
   Volta para uma coluna nessa faixa, como ja acontece abaixo de 640px. */
@media (min-width: 40rem) and (max-width: 47.9375rem) {
  #ar > ul {
    grid-template-columns: 1fr;
  }
}

/* Marca "ar" ao fundo do bloco "Tres territorios de atuacao". Uso o ar.svg
   porque o export ja vem cortado do lado direito — e a mesma arte da
   marca-ar-azul.webp com o "r" aparado exatamente onde ele encosta na borda da
   tela. Por isso e ancorada em right: 0 e sem object-fit: o corte faz parte do
   desenho.
   Ela e maior que o respiro da secao de proposito: encosta pela base na lista
   de territorios e sobe entrando por tras do video. Quem esconde esse excesso e
   o z-index negativo, nao um recorte — a marca passa a ser pintada abaixo do
   conteudo em fluxo, entao some atras da capa do video e das fotos dos cards e
   continua visivel na faixa branca e na sobra a direita do video, que e mais
   estreito que o canvas. O fundo branco vem do body e e pintado no canvas da
   pagina, abaixo de tudo, entao o z-index negativo nao engole a marca.
   O wrapper do texto deixou de ser um .canvas porque aquela classe limita a
   largura em 90rem e centraliza: o right: 0 parava na borda do canvas e nao na
   da tela. O texto nao sentiu a troca porque quem o centraliza e o .container
   de dentro, bem mais estreito que o canvas.
   O respiro da secao e maior que o --spacing-section padrao para sobrar faixa
   branca onde a marca aparece; o mesmo valor alimenta o bottom dela, entao os
   dois nunca saem de sincronia. Só no desktop, onde a marca existe. */
#ar {
  --ar-respiro: var(--spacing-section);
  padding-top: var(--ar-respiro);
}

#ar > ul {
  margin-top: var(--ar-respiro);
}

@media (min-width: 64rem) {
  #ar {
    --ar-respiro: calc(var(--spacing-section) * 1.3);
  }
}

.marca-ar-fundo {
  position: absolute;
  right: 0;
  bottom: calc(-1 * var(--ar-respiro));
  z-index: -1;
  width: 36%;
  max-width: none;
}

/* Lightbox de resposta do formulario de contato.

   Uso o <dialog> nativo com showModal() em vez de montar um overlay na mao: ele
   ja entrega prender o foco dentro da caixa, fechar no Esc, o ::backdrop e
   devolver o foco para quem abriu — tudo isso de graca e sem JavaScript de
   acessibilidade para manter.

   O <dialog> vem com border, padding e max-width proprios do navegador, entao
   eles sao zerados aqui e a caixa de dentro cuida da aparencia. */
.aviso {
  max-width: min(28rem, calc(100vw - 2 * var(--container-gutter)));
  width: 100%;
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.aviso::backdrop {
  background: rgb(38 45 65 / 0.75);
}

.aviso-caixa {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--color-surface);
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  box-shadow: 0 1.5rem 3rem rgb(38 45 65 / 0.25);
}

.aviso-titulo {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  line-height: var(--text-display-md--line-height);
  letter-spacing: var(--text-display-md--letter-spacing);
  color: var(--color-brand);
}

.aviso-texto {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-ink);
}

/* O erro precisa se distinguir de longe do sucesso. A paleta da marca nao tem
   uma cor de alerta, entao entra um vermelho escurecido que convive com o azul
   sem gritar — e a faixa lateral reforca sem depender so da cor, para quem nao
   distingue matiz. */
.aviso[data-estado="erro"] .aviso-caixa {
  border-left: 4px solid #9b2c2c;
}

.aviso[data-estado="erro"] .aviso-titulo {
  color: #9b2c2c;
}