/* Resina Sem Erro · identidade própria (DESIGN DNA v1, caminho A "Isolamento", DECISÃO 134)
   Lençol verde do isolamento + o teste da linha preta. Paleta, tipos, gestos e motion do DNA. */

:root {
  /* Resina Sem Erro · caminho A "Isolamento" · DESIGN DNA v1 */
  --rse-verde: #1E5A40;          /* lençol de borracha · fundo, 60-75% da tela */
  --rse-verde-sombra: #174832;   /* lençol na sombra · topo, rodapé, campos, trilho das abas */
  --rse-superficie: #24634A;     /* lençol sob o refletor · opção, chip, dente não marcado */
  --rse-anel: #286C4E;           /* borda esticada do furo · só desenho, nunca fundo de texto */
  --rse-branco: #F2F5F3;         /* resina sob o refletor · título, texto, botão primário, furo */
  --rse-apoio: #C9D6CE;          /* texto secundário sobre verde, sombra e superfície */
  --rse-preto: #121614;          /* a linha do teste · acento < 10%, nunca texto sobre verde */
  --rse-tinta-2: #4E5F56;        /* texto secundário sobre branco */
  --rse-fio: rgb(242 245 243 / .16);
  --rse-sombra: rgb(4 26 16 / .85);   /* sombra sempre verde-escura, nunca preta */
  /* os 9 grupos: branco resina sobre o verde, do translúcido (1) ao opaco (9) */
  --e1: color-mix(in srgb, #F2F5F3 8%, #1E5A40);
  --e2: color-mix(in srgb, #F2F5F3 14%, #1E5A40);
  --e3: color-mix(in srgb, #F2F5F3 20%, #1E5A40);
  --e4: color-mix(in srgb, #F2F5F3 32%, #1E5A40);
  --e5: color-mix(in srgb, #F2F5F3 46%, #1E5A40);
  --e6: color-mix(in srgb, #F2F5F3 60%, #1E5A40);
  --e7: color-mix(in srgb, #F2F5F3 74%, #1E5A40);
  --e8: color-mix(in srgb, #F2F5F3 87%, #1E5A40);
  --e9: var(--rse-branco);
  --e1-txt: #F2F5F3; --e2-txt: #F2F5F3; --e3-txt: #F2F5F3; --e4-txt: #121614; --e5-txt: #121614;
  --e6-txt: #121614; --e7-txt: #121614; --e8-txt: #121614; --e9-txt: #121614;
  --e1-a: .08; --e2-a: .14; --e3-a: .20; --e4-a: .32; --e5-a: .46; --e6-a: .60; --e7-a: .74; --e8-a: .87; --e9-a: 1;
  --rse-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --rse-texto: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rse-r-sup: 10px;   /* superfícies: opção, aviso, abas */
  --rse-r-ctl: 4px;    /* controles: botão, chip, campo, migalha */
  --rse-ease: cubic-bezier(.22, .61, .36, 1);
  --rse-micro: 180ms; --rse-reveal: 450ms; --rse-traco: 1100ms;
}
:root {
  /* aliases para o CSS do site: os nomes ficam, os valores são do DNA */
  --bg: var(--rse-verde);
  --faixa: var(--rse-verde-sombra);
  --branco: var(--rse-branco);
  --claro: var(--rse-branco);
  --t2: var(--rse-apoio);
  --t3: var(--rse-apoio);
  --fio: var(--rse-fio);
  --sup: var(--rse-superficie);
  --anel: var(--rse-anel);
  --preto: var(--rse-preto);
  --r1: var(--rse-r-sup);
  --r2: var(--rse-r-ctl);
  --ease: var(--rse-ease);
  --pad: clamp(20px, 5vw, 56px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--branco);
  font-family: var(--rse-texto);
  font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2 { text-wrap: balance; font-family: var(--rse-display); font-weight: 700; font-stretch: 88%; letter-spacing: -.03em; }
p, li { text-wrap: pretty; }
h1:focus, h2:focus, main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--rse-branco); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--pad), 1120px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular {
  position: absolute; left: 12px; top: 8px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r2);
  background: var(--branco); color: var(--rse-preto); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.pular:focus { transform: none; }
/* Conteúdo num contexto de empilhamento próprio, sempre abaixo do cabeçalho fixo. */
main { flex: 1; position: relative; z-index: 0; isolation: isolate; }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 100; background: var(--faixa); border-bottom: 1px solid var(--fio); }
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.topo__kit {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-size: .8rem; font-weight: 500; color: var(--t2); white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgb(242 245 243 / .3); text-underline-offset: 4px;
}
@media (hover: hover) { .topo__kit:hover { color: var(--branco); } }
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; min-width: 0; }
.marca img { height: 17px; width: auto; flex: none; }
.marca__sep { width: 1px; height: 26px; background: rgb(242 245 243 / .25); }
.marca__nome { font-size: .86rem; font-weight: 600; white-space: nowrap; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px; border-radius: var(--r2);
  border: 1px solid transparent; font-weight: 600; font-size: 1.02rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.botao .seta { width: 20px; height: 20px; transition: transform .18s var(--ease); }
.botao--forte { background: var(--rse-branco); color: var(--rse-preto); box-shadow: 0 14px 28px -16px var(--rse-sombra); }
.botao--leve { background: transparent; color: var(--branco); border-color: rgb(242 245 243 / .3); }
.botao--largo { width: 100%; justify-content: space-between; }
@media (hover: hover) {
  .botao--forte:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -16px rgb(4 26 16 / .95), 0 0 0 4px rgb(242 245 243 / .12); }
  .botao--forte:hover .seta { transform: translateX(3px); }
  .botao--leve:hover { background: rgb(242 245 243 / .07); border-color: rgb(242 245 243 / .55); }
}
.botao:active { transform: scale(.985); }

/* ---------- Início ---------- */
.inicio { display: flex; flex-direction: column; min-height: calc(100svh - 61px - 120px); }
.inicio__texto { padding-top: clamp(48px, 12vh, 140px); }
.inicio__titulo {
  max-width: 20ch;
  font-size: clamp(2.3rem, 1.3rem + 3.8vw, 5rem); line-height: 1.02; letter-spacing: -.035em;
  animation: subir .8s var(--ease) both;
}
.inicio__sub { margin-top: 16px; max-width: 34ch; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); color: var(--t2); animation: subir .8s var(--ease) .1s both; }
.inicio__cta { margin-top: 32px; animation: subir .8s var(--ease) .2s both; }

/* ---------- Fluxo ---------- */
.tela { padding-bottom: 64px; }
.tela.entra > * { animation: subir .45s var(--ease) both; }
.fluxo { max-width: 720px; padding-top: 18px; }
.fluxo__topo { display: flex; align-items: center; gap: 16px; }
.voltar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-right: 8px;
  color: var(--t2); font-weight: 500; font-size: .95rem; text-decoration: none; flex: none;
}
.voltar .seta { width: 18px; height: 18px; }
@media (hover: hover) { .voltar:hover { color: var(--branco); } }
.progresso { flex: 1; display: flex; gap: 4px; }
.progresso i { flex: 1; height: 4px; border-radius: 2px; background: rgb(242 245 243 / .14); }
.progresso i.feito { background: rgb(242 245 243 / .6); }
.progresso i.agora { background: var(--branco); }
.migalhas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.migalhas a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px;
  border-radius: 8px; background: rgb(242 245 243 / .07); color: var(--t2);
  font-size: .82rem; font-weight: 500; text-decoration: none;
}
@media (hover: hover) { .migalhas a:hover { background: rgb(242 245 243 / .14); color: var(--branco); } }
/* área de toque das migalhas: 32px visíveis + respiro vertical */
.migalhas a { position: relative; }
.migalhas a::after { content: ""; position: absolute; inset: -6px 0; }

.fluxo h1 {
  margin-top: clamp(24px, 4vw, 40px);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); line-height: 1.04; letter-spacing: -.03em;
}
.fluxo .sub { margin-top: 10px; font-size: 1.1rem; color: var(--t2); }

.opcoes { list-style: none; padding: 0; margin-top: 24px; display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 10px; }
.opcoes + .opcoes { margin-top: 10px; }
.entra .opcoes li { animation: subir .45s var(--ease) both; animation-delay: calc(.08s + var(--i) * 50ms); }
.opcao {
  display: flex; align-items: center; gap: 14px; height: 100%;
  min-height: 64px; padding: 14px 18px; border-radius: var(--r1);
  background: var(--rse-superficie); border: 1.5px solid var(--rse-fio);
  text-decoration: none;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.opcao__txt { display: grid; gap: 2px; min-width: 0; }
.opcao__txt strong { font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
.opcao__txt span { color: var(--t2); font-size: .92rem; line-height: 1.35; }
.dica { font-style: normal; font-size: .86rem; color: var(--t2); margin-top: 4px; padding-left: 10px; border-left: 2px solid rgb(242 245 243 / .35); }
.opcao[aria-current="true"] { border-color: var(--branco); box-shadow: inset 0 0 0 1px var(--branco); }
@media (hover: hover) { a.opcao:hover { border-color: var(--rse-apoio); } }
a.opcao:active { transform: scale(.985); }
.opcoes--grande .opcao { min-height: 88px; justify-content: center; text-align: center; flex-direction: column; gap: 8px; }
.opcoes--grande .opcao:has(.amostra-bl) { justify-content: flex-start; padding-top: 18px; }
.opcoes--grande .opcao__txt strong { font-size: 1.4rem; }
.opcao--off { background: transparent; border-style: dashed; color: var(--t3); }
.opcao--off .opcao__txt strong { color: var(--t3); }
.opcao__off { font-size: .78rem; color: var(--t3); }

.amostra-bl { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(242 245 243 / .3); background: rgb(242 245 243 / var(--a)); }
.amostra-bl[data-bl="BL4"] { --a: .45; }
.amostra-bl[data-bl="BL3"] { --a: .62; }
.amostra-bl[data-bl="BL2"] { --a: .8; }
.amostra-bl[data-bl="BL1"] { --a: 1; box-shadow: 0 0 18px rgb(242 245 243 / .35); }
.opcao--off .amostra-bl { opacity: .35; }

/* Arcada: superiores curvam para baixo nas laterais, inferiores para cima */

.dentes__seguir { margin-top: 32px; }
.botao:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.desgaste { margin-top: 20px; display: grid; gap: 18px; }
.milimetro { font-size: clamp(5rem, 3.6rem + 7vw, 8rem); font-weight: 600; line-height: .85; letter-spacing: -.05em; }
.milimetro small { font-size: .3em; margin-left: .1em; letter-spacing: 0; color: var(--t2); }
.preparo { border-block: 1px solid var(--fio); }
.preparo summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; cursor: pointer; list-style: none; font-weight: 600; color: var(--t2);
}
.preparo summary::-webkit-details-marker { display: none; }
.preparo summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .25s var(--ease);
}
.preparo[open] summary::after { transform: rotate(45deg); }
.preparo ol { padding: 0 0 16px 1.3em; display: grid; gap: 10px; font-size: .97rem; color: var(--t2); }

/* ---------- Resultado ---------- */
.abas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px;
  margin-top: 24px; padding: 4px; border-radius: 12px; background: var(--faixa);
}
.abas button {
  display: grid; justify-items: center; gap: 0; min-height: 52px; padding: 6px 10px;
  border: 0; border-radius: 9px; background: transparent; color: var(--t2);
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.abas button span { font-size: .78rem; font-weight: 500; color: var(--t3); }
.abas button[aria-selected="true"] { background: var(--rse-superficie); color: var(--branco); box-shadow: inset 0 0 0 1.5px var(--rse-branco); }
.abas button[aria-selected="true"] span { color: var(--t2); }
@media (hover: hover) { .abas button:hover { color: var(--branco); } }

.painel { margin-top: 20px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- Os 9 grupos ---------- */
.grupos { max-width: 860px; padding-top: 28px; }
.grupos h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); letter-spacing: -.03em; line-height: 1.05; }
.escala { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 22px; border-radius: var(--r2); overflow: hidden; box-shadow: 0 0 0 2px var(--claro); }
.escala i {
  display: grid; place-items: center; height: 48px; font-style: normal; font-weight: 700; font-size: 1.2rem;
  background: var(--tom);
}
.escala__pontas { display: flex; justify-content: space-between; margin-top: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t2); }
.grupos__lista { list-style: none; padding: 0; margin-top: 18px; }
.grupo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid var(--fio); }
.grupo__n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--tom); font-weight: 700; font-size: 1.2rem; box-shadow: 0 0 0 2px var(--claro);
}
.grupo h2 { font-size: 1.15rem; line-height: 1.3; }
.grupo__uso { color: var(--t2); font-size: .97rem; }
.grupo__uso span { color: var(--branco); font-weight: 600; }
.grupo__marcas { margin-top: 4px; font-size: .95rem; }
.grupo__marcas span { color: var(--t3); }

