/* Custom PROPERTIES */

:root{
    --color-primario: #FFFEF9;
    --color-secundario: #16925E;
    --color-terciario: #A0ABA6;
    --color-cuaternario: #383838;

    --tipo-principal: 'Archivo', sans-serif;
    --tipo-secundaria: 'Space Mono', monospace;
}

/* Las adaptamos al modo oscuro en móviles/tablets */
@media (prefer-color-scheme: dark){
    :root{
        --color-primario: #383838;
        --color-secundario: #16925E;
        --color-terciario: #FFFDF4;
    }
}

/* Si se activa el modo de alto contraste */

@media (prefer-contrast: high){
    :root{
        --color-primario: black;
        --color-secundario: white;
    }

}

/* Desactivamos los animations en el caso de que el usuario haya configurado el modo sin animaciones */

@media (prefers-reduced-motion: reduce) {
    *{
        animation: none;
        transition: none;
        /* no se debería poner el asterisco sino el nombre del selector en concreto */
    }
}

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

img , picture , video , iframe , figure{
    max-width: 100%;
    width: 100%;
    display: block;
    /* Opcional */  object-fit: cover;
    /* Opcional */  object-position: center center;
}

a{
    display: block;
}

p a{
    display: inline;
}

li{
    list-style-type: none;
}

html{
    scroll-behavior: smooth;
}

/* Desactivamos estilos por defecto en las principales etiquetas de texto */

h1 , h2 , h3 , h4 , h5 , h6 , p , span , a , strong , blockquote , i , b , u , em{
    font-size: 1em;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: none;
    color: inherit;
}

/* Evitamos los problemas con los pseudoelementos de quotes */

blockquote:before , blockquote:after , q:before , q:after {
    content: '';
    content: none;
}

/* Seleccionar el color del sombreado al seleccionar texto en nuestra web */
::selection{
    background-color: var(--color-cuaternario);
    color: var(--color-primario);
}

/* Problemas de tipografías y colocación de formularios */

form ,  input , textarea , select , button , label {
    font-family: inherit;
    font-size: inherit;
    hyphens: auto;
    background-color: transparent;
    display: block;
    color: inherit;
    /* Opcional */ appearance: none;
}

/* reseteamos las tablas */

table , tr , td {
    border-collapse: collapse;
    border-spacing: 0;
}

/* evcitamos problemas con los SVG */

svg{
    width: 100%;
    display: block;
    fill: currentColor;
}

::-webkit-scrollbar {
    display: none;
}


body{
    height: 300vh;
    font-size: 100%;
    font-family: var(--tipo-principal);
    color: var(--color-secundario);
    line-height: 1.4em;
    hyphens: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-primario);

    position: relative;
}

/* BOTÓN VOLVER */
.Button-volver{
    width: 3.75rem;
    height: 3.75rem;
    background-color: var(--color-secundario);

    border-radius: 50%;

    position: fixed;
    bottom: 10%;
    right: 10%;

    z-index: 5;

    padding: 1rem 1rem 0.7rem 0.7rem;
    transition: transform 0.4s ease;
}

.Button-volver:hover{
    transform: scale(1.2);
}

.Volver-svg{
    fill: var(--color-primario);
}
/* BOTÓN VOLVER */

/* ----- HEADER ----- */

@keyframes slideIn{
    from{
        transform: translateY(200%);
        opacity: 0;
    }

    to{
        transform: translateY(0%);
        opacity: 1;
    }
}

.Header{
    width: 100%;
    position: fixed;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    background-color: var(--color-primario);
    z-index: 3;

}

.Header-wrapper{
    width: 100%;
    min-height: 10vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 3.125rem;

    padding: 2vh 10vh;
}

/* MENÚ HAMBURGUESA */

