/* Páginas de serviço (/desenvolvimento-de-sites, /criacao-de-loja-virtual, /desenvolvimento-de-sistemas): o que elas têm além do frontend.css.
   O molde é o servicos/gerar.py; o formulário em etapas (modal) é do servicos.js. Textos longos ficam em caixa normal, para ler com calma;
   rótulos curtos seguem em caixa alta, como no resto do site. */

/* ---------- topo ---------- */
/* o topo ocupa a tela inteira, como o da home: cabeçalho + topo = 1 tela (o --bar-h vem do frontend.js) */
.sv-hero { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--bar-h, 70px) - 1px); min-height: calc(100dvh - var(--bar-h, 70px) - 1px); padding: 4rem 1.5rem; background: var(--s-bg); border-bottom: 1px solid rgba(51, 255, 51, 0.2); overflow: hidden; }
.sv-hero-in { position: relative; z-index: 10; width: 100%; max-width: 80rem; margin: 0 auto; }
.sv-trilha { margin-bottom: 2rem; font-size: 0.75rem; letter-spacing: 0.05em; color: rgba(51, 255, 51, 0.5); }
.sv-trilha a:hover { color: var(--s-green); }
.sv-trilha [aria-current] { color: rgba(51, 255, 51, 0.8); }
.sv-hero .s-status { margin-bottom: 1.5rem; }
.sv-hero h1 { max-width: 22ch; margin-bottom: 1.75rem; font-size: clamp(2.6rem, 6.2vw, 5.25rem); line-height: 0.95; letter-spacing: -0.02em; }
.sv-sub { max-width: 46rem; margin-bottom: 2.5rem; font-size: 1rem; line-height: 1.75; color: rgba(51, 255, 51, 0.75); }
.sv-sub strong, .sv-resumo strong, .sv-implica strong { color: var(--s-green); font-weight: 600; }
.sv-nb { white-space: nowrap; }
.s-cta-title .sv-nb { color: inherit; }   /* no título do fim, o span do design system fica apagado de propósito; a palavra inteira não */   /* palavra com hífen nos títulos e botões (servicos/gerar.py, nb) */
.sv-acoes { display: flex; flex-wrap: wrap; gap: 1rem; }
/* o botão do design system (.s-cta-btn) é um <a> na home; aqui ele abre o formulário e é um <button>, e o ".site button" do frontend.css zera o
   espaçamento e a borda de todo botão: devolve os do design system (sem isso o preenchimento verde cola no texto) */
.site button.s-cta-btn { padding: 1.25rem 1rem; border: 1px solid rgba(51, 255, 51, 0.3); }
@media (min-width: 768px) { .site button.s-cta-btn { padding: 1.25rem 3rem; } }
.site button.s-cta-btn:hover, .site button.s-cta-btn:focus-visible { border-color: var(--s-green); }
.sv-prova { display: flex; align-items: flex-start; gap: 0.6rem; max-width: 40rem; margin-top: 1.75rem; font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(51, 255, 51, 0.55); }
.sv-prova svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; color: var(--s-amber); }
.sv-noscript { max-width: 40rem; margin-top: 1rem; font-size: 0.875rem; color: var(--s-amber); }

/* ---------- em resumo (a resposta direta, para quem lê e para a IA) ---------- */
.sv-resumo { position: relative; padding: 3.5rem 1.5rem; background: var(--s-bg2); border-bottom: 1px solid rgba(51, 255, 51, 0.2); }
.sv-resumo .s-wrap { max-width: 64rem; }
.site h2.sv-resumo-t { margin-bottom: 1rem; font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.1em; color: var(--s-amber); }
.sv-resumo p { font-size: 1.0625rem; line-height: 1.8; color: rgba(51, 255, 51, 0.8); }

