/* =============================================================
   sec-single-solucao.css — Focofy Factory v1.1
   Seção: Single Solução (detalhe da solução via Page Builder)
   Contract: Design Tokens v3.6 / Responsive Contract v1.3

   Modelado sobre sec-service-single.css (mesma arquitetura).
   BEM root: .focofy-solucao-single
   ============================================================= */

/* -------------------------------------------------------------
   Tokens locais — derivados da Camada 2 (nunca --ds-* direto)
   ------------------------------------------------------------- */
.focofy-solucao-single {
  --ss-gap:             var(--grid-gap);
  --ss-content-max:     var(--content-max);
  --ss-media-max:       540px;

  --ss-title-color:     var(--color-heading);
  --ss-text-color:      var(--color-text);
  --ss-muted-color:     var(--color-text-muted);

  --ss-badge-bg:        color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-1));
  --ss-badge-border:    color-mix(in srgb, var(--color-accent) 18%, var(--color-border-subtle));
  --ss-badge-color:     var(--color-heading);

  --ss-meta-bg:         var(--color-surface-2);
  --ss-meta-border:     var(--color-border-subtle);
  --ss-meta-label:      var(--color-text-muted);
  --ss-meta-value:      var(--color-text);

  --ss-item-bg:         var(--color-surface-2);
  --ss-item-border:     var(--color-border-subtle);
  --ss-item-color:      var(--color-text);

  --ss-pill-bg:         color-mix(in srgb, var(--color-accent) 8%, var(--color-surface-2));
  --ss-pill-border:     color-mix(in srgb, var(--color-accent) 14%, var(--color-border-subtle));

  --ss-divider:         var(--color-border-subtle);

  color: var(--color-text);
}

/* Fundo escuro */
.focofy-section[data-bg="dark"] .focofy-solucao-single,
.focofy-section--sec-single-solucao[data-bg="dark"] .focofy-solucao-single {
  --ss-meta-bg:         var(--color-surface-3);
  --ss-meta-border:     var(--color-border-strong);
  --ss-item-bg:         var(--color-surface-3);
  --ss-item-border:     var(--color-border-strong);
}

/* Fundo accent / gradient */
.focofy-section[data-bg="accent"] .focofy-solucao-single,
.focofy-section[data-bg="gradient"] .focofy-solucao-single {
  --ss-meta-bg:         color-mix(in srgb, var(--color-surface-1) 88%, transparent);
  --ss-item-bg:         color-mix(in srgb, var(--color-surface-1) 88%, transparent);
}

/* -------------------------------------------------------------
   Raiz
   ------------------------------------------------------------- */
.focofy-solucao-single {
  position: relative;
}

/* -------------------------------------------------------------
   Body — grade interna (mídia + conteúdo)
   ------------------------------------------------------------- */
.focofy-solucao-single__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ss-gap);
  align-items: start;
}

/* Layouts que ficam sempre em 1 coluna */
.focofy-solucao-single--layout-stacked .focofy-solucao-single__body,
.focofy-solucao-single--layout-hero    .focofy-solucao-single__body,
.focofy-solucao-single--layout-compact .focofy-solucao-single__body {
  grid-template-columns: 1fr;
}

/* -------------------------------------------------------------
   Mídia
   ------------------------------------------------------------- */
.focofy-solucao-single__media {
  position: relative;
  width: 100%;
  max-width: var(--ss-media-max);
}

.focofy-solucao-single--media-top      .focofy-solucao-single__media,
.focofy-solucao-single--layout-stacked .focofy-solucao-single__media,
.focofy-solucao-single--layout-hero    .focofy-solucao-single__media,
.focofy-solucao-single--layout-compact .focofy-solucao-single__media {
  max-width: 100%;
}

.focofy-solucao-single__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--ss-meta-border);
  box-shadow: var(--shadow-lg);
  background: var(--ss-meta-bg);
}

/* -------------------------------------------------------------
   Conteúdo
   ------------------------------------------------------------- */
