/* jimmychupillon.com · Surcos (V12)
   Sección de lectura: datos y análisis del agro amazónico.
   Usa los tokens del sitio (sitio.css + v7.css). Tamaños de letra alineados con Herramientas:
   título de página 1.7–2.2rem, títulos de sección 1.2–1.45rem, texto 1rem. Todo en fondo claro. */
:root{
  --sx-heat:#C9501D; --sx-rain:#2A78D6;
  --sx-b1:#CDE2FB; --sx-b2:#9EC5F4; --sx-b3:#5598E7; --sx-b4:#256ABF; --sx-b5:#104281;
  --sx-o1:#FDE3D4; --sx-o2:#F6B48F; --sx-o3:#EC7D4C; --sx-o4:#C9501D; --sx-o5:#8E3510;
  --sx-mid:#E7EAE3; --sx-grid:#E6EDE3; --sx-axis:#B9C8B6;
  --sx-ok:#1E8A3C; --sx-warn:#9A6A00; --sx-crit:#C23B33;
  --sx-soft:color-mix(in srgb,var(--firma) 16%,var(--surface));
}
.sx-w{max-width:1180px; margin:0 auto; padding-left:max(clamp(1rem,3vw,2.25rem),env(safe-area-inset-left,0px)); padding-right:max(clamp(1rem,3vw,2.25rem),env(safe-area-inset-right,0px))}

/* ---------- Elementos comunes ---------- */
.sx-label{font:700 .76rem/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--strong); margin:0}
.sx-tags{display:flex; flex-wrap:wrap; gap:.35rem}
.sx-tag{font:700 .68rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:.34rem .55rem; border-radius:6px; background:var(--leaf); color:var(--strong)}
.sx-tag.alt{background:var(--maiz); color:#5B4A0E}
.sx-tag.rio{background:var(--rio); color:#16494E}
.sx-meta{display:flex; flex-wrap:wrap; gap:.25rem .9rem; font-size:.85rem; color:var(--muted)}
.sx-meta b{color:var(--ink); font-weight:600}
.sx-btn{display:inline-flex; align-items:center; gap:.45rem; font:600 .95rem var(--sans); padding:.62rem 1rem; border-radius:12px; text-decoration:none; border:1.5px solid transparent; cursor:pointer}
.sx-btn.p{background:var(--deep); color:#F1F7EE}
.sx-btn.s{border-color:var(--line); color:var(--ink); background:var(--surface)}
.sx-btn:hover{filter:brightness(1.05)}
.sx-link{font-weight:700; color:var(--strong); text-decoration:none}
.sx-link::after{content:" →"}
.sx-link:hover{text-decoration:underline; text-underline-offset:3px}

.sx-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem}
.sx-kpi{border:1px solid var(--line); border-radius:12px; padding:.55rem .7rem; background:var(--bg); display:grid; gap:.15rem; align-content:start}
.sx-kpi b{font-family:var(--display); font-weight:600; font-size:1.3rem; line-height:1.05; color:var(--sx-heat)}
.sx-kpi b.g{color:var(--strong)} .sx-kpi b.d{color:var(--deep)}
.sx-kpi span{font-size:.76rem; color:var(--muted); line-height:1.3}
.sx-kpi small{font-size:.68rem; color:var(--muted); opacity:.85}

/* Carrusel de figuras (cambia cada 2 s) */
.sx-car{position:relative; border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); aspect-ratio:16/9; max-width:100%}
.sx-car img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .45s ease}
.sx-car img.on{opacity:1}
.sx-car-ui{position:absolute; left:0; right:0; bottom:.45rem; display:flex; justify-content:center; gap:.35rem}
.sx-car-ui button{width:9px; height:9px; padding:0; border-radius:50%; border:0; background:#C8D3C5; cursor:pointer}
.sx-car-ui button[aria-current="true"]{background:var(--strong); width:22px; border-radius:6px}
@media (prefers-reduced-motion: reduce){ .sx-car img{transition:none} }

/* Botón de ampliar (esquina superior derecha) y ventana */
.sx-zoom{position:absolute; top:.45rem; right:.45rem; z-index:3; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:color-mix(in srgb,var(--surface) 92%,transparent); color:var(--ink); display:grid; place-items:center; cursor:pointer; padding:0}
.sx-zoom svg{width:17px; height:17px}
.sx-zoom:hover{border-color:var(--strong); color:var(--strong)}
.sx-modal{position:fixed; inset:0; z-index:9000; background:rgba(255,255,255,.97); display:grid; grid-template-rows:auto minmax(0,1fr); padding:calc(.8rem + env(safe-area-inset-top,0px)) max(1rem,env(safe-area-inset-right,0px)) calc(1rem + env(safe-area-inset-bottom,0px)) max(1rem,env(safe-area-inset-left,0px))}
.sx-modal-h{display:flex; justify-content:space-between; align-items:center; gap:1rem; max-width:1200px; width:100%; margin:0 auto .6rem}
.sx-modal-h b{font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--deep)}
.sx-modal-h button{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); font-size:1.25rem; cursor:pointer; color:var(--ink)}
.sx-modal-b{overflow:auto; max-width:1200px; width:100%; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(.8rem,2vw,1.4rem)}
.sx-modal-b svg,.sx-modal-b img{width:100%; height:auto; max-height:78vh; display:block}
.sx-modal-b video{display:block; margin:0 auto; max-height:80vh; width:auto; max-width:100%}
.sx-modal-b .sx-pair svg{max-height:70vh}
.sx-modal-b table.sx-t{font-size:.95rem}

