/* Ritmo ambiental lento; la navegación tiene un impulso breve y direccional. */
html.is-speed-travel{scroll-behavior:auto!important}
.story-hero{
 background-image:radial-gradient(ellipse at 25% 14%,rgb(200 246 90 / 10%),transparent 43%),radial-gradient(ellipse at 80% 60%,rgb(22 131 75 / 6%),transparent 48%),linear-gradient(180deg,#FFF 43%,var(--mint));
 background-size:180% 150%,180% 150%,100% 100%;
}
.story-manifesto{background-image:radial-gradient(ellipse at 25% 20%,#F7FFF5,transparent 66%),linear-gradient(115deg,var(--mint),#E0F3E8,var(--mint));background-size:170% 150%,200% 150%}
.about-section{background-image:radial-gradient(ellipse at 30% 45%,rgb(200 246 90 / 10%),transparent 55%),linear-gradient(180deg,var(--mint),#F6FAF7);background-size:180% 150%,100% 100%}
.program{background-image:linear-gradient(115deg,#17221C 6%,#12402A 35%,#1A6240 52%,#12402A 72%,#17221C);background-size:240% 150%}
.button,.contact-inner>.button,.site-header .button-small{background-image:linear-gradient(115deg,#17221C 4%,#245739 49%,#17221C 95%);background-size:230% 150%}
.story-hero .story-primary{background-image:linear-gradient(115deg,#16834B 4%,#1A8C50 49%,#08733F 95%);background-size:230% 150%}
.program .button{background-image:linear-gradient(110deg,#C8F65A,#E1FFA6,#C8F65A);background-size:230% 150%}
.button:hover,.story-hero .story-primary:hover,.contact-inner>.button:hover{background-size:230% 150%}
html[data-motion='full'] .story-hero .story-primary:hover{transform:translateY(-4px)}
html[data-motion='full'] .motion-surface{animation:ambient-stride 18s ease-in-out infinite alternate;animation-play-state:paused}
html[data-motion='full'] .button.motion-surface{animation-duration:8s}
html[data-motion='full'] .is-motion-visible.motion-surface{animation-play-state:running}
html[data-motion='full'] .step-number.motion-surface{position:relative;animation-name:step-breathe;animation-duration:5s}
html[data-page-visible='false'] .motion-surface{animation-play-state:paused!important}
@keyframes ambient-stride{from{background-position:5% 25%,20% 40%,0 0}to{background-position:95% 65%,80% 60%,0 0}}
@keyframes step-breathe{0%,100%{color:var(--green)}50%{color:#3A9C59}}

.speed-rail{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;contain:strict;opacity:0}
html.is-speed-travel[data-motion='full'] .speed-rail{opacity:1}
.speed-streak{position:absolute;top:42%;width:3px;height:23vh;border-radius:100%;background:linear-gradient(180deg,transparent,var(--green) 42%,var(--lime) 60%,transparent);opacity:0;will-change:transform,opacity;filter:drop-shadow(0 0 4px rgb(200 246 90 / 25%))}
.speed-streak:nth-child(1){left:10px;height:21vh}
.speed-streak:nth-child(2){left:24px;height:11vh;top:15%;width:2px}
.speed-streak:nth-child(3){left:38px;height:15vh;top:68%;width:2px}
.speed-streak:nth-child(4){right:10px;height:24vh;top:18%}
.speed-streak:nth-child(5){right:24px;height:13vh;top:62%;width:2px}
.speed-streak:nth-child(6){right:38px;height:18vh;top:36%;width:2px}
html.is-speed-travel[data-motion='full'] .speed-streak{animation:speed-trail var(--travel-duration,700ms) cubic-bezier(.45,0,.2,1) both}
.speed-streak:nth-child(2n){animation-delay:35ms!important}
@keyframes speed-trail{
 0%{opacity:0;transform:translateY(calc(var(--travel-direction,1) * -75vh)) scaleY(.25)}
 25%{opacity:.8}
 60%{opacity:.65;transform:translateY(0) scaleY(1)}
 100%{opacity:0;transform:translateY(calc(var(--travel-direction,1) * 75vh)) scaleY(.3)}
}
.destination-heading{position:relative}
.destination-focus{position:relative}
.destination-focus:focus-visible{outline:none}
.destination-focus:focus-visible::before{content:'';position:absolute;left:-12px;top:.12em;bottom:.1em;width:3px;border-radius:4px;background:var(--green);pointer-events:none}
.destination-heading::after{content:'';position:absolute;left:0;bottom:-10px;width:min(160px,45%);height:5px;pointer-events:none;border-radius:4px;background:linear-gradient(90deg,var(--green),var(--lime));transform-origin:left;animation:destination-line 900ms cubic-bezier(.16,1,.3,1) both}
.story-hero .destination-heading::after{left:50%;margin-left:-80px}
@keyframes destination-line{0%{opacity:0;transform:scaleX(0)}35%,65%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.1)}}
.motion-preference{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgb(22 131 75 / 24%);border-radius:999px;background:var(--mint);color:var(--ink);font-size:11px;line-height:1.4;min-height:40px;padding:9px 14px;margin-left:18px;vertical-align:middle}
.motion-preference::before{content:'';width:7px;height:7px;border-radius:50%;background:#8B9B90;flex:none}
.motion-preference[aria-pressed='true']::before{background:var(--green);box-shadow:0 0 0 3px rgb(22 131 75 / 10%)}
.motion-preference:hover{border-color:var(--green)}

/* Impulso visible al pasar o tocar: elevación corta, flecha y un reflejo puntual. */
.button::before{content:'';position:absolute;inset:-50% -65%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / 26%) 48%,rgb(255 255 255 / 8%) 53%,transparent 65%);mask-image:linear-gradient(180deg,#000 0 30%,transparent 35% 65%,#000 70% 100%);opacity:0;transform:translateX(-75%) skewX(-12deg)}
html[data-motion='full'] .button.is-boosted::before,html[data-motion='full'] .button:focus-visible::before{animation:button-light-sweep 720ms cubic-bezier(.2,.65,.2,1) both}
html[data-motion='full'] .button.is-boosted::after{height:2px;animation:button-stride 650ms var(--ease-stride) both}
@media(hover:hover){
 html[data-motion='full'] .button:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 17px 32px rgb(22 131 75 / 25%)}
 html[data-motion='full'] .story-hero .story-primary:hover{transform:translateY(-5px) scale(1.015)}
 html[data-motion='full'] .button:hover::before{animation:button-light-sweep 720ms cubic-bezier(.2,.65,.2,1) both}
 html[data-motion='full'] .button:hover>span[aria-hidden='true']{transform:translateX(11px)}
}
@keyframes button-light-sweep{0%{opacity:0;transform:translateX(-75%) skewX(-12deg)}18%{opacity:1}85%{opacity:.85}100%{opacity:0;transform:translateX(75%) skewX(-12deg)}}

/* Acceso directo, con el mismo verde y el mismo lenguaje de botones del sitio. */
.button.whatsapp-float{position:fixed;right:clamp(18px,3vw,34px);bottom:max(20px,calc(env(safe-area-inset-bottom) + 16px));z-index:60;width:auto;max-width:calc(100vw - 36px);min-height:56px;gap:17px;padding:14px 21px;border:1px solid rgb(255 255 255 / 80%);border-radius:18px;background-image:linear-gradient(110deg,#0D6137,#16834B,#0D6137);background-size:230% 150%;color:#FFF;font-size:15px;font-weight:700;box-shadow:0 8px 26px rgb(23 34 28 / 22%);transition:opacity 220ms,transform 300ms var(--ease-stride),visibility 0s}
.whatsapp-float>span{font-size:25px;line-height:1}
.whatsapp-float.is-contact-visible,body:has(dialog[open]) .whatsapp-float{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);transition:opacity 180ms,transform 180ms,visibility 0s 180ms}
.site-footer{padding-bottom:100px}
@media(max-width:760px){.button.whatsapp-float{right:16px;bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));min-height:54px;font-size:14px;padding:13px 17px;gap:14px;border-radius:16px}.site-footer{padding-bottom:100px}}
@media(max-width:760px){.speed-streak:nth-child(3),.speed-streak:nth-child(6){display:none}.speed-streak:nth-child(2){left:17px}.speed-streak:nth-child(5){right:17px}.motion-preference{display:flex;width:fit-content;margin:16px 0 0;font-size:11px;min-height:44px}}
html[data-motion='reduced'] .speed-rail{display:none}
@media(prefers-reduced-motion:reduce){html:not([data-motion='full']) .motion-surface{animation:none!important}}
@media print{.speed-rail,.motion-preference,.whatsapp-float{display:none}.motion-surface{animation:none!important}}
