/* CONGELAR NAVBAR: Evita que el menú fijo 'tape' el inicio de tus contenidos */
body {
    padding-top: 56px; /* 56px es el alto exacto del Navbar de Bootstrap */
}

/* Colores e Identidad de CYTECE */
.bg-blue-cytece { background-color: #0d6efd; }
.text-blue-cytece { color: #0d6efd; }
.btn-red-cytece { background-color: #dc3545; border-color: #dc3545; color: white; font-weight: 600; }
.btn-red-cytece:hover { background-color: #bd2130; border-color: #b21f2d; color: white; }

/* Ajustes del Carrusel de Publicidad */
.carousel-item { 
    height: 60vh; 
    min-height: 400px; 
    background-repeat: no-repeat;
    background-position: center center; 
    background-size: cover; 
}

/* Margen de seguridad para scroll */
#paquetes, #cobertura, #contacto {
    scroll-margin-top: 75px;
}

/* ESTADO BASE SEGURO: El componente nace invisible para eliminar el 'blink' por completo */
.spa-wrapper {
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform; /* Activa la aceleración por hardware en el navegador */
}

/* DISPARADOR DE LA TRANSICIÓN PREMIUM */
.spa-wrapper.vista-suave {
    /* 'forwards' se encarga de dejar el objeto en opacity: 1 de forma permanente al terminar */
    animation: transicionCinematica 0.70s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes transicionCinematica {
    from {
        opacity: 0;
        transform: translateY(8px); 
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contenedor principal adaptable que evita estiramientos excesivos */
#carrusel-cytece, 
#carrusel-cytece .carousel-inner, 
#carrusel-cytece .carousel-item {
    background-color: #0b0f19 !important;
}

/* Cada diapositiva mantiene su proporción real sin distorsión */
#carrusel-cytece .carousel-item {
    width: 100% !important;
    height: auto !important;
    background-size: contain !important; /* CLAVE: La imagen se adapta completa sin estirarse ni recortarse */
    background-repeat: no-repeat !important;
    background-position: center center !important;
    aspect-ratio: 16 / 6.5; /* Relación de aspecto panorámica estándar para tus banners */
}

/* Ajustes responsivos por rangos de pantalla */
@media (max-width: 1200px) {
    #carrusel-cytece .carousel-item {
        aspect-ratio: 16 / 7;
    }
}

@media (max-width: 768px) {
    #carrusel-cytece .carousel-item {
        aspect-ratio: 16 / 10 !important; /* Más altura en móviles para legibilidad de textos pequeños */
    }
}