/* ========================================================================== AMARTE — Sitio web oficial Estilos principales Para cambiar colores, edita las variables CSS en :root ========================================================================== */ /* -------------------------------------------------------------------------- Variables — paleta oficial AMARTE -------------------------------------------------------------------------- */ :root { /* Fondos principales */ --color-midnight: #14213C; --color-burgundy: #461A1A; --color-deep: #0d1527; /* Acentos cálidos */ --color-beige: #CABBAE; --color-brown: #5F402E; --color-orange: #DF8850; --color-terracotta: #B0442D; /* Azules nocturnos */ --color-blue-muted: #485D8B; --color-blue-slate: #6D7DA2; /* Texto */ --color-text: #F5F0EA; --color-text-dim: rgba(245, 240, 234, 0.60); --color-text-faint: rgba(245, 240, 234, 0.35); /* Tipografía */ --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Espaciado */ --section-gap: 7rem; --section-gap-m: 4.5rem; --container: 1160px; --gutter: 2rem; /* Transiciones */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- Reset y base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background-color: var(--color-midnight); color: var(--color-text); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; font-family: inherit; } /* Grain texture — superposición sutil en toda la página */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 180px; background-repeat: repeat; } /* -------------------------------------------------------------------------- Contenedor y utilidades -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section-label { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-orange); margin-bottom: 1.25rem; } .section-title { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; } /* -------------------------------------------------------------------------- Animaciones de entrada (scroll reveal) IMPORTANTE: Solo se activan cuando JS está cargado (.js-ready en ). Sin JS, todo el contenido es visible directamente (progresión segura). -------------------------------------------------------------------------- */ /* Fallback por defecto: contenido siempre visible */ .reveal { opacity: 1; transform: none; } /* Solo ocultar cuando JS está activo y el observer va a activarlas */ .js-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js-ready .reveal.visible { opacity: 1; transform: translateY(0); } .js-ready .reveal-delay-1 { transition-delay: 0.08s; } .js-ready .reveal-delay-2 { transition-delay: 0.18s; } .js-ready .reveal-delay-3 { transition-delay: 0.28s; } .js-ready .reveal-delay-4 { transition-delay: 0.38s; } /* -------------------------------------------------------------------------- Botones -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; border: none; border-radius: 0; transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--color-terracotta); color: var(--color-text); } .btn-primary:hover { background: var(--color-orange); } .btn-outline { background: transparent; color: var(--color-text); border: 1px solid rgba(245, 240, 234, 0.30); } .btn-outline:hover { border-color: var(--color-beige); color: var(--color-beige); } .btn-ghost { background: transparent; color: var(--color-text-dim); border: 1px solid rgba(245, 240, 234, 0.15); padding: 0.6rem 1.25rem; font-size: 0.72rem; } .btn-ghost:hover { color: var(--color-text); border-color: rgba(245, 240, 234, 0.4); } /* -------------------------------------------------------------------------- Navegación -------------------------------------------------------------------------- */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.5rem 0; transition: background 0.4s var(--ease), padding 0.4s var(--ease), backdrop-filter 0.4s; } .site-nav.scrolled { padding: 0.9rem 0; background: rgba(13, 21, 39, 0.90); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(245, 240, 234, 0.06); } .nav-inner { display: flex; align-items: center; justify-content: space-between; } /* Wordmark tipográfico — se reemplaza fácilmente por un logo en el futuro */ /* Para añadir un logo: sustituye el texto por AMARTE */ .nav-wordmark { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text); text-decoration: none; line-height: 1; } .nav-links { display: flex; align-items: center; gap: 2.25rem; } .nav-links a { font-size: 0.73rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-dim); transition: color 0.2s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--color-orange); transition: width 0.3s var(--ease); } .nav-links a:hover { color: var(--color-text); } .nav-links a:hover::after { width: 100%; } /* Menú hamburguesa para móvil */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 24px; background: none; border: none; padding: 0; cursor: pointer; z-index: 1001; } .nav-toggle span { display: block; height: 1px; background: var(--color-text); transition: transform 0.3s var(--ease), opacity 0.3s, width 0.3s; } .nav-toggle span:nth-child(2) { width: 70%; } .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; width: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Menú móvil desplegable */ .nav-mobile { display: none; position: fixed; inset: 0; background: rgba(13, 21, 39, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); } .nav-mobile.open { display: flex; opacity: 1; pointer-events: all; } .nav-mobile a { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 500; color: var(--color-text-dim); letter-spacing: 0.05em; transition: color 0.2s; } .nav-mobile a:hover { color: var(--color-text); } /* -------------------------------------------------------------------------- Hero — sección completa en pantalla -------------------------------------------------------------------------- */ .hero { position: relative; height: 100svh; min-height: 620px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: brightness(0.62) saturate(0.85); transform: scale(1.03); animation: heroScale 12s var(--ease-out) forwards; } @keyframes heroScale { from { transform: scale(1.06); } to { transform: scale(1.00); } } /* Gradiente superpuesto para legibilidad */ .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(13,21,39,0.55) 0%, transparent 35%, transparent 50%, rgba(13,21,39,0.90) 100%), linear-gradient(to right, rgba(13,21,39,0.25) 0%, transparent 60%); } .hero-content { position: relative; z-index: 2; padding: 0 var(--gutter) 5rem; max-width: 760px; animation: heroFadeUp 1.2s 0.3s var(--ease-out) both; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-genre { font-size: 0.68rem; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-blue-slate); margin-bottom: 1.25rem; } .hero-name { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 10rem); font-weight: 600; letter-spacing: 0.06em; line-height: 0.9; text-transform: uppercase; color: var(--color-text); margin-bottom: 2rem; } .hero-upcoming { display: inline-flex; align-items: center; gap: 1rem; margin-bottom: 2.25rem; } .hero-upcoming-badge { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-orange); background: rgba(223, 136, 80, 0.12); border: 1px solid rgba(223, 136, 80, 0.3); padding: 0.3rem 0.75rem; } .hero-upcoming-title { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--color-text-dim); letter-spacing: 0.03em; } .hero-upcoming-date { font-size: 0.68rem; letter-spacing: 0.15em; color: var(--color-text-faint); } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* Indicador de scroll */ .hero-scroll { position: absolute; bottom: 2rem; right: var(--gutter); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.45; animation: scrollBounce 2.5s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } .hero-scroll span { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; writing-mode: vertical-rl; } .hero-scroll::after { content: ''; width: 1px; height: 40px; background: var(--color-text); } /* -------------------------------------------------------------------------- scroll-margin-top — compensa el header fijo en todos los anclajes -------------------------------------------------------------------------- */ #inicio, #ultimo, #musica, #videos, #sobre, #prensa, #contacto, #directos { scroll-margin-top: 72px; } /* -------------------------------------------------------------------------- Último lanzamiento -------------------------------------------------------------------------- */ .latest-release { padding: var(--section-gap) 0; /* Transición suave desde el héroe (midnight profundo) */ background: linear-gradient(to bottom, #0a1120 0%, #0f1c34 60%, #13213b 100%); } .latest-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .latest-meta {} .latest-meta .section-label { margin-bottom: 0.75rem; } .latest-title { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 500; line-height: 1.05; margin-bottom: 0.5rem; } .latest-subtitle { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 1.5rem; } .latest-description { font-size: 0.97rem; color: var(--color-text-dim); line-height: 1.75; margin-bottom: 2rem; max-width: 44ch; } .latest-links { display: flex; gap: 0.75rem; flex-wrap: wrap; } .latest-player { border-radius: 0; overflow: hidden; } .latest-player iframe { width: 100%; border: none; border-radius: 0; } /* -------------------------------------------------------------------------- Discografía / Música -------------------------------------------------------------------------- */ .music { padding: var(--section-gap) 0; /* Continúa desde latest-release, introduce sutilmente calidez */ background: linear-gradient(to bottom, #13213b 0%, #14213C 50%, #1c1a38 100%); } .music-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3.5rem; gap: 1.5rem; } .releases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } .release-card { display: flex; flex-direction: column; border: 1px solid rgba(245, 240, 234, 0.07); transition: border-color 0.3s, transform 0.3s var(--ease); background: rgba(255,255,255,0.018); } .release-card:hover { border-color: rgba(245, 240, 234, 0.16); transform: translateY(-3px); } /* Placeholder para portada — añade assets/images/release-[id].jpg para cada single */ .release-artwork { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--color-burgundy); display: flex; align-items: center; justify-content: center; } .release-artwork img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .release-card:hover .release-artwork img { transform: scale(1.04); } .release-artwork-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; background: linear-gradient(135deg, var(--color-burgundy), var(--color-midnight)); } .release-artwork-placeholder .release-artwork-title { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; color: rgba(245,240,234,0.45); text-align: center; padding: 0 1rem; } .release-artwork-placeholder .release-artwork-hint { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,240,234,0.2); } .release-upcoming-badge { position: absolute; top: 1rem; left: 1rem; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; background: var(--color-orange); color: #fff; padding: 0.3rem 0.65rem; font-weight: 500; } .release-info { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .release-type { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 0.3rem; } .release-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin-bottom: 0.15rem; line-height: 1.2; } .release-year { font-size: 0.7rem; color: var(--color-text-faint); letter-spacing: 0.1em; margin-bottom: 1rem; } .release-upcoming-info { font-size: 0.72rem; color: var(--color-orange); letter-spacing: 0.1em; margin-bottom: 1rem; font-style: italic; } .release-stream-links { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: auto; } /* -------------------------------------------------------------------------- Vídeos -------------------------------------------------------------------------- */ .videos { padding: var(--section-gap) 0; /* Transición lenta de midnight-frío hacia el calor borgoña */ background: linear-gradient(to bottom, #1c1a38 0%, #2e1228 35%, #3d1618 70%, #461A1A 100%); } .videos .section-title { color: var(--color-beige); } .videos-header { margin-bottom: 3rem; } .videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .video-card {} .video-embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-deep); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .video-caption { padding: 1rem 0 0.25rem; } .video-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; margin-bottom: 0.2rem; } .video-desc { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(202, 187, 174, 0.55); } /* -------------------------------------------------------------------------- Sobre AMARTE (About) -------------------------------------------------------------------------- */ .about { padding: var(--section-gap) 0; /* Transición gradual desde borgoña oscuro hacia el beige cálido */ background: linear-gradient(to bottom, #461A1A 0%, #7a3525 18%, #b08a74 42%, #CABBAE 62%, #C8B8AB 100%); color: var(--color-midnight); } .about .section-label { color: var(--color-terracotta); } .about .section-title { color: var(--color-midnight); } .about-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .about-photo { position: relative; overflow: hidden; } .about-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block; } /* Sutil marco decorativo */ .about-photo::before { content: ''; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 1px solid rgba(95, 64, 46, 0.20); z-index: -1; } .about-text {} .about-text .section-title { margin-bottom: 2rem; } .about-paragraphs p { font-size: clamp(0.92rem, 1.2vw, 1.05rem); line-height: 1.85; color: rgba(20, 33, 60, 0.80); margin-bottom: 1.25rem; } .about-paragraphs p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Prensa — fotografías -------------------------------------------------------------------------- */ .press { padding: var(--section-gap) 0; /* Transición desde el beige cálido de About hacia el azul medianoche */ background: linear-gradient(to bottom, #C8B8AB 0%, #9a8070 12%, #3a2838 45%, #14213C 100%); } /* Textos de la cabecera de prensa — visibles sobre el fondo claro superior */ .press .section-label { color: var(--color-terracotta); } .press .section-title { color: var(--color-midnight); } .press-header { margin-bottom: 1.5rem; } .press-intro { font-size: 0.95rem; color: rgba(20, 33, 60, 0.75); max-width: 56ch; line-height: 1.75; margin-bottom: 2.5rem; } .press-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .press-photo { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--color-burgundy); cursor: pointer; } .press-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s var(--ease), filter 0.4s; filter: brightness(0.9) saturate(0.9); } .press-photo:hover img { transform: scale(1.05); filter: brightness(1) saturate(1); } .press-photo-overlay { position: absolute; inset: 0; background: rgba(13,21,39,0.55); display: flex; align-items: flex-end; padding: 1rem; opacity: 0; transition: opacity 0.3s; } .press-photo:hover .press-photo-overlay { opacity: 1; } .press-photo-dl { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-beige); } /* -------------------------------------------------------------------------- Contacto -------------------------------------------------------------------------- */ .contact { padding: var(--section-gap) 0; /* Continúa desde el midnight de Prensa hacia el borgoña oscuro */ background: linear-gradient(to bottom, #14213C 0%, #1f1430 50%, #351018 100%); } .contact-header { margin-bottom: 3.5rem; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: rgba(245,240,234,0.07); } .contact-item { padding: 2.5rem 2rem; background: var(--color-midnight); transition: background 0.3s; } .contact-item:hover { background: rgba(20,33,60,0.85); } .contact-item-label { font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-orange); margin-bottom: 0.75rem; } .contact-item-desc { font-size: 0.8rem; color: var(--color-text-faint); margin-bottom: 1rem; letter-spacing: 0.04em; } .contact-item-email { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 500; color: var(--color-text); word-break: break-all; transition: color 0.2s; } .contact-item-email:hover { color: var(--color-beige); } /* -------------------------------------------------------------------------- Pie de página (Footer) -------------------------------------------------------------------------- */ .site-footer { /* Continúa el descenso desde el borgoña oscuro de Contacto */ background: linear-gradient(to bottom, #351018 0%, #090e1b 45%, #060a14 100%); padding: 3.5rem 0 2rem; border-top: none; } .footer-inner { display: flex; flex-direction: column; gap: 2.5rem; } .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; } .footer-wordmark { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-text-dim); } .footer-social { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .footer-social a { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-faint); transition: color 0.2s; display: flex; align-items: center; gap: 0.5rem; } .footer-social a:hover { color: var(--color-text); } .footer-social a svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } .footer-divider { height: 1px; background: rgba(245,240,234,0.06); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-size: 0.7rem; color: var(--color-text-faint); letter-spacing: 0.08em; } .footer-legal { display: flex; gap: 1.75rem; flex-wrap: wrap; } .footer-legal a { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); transition: color 0.2s; } .footer-legal a:hover { color: var(--color-text-dim); } /* -------------------------------------------------------------------------- Sección de directos — preparada y oculta Para activarla: cambia display:none a block y descomenta en main.js -------------------------------------------------------------------------- */ .shows { display: none; padding: var(--section-gap) 0; background: linear-gradient(to bottom, #14213C, #1c1a38); } /* -------------------------------------------------------------------------- Páginas legales (compartido) -------------------------------------------------------------------------- */ .legal-page { min-height: 100vh; padding: 10rem 0 6rem; } .legal-page h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; margin-bottom: 0.75rem; line-height: 1.1; } .legal-page .legal-updated { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--color-text-faint); margin-bottom: 3rem; text-transform: uppercase; } .legal-page h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; margin: 2.5rem 0 0.75rem; } .legal-page p { font-size: 0.95rem; color: var(--color-text-dim); line-height: 1.8; margin-bottom: 1rem; max-width: 72ch; } .legal-page a { color: var(--color-blue-slate); } .legal-page a:hover { color: var(--color-beige); } .legal-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 3rem; transition: color 0.2s; } .legal-back:hover { color: var(--color-text); } /* -------------------------------------------------------------------------- Responsive — tablet -------------------------------------------------------------------------- */ @media (max-width: 900px) { :root { --section-gap: var(--section-gap-m); --gutter: 1.5rem; } .nav-links { display: none; } .nav-toggle { display: flex; } .latest-inner { grid-template-columns: 1fr; gap: 2.5rem; } .about-inner { grid-template-columns: 1fr; gap: 2.5rem; } .contact-grid { grid-template-columns: 1fr; gap: 1.5px; } .press-photos { grid-template-columns: repeat(2, 1fr); } .music-header { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------------------------------- Responsive — móvil -------------------------------------------------------------------------- */ @media (max-width: 540px) { :root { --gutter: 1.25rem; } .hero-name { letter-spacing: 0.04em; } .releases-grid { grid-template-columns: 1fr; } .videos-grid { grid-template-columns: 1fr; } .press-photos { grid-template-columns: 1fr 1fr; } .footer-top { flex-direction: column; align-items: flex-start; } .footer-bottom { flex-direction: column; align-items: flex-start; } .press-epk { flex-direction: column; align-items: flex-start; } .hero-actions { flex-direction: column; } .hero-actions .btn { text-align: center; justify-content: center; } } /* -------------------------------------------------------------------------- Accesibilidad — preferencia de movimiento reducido -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } } //* Fotografía de fondo de la sección Vídeos */ section#videos { position: relative; isolation: isolate; overflow: hidden; background: #14213c; } section#videos::before, section#videos::after { display: none !important; } .videos-background { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.42; pointer-events: none; } section#videos > .container { position: relative; z-index: 1; } .press-photo-link { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; cursor: zoom-in; } /* Fondo exclusivo del bloque de singles */ section#musica.music { position: relative; overflow: hidden; isolation: isolate; } /* Ajuste de encuadre de fotos concretas del Archivo visual */ .press-photo-link[data-lightbox-src*="archivo-01.jpg"] img { object-position: 72% center; } .press-photo-link[data-lightbox-src*="archivo-04.jpg"] img { object-position: 72% center; } .press-photo-link[data-lightbox-src*="archivo-05.jpg"] img { object-position: 60% center; } /* Botones de la galería */ button.press-photo-link { appearance: none; border: 0; padding: 0; background: transparent; font: inherit; text-align: inherit; } /* Visor ampliado */ .photo-lightbox[hidden] { display: none; } .photo-lightbox:not([hidden]) { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 2rem; background: rgba(10, 14, 26, 0.92); backdrop-filter: blur(6px); } .photo-lightbox-image { display: block; width: auto; height: auto; max-width: min(92vw, 1400px); max-height: 86vh; object-fit: contain; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45); } .photo-lightbox-close { position: fixed; top: 1.25rem; right: 1.5rem; z-index: 10000; width: 3rem; height: 3rem; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; background: rgba(20, 33, 60, 0.75); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; } .photo-lightbox-close:hover, .photo-lightbox-close:focus-visible { background: rgba(70, 26, 26, 0.92); } body.lightbox-open { overflow: hidden; } @media (max-width: 700px) { .photo-lightbox:not([hidden]) { padding: 1rem; } .photo-lightbox-image { max-width: 94vw; max-height: 82vh; } .photo-lightbox-close { top: 0.75rem; right: 0.75rem; } }