html.lenis,
html.lenis body {
    height: auto;
}

html {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* Button v2 */
.btn-right {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0px;
    overflow: hidden;
    transition: all .3s ease;
    font-family: "SeasonSans", Sans-serif;
    font-size: 14px;
    letter-spacing: 1.19px;
    color: #B5ACA4;
    cursor: pointer;
}

.btn-right.white {
    color: #F8F8F2;
}

.btn-right .icon {
    transform: translateX(-20px);
    transition: all .3s ease;
}

.btn-right:hover {
    gap: 20px;
}

.btn-right:hover .icon {
    transform: translateX(0);
}

/* Botão v2 — mesmo visual do contato fixo (.s61-contact), mas em todas as
   telas mostra pílula + bolinha (no mobile não vira só o ícone) */
.s61-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.s61-button .s61-button__text,
.s61-button .s61-button__icon {
    display: flex;
    align-items: center;
    height: 3.25rem;
    border: 1px solid rgb(220 213 209 / .75);
    border-radius: 999px;
    background-color: #33302e;
    color: #dcd5d1;
}

/* camadas: fundo da bolinha < pílula (2) < ícone da bolinha (3) */
.s61-button .s61-button__text {
    position: relative;
    z-index: 2;
    padding-inline: 1.5rem;
    font-size: 20px;
    white-space: nowrap;
    transition:
        background-color .25s,
        padding-right .35s cubic-bezier(.65, 0, .35, 1),
        margin-right .35s cubic-bezier(.65, 0, .35, 1);
}

/* centraliza o texto na vertical: a SeasonSans tem mais espaço em cima que
   embaixo, então pelo line-height o texto fica ~2px baixo. O padding embaixo
   (altura fixa + border-box) sobe o texto metade dele */
.s61-button .s61-button__text,
.s61-contact .s61-contact__button {
    padding-bottom: .2em;
}

/* partes do .s61-button como <button> (popups, widget Downloads): zera o estilo nativo */
.s61-button button {
    padding-top: 0;
    font: inherit;
    cursor: pointer;
}

/* hover no bloco inteiro: a pílula cresce para a direita por cima da bolinha */
.s61-button:hover .s61-button__text {
    padding-right: 5.25rem;
    margin-right: -3.75rem;
    background-color: #db573b;
}

/* sem position/z-index aqui de propósito: assim o ícone pode subir acima da pílula */
.s61-button .s61-button__icon {
    justify-content: center;
    width: 3.25rem;
    flex-shrink: 0;
    transition: background-color .25s;
}

.s61-button:hover .s61-button__icon {
    background-color: #db573b;
}

.s61-button .s61-button__icon svg,
.s61-button .s61-button__icon i {
    position: relative;
    z-index: 3; /* fica visível por cima da pílula quando ela cresce */
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
    line-height: 1;
    fill: currentColor;
    pointer-events: none;
}

/* A SeasonSans fica ~.1em abaixo do centro da linha (mais espaço em cima que
   embaixo). Bolinhas e ícones alinhados pelo centro descem esse tanto para
   ficarem no centro visual do texto */
:root {
    --s61-text-offset: .1em;
}

/* Botão v2 — estilo "texto com bolinha": sem fundo; no hover a bolinha aparece
   antes do texto. Ela é absoluta (fora do fluxo), então não muda o tamanho do
   widget nem empurra nada ao lado */
.s61-button-dot {
    position: relative;
    display: inline-block;
    font-size: 20px;
    line-height: 1.2;
    color: #dcd5d1;
}

.s61-button-dot::before {
    content: "";
    position: absolute;
    top: calc(50% + var(--s61-text-offset));
    right: calc(100% + .35em);
    width: .3em;
    height: .3em;
    border-radius: 50%;
    background-color: currentColor;
    translate: 0 -50%;
    scale: 0;
    transition: scale .35s cubic-bezier(.65, 0, .35, 1);
}

.s61-button-dot:hover::before {
    scale: 1;
}

/* variação com ícone do sprite ao lado do texto (cor = cor do texto) */
.s61-button-dot--icon {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}

.s61-button-dot--icon .s61-button-dot__icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    fill: currentColor;
    translate: 0 var(--s61-text-offset);
}

/* Links do menu (header global, header do hero e header fixo): mesma bolinha
   do .s61-button-dot no hover, na cor do texto e fora do fluxo */
.s61-top .s61-nav a,
.s61-hero__top .s61-nav a,
.s61-sticky .s61-sticky__nav a {
    position: relative;
}

