:root {
  color-scheme: light;
  /* Identidade do Pro8 (tokens.css do app): roxo da marca, laranja do logo, neutros do app. */
  --fundo: #fafafa; --cartao: #ffffff; --tinta: #212529; --cinza: #6c757d; --roxo: #664f7d; --roxo-escuro: #4a3560; --roxo-claro: #f3eef7;
  --roxo-foco: #8a6fa8; --laranja: #ff872d; --campo: #fafafa; --linha: #dee2e6;
  --ok: #2e7d32; --ok-escuro: #1b5e20; --ok-claro: #e8f5e9; --alerta: #7a4f01; --alerta-claro: #fff6e5; --erro: #b3261e; --erro-claro: #fdecea;
  /* O gato do Pro8 (ADR 0117 do Pro8_Front): as mesmas cores do app. */
  --gato-pelo: #ff872d; --gato-listra: #d9661c; --gato-creme: #ffe7cf; --gato-rosa: #f4a7ad; --gato-nariz: #e8848d; --gato-olho: #f2c14e;
  --gato-pupila: #2b1d16; --gato-traco: #3b2a21; --gato-dedos: #e8c4a2; --gato-novelo: #664f7d; --gato-novelo-fio: #9a86b0; --branco: #ffffff;
  --f-texto: Roboto, "Helvetica Neue", system-ui, sans-serif;
}
/* A Roboto vem daqui mesmo, nos mesmos arquivos do app (src/assets/fonts do Pro8_Front): nada de Google Fonts na
   porta pública. O app só usa 400 e 500; o "negrito" da página é o 500. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontes/roboto-400-latin.woff2') format('woff2') }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('fontes/roboto-500-latin.woff2') format('woff2') }
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--f-texto); font-size: 15px; line-height: 1.5 }
button, input, select { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--roxo-foco); outline-offset: 2px }
.topo { display: flex; justify-content: space-between; align-items: center; padding: 14px max(20px, env(safe-area-inset-right)) 14px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--linha); background: var(--cartao) }
.marca { display: inline-flex; align-items: center } .marca img { height: 34px; width: auto; display: block }
.topo a.volta { color: var(--cinza); font-size: 13px; text-decoration: none }
.corpo { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 24px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); max-width: 1080px; margin: 0 auto }
@media (min-width: 860px) { .corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding-block: 48px 56px } }
.abertura { display: grid; gap: 18px; align-content: start }
.abertura h1 { font-family: var(--f-texto); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(28px, 4vw, 42px); line-height: 1.1; margin: 0; text-wrap: balance }
.abertura .lead { color: var(--cinza); margin: 0; max-width: 44ch }
.tempo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--roxo-escuro); font-weight: 500 }
.tempo i { width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); display: inline-block }
.vai-ver { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px }
.vai-ver li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px }
.vai-ver li i { font-style: normal; color: var(--laranja); font-weight: 500 } .vai-ver li span { color: var(--cinza) } .vai-ver li b { font-weight: 500 }
.quem { border-top: 1px solid var(--linha); padding-top: 14px; font-size: 13px; color: var(--cinza) } .quem b { color: var(--tinta); font-weight: 500 }
/* No celular a cena desenha as quatro pontas; a lista sai da vista mas fica para o leitor de tela (a cena é aria-hidden). */
@media (max-width: 859px) {
  .quem { display: none }
  .vai-ver { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
}
/* O chão do app: página cinza-clara e o formulário em cartão branco. */
form { display: grid; gap: 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px; padding: 20px }
.secao { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 -2px }
.secao h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); margin: 0; font-weight: 500 }
.secao span { font-size: 12px; color: var(--cinza) }
.grupo { display: grid; gap: 14px; grid-template-columns: 1fr }
@media (min-width: 560px) { .grupo.dois { grid-template-columns: 1fr 1fr } .grupo.cep { grid-template-columns: 150px 1fr } .grupo.num { grid-template-columns: 1fr 120px 1fr } }
.grupo.uf { grid-template-columns: 1fr 96px }
.campo { display: grid; gap: 5px; min-width: 0; position: relative }
.campo label, .campo .rot { font-size: 13px; font-weight: 500 } .campo small { color: var(--cinza); font-size: 12px; font-weight: 400 }
.campo input, .campo select { width: 100%; padding: 11px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--campo) }
.campo input:focus, .campo select:focus { border-color: var(--roxo); outline: none; box-shadow: 0 0 0 3px var(--roxo-claro) }
.campo.erro input, .campo.erro select { border-color: var(--erro) }
.campo .msg { color: var(--erro); font-size: 12px } .campo .estado { position: absolute; right: 10px; top: 34px; font-size: 12px; color: var(--cinza) }
.receita { border: 1px solid var(--linha); border-left: 3px solid var(--roxo); border-radius: 8px; padding: 10px 12px; display: grid; gap: 3px; font-size: 13px; background: var(--campo) }
.receita b { font-size: 14px; font-weight: 500 } .receita .meta { color: var(--cinza); display: flex; flex-wrap: wrap; gap: 4px 10px } .receita .fonte { font-size: 11px; color: var(--cinza) } .ativa { color: var(--ok); font-weight: 500 }
.lista-radio { display: grid; gap: 6px }
.lista-radio label { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--campo); cursor: pointer; font-size: 14px }
.lista-radio label:has(input:checked) { border-color: var(--roxo); background: var(--roxo-claro) }
.lista-radio input { accent-color: var(--roxo); margin-top: 3px } .lista-radio small { display: block; color: var(--cinza); font-size: 12px }
@media (min-width: 560px) { .lista-radio.horizontal { grid-template-columns: repeat(3, 1fr) } }
.aviso-fab { border-radius: 8px; padding: 10px 12px; font-size: 13px; background: var(--alerta-claro); color: var(--alerta) } .aviso-fab b { font-weight: 500 }
.aceite { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13px; color: var(--cinza) } .aceite input { accent-color: var(--roxo); margin-top: 3px }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.rodape { display: grid; gap: 8px }
.enviar { background: var(--roxo); color: #fff; border: 0; border-radius: 8px; padding: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; width: 100% }
.enviar:hover { background: var(--roxo-escuro) } .enviar[disabled] { opacity: .6; cursor: wait }
.faltam { font-size: 13px; color: var(--cinza); text-align: center; font-variant-numeric: tabular-nums } .faltam.pronto { color: var(--ok); font-weight: 500 }
.privado { font-size: 12px; color: var(--cinza); text-align: center }
.falhou { border-radius: 8px; padding: 10px 12px; font-size: 13px; background: #fbe7e5; color: var(--erro) }
.obrigado { padding: 32px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); display: grid; gap: 22px; max-width: 560px; width: calc(100% - 40px); margin: 32px auto; background: var(--cartao); border: 1px solid var(--linha); border-radius: 14px }
.obrigado .cabeca { display: grid; gap: 10px; justify-items: center; text-align: center }
.obrigado h1 { font-family: var(--f-texto); font-weight: 500; font-size: 32px; margin: 0 } .obrigado p { color: var(--cinza); margin: 0 }
.selo { width: 56px; height: 56px; border-radius: 50%; background: var(--ok-claro); color: var(--ok); display: grid; place-items: center; font-size: 28px }
.agora { border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px }
.agora h2 { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza) }
.agora ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px } .agora li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14px }
.agora li i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--roxo-claro); color: var(--roxo); display: grid; place-items: center; font-weight: 500; font-size: 12px }
.agora li span { color: var(--cinza); display: block; font-size: 13px }
.resumo { font-size: 13px; color: var(--cinza); display: grid; gap: 2px } .resumo b { color: var(--tinta); font-weight: 500 }
.voltar-site { display: block; text-align: center; padding: 11px; border-radius: 8px; border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; background: var(--campo); font-size: 14px }

