/* Recorrido por scroll: hero de la web de Tania Gómez-Chamorro */
#recorrido{ position:relative; height:880vh; background:#1c1611; color:var(--plaster, #EDE4D4); }
#recorrido .rc-stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
#recorrido canvas{ display:block; width:100%; height:100%; }
#recorrido .rc-crystal{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; pointer-events:none; }
#recorrido .rc-crystal img{ width:100%; height:100%; object-fit:cover; display:block; }
#recorrido .rc-veil{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,22,17,.28) 0%, rgba(28,22,17,0) 28%, rgba(28,22,17,0) 62%, rgba(28,22,17,.5) 100%); }
#recorrido .rc-loader{ position:absolute; top:0; left:0; width:100%; height:2px; background:var(--brass, #B9924F); transform-origin:left; transform:scaleX(0); transition:opacity .6s .4s; z-index:5; }
#recorrido.rc-ready .rc-loader{ opacity:0; }

#recorrido .rc-copy{ position:absolute; inset:0; pointer-events:none; z-index:3; }
#recorrido .rc-stop{ position:absolute; opacity:0; transform:translateY(16px); transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); max-width:min(560px, 84vw); text-shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.35); }
#recorrido .rc-stop.on{ opacity:1; transform:none; }
#recorrido .rc-stop.on .rc-cta{ pointer-events:auto; }
#recorrido .rc-eyebrow{ font-family:'Space Mono', monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-light, #D8BC85); margin:0 0 12px; white-space:nowrap; }
#recorrido h1, #recorrido h2{ font-family:'Instrument Serif', Georgia, serif; font-weight:400; line-height:1; margin:0; color:#F8F2E6; }
#recorrido h1{ font-size:clamp(2.6rem, 7vw, 6rem); }
#recorrido h2{ font-size:clamp(2rem, 4.6vw, 3.8rem); }
#recorrido .rc-stop p{ font-family:'Archivo', system-ui, sans-serif; font-weight:300; font-size:clamp(.95rem, 1.2vw, 1.15rem); line-height:1.55; color:rgba(248,242,230,.86); margin:16px 0 0; max-width:38ch; }
#recorrido .rc-sub{ font-family:'Space Mono', monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(248,242,230,.75); margin-top:14px; }

#recorrido .rc-s0{ left:clamp(20px,5vw,64px); bottom:clamp(64px,10vh,120px); }
#recorrido .rc-s1{ right:clamp(20px,5vw,64px); top:50%; transform:translateY(calc(-50% + 16px)); text-align:right; }
#recorrido .rc-s1.on{ transform:translateY(-50%); }
#recorrido .rc-s1 p{ margin-left:auto; }
#recorrido .rc-s2{ left:clamp(20px,5vw,64px); bottom:clamp(64px,10vh,120px); }
#recorrido .rc-s3{ left:clamp(20px,5vw,64px); top:50%; transform:translateY(calc(-50% + 16px)); }
#recorrido .rc-s3.on{ transform:translateY(-50%); }
#recorrido .rc-s4{ right:clamp(20px,5vw,64px); bottom:clamp(64px,10vh,120px); text-align:right; }
#recorrido .rc-s4 p{ margin-left:auto; }
#recorrido .rc-s5{ left:clamp(20px,5vw,64px); bottom:clamp(64px,10vh,120px); }
#recorrido .rc-s6{ left:clamp(20px,5vw,64px); top:50%; transform:translateY(calc(-50% + 16px)); }
#recorrido .rc-s6.on{ transform:translateY(-50%); }
#recorrido .rc-s7{ left:50%; bottom:clamp(64px,10vh,120px); transform:translate(-50%, 16px); text-align:center; }
#recorrido .rc-s7.on{ transform:translate(-50%, 0); }
#recorrido .rc-s7 p{ margin:16px auto 0; }

#recorrido .rc-cta{ display:inline-flex; gap:12px; margin-top:24px; flex-wrap:wrap; justify-content:center; }
#recorrido .rc-cta a{ font-family:'Archivo', system-ui, sans-serif; font-size:.85rem; text-decoration:none; padding:12px 22px; border-radius:999px; border:1px solid rgba(248,242,230,.6); color:#F8F2E6; transition:background .3s, color .3s; }
#recorrido .rc-cta a.primary{ background:var(--brass, #B9924F); border-color:var(--brass, #B9924F); color:#2B2216; }
#recorrido .rc-cta a:hover{ background:#F8F2E6; color:#2B2216; }

#recorrido .rc-hint{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); font-family:'Space Mono', monospace; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(248,242,230,.8); display:flex; flex-direction:column; align-items:center; gap:10px; transition:opacity .6s; z-index:4; }
#recorrido .rc-hint::after{ content:""; width:1px; height:34px; background:linear-gradient(var(--brass-light, #D8BC85), transparent); animation:rc-drop 1.8s ease-in-out infinite; }
#recorrido .rc-hint.off{ opacity:0; }
@keyframes rc-drop{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

#recorrido .rc-note{ position:absolute; right:clamp(20px,5vw,64px); bottom:18px; font-family:'Space Mono', monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(248,242,230,.55); z-index:4; }

/* progreso lateral */
#recorrido .rc-prog{ position:absolute; right:clamp(14px,2.4vw,30px); top:50%; transform:translateY(-50%); width:1px; height:120px; background:rgba(248,242,230,.25); z-index:4; }
#recorrido .rc-prog i{ display:block; width:100%; height:100%; background:var(--brass-light, #D8BC85); transform-origin:top; transform:scaleY(var(--rc-p, 0)); }

@media (max-width:700px){
  #recorrido{ height:760vh; }
  #recorrido .rc-stop{ max-width:86vw; }
  #recorrido .rc-s1, #recorrido .rc-s4{ text-align:left; right:auto; left:20px; }
  #recorrido .rc-s1 p, #recorrido .rc-s4 p{ margin-left:0; }
  #recorrido .rc-s0, #recorrido .rc-s2, #recorrido .rc-s5, #recorrido .rc-s7, #recorrido .rc-s4{ bottom:96px; }
  #recorrido .rc-note{ display:none; }
  #recorrido .rc-prog{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  #recorrido{ height:auto; }
  #recorrido .rc-stage{ position:relative; height:100vh; }
  #recorrido .rc-stop{ transition:none; }
  #recorrido .rc-s0{ opacity:1; transform:none; }
  #recorrido .rc-hint::after{ animation:none; }
}