/* Ajustes generales */
body {
    margin: 0;
    padding: 0;
}

/* Header personalizado */
header {
    background-color: #ffffff; /* Fondo blanco */
    border-bottom: 1px solid #e0e0e0; /* Línea separadora */
    padding: 0px 0; /* Espaciado superior e inferior */
    position: relative;
    z-index: 10; /* Asegura que esté sobre otros elementos */
    width: 100%; /* Asegura que no exceda el ancho de la pantalla */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacar el header */
}

/* Contenedor personalizado */
.container-custom {
    max-width: 1200px; /* Limita el ancho del contenido */
    margin: 0 auto; /* Centra el contenido */
    padding: 0 20px; /* Añade espacio interno a los lados */
}

/* Logotipo */
.navbar-brand {
    display: contents;
    align-items: center; /* Alinea verticalmente el logotipo */
    justify-content: center; /* Centra el logotipo horizontalmente */
    margin: 0 auto; /* Evita desplazamientos innecesarios */
}

.navbar-brand img {
    height: 50px; /* Tamaño del logotipo */
    max-width: 100%; /* Asegura que no se desborde */
    object-fit: contain; /* Mantiene la proporción */
}

/* Menú estándar */
.navbar-menu {
    display: flex; /* Muestra los enlaces en línea */
    gap: 20px; /* Espaciado entre enlaces */
    align-items: center; /* Alinea los enlaces verticalmente */
}

.navbar-menu a {
    text-decoration: none; /* Sin subrayado */
    color: #6063e7; /* Azul principal */
    font-weight: bold; /* Texto en negrita */
    font-size: 1rem; /* Tamaño del texto */
    transition: color 0.3s ease; /* Efecto de transición */
}

.navbar-menu a:hover {
    color: #5054d8; /* Azul más oscuro al pasar el mouse */
}

/* Menú hamburguesa (solo visible en móviles) */
.navbar-toggler {
    background-color: transparent; /* Fondo transparente */
    border: none; /* Sin borde */
    font-size: 1.5rem; /* Tamaño del ícono */
    color: #333; /* Color del ícono */
    cursor: pointer;
    display: block; /* Asegura su visibilidad en móviles */
}

/* Menú deslizante */
#slideMenu {
    position: fixed;
    top: 0;
    left: -300px; /* Ocultar inicialmente fuera de la pantalla */
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease-in-out;
    z-index: 1050;
    padding: 20px;
}

#slideMenu.active {
    left: 0; /* Desliza hacia la vista */
}

#slideMenu ul {
    list-style: none; /* Sin puntos en la lista */
    padding: 0;
    margin: 0;
}

#slideMenu ul li a {
    color: #6063e7; /* Azul principal */
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none; /* Sin subrayado */
    padding: 10px 0;
    display: block; /* Asegura que el enlace ocupe todo el ancho */
    transition: color 0.3s ease;
}

#slideMenu ul li a:hover {
    color: #5054d8; /* Azul más oscuro al pasar el mouse */
}

.close-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #333;
}

/* Responsividad */
@media (min-width: 768px) {
    .navbar-toggler {
        display: none; /* Oculta el botón hamburguesa en pantallas grandes */
    }

    .navbar-menu {
        display: flex; /* Asegura que el menú estándar sea visible */
        justify-content: flex-end; /* Alinea el menú a la derecha */
    }

    #slideMenu {
        display: none; /* Oculta el menú deslizante en pantallas grandes */
    }
}

@media (max-width: 767px) {
    .navbar-menu {
        display: none; /* Oculta el menú estándar en móviles */
    }

    .navbar-toggler {
        display: block; /* Muestra el botón hamburguesa */
    }
}

/* Footer */
footer {
    background-color: #f8f9fa; /* Fondo gris claro */
    border-top: 1px solid #e0e0e0; /* Línea separadora */
    padding: 40px 20px; /* Espaciado interno */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar */
}

/* Títulos en el footer */
footer h6 {
    color: #343a40; /* Gris oscuro para mayor legibilidad */
    font-size: 1.2rem; /* Tamaño ligeramente mayor para jerarquía */
    font-weight: 600; /* Negrita ligera */
    margin-bottom: 15px; /* Espaciado inferior */
    border-bottom: 2px solid #6063e7; /* Línea decorativa azul */
    padding-bottom: 5px; /* Espaciado debajo del título */
}

/* Lista de enlaces */
footer ul.list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none; /* Sin puntos de lista */
}

/* Estilo de los enlaces */
footer ul.list-unstyled li a {
    color: #6c757d; /* Texto en gris medio */
    font-size: 0.9rem; /* Tamaño reducido */
    text-decoration: none; /* Sin subrayado */
    font-weight: 500; /* Peso intermedio para legibilidad */
    transition: color 0.3s ease; /* Cambio de color suave */
}

footer ul.list-unstyled li a:hover {
    color: #6063e7; /* Cambia a azul principal al pasar el mouse */
}

