/* Altura dinámica exacta del Hero restando el Header fijo (80px) */
.hero-section {
    height: calc(100vh - 80px);
}

/* Ajuste sutil para mejorar el contraste de la imagen de fondo */
.balance-bg {
    filter: grayscale(100%) contrast(110%) brightness(35%);
}

/* Efecto hover interactivo y minimalista para los links del menú */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: #ffffff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Clases utilitarias de animación para el Menú Mobile (transición de escala vertical) */
.menu-open {
    display: block !important;
    transform: scaleY(1) !important;
    opacity: 1 !important;
}

/* Suavizar el focus nativo */
button:focus-visible {
    outline: 1px solid #ffffff;
}

/* --- CONFIGURACIÓN RESPONSIVA DEL CARROUSEL --- */
.services-carousel {
    /* Por defecto en mobile: 100vh */
    height: 100vh;
    width: 100%;
}

.services-carousel .carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mantiene la línea del diseño en escala de grises */
    filter: grayscale(100%) brightness(75%) contrast(105%);
}

/* Modificadores estéticos para las flechas de Swiper (escala de grises) */
.services-carousel .swiper-button-next::after,
.services-carousel .swiper-button-prev::after {
    font-size: 1.5rem !important;
    color: #ffffff;
}

.services-carousel .swiper-pagination-bullet-active {
    background: #ffffff !important;
}

/* En Desktop (pantallas medianas y grandes): cambia a 25vh */
@media (min-width: 768px) {
    .services-carousel {
        height: 25vh;
    }

    .shape-outside-circle {
        shape-outside: circle(50%);
    }


}