/*!
 * Mini Bootstrap CSS | CDI
 * Grid + Containers + Display + Flex + Spacing Essentials
 */
 *,*::before,*::after{box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;font-family:"Inter",system-ui,sans-serif;font-size:1rem;line-height:1.5;color:#212529;background:#fff;-webkit-font-smoothing:antialiased}img,svg,video{display:block;max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{margin:0 0 .5rem;font-weight:500;line-height:1.2}p{margin:0 0 1rem}button,input,select,textarea{font:inherit;margin:0}button{cursor:pointer}.container,.container-fluid{width:100%;margin:auto;padding-left:.75rem;padding-right:.75rem}@media(min-width:576px){.container{max-width:540px}}@media(min-width:768px){.container{max-width:720px}}@media(min-width:992px){.container{max-width:960px}}@media(min-width:1200px){.container{max-width:1140px}}@media(min-width:1400px){.container{max-width:1320px}}




/* 1. Tokens e base */
:root {
    --color-primary: #891e0a;
    --color-primary-dark: #5a1608;
    --color-secondary: #ede7d7;
    --color-secondary-dark: #e1d7be;
    --color-accent: #e44e2b;
    --color-text: #8c260f;
    --color-text-light: #f7eee1;
    --color-white: #fffdf8;
    --container-width: 90%;
    --section-space: 0px;
    --transition-base: 220ms ease;
    --shadow-base: 0 18px 45px #45100333;
    --radius-base: 3px;
    --font-heading: "Georgia Pro", Georgia, serif;
    --font-body: "Poppins", Arial, sans-serif;
    --section-gap: 75px;
    
}
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-primary);
    color: var(--color-text-light);
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.15;
}
body.menu-open,
body.modal-open {
    overflow: hidden;
}
a {
    color: inherit;
}
button,
input,
textarea {
    font: inherit;
}
button {
    cursor: pointer;
}
:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

#conteudo {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

.container {
    width: var(--container-width);
    max-width: 90%;
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 100;
    left: 1rem;
    top: 1rem;
    padding: 0.8rem 1rem;
    background: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-160%);
}
.skip-link:focus {
    transform: translateY(0);
}
h1,
h2,
h3,
p {
    margin-top: 0;
}
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.02;
}
h1 {
    font-size: 57px;
}
h2 {
    font-size: 49px;
}
h3 {
    font-size: 35px;
}
p {
    font-size: 19px;
}
.label {
    display: inline-block;
    border: 1px solid var(--color-text);
    padding: 7px 10px 4px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    line-height: 1.1;
    border-radius: 4px;
}
.label-light {
    border-color: #f1c2a1;
    color: var(--color-text-light);
}







/* =========================================
   CTA HEADER
========================================= */

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: 65px;
    padding: 0 25px;

    border: 1px solid var(--color-accent);
    border-radius: var(--radius-base);

    background: #8c1e0a;
    box-shadow: inset 0 0 0 2px #531505;

    color: var(--color-white);
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.cta-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 65px;
    padding: 0 25px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-base);
    background: #8c1e0a;
    box-shadow: inset 0 0 0 2px var(--color-accent);
    color: var(--color-white);
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform 0.3s ease,
        background 0.3s ease;
    margin-top:10px;
}



/* =========================================
   JANELA DO TEXTO
========================================= */

.cta-text {
    position: relative;

    display: block;

    height: 23px;

    overflow: hidden;
    margin-top: 1px;
}


/* =========================================
   TEXTOS
========================================= */

.cta-text span {
    display: flex;
    align-items: center;
    height: 23px;
    white-space: nowrap;
    transition: transform 0.42s cubic-bezier(0.34, 1.18, 0.64, 1);
    margin-top: 1px;
}


/* Texto inicial */

.cta-text span:first-child {
    transform: translateY(0);
}


/* Segundo texto começa abaixo */

.cta-text span:last-child {
    position: absolute;
    left: 0;
    top: 100%;

    transform: translateY(0);
}


/* =========================================
   HOVER
========================================= */

.header-cta:hover .cta-text span:first-child {
    transform: translateY(-100%);
}

