/* ════════════════════════════════════════════════════════════════════
   SUPRECARD · Configurador de Orçamento — CSS v6.0 (Rodada 7)
   Padrão "amostra aprovada": cartão branco único (radius 24px), header
   fixo, fila de dots numerados com linhas conectoras, título de etapa em
   CAIXA ALTA centralizado, conteúdo em label + <select> empilhados e
   rodapé com Voltar (outline) / Avançar (pill vermelho). O botão Avançar
   fica rosa-claro enquanto a etapa não está válida, mas continua clicável
   (feedback via mostrarPendencias). Segmentos e produtos mantêm cards com
   foto. Fonte única Plus Jakarta Sans; identidade vermelha #D0021B.
   Preserva integralmente o contrato funcional consultado pelo JS.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --sc-red:       #D0021B;
  --sc-red-dk:    #A80217;
  --sc-red-wash:  #FFF1F2;
  --sc-red-tint:  #FFF6F7;
  --sc-red-halo:  rgba(208, 2, 27, .15);
  --sc-red-focus: rgba(208, 2, 27, .28);
  --sc-red-soft:  #F6C2C9;   /* botão desabilitado (rosa claro da amostra) */

  --sc-ink:      #111827;
  --sc-body:     #374151;
  --sc-muted:    #6B7280;
  --sc-line:     #E5E7EB;
  --sc-line-2:   #CBD5E1;
  --sc-dark:     #0F172A;
  --sc-surface:  #FFFFFF;
  --sc-surface-2:#F7F8FA;
  --sc-green:    #10B981;
  --sc-green-bg: #ECFDF5;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-pill: 999px;

  --sh-card: 0 22px 45px rgba(15, 23, 42, .12);
  --sh-red:  0 10px 18px rgba(208, 2, 27, .30);
  --sc-trans: .2s cubic-bezier(.4, 0, .2, 1);
}

#sc-wrap *, #sc-wrap *::before, #sc-wrap *::after { box-sizing: border-box; }

#sc-wrap {
  max-width: 728px;
  margin: 0 auto;
  padding: 24px 8px 40px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--sc-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ══ CARTÃO ÚNICO ══ */
.sc-card {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  background: var(--sc-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: 32px 28px 24px;
}

/* ══ HEADER FIXO ══ */
.sc-cardhead { text-align: center; margin-bottom: 24px; }
.sc-cardhead-title {
  font-size: clamp(24px, 4.4vw, 32px);
  font-weight: 700; color: var(--sc-ink);
  line-height: 1.1; margin: 0 0 6px;
}
.sc-cardhead-sub { font-size: 15px; color: var(--sc-muted); margin: 0; line-height: 1.5; }

/* ══ PROGRESSO — dots numerados + linhas conectoras ══ */
.sc-prog-wrap { margin: 22px 0 26px; }
.sc-prog-steps { display: flex; align-items: center; justify-content: center; width: 100%; }
.sc-prog-line {
  flex: 1 1 0; max-width: 52px; min-width: 6px; height: 2px; margin: 0 6px;
  background: var(--sc-dark); opacity: .35; border-radius: var(--r-pill);
  transition: background var(--sc-trans), opacity var(--sc-trans);
}
.sc-prog-line.done { background: var(--sc-green); opacity: 1; }
.sc-prog-dot {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--sc-dark); color: #E5E7EB;
  transition: background var(--sc-trans), color var(--sc-trans), box-shadow var(--sc-trans);
}
.sc-prog-dot.active { background: var(--sc-red); color: #fff; box-shadow: 0 0 0 6px var(--sc-red-halo); }
.sc-prog-dot.done   { background: var(--sc-green); color: #fff; }

/* ══ ETAPAS ══ */
.sc-step { display: none; }
.sc-step.active { display: block; animation: scFadeUp .28s ease; }
@keyframes scFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.sc-step-head { text-align: center; margin-bottom: 22px; }
.sc-step-head h3 {
  font-size: clamp(20px, 3vw, 26px); font-weight: 700; color: var(--sc-ink);
  line-height: 1.15; letter-spacing: .4px; text-transform: uppercase; margin: 0 0 8px;
}
.sc-step-head p { font-size: 15px; color: var(--sc-muted); margin: 0; line-height: 1.45; }
.sc-step-body { padding: 0; }

/* ══ RÓTULO DE SEÇÃO (usado na tela de dados) ══ */
.sc-section-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--sc-muted); margin: 28px 0 12px;
}