/* Campo de suscripción */
footer .input-group .form-control {
    border-radius: 20px 0 0 20px; /* Bordes redondeados en la izquierda */
    border: 1px solid #ccc; /* Borde gris claro */
    padding: 10px; /* Espaciado interno */
    font-size: 0.9rem; /* Tamaño reducido */
}

/* Botón de suscripción */
footer .input-group .btn-primary {
    background-color: #6063e7; /* Azul principal */
    color: #ffffff; /* Texto blanco */
    border: none; /* Sin bordes */
    border-radius: 0 20px 20px 0; /* Bordes redondeados en la derecha */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 0.9rem; /* Tamaño reducido */
    transition: background-color 0.3s ease; /* Cambio de color suave */
}

footer .input-group .btn-primary:hover {
    background-color: #5054d8; /* Azul más oscuro al pasar el mouse */
}

/* Texto centrado en la parte inferior */
footer .text-center {
    font-size: 0.85rem; /* Texto pequeño */
    color: #6c757d; /* Gris medio */
    margin-top: 20px; /* Espaciado superior */
}

/* Enlaces del texto centrado */
footer .text-center a {
    color: #6063e7; /* Azul principal */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Resaltar enlaces */
}

footer .text-center a:hover {
    text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* Estilo de columnas en pantallas grandes */
footer .row > div {
    margin-bottom: 20px; /* Espaciado entre columnas */
}

/* Responsividad */
@media (max-width: 768px) {
    footer .row {
        flex-direction: column; /* Apila las columnas */
        gap: 20px; /* Espaciado entre secciones */
    }

    footer .text-center {
        margin-top: 30px; /* Espaciado mayor en dispositivos pequeños */
    }
}

/* Contenedor personalizado */
.container-custom {
    max-width: 1140px; /* Ancho máximo */
    margin: 0 auto; /* Centrar horizontalmente */
    width: 100%; /* Usar todo el ancho disponible */
    padding: 0 15px; /* Reducir padding lateral */
    box-sizing: border-box; /* Ajustar tamaño */
}

.padding-y-4 {
    /*padding-top: 1.5rem;  Espaciado superior */
    padding-bottom: 1.5rem; /* Espaciado inferior */
}

@media (max-width: 768px) {
    .container-custom {
        max-width: 100%; /* Usar todo el ancho disponible */
        padding: 0 10px; /* Reducir padding lateral */
    }

    .padding-y-4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* stilos resultados.blade */
/* Contenedor de filtros */
.filtros-contenedor {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #e0e0e0; /* Borde gris claro */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    padding: 20px;
    margin-bottom: 20px;
}

/* Título de la sección */
.filtros-contenedor h5 {
    color: #333333; /* Tono oscuro */
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid #6063e7; /* Línea decorativa azul */
    padding-bottom: 10px;
}

/* Estilo de los labels */
.filtros-contenedor .form-group label {
    font-weight: bold;
    color: #555555;
    margin-bottom: 10px;
    display: block;
}

/* Campos del formulario */
.filtros-contenedor .form-control {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    transition: all 0.3s ease;
}

.filtros-contenedor .form-control:focus {
    border-color: #6063e7; /* Azul principal */
    box-shadow: 0 0 5px rgba(96, 99, 231, 0.5); /* Sombra azul */
}

/* Checkboxes */
.filtros-contenedor .form-check {
    margin-bottom: 10px;
}

.filtros-contenedor .form-check-input {
    accent-color: #6063e7; /* Azul principal */
}

.filtros-contenedor .form-check-label {
    margin-left: 10px;
    color: #333333;
}

/* Rango de precio */
.filtros-contenedor .form-range {
    width: 100% !important; /* Asegura que se aplique */
    height: 8px; /* Altura del track */
    padding: 0;
    background: #e0e0e0; /* Color del track base */
    border-radius: 5px;
    outline: none;
    -webkit-appearance: none; /* Resetea estilos en WebKit */
    appearance: none; /* Resetea estilos generales */
    transition: background 0.3s ease;
}

/* Estilo del track en WebKit (Chrome, Safari) */
.filtros-contenedor .form-range::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #6063e7 50%, #e0e0e0 50%);
    height: 8px;
    border-radius: 5px;
    cursor: pointer;
}

/* Thumb (botón deslizante) en WebKit */
.filtros-contenedor .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #6063e7;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

/* Estilo del track en Firefox */
.filtros-contenedor .form-range::-moz-range-track {
    background: linear-gradient(to right, #6063e7 50%, #e0e0e0 50%);
    height: 8px;
    border-radius: 5px;
}

/* Thumb (botón deslizante) en Firefox */
.filtros-contenedor .form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #6063e7;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

/* Estilo del track en Edge/IE */
.filtros-contenedor .form-range::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.filtros-contenedor .form-range::-ms-fill-lower {
    background: #6063e7;
    border-radius: 5px;
}

.filtros-contenedor .form-range::-ms-fill-upper {
    background: #e0e0e0;
    border-radius: 5px;
}

.filtros-contenedor .form-range::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #6063e7;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

/* Botón de filtrar */
.filtros-contenedor .btn-primary {
    background-color: #6063e7; /* Azul principal */
    border: none;
    border-radius: 20px;
    font-weight: bold;
    padding: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.filtros-contenedor .btn-primary:hover {
    background-color: #5054d8; /* Azul más oscuro */
    transform: scale(1.02);
}


/* Barra de rango dinámica */
.filtros-contenedor .form-range {
    -webkit-appearance: none; /* Reset en navegadores WebKit */
    appearance: none; /* Reset general */
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, #6063e7 0%, #e0e0e0 0%); /* Inicialmente 0% azul */
    outline: none;
    transition: background 0.3s ease; /* Suaviza el cambio de color */
}

/* Thumb (botón del rango) en WebKit */
.filtros-contenedor .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #6063e7; /* Azul de la marca */
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Thumb para Firefox */
.filtros-contenedor .form-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #6063e7;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Track en navegadores no soportados */
.filtros-contenedor .form-range::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
}

/* Actualizar el azul al mover el rango */
.filtros-contenedor .form-range:focus {
    outline: none;
}

/* Estilo de los títulos de los filtros */
.filtros-contenedor h5 {
    color: #6063e7; /* Azul de la marca */
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid #6063e7; /* Línea decorativa azul */
    padding-bottom: 10px;
}

/* Ventana deslizante filtros */
.offcanvaso {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 300px !important;
    height: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2) !important;
    transition: left 0.3s ease-in-out !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
    padding: 20px !important;
}

.offcanvaso.active {
    left: 0 !important;
}

.offcanvaso .close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    font-size: 1.5rem !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

@media (min-width: 768px) {
    #filtersMenu {
        display: block !important; /* Asegura que sea visible */
        position: static !important;
    }
}

