/* ===========================================================
   Bruna Anfruns — fulla d'estil
   Estètica: country / Americana amb arrels d'Osona
   =========================================================== */

:root{
  --wine:      #6e2433;
  --wine-deep: #4a1722;
  --cream:     #f5efe4;
  --bone:      #faf7f0;
  --denim:     #3c5a72;
  --gold:      #bf9b5a;
  --ink:       #2a2320;
  --muted:     #6f6258;
  --line:      #e2d8c7;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --script: "Great Vibes", "Fraunces", cursive;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  --maxw: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bone);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.1; }
.section-tag{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:600;
  color:var(--wine);
  display:inline-block;
  margin-bottom:1rem;
}
.section-title{
  font-size:clamp(2rem, 5vw, 3.2rem);
  margin-bottom:1.4rem;
}

.container{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }
section{ padding:6.5rem 0; }

/* ---------- Botons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.95rem 2.1rem;
  border-radius:2px;
  transition:.25s ease;
  cursor:pointer;
  border:1.5px solid var(--wine);
}
.btn-solid{ background:var(--wine); color:var(--bone); }
.btn-solid:hover{ background:var(--wine-deep); border-color:var(--wine-deep); }
.btn-ghost{ background:transparent; color:var(--cream); border-color:var(--cream); }
.btn-ghost:hover{ background:var(--cream); color:var(--ink); }

/* =========================================================
   NAVEGACIÓ
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 2.2rem;
  transition:.35s ease;
}
.nav.scrolled{
  background:rgba(250,247,240,.96);
  padding:.9rem 2.2rem;
  box-shadow:0 1px 20px rgba(0,0,0,.07);
}
.nav-logo{
  font-family:var(--script);
  font-size:1.75rem;
  letter-spacing:.01em;
  color:var(--cream);
  transition:color .35s ease;
}
.nav.scrolled .nav-logo{ color:var(--ink); }
.nav-links{ display:flex; gap:2.1rem; list-style:none; align-items:center; }
.nav-links a{
  font-size:.82rem; font-weight:500; letter-spacing:.04em;
  color:var(--cream); position:relative; padding-bottom:3px;
  transition:color .35s ease;
}
.nav.scrolled .nav-links a{ color:var(--ink); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--wine); transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.nav-toggle span{ width:26px; height:2px; background:var(--cream); transition:.3s; }
.nav.scrolled .nav-toggle span{ background:var(--ink); }

/* =========================================================
   HERO / INICI
   ========================================================= */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:center;
  color:var(--cream);
}
.hero-bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-bg img{ position:absolute; left:0; bottom:0; width:100%; height:130%; object-fit:cover; object-position:center bottom; will-change:transform; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,20,25,.45) 0%, rgba(20,20,25,.15) 35%, rgba(20,20,25,.55) 100%);
}
.hero-content{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; width:100%; }
.hero-kicker{
  text-transform:uppercase; letter-spacing:.32em; font-size:.78rem;
  font-weight:600; margin-bottom:1.2rem; opacity:.92;
}
.hero h1{
  font-family:var(--script);
  font-size:clamp(2.6rem, 11vw, 9rem);
  line-height:1; margin-bottom:1.2rem; letter-spacing:.01em; font-weight:400;
  white-space:nowrap;
}
.hero-sub{
  font-size:clamp(1.05rem,2.4vw,1.4rem);
  max-width:520px; margin-bottom:2.4rem; font-weight:300;
  font-family:var(--serif); font-style:italic;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; opacity:.85;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(8px);} }

/* =========================================================
   BIO
   ========================================================= */
.bio{ background:var(--bone); }
.bio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center; }
.bio-imgs{ position:relative; }
.bio-imgs img{ border-radius:3px; box-shadow:0 18px 50px rgba(40,30,25,.18); }
.bio-imgs .img-main{ width:100%; }
.bio-imgs .img-float{
  position:absolute; width:46%; right:-1.8rem; bottom:-2.2rem;
  border:6px solid var(--bone);
}
.bio-text p{ color:var(--muted); margin-bottom:1.15rem; }
.bio-text p strong{ color:var(--ink); font-weight:600; }
.bio-quote{
  font-family:var(--serif); font-style:italic; font-size:1.45rem;
  color:var(--wine); line-height:1.4; margin:1.8rem 0; padding-left:1.3rem;
  border-left:3px solid var(--gold);
}
.bio-roles{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:2rem; }
.bio-role{ text-align:center; }
.bio-role span{ display:block; font-family:var(--serif); font-size:2rem; color:var(--wine); }
.bio-role small{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }

/* =========================================================
   CONCERTS
   ========================================================= */
.concerts{ position:relative; color:var(--cream); }
.concerts-bg{ position:absolute; inset:0; z-index:-2; }
.concerts-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.concerts::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(30,15,18,.78); }
.concerts .section-tag{ color:var(--gold); }
.concerts .section-title{ color:var(--cream); }
.gig-list{ margin-top:2.5rem; border-top:1px solid rgba(255,255,255,.18); }
.gig{
  display:grid; grid-template-columns:130px 1fr auto; gap:1.5rem; align-items:center;
  padding:1.6rem 0; border-bottom:1px solid rgba(255,255,255,.18);
  transition:.25s;
}
.gig:hover{ background:rgba(255,255,255,.04); padding-left:.8rem; }
.gig-date{ font-family:var(--serif); }
.gig-date .day{ font-size:1.9rem; display:block; line-height:1; }
.gig-date .month{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold); }
.gig-info h3{ font-size:1.3rem; margin-bottom:.2rem; }
.gig-info p{ font-size:.9rem; opacity:.8; }
.gig-cta a{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  border:1px solid var(--gold); color:var(--gold); padding:.6rem 1.3rem; border-radius:2px;
  transition:.25s; white-space:nowrap;
}
.gig-cta a:hover{ background:var(--gold); color:var(--wine-deep); }
.gig.past{ opacity:.5; }
.gig.past .gig-cta span{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
.gig-empty{ padding:2rem 0; font-style:italic; opacity:.8; }

/* =========================================================
   PREMSA
   ========================================================= */
.premsa{ background:var(--cream); }
.press-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:2rem; margin-top:2.5rem; }
.press-card{
  background:var(--bone); border:1px solid var(--line); border-radius:4px; overflow:hidden;
  display:flex; flex-direction:column; transition:.3s;
}
.press-card:hover{ transform:translateY(-5px); box-shadow:0 16px 40px rgba(40,30,25,.13); }
.press-card .press-img{ aspect-ratio:16/10; overflow:hidden; }
.press-card .press-img img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.press-card:hover .press-img img{ transform:scale(1.05); }
.press-body{ padding:1.6rem; display:flex; flex-direction:column; flex:1; }
.press-meta{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--wine); margin-bottom:.7rem; font-weight:600; }
.press-body h3{ font-size:1.3rem; margin-bottom:.7rem; line-height:1.25; }
.press-body p{ font-size:.92rem; color:var(--muted); flex:1; margin-bottom:1.2rem; }
.press-link{ font-size:.8rem; font-weight:600; color:var(--wine); letter-spacing:.04em; }
.press-link::after{ content:" →"; transition:.2s; }
.press-card:hover .press-link::after{ margin-left:4px; }

/* =========================================================
   MULTIMÈDIA
   ========================================================= */
.multimedia{ background:var(--bone); }
.tabs{ display:flex; gap:.5rem; justify-content:center; margin:2.5rem 0; flex-wrap:wrap; }
.tab-btn{
  font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:.7rem 1.6rem; border:1px solid var(--line);
  background:transparent; color:var(--muted); border-radius:2px; cursor:pointer; transition:.25s;
}
.tab-btn.active{ background:var(--wine); color:var(--bone); border-color:var(--wine); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fade .4s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

.video-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.8rem; }
.video-embed{ position:relative; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:#000; box-shadow:0 12px 34px rgba(40,30,25,.16); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-caption{ margin-top:.7rem; font-family:var(--serif); font-size:1.05rem; }

.lyrics-list{ max-width:760px; margin:0 auto; }
.lyrics-soon{
  max-width:760px; margin:1.6rem auto 0; padding:1.4rem 1.6rem;
  background:rgba(110,36,51,.06); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:4px; color:var(--muted); font-size:.98rem;
}
.lyrics-soon strong{ color:var(--wine); }
.lyric{ border-bottom:1px solid var(--line); }
.lyric-head{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem .3rem; font-family:var(--serif); font-size:1.3rem; color:var(--ink);
}
.lyric-head .plus{ font-size:1.5rem; color:var(--wine); transition:.3s; }
.lyric.open .plus{ transform:rotate(45deg); }
.lyric-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.lyric-body-inner{ padding:0 .3rem 1.6rem; white-space:pre-line; color:var(--muted); line-height:1.9; }

/* ---------- Secció Xarxes & Spotify ---------- */
.xarxes{ background:var(--cream); }
.xarxes-intro{ color:var(--muted); max-width:520px; margin:0 auto 2.5rem; }
.social-embeds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.8rem; align-items:start; text-align:center; }
.embed-card{ background:var(--bone); border:1px solid var(--line); border-radius:6px; padding:1.4rem; text-align:center; }
.embed-card h3{ font-size:1.2rem; margin-bottom:1rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.spotify-embed iframe{ border-radius:12px; width:100%; }
.embed-placeholder{
  border:2px dashed var(--line); border-radius:6px; padding:2.5rem 1rem; color:var(--muted);
  font-size:.9rem;
}
.embed-card .btn{ margin-top:1rem; }

/* Graella d'Instagram */
.ig-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  border-radius:6px; overflow:hidden; position:relative;
}
.ig-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:.3s; }
.ig-grid-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(110,36,51,.0); color:transparent;
  font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  transition:.3s;
}
.ig-grid:hover .ig-grid-overlay{ background:rgba(110,36,51,.72); color:var(--bone); }
.ig-grid:hover img{ filter:brightness(.9); }

