/*------------------- General -------------------*/
/* #stream {
    font-family: Arial, sans-serif; 
    font-family: Muli; 
    min-width: 320px;
    background-color: #dbf1e9;
    background-image: url(../assets/img/fondo-selva.webp);
         background-size: cover;
        background-position: center;
        background-attachment: fixed;
}

#stream .cal-sans-regular {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
#stream .let1 {
  font-family: 'Zen Dots';
  font-style: normal;
}

#stream .selva{
    background-image: url(../assets/img/fondo-teclado.webp);
    background-size: cover;
    background-position: center;
    
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    padding-top: 104px;
    }

#stream .selva2{
  padding-top: 140px;
}
#stream .selva-row{
   max-width: 1088px;
   margin: 0 auto;
} */

/*------------------- nav -------------------*/
 /* #stream .navbar{
background: #1e462b !important;
}
#stream .navbar .navbar-nav .nav-link {
padding-right: 20px;
padding-left: 20px;
}
#stream .navbar-brand{margin-left: 115px; letter-spacing: 1.2px;}
#stream .nav-link{
    color: #dfdfdf;
}
#stream .nav-link i {
  font-size: 0.8rem;
  padding-right: 5px;
}
#stream .caja-logo {
    max-width: 100px;max-height: 100px;position: fixed; top:0px; z-index: 1031;
}
#stream .caja-logo img {
    max-width: 100px; max-height: 100px;
} */

/*------------------- hero -------------------*/

/* #stream #hero {margin-top: 120px;}
#stream .caja-tres-botones{translate: 0 50%;}
#stream .tres-botones img{max-width: 273px; filter: drop-shadow(0 0 1px #7d7d7d) drop-shadow(0 0 5px #7d7d7d) drop-shadow(0 0 10px #7d7d7d);}
#stream .tres-botones a{display: contents;}
#stream .tres-botones .boton-h{max-width: 100px;}
#stream .boton-hero {
    max-height: 60px;
    color: #2d7034;
    display: flex;
    width: fit-content;
    align-items: center;
    background: #fff;
    border-radius: 58px;
    margin-top: 13px;
    height: 46px;
    padding: 6px 11px 6px 17px;
    text-align: start;
    font-weight: 600;
}
#stream .boton-hero i {
    margin-left: 12px;
    font-size: 23px;
    font-weight: bold;
} */
#stream .boton-hero:hover, #stream .boton-hero:hover i {
    color: #fff;
    background: #2d7034;
}

/*------------- directo -------------*/
#stream .pc-screen  {
    width: 100%;
    min-height: 60vh;
    align-content: center;
    background-color: #e8e8e8;
    border: 8px solid #333;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    position: relative;
    margin-bottom: 3px;
  }
  /* Opcional: soporte del monitor */
  #stream  .pc-screen::after  {
    content: '';
    width: 100px;
    height: 20px;
    background: #333;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
  }
  #stream  .prue::after  {
    content: '';
    width: 100px;
    height: 20px;
    background: #333;
    position: absolute;
    /* bottom: -30px; */
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
  }
  #stream .contenedor {
    position: relative; 
    background-image: url(../assets/img/bordeizquierdo.webp);
    position: relative;
    overflow: hidden;
    /* margin: 50px auto; */
    background-image: url(../assets/img/bordeizquierdo.webp);
    background-repeat: repeat-y;
    background-size: 50px auto;
}
#stream .logo {
      position: absolute;
      top: -35px;
      left: -12px;
      width: 150px;
      height: 150px;
      background-image: url(../assets/img/logoneon.webp);
      background-size: contain;
      background-position: top left;
  }
  #stream .logo2 {
      position: absolute;
      bottom: -1px;
      left: -15px;
      width: 100%;
      height: 96px;
      background-image: url(../assets/img/bordebajo.webp);
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: bottom left;
  }
  #stream .logo3 {
      position: absolute;
      bottom: 0px;
      right: 0px;
      width: 150px;
      height: 96px;
      background-image: url(../assets/img/plantaabajo.webp);
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: bottom right;
  }
  #stream .logo4 {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 150px;
      height: 96px;
      background-image: url(../assets/img/plantaizquierda.webp);
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: bottom left;
  }
  #stream .pc-screen{
      overflow: hidden;
      min-height: 0px;
      /* background: url(../assets/img/fondito.webp) no-repeat; */
      background-size: cover;
      max-width: 1115px; 
      margin: 10px auto;
      background: #363636;max-width: 100%;
  }

