/* ===========================================================
   CTA — rótulo + caixinha da seta
   Componente compartilhado. Nasceu dentro da dobra Sobre; virou
   arquivo próprio quando a dobra Projetos passou a usar o mesmo
   botão — classe com nome de seção reaproveitada em outra seção
   é dívida que cobra juros depois.

   No hover a caixinha é preenchida por uma varredura que entra
   pela diagonal inferior esquerda e sai pela superior direita.
   =========================================================== */
.cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:500;
  color:var(--cream);
  text-decoration:none;
  white-space:nowrap;
}

.cta__box{
  position:relative;
  overflow:hidden;                 /* recorta a varredura */
  /* flex, não grid: com `place-items:center` o ::before absoluto encolhe
     pro tamanho do conteúdo (vazio) em vez de esticar na caixa */
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:30px;
  height:30px;
  border:1px solid var(--cream-30);
  border-radius:9px;               /* quadradinho arredondado, não círculo */
  transition:border-color .35s ease;
}

/* a varredura: um bloco do tamanho da caixa parado fora do canto
   inferior esquerdo, que desliza na diagonal até cobrir tudo */
.cta__box::before{
  content:"";
  position:absolute;
  inset:-1px;                      /* cobre por baixo da borda também */
  background:var(--red-edge);
  transform:translate3d(-101%,101%,0);
  transition:transform .45s cubic-bezier(.65,0,.35,1);
}

/* a seta fica acima da varredura */
.cta__arrow{
  position:relative;
  z-index:1;
  display:block;
  width:11px;
  height:11px;
  font-size:0;                    /* impede o iOS de renderizar ↗ como emoji */
  color:var(--cream);
}

/* Seta desenhada em CSS: mantém a mesma aparência em qualquer sistema. */
.cta__arrow::before{
  content:"";
  position:absolute;
  left:1px;
  bottom:1px;
  width:11px;
  height:1.5px;
  border-radius:999px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:left center;
}

.cta__arrow::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:6px;
  height:6px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
}

.cta:hover .cta__box::before,
.cta:focus-visible .cta__box::before{
  transform:translate3d(0,0,0);
}

.cta:hover .cta__box,
.cta:focus-visible .cta__box{border-color:var(--red-edge);}

.cta:focus-visible{outline:2px solid var(--red);outline-offset:6px;}

@media (prefers-reduced-motion:reduce){
  .cta__box::before{transition:none;}
}