/* ══════════════════════════════════════════════════════════════ ESTILOS COMUNES — los cargan index.html y phaedrus.html. Tocar aquí cambia los dos sitios. ══════════════════════════════════════════════════════════════ */ :root { --oro: #c5a35d; --oro-light: #f5e8a8; --oro-dim: #7a5820; --deep: #000; --violet: #0d0033; --trans: 1.3s cubic-bezier(0.85, 0, 0.15, 1); } @view-transition { navigation: auto; } @font-face { font-family: 'Futurist Fixed-width'; src: url('fonts/FUTRFW.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Vinletha Gyldham'; src: url('fonts/VINLETHA_GYLDHAM.otf') format('opentype'); font-weight: normal; font-style: normal; } .vessence-word { font-family:'Futurist Fixed-width', 'Cinzel', serif; background:linear-gradient(90deg, rgba(80,80,80,0.7) 0%, rgba(150,150,150,0.8) 18%, rgba(255,255,255,1) 42%, rgba(255,255,255,1) 58%, rgba(150,150,150,0.8) 82%, rgba(80,80,80,0.7) 100% ); background-size:320% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:supernovaPass 10s ease-in-out infinite; will-change: background-position; } .vessence-script { font-family:'Vinletha Gyldham', 'Cormorant Garamond', serif; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } body, html { width:100%; height:100%; background:#000; color:#fff; font-family:'Cormorant Garamond', serif; overflow:hidden; -webkit-font-smoothing:antialiased; } /* GRANO */ #grain { position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.04; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEVYaGgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABH6S7CAAAABnRSTlMAMzMzMzPMm7BeAAAAtklEQVQ4y2NgYGRiYmZhYmZmoCOAsZGRmZGFmYWBjgDGRkZmRhZmFgY6AhgbGZkZWZhZGOgIYGxkZGZkYWZhoCOAsZGRmZGFmYWBjgDGRkZmRhZmFgY6AhgbGZkZWZhZGOgIYGxkZGZkYWZhoCOAsZGRmZGFmYWBjgDGRkZmRhZmFgY6AhgbGZkZWZhZGOgIYGxkZGZkYWZhoCOAsZGRmZGFmYWBjgDGRkZmRhZmFgY6AhgbGZkZWZhZGEA3Yf8PrG26GgAAAABJRU5ErkJggg=="); } /* VÍDEO FONDO */ #bg-video { position:fixed; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.32); opacity:1; pointer-events:none; display:block; } /* EFECTO CATALEJO — transición entre dimensiones */ #scope { position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0; background:radial-gradient(ellipse at center, transparent 0%, transparent 28%, rgba(13,0,51,0.55) 52%, rgba(13,0,51,0.92) 72%, rgba(6,0,20,0.98) 100% ); transition:opacity 0.55s ease; } #scope.show { opacity:1; } /* VIÑETA PERMANENTE */ #vignette { position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at center, transparent 18%, rgba(0,0,0,0.45) 62%, rgba(0,0,0,0.94) 100%); } /* ── NAV SUPERIOR ── */ nav.top-nav { position:fixed; top:0; left:0; right:0; z-index:500; display:flex; justify-content:space-between; align-items:center; padding:32px 56px; font-family:'Cinzel', serif; pointer-events:auto; } /* IDIOMA */ .nav-lang { display:flex; gap:0; align-items:center; } .lang-btn { font-family:'Cinzel', serif; font-size:1.19rem; letter-spacing:0.4em; color:rgba(255,255,255,0.28); background:none; border:none; cursor:pointer; text-transform:uppercase; padding:4px 10px; transition:color 0.4s ease; } .lang-btn.active { color:var(--oro); } .lang-btn:hover { color:rgba(255,255,255,0.7); } .lang-sep { width:1px; height:11px; background:rgba(255,255,255,0.15); margin:0 2px; } /* LOGO CENTRO */ @keyframes vesEco1 { 0%,100% { opacity:0; transform:translate(-50%,-50%) scale(1.4); } 40%,60% { opacity:0.18; transform:translate(-50%,-50%) scale(1.5); } } @keyframes vesEco2 { 0%,100% { opacity:0; transform:translate(-50%,-50%) scale(1.9); } 40%,60% { opacity:0.1; transform:translate(-50%,-50%) scale(2.0); } } @keyframes vesEco3 { 0%,100% { opacity:0; transform:translate(-50%,-50%) scale(2.5); } 40%,60% { opacity:0.06; transform:translate(-50%,-50%) scale(2.6); } } @keyframes vesEco4 { 0%,100% { opacity:0; transform:translate(-50%,-50%) scale(3.2); } 40%,60% { opacity:0.04; transform:translate(-50%,-50%) scale(3.3); } } .nav-logo { position:absolute; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; text-decoration:none; } .nav-logo-eco { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; fill:none; } .nav-logo-eco.e1 { animation:vesEco1 4s ease-in-out infinite; animation-delay:0s; } .nav-logo-eco.e2 { animation:vesEco2 4s ease-in-out infinite; animation-delay:0.6s; } .nav-logo-eco.e3 { animation:vesEco3 4s ease-in-out infinite; animation-delay:1.2s; } .nav-logo-eco.e4 { animation:vesEco4 4s ease-in-out infinite; animation-delay:1.8s; } .nav-logo:hover .nav-logo-eco { animation-play-state:paused; opacity:0; } .nav-logo-mark { height:46px; } .nav-logo-word { font-family:'Futurist Fixed-width','Cinzel',serif; font-size:17px; letter-spacing:0.16em; color:var(--oro); line-height:1; } /* DERECHA: audio + sociales */ .nav-right { display:flex; gap:20px; align-items:center; } /* AUDIO ON/OFF */ #audio-btn { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.3); display:flex; align-items:center; gap:7px; font-family:'Cinzel', serif; font-size:1.09rem; letter-spacing:0.35em; transition:color 0.4s ease; padding:0; } #audio-btn:hover { color:rgba(255,255,255,0.7); } #audio-btn.on { color:var(--oro); } #audio-btn svg { width:24px; height:24px; } .nav-sep-v { width:1px; height:14px; background:rgba(255,255,255,0.1); } .nav-social { display:flex; gap:18px; align-items:center; } .nav-social a { color:rgba(255,255,255,0.28); text-decoration:none; transition:color 0.4s ease; display:flex; align-items:center; } .nav-social a:hover { color:var(--oro); } /* ── LINGOTES LATERALES ── */ .side-nav { position:fixed; right:48px; top:calc(68% + 30px); transform:translateY(-50%); z-index:500; display:flex; flex-direction:column; gap:clamp(10px, 2vh, 24px); pointer-events:auto; } .dim-bar { display:flex; align-items:center; gap:14px; cursor:pointer; flex-direction:row-reverse; } .dim-bar-line { height:3px; width:26px; background:linear-gradient(90deg, var(--oro-dim), var(--oro), var(--oro-light), var(--oro-dim)); background-size:200% auto; transition:width 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease; box-shadow:0 0 5px rgba(197,163,93,0.1); } .dim-bar:hover .dim-bar-line { width:40px; filter:brightness(1.3); } .dim-bar.active .dim-bar-line { width:66px; filter:brightness(1.7); box-shadow:0 0 14px rgba(197,163,93,0.65), 0 0 4px rgba(197,163,93,1); } .dim-bar-label { font-family:'Cinzel', serif; font-size:0.91rem; letter-spacing:0.38em; color:rgba(255,255,255,0.32); text-transform:uppercase; white-space:nowrap; transition:color 0.4s ease; margin-left:0.38em; } .dim-bar.active .dim-bar-label { color:rgba(197,163,93,0.72); } /* Ocultar lingotes cuando orrey está activo */ .orrey-active .side-nav { opacity:0; pointer-events:none; transition:opacity 0.3s ease; } .side-nav { transition:opacity 0.3s ease; } .scroll-hint { position:fixed; bottom:40px; left:50%; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0.5; pointer-events:none; animation: hintPulse 3.5s ease-in-out infinite; } /* ── BANDA DE ACCIÓN de la ficha ── */ #disc-banda { display:flex; flex-shrink:0; width:100%; } /* La mitad de encargos SOLO existe en Soundtracks. La especificidad va alta a propósito: antes lo ocultaba con un id suelto y una regla posterior del mismo peso lo volvía a mostrar en todos los grupos. */ #disc-ficha #disc-banda #disc-encargo { display:none; } #disc-ficha[data-grupo="bandas_sonoras"] #disc-banda #disc-encargo { display:block; } #disc-ficha[data-grupo="bandas_sonoras"] #disc-buy-btn { border-right:1px solid rgba(197,163,93,0.28); } #disc-encargo { letter-spacing:0.24em; text-indent:0.24em; font-size:clamp(11px, 0.8vw, 17px); } #disc-encargo:hover { letter-spacing:0.3em; text-indent:0.3em; } /* ── LA FORJA: enlace propio de cada miembro ── */ .member-link { display:block; margin-top:1.2vh; padding:1.1vh 1vw; text-align:center; font-family:'Cinzel',serif; font-size:clamp(13px, 1vw, 21px); letter-spacing:0.2em; text-indent:0.2em; text-transform:uppercase; color:var(--oro-light); text-decoration:none; text-shadow:0 0 10px rgba(197,163,93,0.35); border:1px solid rgba(197,163,93,0.35); background:rgba(197,163,93,0.05); transition:background 0.3s ease, letter-spacing 0.3s ease, border-color 0.3s ease; } .member-link:hover { background:rgba(197,163,93,0.16); border-color:rgba(197,163,93,0.7); letter-spacing:0.34em; text-indent:0.34em; } /* ── CONTACTO: dos mitades del mismo peso ── */ #cont-mitades { display:flex; width:min(1500px, 84vw); margin:1vh auto 0; align-items:stretch; } .cont-lado { flex:1 1 50%; min-width:0; display:flex; flex-direction:column; gap:1.4vh; padding:0 3vw; } #cont-encargos { border-left:1px solid rgba(197,163,93,0.18); } .cont-lado-nombre { font-family:'Cinzel',serif; font-size:clamp(18px, 1.5vw, 30px); letter-spacing:0.16em; color:var(--oro-light); text-shadow:0 0 12px rgba(197,163,93,0.32); } .cont-lado-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(13px, 1vw, 20px); color:rgba(255,255,255,0.45); line-height:1.6; margin:0 0 0.6vh; } .cont-rotulo { font-family:'Cinzel',serif; font-size:clamp(10px, 0.6vw, 15px); letter-spacing:0.5em; color:var(--oro); text-transform:uppercase; } .cont-encargos-nombre { font-family:'Cinzel',serif; font-size:clamp(16px, 1.3vw, 26px); letter-spacing:0.16em; color:var(--oro-light); text-shadow:0 0 14px rgba(197,163,93,0.4); } .cont-encargos-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(13px, 1vw, 20px); color:rgba(255,255,255,0.5); line-height:1.6; margin:0; } .cont-oficios { display:flex; flex-wrap:wrap; gap:0.5vh 1vw; font-family:'Cormorant Garamond',serif; font-size:clamp(12px, 0.85vw, 17px); color:rgba(255,255,255,0.35); } .cont-oficios span:not(:last-child)::after { content:' ·'; color:rgba(197,163,93,0.4); } .cont-encargos-btn { margin-top:0.6vh; padding:1.1vh 1.4vw; text-align:center; font-family:'Cinzel',serif; font-size:clamp(11px, 0.75vw, 17px); letter-spacing:0.34em; text-indent:0.34em; text-transform:uppercase; text-decoration:none; color:var(--oro-light); text-shadow:0 0 8px rgba(197,163,93,0.28); background:none; border:1px solid rgba(197,163,93,0.28); align-self:flex-start; transition:background 0.35s ease, letter-spacing 0.35s ease, text-shadow 0.35s ease; } .cont-encargos-btn:hover { background:rgba(197,163,93,0.10); letter-spacing:0.42em; text-indent:0.42em; text-shadow:0 0 14px rgba(197,163,93,0.6); } .cont-encargos-ver { align-self:flex-start; font-family:'Cormorant Garamond',serif; font-size:clamp(12px, 0.9vw, 18px); color:rgba(255,255,255,0.4); text-decoration:none; transition:color 0.3s ease; } .cont-encargos-ver:hover { color:var(--oro); } .scroll-hint .hint-group { pointer-events:auto; cursor:pointer; padding:4px 14px; transition: filter 0.3s ease, transform 0.3s ease; } .scroll-hint .hint-group:hover { filter: brightness(1.6) drop-shadow(0 0 6px rgba(197,163,93,0.6)); transform: scale(1.15); } @keyframes hintPulse { 0%, 100% { opacity: 0.35; transform: translateX(-50%) translateY(0); } 50% { opacity: 0.8; transform: translateX(-50%) translateY(-6px); } } .hint-group { display: flex; flex-direction: column; align-items: center; } .arrow-db { width:14px; height:14px; border-right:2px solid var(--oro); border-bottom:2px solid var(--oro); transform:rotate(45deg); filter: drop-shadow(0 0 5px rgba(197,163,93,0.4)); } .arrow-up { transform:rotate(-135deg); margin-bottom: -4px; } .arrow-down { transform:rotate(45deg); margin-top: -4px; } /* ── TIPOGRAFÍAS ── */ /* ORO — profundo, muy lento */ .title-gold { font-family:'Cinzel', serif; font-weight:900; background:linear-gradient(90deg, var(--oro-dim) 0%, var(--oro-dim) 12%, var(--oro) 32%, var(--oro-light) 50%, var(--oro) 68%, var(--oro-dim) 88%, var(--oro-dim) 100% ); background-size:400% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:goldDeep 28s ease-in-out infinite; font-size:clamp(28px, 5.88vw, 72px); text-align:center; margin-bottom:0; filter:drop-shadow(0 4px 18px rgba(0,0,0,0.85)) drop-shadow(0 2px 6px rgba(0,0,0,1)); will-change: background-position; } @keyframes goldDeep { 0% { background-position:0% center; } 50% { background-position:100% center; } 100%{ background-position:0% center; } } /* SUPERNOVA LUNAR */ .supernova-silver { font-family:'Cinzel', serif; text-transform:uppercase; background:linear-gradient(90deg, rgba(80,80,80,0.7) 0%, rgba(150,150,150,0.8) 18%, rgba(255,255,255,1) 42%, rgba(255,255,255,1) 58%, rgba(150,150,150,0.8) 82%, rgba(80,80,80,0.7) 100% ); background-size:320% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:supernovaPass 10s ease-in-out infinite; will-change: background-position; } @keyframes supernovaPass { 0% { background-position:150% center; } 45% { background-position:0% center; } 55% { background-position:0% center; } 100%{ background-position:150% center; } } @keyframes watchBlink { 0%,100% { color:rgba(197,163,93,0); } 45%,55% { color:rgba(197,163,93,0.75); } } .watch-blink { animation:watchBlink 3.5s ease-in-out infinite; } /* ── NORIA ── */ #viewport { position:fixed; inset:0; z-index:10; perspective:3200px; contain: strict; } .vagon-container { width:100%; height:100%; position:relative; transform-style:preserve-3d; } .vagon { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:14vh 14vw; transition:transform var(--trans), opacity var(--trans); backface-visibility:hidden; pointer-events:none; opacity:0; will-change: transform, opacity; } /* Fondo azul violáceo para todos excepto vagón 0 */ .vagon:not(#vagon-0)::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(13,0,51,0.82) 0%, rgba(6,0,28,0.88) 100%); z-index:0; pointer-events:none; } .vagon:not(#vagon-0):not(#vagon-2):not(#vagon-6):not(#vagon-7) > * { position:relative; z-index:2; } .vagon.active { transform:translateY(0) translateZ(0) rotateX(0deg); opacity:1; z-index:10; pointer-events:auto; } .vagon.past { transform:translateY(-115%) translateZ(-3200px) rotateX(22deg); opacity:0; } .vagon.future { transform:translateY(115%) translateZ(-3200px) rotateX(-22deg); opacity:0; } /* OPTIMIZACIÓN: pausar todas las animaciones en vagones fuera de vista */ .vagon.past *, .vagon.future * { animation-play-state: paused !important; } /* label-silver */ .label-silver { font-size:clamp(16px, 0.975vw, 26px); letter-spacing:0.55em; margin-bottom:0; } .desc-silver { font-size:clamp(16px, 1.44vw, 26px); font-style:italic; max-width:900px; text-align:center; line-height:1.65; white-space:nowrap; background:linear-gradient(90deg, rgba(65,65,65,0.8) 0%, rgba(130,130,130,0.85) 22%, rgba(255,255,255,0.95) 46%, rgba(255,255,255,0.95) 54%, rgba(130,130,130,0.85) 78%, rgba(65,65,65,0.8) 100% ); background-size:340% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:supernovaPass 14s ease-in-out infinite; animation-delay:4s; margin-top:0; } /* PLEIADES centrado */ .vagon-pleiades { justify-content:center; } /* ── ONDAS (vagón nuevo) ── */ #vagon-6 { padding:0 !important; overflow:hidden; } .ondas-bg { position:absolute; inset:0; z-index:0; pointer-events:none; background:#000; } .ondas-layer { position:absolute; inset:0; background-size:cover; background-position:top; background-repeat:no-repeat; } .ondas-layer-base { filter:brightness(0.75) saturate(1.1); } .ondas-layer-off { background-image:url(ondas4.png); opacity:1; transition:opacity 1.2s ease; } .ondas-layer-on { background-image:url(ondas.jpg); opacity:0; transition:opacity 1.2s ease; } .ondas-layer-boost { background-image:url(ondas24.png); opacity:0; transition:opacity 1.2s ease; } .ondas-layer-needle{ background-image:url(dial.png); mix-blend-mode:screen; opacity:0; transition:opacity 0.6s ease, transform 0.4s ease; } .ondas-layer-wave { mix-blend-mode:screen; opacity:0; transition:opacity 0.15s linear; } .ondas-layer-wave1 { background-image:url(wave1.png); } .ondas-layer-wave2 { background-image:url(wave2.png); } .ondas-layer-wave.show { opacity:0.18; } #vagon-6::before { background:linear-gradient(135deg, rgba(13,0,51,0.45) 0%, rgba(6,0,28,0.5) 100%) !important; } .ondas-root { position:relative; z-index:2; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; padding:4vh 12vw; } /* CÓDIGO de 4 cifras: centrado, abajo del todo */ /* Ficha de escucha. Va ARRIBA, sobre la madera lisa que hay bajo el título, no sobre el dial: ahí la imagen está cargadísima y el texto no se leía. Fondo oscuro real, no transparente, por lo mismo. */ .ondas-ficha { position:absolute; top:26vh; left:50%; transform:translateX(-50%) translateY(10px); z-index:500; pointer-events:none; max-width:min(560px, 70vw); padding:2vh 3vw; border:1px solid rgba(197,163,93,0.35); background:rgba(8,4,2,0.82); box-shadow:0 0 40px rgba(0,0,0,0.75); font-family:'Cinzel', serif; text-align:center; opacity:0; transition:opacity 0.8s ease, transform 0.8s ease; } .ondas-ficha.show { opacity:1; transform:translateX(-50%) translateY(0); } .ondas-ficha-rotulo { font-size:clamp(9px, 0.55vw, 13px); letter-spacing:0.4em; text-transform:uppercase; color:rgba(197,163,93,0.6); margin-bottom:1.2vh; } .ondas-ficha-titulo { font-size:clamp(15px, 1.15vw, 24px); letter-spacing:0.16em; color:var(--oro-light); text-shadow:0 0 14px rgba(197,163,93,0.4); } .ondas-ficha-linea { font-family:'Cormorant Garamond', serif; font-size:clamp(13px, 0.95vw, 19px); font-style:italic; margin-top:0.9vh; color:rgba(255,255,255,0.65); } .ondas-ficha-fecha { font-size:clamp(12px, 0.85vw, 18px); letter-spacing:0.32em; margin-top:1.1vh; color:var(--oro); } .ondas-code-wrap { position:absolute; bottom:5vh; left:50%; transform:translateX(-50%); z-index:500; display:flex; flex-direction:column; gap:1vh; align-items:center; font-family:'Cinzel', serif; pointer-events:none; opacity:0; transition:opacity 0.6s ease; } .ondas-code-wrap.show { pointer-events:auto; opacity:1; } .ondas-code-label { font-size:1.1rem; letter-spacing:0.35em; text-transform:uppercase; color:rgba(255,255,255,0.45); text-align:center; } .ondas-code-inputs { display:flex; gap:1vw; } .ondas-code-digit { width:3.4rem; height:4rem; text-align:center; font-family:'Cinzel', serif; font-size:2rem; color:var(--oro-light); background:rgba(5,0,20,0.6); border:1px solid rgba(197,163,93,0.35); border-radius:3px; outline:none; transition:border-color 0.3s, box-shadow 0.3s; } .ondas-code-digit:focus { border-color:var(--oro-light); box-shadow:0 0 10px rgba(197,163,93,0.4); } .ondas-code-digit.error { border-color:#c0392b; box-shadow:0 0 10px rgba(192,57,43,0.5); } /* Títulos: más abajo sobre el frontal */ .ondas-titles { display:flex; flex-direction:column; align-items:center; gap:0.3vh; margin-top:calc(16vh + 200px); } .ondas-titles .label-silver { font-size:clamp(18px, 2.3vw, 32px); letter-spacing:0.5em; } .ondas-titles .title-gold { font-size:clamp(28px, 5vw, 64px); } /* SECCIÓN CONTENIDOS */ /* TRIUNVIRATO */ .vagon-triunvirato { padding:0; flex-direction:column; justify-content:flex-end; align-items:stretch; } /* Título */ .trio-title-wrap { position:relative; z-index:2; width:100%; padding:0 14vw 3vh; text-align:center; flex-shrink:0; } /* ESPACIO 4 — altura fija, carrusel dentro */ .trio-espacio4 { position:relative; z-index:2; width:min(1500px, calc(100vw - 520px)); margin:0 auto; height:22vh; flex-shrink:0; overflow:hidden; } /* Carrusel siempre construido, invisible en reposo */ .trio-track-wrap { position:absolute; inset:0; display:flex; align-items:center; opacity:0; transition:opacity 0.55s ease; pointer-events:none; } .trio-track-wrap.visible { opacity:1; pointer-events:auto; } .trio-track { display:flex; gap:6px; height:calc(22vh - 16px); padding:0; will-change:transform; animation:trackLeft 55s linear infinite; } @keyframes trackLeft { from { transform:translateX(0); } to { transform:translateX(-50%); } } .trio-cover { flex-shrink:0; width:calc(22vh - 16px); height:calc(22vh - 16px); overflow:hidden; transition:filter 0.35s ease; cursor:pointer; } .trio-cover:hover { filter:brightness(1.15); } .trio-cover img { width:100%; height:100%; object-fit:cover; display:block; } /* Fundidos laterales */ .trio-espacio4::before, .trio-espacio4::after { content:''; position:absolute; top:0; bottom:0; width:6vw; z-index:5; pointer-events:none; } .trio-espacio4::before { left:0; background:linear-gradient(to right, var(--violet), transparent); } .trio-espacio4::after { right:0; background:linear-gradient(to left, var(--violet), transparent); } /* CARDS — altura fija, foto con altura controlada */ .trio-cards-wrap { position:relative; z-index:2; width:min(1500px, calc(100vw - 520px)); margin:0 auto; flex-shrink:0; } .triunvirato-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.06); width:100%; } .card-member { position:relative; overflow:hidden; padding-bottom:1.6vh; background:rgba(4,0,16,0.85); cursor:default; transition:background 0.5s ease; border-top:1px solid rgba(197,163,93,0.12); display:flex; flex-direction:column; } .card-member:hover { background:rgba(13,0,51,0.4); } /* Foto: 16:9 con aspect-ratio, cover, texto pegado abajo */ .member-photo-wrap { width:100%; aspect-ratio:16/9; overflow:hidden; flex-shrink:0; position:relative; } .member-photo { width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block; filter:grayscale(1) brightness(0.78) contrast(1.08); transition:filter 0.6s ease; } .card-member:hover .member-photo { filter:grayscale(0) brightness(1) contrast(1); } /* Texto — pegado al borde inferior de la foto */ /* El texto iba superpuesto en posición absoluta sobre la foto: al añadir el botón se salía por debajo y quedaba cortado. Ahora va en flujo, bajo la imagen, y la tarjeta crece con su contenido. */ .member-text { padding:1.4vh 2vw 0; position:relative; z-index:2; margin-top:-4vh; background:linear-gradient(to top, rgba(4,0,16,0.97) 0%, rgba(4,0,16,0.92) 55%, rgba(4,0,16,0.55) 85%, transparent 100%); } .member-name { font-family:'Cinzel',serif; color:var(--oro); letter-spacing:0.2em; font-size:clamp(14px, 1.15vw, 21px); margin-bottom:0.5vw; text-shadow:0 2px 12px rgba(0,0,0,0.95), 0 1px 4px rgba(0,0,0,1); transition:color 0.4s ease; } .card-member:hover .member-name { color:var(--oro-light); } .member-role { font-family:'Cormorant Garamond',serif; font-size:clamp(13px, 0.95vw, 19px); font-style:italic; color:rgba(255,255,255,0.72); letter-spacing:0.1em; text-shadow:0 1px 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,1); transition:color 0.4s ease; } .card-member:hover .member-role { color:rgba(255,255,255,0.92); } /* LIGHTBOX CARRUSEL TRIUNVIRATO */ #trio-lb { position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,0.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vh; opacity:0; pointer-events:none; transition:opacity 0.4s ease; } #trio-lb.open { opacity:1; pointer-events:auto; } #trio-lb-img-wrap { position:relative; display:flex; align-items:center; justify-content:center; } #trio-lb-prev { left:-4vw; } #trio-lb-next { right:-4vw; } #trio-lb-img { max-width:80vmin; max-height:80vmin; object-fit:contain; box-shadow:0 0 60px rgba(0,0,0,0.95), 0 0 20px rgba(197,163,93,0.1); border:1px solid rgba(197,163,93,0.15); transition:opacity 0.3s ease; } #trio-lb-counter { font-family:'Cinzel',serif; font-size:clamp(9px, 0.45vw, 13px); letter-spacing:0.5em; color:rgba(197,163,93,0.25); } #trio-lb-close { position:absolute; top:24px; right:32px; z-index:1; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); border:1px solid rgba(197,163,93,0.5); font-family:'Cinzel',serif; font-size:clamp(14px, 1.1vw, 20px); color:rgba(197,163,93,0.85); cursor:pointer; transition:color 0.3s ease, background 0.3s ease, border-color 0.3s ease; } #trio-lb-close:hover { color:#000; background:var(--oro); border-color:var(--oro); } .buy-btn { display:block; width:100%; box-sizing:border-box; padding:clamp(8px,0.7vw,12px) clamp(12px,1.2vw,20px); border:1px solid var(--oro); color:var(--oro); font-family:'Cinzel',serif; letter-spacing:0.3em; text-decoration:none; transition:0.5s; margin-top:clamp(10px,1.2vw,18px); font-size:clamp(12px, 0.8vw, 18px); } .buy-btn:hover { background:var(--oro); color:#000; box-shadow:0 0 28px rgba(197,163,93,0.6); } /* ── CAJAS NOVEDADES ── */ .nov-grid { display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:auto auto; gap:1px; width:58vw; margin-top:3.5vh; background:rgba(197,163,93,0.08); } .nov-box { position:relative; overflow:hidden; padding:3.2vh 2.8vw; background:rgba(0,0,0,0.55); cursor:pointer; transition:background 0.5s ease; text-decoration:none; display:flex; flex-direction:column; justify-content:flex-end; } .nov-box-wide { grid-column:1 / -1; padding:2vh 2.8vw; } .nov-box-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 0.7s ease; filter:brightness(0.58) saturate(0.85); } .nov-box:hover .nov-box-bg { opacity:1; } .nov-box:hover { background:rgba(13,0,51,0.3); } .nov-box-tag { font-family:'Cinzel',serif; font-size:clamp(9px, 0.52vw, 13px); letter-spacing:0.55em; color:rgba(197,163,93,0.45); text-transform:uppercase; position:relative; z-index:2; margin-bottom:0.8vh; } .nov-box-title { font-family:'Cinzel',serif; font-size:clamp(14px, 1.05vw, 21px); letter-spacing:0.22em; color:rgba(255,255,255,0.85); text-transform:uppercase; position:relative; z-index:2; transition:color 0.4s ease; } .nov-box:hover .nov-box-title { color:#fff; } .nov-box-arrow { position:absolute; right:2vw; bottom:2.5vh; font-family:'Cinzel',serif; font-size:clamp(11px, 0.7vw, 17px); color:rgba(197,163,93,0.3); z-index:2; transition:color 0.4s ease, transform 0.4s ease; } .nov-box:hover .nov-box-arrow { color:rgba(197,163,93,0.8); transform:translateX(4px); } /* ── VAGÓN 0: rejilla según número de cajas ── */ .nov-grid[data-cajas="1"] { grid-template-columns:1fr; } .nov-grid[data-cajas="2"] { grid-template-columns:1.6fr 1fr; } .nov-grid[data-cajas="3"] { grid-template-columns:1.6fr 1fr; } .nov-grid[data-cajas="4"] { grid-template-columns:1.6fr 1fr; } .nov-grid[data-cajas="5"], .nov-grid[data-cajas="6"] { grid-template-columns:repeat(3,1fr); } /* ── VAGÓN 0: filas 2 y 3, colapsadas ── */ #nov-bajas { width:58vw; display:flex; flex-direction:column; } #nov-bajas:empty { display:none; } .nov-baja { display:flex; align-items:center; justify-content:space-between; gap:2vw; padding:1.4vh 2.8vw; border-bottom:1px solid rgba(197,163,93,0.08); text-decoration:none; transition:background 0.5s ease; } .nov-baja:hover { background:rgba(13,0,51,0.3); } .nov-baja-tag { font-family:'Cinzel',serif; font-size:clamp(9px, 0.52vw, 13px); letter-spacing:0.55em; color:rgba(197,163,93,0.45); text-transform:uppercase; white-space:nowrap; } .nov-baja-title { font-family:'Cinzel',serif; font-size:clamp(12px, 0.8vw, 18px); letter-spacing:0.22em; color:rgba(255,255,255,0.7); text-transform:uppercase; transition:color 0.4s ease; flex:1; margin-left:1.5vw; } .nov-baja:hover .nov-baja-title { color:#fff; } .nov-baja-arrow { font-family:'Cinzel',serif; font-size:clamp(11px, 0.7vw, 17px); color:rgba(197,163,93,0.3); transition:color 0.4s ease, transform 0.4s ease; } .nov-baja:hover .nov-baja-arrow { color:rgba(197,163,93,0.8); transform:translateX(4px); } /* ── VAGÓN 0: fila 4, barra fija ── */ #nov-barra { width:58vw; margin-top:2.2vh; display:flex; align-items:stretch; justify-content:space-between; gap:2vw; border-top:1px solid rgba(197,163,93,0.14); padding-top:1.8vh; } #nov-barra.sin-soundtracks { justify-content:flex-start; } .nov-tienda { padding:clamp(8px,0.7vw,12px) clamp(12px,1.2vw,20px); border:1px solid var(--oro); color:var(--oro); font-family:'Cinzel',serif; letter-spacing:0.3em; text-decoration:none; transition:0.5s; font-size:clamp(12px, 0.8vw, 18px); display:flex; align-items:center; } .nov-tienda:hover { background:var(--oro); color:#000; box-shadow:0 0 28px rgba(197,163,93,0.6); } .nov-st { text-decoration:none; text-align:right; display:flex; flex-direction:column; justify-content:center; gap:0.4vh; padding-left:1.5vw; border-left:2px solid #7d97b4; transition:0.5s; } .nov-st-sello { font-family:'Cinzel',serif; font-size:clamp(9px, 0.52vw, 13px); letter-spacing:0.5em; color:rgba(125,151,180,0.75); text-transform:uppercase; } .nov-st-titulo { font-family:'Cinzel',serif; font-size:clamp(12px, 0.8vw, 18px); letter-spacing:0.22em; color:rgba(255,255,255,0.7); text-transform:uppercase; transition:color 0.4s ease; } .nov-st:hover .nov-st-titulo { color:#fff; } /* ── VENTANAS DIGIPACK ── */ /* ── VENTANA DIGIPACK ── */ #dig-wrap { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin:1.5vh 0 0; display:flex; flex-direction:column; align-items:center; gap:0.8vh; pointer-events:none; opacity:0; transition:opacity 0.5s ease; z-index:20; max-width:92vw; } #dig-wrap.show { opacity:1; } #dig-img-wrap { position:relative; height:clamp(176px, 28.8vh, 448px); max-width:100%; border:1px solid rgba(197,163,93,0.22); box-shadow:0 0 50px rgba(0,0,0,0.95), 0 0 14px rgba(197,163,93,0.08); background:#000; overflow:hidden; pointer-events:none; } #dig-wrap.show #dig-img-wrap { pointer-events:auto; } #dig-img { display:block; height:100%; width:auto; max-width:100%; object-fit:contain; filter:brightness(0.9); transition:opacity 0.35s ease; } .dig-zoom-btn { position:absolute; right:1.4%; bottom:1.4%; width:2.4vw; height:2.4vw; min-width:32px; min-height:32px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); border:1px solid rgba(197,163,93,0.35); border-radius:50%; color:rgba(197,163,93,0.85); cursor:pointer; opacity:0; pointer-events:none; transition:opacity 0.35s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease; z-index:5; } #dig-wrap.show .dig-zoom-btn { opacity:1; pointer-events:auto; } .dig-zoom-btn:hover { background:rgba(197,163,93,0.15); border-color:var(--oro); color:var(--oro); } .dig-zoom-btn svg { width:55%; height:55%; } #dig-label { font-family:'Cinzel',serif; font-size:clamp(9px, 0.4vw, 13px); letter-spacing:0.6em; color:rgba(197,163,93,0.3); text-transform:uppercase; padding:0.2vh 0 0; } /* ── SELECTOR DE GRUPOS VESSENCE (Discografía) ── */ #disc-groups-wrap { display:flex; justify-content:center; flex-wrap:wrap; gap:1vw; width:100%; } .disc-group-btn { background:transparent; border:1px solid rgba(197,163,93,0.25); color:rgba(255,255,255,0.45); font-family:'Cinzel',serif; font-size:clamp(12px, 0.65vw, 18px); letter-spacing:0.25em; text-transform:uppercase; padding:0.8vh 1.4vw; cursor:pointer; transition:color 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .disc-group-btn:hover { color:rgba(197,163,93,0.75); border-color:rgba(197,163,93,0.45); } .disc-group-btn.active { color:var(--oro); border-color:var(--oro); background:rgba(197,163,93,0.08); } .disc-group-item { display:flex; flex-direction:column; align-items:stretch; } .disc-group-swatch { height:0.6vh; min-height:5px; opacity:0.85; } #disc-empty-msg { margin-top:6vh; font-family:'Cinzel',serif; letter-spacing:0.5em; color:rgba(255,255,255,0.3); } /* PORTADA DIVIDIDA */ #disc-cover-wrap { position:relative; flex-shrink:0; width:clamp(160px,18vw,280px); } #disc-cover-wrap img { display:block; width:100%; filter:brightness(0.85); box-shadow:0 0 40px rgba(197,163,93,0.2); transition:filter 0.5s ease, box-shadow 0.5s ease; } .disc-half { position:absolute; top:0; width:50%; height:100%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.3s ease; } #disc-half-l { left:0; } #disc-half-r { right:0; } .disc-half:hover { background:rgba(0,0,0,0.28); } .disc-half-num { font-family:'Cinzel',serif; font-size:clamp(16px, 2.2vw, 36px); font-weight:700; color:rgba(197,163,93,0); transition:color 0.3s ease, text-shadow 0.3s ease; pointer-events:none; user-select:none; } .disc-half:hover .disc-half-num, .disc-half.lit .disc-half-num { color:rgba(197,163,93,0.92); text-shadow:0 0 18px rgba(197,163,93,0.6); } #disc-cover-wrap::after { content:''; position:absolute; top:8%; left:50%; transform:translateX(-50%); width:1px; height:84%; background:rgba(197,163,93,0.18); pointer-events:none; opacity:0; transition:opacity 0.4s ease; } #disc-cover-wrap.hovered::after { opacity:1; } /* Navegación entre discos */ #disc-nav { display:flex; align-items:center; gap:1.5vw; margin-bottom:0.5vh; } .disc-nav-btn { background:none; border:1px solid rgba(197,163,93,0.3); color:rgba(197,163,93,0.6); font-family:'Cinzel',serif; font-size:1rem; width:2.2vw; height:2.2vw; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; } .disc-nav-btn:hover { border-color:var(--oro); color:var(--oro); } .disc-nav-counter { font-family:'Cinzel',serif; font-size:clamp(10px, 0.6vw, 15px); letter-spacing:0.4em; color:rgba(197,163,93,0.4); } /* ── MULTIMEDIA ORREY ── */ #vagon-2 { padding:0 !important; overflow:hidden; } .orrery-root { position:absolute; inset:0; z-index:2; display:flex; align-items:center; overflow:hidden; color:#fff; user-select:none; } /* Imagen Pléyades fullscreen de fondo */ .vortex-master { position:absolute; inset:0; z-index:0; pointer-events:none; } .vortex-img { width:100%; height:100%; object-fit:cover; } /* Oscurecimiento base para que los planetas y texto sean legibles */ .orrery-root::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,30,0.55); } /* Motor planetario — mitad izquierda */ .orrery-engine { position:relative; flex:0 0 50%; height:100%; display:flex; align-items:center; justify-content:center; z-index:10; } #orrery-svg { width:32vw; height:32vw; overflow:visible; } .mm-orbit { fill:none; stroke:var(--oro-dim); stroke-width:0.08; stroke-dasharray:1 6; opacity:0.15; pointer-events:none; } .core-lines { stroke:var(--oro-dim); stroke-width:0.05; opacity:0.2; pointer-events:none; } .svg-vacuum { fill:transparent; cursor:default; pointer-events:auto; } .planet-target { cursor:pointer; pointer-events:auto; } .planet-hitbox { fill:transparent; } .planetoid { stroke-width:0.5; transition:filter 0.4s ease; pointer-events:none; } .planet-target.active .planetoid { filter:brightness(2.5) drop-shadow(0 0 8px currentColor); } /* Haz de proyección — cono desde el planeta */ #projector-beam { position:absolute; inset:0; pointer-events:none; z-index:6; opacity:0; transition:opacity 0.7s ease; background:radial-gradient(circle at var(--beam-x,35%) var(--beam-y,50%), rgba(197,163,93,0.22) 0%, transparent 60%); clip-path:polygon(var(--beam-x) var(--beam-y), 75% 100%, 100% 100%, 100% 0%); } #projector-beam.active { opacity:1; } #projector-beam.locked { background:radial-gradient(circle at var(--beam-x,35%) var(--beam-y,50%), rgba(197,163,93,0.5) 0%, transparent 60%) !important; } /* Zona puente invisible — cubre el gap entre planeta y zona derecha */ #orr-bridge { position:absolute; left:25%; top:0; width:25%; height:100%; z-index:7; pointer-events:none; } #orr-bridge.show { pointer-events:auto; } /* CAPA 1 — imagen categoría (50-100%) */ #orr-projection { position:absolute; right:0; top:0; width:50%; height:100%; z-index:8; pointer-events:none; opacity:0; transition:opacity 0.7s ease; } #orr-projection.show { opacity:1; pointer-events:auto; } #orr-cat-img { position:absolute; top:0; left:0; z-index:0; height:100%; width:100%; object-fit:cover; opacity:0.55; transition:opacity 0.5s ease; mask-image:linear-gradient(to right, transparent 0%, black 25%); -webkit-mask-image:linear-gradient(to right, transparent 0%, black 25%); } /* Botón de volver — cuadrado fijo a la izquierda del título del disco */ .orr-back-btn { position:absolute; left:1%; top:50%; transform:translateY(-50%); z-index:3; width:clamp(26px, 2.4vw, 38px); height:clamp(26px, 2.4vw, 38px); display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(197,163,93,0.45); color:var(--oro); font-size:clamp(11px, 1vw, 16px); cursor:pointer; transition:background 0.3s ease, border-color 0.3s ease; } .orr-back-btn:hover { background:rgba(197,163,93,0.15); border-color:var(--oro); } /* Título categoría */ #orr-cat-title { position:absolute; left:4%; top:50%; transform:translateY(-50%); z-index:2; font-family:'Cinzel',serif; font-size:clamp(13px, 1.6vw, 26px); letter-spacing:0.45em; color:#fff; text-transform:uppercase; line-height:1.5; white-space:nowrap; text-shadow:0 0 40px rgba(197,163,93,0.8), 0 2px 12px rgba(0,0,0,1); opacity:0; transform:translateY(-50%) translateX(16px); transition:opacity 0.7s ease, transform 0.7s ease; } #orr-projection.show #orr-cat-title { opacity:1; transform:translateY(-50%) translateX(0); } /* PRIMERA LLAVE — categorías (Vídeo / Imagen / Sonido / Crítica) */ #orr-firstkey { position:absolute; left:4%; top:50%; transform:translateY(20px); z-index:3; width:30%; display:flex; flex-direction:column; gap:1vh; opacity:0; pointer-events:none; transition:opacity 0.6s ease 0.2s; } #orr-projection.show #orr-firstkey { opacity:1; pointer-events:auto; } .orr-key-btn { background:transparent; border:1px solid rgba(197,163,93,0.25); color:rgba(255,255,255,0.5); font-family:'Cinzel',serif; font-size:clamp(9px, 0.62vw, 11px); letter-spacing:0.3em; text-transform:uppercase; padding:0.9vh 1vw; text-align:left; cursor:pointer; transition:color 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .orr-key-btn:hover, .orr-key-btn.active { color:var(--oro); border-color:var(--oro); background:rgba(197,163,93,0.08); } .orr-empty { font-family:'Cinzel',serif; font-size:clamp(9px, 0.62vw, 11px); letter-spacing:0.4em; color:rgba(255,255,255,0.3); text-align:center; grid-column:1/-1; } /* CAPA 2 — items con miniatura (75-100%) */ #orr-detail { position:absolute; right:0; top:0; width:20%; height:100%; z-index:9; pointer-events:none; opacity:0; transition:opacity 0.5s ease 0.15s; display:grid; grid-template-columns:1fr; align-content:start; gap:2vh; padding:8vh 1.5vw; background:linear-gradient(to right, transparent 0%, rgba(0,0,20,0.8) 30%, rgba(0,0,20,0.92) 100%); overflow:visible; } #orr-detail.show { opacity:1; pointer-events:auto; } #orr-detail.multi { grid-template-columns:1fr 1fr; gap:1.5vh 0.8vw; } #orr-detail.solo .orr-item { width:50%; margin-left:auto; } .orr-item { display:flex; flex-direction:column; gap:0.6vh; cursor:pointer; transition:transform 0.3s ease; } .orr-item:hover { transform:scale(1.35); transform-origin:right center; z-index:5; } .orr-item-label { font-family:'Cinzel',serif; font-size:clamp(7px, 0.58vw, 10px); letter-spacing:0.35em; color:rgba(255,255,255,0.65); text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,1); transition:color 0.3s ease; } .orr-item:hover .orr-item-label { color:var(--oro-light); } .orr-item-thumb-wrap { width:100%; position:relative; overflow:hidden; } .orr-item-thumb-wrap img { display:block; width:100%; height:auto; object-fit:contain; border:1px solid rgba(197,163,93,0.15); filter:brightness(0.55); transition:filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } .orr-item:hover .orr-item-thumb-wrap img { filter:brightness(1); border-color:rgba(197,163,93,0.7); box-shadow:0 0 20px rgba(197,163,93,0.35); } /* ── LIGHTBOX GALERÍA ── */ #lightbox { position:fixed; inset:0; z-index:9000; background:#000; display:none; flex-direction:column; align-items:center; padding:64px 0 16px; box-sizing:border-box; } #lightbox.open { display:flex; } #lb-close { position:absolute; top:24px; right:32px; z-index:1; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.55); border:1px solid rgba(197,163,93,0.5); font-family:'Cinzel',serif; font-size:clamp(14px, 1.1vw, 20px); color:rgba(197,163,93,0.85); cursor:pointer; transition:color 0.3s ease, background 0.3s ease, border-color 0.3s ease; } #lb-close:hover { color:#000; background:var(--oro); border-color:var(--oro); } #lb-title { flex:0 0 auto; margin-bottom:1.5vh; font-family:'Cinzel',serif; font-size:clamp(11px, 0.7vw, 17px); letter-spacing:0.5em; color:rgba(197,163,93,0.5); text-transform:uppercase; } #lb-img-wrap { position:relative; flex:1 1 auto; min-height:0; width:clamp(300px, 92vw, 1800px); display:flex; align-items:center; justify-content:center; } #lb-img { max-width:100%; max-height:100%; object-fit:contain; border:1px solid rgba(197,163,93,0.15); box-shadow:0 0 60px rgba(0,0,0,1); transition:opacity 0.35s ease; } .lb-arrow { position:absolute; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:4px; cursor:pointer; padding:1.5vw; opacity:0.35; transition:opacity 0.3s ease; } .lb-arrow:hover { opacity:1; } #lb-prev { left:-4vw; } #lb-next { right:-4vw; } .lb-arrow div { width:14px; height:14px; border-color:rgba(197,163,93,0.9); border-style:solid; border-width:0; } #lb-prev div, .lb-prev div { border-left-width:1px; border-top-width:1px; transform:rotate(-45deg); margin-bottom:-6px; } #lb-prev div:last-child, .lb-prev div:last-child { margin-bottom:0; } #lb-next div, .lb-next div { border-right-width:1px; border-top-width:1px; transform:rotate(45deg); margin-bottom:-6px; } #lb-next div:last-child, .lb-next div:last-child { margin-bottom:0; } #lb-counter { flex:0 0 auto; margin-top:1.2vh; font-family:'Cinzel',serif; font-size:clamp(9px, 0.45vw, 13px); letter-spacing:0.5em; color:rgba(197,163,93,0.25); } /* Scroll strip miniaturas */ #lb-strip { flex:0 0 auto; margin-top:8px; display:flex; gap:8px; overflow-x:auto; max-width:clamp(300px, 92vw, 1800px); padding:4px 0; scrollbar-width:none; } #lb-strip::-webkit-scrollbar { display:none; } .lb-thumb { flex-shrink:0; width:60px; height:38px; object-fit:cover; cursor:pointer; opacity:0.35; border:1px solid transparent; transition:opacity 0.3s ease, border-color 0.3s ease; } .lb-thumb.active, .lb-thumb:hover { opacity:1; border-color:rgba(197,163,93,0.5); } /* ── DESCRIPCIÓN A PANTALLA COMPLETA ── */ #desc-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,10,0.97); display:none; align-items:center; justify-content:center; padding:8vh 6vw; } #desc-modal.open { display:flex; } #desc-close { position:absolute; top:28px; right:40px; font-family:'Cinzel',serif; font-size:clamp(14px, 1.1vw, 21px); color:rgba(197,163,93,0.4); cursor:pointer; letter-spacing:0.3em; transition:color 0.3s ease; z-index:1; } #desc-close:hover { color:rgba(197,163,93,0.9); } #desc-modal-inner { max-width:760px; max-height:80vh; overflow-y:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; text-align:left; } #desc-modal-inner::-webkit-scrollbar { display:none; } #desc-modal-title { font-family:'Cinzel',serif; font-size:clamp(20px, 2vw, 34px); letter-spacing:0.2em; color:var(--oro); text-transform:uppercase; margin-bottom:3vh; } #desc-modal-text { font-family:'Cormorant Garamond',serif; font-size:clamp(16px, 1.25vw, 23px); line-height:1.85; color:rgba(255,255,255,0.85); white-space:pre-line; } /* ── VAGÓN 7 — VESSENCE ── */ #vagon-7 { padding:0 !important; overflow:hidden; } #vagon-7::before { background:none !important; } .vessence-video-bg { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; pointer-events:none; } /* Encabezados — SIEMPRE visibles */ .vessence-titulo { position:absolute; top:8vh; z-index:20; font-family:'Vinletha Gyldham','Cormorant Garamond',serif; font-size:clamp(32px, 5vw, 80px); font-weight:400; letter-spacing:0.04em; line-height:1.05; pointer-events:none; text-shadow:0 2px 18px rgba(0,0,0,0.7); } /* Glows radiales — degradado fijo, opacidad dinámica por JS */ .vessence-glow { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 0.15s ease; } .vessence-glow-l { background:linear-gradient(to right, rgba(90,10,20,1) 0%, rgba(143,76,89,1) 20%, rgba(216,121,146,0.6) 32%, transparent 50%); } .vessence-glow-r { background:linear-gradient(to left, rgba(5,10,70,1) 0%, rgba(45,78,180,1) 20%, rgba(125,151,220,0.6) 32%, transparent 50%); } #vessence-tit-sello { left:3vw; color:#d87992; } #vessence-tit-azul { right:3vw; text-align:right; color:#7d97b4; } /* Bloques de texto — solo estos hacen fade */ .vessence-bloque { position:absolute; top:calc(8vh + clamp(38px, 5.8vw, 90px) + 1.5vh); width:33vw; z-index:20; pointer-events:none; opacity:0; transition:opacity 0.9s ease; display:flex; flex-direction:column; justify-content:flex-start; overflow:hidden; } .vessence-bloque.visible { opacity:1; } #vessence-sello { left:3vw; } #vessence-azul { right:3vw; text-align:right; } .vessence-bloque-cuerpo { font-family:'Cormorant Garamond',serif; font-size:clamp(15px, 1.2vw, 20px); font-weight:300; line-height:1.75; letter-spacing:0.02em; color:rgba(255,255,255,0.88); text-shadow:0 2px 10px rgba(0,0,0,0.8), 0 4px 20px rgba(0,0,0,0.5); text-align:justify; } /* Rectángulos de navegación */ .vessence-nav-rect { display:flex; gap:1px; margin-top:2.5vh; pointer-events:auto; width:100%; } #vessence-azul .vessence-nav-rect { justify-content:flex-end; } .vessence-nav-btn { background:rgba(0,0,0,0.45); border:1px solid rgba(197,163,93,0.3); color:rgba(255,255,255,0.55); font-family:'Futurist Fixed-width','Cinzel',serif; font-size:clamp(8px, 0.55vw, 11px); letter-spacing:0.12em; text-transform:uppercase; padding:0.8vh 0.5vw; cursor:pointer; transition:color 0.3s ease, border-color 0.3s ease, background 0.3s ease; text-decoration:none; display:block; white-space:nowrap; flex:1; text-align:center; } .vessence-nav-btn:hover { color:var(--oro); border-color:var(--oro); background:rgba(197,163,93,0.1); } /* ── EL ESCRIBA — reseñas ── */ #orr-reviews { position:absolute; right:0; top:0; width:20%; height:100%; z-index:9; pointer-events:none; opacity:0; transition:opacity 0.5s ease 0.15s; display:flex; flex-direction:column; justify-content:center; gap:3vh; padding:8vh 1.5vw; background:linear-gradient(to right, transparent 0%, rgba(0,0,15,0.7) 15%, rgba(0,0,15,0.88) 100%); overflow-y:auto; scrollbar-width:none; } #orr-reviews::-webkit-scrollbar { display:none; } #orr-reviews.show { opacity:1; pointer-events:auto; } .rev-card { display:flex; flex-direction:column; gap:1.6vh; cursor:pointer; border-left:2px solid rgba(91,168,130,0.3); padding-left:2vw; transition:border-color 0.3s ease; } .rev-card:hover { border-color:rgba(91,168,130,0.85); } .rev-source { font-family:'Cinzel',serif; font-size:clamp(12px,0.95vw,18px); letter-spacing:0.35em; color:rgba(91,168,130,0.9); text-transform:uppercase; transition:color 0.3s ease; } .rev-card:hover .rev-source { color:#7de8b4; } .rev-author { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(12px,0.9vw,16px); letter-spacing:0.08em; color:rgba(255,255,255,0.45); } .rev-quote { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(16px,1.55vw,28px); line-height:1.65; color:rgba(255,255,255,0.92); min-height:3em; transition:opacity 0.6s ease; text-shadow:0 1px 12px rgba(0,0,0,0.9); } .rev-quote::before { content:'"'; color:rgba(91,168,130,0.6); font-size:1.4em; line-height:0; vertical-align:-0.3em; margin-right:0.15em; } .rev-quote::after { content:'"'; color:rgba(91,168,130,0.6); font-size:1.4em; line-height:0; vertical-align:-0.3em; margin-left:0.15em; } .rev-quote.fade { opacity:0; } /* ── PANTALLAS GRANDES ≥ 1920px ────────────────────────────────────── Estos tamaños estaban en responsive.css, que se enlaza ANTES de este