.Menu-hamburguesa{
    width: 100%;
    height: 100vh;
    background-color: var(--color-secundario);

    z-index: 3;

    position: fixed;
    top: 0;
    left: 0;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.Menu-hamburguesa.isActive{
    transform: scaleX(1);
}

.Hamburguesa-close{
    position: absolute;
    top: 0;
    right: 0;

    margin: 3.125rem;
    cursor: pointer;
}

.Hamburguesa-svg{
    width: 2.5rem;
    height: 2.5rem;

    fill: var(--color-primario);
}

.Hamburguesa-enlaces{
    height: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: 3.75rem;
}

.Hamburguesa-a{
    font-size: 1.25rem;
    font-weight: 600;
    font-family: var(--tipo-secundaria);
    color: var(--color-primario);
    transition: transform 0.3s ease;
}

.Hamburguesa-a:hover{
    transform: scale(1.1);
}

.Header-button{
    display: none;
    fill: var(--color-cuaternario);
    width: 2rem;
    height: 2rem;
}

/* MENÚ HAMBURGUESA */

.Wrapper-nav{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 3.125rem;
}

.Wrapper-h1{
    font-family: var(--tipo-principal);
    font-size: 3.75rem;
    font-weight: 600;
    transition: all 0.3s ease;

    color: var(--color-cuaternario);
}

.Wrapper-h1:hover{
    transform: scale(1.2);
}

.Wrapper-ul{

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 3.125rem;
    padding: 2rem;
}

.Wrapper-li{
    position: relative;
}

.Wrapper-a{
    padding: 0.5rem 2rem;

    font-family: var(--tipo-secundaria);
    font-weight: 700;
    font-size: 1.125rem;

    color: var(--color-cuaternario);
    transition: all 0.3s ease 0.s;
}

.Wrapper-span{
    width: 100%;
    height: 2.5rem;

    background-color: var(--color-secundario);
    position: absolute;

    top: 0;
    left: 0;
    z-index: -1;

    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
}

.Wrapper-a:hover{
    color: var(--color-primario);
}

.Wrapper-a:hover ~ .Wrapper-span{
    transform: scaleY(1)
}

.Wrapper-a:active{
    background-color: var(--color-secundario);
    color: var(--color-primario);
}

/* ----- HEADER ----- */

/* ----- BOTÓNES FLOTANTES ----- */

.Slider-vertical{
    position: fixed;
    left: 2vh;
    top: calc(50% - 5rem);

    z-index: 3;
}

.Slider-points{
    display: flex;
    flex-flow: column nowrap;
    position: relative;

    gap: 3.5rem;
}

.Slider-info{
    color: var(--color-terciario);
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    cursor: pointer;

    gap: .625rem;

    transition: all 0.3s ease;
}

.Slider-info.isActive{
    color: var(--color-cuaternario);

    font-weight: 600;
    font-size: 1rem;

}

.Slider-button{
    background-color: var(--color-terciario);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    cursor: pointer;

    transition: all 0.5s ease;
}


.Slider-button.isActive{
    background-color: var(--color-secundario);
    transform: scale(1.5);
    transform-origin: center;
    border-radius: 50%;
}

.Slider-button.translate{
    margin: 0 0 0 2.45rem;
}


/* Como quiero crear un degradado lo que necesito es crear dos círculos en posición absoluta y que uno, que sería el que iría por encima, con el background en color blanco tape dejando 1-2px libre del otro círculo cuyo background tiene degradado, lo que me daría de resultado una línea con degradado. */

.Slider-progress{
    position: absolute;
    width: 12rem;
    height: 12rem;

    border: .125rem solid var(--color-terciario);
    border-radius: 50%;

    left: -9rem;
    top: calc( 50% - 6rem);

    z-index: -1;
}



.Info-info{
    padding: 0 0 0 .5rem;
}

/* ----- BOTONES FLOTANTES ----- */

/* ----- MAIN ----- */

.Main{
    width: 100%;
    height: 280vh;
    overflow: hidden;
}


/* MAIN NATUM CAFE */

.Main-natum{
    height: 100vh;
    padding: 8vh 0 0 0;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: 4.375rem;

}

/* Estilos y dinamismo a los textos */

.Natum-h1{
    font-size: 6.25rem;
    font-family: var(--tipo-secundaria);
    line-height: 4rem;
    text-align: center;

    color: black;
    font-weight: 600;
}


.Natum-p{
    max-width: 31.25rem;
    font-size: 1.25rem;
    font-weight: 300;

    color: var(--color-cuaternario);
    line-height: 1.6em;

    text-align: center;
}

.Natum-span{
    display: block;
    color: var(--color-secundario);
    font-weight: 600;
}

/* Contenedor de las imágenes en versión escritorio */

.Natum-images{
    min-height: 20vh;
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    gap: 3.125rem;
}

/* Estilo y dinamismo para el contenedor de las imágenes y textos */

.Natum-conoce{
    width: 20rem;
    height: 100%;
    position: relative;
    transition: all 0.5s ease;
    border-radius: .3125rem;
    box-shadow: .1rem .1rem .9rem rgba(0, 0, 0, 0.387);

    overflow: hidden;

    animation: slideIn 1s ease;
}

.delay{
    animation: slideIn 1s ease backwards 0.3s;
}

.delay-dos{
    animation: slideIn 1s ease backwards 0.5s;
}

.Conoce-h3{
    opacity: 1;
    font-size: 1.875rem;
    font-family: var(--tipo-secundaria);
    font-weight: 600;
    color: var(--color-primario);

    line-height: 2.5rem;

    max-width: 12.5rem;

    position: absolute;
    left: 2rem;
    top: 30%;
    z-index: 1;

    transition: all 0.5s ease;
}

.Natum-conoce:hover .Natum-img{
    transform: scale(1.2);
}

.Conoce-span{
    background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;

    top: 0;
    left: 0;

    transition: opacity 0.5s ease;
}

.Natum-img{
    width: 200%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}

.Natum-conoce:hover{
    transform: scale(1.05);
}

.Natum-conoce:hover .Conoce-span{
    opacity: 0.7;
}

/* Contenedor de las imágenes en versión mobile */

.Natum-images_mobile{
    width: 100%;
    height: 50vh;

    display: none;
    position: relative;
    justify-self: flex-end;
}

.Natum-conoce_mobile{
    width: 100%;
    height: 100%;

    overflow: hidden;

    position: absolute;
    left: 0;

    opacity: 0;
    transition: opacity 0.5s ease, transform 0.1s ease;
}

.Natum-conoce_mobile.isActive{
    opacity: 1;
    pointer-events: all;
}

.Natum-conoce_mobile:hover .Conoce-h3{
    transform: scale(1.2);
}

.Natum-button{
    position: absolute;
}

.Natum-button.prev{
    top: calc( 50% - 3rem);
    left: 0;

    padding: 0 0 0 10vh;
}

.Natum-button.next{
    top: calc( 50% - 1rem);
    right: 0;

    padding: 0 10vh 0 0;
}

.Natum-svg{
    width: 2.5rem;
    height: 3rem;

    fill: var(--color-primario);
    padding: 0.3rem;

    cursor: pointer;

    transition: transform 0.3s ease, background-color 0.1s ease;
}

.Natum-svg:hover{
    transform: scale(1.2);
}

.Natum-svg:active{
    transform: scale(1);
    background-color: var(--color-cuaternario);
}

.Natum-points{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    cursor: pointer;

    gap: .9375rem;

    position: absolute;
    z-index: 1;

    left: calc(50% - 2.25rem);
    bottom: 10%;

    display: none;
}


.Natum-point{
    background-color: var(--color-terciario);
    height: .625rem;
    width: .625rem;
    border-radius: 50%;
}

.Natum-point.isActive{
    background-color: var(--color-primario);
    height: 1rem;
    width: 1rem;
}

.Natum-point:hover{
    background-color: var(--color-primario);
    transform: scale(1.1);
}

.Natum-fondo{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* MAIN NATUM CAFÉ */

/* MAIN QUE HACEMOS */

.Main-hacemos{
    height: 100vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: 70px;
    position: relative;
}

.Hacemos-wrapper{
    margin: 0 20vh;
    display: grid;
    grid-template-columns: repeat( 3 , 1fr );
    gap: 3.125rem;
}

.Hacemos-h1{
    font-family: var(--tipo-secundaria);
    font-size: 3.75rem;
    line-height: 4rem;

    color: black;

    font-weight: 600;
}

.Hacemos-p{
    max-width: 31.25rem;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-cuaternario);
    text-align: center;
    line-height: 1.6em;
}

.Wrapper-section{
    max-width: 512px;
    height: 20vh;
    background-color:var(--color-secundario);
    box-shadow: 0rem .25rem .75rem 0rem rgba(0, 0, 0, 0.25);
    padding: 3vh;
    border-radius: .625rem;


    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;

    gap: 1.25rem;

    transition: transform 0.4s ease, background-color 0.4s ease;
}

.Wrapper-section:hover{
    background-color: var(--color-cuaternario);
    transform: scale(1.05)
}

.Section-h3{
    font-size: 1.5625rem;
    font-weight: 600;
    font-family: var(--tipo-secundaria);
    color: var(--color-primario);
}

.Section-p{
    font-size: 1rem;
    color: var(--color-primario);
}

.Hacemos-fondo{
    position: absolute;
    top: calc(50% - 40vh);
    left: 0;
    z-index: -1;
}

/* MAIN QUE HACEMOS */

/* MAIN CONTACTO */

.Main-contacto{
    height: 80vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: 3.125rem;
    position: relative;
    overflow: hidden;

    padding: 0 0 20vh 0;
}

.Contacto-h1{
    font-family: var(--tipo-secundaria);
    color: black;
    font-weight: 600;
    font-size: 3.75rem;
    line-height: 4rem;
    text-align: center;
}

.Contacto-p{
    max-width: 31.25rem;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-cuaternario);
    line-height: 1.6em;

    text-align: center;
}

