@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');

/* General */
    html {
        box-sizing: border-box;
    }

    body {
        display: block;
        background: #222223;
        font-family: "Orbitron", sans-serif;
        font-optical-sizing: auto;
        font-weight: weight;
        font-style: normal;
        color: azure;
        margin: 0;
    }

    ol, ul {
    	list-style: none;
    }

    a {
        text-decoration: none;
        color: azure;
    }

/* Header */

    header {
        display: flex;
        background: #222223;
        position: sticky;
        top: 0;
        width: 100%;
        justify-content: center;
        opacity: 90%;
    }

    header nav ul li {
        display: inline-block;
        padding: 0 1em 0 1em;
    }

    h1, h2 {
        text-align: center;
    }

    h1 {
        text-decoration: overline;
    }

    p, h3 {
        margin: 0 2em 0 2em; /* Arriba | Derecha | Abajo | Izquierda */
        text-align: justify;
        padding-bottom: 2em;
    }

    nav {
        display: flex;
    }

    nav a:hover {
        color: brown;
    }

    #current {
        background: brown;
        border-radius: 10px;
    }

    /* Desplegable header */
    .nav-desplegable {
        position: relative;
    }

    .nav-desplegable-content {
        display: none;
        position: absolute;
        overflow: auto;
        background: #222223;
		padding: 1em 0;
        border-radius: 0 0 10px 10px;
      }
      .nav-desplegable:hover .nav-desplegable-content {
        display: block;
      }
      .nav-desplegable-content a {
        display: block;
        color: #FFFFFF;
        padding: 5px;
        text-decoration: none;
      }
      .nav-desplegable-content a:hover {
        color: #FFFFFF;
        background-color: brown;
        border-radius: 10px;
      }

/* Banner */
    #logo{
        width: 8em;
        border-radius: 10%;
        margin-top: 2em;
        border: solid 1px aliceblue;
    }

    #banner { /* Index */
        display: block;
        text-align: center;
        padding-bottom: 2em;
        background-image: url("../../images/challenger.jpg");
        background-position: center center;
    	background-size: cover;
        padding: 4em;
        border-bottom: solid 2px aliceblue;
    }

    /* Dodge */
    #banner-dodge { /* Dodge */
        display: block;
        text-align: center;
        padding-bottom: 2em;
        background-image: url("../../images/dodge/fondo-dodge.jpeg");
        background-position: center center;
    	background-size: cover;
        padding: 4em;
        border-bottom: solid 2px aliceblue;
    }

            #banner-dodge-challenger { /* Dodge Challenger */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/dodge/challenger/fondo-challenger.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }
        
            #banner-dodge-viper { /* Dodge Viper */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/dodge/viper/fondo-viper.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }
        
            #banner-dodge-charger { /* Dodge Charger */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/dodge/charger/fondo-charger.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }
        
            #banner-dodge-ram { /* Dodge Ram */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/dodge/ram/fondo-ram.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

    /* Ford */
    #banner-ford { /* Ford */
        display: block;
        text-align: center;
        padding-bottom: 2em;
        background-image: url("../../images/ford/fondo-ford.png");
        background-position: center center;
    	background-size: cover;
        padding: 4em;
        border-bottom: solid 2px aliceblue;
    }

            #banner-ford-mustang { /* Ford Mustang */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/ford/mustang/fondo-mustang.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-ford-bronco { /* Ford Bronco */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/ford/bronco/fondo-bronco1.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-ford-f150 { /* Ford F150 */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/ford/f150/fondo-f150.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

     /* Chevrolet */
     #banner-chevrolet { /* Chevrolet */
        display: block;
        text-align: center;
        padding-bottom: 2em;
        background-image: url("../../images/chevrolet/fondo-chevrolet.jpg");
        background-position: center center;
    	background-size: cover;
        padding: 4em;
        border-bottom: solid 2px aliceblue;
    }

            #banner-chevrolet-camaro { /* Chevrolet Camaro */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/chevrolet/camaro/fondo-camaro1.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-chevrolet-colorado { /* Chevrolet Colorado */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/chevrolet/colorado/fondo-colorado.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-chevrolet-corvette { /* Chevrolet Corvette */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/chevrolet/corvette/fondo-corvette2.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

     /* Jeep */
     #banner-jeep { /* Jeep */
        display: block;
        text-align: center;
        padding-bottom: 2em;
        background-image: url("../../images/jeep/fondo-jeep3.jpeg");
        background-position: center center;
    	background-size: cover;
        padding: 4em;
        border-bottom: solid 2px aliceblue;
    }

            #banner-jeep-renegade { /* Jeep Renegade */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/jeep/renegade/fondo-renegade1.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-jeep-avenger { /* Jeep Avenger */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/jeep/avenger/fondo-avenger2.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-jeep-cherokee { /* Jeep Cherokee */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/jeep/cherokee/jeep-cherokee_0.jpg.webp");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

     /* GMC */
     #banner-gmc { /* GMC */
        display: block;
        text-align: center;
        padding-bottom: 2em;
        background-image: url("../../images/gmc/fondo-gmc.jpg.webp");
        background-position: center center;
    	background-size: cover;
        padding: 4em;
        border-bottom: solid 2px aliceblue;
    }

            #banner-gmc-canyon { /* GMC Canyon */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/gmc/canyon/fondo-canyon2.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-gmc-sierra { /* GMC Sierra */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/gmc/sierra/fondo-sierra3.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-gmc-hummer { /* GMC Hummer */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/gmc/hummer/fondo-hummer2.jpeg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

     /* Cadillac */
     #banner-cadillac { /* Cadillac */
        display: block;
        text-align: center;
        padding-bottom: 2em;
        background-image: url("../../images/cadillac/fondo-cadillac.jpg");
        background-position: center center;
    	background-size: cover;
        padding: 4em;
        border-bottom: solid 2px aliceblue;
    }

            #banner-cadillac-escalade { /* Cadillac Escalade */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/cadillac/escalade/fondo-escalade2.jpeg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-cadillac-optiq { /* Cadillac Optiq */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/cadillac/optiq/fondo-optiq1.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

            #banner-cadillac-ct5 { /* Cadillac CT5 */
                display: block;
                text-align: center;
                padding-bottom: 2em;
                background-image: url("../../images/cadillac/ct5/fondo-ct51.jpg");
                background-position: center center;
            	background-size: cover;
                padding: 4em;
                border-bottom: solid 2px aliceblue;
            }

