/* Guias (3.8): o estilo comum de todos os guias. Fotografia dos porquinhos no topo, um gráfico que se mexe com os
   números do guia, "Como fazer no Mealheiro" com os ecrãs da app (fotos/guias, de marketing/capturas-site.js guias)
   e tudo a entrar ao deslizar, como nas páginas Como começar e Privacidade. */
@font-face{font-family:"Cormorant Garamond"; font-style:normal; font-weight:500; font-display:swap; src:url(/vendor/cormorant-500.woff2) format("woff2")}
:root{
  --fundo:#F7F2E6; --cartao:#FFFDF7; --tinta:#1B3533; --suave:#6F6A5B; --linha:#ECE4D2;
  --campo:#F1EADA; --marca:#073D36; --sobre-marca:#FFFDF7; --gasto:#F2842C; --sobra:#D5ECE8; --ouro:#B8862E;
  --necess:#073D36; --desejo:#E0A04A; --poupa:#2A99A0; --verde-fundo:#05301E;
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --fundo:#0E1716; --cartao:#172321; --tinta:#F3EEE3; --suave:#AAB3AE; --linha:#27332F;
    --campo:#21302D; --marca:#45BDC3; --sobre-marca:#0E1716; --gasto:#F59A4E; --sobra:#153F3D; --ouro:#E2B567;
    --necess:#45BDC3; --desejo:#E8B865; --poupa:#7AD3B8;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
main{max-width:720px; margin:0 auto; padding:20px 16px 64px}
.migalhas{font-size:14px; color:var(--suave); margin:0 0 14px}
.migalhas a{color:var(--suave)}
h1{font-family:var(--serif); font-weight:500; font-size:40px; line-height:1.05; letter-spacing:-.01em; margin:0 0 12px}
h2{font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.12; margin:40px 0 10px}
h3{font-size:18px; margin:22px 0 6px}
.lead{font-size:18px; color:var(--suave); margin:0 0 8px}
.data{font-size:14px; color:var(--suave); margin:0 0 22px}
p,li{margin:0 0 12px}
ol,ul{padding-left:24px; margin:0 0 14px}
b{font-weight:600}
a{color:var(--marca)}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.caixa{background:var(--cartao); border:1px solid var(--linha); border-radius:18px; padding:16px 18px 6px; margin:16px 0}
.destaque{background:var(--sobra); border-radius:18px; padding:16px 18px 6px; margin:16px 0; border-left:4px solid var(--poupa)}
table{width:100%; border-collapse:collapse; margin:4px 0 14px; font-size:16px}
th,td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--linha); vertical-align:top}
td:last-child,th:last-child{text-align:right}
tr.total td{font-weight:700; border-bottom:none}
.cta{position:relative; overflow:hidden; border-radius:24px; padding:28px 22px; margin:40px 0 0; text-align:left; color:#FFFDF7;
  background:var(--verde-fundo) url(/fotos/porcos/faixa-dados.webp) right bottom / auto 100% no-repeat}
.cta p{margin:0 0 16px; max-width:400px; color:rgba(255,253,247,.86)}
.cta b{color:#FFFDF7}
.cta .botao{background:#FFFDF7; color:#0B3B2C}
.botao{display:inline-flex; align-items:center; gap:8px; background:var(--marca); color:var(--sobre-marca); text-decoration:none; font-weight:700;
  padding:12px 20px; border-radius:999px; transition:transform .2s, box-shadow .2s}
@media (hover:hover){ .botao:hover{transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(0,0,0,.4)} }
.rodape{font-size:14px; color:var(--suave); margin:30px 0 0; text-align:center}
.rodape a{color:var(--suave)}

/* barra de leitura e cabeçalho */
.progresso{position:fixed; left:0; top:0; height:3px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--ouro),var(--gasto)); z-index:30}
.topo{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--fundo) 86%, transparent);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--linha)}
.topo div{max-width:1100px; margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:12px; height:58px}
.marca{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--marca); font-weight:800; font-size:18px; letter-spacing:-.02em}
@media (prefers-color-scheme: dark){ .marca{color:var(--tinta)} }
.marca img{width:34px; height:34px}
.topo .guias-lnk{margin-left:auto; color:var(--tinta); text-decoration:none; font-weight:600; font-size:15px}
.topo .botao{padding:8px 15px; font-size:14px}

