/* ECAN GEO · Maestro (scrollytelling). Móvil primero. Sin JS todo se lee en orden; el JS solo añade movimiento (.eg-js). */

/* Divi pone overflow en sus contenedores y eso rompe position:sticky */
body.ecan-geo-activo #page-container,body.ecan-geo-activo #et-main-area,body.ecan-geo-activo #main-content.eg-main{overflow:visible!important}

.eg{--eg-gut:max(20px,5vw)}

/* ---------- Cabecera ---------- */
.eg .eg-mhero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--hero);color:var(--hero-ink);overflow:hidden;isolation:isolate}
.eg .eg-mhero__img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;z-index:-2;transform:scale(calc(1 + var(--h,0) * .12));transform-origin:50% 40%}
.eg .eg-mhero--foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,8,5,.92) 6%,rgba(10,8,5,.45) 50%,rgba(10,8,5,.35))}
.eg .eg-mhero:not(.eg-mhero--foto){background-image:radial-gradient(60% 80% at 75% 30%,color-mix(in srgb,var(--orange) 32%,transparent),transparent 62%),linear-gradient(160deg,color-mix(in srgb,var(--hero) 80%,#3a2c12),var(--hero) 70%)}
.eg .eg-mhero__in{width:100%;max-width:1280px;margin:0 auto;padding:calc(var(--eg-hdr) + 72px) var(--eg-gut) clamp(56px,9vh,96px)}
.eg .eg-mhero h1{font:700 clamp(42px,9.2vw,140px)/.94 var(--f-display);letter-spacing:-.02em;max-width:13ch;margin:18px 0 22px;text-wrap:balance;color:var(--hero-ink);overflow-wrap:break-word}
.eg .eg-mhero h1 em{font-style:italic;font-weight:inherit}
.eg .eg-mhero h1 em.eg-ac{color:var(--orange)}
.eg .eg-mhero h1 small{display:block;font-size:.3em;letter-spacing:.02em;line-height:1.2;margin-top:.5em;font-weight:inherit}
.eg .eg-mhero .eg-dek{max-width:42ch}
.eg .eg-mhero__baja{display:block;width:1px;height:56px;margin-top:36px;background:linear-gradient(currentColor,transparent);opacity:.6}

/* ---------- Columna de lectura ---------- */
.eg .eg-mwrap{padding-bottom:40px}
.eg .eg-mwrap > *{width:min(760px,calc(100% - 2 * var(--eg-gut)));max-width:none;margin-inline:auto}
.eg .eg-mwrap > .eg-factswrap,.eg .eg-mwrap > .eg-ficha,.eg .eg-mwrap > .eg-gal,.eg .eg-mwrap > .eg-info--grande,.eg .eg-mwrap > .eg-steps,.eg .eg-mwrap > .eg-ba,.eg .eg-mwrap > .eg-crono,.eg .eg-mwrap > .eg-myth,.eg .eg-mwrap > .eg-table,.eg .eg-mwrap > .wp-block-table{width:min(1040px,calc(100% - 2 * var(--eg-gut)))}
.eg .eg-mwrap > .eg-esc,.eg .eg-mwrap > .eg-word,.eg .eg-mwrap > .eg-cover,.eg .eg-mwrap > .eg-info--completo{width:auto;margin-inline:0}
.eg .eg-mwrap > .eg-answer{margin-top:-28px;position:relative;z-index:2;box-shadow:0 20px 50px -30px rgba(0,0,0,.5)}
.eg .eg-mwrap > p{font-size:clamp(17px,.5vw + 15px,20px);line-height:1.8;margin-bottom:1.2em}
.eg .eg-mwrap .eg-chapter{margin-top:clamp(72px,12vw,140px)}
.eg .eg-mwrap .eg-chapter h2{font-size:clamp(34px,5.6vw,68px);line-height:1.05}
.eg .eg-mwrap .eg-chlabel{display:none}
.eg .eg-mwrap > .eg-pull{max-width:none;width:min(900px,calc(100% - 2 * var(--eg-gut)));font-size:clamp(26px,4.2vw,50px);line-height:1.18;border:0;padding:0;margin-block:clamp(56px,10vw,110px);text-align:center;text-wrap:balance}
.eg .eg-mwrap > .eg-pull::before{content:"“";display:block;font:700 1.8em/.6 var(--f-display);color:var(--orange);margin-bottom:.1em}
.eg .eg-mwrap .eg-facts b{font-size:clamp(40px,7vw,80px)}
.eg .eg-mwrap > .eg-cover{margin-block:clamp(56px,10vw,110px);border-radius:0;min-height:min(86svh,780px)}
.eg .eg-mwrap > .eg-cover h2{font-size:clamp(34px,6.4vw,84px)}
.eg .eg-narrow{margin-inline:auto}

/* ---------- Escenas ---------- */
.eg .eg-esc{display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;margin-block:clamp(40px,7vw,90px)}
.eg .eg-esc__media{grid-area:1/1;position:sticky;top:var(--eg-fix,0px);height:calc(100svh - var(--eg-fix,0px));overflow:hidden;z-index:0;background:var(--hero)}
.eg .eg-esc__f{position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity .9s ease,transform 1.8s ease}
.eg .eg-esc__f.is-on{opacity:1;transform:none}
.eg .eg-esc__f img{width:100%;height:100%!important;object-fit:cover}
.eg .eg-esc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,8,5,.88) 0%,rgba(10,8,5,.5) 45%,rgba(10,8,5,.25) 100%)}
.eg .eg-esc__pasos{grid-area:1/1;position:relative;z-index:1;padding-inline:var(--eg-gut);color:#F7F0DE;text-shadow:0 1px 22px rgba(0,0,0,.45)}
.eg .eg-esc__paso{min-height:88svh;display:grid;align-content:center;max-width:36rem;padding-block:4rem}
.eg .eg-esc__paso h3{font:700 clamp(34px,5.4vw,78px)/1 var(--f-display);margin:0;color:#fff;text-wrap:balance;letter-spacing:-.01em}
.eg .eg-esc__paso p{margin:1rem 0 0;font-size:clamp(18px,1.1vw + 12px,27px);line-height:1.4;max-width:30ch;color:rgba(255,255,255,.93)}
.eg .eg-esc__paso a{color:var(--orange)}
.eg.eg-js .eg-esc__paso{opacity:.28;transition:opacity .6s ease}
.eg.eg-js .eg-esc__paso.is-on{opacity:1}
.eg .eg-esc--sinfoto .eg-esc__media::after{display:none}
@media (min-width:900px){ .eg .eg-esc__pasos{padding-inline:max(var(--eg-gut),9vw)} }

/* ---------- Palabra protagonista ---------- */
.eg .eg-word{min-height:92svh;display:grid;align-content:center;justify-items:center;text-align:center;padding:12svh var(--eg-gut);background:var(--hero);color:var(--hero-ink);margin-block:clamp(40px,7vw,90px)}
.eg .eg-word__w{font:700 clamp(46px,min(17vw,26svh),260px)/.92 var(--f-display);letter-spacing:-.02em;max-width:100%;overflow-wrap:anywhere;margin:0;
  background:linear-gradient(90deg,var(--orange) calc(var(--c,1) * 100%),color-mix(in srgb,var(--hero-ink) 18%,transparent) calc(var(--c,1) * 100%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.eg .eg-word__t p{max-width:28ch;margin:1.4rem auto 0;font-size:clamp(18px,1.4vw + 12px,30px);line-height:1.4;color:color-mix(in srgb,var(--hero-ink) 88%,transparent)}

/* ---------- Cronología ---------- */
.eg .eg-crono{--d:92px;list-style:none;position:relative;margin-block:clamp(48px,8vw,100px);padding:0}
.eg .eg-crono::before{content:"";position:absolute;left:calc(var(--d) + 20px);top:6px;bottom:6px;width:2px;background:linear-gradient(var(--orange) calc(var(--p,1) * 100%),var(--line) calc(var(--p,1) * 100%))}
.eg .eg-crono__i{position:relative;display:grid;grid-template-columns:var(--d) minmax(0,1fr);padding-bottom:clamp(28px,5vw,52px)}
.eg .eg-crono__i::before{content:"";position:absolute;left:calc(var(--d) + 13px);top:.55em;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--orange);z-index:1}
.eg .eg-crono__f{font:700 clamp(20px,2.6vw,30px)/1.1 var(--f-display);color:var(--orange-ink);padding-top:.1em;overflow-wrap:anywhere}
.eg .eg-crono__c{padding-left:48px;min-width:0}
.eg .eg-crono__c h3{font:700 clamp(21px,2.4vw,28px)/1.2 var(--f-display);margin:0 0 6px}
.eg .eg-crono__c p{margin:0 0 .6em;max-width:60ch}
.eg.eg-js .eg-crono__i{opacity:.3;transition:opacity .6s ease}
.eg.eg-js .eg-crono__i.is-in{opacity:1}
@media (max-width:640px){ .eg .eg-crono{--d:60px} .eg .eg-crono__f{font-size:17px} .eg .eg-crono__c{padding-left:40px} }

/* ---------- Antes / Después ---------- */
.eg .eg-ba{margin-block:44px}
.eg .eg-ba__s{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:14px;background:var(--hero);touch-action:pan-y}
.eg .eg-ba__s img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;max-width:none}
.eg .eg-ba__d{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p,50%))}
.eg .eg-ba__s::after{content:"";position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.5);pointer-events:none}
.eg .eg-ba__s::before{content:"↔";position:absolute;z-index:2;left:var(--p,50%);top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font:700 20px/1 system-ui;box-shadow:0 4px 16px rgba(0,0,0,.4);pointer-events:none}
.eg .eg-ba__r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.eg .eg-ba__l{position:absolute;bottom:12px;z-index:1;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 12px/1.4 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
.eg .eg-ba__l--a{left:12px}
.eg .eg-ba__l--b{right:12px}
.eg .eg-ba figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}

