/* =============================================================
   single-solucoes.css — Focofy Factory
   Template: single-solucoes.php
   Contract: Design Tokens v3.6
   ============================================================= */

/* ── Tokens ─────────────────────────────────────────────────── */
.solucao-single,
.solucoes-archive {
  --s-heading:     var(--color-heading);
  --s-text:        var(--color-text);
  --s-text-muted:  var(--color-text-muted);
  --s-accent:      var(--color-accent);
  --s-surface-1:   var(--color-surface-1);
  --s-surface-2:   var(--color-surface-2);
  --s-dark:        var(--color-surface-dark, #0a0d14);
  --s-border:      var(--color-border-subtle);
  --s-radius:      var(--radius-2xl);
  --s-radius-sm:   var(--radius-md);
  --s-shadow:      var(--shadow-md);
}

/* ── Shared section header ──────────────────────────────────── */
.solucao-section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.solucao-section-header__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--fw-bold);
  color: var(--s-heading);
  line-height: var(--lh-tight);
  margin: 0;
}

/* ── HERO ───────────────────────────────────────────────────── */
.solucao-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: var(--s-dark);
  overflow: hidden;
}

.solucao-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  z-index: 0;
}

.solucao-hero .focofy-container {
  position: relative;
  z-index: 1;
}

.solucao-hero__inner {
  padding-block: var(--space-16);
  max-width: 52rem;
}

.solucao-hero__eyebrow {
  color: var(--s-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.solucao-hero__title {
  font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: #fff;
  margin-bottom: var(--space-4);
}

.solucao-hero__resumo {
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
  color: color-mix(in srgb, white 80%, transparent);
  margin-bottom: var(--space-6);
}

.solucao-hero__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.solucao-hero__benefit-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: color-mix(in srgb, white 85%, transparent);
  font-size: var(--font-size-sm);
}

.solucao-hero__benefit-icon {
  color: var(--s-accent);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.solucao-hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.solucao-hero__meta {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, white 15%, transparent);
}

.solucao-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.solucao-hero__meta-label {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, white 55%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.solucao-hero__meta-value {
  font-size: var(--font-size-base);
  color: #fff;
  font-weight: var(--fw-semibold);
}

/* ── PROBLEMA / SOLUÇÃO ─────────────────────────────────────── */
.solucao-problema {
  padding-block: var(--section-padding-y, var(--space-16));
}

.solucao-problema__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}

.solucao-problema__heading {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-bold);
  color: var(--s-heading);
  margin-bottom: var(--space-4);
}

.solucao-problema__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.solucao-problema__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--s-text);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-error, #ef4444) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error, #ef4444) 20%, transparent);
  border-radius: var(--s-radius-sm);
}

.solucao-problema__icon {
  color: var(--color-error, #ef4444);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* ── BENEFÍCIOS ─────────────────────────────────────────────── */
.solucao-beneficios {
  padding-block: var(--section-padding-y, var(--space-16));
  background: var(--s-surface-2);
}

.solucao-beneficios__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.solucao-beneficios__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--s-surface-1);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-sm);
  box-shadow: var(--s-shadow);
}

.solucao-beneficios__icon {
  color: var(--s-accent);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

.solucao-beneficios__text {
  font-size: var(--font-size-sm);
  color: var(--s-text);
  line-height: var(--lh-relaxed);
}

/* ── DIFERENCIAIS ───────────────────────────────────────────── */
.solucao-diferenciais {
  padding-block: var(--section-padding-y, var(--space-16));
}

.solucao-diferenciais__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.solucao-diferenciais__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 3px solid var(--s-accent);
}

.solucao-diferenciais__icon {
  color: var(--s-accent);
  flex-shrink: 0;
}

.solucao-diferenciais__text {
  font-size: var(--font-size-sm);
  color: var(--s-text);
  font-weight: var(--fw-medium);
}

/* ── PROCESSO ───────────────────────────────────────────────── */
.solucao-processo {
  padding-block: var(--section-padding-y, var(--space-16));
  background: var(--s-dark);
}

