/* ==========================================================
   cesta. — design system
   ========================================================== */
:root{
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EBEEF4;
  --border: #DCE2ED;
  --text: #10192B;
  --text-muted: #57627A;
  --text-faint: #8D96AB;
  --gold: #A9762E;
  --gold-dim: #EAD9B8;
  --teal: #146B63;
  --red: #B34438;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--gold-dim); color:var(--text);}

.mono{font-family:'IBM Plex Mono', monospace;}
.serif{font-family:'Fraunces', serif;}
a{color:inherit;}

/* ---- Nav ---- */
nav.site{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px; border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:16px;
}
.brand{font-family:'IBM Plex Mono', monospace; font-size:19px; font-weight:600; letter-spacing:-.01em; text-decoration:none; color:var(--text);}
.brand .dot{color:var(--gold);}
.navlinks{display:flex; gap:32px; align-items:center; flex-wrap:wrap;}
.navlinks a{color:var(--text-muted); text-decoration:none; font-size:13.5px; font-weight:500;}
.navlinks a.on{color:var(--text);}
.search-mini{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:8px 16px; color:var(--text-faint); font-size:12.5px; width:220px;
}

footer.note{
  text-align:center; padding:40px; color:var(--text-faint); font-size:11px;
  font-family:'IBM Plex Mono', monospace; border-top:1px solid var(--border);
}

/* ---- Sparkline (tendência de preço) ---- */
.spark{width:64px; height:26px; display:flex; align-items:center;}
.spark-sm{width:48px; height:20px; display:flex; align-items:center;}
.spark svg, .spark-sm svg{width:100%; height:100%;}

/* ---- Fingerprint mosaic (assinatura visual, só na página de detalhe) ---- */
.fingerprint{display:grid; gap:2px;}
.fingerprint div{border-radius:1px;}
.fp-large{grid-template-columns:repeat(6,1fr); width:220px; height:220px;}
.fp-med{grid-template-columns:repeat(6,1fr); width:56px; height:56px;}
.fp-small{grid-template-columns:repeat(5,1fr); width:34px; height:34px;}
.fp-caption{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--text-faint); margin-top:12px;}

/* ---- Home ---- */
.hero{
  padding:88px 48px 64px; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:end;
  border-bottom:1px solid var(--border);
}
.hero .eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.16em; color:var(--gold);
  text-transform:uppercase; margin-bottom:22px; display:block;
}
.hero h1{
  font-family:'Fraunces', serif; font-weight:500; font-style:italic;
  font-size:56px; line-height:1.05; letter-spacing:-.01em; max-width:600px;
}
.hero p.lede{color:var(--text-muted); font-size:15.5px; line-height:1.65; margin-top:22px; max-width:440px;}
.hero-search{display:flex; margin-top:32px; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:var(--surface);}
.hero-search input{flex:1; background:none; border:none; outline:none; color:var(--text); padding:15px 18px; font-family:'IBM Plex Mono', monospace; font-size:13.5px;}
.hero-search input::placeholder{color:var(--text-faint);}
.hero-search button{background:var(--gold); border:none; color:#FFF6E8; font-weight:600; font-size:13px; padding:0 22px; cursor:pointer;}

.ticker-strip{display:flex; gap:0; border-bottom:1px solid var(--border); overflow-x:auto;}
.ticker-strip .t{padding:14px 24px; border-right:1px solid var(--border); white-space:nowrap; font-family:'IBM Plex Mono', monospace; font-size:12.5px; display:flex; gap:10px; align-items:center; text-decoration:none; color:var(--text);}
.up{color:var(--gold);} .down{color:var(--red);}

.section-head{display:flex; justify-content:space-between; align-items:baseline; padding:48px 48px 20px;}
.section-head h2{font-family:'Fraunces', serif; font-size:22px; font-weight:600;}
.section-head a{color:var(--text-faint); font-size:12.5px; text-decoration:none;}
.section-head .idx{color:var(--gold); font-family:'IBM Plex Mono', monospace; font-size:12px; margin-right:10px;}

.cardgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin:0 48px 64px; border:1px solid var(--border);}
.etfcard{background:var(--surface); padding:26px; display:flex; gap:18px; text-decoration:none; color:var(--text);}
.etfcard .meta{flex:1;}
.etfcard .ticker{font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:15px;}
.etfcard .name{color:var(--text-muted); font-size:12.5px; margin-top:3px;}
.etfcard .stats{display:flex; gap:16px; margin-top:16px;}
.etfcard .stat b{display:block; font-family:'IBM Plex Mono', monospace; font-size:14px;}
.etfcard .stat span{color:var(--text-faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;}

/* ---- Listagem ---- */
.listing-shell{display:grid; grid-template-columns:240px 1fr; gap:0;}
.filters{border-right:1px solid var(--border); padding:32px 28px; min-height:640px;}
.filters h3{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:18px;}
.fgroup{margin-bottom:30px;}
.fgroup .flabel{font-size:12.5px; font-weight:600; margin-bottom:10px;}
.fgroup label{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-muted); margin-bottom:9px; cursor:pointer;}
.fgroup input[type=checkbox], .fgroup input[type=radio]{accent-color:var(--gold);}
.fgroup select, .fgroup input[type=number]{
  width:100%; background:var(--surface); border:1px solid var(--border); border-radius:4px;
  padding:8px 10px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--text);
}

