/* ═══════════════════════════════════════════════════════════
   NADIA CRUSOE — Proyectos shared styles
   ═══════════════════════════════════════════════════════════ */

@import url('../servicios/shared.css');

/* ─── PROJECT HERO ─── */
.proj-hero {
  position:relative; width:100%; height:100vh; min-height:500px;
  overflow:hidden; display:flex; align-items:flex-end;
}
.proj-hero-media {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.proj-hero-vignette {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,9,22,1) 0%, rgba(13,9,22,.4) 50%, rgba(13,9,22,.2) 100%);
  z-index:1;
}
.proj-hero-content {
  position:relative; z-index:2;
  padding:0 clamp(24px,6vw,96px) clamp(48px,8vh,96px);
  width:100%;
}
.proj-back {
  display:inline-block; margin-bottom:24px;
  font-family:'Space Mono', monospace; font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-muted); text-decoration:none;
  transition:color .3s;
}
.proj-back:hover { color:var(--fg); }
.proj-eyebrow {
  display:block; margin-bottom:12px;
  font-family:'Space Mono', monospace; font-size:.6rem;
  letter-spacing:.25em; text-transform:uppercase; color:var(--accent);
}
.proj-title {
  font-family:'Syne', sans-serif; font-size:clamp(3rem,9vw,8rem);
  font-weight:800; letter-spacing:-.03em; line-height:.95;
  color:var(--fg); margin-bottom:8px;
  text-shadow:0 2px 32px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.8);
}
.proj-title em {
  font-family:'Instrument Serif', serif; font-style:italic;
  font-weight:400;
}
.proj-artist {
  font-family:'DM Sans', sans-serif; font-size:clamp(.9rem,1.5vw,1.1rem);
  font-weight:200; color:var(--fg-dim); letter-spacing:.05em;
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.proj-tags {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
}
.proj-tag {
  font-family:'Space Mono', monospace; font-size:.52rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-muted); border:1px solid rgba(229,189,223,.2);
  padding:5px 10px; border-radius:2px;
}

/* ─── SECTION LABEL ─── */
.proj-section-label {
  display:block; margin-bottom:32px;
  font-family:'Space Mono', monospace; font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}

/* ─── GALLERY ─── */
.proj-gallery {
  padding:80px clamp(24px,6vw,96px);
}
.proj-gallery-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
}
.proj-gallery-grid img {
  width:100%; aspect-ratio:1/1; object-fit:cover;
  display:block;
  transition:opacity .4s, transform .6s cubic-bezier(.25,1,.5,1);
}
.proj-gallery-grid img:hover { opacity:.88; transform:scale(1.02); }
@media (max-width:600px) { .proj-gallery-grid { grid-template-columns:repeat(2, 1fr); gap:4px; } }

/* ─── VIDEO ─── */
.proj-video {
  padding:0 clamp(24px,6vw,96px) 80px;
}
.proj-video-wrap {
  position:relative; width:100%; padding-bottom:56.25%;
  background:#0d0916; border-radius:4px; overflow:hidden;
}
.proj-video-wrap iframe,
.proj-video-wrap video {
  position:absolute; inset:0; width:100%; height:100%;
  border:none;
}
.proj-video-native {
  width:100%; border-radius:4px; display:block;
  max-height:70vh; object-fit:cover;
}
.proj-video-link {
  display:inline-flex; align-items:center; gap:10px;
  margin-top:14px;
  font-family:'Space Mono', monospace; font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-muted); text-decoration:none;
  transition:color .3s, gap .3s;
}
.proj-video-link:hover { color:var(--fg); gap:14px; }

/* ─── YOUTUBE FACADE ─── */
.yt-facade { cursor:pointer; }
.yt-facade .yt-thumb {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:filter .4s;
}
.yt-facade:hover .yt-thumb { filter:brightness(.75); }
.yt-play {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:72px; height:50px;
  background:rgba(0,0,0,.75); border:none; border-radius:14px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
  z-index:2; pointer-events:none;
}
.yt-facade:hover .yt-play {
  background:#ff0000;
  transform:translate(-50%,-50%) scale(1.1);
}
.yt-play::after {
  content:''; border-style:solid;
  border-width:11px 0 11px 20px;
  border-color:transparent transparent transparent #fff;
  margin-left:5px;
}

/* ─── SONG SECTIONS (Plenty) ─── */
.proj-songs { padding:0 clamp(24px,6vw,96px) 80px; }
.proj-song {
  margin-bottom:100px; padding-bottom:100px;
  border-bottom:1px solid rgba(229,189,223,.08);
}
.proj-song:last-child { border-bottom:none; margin-bottom:0; }

