/* ============================================================
   MERCADO BARREIRO — styles.css
   Design: Minimalismo Radical + Autoridade
   Paleta: Navy (#0C1B2A) + Teal (#1B7B6F) + Ambar (#D4960A)
   ============================================================ */

:root {
  --bg:        #F7F5F2;
  --bg-alt:    #EDEAE5;
  --card:      #FFFFFF;
  --dark:      #0C1B2A;
  --dark-mid:  #1A2D42;
  --text:      #1C1C1C;
  --muted:     #6B6B6B;
  --muted-lt:  #999999;
  --teal:      #1B7B6F;
  --teal-lt:   #E6F2F0;
  --amber:     #D4960A;
  --amber-lt:  #FDF5E6;
  --red:       #B83B2A;
  --border:    #E0DDD8;
  --border-dk: #1C1C1C;
  --ff-display:'Space Grotesk', system-ui, sans-serif;
  --ff-body:   system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth }
body { font-family:var(--ff-body); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
.wrap { max-width:900px; margin:0 auto; padding:0 2rem }

/* ── HEADER ── */
.site-header { background:var(--dark); position:sticky; top:0; z-index:100 }
.header-inner { max-width:900px; margin:0 auto; padding:.75rem 2rem; display:flex; align-items:center; justify-content:space-between }
.logo { display:flex; align-items:center; gap:10px }
.logo-mark { width:6px; height:24px; background:var(--teal) }
.logo-name { font-family:var(--ff-display); font-size:15px; font-weight:600; color:#fff; letter-spacing:.3px; text-transform:uppercase }
.header-update { font-size:11px; color:rgba(255,255,255,.45); letter-spacing:.2px }
.header-update b { color:var(--teal); font-weight:500 }

/* ── NAV ── */
.site-nav { background:var(--dark); border-top:1px solid rgba(255,255,255,.06); overflow-x:auto; scrollbar-width:none }
.site-nav::-webkit-scrollbar { display:none }
.nav-inner { max-width:900px; margin:0 auto; padding:0 2rem; display:flex; white-space:nowrap }
.nav-a { font-family:var(--ff-display); font-size:11px; padding:10px 14px; color:rgba(255,255,255,.4); letter-spacing:.6px; text-transform:uppercase; border-bottom:2px solid transparent; cursor:pointer; display:inline-block; transition:color .15s }
.nav-a:hover { color:rgba(255,255,255,.75) }
.nav-a.active { color:#fff; border-bottom-color:var(--teal) }

/* ── SECTIONS ── */
.section { padding:2.5rem 0; border-bottom:1px solid var(--border) }
.section:last-of-type { border-bottom:none }
.s-label { font-family:var(--ff-display); font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-lt); margin-bottom:.35rem }
.s-title { font-family:var(--ff-display); font-size:22px; font-weight:700; letter-spacing:-.3px; margin-bottom:1.5rem }
.s-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem }

/* ── MANIFESTO ── */
.manifesto { padding:3.5rem 0 2.5rem; border-bottom:1px solid var(--border); text-align:center }
.manifesto-inner { max-width:680px; margin:0 auto }
.manifesto h2 { font-family:var(--ff-display); font-size:28px; font-weight:700; letter-spacing:-.5px; line-height:1.35; margin-bottom:1.25rem }
.manifesto h2 span { color:var(--teal) }
.manifesto p { font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:.75rem; text-align:justify }
.manifesto p:last-child { margin-bottom:0 }

/* ── HERO / BAROMETRO ── */
.hero { padding:2rem 0 1.5rem; border-bottom:1px solid var(--border) }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border-dk) }
.hero-item { padding:1.5rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--card) }
.hero-item:nth-child(2) { border-right:none }
.hero-item:nth-child(4) { border-right:none }
.hero-item:nth-child(3),.hero-item:nth-child(4) { border-bottom:none }
.hero-item.main { grid-column:1/-1; border-right:none; padding:2rem 1.5rem; background:var(--card); position:relative }
.hero-label { font-family:var(--ff-display); font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted-lt); margin-bottom:.5rem }
.hero-val { font-family:var(--ff-display); font-size:44px; font-weight:700; letter-spacing:-1.5px; line-height:1 }
.hero-val .teal { color:var(--teal) }
.hero-val-sm { font-family:var(--ff-display); font-size:24px; font-weight:700; letter-spacing:-.5px; line-height:1 }
.hero-sub { font-size:13px; color:var(--muted); margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.tag { font-family:var(--ff-display); font-size:11px; font-weight:600; padding:3px 10px; letter-spacing:.3px; display:inline-block }
.tag-up { background:var(--teal-lt); color:var(--teal) }
.tag-down { background:#FDECEC; color:var(--red) }
.tag-flat { background:#F0F0F0; color:var(--muted) }
.hero-fonte { font-size:10px; color:var(--muted-lt); margin-top:10px; text-transform:uppercase; letter-spacing:.5px }

/* ── SHARE BUTTON ── */
.share-btn { position:absolute; top:1rem; right:1rem; font-family:var(--ff-display); font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:6px 12px; border:1px solid var(--border); background:var(--card); color:var(--muted); cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:5px }
.share-btn:hover { border-color:var(--teal); color:var(--teal) }
.share-btn.copied { border-color:var(--teal); background:var(--teal-lt); color:var(--teal) }
.share-icon { font-size:12px }

/* ── STATS ROW ── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--border-dk); margin-top:1.5rem }
.stat { padding:1rem 1.25rem; background:var(--card); border-right:1px solid var(--border) }
.stat:last-child { border-right:none }
.stat-lbl { font-family:var(--ff-display); font-size:10px; font-weight:600; color:var(--muted-lt); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px }
.stat-val { font-family:var(--ff-display); font-size:20px; font-weight:700; letter-spacing:-.3px }
.stat-unit { font-size:11px; color:var(--muted-lt); margin-top:2px }

/* ── TABS / TOGGLE ── */
.tabs { display:flex; gap:0 }
.tab-btn { font-family:var(--ff-display); font-size:11px; font-weight:500; padding:7px 16px; letter-spacing:.5px; text-transform:uppercase; border:1px solid var(--border); border-bottom:2px solid transparent; cursor:pointer; background:transparent; color:var(--muted); transition:all .15s }
.tab-btn:not(:first-child) { border-left:none }
.tab-btn.active { color:var(--teal); border-bottom-color:var(--teal); background:var(--card) }

/* ── CHART ── */
.chart-wrap { border:1px solid var(--border-dk); background:var(--card); padding:1.5rem }
.chart-legend { display:flex; gap:1.5rem; margin-bottom:1rem }
.leg-item { display:flex; align-items:center; gap:6px; font-family:var(--ff-display); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px }
.leg-dot { width:12px; height:4px }
.fonte { font-size:10px; color:var(--muted-lt); margin-top:1rem; text-transform:uppercase; letter-spacing:.5px }

/* ── DISCLAIMER ── */
.disclaimer { font-size:11px; color:var(--muted); margin-top:.75rem; padding-left:12px; border-left:2px solid var(--teal); line-height:1.6 }
.disclaimer-block { border:1px solid var(--border-dk); background:var(--card); padding:1.5rem; margin-top:1.5rem }
.disclaimer-block h4 { font-family:var(--ff-display); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:.75rem; color:var(--dark) }
.disclaimer-block p { font-size:12px; color:var(--muted); line-height:1.7; margin-bottom:.5rem }
.disclaimer-block p:last-child { margin-bottom:0 }

/* ── TIPOLOGIAS ── */
.tipo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--border-dk) }
.tipo { background:var(--card); padding:1rem; text-align:center; border-right:1px solid var(--border); position:relative }
.tipo:last-child { border-right:none }
.tipo.feat { background:var(--dark); color:#fff }
.tipo-lbl { font-family:var(--ff-display); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:6px }
.tipo.feat .tipo-lbl { color:rgba(255,255,255,.4) }
.tipo-preco { font-family:var(--ff-display); font-size:16px; font-weight:700; letter-spacing:-.2px }
.tipo.feat .tipo-preco { color:var(--teal) }
.tipo-m2 { font-size:11px; color:var(--muted-lt); margin-top:2px }
.tipo.feat .tipo-m2 { color:rgba(255,255,255,.35) }

/* ── ARRENDAMENTO ── */
.arrend-table { border:1px solid var(--border-dk); background:var(--card); overflow:hidden }
.arr-row { display:grid; grid-template-columns:1fr 1.2fr 1fr; padding:12px 16px; border-bottom:1px solid var(--border); align-items:center }
.arr-row:last-child { border-bottom:none }
.arr-row.hdr { background:var(--dark); color:#fff; font-family:var(--ff-display); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.6px }
.arr-cell { font-size:14px }
.arr-yield { font-family:var(--ff-display); font-weight:600; color:var(--teal) }

/* ── COMPARATIVO ── */
.comp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--border-dk) }
.comp { background:var(--card); padding:1.25rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); position:relative }
.comp:nth-child(3n) { border-right:none }
.comp:nth-child(n+4) { border-bottom:none }
.comp.feat { background:var(--dark); color:#fff }
.comp-nome { font-family:var(--ff-display); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:4px }
.comp.feat .comp-nome { color:rgba(255,255,255,.4) }
.comp-preco { font-family:var(--ff-display); font-size:22px; font-weight:700; letter-spacing:-.3px }
.comp.feat .comp-preco { color:var(--teal) }
.comp-var { font-size:12px; margin-top:4px }
.comp-badge { display:inline-block; font-family:var(--ff-display); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; background:var(--teal); color:#fff; padding:2px 8px; margin-top:6px }

/* ── CREDITO ── */
.credito-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border-dk) }
.credito-panel { background:var(--card); padding:1.5rem; border-right:1px solid var(--border) }
.credito-panel:last-child { border-right:none }
.credito-panel h3 { font-family:var(--ff-display); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:1rem }
.euribor-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border) }
.euribor-row:last-child { border-bottom:none }
.euribor-label { font-size:13px; color:var(--muted) }
.euribor-val { font-family:var(--ff-display); font-size:18px; font-weight:700 }
.prestacao-table { width:100%; border-collapse:collapse }
.prestacao-table th { font-family:var(--ff-display); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); text-align:left; padding:8px 0; border-bottom:1px solid var(--border-dk) }
.prestacao-table td { font-size:13px; padding:10px 0; border-bottom:1px solid var(--border) }
.prestacao-table td:not(:first-child) { font-family:var(--ff-display); font-weight:600 }
.credito-info { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--border-dk); border-top:none }
.credito-metric { background:var(--card); padding:1rem 1.25rem; border-right:1px solid var(--border) }
.credito-metric:last-child { border-right:none }
.credito-jovem { border:1px solid var(--border-dk); border-top:none; background:var(--dark); color:#fff; padding:1.5rem }
.credito-jovem h4 { font-family:var(--ff-display); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--teal); margin-bottom:.75rem }
.credito-jovem ul { list-style:none; padding:0 }
.credito-jovem li { font-size:13px; color:rgba(255,255,255,.75); padding:4px 0 4px 16px; position:relative }
.credito-jovem li::before { content:'\2014'; position:absolute; left:0; color:var(--teal) }

