/**
 * Home hero — full-width responsivo, temas claro/escuro via CSS vars
 */

.fw-hero {
    width: 100%;
    max-width: var(--fw-largura-max, 960px);
    margin: 8px auto 32px;
    padding: 0 8px;
    box-sizing: border-box;
}

/* Tela cheia — ocupa largura total e altura restante da viewport */
.fw-hero--tela-cheia {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --fw-hero-h: max(320px, calc(100svh - var(--fw-chrome-h, 220px)));
}

.fw-hero-main {
    height: auto;
    background: var(--fw-surface, #14141c);
}

.fw-hero-main .swiper-wrapper {
    align-items: stretch;
}

.fw-hero-main .swiper-slide {
    height: auto;
}

.fw-hero--tela-cheia .fw-hero-main,
.fw-hero--tela-cheia .fw-hero-main .swiper-slide,
.fw-hero--tela-cheia .fw-hero-card {
    min-height: var(--fw-hero-h);
}

.fw-hero-main:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}

.fw-hero-stage {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    width: 100%;
}

.fw-hero--tela-cheia .fw-hero-stage {
    border-radius: 0;
    box-shadow: none;
}

/* Swiper — forçar largura total (evita faixa estreita à direita) */
.fw-hero-main.swiper,
.fw-hero-main .swiper-wrapper,
.fw-hero-main .swiper-slide,
.fw-hero-gallery.swiper,
.fw-hero-gallery .swiper-wrapper,
.fw-hero-gallery .swiper-slide {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fw-hero-main.swiper {
    overflow: hidden;
}

.fw-hero-gallery.swiper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fw-hero-gallery .swiper-slide {
    overflow: hidden;
}

.fw-hero-card {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

/* Área da imagem */
.fw-hero-visual {
    position: relative;
    height: 360px;
    background: #000;
    overflow: hidden;
}

.fw-hero-gallery,
.fw-hero-gallery .swiper-wrapper,
.fw-hero-gallery .swiper-slide {
    height: 100%;
}

.fw-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 8s ease-out;
}

.fw-hero-gallery .swiper-slide-active .fw-hero-img {
    transform: scale(1.04);
}

.fw-hero-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 35%,
        var(--fw-overlay, rgba(0, 0, 0, 0.55)) 70%,
        var(--fw-overlay-forte, rgba(0, 0, 0, 0.85)) 100%
    );
    pointer-events: none;
}

.fw-hero-img-label {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 3;
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    pointer-events: none;
}

.fw-hero-counter {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fw-contador-texto, var(--fw-texto, #fff));
    background: var(--fw-contador-bg, rgba(0, 0, 0, 0.55));
    backdrop-filter: blur(8px);
    border-radius: 20px;
    letter-spacing: 0.06em;
}

/* Galerias desktop/mobile — exibe conforme breakpoint */
.fw-hero-gallery--desktop,
.fw-hero-gallery--mobile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 992px) {
    .fw-hero-gallery--mobile,
    .fw-hero-tags--mobile {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .fw-hero-gallery--desktop,
    .fw-hero-tags--desktop {
        display: none !important;
    }
}

.fw-hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 5;
}

.fw-hero-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--fw-cor-primaria, #EB5100);
    transition: width 0.1s linear;
}

.fw-hero-visual.is-playing .fw-hero-progress span {
    animation: fw-progress var(--fw-autoplay, 4s) linear forwards;
}

@keyframes fw-progress {
    from { width: 0; }
    to { width: 100%; }
}

.fw-hero-nav {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--fw-nav-bg, rgba(255, 255, 255, 0.15));
    backdrop-filter: blur(8px);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s, transform 0.2s;
    color: #fff;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
}

