/* ═══════════════════════════════════════════════════════════════════════
   PRODUTIVIDADE · LumiNah
   Folha compartilhada das calculadoras da série Me Economiza.

   Por que existe separada do resto do site: estas páginas atendem outra
   pessoa. Quem chega aqui vem do Google com uma conta prática na cabeça,
   muitas vezes numa hora apertada da vida. O roxo do Portal Vibracional
   fazia essa pessoa achar que tinha caído num lugar esotérico e ir embora
   antes de ler a primeira linha.

   Daí a inversão: fundo claro, tinta grafite, uma cor forte só. Lê bem no
   celular no meio da rua, com sol batendo, que é onde a conta acontece.

   O verde é a cor da casa aqui. O vermelho aparece uma vez só, no número
   que revela prejuízo, porque verde ali diria "está tudo bem" e mentiria.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --papel:#f7f7f5;
  --papel-2:#ffffff;
  --tinta:#1c1c1e;
  --tinta-suave:#5c5c63;
  --linha:#e2e2dd;
  --linha-forte:#cfcfc8;
  --verde:#0f7b5a;
  --verde-escuro:#0b6349;
  --verde-claro:#eaf5f0;
  /* Borda dos cards. Verde de dinheiro, forte o bastante pra se ver na
     hora e leve o bastante pra não brigar com o texto de dentro. */
  --verde-borda:#7fbda2;
  --alerta:#b3261e;
  --alerta-claro:#fdeeec;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--sans);line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 680px é largura de leitura: linha confortável pros textos das contas.
   O hub não tem texto longo, tem grade, então ele usa a versão larga pra
   os cards não ficarem espremidos no meio da tela vazia. */
.envolve{max-width:680px;margin:0 auto;padding:0 20px 72px;}
.envolve.largo{max-width:1060px;}
.envolve.largo .abertura-hub,
.envolve.largo .porque p{max-width:640px;}

/* ── Faixa de categoria ───────────────────────────────────────────────── */
.faixa{
  border-bottom:1px solid var(--linha);background:var(--papel-2);
  margin-bottom:0;
}
.faixa-dentro{
  max-width:680px;margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faixa-marca{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--tinta);text-decoration:none;font-weight:700;font-size:.92rem;
}
.faixa-marca svg{color:var(--verde);flex-shrink:0;}
.faixa-categoria{
  font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-suave);font-weight:700;
}

/* ── Voltar ───────────────────────────────────────────────────────────── */
.voltar{
  display:inline-flex;align-items:center;gap:7px;margin:22px 0 0;
  color:var(--tinta-suave);text-decoration:none;font-size:.87rem;font-weight:600;
  padding:7px 0;
}
.voltar:hover{color:var(--verde);}
.voltar:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:4px;}

/* ── Topo ─────────────────────────────────────────────────────────────── */
.topo{padding:22px 0 4px;}
.selo{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;border-radius:6px;
  background:var(--verde-claro);color:var(--verde-escuro);
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
}
h1{
  font-family:var(--serif);
  font-size:clamp(1.9rem,6.6vw,2.85rem);
  line-height:1.14;margin:18px 0 0;font-weight:700;letter-spacing:-.015em;
}
.abertura{color:var(--tinta-suave);font-size:1.03rem;margin:14px 0 0;max-width:540px;}

/* ── Campos ───────────────────────────────────────────────────────────── */
.campos{
  margin-top:28px;padding:22px 20px;
  border:1px solid var(--linha);border-radius:14px;background:var(--papel-2);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.045);
}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo.largo{grid-column:1/-1;}
.campo label{font-size:.85rem;color:var(--tinta);font-weight:600;}
.campo .dica{font-size:.79rem;color:var(--tinta-suave);font-weight:400;margin:0;}
.entrada{position:relative;display:flex;align-items:center;}
.entrada .moeda{position:absolute;left:13px;color:var(--tinta-suave);font-size:.95rem;pointer-events:none;font-weight:600;}
.entrada input{
  width:100%;padding:13px 13px 13px 38px;
  border:1px solid var(--linha-forte);border-radius:10px;
  background:var(--papel-2);color:var(--tinta);
  font:600 1.1rem/1 var(--sans);
  transition:border-color .15s,box-shadow .15s;
}
.entrada.sem-moeda input{padding-left:13px;}
.entrada input::placeholder{color:#a8a8a2;font-weight:400;}
.entrada input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(15,123,90,.14);}
.entrada input::-webkit-outer-spin-button,
.entrada input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.entrada input[type=number]{-moz-appearance:textfield;}

