:root{
    --morado:#8f00f0;
    --principal: #1f2a44;
        --principalDark :#1d273f;
        --principalLight: #4d6498;
    --complement: #e1ff7c;
    --yellow: #e1ff7c;
    --naranja:#ef7d00;

    --negro:#000;
    --casiOro:#8c7a66;
    --moradoDark :#3A0533;
        --moradoLight:rgb(193, 224, 214);
    --blanco:#fff;
    --grisLightest:rgb(243, 243, 243);
    --grisLight: #dbdbdb;
    --grisLightOp075:rgba(200, 200, 200, 0.75);
    --grisLightOp085:rgba(255, 255, 255, 0.85);
    --grisMed : #8a8a8a;
    --grisDark: #2e2e2e; /* 565656 */
    --dark: #4b494d;
    --light:#d7d7d7;
    --gap : 15px;
    --altHeader:72px;
    --padLeftXL:15px;
    --radio:8px;
    --difCont:0px;
}

.back-fluor{
  background-color: var(--yellow);
}

.back-complement{
  background-color: var(--complement);
}


.back-blanco{

    background-color: var(--blanco);
}

 
/*#ffe66d  #873949 */

.grad-purple{
background: -webkit-linear-gradient(90deg, #3a0533,#8f00f0);/* Chrome 10-25, Safari 5.1-6 */                          background: linear-gradient(90deg, #3a0533,#8f00f0);/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}   

.gold{ 
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

.text-grad{
    /* background: -webkit-linear-gradient(135deg, #3a0533, #8f00f0); */
    /* background: -webkit-linear-gradient(135deg, #9953e9, #ff6c8e ) ;  */
        /* background: -webkit-linear-gradient(135deg, #ff2300, #fd0c6e ) ;  
 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color:var(--blanco);
}
 
.b-rad{
    border-radius: var(--radio);
}

.back-grisDark{
    background-color: var(--grisDark);
}
 

.fondo_luz{
    background-color: var(--negro);
    background-image: url('../images/back_luz.jpg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 60%;
}

.back-negro{
    background-color: var(--negro);

    & .col-light{
        color: var(--light);
    }
}

.back-punteado{
   
/* background: #000000;
background: linear-gradient(310deg,rgba(0, 0, 0, 1) 0%, rgb(27, 27, 27) 100%); */
    & .col-light{
        color: var(--light);
    }
    position: relative;

    &:before{
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        opacity: 0.15;
         background-image: url('../images/punteado.svg');
    }
}

.back-punteado-w{

      position: relative;

    &:before{
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: -1;
        opacity: 0.3;
         background-image: url('../images/punteado.svg');
    }  
}

.back-grisLight{
    background-color: var(--grisLight);
}
.back-grisLightest{
    background-color: var(--grisLightest);
}

.back-blueDark{
    background-color: var(--principal);
}

.back-grisLightOp075{

    background-color: var(--grisLightOp075);

}

.back-grisLightOp085{

    background-color: var(--grisLightOp085);

}

.back-fon-hero{
    background-image: url('../images/fon_hero.jpg');
    background-size: 60svw;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.back-white{
    background-color: var(--blanco);
}

.back-grid{
    background-image: url('../images/grid_back_2.png');
}

.back-rainbow{
    background-color: var(--negro);
    background-image: url('../images/fon_rainbow.jpg');
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
}

.back-principal{
    background-color: var(--principal);
     color: var(--blanco);
}

.back-morado{
    background-color: var(--morado);
     color: var(--blanco);
}
.col-morado, .col-morado *{
    color: var(--morado);
}
.col-naranja, .col-naranja *{
    color: var(--naranja);
}
.col-esat, .col-esat *{
    color: var(--naranja);
}
.col-white, .col-white *{
    color: var(--blanco);
}

.col-grisMed, .col-grisMed *{
    color: var(--grisMed);
}

.col-grisDark, .col-grisDark *{
    color: var(--grisDark);
}
.col-complement, .col-complement *{
    color:var(--complement)
}

.col-principal, .col-principal *{
    color:var(--principal);
}

.col-principalDark, .col-principalDark *{
    color:var(--principalDark);
}

.col-principalLight, .col-principalLight *{
    color:var(--principalLight);
}




html, body{
    overflow-x: hidden;
}

.pos-rel{
    position: relative;
}


.pad-peq{
    padding-left: 15px;
    padding-right: 15px;
}

p:last-child{
    margin-bottom: 0;
}


.img-excites{

    padding-right:35px;
    display: flex;
    align-items: flex-start;

    justify-content: flex-end;
 
    width: 600px;
    
    @media screen and (min-width:1024px) {
           padding-right:60px;
    }

    & img{
        width: 100%;
        max-width: 400px;
        border-radius: 4px;
    }
}

.pad-gris-career{
    padding: 30px !important;
    border-radius: 8px;
}


/* HERO */

.technical_diagonal{
    position: absolute;
    top:0;
    right:0;
    z-index: 0;
    max-width: 800px;
    transform: translate(10%, -70%);
    opacity: 0.5;
}



.cont-img-bord{ 
    display: flex;
    align-items: end; 

    position: relative;
 

       /* transform: translateX(-1 *  var(--difCont)); */
 

    /* width: calc(100% + var(--difCont)); */

    @media screen and  (min-width:768px) (max-width:1280px) {
        padding-right: 30px; 
    }



    & .img-float-nature{
    position: absolute; 
    
    opacity: 0.75;
    
    object-fit: cover;
    object-position: center;
    /* aspect-ratio: 1440/810 ; */
    /* width: calc(100% + var(--difCont) ) ;  */
    /* left :   -1 *  var(--difCont); */

    left:0;
    right:0;
    top:0;
    bottom: 0;

 
   
    /* min-height: 400px; */
    border-radius: 8px;
/* 
    @media screen and (max-width:1280px){
         right: 30px ;  
    } */



}


}

.img-ref-nature{
    @media screen and (min-width:768px) {
         aspect-ratio: 1440/810;
    }
    
}

.cont_float_nature{

  position: relative;
    /*  height: 100%;  */
    border-radius: 8px;
     @media screen and (min-width:768px) {
transform:translateX(   calc(-1 *  var(--difCont))  ) ; 
  width: calc(100% + var(--difCont));
      margin-right: calc(-1 *  var(--difCont)) ;  
          position: absolute; 

     }
    

    /* */
    /* aspect-ratio: 1440/810; */
    overflow: hidden;
    top:0;


    & img{
        object-fit: cover;
        object-position: bottom center;
        /* border:3px solid blue; */
        width:100%;
        height: 100%;

        /* position: absolute;
        top:0;
        bottom: 0;
        right: 0;
        left: 0; */  
    }

    overflow: visible;

    &:before{
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: var(--complement);
        border-radius: var(--radio); 
        top: 0;
        right:0; 
        transform: translate(50% , -50%);
        mix-blend-mode: multiply;

    }
    
    &:after{
        content: "";
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: var(--complement);
        border-radius: var(--radio); 
        top: 50px;
        right:-50px; 
        transform: translate(100% , 0);
        mix-blend-mode: multiply;

    }
}

/*
.img-peq-quad{
    max-height: 250px;
     @media screen and (max-width:1280px) {
max-height: 100px;
     }
}

*/

.img-peq-quad{
    & img{
        height: 100%;
        max-height: 250px;
             @media screen and (max-width:1280px) {
max-height: 150px;
     }
    }
}

.img-nature{

    @media screen and (min-width:1024px) {

             height: 450px;
        
    } 

}

 



.flor_right{
    position: absolute;
    bottom: 0;
    right:0;
    max-width:850px;
    height: auto;
   
 

}

.cubo-right{

      position: absolute;
    bottom: 50px;
    right:50px;
    max-width:850px;
    height: auto;  
}

.particles-right{
    position: absolute;
    bottom: 0;
    right:0;
    max-width:950px;
    height: auto;
    mix-blend-mode: difference;
}

.tit-page{
    line-height: 100%;
    padding-bottom:15px
}

.cubo-float{
    max-width: 700px;
  
}


.damero-right{
    position: relative; 
    &:before{
        z-index: 10; 
        background-image: url('../images/damero_V.svg');
        background-position: top right;
        opacity: 0.5;
        z-index: 100;
        background-size: 1%;

        background-repeat: repeat-y;
        position: absolute;
        content: "";
        top:0;
        right:0;
        left:0;
        bottom:0;
        pointer-events: none;
    }

}

.cont-cottage{
      &:before{
background-size: 2%;
opacity: 0.5;
background-position: top left;
      }
}

.img-ico{
    max-width: 80px;
    margin-bottom: 20px;

@media screen and (max-width:768px) {
    max-width: 60px;
    margin-bottom: 10px;
    
    
}

}


/*FLECHA */
.img-union{
    margin: 10px;
}

.cont-flecha-union  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:   0 ;
    position: relative;
}

.flech-union-izq{
    transform: rotate(180deg);
    overflow: visible;
}

.cont-flecha-union{
    &:before{

        content: "";
        position: absolute;
        width:50svw;
        height: 1px ;
        background-color: var(--negro);
        top:calc(50% - 0px);
        left:0;
        

    }
}

.cont-flecha-union:has(.flech-union-izq){

 

    &:before{
 
        left: unset;
 
        right:0;
        

    }
 
   
    


}

/*APRENDERAS*/

.img-nature{
    @media screen and (min-width:768px) {
   /*transform: translateY(-25%);    */
    }
    
}


.listado_aprenderas{
    list-style: none;
    padding-left: 0;
    margin-left: 0;

    & li{
        margin-bottom: 10px;
        font-size: 18px;
        padding-bottom: 10px;

        border-bottom: 1px solid var(--grisMed);

        &:last-child{
            border: 0;
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }
}

.cont-img-bord{
    height: 100%;
  
    position: relative;
    &:after{
        display: none;
        position: absolute;
        top:0;
        left: 0;
        z-index: 100;;
        transform: translate(-50%, -50%);
        content: "";
        width: 30px;
        height: 30px;
        border: 1px solid var(--grisDark);
        border-bottom: 0;
        border-right: 0; 
        
    }


    &:before{
        display: none;
        position: absolute;
        bottom:0;
        right: 0;
        z-index: 100;;
        transform: translate(50%, 50%);
        content: "";
        width: 30px;
        height: 30px;
        border: 1px solid var(--grisDark);
        border-top: 0;
        border-left: 0; 
        
    }

}
 
/* TEXTOS */


.after_li_izq{
    position: relative;
    &:after{
        content: "";
        position: absolute;
        width:25svw;
        top: 25%;
        left:0;
        transform: translateX(-100%);
        height: 2px;
        background-color: var(--negro);



    }

}



.offset-sec{
    @media screen and (min-width:1600px) {

        margin-left: 625px;
      
        
        
    }
}

.h3-page{

}


.back-lineas-doradas{
    background-image: url('../images/lineas_doradas.svg');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
}


/*PADDINGS*/

.max-1200{
    max-width: 1200px;
    }

.pad-header{
    padding: calc( var(--altHeader) * 2) 0;
}


.container{
    padding:0;
    /* border:1px solid rgb(255, 255, 255); */
    max-width: calc(100% - var(--gap) * 2); 

    @media screen and (min-width:1400px) {
            max-width: calc(100% - var(--gap) * 6); 
    }
    @media screen and (min-width:1600px) {

        max-width: 1600px
        
    }

    &.max-1200{
    max-width: 1200px;
    }

    &.max-1024{
    max-width: 1024px;
    }
}

.container-left{

    padding-left:  calc(  var(--gap) * 1);

    @media screen and (min-width:768px) {
        padding-left:  calc(  var(--gap) * 2);
    }

    @media screen and (min-width:1400px) {
       padding-left: calc(  var(--gap) * 6); 
    }

        @media screen and (min-width:1600px) {
       padding-left: var(--padLeftXL); 
    }



}

.pad-peq{
    @media screen and (max-width:768px){
        padding: var(--gap);
    }

}
.py-gap{
    padding-top: var(--gap);
    padding-bottom: var(--gap);

    @media screen and (min-width:1024px) {
            padding-top: calc(2 * var(--gap));
    padding-bottom: calc(2 * var(--gap));
    }

}

/*MARGIN */

.mb-30{
    margin-bottom: 30px;
}

/* HEADER */



.logo-header{
    height: 30px;
    @media screen and (min-width: 768px) {
    height: 40px;    
    }
    
}

.diamantito{
    margin-bottom: 15px;
    max-width: 20px;
}

.listado-header{

    /* max-width: 1300px; */
    row-gap: 15px;
    
    margin-top: 30px;

        @media screen and (min-width:768px) {

            margin-top: 0;
            row-gap: 30px;
        }
    & li{ 

        display: flex;
        flex-direction: column;
        
        white-space: unset; 
        font-weight: 300;

        color: var(--blanco);

        font-size: 18px;
        line-height: 1.1; 

        display: flex;
        flex-direction: column;
        justify-content: flex-end;

          border-radius: 8px;

        @media screen and (min-width:768px) {

            
        min-height: 175px;

              
        border-top-left-radius: 36px;
        border-bottom-right-radius: 36px;

                &:after{
            content:"";
            z-index: 10;
            position: absolute;
            top:15px;
            right: 15px;
            width: 30px;
            height: 30px;
            border-radius: 500px;
            border:1px solid var(--complement);
        }
            
        }



 

        & p{
            max-width: 300px;
        }
        padding : 15px; 
        background-color: var(--principal);
        position: relative;



    }
}

.back-luz{
    position: absolute;
    background-size: contain;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;  
    background-image: url('../images/iris.jpg');
    background-repeat: no-repeat;
 
    background-position: top right; 
    opacity: 0.5;
    transform: translateY(-20%); 
    display: none;
}


.back-velvet{
    position: absolute;
    background-size: cover;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;  
    background-image: url('../images/fon-velvet.jpg');
    background-repeat: no-repeat; 

 
    background-position: top left; 
    opacity: 0.5;
    transform: translateY(-20%);
}

.back-reflejos{
    position: absolute;
    mix-blend-mode:multiply;
    left:0;
    right:0;
    top:0;
     z-index: 0;
  

}

.dimantes{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100; 
    width: 500px;
    bottom: -35%;
    transform: translateX(10%); 
     
}

.logo_eidm_vert{ 
    height: 120%;
    aspect-ratio: 82/258; 
    position: absolute;
    transform: translateX(125%);
    opacity: 0.25;
}
.logo_eidm_vert_img{

    height: 100%;;
    width: auto;
    max-height: 100%;;
    position: absolute;

}

.video_tela{
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    z-index:0;; 
}


.loguito_3d{
    max-width: 350px;
    position: absolute;
    top:0;
    right:0;
    transform: translate(30% , -20%);
    mix-blend-mode: multiply;
}


.cont-img-chica{
position: relative;

&:after{
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    background-image:url('../images/loguitio_solo.png');
    background-position: center;
    background-size: contain;
    bottom: 0;
    left:0;
    transform: translate(-50% , 40%) rotate(15deg);
    
}
}


/* CARDS */

.row-cards{
    gap: var(--gap);
    
}

.card-sport{
    flex: 1;
    padding: 16px;
    border-radius: var(--radio);
    background-color: var(--blanco);
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);

    & .card-tit{
        color:var(--Principal);
        font-size: 14px;;
    }
& .card-cont{

    color:var(--grisDark);
    font-size: 24px;;

}


}

/* HERO */

.logo_oro{
    position: absolute;
    bottom:-70px;
    right:50px;
    z-index: 10;
    max-width: 350px;

}


#mask-svg {
  width: 0;
  height: 0; 
}


/* .masked { 
  width: 100%;
  height: 100%; 
  clip-path: url(#clip-shape);
  -webkit-clip-path: url(#clip-shape);
  overflow: hidden;
} */

.masked {
  aspect-ratio: 680.63 / 600;
  width: 100%;
  height: auto;
  clip-path: url(#clip-shape);
}

.masked img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cont-swiper-arco{
    border-top-left-radius: 500px;
    border-top-right-radius: 500px;
    overflow: hidden; 
      aspect-ratio: 2.25/3;
      max-height: 600px;
      max-width: 500px;
 
  

}

.swiper-arco{   

  
    width: 100%;
    max-width: 600px; 

    height: auto; 
}

.swiper-slide-arco{ 
        height:100%;


    & img{

        width: 100%;
        object-fit: cover;

  height:100%; 
    }
 
}

.hexa_img {


    position: relative;
  
  width: 100%;
  max-width: 600px; 
  height: auto;
  background-image: url('../images/hero/hero_1.jpg');
  background-size: cover;
  background-position: center;

  mask-image: url('../images/mascara_hexa.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  /* Para Safari */
  -webkit-mask-image: url('../images/mascara_hexa.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
 

}

.cont_hexa_img{

    position: relative;
    width: 100%;
    height: 100%;;
    
    &:before{
        z-index: 10;
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        top:0;
        right: 0;
        content:"";
        width:30%;
        height: auto;
        aspect-ratio: 1;
        background-image: url('../images/hex_li_morado.svg');



    }

}

.hexa_flota{
    position: absolute;
    top: -75px;
    right: -75px;
    max-width: 175px;
    z-index: 100;

       display: none;
    @media screen and (min-width:1024px) {
        display: flex;
        
    }

}


.hexa_flota_gris{
 
        position: absolute;
    bottom: -75px;
    right: 0;
 
    z-index: 100;
    opacity: 0.15;
    width: 500px;
    height: auto;
    transform: translate( 75%, 50%);
       display: none;
    @media screen and (min-width:1024px) {
        display: flex;
        
    }
}

.swiper-hexa{
    overflow: visible;
}



.fondo_collar{
    background-image: url('../images/collar.jpg');
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width:100%;
    height: 45%;;
    top: 10%;
     left: -5%;
     z-index:10;
     mix-blend-mode: multiply;

}

.fondo_tela_moarada{

    background-color: var(--negro);
    background-image: url('../images/fondo_tela_morada.jpg');
    background-position: bottom left;
    background-size: contain;
    background-repeat: no-repeat;
}

.fondo_galaxia{
    background-image: url('../images/fondo_particles.jpg');
        background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
}

.fondo_galaxia_negro{
    background-image: url('../images/fondo_particles_negro.jpg');
        background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    background-color: var(--negro);
}

.back_rays{

    width: 100svw;
    height: 100svh;
    top:0;
    left:0;
    right:0;
    z-index:-1;
    position: absolute;
    background-color: var(--negro); 
    
}

& .in_back_rays{
 
    content:"";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    /* bottom:15svh; */

    /* background-image: url('../images/back_hero.jpg'); */

    background-image: url('../images/technical_art_back_redux.jpg'); 

    background-size: contain;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top  right;
   
}

.back-puntos{
    background-image: url('../images/fondo_puntos.svg');
    background-repeat: repeat;
}

.back-diamantes{
    background-image: url('../images/fondo_diamantes.svg');
    background-repeat: repeat;

}


.back-puntos_morados{
    background-image: url('../images/fondo_puntos_morados.svg');
    background-repeat: repeat;
}

.back-diamante{
    background-image: url('../images/fondo_diamante_red.svg');
    background-repeat: repeat;
}
 

.pad-seccion{
    padding-top: 50px;
    padding-bottom: 50px;
    @media screen and (min-width:768px){

    padding-top: 75px;
    padding-bottom: 75px;

    } 

    @media screen and (min-width:768px){

    padding-top: 125px;
    padding-bottom: 125px;

    } 

}

.pad-seccion.back-futbol, .pad-seccion.back-grisLightest{
        padding-bottom: 50px;
        @media screen and (min-width:768px){
            padding-bottom: 100px;
        }
        @media screen and (min-width:1024px){
            padding-bottom: 150px;
        } 
 }

 .pad-seccion-max{
            
        @media screen and (min-width:768px){
            padding-bottom: 100px;
                 padding-top: 100px;
        }
        @media screen and (min-width:1024px){
            padding-bottom: 200px;
                 padding-top: 200px;
        } 
 }

.item-desta{

 
    padding-left: 0 !important;
    padding-right: 0 !important;
        
    border-radius: var(--radio);

    @media screen and (min-width:768px) {
        /* min-height: 400px; */
    }

    @media screen and (max-width:768px) {
        margin-bottom: 30px;;
    }


    & .tit{
        /* color:var(--PrincipalDark); */
        font-weight: 600;
        max-width: 300px; 
        font-size: 28px;
        line-height: 1;
        margin-bottom: 30px;

        /* background: -webkit-linear-gradient(135deg,  #8A6E2F  , #FDB931  , #9f7928 , #8A6E2F);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; */

        /* color:var(--blanco); */

        /* background: radial-gradient(ellipse farthest-corner at right bottom, #8A6E2F 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */

         

        @media screen and (max-width:768px) {
            padding-right: 35px;
            margin-bottom: 25px;
            font-size: 24px;
            
        }
    }

    & p{
        font-size: 16px;
        /* color:var(--grisDark); */
        font-weight: 300;
        line-height: 1.3;
    }

}

*[class^="box-"] {
  position: relative;

  &:before{
    content: "";
    position: absolute;
    width:40px;
    height: 40px;
    top:25px;
    right:15px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}
}

/* .box-especial{
      &:before{
    background-image: url('../images/icono_special.svg');
      } 
}
.box-network{
      &:before{
    background-image: url('../images/icono_newtwork.svg');
      }
     
}
.box-empleo{
      &:before{
    background-image: url('../images/icono_empleo.svg');
      }
     
} */

.slide-galeria img{
    border-radius: var(--radio);
    overflow: hidden;
    margin-bottom: 20px;
}


.item-specs{
    font-size: 25px;
    line-height: 115%;
    padding: 15px;
}

.listado-unique{
    @media screen and (max-width:768px) {

        & .item-specs{
            margin-bottom: 30px;
        }
        
    }
}


.img-fit{
    object-fit: cover;
    object-position: center;
    border-radius: var(--radio);
}



    @media screen and (min-width:768px) {

    .cont-img-who{
        padding-right: 30px;        
    }
    .cont-list-who{
        padding-left: 30px;
    }

}

.cont-img-who{

    @media screen and (min-width:1280px) {
        max-width: 40%;
    }
}

.cont-list-who{
    @media screen and (min-width:1280px) {
        max-width: 60%;
    }

}

.list-who{

    margin-left: 0;
    padding-left: 0;

    list-style:  none;


         & li{  
             border: 0;

             width: 100%;
 
                 max-width:calc( ( 100%  - (var(--gap)*2)   )   / 3 )  !important;
                

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

    flex-direction: column;

        & li{
            max-width: 100% !important;
 
        }


   }

    & li{
        padding-bottom: 10px;        
        padding-top: 10px;
        border-bottom: 1px solid var(--grisDark);

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

    margin-bottom: 20px;
    border: 0;
    }



        &:last-child{

            border-bottom: 0;
        }
        
    }

        @media screen and (min-width:1280px) {

            display: flex;
            gap:15px;

            & li{
                border: 0;
            }

            
            
        }



         @media screen and (min-width:480px) and (max-width:768px) {

            & li{

                &:last-child{
                    max-width: 100%;;
                }
            }


         }
    

}



/* GRID */


/* .master-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 15px;
grid-row-gap: 15px;
}

.grid-sec-1 { grid-area: 1 / 1 / 3 / 2; }
.grid-sec-2 { grid-area: 3 / 1 / 5 / 2; }
.grid-sec-3 { grid-area: 1 / 2 / 5 / 3; }
.grid-sec-4 { grid-area: 3 / 3 / 5 / 4; }
.grid-sec-5 { grid-area: 1 / 3 / 3 / 4; }
.grid-sec-6 { grid-area: 5 / 3 / 7 / 4; }
.grid-sec-7 { grid-area: 7 / 3 / 9 / 4; }
.grid-sec-8 { grid-area: 5 / 1 / 9 / 3; } */




.master-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 15px;
grid-row-gap: 15px;
}
 

.grid-sec-1 { grid-area: 1 / 1 / 3 / 2; }
.grid-sec-2 { grid-area: 1 / 3 / 2 / 4; }
.grid-sec-3 { grid-area: 2 / 3 / 3 / 4; }
.grid-sec-4 { grid-area: 1 / 2 / 3 / 3; }
.grid-sec-5 { grid-area: 3 / 3 / 4 / 4; }
.grid-sec-6 { grid-area: 3 / 1 / 5 / 2; }
.grid-sec-7 { grid-area: 3 / 2 / 4 / 3; }
.grid-sec-8 { grid-area: 4 / 2 / 5 / 3; }
.grid-sec-9 { grid-area: 4 / 3 / 5 / 4; }


.row-img-list{
    display: flex;
    justify-content: end;
    margin-bottom: 25px;
    align-items: start;
}

.item-specs{
    justify-content: space-between;
    border-radius: var(--radio);
    border:1px solid var(--blanco);
    padding-top:15px;
    padding-bottom: 35px;
    backdrop-filter: blur(10px);
 
    & .img_list{
        width: 25px;
        height: auto;
        transition: all 0.3s;
    }

    & p{
        padding-right: 25px;
    }


    &:hover{

        & .img_list{
            transform: rotate(180deg);
        }

    }

    &.borde-dark{border-color: var(--dark);}

}



.item-specs:has(img) , .item-specs:has(h3){ 
    /* padding: 0;
    bordeR:0; */
}
 

.back-futbol{

    position: relative;
    overflow: hidden;

}

.back-futbol:after{
        content: "";
        background-color: var(--Principal);
        opacity: 0.92;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-position: top right;
        background-size: cover;
        z-index: -1; 
}

.back-image-fashion{
        
        background-image: url('../images/tela.jpg');
        position: absolute;
        
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-position: top right;
        background-size: cover;
        z-index: 1; 
        opacity: 0.5;
}

.swiper-galeria-path, .swiper-galeria-experience{
    position: relative;
    max-width: 100svw;

    &:after{
        content: "";
        background: #ffffff;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        top:0;
        bottom: 0;
        right: 0;
        width: 200px;
        position: absolute;
        z-index: 100;
        pointer-events: none;

    }
}

.bot-galeria-path{

    @media screen and (max-width:768px) {
        margin-bottom: 30px;
        margin-top: 20px;
    }
}

.bot-flech-gal{
    /* border-radius: 500px; */
    background-color: var(--Principal);
    aspect-ratio: 1;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
 

    & img{
        max-width: 35px;

    }



    &.prev-gal{
        & img{
            transform: rotate(180deg);
        }
    }

    margin-right: 20px;

    &:last-child{margin-right: 0;}

    transition: all 0.3s;
    &:hover{
        background-color: var(--grisDark);
    }
}



/*GALERIA INTERNACIONAL*/

.cont-galeria-int {
display: grid;
/* grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr); */
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);


grid-column-gap: 15px;
grid-row-gap: 15px; 
}

 


.item-gal-int-1 { grid-area: 1 / 1 / 2 / 2; }
.item-gal-int-2 { grid-area: 2 / 1 / 3 / 2; }
.item-gal-int-3 { grid-area: 1 / 2 / 2 / 3; }
.item-gal-int-4 { grid-area: 1 / 4 / 2 / 5; }
.item-gal-int-5 { grid-area: 2 / 5 / 3 / 6; }
.item-gal-int-6 { grid-area: 1 / 6 / 2 / 7; }
.item-gal-int-7 { grid-area: 2 / 3 / 3 / 4; }
.item-gal-int-8 { grid-area: 2 / 4 / 3 / 5; }



*[class^="item-gal-int"] {

    display: flex; 
      /* cuadrado */
      position: relative;


 
 & img{
          overflow: hidden;
      border-radius: var(--radio);
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
 }

}


.galeria-inter {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 15px;
grid-row-gap: 15px;
}

.gal-item-int-1 { grid-area: 1 / 1 / 2 / 2; }
.gal-item-int-2 { grid-area: 2 / 1 / 3 / 2; }
.gal-item-int-3 { grid-area: 1 / 2 / 2 / 3; }
.gal-item-int-4 { grid-area: 2 / 2 / 3 / 3; }
.gal-item-int-5 { grid-area: 1 / 3 / 2 / 4; }
.gal-item-int-6 { grid-area: 2 / 3 / 3 / 4; }
.gal-item-int-7 { grid-area: 1 / 4 / 2 / 5; }
.gal-item-int-8 { grid-area: 2 / 4 / 3 / 5; }
.gal-item-int-9 { grid-area: 1 / 5 / 2 / 6; }
.gal-item-int-10 { grid-area: 2 / 5 / 3 / 6; }
.gal-item-int-11 { grid-area: 1 / 6 / 2 / 7; }
.gal-item-int-12 { grid-area: 2 / 6 / 3 / 7; }

/*div[class^='myclass'], div[class*=' myclass']{*/
 div[class^='gal-item-int-']{
       /* background-image: url('../images/fondo_puntos_morados_3.svg'); */
        background-color: var(--PrincipalLight);
        background-color: var(--grisLightest);
              background-color: var(--negro);
       border-radius: var(--radio);
 }

.cubre_blanco{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity:  0;
    background-color: var(--negro);
    /* background-image: url('../images/fondo_puntos_morados.svg'); */
    transition: opacity 0.5s;  
}
.cubre_blanco.aparece{
    transition: opacity 0.5s;
        opacity: 1;
    }

*[class^="gal-item-int"] {

    display: flex; 
      /* cuadrado */
      position: relative;


 
 & img{
          overflow: hidden;
      border-radius: var(--radio);
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
 }

}

.flor_trans{
    max-width: 600px;
    height: auto;;
    position: relative;
    z-index: 1
    ;
}

.cont_flor_trans{
    position: relative;
    max-width: 500px;
    &:before{ 

        content: "";
        position: absolute;
        mix-blend-mode: multiply;
    
        /* border: 1px solid var(--casiOro); */
        /* background-image: url('../images/fondo_puntos.svg');*/
        /* border-radius: 8px;
        border-top-left-radius: 500px; 
        border-top-right-radius: 500px;*/
        border-radius: 500px;
        /* width: 50%;
        height: 50%;
        top: 50%;
        left: 50%; */
        background-color: rgb(247, 245, 246);
        bottom: 0;
        right: 15%;
        left: 15%;
        height:95%;
            
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        /* transform: translate(-50%,-50%); */ 
        z-index: 0;
    }

    &:after{
 display: none;;
        content: "";
        bottom: 0;
        right: 0;
        left: 0;
        background-color: var(--blanco);
        height: 10%;
        z-index: 1;
        
        position: absolute;

    }

}

.listado-vert{
    & li{

        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--grisLight);

    }
}

.border-gold {
  background: linear-gradient(45deg, #000, #000) padding-box,
              linear-gradient(45deg, 
                #f6dba6,
#ffebc4,
#f0be79,
#8f653b,
#673d22,
#ba7f3b,
#eebc70) border-box;
}



.listado-for{

    --gap:30px;

    gap: var(--gap);

    display: flex;
    flex-wrap: wrap;
    justify-content: start;

    width: 100%; 


    & li{

        
        position: relative;
        padding : 0 0;

        padding-bottom: 25px;


        display: flex;
        flex-direction: column;

        justify-content: flex-end;
 
         /* border-left:2px solid var(--Principal);  */
         background-color: var(--blanco);

         border:2px solid var(--blanco);;
         border-left-color:transparent;
/* 
            background: linear-gradient(45deg, #000, #000) padding-box,
            linear-gradient(45deg, 
            #f6dba6,
            #ffebc4,
            #f0be79,
            #8f653b,
            #673d22,
            #ba7f3b,
            #eebc70) border-box; */

             /* border-image: linear-gradient(to bottom,  #f6dba6,
            #ffebc4,
            #f0be79,
            #8f653b,
            #673d22,
            #ba7f3b,
            #eebc70) 1; */


            
             border-image: linear-gradient(to left,   
            #eebc70,
             #ba7f3b,
             #673d22,
             #8f653b,
             #f0be79,
              #ffebc4,
               #f6dba6) 1;



            border-right: 0;
            border-top: 0;
            border-left: 0;

         color:var(--PrincipalDark)
       /*  background-color: var(--PrincipalDark);
       color:var(--blanco);*/

        /* border-radius: var(--radio); */

      
    }           

     & .icono-for{  
        
         max-width: 35px;

        @media screen and (min-width:768px) {
             max-width: 50px;
        }
           
            margin-bottom: 20px;
    }
    
    

    @media screen and (min-width:360px){
        


        
         & li{
            max-width:calc( ( 100%  - (var(--gap)/1)   )   / 2 )  ;
         }

 
    } 

        @media screen and (min-width:360px) and (max-width:640px){
            & li:last-child{
                max-width: 100%;
            }
        }

     @media screen and (min-width:640px){
  
            
            & li{
                max-width:calc( ( 100%  - (var(--gap)*2)   )   / 3 )  ;
            }

    
     } 

     @media screen and (min-width:1024px){
  
            
            & li{
                max-width:calc( ( 100%  - (var(--gap)*4)   )   / 5 )  ;
                /* justify-content: space-between; */
               /* min-height: 225px;*/
            }

    
     } 



 
}
 
     /*TESTIMONIOS*/

     .fon_romb{
        position: absolute;
        background-image: url('../images/fon_rombo.svg');
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0.15; 

        &:before{
            /* background: #ffffff; */
            background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            opacity: 1;
            z-index: 10; 
        }
     }

     .fondo_tela_up{
        position: absolute;
        top: 0;
        left:0;
        z-index: -1;
     }

.nom-testi{
    color:var(--PrincipalDark);
    font-weight: 600;
    font-size: 20px;
    margin: 15px 0;
      
}
 .cont-img-testi{
             max-width: 65%;

    & .foto_profe{

        width: 100%;
        height: auto;

    }
 
            
            position: relative;

            &:before{
                content:"";
                position: absolute;
               
                top:0;
                left:0;
                width: 65px;
                height: 65px;
                transform: translate(-50%, -50%) rotate(180deg);
                background-repeat: no-repeat;
                background-size: contain;
                     background-image: url('../images/comillas.svg');
      
            }


            &:after{
                content:"";
                position: absolute;
                bottom:0;
                right:0;
                width: 65px;
                height: 65px;

                transform: translate( 50%, 50%);

                background-repeat: no-repeat;
                background-size: contain;
                     background-image: url('../images/comillas.svg');
      
            }


            

        }
.slide-testimonio{
    --gap:15px; 
    display: flex;
    flex-direction: column;
    gap:calc(var(--gap) * 1.5 );
    @media screen and (min-width:480px) {

        display: flex ;
        flex-direction: row;
 

        & .info-testimonial{


            
            border-radius: var(--radio);
            width: 50%;
            padding: var(--gap);
            padding-top: calc(2 * var(--gap));
            background-color: var(--grisLight);
        }

        & .cont-img-testi{
            width: 50%; 
            position: relative;

            &:before{
                content:"";
                position: absolute;
                top:15px;
                left:15px;
                width: 50px;
                height: 50px;
                transform: rotate(180deg);
                background-repeat: no-repeat;
                background-size: contain;
                     background-image: url('../images/comillas.svg');
      
            }


            &:after{
                content:"";
                position: absolute;
                bottom:15px;
                right:15px;
                width: 50px;
                height: 50px;

                background-repeat: no-repeat;
                background-size: contain;
                     background-image: url('../images/comillas.svg');
      
            }


            

        }

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

/* LISTADO APRENDERÁS*/

.img-aprenderas{

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

        min-height: 50svh;

        margin-bottom: 15px;
        
    }

}


 .listado-aprenderas{
    --gapAprenderas:36px;
    width: 100%; 
    @media screen and (min-width:768px){
        
  
        gap: var(--gapAprenderas);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;


    } 

    @media screen and (max-width:768px){
        display: flex;
        flex-direction: column;

        & .listado-learn{
            width: 100%;;
            flex-wrap: wrap; 
            --gapAprenderas:15px;

                & li{
                    width: 100%;
                    max-width: calc(50% - var(--gapAprenderas) / 2 );
                }

                  & li:last-child{
                    max-width: 100%;

                  }

        }


    }

    @media screen and (min-width:1024px){
        --gapAprenderas:48px;
    }


     & .item-listado:nth-child(2){

         width:100%;        


        @media screen and (min-width:768px){
             max-width: calc(40% - var(--gapAprenderas) / 2 );
         
        }

    }    
     & .item-listado:nth-child(1){

         width:100%;        


        @media screen and (min-width:768px){
             max-width: calc(60% - var(--gapAprenderas) / 2 );
         
        }

    }  
 
}


.listado-details{
        --gapAprenderas:36px;

         & .item-listado:nth-child(1){

         width:100%;        


        @media screen and (min-width:768px){
             max-width: calc(50% - var(--gapAprenderas) / 2 );
         
        }

    }    
     & .item-listado:nth-child(2){

         width:100%;        


        @media screen and (min-width:768px){
             max-width: calc(50% - var(--gapAprenderas) / 2 );
         
        }

    }  


}


.listado-learn{

    --gap:15px;

    gap: var(--gap);

    display: flex;
    flex-wrap: wrap;
    justify-content: start;

    width: 100%; 

      

    & .icono-for{
        max-width: 50px;
        margin-bottom: 20px;
    }
    
    

    @media screen and (min-width:480px){
        


        
         & li{
            max-width:calc( ( 100%  - (var(--gap)/1)   )   / 2 )  ;
         }

 
    } 

     @media screen and (min-width:640px){
  
            
            & li{
                max-width:calc( ( 100%  - (var(--gap)*2)   )   / 3 )  ;
            }

    
     } 
 

 
}

.item-in{


        justify-content: flex-end;

        width: 100%;

        min-height: 150px;

        color:var(--Principal);

 
        padding : 15px;
        display: flex;
        flex-direction: column;

        /* border:1px solid var(--Principal); */
        /* background-color: var(--grisLight); */
        background-color: rgba(238, 238, 238, 0.8);;
        /* border-radius: var(--radio); */

        position: relative;

         color:var(--grisDark); 
         
         @media screen and (max-width:768px) {

            min-height: 200px;
            
         }

         font-size: 18px;


        &:before{
            content: "01/";
            color:var(--PrincipalDark);            
            position: absolute;
            top:15px;
            left:15px;
            font-weight: 600;
            font-size: 1.3em; 
 
            
        }


        &:nth-child(2){

            &:before{
                content:"02/";
            }
        }
        &:nth-child(3){

            &:before{
                content:"03/";
            }
        }
        &:nth-child(4){

            &:before{
                content:"04/";
            }
        }
        &:nth-child(5){

            &:before{
                content:"05/";
            }
        }
        &:nth-child(6){

            &:before{
                content:"06/";
            }
        }
        &:nth-child(7){

            &:before{
                content:"07/";
            }
        } 
        &:nth-child(8){

            &:before{
                content:"08/";
            }
        } 
        &:nth-child(9){

            &:before{
                content:"09/";
            }
        } 
        &:nth-child(10){

            &:before{
                content:"10/";
            }
        }


}

/* SWIPER APRENDERÁS  */




.swiper-galeria-aprenderas{
    position: relative;
    max-width: 100svw;

    &:after{
        content: "";
        background: #ffffff;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        top:0;
        bottom: 0;
        right: 0;
        width: 200px;
        position: absolute;
        z-index: 100;
        pointer-events: none;

    }
}


/* SWIPER APRENDERÁS */






.item-listado-pro{
        padding: calc(1.5 * var(--gap))  calc(1.5 * var(--gap));
    @media screen and (min-width:768px) {
            padding: calc(2 * var(--gap))  calc(3 * var(--gap));
    }

    /* border-radius: var(--radio); */
 
}


.lista-profesional{

    & li{
        padding-bottom: 15px ;
        border-bottom: 1px solid var(--PrincipalDark);
        margin-bottom: 15px;
    }

    & li:last-child{
        border: 0;
    }
}

.box-shadow{
        box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
 

}

.img-profesional{
    z-index: 100;
    position: absolute;
    border-radius: var(--radio);
    max-width: 500px;
    aspect-ratio: 16/11;;
    object-fit: cover;
    object-position: center;
    height: auto;
    bottom:0;
    right:0;

    transform: translate(90% , 25%);


}

.img-profesional-izq{
    z-index: 25;
    position: absolute;
    border-radius: var(--radio);
    max-width: 300px;
    aspect-ratio: 1/1;;
    object-fit: cover;
    object-position: center;
    height: auto;
    top:0;
    left:0;

    transform: translate(-90% , -50%);


}

.img-profesional-vert{
        z-index: 25;
    position: absolute;
    border-radius: var(--radio);
    max-width: 200px; 
    object-fit: cover;
    object-position: center;
    height: auto;
    bottom:25px;
    left:-50px;

    transform: translate(-100% , 0);

}


.pad-seccion-pro{
    border-bottom: 1px solid var(--grisLight);
}


.listado-start{
    @media screen and (max-width:768px) {

        padding-left: var(--gap);
        padding-right: var(--gap);
        
    }
}

.lista-start_today{
    @media screen and (min-width:1024px) {

        & li{
            padding-bottom: 30px; 
        padding-top: 30px; 
        position: relative;
        }

        & li:last-child{
            /* margin-bottom: 0;
                    padding-bottom: 0; */
        }

        & li:after{
            content:"/01";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            color:var(--grisLight);
            font-size: 4rem;
            line-height: 1;
            font-weight:700;
            text-align: right;

             font-family: 'Stardom-Regular';
        }

         & li:nth-child(2){
            &:after{
                content:"/02";
            } 
         }
         & li:nth-child(3){
            &:after{
                content:"/03";
            } 
         }
         & li:nth-child(4){
            &:after{
                content:"/04";
            } 
         }
         & li:nth-child(5){
            &:after{
                content:"/05";
            } 
         }
         & li:nth-child(6){
            &:after{
                content:"/06";
            } 
         }
         & li:nth-child(7){
            &:after{
                content:"/07";
            } 
         }
        
    }
}


.border-alert{
    border:1px solid limegreen
}


/*ADDITIONAL */

.additional-details{
    --gap:15px;
    position: absolute;
    bottom:-25px;
    right: 0;

    transform: translateX(25%);

    display: flex;
    gap:var(--gap);



    & .item-add{
        border-radius: var(--radio);
         backdrop-filter: blur(10px);
        padding: var(--gap);
        color:var(--blanco);
        overflow: hidden;

        width: calc(100% / 3 );


        & *{
        z-index: 1;
        }

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;

        &:before{
            border-radius: var(--radio);
            content: "";
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--Principal);
            opacity: 0.7;

        }

        & strong{
            font-weight: 400;
            margin-bottom: 15px;
        }

        & .info{

            font-size: 32px;
            line-height: 1.1;
        }

    }



}


.add-details{
    --gap:15px;


 
    display: flex;
    flex-wrap: wrap;
    gap:var(--gap);



    & .item-add{
        border-radius: var(--radio);
 
        padding: var(--gap);
        color:var(--blanco);
        overflow: hidden;
        width: 100%;

          @media screen and (min-width:480px){ 
            max-width:calc( ( 100%  - (var(--gap)*1)   )   / 2 )  ;
          }

          &:last-child{
            max-width: 100%;;
          }



        & *{
        z-index: 1;
        }

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: relative;

        &:before{
            border-radius: var(--radio);
            content: "";
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            /* background-color: var(--Principal); */
            opacity: 1;

                background: linear-gradient(65deg,  var(--PrincipalDark),  var(--Principal));
    background-size: 400% 400%;

    -webkit-animation: animemorado 30s ease infinite;
    -moz-animation: animemorado 30s ease infinite;
    animation: animemorado 30s ease infinite;

        }

        & strong{
            font-weight: 400;
            margin-bottom: 15px;
        }

        & .info{

            font-size: 32px;
            line-height: 1.1;
        }

    }
 

}

.anime-gradient {
    background: linear-gradient(65deg, var(--Principal),  var(--PrincipalDark)  );
    background-size: 400% 400%;

    -webkit-animation: animemorado 15s ease infinite;
    -moz-animation: animemorado 15s ease infinite;
    animation: animemorado 15s ease infinite;
}

@-webkit-keyframes animemorado {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@-moz-keyframes animemorado {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}
@keyframes animemorado {
    0%{background-position:0% 83%}
    50%{background-position:100% 18%}
    100%{background-position:0% 83%}
}


/*FAQS */

.pad-faq{
    padding: var(--gap);

    @media screen and (min-width:1024px) {

         padding: calc( 3 * var(--gap));
        
    }
}


.listado-faq{
    & li{
        width: 100%;
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom:1px solid var(--Principal);

        & .ask{
            font-weight: 700;
            font-size: 24px;
            margin-bottom: 20px;
        }

        &:last-child{
            border:0
        }

    }
}

.pelota_fut{
    position: absolute;
    max-width: 512px;
    height: auto;
    bottom: 0;
    right: 0;
    z-index: 100;
    transform: translate(-10% ,-10%);

    display: none;

    @media screen and (min-width:960px) {
        display: flex;
        
    }
}


.diamantes_baix{
    pointer-events: none;
        position: absolute;
    max-width: 400px;
    height: auto;
    bottom: 0;
    right: 0;
    z-index: 100;
    transform: translate( 40% ,25% ) ;  

    display: none;

    @media screen and (min-width:960px) {
        display: flex;

        
    }
}

.pelota_tenis{
        position: absolute;
    max-width: 300px;
    height: auto;
    bottom: 0;
    left: 0;
    z-index: 100;
    transform: translate(-20%,30% );

    display: none;

    @media screen and (min-width:960px) {
        display: flex;
        
    }
}


/*FOOTER*/

.logo_ace{
    max-height: 20px;
    @media screen and (min-width:768px) {
            max-height: 30px;
    }

    width: auto;
}

.logo_footer{
    max-height: 20px;
    @media screen and (min-width:768px) {
         max-height: 32px;
    }
   
    width: auto;
}

.bot_more_texti{
    padding: 4px 20px;
    color: var(--Principal);
    border:1px solid var(--Principal);
    margin-top: 20px;
    border-radius: 500px;
    text-decoration: none;
    transition: all 0.3s;

    &:hover{
        background-color: var(--Principal);
        color:var(--blanco)
    }

}

.in_testi{
    max-width: 750px;
}

.back-hexa{
    background-image: url('../images/red_hexa.svg');
    background-repeat: repeat;
    background-size: 2.5%;
    background-color: transparent;
    border: 0;

}

/*
background: #EEAECA;
background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
*/

section + section{
    padding-top: 0;
}


.back-city{
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    &:before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: -webkit-linear-gradient(60deg, rgba(11, 11, 16, 1),rgba(32, 11, 11, 0));
background: linear-gradient(60deg, rgba(11, 11, 16, 1),rgba(32, 11, 11, 0));

    }
}

.img-city-tot{
    height: 100%;
    max-height: 500px; 
    width: 100%;
  max-width: 650px;  
    object-position: center;
    object-fit: cover;
}

.city-flota{
    position: absolute;
    bottom: 0;
    transform: translateY(25%);
}

.cont-city-flota{

}

.slide-work {
    flex-shrink: 0;
      width: auto !important;  
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block;
 
    max-height: 550px; 
    width: fit-content;
    & img{
      display: block; 
      max-height: 500px;

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

                  max-height: 300px;
            
        }

      width: 100%;
      height: 100%;
      object-fit: cover;
      width:auto; 


      
    }

}


.swiper-galeria-works{

    margin-top: 50px;

  max-width: 100svw;
 
      max-height: 550px;

  width:100%;

      &:after{
        content: "";
        background: #000000;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
        top:0;
        bottom: 0;
        right: 0;
        width: 100px;
        position: absolute;
        z-index: 100;
        pointer-events: none;

    }

}


.info-galeria{
  margin-top: 15px;
  font-size: 15px;
  color:  var(--grisMedLight);
  text-align: left;
  padding-left: 15px;
    @media screen and (min-width:1024px) {
padding-left: 0;
    }

}

.geo-lines{
    background-image: url('../images/geolines.svg');
    background-position: top right;
    background-size: cover;
}

.pad-seccion-career{
        padding-top: 0 ; /* 50px;*/
        padding-bottom: 50px;
    @media screen and (min-width:768px) {

        padding-top: 100px;
        padding-bottom: 100px;
        
    }
}

.caja-diagonales{
    position: relative; 
    overflow: visible;
    &:after{
        content: "";
        position: absolute;
        width: 50px;
        height: 50px;
        background-image: url('../images/caja_diagonales.svg');
        background-position: bottom left;
        background-size: cover;
        bottom: 0;
        right: 0;
        transform: translate(50%, 50%);
        z-index: 100;
    }
    &:before{
        content: "";
        position: absolute;
        width: 75px;
        height: 75px;
        background-image: url('../images/caja_diagonales.svg');
        background-position: bottom left;
        background-size: cover;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        z-index: 100;
    }
}

.caja-diagonales-inv{
    position: relative; 
    overflow: visible;
    &:after{
        content: "";
        position: absolute;
        width: 50px;
        height: 50px;
        background-image: url('../images/caja_diagonales.svg');
        background-position: bottom left;
        background-size: cover;
        bottom: 0;
        left: 0;
        transform: translate(-50%, 50%);
        z-index: 100;

        
        display: none;
        @media screen and (min-width:768px) {

            display: flex;
            
        }
    }
    &:before{
        content: "";
        position: absolute;
        width: 75px;
        height: 75px;
        background-image: url('../images/caja_diagonales.svg');
        background-position: bottom left;
        background-size: cover;
        top: 0;
        right: 0;
        transform: translate( 50%, -50%);
        z-index: 0;

        display: none;

        @media screen and (min-width:768px) {

            display: flex;
            
        }
    }
}

.back_casas_dia{

    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    z-index: 0;

    pointer-events: none;


    & img{
        width: 100%;
        height: 100%;
        object-position: center;
        object-fit: cover;
        
    }

    &::after{ 
        z-index: 100;
background: #000000;
background: linear-gradient(45deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(45deg,rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.5) 100%);
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

    }

}

.cont-galeria{
    padding-left: 15px;
}

.icon-dirigido{

    max-width: 60px;
    height: auto;



}

.cont_item_dirigido{
    max-width: 400px;
    margin-top: 15px;
}

.item-dirigido{
    background-color: var(--grisLight);
    padding: 15px  !important ; 
    border-radius: 8px;

    @media screen and (min-width:1024px) {
        padding: 30px   !important; 
    }


}
.cont_item_dirigido{
font-size: clamp(1rem, 0.9464rem + 0.2381vw, 1.125rem);

}

.item-in{
    border-radius: 8px;
}

.cont-hor-diagos{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-75%, -50%);
    z-index: -1;
    max-height: 75px;

    
}

.item-go-learn{
    & .in-text{
        max-width: 450px;
        color: var(--dark);
    }
   
}

.item-salidas{
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--grisLight);
     position: relative;

     color: var(--principalDark); 

    &:before{
        content: "";
        background-image: url('../images/flecha_lista.svg');
        width: 10px;
        height: 10px;
        background-size: contain;
        position: absolute;
        top: 8px;
        left: -8px;
        transform: translateX(-100%);
    }
}

.rect-vertical{
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 60px;
}

.rect-vertical-xl{
       position: absolute;
    top: 0;
    left: 0;
    max-width: 75px;
    transform: translate(-50%,-0);
}

.listado-salidas{
    padding-left: 20px;
}

.graph_editor{
    position: relative;
    /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
    box-shadow: rgba(0, 0, 0, 0.36) 0px 10px 36px 0px, rgba(0, 0, 0, 0.26) 0px 0px 0px 1px; 
/* box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; */

}

.bola_graph{

    display: none;

    @media screen and (min-width:1024px) {
        display: flex;
    }

    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 200px;
    transform: translate(25% , 25%);
    z-index: 100;
        box-shadow: rgba(0, 0, 0, 0.36) 0px 10px 36px 0px, rgba(0, 0, 0, 0.26) 0px 0px 0px 1px; 

}

.item-listado-ambitos{
    @media screen and (min-width:1024px) {

        padding-left: 50px;
        
    }
}

.sombra-back{
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.cont-cottage img{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;

}

.cont_destacados_con_quad{ 
    z-index: 0;
    position: relative;
    &:before{
        content: "";
        z-index: -15;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 200px;
        height: 200px;

        background-image: url('../images/quad_4x4.svg');
        background-size: cover;

        transform: translate(50%, 50%);
 
    }
 
}

.cont_rect-vertical{

    position: absolute;
    bottom:0;
    left:0;
    max-width: 60px;
    height: auto;
     
    
    /* transform: translateY(-50%); */
    
        & .img_rect_verti{

            max-width: 100%;
 
        }
}

.cont_rect-vertical-b{
    position: absolute;
    bottom:0;
    right: 0;
    max-width: 65px;
    height: auto;
}

.back_blue_dark{


    @media screen and (min-width:768px) {
            background-color: var(--principal);
    display: inline-flex;
    padding: 5px 10px;
    &:last-child{margin-top: 5px;}
    }
}

.listado-1-to-prin{
    & .item-listado{
 

        @media screen and (min-width:768px) and (max-width:1024px) {
 

            &:first-child{padding-right: 50px;}
            
        }


    }
}

.listado-1-to-prin-b{

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

                display: flex;
                flex-direction: column;

        & .item-listado{
 


 


            max-width: 100% !important; 
            
        }


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

    .cont-img-union{

        padding-left: 15px;
        padding-right: 15px;


 & .img-union{

        max-width: 95%;

}

}

 }


 .text-shadow-peq{
     @media screen and (max-width:768px)   {
    text-shadow: 0px 0px 4px rgba(0,0,0,0.6);

     }
 }

 

 .cont-formu{
  background-color: var(--blanco);
  padding: 15px 30px;
  border-radius: 8px;

  & .hsfc-Step__Content{
    padding: 0px !important;
  }

  

 &  input[type=text] , input[type=tel] , input[type=email]{

    font-size: 14px !important;
    padding: 3px !important;
  }

 &  .hsfc-PhoneInput__FlagAndCaret{
    padding: 3px  5px !important;
    color:var(--negro);
  }

  & [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret__Caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--hsf-field-input__color, var(--hsf-default-field-input__color));
}
 & label[data-hsfc-id=FieldLabel]{
  margin-bottom: 8px !important;
  font-size: 13px !important;

  & span{
    font-size: 13px !important;
  }


}

 & .hsfc-CheckboxFieldGroup__Options{

  display: flex;
  justify-content: space-between;

}

 & .hsfc-ReCaptchaV2{
  font-size: 12px !important;
}

 & .hsfc-Row:has(.hsfc-ReCaptchaV2){

    margin-bottom: 0 !important; 

}
    & .rc-anchor-logo-img  {
      width:20px !important; 
      height:20px !important; 
      
    }

   &  .rc-anchor-logo-img-large{
          width:20px !important; 
      height:20px !important;  
   }


 & .hsfc-NavigationRow{
  margin-top: 5px !important;
}

& .hsfc-Row{
  margin-bottom: 10px;
}

& .grecaptcha-badge , & iframe{
  height: 40px !important;
}

.hsfc-CheckboxFieldGroup label{margin-bottom: 10px !important; margin-top: 10px !important;}

[data-hsfc-id=Renderer] .hsfc-ReCaptchaV2{
  min-height: 40px !important;

}

[data-hsfc-id=Renderer] .hsfc-DataPrivacyField>*:not(:last-child){
  margin-bottom: 10px !important;
}

 }

 .hsfc-FieldLabel{


 }

 [data-hsfc-id=Renderer] .hsfc-CheckboxField label{
    align-items: start !important;
 }


 

  .pill_contacto{

  padding-right:20px;
  padding-left:20px;
  margin-right:15px;
  margin-left:15px;
  text-decoration:none;
  padding-top:10px;
  padding-bottom:10px;
  line-height:1;
  border:1px solid var(--blanco);
  border-radius:500px; 
  margin-left: 20px;
  display: inline-block;


  }

  
  footer{ 
  z-index:1000
  }
  footer p{ 
  font-size:1rem
  }
  footer h3{ 
  font-size:1rem;
  margin-bottom:20px
  }
  
  .li_rrss a{ 
  color:var(--blanco);
  margin-right:15px;
  display:inline-block;
  text-decoration:none
  }
  
  .ul_footer li{ 
  margin-bottom:7px;
  color:var(--blanco)
  
  }
  
  
  .ul_footer a{ 
  color:var(--blanco);
  text-decoration:none
  }
  

  .row_contacto_form{ 
  margin-bottom:20px
  }
  
  .li_rrss{ 
  margin-top:20px;
  
  }
  
  .li_rrss li{ 
  margin-bottom:10px
  }


  
  
  .li_rrss .pill_contacto{ 
  padding-right:0;
  padding-left:0;
  border:0;
  margin-right:0;
  margin-left:0;
  line-height:initial;
  border-radius:0;

    &:last-child{
      margin-left:20px;
    }

  }

.bot_te_llamamos{

  width: auto !important;


  font-weight: 400;
  
  backdrop-filter: blur(2px);

  padding: 18px 24px;

  border-radius: 8px;

   background-color: transparent;

   color: var(--naranja) !important;
   bordeR:1px solid var(--naranja);

  &:hover{
       background-color: var(--naranja);
          color: #fff !important;
  }

}

.pill_contacto{
  margin-left: 20px !important;
  border:1px solid red;
  display: inline-block;

  &:first-child{
    margin-left: 0 !important;
  }
} 

.ico_esat_peq{
  height: 16px;;
  margin-right: 5px;
}

.pill_esat{
  display: flex;
  align-items: center;
  @media screen and (max-width:480px){

    width:100%  !important;
    margin-left: 0  !important; 

  }
}


.hide_header .lang_sm{
  display: flex;
}
.hide_header .lang_xl{
  display: none;
}


.ico_ln{
  height: 18px;
  width: auto;
}

.ico_twitter{
  height: 15px;
  width: auto; 
}

.ico_youtube{
  height: 20px;
  width: auto; 
}

.ico_fb{
  height: 15px;
  width: auto; 

}
.ico_ig{
  height: 20px;
  width: auto; 

}

  .ico_twitter{ 
  max-width:14px; 
  }

  
  .ico_arts{ 
  max-width:22px;
  margin-top:-6px
  }
  
  .ico_rookies{ 
  max-width:16px;
  margin-top:-6px
  }
  
  
  .logos_ge_footer{ 
  max-width:425px;
  width:100%
  }
  
  .logo_esat_blanco{ 
  max-width:250px;
  width:100%;
  
  }
  
  .img_iphone{ 
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10000;
  background-image:url(../img/portada_secuencia.jpg);
  background-size:cover;
  background-position:center;
  cursor:pointer
  }