/* Estilo general para el cuerpo */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9; /* Color de fondo general */
    color: #000; /* Color del texto en general */
}
/* Estilo del encabezado */
.header_contacto {
    background-color: #000881; /* Fondo oscuro para el encabezado */
    color: #ffffff; /* Color del texto en el encabezado */
    padding: 20px;
    text-align: center;
}
/* Estilo de la barra de navegación */
.navbar {
    background-color: #ffffff; /* Fondo blanco para el menú */
    display: flex;
    justify-content: flex-start; /* Mantiene el menú principal a la izquierda */
    align-items: center;
    position: relative; /* Posicionamiento relativo para permitir el menú flotante */
    padding: 0 10px; /* Añade un pequeño padding para el contenedor del menú */
}
/* Contenedor del menú */
.menu--iris {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Estilo de los elementos del menú */
.menu__item {
    margin-right: 20px;
    position: relative; /* Para el submenú */
}
.menu__link {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #000000; /* Color inicial del texto en negro */
    font-weight: bold;
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el enlace */
}
/* Efecto de fondo y texto en hover */
.menu__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000881; /* Color de fondo en hover */
    z-index: -1;
    transition: all 0.4s ease;
    transform: scaleX(0);
    transform-origin: left;
}
.menu__link:hover::before {
    transform: scaleX(1); /* Expande el fondo desde la izquierda hacia la derecha */
}
.menu__link:hover {
    color: #ffffff; /* Cambia el color del texto a blanco en hover */
}
/* Submenú */
.submenu {
    display: none;
    position: absolute;
    background-color: #fff;
    padding: 0;
    list-style: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.submenu a {
    display: block;
    padding: 10px 20px;
    color: #000881; /* Mismo color de texto que el menú principal */
    font-weight: bold;
    text-decoration: none;
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer;
}
.submenu a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000881; /* Mismo color que el menú principal */
    z-index: -1;
    transition: all 0.4s ease;
    transform: scaleX(0);
    transform-origin: left;
    border-radius: 5px;
}
.submenu a:hover::before {
    transform: scaleX(1);
}
.submenu a:hover {
    color: #ffffff; /* Mismo efecto de hover que en el menú principal */
}
.menu__item:hover .submenu {
    display: block;
}
/* Menú invisible - Logeo */
.menu__item--hidden {
    position: absolute;
    right: 10px; /* Coloca el menú al extremo derecho */
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center; /* Centra verticalmente el contenido del logeo */
}
.menu__link--hidden {
    display: block;
    width: 50px; /* Ajusta el tamaño del área de logeo invisible */
    height: 50px;
    background-color: #ffffff; /* Invisible por ser blanco */
    text-indent: -9999px; /* Oculta el texto */
    border-radius: 50%; /* Opcional: redondeado */
}
/* Efecto hover para indicar que algo es clickeable */
.menu__link--hidden:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Indica sutilmente la ubicación en hover */
}
/* Estilo del carrusel principal */
.carousel-inner img {
    width: 100%;
    height: 100%;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: #000881; /* Fondo oscuro para los controles del carrusel */
}
/* Efecto de crecimiento en imágenes al pasar el cursor con borde invisible */
.grow-on-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border 0.2s ease-in-out; /* Transición suave */
    cursor: pointer; /* Cursor de mano para indicar que es interactivo */
    border: 2px solid transparent; /* Borde invisible y más delgado */
    border-radius: 10px; /* Bordes redondeados */
}
.grow-on-hover:hover {
    transform: scale(1.2); /* Escala al 110% al pasar el cursor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra al hacer hover */
    border-color: #ffffff; /* Borde blanco y delgado al pasar el cursor */
}
.card {
    flex: 0 0 25%;
    box-sizing: border-box;
    border-radius: 10px; /* Bordes redondeados opcionales */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    background-color: white; /* Fondo blanco para el margen alrededor */
    padding: 0px; /* Espacio interno dentro de la tarjeta para dar el efecto de margen */
}
.card img {
    width: 100%;
    height: auto; /* Ajusta la altura de las imágenes para que no se recorten */
    object-fit: contain; /* Evita que los logos se recorten */
   border-radius: 0px; /* Bordes redondeados en los 4 lados */
    background-color: #fff; /* Asegura que el fondo de las imágenes también sea blanco */
}
/* Animación de deslizamiento */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%); /* Desplaza el ancho total del contenedor */
    }
}
/* Estilo de la sección de servicios */
.services-list {
    list-style: none;
    padding: 0;
    display: flex; /* Alinea los elementos en fila */
    flex-direction: row; /* Asegura que los elementos se coloquen en una fila */
    justify-content: space-around; /* Distribuye el espacio de manera uniforme */
    align-items: center; /* Centra los elementos verticalmente */
}
.services-list li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: flex-start; /* Alinea el contenido al inicio */
    width: 100%; /* Asegura que cada item ocupe el 100% del contenedor */
    max-width: 600px; /* Limita el ancho máximo para evitar desbordamiento */
}
.services-list li i {
    color: #000881; /* Cambia el color de los íconos a azul */
    font-size: 48px; /* Aumenta el tamaño del ícono si es necesario */
    transition: color 0.3s ease-in-out;
}
.services-list li i:hover {
    color: #1a73e8; /* Cambia el color al pasar el cursor (si deseas un cambio de color en hover) */
}
/* Sección de descripción */
.description-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.description-section .logo {
    max-width: 250px; /* Aumenta el tamaño máximo del logo de Ayrsac */
    height: auto;
    display: block;
    margin: 0 auto;
}
.description-section .text-content {
    flex: 1;
    padding: 0 20px;
    text-align: left;
}
.description-section img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}
/* Estilo de la sección de contacto PIE DE PAGINA */
.contact-section {
    background-color: #000881; /* Fondo oscuro */
    color: #ffffff; /* Color del texto en blanco */
    padding: 40px 0; /* Espaciado */
}
.contact-section h4 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
}
.contact-section p {
    margin-bottom: 10px;
    font-size: 1.1em;
}
.contact-section a {
    color: #ffffff; /* Color de los enlaces */
    text-decoration: none;
    font-weight: bold;
}
.contact-section a:hover {
    color: #000881; /* Color de los enlaces al pasar el cursor */
    text-decoration: underline;
}
/* Estilo del pie de página */
.footer {
    background-color: #000881; /* Fondo del pie de página igual que la sección de contacto */
    color: #ffffff;
    padding: 20px 0;
    text-align: center; /* Centrar el texto */
}
.footer p {
    margin: 0;
    font-size: 0.9em;
    color: #ffffff; /* Color del texto en blanco */
}