.header-cta:hover .cta-text span:last-child {
    transform: translateY(-100%);
}


.cta-cta:hover .cta-text span:first-child {
    transform: translateY(-100%);
}

.cta-cta:hover .cta-text span:last-child {
    transform: translateY(-100%);
}





.button-dark {
    background: #8b1d08;
    color: var(--color-white);
    border-color: #f28a68;
    box-shadow: inset 0 0 0 2px #5a1508;
}

.under-link {
    display: inline-block;
    margin-top: 18px;
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}



.text-cta {
    position: relative;

    display: inline-block;
    overflow: hidden;

    color: inherit;
    text-decoration: underline;
}

.text-cta span {
    display: block;
    text-decoration: underline;

    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.text-cta span:last-child {
    position: absolute;
    left: 0;
    top: 100%;

    color: var(--color-accent);
}

.text-cta:hover span:first-child {
    transform: translateY(-100%);
}

.text-cta:hover span:last-child {
    transform: translateY(-100%);
}




/* 2. Hero e menu */
.hero {
    position: relative;
    height: 100svh;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    position: relative;
    height: 100%;
    padding-top: 85px;
}



#header .container {
    width: 1360px;
}



.menu-button {
    position: absolute;
    right: 4%;
    top: 85px;
    z-index: 4;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 3px;
    background: var(--color-secondary);
    padding: 8px;
}
.menu-button span {
    display: block;
    height: 2px;
    margin: 3px 0;
    background: var(--color-primary);
}
.menu-panel {
    position: fixed;
    z-index: 10;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #5a1206f5;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base);
}
.menu-panel.is-open {
    opacity: 1;
    visibility: visible;
}
.menu-panel a {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 44px);
    text-decoration: none;
}
.menu-close {
    position: absolute;
    right: 4%;
    top: 52px;
    border: 0;
    background: transparent;
    color: var(--color-white);
    font-size: 44px;
}


.menu-panel {
    position: fixed;
    z-index: 10;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: #5a1206f5;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0s linear 0.35s;
}

.menu-panel.is-open {
    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.35s ease,
        visibility 0s linear 0s;
}


/* Links do menu */

.menu-panel a {
    position: relative;

    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 44px);
    text-decoration: none;

    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Entrada dos links */

.menu-panel.is-open a {
    opacity: 1;
    transform: translateY(0);
}

.menu-button {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease;
}

.menu-button span {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-button:hover {
    background-color: var(--color-accent);
    transform: scale(1.08);
}

.menu-button:hover span:nth-child(1) {
    background-color:#ffffff;
}

.menu-button:hover span:nth-child(2) {
    background-color:#ffffff;
}

.menu-button:hover span:nth-child(3) {
    background-color:#ffffff;
}







/* ANIMA MENU STAR ------------------------------------ */



/* =========================================
   MENU — LINKS
========================================= */

.menu-panel a {
    position: relative;

    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(26px, 4vw, 44px);
    text-decoration: none;

    transition:
        color 0.45s cubic-bezier(0.55, 0.8, 0.35, 1);
}


/* -----------------------------------------
   HOVER — COR
----------------------------------------- */

.menu-panel a:hover {
    color: var(--color-accent);
}


/* -----------------------------------------
   HOVER — LINHA
----------------------------------------- */

.menu-panel a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -5px;

    width: 100%;
    height: 2px;

    background: var(--color-accent);

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-panel a:hover::after {
    transform: scaleX(1);
}



/* ANIMA MENU END ------------------------------------- */















.hero-copy {
    position: absolute;
    top: 31%;
    left: 0;
    width: 520px;
}
.hero-copy h1 {
    margin-bottom: 18px;
}
.hero-copy p {
    max-width: 370px;
    margin-bottom: 27px;
}
.hero-copy small {
    display: block;
    margin-top: 14px;
    font-size: 13px;
}





/* =========================================
   MOLDURA DO HERO
========================================= */

.hero-frame {
    --frame-color: #ebe5d4;
    --frame-width: 2px;
    --frame-inset: 3% 2% 4% 2%;
    --frame-corner-size: 15px;

    position: absolute;
    inset: var(--frame-inset);

    z-index: 2;
    pointer-events: none;
}


/* =========================================
   LINHAS
========================================= */

.frame-line {
    position: absolute;
    display: block;
    background: var(--frame-color);
}


/* Horizontais */

.frame-line-top,
.frame-line-bottom {
    left: var(--frame-corner-size);
    right: var(--frame-corner-size);
    height: var(--frame-width);
}

.frame-line-top {
    top: 0;
}

.frame-line-bottom {
    left: var(--frame-corner-size);
    right: var(--frame-corner-size);
    height: var(--frame-width);
    bottom: 0;

    /* Cria um "corte" transparente no exato centro da linha */
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(50% - 35px), transparent calc(50% - 35px), transparent calc(50% + 35px), black calc(50% + 35px), black 100%);
    mask-image: linear-gradient(to right, black 0%, black calc(50% - 35px), transparent calc(50% - 35px), transparent calc(50% + 35px), black calc(50% + 35px), black 100%);
}


