@font-face {
    font-family: 'Komika';
    src: url(../fonts/komika-axis/komika_axis.ttf) format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN-Regular';
    src: url(../fonts/d-din/D-DIN.otf) format("opentype");
    font-display: swap;
}

@font-face {
    font-family: 'D-DIN-Bold';
    src: url(../fonts/d-din/D-DIN-Bold.otf) format("opentype");
    font-display: swap;
}

@font-face {
    font-family: 'Always-Lovely';
    src: url(../fonts/always-lovely/always-lovely.ttf) format("truetype");
    font-display: swap;
}

:root {
    --primary-color: #ffec00 !important;
    --primary-color-rgb: 255, 236, 0 !important;
    --secondary-color: #014898 !important;
    --tertiary-color: #e20613 !important;
    --fourth-color: #52c2f0 !important;
    --fourth-color-rgb: 82, 194, 240 !important;
    --fifth-color: #007c36 !important;
    --background-color: #FAFAFA !important;
    --text-color: #1C1E21;

    --white-color: #FCFCFC !important;
    --morewhite-color: #FEFEFE !important;
    --black-color: #111111 !important;
    --gray-color: #999999;

    --w: min(900px, 92vw);
    --h: calc(var(--w) * 0.56);

    --hero-min-h: clamp(70vh, 100vh, 100vh);
    /*--hero-min-h: clamp(70vh, 80vh, 90vh);
    --hero-min-h: clamp(68vh, 78vh, 88vh);*/
    --space-1: .5rem;
    /* 8px */
    --space-2: 1rem;
    /* 16px */
    --space-3: 1.5rem;
    /* 24px */
    --space-4: 2rem;
    /* 32px */
    --space-6: 3rem;
    /* 48px */
    --radius-xl: 1.25rem;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, .18);


    /* Brand-ish palette (adjust to your theme) */
    --brand: #0f8f5b;
    /* natural green */
    --brand-ink: #0a3d29;
    /* deep green for focus ring */
    --text-on-dark: #ffffff;
    /* white */


    /* Background image fallback color */
    --hero-fallback: #0b3d2d;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
}

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

html {
    scroll-behavior: smooth;
}

.bg-light {
    background-color: var(--fourth-color) !important;
}

.bg-white {
    background-color: #FDFDFD !important;
}

