/* Bloco: frase em destaque — agora a própria hero da Home (fica logo após a
   nav) — pictograma em pontos + citação grande, sentados no topo de um
   círculo enorme que enche o bloco de baixo (o "piso") até quase o
   pictograma. A seção corta o resto do círculo com overflow:hidden. */

.frase-destaque {
  position: relative;
  padding: 96px 0 140px;
  text-align: center;
  overflow: hidden;
}

.frase-destaque-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

/* Círculo cheio, enorme: o topo dele fica bem perto do pictograma, e o
   resto desce enchendo o bloco até o piso (onde a seção corta com
   overflow:hidden — por isso o cálculo evita passar do raio, senão a
   silhueta volta a fechar antes do corte). Entra "encolhendo": nasce maior
   e assenta no tamanho final quando a seção fica visível (ver reveal.js). */
.frase-destaque-arco {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 1300px;
  height: 1300px;
  border-radius: 50%;
  background: linear-gradient(180deg, #eef2fc 0%, var(--color-info-blue) 60%);
  transform: translateX(-50%) scale(1.15);
  transition: transform 1.1s cubic-bezier(0.16, 0.84, 0.44, 1), opacity 0.8s ease;
  z-index: 0;
  /* A borda do círculo (onde ele encontra o creme de fundo) some aos poucos
     em vez de cortar seco — os últimos 15% do raio desvanecem para
     transparente, dificultando ver onde o círculo realmente começa. */
  -webkit-mask-image: radial-gradient(circle, black 85%, transparent 100%);
  mask-image: radial-gradient(circle, black 85%, transparent 100%);
}

.frase-destaque-arco.is-visible {
  transform: translateX(-50%) scale(1);
}

.frase-destaque-icone {
  display: inline-flex;
  margin-bottom: 24px;
}

.frase-destaque-texto {
  font-size: var(--size-heading-lg);
  line-height: 1.2;
}

.frase-destaque-secundaria {
  font-size: var(--size-subheading);
  color: var(--color-stone);
  margin-top: 20px;
}

/* Só o botão "Agendar uma conversa" restou aqui (o outro botão da hero
   antiga era "Ver o sistema por dentro"; o link "Saiba mais" que existia
   neste bloco foi removido). */
.frase-destaque-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}

/* Imagem que ficava abaixo dos botões na hero antiga (.hero-media) — volta
   aqui como uma segunda coluna do .wrap, mais larga que a coluna de texto
   (720px) porque não precisa ficar contida por ela. */
.frase-destaque-media {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 56px auto 0;
  height: 480px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
}

.frase-destaque-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@media (max-width: 720px) {
  .frase-destaque {
    padding: 80px 0 100px;
  }

  .frase-destaque-arco {
    top: 24px;
    width: 900px;
    height: 900px;
  }

  .frase-destaque-texto {
    font-size: var(--size-heading);
  }

  .frase-destaque-media {
    height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frase-destaque-arco {
    transition: none;
    transform: translateX(-50%) scale(1);
  }
}