/* sesion.css — /mercado/ «La sesión», segunda versión (03-nov-2026). Tokens de marco.css; filas y
 * curvas chicas de mercado.css (.mk-rn, .mk-rv, .mk-rc, .mk-sp, .mk-ic). */

/* ── cabecera ── */
.ss-hero{padding-top:clamp(20px,2.4vw,40px)}
.ss-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 28px}
.ss-top .p-k::first-letter{text-transform:uppercase}
.ss-h1{font:600 clamp(2.4rem,1.5rem + 2.8vw,4.2rem)/.95 var(--serif);letter-spacing:-.03em;margin:.18em 0 0}
.ss-est{display:grid;gap:2px;margin:0;justify-items:end;text-align:right;font:500 13px/1.35 var(--sans);color:var(--fg-3)}
.ss-est b{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--sans);color:var(--fg-2)}
.ss-est b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fg-3)}
.ss-est.on b{color:var(--fg-1)}
.ss-est.on b::before{background:var(--pos);box-shadow:0 0 0 4px rgba(58,167,113,.18);animation:mk-late 2s ease-in-out infinite}

/* ── tablero: una fila por grupo, fichas teñidas por la variación ── */
.ss-tab{display:grid;gap:8px;margin-top:clamp(18px,2vw,28px)}
.ss-tr{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:stretch}
.ss-tl{display:flex;align-items:center;font:600 12.5px var(--sans);color:var(--fg-3);text-decoration:none;border-top:2px solid var(--fg-1);padding-top:2px}
@media (hover:hover){.ss-tl:hover{color:var(--fg-1)}}
.ss-tf{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.ss-t{--tinte:var(--fg-3);position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:2px;min-height:76px;padding:9px 10px 8px;border-radius:12px;
  text-decoration:none;color:var(--fg-1);border:1px solid var(--rule);overflow:hidden;
  background:color-mix(in srgb,var(--tinte) calc(var(--k,0)*46%),var(--surf));transition:transform .35s var(--e-o3),border-color .3s}
.ss-t.alza{--tinte:var(--pos)} .ss-t.baja{--tinte:var(--neg)}
@media (hover:hover){.ss-t:hover{transform:translateY(-2px);border-color:var(--rule-3)}}
.ss-th{display:flex;align-items:center;gap:6px;min-width:0}
.ss-tn{font:500 12px/1.2 var(--sans);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-tc{align-self:end;font:600 clamp(14px,12px + .3vw,16.5px) var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ss-tv{font:500 11.5px var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-t .mk-ic img,.ss-t .mk-ic svg{width:16px;height:16px}
html[data-tema="claro"] .ss-t{background:color-mix(in srgb,var(--tinte) calc(var(--k,0)*30%),var(--elev))}
.ss-ley{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0;font:400 12.5px var(--sans);color:var(--fg-3)}
.ss-esc{display:inline-grid;grid-template-columns:repeat(3,22px);height:10px;border-radius:3px;overflow:hidden}
.ss-esc i{background:var(--surf);border:1px solid var(--rule)}
.ss-esc i.alza{background:color-mix(in srgb,var(--pos) 46%,var(--surf))} .ss-esc i.baja{background:color-mix(in srgb,var(--neg) 46%,var(--surf))}
.ss-esc-t{font:500 11.5px var(--mono);color:var(--fg-3)}
.ss-esq{display:block;border-radius:12px;background:linear-gradient(90deg,transparent,rgba(var(--ink),.06),transparent),var(--surf);background-size:300% 100%;animation:mk-esq 1.4s ease-in-out infinite}
.ss-esq-f{height:76px}
.ss-esq-r{height:48px;border-radius:0;margin-bottom:2px}
.ss-esq-c{display:inline-block;width:calc(25% - 12px);height:180px;margin:0 12px 12px 0}

/* ── barra de secciones ── */
.ss-nav{position:sticky;top:var(--hd-h);z-index:5;margin-top:clamp(28px,3vw,44px);background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-block:1px solid var(--rule)}
.ss-nav .p-wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.ss-nav .p-wrap::-webkit-scrollbar{display:none}
.ss-nav a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;font:500 13.5px var(--sans);color:var(--fg-2);text-decoration:none;transition:background .25s,color .25s}
.ss-nav a:hover{color:var(--fg-1);background:rgba(var(--ink),.06)}
.ss-nav a.on{background:var(--fg-1);color:var(--bg)}

/* ── secciones ── */
.ss-sec{padding-top:clamp(48px,5vw,88px);scroll-margin-top:calc(var(--hd-h) + 60px)}
.ss-sh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding-bottom:14px;margin-bottom:clamp(16px,2vw,26px);border-bottom:2px solid var(--fg-1)}
.ss-sh h2{font:600 clamp(1.7rem,1.2rem + 1.6vw,2.7rem)/1.05 var(--serif);letter-spacing:-.022em;margin:0}
.ss-sh p{margin:0;font:400 14px var(--sans);color:var(--fg-3)}

/* ── EE. UU.: gráfico grande + lista que lo cambia ── */
.ss-us{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.ss-big{position:relative;min-width:0}
.ss-bh{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n n" "v c" "p p";align-items:end;gap:4px 18px}
.ss-bn{grid-area:n;display:flex;align-items:center;gap:10px;font:600 15px var(--sans);color:var(--fg-2)}
.ss-bn .mk-ic img{width:22px;height:22px}
.ss-bn small{font:500 12px var(--mono);color:var(--fg-3)}
.ss-bv{grid-area:v;font:500 clamp(2.6rem,1.6rem + 3vw,4.6rem)/1 var(--serif);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.ss-bc{grid-area:c;justify-self:start;padding:6px 12px;border-radius:999px;font:600 16px var(--mono);background:rgba(var(--ink),.07);color:var(--fg-2);font-variant-numeric:tabular-nums;margin-bottom:6px}
.ss-big.alza .ss-bc{background:color-mix(in srgb,var(--pos) 18%,transparent);color:var(--pos)}
.ss-big.baja .ss-bc{background:color-mix(in srgb,var(--neg) 18%,transparent);color:var(--neg)}
.ss-bp{grid-area:p;font:400 13px var(--mono);color:var(--fg-3)}
.ss-bg{margin-top:14px;position:relative;touch-action:pan-y}
.ss-svg{display:block;width:100%;height:auto;overflow:visible}
.ss-grid{stroke:var(--rule);stroke-width:1}
.ss-gridv{stroke:var(--rule);stroke-width:1;stroke-dasharray:1 5}
.ss-ax{font:500 11.5px var(--mono);fill:var(--fg-3)}
.ss-prev{stroke:var(--rule-3);stroke-width:1.2;stroke-dasharray:3 4}
.ss-line{fill:none;stroke:var(--fg-2);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ss-big.alza .ss-line{stroke:var(--pos)} .ss-big.baja .ss-line{stroke:var(--neg)}
.ss-g0{stop-color:var(--fg-3);stop-opacity:.28} .ss-g1{stop-color:var(--fg-3);stop-opacity:0}
.ss-big.alza .ss-g0{stop-color:var(--pos)} .ss-big.baja .ss-g0{stop-color:var(--neg)}
.ss-big.alza .ss-g1{stop-color:var(--pos)} .ss-big.baja .ss-g1{stop-color:var(--neg)}
.ss-dot{fill:var(--bg);stroke:var(--fg-2);stroke-width:1.6}
.ss-hl{font:500 11.5px var(--mono);fill:var(--fg-2)}
.ss-fin{fill:var(--fg-1);stroke:var(--bg);stroke-width:2.5}
.ss-big.alza .ss-fin{fill:var(--pos)} .ss-big.baja .ss-fin{fill:var(--neg)}
.ss-cur{stroke:var(--fg-2);stroke-width:1;stroke-dasharray:2 3}
.ss-cdot{fill:var(--fg-1);stroke:var(--bg);stroke-width:2}
.ss-tip{position:absolute;z-index:3;transform:translateX(-50%);display:grid;gap:1px;padding:8px 12px;border-radius:12px;background:var(--elev);border:1px solid var(--rule-2);
  box-shadow:0 10px 30px rgba(0,0,0,.35);font:500 12.5px var(--mono);pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap}
.ss-tip.on{opacity:1}
.ss-tip b{font:600 12px var(--sans);color:var(--fg-3)} .ss-tip span{font-size:15px;color:var(--fg-1)}
.ss-tip i{font-style:normal} .ss-tip i.alza{color:var(--pos)} .ss-tip i.baja{color:var(--neg)}
.ss-ul{display:grid;border-top:2px solid var(--fg-1)}
.ss-u{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 84px 86px 74px;align-items:center;gap:10px;min-height:58px;padding:0 10px;
  border-bottom:1px solid var(--rule);cursor:pointer;border-radius:10px;transition:background .25s}
.ss-u .mk-sp{width:84px;height:28px}
.ss-u:hover{background:rgba(var(--ink),.04)}
.ss-u.sel{background:rgba(var(--ink),.08);box-shadow:inset 3px 0 0 var(--fg-1)}
.ss-u:focus-visible{outline:2px solid var(--fg-1);outline-offset:-2px}
.ss-u.alza .mk-rc{color:var(--pos)} .ss-u.baja .mk-rc{color:var(--neg)}

/* ── sectores ── */
.ss-sg{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:start}
.ss-amp{display:grid;gap:16px;position:sticky;top:calc(var(--hd-h) + 80px)}
.ss-an{display:flex;align-items:baseline;gap:12px;margin:0}
.ss-an b{font:500 clamp(4rem,2.8rem + 3vw,6rem)/.9 var(--serif);letter-spacing:-.03em}
.ss-an span{font:500 15px/1.3 var(--sans);color:var(--fg-2);max-width:12ch}
.ss-amp .mk-amp-m i{height:22px;border-radius:4px}
.ss-ext{display:grid;gap:10px;margin:0}
.ss-ext div{display:grid;gap:2px;padding:12px 14px;border-radius:12px;background:var(--surf);border:1px solid var(--rule)}
.ss-ext dt{font:500 12px var(--mono);color:var(--fg-3)}
.ss-ext dd{margin:0;font:600 15px var(--sans)}
.ss-ext b{font-family:var(--mono);font-weight:600}
.ss-ext .alza b{color:var(--pos)} .ss-ext .baja b{color:var(--neg)}
.ss-sl{list-style:none;margin:0;padding:0;display:grid}
.ss-sl li{display:grid;grid-template-columns:minmax(150px,210px) 1fr 82px;align-items:center;gap:14px;min-height:46px;border-bottom:1px solid var(--rule)}
.ss-sn{display:flex;align-items:baseline;gap:8px;font:500 14.5px var(--sans);color:var(--fg-1);min-width:0}
.ss-sn small{font:500 11.5px var(--mono);color:var(--fg-3)}
.ss-sb{position:relative;height:16px}
.ss-sb::before{content:"";position:absolute;left:50%;top:-8px;bottom:-8px;width:1px;background:var(--rule-3)}
.ss-sb i{position:absolute;top:0;bottom:0;width:var(--w);border-radius:4px;background:var(--fg-3);transform-origin:left;animation:ss-crece .9s var(--e-o3) both}
.ss-sl li.alza .ss-sb i{left:50%;background:var(--pos)}
.ss-sl li.baja .ss-sb i{right:50%;background:var(--neg);transform-origin:right}
@keyframes ss-crece{from{transform:scaleX(0)}}
.ss-sc{text-align:right;font:600 14px var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-2)}
.ss-sl li.alza .ss-sc{color:var(--pos)} .ss-sl li.baja .ss-sc{color:var(--neg)}

/* ── fichas: mundo, monedas, materias ── */
[data-ss-cards="mundo"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 12px}
[data-ss-cards="mundo"] .ss-reg:first-child{grid-column:1/-1}
[data-ss-cards="mundo"] .ss-reg:not(:first-child){grid-column:span 2}
[data-ss-cards="mundo"] .ss-reg .ss-cg{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-ss-cards="mundo"] .ss-reg:not(:first-child) .ss-cg{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-ss-cards="monedas"] .ss-cg,[data-ss-cards="materias"] .ss-cg{grid-template-columns:repeat(4,minmax(0,1fr))}
.ss-reg h3{margin:0 0 10px;font:600 13px var(--mono);color:var(--fg-3);letter-spacing:.02em}
.ss-cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.ss-c{display:grid;gap:8px;padding:16px 16px 12px;border-radius:18px;background:var(--surf);border:1px solid var(--rule);min-width:0}
.ss-c header{display:flex;align-items:center;gap:10px;min-width:0}
.ss-c header .mk-ic img,.ss-c header .mk-ic svg{width:28px;height:28px}
.ss-c header .mk-ic2 img+img{margin-left:-9px}
.ss-c header>span:last-child{display:grid;min-width:0}
.ss-c header b{font:600 15px/1.2 var(--sans)}
.ss-c header small{font:500 11.5px var(--mono);color:var(--fg-3)}
.ss-cv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 0 0}
.ss-cv span{font:500 clamp(1.45rem,1.2rem + .6vw,1.8rem)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ss-cv i{font:600 14px var(--mono);font-style:normal;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ss-c.alza .ss-cv i{color:var(--pos)} .ss-c.baja .ss-cv i{color:var(--neg)}
.ss-ca{display:block;width:100%;height:56px;color:var(--fg-3)}
.ss-c.alza .ss-ca{color:var(--pos)} .ss-c.baja .ss-ca{color:var(--neg)}
.ss-ca polyline{stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.ss-cfa{fill:currentColor;fill-opacity:.1}
.ss-cm{margin:0;font:400 11.5px var(--mono);color:var(--fg-3)}

/* ── mapa de las 30 más grandes ── */
.ss-mapa{position:relative;border-radius:18px;overflow:hidden;background:var(--bg-2)}
.ss-m{--tinte:var(--fg-3);position:absolute;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px;
  border:1.5px solid var(--bg);border-radius:6px;text-decoration:none;color:var(--fg-1);overflow:hidden;text-align:center;
  background:color-mix(in srgb,var(--tinte) calc(18% + var(--k,0)*58%),var(--surf));transition:filter .2s}
.ss-m.alza{--tinte:var(--pos)} .ss-m.baja{--tinte:var(--neg)}
@media (hover:hover){.ss-m:hover{filter:brightness(1.18);z-index:2}}
.ss-m b{font:700 clamp(12px,10px + .35vw,15px) var(--mono);letter-spacing:-.01em}
.ss-m i{font:600 12px var(--mono);font-style:normal;opacity:.92}
.ss-m.xs b{font-size:10.5px}
.ss-m.g b{font-size:clamp(15px,12px + .6vw,22px)} .ss-m.g i{font-size:14px}
.ss-m img{width:28px;height:28px;border-radius:50%;background:#fff;margin-bottom:4px}
.ss-m small{font:400 11.5px var(--sans);opacity:.78;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-m span{font:500 11.5px var(--mono);opacity:.78}
html[data-tema="claro"] .ss-m{background:color-mix(in srgb,var(--tinte) calc(14% + var(--k,0)*50%),var(--elev));border-color:var(--bg)}

/* ── Claurfy ── */
.ss-cf{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.6fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(20px,2.6vw,36px)}
.ss-cf-t h2{font:600 clamp(1.6rem,1.2rem + 1.4vw,2.4rem)/1.06 var(--serif);letter-spacing:-.02em;margin:8px 0 18px;text-wrap:balance}
.ss-cf-d{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px}
.ss-cf-d div{display:grid;gap:4px}
.ss-cf-d dt{font:500 12px/1.3 var(--sans);color:var(--fg-3)}
.ss-cf-d dd{margin:0;font:500 clamp(1.5rem,1.2rem + .8vw,2rem)/1 var(--serif)}
.ss-cf-b{display:flex;flex-wrap:wrap;gap:8px}
.ss-fuente{margin-top:clamp(40px,4vw,64px)}

@media (max-width:1100px){.ss-tf{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){[data-ss-cards="mundo"]{grid-template-columns:1fr 1fr}[data-ss-cards="mundo"] .ss-reg .ss-cg,[data-ss-cards] .ss-cg{grid-template-columns:repeat(2,minmax(0,1fr))}[data-ss-cards="mundo"] .ss-reg:not(:first-child){grid-column:span 1}[data-ss-cards="mundo"] .ss-reg:not(:first-child) .ss-cg{grid-template-columns:1fr}.ss-us,.ss-sg,.ss-cf{grid-template-columns:1fr}.ss-amp{position:static}.ss-esq-c{width:calc(50% - 12px)}}
@media (max-width:760px){
  [data-ss-cards="mundo"]{grid-template-columns:1fr}[data-ss-cards="mundo"] .ss-reg:not(:first-child) .ss-cg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ss-tr{grid-template-columns:1fr;gap:6px}.ss-tl{border-top:0;padding-top:0}
  .ss-tf{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ss-t{min-height:66px;padding:8px 9px 7px}
  .ss-est{justify-items:start;text-align:left}
  .ss-u{grid-template-columns:minmax(0,1fr) 64px 80px 66px;gap:8px;padding:0 6px}.ss-u .mk-sp{width:64px}
  .ss-sl li{grid-template-columns:minmax(0,1fr) 70px;gap:4px 12px;padding:8px 0}.ss-sb{grid-column:1/-1;grid-row:2;height:12px}
  .ss-cg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ss-c{padding:12px 12px 10px;border-radius:14px}
  .ss-c header .mk-ic img,.ss-c header .mk-ic svg{width:22px;height:22px}.ss-c header b{font-size:13.5px}
  .ss-cv{flex-direction:column;align-items:flex-start;gap:4px}.ss-cv span{font-size:1.25rem}
  .ss-ca{height:40px}.ss-cm{display:none}
  .ss-cf-d{grid-template-columns:1fr}
}
@media (max-width:380px){.ss-tf{grid-template-columns:repeat(2,minmax(0,1fr))}.ss-u .mk-sp{display:none}.ss-u{grid-template-columns:minmax(0,1fr) 80px 66px}}
@media (prefers-reduced-motion:reduce){.ss-sb i{animation:none}}