.botao{
  width:100%;margin-top:20px;padding:15px 24px;
  border:none;border-radius:11px;cursor:pointer;
  background:var(--verde);color:#fff;
  font:700 1.02rem/1 var(--sans);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:background .15s,transform .12s;
}
.botao:hover{background:var(--verde-escuro);}
.botao:active{transform:translateY(1px);}
.botao:focus-visible{outline:3px solid rgba(15,123,90,.4);outline-offset:2px;}

.recado{margin-top:12px;font-size:.87rem;color:var(--alerta);min-height:1px;}

/* ── Revelação ────────────────────────────────────────────────────────── */
.revelacao{
  display:none;margin-top:24px;padding:30px 20px 26px;
  border:1px solid var(--linha);border-radius:14px;background:var(--papel-2);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.055);
  text-align:center;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease;
}
.revelacao.montado{display:block;}
.revelacao.aparece{opacity:1;transform:none;}

.rotulo{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-suave);font-weight:800;margin:0;
}
.numerao{
  font-family:var(--serif);
  font-size:clamp(2.5rem,12.5vw,4.3rem);
  line-height:1.06;font-weight:700;margin:9px 0 0;padding:0 2px;
  letter-spacing:-.02em;color:var(--alerta);
}
.numerao.tranquilo{color:var(--verde);}
.numerao.medio{font-size:clamp(2.05rem,10vw,3.6rem);}
.numerao.longo{font-size:clamp(1.7rem,8.2vw,3rem);}
.sub-numero{color:var(--tinta-suave);font-size:.96rem;margin:7px 0 0;}

.multiplo{
  margin:22px auto 0;padding:16px 18px;max-width:330px;
  border:1px solid var(--linha);border-radius:12px;background:var(--papel);
}
.multiplo .acima{
  font-size:.75rem;letter-spacing:.09em;color:var(--tinta-suave);
  text-transform:uppercase;font-weight:800;margin:0;
}
.multiplo .vezes{
  font-family:var(--serif);font-weight:700;line-height:1;
  font-size:clamp(1.9rem,8.5vw,2.7rem);margin:7px 0 0;color:var(--tinta);
  letter-spacing:-.02em;
}
.multiplo .abaixo{margin:7px 0 0;font-size:.9rem;color:var(--tinta);}

/* Resultado em texto (um prazo, uma frase) em vez de um valor em reais.
   Precisa de fonte menor: "1 ano e 3 meses" tem mais que o dobro das letras
   de "R$ 240,00" e estouraria a largura no tamanho do número. */
.numerao.frase{font-size:clamp(1.6rem,7.4vw,2.5rem);line-height:1.18;letter-spacing:-.01em;}

/* Três quadradinhos de apoio embaixo do número principal. */
.grade-resultado{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px;margin:22px auto 0;max-width:460px;
}
.grade-resultado div{
  border:1px solid var(--linha);border-radius:11px;padding:14px 12px;
  background:var(--papel);text-align:center;
}
.grade-resultado strong{
  display:block;font-family:var(--serif);font-size:1.24rem;
  color:var(--tinta);margin-bottom:3px;font-weight:700;letter-spacing:-.01em;
}
.grade-resultado span{font-size:.8rem;color:var(--tinta-suave);line-height:1.45;display:block;}

/* Grupos de perguntas, pra formulário com mais de três campos. */
.grupo{margin-top:22px;padding-top:18px;border-top:1px solid var(--linha);}
.grupo:first-of-type{margin-top:0;padding-top:0;border-top:none;}
.grupo h2{font-family:var(--serif);font-size:1.06rem;margin:0 0 4px;font-weight:700;}
.grupo .dica-grupo{font-size:.86rem;color:var(--tinta-suave);margin:0 0 13px;line-height:1.55;}

/* Caixa de recado ao lado da conta, com barra na lateral. */
.aviso{
  margin-top:20px;padding:15px 17px;border-radius:11px;
  background:var(--verde-claro);border-left:3px solid var(--verde);
  font-size:.92rem;line-height:1.6;color:var(--tinta);
}
.aviso p{margin:0;}
.aviso.atencao{background:var(--alerta-claro);border-left-color:var(--alerta);}

