* {
padding: 0;
margin: 0;
box-sizing: border-box;   
list-style-type: none; 
}


body {
    max-width: 1200px; /* Puedes ajustar este valor */
    margin: 0 auto;
    overflow-x: hidden;
    transform: scale(0.9);
    transform-origin: top center;
}


header .LaPortada {

    display: flex;
    background-color: rgb(255, 255, 255);
    justify-content: center;
    background-size: cover;
    display: flex;
    background-position: center bottom;
    background-repeat: no-repeat;
    align-items: center;
    margin-left: 100px;

}

.Capa-Portada {
    background-color: #f4f4f4;

}

.menu-icono {
    height: 240px;
    width: auto;
    margin: 20px 0;
    transition: transform 0.3s ease; 
    margin-left: -100px;
}

.menu-icono:hover {
    transform: scale(1.1); 
}
.Navegadores {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;
    padding: 20px;
    margin-left: 0; /* Elimina el margen izquierdo */
    width: 100%;    /* Ocupa todo el ancho disponible */
}

.Navegadores a {
    color: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    border-radius: 25px;
    background: linear-gradient( 1deg, rgb(105, 105, 126), rgb(255, 255, 255));
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    width: 120px;
    height: 50px;
    margin: 0 10px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.Navegadores a:hover {
    background: linear-gradient( 1deg, rgb(105, 105, 126), rgb(255, 255, 255));
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.Navegadores a:active {
    transform: translateY(1px);
    box-shadow: none;
}


a {
    color: black;
    text-decoration: none;
    margin-right: 30px;   
}


.Formulario-contacto {
    padding: 60px;
    box-shadow:  0 0 5px black;
    border-radius: 30px;
    text-align: center;
    width: 867px;
    height:730px ;
    margin-left: -230px;
    margin-top: 70px;
   
    
}

.Titular-contacto {
    display: flex;
    flex-direction:column;
    letter-spacing: 0px;
    text-align: center;
    font-size: 25px;
    height: 123px;
    
    
}

.Imput{
    display: flex;
    flex-direction:column;
    letter-spacing: 0px;
    text-align: left;
    font-size: 23px;
    
    
    
}

#phone {

    font-size: 18px;
    border-radius: 10px;
    height: 35px;
    width: 190px;
    letter-spacing: 1px;
    
}

#name {

    font-size: 18px;
    border-radius: 10px;
    height: 35px;
    
}

#lastname {

    font-size: 18px;
    border-radius: 10px;
    height: 35px;
    
} 

#email {

    font-size: 18px;
    border-radius: 10px;
    height: 35px;
    
    
} 


.imput, textarea {
   padding: 17px 14px;
   background-color: #f8f8f8;
   border: 0;
   font-size: 15px;
   margin-bottom: 20px;
   border-radius: 10px;
}



.Mapa {
    
    z-index: 0;
    padding: 0;
    margin-left: 680px;
    margin-top: -650px;
    
}
 
:focus  {
    
outline: 1px solid #f3f3f3;
}

.Submit {
    
    background-color: rgb(255, 255, 255);
    width: 447px;
    height: 68px;
    align-self: center;
    cursor: pointer;
    border-radius: 30px;
    margin-top: 14px;
    }

.Submit:hover {
    background-color: rgb(175, 250, 255);
    
       
}



.Img-centro{
    height: 352px;
    width: 600px;
    justify-content: center;
    display: flex;
    position: absolute;
    margin-top: 150px;
    
    
    
}



.Titular-del-Precierre {
    padding-top: 20px;
    display: flex;
    position: absolute; 
    font-size: 75px;
    color: rgb(255, 255, 255);
    margin-left: 310px;
    margin-top: 100px;
    z-index: 2;
}



video {
    margin-left: -350px;
    width: 1882px;
    
}



.Capa {
    position: relative;
    background-color: rgb(17, 54, 82);
    width: 1932px;
    height: 365px;
    opacity: 0.4;
    mix-blend-mode:multiply;
    margin-top: -369px;
    margin-left: -400px;
    display: flex;
}

.CAPA-TXT-INFO {
    
    position: absolute;
    background-color: rgb(243, 243, 243);
    width: 1930px;
    height: 507px;
    margin-left: -400px;
    margin-top: -80px;

}

.Img-centro-contacto {
    
    display: flex;
    position: relative;
    width: 14px;
    height: 363px;
    margin-left: -111px;
    margin-top: 300px;

}


.Titular-contactanos {
    position: absolute;
    width: 765px;
    height: 101px;
    display: flex;
    margin-left: 755px;
    margin-top: -367px;
    font-size: 15px;

}

.Titular-contactanos {

    position: absolute;
    margin-left: 655px;
    margin-top: -367px;
    font-size: 18px;
    letter-spacing: 1px;

}

.TXT-Direccion {

    position: absolute;
    margin-left: 385px;
    margin-top: -227px;
    font-size: 18px;
    letter-spacing: 1px;

}


.Telefonos  {

    position: absolute;
    margin-left: 385px;
    margin-top: -157px;
    font-size: 18px;
    letter-spacing: 1px;

}

.TXT-Horarios {

    position: absolute;
    margin-left: 885px;
    margin-top:-160px;
    font-size: 18px;
    letter-spacing: 1px;
    

}

.TXT-Mail{

    position: absolute;
    margin-left: 385px;
    margin-top: -90px;
    font-size: 18px;
    letter-spacing: 1px;

}


