/* GENERATED by `pasteup sync` from components/, collections/ and page-templates/. Do not edit. */

/* ---- about ---- */
.about { max-width:32em; margin:0 auto; text-align:center; padding-top:3rem; border-top:1px solid #1f1f24; }
.about h2 { font-size:0.8rem; letter-spacing:0.4em; text-transform:lowercase; color:var(--muted); font-weight:300; margin-bottom:2rem; }
.artist-photo { width:140px; height:140px; border-radius:50%; object-fit:cover; margin:0 auto 1.5rem; display:block; border:1px solid #2a2a30; }
.about p { font-size:0.85rem; line-height:2; color:var(--fg); }
/* los fragmentos van separados: plantados solos, no como un bloque de prosa */
.about p + p { margin-top:1.6rem; }
.about p.closing { margin-top:2.4rem; color:var(--muted); font-size:0.78rem; letter-spacing:0.06em; }

/* ---- album_header ---- */
.header { text-align:center; margin-bottom:3rem; }
.artist { font-size:1.3rem; letter-spacing:0.15em; color:var(--fg); margin-bottom:1rem; opacity:0.9; }
.header h1 { font-size:2.5rem; font-weight:300; letter-spacing:0.08em; margin-bottom:0.5rem; }
.subtitle { color:var(--muted); font-size:0.8rem; letter-spacing:0.25em; }
.cover { width:100%; max-width:480px; aspect-ratio:1/1; margin:0 auto 3rem; display:block; border:1px solid #1f1f24; box-shadow:0 30px 80px rgba(0,0,0,0.6); }

/* ---- backdrop ---- */
.hero-bg { position:fixed; inset:0; background-image:radial-gradient(ellipse at center,rgba(10,10,12,0.88) 0%,rgba(10,10,12,0.96) 65%,rgba(10,10,12,1.0) 100%),var(--hero-image); background-size:cover; background-position:center; z-index:0; opacity:1; }
.nav-back { position:fixed; top:1.5rem; left:2rem; color:var(--muted); text-decoration:none; font-size:0.75rem; letter-spacing:0.3em; text-transform:lowercase; transition:color 0.3s; z-index:10; }
.nav-back:hover { color:var(--fg); }

/* ---- footer ---- */
footer { text-align:center; font-size:0.7rem; color:var(--muted); letter-spacing:0.25em; text-transform:lowercase; display:flex; justify-content:center; gap:0.8rem; align-items:center; flex-wrap:wrap; }
footer a { color:var(--muted); text-decoration:none; transition:color 0.3s; }
footer a:hover { color:var(--fg); }
footer .sep { opacity:0.4; }
/* home: pegado abajo de la pantalla */
.t-home footer { position:fixed; bottom:1.5rem; left:0; right:0; padding:0 1.5rem; gap:0.5rem 0.8rem; }
@media (max-width:480px) { .t-home footer { font-size:0.65rem; letter-spacing:0.18em; } }
/* album: al final del scroll, arriba del fondo fijo */
.t-album footer { position:relative; z-index:1; padding:4rem 2rem 2rem; }

/* ---- platforms ---- */
.platforms { display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem 2rem; margin:0 auto 4.5rem; max-width:36em; }
.platforms a { color:var(--fg); text-decoration:none; font-size:0.85rem; letter-spacing:0.25em; text-transform:lowercase; border-bottom:1px solid transparent; padding-bottom:4px; transition:all 0.3s; }
.platforms a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.platforms a.disabled { color:var(--muted); pointer-events:none; opacity:0.5; }

/* ---- spiral ---- */
.bg { position:fixed; inset:0; background:radial-gradient(ellipse at 30% 20%,rgba(80,60,90,0.15) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(40,50,80,0.12) 0%,transparent 55%),var(--bg); animation:drift 60s ease-in-out infinite alternate; z-index:-1; }
@keyframes drift { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(-3%,2%) scale(1.05);} }
.symbol { width:140px; height:140px; margin:0 auto 2rem; display:block; animation:rotate 180s linear infinite, pulse 24s ease-in-out infinite; filter:drop-shadow(0 0 14px rgba(138,122,144,0.35)); }
.symbol circle { stroke:none; fill:rgba(138,122,144,0.65); }
@keyframes rotate { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:0.75;} 30%{opacity:1.0;} 60%{opacity:0.85;} }
.t-home h1 { font-size:1rem; font-weight:300; letter-spacing:0.4em; text-transform:lowercase; margin-bottom:4rem; color:var(--fg); }
.phrase { font-size:0.95rem; line-height:1.9; color:var(--muted); font-style:italic; margin-bottom:4rem; max-width:28em; margin-left:auto; margin-right:auto; }
.links { display:flex; flex-direction:column; gap:0.8rem; align-items:center; }
.links a { color:var(--fg); text-decoration:none; font-size:0.85rem; letter-spacing:0.2em; border-bottom:1px solid transparent; padding-bottom:2px; transition:all 0.3s ease; }
.links a:hover { color:var(--accent); border-bottom-color:var(--accent); }

/* ---- tagline ---- */
.description { font-size:0.95rem; line-height:2.1; color:var(--fg); max-width:34em; margin:0 auto 5rem; text-align:center; font-style:italic; }

/* ---- visualizers ---- */
.visualizers { max-width:34em; margin:0 auto 3rem; text-align:center; padding-top:3rem; border-top:1px solid #1f1f24; }
.visualizers h2 { font-size:0.8rem; letter-spacing:0.4em; text-transform:lowercase; color:var(--muted); font-weight:300; margin-bottom:2rem; }
.viz-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.viz-grid a { text-decoration:none; color:var(--fg); display:block; }
.viz-grid img { width:100%; height:auto; display:block; border:1px solid #1f1f24; opacity:0.9; transition:border-color 0.3s, opacity 0.3s; }
.viz-grid a:hover img { border-color:var(--accent); opacity:1; }
.viz-grid span { display:block; font-size:0.72rem; letter-spacing:0.25em; text-transform:lowercase; margin-top:0.6rem; color:var(--fg); }
.viz-grid a:hover span { color:var(--accent); }
.viz-channel { display:inline-block; color:var(--fg); text-decoration:none; font-size:0.78rem; letter-spacing:0.25em; text-transform:lowercase; transition:color 0.3s; }
.viz-channel:hover { color:var(--accent); }
@media (max-width:520px) { .viz-grid { grid-template-columns:1fr; } }