/* ============================================================
   SECTION REDESIGN — scoped under #section-page.
   Global base (body, box-sizing, a) comes from home.css.
   Shared Editorial Bold components (reco, escuchar, newsbox,
   pod, esc-player) come from home-new.css via #home-redesign.
   ============================================================ */

/* --- scope root ------------------------------------------- */
#section-page {
  --accent: #E8A020;
  --ink: #111;
  --text-main: #111827;
  --text-muted: #6b7280;
  --border-soft: #e5e7eb;
  --sesgo-grad: linear-gradient(90deg,#1d4ed8 0%,#93b4ff 28%,#f4f4f5 50%,#ff9b9b 72%,#dc2626 100%);
  color: var(--text-main);
}

/* --- dark mode ------------------------------------------- */
.dark #section-page {
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --border-soft: #2a3042;
  --ink: #f3f4f6;
}
.dark #section-page .filters-bar { background: rgba(17,21,28,.95); }
.dark #section-page .cl-card { background: #1a1f2e; border-color: #2a3042; }
/* dek/description text: lighten in dark mode to match home (was #374151, unreadable on dark bg) */
.dark #section-page .lead .dek,
.dark #section-page .mn-row .dek,
.dark #section-page .cl-hero .dek { color: #c8ccd2; }

/* --- link normalization (prevent browser-default blue) --- */
#section-page a {
  color: var(--text-main) !important;
  text-decoration: none !important;
}
#section-page a:hover { text-decoration: none; }

#section-page h1,
#section-page h2,
#section-page h3,
#section-page h4 { color: var(--text-main); }
#section-page .serif { font-family: Georgia,"Times New Roman",serif; }
#section-page .wrap,
#section-page .hr-wrap { max-width: 1200px; margin: 0 auto; padding: 0 18px; }

/* --- image wrappers --------------------------------------- */
#section-page .hr-img-wrap { position: relative; }
#section-page .hr-imgwrap {
  position: relative; overflow: hidden; border-radius: 6px;
  background: linear-gradient(135deg,#3a4252,#1f2530);
  display: block; cursor: pointer;
}
#section-page .hr-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
#section-page .r-16-10 { aspect-ratio: 16/10; }
#section-page .r-4-3   { aspect-ratio: 4/3; }
#section-page .hr-img-credit-badge {
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-family: Georgia,"Times New Roman",serif; font-style: italic;
  font-weight: 700; font-size: 11px; line-height: 18px; text-align: center;
  pointer-events: none;
}
#section-page .hr-img-credit {
  margin: 5px 0 0; font-size: 10.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- chips ------------------------------------------------ */
#section-page .chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#section-page .tag {
  font-weight: 800; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px;
  background: rgba(232,160,32,.16); color: #9a6a00; border: 1px solid rgba(232,160,32,.45);
}
#section-page .subtag {
  font-weight: 700; font-size: 9.5px; letter-spacing: .7px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  color: var(--text-muted); background: transparent; border: 1px solid var(--border-soft);
}

/* --- sesgo bar -------------------------------------------- */
#section-page .sesgo { margin-top: 10px; }
#section-page .sesgo-track {
  position: relative; width: 100%; height: 6px; border-radius: 999px;
  background: var(--sesgo-grad);
}
#section-page .sesgo--hero .sesgo-track { height: 9px; }
#section-page .sesgo-track .mk {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%; background: #111;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.4);
}
#section-page .sesgo--hero .sesgo-track .mk { width: 16px; height: 16px; }
#section-page .sesgo-cap {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--text-muted); letter-spacing: .2px;
}
#section-page .sesgo--hero .sesgo-cap { font-size: 12px; }
#section-page .sesgo-cap .dotc { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
#section-page .dot-izq { background: #1d4ed8; }
#section-page .dot-cen { background: #9ca3af; }
#section-page .dot-der { background: #dc2626; }
#section-page .sesgo-cap b { color: var(--text-main); }

/* --- byline / kicker ------------------------------------- */
#section-page .byline { font-size: 12px; color: var(--text-muted); margin-top: 9px; }
#section-page .byline b { color: var(--text-main); }
#section-page .kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
#section-page .kicker .t { color: var(--ink); }

/* ============ 1 · SECTION HEADER ========================= */
#section-page .sec-hero { padding: 34px 0 18px; border-bottom: 3px solid var(--ink); }
#section-page .accent-tab {
  display: block; width: 48px; height: 14px;
  background: var(--accent); border-radius: 2px; margin-bottom: 14px;
}
#section-page .sec-hero h1 {
  font-family: Georgia,"Times New Roman",serif; font-weight: 900;
  font-size: clamp(44px,7vw,76px); letter-spacing: -1.6px; margin: 0; line-height: .98;
}