.focofy-solucao-single__content {
  width: 100%;
  max-width: var(--ss-content-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.focofy-solucao-single.no-media .focofy-solucao-single__content {
  max-width: var(--ss-content-max);
}

.focofy-solucao-single--width-narrow .focofy-solucao-single__content { max-width: 680px; }
.focofy-solucao-single--width-wide   .focofy-solucao-single__content { max-width: 960px; }

.focofy-solucao-single--align-center .focofy-solucao-single__content {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.focofy-solucao-single--align-left .focofy-solucao-single__content {
  text-align: left;
  align-items: flex-start;
}

/* -------------------------------------------------------------
   Eyebrow (label / badge acima do título)
   ------------------------------------------------------------- */
.focofy-solucao-single__eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ss-badge-border);
  border-radius: var(--radius-full);
  background: var(--ss-badge-bg);
  color: var(--ss-badge-color);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.focofy-solucao-single--align-center .focofy-solucao-single__eyebrow {
  align-self: center;
}

/* -------------------------------------------------------------
   Título
   ------------------------------------------------------------- */
.focofy-solucao-single__title {
  margin: 0;
  color: var(--ss-title-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* -------------------------------------------------------------
   Introdução / resumo
   ------------------------------------------------------------- */
.focofy-solucao-single__intro {
  color: var(--ss-muted-color);
  font-size: var(--font-size-lg);
  line-height: var(--lh-relaxed);
}

.focofy-solucao-single__intro p { margin: 0 0 var(--space-4); }
.focofy-solucao-single__intro p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------
   Meta (preço / duração / formato)
   ------------------------------------------------------------- */
.focofy-solucao-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

.focofy-solucao-single--align-center .focofy-solucao-single__meta {
  justify-content: center;
}

.focofy-solucao-single__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 120px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ss-meta-border);
  border-radius: var(--radius-lg);
  background: var(--ss-meta-bg);
}

.focofy-solucao-single__meta-label {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ss-meta-label);
}

.focofy-solucao-single__meta-value {
  font-size: var(--font-size-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--ss-meta-value);
}

/* Variante inline */
.focofy-solucao-single--meta-inline .focofy-solucao-single__meta {
  gap: var(--space-5);
  align-items: center;
}

.focofy-solucao-single--meta-inline .focofy-solucao-single__meta-item {
  background: transparent;
  border: 0;
  padding: 0;
  min-width: auto;
  border-radius: 0;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* Variante pills */
.focofy-solucao-single--meta-pills .focofy-solucao-single__meta-item {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  min-width: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
}

/* Variante cards */
.focofy-solucao-single--meta-cards .focofy-solucao-single__meta-item {
  min-width: 140px;
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------
   Títulos genéricos de sub-seção (compartilhado por todas)
   PHP usa .focofy-solucao-single__section-title
   ------------------------------------------------------------- */
.focofy-solucao-single__section-title {
  margin: 0 0 var(--space-3);
  color: var(--ss-title-color);
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}

/* -------------------------------------------------------------
   Problemas que resolve
   ------------------------------------------------------------- */
.focofy-solucao-single__problemas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.focofy-solucao-single__problemas-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.focofy-solucao-single__problema-item {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 1px solid var(--ss-item-border);
  border-radius: var(--radius-lg);
  background: var(--ss-item-bg);
  color: var(--ss-item-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

.focofy-solucao-single__problema-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent-2) 56%, var(--color-accent)));
  transform: translateY(-50%);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* -------------------------------------------------------------
   Benefícios
   ------------------------------------------------------------- */
.focofy-solucao-single__benefits-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.focofy-solucao-single__benefits {
  margin: 0;
  padding: 0;
}

/* Lista */
.focofy-solucao-single__benefits--list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

.focofy-solucao-single__benefits--list li {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 1px solid var(--ss-item-border);
  border-radius: var(--radius-lg);
  background: var(--ss-item-bg);
  color: var(--ss-item-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

.focofy-solucao-single__benefits--list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent-2) 56%, var(--color-accent)));
  transform: translateY(-50%);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* Pills */
.focofy-solucao-single__benefits--pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.focofy-solucao-single--align-center .focofy-solucao-single__benefits--pills {
  justify-content: center;
}

.focofy-solucao-single__benefit-pill {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--space-8) + var(--space-2));
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--ss-pill-border);
  background: var(--ss-pill-bg);
  color: var(--ss-item-color);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

/* Cards */
.focofy-solucao-single__benefits--cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.focofy-solucao-single__benefit-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ss-item-border);
  background: var(--ss-item-bg);
  color: var(--ss-item-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-relaxed);
  box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------
   Diferenciais
   ------------------------------------------------------------- */
.focofy-solucao-single__diferenciais-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.focofy-solucao-single__diferenciais-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.focofy-solucao-single__diferencial-item {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
  border: 1px solid var(--ss-item-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent-2) 6%, var(--ss-item-bg));
  color: var(--ss-item-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}

.focofy-solucao-single__diferencial-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-2);
  transform: translateY(-50%);
  box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--color-accent-2) 18%, transparent);
}

/* -------------------------------------------------------------
   Processo / etapas
   PHP: .focofy-solucao-single__steps / __step / __step-num / __step-body
   ------------------------------------------------------------- */
.focofy-solucao-single__processo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.focofy-solucao-single__steps {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.focofy-solucao-single__step {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ss-item-border);
  border-radius: var(--radius-lg);
  background: var(--ss-item-bg);
}

