/* ==========================================================
   Rubrica · página do produto
   Ideia: a página é a vitrine, não a joia. Fundo quase branco,
   uma fonte só, nenhum enfeite. Quem brilha são os estilos.
   Layout: uma coluna larga, alinhada à esquerda, com muito ar;
   a vitrine do estilo é a única imagem grande da página.
   ========================================================== */

@font-face {
  font-family: "Inter";
  src: url("fontes/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Fonte reserva com as mesmas medidas da Inter: nada "pula" quando ela chega. */
@font-face {
  font-family: "Inter Reserva";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 106.75%; ascent-override: 90.75%; descent-override: 22.6%; line-gap-override: 0%;
}

:root {
  --cor-fundo: #FAFAF8;
  --cor-superficie: #FFFFFF;
  --cor-suave: #F1F1EE;
  --cor-tinta: #111214;
  --cor-apoio: #5E6168;
  --cor-linha: #E4E4E0;
  --cor-erro: #B42318;

  --fonte: "Inter", "Inter Reserva", -apple-system, "Segoe UI", Arial, sans-serif;
  --tam-texto: 1.0625rem;
  --tam-pequeno: 0.9375rem;
  --tam-h1: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --tam-h2: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --tam-h3: 1.125rem;

  --largura: 1200px;
  --margem: clamp(1rem, 0.5rem + 2.6vw, 2.5rem);
  --secao: clamp(5rem, 3.5rem + 6vw, 9rem);
  --raio: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--cor-fundo); color: var(--cor-tinta);
  font-family: var(--fonte); font-size: var(--tam-texto); line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h2 { font-size: var(--tam-h2); line-height: 1.08; letter-spacing: -0.035em; }
h3 { font-size: var(--tam-h3); line-height: 1.35; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--cor-tinta); outline-offset: 3px; border-radius: 4px; }

.pular { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--cor-tinta); color: #fff; padding: 0.75rem 1rem; border-radius: 8px; }
.pular:focus { top: 1rem; }
[hidden] { display: none !important; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dentro { width: min(100%, var(--largura)); margin-inline: auto; padding-inline: var(--margem); }

/* ---------- Botões e links ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0.8rem 1.6rem; border-radius: 999px;
  background: var(--cor-tinta); color: #fff; border: 1px solid var(--cor-tinta);
  font: inherit; font-size: var(--tam-pequeno); font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}
.botao:hover { background: #2A2C30; }
.botao:active { transform: scale(0.98); }
.botao--pequeno { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.botao--contorno { background: transparent; color: var(--cor-tinta); border-color: #CFCFCA; }
.botao--contorno:hover { background: var(--cor-superficie); border-color: var(--cor-tinta); }
.link-seta {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  font-size: var(--tam-pequeno); font-weight: 600; text-decoration: none;
}
.link-seta::after { content: "→"; transition: transform 0.2s ease; }
.link-seta:hover::after { transform: translateX(3px); }

.sobre { font-size: 0.875rem; font-weight: 500; color: var(--cor-apoio); margin-bottom: 1.25rem; }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(250, 250, 248, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cabecalho { animation: cabecalho-linha linear both; animation-timeline: scroll(); animation-range: 0 64px; }
    @keyframes cabecalho-linha { to { border-bottom-color: var(--cor-linha); } }
  }
}
.cabecalho__dentro {
  width: min(100%, var(--largura)); margin-inline: auto; padding-inline: var(--margem);
  height: 64px; display: flex; align-items: center; gap: 2rem;
}
.marca { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.035em; text-decoration: none; margin-right: auto; }
.menu { display: flex; gap: 1.75rem; }
.menu a { font-size: 0.875rem; color: var(--cor-apoio); text-decoration: none; transition: color 0.15s ease; }
.menu a:hover { color: var(--cor-tinta); }

/* ---------- Abertura ---------- */
.abertura { padding-top: clamp(3.5rem, 2rem + 6vw, 7.5rem); }
.abertura h1 {
  font-size: var(--tam-h1); line-height: 1.02; letter-spacing: -0.045em; font-weight: 600;
  max-width: 15ch;
}
.abertura__base {
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.75rem 3rem;
}
.abertura__apoio { max-width: 34rem; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.5; color: var(--cor-apoio); letter-spacing: -0.01em; }
.abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* Vitrine: o exemplo aberto no computador e no celular */
.vitrine { margin-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.vitrine__link { position: relative; display: block; text-decoration: none; padding-bottom: 3.5rem; }
/* Ponto de fuga no alto: quando a tela inclina para trás, ela continua bem à vista. */
@media (min-width: 700px) { .vitrine__link { perspective: 2400px; perspective-origin: 50% 0%; } }
.vitrine__tela {
  margin-right: clamp(0px, 8vw, 140px);
  border-radius: var(--raio); overflow: hidden; background: var(--cor-superficie);
  border: 1px solid var(--cor-linha);
  box-shadow: 0 1px 2px rgba(17, 18, 20, 0.04), 0 30px 60px -30px rgba(17, 18, 20, 0.25);
  transform-origin: 50% 100%;
  transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}
.vitrine__barra {
  height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--cor-suave); border-bottom: 1px solid var(--cor-linha);
}
.vitrine__barra > span {
  font-size: 0.75rem; color: var(--cor-apoio); background: var(--cor-superficie);
  padding: 0.15rem 1rem; border-radius: 999px; border: 1px solid var(--cor-linha);
}
.vitrine__visor { position: relative; }
.vitrine__tela picture { display: block; aspect-ratio: 1440 / 900; background: #1E2A36; }
.vitrine__tela img { width: 100%; height: 100%; object-fit: cover; }
.vitrine__celular {
  position: absolute; right: 0; bottom: 0; width: clamp(150px, 16vw, 220px);
  border-radius: 28px; overflow: hidden; background: var(--cor-tinta);
  border: 6px solid var(--cor-tinta);
  box-shadow: 0 40px 60px -30px rgba(17, 18, 20, 0.45);
  transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vitrine__celular picture { display: block; aspect-ratio: 300 / 649; border-radius: 22px; overflow: hidden; background: #1E2A36; }
.vitrine__celular img { width: 100%; height: 100%; object-fit: cover; }
.vitrine__link:hover .vitrine__tela { translate: 0 -4px; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.04), 0 40px 70px -30px rgba(17, 18, 20, 0.3); }
.vitrine__link:hover .vitrine__celular { translate: 0 -8px; }
.vitrine figcaption { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--cor-apoio); }

/* Duas aberturas na mesma vitrine. A Fachada fica no fluxo; a Manchete, por cima, só aparece quando escolhida. */
.vitrine__versao { position: relative; }
.vitrine__versao[data-versao="manchete"] { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; }
.vitrine__versao[data-versao="manchete"] picture { background: #FFFFFF; }
.vitrine--manchete .vitrine__versao[data-versao="manchete"] { opacity: 1; visibility: visible; }

/* Chave Fachada · Manchete: o fundo branco desliza para a opção escolhida. */
.vitrine { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; }
.vitrine__link { grid-column: 1 / -1; }
.vitrine figcaption { grid-row: 2; grid-column: 1; }
.vitrine__chave { grid-row: 2; grid-column: 2; margin-top: 1.25rem; display: flex; align-items: center; gap: 0.75rem; font-size: var(--tam-pequeno); }
.vitrine__chave-nome { color: var(--cor-apoio); }
.vitrine__opcoes {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: 999px; background: var(--cor-suave); border: 1px solid var(--cor-linha);
}
.vitrine__opcoes::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--cor-superficie); box-shadow: 0 1px 2px rgba(17, 18, 20, 0.08), 0 3px 10px -4px rgba(17, 18, 20, 0.18);
}
.vitrine__opcoes:has(#vitrine-manchete:checked)::before { transform: translateX(100%); }
.vitrine__opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.vitrine__opcoes label {
  position: relative; z-index: 1; padding: 0.5rem 1.1rem; border-radius: 999px; text-align: center;
  font-weight: 500; color: var(--cor-apoio); cursor: pointer; transition: color 0.2s ease;
}
.vitrine__opcoes input:checked + label { color: var(--cor-tinta); }
.vitrine__opcoes:has(input:focus-visible) { outline: 2px solid var(--cor-tinta); outline-offset: 3px; }
@media (hover: hover) { .vitrine__opcoes input:not(:checked) + label:hover { color: var(--cor-tinta); } }

/* ---------- Seções ---------- */
.secao { padding-block: var(--secao); }
.secao--linha { border-top: 1px solid var(--cor-linha); }
.secao__topo { max-width: 44rem; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.secao__apoio { margin-top: 1.25rem; color: var(--cor-apoio); max-width: 36rem; }

/* O que você recebe */
.beneficios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.beneficios li { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.5rem; border-top: 1px solid var(--cor-linha); }
.beneficios svg { width: 24px; height: 24px; margin-bottom: 0.6rem; fill: none; stroke: var(--cor-tinta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.beneficios p { color: var(--cor-apoio); font-size: var(--tam-pequeno); max-width: 22rem; }

/* Como funciona */
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.5rem; }
.passos li { display: flex; flex-direction: column; gap: 0.6rem; }
.passos__numero {
  font-size: clamp(3.5rem, 2.8rem + 2.5vw, 5rem); line-height: 1; font-weight: 250; letter-spacing: -0.05em;
  color: #B5B6B0; margin-bottom: 1rem; font-variant-numeric: tabular-nums;
}
.passos p { color: var(--cor-apoio); font-size: var(--tam-pequeno); max-width: 22rem; }

/* ---------- Monte o seu site ---------- */
/* Seis etapas, uma por vez, dentro do mesmo cartão. As respostas são imagens,
   botões e caixas grandes: o advogado escolhe olhando, não lendo listas. */
.monte { padding-block: var(--secao); background: var(--cor-suave); }
.montagem {
  --respiro: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  background: var(--cor-superficie); border-radius: calc(var(--raio) + 6px);
  border: 1px solid var(--cor-linha);
  box-shadow: 0 30px 60px -40px rgba(17, 18, 20, 0.25);
}
.montagem__progresso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.5rem var(--respiro); border-bottom: 1px solid var(--cor-linha);
}
.montagem__progresso p { font-size: var(--tam-pequeno); display: flex; gap: 0.6rem; }
.montagem__progresso p span { color: var(--cor-apoio); }
.montagem__etapas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: min(100%, 22rem); }
.montagem__etapas li { position: relative; height: 4px; border-radius: 4px; background: var(--cor-linha); overflow: hidden; text-indent: 200%; white-space: nowrap; font-size: 0; }
/* Cada traço se enche da esquerda: parcial na etapa atual, inteiro quando ela está respondida. */
.montagem__etapas li::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cor-tinta);
  transform-origin: left; transform: scaleX(0); transition: transform 0.9s var(--curva);
}
.montagem__etapas li.atual::after { transform: scaleX(0.35); }
.montagem__etapas li.feita::after, .montagem__etapas li.atual.completa::after { transform: none; }

.montagem__palco { position: relative; }
.etapa { border: 0; margin: 0; padding: var(--respiro); min-width: 0; }
/* Durante a troca, a etapa que sai fica por cima da que entra, no mesmo lugar. */
.etapa.saindo { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
/* A legenda vira um título comum, sem o desenho especial que o navegador dá a ela. */
.etapa__cabeca { float: left; width: 100%; padding: 0; margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.etapa__cabeca + * { clear: both; }
.etapa__titulo { display: block; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; }
.etapa__titulo:focus { outline: none; }
.etapa__apoio { display: block; margin-top: 0.4rem; font-size: var(--tam-pequeno); color: var(--cor-apoio); max-width: 40rem; }

/* Cartões de escolha com imagem: estilo, paleta e abertura. */
.estilos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.estilos--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.estilos--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.estilo { position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
.estilo input { position: absolute; opacity: 0; pointer-events: none; }
.estilo label {
  display: flex; flex-direction: column; gap: 0.4rem; height: 100%;
  padding: 0.75rem 0.75rem 3.75rem; border-radius: var(--raio);
  border: 1px solid var(--cor-linha); background: var(--cor-fundo); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.estilo label:hover { border-color: #BDBDB7; }
.estilo input:focus-visible + label { outline: 2px solid var(--cor-tinta); outline-offset: 3px; }
.estilo input:checked + label { border-color: var(--cor-tinta); background: var(--cor-superficie); box-shadow: inset 0 0 0 1px var(--cor-tinta); }
.estilo__miniatura { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; margin-bottom: 0.75rem; background: #1E2A36; position: relative; }
.estilo__miniatura--larga { aspect-ratio: 16 / 10; }
.estilo--paleta .estilo__miniatura, .estilo--abertura .estilo__miniatura { background: var(--cor-suave); }
.estilo__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.estilo input:checked + label .estilo__miniatura::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cor-tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 0 0 2px #fff;
}
.estilo__miniatura--vazia {
  display: grid; place-items: center; background: repeating-linear-gradient(135deg, #ECECE8 0 10px, #E6E6E2 10px 20px);
  font-size: 0.8125rem; font-weight: 500; color: var(--cor-apoio);
}
.estilo__nome { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; padding-inline: 0.5rem; }
.estilo__desc { font-size: 0.875rem; line-height: 1.5; color: var(--cor-apoio); padding-inline: 0.5rem; }
.estilo__movimento {
  align-self: flex-start; justify-self: start; margin: 0.5rem 0.5rem 0; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; color: var(--cor-apoio); border: 1px solid var(--cor-linha); background: var(--cor-superficie);
}
.estilo__exemplo { position: absolute; left: 1.25rem; bottom: 0.6rem; }
.estilo--breve label { cursor: not-allowed; padding-bottom: 1.25rem; }
.estilo--breve label:hover { border-color: var(--cor-linha); }
.estilo--breve .estilo__nome { color: var(--cor-apoio); }

/* As cinco cores de cada paleta, em bolinhas. */
.amostras { display: flex; gap: 5px; padding-inline: 0.5rem; margin-block: 0.1rem 0.15rem; }
.amostras i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(17, 18, 20, 0.14); }

/* Nível de movimento: três botões, cada um com uma pequena demonstração. */
.movimentos { margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); padding-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); border-top: 1px solid var(--cor-linha); }
.movimentos__titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.75rem; margin-bottom: 1rem; }
.movimentos__titulo strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.movimentos__titulo span { font-size: var(--tam-pequeno); color: var(--cor-apoio); }
.movimentos__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.movimento { position: relative; }
.movimento input { position: absolute; opacity: 0; pointer-events: none; }
.movimento label {
  display: flex; flex-direction: column; gap: 0.3rem; height: 100%;
  padding: 0.75rem 0.75rem 1rem; border-radius: var(--raio);
  border: 1px solid var(--cor-linha); background: var(--cor-fundo); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.movimento label:hover { border-color: #BDBDB7; }
.movimento input:focus-visible + label { outline: 2px solid var(--cor-tinta); outline-offset: 3px; }
.movimento input:checked + label { border-color: var(--cor-tinta); background: var(--cor-superficie); box-shadow: inset 0 0 0 1px var(--cor-tinta); }
.movimento__demo {
  display: flex; flex-direction: column; justify-content: center; gap: 7px; height: 84px; padding-inline: 18%;
  margin-bottom: 0.5rem; border-radius: 8px; background: var(--cor-suave); overflow: hidden;
}
.movimento__demo i { display: block; width: 100%; height: 9px; border-radius: 3px; background: #CDCDC8; }
.movimento__demo i:first-child { width: 70%; height: 12px; background: #8E9096; }
.movimento__demo i:last-child { width: 56%; }
.movimento input:checked + label .movimento__demo i:first-child { background: var(--cor-tinta); }
.movimento__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; font-weight: 600; letter-spacing: -0.01em; padding-inline: 0.25rem; }
.movimento__padrao {
  padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--cor-linha); background: var(--cor-superficie);
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0; color: var(--cor-apoio);
}
.movimento__desc { font-size: 0.875rem; line-height: 1.5; color: var(--cor-apoio); padding-inline: 0.25rem; }

/* Áreas: botões que se marcam. */
.areas-opcoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.area-opcao { position: relative; }
.area-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.area-opcao span {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0.55rem 1.1rem 0.55rem 0.9rem;
  border-radius: 999px; border: 1px solid #D6D6D1; background: var(--cor-fundo);
  font-size: var(--tam-pequeno); font-weight: 500; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.45s var(--curva-mola);
}
.area-opcao span::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%235E6168' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M7 2.5v9M2.5 7h9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.area-opcao:active span { transform: scale(0.96); transition-duration: 0.1s; }
.area-opcao input:focus-visible + span { outline: 2px solid var(--cor-tinta); outline-offset: 3px; }
.area-opcao input:checked + span { background-color: var(--cor-tinta); border-color: var(--cor-tinta); color: #fff; }
.area-opcao input:checked + span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.4l2.9 2.9L11.5 4'/%3E%3C/svg%3E");
}
@media (hover: hover) { .area-opcao:hover span { border-color: var(--cor-tinta); } }

/* Serviços: caixas grandes, com uma frase explicando cada um. */
.servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.servico {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.9rem; align-items: start;
  padding: 1rem 1.1rem; border-radius: 12px; border: 1px solid var(--cor-linha); background: var(--cor-fundo); cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.45s var(--curva-mola);
}
.servico input { position: absolute; opacity: 0; pointer-events: none; }
.servico__caixa {
  width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; border: 1.5px solid #BDBDB7;
  background: var(--cor-superficie) center / 14px no-repeat;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.servico__texto { display: flex; flex-direction: column; gap: 0.15rem; }
.servico__texto strong { font-weight: 600; letter-spacing: -0.01em; }
.servico__texto span { font-size: 0.875rem; line-height: 1.5; color: var(--cor-apoio); }
.servico:active { transform: scale(0.985); transition-duration: 0.1s; }
.servico:has(input:focus-visible) { outline: 2px solid var(--cor-tinta); outline-offset: 3px; }
.servico:has(input:checked) { border-color: var(--cor-tinta); background: var(--cor-superficie); box-shadow: inset 0 0 0 1px var(--cor-tinta); }
.servico input:checked ~ .servico__caixa {
  background-color: var(--cor-tinta); border-color: var(--cor-tinta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.4l2.9 2.9L11.5 4'/%3E%3C/svg%3E");
}
.servico--base, .servico--completo { grid-column: 1 / -1; }
/* Site no ar: vem sempre. Fica num fundo próprio, com o visto em cinza, e não se desmarca. */
.servico--base { background: var(--cor-suave); border-color: transparent; cursor: default; }
.servico--base:active { transform: none; }
.servico--base .servico__caixa {
  border-color: var(--cor-apoio); background-color: var(--cor-apoio);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.4l2.9 2.9L11.5 4'/%3E%3C/svg%3E");
}
.servico__selo {
  display: inline-block; margin-left: 0.45rem; padding: 0.1rem 0.5rem; border-radius: 99px; vertical-align: 0.08em;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0; line-height: 1.5;
  color: var(--cor-apoio); background: var(--cor-superficie); border: 1px solid var(--cor-linha);
}
.servico--completo:has(input:checked) .servico__selo { color: var(--cor-tinta); border-color: var(--cor-tinta); }
@media (hover: hover) { .servico:hover { border-color: #BDBDB7; } .servico--base:hover { border-color: transparent; } }
/* Nota abaixo dos serviços: um lembrete, não uma opção. */
.servicos__nota { margin-top: 1rem; padding-inline: 0.25rem; font-size: var(--tam-pequeno); color: var(--cor-apoio); }

/* Campos de texto. Letra de 16 px: no iPhone, menos que isso faz a tela aproximar sozinha. */
.contato-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.campo { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo--outra { margin-top: 1.5rem; max-width: 28rem; }
.campo label { font-size: 0.875rem; font-weight: 550; }
.campo label span { margin-left: 0.3rem; font-weight: 400; color: var(--cor-apoio); }
.campo input, .campo textarea {
  width: 100%; min-height: 52px; padding: 0.8rem 1rem; border-radius: 10px;
  border: 1px solid #D6D6D1; background: var(--cor-fundo); color: var(--cor-tinta);
  font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.campo textarea { min-height: 104px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #8A8C92; }
.campo input:hover, .campo textarea:hover { border-color: #BDBDB7; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cor-tinta); background: var(--cor-superficie); box-shadow: 0 0 0 3px rgba(17, 18, 20, 0.08); }
.campo [aria-invalid="true"] { border-color: var(--cor-erro); }
.campo [aria-invalid="true"]:focus { border-color: var(--cor-erro); box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }

/* No computador, os campos à esquerda e o resumo à direita: tudo cabe numa tela. */
@media (min-width: 1024px) {
  .contato-grade { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .contato-grade .resumo { margin-top: 0; }
  .contato-grade .resumo__lista > div { grid-template-columns: minmax(0, 1fr) auto; padding-block: 0.45rem; }
  .contato-grade .resumo__lista dt, .contato-grade .resumo__lista dd { grid-column: 1; }
  .contato-grade .resumo__alterar { grid-column: 2; grid-row: 1 / span 2; }
}

/* Resumo das escolhas, com "alterar" em cada linha. */
.resumo {
  margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); padding: 1.1rem clamp(1rem, 0.7rem + 1.2vw, 1.5rem) 0.4rem;
  border-radius: var(--raio); border: 1px solid var(--cor-linha); background: var(--cor-fundo);
}
.resumo__titulo { font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.resumo__lista { margin: 0; }
.resumo__lista > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 0 1rem; align-items: center;
  padding-block: 0.2rem; border-top: 1px solid var(--cor-linha);
}
.resumo__lista dt { font-size: 0.875rem; color: var(--cor-apoio); }
.resumo__lista dd { margin: 0; font-size: var(--tam-pequeno); font-weight: 500; }
.resumo__lista dd.vazio { font-weight: 400; color: var(--cor-apoio); }
.resumo__alterar {
  min-height: 44px; padding: 0 0.25rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--cor-tinta);
  text-decoration: underline; text-decoration-color: #C4C4BF; text-underline-offset: 4px;
}
.resumo__alterar:hover { text-decoration-color: currentColor; }

/* Confirmação depois do envio. */
.etapa--fim { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.fim__sinal { width: 64px; height: 64px; margin-bottom: 0.4rem; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fim__sinal circle { stroke: #CFCFCA; stroke-width: 1.5; }
.fim__sinal path { stroke: var(--cor-tinta); stroke-width: 2.5; opacity: 0; }
.etapa--fim .etapa__titulo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); max-width: 22ch; }
.etapa--fim p { max-width: 34rem; color: var(--cor-apoio); }
/* Os três estados ficam empilhados na mesma célula; só o atual aparece.
   Assim o espaço já está reservado e a resposta do envio não empurra nada. */
.fim__titulo, .fim__texto, .fim__acoes { display: grid; justify-items: center; }
.fim__titulo > *, .fim__texto > *, .fim__acoes > * { grid-area: 1 / 1; }
.etapa--fim .fim__enviando, .etapa--fim .fim__recebido, .etapa--fim .fim__falhou { visibility: hidden; }
.etapa--fim.enviando .fim__enviando, .etapa--fim.chegou .fim__recebido, .etapa--fim.falhou .fim__falhou { visibility: visible; }
.etapa--fim.enviando .fim__sinal circle { stroke: var(--cor-tinta); stroke-dasharray: 0.22 0.78; transform-box: fill-box; transform-origin: center; }
.etapa--fim.chegou .fim__visto, .etapa--fim.falhou .fim__alerta { opacity: 1; }
.etapa--fim.falhou .fim__sinal circle { stroke: var(--cor-erro); }
.etapa--fim.falhou .fim__alerta { stroke: var(--cor-erro); }
.fim__acoes { margin-top: 0.75rem; }
.fim__acoes > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; }
.fim__link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--tam-pequeno); font-weight: 600; color: var(--cor-tinta); }

/* Rodapé do cartão: voltar, aviso e os botões de seguir ou enviar. */
.montagem__rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  padding: 1.25rem var(--respiro); border-top: 1px solid var(--cor-linha);
}
.montagem__aviso { flex: 1 1 14rem; max-width: 40rem; margin-right: auto; padding-inline: 0.25rem; font-size: var(--tam-pequeno); color: var(--cor-apoio); }
.montagem__aviso.ok { color: var(--cor-tinta); }
.montagem__aviso.erro { color: var(--cor-erro); }

/* ---------- Perguntas ---------- */
.perguntas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem clamp(2.5rem, 2rem + 5vw, 7rem); align-items: start; }
.perguntas__lista { border-top: 1px solid var(--cor-linha); }
.perguntas details { border-bottom: 1px solid var(--cor-linha); }
.perguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  min-height: 64px; padding-block: 1.1rem; font-weight: 550; letter-spacing: -0.01em;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background: linear-gradient(var(--cor-tinta), var(--cor-tinta)) center / 12px 1.5px no-repeat,
              linear-gradient(var(--cor-tinta), var(--cor-tinta)) center / 1.5px 12px no-repeat;
  transition: transform 0.2s ease;
}
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { padding-bottom: 1.5rem; max-width: 38rem; color: var(--cor-apoio); }

/* ---------- Contato ---------- */
.contato { padding-block: var(--secao); border-top: 1px solid var(--cor-linha); }
.contato__dentro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem 4rem; }
.contato h2 { margin-bottom: 1rem; }
.contato__dentro > div:first-child p { color: var(--cor-apoio); max-width: 30rem; }
.contato__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.contato__nota { flex-basis: 100%; font-size: 0.8125rem; color: var(--cor-apoio); }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--cor-linha); padding-block: 2.5rem; font-size: 0.875rem; color: var(--cor-apoio); }
.rodape__dentro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem; }
.rodape .marca { color: var(--cor-tinta); margin-right: 0; }
.rodape p:last-child { margin-left: auto; }

/* ==========================================================
   Movimento
   Poucos efeitos, grandes e precisos, sempre a serviço do que
   está sendo mostrado. Só se anima posição, tamanho,
   transparência e desfoque: o celular faz isso sem esforço e
   nada empurra o resto da página. Nenhuma animação depende da
   rolagem pelo CSS (no celular, isso travou o exemplo Clássico).
   Com "reduzir movimento" ligado no aparelho, tudo desliga.
   ========================================================== */
:root {
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);          /* sai rápido e pousa devagar */
  --curva-mola: cubic-bezier(0.34, 1.56, 0.64, 1);  /* passa um pouco e volta: um pequeno salto */
}

/* Títulos palavra por palavra. O da abertura já vem separado no HTML;
   os das seções são separados pelo app.js. */
.palavra { display: inline-block; position: relative; }

/* Vitrine viva: a página do exemplo rola sozinha por cima da imagem parada. */
.vitrine__tela .vitrine__rolo,
.vitrine__celular .vitrine__rolo {
  position: absolute; inset: 0; aspect-ratio: auto; background: none;
  overflow: hidden; opacity: 0; transition: opacity 0.8s ease; pointer-events: none;
}
.vitrine__celular .vitrine__rolo { border-radius: 22px; }
.vitrine__tela .vitrine__rolo img,
.vitrine__celular .vitrine__rolo img { height: auto; object-fit: fill; }
/* Só rola a abertura escolhida (e a que está saindo, enquanto esmaece). Ao trocar, a nova começa do topo. */
.vitrine.viva .vitrine__versao:is(.ativa, .saindo) .vitrine__rolo.pronto { opacity: 1; }
.vitrine.viva .vitrine__tela .vitrine__versao:is(.ativa, .saindo) .vitrine__rolo.pronto img { animation: rolo-tela 28s ease-in-out 0.8s infinite; }
.vitrine.viva .vitrine__celular .vitrine__versao:is(.ativa, .saindo) .vitrine__rolo.pronto img { animation: rolo-celular 28s ease-in-out 0.8s infinite; }
.vitrine.parada .vitrine__rolo img { animation-play-state: paused; }
/* Quanto o rolo sobe: a parte da imagem que fica de fora da tela.
   Computador: tela 900 px de uma imagem de 4096 px. Celular: 1298 de 4095. */
@keyframes rolo-tela {
  0%, 7% { transform: translateY(0); }
  38%, 46% { transform: translateY(-35%); }
  80%, 88% { transform: translateY(-78.03%); }
  100% { transform: translateY(0); }
}
@keyframes rolo-celular {
  0%, 7% { transform: translateY(0); }
  38%, 46% { transform: translateY(-30%); }
  80%, 88% { transform: translateY(-68.3%); }
  100% { transform: translateY(0); }
}

/* Reflexo de luz que atravessa o vidro do celular. */
.vitrine__celular::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 22px; pointer-events: none;
  background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.26) 46%, rgba(255, 255, 255, 0.06) 54%, transparent 64%);
  transform: translateX(-140%);
}

