:root{
  --green-900:#0b2e24;
  --green-800:#0f3a2e;
  --green-700:#154839;
  --gold:#d4b062;
  --gold-soft:#e8c983;
  --cream:#f6efe0;
  --white:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--green-800);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-soft)}

.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(11,46,36,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(212,176,98,.15);
}
.nav__inner{
  max-width:1100px;margin:0 auto;padding:.9rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.nav__logo{
  font-family:'Caveat',cursive;
  font-size:2rem;color:var(--gold);line-height:1;
}
.nav__links{display:flex;gap:1.5rem;list-style:none;flex-wrap:wrap}
.nav__links a{color:var(--cream);font-weight:600;font-size:.95rem}
.nav__links a:hover{color:var(--gold)}

/* HERO */
.hero{
  min-height:82vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:4rem 1.25rem;
  background:
    radial-gradient(ellipse at top,rgba(212,176,98,.08),transparent 60%),
    linear-gradient(180deg,var(--green-800),var(--green-900));
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='1' cy='1' r='.5' fill='%23d4b062' fill-opacity='.06'/%3E%3C/svg%3E");
  pointer-events:none;
}
.hero__content{position:relative;z-index:1;max-width:820px}
.hero__kicker{
  color:var(--gold);letter-spacing:.3em;text-transform:uppercase;
  font-size:.8rem;font-weight:600;margin-bottom:1rem;
}
.hero__title{
  font-family:'Caveat',cursive;
  font-size:clamp(5rem,16vw,11rem);
  color:var(--gold);line-height:.9;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero__tagline{
  font-size:clamp(1rem,2vw,1.25rem);
  margin:1.5rem auto 2.5rem;max-width:540px;
  color:var(--cream);
}
.hero__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* BUTTONS */
.btn{
  display:inline-block;padding:.9rem 1.8rem;border-radius:999px;
  font-weight:700;font-size:.95rem;letter-spacing:.05em;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
  cursor:pointer;border:2px solid transparent;
}
.btn--gold{background:var(--gold);color:var(--green-900)}
.btn--gold:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 8px 24px rgba(212,176,98,.25);color:var(--green-900)}
.btn--ghost{border-color:var(--gold);color:var(--gold);background:transparent}
.btn--ghost:hover{background:var(--gold);color:var(--green-900)}

/* SECTIONS */
.section{padding:5rem 1.25rem}
.section--dark{background:var(--green-900)}
.section__title{
  font-family:'Caveat',cursive;
  font-size:clamp(2.5rem,6vw,4rem);
  color:var(--gold);text-align:center;margin-bottom:1rem;
}
.section__lead{
  text-align:center;max-width:680px;margin:0 auto 3rem;
  font-size:1.05rem;color:var(--cream);opacity:.9;
}

/* BAND PHOTO */
.banda-photo{
  width:100%;max-width:900px;
  display:block;margin:0 auto 2.5rem;
  border-radius:16px;
  border:2px solid rgba(212,176,98,.25);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}

/* FEATURES */
.features{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;margin-top:2.5rem;
}
.features li{
  background:rgba(212,176,98,.06);
  border:1px solid rgba(212,176,98,.2);
  padding:1.25rem;border-radius:12px;
  display:flex;align-items:center;gap:.75rem;font-weight:600;
}
.features span{font-size:1.5rem}

/* VIDEOS */
.video-grid{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:2.5rem;
}
.video-card{
  aspect-ratio:16/9;border-radius:14px;
  background:linear-gradient(135deg,var(--green-700),var(--green-900));
  border:1px solid rgba(212,176,98,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--cream);font-weight:600;gap:.75rem;
  transition:transform .25s,border-color .25s;
}
.video-card:hover{transform:translateY(-4px);border-color:var(--gold);color:var(--gold)}
.video-card__play{
  width:64px;height:64px;border-radius:50%;
  background:var(--gold);color:var(--green-900);
  display:grid;place-items:center;font-size:1.5rem;padding-left:4px;
}
.center{text-align:center}

/* SONGS */
.songs{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:.6rem;max-width:960px;margin:0 auto;
}
.songs li{
  background:rgba(212,176,98,.06);
  border:1px solid rgba(212,176,98,.18);
  border-left:3px solid var(--gold);
  padding:.85rem 1rem;border-radius:8px;
  display:flex;flex-direction:column;gap:.15rem;
  transition:transform .2s,border-color .2s,background .2s;
}
.songs li:hover{transform:translateX(3px);background:rgba(212,176,98,.1)}
.songs__title{font-weight:700;color:var(--cream)}
.songs__artist{font-size:.85rem;color:var(--gold);opacity:.9}
.songs__note{
  text-align:center;margin-top:2rem;
  font-style:italic;color:var(--cream);opacity:.7;
}

/* GIGS */
.gigs{list-style:none;display:grid;gap:1rem;max-width:720px;margin:0 auto}
.gig{
  display:flex;gap:1.5rem;align-items:center;
  background:rgba(212,176,98,.06);
  border:1px solid rgba(212,176,98,.2);
  padding:1.25rem 1.5rem;border-radius:12px;
}
.gig__date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:80px;padding:.5rem 1rem;border-right:1px solid rgba(212,176,98,.25);
}
.gig__day{font-family:'Caveat',cursive;font-size:2.2rem;color:var(--gold);line-height:1}
.gig__month{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);opacity:.75}
.gig__info h3{color:var(--gold);margin-bottom:.25rem}

