:root{
    --text_gray: rgba(108, 108, 108, 1);
    --text_gray_light: rgb(139, 139, 139);
    --text_primary: rgba(159, 63, 28, 1);
    --text_primary_light: rgba(162, 60, 32, 1);
    --green_encino: rgba(1, 53, 42, 1);
}

.modal-content{
    border-radius: 0.75em;
}
.badge-compras{
    border: 2px solid var(--text_primary) !important;
    background-color: var(--text_primary) !important;
    bottom: -16px !important;
    right: -14px !important;
    z-index: 2;
}

.z1{z-index: 1;}
.z2{z-index: 2;}
.z3{z-index: 3;}

.none{display: none !important;}
.no-margin{margin: 0;}
.no-padding{padding: 0;}
.no-border{border: none !important;}
.div-center{vertical-align: middle; display: flex !important; justify-content: center;}
.text-center{text-align: center;} 
.text-left{text-align: left;} 
.text-right{text-align: right;} 
.line-normal{line-height: normal !important;}


.center-item{
    margin: auto !important;
}

.center-horizontal{
    margin-inline: auto !important;
}


.center-vertical{
    margin-block: auto !important;
}

.divider{
    height: 4px;
    background-color: var(--text_primary);
}

/* FONT - ScothBrace */

    @font-face {font-family: 'ScothBrace'; src: url('fonts/scoth/ScothBrace-Regular.ttf') format('opentype');} 

/* FONT - Baskerville */

    @font-face {font-family: 'Baskerville-Bold'; src: url('fonts/baskerville/LibreBaskerville-Bold.otf') format('opentype');} 
    @font-face {font-family: 'Baskerville-Italic'; src: url('fonts/baskerville/LibreBaskerville-Italic.otf') format('opentype');} 
    @font-face {font-family: 'Baskerville-Regular'; src: url('fonts/baskerville/LibreBaskerville-Regular.otf') format('opentype');} 

/* FONT - Humble Craftman */

    @font-face {font-family: 'Humble'; src: url('fonts/humble/HumbleCraftman-Regular.ttf') format('truetype');} 

/* FONT - Chanticleer Roman */

    @font-face {font-family: 'Chanticleer Roman'; src: url('fonts/chanticleer/chanticleerroman.regular.ttf') format('truetype');} 
    @font-face {font-family: 'Chanticleer Roman Bold'; src: url('fonts/chanticleer/chanticleerroman.bold.ttf') format('truetype');} 

/* FONT - Chanticleer */

    @font-face {font-family: 'Chanticleer'; src: url('fonts/chanticleer/chanticleer.ttf') format('truetype');} 

/* FONT - PP Editorial Old */

    @font-face {font-family: 'PPEditorialOld-Italic'; src: url('fonts/pp_editorial_old/PPEditorialOld-Italic.otf') format('opentype');} 
    @font-face {font-family: 'PPEditorialOld-Regular'; src: url('fonts/pp_editorial_old/PPEditorialOld-Regular.otf') format('opentype');} 
    @font-face {font-family: 'PPEditorialOld-Ultrabold'; src: url('fonts/pp_editorial_old/PPEditorialOld-Ultrabold.otf') format('opentype');} 
    @font-face {font-family: 'PPEditorialOld-UltraboldItalic'; src: url('fonts/pp_editorial_old/PPEditorialOld-UltraboldItalic.otf') format('opentype');} 
    @font-face {font-family: 'PPEditorialOld-Ultralight'; src: url('fonts/pp_editorial_old/PPEditorialOld-Ultralight.otf') format('opentype');} 
    @font-face {font-family: 'PPEditorialOld-UltralightItalic'; src: url('fonts/pp_editorial_old/PPEditorialOld-UltralightItalic.otf') format('opentype');} 

/* FONT - BodoniModa_9pt */

    @font-face {font-family: 'Bodoni Black'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-Black.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni BlackItalic'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-BlackItalic.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni Bold'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-Bold.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni BoldItalic'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-BoldItalic.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni ExtraBold'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-ExtraBold.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni ExtraBoldItalic'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-ExtraBoldItalic.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni Italic'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-Italic.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni Medium'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-Medium.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni MediumItalic'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-MediumItalic.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni Regular'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-Regular.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni SemiBold'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-SemiBold.ttf') format('truetype'); } 
    @font-face {font-family: 'Bodoni SemiBoldItalic'; src: url('fonts/Bodoni_Moda/BodoniModa_9pt-SemiBoldItalic.ttf') format('truetype'); } 

.sidenav-encino{
    color: var(--text_primary);
    font-size: 2.4em !important;
}


.optiones-menu{
    width: 80%;
    position: absolute;
    display: flex;
    justify-content: center;
    margin-inline: 10%;
}

.option-menu{
    color: var(--text_gray);
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.option-menu span {
    font-family: 'Baskerville-Italic';
    font-weight: 600;
    font-size: 1.3em;
    padding-inline: 0.25em;
    margin-inline: 0.5em;
}

.option-menu:hover{
    color: var(--text_primary);
}

.active.option-menu span{
    color: var(--text_primary);
    border-bottom: 1px solid var(--text_primary);
}

.icon-encino{
    position: relative;
}

.icon-encino svg{
    width: 25px;
    height: 25px;
    fill: var(--text_gray);
}

.icon-carrito-cantidad{

}

.div-gradient-encino{
    position: relative;
    background: rgb(183,96,57);
    background: linear-gradient(90deg, 
    rgba(183,96,57,1) 0%, 
    rgba(131,70,41,1) 5%, 
    rgba(169,84,47,1) 11%, 
    rgba(212,119,66,1) 18%, 
    rgba(242,149,96,1) 26%, 
    rgba(244,153,110,1) 32%, 
    rgba(244,153,110,1) 41%, 
    rgba(234,133,80,1) 47%, 
    rgba(173,88,51,1) 57%, 
    rgba(161,78,43,1) 65%, 
    rgba(179,92,53,1) 71%, 
    rgba(193,92,53,1) 77%, 
    rgba(193,102,59,1) 81%, 
    rgba(161,78,43,1) 86%, 
    rgba(123,60,29,1) 94%, 
    rgba(171,88,45,1) 99%);
    width: 100%;
    height: 6px;
}

.mb10em{margin-bottom: 7.5vw;}
.mb05em{margin-bottom: 3.75vw;}

.bg-pageEncino{
    background-image: url(../img/bg_desk.png); background-color: white; background-repeat: no-repeat;  background-size: cover;
}

.bg-page{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
}

.card-mapa{
    position: relative;
    width: 100%;
    background-image: url(img/textura_sepia.jpg); background-repeat: no-repeat;  background-size: 100% 100%; background-attachment: fixed;
}

/* .pin{
    width: 1.6vw;
    height: 1.6vw;
    cursor: pointer;
    border-radius: 2vw;
    position: absolute;
    font-family: 'Baskerville-Bold';
    color: rgba(110, 32, 32, 1);
    overflow: hidden;
    transition: all 0.2s;
    z-index: 0;
}

.pin > .numero{
    width: 1.6vw;
    height: 1.6vw;
    text-align: center;
    margin: auto;
    line-height: 1.6vw;
    position: absolute;
    left: 0; top: 0;
    background-color: white;
    color: rgba(110, 32, 32, 1);
    border: 1px solid rgba(110, 32, 32, 1);
    border-radius: 2vw;
    transition: all 0.2s;
} */

.btn-close-pin{
    font-family: 'Baskerville-Regular';
    font-size: 0.58vw;
    color: white;
    text-align: center;
    border: 1px solid white;
    margin-top: -0.15vw;
    margin-right: -0.5vw;
    transition: all 0.2s;
    height: 1.35vw;
}

.btn-close-pin:hover{
    background-color: white;
    color: var(--text_primary);
}

.active.pin{
    width: 17vw;
    height: 16vw;
    border-radius: 0;
    color: white;
    z-index: 1;
    padding-inline: 1vw;
    padding-block: 0.8vw;
}

.active.pin > .numero{
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
}

.content-data{
    margin-top: -0.8vw;
    margin-left: 0.6vw;
    padding-inline: 1.2vw;
    background-color: rgba(110, 32, 32, 1);
    padding-block: 0.9vw;
}

.active.pin > .content-data > .header{
    width: 100%; 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: start;
}

.active.pin > .content-data > .header > :first-child {
    justify-self: start; /* Alinea el primer elemento a la izquierda */
}

/* Estilos para el segundo elemento del grid */
.active.pin > .content-data > .header > :last-child {
    justify-self: end; /* Alinea el segundo elemento a la derecha */
}

.active.pin > .content-data > .datos{
    font-size: 0.7vw;
    text-align: center;
    margin-block: 3.5vw;
}

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

/* DESPLAZAMIENTO VERTICAL */
    .content-vertical-indicador{
        width: 300px; height: 300px; background-color: white;
        padding-inline: 5%;
    }

    .item-v-indicador{
        width: 8px;
        position: relative;
    }

    .item-v-indicador > label{
        position: absolute;
        right: 0; top: 0;
        font-family: 'Baskerville-Regular';
        color: var(--text_primary); 
        margin-right: 1.5em;
        margin-top: -6px;
    }

    /* circular indicador activo */
    .active.item-v-indicador > div:nth-child(1){
        width: 8px; height: 8px; margin-block: 25px; background-color: var(--text_primary); 
        border-radius: 10px;
        transition: all 0.2s;
    }

    /* linea indicador activo */
    .active.item-v-indicador > div:nth-child(2){
        width: 2px; height: 65px; margin-inline: auto; border-radius: 8px; background-color: var(--text_primary);
        transition: all 0.2s;
    }


    /* circular indicador inactivo */
    .item-v-indicador > div:nth-child(1){
        width: 8px; height: 8px; margin-block: 25px; background-color: var(--text_gray_light); 
        border-radius: 10px;
        transition: all 0.2s;
    }

    /* linea indicador inactivo */
    .item-v-indicador > div:nth-child(2){
        width: 2px; height: 0px; margin-inline: auto; border-radius: 8px; background-color: var(--text_primary);
        transition: all 0.2s;
    }

/* DESPLAZAMIENTO HORIZONTAL */
.content-horizontal-indicador{
    display: flex;
    justify-content: center;
}

.item-h-indicador{
    height: 8px;
    position: relative;
    display: flex;
}

.item-h-indicador > label{
    position: absolute;
    right: 0; top: 0;
    font-family: 'Baskerville-Regular';
    color: var(--text_primary); 
    margin-right: 1.5em;
    margin-top: -6px;
}

/* circular indicador activo */
.active.item-h-indicador > button:nth-child(1){
    width: 8px; height: 8px; margin-left: 25px; background-color: var(--text_primary); 
    border-radius: 10px;
    transition: all 0.2s;
}

/* linea indicador activo */
.active.item-h-indicador > div:nth-child(2){
    width: 65px; height: 2px; margin-block: auto; margin-left: 25px; border-radius: 8px; background-color: var(--text_primary);
    transition: all 0.2s;
}


/* circular indicador inactivo */
.item-h-indicador > button:nth-child(1){
    width: 8px; height: 8px; margin-left: 25px; background-color: var(--text_gray_light); 
    border-radius: 10px;
    transition: all 0.2s;
}

/* linea indicador inactivo */
.item-h-indicador > div:nth-child(2){
    width: 0px; height: 2px; margin-block: auto; margin-left: 0px; border-radius: 8px; background-color: var(--text_primary);
    transition: all 0.2s;
}

button {
    border: none;
    margin: 0;
    padding: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    /* Puedes seguir agregando más propiedades para anular otros estilos */
}

button:focus {
    outline: none;
    background-color: none;
}

/* .btn-encino{
    font-family: 'Baskerville-Regular';
    font-size: 0.58vw;
    color: white;
    text-align: center;
    border: 1px solid white;
    padding-block: 0.7vw;
    transition: all 0.2s;
}

.btn-encino:hover{
    background-color: white;
    color: var(--text_primary);
}

.btn-encino-primary{
    font-family: 'Baskerville-Regular';
    font-size: 0.58vw;
    color: white;
    text-align: center;
    background-color: var(--text_primary);
    padding-block: 0.7vw;
    padding-inline: 1.5vw;
    transition: all 0.2s;
}

.btn-encino-primary:hover{
    background-color: white;
    color: var(--text_primary);
} */



/* FOOTER */


.page-footer{
    background-color: var(--text_primary);
    margin-top: 5vw !important;

}

.page-footer .footer-copyright{
    background-color: var(--text_primary);
}

.text-footer-encino{
    font-family: 'Baskerville-Regular';
    margin: 0;
    font-size: 18px;
}


/* PAGE - VINOS */

.lista-vinos{

}

.lista-vinos > div{
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.lista-vinos > div > img{
    width: 55vw;
    margin-top: 4vw;
}

.data-vino{
    padding-inline: 4vw;
    padding-block: 7vw;
}

.title-vino{
    width: 100%;
    position: relative;
    margin-inline: 2.7vw;
    margin-block: 3vw;
}

.title-vino section{
    width: 2vw;
    height: 3px;
    background-color: var(--green_encino);
    border-radius: 3px;
    position: absolute;
    bottom: -0.3vw;
}

.title-vino h5{
    font-family: 'Baskerville-Regular';
    color: var(--green_encino);
    letter-spacing: 6px;
    font-size: 1.4vw;
}

.left.title-vino section{left: 0;} 
.left.title-vino h5{text-align: left;} 

.right.title-vino section{right: 0;} 
.right.title-vino h5{text-align: right;} 


.text-vino{
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    font-family: 'Baskerville-Regular';
    font-size: 0.8vw;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(157, 70, 28, 1);
    margin-inline: 7%;
    padding-inline: 1vw;
    padding-block: 0.45vw;
}

.text-vino > p:nth-child(1){
    text-align: left;
}

.text-vino  >p:nth-child(2){
    text-align: right;
    font-size: 0.8vw;
}



.text-vino-premios{
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    font-family: 'Baskerville-Regular';
    font-size: 0.8vw;
    letter-spacing: 1px;
    margin-inline: 7%;
    padding-inline: 1vw;
    padding-block: 0.45vw;
}

.text-vino-premios > p{
    text-align: left;
}

.text-vino-premios  > div{
    text-align: right;
}

.text-vino-premios  > div > img{
    width: 4vw;
}



/* WIDTH'S */
.w100{width: 100% !important;}
.w95{width: 95% !important;}
.w90{width: 90% !important;}
.w85{width: 85% !important;}
.w80{width: 80% !important;}
.w75{width: 75% !important;}
.w70{width: 70% !important;}
.w65{width: 65% !important;}
.w60{width: 60% !important;}
.w55{width: 55% !important;}
.w50{width: 50% !important;}
.w45{width: 45% !important;}
.w40{width: 40% !important;}
.w35{width: 35% !important;}
.w30{width: 30% !important;}
.w25{width: 25% !important;}
.w20{width: 20% !important;}
.w15{width: 15% !important;}
.w10{width: 10% !important;}
.w05{width: 05% !important;}

/* HEIGTH'S */

.h100{height: 100% !important;}
.h95{height: 95% !important;}
.h90{height: 90% !important;}
.h85{height: 85% !important;}
.h80{height: 80% !important;}
.h75{height: 75% !important;}
.h70{height: 70% !important;}
.h65{height: 65% !important;}
.h60{height: 60% !important;}
.h55{height: 55% !important;}
.h50{height: 50% !important;}
.h45{height: 45% !important;}
.h40{height: 40% !important;}
.h35{height: 35% !important;}
.h30{height: 30% !important;}
.h25{height: 25% !important;}
.h20{height: 20% !important;}
.h15{height: 15% !important;}
.h10{height: 10% !important;}
.h05{height: 05% !important;}