/*Establecer tipografía para modificar los componentes de bootstrap. A los componentes propios, le aplicamos directamente la tipografía a la clase para que después sea más fácil modificarlos*/

.gm-font-type{
    font-family: 'Karla', sans-serif; /*Colocar la tipografía que queremos*/
}


.color-tipografia{
    color: var(--gris-2);
}

/*Establecer colores*/

:root{ /*Establecemos paleta de colores*/
    --primary-color: #fcf4d0;
    --primary-color-hard: #f5e392;
    --secondary-color: #e0d494;
    --secondary-color-hard: #beb05d;
    --blanco-1: #ffff;
    --blanco-2: #f8f5f5;
    --gris-1: #e6e3e3;
    --gris-2: #3f3f3f;
}

/*JUMBOTRON*/

.jumbotron-club{
    width: 100%;
    display: grid;
}
.fondo-jumbotron-club{
    width: 100%;
    height: 8rem;
    margin: auto;
    background-image: url(../images/fondo-boton-club-del-vino.webp);
    background-size: cover;
    filter: brightness(60%);
    position: absolute; /*El position absolute permite que otros elementos ocupen el mismo espacio*/
    z-index: -1; /*Con z-index "-1" lo mandamos para atrás*/
}

.titulo-club{
    color: var(--primary-color);
    width: 90%;
    grid-column: 1/12;
    text-align: center;
    justify-self: center;
    align-self: center;
    margin-top: 2rem;
    font-weight: 900;
}

/*Introducción*/

.body-introduccion{
    width: 90%;
    margin: auto;
    margin-top: 3.5rem;
    text-align: center;
    display: grid;
    grid-gap: 1rem;
}


@media (max-width: 600px) {
    .body-introduccion {
        margin-top: 5rem;
    }
  }

.titulo-body-introduccion{
    color: var(--gris-2);
}

.color-secondary{
    color: var(--secondary-color);
}

.color-terciary{
    color: var(--secondary-color-hard);
}

.info{
    width: 90%;
    margin: auto;
    display: grid;
    justify-content: center;
    align-items: center;
}

.texto-introduccion{
    text-align: center;
}

.contenedor-boton{
    width: 100%;
    display: flex;
    justify-content: center;
}


.boton-formulario{
    padding: 0.5rem;
    border: solid 1px;
    border-radius: 10px;
    text-decoration: none;
}

/*TEXTO y CALL TO ACTION (adaptar el margin bottom del último elemento, según corresponda para que el FOOTER quede al final de todo*/

.contenedor-info-imagen{
    width: 90%;
    margin: auto;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
}

@media (max-width: 600px) {
    .contenedor-info-imagen {
        grid-template-columns: 1fr;
    }
  }

.contenedor-imagen{
    width: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
}

.imagen-club-del-vino-2{
    width: 20rem;
}

@media (max-width: 600px) {
    .imagen-club-del-vino-2 {
        width: 15rem;
    }
  }


.gm-botones-club-del-vino{
    background-color: var(--primary-color);
    color: var(--gris-2);
    border-radius: 10px;
    border: none;
    padding: 0.6rem;
    text-decoration: none;
}

.gm-botones-club-del-vino:hover{
    background-color: var(--primary-color-hard);
    color: var(--gris-2);

}

/*Tarjeta*/


.tarjeta{
    width: fit-content;
    margin: auto;
    background-color: var(--blanco-1);
    box-shadow: 2px 2px 1px 1px rgba(158, 157, 157, 0.2);
    border-radius: 0.8rem;
    padding: 1.5rem;
    display: grid;
    grid-gap: 1.5rem;
    justify-items: center;
}

.titulos-tarjetas{
    width: 100%;
    margin: auto;
    display: grid;
}

.titulo-1{
    font-size: 1rem;
    font-weight: 600;
}

.precio{
    font-size: 2.8rem;
    font-weight: 800;
}

.bajada{
    font-size: 1.2rem;
}

.listado-tarjetas-contenedor{
    width: 100%;
    margin: auto;
    display: grid;
    grid-gap: 1rem;
}

.elemento-lista-tarjeta{
    width: 100%;
    margin: auto;
    display: flex;
    grid-gap: 0.5rem;
}