.servicios-hero {
  background: linear-gradient(160deg, var(--color-morado-oscuro), var(--color-negro-azulado));
  color: var(--color-texto-invertido);
  padding: var(--espacio-2xl) 0;
  text-align: center;
}

.servicios-hero h1 {
  font-size: var(--texto-3xl);
  max-width: 720px;
  margin: 0 auto var(--espacio-sm);
}

.servicios-hero p {
  max-width: 560px;
  margin: 0 auto var(--espacio-md);
  color: rgba(245, 246, 250, 0.75);
}

.servicios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-md);
}

.tarjeta-servicio {
  padding: var(--espacio-md);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  transition: box-shadow 0.3s var(--easing), transform 0.3s var(--easing);
}

.tarjeta-servicio:hover {
  box-shadow: var(--resplandor-azul);
  transform: translateY(-4px);
}

.tarjeta-servicio h3 {
  font-size: var(--texto-lg);
  color: var(--color-morado);
}

.soluciones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-md);
}

.tarjeta-solucion {
  padding: var(--espacio-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radio-borde);
  transition: border-color 0.3s var(--easing);
}

.tarjeta-solucion:hover {
  border-color: var(--color-azul);
}

.tarjeta-solucion h3 {
  color: var(--color-texto-invertido);
  font-size: var(--texto-base);
}

.tarjeta-solucion p {
  font-size: var(--texto-sm);
}

.cotizacion-final {
  text-align: center;
}

.cotizacion-final__grid {
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .servicios-grid,
  .soluciones-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .servicios-grid,
  .soluciones-grid {
    grid-template-columns: 1fr;
  }
}


#catalogo, #servicios-grid, #historia-halca, #formulario-contacto { scroll-margin-top: 110px; }


/* ===== V17 · SERVICIOS: jerarquía técnica ===== */
.servicios-principales {
  background:
    radial-gradient(circle at 92% 8%, rgba(91,69,199,.08), transparent 24%),
    #fff;
}

.servicios-grid { gap: 1rem; }

.tarjeta-servicio {
  position: relative;
  overflow: hidden;
  min-height: 285px;
  display: flex;
  flex-direction: column;
  padding: 1.45rem;
  border-radius: 25px;
  border: 1px solid rgba(58,41,142,.10);
  background: linear-gradient(155deg, #fff 20%, #f8f6ff 100%);
  box-shadow: 0 12px 38px rgba(33,22,79,.055);
  transition: transform .42s var(--easing), box-shadow .42s var(--easing), border-color .3s ease;
}

.tarjeta-servicio::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,125,240,.18), rgba(143,125,240,0) 68%);
}

.tarjeta-servicio:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 70px rgba(33,22,79,.13);
  border-color: rgba(91,69,199,.25);
}

.tarjeta-servicio__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: auto;
  font-family: var(--fuente-mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #80798d;
}

.tarjeta-servicio__top i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--fuente-base);
  font-size: 1rem;
  font-style: normal;
  color: var(--color-morado-vivo);
  background: rgba(91,69,199,.07);
  transition: transform .35s var(--easing), background .35s ease;
}

.tarjeta-servicio:hover .tarjeta-servicio__top i { transform: rotate(45deg); background: rgba(91,69,199,.13); }

.tarjeta-servicio h3 {
  margin: 3.4rem 0 .7rem;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  color: #241d34;
}

.tarjeta-servicio p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.62;
  color: #6e6878;
}

.tarjeta-servicio__linea {
  width: 38px;
  height: 2px;
  margin-top: 1.1rem;
  background: var(--color-morado-vivo);
  transition: width .35s var(--easing);
}
.tarjeta-servicio:hover .tarjeta-servicio__linea { width: 92px; }

.seccion--oscura .encabezado-seccion--editorial p { color: rgba(251,250,255,.66); }

.soluciones-grid { gap: .9rem; }

.tarjeta-solucion {
  position: relative;
  min-height: 220px;
  padding: 1.35rem;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .35s var(--easing), background .35s ease, border-color .35s ease;
}

.tarjeta-solucion:hover {
  transform: translateY(-5px);
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border-color: rgba(201,192,255,.28);
}

.tarjeta-solucion__numero {
  display: block;
  margin-bottom: 2.2rem;
  font-family: var(--fuente-mono);
  font-size: .65rem;
  letter-spacing: .13em;
  color: #a99df4;
}

.tarjeta-solucion h3 {
  margin-bottom: .6rem;
  font-size: 1.12rem;
  letter-spacing: -.025em;
}

.tarjeta-solucion p { margin: 0; color: rgba(251,250,255,.62); line-height: 1.58; }

.cotizacion-final__grid { max-width: 900px; }
.cotizacion-final__mini { display:block; margin-bottom:.8rem; font-family:var(--fuente-mono); font-size:.68rem; letter-spacing:.14em; color:var(--color-morado-vivo); }
.cotizacion-final h2 { font-size:clamp(2.1rem,4vw,3.7rem); letter-spacing:-.055em; }
.cotizacion-final h2 span { color:var(--color-morado-vivo); }
.cotizacion-final p { max-width:650px; margin:.8rem auto 1.4rem; }