/* =========================================================================
   loading-casinha.css — O LOADING DA CASINHA do /simulador/ (25/10/2026)
   -------------------------------------------------------------------------
   Pedido do Felipe: "um loading bem bonito, faça uma casinha sendo construída
   até vir o retorno" — cobre o 1 a 2 s a mais da 1ª simulação com o motor da
   Suíte dormindo (custo zero).

   Arquivo NOVO e carregado SÓ por /simulador/index.html: o style.css é de 8
   páginas e /assets/** é imutável por 1 ano. Prefixo lc- (nada colide com o
   Bootstrap, o site ou o cc- do design system). Cores: os tokens do design
   system (tokens.css, carregado na mesma página), com o valor de reserva — a
   casinha é a do logo: telhado verde, porta em arco marinho, chão marinho.

   Só transform, opacity e stroke-dashoffset animam; nenhuma biblioteca.
   A animação mora dentro de @media (prefers-reduced-motion: no-preference):
   o estado de base de cada peça é a casa PRONTA, então quem pede menos
   movimento vê a casinha parada, inteira, e só o texto.

   Quem monta o HTML é o LoadingCasinha do main.simulador.js:
     .lc-cobertura  — a camada sobre o que está carregando (o cartão da etapa 4,
                      a fila de botões de um card);
     .lc            — o bloco com role="status" (grande ou compacto; dentro da
                      caixa da prévia, que já é região viva, sem role próprio);
     .lc__cena      — o desenho (aria-hidden);
     .lc__titulo / .lc__sub (.lc__aguarde + .lc__extra, que se revezam).

   [26/10/2026, correções da revisão] a obra termina em ~0,86 s (era ~1,17 s,
   rente ao mínimo de 1,2 s: o cliente quase nunca via a casa pronta); a camada é
   opaca (o desfoque deixava manchas e custava GPU); a linha de baixo troca em
   sequência (esmaece inteira, troca, volta); o título equilibra as linhas; o
   compacto reserva duas linhas no celular (a caixa não pula a cada troca).
   ========================================================================= */

