:root{
    --fondo-nav: #3e6b4f;
    --encabezados: #8c4a2f;
    --fondo-claro: #F9F6F1;
    --amarillo-tradicional: #F2C14E;
    --enlaces-destacados: #A63929;
}

body{
    background-color: var(--fondo-claro);
}

/* FIRST PRESENTATION */

/* BLOCK */

.presentation{
    padding-top: 22vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* ELEMENTS */

.p-info{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.presentation img{
    width: 40%;
}

.presentation h1{
    color: var(--encabezados);
    font-size: 5rem;
}

.presentation p{
    color: var(--fondo-nav);
    font-size: 1.8rem;
}

/* SECOND-PRESENTATION */

/* BLOCK */

.second-presentation{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 22vh;
}

/* ELEMENTS */

.second-info{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.second-presentation img{
    width: 40%;
}

.second-info h3{
    font-size: 3rem;
    color: var(--encabezados);
}

.second-info p{
    color: var(--fondo-nav);
    font-size: 1.8rem;
}

/* FINAL-PRESENTATION */

/* BLOCK */

.final-presentation{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 22vh;
}

/* ELEMENTS */

.third-presentation{
    width: 40%;
}

.final-presentation img{
    width: 40%;
}

.final-presentation p{
    font-size: 2rem;
    font-weight: bold;
    color: var(--encabezados);
}

.contact-info h3{
    font-size: 2rem;
}

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

/* CRAFTS */

.craft-body{
    background-color: var(--encabezados);
}

.footer-crafts{
    background-color: none;
}

.presentation-crafts-info h3{
    color: var(--amarillo-tradicional);
    font-size: 3rem;
}

.presentation-crafts-info p{
    color: var(--fondo-claro);
    font-size: 1.5rem;
}

.craft-img{
    width: 60%;
}

/* PRODUCT-CRAFTS */

/* BLOCK */

.presentation-crafts{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15vh;
    padding-bottom: 10vh;
    margin-left: 10vh;
    margin-right: 10vh;
}

/* ELEMENTS */

.presentation-crafts-info{
    width: 40%;
}

/* BLOCK */

.second-crafts{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vh;
}

/* ELEMENTS */



/* BLOCK */

.third-crafts{
    display: flex;
    justify-content: space-between;
    margin: 10vh;
    gap: 5vh;
    align-items: center;
}



/* BLOCK */

.four-crafts{
    display: flex;
    flex-direction: column;
    margin: 10vh;
    align-items: center;
    gap: 5vh;
}



@media (max-width: 768px) {

    /* INDEX */

    /* BLOCK */

    .presentation{
    padding-top: 10vh;
    display: flex;
    flex-direction: column;
    gap: 4vh;
    }

    .p-info{
        width: 80%;
    }

    /* ELEMENTS */

    .p-info h1{
        font-size: 3rem;
    }

    .p-info p{
        font-size: 1rem;
    }

    .presentation img{
        width: 80%;
    }

    /* BLOCK */

    .second-presentation{
        display: flex;
        flex-direction: column;
        margin-top: 10vh;
        gap: 4vh;
    }

    /* ELEMENTS */

    .second-info{
        width: 80%;
    }

    .second-info h3{
        font-size: 2rem;
    }

    .second-info p{
        font-size: 1rem;
    }

    .second-presentation img{
        width: 80%;
    }

    /* BLOCK */

    .final-presentation{
        display: flex;
        flex-direction: column;
        margin-top: 10vh;
        gap: 4vh;
    }

    .third-presentation{
        width: 80%;
    }

    .third-presentation p{
        font-size: 1.5rem
    }

    .final-presentation img{
        width: 80%;
    }


    /* CRAFTS */

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

    /* BASE */

    .presentation-crafts-info{
        width: 80%;
    }

    .presentation-crafts-info h3{
        font-size: 3rem;
    }

    .presentation-crafts-info p{
        font-size: 1rem;
    }

    .craft-img{
        width: 80%;
    }

    /* BLOCK */

    .presentation-crafts{
        display: flex;
        flex-direction: column;
        padding-top: 10vh;
        padding-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        gap: 4vh;
    }

    /* BLOCK */

    .second-crafts{
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
    }

    /* BLOCK */

    .third-crafts{
        margin: 0;
        padding: 0;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 4vh;
    }

    /* BLOCK */

    .four-crafts{
        margin: 0;
        padding: 0;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}