:root {
  --netflix-color: black;
  --disney-color: #27348c;
  --primevideo-color: black;
  --max-color: #7020d9;
  --youtube-color: white;
  --movistarplay-color: #0ba9e0;
  --dgo-color: #011327;
  --spotify-color: #1ed760;
  --crunchyroll-color: #f7721e;
  --blimtv-color: #000000;
  --plex-color: #000000;
  --iptv-color: linear-gradient(to right, blue, orange);
  --magictv-color: #ff680b;
  --paramount-color: #1760fffa;
  --vixpremium-color: #ff6000;
  --clarovideo-color: white;
}



.netflixstl {
  background-color: var(--netflix-color);
}

.disneystl {
  background-color: var(--disney-color);
}

.primevideostl {
  background-color: var(--primevideo-color);
}

.maxstl {
  background-color: var(--max-color);
}

.youtubestl {
  background-color: var(--youtube-color);
}

.movistarplaystl {
  background-color: var(--movistarplay-color);
}

.dgostl {
  background-color: var(--dgo-color);
}

.spotifystl {
  background-color: var(--spotify-color);
}

.crunchyrollstl {
  background-color: var(--crunchyroll-color);
}

.blimtvstl {
  background-color: var(--blimtv-color);
}

.plexstl {
  background-color: var(--plex-color);
}

.iptvstl {
  background: var(--iptv-color);
}

.magictvstl {
  background-color: var(--magictv-color);
}

.paramountstl {
  background-color: var(--paramount-color);
}

.vixpremiumstl {
  background-color: var(--vixpremium-color);
}

.clarovideostl {
  background-color: var(--clarovideo-color);
}
/* Estilo para el botón de compra */
.buy-btn {
color: white;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    width: 132px;
    overflow: hidden;
    height: 131px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ajuste del color del texto para botones con fondo blanco */
.buy-btn.youtubestl,
.buy-btn.clarovideostl {
    color: black;
}

.body .buy-btns img {
width: 97%;
    z-index: 1;
        top: -33px;
    position: relative;
}

/* Contenedor de los botones */
.body .buy-btns {
display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.body .buy-btns button {
    position: relative;
    padding: 0; /* Asegúrate de que el padding sea cero si las imágenes llenan todo el botón */
    display: inline-flex; /* Asegúrate de que los botones sean inline-flex */
    justify-content: center; /* Centra el contenido del botón horizontalmente */
    align-items: center; /* Centra el contenido del botón verticalmente */
}

.buy-btns span {
position: absolute;
    width: 100%;
    height: 40px;
    font-family: calibri, sans-serif;
    font-size: 41px;
    font-weight: bold;
    /* display: inline; */
    bottom: 23px;
    
}



@media (max-width: 750px) {
    
    
.buy-btn {
 
    width: 109px;
    overflow: hidden;
    height: 114px;
    
}


.body .buy-btns {
   
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: center;
}
    
    .buy-btns span {
    position: absolute;
 
    font-family: calibri, sans-serif;
    font-size: 33px;
    font-weight: bold;
    /* display: inline; */
    bottom: 20px;
}
    
  }