/* ==========================================================================
   Hero
   ========================================================================== */
.s61-hero {
    position: relative;
    display: flex;
    flex-flow: column;
    height: 100vh;
    min-height: 34rem;
    background-color: #db573b;
    overflow: clip;
}

/* máscaras das linhas (divs que o SplitText cria); margens verticais entre
   irmãos colapsam, por isso a compensação vai toda no bottom */
.s61-hero .s61-hero__tagline > div,
.s61-hero .s61-hero__product-label > div,
.s61-hero .s61-hero__product-name > div {
    margin-bottom: -.4em;
}

.s61-hero .s61-hero__tagline > div:first-child,
.s61-hero .s61-hero__product-label > div:first-child,
.s61-hero .s61-hero__product-name > div:first-child {
    margin-top: -.2em;
}

.s61-hero .s61-hero__tagline > div:last-child,
.s61-hero .s61-hero__product-label > div:last-child,
.s61-hero .s61-hero__product-name > div:last-child {
    margin-bottom: -.2em;
}

/* ---------- faixa laranja ---------- */
.s61-hero .s61-hero__top {
    position: relative;
    z-index: 9;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    gap: 2rem;
    min-height: clamp(11rem, 31vh, 15rem);
    padding: clamp(1rem, .75rem + 1vw, 1.75rem) clamp(1rem, .5rem + 2vw, 2rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background-color: #db573b;
}

.s61-hero .s61-hero__top .s61-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem clamp(1.25rem, .5rem + 2.5vw, 3rem);
    font-size: 20px;
}

.s61-hero .s61-hero__brand {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 2rem;
}

.s61-hero .s61-hero__brand .s61-hero__logo-mask {
    overflow: clip;
}

.s61-hero .s61-hero__brand .s61-hero__logo {
    display: block;
}

.s61-hero .s61-hero__brand .s61-hero__logo img {
    display: block;
    width: clamp(13rem, 4rem + 33vw, 31.25rem);
    height: auto;
}

.s61-hero .s61-hero__brand .s61-hero__tagline {
    margin: 0;
    font-family: "SeasonMix", Sans-serif;
    color: #dcd5d1;
    font-size: 29px;
    line-height: 1.2;
}

.s61-hero .s61-hero__brand .s61-hero__tagline strong {
    font-family: "SeasonSans", Sans-serif;
    font-weight: 700;
}

/* hambúrguer (só mobile) */
.s61-hero .s61-hero__brand .s61-burger {
    display: none;
    flex-flow: column;
    justify-content: center;
    gap: .5rem;
    width: 1.75rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.s61-hero .s61-hero__brand .s61-burger span {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #dcd5d1;
}

/* ---------- imagem ---------- */
.s61-hero .s61-hero__bg {
    position: relative;
    z-index: 3;
    flex: 1;
    overflow: clip;
}

/* ---------- slider (Swiper) ---------- */
.s61-hero .s61-hero__bg .s61-hero__media {
    position: absolute;
    inset: 0;
    z-index: 4;
}

.s61-hero .s61-hero__media .swiper-wrapper,
.s61-hero .s61-hero__media .swiper-slide {
    height: 100%;
}

.s61-hero .s61-hero__media .swiper-slide {
    overflow: clip;
}

/* slide que sai cresce e o que entra volta ao normal, junto com o fade */
.s61-hero .s61-hero__media .s61-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    scale: 1.2;
    transition: scale 1.6s cubic-bezier(.45, 0, .55, 1);
}

.s61-hero .s61-hero__media .swiper-slide-active .s61-hero__image {
    scale: 1;
}

.s61-hero .s61-hero__bg .s61-hero__shade {
    position: absolute;
    inset: auto 0 0;
    z-index: 5;
    height: 45%;
    background-image: linear-gradient(180deg, rgb(51 48 46 / 0), rgb(51 48 46 / .9));
    pointer-events: none;
}

