/* =============================================================================
   ALUMIHAUS v3 — configurador.css
   A página /configurador (configurador.html), layout A da especificação
   (configurador/ESPECIFICACAO.md § 5): palco em 2/3 à esquerda, coluna à
   direita com a linha preta de 1 px do site. Abaixo de 900 px: palco em cima
   e as etapas numa gaveta embaixo.
   🔁 2026-10-06 (proposta A aprovada, configurador/propostas-2026-10-06/): o resumo
   de 7 linhas saiu do topo da coluna e virou uma régua de passos + um "Resumo" que
   abre por cima; o "Seguir" virou botão cheio que diz para onde vai; a cartela das
   cores ficou compacta; no celular o palco caiu de 55 % da tela para ~36 %.

   Entra depois do alumihaus.css e só usa os tokens dele. A linha da coluna cai
   na grade do site: a coluna começa onde começa a 3ª coluna de texto, menos a
   calha — então o texto da coluna alinha com o "Contato" do cabeçalho.
   ========================================================================== */

/* 0. Medidas próprias ------------------------------------------------------- */
.p-configurador {
  --cfg-pequeno: max(13px, var(--t-menu));     /* o rótulo pequeno da Sobre nós */
  --cfg-ar: 24px;                              /* ar entre blocos da coluna */
  --cfg-linha-alt: 56px;                       /* altura de uma linha do resumo */
  --cfg-amostra: 44px;                         /* o círculo da cor */
}
@media (min-width: 1400px) { .p-configurador { --cfg-ar: 32px; --cfg-linha-alt: 60px; --cfg-amostra: 52px; } }
@media (min-width: 1800px) {
  .p-configurador {
    --cfg-pequeno: max(14px, 0.63vw);
    --cfg-ar: max(32px, 1.36vw);
    --cfg-linha-alt: max(60px, 2.4vw);
    --cfg-amostra: max(52px, 2.2vw);
  }
}

/* na janela larga o --t-menor do site passa do corpo da Sobre nós (21 × 16 px a
   2951); dentro do configurador o texto menor fica no tamanho do corpo */
@media (min-width: 1800px) { .cfg { --t-menor: var(--t-corpo); --lh-menor: var(--lh-corpo); } }

