.datostecnicos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Por defecto en móviles: 2 por fila */
    gap: 10px;
    /* Espacio entre los elementos */
}
.dato {
    padding: 10px 30px 20px 30px;
    margin: 4px;
    vertical-align: top;
    text-align: center;
    background-color: #fafafa;
    border-radius: 8px;
    box-sizing: border-box;
    position: relative;
    min-width: 120px;
    min-height: 150px;
}

.dato .foto {
    background-position: 50% 5px;
    background-repeat: no-repeat;
    background-size: auto 50px;
    height: 55px;
    margin-bottom: 10px;
    transition: all 0.5s;
}

.dato:hover .foto {
    transform: scale(1.3);
}

.dato:hover h3 {
    transform: scale(1.3);
}

.dato:hover span {
    background-color: #ddd;
}

.dato h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
    transition: all 0.7s;
}

.dato span {
    color: #666;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #f1f1f1;
    padding: 5px 0;
    border-radius: 8px;
}


.datostecnicos .perfil_estado h3 {font-size:0.9em;font-weight:normal}
.datostecnicos .perfil_altitud  .foto {background-image:url(/iconos/botones/montania.png);}
.datostecnicos .coeficienteAPM  {cursor:pointer}
.datostecnicos .coeficienteAPM  .foto {background-image:url(/iconos/botones/icoapm.png);}
.datostecnicos .coeficienteAPM h3 {font-size:2em;
                                   position:absolute;bottom:20px;left:0px;
                                   width:100%;
                                   margin:0 auto;box-sizing:border-box;text-align:center;
                                   color:#8D3838;padding:5px 10px;
                                   }

.datostecnicos .perfil_estado  .foto {background-image:url(/iconos/botones/carretera.png);}
.perfil_distancia  .foto {background-image:url(/iconos/botones/regla.png);}
.datostecnicos .perfil_distancia h3 {color:#4f6e76;font-size:1.5em}
.datostecnicos .perfil_desnivel  .foto {background-image:url(/iconos/botones/desnivel.png);}
.datostecnicos .perfil_porcentaje {background-color:#deecd4}
.datostecnicos .perfil_porcentaje .foto {background-image:url(/iconos/botones/porcentaje.png);}
.datostecnicos .perfil_porcentajemax {background-color:#fae3e0}
.datostecnicos .perfil_porcentajemax  .foto {background-image:url(/iconos/botones/porcentajemax.png);}
.datostecnicos .perfil_porcentajemax h3 {color:#8D3838;font-size:1.5em}
.datostecnicos .perfil_porcentaje h3 {color:#8D3838;font-size:1.5em}


.coeficienteAPMa {
    font-weight: bold;
    background:#ffffff url(/iconos/icoapm.png) no-repeat 4px 50%;
    background-size:auto 80%;
    font-size:1.2em;
    padding-right:3px;
    border:1px solid #dddddd;
    /*borde redondeado*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    padding-left:40px;
}

tr.kinomap td:nth-child(1) {
    background-image: url(imag/kinomap_logo.png);
    background-repeat: no-repeat;
    background-size: 25px auto;
    background-position: 2px center;
    padding-left: 35px
}

tr.relive td:nth-child(1) {
    background-image: url(imag/relive_logo.png);
    background-repeat: no-repeat;
    background-size: 25px auto;
    background-position: 2px center;
    padding-left: 35px
}

tr.rouvy td:nth-child(1) {
    background-image: url(imag/rouvy_logo.png);
    background-repeat: no-repeat;
    background-size: 25px auto;
    background-position: 2px center;
    padding-left: 35px
}

@media (min-width: 768px) {

    /* A partir de pantallas medianas (md) */
    .datostecnicos {
        grid-template-columns: repeat(4, 1fr);
        /* 4 por fila */
    }
}

@media (min-width: 1200px) {

    /* A partir de pantallas extra grandes (XL) */
    .datostecnicos {
        grid-template-columns: repeat(6, 1fr);
        /* 6 por fila */
    }
}

@media (min-width: 1400px) {

    /* A partir de pantallas extra grandes (XXL) */
    .datostecnicos {
        grid-template-columns: repeat(7, 1fr);
        /* 6 por fila */
    }
}