/* ===========================================================
   LIVERBIRD — sitio oficial · hoja de estilos
   Paleta e identidad heredadas del dossier (verde + cobre + sunburst)
   =========================================================== */
:root{
  --green:#212d26;
  --green2:#2a3830;
  --green3:#38493d;
  --copper:#c68a5b;
  --copper2:#d7a074;
  --cream:#f2ece3;
  --cream2:#e7ddce;
  --ink:#1a221d;
  --muted:#8a978c;
  --maxw:1140px;
  --nav-h:70px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--green);color:var(--cream);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.disp{font-family:'Jost',sans-serif;font-weight:600;line-height:1.05}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}

/* ---- bilingual toggle mechanics (element-agnostic via display:revert) ---- */
.i-en{display:none}
body.lang-en .i-es{display:none}
body.lang-en .i-en{display:revert}

/* ---- shared layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:'Jost';font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  font-size:.72rem;color:var(--copper2)}
.rule{width:48px;height:3px;background:var(--copper);border:0;margin:14px 0 26px}
.sec-title{font-family:'Jost';font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.9rem,4.4vw,3rem);color:var(--cream)}
.pad{padding:100px 0}
.on-cream{background:var(--cream);color:var(--ink)}
.on-cream .sec-title{color:var(--green)}
.on-cream .lead,.on-cream p{color:#3a453e}
.lead{font-size:clamp(1rem,1.7vw,1.18rem);color:#c9d2c9;max-width:60ch}
.on-cream .eyebrow{color:var(--copper)}

.sun{position:absolute;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(var(--copper) 0deg .32deg, transparent .32deg 5deg);
  -webkit-mask:radial-gradient(closest-side,#000 62%,transparent 63%);
          mask:radial-gradient(closest-side,#000 62%,transparent 63%);}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Jost';font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;padding:14px 26px;border-radius:3px;
  transition:transform .15s ease,background .2s ease,color .2s ease;cursor:pointer;border:1.6px solid transparent}
.btn-primary{background:var(--copper);color:#201810}
.btn-primary:hover{background:var(--copper2);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(242,236,227,.35);color:var(--cream)}
.btn-ghost:hover{border-color:var(--copper2);color:var(--copper2);transform:translateY(-2px)}
.on-cream .btn-ghost{border-color:rgba(26,34,29,.28);color:var(--green)}
.on-cream .btn-ghost:hover{border-color:var(--copper);color:var(--copper)}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;transition:background .3s ease,box-shadow .3s ease,backdrop-filter .3s;}
.nav.scrolled{background:rgba(28,38,32,.92);backdrop-filter:blur(9px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{font-family:'Jost';font-weight:500;letter-spacing:.26em;font-size:1.15rem;color:var(--cream)}
.brand b{color:var(--copper2);font-weight:600}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-family:'Jost';font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  font-size:.78rem;color:#d6ddd5;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--copper);transition:width .25s}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.lang{display:flex;align-items:center;gap:2px;font-family:'Jost';font-weight:600;font-size:.76rem;
  border:1.4px solid rgba(242,236,227,.3);border-radius:40px;overflow:hidden}
.lang button{background:transparent;border:0;color:#c2cbc3;padding:6px 11px;cursor:pointer;
  font-family:inherit;font-weight:600;letter-spacing:.06em;transition:.2s}
.lang button.active{background:var(--copper);color:#201810}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;flex-direction:column;gap:5px}
.burger span{width:24px;height:2px;background:var(--cream);display:block;transition:.3s}

/* ===================== HERO ===================== */
.hero{min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:#0f1611}
.hero .bg{position:absolute;inset:0;background:url('../img/hero-abbeyroad.jpg') center 24%/cover no-repeat;
  transform:scale(1.04)}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,20,16,.42) 0%,rgba(15,20,16,.06) 30%,rgba(17,23,18,.55) 66%,rgba(15,20,16,.97) 100%)}
.hero .sun{width:520px;height:520px;left:-260px;bottom:-200px;opacity:.22}
.hero .wrap{position:relative;z-index:3;width:100%;padding-bottom:70px}
.hero .tag{font-family:'Jost';font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  font-size:.82rem;color:var(--copper2);margin-bottom:18px}
.hero h1{font-family:'Jost';font-weight:400;letter-spacing:.1em;
  font-size:clamp(3rem,12vw,8.2rem);color:var(--cream);text-shadow:0 3px 40px rgba(0,0,0,.55);line-height:.9}
.hero .sub{font-family:'Jost';font-weight:300;letter-spacing:.16em;text-transform:uppercase;
  font-size:clamp(.85rem,2vw,1.05rem);color:#dbe1d8;margin-top:16px}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero .badge{position:absolute;top:calc(var(--nav-h) + 26px);left:28px;z-index:3;
  display:inline-flex;align-items:center;gap:9px;background:rgba(198,138,91,.16);border:1px solid rgba(215,160,116,.5);
  color:var(--copper2);font-family:'Jost';font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-size:.68rem;padding:7px 14px;border-radius:40px;backdrop-filter:blur(4px)}