.s61-top .s61-nav a::before,
.s61-hero__top .s61-nav a::before,
.s61-sticky .s61-sticky__nav a::before {
    content: "";
    position: absolute;
    top: calc(50% + var(--s61-text-offset));
    right: calc(100% + .35em);
    width: .3em;
    height: .3em;
    border-radius: 50%;
    background-color: currentColor;
    translate: 0 -50%;
    scale: 0;
    transition: scale .35s cubic-bezier(.65, 0, .35, 1);
}

.s61-top .s61-nav a:hover::before,
.s61-hero__top .s61-nav a:hover::before,
.s61-sticky .s61-sticky__nav a:hover::before {
    scale: 1;
}

/* Button Left */
.btn-left {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0px;
    overflow: hidden;
    transition: all .3s ease;
    font-family: "SeasonSans", Sans-serif;
    font-size: 14px;
    letter-spacing: 1.19px;
    color: #B5ACA4;
    cursor: pointer;
    flex-direction: row-reverse;
}

.btn-left.white {
    color: #F8F8F2;
}

.btn-left .icon {
    transform: translateX(20px);
    transition: all .3s ease;
}

.btn-left .icon svg {
    transition: transform .3s ease;
}

.btn-left:hover {
    gap: 20px;
}

.btn-left:hover .icon {
    transform: translateX(0);
}

.btn-left .icon svg {
    transform: rotate(180deg);
}

@media only screen and (max-width: 767px) {}

/* Image */

.s61-img {
    display: block;
}

.s61-img img {
    display: block;
}

/* Widget Inline SVG */
.s61-inline-svg,
.s61-inline-svg a {
    display: flex;
    outline: none;
    justify-content: center;
}

/* Text */
.b6web-text .b6web-text-content.breakline span {
    display: block;
}

.s61-popup-contact {
    position: fixed;
    top: 0;
    right: 0;
    width: 30%;
    height: 100svh;
    z-index: 99999;
    background-color: #B5ACA4;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.s61-popup-contact.open {
    transform: translateX(0);
}

.s61-popup-contact .container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 72px;
    padding: 0 8%;
}