.solucao-processo .solucao-section-header__title {
  color: #fff;
}

.solucao-processo__steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: steps;
}

.solucao-processo__step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.solucao-processo__step-number {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--s-accent);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.solucao-processo__step-body {
  flex: 1;
}

.solucao-processo__step-title {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: #fff;
  margin-bottom: var(--space-1);
}

.solucao-processo__step-desc {
  font-size: var(--font-size-sm);
  color: color-mix(in srgb, white 70%, transparent);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── DEPOIMENTOS ────────────────────────────────────────────── */
.solucao-depoimentos {
  padding-block: var(--section-padding-y, var(--space-16));
  background: var(--s-surface-2);
}

.solucao-depoimentos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

.solucao-depoimentos__card {
  background: var(--s-surface-1);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius);
  padding: var(--space-6);
  box-shadow: var(--s-shadow);
  margin: 0;
}

.solucao-depoimentos__quote {
  font-size: var(--font-size-base);
  font-style: italic;
  color: var(--s-text);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-4);
}

.solucao-depoimentos__author {
  font-size: var(--font-size-sm);
  color: var(--s-text-muted);
}

.solucao-depoimentos__author strong {
  color: var(--s-heading);
}

/* ── FAQ ────────────────────────────────────────────────────── */
.solucao-faq {
  padding-block: var(--section-padding-y, var(--space-16));
}

.solucao-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.solucao-faq__item {
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-sm);
  overflow: hidden;
}

.solucao-faq__question {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--s-heading);
  padding: var(--space-4) var(--space-5);
  background: var(--s-surface-2);
  cursor: default;
}

.solucao-faq__answer {
  font-size: var(--font-size-sm);
  color: var(--s-text);
  line-height: var(--lh-relaxed);
  padding: var(--space-4) var(--space-5);
  margin: 0;
  background: var(--s-surface-1);
  border-top: 1px solid var(--s-border);
}

/* ── CTA FINAL ──────────────────────────────────────────────── */
.solucao-cta-final {
  padding-block: var(--section-padding-y, var(--space-16));
  background: var(--s-accent);
}

.solucao-cta-final__inner {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.solucao-cta-final__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--fw-extrabold);
  color: #fff;
  margin-bottom: var(--space-3);
}

.solucao-cta-final__sub {
  font-size: var(--font-size-lg);
  color: color-mix(in srgb, white 85%, transparent);
  margin-bottom: var(--space-6);
}

.solucao-cta-final__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Archive ────────────────────────────────────────────────── */
.solucoes-archive__hero {
  background: var(--s-dark);
  padding-block: var(--space-16);
}

.solucoes-archive__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--fw-extrabold);
  color: #fff;
  margin-bottom: var(--space-3);
}

.solucoes-archive__desc {
  color: color-mix(in srgb, white 75%, transparent);
  font-size: var(--font-size-lg);
}

.solucoes-archive__content {
  padding-block: var(--section-padding-y, var(--space-16));
}

.solucoes-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

.solucoes-archive__pagination {
  margin-top: var(--space-10);
  display: flex;
  justify-content: center;
}

.solucoes-archive__empty {
  text-align: center;
  color: var(--s-text-muted);
  padding-block: var(--space-16);
}

/* ── Responsivo single ──────────────────────────────────────── */
@media (max-width: 1023px) {
  .solucao-problema__grid {
    grid-template-columns: 1fr;
  }
  .solucoes-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .solucao-hero__inner {
    padding-block: var(--space-12);
  }

  .solucao-hero__meta {
    gap: var(--space-4);
  }

  .solucao-hero__ctas {
    flex-direction: column;
  }

  .solucao-processo__steps {
    grid-template-columns: 1fr;
  }

  .solucoes-archive__grid {
    grid-template-columns: 1fr;
  }

  .solucao-section-header__title {
    font-size: var(--font-size-2xl);
  }
}