:root {
    --xsm: 360px;
    --sm: 640px;
    --md: 768px;
    --lg: 1024px;
    --spacing:10px;

    /* COLORES */
    --black:#101010;
    --grisBlanco: #ececec;
    --grisR: #313133;
    --naranjaR: #faae00;
    --lightOrangeR: #fdbc39;
}


/*
 COMMON
*/

.title-sm-mainfont-black{
    font-family:var(--mainFontBold);
    margin-bottom:15px;
    max-width: 340px;
    font-weight: var(--fw700);
    color: var(--grisR);
    font-size: 18px;
    line-height: 1.3em;
}
.text-normal{
    font-weight: normal;
    font-size: 18px;
}

.mainbtn{
    padding: 15px 20px;
    padding-top: 17px;
    line-height: 10px;
    margin-left: 0;
    position: relative;
    width:initial;
    min-width:250px;
    padding: 13px 22px;
    transition: all .2s ease;
    box-sizing: border-box;
    align-items:center;
    height:fit-content;
    height: -moz-fit-content;
    background-color:var(--naranjaR);
    border-radius:6px;
    overflow:hidden;
    font-size: 18px;
    font-family: 'ObjectSans-Bold.otf';
    display: inline-block !important;
    text-align: left;
    background-color:black;
    font-family:var(--mainFontRegular);
    margin:5px 8px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.04em;
    min-width: 0px;
    padding: 15px 20px;
    padding-top: 17px;
    line-height: 10px;
    margin-left: 0;
    
}
.mainbtn::before {
    background-color: #ffffff29;
    width: 100%;
    transition:all 0.3s ease;
    content: "";
    position: absolute;
    top:0px;
    left: -100%;
    display: block;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    border-radius: 6px;
}

.mainbtn.light{
    background-color: #4a4a4d;
    color: white;
}
.mainbtn.light .st3 {
  stroke: #faae09;
}

.title {
  max-width: none;
  font-family: "ObjectSans-Bold.otf";
  font-size: 40px;
  letter-spacing: 0.05em;
  line-height: 1.2em;
  color: #313133;
  display: block;
  padding-right: 100px;
}

 .marketingDigital::before{
    content: "MARKETING DIGITAL 360";
    font-size: 16px;
    color: #ffffff4a;
    width: 250px;
    height: 1px;
    /* background-color: #bfbfbf; */
    position: absolute;
    left: 0px;
    top: -100px;
    font-weight: 600;
    letter-spacing: 0.1em;
    font-family: var(--serif);
}


/*  */

.text-serifR{
    font-family: var(--serif);
    font-style: italic;
}


/* COMPONENTE SERVICIOS */
#servicios.services-dark .servicios .mainbtn{
    background-color: #4a4a4d;
    color: white;
}

#servicios.services-dark .servicios .mainbtn .st3{
    stroke:var(--naranjaR);
}

#servicios.services-dark .servicios h3 {
    color:white;
}

#servicios.services-dark .column p{
    color:var(--grey-8b);
    margin-bottom: 30px;
}

#servicios.services-dark .listaServicios .itemsServicios .column:hover{
    background-color: var(--darkGris); 
    box-shadow: 5px 5px 30px 0px rgb(0 0 0 / 10%);
}




/* FLEX */
.flex{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flex-col{
    flex-direction: column;
}
.flex-row{
    flex-direction: row;
}
.flex-col-reverse{
    flex-direction: column-reverse;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-nowrap{
    display: flex;
    flex-wrap: nowrap;
}
.justify-end{
    justify-content: flex-end;
}
.justify-start{
    justify-content: flex-start;
}
.justify-center{
    justify-content: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}
.items-center{
    align-items: center;
}

/* GRID */

.grid{
    display: grid;
}
.grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));

}


.none{
    display: none;
}
/* POSITIONS */
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.top-0{
    top:0;
}
.top-1{
    top: calc(  var(--spacing) * 1);
}
.top-2{
    top: calc(  var(--spacing) * 2);
}
.top-3{
    top: calc(  var(--spacing) * 3);
}
.top-10{
    top: calc(  var(--spacing) * 10);
}
.top-20{
    top: calc(  var(--spacing) * 20);
}
.top-25{
    top: calc(  var(--spacing) * 25);
}
.bottom-0{
    bottom:0;
}
.left-0{
    left:0;
}
.right-0{
    right:0;
}
.right-10px{
    right: calc(  var(--spacing) * 1);
}
.right-20px{
    right: calc(  var(--spacing) * 2);
}

