/* ==========================================================================
   GINNOA · Sub-page template — servicios/* y mai/*
   ========================================================================== */

.sub-breadcrumb {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}
.sub-breadcrumb a { color: var(--text-muted); }
.sub-breadcrumb a:hover { color: var(--text-brand); }
.sub-breadcrumb span { color: var(--text-secondary); }

.sub-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--section-py);
}

.sub-section {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 900px) {
  .sub-section { grid-template-columns: 1fr; gap: var(--space-5); }
}

.sub-section__title {
  font-size: var(--heading-4-size);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  position: sticky;
  top: 100px;
}
.sub-section__title .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}
@media (max-width: 900px) {
  .sub-section__title { position: static; }
}

.sub-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.sub-section__body p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.sub-section__body p strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.sub-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.sub-feature {
  padding: var(--space-5);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sub-feature h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.sub-feature p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Output box — qué te llevas */
.sub-output {
  background: linear-gradient(135deg, var(--brand-accent-subtle), var(--surface-page));
  border: 1px solid var(--color-amber-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.sub-output h3 {
  font-size: var(--heading-5-size);
  margin-bottom: var(--space-4);
  color: var(--color-amber-800);
}
.sub-output .check-list li::before {
  background: var(--color-amber-500);
  color: var(--text-on-accent);
}