.wrapper,
.row {
  *zoom: 1; }
  .wrapper:before,
  .row:before, .wrapper:after,
  .row:after {
    content: " ";
    display: table; }
  .wrapper:after,
  .row:after {
    clear: both; }

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.row:before, .row:after {
  display: none !important; }
  
body {
  overflow-x: hidden;
}

#preloader {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 10001; }

#loading-animation {
  width: 64px;
  height: 64px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url("../images/loading-animation.html");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  margin-left: -32px;
  margin-top: -32px; }
  #loading-animation .lds-ring {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px; }
  #loading-animation .lds-ring div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #fff;
    border-radius: 50%;
    -webkit-animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent; }
  #loading-animation .lds-ring div:nth-child(1) {
    -webkit-animation-delay: -0.45s;
    animation-delay: -0.45s; }
  #loading-animation .lds-ring div:nth-child(2) {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s; }
  #loading-animation .lds-ring div:nth-child(3) {
    -webkit-animation-delay: -0.15s;
    animation-delay: -0.15s; }

@-webkit-keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes lds-ring {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

body {
  background: url("../img/topBg.png") no-repeat center top #df0002;
  color: #666666;
  font-family: "Open Sans", sans-serif;
  overflow-x: hidden;
  background-size: 100% auto; }

a {
  color: #1dc8cd;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }

a:hover,
a:active,
a:focus {
  color: #1dc9ce;
  outline: none;
  text-decoration: none; }

p {
  padding: 0;
  margin: 0 0 30px 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0; }



/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  left: 0;
  top: 0;
  right: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 997; }


.redes ul {
  list-style: none;
  margin-bottom: 0; }
  .redes ul li {
    display: inline-block; }

.redes a {
  color: #fff;
  margin-left: 5px; }
  .redes a i {
    color: #fff;
    font-size: 35px;
    line-height: 55px; }
    .redes a i:hover {
      opacity: .7; }

/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
#intro {
  margin-top: -40px; }
  #intro img {
    margin: 0 auto; }
  #intro .container-fluid {
    padding-right: 0;
    padding-left: 0; }



.textoTelefonos {
  color: #fff;
  top: -65px;
  font-size: 10px; }
  .textoTelefonos a {
    color: #fff; }
    .textoTelefonos a:hover {
      text-decoration: underline; }

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
/* Section01
--------------------------------*/

#section01 {
  background: url("../img/topCurva.png") no-repeat center top transparent;
  background-size: 100% auto;
  margin-top: -70px;
  padding: 70px 0 20px; }

/* Section02
--------------------------------*/
#section02 {
  background: url("../img/btnCurva.png") no-repeat center top transparent;
  background-size: 100% auto;
  padding-top: 60px; }
  
/* Cambiar el color y tamaño del título "Guía de Canales" */
#main h2 {
    color: #ffffff !important; /* Cambiar a blanco */
    font-weight: bold !important; /* Hacer negrita */
    font-size: 24px; /* Tamaño por defecto para pantallas móviles */
}

/* Ajustar tamaño del texto para pantallas medianas (tabletas y pequeñas pantallas) */
@media (min-width: 768px) {
    #main h2 {
        font-size: 36px; /* Tamaño del texto para pantallas medianas */
    }
}

/* Ajustar tamaño del texto para pantallas grandes (desktops) */
@media (min-width: 1200px) {
    #main h2 {
        font-size: 48px; /* Tamaño del texto para pantallas grandes */
    }
}

/* Estilo base para los botones */
.filterBtn {
    border-radius: 25px !important; /* Bordes redondeados */
    background-color: transparent !important; /* Botones transparentes cuando no están seleccionados */
    color: #ffffff !important; /* Color del texto blanco */
    padding: 10px 20px !important;
    border: 1px solid #ffffff !important; /* Borde de 1px blanco */
    margin: 5px !important;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    outline: none !important; /* Elimina el borde de enfoque predeterminado */
}

/* Estilo cuando el cursor pasa sobre el botón */
.filterBtn:hover {
    background-color: #ff4d4d !important; /* Color de fondo en hover (rojo suave) */
    color: #ffffff !important; /* Texto blanco en hover */
}

/* Estilo cuando el botón está seleccionado */
.filterBtn.active, .filterBtn.selected {
    background-color: #ff1a1a !important; /* Color de fondo al estar seleccionado (rojo oscuro) */
    color: #ffffff !important; /* Color del texto blanco */
}

/* Eliminar el efecto de "focus" que agrega el borde azul */
.filterBtn:focus {
    outline: none !important; /* Asegura que no aparezca un borde azul al hacer clic en los botones */
    box-shadow: none !important; /* También elimina cualquier sombra o efecto adicional */
}

/* Estilo para el select con bordes redondeados y flecha visible */
#categorySelect {
    border-radius: 20px; /* Bordes redondeados */
/*    padding: 10px; /* Espacio interno */
    border: 0.5px solid #e0e0e0; /* Borde más claro y más delgado */
/*    background-color: #fff; /* Fondo blanco */
/*    color: inherit; /* El texto tomará el color por defecto */

    max-width: 330px; /* Limita el ancho máximo del select */
    margin: 0 auto; /* Centrar el select horizontalmente */
    display: block; /* Asegura que el select se trate como un bloque */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Flecha hacia abajo personalizada usando SVG */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 10 6%22%3E%3Cpath fill%3D%22currentColor%22 d%3D%22M0 0l5 6 5-6H0z%22/%3E%3C/svg%3E'); /* Flecha SVG que toma el color del texto */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Posición de la flecha */
    background-size: 10px; /* Tamaño de la flecha */
    padding-right: 50px; /* Espacio para la flecha */
}