/* ══ CAMPOS label + <select> (padrão da amostra) ══ */
.sc-form-grid { max-width: 560px; margin: 0 auto; }
.sc-field { margin-bottom: 16px; }
.sc-field:last-child { margin-bottom: 0; }
.sc-reveal .sc-field:last-child { margin-bottom: 0; }

.sc-select-lbl,
.sc-field > label {
  display: block; font-size: 15px; font-weight: 600; color: var(--sc-ink);
  margin-bottom: 6px; line-height: 1.3;
}

.sc-select {
  width: 100%; min-height: 44px;
  border-radius: var(--r-md); border: 2px solid var(--sc-line);
  padding: 10px 40px 10px 12px; font-size: 15px; font-family: inherit;
  color: var(--sc-ink); background-color: var(--sc-surface);
  outline: none; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color var(--sc-trans), box-shadow var(--sc-trans);
}
.sc-select:focus { border-color: var(--sc-red); box-shadow: 0 0 0 3px var(--sc-red-focus); }

/* ══ GRUPO DE MÚLTIPLA ESCOLHA (linhas selecionáveis) ══ */
.sc-checkgroup { display: grid; gap: 10px; }
.sc-check-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  border: 2px solid var(--sc-line); border-radius: var(--r-md);
  padding: 11px 14px; cursor: pointer; background: var(--sc-surface);
  transition: border-color var(--sc-trans), background var(--sc-trans);
  user-select: none;
}
.sc-check-row:hover { border-color: var(--sc-red); }
.sc-check-row.selected { border-color: var(--sc-red); background: var(--sc-red-wash); }
.sc-check-mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--sc-line-2); background: var(--sc-surface);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--sc-trans), border-color var(--sc-trans);
}
.sc-check-mark svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sc-check-row.selected .sc-check-mark { background: var(--sc-red); border-color: var(--sc-red); }
.sc-check-row.selected .sc-check-mark svg { opacity: 1; }
.sc-check-body { display: flex; flex-direction: column; gap: 2px; }
.sc-check-name { font-size: 14.5px; font-weight: 600; color: var(--sc-ink); line-height: 1.25; }
.sc-check-desc { font-size: 13px; color: var(--sc-muted); line-height: 1.4; }

/* ── Linha selecionável COM foto (acessórios / order bumps) ── */
.sc-check-row-thumb { padding: 10px 12px; }
.sc-check-row-thumb .sc-check-body { flex: 1 1 auto; }
.sc-check-row-thumb .sc-check-mark { margin-left: auto; }
.sc-check-thumb {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--r-sm);
  overflow: hidden; background: #F1F3F5; display: flex; align-items: center; justify-content: center;
}
#sc-wrap .sc-check-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .35s ease; }
.sc-check-thumb.sc-thumb-icon { font-size: 26px; background: var(--sc-surface-2); }
/* Selecionado: foto em P&B (efeito "carimbado") — o check já fica vermelho. */
.sc-check-row.selected .sc-check-thumb img { filter: grayscale(1); }

/* ══ CARDS COM FOTO (segmentos + produtos) ══ */
.sc-prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sc-prod-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-prod-card {
  position: relative; cursor: pointer; background: var(--sc-surface);
  border: 2px solid var(--sc-line); border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--sc-trans), box-shadow var(--sc-trans), transform var(--sc-trans);
}
.sc-prod-card:hover { border-color: var(--sc-red); box-shadow: 0 12px 24px rgba(15, 23, 42, .12); transform: translateY(-2px); }
.sc-prod-card.selected { border-color: var(--sc-red); box-shadow: 0 8px 20px rgba(208, 2, 27, .14); animation: scStampCard .4s cubic-bezier(.4, 0, .2, 1); }
.sc-prod-card.selected .sc-prod-info { background: var(--sc-red-wash); }
/* "Carimbado/selecionado": giro 3D sutil + foto em P&B com check vermelho. */
.sc-prod-card.selected .sc-prod-img img { filter: grayscale(1); }
@keyframes scStampCard {
  0%   { transform: perspective(720px) rotateY(0) scale(1); }
  40%  { transform: perspective(720px) rotateY(11deg) scale(.975); }
  70%  { transform: perspective(720px) rotateY(-3deg) scale(1); }
  100% { transform: perspective(720px) rotateY(0) scale(1); }
}

