/* ======================================================================
   COMPONENTS – SINTEGRAD
   Botones, CTAs, micro-interacciones reutilizables
   ====================================================================== */

/* ==========================================================
   CTA MAESTRO – SINTEGRAD
   (Hero, Formularios, Landings)
   ========================================================== */

.btn-primary {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    height: 40px;
    padding: 0 22px;

    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;

    color: #fff;
    background: linear-gradient(
        135deg,
        #00A2FF 0%,
        #2ECCFF 100%
    );

    box-shadow:
        0 8px 22px rgba(0,162,255,0.28),
        inset 0 0 0 1px rgba(255,255,255,0.16);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

/* Hover base */
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow:
        0 12px 28px rgba(0,162,255,0.40),
        inset 0 0 0 1px rgba(255,255,255,0.22);
}

/* Active */
.btn-primary:active {
    transform: translateY(0);
}

/* ==========================================================
   EFECTO SWEEP (DEFAULT – FUERA DE HERO)
   ========================================================== */

.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        120deg,
        transparent 35%,
        rgba(255,255,255,0.28),
        transparent 65%
    );

    transform: translateX(-120%) skewX(-20deg);
    transition: transform 0.6s ease;
}

.btn-primary:hover::after {
    transform: translateX(120%) skewX(-20deg);
}

/* ==========================================================
   HERO – CTA EDITORIAL (DESACTIVA SWEEP)
   ========================================================== */

.hero .btn-primary::after {
    display: none;
}

/* Icono dentro del CTA */
.btn-primary .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

/* ==========================================================
   BTN-GHOST – CTA SECUNDARIO SINTEGRAD
   Link elegante sobre fondos oscuros. Sin background.
   ========================================================== */

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    padding: 0 22px;

    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.22);

    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);

    background: transparent;
    text-decoration: none;

    transition:
        border-color 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* Dentro del hero — sin sweep */
.hero .btn-ghost::after {
    display: none;
}