*{box-sizing:border-box}
body{margin:0;background:#14283a url('../../assets/hero-cuenca.jpg') center/cover fixed;font:15px Arial,sans-serif}
.site{max-width:1200px;margin:auto;background:white;box-shadow:0 0 24px #fff9}
.top{background:#111;color:#fff;padding:9px 5%;font-size:12px}
.nav{background:#b90016;color:#fff;padding:15px;display:flex;justify-content:space-around;font-weight:bold}
.hero{height:400px;position:relative;background:#222;overflow:hidden}
.hero-image{width:100%;height:100%;object-fit:cover}
.main-logo{position:absolute;top:25px;left:50%;transform:translateX(-50%);width:min(350px,85%);height:auto;max-height:260px;object-fit:contain;z-index:2;filter:drop-shadow(0 2px 6px #0009)}
.player{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;width:min(520px,calc(100% - 28px));padding:14px 18px 15px;color:#f9f7f1;border:1px solid #d4a84575;border-radius:20px;background:linear-gradient(135deg,rgba(12,15,18,.94),rgba(24,24,28,.91));box-shadow:0 12px 34px #0009,0 1px 0 #ffffff14 inset;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.player-info{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.player-live{display:inline-flex;align-items:center;gap:7px;color:#eecb75;font-weight:800;font-size:10px;letter-spacing:1.7px;white-space:nowrap}
.live-dot{height:8px;width:8px;border-radius:50%;background:#df3047;box-shadow:0 0 0 4px #df304729;animation:live-glow 2s infinite}
@keyframes live-glow{50%{box-shadow:0 0 0 7px #df304700}}
.player-name{font-size:17px;font-weight:800;text-align:right;line-height:1.15}
.player-name small{font-size:10px;font-weight:400;display:block;margin-top:3px;color:#c5c1b8}
.player-controls{display:flex;align-items:center;gap:13px;min-height:54px}
.player-toggle{background:linear-gradient(140deg,#efcd7a,#bb8734);border:0;width:53px;height:53px;flex:0 0 53px;border-radius:50%;cursor:pointer;color:#161616;display:grid;place-items:center;box-shadow:0 4px 12px #0008;transition:transform .18s,filter .18s}
.player-toggle:hover{transform:scale(1.05);filter:brightness(1.08)}
.player-toggle:focus-visible,.player-volume:focus-visible{outline:3px solid #fff;outline-offset:3px}
.player-toggle svg{width:26px;height:26px;fill:currentColor}
.player-toggle .pause-icon{display:none}
.player-toggle.is-playing .play-icon{display:none}
.player-toggle.is-playing .pause-icon{display:block}
.player-status{font-size:13px;color:#eee;flex:1;min-width:0}
.volume-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.player-volume{width:92px;accent-color:#e4bd65;cursor:pointer}
.player-error{font-size:13px;margin:4px 0 0;color:#eee}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}.player-toggle{transition:none}}
.short{background:#111;color:#ffc900;display:flex;justify-content:space-around;padding:15px;gap:12px;flex-wrap:wrap}
.section{padding:22px}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.card{border-radius:8px;overflow:hidden;background:#eee}
.card img{width:100%;height:120px;object-fit:cover}
.card b,.card small{display:block;text-align:center;padding:8px}
.card small{background:#b90016;color:#fff}
.footer{background:#061b30;color:white;padding:28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.footer a{color:white}
.copyright{background:#041322;color:white;padding:12px}
@media(max-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.nav{flex-wrap:wrap;gap:12px}.footer{grid-template-columns:1fr 1fr}.hero{height:350px}.main-logo{width:min(260px,78%);max-height:205px;top:18px;left:50%;transform:translateX(-50%)}.player{bottom:14px;padding:12px 14px}.player-name{font-size:15px}.player-volume{width:60px}.player-controls{gap:9px}.player-status{font-size:12px}}

/* Reproductor elegante de la maqueta JJ Stereo — 100% CSS externo */
.hero{height:440px}
.hero-image{display:block;width:100%;height:100%;object-fit:cover}
.main-logo{top:14px;max-height:300px;width:min(350px,85%)}
.player{bottom:18px;width:min(900px,calc(100% - 36px));padding:9px 20px;border:2px solid #e7bd55;border-radius:70px;background:linear-gradient(180deg,rgba(20,20,21,.96),rgba(4,4,5,.97));box-shadow:0 10px 28px #000a,0 0 13px #e6b64166;}
.player-controls{gap:18px;min-height:64px;justify-content:center}
.player-toggle{background:#c90019;color:white;border:3px solid #ffce56;width:69px;height:69px;flex:0 0 69px;box-shadow:0 0 0 3px #000,0 2px 10px #000b}
.player-toggle svg{width:34px;height:34px}
.player-info{display:flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:12px;margin:0;flex-wrap:wrap}
.player-live{background:#c9001b;color:#fff;border-radius:40px;padding:6px 11px;letter-spacing:.4px;font-size:12px}
.live-dot{background:white;box-shadow:none}
.player-name{font-size:21px;text-align:left;color:#fff;white-space:nowrap}
.player-name small{font-size:12px;color:#e9e4d7;margin-top:4px}
.player-status{flex:0 0 100%;font-size:10px;text-align:center;color:#e8cb84;margin-top:-7px}
.player-volume-symbol{font-size:23px;line-height:1}
.player-volume{width:110px;accent-color:#cc0822}
.player-bars{display:flex;gap:3px;align-items:center;height:43px;flex:0 0 auto}
.player-bars i{width:3px;height:13px;background:#e9bb43;border-radius:5px}
.player-bars i:nth-child(2),.player-bars i:nth-child(6){height:25px}
.player-bars i:nth-child(3),.player-bars i:nth-child(5){height:34px}
.player-bars i:nth-child(4){height:40px}
@media(max-width:800px){.player{padding:10px 12px}.player-bars{display:none}.player-controls{gap:10px}.player-name{font-size:17px}.player-live{font-size:10px}.player-volume{width:75px}.player-toggle{width:58px;height:58px;flex-basis:58px}}
@media(max-width:480px){.hero{height:390px}.main-logo{width:min(265px,80%);max-height:220px}.player{bottom:11px;width:calc(100% - 20px);border-radius:26px}.player-controls{min-height:65px}.player-info{gap:5px}.player-name{font-size:14px}.player-name small{font-size:9px}.player-volume-symbol{display:none}.player-volume{width:48px}.player-toggle{width:50px;height:50px;flex-basis:50px}.player-toggle svg{width:25px;height:25px}.player-status{font-size:9px;margin-top:0}}