/* ---------- Rodapé ---------- */
.rodape { background: var(--faixa); border-top: 1px solid var(--fio); }
.rodape__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 24px calc(24px + env(safe-area-inset-bottom)); }
.rodape img { height: 22px; width: auto; }
.rodape p { flex: 1 1 280px; font-size: .88rem; color: var(--t2); }
.rodape__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r2);
  border: 1px solid rgb(242 245 243 / .25); font-size: .92rem; font-weight: 600; text-decoration: none;
}
.rodape__link[aria-current="page"] { background: rgb(242 245 243 / .1); }
@media (hover: hover) { .rodape__link:hover { background: rgb(242 245 243 / .08); } }
.aviso-js { padding-block: 40px; color: var(--t2); }

/* ---------- Movimento ---------- */
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
@keyframes tracar { from { transform: scaleX(0); } }
@keyframes depositar { from { opacity: 0; transform: translateY(-14px); } }

@media (min-width: 720px) {
  .marca { gap: 12px; }
  .marca img { height: 26px; }
  .marca__nome { font-size: .95rem; }
  .topo__kit { font-size: .86rem; }
  .fluxo { padding-top: 32px; }
}
@media (min-width: 1000px) {
  .fluxo, .grupos { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
.abas__tudo { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .74rem; font-weight: 600; color: var(--branco); }
.abas__tudo svg { width: 13px; height: 13px; }
.outra__lista button {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--t2); font-size: .92rem;
  text-decoration: underline; text-decoration-color: rgb(242 245 243 / .3); text-underline-offset: 4px;
}
@media (hover: hover) { .outra__lista button:hover { color: var(--branco); } }

.kit { padding-bottom: 96px; }
.busca input, .outra__campos input, .outra__campos select {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--r2);
  background: var(--faixa); color: var(--branco); border: 1px solid rgb(242 245 243 / .2);
  font: inherit; font-size: 1rem;
}
.busca input::placeholder, .outra__campos input::placeholder { color: var(--t3); }
.busca { display: block; margin-top: 20px; }
.kit__form { display: grid; gap: 4px; margin-top: 12px; }
.linha { border: 0; padding: 14px 0; border-top: 1px solid var(--fio); min-width: 0; }
.linha legend { float: left; width: 100%; padding: 0 0 8px; font-weight: 700; font-size: 1.02rem; }
.linha legend span { font-weight: 400; color: var(--t3); font-size: .9rem; }
.linha__itens { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 12px; border-radius: var(--r2); background: var(--e5); border: 1px solid rgb(242 245 243 / .12); cursor: pointer; }
.chip input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 6px; border: 2px solid rgb(242 245 243 / .55); background: transparent; cursor: pointer; display: grid; place-items: center; }
.chip input:checked { background: var(--branco); border-color: var(--branco); }
.chip input:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--rse-preto); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.chip:has(input:checked) { border-color: var(--rse-branco); }
.chip:has(input:focus-visible) { outline: 2px solid var(--branco); outline-offset: 2px; }
.chip input:focus-visible { outline: none; }
@media (hover: hover) { .chip:hover { border-color: rgb(242 245 243 / .4); } }
.kit__vazio { padding: 16px 0; color: var(--t2); }
.outra__campos { clear: both; display: grid; grid-template-columns: 1fr; gap: 8px; }
.outra__erro { margin-top: 8px; font-weight: 600; }
.outra__lista { list-style: none; padding: 0; margin-top: 8px; }
.outra__lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--fio); }
.outra__lista em { font-style: normal; color: var(--t3); font-size: .9rem; }
.kit__barra {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--fio);
}
.kit__barra .botao { flex: 1 1 auto; min-height: 50px; padding: 0 16px; }
@media (min-width: 640px) {
  .outra__campos { grid-template-columns: minmax(0, 1fr) 200px auto; }
}

