/* START GENERAL SETTINGS */
:root {
    --maretameva: #4ABFB4;
    --black: #212121;
    --neutral50: #fafafa;
    --neutral100: #f5f5f5;
    --neutral200: #e5e5e5;
    --neutral300: #d4d4d4;
    --neutral400: #a1a1a1;
    --neutral500: #737373;
    --neutral600: #525252;
    --neutral700: #404040;
    --neutral800: #262626;
    --neutral900: #171717;
    --neutral950: #0a0a0a;
    --transition: 0.3s ease-in-out;
    --maxWidth: 1600px;
    --paddingX: 75px;
    --paddingY: 75px;
    --gap: 50px;
    --cc-toggle-on-bg: var(--maretameva)!important;
    --plyr-color-main: var(--maretameva); /* For video lightbox */
}

html {
  scroll-behavior: smooth;
}

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

::selection {
  background: var(--maretameva);
  color: white;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/OverusedGrotesk/OverusedGrotesk-Light.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/OverusedGrotesk/OverusedGrotesk-Book.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/OverusedGrotesk/OverusedGrotesk-Roman.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/OverusedGrotesk/OverusedGrotesk-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/OverusedGrotesk/OverusedGrotesk-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/OverusedGrotesk/OverusedGrotesk-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/OverusedGrotesk/OverusedGrotesk-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "Overused Grotesk";
    src: url("../fonts/OverusedGrotesk/OverusedGrotesk-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
} 

body{
    background-color: var(--neutral50);
}

.container-fluid{
    width: 100%;
    padding-left: var(--paddingX);
    padding-right: var(--paddingX);
}

section.padding-top{
    padding-top: var(--paddingY);
    padding-bottom: 0px;
}

section.padding-bottom{
    padding-top: 0px;
    padding-bottom: var(--paddingY);
}

section.padding-both{
    padding-top: var(--paddingY);
    padding-bottom: var(--paddingY);
}

.container{
    width: 100%;
    margin: auto;
    max-width: var(--maxWidth);
}

.custom-gap{
    gap: var(--gap);
}

.custom-transition{
    transition: var(--transition);
}

.custom-shadow{
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
}

.hover-scale{
    transition: var(--transition);
}
.hover-scale:hover{
    transform: scale(1.05);
}

.color-maretameva,
.color-maretameva-hover:hover{
    color: var(--maretameva)!important;
}

/* START GLIGHTBOX */
    .goverlay{
        background: rgba(0, 0, 0, 0.5)!important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .gslide-media.gslide-video,
    .gslide-media.gslide-image{
        border-radius: 24px;
        overflow: hidden;
    }
/* END GLIGHTBOX */

/**/

/* START HEADINGS */
    h1,h2,h3,h4,h5,h6{
        font-family: 'DM Sans', sans-serif;
    }

    h1{
        font-size: 54px;
        line-height: 60px;
        font-weight: 900;
        letter-spacing: -2%;
    }

    h2{
        font-size: 42px;
        line-height: 48px;
        font-weight: 600;
        letter-spacing: -2%;
    }

    h3{
        font-size: 36px;
        line-height: 40px;
        font-weight: 600;
        letter-spacing: -2%;
    }

    h4{
        font-size: 32px;
        line-height: 36px;
        font-weight: 600;
        letter-spacing: -2%;
    }

    h5{
        font-size: 28px;
        line-height: 32px;
        font-weight: 600;
        letter-spacing: -2%;
    }

    h6{
        font-size: 24px;
        line-height: 28px;
        font-weight: 600;
        letter-spacing: -2%;
    }

    p,
    ul li{
        font-family: 'Overused Grotesk', sans-serif;
        font-weight: 200;
        font-size: 20px;
        line-height: 28px;
    }

    p.large{
        font-size: 28px;
        line-height: 36px;
    }
/* END HEADINGS */

/* START COMPONENTS */
    /* START QUOTES */
        @keyframes slide {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-100%);
            }
        }

        .quotes {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 24px;
            overflow: hidden;
            background: transparent;
            white-space: nowrap;
            position: relative;
        }

        .quotes-border{
            position: absolute;
            top: 0px;
            width: 75px;
            height: 100%;
            z-index: 1;
        }

        .quotes-border.before{
            left: 0px;
        }
        
        .quotes-border.after{
            right: 0px;
        }

        .quotes-slide {
            padding: 40px 0px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 24px;
        }

        .quotes-slide.animated{
            animation: 200s slide infinite linear;
        }

        .quotes-slide div {
            font-family: 'Overused Grotesk', sans-serif;
            font-size: 28px;
            line-height: 36px;
            font-weight: 200;
            background: white;
            border-radius: 20px;
            padding: 20px;
            width: 385px;
            height: 250px;
            white-space: break-spaces;
            text-align: left;
            transition: var(--transition);
        }

        .quotes-slide div:hover{
            transform: scale(1.025);
            box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.05);
        }
    /* END QUOTES */

    /* START LOGO */
        .logo{
            width: 132px;
            height: 25px;
            margin-top: -2px;
            transition: var(--transition);
        }

        .logo:hover{
            transform: translate(5px, 0px);
        }

        .logo path{
            transition: var(--transition);
        }

        .logo.black path{
            fill: var(--black);
            transition: var(--transition);
        }

        .logo.white path{
            fill: white;
            transition: var(--transition);
        }

        .logo:hover path{
            fill: var(--maretameva);
        }

        .logo svg{
            width: 132px;
            height: 25px;
        }
    /* END LOGO */

    /* START SWITCH */
        .switch-container{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
            transition: var(--transition);
        }

        .switch-container span{
            cursor: pointer;
            font-size: 20px;
            line-height: 24px;
            color: var(--black);
            transition: var(--transition);
        }

        .switch-container span:first-of-type{
            color: var(--maretameva);
        }

        .switch-container.active span:first-of-type{
            color: var(--black);
        }

        .switch-container.active span:last-of-type{
            color: var(--maretameva);
        }

        .switch-container .switch{
            position: relative;
            cursor: pointer;
            width: 72px;
            height: 36px;
            border-radius: 100px;
            background: var(--neutral700);
            transition: var(--transition);
        }

        .switch-container.active .switch{
            background: var(--maretameva);
        }

        .switch-container .switch .bullet{
            position: absolute;
            top: 6px;
            left: 6px;
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 100px;
            transition: var(--transition);
        }

        .switch-container.active .switch .bullet{
            left: 42px;
        }
    /* END SWITCH */

    /* START TAG */
        .tag{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            z-index: 2;
            font-size: 16px;
            line-height: 20px;
            font-weight: 500;
            width: fit-content;
            padding: 4px 12px;
            min-height: 32px;
            border-radius: 100px;
            color: black;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        
        .tag .ph{
            font-size: 24px;
            line-height: 24px;
        }
    /* END TAG */

    /* START INPUTS */
        .input-container{
            position: relative;
            font-family: 'Overused Grotesk', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 300;
        }

        .input-container label{
            pointer-events: none;
            display: block;
            color: var(--neutral400);
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 2px 4px;
            border-radius: 4px;
            background: white;
            z-index: 1;
            transition: var(--transition);
        }

        .input-container.active label{
            font-size: 16px;
            color: var(--maretameva);
            top: -11px;
            left: 12px;
        }

        .input-container input,
        .input-container textarea,
        .input-container select {
            padding: 13px 15px;
            width: 100%;
            box-sizing: border-box;
            background: white;
            border: 1px solid var(--neutral300);
            border-radius: 12px;
            transition: var(--transition);
        }

        .input-container.active input,
        .input-container.active textarea,
        .input-container.active select {
            border: 1px solid var(--maretameva);
        }

        .input-container input:focus-visible,
        .input-container textarea:focus-visible,
        .input-container select:focus-visible{
            outline: 1px solid var(--maretameva);
        }

        .input-container select {
            -moz-appearance: none;
            -webkit-appearance: none;
            position: relative;
            cursor: pointer;
        }

        .input-container.select::after{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cpolyline points='208 96 128 176 48 96' fill='none' stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
            width: 28px;
            height: 28px;
            display: block;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        .input-container select::-ms-expand {
            display: none;
        }

        .input-container.search{
            position: relative;
        }

        .input-container.search label{
            left: 40px;
        }

        .input-container.search::after{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Ccircle cx='112' cy='112' r='80' fill='none' stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='168.57' y1='168.57' x2='224' y2='224' fill='none' stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
            width: 24px;
            height: 24px;
            display: block;
            position: absolute;
            top: 12px;
            left: 14px;
        }

        .input-container.search input{
            border-radius: 200px;
            padding-left: 44px;
        }

        input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }

        .input-container.search .ph{
            z-index: 1;
            font-size: 24px;
            color: var(--neutral400);
            display: block;
            position: absolute;
            top: 12px;
            right: 12px;
            opacity: 0;
            cursor: pointer;
            pointer-events: none;
            transition: var(--transition);
        }

        .input-container.active.search .ph{
            pointer-events: auto;
            opacity: 1;
        }

        .checkbox-container {
            display: block;
            position: relative;
            cursor: pointer;
            font-size: 16px;
            line-height: 24px;
            font-weight: 400;
            padding-left: 36px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .checkbox-container a{
            color: var(--maretameva);
        }

        .checkbox-container a:hover{
            text-decoration: underline;
        }

        .checkbox-container input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .checkbox-container .checkmark {
            border-radius: 6px;
            margin-top: -1px;
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background: white;
            border: 1px solid var(--neutral300);
            transition: var(--transition);
        }

        .checkbox-container .checkmark:hover{
            background-color: var(--neutral200);
        }

        .checkbox-container input:checked ~ .checkmark {
            background-color: var(--maretameva);
            border-color: var(--maretameva);
        }

        .checkbox-container .checkmark:after {
            content: "";
            position: absolute;
            opacity: 0;
            pointer-events: none;
            transition: var(--transition);
        }

        .checkbox-container input:checked ~ .checkmark:after {
            opacity: 1;
        }

        .checkbox-container .checkmark:after {
            left: 8px;
            top: 2px;
            width: 8px;
            height: 16px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        @keyframes loadingOpacity {
            0% { opacity: 0.3; }
            50% { opacity: 0.8; }
            100% { opacity: 0.3; }
        }

        input.loading{
            animation: loadingOpacity 1s infinite ease-in-out;
        }

        #form-message{
            display: block;
            font-family: 'Overused Grotesk', sans-serif;
            font-size: 18px;
            line-height: 20px;
        }

        #form-message.ok{
            color: var(--maretameva);
        }

        #form-message.ko{
            color: #bb0000;
        }
    /* END INPUTS */

    /* START TEXT REVEAL */
        .text-reveal h2{
            font-size: 60px;
            line-height: 64px;
            font-weight: 900;
            text-transform: uppercase;
            text-align: center;
        }
    /* END TEXT REVEAL */

    /* START CAROUSEL */
        .swiper{
            width: 100%;
            display: flex!important;
            flex-direction: column;
        }

        .swiper .swiper-button-next,
        .swiper .swiper-button-prev{
            position: static;
            margin-top: 0px;
            width: 54px;
            height: 54px;
            border-radius: 200px;
            background: var(--neutral200);
            transition: var(--transition);
        }

        .swiper .swiper-button-next:hover,
        .swiper .swiper-button-prev:hover{
            background: var(--neutral300);
        }

        .swiper .swiper-button-next::after,
        .swiper .swiper-button-prev::after{
            content: '';
            width: 32px;
            height: 32px;
            background-size: cover;
        }

        .swiper .swiper-button-next::after{
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cline x1='40' y1='128' x2='216' y2='128' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='144 56 216 128 144 200' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
        }

        .swiper .swiper-button-prev::after{
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cline x1='216' y1='128' x2='40' y2='128' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpolyline points='112 56 40 128 112 200' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
        }
    /* END CAROUSEL */

    /* START REVIEWS CAROUSEL */
        .reviews{
            gap: var(--gap);
        }

        .reviews .before,
        .reviews .after{
            display: block;
            position: absolute;
            width: 50px;
            height: 100%;
            top: 0px; 
            z-index: 2;
            opacity: 1;
            transition: var(--transition);
        }

        .reviews .before{ 
            left: 0px;
            opacity: 0!important;
        }

        .reviews .after{ 
            right: 0px;
        }

        .reviews.last-slide .before{
            opacity: 1!important;
        }

        .reviews.last-slide .after{
            opacity: 0;
        }

        .reviews .swiper-wrapper{
            display: grid!important;
            grid-template-columns: repeat(10, 1fr);
        }

        .reviews .review{
            display: flex;
            flex-direction: column;
            gap: 20px;
            font-family: 'Overused Grotesk';
            transition: var(--transition);
            opacity: 0.4;
        }

        .reviews .review.swiper-slide-active{ 
            opacity: 1;
        }

        .reviews .review > p{
            font-size: 28px;
            line-height: 36px;
            font-weight: 200;
            height: 100%;
            text-align: justify;
        }

        .reviews .review .author{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 12px;
        }

        .reviews .review .author .author-img{
            width: 54px;
            height: 54px;
            border-radius: 200px;
            object-fit: cover;
        }

        .reviews .review .author .author-info{
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .reviews .review .author .author-info > span:first-of-type{
            font-size: 24px;
            line-height: 24px;
            font-weight: 500;
        }

        .reviews .review .author .author-info > span:last-of-type{
            font-size: 20px;
            line-height: 20px;
            font-weight: 200;
        }
    /* END REVIEWS CAROUSEL */

    /* START CURSOS CAROUSEL */
        .cursos{
            gap: 32px;
        }

        .curso{
            min-height: 300px;
            padding: 24px;
            border-radius: 32px;
            width: 100%;
            display: flex!important;
            flex-direction: column;
            justify-content: end;
            position: relative!important;
            overflow: hidden;
        }

        .curso .tag{
            position: absolute;
            top: 24px;
            left: 24px;
        }

        .curso .tag.alt{
            left: auto;
            right: 24px;
        }

        .curso .title{
            font-family: 'Overused Grotesk', sans-serif;
            z-index: 2;
            color: white;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            pointer-events: none;
        }

        .curso.expanded .title{
            align-items: end;
            gap: 20px;
        }

        .curso .title .description{
            font-size: 20px;
            line-height: 24px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            text-align: left;
        }

        .curso .title .description .price{
            font-size: 24px;
            line-height: 28px;
        }

        .curso:hover .btn.icon{
            background: var(--maretameva);
            color: white;
        }

        .curso:hover .btn.icon .ph:first-of-type{
            margin-left: 0px;
        }

        .curso:hover .btn.icon .ph:last-of-type{
            margin-right: -48px;
        }


        .curso .href{
            background: linear-gradient(0deg,rgba(33, 33, 33, 0.8) 40%, rgba(33, 33, 33, 0.6) 100%);
            position: absolute;
            display: block;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            opacity: 0.6;
            z-index: 1;
            transition: var(--transition);
        }

        .curso:hover .href{
            opacity: 0.5;
        }


        .curso .thumb{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .curso .thumb img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .curso:hover .thumb img{
            transform: scale(1.05);
        }

        .curso hr{
            width: 25px;
            height: 2px;
            background: var(--maretameva);
            border-color: var(--maretameva);
            border-radius: 200px;
        }
    /* END CURSOS CAROUSEL */

    /* START COMUNIDAD CTA */
        .comunidad-cta .item{
            width: 100%;
            min-height: 400px;
            height: 100%;
            display: block;
            border-radius: 32px;
            position: relative;
            overflow: hidden;
            transition: var(--transition);
        }

        .comunidad-cta .item:hover{
            width: 150%;
        }

        .comunidad-cta .item .content{
            height: 100%;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            color: white;
            position: absolute;
            top: 235px;
            left: 0px;
            z-index: 2; 
            pointer-events: none;
            transition: var(--transition);
        }

        .comunidad-cta .item:hover .content{
            top: 0px;
        }

        .comunidad-cta .item .content .title,
        .comunidad-cta .item .content .body{
            display: flex;
            flex-direction: column;
            gap: 12px;
            transition: var(--transition);
        }

        .comunidad-cta .item .content .body{
            height: 100%;
            opacity: 0;
        }

        .comunidad-cta .item:hover .content .body{
            opacity: 1;
        }

        .comunidad-cta .item .content .body > p{
            height: 100%;
        }

        .comunidad-cta .item .href{
            background: linear-gradient(0deg,rgba(33, 33, 33, 0.8) 40%, rgba(33, 33, 33, 0.6) 100%);
            position: absolute;
            display: block;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            opacity: 0.25;
            z-index: 1;
            transition: var(--transition);
        }

        .comunidad-cta .item:hover .href{
            opacity: 1;
        }

        .comunidad-cta .item .content .ph{
            transition: var(--transition);
        }

        .comunidad-cta .item:hover .content .ph{
            color: var(--maretameva);
        }

        .comunidad-cta .item .bg{
            position: absolute;
            display: block;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            opacity: 1;
            filter: brightness(0.8);
            object-fit: cover;
            z-index: 0;
            transition: var(--transition);
        }
    /* END COMUNIDAD CTA */

    /**/

    /* START CTAs */
        .video-cta{
            cursor: pointer;
        }

        .video-cta,
        .normal-cta{
            height: 400px;
            max-height: 400px;
            border-radius: 36px;
            overflow: hidden;
            position: relative;
            transition: var(--transition)!important;
        }

        .video-cta:hover,
        .normal-cta:hover{
            border-radius: 64px;
        }

        .video-cta .circleBtnToggle{
            cursor: pointer;
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.5);
            box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.05);
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
            pointer-events: none;
            border-radius: 100px;
            min-width: 54px;
            max-width: 54px;
            width: max-content;
            height: 54px;
            padding: 6px;
            padding-right: 12px;
            gap: 8px;
            overflow: hidden;
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: var(--transition);
        }

        .video-cta .circleBtnToggle .icon{
            transition: 0.5s ease-in-out;
            display: flex;
            padding: 10px;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid white;
            border-radius: 20px;
        }

        .video-cta .circleBtnToggle .icon svg{
            fill: var(--neutral800);
            width: 20px;
            height: 20px;
        }

        .video-cta .circleBtnToggle .text{
            font-family: 'DM Sans', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 600;
            letter-spacing: -1px;
            white-space: nowrap;
        }

        .video-cta:hover .circleBtnToggle{
            background: rgba(255, 255, 255, 0.65);
            box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
            max-width: 500px;
        }

        .video-cta:hover .circleBtnToggle .icon{
            background: rgba(255, 255, 255, 0.8);
        }

        .video-cta img{
            filter: brightness(0.8);
            transition: var(--transition);
        }

        .video-cta:hover img{
            filter: brightness(0.7);
        }
    /* END CTAs */

    /**/

    /* START PRESENCIAL CTA */
    .presencial-cta .swiper .swiper-slide{
        border-radius: 32px;
        overflow: hidden;
        max-height: 450px;
    }  

    .presencial-cta .swiper .swiper-slide img{
        width: 100%;
        max-height: 450px;
        object-fit: cover;
    }  
    /* END PRESENCIAL CTA */

    /**/

    /* START FORMULARIO TEST */
    #que-necesito{
        font-family: 'Overused Grotesk', sans-serif;
    }

    #que-necesito .answers {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #que-necesito .answers button{
        font-size: 20px;
        line-height: 24px;
        font-weight: 400;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: center;
        padding: 16px 12px;
        border-radius: 12px;
        color: black;
        background: var(--neutral100);
        cursor: pointer;
        transition: var(--transition);
    }

    #que-necesito .answers button:hover{
        background: var(--neutral200);
    }

    #que-necesito .answers button.selected{
        font-weight: 700;
        color: white;
        background: var(--maretameva);
    }

    #que-necesito .controls { display: flex; justify-content: space-between; }

    #que-necesito #step-content .answer{
        margin: 0px;
        font-size: 20px;
        line-height: 28px;
        font-weight: 300;
    }
    /* END FORMULARIO TEST */

    /**/

    /* START FINAL CTA */
        .final-cta .container{
            height: 500px;
        }

        @media (min-width: 1024px) and (max-width: 1300px) {
            .final-cta .container{
                height: 550px;
            }
        }

        @media (max-width: 767px) {
            .final-cta .container{
                height: auto;
            }

            .final-cta .container > div{
                position: relative;
            }

            .final-cta .container > div::after{
                content: '';
                display: block;
                position: absolute;
                top: -100px;
                left: 0px;
                height: 100px;
                width: 100%;
                background: linear-gradient(0deg,rgba(33, 33, 33, 1) 0%, rgba(33, 33, 33, 0) 100%);
            }
        }
    /* END FINAL CTA */

    /* START ICON CARD */
        .icon-card{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            text-align: center;
            gap: 12px;
            border-radius: 24px;
            padding: 20px;
            background: transparent;
            overflow: hidden;
            transition: var(--transition);
        }

        .icon-card:hover{
            background: white;
        }

        .icon-card .ph{
            font-size: 54px;
            line-height: 54px;
            color: var(--maretameva);
            transition: var(--transition);
        }

        .icon-card:hover .ph{
            transform: scale(1.05);
        }

        .icon-card .text{
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            gap: 4px;
        }

        .icon-card-small{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            gap: 12px;
            border-radius: 20px;
            padding: 12px;
            background: white;
            transition: var(--transition);
        }

        .icon-card-small .ph{
            font-size: 32px;
            line-height: 32px;
            color: var(--maretameva);
            transition: var(--transition);
        }

        .icon-card-small p{
            font-family: 'DM Sans', sans-serif;
            font-size: 20px;
            line-height: 24px;
            font-weight: 500;
            letter-spacing: -0.5px;
            transition: var(--transition);
        }

        .icon-card-small:hover .ph,
        .icon-card-small:hover p{
            transform: translate(4px, 0px);
        }
    /* END ICON CARD */

    /* START STEPS */
        .steps{
            display: flex;
            flex-direction: column;
            gap: 0px;
        }

        .steps .step-item{
            display: flex;
            flex-direction: column;
            gap: 0px;
            margin-left: 18px;
            border-left: 2px solid var(--maretameva);
        }

        .steps .step-item:last-of-type{
            border-left: 2px solid transparent;
        }

        .steps .step-item .title{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            gap: 13px;
            font-size: 24px;
            line-height: 28px;
            font-weight: 600;
        }

        .steps .step-item .title .number{
            margin-left: -18px;
            font-size: 20px;
            line-height: 20px;
            font-weight: 600;
            color: white;
            width: 33px;
            height: 33px;
            border-radius: 200px;
            background: var(--maretameva);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center; 
        }

        .steps .step-item .title p{
            font-weight: 400;
        }

        .steps .step-item .text{
            padding-left: 27px;
            margin-bottom: 12px;
        }
    /* END STEPS */

    /* START CHECKLIST */
        .checklist{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            gap: 5px;
        }

        .checklist p{
            font-weight: 400;
        }

        .checklist .ph-fill{
            font-size: 32px;
            line-height: 32px;
            color: var(--maretameva);
            transition: var(--transition);
        }

        .checklist:hover .ph-fill{
            transform: scale(1.1);
        }
    /* END CHECKLIST */

    /* START FAQs */
        .faq-item{
            width: 100%;
            position: relative;
            margin: 0px 0px;
            padding: 20px;
            border-radius: 20px;
            color: var(--black);
            background: white;
            cursor: pointer;
            transition: var(--transition);
        }

        .faq-item.open{
            background: var(--black);
        }

        .faq-item.open .faq-item-title,
        .faq-item.open .faq-item-content{
            color: white!important;
        }

        .faq-item-title{
            display: flex;
            flex-direction: row;
            gap: 20px;
            justify-content: space-between;
            align-items: center;
            position: relative;
            text-align: left;
            transition: var(--transition);
        }

        .faq-item-title h6{
            letter-spacing: -1px;
        }

        .faq-item-content{
            max-height: 0px;
            overflow: hidden;
            transition: var(--transition);
        }

        .faq-item.open .faq-item-content{
            margin-top: 12px;
            max-height: 200px;
            padding-top: 0px;
        }

        .faq-item-content p{
            text-align: left;
            margin: 0px;
            font-size: 20px;
            line-height: 28px;
            font-weight: 300;
        }

        .faq-item-content p a{
            transition: var(--transition);
            color: var(--maretameva);
            text-decoration: underline;
        }

        .faq-item-content p a:hover{
            color: white;
        }

        .faq-item .plusIconContainer{
            min-width: 32px;
            width: 32px;
            min-height: 32px;
            height: 32px;
            border: 2px solid var(--black);
            border-radius: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .faq-item.open .plusIconContainer{
            border: 2px solid white;
        }

        .faq-item .plusIcon{
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -6px;
            cursor: pointer!important;
        }

        .faq-item .plusIcon .horizontalBar,
        .faq-item .plusIcon .verticalBar{
            border-radius: 200px;
            background: var(--black);
            cursor: pointer!important;
            transition: var(--transition);
        }

        .faq-item.open .plusIcon .horizontalBar,
        .faq-item.open .plusIcon .verticalBar{
            background: white;
        }

        .faq-item .plusIcon .horizontalBar{
            width: 16px;
            height: 2px;
            transition: var(--transition);
        }

        .faq-item .plusIcon .verticalBar{
            height: 16px;
            width: 2px;
            margin-left: -9px;
        }

        .faq-item.open .plusIconContainer .verticalBar{
            rotate: -90deg;
        }
    /* END FAQs */

    /* START LOADER */
        .loader {
            width: 50px;
            padding: 8px;
            aspect-ratio: 1;
            border-radius: 50%;
            background: var(--maretameva);
            --_m: 
                conic-gradient(#0000 10%,#000),
                linear-gradient(#000 0 0) content-box;
            -webkit-mask: var(--_m);
                    mask: var(--_m);
            -webkit-mask-composite: source-out;
                    mask-composite: subtract;
            animation: loader 1s infinite linear;
        }
        @keyframes loader {to{transform: rotate(1turn)}}
    /* END LOADER */

    /**/

    /* START MODAL */
    .modal{
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.35);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 100px 50px;
      z-index: 10000;
      transition: 0.3s ease-in-out;
    }

    .modal.show{
      opacity: 1;
      pointer-events: auto;
    }

    .modal-content{
        height: 100%;
        position: relative;
        display: grid;
        grid-template-columns: 35% 65%;
        gap: 0px;
        border-radius: 24px;
        overflow: hidden;
        min-width: 500px;
        max-width: 900px;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.35);
    }

    .modal-content .img{
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 250px;
    }

    .modal-content .img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .modal-content .content{
        overflow-y: scroll;
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 12px;
        background: white;
        padding: 24px;
    }

    .modal-content .content p{
        height: 100%;
    }

    .modal-close{
      cursor: pointer;
      position: absolute;
      top: 20px;
      right: 20px;
      width: 32px;
      height: 32px;
      background: rgba(240, 240, 240, 0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 0px;
      transition: var(--transition);
    }

    .modal-close:hover{
      background: rgba(240, 240, 240, 1);
    }

    .modal-close svg{
        fill: black;
    }

    @media (max-width: 767px) {
        .modal{
            padding: 20px;
        }

        .modal-content{
            grid-template-columns: 100%;
            min-width: 0px;
        }
        .modal-content .img{
            max-height: 300px;
        }
    }
    /* END MODAL */

/* END COMPONENTS */

/* START BUTTONS */
    .btn,
    .wc-block-components-button{
        width: fit-content;
        padding: 12px 20px;
        border-radius: 200px;
        font-size: 20px;
        line-height: 20px;
        font-family: 'DM Sans', sans-serif;
        letter-spacing: -0.5px;
        font-weight: 600;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer!important;
        transition: var(--transition);
    }

    .btn .ph,
    .inline-btn .ph{
        font-size: 24px;
        line-height: 24px;
        transition: var(--transition);
    }

    .btn.main{
        background: var(--maretameva);
        color: white;
    }

    .btn.main:hover{
        background: white;
        color: var(--maretameva);
    }

    .btn.black{
        background: var(--black);
        color: white;
    }

    .btn.white{
        background: white;
        color: var(--black);
    }

    .btn.black:hover,
    .btn.white:hover{
        background: var(--maretameva);
        color: white;
    }

    .btn.icon{
        overflow: hidden;
        gap: 24px;
        min-width: 48px;
        max-width: 48px;
        min-height: 48px;
        max-height: 48px;
    }

    .btn.icon .ph:first-of-type{
        margin-left: -48px;
    }

    .btn.icon:hover .ph:first-of-type{
        margin-left: 0px;
    }

    .btn.icon .ph:last-of-type{
        margin-right: 0px;
    }

    .btn.icon:hover .ph:last-of-type{
        margin-right: -48px;
    }

    .btn.disabled,
    .btn:disabled{
        opacity: 0.6;
        pointer-events: none;
    }

    .inline-btn{
        font-family: 'Overused Grotesk', sans-serif;
        font-weight: 500;
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: 8px;
        color: white;
        transition: var(--transition);
    }

    .inline-btn.reverse{
        flex-direction: row-reverse;
    }

    .inline-btn.black{
        color: var(--black);
    }

    .inline-btn.main{
        color: var(--maretameva);
    }

    .inline-btn:hover{
        color: var(--maretameva);
    }

    .inline-btn.main:hover span{
        text-decoration: underline;
    }

    .inline-btn .ph{
        color: var(--maretameva);
        transition: var(--transition);
    }

    .inline-btn:hover .ph{
        transform: translate(4px, 0px);
    }

    .social-btn{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        min-height: 48px;
        width: 100%;
        color: white;
        background: var(--black);
        font-size: 32px;
        line-height: 32px;
        border: 1px solid var(--black);
        transition: var(--transition);
    }

    .social-btn .ph{
        transition: var(--transition);
    }

    .social-btn:hover{
        filter: brightness(0.95);
    }

    .social-btn:hover .ph{
        transform: scale(0.95);
    }

    #whatsappBtn{
        width: 54px;
        height: 54px;
        border-radius: 200px;
        font-size: 32px;
        color: white;
        background: var(--maretameva);
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 9;
        left: 20px;
        bottom: 20px;
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15);
        opacity: 0;
        pointer-events: none;
        transition: var(--transition);
    }

    #whatsappBtn.show{
        opacity: 1;
        pointer-events: all;
    }

    #whatsappBtn:hover{
        transform: scale(1.05);
        font-size: 36px;
    }

    #backToTop {
        background: var(--black);
        border-radius: 200px;
        padding: 0px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border: none;
        outline: none;
        cursor: pointer;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease;
    }

    #backToTop:hover{
        background: var(--maretameva);
    }

    #backToTop.show {
        opacity: 1;
        visibility: visible;
    }

    #backToTop .progress {
        width: 52px;
        margin-top: -6px;
        margin-left: -6px;
        height: auto;
        transform: rotate(-90deg);
    }

    #backToTop .progress circle {
        fill: none;
        stroke-width: 5;
    }

    #backToTop .progress-bg {
        stroke: var(--neutral200);
    }

    #backToTop .progress-bar {
        stroke: var(--maretameva);
        stroke-dasharray: 314;
        stroke-dashoffset: 314;
        transition: stroke-dashoffset 0.1s;
    }

    #backToTop .upArrow{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: .1s;
    }

    #backToTop:hover .upArrow{
        fill: white;
    }
