/* los aside estan en index-aside.css */

* {
    -webkit-tap-highlight-color: transparent;

}

body {
    background-color: #FAF8F5;
}

/* ----------------------------------------------------------TARJETERO */
#tarjetero {
    padding-top: 60px;
    width: 90%;
    margin: auto;
    display: grid;
    margin-bottom: 3px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "coche"
        /*  aside 1*/
        "aside1"
        "todoterreno "
        /*  aside 2*/
        "aside2"
        "furgoneta"
        /*  aside 3*/
        "aside3"
        "autobus"
        /*  aside 4*/
        "aside4"
        "camion "
        /*  aside 5*/
        "aside5"
        "autocaravana"
        /*  aside 6*/
        "aside6"
        "clasico "
        "sincarnet"
        /*   aside 7*/
        "aside7"
        "buggy"
        "moto"
        "quad"
        /*  aside 8*/
        "aside8"
        "caravana"
        "remolque"
        "tractor"
        "especiales"
        /*  aside 9*/
        "aside9"
        "agua"
        "kart"
        "cesped"
        "fueraborda"
        "embarcacion";
        
        /* "respaldo" */

}

.coche {
    grid-area: coche;
}

.todoterreno {
    grid-area: todoterreno;
}

.furgoneta {
    grid-area: furgoneta;
}

.autobus {
    grid-area: autobus;
}

.camion {
    grid-area: camion;
}

.autocaravana {
    grid-area: autocaravana;
}

.clasico {
    grid-area: clasico;
}

.sincarnet {
    grid-area: sincarnet;
}

.buggy {
    grid-area: buggy;
}

.moto {
    grid-area: moto;
}

.quad {
    grid-area: quad;
}

.caravana {
    grid-area: caravana;
}

.remolque {
    grid-area: remolque;
}

.tractor {
    grid-area: tractor;
}

.especiales {
    grid-area: especiales;
}

.agua {
    grid-area: agua;
}

.kart {
    grid-area: kart;
}

.cesped {
    grid-area: cesped;
}

.fueraborda {
    grid-area: fueraborda;
}

.embarcacion {
    grid-area: embarcacion;
}

.derespaldo {
    grid-area: respaldo;
     display: none; 
    
}

/*  los div  respaldo y quitar tienen su css en SOBRANTES.CSS */
/* los aside tienen su propio css en INDEX-ASIDE.CSS */

/* ................css tarjetas */
.todos {
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 5px;
}

.titulo h1 {
    text-align: center;
    padding: 3px 0px;
    color: #797878;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.titulo h2{
    text-align: center;
    padding: 3px 0px;
    color: #797878;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 29px;
}



.tarjeta-wrap {
    margin-top: 5px;
    -webkit-perspective: 800;
    perspective: 800;

}

.publi {
    height: 155px;
}

.tarjeta {
    /* width: 100%;  */
    width: 90vw;
    height: 100%;
    background: #e2e1e1;
    position: relative;
    transform-style: preserve-3d;
    transition: .7s ease;
    border-radius: 1px;
    /* -webkit-box-shadow:0px 10px 15px -5px rgba(0,0,0,0.65); */
    /* -moz-box-shadow:0px 10px 15px -5px rgba(0,0,0,0.65); */
    /* box-shadow:0px 10px 15px -5px rgba(0,0,0,0.65); */


}


.tarjeta:hover {
    -webkit-box-shadow: 0px 10px 15px -5px rgba(5, 219, 34, 0.65);
    -moz-box-shadow: 0px 10px 15px -5px rgba(5, 219, 34, 0.65);
    box-shadow: 0px 10px 19px -5px rgba(5, 219, 34, 0.95);
}

.adelante,
.atras {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.adelante {
    margin-top: 3.125rem;
    width: 100%;
    text-align: center;
    overflow: auto;
}

.atras {
    background-color: rgb(102, 101, 101);
    transform: rotatey(180deg);
    /* padding: 0.9375rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-family: "open sans";
    border-radius: 20px;
}

.tarjeta-wrap:hover .tarjeta {
    transform: rotateY(180deg);
}

.imagen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagen img {
    padding: 0px 5px;

}

.atras {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.atras .comentario {
    text-align: center;
}

.juntos {
    width: 100%;
    display: grid;
    grid-template-columns: 65% 35%;
    grid-template-rows: 1fr;
    grid-template-areas: "pruebacss boton";
    align-items: center;
    justify-content: space-between;
}

.pruebacss {
    grid-area: pruebacss;
    width: 100%;
    font-size: 17px;
}

.boton {
    width: 100%;
    grid-area: boton;
    align-items: center;
    justify-content: center;
}


.boton_clasicos img {
    width: 15px;
    margin-left: 0px;

}

/* --------------------------------------------------------      QUITAR */
.quitar {
    display: none;
}


/*--------------------------------- ---------------------------------FOOTER en footergeneral.css */
/* ............................................................ */


@media screen and (min-width:616px) {
    .todos {
        /* width: 280px; */
        width: auto;
    }


    .menu a {
        display: block;
        padding: 20px 0px;
        text-decoration: none;
    }



    #tarjetero {
        /* modificado este para el menu */
        padding-top: 60px;
        width: 90%;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "coche        todoterreno "
            "aside1       aside1"
            "furgoneta    autobus"
            "aside2       aside2"
            "camion       autocaravana"
            "aside3       aside3"
            "clasico      sincarnet"
            "aside4       aside4"
            "buggy        moto"
            "aside5       aside5"
            "quad         caravana"
            "aside6       aside6"
            "remolque     tractor"
            "aside7       aside7"
            "especiales   agua"
            "aside8       aside8"
            "kart         cesped"
            "aside9      aside9"
            "fueraborda   embarcacion";
    }

    .tarjeta {
        width: 40vw;
    }

    .comentario p {
        font-size: 14px;
    }

    .comentario_clasicos p {
        font-size: 13px;
    }

    .boton_clasicos {
        display: flex;
        justify-content: space-between;
    }

     .derespaldo {
         grid-area: respaldo;
        width: 100%;
        display: none; 
        
    }


}




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

    .todos {
        width: auto
    }

    .logo {
        padding-left: 25px;
    }

    #tarjetero {
        width: 100%;
        margin-top: 2px;
        margin: 0px auto 5px;
        display: grid;
        gap: 5px;
        grid-template-columns: 1fr repeat(3, auto) 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            " aside1   coche              todoterreno       furgoneta     aside2"
            " aside3   autobus            camion            autocaravana  aside4"
            " aside5  clasico            sincarnet         buggy          aside6"
            " aside7   remolque           tractor           especiales    aside9"
            " aside7   moto               quad              caravana      aside9"
            " aside8   agua               kart              cesped        aside9"
            " aside8   embarcacion        fueraborda        respaldo      aside9";

    }



    .tarjeta {
        width: 19.5vw;
    }

    .titulo h1 {
        text-align: center;
        padding: 3px 0px;
        font-size: 27px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }

    .derespaldo{
        width: 0%;
        display: block;
    }

    .derespaldo {
         grid-area: respaldo;
         display: block; 
    }
    .titulo{
         /* background-color:  rgba(47, 79, 79,0.1) ;   */
    }
    
    .prueba_imagen{
        width: 100%;
         text-align: center;
    }
    





}