:root{
 --ink0:#060F12; --deep:#0A1E24; --sea:#123A44; --foam:#EAF4F1; --mist:#9DB9B8; --red:#E8392B; --red-2:#FF5A43;
 --kraft:#CDBA90; --kraft-2:#BFA977; --ink:#17251A; --jungle:#1F5E35; --ink-2:#4A503B;
 --display:"Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
 --thin:"Josefin Sans", "Avenir Next", "Futura", sans-serif;
 --body:"Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
 color-scheme: dark;
 box-sizing:border-box;
 padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --kraft:#2E281C; --kraft-2:#3A3224; --ink:#EADFC6; --jungle:#6DB585; --ink-2:#C2B796; } }
:root[data-theme="dark"]{ --kraft:#2E281C; --kraft-2:#3A3224; --ink:#EADFC6; --jungle:#6DB585; --ink-2:#C2B796; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 60px); background:var(--ink0)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--ink0); color:var(--foam); font-family:var(--body); font-size:1.125rem; line-height:1.65; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--ink0)}
/* film grain over everything */
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.09; mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
img{max-width:100%; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red-2); outline-offset:3px}
.wrap{width:min(1200px, 100% - 2.5rem); margin-inline:auto}
.logo path, .mark path{fill:currentColor}

/* nav */
.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:15; background:var(--ink0); border-bottom:3px solid var(--red)}
.nav .wrap{display:flex; align-items:center; gap:1.75rem; height:56px}
.nav .logo{width:54px; color:var(--foam); flex:none}
.nav ul{display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none; font-family:var(--display); font-size:1.05rem; text-transform:uppercase; letter-spacing:.04em}
.nav ul::-webkit-scrollbar{display:none}
.nav a{text-decoration:none; white-space:nowrap; color:var(--mist)}
.nav a:hover{color:var(--red-2)}