.Contacto-iconos{
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    gap: 2.5rem;
}

.Contacto-svg{
    width: 100%;
    height: 4.375rem;

    transition: all 0.3s ease;
}

.Contacto-svg:hover{
    transform: scale(1.1);
    fill: var(--color-cuaternario);
}


/* MAIN CONTACTO */

/* ----- MAIN ----- */

/* ----- FOOTER ----- */

.Footer{
    min-height: 20vh;
    width: 100%;

    background-color: var(--color-cuaternario);

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    padding: 10vh;
}

.Footer-wrapper{
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-disween;
    align-items: center;
}

.Footer-a{
    font-family: var(--tipo-secundaria);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primario);
}

.Footer-h1{
    font-size: 2.5rem;
}


/* ----- FOOTER ----- */

/* ------ RESPONSIVE -------*/

@media (max-width: 1450px){
    .Slider-vertical{
        top: 25%;
    }

}


@media (max-width: 1300px){

    .Main-hacemos{
        height: auto;
        padding: 10vh;
    }

    .Hacemos-wrapper{
        grid-template-columns: repeat( 1 , 1fr );
        row-gap: 1.25rem;
        justify-content: space-disween;
        width: 100%;

        margin: 0;
    }

    .Wrapper-section{
        margin: auto;
    }

    .Conoce-h3{
        text-align: center;
    }

    .Natum-images{
       margin: 5vh;
       width: 100%;
    }

}