/* Faixa da foto em 3:2 (66.667%) — mesma proporção das fotos de produto
   (1200×800). Foto na proporção do espaço = preenche tudo, sem corte e sem
   sobra. Ver ESPECIFICACAO-FOTOS.md. */
.sc-prod-img { position: relative; width: 100%; padding-top: 66.667%; overflow: hidden; background: #F1F3F5; }
/* Prefixo #sc-wrap de propósito: o Elementor traz `.elementor img { height: auto }`
   com a MESMA especificidade desta regra e carregado depois, então venceria e a
   foto sairia da faixa (aparece cortada em páginas montadas no builder). O id
   garante a vitória sem precisar de !important. */
#sc-wrap .sc-prod-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1), filter .35s ease; }
.sc-prod-card:hover:not(.selected) .sc-prod-img img { transform: scale(1.04); }
/* Regra única para todas as fotos de produto: "contain" sem zoom — nenhuma
   foto pode ser cortada. Produto pode aparecer menor, nunca cortado. */
/* Card sem foto: ocupa exatamente o mesmo espaço da faixa de imagem, com o
   ícone no lugar do produto. Usado enquanto uma foto ainda não existe — evita
   imagem quebrada e mantém o alinhamento da grade. */
.sc-cat-icon {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  background: var(--sc-surface-2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; line-height: 1;
}
.sc-cat-icon > .sc-prod-check { position: absolute; top: 10px; right: 10px; }
.sc-prod-card.selected .sc-cat-icon { filter: grayscale(1); }

.sc-prod-img.sc-fit-contain img { object-fit: contain; padding: 0; background: #fff; transform: none; }
.sc-prod-card:hover:not(.selected) .sc-prod-img.sc-fit-contain img { transform: none; }

.sc-prod-check {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
  background: var(--sc-red); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6); transition: var(--sc-trans); z-index: 2;
  box-shadow: 0 1px 4px rgba(208, 2, 27, .28);
}
.sc-prod-check svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-prod-card.selected .sc-prod-check { opacity: 1; transform: scale(1); }

.sc-prod-info { padding: 13px 14px 15px; transition: background var(--sc-trans); }
.sc-prod-name { font-size: 15px; font-weight: 700; color: var(--sc-ink); line-height: 1.24; margin-bottom: 4px; }
.sc-prod-desc { font-size: 13px; color: var(--sc-muted); line-height: 1.45; }
.sc-prod-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--sc-red); background: var(--sc-red-wash);
  padding: 3px 9px; border-radius: var(--r-pill); margin-top: 8px;
}

/* ══ QUANTIDADE (input compacto no estilo dos selects) ══ */
.sc-qty-inline { display: flex; align-items: center; gap: 12px; }
.sc-qty-input.sc-qty-sm {
  width: 120px; min-height: 44px; font-size: 17px; font-weight: 600;
  font-family: inherit; text-align: center; color: var(--sc-ink);
  padding: 10px 12px; border: 2px solid var(--sc-line); border-radius: var(--r-md);
  background: var(--sc-surface); outline: none; cursor: text;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
  transition: border-color var(--sc-trans), box-shadow var(--sc-trans);
}
.sc-qty-input.sc-qty-sm::-webkit-inner-spin-button,
.sc-qty-input.sc-qty-sm::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sc-qty-input.sc-qty-sm:focus { border-color: var(--sc-red); box-shadow: 0 0 0 3px var(--sc-red-focus); }
.sc-qty-unit { font-size: 14px; color: var(--sc-muted); }
.sc-qty-help { font-size: 13px; color: var(--sc-muted); margin-top: 6px; line-height: 1.5; }
.sc-qty-warn {
  font-size: 13px; color: #92400E; margin-top: 8px; padding: 10px 13px;
  background: #FFFBEB; border-radius: var(--r-sm); border-left: 3px solid #F59E0B; display: none;
}

