/* ═══════════════════════════════════════════════════
   CTA FINAL + FOOTER
   Figma 47:2091 · bg #1b1b1b
   Desktop-first · base 1920px
   ═══════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────── */
/*  WRAPPER DA SEÇÃO                                   */
/* ─────────────────────────────────────────────────── */

#cta-footer {
  /* ── Camada revelada do efeito (Motto-style) ──
     Fica em fluxo normal (rola normalmente → o footer, mais alto que a
     viewport, pode ser lido por inteiro), porém puxado para cima
     (margin-top negativo = 1 viewport) de modo a ficar SOB a seção
     anterior (#mapa, z:2), que o cobre. z-index BAIXO (atrás do #mapa).
     O GSAP ergue o #mapa exatamente esse overlap → o footer escuro é
     descoberto por baixo, de forma controlada pelo scroll.
     overflow:hidden mantém o grafismo SVG SEMPRE contido — nunca vaza,
     e o #mapa (opaco, à frente) cobre 100% do footer até o reveal. */
  position: relative;
  z-index: 1;
  margin-top: -60vh;
  background-color: var(--c-dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: clamp(80px, 7.8125vw, 150px) var(--gutter) 56px;
}

/* Grafismo de fundo — absolute, enorme, centrado */
.ctaf__bg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Linha separadora horizontal — usada 3×  */
.ctaf__rule {
  height: 1px;
  width: 100%;
  background: rgba(244, 245, 247, 0.12);
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────── */
/*  1 · HEADER — badge + headline                      */
/* ─────────────────────────────────────────────────── */

.ctaf__header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Badge */
.ctaf__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 6px;
  background: rgba(85, 85, 85, 0.10);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  width: fit-content;
}

.ctaf__badge-dot {
  display: block;
  width:  8.628px;
  height: 8.628px;
  background: var(--c-red);
  flex-shrink: 0;
}

.ctaf__badge-text {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-light);
  white-space: nowrap;
}

/* Headline 88px · 2 linhas */
.ctaf__title {
  font-family: var(--f-sans);
  font-size: clamp(40px, 4.58vw, 88px);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.05em;
  color: var(--c-light);
  margin: 0;
}

.ctaf__title-red {
  display: block;
  color: var(--c-red);
}


/* ─────────────────────────────────────────────────── */
/*  2 · CONTACT — rule · info+botões · rule            */
/* ─────────────────────────────────────────────────── */

.ctaf__contact {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

/* Row: info de contacto (esq) + botões (dir) */
.ctaf__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 96px);
}

/* Grupo de 3 infos (WhatsApp · E-mail · Endereço) */
.ctaf__contact-info {
  display: flex;
  align-items: center;
  gap: 88px;
}

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

.ctaf__contact-label {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: rgba(244, 245, 247, 0.50);
}

.ctaf__contact-value {
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--c-light);
  white-space: nowrap;
}

/* Grupo de botões */
.ctaf__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Botão primário — pílula vermelha + quadrado escuro */
.ctaf__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 8px 8px 8px 36px;
  border-radius: 12px;
  background: var(--c-red);
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease);
}

.ctaf__btn-primary:hover { background: #c42a2d; }

.ctaf__btn-primary-text {
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.05em;
  color: var(--c-light);
  white-space: nowrap;
}

.ctaf__btn-primary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  50.617px;
  height: 50.617px;
  border-radius: 8px;
  background: var(--c-dark);
  flex-shrink: 0;
}

.ctaf__btn-primary-icon img {
  width:  18px;
  height: auto;
  display: block;
  transition: transform var(--dur-base) var(--ease);
}

.ctaf__btn-primary:hover .ctaf__btn-primary-icon img {
  transform: translate(3px, -3px);
}

/* Botão outline — borda branca · mesma altura do primário */
.ctaf__btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 36px;
  border-radius: 12px;
  border: 1px solid var(--c-light);
  background: rgba(244, 245, 247, 0.01);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease);
}

.ctaf__btn-outline:hover {
  background: rgba(244, 245, 247, 0.06);
}

.ctaf__btn-outline-text {
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.05em;
  color: var(--c-light);
}


/* ─────────────────────────────────────────────────── */
/*  3 · INFO — empresa (esq) · nav (dir)               */
/* ─────────────────────────────────────────────────── */

.ctaf__info {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Bloco empresa: logo + desc + social */
.ctaf__company {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.ctaf__logo { display: block; }

.ctaf__logo img {
  width:  94.662px;
  height: 39.25px;
  display: block;
}

.ctaf__company-desc {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--c-light);
  width: 292px;
  margin: 0;
}

/* Social icons: 45×45px · radius 6 · bg 5% */
.ctaf__social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ctaf__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  45px;
  height: 45px;
  border-radius: 6px;
  background: rgba(244, 245, 247, 0.05);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease);
}

.ctaf__social-link:hover {
  background: rgba(244, 245, 247, 0.12);
}

.ctaf__social-link img {
  display: block;
  flex-shrink: 0;
}

.ctaf__social-link--instagram img { width: 18.549px; height: 18.549px; }
.ctaf__social-link--linkedin  img { width: 22.259px; height: 22.259px; }
.ctaf__social-link--whatsapp  img { width: 18.762px; height: 18.762px; }

/* 2 colunas de navegação */
.ctaf__nav-cols {
  display: flex;
  align-items: flex-start;
  gap: 150px;
}

.ctaf__nav-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.ctaf__nav-col-label {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: rgba(244, 245, 247, 0.50);
  white-space: nowrap;
}

.ctaf__nav-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ctaf__nav-link {
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--c-light);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease);
}

.ctaf__nav-link:hover { opacity: 0.55; }


/* ─────────────────────────────────────────────────── */
/*  4 · FOOTER BAR — rule · copyright · links legais   */
/* ─────────────────────────────────────────────────── */

.ctaf__footer-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.ctaf__footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.ctaf__copyright {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #555555;
  width: 414px;
  margin: 0;
}

.ctaf__legal-links {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-shrink: 0;
}

.ctaf__legal-link {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #555555;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease);
}

.ctaf__legal-link:hover { color: var(--c-light); }


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  .ctaf__contact-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
  }
  .ctaf__contact-info {
    flex-wrap: wrap;
    gap: 40px;
  }
  .ctaf__nav-cols {
    gap: 64px;
  }
}

@media (max-width: 1024px) {
  .ctaf__info {
    flex-direction: column;
    gap: 48px;
  }
  .ctaf__company-desc {
    width: auto;
    max-width: 400px;
  }
}

@media (max-width: 768px) {
  #cta-footer {
    gap: 48px;
  }
  .ctaf__contact-info {
    flex-direction: column;
    gap: 32px;
  }
  .ctaf__actions {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .ctaf__btn-outline {
    align-self: auto;
    padding: 14px 24px;
  }
  .ctaf__nav-cols {
    gap: 32px;
    flex-wrap: wrap;
  }
  .ctaf__footer-bottom {
    flex-direction: column;
    gap: 16px;
  }
  .ctaf__copyright {
    width: auto;
  }
  .ctaf__legal-links {
    gap: 32px;
  }
}