@media (max-width: 1200px){

    .Main-natum{
        justify-content: space-disween;
    }

    .Header-wrapper{
        justify-content: space-disween;
    }

    .Header-button{
        display: block;
    }

    .Wrapper-ul{
        display: none;
    }

    .Wrapper-h1{
        font-size: 2.5rem;
    }

    .Slider-vertical{
        display: none;
    }

    .Natum-images{
        display: none;
    }

    .Natum-images_mobile{
        display: block;
    }

    .Natum-points{
        display: flex;
    }


    .Conoce-h3{
        font-size: 2.1875rem;
        opacity: 1;
        top: calc(50% - 4rem);
        left: calc(50% - 6rem);
    }

}

@media (max-width: 1100px){
    .Wrapper-section{
        width: 100%;
    }

    .Natum-h1{
        font-size: 5rem;
        padding: 15vh 0 0 0;
    }

    .Hacemos-h1{
        font-size: 3rem;
    }

    .Contacto-h1{
        font-size: 3rem;
    }

    .Main-hacemos{
        height: auto;
        padding: 15vh 5vh 0 5vh;
        gap: 5vh 0;
    }

}

@media (max-width: 800px){

    .Header-wrapper{
        padding: 2vh;
    }

    .Main-natum{
        gap: 3.125rem;
    }

    .Natum-h1{
        font-size: 4rem;
        line-height: 6.875rem;
    }

    .Natum-p{
        padding: 0 5vh;
    }

    .Natum-span{
        text-align: center;
    }

    .Natum-conoce_mobile{
        width: 100%;
        height: 100%;
        justify-self: flex-end;
    }

    .Natum-button.prev{
        padding: 0;
        top: 50%;
    }

    .Natum-button.next{
        padding: 0;
        top: 50%;
    }

    .Natum-svg{
        height: 3.75rem;
        width: 3.75rem;
        background-color: transparent;
    }

    .Natum-svg:hover{
        transform: scale(1);
    }


    .Section-p{
        max-width: 18.75rem;
    }



    .Hacemos-points{
        display: flex;
    }

    .Main-contacto{
        gap: 5vh 0;
    }

    .Contacto-h1{
        padding: 0 5vh;
    }

    .Contacto-p{
        padding: 0 5vh;
    }

    .Contacto-img{
        height: 130%;
        top: -10%;
    }

    .Footer{
        padding: 5vh;
    }

    .Footer-wrapper{
        flex-flow: column nowrap;
        gap: 3rem;

    }

}

