/*
  Theme Name: Melómanos Radio
  Author: Javo 
  Author URI: https://melomanosradio.com/
  Description: Theme diseñado exclusivamente para la web de Melómanos Radio
  Version: 1.0
  License:  GNU General Public License v2 or later
  License URI:  https://www.gnr.org/licenses/gpl-2.0.html
  Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
  Text Domain: melomanos
*/


:root {
  --black: #111113;
  --ink: #0a0a0b;
  --graphite: #202125;
  --graphite-2: #2a2b30;
  --cream: #f2efe7;
  --muted: #aaa79f;
  --red: #d63a32;
  --red-dark: #9e231f;
  --amber: #f2a51a;
  --steel: #737780;
  --teal: #19b7ae;
  --border: rgba(242, 239, 231, .16);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: "Roboto Condensed", Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.section { padding: 100px 0; position: relative; }
.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .05; z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  height: 82px; padding: 0 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  position: absolute; inset: 0 0 auto; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
}
.brand { display: inline-flex; align-items: baseline; gap: 8px; width: max-content; }
.brand-mark { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 2px solid var(--cream); border-radius: 50%; color: var(--red); font-size: 12px; }
.brand-text { font-family: "Permanent Marker", cursive; font-size: 27px; transform: rotate(-2deg); }
.brand small { color: var(--red); font-family: "Oswald", sans-serif; font-weight: 700; letter-spacing: .18em; }
.main-nav { display: flex; gap: 32px; font-family: "Oswald", sans-serif; font-size: 13px; letter-spacing: .1em; }
.main-nav a { position: relative; padding: 8px 0; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--red); transition:.25s ease; }
.main-nav a:hover::after { right:0; }
.header-live { justify-self: end; font-family:"Oswald",sans-serif; font-weight:700; letter-spacing:.12em; font-size:13px; }
.header-live span, .live-badge span { width:8px; height:8px; border-radius:50%; background:var(--red); display:inline-block; box-shadow:0 0 0 5px rgba(214,58,50,.15); margin-right:8px; animation:pulse 1.5s infinite; }
.menu-toggle { display:none; background:none; border:0; padding:10px; }
.menu-toggle span { width:24px; height:2px; background:var(--cream); display:block; margin:5px 0; }