/* Verticais */

.frame-line-left,
.frame-line-right {
    top: var(--frame-corner-size);
    bottom: var(--frame-corner-size);
    width: var(--frame-width);
}

.frame-line-left {
    left: 0;
}

.frame-line-right {
    right: 0;
}


/* =========================================
   CANTOS
========================================= */

.frame-corner {
    position: absolute;

    width: var(--frame-corner-size);
    height: var(--frame-corner-size);

    display: block;

    fill: none;
    stroke: var(--frame-color);
    stroke-width: 2;
    stroke-linecap: butt;
    stroke-linejoin: miter;
}


/* Superior esquerdo */

.frame-corner-tl {
    top: 0;
    left: 0;
}


/* Superior direito */

.frame-corner-tr {
    top: 0;
    right: 0;
    transform: scaleX(-1);
}


/* Inferior esquerdo */

.frame-corner-bl {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}


/* Inferior direito */

.frame-corner-br {
    right: 0;
    bottom: 0;
    transform: scale(-1);
}









/* =========================================
   SETA DE SCROLL DO HERO
========================================= */

.scroll-down {
    position: absolute;
    left: 50%;
    bottom: 1.5%;
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transform: translateX(-50%);
}

/* Seta */

.scroll-down svg {
    width: 28px;
    height: 28px;
    display: block;
    animation: scrollFloat 1.8s ease-in-out infinite;
}

/* Movimento suave para baixo e para cima */

@keyframes scrollFloat {

    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(4px);
    }

}

/* 3. O clube, benefícios e números */

section#o-clube{margin-top:75px;}

#o-clube .container {
    width: 1360px;
}

.club-grid {
    display: grid;
    grid-template-columns: 782px minmax(0, 1fr);
    gap: 7%;
    align-items: center;
    justify-content: center;
}

.photo-frame {
    margin: 0;
    aspect-ratio: 782px / 601;
}


.photo-frame--club img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1.5px solid rgba(237, 231, 215, 0.65);
}



.photo-frame--club {
    position: relative;
    width: 782px;
    max-width: 100%;
    overflow: visible;
}

.photo-frame--club::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 55%;
    height: 43%;
    left: -3%;
    top: 60%;
    background: #350808bd;
    border-radius: 26%;
    filter: blur(28px);
    opacity: 0.85;
    pointer-events: none;
}




.club-copy h2 {
    color: var(--color-text-light);
    margin-bottom: 15px;
}
.club-copy p {
    max-width: 480px;
 }
.check-list {
    padding: 0;
    list-style: none;
    font-size: 15px;
}
.check-list li {
    margin: 5px 0;
}
.check-list li::before {
    content: "✓";
    margin-right: 8px;
    color: #e77358;
}

.benefits-card,
.participation-card,
.testimonial-card {
    background: var(--color-secondary);
    color: var(--color-text);
    border-radius: var(--radius-base);
}
.benefits-card {
    padding: 55px 8% 48px;
}
.benefits-heading {
    position: relative;
}
.benefits-heading h2 {
    margin-bottom: 50px;
}
.round-seal {
    position: absolute;
    right: 3%;
    top: 0;
    width: 105px;
    height: 105px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 11px;
    letter-spacing: 0.13em;
    text-align: center;
    animation: spin 16s linear infinite;
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6%;
}

