/* Explain: Layout structure, section padding, and hero section styling. */
.container-site {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.section-pad {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.hero-shade {
    background: linear-gradient(100deg, rgba(11,28,42,.60) 0%, rgba(11,28,42,.30) 46%, rgba(11,28,42,.04) 100%);
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-slide.is-active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.18) saturate(1.06);
}

.hero-slide-poster {
    background: linear-gradient(120deg, #0b1c2a, var(--primary-color));
}

.hero-slide-poster img {
    object-fit: contain;
}

.cta-band {
    background: linear-gradient(125deg, var(--primary-color), #0b1c2a);
    border-radius: 1.5rem;
    padding: clamp(2rem, 5vw, 3.5rem);
}