/* Seção 1: topo. Foto da família ocupando o fundo, texto e botão à esquerda,
   o guia no meio, e a família feliz aparecendo à direita: o resultado que ela quer. */

.abf-topo {
  position: relative;
  isolation: isolate;
}

/* Foto de fundo. No celular é uma faixa no alto; no desktop cobre o topo inteiro. */
.abf-topo__fundo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -2;
  height: var(--topo-foto);
}

.abf-topo__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  animation: abf-topo-foto 1400ms var(--abf-ease-out) both;
}

/* Véu verde sobre a foto */
.abf-topo::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: calc(var(--topo-foto) + 2px);
  background: linear-gradient(180deg, rgb(8 58 36 / 0.1) 0%, rgb(8 58 36 / 0) 40%, rgb(8 58 36 / 0.7) 80%, var(--abf-fundo-2) 100%);
}

.abf-topo {
  --topo-foto: min(78vw, 560px);
}

.abf-topo__conteudo {
  display: grid;
  grid-template-areas:
    "guia"
    "texto";
  padding: 0 var(--abf-recuo) 56px;
}

/* O guia sobe por cima da foto, no canto esquerdo */
.abf-topo__guia {
  grid-area: guia;
  position: relative;
  justify-self: start;
  width: 36vw;
  max-width: 230px;
  margin-top: calc(var(--topo-foto) - 34vw);
}

/* Luz amarela atrás do guia */
.abf-topo__guia::before {
  content: "";
  position: absolute;
  inset: 15% -25% -5%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(255 216 79 / 0.4), transparent);
}

.abf-topo__guia img {
  width: 100%;
  filter: drop-shadow(0 24px 28px rgb(0 0 0 / 0.5));
  animation:
    abf-topo-guia-entra 900ms var(--abf-ease-out) 200ms both,
    abf-topo-guia-flutua 6s ease-in-out 1200ms infinite;
}

.abf-topo__texto {
  grid-area: texto;
  margin-top: 28px;
}

.abf-topo__titulo {
  font-family: var(--abf-face-titulo);
  font-size: var(--abf-step-hero);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.abf-topo__apoio {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--abf-texto-2);
  font-size: var(--abf-step-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

.abf-topo__acao {
  margin-top: 28px;
}

.abf-topo__acao .abf-botao {
  width: 100%;
}

.abf-topo__nota {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--abf-texto-2);
  font-size: var(--abf-step-small);
}

.abf-topo__nota svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--abf-amarelo);
}

/* Fatos de apoio em pílulas */
.abf-topo__fatos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.abf-topo__fatos li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: rgb(242 246 241 / 0.06);
  border: 1px solid var(--abf-linha);
  border-radius: 999px;
  font-size: var(--abf-step-small);
  line-height: 1.2;
}

.abf-topo__fatos svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--abf-amarelo);
}

/* Celular: foto mais baixa e o guia sobre o pé dela, para o botão subir para a primeira tela */
@media (max-width: 767px) {
  .abf-topo {
    --topo-foto: min(64vw, 480px);
  }

  .abf-topo__conteudo {
    position: relative;
  }

  .abf-topo__guia {
    position: absolute;
    top: calc(var(--topo-foto) - 38vw);
    left: var(--abf-recuo);
    width: 26vw;
    margin: 0;
  }

  .abf-topo__texto {
    margin-top: calc(var(--topo-foto) + 8px);
  }

  .abf-topo__apoio {
    margin-top: 14px;
    font-size: var(--abf-step-body);
  }

  .abf-topo__acao {
    margin-top: 22px;
  }
}

/* Em celular estreito, a pílula da data cabe numa linha só */
@media (max-width: 420px) {
  .abf-topo__fatos li {
    padding: 7px 12px 7px 9px;
    font-size: 0.875rem;
  }
}

/* Entrada do texto, em sequência */
.abf-topo__texto > * {
  animation: abf-topo-sobe 700ms var(--abf-ease-out) both;
  animation-delay: calc(var(--abf-ordem, 0) * 90ms + 150ms);
}

@media (min-width: 600px) {
  .abf-topo__acao .abf-botao {
    width: auto;
  }
}

@media (min-width: 768px) {
  .abf-topo {
    --topo-foto: min(58vw, 560px);
  }

  .abf-topo__guia {
    width: 26vw;
    max-width: 240px;
    margin-top: calc(var(--topo-foto) - 22vw);
  }
}

/* Desktop: a foto cobre todo o topo; texto, guia e família lado a lado */
@media (min-width: 1024px) {
  .abf-topo {
    --topo-foto: 100%;
    display: flex;
    align-items: center;
    min-height: clamp(660px, 90svh, 840px);
  }

  .abf-topo__fundo,
  .abf-topo::before {
    bottom: 0;
    height: auto;
  }

  .abf-topo__fundo img {
    object-position: 0% 40%;
  }

  .abf-topo::before {
    background:
      linear-gradient(90deg, var(--abf-fundo-2) 0%, rgb(8 58 36 / 0.95) 30%, rgb(8 58 36 / 0.7) 46%, rgb(8 58 36 / 0.1) 64%, rgb(8 58 36 / 0) 80%),
      linear-gradient(0deg, var(--abf-fundo-2) 0%, rgb(8 58 36 / 0) 24%);
  }

  .abf-topo__conteudo {
    width: 100%;
    grid-template-areas: "texto guia .";
    grid-template-columns: minmax(0, 600px) minmax(200px, 250px) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: center;
    padding: 80px var(--abf-recuo);
  }

  .abf-topo__texto {
    margin-top: 0;
  }

  .abf-topo__guia {
    align-self: end;
    width: 100%;
    max-width: none;
    margin: 0 0 -24px;
  }
}

@keyframes abf-topo-foto {
  from {
    transform: scale(1.06);
  }
}

@keyframes abf-topo-sobe {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes abf-topo-guia-entra {
  from {
    opacity: 0;
    transform: translateY(40px) rotate(-6deg) scale(0.94);
  }
}

@keyframes abf-topo-guia-flutua {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -10px;
  }
}

@keyframes abf-topo-aparece {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abf-topo__fundo img,
  .abf-topo__texto > * {
    animation: none;
  }

  .abf-topo__guia img {
    animation: abf-topo-aparece 300ms ease both;
  }
}