/* ===========================================================================
   Seções da home (app/views/home/index.html.erb, servida nas três lojas) e
   das páginas de segmento, que reaproveitam recursos, telas e FAQ. A moldura
   (tokens, botões, cabeçalho, rodapé) está em site.css; as seções de venda
   compartilhadas (público, oferta, depoimentos, blog), em offer_sections.css.
   =========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.fc-hero {
  padding: 84px 0 0;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--fc-accent-soft), transparent 70%),
    var(--fc-surface);
  overflow: hidden;
}

.fc-hero__copy {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.fc-hero h1 {
  margin: 22px 0 18px;
  font-size: clamp(2.3rem, 5.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.fc-hero h1 em {
  font-style: normal;
  color: var(--fc-accent-ink);
}

.fc-hero__copy > p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--fc-muted);
}

.fc-hero__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* A prova em pílulas, sem separador entre os itens: com "•" no meio, a linha
   quebrava com o ponto sozinho no começo da segunda. */
.fc-hero__proof {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--fc-muted);
}

/* inline-block, e não flex: em flex cada trecho de texto do item vira uma
   caixa e ganha o gap, e "R$ 99,90, pagamento" saía com espaço antes da
   vírgula. */
.fc-hero__proof li {
  display: inline-block;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--fc-line);
  background: var(--fc-surface);
}

.fc-hero__proof li::before {
  content: "";
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fc-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

.fc-hero__proof strong {
  color: var(--fc-ink);
}

.fc-hero__screen {
  max-width: 1040px;
  margin: 56px auto -1px;
}

/* Hero em duas colunas, das páginas de segmento: texto à esquerda, tela à
   direita, para a página abrir já mostrando o recurso que o título promete. */
.fc-hero--split .fc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 72px;
}

.fc-hero--split .fc-hero__copy {
  max-width: none;
  margin: 0;
  text-align: left;
}

.fc-hero--split .fc-hero__copy > p {
  margin: 0;
}

.fc-hero--split h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}

.fc-hero--split .fc-hero__actions,
.fc-hero--split .fc-hero__proof {
  justify-content: flex-start;
}

/* --- Números (prova social) ---------------------------------------------- */

.fc-stats {
  padding: 40px 0;
  background: var(--fc-bg);
  border-top: 1px solid var(--fc-line);
  border-bottom: 1px solid var(--fc-line);
}

.fc-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.fc-stat {
  text-align: center;
}

.fc-stat strong {
  display: block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fc-ink);
}

.fc-stat span {
  font-size: 0.92rem;
  color: var(--fc-muted);
}

/* --- Dores (páginas de segmento) ----------------------------------------- */

.fc-pains {
  background: var(--fc-surface);
}

.fc-pains__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.fc-pain {
  padding: 26px;
  border-radius: var(--fc-radius);
  background: var(--fc-bg);
  border: 1px solid var(--fc-line);
}

.fc-pain__before {
  display: block;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b91c1c;
}

.fc-pain h3 {
  font-size: 1.08rem;
  margin-bottom: 10px;
}

.fc-pain p {
  font-size: 0.95rem;
  color: var(--fc-muted);
}

.fc-pain__after {
  margin-top: 12px;
}

.fc-pain p strong {
  color: var(--fc-accent-ink);
}

/* --- Recursos ------------------------------------------------------------ */

.fc-features {
  background: var(--fc-surface);
}

.fc-features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.fc-feature {
  padding: 28px;
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  background: var(--fc-surface);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fc-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -28px rgba(15, 23, 42, 0.45);
}

.fc-feature__icon {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--fc-accent-soft);
  color: var(--fc-accent-ink);
}

.fc-feature__icon svg {
  width: 24px;
  height: 24px;
}

.fc-feature h3 {
  margin: 18px 0 8px;
  font-size: 1.12rem;
}

.fc-feature p {
  font-size: 0.97rem;
  color: var(--fc-muted);
}

.fc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.fc-chips li {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--fc-line);
  background: var(--fc-bg);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fc-muted);
}

/* --- Telas --------------------------------------------------------------- */

.fc-showcase {
  background: var(--fc-bg);
  border-top: 1px solid var(--fc-line);
  border-bottom: 1px solid var(--fc-line);
}