.s61-popup-contact .container .close {
    position: absolute;
    top: 30px;
    right: 4%;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.s61-popup-contact .container .title {
    font-family: "SeasonSans", Sans-serif;
    font-size: 34px;
    line-height: 38px;
    color: #F8F8F2;
}

.s61-popup-contact .container .form {
    font-family: "SeasonSans", Sans-serif;
    display: flex;
    gap: 8%;
    flex-direction: column;
}

.s61-popup-contact .container .form form {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.s61-popup-contact .container .form .col {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: #F8F8F2;
}

.s61-popup-contact .container .form .col:last-child {
    justify-content: space-between;
}

.s61-popup-contact .container .form .col .identify {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
    font-size: 14px;
}

.s61-popup-contact .container .form .col .identify .radio-group {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.s61-popup-contact .container .form .col .identify .radio-group #identify-client {}

.s61-popup-contact .container .form .col .identify .radio-group #identify-broker {}

.s61-popup-contact .container .form .col .radio-group label,
.s61-popup-contact .container .form .col .checkbox-group label {
    cursor: pointer;
}

.s61-popup-contact .container .form .col .radio-group input[type=radio],
.s61-popup-contact .container .form .col .checkbox-group input[type=checkbox] {
    position: relative;
    top: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
}

.s61-popup-contact .container .form .col .radio-group input[type=radio]::before,
.s61-popup-contact .container .form .col .checkbox-group input[type=checkbox]::before {
    content: "";
    position: absolute;
    left: 5.92px;
    top: 7px;
    z-index: 1;
    width: 6px;
    height: 3px;
    border: 1px solid #F8F8F2;
    border-top-style: none;
    border-right-style: none;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -webkit-transform: rotate(-45deg) scale(0, 0);
    -moz-transform: rotate(-45deg) scale(0, 0);
    -ms-transform: rotate(-45deg) scale(0, 0);
    -o-transform: rotate(-45deg) scale(0, 0);
    transform: rotate(-45deg) scale(0, 0);
}

.s61-popup-contact .container .form .col .radio-group input[type=radio]:checked::before,
.s61-popup-contact .container .form .col .checkbox-group input[type=checkbox]:checked::before {
    -webkit-transform: rotate(-45deg) scale(1, 1);
    -moz-transform: rotate(-45deg) scale(1, 1);
    -ms-transform: rotate(-45deg) scale(1, 1);
    -o-transform: rotate(-45deg) scale(1, 1);
    transform: rotate(-45deg) scale(1, 1);
}

.s61-popup-contact .container .form .col .radio-group input[type=radio]::after,
.s61-popup-contact .container .form .col .checkbox-group input[type=checkbox]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px;
    background: #FFF;
    border: 1px solid #F8F8F2;
    background-color: #B5ACA4;
    cursor: pointer;
    border-radius: 50px;
}

.s61-popup-contact .container .form .col .row {
    display: inherit;
    flex-direction: inherit;
    gap: 30px;
}

.s61-popup-contact .container .form .col .row > span {
    font-size: 13px;
    letter-spacing: 0.2px;
    line-height: 21px;
}

.s61-popup-contact .container .form .col .input_group {}

.s61-popup-contact .container .form .col .input_group+.input_group {
    margin-top: 25px;
}

.s61-popup-contact .container .form .col .input_group input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 0;
    border: 0;
    outline: none;
    border-bottom: 1px solid #F8F8F2;
    background-color: transparent;
    font-family: "SeasonSans", Sans-serif;
    font-size: 14px;
    color: #F8F8F2;
}

.s61-popup-contact .container .form .col .input_group input::placeholder {
    color: #F8F8F2;
    opacity: 1;
}

.s61-popup-contact .container .form .col .input_group #name {}

.s61-popup-contact .container .form .col .input_group #email {}

.s61-popup-contact .container .form .col .input_group #phone {}

.s61-popup-contact .container .form .col .checkbox-group {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.s61-popup-contact .container .form .col .row .checkbox-group #consent {}

.s61-popup-contact .container .form .col .row .btn-right {
    text-transform: uppercase;
    margin-top: 60px;
}

.s61-popup-contact .container .form .col .row .btn-right .icon {}

.s61-popup-contact .container .form .col .row .btn-right .icon #arrow {}

.s61-popup-contact .container .form .col .row .btn-right .icon #arrow #_0 {}

.s61-popup-contact .container .form .success-message{
    margin-top: 30px;
    color: #F8F8F2;
    font-size: 14px;
}

@media only screen and (max-width: 1200px) {
    .s61-popup-contact {
        width: 100%;
    }

    .s61-popup-contact .container .form .col {
        width: 100%;
    }

    .s61-popup-contact .container .form .col:last-child {
        gap: 60px;
    }
}

.s61-popup-contact .container .form .col .row .btn-right .icon #arrow #_0 {}

/* ==========================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "SeasonSans", Sans-serif;
    background-color: #D1CFCC;
    color: #f4ece8;
    -webkit-font-smoothing: antialiased;
}

body a {
    color: inherit;
    text-decoration: none;
}

/* Estado inicial: esconde tudo que anima até o GSAP assumir (evita flash).
   O body fica oculto porque o preloader é impresso no wp_footer, depois do conteúdo. */
html.s61-preloading body {
    visibility: hidden;
}

html.s61-preloading .s61-loading,
html.s61-preloading .s61-loading .s61-loading__bg {
    visibility: visible;
}

html.s61-preloading .s61-loading .s61-loading__logo,
html.s61-preloading .s61-loading .s61-loading__text,
html.s61-preloading .s61-top,
html.s61-preloading .s61-top [data-s61-nav],
html.s61-preloading .s61-top .s61-burger,
html.s61-preloading .s61-top .s61-top__logo,
html.s61-preloading .s61-top .s61-top__tagline,
html.s61-preloading .s61-hero [data-s61-nav],
html.s61-preloading .s61-hero .s61-burger,
html.s61-preloading .s61-hero .s61-hero__top,
html.s61-preloading .s61-hero .s61-hero__logo,
html.s61-preloading .s61-hero .s61-hero__tagline,
html.s61-preloading .s61-hero .s61-hero__bg,
html.s61-preloading .s61-hero .s61-hero__product-label,
html.s61-preloading .s61-hero .s61-hero__product-name,
html.s61-preloading .s61-hero .s61-hero__dots,
html.s61-preloading .s61-contact {
    visibility: hidden;
}

/* Linhas do SplitText: folga vertical para a máscara não cortar acentos/cedilha */
.s61-line {
    padding-block: .2em;
}

/* ==========================================================================
   Header global (faixa laranja)
   ========================================================================== */
.s61-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-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-top .s61-top__brand {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 2rem;
}

.s61-top .s61-top__brand .s61-top__logo-mask {
    overflow: clip;
}

.s61-top .s61-top__brand .s61-top__logo {
    display: block;
}

.s61-top .s61-top__brand .s61-top__logo img {
    display: block;
    width: clamp(13rem, 4rem + 33vw, 31.25rem);
    height: auto;
}

.s61-top .s61-top__brand .s61-top__tagline {
    margin: 0;
    font-family: "SeasonMix", Sans-serif;
    color: #dcd5d1;
    font-size: 29px;
    line-height: 1.2;
}

.s61-top .s61-top__brand .s61-top__tagline strong {
    font-family: "SeasonSans", Sans-serif;
    font-weight: 700;
}

/* máscaras das linhas (divs que o SplitText cria) */
.s61-top .s61-top__tagline > div {
    margin-bottom: -.4em;
}

.s61-top .s61-top__tagline > div:first-child {
    margin-top: -.2em;
}

.s61-top .s61-top__tagline > div:last-child {
    margin-bottom: -.2em;
}

/* hambúrguer (só mobile) */
.s61-top .s61-top__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-top .s61-top__brand .s61-burger span {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #dcd5d1;
}

@media screen and (max-width: 767px) {
    .s61-top {
        justify-content: flex-end;
    }

    .s61-top .s61-nav {
        display: none;
    }

    .s61-top .s61-top__brand {
        align-items: center;
    }

    .s61-top .s61-top__brand .s61-top__tagline {
        display: none;
    }

    .s61-top .s61-top__brand .s61-top__logo img {
        width: min(66vw, 20rem);
    }

    .s61-top .s61-top__brand .s61-burger {
        display: flex;
    }
}

/* ==========================================================================
   Header fixo (hero e widget Header) — fica sempre no topo, atrás do header;
   aparece sozinho conforme o header sobe com a rolagem
   ========================================================================== */
.s61-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8; /* logo abaixo do header (9): desce saindo de trás dele */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    /* fundo de ponta a ponta; conteúdo limitado a 1500px com 4% de respiro
       (o maior dos dois: em telas largas sobra (100% - 1500px) / 2 de cada lado) */
    padding: 32px max(4%, (100% - 1500px) / 2);
    background-color: #D1CFCC;
    color: #33302e;
}

/* Classe utilitária para o Elementor (Avançado > Classes CSS): o elemento passa
   por cima do header fixo (z-index 8), ex.: o footer */
.s61-above-sticky {
    position: relative;
    z-index: 9;
}

html.s61-preloading .s61-sticky {
    visibility: hidden;
}

/* a logo (--s61-logo, vinda do widget) recorta o fundo: a cor é o background-color */
.s61-sticky .s61-sticky__logo {
    display: block;
    background-color: #33302e;
    -webkit-mask: var(--s61-logo) center / contain no-repeat;
    mask: var(--s61-logo) center / contain no-repeat;
}

/* a imagem só dá o tamanho (e o alt); quem aparece é a máscara */
.s61-sticky .s61-sticky__logo img {
    display: block;
    width: clamp(13rem, 10rem + 10vw, 21.25rem);
    height: auto;
    opacity: 0;
}

.s61-sticky .s61-sticky__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem clamp(1.25rem, .5rem + 2.5vw, 3rem);
    font-size: 20px;
}