/* OBJECT FIT */
.object-cover{
    object-fit: cover;
}

/* BACKGROUNDS */
.bg-greyR{
    background-color: var(--grisR);
}
.bg-darkGrey{
    background-color: var(--darkGris);
}
.bg-orange{
    background-color:var(--naranjaR);
}
.bg-lightOrange{
    background-color: var(--lightOrangeR);
}

.bg-white{
    background-color: white;
}
.bg-lightGrey{
    background-color: var(--grisClaro);
}
.bg-black{
    background-color: var( --black );
}


.bg-cover{
    background-size: cover;
}

.bg-grayscale{
    position: relative;
}

.bg-grayscale::before{
    content:"";
    filter:grayscale(1);
    position: absolute;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
}

.bg-overlay::after{
}
.bg-overlay::after{

}

.filter-grayscale{
    filter: grayscale(1);
}

/* FONT FAMILY */
.font-inter{
    font-family: "Inter", sans-serif;
}
.font-lora{
    font-family: "Lora", "serif";
}
.font-thin{
    font-family:var(--mainFontThin);
}
.font-serif{
    font-family: var(--serif);
}
.font-ObjectSans{
    font-family: "ObjectSans-Regular.otf", sans-serif;
}
.font-ObjectSans-bold{
    font-family: "ObjectSans-Regular.otf", sans-serif;
    font-weight: bold;
}
.font-main-bold{
    font-weight: bold;
    font-family: var(--mainFontBold);
}
.font-bold{
    font-weight: bold;
}
.font-light{
    font-weight: 300;
}
.font-normal{
    font-weight: normal;
}

.italic{
    font-style: italic;
}
.not-italic{
    font-style: normal;
}

/* TEXT TRANSFORM */
.normal-case{
    text-transform: none;
}
.uppercase{
    text-transform: uppercase;
}
/* COLOR */
.text-white ,a.text-white{
    color: white;
}
.text-greyR{
    color: var(--grisR);
}
.text-orangeR{
    color: var(--naranjaR);
}
.text-grey-8b{
    color: var(--grey-8b);
}
.text-blancoR{
    color:var(--blancoR);
}
.text-grisBlanco{
    color:var(--grisBlanco);
}
.text-darkGris{
    color:var(--darkGris);
}
/* FONT SIZE */
.text-sm{

}
.text-sm{
    font-size: 16px;
    line-height: 1.6em;
}
.text-m{
    font-size: 21px;
    line-height: 1.2em;
}
.text-m-2{
    font-size: 24px;
    line-height: 1.3em;
}
.text-l{
    font-size: 36px;
    line-height: 1.5em;
}
.text-lg{
    font-size: 40px;
    line-height: 52px;
}
.text-xl{
    font-size: 60px;
    line-height: 102px;
}
/* TEXTALIGN */
.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
/* OVERFLOW */
.overflow-hidden{
    overflow: hidden;
}
/* LINE-height */
.leading-0{
    line-height: 0;
}
.leading-sm{
    line-height: 1.3em;
}

/* PADDING */
.p-0{
    padding:0;
}
.p-1{
    padding: calc(  var(--spacing) * 1);
}
.p-2{
    padding: calc(  var(--spacing) * 2);
}
.p-3{
    padding: calc(  var(--spacing) * 3);
}
.p-4{
    padding: calc(  var(--spacing) * 4);
}
.p-5{
    padding: calc(  var(--spacing) * 5);
}
.p-6{
    padding: calc(  var(--spacing) * 6);
}
.p-8{
    padding: calc(  var(--spacing) * 8);
}
.p-9{
    padding: calc(  var(--spacing) * 9);
}
.p-10{
    padding: calc(  var(--spacing) * 10);
}


.pt-1{
    padding-top: calc(  var(--spacing) * 1);
}
.pt-2{
    padding-top: calc(  var(--spacing) * 1);
}
.pt-3{
    padding-top: calc(  var(--spacing) * 3);
}
.pt-4{
    padding-top: calc(  var(--spacing) * 4);
}
.pt-5{
    padding-top: calc(  var(--spacing) * 5);
}
.pt-6{
    padding-top: calc(  var(--spacing) * 6);
}
.pt-10{
    padding-top: calc(  var(--spacing) * 10);
}
.pt-15{
    padding-top: calc(  var(--spacing) * 15);
}
.pt-20{
    padding-top: calc(  var(--spacing) * 20);
}
.pt-40{
    padding-top: calc(  var(--spacing) * 40);
}
.pt-50{
    padding-top: calc(  var(--spacing) * 50);
}



