:root {
  --paper:#111413;
  --ink:#f2f2ea;
  --muted:#aaafa6;
  --red:#d1ef75;
  --line:#364038;
  --serif:'Barlow Condensed','Arial Narrow',sans-serif;
  --sans:'DM Sans','Segoe UI',sans-serif;
}
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); }
::selection { background:var(--red); color:#111413; }
.sound-space { background:radial-gradient(circle at 78% 13%,#303c2a45,transparent 40%),#111413; }
#sound-space { opacity:.3; }
.space-haze { background:linear-gradient(90deg,#111413ec,#11141370 65%),radial-gradient(circle at 80% 20%,#c7e68416,transparent 45%); }
.space-grid { opacity:.38; }
.preview-banner { background:#d1ef75; color:#172012; border:0; font-weight:700; letter-spacing:.08em; }
.effects-toggle { border-color:#28321e88; color:#18220f; background:#bddb65; }
.site-header { border-color:#3c453b; }
.wordmark { font:800 35px/1 var(--serif); letter-spacing:-.025em; text-transform:uppercase; }
.wordmark>span:first-child { color:var(--red); }
.brand-dot { color:var(--red); font:900 18px/1 var(--sans); margin-left:5px; vertical-align:top; }
.site-header nav>a { color:#c3c7bd; font-weight:600; }
.site-header nav>a:hover { color:var(--red); }
.button { background:var(--red); color:#182012; border-radius:4px; border:1px solid #e4f8a9; box-shadow:0 4px 0 #6d8235,0 11px 22px #0005; text-transform:uppercase; letter-spacing:.035em; font-size:12px; }
.button:hover { background:#e1fa94; }
.button:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid #f8ffb8; outline-offset:3px; }
.site-header .button { background:transparent; border-color:#a4b18b; box-shadow:none; }
.site-header .button:hover { background:#293124; }
.hero { grid-template-columns:1.05fr 1fr; padding-block:75px 85px; }
.hero .eyebrow,.eyebrow { color:var(--red); font-weight:700; letter-spacing:.18em; }
.tiny-star { color:var(--red); font-size:20px; }
.hero h1 { font:800 clamp(74px,8.5vw,136px)/.82 var(--serif); letter-spacing:-.035em; text-transform:uppercase; text-shadow:none; text-wrap:balance; }
.hero h1 em { font:inherit; color:var(--red); text-shadow:none; }
.hero-description { max-width:475px; color:#d5d9cf; line-height:1.65; font-size:16px; }
.hero-actions { align-items:center; }
.hero-price strong { color:var(--ink); }
.listen-link { text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:#cad1c0; }
.record-experience { --jacket:#cadf8b; --jacket-ink:#21301a; border:1px solid #5b6c4e; border-radius:10px; background:radial-gradient(circle at 45% 36%,#94b66e27,transparent 60%),#1a211a; box-shadow:inset 0 1px #e7fbcb24,9px 11px 0 #0a0e0b,22px 30px 55px #0006; transform:perspective(1200px) rotateY(-4deg) rotateX(2deg); }
.record-experience[data-edition=trap] { --jacket:#bfb9ce; --jacket-ink:#282239; }
.record-experience[data-edition=rock] { --jacket:#e8ae79; --jacket-ink:#422a1e; }
.record-experience[data-edition=dedicada] { --jacket:#b9d4ce; --jacket-ink:#1c3735; }
.edition-meta { color:#c0d2a9; font-weight:700; letter-spacing:.18em; }
.record-stage { height:410px; }
.record-sleeve { box-shadow:1px 1px 0 #ffffff80,7px 9px 16px #0006; }
.record-topline>span:first-child { font:800 23px/1 var(--serif); text-transform:uppercase; letter-spacing:-.015em; }
.record-title { font:800 76px/.8 var(--serif); text-transform:uppercase; letter-spacing:-.03em; max-width:260px; }
.record-title i { font:inherit; }
.record-sticker { background:var(--red); color:#243013; transform:translateZ(60px) rotateZ(10deg); }
.record-sticker strong { font:800 28px/.95 var(--serif); text-transform:uppercase; margin:4px 0; }
.record-label { background:var(--red); }
.record-label b { font:900 29px/1 var(--serif); }
.edition-picker { border-color:#718163; border-radius:5px; flex-wrap:wrap; }
.edition-picker button { border-radius:3px; font-weight:700; }
.edition-picker button[aria-pressed=true] { background:var(--red); color:#1c2515; }
.motion-toggle { border-color:#718163; border-radius:4px; color:var(--red); }
.record-caption { color:#bcc5b0; }
.benefit-strip { background:#1a211b; border-block:1px solid #344333; box-shadow:none; }
.benefit-strip .wrap { color:#e1e5d8; }
.benefit-strip b { font:800 19px/1 var(--serif); color:var(--red); margin-right:9px; }
.section { padding-block:100px; }
h2,.closing p,.form-step h2,#finished h2 { font-family:var(--serif); font-weight:800; font-style:normal; text-transform:uppercase; letter-spacing:-.025em; }
h2 { font-size:clamp(56px,6vw,90px); line-height:.9; }
h2 em,.closing em,.form-step h2 em { font:inherit; color:var(--red); }
.section-heading h2 em,.offer-story h2 em,.faq-section h2 em { text-shadow:none; }
.section-heading>p { color:#b4bdaf; font-size:14px; max-width:340px; }
.sample-notice { border-left:3px solid var(--red); padding:12px 18px; margin-bottom:27px; background:#d1ef750d; color:#c9d3c2; display:block; line-height:1.5; }
.sample-notice strong { color:var(--red); }
.sample-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.sample-card { background:#1b211d; border:1px solid #3d493e; padding:12px 12px 3px; border-radius:8px; box-shadow:4px 6px 0 #0b0f0b,12px 20px 35px #0003; min-width:0; }
.sample-card .cover { min-height:0; aspect-ratio:1.28; border:0; border-radius:3px; box-shadow:0 7px 15px #0005; transform:translateZ(14px); overflow:hidden; }
.cover::before { content:''; position:absolute; inset:18% -12% auto auto; width:67%; aspect-ratio:1; border:2px solid currentColor; border-radius:50%; opacity:.45; box-shadow:0 0 0 18px #ffffff13,0 0 0 40px #ffffff0d,0 0 0 64px #ffffff08; }
.cover::after { content:''; position:absolute; inset:auto 8% 15% auto; width:31%; height:3px; background:currentColor; box-shadow:0 9px currentColor,0 18px currentColor; opacity:.55; transform:rotate(-22deg); }
.cover-rkt { background:#d1ef75; color:#253419; }
.cover-trap { background:#bbb4ca; color:#312b42; }
.cover-reggaeton { background:#e8ad76; color:#53351c; }
.cover-rap { background:#abc9c8; color:#234442; }
.cover-rock { background:#d28e7b; color:#4e271d; }
.cover-acoustic { background:#d9d7ae; color:#45432a; }
.cover-index,.cover-sign { font:700 11px/1 var(--sans); letter-spacing:.13em; z-index:2; }
.cover-glyph { position:absolute; top:-24%; right:-4%; font:900 240px/1 var(--serif); letter-spacing:-.08em; opacity:.18; transform:rotate(-18deg); }
.cover h3 { z-index:2; font:800 clamp(36px,3vw,52px)/.88 var(--serif); text-transform:uppercase; letter-spacing:-.02em; bottom:47px; max-width:76%; }
.cover h3 em { font:inherit; }
.track { margin-top:18px; }
.track strong { font-weight:700; color:#f1f2e9; font-size:15px; }
.track p,.story { color:#bfc7b8; }
.track-symbol { font:700 26px/1 var(--serif); color:var(--red); }
.story { min-height:57px; margin-top:10px; }
.sample-foot { border-color:#3e4b3c; color:#b6c2ae; font-size:10px; }
.sample-card>.text-button { color:var(--red); font-weight:700; text-transform:uppercase; letter-spacing:.045em; }
.sample-card>.text-button:hover { color:#f4ffcb; }
.how-section { background:#1b241c; border-color:#394938; }
.steps-grid { gap:20px; }
.steps-grid article { padding:25px; border:1px solid #40513f; background:#253023; border-radius:6px; }
.step-number { border:0; padding:0; margin:0 0 22px; font:800 48px/1 var(--serif); color:var(--red); }
.steps-grid h3 { font:800 29px/1 var(--serif); text-transform:uppercase; }
.steps-grid p { color:#c1ceba; }
.offer-section { gap:70px; }
.offer-story>p:not(.eyebrow) { color:#c4cdbf; font-size:15px; }
.lyric-note { border-color:var(--red); }
.lyric-note p { font:700 38px/1 var(--serif); text-transform:uppercase; color:#eff1e9; }
.quote-mark { color:var(--red); }
.price-card { background:#e5e8d7; color:#1e271d; border-radius:5px; box-shadow:8px 8px 0 #58694d; --red:#465e28; }
.price-card .price strong { font:800 80px/1 var(--serif); }
.price-card .button { background:#26371d; color:#f1f8e5; box-shadow:0 4px 0 #627958; }
.faq-list details { border-color:#3d4b3e; }
.faq-list summary { color:#e4e9de; font-weight:600; }
.faq-list details>p { color:#bac6b6; }
.closing { background:#d1ef75; color:#1c2815; }
.closing p { font-size:clamp(55px,6vw,94px); line-height:.9; }
.closing em { color:#426027; }
.closing .button.light { background:#203018; color:#f2f7df; border-color:#203018; box-shadow:0 5px 0 #5e7c3c; }
footer { background:#141a15; }
footer p,footer>span { color:#b0bcab; }
.mobile-cta { background:#151c17f4; border-color:#667958; box-shadow:0 -4px 20px #0005; }
#order-dialog { --paper:#171d18; --ink:#f1f2e9; --muted:#b4c2b0; --red:#d1ef75; --line:#495849; color-scheme:dark; background:#1b241b; border:1px solid #758b66; border-radius:11px; }
#order-dialog::backdrop { background:#070b08cb; }
.dialog-header { background:#222c20; border-color:#50644a; }
.form-shell { background:#1b241b; }
.form-step h2 { font-size:clamp(47px,5vw,68px); line-height:.9; text-shadow:none; }
#order-dialog .button { background:var(--red); color:#1b2915; box-shadow:0 4px 0 #607b3b; }
#order-dialog .text-button { color:var(--red); }
#order-dialog input:not([type=radio]),#order-dialog select,#order-dialog textarea { background:#111a12; border-color:#6f8467; color:#f1f4e9; border-radius:5px; }
#order-dialog input:focus,#order-dialog select:focus,#order-dialog textarea:focus { outline-color:var(--red); border-color:var(--red); }
.purpose-options label>span,.choice-row span { background:#2b3929; border-color:#657b5e; border-radius:5px; box-shadow:none; }
.purpose-options input:checked+span,.choice-row input:checked+span { background:#d1ef75; color:#1b2a15; border-color:#d1ef75; box-shadow:none; }
.purpose-options input:checked+span strong,.purpose-options input:checked+span small { color:#1b2a15; }
.purpose-options input:focus-visible+span { outline-color:#f8ffb8; }
.progress li { border-radius:2px; box-shadow:none; background:#111a11; }
.progress li.active { background:#d1ef75; color:#1e2b18; box-shadow:none; transform:none; }
.review-card,.confirmation-details { background:#202a21; border-color:#5a6f55; border-radius:5px; box-shadow:none; }
.composer-preview { background:radial-gradient(circle at 50% 40%,#b9d98023,transparent 67%),#202a20; }
.gift-sleeve { background:#d1ef75; color:#243319; border-color:#f0ffcb; }
.gift-sleeve .gift-name,.gift-caption p { font-family:var(--serif); font-weight:800; text-transform:uppercase; font-style:normal; }
.gift-sleeve .gift-name em { font:inherit; }
.gift-caption p { font-size:38px; line-height:.88; }
@media(max-width:900px) and (min-width:761px) {
  .hero h1 { font-size:78px; }
  .sample-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .wrap { width:calc(100% - 36px); }
  .preview-banner { font-size:8px; gap:8px; }
  .site-header { padding-block:17px; }
  .wordmark { font-size:29px; }
  .site-header .button { font-size:9px; padding:10px; }
  .hero { grid-template-columns:minmax(0,1fr); gap:24px; padding-block:40px 46px; }
  .hero-copy { min-width:0; }
  .hero h1 { font-size:clamp(67px,17vw,103px); }
  .hero-description { font-size:14px; margin-top:22px; }
  .hero-actions { gap:16px; flex-wrap:wrap; }
  .hero-actions .button { font-size:11px; }
  .record-experience { width:100%; max-width:420px; min-width:0; transform:none; padding:14px 5px 17px; }
  .record-stage { height:310px; overflow:hidden; }
  .record-object { left:3%; }
  .record-disc { width:222px; height:222px; left:84px; }
  .record-title { font-size:57px; }
  .record-sticker strong { font-size:22px; }
  .edition-picker button { padding-inline:8px; font-size:10px; }
  .benefit-strip .wrap { gap:10px; }
  .benefit-strip b { display:block; font-size:19px; margin-bottom:3px; }
  .section { padding-block:64px; }
  h2 { font-size:clamp(52px,13vw,72px); }
  .section-heading>p { margin-top:16px; }
  .sample-grid { grid-template-columns:1fr; gap:22px; }
  .sample-card { margin:0; padding:11px 11px 3px; }
  .sample-card .cover { aspect-ratio:1.25; }
  .cover h3 { font-size:clamp(39px,11vw,54px); }
  .story { min-height:0; }
  .steps-grid article { padding:23px; }
  .steps-grid h3 { font-size:29px; }
  .offer-section { gap:40px; }
  .price-card { transform:none; }
  .price-card .price strong { font-size:72px; }
  .faq-list details { padding-inline:0; }
  .closing p { font-size:clamp(51px,12vw,72px); }
  footer { padding-bottom:110px; }
  #order-dialog { width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .dialog-header { padding:14px 18px; }
  .dialog-header .wordmark { font-size:26px; }
  .composer-preview { height:125px; }
  .gift-caption p { font-size:24px; }
  .form-shell { padding:24px 20px 36px; }
  .form-step h2 { font-size:48px; }
}
@media(max-width:370px) {
  .hero h1 { font-size:60px; }
  .record-object { left:0; width:200px; height:220px; }
  .record-disc { width:210px; height:210px; left:78px; }
  .record-title { font-size:48px; }
  .edition-picker button { padding-inline:6px; }
}
@media(max-width:600px) {
  .hero { display:grid; grid-template-columns:minmax(0,1fr); }
  .hero h1 { font-size:clamp(60px,16.5vw,76px); overflow-wrap:normal; }
  .record-experience { justify-self:center; }
  .record-stage { height:300px; }
  .sample-card,.steps-grid article,.price-card { min-width:0; }
  .cover h3 { max-width:80%; overflow-wrap:normal; }
  #order-dialog,.dialog-shell,.form-shell,.form-step { min-width:0; }
  #order-dialog input:not([type=radio]),#order-dialog select,#order-dialog textarea { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Una muestra por estilo, conservando las tarjetas y el relieve originales. */
.sample-picker { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:10px 22px; max-width:760px; margin:0 auto 22px; color:var(--ink); font-weight:600; font-size:14px; }
.sample-picker select { width:min(100%,410px); min-height:52px; padding:11px 16px; color:var(--ink); background:#1b291f; border:1px solid #819971; border-radius:5px; color-scheme:dark; }
.sample-grid { grid-template-columns:minmax(0,760px); justify-content:center; }
.sample-grid .sample-card[hidden] { display:none!important; }
.sample-card { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); grid-template-rows:auto auto auto 1fr; gap:0 24px; padding:18px; }
.sample-card .cover { grid-column:1; grid-row:1 / span 4; height:100%; min-height:305px; aspect-ratio:auto; }
.sample-card .track { grid-column:2; grid-row:1; margin-top:4px; }
.sample-card .story { grid-column:2; grid-row:2; min-height:0; }
.sample-card .sample-foot { grid-column:2; grid-row:3; }
.sample-card>.text-button { grid-column:2; grid-row:4; align-self:end; }
/* Contraste puntual: no cambia la paleta ni aplana los objetos 3D. */
:root { --muted:#c4cebd; }
#order-dialog { --muted:#c4d1bc; }
#order-dialog input::placeholder,#order-dialog textarea::placeholder { color:#aebda5; }
@media(max-width:760px) {
  .sample-card { display:block; padding:11px 11px 3px; }
  .sample-card .cover { height:auto; min-height:0; aspect-ratio:1.25; }
  .sample-card .track { margin-top:18px; }
  .sample-picker select { width:100%; }
}

/* Formularios directos: contenido primero, navegación siempre a mano. */
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.cover-reggae { background:#9ccc8c; color:#21422b; }
.cover-drill { background:#94acd5; color:#233752; }
#order-dialog {
  width:min(1100px,calc(100% - 48px));
  max-width:1100px;
  max-height:min(92dvh,920px);
  overflow:auto;
  scroll-padding-bottom:110px;
}
#order-dialog .dialog-header {
  position:sticky;
  top:0;
  z-index:12;
  padding:11px 24px;
  min-height:60px;
}
#order-dialog .dialog-header .wordmark { font-size:26px; }
#order-dialog .form-shell {
  padding:18px 28px 24px;
  border:0;
}
#order-dialog .form-meta { gap:12px; line-height:1.35; }
#order-dialog .progress {
  margin:9px 0 14px;
  gap:5px;
}
#order-dialog .progress li {
  padding:7px 4px;
  min-height:32px;
  font-size:10px;
}
#order-dialog .form-step > .eyebrow,
#order-dialog .form-step > .form-intro { display:none; }
#order-dialog .form-step > h2.sr-only { line-height:1; }
#order-dialog .purpose-options { gap:9px; margin:12px 0; }
#order-dialog .purpose-options legend { margin:0 0 9px; font-size:15px; }
#order-dialog .purpose-options label>span { padding:14px 16px; }
#order-dialog .purpose-options strong { font-size:16px; line-height:1.25; }
#order-dialog .purpose-options small { margin-top:4px; font-size:12px; line-height:1.45; }
#order-dialog .form-step > .form-aside { margin-top:10px; }
#order-dialog .form-step > label,
#order-dialog .form-step > div>label,
#order-dialog .optional-details label,
#order-dialog .field-label { margin:14px 0 6px; }
#order-dialog .field-help { margin:6px 0 12px; line-height:1.55; }
#order-dialog .optional-label {
  margin-left:6px;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
}
#order-dialog select { color:var(--ink); background:#111a12; }
#order-dialog select option,#order-dialog select optgroup { color:var(--ink); background:#111a12; }
#order-dialog .form-navigation {
  position:sticky;
  bottom:0;
  z-index:11;
  display:flex;
  align-items:center;
  min-height:74px;
  margin:18px -28px 0;
  padding:10px 28px calc(10px + env(safe-area-inset-bottom));
  background:#18251cf5;
  border-top:1px solid #53674a;
  box-shadow:0 -8px 20px #0003;
  backdrop-filter:blur(9px);
}
#order-dialog .form-navigation .button {
  min-height:48px;
  min-width:152px;
  padding:10px 18px;
}
#order-dialog .form-navigation .text-button { min-height:44px; }
#order-dialog #form-error,
#order-dialog #submit-status,
#order-dialog [aria-invalid=true] { scroll-margin-bottom:105px; }
#order-dialog .form-privacy { margin:8px 0 0; text-align:left; line-height:1.4; }
@media(max-width:760px) {
  #order-dialog {
    width:100%;
    max-width:100%;
    height:100dvh;
    max-height:100dvh;
    margin:0;
    border:0;
    border-radius:0;
  }
  #order-dialog .dialog-header { padding:8px 18px; min-height:53px; }
  #order-dialog .dialog-header .wordmark { font-size:24px; }
  #order-dialog .form-shell { padding:13px 18px 20px; }
  #order-dialog .progress { margin:8px 0 12px; }
  #order-dialog .progress li { font-size:9px; min-height:31px; }
  #order-dialog .purpose-options label>span { padding:13px 14px; }
  #order-dialog .form-navigation {
    margin:14px -18px 0;
    padding:9px 18px calc(9px + env(safe-area-inset-bottom));
    min-height:66px;
  }
  #order-dialog .form-navigation .button { min-height:46px; }
  #order-dialog .form-privacy { font-size:10px; }
}