/*******************************************************
 * Swiper - Benefícios
 *******************************************************/
#beneficios {
    overflow: hidden;
}

/* 1. Container principal do Swiper */
.beneficios-swiper {
    position: relative;
    /* permite posicionar botões e paginação no contexto deste container */
    width: 100%;
    max-width: 1200px;
    /* ajuste se quiser limitar a largura */
    margin: 0 auto;
    /* centraliza horizontalmente */
    padding: 1rem 0;
    /* espaçamento vertical interno */
}

/* 2. Cada slide do Swiper (caso queira estilizar algo específico) */
.beneficios-swiper .swiper-slide {
    display: flex;
    /* se quiser centralizar internamente */
    justify-content: center;
    /* centraliza horizontalmente o card */
    align-items: center;
    /* centraliza verticalmente o card */
}

/* 3. A combo class do card (todos os cartões terão este estilo) */
.beneficios-card {
    background-color: #1e1e1e;
    /* cor de fundo do card */
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    margin: 0 auto;
    min-height: 350px;
    /* faz o card ocupar a largura do slide */
    max-width: none;
    /* se quiser limitar a largura máxima */
    box-sizing: border-box;
}

.beneficios-card img {
    max-width: 80px;
    /* ajuste conforme desejar */
    margin-bottom: 1rem;
}

.beneficios-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.beneficios-card p {
    font-size: 0.9rem;
    color: #ccc;
    /* texto secundário */
}

.beneficios-card:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}


/* 4. Botões de navegação */
.beneficios-swiper .swiper-button-prev,
.beneficios-swiper .swiper-button-next {
    color: #fff;
    /* cor do ícone da seta */
    width: auto;
    height: auto;
    /* Ajustes de posicionamento */
    top: 50%;
    transform: translateY(-50%);
    /* Se quiser aumentar/diminuir o tamanho do ícone, use font-size */
    font-size: 1.5rem;
    /* Aumenta z-index para ficar na frente de qualquer outro elemento */
    z-index: 10;
}

/* Distância horizontal */
.beneficios-swiper .swiper-button-prev {
    left: 00px;
    /* Ajuste horizontal para a esquerda */
}

.beneficios-swiper .swiper-button-next {
    right: 00px;
    /* Ajuste horizontal para a direita */
}

/* 5. Paginação */
.beneficios-swiper .swiper-pagination {
    /* Por padrão, o Swiper coloca a paginação no canto inferior;
       Se quiser reposicionar, defina manualmente: */
    bottom: -20px !important;
    /* força para o rodapé do container */
    text-align: center;
    z-index: 5;
    /* acima dos slides mas abaixo dos botões */
}

/* Estilo dos bullets/pontos da paginação */
.beneficios-swiper .swiper-pagination-bullet {
    background: #fff;
    /* cor normal */
    opacity: 0.6;
}

.beneficios-swiper .swiper-pagination-bullet:hover,
.beneficios-swiper .swiper-pagination-bullet-active {
    background: rgb(16, 81, 185);
    /* cor de destaque ao hover/ativo */
    opacity: 1;
}

/*******************************************************
 * Advisory Produtos
 *******************************************************/
.advisory-products {
    text-align: center;
    padding: 1rem;
    border: 1px solid #312e2e;
    border-radius: 8px;
    background-color: #1e1e1e;
}

.advisory-products:hover {
    transform: scale(1.1);
}
.advisory-products-icons {
    width: 50px;
    margin-bottom: 0.5rem;
    filter: invert(1);

}


.advisory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem;
}

/* Versão mobile: 1 item por linha */
@media (max-width: 768px) {
  .advisory-grid {
    grid-template-columns: 1fr;
  }
}

/*******************************************************
 * Advisory Contato
 *******************************************************/
.fade-text {
    transition: opacity 0.5s ease;
    opacity: 1;
}

.fade-text.fade-out {
    opacity: 0;
}