.s61-sticky .s61-sticky__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-sticky .s61-sticky__burger span {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #33302e;
}

@media screen and (max-width: 767px) {
    .s61-sticky {
        padding-block: 1rem;
    }

    .s61-sticky .s61-sticky__nav {
        display: none;
    }

    .s61-sticky .s61-sticky__logo img {
        width: min(50vw, 13rem);
    }

    .s61-sticky .s61-sticky__burger {
        display: flex;
    }
}

/* ==========================================================================
   Preloader
   ========================================================================== */
.s61-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    height: 100vh;
    padding-inline: clamp(1rem, .5rem + 2vw, 2rem);
    color: #dcd5d1;
    pointer-events: none;
    overflow: hidden;
}

.s61-loading .container {
    position: relative;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem 2rem;
    width: 100%;
}

.s61-loading .s61-loading__logo-mask {
    overflow: clip;
}

.s61-loading .s61-loading__logo {
    display: block;
    width: clamp(13rem, 4rem + 33vw, 31.25rem);
    height: auto;
}

.s61-loading .s61-loading__text {
    margin: 0;
    font-size: 29px;
    line-height: 1.2;
}

.s61-loading .s61-loading__text strong {
    font-weight: 700;
}

/* máscaras das linhas (divs que o SplitText cria) */
.s61-loading .s61-loading__text > div {
    margin-bottom: -.4em;
}

