/* ============================================================
   SERVICIOS — estilos propios de esta página.
   Reutiliza tokens y componentes de style.css (colores, botones,
   eyebrow, section-head, stat-item, faq, process-track, hero, etc.)
   ============================================================ */

/* ---------- Hero de servicios (reutiliza .hero-split-inner) ---------- */
.services-hero-chips{
  background:rgba(255,255,255,.05);border:var(--border-light);border-radius:var(--radius-lg);
  padding:var(--space-md);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:relative;animation:statementCardFloat 7s ease-in-out infinite;
}
.services-hero-chips-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:var(--fs-mono);color:rgba(255,255,255,.55);
  margin-bottom:1.1rem;
}
.services-hero-chips-head span:first-child{display:flex;align-items:center;gap:.5rem;color:var(--white);font-weight:600}

.services-hero-list{display:flex;flex-direction:column;gap:.65rem}
.services-hero-list-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .85rem;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:var(--white);font-size:.92rem;font-weight:500;
}
.services-hero-list-item svg{width:18px;height:18px;flex-shrink:0;color:var(--green)}

.services-hero-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.25rem}
.services-hero-kpis b{display:block;font-family:var(--font-mono);font-size:1.6rem;color:var(--green)}
.services-hero-kpis span{font-size:.78rem;color:rgba(255,255,255,.55)}

/* ---------- Grid de servicios detallados ---------- */
.service-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}

.service-detail-card{
  position:relative;
  background:var(--white);border:var(--border);
  padding:var(--space-md);
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.service-detail-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(4,65,84,.2);
}

.service-detail-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1rem}
.service-detail-icon{
  width:52px;height:52px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-900);color:var(--green);
}
.service-detail-icon svg{width:26px;height:26px}
.service-detail-num{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted)}

.service-detail-card h3{font-size:1.35rem;margin-bottom:.5rem}
.service-detail-card > p{color:var(--text-muted);line-height:1.55;margin-bottom:1.1rem}

.service-detail-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.2rem}
.service-detail-list span{
  display:block;position:relative;padding-left:1.1rem;
  font-size:.9rem;line-height:1.4;color:var(--navy);
}
.service-detail-list span::before{
  content:'';position:absolute;left:0;top:.5em;width:7px;height:1.5px;background:var(--green);
}

.service-detail-footer{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1rem;border-top:1px solid rgba(4,65,84,.1);
}
.service-detail-tag{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--blue-primary);
}
.service-detail-link{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.85rem;font-weight:600;color:var(--navy);
  transition:gap var(--t-fast),color var(--t-fast);
}
.service-detail-link svg{width:15px;height:15px;transition:transform var(--t-fast)}
.service-detail-link:hover{color:var(--blue-primary);gap:.55rem}
.service-detail-link:hover svg{transform:translateX(3px)}

/* ---------- Resultados / chart split ---------- */
.results-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:center}
.results-copy h2{margin-bottom:1rem}
.results-copy p{color:rgba(255,255,255,.72);margin-bottom:1.5rem;line-height:1.6}
.results-bullets{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.75rem}
.results-bullets div{display:flex;align-items:flex-start;gap:.7rem;color:rgba(255,255,255,.85);font-size:.95rem}
.results-bullets svg{width:19px;height:19px;flex-shrink:0;color:var(--green);margin-top:.1rem}

.results-chart-card{
  background:rgba(255,255,255,.05);border:var(--border-light);border-radius:var(--radius-lg);
  padding:var(--space-md);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  position:relative;
}
.results-chart-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:var(--fs-mono);color:rgba(255,255,255,.55);margin-bottom:1rem}
.results-chart-head span:first-child{display:flex;align-items:center;gap:.5rem;color:var(--white);font-weight:600}

.results-chart{width:100%;height:auto;overflow:visible}
.results-chart-fill{opacity:0}
.results-chart-path{stroke-dasharray:900;stroke-dashoffset:900}
.results-chart-dot{opacity:0;transform-origin:420px 30px}
[data-reveal].is-visible .results-chart-path{animation:statementDraw 1.8s var(--ease) .3s forwards}
[data-reveal].is-visible .results-chart-fill{animation:fadeInSlow 3s ease 1s forwards}
[data-reveal].is-visible .results-chart-dot{animation:statementDotPop .5s ease 1.5s forwards,pulseDot 1.8s ease-in-out 2s infinite}

.results-chart-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.25rem}
.results-chart-kpis div{text-align:center;padding:.6rem .4rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.results-chart-kpis b{display:block;font-family:var(--font-mono);font-size:1.25rem;color:var(--green)}
.results-chart-kpis span{font-size:.68rem;color:rgba(255,255,255,.55)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .service-detail-grid{grid-template-columns:1fr}
  .results-split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .services-hero-kpis,.results-chart-kpis{grid-template-columns:repeat(2,1fr)}
  .service-detail-card{padding:1.25rem}
}