/* ========================================================================== TV SOL COMUNIDADE — FOLHA DE ESTILOS PRINCIPAL -------------------------------------------------------------------------- Portal de finanças pessoais. Sem frameworks, sem CDN, sem dependências externas. Organizado em: tokens de design, base, layout, cabeçalho, menu, componentes, calculadoras, conteúdo, institucional, rodapé, responsivo. Mobile first: os estilos base valem para celular e os @media ampliam. ========================================================================== */ /* ========================================================================== 1. TOKENS DE DESIGN ========================================================================== */ :root { /* Cores da marca (sobrescritas pelo PHP no ) */ --cor-primaria: #0f4c81; --cor-primaria-escura: #0a3560; --cor-primaria-clara: #e8f0f8; --cor-acento: #0f9d76; --cor-acento-clara: #e6f6f1; --cor-alerta: #b45309; --cor-alerta-clara: #fef6e7; --cor-erro: #b42318; --cor-erro-clara: #fef3f2; /* Neutros */ --cor-texto: #1a2432; --cor-texto-suave: #4a5568; --cor-texto-fraco: #718096; --cor-borda: #dfe4ec; --cor-borda-forte: #c3ccd9; --cor-fundo: #ffffff; --cor-fundo-alt: #f6f8fb; --cor-fundo-suave: #eef2f7; /* Tipografia */ --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --fonte-numero: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; --texto-xs: 0.8125rem; /* 13px */ --texto-sm: 0.875rem; /* 14px */ --texto-base: 1rem; /* 16px */ --texto-md: 1.0625rem; /* 17px */ --texto-lg: 1.25rem; /* 20px */ --texto-xl: 1.5rem; /* 24px */ --texto-2xl: 1.875rem; /* 30px */ --texto-3xl: 2.25rem; /* 36px */ /* Espaçamento */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 3rem; --esp-8: 4rem; /* Layout */ --largura-max: 1180px; --largura-conteudo: 780px; --raio-sm: 6px; --raio: 10px; --raio-lg: 16px; /* Sombras */ --sombra-sm: 0 1px 2px rgba(16, 30, 54, 0.06); --sombra: 0 2px 8px rgba(16, 30, 54, 0.08); --sombra-md: 0 6px 20px rgba(16, 30, 54, 0.1); --transicao: 180ms ease; } /* ========================================================================== 2. RESET E BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--fonte-base); font-size: var(--texto-md); line-height: 1.65; color: var(--cor-texto); background: var(--cor-fundo); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { margin: 0 0 var(--esp-4); line-height: 1.25; color: var(--cor-primaria-escura); font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: var(--texto-2xl); } h2 { font-size: var(--texto-xl); margin-top: var(--esp-7); } h3 { font-size: var(--texto-lg); margin-top: var(--esp-6); } h4 { font-size: var(--texto-base); margin-top: var(--esp-5); } p { margin: 0 0 var(--esp-4); } a { color: var(--cor-primaria); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--cor-primaria-escura); } ul, ol { margin: 0 0 var(--esp-4); padding-left: var(--esp-5); } li { margin-bottom: var(--esp-2); } strong { font-weight: 700; color: var(--cor-primaria-escura); } hr { border: 0; border-top: 1px solid var(--cor-borda); margin: var(--esp-6) 0; } code, kbd, samp { font-family: var(--fonte-numero); font-size: 0.9em; background: var(--cor-fundo-suave); padding: 0.15em 0.4em; border-radius: var(--raio-sm); } /* Acessibilidade */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--esp-4); z-index: 999; background: var(--cor-primaria); color: #fff; padding: var(--esp-3) var(--esp-4); border-radius: 0 0 var(--raio) var(--raio); text-decoration: none; font-weight: 600; } .skip-link:focus { top: 0; color: #fff; } :focus-visible { outline: 3px solid var(--cor-acento); outline-offset: 2px; border-radius: var(--raio-sm); } /* ========================================================================== 3. LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--esp-4); } .conteudo { display: block; } .secao { margin: var(--esp-7) 0; } .secao--faixa { background: var(--cor-fundo-alt); padding: var(--esp-7) 0; margin: var(--esp-7) 0; } .grade { display: grid; gap: var(--esp-5); } .pagina-cabecalho { padding: var(--esp-6) 0 var(--esp-4); border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--esp-6); } .pagina-cabecalho__intro { font-size: var(--texto-lg); color: var(--cor-texto-suave); max-width: 70ch; margin-bottom: 0; } .intro-texto { color: var(--cor-texto-suave); max-width: 72ch; } .coluna-conteudo { max-width: var(--largura-conteudo); } /* ========================================================================== 4. CABEÇALHO E MENU ========================================================================== */ .topo { background: var(--cor-primaria); position: sticky; top: 0; z-index: 100; box-shadow: var(--sombra); } .topo__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 64px; flex-wrap: wrap; } .topo__marca { display: flex; align-items: center; flex-shrink: 0; } .topo__logo { height: 40px; width: auto; } .topo__marca:hover .topo__logo { opacity: 0.9; } .menu__hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--raio); cursor: pointer; } .menu__hamburger-barra { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform var(--transicao), opacity var(--transicao); } .menu__hamburger[aria-expanded="true"] .menu__hamburger-barra:nth-child(2) { transform: translateY(7px) rotate(45deg); } .menu__hamburger[aria-expanded="true"] .menu__hamburger-barra:nth-child(3) { opacity: 0; } .menu__hamburger[aria-expanded="true"] .menu__hamburger-barra:nth-child(4) { transform: translateY(-7px) rotate(-45deg); } .menu { display: none; width: 100%; order: 3; padding-bottom: var(--esp-3); } @media (max-width: 991px) { .menu { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } .menu[data-aberto="true"] { display: block; } .menu__lista { list-style: none; margin: 0; padding: 0; } .menu__item { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .menu__linha { display: flex; align-items: center; justify-content: space-between; } .menu__link { display: block; padding: var(--esp-3) 0; color: #fff; text-decoration: none; font-weight: 600; font-size: var(--texto-base); flex: 1; } .menu__link:hover { color: #fff; text-decoration: underline; } .menu__item--ativo > .menu__linha > .menu__link, .menu__item--ativo > .menu__link { color: #b8e6d6; } .menu__botao-sub { background: transparent; border: 0; padding: var(--esp-3); cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .menu__seta { display: block; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); transition: transform var(--transicao); } .menu__botao-sub[aria-expanded="true"] .menu__seta { transform: rotate(-135deg); } .menu__sub { list-style: none; margin: 0 0 var(--esp-3); padding: 0 0 0 var(--esp-3); display: none; border-left: 2px solid rgba(255, 255, 255, 0.25); } .menu__sub[data-aberto="true"] { display: block; } .menu__sub-item { margin: 0; } .menu__sub-link { display: block; padding: var(--esp-2) var(--esp-3); color: rgba(255, 255, 255, 0.92); text-decoration: none; font-size: var(--texto-sm); border-radius: var(--raio-sm); } .menu__sub-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .menu__sub-item--ativo .menu__sub-link { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 600; } .menu__sub-descricao { display: block; font-size: var(--texto-xs); color: rgba(255, 255, 255, 0.65); } /* Breadcrumb */ .breadcrumb { padding: var(--esp-4) 0 0; font-size: var(--texto-sm); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: 0; padding: 0; } .breadcrumb li { margin: 0; color: var(--cor-texto-fraco); display: flex; align-items: center; gap: var(--esp-2); } .breadcrumb li:not(:last-child)::after { content: "›"; color: var(--cor-borda-forte); } .breadcrumb a { color: var(--cor-texto-suave); text-decoration: none; } .breadcrumb a:hover { color: var(--cor-primaria); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--cor-texto); font-weight: 600; } /* ========================================================================== 5. BOTÕES ========================================================================== */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-5); font-family: inherit; font-size: var(--texto-base); font-weight: 600; line-height: 1.4; border: 2px solid transparent; border-radius: var(--raio); cursor: pointer; text-decoration: none; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); min-height: 48px; } .botao--primario { background: var(--cor-primaria); color: #fff; } .botao--primario:hover { background: var(--cor-primaria-escura); color: #fff; } .botao--secundario { background: var(--cor-acento); color: #fff; } .botao--secundario:hover { background: #0c8563; color: #fff; } .botao--contorno { background: transparent; color: var(--cor-primaria); border-color: var(--cor-borda-forte); } .botao--contorno:hover { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); } .botao--texto { background: transparent; color: var(--cor-texto-suave); padding: var(--esp-3) var(--esp-4); text-decoration: underline; } .botao--texto:hover { color: var(--cor-primaria); } .botao--largo { width: 100%; } /* ========================================================================== 6. CARTÕES E LISTAS ========================================================================== */ .cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); grid-template-columns: 1fr; } .cartoes--compacto { grid-template-columns: 1fr; } .cartao { margin: 0; } .cartao__link { display: flex; flex-direction: column; gap: var(--esp-2); height: 100%; padding: var(--esp-4); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio); text-decoration: none; color: inherit; transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao); } .cartao__link:hover { border-color: var(--cor-primaria); box-shadow: var(--sombra-md); transform: translateY(-2px); color: inherit; } .cartao__titulo { font-weight: 700; color: var(--cor-primaria-escura); font-size: var(--texto-base); } .cartao__texto { font-size: var(--texto-sm); color: var(--cor-texto-suave); line-height: 1.55; } .cartao__meta { font-size: var(--texto-xs); color: var(--cor-texto-fraco); margin-top: auto; } .cartao--ferramenta .cartao__link { border-top: 3px solid var(--cor-acento); } .cartao__icone { width: 36px; height: 36px; } /* Cartão de destaque maior */ .destaque-card { background: linear-gradient(140deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%); color: #fff; border-radius: var(--raio-lg); padding: var(--esp-6); box-shadow: var(--sombra-md); } .destaque-card h2 { color: #fff; margin-top: 0; } .destaque-card p { color: rgba(255, 255, 255, 0.92); } .destaque-card .botao--primario { background: #fff; color: var(--cor-primaria); } .destaque-card .botao--primario:hover { background: var(--cor-primaria-clara); color: var(--cor-primaria-escura); } /* ========================================================================== 7. CALCULADORAS ========================================================================== */ .calculadora { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); padding: var(--esp-4); box-shadow: var(--sombra); margin: var(--esp-5) 0; } .calculadora__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-bottom: var(--esp-3); margin-bottom: var(--esp-4); border-bottom: 1px solid var(--cor-borda); } .calculadora__rotulo { font-weight: 700; color: var(--cor-primaria-escura); font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.04em; } .calculadora__selo { font-size: var(--texto-xs); color: var(--cor-texto-fraco); } .calc-form__campos { display: grid; gap: var(--esp-4); grid-template-columns: 1fr; } .campo { display: flex; flex-direction: column; gap: var(--esp-2); } .campo__label { font-size: var(--texto-sm); font-weight: 600; color: var(--cor-texto); } .campo__input { width: 100%; padding: var(--esp-3); font-family: inherit; font-size: var(--texto-base); color: var(--cor-texto); background: var(--cor-fundo); border: 1.5px solid var(--cor-borda-forte); border-radius: var(--raio); min-height: 48px; transition: border-color var(--transicao), box-shadow var(--transicao); } .campo__input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.14); } .campo__input--erro { border-color: var(--cor-erro); background: var(--cor-erro-clara); } .campo__moeda { position: relative; display: flex; align-items: center; } .campo__prefixo, .campo__sufixo { position: absolute; font-size: var(--texto-sm); font-weight: 700; color: var(--cor-texto-suave); pointer-events: none; } .campo__prefixo { left: var(--esp-3); } .campo__sufixo { right: var(--esp-3); } .campo__moeda .campo__input { padding-left: 2.6rem; } .campo__moeda .campo__input:has(+ .campo__sufixo) { padding-right: 2.2rem; } .campo__ajuda { font-size: var(--texto-xs); color: var(--cor-texto-fraco); margin: 0; } .campo__erro { font-size: var(--texto-xs); color: var(--cor-erro); font-weight: 600; margin: 0; } .campo__switch { display: flex; align-items: center; gap: var(--esp-3); min-height: 48px; cursor: pointer; } .campo__switch input { width: 22px; height: 22px; accent-color: var(--cor-primaria); } .campo__switch-texto { font-size: var(--texto-sm); color: var(--cor-texto-suave); } .calc-form__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--cor-borda); } .calc-form__nota { font-size: var(--texto-xs); color: var(--cor-texto-fraco); margin: var(--esp-3) 0 0; } /* Resultado */ .resultado { background: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-acento); border-radius: var(--raio); padding: var(--esp-5); margin: var(--esp-5) 0; } .resultado--alerta { border-left-color: var(--cor-alerta); background: var(--cor-alerta-clara); } .resultado__titulo { font-size: var(--texto-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-texto-suave); margin-bottom: var(--esp-4); } .resultado__destaques { display: grid; gap: var(--esp-3); grid-template-columns: 1fr; margin-bottom: var(--esp-5); } .resultado__destaque { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-1); } .resultado__rotulo { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-texto-fraco); font-weight: 600; } .resultado__valor { font-family: var(--fonte-numero); font-size: var(--texto-xl); color: var(--cor-primaria-escura); font-weight: 700; line-height: 1.2; } .resultado__destaque--destaque .resultado__valor { color: var(--cor-acento); } .resultado__descricao { font-size: var(--texto-xs); color: var(--cor-texto-fraco); } .resultado__linhas { margin: 0 0 var(--esp-5); display: grid; gap: 0; } .resultado__linha { display: flex; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-3) 0; border-bottom: 1px solid var(--cor-borda); } .resultado__linha:last-child { border-bottom: 0; } .resultado__linha dt { color: var(--cor-texto-suave); font-size: var(--texto-sm); margin: 0; } .resultado__linha dd { margin: 0; font-family: var(--fonte-numero); font-weight: 700; color: var(--cor-texto); text-align: right; } .resultado__explicacao { margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--cor-borda); } .resultado__explicacao h3 { margin-top: 0; font-size: var(--texto-base); } .resultado__explicacao p, .resultado__explicacao li { font-size: var(--texto-sm); color: var(--cor-texto-suave); } .resultado__premissas { margin-top: var(--esp-4); background: var(--cor-fundo); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio); padding: var(--esp-4); } .resultado__premissas-titulo { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--cor-texto-fraco); margin-bottom: var(--esp-2); } .resultado__premissas ul { margin: 0; padding-left: var(--esp-5); } .resultado__premissas li { font-size: var(--texto-xs); color: var(--cor-texto-suave); } .resultado__aviso { font-size: var(--texto-xs); color: var(--cor-texto-fraco); margin: var(--esp-4) 0 0; font-style: italic; } .resultado__tabela { margin: var(--esp-4) 0; } .resultado__tabela-aviso { font-size: var(--texto-xs); color: var(--cor-texto-fraco); margin-bottom: var(--esp-2); } .alerta-erros { background: var(--cor-erro-clara); border: 1px solid var(--cor-erro); border-radius: var(--raio); padding: var(--esp-4); margin: var(--esp-4) 0; } .alerta-erros__titulo { font-weight: 700; color: var(--cor-erro); margin-bottom: var(--esp-2); } .alerta-erros ul { margin: 0; padding-left: var(--esp-5); } .alerta-erros li { font-size: var(--texto-sm); color: var(--cor-erro); } /* Gráfico SVG */ .grafico { margin: var(--esp-5) 0; background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--esp-4); } .grafico svg { width: 100%; height: auto; } .grafico__legenda { display: flex; flex-wrap: wrap; gap: var(--esp-4); margin-top: var(--esp-3); font-size: var(--texto-xs); color: var(--cor-texto-suave); } .grafico__legenda-item { display: flex; align-items: center; gap: var(--esp-2); } .grafico__amostra { width: 14px; height: 14px; border-radius: 3px; } .grafico__amostra--saldo { background: var(--cor-primaria); } .grafico__amostra--investido { background: var(--cor-acento); } /* ========================================================================== 8. CONTEÚDO (ARTIGOS) ========================================================================== */ .artigo__cabecalho { padding: var(--esp-5) 0 var(--esp-4); } .artigo__categoria { display: inline-block; font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cor-acento); background: var(--cor-acento-clara); padding: var(--esp-1) var(--esp-3); border-radius: 99px; text-decoration: none; margin-bottom: var(--esp-3); } .artigo__titulo { font-size: var(--texto-2xl); margin-bottom: var(--esp-3); } .artigo__resumo { font-size: var(--texto-lg); color: var(--cor-texto-suave); max-width: 72ch; } .artigo__meta { display: flex; flex-wrap: wrap; gap: var(--esp-4); font-size: var(--texto-xs); color: var(--cor-texto-fraco); margin-top: var(--esp-3); } .artigo__imagem { margin: var(--esp-5) 0; border-radius: var(--raio-lg); overflow: hidden; background: var(--cor-fundo-suave); } .artigo__imagem img, .artigo__imagem svg { width: 100%; height: auto; } .artigo__legenda { font-size: var(--texto-xs); color: var(--cor-texto-fraco); padding: var(--esp-2) var(--esp-4) var(--esp-4); } .artigo__corpo { max-width: var(--largura-conteudo); } .artigo__corpo h2 { scroll-margin-top: 90px; } .artigo__corpo h3 { scroll-margin-top: 90px; } /* Índice do artigo */ .indice { background: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: var(--esp-4) var(--esp-5); margin: var(--esp-5) 0; } .indice__titulo { font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cor-texto-suave); margin-bottom: var(--esp-3); } .indice ol { margin: 0; padding-left: var(--esp-5); } .indice li { font-size: var(--texto-sm); margin-bottom: var(--esp-2); } .indice a { text-decoration: none; } .indice a:hover { text-decoration: underline; } /* Caixas de destaque */ .caixa { border-radius: var(--raio); padding: var(--esp-5); margin: var(--esp-5) 0; border: 1px solid var(--cor-borda); background: var(--cor-fundo-alt); } .caixa__titulo { font-weight: 700; margin-bottom: var(--esp-3); color: var(--cor-primaria-escura); font-size: var(--texto-base); } .caixa__corpo > *:last-child { margin-bottom: 0; } .caixa--destaque { background: var(--cor-primaria-clara); border-color: var(--cor-primaria); } .caixa--destaque .caixa__titulo { color: var(--cor-primaria-escura); } .caixa--destaque .caixa__corpo p { font-size: var(--texto-lg); margin-bottom: 0; } .caixa--aviso { background: var(--cor-alerta-clara); border-color: #f0c98a; } .caixa--aviso .caixa__titulo { color: var(--cor-alerta); } .caixa--dica { background: var(--cor-acento-clara); border-color: #a8ddc9; } .caixa--dica .caixa__titulo { color: #0b7a5b; } /* Fórmula destacada */ .formula { background: var(--cor-primaria-escura); color: #fff; border-radius: var(--raio); padding: var(--esp-5); margin: var(--esp-5) 0; font-family: var(--fonte-numero); font-size: var(--texto-base); line-height: 2; overflow-x: auto; } .formula__linha { display: block; white-space: nowrap; } .formula__variaveis { font-family: var(--fonte-base); font-size: var(--texto-xs); color: rgba(255, 255, 255, 0.8); margin: var(--esp-3) 0 0; line-height: 1.6; } .formula__titulo { font-family: var(--fonte-base); font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.75); margin-bottom: var(--esp-3); font-weight: 700; } /* Tabelas responsivas */ .tabela-wrap { overflow-x: auto; margin: var(--esp-5) 0; border: 1px solid var(--cor-borda); border-radius: var(--raio); -webkit-overflow-scrolling: touch; } .tabela { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); min-width: 480px; } .tabela caption { text-align: left; padding: var(--esp-3) var(--esp-4); font-size: var(--texto-xs); color: var(--cor-texto-fraco); background: var(--cor-fundo-alt); } .tabela th, .tabela td { padding: var(--esp-3) var(--esp-4); text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: top; } .tabela thead th { background: var(--cor-fundo-suave); color: var(--cor-primaria-escura); font-weight: 700; font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .tabela tbody tr:nth-child(even) { background: var(--cor-fundo-alt); } .tabela tbody th { font-weight: 600; color: var(--cor-texto); } .tabela tbody tr:last-child th, .tabela tbody tr:last-child td { border-bottom: 0; } .tabela--numeros td, .tabela--numeros th:not(:first-child) { font-family: var(--fonte-numero); text-align: right; white-space: nowrap; } .tabela__destaque { background: var(--cor-primaria-clara) !important; font-weight: 700; } /* FAQ */ .faq { margin: var(--esp-5) 0; } .faq__item { border: 1px solid var(--cor-borda); border-radius: var(--raio); margin-bottom: var(--esp-3); background: var(--cor-fundo); overflow: hidden; } .faq__item summary { cursor: pointer; padding: var(--esp-4); font-weight: 600; color: var(--cor-primaria-escura); list-style: none; display: flex; justify-content: space-between; gap: var(--esp-3); align-items: flex-start; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-size: var(--texto-lg); color: var(--cor-primaria); flex-shrink: 0; line-height: 1; font-weight: 700; } .faq__item[open] summary::after { content: "−"; } .faq__item[open] summary { background: var(--cor-fundo-alt); } .faq__resposta { padding: 0 var(--esp-4) var(--esp-4); } .faq__resposta p { font-size: var(--texto-sm); color: var(--cor-texto-suave); margin-bottom: 0; } /* Selo de data e fontes */ .selo-data { font-size: var(--texto-xs); color: var(--cor-texto-fraco); background: var(--cor-fundo-suave); display: inline-block; padding: var(--esp-1) var(--esp-3); border-radius: 99px; margin-bottom: var(--esp-4); } .fontes-lista { list-style: none; padding: 0; margin: var(--esp-4) 0; } .fontes-lista li { font-size: var(--texto-sm); padding: var(--esp-2) 0; border-bottom: 1px dashed var(--cor-borda); } .fontes-lista li:last-child { border-bottom: 0; } .fontes-lista a { text-decoration: none; } .fontes-lista a:hover { text-decoration: underline; } /* ========================================================================== 9. PÁGINA INICIAL ========================================================================== */ .hero { background: linear-gradient(140deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%); color: #fff; padding: var(--esp-7) 0; margin-bottom: var(--esp-6); } .hero__interno { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; align-items: center; } .hero__titulo { color: #fff; font-size: var(--texto-2xl); margin-bottom: var(--esp-4); } .hero__texto { font-size: var(--texto-lg); color: rgba(255, 255, 255, 0.92); max-width: 60ch; } .hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-5); } .hero .botao--primario { background: #fff; color: var(--cor-primaria); } .hero .botao--primario:hover { background: var(--cor-primaria-clara); } .hero .botao--contorno { color: #fff; border-color: rgba(255, 255, 255, 0.55); } .hero .botao--contorno:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; } .hero__selos { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-top: var(--esp-5); } .hero__selo { font-size: var(--texto-xs); background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); padding: var(--esp-2) var(--esp-3); border-radius: 99px; color: #fff; } .hero__imagem { max-width: 460px; justify-self: center; width: 100%; } .secao__cabecalho { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-3); margin-bottom: var(--esp-5); } .secao__cabecalho h2 { margin: 0; } .secao__link { font-size: var(--texto-sm); font-weight: 600; text-decoration: none; white-space: nowrap; } .secao__link:hover { text-decoration: underline; } /* ========================================================================== 10. PÁGINAS INSTITUCIONAIS E FORMULÁRIOS ========================================================================== */ .formulario { max-width: 620px; margin: var(--esp-5) 0; } .formulario__linha { margin-bottom: var(--esp-4); } .formulario label { display: block; font-size: var(--texto-sm); font-weight: 600; margin-bottom: var(--esp-2); } .formulario input[type="text"], .formulario input[type="email"], .formulario select, .formulario textarea { width: 100%; padding: var(--esp-3); font-family: inherit; font-size: var(--texto-base); border: 1.5px solid var(--cor-borda-forte); border-radius: var(--raio); background: var(--cor-fundo); color: var(--cor-texto); min-height: 48px; } .formulario textarea { min-height: 150px; resize: vertical; } .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.14); } .formulario__ajuda { font-size: var(--texto-xs); color: var(--cor-texto-fraco); margin-top: var(--esp-1); } .formulario__obrigatorio { color: var(--cor-erro); } .mensagem { border-radius: var(--raio); padding: var(--esp-4) var(--esp-5); margin: var(--esp-4) 0; border: 1px solid; } .mensagem--sucesso { background: var(--cor-acento-clara); border-color: #a8ddc9; color: #0b7a5b; } .mensagem--erro { background: var(--cor-erro-clara); border-color: var(--cor-erro); color: var(--cor-erro); } .mensagem__titulo { font-weight: 700; margin-bottom: var(--esp-2); } /* Blocos de configuração pendente (fáceis de localizar e trocar) */ .pendente { display: inline-block; background: var(--cor-alerta-clara); border: 1px dashed var(--cor-alerta); color: var(--cor-alerta); font-size: var(--texto-xs); padding: 0 var(--esp-2); border-radius: var(--raio-sm); font-weight: 600; } /* ========================================================================== 11. RODAPÉ ========================================================================== */ .rodape { background: var(--cor-primaria-escura); color: rgba(255, 255, 255, 0.85); margin-top: var(--esp-8); padding: var(--esp-7) 0 var(--esp-5); font-size: var(--texto-sm); } .rodape__grade { display: grid; gap: var(--esp-6); grid-template-columns: 1fr; } .rodape__logo { height: 40px; width: auto; margin-bottom: var(--esp-4); } .rodape__sobre { color: rgba(255, 255, 255, 0.78); font-size: var(--texto-sm); line-height: 1.6; } .rodape__contato { color: rgba(255, 255, 255, 0.78); } .rodape__titulo { color: #fff; font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--esp-4); } .rodape__lista { list-style: none; margin: 0; padding: 0; } .rodape__lista li { margin-bottom: var(--esp-2); } .rodape__lista a { color: rgba(255, 255, 255, 0.78); text-decoration: none; } .rodape__lista a:hover { color: #fff; text-decoration: underline; } .rodape a { color: rgba(255, 255, 255, 0.86); } .rodape__aviso { margin-top: var(--esp-6); padding-top: var(--esp-5); border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: var(--texto-xs); color: rgba(255, 255, 255, 0.7); line-height: 1.7; } .rodape__fontes a { color: rgba(255, 255, 255, 0.85); } .rodape__base { margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid rgba(255, 255, 255, 0.18); display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: space-between; align-items: center; font-size: var(--texto-xs); } .rodape__base p { margin: 0; } .rodape__base-links { display: flex; gap: var(--esp-4); flex-wrap: wrap; } .rodape__base-links a { text-decoration: none; } .rodape__base-links a:hover { text-decoration: underline; } /* ========================================================================== 12. RESPONSIVO (mobile first → telas maiores) ========================================================================== */ @media (min-width: 560px) { :root { --texto-2xl: 2.125rem; --texto-3xl: 2.5rem; } .cartoes { grid-template-columns: repeat(2, 1fr); } .cartoes--3 { grid-template-columns: repeat(2, 1fr); } .calc-form__campos { grid-template-columns: repeat(2, 1fr); } .calc-form__campos .campo--largo { grid-column: 1 / -1; } .resultado__destaques { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .resultado__destaques { grid-template-columns: repeat(3, 1fr); } .hero__interno { grid-template-columns: 1.4fr 1fr; } .calculadora { padding: var(--esp-6); } .indice { position: sticky; } } @media (min-width: 992px) { .menu__hamburger { display: none; } .menu { display: block !important; width: auto; order: 0; padding-bottom: 0; } .menu__lista { display: flex; align-items: center; gap: var(--esp-1); } .menu__item { position: relative; border-bottom: 0; } .menu__linha { gap: 0; } .menu__link { padding: var(--esp-3) var(--esp-3); font-size: var(--texto-sm); white-space: nowrap; } .menu__item--tem-filhos .menu__link { padding-right: var(--esp-2); } .menu__botao-sub { min-width: 30px; padding: var(--esp-3) var(--esp-2); } .menu__item--ativo > .menu__linha > .menu__link::after { content: ""; position: absolute; left: var(--esp-3); right: var(--esp-3); bottom: 6px; height: 2px; background: #fff; border-radius: 2px; } .menu__sub { position: absolute; top: 100%; left: 0; min-width: 290px; background: var(--cor-primaria-escura); border-radius: 0 0 var(--raio) var(--raio); box-shadow: var(--sombra-md); padding: var(--esp-3) var(--esp-2); border-left: 0; max-height: 70vh; overflow-y: auto; z-index: 120; } .menu__barra-sub:hover .menu__sub, .menu__sub[data-aberto="true"] { display: block; } .menu__sub:not([data-aberto="true"]) { display: none; } .cartoes { grid-template-columns: repeat(3, 1fr); } .cartoes--4 { grid-template-columns: repeat(4, 1fr); } .hero { padding: var(--esp-8) 0; } .hero__titulo { font-size: var(--texto-3xl); } } @media (min-width: 1200px) { .cartoes { grid-template-columns: repeat(3, 1fr); } .cartoes--4 { grid-template-columns: repeat(4, 1fr); } } /* Impressão */ @media print { .topo, .rodape, .calc-form__acoes, .breadcrumb, .menu { display: none; } body { font-size: 11pt; color: #000; } .resultado { border: 1px solid #000; } a { color: #000; text-decoration: none; } } /* Acessibilidade: respeita preferência por menos movimento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* -------------------------------------------------------------------------- ADSENSE — ANÚNCIOS MANUAIS -------------------------------------------------------------------------- */ .anuncio-manual { width: 100%; margin: 32px auto; text-align: center; overflow: hidden; } /* ========================================================================== MENU MOBILE — ROLAGEM INTERNA ========================================================================== */ @media (max-width: 991px) { .menu { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } }