/* jimmychupillon.com · Surcos · EUDR (V13)
   Usa los colores del sitio (sitio.css): fondo blanco, paneles verde claro y verde oscuro solo en acentos. */
/* V15: variables en :root para que también existan dentro de la ventana «Ampliar». Grises fríos, distintos del verde de la página. */
:root{--eu-gold:#C98A12; --eu-gold-ink:#7A5208; --eu-alert:#B5532F; --eu-pale:#DFE3E8; --eu-dot:#D3D8DE; --eu-card:#FFFFFF; --eu-land:#D3EBDA}
:root[data-theme="dark"]{--eu-gold:#E0A93A; --eu-gold-ink:#F0C46A; --eu-alert:#EE8F6B; --eu-pale:#2A4334; --eu-dot:#34503F; --eu-card:#13201A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--eu-gold:#E0A93A; --eu-gold-ink:#F0C46A; --eu-alert:#EE8F6B; --eu-pale:#2A4334; --eu-dot:#34503F; --eu-card:#13201A} }

.eu .num{font-variant-numeric:tabular-nums}
.eu .kick{font:700 .74rem/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--strong); margin:0}

/* Video sin sonido: clic en el centro para reproducir o pausar */
.sx-player.sx-clean{cursor:pointer; box-shadow:0 14px 30px -24px rgba(19,38,27,.45)}
.sx-player.sx-clean video{aspect-ratio:16/9}

/* Cuenta regresiva */
.eu-clocks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; padding:1.2rem 0 .4rem}
.eu-clock{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1.15rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.eu-clock .big{font-family:var(--display); font-size:clamp(2.3rem,5vw,3.3rem); font-weight:600; color:var(--strong); line-height:1}
.eu-clock.later .big{color:var(--ink)}
.eu-clock .lab{font-size:.92rem; max-width:34ch; line-height:1.45}
.eu-clock .lab strong{display:block; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}

/* Secciones del artículo */
.eu-sec{padding:2.2rem 0; border-top:1px solid var(--line)}
.eu-sec:first-of-type{border-top:0}
.eu-sec h2{font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.4vw,1.85rem); line-height:1.15; letter-spacing:-.01em; margin:.35rem 0 .9rem; color:var(--deep)}
:root[data-theme="dark"] .eu-sec h2{color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .eu-sec h2{color:var(--ink)} }
.eu-sec h3{font-family:var(--display); font-weight:600; font-size:1.2rem; margin:1.8rem 0 .6rem}
.eu-prose{display:grid; gap:.8rem; max-width:70ch}
.eu-prose p{margin:0; font-size:1rem; line-height:1.68}
.eu-ref{font-size:.78em; font-weight:700; text-decoration:none; vertical-align:.25em; margin-left:1px}

/* Figuras */
.eu-fig{position:relative; margin:1.4rem 0 0; padding:1.15rem 1.2rem 1rem; border-radius:16px; background:var(--eu-card); border:1px solid var(--line); box-shadow:0 1px 2px rgba(20,30,25,.04), 0 12px 28px -24px rgba(20,30,25,.35); min-width:0}
.eu-fig .ft{font-weight:700; font-size:1.02rem; margin:0 2.6rem .15rem 0}
.eu-fig .ft span{color:var(--strong)}
.eu-fig .fsub{font-size:.9rem; color:var(--muted); margin:0 0 1rem}
.eu-src{margin:1rem 0 0; padding-top:.7rem; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); line-height:1.5}
.eu-src a{font-weight:600}
.sx-modal-b .eu-fig{border:0; background:transparent; padding:0; margin:0; box-shadow:none}
.sx-modal-b .eu-fig > .ft{display:none}

