.hero-bg {
    background-color: #0d47a1;
    background-image: linear-gradient(rgba(13, 71, 161, 0.75), rgba(13, 71, 161, 0.75)), url('img/facturacion_hero.png'); /* ¡Ruta actualizada aquí! */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; /* Asegurarse de que no se repita */
}

.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* --- NUEVO: Efecto al pasar el cursor sobre las tarjetas de servicios --- */
.card:hover {
    transform: translateY(-10px); /* Levanta la tarjeta 10px */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important; /* Aumenta la sombra para dar profundidad */
}

/* --- NUEVO: Transición suave para los íconos de la sección "Por qué elegirnos" --- */
.feature-item {
    transition: transform 0.3s ease-in-out;
}

/* --- NUEVO: Efecto al pasar el cursor sobre los íconos --- */
.feature-item:hover {
    transform: scale(1.05); /* Agranda ligeramente el elemento */
}


/* --- NUEVO: Estilos para el header - logotipo --- */
.navbar-brand img {
    height: 50px; /* Ajusta la altura según sea necesario */
    width: auto; /* Mantiene la proporción del logotipo */
}

/* Estilos para el split-dropdown 'Nosotros' */
.nav-item.dropdown.d-flex {
    gap: 0.25rem; /* separacion pequeña entre link y toggle */
}
.nav-item.dropdown.d-flex .dropdown-toggle {
    padding: 0.18rem 0.35rem; /* menos padding para una flecha más compacta */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-item.dropdown.d-flex .dropdown-toggle {
    /* Por defecto (escritorio) ocultamos el toggle; el dropdown se muestra con hover */
    display: none;
}
.nav-item.dropdown.d-flex .dropdown-toggle .bi-caret-down-fill {
    font-size: 0.7rem; /* caret más pequeño */
}

/* Ajuste para el botón split dentro del nav: parecer enlace */
.nav-item.dropdown .btn.p-0 {
    background: transparent;
    border: none;
    color: inherit;
}

/* En móviles, mantener un touch target razonable */
@media (max-width: 767.98px) {
    .nav-item.dropdown.d-flex {
        gap: 0.5rem;
    }
    /* En móviles mostramos el toggle como botón táctil */
    .nav-item.dropdown.d-flex .dropdown-toggle {
        display: inline-flex;
        padding: 0.28rem 0.5rem;
    }
}

/* Forzar que el dropdown se muestre por encima */
.dropdown-menu {
    z-index: 1050; /* por encima de otros elementos */
}

/* Ocultar caret por defecto de Bootstrap en el toggle específico para evitar doble flecha */
#navbarDropdownNosotros::after {
    display: none !important;
}

/* --- NUEVO: Transiciones suaves para dropdowns --- */
.dropdown-menu {
    display: block; /* mantener en flujo visual; la visibilidad se controla con visibility */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.995);
    transition: opacity 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
    pointer-events: none; /* evitar interacción cuando está oculto */
}

.dropdown.show > .dropdown-menu,
.dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Pequeño ajuste para reducir flicker en dispositivos táctiles al abrir */
@media (hover: none) {
    .dropdown-menu {
        transition-duration: 120ms; /* más rápido en touch */
    }
}

/* Si algún dropdown usa popper absolute positioning, nos aseguramos que las
   transformaciones no crean problemas visuales: mantenemos backface-visibility */
.dropdown-menu {
    backface-visibility: hidden;
}