/* --- Cores pré-definidas */
:root{
  --navy-blue: #1B1B85; 
  --md-blue:#003C99;
  --white-blue: #EFF6FF;
  --light-blue: #D7EFFF;
  --light-md-blue: #EEF2FF;
  --ligth-blue-2:#477BC7;
  --live-blue: #0051C1;
  --blue-purple: #4F39F6;
  --gray: #646D7A;
  --dark-gray: #545F6E;
  --gold: #DBB874;
  --green: #42BF70;
  --strong-green:#00A63E;
  --light-green: #B9F8CF;
  --light-green-2: #F0FDF4;
  --live-green: #7BF1A8;
  --light-red: #FEF2F2;
  --red: #E7000B;
  --light-purple: #F3E8FF;
  --purple: #9810FA;
  --transparent-purple: #505EF9;
  --dark-purple:#59168B;
  --orange: #F54900;
  --brown: #794714;
  --light-yellow: #FEFCE8;
  --strong-yellow: #D08700;
  --yellow: #FFF085;
}

/* Backgrounds Primários*/
.brand-primary{
    background-color: #FFF;
}
.brand-secondary{
    background-color: #CAAD68;
}

/* Cores primárias */
.text-brand-primary{
    color: #1F3C55;
}
.text-brand-secondary{
    color: #CAAD68;
}

/* Fontes */
.fw-m-sm { font-weight: 500; }

.fw-sm { font-weight: 600; }

.fw-low { font-weight: 400; }

.fs-xl { font-size: 24px;}

.fs-m  { font-size:14px; }

.fs-sm {font-size: 12px; }

.fs-md { font-size: 18px;}

.fs-l  { font-size: 20px; }

@media (max-width: 992px) { .fs-l { font-size: 16px; } }

@media(max-width: 480px){
  .fs-mob-l {font-size: 16px;}
  .fs-mob   { font-size: 14px;}
  .fs-mob-2 {font-size: 12px;}
  .fs-sm    {font-size: 10px; }
  .title-mob-1 {font-size: 22px;}
  .title-mob-2 {font-size: 20px;}
  .title-mob-3 {font-size: 18px;}
  .title-mob-4 {font-size: 16px;}
  .title-mob-5 {font-size: 14px;}
  .title-mob-list {font-size: 15px;}
}


.font-calibri{ font-family: calibri; }

.bg-gradient-blue { background: linear-gradient(180deg, #0a5bd8 0%, #063a86 100%); }

/* Botões */
.btn{ transition: all .25s ease-in-out; }

/* Cores de fundo */
.bg-white{
  background-color: #ffffff;
}
.bg-white-blue{
  background-color: var(--white-blue);
}
.bg-light-blue {
  background-color: var(--light-blue);
}
.bg-light-blue-sec{
  background-color: #ECF7FF;
}
.bg-light-green{
  background-color: #F0FDF4;
}
.bg-light-purple{
    background: var(--light-purple); 
}
.bg-light-red{
  background-color: #FEF2F2;
}
.bg-live-blue{
  background-color: var(--live-blue);
}
.bg-gold{
  background-color: var(--gold);
}
.bg-green{
  background-color: var(--green);
}
.bg-strong-green{
  background-color: var(--strong-green);
}
.bg-purple{
  background-color: var(--purple);
}
.bg-light-yellow{
  background-color: var(--light-yellow);
}
/* backgrounds (usando suas variáveis) */
.bg-light-md-blue{ 
  background: var(--light-md-blue);
}
.bg-blue-purple{ 
  background: var(--blue-purple);
 }
 .bg-transparent-purple{
  background-color: var(--transparent-purple);
 }

/* accent da borda esquerda */
.accent-blue-purple{ --accent: var(--blue-purple); }


/* Cor de borda */
.border-green{
  border: solid 1px #73C788;
}
.border-gold{
  border: solid 1px var(--gold);
}
.border-light-gray{
  border: solid 1px #D9E7F8;
}
.border-light-green{
  border: solid 1px var(--light-green) !important;
}
.border-light-purple{
  border: rgba(152, 16, 250, 0.20) solid 1px !important;
}
.border-live-blue{
  border: solid 1px #155DFC;
}
.border-light-blue{
  border: solid 1px #C4E4FF;
}
.border-light-red{
  border: solid 1px #FFE3E3;
}
.border-live-green{
  border: solid 1px var(--live-green);
}
.border-purple-blue{
  border: solid 1px #717FFA;
}
.border-2-live-green{
  border: solid 2px var(--live-green);
}
.border-2-light-green{
  border: solid 2px var(--light-green) !important;
}
.border-2-light-purple{
  border: rgba(152, 16, 250, 0.20) solid 2px !important;
}
.border-2-live-blue{
  border: solid 2px #155DFC;
}
.border-2-light-blue{
  border: solid 2px #C4E4FF !important;
}
.border-yellow{
  border: solid 1px var(--yellow);
}
.border-2-yellow{
  border: solid 1px var(--yellow);
}

/* Textos */
.text-gray{
  color: var(--gray);
}
.text-blue-purple{
   color: var(--blue-purple); 
}
.text-dark-gray{
  color:var(--dark-gray);
}
.text-medium-blue{
  color: #003C99;
}
.text-navy-blue{
  color: var(--navy-blue);
}
.text-live-blue{
  color: #155DFC;
}
.text-purple{
  color: var(--purple);
}
.text-dark-purple{
  color: var(--dark-purple);
}
.text-orange{
  color: var(--orange);
}
.text-green{
  color: #42BF70;
}
.text-green-2{
  color: rgb(46, 221, 46);
}
.text-light-blue{
  color: #C4E4FF;
}
.text-secondary-color {
    color: #3392FF;
}
.text-red{
  color: var(--red);
}
.text-gold{
  color: var(--gold);
}
.text-brown{
  color: var(--brown);
}
.text-strong-yellow{
  color: var(--strong-yellow);
}
.text-light-yellow{
  color: var(--light-yellow);
}

/* Arredondamento de bordas */
.rounded-xl{
  border-radius: 24px;
}
.rounded-l{
  border-radius: 16px;
}
.rounded-m{
  border-radius:12px;
}
.rounded-sm{
  border-radius:8px;
}
.rounded-top-m{
  border-radius: 12px 12px 0px 0px;
}
.rounded-bottom-m{
  border-radius: 0 0 1rem 1rem;
}

.gradient-blue-to-green{
  background: linear-gradient(to right, var(--live-blue), var(--green));
}

.gradient-green-to-blue{
  background: linear-gradient(to right, var(--green), var(--live-blue));
}

.card-round{
  border-radius: 1rem;
  overflow: hidden;
}
.my-7{
  margin: 7rem 0;
}

.banner {
  height: auto;
  padding: 1.5em 0.5em;
}

.step-bubble{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700; /* fw-bold */
}

@media (max-width: 767.98px){
  .step-bubble{
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
}

/* === Estilização da Home Page === */

.nav-a{
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;   /* parecido com nav-link */
  text-decoration: none;
  color: var(--live-blue);
}

.nav-a:hover{
  opacity: .85;
}

.nav-a.active,
.nav-a[aria-current="page"]{
  font-weight: 600;
}

/* --- Banner em azul com gradiente ---*/
#home-banner {
  height: auto;
  min-height:50vh;
  padding: 1.5em 0.5em;
}

#home-banner .office {
  /* border: 1px solid red; */
  background-image: url('../images/office-images/creatif1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-position: 90%;
}

#home-banner{
  /* min-height: 50vh;          opcional */
  padding-bottom: 3rem;         /* ajuda a não encostar no footer */
  background: linear-gradient(180deg, #0a5bd8 0%, #063a86 100%);
} 

#home-banner .banner-card{
  background: rgba(255, 255, 255, 0.08);
  border: solid 2px var(--ligth-blue-2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  backdrop-filter: blur(8px);
  border-radius: 1em;
}

.btn-primary-homma{
  background: #3392FF;
  border: 1px solid transparent;
  color: #fff;
}
.btn-primary-homma:hover{
  background:#1F7FF5;
  border-color: #fff;
}

/* Botão Simular Ganhos*/
.btn-simular{
  border: 1px solid transparent; 
  color: #3392FF;
  background-color: #fff;
}
.btn-simular:hover{
  background: #e9ecef;
  border-color:  rgb(46, 221, 46);
  color: rgb(46, 221, 46);
}

/* Botão do simulador */ 
.btn-outline-navy{
  color: var(--live-blue) ;
  border-color: var(--live-blue) ;
  background: transparent ;
}

.btn-outline-navy:hover,
.btn-outline-navy:focus{
  background: var(--live-blue) ;
  border-color: lightgray ;
  color: #fff ;
}

/* Cards de desempenho dos Brokers*/
.kpi-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  transition: background .2s ease;
}
.kpi-card:hover{ background: rgba(255,255,255,.12); }

.kpi-icon{ background: rgba(255,255,255,.14); }
.kpi-delta{ color:#7CFFB0; }

/* <=== Slider ===> */
.arrow:hover{
  background-color: var(--light-blue);
}

.homma-slider{
  position: relative;
  border-radius: 16px;
  padding: 34px 22px 22px;
  background: #fff;
  
  width: 100%;               
  max-width: 1050px;         
  margin: 0 auto;
  box-sizing: border-box;    
}

.hs-track{
  position: relative;
  min-height: 190px;  /* garante “altura” parecida com o figma do projeto*/
}

.hs-slide{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;         /* centraliza o conteúdo dentro do slide */
  text-align: center;
  opacity: 0;                  /* invisivel */
  transform: translateY(2px);
  transition: opacity .25s ease, transform .25s ease; /* fade entre os slides */
  padding: 0 18px;             /* margem lateral para o texto encostar nas bordas */
  pointer-events: none;
}

.hs-slide.is-active{
  opacity: 1;                   /* visível */
  transform: translateY(0);
  pointer-events: auto;
}

.hs-icon{
  font-size: 44px;     
  line-height: 1;
  margin-bottom: 14px;
}

.hs-title{
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
}

.hs-text{
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
  max-width: 820px;
  font-weight: 500;
}

/* ===== Setas “flutuantes” ===== */
.hs-arrow{
  position: absolute;
  top: 50%;                  
  transform: translateY(-50%);
  width: 44px;                   /* tamanho do círculo */
  height: 44px;
  border-radius: 999px;          /* deixa o círculo redondo */
  border: 2px solid #C4E4FF;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;           /* centraliza o símbolo <> dentro do círculo */

  /* Cor da seta */
  color: #4070B7;
  font-size: 28px;
  line-height: 1;

  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

.hs-prev{ left: -22px; }
.hs-next{ right: -22px; }

.hs-arrow:hover{
  transform: translateY(-50%) scale(1.03);
  transition: 0.2s ease-in-out;
}

.hs-arrow:active{
  transform: translateY(-50%) scale(.98);
}

/* ===== Dots do Slider ===== */
.hs-dots{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.hs-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px; /* cria o círculo que fica em volta da seta */
  border: 0;
  background: rgba(64,112,183,.30);
  cursor: pointer;
  padding: 0;
  transition: width .2s ease, background .2s ease, opacity .2s ease;
}

.hs-dot.is-active{ 
  width: 28px; 
  background: #4070B7;
}

/* Responsividade */
@media (max-width: 600px){
  .homma-slider { padding: 28px 16px 18px; }
  .hs-title{ font-size: 22px; }
  .hs-text { font-size: 14px; }
  .hs-prev { left: -14px; }
  .hs-next { right: -14px; }
  .hs-dots { margin-top: 2em; }
}

/* Texto de cadastro próximo ao footer*/
.cta-text{
  max-width: 750px; 
  margin: 0 auto;     
}




/* Estilização de FAQ - Lista de perguntas e respostas */
details{
  border-radius: .7em;
}

details summary{
  color: var(--navy-blue);
  font-weight: 500;
}

details span:hover{
  text-decoration-line: underline;
}

details p{
  margin-top: 1rem;
  color: var(--dark-gray);
  font-weight: 500;
}

details > summary {
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] summary i {
  transform: rotate(180deg);
}

details summary i {
  transition: transform .2s ease;
}

textarea{
  resize: none;
}

footer li:hover{
  color: #ffffff;
}