/* Línea de tiempo */
.eu-rail{position:relative; height:74px; margin:.4rem .6rem .2rem}
.eu-rail .bar{position:absolute; left:0; right:0; top:34px; height:4px; border-radius:2px; background:var(--eu-pale)}
.eu-rail .done{position:absolute; left:0; top:34px; height:4px; border-radius:2px; background:var(--strong)}
.eu-rail .yr{position:absolute; top:48px; transform:translateX(-50%); font-size:.78rem; color:var(--muted); font-weight:600}
.eu-rail .tick{position:absolute; top:30px; width:1px; height:12px; background:var(--line)}
.eu-rail .dot{position:absolute; top:27px; width:18px; height:18px; margin-left:-9px; border-radius:50%; border:3px solid var(--eu-card); background:var(--strong); cursor:pointer; padding:0}
.eu-rail .dot.next{background:var(--eu-gold)}
.eu-rail .dot.on{transform:scale(1.35); box-shadow:0 0 0 3px var(--firma)}
.eu-rail .today{position:absolute; top:2px; transform:translateX(-50%); font-size:.72rem; font-weight:800; color:var(--eu-alert); white-space:nowrap}
.eu-rail .today::after{content:""; position:absolute; left:50%; top:18px; width:2px; height:22px; background:var(--eu-alert)}
.eu-miles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin:1rem 0 0; list-style:none; padding:0}
.eu-miles li{background:#F7F8FA; border:1px solid var(--line); border-radius:12px; padding:.75rem .9rem; display:grid; gap:.2rem; align-content:start; transition:border-color .2s}
.eu-miles li.on{border-color:var(--strong)}
.eu-miles .d{font-size:.78rem; font-weight:800; color:var(--strong); letter-spacing:.03em}
.eu-miles li.next .d{color:var(--eu-gold-ink)}
.eu-miles .t{font-size:.92rem; line-height:1.4}
.eu-miles a{font-size:.8rem; font-weight:600}

/* Mosaicos de 100 */
.eu-waffles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem}
.eu-wf{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); gap:1.1rem; align-items:end}
.eu-g10{display:grid; grid-template-columns:repeat(10,1fr); gap:3px; aspect-ratio:1; max-width:200px; width:100%}
.eu-g10 i{border-radius:3px; background:var(--eu-pale); display:block; aspect-ratio:1}
.eu-g10 i.f{background:var(--strong)}
.eu-g10.gold i.f{background:var(--eu-gold)}
.eu-wf .k{font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; gap:.45rem; align-items:center}
.eu-sw{width:11px; height:11px; border-radius:3px; display:inline-block; background:var(--strong)}
.eu-sw.gold{background:var(--eu-gold)}
.eu-wf .v{font-family:var(--display); font-size:2.6rem; font-weight:600; line-height:1.05; margin:.2rem 0}
.eu-wf p{margin:0; font-size:.9rem; line-height:1.45}
.eu-data{margin-top:1rem; font-size:.86rem}
.eu-data summary{cursor:pointer; font-weight:700; color:var(--strong)}
.eu-tbl{overflow-x:auto}
.eu-tbl table{border-collapse:collapse; margin-top:.6rem; font-size:.86rem; min-width:420px}
.eu-tbl th,.eu-tbl td{text-align:left; padding:.4rem .8rem .4rem 0; border-bottom:1px solid var(--line)}
.eu-tbl .r{text-align:right; font-variant-numeric:tabular-nums}