/* Mosaic de TikTok: icona de play al centre */
.tk-grid .tk-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; padding-left:4px;
  pointer-events:none; transition:.3s;
}
.tk-grid:hover .tk-play{ opacity:0; }

/* =========================================================
   CONTACTE
   ========================================================= */
.contacte{ position:relative; color:var(--cream); }
.contacte-bg{ position:absolute; inset:0; z-index:-2; }
.contacte-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.contacte::after{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(25,20,18,.8); }
.contacte .section-tag{ color:var(--gold); }
.contacte .section-title{ color:var(--cream); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:2rem; align-items:start; }
.contact-intro p{ opacity:.88; margin-bottom:1.6rem; max-width:380px; }
.contact-channels{ list-style:none; }
.contact-channels li{ margin-bottom:1rem; display:flex; gap:.8rem; align-items:center; font-size:.95rem; }
.contact-channels .label{ color:var(--gold); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600; min-width:90px; display:inline-block; }

.contact-form{ display:grid; gap:1.1rem; }
.contact-form label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); margin-bottom:.35rem; display:block; }
.contact-form input,
.contact-form textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);
  color:var(--cream); padding:.85rem 1rem; border-radius:3px; font-family:var(--sans); font-size:.95rem;
  transition:.2s;
}
.contact-form input:focus,
.contact-form textarea:focus{ outline:none; border-color:var(--gold); background:rgba(255,255,255,.1); }
.contact-form textarea{ resize:vertical; min-height:130px; }
.contact-form .btn{ justify-self:start; }
.form-note{ font-size:.78rem; opacity:.6; margin-top:.4rem; }
.form-status{ font-size:.9rem; font-weight:500; margin-top:.2rem; min-height:1.2em; }
.form-status.ok{ color:#9ad6a0; }
.form-status.err{ color:#f0a6a6; }
.contact-form button[disabled]{ opacity:.6; cursor:wait; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--wine-deep); color:var(--cream); padding:3.5rem 0 2rem; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.footer-logo{ font-family:var(--script); font-size:2.3rem; }
.footer-social{ display:flex; gap:1.3rem; }
.footer-social a{ font-size:.85rem; letter-spacing:.04em; opacity:.85; transition:.2s; }
.footer-social a:hover{ opacity:1; color:var(--gold); }
.footer-credits{ text-align:center; margin-top:2.5rem; font-size:.76rem; opacity:.55; letter-spacing:.03em; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:880px){
  .bio-grid{ grid-template-columns:1fr; gap:3rem; }
  .bio-imgs{ max-width:440px; }
  .contact-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .gig{ grid-template-columns:90px 1fr; }
  .gig-cta{ grid-column:2; justify-self:start; margin-top:.4rem; }

  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--bone); flex-direction:column; justify-content:center; gap:2rem;
    transform:translateX(100%); transition:.35s ease; box-shadow:-10px 0 40px rgba(0,0,0,.18);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:var(--ink) !important; font-size:1.05rem; }
  .nav-toggle{ display:flex; z-index:1100; }
  .nav.menu-open .nav-toggle span{ background:var(--ink); }
  .nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px){
  section{ padding:4.5rem 0; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ text-align:center; }
}