/* ==========================================================================
   SERVICIOS — estilos específicos
   ========================================================================== */

.page-hero {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: var(--sp-7);
}
.page-hero__title { margin-top: var(--sp-4); margin-bottom: var(--sp-5); }
.page-hero__lead { max-width: 56ch; }

.service-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--sp-7);
  position: sticky;
  top: 65px; /* altura real del .site-header (~62px) + 3px de margen */
  background: rgba(21, 20, 15, 0.92);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.service-index a {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  transition: color var(--dur-fast);
  flex-shrink: 0;
  padding-block: 0.2em;
  white-space: nowrap;
}
.service-index a:hover { color: var(--color-accent-bright); }

@media (max-width: 960px) {
  .service-index {
    position: static;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    contain: layout;
    -webkit-overflow-scrolling: touch;
  }
  .service-detail { scroll-margin-top: 24px; }
}

.service-detail { scroll-margin-top: 140px; }

.service-detail__grid {
  display: grid;
  grid-template-columns: 1fr 3.6fr;
  gap: var(--sp-8);
}

.service-detail__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text-faint);
  line-height: 1.2;
  padding-top: 0.1em;
}

.service-detail__body .lead { margin-top: var(--sp-4); margin-bottom: var(--sp-7); }

.service-detail__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-6);
}

.service-detail__cols h3 { margin-bottom: var(--sp-3); }

.check-list li {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  padding-block: var(--sp-2);
  padding-left: var(--sp-5);
  position: relative;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-dim);
}

.service-detail__result { margin-bottom: var(--sp-7); }
.service-detail__result h3 { margin-bottom: var(--sp-3); }

/* Causa: .notice no tiene margin-bottom propio y .service-detail__result
   no tiene margin-top propio, así que cuando un .notice precede
   directamente a "Resultado esperado" (Transformación digital,
   Mantenimiento) quedan sin separación (gap medido: 0px, igual en móvil
   y desktop). Selector adyacente para no afectar a ningún otro .notice
   ni a los .service-detail__result que no siguen a uno; mismo token que
   ya usa el propio .notice en su margin-top, para mantener el ritmo de
   espaciado existente. */
.notice + .service-detail__result { margin-top: var(--sp-6); }

.service-detail__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 860px) {
  .service-detail__grid { grid-template-columns: 1fr; }
  .service-detail__cols { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* Causa: .display-2 usa font-size fijo (56px) sin clamp, y body (global.css)
   aplica overflow-wrap:break-word globalmente. En móvil, con el título
   ocupando un contenedor estrecho, palabras largas ("Automatización",
   "Transformación", "Mantenimiento"...) superan el ancho disponible por sí
   solas incluso sin partirse (medido: ~416-427px a 56px vs ~280px de
   contenedor a 320px), así que ese overflow-wrap heredado las corta a
   media palabra en vez de bajarlas de línea. Se corrige solo para los
   títulos de servicio (no se toca .display-2 en general, usado en otras
   páginas): tamaño reducido con clamp para que la palabra más larga quepa
   sin partirse (verificado: "Transformación" ~257-291px, por debajo del
   contenedor en los tres anchos móviles soportados) + overflow-wrap:normal
   y word-break:keep-all para impedir cualquier corte dentro de palabra,
   dejando que el salto ocurra solo entre palabras. */
@media (max-width: 640px) {
  .service-detail__body h2 {
    font-size: clamp(1.85rem, 9vw, 2.4rem);
    overflow-wrap: normal;
    word-break: keep-all;
  }
}