/* ---------- V4: situações por dente e resultado agrupado ---------- */
.igual-anterior { margin-top: 22px; justify-content: space-between; gap: 12px; min-height: 60px; }
.igual-anterior span { font-weight: 500; font-size: .9rem; color: var(--t2); }

/* DECISÃO 132: opções de rádio (objetivo dos favoráveis no caso misto) */
.radios { border: 0; padding: 0; margin: 0; min-width: 0; }
.opcao--radio { cursor: pointer; }
.opcao--radio input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 50%; border: 2px solid rgb(242 245 243 / .55); display: grid; place-items: center; cursor: pointer; }
.opcao--radio input:checked { border-color: var(--branco); }
.opcao--radio input:checked::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--branco); }
.opcao--radio:has(input:checked) { border-color: var(--branco); box-shadow: inset 0 0 0 1.5px var(--branco); background: var(--rse-superficie); }
.opcao--radio:has(input:focus-visible) { outline: 2px solid var(--branco); outline-offset: 3px; }
.opcao--radio input:focus-visible { outline: none; }
@media (hover: hover) { .opcao--radio:hover { border-color: rgb(242 245 243 / .45); } }

/* ======================================================================
   Identidade Resina Sem Erro · DESIGN DNA v1, seção "Para a engenharia"
   ====================================================================== */

