/* Portadas interactivas del estudio; la presentación usa el disco 3D en CSS. */
:root {
  --paper: #191c19;
  --ink: #f1f0e7;
  --muted: #b1b7ab;
  --red: #d7ef9d;
  --line: #3d433b;
  --ease-studio: cubic-bezier(.22, 1, .36, 1);
}
body { background: var(--paper); color: var(--ink); }
::selection { background: #d7ef9d; color: #191c19; }
.wrap { width: min(1240px, calc(100% - 96px)); }
.preview-banner { background: #242a23; color: #c7d3bb; font-size: 9px; letter-spacing: .12em; padding: 9px 16px; }
.site-header { padding-block: 27px; border-bottom: 1px solid var(--line); }
.wordmark { letter-spacing: -.055em; font-size: 35px; }
.brand-dot { color: var(--red); }
.site-header nav { gap: 30px; }
.site-header nav>a { color: #c0c5b9; font-size: 12px; }
.button { background: var(--red); color: #20271c; border: 1px solid transparent; border-radius: 99px; font-weight: 600; padding: 17px 27px; transition: background 180ms ease, transform 160ms var(--ease-studio); }
.button:hover { background: #e7fbbd; }
.button:active { transform: scale(.97); }
.button:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #f7d887; outline-offset: 5px; }
.site-header .button { background: transparent; color: var(--ink); border-color: #77816b; padding: 12px 21px; }
.site-header .button:hover { background: #30392a; }
.hero { grid-template-columns: 1.05fr 1fr; gap: 30px; padding-block: 66px 74px; align-items: center; }
.hero h1 { font-size: clamp(64px, 6.5vw, 96px); line-height: .98; letter-spacing: -.055em; }
.hero h1 em { color: var(--red); font-weight: 400; }
.hero .eyebrow { font-size: 10px; margin-bottom: 32px; color: #bac7ab; letter-spacing: .14em; }
.tiny-star { font-size: 21px; margin-right: 10px; }
.hero-description { font-size: 16px; margin-top: 27px; line-height: 1.8; }
.hero-actions { margin-top: 29px; gap: 27px; }
.hero-price { font-size: 11px; }
.hero-price strong { font-size: 20px; }
.hero-price small { color: var(--muted); }
.listen-link { color: #bac0b3; font-size: 11px; text-decoration: none; gap: 11px; margin-top: 21px; }
.listen-link:hover { color: var(--ink); }
.record-experience { --jacket: #c5d8dd; --jacket-ink: #213b42; position: relative; min-width: 0; }
.record-experience[data-edition=mama] { --jacket: #d9d9a4; --jacket-ink: #404822; }
.record-experience[data-edition=cumple] { --jacket: #e7b188; --jacket-ink: #6a3522; }
.edition-meta { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .16em; color: #b4bfab; padding-inline: 16px; }
.edition-meta span:last-child { color: #8e9986; }
.record-stage { position: relative; height: 455px; perspective: 1100px; overflow: visible; }
.studio-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; border-radius: 3px; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; }
.is-film .studio-film { display: block; }
.is-film .record-object, .is-film .stage-shadow, .is-film .record-stage::before { visibility: hidden; }
.record-stage::before { content: ''; position: absolute; inset: 48px 4px 20px; border: 1px solid #ffffff0b; border-radius: 50%; transform: rotate(-18deg); }
.stage-shadow { position: absolute; bottom: 32px; left: 12%; width: 78%; height: 28px; background: #060a0699; border-radius: 50%; filter: blur(12px); transform: rotate(-7deg); }
.record-object { position: absolute; left: 10%; top: 54px; width: 290px; height: 320px; transform-style: preserve-3d; transform: rotateX(12deg) rotateY(-23deg) rotateZ(-9deg); }
.record-sleeve { position: absolute; inset: 0; background: var(--jacket); color: var(--jacket-ink); transform: translateZ(22px); transform-style: preserve-3d; box-shadow: 1px 1px 0 #ffffff80, 5px 7px 10px #0004; }
.record-sleeve::before { content: ''; position: absolute; left: -8px; top: 0; width: 8px; height: 100%; background: color-mix(in srgb, var(--jacket) 64%, black); transform-origin: right; transform: rotateY(-70deg); }
.record-sleeve::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg,#ffffff40,transparent 44%,#00000013); pointer-events: none; }
.record-topline { display: flex; justify-content: space-between; margin: 22px; font-size: 8px; letter-spacing: .04em; position: relative; z-index: 1; }
.record-topline>span:first-child { font-family: var(--serif); font-size: 19px; letter-spacing: -.06em; }
.record-topline>span:last-child { text-align: right; font-size: 6px; line-height: 1.5; }
.record-title { position: absolute; bottom: 66px; left: 23px; font-family: var(--serif); font-size: 66px; letter-spacing: -.045em; line-height: .9; z-index: 1; }
.record-title i { font-weight: 400; }
.record-orbit { position: absolute; top: 62px; right: 17px; width: 145px; height: 145px; border-radius: 50%; border: 1px solid currentColor; opacity: .3; }
.record-orbit::before, .record-orbit::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; border: 1px solid currentColor; }
.record-orbit::after { inset: -13px 25px; transform: rotate(40deg); }
.record-bottomline { position: absolute; bottom: 21px; left: 23px; right: 23px; display: flex; justify-content: space-between; border-top: 1px solid #0003; padding-top: 12px; font-size: 7px; letter-spacing: .1em; }
.record-disc { position: absolute; width: 312px; height: 312px; left: 128px; top: 7px; border-radius: 50%; transform: translateZ(5px); background: #080a09; border: 2px solid #666b64; box-shadow: 1px 1px 0 #30382f, 3px 3px 0 #080b08, 5px 5px 0 #444c40, 12px 18px 28px #0007; }
.record-disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg,transparent 0deg,#d7e5c045 30deg,transparent 70deg,transparent 175deg,#d7e5c030 210deg,transparent 240deg); pointer-events: none; }
.record-grooves { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle,#10130f 0 1px,#2f352b 2px,#12160f 3px,#1c2218 4px); }
.record-label { height: 105px; width: 105px; border-radius: 50%; background: #d7ef9d; color: #283321; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; }
.record-label span, .record-label small { font-size: 6px; letter-spacing: .1em; }
.record-label b { font-family: var(--serif); font-weight: 400; font-size: 44px; font-style: italic; line-height: 1.3; }
.record-label::after { content: ''; position: absolute; width: 6px; height: 6px; background: #10150c; border: 1px solid #fff8; border-radius: 50%; top: calc(50% - 3px); left: calc(50% - 3px); }
.record-sticker { position: absolute; left: 205px; bottom: -26px; z-index: 3; width: 142px; height: 84px; background: #edece0; color: #30332b; padding: 14px; text-align: center; box-shadow: 0 8px 18px #0004; transform: translateZ(60px) rotateZ(18deg); }
.record-sticker span { display: block; font-size: 5px; letter-spacing: .12em; }
.record-sticker strong { font-family: var(--serif); font-size: 25px; font-weight: 400; font-style: italic; display: block; line-height: 1.4; }
.edition-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: -3px; }
.edition-picker { display: flex; border: 1px solid #56614c; border-radius: 99px; padding: 4px; gap: 2px; }
.edition-picker button { min-height: 38px; padding: 8px 16px; font-size: 11px; background: none; border: 0; color: #c2cbbb; border-radius: 99px; transition: background 160ms ease, color 160ms ease; }
.edition-picker button[aria-pressed=true] { background: #d7ef9d; color: #222c1b; }
.motion-toggle { background: none; color: #d7ef9d; border: 1px solid #56614c; border-radius: 50%; width: 44px; height: 44px; font-size: 22px; display: grid; place-items: center; }
.record-caption { font-size: 9px; line-height: 1.6; color: #a6b09d; text-align: center; margin-top: 15px; }
.record-experience.is-spinning .record-grooves { animation: record-turn 22s linear infinite; }
.record-experience.is-paused .record-grooves { animation-play-state: paused; }
@keyframes record-turn { to { transform: rotate(360deg); } }
.benefit-strip { border-color: var(--line); }
.benefit-strip .wrap { padding-block: 25px; color: #c0c8b8; font-size: 12px; }
.benefit-strip b { color: var(--red); }
.section { padding-block: 100px; }
h2 { font-size: clamp(43px,4.5vw,65px); letter-spacing: -.045em; line-height: 1.03; }
.section-heading>p { color: #afb9a6; font-size: 13px; }
.sample-notice { color: #adb8a3; font-size: 11px; }
.sample-grid { gap: 32px; }
.sample-card { min-width: 0; }
.cover { border-radius: 2px; aspect-ratio: 1.08; border: 1px solid #ffffff15; box-shadow: 0 15px 24px #0003, 3px 3px 0 #0c100b; transition: transform 250ms var(--ease-studio), box-shadow 250ms ease; }
.cover-mother { background: #d9d9a4; }
.cover-love { background: #c5d8dd; }
.cover-party { background: #e7b188; }
.cover-index { font-size: 8px; }
.cover h3 { font-size: clamp(35px,3.5vw,51px); }
.track strong { font-weight: 500; font-size: 15px; }
.track-symbol { color: var(--red); }
.sample-foot { font-size: 10px; }
.sample-card>.text-button { color: #dfebd2; font-weight: 400; }
.how-section { background: #22291f; border-block: 1px solid #3d4835; }
.step-number { color: #bad097; border-color: #4c5842; font-size: 39px; }
.steps-grid h3 { color: #e9edde; }
.steps-grid p { color: #bac3b1; }
.offer-section { gap: 100px; }
.lyric-note { border-color: #73895c; }
.lyric-note p { color: #d7dfca; font-size: 33px; }
.quote-mark { color: #b9d28f; }
.price-card { background: #eceee3; color: #252d20; padding: 40px; border: 1px solid #fbfff0; border-radius: 3px; box-shadow: 8px 8px 0 #3c4932; --muted: #59634e; --line: #cad0bd; --red: #405a2a; }
.price-card .button { background: #24331c; color: #f0f4e6; }
.price-card .button:hover { background: #3c542c; }
.price-card .price strong { font-size: 72px; }
.included { border-color: #c3cbb6; }
.extra-note { color: #34462a; }
.closing { background: #d7ef9d; color: #25301d; padding-block: 76px; }
.closing .button.light { background: #222e1a; color: #eef5e4; }
.closing .button.light:hover { background: #394d2b; }
.closing p { font-size: clamp(40px,5vw,72px); }
footer { padding-block: 36px; }
.mobile-cta { background: #1b2118f5; color: #eef4e4; border-color: #4d5b40; }
.mobile-cta small { color: #b9c5ac; }
dialog { --paper: #f4f3e9; --ink: #293222; --muted: #596550; --red: #40572c; --line: #d1d6c5; }
dialog .button { background: #293d1c; color: #f1f6e8; }
dialog .button:hover { background: #435e32; }
dialog .brand-dot { color: #40572c; }
dialog .text-button { color: #354b28; }
dialog .button:disabled { opacity: .55; }
dialog :focus-visible { outline-color: #55713c; }
.record-stage:focus-visible { outline: none; }
@media(hover:hover) and (pointer:fine) {
  .cover:hover { transform: perspective(900px) rotateY(-7deg) rotateX(3deg) translateY(-7px); box-shadow: 12px 24px 30px #0005, 4px 4px 0 #0c100b; }
}
@media(min-width:1500px) { .hero { gap: 75px; } .record-object { left: 15%; } }
@media(max-width:1100px) and (min-width:761px) {
  .wrap { width: calc(100% - 56px); }
  .hero h1 { font-size: 66px; }
  .record-object { width: 240px; height: 270px; left: 2%; top: 66px; }
  .record-disc { width: 260px; height: 260px; left: 91px; }
  .record-title { font-size: 55px; }
  .record-sticker { left: 159px; }
  .hero-actions { gap: 15px; }
  .hero-actions .button { font-size: 12px; padding-inline: 19px; }
  .record-stage { height: 400px; }
}
@media(max-width:760px) {
  .wrap { width: calc(100% - 40px); }
  .preview-banner { font-size: 8px; padding-block: 7px; }
  .preview-banner span { display: inline; font-size: 8px; }
  .site-header { padding-block: 20px; }
  .wordmark { font-size: 29px; }
  .site-header .button { font-size: 10px; padding: 10px 13px; }
  .hero { padding-block: 40px 35px; gap: 46px; grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(52px,12.8vw,82px); line-height: 1; }
  .hero .eyebrow { margin-bottom: 22px; font-size: 8px; }
  .hero-description { margin-top: 22px; font-size: 14px; }
  .hero-actions { gap: 21px; margin-top: 25px; }
  .hero-actions .button { padding: 16px 22px; font-size: 12px; gap: 16px; }
  .hero-price strong { font-size: 18px; }
  .hero-price small { font-size: 9px; }
  .listen-link { margin-top: 15px; font-size: 10px; }
  .record-experience { max-width: 420px; width: 100%; margin-inline: auto; }
  .edition-meta { padding-inline: 0; font-size: 7px; }
  .record-stage { height: 323px; }
  .record-stage::before { inset: 30px 0 15px; }
  .record-object { width: 220px; height: 244px; top: 33px; left: 4%; }
  .record-disc { width: 238px; height: 238px; left: 88px; top: 3px; }
  .record-label { width: 79px; height: 79px; }
  .record-label b { font-size: 35px; }
  .record-label span,.record-label small { font-size: 4px; }
  .record-topline { margin: 17px; }
  .record-topline>span:first-child { font-size: 16px; }
  .record-topline>span:last-child { font-size: 5px; }
  .record-title { left: 17px; bottom: 48px; font-size: 52px; }
  .record-orbit { width: 107px; height: 107px; top: 52px; right: 13px; }
  .record-bottomline { left: 17px; right: 17px; bottom: 15px; font-size: 5px; padding-top: 9px; }
  .record-sticker { left: 148px; bottom: -10px; width: 112px; height: 69px; padding: 11px; }
  .record-sticker strong { font-size: 20px; }
  .record-sticker span { font-size: 4px; }
  .stage-shadow { bottom: 25px; height: 20px; }
  .edition-picker button { padding-inline: 11px; min-height: 40px; font-size: 10px; }
  .edition-controls { gap: 10px; }
  .record-caption { font-size: 8px; }
  .benefit-strip .wrap { gap: 16px; padding-block: 20px; }
  .benefit-strip span { font-size: 10px; }
  .section { padding-block: 65px; }
  h2 { font-size: 43px; }
  .sample-grid { gap: 38px; }
  .cover { aspect-ratio: 1.15; }
  .cover h3 { font-size: 47px; }
  .steps-grid article { border-color: #4c5842; }
  .offer-section { gap: 38px; }
  .price-card { padding: 28px 24px; box-shadow: 5px 5px 0 #3c4932; }
  .price-card .price strong { font-size: 66px; }
  .lyric-note p { font-size: 28px; }
  .closing { padding-block: 50px; }
  footer { padding-bottom: 112px; }
  .mobile-cta .button { padding: 13px 20px; }
}
@media(max-width:360px) {
  .wrap { width: calc(100% - 32px); }
  .hero h1 { font-size: 48px; }
  .record-object { left: 0; width: 200px; height: 225px; }
  .record-disc { width: 216px; height: 216px; left: 80px; }
  .record-title { font-size: 46px; }
  .record-stage { height: 300px; }
  .record-sticker { left: 135px; }
}
@media(prefers-reduced-motion:reduce) {
  .record-object { transform: rotateX(12deg) rotateY(-23deg) rotateZ(-9deg) !important; }
  .motion-toggle { display: none; }
  .record-grooves { animation: none !important; }
  .cover:hover { transform: none; }
}