/* ---------- problema: a frase que pesa ---------- */
.sv-implica { margin: 2.5rem 0 0; padding: 1.75rem 2rem; border: 1px dashed rgba(255, 176, 0, 0.6); border-left: 2px solid var(--s-amber); background: rgba(255, 176, 0, 0.05); }
.sv-implica p { max-width: 52rem; font-size: 1.125rem; line-height: 1.7; color: rgba(51, 255, 51, 0.85); }
.sv-implica p::before { content: "> "; color: var(--s-amber); }

/* ---------- dúvidas (as objeções, abertas) e perguntas diretas (o accordion do site) ---------- */
.sv-obj .s-card-top { margin-bottom: 1.5rem; }
.site .sv-obj h3 { font-size: 1.6rem; line-height: 1.1; }
.sv-obj h3::before { content: "\201C"; color: var(--s-amber); }
.sv-obj h3::after { content: "\201D"; color: var(--s-amber); }
.site .sv-obj .sv-obj-a { max-width: none; font-size: 0.8125rem; line-height: 1.7; text-transform: none; color: rgba(51, 255, 51, 0.75); }
.sv-obj-a b { display: block; margin-bottom: 0.35rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--s-amber); }
.sv-obj-a b::before { content: "> "; }
.site h3.sv-faq-t { margin: 5rem 0 1rem; font-size: 2rem; line-height: 1; }
.sv .faq-content p { text-transform: none; font-size: 0.875rem; color: rgba(51, 255, 51, 0.7); }

/* ---------- fechamento ---------- */
/* o botão do fim tem um texto comprido: no computador ele cresce até caber numa linha (no design system ele para em 26rem); no celular ocupa a largura e quebra em linhas equilibradas */
@media (min-width: 768px) { .sv .s-cta-actions .magnetic-wrap { width: auto; max-width: 100%; } .sv .s-cta-actions .s-cta-btn { white-space: nowrap; } }
.sv .s-cta-label { text-wrap: balance; }
.sv-ou { margin-top: 2rem; font-size: 0.8125rem; line-height: 1.7; color: rgba(51, 255, 51, 0.55); }

/* ================================================================
   Formulário em etapas (modal): uma pergunta por vez, a barra de progresso em cima e os dados por último
   ================================================================ */
html.sv-aberto { overflow: hidden; }
.sv-modal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--s-green); overflow: auto; overscroll-behavior: contain; }
.sv-modal[open] { display: flex; }
.sv-modal::backdrop { background: rgba(0, 0, 0, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* o site esconde o cursor do sistema (o anel faz o papel dele), mas o anel fica atrás do modal: dentro dele volta o cursor normal */
.site .sv-modal, .site .sv-modal * { cursor: auto; }
.site .sv-modal button, .site .sv-modal a, .site .sv-modal label.sv-op, .site .sv-modal .sv-op input { cursor: pointer; }
.sv-caixa { position: relative; width: min(46rem, 100%); margin: auto; padding: 1.5rem 1.5rem 1.75rem; background: var(--s-bg); border: 1px solid rgba(51, 255, 51, 0.3); box-shadow: 0 0 60px rgba(51, 255, 51, 0.08); }
@media (min-width: 640px) { .sv-modal { padding: 1.5rem; } .sv-caixa { padding: 2rem 2.5rem 2.25rem; } }
@media (max-width: 639px) { .sv-caixa { min-height: 100%; border: 0; } }
.sv-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sv-modal-t { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-amber); }
.sv-fechar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(51, 255, 51, 0.25); color: rgba(51, 255, 51, 0.7); transition: border-color 0.2s, color 0.2s; }
.sv-fechar:hover { border-color: var(--s-green); color: var(--s-green); }
.sv-fechar svg { width: 1.1rem; height: 1.1rem; }
.sv-prog { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(51, 255, 51, 0.6); }
.sv-barra { height: 3px; margin-bottom: 2rem; background: rgba(51, 255, 51, 0.12); overflow: hidden; }
.sv-barra > div { height: 100%; background: var(--s-amber); transform-origin: left; transition: transform 0.45s var(--s-ease); }