/* Matéria: refletor de cima à esquerda, sombra do lençol embaixo à direita, grão de 5% */
body {
  background:
    radial-gradient(110% 70% at 12% 0%, rgb(242 245 243 / .08), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgb(4 26 16 / .32), transparent 65%),
    var(--rse-verde);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 720px) { body { font-size: 18px; } }

/* Gestos (CSS do DNA, item 3) */
.rse-linha {
  position: absolute; left: 0; top: calc(var(--y) - var(--esp, 6px) / 2);
  width: var(--fim); height: var(--esp, 6px); z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--rse-preto) calc(100% - var(--funde)), rgb(18 22 20 / 0) 100%);
  transform-origin: left center; animation: rse-tracar var(--rse-traco) var(--rse-ease) both;
}
.rse-furo {
  position: absolute; width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #F8FAF9, #E2E9E5 70%);
  box-shadow: 0 0 0 calc(var(--d) * .065) var(--rse-anel), 0 0 0 calc(var(--d) * .065 + 1px) rgb(7 36 23 / .5),
              inset 0 calc(var(--d) * .08) calc(var(--d) * .13) calc(var(--d) * -.04) rgb(10 46 30 / .55);
  animation: rse-abrir 500ms var(--rse-ease) both; animation-delay: calc(250ms + var(--i, 0) * 70ms);
}
@keyframes rse-tracar { from { transform: scaleX(0); } }
@keyframes rse-abrir { from { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .rse-linha, .rse-furo { animation: none; } }

/* Topo */
.topo { background: var(--rse-verde-sombra); }
.topo__in { min-height: 60px; }
.marca svg { height: 30px; width: auto; display: block; }
.topo__kit { color: var(--rse-apoio); font-size: 15px; text-decoration-color: rgb(201 214 206 / .5); }
@media (min-width: 720px) { .topo__in { min-height: 72px; } .marca svg { height: 40px; } .topo__kit { font-size: 15px; } }

/* Tela inicial: lençol com seis furos e a linha que some no 13 */
.inicio__titulo { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem); line-height: 1.02; max-width: 20ch; }
.inicio__cta { margin-top: 32px; }
@media (max-width: 719px) { .inicio__cta { width: 100%; justify-content: space-between; } }

