/* ==========================================================================
   CTA EM PÍLULA GIGANTE — plg-
   O botão é a dobra: uma pílula da largura da coluna, parada.
   Tokens usados: --fg --fg-2 --fg-muted --rule-2 --accent --accent-ink
                  --dark --display --radius-pill --ease
   Parafuso local:
     --plg-altura   altura da pílula
   ========================================================================== */

.plg-frase{
  max-inline-size:52ch;margin-inline:auto;text-align:center;
  font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--fg-2);
}

.plg-slot{display:flex;margin-top:clamp(28px,4vh,44px)}

/* A mesma dupla do .btn-primary: --accent de fundo, --dark de tinta. No
   hover o miolo esvazia e a borda fica, como no core — o botão não salta
   nem cresce (CLAUDE.md §6). */
.plg-pilula{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,28px);
  min-block-size:var(--plg-altura,clamp(112px,13vw,190px));
  padding-inline:clamp(28px,5vw,80px);
  border:1px solid var(--accent);border-radius:var(--radius-pill);
  background:var(--accent);color:var(--dark);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.plg-pilula:hover{background:transparent;color:var(--accent)}
.plg-pilula:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

.plg-texto{
  font-family:var(--display);font-weight:700;
  font-size:clamp(32px,6vw,92px);line-height:1;letter-spacing:-.035em;
  text-align:center;
}
.plg-seta{
  flex:0 0 auto;display:grid;place-items:center;
  inline-size:clamp(44px,5vw,76px);block-size:clamp(44px,5vw,76px);
  border:1.5px solid currentColor;border-radius:var(--radius-pill);
}
.plg-seta svg{inline-size:42%;block-size:42%}

.plg-alternativas{
  margin-top:22px;text-align:center;
  font-size:13.5px;color:var(--fg-muted);
}
.plg-alt{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-2);transition:color .25s}
.plg-alt:hover{color:var(--accent-ink,var(--accent))}

@media(prefers-reduced-motion:reduce){
  .plg-pilula{transition:none}
}

@media(max-width:560px){
  .plg-pilula{min-block-size:96px}
  .plg-seta{display:none}
}