/* a fotografia do topo: os porquinhos à direita, com um zoom lento */
.capa{margin:0 0 20px; height:190px; border-radius:22px; overflow:hidden; background:#042E1E; position:relative}
.capa img{width:100%; height:100%; object-fit:cover; object-position:78% 60%; display:block; transform:scale(1.08); transition:transform 6s ease-out}
.capa.visto img, html:not(.anima) .capa img{transform:none}
.capa span{position:absolute; left:16px; bottom:14px; background:rgba(255,253,247,.94); color:#0B3B2C; font-size:13px; font-weight:700; border-radius:999px; padding:5px 12px}

/* os gráficos */
.grafico{background:var(--cartao); border:1px solid var(--linha); border-radius:22px; padding:20px 18px; margin:20px 0}
.grafico > b{display:block; font-size:15px; margin-bottom:12px}
.grafico .suave, .grafico small{color:var(--suave); font-size:14px}
.campo-linha{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px}
.campo-linha label{font-weight:600; font-size:15px}
.campo-linha input{font:inherit; width:140px; padding:9px 14px; border-radius:999px; border:1px solid var(--linha); background:var(--fundo); color:var(--tinta); font-variant-numeric:tabular-nums}
.escolha{display:inline-flex; gap:4px; background:var(--campo); border-radius:999px; padding:4px; margin:0 0 16px; flex-wrap:wrap}
.escolha button{border:0; background:none; font:inherit; font-size:14px; font-weight:700; color:var(--suave); padding:7px 14px; border-radius:999px; cursor:pointer}
.escolha button[aria-pressed=true]{background:var(--cartao); color:var(--tinta); box-shadow:0 1px 4px rgba(7,40,32,.12)}
/* 50/30/20: o círculo */
.rosca{display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center}
.rosca svg{width:150px; height:150px; transform:rotate(-90deg)}
.rosca circle{fill:none; stroke-width:18; transition:stroke-dasharray 1.1s cubic-bezier(.2,.8,.2,1), stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.legenda{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.legenda li{margin:0; display:grid; grid-template-columns:14px 1fr auto; gap:10px; align-items:center}
.legenda i{width:14px; height:14px; border-radius:4px}
.legenda b{font-variant-numeric:tabular-nums; font-size:18px}
/* barras horizontais (orçamento, casal, poupança) */
.barras{display:grid; gap:12px}
.barra-linha{display:grid; grid-template-columns:minmax(90px,auto) 1fr auto; gap:10px; align-items:center; font-size:15px}
.barra-linha .trilho{height:14px; border-radius:99px; background:var(--campo); overflow:hidden}
.barra-linha .trilho i{display:block; height:100%; width:0; border-radius:99px; background:var(--necess); transition:width 1s cubic-bezier(.2,.8,.2,1)}
.barra-linha b{font-variant-numeric:tabular-nums; text-align:right; min-width:70px}
.pilha{display:flex; height:46px; border-radius:14px; overflow:hidden; background:var(--campo); margin:6px 0 12px}
.pilha i{display:flex; align-items:center; justify-content:center; width:0; color:#fff; font-style:normal; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden;
  transition:width 1s cubic-bezier(.2,.8,.2,1)}
.pilha-leg{display:grid; gap:6px; list-style:none; padding:0; margin:0}
.pilha-leg li{margin:0; display:flex; gap:10px; align-items:center; font-size:15px}
.pilha-leg li i{width:12px; height:12px; border-radius:3px; flex:none}
.pilha-leg li b{margin-left:auto; font-variant-numeric:tabular-nums}
/* poupar para os filhos: a curva */
.curva svg{width:100%; max-width:560px; margin:0 auto; height:auto; display:block; overflow:visible}
.curva .eixo{stroke:var(--linha); stroke-width:1}
.curva .txt{fill:var(--suave); font-size:11px; font-family:inherit}
.curva .linha{fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.curva .sem{stroke:var(--suave); stroke-dasharray:5 5}
.curva .com{stroke:var(--poupa)}
.curva .area{fill:var(--poupa); opacity:.12}
.curva .fim-ponto{fill:var(--poupa)}
.curva-leg{display:flex; gap:16px; flex-wrap:wrap; margin:10px 0 0; font-size:14.5px}
.curva-leg span{display:inline-flex; align-items:center; gap:6px}
.curva-leg i{width:18px; height:3px; border-radius:2px; display:inline-block}
.curva-leg b{font-variant-numeric:tabular-nums}
/* lista com vistos (escolher uma app) */
.vistos{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.vistos li{margin:0; display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border:1px solid var(--linha); border-radius:14px; background:var(--fundo)}
.vistos svg{flex:none; width:26px; height:26px; border-radius:50%; background:var(--sobra); color:var(--poupa); padding:5px}
.vistos path{stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .5s ease-out}
.visto .vistos path, html:not(.anima) .vistos path{stroke-dashoffset:0}
.vistos b{display:block; font-size:15.5px} .vistos span{color:var(--suave); font-size:14.5px}

/* "Como fazer no Mealheiro": os ecrãs da app */
.como{display:grid; gap:18px; margin:18px 0 8px; padding:22px 18px; border-radius:24px; background:var(--campo); overflow:hidden}   /* os ecrãs entram inclinados: não podem alargar a página */
.como .tels{display:flex; gap:14px; justify-content:center; align-items:flex-start}
.como figure{margin:0; width:200px; flex:none; border-radius:30px; border:6px solid #0D1B19; background:#0D1B19; box-shadow:0 26px 44px -22px rgba(7,40,32,.55); cursor:zoom-in}
.como figure img{display:block; width:100%; height:auto; border-radius:24px}
.como figure + figure{margin-top:40px}
.como h2{margin-top:0}
.como p{margin:0 0 10px}
#lupa{position:fixed; inset:0; z-index:40; background:rgba(8,20,18,.86); display:grid; place-items:center; padding:20px; cursor:zoom-out}
#lupa[hidden]{display:none}
#lupa img{max-height:92vh; max-width:100%; border-radius:26px; box-shadow:0 30px 60px rgba(0,0,0,.5)}

/* a lista dos guias (página Guias) */
.lista-guias{list-style:none; padding:0; display:grid; gap:16px; margin:22px 0}
.lista-guias a{display:grid; grid-template-rows:150px auto; background:var(--cartao); border:1px solid var(--linha); border-radius:22px; overflow:hidden;
  text-decoration:none; color:var(--tinta); transition:transform .25s, box-shadow .25s}
@media (hover:hover){ .lista-guias a:hover{transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(7,40,32,.45)} .lista-guias a:hover img{transform:scale(1.05)} }
.lista-guias .foto{overflow:hidden; background:#042E1E}
.lista-guias img{width:100%; height:100%; object-fit:cover; object-position:78% 60%; display:block; transition:transform .6s ease-out}
.lista-guias .txt{padding:14px 18px 16px}
.lista-guias b{display:block; color:var(--marca); font-size:18px; line-height:1.3; margin-bottom:4px}
.lista-guias span{color:var(--suave); font-size:15px; display:block}
.lista-guias em{display:inline-block; font-style:normal; font-size:12.5px; font-weight:700; color:var(--ouro); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}

/* entrar ao deslizar */
html.anima .revela{opacity:0; transform:translateY(22px); transition:opacity .7s ease-out, transform .7s cubic-bezier(.2,.8,.2,1)}
html.anima .revela.visto{opacity:1; transform:none}
html.anima .como.revela figure{transform:rotate(4deg) translateY(26px); transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s}
html.anima .como.revela figure + figure{transform:rotate(-5deg) translateY(40px)}
html.anima .como.revela.visto figure{transform:none}
html.anima .como.revela.visto figure + figure{transform:rotate(-2deg)}

@media (min-width:760px){
  h1{font-size:52px}
  h2{font-size:34px}
  .capa{height:250px}
  .como{grid-template-columns:1fr auto; align-items:center; padding:28px}
  .como.dois{grid-template-columns:1fr}   /* com dois ecrãs, o texto em cima e os ecrãs lado a lado por baixo */
  .como figure{width:210px}
  .lista-guias{grid-template-columns:1fr 1fr}
  .cta{padding:40px 36px}
}
@media (max-width:420px){ .rosca{grid-template-columns:1fr; justify-items:center} .como figure{width:160px} .barra-linha{grid-template-columns:1fr auto} .barra-linha .trilho{grid-column:1 / -1; order:3} }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .capa img, .rosca circle, .barra-linha .trilho i, .pilha i, .lista-guias img{transition:none!important}
}

/* 3.10: a comparação lado a lado (alternativa ao Excel) e o caminho de uma despesa automática */
.comparar{font-size:15px; margin:0}
.comparar th{font-size:13px; color:var(--suave); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.comparar td, .comparar th{text-align:left; padding:10px 8px}
.comparar td:first-child{font-weight:600; width:32%}
.comparar td:last-child, .comparar th:last-child{text-align:left; color:var(--marca); font-weight:600}
.fluxo{list-style:none; padding:0; margin:0; display:grid; gap:0; position:relative}
.fluxo::before{content:''; position:absolute; left:17px; top:18px; bottom:18px; width:2px; background:var(--linha)}
.fluxo li{margin:0; position:relative; display:flex; gap:14px; align-items:flex-start; padding:8px 0}
.fluxo i{flex:none; width:36px; height:36px; border-radius:50%; background:var(--marca); color:var(--sobre-marca); display:grid; place-items:center;
  font-style:normal; font-weight:700; position:relative; z-index:1; box-shadow:0 0 0 4px var(--cartao)}
.fluxo b{display:block; font-size:16px} .fluxo span{color:var(--suave); font-size:14.5px}
html.anima .revela .fluxo li{opacity:0; transform:translateX(-12px); transition:opacity .5s ease-out, transform .5s ease-out}
html.anima .revela.visto .fluxo li{opacity:1; transform:none}
html.anima .revela.visto .fluxo li:nth-child(2){transition-delay:.15s} html.anima .revela.visto .fluxo li:nth-child(3){transition-delay:.3s}
html.anima .revela.visto .fluxo li:nth-child(4){transition-delay:.45s}
@media (max-width:520px){ .comparar td:first-child{width:auto} .comparar{font-size:14px} .comparar td, .comparar th{padding:8px 4px} }