/* END BUTTONS */
/* END GENERAL SETTINGS */

/**/

/* START HEADER */
    header{
        position: fixed;
        top: 0px;
        left: 0px;
        transition: var(--transition);
        z-index: 1001;
    }

    header .container{
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: start;
        justify-content: space-between;
        min-height: 68px;
        height: 68px;
        max-height: 68px;
        border-radius: 68px;
        padding: 12px 0px;
        transition: var(--transition);
    }

    header.scrolled{
        top: 20px;
    }

    header.scrolled .container,
    header.open .container{
        padding: 12px 20px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }

    header a{
        overflow: hidden;
        position: relative;
        padding: 4px;
        font-weight: 600;
        font-size: 18px;
        line-height: 20px;
        letter-spacing: -1%;
        color: white;
        white-space: nowrap;
        transition: var(--transition);
    }

    header a:not(.btn):hover,
    header a:not(.btn).active {
        color: var(--maretameva) !important;
    }

    header a.btn.active{
        color: var(--maretameva)!important;
    }
    header a.btn.active:hover{
        background: var(--black)!important;
    }


    header a.active::after{
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0px);
        height: 1px;
        margin-bottom: -1px;
        width: 0%;
        border-radius: 200px;
        background: var(--maretameva);
        transition: var(--transition);
    }

    header a.active:hover::after{
        width: 95%;
    }

    header a.logo{
        position: static;
        min-width: 227px;
        padding: 0px;
        height: 100%;
        top: 0px;
        left: 0px;
        align-items: center;
        display: flex;
    }

    header a.logo svg path{
        fill: white;
    }

    header.scrolled a.logo svg path,
    header.open a.logo svg path{
        fill: var(--black);
    }

    header.scrolled a,
    header.open a{
        color: var(--black);
    }

    header.scrolled a.logo{
        left: 20px;
    }

    header a.btn::after,
    header a.logo::after{
        display: none;
    }

    /* START BURGER */
        #menu-mobile-icon {
            width: 22px;
            height: 17px;
            position: absolute;
            transform: rotate(0deg);
            transition: var(--transition);
            cursor: pointer;
            z-index: 9999!important;
        }

        #menu-mobile-icon span {
            display: block;
            position: absolute;
            height: 2px;
            width: 100%;
            background: white;
            border-radius: 2px;
            opacity: 1;
            left: 0;
            transform: rotate(0deg);
            transition: var(--transition);
        }

        header.scrolled  #menu-mobile-icon span{
            background: var(--black);
        }

        #menu-mobile-icon span:nth-child(1) {
            top: 0px;
        }

        #menu-mobile-icon span:nth-child(2),
        #menu-mobile-icon span:nth-child(3) {
            top: 50%;
            margin-top: -1px;
        }

        #menu-mobile-icon span:nth-child(4) {
            top: 100%;
            margin-top: -1px
        }

        #menu-mobile-icon.open span:nth-child(1) {
            top: 50%;
            width: 0%;
            left: 50%;
            margin-top: -1px;
            background: var(--black);
        }

        #menu-mobile-icon.open span:nth-child(2) {
            transform: rotate(45deg);
            background: var(--black);
        }

        #menu-mobile-icon.open span:nth-child(3) {
            transform: rotate(-45deg);
            background: var(--black);
        }

        #menu-mobile-icon.open span:nth-child(4) {
            top: 50%;
            width: 0%;
            left: 50%;
            margin-top: -1px;
            background: var(--black);
        }
    /* END BURGER */

