* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato-Black', Arial, sans-serif;
    background-color: #f4f4f4; /* Fondo suave para el cuerpo de la página */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background-color: #fff; /* Fondo blanco para el header */
    box-shadow: 0 4px 6px rgba(255,156,12, 0.7);
    z-index: 1000;
}

.logo img {
    height: 50px;
}

nav ul {
    list-style: none;
}

.nav > li {
    position: relative;
    float: left;
    padding-right: 3rem;
}

.nav li a {
    background-color: #fff; /* Fondo blanco para los enlaces */
    color: #ff9c0c; /* Texto en color oscuro para contraste */
    text-decoration: none;
    padding: 10px 12px;
    display: block;
    transition: background-color 0.3s, color 0.3s; /* Transiciones suaves al cambiar de estado */
    font-size: 18px;
}

.nav li a:hover, .nav li a:focus {
    background-color: #e8e8e8; /* Cambio sutil de color al pasar el ratón o enfocar */
    color: #000; /* Texto en negro más intenso para mejor legibilidad */
}

.nav li ul {
    display: none;
    position: absolute;
    min-width: 140px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra para los submenús */
    z-index: 1001;
}

.nav li:hover > ul {
    display: block; /* Mostrar submenús al pasar el ratón */
}

.nav li ul li {
    position: relative;
}

.nav li ul li ul {
    right: -140px;
    top: 0px;
}
.main-content {
    position: relative;
    background-image: url('img/wallper-principal-text.jpg'); /* Cambia 'ruta/a/tu/imagen.jpg' por la ruta real de tu imagen */
    background-size: cover;
    background-position: center;
    height: 700px; /* Ajusta según necesites */
    display: flex;
    align-items: center; /* Alinea verticalmente el texto */
    justify-content: flex-start; /* Alinea horizontalmente el texto a la izquierda */
    z-index: 1;
    margin-top: 0.4rem;
    border-bottom: 2px solid #00000067;
}

.content-text {
    background: rgba(255, 255, 255, 0.5); 
    padding: 20px;
    max-width: 50%;
    color: #ff9c0c;
    font-size: 3.5rem;
    padding-left: 5rem;
    padding-right: 5rem;
}
.image-gallery {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0f0e0e1e; /* Fondo gris claro */
    padding: 10px 20rem; /* Añade algo de padding vertical para espacio alrededor de las imágenes */
}

.image-gallery img {
    width: 7rem; /* Aproximadamente igual para distribuir 6 imágenes a lo largo */
    height: auto; /* Mantiene la proporción de las imágenes */
    padding: 0 5px; /* Espaciado entre imágenes, ajustar según sea necesario */
}

.section-divider {
    background-color: #fff; /* Color de fondo, ajusta según necesites */
}

.section-divider .top-border {
    height: 2px; /* Altura del borde */
    background-color: #ff9c0c; /* Color del borde */
    margin-bottom: 6rem; /* Espacio debajo del borde */
}

.section-divider h2 {
    font-size: 3.5rem; /* Tamaño del texto grande */
    color: #333; /* Color del texto */
    margin-bottom: 30px; /* Espacio debajo del título */
    text-align: left; /* Alineación a la izquierda */
    padding-left: 5rem;
    color: #ff9c0c;
}

.section-divider p {
    font-size: 18px; /* Tamaño estándar del texto */
    color: #666; /* Color del texto */
    text-align: center; /* Centrado del texto */
    margin: 20px auto; /* Centra el párrafo verticalmente y horizontalmente */
    width: 70%; /* Ancho del párrafo al 70% del contenedor */
    max-width: 70%; /* Asegura que no exceda el 70% incluso en vistas más grandes */
    padding-bottom: 7rem;
}

.container-grid {
    display: flex;
    justify-content: space-around; /* Distribuye espacio alrededor de cada ítem */
    align-items: center; /* Alinea los ítems verticalmente en el centro */
    padding: 20px;
    margin: 2rem 13rem;
}

.item {
    flex: 1; /* Asigna el mismo espacio a cada ítem */
    text-align: center; /* Asegura que el contenido de cada ítem esté centrado */
    margin: 10px; /* Espacio entre los ítems */
    color: #f89604;
}