/* ---------- Portada de Surcos ---------- */
.sx-hero{border-bottom:1px solid var(--line); background:linear-gradient(180deg, color-mix(in srgb,var(--firma) 7%,transparent), transparent 85%)}
.sx-hero .sx-w{padding-top:1.4rem; padding-bottom:1.3rem; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:.6rem 2.5rem; align-items:end}
.sx-hero .crumb{grid-column:1/-1; margin:0}
.sx-hero h1{font-family:var(--display); font-weight:600; font-style:italic; font-size:clamp(2.2rem,4.6vw,3.2rem); line-height:.95; letter-spacing:-.03em; margin:0; color:var(--strong)}
.sx-lema{font-family:var(--display); font-size:1.12rem; font-weight:500; margin:.35rem 0 0; color:var(--ink)}
.sx-intro{max-width:62ch; color:var(--muted); margin:0; font-size:.98rem}
.sx-pr{display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0; padding:0; list-style:none}
.sx-pr li{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.8rem; padding:.3rem .65rem; border-radius:999px; background:var(--surface); border:1px solid var(--line)}
.sx-pr li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--strong)}
@media (max-width:820px){ .sx-hero .sx-w{grid-template-columns:1fr} }

.sx-sec{padding:1.4rem 0}
.sx-sec + .sx-sec{border-top:1px solid var(--line)}
.sx-sec .sx-label{margin-bottom:.8rem}

/* Tarjeta destacada horizontal */
.sx-feat{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:1.6rem; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(1rem,2.4vw,1.5rem)}
.sx-feat-t{display:grid; gap:.65rem; align-content:start; min-width:0}
.sx-feat h2,.sx-feat h3{font-family:var(--display); font-weight:600; font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.15; letter-spacing:-.01em; margin:0}
.sx-feat h2 a,.sx-feat h3 a{color:var(--ink); text-decoration:none}
.sx-feat h2 a:hover,.sx-feat h3 a:hover{color:var(--strong)}
.sx-feat p{margin:0; color:var(--muted); font-size:.95rem}
.sx-feat .sx-car{min-width:0}
@media (max-width:860px){ .sx-feat{grid-template-columns:1fr} }

