/* =====================================================================
   Financeiro Fácil — página de apresentação
   Fundo creme do Vende Fácil, texto à esquerda e, à direita, três folhas soltas sobre a mesa (exemplo do painel).
   Sem Bootstrap e sem JavaScript. A mesa escala pelo tamanho da fonte (em) e vira uma coluna no celular.
   ===================================================================== */

:root {
  --creme: #ece8de;
  --papel: #fbfaf6;
  --linha: #e2dccd;
  --tinta: #17181c;
  --suave: #6a6559;
  --painel: #14161b;
  --laranja: #ea580c;
  --marca: #f46a13;
  --verde: #16a34a;
  --vermelho: #dc2626;
  --fonte: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--creme); color: var(--tinta); font-family: var(--fonte); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; border-radius: 8px; }

.ico { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.pagina { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* ------------------------------------------------------------ topo */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.1rem, 2.6vw, 1.9rem) 0; }
.topo-logo { display: inline-flex; border-radius: 8px; }
.logo { height: 34px; width: auto; }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: 3.1rem; padding: 0 1.75rem; border-radius: 999px; background: var(--tinta); color: #fff; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.005em; text-decoration: none; box-shadow: 0 10px 28px -18px rgba(70, 55, 20, 0.6); transition: background-color 0.15s, transform 0.1s; }
.botao:hover { background: #000; }
.botao:active { transform: scale(0.985); }
.botao .ico { width: 1.15rem; height: 1.15rem; stroke-width: 2; }
.botao-menor { height: 2.6rem; padding: 0 1.4rem; font-size: 0.875rem; }

/* ------------------------------------------------------------ apresentação */
.heroi { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(1.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 6vw, 5rem); }
.heroi-texto h1 { max-width: 13ch; font-size: clamp(2.5rem, 5.4vw, 4.4rem); font-weight: 800; line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; }
.heroi-texto p { max-width: 31rem; margin-top: 1.4rem; color: var(--suave); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.6; }
.heroi-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 2rem; }
.nota { color: var(--suave); font-size: 0.875rem; font-weight: 600; }