/* 1. O corpo: palco + coluna ocupando a janela abaixo do cabeçalho ------------ */
.cfg { padding-top: var(--cabecalho); }
.cfg__corpo {
  display: grid;
  height: calc(100vh - var(--cabecalho));
  height: calc(100svh - var(--cabecalho));
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

/* celular e tablet estreito: palco em cima, gaveta embaixo */
.cfg__corpo { grid-template-rows: clamp(220px, 36vh, 340px) minmax(0, 1fr); grid-template-rows: clamp(220px, 36svh, 340px) minmax(0, 1fr); }
.cfg__coluna { border-top: 1px solid var(--linha); }

@media (min-width: 900px) {
  .cfg__corpo {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns:
      calc(var(--margem) + (100% - 2 * var(--margem) - 2 * var(--calha)) * 2 / 3 + var(--calha))
      minmax(0, 1fr);
  }
  .cfg__coluna { border-top: 0; border-left: 1px solid var(--linha); }
}

/* 2. O palco — o palco.js (Tarefa C4) monta o canvas aqui dentro ------------ */
.cfg__palco {
  position: relative;
  min-width: 0; min-height: 0;
  overflow: hidden;
  background: var(--superficie);
}
.cfg__palco > canvas { display: block; width: 100%; height: 100%; }

/* enquanto o 3D não existe: o vão na proporção pedida, em branco, e uma nota */
.cfg-espera {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 12% 15% 16%;
}
.cfg-espera__area { container-type: size; width: 100%; height: 100%; display: grid; place-items: center; }
/* o maior retângulo na proporção L/H (--proporcao, posto pelo etapas.js) que cabe na área */
.cfg-espera__vao {
  --proporcao: 1;
  width: min(100cqw, 100cqh * var(--proporcao));
  aspect-ratio: var(--proporcao);
  background: var(--chao);
}
/* sobre o 3D (palco.js): o abrir/fechar e o aviso de sistema ainda sem 3D */
.cfg__palco > canvas { touch-action: none; }
.cfg-palco__abrir {
  position: absolute; left: var(--margem); bottom: var(--cfg-ar);
}
.cfg-palco__abrir[hidden], .cfg-palco__aviso[hidden] { display: none; }
.cfg-palco__abrir [data-quando="aberto"] { display: none; }
.cfg-palco__abrir[aria-pressed="true"] [data-quando="aberto"] { display: inline; }
.cfg-palco__abrir[aria-pressed="true"] [data-quando="fechado"] { display: none; }
.cfg-palco__aviso {
  position: absolute; left: var(--margem); bottom: var(--cfg-ar);
  max-width: 32em;
  color: var(--cinza);
  font-size: var(--t-menor); line-height: var(--lh-menor);
}
/* ver em corte: ao lado do abrir/fechar */
.cfg-palco__corte { position: absolute; right: var(--margem); bottom: var(--cfg-ar); }
/* os dois botões ficam por cima da camada dos ⊕ (no palco baixo do celular, um ponto caía
   em cima do "Ver em corte" e tomava o toque) */
.cfg-palco__abrir, .cfg-palco__corte { z-index: 2; }
@media (max-width: 899.98px) {
  .cfg__palco :is(.cfg-palco__abrir, .cfg-palco__corte) { bottom: 8px; padding: 0 8px; background: rgba(255, 255, 255, 0.85); }
  .cfg__palco .cfg-palco__abrir { left: calc(var(--margem) - 8px); }
  .cfg__palco .cfg-palco__corte { right: calc(var(--margem) - 8px); }
}

/* pontos ⊕ (Tarefa C5): botões HTML sobre o canvas; o palco.js põe o translate pela
   projeção da peça. O ⊕ é o círculo de 1 px do site com a cruz; o rótulo aparece no
   foco e no hover. Interface por cima do 3D, não desenho dentro dele. */
.cfg-pontos { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cfg-pontos[hidden] { display: none; }
.cfg-ponto {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; column-gap: 8px;
  min-width: 44px; min-height: 44px; margin: -22px 0 0 -22px; padding: 0;
  font: inherit; color: var(--tinta);
  background: none; border: 0; border-radius: 0;
  cursor: pointer; pointer-events: auto;
  will-change: transform;
}
.cfg-ponto[hidden] { display: none; }
.cfg-ponto__marca {
  position: relative; flex: none;
  width: 26px; height: 26px; margin: 9px;
  border-radius: 50%;
  background: var(--chao);
  box-shadow: 0 0 0 1px var(--tinta);
  transition: background-color 0.2s ease;
}
.cfg-ponto__marca::before, .cfg-ponto__marca::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1px; margin: -0.5px 0 0 -6px;
  background: var(--tinta);
}
.cfg-ponto__marca::after { transform: rotate(90deg); }
.cfg-ponto__rotulo {
  margin-left: -6px; padding: 4px 8px;
  font-weight: 500; font-size: var(--cfg-pequeno); line-height: 1.2; text-transform: uppercase;
  white-space: nowrap;
  background: var(--chao); box-shadow: 0 0 0 1px var(--tinta);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.cfg-ponto:focus-visible { outline: none; }
.cfg-ponto:focus-visible .cfg-ponto__marca { box-shadow: 0 0 0 1px var(--tinta), 0 0 0 3px var(--chao), 0 0 0 4px var(--tinta); }
.cfg-ponto:focus-visible .cfg-ponto__rotulo { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .cfg-ponto:hover .cfg-ponto__marca { background: var(--verde); }
  .cfg-ponto:hover .cfg-ponto__rotulo { opacity: 1; transform: none; }
}
.cfg__palco:has(.cfg-close:not([hidden])) .cfg-pontos { display: none; }

/* o close de estúdio: painel sobre o palco — à direita no desktop, o palco inteiro no
   celular. Fundo do site, linha preta de 1 px. */
.cfg-close {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto;
  background: var(--chao);
}
.cfg-close[hidden] { display: none; }
@media (min-width: 900px) {
  .cfg-close {
    inset: 0 0 0 auto;
    width: min(46%, 640px);
    border-left: 1px solid var(--linha);
  }
}
.cfg-close__figura { margin: 0; min-height: 0; background: #F2F1EF; display: grid; place-items: center; }
/* 🔁 2026-10-06: no celular o palco ficou baixo (~36 % da tela) e o painel não cabia nele —
   o "Fechar" ia para fora da tela. Abaixo de 900 o close sobe como uma folha por cima da
   página, com a foto em 4:3 e o "Fechar" preso no pé */
@media (max-width: 899.98px) {
  .cfg-close, .cfg-close[data-sem-imagem] {
    position: fixed; inset: auto 0 0 0; z-index: 60;
    max-height: 88vh; max-height: 88svh; overflow-y: auto; overscroll-behavior: contain;
    grid-template-rows: auto auto auto;
    border-top: 1px solid var(--linha);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.12);
  }
  .cfg-close__figura { aspect-ratio: 4 / 3; }
  .cfg-close .cfg-close__fechar {
    position: sticky; bottom: 0;
    width: 100%; min-height: 52px; margin: 8px 0 0; padding: 0 var(--margem);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--chao); border-top: 1px solid var(--linha);
  }
}
.cfg-close__imagem { display: block; width: 100%; height: 100%; object-fit: contain; }
/* ponto sem foto de estúdio (camarão, B7): sem a figura, o painel desce para o pé do palco e
   deixa a peça à vista no 3D, onde a câmera foi */
.cfg-close[data-sem-imagem] { inset: auto 0 0 0; grid-template-rows: auto auto; border-top: 1px solid var(--linha); }
.cfg-close[data-sem-imagem] .cfg-close__figura { display: none; }
@media (min-width: 900px) {
  .cfg-close[data-sem-imagem] { inset: auto 0 0 auto; }
}
.cfg-close__texto {
  display: flex; flex-direction: column; row-gap: 8px;
  padding: calc(var(--cfg-ar) * 0.75) var(--margem) 0;
  border-top: 1px solid var(--linha);
}
@media (min-width: 900px) { .cfg-close__texto { padding-left: var(--calha); padding-right: var(--calha); } }
.cfg-close__titulo:focus, .cfg-close__titulo:focus-visible { outline: none; }
.cfg-close__linha { font-size: var(--t-menor); line-height: var(--lh-menor); color: var(--tinta); max-width: var(--medida); }
.cfg-close__nota { font-size: var(--t-menor); line-height: var(--lh-menor); color: var(--cinza); max-width: var(--medida); }
.cfg-close__nota[hidden] { display: none; }
.cfg-close .cfg-close__fechar { justify-self: start; margin: 4px var(--margem) 8px; }
@media (min-width: 900px) { .cfg-close .cfg-close__fechar { margin-left: var(--calha); } }

.cfg-espera__nota {
  position: absolute; left: var(--margem); bottom: var(--cfg-ar);
  color: var(--cinza);
  font-size: var(--t-menor); line-height: var(--lh-menor);
}

/* celular de tela baixa (≤ 720 px de altura, ex.: 360 × 640): palco menor, ar menor e sem
   o "Etapa n de 7" (a régua já diz) — senão os campos e as cores ficavam atrás do Seguir */
@media (max-width: 899.98px) and (max-height: 720px) {
  .p-configurador { --cfg-ar: 16px; }
  .cfg__corpo { grid-template-rows: clamp(170px, 28vh, 240px) minmax(0, 1fr); grid-template-rows: clamp(170px, 28svh, 240px) minmax(0, 1fr); }
  .cfg-etapa__conta { display: none; }
  .cfg-etapa__titulo { margin-top: 0; }
  .cfg-passos { padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .cfg-botao--cheio { min-height: 48px; }
}

/* 3. A coluna ---------------------------------------------------------------- */
.cfg__coluna {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: var(--chao);
}
/* topo: no celular, régua e "Resumo" numa linha só (o título fica para o leitor de tela);
   a partir de 900, título e "Resumo" em cima, régua embaixo */
.cfg-topo {
  flex: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "regua resumo";
  align-items: center; column-gap: var(--calha);
  padding: 4px var(--margem);
  border-bottom: 1px solid var(--linha);
}
.cfg-topo .cfg__titulo { grid-area: titulo; }
.cfg-topo__resumo { grid-area: resumo; }
.cfg-topo .cfg-regua { grid-area: regua; }
@media (max-width: 899.98px) {
  .cfg-topo .cfg__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 900px) {
  .cfg-topo {
    grid-template-areas: "titulo resumo" "regua regua"; row-gap: 4px;
    padding: calc(var(--cfg-ar) * 0.75) var(--margem) 8px var(--calha);
  }
}
.cfg-topo__resumo [data-quando="aberto"] { display: none; }
.cfg-topo__resumo[aria-expanded="true"] [data-quando="aberto"] { display: inline; }
.cfg-topo__resumo[aria-expanded="true"] [data-quando="fechado"] { display: none; }

/* a régua: um traço por etapa, cheio até a etapa em que se está. Cada traço é botão
   (44 px de alvo) e leva à etapa; o nome curto aparece a partir de 900 px */
.cfg-regua {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 4px;
  margin: 0; padding: 0;
}
@media (min-width: 900px) { .cfg-regua { column-gap: 6px; } }
.cfg-regua__passo {
  display: flex; flex-direction: column; justify-content: center; row-gap: 8px;
  width: 100%; min-height: 44px; margin: 0; padding: 0;
  font: inherit; text-align: left; color: var(--cinza-claro);
  background: none; border: 0; border-radius: 0; cursor: pointer;
}
.cfg-regua__traco { display: block; height: 3px; background: #DADADA; transition: background-color 0.3s ease; }
.cfg-regua__passo[data-feito="true"] .cfg-regua__traco,
.cfg-regua__passo[aria-current="step"] .cfg-regua__traco { background: var(--tinta); }
.cfg-regua__passo[data-feito="true"], .cfg-regua__passo[aria-current="step"] { color: var(--tinta); }
.cfg-regua__nome {
  display: none;
  font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cfg-regua__passo[aria-current="step"] .cfg-regua__nome { font-weight: 500; }
/* os nomes só quando cabem (a coluna passa de ~420 px a partir de 1200) */
@media (min-width: 1200px) { .cfg-regua__nome { display: block; } }
@media (min-width: 1800px) { .cfg-regua__nome { font-size: var(--cfg-pequeno); } }
.cfg-regua__passo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cfg-regua__passo:hover { color: var(--cinza); } }

/* o rótulo pequeno: o mesmo da Sobre nós (.reforma__rotulo) */
.cfg-rotulo {
  font-weight: 500;
  font-size: var(--cfg-pequeno); line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}
.cfg-rotulo { color: var(--tinta); }
.cfg-etapa__conta { color: var(--cinza); }

/* 4. O resumo ----------------------------------------------------------------
   Fechado por padrão; o "Resumo" do topo o abre no lugar da etapa (2026-10-06). */
.cfg-resumo { flex: none; }
.cfg-resumo__lista { display: none; }
.cfg-resumo[data-aberto="true"] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cfg-resumo[data-aberto="true"] .cfg-resumo__lista { display: block; }
.cfg__coluna:has(.cfg-resumo[data-aberto="true"]) :is(.cfg-etapas, .cfg-passos) { display: none; }
.cfg-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center; column-gap: var(--calha);
  width: 100%; min-height: var(--cfg-linha-alt);
  margin: 0; padding: 8px var(--margem);
  font: inherit; font-size: var(--t-corpo); line-height: var(--lh-corpo);
  text-align: left; color: var(--tinta);
  background: none; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}
@media (min-width: 900px) { .cfg-linha { padding: 8px var(--margem) 8px var(--calha); } }
.cfg-linha__rotulo {
  display: flex; align-items: center; column-gap: 10px;
  font-weight: 500; font-size: var(--cfg-pequeno); line-height: 1.2; text-transform: uppercase;
}
/* a etapa em que se está: o quadrado verde de 8 px da Sobre nós */
.cfg-linha__rotulo::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: transparent;
}
.cfg-linha[aria-current="step"] .cfg-linha__rotulo::before { background: var(--verde); }
.cfg-linha__valor { min-width: 0; overflow-wrap: anywhere; }
.cfg-linha:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .cfg-linha:hover { color: var(--cinza-claro); } }

