/* ══════════════════════════════
   Union-TI · servicio.css
   Estilos páginas de servicio
   ══════════════════════════════ */

/* Hero servicio */
.srv-hero {
  background: var(--bg2);
  padding: 100px 0 4rem;
  border-bottom: 1px solid var(--border);
}
.srv-breadcrumb {
  font-size: .78rem; color: var(--muted);
  font-family: var(--mono); margin-bottom: 1.5rem;
}
.srv-breadcrumb a { color: var(--muted); transition: color .2s; }
.srv-breadcrumb a:hover { color: var(--cyan); }
.srv-breadcrumb span { color: var(--cyan); }
.srv-hero-icon {
  width: 52px; height: 52px; color: var(--cyan);
  margin-bottom: 1.25rem;
}
.srv-hero-icon svg { width: 100%; height: 100%; }
.srv-hero h1 { margin-bottom: 1rem; max-width: 750px; }
.srv-hero-sub {
  font-size: 1.05rem; color: var(--muted);
  max-width: 650px; margin-bottom: 2rem; line-height: 1.7;
}
.srv-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Layout grid */
.srv-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}
.srv-content h2 { margin-bottom: 1rem; }
.srv-content > p { margin-bottom: 1rem; }

/* Features */
.srv-features {
  display: flex; flex-direction: column;
  gap: 1.25rem; margin-top: 1.5rem;
}
.srv-feature {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--card); border-radius: var(--radius);
  padding: 1.25rem; border: 1px solid var(--border);
  transition: border-color .2s;
}
.srv-feature:hover { border-color: rgba(0,210,255,.3); }
.sf-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.srv-feature h3 { font-size: .95rem; margin-bottom: .3rem; color: var(--text); }
.srv-feature p  { font-size: .87rem; color: var(--muted); margin: 0; }

/* Cobertura */
.srv-cobertura {
  background: var(--card);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--cyan);
  padding: 1.5rem;
}
.srv-cobertura h3 { margin-bottom: .5rem; font-size: 1rem; }
.srv-cobertura p  { margin-bottom: 1rem; font-size: .88rem; }
.regiones-grid {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.regiones-grid span {
  background: rgba(0,210,255,.08);
  color: var(--cyan); font-size: .75rem;
  padding: .3rem .75rem; border-radius: 20px;
  font-family: var(--mono);
}

/* Marcas */
.marcas-grid {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 1rem;
}
.marca-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  font-size: .85rem; color: var(--text);
  font-weight: 500;
}

/* Sidebar */
.srv-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.srv-cta-box {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,210,255,.25);
  padding: 1.5rem;
}
.srv-cta-box h3 { margin-bottom: .5rem; font-size: 1rem; }
.srv-cta-box p  { font-size: .87rem; margin-bottom: 1.25rem; }

.srv-stats-box {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.srv-stat { display: flex; flex-direction: column; }
.ss-n { font-size: 1.6rem; font-weight: 700; color: var(--cyan); line-height: 1; }
.ss-l { font-size: .78rem; color: var(--muted); margin-top: 3px; }

.srv-otros {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 1.25rem;
}
.srv-otros h4 {
  font-size: .78rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  margin-bottom: .75rem;
}
.srv-otros ul { display: flex; flex-direction: column; gap: .5rem; }
.srv-otros a {
  font-size: .87rem; color: var(--muted);
  transition: color .2s; display: block;
}
.srv-otros a:hover { color: var(--cyan); }

/* FAQ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.faq-item {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.25rem;
  border: 1px solid var(--border);
}
.faq-item h3 { font-size: .95rem; margin-bottom: .5rem; color: var(--cyan); }
.faq-item p  { font-size: .87rem; color: var(--muted); margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .srv-grid { grid-template-columns: 1fr; }
  .srv-sidebar { order: -1; }
  .srv-stats-box { flex-direction: row; flex-wrap: wrap; }
  .srv-stat { flex: 1; min-width: 100px; }
}
@media (max-width: 640px) {
  .srv-hero { padding: 90px 0 2.5rem; }
  .srv-hero h1 { font-size: 1.6rem; }
}