.list-toolbar{display:flex; justify-content:space-between; align-items:center; padding:24px 32px; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:12px;}
.list-toolbar .count{color:var(--text-muted); font-size:13px;}
.list-toolbar .count b{color:var(--text);}
.list-toolbar select{font-family:'IBM Plex Mono', monospace; font-size:11px; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:6px 12px; color:var(--text-muted);}

table.etf-table{width:100%; border-collapse:collapse;}
table.etf-table th{text-align:left; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:500; padding:14px 16px; border-bottom:1px solid var(--border);}
table.etf-table th.sortable{cursor:pointer; user-select:none; white-space:nowrap;}
table.etf-table th.sortable:hover{color:var(--text-muted);}
table.etf-table th.sortable.sorted{color:var(--gold);}
table.etf-table th .sort-arrow{font-size:8px; margin-left:3px; display:inline-block;}
table.etf-table td{padding:16px; border-bottom:1px solid var(--border); font-size:13px;}
table.etf-table tr:hover td{background:var(--surface-2);}
.row-etf .ticker{font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:13.5px; text-decoration:none; color:var(--text);}
.row-etf .name{color:var(--text-faint); font-size:11.5px;}
.num{font-family:'IBM Plex Mono', monospace;}
.tag{font-family:'IBM Plex Mono', monospace; font-size:10px; padding:3px 8px; border-radius:20px; border:1px solid var(--border); color:var(--text-muted); display:inline-block;}
.cmp-check{width:16px; height:16px; accent-color:var(--teal);}

.compare-bar{
  position:sticky; bottom:0; display:none; justify-content:space-between; align-items:center;
  background:var(--text); color:var(--bg); padding:16px 32px; font-size:13px;
}
.compare-bar.show{display:flex;}
.compare-bar a{background:var(--gold); color:#FFF6E8; text-decoration:none; padding:9px 18px; border-radius:4px; font-weight:600; font-size:12.5px;}
.compare-bar a.disabled{opacity:.4; pointer-events:none;}

/* ---- Página do ETF ---- */
.etf-header{display:grid; grid-template-columns:1fr auto; gap:48px; padding:56px 48px 40px; border-bottom:1px solid var(--border); align-items:center;}
.etf-header .eyebrow{color:var(--text-faint); font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;}
.etf-header h1{font-family:'Fraunces', serif; font-size:44px; font-weight:600; margin-top:8px;}
.etf-header .sub{color:var(--text-muted); font-size:14px; margin-top:6px;}
.price-now{margin-top:24px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;}
.price-now .p{font-family:'IBM Plex Mono', monospace; font-size:30px; font-weight:600;}
.price-now .chg{font-family:'IBM Plex Mono', monospace; font-size:14px;}

.kpi-strip{display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--border); overflow-x:auto;}
.kpi{padding:22px 28px; border-right:1px solid var(--border);}
.kpi:last-child{border-right:none;}
.kpi span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:8px;}
.kpi b{font-family:'IBM Plex Mono', monospace; font-size:18px; font-weight:600;}

