/* 
    CSS Estrictamente Necesario para la Sección Hero de la Landing Page
    Basado en Bootstrap 5.3
*/

/* --- Navbar Superpuesta --- */
/* Enlaces de navegación: separadores verticales sutiles */
.custom-nav-links .nav-item {
    position: relative;
    padding: 0 1rem; /* Espaciado horizontal de los enlaces */
}

.custom-nav-links .nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 70%;
    background-color: rgba(0, 0, 0, 0.15); /* Cambiado de blanco a gris oscuro para verse en fondo blanco */
}



/* --- Carrusel Hero (Slider) --- */
.custom-img-cover {
    width: 100%;
    height: auto;
    display: block;
}


/* Color corporativo Azul Saval (#0077c8) para Bootstrap 5.3 */
:root {
  --bs-primary: #0077c8;
  --bs-primary-rgb: 0, 119, 200;
}

/* Ajuste de estados interactivos para los botones (Normal, Hover y Clic) */
.btn-primary {
  --bs-btn-bg: #0077c8;
  --bs-btn-border-color: #0077c8;
  --bs-btn-hover-bg: #0062a5;
  --bs-btn-hover-border-color: #0062a5;
  --bs-btn-focus-shadow-rgb: 0, 119, 200;
  --bs-btn-active-bg: #004f85;
  --bs-btn-active-border-color: #004f85;
}
/* --- Custom Shadow on Hover for Category Cards --- */
/* Agrega esta regla al final de tu archivo style.css, o en una sección de utilidades personalizadas */
.shadow-hover-md {
    transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-in-out; /* Transición suave para la sombra y la elevación */
}

.shadow-hover-md:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; /* Sombra más pronunciada al pasar el ratón (similar a .shadow de Bootstrap) */
    transform: translateY(-3px); /* Efecto de elevación sutil */
}

/* Estilos para los botones de control de navegación (flechas) del carrusel del modal */
#modalSolucionesMagicas .carousel-control-prev,
#modalSolucionesMagicas .carousel-control-next {
    /* Se eliminan las propiedades de tamaño fijo para que Bootstrap gestione el ancho y alto (15% y 100% altura) */
    /* width: 3.5rem; */
    /* height: 3.5rem; */
    opacity: 0.8; /* Opacidad por defecto del control completo */
    transition: opacity 0.3s ease; /* Transición suave para la opacidad */
}

/* Efecto hover para los botones de control del carrusel (solo opacidad) */
#modalSolucionesMagicas .carousel-control-prev:hover,
#modalSolucionesMagicas .carousel-control-next:hover {
    opacity: 1; /* Opacidad completa al pasar el ratón */
}

/* Estilos para las flechas (iconos SVG) dentro de los controles */
/* MODIFICACIÓN CLAVE: Se cambia el 'fill' en el SVG directamente en la etiqueta <svg> */
#modalSolucionesMagicas .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230077c8'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); /* Flecha Prev azul */
}
#modalSolucionesMagicas .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230077c8'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Flecha Next azul */
}

/* Estilos para los indicadores del carrusel del modal (las barritas inferiores) */
#modalSolucionesMagicas .carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.5); /* Indicadores inactivos: blanco semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.8); /* Borde sutil */
    width: 30px; /* Ancho de la barra */
    height: 4px; /* Altura de la barra */
    margin: 0 4px; /* Espaciado entre barras */
    border-radius: 0; /* Sin bordes redondeados (estilo barra) */
    opacity: 0.7; /* Opacidad por defecto */
    transition: all 0.3s ease; /* Transición suave */
}

/* Estilos para el indicador activo del carrusel del modal */
#modalSolucionesMagicas .carousel-indicators button.active {
    background-color: #0077c8; /* Indicador activo: nuestro azul primario */
    border-color: #0077c8; /* Borde del indicador activo */
    opacity: 1; /* Opacidad completa */
    width: 40px; /* Ligeramente más ancho cuando está activo */
}
#heroCarousel .carousel-item:nth-child(3) img {
    object-position: top; /* Muestra siempre el inicio superior de la imagen */
}
#heroCarousel .carousel-item:nth-child(2) .custom-legal-text-position {
    /* bottom: 2.5rem !important; Despega el texto legal del fondo para escritorio (sobrescribe bottom-0) */
    z-index: 5; /* Z-index inferior a los indicadores para que estos sean clicables */
}
#link1,
#link2,
#link3 {
    scroll-margin-top: 110px; /* Ajusta este valor a la altura real de tu Navbar (incluyendo padding vertical) */
}
/* Ajustes responsivos para el menú colapsado y el contenido del carrusel */
@media (max-width: 991.98px) {
    .custom-navbar .navbar-collapse {
       /* background-color: rgba(0, 0, 0, 0.8);  Fondo oscuro para el menú colapsado */
        border-radius: 0.5rem;
        padding: 1rem;
        margin-top: 0.5rem;
    }

   

   
    #beneficios .card p.fs-5 {
        font-size: 1rem !important; /* Equivalente a fs-6 en Bootstrap */
    }
    #beneficios .card h3.fs-5 {
        font-size: 1rem !important; /* Equivalente a fs-5 en Bootstrap */
    }
        #categorias-salud .card span.fs-6 {
        font-size: 0.875rem !important; /* Aproximadamente 14px, más pequeño que 1rem (fs-6) */
    }
      #heroCarousel .carousel-item:nth-child(2) .carousel-caption {
        padding-bottom: 6rem !important; /* Valor menor que el global de 10rem para bajarlo */
    }
      #heroCarousel .carousel-item:nth-child(3) .carousel-caption {
        padding-bottom: 2rem !important; /* Un valor muy pequeño para que quede cerca del borde inferior */
    }
     @media (min-width: 768px) { /* A partir del breakpoint 'md' (tablet) */
        #heroCarousel .carousel-item:nth-child(3) .carousel-caption {
            padding-bottom: 8rem !important; /* Padding intermedio para tablets */
        }
    }
        #heroCarousel .carousel-item:nth-child(2) .custom-legal-text-position {
        bottom: 1rem !important; /* Margen inferior adecuado para móviles, sobre los indicadores */
    }
}


/*
    Color específico para el título de la sección de Beneficios.
    Creado para diferenciarlo sutilmente del color primary global.
*/
.text-saval-blue {
    color: #0075cf !important; /* Nuevo color azul para este título */
}