body {
    background-color: #e7e7e7; /* Color de fondo gris claro */
    color: #212529; /* Color de texto oscuro */
}

.text-orange {
    color: #eb4f04 !important;
}

.text-gray {
    color: #838280 !important;
}

.navbar {
    background-color: #eb4f04 !important;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.footer {
    background-color: #eb4f04;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.footer .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer p {
    margin: 5px 0;
}

.footer a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.footer a:hover {
    text-decoration: underline;
}


/* Configuración de colores */
.bg-orange {
    background-color: #eb4f04 !important;
}


/* Estilos del Hero Section */
.hero {
    background: linear-gradient(135deg, #eb4f04 50%, #838280 100%);
}

/* Estilos del Carrusel */
.carousel img {
    max-height: 400px;
    object-fit: cover;
}

/* Estilos de las tarjetas de servicios */
.card {
    border-radius: 10px;
}

.card img {
    height: 200px;
    object-fit: cover;
}

.btn-orange {
    background-color: #eb4f04;
    color: white;
}

.btn-orange:hover {
    background-color: #d54303;
}

/* Asegurar que no haya restricciones de ancho */
html, body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden; /* Evita que la imagen se desborde */
}

.bienvenida {
    background: url('/media/banner.jpg') no-repeat center center;
    background-size: cover;
    width: 100%; /* ✅ Usa todo el ancho sin desbordar */
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.bienvenida-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen para mejorar visibilidad */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 60px; /* Espacio para evitar superposición con navbar */
}
/* Estilo del logo */
.logo-bienvenida {
    position: absolute;
    top: 10px; /* Ajusta la posición del logo */
    left: 50%;
    transform: translateX(-50%);
    width: 150px; /* Ajusta el tamaño */
    z-index: 10;
}

.bienvenida h1,
.bienvenida p {
    color: white;
    margin: 0;
    padding: 10px;
}

.carrusel-fondo {
    background: #e7e7e7;
    padding: 30px 0;
    
}