/* Botões */
.botao { border-radius: var(--rse-r-ctl); font-weight: 700; border-width: 1.5px; }
@media (hover: hover) {
  .botao--forte:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px var(--rse-sombra), 0 0 0 4px rgb(242 245 243 / .16); }
  .botao--leve:hover { background: rgb(242 245 243 / .08); border-color: rgb(242 245 243 / .75); }
}
.botao--leve { border-color: rgb(242 245 243 / .45); }
.botao:disabled { opacity: 1; background: var(--rse-superficie); color: var(--rse-apoio); box-shadow: none; }

/* Opções, chips, campos */
.opcao { border-radius: var(--rse-r-sup); }
.opcao__txt strong { font-size: 19px; }
.opcao[aria-current="true"] { border-color: var(--rse-branco); box-shadow: inset 0 0 0 1.5px var(--rse-branco); }
.opcao--off { background: transparent; border: 1.5px dashed rgb(201 214 206 / .5); color: var(--rse-apoio); }
.opcao--off .opcao__txt strong, .opcao__off { color: var(--rse-apoio); }
.dica { border-left-color: rgb(201 214 206 / .55); }
.chip { background: var(--rse-superficie); border: 1.5px solid var(--rse-fio); border-radius: var(--rse-r-ctl); }
.chip input { border: 2px solid var(--rse-apoio); border-radius: 4px; }
.chip input:checked { background: var(--rse-branco); border-color: var(--rse-branco); }
.busca input, .outra__campos input, .outra__campos select {
  background: var(--rse-verde-sombra); border: 1.5px solid rgb(242 245 243 / .24); border-radius: var(--rse-r-ctl);
}
.busca input::placeholder, .outra__campos input::placeholder { color: var(--rse-apoio); }
.kit__barra { background: var(--rse-verde); }

/* Dentes: o furo abre quando o dente é marcado */

/* Progresso, migalhas, rótulo do dente */
.progresso i { background: rgb(242 245 243 / .18); }
.progresso i.feito { background: rgb(242 245 243 / .6); }
.progresso i.agora { background: var(--rse-branco); }
.migalhas a { border-radius: var(--rse-r-ctl); background: rgb(242 245 243 / .08); }

/* Tamanhos de título do DNA */
.fluxo h1, .grupos h1 { font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.125rem); }

.milimetro { font-family: var(--rse-display); font-weight: 700; font-stretch: 88%; letter-spacing: -.03em; }

/* Grupos: o disco no tom do grupo, número em branco (1 a 3) ou preto (4 a 9) */
.grupo__n { background: var(--tom); color: var(--tom-txt); box-shadow: 0 0 0 2px var(--rse-branco), 0 8px 16px -8px var(--rse-sombra); }
.abas { background: var(--rse-verde-sombra); border-radius: var(--rse-r-sup); }
.amostra-bl { background: rgb(242 245 243 / var(--a)); }

/* Os 9 grupos: discos sobre a linha preta */
.escala { --dd: clamp(28px, 7vw, 44px); position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; box-shadow: none; overflow: visible; border-radius: 0; }
.escala::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--dd) / 2 - 3px); height: 6px; background: var(--rse-preto); }
.escala i { position: relative; display: grid; justify-items: center; gap: 6px; height: auto; background: none; font-size: 15px; color: var(--rse-branco); }
.escala i::before { content: ""; width: var(--dd); height: var(--dd); border-radius: 50%; background: rgb(242 245 243 / var(--a)); box-shadow: inset 0 0 0 1.5px rgb(242 245 243 / .5); }

/* Rodapé: continua a Pós */
.rodape { background: var(--rse-verde-sombra); }
.rodape p { color: var(--rse-apoio); font-size: 15px; }
.rodape__link { border-radius: 4px; border: 1.5px solid rgb(242 245 243 / .3); }

/* Abertura: a peça "O furo abre, a linha traça, o nome assenta" do brandbook, em vetor (DESIGN DNA).
   DECISÃO 136: ritmo lento e macio, composição centralizada em qualquer orientação (furo em cima,
   textos embaixo) e, só aqui, a tagline e o endosso. Tamanhos pela menor dimensão da tela. */