.pb-0{
    padding-bottom: 0;
}
.pb-1{
    padding-bottom: calc(  var(--spacing) * 1);
}
.pb-2{
    padding-bottom: calc(  var(--spacing) * 1);
}
.pb-3{
    padding-bottom: calc(  var(--spacing) * 3);
}
.pb-4{
    padding-bottom: calc(  var(--spacing) * 4);
}
.pb-5{
    padding-bottom: calc(  var(--spacing) * 5);
}
.pb-6{
    padding-bottom: calc(  var(--spacing) * 6);
}
.pb-10{
    padding-bottom: calc(  var(--spacing) * 10);
}
.pb-15{
    padding-bottom: calc(  var(--spacing) * 15);
}

.pl-0{
    padding-left: 0;
}
.pl-1{
    padding-left: calc(  var(--spacing) * 1);
}
.pl-2{
    padding-left: calc(  var(--spacing) * 1);
}
.pl-3{
    padding-left: calc(  var(--spacing) * 3);
}
.pl-4{
    padding-left: calc(  var(--spacing) * 4);
}
.pl-5{
    padding-left: calc(  var(--spacing) * 5);
}
.pl-6{
    padding-left: calc(  var(--spacing) * 6);
}
.pl-7{
    padding-left: calc(  var(--spacing) * 7);
}
.pl-8{
    padding-left: calc(  var(--spacing) * 8);
}
.pl-9{
    padding-left: calc(  var(--spacing) * 9);
}
.pl-10{
    padding-left: calc(  var(--spacing) * 10);
}
.pl-15{
    padding-left: calc(  var(--spacing) * 15);
}

.pr-0{
    padding-right: 0;
}
.pr-1{
    padding-right: calc(  var(--spacing) * 1);
}
.pr-2{
    padding-right: calc(  var(--spacing) * 1);
}
.pr-3{
    padding-right: calc(  var(--spacing) * 3);
}
.pr-4{
    padding-right: calc(  var(--spacing) * 4);
}
.pr-5{
    padding-right: calc(  var(--spacing) * 5);
}
.pr-6{
    padding-right: calc(  var(--spacing) * 6);
}
.pr-15{
    padding-right: calc(  var(--spacing) * 15);
}


.py-3{
    padding-top: calc(  var(--spacing) * 3);
    padding-bottom: calc(  var(--spacing) * 3);
}


.py-4{
    padding-top: calc(  var(--spacing) * 4);
    padding-bottom: calc(  var(--spacing) * 4);
}
.py-5{
    padding-top: calc(  var(--spacing) * 5);
    padding-bottom: calc(  var(--spacing) * 5);
}
.py-6{
    padding-top: calc(  var(--spacing) * 6);
    padding-bottom: calc(  var(--spacing) * 6);
}
.py-10{
    padding-top: calc(  var(--spacing) * 10);
    padding-bottom: calc(  var(--spacing) * 10);
}
.py-15{
    padding-top: calc(  var(--spacing) * 15);
    padding-bottom: calc(  var(--spacing) * 15);
}
.px-2{
    padding-left: calc(  var(--spacing) * 2);
    padding-right: calc(  var(--spacing) * 2);
}

/* MARGIN */
.m-1{
    margin: calc(  var(--spacing) * 1);
}
.m-3{
    margin: calc(  var(--spacing) * 3);
}
.mt-1{
    margin-top: calc(  var(--spacing) * 1);
}
.mt-2{
    margin-top: calc(  var(--spacing) * 2);
}
.mt-3{
    margin-top: calc(  var(--spacing) * 3);
}
.mt-4{
    margin-top: calc(  var(--spacing) * 4);
}
.mt-5{
    margin-top: calc(  var(--spacing) * 5);
}
.mt-6{
    margin-top: calc(  var(--spacing) * 6);
}
.mt-7{
    margin-top: calc(  var(--spacing) * 7);
}
.mt-8{
    margin-top: calc(  var(--spacing) * 8);
}
.mt-9{
    margin-top: calc(  var(--spacing) * 9);
}
.mt-10{
    margin-top: calc(  var(--spacing) * 10);
}
.mt-30{
    margin-top: calc(  var(--spacing) * 30);
}
.mt-50{
    margin-top: calc(  var(--spacing) * 50);
}
.m-auto{
    margin: auto;
}
.mb-0{
    margin-bottom: 0;
}
.mb-1{
    margin-bottom: calc(  var(--spacing) * 1);
}
.mb-2{
    margin-bottom: calc(  var(--spacing) * 2);
}
.mb-3{
    margin-bottom: calc(  var(--spacing) * 3);
}
.mb-4{
    margin-bottom: calc(  var(--spacing) * 4);
}
.mb-5{
    margin-bottom: calc(  var(--spacing) * 5);
}
.mb-6{
    margin-bottom: calc(  var(--spacing) * 6);
}
.mb-7{
    margin-bottom: calc(  var(--spacing) * 7);
}
.mb-10{
    margin-bottom: calc(  var(--spacing) * 10);
}