/* Sobre Nosotros */
    #sobre-nosotros {
        background: brown;
        padding-top: 2em;
         border-bottom: solid 2px aliceblue;
    }

    #sobre-nosotros p {
        text-align: center;
        width: 60%;
        margin: auto;
    }

/* Coches - Index */
    .container-index {
        display: grid;
        width: 80%;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-gap: 4em;
        margin: 5.5em auto 7.5em auto;
      }

    .item-index {
        width: 100%;
        text-align: center;
    }

    .container-index img {
        width: 90%;
        height: 100%;
        background: #ffffff;
        border: solid 2px brown;
        border-radius: 10px;
        padding: 1em;
    }

    .container-index img:hover {
        background: brown;
    }

/* Contacto */
    .contact {
        padding: 1em;
        background: brown;
        border-top: solid 2px #ffffff;
        border-bottom: solid 2px #ffffff;
    }

    .contact h3, p {
        text-align: center;
    }

    .container-contacto {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto;
        padding: 1em;
    }

    .item-contacto {
        width: 100%;
        text-align: center;
    }

    .col1 {
        width: 70%;
    }

    .col2 {
        width: 30%;
    }

    .contacto {
        display: block;
        padding: 2em 2em 2em 0;
        justify-content: center;
    }

    #contacto {
        text-align: center;
        width: 100%;
        margin: auto;
    }

    .fila1, .fila2 {
        margin-bottom: 1em;
        display: flex;
    }

    #name, #email, #message {
        width: 100%;
        border-radius: 5px;
        padding: 0.5;
        border: solid 2px #222223;
    }

    #name, #email {
        height: 2em;
    }

    #name {
        margin-right: 1em;
    }

    #boton-enviar {
        background: #222223;
        color: #ffffff;
        padding: 1em;
        border: solid 1px #ffffff;
        border-radius: 5px;
        width: 10em;
        font-family: "Orbitron", sans-serif;
        cursor: pointer;
    }

    #contacto ::placeholder{
        font-family: "Orbitron", sans-serif;
        padding: 1em;
    }

    #name:hover{
        border: solid 3px aqua;
    }
    #email:hover{
        border: solid 3px aqua;
    }
    #message:hover{
        border: solid 3px aqua;
    }


    #boton-enviar:hover{
        background: #ffffff;
        border: solid 3px aqua;
        color: #222223;
    }

    #mobile {
        width: 1em;
        height: 1em;
    }

    #item-datos {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1em;
    }

        #item-datos a:hover {
            color: brown;
        }

    iframe {
        width: 70%;
        border: solid 1px black;
        border-radius: 10px;
        margin-top: 2em;
    }

    #resto {
        background: #222223;
        border: solid 1px #ffffff;
        border-radius: 10px;
    }

