/* Atalho de teclado para pular o cabeçalho */
.pular {
  position: absolute;
  left: var(--margem);
  top: -100px;
  padding: var(--e2) var(--e4);
  background: var(--gls-surface);
  color: var(--gls-text);
  border-radius: var(--gls-radius);
}
.pular:focus { top: var(--e2); }

/* Botões */
.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--gls-accent);
  border-radius: var(--gls-radius);
  background: transparent;
  color: var(--gls-text);
  font: 500 16px/1.3 var(--gls-font);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s;
}
.btn:hover { background: var(--gls-accent-tint); color: var(--gls-text); }
.btn:active { border-color: var(--gls-accent-strong); transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: default; }

.btn-sec { color: var(--gls-accent-text); font-weight: 500; text-decoration: none; }
.btn-sec:hover { text-decoration: underline; }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e5);
  margin-block-start: var(--e6);
}

/* Superfícies */
.cartao {
  background: var(--gls-vidro);
  border: 1px solid var(--gls-line);
  border-radius: var(--gls-radius-lg);
  box-shadow: var(--gls-relevo);
  padding: var(--e5);
}

.divisoria {
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--gls-line) 48px, var(--gls-line) calc(100% - 48px), transparent);
}

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-block: var(--e5);
  padding: 0;
  list-style: none;
  max-width: none;
}
.etiquetas li + li { margin-block-start: 0; }
.etiqueta {
  display: inline-block;
  padding: var(--e1) var(--e2);
  background: var(--gls-accent-tint);
  color: var(--gls-accent-text);
  border-radius: var(--gls-radius-sm);
  font-size: 13px;
  line-height: 1.3;
}

/* Lista de termo e descrição, separada por linhas */
.linhas { margin: 0; }
.linhas > div {
  display: grid;
  gap: var(--e2) var(--e6);
  padding-block: var(--e5);
  border-block-start: 1px solid var(--gls-line);
}
.linhas dt { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.linhas dd { margin: 0; max-width: 72ch; color: var(--gls-muted); }
@media (min-width: 800px) {
  .linhas > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  /* Lista com mais de cinco itens: em pares, com o termo sobre a descrição, para não virar tabela */
  .linhas-pares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e8); }
  .linhas-pares > div { grid-template-columns: minmax(0, 1fr); align-content: start; }
}

/* Etapas em sequência: o número indica a ordem real. Um trilho liga os blocos, como em um fluxo de sistema. */
.passos {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
  max-width: none;
}
.passos li {
  counter-increment: passo;
  position: relative;
  margin: 0;
  padding-block-end: var(--e6);
}
.passos li:last-child { padding-block-end: 0; }
.passos li > div { display: grid; gap: var(--e2) var(--e6); }
/* Bloco quadrado com as proporções dos blocos do logo */
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--gls-vidro);
  border: 1px solid var(--gls-controle);
  border-radius: 5px;
  color: var(--gls-text);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.passos li::after {
  content: "";
  position: absolute;
  inset-inline-start: 15.5px;
  inset-block: 40px -8px;
  width: 1px;
  background: var(--gls-line);
}
.passos li:last-child::after { display: none; }
/* A entrega é o que o cliente recebe: contorno lilás reforçado por dentro, como o bloco S do logo */
.passos .passo-entrega::before {
  border-color: var(--gls-accent-strong);
  color: var(--gls-accent-text);
  box-shadow: inset 0 0 0 1px var(--gls-accent-strong);
}
/* O recuo fica no texto, não no item, para a coluna de descrição alinhar com a de .linhas */
.passos h3 { margin-block-end: 0; padding-block-start: 2px; padding-inline-start: var(--e7); }
.passos p { padding-inline-start: var(--e7); color: var(--gls-muted); }
@media (min-width: 800px) {
  .passos li > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .passos p { padding-block-start: 5px; padding-inline-start: 0; }
}
/* Em telas largas as etapas correm da esquerda para a direita, como o tempo do projeto, e cada
   coluna tem a largura que o seu texto pede. Depois da Sustentação o trilho continua e some:
   é a única etapa sem data para acabar. */
@media (min-width: 1000px) {
  .passos {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.1fr);
  }
  .passos li { padding-block: var(--e7) 0; padding-inline-end: var(--e6); }
  .passos li:last-child { padding-inline-end: 0; }
  .passos li > div { grid-template-columns: minmax(0, 1fr); }
  .passos li::after { inset-block: 15.5px auto; inset-inline: 40px 8px; width: auto; height: 1px; }
  .passos li:last-child::after {
    display: block;
    inset-inline-end: 0;
    background: linear-gradient(90deg, var(--gls-line), transparent);
  }
  .passos h3 { padding: 0; }
  .passos p { padding-block-start: 0; font-size: 16px; }
}

/* Grade de duas colunas assimétricas */
.duas { display: grid; gap: var(--e7); align-items: start; }
@media (min-width: 1000px) {
  .duas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e8); }
}
/* Na coluna estreita não cabem termo e descrição lado a lado: um fica sobre o outro */
.duas .linhas > div { grid-template-columns: minmax(0, 1fr); }

/* Formulários */
.formulario { display: grid; gap: var(--e5); }
.campo { display: grid; gap: var(--e2); }
.campo label, .grupo legend { font-size: 16px; font-weight: 500; }
.opcional { font-weight: 400; color: var(--gls-muted); }
.campo input, .campo textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--gls-bg);
  color: var(--gls-text);
  border: 1px solid var(--gls-controle);
  border-radius: var(--gls-radius);
  font: 400 17px/1.5 var(--gls-font);
}
.campo textarea { min-height: 160px; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline-offset: 0; box-shadow: 0 0 0 5px color-mix(in srgb, var(--gls-accent) 20%, transparent); }
.campo [aria-invalid="true"] { border-color: var(--gls-erro); }

.grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.grupo legend { padding: 0; margin-block-end: var(--e2); }

.marcar { display: flex; align-items: flex-start; gap: var(--e3); line-height: 1.45; cursor: pointer; }
.marcar + .marcar { margin-block-start: var(--e2); }
/* Campo de texto da opção "Outro:", alinhado ao texto das caixas */
.outro { margin-block-start: var(--e2); padding-inline-start: calc(18px + var(--e3)); }
.outro[hidden] { display: none; }
.marcar input {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  background: var(--gls-bg);
  border: 1px solid var(--gls-controle);
  border-radius: var(--gls-radius-sm);
  cursor: pointer;
  transition: border-color .12s;
}
/* A caixa marcada recebe o contorno lilás do bloco S do logo */
.marcar input:checked {
  border-color: var(--gls-accent-strong);
  background-image: var(--gls-visto);
  background-position: center;
  background-size: 12px;
  background-repeat: no-repeat;
}

.erro { margin: 0; color: var(--gls-erro); font-size: 14px; line-height: 1.45; }
.erro:empty { display: none; }
.status { margin: 0; font-size: 16px; }
.status[data-estado="erro"] { color: var(--gls-erro); }
.status[data-estado="ok"] { color: var(--gls-accent-text); }
.reservado { position: absolute; left: -9999px; }

/* Cabeçalho */
/* Em telas largas o cabeçalho acompanha a rolagem, sobre vidro fosco e com um fio de linha embaixo.
   No celular ele ocupa mais de uma linha e, por isso, rola junto com a página. */
@media (min-width: 900px) {
  .topo {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: var(--gls-topo);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--gls-line);
  }
  .topo .topo-linha { padding-block: var(--e2); }
  /* Âncoras e foco de teclado não ficam escondidos atrás do cabeçalho */
  html { scroll-padding-top: 96px; }
}
/* Quem pede menos transparência recebe o cabeçalho opaco, sem desfoque */
@media (min-width: 900px) and (prefers-reduced-transparency: reduce) {
  .topo { background: var(--gls-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.topo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e5);
  padding-block: var(--e4);
}
.topo-logo { display: block; padding-block: var(--e2); }
.topo-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e5); }
.topo-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.topo-nav li + li { margin-block-start: 0; }
.topo-nav li a {
  display: inline-block;
  padding-block: var(--e2);
  color: var(--gls-text);
  font-size: 16px;
  text-decoration: none;
}
.topo-nav li a:hover { color: var(--gls-accent-text); }
.topo-nav li a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--gls-accent); }
.topo-nav .btn[aria-current="page"] { border-color: var(--gls-accent-strong); }

/* Rodapé: linha de ponta a ponta, grade de quatro colunas (marca, contato, navegação,
   institucional) e barra de base com a assinatura no centro */
.rodape {
  border-block-start: 1px solid var(--gls-line);
  padding-block: var(--e7) var(--e6);
}
.rodape-grade { display: grid; gap: var(--e5); }
.rodape-grade > * { min-width: 0; }
@media (min-width: 600px) {
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .rodape-grade { grid-template-columns: 1.3fr 1fr .8fr 1fr; gap: var(--e6); }
}
.rodape p, .rodape a { font-size: 14px; line-height: 1.9; color: var(--gls-muted); }
.rodape p { max-width: 36ch; }
.rodape p + p { margin-block-start: 0; }
.rodape a { text-decoration: none; transition: color .12s; }
.rodape a:hover { color: var(--gls-accent-text); }
.rodape-logo { width: auto; height: 62px; margin-block-end: var(--e3); }
/* Rótulo muito curto: o único uso de caixa alta do site */
.rodape-grade .rodape-titulo { margin-block-end: var(--e3); font-size: 11px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
/* Botão de ícone: um bloco do símbolo, que ganha o contorno lilás ao passar o ponteiro */
.rodape-atalhos { display: flex; gap: var(--e2); margin-block: var(--e1) var(--e4); }
.rodape .rodape-atalho {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--gls-vidro);
  border: 1px solid var(--gls-line);
  border-radius: var(--gls-radius);
  line-height: 1;
  transition: color .12s, border-color .12s;
}
.rodape .rodape-atalho:hover {
  border-color: var(--gls-accent-strong);
  color: var(--gls-accent-strong);
}
.rodape-base {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: var(--e4) var(--e5);
  margin-block-start: var(--e7);
  padding-block-start: var(--e5);
  border-block-start: 1px solid var(--gls-line-suave);
  font-size: 12px;
  line-height: 1.3;
  color: var(--gls-muted);
}
.rodape-base a { font-size: inherit; line-height: inherit; }
.rodape .rodape-assinatura { display: flex; align-items: center; gap: var(--e2); order: -1; line-height: 1.2; }
.rodape-assinatura picture { flex: none; }
.rodape-assinatura img { width: auto; height: 48px; }
.rodape-assinatura > span { display: flex; flex-direction: column; gap: 3px; }
.rodape-assinatura-linha { font-size: 10px; letter-spacing: .06em; }
.rodape-assinatura-nome { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--gls-text); transition: color .12s; }
.rodape-assinatura:hover .rodape-assinatura-nome { color: var(--gls-accent-strong); }
@media (min-width: 760px) {
  /* 1fr | auto | 1fr: a assinatura fica no centro da página, não no centro do espaço que sobra */
  .rodape-base { grid-template-columns: 1fr auto 1fr; }
  .rodape-base > :first-child { justify-self: start; }
  .rodape .rodape-assinatura { order: 0; }
  .rodape-topo { justify-self: end; }
}