/* ------------------------------------------------------------ mesa com as três folhas */
.mesa { position: relative; width: 100%; max-width: 33rem; justify-self: center; aspect-ratio: 1 / 1.12; font-size: clamp(0.72rem, 1.45vw, 1rem); }
.folha { position: absolute; padding: 1.15em 1.25em; border: 1px solid var(--linha); border-radius: 1.5em; background: var(--papel); box-shadow: 0 2.2em 3em -1.9em rgba(70, 55, 20, 0.5), 0 0.2em 0.5em rgba(70, 55, 20, 0.06); animation: assenta 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.folha-titulo { color: var(--suave); font-size: 0.8em; font-weight: 700; }

.folha-mes { top: 0; left: 0; width: 64%; transform: rotate(-2deg); --giro: -2deg; }
.mes-saldo { display: flex; flex-direction: column; margin-top: 0.7em; }
.mes-saldo span { color: var(--suave); font-size: 0.8em; font-weight: 600; }
.mes-saldo b { font-size: 2em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.barra { height: 0.55em; margin-top: 0.85em; border-radius: 999px; background: #efe0d4; overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: inherit; background: var(--vermelho); }
.mes-linhas { display: grid; gap: 0.35em; margin-top: 0.95em; font-size: 0.85em; font-weight: 600; }
.mes-linhas div { display: flex; align-items: center; gap: 0.5em; }
.mes-linhas b { margin-left: auto; font-weight: 800; }
.ponto { width: 0.6em; height: 0.6em; border-radius: 50%; }
.ponto-verde { background: var(--verde); }
.ponto-vermelho { background: var(--vermelho); }

.folha-cartao { top: 37%; right: 0; width: 58%; transform: rotate(2.2deg); --giro: 2.2deg; background: var(--painel); border-color: #262932; color: #fff; animation-delay: 0.12s; }
.folha-cartao .folha-titulo { color: #9a9ca6; }
.cartao-valor { display: flex; flex-direction: column; margin-top: 0.7em; }
.cartao-valor span { color: #9a9ca6; font-size: 0.8em; font-weight: 600; }
.cartao-valor b { font-size: 1.7em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.barra-limite { background: #2b2e38; }
.barra-limite i { background: var(--marca); }
.cartao-rodape { display: flex; justify-content: space-between; gap: 0.5em; margin-top: 0.8em; color: #b9bcc6; font-size: 0.78em; font-weight: 600; }

.folha-ia { bottom: 0; left: 4%; width: 82%; transform: rotate(-1deg); --giro: -1deg; padding: 1em 1.1em; animation-delay: 0.24s; }
.ia-linha { display: flex; align-items: center; gap: 0.8em; }
.ia-selo { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fdeadd; color: var(--laranja); }
.ia-selo .ico { width: 1.35em; height: 1.35em; }
.ia-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ia-texto b { font-size: 0.95em; font-weight: 800; }
.ia-texto span { color: var(--suave); font-size: 0.76em; font-weight: 600; }
.ia-valor { margin-left: auto; font-size: 1em; font-weight: 800; white-space: nowrap; }
.ia-confirma { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin-top: 0.85em; padding-top: 0.8em; border-top: 1px dashed var(--linha); color: var(--suave); font-size: 0.76em; font-weight: 600; }
.ia-confirma i { padding: 0.45em 1.05em; border-radius: 999px; background: var(--tinta); color: #fff; font-size: 1.05em; font-style: normal; font-weight: 800; }

@keyframes assenta {
  from { opacity: 0; transform: translateY(1.2em) rotate(calc(var(--giro) * 2)); }
  to { opacity: 1; transform: translateY(0) rotate(var(--giro)); }
}

/* ------------------------------------------------------------ o que o sistema faz */
.recursos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--linha); }
.recursos .ico { color: var(--laranja); }
.recursos h2 { margin-top: 0.9rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.015em; }
.recursos p { margin-top: 0.4rem; color: var(--suave); font-size: 0.9375rem; line-height: 1.55; }

/* ------------------------------------------------------------ rodapé */
.rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: auto; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--linha); color: var(--suave); font-size: 0.875rem; font-weight: 600; }
.rodape a { color: var(--tinta); font-weight: 700; text-underline-offset: 3px; }

/* ------------------------------------------------------------ telas menores */
@media (max-width: 62rem) {
  .recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 52rem) {
  .heroi { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 1rem; }
  .heroi-texto h1 { max-width: none; }
  .mesa { font-size: 1rem; max-width: 26rem; justify-self: start; }
}

/* no celular as folhas deixam de se sobrepor e viram uma pilha */
@media (max-width: 34rem) {
  .mesa { display: flex; flex-direction: column; gap: 0.9rem; aspect-ratio: auto; max-width: none; justify-self: stretch; font-size: 0.95rem; }
  .folha { position: relative; inset: auto; width: 100%; transform: none; animation-name: assentaPilha; }
  .heroi-acao .botao { width: 100%; }
  .recursos { grid-template-columns: minmax(0, 1fr); }
}

@keyframes assentaPilha {
  from { opacity: 0; transform: translateY(0.8em); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .folha { animation: none; }
  .botao { transition: none; }
}

/* ------------------------------------------------------------ planos */
.planos { scroll-margin-top: 1rem; padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--linha); }
.planos-cabeca h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; }
.planos-cabeca p { max-width: 36rem; margin-top: 0.5rem; color: var(--suave); font-size: 1rem; line-height: 1.6; }
.planos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 19rem)); gap: 1rem; margin-top: 1.75rem; }
.plano { padding: 1.5rem 1.5rem 1.6rem; border: 1px solid var(--linha); border-radius: 1.5rem; background: var(--papel); box-shadow: 0 1.6rem 2.4rem -1.9rem rgba(70, 55, 20, 0.5); }
.plano h3 { margin: 0; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.015em; }
.plano-preco { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.6rem; }
.plano-preco b { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.plano-preco span { color: var(--suave); font-size: 0.9375rem; font-weight: 600; }
.plano ul { display: grid; gap: 0.6rem; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px dashed var(--linha); list-style: none; }
.plano li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.plano li .ico { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: var(--verde); stroke-width: 2.2; }
.planos-nota { margin-top: 1.25rem; color: var(--suave); font-size: 0.9375rem; font-weight: 600; }
.planos-nota a { color: var(--tinta); font-weight: 700; text-underline-offset: 3px; }

/* ------------------------------------------------------------ chamadas para o cadastro */
.heroi-acao { margin-top: 2rem; }
.botao-claro { background: transparent; color: var(--tinta); box-shadow: none; border: 1.5px solid #cfc8b6; }
.botao-claro:hover { background: rgba(23, 24, 28, 0.06); }
.heroi-texto .nota { margin-top: 0.9rem; }
.botao-plano { width: 100%; height: 2.9rem; margin-top: 1.4rem; font-size: 0.875rem; }