.s61-loading .s61-loading__text > div:first-child {
    margin-top: -.2em;
}

.s61-loading .s61-loading__text > div:last-child {
    margin-bottom: -.2em;
}

.s61-loading .s61-loading__bg {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-color: #db573b;
}

@media screen and (max-width: 991px) {
    .s61-loading {
        height: 100svh;
    }
}

/* mobile: logo no topo (mesma posição do menu), slogan no rodapé à direita */
@media screen and (max-width: 767px) {
    .s61-loading {
        align-items: stretch;
        padding-block: 1.75rem;
    }

    .s61-loading .container {
        flex-flow: column;
        align-items: flex-start;
    }

    .s61-loading .s61-loading__logo {
        width: min(66vw, 20rem);
    }

    .s61-loading .container .s61-loading__text {
        align-self: flex-end;
        font-size: 20px;
    }
}

/* ==========================================================================
   Contato fixo global ("Fale conosco" + WhatsApp) — em todas as páginas, acompanha a rolagem
   ========================================================================== */
.s61-contact {
    position: fixed;
    /* acompanha o limite de 1500px do site: em telas largas o botão alinha com a
       borda direita do conteúdo, não fica colado no fim da janela.
       --s61-scrollbar vem do JS (100vw inclui a barra de rolagem) */
    right: max(clamp(1rem, .5rem + 2vw, 2rem), calc((100vw - var(--s61-scrollbar, 0px) - 1500px) / 2));
    bottom: clamp(1rem, .75rem + 1vw, 1.75rem);
    z-index: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.s61-contact .s61-contact__button,
.s61-contact .s61-contact__whats {
    display: flex;
    align-items: center;
    height: 3.25rem;
    border: 1px solid rgb(220 213 209 / .75);
    border-radius: 999px;
    background-color: #33302e;
    color: #dcd5d1;
}

/* Classe utilitária para usar no Elementor (Avançado > Classes CSS): reserva à
   direita só o espaço que o contato fixo ocupa sobre o elemento, para o conteúdo
   nunca ficar por baixo dele. --s61-contact-pad é calculado no JS (global_widgets.js) */
.s61-contact-safe {
    padding-right: var(--s61-contact-pad, 15rem) !important;
}

/* camadas: fundo da bolinha < pílula (2) < ícone da bolinha (3) */
.s61-contact .s61-contact__button {
    position: relative;
    z-index: 2;
    padding-inline: 1.5rem;
    font-size: 20px;
    white-space: nowrap;
    transition:
        background-color .25s,
        padding-right .35s cubic-bezier(.65, 0, .35, 1),
        margin-right .35s cubic-bezier(.65, 0, .35, 1);
}

/* hover no bloco inteiro (pílula ou bolinha): a pílula cresce para a direita por
   cima da bolinha (padding e margin negativa andam juntos, então ela não empurra
   nada para a esquerda) */
.s61-contact:hover .s61-contact__button {
    padding-right: 5.25rem;
    margin-right: -3.75rem;
    background-color: #db573b;
}

/* sem position/z-index aqui de propósito: assim o ícone pode subir acima da pílula */
.s61-contact .s61-contact__whats {
    justify-content: center;
    width: 3.25rem;
    transition: background-color .25s;
}

.s61-contact:hover .s61-contact__whats {
    background-color: #db573b;
}

.s61-contact .s61-contact__whats svg {
    position: relative;
    z-index: 3; /* fica visível por cima da pílula quando ela cresce */
    width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
}

/* mobile: só a bolinha, com 55px */
@media screen and (max-width: 767px) {
    .s61-contact {
        bottom: 1.25rem;
    }

    .s61-contact .s61-contact__button {
        display: none;
    }

    .s61-contact .s61-contact__whats {
        width: 55px;
        height: 55px;
    }

    .s61-contact .s61-contact__whats svg {
        width: 25px;
        height: 25px;
    }
}

/* ==========================================================================
   Menu mobile
   ========================================================================== */
html.s61-menu-open {
    overflow: hidden;
}

.s61-menu {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    flex-flow: column;
    height: 100vh;
    height: 100svh;
    padding: 1.25rem clamp(1rem, .5rem + 2vw, 2rem) 2rem;
    background-color: #db573b;
    color: #dcd5d1;
    overflow-y: auto;
}

.s61-menu .s61-menu__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.s61-menu .s61-menu__top .s61-menu__logo img {
    display: block;
    width: min(66vw, 20rem); /* o menu só existe no mobile */
    height: auto;
}

/* X desenhado com dois traços */
.s61-menu .s61-menu__top .s61-menu__close {
    position: relative;
    width: 1.75rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.s61-menu .s61-menu__top .s61-menu__close::before,
.s61-menu .s61-menu__top .s61-menu__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.6rem;
    height: 1.5px;
    background-color: #dcd5d1;
    translate: -50% -50%;
    rotate: 45deg;
}

.s61-menu .s61-menu__top .s61-menu__close::after {
    rotate: -45deg;
}

.s61-menu .s61-menu__links {
    display: flex;
    flex-flow: column;
    gap: 1.25rem;
    margin-block: auto;
    padding-block: 3rem;
}

.s61-menu .s61-menu__links .s61-menu__link {
    display: block;
    overflow: clip;
    font-size: 45px;
    font-weight: 400;
    line-height: 1.2;
}

.s61-menu .s61-menu__links .s61-menu__link span {
    display: block;
}

.s61-menu .s61-menu__bottom {
    display: flex;
    flex-flow: column;
    gap: 2.75rem;
    font-size: 15px;
}

.s61-menu .s61-menu__bottom .s61-menu__social {
    display: flex;
    flex-flow: column;
    gap: .375rem;
}

@media screen and (min-width: 768px) {
    .s61-menu {
        display: none !important;
    }
}

/* ==========================================================================
   Popup "Catálogo de ombrelones" — abre com .s61-open-catalog (JS).
   Caixa central sobre fundo escuro; dentro dela a metade laranja (texto) entra
   pela esquerda e a cinza (formulário) pela direita. Depois do envio, a tela
   de obrigado (laranja) cobre a caixa
   ========================================================================== */
html.s61-catalog-open {
    overflow: hidden;
}

.s61-catalog {
    position: fixed;
    inset: 0;
    z-index: 700; /* acima do contato fixo (600) */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    visibility: hidden;
    transition: visibility 0s linear .4s;
}

.s61-catalog.is-open {
    visibility: visible;
    transition: visibility 0s;
}

.s61-catalog .s61-catalog__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgb(51 48 46 / .6);
    opacity: 0;
    transition: opacity .4s;
}