.barra{margin:24px auto 0;max-width:400px;text-align:left;}
.barra-linha{margin-bottom:13px;}
.barra-topo{display:flex;justify-content:space-between;font-size:.81rem;color:var(--tinta-suave);margin-bottom:5px;}
.barra-topo b{color:var(--tinta);font-weight:700;}
.trilho{height:10px;border-radius:6px;background:#ebebe6;overflow:hidden;}
.preenche{height:100%;border-radius:6px;width:0;transition:width .85s cubic-bezier(.2,.8,.25,1);}
.preenche.vista{background:var(--verde);}
.preenche.parcelado{background:var(--alerta);}

.explica{
  margin:24px auto 0;max-width:500px;
  color:var(--tinta);font-size:.99rem;text-align:left;
  padding-top:20px;border-top:1px solid var(--linha);
}
.explica p{margin:0 0 12px;}
.explica p:last-child{margin-bottom:0;}
.explica strong{color:var(--alerta);font-weight:700;}
.explica.calmo strong{color:var(--verde-escuro);}

.compartilha{
  margin-top:22px;padding:12px 22px;
  border:1px solid var(--linha-forte);border-radius:10px;
  background:var(--papel-2);color:var(--tinta);
  font:600 .92rem/1 var(--sans);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:border-color .15s,background .15s;
}
.compartilha:hover{border-color:var(--verde);color:var(--verde-escuro);background:var(--verde-claro);}
.compartilha:focus-visible{outline:2px solid var(--verde);outline-offset:2px;}

/* ── Texto de apoio ───────────────────────────────────────────────────── */
.secao{margin-top:44px;}
.secao h2{font-family:var(--serif);font-size:1.36rem;margin:0 0 12px;font-weight:700;letter-spacing:-.01em;}
.secao p{margin:0 0 14px;color:var(--tinta-suave);}
.secao p strong{color:var(--tinta);font-weight:600;}

/* ── Lista de outras contas ───────────────────────────────────────────── */
.outras{margin-top:44px;padding-top:26px;border-top:1px solid var(--linha);}
.outras h2{font-family:var(--serif);font-size:1.2rem;margin:0 0 14px;font-weight:700;}
/* Cards lado a lado: duas colunas já num celular, mais colunas conforme a
   tela cresce.
   ARMADILHA: a primeira versão usava minmax(min(100%,150px),1fr). O min()
   dentro do minmax de um repeat(auto-fit) é recusado pelo navegador, e
   quando a declaração é inválida ele descarta a linha inteira: a grade
   virava uma coluna só e parecia que o CSS nem tinha chegado. Medida fixa
   resolve e é aceita em todo lugar. */
.lista{
  display:grid;gap:11px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
/* A partir do tablet a grade trava em três colunas em vez de ir enfiando
   quantas couberem. Com seis contas isso dá duas fileiras de três, e o card
   ganha largura pra respirar em vez de virar uma tirinha. */
@media (min-width:660px){
  .lista{grid-template-columns:repeat(3,1fr);gap:16px;}
  .conta{padding:24px 22px;}
  .conta-icone{width:38px;height:38px;border-radius:10px;margin-bottom:14px;}
  .conta h3{font-size:1.18rem;}
  .conta p{font-size:.94rem;}
  .conta .puxa{font-size:.9rem;padding-top:15px;}
}
.conta{
  display:flex;flex-direction:column;padding:17px 18px;
  text-decoration:none;color:var(--tinta);
  border:1px solid var(--verde-borda);border-radius:12px;background:var(--papel-2);
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
.conta:hover{border-color:var(--verde);box-shadow:0 4px 16px rgba(15,123,90,.16);transform:translateY(-1px);}
.conta:focus-visible{outline:2px solid var(--verde);outline-offset:3px;}
/* No card estreito o ícone sobe pra cima do título. Lado a lado eles
   brigariam por largura e o título quebraria em quatro linhas. */
.conta-topo{display:block;margin-bottom:8px;}
.conta-icone{
  flex-shrink:0;width:32px;height:32px;border-radius:8px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--verde-claro);color:var(--verde);
}
.conta h3{font-family:var(--serif);font-size:1rem;margin:0;font-weight:700;line-height:1.28;}
.conta p{margin:0;color:var(--tinta-suave);font-size:.85rem;line-height:1.5;}
/* Empurra o "Fazer a conta" pro rodapé do card, pra todos ficarem alinhados
   na mesma altura mesmo com descrições de tamanhos diferentes. */
.conta .puxa{
  display:inline-block;margin-top:auto;padding-top:11px;
  color:var(--verde);font-size:.83rem;font-weight:700;
}
.conta .etiqueta{margin-top:auto;}
.conta.breve{opacity:.66;}
.conta.breve .conta-icone{background:#efefea;color:var(--tinta-suave);}
.etiqueta{
  display:inline-block;margin-top:9px;padding:2px 10px;border-radius:5px;
  background:#efefea;color:var(--tinta-suave);font-size:.74rem;font-weight:700;
}

.rodape{
  margin-top:44px;padding-top:20px;border-top:1px solid var(--linha);
  color:var(--tinta-suave);font-size:.85rem;
}
.rodape a{color:var(--verde);text-decoration:none;font-weight:600;}
.rodape a:hover{text-decoration:underline;}

@media (max-width:560px){
  .grade{grid-template-columns:1fr;}
  .campos{padding:18px 16px;}
  .revelacao{padding:26px 16px 24px;}
}
@media (prefers-reduced-motion:reduce){
  .revelacao,.preenche,.botao,.conta{transition:none;}
}