/* IMPORTS */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Economica:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {
    font-family: 'Norwester';
    src: url('../fonts/Norwester.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* AcuminPro Font Family */
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AcuminPro';
    src: url('../fonts/AcuminPro-UltraBlack.ttf') format('truetype');
    font-weight: 950;
    font-style: normal;
    font-display: swap;
}
/* HighVoltage Font */
@font-face {
    font-family: 'HighVoltage';
    src: url('../fonts/HighVoltageRough.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* HighVoltage Heavy Font */
@font-face {
    font-family: 'HighVoltageHeavy';
    src: url('../fonts/HighVoltageRough-Heavy.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* GENERAL STYLES */

:root {
    --main-bg-color: #e0ceba;
    --main-bg-light-color: #222;
    --main-details-color: #8c8273;
    --main-details-dark-color: #5d4b3b;
    --main-font-color: #251e18;
    --main-details-darker-color: #392e24;
}

:root {
    --base1: #e0ceba; /* bg-color */
    --base2: #8c8273; /* details-color */
    --base3: #5d4b3b; /* details-dark-color */
    --base4: #392e24; /* details-darker-color */
    --base5: #251e18; /* font-color */
}

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: 'AcuminPro', sans-serif;
    font-weight: 600;
    /* font-family: 'Norwester', sans-serif; */
}

/* Tamaño y posicionamiento */
.cnt {align-items: center; justify-content: center;}
.cntlft {align-items: center; justify-content: flex-start;}
.flr {display: flex; flex-direction: row;}
.flc {display: flex; flex-direction: column;}
.flrr {display: flex; flex-direction:row-reverse;}
.grd { display:grid; }
.grda1 {grid-area: 1 / 1 / 1 / 1;}
.w100 {width: 100%;}
.w90 {width: 90%;}
.w80 {width: 80%;}
.w70 {width: 70%;}
.w50 {width: 50%;}
.w33 {width: calc(100%/3);}
.w25 {width: 25%;}
.fs {width: 100%; height: 100%;}
.mainCont {width: 70%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.leftAl {text-align: initial;}

/* Texto */
.b {font-weight: bold;}
.tac {text-align: center;}
.hili {font-weight: 800; color: var(--main-details-darker-color)}
h1, h2, h3 { margin: 15px; color: var(--main-details-dark-color); font-family: 'HighVoltage', sans-serif; font-weight: 400; text-transform: uppercase; text-align: center; }
h1 { font-size: 50px; }
h2 { font-size: 40px; }
h3 { font-size: 30px; }
p {padding: 5px 0; text-align: center; font-weight: 600;}

/* Display */
.md {display: none;}
.hidden { display: none; }
.show { display: flex; }

/* Links */
a:link, a:visited, a:hover, a:active { text-decoration: none; color: inherit;}

/* Divisor */
hr { width: 90%; height: 1px; background-color: transparent; border: 1px solid var(--main-details-color); }

/* Body */
body {
    background-color: var(--main-bg-color);
    background: linear-gradient( rgba(224, 206, 186, 0.5), rgba(224, 206, 186, 0.5) ), url(../images/bg-tree-color.jpg); 
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    color: var(--main-font-color);
    /* background-color: var(--main-bg-color);
    background-image: url(../images/bg-texture.png); 
    background-size: contain;
    background-repeat: repeat;
    background-attachment: fixed;
    color: var(--main-details-color); */
}

/* AGE SELECTOR */

#ageSelectorCont {
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--main-details-darker-color);
    background-image: url(../images/bg-texture.png); 
    z-index: 9999;
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    transition: opacity 1s ease-in-out;
    color: var(--main-bg-color);
}
#ageSelectorCont > * { text-align: center; color: var(--main-bg-color); }
#ageSelectorCont > img { width: 200px; }
#ageSelectorCont > p { font-size: 30px; margin: 15px; }
.ageBtn {
    font-size: 50px;
    padding: 15px;
    margin: 15px;
    width: 100px;
    text-align: center;
    background-color: rgba(247, 198, 92, 0.2);
    border-radius: 10px;
    cursor: pointer;
}



/* NAV MENU */

#menuResp { display: none; }
#menuRespMainBtn { display: none }

nav {
    height: 60px;
    width: 100%;
    background-color: var(--main-details-dark-color);
    border-bottom: 2px solid var(--main-details-dark-color);
    color: white;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 99;
}

#logo-nav {
    width: auto;
    margin: auto;
    margin-left: 30px;
    list-style: none;

}

#logo-nav > img { height: 40px; width: auto; }

.nav-btn {
    width: 150px;
    height: 100%;
    list-style: none;
    text-align: center;
    font-size: 15px;
    letter-spacing: 2px;
    background-color: var(--main-details-dark-color);
    color: white;
    border: none;
}

.subnav {
    height: 100%;
    float: left;
    overflow: hidden;
}

nav a:hover, .subnav:hover .nav-btn { background-color: var(--main-details-color); color: white; }

/* NAV SUBMENU */

.subnav-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: var(--main-details-color);
    width: 100%;
    z-index: 1;
    height: 50px;
    font-size: 20px;
    color: white;
}

.nav-subbtn {
    margin: auto 10px;
    height: 100%;
    padding: 0 10px;
    vertical-align: middle;
    color: white;
    text-transform: uppercase;
    font-size: 15px;

}

.nav-subbtn:hover { background-color: #392e24; }

.subnav:hover .subnav-content { display: flex; }

/* FOOTER */

footer {
    width: 100%;
    margin-top: 50px;
    border-top: 1px solid var(--main-details-color);
    background-color: var(--main-details-dark-color);
    padding: 15px;
}

#footerInfo { width: 80%; margin: auto; }

#footerInfo > div { width: 50%; }

#footerText {
    vertical-align: middle;
    color:white;
    text-align: center;
    font-size: 15px;
    letter-spacing: 2px;
}

#socialCont {
    width: 90%;
    margin: 20px 0px;
    flex-wrap: wrap;
}
.socialLink {
    margin: 0px 5px;
    border-radius: 50%;
    height: 70px;
}
.socialImg {
    width: 70px;
    background-color: var(--main-details-color);
    border-radius: 50%;
    box-sizing: border-box;
}

