/* Layout: una sola bajada para celular; bandas a todo lo ancho con contenido a 1080px; barra fija abajo con "Pide tu canción". Colores del logo: cian → azul → violeta sobre azul marino. */
:root{
  --bg:#F3F6FC; --surface:#FFFFFF; --ink:#0B1A4A; --muted:#4F5B80; --line:#DCE3F2;
  --accent:#1B5FF2; --accent-ink:#FFFFFF; --cyan:#00C8E0; --violet:#6236F0; --sun:#00C8E0; --soft:#E3EDFF;
  --grad:linear-gradient(100deg,#00C8E0 0%,#1B6BFF 55%,#6236F0 100%);
  --wa:#1C9E52; --wa-ink:#FFFFFF; --band:#0B1A4A; --band-ink:#F3F6FC; --band-muted:#AFBCE0;
  --ph:#E7EDF8; --ph-ink:#6A7699;
  --display:"Poppins", "Trebuchet MS", system-ui, sans-serif;
  --body:"Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#080F26; --surface:#101A3A; --ink:#EEF3FF; --muted:#A3B0D6; --line:#22305A;
  --accent:#3C86FF; --accent-ink:#04102E; --cyan:#22E3F0; --violet:#8A66FF; --sun:#22E3F0; --soft:#16244D;
  --grad:linear-gradient(100deg,#22E3F0 0%,#3C86FF 55%,#8A66FF 100%);
  --wa:#2BBF68; --wa-ink:#06200F; --band:#101A3A; --band-ink:#EEF3FF; --band-muted:#A3B0D6;
  --ph:#141F43; --ph-ink:#8C99C2; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#080F26; --surface:#101A3A; --ink:#EEF3FF; --muted:#A3B0D6; --line:#22305A;
  --accent:#3C86FF; --accent-ink:#04102E; --cyan:#22E3F0; --violet:#8A66FF; --sun:#22E3F0; --soft:#16244D;
  --grad:linear-gradient(100deg,#22E3F0 0%,#3C86FF 55%,#8A66FF 100%);
  --wa:#2BBF68; --wa-ink:#06200F; --band:#101A3A; --band-ink:#EEF3FF; --band-muted:#A3B0D6;
  --ph:#141F43; --ph-ink:#8C99C2; color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; padding-bottom:84px}
.wrap{max-width:1080px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display); line-height:1.1; text-wrap:balance; margin:0}
h2{font-size:clamp(28px,5vw,40px); font-weight:800; letter-spacing:-.01em}
h3{font-size:21px; font-weight:600}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--sun); outline-offset:3px; border-radius:6px}
.eyebrow{font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.lead{color:var(--muted); font-size:18px; max-width:60ch}
section{padding-block:64px}
.sec-head{display:grid; gap:12px; margin-bottom:32px}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 24px; border-radius:999px; font-weight:800; font-size:17px; text-decoration:none; border:0; cursor:pointer; font-family:var(--body)}
.btn-main{background:var(--grad); color:#FFFFFF}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--line)}
.btn-wa{background:var(--wa); color:var(--wa-ink); width:100%; min-height:58px; font-size:18px}
.btn svg{width:22px; height:22px; flex:none}

/* Encabezado */
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:9; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:19px}
.logo img{width:40px; height:40px; display:block}
.logo b{font-weight:800}
.logo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
nav{display:flex; gap:22px; font-weight:600; font-size:15px}
nav a{text-decoration:none; color:var(--muted)}
nav a:hover{color:var(--ink)}
.bar .btn{min-height:42px; padding:0 18px; font-size:15px}
@media (max-width:820px){ nav{display:none} .bar .btn{display:none} }

/* Portada */
/* Portada: banda azul marino en ambos temas, ilustración a la derecha (abajo en celular) */
.hero-band{background:#0B1A4A url("portada.jpg") right center / cover no-repeat; color:#F3F6FC}
.hero{padding-block:72px 80px}
.hero-copy{max-width:540px; display:grid; gap:0}
.hero .eyebrow{color:#22E3F0}
.hero h1{font-size:clamp(40px,7.5vw,64px); font-weight:800; letter-spacing:-.02em; margin-top:12px; color:#FFFFFF}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,#22E3F0 0%,#4A92FF 55%,#9A7BFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{margin-top:18px; color:#C9D3F0}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero .btn-ghost{color:#FFFFFF; box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.price-tag{display:flex; align-items:baseline; gap:8px; margin-top:22px; font-weight:600}
.price-tag strong{font-family:var(--display); font-size:30px}
.hero .price-tag{color:#C9D3F0}
.hero .price-tag strong{color:#FFFFFF}
@media (max-width:820px){
  .hero-band{background-size:175% auto; background-position:right bottom}
  .hero{padding-block:44px calc(52vw + 24px)}
}
.como-grid{display:grid; grid-template-columns:1fr; gap:40px}
.lyric{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; box-shadow:0 18px 40px -24px rgba(28,23,54,.35); max-width:420px; justify-self:center; width:100%; position:relative}
.lyric-tag{position:absolute; top:-12px; left:20px; background:var(--grad); color:#FFFFFF; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px}
.lyric-title{font-weight:800; font-size:19px; margin-top:4px}
.lyric-sec{font-weight:800; margin-top:14px}
.lyric p{line-height:1.75}
.lyric-foot{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); font-size:14px; color:var(--muted)}
.lyric{margin:0; justify-self:start}

/* Pasos */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; padding:0; margin:0; counter-reset:paso}
.steps li{counter-increment:paso; display:grid; gap:8px; padding-top:18px; border-top:3px solid var(--ink)}
.steps li::before{content:"Paso " counter(paso); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.steps p{color:var(--muted)}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

/* Canciones */
.songs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.song{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center}
.play{width:56px; height:56px; border-radius:50%; border:0; background:var(--grad); color:#FFFFFF; display:grid; place-items:center; cursor:pointer}
.play svg{width:22px; height:22px}
.play .i-pause{display:none}
.song.is-playing .play .i-play{display:none}
.song.is-playing .play .i-pause{display:block}
.song-meta{min-width:0}
.song-occ{font-weight:800; font-size:17px}
.song-gen{color:var(--muted); font-size:15px}
.song-bar{grid-column:1/-1; height:4px; background:var(--line); border-radius:4px; overflow:hidden}
.song-bar i{display:block; height:100%; width:0; background:var(--grad)}
.song-note{grid-column:1/-1; font-size:13px; color:var(--muted)}
.more{display:flex; justify-content:flex-start; margin-top:24px}
@media (max-width:820px){ .songs{grid-template-columns:1fr} }

/* Placeholders de imagen */
.ph{background:var(--ph); color:var(--ph-ink); border:2px dashed color-mix(in srgb, var(--ph-ink) 45%, transparent); border-radius:var(--r); display:grid; place-items:center; text-align:center; padding:16px; font-weight:600; font-size:14px; max-width:100%}

/* Video y tarjeta */
.split{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.split .ph{aspect-ratio:9/16; max-height:520px; width:auto; justify-self:center}
.split .ph.wide{aspect-ratio:4/5}
.split-copy{display:grid; gap:16px; min-width:0}
.check{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.check li{display:grid; grid-template-columns:22px 1fr; gap:10px}
.check li::before{content:""; width:18px; height:18px; margin-top:4px; border-radius:50%; background:var(--soft); box-shadow:inset 0 0 0 5px var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; min-height:46px; padding:0 18px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-weight:700; text-decoration:none}
.chip:hover{border-color:var(--accent)}
@media (max-width:820px){ .split{grid-template-columns:1fr} .split .ph{width:100%; max-height:none; aspect-ratio:4/5} }
.alt{background:var(--surface); border-block:1px solid var(--line)}
.shot{display:block; width:100%; max-width:440px; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); justify-self:center; box-shadow:0 24px 48px -28px rgba(11,26,74,.55)}
.tiers{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.tiers li{display:grid; grid-template-columns:1fr auto; grid-template-areas:"info price" "info link"; gap:2px 16px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.tiers li.is-top{border:2px solid var(--accent)}
.tiers li > div{grid-area:info; min-width:0}
.t-name{font-weight:800; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.t-desc{color:var(--muted); font-size:15px}
.t-price{grid-area:price; font-family:var(--display); font-weight:800; font-size:22px; text-align:right; font-variant-numeric:tabular-nums}
.t-link{grid-area:link; font-weight:700; font-size:15px; color:var(--accent); text-align:right}
.badge{font-size:12px; font-weight:800; letter-spacing:.04em; padding:2px 10px; border-radius:999px; background:var(--grad); color:#FFFFFF}
.alt .tiers li{background:var(--bg)}
.player-col{display:grid; gap:10px; justify-items:center; min-width:0}
.player{position:relative; aspect-ratio:9/16; width:100%; max-width:340px; border-radius:var(--r); overflow:hidden; background:var(--grad); box-shadow:0 24px 48px -28px rgba(11,26,74,.55)}
.player.card{aspect-ratio:4/5; max-width:440px}
.player.card.is-playing{aspect-ratio:9/16; max-width:340px}
.player-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.player-play{position:absolute; inset:0; margin:auto; width:76px; height:76px; border-radius:50%; border:0; background:rgba(255,255,255,.94); color:#1B5FF2; display:grid; place-items:center; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.3)}
.player-play svg{width:34px; height:34px; margin-left:4px}
.player-label{position:absolute; left:12px; bottom:12px; background:rgba(11,26,74,.82); color:#FFFFFF; padding:4px 12px; border-radius:999px; font-weight:800; font-size:14px}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}
.player-yt{font-size:14px; color:var(--muted)}
.tiers li.is-on{background:var(--soft)}
button.t-link{background:none; border:0; padding:0; font:inherit; font-weight:700; font-size:15px; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.examples{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.examples li{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px}
.ex-name{font-weight:800; flex:1 1 160px}
.examples a{font-weight:700; color:var(--accent); font-size:15px}



/* Franja de números */
.band{background:var(--band); color:var(--band-ink)}
.band section{padding-block:48px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.stat strong{display:block; font-family:var(--display); font-size:clamp(38px,6vw,54px); font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:8px; color:var(--band-muted); max-width:24ch}
@media (max-width:820px){ .stats{grid-template-columns:1fr} }

/* Precio */
.price-box{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px}
.price-big{font-family:var(--display); font-weight:800; font-size:64px; line-height:1}
.price-big small{display:block; font-family:var(--body); font-size:15px; font-weight:600; color:var(--muted); margin-bottom:6px}
.pay{margin-top:14px; color:var(--muted); font-size:15px}
@media (max-width:640px){ .price-box{grid-template-columns:1fr} }

/* Preguntas */
.faq{display:grid; gap:10px; max-width:760px}
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:0 20px}
summary{cursor:pointer; list-style:none; font-weight:800; padding-block:18px; display:flex; justify-content:space-between; gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--accent); font-size:24px; line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted); padding-bottom:18px}

/* Formulario */
.form-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:start}
form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:grid; gap:18px; min-width:0}
.row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:grid; gap:6px; min-width:0}
label{font-weight:800; font-size:15px}
.hint{font-weight:400; color:var(--muted); font-size:14px}
input,select,textarea{font:inherit; font-size:17px; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; width:100%; min-height:50px}
textarea{min-height:140px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.err{color:var(--accent); font-weight:700; font-size:15px}
.privacy{font-size:14px; color:var(--muted); text-align:center}
.form-side{display:grid; gap:16px}
@media (max-width:820px){ .form-wrap{grid-template-columns:1fr} }
@media (max-width:560px){ .row{grid-template-columns:1fr} }

/* Pie */
footer{border-top:1px solid var(--line); padding-block:32px; color:var(--muted); font-size:15px}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px}
.foot a{color:var(--ink)}

/* Barra fija */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:9; background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line); padding-top:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); display:flex; gap:12px; align-items:center; justify-content:center; transition:transform .25s}
.sticky.hide{transform:translateY(110%)}
.sticky .btn{width:100%; max-width:420px}
@media (min-width:821px){ .sticky{display:none} body{padding-bottom:0} }

.song-gen .dur{font-variant-numeric:tabular-nums}
.songs.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){ .songs.two{grid-template-columns:1fr} }
.back{display:inline-flex; gap:6px; font-weight:700; color:var(--accent); text-decoration:none; font-size:15px}

.legal{max-width:68ch; display:grid; gap:12px; margin-top:20px}
.legal h1{font-size:clamp(30px,5vw,42px); font-weight:800}
.legal h2{font-size:21px; font-weight:700; margin-top:18px}
.legal ul{margin:0; padding-left:22px; display:grid; gap:6px}
.legal p, .legal li{color:var(--ink)}
.updated{color:var(--muted); font-size:15px}