/* ============ 3 · LEAD STORY ============================= */
#section-page .lead { padding: 26px 0 30px; }
#section-page .lead-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; }
#section-page .lead h2 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(30px,3.8vw,48px); line-height: 1.03; font-weight: 900;
  letter-spacing: -1px; margin: 14px 0 12px;
}
#section-page .lead .dek { font-size: 18px; line-height: 1.5; color: #374151; margin: 0; }

/* ============ shared section title row =================== */
#section-page .sec-head {
  display: flex; align-items: center; justify-content: space-between; margin: 40px 0 18px;
}
#section-page .sec-title { display: flex; align-items: center; gap: 12px; }
#section-page .sec-title .tabsm { width: 34px; height: 10px; background: var(--accent); border-radius: 2px; }
#section-page .sec-title h2 { font-size: 24px; font-weight: 900; letter-spacing: -.5px; margin: 0; }
#section-page .sec-title h2 .muted { color: var(--text-muted); font-weight: 800; }
#section-page .sec-more {
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  color: var(--accent); text-transform: uppercase; white-space: nowrap;
}

/* ============ 4 · MÁS ACTIVO list (two columns) ========= */
#section-page .sec-list {
  border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px;
}
#section-page .mn-row {
  display: grid; grid-template-columns: 44px 1fr 150px; gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--border-soft); align-items: start;
}
#section-page .mn-row .mn-num {
  font-size: 42px; font-weight: 900; color: var(--accent);
  line-height: .9; letter-spacing: -2px; padding-top: 3px;
}
#section-page .mn-row h3 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(19px,1.8vw,23px); line-height: 1.12; font-weight: 900;
  margin: 0 0 8px; letter-spacing: -.4px;
}
#section-page .mn-row .dek { font-size: 13.5px; line-height: 1.45; color: #374151; margin: 0 0 6px; }
#section-page .mn-row .mn-img { width: 150px; }
#section-page .mn-row .mn-img .hr-imgwrap { aspect-ratio: 4/3; }
#section-page .mn-row .mn-img .hr-img-credit { display: none; }

/* ============ FILTER CHIPS BAR (above card grid) ========= */
#section-page .filters-bar {
  position: sticky; top: 80px; z-index: 900;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 14px 0; border-bottom: 1px solid var(--border-soft);
  margin: 32px 0 0;
}
#section-page .filters-bar::-webkit-scrollbar { display: none; }
#section-page .fchip {
  flex: 0 0 auto; border: 1px solid var(--border-soft); background: #fff; color: var(--text-main);
  font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: all .12s;
}
#section-page .fchip:hover { border-color: var(--accent); }
#section-page .fchip.active { background: var(--accent); border-color: var(--accent); color: #111; }
.dark #section-page .fchip { background: #1a1f2e; border-color: #2a3042; color: var(--text-main); }
.dark #section-page .fchip.active { background: var(--accent); border-color: var(--accent); color: #111; }

/* ============ 5 · CARD GRID ============================== */
#section-page .grid-head { border-top: 2px solid var(--ink); padding-top: 18px; }
#section-page .card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
#section-page .card { display: flex; flex-direction: column; }
#section-page .card .chips { margin-top: 12px; }
#section-page .card h3 {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 18px; line-height: 1.18; font-weight: 900; margin: 10px 0 0; letter-spacing: -.3px;
}
#section-page .loadwrap { text-align: center; margin: 36px 0 10px; }
#section-page .loadmore {
  font-size: 14px; font-weight: 800; letter-spacing: .5px; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); padding: 13px 30px;
  border-radius: 999px; cursor: pointer; transition: all .14s;
}
#section-page .loadmore:hover { background: var(--accent); border-color: var(--accent); }
.dark #section-page .loadmore { background: #1a1f2e; }
.dark #section-page .loadmore:hover { background: var(--accent); border-color: var(--accent); color: #111; }
#section-page .noresult { display: none; text-align: center; color: var(--text-muted); font-size: 15px; padding: 40px 0; }

/* ============ 6 · COLLAGE (masonry asymmetric) ============ */
#section-page .r-3-1 { aspect-ratio: 3/1; }

#section-page .cl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 22px;
  margin-top: 26px;
  margin-bottom: 10px;
}

/* --- card box base --- */
#section-page .cl-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(17,24,39,.06), 0 4px 16px rgba(17,24,39,.04);
  transition: transform .14s ease, box-shadow .14s ease;
}
#section-page .cl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(17,24,39,.13);
}
/* image fills card top edge without inner corner gap */
#section-page .cl-card .hr-imgwrap { border-radius: 0; }

#section-page .cl-body { padding: 16px 18px 18px; flex: 1; }
#section-page .cl-card .chips { margin-bottom: 8px; }
#section-page .cl-card h3 {
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 900; margin: 10px 0 0; letter-spacing: -.3px; line-height: 1.14;
}
#section-page .cl-card .meta {
  font-size: 11px; color: var(--text-muted); margin-top: auto; padding-top: 10px;
}

