.contenedor-canales {

    width: 90%;

    height: auto;

    margin: 140px auto;

    max-width: 60%;

    display: grid;

    grid-gap: 100px;

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: auto auto;

    grid-template-areas: "imagen-1 texto-canales"

                         "imagen-1 parrilla-canales";

}



.imagen-1 {

  grid-area: imagen-1;

  width: 100%;

  position: relative;

  display: inline-block;

}



.img-parrilla{

    width: 100%;

    height: 100%;

    display: block;

}



.texto-canales {

    grid-area: texto-canales;

    width: 100%;

    text-align: center;

    margin-bottom: -60px;

}



.contenedor-texto-canales{

    margin-top: 80px;

}



.parrafo-canales {

  font-size: 25px;

  font-family: 'arkibal_displayheavy';

  background: -webkit-linear-gradient(360deg, rgba(0,55,98,1) 45%, rgba(0,204,160,1) 60%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.parrilla-canales {

    grid-area: parrilla-canales;

    width: 100%;
	height: auto;

    margin: auto;

    justify-content: center;

    text-align: center;

}



.img-bn-canales{

    width: 100%;

    height: auto;

    margin: auto;

}





.contenedor-titulo-modal{

    text-align: center;

}



.titulo-modal-parrilla{

    text-align: center;

    font-size: 30px;

    border-bottom: 1px solid #bec3c9;

}



.contenedor-img-parrillas{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    background-color: #e5eaf0;

    border-radius: 30px;

    margin: 20px 10px 0 0;

}



.contenedor-img-parrillas img{

    max-width: 100%;

    height: auto;

    margin: 10px;

}



.img-parrilla-canales{

    width: 16%;

}



.btn-ver-parrilla{

    font-family: 'arkibal_display_ltlight';

    font-weight: bold;

    display: inline-block;

    padding: 10px 40px;

    background: #00365F;

    color: #fff;

    text-decoration: none;

    border-radius: 5px;

    transition: transform 0.3s; /* Agrega una transición al efecto transform */

    margin: 20px 20px 0 0;

    perspective: 1000px;

    border: none;

}



.btn-ver-parrilla:hover {

    transform: translateY(-10px); /* Aplica una traslación hacia arriba al pasar el mouse */

}





.nav-tabs-parrilla {

    list-style: none;

    display: flex;

    justify-content: center; /* Centra horizontalmente los elementos */

    margin-top: 20px;
    
    padding: 0;
}

  

.nav-tabs {

    margin: 0 auto; /* Centra la lista horizontalmente */

}

  

.nav-parrilla {

    background: none;

    color: #585c5f;

    font-family: 'arkibal_display_ltlight';

    font-weight: bold;

    border: none;

    padding: 0;

    transition: border-bottom-color 0.3s, color 0.3s; /* Agrega transición para suavizar los cambios */

}

  

/* Estilo para el botón activo */

.nav-parrilla.active {

    color: #00a29b; /* Cambia el color del texto al activo */

    border-bottom: 2px solid #00a29b; /* Agrega el borde inferior al activo */

}


@media (max-width: 1920px) {

    .contenedor-canales {
        width: 100%;
        max-width: 70%;
        grid-gap: 20px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas: "imagen-1 texto-canales" 
                             "imagen-1 parrilla-canales";
    }

    .texto-canales {
        margin-bottom: 0px;
    }

    .contenedor-texto-canales{
        margin-top: 0px;
    }

}


@media (max-width: 1440px) {



    .contenedor-canales {

        width: 100%;

        max-width: 70%;

        grid-gap: 20px;

        grid-template-columns: repeat(2, 1fr);

        grid-template-rows: auto auto;

        grid-template-areas: "imagen-1 texto-canales" 

                             "imagen-1 parrilla-canales";

    }



    .texto-canales {

        margin-bottom: 0px;

    }



    .contenedor-texto-canales{

        margin-top: 0px;

    }



}

  

@media (max-width: 1024px) {



    .contenedor-canales {

        width: 90%;

        max-width: 70%;

        grid-template-columns: repeat(1, 3fr);

        grid-template-rows: auto auto;

        grid-template-areas: "imagen-1" 

                             "texto-canales"

                             "parrilla-canales";

    }



    .nav-tabs-parrilla {

        flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias líneas */

        justify-content: space-between; /* Alinea los elementos a lo largo del contenedor */

    }



    .nav-item-parrilla {

        width: calc(25% - 10px); /* Ancho del 25% del contenedor, con espacio entre elementos */

        text-align: center; /* Centra el texto */

        margin-bottom: 10px; /* Espacio entre elementos */

    }



}



/* Estilos para pantallas menores a 770px */

@media (max-width: 770px) {

    .nav-tabs-parrilla {

        flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias líneas */

        justify-content: space-between; /* Alinea los elementos a lo largo del contenedor */

    }



    .nav-item-parrilla {

        width: calc(25% - 10px); /* Ancho del 25% del contenedor, con espacio entre elementos */

        text-align: center; /* Centra el texto */

        margin-bottom: 10px; /* Espacio entre elementos */

    }

    .img-parrilla-canales{
        width: 25%;
    }


}





@media (max-width: 430px) {



    .contenedor-canales {

        width: 90%;

        max-width: 100%;

        grid-template-columns: repeat(1, 3fr);

        grid-template-rows: auto auto;

        grid-template-areas: "imagen-1" 

                             "texto-canales"

                             "parrilla-canales";

    }



    .nav-tabs-parrilla {

        justify-content: center; /* Centra los elementos en pantallas muy pequeñas */

    }



    .nav-item-parrilla {

        width: calc(50% - 10px); /* Ancho del 50% del contenedor, con espacio entre elementos */

    }

    .img-parrilla-canales{
        width: 40%;
    }



}