/* Publicaciones: próximas / anteriores */
.sx-pubs-h{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.7rem}
.sx-ptabs{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:3px}
.sx-ptabs button{font:600 .84rem var(--sans); padding:.38rem .8rem; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer}
.sx-ptabs button[aria-selected="true"]{background:var(--deep); color:#F1F7EE}
.sx-soon{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem}
@media (max-width:980px){ .sx-soon{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .sx-soon{grid-template-columns:1fr} }
.sx-soon article{border:1px dashed color-mix(in srgb,var(--strong) 35%,var(--line)); border-radius:14px; padding:.75rem .85rem; display:grid; gap:.3rem; align-content:start; background:color-mix(in srgb,var(--surface) 70%,transparent)}
.sx-soon h3{font-family:var(--sans); font-weight:700; font-size:.92rem; line-height:1.3; margin:0}
.sx-soon p{margin:0; color:var(--muted); font-size:.8rem; line-height:1.4}
.sx-soon .st{font:700 .64rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--sx-warn)}
.sx-empty{border:1px dashed var(--line); border-radius:14px; padding:.9rem 1rem; color:var(--muted); font-size:.9rem; margin:0}

/* Cómo trabajo */
.sx-how{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem 1.4rem}
.sx-how div{display:grid; gap:.25rem; align-content:start}
.sx-how h3{font-family:var(--sans); font-weight:700; font-size:.98rem; margin:0}
.sx-how p{margin:0; color:var(--muted); font-size:.9rem}

/* Llamado (fondo claro) */
.sx-cta{background:var(--sx-soft); border:1px solid color-mix(in srgb,var(--strong) 25%,var(--line)); border-radius:18px; padding:clamp(1rem,2.6vw,1.5rem); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:center}
.sx-cta h2,.sx-cta h3{font-family:var(--display); font-weight:600; font-size:1.25rem; line-height:1.2; margin:0 0 .3rem; color:var(--deep)}
.sx-cta p{margin:0; color:var(--muted); font-size:.93rem; max-width:60ch}
.sx-cta .bt{display:flex; flex-wrap:wrap; gap:.5rem}
@media (max-width:760px){ .sx-cta{grid-template-columns:1fr} }

/* Bloque en la portada del sitio */
.sx-home-h{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem}
.sx-home-h h2{margin:0}
.sx-home-h h2 em{font-style:italic; color:var(--strong)}
.sx-home-h a{font-weight:600}

/* ---------- Artículo ---------- */
.sx-art{font-size:1rem}
.sx-art header{position:static; top:auto; z-index:auto; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0}
.sx-top{display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:1.4rem 2.5rem; align-items:start; padding:1.6rem 0 1rem}
.sx-top-t{display:grid; gap:.8rem; min-width:0}
.sx-top .crumb{margin:0}
.sx-top h1{font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,2.9vw,2.3rem); line-height:1.08; letter-spacing:-.02em; margin:0; color:var(--deep)}
.sx-deck{font-size:1.05rem; color:var(--muted); margin:0; max-width:66ch}
.sx-by{display:flex; align-items:center; gap:.7rem}
.sx-by img{width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0}
.sx-by div{display:grid; line-height:1.3}
.sx-by b{font-weight:700; font-size:.95rem}
.sx-by span{font-size:.84rem; color:var(--muted)}
.sx-keys{margin:0; padding:0; list-style:none; display:grid; gap:.4rem; max-width:72ch}
.sx-keys li{position:relative; padding-left:1.15rem; font-size:.97rem}
.sx-keys li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:2px; background:var(--strong)}
.sx-vid{position:relative; margin:0}
.sx-vid video{width:100%; aspect-ratio:9/16; display:block; border-radius:14px; background:var(--bg); object-fit:cover}
.sx-vid figcaption{font-size:.76rem; color:var(--muted); margin-top:.35rem; text-align:center}
@media (max-width:860px){ .sx-top{grid-template-columns:1fr} .sx-vid{max-width:270px; justify-self:center} }

.sx-toc{position:sticky; top:72px; z-index:15; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(10px); border-block:1px solid var(--line); display:flex; gap:.2rem; overflow-x:auto; padding:.35rem 0; scrollbar-width:none}
.sx-toc a{flex:none; text-decoration:none; color:var(--muted); font-weight:600; font-size:.84rem; padding:.35rem .6rem; border-radius:8px}
.sx-toc a:hover{background:var(--surface); color:var(--ink)}
@media (max-width:480px){ .sx-toc{top:64px} }