.proj-song-header {
  position:relative; overflow:hidden;
  padding:40px 0 36px;
  margin-bottom:40px;
  border-top:1px solid rgba(229,189,223,.1);
}
.proj-song-num-bg {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(8rem,20vw,16rem); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(248,242,252,.05);
  position:absolute; right:-8px; top:50%; transform:translateY(-50%);
  line-height:1; user-select:none; pointer-events:none;
}
.proj-song-num {
  font-family:'Space Mono', monospace; font-size:.58rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:14px;
}
.proj-song-title {
  font-family:'Syne', sans-serif; font-weight:800;
  font-size:clamp(2.2rem,5.5vw,5rem);
  letter-spacing:-.03em; line-height:.95; color:var(--fg);
}

/* video inside a song (visualiser) */
.proj-song-video {
  margin-bottom:32px;
}

.proj-song-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:6px; margin-top:20px;
}
.proj-song-grid img {
  width:100%; aspect-ratio:1/1; object-fit:cover;
  display:block;
  transition:opacity .4s, transform .6s cubic-bezier(.25,1,.5,1);
}
.proj-song-grid img:hover { opacity:.88; transform:scale(1.03); }
@media (max-width:600px) { .proj-song-grid { grid-template-columns:repeat(2,1fr); } }
.proj-song-note {
  margin-top:20px;
  font-family:'Space Mono', monospace; font-size:.5rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-muted);
}

/* ─── BUY LINK ─── */
.proj-buy {
  padding:64px clamp(24px,6vw,96px);
  border-top:1px solid rgba(229,189,223,.08);
  display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.proj-buy-text {
  font-family:'DM Sans', sans-serif; font-weight:200;
  font-size:clamp(.9rem,1.4vw,1rem); color:var(--fg-dim); max-width:380px;
  line-height:1.65;
}
.proj-buy-text strong {
  font-family:'Syne', sans-serif; font-weight:700; font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--fg); display:block; margin-bottom:8px;
}
.proj-buy-btn {
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Space Mono', monospace; font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bg); background:var(--accent);
  text-decoration:none; padding:16px 32px; flex-shrink:0;
  transition:opacity .3s, transform .3s;
}
.proj-buy-btn:hover { opacity:.85; transform:translateY(-2px); }

/* ─── CREDITS ─── */
.proj-credits {
  padding:80px clamp(24px,6vw,96px);
  border-top:1px solid rgba(229,189,223,.08);
}
.proj-credits h2 {
  font-family:'Syne', sans-serif; font-size:clamp(1.4rem,3vw,2rem);
  font-weight:700; margin-bottom:40px; color:var(--fg);
}
.credits-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:24px 40px;
}
.credit-item {}
.credit-role {
  font-family:'Space Mono', monospace; font-size:.55rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:6px;
}
.credit-name {
  font-family:'Syne', sans-serif; font-size:1rem;
  font-weight:700; color:var(--fg);
}
.credit-name a {
  color:inherit; text-decoration:none;
  transition:color .3s;
}
.credit-name a:hover { color:var(--accent); }

/* ─── REVISTA full-bleed ─── */
.proj-revista {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.proj-revista img {
  width:100%; display:block;
  object-fit:cover;
}

/* ─── CTA ─── */
.proj-cta {
  padding:100px clamp(24px,6vw,96px);
  text-align:center; border-top:1px solid rgba(229,189,223,.08);
}
.proj-cta-eyebrow {
  display:block; margin-bottom:16px;
  font-family:'Space Mono', monospace; font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-muted);
}
.proj-cta h2 {
  font-family:'Syne', sans-serif; font-size:clamp(2.5rem,6vw,5rem);
  font-weight:800; letter-spacing:-.03em; margin-bottom:32px; color:var(--fg);
}
.proj-cta h2 em {
  font-family:'Instrument Serif', serif; font-style:italic; font-weight:400;
}
.proj-cta-btn {
  display:inline-block; padding:14px 36px;
  font-family:'Space Mono', monospace; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bg); background:var(--fg);
  text-decoration:none; border-radius:2px;
  transition:background .3s, color .3s, transform .3s;
}
.proj-cta-btn:hover {
  background:var(--accent); color:var(--bg);
  transform:translateY(-2px);
}

/* ─── REVEAL ─── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity:1; transform:translateY(0); }