.ml-0{
    margin-left: 0;
}
.ml-1{
    margin-left: calc(  var(--spacing) * 1);
}
.ml-2{
    margin-left: calc(  var(--spacing) * 2);
}
.ml-3{
    margin-left: calc(  var(--spacing) * 3);
}
.ml-4{
    margin-left: calc(  var(--spacing) * 4);
}
.ml-5{
    margin-left: calc(  var(--spacing) * 5);
}
.ml-6{
    margin-left: calc(  var(--spacing) * 6);
}
.mr-0{
    margin-right: 0;
}
.mr-1{
    margin-right: calc(  var(--spacing) * 1);
}
.mr-2{
    margin-right: calc(  var(--spacing) * 2);
}
.mr-3{
    margin-right: calc(  var(--spacing) * 3);
}
.mr-4{
    margin-right: calc(  var(--spacing) * 4);
}
.mr-5{
    margin-right: calc(  var(--spacing) * 5);
}
.mr-6{
    margin-right: calc(  var(--spacing) * 6);
}


.my-2{
    margin-top: calc(  var(--spacing) * 2);
    margin-bottom: calc(  var(--spacing) * 2);
}

.my-3{
    margin-top: calc(  var(--spacing) * 3);
    margin-bottom: calc(  var(--spacing) * 3);
}
.my-4{
    margin-top: calc(  var(--spacing) * 4);
    margin-bottom: calc(  var(--spacing) * 4);
}
.my-5{
    margin-top: calc(  var(--spacing) * 5);
    margin-bottom: calc(  var(--spacing) * 5);
}
.my-6{
    margin-top: calc(  var(--spacing) * 6);
    margin-bottom: calc(  var(--spacing) * 6);
}

/* WIDTH */

.w-auto{
    width: auto;
}
.w-full{
    width: 100%;
}
.w-1\/2{
    width:50%;
}
.w-1\/3{
    width:33.33333%;
}
.w-2\/3{
    width:66.66666%;
}

.w-1\/4{
    width:25%;
}
.w-3\/4{
    width:75%;
}
.w-48\%{
    width:48%;
}
.w-80\%{
    width:75%;
}
.w-70px{
    width: 70px;
}
.w-500px{
    width: 500px;
}

.w-70vw{
    width: 70vw;
}
/* MAX WIDTH */
.max-w-400px{
    max-width: 400px;

}
.max-w-60\%{
    max-width: 60%;

}
.max-w-70\%{
    max-width: 70%;

}
.max-w-50\%{
    max-width: 50%;

}
.max-w-full{
    max-width: 100%;

}

.max-h-850px{
    max-height: 850px;
}
.max-h-1300px{
    max-height: 1300px;
}

/* HEIGHT */
.h-0{
    height: 0px!important;
}
.h-5px{
    height: 5px;
}
.h-20{
    height: calc( var(--spacing)*20 );
}
.h-25{
    height: calc( var(--spacing)*25 );
}
.h-full{
    height: 100%;
}



/* MIN HEIGHT */
.min-h-80px{
    min-height: 80px;
}

/* BORDER */
.border{
    border:1px;
}
.border-2{
    border:2px;
}

.border-b{
    border-bottom:1px solid;
}
.border-b-2{
    border-bottom:2px solid;
}

.border-grey{
    border-color: var(--grisClaro);
    
}

/* BORDER-RADIUS */
.rounded-sm{
    border-radius: 4px;
}
.rounded-lg{
    border-radius: 10px;
}
.rounded-xl{
    border-radius: 35px;
}
/* Z-INDEX */
.z-index-1{
    z-index: 1;
}
.z-index-100{
    z-index: 100;
}

