@charset "utf-8";
/* CSS Document */

/* === MINI-BS LITE === */
*,*::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;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}p{margin-top:0;margin-bottom:1rem}ul,ol{margin-top:0;margin-bottom:1rem;padding-left:2rem}a{color:#0d6efd;text-decoration:underline}img,svg,video{max-width:100%;height:auto;display:block}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button{cursor:pointer}hr{margin:1rem 0;border:0;border-top:1px solid #dee2e6}.container,.container-fluid{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}@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}}.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:.75rem;padding-left:.75rem}.col{flex:1 0 0%}.col-auto{flex:0 0 auto;width:auto}.col-12{flex:0 0 auto;width:100%}.col-6{flex:0 0 auto;width:50%}@media(min-width:768px){.col-md-6{flex:0 0 auto;width:50%}.col-md-4{flex:0 0 auto;width:33.3333%}.col-md-5{flex:0 0 auto;width:41.6667%}.col-md-7{flex:0 0 auto;width:58.3333%}.col-md-12{flex:0 0 auto;width:100%}.d-md-flex{display:flex!important}.flex-md-row{flex-direction:row!important}}@media(min-width:992px){.col-lg-6{flex:0 0 auto;width:50%}.col-lg-4{flex:0 0 auto;width:33.3333%}.col-lg-3{flex:0 0 auto;width:25%}}.d-flex{display:flex!important}.d-none{display:none!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.text-center{text-align:center!important}.fw-medium{font-weight:500!important}.fw-bold{font-weight:700!important}.text-white{color:#fff!important}.w-100{width:100%!important}.overflow-hidden{overflow:hidden!important}

/* === TOKENS === */
:root {
  --marrom-escuro: #582915;    
  --creme: #ece6d5;    
    
  --destaque: #eb6546;
    
  --vermelho-hover: #a93226;
  --dourado: #d8b12e;
  
  --creme-escuro: #f5ead6;
  --texto: #2c2c2c;
  --texto-suave: #5a5a5a;
  --borda: #e0d3c0;
  --fonte-titulo: 'georgiapro-condensed', Georgia, serif;
  --fonte-subtitulo: 'poppins', arial, sans-serif;
}


a:hover {
 background: var(--destaque);
}

p{font-size:17px; line-height: 1.2;}

.px-2 {
    padding: 0px 30px;
}

/* === BASE === */
body { color: var(--texto); background: var(--creme); }

.img-fluid{max-width: 100%; height: auto; margin: 0 auto;}
.cor-creme{color:var(--creme); }
.cor-destaque{color:var(--destaque); }
.cor-dourado{color:var(--dourado); }
.width-760{width:760px; margin: 0 auto;}

.btn {
    background: var(--dourado);
    padding: 25px 40px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--marrom-escuro);
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    width: 330px;
    margin: 0 auto;
}

/* === HEADER / HERO === */

.hero {
    position: relative;
    min-height: 720px;
    padding: 60px 0;
    background: url("images/hero-bg.jpg") center / cover no-repeat;
    isolation: isolate;
}


.logos {
    display: flex;
    flex-direction: row;
    align-content: center;
    /* height: 267px; */
    flex-wrap: nowrap;
    align-items: center;
    gap: 30px;
}


.logos img {
    height: fit-content;
}

.hero-content {
    display: flex;
    width: 520px;
    flex-direction: column;
    justify-content: center;
    height: 620px;
}

.hero-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 5vw, 36px);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.15;
}
.hero-titulo span { color: var(--dourado); }
.hero-subtitulo {
    font-size: 21px;
    color: rgba(255,255,255,.82);
    margin-bottom: 20px;
    max-width: 440px;
    line-height: 1.3;
}
.hero-data {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 2rem;
}





/* === SECTION BASE === */

.ptb{padding:35px 0;}
.pt{padding:35px 0 0;}
.pb{padding:0 0 35px;}


