/* =========================================================================
   Etéra Work — Section 11: rodapé institucional (Perplan Incorporação)
   Figma: node 6322:1188 (artboards 1366 e 360)
   ========================================================================= */

.rodape {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
  padding: 80px 16px 64px;
  background-color: var(--brand-color-primary);

  /* Hachura decorativa do handoff. No mobile o Figma amplia e desloca o
     mesmo arquivo; no notebook ele entra no tamanho natural, ancorado à
     esquerda. */
  background-image: url("../../svg/bg-element-footer.svg");
  background-repeat: no-repeat;
  background-position: -444.6px top;
  background-size: 994px 1024px;
  overflow: hidden;
}

.rodape__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* -------------------------------------------------------------------------
   Bloco de marca
   ------------------------------------------------------------------------- */

.rodape__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Selo "+25 anos de atuação"
   ------------------------------------------------------------------------- */

.rodape__seal-wrap {
  width: 100%;
}

.rodape__seal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 32px;
  color: var(--white);
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-md);
  text-transform: uppercase;
  white-space: nowrap;
}

.rodape__seal-number {
  font-size: var(--h2-font-size);
  letter-spacing: var(--letter-spacing-md);
}

/* 2.8px sobre 14px = 0.2em, valor próprio deste bloco. */
.rodape__seal-label {
  font-size: var(--font-size-sm);
  letter-spacing: 0.2em;
  text-align: center;
}

.rodape__seal {
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.rodape__seal.is-leaving {
  opacity: 0;
  transform: translateY(-24px);
}

.rodape__seal.is-entering {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}

/* -------------------------------------------------------------------------
   Texto institucional
   ------------------------------------------------------------------------- */

.rodape__about {
  width: 100%;
  color: var(--white);
}

.rodape__about p + p {
  margin-top: 1.6em;
}

/* -------------------------------------------------------------------------
   Régua e rodapé legal
   ------------------------------------------------------------------------- */

.rodape__rule {
  width: 100%;
  height: var(--border-width-default);
  background-color: var(--brand-color-primary-tint-1);
}

.rodape__legal {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}

.rodape__logo {
  width: 160px;
  height: 64px;
}

/* No artboard de 360 o texto legal cai para 10px, abaixo da escala dos
   tokens. Mantido como no design. */
.rodape__disclaimer {
  width: 100%;
  color: var(--brand-color-terciary-60);
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: 10px;
  line-height: var(--line-height-md);
  letter-spacing: 0.1em;
}

/* =========================================================================
   LG — Notebook (min-width: 1366px)
   ========================================================================= */

@media (min-width: 1366px) {
  .rodape {
    padding-inline: 0;
    background-position: left top;
    background-size: 1366px 452px;
  }

  .rodape__content {
    flex-direction: row;
    gap: 32px;
    align-items: center;
    padding-inline: 123px;
  }

  .rodape__brand {
    flex-shrink: 0;
    width: auto;
  }

  .rodape__seal-wrap {
    flex: 1 0 0;
    min-width: 0;
  }

  .rodape__about {
    flex-shrink: 0;
    width: 640px;
  }

  .rodape__legal {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
    width: 1120px;
  }

  .rodape__logo {
    grid-column: 1 / span 2;
    width: 100%;
    height: auto;
    aspect-ratio: 160 / 64;
  }

  .rodape__disclaimer {
    grid-column: 3 / span 10;
    align-self: start;
    padding-left: 32px;
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-default);
  }
}