/* Estilos CTA */
.contenedor-principal-cta-primer-pedido {
    background: #62AEF3;
    background: linear-gradient(0deg,rgba(98, 174, 243, 1) 0%, rgba(17, 125, 222, 1) 100%);
    text-align: center;
    margin-bottom: 6rem;
    padding: 4rem 1rem;
    border-radius: 20px;
}

.contenedor-principal-cta-primer-pedido h3{
    color: var(--color-blanco);
    font-family: var(--fuente-sora-light);
    font-size: clamp(2.2rem, 5vw, 2.6rem);
    margin: 0 0 2rem 0;
}

.contenedor-principal-cta-primer-pedido a button{
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    font-size: clamp(1.6rem, 5vw, 1.8rem);
    background-color: var(--color-amarillo);
    font-family: var(--fuente-sora-medium);
    color: var(--color-azul);
    padding: 1rem 2rem;
    border-radius: 5px;
    border: none;

    transition: color .35s ease, transform .35s ease;
}

.contenedor-principal-cta-primer-pedido a button::before{
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-azul);
    border: .2rem solid var(--color-blanco);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    z-index: -1;
    border-radius: 5px;
}

.contenedor-principal-cta-primer-pedido a button:hover{
    color: var(--color-blanco);
    transform: translateY(-3px);
}

.contenedor-principal-cta-primer-pedido a button:hover::before{
    transform: scaleX(1);
}