/* Quantidade por categoria (fluxo simples) */
.sc-cat-qty-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 2px solid var(--sc-line); border-radius: var(--r-md);
  margin-bottom: 9px; background: var(--sc-surface);
}
.sc-cat-qty-nome { font-size: 14px; font-weight: 600; color: var(--sc-ink); }
.sc-cat-qty-row .sc-qty-input.sc-qty-sm { width: 90px; font-size: 16px; }

/* Blocos de configuração por acessório */
.sc-acess-bloco { border: 2px solid var(--sc-line); border-radius: var(--r-md); padding: 14px 16px; margin: 12px 0 0; background: var(--sc-surface-2); }
.sc-acess-bloco-titulo { font-weight: 700; font-size: 14.5px; margin-bottom: 8px; color: var(--sc-ink); }

/* ══ TELA DE DADOS ══ */
.sc-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: none; }
.sc-fg { display: flex; flex-direction: column; gap: 6px; }
.sc-lbl { font-size: 14px; font-weight: 600; color: var(--sc-ink); line-height: 1.3; }
.sc-lbl .req { color: var(--sc-red); }
#sc-wrap input[type=text],
#sc-wrap input[type=email],
#sc-wrap input[type=tel],
#sc-wrap textarea {
  width: 100%; min-height: 44px;
  border: 2px solid var(--sc-line); border-radius: var(--r-md); padding: 11px 14px;
  font-size: 15px; font-family: inherit; color: var(--sc-ink);
  background: var(--sc-surface); outline: none;
  transition: border-color var(--sc-trans), box-shadow var(--sc-trans);
}
#sc-wrap input::placeholder, #sc-wrap textarea::placeholder { color: #9AA1AC; }
#sc-wrap input:focus, #sc-wrap textarea:focus { border-color: var(--sc-red); box-shadow: 0 0 0 3px var(--sc-red-focus); }
#sc-wrap input.sc-err { border-color: var(--sc-red) !important; }
#sc-wrap textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.sc-ferr { font-size: 13px; color: var(--sc-red); font-weight: 600; margin-top: 4px; display: none; line-height: 1.4; }

.sc-cep-wrap { position: relative; }
.sc-cep-wrap input { padding-right: 42px; }
.sc-cep-status { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; }
.sc-addr-preview, .sc-cnpj-preview {
  background: var(--sc-surface-2); border: 1px solid var(--sc-line); border-radius: var(--r-sm);
  padding: 12px 14px; margin-top: 8px; font-size: 13px; color: var(--sc-body); display: none; line-height: 1.6;
}

/* Tipo de cliente */
.sc-tipo-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sc-tipo-opt {
  flex: 1; min-width: 150px; border: 2px solid var(--sc-line); border-radius: var(--r-md);
  padding: 14px 15px; cursor: pointer; transition: border-color var(--sc-trans), background var(--sc-trans);
  display: flex; align-items: center; gap: 11px; background: var(--sc-surface);
}
.sc-tipo-opt:hover { border-color: var(--sc-red); }
.sc-tipo-opt.selected { border-color: var(--sc-red); background: var(--sc-red-wash); }
.sc-tipo-opt input[type=radio] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sc-line-2);
  background: var(--sc-surface); flex-shrink: 0; cursor: pointer; margin: 0; transition: var(--sc-trans);
}
.sc-tipo-opt input[type=radio]:checked { border-color: var(--sc-red); background-color: var(--sc-red); box-shadow: inset 0 0 0 4px var(--sc-surface); }
.sc-tipo-titulo { font-size: 14.5px; font-weight: 700; color: var(--sc-ink); }
.sc-tipo-sub { font-size: 13px; color: var(--sc-muted); line-height: 1.4; }

