/* Nuestro espacio (24-oct-2026) · página inmersiva de Alquimia. Propia, sin carta.css ni paginas.css: cada bloque llena la pantalla con una
   foto real, el texto va abajo a la izquierda sobre un velo, y una columna de puntos a la derecha dice en qué parte del recorrido se está.
   Estética de la casa: #0A0900 · #C9A84C · #E8DCC8, Cinzel (solo el título de la página), Cormorant Garamond (voz), Montserrat (función).
   Celular primero; en el computador el video va centrado a toda la altura sobre su póster desenfocado. Letra mínima 12 px en lo público. */
:root{
  --bg:#0A0900;--gold:#C9A84C;--gold-dark:#8A6E3A;--gold-subtle:#3A2E18;--cream:#E8DCC8;--cream-dim:#A79D8B;
  --font-title:'Cinzel',serif;--font-dish:'Cormorant Garamond',Georgia,serif;--font-ui:'Montserrat',system-ui,sans-serif;
  --fmin:12px;--alto:100vh;
}
@supports(height:100svh){:root{--alto:100svh}}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:0}
body{margin:0;background:var(--bg);color:var(--cream);font:400 15px/1.55 var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block}
a{color:inherit}
.salto{position:absolute;left:8px;top:-60px;z-index:50;padding:10px 14px;background:var(--gold);color:#1a1206;border-radius:8px;text-decoration:none;font-weight:600}
.salto:focus{top:8px}

/* menú de arriba (igual al de las otras páginas públicas; flotante sobre la portada) */
.topnav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;gap:6px;padding:14px 16px 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
.topnav::-webkit-scrollbar{display:none}
.topnav a{flex:none;font-size:max(10px,var(--fmin));letter-spacing:.18em;text-transform:uppercase;color:var(--cream);text-decoration:none;padding:6px 12px;border:1px solid transparent;border-radius:999px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.topnav a:hover,.topnav a[aria-current]{color:var(--gold);border-color:rgba(201,168,76,.45);background:rgba(10,9,0,.35)}
@media(min-width:760px){.topnav{justify-content:center;flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none;padding-top:18px}}

/* bloques a pantalla completa */
main{scroll-snap-type:y proximity}
.panel{position:relative;min-height:var(--alto);display:grid;align-items:end;overflow:hidden;isolation:isolate;scroll-snap-align:start;background:var(--bg)}
.panel .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);transition:transform 1.2s ease-out,opacity .6s ease-out;opacity:0}
.panel.vista .foto,.panel .foto.lista{opacity:1}
.panel.vista .foto{transform:none}
.velo{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,9,0,.28) 0%,rgba(10,9,0,0) 30%,rgba(10,9,0,.1) 50%,rgba(10,9,0,.82) 82%,rgba(10,9,0,.96) 100%)}
.velo-fuerte{background:linear-gradient(180deg,rgba(10,9,0,.45) 0%,rgba(10,9,0,.55) 40%,rgba(10,9,0,.94) 80%,var(--bg) 100%)}
.texto{position:relative;padding:0 88px calc(40px + env(safe-area-inset-bottom)) 20px;max-width:560px;opacity:0;transform:translateY(18px);transition:opacity .45s ease-out,transform .45s ease-out}
.panel.vista .texto{opacity:1;transform:none}
.kicker{font-family:var(--font-ui);font-size:max(11px,var(--fmin));font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.panel h2{font-family:var(--font-dish);font-weight:500;font-style:italic;font-size:clamp(30px,8.5vw,46px);line-height:1.08;color:var(--cream);margin:0 0 10px;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.panel p{margin:0;font-size:15px;line-height:1.6;color:var(--cream);max-width:44ch;text-shadow:0 1px 10px rgba(0,0,0,.7)}

/* portada con video */
.hero{align-items:end}
.fondo-video{position:absolute;inset:-24px;z-index:-3;background:#0A0900 url(/assets/espacio/video-poster.jpg) center/cover no-repeat;filter:blur(22px) brightness(.45);display:none}
.video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:var(--bg)}
.hero .velo{background:linear-gradient(180deg,rgba(10,9,0,.55) 0%,rgba(10,9,0,.05) 32%,rgba(10,9,0,.05) 55%,rgba(10,9,0,.86) 85%,rgba(10,9,0,.97) 100%)}
.hero-texto{opacity:1;transform:none;padding-bottom:calc(56px + env(safe-area-inset-bottom))}
.runas{font-family:'Noto Sans Runic',serif;font-size:13px;letter-spacing:.5em;color:var(--gold-dark);margin:0 0 14px;user-select:none}
.hero h1{font-family:var(--font-title);font-weight:600;font-size:clamp(28px,8vw,52px);letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;line-height:1.1;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.hero .sub{font-family:var(--font-dish);font-style:italic;font-size:20px;line-height:1.4;color:var(--cream);max-width:36ch}
.bajar{display:inline-flex;align-items:center;gap:10px;margin-top:22px;min-height:44px;padding:10px 18px 10px 0;color:var(--gold);text-decoration:none;font-size:max(11px,var(--fmin));letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.bajar::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg) translateY(-2px);animation:bajar 1.8s ease-in-out infinite}
@keyframes bajar{0%,100%{transform:rotate(45deg) translateY(-2px)}50%{transform:rotate(45deg) translateY(3px)}}
.video-btn{position:absolute;right:16px;top:calc(60px + env(safe-area-inset-top));z-index:5;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(201,168,76,.5);background:rgba(10,9,0,.55);color:var(--cream);font:500 max(11px,var(--fmin))/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.video-btn:focus-visible,.bajar:focus-visible,.btn-oro:focus-visible,.btn-contorno:focus-visible,.puntos a:focus-visible,.tira:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(min-width:760px){
  .fondo-video{display:block}
  .video{left:50%;right:auto;width:auto;max-width:100%;height:100%;transform:translateX(-50%);aspect-ratio:9/16;object-fit:cover;box-shadow:0 0 80px rgba(0,0,0,.7)}
  .hero-texto{padding-left:7vw}
  .texto{padding-left:7vw;padding-right:120px;max-width:720px}
}

/* rincones: fila de tres fotos que se desliza */
.rincones{align-items:start;align-content:start;padding-top:calc(64px + env(safe-area-inset-top));gap:8px;background:linear-gradient(180deg,#0A0900,#120F05 60%,#0A0900)}
.texto-arriba{padding-bottom:8px}
.tira{display:flex;gap:12px;padding:8px 20px calc(48px + env(safe-area-inset-bottom));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .45s ease-out}
.tira::-webkit-scrollbar{display:none}
.panel.vista .tira{opacity:1}
.tira figure{flex:0 0 82vw;max-width:420px;margin:0;scroll-snap-align:center;position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--gold-subtle);background:#120F05}
.tira img{width:100%;height:100%;object-fit:cover}
.tira figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(180deg,transparent,rgba(10,9,0,.85));font-family:var(--font-dish);font-style:italic;font-size:18px;color:var(--cream)}
@media(min-width:760px){.tira{padding-left:7vw;padding-right:7vw;gap:16px}.tira figure{flex:0 0 34vw;max-width:460px}}

/* cierre: botones (uno relleno, uno contorno) */
.cierre{align-items:end}
.acciones{display:flex;flex-direction:column;gap:10px;margin-top:18px;max-width:360px}
.btn-oro,.btn-contorno{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:48px;padding:12px 22px;border-radius:999px;text-decoration:none;font:600 max(11.5px,var(--fmin))/1.2 var(--font-ui);letter-spacing:.18em;text-transform:uppercase}
.btn-oro{border:1px solid #E2C46A;background:linear-gradient(180deg,#E2C46A,#C9A84C 55%,#A98A3C);color:#1a1206}
.btn-contorno{border:1px solid var(--gold);color:var(--gold);background:rgba(10,9,0,.4)}
.nota{margin-top:12px!important;font-size:max(12px,var(--fmin))!important;color:var(--cream-dim)!important;text-shadow:none!important}
@media(min-width:560px){.acciones{flex-direction:row;flex-wrap:wrap;max-width:none}}

/* puntos del recorrido */
.puntos{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:4px;opacity:0;transition:opacity .3s}
.puntos.lista{opacity:1}
.puntos a{display:grid;place-items:center;width:28px;height:28px;text-decoration:none}
.puntos a::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(232,220,200,.45);transition:transform .25s,background .25s}
.puntos a[aria-current]::before{background:var(--gold);transform:scale(1.5);box-shadow:0 0 10px rgba(201,168,76,.8)}
@media(min-width:760px){.puntos{right:22px}}

/* pie (como en las otras páginas públicas) */
footer{padding:36px 20px calc(96px + env(safe-area-inset-bottom));text-align:center;background:var(--bg)}
.f-mark{font-family:var(--font-title);font-weight:600;font-size:14px;letter-spacing:.3em;color:var(--gold)}
.f-city{font-size:max(11px,var(--fmin));letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);margin-top:4px}
.f-note{margin:18px auto 0;max-width:520px;font-size:max(12px,var(--fmin));line-height:1.5;color:var(--cream-dim)}
.f-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:18px}
.f-links a{font-size:max(11px,var(--fmin));letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);text-decoration:none;padding:6px 2px}
.f-links a:hover{color:var(--gold)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .panel .foto,.texto,.tira,.puntos a::before{transition:none;transform:none}
  .bajar::after{animation:none}
}