{"id":7,"date":"2025-10-29T18:59:36","date_gmt":"2025-10-29T18:59:36","guid":{"rendered":"https:\/\/igrejaesperancaevida.org\/webradio\/?page_id=7"},"modified":"2026-08-15T11:02:57","modified_gmt":"2026-08-15T14:02:57","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/igrejaesperancaevida.org\/webradio\/","title":{"rendered":"In\u00edcio"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n WEB R\u00c1DIO IEV<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600&display=swap\" rel=\"stylesheet\">\n <style>\n :root{\n --accent:#8b0000;\n --bg:#0f1724;\n --muted:#93a2b8;\n }\n *{box-sizing:border-box;margin:0;padding:0}\n body{font-family:Inter,system-ui;background:linear-gradient(180deg,#071023,#081827);color:#e6eef6;min-height:100vh;padding-bottom:96px;overflow-x:hidden;}\n\n \/* Player com efeitos especiais *\/\n .radio-player{\n position:fixed;left:0;right:0;bottom:0;height:90px;\n display:flex;align-items:center;justify-content:center;\n background:rgba(10,14,24,0.5); \/* Transpar\u00eancia de 50% *\/\n backdrop-filter:blur(10px) saturate(150%);\n border-top:1px solid rgba(255,255,255,0.05);\n z-index:9999;width:100%;\n box-shadow:0 0 25px rgba(139,0,0,0.4), inset 0 0 10px rgba(255,255,255,0.05);\n animation: glowPulse 5s infinite alternate ease-in-out;\n }\n\n @keyframes glowPulse {\n 0% { box-shadow: 0 0 15px rgba(139,0,0,0.4), inset 0 0 10px rgba(255,255,255,0.05); }\n 50% { box-shadow: 0 0 30px rgba(139,0,0,0.7), inset 0 0 15px rgba(255,255,255,0.1); }\n 100% { box-shadow: 0 0 15px rgba(139,0,0,0.4), inset 0 0 10px rgba(255,255,255,0.05); }\n }\n\n .player-inner{\n flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px;\n background:linear-gradient(135deg,rgba(11,18,32,0.5),rgba(18,32,50,0.5));\n padding:12px 24px;border-radius:0;width:100%;\n animation: gradientShift 10s ease infinite;\n background-size:200% 200%;\n }\n\n @keyframes gradientShift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n\n .meta{display:flex;align-items:center;gap:12px;min-width:0}\n .cover{width:64px;height:64px;border-radius:8px;background-size:cover;background-position:center;background-image:url('https:\/\/c20.radioboss.fm\/w\/artwork\/579.jpg');transition:background-image 0.3s ease-in-out;box-shadow:0 0 15px rgba(139,0,0,0.6);}\n .info{min-width:0}\n .title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 6px rgba(255,255,255,0.2);}\n .subtitle{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 4px rgba(255,255,255,0.15);}\n\n .controls{display:flex;align-items:center;gap:20px;position:relative;}\n #playBtn{\n background:radial-gradient(circle at center, var(--accent) 0%, #4b0000 80%);\n border:none;\n color:#fff;\n width:60px;height:60px;border-radius:50%;\n display:flex;align-items:center;justify-content:center;\n cursor:pointer;position:relative;\n box-shadow:0 0 25px rgba(139,0,0,0.7);\n transition:transform .25s, box-shadow .25s;\n }\n #playBtn:hover{transform:scale(1.1);box-shadow:0 0 40px rgba(255,0,0,0.9);}\n\n .equalizer{display:flex;align-items:end;justify-content:center;gap:4px;height:28px;width:36px;}\n .bar{width:4px;height:8px;border-radius:2px;background:var(--accent);animation:bounce 1.2s infinite ease-in-out;box-shadow:0 0 10px rgba(139,0,0,0.8);}\n .bar:nth-child(2){animation-delay:-1s}\n .bar:nth-child(3){animation-delay:-.8s}\n .bar:nth-child(4){animation-delay:-.6s}\n .bar:nth-child(5){animation-delay:-.4s}\n @keyframes bounce{0%,100%{height:8px;opacity:.5}50%{height:28px;opacity:1}}\n .equalizer.paused .bar{animation-play-state:paused;opacity:.3}\n\n @media (max-width:600px){\n .cover{width:48px;height:48px;}\n #playBtn{width:50px;height:50px;}\n .title{font-size:12px;}\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"radio-player\">\n <div class=\"player-inner\">\n <div class=\"meta\">\n <div class=\"cover\" id=\"cover\"><\/div>\n <div class=\"info\">\n <div id='rbcloud_np_a6459' style='font-weight: bold'><\/div>\n <div id='rbcloud_np_t6459'>…<\/div>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"equalizer paused\" id=\"eq\">\n <div class=\"bar\"><\/div><div class=\"bar\"><\/div><div class=\"bar\"><\/div><div class=\"bar\"><\/div><div class=\"bar\"><\/div>\n <\/div>\n <button id=\"playBtn\" aria-label=\"Tocar r\u00e1dio\">\n <svg id=\"icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"28\" height=\"28\" fill=\"white\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <audio id=\"audio\" src=\"https:\/\/c20.radioboss.fm:8579\/stream\" preload=\"none\"><\/audio>\n <script src='https:\/\/c20.radioboss.fm\/w\/nowplaying2.js?u=579&wid=6459&tf=1'><\/script>\n\n <script>\n const audio=document.getElementById('audio');\n const btn=document.getElementById('playBtn');\n const icon=document.getElementById('icon');\n const eq=document.getElementById('eq');\n const cover=document.getElementById('cover');\n\n btn.addEventListener('click',async()=>{\n if(audio.paused){\n await audio.play();\n icon.innerHTML='<path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\"\/>';\n eq.classList.remove('paused');\n } else {\n audio.pause();\n icon.innerHTML='<path d=\"M8 5v14l11-7z\"\/>';\n eq.classList.add('paused');\n }\n });\n\n function updateCover(){\n const timestamp = new Date().getTime();\n cover.style.backgroundImage = `url('https:\/\/c20.radioboss.fm\/w\/artwork\/579.jpg?nocache=${timestamp}')`;\n }\n setInterval(updateCover, 12000);\n <\/script>\n<\/body>\n<\/html>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0d0f60b e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"0d0f60b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ae4b21 elementor-widget elementor-widget-html\" data-id=\"9ae4b21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \r\n INSTRU\u00c7\u00d5ES: \r\n Este c\u00f3digo foi otimizado para que o log\u00f3tipo tenha maior destaque visual,\r\n aumentando o seu tamanho interno sem expandir a \u00e1rea do fundo colorido.\r\n-->\r\n\r\n<!-- Carregamento do Tailwind como aux\u00edlio -->\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n<style>\r\n \/* Reset b\u00e1sico para o container n\u00e3o herdar estilos indesejados do site pai *\/\r\n .webradio-wrapper {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n width: 100%;\r\n background: transparent;\r\n }\r\n\r\n \/* Anima\u00e7\u00e3o do letreiro com nome \u00fanico *\/\r\n @keyframes marquee-webradio-v2 {\r\n 0% { transform: translateX(0); }\r\n 100% { transform: translateX(-50%); }\r\n }\r\n\r\n .marquee-container {\r\n display: flex;\r\n overflow: hidden;\r\n position: relative;\r\n background-color: #fdf2f2; \/* Tom de fundo muito claro baseado no #491515 *\/\r\n border-radius: 50px; \/* Cantos totalmente arredondados (estilo p\u00edlula) *\/\r\n padding: 8px 0;\r\n width: 100%;\r\n min-height: 40px;\r\n align-items: center;\r\n border: 1px solid rgba(73, 21, 21, 0.08);\r\n }\r\n\r\n .marquee-content {\r\n display: inline-block;\r\n white-space: nowrap;\r\n animation: marquee-webradio-v2 35s linear infinite;\r\n color: #491515; \/* Cor principal solicitada *\/\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n font-size: 15px;\r\n }\r\n\r\n .marquee-content:hover {\r\n animation-play-state: paused;\r\n }\r\n\r\n \/* Gradientes para o efeito de desfoque nas bordas *\/\r\n .marquee-fade {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n width: 40px;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n .marquee-fade-left {\r\n left: 0;\r\n border-top-left-radius: 50px;\r\n border-bottom-left-radius: 50px;\r\n background: linear-gradient(to right, #fdf2f2, transparent);\r\n }\r\n .marquee-fade-right {\r\n right: 0;\r\n border-top-right-radius: 50px;\r\n border-bottom-right-radius: 50px;\r\n background: linear-gradient(to left, #fdf2f2, transparent);\r\n }\r\n\r\n \/* Estilo do container do log\u00f3tipo que se sobrep\u00f5e ao fundo *\/\r\n .logo-container-bg {\r\n background-color: #491515;\r\n \/* Padding reduzido para a imagem crescer sem aumentar o fundo *\/\r\n padding: 3px 12px; \r\n border-radius: 0 0 15px 15px; \/* Arredondado apenas em baixo *\/\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 8px 20px rgba(73, 21, 21, 0.3);\r\n transition: transform 0.3s ease, background-color 0.3s ease;\r\n position: relative;\r\n top: -12px;\r\n margin-bottom: -25px;\r\n z-index: 100;\r\n }\r\n \r\n .logo-container-bg:hover {\r\n transform: translateY(5px) scale(1.02);\r\n background-color: #5a1a1a;\r\n }\r\n\r\n \/* Responsividade para a imagem - Tamanho aumentado *\/\r\n .logo-webradio {\r\n max-height: 68px !important; \/* Aumentado de 50px para 68px *\/\r\n width: auto !important;\r\n display: block;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .logo-webradio {\r\n max-height: 48px !important; \/* Aumentado de 38px para 48px *\/\r\n }\r\n .logo-container-bg {\r\n padding: 2px 10px;\r\n margin-bottom: -20px;\r\n }\r\n .marquee-content {\r\n font-size: 13px;\r\n }\r\n .marquee-container {\r\n padding: 6px 0;\r\n min-height: 36px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"webradio-wrapper\">\r\n <!-- Header com base arredondada e logo em destaque -->\r\n <header style=\"background: white; border-bottom: 2px solid #491515; padding: 12px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; position: relative; z-index: 50;\">\r\n <div style=\"max-width: 1200px; margin: 0 auto; padding: 0 20px;\">\r\n <div style=\"display: flex; align-items: center; gap: 20px;\">\r\n \r\n <!-- Sec\u00e7\u00e3o do Log\u00f3tipo que se sobrep\u00f5e ao limite inferior -->\r\n <div style=\"flex-shrink: 0;\">\r\n <div class=\"logo-container-bg\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/igrejaesperancaevida.org\/webradio\/wp-content\/uploads\/2026\/02\/NOVA-LOGO-COM-OUVINTE-01.png\" \r\n alt=\"Log\u00f3tipo Igreja Esperan\u00e7a e Vida\" \r\n class=\"logo-webradio\"\r\n onerror=\"this.src='https:\/\/via.placeholder.com\/120x40\/491515\/ffffff?text=WebRadio'\"\r\n >\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Sec\u00e7\u00e3o do Letreiro Arredondado Compacto -->\r\n <div class=\"marquee-container\" style=\"margin-top: -10px;\">\r\n <div class=\"marquee-fade marquee-fade-left\"><\/div>\r\n \r\n <div class=\"marquee-content\">\r\n <span style=\"padding-right: 60px;\">\r\n 24h no ar levando esperan\u00e7a e vida, atrav\u00e9s de mensagens, reflex\u00f5es, louvores e programa\u00e7\u00f5es ao vivo \u2022 \r\n <\/span>\r\n <span style=\"padding-right: 60px;\">\r\n 24h no ar levando esperan\u00e7a e vida, atrav\u00e9s de mensagens, reflex\u00f5es, louvores e programa\u00e7\u00f5es ao vivo \u2022 \r\n <\/span>\r\n <\/div>\r\n\r\n <div class=\"marquee-fade marquee-fade-right\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n \r\n <!-- Espa\u00e7ador para o conte\u00fado n\u00e3o ficar por baixo da logo que sobressai -->\r\n <div style=\"height: 30px;\"><\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3dc83be e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"3dc83be\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ad04f0e elementor-widget elementor-widget-html\" data-id=\"ad04f0e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Estilos do Widget Moderno, Animado com Borda Fina e Pulsa\u00e7\u00e3o Amarela -->\r\n<style>\r\n \/* Contentor para centralizar o elemento na p\u00e1gina *\/\r\n .radio-container-centered {\r\n text-align: center;\r\n width: 100%;\r\n margin: 20px 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .radio-artwork-modern {\r\n display: inline-block;\r\n border-radius: 50%; \/* Formato de disco redondo *\/\r\n overflow: hidden;\r\n \/* NOVA PULSA\u00c7\u00c3O: Box-shadow inicial em Amarelo Vibrante *\/\r\n box-shadow: 0 0 20px rgba(255, 255, 0, 0.6); \/* Brilho\/Glow em redor *\/\r\n animation: pulse 2s infinite;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n background-color: #1a1a1a;\r\n position: relative;\r\n\r\n \/* Borda 3px com 30% de transpar\u00eancia (mantida) *\/\r\n border: 3px solid rgba(255, 255, 255, 0.7);\r\n box-sizing: border-box; \/* Garante que a borda n\u00e3o quebre o tamanho do c\u00edrculo *\/\r\n }\r\n\r\n \/* Defini\u00e7\u00e3o da anima\u00e7\u00e3o de pulsa\u00e7\u00e3o (glow) - Modificada para Amarelo *\/\r\n @keyframes pulse {\r\n 0% {\r\n \/* Cor Amarela Vibrante *\/\r\n box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.7);\r\n }\r\n 70% {\r\n \/* Mesma cor, mas sem opacidade *\/\r\n box-shadow: 0 0 0 12px rgba(255, 255, 0, 0);\r\n }\r\n 100% {\r\n box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);\r\n }\r\n }\r\n\r\n .radio-artwork-modern img {\r\n display: block;\r\n width: 100px; \/* Tamanho 50% menor mantido *\/\r\n height: 100px;\r\n object-fit: cover;\r\n border: none;\r\n \/* Anima\u00e7\u00e3o de rota\u00e7\u00e3o cont\u00ednua (efeito vinil) *\/\r\n animation: rotateArt 10s linear infinite;\r\n }\r\n\r\n \/* Defini\u00e7\u00e3o da anima\u00e7\u00e3o de rota\u00e7\u00e3o *\/\r\n @keyframes rotateArt {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n \/* Efeito ao passar o mouse (Hover) - Pausa a rota\u00e7\u00e3o e aumenta o glow *\/\r\n .radio-artwork-modern:hover img {\r\n animation-play-state: paused;\r\n }\r\n\r\n .radio-artwork-modern:hover {\r\n transform: scale(1.05);\r\n \/* NOVA COR DE HOVER: Box-shadow em Amarelo Dourado Brilhante *\/\r\n box-shadow: 0 0 25px rgba(255, 255, 0, 0.9);\r\n animation: none;\r\n }\r\n<\/style>\r\n\r\n<!-- RadioBOSS Cloud Artwork Widget (In\u00edcio) -->\r\n<div class=\"radio-container-centered\">\r\n <div class=\"radio-artwork-modern\">\r\n <a target='_blank' href='https:\/\/c20.radioboss.fm\/w\/artwork\/579.jpg'>\r\n <!-- Seus IDs originais mantidos para o funcionamento do script -->\r\n <img id='rbcloud_cover11540' src='https:\/\/c20.radioboss.fm\/w\/artwork\/579.jpg' alt='Capa da M\u00fasica Atual'>\r\n <\/a>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- Seu Script original e funcionalidade em tempo real -->\r\n<script src='https:\/\/c20.radioboss.fm\/w\/cover.js?u=579&wid=11540'><\/script>\r\n<!-- RadioBOSS Cloud Artwork Widget (Fim) -->\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8463085 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"8463085\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e764a4 elementor-widget elementor-widget-html\" data-id=\"6e764a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-pt\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Menu Social Web R\u00e1dio - Edi\u00e7\u00e3o Especial<\/title>\r\n <!-- Font Awesome para \u00edcones -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos encapsulados para n\u00e3o quebrar o layout do seu site *\/\r\n #radio-social-widget {\r\n --radio-primary: #491515; \r\n --text-light: #ffffff;\r\n --whatsapp: #25d366;\r\n --instagram: #e1306c;\r\n --facebook: #1877f2;\r\n --youtube: #ff0000;\r\n \r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px 0;\r\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n }\r\n\r\n #radio-social-widget .social-menu-container {\r\n background: var(--radio-primary);\r\n padding: 12px 20px;\r\n border-radius: 60px;\r\n box-shadow: 0 8px 20px rgba(73, 21, 21, 0.3);\r\n display: flex;\r\n gap: 12px;\r\n align-items: center;\r\n border: 2px solid rgba(255, 255, 255, 0.1);\r\n width: fit-content;\r\n }\r\n\r\n #radio-social-widget .social-label {\r\n color: var(--text-light);\r\n font-weight: 700;\r\n margin-right: 10px;\r\n text-transform: uppercase;\r\n font-size: 0.7rem;\r\n letter-spacing: 1.2px;\r\n opacity: 0.9;\r\n white-space: nowrap;\r\n }\r\n\r\n #radio-social-widget .social-item {\r\n position: relative;\r\n width: 42px;\r\n height: 42px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.1);\r\n color: var(--text-light);\r\n text-decoration: none !important;\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n font-size: 1.2rem;\r\n }\r\n\r\n #radio-social-widget .social-item.whatsapp {\r\n background-color: var(--whatsapp);\r\n box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);\r\n }\r\n\r\n #radio-social-widget .social-item.whatsapp:hover { background-color: #1ebd5a; box-shadow: 0 0 20px var(--whatsapp); }\r\n #radio-social-widget .social-item.instagram:hover { background-color: var(--instagram); box-shadow: 0 0 20px var(--instagram); }\r\n #radio-social-widget .social-item.facebook:hover { background-color: var(--facebook); box-shadow: 0 0 20px var(--facebook); }\r\n #radio-social-widget .social-item.youtube:hover { background-color: var(--youtube); box-shadow: 0 0 20px var(--youtube); }\r\n\r\n #radio-social-widget .social-item:hover {\r\n transform: translateY(-5px) scale(1.1);\r\n color: #fff !important;\r\n }\r\n\r\n #radio-social-widget .social-item::after {\r\n content: attr(data-label);\r\n position: absolute;\r\n top: -40px;\r\n background: #1a1a1a;\r\n color: #fff;\r\n padding: 4px 10px;\r\n border-radius: 4px;\r\n font-size: 0.6rem;\r\n font-weight: 600;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: 0.3s;\r\n white-space: nowrap;\r\n pointer-events: none;\r\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\r\n }\r\n\r\n #radio-social-widget .social-item:hover::after {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n @media (max-width: 600px) {\r\n #radio-social-widget .social-menu-container {\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n border-radius: 20px;\r\n padding: 15px;\r\n max-width: 280px;\r\n }\r\n #radio-social-widget .social-label {\r\n width: 100%;\r\n text-align: center;\r\n margin-bottom: 10px;\r\n margin-right: 0;\r\n }\r\n #radio-social-widget .social-item {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 1.1rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id=\"radio-social-widget\">\r\n <div class=\"social-menu-container\">\r\n <span class=\"social-label\">NOSSAS M\u00cdDIAS:<\/span>\r\n \r\n <!-- 1. WHATSAPP: Substitua o n\u00famero abaixo (mantenha o 55) -->\r\n <a href=\"https:\/\/wa.me\/5582999244590\" class=\"social-item whatsapp\" data-label=\"ENVIAR MENSAGEM\" target=\"_blank\">\r\n <i class=\"fab fa-whatsapp\"><\/i>\r\n <\/a>\r\n\r\n <!-- 2. INSTAGRAM: Cole o link do seu perfil no lugar do # -->\r\n <a href=\"https:\/\/www.instagram.com\/webradio.iev\" class=\"social-item instagram\" data-label=\"Instagram\" target=\"_blank\">\r\n <i class=\"fab fa-instagram\"><\/i>\r\n <\/a>\r\n\r\n <!-- 3. FACEBOOK: Cole o link da sua fanpage no lugar do # -->\r\n <a href=\"https:\/\/www.facebook.com\/profile.php?id=61554903525493&locale=pt_BR\" class=\"social-item facebook\" data-label=\"Facebook\" target=\"_blank\">\r\n <i class=\"fab fa-facebook-f\"><\/i>\r\n <\/a>\r\n\r\n <!-- 4. YOUTUBE: Cole o link do seu canal no lugar do # -->\r\n <a href=\"https:\/\/www.youtube.com\/@IEVOFICIAL\" class=\"social-item youtube\" data-label=\"YouTube\" target=\"_blank\">\r\n <i class=\"fab fa-youtube\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-da5411f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"da5411f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3eeb737 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"3eeb737\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0999b70 elementor-widget elementor-widget-html\" data-id=\"0999b70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- RadioBOSS Cloud Recent Tracks Widget (Start) -->\r\n<style>\r\n \/* Cont\u00eainer principal: Vermelho Escuro com 50% de Transpar\u00eancia + Efeito Vidro *\/\r\n .iev-recent-widget {\r\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n \/* Fundo vermelho escuro em gradiente com 50% de transpar\u00eancia *\/\r\n background: linear-gradient(135deg, rgba(102, 0, 10, 0.5), rgba(48, 0, 3, 0.5));\r\n \/* Efeito de desfoque no que estiver atr\u00e1s do widget *\/\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border-radius: 16px;\r\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\r\n padding: 20px;\r\n max-width: 350px;\r\n margin: 0 auto;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n \/* T\u00edtulo do Widget *\/\r\n .iev-widget-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: #ffffff;\r\n margin-bottom: 18px;\r\n padding-bottom: 12px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.15);\r\n text-align: center;\r\n text-transform: uppercase;\r\n letter-spacing: 0.8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n }\r\n\r\n \/* For\u00e7a o alinhamento da lista do RadioBOSS *\/\r\n .rbcloud_recenttracks {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n gap: 10px !important;\r\n }\r\n\r\n \/* Linha de cada m\u00fasica *\/\r\n .rbcloud_recent_track {\r\n display: flex !important;\r\n align-items: center !important;\r\n background: rgba(0, 0, 0, 0.3) !important;\r\n margin-bottom: 0 !important; \r\n padding: 12px !important;\r\n border-radius: 10px !important;\r\n transition: all 0.25s ease-in-out !important;\r\n cursor: default;\r\n border: 1px solid rgba(255, 255, 255, 0.05) !important;\r\n }\r\n\r\n \/* Efeito Interativo ao passar o mouse *\/\r\n .rbcloud_recent_track:hover {\r\n transform: translateY(-3px); \r\n background: rgba(255, 255, 255, 0.1) !important; \r\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);\r\n border-color: rgba(255, 255, 255, 0.2) !important;\r\n }\r\n\r\n \/* Capa do \u00c1lbum *\/\r\n .rbcloud_recent_track_cover {\r\n border-radius: 8px !important;\r\n overflow: hidden !important;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;\r\n background-color: rgba(0, 0, 0, 0.5) !important;\r\n flex-shrink: 0;\r\n }\r\n\r\n .rbcloud_recent_track_cover img {\r\n display: block !important;\r\n border-radius: 8px !important;\r\n object-fit: cover !important;\r\n }\r\n\r\n \/* Espa\u00e7amento do bloco de texto ao lado da foto *\/\r\n .rbcloud_recent_track_cover + div {\r\n margin-left: 14px !important; \r\n flex-grow: 1;\r\n \/* Removido o overflow: hidden para permitir que o texto cres\u00e7a *\/\r\n }\r\n\r\n \/* Nome do Artista *\/\r\n .rbcloud_recent_artist {\r\n font-weight: 700 !important;\r\n font-size: 0.95rem !important;\r\n color: #ffffff !important;\r\n line-height: 1.2 !important;\r\n word-wrap: break-word !important; \/* Permite quebrar a linha *\/\r\n }\r\n\r\n \/* Nome da M\u00fasica *\/\r\n .rbcloud_recent_title {\r\n font-size: 0.82rem !important;\r\n color: #e0e0e0 !important;\r\n margin-top: 6px !important;\r\n line-height: 1.3 !important;\r\n word-wrap: break-word !important; \/* Permite quebrar a linha *\/\r\n }\r\n<\/style>\r\n\r\n<div class=\"iev-recent-widget\">\r\n <div class=\"iev-widget-title\">\r\n <span>\ud83c\udfb5<\/span> 3 \u00daLTIMAS TOCADAS\r\n <\/div>\r\n \r\n <div class='rbcloud_recenttracks' id='rbcloud_recent1247' data-cnt='3'>\r\n <div class='rbcloud_recent_track' style='display: flex; align-items: center; margin-bottom: 5pt;'>\r\n <div class='rbcloud_recent_track_cover' data-size='65'><\/div>\r\n <div style='margin-left: 5pt;'>\r\n <div class='rbcloud_recent_artist' style='font-weight: bold'><\/div>\r\n <div class='rbcloud_recent_title'>...<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script src='https:\/\/c20.radioboss.fm\/w\/recent.js?u=579&wid=1247&v=2&tf=1'><\/script>\r\n<!-- RadioBOSS Cloud Recent Tracks Widget (End) -->\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-67291f0 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"67291f0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2273b45 elementor-widget elementor-widget-html\" data-id=\"2273b45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-br\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n <title>M\u00fasicas da Semana<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700;900&display=swap');\r\n \r\n :root {\r\n --primary-red: #ef4444;\r\n --dark-red: #7f1d1d;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: radial-gradient(circle at top, #3d0e0e 0%, #000000 100%);\r\n color: #fff;\r\n min-height: 100vh;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.03);\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n @media (hover: hover) {\r\n .glass-card:hover {\r\n transform: translateY(-5px);\r\n border-color: var(--primary-red);\r\n box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);\r\n }\r\n }\r\n\r\n .glass-card:active {\r\n transform: scale(0.98);\r\n background: rgba(255, 255, 255, 0.07);\r\n }\r\n\r\n .artist-image {\r\n width: 100%;\r\n aspect-ratio: 16 \/ 9;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n \/* Esconder barra de rolagem *\/\r\n .no-scrollbar::-webkit-scrollbar {\r\n display: none;\r\n }\r\n .no-scrollbar {\r\n -ms-overflow-style: none;\r\n scrollbar-width: none;\r\n }\r\n\r\n ::-webkit-scrollbar { width: 4px; }\r\n ::-webkit-scrollbar-track { background: #000; }\r\n ::-webkit-scrollbar-thumb { background: var(--dark-red); border-radius: 10px; }\r\n\r\n \/* Anima\u00e7\u00e3o de Carregamento (Skeleton) *\/\r\n .skeleton {\r\n background: linear-gradient(90deg, #1a0505 25%, #2d0a0a 50%, #1a0505 75%);\r\n background-size: 200% 100%;\r\n animation: loading 1.5s infinite;\r\n }\r\n @keyframes loading {\r\n 0% { background-position: 200% 0; }\r\n 100% { background-position: -200% 0; }\r\n }\r\n\r\n .rank-badge {\r\n background: linear-gradient(135deg, #ef4444 0%, #7f1d1d 100%);\r\n box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);\r\n }\r\n\r\n #video-modal {\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n }\r\n\r\n .text-sharp {\r\n text-rendering: optimizeLegibility;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n }\r\n\r\n \/* Sombra de texto preta para o bot\u00e3o compartilhar *\/\r\n .text-shadow-black {\r\n text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);\r\n }\r\n\r\n \/* Notifica\u00e7\u00e3o Toast *\/\r\n #toast {\r\n position: fixed;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 200;\r\n background: rgba(0, 0, 0, 0.85);\r\n color: white;\r\n padding: 12px 24px;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 14px;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(5px);\r\n }\r\n #toast.show {\r\n opacity: 1;\r\n visibility: visible;\r\n bottom: 50px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"pb-12 text-sharp\">\r\n\r\n <!-- Notifica\u00e7\u00e3o de Link Copiado -->\r\n <div id=\"toast\">Link copiado para compartilhar!<\/div>\r\n\r\n <!-- Modal de V\u00eddeo -->\r\n <div id=\"video-modal\" class=\"fixed inset-0 z-[100] hidden opacity-0 flex items-center justify-center p-4 bg-black\/95 backdrop-blur-sm\">\r\n <div class=\"relative w-full max-w-4xl\">\r\n <!-- Bot\u00e3o de Fechar -->\r\n <button onclick=\"closeVideo()\" class=\"absolute -top-12 right-0 text-white text-3xl hover:text-red-500 transition-colors p-2 focus:outline-none\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/button>\r\n <!-- Container do Player -->\r\n <div class=\"glass-card border-white\/20 rounded-2xl overflow-hidden shadow-2xl aspect-video bg-black\">\r\n <iframe id=\"video-frame\" class=\"w-full h-full\" frameborder=\"0\" allow=\"autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"max-w-7xl mx-auto px-4 pt-8 md:pt-16\">\r\n <!-- Cabe\u00e7alho -->\r\n <header class=\"text-center mb-10 md:mb-16\">\r\n <div class=\"inline-flex items-center gap-2 px-4 py-1.5 mb-4 border border-red-500\/30 rounded-full bg-red-500\/10 text-red-400 text-xs font-bold tracking-[0.2em] uppercase\">\r\n <span class=\"relative flex h-2 w-2\">\r\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75\"><\/span>\r\n <span class=\"relative inline-flex rounded-full h-2 w-2 bg-red-500\"><\/span>\r\n <\/span>\r\n TOP 5 LOUVORES\r\n <\/div>\r\n \r\n <h1 class=\"text-4xl md:text-7xl font-black mb-3 text-white tracking-tight leading-none drop-shadow-lg\">\r\n M\u00fasicas da <br class=\"block md:hidden\">\r\n <span class=\"text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-red-800\">Semana<\/span>\r\n <\/h1>\r\n \r\n <p class=\"text-slate-300 text-xs md:text-lg max-w-3xl mx-auto uppercase font-semibold tracking-widest px-4 leading-relaxed\">\r\n SELECIONAMOS 5 LOUVORES ESPECIAIS PARA VOC\u00ca.\r\n <\/p>\r\n <\/header>\r\n\r\n <!-- Container das M\u00fasicas -->\r\n <div id=\"songs-container\" class=\"flex overflow-x-auto no-scrollbar snap-x snap-mandatory gap-4 pb-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-8 md:overflow-visible md:pb-0\">\r\n <!-- Gerado via JavaScript -->\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ URLs dos v\u00eddeos do YouTube\r\n const songs = [\r\n { id: 1, videoUrl: \"https:\/\/www.youtube.com\/watch?v=MjByqHEqOwk\" },\r\n { id: 2, videoUrl: \"https:\/\/www.youtube.com\/watch?v=Z_mvHa5BnvQ\" },\r\n { id: 3, videoUrl: \"https:\/\/www.youtube.com\/watch?v=tLO8Sqkccj4\" },\r\n { id: 4, videoUrl: \"https:\/\/www.youtube.com\/watch?v=WKyzlO2AFfc\" },\r\n { id: 5, videoUrl: \"https:\/\/www.youtube.com\/watch?v=WLM7GbpHj8U\" }\r\n ];\r\n\r\n const container = document.getElementById('songs-container');\r\n const modal = document.getElementById('video-modal');\r\n const frame = document.getElementById('video-frame');\r\n const toast = document.getElementById('toast');\r\n let scrollInterval;\r\n\r\n \/\/ Exibe mensagem r\u00e1pida (Toast)\r\n function showToast(message) {\r\n toast.innerText = message;\r\n toast.classList.add('show');\r\n setTimeout(() => toast.classList.remove('show'), 3000);\r\n }\r\n\r\n \/\/ Extrai ID do YouTube da URL\r\n function getYouTubeId(url) {\r\n const regExp = \/^.*(youtu.be\\\/|v\\\/|u\\\/\\w\\\/|embed\\\/|watch\\?v=|\\&v=)([^#\\&\\?]*).*\/;\r\n const match = url.match(regExp);\r\n return (match && match[2].length === 11) ? match[2] : null;\r\n }\r\n\r\n \/\/ Abre o v\u00eddeo no site\r\n function openVideo(url) {\r\n const videoId = getYouTubeId(url);\r\n if (!videoId) return;\r\n frame.src = `https:\/\/www.youtube.com\/embed\/${videoId}?autoplay=1&rel=0`;\r\n modal.classList.remove('hidden');\r\n setTimeout(() => {\r\n modal.classList.add('opacity-100');\r\n modal.classList.remove('opacity-0');\r\n }, 10);\r\n clearInterval(scrollInterval);\r\n document.body.style.overflow = 'hidden'; \r\n }\r\n\r\n \/\/ Fecha o player\r\n function closeVideo() {\r\n modal.classList.add('opacity-0');\r\n modal.classList.remove('opacity-100');\r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n frame.src = ''; \r\n document.body.style.overflow = '';\r\n startAutoScroll(); \r\n }, 300);\r\n }\r\n\r\n \/\/ Fun\u00e7\u00e3o para Compartilhar\r\n async function shareVideo(title, url) {\r\n if (navigator.share) {\r\n try {\r\n await navigator.share({\r\n title: title,\r\n text: `Veja este louvor especial: ${title}`,\r\n url: url\r\n });\r\n } catch (err) {\r\n console.log(\"Erro ao compartilhar:\", err);\r\n }\r\n } else {\r\n \/\/ Alternativa: copiar o link manualmente para \u00e1rea de transfer\u00eancia\r\n const tempInput = document.createElement('input');\r\n tempInput.value = url;\r\n document.body.appendChild(tempInput);\r\n tempInput.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(tempInput);\r\n showToast(\"Link copiado para a \u00e1rea de transfer\u00eancia!\");\r\n }\r\n }\r\n\r\n \/\/ Fecha modal ao clicar fora do player\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) closeVideo();\r\n });\r\n\r\n \/\/ Busca dados do v\u00eddeo (T\u00edtulo e Autor) via noembed\r\n async function fetchVideoData(url) {\r\n try {\r\n const response = await fetch(`https:\/\/noembed.com\/embed?url=${encodeURIComponent(url)}`);\r\n if (!response.ok) throw new Error('Falha ao buscar dados');\r\n return await response.json();\r\n } catch (error) {\r\n console.error(\"Erro ao carregar dados do v\u00eddeo:\", error);\r\n return null;\r\n }\r\n }\r\n\r\n \/\/ Renderiza os cards na tela\r\n async function renderSongs() {\r\n container.innerHTML = '';\r\n \r\n \/\/ Exibe esqueletos (Skeletons) enquanto carrega os metadados\r\n for(let i=0; i<songs.length; i++) {\r\n const skeleton = document.createElement('div');\r\n skeleton.className = 'glass-card rounded-2xl md:rounded-3xl overflow-hidden flex flex-col min-w-[85vw] md:min-w-0 h-[380px]';\r\n skeleton.innerHTML = `\r\n <div class=\"aspect-video skeleton w-full\"><\/div>\r\n <div class=\"p-6 flex flex-col gap-4 text-center\">\r\n <div class=\"h-6 skeleton w-3\/4 mx-auto rounded\"><\/div>\r\n <div class=\"h-4 skeleton w-1\/2 mx-auto rounded\"><\/div>\r\n <div class=\"h-12 skeleton w-full mt-4 rounded-xl\"><\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(skeleton);\r\n }\r\n\r\n const videoDetails = await Promise.all(songs.map(song => fetchVideoData(song.videoUrl)));\r\n container.innerHTML = '';\r\n\r\n videoDetails.forEach((data, index) => {\r\n const song = songs[index];\r\n const rank = index + 1;\r\n const title = data?.title || \"Louvor em Destaque\";\r\n const artist = data?.author_name || \"Canal Selecionado\";\r\n const img = data?.thumbnail_url || \"https:\/\/images.unsplash.com\/photo-1470225620780-dba8ba36b745?auto=format&fit=crop&q=80&w=800\";\r\n\r\n const card = document.createElement('div');\r\n card.className = 'glass-card rounded-2xl md:rounded-3xl overflow-hidden flex flex-col h-full min-w-[85vw] md:min-w-0 snap-center relative';\r\n card.innerHTML = `\r\n <div class=\"absolute top-4 left-4 z-20 rank-badge text-white px-3 py-1 rounded-lg font-black text-xs md:text-sm uppercase tracking-tighter flex items-center gap-1.5 border border-white\/20\">\r\n <i class=\"fas fa-trophy text-[10px]\"><\/i>\r\n TOP ${rank}\r\n <\/div>\r\n\r\n <div class=\"relative overflow-hidden aspect-video group cursor-pointer\" onclick=\"openVideo('${song.videoUrl}')\">\r\n <img decoding=\"async\" src=\"${img}\" alt=\"${title}\" class=\"artist-image group-hover:scale-105 transition-transform duration-500\" loading=\"lazy\">\r\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-black\/40 transition-colors flex items-center justify-center\">\r\n <div class=\"w-14 h-14 rounded-full bg-red-600\/90 flex items-center justify-center border border-red-400 shadow-[0_0_30px_rgba(239,68,68,0.4)] transition-transform group-hover:scale-110\">\r\n <i class=\"fas fa-play text-white text-xl translate-x-0.5\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"p-5 md:p-6 flex flex-col grow justify-between\">\r\n <div class=\"mb-6 text-center\">\r\n <h3 class=\"text-lg md:text-xl font-extrabold text-slate-200 leading-tight line-clamp-2 drop-shadow-sm\">${title}<\/h3>\r\n <p class=\"text-[#491515] text-[11px] md:text-sm truncate font-bold mt-2 uppercase tracking-[0.15em]\">${artist}<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col gap-3\">\r\n <button onclick=\"openVideo('${song.videoUrl}')\" \r\n class=\"w-full py-4 rounded-xl text-sm md:text-base font-bold transition-all flex items-center justify-center gap-3 bg-red-600 text-white active:scale-95 shadow-lg shadow-red-900\/40 hover:bg-red-500 border border-red-400\/20\">\r\n <i class=\"fas fa-play-circle text-lg\"><\/i>\r\n Assistir Agora\r\n <\/button>\r\n <button onclick=\"shareVideo('${title.replace(\/'\/g, \"\\\\'\")}', '${song.videoUrl}')\" \r\n class=\"w-full py-3 rounded-xl text-xs md:text-sm font-semibold transition-all flex items-center justify-center gap-2 bg-white\/5 text-white hover:bg-white\/10 active:scale-95 border border-white\/10 text-shadow-black\">\r\n <i class=\"fas fa-share-alt\"><\/i>\r\n Compartilhar\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n container.appendChild(card);\r\n });\r\n\r\n startAutoScroll();\r\n }\r\n\r\n \/\/ Sistema de rolagem autom\u00e1tica para celular\r\n function startAutoScroll() {\r\n if (scrollInterval) clearInterval(scrollInterval);\r\n scrollInterval = setInterval(() => {\r\n if (container.scrollWidth <= container.offsetWidth) return;\r\n const firstCard = container.querySelector('.glass-card');\r\n if (!firstCard) return;\r\n const cardWidth = firstCard.offsetWidth + 16; \/\/ largura do card + gap\r\n const isAtEnd = Math.ceil(container.scrollLeft + container.offsetWidth) >= container.scrollWidth - 20;\r\n if (isAtEnd) {\r\n container.scrollTo({ left: 0, behavior: 'smooth' });\r\n } else {\r\n container.scrollBy({ left: cardWidth, behavior: 'smooth' });\r\n }\r\n }, 3000); \r\n }\r\n\r\n \/\/ Pausa o movimento autom\u00e1tico ao interagir manualmente\r\n container.addEventListener('touchstart', () => clearInterval(scrollInterval));\r\n container.addEventListener('touchend', startAutoScroll);\r\n\r\n renderSongs();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WEB R\u00c1DIO IEV … 24h no ar levando esperan\u00e7a e vida, atrav\u00e9s de mensagens, reflex\u00f5es, louvores e programa\u00e7\u00f5es ao vivo \u2022 24h no ar levando esperan\u00e7a e vida, atrav\u00e9s de mensagens, reflex\u00f5es, louvores e programa\u00e7\u00f5es ao vivo \u2022 Menu Social Web R\u00e1dio – Edi\u00e7\u00e3o Especial NOSSAS M\u00cdDIAS: \ud83c\udfb5 3 \u00daLTIMAS TOCADAS … M\u00fasicas da Semana Link copiado para compartilhar! TOP 5 LOUVORES M\u00fasicas da Semana SELECIONAMOS 5 LOUVORES ESPECIAIS PARA VOC\u00ca.<\/p>\n","protected":false},"author":1,"featured_media":1743,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","has-post-thumbnail","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":1648,"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":2451,"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/pages\/7\/revisions\/2451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/media\/1743"}],"wp:attachment":[{"href":"https:\/\/igrejaesperancaevida.org\/webradio\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}