/* Como funciona: uma linha fina liga os passos 1, 2 e 3. */
.passos li { position: relative; }
.passos li::before, .passos li::after { content: ""; position: absolute; top: var(--passo-linha, -1.75rem); left: 0; }
.passos li::before { width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: #B5B6B0; }
.passos li::after { left: 16px; height: 1px; width: calc(100% - 16px); background: #D3D3CE; transform-origin: left; }
.passos li:not(:last-child)::after { width: calc(100% + 2.5rem - 25px); }

/* Cartão de estilo: brilho que segue o mouse (a inclinação vem do app.js). */
.estilo { transition: transform 0.6s var(--curva); }
.estilo label { position: relative; }
.estilo label::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.5), transparent 42%);
  opacity: 0; transition: opacity 0.4s ease;
}
.estilo.inclinado label::before { opacity: 1; }
/* Nos cartões de paleta, menores, o brilho é mais fraco: ele não pode esconder as cores. */
.estilo--paleta label::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.28), transparent 45%); }
.estilo__miniatura img { transition: transform 1.2s var(--curva); }
.estilo input:checked + label .estilo__miniatura img { transform: scale(1.04); }

/* Botões: resposta ao toque mais macia, com um pequeno retorno. */
.botao { position: relative; overflow: hidden; transition: background-color 0.18s ease, opacity 0.18s ease, transform 0.5s var(--curva-mola); }
.botao:active { transform: scale(0.97); transition-duration: 0.1s; }
.botao::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
}
.botao--contorno::after { display: none; }

