/* "Tu momento": full-screen, scroll-driven presentation. Brand tokens come from styles.css / BRAND.md. */
.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
html:has(body.momento-page){scroll-snap-type:none; scroll-padding-top:0}
.momento-page{background:var(--selva); color:var(--caliza)}
.momento-page main > section[class]{min-height:0; display:block; padding:0}
.m-header{background:var(--selva-deep)}
.m-header .header-in{min-height:64px}
.m-exit{display:none}
.momento-page .eyebrow{color:var(--miel-light)}

/* Intro: one idea, full screen */
.s-intro{position:relative; min-height:100svh !important; display:grid !important; place-items:center; text-align:center; padding-block:96px 120px !important}
.s-intro-in{display:flex; flex-direction:column; align-items:center; gap:18px}
.s-intro h1{font:400 clamp(44px, 9vw, 104px)/1.02 var(--serif); color:var(--caliza); max-width:14ch; text-wrap:balance}
.s-intro-sub{font-size:clamp(17px, 2.2vw, 21px); line-height:1.6; color:#C9D3CB; max-width:44ch}
.s-scroll{position:absolute; left:50%; bottom:calc(32px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; gap:8px; align-items:center; font-size:12.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:#B0BEB5; text-decoration:none}
@media (prefers-reduced-motion: no-preference){
  .s-scroll span[aria-hidden]{animation:s-bob 1.8s ease-in-out infinite}
}
@keyframes s-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}

/* Picker */
.s-pick{min-height:100svh !important; display:grid !important; align-content:center; padding-block:96px 72px !important}
.s-pick h2{font:400 clamp(38px, 7vw, 72px)/1.05 var(--serif); color:var(--caliza)}
.s-pick-sub{margin-top:10px; font-size:18px; color:#C9D3CB}
.m-grid{display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:32px}
@media (min-width:760px){ .m-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px} }
.m-profile{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; background:rgba(239,234,223,.05); border:1.5px solid rgba(239,234,223,.16); border-radius:var(--radius); padding:20px 18px 22px; font:inherit; color:inherit; cursor:pointer; transition:border-color .2s ease, background-color .2s ease, transform .2s ease}
.m-profile:hover{border-color:var(--miel); background:rgba(239,234,223,.09); transform:translateY(-2px)}
.m-profile-mark{width:88px; height:66px; margin-bottom:6px}
.m-profile-name{font-weight:700; font-size:17.5px; color:var(--caliza); line-height:1.25}
.m-profile-hint{font-size:14.5px; color:#BFCBC2; line-height:1.4}

/* The presentation: a tall track with one pinned full-screen stage */
.s-track{position:relative; height:calc(5 * 100svh)}
.s-stage{position:sticky; top:0; height:100svh; overflow:hidden}
.s-top{position:absolute; left:0; right:0; top:calc(64px + env(safe-area-inset-top,0px) + 14px); z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px}
.m-back{background:none; border:0; padding:8px 0; font:600 15px/1 var(--sans); color:#C9D3CB; cursor:pointer}
.m-back:hover{color:var(--caliza); text-decoration:underline; text-underline-offset:4px}
.m-profile-label{font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--miel-light)}
.s-scenes{position:absolute; inset:0}
.scene{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding-top:calc(64px + 56px); padding-bottom:72px}
.scene-body{width:100%; max-width:920px; display:flex; flex-direction:column; gap:18px}
.scene-mark{width:min(300px, 62vw); height:auto; overflow:visible; margin-bottom:6px}
/* The stage's ceiba grows from the ground, then the people arrive under it. */
.scene-mark .mk-tree{transform-box:view-box; transform-origin:60px 102px}
@media (prefers-reduced-motion: no-preference){
  .scene-mark .mk-tree{transform:scale(.15); opacity:0}
  .scene-mark .mk-people{opacity:0; transform:translateY(6px)}
  .scene.in .scene-mark .mk-tree{animation:mk-grow 1.1s cubic-bezier(.2,.9,.3,1.12) .1s forwards}
  .scene.in .scene-mark .mk-people{animation:mk-arrive .6s ease .95s forwards}
}
@keyframes mk-grow{from{transform:scale(.15); opacity:0} 20%{opacity:1} to{transform:scale(1); opacity:1}}
@keyframes mk-arrive{to{opacity:1; transform:none}}
.scene-label{font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--miel-light)}
.scene-title{font:400 clamp(38px, 7.2vw, 84px)/1.05 var(--serif); color:var(--caliza); text-wrap:balance}
.scene-q{font-size:clamp(30px, 5.4vw, 60px)}
.scene-text{font-size:clamp(18px, 2.3vw, 23px); line-height:1.6; color:#D5DDD6; max-width:54ch}
.scene-big{font:400 clamp(88px, 20vw, 210px)/.95 var(--serif); color:var(--miel-light); font-variant-numeric:tabular-nums; letter-spacing:-.015em}
.scene-answers{display:flex; flex-direction:column; gap:10px; max-width:620px; margin-top:6px}
.scene-answer{text-align:left; min-height:60px; padding:14px 20px; border-radius:14px; border:1.5px solid rgba(239,234,223,.28); background:rgba(239,234,223,.05); font:600 18px/1.3 var(--sans); color:var(--caliza); cursor:pointer; transition:background-color .2s ease, border-color .2s ease, color .2s ease}
.scene-answer:hover{border-color:var(--miel)}
.scene-answer[aria-pressed="true"]{background:var(--miel); border-color:var(--miel); color:var(--on-miel)}
.scene-hint{font-size:14.5px; color:#B0BEB5}
.scene-reflect{font-size:clamp(18px, 2.2vw, 21px); line-height:1.55; color:var(--caliza); border-left:3px solid var(--miel); padding:4px 0 4px 18px; max-width:56ch}
.scene-plan{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.scene-plan li{display:flex; gap:16px; align-items:flex-start; font:400 clamp(24px, 3.6vw, 40px)/1.2 var(--serif); color:var(--caliza)}
.scene-plan li::before{content:""; flex:none; width:12px; height:12px; margin-top:.45em; border-radius:50%; background:var(--miel)}
.scene-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.btn-line-light{background:transparent; color:var(--caliza); border-color:rgba(239,234,223,.45)}
.btn-line-light:hover{border-color:var(--caliza)}
.scene-body > .btn{align-self:flex-start}

/* Source line at the bottom of every scene */
.s-foot{position:absolute; left:0; right:0; bottom:calc(20px + env(safe-area-inset-bottom,0px)); padding-inline:var(--gutter); max-width:1120px; margin:0 auto; font-size:12.5px; line-height:1.5; color:#B0BEB5}
.s-foot a{color:#C9D3CB; text-underline-offset:3px}
.s-foot a:hover{color:var(--caliza)}

/* Content rises in (staggered) the first time a scene becomes active */
@media (prefers-reduced-motion: no-preference){
  .scene .rise{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * .12s)}
  .scene.in .rise{opacity:1; transform:none}
}

/* Progress rail */
.s-rail{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:20; display:flex; flex-direction:column; gap:12px}
.s-dot{width:12px; height:12px; padding:0; border-radius:50%; border:1.5px solid rgba(239,234,223,.5); background:transparent; cursor:pointer; transition:background-color .25s ease, transform .25s ease}
.s-dot[aria-current="step"]{background:var(--miel); border-color:var(--miel); transform:scale(1.25)}
.s-rail{opacity:0; pointer-events:none; transition:opacity .3s ease}
.s-rail.show{opacity:1; pointer-events:auto}
@media (max-width:600px){
  .s-rail{right:6px; gap:10px}
  .s-dot{width:9px; height:9px}
  .scene{padding-bottom:96px}
}

/* Sources */
.s-sources{background:var(--selva-deep); padding-block:clamp(56px, 9vw, 96px) !important}
.s-sources h2{font:400 clamp(32px, 5vw, 48px)/1.1 var(--serif); color:var(--caliza)}
.s-sources-sub{margin-top:10px; color:#C9D3CB; font-size:17px; max-width:60ch}
.s-sources-list{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.s-source{border:1px solid rgba(239,234,223,.16); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:8px}
.s-source-name{font-weight:700; color:var(--caliza); font-size:16px}
.s-source-date{font-size:13.5px; color:var(--miel-light)}
.s-source-used{font-size:15px; color:#C9D3CB; line-height:1.5}
.s-source a{margin-top:auto; color:var(--caliza); font-weight:600; font-size:15px; text-underline-offset:4px}
.s-disclaimer{margin-top:28px; font-size:13.5px; color:#B0BEB5}
.momento-page .site-footer{background:#10291F}

/* Reduced motion: no pinning, scenes simply stack */
@media (prefers-reduced-motion: reduce){
  .s-track{height:auto}
  .s-stage{position:relative; height:auto; overflow:visible}
  .s-top{position:relative; top:auto; padding-top:84px}
  .s-scenes{position:relative}
  .scene{position:relative; min-height:100svh}
  .s-rail{display:none}
}

/* Presenter mode (?presentar): no selling chrome, even bigger type, click/arrows move one screen */
.presenter .m-cta, .presenter .site-footer, .presenter .skip{display:none}
.presenter .m-exit{display:inline-flex; align-items:center; padding:0 14px; text-decoration:none; font-size:13px}
.presenter .m-fs{padding:0 14px; font-size:13px}
.presenter .scene-body{max-width:1100px}
.presenter .scene-title{font-size:clamp(44px, 7vw, 100px)}
.presenter .scene-text{font-size:clamp(20px, 2.5vw, 28px)}
.presenter .s-stage{cursor:pointer}
@media (max-width:560px){ .presenter .m-exit{display:none} }