/* Newsletter / consentimento */
.sc-checkbox-box {
  border: 2px solid var(--sc-line); border-radius: var(--r-md); padding: 15px 16px;
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  transition: border-color var(--sc-trans); margin-top: 12px; background: var(--sc-surface);
}
.sc-checkbox-box:hover { border-color: var(--sc-red); }
.sc-checkbox-box input[type=checkbox] {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--sc-line-2);
  background: var(--sc-surface); flex-shrink: 0; margin-top: 1px; cursor: pointer; transition: var(--sc-trans);
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}
.sc-checkbox-box input[type=checkbox]:checked {
  border-color: var(--sc-red); background-color: var(--sc-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2l3.2 3.2 6.6-7'/%3E%3C/svg%3E");
}
.sc-checkbox-text h4 { font-size: 14px; font-weight: 700; margin-bottom: 3px; color: var(--sc-ink); line-height: 1.35; }
.sc-checkbox-text p { font-size: 13px; color: var(--sc-muted); line-height: 1.5; }
.sc-checkbox-text a { color: var(--sc-red); }

/* Resumo */
.sc-resumo-box { background: var(--sc-surface-2); border: 1px solid var(--sc-line); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 22px; }
.sc-resumo-title { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--sc-ink); margin-bottom: 14px; }
.sc-resumo-title::after { content: ''; flex: 1; height: 1px; background: var(--sc-line); }
.sc-resumo-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sc-line); font-size: 14px; }
.sc-resumo-item:last-child { border-bottom: none; }
.sc-resumo-key { color: var(--sc-muted); font-size: 13px; min-width: 120px; }
.sc-resumo-val { font-weight: 600; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.sc-resumo-bloco { margin-bottom: 14px; }
.sc-resumo-bloco:last-child { margin-bottom: 0; }
.sc-resumo-prod { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--sc-red); margin: 4px 0 6px; }

/* Banner de prazo */
.sc-prazo-banner { background: var(--sc-red-tint); border: 1px solid #F6D5D9; border-left: 4px solid var(--sc-red); border-radius: var(--r-md); padding: 15px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.sc-prazo-icon { font-size: 24px; flex-shrink: 0; }
.sc-prazo-title { font-size: 16px; font-weight: 700; color: var(--sc-ink); }
.sc-prazo-sub { font-size: 13px; color: var(--sc-body); margin-top: 3px; line-height: 1.5; }

/* Aviso WhatsApp */
.sc-aviso-wpp { display: flex; align-items: flex-start; gap: 10px; background: var(--sc-green-bg); border: 1px solid #C9EAD6; border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 16px; font-size: 13.5px; color: #1E4634; line-height: 1.55; }
.sc-aviso-wpp em { font-style: normal; }
.sc-aviso-wpp-icon { font-size: 18px; line-height: 1.3; }

/* ══ NAVEGAÇÃO — rodapé do cartão ══ */
.sc-actions {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sc-line);
}
.sc-actions .sc-btn-next:only-child, .sc-actions .sc-btn-submit:only-child { margin-left: auto; }
.sc-btn-back {
  min-height: 44px; border: 1px solid var(--sc-line); background: var(--sc-surface-2);
  border-radius: var(--r-pill); padding: 9px 20px; font-size: 15px; font-weight: 600;
  color: #4B5563; cursor: pointer; font-family: inherit;
  transition: background var(--sc-trans), border-color var(--sc-trans), color var(--sc-trans);
}
.sc-btn-back:hover { background: #F3F4F6; border-color: var(--sc-line-2); }
.sc-btn-next, .sc-btn-submit {
  min-height: 44px; background: var(--sc-red); color: #fff; border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 9px 22px; font-family: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: var(--sh-red);
  transition: background var(--sc-trans), box-shadow var(--sc-trans), transform .1s ease;
}
.sc-btn-next:hover, .sc-btn-submit:hover { background: var(--sc-red-dk); transform: translateY(-1px); box-shadow: 0 14px 26px rgba(208, 2, 27, .40); }
/* estado inválido: rosa claro, sem pressão — mas continua clicável (feedback) */
.sc-btn-next.sc-btn-invalid, .sc-btn-submit.sc-btn-invalid {
  background: var(--sc-red-soft); color: #A80217; box-shadow: none; cursor: not-allowed; transform: none;
}
.sc-btn-next.sc-btn-invalid:hover, .sc-btn-submit.sc-btn-invalid:hover { background: var(--sc-red-soft); transform: none; box-shadow: none; }
.sc-btn-submit:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }

/* ══ SUCESSO ══ */
.sc-success { text-align: center; padding: 44px 20px; }
.sc-success-icon { width: 80px; height: 80px; background: var(--sc-green-bg); box-shadow: inset 0 0 0 1px #C7EED9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 38px; margin: 0 auto 20px; }
.sc-success h3 { font-size: clamp(24px, 4vw, 30px); font-weight: 800; margin-bottom: 10px; color: var(--sc-ink); }
.sc-success p { font-size: 15px; color: var(--sc-body); line-height: 1.6; max-width: 420px; margin: 0 auto; }
/* A sombra vermelha do botão é larga; sem folga extra ela encosta no texto de
   apoio e o botão parece desalinhado. */
.sc-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 32px 0 0; }
.sc-success-actions .sc-btn-next { margin-left: 0; }
/* Precisa incluir o "p": a regra `.sc-success p { margin: 0 auto }` acima tem
   especificidade maior e zerava a margem destes dois — era isso que deixava o
   texto colado no botão, e não a sombra. */
.sc-success p.sc-success-note  { font-size: 13px; color: var(--sc-muted); margin: 26px auto 0; }
.sc-success p.sc-success-trust { font-size: 12px; color: var(--sc-muted); opacity: .82; margin: 14px auto 0; }

/* ══ LOADING ══ */
.sc-loading { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .62); z-index: 99999; align-items: center; justify-content: center; flex-direction: column; gap: 16px; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 19px; font-weight: 700; }
.sc-loading.show { display: flex; }
.sc-spinner { width: 46px; height: 46px; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: scSpin .8s linear infinite; }
@keyframes scSpin { to { transform: rotate(360deg); } }