.benefits-grid article {
    position: relative;
    border-left: 0;
}

.benefits-grid article:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -10%;
    top: 0;
    height: 100%;
    width: 1px;
    background: #a64b34;
}
.benefits-grid img {
    display: block;
    width: 100%;
    aspect-ratio: 1.42;
    object-fit: cover;
    margin-bottom: 25px;
}
.benefits-grid h3 {
    margin-bottom: 15px;
    font-family: var(--font-body);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}



photo-frame--phone {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.photo-frame--phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1.5px solid rgba(237, 231, 215, 0.65);
}


.photo-frame--phone::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 55%;
    height: 43%;
    right: -3%;
    top: 60%;
    background: #350808bd;
    border-radius: 26%;
    filter: blur(28px);
    opacity: 0.85;
    pointer-events: none;
}



.featured-cta {
    /* display: flex; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-text);
    text-align: center;
    padding: 60px 0;
}
.featured-cta h2 {
    font-size: 62px;
}
.featured-cta .button {
    margin-top: 8px;
}

/* 4. Participação, parceiros e depoimentos */
.participation-card {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 6%;
    padding: 55px 7%;
    align-items: center;
}
.steps-copy h2 {
    font-size: 41px;
    margin-bottom: 15px;
}
.steps-copy > p {
    font-size: 16px;
}
.steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 21px 25px;
    margin: 35px 0 8px;
    padding: 0;
    list-style: none;
}
.steps li span {
    display: block;
    margin-bottom: 7px;
    color: var(--color-accent);
    font-size: 26px;
}
.steps h3 {
    margin: 10px 0 8px;
    font-family: var(--font-body);
    font-size: 19px;
    text-transform: uppercase;
    line-height: 1.15;
}
.steps p {
    margin: 0;
    font-size: 18px;
}



.partners-content {
    text-align: center;
}
.partners-content h2 {
    color: var(--color-text-light);
}


.logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1360px;
    margin: 47px auto 0;
}

/* Cada logo ocupa uma célula da grade */
.logo-grid img {
    display: block;
    width: 100%;
    min-height: 157px;
    padding: 14px 15%;
    object-fit: contain;
    border-top: 1px solid #bc5a40;
    border-left: 1px solid #bc5a40;
}

/* Primeira linha sem borda superior */
.logo-grid img:nth-child(-n + 4) {
    border-top: 0;
}

/* Primeira coluna sem borda à esquerda */
.logo-grid img:nth-child(4n + 1) {
    border-left: 0;
}








.logo-grid span:hover {
    opacity: 0.72;
    transform: scale(1.04);
}
.testimonial-card {
    position: relative;
    display: grid;
    grid-template-columns: 0.7fr 1.75fr;
    gap: 5%;
    padding: 60px 6%;
}
.testimonial-intro h2 {
    font-size: 53px;
}

.testimonials-swiper {
    min-width: 0;
}
.testimonial-slide {
    display: grid !important;
    grid-template-columns: 0.82fr 1fr;
    gap: 38px;
    background: var(--color-secondary-dark);
    padding: 18px;
}
.testimonial-slide img {
    width: 100%;
    height: 464px;
    /* object-fit: cover; */
}
.quote {
    display: block;
    font-family: var(--font-heading);
    font-size: 125px;
    line-height: 0.55;
    margin: 35px 0 0;
}
.testimonial-slide blockquote {
    margin: 14px 40px 17px 0;
    font-size: 22px;
    line-height: 1.1;
}
.testimonial-slide hr {
    border: 0;
    border-top: 1px solid #a9624b;
}
.testimonial-slide p {
    font-size: 14px;
}
.testimonial-controls {
    position: absolute;
    right: 10%;
    bottom: 35px;
    z-index: 2;
}




.testimonial-controls button {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
}

.testimonial-controls svg {
    width: 22px;
    height: 22px;
}