.abertura {
  position: fixed; inset: 0; z-index: 400; display: none; cursor: pointer; overflow: hidden;
  --d: min(40vmin, 240px); --nw: min(84vw, calc(var(--d) * 2.1), 500px);
  --suave: cubic-bezier(.16, 1, .3, 1); /* movimentos grandes: saída longa, sem overshoot */
}
@media (orientation: landscape) { .abertura { --d: min(30vmin, 260px); } }
.abertura__fundo {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 70% at 12% 0%, rgb(242 245 243 / .08), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgb(4 26 16 / .32), transparent 65%),
    var(--rse-verde);
}
.abertura__bloco {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); text-align: center;
}
.abertura__alvo { position: relative; flex: none; width: var(--d); height: var(--d); }
.abertura__furo { left: 0; top: 0; animation: rse-abrir 900ms var(--suave) 150ms both; }
/* a linha entra pela borda esquerda da tela e some no centro do furo (o bloco é centralizado: centro = 50vw) */
.abertura__linha {
  --esp: max(4px, calc(var(--d) * .05)); --funde: calc(var(--d) / 2); --fim: 50vw; --y: calc(var(--d) / 2);
  left: calc(var(--d) / 2 - 50vw); animation: rse-tracar 1700ms var(--suave) 450ms both;
}
.abertura__nome { width: var(--nw); height: auto; margin-top: calc(var(--d) * .3); overflow: visible; animation: subir 700ms var(--rse-ease) 1500ms both; }
.abertura__tagline {
  margin-top: 14px; max-width: min(94vw, 34em); text-wrap: balance;
  font: 400 clamp(12px, 3.2vw, 18px)/1.35 var(--rse-texto); color: var(--rse-apoio);
  animation: subir 700ms var(--rse-ease) 1680ms both;
}
.abertura__endosso {
  margin-top: 8px; font: 400 clamp(11px, 2.8vw, 14px)/1.3 var(--rse-texto); letter-spacing: .04em; color: var(--rse-apoio);
  animation: subir 700ms var(--rse-ease) 1860ms both;
}
.com-abertura .abertura { display: block; animation: abertura-sai 400ms var(--rse-ease) 5.6s forwards; } /* teto, mesmo sem JS */
.abertura.transicao { animation: none; }
@keyframes abertura-sai { to { opacity: 0; visibility: hidden; } }
/* Divergência declarada do DNA: 20ch fica estreito com a Bricolage (5 linhas no desktop);
   15em reproduz as 3 linhas da aplicação "Tela inicial, 1440" do brandbook. */
@media (min-width: 720px) { .inicio__titulo { max-width: 15em; } }

/* ---------- Mini lençol: para qual dente a pergunta vale (ajuste pós-teste do dono) ---------- */
.mini {
  position: sticky; top: 60px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 10px 0 12px;
  background: var(--rse-verde); border-bottom: 1px solid var(--rse-fio);
}
@media (min-width: 720px) { .mini { top: 72px; } }

/* arco: centrais mais baixos, como no lençol da tela inicial */
 
/* o dente da pergunta: o furo aberto, maior */

/* respondido: check, toque volta para ele */

/* próximos e fora da pergunta: esmaecidos (só a borda e o fundo; o número mantém contraste) */

.mini__conta { font: 700 14px/1 var(--rse-texto); letter-spacing: .08em; color: var(--rse-apoio); white-space: nowrap; }
/* o dente é o protagonista do título */
.fluxo h1 .t-quem { display: block; font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem); line-height: 1; }
.fluxo h1 .t-perg { display: block; margin-top: 8px; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.08; }
.mini + .fluxo__topo { margin-top: 6px; }

/* Celular: folga mínima entre o botão "Começar" e o arco de furos (o anel do furo ocupa ~4 px),
   mesmo em tela baixa, onde a margem automática do lençol zera. */
@media (max-width: 719px) { .inicio__texto { padding-bottom: 28px; } }
/* O mini lençol continua o topo: verde-sombra de borda a borda (sem caixa no meio do lençol) */
.mini {
  background: var(--rse-verde-sombra); border-bottom: 0; margin-top: 0; padding: 10px 0 14px;
  box-shadow: 0 0 0 100vmax var(--rse-verde-sombra); clip-path: inset(0 -100vmax);
}
.mini + .fluxo__topo { margin-top: 14px; }
.fluxo:has(> .mini) { padding-top: 0; }

/* Abertura → tela: o que entra em camadas nasce escondido embaixo da abertura.
   Sem JS, as camadas aparecem sozinhas quando o teto da abertura vence (5,6 s). */
.com-abertura:not(.entrada-manual) :is(.inicio__titulo, .inicio__cta, .lencol > *, #tela > * > *) {
  animation: abertura-volta 400ms var(--rse-ease) 5.6s both !important;
}
.entrada-manual :is(.inicio__titulo, .inicio__cta, .lencol > *, #tela > * > *) { animation: none !important; }
@keyframes abertura-volta { from { opacity: 0; } }

/* ======================================================================
   Resultado em branco (DECISÃO 137). Tema claro derivado do DNA: fundo branco resina #F2F5F3,
   texto preto da linha #121614, secundário tinta 2 #4E5F56 (6,18:1), verde do lençol como acento.
   ====================================================================== */
body.tela-clara { background: var(--rse-branco); color: var(--rse-preto); }
.tela-clara :focus-visible { outline-color: var(--rse-verde); }
.tela-clara .voltar { color: var(--rse-tinta-2); }
@media (hover: hover) { .tela-clara .voltar:hover { color: var(--rse-preto); } }

/* o branco abre como um furo no lençol (só transform), por cima do conteúdo e abaixo do topo */
.abre-branco {
  position: fixed; left: 50%; top: 46%; z-index: 30; pointer-events: none;
  border-radius: 50%;
  background: var(--rse-branco); box-shadow: 0 0 0 calc(4px + 1.2vmin) var(--rse-anel);
}
.tela.aguarda > * { opacity: 0; }

.resultado-tela { max-width: 760px; padding-bottom: 8px; }
.res-caso { margin-top: clamp(20px, 3vw, 32px); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--rse-verde); }
.resultado-tela h1 { margin-top: 6px; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); line-height: 1.05; color: var(--rse-preto); }
.res-resumo { margin-top: 10px; font-size: 17px; color: var(--rse-tinta-2); }

