@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--gold:#c8aa80;--white:#f3eee6;--muted:#a8a49e;--black:#090a0a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}header{height:76px;position:fixed;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,90px);background:#080909ec;border-bottom:1px solid #ffffff16;backdrop-filter:blur(15px)}.brand{font-size:29px;font-weight:800;letter-spacing:-2px;font-style:italic;color:var(--gold)}nav{display:flex;gap:29px}nav a{font-size:11px;letter-spacing:2px;text-transform:uppercase}.btn{display:inline-flex;gap:22px;align-items:center;padding:15px 23px;border:1px solid var(--gold);border-radius:3px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;transition:.25s}.btn:hover{background:var(--gold);color:#111}.btn.filled{background:var(--gold);color:#12100c}.btn.filled:hover{background:#e7d2b5}.hero{position:relative;min-height:790px;display:flex;align-items:center;overflow:hidden;padding:110px clamp(24px,6vw,100px) 75px;background:radial-gradient(circle at 65% 45%,#302a23,#090a0a 62%)}.hero-photo{position:absolute;right:0;top:75px;height:calc(100% - 75px);width:67%;object-fit:cover;object-position:center 35%;opacity:.78;mask-image:linear-gradient(to right,transparent 0%,black 38%)}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#090a0a 0%,transparent 35%);pointer-events:none}.hero-content{position:relative;z-index:2;max-width:660px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:5px;text-transform:uppercase}.hero h1{font:800 clamp(110px,22vw,300px)/.8 'Barlow Condensed',sans-serif;letter-spacing:-5px;margin:30px 0}.hero p{font-size:19px;color:#c8c4bd;line-height:1.7}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:35px}.section{padding:95px clamp(24px,6vw,100px);position:relative;overflow:hidden}.section h2{font:700 clamp(44px,7vw,90px)/.95 'Barlow Condensed';text-transform:uppercase;margin:16px 0 25px}.section p{line-height:1.8;color:var(--muted)}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#333}.service{background:#101111;padding:35px 20px;text-align:center}.service strong{display:block;font:600 26px 'Barlow Condensed';letter-spacing:2px;text-transform:uppercase;margin:20px 0 10px}.service span{color:var(--gold);font-size:34px}.service p{font-size:13px;margin:0}.about{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:0;min-height:540px;background:#0f1010}.about .copy{padding:75px clamp(22px,4vw,65px);align-self:center}.about img{width:100%;height:100%;min-height:480px;object-fit:cover;filter:brightness(.8)}.about img:nth-of-type(1){object-position:50% 40%}.about img:nth-of-type(2){object-position:50% 35%}.works{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.work{border:1px solid #34312e;background:#151514;padding:32px;min-height:180px;display:flex;flex-direction:column;justify-content:end}.work small{color:var(--gold);letter-spacing:2px}.work h3{font:600 30px 'Barlow Condensed';margin:10px 0}.contact{background:linear-gradient(120deg,#151310,#090a0a);text-align:center}.contact p{max-width:520px;margin:0 auto 30px}.panel-area{position:absolute;pointer-events:none;inset:0;opacity:.55;perspective:850px;overflow:hidden}.panel-wall{position:absolute;right:-120px;top:-65px;display:grid;grid-template-columns:repeat(5,95px);gap:5px;transform:rotateY(-24deg) rotateX(9deg) rotate(-17deg);transform-style:preserve-3d}.hex{width:94px;height:108px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:repeating-linear-gradient(145deg,#ffffff18 0 3px,transparent 3px 15px),linear-gradient(135deg,#ece9df,#98978f);filter:drop-shadow(7px 10px 4px #000);box-shadow:inset 10px 0 20px #0006;transform:translateZ(var(--depth,0px));}.hex.dark{background:repeating-linear-gradient(145deg,#ffffff0b 0 3px,transparent 3px 15px),linear-gradient(135deg,#333537,#0b0c0d)}.panels{background:radial-gradient(circle at 70% 45%,#262321,#0a0b0b 65%);min-height:360px;display:flex;align-items:center}.panels .text{position:relative;z-index:1;max-width:620px}.panels p{max-width:490px}footer{padding:35px clamp(24px,6vw,100px);border-top:1px solid #292929;display:flex;justify-content:space-between;align-items:center;color:#888;font-size:12px}@media(max-width:900px){nav{display:none}.hero{min-height:740px;align-items:end}.hero-photo{width:100%;opacity:.54;mask-image:linear-gradient(to top,transparent 0%,black 40%)}.hero h1{font-size:clamp(110px,25vw,190px)}.service-grid{grid-template-columns:repeat(2,1fr)}.about{grid-template-columns:1fr 1fr}.about .copy{grid-column:1/-1}.about img{min-height:340px;max-height:450px}.works{grid-template-columns:1fr}.panel-wall{right:-240px;opacity:.65}}@media(max-width:520px){.hero{min-height:680px}.hero h1{font-size:125px}.hero p{font-size:15px}.section{padding-top:70px;padding-bottom:70px}.service{padding:25px 10px}.service strong{font-size:21px}.about img{min-height:270px}.panel-wall{right:-330px}footer{gap:12px;flex-wrap:wrap}}@media(prefers-reduced-motion:no-preference){.hex{transition:transform .25s}.panel-wall{animation:float 9s ease-in-out infinite alternate}@keyframes float{to{transform:rotateY(-19deg) rotateX(7deg) rotate(-15deg) translateY(15px)}}}

