/*
Theme Name: Hora Cero Cero
Theme URI: http://example.com/hora-cero-cero
Author: Tomas Moral Parra
Author URI: https://github.com/TommoParra/
Description: A custom theme by Tomas Moral Parra
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hora-cero-cero
Tags: custom-theme, responsive, clean
*/


@charset "UTF-8";

/* Fonts */

@font-face {
    font-family: 'N27 thin';
    src: url('fonts/N27-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/N27-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'N27 Extralight';
    src: url('fonts/N27-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/N27-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'N27 Light';
    src: url('fonts/N27-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/N27-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'N27 Regular';
    src: url('fonts/N27-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/N27-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'N27 Bold';
    src: url('fonts/N27-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/N27-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Nimbus Sans L';
    src: url('fonts/NimbusSanL-Reg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/*--------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
    =root variables
----------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
-------------------------------------------------------- */
:root {

    /*--------------------------------------------------------
    =global styles root variables
    --------------------------------------------------------*/

    --onlyMobileFlex: flex!important;
    --onlyDesktopFlex: none!important;
    
    --onlyMobileGrid: grid!important;
    --onlyDesktopGrid: none!important;

    --onlyMobileBlock: block!important;
    --onlyDesktopBlock: none!important;

    --centerLeftTextAlign: left;


    /* =colors */
    --beige: #F8F9F3;
    --naranja: #E9532E;
    --verde: #BFC04C;
    --amarillo: #F3BD5B;
    --granate: #8C1A2E;
    --negro: #152119;


    /* =general styles root variables */
    --standardBorder: 1px solid var(--negro);

    --mainPadding: 0 24px;

    /*--------------------------------------------------------
    =structure root
    --------------------------------------------------------*/

    /* =card section root */
    --cardSectionGTC: repeat(1, 1fr);


    /*--------------------------------------------------------
    =components root
    --------------------------------------------------------*/

    /* =hero root  */
    --heroContentGTC: 1fr;
    --heroPadding: 40px 0px 0px 0px;
    --heroGap: 40px;
    --heroTxtGC: unset;
    --heroTxtGR: unset;
    --heroTxtGRG: 30px;
    --heroTxtWidth: 100%;
    --heroTxtPadding: 0px;
    --heroTitleMargin: 0px;
    --heroTitleFontSize: 3.7rem;
    --heroImgGC: unset;
    --heroImgGR: unset;
    --heroImgTransform: scaleX(-1);
    --heroImgWidth: 65%;
    --heroImgMargin: auto 0px 60px auto;

    /* =section title root */
    --sectionTitlePadding: 60px 0px 10px 0px;

    /* =separator 1 root */
    --separator1Padding: 30px 0px;

    /* =text box root */
    --textBoxPadding: 0px 10px 20px 10px;

    /* =title box root */
    --titleBoxPadding: 40px 0px 40px 10px;

    /* =picture box root */
    --pictureBoxPadding: 30px 0px;
    --pictureBoxDisplay: grid;
    --pictureBoxImgMargin: auto;

    /* =img box root */
    --imgBoxPadding: 20px 10px 20px 50px;

    /* =cta box root */
    --ctaBoxGC: 1/-1;
    --firstCTABoxBorderBottom: none;
    --secondCTABoxGC: 1;
    --secondCTABoxMargin: auto auto auto 0px;
    --ctaBoxFS: 12px;

    /* =multi info block root */
    --multiInfoBlockGTC: 1fr max-content;
    --multiInfoBlockGTR: unset;
    --multiInfoContent1GC: 1/-1;
    --multiInfoContent1GR: unset;
    --multiInfoContent2GC: 1/-1;
    --multiInfoContent2GR: unset;
    --multiInfoContent2BorderRight: none;
    --multiInfoContent2BorderLeft: var(--standardBorder);
    --multiInfoContent3GC: 1/-1;
    --multiInfoContent3GR: unset;
    --multiInfoContent3BorderLeft: var(--standardBorder);
    --multiInfoNoImgContent1GC: 1/-1;
    --multiInfoNoImgContent1GR: unset;
    --multiInfoNoImgContent2GC: 1/-1;
    --multiInfoNoImgContent2GR: unset;
    --multiInfoNoImgContent3GC: 1/-1;
    --multiInfoNoImgContent3GR: 2;
    --multiInfoNoImgContent4GC: 1;
    --multiInfoNoImgContent4GR: 3;
    --multiInfoNoImgContent5GC: 2;
    --multiInfoNoImgContent5GR: 3;
    --multiInfoNoImgContent5BB: none;

    /* =forms root */
    --formGap: 30px;
    --formPadding: 60px 20px 20px 20px;
    --inputPadding: 10px;
    --inputBorder: 1px solid var(--negro);
    --inputBorderRadius: 5px;
    --btnColor: var(--naranja);
    --formCTAExpandedWidth: 370px;
    --formCTAExpandedPosition: 10%;

    /* =product box root */
    --productBoxWidth: 90%;

    /* =video container root */
    --videoContainerHeight: max-content;
    --videoContainerVideoHeight: max-content;


    /*--------------------------------------------------------
    =sections root
    --------------------------------------------------------*/

    /* =section 5 root */
    --section5SecondCTABorder: none;

    /* =section 7 root */
    --section7SecondCTABorder: var(--standardBorder);
    --section7InfoBlockContent4BoxGR: 1;
    --section7InfoBlockContent2BoxGR: 2;
    --section7InfoBlockContent2BoxBorderBottom: none;
    --section7InfoBlockContent2BoxBorderLeft: var(--standardBorder);


    /* =section 9 root */
    --section9TitleBoxPadding: 40px 20px;
    --section9TextBoxPadding: 40px 20px;
    --section9SecondCTABorder: none;

    /* =footer root */
    --footerGap: 40px;
    --footerFlexDir: column;
    --footerMenu1TextAlign: center;
    --footerMenu2TextAlign: center;
    --footerMenu3TextAlign: center;
}




/*--------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
    =MEDIA QUERIES
----------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
-------------------------------------------------------- */



/*--------------------------------------------------------
    =530px 
--------------------------------------------------------*/
@media screen and (min-width: 530px) {
    :root {
        /* =forms 530px */
        --formCTAExpandedWidth: 400px;
        --ctaBoxFS: 15px;
    }
}

/*--------------------------------------------------------
    =768px 
--------------------------------------------------------*/
@media screen and (min-width: 768px) {
    :root {
        /*--------------------------------------------------------
        =structure 768px
        --------------------------------------------------------*/

        --centerLeftTextAlign: center;

        /* =card section 768px */
        --cardSectionGTC: repeat(2, 1fr);

        /* =footer 768px */
        --footerGap: 30px;
        --footerFlexDir: row;
        --footerMenu1TextAlign: left;
        --footerMenu2TextAlign: center;
        --footerMenu3TextAlign: right;

        /* =forms 768px */
        --formCTAExpandedPosition: 5%;

        /* =product box 768px */
        --productBoxWidth: 70%;

        /* =video container 768px */
        --videoContainerVideoHeight: 100%;

    }
}


/*--------------------------------------------------------
    =1100px 
--------------------------------------------------------*/
@media screen and (min-width: 1100px) {
    :root {

        /*--------------------------------------------------------
        =global styles 1100px
        --------------------------------------------------------*/

        --onlyMobileFlex: none!important;
        --onlyDesktopFlex: flex!important;

        --onlyMobileGrid: none!important;
        --onlyDesktopGrid: grid!important;

        --onlyMobileBlock: none!important;
        --onlyDesktopBlock: block!important;


        --mainPadding: 0px;

        /*--------------------------------------------------------
        =structure 1100px
        --------------------------------------------------------*/

        /* =card section 1100px */
        --cardSectionGTC: repeat(4, 1fr);

        /*--------------------------------------------------------
        =components 1100px
        --------------------------------------------------------*/

        /* =hero 1100px */
        --heroContentGTC: 1fr 1fr;
        --heroPadding: 97px 0px 0px 0px;
        --heroGap: 73px;
        --heroTxtGC: 1/-1;
        --heroTxtGR: 1;
        --heroTxtGRG: 15px;
        --heroTxtWidth: 55.68%;
        --heroTxtPadding: 0px 28px;
        --heroTitleMargin: 10px;
        --heroTitleFontSize: 5.625rem;
        --heroImgGC: 1/-1;
        --heroImgGR: 1;
        --heroImgTransform: none;
        --heroImgWidth: 49.34%;
        --heroImgMargin: auto auto auto 0px;

        /* =section title 1100px */
        --sectionTitlePadding: 66px 0 74px 0;

        /* =separator 1 1100px */
        --separator1Padding: 30px 100px;

        /* =text box 1100px */
        --textBoxPadding: 40px 50px;

        /* =title box 1100px */
        --titleBoxPadding: 113px 45px 37px 0px;

        /* =picture box 1100px */
        --pictureBoxPadding: 42px 0px 34px 123px;
        --pictureBoxDisplay: flex;
        --pictureBoxImgMargin: auto auto auto 0px;

        /* =img box 1100px */
        --imgBoxPadding: 21px 80px 31px 32px;

        /* =cta box 1100px */
        --ctaBoxGC: unset;
        --secondCTABoxGC: unset;
        --firstCTABoxBorderBottom: var(--standardBorder);
        --secondCTABoxMargin: auto auto auto 52px;

        /* =multi info block 1100px */
        --multiInfoBlockGTC: 50% 1fr max-content;
        --multiInfoBlockGTR: 1fr max-content;
        --multiInfoContent1GC: 1;
        --multiInfoContent1GR: 1;
        --multiInfoContent2GC: 1;
        --multiInfoContent2GR: 2;
        --multiInfoContent2BorderRight: var(--standardBorder);
        --multiInfoContent2BorderLeft: none;
        --multiInfoContent3GC: span 2;
        --multiInfoContent3GR: span 2;
        --multiInfoContent3BorderLeft: none;
        --multiInfoNoImgContent1GC: 1;
        --multiInfoNoImgContent1GR: 1;
        --multiInfoNoImgContent2GC: 2/4;
        --multiInfoNoImgContent2GR: 1;
        --multiInfoNoImgContent3GC: 1;
        --multiInfoNoImgContent3GR: 2;
        --multiInfoNoImgContent4GC: 2/3;
        --multiInfoNoImgContent4GR: 2;
        --multiInfoNoImgContent5GC: 3;
        --multiInfoNoImgContent5GR: 2;
        --multiInfoNoImgContent5BB: var(--standardBorder);

        /* =video container 1100px */
        --videoContainerHeight: 90%;



        /*--------------------------------------------------------
        =sections 1100px
        --------------------------------------------------------*/

        /* =section 5 1100px */
        --section5SecondCTABorder: var(--standardBorder);

        /* =section 7 1100px */
        --section7SecondCTABorder: var(--standardBorder);
        --section7InfoBlockContent4BoxGR:2;
        --section7InfoBlockContent2BoxGR: 3;
        --section7InfoBlockContent2BoxBorderBottom: var(--standardBorder);
        --section7InfoBlockContent2BoxBorderLeft: none;


        /* =section 9 1100px */
        --section9TitleBoxPadding: 69px 140px 40px 0px;
        --section9TextBoxPadding: 50px 80px 40px 56px;
        --section9SecondCTABorder: var(--standardBorder);

        /* =footer 1100px */
        --footerGap: 83px;

        /* =product box 1100px */
        --productBoxWidth: 50%;
    }
}



/*--------------------------------------------------------
 =global styles
--------------------------------------------------------*/

/* =scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--naranja);
}

::-webkit-scrollbar-thumb {
    background: var(--beige);
}



/*--------------------------------------------------------
=global styles
--------------------------------------------------------*/
* {
    transition: .33s;
    box-sizing: border-box;
    color: var(--negro);
    transition: .33s;
}

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

main {
    max-width: 1100px;
    margin: 0 auto 74px auto;
    padding: var(--mainPadding);
}

/* =fonts */
body,
p,
a,
li,
span,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'N27 Regular', sans-serif;
}


p,
span,
a {
    font-size: 0.9375rem;
    line-height: 1.375rem;
}

.onlyMobileFlex {
    display: var(--onlyMobileFlex)!important;
}

.onlyDesktopFlex {
    display: var(--onlyDesktopFlex)!important;
}

.onlyMobileBlock {
    display: var(--onlyMobileBlock)!important;
}

.onlyDesktopBlock {
    display: var(--onlyDesktopBlock)!important;
}

.onlyMobileGrid {
    display: var(--onlyMobileGrid)!important;
}

.onlyDesktopGrid {
    display: var(--onlyDesktopGrid)!important;
}


/*--------------------------------------------------------
=structure
--------------------------------------------------------*/

/* =card section */
.card-section {
    display: grid;
    grid-template-columns: var(--cardSectionGTC);
    grid-column-gap: 37px;
    grid-row-gap: 33px;
}


/* =multi-info block */
.multi-info-block {
    display: grid;
    grid-template-columns: var(--multiInfoBlockGTC);
    grid-template-rows: var(--multiInfoBlockGTR);
}

.multi-info-block .content-box:nth-child(1) {
    grid-column: var(--multiInfoContent1GC);
    grid-row: var(--multiInfoContent1GR);
    border-top: none;
    border-left: none;
    border-bottom: none;
}

.multi-info-block .content-box:nth-child(2) {
    grid-column: var(--multiInfoContent2GC);
    grid-row: var(--multiInfoContent2GR);
    border-right: var(--multiInfoContent2BorderRight);
    border-bottom: none;
    border-left: var(--multiInfoContent2BorderLeft);
}

.multi-info-block .content-box:nth-child(3) {
    grid-column: var(--multiInfoContent3GC);
    grid-row: var(--multiInfoContent3GR);
    border-top: none;
    border-right: none;
    border-left: var(--multiInfoContent3BorderLeft);
    border-bottom: none;
}

.multi-info-block.no-img {
    margin-top: 74px;
}

.multi-info-block.no-img .content-box:nth-child(1) {
    grid-column: var(--multiInfoNoImgContent1GC);
    grid-row: var(--multiInfoNoImgContent1GR);
    border-top: var(--standardBorder);
    border-bottom: var(--standardBorder);
}

.multi-info-block.no-img .content-box:nth-child(2) {
    grid-column: var(--multiInfoNoImgContent2GC);
    grid-row: var(--multiInfoNoImgContent2GR);
    border-right: none;
    border-bottom: var(--standardBorder);
}

.multi-info-block.no-img .content-box:nth-child(3) {
    grid-column: var(--multiInfoNoImgContent3GC);
    grid-row: var(--multiInfoNoImgContent3GR);
    border-right: var(--standardBorder);
}

.multi-info-block.no-img .content-box:nth-child(4) {
    grid-column: var(--multiInfoNoImgContent4GC);
    grid-row: var(--multiInfoNoImgContent4GR);
    border-right: none;
}

.multi-info-block.no-img .content-box:nth-child(5) {
    grid-column: var(--multiInfoNoImgContent5GC);
    grid-row: var(--multiInfoNoImgContent5GR);
    border-top: none;
    border-bottom: var(--multiInfoNoImgContent5BB);
}



.multi-info-block.no-img .cta-box {
    border-top: none;
    border-bottom: var(--standardBorder);
}

.multi-info-block .img-box {
    padding: var(--imgBoxPadding);
}

.multi-info-block .cta-box {
    grid-column: var(--ctaBoxGC);
    border-left: none;
}

/*--------------------------------------------------------
=components
--------------------------------------------------------*/

/* =section title */
.section-title {
    grid-column: 1/-1;
    display: flex;
    padding: var(--sectionTitlePadding);
}

.section-title h2 {
    margin: auto;
    font-family: 'N27 Regular', sans-serif;
    font-size: 1.875rem;
    font-weight: normal;
    line-height: 2.4375rem;
    text-align: var(--centerLeftTextAlign);
    text-transform: uppercase;
}

/* =btns */
.btn {
    display: flex;
    gap: 22px;
    border-radius: 30px;
    border: 1px solid var(--negro);
    padding: 6px 17px 8px 17px;
    max-width: max-content;
    align-items: center;
    font-weight: bold;
    background-color: transparent;
    cursor: pointer;
}

.btn span {
    position: relative;
    color: black;
}

.btn span::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 2px;
    width: 100%;
    transform: scale(1);
    height: 1px;
    background-color: black;
    transition: .33s;
    transform-origin: left;
}

.btn:hover span:after {
    transform: scale(0);
}


.CTA-btn {
    width: 100%;
    padding: var(--inputPadding);
    background-color: var(--btnColor);
    border: none;
    border-radius: var(--inputBorderRadius);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

/* =hero */
.hero {
    display: grid;
    grid-row-gap: var(--heroGap);
    padding: var(--heroPadding);
}

.hero-content {
    width: 100%;
    display: grid;
    grid-template-columns: var(--heroContentGTC);
}

.hero-img {
    grid-column: var(--heroImgGC);
    grid-row: var(--heroImgGR);
    transform: var(--heroImgTransform);
    width: var(--heroImgWidth);
    position: relative;
    margin: var(--heroImgMargin);
    z-index: 1;
}

.hero-content-text {
    grid-column: var(--heroTxtGC);
    grid-row: var(--heroTxtGR);
    display: grid;
    grid-row-gap: var(--heroTxtGRG);
    width: var(--heroTxtWidth);
    margin: auto 0px auto auto;
    padding: var(--heroTxtPadding);
    z-index: 2;
}

.hero-title {
    text-align: center;
    margin: auto;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    font-weight: 400;
}

.hero-content-text-title {
    margin-left: var(--heroTitleMargin);
    color: var(--naranja);
    font-size: var(--heroTitleFontSize);
    line-height: 5.3rem;
    text-transform: uppercase;
}

.hero-content-text-subtitle {
    margin-bottom: 7px;
    font-size: 2.1875rem;
    line-height: 2.375rem;
    color: var(--negro);
    text-transform: uppercase;
    font-weight: 400;
}

.hero-content-text-desctription {
    width: 84%;
    line-height: 1.1875rem;
    margin-bottom: 9px;
}

/* separator 1 */
.separator-1 {
    padding: var(--separator1Padding);
    border-top: 1px solid var(--negro);
    border-bottom: 1px solid var(--negro);
}

.separator-1>* {
    font-family: 'N27 Regular', sans-serif;
    font-weight: 400;
    line-height: 2.0625rem;
    font-size: 1.5625rem;
    text-align: var(--centerLeftTextAlign);
    text-transform: uppercase;
    color: var(--naranja);
}

/* =content boxes */
.content-box {
    display: flex;
    border: var(--standardBorder);
}

.img-box {
    display: flex;
    padding: 20px 40px;
}

.img-box>* {
    margin: auto;
    max-width: 100%;
}

.picture-box {
    display: var(--pictureBoxDisplay);
    padding: var(--pictureBoxPadding);
}

.picture-box img {
    margin: var(--pictureBoxImgMargin);
    max-height: 288px;
}

.picture-box .text-box {
    margin-top: 20px;
}

.title-box>* {
    margin: auto auto 0px auto;
    padding: var(--titleBoxPadding);
    font-size: 1.875rem;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 2.4375rem;
}

.text-box {
    display: grid;
    grid-auto-rows: min-content;
    grid-row-gap: 16px;
    padding: var(--textBoxPadding);
}

.text-box>* {
    font-size: 0.9375rem;
    font-weight: lighter;
    line-height: 1.1875rem;
}

.text-box a {
    text-decoration: underline;
}

.text-box-title {
    font-weight: bold;
    text-transform: uppercase;
}

/* =cta box */
.cta-box {
    display: flex;
    padding-right: 19px;
}

.cta-box>* {
    color: var(--naranja);
    margin: 19px auto 19px 0;
    text-transform: uppercase;
    font-size: var(--ctaBoxFS);
    line-height: 18px;
}

.cta-box.first-cta-box {
    border-bottom: var(--firstCTABoxBorderBottom);
}


.cta-box.second-cta-box {
    grid-column: var(--secondCTABoxGC);
    border-right: none;
}

.second-cta-box>* {
    margin: var(--secondCTABoxMargin);
}


.icon-box {
    padding: 14px 24px;
    cursor: pointer;
}

.icon-box>* {
    width: 30px;
    height: auto;
    margin: auto;
}

/* =full width CTA */
.fullwidth-cta-box {
    grid-column: 1/-1;
    padding: 19px 0px;
    border-right: none;
    border-left: none;

}

.fullwidth-cta-box>* {
    margin: auto;
    color: var(--naranja);
    font-size: .9375rem;
    line-height: 1.1875rem;
    text-align: var(--centerLeftTextAlign);
    font-weight: normal;
}

.fullwidth-cta-box a {
    color: var(--naranja);
    font-family: 'N27 Bold', sans-serif;
    text-decoration: underline;
}

/* =cards */

/*  =info-card */
.info-card {
    display: grid;
    grid-auto-rows: min-content;
    grid-row-gap: 23px;
    padding: 27px 31px;
    border: var(--standardBorder);
}

.info-card-title {
    font-size: 3.125rem;
    line-height: 2.4375rem;
}

img.info-card-title {
    height: 46px;
    width: auto;
}

.info-card-strong-text {
    font-family: 'N27 Bold', sans-serif;
}


/* =forms */

.form-CTA {
    position: fixed;
    bottom: var(--formCTAExpandedPosition);
    right: var(--formCTAExpandedPosition);
    width: 55px;
    height: 50px;
    background: var(--naranja);
    transition: .33s;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
}

.form-CTA:not(.form-CTA.expand) {
    animation: beat 5s infinite;
}

.form-CTA::after {
    position: absolute;
    bottom: -22px;
    left: -7px;
    content: 'Contact';
    font-size: .85rem;
    color: var(--negro);
}

.form-CTA::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 38px;
    width: 20px;
    height: 20px;
    clip-path: polygon(50% 20%, 0% 100%, 100% 100%);
    z-index: 3;
    background: var(--naranja);
    animation: beatBefore 5s infinite;
}

@keyframes beat {

    0%,
    50% {
        transform: scale(1);
    }

    51%,
    53% {
        transform: scale(1.1);
    }

    54%,
    60% {
        transform: scale(1);
    }

    60%,
    62% {
        transform: scale(1.1);
    }

    62%,
    100% {
        transform: scale(1);
    }
}

@keyframes beatBefore {

    0%,
    50% {
        transform: scale(1) rotate(20deg);
    }

    51%,
    53% {
        transform: scale(1.1) rotate(20deg);
    }

    54%,
    60% {
        transform: scale(1) rotate(20deg);
    }

    60%,
    62% {
        transform: scale(1.1) rotate(20deg);
    }

    62%,
    100% {
        transform: scale(1) rotate(20deg);
    }
}



.form-CTA.expand {
    bottom: 50%;
    right: 50%;
    width: var(--formCTAExpandedWidth);
    height: 629px;
    border-radius: 10px;
    transform: translate(50%, 50%);
    background-color: transparent;
    border: none;
    cursor: auto;
}

.form-CTA.expand::before {
    display: none;
}

.form-CTA.expand::after {
    display: none;
}


.wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--formGap);
    padding: var(--formPadding);
    border: var(--standardBorder);
    background-color: var(--beige);
    overflow: hidden;
    opacity: 0;
    transform: scale(0);
    transition: .3s;
    border-radius: 50%;
}

.form-CTA .close-modal {
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    display: none;
}

.form-CTA .close-modal .close-modal-line {
    width: 19px;
}

.form-CTA.expand .close-modal {
    display: flex;
}

.form-CTA.expand .wpcf7-form {
    border-radius: 10px;
    opacity: 1;
    overflow: visible;
    transform: scale(1);
}

.wpcf7 p:has(.form-field),
.wpcf7 p:has(.form-textarea) {
    position: relative;
    width: calc(50% - var(--formGap) / 2);
    padding: var(--inputPadding);
    border: var(--inputBorder);
    border-radius: var(--inputBorderRadius);
    font-size: 1rem;
}

.form-field,
.form-textarea {
    font: inherit;
    max-width: 100%;
    background: var(--beige);
    border: none;
    max-height: 100%;
}

.wpcf7 p:has(.form-field) span,
.wpcf7 p:has(.form-textarea) span {
    position: absolute;
}

.form-CTA .wpcf7 .wpcf7-not-valid-tip {
    color: var(--naranja);
    font-size: 0.85rem;
    font-weight: normal;
    display: block;
    position: absolute;
    bottom: -23px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    color: var(--naranja);
    font-size: 0.85rem;
    margin: 0px;
    padding: 0px;
    border: none;
}



.form-field:focus,
.form-textarea:focus {
    border: none;
    outline: none;
}

.wpcf7 p:has(.form-textarea) {
    width: 100%;
    height: 170px;
}

.wpcf7 p:has(.CTA-btn) {
    width: 100%;
}

.wpcf7 .form-btn:hover {
    background-color: var(--granate);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border: none;
    text-align: left;
    font-size: .85rem;
    color: var(--naranja);
    margin: 0 !important;
}

.form-CTA .wpcf7 form.sent .wpcf7-response-output {
    border: none;
    margin: 0px;
}

.form-CTA .wpcf7 form .wpcf7-response-output {
    border: none;
    margin: 0px;
    padding: 0px;
}

/*--------------------------------------------------------
=sections
--------------------------------------------------------*/

/* =section 2 */
.section-2 .info-card:nth-child(2) .info-card-title {
    color: var(--naranja);
    font-weight: 400;
}

.section-2 .info-card:nth-child(3) .info-card-title {
    color: var(--verde);
    font-family: 'N27 Light', sans-serif;
    font-size: 80px;
    font-weight: 300;
}

.section-2 .info-card:nth-child(4) .info-card-title {
    color: var(--amarillo);
}

.section-2 .info-card:nth-child(5) .info-card-title {
    color: var(--granate);
}

/* =section 3 */
.section-3 .multi-info-block {
    border-top: var(--standardBorder);
}

/* =section 5 */
.section-5 .multi-info-block {
    border-top: var(--standardBorder);
}

.section-5 .multi-info-block .cta-box:nth-child(4) {
    border-bottom: var(--section5SecondCTABorder);
}

/* =section 7 */
.section-7 .multi-info-block {
    border-top: var(--standardBorder);
}

.section-7 .multi-info-block .cta-box:nth-child(4) {
    border-bottom: var(--section7SecondCTABorder);
    grid-column: var(--section7InfoBlockContent4BoxGR);
}

.section-7 .multi-info-block .content-box:nth-child(2) {
    grid-row: var(--section7InfoBlockContent2BoxGR);
    border-bottom: var(--section7InfoBlockContent2BoxBorderBottom);
    border-right: var(--section7InfoBlockContent2BoxBorderLeft);
}

/* =section 9 */
.section-9 .title-box>* {
    padding: var(--section9TitleBoxPadding);
}

.section-9 .text-box {
    padding: var(--section9TextBoxPadding);
}

.section-9 .multi-info-block .cta-box:nth-child(4) {
    border-bottom: var(--section9SecondCTABorder);
}

/*--------------------------------------------------------
=page.php
--------------------------------------------------------*/
.page-header {
    display: flex;
    justify-content: center;
    padding: 64px 0;
}

.custom-content {
    font-family: 'Nimbus Sans L', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto 64px auto;
}

.custom-content p {
    font-family: 'N27 Regular';
    margin-bottom: 24px;
    font-size: 1rem;
}

.custom-content h1,
.custom-content h2,
.custom-content h3,
.custom-content h4,
.custom-content h5,
.custom-content h6 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-family: 'N27 Bold';
}

.custom-content h1 {
    font-size: 2.5rem;
}

.custom-content h2 {
    font-size: 2rem;
}

.custom-content h3 {
    font-size: 1.75rem;
}

.custom-content h4 {
    font-size: 1.5rem;
}

.custom-content h5 {
    font-size: 1.25rem;
}

.custom-content h6 {
    font-size: 1rem;
}

.custom-content ul,
.custom-content ol {
    margin: 16px 0;
    padding-left: 40px;
    font-family: 'N27 Regular';
    font-size: 1rem;
}

.custom-content ul li,
.custom-content ol li {
    margin-bottom: 8px;
}

.custom-content blockquote {
    border-left: 4px solid #ccc;
    padding-left: 16px;
    margin-left: 0;
    color: #666;
    font-style: italic;
    font-family: 'N27 Regular';
    font-size: 1rem;
}

.custom-content pre {
    background: #f5f5f5;
    padding: 15px;
    overflow: auto;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 4px;
    font-family: 'N27 Regular';
}

.custom-content code {
    background: #f4f4f4;
    padding: 2px 4px;
    font-size: 0.9rem;
    border-radius: 4px;
    font-family: 'N27 Regular';
}

.custom-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}

.custom-content table th,
.custom-content table td {
    border: 1px solid #ddd;
    padding: 10px;
    font-family: 'N27 Regular';
    font-size: 1rem;
}

.custom-content table th {
    background: #f4f4f4;
}

.custom-content img {
    max-width: 100%;
    height: auto;
    margin: 24px 0;
}

.custom-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.custom-content .alignleft {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

.custom-content .alignright {
    float: right;
    margin-left: 20px;
    margin-bottom: 10px;
}

.custom-content audio,
.custom-content video {
    display: block;
    max-width: 100%;
    margin: 24px 0;
}

.custom-content figure {
    margin: 24px 0;
}

.custom-content figcaption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    font-family: 'N27 Regular';
}


/*--------------------------------------------------------
=footer
--------------------------------------------------------*/

.footer {
    display: flex;
    flex-direction: var(--footerFlexDir);
    flex-wrap: wrap;
    gap: var(--footerGap);
    justify-content: space-between;
    max-width: 1100px;
    height: min-content;
    margin: 0 auto;
    margin-bottom: 74px;
    padding: var(--mainPadding);
}

.footer .logo-container {
    display: flex;
    width: 100%;
}

.footer .logo-container .logo {
    width: 133px;
    height: auto;
    margin: auto;
}

.footer-menu-container {
    display: grid;
    grid-auto-rows: min-content;
    grid-row-gap: 16px;
    height: min-content;
}

.footer-menu-container a {
    color: var(--negro);
    font-size: 15px;
    font-weight: auto;
    font-family: 'N27 Regular', sans-serif;
}

.footer-menu-container:nth-child(2) {
    text-align: var(--footerMenu1TextAlign)
}

.footer-menu-container:nth-child(3) {
    text-align: var(--footerMenu2TextAlign)
}

.footer-menu-container:nth-child(4) {
    text-align: var(--footerMenu3TextAlign)
}

/* =modal container */
.modal-content {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    backdrop-filter: blur(5px);
}

.modal-content.show {
    display: flex;
    z-index: 4;
}

.video-container {
    height: var(--videoContainerHeight);
    position: relative;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    padding: 90px 20px 20px 20px;
}

.video-container video {
    height: var(--videoContainerVideoHeight);
    max-height: 90vh;
    width: auto;
    max-width: 100%;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: .33s;
    z-index: 3;
}

.close-modal:hover {
    transform: rotate(180deg);
    background: rgba(0, 0, 0, 0.4);
}

.close-modal-line {
    width: 27px;
    height: 4px;
    border-radius: 5px;
    background-color: var(--naranja);
    transition: .001s;
}

.close-modal-line:nth-child(1) {
    transform: translate(0, 2px) rotate(-45deg);
}

.close-modal-line:nth-child(2) {
    transform: translate(0, -2px) rotate(45deg);
}

/* =product box */
.product-box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: var(--productBoxWidth);
    transform: translate(-50%, -50%);
    padding: 60px 20px 20px 20px;
    border: var(--standardBorder);
    background-color: var(--beige);
    opacity: 0;
    pointer-events: none;
    max-height: 80%;
    overflow-y: scroll;
}

.product-box.expand {
    opacity: 1;
    pointer-events: all;
}

.product-box .close-modal {
    top: 12px;
    right: 12px;
    display: none;
}

/* Loading spinner */
.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid #000;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -15px;
    /* Half the width and height to center it */
    display: none;
    /* Hidden by default */
}

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

    100% {
        transform: rotate(360deg);
    }
}

.product-content {
    display: grid;
    grid-row-gap: 20px;
}

.product-content h2 {
    text-align: center;
}

.product-description p {
    margin: 10px 0;
}


/* =complianz fix for footer's columns */
#cmplz-manage-consent {
    position: absolute;
}

/* =WooCommerce's checkout customization */


.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__total-price,
.wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__individual-prices {
    display: none !important;
}

.wc-block-components-order-summary-item__description {
    padding: 0 !important;
}

.wc-block-checkout__actions .wc-block-checkout__actions_row a {
    display: none !important;
}

.wc-block-components-button {
    background-color: var(--naranja) !important;
    border: none !important;
}

.wc-block-components-button span {
    color: white !important;
    text-transform: uppercase !important;
}

.grecaptcha-badge {
    visibility: hidden;
}