/* ---------- A abertura "o fio" (proposta A, decisão do dono em 20/10/2026): o gato do Pro8 com o novelo, e o fio
   desenhando o 8 em laço, acendendo as quatro pontas da loja. Só CSS; com movimento reduzido fica a pose final. ---------- */
.cena { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: center; margin: 4px 0 }
.gato { width: 100%; max-width: 240px; height: auto; display: block; margin-inline: auto }
.fio-box { position: relative; min-height: 180px }
.fio { width: 100%; height: auto; display: block; overflow: visible }
.fio .trilho { fill: none; stroke: var(--linha); stroke-width: 2.4; stroke-linecap: round }
.fio .linha { fill: none; stroke: var(--roxo); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fio-desenha 10s ease-in-out infinite }
.no { position: absolute; transform: translate(-50%, -50%); background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 9px; font-size: 11px; display: grid; gap: 1px; min-width: 96px; opacity: .4; animation: 10s infinite }
.no b { font-weight: 500; font-size: 12px; color: var(--tinta) }
.no span { color: var(--cinza) }
.no i { font-style: normal; font-size: 10px; letter-spacing: .06em; color: var(--laranja); font-weight: 500 }
.no--1 { left: 72%; top: 16%; animation-name: no-acende-1 }
.no--2 { left: 72%; top: 84%; animation-name: no-acende-2 }
.no--3 { left: 28%; top: 16%; animation-name: no-acende-3 }
.no--4 { left: 28%; top: 84%; animation-name: no-acende-4 }
@keyframes fio-desenha { 0% { stroke-dashoffset: 1; opacity: 1 } 62% { stroke-dashoffset: 0; opacity: 1 } 88% { stroke-dashoffset: 0; opacity: 1 } 96% { stroke-dashoffset: 0; opacity: 0 } 100% { stroke-dashoffset: 1; opacity: 0 } }
@keyframes no-acende-1 { 0%, 5% { opacity: .4; border-color: var(--linha) } 8%, 90% { opacity: 1; border-color: var(--roxo) } 96%, 100% { opacity: .4; border-color: var(--linha) } }
@keyframes no-acende-2 { 0%, 20% { opacity: .4; border-color: var(--linha) } 23%, 90% { opacity: 1; border-color: var(--roxo) } 96%, 100% { opacity: .4; border-color: var(--linha) } }
@keyframes no-acende-3 { 0%, 36% { opacity: .4; border-color: var(--linha) } 39%, 90% { opacity: 1; border-color: var(--roxo) } 96%, 100% { opacity: .4; border-color: var(--linha) } }
@keyframes no-acende-4 { 0%, 53% { opacity: .4; border-color: var(--linha) } 56%, 90% { opacity: 1; border-color: var(--roxo) } 96%, 100% { opacity: .4; border-color: var(--linha) } }
/* O gato: cores e o laço ocioso do componente do app (pisca, mexe a orelha e o rabo a cada 8 s). */
.gato__pelo { fill: var(--gato-pelo) }
.gato__contorno-pelo { stroke: var(--gato-pelo) }
.gato__traco-pelo { fill: none; stroke: var(--gato-pelo) }
.gato__traco-listra { fill: none; stroke: var(--gato-listra) }
.gato__creme { fill: var(--gato-creme) }
.gato__rosa { fill: var(--gato-rosa) }
.gato__nariz { fill: var(--gato-nariz); stroke: var(--gato-nariz) }
.gato__traco { fill: none; stroke: var(--gato-traco) }
.gato__bigode { opacity: .45 }
.gato__iris { fill: var(--gato-olho) }
.gato__pupila { fill: var(--gato-pupila) }
.gato__brilho { fill: var(--branco) }
.gato__dedos { stroke: var(--gato-dedos) }
.gato__novelo-bola { fill: var(--gato-novelo) }
.gato__novelo-fio { fill: none; stroke: var(--gato-novelo-fio) }
.gato__rabo { transform-box: fill-box; transform-origin: 100% 0%; animation: gato-rabo 8s ease-in-out infinite }
.gato__orelha { transform-box: fill-box; transform-origin: 30% 100%; animation: gato-orelha 8s ease-in-out infinite }
.gato__olho { transform-box: fill-box; transform-origin: 50% 50%; animation: gato-olho 8s ease-in-out infinite }
@keyframes gato-olho { 0%, 30%, 33%, 100% { transform: scaleY(1) } 31.5% { transform: scaleY(.1) } }
@keyframes gato-orelha { 0%, 55%, 59%, 100% { transform: rotate(0) } 57% { transform: rotate(-14deg) } }
@keyframes gato-rabo { 0%, 75%, 95%, 100% { transform: rotate(0) } 80% { transform: rotate(10deg) } 85% { transform: rotate(-6deg) } 90% { transform: rotate(4deg) } }
@media (prefers-reduced-motion: reduce) {
  .fio .linha, .no, .gato__rabo, .gato__orelha, .gato__olho { animation: none }
  .fio .linha { stroke-dashoffset: 0 }
  .no { opacity: 1; border-color: var(--roxo) }
}