/* Reset de estilos para asegurar consistencia entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilo general para el cuerpo de la página */
body {
    font-family: 'Arial', sans-serif;
    background-color: #fff; /* Blanco */
    color: #666; /* Gris */
    margin: 0;
}

/* Estilo para la barra de navegación */
.navbar {
    background-color: #25D366; /* Verde */
    position: relative;
    width: 100%;
    z-index: 200;
    transition: background-color 0.5s ease;
}

.navbar-scroll {
    background-color: #25D366; /* Cambia el color de fondo al hacer scroll */
}

.navbar ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    margin: 0; /* Elimina el margen para evitar problemas de visualización en dispositivos pequeños */
}

.navbar li {
    margin: 0 5px; /* Reduzco el espacio entre elementos */
}

.navbar a {
    text-decoration: none;
    color: #fff; /* Blanco */
    font-weight: bold;
    
}

/* Media query para dispositivos con un ancho de pantalla de 600 píxeles o menos */
@media only screen and (max-width: 600px) {
    .navbar {
        font-size: 14px; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
    }

    .navbar li {
        margin: 0 5px; /* Reduzco el espacio entre elementos */
    }
}

/* Estilo para las secciones */
.seccion {
    padding: 80px 5%; /* Ajusta el espacio alrededor del contenido */
    text-align: center; /* Centra el contenido */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.seccion.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo para la animación de los textos al cargar la página */
.seccion h2, .seccion p, .servicio h1, .servicio h2, .servicio p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.seccion h2.fade-up, .seccion p.fade-up, .servicio h1.fade-up, .servicio h2.fade-up, .servicio p.fade-up {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo para la animación al hacer scroll hacia abajo */
.seccion.scroll-down {
    transform: translateY(20px);
    transition: transform 0.5s ease;
}

/* Estilo para la animación al hacer scroll hacia arriba */
.seccion.scroll-up {
    transform: translateY(0);
    transition: transform 0.5s ease;
}

.seccion img {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.seccion img.fade-in-up {
    opacity: 1;
    transform: translateY(0);
}



/* Estilo para el botón en la sección de Trabajos */
button {
    background-color: #25D366; /* Verde */
    color: #fff; /* Blanco */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    display: block;
    margin: 0 auto; /* Centra el botón */
}

button a {
    color: #fff; /* Blanco */
    text-decoration: none;
}

button:hover {
    background-color: #128C7E; /* Verde oscuro - Cambio de color al pasar el mouse */
}

/* Estilo para las imágenes en las secciones */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centra las imágenes */
}

/* Estilo para los enlaces en la sección de Contacto */
.contacto-info a {
    color: #25D366; /* Verde */
}

.contacto-info a:hover {
    text-decoration: underline;
}

/* Estilo para el mapa en la sección de Mapa */
iframe {
    width: 100%; /* Ocupa todo el ancho disponible */
    height: 450px;
    border: none;
}

/* ... Otros estilos ... */

/* Estilo para la sección 1 */
#seccion1 {
    background-color: #fff; /* Blanco */
}

/* Estilo para la sección 2 */
#seccion2 {
    background-color: #25D366; /* Verde */
    color: #fff; /* Blanco */
    text-align: center;
    padding: 5%; /* Ajusta el espacio alrededor del contenido */
}

#seccion2 img {
    max-width: 100%; /* Ajusta el tamaño de la imagen para que sea responsiva */
    height: auto;
    border-radius: 10px; /* Añade bordes redondeados a la imagen */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Agrega una sombra suave */
}

/* Estilo para la sección 3 */
#seccion3 {
    background-color: #666; /* Gris */
    color: #fff; /* Blanco */
    text-align: center;
    padding: 5%; /* Ajusta el espacio alrededor del contenido */
}

/* Estilo para la sección 4: Nuestros Servicios */
#servicios {
    background-color: #fff; /* Blanco */
    text-align: center; /* Centra el contenido */
    padding: 5%; /* Ajusta el espacio alrededor del contenido */
}

/* Estilo para el título de la sección */
#servicios h2 {
    margin-bottom: 5%;
    color: #25D366; /* Verde */
}

/* Estilo para cada servicio individual */
.servicio {
    display: grid;
    grid-template-columns: 100%; /* Un solo elemento por fila */
    grid-gap: 15px; /* Espaciado entre las filas */
    margin-bottom: 30px; /* Agrega espacio entre cada servicio */
}

