/* =====================================================================
   FOOTER — logos centralizados, divisor e texto legal
   ---------------------------------------------------------------------
   Proporções extraídas do print (base 1338px) → tela de design 1440px.
   ===================================================================== */

.footer {
  background: var(--c-green-forest);
  padding-block: 3.5rem 4.75rem;
  color: var(--c-white);
}

/* ---------------------------------------------------------------- logos */
.footer__brands {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3.5rem;              /* 56px @1440 */
}

.footer__brand img {
  height: 2.5rem;           /* 40px @1440 */
  width: auto;
}

.footer__partner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__partner-label {
  font-size: 0.6875rem;     /* 11px @1440 */
  font-weight: 400;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.25rem;
}

.footer__partner-logo {
  height: 2.75rem;          /* 44px @1440 */
  width: auto;
}

/* -------------------------------------------------------------- divisor */
.footer__rule {
  height: 1px;
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  margin-block: 2rem;
}

/* ----------------------------------------------------------- texto legal */
/* As quebras de linha vêm de <br> no HTML, para reproduzir o layout.
   O corpo é pequeno o bastante para as três linhas caberem na largura do
   container com folga — se a fonte cair para o fallback, o texto apenas
   quebra em uma linha extra, sem estourar a caixa. */
.footer__legal {
  font-size: 0.5rem;        /* 8px @1440 */
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}

.footer__legal-text--mobile { display: none; }

/* =====================================================================
   MOBILE — tudo empilhado, com o divisor entre as duas marcas
   (frame de 430px)
   ---------------------------------------------------------------------
   No desktop o divisor separa os logos do texto legal. No mobile ele
   entra ENTRE o KAASAS e o bloco da NewView. `display: contents` dissolve
   o agrupamento dos logos para que o <hr> possa ser reordenado no meio.
   ===================================================================== */
@media (max-width: 768px) {
  .footer {
    --container-pad: 1.625rem;   /* 26px @430 */

    padding-block: 3.25rem 3.5rem;
  }

  .footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__brands { display: contents; }

  .footer__brand { order: 0; }
  .footer__rule { order: 1; }
  .footer__partner { order: 2; }
  .footer__legal { order: 3; }

  .footer__brand img {
    height: 3rem;                /* 48px @430 */
  }

  .footer__rule {
    width: 100%;
    margin-block: 2.5rem 3rem;
  }

  .footer__partner-label {
    font-size: 0.875rem;         /* 14px @430 */
    margin-bottom: 1.25rem;
  }

  .footer__partner-logo {
    height: 3.5rem;              /* 56px @430 */
  }

  .footer__legal-text--desktop { display: none; }
  .footer__legal-text--mobile { display: inline; }

  /* Ganha corpo e um pouco mais de largura: as linhas ficam mais cheias,
     o que tira a impressão de coluna estreita no meio da tela. Segue
     centralizado — o alargamento é simétrico. */
  .footer__legal {
    margin-top: 2.5rem;
    margin-inline: calc(-1 * (var(--container-pad) - 1.25rem));
    font-size: 0.8125rem;        /* 13px @430 */
    line-height: 1.7;
  }
}