/* 5. As etapas ---------------------------------------------------------------- */
.cfg-etapas {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--cfg-ar) var(--margem);
  scrollbar-width: thin;
}
@media (min-width: 900px) { .cfg-etapas { padding: calc(var(--cfg-ar) * 1.5) var(--margem) var(--cfg-ar) var(--calha); } }
.cfg-etapa[hidden] { display: none; }
.cfg-etapa__titulo {
  margin-top: 12px;
  font-weight: 500;
  font-size: var(--t-titulo); line-height: var(--lh-titulo);
  text-transform: uppercase;
}
/* o título recebe o foco a cada troca de etapa (leitor de tela); não é controle,
   então não leva o contorno de foco */
.cfg-etapa__titulo:focus, .cfg-etapa__titulo:focus-visible { outline: none; }
.cfg-etapa__texto {
  margin-top: calc(var(--cfg-ar) * 0.75);
  max-width: var(--medida);
  color: var(--tinta);
}
/* a segunda escolha dentro de uma etapa (etapa 4: o desenho do vidro, V1) */
.cfg-etapa__subtitulo { margin-top: calc(var(--cfg-ar) * 1.5); padding-top: var(--cfg-ar); border-top: 1px solid var(--linha); }
.cfg-ligacao { border-bottom: 1px solid var(--verde); padding-bottom: 1px; transition: color 0.3s ease; }
@media (hover: hover) and (pointer: fine) { .cfg-ligacao:hover { color: var(--cinza-claro); } }
.cfg-ligacao:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