/* Fill */
.fill-greyR{
    fill: var(--grisR);

}
/* TRANSITION */
.transition-all{
    transition: all 2s;
}
.transition-all-fast{
    transition: all 0.1s;
}
.transition-04-ease-all{
    transition:0.4s ease;
}

/*
TRANSFORM
*/

.rotate-270{
    transform: rotate(270deg);
}

/* CURSOR */

.cursor-pointer{
    cursor: pointer;
}
/* BACKDROP FILTER  */
.backdrop-blur-sm{
    backdrop-filter: blur(8px);
}



/*
-----------------------------------
-----------------------------------
--------- MEDIA QUERYS ------------
-----------------------------------
-----------------------------------
*/
@media (max-width:1280px) { 
    .lg\:max-w-85\%{
        max-width: 85%;
    }
    .xlg\:p-3{
        padding: calc( var(--spacing) * 3 );
        padding: calc( var(--spacing) * 3 );
    }


    .xlg\:max-h-1000px{
        max-height: 1000px;
    }
     .xlg\:max-h-1300px{
        max-height: 1300px;
    }

}

@media (max-width: 1024px) {
}

@media (max-width: 1024px) {
    /* lg */
    .lg\:w-full{
        width: 100%;
    }
   
    .lg\:w-1\/2{
        width: 50%;
    }
     .lg\:p-3{
        padding: calc( var(--spacing) * 3 );
    }

    .lg\:none{
        display: none;
    }
}
@media (max-width: 768px) {
    /* .md...{} */
    .md\:top-auto{
        top: auto;
    }
    .md\:bottom-0{
        bottom:0;
    }
    .md\:bottom-10{
        bottom:calc( var(--spacing) * 10 )
    }
    .md\:bottom-20{
        bottom:calc( var(--spacing) * 20 )
    }
    
    .md\:w-full{
        width: 100%;
    }
    .md\:w-1\/2{
        width: 50%;
    }
    .md\:none{
        display: none;
    }
    .md\:pl-0{
        padding: 0;
    }
}


@media only screen and (max-width: 640px){
    .sm\:flex{
        display: flex;
    }
    .sm\:none{
        display: none;
    }

    /*GRID*/
    .sm\:grid-cols-1{
        grid-template-columns: repeat(1, minmax(0, 1fr));

    }
    
    .sm\:px-2{
        padding-left: calc( var(--spacing) * 2 );
        padding-right: calc( var(--spacing) * 2 );
    }
    .sm\:w-1\/2{
        width: 50%;
    }
    .sm\:w-full{
        width: 100%;
    }
    .sm\:max-w-100\%{
        max-width: 100%;
    }

    .sm\:max-h-2000px{
        max-height: 2000px;
    }
    .sm\:max-h-2500px{
        max-height: 2500px;
    }

    .sm\:absolute{
        position: absolute;
    }

    .sm\:text-m{
        font-size: 21px;
    }

    .sm\:text-l{
        font-size: 36px;
    }

    .sm\:p-0{
        padding:0;
    }

    /**/
    .branding .dcha{
        position: absolute;
        top:320px;

    }
    /* COMPONENTE ICONR */
    #servicio .iconR{
        background-color: var(--naranjaR);
        padding: 50px 30px 50px 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }
    #servicio .iconR h4,#servicio .iconR p{
        text-align: center;
    }



}

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

    .msm\:flex-wrap{
        flex-wrap: wrap;
    }

    .msm\:w-1\/2{
        width: 50%;
    }
    .msm\:w-full{
        width: 100%;
    }


    .msm\:text-m{
        font-size: 21px;
    }

    .msm\:p-2{
        padding: calc( var(--spacing) * 2 );
    }



}

@media only screen and (max-width: 360px){
    .xsm\:bg-darkGrey{
        background-color: var(--darkGris);

    }
    .xsm\:w-full{
        width: 100%;
    }

    .xsm\:text-m{
        font-size: 21px;
    }
    

}
/**
    Esto hay que quitarlo pero hay que ir poniendo en todos los que tengan flex la clase flex-wrap

*/

@media only screen and (max-width: 480px) {
    .flex {
        flex-wrap: wrap;
    }
}

/** HOVER **/
.hover\:bg-212122ad:hover{
    background-color:#212122ad;
    box-shadow: 5px 5px 30px 0px rgb(0 0 0 / 10%);
}


.group:hover .group-hover\:w-63px {
	width:63px;
}