.item img {
    width: 40%; /* Asegura que la imagen se ajuste al contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}
/* Estilo para la línea divisoria */
.divider {
    height: 3px;
    background-color: #f89604;
}

/* Estilos para el contenedor de contacto */
.contact-container {
    display: flex;
    justify-content: space-between;
    padding: 3rem 20px;
    background-color: #f9f9f9;
}

.contact-info, .contact-form {
    flex: 1;
    margin: 0 5rem; /* Reducido para disminuir espacio en blanco */
    font-family: 'Helvetica', sans-serif; /* Modern font */
    position: relative; /* Para la línea vertical */
}

/* Añadiendo la línea vertical */
.contact-info:after {
    content: '';
    position: absolute;
    right: -2.5rem; /* Ajuste según el margen */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #DAA520; /* Color mostaza para la línea */
}

.contact-info h4 {
    margin-bottom: 15px;
    line-height: 1.5; /* Improved line spacing */
}

.social-icons img {
    width: 30px;
    margin-right: 10px;
    transition: transform 0.3s; /* Smooth scaling effect */
}

.social-icons img:hover {
    transform: scale(1.1); /* Enlarge icons on hover */
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

.contact-form button {
    width: 100%;
    padding: 12px;
    background-color: #DAA520; /* Cambiado a color mostaza */
    color: white;
    border: none;
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Button shadow */
}

.contact-form button:hover {
    background-color: #B8860B; /* Mostaza más oscuro para el hover */
}
/*Construction*/
.under-construction {
    text-align: center; /* Centra todo el contenido */
    padding: 50px; /* Espacio generoso para evitar que se sienta apretado */
    background-color: #f8f8f8; /* Fondo claro para una apariencia limpia */
    border: 2px dashed #ccc; /* Borde punteado para destacar el área en construcción */
    margin: 20px; /* Margen exterior para separación del resto del contenido */
}

.under-construction img {
    width: 100px; /* Tamaño adecuado para el icono */
    margin-bottom: 20px; /* Espacio entre el icono y el título */
}

.under-construction h2 {
    color: #333; /* Texto oscuro para contraste */
    margin-bottom: 10px; /* Espacio debajo del título */
}

.under-construction p {
    color: #666; /* Color de texto más suave */
    max-width: 600px; /* Ancho máximo para el texto, para mejor legibilidad */
    margin: auto; /* Centra el texto horizontalmente */
}

.whatsapp-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    z-index: 1000;
    border-radius: 50%;  /* Hace el botón circular */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366; /* Color de fondo verde WhatsApp */
    overflow: hidden; /* Asegura que no se desborde el contenido */
}

.whatsapp-btn img {
    width: 80%;  /* Reducir un poco el tamaño del ícono para centrarlo visualmente */
    transition: opacity 0.3s ease; /* Transición suave para el efecto de opacidad */
}

.whatsapp-btn:hover, .whatsapp-btn:focus {
    transform: scale(1.1); /* Aumenta el tamaño al pasar el mouse */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

.whatsapp-btn:hover img, .whatsapp-btn:focus img {
    opacity: 0.9; /* Ligeramente transparente al pasar el mouse */
}
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    margin: 30px auto; /* Centra el contenedor horizontalmente y añade espacio en la parte superior */
    max-width: 80%;
    border-top: 3px solid #e67e22; /* Borde superior en color naranja */
  }
  
  .card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    width: calc(20% - 20px); /* Más tarjetas por fila, más pequeñas */
    text-align: center; /* Centrado de contenido dentro de la tarjeta */
    transition: transform 0.2s;
    cursor: pointer;
  }
  
  .card:hover {
    transform: scale(1.03);
  }
  
  .card h3 {
    color: #e67e22; /* Color del título para hacer eco del diseño general */
    margin: 10px 0;
  }
  
  .card img {
    width: 100%; /* La imagen ocupa todo el ancho de la tarjeta */
    height: auto; /* Altura automática para mantener la proporción */
    border-bottom: 1px solid #ccc; /* Borde sutil debajo de la imagen */
  }
  
  .card p {
    padding: 10px;
    margin: 0;
    color: #333;
  }
  
  .card button {
    background-color: #e67e22;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin-bottom: 10px;
    transition: background-color 0.3s;
  }
  
  .card button:hover {
    background-color: #cf6d1f; /* Cambio de color al pasar el cursor */
  }
  
