/* ==========================================================================
   Rodapé institucional — componente compartilhado
   --------------------------------------------------------------------------
   Um único rodapé para todas as páginas do site (PT e EN). O markup vem de
   dev/tools-dev/gerar-rodape.py (fonte única de verdade) e o estilo deste
   arquivo, linkado por todas as páginas: assim não existe versão divergente
   de rodapé entre as páginas.

   Fundo: a arte aprovada "Ondas Digitais em Azul Profundo" (1920x683) cobre
   100% da largura da página, ancorada na base para que as ondas fiquem na
   parte inferior (exigência do briefing). A cor de fundo cobre o restante
   da área, então a arte nunca aparece como um cartão com margens laterais.

   GEOMETRIA DA ARTE: 1920x683 = 35.573vw de altura quando ocupa 100% da
   largura. Dela interessam duas faixas:
     - o brilho azul do topo (0..90 da arte = 4.69vw), que é a "faixa de luz"
       que separa o conteúdo da página do rodapé no desenho de referência;
     - a faixa de ondas (540..683 da arte = 7.4489vw), que fica na base.

   DESKTOP (>=1080px): a arte inteira é o fundo do rodapé (background-size:
   cover, ancorada na base). O rodapé reserva a altura mínima da arte
   (min-height: 35.573vw) para que o topo do `cover` não corte a faixa de luz
   — sem isso o rodapé ficava mais baixo que a arte, o cover cortava ~145px do
   topo e as ondas subiam para dentro do conteúdo, deixando a faixa legal
   ilegível sobre a malha. O padding inferior reserva a faixa de ondas para
   que o texto legal fique acima da crista.

   TABLET/CELULAR (<1080px): o conteúdo do rodapé é bem mais alto que a
   arte, então a arte inteira não caberia: a faixa de luz do topo cairia
   solta no meio do rodapé. Nesse regime entra só a FAIXA DE ONDAS, inteira e
   ancorada na base (pseudo-elemento), e o resto do rodapé fica no navy da
   própria arte.
   ========================================================================== */

.rodape {
  position: relative;
  isolation: isolate;
  color: #fff;
  background-color: #021f57;
  background-image: url("/assets/img/rodape-ondas.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  /* `cover` mantem a proporcao da arte (nada e distorcido) e a preenche
     inteira: faixa de luz no topo, ondas na base. */
  background-size: cover;
  /* altura natural da arte (683/1920) — impede o corte do topo */
  min-height: 35.573vw;
  /* o padding inferior reserva a faixa de ondas (7.4489vw) mais uma folga,
     para o texto legal ficar acima da crista das ondas */
  padding-block: clamp(3rem, 8.5vw, 10rem) max(9vw, 10rem);
}

/* --- Grade de quatro colunas ---------------------------------------------- */
/* IDENTIDADE, NAVEGACAO, PRODUTO e EMPRESA lado a lado, na mesma linha.
   A area de CONTATO E REDES SOCIAIS fica abaixo, em faixa propria. */
.rodape__grade {
  display: grid;
  gap: clamp(2rem, 3.5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 700px) {
  /* Tablet: duas colunas (marca | navegacao / produto | empresa). */
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  /* Desktop: as quatro areas na mesma linha. As pistas sao proporcionais
     (nenhuma largura fixa), para o grid nunca transbordar. */
  .rodape__grade {
    grid-template-columns:
      minmax(0, 1.15fr)   /* identidade */
      minmax(0, .85fr)    /* navegação */
      minmax(0, 1.1fr)    /* produto    */
      minmax(0, 1fr);     /* empresa    */
  }
}

/* --- Coluna 1: marca, nome, slogan e redes ------------------------------ */
.rodape__lockup {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.15rem;
}
.rodape__lockup img {
  width: 46px;
  height: 49px;
  flex: 0 0 auto;
}
.rodape__nome {
  display: block;
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.2;
}
.rodape__sub {
  display: block;
  margin-top: .28rem;
  color: #a9c2e6;
  font-size: clamp(.72rem, .8vw, .82rem);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  line-height: 1.2;
}
.rodape__slogan {
  margin: 0;
  color: #cfdff7;
  font-size: clamp(.95rem, 1.05vw, 1.1rem);
  line-height: 1.55;
  max-width: calc(30ch * var(--fator-ch, .855));
}
.rodape__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
/* A lista ja tem `gap`: a margem global do `li` somaria uma segunda vez. */
.rodape__social li { margin: 0; }
.rodape__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  transition: background-color .16s ease, transform .16s ease;
}
.rodape__social a:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-1px);
}
.rodape__social svg { width: 22px; height: 22px; }