.testimonial-controls {
    position: absolute;
    right: 10%;
    bottom: 35px;
    z-index: 2;
    
    display: flex;
    gap: 10px;
}

.testimonial-controls button {
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    cursor: pointer;

    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s ease;
}

.testimonial-controls svg {
    width: 22px;
    height: 22px;
}


/* =========================================
   CONTROLES DO SWIPER
========================================= */

.testimonial-controls {
    position: absolute;
    right: 10%;
    bottom: 35px;
    z-index: 2;

    display: flex;
    gap: 5px;
}

.testimonial-controls button {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: var(--color-primary);
    color: white;

    cursor: pointer;

    transition:
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s ease,
        color 0.3s ease;
}

.testimonial-controls button:hover {
    transform: scale(1.08);
    background-color: var(--color-primary-dark);
    color: #ffffff;
}

.testimonial-controls svg {
    width: 22px;
    height: 22px;
    display: block;
}



/* =========================================
   TRANSIÇÃO DOS DEPOIMENTOS
========================================= */

.testimonial-slide {
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Conteúdo interno */

.testimonial-slide > img,
.testimonial-slide > div {
    opacity: 0;
    transform: translateX(25px);
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Pequeno atraso para o conteúdo */

.testimonial-slide > div {
    transition-delay: 0.08s;
}

/* Slide ativo */

.testimonial-slide.swiper-slide-active > img,
.testimonial-slide.swiper-slide-active > div {
    opacity: 1;
    transform: translateX(0);
}

/* Slide anterior */

.testimonial-slide.swiper-slide-prev > img,
.testimonial-slide.swiper-slide-prev > div {
    opacity: 0;
    transform: translateX(-25px);
}

/* Slide seguinte */

.testimonial-slide.swiper-slide-next > img,
.testimonial-slide.swiper-slide-next > div {
    opacity: 0;
    transform: translateX(25px);
}





/* 5. Contato, FAQ e rodapé */


#contato {
    scroll-margin-top: 350px;
}

.contact-section {
    padding-top: 0;
}
.contact-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    padding: 70px 8%;
    border: 1px solid #bd5d45;
}
.contact-copy h2 {
    margin-bottom: 22px;
}
.contact-copy > p {
    max-width: 460px;
}


/* =========================================
   FAQ
========================================= */

section#faq {
    margin-bottom: 70px;
}

.faq-section {
    text-align: center;
}

.faq-content > p {
    font-size: 16px;
}

.faq-list {
    max-width: 760px;
    margin: 40px auto 0;
    text-align: left;
}

.faq-list article {
    margin: 10px 0;
    border: 1px solid #be6249;
}

.faq-list h3 {
    margin: 0;
}


/* -----------------------------------------
   PERGUNTA
----------------------------------------- */

.faq-list button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    border: 0;
    background: transparent;
    color: #fff;

    padding: 12px 28px;

    text-align: left;
    font-family: var(--font-body);
    font-size: 17px;

    cursor: pointer;

    transition:
        color 0.35s ease;
}


/* -----------------------------------------
   HOVER
----------------------------------------- */

.faq-list button:hover {
    color: var(--color-accent);
}


/* -----------------------------------------
   ÍCONE
----------------------------------------- */

.faq-list button span {
    flex-shrink: 0;

    font-size: 31px;
    font-weight: 300;
    line-height: 1;

    color: inherit;

    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


/* -----------------------------------------
   ABERTO
----------------------------------------- */

.faq-list button[aria-expanded="true"] {
    color: var(--color-accent);
}

.faq-list button[aria-expanded="true"] span {
    transform: rotate(45deg);
}


/* -----------------------------------------
   RESPOSTA
----------------------------------------- */

.faq-list article > div {
    border-top: 1px solid rgba(190, 98, 73, 0.45);
}

.faq-list article > div p {
    padding: 16px 28px 20px;
    margin: 0;

    font-size: 17px;
    line-height: 1.5;
}

/* Evita que o Swiper amplie a largura do card ou da página. */
html,
body {
    overflow-x: clip;
}
#depoimentos,
.testimonial-card {
    overflow: hidden;
}
.testimonial-card {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.75fr);
}
.testimonial-card > *,
.testimonial-slide > * {
    min-width: 0;
}
.testimonials-swiper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.testimonial-slide {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    min-width: 0;
}