.Cierre {
    
    height: 352px;
    width: 600px;
    justify-content: center;
    display: flex;
    position: absolute;
    position: absolute;
    margin-top: 300px;
    margin-left: 270px;

}

.Footer{
    
    height: 352px;
    width: 600px;
    justify-content: center;
    display: flex;
    position: absolute;
    margin-top: 705px;
    margin-left: 270px;

}

.Final-Final {
    margin-top: 950px;
    margin-left: 480px;
    text-align: center;
    position: absolute;
}


@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .Navegadores {
        flex-direction: column; 
        align-items: stretch; 
        margin-left: -1px; 
        width: 100%; 
    }

    .Navegadores a {
        width: 125%; 
        padding: 45px; 
        text-align: left; 
        margin: 10px 10px; 
        margin-left: -80px;
        background-color: #3fa9b1; 
        border-radius: 25px; 
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        
    }

}

.menu-icono {
    content: url(Imagenes/Taller_Centroderestauracion_Largo.png);
}

@media (max-width: 768px) {
    .menu-icono {
        content: url(Imagenes/Imagenes-V-Mobile/Titulo-Mobile.png);
        width: 145%;
        height: auto; 
        margin-left: -155px;
    }
}



@media (max-width: 768px) {
    .Titular-del-Precierre {
        font-size: 30px; 
        margin-left: 60px; 
        margin-top: -5px; 
    }

    .Capa {
        width: 100%; 
        height: auto; 
        margin-top: 10px; 
    }

    .Capa-Centro {
        width: 100%; 
        height: auto; 
        margin-top: 10px; 
    }

    .Texto-Servicios {
        max-width: 95%; 
        padding: 15px; 
        font-size: 16px; 
        line-height: 1.4; 
        margin: 20px auto; 
        text-align: justify;
    }

    video {
        width: 100%; 
        height: auto; 
        margin: 0; 
    }


    .Contactanos {
        flex-direction: column; 
        align-items: center; 
        margin-top: 20px; 
    }
}


@media (max-width: 768px) {
    @media (max-width: 768px) {
        .Formulario-contacto {
            padding: 20px; /* Reduce el padding en móvil */
            width: 90%; /* Asegura que ocupe un ancho apropiado */
            margin: 20px auto; /* Centra el formulario */
            box-shadow: none; /* Elimina la sombra para un diseño más limpio */
        }
    
        .Titular-contacto {
            font-size: 20px; /* Ajusta el tamaño del título */
            margin-bottom: 15px; /* Reduce el margen inferior */
        }
    
        .Imput label {
            font-size: 14px; /* Tamaño de fuente para etiquetas */
        }
    
        .imput, textarea {
            font-size: 14px; /* Tamaño de fuente más pequeño */
            padding: 10px; /* Espaciado adecuado */
        }
    
        .Submit {
            height: 45px; /* Altura más adecuada para móviles */
            width: 180px;
            font-size: 16px; /* Tamaño de fuente del botón */
        }
    }

    .Mapa iframe{
        width: 350px;
        height: 1000px;
        margin-left: -650px;
        margin-top: 650px;
    }

        
}


@media (max-width: 768px) {

    
    .Informacion-de-contacto {
        width: 820px; /* Asegura que ocupe el 90% del ancho */
        height: 900px;
        margin: 10px ; /* Centra la sección y añade espacio en la parte superior */
        margin-top: 200px;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacar */
        border-radius: 15px; /* Bordes redondeados */
        background-color: #f4f4f4; /* Fondo claro para mejor visibilidad */
        text-align: center; /* Centra el texto */
    }

    .Informacion-de-contacto h1 {
        font-size: 24px; /* Tamaño de fuente más pequeño para encabezados */
        text-align: left; /* Centrar el texto */
        margin-left: -550px;
        margin-top: 390px;
    }

    .Informacion-de-contacto h4 {
        font-size: 18px; /* Tamaño de fuente para subencabezados */
        margin-left: -400px;
        margin-top: 350px;
    }

    .Informacion-de-contacto p {
        font-size: 16px; /* Tamaño de fuente para párrafos */
        margin-left: -400px;
        padding: 25px;
        margin-top: -20px;
    }

  
    .Img-centro-contacto {
        width: 100px; /* Asegúrate de que la imagen ocupe el 100% */
        height: 210px; /* Mantiene la proporción de la imagen */
        margin: 0 auto; /* Centra la imagen */
        margin-left: 80px;
    }

    .CAPA-TXT-INFO  {
        width: 115px; /* Asegúrate de que la imagen ocupe el 100% */
        height: 200px; /* Mantiene la proporción de la imagen */
        margin: 0 auto; /* Centra la imagen */
        margin-left: 70px;
    }

    

   
    
}


@media (max-width: 768px) {
    .TXT-Horarios {
        margin-left: 390px; /* Elimina el margen izquierdo */
        margin-top: 20px; /* Espacio superior para separar de otros elementos */
        text-align: center; /* Centra el texto */
        font-size: 16px; /* Ajusta el tamaño de fuente */
        
    }

    
    
}








@media (max-width: 768px) {
    .Footer {
        padding: 10px 20px; 
        font-size: 14px; 
        margin-left: -65px;
        margin-top: 1160px;
        position: absolute;
    }

    .Cierre {
        padding: 10px 20px; 
        font-size: 16px; 
        margin-left: -100px;
        margin-top:760px;
    }
    

    
    

}


/* Media query para pantallas pequeñas */
@media (max-width: 600px) {
    .Final-Final {
        
        text-align: center;
        margin-left: 95px;
        margin-top: 1300px;
    }
}