/* etapa 1: dois campos de linha, como no Contato */
.cfg-medidas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--calha);
  margin-top: var(--cfg-ar);
}
.cfg-campo__rotulo { display: block; }
.cfg-campo__controle {
  display: block; width: 100%; min-height: 44px;
  margin: 0; padding: 10px 0 8px;
  font: inherit; font-size: var(--t-titulo); line-height: var(--lh-titulo);
  color: var(--tinta); background: transparent;
  border: 0; border-bottom: 1px solid var(--linha); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cfg-campo__caixa { position: relative; display: block; }
.cfg-campo__caixa .cfg-campo__controle { padding-right: 1.4em; }
.cfg-campo__unidade {
  position: absolute; right: 0; bottom: 10px;
  color: var(--cinza); font-size: var(--t-corpo); line-height: 1; pointer-events: none;
}
.cfg-exemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: var(--cfg-ar); }
.cfg-exemplos__rotulo { flex-basis: 100%; color: var(--cinza); font-size: var(--t-menor); line-height: var(--lh-menor); }
.cfg-exemplo {
  min-height: 40px; margin: 0; padding: 0 14px;
  font: inherit; font-size: var(--t-menor); line-height: 1; color: var(--tinta);
  background: var(--chao); border: 1px solid #BDBDBD; border-radius: 20px; cursor: pointer;
  transition: border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) { .cfg-exemplo:hover { border-color: var(--tinta); } }
.cfg-exemplo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.cfg-campo__controle:focus { outline: none; box-shadow: 0 2px 0 0 var(--tinta); }
.cfg-campo__controle[aria-invalid="true"] { border-bottom-color: var(--vermelho); }
.cfg-campo__controle[aria-invalid="true"]:focus { box-shadow: 0 2px 0 0 var(--vermelho); }
.cfg-campo__erro {
  margin-top: 8px;
  font-size: var(--t-menor); line-height: var(--lh-menor);
  color: var(--tinta);
}
.cfg-campo__erro:not([hidden]) { display: flex; align-items: baseline; column-gap: 10px; }
.cfg-campo__erro::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--vermelho); transform: translateY(-0.1em); }

/* etapas 2, 3, 4 e "igual ao perfil": opções em linhas de 1 px */
.cfg-opcoes { margin-top: var(--cfg-ar); border-top: 1px solid var(--linha); }
.cfg-opcao {
  display: flex; align-items: flex-start; column-gap: 16px;
  width: 100%; min-height: var(--cfg-linha-alt);
  margin: 0; padding: 14px 0;
  font: inherit; font-size: var(--t-corpo); line-height: var(--lh-corpo);
  text-align: left; color: var(--tinta);
  background: none; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}
.cfg-opcao__marca {
  flex: none; width: 8px; height: 8px;
  margin-top: calc((var(--lh-corpo) - 8px) / 2);
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.cfg-opcao[aria-pressed="true"] .cfg-opcao__marca { background: var(--verde); box-shadow: none; }
.cfg-opcao__cor {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.cfg-opcao[aria-pressed="true"] .cfg-opcao__cor {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--chao), 0 0 0 4px var(--tinta);
}
.cfg-opcao__textos { display: flex; flex-direction: column; row-gap: 4px; min-width: 0; }
.cfg-opcao__nome { font-weight: 500; }
.cfg-opcao__descricao { color: var(--cinza); font-size: var(--t-menor); line-height: var(--lh-menor); }
.cfg-opcao:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .cfg-opcao:hover .cfg-opcao__nome { color: var(--cinza); } }
.cfg-opcao--igual { margin-top: var(--cfg-ar); border-top: 1px solid var(--linha); }