/* =====================================================
   NOVO RODAPÉ (DESKTOP & MOBILE)
===================================================== */
.footer {
    background-color: #591505;
    color: #ffffff;
    padding: 60px 20px 40px;
    font-size: 15px;
    line-height: 1.5;
}

.footer-container {
  max-width: 1180px;
  margin: 0 auto;
}

.footer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.footer .logo-clube {
    max-width: 160px;
    height: auto;
    margin-left: 10px;
}

.footer .logo-folha {
  max-width: 312px;
  height: auto;
}

.footer-linha {
  border: 0;
  height: 1px;
  background-color: #9e482f;
  margin: 35px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 30px;
  margin-bottom: 40px;
}

.footer-col h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-col a:hover {
  opacity: 0.7;
}

.footer-redes {
  display: flex;
  gap: 12px;
}

.footer-redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.footer-redes svg {
  width: 16px;
  height: 16px;
}

.footer-contato {
  margin-bottom: 18px;
}

.footer-contato strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.footer-contato span {
    font-size: 14px;
    color: #ffffff;
}

.footer-horario p {
  font-size: 13px;
  margin: 0;
  color: #ffffff;
}

.footer-institucional p {
    font-size: 14px;
    color: #ffffff;
    line-height: 1.3;
}

.info-folha {
    margin-top: 40px;
}

.footer-institucional .link-sublinhado {
  text-decoration: underline;
  color: #e0e0e0;
}

.footer-legal {
  border-top: 1px solid #333333;
  padding-top: 30px;
}

.footer-legal p {
    font-size: 12px;
    color: #ffffff;
    margin: 0 0 6px 0;
    text-align: left;
    line-height: 1.2;
}



/* Utilitários de Visibilidade */
.hide-mobile { display: flex; }
.hide-desktop { display: none; }


/* =====================================================
   SPRITE
===================================================== */

.sprite {
  background-image: url('images/sprite.png');
  background-repeat: no-repeat;
  display: inline-block;
}

.sprite-folha-de-sao-paulo {
  width: 290px;
  height: 67px;
  background-position: -0px -5px;
}

.sprite-social-twitter {
  width: 35px;
  height: 35px;
  background-position: -0px -77px;
}

.sprite-social-instagram {
  width: 32px;
  height: 32px;
  background-position: -40px -77px;
}

.sprite-social-facebook {
  width: 32px;
  height: 32px;
  background-position: -77px -77px;
}


.sprite-social-whatsapp {
    width: 35px;
    height: 35px;
    background-position: -188px -77px;
}

.sprite-social-tiktok {
  width: 32px;
  height: 32px;
  background-position: -114px -77px;
}

.sprite-social-linkedin {
  width: 32px;
  height: 32px;
  background-position: -151px -77px;
}


/* Responsivo - Mobile */
@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 45px;
    margin-bottom: 20px;
  }

  .footer-header {
    justify-content: center;
    margin-bottom: 40px;
  }

  .hide-mobile { display: none !important; }
  .hide-desktop { display: block; }
  .footer-header.hide-desktop { display: flex; }

  .footer-redes {
    justify-content: center;
  }

  .footer-institucional {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-institucional .logo-folha {
    margin-bottom: 30px;
  }

  .footer-legal {
    border-top: none;
    padding-top: 10px;
  }
}




/* 6. Animações */


.logo-grid img {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.35s ease;
}

.logo-grid img:hover {
    transform: translateY(-3px) scale(1.025);
    filter: brightness(1.05);
}


/* =========================================
   HOVER DOS ÍCONES — PASSOS
========================================= */

@media (hover: hover) and (pointer: fine) {

    .steps li:hover img {
        animation: stepIconWiggle 0.45s ease-in-out;
    }

}


/* -----------------------------------------
   Chacoalhada sutil
----------------------------------------- */

