@charset "utf-8";
/* CSS Document */

* {
	-webkit-font-smoothing: antialiased;
	pointer-events: auto;
	padding: 0;
	margin: 0;
	word-wrap: break-word;
	box-sizing: border-box;
}
#broquel{ 
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 270000;
	background: url(../images/rolling.svg) center center no-repeat;
	display: none;
	top:0;
	left: 0;
}
@font-face {
	font-family: 'Font Awesome 6 Pro';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"); 
}
@font-face {
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"); 
}
@font-face { 
	font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg");
	
}
body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	overscroll-behavior-y: none;
/*background: url("../img/back-trama-home.svg") center 3vw no-repeat, #000;
    background-size: 1000px auto;*/


}

html,body{
	font-size: 16px;
	margin: 0;
    padding: 0;
    font-family: "Chakra Petch", sans-serif;
    font-weight: 500;
    font-style: normal;
	scroll-behavior: smooth;
    color: #FFF;
    /*height: 100%*/

    
}

.fondo-ejes{
	background: url("../img-home/fondo-ejes.svg") center top no-repeat, #000;
    background-size: 100% auto;
}

.chakra-petch-light {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.chakra-petch-regular {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.chakra-petch-medium {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.chakra-petch-semibold {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.chakra-petch-bold {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.chakra-petch-light-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.chakra-petch-regular-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.chakra-petch-medium-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.chakra-petch-semibold-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.chakra-petch-bold-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.syncopate-regular {
  font-family: "Syncopate", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.syncopate-bold {
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
}

strong{font-weight:700;}

.diversityjuegos_container{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    overflow-x:hidden;
    background: url("../img-home/back-home-top.svg") top center no-repeat, #000;
    background-size: 100% auto;
    gap:0;
    padding: 30px 0;
}

.diversitybox-legales{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    overflow-x:hidden;
    gap:0;
    padding: 30px 0;
}

.nav_menu_desp{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 3vw;
    color: #FFF;
    text-decoration: none;
}

.nav-a{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap:40px;
}

.nav-x ul{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap:40px;
}

.nav-a li, .nav-b li, .nav-e li, .nav-x li{
    list-style: none;
}

.nav-a a, .nav-x a{
    color: #FFF;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.5s;
    font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.nav-a a:hover, .nav-x a:hover{
    opacity: 0.5;
}

.nav-a img{
    width: auto;
    height: 40px;
}

.nav-b a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
    background: #CE1E92;
    color: #FFF;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.5s;
    padding: 0 20px;
    border:2px #CE1E92 solid;
    font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.nav-b a:hover{
    background: none;
    border:2px #CE1E92 solid;
}

.nav-e{
    display: none;
}

.nav-e li button{
    display: flex;
    background: none;
    border: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    height: 30px;
    cursor: pointer;
    transition: all 0.5s;
    font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.nav-e li button:hover{
    opacity: 0.5;
}

.nav-e li button img{
    width: auto;
    height: 70%;
}

.menuHamburguesa{
    display: flex;
	position: fixed;
    flex-direction: column;
	z-index: 9900000;
	width: 100vw;
	height: 100%;
	padding: 40px;
	background: #000;
	color: #FFF;
	font-size: 15px;
	line-height: 18px;
	text-align: left;
	left: 0;
	top: 0;
	box-sizing: border-box;
	transition: all 1s;
	opacity: 1;
	transform: translate(-2000px, 0);
	pointer-events: none;
}

.menuHamburguesa.activo {
	opacity: 1;
	transform: translate(0, 0);
	pointer-events: auto !important;
}

a.dca_crucesita {
	display: block;
	position: absolute;
	top: 6vw;
	right: 6vw;
	width: 30px;
	height: 30px;
	text-align: center;
	/*justify-content: flex-start;*/
	margin-bottom: 50px;
	z-index: 991000;

}

a.bt-menu-desplegado{
font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
    font-size: 1rem;
    margin-top: 20px;
    text-decoration: none;
    color: #FFF;
}

a.bt-menu-desplegado:hover{
    opacity: 0.5;
}




footer{
    display: flex;
    width: 100%;
    padding: 0 3vw;
    justify-content: space-between;
    align-items: stretch;
    color: #FFF;
      font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size: 0.80rem;
    line-height: 1.2rem;
    margin-top: auto;
}

.footer-izq{
    display: flex;
    /*width: 50%;*/
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.footer-izq img{
    width: 40px;
    height: auto;
    margin-bottom: 20px;
}

.footer-der{
    display: flex;
    /*width: 50%;*/
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end ;
}


.caja-redes{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 40px;
    margin-bottom: 20px;
    justify-content:flex-end;
    align-items: center;
    gap:20px;

}


.caja-redes a{
    color: #FFF;
    text-decoration: none;
    transition: all 0.5s;
}

.caja-redes a:hover{
    opacity: 0.3;
}


.caja-redes a img{
    width: auto;
    height: 24px;
}

.caja-legales a{
    color: #FFF;
    text-decoration: none;
    padding-left: 30px;
    transition: all 0.5s;
}

.caja-legales a:hover{
    text-decoration: underline;
    opacity: 0.3;
}


.back1{
   background: #FFA800; 
}

.back2{
   background: #CE1E92; 
}

.back3{
   background: #00B94A; 
}

.back4{
   background: #6162F8; 
}

.back5{
   background: #00BDE7; 
}

.back6{
   background: #760CB7; 
}

.back7{
     background: #FF5C00;
}

.back8{
    background: #262525;}

.color1{
   color: #FFA800;
}

.color2{
   color: #CE1E92; 
}

.color3{
   color: #00B94A; 
}

.color4{
   color: #6162F8; 
}

.color5{
   color: #00BDE7; 
}

.color6{
   color: #760CB7; 
}


.marco1{
    border: 1px #FFA800 SOLID;
}

.marco2{
    border: 1px #CE1E92 SOLID;
}

.marco3{
    border: 1px #00B94A SOLID;
}

.marco4{
    border: 1px #6162F8 SOLID;
}

.marco5{
    border: 1px #00BDE7 SOLID;
}

.marco6{
    border: 1px #760CB7 SOLID;
}

header{
    display: flex;
    width: 100%;
    height: 8.33vw;
}

.intro{
   display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1vw 25vw 40px;
    text-align: center;
    font-weight: 300;
    gap:30px;
}

.seccion-padding{
    display: flex;
    width: 100%;
    padding: 60px 16vw;
}

.seccion-completa{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 40px 0;
    position: relative;
}

.pad-interior{
    display: flex;
   padding: 0 16vw; 
}

.intro img{
    width: 125px;
    height: auto;
}

.intro h1{
    font-size: 2.125rem;
    line-height: 2.4rem;
}

.intro h2{
    font-size: 1.25rem;
    line-height: 1.6rem;
    font-weight: 300;
}

.intro div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    width: 100%;
    margin-top: 30px;
}

.intro div img{
    width: auto;
    height: 100%;
}

.acercade{
   display: flex;
    flex-direction: column;
    width: 100%;
    gap:30px;
}

.titulo-acercade{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap:4%; 
}

.titulo-acercade h1{
    display: flex;
    /*width: 34%;*/
    font-size: 2.125rem;
    line-height: 2.4rem;
    font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
    text-transform: uppercase;
}

.titulo-acercade h2{
    display: flex;
    /*width: 62%;*/
    font-size: 1.125rem;
    line-height: 1.4rem;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.carrds-acercade{
   display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items:stretch;
    width: 100%;
    gap:1%;  
}

.c-a-d-1{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:flex-start;
    width: 32.6%;
    height: 100%;
    background: #0E0D0D;
    
}

.c-a-d-1 .carrd{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:flex-start;
    width: 100%;
    padding: 20px;
    border: 1px #323232 solid;
    border-radius: 15px;
    height: 100%;
}

.c-a-d-2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items:stretch;
    width: 65.2%;
    gap:10px 10px; 
    z-index: 1000;
    
}

.c-a-d-2 .carrd{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:flex-start;
    width:calc((100% - 10px) / 2);
    padding: 20px;
    border: 1px #323232 solid;
    border-radius: 15px;
}

.back-carrd{
    background: #0E0D0D;
}

.carrd-interior{
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: auto;
    width: 100%;
}

.carrd-interior h3{
    font-size: 1.1rem;
    line-height: 1.3rem;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
    text-transform: uppercase;
}

.carrd-interior h4{
   font-size: 1rem;
    line-height: 1.2rem;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal; 
}

/*.carrd-interior img{
  width: auto;
    height: 30px;
}*/

.c-i-c-back1{
    background: url("../img-home/Imagen2.svg") top right no-repeat, #0E0D0D;
    background-size: 60% auto;
}

.c-i-c-back2{
    background: url("../img-home/Imagen3.svg") top right no-repeat, #0E0D0D;
    background-size: 40% auto;
}

.c-i-c-back3{
    background: url("../img-home/Imagen4.svg") top right no-repeat, #0E0D0D;
    background-size: 50% auto;
}

.c-i-c-back4{
    background: url("../img-home/Imagen5.svg") top right no-repeat, #0E0D0D;
    background-size: 50% auto;
}


.ejes{
   display: flex;
    flex-direction: column;
    width: 100%;
    gap:30px;
}

.carrds-ejes{
   display: flex;
    /*flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items:stretch;
    width: 100%;*/
}

.titulo-ejes{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap:4%; 
    text-align: center;
}

.titulo-ejes h1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 2.125rem;
    line-height: 2.4rem;
    font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
    text-transform: uppercase;
    text-align: center;
}

.titulo-ejes h2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 1.125rem;
    line-height: 1.4rem;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal;
    text-align: center;
}

.c-a-d-3{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items:stretch;
    width: 100%;
    gap:10px; 
    
    
}

.c-a-d-3 .carrd3{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:flex-start;
    width:calc((100% - 20px) / 3);
    padding: 20px;
    border: 1px #323232 solid;
    border-radius: 15px;
    background: #0E0D0D;
}

.carrd-interior2{
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: auto;
    width: 100%;
}

.carrd-interior2 h5{
    font-size: 0.9rem;
    line-height: 1rem;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
    text-transform: uppercase;
    align-items: flex-start;
}

.carrd-interior2 img{
  width: auto;
    height: 50px;
}

.back-metricas-izquierdo{
display: flex;
position: absolute;
height: 225px;
top: 50%;
transform: translate(0, -50%);
left: 10px;
}

.back-metricas-izquierdo img, .back-metricas-derecho img{
    width: auto;
    height: 100%;
}

.back-metricas-derecho{
display: flex;
position: absolute; 
height: 225px;
top: 50%;
transform: translate(0, -50%);
right: 30px;
}

.c-a-d-1 .carrd2{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items:flex-start;
    width: 100%;
    height: 100%;
}
               
.carrd-interior3{
   display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    padding-right: 20px;
}

.carrd-interior3 h3{
    font-size: 2.125rem;
  line-height: 2.4rem;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  text-align: left;
}

.carrd-interior3 h4{
    display: flex;
   font-size: 1.125rem;
  line-height: 1.4rem;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal;
  text-align: left;
/*background: #000; 
    padding: 10px;*/
    
}

.carrd-interior3 div{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    height: 73px;
    margin-top: auto;
}

.carrd-interior3 div img{
    width: auto;
    height: 100%;
}

.no-margin-top{
    margin-top: inherit;
}


.carrds-acompaniamos{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:30px;
    align-items: flex-start;
    width: 100%;
}

.acompaniamos-tit{
   display: flex;
 width:calc((100% - 30px) / 2);
}

.acompaniamos-img{
   display: flex;
 width:calc((100% - 30px) / 2); 
}

.acompaniamos-img img{
    width: 100%;
    height: auto;
}

.marquesina{
    display: block;
    height: 60px; 
    width: 100%;
    background: url("../img-home/marquesina.svg") center center repeat-x, #262525;
    background-size: auto 60px;
    z-index: 1000;
    transform: rotate(-2deg) translatez(0);
    margin-bottom: 50px;
}

.back-pie{
    background: url("../img-home/image-footer2.png") bottom center no-repeat;
}

.outro{
   display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 3vw;
    text-align: center;
    font-weight: 300;
    gap:30px;
}

.outro h1{
    font-size: 2.125rem;
    line-height: 2.4rem;
}

.outro h2{
    font-size: 1.25rem;
    line-height: 1.6rem;
    font-weight: 300;
}

.outro div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 30vw;
    width: 100%;
}

.outro div img{
    width: auto;
    height: 100%;
}

.outro .botones-prepie{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 80px;
    
}

a.mi-exp{
   display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 20px;
  background: #CE1E92;
  color: #FFF;
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.5s;
  padding: 0 20px;
  border: 2px #CE1E92 solid;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal; 
}

a.mi-exp:hover{
 background: none;
border:2px #CE1E92 solid;   
}

a.necesito-ayuda{
     display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40px;
  background: none;
border:2px #FFF solid;
    border-radius: 20px;
  color: #FFF;
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.5s;
  padding: 0 20px;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;  
}

a.necesito-ayuda:hover{
    background: #CE1E92;
border: 2px #CE1E92 solid;
}

.img-carrd-primera{
    width: 100%;
    height: auto;
}

.pad-mobile-metricas{
    padding-right: 0;
}

.bt-menu-desplegado-vivi{
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-radius: 20px;
  background: #CE1E92;
  color: #FFF;
  text-decoration: none;
  font-size: 0.75rem;
  transition: all 0.5s;
  padding: 0 15px;
  border: 2px #CE1E92 solid;
  font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
    margin-top: 60px;
    width: 210px;
}

.diversity_cabezal-ejes{
    display: flex;
    width: 76vw;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    transition: all 4s;
    position: relative;
    margin: auto;
    padding: 2.5vw 0;
    gap: 20px; 

}


.diversity_cabezal-ejes > img{
    width: auto;
    height: 60px;
}

.diversity_cabezal-ejes span{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px; 
}

.diversity_cabezal-ejes h1{
     font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal; 
        font-size: 2.125rem;
    line-height: 2.3rem;
    text-align: left;
}

.diversity_cabezal-ejes h2{
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size: 1rem;
    line-height: 1.2rem;
    text-align: left;
}

.ejes-tabues-resultados{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap:60px;
    width: 76vw;
    margin: 0 auto 60px;
}



.ejes-tabues-resultados div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
    border-radius: 20px;
    background: #0E0D0D;
    box-shadow: 0px 0px 20px 5px rgba(0,0,0,1);
    text-align: left; 
    text-decoration: none;
    color: #FFF;
    transition: all 0.5s;
}

.ejes-tabues-resultados div .titulo-ejes-tr{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
    /*height: 80px;
    padding: 30px 30px 80px;*/
    border-radius: 20px;
    background: #00BDE7;
    text-align: left; 
    color: #FFF;
    position: relative;
     font-family: "Syncopate", sans-serif;
  font-weight: 700;
  font-style: normal;
    font-size: 1rem;
    gap: 20px;
}


.ejes-tabues-resultados div .abajo-ejes-tr{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
    padding: 0 70px 30px 70px;
    border-radius: 20px;
    background: #0E0D0D;
    text-align: left; 
    color: #FFF;
    z-index: 100;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    gap:80px;
}

.ejes-tabues-resultados div .titulo-ejes-tr h4{
    padding: 25px 150px 0 25px;
}

.legales{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
    padding: 70px 70px 30px 70px;
    border-radius: 20px;
    background: #0E0D0D;
    text-align: left; 
    color: #FFF;
    z-index: 100;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    gap:40px;
}

.legales div{
    display: flex;
    width: 100%;
    flex-direction: column;
    font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
    font-size: 1rem;
    border-radius: 0px;
  background: #0E0D0D;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}

.legales div h1{
    font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
    font-size: 1.2rem;
}

.legales div a{
    display: inline;
    color: #FFF;
    text-decoration: underline;
}

.legales div a:hover{
    opacity: 0.5;
}

.legales div li{
    list-style-position: inside;
}

/*/////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////*/
@media(max-width:1250px){
    
    .c-a-d-1-mobile{
        width: 50%;
        margin-bottom: 5px;
    }
    
    .diversity_cabezal-ejes{
    width: 90vw;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    padding: 2.5vw 0;

} 

}


@media(max-width:1050px){
    
.seccion-padding{
    padding: 60px 8vw;
}

.pad-interior{
    display: flex;
   padding: 0 8vw;
    z-index: 1000;
}
    
.intro{
    padding: 3vw 10vw 40px;
}
    
    
.back-metricas-izquierdo {
  top: 50%;
  transform: translate(0, -50%);
  left: -80px;
}

}

@media(max-width:900px){
    

    
.titulo-acercade {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 20px;
}
    
.titulo-acercade h2, .titulo-acercade h1{
        text-align: center;
    } 
    
.carrd-interior3 {
  align-items: center;
  gap: 15px;
  width: 100%;
  padding-right: 0;
}
    
    .carrd-interior3 div{
        display: none;
    }
    
.carrd-interior3 h3, .carrd-interior3 h4{
        text-align: center;
    } 
    
    .carrds-acercade{
        flex-direction: column;
    }
    
    .c-a-d-1-mobile{
        width: 100%;
        margin-bottom: 5px;
    }
    
    .img-carrd-primera{
        display: flex;
    width: auto;
    height: 80px;
        align-self: flex-end;
}
    
.c-a-d-2 {
  width: 100%;
}
    
    .c-a-d-2 .carrd{
        padding-right: 15%;
        
    }
    
.c-i-c-back1{
    background-size: 30% auto;
}

.c-i-c-back2{
    background-size: 20% auto;
}

.c-i-c-back3{
    background-size: 30% auto;
}

.c-i-c-back4{
    background-size: 30% auto;
}
    
.carrds-acompaniamos {
  display: flex;
  flex-direction: column;
  justify-content: center;
    align-items: center;
  gap: 30px;
    width: 100%
}
    
.acompaniamos-tit {
  width: 100%;
}
    
.acompaniamos-img {
  width: 50%;
}
    
.marquesina{
    position: relative;
    top: -20px;
    z-index: 1000;
    }
    
.outro div {
  height: 50vw;

}
    
.back-metricas-izquierdo {
  height: 225px;
  top: 30%;
  left: -30px;
    transform: none;
}
    
.back-metricas-derecho {
  height: 225px;
  right: -30px;
    top: auto;
bottom: 0;
    transform: none;
}
    
.pad-mobile-metricas{
    padding-right: 10px!important;
}
    
.ejes-tabues-resultados div .abajo-ejes-tr{
        flex-direction: column;
        padding: 0 20px 30px 20px;
    }
    
.ejes-tabues-resultados {
  gap: 0px;
  width: 76vw;
  margin: 0 auto 60px;
}
    
.ejes-tabues-resultados div .abajo-ejes-tr{
      gap:0;
      }
    
.ejes-tabues-resultados div .titulo-ejes-tr h4{
    padding: 25px 70px 0 25px;
}
    
}

@media(max-width:850px){
    
header {
  height: 10vw;
}
    
.nav-a img{
    width: auto;
    height: 30px;
}
    
.nav-b{
    display: none;
}
    
.nav-x{
    display: none;
}
    
.nav-e{
    display: flex;
}
    

    
.diversityjuegos_container {
  background: url("../img-home/back-home-top.svg") top center no-repeat, #000;
    background-size: auto, auto;
  background-size: 130% auto;

}

}
    
@media(max-width:810px){
    
.c-a-d-3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 10px;
}
    
.c-a-d-3 .carrd3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 20px;
  border: 1px #323232 solid;
  border-radius: 15px;
  background: #0E0D0D;
}


 .diversity_cabezal-ejes{
    width: 65vw;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2.5vw 0;

}    

    
}


@media(max-width:700px){
    
footer{
     flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
     padding: 3vw 10vw;
}

.footer-izq{
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
}

.footer-izq img{
    width: 40px;
    height: auto;
    margin-bottom: 20px;
}

.footer-der{
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start ;
    margin-top: 40px;
}
    
.caja-redes{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    margin-bottom: 20px;
    justify-content:flex-start;
    align-items: flex-start;
    gap:20px;

}
    
.caja-legales a{
    padding: 0 10px 0 0;
}
    
.intro div{
    height: 60px;

}
    
.c-a-d-2 {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
    
  .c-a-d-2 .carrd {
      width: 100%;
  }
    
    .img-carrd-primera{
        display: none;
    }
    
.c-i-c-back1{
    background: url("../img-home/Imagen2.svg") center right no-repeat, #0E0D0D;
    background-size: 20% auto;
}

.c-i-c-back2{
    background: url("../img-home/Imagen3.svg") center right no-repeat, #0E0D0D;
    background-size: 15% auto;
}

.c-i-c-back3{
    background: url("../img-home/Imagen4.svg") center right no-repeat, #0E0D0D;
    background-size: 20% auto;
}

.c-i-c-back4{
    background: url("../img-home/Imagen5.svg") center right no-repeat, #0E0D0D;
    background-size: 20% auto;
}
    
.c-i-c-back5{
    background: url("../img-home/Imagen1.svg") center right no-repeat, #0E0D0D;
    background-size: 25% auto;
}
    
.carrd-interior h3, .carrd-interior h4{
        padding-right: 30%;
    }
    
.back-pie {
  background: url("../img-home/image-footer3.png") bottom center no-repeat;
}
    
.outro .botones-prepie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: auto;
}


}


@media(max-width:600px){
    
.nav_menu_desp{
    align-items: flex-end;
}
    
.nav-a img{
    width: auto;
    height: 25px;
}
    
.nav-e li button img {
  width: auto;
  height: 50%;
}
    
.intro{
    padding: 5vw 10vw 40px;
}
    
.intro img {
  width: 110px;
  height: auto;
}
    
.intro div{
    height: 40px;

}
    
.intro h1 {
  font-size: 1.8rem;
  line-height: 2rem;
}
    
    .titulo-acercade h1, .titulo-ejes h1,  .carrd-interior3 h3, .outro h1{
        font-size: 1.8rem;
        line-height: 2rem;
    }
    
 .acompaniamos-img {
    width: 70%;
  }
    
    .diversity_cabezal-ejes{
    width: 90vw;
}
    
}



@media(max-width:500px){
 
  

}


@media(max-width:450px){
    

    
 .intro img {
    width: 80px;
    height: auto;
  }

    
}

@media(max-width:360px){
    
.nav-a img{
    width: auto;
    height: 20px;
} 
 
 .intro h1 {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }
    
    .titulo-acercade h1, .titulo-ejes h1,  .carrd-interior3 h3, .outro h1{
        font-size: 1.4rem;
        line-height: 1.6rem;
    }
 

    
}