/* CONTACT */
.contact__grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:1rem;
}
.contact__card{
  background:rgba(212,176,98,.06);
  border:1px solid rgba(212,176,98,.2);
  padding:1.75rem 1.25rem;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  text-align:center;color:var(--cream);
  transition:transform .2s,border-color .2s,background .2s;
}
.contact__card:hover{
  transform:translateY(-3px);border-color:var(--gold);
  background:rgba(212,176,98,.12);color:var(--cream);
}
.contact__icon{font-size:2rem}
.contact__label{color:var(--gold);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.8rem}
.contact__value{font-weight:600}

/* CONTACT LAYOUT */
.contact__layout{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:2rem;
  align-items:start;
  max-width:860px;
  margin:0 auto;
}
.contact__socials{display:flex;flex-direction:column;gap:1rem}
.contact__card{
  background:rgba(212,176,98,.06);
  border:1px solid rgba(212,176,98,.2);
  padding:1.5rem 1.25rem;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  text-align:center;color:var(--cream);
  transition:transform .2s,border-color .2s,background .2s;
}
.contact__card:hover{
  transform:translateY(-3px);border-color:var(--gold);
  background:rgba(212,176,98,.12);color:var(--cream);
}
.contact__logo{width:2.2rem;height:2.2rem;color:var(--gold)}
.contact__logo--ig{color:url(#ig-grad)}
.contact__label{color:var(--gold);font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.8rem}
.contact__value{font-weight:600;font-size:.95rem}

/* WhatsApp green on hover */
.contact__card:has(.contact__logo:not(.contact__logo--ig)):hover .contact__logo{color:#25d366}
/* Instagram gradient on hover */
.contact__card:has(.contact__logo--ig):hover .contact__logo{color:#e1306c}

/* FORM */
.contact__form{
  display:flex;flex-direction:column;gap:1.25rem;
}
.form__group{display:flex;flex-direction:column;gap:.4rem}
.form__group label{
  font-weight:600;font-size:.9rem;
  color:var(--gold);letter-spacing:.04em;
}
.form__group input,
.form__group textarea{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(212,176,98,.25);
  border-radius:10px;
  padding:.85rem 1rem;
  color:var(--cream);
  font-family:inherit;font-size:1rem;
  transition:border-color .2s,background .2s;
  resize:vertical;
}
.form__group input::placeholder,
.form__group textarea::placeholder{opacity:.45}
.form__group input:focus,
.form__group textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(212,176,98,.08);
}
.contact__form .btn{align-self:flex-start}

@media(max-width:640px){
  .contact__layout{grid-template-columns:1fr}
  .contact__socials{flex-direction:row}
  .contact__form .btn{align-self:stretch;text-align:center}
}

/* FOOTER */
.footer{
  background:var(--green-900);
  border-top:1px solid rgba(212,176,98,.15);
  padding:2rem 1.25rem;text-align:center;
}
.footer__inner{display:flex;flex-direction:column;gap:.25rem}
.footer__small{opacity:.65;font-size:.85rem}

@media (max-width:640px){
  .nav__links{gap:1rem;font-size:.9rem}
  .hero{min-height:70vh}
  .section{padding:3.5rem 1.25rem}
  .gig{flex-direction:column;text-align:center;gap:.75rem}
  .gig__date{border-right:none;border-bottom:1px solid rgba(212,176,98,.25);padding-bottom:.75rem;min-width:auto}
}