@keyframes stepIconWiggle {

    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(-4deg);
    }

    40% {
        transform: rotate(3deg);
    }

    60% {
        transform: rotate(-2deg);
    }

    80% {
        transform: rotate(1deg);
    }

    100% {
        transform: rotate(0deg);
    }

}


.reveal {
    opacity: 1;
    transform: none;
}

.js .reveal {
    opacity: 0;
    transform: translateY(100px);
transition:
    opacity 1s ease,
    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}





/* Reveal dos logos dos parceiros */

.js .logo-reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .logo-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger */

.js .logo-reveal:nth-child(1) {
    transition-delay: 0s;
}

.js .logo-reveal:nth-child(2) {
    transition-delay: 0.06s;
}

.js .logo-reveal:nth-child(3) {
    transition-delay: 0.12s;
}

.js .logo-reveal:nth-child(4) {
    transition-delay: 0.18s;
}

.js .logo-reveal:nth-child(5) {
    transition-delay: 0.24s;
}

.js .logo-reveal:nth-child(6) {
    transition-delay: 0.30s;
}

.js .logo-reveal:nth-child(7) {
    transition-delay: 0.36s;
}

.js .logo-reveal:nth-child(8) {
    transition-delay: 0.42s;
}

.js .logo-reveal:nth-child(9) {
    transition-delay: 0.48s;
}

.js .logo-reveal:nth-child(10) {
    transition-delay: 0.54s;
}

.js .logo-reveal:nth-child(11) {
    transition-delay: 0.60s;
}

.js .logo-reveal:nth-child(12) {
    transition-delay: 0.66s;
}





/* Mobile: até 767px */
@media (max-width: 767px) {
    :root {
        --container-width: 97%;
        --section-space: 42px;
    }
    
    
    
#conteudo {
    display: flex;
    flex-direction: column;
    gap: 50px;
}    
    
    body {
        font-size: 16px;
    }
h1 {
    font-size: 33px;
}
    h2 {
        font-size: 32px;
    }
    p {
        font-size: 16px;
    }
    .hero {
        min-height: 660px;
    }
.hero-frame {
    inset: 14px 2.5% 4%;
}
    .hero-content {
        padding-top: 35px;
    }
    
    
.clube-logo {
    width: 130px;
}    
    
    
.hero-copy p {
    margin-bottom: 23px;
}    
    
    .menu-button {
        top: 62px;
    }
.hero-copy {
    top: 19%;
    width: min(100%, 360px);
    padding: 0 14px;
}
.hero-copy p {
    max-width: 315px;
    font-size: 17px;
    line-height: 1.2;
}
    
    
section#o-clube {
    margin-top: 50px;
}    

    .club-grid,
    .numbers-grid,
    .contact-box {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .club-copy {
        padding: 0 1%;
    }
    
    
.photo-frame--club {
    position: relative;
    width:auto; 
    max-width: 100%;
    overflow: visible;
}    
    
    
    .benefits-card {
        padding: 35px 7%;
    }
    .benefits-heading h2 {
        margin-bottom: 30px;
    }
.round-seal {
    right: -10px;
    width: 78px;
    height: 78px;
    top: 116px;
}
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 0%;
    }
.benefits-grid article, .benefits-grid article:first-child, .benefits-grid article:last-child {
    padding: 28px 0 14px;
    border: 0;
    border-top: 1px solid #a64b34;
}
    .benefits-grid article:first-child {
        border-top: 0;
    }
    .benefits-grid img {
        max-width: 300px;
    }

    .photo-frame--phone {
        height: auto;
        aspect-ratio: 1;
    }
    
    
 
    
.stats strong {
    font-size: 70px;
}
    
   
.photo-frame--phone::before {
    top: 42%;
}    
    
    
 
    
    .featured-cta {
        min-height: 190px;
    }
    .featured-cta h2 {
        font-size: 34px;
    }
.participation-card {
    grid-template-columns: 1fr;
    padding: 35px 7% 0;
}
    
.featured-cta {
    padding: 40px 20px;
}    
    
    
.photo-frame--partner {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 800 / 850;
}