/* hero — 2 columns × 2 rows */
#section-page .cl-hero { grid-column: span 2; grid-row: span 2; }
#section-page .cl-hero h3 { font-size: clamp(22px, 2.4vw, 30px); margin-top: 10px; }
#section-page .cl-hero .dek { font-size: 15px; line-height: 1.5; color: #374151; margin: 8px 0 0; }

/* tall — 2 columns, 1 row */
#section-page .cl-tall { grid-column: span 2; }
#section-page .cl-tall h3 { font-size: clamp(17px, 1.8vw, 21px); }

/* span1 — 1 column */
#section-page .cl-span1 h3 { font-size: clamp(14px, 1.4vw, 17px); }

/* nolede — text only */
#section-page .cl-nolede h3 { font-size: clamp(14px, 1.4vw, 17px); }

/* ============ RESPONSIVE ================================== */
@media(max-width:1000px) {
  #section-page .card-grid { grid-template-columns: repeat(3,1fr); }
  #section-page .lead-grid { grid-template-columns: 1fr; gap: 28px; }
  #section-page .cl-grid { grid-template-columns: repeat(2, 1fr); }
  #section-page .cl-hero,
  #section-page .cl-tall { grid-column: span 2; grid-row: auto; }
}
@media(max-width:900px) {
  #section-page .card-grid { grid-template-columns: repeat(2,1fr); }
  #section-page .sec-list { grid-template-columns: 1fr; column-gap: 0; }
  #section-page .mn-row { grid-template-columns: 40px 1fr 150px; }
}
@media(max-width:600px) {
  #section-page .card-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  #section-page .mn-row { grid-template-columns: 36px 1fr; gap: 12px; }
  #section-page .mn-row .mn-img { display: none; }
  #section-page .mn-row .mn-num { font-size: 34px; }
  #section-page .sec-hero h1 { font-size: 42px; }
  #section-page .cl-grid { grid-template-columns: 1fr; }
  #section-page .cl-hero,
  #section-page .cl-tall { grid-column: span 1; }
}

/* ============ 2b · DIVISAS (FX widget, economía only) ====== */
#section-page .fx-section { margin: 8px auto 30px; }
#section-page .fx-updated { font-size: 12px; color: var(--text-muted); }

#section-page .fx-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
#section-page .fx-grid--world { grid-template-columns: 1fr 1fr; }
#section-page .fx-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

#section-page .fx-card {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
}
.dark #section-page .fx-card { background: #1a1f2e; }

#section-page .fx-card-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 800; letter-spacing: .4px;
  color: var(--text-muted); text-transform: uppercase;
}
#section-page .fx-pair { color: var(--ink); }

#section-page .fx-change { font-variant-numeric: tabular-nums; }
#section-page .fx-change.up   { color: #16a34a; }
#section-page .fx-change.down { color: #dc2626; }

#section-page .fx-value {
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 900; font-size: 22px; margin: 6px 0 10px;
  font-variant-numeric: tabular-nums;
}
#section-page .fx-value-big { font-size: 34px; }

#section-page .fx-chart, #section-page .fx-spark {
  width: 100%; height: 90px; overflow: visible; display: block;
}
#section-page .fx-big .fx-chart { height: 150px; }
#section-page .fx-small .fx-spark { height: 46px; }
#section-page .fx-chart line.fx-grid {
  stroke: var(--border-soft); stroke-width: 1px;
}
#section-page .fx-chart path.fx-line, #section-page .fx-spark path.fx-line {
  fill: none; stroke: #3b82f6; stroke-width: 2px;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#section-page .fx-chart path.fx-area, #section-page .fx-spark path.fx-area {
  fill: url(#fx-fill-grad); stroke: none;
}
#section-page .fx-chart circle.fx-dot, #section-page .fx-spark circle.fx-dot {
  fill: #3b82f6; stroke: #fff; stroke-width: 1.5px;
}
.dark #section-page .fx-chart circle.fx-dot, .dark #section-page .fx-spark circle.fx-dot {
  stroke: #1a1f2e;
}
#section-page .fx-chart line.fx-crosshair {
  stroke: var(--border-soft); stroke-width: 1px; stroke-dasharray: 3 3;
}
#section-page .fx-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted); margin-top: 6px;
}

#section-page .fx-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 8px;
  border-radius: 6px; transform: translate(-50%, -130%);
  white-space: nowrap; opacity: 0; transition: opacity .1s ease;
}
.dark #section-page .fx-tooltip { background: #f3f4f6; color: #111; }
#section-page .fx-chart-wrap { position: relative; }

#section-page .fx-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; }

@media(max-width:900px) {
  #section-page .fx-grid { grid-template-columns: 1fr; }
  #section-page .fx-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media(max-width:600px) {
  #section-page .fx-side { grid-template-columns: 1fr; }
}