@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://use.typekit.net/oho0yfg.css");

@font-face {
    font-family: 'Engravers LH Bold Face';
    src: url('../fonts/EngraversLH-BoldFace.eot');
    src: url('../fonts/EngraversLH-BoldFace.eot?#iefix') format('embedded-opentype'),
        url('../fonts/EngraversLH-BoldFace.woff2') format('woff2'),
        url('../fonts/EngraversLH-BoldFace.woff') format('woff'),
        url('../fonts/EngraversLH-BoldFace.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Chisel W01 Regular";
    src: url("https://db.onlinewebfonts.com/t/9f687ec756f3b6201a1924e43b8c1705.eot");
    src: url("https://db.onlinewebfonts.com/t/9f687ec756f3b6201a1924e43b8c1705.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/9f687ec756f3b6201a1924e43b8c1705.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/9f687ec756f3b6201a1924e43b8c1705.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/9f687ec756f3b6201a1924e43b8c1705.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/9f687ec756f3b6201a1924e43b8c1705.svg#Chisel W01 Regular")format("svg");
    font-display: swap;
}



body {
    font-family: "sweet-sans-pro", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

header {
    transition: all 0.3s ease;
}

.engravers {
    font-family: "Engravers LH Bold Face", serif;
}

.chisel {
    font-family: "Chisel W01 Regular", serif;
}

.lh-08 {
    line-height: 0.8;
}

.ls-2 {
    letter-spacing: 2px;
}

.ls-4 {
    letter-spacing: 4px;
}

.fs-08 {
    font-size: 0.8rem;
}

.text-expanded {
    display: inline-block;
    transform: scaleX(1.3);
    transform-origin: center;
}

.text-justify {
    text-align: justify;
}


/* Cuando el header tiene bg-black, TODOS los links (sean link-dark o link-custom) 
   se ven como link-custom */
header.bg-black .link-black,
header.bg-black .link-custom {
    color: #f3ead7 !important;
    text-decoration: none;
    opacity: .7;
}

header.bg-black .link-black:hover,
header.bg-black .link-custom:hover {
    opacity: 1;
}

.link-custom {
    color: #f3ead7 !important;
    text-decoration: none;
    opacity: .7;
}

.link-custom:hover {
    opacity: 1;

}

.link-black {
    color: #000;
    opacity: .7;
}

.link-black:hover {
    color: #000;
    opacity: 1;
}

.text-custom {
    color: #f3ead7 !important;
}

.active-wine-link {
    text-decoration: underline !important;
    font-weight: 600;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.text-custom-2 {
    color: #801f1e !important;
}

.text-custom-3 {
    color: #443d36 !important;
}

.bg-custom {
    background-color: #f6f2e7 !important;
}

.bg-custom-2 {
    background-color: #801f1e !important;
}

.bg-custom-3 {
    background-color: #443d36 !important;
}

.btn-custom {
    background-color: #f6f2e7 !important;
}

.btn-custom:hover {
    background-color: #801f1e !important;
    color: #f6f2e7 !important;
}

.btn-custom-2 {
    background-color: #f6f2e7 !important;
    color: #443d36;
}

.btn-custom-2:hover {
    background-color: #443d36 !important;
    color: #f6f2e7 !important;
}


.btn-custom-3 {
    background-color: #443d36 !important;
    color: #f6f2e7 !important;
}

.btn-custom-3:hover {
    background-color: #f6f2e7 !important;
    color: #443d36 !important;
}


.btn-custom-4 {
    background-color: #801f1e !important;
    color: #f6f2e7 !important;
}

.btn-custom-4:hover {
    background-color: #f6f2e7 !important;
    color: #801f1e !important;
}

.border-custom {
    border-color: #f6f2e7 !important;
}



.custom-form .form-control {
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid !important;
    border-color: rgba(246, 242, 231, .5) !important;
    color: #f6f2e7 !important;
}

.custom-form .form-control::placeholder {
    color: rgba(246, 242, 231, .6) !important;
}

.custom-form .form-control:focus,
.custom-form .form-control:active {
    border-color: rgba(246, 242, 231, 1) !important;
}


.bg-quienes-somos {
    background-image: url(../img/bg-quienes-somos.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-gradient-1 {
    background: #916425;
    background: radial-gradient(circle, rgba(145, 100, 37, 1) 0%, rgba(0, 0, 0, 1) 60%);
}

.bg-gradient-2 {
    background: #841800;
    background: radial-gradient(circle, rgba(132, 24, 0, 1) 0%, rgba(0, 0, 0, 1) 65%);
}


.logo-dark {
    filter: brightness(0) invert(10%);
}

header.bg-black .logo-dark {
    filter: none;
}


.menu .dropdown-menu {
    position: absolute !important;
    background-color: #000 !important;
    min-width: max-content;
    transform: translate3d(0px, 72px, 0px) !important
        /* Evita que los items se bajen a la siguiente linea */
}

.menu .dropdown-menu.show {
    display: flex !important;
    flex-direction: row;
}




#mobile-menu {
    position: absolute;
    width: 300px;
    top: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.95);
    z-index: 10000;
    height: 100vh;
    font-size: 16px;
}


#mobile-menu ul li ul {

    position: relative !important;
    top: 0;
    border: none;
    padding: 0;
    width: auto;
    background: transparent !important;

}


#mobile-menu ul>li {
    width: 100%;
    line-height: 1em;
    border-top: 1px solid #333;
    padding: 10px 0px
}

#mobile-menu>ul>li a {
    padding: 10px
}

