*
{
    margin: 0;
    border: 0;
    padding: 0;
    font-family: "Kanit";
}
html{scroll-behavior: smooth;}

@media  (min-width : 1000px)
{

        header
        {
            
            background-color: aliceblue;
            
            padding-left: 40px;
            padding-right: 40px;
        }
    

        .max-width
        {
            
            max-width: 1500px;
            margin: 0 auto;
        }
        
        .contenedor
        {
        display: flex; 
        justify-content: space-between;
        align-items: center;
        
        }
        

        .contenedor .cajita
        {
            display: flex;
            align-items: center;
        }
        
        
        .contenedor nav
        {
            display: flex;
            text-align: center;
            
        }
        
        .contenedor a
        {
           
         
            text-decoration: none;
            font-size: 20px;
            color: black;
            padding:  20px; 
            margin: 0px 10px;
          
        }

        .contenedor a:hover{
                transition: 0.5s;
                background-color: rgba(64, 184, 253, 0.635);
                color: white;
            }
       

        
        
      

    /* Imagen en el fondo */
    #hero
    {
        height: 80vh;
        background-image: url(../Imagenes/Galonesgas.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        font-family: Arial, Helvetica, sans-serif;   
    }

    #hero .container
    {
    
        display: grid;
        place-items: center;
        background-color: rgba(64, 184, 253, 0.637); 
        width: 100%;
        height: 100%;
        text-align: center;
    
    }

    #hero .container .box
    {
    
        font-family: "Kanit";
        color:rgb(255, 255, 255);
        background-color: rgba(191, 224, 243, 0.562);
        box-shadow: 0px 0px 4px 0.1px rgb(84, 183, 230);
        
        
    }

    #hero .container .box h2
    {
        color: rgb(207, 11, 11);
        padding: 10px;
        font-size: 45px;
        
        
    }

    #hero .container .box p
    {
        color: black;
        font-size: 25px;
        
    }

    #hero .container .horario h2
    {
        color: rgb(207, 11, 11);
    }
    #hero .container .horario 
    {
        
        color: black;
    }


    #hero .container .horario h2
    {
        
        color: rgb(207, 11, 11);
    }
    #hero .container .horario 
    {
        color: black;
        padding: 10px;
    }

    /* Redes */

    #redes
    {
        display: flex;
        align-items: center;
         transform: translateX(50px);
        align-items: center;
        background-color: aliceblue;
        box-shadow: 0px 2px 3px -2px rgb(187, 178, 178);
        
    }

    /* Oculta inicialmente el contenedor */
    #redes {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s ease-out;
    }

    /* Clase que activa la animación */
    #redes.aparece {
    
    opacity: 1;
    transform: translateX(0);
    }

    .container-redes
    {
        display: flex;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        height: 500px;
        
    }



    .img-gas
    {
        margin: 0px 40px;
        padding: 20px;
        width: 400px;
        
    }


    .img-gas img
    {
    width: 100%;
    height: 100%;
    object-fit: cover; /* O 'contain' si no quieres recortar la imagen */
    display: block; /* Elimina espacio causado por margen inferior */
    box-shadow: 0px 0px 1px 0.4px rgb(187, 178, 178);
    }

    .link-redes h2{font-size: 45px; font-family: "Kanit"; color: rgb(207, 11, 11)}
    .link-redes p{font-size: 25px; font-family: "Kanit"; width: 100%;}

    /* Iconos redes  */
    .redes {
    list-style: none;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 5px;
    }

    .redes li a {
    text-decoration: none;
    font-size: 24px;
    padding: 10px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    }

    /* Colores individuales por red */
    .redes li a.facebook { background-color: #1877F2; }
    .redes li a.instagram { background-color: #E4405F; }
    .redes li a.tiktok { background-color: #000000; }



    .link-redes 
    {
    text-align: center;
    max-width: 600px;

    }

    .link-redes li
    {
        list-style: none;
        display: flex;
        flex-direction: row;
        
    }

    .link-redes li a:hover
        {
            list-style: none;
            display: flex;
            flex-direction: row;
            background-color: rgba(64, 184, 253, 0.635) ;
            
        }
    .redes{
        display: flex;
        text-align: center;
        justify-content: center;
        margin: 20px;
    }





    /* Sucursales */
    #Sucursal-Uno .title
    {
        color: rgb(56, 112, 216);
        font-family: "Kanit";
        padding: 25px;
        font-size: 30px;
        text-align: center;
        text-decoration: underline;
    }

    #Sucursal-Uno .juntos
    {
        background-color: rgb(174, 210, 241);
        display: flex;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
        box-shadow: 0px 0px 0.1px 1px rgb(90, 182, 235);
        margin-bottom: 50px;
        
    }

    #Sucursal-Uno .container{max-width: 1000px; margin: 0 auto; }

    #Sucursal-Uno .juntos img 
    {

        margin: 50px;
      
    }


    #Sucursal-Uno p{color:red;font-size: 20px; }


    #Sucursal-Uno .juntos .texto
    {
        width: 400px;
        font-family: "Kanit";
        margin: 0 50px;
    }

    #Sucursal-Uno .juntos .texto li 
    {
        list-style: none;
        font-size: 23px;
        text-align: center;
        
    }

    .texto h2
    {
        padding-bottom: 10px;
    }


    /* Boton */

    .btn
    {
        text-align: center;
    }
    form button
    {
        margin-top: 10px;
        padding: 5px;
        background: rgb(83, 255, 97);
        font-family: "Kanit";
        font-size: 20px;
        border: 0.5px solid rgb(133, 199, 59);
        border-radius: 5px;
    }


}