.s61-catalog.is-open .s61-catalog__backdrop {
    opacity: 1;
}

/* caixa: entra com fade */
.s61-catalog .s61-catalog__dialog {
    position: relative;
    width: min(100%, 1290px);
    height: min(100%, 750px);
    overflow: hidden;
    opacity: 0;
    transition: opacity .4s;
}

.s61-catalog.is-open .s61-catalog__dialog {
    opacity: 1;
}

/* camada própria (z-index 0): os z-index internos do .s61-button (2 e 3) ficam
   presos aqui e não passam por cima da tela de obrigado (z-index 1) */
.s61-catalog .s61-catalog__body {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain; /* a rolagem não "vaza" para a página atrás */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    /* barra de rolagem fina, escura e arredondada (Firefox / Chrome / Safari) */
    scrollbar-width: thin;
    scrollbar-color: #33302e transparent;
}

.s61-catalog .s61-catalog__body::-webkit-scrollbar {
    width: 6px;
}

.s61-catalog .s61-catalog__body::-webkit-scrollbar-track {
    background: transparent;
}

.s61-catalog .s61-catalog__body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: #33302e;
}

.s61-catalog .s61-catalog__intro,
.s61-catalog .s61-catalog__panel {
    padding: 3rem;
}

.s61-catalog .s61-catalog__intro {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    gap: 3rem;
    background-color: #db573b;
    color: #dcd5d1;
}

.s61-catalog .s61-catalog__panel {
    display: flex;
    flex-flow: column;
    background-color: #D1CFCC;
    color: #33302e;
}

/* tela de obrigado: cobre a caixa toda, texto à esquerda e centralizado na vertical */
.s61-catalog .s61-catalog__success {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 3rem;
    background-color: #db573b;
    color: #dcd5d1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s, visibility 0s linear .6s;
}

.s61-catalog .s61-catalog__success .s61-catalog__text {
    max-width: 20em;
}

/* bloco de baixo da metade laranja: texto (+ lista de arquivos no popup Downloads) */
.s61-catalog .s61-catalog__intro-bottom {
    display: flex;
    flex-flow: column;
    gap: 3rem;
}

/* lista numerada de arquivos: "01  Ficha técnica" */
.s61-catalog .s61-catalog__files {
    display: flex;
    flex-flow: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "SeasonSans", Sans-serif;
    font-size: 20px;
    line-height: 25px;
}

