/* Rodapé — Figma: "Rodapé" (desktop, 257:1317) e "Rodapé" (mobile, 253:346).
   O fundo azul ocupa a largura toda; o conteúdo usa o container de 1344px.
   Sem escala fluida: tamanhos do Figma; o espaço extra do container fica entre as colunas. */

.footer {
  padding-block: 56px 32px;
  background: var(--azul-marinho-90);
  color: var(--texto-sobre-escuro);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* abaixo de 1200px o Figma só tem o mobile de 375px: coluna de até 600px, à esquerda como as outras sections */
  width: min(100% - var(--gutter) * 2, 600px);
  margin-inline: var(--gutter) auto;
}

/* Foco visível sobre o fundo azul: o azul padrão sumiria */
.footer :focus-visible {
  outline-color: var(--neutra-10);
}

/* ---------- Topo ---------- */

.footer__top {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__logo {
  display: flex;
  align-items: center;
  width: fit-content;
}

/* Logo do rodapé: texto claro para o fundo escuro (igual em desktop e mobile). Proporção da marca
   nova (4001:988) preservada, mesma área visual que os 108×24 antigos ocupavam. */
.footer__logo-img {
  display: block;
  width: 101px;
  height: 25px;
}

.footer__tagline {
  color: var(--azul-marinho-30);
  font-size: 20px;
  line-height: 32px;
}

.footer__social {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__social-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.footer__social-list {
  display: flex;
  gap: 8px;
}

.social {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--azul-marinho-70);
  border-radius: 999px;
}

/* Preparado para quando os perfis existirem e o <span> virar <a> */
a.social {
  transition: border-color 160ms ease;
}

@media (hover: hover) {
  a.social:hover {
    border-color: var(--azul-marinho-40);
  }
}

.footer__side {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* ---------- Aviso de workshops (formulário) ---------- */

.footer__notice {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__notice-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.footer__notice-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__input {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--neutra-10);
  color: var(--texto-corpo);
  font-family: inherit;
  font-size: 18px; /* 16px ou mais evita o zoom automático do Safari no iPhone */
  font-variation-settings: inherit;
  line-height: 28px;
  appearance: none;
}

.footer__input::placeholder {
  color: var(--texto-apoio);
  opacity: 1;
}

.footer__input[aria-invalid="true"] {
  box-shadow: 0 0 0 2px var(--vermelho-20);
}

.footer__submit {
  flex: none;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--verde-60);
  color: var(--azul-marinho-90);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}

@media (hover: hover) {
  .footer__submit:hover {
    background: color-mix(in srgb, var(--verde-60) 82%, white);
  }
}

.footer__submit:active {
  background: color-mix(in srgb, var(--verde-60) 92%, black);
}

/* Erro sobre fundo escuro: rosa claro (vermelho-20) com ícone e texto, não só cor */
.footer__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--vermelho-20);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.footer__error::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: url("../img/icon-alerta-claro.svg") center / contain no-repeat;
}

.footer__status {
  color: var(--verde-40);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.footer__error[hidden],
.footer__status[hidden] {
  display: none;
}

.footer__microcopy {
  color: var(--azul-marinho-30);
  font-size: 16px;
  line-height: 24px;
}

.footer__microcopy-link {
  color: var(--texto-sobre-escuro);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

@media (hover: hover) {
  .footer__microcopy-link:hover {
    text-decoration-thickness: 2px;
  }
}

/* ---------- Colunas de links ---------- */

.footer__columns {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer__col-title {
  color: var(--azul-marinho-40);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.footer__link,
.footer__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--texto-sobre-escuro);
  font-size: 18px;
  line-height: 28px;
  white-space: nowrap;
}

.footer__link img,
.footer__item img {
  flex: none;
}

@media (hover: hover) {
  .footer__link:hover {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 4px;
  }
}

.footer__link:active {
  opacity: 0.8;
}

/* ---------- Marca d'água "Alado" (decorativa) ---------- */

.footer__mark {
  position: relative;
  height: 120px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.footer__mark-text {
  position: absolute;
  top: -8px;
  left: 8px;
  padding-right: 0.1em; /* o espaçamento negativo encolhe a caixa e cortaria a ponta do "o" no gradiente */
  background: linear-gradient(to bottom, rgb(108 134 183 / 0.5), rgb(108 134 183 / 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 140px;
  font-weight: 500;
  font-variation-settings: "opsz" 40; /* o Figma renderiza este texto grande com o tamanho óptico de exibição (mais estreito que o opsz 14 do resto do site) */
  line-height: 1;
  letter-spacing: -7px;
  white-space: nowrap;
}

/* ---------- Informações legais ---------- */

.footer__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--azul-marinho-80);
}

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 16px;
  line-height: 24px;
}

.footer__company {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__company-note,
.footer__office-address {
  color: var(--azul-marinho-30);
}

.footer__offices {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__office {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: normal;
}

/* ---------- Desktop (≥ 1200px) ---------- */

@media (min-width: 1200px) {
  .footer {
    padding-block: 80px 40px;
  }

  .footer__inner {
    gap: 48px;
    width: min(100% - var(--gutter) * 2, var(--container-max));
    margin-inline: auto;
  }

  .footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__brand {
    flex: none;
    width: 340px;
  }

  .footer__side {
    flex: none;
    width: 716px;
  }

  .footer__notice-row {
    flex-direction: row;
  }

  .footer__input {
    flex: 1 0 0;
    width: auto;
  }

  .footer__microcopy-line {
    display: block;
  }

  .footer__columns {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__mark {
    height: 300px;
  }

  .footer__mark-text {
    top: -40px;
    left: calc((100% - 1104px) / 2 + 121px); /* 121px no frame de 1200px; o espaço extra do container fica dos dois lados */
    font-size: 400px;
    letter-spacing: -20px;
  }

  .footer__legal {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }

  .footer__company {
    flex: none;
    width: 520px;
  }

  .footer__offices {
    flex-direction: row;
    gap: 40px;
  }

  /* Endereço completo pode ser mais longo que o placeholder: cada escritório divide o espaço
     que sobra ao lado de .footer__company e a linha quebra em vez de estourar o rodapé */
  .footer__office {
    flex: 1 1 0;
    min-width: 0;
  }
}