/* Home de escritorio nativo -- solo se carga y solo se muestra en el home
   (body.has-desktop-page), a >=1200px. No afecta ninguna otra página ni el
   móvil en absoluto. */

@keyframes dh-eq { 0% { transform:scaleY(.16) } 100% { transform:scaleY(1) } }
@keyframes dh-drift { 0% { transform:translateX(0) rotate(0deg) } 100% { transform:translateX(-1800px) rotate(-18deg) } }
@keyframes dh-marquee { to { transform:translateX(-50%) } }
@keyframes dh-spin { to { transform:rotate(360deg) } }
@keyframes dh-rise { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:none } }
@keyframes dh-swap-in { from { opacity:0; transform:translateY(14px); filter:blur(6px) } to { opacity:1; transform:none; filter:none } }
@keyframes dh-pulse { 0% { box-shadow:0 0 0 0 rgba(255,65,89,.55) } 100% { box-shadow:0 0 0 28px rgba(255,65,89,0) } }
@keyframes dh-progress { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes dh-bob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }

.dh-root{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:#FFF6ED; background:#1B1022; overflow:hidden; }
.dh-root a{ color:#FFC9CF; text-decoration:none; }
.dh-root a:hover{ color:#FF4159; }
.dh-root [data-reveal]{ opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.dh-root [data-reveal].dh-shown{ opacity:1; transform:none; }

/* ---- Hero ---- */
.dh-hero{ position:relative; min-height:860px; background:radial-gradient(80% 70% at 70% 30%,#3E2850 0%,#261733 50%,#1B1022 100%); overflow:hidden; }
.dh-hero-glow{ position:absolute; inset:0; background:radial-gradient(40% 40% at 78% 42%,rgba(255,65,89,.22),transparent 70%); pointer-events:none; }
.dh-staff{ position:absolute; left:0; right:0; top:470px; height:120px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; opacity:.5; }
.dh-staff i{ display:block; height:1.5px; background:linear-gradient(90deg,transparent,#57426A 12%,#57426A 88%,transparent); }
.dh-notes{ position:absolute; left:0; right:0; top:420px; height:220px; pointer-events:none; }
.dh-note{ position:absolute; left:100%; animation:dh-drift linear infinite; }

.dh-nav{ position:relative; max-width:1280px; margin:0 auto; padding:28px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.dh-nav-brand{ display:flex; align-items:center; gap:10px; }
.dh-nav-mark{ width:38px; height:38px; border-radius:12px; background:#FF4159; display:flex; align-items:center; justify-content:center; }
.dh-nav-name{ font:600 24px/1 'Bricolage Grotesque',serif; }
.dh-nav-links{ display:flex; align-items:center; gap:30px; font:600 15px/1 'Plus Jakarta Sans'; color:#C2B2C8; white-space:nowrap; flex-wrap:wrap; justify-content:center; row-gap:10px; }
.dh-nav-links a{ color:#C2B2C8; cursor:pointer; transition:color .2s; }
.dh-nav-links a:hover{ color:#FFF6ED; }
.dh-nav-actions{ display:flex; align-items:center; gap:12px; white-space:nowrap; }
.dh-nav-login{ font:700 15px/1 'Plus Jakarta Sans'; color:#FFF6ED; padding:13px 18px; cursor:pointer; background:none; border:none; }
.dh-nav-cta{ font:700 15px/1 'Plus Jakarta Sans'; color:#fff; background:#FF4159; padding:14px 22px; border-radius:999px; cursor:pointer; box-shadow:0 4px 0 #D02A41; transition:transform .15s; border:none; }
.dh-nav-cta:hover{ transform:translateY(-2px); }

.dh-hero-grid{ position:relative; max-width:1280px; margin:0 auto; padding:56px 48px 90px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:56px; align-items:center; }
.dh-hero-copy{ display:flex; flex-direction:column; gap:26px; }
.dh-badge{ animation:dh-rise .9s cubic-bezier(.2,.8,.2,1) .05s both; align-self:flex-start; display:flex; align-items:center; gap:10px; white-space:nowrap; font:700 13px/1 'Plus Jakarta Sans'; letter-spacing:.06em; color:#FFC9CF; border:1.5px solid #57426A; padding:10px 16px; border-radius:999px; }
.dh-eq{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.dh-eq i{ display:block; width:3px; height:14px; background:#FF4159; border-radius:2px; transform-origin:bottom; animation:dh-eq ease-in-out infinite alternate; }
.dh-h1{ animation:dh-rise 1s cubic-bezier(.2,.8,.2,1) .15s both; font:600 clamp(56px,6.6vw,86px)/.95 'Bricolage Grotesque',serif; letter-spacing:-.035em; margin:0; text-wrap:balance; }
.dh-h1 em{ color:#FF4159; font-style:italic; }
.dh-lede{ animation:dh-rise 1s cubic-bezier(.2,.8,.2,1) .28s both; font:500 20px/1.55 'Plus Jakarta Sans'; margin:0; color:#D6C8DB; max-width:520px; text-wrap:pretty; }
.dh-cta-row{ animation:dh-rise 1s cubic-bezier(.2,.8,.2,1) .4s both; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.dh-cta-btn{ display:flex; align-items:center; gap:12px; background:#FF4159; color:#fff; font:700 19px/1 'Plus Jakarta Sans'; padding:22px 32px; border-radius:999px; box-shadow:0 6px 0 #D02A41; cursor:pointer; transition:transform .15s,box-shadow .15s; border:none; }
.dh-cta-btn:hover{ transform:translateY(-3px); box-shadow:0 9px 0 #D02A41; }
.dh-cta-btn:active{ transform:translateY(3px); box-shadow:0 3px 0 #D02A41; }
.dh-price-block{ display:flex; flex-direction:column; gap:5px; }
.dh-price-value{ font:800 20px/1 'Plus Jakarta Sans'; }
.dh-price-note{ font:500 14px/1 'Plus Jakarta Sans'; color:#A895B0; }
.dh-social-row{ animation:dh-rise 1s cubic-bezier(.2,.8,.2,1) .52s both; display:flex; align-items:center; gap:14px; margin-top:8px; }
.dh-avatar-stack{ display:flex; }
.dh-avatar-stack i{ display:block; width:36px; height:36px; border-radius:50%; border:3px solid #261733; margin-left:-10px; }
.dh-avatar-stack i:first-child{ margin-left:0; }
.dh-social-text{ font:600 14px/1.4 'Plus Jakarta Sans'; color:#C2B2C8; }
.dh-social-text b{ color:#FFF6ED; }

/* ---- Showcase (tarjeta giratoria de géneros) ---- */
.dh-showcase{ animation:dh-rise 1.1s cubic-bezier(.2,.8,.2,1) .3s both; position:relative; display:flex; flex-direction:column; gap:22px; align-items:stretch; }
.dh-vinyl-wrap{ position:relative; height:430px; }
.dh-vinyl{ position:absolute; right:0; top:40px; width:350px; height:350px; border-radius:50%; background:repeating-radial-gradient(circle at 50% 50%,#140B19 0 2px,#221529 2px 4px); box-shadow:0 30px 60px -20px rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; animation:dh-spin 7s linear infinite; }
.dh-vinyl-sheen{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 20deg,transparent 0 12%,rgba(255,255,255,.08) 16%,transparent 22% 62%,rgba(255,255,255,.06) 66%,transparent 72%); }
.dh-vinyl-center{ width:118px; height:118px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; transition:background .6s; }
.dh-vinyl-center span{ font:700 22px/1 'Caveat',cursive; color:#2A1B33; }
.dh-vinyl-hole{ position:absolute; width:12px; height:12px; border-radius:50%; background:#1B1022; bottom:22px; }

.dh-card{ position:absolute; left:0; top:0; width:410px; max-width:calc(100% - 40px); background:#FFF6ED; color:#2A1B33; border-radius:30px; padding:28px; box-shadow:0 40px 80px -30px rgba(0,0,0,.7); display:flex; flex-direction:column; gap:18px; }
.dh-card-head{ display:flex; align-items:center; justify-content:space-between; }
.dh-live{ display:flex; align-items:center; gap:8px; font:700 12px/1 ui-monospace,monospace; letter-spacing:.16em; color:#A66A00; }
.dh-live i{ display:block; width:8px; height:8px; border-radius:50%; background:#FF4159; animation:dh-pulse 1.6s ease-out infinite; }
.dh-counter{ font:600 13px/1 'Plus Jakarta Sans'; color:#8A7A90; }
.dh-card-swap{ display:flex; flex-direction:column; gap:6px; }
.dh-genre-name{ font:700 56px/.95 'Bricolage Grotesque',serif; letter-spacing:-.03em; transition:color .6s; }
.dh-genre-meta{ font:600 15px/1.3 'Plus Jakarta Sans'; color:#5B4A63; }
.dh-quote{ font:700 34px/1.12 'Caveat',cursive; margin:0; color:#2A1B33; min-height:76px; text-wrap:pretty; }
.dh-bars{ display:flex; align-items:flex-end; gap:4px; height:48px; }
.dh-bars i{ display:block; flex:1; border-radius:3px; transition:background .6s; transform-origin:bottom; animation:dh-eq ease-in-out infinite alternate; }
.dh-controls{ display:flex; align-items:center; gap:16px; }
.dh-play{ width:58px; height:58px; border-radius:50%; background:#FF4159; display:flex; align-items:center; justify-content:center; flex:none; cursor:pointer; border:none; animation:dh-pulse 1.8s ease-out infinite; }
.dh-progress-col{ flex:1; display:flex; flex-direction:column; gap:8px; }
.dh-progress-track{ display:block; height:6px; border-radius:999px; background:#EFE1D4; overflow:hidden; }
.dh-progress-fill{ display:block; height:100%; background:#2A1B33; border-radius:999px; transform-origin:left; transform:scaleX(0); }
.dh-progress-labels{ display:flex; justify-content:space-between; font:700 12px/1 ui-monospace,monospace; color:#8A7A90; }

.dh-genre-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.dh-genre-pill{ font:700 15px/1 'Plus Jakarta Sans'; padding:13px 18px; border-radius:999px; cursor:pointer; transition:all .35s cubic-bezier(.2,.8,.2,1); border:1.5px solid #57426A; background:transparent; color:#D6C8DB; }
.dh-genre-pill:hover{ transform:translateY(-2px); }
.dh-genre-pill.active{ color:#1B1022; }

/* ---- Marquesina ---- */
.dh-marquee-wrap{ background:#FF4159; padding:22px 0; overflow:hidden; transform:rotate(-1.4deg); margin:-18px -20px 0; position:relative; z-index:2; box-shadow:0 16px 30px -18px rgba(0,0,0,.6); }
.dh-marquee{ display:flex; gap:18px; width:max-content; animation:dh-marquee 34s linear infinite; }
.dh-marquee-item{ display:flex; align-items:center; gap:18px; flex:none; }
.dh-marquee-item span{ font:700 38px/1 'Caveat',cursive; color:#fff; white-space:nowrap; }

/* ---- Secciones claras ---- */
.dh-section{ padding:130px 0 120px; margin-top:-10px; }
.dh-section-inner{ max-width:1280px; margin:0 auto; padding:0 48px; display:flex; flex-direction:column; gap:56px; }
.dh-section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.dh-eyebrow{ font:700 12px/1 ui-monospace,monospace; letter-spacing:.18em; color:#A66A00; }
.dh-h2{ font:600 60px/1 'Bricolage Grotesque',serif; letter-spacing:-.03em; margin:0; text-wrap:balance; }
.dh-section-desc{ font:500 18px/1.55 'Plus Jakarta Sans'; margin:0; color:#5B4A63; max-width:380px; }
.dh-section-btn{ font:700 16px/1 'Plus Jakarta Sans'; color:#2A1B33; border:2px solid #2A1B33; padding:15px 22px; border-radius:999px; cursor:pointer; transition:all .2s; background:none; }
.dh-section-btn:hover{ background:#2A1B33; color:#FFF6ED; }

/* Cómo funciona */
.dh-steps{ position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; }
.dh-steps-line{ position:absolute; left:0; right:0; top:40px; height:96px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.dh-steps-line i{ display:block; height:2px; background:#E6D5C6; }
.dh-step{ position:relative; display:flex; flex-direction:column; gap:14px; padding:0 14px; cursor:default; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.dh-step:hover{ transform:translateY(-8px); }
.dh-step-visual{ position:relative; height:176px; }
.dh-step-note{ position:absolute; left:22px; display:block; width:34px; height:74px; }
.dh-step-note i:first-child{ position:absolute; left:0; bottom:0; width:32px; height:24px; border-radius:50%; background:#2A1B33; transform:rotate(-20deg); }
.dh-step-note i:last-child{ position:absolute; right:1px; bottom:10px; width:3px; height:64px; border-radius:2px; background:#2A1B33; }
.dh-step-heart{ position:absolute; left:22px; width:58px; height:58px; border-radius:50%; background:#FF4159; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 8px #FFE0E4,0 6px 0 8px #FFD3DA; animation:dh-bob 2.4s ease-in-out infinite; }
.dh-step-n{ font:700 12px/1 ui-monospace,monospace; letter-spacing:.14em; color:#A66A00; }
.dh-step-title{ font:600 26px/1.05 'Bricolage Grotesque',serif; }
.dh-step-desc{ font:500 15px/1.5 'Plus Jakarta Sans'; color:#5B4A63; text-wrap:pretty; }

/* Explorar */
.dh-explore-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.dh-song-card{ background:#fff; border-radius:26px; padding:18px; box-shadow:0 3px 0 #EAD9C9; display:flex; flex-direction:column; gap:18px; cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s; text-decoration:none; color:inherit; }
.dh-song-card:hover{ transform:translateY(-8px) rotate(-.6deg); box-shadow:0 26px 40px -24px rgba(42,27,51,.45); }
.dh-song-cover{ position:relative; height:250px; border-radius:18px; overflow:hidden; }
.dh-song-vinyl{ position:absolute; right:-70px; top:40px; width:190px; height:190px; border-radius:50%; background:repeating-radial-gradient(circle,#140B19 0 2px,#261830 2px 4px); display:flex; align-items:center; justify-content:center; animation:dh-spin 5s linear infinite; }
.dh-song-vinyl i{ display:block; width:60px; height:60px; border-radius:50%; }
.dh-song-play{ position:absolute; left:16px; bottom:16px; width:56px; height:56px; border-radius:50%; background:#2A1B33; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(0,0,0,.5); }
.dh-song-body{ display:flex; flex-direction:column; gap:6px; padding:0 4px; }
.dh-song-title{ font:600 26px/1.1 'Bricolage Grotesque',serif; }
.dh-song-meta{ font:500 14px/1.4 'Plus Jakarta Sans'; color:#5B4A63; }
.dh-song-foot{ display:flex; justify-content:space-between; align-items:center; padding:0 4px 4px; }
.dh-song-para{ font:700 26px/1 'Caveat',cursive; color:#FF4159; }
.dh-song-likes{ display:flex; align-items:center; gap:6px; font:700 14px/1 'Plus Jakarta Sans'; color:#5B4A63; }

/* Boleta CTA */
.dh-boleta-section{ background:radial-gradient(70% 90% at 50% 0%,#3E2850 0%,#1B1022 75%); padding:130px 48px 120px; }
.dh-boleta{ max-width:1040px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); background:#FFF6ED; color:#2A1B33; border-radius:30px; box-shadow:0 50px 90px -40px rgba(0,0,0,.8); position:relative; }
.dh-boleta-left{ padding:52px; display:flex; flex-direction:column; gap:22px; }
.dh-boleta-title{ font:600 52px/1 'Bricolage Grotesque',serif; letter-spacing:-.03em; margin:0; text-wrap:balance; }
.dh-boleta-list{ display:flex; flex-direction:column; gap:12px; }
.dh-boleta-list span{ display:flex; align-items:center; gap:12px; font:600 17px/1.3 'Plus Jakarta Sans'; }
.dh-boleta-right{ position:relative; border-left:2.5px dashed #E0CBB8; padding:52px 44px; display:flex; flex-direction:column; justify-content:center; gap:18px; background:#FFF0DC; border-radius:0 30px 30px 0; }
.dh-punch{ position:absolute; left:-19px; width:36px; height:36px; border-radius:50%; background:#2E1D3B; }
.dh-punch.top{ top:-18px; }
.dh-punch.bottom{ bottom:-18px; background:#1D1125; }
.dh-boleta-label{ font:600 15px/1 'Plus Jakarta Sans'; color:#7A4E00; }
.dh-boleta-price{ font:800 58px/1 'Plus Jakarta Sans'; letter-spacing:-.03em; }
.dh-boleta-price span{ font:700 20px/1 'Plus Jakarta Sans'; margin-left:6px; }
.dh-boleta-cta{ display:flex; align-items:center; justify-content:center; gap:10px; background:#FF4159; color:#fff; font:700 18px/1 'Plus Jakarta Sans'; padding:20px; border-radius:999px; box-shadow:0 6px 0 #D02A41; cursor:pointer; transition:transform .15s; border:none; width:100%; }
.dh-boleta-cta:hover{ transform:translateY(-3px); }
.dh-boleta-methods{ font:600 13px/1.4 'Plus Jakarta Sans'; color:#7A4E00; text-align:center; }

/* Footer */
.dh-footer{ background:#1B1022; border-top:1px solid #2E1D3B; padding:34px 48px; }
.dh-footer-inner{ max-width:1280px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; font:500 14px/1 'Plus Jakarta Sans'; color:#8E7C96; }
.dh-footer-brand{ font:600 20px/1 'Bricolage Grotesque',serif; color:#FFF6ED; }
.dh-footer-links{ display:flex; gap:26px; }