.mvc-home .mvc-carousel {
    position: relative;
    width: min(1320px, calc(100% - 64px));
    margin: 22px auto 0;
    overflow: hidden;
    border-radius: 18px;
    background: #092f50;
    color: #fff;
}

.mvc-home .mvc-carousel [hidden] { display: none !important; }

.mvc-home .mvc-slide {
    --slide-tone: 12 41 69;
    --slide-base: rgb(var(--slide-tone));
    --slide-accent: #bbd9f2;
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(322px, 30vw, 400px);
    padding: 34px clamp(30px, 5.3vw, 78px) 68px;
    background: var(--slide-base);
}

.mvc-home .mvc-slide-escritorio {
    --slide-tone: 54 40 50;
    --slide-accent: #f5d9be;
}

.mvc-home .mvc-slide-silla-escolar {
    --slide-tone: 16 60 80;
    --slide-accent: #b7e4ef;
}

.mvc-home .mvc-slide-visual {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mvc-home .mvc-slide-backdrop {
    position: absolute;
    inset: -25px;
    width: calc(100% + 50px);
    height: calc(100% + 50px);
    max-width: none;
    object-fit: cover;
    filter: blur(25px);
    opacity: .74;
}

.mvc-home .mvc-slide-image {
    position: absolute;
    inset: 0 0 auto auto;
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
    mask-image: linear-gradient(90deg, transparent, #000 25%);
}

.mvc-home .mvc-slide-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgb(var(--slide-tone) / .88) 0%,
        rgb(var(--slide-tone) / .81) 26%,
        rgb(var(--slide-tone) / .61) 36%,
        transparent 54%);
    content: "";
}

.mvc-home .mvc-slide:not([hidden]) .mvc-slide-image { animation: mvc-banner-appear .38s ease-out; }

@keyframes mvc-banner-appear {
    from { opacity: .45; }
    to { opacity: 1; }
}

.mvc-home .mvc-slide-copy {
    position: relative;
    width: min(50%, 510px);
    text-shadow: 0 1px 4px rgb(var(--slide-tone) / .62);
}

.mvc-home .mvc-slide-category {
    display: inline-block;
    padding-left: 12px;
    border-left: 3px solid var(--slide-accent);
    color: var(--slide-accent);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mvc-home .mvc-slide h2 {
    margin: 13px 0 10px;
    color: #fff;
    font-family: MvcBanner, Arial, Helvetica, sans-serif;
    font-size: clamp(37px, 4.4vw, 66px);
    font-weight: 900;
    line-height: .99;
    letter-spacing: -.028em;
    text-wrap: balance;
}

.mvc-home .mvc-slide p {
    max-width: 37ch;
    color: #e6edf5;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.45;
}

.mvc-home .mvc-slide-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 19px; }

.mvc-home .mvc-slide-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: 6px;
    background: #fff;
    color: #0c2945;
    font-weight: 750;
    text-shadow: none;
    transition: background-color .18s ease;
}

.mvc-home .mvc-slide-link:hover { background: var(--slide-accent); color: #0c2945; }
.mvc-home .mvc-slide-sku { color: var(--slide-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; }

.mvc-home .mvc-carousel-controls {
    position: absolute;
    bottom: 11px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0 3px;
    transform: translateX(-50%);
    border-radius: 40px;
    background: #071b2cdb;
    color: #fff;
}

.mvc-home .mvc-carousel button {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
}

.mvc-home .mvc-carousel button:hover { background: #ffffff20; }
.mvc-home .mvc-carousel button:focus-visible,
.mvc-home .mvc-carousel a:focus-visible { outline: 3px solid #b7d9f8; outline-offset: -3px; }
.mvc-home .mvc-carousel .mvc-slide-link:focus-visible { outline-color: #2f5171; }
.mvc-home .mvc-carousel-prev svg { transform: rotate(180deg); }

.mvc-home .mvc-carousel-dot::before {
    width: 9px;
    height: 9px;
    border: 1px solid #e7f1fa;
    border-radius: 50%;
    background: #ffffff55;
    content: "";
}

.mvc-home .mvc-carousel-dot[aria-current="true"]::before { border-color: #fff; background: #fff; }

.mvc-home .mvc-carousel .mvc-carousel-toggle {
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    background: #071b2cdb;
}

@media (761px <= width <= 1020px) {
    .mvc-home .mvc-slide-visual::after {
        background: linear-gradient(90deg,
            rgb(var(--slide-tone) / .89) 0%,
            rgb(var(--slide-tone) / .81) 34%,
            rgb(var(--slide-tone) / .58) 46%,
            transparent 64%);
    }
}

@media (max-width: 760px) {
    .mvc-home .mvc-carousel { width: calc(100% - 28px); margin-top: 14px; border-radius: 14px; }
    .mvc-home .mvc-slide { display: block; min-height: 0; padding: 0; }
    .mvc-home .mvc-slide-visual { position: relative; aspect-ratio: 3 / 2; }
    .mvc-home .mvc-slide-backdrop { display: none; }
    .mvc-home .mvc-slide-image { width: 100%; height: 100%; object-fit: cover; mask-image: none; }
    .mvc-home .mvc-slide-visual::after {
        background: linear-gradient(0deg, rgb(var(--slide-tone) / .65), transparent 9%);
    }
    .mvc-home .mvc-slide-copy { width: 100%; min-height: 228px; padding: 8px 22px 59px; text-shadow: none; }
    .mvc-home .mvc-slide-category { font-size: 10px; }
    .mvc-home .mvc-slide h2 { margin-top: 8px; font-size: clamp(27px, 7.7vw, 41px); }
    .mvc-home .mvc-slide p { font-size: 14px; }
    .mvc-home .mvc-slide-actions { margin-top: 13px; gap: 12px; }
    .mvc-home .mvc-slide-link { font-size: 14px; }
    .mvc-home .mvc-carousel-controls { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .mvc-home .mvc-carousel * { transition: none; animation: none !important; }
}

/* Finished panoramic artwork: no duplicate overlays or cropped products. */
.mvc-home .mvc-slide { display: block; min-height: 0; padding: 0; background: #edf5fc; }
.mvc-home .mvc-banner-art { display: block; line-height: 0; }
.mvc-home .mvc-banner-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: contain; }
.mvc-home .mvc-banner-art:hover .mvc-banner-image { filter: brightness(1.025); }
.mvc-home .mvc-banner-mobile-copy { display: none; }
.mvc-home .mvc-carousel-controls { position: relative; bottom: auto; left: auto; width: max-content; margin: 8px auto; transform: none; background: #2f5171; }
.mvc-home .mvc-carousel { background: #edf5fc; }
@media (max-width: 760px) {
    .mvc-home .mvc-banner-mobile-copy { display: block; padding: 16px 20px 12px; color: #092f50; }
    .mvc-home .mvc-banner-mobile-copy h2 { margin: 0 0 8px; color: #092f50; font-size: clamp(26px, 7vw, 34px); line-height: 1.1; }
    .mvc-home .mvc-banner-mobile-copy p { margin: 0 0 14px; color: #2f5171; font-size: 16px; }
    .mvc-home .mvc-banner-mobile-copy .mvc-slide-link { background: #2f5171; color: #fff; }
    .mvc-home .mvc-banner-mobile-copy .mvc-slide-link:hover { background: #092f50; }
    .mvc-home .mvc-carousel .mvc-carousel-toggle { top: 6px; right: 6px; width: 32px; height: 32px; }
}
