:root { --ink:#f6f3ed; --muted:#aaa59c; --coal:#111110; --panel:#1b1a18; --line:#37332d; --wood:#c78a46; --wood-light:#e4b06f; --max:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--coal); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:17px; line-height:1.65; }
a { color:inherit; }
img { display:block; max-width:100%; }
.topbar { position:sticky; z-index:20; top:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; min-height:76px; padding:0 5vw; border-bottom:1px solid rgba(255,255,255,.1); background:rgba(17,17,16,.9); backdrop-filter:blur(16px); }
.brand { display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; letter-spacing:.08em; }
.brand span { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--wood); border-radius:50%; color:var(--wood-light); font:700 .78rem/1 "Manrope",sans-serif; }
.brand strong { font-size:.84rem; }
nav { display:flex; gap:2rem; }
nav a { color:var(--muted); text-decoration:none; font-size:.9rem; }
nav a:hover, nav a:focus-visible { color:var(--ink); }
.language { justify-self:end; display:flex; gap:.38rem; align-items:center; color:#6e6961; }
.lang-button { border:0; padding:.4rem; background:transparent; color:#777269; cursor:pointer; font:700 .78rem/1 "Manrope",sans-serif; }
.lang-button.active { color:var(--wood-light); }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); min-height:calc(100vh - 76px); max-width:1500px; margin:auto; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(4rem,8vw,9rem) 6vw; }
.eyebrow { margin:0 0 1rem; color:var(--wood-light); font:700 .78rem/1.4 "Manrope",sans-serif; letter-spacing:.18em; }
h1,h2,h3 { margin-top:0; font-family:"Manrope",sans-serif; letter-spacing:-.035em; line-height:1.08; }
h1 { max-width:850px; margin-bottom:1.8rem; font-size:clamp(3rem,6vw,6.7rem); font-weight:700; }
html[lang="es"] .hero-copy h1 { font-size:clamp(2.65rem,4.45vw,5.15rem); }
h2 { font-size:clamp(2.2rem,4vw,4.6rem); }
h3 { margin-bottom:.7rem; font-size:clamp(1.65rem,2.5vw,2.6rem); }
.intro { max-width:680px; margin:0 0 2.2rem; color:#cbc6bd; font-size:clamp(1.05rem,1.5vw,1.25rem); }
.hero-actions,.song-links,.contact-links { display:flex; flex-wrap:wrap; gap:.8rem; }
.button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:.85rem 1.4rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-weight:700; }
.button-primary { border-color:var(--wood); background:var(--wood); color:#15120f; }
.button-primary:hover,.button-primary:focus-visible { background:var(--wood-light); }
.button-secondary:hover,.button-secondary:focus-visible { border-color:var(--wood); color:var(--wood-light); }
.highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:4rem 0 0; }
.highlights div { padding-top:1.2rem; border-top:1px solid var(--line); }
.highlights dt { font:700 clamp(1.8rem,3vw,2.8rem)/1 "Manrope",sans-serif; }
.highlights dd { margin:.5rem 0 0; color:var(--muted); font-size:.9rem; }
.hero-image { min-height:100%; overflow:hidden; background:#262523; }
.hero-image img { width:100%; height:100%; object-fit:cover; }
.showcase,.about,.contact { padding:clamp(5rem,10vw,10rem) 5vw; }
.showcase { max-width:var(--max); margin:auto; }
.section-heading { max-width:850px; margin-bottom:4rem; }
.featured-song { display:grid; grid-template-columns:1.25fr .75fr; overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.video-frame { position:relative; overflow:hidden; width:100%; aspect-ratio:16/9; background:#080808; }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.song-copy { padding:clamp(1.5rem,3vw,3rem); }
.song-copy>p:not(.song-number):not(.song-role) { color:#bbb6ad; }
.song-number { margin:0 0 1.4rem; color:#777168; font:600 .78rem/1 "Manrope",sans-serif; letter-spacing:.15em; }
.song-role { margin:0 0 1rem; color:var(--wood-light); font:700 .72rem/1.4 "Manrope",sans-serif; letter-spacing:.14em; }
.song-links { margin-top:1.5rem; }
.song-links a { color:#e8e3da; text-decoration-color:#6e6253; text-underline-offset:.3rem; }
.song-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin-top:1.5rem; }
.song-card { overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.about { display:grid; grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr); gap:clamp(3rem,8vw,8rem); align-items:center; max-width:var(--max); margin:auto; border-top:1px solid var(--line); }
.about img { width:100%; max-height:760px; object-fit:cover; object-position:center top; filter:saturate(.8) contrast(1.03); }
.about-copy p:not(.eyebrow) { max-width:720px; color:#bbb6ad; }
.contact { text-align:center; background:linear-gradient(135deg,#24201a,#151413 65%); }
.contact h2 { max-width:900px; margin-inline:auto; }
.contact>p:not(.eyebrow) { max-width:660px; margin:0 auto 2rem; color:#c4bfb6; }
.contact .email-address { margin-bottom:1.35rem; color:var(--ink); font:600 clamp(1rem,2vw,1.2rem)/1.4 "Manrope",sans-serif; overflow-wrap:anywhere; }
.contact-links { justify-content:center; }
footer { display:flex; justify-content:space-between; gap:2rem; padding:2rem 5vw; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
footer strong { color:var(--ink); letter-spacing:.1em; }
@media (max-width:900px) { .topbar{grid-template-columns:1fr auto} nav{display:none} .hero{grid-template-columns:1fr} .hero-copy{order:2;padding-top:3.5rem} .hero-image{order:1;max-height:72vh;min-height:520px} .featured-song,.about{grid-template-columns:1fr} .about img{max-height:620px} }
@media (max-width:680px) { body{font-size:16px} .topbar{min-height:66px;padding-inline:1.1rem} .brand strong{display:none} .hero{min-height:0} .hero-copy{padding:3.2rem 1.2rem 4.5rem} .hero-image{min-height:67vh;max-height:720px} h1{font-size:clamp(2.8rem,14vw,4.6rem)} html[lang="es"] .hero-copy h1{font-size:clamp(2.35rem,11.2vw,3.8rem)} .highlights{margin-top:3rem} .highlights dd{font-size:.76rem} .showcase,.about,.contact{padding:4.5rem 1.2rem} .song-grid{grid-template-columns:1fr} .section-heading{margin-bottom:2.5rem} footer{flex-direction:column;gap:.35rem;padding-inline:1.2rem} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }