body {
    background-color: #131313;
    font-family: gobold;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    color: #ffffff;
}
.title{
    font-size: 3.8rem!important;
    margin-bottom: 2.5rem;
}
.txt-shadow{
text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.hero-home{
    background-image: url('https://cdn.salvameradio.com/website/salvameradio-home-header.jpg');
    min-height: 600px;
    align-items: center;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    color: #ffffff;
    text-align: center;
    padding: 0px 50px;
}
#live-contents{
    display: flex;
    align-items: center;
}
.live-content{
    display: flex;
    gap: 30px;
    align-items: center;
}
.button-small{
    background: #00ff01;
    color: #232323;
    text-decoration: none;
    display: block;
    padding: 10px 20px;
    border-radius: 8px;
    text-transform: uppercase;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                background-color 0.3s ease;
}
.button-large {
    background: #00ff01;
    color: #232323;
    text-decoration: none;
    display: block;
    padding: 15px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                background-color 0.3s ease;
}

.button-large:hover, .button-small:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 255, 1, 0.4);
}

.button-large::before, .button-small::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.5),
        transparent
    );
    transition: left 0.6s ease;
}

.button-large:hover::before {
    left: 120%;
}

.button-large:active, .button-small:active {
    transform: translateY(-1px) scale(0.98);
}

.shadow-border{
box-shadow: 0 0 18px rgb(0 255 3 / 45%);
}
.image-br{
    border-radius: 12px;
}

.section-padding{
    padding-top: 80px;
    padding-bottom: 50px;
}

/******* Live */
.broadcaster-social{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.invert-image{
filter: invert(1);
}


/****** parrilla ****/
.program-shcedule{
    padding-top: 30px;
}
.week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.week-grid > div {
    position: relative;
    padding: 50px 1rem;
    border-radius: 12px;
    background: #050505;
    color: #fff;
   
    border: 1px solid #00ff01;

    animation: neonPulse 2.5s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(0,255,1,.3),
            0 0 10px rgba(0,255,1,.15);
    }
    50% {
        box-shadow:
            0 0 8px rgba(0,255,1,.7),
            0 0 20px rgba(0,255,1,.4);
    }
}

@keyframes redNeonPulse {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(255, 40, 40, 0.30),
            0 0 10px rgba(255, 40, 40, 0.15);
    }
    50% {
        box-shadow:
            0 0 8px rgba(255, 40, 40, 0.70),
            0 0 20px rgba(255, 40, 40, 0.40);
    }
}


/********** Programs */
.program-card{
    height:100%;
    background: #111;
    /*border: 1px solid rgb(0 255 4);*/
    overflow: hidden;
    transition: .25s ease;
    padding: 0px !important;
    border-radius: 10px;
    padding: 0px!important;
}

.program-card:hover{
    transform:translateY(-4px);
}

.program-card__image img{
    width:100%;
    object-fit:cover;
    display:block;
}

.program-card__body{
    padding:1.50rem;
    border-radius: 0px 0px 15px 15px;
     border-radius: 0px 0px 15px 15px;
    border-bottom: solid 1px #00ff0424;
    border-left: solid 1px #00ff0424;
    border-right: solid 1px #00ff0424;
}



.program-card__broadcasters{
    font-size:.9rem;
    min-height:48px;
    margin-bottom:1rem;
}

.program-card__footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
}

.program-card__schedule{
    font-size:.9rem;
}


/**** Channels */
.radio-card{
    background:#111;
    border-radius:12px;
    overflow:hidden;
    height:100%;
}

.radio-card__cover{
    width:100%;
    object-fit:cover;
    display:block;
}

.radio-card__body{
    padding:0px;
}
:root{
    --plyr-color-main:#1DB954;
}

.plyr--audio{
    background:#181818;
    color:#fff;
    border-radius: 0px 0px 12px 12px;
}

.plyr__controls{
    background:#181818;
    border-radius: 0px 0px 15px 15px;
    border-bottom: solid 1px #00ff0424;
    border-left: solid 1px #00ff0424;
    border-right: solid 1px #00ff0424;
}
.plyr--audio .plyr__controls {
    background: #111 !important;
}
.plyr__control svg {
    fill: #ffffff!important;
    display: block;
    height: 18px;
    height: var(--plyr-control-icon-size,18px);
    pointer-events: none;
    width: 18px;
    width: var(--plyr-control-icon-size,18px);
}
.footer-alink{
  color:#ffffff;
}
.alink, .alink:hover{
text-decoration: none;
}
@media only screen and (max-width: 1200px) {
.button-small {
    padding: 10px 8px;
}
}

@media only screen and (max-width: 991px) {
.live-buttons{
margin-top: 40px;
}
}

@media only screen and (max-width: 767px) {
.radio-card{
    margin-bottom: 20px;
}
}

@media only screen and (max-width: 600px) {
.live-program-poster{
width: 100%;
}
.live-content {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-direction: column;
    text-align:center;
}
.broadcaster-social {
    justify-content: center;
}
.button-large {
    padding: 10px 10px;
    font-size: 18px;
}
.live-buttons{
margin-top: 20px;
}
.program-card__footer{
        flex-direction: column;
        align-items: center;
        text-align: center;
}
.mobile-full{
    width: 100%;
}
.program-card__broadcasters{
     text-align: center;
}
}


@media (max-width: 576px) {
    .navbar-brand img {
        width: 120px;
    }
    .nav-social-icon {
        width: 26px;
    }
}

@media only screen and (max-width: 487px) {
.hero-home {
    padding: 80px 20px 0px 20px;
}
.section-padding {
    padding-top: 40px;
    padding-bottom: 40px;
}
.section-live{
padding-top: 40px;
padding-bottom: 40px;
width: 80%;
margin: auto;
}
.week-grid > div {
    padding: 20px 1rem;
}
 .button-small {
    padding: 10px 20px;
    }
    .program-card{
        margin-bottom: 0px;
    }
}

@media only screen and (max-width: 430px) {
   .title {
    font-size: 2.8rem!important;
    margin-bottom: 2.5rem;
    } 
    .app-store-image{
        width: 120px;
    }
    .section-live{
width: 90%;
margin: auto;
}
   
}