.sv-etapa.ativa { animation: sv-entra 0.35s var(--s-ease); }
@keyframes sv-entra { from { opacity: 0; transform: translateY(14px); } }
.sv-pergunta { margin: 0; padding: 0; border: 0; min-width: 0; }
.site .sv-q { display: block; margin-bottom: 1.5rem; padding: 0; font-family: 'VT323', ui-monospace, monospace; font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.05; font-weight: 500; text-transform: uppercase; color: var(--s-green); }
.sv-q:focus { outline: none; }
.sv-ops { display: grid; gap: 0.75rem; }
.sv-op { position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid rgba(51, 255, 51, 0.25); background: rgba(10, 26, 10, 0.4); font-size: 0.875rem; line-height: 1.5; color: rgba(51, 255, 51, 0.85); transition: border-color 0.2s, background 0.2s; }
.sv-op:hover { border-color: rgba(51, 255, 51, 0.6); background: var(--s-bg2); }
.sv-op input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sv-op.sel { border-color: var(--s-green); background: rgba(51, 255, 51, 0.1); color: var(--s-green); }
.sv-op.foco { outline: 2px solid var(--s-amber); outline-offset: 2px; }
.sv-tecla { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid rgba(51, 255, 51, 0.4); font-size: 0.75rem; font-weight: 500; color: rgba(51, 255, 51, 0.8); }
.sv-op.sel .sv-tecla { background: var(--s-green); border-color: var(--s-green); color: var(--s-bg); }
.sv-multi .sv-op.sel .sv-tecla::after { content: "\2713"; }
.sv-multi .sv-op.sel .sv-tecla { font-size: 0; }
.sv-multi .sv-op.sel .sv-tecla::after { font-size: 0.875rem; }

.sv-campos { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sv-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sv-campo { display: flex; flex-direction: column; gap: 0.4rem; }
.sv-campo label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(51, 255, 51, 0.7); }
.sv-campo input { width: 100%; padding: 0.85rem 1rem; font: inherit; font-size: 1rem; color: var(--s-green); background: rgba(10, 26, 10, 0.6); border: 1px solid rgba(51, 255, 51, 0.3); border-radius: 0; transition: border-color 0.2s; }
.sv-campo input::placeholder { color: rgba(51, 255, 51, 0.3); }
.sv-campo input:focus { outline: none; border-color: var(--s-green); box-shadow: 0 0 0 1px var(--s-green); }
.sv-campo.invalido input, .sv-pergunta.invalido .sv-op { border-color: var(--s-amber); }
.sv-erro-campo { font-size: 0.75rem; line-height: 1.4; color: var(--s-amber); }
.sv-pergunta .sv-erro-campo { margin-top: 0.75rem; }
.sv-lgpd { margin-top: 1.25rem; font-size: 0.75rem; line-height: 1.6; color: rgba(51, 255, 51, 0.55); }

.sv-erro { margin-top: 1.25rem; padding: 0.875rem 1rem; border: 1px solid var(--s-amber); font-size: 0.8125rem; line-height: 1.5; color: var(--s-amber); }
.sv-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.sv-voltar { padding: 0.75rem 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(51, 255, 51, 0.7); }
.sv-voltar:hover { color: var(--s-green); }
.sv-voltar:disabled { visibility: hidden; }
.site .sv-avancar { width: auto; }
.sv-avancar[disabled] { opacity: 0.6; }
.sv-fim { padding: 1rem 0 0.5rem; }
.site .sv-fim h2 { margin: 0.5rem 0 1rem; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; }
.sv-fim h2:focus { outline: none; }
.sv-fim > p:not(.s-eyebrow) { max-width: 36rem; font-size: 0.9375rem; line-height: 1.7; color: rgba(51, 255, 51, 0.75); }
.sv-fim-acoes { margin: 1.75rem 0 1rem; }
.sv-fim-acoes .s-cta-btn { width: auto; display: inline-flex; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .sv-etapa.ativa { animation: none; }
  .sv-barra > div { transition: none; }
}