.hero .badge .dot{width:6px;height:6px;border-radius:50%;background:var(--copper2)}
.scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:'Jost';letter-spacing:.2em;text-transform:uppercase;font-size:.6rem;color:#aeb8ae;opacity:.8}

/* ===================== BIO / BAND ===================== */
.bio{background:var(--green)}
.bio .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.pullquote{font-family:'Jost';font-weight:300;font-size:clamp(1.4rem,2.7vw,2rem);line-height:1.28;color:var(--cream)}
.pullquote b{font-weight:600;color:var(--copper2)}
.bio p{margin-top:18px;color:#c4cdc4}
.attrib{font-family:'Jost';letter-spacing:.18em;text-transform:uppercase;font-size:.74rem;color:var(--muted);margin-top:16px}
.members{margin-top:30px;border-top:1px solid rgba(255,255,255,.12)}
.members .mrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.members .nm{font-family:'Jost';font-weight:500;font-size:1.05rem;color:#fff}
.members .ro{font-family:'Inter';font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right}
.statline{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14)}
.statline .s{flex:1;min-width:120px;padding:20px 6px}
.statline .s + .s{border-left:1px solid rgba(255,255,255,.12)}
.statline .n{font-family:'Jost';font-weight:600;font-size:1.9rem;color:var(--copper)}
.statline .l{font-family:'Jost';font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}

/* full-bleed band press photo inside the bio section */
.band-showcase{margin-top:70px;height:clamp(300px,42vw,540px);overflow:hidden;position:relative}
.band-showcase img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.gallery figure{border-radius:6px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 18px 36px -24px rgba(0,0,0,.55)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.04)}
.band-showcase figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 28px;
  background:linear-gradient(0deg,rgba(15,20,16,.7),transparent);
  font-family:'Jost';letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;color:#e9e2d6}