.focofy-solucao-single__step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--color-accent), color-mix(in srgb, var(--color-accent-2) 40%, var(--color-accent)));
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.focofy-solucao-single__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.focofy-solucao-single__step-title {
  display: block;
  color: var(--ss-title-color);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.focofy-solucao-single__step-desc {
  margin: 0;
  color: var(--ss-muted-color);
  font-size: var(--font-size-sm);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------------------
   Depoimentos relacionados
   ------------------------------------------------------------- */
.focofy-solucao-single__depoimentos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.focofy-solucao-single__depoimentos-grid {
  display: grid;
  gap: var(--space-4);
}

.focofy-solucao-single__depoimento-card {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--ss-item-border);
  border-radius: var(--radius-xl);
  background: var(--ss-item-bg);
  box-shadow: var(--shadow-sm);
}

.focofy-solucao-single__depoimento-quote {
  margin: 0 0 var(--space-4);
  color: var(--ss-text-color);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
  font-style: italic;
}

.focofy-solucao-single__depoimento-author {
  color: var(--ss-muted-color);
  font-size: var(--font-size-sm);
}

/* -------------------------------------------------------------
   FAQ
   PHP usa <dl> + <dt> + <dd> dentro de .faq-list
   ------------------------------------------------------------- */
.focofy-solucao-single__faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.focofy-solucao-single__faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.focofy-solucao-single__faq-item {
  border: 1px solid var(--ss-divider);
  border-radius: var(--radius-lg);
  background: var(--ss-item-bg);
  overflow: hidden;
}

.focofy-solucao-single__faq-question {
  padding: var(--space-4) var(--space-5);
  margin: 0;
  color: var(--ss-title-color);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.focofy-solucao-single__faq-answer {
  padding: 0 var(--space-5) var(--space-4);
  margin: 0;
  color: var(--ss-muted-color);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------------------
   Descrição completa (prose)
   ------------------------------------------------------------- */
.focofy-solucao-single__descricao {
  color: var(--ss-text-color);
  font-size: var(--font-size-base);
  line-height: var(--lh-relaxed);
}

.focofy-solucao-single__descricao > :first-child { margin-top: 0; }
.focofy-solucao-single__descricao > :last-child  { margin-bottom: 0; }

/* -------------------------------------------------------------
   CTA
   ------------------------------------------------------------- */
.focofy-solucao-single__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.focofy-solucao-single--align-center .focofy-solucao-single__cta {
  justify-content: center;
}

/* -------------------------------------------------------------
   Variante hero
   ------------------------------------------------------------- */
.focofy-solucao-single--layout-hero {
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 36%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--color-accent-2) 8%, transparent), transparent 36%),
    var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------------
   Acessibilidade
   ------------------------------------------------------------- */
.focofy-solucao-single a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ds-focus-size, 3px) color-mix(in srgb, var(--ds-focus-color, var(--color-accent)) var(--ds-focus-opacity-pct, 50%), transparent);
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------
   Desktop — ≥ 1024px
   ------------------------------------------------------------- */
@media (min-width: 1024px) {             /* --bp-desktop */

  /* Split: 2 colunas */
  .focofy-solucao-single--layout-split .focofy-solucao-single__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Order rules — válidas apenas em 2 colunas */
  .focofy-solucao-single__body.is-media-left  .focofy-solucao-single__media   { order: 1; }
  .focofy-solucao-single__body.is-media-left  .focofy-solucao-single__content { order: 2; }
  .focofy-solucao-single__body.is-media-right .focofy-solucao-single__content { order: 1; }
  .focofy-solucao-single__body.is-media-right .focofy-solucao-single__media   { order: 2; }

  .focofy-solucao-single__depoimentos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------
   Mobile — < 768px
   ------------------------------------------------------------- */
@media (max-width: 767px) {              /* abaixo de --bp-tablet */

  .focofy-solucao-single { --ss-gap: var(--space-8); }

  .focofy-solucao-single__title { font-size: var(--font-size-3xl); }

  .focofy-solucao-single__intro { font-size: var(--font-size-base); }

  .focofy-solucao-single__meta {
    flex-direction: column;
    gap: var(--space-2);
  }

  .focofy-solucao-single--meta-pills .focofy-solucao-single__meta,
  .focofy-solucao-single--meta-inline .focofy-solucao-single__meta {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .focofy-solucao-single__meta-item {
    width: 100%;
    min-width: 0;
  }

  .focofy-solucao-single--meta-pills .focofy-solucao-single__meta-item,
  .focofy-solucao-single--meta-inline .focofy-solucao-single__meta-item {
    width: auto;
  }

  .focofy-solucao-single__benefits--cards {
    grid-template-columns: 1fr;
  }

  .focofy-solucao-single__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .focofy-solucao-single--layout-hero {
    padding: var(--space-6);
  }
}

/* -------------------------------------------------------------
   Prefers reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .focofy-solucao-single__img { transition: none; }
}

/* -------------------------------------------------------------
   Page-level spacing reset
   The inherited .site-main padding (80px top/bottom) and the
   .focofy-cpt-pb-sections margin-top (80px) stack up to 160px
   before the hero and before the footer. Sections manage their
   own vertical rhythm, so we zero these out here.
   ------------------------------------------------------------- */
.focofy-solucao-single--pb {
  padding-top: 0;
  padding-bottom: 0;
}

.focofy-solucao-single--pb .focofy-cpt-pb-sections {
  margin-top: 0;
  margin-bottom: 0;
}