/* ---------- Tema oscuro/otros: ajustes de contraste ---------- */
.eg.eg-t-gotico .eg-mhero h1{letter-spacing:.01em;font-size:clamp(40px,8.4vw,124px)}
.eg.eg-t-gotico .eg-word__w{letter-spacing:.01em}
.eg.eg-t-impacto .eg-mhero h1,.eg.eg-t-impacto .eg-word__w{text-transform:uppercase;letter-spacing:0}

/* ---- Mapa con ruta (2.2.1) ---- */
.eg .eg-mwrap > .eg-mapa{width:auto;margin-inline:0}
.eg .eg-mapa{--u:.4;display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;margin-block:clamp(40px,7vw,90px)}
.eg .eg-mapa__media{grid-area:1/1;position:sticky;top:var(--eg-fix,0px);height:calc(100svh - var(--eg-fix,0px));overflow:hidden;z-index:0;background:var(--hero,#0c0a06)}
.eg .eg-mapa__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.eg .eg-mapa__tierra{fill:color-mix(in srgb,var(--ink) 14%,var(--hero,#0c0a06));stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.eg .eg-mapa__ruta{fill:none;stroke:var(--orange);stroke-width:calc(2.5 * var(--u) * 1px);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease}
.eg .eg-mapa__ruta.is-on{stroke-dashoffset:0}
.eg .eg-mapa__punto{r:calc(5 * var(--u) * 1px);fill:var(--orange);stroke:var(--hero,#0c0a06);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.35;transition:opacity .5s}
.eg .eg-mapa__halo{r:calc(14 * var(--u) * 1px);fill:var(--orange);opacity:0}
.eg .eg-mapa__pin text{font:600 calc(13 * var(--u) * 1px)/1 var(--f-body);fill:var(--ink);paint-order:stroke;stroke:var(--hero,#0c0a06);stroke-width:3px;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s}
.eg .eg-mapa__pin.is-on .eg-mapa__punto{opacity:1}
.eg .eg-mapa__pin.is-on text{opacity:1}
.eg .eg-mapa__pin.is-cur .eg-mapa__halo{animation:eg-pulso 2.2s ease-out infinite}
@keyframes eg-pulso{0%{opacity:.5;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
.eg .eg-mapa__halo{transform-box:fill-box;transform-origin:center}
.eg .eg-mapa__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,8,5,.82) 0%,rgba(10,8,5,.35) 45%,rgba(10,8,5,0) 70%)}
.eg .eg-mapa__pasos{grid-area:1/1;position:relative;z-index:1;padding-inline:var(--eg-gut);color:#F7F0DE}
.eg .eg-mapa__paso{min-height:100svh;display:grid;align-content:center;max-width:26rem;padding-block:4rem}
.eg .eg-mapa__paso h3{font:700 clamp(30px,4vw,56px)/1.02 var(--f-display);margin:0;color:#fff;text-wrap:balance}
.eg .eg-mapa__paso p{margin:1rem 0 0;font-size:clamp(17px,.9vw + 12px,22px);line-height:1.45;color:rgba(255,255,255,.93)}
.eg .eg-mapa__paso a{color:var(--orange)}
.eg.eg-js .eg-mapa__paso{opacity:.28;transition:opacity .6s ease}
.eg.eg-js .eg-mapa__paso.is-on{opacity:1}
@media (min-width:900px){ .eg .eg-mapa__pasos{padding-inline:max(var(--eg-gut),9vw)} }
@media (max-width:899px){
  .eg .eg-mapa__media{height:46svh}
  .eg .eg-mapa__media::after{background:linear-gradient(0deg,rgba(10,8,5,.9) 0%,rgba(10,8,5,0) 35%)}
  .eg .eg-mapa__paso{align-content:end;padding-block:0 6svh;min-height:100svh;max-width:none}
  .eg .eg-mapa__pasos{background:linear-gradient(180deg,transparent 0,transparent 0)}
}
@media (prefers-reduced-motion:reduce){ .eg .eg-mapa__ruta{transition:none} .eg .eg-mapa__pin.is-cur .eg-mapa__halo{animation:none;opacity:.35} }