/* Layout "sales" — página de VENDAS Simbiose (Meta Ads). Mesmo vocabulário visual
 * do site sob o Manual v1.0 (2026): navy dominante · gradiente AÇÃO · Asap SemiExpanded
 * + Manrope · canto arredondado · filete. Autocontida: sem navegação, um destino só.
 * Escopo: .sales-simbiose.
 *
 * ⚠️ Fundo em gradiente leva rótulo NAVY. Branco reprova na ponta roxa (3,29:1). */
.sales-simbiose {
  --s-navy: #172249;
  --s-branco: #FFFFFF;
  --s-neutro-100: #F8F8FA;
  --s-neutro-200: #E3E4E9;
  --s-neutro-700: #414A6A;
  --s-linha-esc: #374162;
  --s-superficie: #252F54;
  --s-accent: #7EDBFB;
  --s-gradiente: linear-gradient(64deg, #9977FA 0%, #9779FA 25%, #8989FA 40%, #71A7FA 67%, #74B2FA 73%, #79C8FB 82%, #7EDBFB 100%);
  --s-muted: #979CAD;

  background: var(--s-branco);
  color: var(--s-navy);
  font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sales-simbiose ::selection { background: var(--s-accent); color: var(--s-navy); }

/* Seções — alternância clara/escura como no site */
.sales-simbiose .s-sec { padding: 4.5rem 0; }
@media (min-width: 768px) { .sales-simbiose .s-sec { padding: 6rem 0; } }
.sales-simbiose .s-shell { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.sales-simbiose .s-navy { background: var(--s-navy); color: var(--s-branco); }
.sales-simbiose .s-neutro { background: var(--s-neutro-100); color: var(--s-navy); }
.sales-simbiose .s-branco { background: var(--s-branco); color: var(--s-navy); }

/* Tipografia — títulos em caixa baixa (manual v2.0) */
.sales-simbiose h1,
.sales-simbiose h2,
.sales-simbiose h3 {
  font-family: var(--font-asap), sans-serif;
  font-stretch: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.sales-simbiose .s-h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: 1.04; font-weight: 700; }
.sales-simbiose .s-h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); line-height: 1.08; }
.sales-simbiose .s-rotulo {
  letter-spacing: .12em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--s-neutro-700);
}
.sales-simbiose .s-navy .s-rotulo { color: var(--s-accent); }
.sales-simbiose .s-sub { font-size: 1.125rem; line-height: 1.6; color: var(--s-neutro-700); max-width: 42rem; }
.sales-simbiose .s-navy .s-sub { color: #D4D4D8; }
.sales-simbiose .s-corrido { line-height: 1.65; color: var(--s-neutro-700); }
.sales-simbiose .s-navy .s-corrido { color: #D4D4D8; }

/* Dado numérico — mono */
.sales-simbiose .s-dado { font-family: var(--font-asap), sans-serif; font-stretch: normal; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.sales-simbiose .s-navy .s-dado { color: var(--s-accent); }

/* Cartão — filete e canto arredondado; a sombra continua fora do sistema */
.sales-simbiose .s-card { background: var(--s-branco); border: 1px solid var(--s-neutro-200); border-radius: 0.625rem; padding: 1.75rem; }
.sales-simbiose .s-num { font-size: 0.85rem; font-weight: 700; color: var(--s-navy); }

/* Botões */
.sales-simbiose .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-weight: 600; padding: 1rem 2rem; border: 1px solid transparent; border-radius: 999px; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; }
.sales-simbiose .s-btn-acao { background: var(--s-accent); background-image: var(--s-gradiente); color: var(--s-navy); }
.sales-simbiose .s-btn-acao:hover { transform: translateY(-2px); }
.sales-simbiose .s-btn-filete { background: transparent; border-color: currentColor; }
.sales-simbiose .s-navy .s-btn-filete { color: var(--s-branco); border-color: #52525B; }
.sales-simbiose .s-navy .s-btn-filete:hover { border-color: var(--s-branco); }
.sales-simbiose .s-btn-filete:hover { background: var(--s-navy); color: var(--s-branco); }

/* Filete de lista (mecanismo) */
.sales-simbiose .s-lista > * + * { border-top: 1px solid var(--s-linha-esc); }

/* Vídeo facade */
.sales-simbiose .s-video { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--s-neutro-200); background: #000; overflow: hidden; cursor: pointer; }
.sales-simbiose .s-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.sales-simbiose .s-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sales-simbiose .s-play { position: relative; background: var(--s-accent); background-image: var(--s-gradiente); color: var(--s-navy); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; padding: .6rem 1rem; }

/* FAQ */
.sales-simbiose details { border-bottom: 1px solid var(--s-neutro-200); }
.sales-simbiose summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; font-weight: 600; }
.sales-simbiose summary::-webkit-details-marker { display: none; }
.sales-simbiose summary .s-plus { transition: transform .15s ease; }
.sales-simbiose details[open] summary .s-plus { transform: rotate(45deg); }

@keyframes s-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.sales-simbiose .s-reveal { animation: s-fade .6s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .sales-simbiose .s-reveal { animation: none; } }

/* ── Formulário na página (manual v2.0: canto reto, filete 1px, sem sombra) ── */
.sales-simbiose .s-form {
  background: var(--s-superficie);
  border: 1px solid var(--s-linha-esc);
  border-radius: 0.625rem;
  box-shadow: none;
}
.sales-simbiose .s-form-titulo {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--s-branco);
}
.sales-simbiose .s-form-sub { font-size: 0.95rem; line-height: 1.6; color: var(--s-muted); }
.sales-simbiose .s-label {
  font-family: var(--s-mono, "Roboto Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.sales-simbiose .s-input {
  background: var(--s-navy);
  border: 1px solid var(--s-linha-esc);
  border-radius: 0.625rem;
  color: var(--s-branco);
  transition: border-color 0.2s ease;
}
.sales-simbiose .s-input::placeholder { color: #5A5A62; }
.sales-simbiose .s-input:focus {
  outline: none;
  border-color: var(--s-accent);
}
.sales-simbiose .s-form-nota { font-size: 0.75rem; line-height: 1.6; color: var(--s-muted); }
.sales-simbiose .s-form-erro {
  border-left: 2px solid #E23636;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: #FF9A9A;
}
.sales-simbiose .s-form input[type="checkbox"] { accent-color: var(--s-accent); }

/* ── Faixa de indicação (LP de licenciados) ── */
.sales-simbiose .s-indica {
  background: var(--s-superficie);
  border-bottom: 1px solid var(--s-linha-esc);
  border-radius: 0.625rem;
}
.sales-simbiose .s-indica-foto {
  width: 44px;
  height: 44px;
  border-radius: 0.625rem;
  object-fit: cover;
  border: 1px solid var(--s-linha-esc);
}