@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@500;600;700&display=swap");

:root {
    --azulPrimario: #39A2DB;
    --primarioOscuro: #25698e;
    --grisPrimario: #989fa1;
    --blanco: #FFF;
    --negro: #000;

    --fuenteTitulo: 'Raleway', sans-serif;
    --fuenteSecundaria: 'Open Sans', sans-serif;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; 
}

*, *:before, *:after {
    box-sizing: inherit;
}

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

html {
    scroll-behavior: smooth;
}

.grid{
    display: grid;
}

.tour{
    grid-template-columns: repeat(2,1fr);
}

.negro{
    background-color: #000;
    color: var(--azulPrimario);
}

.logo1{
    padding-top: 2.5rem;
    display: flex;
    align-items: center;
    color: var(--azulPrimario);
    font-size: 2rem;
    font-weight: 600;

}

.logo1 img{
    min-width: 50px;
    width: 2%;
    margin-right: .5rem;
}

.tour__info{
    padding-left: 2rem;
}

.tour__imagen{
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0px 5px 10px black;;
}

.tour__titulo{
    font-size: 10rem;
    font-family: var(--fuenteTitulo);
    color: var(--grisPrimario);
}

.tour__titulo span{
    color: var(--azulPrimario);
}

.tour__linea{
    height: 4px;
    width: 100%;
    margin: auto;
    background-color: var(--azulPrimario);
}

.tour__descripcion{
    font-family: var(--fuenteTitulo);
    color: var(--grisPrimario);
    margin-top: 1rem;
    font-size: 1.5rem;
    text-align: justify;

}

.tour__ventajas{
    grid-template-columns: repeat(2,1fr);
    margin-top: 3rem;
    font-family: var(--fuenteSecundaria);
    color: var(--grisPrimario);
    font-size: 1.2rem;
}

.tour__ventaja1, .tour__ventaja2{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.tour__ventajas i{
    font-size: 2rem;
}

.grid__boton{
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,1fr);
    padding-right: 2rem;
}

.tour__boton{
    background-color: var(--azulPrimario);
    color: var(--blanco);
    font-family: var(--fuenteSecundaria);
    font-size: 1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 5px;
    transition: background-color .5s;
    grid-column: 5/6;
    grid-row: 4;
}

.tour__boton:hover{
    background-color: var(--primarioOscuro);
}