/* ========================================================================== Micrositio publico de artista — /artista/{slug} -------------------------------------------------------------------------- Namespace propio `.ms-*`, activo solo bajo . No reutiliza las clases `artist-web-*` de styles.css a proposito: asi el micrositio no depende de la hoja general ni necesita `!important`. ========================================================================== */ body.artist-public-body { --ms-bg: #0b0d10; --ms-bg-alt: #0f1217; --ms-panel: #14181e; --ms-panel-hi: #1a1f26; --ms-ink: #f7f2e9; --ms-ink-soft: rgba(247, 242, 233, 0.64); --ms-ink-faint: rgba(247, 242, 233, 0.38); --ms-line: rgba(247, 242, 233, 0.09); --ms-line-strong: rgba(247, 242, 233, 0.2); --ms-red: #c94f5c; --ms-red-light: #e89aa2; --ms-gold: #c9a45a; --ms-shell: min(100% - clamp(28px, 6vw, 104px), 1400px); --ms-shell-narrow: min(100% - clamp(28px, 6vw, 104px), 1080px); /* Alto de la barra superior: lo comparten el hero (margen negativo) y el scroll-margin de las secciones, para que nunca queden desalineados. */ --ms-topbar-h: 78px; --ms-ease: cubic-bezier(0.22, 0.61, 0.36, 1); margin: 0; color: var(--ms-ink); background: var(--ms-bg); background-attachment: scroll; font-family: "Inter", Arial, sans-serif; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.artist-public-body ::selection { color: #0b0d10; background: var(--ms-gold); } body.artist-public-body :focus-visible { outline: 2px solid var(--ms-gold); outline-offset: 3px; border-radius: 4px; } .ms-shell { width: var(--ms-shell); margin-inline: auto; } .ms-shell-narrow { width: var(--ms-shell-narrow); margin-inline: auto; } .ms-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; color: #0b0d10; background: var(--ms-gold); font-weight: 700; } .ms-skip:focus { left: 12px; top: 12px; } /* -------------------------------------------------------------------------- Barra superior -------------------------------------------------------------------------- */ .ms-topbar { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, rgba(11, 13, 16, 0.82), rgba(11, 13, 16, 0.32)); border-bottom: 1px solid transparent; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 400ms var(--ms-ease), border-color 400ms var(--ms-ease); } .ms-topbar.is-scrolled { background: rgba(11, 13, 16, 0.93); border-bottom-color: var(--ms-line); } .ms-topbar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: center; gap: clamp(16px, 3vw, 48px); min-height: var(--ms-topbar-h); } .ms-brand { display: inline-flex; align-items: center; gap: 14px; min-width: 0; } .ms-brand img { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; border-radius: 999px; border: 1px solid var(--ms-line-strong); filter: saturate(0.95); transition: border-color 300ms var(--ms-ease); } .ms-brand:hover img { border-color: rgba(201, 164, 90, 0.6); } .ms-brand span { overflow: hidden; max-width: 28vw; color: var(--ms-ink); font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; letter-spacing: 0.01em; text-overflow: ellipsis; white-space: nowrap; } .ms-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.6vw, 38px); min-width: 0; overflow-x: auto; scrollbar-width: none; } .ms-nav::-webkit-scrollbar { display: none; } .ms-nav a { position: relative; flex: 0 0 auto; padding: 6px 0; color: var(--ms-ink-soft); font-size: 0.79rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: color 260ms var(--ms-ease); } .ms-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ms-gold); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ms-ease); } .ms-nav a:hover, .ms-nav a.is-current { color: var(--ms-ink); } .ms-nav a:hover::after, .ms-nav a.is-current::after { transform: scaleX(1); } .ms-social { display: inline-flex; align-items: center; gap: 4px; justify-self: end; } .ms-social a { display: grid; place-items: center; width: 36px; height: 36px; color: var(--ms-ink-faint); border-radius: 999px; transition: color 260ms var(--ms-ease), background 260ms var(--ms-ease); } .ms-social a:hover { color: var(--ms-ink); background: rgba(247, 242, 233, 0.08); } .ms-social svg { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .ms-hero { position: relative; display: grid; min-height: 100vh; min-height: 100dvh; margin-top: calc(var(--ms-topbar-h) * -1); isolation: isolate; overflow: hidden; background: #07090c; } .ms-hero-slide { position: absolute; inset: 0; background-position: center 22%; background-size: cover; background-repeat: no-repeat; opacity: 0; transform: scale(1.045); transition: opacity 1100ms var(--ms-ease), transform 7000ms linear; pointer-events: none; } .ms-hero-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; } /* Velo: oscurece lo justo para que el texto lea, sin tapar al artista. */ .ms-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 9, 12, 0.72) 0, rgba(7, 9, 12, 0) 34%), linear-gradient(0deg, rgba(7, 9, 12, 0.94) 0, rgba(7, 9, 12, 0.58) 32%, rgba(7, 9, 12, 0) 66%), linear-gradient(90deg, rgba(7, 9, 12, 0.72) 0, rgba(7, 9, 12, 0) 58%); pointer-events: none; } .ms-hero-inner { position: relative; z-index: 2; align-self: end; padding-block: clamp(56px, 8vw, 110px); } .ms-hero-content { max-width: min(58ch, 100%); } .ms-kicker { margin: 0; color: var(--ms-gold); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; } .ms-hero-content h1 { margin: 18px 0 0; color: var(--ms-ink); font-family: var(--font-display); font-size: clamp(3.4rem, 10.5vw, 10rem); font-weight: 700; line-height: 0.84; letter-spacing: -0.025em; text-wrap: balance; } .ms-hero-summary { max-width: 52ch; margin: 26px 0 0; color: rgba(247, 242, 233, 0.78); font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.65; } /* Solo el texto y la llamada a la accion cambian con el slide: el nombre y los datos del artista no parpadean al pasar las imagenes. */ .ms-hero-caption { display: none; } .ms-hero-caption.is-active { display: block; animation: ms-fade-in 700ms var(--ms-ease); } .ms-hero-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; padding: 15px 28px; color: var(--ms-ink); border: 1px solid var(--ms-line-strong); border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transition: color 300ms var(--ms-ease), background 300ms var(--ms-ease), border-color 300ms var(--ms-ease); } .ms-hero-cta:hover { color: #0b0d10; background: var(--ms-gold); border-color: var(--ms-gold); } .ms-hero-dots { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 3; display: flex; justify-content: center; gap: 10px; } .ms-hero-dots button { width: 34px; height: 2px; padding: 0; border: 0; border-radius: 2px; background: rgba(247, 242, 233, 0.26); cursor: pointer; transition: background 320ms var(--ms-ease), width 320ms var(--ms-ease); } .ms-hero-dots button.is-active { width: 54px; background: var(--ms-gold); } /* -------------------------------------------------------------------------- Secciones y cabeceras -------------------------------------------------------------------------- */ .ms-section { padding-bottom: clamp(72px, 9vw, 148px); scroll-margin-top: var(--ms-topbar-h); } /* Cabecera de seccion — «luz de escenario»: banda a todo el ancho con un cono de luz cenital, grano fino y filetes que se desvanecen hacia los lados, en lugar de un rectangulo de color plano con bordes cortados en seco. */ .ms-section-band { position: relative; isolation: isolate; overflow: hidden; margin-bottom: clamp(38px, 5vw, 74px); padding-block: clamp(46px, 6vw, 96px); text-align: center; background: linear-gradient(90deg, transparent, var(--ms-line) 18%, var(--ms-line) 82%, transparent) top / 100% 1px no-repeat, linear-gradient(90deg, transparent, var(--ms-line) 18%, var(--ms-line) 82%, transparent) bottom / 100% 1px no-repeat, var(--ms-bg-alt); } /* Cono de luz cenital */ .ms-section-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 46% 76% at 50% -6%, rgba(201, 164, 90, 0.13), rgba(201, 164, 90, 0.035) 46%, transparent 72%); pointer-events: none; } /* Grano: rompe la planitud del color sin llegar a leerse como textura */ .ms-section-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.035; mix-blend-mode: overlay; pointer-events: none; } .ms-section-band-inner { position: relative; z-index: 1; } /* Subtitulo opcional bajo el filete: p.ej. el numero de fotos de la galeria */ .ms-section-meta { margin: clamp(16px, 2vw, 22px) 0 0; color: var(--ms-ink-faint); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } /* Rotulo de la seccion: unico texto de la banda, centrado y a gran tamano */ .ms-section-band h2 { margin: 0; color: var(--ms-ink); font-family: var(--font-display); font-size: clamp(3rem, 8.6vw, 7.5rem); font-weight: 700; line-height: 0.94; letter-spacing: -0.024em; overflow-wrap: break-word; text-wrap: balance; } /* Filete con rombo: el hueco central lo abre el propio degradado */ .ms-section-ornament { display: block; position: relative; width: min(250px, 64%); height: 1px; margin: clamp(24px, 3vw, 36px) auto 0; background: linear-gradient(90deg, transparent, var(--ms-line-strong) 26%, transparent 44%, transparent 56%, var(--ms-line-strong) 74%, transparent); } .ms-section-ornament::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: var(--ms-gold); transform: translate(-50%, -50%) rotate(45deg); } .ms-rule { height: 1px; margin-top: clamp(28px, 4vw, 46px); background: linear-gradient(90deg, transparent, var(--ms-line-strong), transparent); } /* -------------------------------------------------------------------------- Galeria -------------------------------------------------------------------------- */ /* Hasta tres fotos: rejilla. A partir de cuatro, carrusel por paginas de `--ms-gallery-per-view` fotos, con scroll-snap nativo (asi el gesto tactil funciona sin JavaScript y el JS solo anade flechas y puntos). */ .ms-gallery { --ms-gallery-gap: clamp(10px, 1.2vw, 18px); --ms-gallery-per-view: 3; position: relative; } .ms-gallery-viewport { overflow: hidden; } .ms-gallery-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--ms-gallery-gap); } .ms-gallery.is-slider .ms-gallery-viewport { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .ms-gallery.is-slider .ms-gallery-viewport::-webkit-scrollbar { display: none; } .ms-gallery.is-slider .ms-gallery-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--ms-gallery-per-view) - 1) * var(--ms-gallery-gap)) / var(--ms-gallery-per-view)); } .ms-gallery.is-slider .ms-gallery-item { scroll-snap-align: start; } .ms-gallery-item { position: relative; min-width: 0; margin: 0; } .ms-gallery-open { position: relative; display: block; overflow: hidden; width: 100%; padding: 0; border: 0; border-radius: 3px; background: var(--ms-panel); cursor: zoom-in; box-shadow: 0 0 0 1px transparent; transition: box-shadow 460ms var(--ms-ease); } .ms-gallery-item:hover .ms-gallery-open, .ms-gallery-open:focus-visible { box-shadow: 0 0 0 1px rgba(201, 164, 90, 0.55), 0 26px 46px -22px rgba(0, 0, 0, 0.7); } .ms-gallery-open img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(0.9) brightness(0.94); transition: transform 900ms var(--ms-ease), filter 500ms var(--ms-ease); } .ms-gallery-item:hover .ms-gallery-open img, .ms-gallery-open:focus-visible img { transform: scale(1.045); filter: saturate(1) brightness(1.02); } /* Velo inferior: da fondo a los botones de compartir */ .ms-gallery-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 9, 12, 0.58), transparent 42%); opacity: 0; transition: opacity 500ms var(--ms-ease); pointer-events: none; } .ms-gallery-item:hover .ms-gallery-open::after, .ms-gallery-item:focus-within .ms-gallery-open::after { opacity: 1; } /* Numero de catalogo: siempre visible, discreto, como en una lamina editorial */ .ms-gallery-index { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px; color: rgba(247, 242, 233, 0.86); background: rgba(7, 9, 12, 0.42); border: 1px solid rgba(247, 242, 233, 0.2); border-radius: 999px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Icono de lupa: aparece centrado como pista de que la foto se puede ampliar */ .ms-gallery-zoom { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; color: var(--ms-ink); background: rgba(7, 9, 12, 0.5); border: 1px solid rgba(247, 242, 233, 0.3); border-radius: 999px; opacity: 0; transform: translate(-50%, -50%) scale(0.82); transition: opacity 320ms var(--ms-ease), transform 320ms var(--ms-ease); pointer-events: none; } .ms-gallery-zoom svg { width: 20px; height: 20px; } .ms-gallery-item:hover .ms-gallery-zoom, .ms-gallery-open:focus-visible .ms-gallery-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Flechas del carrusel */ .ms-gallery-nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0 0 4px; color: var(--ms-ink); background: rgba(11, 13, 16, 0.72); border: 1px solid var(--ms-line-strong); border-radius: 999px; font-size: 1.7rem; line-height: 1; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color 260ms var(--ms-ease), background 260ms var(--ms-ease), border-color 260ms var(--ms-ease), opacity 260ms var(--ms-ease); } .ms-gallery-nav:hover:not(:disabled) { color: #0b0d10; background: var(--ms-gold); border-color: var(--ms-gold); } .ms-gallery-nav:disabled { opacity: 0.28; cursor: default; } .ms-gallery-prev { left: 8px; } .ms-gallery-next { right: 8px; } /* Puntos: una parada por pagina de fotos */ .ms-gallery-dots { display: flex; justify-content: center; gap: 9px; margin-top: clamp(18px, 2.2vw, 26px); } .ms-gallery-dots[hidden] { display: none; } .ms-gallery-dots button { position: relative; width: 28px; height: 2px; padding: 0; border: 0; border-radius: 2px; background: rgba(247, 242, 233, 0.24); cursor: pointer; transition: background 320ms var(--ms-ease), width 320ms var(--ms-ease); } /* Area tactil comoda sin engordar el punto */ .ms-gallery-dots button::after { content: ""; position: absolute; inset: -14px -5px; } .ms-gallery-dots button.is-active { width: 46px; background: var(--ms-gold); } /* -------------------------------------------------------------------------- Compartir (galeria y visor) -------------------------------------------------------------------------- */ .ms-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; } .ms-share-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: var(--ms-ink-soft); background: rgba(11, 13, 16, 0.66); border: 1px solid var(--ms-line); border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color 240ms var(--ms-ease), background 240ms var(--ms-ease), border-color 240ms var(--ms-ease); } .ms-share-btn svg { width: 17px; height: 17px; } .ms-share-btn:hover, .ms-share-btn:focus-visible { color: #0b0d10; background: var(--ms-gold); border-color: var(--ms-gold); } .ms-share-btn[hidden] { display: none; } .ms-share-toast { position: absolute; bottom: calc(100% + 9px); left: 50%; padding: 5px 9px; color: #0b0d10; background: var(--ms-gold); border-radius: 3px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, 5px); pointer-events: none; transition: opacity 240ms var(--ms-ease), transform 240ms var(--ms-ease); } [data-share-copy].is-copied .ms-share-toast { opacity: 1; transform: translate(-50%, 0); } /* Barra sobre la foto: aparece al pasar el raton, siempre visible en tactil */ .ms-gallery-share { position: absolute; left: 10px; right: 10px; bottom: 10px; opacity: 0; transform: translateY(7px); transition: opacity 300ms var(--ms-ease), transform 300ms var(--ms-ease); /* La franja no captura el toque: solo los botones. Asi el resto de la banda inferior sigue abriendo la foto ampliada. */ pointer-events: none; } .ms-gallery-share > * { pointer-events: auto; } .ms-gallery-item:hover .ms-gallery-share, .ms-gallery-item:focus-within .ms-gallery-share { opacity: 1; transform: none; } @media (hover: none) { .ms-gallery-share { opacity: 1; transform: none; } .ms-gallery-open::after { opacity: 1; } } /* Lightbox */ .ms-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: clamp(14px, 2vw, 24px); padding: clamp(64px, 7vw, 76px) clamp(14px, 4vw, 56px) clamp(20px, 4vw, 48px); background: rgba(7, 9, 12, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: ms-fade-in 320ms var(--ms-ease); } .ms-lightbox[hidden] { display: none; } .ms-lightbox-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(6px, 2vw, 28px); width: 100%; min-height: 0; } .ms-lightbox img { justify-self: center; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; } .ms-lightbox-btn { display: grid; place-items: center; width: 48px; height: 48px; color: var(--ms-ink-soft); background: rgba(247, 242, 233, 0.06); border: 1px solid var(--ms-line); border-radius: 999px; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color 240ms var(--ms-ease), background 240ms var(--ms-ease); } .ms-lightbox-btn:hover { color: var(--ms-ink); background: rgba(247, 242, 233, 0.14); } .ms-lightbox-btn[hidden] { display: none; } .ms-lightbox-close { position: absolute; top: clamp(14px, 3vw, 32px); right: clamp(14px, 3vw, 32px); } .ms-lightbox-share { gap: 8px; } .ms-lightbox-share .ms-share-btn { width: 42px; height: 42px; background: rgba(247, 242, 233, 0.06); } .ms-lightbox-share .ms-share-btn svg { width: 18px; height: 18px; } .ms-lightbox-share .ms-share-btn:hover, .ms-lightbox-share .ms-share-btn:focus-visible { background: var(--ms-gold); } @keyframes ms-fade-in { from { opacity: 0; } to { opacity: 1; } } /* -------------------------------------------------------------------------- Videos -------------------------------------------------------------------------- */ .ms-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(20px, 2.4vw, 34px); } .ms-video-grid:has(> :only-child) { max-width: 900px; } .ms-video-card figure { margin: 0; overflow: hidden; border-radius: 3px; background: #000; } .ms-video-card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; } .ms-video-link { display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--ms-ink-soft); background: var(--ms-panel); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: color 260ms var(--ms-ease), background 260ms var(--ms-ease); } .ms-video-link:hover { color: var(--ms-ink); background: var(--ms-panel-hi); } .ms-video-card h3 { margin: 20px 0 6px; color: var(--ms-ink); font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; line-height: 1.25; } .ms-video-card p { margin: 0; color: var(--ms-ink-soft); font-size: 0.98rem; } /* -------------------------------------------------------------------------- Agenda de eventos (lista editorial, no tarjetas: una sola fila tambien se ve equilibrada, que era el problema del diseno anterior) -------------------------------------------------------------------------- */ .ms-agenda-layout { display: grid; gap: clamp(34px, 4vw, 56px); } @media (min-width: 1000px) { .ms-agenda-layout.has-list { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: start; } } .ms-agenda { display: grid; min-width: 0; border-top: 1px solid var(--ms-line); } .ms-agenda-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3.5vw, 56px); padding-block: clamp(24px, 3vw, 38px); border-bottom: 1px solid var(--ms-line); scroll-margin-top: var(--ms-topbar-h); transition: background 400ms var(--ms-ease); } /* -------------------------------------------------------------------------- Agenda: listado lateral con todas las fechas -------------------------------------------------------------------------- */ .ms-agenda-aside { display: grid; gap: 14px; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--ms-line); border-radius: 3px; background: var(--ms-panel); } @media (min-width: 1000px) { .ms-agenda-aside { position: sticky; top: calc(var(--ms-topbar-h) + 24px); } } .ms-agenda-aside-title { margin: 0; color: var(--ms-ink-faint); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .ms-agenda-list { display: grid; gap: 2px; max-height: min(58vh, 480px); overflow-y: auto; scrollbar-width: thin; } .ms-agenda-list-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 10px; border-radius: 3px; transition: background 260ms var(--ms-ease); } .ms-agenda-list-item:hover, .ms-agenda-list-item.is-current { background: rgba(247, 242, 233, 0.05); } .ms-agenda-list-date { color: var(--ms-gold); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .ms-agenda-list-title { overflow: hidden; color: var(--ms-ink-soft); font-size: 0.86rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; transition: color 260ms var(--ms-ease); } .ms-agenda-list-item:hover .ms-agenda-list-title, .ms-agenda-list-item.is-current .ms-agenda-list-title { color: var(--ms-ink); } @media (min-width: 860px) { .ms-agenda-row:has(.ms-agenda-thumb) { grid-template-columns: auto minmax(0, 1fr) auto; } } .ms-agenda-row:hover { background: rgba(247, 242, 233, 0.022); } .ms-agenda-date { display: grid; justify-items: center; gap: 2px; min-width: 74px; padding: 12px 10px; border: 1px solid var(--ms-line); border-radius: 3px; } .ms-agenda-date strong { color: var(--ms-ink); font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; } .ms-agenda-date span { color: var(--ms-gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; } .ms-agenda-body h3 { margin: 0; color: var(--ms-ink); font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 2.1rem); font-weight: 700; line-height: 1.14; } .ms-agenda-body p { margin: 8px 0 0; max-width: 62ch; color: var(--ms-ink-soft); font-size: 0.99rem; line-height: 1.65; } .ms-agenda-time { margin: 0 0 8px; color: var(--ms-ink-faint); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; } .ms-agenda-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; color: var(--ms-gold); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .ms-agenda-link::after { content: "→"; transition: transform 300ms var(--ms-ease); } .ms-agenda-link:hover::after { transform: translateX(5px); } .ms-agenda-thumb { display: none; } @media (min-width: 860px) { .ms-agenda-thumb { display: block; overflow: hidden; width: clamp(150px, 16vw, 230px); border-radius: 3px; } .ms-agenda-thumb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: saturate(0.9); transition: transform 800ms var(--ms-ease); } .ms-agenda-row:hover .ms-agenda-thumb img { transform: scale(1.06); } } /* -------------------------------------------------------------------------- Actualidad -------------------------------------------------------------------------- */ /* Destacada: la entrada mas reciente, a todo lo ancho y con foto grande */ .ms-news-featured { display: grid; overflow: hidden; margin-bottom: clamp(30px, 3.6vw, 48px); background: var(--ms-panel); border: 1px solid var(--ms-line); border-radius: 3px; transition: border-color 400ms var(--ms-ease); } .ms-news-featured:hover { border-color: var(--ms-line-strong); } @media (min-width: 760px) { .ms-news-featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } } .ms-news-featured-media { overflow: hidden; } .ms-news-featured-media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 11; object-fit: cover; filter: saturate(0.92); transition: transform 900ms var(--ms-ease); } .ms-news-featured:hover .ms-news-featured-media img { transform: scale(1.035); } .ms-news-featured-body { display: grid; align-content: center; gap: 4px; padding: clamp(26px, 3vw, 46px); } .ms-news-featured-kicker { margin: 0 0 4px; color: var(--ms-gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .ms-news-featured-body h3 { margin: 6px 0 0; color: var(--ms-ink); font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 700; line-height: 1.18; } .ms-news-featured-body p { margin: 14px 0 0; color: var(--ms-ink-soft); font-size: 1rem; line-height: 1.7; } .ms-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 2.4vw, 34px); } .ms-cards:has(> :only-child) { max-width: 620px; } .ms-card { display: grid; align-content: start; overflow: hidden; background: var(--ms-panel); border: 1px solid var(--ms-line); border-radius: 3px; transition: border-color 400ms var(--ms-ease), transform 400ms var(--ms-ease); } .ms-card:hover { transform: translateY(-4px); border-color: var(--ms-line-strong); } .ms-card > img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 700ms var(--ms-ease); } .ms-card:hover > img { transform: scale(1.045); } .ms-card-body { padding: clamp(20px, 2vw, 28px); } .ms-card-meta { margin: 0 0 10px; color: var(--ms-gold); font-size: 0.71rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .ms-card-body h3 { margin: 0; color: var(--ms-ink); font-family: var(--font-display); font-size: 1.42rem; font-weight: 700; line-height: 1.22; } .ms-card-body p { margin: 10px 0 0; color: var(--ms-ink-soft); font-size: 0.99rem; line-height: 1.65; } /* -------------------------------------------------------------------------- Contacto -------------------------------------------------------------------------- */ .ms-contact-note { max-width: 46ch; margin: 0 auto clamp(30px, 4vw, 52px); color: var(--ms-ink-soft); text-align: center; } .ms-contact-list { display: grid; gap: 0; width: min(100%, 760px); margin-inline: auto; border-top: 1px solid var(--ms-line); } .ms-contact-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding-block: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--ms-line); transition: padding-inline 400ms var(--ms-ease), background 400ms var(--ms-ease); } .ms-contact-list a:hover { padding-inline: 14px; background: rgba(247, 242, 233, 0.03); } .ms-contact-icon { display: grid; place-items: center; width: 42px; height: 42px; color: var(--ms-gold); border: 1px solid var(--ms-line); border-radius: 999px; } .ms-contact-icon svg { width: 17px; height: 17px; } .ms-contact-text { display: grid; gap: 3px; min-width: 0; } .ms-contact-text span { color: var(--ms-ink-faint); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .ms-contact-text strong { overflow: hidden; color: var(--ms-ink); font-size: 1.06rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .ms-contact-arrow { color: var(--ms-ink-faint); transition: color 300ms var(--ms-ease), transform 300ms var(--ms-ease); } .ms-contact-list a:hover .ms-contact-arrow { color: var(--ms-gold); transform: translateX(4px); } /* -------------------------------------------------------------------------- Pie -------------------------------------------------------------------------- */ .ms-footer { padding-block: clamp(44px, 5vw, 72px); background: #07090c; border-top: 1px solid var(--ms-line); } .ms-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(22px, 3.4vw, 46px); padding-bottom: clamp(30px, 4vw, 46px); margin-bottom: clamp(30px, 4vw, 46px); border-bottom: 1px solid var(--ms-line); } .ms-footer-nav a { position: relative; color: var(--ms-ink-soft); font-size: 0.79rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: color 260ms var(--ms-ease); } .ms-footer-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--ms-gold); transform: scaleX(0); transition: transform 320ms var(--ms-ease); } .ms-footer-nav a:hover { color: var(--ms-ink); } .ms-footer-nav a:hover::after { transform: scaleX(1); } .ms-footer-inner { display: grid; gap: 26px; align-items: center; } @media (min-width: 760px) { .ms-footer-inner { grid-template-columns: minmax(0, 1fr) auto; } } .ms-footer-name { margin: 0; color: var(--ms-ink); font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; } .ms-footer-note { margin: 4px 0 0; color: var(--ms-ink-faint); font-size: 0.9rem; } .ms-footer-back { display: inline-flex; align-items: center; gap: 10px; color: var(--ms-ink-soft); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; transition: color 260ms var(--ms-ease); } .ms-footer-back:hover { color: var(--ms-gold); } /* -------------------------------------------------------------------------- Aparicion al hacer scroll -------------------------------------------------------------------------- */ body.artist-public-body.ms-js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 900ms var(--ms-ease), transform 900ms var(--ms-ease); } body.artist-public-body.ms-js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { body.artist-public-body *, body.artist-public-body *::before, body.artist-public-body *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } body.artist-public-body.ms-js [data-reveal] { opacity: 1; transform: none; } .ms-hero-slide { transform: none; } } /* -------------------------------------------------------------------------- Tablet y movil -------------------------------------------------------------------------- */ /* Fotos por pagina del carrusel: 3 en escritorio, 2 en tablet, 1 en movil */ @media (max-width: 1023px) { .ms-gallery { --ms-gallery-per-view: 2; } } @media (max-width: 599px) { .ms-gallery { --ms-gallery-per-view: 1; } } @media (max-width: 760px) { body.artist-public-body { /* Dos filas compactas: marca + redes arriba, secciones debajo */ --ms-topbar-h: 92px; } .ms-topbar-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding-block: 8px; } .ms-brand { grid-row: 1; grid-column: 1; gap: 10px; } .ms-brand img { width: 34px; height: 34px; } .ms-brand span { max-width: 46vw; font-size: 1.05rem; } .ms-social { grid-row: 1; grid-column: 2; gap: 0; justify-self: end; } .ms-social a { width: 32px; height: 32px; } .ms-social svg { width: 16px; height: 16px; } .ms-nav { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; gap: 22px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .ms-hero-content h1 { font-size: clamp(2.9rem, 13vw, 4.8rem); overflow-wrap: break-word; } .ms-hero-cta { margin-top: 24px; padding: 13px 22px; } .ms-section-band h2 { font-size: clamp(2.6rem, 12.5vw, 4.6rem); } .ms-gallery-nav { width: 42px; height: 42px; font-size: 1.5rem; } .ms-lightbox { padding: 62px 12px 18px; } .ms-lightbox-btn { width: 40px; height: 40px; } .ms-lightbox-share .ms-share-btn { width: 40px; height: 40px; } .ms-agenda-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } .ms-agenda-date { justify-self: start; } .ms-agenda-list-title { white-space: normal; } /* Correos y webs largos: mejor partir la linea que recortarla */ .ms-contact-text strong { font-size: 0.98rem; white-space: normal; overflow-wrap: anywhere; } .ms-contact-list a { gap: 14px; } .ms-video-card h3 { font-size: 1.2rem; } } @media (max-width: 420px) { .ms-brand span { max-width: 38vw; font-size: 0.98rem; } .ms-contact-icon { width: 38px; height: 38px; } .ms-share { gap: 4px; } .ms-share-btn { width: 34px; height: 34px; } .ms-share-btn svg { width: 15px; height: 15px; } } @media print { .ms-topbar, .ms-hero-dots, .ms-lightbox { display: none; } } /* ========================================================================== Inicio â€” presentacion editorial por articulos, justo debajo del hero. Los articulos se apilan en la misma celda de una rejilla y solo uno esta visible: asi el bloque no salta de alto al pasar de uno a otro y no hace falta desplazar una pista horizontal. ========================================================================== */ .ms-intro { display: grid; } .ms-intro-slide { grid-area: 1 / 1; display: grid; gap: clamp(22px, 3vw, 48px); align-items: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 520ms var(--ms-ease), transform 520ms var(--ms-ease), visibility 0s linear 520ms; pointer-events: none; } .ms-intro-slide.is-active { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; pointer-events: auto; } /* Con imagen, dos columnas: la imagen se lleva algo menos de la mitad. Sin imagen no hay columna reservada, el texto ocupa el ancho util. */ .ms-intro-slide-media { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } .ms-intro-media { overflow: hidden; border: 1px solid var(--ms-line); border-radius: 3px; background: var(--ms-panel); } .ms-intro-media img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; } .ms-intro-body { display: grid; align-content: center; gap: 14px; min-width: 0; } /* Sin imagen el texto no debe cruzar toda la pantalla: por encima de unos 75 caracteres por linea se lee peor. */ .ms-intro-slide:not(.ms-intro-slide-media) .ms-intro-body { max-width: 72ch; } .ms-intro-year { margin: 0; color: var(--ms-gold); font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem); font-weight: 700; letter-spacing: 0.28em; } .ms-intro-title { margin: 0; color: var(--ms-ink); font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.01em; } .ms-intro-text { color: var(--ms-ink-soft); font-size: clamp(1rem, 0.97rem + 0.16vw, 1.08rem); line-height: 1.8; } .ms-intro-text > :first-child { margin-top: 0; } .ms-intro-text > :last-child { margin-bottom: 0; } .ms-intro-text a { color: var(--ms-red-light); text-decoration: underline; text-underline-offset: 3px; } /* Controles: discretos, alineados con el resto del micrositio. */ .ms-intro-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(26px, 3vw, 44px); padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid var(--ms-line); } .ms-intro-arrow { padding: 11px 20px; border: 1px solid var(--ms-line-strong); border-radius: 999px; background: transparent; color: var(--ms-ink-soft); font-family: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: color 300ms var(--ms-ease), border-color 300ms var(--ms-ease), background 300ms var(--ms-ease); } .ms-intro-arrow:hover, .ms-intro-arrow:focus-visible { color: var(--ms-ink); border-color: var(--ms-gold); background: rgba(201, 164, 90, 0.1); } .ms-intro-dots { display: flex; align-items: center; gap: 9px; } .ms-intro-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--ms-line-strong); border-radius: 999px; background: transparent; cursor: pointer; transition: background 300ms var(--ms-ease), border-color 300ms var(--ms-ease), transform 300ms var(--ms-ease); } .ms-intro-dots button:hover { border-color: var(--ms-gold); } .ms-intro-dots button.is-active { border-color: var(--ms-gold); background: var(--ms-gold); transform: scale(1.2); } @media (max-width: 900px) { .ms-intro-slide-media { grid-template-columns: minmax(0, 1fr); } .ms-intro-media img { max-height: 340px; } } @media (max-width: 720px) { /* En escritorio los articulos se apilan y el bloque mide lo que el mas largo, asi que el fundido no mueve nada. En movil eso dejaria un hueco enorme bajo los articulos cortos, asi que solo ocupa sitio el visible y el cambio es directo. */ .ms-intro-slide { display: none; gap: 18px; opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .ms-intro-slide.is-active { display: grid; } .ms-intro-media img { max-height: 260px; } .ms-intro-controls { flex-wrap: wrap; justify-content: center; gap: 14px; } .ms-intro-arrow { flex: 1 1 auto; min-width: 132px; padding: 12px 14px; text-align: center; } .ms-intro-dots { order: -1; width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .ms-intro-slide { transition-duration: 1ms; transform: none; } }