/* ========================================================================== MULTIMEDIOS CATARATAS 94.7 — HOJA DE ESTILOS PRINCIPAL Basado en el prototipo Diseño4, con paleta naranja/amarillo sobre fondo oscuro. Los valores de :root son defaults; se sobreescriben en según las opciones de "Personalización del Sitio" (inc/dynamic-styles.php). ========================================================================== */ :root { --bg-dark: #0a0a0b; --panel-dark: #131315; --header-grad-start: #E85D04; --header-grad-end: #FFCA28; --accent: #FF9E00; --text-white: #ffffff; --text-gray: #7a7a7f; --opacity-header: 0.85; --opacity-footer: 0.95; --footer-bg-rgb: 17, 17, 19; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body, html { margin: 0; padding: 0; height: 100%; background-color: var(--bg-dark); background-image: linear-gradient(115deg, transparent 49%, rgba(255,158,0,0.12) 50%, transparent 51%), linear-gradient(245deg, transparent 49%, rgba(255,158,0,0.12) 50%, transparent 51%); background-size: 55px 100px; font-family: var(--font-family, 'Montserrat', sans-serif); color: var(--text-white); overflow: hidden; } a { font-family: inherit; } /* ========================================== BANNERS FIJOS (SUPERIOR E INFERIOR) ========================================== */ header.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 85px; background: linear-gradient(to right, var(--header-grad-start) 0%, var(--accent) 45%, var(--header-grad-end) 100% ); box-shadow: 0 4px 20px rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; padding: 0 35px; box-sizing: border-box; } .sub-header-bar { position: fixed; top: 85px; left: 0; width: 100%; height: 40px; background: rgba(14, 14, 16, var(--opacity-header)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,158,0,0.25); z-index: 999; display: flex; align-items: center; justify-content: center; } .sub-header-bar span { font-size: 0.88rem; font-weight: 700; letter-spacing: 2.5px; color: var(--header-grad-end); } footer.site-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 65px; background: rgba(var(--footer-bg-rgb, 17, 17, 19), var(--opacity-footer)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(32, 32, 36, var(--opacity-footer)); z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; box-sizing: border-box; } /* CONTENEDOR CENTRAL — ÚNICO QUE SCROLLEA */ .scrollable-content { position: absolute; top: 0; bottom: 65px; left: 0; width: 100%; overflow-y: auto; box-sizing: border-box; padding-top: 125px; scroll-behavior: smooth; } /* Menú superior */ .header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; flex-wrap: nowrap; } .brand { display: flex; align-items: center; text-decoration: none; color: #000; flex-shrink: 0; max-width: 45%; } .brand-logo-wrap { display: flex; align-items: center; justify-content: center; height: 64px; max-height: 64px; width: auto; max-width: 100%; margin-right: 12px; overflow: hidden; flex-shrink: 0; } .brand-logo-wrap img { height: 100%; width: auto; object-fit: contain; display: block; } .brand-text { min-width: 0; overflow: hidden; } .brand-text strong { font-size: 1.3rem; display: block; font-weight: 800; color: #141416; letter-spacing: -0.5px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-text span { font-size: 0.95rem; color: #402400; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; } .main-nav a { color: #1a1a1c; text-decoration: none; text-transform: uppercase; font-size: 0.75rem; font-weight: 700; padding: 9px 15px; border-radius: 4px; transition: all 0.2s; letter-spacing: 0.3px; } .main-nav li.active a, .main-nav a:hover { background: rgba(0,0,0,0.1); color: #000; } /* Botón hamburguesa (solo visible en mobile, ver responsive.css) */ .mc-menu-toggle { display: none; background: rgba(0,0,0,0.12); border: none; color: #1a1a1c; width: 38px; height: 38px; border-radius: 8px; font-size: 1.1rem; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; } /* Buscador */ .search-box-top { position: relative; display: flex; align-items: center; background: rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.08); border-radius: 20px; padding: 6px 16px; width: 230px; } .search-box-top input { background: none; border: none; outline: none; width: 100%; font-size: 0.8rem; color: #1a1a1c; font-weight: 600; } .search-box-top input::placeholder { color: rgba(0,0,0,0.45); } .search-box-top i { font-size: 0.8rem; color: rgba(0,0,0,0.5); } /* ========================================== HERO ========================================== */ .hero-section { position: relative; padding: 100px 40px 140px 40px; margin-bottom: 20px; background-image: linear-gradient(to bottom, rgba(10, 10, 11, 0.75) 0%, rgba(10, 10, 11, 0.9) 60%, var(--bg-dark) 100%), url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?q=80&w=1600&auto=format&fit=crop'); background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; } .hero-content { max-width: 800px; margin: 0 auto; text-align: center; } .hero-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--header-grad-end); font-weight: 700; margin-bottom: 12px; display: block; } .hero-title { font-size: 2.5rem; font-weight: 800; margin: 0 0 15px 0; letter-spacing: -0.5px; } .hero-title em { font-style: normal; color: var(--accent); } .hero-subtitle { font-size: 1rem; color: var(--text-gray); line-height: 1.6; margin-bottom: 30px; } .hero-actions { display: flex; gap: 15px; justify-content: center; } .btn-premium { padding: 12px 28px; font-weight: 700; font-size: 0.85rem; border-radius: 30px; text-decoration: none; text-transform: uppercase; transition: all 0.3s; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 8px; } .btn-gold { background: linear-gradient(135deg, var(--header-grad-end) 0%, var(--header-grad-start) 100%); color: #1a0f00; box-shadow: 0 4px 15px rgba(232,93,4,0.3); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,93,4,0.5); } .btn-outline { border: 2px solid var(--accent); color: var(--header-grad-end); background: transparent; } .btn-outline:hover { background: rgba(255,158,0,0.1); transform: translateY(-2px); } /* Grid de paneles (3 columnas) */ .main-dashboard { display: grid; grid-template-columns: 320px 1fr 380px; gap: 30px; max-width: 1650px; margin: 0 auto; padding: 0 40px 40px 40px; position: relative; z-index: 2; } .panel-box { background: rgba(18, 18, 20, 0.96); border-radius: 12px; padding: 22px; border: 1px solid #1f1f23; } .panel-title { font-size: 0.9rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.8px; margin-bottom: 20px; color: #ffffff; border-bottom: 2px solid var(--accent); padding-bottom: 6px; display: inline-block;} /* Items clickeables (noticias) */ .clickable-track { display: flex; align-items: center; margin-bottom: 12px; background: rgba(255,255,255,0.015); padding: 12px; border-radius: 8px; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; text-decoration: none; color: inherit; } .clickable-track:hover { background: rgba(255,158,0,0.06); border-color: rgba(255,158,0,0.18); } .clickable-track img { width: 46px; height: 46px; border-radius: 6px; margin-right: 14px; object-fit: cover; } .track-meta { flex: 1; } .track-meta strong { display: block; font-size: 0.82rem; color: #fff; margin-bottom: 2px; font-weight: 600; } .track-meta span { font-size: 0.72rem; color: var(--text-gray); } .play-icon-btn { color: var(--accent); font-size: 0.85rem; opacity: 0.5; } .clickable-track:hover .play-icon-btn { opacity: 1; } /* ========================================== PLAYER MAESTRO ========================================== */ .master-player { background: #111113; border-radius: 14px; padding: 25px; border: 1px solid #222226; box-shadow: 0 12px 35px rgba(0,0,0,0.8); } .player-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .player-header h4 { font-size: 1.05rem; font-weight: 700; margin: 0; color: #ffffff; letter-spacing: 0.5px; } .player-wave-container { height: 65px; display: flex; align-items: center; justify-content: center; gap: 4px; margin: 25px 0; } .wave-bar { width: 3px; height: 14px; background: #7a5320; border-radius: 1px; transition: height 0.15s; } .playing-wave .wave-bar { animation: soundWave 0.9s ease-in-out infinite alternate; } .playing-wave .wave-bar:nth-child(3n) { animation-delay: 0.15s; background: var(--header-grad-end); } .playing-wave .wave-bar:nth-child(2n) { animation-delay: 0.3s; background: var(--accent); } @keyframes soundWave { 0% { height: 8px; } 100% { height: 55px; } } .player-status-info { text-align: center; margin-bottom: 22px; } .player-status-info .lbl-vivo { font-size: 0.72rem; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.8px; display: block; margin-bottom: 4px; } .player-status-info .lbl-repro { font-size: 0.65rem; color: var(--accent); letter-spacing: 1.5px; display: block; margin-bottom: 8px; font-weight: 600; } .player-status-info h5 { font-size: 0.92rem; font-weight: 700; color: #ffffff; margin: 0; line-height: 1.4; letter-spacing: 0.2px; } .player-progress-wrapper { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; color: var(--text-gray); margin-bottom: 20px; } .time-slider { flex: 1; margin: 0 12px; accent-color: var(--accent); height: 3px; cursor: pointer; background: #222; } .player-bottom-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; margin-bottom: 5px; } .player-btn { background: none; border: none; color: #ffffff; font-size: 0.9rem; cursor: pointer; transition: color 0.2s; opacity: 0.75; } .player-btn:hover { color: var(--header-grad-end); opacity: 1; } .player-btn-play { background: linear-gradient(135deg, var(--header-grad-end) 0%, var(--header-grad-start) 100%); color: #1a0f00; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 4px 14px rgba(232,93,4,0.4); opacity: 1 !important; } .player-floating-cover { display: flex; align-items: center; gap: 12px; margin-top: 25px; background: rgba(0,0,0,0.25); padding: 10px; border-radius: 8px; border: 1px solid #1c1c1f; } .player-floating-cover img { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; } .player-floating-cover div { font-size: 0.75rem; font-weight: 600; color: #eaeaea; } .volume-master-control { background: #111113; border-radius: 10px; margin-top: 15px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #222226; } .volume-master-control span { font-size: 0.7rem; font-weight: 700; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.5px; } .volume-slider-box { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: flex-end; max-width: 170px; } .volume-slider-box i { font-size: 0.8rem; color: var(--text-gray); } .main-volume-range { width: 100%; accent-color: var(--accent); cursor: pointer; height: 3px; } /* Grilla de playlists */ .playlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; margin-bottom: 5px; } .custom-card { background-color: var(--panel-dark); border-radius: 8px; padding: 12px; border: 1px solid #1f1f23; transition: background 0.3s; cursor: pointer; } .custom-card:hover { background-color: #1a1a1d; border-color: rgba(255,158,0,0.25); } .card-img-wrap { position: relative; margin-bottom: 10px; } .card-img-wrap img { width: 100%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; } .spotify-badge { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.7); padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; display: flex; align-items: center; gap: 4px; color: #fff; } .custom-card strong { display: block; font-size: 0.85rem; margin-bottom: 4px; color: #fff; } .custom-card p { font-size: 0.75rem; color: var(--text-gray); margin: 0; line-height: 1.2; } /* Modal de embed Spotify/YouTube */ .mc-embed-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 2000; align-items: center; justify-content: center; padding: 20px; } .mc-embed-modal.active { display: flex; } .mc-embed-modal-inner { position: relative; width: 100%; max-width: 480px; background: #111113; border-radius: 14px; padding: 20px; border: 1px solid #222226; } .mc-embed-close { position: absolute; top: -14px; right: -14px; background: var(--accent); color: #1a0f00; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; font-size: 1rem; } #mcEmbedContainer iframe { width: 100%; border-radius: 8px; border: none; min-height: 152px; } /* ========================================== SECCIONES DE ANCHO COMPLETO ========================================== */ .section-full { max-width: 1650px; margin: 0 auto; padding: 10px 40px 50px 40px; } .section-heading { font-size: 1.5rem; font-weight: 800; margin: 0 0 25px 0; color: #fff; } /* --- Programación: carrusel circular --- */ .prog-carousel { position: relative; display: flex; align-items: center; justify-content: center; height: 320px; margin-bottom: 10px; } .prog-track { position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); } .prog-slide { position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; transition: transform 0.45s cubic-bezier(.2,.7,.3,1), opacity 0.45s ease; cursor: pointer; } .prog-slide.is-active { cursor: default; } .prog-circle { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--panel-dark); border: 4px solid var(--block-color, var(--accent)); box-shadow: 0 15px 40px rgba(0,0,0,0.55); } .prog-circle img { width: 100%; height: 100%; object-fit: cover; } .prog-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 50; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,158,0,0.35); color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .prog-nav:hover { background: var(--accent); color: #1a0f00; } .prog-prev { left: 0; } .prog-next { right: 0; } .prog-caption { text-align: center; max-width: 640px; margin: 0 auto 20px auto; display: flex; flex-direction: column; gap: 4px; } .prog-caption strong { font-size: 1.15rem; font-weight: 800; color: var(--header-grad-end); } .prog-caption span { font-size: 0.9rem; color: #fff; font-weight: 600; } .prog-caption span:empty { display: none; } .prog-caption em { font-style: italic; color: var(--text-gray); font-size: 0.85rem; } .prog-dots { display: flex; justify-content: center; gap: 8px; } .prog-dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3d; border: none; cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .prog-dot.active { background: var(--accent); transform: scale(1.3); } /* --- Rankings --- */ .ranking-list { display: flex; flex-direction: column; gap: 10px; max-width: 700px; } .ranking-item { display: flex; align-items: center; gap: 16px; background: var(--panel-dark); border: 1px solid #1f1f23; border-radius: 10px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background 0.2s; } a.ranking-item:hover { background: #1a1a1d; } .ranking-pos { font-size: 1.3rem; font-weight: 800; color: var(--accent); min-width: 32px; } .ranking-item img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; } .ranking-meta { flex: 1; } .ranking-meta strong { display: block; font-size: 0.9rem; color: #fff; } .ranking-meta span { font-size: 0.75rem; color: var(--text-gray); } .ranking-link-icon { color: var(--text-gray); font-size: 0.8rem; } /* --- Artistas --- */ .artistas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; } .artista-card { background: var(--panel-dark); border: 1px solid #1f1f23; border-radius: 10px; padding: 16px; text-align: center; } .artista-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-bottom: 12px; border: 2px solid var(--accent); } .artista-card strong { display: block; font-size: 0.95rem; color: #fff; margin-bottom: 6px; } .artista-card p { font-size: 0.78rem; color: var(--text-gray); line-height: 1.4; margin: 0; } /* --- Contacto --- */ .contacto-box { display: flex; flex-wrap: wrap; gap: 16px; } .contacto-item { display: inline-flex; align-items: center; gap: 10px; background: var(--panel-dark); border: 1px solid #1f1f23; border-radius: 10px; padding: 14px 20px; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.85rem; } .contacto-item i { color: var(--accent); } .contacto-item:hover { border-color: var(--accent); } /* Footer links */ .footer-left-brand { display: flex; align-items: center; gap: 10px; overflow: hidden; } .footer-left-brand img, .footer-left-brand .custom-logo { height: 32px; max-height: 32px; width: auto; max-width: 120px; object-fit: contain; flex-shrink: 0; } .footer-left-brand span { font-size: 0.78rem; font-weight: 700; color: var(--text-gray); } .footer-right-socials { display: flex; gap: 14px; color: var(--text-gray); font-size: 0.85rem; } .footer-right-socials a { color: inherit; } .footer-right-socials i:hover { color: var(--header-grad-end); cursor: pointer; }