/* dots = paginação do Swiper (anula o posicionamento padrão dele) */
.s61-hero .s61-hero__bg .s61-hero__dots {
    position: absolute;
    top: 50%;
    right: clamp(1rem, .5rem + 2vw, 2rem);
    bottom: auto;
    left: auto;
    z-index: 8;
    display: flex;
    flex-flow: column;
    gap: .75rem;
    width: auto;
    transform: none;
    translate: 0 -50%;
}

/* sem clique nos dots até a intro terminar (o texto do produto ainda está dividido em linhas) */
html:not(.s61-intro-done) .s61-hero .s61-hero__bg .s61-hero__dots {
    pointer-events: none;
}

.s61-hero .s61-hero__bg .s61-hero__dots .s61-hero__dot {
    display: block;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgb(255 255 255 / .75);
    cursor: pointer;
    transition: background-color .3s, scale .3s;
}

.s61-hero .s61-hero__bg .s61-hero__dots .s61-hero__dot:hover {
    scale: 1.3;
}

.s61-hero .s61-hero__bg .s61-hero__dots .s61-hero__dot.is-active {
    background-color: #db573b;
}

.s61-hero .s61-hero__bg .s61-hero__footer {
    position: absolute;
    inset: auto 0 0;
    z-index: 8;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    padding: 0 clamp(1rem, .5rem + 2vw, 2rem) clamp(1rem, .75rem + 1vw, 1.75rem);
    color: #fff;
}

/* corta só na vertical: o nome novo pode ser mais largo que o atual */
.s61-hero .s61-hero__footer .s61-hero__product-mask {
    position: relative;
    padding-bottom: .12em;
    margin-bottom: -.12em;
    overflow: visible clip;
}

.s61-hero .s61-hero__footer .s61-hero__product-mask .is-next {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
}

.s61-hero .s61-hero__footer .s61-hero__product-label {
    display: block;
    font-size: 20px;
}

.s61-hero .s61-hero__footer .s61-hero__product-name {
    margin: 0;
    font-family: "SeasonMix", Sans-serif;
    font-size: 62px;
    font-weight: 400;
    line-height: 1.1;
}