.secciones-container {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

.seccion {
    background: #eb4f04;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 30%;
}

.icono-seccion {
    font-size: 60px; /* Tamaño del icono */
    color: white; /* Color de los iconos */
    margin-bottom: 10px; /* Espaciado con el título */
}

.logo-navbar {
    width: 40px; /* Ajusta el tamaño del logo */
    height: auto;
    margin-right: 10px; /* Espacio entre el logo y el texto */
}

.navbar-brand {
    display: flex;
    align-items: center; /* Alinea verticalmente el logo y el texto */
    font-size: 1.2rem; /* Ajusta el tamaño del texto si es necesario */
    font-weight: bold;
}

.navbar .navbar-brand {
    color: white !important; /* Hace el texto de la marca blanco */
    font-weight: bold;
    font-size: 1.2rem;
}

.navbar .navbar-brand:hover {
    color: #f8f9fa !important; /* Un tono mas claro al pasar el mouse */
}

.navbar .nav-link {
    color: white !important; /* Hace los enlaces del menu blancos */
}

.navbar .nav-link:hover {
    color: #f8f9fa !important; /* Un tono mas claro al pasar el mouse */
}


.galeria-img {
    width: 30%;
    margin: 10px; /* Agrega separación entre las imágenes */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s;
    cursor: pointer;
}

.galeria-img:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content-wrapper {
    position: relative;
    max-width: 80%;
    max-height: 80%;
    background: rgba(0, 0, 0, 0.9);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 5px;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}


/* Estilos de la seccion Nosotros */
.nosotros-banner {
    background: url('/media/bodega.jpg') no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nosotros-banner .overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen para mejorar visibilidad */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}
.nosotros-banner .overlay p {
    color: white !important;
}


.nosotros-container {
    background: url('/media/bodega.jpg') no-repeat center center;
    background-size: cover;
    padding: 50px 0;
    color: white;
}

/* Secciones con fondo naranja */
.seccion-naranja {
    background: #eb4f04;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
}

/* Iconos de cada sección */
.seccion-naranja i {
    font-size: 30px;
    margin-bottom: 10px;
    color: white;
}

.valores-list {
    list-style-type: none; /* Elimina viñetas */
    padding: 0;
    text-align: center; /* Asegura que el texto esté alineado correctamente */
}

.valores-list li {
    font-size: 15px;
    margin: 5px 0; /* Espaciado uniforme entre elementos */
}

.historia-seccion {
    background-color: #eb4f04; /* Fondo naranja */
    color: white; /* Texto blanco */
    padding: 40px; /* Espaciado interno */
    border-radius: 15px; /* Bordes redondeados */
    margin-top: 40px; /* Separacionn del banner de "Sobre Nosotros" */
}

.historia-seccion h2 {
    color: white; /* Asegurar que el titulo sea blanco */
}

.icono-blanco {
    color: white !important; /* Icono blanco */
}

.img-infraestructura {
    width: 80%; /* Reducir tamaño de las imagenes */
    height: auto; /* Mantener proporciones */
    margin: 10px auto; /* Centrar imagenes */
    display: block;
    border-radius: 10px; /* Bordes redondeados para mejor estatica */
}
/* 🔥 Banner de Servicios */
.servicios-banner {
    background: url("/static/img/servicios/banner_servicios.jpeg") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 30px;
}

/* ✅ Overlay para mejorar visibilidad del texto */
.servicios-banner .overlay {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ✨ Animación en el texto */
@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;0
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slideIn 1s ease-in-out;
}

.animate-fade-in {
    animation: fadeIn 1.5s ease-in-out;
}

/* 📌 Franja naranja inferior para separar el banner */
.servicios-banner::after {
    content: "";
    width: 100%;
    height: 5px;
    background: #eb4f04;
    position: absolute;
    bottom: 0;
    left: 0;
}


/* Sección de Servicios */
.servicio {
    margin-bottom: 60px;
    padding: 20px;
}

.img-servicio {
    width: 100%;
    max-width: 400px;
    height: 300px; /* Altura fija para mantener proporción */
    object-fit: cover; /* Ajuste de la imagen sin distorsión */
    border-radius: 10px;
    display: block;
    margin: auto;
}

/* Botón de Cotización */
.btn-orange {
    background-color: #eb4f04;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s;
}

.btn-orange:hover {
    background-color: #d54303;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.texto-animado {
    opacity: 0; /* Inicialmente invisible */
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Aparece cuando el usuario la ve en pantalla */
.texto-animado.aparece {
    opacity: 1;
    transform: translateY(0);
}

@keyframes waveEffect {
    0% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
    100% {
        transform: translateY(0px) scale(1);
    }
}

.imagen-animada {
    opacity: 0; /* Inicialmente invisible */
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Cuando aparecen en pantalla */
.imagen-animada.aparece {
    opacity: 1;
    transform: scale(1);
    animation: waveEffect 1.5s ease-in-out infinite; /* Aplica efecto de onda */
}

/* ====== Banner de Contacto ====== */
.contacto-banner {
    background: #eb4f04; /* Fondo naranja */
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: left;
    padding: 30px;
}

.contacto-banner .container {
    display: flex;
    align-items: center;
}

.logo-banner {
    width: 120px; /* Ajusta el tamaño del logo */
    margin-right: 20px;
}

.text-banner h1 {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}

.text-banner p {
    font-size: 18px;
    margin: 0;
}

/* ====== Información de Contacto ====== */
.contacto-info {
    background: #eb4f04;
    color: white;
    padding: 40px;
    border-radius: 10px;
}

/* ====== Mapa y Formulario ====== */

.mapa-ubicacion {
    display: block;
    margin-left: auto; /* Empuja el mapa hacia la derecha */
}

/* ====== Formulario ====== */
.contacto-form {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* Color naranja en los textos del formulario */
.contacto-form label {
    font-weight: bold;
    color: #eb4f04; /* Naranja */
}

.contacto-form .form-control {
    border-radius: 5px;
    border: 2px solid #eb4f04; /* Borde naranja */
}

/* Placeholder con color gris oscuro */
.contacto-form .form-control::placeholder {
    color: #838280; /* Gris */
}

/* Botón de enviar */
.contacto-form .btn-orange {
    background-color: #eb4f04;
    color: white;
    font-weight: bold;
    border: none;
    transition: background 0.3s ease-in-out;
}

.contacto-form .btn-orange:hover {
    background-color: #d54303; /* Un tono más oscuro al pasar el mouse */
}


/* ====== Botón de WhatsApp Flotante ====== */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    font-size: 28px;
    padding: 15px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}


/* Estilos para la sección de proyectos */
.proyecto-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.proyecto-img:hover {
    transform: scale(1.05);
}

.proyecto-info {
    width: 100%;
    text-align: center;
}

@media (min-width: 768px) {
    .proyecto-info {
        width: 60%;
        text-align: left;
    }
}


.logos-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    padding: 10px 0;
}

.logos-track {
    display: flex;
    gap: 30px;
    animation: scroll-logos 15s linear infinite; /* Duración y tipo de desplazamiento */
}

.cliente-logo {
    max-height: 80px;
    width: auto;
    filter: grayscale(50%);
    transition: filter 0.3s ease;
}

.cliente-logo:hover {
    filter: grayscale(0%);
}

/* Animación de desplazamiento automático */
@keyframes scroll-logos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.img-grande {
    width: 50%;
    height: auto;
    margin-bottom: 10px; /* Reduce el espacio entre la imagen grande y las inferiores */
}
.img-tijera {
    width: 55%;
    height: auto;
    margin-bottom: 10px; /* Reduce el espacio entre la imagen grande y las inferiores */
}

.row.text-center {
    margin-top: 0 !important; /* Elimina margen extra */
    padding-top: 5px; /* Ajuste fino */
}

@media (max-width: 768px) {
    .secciones-container {
        flex-direction: column;
        align-items: center;
    }

    .seccion {
        width: 90%;
        margin-bottom: 20px;
    }
}

.proyectos-destacados {
    background-color: #f2f2f2;
}

.proyecto-img {
    max-height: 400px;
    object-fit: cover;
    width: 100%;
}

.clientes-destacados {
    background-color: #f2f2f2;
}

.cliente-logo {
    max-height: 80px;
    width: auto;
    filter: grayscale(50%);
    transition: filter 0.3s ease;
}

.cliente-logo:hover {
    filter: grayscale(0%);
}

.logos-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    padding: 10px 0;
}

.logos-track {
    display: flex;
    gap: 30px;
    animation: scroll-logos 15s linear infinite;
}

@keyframes scroll-logos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}