@media (max-width: 768px) {
    #filtersMenu {
        display: none !important; /* Oculta en móvil hasta que se active */
    }

    #filtersMenu.active {
        display: block !important;
        position: fixed;
    }
}



/* Contenedor principal que agrupa todas las tarjetas  resultados*/

/* Contenedor principal de las tarjetas */
.resultados-tarjetas {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

/* Configuración de la tarjeta */
.tarjetas {
    display: flex; /* Flexbox para distribución horizontal */
    flex-wrap: nowrap; /* Evita que las columnas se envuelvan */
    align-items: center; /* Alinea verticalmente al centro */
    justify-content: space-between; /* Distribuye columnas uniformemente */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover */
.tarjetas:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Logotipo */
.tarjeta-logotipo img {
    max-width: 100px;
    height: auto;
    margin-right: 20px;
}

/* Información del plan */
.tarjeta-info {
    flex: 2; /* Toma más espacio relativo */
    margin: 0px 10px 0px 10px;
}

.tarjeta-info h5 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #6063e7;
    margin-bottom: 5px;
}

.tarjeta-info p {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
}

/* Coberturas */
.tarjeta-coberturas {
    flex: 3; /* Toma más espacio relativo */
}

.tarjeta-coberturas ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tarjeta-coberturas li {
    font-size: 0.9rem;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tarjeta-coberturas li i {
    color: #6063e7;
}

/* Lista de coberturas básicas */
.list-unstyled li {
    display: flex; /* Alineación horizontal de ícono y texto */
    align-items: center; /* Centrar verticalmente ícono y texto */
    gap: 10px; /* Espaciado entre ícono y texto */
    font-size: 11px; /* Tamaño de fuente */
    color: #333333; /* Color del texto */
    margin-bottom: 8px; /* Espaciado entre elementos de la lista */
}

/* Estilo para los íconos */
.list-unstyled li i {
    color: #6063e7; /* Color azul para íconos */
    font-size: 1.2rem; /* Tamaño del ícono */
}

/* Botón "Ver más" */
.tarjeta-boton-vermas {
    flex: 1;
    margin: 12px 0px 0px 0px;
}

.tarjeta-boton-vermas .btn-ver-mas {
    background-color: transparent;
    color: #6063e7;
    border: 2px solid #6063e7;
    border-radius: 25px;
    padding: 5px 15px;
    font-size: 11px;
    transition: all 0.3s ease;
}

/* Precio */
.tarjeta-precio {
    flex: 1;
    text-align: center;
}

.tarjeta-precio h4 {
    color: #ba2649;
    font-size: 18px;
    font-weight: bold;
}

.tarjeta-precio p {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Botón "Lo quiero" */
.tarjeta-boton-loquiero {
    flex: 1;
    text-align: center;
}

.tarjeta-boton-loquiero .btn-lo-quiero {
    background-color: #f39c12;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    padding: 5px 15px;
    font-size: 15px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.tarjeta-boton-loquiero .btn-lo-quiero:hover {
    background-color: #e67e22;
}

/* Responsividad */
@media (max-width: 768px) {
    .tarjetas {
        flex-direction: column; /* Apila los elementos verticalmente */
        text-align: center;
        gap: 15px;
    }

    .tarjeta-logotipo img {
        margin-bottom: 10px;
    }
}


/* Formulario de recalcular cotización */
.bg-light.p-4 {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #e0e0e0; /* Borde gris claro */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    padding: 20px;
    margin-bottom: 20px;
}

.bg-light.p-4 h5 {
    color: #333333; /* Tono oscuro */
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid #6063e7; /* Línea decorativa azul */
    padding-bottom: 10px;
}

/* Estilo de los inputs en el formulario */
.form-control {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #6063e7; /* Azul principal */
    box-shadow: 0 0 5px rgba(96, 99, 231, 0.5); /* Sombra azul */
}

/* Botón del formulario */
.btn-secondary {
    background-color: #6063e7; /* Azul principal */
    border: none;
    border-radius: 20px;
    font-weight: bold;
    padding: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #5054d8; /* Azul más oscuro */
    transform: scale(1.02);
}

/* Botón de actualizar cotización */
.btn-secondary {
    background-color: #6063e7; /* Azul principal */
    border: none;
    border-radius: 20px;
    font-weight: bold;
    padding: 10px 20px; /* Reduce el ancho */
    font-size: 1rem;
    transition: all 0.3s ease;
    width: auto; /* Botón no ocupará todo el ancho */
    display: inline-block; /* Alinear como elemento inline */
}

.btn-secondary:hover {
    background-color: #5054d8; /* Azul más oscuro */
    transform: scale(1.02);
}

/* Alinear el botón a la izquierda */
.form-row {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinear contenido al inicio */
    gap: 30px; /* Espaciado entre los elementos */
}

/* stilos home.blade */
/* ================================================================== */
/* === ESTILOS FINALES Y CORREGIDOS PARA HOME - JULIO 2025 === */
/* ================================================================== */

/* 1. Contenedor principal (Slider) */
.slider-principal {
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    width: 100%;
    display: flex; /* Usamos Flexbox para alinear las dos columnas principales */
    padding: 0;
    margin: 0;
    background-color: #f8f9fa; /* Un color de fondo base por si acaso */
}

/* 2. Columna del formulario */
.texto-principal {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color: #787aeb; /* Fondo blanco para la columna del formulario */
}

/* 3. Contenedor del formulario con el color de marca */
.formulario-cotizacion {
    background-color: #ffffff   ;
    color: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 100%;
    max-width: 550px;
}

/* 4. Título dentro del formulario */
.formulario-cotizacion h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: #7779ea;
}

/* 5. Estilos para etiquetas y campos */
.formulario-cotizacion .form-group {
    margin-bottom: 0rem;
    text-align: left;
}

.formulario-cotizacion label {
    margin-bottom: 8px;
    color: #323232;
    font-weight: 500;
    font-size: 0.9rem;
}

.formulario-cotizacion input.form-control,
.formulario-cotizacion select.form-control {
    background-color: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.30);
    color: #b9b9b9;
    border-radius: 8px;
    padding: 10px;
}

.formulario-cotizacion select.form-control option {
    color: #333;
}

.formulario-cotizacion input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* 6. Botón de Cotizar */
.formulario-cotizacion button.btn-primary {
    background-color: #f39c12;
    border: none;
    border-radius: 10px;
    padding: 12px 25px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.formulario-cotizacion button.btn-primary:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
}

/* 7. Contenedor y estilos de la imagen para que ocupe el 100% de la altura */
.hero-image-container {
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    width: 100%;
    overflow: hidden; /* Oculta cualquier desbordamiento de la imagen */
}

.hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen se recorta para llenar el espacio sin deformarse */
}

/* Contenedor principal */
.custom-paso-a-paso {
    background-color: #ffffff;
    color: #333;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor personalizado */
.custom-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Fila personalizada */
.custom-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

/* Columna personalizada */
.custom-col {
    flex: 1;
    padding: 20px;
}

/* Título */
.custom-titulo {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.custom-texto-segury {
    color: #f39c12;
}

/* Botón de scroll */
.custom-scroll-left {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-scroll-button {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border: 2px solid #6063e7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Lista de pasos */
.custom-lista-pasos {
    background-color: #f8f8f8;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 10px 8px 15px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    margin: auto;
}

.custom-ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.custom-paso-item {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.custom-icono {
    font-size: 2rem;
    color: #6063e7;
}

/* Responsividad */
@media (max-width: 768px) {
    .custom-container {
        flex-direction: unset; /* Apila las columnas */
        align-items: center;
    }

    .custom-row {
        flex-direction: column; /* Apila la fila */
        align-items: center;
    }

    .custom-col {
        width: 100%; /* Ocupa todo el ancho */
        text-align: center; /* Centra el contenido */
        margin-bottom: 20px; /* Espaciado entre columnas */
    }

    .custom-titulo {
        font-size: 2.5rem; /* Tamaño del texto más pequeño */
    }

    .custom-lista-pasos {
        width: 100%; /* La lista ocupa todo el ancho */
    }
}


/* Contenedor principal del bloque 3*/
.planes-salud-container {
    display: flex;
    flex-direction: column; /* Apilar columnas inicialmente */
    background-color: #f39c12; /* Fondo blanco */
    padding: 90px 20px 90px; /* Espaciado interno */
    box-sizing: border-box; /* Incluir padding en el tamaño */
    text-align: center; /* Centrar texto */
}

/* Columna 1: Título y subtítulo */
.planes-salud-texto {
    margin-bottom: 20px; /* Espaciado inferior */
}

.planes-salud-titulo {
    font-size: 2.5rem; /* Tamaño del título */
    font-weight: bold; /* Negrita */
    color: #ffffff; /* Gris oscuro */
    margin-bottom: 10px; /* Espaciado inferior */
}

.planes-salud-subtitulo {
    font-size: 1.5rem; /* Tamaño del subtítulo */
    font-weight: 500; /* Peso medio */
    color: #ffffff; /* Azul principal */
    margin-bottom: 20px; /* Espaciado inferior */
}

/* Contenedor de tarjetas */
.planes-salud-tarjetas {
    display: flex; /* Usar Flexbox */
    justify-content: center; /* Espaciado uniforme */
    gap: 50px; /* Espaciado entre tarjetas */
    flex-wrap: wrap; /* Permitir que las tarjetas se apilen en pantallas pequeñas */
}

/* Tarjetas */
.tarjeta {
    background-color: #f8f8f8; /* Fondo gris claro */
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra */
    padding: 20px; /* Espaciado interno */
    flex: 1; /* Ajuste flexible */
    max-width: 300px; /* Ancho máximo */
    text-align: left; /* Centrar texto */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animaciones suaves */
}

.tarjeta:hover {
    transform: scale(1.05); /* Aumentar tamaño ligeramente */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Encabezado de la tarjeta */
.tarjeta-header {
    font-size: 1.5rem; /* Tamaño del texto */
    font-weight: bold; /* Negrita */
    color: #da2323; /* Naranja */
    margin-bottom: 10px; /* Espaciado inferior */
}

/* Contenido de la tarjeta */
.tarjeta-body p {
    font-size: 1.2rem; /* Tamaño de fuente */
    font-weight: bold; /* Negrita */
    margin-bottom: 10px; /* Espaciado inferior */
    color: #333333; /* Gris oscuro */
}

/* Lista de beneficios */
.tarjeta-body ul {
    list-style: none; /* Eliminar puntos */
    padding: 0; /* Sin padding */
    margin: 0; /* Sin márgenes */
    color: #6063e7; /* Azul principal */
    font-size: 1rem; /* Tamaño de fuente */
}

.tarjeta-body ul li {
    margin-bottom: 10px; /* Espaciado entre elementos */
    display: flex; /* Usar Flexbox */
    align-items: center; /* Centrar verticalmente */
    gap: 10px; /* Espaciado entre ícono y texto */
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .planes-salud-container {
        padding: 50px 60px; /* Reducir espaciado */
        margin: 10px -12px 0px 0px;
        align-items: center;
    }

    .planes-salud-tarjetas {
        flex-direction: column; /* Apilar tarjetas verticalmente */
        align-items: center; /* Centrar tarjetas */
    }

    .tarjeta {
        max-width: 100%; /* Usar todo el ancho disponible */
    }
}


/* ===== Contenedor del Bloque 4 ===== */
/* Contenedor principal del bloque */
.porque-nos-eligen-container {
    display: flex; /* Establece diseño en fila */
    flex-direction: row; /* Coloca las columnas lado a lado */
    align-items: stretch; /* Asegura que ambas columnas tengan la misma altura */
    width: 100%; /* Ocupa todo el ancho */
    height: 100vh; /* Ocupa toda la altura de la ventana */
    box-sizing: border-box; /* Incluye padding y bordes en el tamaño */
}

/* Columna 1: Imagen con fondo */
.porque-nos-eligen-imagen {
    flex: 1; /* Ocupa la mitad del espacio disponible */
    background-image: url('/images/ejecutivos-calidad.jpg'); /* Imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra toda el área */
    background-position: center; /* Centra la imagen */
    display: flex; /* Utiliza Flexbox para centrar contenido */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    position: relative; /* Permite capas superpuestas */
}

/* Capa oscura sobre la imagen */
.porque-nos-eligen-imagen .overlay {
    position: absolute; /* Cubre toda la columna */
    top: 0;
    left: 0;
    width: 100%; /* Ocupa todo el ancho */
    height: 100%; /* Ocupa toda la altura */
    background-color: rgba(0, 0, 0, 0.5); /* Transparencia oscura */
    display: flex; /* Flexbox para centrar contenido */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
}

/* Título dentro de la imagen */
.porque-nos-eligen-imagen h2 {
    font-size: 3rem; /* Tamaño del texto */
    font-weight: bold; /* Negrita */
    color: #ffffff; /* Texto blanco */
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9); /* Sombra */
}

/* Columna 2: Lista de ventajas */
.porque-nos-eligen-ventajas {
    flex: 1; /* Ocupa el resto del espacio disponible */
    background-color: #6063e7; /* Fondo azul */
    color: #ffffff; /* Texto blanco */
    padding: 50px; /* Espaciado interno */
    box-sizing: border-box; /* Ajusta el tamaño para incluir padding */
    overflow-y: auto; /* Permite scroll si el contenido es muy grande */
}

/* Lista de ventajas */
.porque-nos-eligen-ventajas ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 50px; /* Sin padding */
    margin: 0; /* Sin margen */
}

/* Elementos de la lista */
.porque-nos-eligen-ventajas ul li {
    font-size: 1.2rem; /* Tamaño cómodo para el texto */
    margin-bottom: 20px; /* Espaciado entre elementos */
    display: flex; /* Alinea el texto con el icono */
    align-items: center; /* Centrado vertical */
    gap: 10px; /* Espaciado entre icono y texto */
}

/* Iconos de ventajas */
.porque-nos-eligen-ventajas ul li::before {
    content: '\f058'; /* Código del icono (check) de Font Awesome */
    font-family: "Font Awesome 5 Free"; /* Fuente para iconos */
    font-weight: 900; /* Grosor del icono */
    color: #ffffff; /* Icono blanco */
}

/* Responsividad */
@media (max-width: 768px) {
    .porque-nos-eligen-container {
        flex-direction: column; /* Cambia la dirección a columnas */
        width: 100%;
    }

    .porque-nos-eligen-imagen {
        height: 50vh; /* Reduce la altura para pantallas pequeñas */
    }

    .porque-nos-eligen-ventajas {
        padding: 20px; /* Reduce el espacio interno */
    }
}


/* Bloque Carrusel de Logos */
.bloque-carrusel-logos {
    background-color: #ffffff; /* Fondo blanco */
    padding: 40px 20px; /* Espaciado interno */
    margin-top: 20px; /* Separación con el bloque anterior */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

.carrusel-titulo {
    font-size: 1.8rem;
    color: #6063e7; /* Azul de marca */
    margin-bottom: 20px;
}

.carrusel {
    display: flex;
    justify-content: center; /* Centrar elementos */
    align-items: center;
    gap: 20px; /* Espaciado entre logos */
    overflow-x: auto; /* Hacer carrusel deslizable horizontalmente */
    padding: 10px 0;
    scroll-behavior: smooth; /* Movimiento suave */
}

.carrusel-item {
    flex: 0 0 auto; /* Evitar que se estire más allá de su contenido */
    width: 100px; /* Tamaño fijo de cada logo */
    height: auto;
    text-align: center;
}

.carrusel-item img {
    max-width: 100%; /* Ajustar el tamaño de la imagen */
    height: auto; /* Mantener proporciones */
    filter: grayscale(100%); /* Blanco y negro */
    transition: filter 0.3s ease;
}

.carrusel-item img:hover {
    filter: none; /* Quitar filtro en hover */
}

/* Responsividad para dispositivos móviles */
@media (max-width: 768px) {
    .bloque-carrusel-logos {
        padding: 20px 10px;
        margin-top: 20px;
    }

    .carrusel-item {
        width: 60px; /* Reducir tamaño en pantallas pequeñas */
    }
}

/* Contenedor general de preguntas frecuentes */
.preguntas-frecuentes-container {
    background-color: #f8f8f8;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Título de la sección */
.preguntas-frecuentes-titulo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #6063e7;
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo general de las preguntas */
.preguntas-frecuentes .pregunta {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

/* Botón de la pregunta (encabezado) */
.pregunta-header {
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 10px;
    transition: background-color 0.3s ease;
}

/* Icono "+" */
.pregunta-header .icono-mas {
    font-size: 1.5rem;
    color: #6063e7;
    transition: transform 0.3s ease;
}

/* Cambiar color al hover */
.pregunta-header:hover {
    background-color: #e6e6ff;
    border-radius: 8px;
}

/* Estilo de la respuesta */
.pregunta-respuesta {
    font-size: 1rem;
    color: #555;
    margin-top: 10px;
    display: none;
    padding-left: 20px;
    line-height: 1.5;
}

/* Mostrar respuesta cuando esté activa */
.pregunta.activa .pregunta-respuesta {
    display: block;
}

/* Rotar el icono al expandir */
.pregunta.activa .icono-mas {
    transform: rotate(45deg);
    color: #da2323;
}


/* ====== Estilos personalizados para la página Nosotros ====== */

.nosotros-container {
    max-width: 1200px;
    margin: auto;
    padding: 50px 15px;
}

.nosotros-logo {
    width: 250px; /* Ajustar tamaño del logo */
    display: block;
    margin: auto;
    box-shadow: none; /* Eliminar sombra */
}

.nosotros-titulo {
    color: #5A33A2; /* Azul-morado de la marca */
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.nosotros-texto {
    font-size: 18px;
    line-height: 1.6;
    text-align: justify;
}

.nosotros-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.nosotros-info img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.nosotros-columna {
    flex: 1;
    min-width: 300px;
}

@media (max-width: 768px) {
    .nosotros-info {
        flex-direction: column;
    }
}

/* Paginación personalizada */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 1rem 0;
    gap: 4px;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.pagination .page-link:hover {
    background-color: #f0f0f0;
    color: #0056b3;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #f8f9fa;
}

/* === Estilos para Gestión de Usuarios === */

/* Encabezado */
.container h3 {
    font-weight: 600;
    color: #333;
}

/* Tarjetas */
.card {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

/* Botón de acción */
.btn-primary {
    background-color: #ff5722;
    border-color: #ff5722;
}
.btn-primary:hover {
    background-color: #e64a19;
    border-color: #e64a19;
}

/* Tabla */
.table thead th {
    background-color: #f8f9fa;
    font-weight: 500;
}
.table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Formularios */
.form-label {
    font-weight: 500;
}
.alert-success {
    background-color: #dff0d8;
    color: #3c763d;
}

.table-dark.text-dark-override th {
    color: #000000 !important; /* Negro puro */
}


/* =========================================================
   === NUEVOHOME (prioridad sobre Bootstrap) ===
   ========================================================= */

/* Hero */
section.hero-section {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%) !important;
    color: #fff !important;
    padding: 0px !important;
}

section.hero-section .hero-text h1 {
    font-weight: 700 !important;
    font-size: 2.3rem !important;
    line-height: 1.3 !important;
}

section.hero-section .hero-text p {
    font-size: 1.15rem !important;
    color: #f2f2f2 !important;
}

/* Card del formulario */
section.hero-section .card {
    border-radius: 16px !important;
    background-color: #fff !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

/* Inputs */
section.hero-section .form-control,
section.hero-section .form-select {
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 0.95rem !important;
}

/* Botón */
section.hero-section button.btn-primary {
    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%) !important;
    border: none !important;
    font-weight: 600 !important;
}
section.hero-section button.btn-primary:hover {
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%) !important;
}

/* Imagen hero */
section.hero-section .hero-illustration {
    border-radius: 0px !important;
    margin-right: -30px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}
/* ====== SECCIÓN CÓMO FUNCIONA SEGURY ====== */
.como-funciona-segury {
    background-color: #fff;
    overflow: hidden;
  }
  
  .timeline-segury {
    border-left: 3px solid #e0e0e0;
    padding-left: 30px;
    position: relative;
  }
  
  .timeline-segury .paso-item {
    position: relative;
    margin-bottom: 30px;
    padding-left: 10px;
  }
  
  .numero-circulo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  }
  
  .contenido-paso {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .contenido-paso:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
  
  /* Imagen decorativa */
  .imagen-funciona-wrapper {
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
  
  .pareja-segury {
    max-width: 80%;
    height: auto;
    object-fit: contain;
    opacity: 0.95;
  }
  
  /* Responsive */
  @media (max-width: 991px) {
    .timeline-segury {
      border-left: none;
      padding-left: 0;
    }
  
    .numero-circulo {
      margin-right: 10px;
    }
  
    .imagen-funciona-wrapper {
      display: none; /* Ocultar imagen en móvil */
    }
  }

  /* ==================== SECCIÓN BENEFICIOS ==================== */
.beneficios-section {
    background-color: #fff;
}

.beneficio-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.beneficio-card:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.beneficio-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.beneficio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.7), rgba(37, 117, 252, 0.7));
    z-index: 1;
}

.beneficio-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    color: #fff;
}

.beneficio-text h4 {
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.beneficio-text p {
    font-size: 0.95rem;
    margin: 0;
}

/* Responsive ajustes */
@media (max-width: 768px) {
    .beneficio-img {
        height: 200px;
    }
    .beneficio-text h4 {
        font-size: 1.1rem;
    }
}
/* ========================================= */
/* ESTILOS PARA SECCIÓN PLANES DESTACADOS    */
/* (Carrusel Swiper.js)                      */
/* ========================================= */

.planes-destacados-section .swiper {
    width: 100%;
    height: auto;
    padding-bottom: 50px; /* Espacio para la paginación */
}

/* Estilo para cada slide */
.planes-destacados-section .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Hace que las tarjetas ocupen toda la altura disponible */
    padding: 10px; /* Pequeño espacio para la sombra */
}

/* Estilo de la tarjeta del plan */
.tarjeta-plan {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%; /* Asegura que la tarjeta ocupe todo el alto del slide */
    border-radius: 0.75rem; /* Coincide con rounded-4 de Bootstrap si lo usas */
}

.tarjeta-plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important; /* Importante para sobrescribir Bootstrap */
}

.tarjeta-plan .tarjeta-logotipo {
    border-bottom: 1px solid #f0f0f0;
    min-height: 80px; /* Altura mínima para el logo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* Padding para el logo */
}

.tarjeta-plan .card-body {
    padding: 1.5rem;
    display: flex; /* Para que el botón quede abajo */
    flex-direction: column; /* Para que el botón quede abajo */
}

.tarjeta-plan .card-body ul {
    padding-left: 0;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Para que la lista crezca y el botón se mantenga abajo */
}

.tarjeta-plan .card-body li {
    margin-bottom: 8px;
    color: #555;
}

/* Estilos para las flechas y paginación de Swiper */
.planes-destacados-section .swiper-button-next,
.planes-destacados-section .swiper-button-prev {
    color: #6063e7; /* Color principal de tu marca, o el que prefieras */
}

.planes-destacados-section .swiper-pagination-bullet-active {
    background-color: #6063e7; /* Color principal de tu marca para el punto activo */
}

/* Opcional: Ajustes para el badge */
.tarjeta-plan .badge {
    font-size: 0.8em;
    padding: 0.4em 0.7em;
    border-radius: 0.3rem;
}
/* ========================================= */
/* ESTILOS PARA SECCIÓN POR QUÉ NOS ELIGEN   */
/* ========================================= */

.porque-eligen-segury {
    background-color: #f8f9fa; /* Un fondo suave para resaltar */
}

.porque-eligen-segury h2 {
    color: #343a40; /* Color oscuro para el título */
}

.porque-eligen-segury .feature-card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    display: flex; /* Para centrar contenido y asegurar altura */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.porque-eligen-segury .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border-color: #6063e7; /* Un pequeño cambio de borde al pasar el mouse */
}

.porque-eligen-segury .feature-card .icon-wrapper {
    width: 70px;
    height: 70px;
    font-size: 2rem;
    line-height: 70px; /* Centrado vertical */
    border-radius: 50%;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.porque-eligen-segury .feature-card:hover .icon-wrapper {
    transform: scale(1.1); /* Icono un poco más grande al hacer hover */
}

/* Colores de fondo de los iconos (usando opacidades de Bootstrap) */
.porque-eligen-segury .icon-wrapper.bg-primary.bg-opacity-10 { background-color: rgba(96, 99, 231, 0.1) !important; } /* Tu color primario */
.porque-eligen-segury .icon-wrapper.bg-warning.bg-opacity-10 { background-color: rgba(255, 193, 7, 0.1) !important; }
.porque-eligen-segury .icon-wrapper.bg-success.bg-opacity-10 { background-color: rgba(40, 167, 69, 0.1) !important; }
.porque-eligen-segury .icon-wrapper.bg-danger.bg-opacity-10 { background-color: rgba(220, 53, 69, 0.1) !important; }
.porque-eligen-segury .icon-wrapper.bg-info.bg-opacity-10 { background-color: rgba(23, 162, 184, 0.1) !important; }
.porque-eligen-segury .icon-wrapper.bg-secondary.bg-opacity-10 { background-color: rgba(108, 117, 125, 0.1) !important; }

.porque-eligen-segury .feature-card h5 {
    color: #343a40;
}

.porque-eligen-segury .feature-card p {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ========================================= */
/* ESTILOS PARA SECCIÓN ASEGURADORAS ALIADAS */
/* (Logos en escala de grises con hover a color) */
/* ========================================= */

.logos-aliados-container {
    padding-top: 2rem; /* Espacio superior para separar del título */
}

.logos-aliados-container .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px; /* Ancho fijo para cada contenedor de logo */
    height: 70px; /* Altura fija para cada contenedor de logo */
    transition: transform 0.3s ease; /* Transición para el zoom en hover */
}

.logos-aliados-container .logo-item img {
    max-height: 40px; /* Tamaño un poco más pequeño como solicitaste (ajusta si quieres) */
    max-width: 100%; /* Asegura que la imagen no se desborde */
    filter: grayscale(100%); /* Logos en escala de grises */
    opacity: 0.7; /* Ligeramente transparentes */
    transition: all 0.3s ease-in-out; /* Transición suave para el color y la opacidad */
}

.logos-aliados-container .logo-item img:hover {
    filter: grayscale(0%); /* Vuelve a color original */
    opacity: 1; /* Opacidad completa */
    transform: scale(1.05); /* Pequeño zoom al pasar el cursor */
}

/* Ajustes para pantallas más pequeñas si necesitas más espacio */
@media (max-width: 767.98px) {
    .logos-aliados-container .logo-item {
        width: 100px;
        height: 60px;
    }
    .logos-aliados-container .logo-item img {
        max-height: 35px;
    }
}