.sx-art section{padding:1.8rem 0 .4rem; border-top:0; scroll-margin-top:130px}
.sx-art section + section{border-top:1px solid var(--line)}
.sx-row{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:1rem 2rem; align-items:start}
.sx-row.eq{grid-template-columns:repeat(2,minmax(0,1fr))}
.sx-row.r3{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.sx-row + .sx-row{margin-top:1rem}
@media (max-width:900px){ .sx-row,.sx-row.eq,.sx-row.r3{grid-template-columns:1fr} }
.sx-txt{display:grid; gap:.65rem; align-content:start; min-width:0}
.sx-eb{font:700 .72rem/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--strong)}
.sx-art h2{font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,1.9vw,1.45rem); line-height:1.2; letter-spacing:-.01em; margin:0; color:var(--deep)}
.sx-txt p{margin:0; font-size:.97rem; color:var(--ink)}
.sx-txt p.m{color:var(--muted)}
.sx-what{border-left:3px solid var(--firma); background:color-mix(in srgb,var(--firma) 12%,transparent); border-radius:0 10px 10px 0; padding:.5rem .8rem; font-size:.88rem}
.sx-what summary{cursor:pointer; font-weight:700; color:var(--strong)}
.sx-what p{margin:.4rem 0 0; font-size:.88rem}
.sx-note{font-size:.78rem; color:var(--muted); margin:.6rem 0 0; max-width:100ch}
.sx-expired{display:none; background:var(--maiz); border-radius:10px; padding:.55rem .8rem; font-weight:600; font-size:.88rem; margin:0}
.sx-expired.on{display:block}

/* Figuras numeradas */
.sx-fig{position:relative; margin:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:.7rem .8rem .6rem; min-width:0}
.sx-fig-n{display:block; font:700 .7rem/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--strong); padding-right:2.4rem}
.sx-fig-t{display:block; font-weight:700; font-size:.9rem; margin:.15rem 0 .45rem; padding-right:2.4rem; line-height:1.3}
.sx-fig figcaption{font-size:.76rem; color:var(--muted); margin-top:.4rem; line-height:1.4}
.sx-fig svg{width:100%; height:auto; display:block}
.sx-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem}
.sx-pair > div{min-width:0}
.sx-pair .cap{font-size:.78rem; font-weight:700; margin-bottom:.15rem}
.sx-mapbox svg{max-height:270px}
.sx-legend{display:flex; flex-wrap:wrap; gap:.25rem .7rem; font-size:.72rem; color:var(--muted); align-items:center; margin-top:.35rem}
.sx-legend i{display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:4px; border:1px solid var(--line)}
.sx-days{display:flex; flex-wrap:wrap; gap:.3rem}
.sx-days button{font:600 .8rem var(--sans); background:var(--surface); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.32rem .7rem; cursor:pointer}
.sx-days button[aria-pressed="true"]{background:var(--deep); color:#F1F7EE; border-color:var(--deep)}
.sx-tabs{display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem; padding-right:2.4rem}
.sx-tabs button{font:600 .8rem var(--sans); padding:.32rem .7rem; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--muted); cursor:pointer}
.sx-tabs button[aria-selected="true"]{background:var(--deep); color:#F1F7EE; border-color:var(--deep)}
.sx-scroll{overflow-x:auto}
.sx-art svg text{fill:var(--muted); font-family:var(--sans)}
.sx-art svg .ax{stroke:var(--sx-axis)} .sx-art svg .gd{stroke:var(--sx-grid)}
.sx-map path.prov{stroke:var(--surface); stroke-width:1.2; cursor:pointer}
.sx-map path.prov:hover{stroke:var(--ink); stroke-width:1.6}
table.sx-t{border-collapse:collapse; width:100%; font-size:.78rem; min-width:600px}
table.sx-t th{font:700 .64rem/1.2 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-align:center; padding:.35rem .2rem; border-bottom:1px solid var(--line)}
table.sx-t th:first-child, table.sx-t td:first-child{text-align:left}
table.sx-t td{padding:.22rem .2rem; border-bottom:1px solid var(--sx-grid); text-align:center; font-variant-numeric:tabular-nums}
table.sx-t td .cap{color:var(--muted); font-size:.7rem; margin-left:.25rem}
.sx-chip{display:inline-block; min-width:40px; padding:.12rem .3rem; border-radius:5px; font-weight:700; font-size:.72rem; font-variant-numeric:tabular-nums}
.sx-badge{display:inline-flex; gap:.25rem; align-items:center; font-weight:700; font-size:.66rem; padding:.08rem .45rem; border-radius:999px; border:1.5px solid currentColor; white-space:nowrap}
.sx-badge.alto{color:var(--sx-crit)} .sx-badge.mod{color:var(--sx-warn)} .sx-badge.bajo{color:var(--sx-ok)}
.sx-acc{margin:0; padding-left:1.2rem; display:grid; gap:.5rem}
.sx-acc li{font-size:.95rem}
.sx-acc li::marker{font-weight:800; color:var(--strong)}
.sx-kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.3rem .9rem; font-size:.86rem; margin:0}
.sx-kv dt{color:var(--muted)} .sx-kv dd{margin:0}
@media (max-width:560px){ .sx-kv{grid-template-columns:1fr} .sx-kv dt{font-weight:700; margin-top:.35rem} }
.sx-src{font-size:.82rem; padding-left:1.2rem; margin:0; display:grid; gap:.25rem}
.sx-share{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:1rem}
.sx-share span{font-weight:700; font-size:.86rem; margin-right:.2rem}
.sx-share a,.sx-share button{font:600 .82rem var(--sans); padding:.4rem .75rem; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; cursor:pointer}
.sx-share a:hover,.sx-share button:hover{border-color:var(--strong); color:var(--strong)}
.sx-disc{font-size:.8rem; color:var(--muted); border-top:1px solid var(--line); padding-top:.8rem; margin:1rem 0 0}
#sx-tt{position:fixed; pointer-events:none; z-index:9100; background:var(--deep); color:#F1F7EE; font:400 .78rem/1.4 var(--sans); padding:.4rem .55rem; border-radius:8px; max-width:250px; opacity:0; transition:opacity .12s}
#sx-tt b{font-weight:700}

