/* Estrellita de los Sueños — glossy dreamy makeover (2026-06-13) */
:root{
  --indigo:#0e1130; --indigo2:#171a44; --night:#1d2156;
  --gold:#ffd86b; --gold2:#ffb347; --lilac:#b9a4ff; --peach:#ffb9a0; --cream:#fff7de;
  --ink:#0a0c22; --text:#eef0ff; --muted:#b9bce0;
  --glass:rgba(255,255,255,.06); --glass-bd:rgba(255,255,255,.12);
  --shadow:0 18px 50px -18px rgba(6,8,30,.7); --shadow-sm:0 8px 24px -10px rgba(6,8,30,.6);
  --radius:20px; --maxw:1120px;
  --font:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700&display=swap');
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--text); line-height:1.6;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(185,164,255,.20), transparent 60%),
    radial-gradient(900px 500px at 10% 5%, rgba(255,216,107,.12), transparent 55%),
    linear-gradient(180deg,var(--indigo) 0%, var(--indigo2) 45%, var(--night) 100%);
  background-attachment:fixed; min-height:100vh;
}
img{max-width:100%}
a{color:var(--gold); text-decoration:none}
a:hover{text-decoration:underline}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:.6rem 1rem;border-radius:0 0 10px 0;z-index:99;font-weight:700}
.skip:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem clamp(1rem,4vw,2rem);
  background:rgba(14,17,48,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--glass-bd);
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--cream);font-weight:800;font-size:1.1rem}
.brand img{filter:drop-shadow(0 0 10px rgba(255,216,107,.6))}
header nav{display:flex;gap:.4rem;flex-wrap:wrap}
header nav a{color:var(--muted);font-weight:700;padding:.45rem .8rem;border-radius:999px;transition:.25s}
header nav a:hover{color:var(--cream);background:var(--glass);text-decoration:none}
header nav a.active{color:var(--ink);background:linear-gradient(135deg,var(--gold),var(--gold2))}

main{max-width:var(--maxw);margin:0 auto;padding:clamp(1.2rem,4vw,2.5rem) clamp(1rem,4vw,2rem)}
section{margin:clamp(2.2rem,6vw,4rem) 0}
h1,h2,h3{font-family:var(--font);line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem);margin:0 0 1.2rem}
.lead{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--muted);max-width:60ch}