.fancy-text {
    font-weight: 700;
    font-size: xx-large;
    background: linear-gradient(90deg, #00FF99, rgba(7, 21, 209, 0.726), #15afcad0);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease infinite;
    text-shadow: 0 2px 10px rgba(255, 122, 0, 0.3);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}



/*******************************************************
 * Advisory Cards – Final Implementation
 *******************************************************/

/* 
   Container principal, 
   configurações gerais
*/
.CardImage_container__FgjDb {
    width: 100%;
    margin: 40px auto;
    padding: 20px;
    background: #f1f1f100;
    border-radius: 8px;
    position: relative;
  }
  
  .CardImage_container__FgjDb .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /*
     Lista de cards
     (flex nowrap, gap fixo)
  */
  .CardList_container___bk_T {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 16px !important;
    width: 100%;
    max-width: 100%;
    flex-direction: row; /* por padrão, é horizontal */
  }
  
  @media (max-width: 768px) {
    .CardList_container___bk_T {
      flex-direction: column;
      row-gap: 16px; /* substitui o column-gap no modo vertical */
      column-gap: 0 !important;
    }
  }

  .CardItem_container__bKrAC:hover {
    background:#5a5959;
    cursor: pointer;
  }
  /*
     Cada card container
     (default: width flex=1,
     expanded: flex=8, etc.)
  */
  .CardItem_container__bKrAC {
    flex: 1 1 0;
    transition: flex 0.3s ease, transform 0.3s ease;
    min-height: 480px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: flex; 
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    min-width: 0; /* evita overflow no flex */
    background-color: #1e1e1e;
  }


  .CardItem_container__bKrAC[data-state="expanded"] {
    flex: 8 1 0;
    z-index: 2;
    transform: scale(1.01);
  }
  
  .CardItem_container__bKrAC[data-state="retract"] {
    flex: 1 1 0;
    z-index: 1;
  }
  
  /* 
     Título 
     Usamos um contêiner separado 
     para poder mover no expand/retract 
  */
  .CardItem_titleContainer__custom {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    padding: 0 20px;
    transition: all 0.3s ease;
    z-index: 4;
    max-width: 100%;
    overflow: hidden;
    pointer-events: none; /* evita que interfira no clique */
  }
  
/* Default (no card is expanded): let them flow normally */
.CardList_container___bk_T:not([data-is-expanded="true"]) .CardItem_titleContainer__custom {
    position: relative;
    bottom: 80px;
    top: auto;
    /* Possibly remove left/right, etc. */
    padding: 20px;
    margin: 10px;
    /* any margin, etc. you need */
  }
  
  .CardList_container___bk_T:not([data-is-expanded="true"]) .CardItem_descriptionContainer__custom {
    position: relative;
    bottom: 50px;
    top: auto;
    margin-top: 1rem; /* so it sits right below the title */
  }
  
  .CardList_container___bk_T[data-is-expanded="true"]
  .CardItem_container__bKrAC[data-state="retract"] .CardItem_titleContainer__custom {
  /* keep position: absolute if you want it pinned, but move it to bottom */
  position: absolute;
  bottom: 50px;
  left: 20px;
  right: 20px;
  writing-mode: vertical-lr; /* or remove this line entirely */
  transform: rotate(-180deg); /* or remove this line entirely */
  text-align: left; /* or center, as you prefer */
}
  
  /* Expandido (move para o topo) */
  .CardList_container___bk_T[data-is-expanded="true"] 
    .CardItem_container__bKrAC[data-state="expanded"] .CardItem_titleContainer__custom {
    top: 20px;
    bottom: auto;
    writing-mode: horizontal-tb;
    transform: none;
    text-align: left;
  }
  
  /* Estilo do H3 do título */
  .CardItem_title__owHt7 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    color: var(--brand-color); 
    transition: all 0.3s ease;
  }
  
  /*
     Descrição 
     (fica no rodapé do card)
  */
  .CardItem_descriptionContainer__custom {
    position: absolute;
    bottom: 50px; 
    left: 20px; 
    right: 20px;
    z-index: 3;
    color: #fff;
    transition: all 0.3s ease;
  }
  
  /* Esconde descrição no Retract */
  .CardList_container___bk_T[data-is-expanded="true"] .CardItem_container__bKrAC[data-state="retract"] .CardItem_descriptionContainer__custom {
    display: none;
  }
  
  /* Mostra descrição no Expand */
  .CardList_container___bk_T[data-is-expanded="true"] .CardItem_container__bKrAC[data-state="expanded"] .CardItem_descriptionContainer__custom {
    display: block;
  }
  
  /* Texto da descrição */
  .CardItem_description__Yq7ff {
    font-size: 0.95rem;
    line-height: 1.4;
    margin: 10px;
  }
  
  /*
     Botão +/-
     no canto superior direito
  */
  .SwapIcon_noCircle__custom {
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    transition: transform 0.3s;
  }
  
  .SwapIcon_noCircle__custom[data-state="expanded"]::before {
    content: '-';
  }
  
  .SwapIcon_noCircle__custom[data-state="retract"]::before {
    content: '+';
  }
  
  .SwapIcon_noCircle__custom:hover {
    transform: scale(1.2);
  }
  
  /*
     Conteúdo expansível
     (aparece ao expandir)
  */
  .CardItem_content__gyj4W {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 1);
    color: #333;
    padding: 15px;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    z-index: 8;
    opacity: 0;
  }
  
  .CardItem_container__bKrAC[data-state="expanded"] .CardItem_content__gyj4W {
    min-height: 400px;
    opacity: 1;
    overflow-y: auto;
  }
  
  /*
     Exemplo de overlay, caso queira 
     colocar algo sobre toda a imagem 
     (opcional)
  */
  .CardItem_headOverlay__o1Y0B {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: background-color 0.4s ease;
    z-index: 2;
  }
  
  /*
     Tópicos no conteúdo expansível 
  */
  .TopicList_container__5mjSy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .TopicList_topic__AbVZq h3 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: #333;
  }
  
  .TopicList_description__il0jQ {
    font-size: 0.88rem;
    line-height: 1.4;
  }


    /* Bank partner cards styling */
  .bank-card {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    height: 350px; /* Fixed height for all cards */
  }
  
  .bank-logo-container {
    height: 120px; /* Fixed height for logo area */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  .bank-logo-container img {
    max-width: 280px;
    max-height: 100px; /* Constrain logo size */
    object-fit: contain; /* Maintain aspect ratio */
  }
  
  .bank-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  
  .bank-content h3 {
    margin-bottom: 0.5rem;
  }
  
  .bank-contact {
    margin-top: 0.8rem;
  }
  
  .coming-soon {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .coming-soon h2 {
    font-size: 40px;
    color: white;
  }