/* ALINEACION CARDS HOME */
.container-ccd-servicios-home {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    gap: 20px;
}

.card-ccd-servicios-home {
    flex: 1 1 50%;
    max-width: 490px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

@media (max-width: 900px) {
    .card-ccd-servicios-home {
        flex: 1 1 50%;
    }
}

@media (max-width: 600px) {
    .card-ccd-servicios-home {
        flex: 1 1 100%;
    }
}

/* Hover para oscurecer la imagen, mostrar el texto y el botón */
@media (min-width: 900px) {
  .card-ccd-servicios-home {
  position: relative;
  overflow: hidden;
}

.imagen-ccd-cards-home {
  width: 100%;
  display: block;
  transition: opacity 0.3s ease;
}

.card-ccd-servicios-home::before,
.card-ccd-servicios-home::after {
  position: absolute;
  color: white;
  font-family: "Montserrat";
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-ccd-servicios-home:hover .imagen-ccd-cards-home {
  opacity: 0.1;
}

.card-ccd-servicios-home:hover::before,
.card-ccd-servicios-home:hover::after {
  opacity: 1;
}

.card-ccd-servicios-home::after:hover {
  background-color: #520a7d;
}

.card-ccd-servicios-home::after:active {
  background-color: #4b007a;
}
/* TEXTOS HOVER CARDS */
/* CARD 1 */
.card-home-1::before {
    content: "Buscamos inmediatez, por lo que nuestro enfoque en decisiones basadas en datos es clave para comprender a las audiencias, fortalecer la marca y aumentar el market share.";
      top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    font-size: 16px;
    font-weight: 500;
    width: 80%;
    pointer-events: none;
    text-align: left;
}

.card-home-1::after {
    content: "Ver Servicio";
    bottom: 10%;
    right: 10%;
    color: #191919;
    width: auto;
    border-radius: 20px;
    padding: 5px 20px;
    background-color: #adefdb;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    cursor: pointer;
    transform: translate(0, 0);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9);

}
/* CARD 2 */
.card-home-2::before {
    content: "En Canal Cero, desarrollamos ecommerce y soluciones web personalizadas, con enfoque en eficiencia, seguridad y experiencia intuitiva, aplicando una perspectiva global.";
     top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    font-size: 16px;
    font-weight: 500;
    width: 80%;
    pointer-events: none;
    text-align: left;
}

.card-home-2::after {
   content: "Ver Servicio";
    bottom: 10%;
    right: 10%;
    color: #191919;
    width: auto;
    border-radius: 20px;
    padding: 5px 20px;
    background-color: #adefdb;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    cursor: pointer;
    transform: translate(0, 0);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9);

}
/* CARD 3 */
.card-home-3::before {
    content: "Ofrecemos diseño integral, desde web hasta impresos, creando sitios amigables y experiencias de navegación efectivas para profesionalizar tu marca.";
       top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    font-size: 16px;
    font-weight: 500;
    width: 80%;
    pointer-events: none;
    text-align: left;
}

.card-home-3::after {
    content: "Ver Servicio";
    bottom: 10%;
    right: 10%;
    color: #191919;
    width: auto;
    border-radius: 20px;
    padding: 5px 20px;
    background-color: #adefdb;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    cursor: pointer;
    transform: translate(0, 0);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9);

}
/* CARD 4 */
.card-home-4::before {
    content: "Transformamos negocios con creatividad, creando campañas digitales que cumplen los objetivos de marca y logran resultados efectivos.";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    font-size: 16px;
    font-weight: 500;
    width: 80%;
    pointer-events: none;
    text-align: left;
}

.card-home-4::after {
    content: "Ver Servicio";
    bottom: 10%;
    right: 10%;
    color: #191919;
    width: auto;
    border-radius: 20px;
    padding: 5px 20px;
    background-color: #adefdb;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transform: translate(0, 0);
    pointer-events: none;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9);


}

}


/* INPUTS FORMULARIO */
.form-ccd-home input,
.form-ccd-home textarea{
    background-color: #191919;
    border-color: #191919;
    background: #191919;
    border-bottom-color: #adefdb;
    min-height: 40px!important;
    color: #191919;
}
.form-ccd-home input:focus-visible,
.form-ccd-home textarea:focus-visible{
    outline: none;
}
.button-ccd-enviar::after{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 10px;
    background: #0BE5A2;
    position: relative;
    bottom: -35px;
    right: 0px;
}
/* LOGOS PARTNERS */
/* ALINEACION LOGOS FOOTER */
.logos-partners-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.brxe-logo {
  flex: 1 1 calc(20% - 16px); 
  margin-bottom: 35px; 
  max-width: calc(20% - 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.brxe-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  .brxe-logo {
    flex: 1 1 calc(33% - 16px);
    max-width: calc(50% - 16px);
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .brxe-logo {
    flex: 1 1 calc(50% - 16px); 
    max-width: calc(100% - 16px);
    justify-content: center;
  }
}
@media (max-width: 991px) {
  .row-ccd-servicios-mobile {
   flex-direction: column-reverse!important;
  }
}