/* Cartão CTA. Vale para todas as páginas que mostram o cartão, inclusive a Home. */

.cta {
  /* Cor atrás da metade de cima do cartão; a de baixo é sempre o azul do rodapé.
     Branco é o padrão; as seções com outro fundo avisam logo abaixo. */
  --cta-fundo: var(--branco);
  position: relative;
  isolation: isolate;
}

/* A metade de cima toma a cor da seção que vem logo antes do cartão. Se uma seção
   estiver escondida no painel, vale a que sobrou. Seção nova com fundo próprio: uma linha aqui. */
.texto-colunas--azul + .cta {
  --cta-fundo: var(--azul-principal);
}

.pilares + .cta {
  --cta-fundo: var(--cinza-default);
}

.certificacoes + .cta {
  --cta-fundo: var(--verde);
}

/* Home: imagem ou vídeo ocupam a metade de cima, o cartão fica meio a meio entre ela e o azul. */
.cta--midia {
  --cta-fundo: transparent;
  display: grid;
  grid-template-rows: 64.5rem auto;
  background-color: var(--azul-principal);
}

.cta__fundo {
  position: relative;
  isolation: isolate;
  grid-area: 1 / 1 / 3 / 2;
  background: linear-gradient(161deg, var(--azul-noite) 0%, var(--azul-medio) 39.286%, var(--cinza-esverdeado) 71.429%);
}

.cta__fundo .midia-fundo__pausar {
  top: 4rem;
  bottom: auto;
}

.cta__sobreposicao {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--azul-noite-21), var(--azul-noite-55));
}

/* Metade de cima na cor da página, metade de baixo azul:
   o cartão fica meio a meio qualquer que seja a altura dele. */
.cta__faixa {
  position: relative;
  z-index: 1;
  grid-area: 2 / 1;
  background: linear-gradient(to bottom, var(--cta-fundo) 50%, var(--azul-principal) 50%);
}

.cta__card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 40.7rem;
  padding: 7.2rem 8rem;
  border-radius: var(--raio-xl);
  background-color: var(--laranja);
  color: var(--branco);
  overflow: hidden;
}

.cta__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  max-width: 82rem;
}

.cta__texto .overline--linha::before {
  background-color: var(--branco);
}

/* O destaque do título (*asteriscos*) fica azul sobre o fundo laranja. */
.cta__card .laranja {
  color: var(--azul-principal);
}

.cta__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 3.2rem;
}

.cta__card .btn:focus-visible,
.cta__card .link-seta:focus-visible {
  outline-color: var(--branco);
}

.cta__card .btn--branco:hover,
.cta__card .btn--branco:focus-visible {
  --btn-fundo: var(--azul-principal);
  --btn-borda: var(--azul-principal);
  --btn-texto: var(--branco);
  --btn-circulo: var(--branco);
  --btn-seta: var(--azul-principal);
}

.cta__card .link-seta--claro:hover,
.cta__card .link-seta--claro:focus-visible {
  --link-texto: var(--azul-principal);
  --link-linha: var(--azul-principal);
  --link-seta: var(--azul-principal);
}

/* Ponto de origem de 0x0: os anéis e a foto se centralizam nele com translate(-50%, -50%). */
.cta__arte {
  position: absolute;
  top: 24rem;
  right: 25rem;
  z-index: -1;
  width: 0;
  height: 0;
}

.cta__anel,
.cta__moldura {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cta__anel {
  border: 0.1rem solid var(--branco-70);
}

.cta__anel--grande {
  width: 62rem;
  height: 62rem;
}

.cta__anel--medio {
  width: 44rem;
  height: 44rem;
}

.cta__anel--pequeno {
  width: 26rem;
  height: 26rem;
}

.cta__moldura {
  width: 30rem;
  height: 30rem;
  border: 1rem solid var(--branco);
  overflow: hidden;
}

.cta__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .cta--midia {
    grid-template-rows: 32rem auto;
  }

  .cta__card {
    flex-direction: column;
    gap: 3rem;
    min-height: 0;
    padding: 4rem 2.8rem;
    text-align: center;
  }

  .cta__texto {
    align-items: center;
    gap: 2.8rem;
  }

  .cta__acoes {
    justify-content: center;
  }

  .cta__arte {
    position: relative;
    top: auto;
    right: auto;
    z-index: 0;
    flex-shrink: 0;
    width: 100%;
    height: 30rem;
  }

  .cta__anel,
  .cta__moldura {
    top: 20rem;
    left: 50%;
  }

  .cta__anel--grande {
    display: none;
  }

  .cta__anel--medio {
    width: 36rem;
    height: 36rem;
  }

  .cta__anel--pequeno {
    width: 26rem;
    height: 26rem;
  }

  .cta__moldura {
    width: 19rem;
    height: 19rem;
    border-width: 0.8rem;
  }
}

@media (max-width: 600px) {
  .cta--midia {
    grid-template-rows: 20rem auto;
  }
}