.res-grupo { margin-top: clamp(28px, 4vw, 44px); }
.res-grupo + .res-grupo { padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgb(18 22 20 / .12); }
.res-grupo__cab { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.2; color: var(--rse-verde); }
.res-sem { margin-top: 8px; color: var(--rse-tinta-2); }

/* opções: discretas sobre o branco */
.res-abas { margin-top: 16px; padding: 4px; background: rgb(30 90 64 / .07); border-radius: var(--rse-r-sup); }
.res-abas button { color: var(--rse-tinta-2); min-height: 52px; }
.res-abas button span { color: var(--rse-tinta-2); }
.res-abas button[aria-selected="true"] { background: var(--rse-branco); color: var(--rse-preto); box-shadow: inset 0 0 0 1.5px var(--rse-verde); }
.res-abas button[aria-selected="true"] span { color: var(--rse-tinta-2); }
.res-abas .abas__tudo { color: var(--rse-verde); }
@media (hover: hover) { .res-abas button:hover { color: var(--rse-preto); } }

/* a lista é a protagonista: itens grandes, sem moldura, separados por fio */
.res-lista { list-style: none; padding: 0; margin-top: 8px; }
.res-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
.res-item + .res-item { border-top: 1px solid rgb(18 22 20 / .12); }
.entra .res-item { animation: depositar .55s var(--ease) both; animation-delay: calc(.15s + var(--i) * 110ms); }
.res-item__n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--rse-verde); color: var(--rse-branco); font: 700 19px/1 var(--rse-texto);
  box-shadow: 0 0 0 3px var(--rse-branco), 0 0 0 4.5px var(--rse-anel);
}
.res-item__n--extra { background: transparent; color: var(--rse-verde); border: 1.5px dashed var(--rse-verde); box-shadow: none; }
.res-item__resina { font: 700 clamp(1.3rem, 1.15rem + .7vw, 1.6rem)/1.25 var(--rse-texto); color: var(--rse-preto); }
.res-item__ind { font-weight: 400; color: var(--rse-tinta-2); }
.res-item__tipo { margin-top: 4px; font-size: 16px; color: var(--rse-tinta-2); }
.res-item__obs { list-style: none; padding: 0; margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 15px; color: var(--rse-tinta-2); }
.res-item__obs .obs-tem { display: inline-flex; align-items: center; gap: 6px; color: var(--rse-verde); font-weight: 700; }
.res-item__obs .obs-tem svg { width: 16px; height: 16px; }
.res-item__obs .obs-falta { padding: 2px 8px; border: 1.5px dashed rgb(78 95 86 / .7); border-radius: 4px; }

.res-aviso { margin: 4px 0 0 62px; padding: 12px 16px; border-left: 4px solid var(--rse-verde); border-radius: 0 var(--rse-r-sup) var(--rse-r-sup) 0; background: rgb(30 90 64 / .07); font-weight: 700; color: var(--rse-preto); }
.res-esperado { margin: 18px 0 0 62px; font-size: 15px; color: var(--rse-tinta-2); }
.res-esperado span { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.res-esperado strong { margin-left: 6px; font: 700 1.15rem/1 var(--rse-display); font-stretch: 88%; color: var(--rse-preto); }
.res-esperado em { font-style: normal; }
.res-opcional { margin-top: 18px; padding-top: 6px; border-top: 1px dashed rgb(18 22 20 / .18); }
.res-opcional__rot { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--rse-tinta-2); }

.res-fim { margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid rgb(18 22 20 / .12); }
.res-ensaio { font-size: 17px; color: var(--rse-tinta-2); }
.res-fim .acoes { margin-top: 18px; }
.res-botao { background: transparent; color: var(--rse-verde); border: 1.5px solid rgb(30 90 64 / .55); box-shadow: none; }
.res-botao--forte { background: var(--rse-verde); color: var(--rse-branco); border-color: var(--rse-verde); }
@media (hover: hover) {
  .res-botao:hover { background: rgb(30 90 64 / .07); border-color: var(--rse-verde); transform: none; }
  .res-botao--forte:hover { background: var(--rse-verde-sombra); transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgb(4 26 16 / .6); }
}
@media (max-width: 479px) { .res-aviso, .res-esperado { margin-left: 0; } }
/* topo e rodapé continuam verdes no resultado claro: texto claro próprio, não herdado do corpo */
.topo, .rodape { color: var(--rse-branco); }

/* ======================================================================
   Coroas reais (dentes.js, traçadas da foto de referência). Metáfora do DNA: no isolamento absoluto
   a coroa sai pelo furo do lençol. Coroa no lençol (não marcada) = superfície verde com contorno de
   apoio; coroa isolada (marcada, atual, home) = resina branca com o anel do lençol esticado em volta
   e a sombra interna de cima.
   ====================================================================== */
