/*---------------------------------------
*        PESTAÑA SERVICIOS
*----------------------------------------
*/

.c-banner {
   background-color: rgb(43, 41, 41);
   color: white;
   text-align: center;
   padding: 2px 10px;
   font-size: 12px;
}
@media (min-width:375px) {
   .c-banner {
      padding: 10px 20px;
   }
}
@media (min-width:768px) {
   .c-banner {
      padding: 20px 0;
      font-size: 15px;
   }
}


.tabs-servicios {
   width: 100%;
   margin: 0 auto;
}

/* Estilo de las pestañas */
.tab-titles-servicios {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 5px;
   margin: 0 10px;
   margin-top: 20px;

}
@media (min-width:768px) {
   .tab-titles-servicios {
      gap: 20px;
      margin: 0 100px;
      margin-top: 20px;
   }
}


.tab-titles-servicios .tab-service {
   transition: background-color 0.3s;
   line-height: 15px;
   text-align: center;
   padding: 10px 0;
   color: red;
   border-top: 1px solid red;
   border-left: 1px solid red;
   border-right: 1px solid red;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

@media (max-width:425px) {
   .tab-titles-servicios .tab-service {
      padding: 10px;
   }
}

@media (min-width:425px) {
   .tab-titles-servicios .tab-service {
      padding: 15px 10px;
   }
}

.tab-titles-servicios .tab-service.active {
   background-color: red;
   color: #fff;
}

/* Estilos para el contenido de las pestañas */
.tab-content-servicio {
   border-top:2px solid red;
   display: none;
   background-color: #fff;
}

/* Estilo de la pestaña activa */
.tab-content-servicio.active {
   display: block;
}
@media (min-width:768px) {
   .busqueda-servicios {
      position: relative;
      height: 50px;
   }
}

/*---------------------------------------
*        VIEW MAIN SERVICIOS
*----------------------------------------
*/

.servicios-imagen-confort{
   background-image: linear-gradient(
       to bottom, transparent 10%, rgba(7, 7, 7, 0.9) 60%
   ), url("../../img/update-servicios/PLATINUM/PLATINUM\ CONFORT\ 1ER\ PISO/IMG_5442.JPG");
   background-position: 50% 45%;
   object-fit: cover;
   padding-top: 100px;
   background-repeat: no-repeat;
   background-size: 100%, 1200px;
}
.servicios-imagen-superior{
   background-image: linear-gradient(
       to bottom, transparent 10%, rgba(7, 7, 7, 0.9) 60%
   ), url("../../img/update-servicios/PLATINUM/PLATINUM SUPERIOR 2DO PISO/IMG_5394.JPG");
   background-position: 50% 45%;
   object-fit: cover;
   padding-top: 100px;
   background-repeat: no-repeat;
   background-size: 100%, 1200px;
}
.servicios-imagen-vip{
   background-image: linear-gradient(
       to bottom, transparent 10%, rgba(7, 7, 7, 0.9) 60%
   ), url("../../img/update-servicios/PLATINUM/VIP/IMG_5601.JPG");
   background-position: 50% 45%;
   object-fit: cover;
   padding-top: 100px;
   background-repeat: no-repeat;
   background-size: 100%, 1200px;
}
@media (min-width:1024px) {
   .servicios-imagen-confort {
      background-size: 100%;
   }
   .servicios-imagen-superior {
      background-size: 100%;
   }
   .servicios-imagen-vip {
      background-size: 100%;
   }
   .servicios-imagen-grid .texto-servicio {
      padding: 0 9px;
   }
}

.servicios-imagen-grid .texto-servicio, .listado-items {
   padding: 0 25px;
}
@media (min-width:1024px) {
   .servicios-imagen-grid .texto-servicio {
      padding: 0 90px;
   }
}

.servicios-imagen-grid {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}
.contenido-servicio{
   flex-basis: 50%;
   padding-top: 200px;
}

.texto-servicio {
   color: #fff;
   padding-bottom: 25px;
}
.texto-servicio h2{
   font-size: 30px;
   padding-left: 15px;
   padding-bottom: 20px;
}
.texto-servicio p{
   font-size: 16px;
   line-height: 15px;
   text-align: justify;
}
@media (min-width:768px) {
   .texto-servicio {
      margin-bottom: 20px;
   }
}

@media (max-width:425px) {
   .servico-info-hidden {
      display: none;
   }
}

@media (min-width:1024px) {
   .texto-servicio {
      margin: 0 150px;
      margin-bottom: 20px;
   }
}

.informacion-servicio {
   border-top: 1px solid #fff;
   padding-bottom: 20px;
}
@media (min-width:768px) {
   .informacion-servicio {

      padding-bottom: 60px;
   }
   .informacion-servicio .listado-items {
      margin-left: 100px;
      margin-right: 100px;
   }
}

@media (min-width:1440px) {
   .informacion-servicio .listado-items {
      margin-left: 400px;
      margin-right: 400px;
   }
}




.listado-items {
   padding-top: 20px;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
}
.item {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.listado-items img{
   border-radius: 10px;
   width: 50px;
   height: 50px;
}

.listado-items p {
   text-align: center;
   color: #fff;
   font-size: 10px;
}
/**SECCION MAS INFORMACION SOBRE LOS SERVICIOS*/

.beneficio-card-title {
   background-color: #e1e1e1;
   text-align: center;
   font-size: 20px;
   font-weight: 100;
   padding: 20px 0;
}

.beneficio-card-title p {
   font-weight: bold;
}
.beneficio-card-title span {
   font-weight: bold;
   color: red;
}

.img-servicio img{
   background-repeat: no-repeat;
   height: 150px;
   width: 100%;
   object-fit: cover;
}

.beneficio-card {
   border-bottom: 2px solid #e1e1e183;
   margin: 10px 0;
}
.texto-beneficio {
   padding: 10px 20px;
}
.beneficio-card .texto-beneficio h3{
   text-align: center;
   font-weight: bold;
   font-size: 20px;
}
.beneficio-card .texto-beneficio p{
   text-align: justify;
}

@media (min-width: 768px) {
   .beneficio-card .texto-beneficio p {
      text-align: center;
   }
}
@media (min-width: 1024px) {
   .beneficio-card .texto-beneficio p {
      padding: 0 30px;
      margin: 20px;
   }
}

/* Media Query para pantallas medianas (tabletas) */
@media screen and (min-width: 601px) and (max-width: 1024px) {
   .beneficio-card {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
   }

   .img-servicio img {
       width: 100%;
       height: 200px;
       object-fit: cover;
   }

   .texto-beneficio h3 {
       font-size: 15px;
   }

   .texto-beneficio p {
       font-size: 10px;
   }
}

/* Media Query para pantallas grandes (escritorios) */
@media screen and (min-width: 1024px) {
   .beneficio-card {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 30px;
   }

   .img-servicio img {
       height: 250px;
   }



   .texto-beneficio h3 {
       font-size: 20px;
   }

   .texto-beneficio p {
       font-size: 12px;
   }
}

@media (min-width: 768px) {
   .texto-beneficio {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .img-servicio-left {
      position: relative;
  }

  .img-servicio-left:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to left, transparent 10%, white 100%);
      z-index: 1;
  }

  .img-servicio-rigth {
      position: relative;
  }

  .img-servicio-rigth:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, transparent 10%, white 100%);
      z-index: 1;
  }
}