/* ==========================================
   FabriControl — Seccion /soluciones/
   Estilos del indice de servicios y de las
   paginas de detalle de cada servicio.
   ========================================== */

/* ---------- Hero generico de soluciones ---------- */
.sol-hero { position: relative; overflow: hidden; }
.sol-hero__inner { position: relative; z-index: 1; max-width: 780px; }
.sol-hero .lede { color: var(--slate-300); }

/* ---------- Card destacada: por donde empezar ---------- */
.sol-start {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--s-5);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
[dir="rtl"] .sol-start { border-left: 1px solid var(--slate-200); border-right: 4px solid var(--orange); }
.sol-start:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.sol-start__icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: rgba(249, 115, 22, 0.12);
  color: var(--orange);
  display: grid; place-items: center;
}
.sol-start__name { font-family: var(--f-headline); font-weight: 700; font-size: 22px; margin-bottom: 6px; }
.sol-start__desc { color: var(--slate-600); font-size: 15px; max-width: 60ch; }
@media (max-width: 760px) {
  .sol-start { grid-template-columns: 1fr; text-align: center; }
  .sol-start__icon { margin: 0 auto; }
  .sol-start__desc { margin: 0 auto; }
}

/* ---------- Grilla de 14 servicios ---------- */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 920px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sol-grid { grid-template-columns: 1fr; } }

.sol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
a.sol-card:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: var(--shadow-lg);
}
.sol-card--soon { background: var(--slate-50); opacity: 0.78; cursor: default; }

.sol-card__cat {
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: var(--s-4);
}
.sol-card__cat--entry  { background: rgba(249,115,22,0.12); color: var(--orange-600); }
.sol-card__cat--tech   { background: rgba(6,182,212,0.14);  color: var(--cyan-600); }
.sol-card__cat--support{ background: rgba(34,197,94,0.14);  color: var(--green-600); }

.sol-card__icon {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--slate-100);
  color: var(--slate-700);
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
}
a.sol-card:hover .sol-card__icon { background: rgba(249,115,22,0.12); color: var(--orange); }
.sol-card__name {
  font-family: var(--f-headline);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 6px;
}
.sol-card__desc { font-size: 14px; color: var(--slate-600); line-height: 1.5; flex-grow: 1; }
.sol-card__more {
  display: inline-block;
  margin-top: var(--s-4);
  font-weight: 600;
  font-size: 14px;
  color: var(--orange);
}
.sol-card__soon {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  background: var(--slate-200);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------- Por que trabajar conmigo (indice) ---------- */
.sol-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 860px) { .sol-why { grid-template-columns: 1fr; } }
.sol-why__item {
  background: var(--slate-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
.sol-why__icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: rgba(6,182,212,0.16);
  color: var(--cyan);
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
}
.sol-why__title { font-family: var(--f-headline); font-weight: 600; font-size: 17px; color: var(--white); margin-bottom: 6px; }
.sol-why__desc { font-size: 14px; color: var(--slate-300); line-height: 1.55; }

/* ==========================================
   Pagina de detalle de un servicio
   ========================================== */

/* ---------- Breadcrumb ---------- */
.svc-breadcrumb {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--slate-400);
  padding: var(--s-5) 0 0;
}
.svc-breadcrumb a { color: var(--slate-400); }
.svc-breadcrumb a:hover { color: var(--orange); }
.svc-breadcrumb__sep { margin: 0 8px; color: var(--slate-300); }
.svc-breadcrumb__current { color: var(--slate-600); }

/* ---------- Hero de servicio ---------- */
.svc-hero { background: var(--slate-900); color: var(--white); padding: var(--s-6) 0 var(--s-9); }
.svc-hero__inner { max-width: 820px; }
.svc-hero__icon {
  width: 64px; height: 64px;
  border-radius: 15px;
  background: rgba(249,115,22,0.16);
  color: var(--orange);
  display: grid; place-items: center;
  margin-bottom: var(--s-5);
}
.svc-hero h1 { color: var(--white); }
.svc-hero__valueprop {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5;
  color: var(--slate-300);
  margin-top: var(--s-4);
  max-width: 60ch;
}
.svc-hero__cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* ---------- Bloques de contenido ---------- */
.svc-section { padding: var(--s-8) 0; }
.svc-section .h-2 { margin-bottom: var(--s-5); }

/* lista de puntos (para quien / dolor / por que yo) */
.svc-points { list-style: none; display: grid; gap: var(--s-3); }
.svc-points li {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-6) + 6px);
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-700);
}
.svc-points li::before {
  content: '';
  position: absolute;
  left: var(--s-4);
  top: calc(var(--s-4) + 6px);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
}
[dir="rtl"] .svc-points li { padding: var(--s-4) calc(var(--s-6) + 6px) var(--s-4) var(--s-4); }
[dir="rtl"] .svc-points li::before { left: auto; right: var(--s-4); }

/* variante dolor: punto rojo */
.svc-points--pain li::before { background: #DC2626; }
/* variante por-que-yo: punto cyan, sobre fondo oscuro */
.bg-dark .svc-points li { background: var(--slate-800); border-color: rgba(255,255,255,0.08); color: var(--slate-200); }
.svc-points--why li::before { background: var(--cyan); }

/* "Que entrego": lista numerada */
.svc-deliver { list-style: none; counter-reset: dl; display: grid; gap: var(--s-3); }
.svc-deliver li {
  position: relative;
  counter-increment: dl;
  padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-7) + 8px);
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate-700);
}
.svc-deliver li::before {
  content: counter(dl);
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 13px;
  display: grid; place-items: center;
}
[dir="rtl"] .svc-deliver li { padding: var(--s-4) calc(var(--s-7) + 8px) var(--s-4) var(--s-4); }
[dir="rtl"] .svc-deliver li::before { left: auto; right: var(--s-4); }
.svc-deliver li strong { color: var(--slate-900); }

/* Ejemplo representativo: caja tipo cita */
.svc-example {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--cyan);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--s-6);
}
[dir="rtl"] .svc-example {
  border-left: 1px solid var(--slate-200);
  border-right: 4px solid var(--cyan);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.svc-example__label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-600);
  margin-bottom: var(--s-3);
  display: block;
}
.svc-example p { color: var(--slate-700); font-size: 16px; line-height: 1.65; }

/* "Que necesitas poner vos" */
.svc-need { list-style: none; display: grid; gap: var(--s-2); }
.svc-need li {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--slate-200);
  font-size: 15px;
  color: var(--slate-700);
  line-height: 1.55;
}
.svc-need li:last-child { border-bottom: none; }
.svc-need__check { color: var(--green-600); flex-shrink: 0; margin-top: 2px; }
[dir="rtl"] .svc-example p, [dir="rtl"] .svc-need li { text-align: right; }

/* ---------- Seccion DEMO (oculta por defecto) ---------- */
.demo-section { text-align: center; }
.demo-section__box {
  max-width: 640px;
  margin: var(--s-5) auto 0;
}

/* ---------- CTA final del servicio ---------- */
.svc-cta { text-align: center; }
.svc-cta .h-1 { color: var(--white); }
.svc-cta__btns { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-6); }