/* Referencias Digital Blue: superficies musicales, conservando la tipografía
   compartida de site-theme.css y las capturas auténticas de la extensión. */
.landing-page .hero{position:relative;isolation:isolate;gap:56px;padding:48px 40px;margin-top:24px;border:1px solid #ffffffd9;border-radius:30px;background:linear-gradient(125deg,#ffffffb8,#eaf4ffa6 48%,#bfdeffad);box-shadow:0 18px 48px #10376012}
.landing-page .hero:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 86% 30%,#188aeb30,transparent 55%)}
.landing-page .hero-copy{max-width:510px}.landing-page h1{font-size:clamp(38px,4.1vw,58px)}
.landing-page .hero h1 span{color:#0065d1}.landing-page .hero-actions{align-items:flex-start;flex-direction:column}.landing-page .hero-actions .button{min-height:50px;padding-inline:28px;font-size:15px}
.landing-page .button.primary,.pill-button.primary{background:linear-gradient(120deg,#0875c8,#0759cf);box-shadow:0 7px 20px #188aeb30}
.landing-page .hero-preview{padding:0;min-width:0}.landing-page .hero-image-frame{position:relative;z-index:2;width:100%;max-width:390px;height:510px;margin-inline:auto;box-shadow:0 20px 42px #125c9a30;border:1px solid #fff;animation:player-arrival .8s cubic-bezier(.2,.7,.2,1) both}
.landing-page .preview-halo{inset:-18px -20px 130px -35px;border-radius:50%;background:radial-gradient(ellipse,#188aeb55,#9acfff50 60%,transparent 72%);animation:halo-drift 9s ease-in-out infinite alternate}
.album-stack{position:absolute;inset:80px 0 200px;z-index:1;pointer-events:none}
.album-art{position:absolute;left:-28px;top:40px;width:150px;height:190px;border-radius:14px;border:1px solid #ffffffcf;box-shadow:0 12px 22px #0d213825;transition:transform .85s cubic-bezier(.2,.7,.2,1),opacity .6s}
.album-one{background:linear-gradient(155deg,#ffbc78,#e96951 45%,#742f64);transform:translate(-10px,0) rotate(-17deg)}
.album-two{background:linear-gradient(35deg,#08263f,#2889b0 45%,#b3e4ed);transform:translate(5px,90px) rotate(-25deg)}
.album-three{background:radial-gradient(circle at 55% 30%,#c3e5ff 0 18%,transparent 19%),linear-gradient(145deg,#273b68,#516f9a 50%,#f8bb9c);transform:translate(10px,-50px) rotate(-10deg)}
[data-stage=add] .album-one{transform:translate(65px,90px) rotate(4deg)}[data-stage=add] .album-two{transform:translate(-18px,40px) rotate(-14deg)}[data-stage=add] .album-three{transform:translate(4px,-35px) rotate(-17deg)}
[data-stage=organize] .album-one{transform:translate(30px,50px) rotate(-7deg)}[data-stage=organize] .album-two{transform:translate(24px,100px) rotate(-7deg)}[data-stage=organize] .album-three{transform:translate(36px,0) rotate(-7deg)}
.hero-story{position:relative;z-index:3;background:#ffffffd9;border:1px solid #fff;border-radius:18px;padding:16px;margin-top:16px;box-shadow:0 10px 24px #1037600d}
.story-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.story-heading>span{font-size:9px;font-weight:800;letter-spacing:.1em;color:#526476}.story-heading button{background:transparent;border:0;min-height:44px;color:#075caa;font-size:11px;padding:6px;text-decoration:underline;text-underline-offset:3px}
.story-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.story-steps button{min-height:44px;border:1px solid #dce7f2;background:#f7fbff;border-radius:10px;color:#42566b;font-size:12px;font-weight:700;transition:background .25s,color .25s,box-shadow .25s}.story-steps button span{display:block;font:10px ui-monospace,monospace;opacity:.75;margin-bottom:3px}.story-steps button[aria-pressed=true]{color:#075caa;border-color:#8fc7f6;background:#e0f0ff;box-shadow:inset 0 -3px #188aeb}
.hero-story p{font-size:13px;line-height:1.5;min-height:40px;margin-top:12px;color:#344c63}.hero-story small{font-size:10px;color:#596a7d}.landing-page .hero-preview figcaption{margin-top:10px}
.landing-page .benefits{margin-top:24px}.landing-page .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.landing-page .feature{background:linear-gradient(140deg,#ffffffc9,#eaf4ff94);padding:22px}.landing-page .feature h3{font-size:19px}.landing-page .feature p{font-size:14px}.landing-page .icon-tile{width:56px;height:56px;border:1px solid white;background:linear-gradient(135deg,#f7fbff,#d9ecff);border-radius:16px}.landing-page .icon-tile img{filter:invert(37%) sepia(83%) saturate(1623%) hue-rotate(184deg) brightness(94%)}
.landing-page .detail-card,.manual-card,.policy-card{background:linear-gradient(135deg,#ffffffc7,#eaf4ffab)}
.landing-page .final-cta{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(110deg,#075c98,#0d2138 65%,#074c91);color:white;border-color:#0d4e8f;flex-wrap:wrap}.landing-page .final-cta h2{font-size:26px}.landing-page .final-cta p{color:#d5e9fa}.landing-page .final-cta>*:not(.cta-vinyl){position:relative;z-index:1}.landing-page .final-cta .button{margin-left:0}.landing-page .cta-manual{border:1px solid #eaf4ff;background:#0d213880;color:white}
.cta-vinyl{position:absolute;z-index:0;width:390px;height:390px;right:-150px;bottom:-240px;border-radius:50%;transform:rotate(-25deg) scaleY(.6);background:repeating-radial-gradient(circle,#095b9a 0 2px,#083d70 3px 5px);box-shadow:0 0 0 1px #4facff}.cta-vinyl:after{content:"";position:absolute;inset:42%;background:#91c6eb;border:10px solid #0d2138;border-radius:50%}
/* El movimiento acompaña las acciones y la sección activa; no simula sonido. */
.site-header a,.manual-jumpbar a,.button,.pill-button{transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.site-header nav a[aria-current=location],.manual-jumpbar a[aria-current=location]{background:#dceeff;color:#075caa;box-shadow:inset 0 -2px #188aeb}
.reading-progress{position:fixed;left:0;top:0;z-index:100;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:#188aeb;pointer-events:none}
.landing-page #main-nav.is-open{animation:menu-arrival .22s ease-out}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition:none!important}.motion-paused{scroll-behavior:auto}
@keyframes player-arrival{from{opacity:0;transform:translateY(24px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes halo-drift{from{transform:translate(-8px,0) scale(.96)}to{transform:translate(8px,12px) scale(1.04)}}
@keyframes menu-arrival{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.landing-page .hero{padding:36px 24px;gap:32px}.landing-page .hero-image-frame{height:470px}.album-art{left:-8px;width:120px;height:150px}.landing-page .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.landing-page .hero{grid-template-columns:1fr;gap:40px}.landing-page .hero-copy{max-width:620px}.landing-page .hero-preview{width:min(440px,100%);margin:auto}.landing-page .hero-image-frame{height:510px}.landing-page .hero-actions{flex-direction:row}.landing-page .hero h1{font-size:46px}}
@media(max-width:650px){.landing-page .hero{margin-top:16px;padding:28px 20px;border-radius:22px}.landing-page .hero h1{font-size:38px}.landing-page .hero-actions{flex-direction:column;align-items:stretch}.landing-page .hero-actions .button{padding-inline:12px;font-size:14px}.landing-page .hero-preview{margin:0;width:100%}.landing-page .hero-image-frame{height:430px}.album-stack{display:none}.landing-page .preview-halo{inset:-12px -10px 140px}.hero-story{padding:12px}.story-heading{gap:6px}.story-heading>span{font-size:8px}.story-heading button{font-size:10px}.story-steps button{font-size:11px}.landing-page .feature-grid{grid-template-columns:1fr}.landing-page .final-cta h2{font-size:27px}}
@media(max-width:360px){.landing-page .hero{padding:24px 16px}.landing-page .hero h1{font-size:34px}.landing-page .hero-image-frame{height:370px}.hero-story{padding:10px}.story-steps{gap:4px}.story-steps button{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.hero-offscreen *,.document-hidden *{animation-play-state:paused!important}

/* Capturas v2: encuadre completo y carátulas vectoriales propias. La imagen
   conserva su proporción en móvil; no se recortan controles mediante CSS. */
.landing-page .hero-image-frame{height:auto;aspect-ratio:480/688}
.landing-page .hero-image-frame img{width:100%;height:auto}
.album-one{background:center/cover url('assets/demo-art/dias-abiertos.svg')}
.album-two{background:center/cover url('assets/demo-art/jardin-interior.svg')}
.album-three{background:center/cover url('assets/demo-art/mapas-nocturnos.svg')}
.landing-page .theme-image{height:auto;aspect-ratio:480/390}
.landing-page .theme-image img{width:100%;height:100%;object-fit:contain}
.landing-page .demo-screen img{max-height:none;height:auto}
.image-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.image-detail-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:var(--surface);text-decoration:none;color:var(--text);box-shadow:var(--shadow-soft)}
.detail-capture{background:#eaf4ff;border-bottom:1px solid var(--border)}
.detail-capture img{width:100%;height:auto}
.detail-caption{padding:22px}.detail-caption h3{font-size:20px;display:flex;justify-content:space-between;gap:12px}.detail-caption p{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.6}
.image-detail-card:hover{border-color:#8fc7f6}
@media(max-width:850px){.image-detail-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}