.fc-showcase__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}

.fc-showcase__row + .fc-showcase__row {
  margin-top: 88px;
}

.fc-showcase__row--flip .fc-showcase__copy {
  order: 2;
}

.fc-showcase__copy h2 {
  margin: 16px 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.fc-showcase__copy p {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--fc-muted);
}

.fc-showcase__copy ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.fc-showcase__copy li {
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  color: var(--fc-ink);
}

.fc-showcase__copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fc-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Link de "saiba mais" embaixo do texto de uma tela: a home mostra a tela e
   uma frase; a explicação inteira mora na página do recurso. */
.fc-showcase__more {
  margin-top: 20px;
}

.fc-showcase__more a {
  font-weight: 700;
  color: var(--fc-accent-ink);
}

/* Link para a lista completa, embaixo dos cards e chips de recurso. */
.fc-features__more {
  margin-top: 28px;
  text-align: center;
  font-size: 1rem;
}

.fc-features__more a {
  font-weight: 700;
  color: var(--fc-accent-ink);
}

/* --- Módulos ------------------------------------------------------------- */

.fc-modules {
  background: var(--fc-surface);
}

.fc-modules__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.fc-module {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--fc-line);
  border-radius: var(--fc-radius);
  background: var(--fc-surface);
  scroll-margin-top: 90px;
}

.fc-module__media {
  margin: -28px -28px 22px;
  border-radius: var(--fc-radius) var(--fc-radius) 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--fc-line);
  background: var(--fc-bg);
}

.fc-module__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
}

.fc-module__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fc-module__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--fc-bg);
  border: 1px solid var(--fc-line);
}

.fc-module__icon .module-icon {
  width: 30px;
  height: 30px;
}

.fc-module h3 {
  font-size: 1.12rem;
}

.fc-module__tagline {
  margin-top: 16px;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--fc-ink);
  font-weight: 500;
}

.fc-module__list {
  flex: 1 1 auto;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.fc-module__list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fc-muted);
}

.fc-module__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fc-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: center;
}

.fc-module__foot {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--fc-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fc-module__price strong {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.fc-module__price span {
  font-size: 0.86rem;
  color: var(--fc-muted);
}

/* --- FAQ ----------------------------------------------------------------- */

.fc-faq {
  background: var(--fc-surface);
}

.fc-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
}

.fc-faq__list {
  display: grid;
  gap: 10px;
}

.fc-faq__list details {
  border: 1px solid var(--fc-line);
  border-radius: 14px;
  background: var(--fc-surface);
  padding: 0 22px;
}

.fc-faq__list details[open] {
  border-color: var(--fc-accent);
}

.fc-faq__list summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 32px 18px 0;
  position: relative;
  font-weight: 700;
  font-size: 1rem;
}

.fc-faq__list summary::-webkit-details-marker {
  display: none;
}

.fc-faq__list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fc-accent-soft);
  color: var(--fc-accent-ink);
  font-weight: 800;
}

.fc-faq__list details[open] summary::after {
  content: "–";
}

.fc-faq__list details p {
  padding: 0 0 20px;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--fc-muted);
}

.fc-faq__more {
  margin-top: 14px;
}

.fc-faq__list details a {
  color: var(--fc-accent-ink);
  font-weight: 700;
}

/* --- Responsivo ---------------------------------------------------------- */

@media (max-width: 1024px) {
  .fc-features__grid,
  .fc-modules__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .fc-hero--split .fc-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 48px;
  }

  .fc-showcase__row,
  .fc-showcase__row--flip {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fc-showcase__row--flip .fc-showcase__copy {
    order: 0;
  }

  .fc-showcase__row + .fc-showcase__row {
    margin-top: 64px;
  }

  .fc-faq__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .fc-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fc-pains__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .fc-hero {
    padding-top: 56px;
  }

  .fc-hero__copy > p {
    font-size: 1.05rem;
  }

  .fc-hero__actions .btn {
    width: 100%;
  }

  .fc-hero__proof li {
    font-size: 0.86rem;
  }

  .fc-stat strong {
    font-size: 1.5rem;
  }

  .fc-features__grid,
  .fc-modules__grid {
    grid-template-columns: 1fr;
  }
}