/* Recorrido por scroll: hero de la web de Tania Gómez-Chamorro */
#recorrido{ position:relative; height:880vh; background:#1c1611; color:var(--plaster, #EDE4D4); }
/* El escenario va justo debajo del menú fijo y mide lo que queda de pantalla: antes empezaba debajo del menú
   con 100vh de alto y su franja de abajo (texto y "Desliza") quedaba fuera. svh = alto real con la barra del navegador */
#recorrido .rc-stage{ position:sticky; top:var(--nav-h, 0px); height:calc(100vh - var(--nav-h, 0px)); height:calc(100svh - var(--nav-h, 0px)); 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; }
}
/* Horizontal (ordenador y tablet): texto en oscuro, que el claro se perdía sobre las zonas con sol.
   El halo claro alrededor de las letras lo mantiene legible cuando la parada tiene el fondo oscuro.
   En vertical el texto va sobre la franja oscura y sigue en claro. */
#recorrido:not(.rc-portrait) .rc-stop{
  text-shadow:0 0 2px rgba(248,242,230,.9), 0 0 14px rgba(248,242,230,.85), 0 0 34px rgba(248,242,230,.6);
}
#recorrido:not(.rc-portrait) h1, #recorrido:not(.rc-portrait) h2{ color:#2B2216; }
#recorrido:not(.rc-portrait) .rc-stop p{
  color:#2B2216; font-weight:500;
  text-shadow:0 0 1px rgba(248,242,230,1), 0 0 4px rgba(248,242,230,.95), 0 0 12px rgba(248,242,230,.9), 0 0 28px rgba(248,242,230,.7);
}
#recorrido:not(.rc-portrait) .rc-eyebrow{ color:#6E4E26; }
#recorrido:not(.rc-portrait) .rc-sub{ color:#3A2E20; }
#recorrido:not(.rc-portrait) .rc-cta a{ border-color:#2B2216; color:#2B2216; background:rgba(248,242,230,.55); text-shadow:none; }
#recorrido:not(.rc-portrait) .rc-cta a.primary{ background:var(--brass, #B9924F); border-color:var(--brass, #B9924F); color:#2B2216; }
#recorrido:not(.rc-portrait) .rc-cta a:hover{ background:#2B2216; color:#F8F2E6; }
#recorrido:not(.rc-portrait) .rc-veil{ display:none; } /* oscurecía el pie de la imagen: con texto oscuro estorba */
#recorrido:not(.rc-portrait) .rc-hint, #recorrido:not(.rc-portrait) .rc-note{
  color:#3A2E20; text-shadow:0 0 2px rgba(248,242,230,.9), 0 0 12px rgba(248,242,230,.8);
}
#recorrido:not(.rc-portrait) .rc-hint::after{ background:linear-gradient(#6E4E26, transparent); }

/* Vertical (móvil): mismo encuadre que el canvas de recorrido.js. La imagen va al doble del ancho
   de la pantalla, centrada al 36 % de alto y fundida arriba y abajo; el texto va en la franja oscura */
#recorrido.rc-portrait .rc-crystal img{
  position:absolute; left:50%; top:36%; width:var(--rc-img-w, 200vw); max-width:none; height:auto; aspect-ratio:16/9;
  transform:translate(-50%,-50%); object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}
#recorrido.rc-portrait .rc-veil{ display:none; }
#recorrido.rc-portrait .rc-stop,
#recorrido.rc-portrait .rc-s1, #recorrido.rc-portrait .rc-s3, #recorrido.rc-portrait .rc-s6{
  top:auto; right:auto; left:20px; bottom:clamp(76px,11svh,96px);
  transform:translateY(16px); text-align:left;
}
#recorrido.rc-portrait .rc-stop.on{ transform:none; }
#recorrido.rc-portrait .rc-s7{ left:50%; transform:translate(-50%,16px); text-align:center; width:86vw; }
#recorrido.rc-portrait .rc-s7.on{ transform:translate(-50%,0); }
#recorrido.rc-portrait .rc-stop p{ margin-left:0; }
#recorrido.rc-portrait .rc-s7 p{ margin:16px auto 0; }
#recorrido.rc-portrait .rc-hint{ bottom:14px; }
@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; }
}