/* Footer */
    footer {
        background: rgb(57, 62, 61);
        display: block;
        padding: 2em;
        text-align: center;
    }

    .redes-sociales {
        display: flex;
        justify-content: center;
        gap: 1.3em;
    }

    .fa-brands {
        width: 1em;
        height: 1em;
        font-family: "Orbitron", sans-serif;
    }

        .fa-brands:hover{
            -moz-transform: translateY(-0.5em); /* Navegador Firefox */
            -webkit-transform: translateY(-0.5em); /* Navegador Chrome y Safari */
            -o-transform: translateY(-0.5em); /* Navegador Opera */
            -ms-transform: translateY(-0.5em); /* Navegador Internet Explorer */
            transform: translateY(-0.5em);
            transition: .5s ease;
        }

            .fa-linkedin-in:hover{
                color: #0072c9;
            }
            .fa-facebook-f:hover{
                color: #3C5A98;
            }
            .fa-x-twitter:hover{
                color: #000000;
            }
            .fa-instagram:hover{
                color: #da0063;
            }

    .fa-whatsapp, .fa-envelope {
        margin-right: 0.5em;
    }

        .fa-whatsapp:hover {
            transform: translateY(0);
        }

/* Main - Galería marcas (imágenes flexibles) */
    #main {
        display: flex;
        margin: 5em auto;
        width: 80%;
        height: 30em;
        border: solid 2px brown;
    }

    #contenedor {
        width: 0;
        flex-grow: 1;
        object-fit: cover;
        opacity: .8;
        transition: .5s ease;
        text-align: center;
        border: solid 1px #ffffff;
        background: brown;
    }

    #contenedor:hover {
        cursor: crosshair;
        width: 40%;
        opacity: 1;
        filter: contrast(120%);
    }

    #main img {
        width: 100%;
        height: 100%;
        border-bottom: solid 1px #ffffff;
    }

    #carro {
        display: flex;
        height: 90%;
    }

    #description {
        display: flex;
        height: 10%;
        color: #ffffff;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

/* CONTAINER - ITEM */
    .container {
        display: grid;
        width: 90%;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        grid-gap: 2em;
        margin: 5em auto;
        color: #222223;
        z-index: 1;
      }

    .item {
        background: #ffffff;
        border: solid 2px #ffffff;
        text-align: center;
        border-radius: 0 0 10px 10px;;
    }

    .container img {
        width: 100%;
        border-bottom: solid 2px #ffffff;
    }

        /* Caja coches */

    #titulo, #precio {
        padding: 1.2em;
    }

    #precio {
        background: #222223;
        color: #ffffff;
    }

    #varios {
        display: flex;
        text-align: center;
        justify-content: center;
        background: brown;
        color: #ffffff;
        font-size: small;
    }

    #varios div {
        border: solid 1px #ffffff;
        width: 100%;
        padding: 1em 0;
    }

    #saber-mas {
        background: #222223;
        color: #ffffff;
        padding: 1em;
        margin-top: 1em;
        border: solid 1px brown;
        border-radius: 5px;
        width: 10em;
        font-family: "Orbitron", sans-serif;
        cursor: pointer;
    }

    #giro180 {
        transform: scaleX(-1);
    }

/* Botón subir */
#back2Top {
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    -moz-transform: rotate(-180deg); /* Navegador Firefox */
    -webkit-transform: rotate(-180deg); /* Navegador Chrome y Safari */
    -o-transform: rotate(-180deg); /* Navegador Opera */
    -ms-transform: rotate(-180deg); /* Navegador Internet Explorer */
    transform: rotate(-180deg);
    position: fixed;
    bottom: 50px;
    right: 0;
    background-color: #DDD;
    opacity: 50%;
    text-align: center;
    font-size: 1em;
    text-decoration: none;
    border-radius: 15%;
    margin-right: 0.5em;
}
#back2Top:hover {
    background-color: rgb(164, 254, 254);
    opacity: 100%;
}