.section-creme { background: var(--creme); }
.section-escura { background: #1a0a00; color: #fff; }

.section-label {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: .5rem;
}
.section-titulo {
    font-family: var(--fonte-titulo);
    font-size: clamp(28px, 4vw, 45px);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 11px;
    font-style: italic;
}
.section-subtitulo {
  font-size: 1rem;
  color: var(--texto-suave);
  max-width: 560px;
  margin: 0 auto 2.5rem;
}



.intro h3 {
    font-size: 23px;
}


/* === SECTION RECEBE === */
section.section.recebe { 
    width: 90%;
    margin: 0 auto;
    border-radius: 8px;
    text-align: center;
}

.icone {
    margin: 0 auto;
    border: 2px solid #ece6d57a;
    border-radius: 100px;
    padding: 18px;
    margin-bottom: 20px;
}


.card-recebe {
    border-radius: .75rem;
    padding: 15px;
    height: 100%;
    color: var(--creme);
}

/* === CARDS RECEBE === */


.card-recebe h3 {
    font-family: var(--fonte-subtitulo);
    font-size: 18px;
    font-weight: 700;
    color: var(--creme);
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 2px;
}
.card-recebe p {
    color: var(--creme);
    margin: 0;
}

/* === DESTAQUES === */


.destaques {
    background-color: var(--marrom-escuro);
    background: url('images/texture.jpg');
    width: 90%;
    margin: 0 auto;
    border-radius: 8px;
    text-align: center;
}

.card-destaque {
    /* background-color: var(--marrom-escuro); */
    border-radius: .75rem;
    padding: 1.5rem;
    height: 100%;
    margin: 0 auto;
    border: 2px solid #ece6d563;
}


.card-destaque img {
    margin-top: -60px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.card-destaque-titulo {
    font-family: var(--fonte-titulo);
    font-size: 20px;
    font-weight: 700;
    color: var(--creme);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.card-destaque p {
    color: var(--creme);
    margin: 0;
}


.section-border {
    border: 1px solid var(--marrom-escuro);
    border-radius: 10px;
    padding: 30px 40px;
}

/* === CLUBE === */
.clube-badge {
  display: inline-block;
  background: var(--dourado);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 2rem;
  margin-bottom: 1rem;
}
.clube-desconto {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  color: var(--vermelho);
  line-height: 1;
  margin-bottom: .25rem;
}
.beneficio-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--borda);
}
.beneficio-item:last-child { border-bottom: none; }
.beneficio-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.beneficio-titulo {
    font-family: var(--fonte-subtitulo);
    font-weight: 700;
    font-size: 22px;
    margin-bottom: .2rem;
    color: var(--marrom-escuro);
}
.beneficio-desc {
  font-size: .875rem;
  color: var(--texto-suave);
  margin: 0;
}

/* === PARA VOCÊ SE === */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
    padding: .875rem 0;
    border-bottom: 1px solid var(--borda);
    font-size: 17px;
    line-height: 1.2;
}
.check-list li:last-child { border-bottom: none; }
.check-list li::before {
  content: '✓';
  color: var(--destaque);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

/* === FAQ === */
.faq-item {
  border-bottom: 1px solid var(--borda);
  overflow: hidden;
}
.faq-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: var(--creme);
    background: var(--marrom-escuro);
}
.faq-btn:hover {
    color: var(--destaque);
}
.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--creme-escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s;
}
.faq-btn[aria-expanded="true"] .faq-icon { background: var(--vermelho); }
.faq-icon svg {
  width: 14px;
  height: 14px;
  overflow: visible;
}
.faq-icon-bar {
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s;
  transform-origin: center;
}
    
/* === FAQ ICON — substituir o bloco anterior === */
.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--creme-escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s;
}
.faq-btn[aria-expanded="true"] .faq-icon {
  background: var(--vermelho);
}
.faq-icon svg {
    width: 14px;
    height: 14px;
    overflow: visible;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    color: var(--destaque);
}
/* rotaciona o SVG inteiro — + vira × */
.faq-btn[aria-expanded="true"] .faq-icon svg {
  transform: rotate(45deg);
}
.faq-icon-bar {
  transition: stroke .25s;
}
.faq-btn[aria-expanded="true"] .faq-icon svg line {
  stroke: #fff;
}
    
    
    
    

