/*
 Theme Name:   Clem (GeneratePress Child)
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       FJ Solutions
 Author URI:   https://www.fjsolutions.com
 Template:     generatepress
 Version:      0.1
*/

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

:root {
    --color-crema: #ebe4d5;
    --color-tierra: #B78E6C;    
    --color-olive: #97831E;    
    --color-orange: #EC8D03;
    --color-white: #ffffff;    
    --swiper-theme-color:#EC8D03;
}

@font-face {
    font-family: 'Micaroline';
    src: url('fonts/micaroline-regular-webfont.woff2') format('woff2'),
         url('fonts/micaroline-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OreganoBT';
    src: url('fonts/oreganobt-regular-webfont.woff2') format('woff2'),
         url('fonts/oreganobt-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.font-oregano{ font-family: 'OreganoBT', sans-serif; }
.font-micaroline{ font-family: 'Micaroline', sans-serif; }
.font-omnes{ font-family: "omnes-pro", sans-serif; /*400,500,600*/ }
.font-reenie{
  font-family: "Reenie Beanie", cursive;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -1px;
}

:last-child:not(div){ margin-bottom:0; }
body{
    /*    
    text-wrap: balance;
    text-wrap: pretty;
    */
}

/* colors */
.color-crema{ color: var(--color-crema); }
.color-tierra{ color: var(--color-tierra); }
.color-olive{ color: var(--color-olive); }
.color-orange{ color: var(--color-orange); }
.color-white{ color: var(--color-white); }

.bg-crema{ background-color: var(--color-crema); }
.bg-orange{ background-color: var(--color-orange); }
.bg-tierra-05{background-color: rgba(183, 142, 108, 0.5);}

/* fonts */
/*.font-100-65{ font-size:clamp(65px, 5.209vw, 100px); letter-spacing:-2px; line-height:1; }*/
.font-100-65{ font-size:clamp(40px, 3.542vw, 68px); letter-spacing:-1px; line-height:1; }
.font-100-50{ font-size:clamp(50px, 5.209vw, 100px); letter-spacing:-2px; }
.font-30{ font-size:clamp(16px, 1.563vw, 30px); }
.font-20{ font-size:clamp(16px, 1.042vw, 20px) }
.subtitle{ font-size: 40px; font-family: "Reenie Beanie", cursive; line-height: normal;}

.button-arrow{
    font-weight: 500;
    text-transform: uppercase;
    font-size:15px;
}
.button-arrow .gb-icon svg,
.button-arrow .gb-icon svg path{ fill:inherit; }

/* spacing */

@media screen and (min-width: 1024px){
    .wrap{ max-width:65vw; margin:0 auto; }    
    .wrap-xl{ max-width:72.9vw;margin:0 auto;   }    
}

.space-between{ justify-content:space-between; }
.opacity-15{ opacity:0.15 }

.lhn{ line-height:normal; }
.lh1{ line-height:1; }
.mb-0{ margin-bottom:0 !important }
.mb-15{ margin-bottom:1.5em !important }
.mb-20{ margin-bottom:20px;}


.object-fit-cover,
.object-fit-cover video{ object-fit:cover; height:100%; }


.radius-20{ border-radius:20px; }

.p-absolute{ position:absolute; z-index:-1; }
.p-relative{ position:relative; }

.show-mobile,
.show-tablet{ display:none; }

@media screen and (max-width:1024px){
    .hide-tablet{ display:none; }
    .show-tablet{ display:block; }
    .br-tablet br{ display:none }
}

@media screen and (max-width:768px){
    .hide-mobile{ display:none; }
    .show-mobile{ display:block; }
    .br-mobile br{ display:none }
    .column-reverse-m{ flex-direction:column-reverse; }

    .flip-image-m{transform: scaleX(-1);}
}



/*HOME*/
.text-welcome{
    font-size:clamp(53px, 4.688vw, 90px);
}

.map-marker{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 50%;
    display: inline-block;
    max-width: 82px;
}

.video-huertito video{
    aspect-ratio: 0.736/1;
    width: 100%;
    object-fit: cover;
    transform: rotate(5.117deg);
    border-radius: 20px;
}

.icon-reviews,
.icon-founding-stories{position: absolute;}

.icon-founding-stories{    
    right: -2.7085vw;
    bottom: 1.115vw;
}
.icon-reviews{    
    right:-2vw;
    bottom:0;
}


.slider-tortas{ padding:40px !important }
.swiper-button-prev,
.swiper-button-next{ color:#fff; }
.slider-tortas .swiper-slide img { transform: scale(.85); transition: 1s ease; border-radius: 20px;}
.slider-tortas .swiper-slide-active img{transform: scale(1.25);}
.slider-reviews{ padding-bottom:40px !important;}


.klaviyo-form *{ font-family: "omnes-pro", sans-serif !important; font-weight:400 !important }

@media screen and (max-width:1024px){
    .slider-tortas{ overflow:visible;  padding:40px 70px 60px 70px !important }
    .slider-tortas .swiper-pagination-bullet{
        background-color: #fff !important;
    }
    .slider-tortas .swiper-button-prev,
    .slider-tortas .swiper-button-next{ display:none; }

    .slider-reviews{ margin-right:-20px !important; }

    #barra-direccion{
        max-width: 100%;
        margin-left: auto; margin-right: auto;
    }
}


/* LANDING EVENTOS - Día de los muertos*/
.icon-calabaza{left: -50%;  top: 28%;}
.icon-copon{right: -70%;  bottom: 0%;}
.icon-rama{left: -300px;  top: 30px;}
@media screen and (max-width:768px){
    #page{ overflow-x:hidden; }
    .icon-calabaza{left: 0; width: 150px;}
    .icon-rama{ left: 0; top: 67vw; width: 60px;} 
}
.barra-reservar{
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;    
}


/*ANIMATIONS*/
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0px); }
    }

    .floating-svg {
        animation: float 4s ease-in-out infinite;
    }
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-30px); }
    }

    .bouncing-svg {
        animation: bounce 2s ease infinite;
    }
    @keyframes diagonalMove {
        0% { transform: translate(0px, 0px); }
        50% { transform: translate(20px, -20px); }
        100% { transform: translate(0px, 0px); }
    }

    .diagonal-svg {
        animation: diagonalMove 4s ease-in-out infinite;
    }
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }

    .pulsating-svg {
        animation: pulse 2s ease-in-out infinite;
    }
    @keyframes rotate {
        0% { transform: rotate(0deg); }
        50% { transform: rotate(180deg); }
        100% { transform: rotate(360deg); }
    }

    .rotating-svg {
        animation: rotate 12s linear infinite;
    }
    @keyframes floatHorizontal {
        0% { transform: translateX(0px); }
        50% { transform: translateX(20px); }
        100% { transform: translateX(0px); }
    }

    .floating-horizontal-svg {
        animation: floatHorizontal 3s ease-in-out infinite;
    }
    @keyframes rotateAndMove {
        0% {
            transform: translate(0px, 0px) rotate(0deg);
        }
        25% {
            transform: translate(20px, -20px) rotate(90deg);
        }
        50% {
            transform: translate(40px, 0px) rotate(180deg);
        }
        75% {
            transform: translate(20px, 20px) rotate(270deg);
        }
        100% {
            transform: translate(0px, 0px) rotate(360deg);
        }
    }

    .rotating-moving-svg {
        animation: rotateAndMove 5s ease-in-out infinite;
    }
    @keyframes wideRotateAndMove {
        0% {
            transform: translate(50px, 0px) rotate(0deg);
        }
        25% {
            transform: translate(70px, -50px) rotate(90deg);
        }
        50% {
            transform: translate(50px, -100px) rotate(180deg);
        }
        75% {
            transform: translate(30px, -50px) rotate(270deg);
        }
        100% {
            transform: translate(50px, 0px) rotate(360deg);
        }
    }

    .wide-rotating-moving-svg {
        animation: wideRotateAndMove 5s ease-in-out infinite;
    }
    @keyframes diagonalMoveAndRotate {
        0% {
            transform: translate(0px, 0px) rotate(0deg);
        }
        25% {
            transform: translate(20px, -20px) rotate(90deg);
        }
        50% {
            transform: translate(40px, -40px) rotate(180deg);
        }
        75% {
            transform: translate(20px, -60px) rotate(270deg);
        }
        100% {
            transform: translate(0px, -80px) rotate(360deg);
        }
    }

    .diagonal-rotating-svg {
        animation: diagonalMoveAndRotate 4s ease-in-out infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .rotating-box {
        animation: spin 2s linear infinite;
    }    

/* marquee */
    .site-main .wp-block-group__inner-container{ padding:0 !important }

    @media screen and (max-width:768px){
        .marquee .wp-block-group__inner-container{
            white-space: nowrap;                          
            display: flex;         
            gap: 40px;
            overflow: hidden;
        }
        .marquee h2{animation: scrollLeft 9s linear infinite;}
    }

    @keyframes scrollLeft {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
    }