*
{
    border: 0;
    margin: 0;
    padding: 0;
}
/* Movile First*/
body{background-color: rgb(243, 245, 250); font-family: "Roboto", sans-serif;}

html{scroll-behavior: smooth;}
/* Nav bar */
header
{
    background:linear-gradient(to right,white,grey,rgb(90, 81, 81));
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px;
    align-items: center;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    
}

header .logo
{
 display: flex;
 flex-direction: row;
 align-items: center;
 
}

header .logo img
{
    height: 40px;
    width: 40px;
    border-radius: 50px;
    padding: 10px;
    
}

header .logo p
{
    color: rgb(252, 113, 0);
    padding: 10px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-size: 20px;
    text-shadow: 1px 1.5px 1px rgb(255, 255, 255); /* x y blur color */
    
}

header nav
{
    font-size: 20px;
}

header nav:hover
{
    cursor: pointer;
}

header nav a
{
    text-shadow: 1px 1px 0px black; /* x y blur color */
    color:whitesmoke;
    padding: 0px 10px;
    text-decoration: none;
}

/* Img fondo */

#img-fondo
{
    
    background: url(img-puntocar/Charizard.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 60vh;
    box-shadow: 0px 1px 1px 1px black;
    
}

#img-fondo .deg
{
    
    background: rgba(173, 161, 104, 0.329);
    text-align:center;
    height: 100%;
    padding: 0px;
    
}


#img-fondo .deg .color-img h1
{
color: rgb(184, 27, 27);
text-shadow: 1px 0.5px rgb(124, 60, 60);
font-size: 20px;
padding: 5px 0px;
background-color: rgba(255, 255, 255, 0.678);
}

#img-fondo .deg .color-img p
{
text-align:center;
padding: 10px 20px;
text-shadow: 1px 0.5px rgb(0, 0, 0);
font-size: 15px;
background-color: rgba(255, 255, 255, 0.678);
}


/* Tarjetas */

 #cont-tarjetas
{
    
    padding: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    
   
    
} 

#cont-tarjetas .tarjeta
{
     
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    width: 320px;
    box-shadow: 0px 0px 3px 0.5px #c0c0c2;/* x y blur opacity color */
    text-align: center;  
}

#cont-tarjetas .tarjeta .texto
{
    padding: 50px 25px;
}

#cont-tarjetas .tarjeta .texto h1
{
    color: #0664f0;
}

#cont-tarjetas .tarjeta .texto p
{
padding: 3px;
text-align: left;
}

#cont-tarjetas .tarjeta img
{

    padding-top: 10px;
    
    width: 100%;
    
}

/* Disponibilidad Horaria */



#hora
{
    background-color: rgb(134, 187, 248);
    text-align: center;
    padding: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#hora .img img
{   
    width: 100px;
}

#hora h1
{
    font-size: 25px;
}

#hora p
{
    font-size: 20px;
    color: #f8f8fc;
}

/* Mapa */
#Mapa .box
{
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 3px 0.5px #c0c0c2;/* x y blur opacity color */
    padding: 30px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}


#Mapa .box .texto-box 
{
   
    padding: 20px 0px;
}

#Mapa .box .texto-box h1
{   
    padding: 10px 0px;
    font-size: 30px;
    text-shadow: 1px 0.5px rgb(0, 0, 0);
    
   
}

#Mapa .box .texto-box h2
{
    font-size: 20px;
    color: orange;
    text-shadow: 1px 0.5px rgb(160, 134, 79);
}

#Mapa .box .texto-box p
{
    font-size: 20px;
    padding: 5px 0px;
    color: red;
}

#Mapa .box .texto-box .btn 
{
    text-align: center;
    padding: 30px 0px;
}

#Mapa .box .btn  a
{
    
    text-decoration: none;
    background-color: rgb(147, 240, 162);
    padding: 10px 15px;
    color: black;
    font-size: 20px;
    
}

#Mapa .box  a:hover
{
    transition: 0.3s;
    font-size: 20.5px;
}

#Mapa .box .map
{
    padding: 1px;
    box-shadow: 0px 0px 3px 0.5px #8b8b8b;/* x y blur opacity color */
    background-color: rgb(0, 0, 0);
  
}
/* Footer */

footer
{  
    
    background:linear-gradient(to right,white,grey,rgb(90, 81, 81));
    text-align: center;
    padding : 60px 0;
    font-size: 28px;
    
    
}

footer a:hover{text-shadow: 0px 0px 2px whitesmoke;}
footer .redes a .bi-facebook{ color: #0664f0; padding: 0px 10px; }
footer .redes a .bi-instagram{ color: rgb(250, 193, 247); padding: 0px 10px; }


@media (min-width: 900px) /* A partir de 900px aplica es */
{

header
{
    background:linear-gradient(to right,white,grey,rgb(90, 81, 81));
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 100px;
    padding-right: 100px;
    align-items: center;
    font-family: "Roboto", sans-serif;
    
    
    
}

header .logo
{
 display: flex;
 flex-direction: row;
 align-items: center;
 
}

header .logo img
{
    height: 50px;
    width: 50px;
    border-radius: 50px;
    padding: 10px;
    
}

header .logo p
{
    color: rgb(252, 113, 0);
    padding: 10px;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-size: 25px;
    text-shadow: 1px 1.5px 1px rgb(255, 255, 255); /* x y blur color */
    
}

header nav
{
    font-size: 25px;
}

header nav:hover
{
    cursor: pointer;
}

header nav a
{
    text-shadow: 1px 1px 0px black; /* x y blur color */
    color:whitesmoke;
    padding: 0px 10px;
    text-decoration: none;
}

/* Img fondo */

img-fondo
{
    
    background: url(img-puntocar/Charizard.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 60vh;
    box-shadow: 0px 1px 1px 1px black;
    
}

#img-fondo .deg
{
    
    background: rgba(173, 161, 104, 0.329);
    text-align:center;
    height: 100%;
    padding: 0px;
    
}


#img-fondo .deg .color-img h1
{
color: rgb(184, 27, 27);
text-shadow: 1px 0.5px rgb(124, 60, 60);
font-size: 25px;
padding: 5px 0px;
background-color: rgba(255, 255, 255, 0.678);
}

#img-fondo .deg .color-img p
{
text-align:center;
padding: 10px 20px;
text-shadow: 1px 0.5px rgb(0, 0, 0);
font-size: 25px;
background-color: rgba(255, 255, 255, 0.678);
}

#Mapa .box
{
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 3px 0.5px #c0c0c2;/* x y blur opacity color */
    padding: 80px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
}
#Mapa .box .texto-box 
{
   
   padding-right: 100px;
}

#Mapa .box .texto-box h1
{   
    padding: 10px 0px;
    font-size: 30px;
    text-shadow: 1px 0.5px rgb(0, 0, 0);
    
   
}

#Mapa .box .texto-box h2
{
    font-size: 25px;
    color: orange;
    text-shadow: 1px 0.5px rgb(160, 134, 79);
}

#Mapa .box .texto-box p
{
    font-size: 25px;
    padding: 5px 0px;
    color: red;
}
}

@media (max-width: 480px)
{
/* Barra de navegacion */
header
{
   display: flex;
   flex-direction: column;
     
}
header .logo img
{
    height: 30px;
    width: 30px;
    border-radius: 50px;
    
    
}

header .logo p
{
    color: orange;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-size: 20px;
    text-shadow: 1px 1.5px 1px rgb(255, 255, 255); /* x y blur color */ 
}

header nav
{
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 20px;
}

#img-fondo .deg .color-img h1
{
font-size: 4vw;
}

#img-fondo .deg .color-img p
{
font-size: 4vw;
}


#cont-tarjetas .tarjeta
{
     
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    width: 60vw;
    box-shadow: 0px 0px 3px 0.5px #c0c0c2;/* x y blur opacity color */
    text-align: center;  
}

#cont-tarjetas .tarjeta .texto
{
    padding: 50px 10px;
}

#cont-tarjetas .tarjeta .texto h1
{
    color: #0664f0;
    font-size: 5vw;
}

#cont-tarjetas .tarjeta .texto p
{
    
    font-size: 4vw;
}

/* Disponiilidad horaria */
#hora
{
    background-color: rgb(134, 187, 248);
    padding: 10px 0px;
    display: flex;
    flex-direction: column;  
    justify-content: center;
}

#hora .img img{width: 15vw;}

#hora h1{font-size: 5vw;}

#hora p
{
    font-size: 4vw;
    color: #f8f8fc;
}

/* Maps */

    #Mapa .box .map iframe
{
    width: 80vw;
    padding: 1px;
    box-shadow: 0px 0px 3px 0.5px #8b8b8b;/* x y blur opacity color */
    background-color: rgb(0, 0, 0);
  
}

#Mapa .box .texto-box h1
{
    font-size: 5.5vw;
}

#Mapa .box .texto-box h2
{
    font-size: 5.5vw;
    color: orange;
    text-shadow: 1px 0.5px rgb(160, 134, 79);
}

#Mapa .box .texto-box p
{
    font-size: 5.5vw;
    padding: 5px 0px;
    color: red;
}

#Mapa .box .btn  a{font-size: 5vw;}
}