.s61-hero .s61-hero__bg .s61-hero__curtain {
    position: absolute;
    inset: 0;
    z-index: 20;
    background-color: color-mix(in srgb, #db573b 88%, black);
    opacity: 0;
    pointer-events: none;
}

@media screen and (max-width: 991px) {
    .s61-hero {
        height: 100svh;
    }
}

@media screen and (max-width: 767px) {
    .s61-hero .s61-hero__top {
        justify-content: flex-end;
    }

    .s61-hero .s61-hero__top .s61-nav {
        display: none;
    }

    .s61-hero .s61-hero__brand {
        align-items: center;
    }

    .s61-hero .s61-hero__brand .s61-hero__tagline {
        display: none;
    }

    .s61-hero .s61-hero__brand .s61-hero__logo img {
        width: min(66vw, 20rem);
    }

    .s61-hero .s61-hero__brand .s61-burger {
        display: flex;
    }

    .s61-hero .s61-hero__bg .s61-hero__dots {
        gap: 2.5rem;
    }

    .s61-hero .s61-hero__bg .s61-hero__footer {
        padding-bottom: 1.25rem;
    }

    .s61-hero .s61-hero__footer .s61-hero__product-label {
        font-size: 15px;
    }

    .s61-hero .s61-hero__footer .s61-hero__product-name {
        font-size: 45px;
    }
}

/* ==========================================================================
   Slide imagens
   ========================================================================== */
.s61-slide-images {
    width: 100%;
    overflow: hidden;
}

.s61-slide-images .container {
    width: 100%;
}

.s61-slide-images .container .swiper {
    width: 100%;
    overflow: visible;
}

.s61-slide-images .container .swiper-wrapper {
    transition-timing-function: linear; /* esteira contínua, sem acelerar/frear entre imagens */
}

/* altura travada (no máximo 70% da tela); a largura sai da proporção da imagem */
.s61-slide-images .container .swiper-slide {
    width: auto;
    height: auto;
}

.s61-slide-images .container .s61-slide-images__item {
    width: auto;
    height: min(44vw, 70vh);
    aspect-ratio: 750 / 892;
    overflow: hidden;
}

@media screen and (max-width: 1023px) {
    .s61-slide-images .container .s61-slide-images__item {
        height: min(51vw, 70vh);
    }
}

@media screen and (max-width: 767px) {
    .s61-slide-images .container .s61-slide-images__item {
        height: min(95vw, 70vh);
    }
}

.s61-slide-images .container .s61-slide-images__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ==========================================================================
   Lista de Ombrelones — 3 colunas iguais; a 1ª célula fica vazia para o item 1
   alinhar com a 2ª coluna da div acima (o espaço entre colunas é ajustável no widget)
   ========================================================================== */
.s61-list-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.s61-list-items .s61-list-items__media {
    aspect-ratio: 293 / 341;
    overflow: hidden;
}

.s61-list-items .s61-list-items__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s61-list-items .s61-list-items__title {
    margin: .625rem 0 0;
    font-family: "SeasonSans", Sans-serif;
    font-size: 29px;
    font-weight: 400;
    line-height: 41px;
    color: #33302e;
}

/* mobile: um item abaixo do outro, sem a célula vazia */
@media screen and (max-width: 767px) {
    .s61-list-items {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px !important; /* !important: ganha do campo "Espaço entre colunas" do widget */
    }

    .s61-list-items .s61-list-items__blank {
        display: none;
    }

    .s61-list-items .s61-list-items__title {
        font-size: 20px;
        line-height: 29px;
    }
}

/* ==========================================================================
   Downloads Ombrelones — lista | imagens (swiper fade) | conteúdo.
   No desktop o bloco ocupa a tela e fica travado (pin) enquanto a rolagem troca
   os itens; imagens e conteúdos ficam empilhados e só o .is-active aparece.
   ========================================================================== */
.s61-downloads {
    /* em cima desconta o header fixo (.s61-sticky), que fica por cima do bloco travado */
    --s61-downloads-pad-top: 7rem;
    --s61-downloads-pad-bottom: clamp(1.5rem, 4vh, 3rem);

    /* fundo opaco + acima das seções vizinhas: enquanto travado, nada aparece
       através dele (o header fixo, z-index 8, continua por cima) */
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 17.7% 34.3% minmax(0, 1fr);
    align-content: center;
    min-height: 100vh;
    padding-block: var(--s61-downloads-pad-top) var(--s61-downloads-pad-bottom);
    background-color: #D1CFCC;
    color: #33302e;
}

/* linha de ponta a ponta acima do bloco (item da grade ocupando todas as colunas),
   40px acima do título; fica dentro do bloco, então acompanha o pin */
.s61-downloads::before {
    content: "";
    grid-column: 1 / -1;
    height: 1px;
    margin-bottom: 40px;
    background-color: #33302e;
}

.s61-downloads .s61-downloads__heading {
    margin: 0;
    font-family: "SeasonSans", Sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
}

.s61-downloads .s61-downloads__names {
    display: flex;
    flex-flow: column;
    gap: 2.25rem;
    margin: 5rem 0 0;
    padding: 0;
    list-style: none;
}

.s61-downloads .s61-downloads__name {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    font-family: "SeasonSans", Sans-serif;
    font-size: 20px;
    line-height: 25px;
    color: inherit;
    opacity: .25;
    cursor: pointer;
    transition: opacity .4s, padding-left .4s cubic-bezier(.65, 0, .35, 1);
}

.s61-downloads .s61-downloads__name:hover {
    opacity: .6;
}

/* bolinha laranja do item ativo */
.s61-downloads .s61-downloads__name::before {
    content: "";
    position: absolute;
    top: calc(50% + var(--s61-text-offset, .1em));
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #db573b;
    translate: 0 -50%;
    scale: 0;
    transition: scale .4s cubic-bezier(.65, 0, .35, 1);
}

.s61-downloads .s61-downloads__name.is-active {
    padding-left: 1rem;
    opacity: 1;
}

.s61-downloads .s61-downloads__name.is-active::before {
    scale: 1;
}

/* imagens: um swiper por item, empilhados */
.s61-downloads .s61-downloads__medias {
    position: relative;
    aspect-ratio: 420 / 538;
    max-height: calc(100vh - var(--s61-downloads-pad-top) - var(--s61-downloads-pad-bottom) - 41px); /* 41px = linha + 40px */
}

.s61-downloads .s61-downloads__media {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s, visibility 0s linear .8s;
}

.s61-downloads .s61-downloads__media.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity .8s, visibility 0s;
}