/* Elimina el borde azul y la sombra cuando se hace foco */
#categorySelect:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0.5px solid #e0e0e0; /* Borde más claro y más delgado */
}
/* Contenedor de las tarjetas */
#channelsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; /* Ajustar espacio entre tarjetas */
  padding: 10px; /* Añadir padding para crear espacio alrededor del contenedor */
  margin-right: 15px; /* Ajustar margen derecho */
  box-sizing: border-box;
}

/* Estilo general de las tarjetas */
.card {
  text-align: center;
  border: 1px solid #ddd;
  aspect-ratio: 1; /* Relación de aspecto 1:1 para hacer la tarjeta cuadrada */
/*  display: flex;
/*  flex-direction: column; /* Asegura que los elementos estén en una columna */
/*  justify-content: space-between; /* Espacio uniforme entre los elementos */
  align-items: center;
  margin: 15px auto;
  box-sizing: border-box;

}

/* Ajustar la imagen de la tarjeta */
.card-img-top {
  object-fit: contain;
  margin: 0 auto;
}

/* Ajuste del contenedor del nombre del canal */
.card-body {
  padding: 10px;
  bottom: 0;
}

/* Ajuste del título de la tarjeta */
.card-title {

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  text-align: center;
  word-break: break-word;
  box-sizing: border-box;
}

/* Media queries para ajustar la cantidad de tarjetas según el tamaño de pantalla */

/* Pantallas pequeñas (teléfonos) */
@media only screen and (max-width: 575.98px) {
  #channelsContainer {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 4px;
  }
  .card {
    padding: 0px;
  }
  .card-title {
    font-size: 0.70rem;
  }
}

/* Pantallas medianas (tabletas) */
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
  #channelsContainer {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 6px;
  }
  .card {
    padding: 0px;
  }
  .card-title {
    font-size: 0.80rem;
  }
}

/* Pantallas grandes (portátiles y desktops) */
@media only screen and (min-width: 768px) and (max-width: 1199.98px) {
  #channelsContainer {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
  }
  .card {
    padding: 0px;
  }
  .card-title {
    font-size: 0.90rem;
  }
}

/* Pantallas extra grandes (desktops grandes) */
@media only screen and (min-width: 1200px) {
  #channelsContainer {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
  }
  .card {
    padding: 0px;
  }
  .card-title {
    font-size: 1rem;
  }
}

/* Pantallas extra grandes (desktops grandes) */
@media only screen and (min-width: 1600px) {
  #channelsContainer {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
  }
  .card {
    padding: 0px;
  }
  .card-title {
    font-size: 1.1rem;
  }
}


#section03 {
  padding: 50px 0 40px; }
  
.logoButton {
    margin-top: 20px;
}  

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  padding: 10px 0 20px;
  color: #fff;
  font-size: 10px; }

#footer .credits {
  font-size: 13px;
  color: #888; }

#footer .footer-links a {
  color: #666;
  padding-left: 15px; }

#footer .footer-links a:first-child {
  padding-left: 0; }

#footer .footer-links a:hover {
  color: #1dc8cd; }

@media only screen and (min-width: 576px) {
  .textoTelefonos {
    top: -115px;
    font-size: 12px; }
  #section01 {
    margin-top: -110px;
    padding: 120px 0 20px; }
  #section02 {
    padding-top: 140px; }
  #footer {
    font-size: 12px; } }

@media only screen and (min-width: 768px) {
  #header #logo h1 {
    font-size: 36px;
    margin: -4px 0 0 0; }
  #header #logo img {
    max-height: none; }
  #intro h2 {
    font-size: 48px;
    line-height: 56px; }
  #intro p {
    font-size: 24px; }
  #section01 {
    margin-top: -110px;
    padding: 120px 0 20px; }
  #section02 {
    padding-top: 140px; }
  .textoTelefonos {
    top: -75px;
    font-size: 12px; } }

@media only screen and (min-width: 992px) {
  #intro {
    background-attachment: fixed; }
  #section01 {
    margin-top: -160px;
    padding: 160px 0 20px; }
  .textoTelefonos {
    top: -105px;
    font-size: 13px; }
  #section02 {
    padding-top: 170px; } }

@media only screen and (min-width: 1200px) {
  #section01 {
    margin-top: -190px;
    padding: 200px 0 20px; }
  .textoTelefonos {
    top: -125px;
    font-size: 12px; }
  #section02 {
    padding-top: 200px; } }

@media only screen and (min-width: 1600px) {
  #section01 {
    margin-top: -150px;
    padding: 300px 0 20px; } }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /* 

EXAMPLE 
Let's say you have an image and you need to make sure it looks ok
on retina screens. Let's say we have an icon which dimension are
24px x 24px. In your regular stylesheets, it would look something
like this:

.icon {
	width: 24px;
	height: 24px;
	background: url(img/test.png) no-repeat;
}

For retina screens, we have to make some adjustments, so that image
doesn't look blurry. So, taking into account the image above and the
dimensions, this is what we would put in our retina stylesheet:

.icon {
	background: url(img/test@2x.png) no-repeat;
	background-size: 24px 24px;
}

So, you would create the same icon, but at double the resolution, meaning 
it would be 48px x 48px. You'd name it the same, but with a @2x at the end
(this is pretty standard practice). Set the background image so it matches
the original dimensions and you are good to go. 

*/ }

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

a,
img {
  outline: 0px none transparent !important; }

img {
  width: auto;
  max-width: 100%;
  height: auto !important; }

.wrapper {
  width: 100%;
  margin: 0 auto; }

[class*='column-'] {
  float: left;
  padding: 1em;
  width: 100%;
  min-height: 1px; }