/* ===================== ABBEY ROAD ===================== */
.abbey{background:var(--cream);color:var(--ink)}
.abbey .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.abbey p{margin-top:16px;color:#3d483f}
.abbey p b{color:var(--green);font-weight:600}
.bignum{font-family:'Jost';font-weight:700;font-size:clamp(2.6rem,6vw,4rem);color:var(--copper);line-height:1;margin-top:34px}
.bignum + .cap{font-family:'Jost';font-weight:500;letter-spacing:.04em;color:#5a655c;margin-top:6px}
.abbey .stack{display:grid;gap:18px}
.abbey .stack figure{border-radius:6px;overflow:hidden;box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
.abbey .stack img{width:100%;height:230px;object-fit:cover}
.abbey .stack figcaption{font-family:'Jost';font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7a857c;padding:9px 2px 0}

/* ===================== MUSIC ===================== */
.music{background:var(--green2)}
.music .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.spotify-embed{border-radius:12px;overflow:hidden;box-shadow:0 24px 50px -28px rgba(0,0,0,.7);min-height:420px}
.spotify-embed iframe{width:100%;height:420px;border:0;display:block}
.releases{list-style:none}
.releases li{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.releases li:first-child{border-top:1px solid rgba(255,255,255,.1)}
.releases .yr{font-family:'Jost';font-weight:600;font-size:1.05rem;color:var(--copper2)}
.releases .ti{font-family:'Jost';font-weight:500;font-size:1.12rem;color:#fff}
.releases .ti small{display:block;font-family:'Inter';font-weight:400;font-size:.82rem;color:var(--muted);
  text-transform:none;letter-spacing:0;margin-top:3px}
.releases .kind{font-family:'Jost';font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.topmini{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap}
.topmini .t{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:40px;
  padding:8px 16px;font-family:'Jost';font-weight:500;font-size:.82rem;color:#dbe2da}
.topmini .t b{color:var(--copper2);font-weight:600;margin-left:6px}

/* ===================== LIVE ===================== */
.live{background:#1b241e;overflow:hidden}
.live .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.venues{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 40px;margin-top:40px}
.venues .v{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.venues .v .name{font-family:'Jost';font-weight:500;font-size:1rem;color:#eef2ee}
.venues .v .city{font-family:'Inter';font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.shared{margin-top:44px;display:flex;gap:20px;flex-wrap:wrap}
.shared .card{flex:1;min-width:220px;background:linear-gradient(180deg,rgba(198,138,91,.14),rgba(198,138,91,.04));
  border:1px solid rgba(215,160,116,.3);border-radius:8px;padding:22px 24px}
.shared .k{font-family:'Jost';font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper2)}
.shared .v{font-family:'Jost';font-weight:600;font-size:1.35rem;color:#fff;margin-top:6px}
.live .banner{margin-top:56px;border-radius:10px;overflow:hidden;position:relative;height:340px}
.live .banner img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.live .banner .cap{position:absolute;left:0;right:0;bottom:0;padding:26px;
  background:linear-gradient(0deg,rgba(15,20,16,.9),transparent);
  font-family:'Jost';letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:#f0eae1}

/* ===================== EN GIRA (informal scrapbook) ===================== */
.tour{background:var(--cream);color:var(--ink)}
.abbey .sec-title,.tour .sec-title{color:var(--ink)}
.tour-lead{max-width:640px;margin-top:14px;color:#5d675e;font-size:1.02rem}
.tourwall{column-count:4;column-gap:14px;margin-top:30px}
.tourwall img{width:100%;margin:0 0 14px;border-radius:7px;display:block;break-inside:avoid;
  box-shadow:0 16px 32px -22px rgba(0,0,0,.5);transition:transform .35s ease}
.tourwall img:hover{transform:scale(1.02) rotate(-.7deg)}
@media(max-width:900px){.tourwall{column-count:3}}
@media(max-width:600px){.tourwall{column-count:2;column-gap:10px}.tourwall img{margin-bottom:10px}}

/* ===================== PRENSA ===================== */
.press{background:#1b241e}
.press-lead{max-width:640px;margin-top:14px;color:var(--muted);font-size:1.02rem}
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.press-card{display:flex;flex-direction:column;gap:12px;padding:24px;text-decoration:none;
  border:1px solid rgba(255,255,255,.1);border-radius:10px;min-height:170px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  transition:transform .3s ease,border-color .3s ease,background .3s ease}
.press-card:hover{transform:translateY(-4px);border-color:rgba(198,138,91,.55);
  background:linear-gradient(180deg,rgba(198,138,91,.1),transparent)}
.press-card .outlet{font-family:'Jost';text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--copper2)}
.press-card .headline{font-family:'Jost';font-weight:500;font-size:1.12rem;line-height:1.32;color:var(--cream);flex:1}
.press-card .readmore{font-family:'Jost';font-size:.8rem;letter-spacing:.05em;color:var(--copper)}
.arw{display:inline-block;transition:transform .3s ease}
.press-card:hover .arw{transform:translateX(4px)}
@media(max-width:900px){.press-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.press-grid{grid-template-columns:1fr}}

/* ===================== CONTACT / FOOTER ===================== */
.contact{background:var(--green);position:relative;overflow:hidden}
.contact .sun{width:360px;height:360px;right:-180px;top:-120px;opacity:.16}
.contact h2{font-family:'Jost';font-weight:400;letter-spacing:.06em;font-size:clamp(2.4rem,6vw,4rem);color:var(--cream)}
.social{display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:14px 40px;margin-top:40px}
.social a{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);transition:.2s}
.social a:hover{border-color:var(--copper2)}
.social .ic{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1.5px solid var(--copper2);
  color:var(--copper2);display:flex;align-items:center;justify-content:center;font-family:'Jost';font-weight:700;transition:.2s}
.social a:hover .ic{background:var(--copper2);color:var(--green)}
.social a > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.social .t{display:block;font-family:'Jost';font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.social .h{display:block;font-family:'Jost';font-weight:500;font-size:1.05rem;color:#fff}
.booking{margin-top:46px;background:var(--copper);color:#201810;border-radius:10px;padding:28px 30px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.booking .k{font-family:'Jost';font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.booking .v{font-family:'Jost';font-weight:600;font-size:1.4rem;margin-top:4px}
.booking .btn{background:#201810;color:var(--copper2);border:0}
.booking .btn:hover{background:#000}
footer{border-top:1px solid rgba(255,255,255,.1);margin-top:70px;padding:26px 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer .c{font-family:'Jost';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
footer .c b{color:var(--copper2);font-weight:600}

/* ---- reveal on scroll (progressive enhancement: visible by default,
        only hidden+animated when JS marks <html class="js">) ---- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:860px){
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(24,32,27,.98);backdrop-filter:blur(10px);
    flex-direction:column;align-items:flex-start;gap:0;padding:10px 28px 24px;
    transform:translateY(-140%);transition:transform .32s ease;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{width:100%;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.95rem}
  .burger{display:flex}
  .bio .grid,.abbey .grid,.music .grid{grid-template-columns:1fr;gap:40px}
  .venues{grid-template-columns:1fr 1fr}
  .pad{padding:72px 0}
}
@media (max-width:520px){
  .wrap{padding:0 20px}
  .hero .badge{left:20px}
  .venues{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;gap:10px}
  .social{grid-template-columns:1fr}
  .statline .s{min-width:50%;flex:1 0 40%}
  .abbey .stack img{height:190px}
}