/* Propósito: estilos exclusivos de la página de servicios (/pages/services).
   Autor: equipo Ontek Shop.
   Fecha: 2026-10-26.
   Versión: 1.0.
   Nota: hoja scoped a esta página; no altera el CSS global (main.css). */

/* Título grande estilo catálogo */
.svc-title { padding: 54px 8% 35px; border-bottom: 1px solid var(--line); background: var(--surface); }
.svc-title .eyebrow { margin-bottom: 12px; }
.svc-title h1 { margin: 0; font-family: var(--font-display); font-size: clamp(42px, 5vw, 64px); line-height: 1.04; letter-spacing: -.05em; }
.svc-title h1 span { color: var(--color-primary); }
.svc-title p:not(.eyebrow) { max-width: 720px; margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

/* Grid de cards */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; padding: 60px 8% 72px; }

/* Card con borde neón gamer */
.svc-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease); }
.svc-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--color-accent), transparent 45%, transparent 55%, #2563EB); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--ease); pointer-events: none; }
.svc-card:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 14px 40px #a3e63533; }
.svc-card:hover::before { opacity: 1; }
.svc-card__index { color: var(--color-accent); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.svc-card h2 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.25; letter-spacing: -.02em; }
.svc-card p { margin: 0; color: var(--color-text-body); font-size: 13px; line-height: 1.65; }

/* Banda CTA final */
.svc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 26px; padding: 44px 10%; background: #EAF1FC; color: #0B1220; }
.svc-cta__mark { display: grid; flex: 0 0 58px; place-items: center; width: 58px; height: 58px; border-radius: 14px; background: var(--color-primary); color: #fff; font-family: var(--font-display); font-size: 26px; font-weight: 700; }
.svc-cta__copy { flex: 1; min-width: 220px; }
.svc-cta__copy .eyebrow { margin-bottom: 8px; }
.svc-cta__copy h2 { margin: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: -.03em; }
.svc-cta__copy p { margin: 7px 0 0; color: #475569; font-size: 12px; }

@media (max-width: 1024px) { .svc-grid { padding: 48px 5% 60px; gap: 14px; } }
@media (max-width: 768px) {
  .svc-title { padding: 40px 5% 27px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 40px 5% 48px; }
  .svc-card { padding: 20px 18px 22px; }
  .svc-cta { padding: 32px 6%; }
  .svc-cta__copy { flex-basis: calc(100% - 82px); }
  .svc-cta .button { margin-left: 84px; }
}
@media (max-width: 480px) {
  .svc-title h1 { font-size: 36px; }
  .svc-grid { grid-template-columns: 1fr; gap: 11px; }
  .svc-card h2 { font-size: 16px; }
  .svc-card p { font-size: 12px; }
  .svc-cta { align-items: flex-start; gap: 14px; padding: 26px 6%; }
  .svc-cta__copy { flex-basis: 100%; }
  .svc-cta .button { margin-left: 0; }
}