.hero{
  position:relative;text-align:center;padding:clamp(2.5rem,7vw,5rem) clamp(1rem,4vw,2rem);
  border-radius:var(--radius);overflow:hidden;margin-top:1.2rem;
  background:
    radial-gradient(700px 360px at 50% 12%, rgba(185,164,255,.28), transparent 60%),
    radial-gradient(500px 300px at 78% 80%, rgba(255,216,107,.18), transparent 60%),
    linear-gradient(165deg,#191d52,#10133a 70%);
  border:1px solid var(--glass-bd);box-shadow:var(--shadow);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff,transparent),
    radial-gradient(1.5px 1.5px at 28% 68%, #fff,transparent),
    radial-gradient(2px 2px at 52% 18%, #fff7de,transparent),
    radial-gradient(1.5px 1.5px at 70% 52%, #fff,transparent),
    radial-gradient(1.5px 1.5px at 86% 30%, #fff,transparent),
    radial-gradient(1.5px 1.5px at 40% 84%, #fff,transparent),
    radial-gradient(2px 2px at 92% 72%, #fff7de,transparent);
  animation:tw 5s ease-in-out infinite alternate;
}
@keyframes tw{from{opacity:.45}to{opacity:.95}}
.herostar{
  width:min(230px,46vw);height:auto;margin:0 auto .4rem;display:block;position:relative;
  filter:drop-shadow(0 0 40px rgba(255,216,107,.55));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.hero h1{
  position:relative;font-size:clamp(1.9rem,5vw,3.2rem);margin:.3rem auto 1rem;max-width:18ch;
  background:linear-gradient(120deg,var(--cream),var(--gold) 55%,var(--lilac));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 30px rgba(255,216,107,.25);
}
.hero .lead{margin:0 auto 1.6rem;color:#dfe2ff}
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;position:relative}

.btn{
  display:inline-block;padding:.85rem 1.6rem;border-radius:999px;font-weight:800;font-size:1.02rem;
  color:var(--ink);background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(255,179,71,.6);transition:transform .2s, box-shadow .2s;text-decoration:none}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 34px -8px rgba(255,179,71,.75);text-decoration:none}
.btn.ghost{background:var(--glass);color:var(--cream);border:1px solid var(--glass-bd);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.12)}

.lead-magnet{margin-top:2rem;padding:1.4rem;background:var(--glass)!important;border:1px solid var(--glass-bd)!important;border-radius:16px!important;backdrop-filter:blur(8px)}
.lead-magnet input{flex:1;min-width:200px;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--glass-bd);background:rgba(255,255,255,.9);color:#222}

.albums,.grid,.postgrid{display:grid;gap:1.1rem}
.albums{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.postgrid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card,.albumcard,.postcard{
  background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .25s, box-shadow .25s, border-color .25s;color:var(--text);
  display:flex;flex-direction:column}
.card:hover,.albumcard:hover,.postcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(255,216,107,.45);text-decoration:none}
.card .thumb{aspect-ratio:16/9;background-size:cover;background-position:center}
.card span,.albumcard span{display:block;padding:.8rem 1rem;font-weight:700}
.albumcard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.postcard{padding:1.1rem 1.2rem}
.postcard h3{margin:.1rem 0 .5rem;color:var(--cream);font-size:1.15rem}
.postcard p{margin:0;color:var(--muted);font-size:.95rem}

.lander .cta,.songpage .cta{justify-content:flex-start}
.inline-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;
  margin:2rem 0;padding:1.2rem 1.4rem;border-radius:16px;background:linear-gradient(135deg,rgba(185,164,255,.16),rgba(255,216,107,.12));border:1px solid var(--glass-bd)}
.crumb{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.album-tag{margin:1.4rem 0;color:var(--muted)}
.related{display:flex;gap:.6rem;flex-wrap:wrap}
.related a{padding:.5rem .9rem;border-radius:999px;background:var(--glass);border:1px solid var(--glass-bd);color:var(--cream)}
.lander details{background:var(--glass);border:1px solid var(--glass-bd);border-radius:14px;margin:.6rem 0;padding:.7rem 1rem}
.lander summary{cursor:pointer;font-weight:700;color:var(--cream)}
.post h1,.songpage h1,.lander h1{color:var(--cream);font-size:clamp(1.6rem,4vw,2.4rem)}
.post h2{color:var(--gold)}
.post a{color:var(--gold)} .post p,.post li{color:#e6e8ff}
blockquote{border-left:3px solid var(--gold);margin:1.2rem 0;padding:.4rem 1rem;background:var(--glass);border-radius:0 12px 12px 0;color:var(--muted)}
table{width:100%;border-collapse:collapse;margin:1.2rem 0;background:var(--glass);border-radius:12px;overflow:hidden}
th,td{padding:.6rem .8rem;border-bottom:1px solid var(--glass-bd);text-align:left}
th{background:rgba(255,216,107,.14);color:var(--cream)}
lite-youtube,iframe{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin:1rem 0}
.lyrics{background:var(--glass);border:1px solid var(--glass-bd);border-radius:16px;padding:1.2rem 1.4rem;white-space:pre-line;color:#eef0ff}
.lyrics.soon{color:var(--muted)}

main>section>h2{position:relative;display:inline-block}
main>section>h2::after{content:"";display:block;height:4px;width:54px;margin-top:.4rem;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--lilac))}

footer{margin-top:4rem;padding:2.5rem clamp(1rem,4vw,2rem);background:rgba(8,10,32,.7);border-top:1px solid var(--glass-bd)}
footer .signup{max-width:var(--maxw);margin:0 auto 1.5rem;text-align:center}
footer .signup h3{color:var(--gold);font-size:1.4rem;margin:.2rem 0 .5rem}
footer form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:.8rem 0}
footer input{padding:.7rem .9rem;border-radius:10px;border:1px solid var(--glass-bd);min-width:220px;background:rgba(255,255,255,.92);color:#222}
.micro{font-size:.8rem;color:var(--muted)}
.legal{max-width:var(--maxw);margin:0 auto;text-align:center;color:var(--muted);font-size:.9rem}

.reveal{opacity:0;transform:translateY(26px)}
.reveal.vis{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.vis{opacity:1;transform:none;transition:none}
  .herostar,.hero::before{animation:none}
}