/* ============ 1. PALETA Y FUENTES (edita aquí) ============
   Tomadas del CSS original: fondo #231f20 · acento #7ec475 · hover #d4ffc1
   Texto: DM Sans · Títulos: Share Tech Mono (se cargan en index.html) */
:root{
 --font:"DM Sans",system-ui,sans-serif;
 --fh:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
 /* tema claro */
 --bg:#f5f8f2; --bg2:#e7eee2; --card:#fff; --fg:#231f20; --mut:#5d6a59; --line:#0000001a; --ac:#4a8440; --ac2:#7ec475;
}
:root[data-theme=dark]{  /* tema oscuro (el de por defecto; se elige en <html data-theme> de index.html) */
 --bg:#231f20; --bg2:#1c1819; --card:#2c2829; --fg:#fff; --mut:#b9b3b6; --line:#ffffff1f; --ac:#7ec475; --ac2:#d4ffc1;
}

/* ============ 2. BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 var(--font);overflow-x:hidden}
a{color:inherit;text-decoration:none} button{font:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--fh);line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0 0 1rem} .mut{color:var(--mut)}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section{padding:clamp(4rem,9vw,7rem) 0}
h2{font-size:clamp(1.9rem,4.5vw,3rem);margin-bottom:2rem}
h2 small{display:block;font:.8rem var(--fh);letter-spacing:.18em;text-transform:uppercase;color:var(--ac);margin-bottom:.6rem}
.about{background:var(--bg2)}
.grad{background:linear-gradient(100deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:99px;font-weight:700;border:1px solid var(--line);transition:transform .2s}
.btn:hover{transform:translateY(-2px)} .btn.p{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.more{font-weight:700;color:var(--ac)}

/* ============ 3. CABECERA ============ */
header{position:fixed;inset:0 0 auto;z-index:50;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:.6rem}
.lt{font:800 1.05rem var(--fh);letter-spacing:.06em}
.lg{height:32px;display:block}
.lgd{display:none} [data-theme=dark] .lgd{display:block} [data-theme=dark] .lgl{display:none}   /* logo claro/oscuro */
.links{display:flex;gap:1.6rem;align-items:center;font-size:.92rem}
.links a{color:var(--mut)} .links a:hover{color:var(--fg)}
.tbtn,.burger{background:none;border:1px solid var(--line);color:var(--fg);border-radius:99px;width:38px;height:38px;cursor:pointer}
.tbtn.lang{width:auto;padding:0 .8rem;font-size:.78rem;font-weight:700}
.burger{display:none}

/* ============ 4. PORTADA ============ */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:6rem}
.blob{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform;opacity:.4;animation:float 14s ease-in-out infinite alternate}
.b1{width:420px;height:420px;background:var(--ac);top:-80px;right:-80px}
.b2{width:340px;height:340px;background:var(--ac2);bottom:-100px;left:-60px;animation-delay:-6s;opacity:.25}
@keyframes float{to{transform:translate(40px,30px) scale(1.12)}}
.hg{position:relative;display:grid;grid-template-columns:1.3fr .8fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(4.6rem,18vw,11rem);line-height:.9;letter-spacing:-.06em;margin-bottom:.4rem}
.lead{font-size:clamp(1rem,1.8vw,1.2rem);max-width:56ch;color:var(--mut);margin:1.2rem 0 2rem}
.eyebrow{display:inline-flex;gap:.5rem;align-items:center;font:.85rem var(--fh);padding:.35rem .9rem;border:1px solid var(--line);border-radius:99px;background:var(--card);margin-bottom:1rem}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.3}}
.btns{display:flex;flex-wrap:wrap;gap:.8rem}
.stats{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:3.5rem}
.stats b{display:block;font:2rem var(--fh)} .stats span{font-size:.85rem;color:var(--mut)}
.hc{width:100%;border-radius:28px;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);box-shadow:0 30px 70px -30px var(--ac)}

/* ============ 5. TARJETAS Y EMBEDS ============ */
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr))}
.card{display:flex;flex-direction:column;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:20px;--pad:1.4rem;padding:var(--pad);overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:var(--ac);box-shadow:0 14px 40px -18px var(--ac)}
.card h3{font-size:1.25rem} .card p{color:var(--mut);font-size:.93rem;margin:0}
.yr{font:.78rem var(--fh);color:var(--mut)}
.tag{display:inline-block;font-size:.72rem;padding:.2rem .65rem;border-radius:99px;background:var(--bg2);color:var(--mut);margin:0 .3rem .3rem 0}
.lk{margin-top:auto;padding-top:.6rem;display:flex;gap:1rem;flex-wrap:wrap}
.feat{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:center;--pad:2rem}
.feat h3{font-size:2rem;margin:.3rem 0 .8rem}
.media{display:flex;flex-direction:column;gap:.5rem}
.art{height:92px;border-radius:14px;background:linear-gradient(135deg,hsl(calc(95 + var(--h)*.12) 40% 45%),hsl(calc(130 + var(--h)*.1) 35% 28%))}
.emb{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:var(--bg2)}
/* Bandcamp: el reproductor necesita ~470px de ancho para mostrar la carátula (como en la tarjeta de Arco).
   Por eso las cuadrículas usan columnas de mínimo 480px. En móvil (<520px) ocupa todo el ancho de la tarjeta. */
.emb.bc{height:120px;aspect-ratio:auto;border-radius:12px}
.emb.sp{height:152px;aspect-ratio:auto}   /* Spotify (pista/álbum) */
.emb.sp.tall{height:352px}                /* Spotify (artista) */
.emb.itch{height:167px;aspect-ratio:auto} /* itch.io */
.cov{object-fit:cover}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;background:#000}
.yt img{width:100%;height:100%;object-fit:cover;display:block}
.yt::after{content:"\25B6";position:absolute;left:50%;top:50%;translate:-50% -50%;width:60px;height:60px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-size:1.3rem;padding-left:4px;transition:scale .2s}
.yt:hover::after{scale:1.12}
.ext{font-size:.78rem;color:var(--mut);align-self:flex-end} .ext:hover{color:var(--ac)}

/* ============ 6. SOBRE MÍ, CONTACTO, PIE ============ */
.cols{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.about h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);margin-bottom:1rem}
.about ul{list-style:none;margin:0;padding:0}
.about li{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.about li em{display:block;font-style:normal;color:var(--mut);font-size:.82rem}
.contact{text-align:center}
.contact h2{font-size:clamp(2.2rem,7vw,5rem);margin-inline:auto;max-width:14ch}
.mail{display:inline-block;font:700 clamp(1.1rem,3vw,1.8rem) var(--fh);border-bottom:3px solid var(--ac);padding-bottom:.2rem;margin:1rem 0 2rem;word-break:break-all}
.soc{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
footer{border-top:1px solid var(--line);padding:2rem 0;font-size:.85rem;color:var(--mut)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* ============ 6b. BIO ============ */
.bio-hero{min-height:auto;padding-top:8rem;padding-bottom:4rem}
.bio{max-width:760px;margin-inline:auto}
.bio p{font-size:1.05rem;color:var(--mut);margin-bottom:1.4rem}
.bio p:first-child{font:clamp(1.4rem,3vw,2rem)/1.3 var(--fh);color:var(--fg)}
.bio i{color:var(--fg)}
.ln{color:var(--ac);font-weight:700;border-bottom:1px solid transparent}.ln:hover{color:var(--ac2);border-color:currentColor}

/* ============ 7. ANIMACIÓN Y MÓVIL ============ */
@media(max-width:520px){.emb.bc{border-radius:0;width:calc(100% + var(--pad)*2);margin-inline:calc(var(--pad)*-1)}}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media(max-width:860px){.hg,.feat{grid-template-columns:1fr}.hc{max-width:360px}}
@media(max-width:820px){
 .burger{display:block}
 .links{position:fixed;inset:64px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.25rem;transform:translateY(-130%);transition:transform .35s}
 .links.open{transform:none}
 .links a{padding:.8rem 0;font-size:1.1rem;border-bottom:1px solid var(--line)}
 .tbtn{margin-top:.8rem;align-self:flex-start}
}