/* o selo "vão especial": rótulo pequeno com o quadrado verde */
.cfg-selo {
  display: inline-flex; align-items: center; column-gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
  font-weight: 500; font-size: var(--cfg-pequeno); line-height: 1.2; text-transform: uppercase;
  color: var(--tinta);
}
.cfg-selo::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--verde); }
p.cfg-selo:not([hidden]) { display: flex; margin-top: var(--cfg-ar); }
/* o .cfg-selo acima ganhava do [hidden] e deixava o quadrado verde vazio na ficha */
.cfg-selo[hidden] { display: none; }

/* etapas 5 e 6: abas e cartela de amostras redondas */
.cfg-abas {
  display: flex; column-gap: var(--calha);
  margin-top: var(--cfg-ar);
  border-bottom: 1px solid var(--linha);
}
.cfg-aba {
  min-height: 44px; margin: 0 0 -1px; padding: 0;
  font: inherit; font-weight: 500; font-size: var(--cfg-pequeno); line-height: 1.2; text-transform: uppercase;
  color: var(--cinza); background: none;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.cfg-aba[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .cfg-aba:hover { color: var(--tinta); } }
.cfg-aba:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.cfg-cartela {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--cfg-amostra) * 2.2), 1fr));
  gap: var(--cfg-ar) var(--calha);
  margin-top: var(--cfg-ar);
}
.cfg-amostra {
  display: flex; flex-direction: column; align-items: flex-start; row-gap: 4px;
  width: 100%; margin: 0; padding: 4px;
  font: inherit; text-align: left; color: var(--tinta);
  background: none; border: 0; border-radius: 0;
  cursor: pointer;
}
.cfg-amostra__cor {
  display: block; width: var(--cfg-amostra); height: var(--cfg-amostra);
  margin-bottom: 8px; border-radius: 50%;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.2s ease;
}
.cfg-amostra[aria-pressed="true"] .cfg-amostra__cor {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 3px var(--chao), 0 0 0 4px var(--tinta);
}
.cfg-amostra__nome { font-size: var(--t-menor); line-height: var(--lh-menor); font-weight: 500; }
.cfg-amostra__codigo { font-size: var(--cfg-pequeno); line-height: 1.2; color: var(--cinza); text-transform: uppercase; }
.cfg-amostra:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cfg-amostra:hover .cfg-amostra__nome { color: var(--cinza); } }

/* cartela compacta das cores (etapas 5 e 6): só as amostras, a família inteira à vista; o
   nome da escolhida vem na linha embaixo */
.cfg-cartela--cores {
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 10px;
}
.cfg-cartela--cores .cfg-amostra { padding: 3px; align-items: center; }
.cfg-cartela--cores .cfg-amostra__cor { margin-bottom: 0; width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; }
/* o botão de abrir o formulário vive no rodapé da coluna ([data-passo-receber]) */
.cfg-enviar--abrir { display: none; }
.cfg-escolhida {
  margin-top: var(--cfg-ar); min-height: 1.2em;
  font-weight: 500; font-size: var(--cfg-pequeno); line-height: 1.2; text-transform: uppercase;
}
.cfg-escolhida:empty { display: none; }
.cfg-aviso {
  margin-top: var(--cfg-ar);
  color: var(--cinza);
  font-size: var(--t-menor); line-height: var(--lh-menor);
}

