/* Home — Serviços: tema escuro (.theme-dark) sobre a estrutura .aud/.dif (clientes.css + diferenciais.css).
   Dois atos (Mentoria / Consultoria) com quadro "Evandro faz" x "Você faz". Motor: js/stage.js. */

.sv .section__lead { color: var(--color-foreground-muted); }

/* Cada aba com a própria altura: o ato inativo sai do fluxo (sem espaço vazio antes do botão) */
.sv.aud--ready .aud-act { grid-area: auto; }
.sv.aud--ready .aud-act:not(.is-active) { display: none; }

/* Abas no padrão Material/Android: só texto + linha inferior; a aba ativa ganha o indicador azul */
.sv-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; max-width: none; margin: 0 0 clamp(1.75rem, 4vh, 2.5rem); border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.sv-seg { position: relative; display: flex; align-items: flex-start; gap: var(--primitive-spacing-3); padding: var(--primitive-spacing-3) var(--primitive-spacing-3) var(--primitive-spacing-4) 0; border: 0; border-radius: 0; background: none; color: var(--color-foreground-muted); transition: color 200ms ease; }
.sv-seg + .sv-seg { padding-left: var(--primitive-spacing-4); }
.sv-seg[aria-current="true"] { color: var(--color-heading); }
@media (hover: hover) and (pointer: fine) { .sv-seg:hover { color: var(--color-heading); } }
.sv-seg__num { font-family: var(--font-mono); font-size: var(--type-small-size); font-weight: 700; line-height: 1.6; color: var(--color-foreground-muted); transition: color 200ms ease; }
.sv-seg[aria-current="true"] .sv-seg__num { color: var(--color-accent); }
.sv-seg .aud-seg__label { display: grid; gap: 2px; }
.sv-seg strong { font-family: var(--font-heading); font-size: clamp(0.9375rem, 1.7vw, 1.125rem); line-height: 1.3; color: inherit; }
.sv-seg small { font-size: var(--type-small-size); font-weight: 400; color: var(--color-foreground-muted); }
/* indicador: barra de 3 px sobre a linha inferior, que "escorrega" de uma aba para a outra */
.sv-seg .aud-seg__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; overflow: hidden; }
.sv-seg .aud-seg__bar i { background: var(--color-accent); transition: transform 280ms cubic-bezier(0.77, 0, 0.175, 1); }
.sv-seg:first-child .aud-seg__bar i { transform-origin: right center; }
.sv-seg:last-child .aud-seg__bar i { transform-origin: left center; }
.sv-seg:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; border-radius: 4px; }
@media (max-width: 40rem) { .sv-seg { gap: var(--primitive-spacing-2); } .sv-seg strong { font-size: 0.875rem; } .sv-seg small { font-size: var(--type-caption-size); } }

/* Ato: texto à esquerda, quadro à direita */
/* mesma grade das abas: 2 colunas iguais com o mesmo espaçamento, o quadro alinha com a aba "Consultoria" */
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; row-gap: var(--primitive-spacing-8); align-items: center; }
.sv-copy { padding-right: clamp(0rem, 3vw, 2.5rem); }
@media (max-width: 52rem) { .sv-grid { grid-template-columns: 1fr; } }
.sv-copy .aud-sub { max-width: 28rem; }
.sv-note { display: flex; gap: var(--primitive-spacing-2); align-items: flex-start; margin: var(--primitive-spacing-4) 0 0; max-width: 28rem; font-size: var(--type-small-size); font-weight: 600; color: var(--color-foreground); }
.sv-note .icon { flex: none; margin-top: 2px; color: var(--primitive-color-whatsapp-500); }
.sv-more { display: inline-flex; align-items: center; gap: var(--primitive-spacing-2); margin-top: var(--primitive-spacing-6); font-family: var(--font-heading); font-weight: 700; color: var(--color-accent); text-decoration: none; }
.sv-more .icon { transition: transform 200ms var(--ease-out, ease-out); }
.sv-more:hover { color: var(--primitive-color-blue-300); }
.sv-more:hover .icon { transform: translateX(4px); }

/* Quadro com as duas faixas */
.sv-board { position: relative; display: grid; gap: var(--primitive-spacing-3); }
.sv-lane { border-radius: var(--primitive-radius-xl); padding: var(--primitive-spacing-4) var(--primitive-spacing-5) var(--primitive-spacing-5); }
.sv-lane--me { background: linear-gradient(160deg, color-mix(in srgb, var(--primitive-color-blue-600) 35%, var(--color-surface)), var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.6); }
.sv-lane--you { background: rgb(255 255 255 / 0.04); border: 1px dashed rgb(255 255 255 / 0.2); }
.sv-lane__head { display: flex; align-items: center; gap: var(--primitive-spacing-2); margin: 0 0 var(--primitive-spacing-3); font-size: var(--type-caption-size); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-foreground-muted); }
.sv-lane--me .sv-lane__head { color: var(--color-accent); }
.sv-avatar { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--primitive-radius-full); background: rgb(255 255 255 / 0.1); color: var(--color-heading); }
.sv-avatar--me { background: var(--primitive-color-blue-600); }
.sv-avatar img { width: 1.1rem; height: auto; }
.sv-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--primitive-spacing-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.sv-chip { display: flex; align-items: center; gap: var(--primitive-spacing-2); min-height: 2.75rem; padding: var(--primitive-spacing-2) var(--primitive-spacing-3) var(--primitive-spacing-2) var(--primitive-spacing-2); border-radius: var(--primitive-radius-md); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.08); font-size: var(--type-small-size); font-weight: 600; line-height: 1.25; color: var(--color-heading); }
.sv-chip__ic { flex: none; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: var(--primitive-radius-sm); background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent); }
.sv-lane--you .sv-chip__ic { background: rgb(255 255 255 / 0.1); color: var(--color-heading); }

/* Selo entre as faixas: mostra a troca (roteiro ⇄ revisão / plano e relatórios) */
.sv-bridge { margin: 0; display: flex; justify-content: center; }
.sv-bridge span { display: inline-flex; align-items: center; gap: var(--primitive-spacing-2); padding: var(--primitive-spacing-1) var(--primitive-spacing-3); border-radius: var(--primitive-radius-full); background: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); font-family: var(--font-mono); font-size: var(--type-caption-size); color: var(--color-accent); }

.sv .section__cta { margin-top: clamp(1.75rem, 4vh, 2.5rem); }

@media (max-width: 40rem) {
  .sv-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-chip { font-size: var(--type-caption-size); min-height: 2.5rem; }
  .sv-chip__ic { width: 1.625rem; height: 1.625rem; }
  .sv-lane { padding: var(--primitive-spacing-3); }
}