@media (max-width: 500px){

    .Main-natum{
        gap: 1rem;
        align-items: flex-start;
    }

    .Natum-h1{
        max-width: 18.75rem;
        font-size: 3.75rem;
        line-height: 4rem;
        padding: 5vh 2vh 0 2vh;

        text-align: left;
    }

    .Natum-p{
        text-align: left;
        padding: 2vh;
    }

    .Natum-span{
        text-align: left;
    }

    .Natum-images{
        width: 300%;
        justify-content: space-disween;
        padding: 0;
        margin: 0;
    }

    .Natum-img{
        object-fit: cover;
    }

    .Main-hacemos{
        padding: 10vh 2vh 0  2vh;
        align-items: flex-start;
    }

    .Hacemos-h1{
        max-width: 20rem;
        line-height: 4rem;
        text-align: left;
    }

    .Hacemos-p{
        text-align: left;
    }

    .Main-contacto{
        padding: 10vh 2vh;
        align-items: flex-start;
    }

    .Contacto-h1{
        text-align: left;
        font-size: 2.5rem;
        line-height: 3rem;
        padding: 0;
    }


    .Contacto-p{
        text-align: left;
        padding: 0;
    }

    .Contacto-iconos{
        width: 70%;
        margin: 0;
    }
}

/* fin responsive pagina home */

/* MANUAL DE IDENTIDAD */

/*  MAIN MANUAL */

.Main-manual{
    width: 100%;
    max-width: 62.5rem;
    height: 100vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 4.375rem;

    margin: auto;
    padding: 2vh;
}

.Manual-h1{
    width: 100%;
    font-size: 6.25rem;
    line-height: 6.875rem;
    color: black;
    font-family: var(--tipo-secundaria);
    font-weight: 600;
}

.Manual-p{
    color: var(--color-cuaternario);
    font-size: 1.25rem;
    line-height: 1.6rem;
    font-family: var(--tipo-principal);
}

/*  MAIN MANUAL */