/* END HEADER */

/**/

/* START MAIN */
    main{
        padding-top: 0px!important;
    }

    /* START HERO */
        .hero-container{
            padding: 0px;
            transition: var(--transition);
        }

        .hero-container .hero{
            font-family: 'DM Sans', sans-serif;
            min-height: 70svh;
            transition: var(--transition);
            padding-bottom: 60px;
            margin: auto;
            max-width: 3000px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .hero-container.scrolled{
            padding-left: var(--paddingX);
            padding-right: var(--paddingX);
        }

        .hero-container.blog.scrolled{
            padding-bottom: 48px;
        }
        
        .hero-container.scrolled .hero{
            padding: 40px 40px 60px 40px;
            max-width: var(--maxWidth);
            border-radius: 32px;
        }
    /* END HERO */

/* END MAIN */

/**/

/* START BLOG */
    .category-tag-container{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding-right: 25px;
    }

    .category-tag-container::-webkit-scrollbar{
        display: none;
    }

    .category-tag{
        font-family: 'Overused Grotesk', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        padding: 4px 12px;
        border-radius: 200px;
        background: rgba(241, 241, 241, 0.6);
        border: 1px solid white;
        white-space: nowrap;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: var(--transition);
    }

    .category-tag:hover,
    .category-tag.active{
        color: white;
        background: var(--maretameva);
        border: 1px solid var(--maretameva);
    }

    .category-tag.active:hover{
        filter: brightness(0.95);
    }

    .blog-card{
        display: flex;
        flex-direction: column;
        gap: 0px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
        min-height: 500px;
    }

    .blog-card .head{
        display: flex;
        flex-direction: column;
        gap: 0px;
        position: relative;
        min-height: 225px;
        height: 225px;
        max-height: 225px;
    }

    .blog-card .head .image{
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
    }

    .blog-card .head .image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }

    .blog-card .head .category-tag{
        position: absolute;
        bottom: 24px;
        left: 24px;
        z-index: 2;
    }

    .blog-card .body{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 20px 24px 32px 24px;
        gap: 32px;
        background: white;
    }

    .blog-card .body .text{
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: 100%;
    }

    .blog-card .body .text .title h5{
        transition: var(--transition);
    }

    .blog-card .body .inline-btn{
        width: auto;
    }

    .blog-card:hover{
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
    }

    .blog-card:hover .head .image img{
        transform: scale(1.1);
    }

    .blog-card:hover .body .text .title h5{
        color: var(--maretameva);
    }

    .entrada.swiper-slide .blog-card{
        min-height: 525px;
        height: 525px;
        box-shadow: none;
    }

    .entrada.swiper-slide .blog-card .body{
        min-height: 300px;
        height: 300px;
    }

    .entrada.swiper-slide .blog-card .body .text .title{
        max-height: 100px;
        overflow: hidden;
    }

    .breadcrumbs-container{
        position: relative;
    }

    .breadcrumbs-container::after{
        content: '';
        display: block;
        position: absolute;
        width: 50px;
        height: 100%;
        top: 0px;
        right: 0px;
        z-index: 10;
        background: linear-gradient(-90deg,rgba(229, 229, 229, 1) 0%, rgba(229, 229, 229, 0) 90%)";
    }

    .breadcrumbs{
        font-family: 'Overused Grotesk', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 300;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .breadcrumbs{
        font-family: 'Overused Grotesk', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 300;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .breadcrumbs::-webkit-scrollbar{
        display: none;
    }

    .breadcrumbs a{
        font-weight: 600;
        transition: var(--transition);
    }

    .breadcrumbs a:hover{
        color: var(--maretameva);
        text-decoration: underline;
    }

    .breadcrumbs span{
        color: var(--neutral400);
        font-weight: 300;
    }

    .breadcrumbs p{
        font-family: 'Overused Grotesk', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 300;
        white-space: nowrap;
        margin-right: 12px;
    }
/* END BLOG */

/**/

/* START PRODCUTS */
    .product-card-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        gap: 24px;
    }

    .product-card-container.three{
        grid-template-columns: repeat(3, 1fr);
    }
    .product-card-container.two{
        grid-template-columns: repeat(2, 1fr);
    }

    .product-card-container.horizontal{
        grid-template-columns: repeat(1, 1fr)!important;
    }

    .product-card-container.horizontal .product-card.horizontal:nth-child(even){
        grid-template-columns: 35% 65%;
    }
    .product-card-container.horizontal .product-card.horizontal:nth-child(even) .head{
        order: 1;
    }
    .product-card-container.horizontal .product-card.horizontal:nth-child(even) .body{
        order: 2;
    }

    .product-card{
        display: flex;
        flex-direction: column-reverse;
        gap: 0px;
        border-radius: 24px;
        overflow: hidden;
        height: 100%;
        width: 100%;
        max-width: 450px;
        margin: auto;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    }

    .product-card .head{
        display: flex;
        flex-direction: column;
        gap: 0px;
        position: relative;
        min-height: 300px;
        height: 300px;
        max-height: 300px;
    }

    .product-card .head .image{
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
    }

    .product-card .head .image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }

    .product-card .head .category-tag{
        position: absolute;
        bottom: 24px;
        left: 24px;
        z-index: 2;
    }

    .product-card .body{
        font-family: 'Overused Grotesk', sans-serif;
        min-height: 300px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 20px 24px 32px 24px;
        gap: 32px;
        background: white;
    }

    .product-card .body .text{
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: 100%;
    }

    .product-card .body .text .title h4{
        transition: var(--transition);
    }


    .product-card .body .text .subtitle{
        font-family: 'Overused Grotesk', sans-serif;
        font-size: 16px;
        line-height: 20px;
        color: var(--neutral400);
    }

    .product-card .body .inline-btn{
        width: auto;
    }

    .product-card:hover{
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
    }

    .product-card:hover .head .image img{
        transform: scale(1.1);
    }

    .product-card:hover .body .text .title h4{
        color: var(--maretameva);
    }

    .product-card.horizontal{
        max-width: 1200px;
        width: 100%;
        margin: auto;
        display: grid;
        grid-template-columns: 65% 35%;
    }

    .product-card.horizontal .head{
        height: 100%;
        min-height: none;
        max-height: none;
    }

    .product-card.horizontal .text{
        height: auto;
    }

    .product-card.horizontal.left{
        grid-template-columns: 35% 65%;
    }

    .product-card.horizontal.left .head{
        order: 1;
    }

    .product-card.horizontal.left .body{
        order: 2;
    }

    .feature-tag{
        width: fit-content;
        font-family: 'Overused Grotesk', sans-serif;
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        padding: 4px 12px;
        border-radius: 200px;
        color: var(--black);
        background: var(--neutral100);
        border: 1px solid white;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        transition: var(--transition);
    }

    .feature-tag .ph{
        font-size: 24px;
        line-height: 24px;
        color: var(--maretameva);
        transition: var(--transition);
    }

    .feature-tag:hover .ph{
        transform: translate(2px, 0px);
    }

    .feature-tag.disabled{
        opacity: 0.4;
        pointer-events: none;
    }
