.elementor-1795341 .elementor-element.elementor-element-532e56bc{overflow:visible;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1795341 .elementor-element.elementor-element-1b840ac{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;overflow:visible;}.elementor-1795341 .elementor-element.elementor-element-f8564bd > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-1795341 .elementor-element.elementor-element-f8564bd > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1795341 .elementor-element.elementor-element-2bf5159{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-1795341 .elementor-element.elementor-element-f8564bd > .elementor-element-populated{padding:5px 5px 5px 5px;}}@media(max-width:767px){.elementor-1795341 .elementor-element.elementor-element-f8564bd > .elementor-element-populated, .elementor-1795341 .elementor-element.elementor-element-f8564bd > .elementor-element-populated > .elementor-background-overlay, .elementor-1795341 .elementor-element.elementor-element-f8564bd > .elementor-background-slideshow{border-radius:0px 0px 0px 0px;}.elementor-1795341 .elementor-element.elementor-element-f8564bd > .elementor-element-populated{padding:05px 05px 05px 05px;}}/* Start custom CSS for html, class: .elementor-element-2bf5159 *//* Import da Fonte Karla do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

/* Estilos Gerais para o Container da Ferramenta Legale */
.legale-ferramenta-container {
    font-family: 'Karla', sans-serif;
    background-color: #fdfdfd; /* Um branco levemente off-white ou cinza muito claro */
    padding: 25px;
    border: 1px solid #e0e0e0; /* Borda suave */
    border-radius: 8px; /* Cantos arredondados */
    max-width: 550px; /* Largura máxima para boa leitura em desktops */
    margin: 30px auto; /* Centralizar e adicionar margem superior/inferior */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Sombra sutil para dar profundidade */
    color: #333333; /* Cor de texto padrão */
}

.legale-ferramenta-container h4 {
    color: #333333; /* Cor escura para o título principal da ferramenta */
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.6em; /* Tamanho do título da ferramenta */
    font-weight: 700; /* Karla bold */
    text-align: center;
}

.legale-ferramenta-form-group {
    margin-bottom: 20px; /* Espaçamento entre os campos do formulário */
}

.legale-ferramenta-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #444444; /* Cor um pouco mais suave para labels */
    font-weight: 700; /* Karla bold */
    font-size: 0.95em;
}

.legale-ferramenta-input {
    width: 100%; /* Ocupar toda a largura disponível */
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Karla', sans-serif; /* Garantir a fonte no input também */
    box-sizing: border-box; /* Evita que padding/borda aumentem a largura total */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.legale-ferramenta-input::placeholder {
    color: #999999;
    font-style: italic;
}

.legale-ferramenta-input:focus {
    border-color: #B71C1C; /* Um tom de Vermelho Legale para foco (ex: vermelho mais escuro) */
    outline: none; /* Remove o outline padrão */
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.15); /* Sombra de foco sutil no tom Legale */
}

.legale-ferramenta-botao {
    background-color: #C00000; /* Vermelho Legale Principal (sugestão) */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 700; /* Karla bold */
    font-family: 'Karla', sans-serif;
    cursor: pointer;
    display: block;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin-top: 15px; /* Espaço acima do botão */
}

.legale-ferramenta-botao:hover {
    background-color: #A00000; /* Tom de Vermelho Legale mais escuro para hover */
}

.legale-ferramenta-botao:active {
    transform: translateY(1px); /* Efeito de clique sutil */
}

.legale-ferramenta-resultados {
    margin-top: 30px; /* Espaço antes da área de resultados */
    padding: 20px;
    background-color: #ffffff; /* Fundo branco para destacar os resultados */
    border: 1px solid #e0e0e0; /* Borda sutil, pode ser tracejada se preferir: border: 1px dashed #cccccc; */
    border-radius: 5px;
}

.legale-ferramenta-resultados h5 {
    color: #C00000; /* Vermelho Legale para o título dos resultados */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.3em;
    font-weight: 700;
}

.legale-ferramenta-resultados p {
    color: #333333;
    margin-bottom: 10px;
    font-size: 1em;
    line-height: 1.7; /* Melhorar legibilidade */
}

.legale-ferramenta-resultados p strong { /* Estilo para os labels (ex: "Salário Bruto Informado:") */
    color: #333333;
    font-weight: 700; /* Karla bold */
}

/* Estilo específico para o valor final destacado */
.legale-ferramenta-destaque-resultado {
    font-size: 1.4em;
    font-weight: 700; /* Karla bold */
    color: #C00000; /* Vermelho Legale para o valor total, para dar ênfase */
}

.legale-ferramenta-erro {
    background-color: #FFEBEE; /* Fundo vermelho muito claro para mensagens de erro */
    color: #B71C1C; /* Texto vermelho escuro para erro */
    padding: 12px;
    border: 1px solid #FFCDD2; /* Borda vermelha clara */
    border-left: 5px solid #C00000; /* Borda esquerda mais grossa na cor principal */
    border-radius: 5px;
    margin-top: 20px;
    font-weight: normal; /* Karla regular, mas a cor já dá o alerta */
    font-size: 0.95em;
}/* End custom CSS */