/* =========================================================
   05 · APPLY
   Botón flotante central "Aplica aquí mismo" -> Google Form.
   Visible en inicio; se oculta al abrir una letra (igual que .hint)
   para no competir con el panel de esa letra.
   Animación: apply-pulse (aro que respira, se congela con prefers-reduced-motion)
   ========================================================= */
.apply-cta{
  position:fixed;top:clamp(18px,4vh,34px);left:50%;transform:translateX(-50%);z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 32px;border-radius:999px;
  background:#ebff00;color:#0a0a0a;font-weight:700;font-size:1rem;letter-spacing:.01em;
  box-shadow:0 0 0 0 rgba(235,255,0,.45);
  animation:apply-pulse 2.6s ease-in-out infinite;
  transition:opacity .3s,visibility 0s,transform .3s var(--ease);
}
/* Nota: el centrado usa transform (no la propiedad `translate`), para que el hover
   pueda combinar desplazamiento + escala en la misma propiedad sin que se dupliquen. */
.apply-cta:hover{transform:translateX(-50%) translateY(-2px) scale(1.03)}
.apply-cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

body[data-mode="detail"] .apply-cta{
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s;
}

@keyframes apply-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(235,255,0,.45)}
  50%{box-shadow:0 0 0 14px rgba(235,255,0,0)}
}

@media (max-width:760px){
  .apply-cta{height:46px;padding:0 22px;font-size:.92rem;top:clamp(14px,3vh,20px)}
}