@media (max-width: 970px) {
    header {
        flex-direction: column;
        padding: 1rem;
    }

    .logo img {
        height: 40px; /* Reducir el tamaño del logo */
    }

    nav ul {
        padding: 0;
        text-align: center;
    }

    .nav > li {
        padding-right: 1rem; /* Menor espaciado */
        float: none; /* No flotar para que se apilen verticalmente */
    }

    .nav li a {
        font-size: 16px; /* Fuente más pequeña para enlaces */
    }
    .main-content {
        height: auto; /* Altura auto para ajustar al contenido */
        padding: 20px; /* Añadir algo de padding */
    }

    .content-text {
        font-size: 1.5rem;
        padding: 10px; /* Menor padding */
        max-width: 100%; /* Utilizar todo el ancho disponible */
    }
    .section-divider .top-border {
        height: 2px;
        background-color: #ff9c0c;
        margin-bottom: 3rem;
    }
    .section-divider h2 {
        font-size: 1.5rem;

    }
    .section-divider p {
        font-size: 15px;
        padding-bottom: 2rem;
    }
    .image-gallery {
        display: flex; /* Asegura que la galería use flexbox para la disposición */
        justify-content: center; /* Centra las imágenes horizontalmente */
        align-items: center; /* Alinea las imágenes verticalmente */
        padding: 10px; /* Ajusta el padding para más espacio */
        flex-wrap: wrap; /* Permite que los ítems se envuelvan si no caben en una sola línea */
    }
    .image-gallery img {
        width: 10%; /* Reduce el ancho de cada imagen para que más imágenes entren en la línea */
        height: auto; /* Mantiene la proporción de las imágenes */
        margin: 5px; /* Añade margen para evitar que las imágenes se toquen entre sí */
    }
    .container-grid, .contact-container {
        flex-direction: column; /* Los elementos se apilan verticalmente */
        padding: 20px; /* Aumentado para más espacio alrededor */
    }

    .item, .contact-info, .contact-form {
        margin: 12px 0; /* Ajuste para mantener el diseño limpio */
    }

    .contact-info {
        position: relative; /* Para la línea vertical en diseño horizontal */
        padding-bottom: 20px; /* Espacio adicional al final */
    }

    .contact-info:after {
        display: none; /* Ocultamos la línea vertical en diseño de columna */
    }

    .contact-form input, .contact-form textarea {
        padding: 12px; /* Mantener el padding grande para facilitar la entrada táctil */
        margin-bottom: 12px; /* Ajuste para mejorar la separación */
    }

    .contact-form button {
        width: auto; /* Permitir que el botón ajuste su ancho */
        padding: 15px; /* Botón más grande para facilitar el clic */
        margin-bottom: 20px; /* Espacio adicional después del botón */
    }

    /* Ajustes adicionales para los iconos */
    .social-icons img {
        width: 35px; /* Hacer los íconos un poco más grandes para facilitar la interacción */
        margin-right: 15px; /* Más espacio entre íconos */
    }
    .container {
        flex-direction: column;
      }
    
      .card {
        width: 100%; /* Las tarjetas ocupan todo el ancho en móviles */
      }
}



@media (min-width: 970px) and (max-width: 1600px) {
    .content-text {
        font-size: 3.1rem;
    }
}

@media (max-width: 400px) {
    .container-grid {
        display: flex;
        flex-direction: column; /* Cambia a una disposición en columna para evitar problemas de espacio */
        align-items: center; /* Alinea los elementos al centro horizontalmente */
        justify-content: center; /* Alinea los elementos al centro verticalmente */
        padding: 10px; /* Ajusta el padding para mantener consistencia */
        margin: 0 auto; /* Centra el contenedor en la página */
        width: 100%; /* Asegura que el contenedor use todo el ancho disponible */
    }

    .item {
        width: 100%; /* Hace que cada ítem ocupe el ancho completo del contenedor */
        margin: 5px 0; /* Ajusta el margen para dar espacio entre ítems */
        text-align: center; /* Asegura que el texto dentro de cada ítem esté centrado */
    }
    .item img {
        width: 23%;
        height: auto;
    }
}