/* Info / disclaimer */
.sc-info-box { background: var(--sc-surface-2); border-left: 3px solid var(--sc-line-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 15px; font-size: 14px; color: var(--sc-body); line-height: 1.55; margin: 8px 0 14px; }
.sc-disclaimer { font-size: 13px; color: var(--sc-muted); text-align: center; margin-top: 16px; line-height: 1.6; }
.sc-disclaimer a { color: var(--sc-red); text-decoration: none; }

/* ══ VALIDAÇÃO (FUNCIONAL) ══ */
.sc-sec-err { outline: 2px solid var(--sc-red); outline-offset: 5px; border-radius: var(--r-sm); animation: sc-err-pulse .35s ease; }
@keyframes sc-err-pulse { 0% { outline-offset: 2px; } 100% { outline-offset: 5px; } }
.sc-step-err {
  display: none; background: #FDECEE; border: 1px solid #F5C2C7; color: var(--sc-red-dk);
  font-size: 14px; font-weight: 600; border-radius: var(--r-sm); padding: 12px 15px; margin-top: 16px;
}

/* ══ TIPOGRAFIA — controle de viúvas ══ */
.sc-cardhead-title, .sc-step-head h3, .sc-success h3, .sc-prod-name, .sc-prazo-title, .sc-checkbox-text h4 { text-wrap: balance; }
.sc-cardhead-sub, .sc-step-head p, .sc-prod-desc, .sc-info-box, .sc-checkbox-text p, .sc-success p, .sc-aviso-wpp, .sc-prazo-sub, .sc-disclaimer, .sc-tipo-sub, .sc-qty-help, .sc-success-note, .sc-check-desc { text-wrap: pretty; }

/* ══ PISO DE QUALIDADE ══ */
/* Foco por mouse/clique não deve desenhar o outline preto do UA sobre a borda
   vermelha do card selecionado (bug "linha preta"). Só o foco de teclado
   (:focus-visible) mostra o anel — em vermelho e com offset, sem somar. */
#sc-wrap :focus:not(:focus-visible) { outline: none; }
#sc-wrap :focus-visible { outline: 2px solid var(--sc-red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  #sc-wrap *, #sc-wrap *::before, #sc-wrap *::after { animation: none !important; transition: none !important; }
  .sc-prod-card:hover, .sc-btn-next:hover, .sc-btn-submit:hover { transform: none; }
}

