@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&display=swap');

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    font-family: 'Red Hat Display', sans-serif;
}

:root{
    /* Colores */
    --primario-Azul-pálido: hsl(225, 100%, 94%);
    --primario-Azul-brillante: hsl(245, 75%, 52%);
    --neutral-Azul-muy-pálido: hsl(225, 100%, 98%);
    --neutral-Azul-desaturado: hsl(224, 23%, 55%);
    --neutral-Azul-oscuro: hsl(223, 47%, 23%);
    --neutral-Blanco: hsl(0, 0%, 100%);
    --texto: hsl(210, 29%, 13%);
    --estado-Azul-brillante: hsl(245, 78%, 61%);

    /* --------------------------------------------- */

    /* Anchos */
    --display-Móvil: 375px;
    --display-Escritorio: 1440px;
};

body{
    font-size: 16px;
}

.contenedor{
    width: 100%;
    height: 100vh;

    background-color: var(--primario-Azul-pálido);
    background-image: url(../images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 -35%;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.card{
    background-color: var(--neutral-Blanco);
    border-radius: 20px;
    
    margin: 0 15px;

    -webkit-box-shadow: 0px 0px 25px -5px rgba(87, 116, 193, .5); 
    box-shadow: 0px 0px 25px -5px rgba(87, 116, 193, .5);

    transition: all 300ms ease;
}

.card__image{
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.card__title{
    margin-top: 35px;
    margin-bottom: 15px;
    
    color: var(--texto);
}

.card__text{
    margin-bottom: 25px;
    line-height: 26px;
}

.boton, .plan{
    width: 90%;
}

.plan{
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: var(--neutral-Azul-muy-pálido);

    border-radius: 10px;
    padding: 25px 15px;
    margin: 0 auto 15px auto;
}

.plan__elementos{
    display: flex;
}

.plan__icon{
    margin: 0 15px;
}

.plan__details{
    font-weight: 400;
}

.plan__details--bold{
    font-weight: 700;
    color: var(--texto);
}

.plan__change{
    font-weight: 700;
    color: var(--primario-Azul-brillante);

    margin: 0 15px;

    transition: all 150ms ease;
}

.boton{
    font-weight: 700;

    cursor: pointer;
    color: var(--neutral-Azul-desaturado);

    padding: 15px 10px;
    border-radius: 10px;
    margin: 0 auto 10px auto;

    transition: all 150ms ease;
}

.boton--azul{
    background-color: var(--primario-Azul-brillante);
    color: var(--neutral-Azul-muy-pálido);

    -webkit-box-shadow: 0px 5px 20px -5px rgba(0,47,255,0.9); 
    box-shadow: 0px 5px 20px -5px rgba(0,47,255,0.9);
}

/* ----------------------------------------------------------- */
                         /* HOVER */
/* ----------------------------------------------------------- */

.card:hover{
    transform: translateY(-5px);
}

.plan__change:hover{
    color: var(--estado-Azul-brillante);
    text-decoration: none;

    margin: 0 15px;
}

.boton:hover{
    color: var(--neutral-Azul-oscuro);
}

.boton--azul:hover{
    background-color: var(--estado-Azul-brillante);
    color: var(--neutral-Blanco);
}