/* ==========================================================
   AppBusiness Level 3 Patch - Sección "Valores"
   - Iconos grandes en caja
   - Línea roja animada bajo el título (hover / active)
   ========================================================== */

.valores{ padding: 40px 0 20px; }
.valores .row [class*="col-"]{ margin-bottom: 35px; }

.valores .valor-icon{
  float:left;
  width: 80px;
  height: 80px;
  background:#fff;
  border:1px solid #eee;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.valores .valor-icon i{
  font-size:46px;
  color:#A71931;
}

.valores .valor-contenido{
  margin-left: 100px;
}
.valores .valor-contenido h4{
  margin:0;
  font-weight:700;
}
.valores .valor-contenido span{
  display:block;
  width:40px;
  height:2px;
  background:#A71931;
  margin: 10px 0 12px;
  transition: width .35s ease;
}

.valores .row [class*="col-"]:hover .valor-contenido span,
.valores .row [class*="col-"].active .valor-contenido span{
  width: 180px;
}

@media (max-width: 767px){
  .valores .valor-icon{ float:none; margin:0 0 12px 0; }
  .valores .valor-contenido{ margin-left:0; }
}
/* PATCH HOME (Servicios + Suscripción + Barra animada) */

/* Botón Aula (para que se parezca al original) */
.btn-aula{
  background:#A71931;
  color:#fff;
  font-weight:bold;
  font-size:18px;
  border-radius:0;
}
.btn-aula:hover{ color:#fff; opacity:.9; }

/* Hover suave para tarjetas de servicios */
.item{
  transition: transform .18s ease, box-shadow .18s ease;
}
.item:hover{
  transform: translateY(-3px);
}

/* Barra roja "cargando" bajo el título */
.title-section span.bar-anim{
  width: 0 !important;
  display:block;
  border-bottom:3px solid #A71931;
  padding-bottom:10px;
  animation: app_bar_fill .55s ease forwards;
}
@keyframes app_bar_fill{
  to{ width:70px; }
}

/* Reforzar íconos del buscador (por si algo los está sobreescribiendo) */
.buscar-icons i{
  font-size:50px !important;
  color:#FFFFFF !important;
}