.etf-body{display:grid; grid-template-columns:1.4fr 1fr;}
.panel{padding:40px 48px; border-right:1px solid var(--border);}
.panel:last-child{border-right:none;}
.panel h3{font-family:'Fraunces', serif; font-size:18px; font-weight:600; margin-bottom:22px;}
.chart-placeholder{height:260px; border:1px solid var(--border); border-radius:4px; position:relative; margin-bottom:12px; overflow:visible;}
.chart-axis-label{font-family:'IBM Plex Mono', monospace; font-size:9px; fill:var(--text-faint);}
.chart-grid{stroke:var(--border); stroke-width:1;}
.chart-hover-line{stroke:var(--text-faint); stroke-width:1; stroke-dasharray:3,3;}
.chart-tooltip{
  position:absolute; transform:translate(-50%,-130%);
  background:var(--text); color:var(--bg);
  font-family:'IBM Plex Mono', monospace; padding:6px 10px; border-radius:4px;
  pointer-events:none; white-space:nowrap; transition:opacity .1s ease;
}
.chart-tooltip b{display:block; font-size:12.5px; line-height:1.3;}
.chart-tooltip span{display:block; font-size:9.5px; color:#AEB7C8;}
.range-tabs{display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap;}
.range-tabs span{font-family:'IBM Plex Mono', monospace; font-size:11px; padding:5px 12px; border-radius:14px; color:var(--text-faint); border:1px solid var(--border); cursor:pointer;}
.range-tabs span.on{color:var(--gold); border-color:var(--gold); background:rgba(169,118,46,.08);}
.range-tabs span:not(.on):hover{color:var(--text);}

.holding-row{display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--border);}
.holding-row:last-child{border:none;}
.holding-row .hname{flex:1; font-size:12.5px;}
.holding-row .hticker{color:var(--text-faint); font-family:'IBM Plex Mono', monospace; font-size:10.5px;}
.holding-bar{width:90px; height:5px; background:var(--surface-2); border-radius:3px; overflow:hidden;}
.holding-bar div{height:100%; background:var(--gold);}
.holding-row .hpct{font-family:'IBM Plex Mono', monospace; font-size:12px; width:42px; text-align:right;}
.holdings-updated{color:var(--text-faint); font-size:11px; font-family:'IBM Plex Mono', monospace; margin-bottom:16px;}
.holdings-table{width:100%; border-collapse:collapse;}
.holdings-table th{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); text-align:left; padding:8px 0; border-bottom:1px solid var(--border); font-weight:500;}
.holdings-table td{padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px;}
.holdings-table td:last-child{text-align:right;}
.holdings-table .hticker{color:var(--text-faint); font-size:11px; margin-left:6px;}

.composicao-grid{display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start;}
.composicao-pizza{display:flex; flex-direction:column; align-items:center;}
.composicao-pizza svg path{cursor:default; transition:opacity .12s ease;}
.composicao-pizza svg path:hover{opacity:.75;}

.div-table{width:100%; border-collapse:collapse; margin-top:8px;}
.div-table th{font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); text-align:left; padding:8px 0; border-bottom:1px solid var(--border); font-weight:500;}
.div-table td{padding:10px 0; border-bottom:1px solid var(--border); font-size:12.5px;}
.disclaimer{margin:0 48px 48px; padding:16px 20px; border:1px dashed var(--border); border-radius:4px; color:var(--text-faint); font-size:11.5px; line-height:1.6;}

