/* ===== Base ===== */
:root {
    --bg: #0f0f10;
    --text: #e7e7ea;
    --btn-bg: #000;
    --btn-text: #e8eaed;
    --radius: 999px;
    --pad: 10px 26px;
    --stroke: 2.5;
    --seg: 100;
    --spin: 2.4s;
    --fade: 1s;
    --loops: 1;
}

/** {
    box-sizing: border-box
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}*/

.wrap {
    min-height: 100%;
    display: grid;
    place-items: center;
    gap: 22px;
    padding: 32px 20px;
    text-align: center;
}

/* ===== Botón ===== */
.ia-btn {
    --loops: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad);
    border-radius: var(--radius);
    /*background: var(--btn-bg);*/
    background: transparent;
    color: var(--btn-text);
    border: none;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    isolation: isolate;
    outline: none;
    overflow: hidden;
    transition: background-color .3s ease;
}

    .ia-btn span {
        position: relative;
        z-index: 1;
    }

    /* Hover cambia a fondo amarillo */
    .ia-btn:hover {
        background: #FFD500;
        color: #000;
    }

    /* Borde tenue siempre */
    .ia-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        /*box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;*/
        z-index: 0;
    }

    /* Borde amarillo fijo al final */
    .ia-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        /*box-shadow: 0 0 0 1px #FFD500 inset;*/
        border: 2px solid #FFD500;
        opacity: 0;
        z-index: 0;
        animation: appear .18s ease forwards;
        animation-delay: calc(var(--spin) * var(--loops));
    }

/* ===== SVG ===== */
.ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    pointer-events: none;
    z-index: 0;
}

.worm {
    stroke: url(#ia-worm);
    stroke-width: var(--stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--seg) calc(100 - var(--seg));
    stroke-dashoffset: 0;
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.10));
    animation-name: dash, slowfade;
    animation-duration: calc(var(--spin) * var(--loops)), var(--fade);
    animation-timing-function: linear, ease;
    animation-iteration-count: 1, 1;
    animation-fill-mode: both, forwards;
    animation-delay: 0s, calc(calc(var(--spin) * var(--loops)) - var(--fade));
}

.ia-btn.loop-1 {
    --loops: 1;
}

.ia-btn.loop-2 {
    --loops: 2;
}

@keyframes dash {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -100;
    }
}

@keyframes slowfade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}