.s61-catalog .s61-catalog__files:empty {
    display: none;
}

.s61-catalog .s61-catalog__files li {
    display: flex;
    gap: 1.5rem;
}

.s61-catalog .s61-catalog__files strong {
    flex-shrink: 0;
    min-width: 1.4em;
    font-weight: 700;
}

/* tela de obrigado do Downloads: link de reserva se o download não começar */
.s61-catalog .s61-catalog__file-link {
    display: inline-block;
    margin-top: 3rem;
    font-family: "SeasonSans", Sans-serif;
    font-size: 16px;
    line-height: 21px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s61-catalog .s61-catalog__dialog.is-success .s61-catalog__success {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s, visibility 0s;
}

/* itens entram em sequência logo depois do fade da caixa (sobem 1rem + fade);
   ao fechar somem junto com a caixa, sem atraso */
.s61-catalog .s61-catalog__title,
.s61-catalog .s61-catalog__intro .s61-catalog__text,
.s61-catalog .s61-catalog__intro .s61-catalog__files,
.s61-catalog .s61-catalog__close,
.s61-catalog .s61-catalog__profiles,
.s61-catalog .s61-catalog__fields,
.s61-catalog .s61-catalog__footer {
    opacity: 0;
    translate: 0 1rem;
    transition: opacity .3s, translate .3s;
}

.s61-catalog.is-open .s61-catalog__title,
.s61-catalog.is-open .s61-catalog__intro .s61-catalog__text,
.s61-catalog.is-open .s61-catalog__intro .s61-catalog__files,
.s61-catalog.is-open .s61-catalog__close,
.s61-catalog.is-open .s61-catalog__profiles,
.s61-catalog.is-open .s61-catalog__fields,
.s61-catalog.is-open .s61-catalog__footer {
    opacity: 1;
    translate: none;
    transition: opacity .5s var(--s61-catalog-delay, .15s), translate .6s var(--s61-catalog-delay, .15s) cubic-bezier(.16, 1, .3, 1), background-color .25s;
}

.s61-catalog .s61-catalog__title { --s61-catalog-delay: .15s; }
.s61-catalog .s61-catalog__profiles { --s61-catalog-delay: .2s; }
.s61-catalog .s61-catalog__intro .s61-catalog__text { --s61-catalog-delay: .25s; }
.s61-catalog .s61-catalog__fields,
.s61-catalog .s61-catalog__intro .s61-catalog__files { --s61-catalog-delay: .3s; }
.s61-catalog .s61-catalog__close,
.s61-catalog .s61-catalog__footer { --s61-catalog-delay: .35s; }

.s61-catalog .s61-catalog__title {
    margin: 0;
    font-family: "SeasonMix", Sans-serif;
    font-size: 62px;
    font-weight: 400;
    line-height: 67px;
}

.s61-catalog .s61-catalog__text {
    max-width: 17em;
    margin: 0;
    font-family: "SeasonSans", Sans-serif;
    font-size: 29px;
    line-height: 32px;
}

.s61-catalog .s61-catalog__text strong {
    font-family: "SeasonSans", Sans-serif;
    font-weight: 700;
}

/* fechar: bolinha escura com X desenhado com dois traços (fica acima do obrigado) */
.s61-catalog .s61-catalog__close {
    position: absolute;
    top: 3rem;
    right: 3rem;
    z-index: 3;
    width: 3.375rem;
    height: 3.375rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #33302e;
    cursor: pointer;
    transition: opacity .3s, background-color .25s;
}

/* borda via box-shadow inset: aparece sem mudar o tamanho da bolinha
   (e não some sobre a tela de obrigado, que também é laranja) */
.s61-catalog .s61-catalog__close:hover {
    background-color: #db573b;
    box-shadow: inset 0 0 0 1px #D1CFCC;
}

.s61-catalog .s61-catalog__close::before,
.s61-catalog .s61-catalog__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1.5px;
    background-color: #dcd5d1;
    translate: -50% -50%;
    rotate: 45deg;
}

.s61-catalog .s61-catalog__close::after {
    rotate: -45deg;
}

.s61-catalog .s61-catalog__form {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    gap: 3.5rem;
    flex: 1;
    padding-top: 5rem; /* abaixo do botão de fechar */
    font-family: "SeasonSans", Sans-serif;
    font-size: 20px; /* perfis, opções e campos */
    line-height: 25px;
}

