.hero-text {
  color: var(--color-gray);
  max-width: 640px;
}

/* ===============================
   SECCIÓN: CON-TOOLS (grid 3x3)
   =============================== */

.con-tools-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.con-tool-card{
  background: #fff;
  border: 1px solid #e6e6f0;
  border-radius: 16px;
  padding: 26px;
  min-height: 210px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.con-tools-subtitle{
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.con-tool-ico{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #fff;
  background: linear-gradient(180deg, #12B7FF 0%, #007BFF 100%);
  box-shadow: 0 12px 26px rgba(0,163,255,0.20);
}

.con-tool-ico i{
  font-size: 20px;
  line-height: 1;
}

/* Responsive */
@media (max-width: 991px){
  .con-tools-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px){
  .con-tools-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .con-tool-card{
    padding: 22px;
  }
}


/* ===============================
   SECCIÓN FLOWS
   =============================== */

.flows{
  background:#fff;
}

.flows-list{
  display:flex;
  flex-direction:column;
  gap: 0px;
}

.flows-subtitle{
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* Item */
.flow-item{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items:center;
}

.flow-item.reverse{
  direction: rtl;
}

.flow-item.reverse > *{
  direction: ltr;
}

/* Contenido */
.flow-content{
  max-width: 520px;
}

.flow-badge{
  display:inline-block;
  font-size:14px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,163,255,0.12);
  color: var(--color-blue);
  margin-bottom: 10px;
}

/* Media */
.flow-media{
  display:flex;
  justify-content:center;
}

/* Placeholder del mock (reemplazable luego por imagen real) */
.flow-mock{
  width: 100%;
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,163,255,.35), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(0,183,255,.35), transparent 60%),
    #f4f9ff;
  
}

/* Responsive */
@media (max-width: 991px){
  .flow-item,
  .flow-item.reverse{
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .flows-list{
    gap: 56px;
  }

  .flow-media{
    order: -1;
  }

  .flow-content{
    max-width:100%;
  }
}