.socialImg:hover { background-color: var(--main-details-dark-color); }

#TerminosYCR {
    width: 80%;
    color: white;
    font-family: sans-serif;
    font-size: 10px;
    text-align: center;
}

/* OBTENE TU FRANQUICIA */

#otfCont { margin: 20px auto; }

.otfP { margin: 10px; }

/* QUIENES SOMOS */

.qsSection { text-align: center; }
.qsSection>p { margin-bottom: 15px; }
#qsFounder { font-weight: 800; font-size: 20px;}

.bgTitleS {
    background-image: url(../images/bg-title-s.png); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 25px; 
    padding: 0px 40px; 
}
.bgTitleL {
    background-image: url(../images/bg-title-l.png); 
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin: 25px; 
    padding: 0px 40px; 
}
.bgTitleColor { color: rgb(255, 226, 167); }

/* FABRICA */

#slider-fabrica {
    width: 90%;
    margin: 20px;
}

/* Mobile 
@media (min-width: 480px) {
    .container {
        padding: 40px;
    }
} */

/* Tablet */
@media (max-width: 768px) {

    nav {
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
    }

    #logo-nav {
        margin: auto 0px;
    }

    .nav-btn {
        height: auto;
        width: 100%;
        margin: auto;
    }

    nav a:hover, .subnav:hover .nav-btn {
        background-color: var(--main-bg-color);
        color: white;
    }

    .nav-subbtn:hover {
        color: black;
        background-color: initial;
    }

    .subnav {
        width: 100%;
        height: auto;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .subnav-content {
        position: inherit;
        flex-direction: column;
        height: auto;
    }

    .nav-subbtn {
        text-align: center;
        width: 100%;
    }
    
    .mainCont{ width: 90%; }
    h1 { font-size: 30px; }
    h2 { font-size: 25px; }
    h3 { font-size: 20px; }
    .bgTitleL { margin: 15px; padding: 0px 20px }
    #footerInfo { flex-direction: column; }
    #footerInfo > div { width: 100%; }
    #socialCont { flex-direction: row; }
    .socialImg { width: 50px; }
}

@media (max-width: 1300px) {
    #menu {display: none;}
    #menuRespMainBtn {
        display: flex;
        height: 60px;
        width: 60px;
        border-radius: 50px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        margin: 10px;
        background-color: var(--main-details-dark-color);
    }
    #menuRespMainBtn img {
        width: 100%;
        height: auto;
    }
    .menuRespMainBtnActive { background-color: var(--main-details-darker-color); }
    #menuResp {
        display: none;
        height: 100dvh;
        min-width: 300px; 
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        padding: 5px;
        background-color: var(--main-details-dark-color);
        color: white;
        border-left: 1px solid var(--main-bg-color);
    }
    #menuResp a {
        background-color: transparent;
        color: white;
        width: 100%;
        border: none;
    }
    #menuResp > a, .menuRespBtn {
        width: 100%;
        margin: 5px;
    }
    .menuRespCont {
        background-color: var(--main-details-color);
        width: 100%;
        display: none;
        border-radius: 10px;
        padding: 5px;
    }
    .menuRespSecTitle {
        font-family: 'HighVoltage', sans-serif;
    }

    .menuRespBtnActive {
        background-color: var(--main-details-darker-color);
        border-radius: 10px;
        border-bottom: 0px;
    }

    #logo-nav { margin: 10px 10px; }

}