/* ============================================================
   GranSoy — Página de Cotações (painel de mercado)
   Reaproveita tokens de landing.css (:root)
   ============================================================ */

body.cotacoes-page { background: var(--ink-2); }

/* header sempre escuro/sólido nesta página */
.header.header--board {
  background: rgba(10, 34, 19, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line-light);
}
.header.header--board .brand .logo-light { display: block; }
.header.header--board .brand .logo-dark { display: none; }
.header.header--board .nav a { color: rgba(255,255,255,0.86); }
.header.header--board .nav a:hover { color: #fff; }
.header.header--board.scrolled { height: 74px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }

.nav a.active { color: #fff; }
.nav a.active::after { width: 100%; }

/* ---------- Intro / cabeçalho da página ---------- */
.quotes-intro {
  padding: calc(var(--header-h) + 56px) 0 36px;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(0,166,81,0.16), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.quotes-intro .grain { opacity: 0.06; }
.quotes-intro .container { position: relative; z-index: 2; }
.qi-eyebrow {
  font-family: "Montserrat", sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft); display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.qi-eyebrow::before { content:""; width: 40px; height: 1px; background: var(--gold); opacity: .7; }
.quotes-intro h1 { color: #fff; font-size: clamp(34px, 5vw, 60px); }
.quotes-intro h1 em { color: var(--gold-soft); }
.quotes-intro .lead { margin-top: 18px; max-width: 60ch; color: rgba(255,255,255,0.78); font-size: clamp(16px, 1.3vw, 19px); }

.live-row { margin-top: 26px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.live-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  background: rgba(0,166,81,0.16); border: 1px solid rgba(0,166,81,0.4);
  padding: 9px 16px; border-radius: 999px;
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d27b; position: relative; }
.live-dot::after { content:""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #34d27b; animation: pulse 2s ease-out infinite; }
.live-meta { font-family: "Montserrat", sans-serif; font-size: 13px; letter-spacing: 0.04em; color: rgba(255,255,255,0.62); }
.live-meta b { color: #fff; font-weight: 700; }

/* ---------- Board / seção tabela ---------- */
.board-wrap { background: var(--ink-2); padding: 0 0 clamp(60px, 9vh, 110px); }
.board-wrap .container { width: min(calc(100% - 40px), 1360px); }

.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 30px 0 14px; }
.board-toolbar .place {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  display: inline-flex; align-items: center; gap: 10px;
}
.board-toolbar .place svg { width: 16px; height: 16px; color: var(--gold); }
.seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid var(--line-light); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6); padding: 8px 16px; border-radius: 999px; transition: background .25s, color .25s;
}
.seg button.active { background: var(--green); color: #fff; }
.seg button:not(.active):hover { color: #fff; }

.board {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.board-scroll { overflow-x: auto; }

table.market { width: 100%; border-collapse: collapse; min-width: 1080px; color: #fff; }
table.market thead th { font-weight: 600; }

.grp-row th {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 14px 12px;
  text-align: left; color: var(--gold-soft);
  border-bottom: 1px solid var(--line-light);
}
.grp-row th.g-fob { color: #fff; border-left: 1px solid var(--line-light); background: rgba(0,166,81,0.10); }
.grp-row th.g-fas { color: #fff; border-left: 1px solid var(--line-light); background: rgba(255,255,255,0.03); }
.grp-row th.g-exw { color: #fff; border-left: 1px solid var(--line-light); background: rgba(212,160,23,0.10); }

.sub-row th {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5);
  padding: 10px 14px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-light); background: rgba(0,0,0,0.18);
  position: sticky; top: 0;
}
.sub-row th.l { text-align: left; }
.sub-row th.grp-start { border-left: 1px solid var(--line-light); }

table.market tbody td {
  padding: 13px 14px; font-size: 14.5px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
table.market tbody td.l { text-align: left; }
table.market tbody td.grp-start { border-left: 1px solid var(--line-light); }
table.market tbody tr:hover td { background: rgba(255,255,255,0.04); }
table.market tbody tr:last-child td { border-bottom: 0; }

table.market tbody tr.fam-sep td { border-top: 1px solid var(--line-light); }

.prod { display: flex; align-items: baseline; gap: 8px; }
.prod .name { font-family: "Spectral", serif; font-weight: 700; font-size: 16px; color: #fff; letter-spacing: 0.01em; }
.prod .exch {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 8.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  background: var(--gold-soft); padding: 2px 6px; border-radius: 4px;
}
.prod .exch.b3 { background: #4a90d9; color: #06223c; }
.prod .exch.ice { background: #c98bd6; color: #2d0d36; }
.prod .exch.nymex { background: #e08a5a; color: #3a1606; }

.mes { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.05em; color: rgba(255,255,255,0.85); }
.codigo { font-family: "Montserrat", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.04em; color: rgba(255,255,255,0.45); }
.ultima { font-weight: 700; font-size: 15.5px; }
.prev { color: rgba(255,255,255,0.6); }
.usd, .brl { color: rgba(255,255,255,0.92); }
.unit { font-size: 10px; color: rgba(255,255,255,0.4); margin-left: 3px; font-weight: 600; }
.dim { color: rgba(255,255,255,0.32); }

.up { color: #34d27b; }
.down { color: #ff6b6b; }
.var-cell { font-weight: 700; }
.var-cell .arrow { font-size: 10px; margin-left: 4px; }

@keyframes flashUp { 0% { background: rgba(52,210,123,0.28);} 100% { background: transparent;} }
@keyframes flashDown { 0% { background: rgba(255,107,107,0.26);} 100% { background: transparent;} }
td.flash-up { animation: flashUp 1.1s ease-out; }
td.flash-down { animation: flashDown 1.1s ease-out; }

.prevcol { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.prevcol .tick { width: 0; height: 0; }
.tick.u { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #34d27b; }
.tick.d { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #ff6b6b; }

/* ---------- Painéis inferiores (dólar + futuro + mundo) ---------- */
.panels { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 18px; margin-top: 18px; }
.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid var(--line-light); border-radius: var(--r-lg);
  padding: 24px 26px; color: #fff;
}
.panel h3 {
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft);
  margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.panel h3 svg { width: 16px; height: 16px; color: var(--gold); }

.dl-list li { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.dl-list li:last-child { border-bottom: 0; }
.dl-list .k { font-family: "Montserrat", sans-serif; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.dl-list .v { font-family: "Spectral", serif; font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.dl-list .v.big { font-size: 26px; }

.world-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mkt {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-md); padding: 12px 14px;
}
.mkt .flag { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.mkt .info { display: flex; flex-direction: column; min-width: 0; }
.mkt .ix { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.78); white-space: nowrap; }
.mkt .pc { font-family: "Spectral", serif; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }

/* CTAs do board */
.board-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.board-cta {
  display: flex; align-items: center; gap: 16px;
  border: 1.5px solid var(--gold); border-radius: var(--r-lg);
  padding: 22px 26px; color: #fff;
  background: linear-gradient(120deg, rgba(212,160,23,0.10), rgba(212,160,23,0.02));
  transition: transform .35s var(--ease), background .35s ease, box-shadow .35s var(--ease);
}
.board-cta:hover { transform: translateY(-3px); background: linear-gradient(120deg, rgba(212,160,23,0.2), rgba(212,160,23,0.06)); box-shadow: 0 18px 40px rgba(0,0,0,0.3); }
.board-cta .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--gold); color: var(--ink); display: grid; place-items: center; flex: none; }
.board-cta .ic svg { width: 24px; height: 24px; }
.board-cta .tt { font-family: "Spectral", serif; font-weight: 700; font-size: 21px; }
.board-cta .ss { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* nota / disclaimer */
.board-note {
  margin-top: 26px; font-size: 13px; color: rgba(255,255,255,0.45);
  display: flex; align-items: flex-start; gap: 10px; max-width: 80ch;
}
.board-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gold); }

/* faixa de notícia */
.news-strip {
  background: var(--ink); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light);
  overflow: hidden; white-space: nowrap; margin-top: 22px; border-radius: var(--r-md);
}
.news-track { display: inline-flex; padding: 14px 0; animation: ticker 40s linear infinite; font-size: 14px; color: rgba(255,255,255,0.7); }
.news-track span { padding: 0 28px; display: inline-flex; align-items: center; gap: 28px; }
.news-track span::after { content: "\25C6"; color: var(--gold); font-size: 8px; }
.news-track b { color: #fff; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-right: -16px; }
.news-strip:hover .news-track { animation-play-state: paused; }

@keyframes pulse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
  .panels { grid-template-columns: 1fr 1fr; }
  .panels .panel--world { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .panels { grid-template-columns: 1fr; }
  .board-ctas { grid-template-columns: 1fr; }
  .world-grid { grid-template-columns: repeat(3, 1fr); }
  .quotes-intro { padding-top: calc(var(--header-h) + 30px); }
}