/*
Theme Name: Nova FM
Theme URI: https://seudominio.com/novafm
Author: Seu Nome
Author URI: https://seudominio.com
Description: Tema moderno para rádio/web rádio, inspirado no estilo Nova FM MS. Player ao vivo, grade de programação, notícias e muito mais.
Version: 1.0
License: GPL-2.0-or-later
Text Domain: novafm
*/

/* (Cole aqui TODO o CSS que você já criou, mantendo exatamente as mesmas regras) */
/* ... (copie o conteúdo do <style> anterior na íntegra) ... */



/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template WordPress - Nova FM Style</title>
    <style>
        /* ============================================
           TEMA WORDPRESS: NOVA FM STYLE
           Template completo para rádio/web rádio
           ============================================ */
        :root {
            --bg-dark: #0d0d1a;
            --bg-card: #151528;
            --primary: #1a56db;
            --primary-hover: #1e40af;
            --accent: #f59e0b;
            --accent-hover: #d97706;
            --text: #e2e8f0;
            --text-muted: #94a3b8;
            --border: #1e293b;
            --white: #ffffff;
            --gradient: linear-gradient(135deg, #1a56db 0%, #7c3aed 100%);
            --radius: 12px;
            --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: var(--bg-dark);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }

        /* ============ PLAYER BAR (FIXO NO TOPO) ============ */
        .player-bar {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: #0a0a16;
            border-bottom: 1px solid var(--border);
            padding: 0 1.5rem;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .player-bar .live-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-shrink: 0;
        }
        .player-bar .live-dot {
            width: 10px;
            height: 10px;
            background: #ef4444;
            border-radius: 50%;
            animation: pulse-live 1.5s infinite;
            box-shadow: 0 0 12px #ef4444;
        }
        @keyframes pulse-live {
            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.6);
                opacity: 0.5;
            }
        }
        .player-bar .live-text {
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #ef4444;
            animation: blink-text 2s infinite;
        }
        @keyframes blink-text {
            0%,
            100% {
                opacity: 1;
            }
            50% {
                opacity: 0.4;
            }
        }
        .player-bar .station-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 1;
            min-width: 0;
        }
        .player-bar .station-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 0.7rem;
            color: #fff;
            flex-shrink: 0;
            letter-spacing: -0.5px;
        }
        .player-bar .station-name {
            font-weight: 700;
            font-size: 0.9rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .player-bar .now-playing {
            font-size: 0.75rem;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 300px;
        }
        .player-bar .player-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-shrink: 0;
        }
        .player-bar .btn-control {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 2px solid var(--border);
            background: transparent;
            color: var(--text);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            font-size: 1rem;
        }
        .player-bar .btn-control:hover {
            border-color: var(--primary);
            background: var(--primary);
            color: #fff;
            box-shadow: 0 0 20px rgba(26, 86, 219, 0.4);
        }
        .player-bar .btn-play {
            width: 44px;
            height: 44px;
            background: var(--gradient);
            border: none;
            font-size: 1.2rem;
            color: #fff;
            box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5);
        }
        .player-bar .btn-play:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 28px rgba(124, 58, 237, 0.7);
        }
        .player-bar .volume-slider {
            width: 80px;
            accent-color: var(--primary);
            cursor: pointer;
        }
        @media (max-width: 768px) {
            .player-bar {
                padding: 0 0.75rem;
                height: 48px;
                gap: 0.5rem;
            }
            .player-bar .now-playing {
                display: none;
            }
            .player-bar .volume-slider {
                width: 50px;
            }
            .player-bar .station-name {
                font-size: 0.75rem;
            }
            .player-bar .btn-control {
                width: 32px;
                height: 32px;
                font-size: 0.8rem;
            }
            .player-bar .btn-play {
                width: 36px;
                height: 36px;
            }
            .player-bar .station-avatar {
                width: 30px;
                height: 30px;
                font-size: 0.6rem;
            }
        }

        /* ============ HEADER ============ */
        .site-header {
            background: #0d0d1f;
            border-bottom: 1px solid var(--border);
            padding: 0.75rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            position: relative;
            z-index: 999;
        }
        .site-header .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            flex-shrink: 0;
        }
        .site-header .logo img {
            height: 48px;
            width: auto;
        }
        .site-header .logo .logo-text {
            font-weight: 900;
            font-size: 1.4rem;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
        }
        .site-header .logo .logo-sub {
            font-size: 0.7rem;
            color: var(--text-muted);
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            list-style: none;
        }
        .main-nav li a {
            color: var(--text);
            text-decoration: none;
            padding: 0.6rem 1rem;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.9rem;
            transition: var(--transition);
            white-space: nowrap;
        }
        .main-nav li a:hover,
        .main-nav li.current-menu-item a {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }
        .btn-ouca-ao-vivo {
            background: var(--gradient);
            color: #fff !important;
            font-weight: 700 !important;
            padding: 0.6rem 1.4rem !important;
            border-radius: 50px !important;
            animation: glow-btn 2s infinite;
            box-shadow: 0 4px 18px rgba(124, 58, 237, 0.5);
        }
        @keyframes glow-btn {
            0%,
            100% {
                box-shadow: 0 4px 18px rgba(124, 58, 237, 0.5);
            }
            50% {
                box-shadow: 0 6px 30px rgba(124, 58, 237, 0.9);
            }
        }
        .btn-ouca-ao-vivo:hover {
            transform: translateY(-2px);
        }
        .hamburger {
            display: none;
            background: none;
            border: none;
            color: #fff;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
        }
        @media (max-width: 1024px) {
            .hamburger {
                display: block;
            }
            .main-nav {
                position: fixed;
                top: 0;
                right: -100%;
                width: 280px;
                height: 100vh;
                background: #0d0d1f;
                flex-direction: column;
                padding: 5rem 1.5rem 2rem;
                gap: 0.5rem;
                transition: right 0.35s ease;
                z-index: 998;
                border-left: 1px solid var(--border);
                overflow-y: auto;
            }
            .main-nav.active {
                right: 0;
            }
            .main-nav li a {
                display: block;
                padding: 0.8rem 1rem;
                font-size: 1rem;
            }
            .overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.7);
                z-index: 997;
            }
            .overlay.active {
                display: block;
            }
        }
        @media (max-width: 480px) {
            .site-header {
                padding: 0.5rem 1rem;
            }
            .site-header .logo img {
                height: 36px;
            }
            .site-header .logo .logo-text {
                font-size: 1.1rem;
            }
        }

        /* ============ HERO / SLIDER ============ */
        .hero-section {
            position: relative;
            overflow: hidden;
            min-height: 420px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #0d0d1f 0%, #151530 50%, #0d0d1f 100%);
        }
        .hero-slider {
            width: 100%;
            max-width: 1200px;
            padding: 2rem;
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .hero-slider::-webkit-scrollbar {
            display: none;
        }
        .hero-slide {
            scroll-snap-align: start;
            flex: 0 0 100%;
            max-width: 100%;
            background: var(--bg-card);
            border-radius: var(--radius);
            overflow: hidden;
            display: flex;
            align-items: center;
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            min-height: 300px;
        }
        @media (min-width: 768px) {
            .hero-slide {
                flex: 0 0 calc(50% - 1rem);
                max-width: calc(50% - 1rem);
            }
        }
        @media (min-width: 1024px) {
            .hero-slide {
                flex: 0 0 calc(33.333% - 1rem);
                max-width: calc(33.333% - 1rem);
            }
        }
        .hero-slide .slide-img {
            width: 40%;
            min-height: 300px;
            background: var(--gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            flex-shrink: 0;
        }
        .hero-slide .slide-content {
            padding: 1.5rem;
            flex: 1;
        }
        .hero-slide .slide-tag {
            display: inline-block;
            background: var(--accent);
            color: #000;
            font-weight: 700;
            font-size: 0.7rem;
            padding: 0.3rem 0.8rem;
            border-radius: 50px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.75rem;
        }
        .hero-slide h3 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #fff;
        }
        .hero-slide p {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 1rem;
        }
        .hero-slide .btn-slide {
            display: inline-block;
            padding: 0.5rem 1.2rem;
            border-radius: 50px;
            background: var(--primary);
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            transition: var(--transition);
        }
        .hero-slide .btn-slide:hover {
            background: var(--primary-hover);
        }
        @media (max-width: 600px) {
            .hero-slide {
                flex-direction: column;
                min-height: auto;
            }
            .hero-slide .slide-img {
                width: 100%;
                min-height: 160px;
                font-size: 2rem;
            }
            .hero-section {
                min-height: auto;
            }
        }

        /* ============ SEÇÕES GERAIS ============ */
        .section-title {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .section-title::before {
            content: '';
            width: 6px;
            height: 28px;
            background: var(--gradient);
            border-radius: 3px;
            flex-shrink: 0;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }
        @media (max-width: 480px) {
            .container {
                padding: 1.5rem 1rem;
            }
            .section-title {
                font-size: 1.2rem;
            }
        }

        /* ============ GRADE DE PROGRAMAÇÃO ============ */
        .programacao-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.25rem;
        }
        .programa-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 1.25rem;
            border: 1px solid var(--border);
            transition: var(--transition);
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            cursor: pointer;
        }
        .programa-card:hover {
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }
        .programa-card .prog-hora {
            background: var(--gradient);
            color: #fff;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 0.35rem 0.8rem;
            border-radius: 50px;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .programa-card .prog-info h4 {
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.25rem;
        }
        .programa-card .prog-info p {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 0;
        }
        .programa-card.ao-vivo {
            border-color: #ef4444;
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
            position: relative;
        }
        .programa-card.ao-vivo::after {
            content: 'AO VIVO';
            position: absolute;
            top: -8px;
            right: 12px;
            background: #ef4444;
            color: #fff;
            font-size: 0.6rem;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 50px;
            letter-spacing: 0.1em;
            animation: pulse-live 1.5s infinite;
        }
        @media (max-width: 480px) {
            .programacao-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============ NOTÍCIAS ============ */
        .noticias-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.25rem;
        }
        .noticia-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid var(--border);
            transition: var(--transition);
        }
        .noticia-card:hover {
            border-color: var(--primary);
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }
        .noticia-card .noticia-thumb {
            width: 100%;
            height: 180px;
            background: var(--gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            opacity: 0.8;
        }
        .noticia-card .noticia-body {
            padding: 1.25rem;
        }
        .noticia-card .noticia-data {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .noticia-card h4 {
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            margin: 0.4rem 0;
            line-height: 1.3;
        }
        .noticia-card p {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 0;
        }
        @media (max-width: 480px) {
            .noticias-grid {
                grid-template-columns: 1fr;
            }
            .noticia-card .noticia-thumb {
                height: 140px;
            }
        }

        /* ============ BANNER PUBLICIDADE ============ */
        .banner-ad {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 2rem;
            text-align: center;
            border: 2px dashed var(--border);
            color: var(--text-muted);
            font-size: 0.9rem;
            letter-spacing: 0.05em;
            transition: var(--transition);
        }
        .banner-ad:hover {
            border-color: var(--primary);
            color: #fff;
        }

        /* ============ FOOTER ============ */
        .site-footer {
            background: #0a0a16;
            border-top: 1px solid var(--border);
            padding: 3rem 2rem 1.5rem;
        }
        .footer-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }
        .footer-col h4 {
            color: #fff;
            font-weight: 700;
            margin-bottom: 1rem;
            font-size: 1rem;
        }
        .footer-col p,
        .footer-col a {
            color: var(--text-muted);
            font-size: 0.85rem;
            text-decoration: none;
            display: block;
            margin-bottom: 0.4rem;
            transition: var(--transition);
        }
        .footer-col a:hover {
            color: #fff;
            padding-left: 4px;
        }
        .social-icons {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
        }
        .social-icons a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-card);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            transition: var(--transition);
            border: 1px solid var(--border);
        }
        .social-icons a:hover {
            background: var(--gradient);
            border-color: transparent;
            transform: translateY(-3px);
            padding-left: 0 !important;
        }
        .footer-bottom {
            text-align: center;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            font-size: 0.75rem;
            color: var(--text-muted);
            max-width: 1200px;
            margin: 0 auto;
        }
        @media (max-width: 480px) {
            .site-footer {
                padding: 2rem 1rem 1rem;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }

        /* ============ PÁGINAS INTERNAS ============ */
        .page-content,
        .single-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
            background: var(--bg-card);
            border-radius: var(--radius);
            border: 1px solid var(--border);
        }
        .page-content h1,
        .single-content h1 {
            font-size: 2rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 1rem;
        }
        .page-content p,
        .single-content p {
            color: var(--text-muted);
            margin-bottom: 1rem;
            line-height: 1.8;
        }

        /* ============ BOTÃO WHATSAPP FLUTUANTE ============ */
        .whatsapp-float {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 999;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #25d366;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            color: #fff;
            box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
            transition: var(--transition);
            text-decoration: none;
            animation: bounce-wa 2s infinite;
        }
        @keyframes bounce-wa {
            0%,
            100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 32px rgba(37, 211, 102, 0.7);
        }

        /* ============ SCROLL TO TOP ============ */
        .scroll-top {
            position: fixed;
            bottom: 90px;
            right: 24px;
            z-index: 998;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--bg-card);
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            color: #fff;
            transition: var(--transition);
            opacity: 0;
            pointer-events: none;
        }
        .scroll-top.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .scroll-top:hover {
            background: var(--primary);
            border-color: var(--primary);
        }

        /* ============ UTILITÁRIOS ============ */
        .text-accent {
            color: var(--accent);
        }
        .text-muted {
            color: var(--text-muted);
        }
        .mt-2 {
            margin-top: 2rem;
        }
        .mb-2 {
            margin-bottom: 2rem;
        }

        /* ============ FORMULÁRIO DE CONTATO ============ */
        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 0.8rem 1rem;
            border-radius: 8px;
            border: 1px solid var(--border);
            background: #0d0d1f;
            color: #fff;
            font-family: inherit;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            transition: var(--transition);
        }
        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.2);
        }
        .contact-form textarea {
            min-height: 120px;
            resize: vertical;
        }
        .btn-submit {
            background: var(--gradient);
            color: #fff;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            font-size: 0.9rem;
            transition: var(--transition);
            letter-spacing: 0.03em;
        }
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(124, 58, 237, 0.5);
        }
    </style>