.fw-hero--claro .fw-hero-nav {
    color: #1a1a2e;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.fw-hero-nav:hover {
    background: var(--fw-cor-primaria, #EB5100);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

.fw-hero-nav--prev { left: 18px; }
.fw-hero-nav--next { right: 18px; }

.fw-hero-nav--prev::after { content: "\2039"; }
.fw-hero-nav--next::after { content: "\203A"; }

/* Corpo de texto */
.fw-hero-body {
    padding: 24px 28px 28px;
    background: var(--fw-surface, #14141c);
    color: var(--fw-texto, #fff);
}

.fw-hero-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fw-cor-primaria, #EB5100);
}

.fw-hero-title {
    margin: 0 0 18px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--fw-texto-forte, var(--fw-texto-suave, rgba(255, 255, 255, 0.85)));
}

.fw-hero--claro .fw-hero-title {
    color: var(--fw-texto-forte, #0a0a12);
}

.fw-hero--claro .fw-hero-kicker {
    color: var(--fw-cor-primaria, #EB5100);
}

.fw-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fw-hero-tag {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fw-tag-texto, var(--fw-texto, rgba(255, 255, 255, 0.9)));
    background: var(--fw-tag-bg, rgba(255, 255, 255, 0.08));
    border: 1px solid var(--fw-tag-borda, rgba(255, 255, 255, 0.12));
    border-radius: 6px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.fw-hero--claro .fw-hero-tag {
    color: var(--fw-tag-texto, #1a1a2e);
    background: var(--fw-tag-bg, rgba(26, 26, 46, 0.09));
    border-color: var(--fw-tag-borda, rgba(26, 26, 46, 0.2));
}

.fw-hero-tag:hover {
    background: rgba(235, 81, 0, 0.2);
    border-color: var(--fw-cor-primaria, #EB5100);
    color: var(--fw-texto, #fff);
}

.fw-hero-dots {
    position: relative !important;
    bottom: auto !important;
    padding: 16px 0 20px;
    background: var(--fw-surface, #14141c);
}

.fw-hero-dots .swiper-pagination-bullet {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--fw-bullets, rgba(255, 255, 255, 0.2));
    opacity: 1;
    transition: background 0.3s, width 0.3s;
}

.fw-hero-dots .swiper-pagination-bullet-active {
    width: 48px;
    background: var(--fw-cor-primaria, #EB5100);
}

/* Desktop grande — slider imersivo */
@media (min-width: 992px) {
    .fw-hero--tela-cheia {
        margin-bottom: 0;
        display: block;
        clear: both;
    }

    .fw-hero--tela-cheia .fw-hero-main,
    .fw-hero--tela-cheia .fw-hero-main .swiper-wrapper,
    .fw-hero--tela-cheia .fw-hero-main .swiper-slide,
    .fw-hero--tela-cheia .fw-hero-card {
        width: 100%;
        height: var(--fw-hero-h);
        min-height: var(--fw-hero-h);
    }

    .fw-hero--tela-cheia .fw-hero-card {
        display: block;
        position: relative;
        overflow: hidden;
    }

    /* Visual no fluxo (relative) — mantém largura 100%; body sobrepõe embaixo */
    .fw-hero--tela-cheia .fw-hero-visual {
        position: relative;
        width: 100%;
        height: var(--fw-hero-h);
    }

    .fw-hero--tela-cheia .fw-hero-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 4;
        width: 100%;
        padding: 48px clamp(24px, 5vw, 80px) 56px;
        box-sizing: border-box;
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.35) 30%,
            var(--fw-surface, #14141c) 100%
        );
    }

    .fw-hero--tela-cheia.fw-hero--claro .fw-hero-body {
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 25%,
            var(--fw-surface, #f4f5f8) 100%
        );
    }

    .fw-hero--tela-cheia .fw-hero-title {
        font-size: clamp(1.25rem, 2.2vw, 1.75rem);
        max-width: 900px;
    }

    .fw-hero--tela-cheia .fw-hero-img-label {
        bottom: auto;
        top: clamp(24px, 4vh, 48px);
        left: clamp(24px, 5vw, 80px);
        right: clamp(24px, 5vw, 80px);
        max-width: none;
        font-size: clamp(1.4rem, 3vw, 2.4rem);
    }

    .fw-hero--tela-cheia .fw-hero-nav {
        width: 52px;
        height: 52px;
        line-height: 52px;
        font-size: 28px;
    }

    .fw-hero--tela-cheia .fw-hero-nav--prev { left: clamp(16px, 3vw, 48px); }
    .fw-hero--tela-cheia .fw-hero-nav--next { right: clamp(16px, 3vw, 48px); }

    .fw-hero--tela-cheia .fw-hero-dots {
        position: absolute !important;
        bottom: 12px !important;
        left: 0;
        right: 0;
        z-index: 6;
        padding: 0 clamp(24px, 5vw, 80px);
        background: transparent;
    }

    .fw-hero:not(.fw-hero--tela-cheia) .fw-hero-visual {
        height: clamp(420px, 58vh, 680px);
    }
}

/* Tablet / mobile — slider */
@media (max-width: 991px) {
    .fw-hero--tela-cheia {
        --fw-hero-h: auto;
    }

    .fw-hero--tela-cheia .fw-hero-main,
    .fw-hero--tela-cheia .fw-hero-main .swiper-slide,
    .fw-hero--tela-cheia .fw-hero-card {
        min-height: 0;
        height: auto;
    }

    .fw-hero--tela-cheia .fw-hero-stage {
        border-radius: 0;
    }

    .fw-hero--tela-cheia .fw-hero-visual,
    .fw-hero-visual {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        min-height: 220px;
        max-height: min(72vw, 420px);
    }

    .fw-hero-gallery,
    .fw-hero-gallery .swiper-wrapper,
    .fw-hero-gallery .swiper-slide {
        height: 100%;
        min-height: 100%;
    }

    .fw-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .fw-hero-gallery .swiper-slide-active .fw-hero-img {
        transform: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .fw-hero {
        padding: 0;
        margin-bottom: 20px;
    }

    .fw-hero--tela-cheia .fw-hero-visual,
    .fw-hero-visual {
        aspect-ratio: 3 / 2;
        min-height: 200px;
        max-height: min(68vw, 360px);
    }

    .fw-hero-body {
        padding: 18px 16px 20px;
    }

    .fw-hero-tags {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 8px;
    }

    .fw-hero-tag {
        flex-shrink: 0;
        border: 1px solid var(--fw-tag-borda, rgba(255, 255, 255, 0.12));
    }

    .fw-hero--claro .fw-hero-tag {
        border-color: var(--fw-tag-borda, rgba(26, 26, 46, 0.2));
    }

    .fw-hero-img-label {
        bottom: 16px;
        left: 16px;
        right: 16px;
        font-size: 1rem;
    }

    .fw-hero-nav {
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .fw-hero--tela-cheia .fw-hero-visual,
    .fw-hero-visual {
        aspect-ratio: 1 / 1;
        min-height: 240px;
        max-height: min(100vw, 340px);
    }
}