/* ══ RESPONSIVO — mobile é o critério nº 1 (360px cabe em ~1 tela) ══ */
@media (max-width: 640px) {
  #sc-wrap { padding: 16px 6px 40px; }
  .sc-card { padding: 22px 16px 18px; border-radius: 18px; }
  .sc-cardhead { margin-bottom: 18px; }
  .sc-cardhead-title { font-size: 24px; }
  .sc-cardhead-sub { font-size: 13.5px; }
  .sc-prog-wrap { margin: 18px 0 20px; }
  .sc-prog-line { max-width: 30px; min-width: 4px; margin: 0 4px; }
  .sc-step-head { margin-bottom: 18px; }
  .sc-step-head p { font-size: 14px; }
  .sc-form-grid-2 { grid-template-columns: 1fr; }
  /* minmax(0, 1fr) e não 1fr: com "1fr" puro a coluna tem min-width auto e um
     nome de produto comprido (ex.: "Cartões com Chip de Proximidade") empurra a
     grade para fora da tela, criando rolagem horizontal no celular. */
  .sc-prod-grid, .sc-prod-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sc-prod-img { padding-top: 66.667%; }
  .sc-prod-info { padding: 11px 12px 13px; }
  .sc-tipo-row { flex-direction: column; }
  .sc-actions { margin-top: 20px; padding-top: 14px; }
  /* card órfão no mobile ocupa a largura toda */
  .sc-prod-grid > .sc-prod-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .sc-cardhead-title { font-size: 22px; }
  .sc-btn-next, .sc-btn-submit { padding: 9px 16px; font-size: 14px; }
  .sc-btn-back { padding: 9px 14px; font-size: 14px; }
  .sc-prog-dot { width: 19px; height: 19px; font-size: 10px; }
  .sc-prog-line { min-width: 3px; }
}

