:root {
  --market-ink: #0c1712;
  --market-black: #07110c;
  --market-deep: #0a2f21;
  --market-green: #00a866;
  --market-green-bright: #26d987;
  --market-lime: #b8ff4a;
  --market-paper: #f4f7f5;
  --market-white: #ffffff;
  --market-muted: #68766e;
  --market-line: #dce5df;
  --market-soft: #eaf3ee;
}

html { scroll-behavior: smooth; }
.quotes-page { min-height: 100vh; background: var(--market-paper); color: var(--market-ink); }
.quotes-page .site-header { position: relative; inset: auto; width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--market-line); border-radius: 0; background: rgba(255,255,255,.96); box-shadow: none; backdrop-filter: blur(16px); }
.quotes-page .header-inner { min-height: 84px; }
.quotes-page .main-nav > a:first-child { padding: 0; background: transparent; color: #344239; }
.quotes-page .main-nav > a.is-current { padding: .66rem 1rem; border-radius: 999px; background: #e5f7ee; color: #007e4c; }
.quotes-page .main-nav > a.is-current::after { display: none; }
.quotes-main { width: min(1440px, calc(100% - 56px)); margin: 0 auto; padding: 28px 0 72px; }

.quotes-hero { position: relative; min-height: 440px; display: grid; grid-template-columns: 1.35fr .65fr; overflow: hidden; border-radius: 30px; background: var(--market-black); color: #fff; box-shadow: 0 28px 70px rgba(5,28,17,.16); }
.quotes-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 74% 18%, rgba(38,217,135,.2), transparent 26%), linear-gradient(115deg, transparent 40%, rgba(255,255,255,.02)); pointer-events: none; }
.quotes-hero-copy { position: relative; z-index: 2; align-self: center; padding: clamp(48px, 6vw, 88px); }
.quotes-kicker { display: inline-flex; align-items: center; gap: .72rem; color: var(--market-green-bright); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.quotes-kicker i { width: 32px; height: 2px; border-radius: 999px; background: currentColor; }
.quotes-hero h1 { max-width: 820px; margin: 1.15rem 0 1.35rem; font-family: "Manrope", sans-serif; font-size: clamp(3.2rem, 5.3vw, 6.4rem); font-weight: 700; line-height: .94; letter-spacing: -.07em; }
.quotes-hero h1 em { color: var(--market-lime); font-style: normal; }
.quotes-hero-copy > p { max-width: 690px; margin: 0; color: #bbc9c1; font-size: clamp(.98rem, 1.15vw, 1.12rem); line-height: 1.65; }
.quotes-hero-actions { display: flex; align-items: center; gap: 1.3rem; margin-top: 2rem; }
.quotes-hero-actions > a { display: inline-flex; align-items: center; gap: 1rem; min-height: 50px; padding: 0 1.15rem 0 1.35rem; border-radius: 999px; background: var(--market-lime); color: #07110c; text-decoration: none; font-size: .78rem; font-weight: 900; }
.quotes-hero-actions > a span { font-size: 1.05rem; }
.quotes-hero-actions > span { display: inline-flex; align-items: center; gap: .55rem; color: #8fa198; font-size: .69rem; font-weight: 700; }
.quotes-hero-actions > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--market-green-bright); box-shadow: 0 0 0 5px rgba(38,217,135,.12); }
.quotes-hero-visual { position: relative; min-height: 360px; overflow: hidden; border-left: 1px solid rgba(255,255,255,.08); background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 42px 42px; }
.hero-index-card { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(280px, 74%); padding: 1.55rem; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: rgba(7,25,17,.78); box-shadow: 0 28px 60px rgba(0,0,0,.28); transform: translate(-50%, -50%); backdrop-filter: blur(14px); }
.hero-index-card span { display: block; color: var(--market-green-bright); font-size: .64rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.hero-index-card strong { display: block; margin: .5rem 0 .3rem; font-family: "Manrope", sans-serif; font-size: 2.4rem; letter-spacing: -.055em; }
.hero-index-card small { color: #95a69d; line-height: 1.45; }
.hero-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(184,255,74,.2); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }
.orbit-one { width: 420px; height: 220px; }
.orbit-two { width: 560px; height: 340px; opacity: .45; }
.hero-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--market-lime); box-shadow: 0 0 22px rgba(184,255,74,.65); }
.dot-one { top: 26%; right: 18%; }
.dot-two { bottom: 24%; left: 20%; }
.dot-three { bottom: 16%; right: 29%; width: 5px; height: 5px; }

.market-snapshot { position: relative; z-index: 5; width: calc(100% - 80px); margin: -34px auto 24px; display: grid; grid-template-columns: 1.05fr repeat(3, 1fr); overflow: hidden; border: 1px solid var(--market-line); border-radius: 20px; background: #fff; box-shadow: 0 18px 48px rgba(5,37,21,.1); }
.market-snapshot > * { min-width: 0; padding: 1.25rem 1.35rem; }
.market-snapshot > * + * { border-left: 1px solid var(--market-line); }
.snapshot-intro { display: flex; justify-content: center; flex-direction: column; background: #f8faf9; }
.snapshot-intro span { color: var(--market-green); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.snapshot-intro strong { margin-top: .28rem; font-size: .9rem; }
.snapshot-card { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name change" "price change"; align-items: center; gap: .2rem 1rem; }
.snapshot-card > div { grid-area: name; display: flex; align-items: baseline; gap: .45rem; }
.snapshot-card > div span { color: var(--market-ink); font-size: .72rem; font-weight: 900; }
.snapshot-card > div small { overflow: hidden; color: var(--market-muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-card .market-price { grid-area: price; margin-top: .15rem; font-family: "Manrope", sans-serif; font-size: 1.18rem; letter-spacing: -.03em; }
.snapshot-card .market-change { grid-area: change; justify-self: end; padding: .34rem .48rem; border-radius: 999px; background: #edf4f0; color: #718078; font-size: .67rem; }
.snapshot-card .ticker-up { background: #e7f8ef; color: #008950; }
.snapshot-card .ticker-down { background: #fff0f1; color: #d8434d; }

.quotes-dashboard.market-live { overflow: hidden; border: 1px solid var(--market-line); border-radius: 26px; background: #fff; box-shadow: 0 20px 55px rgba(8,42,25,.07); scroll-margin-top: 24px; }
.quotes-dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 2rem 2.2rem 1.6rem; }
.market-live-eyebrow { color: var(--market-green); font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.quotes-dashboard-head h2 { margin: .38rem 0 .25rem; font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 2.4vw, 2.65rem); letter-spacing: -.055em; }
.quotes-dashboard-head p { margin: 0; color: var(--market-muted); font-size: .84rem; }
.quotes-actions { display: flex; align-items: center; gap: .65rem; }
.quotes-search { width: min(350px, 32vw); min-height: 48px; display: flex; align-items: center; gap: .6rem; padding: .72rem .95rem; border: 1px solid var(--market-line); border-radius: 13px; background: #f7f9f8; transition: .2s ease; }
.quotes-search:focus-within { border-color: var(--market-green); background: #fff; box-shadow: 0 0 0 4px rgba(0,168,102,.1); }
.quotes-search > span { color: var(--market-green); font-size: 1.25rem; }
.quotes-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--market-ink); font: inherit; font-size: .82rem; }
.quotes-page .market-refresh { min-height: 48px; padding: 0 1.05rem; border: 0; border-radius: 13px; background: var(--market-deep); color: #fff; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 800; }
.quotes-page .market-refresh:hover { background: #0b4a32; }
.quotes-page .market-refresh.is-loading { opacity: .65; }
.sector-filters { display: flex; align-items: center; gap: .5rem; padding: .9rem 2.2rem; overflow-x: auto; border-top: 1px solid var(--market-line); border-bottom: 1px solid var(--market-line); background: #f8faf9; scrollbar-width: none; }
.sector-filters::-webkit-scrollbar { display: none; }
.filter-label { margin-right: .35rem; color: #7a887f; font-size: .63rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.sector-chip { flex: 0 0 auto; min-height: 36px; padding: 0 .9rem; border: 1px solid #d8e1dc; border-radius: 999px; background: #fff; color: #405047; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; transition: .18s ease; }
.sector-chip:hover { border-color: #86c7a5; color: #007f4d; }
.sector-chip.is-active { border-color: var(--market-deep); background: var(--market-deep); color: #fff; }

.quotes-stock-board { border: 0; background: #fff; }
.quotes-stock-board .stock-board-heading { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 2.2rem .6rem; border: 0; background: #fff; color: var(--market-ink); }
.stock-board-heading > div > span { color: var(--market-green); font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.stock-board-heading h3 { margin: .25rem 0 0; font-family: "Manrope", sans-serif; font-size: 1.05rem; }
.stock-board-status { display: inline-flex; align-items: center; gap: .5rem; color: #75837b; font-size: .67rem; font-weight: 700; }
.stock-board-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--market-green-bright); box-shadow: 0 0 0 5px rgba(38,217,135,.12); }
.quotes-page .stock-table-wrap { overflow: visible; padding: 1rem 2.2rem 1.5rem; background: #fff; }
.quotes-page .stock-table { width: 100%; min-width: 0; display: block; border: 0; border-collapse: separate; font-size: .82rem; }
.quotes-page .stock-table thead { display: none; }
.quotes-page .stock-table tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quotes-page .stock-table tbody tr { position: relative; min-width: 0; min-height: 184px; padding: 1.25rem; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "company time" "price change" "range range"; gap: .8rem .65rem; overflow: hidden; border: 1px solid var(--market-line); border-radius: 17px; background: #fff; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.quotes-page .stock-table tbody tr::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--market-green), var(--market-green-bright)); opacity: 0; transition: opacity .18s ease; }
.quotes-page .stock-table tbody tr::after { content: ""; position: absolute; right: -26px; bottom: -34px; width: 110px; height: 110px; border: 1px solid #e9f0ec; border-radius: 50%; pointer-events: none; }
.quotes-page .stock-table tbody tr:hover { z-index: 1; border-color: #a9cdb9; box-shadow: 0 18px 34px rgba(5,51,28,.09); transform: translateY(-3px); }
.quotes-page .stock-table tbody tr:hover::before { opacity: 1; }
.quotes-page .stock-table tbody tr[hidden] { display: none; }
.quotes-page .stock-table th,
.quotes-page .stock-table td { padding: 0; border: 0; text-align: left; white-space: normal; }
.quotes-page .stock-table tbody th { grid-area: company; min-width: 0; align-self: start; }
.quotes-page .stock-table tbody th b { display: block; overflow: hidden; color: var(--market-ink); font-family: "Manrope", sans-serif; font-size: .93rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.quotes-page .stock-table tbody th span { display: inline-block; margin-top: .35rem; padding: .24rem .4rem; border-radius: 5px; background: var(--market-soft); color: #527062; font-size: .59rem; font-weight: 900; letter-spacing: .08em; }
.quotes-page .stock-table td[data-stock-time] { grid-area: time; align-self: start; color: #87938c; font-size: .62rem; font-weight: 700; text-align: right; }
.quotes-page .stock-table td[data-stock-price] { grid-area: price; align-self: center; color: var(--market-deep); font-family: "Manrope", sans-serif; font-size: 1.62rem; font-weight: 800; letter-spacing: -.045em; }
.quotes-page .stock-table td[data-stock-change] { grid-area: change; align-self: center; justify-self: end; padding: .4rem .58rem; border-radius: 999px; background: #eef4f1; color: #718078; font-size: .71rem; font-weight: 900; white-space: nowrap; }
.quotes-page .stock-table td[data-stock-high],
.quotes-page .stock-table td[data-stock-low] { grid-area: range; align-self: end; padding-top: .75rem; border-top: 1px solid #e6ece8; color: #1f2d25; font-size: .7rem; font-weight: 800; }
.quotes-page .stock-table td[data-stock-high] { padding-right: 52%; }
.quotes-page .stock-table td[data-stock-low] { justify-self: end; border-top-color: transparent; text-align: right; }
.quotes-page .stock-table td[data-stock-high]::before,
.quotes-page .stock-table td[data-stock-low]::before { display: block; margin-bottom: .15rem; color: #8a958f; font-size: .55rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.quotes-page .stock-table td[data-stock-high]::before { content: "Máxima"; }
.quotes-page .stock-table td[data-stock-low]::before { content: "Mínima"; }
.quotes-page .stock-table .is-positive { background: #e6f8ef; color: #008b51; }
.quotes-page .stock-table .is-negative { background: #fff0f1; color: #dc414c; }
.stock-grid-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem 2.2rem 1.8rem; background: #fff; }
.stock-grid-footer > span { color: #78867e; font-size: .7rem; font-weight: 700; }
.stock-grid-footer button { min-height: 44px; padding: 0 1rem; border: 1px solid var(--market-deep); border-radius: 999px; background: #fff; color: var(--market-deep); cursor: pointer; font: inherit; font-size: .74rem; font-weight: 900; transition: .18s ease; }
.stock-grid-footer button:hover { background: var(--market-deep); color: #fff; }
.stock-grid-footer button[hidden] { display: none; }
.market-live-note { margin: 0; padding: 1rem 2.2rem; border: 0; background: var(--market-black); color: #84958b; font-size: .64rem; text-align: left; }
.quotes-empty { margin: 0; padding: 2rem; color: var(--market-muted); text-align: center; }
.quotes-empty[hidden] { display: none; }

.quotes-explainer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 24px; overflow: hidden; border: 1px solid var(--market-line); border-radius: 20px; background: var(--market-line); }
.quotes-explainer > div { position: relative; padding: 1.65rem; background: #fff; }
.quotes-explainer span { color: var(--market-green); font-size: .64rem; font-weight: 900; letter-spacing: .12em; }
.quotes-explainer h2 { margin: .65rem 0 .35rem; font-family: "Manrope", sans-serif; font-size: 1.05rem; }
.quotes-explainer p { max-width: 360px; margin: 0; color: var(--market-muted); font-size: .8rem; line-height: 1.55; }
.quotes-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 2.5rem max(28px, calc((100vw - 1440px) / 2)); border: 0; background: var(--market-black); color: #fff; }
.quotes-footer .footer-brand-slogan { width: 210px; height: auto; filter: brightness(0) invert(1); }
.quotes-footer nav { display: flex; gap: 1.4rem; }
.quotes-footer nav a { color: #d9e4de; text-decoration: none; font-size: .78rem; font-weight: 700; }
.quotes-footer nav a:hover { color: var(--market-lime); }
.quotes-footer p { margin: 0; color: #7d8e84; font-size: .66rem; line-height: 1.5; text-align: right; }

@media (max-width: 1080px) {
  .quotes-main { width: calc(100% - 30px); padding-top: 16px; }
  .quotes-hero { grid-template-columns: 1fr .55fr; }
  .quotes-hero-copy { padding: 52px 38px; }
  .market-snapshot { width: calc(100% - 36px); grid-template-columns: 1fr 1fr 1fr; }
  .snapshot-intro { display: none; }
  .market-snapshot > .snapshot-card:first-of-type { border-left: 0; }
  .quotes-page .stock-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes-footer { grid-template-columns: 1fr; }
  .quotes-footer nav { flex-wrap: wrap; }
  .quotes-footer p { text-align: left; }
}

@media (max-width: 760px) {
  .quotes-hero { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .quotes-hero-copy { padding: 44px 28px 36px; }
  .quotes-hero h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .quotes-hero-actions { align-items: flex-start; flex-direction: column; }
  .quotes-hero-visual { min-height: 230px; border-top: 1px solid rgba(255,255,255,.08); border-left: 0; }
  .market-snapshot { width: calc(100% - 24px); margin-top: -22px; grid-template-columns: 1fr; }
  .market-snapshot > * + * { border-top: 1px solid var(--market-line); border-left: 0; }
  .market-snapshot > .snapshot-card:first-of-type { border-top: 0; }
  .quotes-dashboard.market-live { border-radius: 20px; }
  .quotes-dashboard-head { align-items: stretch; flex-direction: column; padding: 1.5rem 1.2rem 1.2rem; }
  .quotes-actions { align-items: stretch; flex-direction: column; }
  .quotes-search { width: 100%; }
  .quotes-page .market-refresh { width: 100%; }
  .sector-filters { padding-inline: 1.2rem; }
  .quotes-stock-board .stock-board-heading { align-items: flex-start; flex-direction: column; gap: .8rem; padding-inline: 1.2rem; }
  .quotes-page .stock-table-wrap { padding: .8rem 1.2rem 1.2rem; }
  .quotes-page .stock-table tbody { grid-template-columns: 1fr; gap: 10px; }
  .quotes-page .stock-table tbody tr { min-height: 178px; }
  .stock-grid-footer { align-items: stretch; flex-direction: column; padding: 0 1.2rem 1.3rem; }
  .stock-grid-footer button { width: 100%; }
  .market-live-note { padding-inline: 1.2rem; }
  .quotes-explainer { grid-template-columns: 1fr; }
  .quotes-page .main-nav > a.is-current { border-radius: 0; }
}

@media (max-width: 430px) {
  .quotes-main { width: calc(100% - 18px); padding-bottom: 44px; }
  .quotes-hero-copy { padding-inline: 22px; }
  .quotes-hero-copy > p { font-size: .91rem; }
  .hero-index-card { width: 78%; }
  .quotes-page .stock-table-wrap { padding-inline: .8rem; }
  .quotes-stock-board .stock-board-heading,
  .stock-grid-footer,
  .market-live-note { padding-inline: .9rem; }
}