.s61-catalog .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.s61-catalog .s61-catalog__profiles {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.s61-catalog .s61-catalog__profiles legend {
    margin-bottom: 1.25rem;
    padding: 0;
}

/* opções com quadradinho (radio e checkbox iguais) */
.s61-catalog .s61-catalog__check {
    display: inline-flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
}

.s61-catalog .s61-catalog__check input {
    position: relative;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    margin: calc((var(--s61-check-line, 25px) - 13px) / 2 + var(--s61-text-offset)) 0 0; /* centro da 1ª linha */
    border: 1px solid #33302e;
    border-radius: 0;
    background: none;
    appearance: none;
    cursor: pointer;
}

.s61-catalog .s61-catalog__check input::after {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: #33302e;
    scale: 0;
    transition: scale .2s;
}

.s61-catalog .s61-catalog__check input:checked::after {
    scale: 1;
}

.s61-catalog .s61-catalog__check input:focus-visible {
    outline: 2px solid #db573b;
    outline-offset: 2px;
}

.s61-catalog .s61-catalog__check--small {
    --s61-check-line: 21px;

    max-width: 15rem;
    font-size: 16px;
    line-height: 21px;
}

.s61-catalog .s61-catalog__check--small a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.s61-catalog .s61-catalog__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.5rem 1.5rem;
}

.s61-catalog .s61-catalog__field--full {
    grid-column: 1 / -1;
}

.s61-catalog .s61-catalog__field input {
    display: block;
    width: 100%;
    padding: 0 0 .875rem;
    border: 0;
    border-bottom: 1px solid #33302e;
    border-radius: 0;
    outline: none;
    background: none;
    font: inherit;
    color: inherit;
}

.s61-catalog .s61-catalog__field input::placeholder {
    color: inherit;
    opacity: 1;
}

.s61-catalog .s61-catalog__field input:focus {
    border-bottom-color: #db573b;
}

/* campo inválido depois de tentar enviar */
.s61-catalog .s61-catalog__form.is-validated :invalid {
    border-color: #db573b;
}

.s61-catalog .s61-catalog__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.s61-catalog .s61-button .s61-button__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.s61-catalog .s61-catalog__form.is-sending .s61-button {
    opacity: .6;
    pointer-events: none;
}

.s61-catalog .s61-catalog__message {
    margin: -2rem 0 0;
    font-size: 15px;
    line-height: 20px;
}

.s61-catalog .s61-catalog__message:empty {
    display: none;
}

/* mobile: caixa ocupa a tela toda (sem margens), uma coluna rolando dentro dela */
@media screen and (max-width: 767px) {
    .s61-catalog {
        padding: 0;
    }

    /* tela toda: 100% de largura e altura (dvh acompanha a barra do navegador) */
    .s61-catalog .s61-catalog__dialog {
        width: 100%;
        height: 100%;
        height: 100dvh;
    }

    /* texto em cima (altura do conteúdo) e formulário estica até o fim da tela;
       se não couber, rola */
    .s61-catalog .s61-catalog__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        background-color: #D1CFCC;
    }

    .s61-catalog .s61-catalog__intro,
    .s61-catalog .s61-catalog__panel {
        padding: 1.5rem 1rem 2rem;
    }

    .s61-catalog .s61-catalog__intro {
        padding-right: 4.5rem; /* espaço do botão de fechar */
    }

    .s61-catalog .s61-catalog__success {
        padding: 1.5rem 1rem;
    }

    .s61-catalog .s61-catalog__close {
        top: 1rem;
        right: 1rem;
        width: 2.75rem;
        height: 2.75rem;
    }

    .s61-catalog .s61-catalog__title {
        font-size: 45px;
        line-height: 49px;
    }

    .s61-catalog .s61-catalog__text {
        font-size: 20px;
        line-height: 29px;
    }

    .s61-catalog .s61-catalog__intro-bottom {
        gap: 1.5rem;
    }

    .s61-catalog .s61-catalog__files {
        font-size: 15px;
        line-height: 19px;
    }

    .s61-catalog .s61-catalog__file-link {
        margin-top: 1.5rem;
    }

    .s61-catalog .s61-catalog__form {
        --s61-check-line: 19px;

        gap: 2.5rem;
        padding-top: 0;
        font-size: 15px;
        line-height: 19px;
    }

    /* e-mail e telefone continuam lado a lado (nome ocupa a linha toda) */
    .s61-catalog .s61-catalog__fields {
        gap: 2.5rem 1rem;
    }

    .s61-catalog .s61-catalog__footer {
        flex-flow: column;
        align-items: flex-start;
    }

    .s61-catalog .s61-catalog__message {
        margin-top: -1rem;
    }
}