.hero { min-height: 800px; height: 94vh; display:flex; align-items:center; position:relative; overflow:hidden; background:#09090a; }
.hero-media {
  position:absolute; inset:0; background-image:url('assets/melomanos-brand-board.png'); background-size:cover; background-position:center 34%;
  filter:grayscale(.25) contrast(1.15) brightness(.65); transform:scale(1.04);
}
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,7,8,.95) 0%, rgba(7,7,8,.72) 42%, rgba(7,7,8,.32) 72%, rgba(7,7,8,.72) 100%), linear-gradient(0deg, var(--black) 0%, transparent 35%); }
.hero-content { position:relative; z-index:2; padding-top:70px; }
.eyebrow { margin:0 0 18px; font-family:"Oswald", sans-serif; letter-spacing:.28em; font-size:12px; color:var(--red); font-weight:700; }
.hero h1, .section-title, .cta-box h2 {
  font-family:"Oswald", sans-serif; font-weight:700; text-transform:uppercase; line-height:.88; letter-spacing:-.035em; margin:0;
}
.hero h1 { font-size:clamp(72px, 10vw, 150px); max-width:920px; text-shadow:0 8px 40px rgba(0,0,0,.5); }
.hero h1 em, .section-title em, .cta-box h2 em { font-family:"Permanent Marker", cursive; font-style:normal; color:var(--cream); font-weight:400; position:relative; }
.hero h1 em::after, .section-title em::after { content:""; position:absolute; height:8px; background:var(--red); left:2%; right:-2%; bottom:-7px; transform:rotate(-2deg); opacity:.85; z-index:-1; }
.hero-copy { max-width:620px; color:#d2d0ca; font-size:19px; margin:32px 0; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.btn { min-height:50px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid transparent; cursor:pointer; font-family:"Oswald", sans-serif; font-weight:700; letter-spacing:.09em; transition:.2s ease; }
.btn-primary { background:var(--red); color:#fff; box-shadow:0 0 0 0 rgba(214,58,50,0); }
.btn-primary:hover { background:#ee463c; transform:translateY(-2px); box-shadow:0 10px 30px rgba(214,58,50,.25); }
.btn-ghost { border-color:rgba(255,255,255,.35); background:rgba(0,0,0,.25); backdrop-filter:blur(8px); }
.btn-ghost:hover { border-color:var(--cream); background:rgba(255,255,255,.06); }
.btn-icon { font-size:12px; }
.hero-stamp { position:absolute; right:5vw; bottom:65px; z-index:3; border:2px solid rgba(242,239,231,.5); color:rgba(242,239,231,.7); border-radius:50%; width:104px; aspect-ratio:1; display:grid; place-items:center; text-align:center; font-family:"Oswald"; font-weight:700; letter-spacing:.08em; transform:rotate(9deg); font-size:14px; }

.player-section { margin-top:-55px; position:relative; z-index:5; }
.radio-player { background:rgba(28,29,33,.96); border:1px solid var(--border); box-shadow:var(--shadow); display:grid; grid-template-columns:180px 1fr 190px; min-height:180px; backdrop-filter:blur(18px); position:relative; overflow:hidden; }
.radio-player::before { content:""; position:absolute; left:0; top:0; width:4px; height:100%; background:var(--red); }
.player-art { position:relative; overflow:hidden; background:#050506; }
.player-art img { width:100%; height:100%; object-fit:cover; filter:contrast(1.25); }
.live-badge { position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.78); padding:7px 10px; font-family:"Oswald"; letter-spacing:.11em; font-size:10px; }
.player-main { padding:26px 34px 24px; }
.player-kicker { color:var(--red); font-family:"Oswald"; letter-spacing:.18em; font-weight:700; font-size:11px; margin:0 0 5px; }
.player-main h2 { font-family:"Oswald"; font-size:30px; margin:0; text-transform:uppercase; line-height:1.1; }
.player-main > p:not(.player-kicker) { color:var(--muted); margin:3px 0 8px; }
.wave { height:34px; display:flex; align-items:center; gap:4px; margin:6px 0 8px; opacity:.75; }
.wave i, .sticky-wave i { display:block; width:3px; height:8px; background:var(--red); transform-origin:center; }
.radio-player.playing .wave i, .sticky-player.playing .sticky-wave i { animation:wave .75s ease-in-out infinite alternate; }
.wave i:nth-child(2n) { animation-delay:.15s!important; height:18px; }
.wave i:nth-child(3n) { animation-delay:.3s!important; height:26px; }
.wave i:nth-child(5n) { animation-delay:.45s!important; height:14px; }
.player-controls { display:flex; align-items:center; gap:13px; }
.control-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:#151517; display:grid; place-items:center; cursor:pointer; transition:.2s; }
.control-btn:hover { border-color:var(--red); }
.play-btn { width:45px; height:45px; background:var(--red); border-color:var(--red); }
.volume-wrap { width:110px; }
.volume-wrap input { width:100%; accent-color:var(--red); }
.stream-status { color:var(--muted); font-size:12px; margin-left:auto; }
.player-side { border-left:1px solid var(--border); padding:24px; display:flex; flex-direction:column; justify-content:center; gap:17px; }
.player-side-item span { display:block; color:var(--muted); font-family:"Oswald"; font-size:10px; letter-spacing:.15em; }
.player-side-item strong { font-family:"Oswald"; letter-spacing:.05em; }
.mini-link { color:var(--red); font-family:"Oswald"; font-size:10px; letter-spacing:.08em; margin-top:4px; }

.manifesto { padding-top:140px; }
.manifesto-grid { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:end; }
.section-title { font-size:clamp(48px, 6vw, 86px); }
.manifesto-copy { border-left:1px solid var(--border); padding-left:42px; color:#c7c4bd; font-size:20px; }
.manifesto-copy p:last-child { margin-bottom:0; }

.genres { background:#0c0c0e; border-block:1px solid rgba(255,255,255,.05); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:42px; }
.section-head > p { max-width:320px; color:var(--muted); }
.genre-grid { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--border); border-top:1px solid var(--border); }
.genre-card { padding:36px; min-height:245px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; overflow:hidden; transition:.25s ease; background:linear-gradient(135deg, rgba(255,255,255,.015), transparent); }
.genre-card::after { content:""; position:absolute; width:120px; height:6px; background:var(--red); right:-20px; bottom:25px; transform:rotate(-8deg) translateX(130%); transition:.3s ease; }
.genre-card:hover { background:#171719; transform:translateY(-4px); }
.genre-card:hover::after { transform:rotate(-8deg) translateX(0); }
.genre-card > span { color:var(--red); font-family:"Oswald"; font-size:11px; letter-spacing:.15em; }
.genre-card h3 { font-family:"Oswald"; font-size:27px; margin:38px 0 10px; }
.genre-card p { color:var(--muted); margin:0; max-width:270px; }

.schedule { background:linear-gradient(180deg, var(--black), #161719); }
.day-tabs { display:flex; gap:8px; }
.day-tab { border:1px solid var(--border); background:transparent; padding:9px 15px; cursor:pointer; font-family:"Oswald"; font-size:11px; letter-spacing:.1em; }
.day-tab.active, .day-tab:hover { background:var(--cream); color:#111; }
.schedule-list { border-top:1px solid var(--border); }
.show-card { display:grid; grid-template-columns:100px 1fr 50px; align-items:center; min-height:110px; border-bottom:1px solid var(--border); padding:15px 18px; transition:.2s; }
.show-card:hover { background:rgba(255,255,255,.025); padding-left:25px; }
.show-card.featured { border-left:4px solid var(--red); background:rgba(214,58,50,.05); }
.show-card time { font-family:"Oswald"; font-size:25px; color:var(--muted); }
.show-card h3 { margin:0; font-family:"Oswald"; font-size:25px; text-transform:uppercase; }
.show-card p { margin:3px 0 0; color:var(--muted); }
.tag { display:inline-block; color:var(--red); font-family:"Oswald"; font-size:9px; letter-spacing:.15em; margin-bottom:3px; }
.icon-link { width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--red); cursor:pointer; }
.arrow { font-size:23px; color:var(--muted); text-align:center; }

.now-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }
.poster-card { min-height:530px; padding:22px; background:var(--cream); color:#111; transform:rotate(-2deg); box-shadow:var(--shadow); position:relative; }
.poster-card::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 8px, rgba(0,0,0,.03) 8px 9px); pointer-events:none; }
.poster-inner { border:5px solid #111; height:100%; min-height:486px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; }
.poster-small { font-family:"Permanent Marker"; font-size:28px; }
.poster-inner strong { font-family:"Oswald"; font-size:82px; line-height:.82; letter-spacing:-.05em; margin:30px 0; color:var(--red); text-shadow:5px 5px 0 #111; }
.poster-year { font-family:"Oswald"; letter-spacing:.2em; font-weight:700; }
.about-copy > p:not(.eyebrow) { color:#c5c2bb; font-size:19px; max-width:610px; }
.text-link { display:inline-block; color:var(--red); margin-top:18px; font-family:"Oswald"; font-weight:700; letter-spacing:.08em; border-bottom:1px solid currentColor; }

.cta-section { padding-bottom:120px; }
.cta-box { min-height:460px; display:grid; place-items:center; text-align:center; padding:70px 30px; border:1px solid var(--border); background:radial-gradient(circle at center, rgba(214,58,50,.13), transparent 55%), #0c0c0e; position:relative; overflow:hidden; }
.cta-box::before, .cta-box::after { content:""; position:absolute; width:300px; height:10px; background:var(--red); opacity:.7; }
.cta-box::before { left:-70px; top:65px; transform:rotate(-12deg); }
.cta-box::after { right:-90px; bottom:55px; transform:rotate(-12deg); }
.cta-box h2 { font-size:clamp(55px, 8vw, 105px); margin-bottom:35px; }
.social-row { display:flex; gap:10px; margin-top:30px; }
.social-row a { width:38px; height:38px; border:1px solid var(--border); display:grid; place-items:center; font-family:"Oswald"; font-size:11px; }
.social-row a:hover { border-color:var(--red); color:var(--red); }

.site-footer { border-top:1px solid var(--border); padding:40px 0 120px; background:#09090a; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:25px; }
.footer-brand { display:flex; flex-direction:column; width:max-content; }
.footer-brand span { font-family:"Permanent Marker"; font-size:26px; }
.footer-brand small { color:var(--red); font-family:"Oswald"; letter-spacing:.12em; }
.site-footer p { color:var(--muted); font-size:13px; }
.copyright { text-align:right; }

.sticky-player { position:fixed; left:50%; bottom:18px; transform:translate(-50%, 130%); width:min(620px, calc(100% - 28px)); min-height:66px; z-index:80; background:rgba(20,20,22,.93); border:1px solid var(--border); box-shadow:0 18px 50px rgba(0,0,0,.55); backdrop-filter:blur(14px); display:grid; grid-template-columns:48px 1fr auto 44px; gap:12px; align-items:center; padding:8px 10px; transition:.35s ease; }
.sticky-player.visible { transform:translate(-50%, 0); }
.sticky-play { width:44px; height:44px; border:0; background:var(--red); cursor:pointer; }
.sticky-player strong, .sticky-player small { display:block; }
.sticky-player strong { font-family:"Oswald"; text-transform:uppercase; }
.sticky-player small { color:var(--muted); }
.sticky-wave { display:flex; align-items:center; gap:3px; height:30px; }
.sticky-wave i:nth-child(2n) { height:17px; }
.sticky-wave i:nth-child(3n) { height:25px; }
.sticky-mute { border:0; background:none; cursor:pointer; }

@keyframes wave { from { transform:scaleY(.45); opacity:.55; } to { transform:scaleY(1.2); opacity:1; } }
@keyframes pulse { 0%,100% { box-shadow:0 0 0 5px rgba(214,58,50,.13); } 50% { box-shadow:0 0 0 9px rgba(214,58,50,0); } }

@media (max-width: 960px) {
  .site-header { grid-template-columns:1fr auto; }
  .main-nav { position:fixed; inset:0; background:#0a0a0b; z-index:100; flex-direction:column; justify-content:center; align-items:center; font-size:22px; transform:translateX(100%); transition:.3s; }
  .menu-open .main-nav { transform:translateX(0); }
  .menu-toggle { display:block; justify-self:end; z-index:101; }
  .header-live { display:none; }
  .radio-player { grid-template-columns:145px 1fr; }
  .player-side { display:none; }
  .manifesto-grid, .now-grid { grid-template-columns:1fr; gap:50px; }
  .genre-grid { grid-template-columns:repeat(2,1fr); }
  .poster-card { max-width:560px; width:100%; margin:auto; }
}

@media (max-width: 680px) {
  .container { width:min(100% - 26px, var(--max)); }
  .section { padding:72px 0; }
  .site-header { height:68px; padding:0 16px; }
  .brand-text { font-size:23px; }
  .brand small { display:none; }
  .hero { min-height:720px; height:100svh; }
  .hero-media { background-position:58% center; }
  .hero-overlay { background:linear-gradient(90deg, rgba(7,7,8,.95), rgba(7,7,8,.58)), linear-gradient(0deg, var(--black), transparent 48%); }
  .hero h1 { font-size:clamp(62px, 19vw, 95px); }
  .hero-copy { font-size:17px; }
  .hero-stamp { width:82px; font-size:11px; bottom:35px; }
  .player-section { margin-top:-28px; }
  .radio-player { grid-template-columns:86px 1fr; min-height:150px; }
  .player-art { min-height:150px; }
  .player-main { padding:18px 16px; }
  .player-main h2 { font-size:23px; }
  .player-main > p:not(.player-kicker) { font-size:12px; }
  .wave { display:none; }
  .volume-wrap, .stream-status { display:none; }
  .manifesto { padding-top:100px; }
  .manifesto-copy { padding-left:22px; font-size:17px; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .genre-grid { grid-template-columns:1fr; }
  .genre-card { min-height:210px; }
  .show-card { grid-template-columns:70px 1fr 38px; padding-inline:8px; }
  .show-card time { font-size:19px; }
  .show-card h3 { font-size:20px; }
  .show-card p { font-size:13px; }
  .poster-inner strong { font-size:62px; }
  .footer-grid { grid-template-columns:1fr; text-align:left; }
  .copyright { text-align:left; }
  .sticky-player { grid-template-columns:44px 1fr 38px; }
  .sticky-wave { display:none; }
}


/* ============================================================
   REPRODUCTOR GLOBAL EN FOOTER — AJUSTES MULTIPÁGINA
   ------------------------------------------------------------
   CLASES REUTILIZADAS (ya existentes):
   .sticky-player, .sticky-play, .sticky-wave, .sticky-mute

   CLASE NUEVA:
   .sticky-player__info -> controla truncado de metadata larga.
   .has-global-player    -> helper que app.js agrega al <body> de
                            páginas internas para reservar espacio
                            inferior y evitar que el player tape
                            contenido del footer.
   ============================================================ */
.sticky-player__info { min-width:0; }
.sticky-player__info strong,
.sticky-player__info small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.has-global-player .site-footer { padding-bottom:140px; }

@media (max-width:680px) {
  .has-global-player .site-footer { padding-bottom:132px; }
}