/* ==========================================================================
   Botões de CTA ("Agendar Test Drive" -> formulário #fale-conosco)
   - .site-cta: aparência comum. Sempre vermelho com conteúdo branco (hover
     preto), em qualquer seção.
   - .site-cta--hero: o botão grande da hero, embaixo no centro. Posição e
     altura (--cta-h) ficam no .hero__cta do css/hero.css.
   - .site-cta--corner: fixo no canto de cima, fora do header, alinhado pelo
     centro da linha dele (--header-top, --header-h e --cta-h no css/base.css).
     No topo da página fica escondido acima da tela e desce quando a hero sai
     dela (js/cta.js liga o .has-cta-reveal no <html> e o .is-shown no botão);
     daí em diante acompanha a página inteira. As seções de 1 tela começam
     abaixo dele (--cta-clear). Sem o js/cta.js ele fica sempre visível e o
     menu reserva o lugar dele (css/hero.css).
   - Rótulo curto ("Test Drive") até 479px, só no do canto; o nome acessível
     dele é sempre o do aria-label.
   - Nada de transform no <a>: a entrada da hero (js/hero.js) anima o da hero.
     Fundo, hover e clique ficam na face (.site-cta__face).
   ========================================================================== */
.site-cta {
  display: block;
  height: var(--cta-h);
  border-radius: calc(var(--cta-h) / 2);
  font-weight: 500;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(29, 29, 27, 0.16);
  -webkit-tap-highlight-color: transparent;
}

/* foco em duas cores, visível sobre fundo claro e escuro (o vermelho padrão some no botão vermelho):
   anel branco colado ao botão e contorno preto por fora */
.site-cta:focus-visible {
  outline-color: var(--color-black);
  box-shadow: 0 0 0 4px var(--color-white), 0 10px 28px rgba(29, 29, 27, 0.16);
}

.site-cta__face {
  display: flex;
  align-items: center;
  gap: 0.6em;
  height: 100%;
  padding: 0 calc(var(--cta-h) * 0.46);
  border-radius: inherit;
  background-color: var(--color-red);
  color: var(--color-white);
  transition: background-color 0.3s, transform 0.2s var(--ease-out);
}

/* volante */
.site-cta__icon {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.6s var(--ease-out);
}

.site-cta:active .site-cta__face {
  transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   Botão da hero: maior, para chamar quem já quer só deixar os dados
   -------------------------------------------------------------------------- */
.site-cta--hero {
  font-size: clamp(16px, 0.5vw + 11px, 20px);
  box-shadow: 0 14px 34px rgba(29, 29, 27, 0.22);
}

.site-cta--hero:focus-visible {
  box-shadow: 0 0 0 4px var(--color-white), 0 14px 34px rgba(29, 29, 27, 0.22);
}

/* --------------------------------------------------------------------------
   Botão do canto
   -------------------------------------------------------------------------- */
.site-cta--corner {
  position: fixed;
  z-index: 50; /* acima da página, abaixo do preloader (100) */
  top: calc(var(--header-top) + (var(--header-h) - var(--cta-h)) / 2);
  right: var(--gutter);
}

.site-cta__label--short {
  display: none;
}

@media (max-width: 479px) {
  .site-cta--corner .site-cta__label {
    display: none;
  }

  .site-cta--corner .site-cta__label--short {
    display: inline;
  }
}

/* No topo da página fica escondido acima da tela e desce quando a hero sai dela. Usa a propriedade
   translate, que leva a sombra junto. Escondido, o js/cta.js o deixa inerte (fora do Tab). */
.has-cta-reveal .site-cta--corner:not(.is-shown) {
  translate: 0 calc(-100% - var(--header-top) - 40px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .has-cta-reveal .site-cta--corner {
    transition: translate 0.5s var(--ease-out);
  }
}

@media (hover: hover) {
  .site-cta:hover .site-cta__face {
    background-color: var(--color-black);
  }

  /* o volante esterça */
  .site-cta:hover .site-cta__icon {
    transform: rotate(-30deg);
  }
}

/* o Chrome repetiria o botão fixo em cada página impressa */
@media print {
  .site-cta--corner {
    display: none;
  }
}