/*-------------------- tarjetas de colores ------------------*/
#stream .info-card p{max-width: 333px; margin: 0 auto;}
#stream .card{max-width: 400px;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    color: #fff;
    background: #c4302b;} 
#stream .card2{ background: #6141a5;}
#stream .card3{ background: #0e6ed4;}
#stream .card4{ background: #1e462b ;}

#stream .card-youtube{ border: 11px solid #c4302b;border-radius: 21px;}
#stream .card-twitch{ border: 11px solid #6141a5;border-radius: 21px;}
#stream .card-web{border: 11px solid #0e6ed4;border-radius: 21px;}

#stream .plataforma-link{ text-decoration: none;}
#stream .red-link{ text-decoration: none; color: #fff;}
/* #stream .enlace-directo{  color:#6141a5}    */

/*------------- marco decorado para imagenes -------------*/
#stream  .marco {
  background-image: url(../assets/img/borde-selva.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: 1rem 1rem 2rem 0.5rem;
  border-radius: 20px;
  margin: 0 auto;
  width: 520px;
  max-width: 520px;
  height: 315px;
  max-height: 315px;
} #stream .marco img{
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);}
#stream .marco div{overflow: hidden;}
#stream .marco a{padding: 0px;}
#stream .marco33{
    background-image: url(../assets/img/borde-selva2.webp);
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 1rem 1rem 2rem 0.5rem;
    border-radius: 20px;
  }
#stream .marco33 img{
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);}

/*-------------------- otros  ---------------*/
#stream .fondo-claro{background: #f8f9fa;}
#stream .text-justify{text-align: justify;}

/*------------------ contacto -------------------*/
.fv{
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);}
    .ho{
        cursor: pointer;
        transition: transform 0.5s ease;
    }
    .ho:hover{ transform: scale(1.1);}

#stream .boton-contacto {
    color: #fff;
    background-color: #0e6ed4;
    position: relative;
    z-index: 20;
}
#stream .boton-contacto:hover {
    color: #0e6ed4;
    background-color: #fff;
}

#stream .screen-contacto{
  max-width: 835px;
}



    @media (max-width: 560px)  {
      #stream .marco{
        padding: 0.5rem 0.5rem 2rem 0.5rem;
        width: 310px;
        max-width: 310px;
        height: 230px;
        max-height: 230px;
        margin-bottom: 20px;
    }
    #stream .marco-mono{max-height: none; height: auto; background-size: 100% 100%; padding-bottom: 10px;}
     #stream .marco33{   padding: 0.5rem 0.5rem 1.5rem 0.5rem;}
    
  }


  #stream .intro {
  background-image: url(../assets/img/agarre.webp);
  background-repeat: no-repeat;
  background-size: 75px;
  background-position: bottom right;
  max-width: 487px;
  min-width: 100%;
}
#stream .intro h1{font-size: 2rem;}
#stream .intro p{font-size: 1.2rem;}
/* #stream .imagen-pantalla {max-height: 330px;} */
#stream .imagen-sobre {max-height: 350px;}
#stream .imagen-sobre {max-height: 250px;}



  

  



  #stream .lila {color:#6141a5; font-weight: bold;}
  #stream .rojo {color:#c4302b; font-weight: bold;}
  #stream .blanco {color:#fff; font-weight: bold;}
  #stream .azul {color: #0e6ed4; }
  /* #plataformas img {
    max-width: 410px;
  } */


  /* responsive */
  @media (max-width: 992px)  {
    #stream  .navbar ul {
        text-align: right;
        padding-top: 15px;
    } 
    #stream  .imagen-cabecera {max-height: 300px; margin-top: 20px;    position: relative; z-index: 51; }
    
    #stream .planta3 {height: 51px;
        width: 60px;
        background-size: 60px;}
    }