.rse-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.coroa { display: block; width: 100%; height: 100%; overflow: visible; }
.coroa path {
  fill: var(--rse-superficie); stroke: var(--rse-apoio); stroke-width: 1.5px; vector-effect: non-scaling-stroke;
  transition: fill var(--rse-micro) var(--rse-ease), stroke var(--rse-micro) var(--rse-ease);
}
/* coroa isolada: o anel fica por fora (paint-order), a resina por cima */
.coroa--isolada path, .dente:has(input:checked) .coroa path, .mini__d--atual .coroa path, .mini__d--todos .coroa path {
  fill: url(#rse-g-coroa); stroke: var(--rse-anel); stroke-width: 10px; paint-order: stroke; filter: url(#rse-f-sombra);
}

/* Tela "Quais dentes?": a arcada na proporção da foto; o toque vale na coroa */
.arcada { border: 0; padding: 0; margin: 28px 0 0; min-width: 0; }
.arcada__dentes { position: relative; width: min(100%, 560px); margin-inline: auto; aspect-ratio: 1108.7 / 300.6; }
.dente { position: absolute; pointer-events: none; border-radius: 12px; }
.dente input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dente .coroa path { pointer-events: visiblePainted; cursor: pointer; }
.dente__n {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  font: 700 clamp(14px, 3.6vw, 19px)/1 var(--rse-texto); color: var(--rse-branco);
}
.dente:has(input:checked) .dente__n { color: var(--rse-preto); }
.dente:has(input:checked)::after {
  content: ""; position: absolute; top: 2%; right: 4%; width: 22px; height: 22px; border-radius: 50%;
  background: var(--rse-preto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23F2F5F3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 2px var(--rse-branco);
}
.dente:has(input:focus-visible) { outline: 3px solid var(--rse-branco); outline-offset: 2px; }
@media (hover: hover) { .dente:not(:has(input:checked)) .coroa path:hover { stroke: var(--rse-branco); } }

/* Mini lençol: as coroas do caso em escala única, alinhadas pelo zênite */
.mini__arco { display: flex; align-items: flex-start; gap: 0; }
.mini__d { position: relative; display: block; flex: none; text-decoration: none; color: var(--rse-branco); }
.mini__d b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 13px/1 var(--rse-texto); }
.mini__d--atual b, .mini__d--todos b { color: var(--rse-preto); }
.mini__d--atual .coroa path, .mini__d--todos .coroa path { stroke-width: 7px; }
.mini__d--atual.abre { animation: rse-abrir 450ms var(--rse-ease) both; }
.mini__d--prox .coroa path { fill: transparent; stroke-dasharray: 3 3; }
.mini__d--prox b, .mini__d--fora b { color: var(--rse-apoio); }
.mini__d--fora .coroa path { fill: transparent; stroke: rgb(201 214 206 / .45); }
.mini__d--feito::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--rse-preto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23F2F5F3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: 0 0 0 1.5px var(--rse-branco);
}
@media (hover: hover) { a.mini__d--feito:hover .coroa path { stroke: var(--rse-branco); } }

/* Home: o lençol com os furos redondos (restaurado da site-v6, pedido do dono) */
.lencol { position: relative; height: clamp(170px, 24vw, 280px); margin-top: auto; margin-bottom: clamp(36px, 5vw, 64px); }
.lencol .rse-furo { --d: clamp(50px, 8.2vw, 118px); top: var(--top); left: calc(var(--x) - var(--d) / 2); }
.lencol .rse-furo::after { content: attr(data-dente); position: absolute; left: 50%; top: calc(100% + .7em); transform: translateX(-50%); font: 700 clamp(13px, 1.2vw, 17px)/1 var(--rse-texto); color: var(--rse-apoio); }
.lencol .d13 { --x: 53%; --top: 0;   --d: clamp(54px, 7.2vw, 104px); }
.lencol .d12 { --x: 61%; --top: 14%; --d: clamp(50px, 6.5vw, 94px); }
.lencol .d11 { --x: 69%; --top: 22%; }
.lencol .d21 { --x: 78%; --top: 22%; }
.lencol .d22 { --x: 87%; --top: 14%; --d: clamp(50px, 6.5vw, 94px); }
.lencol .d23 { --x: 94%; --top: 0;   --d: clamp(54px, 7.2vw, 104px); }
.lencol .rse-linha { --y: calc(clamp(54px, 7.2vw, 104px) / 2); --fim: 53%; --funde: clamp(27px, 3.6vw, 52px); --esp: clamp(4px, .45vw, 6px); }
@media (max-width: 719px) {
  .lencol .d13 { --x: 10%; } .lencol .d12 { --x: 26%; } .lencol .d11 { --x: 42%; }
  .lencol .d21 { --x: 59%; } .lencol .d22 { --x: 75%; } .lencol .d23 { --x: 91%; }
  .lencol .rse-linha { --fim: 10%; }
}