/*
Theme Name: BellaMusica
Theme URI:
Description: Tema diseñado por Oscar G. Trejo
Version:1.0
*/
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:'Montserrat', sans-serif;
    }

    body{
        background:#00002f;
        color:#fff;
        overflow-x:hidden;
    }

    header{
        height:100vh;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        background: #000031;
        background: linear-gradient(90deg,rgba(45, 46, 48, 1) 0%, rgba(35, 73, 130, 1) 50%, rgba(0, 0, 0, 1) 96%);
        /*background:radial-gradient(circle,#d7308a,#3e659d,#f6d549);*/
        background:url(./img/backgroundTop.png) ;
        background-size: cover;
        background-position: center;
        position:relative;
    }

    header h1{
        font-size:3rem;
        font-weight:800;
        letter-spacing:2px;
    }

    header p{
        margin-top:15px;
        font-size:1.2rem;
        opacity:0.8;
    }

    .live-indicator{
        margin-top:25px;
        padding:10px 20px;
        border-radius:50px;
        background:#ef4444;
        font-weight:600;
        animation:pulse 1.5s infinite;
        position: absolute;
        bottom: 10%;
    }

    @keyframes pulse{
        0%{box-shadow:0 0 0 0 rgba(239,68,68,0.7);}
        70%{box-shadow:0 0 0 15px rgba(239,68,68,0);}
        100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
    }

    section{
        padding:80px 10%;
        text-align:center;
    }
    #logoEmisora{ width:65%; }
    #logoEmisora img{ width:100%; }

    section h2{
        font-size:2rem;
        margin-bottom:20px;
    }

    section p{
        max-width:700px;
        margin:auto;
        line-height:1.6;
        opacity:0.85;
    }

    .player{
        margin-top:40px;
        position: absolute;
        bottom: 1%;
    }

    .player button{
        padding:15px 30px;
        border:none;
        border-radius:50px;
        font-size:1rem;
        font-weight:600;
        cursor:pointer;
        background:#3b82f6;
        color:#fff;
        transition:0.3s;
    }

    .player button:hover{
        background:#2563eb;
    }

    footer{
        padding:30px;
        text-align:center;
        background:#ea348e;
        font-size:0.9rem;
        opacity:0.7;
    }

    /* Animación fade */
    .fade-in{
        opacity:0;
        transform:translateY(20px);
        transition:all 0.8s ease;
    }

    .fade-in.show{
        opacity:1;
        transform:translateY(0);
        background-color: #000031;
    }

    @media(max-width:768px){
        header h1{
            font-size:2.2rem;
        }
        #logoEmisora{ width:150%;
            padding-top: 0;
            padding-bottom: 0;}
        .live-indicator{bottom: 19%;}
        .player{bottom: 10%;}
    }