.s61-downloads .s61-downloads__media .swiper-slide {
    height: 100%;
}

.s61-downloads .s61-downloads__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* conteúdos empilhados na mesma célula (a altura é a do maior) */
.s61-downloads .s61-downloads__contents {
    display: grid;
    padding-left: clamp(2rem, 8.5vw, 8.5rem);
}

.s61-downloads .s61-downloads__content {
    grid-area: 1 / 1;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    gap: 3rem;
    opacity: 0;
    visibility: hidden;
    translate: 0 1.5rem;
    transition: opacity .6s, translate .8s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .6s;
}

.s61-downloads .s61-downloads__content.is-active {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity .6s .15s, translate .8s .15s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

.s61-downloads .s61-downloads__label {
    margin: 0;
    font-family: "SeasonSans", Sans-serif;
    font-size: 20px;
    line-height: 25px;
}

.s61-downloads .s61-downloads__label strong {
    font-weight: 700;
}

.s61-downloads .s61-downloads__title {
    margin: .75rem 0 0;
    font-family: "SeasonMix", Sans-serif;
    font-size: 50px;
    font-weight: 400;
    line-height: 55px;
}

.s61-downloads .s61-downloads__description {
    margin: clamp(2rem, 6vh, 3.5rem) 0 0;
    max-width: 30em;
    font-family: "SeasonSans", Sans-serif;
    font-size: 20px;
    line-height: 25px;
}

.s61-downloads .s61-downloads__links {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 0;
    margin-bottom: 1.25rem;
    font-family: "SeasonSans", Sans-serif;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: .65px;
    text-transform: uppercase;
}

/* separador " | " entre os itens */
.s61-downloads .s61-downloads__links span + span::before {
    content: "|";
    display: inline-block;
    margin-inline: .75rem;
}

.s61-downloads .s61-button .s61-button__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

@media screen and (max-width: 1023px) {
    .s61-downloads {
        grid-template-columns: 20% 36% minmax(0, 1fr);
    }

    .s61-downloads .s61-downloads__contents {
        padding-left: 2rem;
    }
}

/* mobile: sem pin — nomes viram abas em linha e o conteúdo vem embaixo da imagem */
@media screen and (max-width: 767px) {
    .s61-downloads {
        --s61-downloads-pad-top: 1.5rem;

        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        min-height: 0;
    }

    .s61-downloads .s61-downloads__names {
        flex-flow: row wrap;
        gap: .75rem 1.5rem;
        margin-top: 1.25rem;
    }

    /* 20px da linha até o título: desconta o gap da grade (1.5rem) */
    .s61-downloads::before {
        margin-bottom: calc(20px - 1.5rem);
    }

    .s61-downloads .s61-downloads__heading,
    .s61-downloads .s61-downloads__name,
    .s61-downloads .s61-downloads__label,
    .s61-downloads .s61-downloads__description {
        font-size: 15px;
        line-height: 19px;
    }

    .s61-downloads .s61-downloads__title {
        display: none;
    }

    .s61-downloads .s61-downloads__links {
        font-size: 10px;
        line-height: 13px;
        letter-spacing: .5px;
    }

    .s61-downloads .s61-downloads__medias {
        max-height: none;
    }

    .s61-downloads .s61-downloads__contents {
        padding-left: 0;
    }

    .s61-downloads .s61-downloads__description {
        margin-top: 1.5rem;
    }
}