Teste
/* ============================================================
LANDING TIVIO CAPITAL · v3.6
Design System v1.2 · Dark padrão · Glassmorphism
============================================================ */
:root{
–tv-verde:#C1F4D4; –tv-verde-escuro:#92D3AB;
–tv-verde-light-accent:#337F51; –tv-verde-ink:#0A2415;
–tv-preto:#000; –tv-branco:#FFF; –tv-offwhite:#E6EDF1;
–tv-azul-escuro:#3C4A60; –tv-azul:#759DB4; –tv-cinza:#637881;
–tv-cinza-claro:#ABC6CD; –tv-azul-imob:#C8D7E0;
–bg-base:#0A0F14; –bg-elev-1:#12181F;
–bg-glass:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
–bg-glass-strong:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
–bg-radial:radial-gradient(1200px 800px at 15% -10%,rgba(193,244,212,.10),transparent 60%),
radial-gradient(900px 700px at 110% 10%,rgba(117,157,180,.08),transparent 60%),
radial-gradient(700px 500px at 50% 100%,rgba(193,244,212,.06),transparent 70%);
–text-primary:#FFF; –text-secondary:#E6EDF1; –text-muted:#8A99A3;
–line:rgba(255,255,255,.10); –line-strong:rgba(255,255,255,.18);
–header-bg:rgba(10,15,20,.65); –input-bg:rgba(255,255,255,.03);
–accent-strong:var(–tv-verde);
–pill-bg:rgba(193,244,212,.10); –pill-border:rgba(193,244,212,.35);
–glow:0 0 60px rgba(193,244,212,.15);
}
:root[data-theme=”light”]{
–bg-base:#EEF3F6; –bg-elev-1:#FFF;
–bg-glass:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.45));
–bg-glass-strong:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.70));
–bg-radial:radial-gradient(1200px 800px at 15% -10%,rgba(51,127,81,.12),transparent 60%),
radial-gradient(900px 700px at 110% 10%,rgba(117,157,180,.10),transparent 60%),
radial-gradient(700px 500px at 50% 100%,rgba(146,211,171,.15),transparent 70%);
–text-primary:#0A0F14; –text-secondary:#12181F; –text-muted:#4a5a66;
–line:rgba(10,15,20,.08); –line-strong:rgba(10,15,20,.18);
–header-bg:rgba(255,255,255,.75); –input-bg:rgba(10,15,20,.02);
–accent-strong:var(–tv-verde-light-accent);
–pill-bg:rgba(51,127,81,.08); –pill-border:rgba(51,127,81,.32);
–glow:0 0 60px rgba(51,127,81,.12);
}
:root{
–ff:”Versos”,”Helvetica Neue”,Helvetica,Arial,sans-serif;
–r-sm:8px; –r-md:12px; –r-lg:20px; –r-xl:28px; –r-full:999px;
–container:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
font-family:var(–ff); font-weight:300; font-size:15px; line-height:1.55;
color:var(–text-secondary);
background:var(–bg-radial),var(–bg-base);
-webkit-font-smoothing:antialiased;
transition:background-color .3s,color .3s; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.container{max-width:var(–container); margin:0 auto; padding:0 24px; position:relative}
/* HEADER */
.header{position:sticky; top:0; z-index:30; background:var(–header-bg);
backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(–line)}
.header .inner{max-width:var(–container); margin:0 auto; display:flex; align-items:center;
justify-content:space-between; padding:16px 24px; gap:24px}
.header .logo-mark{height:42px; width:auto; color:var(–text-primary)}
.header nav{display:flex; gap:28px; font-size:13px; font-weight:600; color:var(–text-muted)}
.header nav a{transition:color .2s}
.header nav a:hover{color:var(–accent-strong)}
.theme-toggle{display:inline-flex; align-items:center; gap:4px; padding:4px;
border-radius:var(–r-full); background:var(–input-bg); border:1px solid var(–line-strong)}
.theme-toggle button{background:transparent; border:0; cursor:pointer; width:30px; height:30px;
border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
color:var(–text-muted); transition:color .2s,background .2s}
.theme-toggle button:hover{color:var(–text-primary)}
.theme-toggle button.active{background:var(–tv-verde); color:var(–tv-preto)}
:root[data-theme=”light”] .theme-toggle button.active{background:var(–tv-verde-light-accent); color:var(–tv-branco)}
.theme-toggle svg{width:15px; height:15px}
/* BUTTONS */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 22px;
border-radius:var(–r-full); font-family:inherit; font-size:14px; font-weight:600;
border:1px solid transparent; cursor:pointer; text-decoration:none; transition:all .2s ease}
.btn-primary{background:var(–tv-verde); color:var(–tv-preto)}
.btn-primary:hover{background:var(–tv-verde-escuro); transform:translateY(-1px); box-shadow:var(–glow)}
:root[data-theme=”light”] .btn-primary{background:var(–tv-verde-light-accent); color:var(–tv-branco)}
:root[data-theme=”light”] .btn-primary:hover{background:var(–tv-verde-ink)}
.btn-glass{background:var(–bg-glass); color:var(–text-primary);
border:1px solid var(–line-strong); backdrop-filter:blur(12px)}
.btn-glass:hover{border-color:var(–accent-strong); color:var(–accent-strong)}
.btn-sm{padding:8px 16px; font-size:12px}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
/* HERO */
.hero{position:relative; overflow:hidden; padding:80px 0; border-bottom:1px solid var(–line)}
.hero-curves{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;
color:var(–text-primary); opacity:.18}
:root[data-theme=”light”] .hero-curves{color:var(–tv-verde-light-accent); opacity:.35}
.hero-curves path{stroke-dasharray:3500; stroke-dashoffset:3500; animation:draw-curve 1.2s ease-out forwards}
.hero-curves .c2{animation-delay:.15s}
.hero-curves .c3{animation-delay:.3s}
@keyframes draw-curve{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hero-curves path{stroke-dashoffset:0; animation:none}}
.hero-content{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.1fr;
gap:48px; align-items:center; margin-bottom:56px}
@media(max-width:900px){.hero-content{grid-template-columns:1fr; gap:40px}}
.hero-brand{display:flex; align-items:center; justify-content:center; position:relative;
opacity:0; animation:brand-zoom-in .75s cubic-bezier(.16,.84,.28,1) 0s forwards}
.hero-brand svg{width:100%; max-width:380px; height:auto; color:var(–text-primary);
transform-origin:center center}
.hero-brand svg path{animation:brand-path-in .6s cubic-bezier(.22,.9,.32,1) .1s both}
@keyframes brand-zoom-in{
0%{opacity:0; transform:translateY(24px) scale(.82) rotate(-2deg)}
55%{opacity:1; transform:translateY(0) scale(1.04) rotate(0)}
100%{opacity:1; transform:translateY(0) scale(1) rotate(0)}
}
@keyframes brand-path-in{0%{opacity:0; filter:blur(6px)} 100%{opacity:1; filter:blur(0)}}
.hero-statement{opacity:0; animation:slide-fade-in .55s cubic-bezier(.22,.9,.32,1) .2s forwards}
.hero-statement h1{font-size:clamp(26px,2.6vw,34px); line-height:1.25; letter-spacing:-.01em;
font-weight:400; color:var(–text-primary); margin:0 0 24px}
.hero-tags{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; opacity:0;
animation:slide-fade-in .55s cubic-bezier(.22,.9,.32,1) .35s forwards}
.numbers-about-grid{opacity:0; animation:slide-fade-in .55s cubic-bezier(.22,.9,.32,1) .45s forwards}
@keyframes slide-fade-in{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
/* Tag Bradesco */
.bradesco-tag{display:inline-flex; align-items:center; gap:20px; padding:16px 24px;
border-radius:14px;
background:linear-gradient(135deg,rgba(204,9,47,.10),rgba(139,6,32,.04)),var(–bg-glass);
border:1px solid rgba(204,9,47,.35); backdrop-filter:blur(14px) saturate(160%);
color:var(–text-primary); font-family:inherit; cursor:pointer; text-decoration:none;
transition:transform .25s,border-color .25s,box-shadow .25s; position:relative; overflow:hidden}
:root[data-theme=”light”] .bradesco-tag{
background:linear-gradient(135deg,rgba(204,9,47,.06),rgba(139,6,32,.02)),var(–bg-glass);
border-color:rgba(204,9,47,.30)}
.bradesco-tag::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 55%);
pointer-events:none; border-radius:inherit}
:root[data-theme=”light”] .bradesco-tag::before{background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 55%)}
.bradesco-tag:hover{transform:translateY(-2px); border-color:#CC092F; box-shadow:0 12px 36px rgba(204,9,47,.30)}
.bradesco-tag .tag-content{display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; text-align:center}
.bradesco-tag .tag-label{font-size:10px; font-weight:700; letter-spacing:.28em;
text-transform:uppercase; color:var(–text-muted); white-space:nowrap; text-align:center}
.bradesco-inline{height:40px; width:auto; color:#CC092F; flex-shrink:0; transition:transform .25s,filter .25s}
.bradesco-tag:hover .bradesco-inline{transform:scale(1.04); filter:drop-shadow(0 4px 12px rgba(204,9,47,.35))}
/* Tag Awards */
.awards-tag{display:inline-flex; align-items:center; gap:14px; padding:16px 24px;
border-radius:14px;
background:linear-gradient(135deg,rgba(245,200,106,.12),rgba(212,163,71,.04)),var(–bg-glass);
border:1px solid rgba(245,200,106,.42); backdrop-filter:blur(14px) saturate(160%);
color:var(–text-primary); font-family:inherit; cursor:pointer; text-decoration:none;
transition:transform .25s,border-color .25s,box-shadow .25s; position:relative; overflow:hidden}
:root[data-theme=”light”] .awards-tag{
background:linear-gradient(135deg,rgba(180,132,42,.10),rgba(140,100,20,.03)),var(–bg-glass);
border-color:rgba(180,132,42,.40)}
.awards-tag::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 55%);
pointer-events:none; border-radius:inherit}
:root[data-theme=”light”] .awards-tag::before{background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 55%)}
.awards-tag:hover{transform:translateY(-2px); border-color:#F5C86A; box-shadow:0 12px 36px rgba(245,200,106,.28)}
:root[data-theme=”light”] .awards-tag:hover{border-color:#B4842A; box-shadow:0 12px 36px rgba(180,132,42,.20)}
.awards-tag .awards-trophy{width:32px; height:32px; color:#F5C86A; flex-shrink:0; transition:transform .25s,filter .25s}
:root[data-theme=”light”] .awards-tag .awards-trophy{color:#B4842A}
.awards-tag:hover .awards-trophy{transform:rotate(-6deg) scale(1.06); filter:drop-shadow(0 4px 12px rgba(245,200,106,.5))}
.awards-tag .tag-content{display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; text-align:center}
.awards-tag .tag-label{font-size:10px; font-weight:700; letter-spacing:.28em;
text-transform:uppercase; color:var(–text-muted); white-space:nowrap; text-align:center}
.awards-tag .awards-brands{display:inline-flex; align-items:center; gap:10px;
font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1}
.awards-tag .brand-fgv{color:var(–text-primary); font-family:var(–ff)}
.awards-tag .brand-outliers{color:#F5C86A; font-family:var(–ff)}
:root[data-theme=”light”] .awards-tag .brand-outliers{color:#B4842A}
.awards-tag .brand-sep{color:var(–text-muted); font-weight:300}
/* Big numbers */
.numbers-about-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:stretch;
position:relative; z-index:1}
@media(max-width:1000px){.numbers-about-grid{grid-template-columns:1fr; gap:20px}}
.big-numbers{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-content:stretch}
@media(max-width:560px){.big-numbers{grid-template-columns:1fr}}
.bn{padding:28px 22px 28px 26px; min-height:148px;
border:1px solid var(–line); border-left:3px solid var(–accent-strong);
background:var(–bg-glass); border-radius:0 var(–r-md) var(–r-md) 0;
backdrop-filter:blur(16px) saturate(140%);
transition:transform .25s,border-color .25s; position:relative; overflow:hidden}
.bn::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 55%); pointer-events:none}
.bn:hover{transform:translateY(-2px)}
.bn .n{display:flex; align-items:baseline; gap:4px; font-size:52px; font-weight:700;
letter-spacing:-.03em; color:var(–accent-strong); line-height:1; position:relative}
.bn .n .plus{font-size:36px; font-weight:700; margin-right:4px}
.bn .n small{font-size:inherit; font-weight:700; color:var(–accent-strong); margin-left:6px}
.bn .k{font-size:13px; color:var(–text-muted); margin-top:14px; letter-spacing:.02em;
font-weight:500; position:relative; line-height:1.35}
.bn .source{position:absolute; bottom:8px; right:12px; font-size:10px; color:var(–text-muted);
opacity:.6; font-family:ui-monospace,monospace}
.hero-about{padding:32px 30px; border-radius:var(–r-lg); background:var(–bg-glass);
border:1px solid var(–line); backdrop-filter:blur(16px) saturate(140%);
position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center}
.hero-about::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 55%); pointer-events:none; border-radius:inherit}
:root[data-theme=”light”] .hero-about::before{background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 55%)}
.hero-about p{margin:0 0 14px; font-size:14px; line-height:1.7; color:var(–text-secondary);
font-weight:300; position:relative}
.hero-about p:last-child{margin:0}
.hero-about strong{color:var(–text-primary); font-weight:700}
@media(max-width:700px){.hero-about{padding:24px 22px} .hero-about p{font-size:13.5px}}
/* Sections */
section.block{padding:96px 0; position:relative}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
margin-bottom:48px; flex-wrap:wrap}
.section-head .num{font-size:11px; letter-spacing:.28em; text-transform:uppercase;
color:var(–accent-strong); font-weight:700}
.section-head h2{font-size:clamp(32px,3.8vw,48px); font-weight:300; letter-spacing:-.01em;
color:var(–text-primary); margin:8px 0 0}
.section-head h2 em{font-style:normal; font-weight:700}
.section-head p{color:var(–text-muted); max-width:480px; margin:0}
/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(32px);
transition:opacity .8s cubic-bezier(.22,.9,.32,1),transform .8s cubic-bezier(.22,.9,.32,1);
will-change:opacity,transform}
.reveal.is-visible{opacity:1; transform:translateY(0)}
.reveal-scale{transform:translateY(24px) scale(.94)}
.reveal-scale.is-visible{transform:translateY(0) scale(1)}
.reveal-stagger > *{opacity:0; transform:translateY(28px);
transition:opacity .7s cubic-bezier(.22,.9,.32,1),transform .7s cubic-bezier(.22,.9,.32,1)}
.reveal-stagger.is-visible > *{opacity:1; transform:translateY(0)}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.55s}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.65s}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.75s}
@media(prefers-reduced-motion:reduce){.reveal,.reveal-stagger > *{animation:none; opacity:1; transform:none; transition:none}}
/* Verticais */
.verticais{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
@media(max-width:1100px){.verticais{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.verticais{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.verticais{grid-template-columns:1fr}}
.vertical{border-radius:var(–r-lg); overflow:hidden; border:1px solid var(–line);
background:var(–bg-glass); backdrop-filter:blur(16px) saturate(140%);
padding:32px 24px 28px; position:relative;
transition:transform .25s,border-color .25s,box-shadow .25s;
min-height:320px; display:flex; flex-direction:column; justify-content:space-between;
cursor:pointer; –v-color:var(–accent-strong)}
.vertical::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,color-mix(in srgb,var(–v-color) 12%,transparent),transparent 55%);
pointer-events:none}
.vertical:hover{transform:translateY(-4px); border-color:var(–v-color);
box-shadow:0 12px 32px color-mix(in srgb,var(–v-color) 20%,transparent)}
.vertical .top-bar{position:absolute; top:0; left:0; right:0; height:3px; background:var(–v-color)}
.vertical h3{font-size:22px; font-weight:700; color:var(–text-primary);
margin:12px 0 10px; letter-spacing:-.01em; position:relative}
.vertical p{font-size:13px; color:var(–text-muted); margin:0 0 16px; line-height:1.55; position:relative}
.vertical p em{font-style:italic; color:var(–text-secondary); font-weight:500}
.vertical .estrategias{display:flex; flex-wrap:wrap; gap:6px; position:relative}
.vertical .estrategias span{font-size:11px; padding:5px 12px; border-radius:var(–r-full);
background:color-mix(in srgb,var(–v-color) 22%,transparent);
color:var(–v-color);
border:1px solid color-mix(in srgb,var(–v-color) 45%,transparent);
font-weight:700; letter-spacing:.02em}
:root[data-theme=”light”] .vertical .estrategias span{
color:color-mix(in srgb,var(–v-color) 100%,#000 35%);
background:color-mix(in srgb,var(–v-color) 40%,transparent);
border-color:color-mix(in srgb,var(–v-color) 65%,transparent)}
.vertical.v-invest .estrategias span,
.vertical.v-private .estrategias span{
background:var(–v-color); color:#FFF;
border-color:color-mix(in srgb,var(–v-color) 100%,#FFF 15%);
}
:root[data-theme=”light”] .vertical.v-invest .estrategias span,
:root[data-theme=”light”] .vertical.v-private .estrategias span{
background:var(–v-color); color:#FFF; border-color:var(–v-color);
}
.vertical .mono-bg{position:absolute; right:-30px; bottom:-40px; width:140px; height:140px;
color:var(–v-color); opacity:.10; pointer-events:none}
.vertical.v-credito{–v-color:#92D3AB}
.vertical.v-imobiliario{–v-color:#C8D7E0}
.vertical.v-energia{–v-color:#92D3AB}
.vertical.v-invest{–v-color:#759DB4}
.vertical.v-private{–v-color:#3C4A60}
:root[data-theme=”light”] .vertical.v-imobiliario{–v-color:#7a95a8}
:root[data-theme=”light”] .vertical.v-private{–v-color:#3C4A60}
/* Como investir */
.produtos{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.produtos-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.produtos-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.produtos,.produtos-3{grid-template-columns:1fr}}
.produto{border-radius:var(–r-xl); overflow:hidden; border:1px solid var(–line);
background:var(–bg-glass); backdrop-filter:blur(20px) saturate(140%); padding:40px; position:relative}
.produto::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 55%); pointer-events:none}
.produto > *{position:relative}
.produto .badge{display:inline-block; padding:5px 14px; border-radius:var(–r-full);
font-size:10px; letter-spacing:.28em; text-transform:uppercase; font-weight:700;
background:var(–pill-bg); color:var(–accent-strong); border:1px solid var(–pill-border); margin-bottom:20px}
.produto h3{font-size:28px; font-weight:400; letter-spacing:-.01em; color:var(–text-primary); margin:0 0 12px}
.produto h3 strong{font-weight:700; color:var(–accent-strong)}
.produto p{color:var(–text-muted); font-size:14px; margin:0 0 24px; line-height:1.6}
.produto p strong{color:var(–text-primary); font-weight:700}
.produto .features{list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:12px}
.produto .features li{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(–text-secondary)}
.produto .features li::before{content:””; width:6px; height:6px; border-radius:50%;
background:var(–accent-strong); margin-top:7px; flex-shrink:0}
.produto .features li .inline-link{display:inline-flex; align-items:center; gap:6px;
color:var(–accent-strong); font-weight:700; text-decoration:none;
border-bottom:1px dashed color-mix(in srgb,var(–accent-strong) 40%,transparent);
padding-bottom:1px; transition:color .2s,border-color .2s}
.produto .features li .inline-link:hover{color:var(–text-primary); border-bottom-color:var(–accent-strong)}
.produto .features li .inline-link .arrow{font-size:12px; transition:transform .2s}
.produto .features li .inline-link:hover .arrow{transform:translate(2px,-2px)}
.produto .features li .inline-link-btn{
background:transparent; border:0; padding:0 0 1px; margin:0;
font-family:inherit; font-size:inherit; cursor:pointer;
border-bottom:1px dashed color-mix(in srgb,var(–accent-strong) 40%,transparent);
}
.produto .features li .inline-link-btn:hover .arrow{transform:rotate(90deg)}
/* Fundos */
.tabs{display:flex; gap:4px; margin-bottom:32px; padding:4px; border-radius:var(–r-full);
background:var(–input-bg); border:1px solid var(–line-strong); backdrop-filter:blur(12px);
width:fit-content; flex-wrap:wrap}
.tabs button{padding:10px 22px; border:0; border-radius:var(–r-full);
background:transparent; color:var(–text-muted); font-family:inherit; font-size:13px;
font-weight:600; cursor:pointer; transition:all .2s; –tab-color:var(–accent-strong)}
.tabs button[data-tab=”credito”]{–tab-color:#92D3AB}
.tabs button[data-tab=”imobiliario”]{–tab-color:#C8D7E0}
.tabs button[data-tab=”previdencia”]{–tab-color:var(–accent-strong)}
:root[data-theme=”light”] .tabs button[data-tab=”imobiliario”]{–tab-color:#7a95a8}
.tabs button.active{background:var(–tab-color); color:var(–tv-verde-ink)}
.tabs button[data-tab=”previdencia”].active{color:var(–tv-preto)}
:root[data-theme=”light”] .tabs button[data-tab=”previdencia”].active{color:var(–tv-branco)}
.tabs button:not(.active):hover{color:var(–text-primary)}
.fund-list{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; –tab-color:var(–accent-strong)}
.fund-list#tab-credito{–tab-color:#92D3AB}
.fund-list#tab-imobiliario{–tab-color:#C8D7E0}
.fund-list#tab-previdencia{–tab-color:var(–accent-strong)}
:root[data-theme=”light”] .fund-list#tab-imobiliario{–tab-color:#7a95a8}
@media(max-width:900px){.fund-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fund-list{grid-template-columns:1fr}}
.fund{padding:20px; border-radius:var(–r-md); border:1px solid var(–line);
background:var(–bg-glass); backdrop-filter:blur(14px) saturate(140%);
display:flex; flex-direction:column; gap:12px;
transition:transform .2s,border-color .2s,box-shadow .2s;
cursor:pointer; position:relative; overflow:hidden}
.fund::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,color-mix(in srgb,var(–tab-color) 8%,transparent),transparent 55%);
pointer-events:none}
.fund > *{position:relative}
.fund:hover{transform:translateY(-3px); border-color:var(–tab-color);
box-shadow:0 12px 28px color-mix(in srgb,var(–tab-color) 20%,transparent)}
.fund .fund-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.fund .name{font-size:14px; font-weight:700; color:var(–text-primary); letter-spacing:.02em; line-height:1.35}
.fund .type{font-size:10px; color:var(–text-muted); text-transform:uppercase; letter-spacing:.18em; font-weight:700}
.fund .arrow-icon{align-self:flex-start; color:var(–tab-color); font-size:18px; margin-top:2px}
.fund .ticker{font-family:var(–ff); font-size:12px; font-weight:700;
padding:5px 14px; border-radius:var(–r-sm); border:1px solid transparent;
white-space:nowrap; letter-spacing:.04em; text-transform:uppercase}
.fund .ticker.t-tvri{background:#3C4A60; color:#FFF}
.fund .ticker.t-gtwr{background:#C1F4D4; color:#0A2415}
.fund .ticker.t-bbrc{background:#ABC6CD; color:#12181F}
.fund .ticker.t-vsho{background:#759DB4; color:#FFF}
.fund .ticker.t-vots{background:#C8D7E0; color:#12181F}
.fund .ticker.t-tvoi{background:#92D3AB; color:#0A2415}
.fund .fund-meta{margin-top:auto; padding-top:14px; border-top:1px dashed var(–line);
display:flex; flex-direction:column; gap:12px}
.fund .meta-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.fund .meta-item{display:flex; flex-direction:column; gap:3px; min-width:0}
.fund .meta-k{font-size:9px; font-weight:700; letter-spacing:.18em;
text-transform:uppercase; color:var(–text-muted)}
.fund .meta-v{font-size:13px; font-weight:700; color:var(–text-primary);
letter-spacing:-.01em; line-height:1.2}
.fund .tags-row{display:flex; flex-wrap:wrap; gap:5px}
.fund .fund-tag{font-size:9px; padding:3px 9px; border-radius:var(–r-full);
background:color-mix(in srgb,var(–tab-color) 14%,transparent); color:var(–tab-color);
border:1px solid color-mix(in srgb,var(–tab-color) 32%,transparent);
font-weight:700; letter-spacing:.06em; white-space:nowrap; text-transform:uppercase}
:root[data-theme=”light”] .fund .fund-tag{
color:color-mix(in srgb,var(–tab-color) 100%,#000 30%);
background:color-mix(in srgb,var(–tab-color) 22%,transparent);
border-color:color-mix(in srgb,var(–tab-color) 50%,transparent)}
.fund .fund-access{display:flex; align-items:center; gap:10px; padding-top:12px;
border-top:1px dashed var(–line); margin-top:2px}
.fund .fund-access .access-label{font-size:9px; font-weight:700; letter-spacing:.20em;
text-transform:uppercase; color:var(–text-muted); white-space:nowrap; flex-shrink:0}
.fund .fund-access .access-logo{display:inline-flex; align-items:center; height:22px}
.fund .fund-access .access-logo svg{height:100%; width:auto; display:block}
.fund .fund-access .access-logo.bradesco{height:24px}
.fund .fund-access .access-logo.bradesco svg{color:var(–text-primary)}
:root[data-theme=”light”] .fund .fund-access .access-logo.bradesco svg{color:#CC092F}
.fund-list.hidden{display:none}
/* ============================================================
CONTATO — cards de e-mail com avatar/iniciais
============================================================ */
.contatos{
display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media(max-width:1000px){.contatos{grid-template-columns:1fr; max-width:520px; margin:0 auto}}
.contato-card{
display:flex; align-items:center; gap:20px;
padding:28px 26px;
border-radius:var(–r-lg);
border:1px solid var(–line);
background:var(–bg-glass);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
color:var(–text-primary); text-decoration:none;
position:relative; overflow:hidden;
transition:transform .25s,border-color .25s,box-shadow .25s;
}
.contato-card::before{
content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 55%);
pointer-events:none; border-radius:inherit;
}
:root[data-theme=”light”] .contato-card::before{
background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 55%);
}
.contato-card > *{position:relative}
.contato-card:hover{
transform:translateY(-3px);
border-color:var(–accent-strong);
box-shadow:0 12px 32px color-mix(in srgb,var(–accent-strong) 20%,transparent);
}
/* Card de destaque “Fale com RI” */
.contato-card.contato-primary{
background:linear-gradient(135deg,rgba(193,244,212,.10),rgba(146,211,171,.03)),var(–bg-glass);
border-color:var(–pill-border);
}
:root[data-theme=”light”] .contato-card.contato-primary{
background:linear-gradient(135deg,rgba(51,127,81,.08),rgba(51,127,81,.02)),var(–bg-glass);
}
/* Ícone envelope (Fale com RI) */
.contato-card .contato-icon{
flex-shrink:0;
width:56px; height:56px;
border-radius:16px;
background:var(–accent-strong);
color:var(–tv-verde-ink);
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 20px color-mix(in srgb,var(–accent-strong) 30%,transparent);
transition:transform .25s;
}
:root[data-theme=”light”] .contato-card .contato-icon{color:#FFF}
.contato-card:hover .contato-icon{transform:scale(1.05) rotate(-4deg)}
.contato-card .contato-icon svg{width:26px; height:26px}
/* Avatar iniciais (Enrico / Thais) */
.contato-card .contato-avatar{
flex-shrink:0;
width:56px; height:56px;
border-radius:16px;
background:linear-gradient(135deg,var(–tv-azul-escuro),#2a3547);
color:#FFF;
display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 20px rgba(60,74,96,.35);
border:1px solid rgba(255,255,255,.10);
transition:transform .25s;
position:relative; overflow:hidden;
}
.contato-card .contato-avatar::before{
content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 55%);
pointer-events:none;
}
.contato-card:hover .contato-avatar{transform:scale(1.05) rotate(-4deg)}
.contato-card .avatar-initials{
font-family:var(–ff);
font-size:18px; font-weight:700; letter-spacing:.06em;
position:relative;
}
/* Corpo do card */
.contato-card .contato-body{flex:1; min-width:0}
.contato-card .contato-role{
font-size:10px; font-weight:700; letter-spacing:.24em;
text-transform:uppercase; color:var(–accent-strong);
margin-bottom:6px;
}
.contato-card .contato-name{
font-size:20px; font-weight:700; color:var(–text-primary);
letter-spacing:-.01em; line-height:1.2; margin-bottom:8px;
}
.contato-card .contato-email{
display:inline-flex; align-items:center; gap:8px;
font-size:13px; font-weight:500; color:var(–text-muted);
transition:color .2s;
word-break:break-all;
}
.contato-card:hover .contato-email{color:var(–accent-strong)}
.contato-card .contato-arrow{
font-size:14px; font-weight:700;
transition:transform .25s;
flex-shrink:0;
}
.contato-card:hover .contato-arrow{transform:translateX(4px)}
/* Bloco extra do contato (site + newsletter) */
.contato-extra{
margin-top:32px; padding:24px 28px;
border-radius:var(–r-lg);
background:var(–bg-glass);
border:1px solid var(–line);
backdrop-filter:blur(16px) saturate(140%);
display:flex; align-items:center; justify-content:space-between;
gap:20px; flex-wrap:wrap;
position:relative; overflow:hidden;
}
.contato-extra::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 55%);
pointer-events:none; border-radius:inherit}
.contato-extra > *{position:relative}
.contato-extra .contato-extra-text{
display:flex; flex-direction:column; gap:4px;
}
.contato-extra .contato-extra-title{
font-size:15px; font-weight:700; color:var(–text-primary);
}
.contato-extra .contato-extra-desc{
font-size:13px; color:var(–text-muted);
}
.contato-extra .contato-extra-actions{
display:flex; gap:10px; flex-wrap:wrap;
}
/* Footer */
.footer{padding:40px 0 32px; color:var(–text-muted); font-size:13px}
.footer .inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px}
.footer .logo-mark{height:28px; width:auto; color:var(–text-primary)}
.footer .links{display:flex; gap:24px; font-size:12px; font-weight:600}
.footer .links a:hover{color:var(–accent-strong)}
.footer .disclaimer{margin-top:24px; padding-top:20px; border-top:1px solid var(–line);
font-size:11px; opacity:.7; line-height:1.6; text-align:center}
/* Modal */
.modal-overlay{position:fixed; inset:0; z-index:100; background:rgba(10,15,20,.72);
backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
padding:24px; opacity:0; pointer-events:none; transition:opacity .25s ease}
.modal-overlay:not([hidden]){opacity:1; pointer-events:auto}
.modal-overlay[hidden]{display:flex}
:root[data-theme=”light”] .modal-overlay{background:rgba(230,237,241,.75)}
.modal-card{position:relative; width:100%; max-width:720px; max-height:calc(100vh – 48px);
overflow-y:auto; border-radius:24px; background:var(–bg-glass-strong);
border:1px solid var(–line-strong); backdrop-filter:blur(30px) saturate(160%);
padding:40px 40px 32px; box-shadow:0 24px 80px rgba(0,0,0,.5);
transform:translateY(20px) scale(.98); transition:transform .35s cubic-bezier(.22,.9,.32,1);
scrollbar-width:thin; scrollbar-color:var(–accent-strong) transparent}
.modal-overlay:not([hidden]) .modal-card{transform:translateY(0) scale(1)}
.modal-card::-webkit-scrollbar{width:10px}
.modal-card::-webkit-scrollbar-track{background:transparent; margin:20px 0}
.modal-card::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,var(–tv-verde-escuro),var(–tv-verde));
border-radius:999px; border:3px solid transparent; background-clip:padding-box}
:root[data-theme=”light”] .modal-card::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,var(–tv-verde-light-accent),var(–tv-verde-escuro));
background-clip:padding-box}
.modal-card::before{content:””; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 55%); pointer-events:none}
:root[data-theme=”light”] .modal-card::before{background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 55%)}
.modal-card > *{position:relative}
.modal-close{position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
background:var(–input-bg); border:1px solid var(–line-strong); color:var(–text-primary);
cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:background .2s,border-color .2s,transform .2s; z-index:2}
.modal-close:hover{background:rgba(204,9,47,.10); border-color:#CC092F; color:#CC092F; transform:rotate(90deg)}
.modal-header{margin-bottom:24px; padding-right:40px}
.modal-eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:var(–r-full);
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.18);
color:var(–text-primary);
font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase}
:root[data-theme=”light”] .modal-eyebrow{
background:rgba(10,15,20,.04);
border-color:rgba(10,15,20,.18);
color:var(–text-primary);
}
.modal-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:#CC092F; box-shadow:0 0 10px rgba(204,9,47,.6)}
.modal-brand{display:flex; align-items:center; gap:24px; margin:20px 0}
.modal-brand svg:first-child{height:39px; width:auto; color:#CC092F}
.modal-brand svg:last-child{height:56px; width:auto; color:var(–text-primary)}
.modal-brand .plus{font-size:32px; font-weight:300; color:var(–text-muted); line-height:1}
.modal-header h3{font-size:clamp(22px,2.6vw,32px); font-weight:400; letter-spacing:-.01em;
color:var(–text-primary); margin:0 0 12px; line-height:1.2}
.modal-header h3 strong{font-weight:700; color:var(–accent-strong)}
.modal-header .modal-lead{font-size:15px; color:var(–text-secondary); line-height:1.6; font-weight:300; margin:0}
.modal-header .modal-lead em{font-style:italic; color:var(–text-primary); font-weight:500}
.modal-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px}
@media(max-width:560px){.modal-stats{grid-template-columns:1fr}}
.modal-stat{padding:18px 16px; border-radius:var(–r-md);
background:var(–input-bg); border-left:3px solid var(–accent-strong)}
.modal-stat-v{font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(–accent-strong); line-height:1}
.modal-stat-v small{font-size:16px; margin-left:4px}
.modal-stat-k{font-size:11px; color:var(–text-muted); font-weight:600; margin-top:8px; line-height:1.4}
.modal-timeline{margin:0 0 28px; padding:24px; border-radius:var(–r-md);
background:var(–input-bg); border:1px solid var(–line)}
.modal-timeline h4{font-size:11px; letter-spacing:.28em; text-transform:uppercase;
color:var(–accent-strong); font-weight:700; margin:0 0 16px}
.modal-timeline ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.modal-timeline li{display:grid; grid-template-columns:80px 1fr; gap:16px; padding:8px 0;
align-items:baseline; border-bottom:1px dashed var(–line)}
.modal-timeline li:last-child{border-bottom:0}
.modal-timeline .tl-date{font-family:ui-monospace,monospace; font-size:11px; font-weight:700;
letter-spacing:.06em; color:var(–text-muted); text-transform:uppercase}
.modal-timeline .tl-date .sep{opacity:.4}
.modal-timeline .tl-text{font-size:13px; color:var(–text-secondary); line-height:1.5}
.modal-timeline .tl-text strong{color:var(–text-primary); font-weight:700}
.modal-timeline li.tl-highlight{padding:12px; margin:4px -12px 0; background:rgba(204,9,47,.08);
border:1px solid rgba(204,9,47,.28); border-radius:var(–r-sm)}
.modal-timeline li.tl-highlight .tl-date{color:#CC092F}
.modal-quote{margin:0 0 28px; padding:22px 24px; border-radius:var(–r-md);
background:linear-gradient(135deg,rgba(193,244,212,.06),transparent 60%);
border-left:3px solid var(–accent-strong)}
:root[data-theme=”light”] .modal-quote{background:linear-gradient(135deg,rgba(51,127,81,.06),transparent 60%)}
.modal-quote p{margin:0 0 12px; font-size:15px; font-style:italic; color:var(–text-secondary);
line-height:1.55; font-weight:300}
.modal-quote cite{display:flex; flex-direction:column; gap:2px; font-style:normal; font-size:12px}
.modal-quote cite strong{color:var(–text-primary); font-weight:700}
.modal-quote cite span{color:var(–text-muted)}
.modal-quote-with-avatar{display:flex; gap:22px; align-items:stretch; padding:24px}
.quote-avatar{flex-shrink:0; width:128px; height:168px; border-radius:16px; overflow:hidden;
background:var(–bg-glass); position:relative}
.quote-avatar img{display:block; width:100%; height:100%; object-fit:cover; object-position:center top;
image-rendering:-webkit-optimize-contrast; backface-visibility:hidden; transform:translateZ(0)}
.quote-content{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center}
@media(max-width:560px){.modal-quote-with-avatar{flex-direction:column; gap:16px; align-items:flex-start}
.quote-avatar{width:112px; height:148px}}
.modal-footer{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
padding-top:20px; border-top:1px solid var(–line)}
.modal-source{font-size:11px; color:var(–text-muted); letter-spacing:.04em; font-weight:600}
body.modal-open{overflow:hidden}
/* Awards modal */
.awards-eyebrow{
background:rgba(245,200,106,.10) !important;
border-color:rgba(245,200,106,.40) !important;
color:#F5C86A !important;
align-items:center; gap:8px;
}
:root[data-theme=”light”] .awards-eyebrow{
background:rgba(180,132,42,.08) !important;
border-color:rgba(180,132,42,.35) !important;
color:#B4842A !important;
}
.awards-eyebrow svg{flex-shrink:0}
.awards-card .modal-header h3 strong{color:#F5C86A}
:root[data-theme=”light”] .awards-card .modal-header h3 strong{color:#B4842A}
.awards-highlights{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px}
@media(max-width:640px){.awards-highlights{grid-template-columns:1fr}}
.award-highlight{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(–r-md);
background:linear-gradient(135deg,rgba(245,200,106,.14),rgba(212,163,71,.04));
border:1px solid rgba(245,200,106,.35); position:relative; overflow:hidden}
.award-highlight.bronze{
background:linear-gradient(135deg,rgba(205,154,91,.14),rgba(166,118,65,.04));
border-color:rgba(205,154,91,.35);
}
:root[data-theme=”light”] .award-highlight{background:linear-gradient(135deg,rgba(180,132,42,.10),rgba(180,132,42,.02));
border-color:rgba(180,132,42,.30)}
:root[data-theme=”light”] .award-highlight.bronze{
background:linear-gradient(135deg,rgba(140,90,40,.10),rgba(140,90,40,.02));
border-color:rgba(140,90,40,.30);
}
.award-highlight::before{content:””; position:absolute; inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 55%); pointer-events:none}
.award-highlight > *{position:relative}
.award-hl-badge{display:flex; flex-direction:column; align-items:center; padding:10px 14px;
border-radius:12px; background:linear-gradient(135deg,#F5C86A,#D4A347);
color:#4A2E00; min-width:82px; text-align:center;
box-shadow:0 6px 18px rgba(245,200,106,.30)}
.award-highlight.bronze .award-hl-badge{
background:linear-gradient(135deg,#CD9A5B,#A67641);
color:#3E2100;
box-shadow:0 6px 18px rgba(205,154,91,.28);
}
.award-hl-place{font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1}
.award-hl-year{font-size:9px; font-weight:700; letter-spacing:.18em; margin-top:5px; opacity:.8; font-family:ui-monospace,monospace}
.award-hl-content{flex:1; min-width:0}
.award-hl-cat{font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(–text-muted); font-weight:700; margin-bottom:6px}
.award-hl-ticker{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.award-hl-name{font-size:13px; font-weight:700; color:var(–text-primary); letter-spacing:-.01em; line-height:1.3}
.awards-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:28px}
@media(max-width:560px){.awards-grid{grid-template-columns:1fr}}
.award-card{display:flex; align-items:center; gap:18px; padding:18px 20px; border-radius:var(–r-md);
background:var(–input-bg); border:1px solid var(–line); transition:transform .2s,border-color .2s}
.award-card:hover{transform:translateY(-2px); border-color:rgba(245,200,106,.4)}
:root[data-theme=”light”] .award-card:hover{border-color:rgba(180,132,42,.5)}
.award-medal{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:56px;
padding:10px 12px; border-radius:12px; background:linear-gradient(135deg,#F5C86A,#D4A347);
color:#4A2E00; box-shadow:0 4px 12px rgba(245,200,106,.30); flex-shrink:0}
.award-card.award-bronze .award-medal{background:linear-gradient(135deg,#CD9A5B,#A67641);
color:#3E2100; box-shadow:0 4px 12px rgba(205,154,91,.28)}
.medal-num{font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1}
.medal-year{font-size:9px; font-weight:700; letter-spacing:.1em; font-family:ui-monospace,monospace; opacity:.85}
.award-info{flex:1}
.award-source{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(–text-muted); font-weight:700; margin-bottom:4px}
.award-cat{font-size:15px; font-weight:700; color:var(–text-primary); letter-spacing:-.01em; line-height:1.3}
.awards-quote{border-left-color:#F5C86A !important;
background:linear-gradient(135deg,rgba(245,200,106,.08),transparent 60%) !important}
:root[data-theme=”light”] .awards-quote{border-left-color:#B4842A !important;
background:linear-gradient(135deg,rgba(180,132,42,.06),transparent 60%) !important}
/* Fund modal */
.fund-eyebrow{
background:var(–pill-bg) !important;
border-color:var(–pill-border) !important;
color:var(–accent-strong) !important;
}
.fund-eyebrow .dot{background:var(–accent-strong) !important;
box-shadow:0 0 10px color-mix(in srgb,var(–accent-strong) 60%,transparent) !important}
.fund-modal .modal-header h3{font-size:clamp(28px,3.2vw,40px); letter-spacing:-.02em}
.fund-modal .modal-header h3 strong{color:var(–accent-strong); font-weight:700; letter-spacing:-.03em}
.fund-modal-features{margin:0 0 24px; padding:24px; border-radius:var(–r-md);
background:var(–input-bg); border:1px solid var(–line)}
.fund-modal-features h4{font-size:11px; letter-spacing:.28em; text-transform:uppercase;
color:var(–accent-strong); font-weight:700; margin:0 0 16px}
.fund-modal-features ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.fund-modal-features li{display:flex; gap:12px; padding:12px 0;
border-bottom:1px dashed var(–line); font-size:13px; line-height:1.55; color:var(–text-secondary)}
.fund-modal-features li:last-child{border-bottom:0; padding-bottom:0}
.fund-modal-features li::before{content:””; flex-shrink:0; width:6px; height:6px;
margin-top:8px; border-radius:50%; background:var(–accent-strong)}
.fund-modal-features li strong{color:var(–text-primary); font-weight:700; margin-right:4px}
.fund-modal-info{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:28px}
@media(max-width:560px){.fund-modal-info{grid-template-columns:1fr}}
.fund-modal-info .info-item{display:flex; flex-direction:column; gap:4px; padding:14px 16px;
border-radius:var(–r-sm); background:var(–input-bg); border:1px solid var(–line)}
.fund-modal-info .info-k{font-size:10px; letter-spacing:.22em; text-transform:uppercase;
color:var(–text-muted); font-weight:700}
.fund-modal-info .info-v{font-size:14px; font-weight:700; color:var(–text-primary); letter-spacing:-.01em}
/* Botão voltar ao topo */
.back-to-top{position:fixed; bottom:24px; right:24px; z-index:80;
width:48px; height:48px; border-radius:50%;
background:var(–bg-glass-strong); border:1px solid var(–line-strong);
backdrop-filter:blur(20px) saturate(160%); color:var(–text-primary);
cursor:pointer; display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 24px rgba(0,0,0,.35);
opacity:0; pointer-events:none;
transform:translateY(16px) scale(.85);
transition:opacity .3s cubic-bezier(.22,.9,.32,1),transform .3s cubic-bezier(.22,.9,.32,1),
background .2s,border-color .2s,color .2s}
.back-to-top::before{content:””; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 55%); pointer-events:none}
:root[data-theme=”light”] .back-to-top::before{background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 55%)}
.back-to-top.is-visible{opacity:1; pointer-events:auto; transform:translateY(0) scale(1)}
.back-to-top:hover{border-color:var(–accent-strong); color:var(–accent-strong);
transform:translateY(-2px) scale(1.05);
box-shadow:0 12px 32px color-mix(in srgb,var(–accent-strong) 25%,transparent)}
.back-to-top svg{width:20px; height:20px; position:relative; transition:transform .25s}
.back-to-top:hover svg{transform:translateY(-2px)}
/* Popup flutuante */
.internal-banner{position:fixed; left:50%; bottom:24px;
transform:translateX(-50%) translateY(120%); z-index:90;
display:flex; align-items:center; gap:14px; padding:12px 18px 12px 16px;
border-radius:var(–r-full);
background:linear-gradient(135deg,rgba(245,200,106,.16),rgba(212,163,71,.08)),var(–bg-glass-strong);
border:1px solid rgba(245,200,106,.40); backdrop-filter:blur(20px) saturate(160%);
box-shadow:0 12px 40px rgba(0,0,0,.35); color:var(–text-primary);
font-size:12px; font-weight:500; max-width:calc(100% – 32px);
opacity:0; pointer-events:none;
transition:opacity .35s cubic-bezier(.22,.9,.32,1),transform .45s cubic-bezier(.22,.9,.32,1)}
:root[data-theme=”light”] .internal-banner{
background:linear-gradient(135deg,rgba(180,132,42,.12),rgba(140,100,20,.04)),var(–bg-glass-strong);
border-color:rgba(180,132,42,.40)}
.internal-banner.is-visible{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.internal-banner::before{content:””; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 55%); pointer-events:none}
:root[data-theme=”light”] .internal-banner::before{background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 55%)}
.internal-banner > *{position:relative}
.internal-banner .warn-icon{width:32px; height:32px; flex-shrink:0; border-radius:50%;
background:rgba(245,200,106,.20); border:1px solid rgba(245,200,106,.45); color:#F5C86A;
display:flex; align-items:center; justify-content:center;
animation:warn-pulse 2.5s ease-in-out infinite}
:root[data-theme=”light”] .internal-banner .warn-icon{background:rgba(180,132,42,.15);
border-color:rgba(180,132,42,.50); color:#B4842A}
@keyframes warn-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,200,106,.35)}
50%{box-shadow:0 0 0 8px rgba(245,200,106,0)}}
.internal-banner .warn-icon svg{width:16px; height:16px}
.internal-banner .warn-text{display:flex; flex-direction:column; gap:2px; line-height:1.3}
.internal-banner .warn-title{font-size:10px; font-weight:700; letter-spacing:.22em;
text-transform:uppercase; color:#F5C86A}
:root[data-theme=”light”] .internal-banner .warn-title{color:#B4842A}
.internal-banner .warn-close{width:28px; height:28px; border-radius:50%;
background:var(–input-bg); border:1px solid var(–line-strong); color:var(–text-muted);
cursor:pointer; display:flex; align-items:center; justify-content:center;
flex-shrink:0; margin-left:6px;
transition:background .2s,color .2s,transform .2s}
.internal-banner .warn-close:hover{color:var(–text-primary); transform:rotate(90deg); background:rgba(255,255,255,.06)}
:root[data-theme=”light”] .internal-banner .warn-close:hover{background:rgba(10,15,20,.05)}
.internal-banner .warn-close svg{width:14px; height:14px}
/* Mobile optimization */
@media(max-width:900px){
section.block{padding:64px 0}
.header .inner{padding:12px 16px; gap:12px}
.header .logo-mark{height:34px}
.header nav{display:none}
.container{padding:0 16px}
}
@media(max-width:700px){
.hero{padding:48px 0 56px}
.hero-content{gap:32px; margin-bottom:36px}
.hero-brand svg{max-width:240px}
.hero-statement h1{font-size:24px; line-height:1.3; margin:0 0 16px}
.hero-tags{gap:10px; margin-top:20px}
.bradesco-tag,.awards-tag{padding:12px 18px; gap:12px}
.bradesco-inline{height:28px}
.awards-tag .awards-trophy{width:24px; height:24px}
.awards-tag .awards-brands{font-size:16px}
.awards-tag .tag-label,.bradesco-tag .tag-label{font-size:9px; letter-spacing:.20em}
.numbers-about-grid{gap:14px}
.bn{padding:20px 16px 20px 20px; min-height:auto}
.bn .n{font-size:38px}
.bn .n .plus{font-size:26px}
.bn .n small{font-size:38px}
.bn .k{font-size:12px; margin-top:10px}
.bn .source{font-size:9px; bottom:6px; right:8px}
.hero-about{padding:22px 18px}
.hero-about p{font-size:13px; line-height:1.6}
.section-head{margin-bottom:32px; gap:16px}
.section-head h2{font-size:26px}
.section-head p{font-size:13px}
.vertical{min-height:auto; padding:26px 20px 24px}
.vertical h3{font-size:20px}
.vertical .estrategias span{font-size:10px; padding:4px 10px}
.produto{padding:28px 22px}
.produto h3{font-size:22px}
.produto p{font-size:13px}
.produto .features li{font-size:12.5px}
.tabs{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabs button{padding:9px 16px; font-size:12px; flex-shrink:0}
.fund{padding:16px}
.fund .name{font-size:13.5px}
.fund .type{font-size:9px; letter-spacing:.14em}
.fund .meta-row{gap:6px}
.fund .meta-k{font-size:8px; letter-spacing:.14em}
.fund .meta-v{font-size:12px}
.fund .fund-tag{font-size:8px; padding:2px 7px}
.fund .fund-access{padding-top:10px; gap:8px}
.fund .fund-access .access-label{font-size:8px; letter-spacing:.14em}
.fund .fund-access .access-logo{height:18px}
.fund .fund-access .access-logo.bradesco{height:20px}
/* Contato mobile */
.contato-card{padding:22px 20px; gap:16px}
.contato-card .contato-icon,
.contato-card .contato-avatar{width:48px; height:48px; border-radius:14px}
.contato-card .contato-icon svg{width:22px; height:22px}
.contato-card .avatar-initials{font-size:16px}
.contato-card .contato-role{font-size:9px; letter-spacing:.20em}
.contato-card .contato-name{font-size:18px}
.contato-card .contato-email{font-size:12px}
.contato-extra{padding:20px 22px}
.contato-extra .contato-extra-title{font-size:14px}
.contato-extra .contato-extra-desc{font-size:12px}
.footer{padding:32px 0 24px}
.footer .links{gap:16px; font-size:11px}
.footer .disclaimer{font-size:10px}
.modal-overlay{padding:12px}
.modal-card{padding:28px 20px 24px; border-radius:20px}
.modal-close{top:12px; right:12px; width:32px; height:32px}
.modal-header{padding-right:32px}
.modal-header h3{font-size:22px}
.modal-brand{gap:14px; margin:16px 0}
.modal-brand svg:first-child{height:28px}
.modal-brand svg:last-child{height:40px}
.modal-brand .plus{font-size:22px}
.modal-stat{padding:14px 12px}
.modal-stat-v{font-size:20px}
.modal-timeline{padding:18px}
.modal-timeline li{grid-template-columns:64px 1fr; gap:12px}
.modal-timeline .tl-date{font-size:10px}
.modal-timeline .tl-text{font-size:12px}
.fund-modal-features{padding:20px}
.fund-modal-features li{font-size:12px; padding:10px 0}
.fund-modal-info .info-v{font-size:13px}
.internal-banner{left:16px; right:16px; bottom:12px; transform:translateY(120%);
width:auto; max-width:none; padding:10px 12px; gap:10px}
.internal-banner.is-visible{transform:translateY(0)}
.internal-banner .warn-icon{width:26px; height:26px}
.internal-banner .warn-icon svg{width:13px; height:13px}
.internal-banner .warn-title{font-size:11px; letter-spacing:.16em}
.internal-banner .warn-close{width:24px; height:24px}
.internal-banner .warn-close svg{width:12px; height:12px}
.back-to-top{bottom:78px; right:16px; width:42px; height:42px}
.back-to-top svg{width:18px; height:18px}
}
@media(max-width:400px){
.hero-brand svg{max-width:200px}
.hero-statement h1{font-size:22px}
.bradesco-tag,.awards-tag{padding:10px 14px}
.bradesco-inline{height:24px}
.awards-tag .awards-brands{font-size:14px}
.bn .n{font-size:32px}
.bn .n small{font-size:32px}
.section-head h2{font-size:22px}
.produto{padding:22px 18px}
.produto h3{font-size:20px}
}
Estamos entre as maiores
gestoras de investimento do Brasil.
desde a criação
A Tivio Capital é uma das maiores gestoras independentes do Brasil. Fundada em 1999 como BV Asset e renomeada como Tivio Capital em 2023.
Temos mais de duas décadas de experiência na criação e estruturação de produtos de investimento inovadores no Brasil, com foco nas verticais de Crédito, Imobiliário, Energia & Infraestrutura, Investment Solutions e Private Solutions.
Integrante do conglomerado prudencial liderado pelo Banco Bradesco S.A.
Estratégias de investimento
Cinco áreas complementares para diferentes perfis de risco e horizontes de longo prazo.
Crédito
Análise de crédito profunda, baseada em metodologia proprietária de rating de crédito e análise de dados.
Imobiliário
Investimentos nas principais classes de ativo do mercado Imobiliário, do core ao oportunístico.
Energia & Infra
Oportunidades de investimento em private equity e operações estruturadas híbridas de crédito no Brasil, focadas na originação de negócios proprietários de médio porte nos setores de Energia e Infraestrutura.
Investment Solutions
Portfólios customizados para clientes institucionais e private, em mandatos de renda fixa e fundo de fundos.
Private Solutions
Estruturas exclusivas customizadas para clientes institucionais e private, com foco em mandatos sob medida e veículos dedicados.
Duas portas de entrada
Acesse nossos fundos via plataforma Ágora ou pela linha completa de previdência privada.
Ágora Investimentos
Acesse nossos fundos de crédito, imobiliário e investment solutions pela plataforma Ágora, corretora do grupo Bradesco.
- Fundos abertos com liquidez flexível (D+0 a D+180)
- Aplicação online direta pela plataforma
- Suporte especializado para investidores qualificados
- Relatórios mensais e materiais exclusivos
Bradesco Seguros
Linha de fundos previdenciários (VGBL/PGBL) distribuídos pela Bradesco Seguros, com benefício fiscal, ideais para o planejamento de longo prazo.
- Bradesco Tivio Imob Prev · imobiliário previdenciário
- Benefícios fiscais para longo prazo (regressiva)
Nossos fundos
Portfólio de crédito, imobiliário e previdência, com estratégias para diferentes perfis de investidor.
Fale com nosso time
Nosso time de Relações com Investidores, Distribuição e Research está à disposição.
/* THEME TOGGLE */
(function(){
const root=document.documentElement,KEY=’tivio-theme’;
function apply(t){root.setAttribute(‘data-theme’,t);
document.querySelectorAll(‘.theme-toggle button’).forEach(b=>b.classList.toggle(‘active’,b.dataset.themeSet===t));
try{localStorage.setItem(KEY,t)}catch(e){}}
let saved=null;try{saved=localStorage.getItem(KEY)}catch(e){}
apply(saved||’dark’);
document.querySelectorAll(‘.theme-toggle button’).forEach(b=>b.addEventListener(‘click’,()=>apply(b.dataset.themeSet)));
})();
/* TABS */
(function(){
const tabs=document.querySelectorAll(‘.tabs button’);
const lists={credito:document.getElementById(‘tab-credito’),imobiliario:document.getElementById(‘tab-imobiliario’),previdencia:document.getElementById(‘tab-previdencia’)};
function activate(id){tabs.forEach(b=>b.classList.toggle(‘active’,b.dataset.tab===id));
Object.keys(lists).forEach(k=>lists[k].classList.toggle(‘hidden’,k!==id))}
tabs.forEach(b=>b.addEventListener(‘click’,()=>activate(b.dataset.tab)));
document.querySelectorAll(‘.vertical[data-tab-link]’).forEach(c=>{
c.addEventListener(‘click’,()=>{activate(c.dataset.tabLink);
document.getElementById(‘fundos’).scrollIntoView({behavior:’smooth’,block:’start’})});
});
})();
/* REVEAL ON SCROLL */
(function(){
if(window.matchMedia(‘(prefers-reduced-motion: reduce)’).matches){
document.querySelectorAll(‘.reveal, .reveal-stagger’).forEach(e=>e.classList.add(‘is-visible’));return;}
const obs=new IntersectionObserver((entries)=>{
entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add(‘is-visible’);obs.unobserve(e.target)}});
},{threshold:.15,rootMargin:’0px 0px -80px 0px’});
document.querySelectorAll(‘.reveal, .reveal-stagger’).forEach(e=>obs.observe(e));
})();
/* MODAL */
(function(){
const overlays=document.querySelectorAll(‘.modal-overlay’);
function open(id){const el=document.getElementById(id);if(!el)return;
el.hidden=false;document.body.classList.add(‘modal-open’);
const c=el.querySelector(‘[data-close-modal]’);if(c)c.focus();}
function close(el){if(!el)return;el.hidden=true;document.body.classList.remove(‘modal-open’)}
document.querySelectorAll(‘[data-open-modal]’).forEach(b=>b.addEventListener(‘click’,(e)=>{e.preventDefault();open(b.dataset.openModal)}));
overlays.forEach(ov=>ov.addEventListener(‘click’,(e)=>{if(e.target===ov||e.target.closest(‘[data-close-modal]’))close(ov)}));
document.addEventListener(‘keydown’,(e)=>{if(e.key===’Escape’)overlays.forEach(ov=>{if(!ov.hidden)close(ov)})});
})();
/* POPUP FLUTUANTE */
(function(){
const banner=document.getElementById(‘internal-banner’);
const closeBtn=document.getElementById(‘internal-banner-close’);
if(!banner||!closeBtn)return;
const KEY=’tivio-internal-banner-dismissed’;
let dismissed=false;
try{dismissed=localStorage.getItem(KEY)===’1′}catch(e){}
if(!dismissed){setTimeout(()=>banner.classList.add(‘is-visible’),1200)}
closeBtn.addEventListener(‘click’,()=>{banner.classList.remove(‘is-visible’);
try{localStorage.setItem(KEY,’1′)}catch(e){}});
})();
/* BOTÃO VOLTAR AO TOPO */
(function(){
const btn=document.getElementById(‘back-to-top’);
if(!btn)return;
const THRESHOLD=300;
let ticking=false;
function update(){if(window.scrollY>THRESHOLD){btn.classList.add(‘is-visible’)}else{btn.classList.remove(‘is-visible’)}ticking=false}
window.addEventListener(‘scroll’,()=>{if(!ticking){window.requestAnimationFrame(update);ticking=true}},{passive:true});
btn.addEventListener(‘click’,()=>window.scrollTo({top:0,behavior:’smooth’}));
update();
})();
