/* Escritorio nativo para el wizard, resultado, explorar, login y estado de
   pago. Reutiliza las keyframes/tokens de desktop-home.css (debe cargarse
   también en cada página que use este archivo). Todo vive bajo
   body.has-desktop-page y solo se activa en el media query de style.css. */

.dw-root{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:#FFF6ED; min-height:100vh; }
.dw-root a{ color:#FFC9CF; text-decoration:none; }
.dw-root textarea, .dw-root input{ font-family:inherit; }
.dw-root textarea:focus, .dw-root input:focus{ outline:none; }

.dw-dark{ position:relative; min-height:100vh; background:radial-gradient(90% 70% at 60% 10%,#3A2647 0%,#241531 55%,#160D1F 100%); display:flex; flex-direction:column; overflow:hidden; }

/* Disco de vinilo decorativo, reutilizable en cualquier esquina */
.dw-vinyl{ position:absolute; border-radius:50%; background:repeating-radial-gradient(circle,#140B19 0 2px,#221529 2px 4px); display:flex; align-items:center; justify-content:center; pointer-events:none; animation:dh-spin linear infinite; }
.dw-vinyl-sheen{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 20deg,transparent 0 12%,rgba(255,255,255,.07) 16%,transparent 22% 62%,rgba(255,255,255,.05) 66%,transparent 72%); }
.dw-vinyl-center{ border-radius:50%; display:flex; align-items:center; justify-content:center; }

/* Encabezado del wizard (logo + progreso de 6 pasos) */
.dw-header{ display:flex; align-items:center; justify-content:space-between; gap:40px; padding:24px 48px 34px; border-bottom:1px solid #33224A; position:relative; z-index:1; }
.dw-header-brand{ display:flex; align-items:center; gap:10px; flex:none; }
.dw-header-mark{ width:34px; height:34px; border-radius:11px; background:#FF4159; display:flex; align-items:center; justify-content:center; }
.dw-header-name{ font:600 21px/1 'Bricolage Grotesque',serif; }
.dw-steps{ flex:1; max-width:760px; display:flex; align-items:center; }
.dw-steps-line{ flex:1; height:2px; border-radius:2px; }
.dw-steps-line.done{ background:#2FC7A5; }
.dw-steps-line.todo{ background:#43304D; }
.dw-step-node{ position:relative; display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; }
.dw-step-dot{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dw-step-dot.done{ background:#2FC7A5; }
.dw-step-dot.current{ width:30px; height:30px; background:#FF4159; box-shadow:0 0 0 6px rgba(255,65,89,.22); font:800 13px/1 'Plus Jakarta Sans'; color:#fff; }
.dw-step-dot.todo{ border:2px solid #57426A; font:700 11px/1 'Plus Jakarta Sans'; color:#8E7C96; background:transparent; }
.dw-step-label{ position:absolute; top:38px; left:50%; transform:translateX(-50%); white-space:nowrap; font:700 12px/1 'Plus Jakarta Sans'; }
.dw-header-actions{ display:flex; align-items:center; gap:18px; flex:none; }
.dw-header-step{ font:700 14px/1 'Plus Jakarta Sans'; color:#FFC9CF; white-space:nowrap; }
.dw-header-exit{ font:700 14px/1 'Plus Jakarta Sans'; color:#D6C8DB; border:1.5px solid #43304D; padding:12px 18px; border-radius:999px; white-space:nowrap; }
.dw-header-exit:hover{ color:#FFF6ED; }

/* Cuerpo y footer sticky de cada paso */
.dw-body{ flex:1; position:relative; padding:48px 48px 0; z-index:1; }
.dw-footer{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 48px; border-top:1px solid #33224A; background:rgba(27,16,34,.85); }
.dw-footer-back{ font:700 15px/1 'Plus Jakarta Sans'; color:#D6C8DB; background:none; border:none; cursor:pointer; }
.dw-footer-back:hover{ color:#FFF6ED; }
.dw-footer-status{ font:600 15px/1 'Plus Jakarta Sans'; color:#C2B2C8; }
.dw-cta{ display:flex; align-items:center; gap:10px; background:#FF4159; color:#fff; font:700 17px/1 'Plus Jakarta Sans'; padding:19px 30px; border-radius:999px; box-shadow:0 5px 0 #D02A41; cursor:pointer; border:none; transition:transform .15s; }
.dw-cta:hover{ transform:translateY(-2px); }
.dw-cta[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

.dw-eyebrow{ font:700 12px/1 ui-monospace,monospace; letter-spacing:.18em; color:#FFC9CF; }
.dw-h1{ font:600 50px/1 'Bricolage Grotesque',serif; margin:0; letter-spacing:-.03em; text-wrap:balance; }
.dw-lede{ font:500 17px/1.55 'Plus Jakarta Sans'; margin:0; color:#C2B2C8; }
.dw-helper{ display:flex; gap:12px; align-items:flex-start; border-radius:18px; padding:16px 18px; }
.dw-helper.teal{ background:rgba(47,199,165,.12); border:1px solid rgba(47,199,165,.3); color:#BFEDE1; }
.dw-helper.amber{ background:rgba(242,169,59,.12); border:1px solid rgba(242,169,59,.35); color:#F7D9A8; }

/* Tarjetas de selección (género/voz) */
.dw-grid{ display:grid; gap:14px; align-content:start; }
.dw-pick-card{ position:relative; border-radius:22px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; overflow:hidden; transition:all .3s cubic-bezier(.2,.8,.2,1); background:rgba(42,27,51,.85); border:2px solid #43304D; color:#FFF6ED; }
.dw-pick-card:hover{ transform:translateY(-4px); }
.dw-pick-card.active{ background:#FFF6ED; color:#2A1B33; }
.dw-pick-card .dw-groove{ position:absolute; right:-26px; top:-26px; width:86px; height:86px; border-radius:50%; opacity:.9; }
.dw-pick-card .dw-dot{ position:absolute; right:4px; top:4px; width:30px; height:30px; border-radius:50%; }
.dw-pick-name{ font:600 25px/1 'Bricolage Grotesque',serif; }
.dw-pick-tag{ font:500 14px/1.35 'Plus Jakarta Sans'; }
.dw-otros-card{ grid-column:span 2; border-radius:22px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; cursor:pointer; border:2px dashed #57426A; background:rgba(42,27,51,.6); transition:all .3s; }
.dw-otros-card.active{ background:#FFF6ED; border-color:#FF4159; }
.dw-otros-input{ width:100%; border:1.5px solid #43304D; background:#1F1327; color:#FFF6ED; border-radius:14px; padding:13px 14px; font:500 16px/1 'Plus Jakarta Sans'; }
.dw-otros-card.active .dw-otros-input{ border-color:#2FC7A5; background:#fff; color:#2A1B33; }

/* Carta/nota (paso mensaje) */
.dw-note-card{ position:relative; transform:rotate(-1.2deg); background:#FFF6ED; color:#2A1B33; border-radius:10px; padding:38px 44px 28px; box-shadow:0 40px 70px -30px rgba(0,0,0,.75); display:flex; flex-direction:column; gap:14px; }
.dw-note-tape{ position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(2deg); width:120px; height:30px; background:rgba(255,201,207,.75); border-radius:3px; z-index:2; }
.dw-note-textarea{ width:100%; resize:none; border:none; background-color:transparent; background-image:repeating-linear-gradient(180deg,transparent 0 41px,#EAD6C4 41px 42px); background-attachment:local; font:600 29px/42px 'Caveat',cursive; color:#2A1B33; padding:0; }

/* Voz / muestras: barras de audio */
.dw-bars{ display:flex; align-items:flex-end; gap:3px; }
.dw-bars i{ display:block; flex:1; border-radius:3px; transform-origin:bottom; transition:height .2s ease; }
.dw-bars.is-playing i{ animation-name:dh-eq; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-direction:alternate; }

/* Botón de reproducir de una muestra: invita a hacer clic con un pulso suave;
   se apaga mientras esa muestra ya está sonando. */
@keyframes dw-invite-teal{ 0%{ box-shadow:0 0 0 0 rgba(10,138,114,.5); } 100%{ box-shadow:0 0 0 14px rgba(10,138,114,0); } }
@keyframes dw-invite-amber{ 0%{ box-shadow:0 0 0 0 rgba(166,106,0,.5); } 100%{ box-shadow:0 0 0 14px rgba(166,106,0,0); } }
.dw-play-invite{ animation:dw-invite-teal 1.7s ease-out infinite; }
.dw-play-invite.amber{ animation-name:dw-invite-amber; }
.dw-play-invite.is-playing{ animation:none; box-shadow:none; }

/* Tarjeta de letra */
.dw-lyric-card{ background:#FFF6ED; color:#2A1B33; border-radius:24px; box-shadow:0 40px 80px -30px rgba(0,0,0,.8); overflow:hidden; }
.dw-lyric-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 32px; border-bottom:2px dashed #E0CBB8; background:#FFF0DC; }
.dw-lyric-body{ padding:28px 40px 34px; display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.dw-lyric-col{ display:flex; flex-direction:column; gap:10px; }
.dw-lyric-line{ font:700 27px/1.15 'Caveat',cursive; }
.dw-lyric-chorus{ font:700 31px/1.15 'Caveat',cursive; color:#D02A41; }

/* Talonario (muestras) */
.dw-stub{ display:grid; grid-template-columns:minmax(0,1fr) 150px; border-radius:26px; cursor:pointer; transition:all .35s cubic-bezier(.2,.8,.2,1); background:#FFF6ED; color:#2A1B33; }
.dw-stub.active{ outline:3px solid #FF4159; outline-offset:4px; }
.dw-stub-main{ padding:26px; display:flex; flex-direction:column; gap:20px; }
.dw-stub-tear{ position:relative; border-left:2.5px dashed #E0CBB8; border-radius:0 26px 26px 0; background:#FFF0DC; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; }
.dw-stub-punch{ position:absolute; left:-17px; width:32px; height:32px; border-radius:50%; }
.dw-stub-punch.top{ top:-16px; background:#2C1C3A; }
.dw-stub-punch.bottom{ bottom:-16px; background:#20132A; }

/* Tarjetas claras genéricas (pago, explorar) */
.dw-light-card{ background:#FFF6ED; color:#2A1B33; border-radius:28px; box-shadow:0 40px 80px -30px rgba(0,0,0,.8); overflow:hidden; }
.dw-method-card{ border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:14px; cursor:pointer; transition:all .25s; background:rgba(42,27,51,.6); color:#FFF6ED; border:2px solid #43304D; }
.dw-method-card.active{ background:#FFF6ED; color:#2A1B33; border-color:#FF4159; }