/* Scoped to the El techo journey. The illustrated NIDO story remains independent. */
.viaje { position:relative; background:var(--papel); }
.viaje__vista { position:relative; overflow:hidden; }
.viaje__lienzo,.viaje__velo { display:none; }
.viaje__pintura { display:block; width:min(100%,1400px); margin:auto; }
.viaje__pintura img { width:100%; object-fit:contain; }
.viaje__cabecera { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px clamp(20px,4vw,64px); font-size:12px; }
.viaje__cabecera>span { letter-spacing:.14em; font-size:10px; }
.viaje__cabecera a,.viaje__pie a { color:var(--tinta); text-decoration:none; }
.viaje__modo { font:inherit; color:var(--tinta); background:var(--papel); border:1px solid var(--linea); border-radius:24px; padding:10px 16px; cursor:pointer; }
.viaje__relatos { max-width:1120px; margin:auto; padding:0 var(--gutter); }
.viaje__relato { padding:48px 0; max-width:540px; }
.viaje__relato h1,.viaje__relato h2 { font-size:clamp(38px,4.5vw,70px); font-weight:400; letter-spacing:-.045em; line-height:1.08; }
.viaje__relato>p:not(.rotulo) { max-width:340px; font-size:15px; line-height:1.85; }
.viaje__relato .rotulo { font-size:10px; letter-spacing:.18em; margin-bottom:28px; }
.viaje__relato>a { font-size:13px; }
.viaje__apunte { display:block; margin-top:30px; font-family:var(--f-mano); color:var(--verde-musgo); font-size:23px; transform:rotate(-3deg); transform-origin:left; }
.viaje__pie { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:24px clamp(20px,4vw,64px); font-size:11px; }
.viaje__instruccion { display:none; }
.viaje__pasos { display:flex; gap:24px; }
.viaje__pasos a { padding:12px 0; border-bottom:1px solid transparent; }
.viaje__pasos a[aria-current] { border-color:var(--terracota); color:var(--terracota-osc); }
.viaje__pasos span { margin-left:6px; }
.viaje__nota { padding-top:22px; font-size:11px; color:var(--tinta-2); }
.techo-participar h2 { font-weight:400; font-size:clamp(36px,5vw,64px); }
.techo-caminos { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin:56px 0; }
.techo-caminos>a { position:relative; text-decoration:none; color:var(--tinta); border-top:1px solid var(--linea); padding:24px 0 36px; }
.techo-caminos>a>span { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--terracota-osc); }
.techo-caminos h3 { margin-top:24px; }
.techo-caminos p { font-size:14px; color:var(--tinta-2); }
.techo-caminos b { position:absolute; right:8px; bottom:0; color:var(--terracota-osc); font-size:24px; transition:transform .2s; }
.techo-caminos a:hover b { transform:translate(3px,-3px); }
.techo-volver { font-size:13px; }
/* Activate only after a successful first GPU frame. */
.viaje--inmersivo { height:430svh; }
.viaje--inmersivo .viaje__vista { position:sticky; top:var(--alto-header); height:calc(100svh - var(--alto-header)); min-height:450px; }
.viaje--inmersivo .viaje__lienzo { display:block; position:absolute; inset:0; }
.viaje__lienzo canvas { display:block; width:100%; height:100%; }
.viaje__lienzo::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E"); }
.viaje--inmersivo .viaje__pintura { position:absolute; inset:0; opacity:0; pointer-events:none; }
.viaje--inmersivo .viaje__velo { display:block; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(243,238,227,.97) 0%,rgba(243,238,227,.84) 20%,rgba(243,238,227,0) 54%),linear-gradient(0deg,rgba(243,238,227,.95),transparent 18%,transparent 85%,rgba(243,238,227,.5)); }
.viaje--inmersivo .viaje__cabecera { position:absolute; left:0; right:0; top:0; z-index:3; }
.viaje--inmersivo .viaje__relatos { position:absolute; top:50%; left:clamp(20px,4vw,64px); width:40%; height:340px; transform:translateY(-50%); padding:0; }
.viaje--inmersivo .viaje__relato { position:absolute; inset:0; padding:0; opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .5s,transform .7s,visibility .5s; }
.viaje--inmersivo .viaje__relato.activo { opacity:1; transform:none; visibility:visible; }
.viaje--inmersivo .viaje__pie { position:absolute; bottom:0; left:0; right:0; z-index:3; }
.viaje--inmersivo .viaje__instruccion { display:block; }
.viaje__instruccion>span { display:inline-block; margin-left:12px; }
.viaje--inmersivo .viaje__progreso { position:absolute; bottom:0; left:0; height:2px; width:100%; background:var(--terracota); transform:scaleX(var(--avance,0)); transform-origin:left; }
.viaje__anotacion { position:absolute; right:5%; top:21%; max-width:190px; padding:12px 14px 12px 28px; border-top:1px solid rgba(43,36,32,.4); font-size:12px; color:var(--tinta); background:rgba(243,238,227,.88); }
.viaje__anotacion:before { content:''; position:absolute; width:5px; height:5px; border-radius:50%; background:var(--terracota); top:-3px; left:0; }
.viaje__anotacion span { display:block; font-family:var(--f-mano); font-size:23px; margin-bottom:4px; }
.viaje__anotacion a { font-size:10px; }
@media(max-width:900px) {
 .viaje__cabecera>span { display:none; }
 .viaje--inmersivo .viaje__relatos { width:50%; }
 .viaje__pasos { gap:16px; }
 .viaje__pasos span { display:none; }
 .viaje__anotacion { right:4%; top:23%; }
}
@media(max-width:699px) {
 .viaje--inmersivo { height:360svh; }
 .viaje--inmersivo .viaje__vista { min-height:540px; }
 .viaje--inmersivo .viaje__relatos { top:auto; bottom:70px; left:24px; right:24px; width:auto; height:205px; transform:none; }
 .viaje__relato h1,.viaje__relato h2 { font-size:37px; }
 .viaje__relato .rotulo { margin-bottom:12px; font-size:9px; }
 .viaje__relato>p:not(.rotulo) { font-size:13px; line-height:1.65; max-width:310px; margin-bottom:12px; }
 .viaje__apunte { display:none; }
 .viaje__relato .btn { padding:10px 16px; font-size:12px; }
 .viaje--inmersivo .viaje__velo { background:linear-gradient(0deg,#f3eee3 0%,rgba(243,238,227,.96) 26%,rgba(243,238,227,.3) 46%,transparent 65%,rgba(243,238,227,.4)); }
 .viaje--inmersivo .viaje__instruccion { display:none; }
 .viaje__pie { padding:14px 24px; font-size:10px; }
 .viaje__cabecera { padding:18px 24px; font-size:10px; }
 .viaje__modo { padding:8px 12px; }
 .viaje__anotacion { display:none; }
 .techo-caminos { grid-template-columns:1fr; gap:24px; margin:32px 0; }
}
@media(min-width:700px) and (max-height:700px) {
 .viaje--inmersivo .viaje__relatos { height:245px; }
 .viaje__relato h1,.viaje__relato h2 { font-size:44px; }
 .viaje__relato .rotulo { margin-bottom:16px; }
 .viaje__apunte { display:none; }
}
@media(prefers-reduced-motion:reduce) { .viaje__relato,.techo-caminos b { transition:none; } }