/* etapa 7: a ficha */
.cfg-ficha { margin: var(--cfg-ar) 0 0; border-top: 1px solid var(--linha); }
.cfg-ficha__linha {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--calha);
  align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--linha);
}
.cfg-ficha dt { font-weight: 500; font-size: var(--cfg-pequeno); line-height: 1.3; text-transform: uppercase; }
.cfg-ficha dd { margin: 0; overflow-wrap: anywhere; }
.cfg-enviar { margin-top: calc(var(--cfg-ar) * 1.5); }

/* 6. Botões: o "Enviar" do Contato — rótulo pequeno sublinhado ---------------- */
.cfg-passos {
  flex: none;
  display: flex; justify-content: space-between; align-items: center; column-gap: var(--calha);
  padding: 12px var(--margem);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linha);
}
@media (min-width: 900px) { .cfg-passos { padding: 16px var(--margem) 16px var(--calha); } }
.cfg-passos [data-passo="1"] { margin-left: auto; }
.cfg-botao {
  display: inline-flex; align-items: center;
  min-height: 44px; margin: 0; padding: 0;
  font: inherit; font-weight: 500; font-size: var(--cfg-pequeno); line-height: 1.2; text-transform: uppercase;
  color: var(--tinta); background: none;
  border: 0; border-radius: 0;
  cursor: pointer;
}
.cfg-botao[hidden] { display: none; }
.cfg-botao span { display: inline-block; border-bottom: 1px solid var(--tinta); padding-bottom: 2px; transition: color 0.3s ease; }
.cfg-botao--principal span { border-bottom-color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .cfg-botao:hover span { color: var(--cinza-claro); } }
.cfg-botao:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.cfg-enviar .cfg-botao { font-size: var(--t-corpo); }

/* o botão cheio (2026-10-06): o "Seguir" e o envio da etapa 7 — a ação principal da tela,
   preta, com 52 px de altura no alcance do polegar */
.cfg-botao--cheio {
  justify-content: center; white-space: nowrap;
  min-height: 52px; padding: 0 24px;
  color: var(--chao); background: var(--tinta);
  transition: background-color 0.2s ease;
}
.cfg-botao--cheio span, .cfg-botao--cheio span span { border-bottom: 0; padding-bottom: 0; }
.cfg-botao.cfg-botao--cheio span { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .cfg-botao--cheio:hover { background: #333; }
  .cfg-botao--cheio:hover span { color: var(--chao); }
}
.cfg-botao--cheio:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.cfg-enviar .cfg-botao--cheio { font-size: var(--cfg-pequeno); }
@media (max-width: 899.98px) { .cfg-enviar .cfg-botao--cheio { width: 100%; } }

/* 7. Rodapé: encosta na linha de baixo do configurador ---------------------- */
.p-configurador .rodape { margin-top: 0; }



/* 8. Etapa 7: o formulário de envio e o plano B (Tarefa D3) ------------------- */
.cfg-envio { margin-top: var(--cfg-ar); display: grid; row-gap: var(--cfg-ar); }
.cfg-envio[hidden] { display: none; }
.cfg-isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cfg-consentimento__rotulo { display: flex; align-items: flex-start; column-gap: 12px; font-size: var(--t-menor); line-height: var(--lh-menor); cursor: pointer; }
.cfg-consentimento__rotulo input {
  flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--tinta);
}
.cfg-consentimento__rotulo input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.cfg-envio__estado { margin: 12px 0 0; font-size: var(--t-menor); line-height: var(--lh-menor); color: var(--cinza); }
.cfg-envio__estado:empty { display: none; }
.cfg-envio__resultado { margin-top: var(--cfg-ar); }
.cfg-envio__mensagem { margin: 0; outline: none; }
.cfg-envio__acoes { display: flex; flex-wrap: wrap; column-gap: calc(var(--cfg-ar) * 1.5); margin-top: var(--cfg-ar); }
.cfg-envio__acoes .cfg-botao { font-size: var(--t-corpo); text-decoration: none; }