/*
=================================================
FINANCEHUB
CALCULATOR V3
=================================================
Este arquivo trabalha JUNTO com:
css/style.css
Ordem correta no HTML:
O style.css fornece:
- tema
- variáveis
- reset
- container
- tipografia global
- header
- footer
- componentes institucionais
O calculator-v3.css fornece apenas:
- estrutura visual das calculadoras V3
- resultados compactos
- múltiplos gráficos
- tabelas
- FAQ
- CTA
- publicidade
- responsividade
As classes usam o prefixo calculator-v3-
para não alterar calculadoras antigas.
*/
/*
=================================================
VARIÁVEIS LOCAIS
=================================================
*/
.calculator-v3-page {
--calculator-v3-surface:
var(--card-color, #ffffff);
--calculator-v3-surface-soft:
#f7f9fd;
--calculator-v3-primary:
var(--primary-color, #2563eb);
--calculator-v3-primary-dark:
var(--primary-hover, #1d4ed8);
--calculator-v3-text:
var(--text-color, #102343);
--calculator-v3-text-light:
var(--text-secondary, #64748b);
--calculator-v3-border:
var(--border-color, #dbe4f0);
--calculator-v3-radius:
var(--radius-lg, 22px);
--calculator-v3-radius-small:
var(--radius-md, 14px);
--calculator-v3-shadow:
var(
--shadow-sm,
0 14px 35px rgba(15, 35, 70, 0.08)
);
}
/*
=================================================
BREADCRUMB
=================================================
*/
.calculator-v3-breadcrumb {
display:
flex;
flex-wrap:
wrap;
align-items:
center;
gap:
8px;
margin:
24px 0;
color:
var(--calculator-v3-text-light);
font-size:
14px;
}
.calculator-v3-breadcrumb a {
color:
var(--calculator-v3-primary);
font-weight:
700;
text-decoration:
none;
}
.calculator-v3-breadcrumb a:hover {
text-decoration:
underline;
}
/*
=================================================
ETIQUETA DE SEÇÃO
=================================================
*/
.calculator-v3-tag {
display:
inline-flex;
align-items:
center;
min-height:
34px;
padding:
7px 16px;
background:
#edf3ff;
border:
1px solid
rgba(37, 99, 235, 0.14);
border-radius:
999px;
color:
var(--calculator-v3-primary);
font-size:
13px;
font-weight:
800;
letter-spacing:
0.12em;
line-height:
1;
text-transform:
uppercase;
}
/*
=================================================
HERO
=================================================
*/
.calculator-v3-hero {
padding:
54px 0 42px;
}
.calculator-v3-hero-content {
max-width:
920px;
}
.calculator-v3-hero h1 {
max-width:
900px;
margin:
20px 0 18px;
color:
var(--calculator-v3-text);
font-size:
clamp(
34px,
5vw,
58px
);
line-height:
1.08;
letter-spacing:
-0.04em;
}
.calculator-v3-hero-description {
max-width:
820px;
margin:
0;
color:
var(--calculator-v3-text-light);
font-size:
18px;
line-height:
1.75;
}
.calculator-v3-hero-actions {
display:
flex;
flex-wrap:
wrap;
gap:
14px;
margin-top:
28px;
}
/*
=================================================
BOTÕES V3
=================================================
*/
.calculator-v3-button {
display:
inline-flex;
align-items:
center;
justify-content:
center;
min-height:
50px;
padding:
13px 22px;
border:
1px solid transparent;
border-radius:
12px;
font-size:
16px;
font-weight:
800;
line-height:
1.2;
text-align:
center;
text-decoration:
none;
cursor:
pointer;
transition:
transform 0.2s ease,
background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.calculator-v3-button:hover {
transform:
translateY(-2px);
text-decoration:
none;
}
.calculator-v3-button-primary {
background:
var(--calculator-v3-primary);
color:
#ffffff;
box-shadow:
0 10px 22px
rgba(37, 99, 235, 0.18);
}
.calculator-v3-button-primary:hover {
background:
var(--calculator-v3-primary-dark);
}
.calculator-v3-button-secondary {
background:
#ffffff;
border-color:
var(--calculator-v3-border);
color:
var(--calculator-v3-primary);
}
.calculator-v3-button-full {
width:
100%;
}
/*
=================================================
LAYOUT PRINCIPAL
=================================================
*/
.calculator-v3-main,
.calculator-v3-main-section {
padding:
18px 0 22px;
}
.calculator-v3-main-grid,
.calculator-v3-layout {
display:
grid;
grid-template-columns:
minmax(0, 0.9fr)
minmax(0, 1.1fr);
align-items:
start;
gap:
28px;
}
/*
=================================================
CARDS
=================================================
*/
.calculator-v3-card {
background:
var(--calculator-v3-surface);
border:
1px solid
rgba(37, 99, 235, 0.1);
border-radius:
var(--calculator-v3-radius);
box-shadow:
var(--calculator-v3-shadow);
overflow:
hidden;
}
.calculator-v3-card-body {
padding:
30px;
}
.calculator-v3-card-header {
margin-bottom:
24px;
}
.calculator-v3-card-header h2 {
margin:
16px 0 10px;
color:
var(--calculator-v3-text);
font-size:
28px;
line-height:
1.2;
}
.calculator-v3-card-header p {
margin:
0;
color:
var(--calculator-v3-text-light);
line-height:
1.7;
}
/*
=================================================
FORMULÁRIO
=================================================
*/
.calculator-v3-form-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
18px;
}
.calculator-v3-field {
min-width:
0;
}
.calculator-v3-field-full {
grid-column:
1 / -1;
}
.calculator-v3-field label {
display:
block;
margin:
0 0 8px;
color:
var(--calculator-v3-text);
font-size:
14px;
font-weight:
800;
}
.calculator-v3-field input,
.calculator-v3-field select {
width:
100%;
min-height:
50px;
padding:
12px 14px;
background:
#ffffff;
border:
1px solid
var(--calculator-v3-border);
border-radius:
11px;
color:
var(--calculator-v3-text);
font-size:
16px;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.calculator-v3-field input:focus,
.calculator-v3-field select:focus {
outline:
none;
border-color:
var(--calculator-v3-primary);
box-shadow:
0 0 0 4px
rgba(37, 99, 235, 0.11);
}
.calculator-v3-field-help {
display:
block;
margin-top:
7px;
color:
var(--calculator-v3-text-light);
font-size:
13px;
line-height:
1.5;
}
.calculator-v3-form-actions {
margin-top:
24px;
}
/*
=================================================
MENSAGENS
=================================================
*/
.calculator-v3-message {
margin:
18px 0 0;
padding:
13px 15px;
border-radius:
11px;
font-size:
14px;
line-height:
1.55;
}
.calculator-v3-message[hidden] {
display:
none;
}
.calculator-v3-message-error {
background:
#fff3f3;
border:
1px solid #fecaca;
color:
#991b1b;
}
.calculator-v3-message-success {
background:
#effcf4;
border:
1px solid #bbf7d0;
color:
#166534;
}
/*
=================================================
RESULTADO PRINCIPAL
=================================================
*/
.calculator-v3-result-highlight {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
24px;
margin-bottom:
20px;
padding:
22px;
background:
linear-gradient(
135deg,
#edf3ff,
#f8fbff
);
border:
1px solid
rgba(37, 99, 235, 0.13);
border-radius:
16px;
}
.calculator-v3-result-highlight-label {
color:
var(--calculator-v3-text-light);
font-size:
14px;
font-weight:
700;
}
.calculator-v3-result-highlight-value {
color:
var(--calculator-v3-text);
font-size:
clamp(
27px,
4vw,
38px
);
line-height:
1.1;
text-align:
right;
}
/*
=================================================
GRADE DE RESULTADOS COMPACTOS
=================================================
*/
.calculator-v3-result-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
14px;
}
.calculator-v3-result-item {
min-width:
0;
padding:
17px 18px;
background:
var(--calculator-v3-surface-soft);
border:
1px solid
rgba(37, 99, 235, 0.08);
border-radius:
13px;
}
.calculator-v3-result-item span {
display:
block;
margin-bottom:
7px;
color:
var(--calculator-v3-text-light);
font-size:
13px;
font-weight:
700;
line-height:
1.4;
}
.calculator-v3-result-item strong {
display:
block;
overflow-wrap:
anywhere;
color:
var(--calculator-v3-text);
font-size:
20px;
line-height:
1.25;
}
.calculator-v3-result-explanation {
margin-top:
20px;
padding:
17px 18px;
background:
#ffffff;
border:
1px solid
var(--calculator-v3-border);
border-radius:
13px;
}
.calculator-v3-result-explanation p {
margin:
0;
color:
var(--calculator-v3-text-light);
line-height:
1.7;
}
/*
=================================================
BLOCOS EXTRAS DE RESULTADO
=================================================
*/
.calculator-v3-section {
margin-top:
30px;
}
.calculator-v3-section-heading {
max-width:
850px;
margin-bottom:
24px;
}
.calculator-v3-section-heading h2 {
margin:
16px 0 10px;
color:
var(--calculator-v3-text);
font-size:
clamp(
28px,
4vw,
38px
);
line-height:
1.2;
}
.calculator-v3-section-heading p {
margin:
0;
color:
var(--calculator-v3-text-light);
line-height:
1.7;
}
.calculator-v3-block-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
22px;
}
/*
=================================================
COMPARAÇÃO
=================================================
*/
.calculator-v3-comparison-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
22px;
}
.calculator-v3-comparison-card {
padding:
26px;
}
.calculator-v3-comparison-card h3 {
margin:
0 0 18px;
color:
var(--calculator-v3-text);
font-size:
25px;
}
/*
=================================================
DIAGNÓSTICO E RECOMENDAÇÃO
=================================================
*/
.calculator-v3-diagnosis {
padding:
24px;
background:
linear-gradient(
135deg,
#ffffff,
#f7faff
);
border:
1px solid
rgba(37, 99, 235, 0.12);
border-radius:
var(--calculator-v3-radius-small);
}
.calculator-v3-diagnosis strong {
display:
block;
margin-bottom:
10px;
color:
var(--calculator-v3-primary);
font-size:
23px;
line-height:
1.3;
}
.calculator-v3-diagnosis p {
margin:
0;
color:
var(--calculator-v3-text-light);
line-height:
1.75;
}
/*
=================================================
GRÁFICOS
=================================================
*/
.calculator-v3-chart-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
22px;
}
.calculator-v3-chart-grid-single {
grid-template-columns:
minmax(0, 1fr);
}
.calculator-v3-chart-card {
min-width:
0;
padding:
24px;
}
.calculator-v3-chart-card-wide {
grid-column:
1 / -1;
}
.calculator-v3-chart-card h3 {
margin:
0 0 18px;
color:
var(--calculator-v3-text);
font-size:
21px;
}
.calculator-v3-chart-wrapper {
position: relative;
width: 100%;
height: 320px;
min-height: 0;
margin-inline: auto;
}
.calculator-v3-chart-wrapper-small {
height: 270px;
}
.calculator-v3-chart-wrapper-large {
height: 360px;
}
.calculator-v3-chart-wrapper canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
/*
=================================================
TABELAS
=================================================
*/
.calculator-v3-table-wrapper {
width:
100%;
overflow-x:
auto;
border:
1px solid
var(--calculator-v3-border);
border-radius:
14px;
}
.calculator-v3-table {
width:
100%;
min-width:
680px;
border-collapse:
collapse;
background:
#ffffff;
}
.calculator-v3-table thead {
background:
#edf3ff;
}
.calculator-v3-table th,
.calculator-v3-table td {
padding:
15px 17px;
border-bottom:
1px solid
var(--calculator-v3-border);
color:
var(--calculator-v3-text);
text-align:
left;
vertical-align:
middle;
white-space:
nowrap;
}
.calculator-v3-table th {
font-size:
14px;
font-weight:
800;
}
.calculator-v3-table td {
font-size:
15px;
}
.calculator-v3-table tbody tr:last-child td {
border-bottom:
none;
}
.calculator-v3-table tbody tr:hover {
background:
#f8fbff;
}
/*
=================================================
PUBLICIDADE
=================================================
*/
.calculator-v3-ad {
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
gap:
6px;
min-height:
130px;
margin:
34px 0;
padding:
22px;
background:
#f3f5f9;
border:
1px dashed
#cbd5e1;
border-radius:
14px;
color:
#64748b;
text-align:
center;
}
.calculator-v3-ad strong,
.calculator-v3-ad span,
.calculator-v3-ad p {
margin:
0;
}
/*
=================================================
CONTEÚDO EDUCATIVO
=================================================
*/
.calculator-v3-content-section {
padding:
54px 0 18px;
}
.calculator-v3-content-layout {
display:
grid;
grid-template-columns:
minmax(0, 1.5fr)
minmax(280px, 0.5fr);
align-items:
start;
gap:
32px;
}
.calculator-v3-content-main {
padding:
34px;
background:
#ffffff;
border:
1px solid
rgba(37, 99, 235, 0.09);
border-radius:
var(--calculator-v3-radius);
box-shadow:
var(--calculator-v3-shadow);
}
.calculator-v3-content-main h2 {
margin:
36px 0 14px;
color:
var(--calculator-v3-text);
font-size:
28px;
line-height:
1.25;
}
.calculator-v3-content-main h2:first-of-type {
margin-top:
18px;
}
.calculator-v3-content-main p,
.calculator-v3-content-main li {
color:
var(--calculator-v3-text-light);
font-size:
16px;
line-height:
1.8;
}
.calculator-v3-content-main p {
margin:
0 0 18px;
}
.calculator-v3-content-list {
margin:
0;
padding-left:
22px;
}
.calculator-v3-content-list li {
margin-bottom:
10px;
}
.calculator-v3-formula {
margin:
24px 0;
padding:
22px;
background:
#f7faff;
border-left:
5px solid
var(--calculator-v3-primary);
border-radius:
0 14px 14px 0;
}
.calculator-v3-formula strong {
display:
block;
margin-bottom:
12px;
color:
var(--calculator-v3-text);
}
.calculator-v3-formula-value {
overflow-x:
auto;
margin-bottom:
12px;
color:
var(--calculator-v3-primary);
font-size:
21px;
font-weight:
800;
line-height:
1.5;
}
.calculator-v3-sidebar {
position:
sticky;
top:
24px;
}
.calculator-v3-sidebar-card {
padding:
26px;
}
.calculator-v3-sidebar-card h2 {
margin:
16px 0 12px;
color:
var(--calculator-v3-text);
font-size:
23px;
}
.calculator-v3-sidebar-card p {
margin:
0;
color:
var(--calculator-v3-text-light);
line-height:
1.75;
}
.calculator-v3-update {
margin-top:
30px !important;
padding-top:
18px;
border-top:
1px solid
var(--calculator-v3-border);
font-size:
14px !important;
}
/*
=================================================
FAQ ACCORDION
=================================================
*/
.calculator-v3-faq {
padding:
54px 0 20px;
}
.calculator-v3-faq-list {
display:
grid;
gap:
14px;
}
.calculator-v3-faq-item {
background:
#ffffff;
border:
1px solid
rgba(37, 99, 235, 0.1);
border-radius:
16px;
box-shadow:
0 8px 22px
rgba(15, 35, 70, 0.05);
overflow:
hidden;
}
.calculator-v3-faq-button {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
20px;
width:
100%;
margin:
0;
padding:
21px 24px;
background:
#ffffff;
border:
none;
border-radius:
0;
color:
var(--calculator-v3-text);
font-size:
17px;
font-weight:
800;
text-align:
left;
cursor:
pointer;
}
.calculator-v3-faq-button:hover {
background:
#f8fbff;
transform:
none;
}
.calculator-v3-faq-icon {
display:
inline-flex;
align-items:
center;
justify-content:
center;
flex:
0 0 40px;
width:
40px;
height:
40px;
background:
#edf3ff;
border:
1px solid
rgba(37, 99, 235, 0.14);
border-radius:
50%;
color:
var(--calculator-v3-primary);
font-size:
24px;
line-height:
1;
}
.calculator-v3-faq-button[aria-expanded="true"]
.calculator-v3-faq-icon {
background:
var(--calculator-v3-primary);
color:
#ffffff;
transform:
rotate(45deg);
}
.calculator-v3-faq-panel {
padding:
0 24px 22px;
border-top:
1px solid
var(--calculator-v3-border);
}
.calculator-v3-faq-panel[hidden] {
display:
none;
}
.calculator-v3-faq-panel p {
margin:
18px 0 0;
color:
var(--calculator-v3-text-light);
line-height:
1.75;
}
/*
=================================================
CALCULADORAS RELACIONADAS
=================================================
*/
.calculator-v3-related {
padding:
54px 0 20px;
}
.calculator-v3-related-grid {
display:
grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap:
20px;
}
.calculator-v3-related-card {
display:
flex;
flex-direction:
column;
min-height:
220px;
padding:
24px;
background:
#ffffff;
border:
1px solid
rgba(37, 99, 235, 0.1);
border-radius:
16px;
box-shadow:
0 10px 26px
rgba(15, 35, 70, 0.06);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.calculator-v3-related-card:hover {
transform:
translateY(-4px);
box-shadow:
0 16px 34px
rgba(15, 35, 70, 0.1);
}
.calculator-v3-related-card h3 {
margin:
0 0 10px;
color:
var(--calculator-v3-text);
font-size:
21px;
}
.calculator-v3-related-card p {
flex-grow:
1;
margin:
0 0 20px;
color:
var(--calculator-v3-text-light);
line-height:
1.7;
}
.calculator-v3-related-card a {
color:
var(--calculator-v3-primary);
font-weight:
800;
text-decoration:
none;
}
/*
=================================================
CTA
=================================================
*/
.calculator-v3-cta {
padding:
54px 0 22px;
}
.calculator-v3-cta-card {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
32px;
padding:
38px;
background:
linear-gradient(
135deg,
#102f6b,
#2563eb
);
border-radius:
var(--calculator-v3-radius);
box-shadow:
0 18px 40px
rgba(37, 99, 235, 0.18);
}
.calculator-v3-cta-card h2 {
margin:
12px 0 10px;
color:
#ffffff;
font-size:
31px;
line-height:
1.2;
}
.calculator-v3-cta-card p {
max-width:
720px;
margin:
0;
color:
rgba(255, 255, 255, 0.82);
line-height:
1.7;
}
.calculator-v3-cta-card
.calculator-v3-tag {
background:
rgba(255, 255, 255, 0.13);
border-color:
rgba(255, 255, 255, 0.2);
color:
#ffffff;
}
.calculator-v3-cta-card
.calculator-v3-button {
flex:
0 0 auto;
background:
#ffffff;
color:
var(--calculator-v3-primary);
}
/*
=================================================
HERO V3.1 — RESUMO OPCIONAL
=================================================
*/
.calculator-v3-hero-content {
display:
grid;
grid-template-columns:
minmax(0, 1fr);
align-items:
center;
gap:
32px;
max-width:
1180px;
}
.calculator-v3-hero-content:has(
.calculator-v3-hero-summary
) {
grid-template-columns:
minmax(0, 1.25fr)
minmax(280px, 0.75fr);
}
.calculator-v3-hero-copy {
min-width:
0;
}
.calculator-v3-hero-summary {
padding:
24px;
background:
linear-gradient(
145deg,
#ffffff,
#f5f8ff
);
border:
1px solid
rgba(37, 99, 235, 0.12);
border-radius:
var(--calculator-v3-radius);
box-shadow:
var(--calculator-v3-shadow);
}
.calculator-v3-hero-summary-label {
display:
block;
margin-bottom:
14px;
color:
var(--calculator-v3-primary);
font-size:
13px;
font-weight:
800;
letter-spacing:
0.08em;
text-transform:
uppercase;
}
.calculator-v3-hero-summary ul {
display:
grid;
gap:
10px;
margin:
0 0 16px;
padding:
0;
list-style:
none;
}
.calculator-v3-hero-summary li {
position:
relative;
padding-left:
22px;
color:
var(--calculator-v3-text);
line-height:
1.5;
}
.calculator-v3-hero-summary li::before {
content:
"✓";
position:
absolute;
left:
0;
color:
var(--calculator-v3-primary);
font-weight:
900;
}
.calculator-v3-hero-summary p {
margin:
0;
color:
var(--calculator-v3-text-light);
font-size:
13px;
}
/*
=================================================
ALERTAS E ESTADO VAZIO
=================================================
*/
.calculator-v3-alert,
.calculator-v3-empty-state {
padding:
18px 20px;
border:
1px solid
var(--calculator-v3-border);
border-radius:
14px;
line-height:
1.65;
}
.calculator-v3-alert strong,
.calculator-v3-empty-state strong {
display:
block;
margin-bottom:
6px;
color:
var(--calculator-v3-text);
}
.calculator-v3-alert p,
.calculator-v3-empty-state p {
margin:
0;
}
.calculator-v3-alert-info {
background:
#eff6ff;
border-color:
#bfdbfe;
color:
#1e3a8a;
}
.calculator-v3-alert-success {
background:
#effcf4;
border-color:
#bbf7d0;
color:
#166534;
}
.calculator-v3-alert-warning {
background:
#fff8e7;
border-color:
#fde68a;
color:
#92400e;
}
.calculator-v3-alert-error {
background:
#fff3f3;
border-color:
#fecaca;
color:
#991b1b;
}
.calculator-v3-empty-state {
color:
var(--calculator-v3-text-light);
background:
#f8fafc;
border-style:
dashed;
text-align:
center;
}
/*
=================================================
PROGRESSO
=================================================
*/
.calculator-v3-progress {
display:
grid;
gap:
10px;
}
.calculator-v3-progress-header {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
16px;
color:
var(--calculator-v3-text);
font-size:
14px;
}
.calculator-v3-progress-track {
overflow:
hidden;
width:
100%;
height:
12px;
background:
#e8eef8;
border-radius:
999px;
}
.calculator-v3-progress-bar {
width:
0;
height:
100%;
background:
linear-gradient(
90deg,
var(--calculator-v3-primary),
#0ea5e9
);
border-radius:
inherit;
transition:
width 0.35s ease;
}
/*
=================================================
TABS
=================================================
*/
.calculator-v3-tabs {
background:
#ffffff;
border:
1px solid
var(--calculator-v3-border);
border-radius:
var(--calculator-v3-radius-small);
overflow:
hidden;
}
.calculator-v3-tabs-list {
display:
flex;
flex-wrap:
wrap;
gap:
8px;
padding:
12px;
background:
#f7f9fd;
border-bottom:
1px solid
var(--calculator-v3-border);
}
.calculator-v3-tabs-list [role="tab"] {
min-height:
42px;
padding:
10px 16px;
background:
transparent;
border:
1px solid transparent;
border-radius:
10px;
color:
var(--calculator-v3-text-light);
font:
inherit;
font-weight:
800;
cursor:
pointer;
}
.calculator-v3-tabs-list [role="tab"][aria-selected="true"] {
background:
#ffffff;
border-color:
rgba(37, 99, 235, 0.16);
color:
var(--calculator-v3-primary);
box-shadow:
0 6px 18px
rgba(15, 35, 70, 0.06);
}
.calculator-v3-tabs-panels {
padding:
24px;
}
.calculator-v3-tabs-panels [role="tabpanel"][hidden] {
display:
none;
}
/*
=================================================
COMPARTILHAMENTO E EXPORTAÇÃO
=================================================
*/
.calculator-v3-share-actions,
.calculator-v3-export-actions {
display:
flex;
flex-wrap:
wrap;
gap:
12px;
}
.calculator-v3-share-actions button,
.calculator-v3-share-actions a,
.calculator-v3-export-actions button,
.calculator-v3-export-actions a {
display:
inline-flex;
align-items:
center;
justify-content:
center;
min-height:
44px;
padding:
10px 16px;
background:
#ffffff;
border:
1px solid
var(--calculator-v3-border);
border-radius:
10px;
color:
var(--calculator-v3-primary);
font:
inherit;
font-weight:
800;
text-decoration:
none;
cursor:
pointer;
}
/*
=================================================
UTILITÁRIOS DE ACESSIBILIDADE
=================================================
*/
.sr-only {
position:
absolute !important;
width:
1px !important;
height:
1px !important;
padding:
0 !important;
margin:
-1px !important;
overflow:
hidden !important;
clip:
rect(0, 0, 0, 0) !important;
white-space:
nowrap !important;
border:
0 !important;
}
/*
=================================================
ACESSIBILIDADE
=================================================
*/
.calculator-v3-button:focus-visible,
.calculator-v3-faq-button:focus-visible,
.calculator-v3-related-card a:focus-visible,
.calculator-v3-breadcrumb a:focus-visible,
.calculator-v3-tabs-list [role="tab"]:focus-visible,
.calculator-v3-share-actions button:focus-visible,
.calculator-v3-share-actions a:focus-visible,
.calculator-v3-export-actions button:focus-visible,
.calculator-v3-export-actions a:focus-visible {
outline:
3px solid
rgba(37, 99, 235, 0.32);
outline-offset:
3px;
}
/*
=================================================
RESPONSIVIDADE
=================================================
*/
@media (max-width: 1100px) {
.calculator-v3-hero-content:has(
.calculator-v3-hero-summary
) {
grid-template-columns:
1fr;
}
.calculator-v3-main-grid,
.calculator-v3-layout {
grid-template-columns:
1fr;
}
.calculator-v3-content-layout {
grid-template-columns:
1fr;
}
.calculator-v3-sidebar {
position:
static;
}
.calculator-v3-related-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}
}
@media (max-width: 800px) {
.calculator-v3-hero {
padding:
38px 0 30px;
}
.calculator-v3-form-grid,
.calculator-v3-result-grid,
.calculator-v3-block-grid,
.calculator-v3-comparison-grid,
.calculator-v3-chart-grid {
grid-template-columns:
1fr;
}
.calculator-v3-chart-card-wide {
grid-column:
auto;
}
.calculator-v3-result-highlight {
align-items:
flex-start;
flex-direction:
column;
}
.calculator-v3-result-highlight-value {
text-align:
left;
}
.calculator-v3-cta-card {
align-items:
flex-start;
flex-direction:
column;
}
}
@media (max-width: 620px) {
.calculator-v3-hero h1 {
font-size:
34px;
}
.calculator-v3-hero-description {
font-size:
16px;
}
.calculator-v3-hero-actions {
flex-direction:
column;
}
.calculator-v3-hero-actions
.calculator-v3-button {
width:
100%;
}
.calculator-v3-share-actions,
.calculator-v3-export-actions {
flex-direction:
column;
}
.calculator-v3-share-actions button,
.calculator-v3-share-actions a,
.calculator-v3-export-actions button,
.calculator-v3-export-actions a {
width:
100%;
}
.calculator-v3-card-body,
.calculator-v3-content-main {
padding:
22px;
}
.calculator-v3-related-grid {
grid-template-columns:
1fr;
}
.calculator-v3-related-card {
min-height:
auto;
}
.calculator-v3-faq-button {
padding:
18px;
font-size:
16px;
}
.calculator-v3-faq-panel {
padding:
0 18px 20px;
}
.calculator-v3-cta-card {
padding:
28px;
}
.calculator-v3-cta-card h2 {
font-size:
27px;
}
}
@media (max-width: 420px) {
.calculator-v3-result-item strong {
font-size:
18px;
}
.calculator-v3-table th,
.calculator-v3-table td {
padding:
13px 14px;
font-size:
14px;
}
}
/* =================================================
GRÁFICOS V3 — FALLBACK RESPONSIVO
O charts.js inteligente aplica dimensões inline.
Estas regras valem antes do cálculo ou sem JavaScript.
================================================= */
@media (max-width: 768px) {
.calculator-v3-chart-wrapper,
.calculator-v3-chart-wrapper-large {
height: 300px;
}
.calculator-v3-chart-wrapper-small {
height: 260px;
}
}
@media (max-width: 420px) {
.calculator-v3-chart-wrapper,
.calculator-v3-chart-wrapper-large {
height: 280px;
}
.calculator-v3-chart-wrapper-small {
height: 240px;
}
}