/* END PRODUCTS */

/**/

/* START LEGALES */
    .page-template-template-page-legales .wp-page-content h6::first-letter,
    .page-template-template-page-legales .wp-page-content h6 strong{
        color: var(--maretameva);
    }

    .page-template-template-page-legales .wp-page-content h6{
        margin-top: 32px;
    }

    .page-template-template-page-legales .divider{
        background: var(--maretameva);
        height: 6px;
        width: 42px;
        border-radius: 200px;
    }

    .page-template-template-page-legales .wp-page-content p,
    .page-template-template-page-legales .wp-page-content ul{
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .page-template-template-page-legales .wp-page-content p strong{
        font-weight: 600;
    }

    .page-template-template-page-legales .wp-page-content p a{
        color: var(--maretameva);
        transition: var(--transition);
    }

    .page-template-template-page-legales .wp-page-content p a:hover{
        text-decoration: underline;
    }

    .page-template-template-page-legales .wp-page-content ul{
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .page-template-template-page-legales .wp-page-content ul li{
        padding-left: 15px;
        position: relative;
    }

    .page-template-template-page-legales .wp-page-content ul li::before{
        content: '•';
        font-size: 24px;
        line-height: 24px;
        font-weight: 700;
        display: block;
        color: var(--maretameva);
        position: absolute;
        left: 0px;
        top: 2px;
    }

    .page-template-template-page-legales .wp-page-content figure{
        max-width: calc(100vw - 40px);
        overflow: hidden;
        overflow-x: auto;
        border-radius: 12px;
    }

    .page-template-template-page-legales .wp-page-content table{
        margin-top: 20px;
        border-radius: 12px;
        overflow: hidden;
        outline: 1px solid var(--neutral500);
        width: 100%;
        min-width: 600px;
        border-collapse: collapse;
    }

    .page-template-template-page-legales .wp-page-content table tr:first-of-type{
        background: var(--neutral800)!important;
        color: white;
        font-weight: 700;
    }

    .page-template-template-page-legales .wp-page-content table tr:nth-child(odd){
        background: var(--neutral200);
    }

    .page-template-template-page-legales .wp-page-content table th,
    .page-template-template-page-legales .wp-page-content table td{
        padding: 8px 12px;
        border: 1px solid #ddd;
        text-align: left;
    }
/* END LEGALES */

/**/

/* START 404 */
body.error404{
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

body.error404 main{
    flex: 1;
}
/* END 404 */

/**/

/* START AMELIA */
#amelia-container{
    margin: 0px!important;
}
/* END AMELIA */

/* START WOOCOMMERCE */
    section#checkout{
        font-size: 'DM Sans', sans-serif!important;
    }

    section#checkout .wc-block-components-checkout-step__description{
        font-size: 18px;
        line-height: 24px;
    }

    section#checkout .wc-block-components-checkout-step__heading{
        margin: 0px;
    }

    section#checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title:before {
        background: var(--maretameva);
        top: 7px;
        color: white;
        min-width: 32px;
        width: 32px;
        min-height: 32px;
        height: 32px;
        border-radius: 200px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-right: 2px;
    }

    /*BUTTONS*/
    section#checkout .wc-block-components-checkout-place-order-button{
        background: var(--maretameva);
        color: white;
    }

    section#checkout .wc-block-components-checkout-place-order-button:hover{ 
        background: var(--black);
        color: white
    }

    section#checkout .wc-block-components-totals-coupon__button{
        border-radius: 12px;
        margin-top: -3px;
        background: var(--black);
        color: white;
    }

    section#checkout .wc-block-components-totals-coupon__button:hover{ 
        background: var(--maretameva);
        color: white
    }

    /*PRODUCT*/
    section#checkout .wp-block-woocommerce-checkout-order-summary-block{
        background: white;
        border-radius: 24px;
    }

    section#checkout .wc-block-components-order-summary-item__quantity{
        display: none;
    }

    section#checkout .wc-block-components-order-summary-item__image{
        margin-top: 0px;
    }

    section#checkout .wc-block-components-order-summary-item__image img{
        border-radius: 6px;
    }

    section#checkout .wc-block-components-product-name{
        font-size: 'Overused Grotesk', sans-serif!important;
        font-size: 18px;
        line-height: 24px;
        font-weight: 600;
    }

    section#checkout .wc-block-components-product-metadata__description p{
        font-size: 'Overused Grotesk', sans-serif!important;
        font-size: 16px;
        line-height: 24px;
        color: var(--neutral500);
        font-weight: 300;
    }

    /* START INPUTS */
        section#checkout .wc-block-components-text-input{
            position: relative;
            font-family: 'Overused Grotesk', sans-serif;
            font-size: 18px;
            line-height: 20px;
            font-weight: 300;
        }

        section#checkout .wc-block-components-text-input label,
        section#checkout .wc-blocks-components-select label{
            font-family: 'Overused Grotesk', sans-serif;
            display: block;
            color: var(--neutral400);
            position: absolute;
            top: 27px;
            left: 12px;
            padding: 2px 4px;
            border-radius: 4px;
            background: white;
            z-index: 1;
            transition: var(--transition);
        }

        section#checkout .wc-block-components-text-input.is-active label,
        section#checkout .wc-blocks-components-select .wc-blocks-components-select__container label{
            transform: none;
            font-size: 16px;
            color: var(--maretameva);
            top: -11px;
            left: 12px;
        }

        section#checkout .wc-block-components-text-input input,
        section#checkout .wc-block-components-textarea,
        section#checkout .wc-blocks-components-select select{
            font-family: 'Overused Grotesk', sans-serif;
            padding: 13px 15px;
            width: 100%;
            box-sizing: border-box;
            background: white;
            border: 1px solid var(--neutral300);
            border-radius: 12px;
            transition: var(--transition);
        }

        section#checkout .wc-block-components-text-input.is-active input,
        section#checkout .wc-block-components-textarea.is-active,
        section#checkout .wc-blocks-components-select select{
            border: 1px solid var(--maretameva);
        }

        section#checkout .wc-block-components-text-input.has-error input,
        section#checkout .wc-block-components-textarea.has-error,
        section#checkout .wc-blocks-components-select.has-error select{
            border: 1px solid #bb0000;
        }

        section#checkout .wc-block-components-text-input input:focus-visible,
        section#checkout .wc-block-components-textarea:focus-visible,
        section#checkout .wc-blocks-components-select select:focus-visible{
            outline: 1px solid var(--maretameva);
        }

        /*SELECT*/
        section#checkout .wc-blocks-components-select select{
            -moz-appearance: none;
            -webkit-appearance: none;
            position: relative;
            cursor: pointer;
        }

        section#checkout .wc-blocks-components-select__container::after{
            content: '';
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cpolyline points='208 96 128 176 48 96' fill='none' stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E");
            width: 28px;
            height: 28px;
            display: block;
            position: absolute;
            top: 10px;
            right: 10px;
        }

        section#checkout .wc-blocks-components-select select::-ms-expand{
            display: none;
        }

        section#checkout .wc-blocks-components-select .wc-blocks-components-select__expand{
            display: none!important;
        }

        /*ERRORS*/
        section#checkout .wc-block-components-validation-error svg{
            width: 24px;
        }

        section#checkout .wc-block-components-validation-error span{
            font-size: 16px;
        }

        /*CHECKBOX*/
        section#checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{
            background: white;
            border: 1px solid var(--neutral300);
            transition: var(--transition);
        }

        section#checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked{
            background: var(--maretameva);
            border: 1px solid var(--maretameva);
        }

        section#checkout .wc-block-components-checkbox .wc-block-components-checkbox__mark{
            fill: white;
        }
    /* END INPUTS */

    section#checkout .wc-block-checkout__terms .wc-block-components-checkbox__label{
        font-family: 'DM Sans', sans-serif;
        font-size: 16px;
        color: var(--neutral400);
    }

    .woocommerce-order-received section#checkout h2{
        margin-bottom: 12px;
        font-size: 32px;
        line-height: 40px;
        font-weight: 600;
    }

    .woocommerce-order-received section#checkout h3{
        display: none;
    }

    .woocommerce-order-received section#checkout p.woocommerce-notice{
        margin: 12px 0px;
        font-size: 42px;
        line-height: 48px;
        font-weight: 600;
    }

    .woocommerce-order-received section#checkout .woocommerce-order-overview{
        padding: 20px;
        background: white;
        border-radius: 20px;
        border: 1px solid var(--neutral200);
    }

    .woocommerce-order-received section#checkout .woocommerce-table.woocommerce-table--order-details,
    .woocommerce-order-received section#checkout address{
        background: white;
        border-radius: 20px;
    }

/* END WOOCOMMERCE*/

/**/

/* START FOOTER */
    footer{
        background: var(--black)!important;
        border-radius: 32px 32px 0px 0px;
        font-family: 'Overused Grotesk', sans-serif;
        font-weight: 300;
    }

    footer hr{
        border-color: var(--neutral500);
    }

    footer a{
        transition: var(--transition);
    }


    footer a.active{
        color: var(--maretameva);
    }

    footer a:hover{
        color: var(--maretameva);
    }

    footer .upper{
        color: white;
        font-size: 18px;
        line-height: 24px;
    }

    footer .lower{
        color: var(--neutral400);
        font-size: 16px;
        line-height: 18px;
    }
/* END FOOTER */

/**/

/* START MEDIA QUERIES */

@media only screen and (min-width: 1024px){
    .product-card-container.two:not(.horizontal) .product-card:first-child{
        margin-right: 0;
    }
    .product-card-container.two:not(.horizontal) .product-card:last-child{
        margin-left: 0;
    }
}

@media (min-width: 1024px)  and (max-width: 1250px) {
    header .container .right{
        margin-top: 6px;
    }

    header a{
        padding: 2px;
        font-size: 16px;
    }

    header a.logo{
        min-width: 100px;
    }

    header a.btn{
        font-size: 16px;
        padding: 5px 10px;
    }

    .logo svg{
        width: 100px;
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --paddingX: 20px;
        --paddingY: 50px;
        --gap: 20px;
    }

    /* START HEADINGS - MEDIA QUERIES */
        h1{
            font-size: 42px;
            line-height: 48px;
        }

        h2{
            font-size: 36px;
            line-height: 40px;
        }

        h3{
            font-size: 32px;
            line-height: 36px;
        }

        h4{
            font-size: 28px;
            line-height: 32px;
        }

        h5{
            font-size: 24px;
            line-height: 28px;
        }

        h6{
            font-size: 20px;
            line-height: 24px;
        }

        p{
            font-size: 18px;
            line-height: 24px;
        }

        p.large{
            font-size: 24px;
            line-height: 28px;
        }
    /* END HEADINGS - MEDIA QUERIES */

    /* START HEADER - MEDIA QUERIES */
        header .container{
            min-height: 54px;
            height: 54px;
            max-height: 54px;
            border-radius: 32px;
            padding-top: 20px;
            flex-direction: column;
            overflow: hidden;
        }

        header .container .middle{
            padding-top: 80px;
        }

        header.scrolled,
        header.open{
            padding: 0px 8px;
            top: 12px;
        }

        header.scrolled .container,
        header.open .container{
            padding: 18px 20px;
        }

        header.open .container{
            padding: 18px 20px;
            backdrop-filter: blur(42px);
            -webkit-backdrop-filter: blur(42px);
        }

        header.scrolled a.logo,
        header.open a.logo{
            padding: 0px;
            top: 18px;
        }

        header.scrolled a.logo,
        header.open a.logo{
            left: 20px;
        }

        header a{
            font-size: 32px!important;
            line-height: 36px;
            padding: 0px;
        }

        header a.logo{
            position: absolute;
            min-width: none;
            top: 20px;
            left: 0px;
            min-height: 25px;
            max-height: 25px;
            margin-top: -5px;
        }

        header.open .container,
        header.scrolled.open .container{
            min-height: calc(100svh - 24px);
            height: calc(100svh - 24px);
            max-height: calc(100svh - 24px);
            gap: 12px;
            justify-content: start;
            overflow-y: scroll;
        }

        header #menu-mobile-icon{
            right: 3px;
        }

        header.scrolled #menu-mobile-icon,
        header.scrolled.open #menu-mobile-icon{
            top: 18px!important;
            right: 20px!important;
        }

        header.open #menu-mobile-icon{
            top: 18px!important;
            right: 20px!important;
        }
    /* END HEADER - MEDIA QUERIES */

    /**/

    /* START COMPONENTS - MEDIA QUERIES */
        /* START QUOTES - MEDIA QUERIES */
            .quotes-slide {
                padding: 24px 0px;
            }

            .quotes-border{
                display: none;
            }

            .quotes-slide div {
                font-size: 24px;
                line-height: 28px;
                width: 325px;
                height: 200px;
            }
        /* END QUOTES - MEDIA QUERIES */

        /* START TEXT REVEAL - MEDIA QUERIES */
            .text-reveal h2{
                font-size: 40px;
                line-height: 48px;
            }
        /* END TEXT REVEAL - MEDIA QUERIES */

        /* START REVIEWS CAROUSEL - MEDIA QUERIES */
            .reviews .before,.reviews .after{
                display: none;
            }

            .reviews .swiper-wrapper{
                display: flex;
            }

            .reviews .review > p{
                font-size: 20px;
                line-height: 24px;
            }

            .reviews .review .author .author-img{
                width: 42px;
                height: 42px;
            }

            .reviews .review .author .author-info > span:first-of-type{
                font-size: 20px;
            }
        /* START REVIEWS CAROUSEL - MEDIA QUERIES */

        /* START COMUNIDAD CTA - MEDIA QUERIES */
            .comunidad-cta .item{
                min-height: 480px;
            }

            .comunidad-cta .item:hover{
                width: 100%;
            }

            .comunidad-cta .item .content{
                top: 315px;
            }
        /* END COMUNIDAD CTA - MEDIA QUERIES */

        /* START PRODUCTS - MEDIA QUERIES */
            .product-card-container{
                grid-template-columns: repeat(1, 1fr)!important;
            }

            .product-card.horizontal,.product-card.horizontal.left{
                grid-template-columns: none!important;
            }

            .product-card.horizontal .head{
                order: 1;
            }
            
            .product-card.horizontal .body{
                order: 2;
            }
        /* START PRODUCTS - MEDIA QUERIES */

        /* START CURSO CARD - MEDIA QUERIES */
            .curso{
                padding: 110px 16px 16px 16px;
                border-radius: 24px;
            }

            .curso .tag{
                top: 16px;
                left: 16px;
            }

            .curso .tag.alt{
                left: 16px;
                top: 60px;
                right: auto;
            }

            .curso.expanded .title .description{
                flex-direction: column;
                align-items: start;
                gap: 4px
            }
        /* END CURSO CARD - MEDIA QUERIES */

    /* END COMPONENTS - MEDIA QUEIRES */

    /* START HERO - MEDIA QUERIES */ 
        .hero-container .hero,
        .hero-container.scrolled .hero{
            min-height: 80svh;
            padding: 80px 20px 32px 20px;
        }

        .hero-container.blog.scrolled{
            padding-bottom: 28px;
        }
    /* END HERO - MEDIA QUERIES */
}
/* END MEDIA QUERIES */