/*---------------------------------------------------------------------------------------------------*/
/* Variables de color */
:root {
    --hm-blanco: #f3ecec;
    --hm-azul: #007bff;
    --hm-verde: #28a745;
    --hm-azul-oscuro: #0056b3;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--hm-blanco);
    color: #333;
    margin: 0;
    padding: 0;
    font-size: 16px;
}


/*----CARRUSEL-------*/
#carrusel .carousel-inner .carousel-item img {
    max-height: 580px; /* Altura máxima más razonable para móviles */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor */
}
  
  .container.mt-5 {
    margin-top: 1rem !important; /* Adjust this value to reduce the space between the menu and the carousel */
  }



  
/*----- DEL MENU SUS SECCIONES-----*/
.navbar-nav .nav-link {
    color: #4c4b4b !important; /* Color de letra plomo por defecto */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #0e0e9d !important; /* Color de letra azul al pasar el mouse o enfocar */
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #0000ff !important; /* Si el link está activo, también será azul (puedes cambiarlo si lo deseas) */
}
/*-----------------------------------*/


/*----- DEL BROCHURE SUS ESTILOS-----*/
.btn-outline-light {
    color: #4c4b4b  !important; /* Color de letra Brochure */
    border-color: #ac2e2e !important; /* Color del borde */
    border-width: 2px !important; /* Ancho borde */
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    color: #ffffff !important; /* Color de letra al pasar el mouse  */
    background-color: #d13e11 !important; /* Color de fondo al pasar el mouse */
    border-color: #ffffff !important; /* Color del borde al pasar el mouse */
}
/*-----------------------------------*/


/*-----------COLOR DE MENÚ--------*/
.navbar-dark.bg-primary {
    background-color: #ffffff !important; 
}
/*-------------------------------*/

/*-----------COLOR DE MENÚ 3 rayas--------*/
.navbar-toggler-icon {
    filter: invert(100%) hue-rotate(180deg) brightness(200%); 
}

.mensaje-destacado2 {
    margin-top: 20px; /* Agrega un espacio superior de 20 píxeles (ajusta si es necesario) */
    padding-top: 25px; /* Aumenta el padding superior para hacerlo más alto */
    padding-bottom: 25px; /* Aumenta el padding inferior para hacerlo más alto */
    font-size: 1.2em; /* Aumenta o reduce tamaño de fuente HmTransport */
    font-weight: bold; /* Aplica negrita al texto */
    font-style: normal; /* Aplica cursiva al texto */
    background-color:  #271bca  !important; /* Cambia el color de fondo a azul */
}

/*---------------------------------------------------------------------------------------------------*/


.mensajes-dinamicos .container p {
    font-size: 1.1em; /* Aumenta el tamaño de la letra (puedes ajustar el valor) */
    font-style: italic; /* Aplica cursiva al texto */
    transition: opacity 1s ease-in-out; /* Añade transición para la opacidad si no la tenías */
}

.mensajes-dinamicos .mensaje-oculto {
    display: none;
    opacity: 0; /* Asegura que los mensajes ocultos estén completamente transparentes */
}

.mensajes-dinamicos .mensaje-activo {
    display: block; /* Asegura que el mensaje activo se muestre */
    opacity: 1; /* Asegura que el mensaje activo sea completamente visible */
}


/*---------WHATSAPP---------*/

/* Contenedor de WhatsApp */
.whatsapp-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    width: 55px; /* Ajusta el ancho */
    height: 55px; /* Ajusta la altura para que sea igual al ancho y forme un círculo */
    display: flex; /* Para centrar el icono */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s;
    padding: 0; /* Elimina el padding para un control más preciso del tamaño */
}


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

.whatsapp-bubble a {
    color: white;
    text-decoration: none;
}

/*--------------------------*/






/*----SEGURO DE----*/
.nuevo-boton {
    border-radius: 10px; /* Bordes redondeados para un aspecto moderno */
    padding: 1.5em 1em; /* Mayor espacio interno para mejor legibilidad */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
    width: 100%; /* Asegura que los botones ocupen el ancho completo */
    margin-bottom: 0.5rem; /* Espacio entre los botones */
    
    font-weight: bold; /* Texto en negrita para destacar */
}

.nuevo-boton:hover {
    background-color: #e9ecef; /* Un ligero cambio de color al pasar el ratón */
    transform: scale(1.02); /* Un ligero aumento de tamaño al pasar el ratón */
}

.nuevo-boton i {
    color: inherit; /* Hereda el color del texto del botón */
}
/*------------*/

/*----SERVICIOS ADICIONALES-------------*/

/* Estilos para la sección de servicios adicionales */
.bg-light .card {
    background-color: #2ca543; /* Verde */
    color: white; /* Texto blanco */
    border: none; /* Opcional: quitar el borde de la tarjeta */
}

.bg-light .card-title,
.bg-light .card-text {
    color: white; /* Asegurar que el texto dentro de la tarjeta sea blanco */
}

.bg-light .btn-outline-success {
    color: white;
    border-color: white;
}