.lc {
  --lc-marinho: var(--brand-navy, #0d2c64);
  --lc-azul: var(--brand-blue, #106eea);
  --lc-ciano: var(--brand-cyan, #01aeef);
  --lc-verde: var(--brand-green, #a7cd3a);
  --lc-verde-sombra: #8db02c;
  --lc-verde-escuro: #779a1f;
  --lc-tijolo: #bed7f8;
  --lc-tijolo-b: #a8c9f4;
  --lc-base: #8fa4c3;
  --lc-vidro: #e2f5ff;
  --lc-fumaca: #c2cedd;
  --lc-sombra: #dfe9f6;
  --lc-halo: #eef5fe;
  --lc-texto: var(--brand-navy, #0d2c64);
  --lc-texto-suave: var(--ink-muted, #6b7484);
  --lc-ciclo: 1.8s;            /* um ciclo da obra; repete enquanto a resposta não vem */
  box-sizing: border-box;
  margin: 0;
  font-style: normal;
  text-align: center;
  color: var(--lc-texto);
}
.lc *, .lc *::before, .lc *::after { box-sizing: border-box; }

/* ---------- o desenho ---------- */
.lc__cena { position: relative; display: block; flex: 0 0 auto; }
.lc__cena::before {            /* o halo: um círculo claro apoiado no chão, atrás da casa, como um selo */
  content: "";
  position: absolute;
  left: 16.5%; right: 16.5%; top: 0; bottom: 11.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #f7fbff 0, var(--lc-halo) 64%, var(--lc-halo) 100%);
}
.lc__casa { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.lc__casa * { transform-box: fill-box; }

.lc__sombra { fill: var(--lc-sombra); transform-origin: 50% 50%; }
.lc__chao { fill: none; stroke: var(--lc-marinho); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lc__base { fill: var(--lc-base); transform-origin: 50% 50%; }
.lc__tijolo { fill: var(--lc-tijolo); transform-origin: 50% 100%; }
.lc__tijolo--b { fill: var(--lc-tijolo-b); }
.lc__chamine { transform-origin: 50% 100%; }
.lc__chamine rect { fill: var(--lc-verde-sombra); }
.lc__chamine .lc__chamine-topo { fill: var(--lc-verde-escuro); }
.lc__telhado { fill: var(--lc-verde); stroke: var(--lc-verde); stroke-width: 4; stroke-linejoin: round; }
.lc__beiral { fill: none; stroke: var(--lc-verde-sombra); stroke-width: 2.6; stroke-linecap: round; }
.lc__porta { transform-origin: 50% 100%; }
.lc__porta path { fill: var(--lc-marinho); }
.lc__porta circle { fill: var(--lc-verde); }
.lc__janela { transform-origin: 50% 50%; }
.lc__janela .lc__vidro { fill: var(--lc-vidro); stroke: var(--lc-marinho); stroke-width: 2.4; }
.lc__janela path { fill: none; stroke: var(--lc-marinho); stroke-width: 1.8; }
.lc__janela .lc__peitoril { fill: var(--lc-marinho); }
.lc__fumaca { fill: var(--lc-fumaca); opacity: 0; transform-origin: 50% 50%; }
.lc__brilho { fill: var(--lc-ciano); opacity: 0; transform-origin: 50% 50%; }
.lc__brilho--2 { fill: var(--lc-verde); }

/* ---------- os textos ---------- */
.lc__textos { display: block; min-width: 0; }
.lc__titulo { display: block; text-wrap: balance; }   /* quebra em duas linhas parecidas, nunca "simulação…" sozinha */
/* "Aguarde" e as secundárias no MESMO lugar. A troca é EM SEQUÊNCIA: a linha inteira esmaece
   (.lc__sub--troca), o JS troca o texto e qual das duas aparece, e ela volta — as duas frases
   nunca ficam meio visíveis uma sobre a outra. */
.lc__sub { display: grid; transition: opacity .22s ease; }
.lc__sub.lc__sub--troca { opacity: 0; }
.lc__aguarde, .lc__extra { grid-area: 1 / 1; }
.lc__extra { opacity: 0; }
.lc--extra .lc__aguarde { opacity: 0; }
.lc--extra .lc__extra { opacity: 1; }

/* ---------- a camada sobre o que carrega ---------- */
.lc-hospede { position: relative; }
.lc-cobertura {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: inherit;
  /* opaca, da cor do cartão: o desfoque de antes (backdrop-filter) quase não aparecia atrás de um
     branco a 96%, deixava manchas (rótulos fantasmas, uma faixa cinza atrás do chão no celular) e
     era refeito sobre o cartão inteiro a cada quadro da obra */
  background: var(--surface-raised, #fff);
  cursor: progress;
}

/* ---------- GRANDE: o envio da simulação (sobre o cartão da etapa 4) ---------- */
.lc--grande {
  /* sticky: num cartão mais alto que a tela, o desenho fica à vista (centro da janela),
     sem sair do cartão; num cartão que cabe, fica no centro dele */
  position: sticky;
  top: calc(50vh - 130px);
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
}
.lc--grande .lc__cena { width: 200px; height: 150px; }
.lc--grande .lc__titulo {
  margin-top: 12px;
  font-family: var(--font-heading, Roboto, system-ui, sans-serif);
  font-size: 20px;
  line-height: 28px;
  min-height: 28px;            /* a linha já existe antes do texto entrar (40 ms depois): nada pula */
  font-weight: 700;
  letter-spacing: .1px;
  color: var(--lc-texto);
}
.lc--grande .lc__sub {
  margin-top: 4px;
  font-family: var(--font-body, "Open Sans", system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 21px;
  min-height: 21px;
  color: var(--lc-texto-suave);
}

/* ---------- COMPACTO: a prévia do passo 3 e a tabela de parcelas de um card ---------- */
.lc--compacto {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.lc--compacto .lc__cena { width: 60px; height: 45px; }
.lc--compacto .lc__titulo {
  font-family: var(--font-body, "Open Sans", system-ui, sans-serif);
  font-size: 13.5px;
  line-height: 18px;
  min-height: 18px;
  font-weight: 700;
  color: var(--lc-texto);
}
.lc--compacto .lc__sub {
  margin-top: 1px;
  font-family: var(--font-body, "Open Sans", system-ui, sans-serif);
  font-size: 12px;
  line-height: 16px;
  min-height: 16px;
  font-weight: 400;
  color: var(--lc-texto-suave);
}
/* dentro da caixa da prévia: a .sim-previa.carregando pinta itálico cinza — aqui não */
.sim-previa .lc--compacto { min-height: 45px; font-style: normal; }
/* sobre a fila de botões de um card (branco como o card, pela .lc-cobertura) */
.lc-cobertura--compacto { padding: 6px 14px; }
/* [26/10/2026] a fila de botões é o PÉ do card do design system (.cc-offer, borda de 1 px e
   --radius-lg): a camada acompanha os cantos de baixo dele. Reta, ela cobria a curva da borda
   (os dois cantos de baixo ficavam quadrados e brancos por cima do azul). */
.cc-offer > .cc-offer__actions > .lc-cobertura {
  border-radius: 0 0 calc(var(--radius-lg, 12px) - 1px) calc(var(--radius-lg, 12px) - 1px);
}

@media (max-width: 575.98px) {
  .lc--grande { top: calc(50vh - 115px); }
  .lc--grande .lc__cena { width: 168px; height: 126px; }
  .lc--grande .lc__titulo { margin-top: 10px; font-size: 16.5px; line-height: 24px; min-height: 24px; letter-spacing: 0; }
  .lc--grande .lc__sub { font-size: 13.5px; line-height: 20px; min-height: 20px; }
  /* no celular a coluna de texto do compacto é estreita (~157 px na prévia em 390): "Consultando as
     condições dos bancos…" quebra em 2 linhas e as outras não — reservadas as 2, a caixa e o
     Voltar/Próximo não pulam 16 px a cada troca */
  .lc--compacto .lc__sub { min-height: 32px; }
}

/* =========================================================================
   A OBRA — um ciclo de 1,8 s (os % são do ciclo; 1% = 18 ms):
     chão e sombra 0–7% · fundação 4–10% · 13 tijolinhos caindo um a um 8–33,5%
     (um a cada 1,75%) · telhado desce e assenta 32–39,5% · chaminé 38–42% · porta
     40–44,5% · janela 42,5–48% · a casa fica PRONTA em ~0,86 s · brilhos 48–74% e
     fumacinha 49–85% · tudo esmaece 88–97% e a obra recomeça, se a resposta ainda
     não veio.
   [26/10] Era pronta só aos ~1,17 s, rente ao mínimo de 1.200 ms: no caso comum
   (motor acordado, resposta em ~0,4 s) a camada saía no meio do pulo da janela e
   a fumacinha e os brilhos quase nunca apareciam. Agora a casa fica ~0,3 s pronta,
   soltando fumaça, antes de sair. O ciclo e o mínimo não mudaram.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .lc-cobertura { animation: lc-entra .14s ease-out both; }
  .lc--grande .lc__cena { animation: lc-surge .3s cubic-bezier(.2, .8, .2, 1) both; }

  .lc__tudo { animation: lc-tudo var(--lc-ciclo) linear infinite; }
  .lc__sombra { animation: lc-sombra var(--lc-ciclo) infinite both; }
  .lc__chao { animation: lc-chao var(--lc-ciclo) infinite both; }
  .lc__base { animation: lc-base var(--lc-ciclo) infinite both; }
  .lc__t1 { animation: lc-t1 var(--lc-ciclo) infinite both; }
  .lc__t2 { animation: lc-t2 var(--lc-ciclo) infinite both; }
  .lc__t3 { animation: lc-t3 var(--lc-ciclo) infinite both; }
  .lc__t4 { animation: lc-t4 var(--lc-ciclo) infinite both; }
  .lc__t5 { animation: lc-t5 var(--lc-ciclo) infinite both; }
  .lc__t6 { animation: lc-t6 var(--lc-ciclo) infinite both; }
  .lc__t7 { animation: lc-t7 var(--lc-ciclo) infinite both; }
  .lc__t8 { animation: lc-t8 var(--lc-ciclo) infinite both; }
  .lc__t9 { animation: lc-t9 var(--lc-ciclo) infinite both; }
  .lc__t10 { animation: lc-t10 var(--lc-ciclo) infinite both; }
  .lc__t11 { animation: lc-t11 var(--lc-ciclo) infinite both; }
  .lc__t12 { animation: lc-t12 var(--lc-ciclo) infinite both; }
  .lc__t13 { animation: lc-t13 var(--lc-ciclo) infinite both; }
  .lc__telhado, .lc__beiral { animation: lc-telhado var(--lc-ciclo) infinite both; }
  .lc__chamine { animation: lc-chamine var(--lc-ciclo) infinite both; }
  .lc__porta { animation: lc-porta var(--lc-ciclo) infinite both; }
  .lc__janela { animation: lc-janela var(--lc-ciclo) infinite both; }
  .lc__fumaca--1 { animation: lc-fumaca1 var(--lc-ciclo) infinite both; }
  .lc__fumaca--2 { animation: lc-fumaca2 var(--lc-ciclo) infinite both; }
  .lc__fumaca--3 { animation: lc-fumaca3 var(--lc-ciclo) infinite both; }
  .lc__brilho--1 { animation: lc-brilho1 var(--lc-ciclo) infinite both; }
  .lc__brilho--2 { animation: lc-brilho2 var(--lc-ciclo) infinite both; }
}
@media (prefers-reduced-motion: reduce) {
  .lc__sub { transition: none; }
}

@keyframes lc-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes lc-surge { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }

@keyframes lc-tudo { 0%, 88% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes lc-sombra {
  0% { opacity: 0; transform: scaleX(.3); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  7%, 100% { opacity: 1; transform: none; }
}
@keyframes lc-chao {
  0% { opacity: 0; stroke-dashoffset: 1; }
  1% { opacity: 1; stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.3, .6, .3, 1); }
  7%, 100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes lc-base {
  0%, 4% { opacity: 0; transform: scaleX(0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  10%, 100% { opacity: 1; transform: scaleX(1); }
}
/* os tijolinhos: cada um cai 9 px e assenta com um quiquezinho (curva que passa do ponto e volta);
   um começa a cada 1,75% (~32 ms) e cada queda dura 4,5% (~81 ms) */
@keyframes lc-t1 { 0%, 8% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 12.5%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t2 { 0%, 9.75% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 14.25%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t3 { 0%, 11.5% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t4 { 0%, 13.25% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 17.75%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t5 { 0%, 15% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 19.5%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t6 { 0%, 16.75% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 21.25%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t7 { 0%, 18.5% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 23%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t8 { 0%, 20.25% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 24.75%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t9 { 0%, 22% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 26.5%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t10 { 0%, 23.75% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 28.25%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t11 { 0%, 25.5% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t12 { 0%, 27.25% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 31.75%, 100% { opacity: 1; transform: none; } }
@keyframes lc-t13 { 0%, 29% { opacity: 0; transform: translateY(-9px); animation-timing-function: cubic-bezier(.3, 1.45, .55, 1); } 33.5%, 100% { opacity: 1; transform: none; } }
@keyframes lc-telhado {
  0%, 32% { opacity: 0; transform: translateY(-22px); animation-timing-function: cubic-bezier(.4, 0, .9, .6); }
  37% { opacity: 1; transform: translateY(1.8px); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  39.5%, 100% { opacity: 1; transform: none; }
}
@keyframes lc-chamine {
  0%, 38% { opacity: 0; transform: translateY(10px); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  42%, 100% { opacity: 1; transform: none; }
}
@keyframes lc-porta {
  0%, 40% { opacity: 0; transform: scaleY(0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  41% { opacity: 1; }
  44.5%, 100% { opacity: 1; transform: scaleY(1); }
}
@keyframes lc-janela {
  0%, 42.5% { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  46% { opacity: 1; transform: scale(1.16); animation-timing-function: ease-in-out; }
  48%, 100% { opacity: 1; transform: scale(1); }
}
/* pronta (48% = ~0,86 s): a fumacinha sobe da chaminé e os dois brilhos piscam */
@keyframes lc-fumaca1 {
  0%, 49% { opacity: 0; transform: translate(0, 0) scale(.4); }
  54% { opacity: .95; }
  71%, 100% { opacity: 0; transform: translate(5px, -17px) scale(1.25); }
}
@keyframes lc-fumaca2 {
  0%, 56% { opacity: 0; transform: translate(0, 0) scale(.4); }
  61% { opacity: .9; }
  78%, 100% { opacity: 0; transform: translate(8px, -19px) scale(1.3); }
}
@keyframes lc-fumaca3 {
  0%, 63% { opacity: 0; transform: translate(0, 0) scale(.4); }
  68% { opacity: .85; }
  85%, 100% { opacity: 0; transform: translate(4px, -20px) scale(1.2); }
}
/* os brilhos piscam quando a janela assenta e FICAM acesos um pouco: no caso comum a camada sai aos
   1,2 s (66,7%) com os dois ainda à vista */
@keyframes lc-brilho1 {
  0%, 48% { opacity: 0; transform: scale(0) rotate(0deg); }
  52% { opacity: 1; transform: scale(1.1) rotate(45deg); }
  61% { opacity: 1; transform: scale(.9) rotate(70deg); }
  71%, 100% { opacity: 0; transform: scale(.3) rotate(90deg); }
}
@keyframes lc-brilho2 {
  0%, 51% { opacity: 0; transform: scale(0) rotate(0deg); }
  55% { opacity: 1; transform: scale(1) rotate(45deg); }
  64% { opacity: 1; transform: scale(.85) rotate(70deg); }
  74%, 100% { opacity: 0; transform: scale(.3) rotate(90deg); }
}

/* =========================================================================
   [26/10/2026] v.1.1 — A CASINHA EM TODO O SITE
   -------------------------------------------------------------------------
   Pedido do Felipe: "coloque essa casinha de loading em todos os lugares do site
   que tem loading". Este bloco só ACRESCENTA: nenhuma regra acima mudou (o teste
   de 115 verificações e as capturas de 26/10 medem o que está lá). Quem monta o
   HTML agora é o assets/js/loading-casinha.js, carregado nas 7 páginas.
     .lc--sem-sub — sem a linha de baixo (o carregador de página só diz "Carregando…");
     .lc--pagina  — o carregador de página (#page-loader): no centro da janela, sem sticky;
     .lc-veu      — o véu dos envios (pré-análise e trabalhe-conosco): o marinho do logo
                    a 55% e um cartão branco com a GRANDE dentro, opaco, sem desfoque;
     .lc-mini     — a casinha de 1 em dentro de um botão ("Gerando o PDF…").
   ========================================================================= */
.lc--sem-sub .lc__sub { display: none; }

/* ---------- PÁGINA: o carregador de página (cena 160×120; 136×102 no celular) ---------- */
.lc--pagina { position: relative; top: auto; bottom: auto; }
.lc--pagina .lc__cena { width: 160px; height: 120px; }

/* ---------- VÉU: o envio da pré-análise e o da candidatura ---------- */
.lc-veu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1048;               /* o lugar do overlay de antes: abaixo do modal do Bootstrap (1050) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(13, 44, 100, .55);
  cursor: progress;
}
.lc-veu.d-none { display: none !important; }
.lc-veu__cartao {
  width: 100%;
  max-width: 420px;
  padding: 26px 20px 24px;
  border-radius: 18px;
  background: var(--surface-raised, #fff);
  box-shadow: 0 18px 48px rgba(13, 44, 100, .28);
  text-align: center;
}
.lc-veu .lc--grande { position: relative; top: auto; bottom: auto; margin: 0 auto; }
.lc-veu .lc--grande .lc__cena { width: 160px; height: 120px; }
/* o texto que já vem no cartão: é o que fica se o loading-casinha.js não carregar */
.lc-veu__reserva {
  margin: 0;
  font-family: var(--font-heading, Roboto, system-ui, sans-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--brand-navy, #0d2c64);
}

/* ---------- MINI: a casinha de 1 em dentro de um botão, no lugar do spinner ----------
   Do tamanho da letra do botão (1,25 × 1 em), alinhada como um ícone: não muda a altura nem a
   largura da fila de botões. Chão, parede e porta na cor do texto (currentColor); o telhado verde. */
.lc-mini {
  --lc-verde: var(--brand-green, #a7cd3a);
  --lc-verde-sombra: #8db02c;
  --lc-ciclo: 1.8s;
  display: inline-block;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: visible;
}
.lc-mini * { transform-box: fill-box; }
.lc-mini__chao { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lc-mini__parede { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transform-origin: 50% 100%; }
.lc-mini__porta { fill: currentColor; transform-origin: 50% 100%; }
.lc-mini__chamine { fill: var(--lc-verde-sombra); transform-origin: 50% 100%; }
.lc-mini__telhado { fill: var(--lc-verde); stroke: var(--lc-verde); stroke-width: 1.2; stroke-linejoin: round; }
.lc-mini__fumaca { fill: currentColor; opacity: 0; transform-origin: 50% 50%; }
/* o rótulo ao lado da mini: num botão estreito (o card no celular) corta com reticência, sem vazar */
.lc-mini__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- TAXAS: a caixa das taxas do /simulador/ enquanto o catálogo chega ----------
   A COMPACTA no centro e a altura dos chips guardada, para o FAQ não pular quando eles chegam. Medida
   no emulador com o catálogo de exemplo (5 bancos, aba casa/apartamento): 132 px numa fileira; no
   celular (390), duas fileiras, 216 px. */
#taxasBancos.taxas-bancos--carregando {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
}

@media (max-width: 575.98px) {
  .lc--pagina .lc__cena { width: 136px; height: 102px; }
  .lc-veu .lc--grande .lc__cena { width: 136px; height: 102px; }
  #taxasBancos.taxas-bancos--carregando { min-height: 216px; }
}

/* a obra da mini: o mesmo ciclo de 1,8 s da grande (chão, parede, porta, telhado, chaminé, fumacinha) */
@media (prefers-reduced-motion: no-preference) {
  .lc-veu { animation: lc-entra .14s ease-out both; }
  .lc-mini__tudo { animation: lc-tudo var(--lc-ciclo) linear infinite; }
  .lc-mini__chao { animation: lc-chao var(--lc-ciclo) infinite both; }
  .lc-mini__parede { animation: lc-mini-parede var(--lc-ciclo) infinite both; }
  .lc-mini__porta { animation: lc-mini-porta var(--lc-ciclo) infinite both; }
  .lc-mini__telhado { animation: lc-mini-telhado var(--lc-ciclo) infinite both; }
  .lc-mini__chamine { animation: lc-mini-chamine var(--lc-ciclo) infinite both; }
  .lc-mini__fumaca--1 { animation: lc-mini-fumaca1 var(--lc-ciclo) infinite both; }
  .lc-mini__fumaca--2 { animation: lc-mini-fumaca2 var(--lc-ciclo) infinite both; }
}
@keyframes lc-mini-parede {
  0%, 6% { opacity: 0; transform: scaleY(0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  8% { opacity: 1; }
  24%, 100% { opacity: 1; transform: scaleY(1); }
}
@keyframes lc-mini-porta {
  0%, 24% { opacity: 0; transform: scaleY(0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  25% { opacity: 1; }
  30%, 100% { opacity: 1; transform: scaleY(1); }
}
@keyframes lc-mini-telhado {
  0%, 30% { opacity: 0; transform: translateY(-5px); animation-timing-function: cubic-bezier(.4, 0, .9, .6); }
  36% { opacity: 1; transform: translateY(.5px); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  39.5%, 100% { opacity: 1; transform: none; }
}
@keyframes lc-mini-chamine {
  0%, 38% { opacity: 0; transform: translateY(2.5px); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  42%, 100% { opacity: 1; transform: none; }
}
@keyframes lc-mini-fumaca1 {
  0%, 49% { opacity: 0; transform: translate(0, 0) scale(.4); }
  54% { opacity: .55; }
  71%, 100% { opacity: 0; transform: translate(1.2px, -4px) scale(1.2); }
}
@keyframes lc-mini-fumaca2 {
  0%, 56% { opacity: 0; transform: translate(0, 0) scale(.4); }
  61% { opacity: .5; }
  78%, 100% { opacity: 0; transform: translate(2px, -4.5px) scale(1.3); }
}

/* =========================================================================
   AS TRÊS CÓPIAS DA CASINHA. Este arquivo é a FONTE. Há cópias EXATAS de regras dele (sem
   comentários e espaços) em:
     · assets/js/loading-casinha.js — CSS_CRITICO, CSS_OBRA e CSS_RESERVA (o carregador de página
       desenha sem esperar este arquivo, que vem sem bloquear);
     · assets/onde-atendemos.html — o <style> do mapa da home (outro documento, dentro do <iframe>).
   Mexeu numa regra daqui? Mexa nas cópias e bumpe os três ?v= (o .css e o .js nas 8 páginas, o mapa
   na home). O teste tests/carregador-pagina.puppeteer.js compara as três, regra a regra.
   ========================================================================= */