/*====================================================
BOTONES.CSS
LANDING V3
====================================================*/

/* BOTÓN BASE */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:20px 42px;

    border:none;

    border-radius:var(--radio-btn);

    font-size:22px;

    font-weight:800;

    text-decoration:none;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:var(--shadow-soft);

}

/* EFECTO */

.btn:hover{

    transform:translateY(-4px);

}

/* BOTÓN WHATSAPP */

.btn-whatsapp{

    background:var(--color-whatsapp);

    color:#fff;

}

.btn-whatsapp:hover{

    background:#20c55a;

}

/* BOTÓN NARANJA */

.btn-orange{

    background:var(--color-acento);

    color:#fff;

}

.btn-orange:hover{

    background:#e85d00;

}

/* BOTÓN AZUL */

.btn-blue{

    background:var(--color-primario);

    color:#fff;

}

.btn-blue:hover{

    background:var(--color-secundario);

}

/* BOTÓN VERDE */

.btn-green{

    background:var(--color-verde);

    color:#fff;

}

.btn-green:hover{

    background:#169d19;

}

/* ANIMACIÓN */

.btn-pulse{

    animation:btnPulse 1.8s infinite;

}

@keyframes btnPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1);

}

}

@media(max-width:768px){

.btn{

width:100%;

font-size:20px;

padding:18px;

}

}