/* Riesgo */
.eu-risk{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem}
.eu-rk{background:#F7F8FA; border:1px solid var(--line); border-radius:14px; padding:.95rem; display:grid; gap:.55rem; align-content:start}
.eu-rk.pe{border:2px solid var(--strong)}
.eu-dots{display:grid; grid-template-columns:repeat(10,1fr); gap:5px; max-width:190px}
.eu-dots i{aspect-ratio:1; border-radius:50%; background:var(--eu-dot); display:block}
.eu-dots i.c{background:var(--muted)}
.eu-rk.pe .eu-dots i.c{background:var(--eu-alert)}
.eu-rk .h{font-weight:800; font-size:.98rem}
.eu-rk.pe .h{color:var(--strong)}
.eu-rk .p{font-size:.85rem; color:var(--muted); line-height:1.45}
.eu-tag{display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:var(--strong); color:var(--bg); border-radius:999px; padding:.1rem .6rem; width:max-content}
.eu-vs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem}
.eu-vs > div{border-radius:14px; padding:1rem 1.1rem; background:#F7F8FA; border:1px solid var(--line); display:grid; gap:.4rem; align-content:start}
.eu-vs > div.pe{border:2px solid var(--eu-alert)}
.eu-vs .who{font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.eu-vs .pe .who{color:var(--eu-alert)}
.eu-vs .what{font-size:1.02rem; font-weight:600; line-height:1.45}

/* Cadena */
.eu-chain{display:grid; grid-template-columns:repeat(5,minmax(0,1fr))}
.eu-node{position:relative; padding:.9rem .8rem; background:#F7F8FA; border:1px solid var(--line); border-radius:12px; margin-right:20px; display:grid; gap:.35rem; align-content:start}
.eu-node:last-child{margin-right:0}
.eu-node:not(:last-child)::after{content:""; position:absolute; right:-17px; top:28px; width:14px; height:2px; background:var(--strong)}
.eu-node:not(:last-child)::before{content:""; position:absolute; right:-19px; top:24px; border:5px solid transparent; border-left:7px solid var(--strong)}
.eu-node .who{font-weight:800; font-size:.93rem}
.eu-node .role{font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.eu-node.files{border:2px solid var(--strong)}
.eu-node.files .role{color:var(--strong)}
.eu-node ul{margin:0; padding-left:1rem; font-size:.84rem; line-height:1.45; display:grid; gap:.2rem}

/* Tres requisitos */
.eu-tests{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; margin-top:1.2rem}
.eu-test{border-top:4px solid var(--strong); background:var(--surface); border-radius:0 0 12px 12px; padding:.95rem 1.05rem; display:grid; gap:.45rem; align-content:start}
.eu-test .q{font-family:var(--display); font-size:1.18rem; font-weight:600}
.eu-test p,.eu-test li{font-size:.92rem; line-height:1.5; margin:0}
.eu-test ul{margin:0; padding-left:1.1rem; display:grid; gap:.15rem}
.eu-test a{font-size:.82rem; font-weight:600}

/* Punto o polígono */
.eu-check{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.4rem; align-items:center}
.eu-field{display:grid; gap:.4rem}
.eu-field label{font-weight:700}
.eu-field .row{display:flex; gap:.6rem; align-items:center}
.eu-field input[type=number]{width:120px; font:600 1.2rem var(--sans); padding:.45rem .6rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink)}
.eu-field input[type=range]{width:100%; accent-color:var(--strong)}
.eu-verd{font-family:var(--display); font-size:1.65rem; font-weight:600; color:var(--strong); margin:.5rem 0 0}
.eu-verd-s{font-size:.92rem; margin:0}
.eu-plot{background:#FAFBFC; border:1px solid var(--line); border-radius:12px; max-width:100%; width:100%; height:auto}
.eu-plot .pl-fill{fill:var(--eu-land); stroke:var(--strong); stroke-width:2}
.eu-plot .pl-pt{fill:var(--eu-alert)}
.eu-plot text{fill:var(--ink); font-family:var(--sans); font-size:13px}
.eu-plot text.mut{fill:var(--muted); font-weight:700}

/* Barras San Martín */
.eu-bars{display:grid; grid-template-columns:48px minmax(0,1fr); gap:6px}
.eu-yax{position:relative; height:280px; font-size:.74rem; color:var(--muted)}
.eu-yax span{position:absolute; right:4px; transform:translateY(-50%); font-variant-numeric:tabular-nums}
.eu-pa{position:relative; height:280px; border-left:2px dashed var(--eu-alert)}
.eu-pa .gl{position:absolute; left:0; right:0; height:1px; background:var(--line)}
.eu-pa .cut{position:absolute; left:8px; top:-4px; font-size:.72rem; font-weight:800; color:var(--eu-alert); background:var(--eu-card); padding-right:4px}
.eu-cols{position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-left:20px; align-items:end}
.eu-col{position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:100%; text-decoration:none; color:var(--ink)}
.eu-col .b{background:var(--strong); border-radius:4px 4px 0 0; width:100%; max-width:100px; margin:0 auto; transition:opacity .2s}
.eu-col:hover .b,.eu-col:focus-visible .b{opacity:.82}
.eu-col .val{text-align:center; font-weight:800; font-size:.9rem; margin-bottom:5px; font-variant-numeric:tabular-nums}
.eu-xax{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding-left:74px; margin-top:6px; font-size:.84rem; font-weight:700; color:var(--muted); text-align:center}
.eu-sum{display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; align-items:baseline; margin-top:1rem}
.eu-sum .big{font-family:var(--display); font-size:2.3rem; font-weight:600; color:var(--eu-alert)}

/* Autoevaluación */
.eu-quiz{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:1.4rem; align-items:start}
.eu-qs{list-style:none; padding:0; margin:0; display:grid; gap:.55rem; counter-reset:q}
.eu-qs li{background:#F7F8FA; border:1px solid var(--line); border-radius:12px; padding:.8rem .95rem; display:grid; gap:.55rem; counter-increment:q}
.eu-qs .qt{font-size:.94rem; line-height:1.45}
.eu-qs .qt::before{content:counter(q) ". "; font-weight:800; color:var(--strong)}
.eu-qs .qt a{font-size:.78rem; font-weight:600; white-space:nowrap}
.eu-opts{display:flex; gap:.45rem; flex-wrap:wrap}
.eu-opts label{position:relative; display:inline-flex}
.eu-opts input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0}
.eu-opts span{border:1px solid var(--line); border-radius:999px; padding:.28rem .85rem; font-size:.84rem; font-weight:700; color:var(--muted); background:var(--eu-card); cursor:pointer}
.eu-opts input:focus-visible + span{outline:3px solid var(--firma); outline-offset:2px}
.eu-opts input[value="2"]:checked + span{background:var(--strong); border-color:var(--strong); color:var(--bg)}
.eu-opts input[value="1"]:checked + span{background:var(--eu-gold); border-color:var(--eu-gold); color:#1D2A21}
.eu-opts input[value="0"]:checked + span{background:var(--eu-alert); border-color:var(--eu-alert); color:#fff}
.eu-res{position:sticky; top:calc(88px + env(safe-area-inset-top,0px)); background:var(--eu-card); border:1px solid var(--line); border-radius:16px; padding:1.1rem; display:grid; gap:.65rem}
.eu-meter{height:12px; border-radius:999px; background:var(--eu-pale); overflow:hidden}
.eu-meter i{display:block; height:100%; width:0; background:var(--muted); transition:width .3s,background .3s}
.eu-score{font-family:var(--display); font-size:2.6rem; font-weight:600; line-height:1}
.eu-state{display:inline-flex; gap:.45rem; align-items:center; font-weight:800; font-size:.9rem; border-radius:999px; padding:.2rem .7rem; background:var(--surface); width:max-content; max-width:100%}
.eu-state .lamp{width:11px; height:11px; border-radius:50%; background:var(--muted); flex:none}
.eu-gaps{margin:0; padding-left:1.1rem; font-size:.88rem; display:grid; gap:.3rem}
.eu-res .note{font-size:.8rem; color:var(--muted); margin:0; line-height:1.45}
.eu-reset{background:none; border:0; color:var(--muted); font:600 .84rem var(--sans); text-decoration:underline; cursor:pointer; justify-self:start; padding:0}

/* Hoja de ruta */
.eu-plan{list-style:none; padding:0; margin:1.2rem 0 0; display:grid}
.eu-plan li{display:grid; grid-template-columns:160px minmax(0,1fr); gap:1.1rem; padding:.85rem 0; border-bottom:1px solid var(--line)}
.eu-plan .w{font-weight:800; color:var(--strong); font-size:.9rem}
.eu-plan .w small{display:block; font-weight:600; color:var(--muted)}
.eu-plan p{margin:0; font-size:.97rem; line-height:1.55}

/* Fuentes */
.eu-sources{counter-reset:s; list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.5rem; font-size:.9rem}
.eu-sources li{counter-increment:s; display:grid; grid-template-columns:36px minmax(0,1fr); gap:.3rem; scroll-margin-top:100px}
.eu-sources li::before{content:"[" counter(s) "]"; font-weight:800; color:var(--strong); font-variant-numeric:tabular-nums}
.eu-sources li:target{background:color-mix(in srgb,var(--firma) 18%,transparent); border-radius:6px}
.eu-sources a{word-break:break-word}

@media (max-width:900px){
  .eu-miles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eu-chain{grid-template-columns:minmax(0,1fr); gap:20px}
  .eu-node{margin-right:0}
  .eu-node:not(:last-child)::after{right:auto; left:28px; top:auto; bottom:-18px; width:2px; height:15px}
  .eu-node:not(:last-child)::before{right:auto; left:24px; top:auto; bottom:-21px; border:5px solid transparent; border-top:7px solid var(--strong)}
  .eu-quiz,.eu-tests{grid-template-columns:minmax(0,1fr)}
  .eu-res{position:static}
}
@media (max-width:640px){
  .eu-clocks,.eu-waffles,.eu-risk,.eu-vs,.eu-check,.eu-miles{grid-template-columns:minmax(0,1fr)}
  .eu-wf{grid-template-columns:minmax(0,140px) minmax(0,1fr)}
  .eu-wf .v{font-size:2.1rem}
  .eu-fig{padding:.95rem .85rem .85rem}
  .eu-rail .yr{font-size:.68rem}
  .eu-plan li{grid-template-columns:minmax(0,1fr); gap:.2rem}
  .eu-cols,.eu-xax{gap:8px}
  .eu-xax{padding-left:62px}
  .eu-col .val{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){ .eu *{transition:none !important} }