.bg-light .btn-outline-success:hover {
    background-color: #007bff; /* Azul al pasar el ratón */
    color: rgb(247, 241, 241);
    border-color: #ffffff;
}

.bg-light .btn-outline-success.btn-sm {
    color: rgb(241, 241, 241); /* Texto blanco para el botón pequeño */
    border-color: rgb(21, 21, 144);
    background-color: #1818a9;

}

.bg-light .btn-outline-success.btn-sm:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/*----------------------------*/


/*----grip-----*/

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta el ancho mínimo de las columnas */
    gap: 1rem; /* Espaciado entre los elementos del grid */
}


  .grid-item {
    width: 300px; /* O el ancho que hayas definido */
    margin-bottom: 20px; /* Espacio vertical entre las filas de elementos */
    margin-right: 20px; /* Espacio horizontal entre los elementos (para layout en filas) */
  }
  
  /* Para el último elemento de cada fila, podrías querer quitar el margen derecho */
  .grid.fit-rows .grid-item:nth-child(auto) { /* Ajusta el selector según tu layout */
    margin-right: 0;
  }
  
  .grid-item img {
    height: 200px; /* Altura fija para las imágenes */
    object-fit: cover; /* Cubre el contenedor */
    width: 100%; /* Asegura que la imagen sea responsiva */
}



/**footer pequeño codigo*/

/* Footer */
footer .container {
    padding: 2rem 1rem; /* Ajusta el padding del footer */
}

footer .row > div {
    margin-bottom: 1rem; /* Espacio entre las columnas del footer */
}


.social-icon {
    display: inline-block; /* Ensure icons are inline but can have block-level properties */
    transition: transform 0.3s ease-in-out; /* Smooth transition for the transform property */
}

.social-icon:hover {
    transform: scale(1.2); /* Scale up the icon by 20% on hover */
}

/*----------------------*/




/*------Boton certificado-----*/
.btn-outline-primary {
    transition: transform 0.3s ease-in-out; /* Agrega una transición suave para la transformación */
}

.btn-outline-primary:hover {
    transform: scale(1.05); /* Escala el botón ligeramente hacia arriba al pasar el mouse */
}
/*----------------------------*/



/* Estilos para la animación de los valores */
.valor-animado {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.valor-animado:hover {
    transform: translateY(-5px); /* Ligeramente hacia arriba */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}
/*----------------------------------------------*/


/* Servicio Card Hover Effect */
.servicio-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.servicio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}


#formularioContacto {
    width: 60%; /* Ajusta el ancho del formulario si es necesario */
    margin-left: auto;
    margin-right: auto;
}





/* Carrusel de Clientes */
#clientes-carousel .carousel-inner .carousel-item .row .col-6 .img-fluid {
    max-height: 100px;
    object-fit: contain;
    opacity: 0.7;
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Asegúrate de tener la transición aquí */
}

#clientes-carousel .carousel-inner .carousel-item .row .col-6 .img-fluid:hover {
    filter: grayscale(0%); /* Al pasar el cursor, el filtro vuelve a 0 (color) */
    opacity: 1; /* La opacidad vuelve a 1 para mayor claridad */
}

#clientes-carousel .carousel-control-prev,
#clientes-carousel .carousel-control-next {
    width: 5%;
}

#clientes-carousel .carousel-indicators {
    bottom: -30px;
}


/* Media query para pantallas más pequeñas */
@media (max-width: 767.98px) {
    .container-fluid.mt-0 .row > div {
        width: 100%; /* Apila las columnas en móviles */
    }

    .nuevo-boton {
        padding: 1rem; /* Reduce el padding en móviles */
        font-size: 1rem; /* Reduce el tamaño de la fuente en móviles */
    }

    #carrusel .carousel-inner .carousel-item img {
        height: 300px; /* Altura del carrusel en móviles */
    }
}


/* OBRAS*/


/* Estilos para la sección de Proyectos y Obras */
.obra-container {
    position: relative; /* Establece el contexto para el posicionamiento absoluto del texto */
    overflow: hidden; /* Recorta cualquier parte de la imagen que exceda el contenedor */
    height: 400px; /* Mantiene una altura fija para el carrusel */
}

.obra-imagen {
    display: block; /* Evita espacios extra debajo de la imagen */
    width: 100%; /* La imagen se ajusta al ancho del contenedor */
    height: auto; /* La altura se ajusta proporcionalmente */
    object-fit: contain; /* La imagen se escala para caber dentro del contenedor, manteniendo su proporción. Pueden aparecer espacios en blanco si la proporción no coincide. */
    transition: filter 0.3s ease-in-out; /* Transición suave para el desenfoque (opcional) */
}

.obra-container:hover .obra-imagen {
    filter: blur(0px); /* Elimina el desenfoque al pasar el mouse (opcional) */
}

.obra-texto {
    position: absolute; /* Posiciona el texto sobre la imagen */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el texto */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente para el texto */
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    z-index: 10; /* Asegura que el texto esté por encima de la imagen */
    white-space: pre-line; /* Respeta los saltos de línea en el texto */
}