</head>
<body>

    <!-- ==================== PLAYER BAR ==================== -->
    <div class="player-bar" id="playerBar">
        <div class="live-indicator">
            <span class="live-dot"></span>
            <span class="live-text">Ao Vivo</span>
        </div>
        <div class="station-info">
            <div class="station-avatar">FM</div>
            <div>
                <div class="station-name">Nova FM 89.7</div>
                <div class="now-playing" id="nowPlaying">🎵 Tocando agora: Seu programa favorito</div>
            </div>
        </div>
        <div class="player-controls">
            <button class="btn-control" title="Anterior" onclick="alert('Voltar')">⏮</button>
            <button class="btn-control btn-play" id="btnPlay" title="Play/Pause" onclick="togglePlay()">▶</button>
            <button class="btn-control" title="Próximo" onclick="alert('Avançar')">⏭</button>
            <span style="color:#fff;font-size:0.8rem;">🔊</span>
            <input type="range" class="volume-slider" min="0" max="100" value="75" title="Volume" oninput="updateVolume(this.value)">
        </div>
    </div>

    <!-- ==================== HEADER ==================== -->
    <header class="site-header" id="siteHeader">
        <a href="#" class="logo">
            <div style="width:48px;height:48px;border-radius:12px;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:1.2rem;">NF</div>
            <div>
                <div class="logo-text">Nova FM</div>
                <div class="logo-sub">89.7 MHz • MS</div>
            </div>
        </a>
        <button class="hamburger" onclick="toggleMenu()" aria-label="Menu">☰</button>
        <nav>
            <ul class="main-nav" id="mainNav">
                <li class="current-menu-item"><a href="#">Início</a></li>
                <li><a href="#">Programação</a></li>
                <li><a href="#">Notícias</a></li>
                <li><a href="#">Fotos</a></li>
                <li><a href="#">Promoções</a></li>
                <li><a href="#">Contato</a></li>
                <li><a href="#" class="btn-ouca-ao-vivo">🎧 Ouça Ao Vivo</a></li>
            </ul>
        </nav>
    </header>
    <div class="overlay" id="overlay" onclick="toggleMenu()"></div>

    <!-- ==================== HERO SLIDER ==================== -->
    <section class="hero-section">
        <div class="hero-slider">
            <div class="hero-slide">
                <div class="slide-img">🎙️</div>
                <div class="slide-content">
                    <span class="slide-tag">Destaque</span>
                    <h3>Manhã Show com Roberto</h3>
                    <p>De segunda a sexta, das 6h às 10h. Muita música, notícias e diversão!</p>
                    <a href="#" class="btn-slide">Saiba Mais →</a>
                </div>
            </div>
            <div class="hero-slide">
                <div class="slide-img">🏆</div>
                <div class="slide-content">
                    <span class="slide-tag">Promoção</span>
                    <h3>Concurso Cultural</h3>
                    <p>Participe e concorra a prêmios incríveis. Fique ligado na programação!</p>
                    <a href="#" class="btn-slide">Participar →</a>
                </div>
            </div>
            <div class="hero-slide">
                <div class="slide-img">📻</div>
                <div class="slide-content">
                    <span class="slide-tag">Novidade</span>
                    <h3>App Nova FM</h3>
                    <p>Baixe nosso aplicativo e ouça a rádio onde estiver. Disponível para Android e iOS.</p>
                    <a href="#" class="btn-slide">Baixar App →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== PROGRAMAÇÃO ==================== -->
    <section class="container">
        <h2 class="section-title">Grade de Programação</h2>
        <div class="programacao-grid">
            <div class="programa-card ao-vivo">
                <span class="prog-hora">06h - 10h</span>
                <div class="prog-info">
                    <h4>Manhã Show</h4>
                    <p>Com Roberto Carlos. Música, notícias e interação ao vivo.</p>
                </div>
            </div>
            <div class="programa-card">
                <span class="prog-hora">10h - 13h</span>
                <div class="prog-info">
                    <h4>Hits do Meio-Dia</h4>
                    <p>Os maiores sucessos do momento com a DJ Mariana.</p>
                </div>
            </div>
            <div class="programa-card">
                <span class="prog-hora">13h - 16h</span>
                <div class="prog-info">
                    <h4>Tarde Nova</h4>
                    <p>Música boa e informação com Pedro Alves.</p>
                </div>
            </div>
            <div class="programa-card">
                <span class="prog-hora">16h - 19h</span>
                <div class="prog-info">
                    <h4>Drive Time</h4>
                    <p>O melhor da música para o fim de tarde com Lucas Mendes.</p>
                </div>
            </div>
            <div class="programa-card">
                <span class="prog-hora">19h - 22h</span>
                <div class="prog-info">
                    <h4>Noite Premium</h4>
                    <p>Flashback, românticas e muito mais com a locutora Carla.</p>
                </div>
            </div>
            <div class="programa-card">
                <span class="prog-hora">22h - 00h</span>
                <div class="prog-info">
                    <h4>Madrugada Nova</h4>
                    <p>Música eletrônica e sets especiais com DJ Bruno.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== BANNER PUBLICIDADE ==================== -->
    <div class="container">
        <div class="banner-ad">
            📢 Espaço Publicitário — Anuncie aqui! • Contato: comercial@novafm.com.br
        </div>
    </div>

    <!-- ==================== ÚLTIMAS NOTÍCIAS ==================== -->
    <section class="container">
        <h2 class="section-title">Últimas Notícias</h2>
        <div class="noticias-grid">
            <article class="noticia-card">
                <div class="noticia-thumb">📰</div>
                <div class="noticia-body">
                    <span class="noticia-data">15 de Janeiro, 2025</span>
                    <h4>Nova FM celebra 10 anos no ar com grande evento</h4>
                    <p>Festa reuniu ouvintes e artistas locais em noite memorável.</p>
                </div>
            </article>
            <article class="noticia-card">
                <div class="noticia-thumb">🎤</div>
                <div class="noticia-body">
                    <span class="noticia-data">12 de Janeiro, 2025</span>
                    <h4>Entrevista exclusiva com a banda Tribo da Lua</h4>
                    <p>Grupo falou sobre novo álbum e turnê nacional.</p>
                </div>
            </article>
            <article class="noticia-card">
                <div class="noticia-thumb">🏅</div>
                <div class="noticia-body">
                    <span class="noticia-data">08 de Janeiro, 2025</span>
                    <h4>Ouvinte ganha carro zero km em promoção</h4>
                    <p>Maria Silva, de Campo Grande, foi a grande vencedora.</p>
                </div>
            </article>
        </div>
    </section>

    <!-- ==================== CONTATO RÁPIDO ==================== -->
    <section class="container">
        <h2 class="section-title">Fale Conosco</h2>
        <div class="page-content">
            <form class="contact-form" onsubmit="event.preventDefault(); alert('Mensagem enviada com sucesso! (Simulação)');">
                <input type="text" placeholder="Seu nome" required>
                <input type="email" placeholder="Seu e-mail" required>
                <input type="tel" placeholder="Seu telefone">
                <textarea placeholder="Sua mensagem..." required></textarea>
                <button type="submit" class="btn-submit">Enviar Mensagem ✉️</button>
            </form>
        </div>
    </section>

    <!-- ==================== FOOTER ==================== -->
    <footer class="site-footer">
        <div class="footer-grid">
            <div class="footer-col">
                <h4>Nova FM 89.7</h4>
                <p>A rádio que toca o melhor para você! 24 horas no ar com música, notícias e entretenimento.</p>
                <div class="social-icons" style="margin-top:1rem;">
                    <a href="#" title="Facebook">📘</a>
                    <a href="#" title="Instagram">📷</a>
                    <a href="#" title="YouTube">▶️</a>
                    <a href="#" title="WhatsApp">💬</a>
                    <a href="#" title="Twitter">🐦</a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Links Rápidos</h4>
                <a href="#">Programação</a>
                <a href="#">Notícias</a>
                <a href="#">Galeria de Fotos</a>
                <a href="#">Promoções</a>
                <a href="#">Baixar App</a>
            </div>
            <div class="footer-col">
                <h4>Contato</h4>
                <p>📍 Rua Exemplo, 123 - Centro</p>
                <p>📞 (67) 99999-9999</p>
                <p>📧 contato@novafm.com.br</p>
                <p>🎧 Estúdio: (67) 3333-3333</p>
            </div>
            <div class="footer-col">
                <h4>Institucional</h4>
                <a href="#">Sobre Nós</a>
                <a href="#">Equipe</a>
                <a href="#">Trabalhe Conosco</a>
                <a href="#">Política de Privacidade</a>
                <a href="#">Anuncie</a>
            </div>
        </div>
        <div class="footer-bottom">
            © 2025 Nova FM 89.7 — Todos os direitos reservados. Desenvolvido com ❤️
        </div>
    </footer>

    <!-- ==================== WHATSAPP FLUTUANTE ==================== -->
    <a href="https://wa.me/5567999999999" class="whatsapp-float" target="_blank" title="Fale pelo WhatsApp" aria-label="WhatsApp">💬</a>

    <!-- ==================== SCROLL TO TOP ==================== -->
    <button class="scroll-top" id="scrollTop" onclick="window.scrollTo({top:0,behavior:'smooth'})" title="Voltar ao topo" aria-label="Voltar ao topo">⬆</button>

    <script>
        // ============ MENU MOBILE ============
        function toggleMenu() {
            document.getElementById('mainNav').classList.toggle('active');
            document.getElementById('overlay').classList.toggle('active');
        }

        // ============ PLAYER SIMULADO ============
        let isPlaying = false;
        const btnPlay = document.getElementById('btnPlay');
        const nowPlaying = document.getElementById('nowPlaying');

        function togglePlay() {
            isPlaying = !isPlaying;
            btnPlay.textContent = isPlaying ? '⏸' : '▶';
            if (isPlaying) {
                nowPlaying.textContent = '🎵 Tocando agora: Seu programa favorito';
                btnPlay.style.background = '#ef4444';
            } else {
                nowPlaying.textContent = '⏸ Pausado — Clique para ouvir';
                btnPlay.style.background = 'var(--gradient)';
            }
        }

        function updateVolume(val) {
            console.log('Volume:', val + '%');
        }

        // ============ SCROLL TO TOP VISIBILITY ============
        const scrollTopBtn = document.getElementById('scrollTop');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 400) {
                scrollTopBtn.classList.add('visible');
            } else {
                scrollTopBtn.classList.remove('visible');
            }
        });

        // ============ SIMULAÇÃO DE ATUALIZAÇÃO DE MÚSICA ============
        const musicas = [
            '🎵 Tocando agora: Tribo da Lua — Céu Azul',
            '🎵 Tocando agora: DJ Mariana — Sunset Mix',
            '🎵 Tocando agora: Banda Eclipse — Novo Amanhã',
            '🎵 Tocando agora: Flashback Anos 80 Especial',
            '🎵 Tocando agora: Hits do Momento — Top 10'
        ];
        let musicaIndex = 0;
        setInterval(() => {
            if (isPlaying) {
                musicaIndex = (musicaIndex + 1) % musicas.length;
                nowPlaying.textContent = musicas[musicaIndex];
            }
        }, 5000);

        console.log('🎧 Template WordPress Nova FM Style carregado com sucesso!');
        console.log('📁 Estrutura completa pronta para WordPress:');
        console.log('  - style.css (com cabeçalho de tema)');
        console.log('  - header.php');
        console.log('  - footer.php');
        console.log('  - index.php');
        console.log('  - front-page.php');
        console.log('  - functions.php');
        console.log('  - single.php, page.php, archive.php');
        console.log('  - js/player.js, js/main.js');
        console.log('  - css/responsive.css');
    </script>
</body>
</html>