/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/76e893bc-b2f8-4325-ba61-2bee9c6830c3.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/9824e356-c439-487c-98de-fb90c9ec5421.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/76e893bc-b2f8-4325-ba61-2bee9c6830c3.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/9824e356-c439-487c-98de-fb90c9ec5421.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("assets/fonts/76e893bc-b2f8-4325-ba61-2bee9c6830c3.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("assets/fonts/9824e356-c439-487c-98de-fb90c9ec5421.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("assets/fonts/76e893bc-b2f8-4325-ba61-2bee9c6830c3.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("assets/fonts/9824e356-c439-487c-98de-fb90c9ec5421.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/869a0cdd-0091-4cd0-9dea-1f42c7451c9f.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/8f8181f5-f27f-4683-848c-597903a7c1d2.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/869a0cdd-0091-4cd0-9dea-1f42c7451c9f.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/8f8181f5-f27f-4683-848c-597903a7c1d2.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/4ab46c0b-1514-48bc-8bb0-684ffc2cc700.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/511028bb-78cc-483e-b16f-6d7c045d7b73.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/4ab46c0b-1514-48bc-8bb0-684ffc2cc700.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/511028bb-78cc-483e-b16f-6d7c045d7b73.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/0c4337e8-c7ea-499e-bc7d-5407cda8615e.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("assets/fonts/965836b1-09c1-4927-8969-b214809ee513.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/0c4337e8-c7ea-499e-bc7d-5407cda8615e.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("assets/fonts/965836b1-09c1-4927-8969-b214809ee513.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("assets/fonts/0c4337e8-c7ea-499e-bc7d-5407cda8615e.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("assets/fonts/965836b1-09c1-4927-8969-b214809ee513.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Capital.ec - Comparador de Pólizas */
:root {
/* Editorial palette: deep navy + warm cream + gold accent */
--navy: #0E1B2C;
--navy-2: #16263d;
--navy-3: #233852;
--ink: #0a1422;
--cream: #F7F5F0;
--cream-2: #efece4;
--cream-3: #e4dfd1;
--paper: #ffffff;
--gold: #C9A86A;
--gold-2: #b89556;
--gold-soft: #e8d9b6;
/* Semantic */
--good: #2f6b4e;
--good-soft: #d8e7dd;
--warn: #b07407;
--warn-soft: #f3e6c9;
--bad: #9c2e2a;
--bad-soft: #ecd6d4;
/* Type */
--serif: 'Tiempos Headline', 'Source Serif 4', 'Fraunces', 'GT Sectra', Georgia, serif;
--sans: 'Söhne', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Layout */
--maxw: 1320px;
--radius: 4px;
--radius-lg: 8px;
/* Density */
--row-pad-y: 14px;
--row-pad-x: 18px;
/* Type family applied to body via .theme-* */
--display: var(--serif);
--body: var(--sans);
}
/* DARK MODE override */
.theme-dark {
--navy: #f5f2ea;
--navy-2: #efebe1;
--navy-3: #e2dccd;
--ink: #f6f3eb;
--cream: #0c1623;
--cream-2: #142133;
--cream-3: #1c2c40;
--paper: #0a1320;
--gold: #d6b876;
--gold-2: #b89556;
--gold-soft: #2c2519;
--good: #6db48f;
--good-soft: #1a2e25;
--warn: #d9a64b;
--warn-soft: #2e2516;
--bad: #d97a73;
--bad-soft: #2e1a18;
}
/* DENSITY */
.density-compact {
--row-pad-y: 9px;
--row-pad-x: 14px;
}
/* DIRECTION variants */
.dir-fintech {
--display: var(--sans);
--body: var(--sans);
--gold: oklch(0.62 0.13 175);
--gold-2: oklch(0.55 0.13 175);
--radius: 8px;
--radius-lg: 14px;
}
.dir-institutional {
--display: var(--serif);
--body: var(--sans);
--gold: oklch(0.55 0.10 60);
--gold-2: oklch(0.48 0.10 60);
--radius: 0px;
--radius-lg: 2px;
}
/* dir-editorial = default */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--body);
background: var(--cream);
color: var(--ink);
-webkit-font-smoothing: antialiased;
font-feature-settings: 'ss01', 'cv11';
font-size: 15px;
line-height: 1.5;
}
/* TOPBAR */
.topbar {
background: var(--navy);
color: var(--cream);
border-bottom: 1px solid var(--navy-3);
}
.topbar-inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 14px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand {
font-family: var(--display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--cream);
display: flex;
align-items: baseline;
gap: 2px;
}
.brand-dot { color: var(--gold); }
.nav {
display: flex;
gap: 26px;
font-size: 13.5px;
color: rgba(247,245,240,0.8);
}
.nav a, .nav button { color: inherit; text-decoration: none; background: transparent; border: none; padding: 0; font: inherit; cursor: pointer; }
.nav a:hover, .nav button:hover { color: var(--cream); }
.nav .active { color: var(--cream); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
/* HERO */
.hero {
background: var(--navy);
color: var(--cream);
padding: 32px 28px 38px;
border-bottom: 1px solid var(--navy-3);
}
.hero-inner { max-width: var(--maxw); margin: 0 auto; }
.eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.hero h1 {
font-family: var(--display);
font-size: 48px;
line-height: 1.05;
font-weight: 500;
letter-spacing: -0.02em;
margin: 0 0 14px;
max-width: 780px;
text-wrap: balance;
}
.hero h1 em {
font-style: italic;
color: var(--gold-soft);
}
.hero p {
font-size: 17px;
color: rgba(247,245,240,0.75);
max-width: 580px;
margin: 0 0 28px;
}
/* HERO INPUT BAR */
.hero-form {
background: var(--paper);
color: var(--ink);
border-radius: var(--radius-lg);
padding: 6px;
display: flex;
align-items: stretch;
max-width: 1040px;
box-shadow: 0 24px 48px -24px rgba(0,0,0,0.4);
}
.hero-field {
flex: 1;
padding: 14px 18px;
border-right: 1px solid var(--cream-3);
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.hero-field:last-of-type { border-right: none; }
.hero-field label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: oklch(0.55 0.01 50);
}
.hero-field input,
.hero-field select {
border: none;
background: transparent;
font-family: var(--body);
font-size: 17px;
color: var(--ink);
padding: 0;
outline: none;
width: 100%;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.hero-cta {
background: var(--gold);
color: var(--navy);
border: none;
padding: 0 28px;
font-family: var(--body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: calc(var(--radius-lg) - 2px);
cursor: pointer;
transition: background 0.15s;
}
.hero-cta:hover { background: var(--gold-2); }
.hero-meta {
display: flex;
gap: 28px;
margin-top: 22px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(247,245,240,0.55);
}
.hero-meta b { color: var(--cream); font-weight: 500; }
.live-dot {
display: inline-block;
width: 6px; height: 6px;
background: var(--gold);
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
/* MAIN */
main { max-width: var(--maxw); margin: 0 auto; padding: 24px 28px 80px; }
/* SECTION HEADER */
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--cream-3);
}
.section-title {
font-family: var(--display);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0;
color: var(--ink);
}
.section-sub {
font-size: 13px;
color: oklch(0.5 0.01 50);
margin: 4px 0 0;
}
.theme-dark .section-sub { color: oklch(0.65 0.01 50); }
.section-head-right {
display: flex;
gap: 12px;
align-items: center;
}
.mobile-collapse {
margin-bottom: 18px;
}
.mobile-collapse > summary {
display: none;
cursor: pointer;
list-style: none;
user-select: none;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius-lg);
padding: 14px 16px;
}
.mobile-collapse > summary::-webkit-details-marker { display: none; }
.mobile-collapse > summary::after { content: '+'; float: right; font-size: 16px; line-height: 1; color: var(--gold); }
.mobile-collapse[open] > summary::after { content: '-'; }
.mobile .mobile-collapse > summary {
display: block;
}
.mobile .mobile-collapse > .filters,
.mobile .mobile-collapse > .allocation-card {
margin-top: 8px;
}
.mobile .advanced-collapse:not([open]),
.mobile .optimizer-collapse:not([open]) {
margin-bottom: 10px;
}
@media (max-width: 700px) {
.mobile-collapse > summary { display: block; }
.mobile-collapse > .filters,
.mobile-collapse > .allocation-card { margin-top: 8px; }
.advanced-collapse:not([open]),
.optimizer-collapse:not([open]) { margin-bottom: 10px; }
}
/* FILTER BAR */
.filters {
display: grid;
grid-template-columns: 1.3fr 1.4fr 1fr 1fr;
gap: 12px;
background: var(--paper);
padding: 18px;
border: 1px solid var(--cream-3);
border-radius: var(--radius-lg);
margin-bottom: 18px;
}
.filter {
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
}
.theme-dark .filter-label { color: oklch(0.65 0.01 50); }
.filter-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .unit-toggle { display: inline-flex; border: 1px solid var(--cream-3); border-radius: var(--radius); overflow: hidden; background: var(--paper); } .unit-toggle button { background: transparent; border: none; padding: 4px 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.5 0.01 50); cursor: pointer; } .unit-toggle button.active { background: var(--navy); color: var(--cream); } .chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
border: 1px solid var(--cream-3);
background: var(--paper);
color: var(--ink);
padding: 7px 12px;
border-radius: 100px;
font-size: 12.5px;
font-family: var(--body);
cursor: pointer;
transition: all 0.15s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.chip:hover { border-color: var(--navy-3); }
.chip.active {
background: var(--navy);
color: var(--cream);
border-color: var(--navy);
}
.theme-dark .chip { border-color: var(--cream-3); }
.theme-dark .chip.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.search-input {
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius);
padding: 9px 12px 9px 34px;
font-size: 13.5px;
font-family: var(--body);
color: var(--ink);
outline: none;
width: 100%;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 12px center;
}
.search-input:focus { border-color: var(--navy-3); } .filter-select { background: var(--paper); border: 1px solid var(--cream-3); border-radius: var(--radius); padding: 9px 12px; font-size: 13.5px; font-family: var(--body); color: var(--ink); outline: none; width: 100%; } .filter-select:focus { border-color: var(--navy-3); }
/* RESULTS COUNT */
.results-count {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 4px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
}
.theme-dark .results-count { color: oklch(0.65 0.01 50); }
.results-count .num { color: var(--ink); font-weight: 500; }
.sort-toggle {
display: flex;
gap: 0;
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius);
overflow: hidden;
}
.sort-toggle button {
background: transparent;
border: none;
padding: 7px 12px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
cursor: pointer;
}
.sort-toggle button.active { background: var(--navy); color: var(--cream); }
/* ALLOCATION OPTIMIZER */
.allocation-card {
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius-lg);
padding: 18px;
margin: 14px 0 18px;
}
.allocation-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
border-bottom: 1px solid var(--cream-3);
padding-bottom: 14px;
margin-bottom: 12px;
}
.allocation-eyebrow {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-2);
margin-bottom: 4px;
}
.allocation-head h3 {
margin: 0;
font-family: var(--display);
font-size: 22px;
font-weight: 500;
color: var(--ink);
}
.allocation-head p {
margin: 5px 0 0;
font-size: 13px;
line-height: 1.45;
color: oklch(0.5 0.01 50);
max-width: 620px;
}
.allocation-total { text-align: right; flex-shrink: 0; }
.allocation-total span {
display: block;
font-family: var(--display);
font-size: 26px;
color: var(--ink);
}
.allocation-total small {
display: block;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
}
.allocation-list { display: grid; gap: 8px; }
.allocation-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 10px 0;
border-top: 1px solid var(--cream-3);
}
.allocation-row:first-child { border-top: none; }
.allocation-rank {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--gold);
color: var(--navy);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
}
.allocation-inst strong, .allocation-money strong {
display: block;
color: var(--ink);
font-size: 13.5px;
font-weight: 500;
}
.allocation-inst span, .allocation-money span {
display: block;
margin-top: 2px;
font-family: var(--mono);
font-size: 11px;
color: oklch(0.5 0.01 50);
}
.allocation-money { text-align: right; }
.allocation-foot {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--cream-3);
font-family: var(--mono);
font-size: 11px;
color: oklch(0.5 0.01 50);
}
.mobile .allocation-head, .mobile .allocation-foot { flex-direction: column; }
.mobile .allocation-total { text-align: left; }
.mobile .allocation-row { grid-template-columns: 28px minmax(0, 1fr); }
.mobile .allocation-money { grid-column: 2; text-align: left; }
/* TABLE */
.table-wrap {
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius-lg);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
table.compare {
width: 100%;
min-width: 780px;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
table.compare thead th {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: oklch(0.45 0.01 50);
text-align: left;
padding: 14px var(--row-pad-x);
background: var(--cream-2);
border-bottom: 1px solid var(--cream-3);
font-weight: 500;
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.theme-dark table.compare thead th { color: oklch(0.7 0.01 50); }
table.compare thead th .sort-arrow { opacity: 0.6; margin-left: 4px; font-size: 9px; }
table.compare thead th.sort-active .sort-arrow { opacity: 1; color: var(--gold-2); }
table.compare thead th.num, table.compare tbody td.num { text-align: right; }
table.compare tbody tr {
border-top: 1px solid var(--cream-3);
cursor: pointer;
transition: background 0.1s;
}
table.compare tbody tr:first-child { border-top: none; }
table.compare tbody tr:hover { background: var(--cream-2); }
table.compare tbody td {
padding: var(--row-pad-y) var(--row-pad-x);
vertical-align: middle;
}
/* INSTITUTION CELL */
.inst-cell { display: flex; align-items: center; gap: 12px; }
.inst-mark {
width: 36px;
height: 36px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
color: var(--cream);
background: var(--navy);
}
.inst-mark.coop { background: #2f6b4e; }
.inst-mark.mut { background: #6b4a2f; }
.inst-mark.fin { background: #4a2f6b; }
.inst-mark.logo-chip {
background: #fff;
border: 1px solid var(--cream-3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
padding: 4px;
overflow: hidden;
}
.inst-mark.logo-chip img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.theme-dark .inst-mark.logo-chip { border-color: rgba(255, 255, 255, 0.16); }
.inst-name {
font-weight: 500;
font-size: 14.5px;
color: var(--ink);
line-height: 1.2;
}
.inst-meta {
font-size: 11.5px;
color: oklch(0.5 0.01 50);
margin-top: 2px;
display: flex;
gap: 8px;
align-items: center;
}
.theme-dark .inst-meta { color: oklch(0.65 0.01 50); }
.type-tag {
display: inline-flex;
align-items: center;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 2px;
}
.type-tag.banco { background: oklch(0.92 0.04 250); color: oklch(0.35 0.10 250); }
.type-tag.coop { background: oklch(0.92 0.04 150); color: oklch(0.35 0.10 150); }
.type-tag.mut { background: oklch(0.92 0.04 60); color: oklch(0.35 0.10 60); }
.type-tag.fin { background: oklch(0.92 0.04 300); color: oklch(0.35 0.10 300); }
.theme-dark .type-tag.banco { background: oklch(0.25 0.06 250); color: oklch(0.85 0.06 250); }
.theme-dark .type-tag.coop { background: oklch(0.25 0.06 150); color: oklch(0.85 0.06 150); }
.theme-dark .type-tag.mut { background: oklch(0.25 0.06 60); color: oklch(0.85 0.06 60); }
.theme-dark .type-tag.fin { background: oklch(0.25 0.06 300); color: oklch(0.85 0.06 300); }
/* RATE CELL */
.rate-cell {
font-family: var(--display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--ink);
}
.rate-cell .pct { font-size: 13px; color: oklch(0.5 0.01 50); margin-left: 1px; font-family: var(--body); font-weight: 400; }
.theme-dark .rate-cell .pct { color: oklch(0.65 0.01 50); }
.earnings {
font-size: 11.5px;
color: oklch(0.5 0.01 50);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.theme-dark .earnings { color: oklch(0.65 0.01 50); }
.rate-context {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-2);
margin-top: 3px;
white-space: nowrap;
}
.theme-dark .rate-context { color: var(--gold); }
/* BEST highlight */
tr.best { background: linear-gradient(90deg, var(--gold-soft) 0%, transparent 60%); }
.theme-dark tr.best { background: linear-gradient(90deg, oklch(0.25 0.06 80) 0%, transparent 60%); }
tr.best:hover { background: linear-gradient(90deg, var(--gold-soft) 0%, var(--cream-2) 60%); }
.best-marker {
display: inline-block;
background: var(--gold);
color: var(--navy);
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 2px;
margin-left: 8px;
vertical-align: middle;
font-weight: 600;
}
/* RATING badge */
.rating {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.04em;
}
.rating-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--good);
flex-shrink: 0;
}
.rating-aaa .rating-dot, .rating-aa .rating-dot { background: var(--good); }
.rating-a .rating-dot { background: var(--warn); }
.rating-b .rating-dot { background: var(--bad); }
/* COSEDE */
.cosede {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-family: var(--mono);
letter-spacing: 0.04em;
}
.cosede svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--good); }
/* ASSETS */
.assets {
font-family: var(--mono);
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.assets-sub {
font-size: 10.5px;
color: oklch(0.5 0.01 50);
font-family: var(--mono);
letter-spacing: 0.04em;
margin-top: 2px;
}
.theme-dark .assets-sub { color: oklch(0.65 0.01 50); }
/* PAY FREQ */
.pay-freq {
display: flex;
gap: 3px;
}
.pay-pill {
font-family: var(--mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
white-space: nowrap;
background: var(--cream-2);
color: oklch(0.45 0.01 50);
padding: 3px 6px;
border-radius: 2px;
}
.theme-dark .pay-pill { background: var(--cream-3); color: oklch(0.7 0.01 50); }
/* ESTIMATED MARK */
.est-mark {
display: inline-block;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--warn);
border: 1px solid var(--warn);
padding: 1px 4px;
border-radius: 2px;
margin-left: 6px;
vertical-align: middle;
}
/* CHEVRON */
.row-chevron {
color: oklch(0.6 0.01 50);
width: 14px;
height: 14px;
}
/* DRAWER */
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(10, 20, 34, 0.55);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
backdrop-filter: blur(2px);
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(620px, 100vw);
background: var(--cream);
z-index: 101;
box-shadow: -24px 0 60px -20px rgba(0,0,0,0.3);
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
background: var(--navy);
color: var(--cream);
padding: 22px 28px 24px;
position: sticky;
top: 0;
z-index: 1;
}
.drawer-close {
position: absolute;
top: 16px;
right: 16px;
background: transparent;
border: 1px solid rgba(247,245,240,0.2);
color: var(--cream);
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.drawer-close:hover { background: rgba(247,245,240,0.1); }
.drawer-eyebrow {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
.drawer-title {
font-family: var(--display);
font-size: 30px;
line-height: 1.1;
font-weight: 500;
margin: 0;
letter-spacing: -0.01em;
text-wrap: balance;
}
.drawer-meta {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px 18px;
font-size: 12px;
color: rgba(247,245,240,0.7);
font-family: var(--mono);
letter-spacing: 0.04em;
}
.drawer-meta b { color: var(--cream); font-weight: 500; }
.drawer-body { padding: 24px 28px 60px; }
.drawer-section { margin-bottom: 28px; }
.drawer-section h3 {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
margin: 0 0 12px;
font-weight: 500;
}
.theme-dark .drawer-section h3 { color: oklch(0.65 0.01 50); }
.drawer-section p {
margin: 0 0 8px;
color: var(--ink);
font-size: 14px;
line-height: 1.55;
}
/* KEY-VALUE */
.kv {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
}
.kv .k {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
margin-bottom: 3px;
}
.theme-dark .kv .k { color: oklch(0.65 0.01 50); }
.kv .v {
font-size: 14px;
color: var(--ink);
font-weight: 500;
}
.drawer-rate-card {
display: grid;
gap: 6px;
align-items: start;
margin-top: 2px;
}
.drawer-rate-main {
display: inline-flex;
align-items: flex-start;
gap: 3px;
color: var(--ink);
line-height: 0.92;
}
.drawer-rate-number {
font-family: var(--display);
font-size: 56px;
font-weight: 500;
letter-spacing: 0;
}
.drawer-rate-percent {
font-family: var(--display);
font-size: 24px;
line-height: 1;
color: var(--gold-2);
padding-top: 8px;
}
.drawer-rate-context {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
}
.drawer-alt-rate {
width: fit-content;
margin-top: 2px;
padding: 4px 7px;
border: 1px solid var(--cream-3);
background: var(--cream-2);
border-radius: 4px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: oklch(0.42 0.01 50);
}
.drawer-alt-rate b { color: var(--ink); font-weight: 600; }
.drawer-rate-earnings {
font-size: 14.5px;
line-height: 1.35;
color: var(--ink);
}
.rate-source-note {
margin: -4px 0 12px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.06em;
color: oklch(0.48 0.01 50);
line-height: 1.45;
}
.mobile .drawer-rate-number { font-size: 48px; }
.mobile .drawer-rate-percent { font-size: 21px; padding-top: 7px; }
/* RATE MATRIX */
.matrix {
border: 1px solid var(--cream-3);
border-radius: var(--radius);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-x pan-y;
background: var(--paper);
}
.matrix table { width: max-content; min-width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
.matrix th, .matrix td { padding: 8px 12px; text-align: right; }
.matrix th {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
background: var(--cream-2);
font-weight: 500;
border-bottom: 1px solid var(--cream-3);
}
.theme-dark .matrix th { color: oklch(0.65 0.01 50); }
.matrix .matrix-corner {
position: relative;
width: 126px;
min-width: 126px;
height: 58px;
padding: 0;
text-align: left;
overflow: hidden;
background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--cream-3) 50%, transparent calc(50% + 0.5px)), var(--cream-2);
}
.matrix-corner-days,
.matrix-corner-amount {
position: absolute;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
white-space: nowrap;
}
.matrix-corner-days { top: 10px; right: 12px; color: var(--gold-2); }
.matrix-corner-amount { left: 12px; bottom: 10px; }
.theme-dark .matrix-corner-days,
.theme-dark .matrix-corner-amount { color: oklch(0.65 0.01 50); }
.theme-dark .matrix-corner-days { color: var(--gold-2); }
.matrix th:first-child, .matrix td:first-child { text-align: left; font-family: var(--mono); font-size: 11px; color: oklch(0.5 0.01 50); white-space: nowrap; min-width: 112px; }
.theme-dark .matrix td:first-child { color: oklch(0.65 0.01 50); }
.matrix tbody tr { border-top: 1px solid var(--cream-3); }
.matrix tbody tr:first-child { border-top: none; }
.matrix .best-cell { background: var(--gold-soft); color: var(--ink); font-weight: 600; }
.matrix-rate-stack { display: grid; gap: 3px; justify-items: end; min-width: 76px; }
.matrix-rate-line { display: grid; grid-template-columns: auto auto; gap: 6px; align-items: baseline; justify-content: end; white-space: nowrap; }
.matrix-rate-value { font-weight: 600; }
.matrix-rate-channel { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.48 0.02 70); }
.matrix-rate-line.presencial .matrix-rate-value { font-weight: 500; color: oklch(0.42 0.01 50); }
.matrix-rate-line.presencial .matrix-rate-channel { color: oklch(0.54 0.01 50); }
.theme-dark .matrix .best-cell { background: oklch(0.30 0.08 80); color: var(--ink); }
@media (max-width: 700px) {
.drawer-body { padding-left: 18px; padding-right: 18px; }
.matrix { margin-left: -2px; margin-right: -2px; }
.matrix table { min-width: 760px; }
.matrix th, .matrix td { padding: 10px 14px; }
}
/* COSEDE EXPLAINER */
.cosede-card {
background: var(--good-soft);
border-left: 3px solid var(--good);
padding: 14px 16px;
border-radius: 2px;
font-size: 13.5px;
}
.cosede-card b { color: var(--good); }
/* DISCLAIMER */
.disclaimer {
font-size: 12px;
color: oklch(0.5 0.01 50);
line-height: 1.5;
border-top: 1px solid var(--cream-3);
padding-top: 16px;
margin-top: 8px;
}
.theme-dark .disclaimer { color: oklch(0.65 0.01 50); }
/* MOBILE CARD */
.cards { display: flex; flex-direction: column; gap: 12px; }
.card {
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius-lg);
padding: 16px;
cursor: pointer;
position: relative;
}
.card.best { border-color: var(--gold); border-width: 1.5px; background: linear-gradient(135deg, var(--gold-soft) 0%, var(--paper) 68%); box-shadow: 0 10px 24px -20px var(--gold-2); } .theme-dark .card.best { background: linear-gradient(135deg, oklch(0.25 0.06 80) 0%, var(--paper) 68%); } .mobile-best-marker { display: inline-block; background: var(--gold); color: var(--navy); font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 6px; border-radius: 2px; margin-top: 6px; font-weight: 600; }
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.card-rate {
font-family: var(--display);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1;
}
.card-rate .pct { font-size: 14px; color: oklch(0.5 0.01 50); }
.theme-dark .card-rate .pct { color: oklch(0.65 0.01 50); }
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 16px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--cream-3);
}
.card-kv .k {
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
margin-bottom: 2px;
}
.theme-dark .card-kv .k { color: oklch(0.65 0.01 50); }
.card-kv .v { font-size: 13px; }
.card-expand {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--cream-3);
}
/* LEARN */
.learn-section {
max-width: var(--maxw);
margin: 0 auto;
padding: 44px 28px 88px;
border-top: 1px solid var(--cream-3);
}
.learn-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-2);
margin-bottom: 10px;
}
.learn-head {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.7fr);
gap: 32px;
align-items: end;
margin-bottom: 24px;
}
.learn-head h2 {
margin: 0;
font-family: var(--display);
font-size: 34px;
line-height: 1.08;
font-weight: 500;
color: var(--ink);
}
.learn-head p,
.learn-panel p,
.learn-note,
.faq-section p,
.learn-tax p {
color: oklch(0.42 0.01 50);
line-height: 1.55;
}
.learn-grid {
display: grid;
grid-template-columns: 1.2fr 0.9fr 0.9fr;
gap: 14px;
margin-bottom: 16px;
}
.learn-grid.two { grid-template-columns: 1fr 1fr; }
.learn-panel,
.learn-table-wrap,
.learn-tax,
.faq-section,
.learn-sources {
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius-lg);
padding: 18px;
}
.learn-panel h3,
.learn-table-head h3,
.learn-tax h3,
.faq-section h3,
.learn-sources h3 {
margin: 0 0 8px;
font-family: var(--display);
font-size: 22px;
font-weight: 500;
color: var(--ink);
}
.learn-panel p { margin: 0 0 8px; font-size: 14px; }
.learn-panel p:last-child { margin-bottom: 0; }
.about-founder {
display: grid;
grid-template-columns: 170px minmax(0, 1fr);
gap: 20px;
align-items: center;
}
.about-founder-photo {
width: 170px;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius);
background: var(--cream-2);
border: 1px solid var(--cream-3);
}
.about-founder-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.about-founder-copy h3 { margin-top: 0; }
.mobile .about-founder {
grid-template-columns: 1fr;
align-items: start;
}
.mobile .about-founder-photo {
width: min(180px, 58vw);
}
.learn-table-wrap { margin: 16px 0; overflow-x: auto; }
.learn-table-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: end;
margin-bottom: 12px;
}
.learn-table-head p { margin: 0; color: oklch(0.5 0.01 50); font-size: 13px; }
.learn-table {
width: 100%;
min-width: 650px;
border-collapse: collapse;
font-size: 13.5px;
}
.learn-table th {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: left;
color: oklch(0.5 0.01 50);
background: var(--cream-2);
}
.learn-table th,
.learn-table td {
padding: 11px 12px;
border-top: 1px solid var(--cream-3);
vertical-align: top;
}
.learn-table tbody tr:first-child td { border-top: none; }
.learn-table td:first-child { font-weight: 600; color: var(--ink); }
.coverage-table td:last-child {
font-family: var(--mono);
color: var(--ink);
white-space: nowrap;
}
.learn-note { margin: 12px 0 0; font-size: 12.5px; }
.rate-sources-guide { margin: 16px 0; }
.rate-sources-guide ol {
margin: 10px 0 0 20px;
padding: 0;
color: oklch(0.42 0.01 50);
line-height: 1.55;
font-size: 13.5px;
}
.rate-sources-guide li { margin: 6px 0; }
.learn-tax {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 18px;
align-items: start;
margin: 16px 0;
}
.learn-tax .learn-note { grid-column: 1 / -1; }
.tax-example {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 14px;
padding: 14px;
border: 1px solid var(--cream-3);
background: var(--cream-2);
border-radius: var(--radius);
font-family: var(--mono);
font-size: 12px;
}
.tax-example strong { text-align: right; color: var(--ink); }
.faq-section { margin: 16px 0; }
.faq-section details {
border-top: 1px solid var(--cream-3);
padding: 12px 0;
}
.faq-section details:first-of-type { border-top: none; }
.faq-section summary {
cursor: pointer;
font-weight: 600;
color: var(--ink);
}
.faq-section p { margin: 8px 0 0; font-size: 13.5px; }
.learn-sources {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.learn-sources h3 { width: 100%; margin-bottom: 2px; }
.learn-sources a {
color: var(--navy);
border: 1px solid var(--cream-3);
background: var(--cream-2);
padding: 7px 9px;
border-radius: var(--radius);
text-decoration: none;
font-size: 12px;
}
.learn-sources a:hover { border-color: var(--gold-2); }
.mobile .learn-section { padding: 28px 16px 60px; }
.mobile .learn-head,
.mobile .learn-grid,
.mobile .learn-grid.two,
.mobile .learn-tax { grid-template-columns: 1fr; }
.mobile .learn-head h2 { font-size: 27px; }
.mobile .learn-table { min-width: 600px; }
/* HELP / FOOTER strip */
.trust-strip {
margin-top: 32px;
padding: 24px 0;
border-top: 1px solid var(--cream-3);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.trust-item h4 {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: oklch(0.5 0.01 50);
margin: 0 0 6px;
font-weight: 500;
}
.theme-dark .trust-item h4 { color: oklch(0.65 0.01 50); }
.trust-item p {
margin: 0;
font-size: 13px;
color: var(--ink);
line-height: 1.45;
}
.trust-item .big {
font-family: var(--display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 2px;
}
/* VIEWPORT TOGGLE BUTTON */
.viewport-toggle {
display: inline-flex;
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius);
overflow: hidden;
}
.viewport-toggle button {
background: transparent;
border: none;
width: 32px;
height: 32px;
cursor: pointer;
color: oklch(0.5 0.01 50);
display: flex;
align-items: center;
justify-content: center;
}
.viewport-toggle button.active {
background: var(--navy);
color: var(--cream);
}
.theme-toggle {
background: var(--paper);
border: 1px solid var(--cream-3);
border-radius: var(--radius);
width: 32px;
height: 32px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: oklch(0.5 0.01 50);
}
.theme-toggle:hover { color: var(--ink); }
/* MOBILE FRAME */
.mobile-frame-wrap {
background: var(--cream-2);
padding: 36px 0 60px;
min-height: 100vh;
display: flex;
justify-content: center;
}
.mobile-canvas {
width: 390px;
background: var(--cream);
border-radius: 28px;
overflow: hidden;
box-shadow: 0 30px 60px -30px rgba(0,0,0,0.3);
border: 8px solid #1a1a1a;
}
/* MOBILE ADAPTATIONS */
.mobile .topbar-inner { padding: 12px 16px; }
.mobile .topbar-inner { align-items: flex-start; gap: 10px; } .mobile .nav { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; line-height: 1.2; justify-content: flex-end; width: 100%; text-align: right; } .mobile .nav a, .mobile .nav button { padding-bottom: 2px; }
.mobile .hero { padding: 22px 16px 18px; }
.mobile .hero h1 { font-size: 28px; }
.mobile .hero p { font-size: 14px; margin-bottom: 18px; }
.mobile .hero-form { flex-direction: column; padding: 4px; }
.mobile .hero-field { border-right: none; border-bottom: 1px solid var(--cream-3); padding: 10px 14px; }
.mobile .hero-field:last-of-type { border-bottom: none; }
.mobile .hero-cta { padding: 14px; margin-top: 4px; }
.mobile .hero-meta { flex-direction: column; gap: 6px; font-size: 10.5px; }
.mobile main { padding: 14px 16px 60px; }
.mobile .section-head { flex-direction: column; align-items: flex-start; }
.mobile .section-title { font-size: 22px; }
.mobile .filters { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
.mobile .trust-strip { grid-template-columns: 1fr 1fr; gap: 16px; }
.mobile .drawer { width: 100%; }
.mobile .results-count { flex-direction: column; align-items: flex-start; gap: 8px; }
/* small phone tweaks for ios frame */
.mobile .mobile-canvas-inner { font-size: 13px; }
/* FOCUS visibility */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* Tweaks panel above everything */
[data-tweaks-root] { z-index: 9999; }
/* HERO badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(247,245,240,0.06);
border: 1px solid rgba(247,245,240,0.12);
padding: 6px 12px;
border-radius: 100px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(247,245,240,0.7);
margin-bottom: 22px;
}
.hero-badge .live-dot { margin: 0; }
/* select native */
select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 18px;
}
.hero-field select { background-position: right 0 center; }
/* anim fade in */
.fade-in { animation: fadein 0.3s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Production mobile nav refinement */
@media (max-width: 760px) {
.mobile .topbar-inner {
align-items: center !important;
gap: 8px !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.mobile .brand {
flex: 0 0 auto !important;
font-size: 19px !important;
}
.mobile .nav {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
gap: 8px !important;
align-items: center !important;
justify-content: flex-end !important;
}
.mobile .nav button:not(.alert-nav-btn) {
font-size: 11.5px !important;
}
.mobile .alert-nav-btn {
width: 72px !important;
min-height: 48px !important;
padding: 6px 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.05 !important;
font-size: 0 !important;
}
.mobile .alert-nav-btn::before {
content: "Mantente\A informado";
white-space: pre-line;
font-size: 10.5px;
font-weight: 700;
}
}
@media (max-width: 390px) {
.mobile .topbar-inner {
padding-left: 10px !important;
padding-right: 10px !important;
}
.mobile .brand {
font-size: 18px !important;
}
.mobile .nav {
gap: 7px !important;
}
.mobile .nav button:not(.alert-nav-btn) {
font-size: 11px !important;
}
.mobile .alert-nav-btn {
width: 68px !important;
}
.mobile .alert-nav-btn::before {
font-size: 10px;
}
}
/* Page visibility — driven by body[data-page] set on every nav click */
body:not([data-page="comparador"]) .hero,
body:not([data-page="comparador"]) #comparador,
body:not([data-page="comparador"]) .trust-strip { display: none !important; }
body:not([data-page="aprende"]) #aprende { display: none !important; }
body:not([data-page="acerca"]) #acerca-de { display: none !important; }