#mobile-menu>ul>li {
    padding: 10px 0;
    margin: 0px 20px
}

#mobile-menu .dropdown-menu {

    transform: translate3d(0px, 10px, 0px) !important
        /* Evita que los items se bajen a la siguiente linea */
}




#carouselHomeWines .carousel-control-next,
#carouselHomeWines .carousel-control-prev {
    top: 50% !important;
}

#carouselHomeWines .carousel-control-next {

    right: 5% !important;
}

#carouselHomeWines .carousel-control-prev {

    left: 5% !important;
}


/* SLIDE EXPERIENCIAS HOME */

.swiper-slide {
    width: 60%;
    /* Ocupa el 70%, dejando 15% visible a cada lado */
    /* height: 400px; */
}


/* Nuestra Historia */

#nuestra-historia-top {
    height: 600px;
    background: url(../img/nuestra-historia-top-bg.png) no-repeat center center;
    background-color: #971a18;
    background-size: cover;
}


/* NUESTROS VINOS */
.nuestros-vinos-top {
    min-height: 240px;
}


.carousel-control-next,
.carousel-control-prev {
    position: absolute;
    top: 130px;
    bottom: auto;
    width: auto;

}

.carousel-control-prev {
    left: 2%;
}

.carousel-control-next {
    right: 2%;
}


.mb-overdark {
    background: rgba(0, 0, 0, .4);
}


/* Contenedor externo: maneja la posición y el float */
.mariposa-top-left {
    position: absolute;
    top: 80%;
    left: 14%;
    animation: floatUpDown 3.5s ease-in-out infinite;
    z-index: 2;
    transform: rotate(30deg) !important;

}

/* La imagen dentro: maneja el aleteo */
.mariposa-top-left img {
    display: block;
    animation: flapWings 0.55s ease-in-out infinite alternate;
}


/* Contenedor externo: maneja la posición y el float */
.mariposa-top-right {
    position: absolute;
    top: 10%;
    right: 12%;
    animation: floatUpDown 3.5s ease-in-out infinite;
    z-index: 2;
    transform: rotate(-20deg) !important;

}

/* La imagen dentro: maneja el aleteo */
.mariposa-top-right img {
    display: block;
    animation: flapWings 0.43s ease-in-out infinite alternate;
}






@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes flapWings {
    0% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0.65);
    }
}

@media (min-width: 768px) {

    .carousel-control-next,
    .carousel-control-prev {

        top: 320px;

    }

    .nuestros-vinos-top {
        min-height: 400px;
    }

    .carousel-control-next,
    .carousel-control-prev {

        top: 240px;


    }

    .carousel-control-prev {
        left: 20%;
    }

    .carousel-control-next {
        right: 20%;
    }

    .mb-overdark {
        background: none;
    }
}