/* Perguntas: o sinal vira "x" assim que a resposta começa a abrir ou fechar (app.js). */
.perguntas details.fechando summary::after { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Abertura: tudo entra sozinho ao abrir, sem esperar o script. */
  .abertura .sobre, .abertura__apoio, .abertura__acoes { animation: sobe-suave 1s var(--curva) both; }
  .abertura .sobre { animation-delay: 0.05s; }
  /* Palavra que sai do desfocado para o nítido. Animar o desfoque em si pesa no celular,
     então cada palavra tem duas cópias desenhadas uma vez só: uma desfocada, que acende e apaga,
     e uma nítida, que acende por cima. O navegador só troca a transparência delas. */
  .palavra { color: transparent; }
  .palavra::before, .palavra::after { content: attr(data-p); position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; }
  .palavra::before { color: var(--cor-tinta); }
  .palavra::after { text-shadow: 0 0 0.22em var(--cor-tinta), 0 0 0.08em var(--cor-tinta); }
  .abertura h1 .palavra { --atraso-palavra: calc(0.12s + var(--i) * 55ms); animation: palavra-sobe 1.2s var(--curva) var(--atraso-palavra) both; }
  .abertura h1 .palavra::before { animation: palavra-nitida 1.1s ease-out var(--atraso-palavra) both; }
  .abertura h1 .palavra::after { animation: palavra-desfocada 1.1s ease-out var(--atraso-palavra) both; }
  .abertura__apoio { animation-delay: 0.62s; }
  .abertura__acoes { animation-delay: 0.76s; }
  .vitrine { animation: vitrine-chega 1.6s var(--curva) 0.35s both; }
  .vitrine__celular::after { animation: reflexo 1.8s var(--curva) 1.5s both; }
  .vitrine__tela, .vitrine__celular { will-change: transform; }
  /* Troca de abertura: a Manchete esmaece por cima da Fachada; a chave desliza com um pequeno balanço. */
  .vitrine__versao[data-versao="manchete"] { transition: opacity 0.5s var(--curva), visibility 0s linear 0.5s; }
  .vitrine--manchete .vitrine__versao[data-versao="manchete"] { transition: opacity 0.5s var(--curva), visibility 0s; }
  .vitrine__opcoes::before { transition: transform 0.45s var(--curva-mola); }

  @keyframes sobe-suave { from { opacity: 0; transform: translateY(16px); } }
  @keyframes palavra-sobe { from { transform: translateY(0.34em); } }
  @keyframes palavra-nitida { 0%, 22% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes palavra-desfocada { 0% { opacity: 0; } 25% { opacity: 0.85; } 100% { opacity: 0; } }
  @keyframes vitrine-chega { from { translate: 0 110px; } }
  @keyframes reflexo { to { transform: translateX(140%); } }

  /* Títulos das seções: o mesmo efeito da abertura, mais curto. Antes de aparecerem na tela, ficam escondidos. */
  .palavras-revela .palavra { --atraso-palavra: calc(var(--atraso, 0ms) + var(--i) * 45ms); }
  .palavras-revela.visivel .palavra { animation: palavra-sobe 1.1s var(--curva) var(--atraso-palavra) both; }
  .palavras-revela.visivel .palavra::before { animation: palavra-nitida 1s ease-out var(--atraso-palavra) both; }
  .palavras-revela.visivel .palavra::after { animation: palavra-desfocada 1s ease-out var(--atraso-palavra) both; }

  /* Blocos que sobem ao aparecer na tela (classes postas pelo app.js).
     As transições ficam só no estado "visível": assim, esconder os blocos ao abrir
     a página é instantâneo e não gasta nada; só a chegada é animada. */
  .revela { opacity: 0; transform: translateY(28px); }
  .montagem.revela { transform: translateY(48px) scale(0.985); }
  .revela.visivel {
    opacity: 1; transform: none;
    transition: opacity 0.9s var(--curva), transform 1.1s var(--curva);
    transition-delay: var(--atraso, 0ms);
  }

  /* Ícones que se desenham traço a traço. */
  .beneficios li.revela svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .beneficios li.revela.visivel svg * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--curva) calc(var(--atraso, 0ms) + 0.25s); }

  /* Como funciona: o ponto acende, a linha corre até o próximo passo e o número sobe no lugar. */
  .passos li.revela-passo::before { transform: scale(0); }
  .passos li.revela-passo::after { transform: scaleX(0); }
  .passos li.revela-passo .passos__numero { opacity: 0; transform: translateY(0.45em); }
  .passos li.revela-passo h3, .passos li.revela-passo p { opacity: 0; transform: translateY(12px); }
  .passos li.revela-passo.visivel::before { transform: none; transition: transform 0.6s var(--curva-mola) var(--passo, 0ms); }
  .passos li.revela-passo.visivel::after { transform: none; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--passo, 0ms) + 0.15s); }
  .passos li.revela-passo.visivel .passos__numero { opacity: 1; transform: none; transition: opacity 0.9s var(--curva), transform 1.1s var(--curva); transition-delay: calc(var(--passo, 0ms) + 0.1s); }
  .passos li.revela-passo.visivel h3, .passos li.revela-passo.visivel p { opacity: 1; transform: none; transition: opacity 0.8s var(--curva), transform 0.9s var(--curva); transition-delay: calc(var(--passo, 0ms) + 0.25s); }

  /* Selo de estilo escolhido: aparece com um pequeno salto. */
  .estilo input:checked + label .estilo__miniatura::after { animation: selo-salta 0.55s var(--curva-mola) both; }
  @keyframes selo-salta { from { opacity: 0; transform: scale(0.3); } }

  /* Formulário: o visto de cada área e serviço chega com um pequeno salto. */
  .area-opcao input:checked + span::before, .servico input:checked ~ .servico__caixa { animation: marca-chega 0.45s var(--curva-mola) both; }
  /* Completo: os quatro vistos chegam em sequência, de cima para baixo. */
  .servicos.cascata .servico:nth-child(3) input:checked ~ .servico__caixa { animation-delay: 0.06s; }
  .servicos.cascata .servico:nth-child(4) input:checked ~ .servico__caixa { animation-delay: 0.12s; }
  .servicos.cascata .servico:nth-child(5) input:checked ~ .servico__caixa { animation-delay: 0.18s; }
  .servicos.cascata .servico:nth-child(6) input:checked ~ .servico__caixa { animation-delay: 0.24s; }
  @keyframes marca-chega { from { transform: scale(0.4) rotate(-30deg); } }

  /* Aviso de erro: um balanço curto, como a senha errada no celular. */
  .montagem__aviso.treme { animation: aviso-treme 0.42s ease-out both; }
  @keyframes aviso-treme { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

  /* Demonstração de cada nível de movimento: três blocos que chegam em sequência, sem parar.
     Sutil só esmaece; Fluido desliza; Marcante vem de mais longe, com um pequeno salto. */
  .movimento__demo i { animation: 3.4s var(--curva) var(--atraso-demo, 0s) infinite both; }
  .movimento__demo i:nth-child(2) { --atraso-demo: calc(var(--passo-demo) * 1); }
  .movimento__demo i:nth-child(3) { --atraso-demo: calc(var(--passo-demo) * 2); }
  .movimento--sutil .movimento__demo { --passo-demo: 0.08s; }
  .movimento--fluido .movimento__demo { --passo-demo: 0.14s; }
  .movimento--marcante .movimento__demo { --passo-demo: 0.2s; }
  .movimento--sutil .movimento__demo i { animation-name: demo-sutil; }
  .movimento--fluido .movimento__demo i { animation-name: demo-fluido; }
  .movimento--marcante .movimento__demo i { animation-name: demo-marcante; animation-timing-function: var(--curva-mola); }
  @keyframes demo-sutil { 0% { opacity: 0; transform: translateY(3px); } 14%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
  @keyframes demo-fluido { 0% { opacity: 0; transform: translateY(14px); } 24%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
  @keyframes demo-marcante { 0% { opacity: 0; transform: translateY(26px) scale(0.86); } 26%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }

  /* Confirmação: o círculo e o visto se desenham traço a traço. */
  .etapa--fim.chegou .fim__sinal circle { stroke-dasharray: 1; animation: traco 0.9s var(--curva) 0.1s both; }
  .etapa--fim.chegou .fim__visto { stroke-dasharray: 1; animation: traco 0.55s var(--curva) 0.6s both; }
  @keyframes traco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .etapa--fim.enviando .fim__sinal circle { animation: gira 0.9s linear infinite; }
  @keyframes gira { to { transform: rotate(1turn); } }
  .etapa--fim.chegou .fim__recebido, .etapa--fim.falhou .fim__falhou { animation: sobe-suave 0.7s var(--curva) both; }
  .etapa--fim.chegou .fim__texto > *, .etapa--fim.falhou .fim__texto > * { animation-delay: 0.08s; }
  .etapa--fim.chegou .fim__acoes > *, .etapa--fim.falhou .fim__acoes > * { animation-delay: 0.16s; }
  .etapa--fim.falhou .fim__alerta { animation: sobe-suave 0.5s var(--curva-mola) both; }

  /* Brilho que atravessa o botão escuro ao passar o mouse. */
  @media (hover: hover) {
    .botao:hover::after { animation: brilho-botao 0.9s var(--curva); }
    @keyframes brilho-botao { to { transform: translateX(120%); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estilos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .estilos--tres .estilo:first-of-type { grid-column: 1 / -1; }
  .estilos--tres .estilo:first-of-type label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.25rem; align-content: start; }
  .estilos--tres .estilo:first-of-type .estilo__miniatura { grid-row: span 4; margin-bottom: 0; }
  .estilos--tres .estilo:first-of-type .estilo__nome { padding-top: 0.5rem; }
  /* Na última etapa há três botões: o aviso sobe para a linha de cima. */
  .montagem__rodape--envio .montagem__aviso { order: -1; flex-basis: 100%; }
  .montagem__rodape--envio .montagem__voltar { margin-right: auto; }
}

/* ---------- Celular ---------- */
@media (max-width: 699px) {
  .menu { display: none; }
  .abertura__acoes { width: 100%; }
  .abertura__acoes .botao { flex: 1 1 100%; }
  .abertura__acoes .link-seta { margin-inline: auto; }
  .vitrine__link { padding-bottom: 0; }
  .vitrine__tela { display: none; }
  .vitrine__celular { position: relative; width: min(72%, 260px); margin-inline: auto; }
  .vitrine { grid-template-columns: minmax(0, 1fr); }
  .vitrine__chave { grid-row: 2; grid-column: 1; justify-self: center; margin-top: 1.75rem; }
  .vitrine figcaption { grid-row: 3; text-align: center; }
  .beneficios, .passos { grid-template-columns: 1fr; gap: 2.25rem; }
  .passos__numero { margin-bottom: 0.25rem; }
  .passos li { --passo-linha: -1.15rem; }
  .passos li:not(:last-child)::after { width: calc(100% - 16px); }
  .estilos { grid-template-columns: 1fr; }
  .estilos--tres .estilo:first-of-type label { display: flex; }
  .estilos--tres .estilo:first-of-type .estilo__miniatura { margin-bottom: 0.75rem; }
  .estilo--breve .estilo__miniatura { aspect-ratio: 16 / 5; }
  /* Paletas lado a lado, duas por linha: comparar cores pede vê-las juntas. */
  .estilos--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .estilos--quatro .estilo label { gap: 0.3rem; padding: 0.5rem 0.5rem 3.1rem; }
  .estilos--quatro .estilo__miniatura { margin-bottom: 0.4rem; border-radius: 6px; }
  .estilos--quatro .estilo input:checked + label .estilo__miniatura::after { top: 6px; right: 6px; width: 24px; height: 24px; background-size: 14px; }
  .estilos--quatro .estilo__nome { font-size: 1rem; padding-inline: 0.25rem; }
  .estilos--quatro .amostras { gap: 4px; padding-inline: 0.25rem; }
  .estilos--quatro .amostras i { width: 15px; height: 15px; }
  .estilos--quatro .estilo__desc { font-size: 0.8125rem; line-height: 1.45; padding-inline: 0.25rem; }
  .estilos--quatro .estilo__exemplo { left: 0.75rem; bottom: 0.25rem; font-size: 0.875rem; }
  .movimentos__lista { grid-template-columns: 1fr; gap: 0.6rem; }
  .movimento label { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-content: center; column-gap: 0.9rem; row-gap: 0.15rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; }
  .movimento__demo { grid-row: span 2; height: 72px; margin: 0; padding-inline: 14%; gap: 6px; }
  .movimento__nome { align-self: end; padding-inline: 0; }
  .movimento__desc { align-self: start; padding-inline: 0; }
  .servicos, .contato-campos { grid-template-columns: 1fr; }
  .resumo__lista > div { grid-template-columns: minmax(0, 1fr) auto; padding-block: 0.5rem; }
  .resumo__lista dt, .resumo__lista dd { grid-column: 1; }
  .resumo__alterar { grid-column: 2; grid-row: 1 / span 2; }
  /* Rodapé do cartão: o aviso em cima; embaixo, voltar e seguir lado a lado. */
  .montagem__aviso { order: -1; flex-basis: 100%; }
  .montagem__voltar { flex: 0 0 auto; }
  .montagem__continuar { flex: 1 1 auto; }
  .montagem__whatsapp { order: 3; flex: 1 1 100%; }
  .fim__acoes { width: 100%; justify-items: stretch; }
  .fim__acoes .botao { flex: 1 1 100%; }
  .perguntas { grid-template-columns: 1fr; }
  .contato__acoes .botao { flex: 1 1 100%; }
  .rodape p:last-child { margin-left: 0; }
}