.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1);
}
.faq-body.open { grid-template-rows: 1fr; }
.faq-body-inner {
  overflow: hidden;
}
.faq-body-inner p {
    padding-bottom: 1.25rem;
    font-size: .95rem;
    color: var(--creme);
    margin: 0;
    background: var(--marrom-escuro);
    padding: 10px 20px;
}
    
    
    

/* === CTA FINAL === */
.cta-final {
  background: linear-gradient(160deg, #1a0a00 0%, #3b1a08 50%, #1a0a00 100%);
  padding: 4rem 0;
  color: #fff;
}
.cta-final .section-titulo { color: #fff; }
.cta-final .section-subtitulo { color: rgba(255,255,255,.75); }
.cta-final .form-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: none;
  max-width: 480px;
  margin: 0 auto;
}
.cta-final .form-card-titulo { color: #fff; }
.cta-final .form-input {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
  color: #fff;
}
.cta-final .form-input::placeholder { color: rgba(255,255,255,.5); }
.cta-final .form-input:focus { border-color: var(--dourado); }

/* ========================================
   FOOTER
======================================== */
#copyrights {
    background: var(--marrom-escuro);
    color: #fff;
    padding: 44px 0;
    margin: 0 auto;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 28px;
}


.rodape-logos {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.footer-brand img {
    margin-bottom: 22px;
    max-width: 45%;
    height: auto;
}

#copyrights p {
  margin: 0 0 10px;
  color: #d9d9d9;
  font-size: 15px;
  line-height: 1.35;
}

#copyrights h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.social-icons {
    display: flex;
    gap: 19px;
    margin-bottom: 20px;
}

.social-icons a {
  color: #fff;
  text-decoration: none;
}

.social-icons a:hover {
  color: #9cc8ff;
}

/* === HELPERS LOCAIS === */
.gap-y-1 { row-gap: .5rem; }
.gap-y-3 { row-gap: 1rem; }
.gap-y-4 { row-gap: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mx-auto { margin-right: auto; margin-left: auto; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.px-3 { padding-right: 1rem; padding-left: 1rem; }



/* =========================================================================
   BANNER FIXO
   ========================================================================= */
.fixed-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.fixed-banner.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.fixed-banner-inner {
    background: #002246;
    color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    max-width: 350px;
}

.fixed-banner-inner img {
    border-radius: 7px;
}




@media (max-width: 767px) {
   
.width-760 {
    width: 100%;
}  
    
    
.gap-y-3 {
    row-gap: 0.25rem;
}   
    
    
.beneficio-item {
    padding: 0.5rem 0;
}    
    
    
.hero-content {
    height: 600px;
}    
    
.hero {
    background: url("images/hero-bg-mobile.jpg") center / cover no-repeat;
    min-height: 641px;    
    padding: 10px 13px;
}  
    
    
    
.logos {
    gap: 15px;
    max-width: 53% !important;
}    
    
.card-2 {
    margin: 50px 0 35px;
}  
    
.section-border {
    padding: 30px 20px;
    width: 95%;
    margin: 0 auto;
}  
    
.intro h2 {
    font-size: 35px;
    line-height: 1.1;
}    
    
    
.footer-inner {
    grid-template-columns: 1fr;
}
    
#copyrights {
    padding: 44px 30px;
} 
    
    
    
    .fixed-banner {
        right: auto; /* Remove o alinhamento à direita */
        left: 50%; /* Joga o início do banner para o exato meio da tela */
        
        bottom: 12px;

        /* O -50% no eixo X puxa o banner de volta pela exata metade da largura dele */
        /* O 20px no eixo Y mantém a sua animação original de entrada */
        transform: translate(-50%, 20px); 

        width: max-content; /* Faz o banner abraçar o tamanho do conteúdo */
        max-width: 92%; /* Margem de segurança para não encostar nas bordas da tela */
    }

    /* É obrigatório atualizar a classe .visible no mobile para não perder a centralização */
    .fixed-banner.visible {
        transform: translate(-50%, 0);
    }    
    
}




@media (min-width: 1800px) {
    .container{max-width:1360px;}
    
section.section.recebe {
    width: 80%;
}   
    
}