html,
body {
   height: 100%;
}

body::before {
   content: '' !important;
   width: 100% !important;
   height: 100% !important;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   z-index: -3 !important;
   display: block !important;
   background: rgba(0, 0, 0, 0.5) !important;
}

body {
   background-image: url(https://traficopuebla.com/wp-content/uploads/2022/06/moritz-kindler-7TeeZqR52Yk-unsplash-scaled.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: initial;
}

.btn {
   border-radius: 10px;
   padding: 16px 20px;
   color: #ffffff;
   text-align: center;
   overflow-wrap: break-word;
   word-break: break-word;
   border: none;
   border-radius: 10px;
   height: 50px;
   width: 100%;
   font-weight: 700;
   box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.13);
   line-height: 1;
}

.contenerdor-web {
   max-width: 450px;
   padding: 2rem;
}

.conteimg {
   position: relative;
   display: inline-block;
   text-align: center;
}

.fotoreporteros {
   background-color: #ffffff93;
   background-image: url("/assets/img/reporteros.png"), url("/V4/assets/img/reporteros.png");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 10px;
   /* height: 200px; */
   height: 250px;
   width: 100%;
   max-width: 100%;
   filter: brightness(0.8);
}

.textofoto {
   font-size: 15px;
   line-height: 1;
   font-weight: 600;
   position: absolute;
   bottom: 0;
   left: 0;
   transform: translate(0%, -7%);
   background: rgba(0, 0, 0, 0.58);
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
}

.logotipo {
   width: 100%;
}

.banner-WA .banner {
   border-radius: 10px;
   box-shadow: 0 3px 5px rgba(255, 255, 255, 0.23);
   line-height: 1;
   position: sticky;
}

.banner-WA .banner:hover {
   background: rgb(0, 29, 194);
   opacity: 0.8;
   -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.4)));
   -webkit-box-shadow: 0px 1px 8px rgba(255, 255, 255, 0.63);
   -moz-box-shadow: 0px 1px 8px rgba(255, 255, 255, 0.63);
   box-shadow: 0px 1px 8px rgba(255, 255, 255, 0.63);
}

.btn-webpage {
   background-color: #c40006;
   color: #fff;
   line-height: 1;
}

.btn-webpage:hover {
   background-color: #77000c;
   color: #ffffff;
}

.icono-web {
   pointer-events: none;
   border-radius: 4px;
   background-repeat: no-repeat;
   background-size: cover;
   margin-right: 10px;
}

.buttons {
   padding: 8px;
   height: 110px;
}

.buttons:hover {
   color: #fff;
   box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.13);
}

.tiktok {
   background: #161823;
   color: #fff;
}

.facebook {
   background: #0866FF;
   color: #fff;
}

.instagram {
   background: rgb(64, 93, 230);
   background: linear-gradient(171deg, rgba(64, 93, 230, 1) 0%, rgba(88, 81, 219, 1) 10%, rgba(131, 58, 180, 1) 22%, rgba(193, 53, 132, 1) 34%, rgba(247, 119, 55, 1) 48%, rgba(253, 29, 29, 1) 63%, rgba(245, 96, 64, 1) 76%, rgba(252, 175, 69, 1) 89%, rgba(255, 220, 128, 1) 100%);
}

.threads {
   background: #000000;
   color: #fff;
}

.twitter {
   background: #000000;
   color: #fff;
}

.youtube {
   background: #FF0000;
   color: #fff;
}

.tiktok:hover,
.facebook:hover,
.instagram:hover,
.threads:hover,
.twitter:hover,
.youtube:hover {
   background: #303030;
}

.icono-social {
   font-size: 26px;
   text-align: center;
   display: inline-block;
   margin-bottom: 8px;
}

.textweb {
   padding: 5px 0;
}

.textobtnicono {
   padding: 0 0 5px 0;
   margin: 0px;
   line-height: 1;
}

.footer {
   display: block;
   font-size: 10px;
   letter-spacing: 5px;
}

@media (min-width: 320px) and (max-width: 480px) {
   body {
      background-size: initial;
      background-position: top center;
   }

   .contenerdor-web {
      /* padding: 2rem 1rem; */
      padding-top: 1rem;
   }

   .textobtnicono {
      padding: 0;
      line-height: 1;
   }
}