/* Ajustes: tamaño del ícono de ampliar, textos dentro de la ventana y bloque «Qué hacer» */
.sx-fig .sx-zoom svg,.sx-car .sx-zoom svg,.sx-vid .sx-zoom svg{width:17px; height:17px}
[data-zoom-body] figcaption{font-size:.76rem; color:var(--muted); margin-top:.4rem; line-height:1.4}
.sx-modal-b figcaption{font-size:.88rem}
.sx-modal-b .sx-fig-n,.sx-modal-b .sx-fig-t{display:none}
.sx-modal-b .sx-mapbox svg{max-height:68vh}
.sx-modal-b .sx-legend{font-size:.82rem}
.sx-acc.two{columns:2 320px; column-gap:2rem; display:block}
.sx-acc.two li{break-inside:avoid; margin-bottom:.5rem}

/* ---------- V12 · ajuste 2: encabezado del artículo, autores y reproductor ---------- */
.sx-top{grid-template-columns:minmax(0,1fr) minmax(0,460px); align-items:center; padding:1.6rem 0 1.4rem; border-bottom:1px solid var(--line)}
.sx-authors{margin:0; font-weight:700; font-size:.95rem; line-height:1.35}
.sx-authors a{color:var(--ink); text-decoration:none; white-space:nowrap}
.sx-authors a:hover{color:var(--strong); text-decoration:underline; text-underline-offset:3px}
.sx-authors .orc{width:13px; height:13px; margin-left:3px; vertical-align:-1px; opacity:.85}
.sx-vid{margin:0; min-width:0}
.sx-player{position:relative; border:1px solid color-mix(in srgb,var(--strong) 30%,var(--line)); border-radius:14px; overflow:hidden; background:var(--bg); box-shadow:0 14px 30px -22px rgba(19,38,27,.45)}
.sx-player video{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--bg); border-radius:0; cursor:pointer}
.sx-pbar{display:flex; align-items:center; gap:.45rem; padding:.4rem .55rem; background:var(--surface); border-top:1px solid var(--line)}
.sx-pb{display:inline-flex; align-items:center; gap:.3rem; height:30px; min-width:30px; padding:0 .35rem; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; font:600 .74rem var(--sans); justify-content:center}
.sx-pb svg{width:16px; height:16px; fill:currentColor}
.sx-pb:hover{border-color:var(--strong); color:var(--strong)}
.sx-pb .i-play{display:none} .sx-pb.paused .i-play{display:inline} .sx-pb.paused .i-pause{display:none}
.sx-mute .i-on{display:none} .sx-mute[aria-pressed="true"] .i-on{display:inline} .sx-mute[aria-pressed="true"] .i-off{display:none}
.sx-mute[aria-pressed="false"]{background:var(--deep); color:#F1F7EE; border-color:var(--deep)}
.sx-pbar input[type=range]{accent-color:var(--strong); height:4px; min-width:0}
#sxSeek{flex:1}
#sxVol{width:64px}
.sx-time{font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.sx-vid figcaption{font-size:.74rem; color:var(--muted); margin-top:.35rem; text-align:right}
@media (max-width:860px){ .sx-top{grid-template-columns:1fr} .sx-vid{max-width:none; justify-self:stretch} }
@media (max-width:480px){ #sxVol,.sx-time{display:none} .sx-mute span{display:none} }

/* Encabezado de la portada de Surcos (ajuste 2) */
.sx-hero .sx-w{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:.6rem 3rem; padding-top:1.3rem; padding-bottom:1.6rem}
.sx-hero-t{display:grid; gap:.45rem; align-content:center}
.sx-hero-t .sx-lema{margin:0; font-size:1.18rem; line-height:1.3; max-width:30ch}
.sx-hero-d{display:grid; gap:.7rem; padding-left:1.6rem; border-left:2px solid color-mix(in srgb,var(--strong) 30%,var(--line))}
.sx-hero-d .sx-intro{font-size:.98rem; line-height:1.62; color:var(--ink); max-width:68ch}
.sx-hero-d .sx-pr{margin:0}
@media (max-width:820px){ .sx-hero-d{padding-left:0; border-left:0; padding-top:.8rem; border-top:2px solid color-mix(in srgb,var(--strong) 30%,var(--line))} }

/* ---------- V13 · reproductor sin sonido: clic en el centro ---------- */
.sx-player{cursor:pointer}
.sx-pp{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:68px; height:68px; border-radius:50%; border:0; background:rgba(19,38,27,.78); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .25s; padding:0}
.sx-pp svg{width:28px; height:28px}
.sx-player.paused .sx-pp,.sx-player.flash .sx-pp,.sx-pp:focus-visible{opacity:1}
@media (hover:hover){ .sx-player:hover .sx-pp{opacity:.9} }

/* Publicaciones anteriores (V13) */
.sx-prev{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem}
@media (max-width:760px){ .sx-prev{grid-template-columns:1fr} }
.sx-prev article{display:grid; grid-template-columns:150px minmax(0,1fr); gap:.9rem; align-items:center; border:1px solid var(--line); border-radius:14px; padding:.7rem; background:var(--surface)}
.sx-prev img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:9px; border:1px solid var(--line); display:block}
.sx-prev div{display:grid; gap:.25rem; min-width:0}
.sx-prev h3{font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.25; margin:0}
.sx-prev h3 a{color:var(--ink); text-decoration:none}
.sx-prev h3 a:hover{color:var(--strong)}
.sx-prev p{margin:0; font-size:.8rem; color:var(--muted)}
@media (max-width:420px){ .sx-prev article{grid-template-columns:1fr} }
.sx-prev[hidden],.sx-soon[hidden]{display:none}

/* ===================== V15 ===================== */
/* Figuras: fondo blanco y grises fríos, distintos del verde claro de la página */
:root{--sx-mid:#E4E7EB; --sx-grid:#E8EAED; --sx-axis:#B5BCC4; --sx-fig:#FFFFFF}
.sx-fig{background:var(--sx-fig); box-shadow:0 1px 2px rgba(20,30,25,.04), 0 12px 28px -24px rgba(20,30,25,.35)}
.sx-map path.prov{stroke:#FFFFFF}
/* Ventana «Ampliar»: centrada y del tamaño de su contenido, sin espacio vacío abajo */
.sx-modal{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; overflow:hidden; background:rgba(15,26,20,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.sx-modal-h b{color:#FFFFFF}
.sx-modal-h button{background:#FFFFFF; border-color:#FFFFFF; color:#13261B}
.sx-modal-b{border-color:transparent; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.sx-modal-h{width:min(1200px,100%); margin:0; flex:none}
.sx-modal-b{flex:0 1 auto; width:min(1200px,100%); margin:0; background:var(--sx-fig); overflow:auto;
  max-height:calc(100vh - 6.5rem); max-height:calc(100dvh - 6.5rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.sx-modal-b .sx-zoom{display:none}
.sx-modal-b.is-img{width:auto; max-width:min(1200px,100%); padding:.35rem; line-height:0}
.sx-modal-b.is-img img{width:auto; max-width:100%; height:auto; max-height:calc(100vh - 8rem); max-height:calc(100dvh - 8rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); margin:0 auto; border-radius:10px}
@media (max-width:640px){ .sx-modal{padding-left:.6rem; padding-right:.6rem} .sx-modal-h b{font-size:1rem} }

/* Publicaciones: primero lo publicado (tarjetas pequeñas) y al final lo próximo */
.sx-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem}
@media (max-width:980px){ .sx-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .sx-list{grid-template-columns:1fr} }
.sx-mini{position:relative; border:1px solid var(--line); border-radius:14px; padding:.8rem .9rem; display:grid; gap:.3rem; align-content:start; background:#FFFFFF; transition:border-color .2s, box-shadow .2s, transform .2s}
.sx-mini:hover,.sx-mini:focus-within{border-color:var(--strong); box-shadow:0 14px 26px -22px rgba(19,38,27,.5); transform:translateY(-2px)}
.sx-mini .st{font:700 .64rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--strong)}
.sx-mini h3{font-family:var(--sans); font-weight:700; font-size:.95rem; line-height:1.3; margin:0}
.sx-mini h3 a{color:var(--ink); text-decoration:none}
.sx-mini h3 a::after{content:""; position:absolute; inset:0; border-radius:14px}
.sx-mini p{margin:0; color:var(--muted); font-size:.82rem; line-height:1.4}
.sx-mini .mt{font-size:.76rem; color:var(--muted)}
.sx-mini.soon{border-style:dashed; border-color:color-mix(in srgb,var(--strong) 35%,var(--line)); background:#FAFBFC}
.sx-mini.soon:hover{transform:none; box-shadow:none}
.sx-mini.soon .st{color:var(--sx-warn)}
/* Carrusel: los puntos van debajo de la figura, sin tapar la línea de fuente */
.sx-car img{inset:0 0 24px 0; height:calc(100% - 24px)}
.sx-car-ui{bottom:6px}

/* V19 · Herramientas en miniaturas (formato Surcos, mismo tamaño) */
.sx-list.tools{grid-auto-rows:1fr}
.sx-mini.tool{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto;padding:.95rem 1rem .9rem}
.sx-mini.tool>*{grid-column:1/-1}
.sx-mini.tool h3{font-family:var(--display);font-weight:600;font-size:1.05rem;line-height:1.25}
.sx-mini.tool h3 .n{font-family:var(--sans);font-weight:700;font-size:.8rem;color:var(--strong);letter-spacing:.04em;margin-right:.15rem}
.sx-mini.tool h3 .nv{font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--strong);white-space:nowrap}
.sx-mini.tool .go{font-size:.82rem;font-weight:700;color:var(--strong);margin-top:.2rem}
.sx-mini.tool .go::after{content:" →";display:inline-block;transition:transform .2s}
.sx-mini.tool:hover .go::after{transform:translateX(4px)}
.sx-mini.tool:hover{background:color-mix(in srgb,var(--firma) 7%,#fff)}
.sx-mini.tool.nuevo{border-color:color-mix(in srgb,var(--strong) 45%,var(--line))}
.sx-mini.tool.nuevo .st{color:var(--strong)}
#herramientas .sx-list.tools{margin-top:1rem}