/* ===== Neon Conic-Ring Buttons (adaptados del CodePen) ===== */

.neon-cta {
    margin-right: 8px;
}

    .neon-cta > li {
        margin-left: 8px;
    }

/* Temas (colores) */
.theme-ib {
    --c1: #0ea5e9;
    --c2: #22d3ee;
    --ring: rgba(14,165,233,.7);
}

.theme-store {
    --c1: #7c3aed;
    --c2: #ff5fc4;
    --ring: rgba(124,58,237,.7);
}

/* Botón base */
.neon-btn {
    --radius: 999px; /* radio de la píldora */
    --ringSize: 6px; /* grosor del aro visible */
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    min-height: 42px;
    border-radius: var(--radius);
    color: #fff !important;
    text-decoration: none !important;
    overflow: hidden;
    cursor: pointer;
    /* vidrio oscuro -> legible en fondo blanco y en hero */
    background: #0d1117e6; /* fallback del “vidrio” */
    box-shadow: 0 4px 14px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.18);
    transition: transform .15s ease, box-shadow .25s ease, filter .25s ease;
    animation: neonBreathe 3.8s ease-in-out infinite;
}

    /* Contenido por capas: texto arriba, aros debajo */
    .neon-btn > * {
        position: relative;
        z-index: 2;
    }

.neon-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

    .neon-copy em {
        font-style: normal;
        font-weight: 600;
        opacity: .95;
    }

.neon-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

    .neon-icon i {
        font-size: 13px;
    }

/* ARO GIRATORIO (CodePen adaptado) */
.neon-btn::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    aspect-ratio: 1/1;
    width: 220%;
    border-radius: 50%;
    background: conic-gradient(#fff 0%, transparent 4%, var(--c1) 55%, var(--c2) 80%, #fff 100%);
    transform: translate(-50%, -50%);
    animation: neonSpin 3s linear infinite;
    opacity: .9;
    pointer-events: none;
}

/* MÁSCARA INTERNA para crear el “ring” y el efecto glass */
.neon-btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: calc(100% - var(--ringSize));
    height: calc(100% - var(--ringSize));
    border-radius: var(--radius);
    transform: translate(-50%, -50%);
    background: #0d1117cc; /* vidrio oscuro */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Hover: glow/humo y ring de color */
.neon-btn:hover, .neon-btn:focus {
    transform: translateY(-1px);
    filter: saturate(1.06);
    box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 0 2px var(--ring), /* ring visible en fondo blanco */
    0 0 26px var(--c1), 0 0 48px var(--c2); /* glow tipo humo */
}

/* Pulso suave permanente */
@keyframes neonBreathe {
    0%,100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(0) scale(1.015);
    }
}

/* Giro del aro (conic-gradient) */
@keyframes neonSpin {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

/* Respeto a usuarios con reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .neon-btn {
        animation: none;
    }

        .neon-btn::before {
            animation: none;
        }
}

/* Responsive: full width al colapsar el menú */
@media (max-width:767px) {
    .neon-cta {
        float: none !important;
    }

        .neon-cta > li {
            width: 100%;
            margin: 6px 0;
        }

    .neon-btn {
        justify-content: center;
        width: 100%;
    }
}

/* Fallback si no hay soporte de backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
    .neon-btn::after {
        background: #0d1117f0;
    }
}