/* ==========================================================================
   Andréia Freitas — CTA FINAL
   Imagem de ponta a ponta com camada azul-marinho em gradiente.
   Consome os tokens de system.css e reaproveita .af-wrap e .af-arrow.
   Valores vindos do protótipo aprovado.
   ========================================================================== */

.af-cta{
  position:relative;
  overflow:hidden;
  min-height:min(96vh, 860px);
  display:flex;
  align-items:flex-start;
  background:var(--slate);
  color:var(--cream);
  text-align:center;
  font-family:var(--display);
  line-height:1.2;
}
.af-cta__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center 70%;
}
/* radial: só atrás do texto, sem apagar a luz dourada da foto.
   vertical: escurece de leve o topo e termina no azul-marinho puro,
   para emendar sem corte no rodapé. Não trocar por camada uniforme. */
.af-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 58% 52% at 50% 30%, rgba(46,69,86,.74) 0%, rgba(46,69,86,.45) 55%, rgba(46,69,86,0) 100%),
    linear-gradient(180deg, rgba(46,69,86,.45) 0%, rgba(46,69,86,.08) 45%, rgba(46,69,86,0) 72%, rgba(46,69,86,0) 80%, rgba(46,69,86,.55) 94%, var(--slate) 100%);
}
.af-cta .af-wrap{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:96px;
  padding-bottom:340px;
}

.af-cta__eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin:0 0 26px;
  color:var(--gold-soft);
  font-size:13px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.af-cta__eyebrow::before,
.af-cta__eyebrow::after{
  content:"";
  width:30px;
  height:1px;
  background:var(--gold);
}

.af-cta__title{
  margin:0 auto;
  max-width:21ch;
  font-weight:500;
  color:var(--cream);
  font-size:clamp(38px, 4vw, 60px);
  line-height:1.06;
  letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(34,51,63,.35);
}
.af-cta__title em{ color:var(--gold-soft); }

.af-cta__text{
  text-shadow:0 1px 12px rgba(34,51,63,.5);
  margin:24px auto 0;
  max-width:60ch;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8;
  color:rgba(247,245,240,.86);
}
.af-cta__begin{
  margin:14px 0 0;
  font-style:italic;
  font-weight:500;
  font-size:24px;
  color:var(--gold-soft);
}

.af-cta__btn{
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  background:var(--gold);
  color:var(--ink);
  padding:16px 34px;
  border-radius:999px;
  font-size:18px;
  font-weight:600;
  letter-spacing:.04em;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.55);
  transition:background .25s, transform .25s;
}
.af-cta__btn:hover{
  background:var(--gold-soft);
  transform:translateY(-1px);
}
.af-cta__btn:hover .af-arrow{ transform:translateX(3px); }

/* a partir de ~1500px a foto é escalada pela largura e fica mais alta que a
   seção; com 70% as xícaras subiam até encostar no botão (−13px em 1920).
   55% mantém as xícaras logo abaixo do botão até 2560px. Abaixo disso a foto
   é escalada pela altura e a posição vertical não tem efeito. */
@media (min-width:1500px){
  .af-cta__bg{ object-position:center 55%; }
}

@media (max-width:1023px){
  .af-cta{ min-height:0; }
  .af-cta__bg{ object-position:38% 75%; }
  /* tablet: a foto é escalada pela altura; 300px de respiro faz as xícaras
     descerem para baixo do botão */
  .af-cta .af-wrap{
    padding-top:72px;
    padding-bottom:300px;
  }
  .af-cta__text{ font-size:15.5px; }
  .af-cta__begin{ font-size:22px; }
}
@media (max-width:767px){
  /* celular: 28% deixa as duas xícaras fora do botão (com 38% ele cobria
     46–97% da xícara da esquerda entre 360 e 430px) e mantém poltrona e mesinha */
  .af-cta__bg{ object-position:28% 75%; }
  .af-cta .af-wrap{ padding-bottom:260px; }
}