/* Custom Manzana styles — ajustes solicitados */

:root{
  --manzana-red: #EF1414;
  --manzana-blue: #016898;
  --manzana-white: #FFFFFF;
}

/* 1) Sub-títulos y spans de títulos: color rojo permanente, sin cambio en hover */
.sec-heading .sub-title,
.sec-heading .sec-title span,
.sec-heading .sub-title:hover,
.sec-heading .sec-title span:hover{
  color: var(--manzana-red) !important;
}


.sec-heading .sec-title span:hover{
  color: var(--manzana-white) !important;
  border-radius: 45px;
}

/* 2) En la sección de servicios mantener el subtítulo y títulos en blanco */
.tj-service-section .sec-heading .sub-title,
.tj-service-section .sec-heading .sec-title{
  color: #fff !important;
}

/* 3) Iconos dentro de la sección de servicios en blanco */
.tj-service-section .service-icon i{
  color: #fff !important;
}

/* 4) Testimonial: al hacer hover sobre el bloque, el ícono de comillas cambia a color azul del template */
.testimonial-item .quote-icon i{
  transition: color .18s ease-in-out;
}
.testimonial-item:hover .quote-icon i{
  color: var(--manzana-blue) !important;
}

/* 5) FAQ buttons: títulos en rojo permanente (sin efecto hover que cambie color) */
.faq-title,
.faq-title.collapsed{
  color: var(--manzana-red) !important;
}
.faq-title:hover,
.faq-title:focus{
  color: var(--manzana-red) !important;
  text-decoration: none;
}

/* 6) Icono "+" dentro del círculo (clientes) — hacerlo rojo de marca con texto blanco */
.customers .customers li span,
.customers-box .customers li span{
  background: var(--manzana-red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* pequeñas transiciones para suavizar cambios */
.sec-heading .sub-title,
.sec-heading .sec-title span,
.faq-title,
.customers .customers li span{
  transition: color .15s ease, background .15s ease;
}

/* Asegurar que estilos específicos tengan prioridad sobre otros selectores */
@media (min-width: 0px){
  .tj-service-section .service-icon i{ color: #fff !important; }
}