/* ===========================================================================
   Rodape — o chip AirPix ao centro da placa.

   Continua a placa da secao de contato: a malha, os pontos de solda e o feixe
   de luz vivem em contato.css (bloco .cir-*) e sao os mesmos aqui. Este
   arquivo trata so do que e do rodape.

   Nenhum style="" no HTML: a CSP do site nao admite inline.
   =========================================================================== */

.pe {
  --pe-linha:  rgba(120, 180, 240, .18);
  --pe-luz:    #a9ddff;
  --pe-texto:  #cfe0f2;
  --pe-fraco:  #8fa8c2;

  position: relative;
  overflow: hidden;

  /* MESMO fundo da secao de contato, e sem borda no topo. Os dois tinham
     tons diferentes (#030f1c contra #05182b) mais uma linha de 1px entre
     eles, e a emenda lia como duas caixas coladas em vez de uma placa
     continua. A transicao agora e so a circuitaria atravessando. */
  background: #05182b;
  border-top: 0;
}

.pe-circuito {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* ===========================================================================
   O fio vermelho do topo

   Esta nas duas telas aprovadas e nao e enfeite: e o unico tracado da marca
   que atravessa o rodape inteiro, e o degrau central e o que amarra o chip a
   composicao em vez de deixa-lo flutuando.

   Fica no fluxo, antes do circuito, e nao em position:absolute — assim ele
   empurra o conteudo para baixo em vez de passar por cima dele, e nao ha
   sobreposicao para calibrar quando a altura do rodape muda.
   =========================================================================== */
.pe-fio {
  display: block;
  width: 100%;
  height: 26px;
  /* -26px e nao -14px: na referencia o chip encosta na ponte, e com a
     metade o vao media 64px medidos. Puxa o conteudo inteiro para junto do
     fio sem sobrepor nada — o z-index abaixo mantem o traco por cima. */
  margin-bottom: -26px;
  position: relative;
  z-index: 2;
}
.pe-fio-linha {
  fill: none;
  stroke: var(--red, #fe0d2d);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;   /* preserveAspectRatio="none" engorda o traco; isto impede */
  opacity: .9;
}

.pe-wrap { position: relative; z-index: 1; }

.pe-grade {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding-block: clamp(2rem, 5vw, 3.25rem);
  align-items: center;
}


/* --- Listas --------------------------------------------------------------- */
.pe-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

/* A navegacao ocupa DUAS colunas de tres linhas, como na referencia. Em uma
   coluna so ela ficava alta demais e desequilibrava a linha do rodape. */
.pe-coluna--nav .pe-lista {
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  column-gap: clamp(1.25rem, 3vw, 3rem);
  justify-content: start;
}

/* Navegacao: marcador redondo. A caixa com icone e a linguagem dos CONTATOS,
   e usar a mesma nas duas listas apagaria a diferenca entre "ir para uma
   pagina" e "falar com a gente". */
.pe-link {
  display: flex; align-items: center; gap: .7rem;
  min-height: 44px;
  padding: .3rem .25rem;
  color: var(--pe-texto);
  text-decoration: none;
  font-size: clamp(.92rem, 1.15vw, 1rem);
  line-height: 1.35;
  border-radius: 4px;
  transition: color .25s ease;
}
.pe-ponto {
  flex: none;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--pe-luz);
  opacity: .75;
  transition: box-shadow .25s ease, opacity .25s ease;
}
.pe-link:hover, .pe-link:focus-visible { color: #fff; }
.pe-link:hover .pe-ponto, .pe-link:focus-visible .pe-ponto {
  opacity: 1;
  box-shadow: 0 0 8px var(--pe-luz);
}
.pe-link:focus-visible { outline: 2px solid var(--pe-luz); outline-offset: 3px; }

/* Contatos: icone em caixa. */
.pe-contato {
  display: flex; align-items: center; gap: .75rem;
  min-height: 44px;
  padding: .3rem .25rem;
  color: var(--pe-texto);
  text-decoration: none;
  font-size: clamp(.92rem, 1.15vw, 1rem);
  line-height: 1.35;
  border-radius: 4px;
  transition: color .25s ease;
}
.pe-marca {
  flex: none;
  display: grid; place-items: center;
  width: 2.75rem; aspect-ratio: 1;
  border: 1px solid rgba(120, 180, 240, .3);
  border-radius: 50%;
  color: var(--pe-luz);
  transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.pe-icone {
  width: 52%; height: 52%;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.pe-contato:hover, .pe-contato:focus-visible { color: #fff; }
.pe-contato:hover .pe-marca, .pe-contato:focus-visible .pe-marca {
  color: #fff;
  border-color: rgba(169, 221, 255, .7);
  box-shadow: 0 0 12px rgba(90, 170, 250, .4);
}
.pe-contato:focus-visible { outline: 2px solid var(--pe-luz); outline-offset: 3px; }

/* Redes: so o icone. O nome vive no aria-label. */
/* Uma rede por linha, com o nome ao lado do icone. Lado a lado elas se liam
   como dois botoes soltos; empilhadas, seguem o mesmo ritmo da coluna de
   navegacao a esquerda e do resto do rodape. */
.pe-lista--redes {
  grid-auto-flow: row;
  justify-content: start;
  gap: .6rem;
  margin-top: .85rem;
}
.pe-rede {
  display: grid; place-items: center;
  width: 3.1rem; height: 3.1rem;
  border: 1px solid rgba(120, 180, 240, .3);
  border-radius: 8px;
  color: var(--pe-luz);
  transition: border-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.pe-rede .pe-icone { width: 48%; height: 48%; }
.pe-rede:hover, .pe-rede:focus-visible {
  color: #fff;
  border-color: rgba(169, 221, 255, .7);
  box-shadow: 0 0 12px rgba(90, 170, 250, .4);
}
.pe-rede:focus-visible { outline: 2px solid var(--pe-luz); outline-offset: 3px; }

/* --- O chip --------------------------------------------------------------- */
/* SVG quadrado dimensionado pelo CSS, com o rotulo por cima. Dentro do SVG de
   fundo, que e esticado, ele acompanharia a ALTURA do rodape em vez da coluna
   e deformaria. */
.pe-chip {
  position: relative;
  /* Maior que antes: na referencia ele e a peca dominante do rodape, e o
     texto dentro se le a distancia. */
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 1;
  display: grid; place-items: center;
  justify-self: center;
}
.pe-chip-arte { position: absolute; inset: 0; width: 100%; height: 100%; }
.pe-chip-rotulo {
  position: relative;
  display: grid; justify-items: center;
  text-align: center;
  line-height: 1.15;
}
.pe-chip-l1 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: #eaf6ff;
}
.pe-chip-l2 {
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  color: #c2e0f8;
}

/* O chip e a unica peca que pode brilhar: e o nucleo da circuitaria, e a
   referencia mostra a borda dele acesa. Fora daqui o brilho esta cortado. */
.pe-chip-fundo {
  stroke: rgba(130, 205, 255, .8);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(90, 175, 255, .5));
}
.pe-chip-borda {
  fill: none;
  stroke: rgba(160, 220, 255, .5);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pe-pino { fill: rgba(150, 205, 255, .55); }

@media (prefers-reduced-motion: no-preference) {
  .pe-chip-fundo { animation: pe-respirar 12s ease-in-out infinite; }
}
/* Variacao muito leve, e lenta: o chip respira, nao pisca. */
@keyframes pe-respirar {
  0%, 100% { stroke: rgba(130, 205, 255, .62) }
  50%      { stroke: rgba(165, 225, 255, .92) }
}

/* --- Legal ---------------------------------------------------------------- */
.pe-legal {
  position: relative;
  border-top: 1px solid var(--pe-linha);
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  display: grid; gap: .5rem;
  /* .76rem = 12,16px, ainda acima do piso de 12px do site. Os tres textos
     somam 1098px em .8rem e a faixa tem 1136px: com os dois vaos de 2rem
     nao cabiam numa linha so, e o do meio quebrava. */
  font-size: .76rem;
  line-height: 1.6;
  color: var(--pe-fraco);
  text-align: center;
}
/* Duas classes: `.foot p` do site.css e (0,1,1) e vence tanto a heranca
   quanto uma classe sozinha. Ja aconteceu com a logo e com a frase; aqui a
   fonte do legal ficava em 13,44px em vez dos 12,16 declarados. */
.pe .pe-legal p {
  margin: 0;
  font-size: .76rem;
  line-height: 1.6;
  /* `.foot p` do site.css tambem impoe max-width: 44ch, que em 12,16px da
     exatamente os 321px que travavam a caixa e faziam o texto vazar por cima
     do vizinho. Herdar o que se quer e desligar o que nao se quer: as duas
     coisas precisam ser ditas. */
  max-width: none;
}
.pe-legal a { color: var(--pe-texto); text-decoration: underline; text-underline-offset: 2px; }
.pe-legal a:hover, .pe-legal a:focus-visible { color: #fff; }
.pe-sep { opacity: .5; padding-inline: .35rem; }

/* ===========================================================================
   TABLET — navegacao e contatos lado a lado, chip entre eles
   =========================================================================== */
@media (min-width: 40rem) {
  .pe-grade {
    /* clamp e nao `auto` na coluna do meio: com `auto` ela se dimensionava
       pelo conteudo minimo e o chip caia para 61px entre 640 e 1023px — o
       desenho ficava ilegivel justo na faixa do tablet. Medido antes de
       mexer: o defeito ja existia, nao veio da compactacao do celular. */
    grid-template-columns: minmax(0, 1fr) clamp(7.5rem, 14vw, 11rem) minmax(0, 1fr);
    align-items: center;
  }
  .pe-coluna--nav     { grid-column: 1; }
  .pe-chip            { grid-column: 2; }
  .pe-coluna--contato { grid-column: 3; justify-self: end; }

  /* nowrap porque `auto` comprime a coluna quando as tres nao cabem, e o
     texto quebra em vez de a coluna crescer. Medido: os tres somam 1043px em
     .76rem e a faixa tem 1136px, entao cabem com os dois vaos de 1.5rem. */
  /* flex com space-between em vez de grid: com `auto 1fr auto` as tres partes
     encostam umas nas outras, porque a do meio cresce ate o conteudo e nao
     sobra folga para distribuir. O nowrap e o que impede a quebra — medido:
     os tres somam 1043px em .76rem e a faixa tem 1136px. */
  .pe-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1.5rem;
    text-align: left;
  }
  /* flex: none impede o item de encolher abaixo do proprio texto. Sem
     isso o flex reparte a largura por igual, o nowrap nao deixa quebrar, e o
     texto vaza por cima do vizinho. */
  .pe .pe-legal p { white-space: nowrap; flex: none; }
}

/* ===========================================================================
   DESKTOP — navegacao, chip e contatos numa linha so
   =========================================================================== */
@media (min-width: 64rem) {
  .pe-grade {
    /* TRES blocos, nao quatro: as referencias nao trazem logo nem frase no
       rodape — a marca aparece no cabecalho da pagina. Com elas aqui, a
       navegacao em duas colunas nao cabia e o chip invadia os contatos. */
    grid-template-columns: minmax(0, 1fr) clamp(8.5rem, 12vw, 11rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  .pe-coluna--nav     { grid-column: 1; grid-row: 1; }
  .pe-chip            { grid-column: 2; grid-row: 1; }
  .pe-coluna--contato { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ===========================================================================
   PREFERS-REDUCED-MOTION
   O desenho continua inteiro; so o movimento para.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pe-chip-fundo { animation: none; }
}

/* ===========================================================================
   Celular: o rodape mais compacto

   Media 823px em 390px de largura — uma tela inteira de rodape, quase a mesma
   altura de uma secao de conteudo. Nada sai: navegacao, chip, contatos, redes
   e faixa legal continuam todos ali. O que muda e a densidade.

   O chip encolhe mas nao some: ele e a assinatura visual do rodape nas telas
   aprovadas, e um rodape sem ele deixa de ser aquele rodape.
   =========================================================================== */
@media (max-width: 39.99rem) {
  /* 80px so de padding vinham do .foot no site.css e nao apareciam nesta
     folha — foi o maior item isolado da conta. */
  .foot.pe { padding-block: 1.25rem; }

  .pe-grade {
    gap: .9rem;
    padding-block: 1.15rem;
    /* Chip e contatos lado a lado: empilhados somavam 270px dos 505 da grade.
       A navegacao continua em cima, ocupando a largura toda, porque ela e a
       unica parte que a pessoa vai querer ler item por item. */
    /* Largura explicita para a coluna do chip: com `auto` ela colapsava para
       61px, porque o chip usa width:100% e a coluna se dimensionava pelo
       conteudo minimo em vez do max-width. */
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-areas: "nav nav" "chip contatos";
    align-items: center;
  }
  .pe-coluna--nav     { grid-area: nav; }
  .pe-chip            { grid-area: chip; }
  .pe-coluna--contato { grid-area: contatos; justify-self: end; }

  /* A navegacao ja vem em duas colunas; o que sobrava era o espaco entre elas. */
  .pe-lista { gap: .1rem 1rem; }
  .pe-link  { min-height: 42px; padding-block: .3rem; }

  /* 176px de chip em 390px de largura e um quarto da tela. 118px mantem a
     leitura da marca e devolve o resto para o conteudo. */
  /* max-width e nao transform: scale(). O scale nao muda a caixa que o grid
     reserva, e a margem negativa que compensava isso puxou o chip para fora
     da tela — o quadrado sumiu e sobrou o rotulo cortado na borda esquerda.
     Reduzir a largura real encolhe caixa e desenho juntos. */
  .pe-chip { max-width: 7.5rem; justify-self: start; }

  .pe-contato { min-height: 42px; gap: .6rem; }
  .pe-marca   { width: 2.1rem; }
  .pe-lista--redes { gap: .6rem; margin-top: .35rem; }
  .pe-rede { width: 2.3rem; }

  .pe-legal { padding-block: 1rem; gap: .3rem; }
  .pe .pe-legal p { font-size: .72rem; line-height: 1.5; }

  /* O fio vermelho: a ponte fica desproporcional numa faixa estreita. */
  .pe-fio { height: 18px; margin-bottom: -20px; }
}