/* =========================================================
   BOTÃO TRICOLOR (.cta): paralelogramo verde / creme / verde.
   Só o fundo é inclinado (skewX -20°); o texto fica reto.
   Serve como <button> ou <a>. Estrutura obrigatória:

     <a class="cta" href="…">
       <span class="cta-bg" aria-hidden="true"><span class="cta-mid"></span></span>
       <span class="cta-label">Texto</span>
       <span class="cta-arrow" aria-hidden="true"></span>
     </a>

   Hover/foco: o bloco creme se alarga e a seta avança com cauda.
   ========================================================= */
@layer components {
  .cta {
    --cta-green: var(--c-cta-green);
    --h: 54px; --a: 12%; --w: 61%;
    position: relative; isolation: isolate;
    appearance: none; border: 0; background: none; cursor: pointer; text-decoration: none;
    width: min(440px, calc(100vw - 64px)); height: var(--h); margin-inline: 14px;
    display: grid; grid-template-columns: var(--a) var(--w) 1fr; align-items: center;
    font-family: var(--ff-small); font-size: 12.5px; line-height: normal;
    letter-spacing: .24em; text-transform: uppercase;
    transition: transform .25s ease, filter .35s ease;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
  }
  .cta-bg {
    position: absolute; inset: 0; z-index: -1;
    transform: skewX(-20deg);
    background: var(--cta-green);
    box-shadow: inset 0 0 0 1px rgba(241, 234, 216, .16);
  }
  .cta-mid {
    position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w);
    background: var(--c-cream-warm);
    transition: left .5s cubic-bezier(.6, 0, .2, 1), width .5s cubic-bezier(.6, 0, .2, 1);
  }
  .cta-label { grid-column: 2; text-align: center; color: var(--cta-green); padding-left: .24em; white-space: nowrap; }
  .cta-arrow {
    grid-column: 3; justify-self: center; position: relative;
    width: 22px; height: 1px; background: var(--c-cream-warm);
    transition: width .5s cubic-bezier(.6, 0, .2, 1), transform .5s cubic-bezier(.6, 0, .2, 1);
  }
  .cta-arrow::after {
    content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px;
    border-top: 1px solid var(--c-cream-warm); border-right: 1px solid var(--c-cream-warm);
    transform: rotate(45deg);
  }
  .cta:hover .cta-mid, .cta:focus-visible .cta-mid { left: 6%; width: 69%; }
  .cta:hover .cta-arrow, .cta:focus-visible .cta-arrow { width: 34px; transform: translateX(8px); }
  .cta:hover, .cta:focus-visible { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .45)); }
  .cta:focus-visible { outline: none; }
  .cta:focus-visible .cta-bg { outline: 1px solid var(--c-sage-light); outline-offset: 4px; }
  .cta:active { transform: scale(.97); }

  /* ---------- Variante "voltar" (.cta--back): espelhada, seta à esquerda apontando para trás ----------
     <button class="cta cta--back">…mesma estrutura…</button>                                           */
  .cta--back { width: min(300px, calc(100vw - 64px)); grid-template-columns: 1fr var(--w) var(--a); }
  .cta--back .cta-mid { left: calc(100% - var(--a) - var(--w)); }
  .cta--back .cta-arrow { grid-column: 1; grid-row: 1; transform: rotate(180deg); }
  .cta--back:hover .cta-mid, .cta--back:focus-visible .cta-mid { left: 25%; width: 69%; }
  .cta--back:hover .cta-arrow, .cta--back:focus-visible .cta-arrow { transform: rotate(180deg) translateX(8px); }

  @media (max-width: 460px) {
    .cta { --h: 48px; font-size: 11px; letter-spacing: .16em; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cta, .cta-mid, .cta-arrow { transition: none; }
  }
}