/* ════════════════════════════════════════════════════════════════════
   ESCALA DESKTOP (≥ 900px)
   O mobile foi aprovado como está: TODAS as regras desta seção vivem
   dentro de um único media query min-width, portanto nada abaixo de
   900px é alterado — a folha renderizada em ≤640px continua idêntica.
   Objetivo: cartão maior e com mais respiro, sem que nenhuma etapa
   passe a exigir rolagem em uma janela de 1280×900.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Cartão mais largo no desktop: a queixa era de tela espremida, e é aqui que
     as grades de foto ganham ar. Os campos de formulário seguem em 680px — texto
     em coluna larga demais fica ruim de ler. */
  #sc-wrap { max-width: 1000px; padding: 22px 16px 28px; }
  .sc-card { max-width: 940px; padding: 36px 48px 24px; }

  /* Header do cartão */
  .sc-cardhead { margin-bottom: 18px; }
  .sc-cardhead-title { font-size: 34px; margin-bottom: 6px; }
  .sc-cardhead-sub { font-size: 16px; }

  /* Progresso — dots maiores, conectores mais longos */
  .sc-prog-wrap { margin: 16px 0 20px; }
  .sc-prog-dot { width: 26px; height: 26px; font-size: 12.5px; }
  .sc-prog-dot.active { box-shadow: 0 0 0 7px var(--sc-red-halo); }
  .sc-prog-line { max-width: 86px; margin: 0 9px; }

  /* Título da etapa */
  .sc-step-head { margin-bottom: 18px; }
  .sc-step-head h3 { font-size: 27px; letter-spacing: .5px; }
  .sc-step-head p { font-size: 16px; }

  /* Campos: coluna mais larga, controles maiores */
  .sc-form-grid { max-width: 680px; }
  /* .sc-form-grid-2 usa a largura toda (mesma intenção da regra base) — precisa
     ser reafirmado aqui porque a regra acima tem a mesma especificidade e vem depois. */
  .sc-form-grid-2 { max-width: none; }
  .sc-field { margin-bottom: 20px; }
  .sc-select-lbl,
  .sc-field > label { font-size: 16px; margin-bottom: 7px; }
  .sc-select {
    min-height: 52px; padding: 13px 44px 13px 15px; font-size: 16px;
    background-position: right 14px center;
  }
  .sc-section-label { font-size: 12.5px; margin: 30px 0 13px; }

  /* Linhas selecionáveis */
  .sc-checkgroup { gap: 12px; }
  .sc-check-row { min-height: 52px; padding: 13px 16px; gap: 14px; }
  .sc-check-row-thumb { padding: 12px 14px; }
  .sc-check-thumb { width: 96px; height: 96px; }
  .sc-check-name { font-size: 15.5px; }
  .sc-check-desc { font-size: 13.5px; }

  /* Cards com foto: mais largos e com mais respiro. A faixa mantém o 3:2 das
     fotos, então a foto preenche a largura inteira sem corte. */
  .sc-prod-grid { gap: 16px; }
  .sc-prod-img { padding-top: 66.667%; }
  /* Grade de 2 colunas (tipo de crachá, tipo de cordão, fecho, credencial):
     são telas em que o cliente ESCOLHE OLHANDO a foto, então valem a tela toda.
     A faixa em 3:2 acompanha a proporção das fotos — foto cheia, sem corte e sem
     sobra — e a grade extrapola a coluna estreita do formulário para ganhar
     largura. Custa rolagem em telas baixas; a clareza da foto vem primeiro. */
  /* O campo inteiro extrapola (não só a grade), senão o rótulo fica desalinhado
     à direita das fotos. */
  #scf-tipoCracha, #scf-tipoCordao, #scf-fecho, #scf-materialCred {
    width: calc(100% + 160px); margin-left: -80px;
  }
  .sc-prod-grid-2 .sc-prod-img { padding-top: 66.667%; }
  .sc-prod-grid-2 .sc-cat-icon { aspect-ratio: 3 / 2; font-size: 44px; }
  .sc-prod-info { padding: 13px 16px 15px; }
  .sc-prod-name { font-size: 16px; margin-bottom: 4px; }
  .sc-prod-desc { font-size: 13.5px; }
  .sc-prod-tag { font-size: 11.5px; padding: 4px 10px; margin-top: 8px; }
  .sc-prod-check { width: 24px; height: 24px; top: 11px; right: 11px; }
  .sc-prod-check svg { width: 13px; height: 13px; }

  /* Quantidade */
  .sc-qty-input.sc-qty-sm { width: 132px; min-height: 52px; font-size: 18px; }
  .sc-qty-unit { font-size: 15px; }
  .sc-qty-help { font-size: 13.5px; margin-top: 7px; }
  .sc-cat-qty-row { padding: 11px 16px; margin-bottom: 11px; }
  .sc-cat-qty-nome { font-size: 15px; }
  .sc-acess-bloco { padding: 16px 18px; }

  /* Tela de dados */
  .sc-form-grid-2 { gap: 18px; }
  .sc-lbl { font-size: 15px; }
  #sc-wrap input[type=text],
  #sc-wrap input[type=email],
  #sc-wrap input[type=tel],
  #sc-wrap textarea { min-height: 50px; padding: 13px 15px; font-size: 16px; }
  #sc-wrap textarea { min-height: 88px; }
  .sc-tipo-opt { padding: 15px 17px; }
  .sc-tipo-titulo { font-size: 15.5px; }
  .sc-checkbox-box { padding: 16px 18px; }
  .sc-checkbox-text h4 { font-size: 15px; }
  .sc-checkbox-text p { font-size: 13.5px; }
  .sc-resumo-box { padding: 20px 24px; }
  .sc-prazo-banner { padding: 16px 20px; }
  .sc-info-box { font-size: 14.5px; padding: 13px 17px; }

  /* Rodapé */
  .sc-actions { margin-top: 20px; padding-top: 16px; gap: 14px; }
  .sc-btn-back { min-height: 48px; padding: 12px 24px; font-size: 16px; }
  .sc-btn-next, .sc-btn-submit { min-height: 48px; padding: 12px 28px; font-size: 16px; }

  /* Sucesso */
  .sc-success h3 { font-size: 32px; }
  .sc-success p { font-size: 16px; max-width: 480px; }
}