/* hero: the three of them, live */
.hero{position:relative; overflow:hidden; background:var(--ink0)}
.trip{position:relative; height:min(78svh, 820px); min-height:480px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px}
.trip img{width:100%; height:100%; object-fit:cover; filter:contrast(1.12) saturate(1.1)}
.trip img:nth-child(1){object-position:40% 25%}
.trip img:nth-child(2){object-position:6% 30%}
.trip img:nth-child(3){object-position:45% 22%}
.trip::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,15,18,0) 70%, var(--ink0) 100%)}
.hero-copy{position:relative; z-index:2; margin-top:clamp(-4rem,-5vw,-2rem); padding-bottom:clamp(2rem,4vw,3rem)}
.hero-copy .wrap{display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:end}
.hero h1{margin:0; line-height:0}
.hero h1 .logo{width:min(460px,70vw); color:var(--foam); filter:drop-shadow(0 6px 30px rgba(0,0,0,.6))}
.hero .tagline{font-family:var(--display); text-transform:uppercase; font-size:clamp(1.25rem,2.4vw,2rem); line-height:1.05; letter-spacing:.01em; margin:1rem 0 0; max-width:34ch}
.hero .tagline span{color:var(--red-2)}
.hero .names{margin:.9rem 0 0; color:var(--mist); font-size:1.05rem; max-width:48ch}
.years{position:absolute; right:clamp(1rem,4vw,3rem); top:clamp(1rem,4vw,2.5rem); z-index:2; font-family:var(--display); font-size:clamp(1.1rem,2.2vw,1.6rem); letter-spacing:.06em; background:var(--red); color:#fff; padding:.25rem .8rem; transform:rotate(3deg)}

/* ticker */
.ticker{background:var(--red); color:#fff; overflow:hidden; white-space:nowrap; border-block:3px solid var(--ink0)}
.ticker div{display:inline-block; padding:.55rem 0; font-family:var(--display); font-size:clamp(1.3rem,2.6vw,2rem); text-transform:uppercase; letter-spacing:.03em; animation:tick 60s linear infinite}
.ticker span{padding:0 1.1rem}
.ticker span::after{content:"✳"; padding-left:2.2rem; font-size:.7em; vertical-align:.15em}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ticker div{animation:none} }

/* sections */
section{padding:clamp(4rem,9vw,7rem) 0; position:relative}
h2{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(4rem,13vw,10.5rem); line-height:.82; letter-spacing:-.005em; margin:0 0 2.5rem; color:var(--foam)}
h2.outline{color:transparent; -webkit-text-stroke:2px var(--foam)}
h3{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:.01em; margin:0 0 .75rem; line-height:1}
h4{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.45rem; letter-spacing:.02em; margin:0; line-height:1.05}
.prose{max-width:62ch}
.prose p{margin:0 0 1.1rem}
.prose p:first-of-type{font-size:1.3rem; line-height:1.5}
.cols{display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:start}
.photo-tilt{margin:-1rem 0 2.5rem 1rem; transform:rotate(-2deg); border:10px solid var(--foam); box-shadow:0 30px 60px -20px rgba(0,0,0,.8); max-width:520px}
.photo-tilt img{filter:grayscale(1) contrast(1.15)}

/* timeline */
.tl{list-style:none; margin:0; padding:0}
.tl li{display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:1rem 0; border-top:1px solid rgba(234,244,241,.15)}
.when{font-family:var(--display); text-transform:uppercase; font-size:1.25rem; line-height:1.1; color:var(--red-2)}
.tl p{margin:0; color:var(--foam); font-size:1rem}
.tl li:last-child .when{color:var(--foam)}

/* members */
#integrantes{background:var(--deep)}
.groupshot{width:100%; aspect-ratio:16/8; object-fit:cover; margin-bottom:3rem; filter:contrast(1.08)}
.members{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem}
.member h3{font-size:clamp(2rem,3.4vw,2.8rem); margin-bottom:.4rem}
.member .role{font-family:var(--thin); text-transform:none; color:var(--red-2); margin:0 0 .75rem; font-weight:600; font-size:1rem}
.member p{margin:0; color:var(--mist); font-size:1rem}
.team{margin-top:3rem; padding-top:1.5rem; border-top:3px solid var(--red); color:var(--mist); max-width:70ch}
.memoriam{margin-top:4rem; display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:center}
.memoriam img{width:170px; aspect-ratio:1; object-fit:cover; object-position:50% 50%; border-radius:50%; filter:grayscale(1) contrast(1.1); border:4px solid var(--red)}
.memoriam p{margin:0; font-family:var(--display); text-transform:uppercase; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.05; max-width:24ch}

/* album vol 1 */
#vol1{background:radial-gradient(120% 70% at 20% 0%, var(--sea) 0%, var(--deep) 45%, var(--ink0) 100%)}
.album-head{display:grid; grid-template-columns:minmax(260px,440px) 1fr; gap:3rem; align-items:end; margin-bottom:3rem}
.album-head img{width:100%; aspect-ratio:1; object-fit:cover; box-shadow:0 40px 80px -30px rgba(0,0,0,.9); transform:rotate(-1.5deg)}
.album-head h2{margin-bottom:1rem}
.album-head .meta{font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; font-size:1.2rem; color:var(--red-2); margin:0 0 1rem}
.tracks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:3.5rem; align-items:start}
.tracks li{break-inside:avoid; padding:1.1rem 0; border-top:1px solid rgba(234,244,241,.15)}
.trow{display:grid; grid-template-columns:3rem 1fr; gap:.5rem; align-items:start}
.tn{font-family:var(--display); font-size:2.2rem; line-height:.9; color:var(--red-2)}
.cred{margin:.3rem 0 0; font-size:.95rem; color:var(--mist); line-height:1.45}
.tnote{display:inline-block; font-family:var(--display); text-transform:uppercase; font-size:.85rem; letter-spacing:.04em; background:var(--red); color:#fff; padding:.1rem .45rem; margin-top:.4rem}
details{margin:.6rem 0 0 3.5rem}
summary{cursor:pointer; font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:.95rem; color:var(--foam); list-style:none; width:max-content; border-bottom:2px solid var(--red)}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ "}
details[open] summary::before{content:"– "}
summary:hover{color:var(--red-2)}
.lyr{padding:.9rem 0 .5rem; font-size:1rem; line-height:1.6}
.lyr p{margin:0 0 1rem}
.extras{margin-top:3rem}
.credits{margin-top:4rem; display:grid; grid-template-columns:1fr 1.4fr; gap:3rem; font-size:1rem; color:var(--mist)}
.credits ul{list-style:none; padding:0; margin:0; columns:2; column-gap:1.5rem}
.credits li{margin-bottom:.35rem; break-inside:avoid}
.credits b{color:var(--foam); font-weight:500}

/* salvajes: paper era */
.paper{background:var(--kraft); color:var(--ink);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='2'%3E%3CfeDistantLight azimuth='45' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
 background-blend-mode:multiply}
.band{background:var(--jungle); color:#F3EFE2; margin:0 0 3rem; padding:.6rem 0}
.band h2{font-family:var(--thin); font-weight:200; color:#F3EFE2; margin:0; letter-spacing:.16em; font-size:clamp(3.2rem,12vw,9.5rem); line-height:1}
.paper .meta{color:var(--jungle)}
.paper .cred{color:var(--ink-2)}
.paper summary{color:var(--ink); border-color:var(--jungle)}
.paper summary:hover{color:var(--jungle)}
.paper .album-head img{transform:rotate(1.5deg); box-shadow:0 30px 50px -25px rgba(40,30,10,.7)}
.sgrid{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2.5rem 2rem}
.scard .scov img, .nocover{width:100%; aspect-ratio:1; object-fit:cover; box-shadow:0 18px 30px -18px rgba(40,30,10,.6)}
.scard:nth-child(odd) .scov{transform:rotate(-1.2deg)}
.scard:nth-child(even) .scov{transform:rotate(1deg)}
.nocover{display:grid; place-items:center; background:var(--kraft-2); font-family:var(--thin); font-weight:200; font-size:2rem; color:var(--ink-2)}
.sbody{padding-top:1rem}
.sbody details{margin-left:0}
.tag{font-family:var(--display); font-size:.8rem; letter-spacing:.05em; background:var(--jungle); color:#F3EFE2; padding:.1rem .45rem; margin-left:.35rem; vertical-align:3px}

/* videos */
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.vgrid .vcard:first-child{grid-column:span 2; grid-row:span 2}
.vgrid .vcard:first-child .vthumb{aspect-ratio:auto; flex:1}
.vgrid .vcard:first-child .vt{font-size:2.4rem}
.vgrid.live .vcard:first-child{grid-column:auto; grid-row:auto}
.vgrid.live{grid-template-columns:repeat(5,1fr)}
.vgrid.live .vcard:first-child .vthumb{aspect-ratio:16/10; flex:none}
.vgrid.live .vcard:first-child .vt{font-size:1.5rem}
.vcard{text-decoration:none; display:flex; flex-direction:column; gap:.15rem}
.vthumb{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; margin-bottom:.6rem; background:#000}
.vthumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(.7) contrast(1.1); transition:filter .25s, transform .4s}
.vcard:hover .vthumb img, .vcard:focus-visible .vthumb img{filter:none; transform:scale(1.04)}
.play{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:var(--red)}
.play::after{content:""; position:absolute; left:25px; top:19px; border-left:20px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent}
.vt{font-family:var(--display); text-transform:uppercase; font-size:1.5rem; line-height:1}
.vs{color:var(--mist); font-size:.95rem}
.sub{margin:4rem 0 1.5rem; font-size:clamp(2rem,4vw,3.2rem)}

/* live */
#envivo{background:var(--deep)}
.shows{display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:3rem}
.shows img{width:100%; aspect-ratio:16/9; object-fit:cover}
.shows h3{margin-top:1.2rem}
.shows p{color:var(--mist); margin:.5rem 0 0; max-width:52ch}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.gallery img{width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(1) contrast(1.15); transition:filter .25s}
.gallery img:hover{filter:none}

/* press */
.press{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 3.5rem}
.press li{padding:1.4rem 0; border-top:1px solid rgba(234,244,241,.15)}
.pmeta{margin:0 0 .35rem; color:var(--red-2); font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:1rem}
.press h4{font-size:1.7rem}
.sl{text-decoration:none} .sl:hover{color:var(--red-2)}
.press h4 a{text-decoration:none; background:linear-gradient(var(--red),var(--red)) 0 100%/0 3px no-repeat; transition:background-size .25s}
.press h4 a:hover{background-size:100% 3px}
.press p:last-child{margin:.4rem 0 0; color:var(--mist); font-size:1rem}

/* listen */
#escuchar{padding:clamp(3rem,6vw,4.5rem) 0}
#escuchar .wrap{display:block}
#escuchar h2{margin:0}
#escuchar .prose{margin:1rem 0 0; color:var(--mist)}
#escuchar .listen{margin-top:1.5rem}
.listen{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem}
.listen a{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:1.4rem; text-decoration:none; padding:.65rem 1.5rem; border:3px solid var(--red); color:var(--foam)}
.listen a:first-child{background:var(--red); color:#fff}
.listen a:hover{background:var(--foam); border-color:var(--foam); color:var(--ink0)}
/* letras */
#letras{background:var(--deep); border-top:3px solid var(--red)}
.lede-l{color:var(--mist); margin:-1rem 0 2.5rem}
.lgroups{display:grid; grid-template-columns:1fr 1fr; gap:4rem}
.lgroups h3{font-size:clamp(2rem,4vw,3rem); border-bottom:3px solid var(--red); padding-bottom:.4rem; margin-bottom:.5rem}
.lgroups h3 span{color:var(--red-2)}
details.song{margin:0; border-bottom:1px solid rgba(234,244,241,.15)}
details.song summary{border:0; width:100%; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:.01em; padding:.55rem 0; color:var(--foam)}
details.song summary::before{content:"+"; display:inline-block; width:1.6rem; color:var(--red-2)}
details.song[open] summary::before{content:"–"}
details.song[open] summary{color:var(--red-2)}
details.song .lyr{padding:.25rem 0 1.5rem 1.6rem; font-size:1.05rem}
.disco{margin-bottom:3rem}
.lks{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem}
.lk{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; text-decoration:none; padding:.2rem .6rem; border:2px solid currentColor}
.lk.sp{color:#1ED760}
.lk.yt{color:var(--red-2)}
.lk.ly{color:var(--foam)}
details.tlyr{margin:0}
.xs{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.45rem; align-items:flex-start}
.xs details[open]{flex-basis:100%}
.lk.st{color:#F2C14E}
.paper .lk.st{color:#8A5A00}
.story{padding:1rem 0 .5rem; font-size:1.02rem; line-height:1.65; max-width:62ch}
.story p{margin:0 0 .9rem}
.story .sig{font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; color:#F2C14E}
.paper .story .sig{color:#8A5A00}
details.tlyr summary.lk{display:inline-block; width:auto; border:2px solid currentColor}
details.tlyr summary.lk::before{content:"+ "}
details.tlyr[open] summary.lk::before{content:"– "}
details.tlyr .lyr{padding:1rem 0 .5rem}
.lk:hover{background:currentColor}
.lk.sp:hover, .lk.yt:hover, .lk.ly:hover{color:var(--ink0)}
.lk.sp:hover{background:#1ED760; border-color:#1ED760}
.lk.yt:hover{background:var(--red-2); border-color:var(--red-2)}
.lk.ly:hover{background:var(--foam); border-color:var(--foam)}
.paper .lk.sp{color:#127A3A}
.paper .lk.yt{color:#B8261A}
.paper .lk.ly{color:var(--ink)}
footer{padding:3rem 0 4rem; color:var(--mist); font-size:.95rem}
footer .logo{width:90px; color:var(--foam); margin-bottom:1rem}

@media (max-width: 860px){
 .cols, .album-head, .shows, .press, .lgroups, #escuchar .wrap{grid-template-columns:1fr}
 .members{grid-template-columns:1fr; gap:2.5rem}
 .tracks{grid-template-columns:1fr}
 .vgrid, .vgrid.live{grid-template-columns:1fr 1fr}
 .vgrid .vcard:first-child{grid-column:span 2; grid-row:auto}
 .vgrid .vcard:first-child .vthumb{aspect-ratio:16/10}
 .gallery{grid-template-columns:1fr 1fr}
 .memoriam{grid-template-columns:1fr}
 .tl li{grid-template-columns:1fr; gap:.2rem}
 .trip{height:62svh}
 .hero-copy .wrap{grid-template-columns:1fr; gap:.5rem}
 .trip img:nth-child(2){object-position:35% 30%}
}


.songpage{padding:clamp(2.5rem,6vw,5rem) 0;min-height:60vh}
.paperpage{background:var(--kraft);color:var(--ink)}
.paperpage .cred,.paperpage .meta{color:var(--ink-2)}
.crumb{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;color:var(--mist);margin:0 0 1.5rem}
.paperpage .crumb{color:var(--ink-2)}
.paperpage h1,.paperpage h2{color:var(--ink)}
.paperpage .meta{color:var(--jungle)}
.paperpage .lk.sp{color:#127A3A}
.paperpage .lk.yt{color:#B8261A}
.paperpage .story .sig{color:#8A5A00}
.paperpage .albumlist a{color:var(--ink)}
.crumb a{text-decoration:none}
.song-head{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:2.5rem;align-items:end;margin-bottom:3rem}
.song-head img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;box-shadow:0 30px 60px -25px rgba(0,0,0,.8)}
.songpage h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,9vw,7rem);line-height:.9;margin:0 0 1rem}
.songpage .meta{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:1.15rem;color:var(--red-2);margin:0 0 .6rem}
.sp-sec{padding:0;margin:0 0 3rem;max-width:66ch}
.sp-sec h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem}
.pn{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:3px solid var(--red);padding-top:1.2rem;font-family:var(--display);text-transform:uppercase;letter-spacing:.03em}
.pn a{text-decoration:none}
.albumlist{list-style:none;padding:0;margin:0;max-width:820px}
.albumlist li{display:grid;grid-template-columns:3rem 1fr;gap:.2rem 1rem;padding:.9rem 0;border-top:1px solid rgba(234,244,241,.15)}
.paperpage .albumlist li{border-color:rgba(23,37,26,.2)}
.albumlist a{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;text-decoration:none}
.albumlist .cred{grid-column:2}
.mem-head{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:start;max-width:900px}
.mimg{width:220px;aspect-ratio:1;object-fit:cover;border-radius:50%;filter:grayscale(1);border:4px solid var(--red)}
@media (max-width:860px){.song-head,.mem-head{grid-template-columns:1fr}}