/*  MAIN TIPOGRAFIAS */

.Main-tipografias{
    max-width: 62.5rem;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;

    gap: 3.125rem;
    padding: 2vh;
    margin: auto;
}

.Tipografias-h1{
    width: 100%;
    font-size: 6.25rem;
    line-height: 6.875rem;
    color: black;
    font-family: var(--tipo-secundaria);
    font-weight: 600;
}

.Tipografias-h2{
    width: 100%;
    font-size: 3.75rem;
    line-height: 4.375rem;
    color: black;
    font-family: var(--tipo-secundaria);
    font-weight: 600;
}

.Tipografias-h3{
    width: 100%;
    font-size: 1.875rem;
    color: black;
    font-family: var(--tipo-secundaria);
    font-weight: 600;
}

.Tipografias-p{
    width: 100%;
    font-size: 1.25rem;
    color: black;
    font-family: var(--tipo-principal);
    font-weight: 400;
}

.Tipografias-colores{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    gap: 1.25rem;
}

.Colores-principal{
    width: 10rem;
    height: 10rem;
    background-color: var(--color-secundario);

    border-radius: .3125rem;
    padding: 2rem ;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-start;

    gap: 1rem;
}

.gris-verdoso{
    background-color: var(--color-terciario);
}

.gris{
    background-color: var(--color-cuaternario);
}

.negro{
    background-color: black;
}

.Colores-svg{
    width: 2rem;
    height: 2rem;
    fill: var(--color-primario);
}

.Colores-h4{
    font-family: var(--tipo-secundaria);
    font-size: 1.25rem;
    font-weight: 600;

    color: var(--color-primario);

}

/*  MAIN TIPOGRAFIAS */

/*  MAIN IMAGENES */

.Main-imagen{
    max-width: 93.75rem;
    min-height: 80vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: 4.375rem;
    padding: 2vh;
    margin: auto;
}

.Imagen-h1{
    width: 100%;
    font-size: 6.25rem;
    line-height: 6.875rem;
    color: black;
    font-family: var(--tipo-secundaria);
    font-weight: 600;

    text-align: center;
}

.Grid-imagenes{
    max-width: 62.5rem;
    display: flex;
    flex-flow: row nowrap;
}

.Img-grid{
    width: auto;
    height: 100%;
    object-fit: contain;

    margin: auto;
}

/*  MAIN IMAGENES */

/*  RESPONSIVE MANUAL IDENTIDAD */

@media(max-width: 1500px){

    .Main-imagen{
        height: auto;
    }

}

@media (max-width:1300px){
    .Main-manual{
        padding: 15vh 10vh 10vh 10vh;
    }

    .Main-tipografias{
        padding:0 10vh;
    }

    .Main-imagen{
        gap: 1.875rem;
    }

    .Grid-imagenes{
        width: 20rem;
        display: flex;
        flex-flow: column nowrap;
    }

    .Imagen-movil{
        height: 18.75rem;
    }

}

@media (max-width:800px){
    .Main-manual{
        padding: 15vh 2vh 2vh 2vh;
    }

    .Main-tipografias{
        padding: 2vh;
    }
}

@media(max-width: 700px){
    .Tipografias-colores{
        display: grid;
        grid-template-columns: repeat( 2 , 1fr);
        margin: auto;
    }
}

@media (max-width:500px){
    .Main-manual{
        padding: 15vh 2vh 2vh 2vh;
    }

    .Main-tipografias{
        padding: 2vh;
    }

    .Manual-h1{
        font-size: 5rem;
        line-height: 5.625rem;
    }

    .Tipografias-h1{
        font-size: 3.75rem;
        line-height: 3.75rem;
    }

    .Tipografias-h2{
        font-size: 2.5rem;
    }

    .Tipografias-h3{
        font-size: 1.875rem;
    }

    .Imagen-h1{
        font-size: 3.75rem;
    }
}

/*  RESPONSIVE MANUAL IDENTIDAD */