.servicio img {
    max-width: 20%; /* Ajusta el tamaño de la imagen para que sea responsiva */
    height: auto;
}

.servicio h1 {
    margin-top: 15px; /* Agrega espacio entre la imagen y el título */
}

.servicio h2 {
    font-size: 1em;
    margin: 0px 0; /* Ajusta el espacio entre el título y la descripción */
    color: #25D366; /* Verde */
}

.servicio p {
    font-size: 0.8em;
    margin: 5px 0; /* Ajusta el espacio entre la descripción y el párrafo siguiente */
}

/* Estilo para la sección 5 */
#trabajos {
    background-color: #666; /* Gris */
    color: #fff; /* Blanco */
    text-align: center;
    padding: 5%; /* Ajusta el espacio alrededor del contenido */
}

.trabajos h1 {
    margin-top: 5%;
}

/* Estilo para la sección "Por qué elegirnos" */
#razones {
    text-align: center; /* Centra el contenido */
}

#razones h2{
    margin-bottom: 5%;
}

/* Estilo para el contenedor de cada servicio individual en la sección "Por qué elegirnos" */
.razon {
    display: inline-block; /* Hace que cada elemento sea en línea y se ajuste al contenido */
    text-align: center; /* Alinea el texto al centro */
    margin: 5px; /* Espaciado entre los elementos */
}

.razon img {
    width: 20%; /* Ajustar el tamaño del icono según sea necesario */
    height: auto;
    margin-bottom: 5px; /* Espaciado entre la imagen y el texto */
}

.razon p {
    font-size: 1em;
    margin-top: 5px;
}

/* Estilo para la sección 7 */
#seccion7 {
    background-color: #666; /* Gris */
    color: #fff; /* Blanco */
    text-align: center;
    padding: 5%; /* Ajusta el espacio alrededor del contenido */
}

/* Estilo para la sección 8: Contacto */
#contacto {
    background-color: #fff; /* Blanco */
    text-align: center; /* Centra el contenido */
    padding: 5%; /* Ajusta el espacio alrededor del contenido */
}

/* Estilo para el título de la sección */
#contacto h2 {
    color: #25D366; /* Verde */
}

/* Estilo para la información de contacto */
.contacto-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.contacto-info p {
    font-size: 1em;
    margin: 10px 0;
}

.contacto-info a {
    color: #25D366; /* Verde */
    text-decoration: none;
}

.contacto-info a:hover {
    text-decoration: underline;
}

/* Estilo para el formulario */
.contact-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Estilo para la parte derecha del formulario */
.contact-box .right {
    width: 100%; /* O ajusta el ancho según sea necesario */
    text-align: left;
}

/* Estilo para los campos del formulario */
.contact-box .field {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc; /* Agrega un borde para mayor claridad */
    border-radius: 5px;
}

/* Estilo para el botón de enviar */
.contact-box .btn {
    background-color: #25D366; /* Verde */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.contact-box .btn:hover {
    background-color: #128C7E; /* Cambia el color al pasar el ratón */
}

/* Estilo para la sección 9 */
#seccion9 {
    background-color: #25D366; /* Verde */
    background-size: 20%;
    color: #fff; /* Blanco */
    text-align: center;
    padding: 5%; /* Ajusta el espacio alrededor del contenido */
}

#seccion9 p {
    color: #fff;
}

/* Estilo para la sección 10 (Marcas) */
#seccion10 {
    background-color: #666; /* Gris */
    padding: 5%; /* Ajusta el espacio alrededor del contenido */
    text-align: center;
}

/* Estilo para las marcas en la sección de Marcas */
.marcas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que las imágenes se envuelvan en dispositivos más pequeños */
}

.marcas img {
    max-width: 25%; /* Ajusta el tamaño del icono según sea necesario */
    height: auto;
    margin: 10px; /* Espaciado entre las imágenes */
}

/* Agrega estilos personalizados según sea necesario */
.whatsapp-button-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.whatsapp-button {
    display: flex;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    text-decoration: none;
    overflow: auto;
}

.whatsapp-button img {
    width: 100%;
    height: auto;
}

#footer {
    background-color: #666; 
    color: #fff;
    padding: 0%;
}