.photo-frame--partner img {
    display: block;
    width: 100%;
    height: auto;
}
    
    
    
    .steps-copy h2 {
        font-size: 34px;
    }
    
    
    
    
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 30px;
    }

    /* 1. Aplica borda padrão em todos */
    .logo-grid img {
        
    min-height: 130px;
    padding: 14px 0;        
        
        border-top: 1px solid #bc5a40;
        border-left: 1px solid #bc5a40;
    }
    
    
    
  
    
    

    /* 2. FORÇA a volta da borda nos itens 3 e 4 (vencendo a regra do desktop) */
    .logo-grid img:nth-child(-n + 4) {
        border-top: 1px solid #bc5a40;
    }

    /* 3. Remove a borda do topo APENAS dos 2 primeiros (primeira linha mobile) */
    .logo-grid img:nth-child(-n + 2) {
        border-top: 0;
    }

    /* 4. Remove a borda esquerda de toda a coluna da esquerda (ímpares) */
    .logo-grid img:nth-child(odd) {
        border-left: 0;
    }

    /* 5. Garante a borda esquerda na coluna da direita (pares) */
    .logo-grid img:nth-child(even) {
        border-left: 1px solid #bc5a40;
    }
    
    
    
.testimonial-intro h2 {
    font-size: 38px;
}
    
    

.testimonial-card {
    grid-template-columns: 1fr;
    padding: 40px 5%;
    gap: 10px;
}
    .testimonial-slide {
        grid-template-columns: 1fr;
        gap: 20px;
    }
.testimonial-slide img {
    height: 270px;
}
    
article img {
    order: 2;
}    
    
.testimonial-slide blockquote {
    margin: -19px 0px 17px;
    font-size: 18px;
    line-height: 1.2;
}
 
.quote {
    margin: 25px 0 0;
}    
    
.testimonial-controls {
    right: 13%;
    bottom: 19px;
}
.contact-box {
    padding: 35px 6%;
}
    .faq-list {
        margin-top: 30px;
    }
    .faq-list button {
        padding: 11px 16px;
        font-size: 15px;
    }
    .footer-head {
        align-items: flex-start;
        gap: 25px;
    }
    .folha {
        font-size: 18px;
    }
    .footer-body {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .footer-body > p:first-child {
        grid-column: 1/-1;
    }

    
    
.footer-head {
    gap: 25px;
    display: flex;
    flex-direction: column;
}

.footer-clube {
    display: flex;
    flex-direction: column;
}


.footer-clube-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11%;
    padding-top: 65px;
}    
    
    
.footer-folha-info {
    padding-top: 10px;
}
    
.footer-folha {
    display: grid;
    grid-template-rows: 94px auto;
    margin-top: 35px;
}    
    
    
}
/* Tablet: 768px até 1199px */
@media (min-width: 768px) and (max-width: 1199px) {
    .club-grid {
        gap: 5%;
    }
    .participation-card {
        gap: 4%;
        padding: 45px;
    }
    .benefits-grid article {
        padding-inline: 7%;
    }
    .testimonial-card {
        grid-template-columns: 0.6fr 1.7fr;
    }
    .footer-body {
        gap: 4%;
    }
}
/* Desktop: 1200px até 1919px */
@media (min-width: 1200px) and (max-width: 1919px) {
    .hero-copy {
        left: 1%;
    }
    
    
    
    
    
}

/* Desktop: 1280px */
@media (min-width: 1200px) and (max-width: 1440px) {

    .club-grid {
        grid-template-columns: 690px minmax(0, 1fr);
        gap: 7%;
    }
    
.numbers-grid {
    grid-template-columns: 37% 55%;
    gap: 6%;
}    
    
.steps p {
    margin: 0;
    font-size: 16px;
}    

}


/* Desktop grande: a partir de 1920px */
@media (min-width: 1920px) {
    :root {
        --container-width: 88%;
        --section-space: 80px;
    }
    .hero-copy {
        left: 0.5%;
    }
    .hero-frame {
        inset: 3% 1.3% 5%;
    }
    
.scroll-down {
    bottom: 3%;
}    
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
    .round-seal {
        animation: none;
    }
    .floating-cta {
        transition: none;
    }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}