/* ── PORTUGAL ── */
.portugal-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--border-dk) }
.portugal-card { background:var(--card); padding:1.5rem; border-right:1px solid var(--border); text-align:center }
.portugal-card:last-child { border-right:none }
.portugal-card.feat { background:var(--dark); color:#fff }
.pc-label { font-family:var(--ff-display); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:6px }
.portugal-card.feat .pc-label { color:rgba(255,255,255,.35) }
.pc-val { font-family:var(--ff-display); font-size:28px; font-weight:700; letter-spacing:-.5px }
.portugal-card.feat .pc-val { color:var(--teal) }
.pc-fonte { font-size:10px; color:var(--muted-lt); margin-top:4px; text-transform:uppercase; letter-spacing:.3px }
.portugal-card.feat .pc-fonte { color:rgba(255,255,255,.25) }
.posicionamento { border:1px solid var(--border-dk); border-top:none; background:var(--card); padding:1.25rem; text-align:center }
.posicionamento-val { font-family:var(--ff-display); font-size:15px; font-weight:600 }
.transacoes-row { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border-dk); border-top:none }
.transacoes-item { background:var(--card); padding:1.25rem; border-right:1px solid var(--border) }
.transacoes-item:last-child { border-right:none }

/* ── AI ANALYSIS ── */
.ai-card { border:1px solid var(--border-dk); background:var(--card); padding:2rem }
.ai-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:.5rem }
.ai-trimestre { font-family:var(--ff-display); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.5px }
.ai-badge { font-family:var(--ff-display); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; background:var(--dark); color:rgba(255,255,255,.5); padding:4px 10px }
.ai-body { font-size:14px; line-height:1.85; color:var(--text) }
.ai-body p { margin-bottom:1rem }
.ai-body p:last-child { margin-bottom:0 }
.ai-body strong { font-weight:600 }
.ai-loading { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; padding:1rem 0 }
.spinner { width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite; flex-shrink:0 }
@keyframes spin { to { transform:rotate(360deg) } }
.ai-refresh { margin-top:1.25rem; font-family:var(--ff-display); font-size:11px; font-weight:600; color:var(--teal); background:none; border:1px solid var(--teal); padding:6px 16px; cursor:pointer; text-transform:uppercase; letter-spacing:.5px; display:none; transition:all .15s }
.ai-refresh:hover { background:var(--teal); color:#fff }

/* ── FEEDBACK FORM ── */
.feedback-wrap { border:1px solid var(--border-dk); background:var(--card); padding:2rem }
.feedback-wrap h3 { font-family:var(--ff-display); font-size:16px; font-weight:700; margin-bottom:.5rem }
.feedback-wrap p { font-size:13px; color:var(--muted); margin-bottom:1.25rem }
.feedback-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:1rem }
.feedback-opt { font-family:var(--ff-display); font-size:12px; padding:10px 14px; border:1px solid var(--border); background:var(--card); cursor:pointer; text-align:left; transition:all .15s; color:var(--text) }
.feedback-opt:hover { border-color:var(--teal) }
.feedback-opt.selected { border-color:var(--teal); background:var(--teal-lt); color:var(--teal) }
.feedback-input { width:100%; font-family:var(--ff-body); font-size:13px; padding:10px 14px; border:1px solid var(--border); background:var(--card); outline:none; margin-bottom:1rem }
.feedback-input:focus { border-color:var(--teal) }
.feedback-submit { font-family:var(--ff-display); font-size:12px; font-weight:600; padding:10px 24px; border:none; background:var(--dark); color:#fff; cursor:pointer; text-transform:uppercase; letter-spacing:.5px; transition:background .15s }
.feedback-submit:hover { background:var(--teal) }

/* ── LEAD MAGNET ── */
.lm-wrap { background:var(--dark); padding:2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap }
.lm-text h3 { font-family:var(--ff-display); font-size:16px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px }
.lm-text p { font-size:13px; color:rgba(255,255,255,.45) }
.lm-form { display:flex; gap:0; flex-shrink:0 }
.lm-input { font-family:var(--ff-body); font-size:13px; padding:10px 14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#fff; outline:none; width:220px }
.lm-input::placeholder { color:rgba(255,255,255,.25) }
.lm-input:focus { border-color:var(--teal) }
.lm-btn { font-family:var(--ff-display); font-size:12px; font-weight:600; padding:10px 20px; border:none; background:var(--teal); color:#fff; cursor:pointer; text-transform:uppercase; letter-spacing:.5px; transition:background .15s }
.lm-btn:hover { background:#166B60 }
.lm-success { text-align:center; color:#fff; width:100%; padding:.5rem 0 }

/* ── FOOTER ── */
.site-footer { padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem }
.ft-copy { font-size:11px; color:var(--muted-lt) }
.ft-links { display:flex; gap:1rem }
.ft-link { font-size:11px; color:var(--muted); cursor:pointer; transition:color .15s }
.ft-link:hover { color:var(--teal) }

/* ── MODAL ── */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; align-items:center; justify-content:center; padding:1rem }
.overlay.open { display:flex }
.modal { background:var(--card); padding:2rem; max-width:480px; width:100%; position:relative; border:1px solid var(--border-dk) }
.modal-close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:18px; cursor:pointer; color:var(--muted) }
.modal h2 { font-family:var(--ff-display); font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:1rem }
.modal p { font-size:14px; color:var(--muted); line-height:1.7; margin-bottom:.75rem }
.modal p:last-child { margin-bottom:0 }

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .hero-grid { grid-template-columns:1fr }
  .hero-item { border-right:none!important }
  .hero-val { font-size:34px }
  .stats-row { grid-template-columns:repeat(2,1fr) }
  .stat { border-bottom:1px solid var(--border) }
  .tipo-grid { grid-template-columns:repeat(3,1fr) }
  .tipo:nth-child(3) { border-right:none }
  .comp-grid { grid-template-columns:repeat(2,1fr) }
  .comp:nth-child(2n) { border-right:none }
  .credito-grid { grid-template-columns:1fr }
  .credito-panel { border-right:none!important; border-bottom:1px solid var(--border) }
  .credito-info { grid-template-columns:1fr }
  .credito-metric { border-right:none!important; border-bottom:1px solid var(--border) }
  .portugal-cards { grid-template-columns:1fr }
  .portugal-card { border-right:none!important; border-bottom:1px solid var(--border) }
  .transacoes-row { grid-template-columns:1fr }
  .transacoes-item { border-right:none!important; border-bottom:1px solid var(--border) }
  .s-head { flex-direction:column; align-items:flex-start }
  .lm-wrap { flex-direction:column }
  .lm-form { flex-direction:column; width:100% }
  .lm-input { width:100% }
  .feedback-options { grid-template-columns:1fr }
  .manifesto h2 { font-size:22px }
}
@media(max-width:480px) {
  .tipo-grid { grid-template-columns:repeat(2,1fr) }
  .hero-val { font-size:28px }
  .hero-val-sm { font-size:20px }
  .stats-row { grid-template-columns:1fr }
  .comp-grid { grid-template-columns:1fr }
  .comp { border-right:none!important }
}