/* DRY = Don´t Repeat Yourself */

/***********************************************************************************/
/******************************** Custom Properties ********************************/
/***********************************************************************************/
@font-face {
    font-family: 'CarosSoft';
    src: url('../../assets/fonts/CarosSoftBlack.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'CarosSoft';
    src: url('../../assets/fonts/CarosSoftHeavy.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'CarosSoft';
    src: url('../../assets/fonts/CarosSoftExtraBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'CarosSoft';
    src: url('../../assets/fonts/CarosSoftBold.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'CarosSoft';
    src: url('../../assets/fonts/CarosSoftMedium.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'CarosSoft';
    src: url('../../assets/fonts/CarosSoft.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'CarosSoft';
    src: url('../../assets/fonts/CarosSoftLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'CarosSoft';
    src: url('../../assets/fonts/CarosSoftThin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}


:root {
    --blanco: #fff;    /* Corporativo */
    --negro: #000;    /* Corporativo */
    
    --blanco-alpha: rgba(255, 255, 255, 0.5);    /* Apha */
    --negro-alpha: rgba(0, 0, 0, 0.9);    /* Apha */

    --gris-1: #3C3C3C;    /* Secundario */
    --gris-2: #5E5E5E;    /* Secundario */
    --gris-3: #808080;    /* Secundario */
    --gris-4: #A2A2A2;    /* Secundario */
    --gris-5: #C3C3C3;    /* Secundario */

    --rojo: #B10000;    /* Auxiliares */
    --rojo-obscuro: #540202;    /* Auxiliares */
    --amarillo: #B18A00;    /* Auxiliares */
    --amarillo-obscuro: #544202;    /* Auxiliares */
    --aqua: #00B091;    /* Auxiliares */
    --aqua-obscuro: #025445;    /* Auxiliares */
    --verde: #00B031;    /* Auxiliares */
    --verde-obscuro: #025419;    /* Auxiliares */
    --azul: #006CB0;    /* Auxiliares */
    --azul-obscuro: #023454;    /* Auxiliares */
    --rosa: #B000A9;    /* Auxiliares */
    --rosa-obscuro: #540251;    /* Auxiliares */

    --font: 'CarosSoft', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    /* Fuente */

    --max-width: 1024px;
    --header-height: 4rem;
}

/***********************************************************************************/
/************************************** Reset **************************************/
/***********************************************************************************/

html {
    box-sizing: border-box;
    font-family: var(--font);
    font-size: 16px;
    color: var(--blanco);
    scroll-behavior: smooth;
    background-image: url('../img/services-background-dark.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

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

body {
    margin: 0;
    overflow-x: hidden;
}

article {
    padding: 1rem;
}

h1, h2, h3, h4, h5, h6{
    margin: 0;
}

h1 {
    font-size: 3rem;
    font-weight: 200;
}

h2 {
    font-size: 2.25rem;
    font-weight: 100;
}

h3 {
    font-size: 2rem;
    font-weight: 200;
}

h4 {
    font-size: 1.875rem;
    font-weight: 300;
}

p {
    line-height: 1.6;
    font-size: 1rem;
    font-weight: 200;
}

a {
    text-decoration: none;
    color: var(--blanco);
    transition: all 0.2s ease-out;
}

a:hover {
    opacity: 0.5;
}

img {
    max-width: 100%;
    height: auto;
}

/***********************************************************************************/
/************************************ Utilities ************************************/
/***********************************************************************************/
.box-shadow{
    box-shadow: 0.25rem 0.25rem 1rem rgba(0, 0, 0, 0.25);
}

.container{
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
}

.none{
    display: none;
}

/***********************************************************************************/
/*********************************** Components ************************************/
/***********************************************************************************/

/************************************** MENU ***************************************/
.menu-btn{
    outline: none;
    border: 0;
    background-color: #00000000;
    cursor: pointer;
}

.menu-btn svg{
    width: 1.5rem;
    fill: var(--blanco);
    padding-top: 0.5rem;
}


.menu{
    padding-top: 2rem;
    position: fixed;
    left: 0;
    bottom: var(--header-height);
    width: 100%;
    height: calc(100vh - var(--header-height));
    background-color: var(--negro-alpha);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

.menu.is-active{
    opacity: 1;
    pointer-events: auto;
}

.menu a{
    padding: 1rem;
    font-size: 2rem;
    width: 90%;
    text-align: center;
    font-weight: 200;
    color: var(--blanco);
    transition: all 0.2s ease-out;
}

.menu-logo{
    width: 10rem;
    fill: var(--blanco)
}



@media screen and (min-width: 768px) {
    
}

@media screen and (min-width: 1024px) {
    .menu-btn{
        display: none;
    }

    .menu{
        padding: 0;
        position: static;
        width: 100%;
        height: auto;
        opacity: 1;
        pointer-events: auto;
        flex-direction: row;
        background-color: transparent;
    }

    .header .menu .menu-logo{
        display: none;
    }

    .menu a{
        padding: 0 1rem;
        font-size: 1.25rem;
    }

    .menu a:last-child{
        padding-right: 0;
    }
}


/***********************************************************************************/
/*********************************** Site styles ***********************************/
/***********************************************************************************/

/******************************* MÉTODO PRENSA FRANCESA *******************************/

.metodo-prensa-francesa h1, h2{
    text-align: center;
    margin: 1rem 0;
}

.metodo-prensa-francesa .description .img-container{
    width: 100%;
    text-align: center;

}

.metodo-prensa-francesa img{
    margin: 2rem 0;
    width: 100%;
    max-width: 400px;
}

@media screen and (min-width: 768px) {
    .metodo-prensa-francesa h2{
        margin-bottom: 2rem;
    }

    .metodo-prensa-francesa .description{
        height: 100%;
        min-height: 60vh;
    }

    .metodo-prensa-francesa img {
        float: right;
        margin: 0 0 0 1.5rem;
        max-width: 50%;
        width: auto;
        height: 400px;
    }
}

@media screen and (min-width: 1024px) {
    .metodo-prensa-francesa .container{
        height: 100%;
    }
}

/******************************* MÉTODO CHEMEX *******************************/

.metodo-chemex h1, h2{
    text-align: center;
    margin: 1rem 0;
}

.metodo-chemex .description .img-container{
    width: 100%;
    text-align: center;

}

.metodo-chemex img{
    margin: 2rem 0;
    width: 100%;
    max-width: 400px;
}

@media screen and (min-width: 768px) {
    .metodo-chemex h2{
        margin-bottom: 2rem;
    }

    .metodo-chemex .description{
        height: 100%;
        min-height: 60vh;
    }

    .metodo-chemex img {
        float: right;
        margin: 0 0 0 1.5rem;
        max-width: 50%;
        width: auto;
        height: 400px;
    }
}

@media screen and (min-width: 1024px) {
    .metodo-chemex .container{
        height: 100%;
    }
}