/* El recorrido utiliza el progreso real de la historia, sin bloquear el scroll. */
.journey-bottom>p{max-width:340px;line-height:1.7;font-size:12px}
.journey-chapters{position:relative;gap:24px;padding-top:12px}
.journey-chapters:before,.journey-chapters:after{content:'';position:absolute;top:0;left:0;height:2px;border-radius:2px;pointer-events:none}
.journey-chapters:before{width:100%;background:#d7b5a12e}
.journey-chapters:after{width:calc(var(--progress,0)*100%);background:#e3b99b;box-shadow:0 0 10px #e3b99b35}
.journey-chapters button{border-top:0;min-width:90px;padding:12px 0;color:#bdacb8;display:flex;align-items:center;gap:8px}
.journey-chapters button span{margin-left:0;font-size:12px;letter-spacing:0}
.journey-chapters button:before{content:'';width:7px;height:7px;border:1px solid currentColor;border-radius:50%;flex-shrink:0}
.journey-chapters button[aria-pressed=true]{color:#f4dfd0}
.journey-chapters button[aria-pressed=true]:before{background:#e3b99b;border-color:#e3b99b;box-shadow:0 0 0 4px #e3b99b15}
.story-final-action{display:inline-flex;margin-top:20px;border-radius:999px;min-height:44px;gap:16px;pointer-events:none;visibility:hidden;padding:10px 18px;font-size:12px}
.scroll-story[data-story-current="2"] .story-final-action{visibility:visible;pointer-events:auto}
.story-final-note{font-size:11px!important;line-height:1.6!important;margin-top:14px!important;color:var(--scene-muted)!important}
@media(min-width:1101px){
 .journey-copy{left:max(140px,calc((100vw - 1100px)/2));width:41%}
 .journey-bottom .journey-chapters{position:absolute;left:calc(24px - max(48px,calc((100vw - 1344px)/2)));top:auto;bottom:calc(50svh - 110px);transform:none;display:flex;flex-direction:column;gap:28px;padding:0 0 0 18px;width:100px}
 .journey-chapters:before,.journey-chapters:after{left:0;top:16px;width:2px}
 .journey-chapters:before{height:calc(100% - 32px)}
 .journey-chapters:after{height:calc((100% - 32px)*var(--progress,0))}
 .journey-chapters button{min-width:0;padding:10px 0;flex-wrap:wrap;font-size:9px}
 .journey-chapters button span{width:100%;padding-left:15px;font-size:10px}
}
@media(max-width:600px){
 .journey-bottom{flex-direction:column;align-items:stretch;gap:10px;bottom:20px}
 .journey-bottom>p{font-size:10px;max-width:none;justify-content:center;gap:8px}
 .journey-bottom>p>span{width:22px;height:26px}
 .journey-chapters{justify-content:space-between;gap:12px}
 .journey-chapters button{min-width:0;font-size:9px;padding:8px 0;gap:6px}
 .journey-chapters button span{font-size:10px}
 .story-final-action{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.journey-chapters:after{box-shadow:none}}

.journey-bottom>p>span[data-story-hint]{display:inline;width:auto;height:auto;border:0;border-radius:0;font-size:inherit;line-height:inherit}

body[data-view="home"] .story-final-action{background:linear-gradient(135deg,#e5b799,#d49b84);color:#30212b;border:1px solid #ffe0c482}
body[data-view="home"] .story-final-action:hover{background:#f1c9ad;color:#30212b;transform:none}
/* Un hilo orgánico sustituye la regla recta. */
.journey-chapters{width:400px;max-width:52%;padding-top:68px;gap:8px;justify-content:space-between}
.journey-chapters:before,.journey-chapters:after{display:none}
.story-trail{position:absolute;inset:0 0 auto;width:100%;height:80px;overflow:visible;pointer-events:none}
.story-trail path{fill:none;stroke-width:1.35;stroke-linecap:round}
.trail-base{stroke:#e3b99b30}.trail-lit{stroke:#e3b99b;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--progress,0)*100)}
.story-trail .trail-stop{fill:#211920;stroke:#af9382;stroke-width:1.3}
.story-trail .trail-stop.is-reached{fill:#e3b99b;stroke:#e3b99b}
.story-trail .trail-light{fill:#e7bda0;stroke:none;filter:drop-shadow(0 0 6px #edbd97)}
.story-trail .trail-core{fill:#fff3e6;stroke:none}
.story-trail-vertical{display:none}
.journey-chapters button{font-size:9px;gap:5px;min-width:0;padding:7px 0;flex-wrap:wrap;max-width:34%;align-content:flex-start}
.journey-chapters button span{font-size:10px;line-height:1.4;margin:0}
.journey-chapters button:before{display:none}
.journey-chapters button[aria-pressed=true]{color:#ffe3cc}
@media(min-width:1101px){
 .journey-copy{left:max(176px,calc((100vw - 1050px)/2));width:40%}
 .journey-bottom .journey-chapters{width:144px;max-width:none;height:270px;bottom:calc(50svh - 160px);padding:0 0 0 48px;gap:0;justify-content:space-between}
 .story-trail-horizontal{display:none}.story-trail-vertical{display:block;width:52px;height:270px;inset:0 auto auto 0}
 .journey-chapters button{max-width:none;padding:0;min-height:44px;flex-direction:column;gap:5px;align-items:flex-start}
 .journey-chapters button span{padding-left:0;width:auto;font-size:10px}
}
@media(max-width:600px){
 .journey-bottom{gap:0;bottom:14px}
 .journey-bottom>p{min-height:34px}
 .journey-chapters{max-width:none;width:100%;padding-top:52px}
 .story-trail-horizontal{height:64px}
 .journey-chapters button{font-size:8px;max-width:33%;flex-direction:column;gap:3px;align-items:flex-start}
 .journey-chapters button:last-child{align-items:flex-end;text-align:right}
 .journey-chapters button span{font-size:9px}
}

/* Tramo pendiente legible; el avance continuo lo cubre al recorrerlo. */
.story-trail .trail-base{stroke:#caa68bb3;stroke-width:1.65;stroke-dasharray:4 5;fill:none}
.story-trail .trail-lit{stroke:#efc8a9;stroke-width:2.2;fill:none;filter:drop-shadow(0 0 2px #efc8a933)}
.story-trail .trail-stop{stroke:#d5b69a;stroke-width:1.5}

/* Espacio exclusivo bajo la imagen para el recorrido, sin superposición. */
@media(min-width:601px) and (max-width:1100px){
 .journey-visual{top:calc(50% - 45px);height:min(calc(100svh - 220px),680px)}
 .journey-bottom{bottom:14px;align-items:flex-end}
 .journey-chapters{padding-top:66px}
}
.story-trail-horizontal .trail-lit{stroke:url(#story-copper-horizontal)}
.story-trail-vertical .trail-lit{stroke:url(#story-copper-vertical)}
.story-trail .trail-base{stroke:#d7b99a99;stroke-width:1.6;stroke-dasharray:3 6}
.story-trail .trail-light{r:5.5;filter:drop-shadow(0 0 4px #ffc99b) drop-shadow(0 0 10px #ebac7966)}
.story-trail .trail-stop{r:3.5;fill:#2c2028;stroke-width:1.5}
.story-trail .trail-stop.is-reached{fill:#f0c5a2;stroke:#f6d1b0}
.journey-chapters button[aria-pressed=true]{color:#ffe8d4;text-shadow:0 0 12px #e0aa7633}
@media(max-width:600px){.journey-visual{bottom:154px;top:auto;height:30svh;max-height:310px}.journey-bottom{bottom:12px}}

/* La escena no debe desplazarse internamente al enfocar sus paradas. */
.story-sticky{overflow:clip}
@media(min-width:601px){.journey-visual{top:116px;bottom:154px;height:auto;max-height:none;transform:none}}
@media(min-width:1101px){.journey-visual{top:116px;bottom:120px}}

/* Tres capítulos oscuros: comienzo cálido, tecnología petróleo, recuerdo ciruela. */
body[data-view="home"] .scroll-story[data-story-current="0"] .story-sticky{background:radial-gradient(ellipse at 70% 48%,#393039 0%,#242026 45%,#101217 100%)}
body[data-view="home"] .scroll-story[data-story-current="1"] .story-sticky{background:radial-gradient(ellipse at 70% 48%,#1e4650 0%,#112e38 45%,#071820 100%)}
body[data-view="home"] .scroll-story[data-story-current="2"] .story-sticky{background:radial-gradient(ellipse at 70% 48%,#483044 0%,#2c1e30 45%,#15101e 100%)}
.scroll-story[data-story-current="0"]{--scene-muted:#c6b5bc!important}
.scroll-story[data-story-current="1"]{--scene-muted:#b4d0d3!important}
.scroll-story[data-story-current="2"]{--scene-muted:#dac1ce!important}
body[data-view="home"] .journey-watermark{opacity:.035;color:#f1dbcd}
body[data-view="home"] .scroll-story[data-story-current="1"] .journey-watermark{color:#c6eeed}
body[data-view="home"] .scroll-story[data-story-current="2"] .journey-watermark{color:#f2d2e5}

/* Invitación al scroll anclada a la esquina inferior izquierda. */
.journey-bottom>p{position:absolute;left:calc(24px - max(48px,calc((100vw - 1344px)/2)));bottom:10px;margin:0;max-width:340px;text-align:left;justify-content:flex-start;align-items:center}
@media(max-width:1000px) and (min-width:601px){.journey-bottom>p{left:-11px}}
@media(max-width:600px){
 .journey-bottom{bottom:64px}
 .journey-bottom>p{left:0;bottom:-44px;max-width:calc(100vw - 48px);font-size:11px;justify-content:flex-start}
 .journey-visual{bottom:196px}
}

@media(min-width:601px) and (max-width:1100px){.journey-bottom .journey-chapters{margin-left:auto}}

.journey-bottom{bottom:42px}
@media(max-width:600px){.journey-bottom{bottom:90px}.journey-visual{bottom:222px}}

/* Clear navigation and a direct explanation of the pack. */
body[data-view] .site-header .app-nav :is(a,button){font-size:13px}
@media(max-width:1100px){body[data-view] .site-header .app-nav :is(a,button){font-size:12px}}
.pack-process{list-style:none;padding:0;margin:28px 0 22px;display:grid;gap:18px}
.pack-process li{display:flex;align-items:flex-start;gap:14px}
.pack-process li>span{flex:0 0 32px;height:32px;display:grid;place-items:center;border:1px solid #d6aa8c66;border-radius:50%;color:#edc4a7;font-size:10px}
.pack-process strong{display:block;color:#f2ece7;font-size:14px;font-weight:500;line-height:1.4}
.pack-process p{color:#b3c1d4;font-size:12px;line-height:1.6;margin:4px 0 0}
@media(max-width:600px){
 body[data-view] .site-header .app-nav{height:44px;scrollbar-width:thin;scrollbar-color:#d8bba480 transparent;padding-bottom:5px}
 body[data-view] .site-header .app-nav::-webkit-scrollbar{display:block;height:2px}
 body[data-view] .site-header .app-nav::-webkit-scrollbar-thumb{background:#d8bba480;border-radius:2px}
 body[data-view] .site-header .app-nav :is(a,button){flex-basis:100px;height:34px;min-height:34px;font-size:12px}
 body[data-view] .site-header .help-button{height:44px;min-height:44px}
 body[data-view] .site-header .app-nav[data-more-right="true"]{mask-image:linear-gradient(to right,#000 90%,transparent)}
 body[data-view] .site-header .app-nav[data-more-left="true"]{mask-image:linear-gradient(to right,transparent,#000 10%)}
 body[data-view] .site-header .app-nav[data-more-left="true"][data-more-right="true"]{mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
 .pack-process{gap:16px;margin-top:24px}
}

@media(max-width:600px){.journey-visual{height:25svh;max-height:260px;bottom:194px}}

@media(max-width:600px){.title-real h2{font-size:clamp(30px,8.2vw,40px);line-height:1.08;letter-spacing:-1px}.title-real .story-final-action{margin-top:12px}.title-real .story-final-note{margin-top:10px!important}}

/* En ventanas estrechas, el relato debe caber antes del recorrido inferior. */
@media(min-width:601px) and (max-width:800px){
 .journey-title :is(h1,h2){font-size:40px!important;line-height:1.08!important;letter-spacing:-1.4px!important}
 body[data-view] .site-header .wordmark img{width:90px}
 body[data-view] .site-header .app-nav :is(a,button){font-size:11px}
}

@media(min-width:601px) and (max-width:800px){.journey-bottom>p{max-width:calc(45vw - 30px);font-size:11px;line-height:1.6}}

/* Recorrido lateral más alto, con espacio amplio entre capítulos. */
@media(min-width:1101px){
 .journey-bottom .journey-chapters{--trail-height:min(clamp(538.2px,82.225svh,747.5px),calc(100svh - 180px));height:var(--trail-height);width:186px;padding-left:96px;bottom:calc(50svh - 42px - var(--trail-height)/2)}
 .story-trail-vertical{height:var(--trail-height);width:calc(var(--trail-height)*70/460)}
 .journey-chapters button span{font-size:11px}
}

@media(min-width:1101px){.journey-copy{left:max(208px,calc((100vw - 1050px)/2))}}

/* Separación clara entre recorrido, relato e imagen. */
@media(min-width:1101px){
 .journey-copy{left:max(240px,calc((100vw - 1050px)/2));width:calc(100vw - max(240px,calc((100vw - 1050px)/2)) - max(54px,calc((100vw - 1344px)/2)) - min(43vw,610px) - 6vw - 32px)}
 .journey-title :is(h1,h2){font-size:clamp(40px,4.1vw,60px);line-height:1.06;letter-spacing:-2px}
 .journey-titles{height:400px}
}

/* Turquesa luminoso para distinguir el camino del cobre del contenido. */
.story-trail .trail-base{stroke:#9acbc5ad;stroke-width:1.8}
.story-trail .trail-lit{stroke:#b6ece3;stroke-width:2.5;filter:drop-shadow(0 0 3px #83d9cb55)}
.story-trail .trail-stop{fill:#193b3b;stroke:#a4d7cf}
.story-trail .trail-stop.is-reached{fill:#c7f4ea;stroke:#e4fff8}
.story-trail .trail-light{fill:#bcefe3;filter:drop-shadow(0 0 5px #7fe0cd) drop-shadow(0 0 12px #7fe0cd66)}
.story-trail .trail-core{fill:#f0fff9}
.journey-chapters button{color:#bdd4d2}
.journey-chapters button[aria-pressed=true]{color:#e4fff5;text-shadow:0 0 12px #9bded233}

/* Tres etapas ilustradas, con verdes suaves de planta. */
.story-trail .trail-base{stroke:#829e6ebd;stroke-width:1.9}
.story-trail .trail-lit{stroke:#b1ce8e;stroke-width:2.5;filter:drop-shadow(0 0 3px #a1bc7050)}
.story-trail .trail-stop{fill:none;stroke:#91ad79;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.story-trail .trail-stop path{stroke-width:1.6}
.story-trail .trail-stop .trail-leaf{fill:#57734a;stroke:#91ad79}
.story-trail .trail-stop .trail-petal{fill:#26382b}
.story-trail .trail-stop .trail-seed{fill:#c9d9a6;stroke:#e4ecc8}
.story-trail .trail-stop .trail-sparkle{fill:#719253}
.story-trail .trail-stop.is-reached{fill:none;stroke:#d1e6b3;filter:drop-shadow(0 0 4px #9abb6650)}
.story-trail .trail-stop.is-reached .trail-leaf{fill:#739b56;stroke:#cee4ae}
.story-trail .trail-light{r:3;fill:#bedc95;filter:drop-shadow(0 0 5px #a6c96b)}
.story-trail .trail-core{r:1.2;fill:#f0f7dc}
.journey-chapters button{color:#bacaaa}
.journey-chapters button[aria-pressed=true]{color:#e2edcf;text-shadow:0 0 12px #a3c87833}

/* Iconos sin placa de fondo y flor de trazos sencillos. */
.story-trail .trail-stop .trail-petal{fill:none}
.story-trail .trail-stop .trail-seed{fill:#b8ce91;stroke:#d3e5b6}

/* Brote de hojas carnosas inspirado en la referencia, sin fondo. */
.story-trail .trail-stop .sprout-center{fill:#8ebd49;stroke:#d2e897}
.story-trail .trail-stop .sprout-back{fill:#598f3f;stroke:#b0ce78}
.story-trail .trail-stop .sprout-front{fill:#397744;stroke:#9fc874}
.story-trail .trail-stop .sprout-vein{fill:none;stroke:#cce59b;stroke-width:1.2}
.story-trail .trail-stop .sprout-seed{fill:#e9f2b4;stroke:#f3f9d3;stroke-width:1}
.story-trail .trail-stop .sprout-spark{fill:#bbd581;stroke:none}
.story-trail .trail-stop.is-reached .sprout-center{fill:#a4ce59}
.story-trail .trail-stop.is-reached .sprout-front{fill:#4a8e4a}

@media(min-width:1101px){.journey-chapters button[data-story-phase="0"]{transform:translate(-14px,10px)}}

@media(min-width:1101px){
 .journey-chapters button{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;white-space:nowrap;min-height:44px}
 .journey-chapters button span{width:auto}
 .journey-chapters button[data-story-phase="0"]{transform:translate(-27px,10px)}
 .journey-chapters button[data-story-phase="1"],.journey-chapters button[data-story-phase="2"]{transform:translate(-5px,0)}
}

.journey-chapters button span{font-size:inherit}

@media(min-width:1101px){.journey-chapters button{font-size:11px}}

@media(min-width:1101px){
 .journey-chapters button[data-story-phase]{position:absolute;top:calc(var(--trail-label-y) - 22px);left:calc(var(--trail-height)*var(--trail-label-x) + 10px);transform:none}
}

@media(min-width:1101px){.journey-copy{left:calc(max(240px,calc((100vw - 1050px)/2)) + 20px)}}

/* Solo la etapa actual se muestra rellena. */
.story-trail .trail-icon:not(.is-active){filter:none;stroke:#91ad79}
.story-trail .trail-stop.trail-icon:not(.is-active) :is(path,rect){fill:none;stroke:#91ad79;stroke-width:1.6}
.story-trail .trail-icon.is-active{stroke:#d1e6b3;filter:drop-shadow(0 0 4px #9abb6650)}
.story-trail .trail-icon.is-active rect{fill:#b1ce8e;stroke:#d1e6b3}
.story-trail .trail-icon.is-active[data-trail-stop=".48"] path,
.story-trail .trail-icon.is-active[data-trail-stop="1"] path{stroke:#365032}
.story-trail .trail-icon.is-active .trail-leaf,
.story-trail .trail-icon.is-active .trail-sparkle{fill:#b1ce8e;stroke:#d1e6b3}

/* Luz cálida y contenida en la etapa actual. */
.journey-chapters button[aria-pressed="true"]{color:#ffe4a3;text-shadow:0 0 10px #ffd27b45}
.story-trail .trail-stop.trail-icon.is-active{stroke:#ffe4a3;filter:drop-shadow(0 0 3px #ffd27b70) drop-shadow(0 0 8px #ffd27b30)}
.story-trail .trail-stop.trail-icon.is-active rect{fill:#e8ce8c;stroke:#ffe8b5}
.story-trail .trail-stop.trail-icon.is-active .trail-leaf,
.story-trail .trail-stop.trail-icon.is-active .trail-sparkle{fill:#e8ce8c;stroke:#ffe8b5}
.story-trail .trail-stop.trail-icon.is-active .sprout-center{fill:#cfce75;stroke:#ffe8b5}
.story-trail .trail-stop.trail-icon.is-active .sprout-back{fill:#93a65e;stroke:#efd89c}
.story-trail .trail-stop.trail-icon.is-active .sprout-front{fill:#758f52;stroke:#efd89c}
.story-trail .trail-stop.trail-icon.is-active .sprout-vein{stroke:#ffe8b5}
.story-trail .trail-stop.trail-icon.is-active .sprout-seed,
.story-trail .trail-stop.trail-icon.is-active .sprout-spark{fill:#ffe4a3;stroke:#ffe8b5}

.journey-title h1 span{color:#efbc9d}

body[data-view] .app-nav a[data-view="order"]{color:#a64c2a!important;font-weight:600}
body[data-view="home"] .app-nav a[data-view="order"]{color:#efbc9d!important}

body[data-view] .app-nav a[data-view="order"]:is(:hover,:focus-visible){background:#efbc9d!important;color:#30212b!important}

/* En el segundo ejemplo, acercamos el retrato para destacar la cara. */
.gallery-pair img.gallery-face-closeup{object-position:50% 38%;transform:scale(1.35);transform-origin:50% 38%}
.gallery-pair>div:hover img.gallery-face-closeup{transform:scale(1.38)}