/* ---- Rentabilidade mensal vs. CDI (página do ETF) ---- */
.rent-table{width:100%; border-collapse:collapse; margin-top:8px; font-size:11.5px; min-width:900px;}
.rent-table th{font-family:'IBM Plex Mono', monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); padding:8px 6px; border-bottom:1px solid var(--border); text-align:right; font-weight:500; white-space:nowrap;}
.rent-table th:first-child, .rent-table th:nth-child(2){text-align:left;}
.rent-table td{padding:7px 6px; border-bottom:1px solid var(--border); text-align:right; white-space:nowrap;}
.rent-table td:first-child, .rent-table td:nth-child(2){text-align:left;}
.rent-table tbody tr:nth-child(4n+3) td, .rent-table tbody tr:nth-child(4n+4) td{background:var(--surface-2);}

/* ---- Comparador ---- */
.cmp-header{padding:48px 48px 8px;}
.cmp-header h1{font-family:'Fraunces', serif; font-size:30px; font-weight:600;}
.cmp-header p{color:var(--text-muted); font-size:13.5px; margin-top:8px;}
.cmp-grid{display:grid; margin:32px 48px 64px; border:1px solid var(--border); overflow-x:auto;}
.cmp-grid > div{padding:16px 20px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); font-size:13px; display:flex; align-items:center;}
.cmp-rowlabel{font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); background:var(--surface-2);}
.cmp-col-head{background:var(--surface-2); flex-direction:column; align-items:flex-start; gap:10px; padding:24px 20px;}
.cmp-col-head .ticker{font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:16px;}
.cmp-col-head .name{color:var(--text-faint); font-size:11.5px;}
.cmp-best{color:var(--gold); font-weight:600; font-family:'IBM Plex Mono', monospace;}
.cmp-val{font-family:'IBM Plex Mono', monospace;}
.cmp-chart-cell{height:100px; padding:12px 16px; align-items:stretch;}
.cmp-holdings-cell{flex-direction:column; align-items:flex-start; gap:10px; padding:16px;}
.cmp-holdings-updated{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--text-faint);}
.cmp-holdings-empty{color:var(--text-faint); font-size:11.5px; align-self:center; margin:auto;}
.empty-state{padding:60px 48px; text-align:center; color:var(--text-muted);}
.empty-state a{color:var(--gold); text-decoration:none; font-weight:600;}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr;}
  .hero > div:last-child{justify-self:start !important; text-align:left !important;}
  .listing-shell, .etf-body, .cmp-grid, .composicao-grid{grid-template-columns:1fr !important;}
  .cardgrid{grid-template-columns:1fr;}
  .kpi-strip{grid-template-columns:repeat(3,1fr);}
  section, .hero, .etf-header, nav.site{padding-left:20px; padding-right:20px;}
}

/* ---- Rodapé (compartilhado — montado via montarRodape() em common.js) ---- */
footer.site-footer{border-top:1px solid var(--border); background:var(--surface); margin-top:0;}
.footer-top{display:flex; justify-content:space-between; gap:48px; padding:48px 48px 32px; flex-wrap:wrap;}
.footer-brand{max-width:340px;}
.footer-brand p{color:var(--text-muted); font-size:12.5px; margin-top:12px; line-height:1.65;}
.footer-links{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:14px;}
.footer-col a{display:block; color:var(--text-muted); text-decoration:none; font-size:13px; margin-bottom:10px;}
.footer-col a:hover{color:var(--text);}
.footer-disclaimer{margin:0 48px 32px; padding:18px 20px; border:1px dashed var(--border); border-radius:4px; color:var(--text-faint); font-size:11.5px; line-height:1.7;}
.footer-disclaimer strong{color:var(--text-muted);}
.footer-bottom{padding:20px 48px; border-top:1px solid var(--border); color:var(--text-faint); font-size:11px; font-family:'IBM Plex Mono', monospace; text-align:center;}

/* ---- Página Sobre nós ---- */
.sobre-body{max-width:720px; margin:0 auto; padding:8px 48px 64px;}
.sobre-section{padding:28px 0; border-top:1px solid var(--border);}
.sobre-section:first-child{border-top:none;}
.sobre-section h2{font-family:'Fraunces', serif; font-size:19px; font-weight:600; margin-bottom:12px;}
.sobre-section p{color:var(--text-muted); font-size:13.5px; line-height:1.75;}

@media (max-width: 860px){
  .footer-top{flex-direction:column; gap:28px;}
}