.service-page { 
  padding: var(--space-xl) 0; 
}

/* Asegura la grilla de 'Otros servicios' aunque no estemos en index */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: var(--space-xl);
}

.service-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.service-text {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.7;
}
.service-text strong { color: var(--color-primary); }

/* Carrusel */
.service-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--color-light-bg);
}
.service-carousel__viewport { width: 100%; overflow: hidden; }
.service-carousel__track {
  display: flex;
  transition: transform 350ms ease-in-out;
}
.service-carousel__slide { flex: 0 0 100%; max-width: 100%; }
.service-carousel__slide img {
  width: 100%; height: auto; display: block; object-fit: cover;
}
.service-carousel__ctrl {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  border: none; background: rgba(0,0,0,0.4); color: #fff;
  width: 40px; height: 40px; border-radius: var(--radius-sm); cursor: pointer;
}
.service-carousel__ctrl--prev { left: 10px; }
.service-carousel__ctrl--next { right: 10px; }

/* CTA centrada */
.services-cta--center {
  margin-top: var(--space-xl);
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--space-md); text-align: center;
}
.services-cta--center .btn { margin-left: 0; }

/* Responsive */
@media (max-width: 900px) {
  .service-wrapper { grid-template-columns: 1fr; }
}

/* 2) Cabecera de la página de servicio: centrado y espaciados */
/* Quitar hueco bajo el header en la página de detalle */
.service-page {
  /* antes tenías: padding: var(--space-xl) 0; */
  padding: 0 0 var(--space-xl);
}

/* Cabecera del bloque (título y subtítulo centrados y con aire) */
.service-page .company-desc__header {
  text-align: center;
  margin-top: 0;
  margin-bottom: var(--space-xl);
}
.service-page .company-desc__header .section__title {
  margin-top: var(--space-xl); 
  margin-bottom: var(--space-xl);
  line-height: 1.15;
}
#service-subtitle {
  text-align: center;
  max-width: 960px;
  margin: 0 auto var(--space-lg);
}

/* Dos columnas */
.service-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.service-text { font-size: var(--text-base); color: var(--color-text); line-height: 1.7; }
.service-text strong { color: var(--color-primary); }

/* Carrusel usa el componente global: sólo añade diferencias si quieres */
@media (max-width: 900px) {
  .service-wrapper { grid-template-columns: 1fr; }
}