:root {
    --cta-bg: hsla(0, 0%, 100%, .07);
    --cta-border: hsla(0, 0%, 100%, .16);
    --cta-glow-a: #00e5ff;
    --cta-glow-b: #00ffbf;
    --cta-text: #eafaff;
}

.cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    justify-content: center;
    margin-top: .75rem;
}

.btn-neo {
    width: 240px;
    /* mismo ancho en desktop */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.2rem;
    border: 1px solid var(--cta-border);
    border-radius: 999px;
    /* pill */
    background:
        radial-gradient(120% 160% at 10% 10%, hsla(0, 0%, 100%, .14), transparent 60%),
        linear-gradient(180deg, var(--cta-bg), hsla(0, 0%, 100%, .03));
    color: var(--cta-text);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .2px;
    backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 hsla(0, 0%, 100%, .25),
        0 20px 40px -20px rgba(0, 0, 0, .6),
        0 0 0 0 rgba(0, 0, 0, 0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.btn-neo svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.btn-neo:hover {
    transform: translateY(-2px);
    border-color: transparent;
    color: black;
    box-shadow:
        inset 0 1px 0 hsla(0, 0%, 100%, .35),
        0 25px 60px -20px rgba(0, 0, 0, .7),
        0 0 22px 2px color-mix(in oklab, var(--cta-glow-a), var(--cta-glow-b) 50%);
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--cta-glow-a), #fff 20%) 0%, color-mix(in oklab, var(--cta-glow-b), #fff 15%) 100%),
        linear-gradient(180deg, hsla(0, 0%, 100%, .10), hsla(0, 0%, 100%, .04));
}

.btn-neo:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--cta-glow-a), var(--cta-glow-b) 50%);
    outline-offset: 3px;
}

@media (max-width:576px){
  .cta-group{ gap:.6rem; }

  .btn-neo{
    width: min(92%, 280px);   /* ya no 100%: más angosto en móvil */
    padding: .68rem .9rem;    /* menos alto/anchura */
    font-size: .95rem;        /* texto un poco más pequeño */
    gap: .5rem;               /* menos espacio icono-texto */
    border-radius: 16px;      /* menos “pill” */
    margin-inline: auto;      /* centra el botón */
    box-shadow:
      inset 0 1px 0 hsla(0,0%,100%,.22),
      0 10px 20px -18px rgba(0,0,0,.6);
  }
  .btn-neo svg{ width:18px; height:18px; }
}

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