/* --- Colunas de links ---------------------------------------------------- */
.rodape__col { min-width: 0; }
/* `.rodape .rodape__titulo` (e nao so `.rodape__titulo`) para o componente
   nao depender do CSS da pagina: regras genericas de h2 das paginas tem
   especificidade maior e sobrepoem este estilo. */
.rodape .rodape__titulo {
  margin: 0 0 1.1rem;
  color: #8fc4ff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.rodape__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
/* A lista ja tem `gap`: a margem global do `li` somaria uma segunda vez. */
.rodape__lista li { margin: 0; }
.rodape__lista a {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rodape__lista a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* --- Coluna do produto --------------------------------------------------- */
.rodape__produto {
  margin: 0 0 .45rem;
  color: #fff;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.rodape__desc {
  margin: 0 0 1rem;
  color: #a9c2e6;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  max-width: calc(34ch * var(--fator-ch, .855));
}
.rodape__acao {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #8fc4ff;
  font-weight: 600;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  text-decoration: none;
}
.rodape__acao:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.rodape__acao svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* --- Area de contato e redes sociais -------------------------------------- */
/* Faixa unica e compacta ABAIXO das quatro colunas: o e-mail (com o icone de
   envelope) e os icones das redes sociais. Cada icone aparece uma unica vez
   no rodape — a antiga coluna CONTATO foi dissolvida aqui. */
.rodape__canal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 3.2vw, 3.25rem);
  padding-top: clamp(1.25rem, 2vw, 1.9rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.rodape__canal .rodape__titulo { margin: 0; }
.rodape__canal-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem clamp(1rem, 2vw, 1.75rem);
}
.rodape__email {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(.9rem, .95vw, 1rem);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rodape__email:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.rodape__email-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.rodape__email-icone svg { width: 20px; height: 20px; }

/* --- Faixa inferior ------------------------------------------------------ */
/* Fica acima da crista das ondas (que ocupa os ~143px finais da arte), para
   o texto de copyright e os links legais ficarem sobre o navy limpo. */
.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1.25rem, 2.2vw, 2.5rem);
  margin-top: clamp(1.75rem, 2.6vw, 3rem);
  padding-top: clamp(1rem, 1.4vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.rodape__legal p {
  margin: 0;
  color: #a9c2e6;
  font-size: .875rem;
}
.rodape__legal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(.75rem, 1.4vw, 1.25rem);
}
.rodape__legal li { display: flex; align-items: center; gap: clamp(.75rem, 1.4vw, 1.25rem); margin: 0; }
.rodape__legal li + li::before {
  content: '';
  width: 1px;
  height: 1em;
  background: rgba(255, 255, 255, .28);
}
.rodape__legal a {
  color: #cfdff7;
  font-size: .875rem;
  text-decoration: none;
}
.rodape__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

/* --- Responsivo ---------------------------------------------------------- */
@media (max-width: 1079px) {
  /* Tablet e celular: o conteúdo do rodapé é mais alto que a arte. Em vez de
     deixar a faixa de luz da arte solta no meio do rodapé, entra só a faixa
     de ondas — inteira, sem distorção, ancorada na base. O resto fica no
     navy da própria arte. */
  .rodape {
    background-image: none;
    padding-bottom: calc(8vw + 1rem);
  }
  .rodape::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 8vw;
    background: url("/assets/img/rodape-ondas.jpg") center bottom / 100% auto no-repeat;
    pointer-events: none;
    z-index: -1;
  }
}

@media (max-width: 980px) {
  /* Tablet: as quatro areas em duas colunas (marca | navegação /
     produto | empresa). */
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* Celular: tudo em uma coluna, na ordem de leitura. */
  .rodape {
    padding-block: clamp(2.25rem, 9vw, 3rem) calc(8vw + 1rem);
  }
  .rodape__grade { grid-template-columns: 1fr; gap: 2rem; }
  .rodape__canal { align-items: flex-start; }
  .rodape__canal-linha { width: 100%; }
  .rodape__legal { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .rodape__social a { transition: none; }
  .rodape__social a:hover { transform: none; }
}