/* MENÚ DESPLEGABLE Tablet-phone */
    .nav{
        background-color: brown;
        height: 3em;
        border-bottom: solid 2px #ffffff;
        --img1: scale(1);
        --img2: scale(0);
    }

    .nav:has( .dropdown:target ){
        --img1: scale(0);
        --img2: scale(1);
        --clip:inset(0 0 0 0);

    }

    .nav__container{
        width: 90%;
        margin: 0 auto;
        height: 60px;
        display: grid;
        grid-template-columns: max-content max-content;
        grid-template-areas: "title img";
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }

    .nav__title{
        display: none;
        color: #fff;
        grid-area: title;
    }


    .nav__menu{
        grid-area: img;
        position: relative;
        z-index: 10;

        transform: var(--img1);
    }

    .nav__menu--second{
        transform: var(--img2);
    }

    .nav__icon{
        width: 30px;
        display: block;
    }

    .dropdown{
        position: absolute;
        background-color: #222223;
        opacity: 95%;
        width: 35%;
        height: 100vh;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 1em;
        display: grid;
        align-content:center ;
        gap: 1rem;
        overflow-y: auto;
        clip-path: var(--clip, inset(0 0 100% 100%));
        transition: clip-path .5s;
        z-index: 2;
    }

    .dropdown__list{
        list-style: none;
    }

    .dropdown__link{
        color: rgb(184, 187, 191);
        padding: 1em .7em;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: .6rem;
        position: relative;
        background-color: var(--bg, transparent);
        border-radius: 6px;
    }

    .dropdown__list:has( :checked ){
        --rows: 1fr;
        --rotate: rotate(180deg);
        --bg: #28303B;
    }

    .dropdown__check{
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .dropdown__arrow{
        margin-left: auto;
        transform: var(--rotate, 0);
        transition: .2s transform;
    }

    .dropdown__content{
        display: grid;
        grid-template-rows: var(--rows, 0fr);
        transition: .3s grid-template-rows;
    }

    .dropdown__sub{
        overflow: hidden;

    }

    .dropdown__li{
        width: 85%;
        list-style: none;
        margin-left: auto;
    }

    .dropdown__anchor{
        padding: 1em 0;
        display: block;
        color: #B6BABE;
        text-decoration: none;
    }
  
/* @media queries */

    @media screen and (max-width: 1100px) { /* Large */
        #main {
            height: 25em;
        }

        #contenedor:hover {
            width: 50%;
        }

        #varios {
            font-size: x-small;
          }
    }

    @media screen and (max-width: 840px) { /* Medium */
      .container {
        grid-template-columns: repeat(2, 1fr);
      }

      .container-index {
        grid-template-columns: repeat(2, 1fr);
      }

      .container-contacto {
        grid-template-columns: 1fr;
      }

      .contacto {
        padding: 2em;
    }

      #logo-car {
          width: 8em;
          height: 8em;
      }

      #prim {
          display: block;
      }

      #main {
          height: 20em;
      }

      #contenedor:hover {
          width: 50%;
      }

      #description {
        font-size: small;
      }

      header {
          display: none;
      }
    }

    @media screen and (max-width: 600px) { /* Small */
      .container {
        grid-template-columns: 1fr;
      }

      .container-index {
        grid-template-columns: 1fr;
      }

      #logo-car {
          width: 5em;
          height: 5em;
      }

      #main {
          height: 20em;
      }

      #contenedor:hover {
          width: 60%;
      }

      #description {
        font-size: small;
      }

      header {
          position: relative;
      }
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Smartphones*/
        .container {
            grid-template-columns: 1fr;
          }
    
          .container-index {
            grid-template-columns: 1fr;
          }
    
          #logo-car {
              width: 5em;
              height: 5em;
          }
    
          #main {
              height: 13em;
          }
    
          #contenedor:hover {
              width: 60%;
          }

          #description {
            font-size: xx-small;
          }
    
          header {
              position: relative;
          }
        }

    @media screen and (min-width: 840px) {
        .nav {
            display: none;
        }
    }