.bg-more-white {
    background-color: var(--morewhite-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

.bg-fifth {
    background-color: var(--fifth-color) !important;
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-tertiary {
    color: var(--tertiary-color) !important;
}

.text-fourth {
    color: var(--fourth-color) !important;
}

.text-fifth {
    color: var(--fifth-color) !important;
}

.text-white {
    color: var(--white-color) !important;
}

.text-light {
    color: var(--fifth-color) !important;
}

.text-dark {
    color: var(--black-color) !important;
}

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

.btn-cta {
    background-color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--fifth-color) !important;
}

.btn-cta:hover,
.btn-cta:focus {
    color: var(--white-color) !important;
    background-color: var(--fifth-color) !important;
    border: 2px solid var(--fifth-color) !important;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.btn-primary {
    background-color: var(--fifth-color) !important;
    color: var(--white-color) !important;
    border: 2px solid var(--fifth-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--fifth-color) !important;
    background-color: var(--primary-color) !important;
    border: 2px solid var(--fifth-color) !important;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.font-komika {
    font-family: 'Komika';
}

.font-d-din {
    font-family: 'D-DIN-Regular';
}

.font-d-din-bold {
    font-family: 'D-DIN-Bold';
}

.font-always-lovely {
    font-family: 'Always-Lovely';
    letter-spacing: 0.05rem;
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
}

@media screen and (max-width: 480px) {
    .lead {
        font-size: 1.1rem !important;

    }

}

html,
body {
    background-color: var(--fifth-color);
}

.bg-coming-soon-gradient {
    background: -moz-linear-gradient(180deg, rgba(82, 194, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(82, 194, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(180deg, rgba(82, 194, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#52c2f0", endColorstr="#ffffff", GradientType=1);
}

.bg-logo-patron {
    background: url(../images/products/bg-patron.png) left top repeat;
}

#loading-message {
    display: block;
    position: fixed;
    /*  background-color: rgba(var(--fourth-color-rgb), 1);
        color: #fff;*/
    /*background-color: var(--background-color);
    color: var(--fifth-color);*/
    background-color: #52c2f0;
    color: var(--background-color);
    width: 100%;
    height: 100%;
    border-radius: 5px;
    z-index: 9999;
}

#loading-message > .loading-content {
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.navbar-toggler {
    border: 2px solid transparent;
}

.navbar-toggler i {
    color: var(--primary-color);
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    border: 2px solid var(--white-color);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.navbar-toggler:hover i,
.navbar-toggler:focus i {
    color: var(--white-color);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}

/* Estilo predeterminado para el menú */
.sticky-menu {
    background-color: var(--fourth-color);
    background-color: transparent;
    transition: background-color 0.2s;
    z-index: 99;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--primary-color);
}

.sticky-menu a.nav-link {
    color: var(--primary-color);
}

.sticky-menu a.nav-link:hover,
.sticky-menu a.nav-link:focus,
.sticky-menu a.nav-link:active {
    background-color: var(--primary-color);
    color: var(--fifth-color);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

/*
.sticky-menu #nav-logo {
    transition: opacity 0.5s ease;
    height: 120px;
    width: auto;
}
*/
.sticky-menu #nav-logo {
    transition: opacity 0.5s ease;
    position: absolute;
    top: 10px;
    height: 85px;
    width: auto;
}

.small-size {
    transition: opacity 0.5s ease;
    height: 40px !important;
    width: auto;
}


.sticky-menu.scrolled {
    background-color: var(--fifth-color) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sticky-menu.scrolled a.nav-link {
    color: var(--primary-color);
}

.sticky-menu.scrolled a.nav-link:hover,
.sticky-menu.scrolled a.nav-link:focus {
    color: var(--fifth-color);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.sticky-menu.scrolled #nav-logo {
    transition: opacity 0.5s ease;
    position: absolute;
    top: 10px;
    height: 85px;
    width: auto;
}

@media screen and (max-width: 992px) {

    .sticky-menu a.nav-link:hover,
    .sticky-menu a.nav-link:focus {
        background-color: transparent;
        color: var(--white-color) !important;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
}

.sticky-menu .dropdown-toggle::after {
    margin-left: 0;
    margin-right: 0;
}

.sticky-menu .dropdown-item {
    border: 1px solid transparent !important;
}

.sticky-menu .dropdown-item:focus,
.sticky-menu .dropdown-item:hover {
    border: 1px solid var(--fifth-color) !important;
    color: var(--fifth-color) !important;
    background-color: var(--primary-color) !important;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

/*
.hero {
    min-height: 90svh;

    background-image: url(../images/hero/bg-hero.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-text,
.hero-image {
        height: 100svh;
    z-index: 9;
}
*/

/*
.hero-text h1 {
    position: relative;
    top: 20px;
    display: inline-block;
    -webkit-animation: bounce 2s ease infinite alternate;
    color: #fff;
    -webkit-animation-delay: 0.1s;
}
*/

/* SNACKS ANIMATION */
/*
@-webkit-keyframes bounce {
    100% {
        top: -20px;
        text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
            0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
            0 50px 25px rgba(0, 0, 0, 0.2);
    }
}

.hero-image img {
    height: auto;
    width: 100%;
}

@media screen and (max-width: 992px) {

    .hero-image img {
        width: 100%;
        height: auto;
    }
}
*/

/*
.hero-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100svh;
    width: 100%;
    background-image: url(../images/overlay.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}
*/


.hero {
    position: relative;
    isolation: isolate;
    min-height: var(--hero-min-h);
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--space-3);
    color: var(--text-on-dark);
    overflow: clip;
}


.hero__bg {
    position: absolute;
    inset: 0;
    /*    background: var(--hero-fallback) url('https://images.unsplash.com/photo-1667308888281-8030a5f827c5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670') center/cover no-repeat;*/
    background: var(--hero-fallback) url('../images/hero/hero.jpg') center/cover no-repeat;
    /*transform: scale(1.04);*/
    /*will-change: transform;*/
}


.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .5) 100%);
    mix-blend-mode: multiply;
}


.hero__content {
    position: relative;
    z-index: 1;
    max-width: 72rem;
    /* 1152px */
    text-align: center;
    padding-inline: var(--space-3);
    animation: fadeUp .9s ease-out both;
}


.hero h1 {
    /*    font-size: clamp(2rem, 4vw + 1rem, 4rem);*/
    line-height: 1.05;
    letter-spacing: .02em;
    margin: 0 0 var(--space-2) 0;
    text-wrap: balance;
}

.hero__subtitle {
    /*    font-size: clamp(1rem, 1vw + .75rem, 1.25rem);*/
    opacity: .95;
    margin: 0 0 var(--space-4) 0;
    text-wrap: pretty;
}


/*
.hero__ctas {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}
*/

.hero__ctas {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

.hero__cta-wrap {
    position: relative;
    display: inline-block;
}

.hero__cta-wrap .btn {
    position: relative;
    z-index: 2;
}

.hero__img {
    position: absolute;
    bottom: 35%;
    left: 50%;
    transform: translate(-50%, 40%) scale(0.9);
    z-index: 1;
    pointer-events: none;
    opacity: 0.95;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hero__img--plantain {
    width: 120px;
    bottom: 110%;
    transform: translate(-50%, 50%) rotate(5deg);
}

.hero__img--snack {
    width: 120px;
    bottom: 110%;
    transform: translate(-50%, 50%) rotate(5deg);
}

.hero__cta-wrap:hover .hero__img {
    transform: translate(-50%, 30%) scale(1);
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}



.btn {
    transition: transform .12s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    will-change: transform;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--fifth-color) 30%, white 70%), 0 0 0 8px color-mix(in oklab, var(--fifth-color) 65%, transparent 35%);
}

.btn:hover {
    transform: translateY(-1px);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.btn:active {
    transform: translateY(0);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.rotate {
    animation: rotation 60s;
}

.linear {
    animation-timing-function: linear;
}

.infinite {
    animation-iteration-count: infinite;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.hero-headline {
    text-stroke: 3px white;
    -webkit-text-stroke: 2px white;
    -webkit-animation: fill 0.5s infinite alternate;
    letter-spacing: 0.15rem;
}

.bg-aboutus {
    background-color: #f7f6f2;
}

#aboutus img {
    width: 100%;
    height: auto;
}

#products-images .card {
    border: none !important;
    background: transparent !important;
}

#products-images img {
    transition: transform .4s ease-in-out;
    width: 100%;
    height: auto;
}

.modal-products:hover img,
.modal-products:focus img {
    cursor: pointer;
    transition: transform .4s ease-in-out;
    transform: rotate(5deg);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#plantains {
    position: relative;
    overflow: hidden;
}

/*
.img-plantain {
    -webkit-filter: drop-shadow(15px 15px 15px #555);
    filter: drop-shadow(15px 15px 15px #555);
}
*/

.shadow-wrap-plantain {
    display: inline-block;

    /* Espacio extra para que la sombra que cae hacia abajo no se recorte */
    padding-bottom: 2.5rem;
    /* prueba con 15–25px según qué tan grande es tu sombra */

    /* Compatibilidad */
    -webkit-filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.4));

    /* Asegura que nada la recorte internamente */
    overflow: visible;
    transform-style: flat;
    isolation: isolate;
}

.shadow-wrap-plantain img {
    display: block;
}

#snacks .badges {
    filter: brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(4203%) hue-rotate(152deg) brightness(91%) contrast(101%);
    -webkit-filter: brightness(0) saturate(100%) invert(17%) sepia(98%) saturate(4203%) hue-rotate(152deg) brightness(91%) contrast(101%);
}

/*
#snacks .badges {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
*/

.banner {
    position: relative;
}

.parallax {
    /* The image used */
    background-image: url('../images/banner/platains.jpg');

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.banner-overlay-1 {
    background-color: var(--text-color);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

.banner-overlay {
    background-color: var(--fifth-color);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
    width: 100%;
    height: 100%;
}

.banner img {
    filter: brightness(0) invert(1);
}

.badges {
    width: 80%;
    height: auto;
}

.modal .badges {
    width: 75%;
    height: auto;
}

@media screen and (max-width: 992px) {
    .badges {
        width: 100%;
        height: auto;
    }

}

.banner p,
.banner h3 {
    position: relative;
    z-index: 9;
}

@media screen and (max-width: 480px) {
    #enjoywith p {
        font-size: 2.5rem !important;

    }

}

#contactForm textarea {
    resize: none;
    min-height: 90px;
    form-sizing: content;
}

footer {
    background-color: var(--morewhite-color);
    color: var(--text-color);
}

footer a {
    color: var(--text-color) !important;
}

footer a:hover,
footer a:focus {
    color: var(--secondary-color) !important;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}