/*pagina inicial*/
/*img topo*/
.esfumacado-container {position: relative; display: block; max-width: 100%; margin-top:65px;}

.esfumacado-container img {display: block; width: 100%; height: 200px; padding-top:3px;}

.esfumacado-overlay {position: absolute; top: 50%; right: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, rgba(238, 236, 229, 0) 0%, rgba(238, 236, 229, 1) 100%);}

.container_txt_topo{background-color:#EEECE5; width:100%; height:250px; float:right; margin-top:0px; padding-bottom:0px;}
.txt_topo_um{width:90%; float:left; color:#333333; text-align:center; font-family: 'Merriweather', serif; font-size:25px; font-weight:bold; margin-top:30px; margin-left:5%;}
.cor_txt_north{color:#263A51; font-size:30px;}
.txt_topo_dois{width:90%; float:left; color:#515251; text-align:center; font-family: 'Merriweather', serif; font-size:20px; font-weight:bold; margin-top:30px; margin-left:5%;}

/*calculadoras_investimentos*/
.container_calculadoras_investimentos{width:100%; height:auto; float:left; margin-top:0px; margin-bottom:5px;}

.corpo_calculadoras_investimentos{background-color:#ffffff; width:80%; height:autuo; float:left; margin-left:10%; margin-right:0%; border-radius:5px; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2); margin-top:20px;} 
.img_calculadora_investimentos{background: linear-gradient(#4facfe, #054ead); width:100%; height:250px; float:left; border-radius:5px 0px 0px 5px; overflow: hidden;} 
.img_calculadora_investimentos img{opacity: 0.8; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;} 
.corpo_calculadoras_investimentos:hover .img_calculadora_investimentos img {transform: scale(1.2);}
.titulo_calculadora_investimentos{width:90%; height:auto; float:left; text-align:center; color:#363636; font-size:15px; font-weight:bold; margin-left:5%; margin-top:3px;}
.texto_calculadora_investimentos{width:90%; height:auto; float:left; text-align:center; color:#363636; font-size:13px; margin-left:5%; margin-top:5px; margin-bottom: 20px;}

/*ferramentas*/
/*ferramentas*/
.container_ferramentas_index{width: 80%; height: auto; float: left; gap:15px; display: block; margin-left: 10%; margin-top: 20px; justify-content: center;}
.corpo_ferramentas_index{width: 100%; height: 200px; float: left; border-radius: 5px; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2); margin-top: 10px;}
.corpo_ferramentas_index:hover{opacity: 0.8; scale: 1.01; transition: all 0.5s ease-in;}
.link_ferramentas_index{width: 100%; height: 100%; float: left; color: #FFFFFF; font-size: 15px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; display: flex; justify-content: center; align-items: center;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*pagina menu investimentos*/
.topo_paginas_menus{background-color:#1C334C; width:100%; height:auto; float:left; text-align:center; box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.6);  padding-top:20px; padding-bottom:20px;}
.titulo_paginas_menus{color:#FFFFFF; font-size:30px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}

.container_selecao_paginas_menus{width:95%; height:auto; float:left; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2); border-radius:10px; border-top: 3px #1C334C solid; padding-bottom:20px; padding-top:20px; margin-left:2.5%; margin-top:15px; margin-bottom:10px;}
.selecao_paginas_menus{width:90%; height:auto; float:left; border:1px solid #8f8f8f; border-radius:10px; margin-left:5%; margin-right:5%; margin-top:15px;}

.containner_busca_investimento {float: left; width: 100%; margin-top: 10px; display: flex; justify-content: center; }
.input_investimento{width: 80%; height: 35px; float: left; border: 1px solid #1C334C; border-radius: 5px; padding-left: 10px;} 
.btn_voltar_investimentos{display: none; background-color: #1C334C; width: auto; height: auto; float: left; color: #FFFFFF; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 10px; margin-left: 5px; margin-top: 0px; border-radius: 5px; cursor: pointer;}
.btn_voltar_investimentos:hover{background-color: #054ead; transition: all 0.5s ease-in;}

.img_paginas_menus{background:#000000; width:100%; height:200px; float:left; border-radius:10px 10px 0px 0px; overflow: hidden;} 
.img_paginas_menus img{opacity: 0.8; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;} 
.selecao_paginas_menus:hover .img_paginas_menus img{transform: scale(1.2);}

.nome_paginas_menus{width:95%; height:auto; float:left; text-align:center; font-size:18px; font-weight:bold; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; color:#333333; margin-left:2.5%; margin-top:5px; display: flex; align-items: center; justify-content: center;}
.descricao_paginas_menus{width:95%; height:50px; float:left; text-align:center; font-size:15px; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; color:#333333; margin-left:2.5%; margin-top:5px; margin-bottom:5px;}
.btn_paginas_menus{background-color:#1C334C; width:100%; height:auto; float:left; text-align:center; color:#FFFFFF; font-size:15px; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif;  padding-bottom:10px; padding-top:10px; border-radius:0px 0px 5px 5px;}
.selecao_paginas_menus:hover .btn_paginas_menus{background-color:#054ead;  transition:all 0.5s ease;}
.selecao_paginas_menus:hover{box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2); transition:all 0.5s ease;} 

.container_escolha_invest{width: 80%; height: auto; float: left; display: block; justify-content: center; align-items: center;  margin-left:8%; margin-top: 10px; margin-bottom: 10px;}
.btn_escolha_invest{width: 100%; height: auto; font-family: Arial, Helvetica, sans-serif; font-size: 15px; text-align: center; text-transform: uppercase; color: #1C334C; float: left; padding: 10px;  margin-top: 5px; margin-bottom: 5px; margin-left: 0px; margin-right:0px; border-radius: 5px; cursor: pointer; border: 1px solid #1C334C;}
.btn_escolha_invest:hover{background-color: #1C334C; color: #FFFFFF; transition:all 0.5s ease;}

.titulo_escolha_invest{width: 100%; height: auto; float: left; color: #1C334C; font-size: 30px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; padding-bottom: 15px; margin-bottom: 15px; box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.6);}
.breve_explicacao_investimento{width: 90%; height: auto; float: left; color: #363636; font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-align: center; margin-left: 5%; margin-bottom: 15px;}

.ativo {background-color: #1C334C !important; color: #ffffff !important;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*perfil investidor*/

:root {--primary: #10b981; --primary-dark: #059669; --bg: #f8fafc; --text: #334155; --card-bg: #ffffff;}

.centraliza_perfil{font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: auto; margin: 0; padding: 20px;}

#quiz-container {background: var(--card-bg); float: left; padding: 2rem; border-radius: 1.25rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); width: 90%; max-width: 600px; margin-top: 25px; border-top: 3px solid #1C334C;}

.progress-bar {height: 6px; background: #e2e8f0; border-radius: 10px; margin-bottom: 2rem; overflow: hidden;}

#progress {height: 100%; background: var(--primary); width: 20%; transition: width 0.4s ease;}

.step { display: none; animation: slideIn 0.3s ease-out; }
.step.active { display: block; }

@keyframes slideIn {
            from { opacity: 0; transform: translateX(10px); }
            to { opacity: 1; transform: translateX(0); }
        }

h2 { font-size: 1.25rem; margin-bottom: 1.5rem; line-height: 1.4; color: #1e293b; }

.options { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }

.input_perfil[type="radio"], input[type="checkbox"] { display: none; }

.label_perfil {padding: 1rem; border: 2px solid #e2e8f0; border-radius: 0.75rem; cursor: pointer; transition: all 0.2s; font-weight: 500;}

.label_perfil:hover { background: #f0fdf4; border-color: var(--primary); }

.input_perfil:checked + .label_perfil {background: var(--primary); color: white; border-color: var(--primary);}

.footer-btns { display: flex; gap: 1rem; justify-content: flex-end; }

button {padding: 0.75rem 1.5rem; border-radius: 0.5rem; border: none; font-weight: 600; cursor: pointer; transition: opacity 0.2s;}

.btn-next { background: var(--primary); color: white; }
.btn-prev { background: #94a3b8; color: white; }
button:hover { opacity: 0.9; }

#result { display: none; text-align: center; }
.result-title { font-size: 2rem; font-weight: 800; color: var(--primary-dark); margin: 1rem 0; }
.desc { line-height: 1.6; color: #475569; margin-bottom: 2rem; }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*guias*/
.search-wrapper {float: left; width: 100%; margin-top: 20px;}
.input_guia{width: 70%; height: 35px; float: left; border: 1px solid #1C334C; border-radius: 5px; margin-left: 15%; padding-left: 10px;} 
.btn_voltar_modulos{display: none;  background-color: #1C334C; width: auto; height: auto; float: left; color: #FFFFFF; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 8px; margin-left: 5px; margin-top: 2px; border-radius: 5px; cursor: pointer;}
.btn_voltar_modulos:hover{background-color: #054ead; transition: all 0.5s ease-in;}

.container_escolha_modulo{width:90%; height: auto; float: left; margin-left:5%; margin-top:15px; display: block;}
.btn_escolha_modulo{width: 60%; height: auto; float: left;  color: #1C334C; font-size: 15px; text-align: center; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; margin-left: 20%; margin-right: 0px; margin-top: 5px; margin-bottom: 5px; padding: 5px; border-radius: 5px; border:1px solid #1C334C; cursor: pointer;}
.btn_escolha_modulo:hover{background-color: #1C334C; color: #FFFFFF; transition: all 0.5s ease-in;}

.grid-links{ width: 90%; height: auto; float: left; margin-top: 25px; margin-left: 5%; margin-bottom: 25px; border-top: 4px solid #1C334C; border-radius: 5px; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2); padding-bottom: 25px;}

.titulo_modulo{width: 100%; height: auto; float: left; font-size: 25px; font-family: Arial, Helvetica, sans-serif; text-align: center; color: #1C334C; margin-bottom: 10px; padding-bottom: 15px; padding-top: 15px; box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.6);}

.card{width: 90%; height: auto; float: left; color: #054ead; font-family: Arial, Helvetica, sans-serif; font-size: 15px; margin-left: 10px; margin-top:10px; margin-bottom: 10px;}
.card:hover{color: #10b981; transition: all 0.5s ease-in;}
.text_resumo_card{color: #333333;}

.mensagem_vazia{width: 90%; height: auto; float: left; text-align: center; font-size: 20px; font-family: Arial, Helvetica, sans-serif; margin-left: 5%; padding-bottom: 25px; padding-top: 25px; }

html {scroll-behavior: smooth;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*conversor moedas*/
.corpo_conversor {width: 100%; height: auto; float: left; font-family: 'Segoe UI', sans-serif; background: #f0f4f8; display: flex; justify-content: center;}
.card_conversor{ background: white; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); width: 100%; max-width: 80%; float: left; border-top: 5px solid #1C334C; margin-top: 15px;}
.group_conversor { margin-bottom: 20px; }
.txt_conversor { display: block; margin-bottom: 8px; color: #475569; font-weight: 600; font-size: 0.9em; }
.select_conversor { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 1em; outline: none; transition: 0.3s; box-sizing: border-box; }
.select_conversor:focus { border-color: #3b82f6; background: #fff; }
.divider { text-align: center; margin: 15px 0; color: #94a3b8; font-weight: bold; position: relative; }
.divider::before { content: ""; position: absolute; left: 0; top: 50%; width: 45%; height: 1px; background: #e2e8f0; }
.divider::after { content: ""; position: absolute; right: 0; top: 50%; width: 45%; height: 1px; background: #e2e8f0; }
.result-box { margin-top: 25px; padding: 20px; background: #f8fafc; border-radius: 12px; border: 1px dashed #cbd5e1; text-align: center; }
.price-label { font-size: 0.85em; color: #64748b; }
.main-value { font-size: 1.8em; font-weight: 800; color: #0f172a; margin: 5px 0; }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*indicadores economicos*/
.container_indicadores {width: 90%; height: auto; float: left;  font-family: Arial, sans-serif; background-color: #f4f7f6; margin-top: 20px; margin-left: 5%;}
        
.dashboard-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 30px;}

.card_indicares {border: 1px solid #ddd; border-radius: 8px; padding: 15px; text-align: center; background-color: #fff; cursor: pointer; transition: all 0.3s ease;}

.card_indicares:hover { border-color: #3498db; transform: translateY(-3px); }

.card_indicares.ativo_indicares {box-shadow: 0 0 15px rgba(52, 152, 219, 0.5); border: 2px solid #3498db;}

.card_indicares h4 { margin: 0; color: #555; font-size: 0.85em; text-transform: uppercase; }
.valor { font-size: 1.6em; font-weight: bold; display: block; margin: 8px 0; color: #2c3e50; }
.data {display: none; font-size: 0.7em; color: #999; }
.tendencia {display: none; font-size: 0.8em; font-weight: bold; margin-bottom: 5px; }
        
.subiu { color: #27ae60; }
.desceu { color: #e74c3c; }
.estavel { color: #f39c12; }

#container-grafico {background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #ddd; height: 400px;}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*veja tbm*/
.corpo_veja_tbm{width: 90%; height: auto; float: left;  margin-left: 5%; border-top: 5px #1C334C solid; border-radius: 5px; box-shadow: 0 0 3px 5px rgba(0, 0, 0, 0.2); margin-top: 15px;}
.titulo_veja_tbm{width: 100%; height: auto; float: left; color: #1C334C; font-size: 30px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: center; padding-bottom: 10px; padding-top: 10px; box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.6);}
.centraliza_veja_tbm{width: 100%; height: auto; float: left; padding-bottom: 25px; padding-top: 25px; border-radius:  0px 0px 5px  5px; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-mask-image: linear-gradient(to right, black 98%, transparent 100%); mask-image: linear-gradient(to right, black 98%, transparent 100%); gap:10px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;}

.item_veja_tbm{flex: 0 0 150px; height: 100px; float: left; border-radius: 5px;}
.item_veja_tbm:hover{opacity: 0.8; transition: all 0.5s ease-in;}
.img_veja_tbm{width: 100%; height: 100%; opacity: 0.7;}
.txt_veja_tbm{width: 100%; height: 100px; float: left; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;}
.link_veja_tbm{width: 100%; height: 100%; float: left;} 

.espaco_lateral_tbm{flex: 0 0 7px;  height: 100px; float: left;}

/* Classe para indicar que o item é arrastável */
.is-draggable {cursor: grab;}

/* Classe aplicada enquanto o usuário está arrastando */
.active-dragging {cursor: grabbing !important; user-select: none; scroll-snap-type: none;}

/* Esconder a barra de rolagem para um visual mais limpo (opcional) */
.centraliza_veja_tbm::-webkit-scrollbar {display: none;}