.lang-switch{display:flex;gap:4px;align-items:center;margin-left:12px}.lang-switch button{background:transparent;color:#bdb5a9;border:1px solid #484039;border-radius:3px;padding:8px 10px;font-size:11px;font-weight:700;cursor:pointer}.lang-switch button[aria-pressed="true"]{background:#c8aa80;color:#16120d;border-color:#c8aa80}.spotify-frame{max-width:760px;margin:20px auto 0}.spotify-frame iframe{display:block;width:100%;min-height:540px}@media(max-width:900px){header>.btn{display:none}.lang-switch{margin-left:auto}}

/* V8: integrated acoustic wall and interactive record shelf */
.acoustic-hero:before,.acoustic-about:before{content:"";position:absolute;pointer-events:none;z-index:1;right:-70px;top:18%;width:440px;height:380px;opacity:.20;background:linear-gradient(135deg,#fff7 2%,transparent 35%),repeating-conic-gradient(from 30deg,#dedbd5 0deg 60deg,#151617 60deg 120deg,#e7e3dc 120deg 180deg,#161718 180deg 240deg,#f2eee7 240deg 300deg,#18191a 300deg 360deg);background-size:80px 90px;clip-path:polygon(5% 0,100% 0,100% 100%,0 100%);transform:perspective(800px) rotateY(-24deg) rotateZ(-12deg);filter:drop-shadow(18px 24px 15px #000)}.acoustic-about{position:relative}.acoustic-about:before{left:30%;right:auto;top:5%;width:300px;opacity:.12}.acoustic-about>*{position:relative;z-index:2}.shelf-intro{max-width:650px}.shelf-shell{position:relative;margin:42px 0 28px;overflow:hidden;padding:20px 0 0;background:linear-gradient(#151514,#0c0c0c)}.shelf-scroll{display:flex;overflow-x:auto;gap:20px;padding:55px max(28px, calc(50% - 90px)) 72px;scroll-snap-type:x mandatory;scrollbar-color:#806f56 transparent}.shelf-rail{height:19px;background:linear-gradient(#8c7353 0%,#3e3226 25%,#181512 72%,#070707);box-shadow:0 10px 22px #000;position:absolute;bottom:0;left:0;right:0}.record{flex:0 0 clamp(155px,18vw,230px);border:0;padding:0;background:transparent;color:var(--white);text-align:left;cursor:pointer;scroll-snap-align:center;touch-action:pan-x pan-y}.record-cover{will-change:transform;display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:1;background:linear-gradient(140deg,#36302a,#171717 55%,#29231e);border:1px solid #ffffff24;box-shadow:12px 12px 0 #080808,14px 16px 23px #000b;transition:transform .35s,box-shadow .35s;overflow:hidden}.record-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#fff2,transparent 40%,#0004);pointer-events:none}.record-cover img{width:100%;height:100%;object-fit:cover}.record-placeholder{font:800 32px 'Barlow Condensed',sans-serif;letter-spacing:2px;text-align:center;padding:20px;color:#d1b78e}.record-placeholder small{display:block;font:500 10px 'DM Sans';letter-spacing:3px;margin-bottom:20px;color:#aaa}.record:hover .record-cover,.record[aria-pressed=true] .record-cover{transform:translateY(-35px) rotate(-2deg) scale(1.045);box-shadow:12px 20px 0 #080808,15px 24px 30px #000d}.record-title{font:600 22px 'Barlow Condensed';display:block;margin-top:24px;text-transform:uppercase;letter-spacing:.6px}.record-artist{font-size:12px;color:var(--muted);display:block;margin-top:4px}.shelf-detail{display:flex;flex-wrap:wrap;align-items:center;gap:15px 26px;border:1px solid #3b342b;padding:25px;margin:20px 0 45px}.shelf-detail h3{font:600 35px 'Barlow Condensed';margin:0}.shelf-detail p{margin:0;flex:1}.spotify-listen{border-top:1px solid #302d28;padding-top:24px}.spotify-listen h3{font:600 30px 'Barlow Condensed'}.spotify-listen iframe{width:100%;max-width:900px}.record-note{font-size:12px;color:#9e9589;margin-top:14px}@media(max-width:650px){.shelf-scroll{gap:14px;padding:65px calc(50% - 87.5px) 75px;scroll-padding-inline:calc(50% - 87.5px)}.record{flex-basis:175px}.shelf-detail{display:block}.shelf-detail>*{display:block;margin:10px 0}.acoustic-hero:before{width:240px;right:-130px;opacity:.12}}

@media(hover:none),(pointer:coarse){.record:hover .record-cover{transform:none;box-shadow:12px 12px 0 #080808,14px 16px 23px #000b}.record[aria-pressed=true] .record-cover{transform:translateY(-24px) rotate(-2deg) scale(1.035);box-shadow:12px 20px 0 #080808,15px 24px 30px #000d}.shelf-scroll{scroll-padding-inline:calc(50% - 87px);overscroll-behavior-x:contain}}
@media(hover:hover) and (pointer:fine){.record[aria-pressed=true]:not(:hover) .record-cover{transform:none;box-shadow:12px 12px 0 #080808,14px 16px 23px #000b}}

@media(max-width:650px){.shelf-scroll{scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.record-cover{transition:transform .24s ease-out!important}.record{scroll-snap-align:center}}
@media(max-width:560px){#shelfDetail .player-panel{grid-template-columns:1fr!important}#selectedCover{max-width:230px;margin:auto}}

/* Single source of truth: transform lives on the record element, not the cover. */
.shelf-shell{overflow:visible!important}
.shelf-scroll{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity!important;scroll-behavior:auto!important;gap:20px!important;padding:100px max(30px,calc(50% - 90px)) 85px!important;touch-action:pan-x pan-y!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.shelf-scroll .record{position:relative;flex:0 0 180px;scroll-snap-align:center;transform:translate3d(0,var(--rise,0px),0) scale(var(--scale,1))!important;transition:transform .13s linear!important;will-change:transform;filter:drop-shadow(0 0 calc(16px * var(--glow,0)) rgba(200,170,128,.55))}
.shelf-scroll .record .record-cover,.shelf-scroll .record:hover .record-cover,.shelf-scroll .record[aria-pressed=true] .record-cover{transform:none!important;transition:box-shadow .2s ease!important}
.shelf-scroll .record .record-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:650px){.shelf-scroll{gap:18px!important;padding-inline:calc(50% - 87.5px)!important}.shelf-scroll .record{flex-basis:175px}}
@media(prefers-reduced-motion:reduce){.shelf-scroll .record{transition:none!important}}


/* Completely independent vinyl shelf: no inherited record classes. */
#rayoVinylTrack{box-sizing:border-box;display:flex;gap:22px;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:32px 56px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;align-items:flex-end;padding:96px 56px 44px 32px;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;isolation:isolate}
#rayoVinylTrack::-webkit-scrollbar{display:none}
#rayoVinylTrack .rayo-vinyl-card{box-sizing:border-box;display:flex;flex:0 0 170px;width:170px;min-width:170px;flex-direction:column;position:relative;scroll-snap-align:start;text-decoration:none;color:#f5f1e9;transform:translate3d(0,0,0);transition:transform .32s cubic-bezier(.2,.75,.25,1);transform-origin:50% 90%;transform-style:preserve-3d;z-index:1;will-change:transform;outline-offset:6px}
#rayoVinylTrack .rayo-vinyl-card.raised{transform:translate3d(0,-65px,0) rotate(-5deg) rotateY(-7deg) scale(1.07);z-index:5}
#rayoVinylTrack .rayo-vinyl-art{position:relative;display:block;aspect-ratio:1;width:100%;height:auto;box-shadow:6px 8px 0 #080808,9px 13px 22px #000b;border:1px solid #e5d5bd4a;overflow:visible;background:#161616;transform:none!important;transition:box-shadow .2s ease}
#rayoVinylTrack .rayo-vinyl-art img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:2}
#rayoVinylTrack .rayo-vinyl-disc{position:absolute;right:-18px;top:10px;width:145px;height:145px;border-radius:50%;background:repeating-radial-gradient(circle,#191919 0 3px,#2d2d2d 4px 5px);border:1px solid #777;z-index:1;transition:right .22s ease}
#rayoVinylTrack .rayo-vinyl-card.raised .rayo-vinyl-disc{right:-35px}
#rayoVinylTrack .rayo-vinyl-title{font-weight:700;font-size:13px;margin-top:15px;letter-spacing:.08em}
#rayoVinylTrack .rayo-vinyl-artist{font-size:11px;line-height:1.5;color:#aaa;margin-top:5px}
@media(hover:hover) and (pointer:fine){#rayoVinylTrack .rayo-vinyl-card:hover,#rayoVinylTrack .rayo-vinyl-card:focus-visible{transform:translate3d(0,-65px,0) rotate(-5deg) rotateY(-7deg) scale(1.07);z-index:5}}
@media(prefers-reduced-motion:reduce){#rayoVinylTrack .rayo-vinyl-card{transition:none}}


/* V20: independent music art, accessible player and contact layout. Keep V19 vinyl animation intact. */
#rayoVinylTrack .rayo-vinyl-card{cursor:pointer}
#rayoVinylTrack .rayo-vinyl-card:focus-visible{outline:2px solid var(--gold);outline-offset:8px}
#rayoVinylTrack .rayo-vinyl-card.raised .rayo-vinyl-art{border-color:#c8aa80}
#rayoVinylTrack .rayo-vinyl-art img{background:#1c1b1a}
#rayoVinylTrack .rayo-vinyl-card[data-official="true"] .rayo-vinyl-art::after{content:'✓';position:absolute;top:7px;right:7px;z-index:3;border-radius:50%;background:#c8aa80;color:#17120e;font-size:10px;font-weight:800;padding:3px 5px}
.shelf-detail{display:block!important}.player-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:24px 0}.player-panel h3{font:600 36px 'Barlow Condensed',sans-serif;margin:8px 0}.player-panel p{margin:4px 0}.player-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.player-actions audio{max-width:280px;width:100%;height:42px}.preview-status{font-size:12px;color:#aaa;flex-basis:100%}.project-form{max-width:740px;margin:35px auto 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}.project-form label{display:flex;flex-direction:column;gap:9px;font-size:12px;letter-spacing:.05em;color:#c8aa80}.project-form .message-field{grid-column:1/-1}.project-form input,.project-form select,.project-form textarea{width:100%;padding:14px 16px;border:1px solid #5b5145;border-radius:3px;background:#111;color:#f3eee6;font:14px 'DM Sans',sans-serif}.project-form button{justify-content:center;cursor:pointer}.project-form #briefFeedback{align-self:center;font-size:12px;margin:0}.record-note{font-size:12px}.shelf-shell{position:relative}.shelf-shell::after{content:'';position:absolute;bottom:48px;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,#c8aa80 15%,#c8aa80 85%,transparent);pointer-events:none;opacity:.45}
@media(max-width:650px){.project-form{grid-template-columns:1fr}.project-form .message-field{grid-column:auto}.player-panel{align-items:flex-start}.player-actions{width:100%}.player-actions audio{max-width:100%}}


/* Paneles acústicos geométricos integrados, sin añadir secciones independientes. */
.hero::before{content:"";position:absolute;inset:75px 0 0 auto;width:min(58%,720px);background:url("paneles-acusticos.svg") center/440px auto repeat;opacity:.22;filter:drop-shadow(0 15px 18px #000);transform:perspective(1100px) rotateY(-13deg) scale(1.12);pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 45%,#000 75%,transparent)}
.about .copy{position:relative;isolation:isolate;background:#0b0c0c}
.about .copy::before{content:"";position:absolute;inset:0;background:url("paneles-acusticos.svg") center/390px auto repeat;opacity:.085;z-index:-1;pointer-events:none;mask-image:linear-gradient(to left,#000,transparent)}
#producciones::before{content:"";position:absolute;right:-180px;top:0;width:480px;height:310px;background:url("paneles-acusticos.svg") center/contain no-repeat;opacity:.12;pointer-events:none;transform:perspective(900px) rotateY(-25deg)}
@media(max-width:650px){.hero::before{width:90%;opacity:.14;transform:perspective(850px) rotateY(-12deg)}#producciones::before{opacity:.07}}


html{width:100%;max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
body{width:100%;max-width:100%;overflow-x:clip}
main,header,footer,.section,.hero,.about,#producciones{min-width:0;max-width:100%;box-sizing:border-box}
img,iframe,svg{max-width:100%}
#producciones{overflow:hidden}
#producciones .shelf-shell{width:100%;max-width:100%;min-width:0;overflow:hidden!important}
#rayoVinylTrack{max-width:100%;min-width:0;overflow-x:auto!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
#shelfDetail{margin-top:6px!important;margin-bottom:26px!important}
#producciones .record-note{display:none!important}
#producciones .shelf-rail{margin-bottom:0!important}
.spotify-listen{padding-top:18px}
@media(max-width:650px){#shelfDetail{padding:16px!important;margin-top:2px!important;margin-bottom:24px!important}.spotify-listen{padding-top:18px}}


/* Keep geometric panel motif on solid surfaces only, never over photography. */
.hero::before{content:none!important;background:none!important}
.about .copy::before{opacity:.12!important}
#producciones::before{opacity:.1!important}
/* Allow native horizontal shelf scrolling, vertical page scrolling and pinch zoom. */
#rayoVinylTrack,#rayoVinylTrack .rayo-vinyl-card,#rayoVinylTrack .rayo-vinyl-art{touch-action:auto!important}
#rayoVinylTrack{overscroll-behavior-y:auto!important;overscroll-behavior-x:contain;}
#rayoVinylTrack .rayo-vinyl-card{user-select:none;-webkit-user-select:none}


.hp-field{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.instagram-contact{max-width:660px;margin:36px auto 0;padding:26px;border:1px solid #4b4035;border-radius:12px;background:linear-gradient(135deg,#181715,#101111)}
.instagram-contact h3{font:600 28px 'Barlow Condensed',sans-serif;margin:0 0 8px;text-transform:uppercase}
.instagram-contact p{font-size:14px}
.instagram-contact textarea{display:block;width:100%;min-height:100px;resize:vertical;border:1px solid #555047;border-radius:8px;background:#0b0c0c;color:#f3eee6;font:inherit;padding:14px;box-sizing:border-box}
.instagram-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.instagram-actions .btn{cursor:pointer}
@media(max-width:650px){.instagram-contact{padding:18px}.instagram-actions{flex-direction:column}.instagram-actions .btn{justify-content:center}}


@media(min-width:1024px){#rayoVinylTrack{scrollbar-width:thin;scrollbar-color:#6c5940 transparent}#rayoVinylTrack .rayo-vinyl-card{transition:transform .28s ease,filter .28s ease}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #c8aa80;outline-offset:4px}}
@media(max-width:650px){#rayoVinylTrack,.rayo-vinyl-card{touch-action:pan-x pan-y!important}}


.rayo-release-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr));gap:20px;margin-top:30px}
.rayo-release{display:block;padding:15px;background:#1a1b1a;border:1px solid #34302c;border-radius:9px;transition:transform .2s}
.rayo-release:hover{transform:translateY(-7px)}
.rayo-release img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}
.rayo-release h3{font:600 26px 'Barlow Condensed',sans-serif;margin:12px 0 4px}
.rayo-release p{font-size:13px;margin:0;color:#bbb}

#rayoVinylTrack{touch-action:pan-x pan-y!important;overscroll-behavior-x:contain}#ultimos-lanzamientos{padding-top:42px;padding-bottom:42px}#ultimos-lanzamientos[hidden]{display:none!important}.instagram-contact{max-width:unset;padding:18px;border:0;background:transparent}
#ultimos-lanzamientos[hidden]{display:none!important}

#rayoVinylTrack{touch-action:auto!important;scroll-snap-type:x proximity!important;overscroll-behavior-x:contain;overscroll-behavior-y:auto;scroll-behavior:auto!important;-webkit-overflow-scrolling:touch;contain:layout style;}
#rayoVinylTrack .rayo-vinyl-card{touch-action:auto!important;transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;will-change:auto!important;backface-visibility:hidden;}
#rayoVinylTrack .rayo-vinyl-card.raised{will-change:transform!important;}
#rayoVinylTrack .rayo-vinyl-card .rayo-vinyl-disc{transition:right .25s ease;}
#rayoVinylTrack .rayo-vinyl-art{filter:none!important}
@media(hover:hover) and (pointer:fine){#rayoVinylTrack .rayo-vinyl-card:hover{will-change:transform!important}}
@media(max-width:650px){.hero::before{filter:none!important}.panel-wall{animation:none!important}#rayoVinylTrack .rayo-vinyl-card{transition-duration:.20s!important}}
@media(prefers-reduced-motion:reduce){#rayoVinylTrack .rayo-vinyl-card{transition:none!important}}


/* Repository review: mobile navigation, touch scrolling and robust small layouts. */
html{scroll-padding-top:92px}
.hero-content,.about .copy,.service,.player-panel>div,.project-form>*{min-width:0}
.hero-content,.about .copy,.service,.player-panel>div{overflow-wrap:anywhere}
.lang-switch button{min-width:44px;min-height:44px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.project-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.project-form input,.project-form select,.project-form textarea{min-width:0;font-size:16px}
.project-form .message-field,.project-form #briefFeedback{grid-column:1/-1}
.project-form #briefFeedback{max-width:none;margin:0}
#rayoVinylTrack .rayo-vinyl-art,#rayoVinylTrack .rayo-vinyl-art img{touch-action:auto!important}
#rayoVinylTrack .rayo-vinyl-card{scroll-margin-inline:0}
@media(max-width:1100px){
  html{scroll-padding-top:136px}
  header{height:120px;display:grid;grid-template-columns:55px minmax(0,1fr);grid-template-rows:64px 48px;gap:0 12px;padding:4px 22px}
  header>.brand{grid-column:1;grid-row:1}
  header>.btn{display:none}
  header>.lang-switch{grid-column:2;grid-row:1;justify-self:end;margin:0}
  header>nav{grid-column:1/-1;grid-row:2;display:flex;width:100%;min-width:0;gap:clamp(4px,1.5vw,22px);align-items:center;justify-content:space-between}
  header>nav a{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:11px;line-height:1.3;letter-spacing:0;text-align:center;overflow-wrap:anywhere}
  .hero{padding-top:156px}
  .hero-photo{top:120px;height:calc(100% - 120px)}
}
@media(max-width:650px){header{padding-inline:12px}.project-form{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.hero h1{font-size:clamp(80px,24vw,125px);letter-spacing:-3px}.hero .eyebrow{letter-spacing:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rayo-vinyl-disc{transition:none!important}}

/* Dynamic features preserve the approved palette and shelf geometry. */
.rayo-release-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));align-items:start}
.rayo-release{min-width:0}.rayo-release h3{overflow-wrap:anywhere}.rayo-release iframe{border:0;border-radius:12px;margin-top:16px;display:block}
.release-link{display:block;font-size:12px;color:var(--gold);margin-top:12px}
#contactVerification:empty{display:none}.project-form button:disabled{opacity:.55;cursor:not-allowed}.project-form [disabled]{cursor:wait}
.project-form [aria-busy=true]{opacity:.7}#briefFeedback{min-height:1.5em}
@media(prefers-reduced-motion:reduce){.rayo-release{transition:none}.rayo-release:hover{transform:none}}

/* Review: mouse controls, narrow players and keyboard access. */
#shelfDetail .player-panel{display:grid;grid-template-columns:minmax(110px,200px) minmax(0,1fr);gap:20px;align-items:center}
#selectedCover{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px}
@media(max-width:760px){#shelfDetail .player-panel{grid-template-columns:minmax(0,1fr)!important}#selectedCover{max-width:230px;margin:auto}}
.skip-link{position:fixed;top:10px;left:14px;z-index:30;padding:12px 18px;background:var(--gold);color:#111;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.project-form[aria-busy=true]{opacity:.7}
.project-form textarea{resize:vertical}

/* Desktop shelf: use the full row; only narrow screens center each record. */
#producciones .shelf-shell{margin:14px 0 20px;padding-top:0}
#producciones .shelf-shell::after{content:none}
#rayoVinylTrack .rayo-vinyl-title{min-height:2.6em;line-height:1.3}
#rayoVinylTrack .rayo-vinyl-artist{min-height:3em}
#shelfDetail .player-panel{padding:0}
@media(max-width:760px){
  #rayoVinylTrack{padding-inline:max(24px,calc(50% - 85px));scroll-padding-inline:0}
  #rayoVinylTrack .rayo-vinyl-card{scroll-snap-align:center}
}

/* Edge controls leave the approved covers and shelf geometry in place. */
.shelf-edge{position:absolute;top:162px;z-index:6;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #c8aa8080;border-radius:50%;background:#111212ed;color:var(--gold);box-shadow:0 4px 18px #0009;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.shelf-edge--previous{left:8px;transform:translateX(-6px)}
.shelf-edge--next{right:8px;transform:translateX(6px)}
.shelf-edge span{font:300 32px/1 Arial,sans-serif;margin-top:-3px}
.shelf-edge.is-near,.shelf-edge:focus-visible{opacity:1;pointer-events:auto;transform:translateX(0)}
.shelf-edge:hover{background:var(--gold);color:#111}
.shelf-edge[hidden]{display:none!important}
@media(min-width:761px) and (hover:hover) and (pointer:fine){#rayoVinylTrack{scroll-snap-type:none!important}}
@media(prefers-reduced-motion:reduce){.shelf-edge{transition:none}}

/* Native embeds remain visible regardless of Spotify's readiness messages. */
.spotify-player{max-width:900px;margin:14px 0;min-width:0}
.spotify-stage{position:relative;height:var(--spotify-height,152px);border-radius:12px;overflow:hidden;background:#181818;color-scheme:dark}
.spotify-embed,.spotify-embed iframe{display:block;width:100%;height:100%;border:0;border-radius:12px;background:#181818}
.section .spotify-status{position:relative;max-width:none;margin:8px 0!important;color:var(--muted);font-size:12px;line-height:1.5}
.spotify-status[hidden],.spotify-retry[hidden]{display:none!important}
.spotify-retry{min-height:36px;margin-top:8px;padding:6px 10px;border:1px solid #66553f;border-radius:3px;background:transparent;color:var(--gold);font:500 12px 'DM Sans',sans-serif;cursor:pointer}
.spotify-retry:hover{background:#c8aa801a}
.spotify-recovery{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.spotify-recovery .spotify-retry{margin-top:0}
.spotify-check{color:var(--gold);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.spotify-check[hidden],.spotify-session-note[hidden]{display:none!important}
.section .spotify-session-note{margin:8px 0!important;max-width:none;font-size:12px;line-height:1.5;color:var(--muted)}
.rayo-release .spotify-embed iframe{margin-top:0}

/* About: photos and copy share one continuous row, with no legacy overlay. */
#sobre-mi{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1440px;margin-inline:auto;min-height:0;padding:0;background:#0b0c0c}
#sobre-mi::before,#sobre-mi .copy::before{content:none!important;background:none!important}
#sobre-mi .copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:540px;padding:54px clamp(26px,3.2vw,48px)}
#sobre-mi h2{font:600 clamp(30px,3vw,44px)/1.08 'Barlow Condensed',sans-serif;margin:18px 0}
#sobre-mi p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 26px}
#sobre-mi .about-photo{position:relative;min-width:0;min-height:0;overflow:hidden}
#sobre-mi .about-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-height:none;object-fit:cover;object-position:50% 45%;filter:none}
@media(max-width:900px){
  #sobre-mi{grid-template-columns:repeat(2,minmax(0,1fr))}
  #sobre-mi .copy{grid-column:1/-1;min-height:0;padding:42px clamp(24px,6vw,54px)}
  #sobre-mi .about-photo{height:clamp(280px,60vw,520px)}
}
.select-wrap{position:relative;display:block;width:100%;min-width:0}
.project-form .select-wrap select{appearance:none;-webkit-appearance:none;display:block;padding-right:48px}
.select-chevron{position:absolute;right:18px;top:50%;transform:translateY(-50%);pointer-events:none;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#briefFeedback:empty{display:none}
@media(min-width:901px){.hero-photo{width:min(67%,960px)}}

/* Preserve the original photo overlay; move the mobile title away from the face. */
.hero-content>[data-i18n="heroEyebrow"]{display:inline-block;max-width:100%;padding:9px 12px;color:#f1d8b4;background:#090a0ae8;border-left:2px solid var(--gold);font-size:11px;font-weight:700;line-height:1.5;letter-spacing:1.6px;text-shadow:none}
@media(max-width:650px){
  .hero-content{width:100%;position:static}
  .hero-content>*{position:relative;z-index:2}
  .hero-content>[data-i18n="heroEyebrow"]{position:absolute;top:144px;left:24px;max-width:calc(100% - 48px)}
  .hero h1{width:max-content;max-width:100%;margin-left:auto;text-align:right;font-size:clamp(76px,20vw,110px);letter-spacing:-2px}
}