/* Landing do Verdegest.
   Ideia visual: o talão de notas do balcão — via branca, via amarela e via rosa — em cima do verde
   de sombrite do viveiro. Uma família de letra só (Bricolage Grotesque, variável), servida daqui mesmo. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fontes/bricolage-grotesque-latin.woff2?v=4083127a") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --garrafa: #12402f;
  --garrafa-fundo: #0c3124;
  --folha: #2f8f5b;
  --folha-clara: #e9f3ec;
  --broto: #8fe0a8;
  --broto-novo: #4fbf7c;
  --papel: #fcfdf9;
  --via-amarela: #f4e184;
  --via-rosa: #f1b1c1;
  --carimbo: #3a3fb0;
  --tinta: #16241d;
  --tinta-suave: #4c5f55;
  --linha: #d6e0d8;
  --zap: #25d366;
  --zap-texto: #082a1a;

  --letra: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --margem: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

h1, h2, p, dl, dd, figure { margin: 0; }

.largura { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--margem); }

:focus-visible { outline: 3px solid var(--via-amarela); outline-offset: 3px; border-radius: 4px; }

/* ---------- Marca ---------- */
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--papel); text-decoration: none;
  font-size: 1.5rem; font-weight: 700; font-stretch: 88%; letter-spacing: -.02em;
}
/* O símbolo é um V feito de duas folhas: V de Verdegest, em forma de broto. A cor do broto é a de "verde" no nome. */
.broto-esq { fill: var(--broto); }
.broto-dir { fill: var(--broto-novo); }
.marca-verde { color: var(--broto); }

/* ---------- Botão do WhatsApp (mesmo nome em todo lugar: "Falar no WhatsApp") ---------- */
.zap {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--zap); color: var(--zap-texto);
  font-weight: 700; font-size: 1.125rem; text-decoration: none;
  box-shadow: 0 3px 0 #17a04b;
  transition: transform .12s ease, box-shadow .12s ease;
}
.zap:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #17a04b; }
.zap:active { transform: translateY(2px); box-shadow: 0 1px 0 #17a04b; }
.zap-pequeno { padding: 10px 18px; font-size: 1rem; }
.zap-icone { flex-shrink: 0; }

/* ---------- Topo ---------- */
.topo { background: var(--garrafa); padding-block: 22px; }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------- Abertura ---------- */
.abre { background: var(--garrafa); color: var(--papel); padding-block: clamp(28px, 5vw, 64px) clamp(48px, 7vw, 96px); }
.abre-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  font-weight: 700; font-stretch: 84%;
  letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 13ch;
}
.abre-apoio {
  margin-top: 26px;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  max-width: 34em;
  color: #d5e6dc;
}
.abre-texto .zap { margin-top: 34px; }

/* ---------- O talão: nota branca por cima das vias amarela e rosa ---------- */
/* As vias coloridas se medem pela nota (talao-pilha), nunca pela área do botão logo abaixo:
   assim o botão não encosta nelas quando o texto quebra em duas linhas no celular. */
.talao-pilha { position: relative; }
.via {
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(12, 49, 36, .25), 0 18px 40px -18px rgba(5, 25, 17, .55);
}
.via-amarela, .via-rosa { position: absolute; inset: 0; }
.via-amarela { background: var(--via-amarela); transform: rotate(-3.2deg) translate(-10px, 8px); }
.via-rosa { background: var(--via-rosa); transform: rotate(3.6deg) translate(14px, 14px); }

.nota {
  position: relative;
  background: var(--papel); color: var(--tinta);
  padding: clamp(20px, 3vw, 30px);
  font-size: .98rem; line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.nota-cabeca {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; border-bottom: 2px solid var(--tinta);
}
.nota-empresa, #nota-titulo { font-weight: 700; font-size: 1.12rem; font-stretch: 90%; }
.nota-numero { text-align: right; flex-shrink: 0; }
.nota-fina { font-size: .84rem; color: var(--tinta-suave); }
.nota-cliente { margin-top: 14px; display: flex; gap: 10px; align-items: baseline; font-weight: 600; }

.nota-itens { width: 100%; border-collapse: collapse; margin-top: 12px; }
.nota-itens th, .nota-itens td { padding: 8px 0; text-align: left; border-bottom: 1px solid var(--linha); }
.nota-itens thead th { font-size: .84rem; font-weight: 500; color: var(--tinta-suave); }
.nota-itens .num { text-align: right; padding-left: 14px; white-space: nowrap; }
.nota-itens tfoot th, .nota-itens tfoot td { border-bottom: 0; padding-top: 12px; font-weight: 700; font-size: 1.12rem; }

.nota-situacao {
  margin-top: 8px; padding: 10px 12px;
  background: var(--folha-clara); border-radius: 4px;
  font-weight: 600;
}
.nota[data-recebida] .nota-situacao { background: #e8e9fa; color: #23267a; }

.carimbo {
  position: absolute; left: 47%; bottom: 20%;
  padding: 8px 18px 9px;
  border: 3px solid var(--carimbo); border-radius: 8px;
  color: var(--carimbo);
  text-align: center; line-height: 1.15;
  transform: translateX(-50%) rotate(-11deg);
  mix-blend-mode: multiply; opacity: .88;
  background: rgba(58, 63, 176, .04);
}
.carimbo > span { display: block; font-size: 1.7rem; font-weight: 800; font-stretch: 78%; letter-spacing: .06em; text-transform: uppercase; }
.carimbo small { display: block; font-size: .8rem; font-weight: 600; }
.carimbo[hidden] { display: none; }

.talao-acao {
  position: relative;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 44px;
  color: #a9c7b7; font-size: .95rem;
}
.talao-acao p { flex: 1 1 200px; }
.botao-claro {
  font: inherit; font-weight: 700; font-size: 1rem;
  padding: 11px 18px;
  border: 2px solid var(--tinta); border-radius: 999px;
  background: var(--papel); color: var(--tinta);
  cursor: pointer;
}
.botao-claro:hover { background: var(--tinta); color: var(--papel); }
.botao-link { display: inline-block; margin-top: 34px; text-decoration: none; }
.nao-achou { background: var(--garrafa); }
.nao-achou .abre { min-height: 70vh; }

/* ---------- Blocos de texto ---------- */
.bloco { padding-block: clamp(64px, 9vw, 120px); }
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.08;
  font-weight: 700; font-stretch: 86%;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 18ch;
  color: var(--garrafa);
}
.bloco-abre { margin-top: 20px; max-width: 38em; color: var(--tinta-suave); }
.bloco-fecha { margin-top: 40px; max-width: 38em; font-weight: 600; }

/* Lista de tarefas: duas colunas, uma linha fina entre os itens (é uma lista, não uma grade de cartões) */
.tarefas {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 6vw, 88px);
}
.tarefas > div { padding-block: 22px; border-top: 1px solid var(--linha); }
.tarefas dt { font-size: 1.3rem; font-weight: 700; font-stretch: 90%; line-height: 1.2; letter-spacing: -.01em; }
.tarefas dd { margin-top: 6px; color: var(--tinta-suave); max-width: 34em; }

.bloco-folha { background: var(--folha-clara); }
.historia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.historia-texto { display: grid; gap: 18px; font-size: 1.2rem; max-width: 34em; }

/* ---------- Vitrine: exemplos das outras telas, em folhas de papel para rolar de lado ---------- */
.vitrine-topo {
  display: flex; justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}
.vitrine-abas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 14px; margin: 0 -4px -10px; }
.vitrine-abas::-webkit-scrollbar { display: none; }
.vitrine-abas a {
  flex-shrink: 0;
  padding: 8px 15px; border-radius: 999px;
  color: var(--garrafa); text-decoration: none; font-weight: 600; font-size: 1rem;
}
.vitrine-abas a:hover { background: rgba(252, 253, 249, .6); }
/* A aba dos exemplos que estão na tela fica branca, como as folhas logo abaixo */
.vitrine-abas a[aria-current] { background: var(--papel); box-shadow: 0 1px 0 rgba(12, 49, 36, .18), 0 6px 14px -8px rgba(5, 25, 17, .4); }

/* Uma folha por vez, no meio da tela; as vizinhas aparecem apagadas dos lados */
.vitrine-moldura { position: relative; --exemplo-larg: min(460px, 84vw); }
.vitrine-seta {
  position: absolute; z-index: 2; top: calc(50% - 60px);
  display: grid; place-items: center; width: 50px; height: 50px;
  border: 2px solid var(--garrafa); border-radius: 50%;
  background: var(--folha-clara); color: var(--garrafa); cursor: pointer;
}
.vitrine-seta-antes { left: calc(50% - var(--exemplo-larg) / 2 - 75px); }
.vitrine-seta-depois { right: calc(50% - var(--exemplo-larg) / 2 - 75px); }
.vitrine-seta:hover:not(:disabled) { background: var(--garrafa); color: var(--papel); }
.vitrine-seta:disabled { opacity: 0; pointer-events: none; }

.vitrine {
  display: flex; gap: clamp(16px, 7vw, 100px);   /* no computador, o vão entre as folhas abriga as setas */
  margin-top: 22px;
  padding: 10px calc(50% - var(--exemplo-larg) / 2) 34px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vitrine::-webkit-scrollbar { display: none; }
.vitrine:focus-visible { outline-offset: -4px; }

.exemplo {
  flex: 0 0 var(--exemplo-larg);
  display: flex; flex-direction: column; gap: 16px;
  scroll-snap-align: center; scroll-snap-stop: always;
}
/* Só com o JavaScript ligado (classe vitrine-viva) as folhas fora do centro ficam apagadas e clicáveis para vir ao centro */
.vitrine-viva .exemplo:not([data-atual]) { opacity: .42; transform: scale(.94); cursor: pointer; }
.vitrine-viva .exemplo:not([data-atual]) .folha { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .vitrine-viva .exemplo { transition: opacity .3s ease, transform .3s ease; }
}
.exemplo-legenda { color: var(--tinta-suave); font-size: 1rem; line-height: 1.5; }

.folha {
  position: relative; flex: 1;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(18px, 2.6vw, 26px);
  background: var(--papel); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(12, 49, 36, .18), 0 16px 32px -20px rgba(5, 25, 17, .45);
  font-size: .98rem; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.folha-cabeca {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 2px solid var(--tinta);
}
.folha-titulo { font-weight: 700; font-size: 1.12rem; font-stretch: 90%; }
.folha .nota-itens { margin-top: -6px; }
.folha .num { text-align: right; white-space: nowrap; }
.folha .botao-claro { align-self: flex-start; margin-top: auto; }

/* Opções de pagamento do orçamento */
.opcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opcoes li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  padding: 10px 12px; border: 1.5px solid var(--linha); border-radius: 6px;
}
.opcoes b { grid-column: 1 / -1; font-size: .84rem; font-weight: 600; color: var(--tinta-suave); }
.folha[data-virou] #orc-opcao-1 { opacity: .45; }
.folha[data-virou] #orc-opcao-2 { border-color: var(--carimbo); background: #e8e9fa; }
.carimbo-canto { left: auto; right: 22px; bottom: 26px; transform: rotate(-9deg); }
.carimbo-canto > span { font-size: 1.25rem; }

/* Listas de lançamentos (A Receber, Folha, Retiradas) */
.linhas { list-style: none; margin: -6px 0 0; padding: 0; }
.linhas li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
}
.linhas li[hidden] { display: none; }
.linhas li:last-child { border-bottom: 0; }
.linhas b { display: block; font-weight: 600; line-height: 1.25; }
.linhas small { display: block; font-size: .84rem; color: var(--tinta-suave); }
.linhas .num { display: grid; justify-items: end; gap: 3px; flex-shrink: 0; }
.linhas-soltas { margin-top: -4px; }

.selo {
  font-style: normal; font-size: .76rem; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 4px;
}
.selo-aberto { background: #f9eeb0; color: #5c4a05; }
.selo-vencida { background: #f8d2dc; color: #7a1f35; }
.selo-parcial { background: var(--folha-clara); color: #1c5a3a; }
.selo-recebido { background: #e8e9fa; color: #23267a; }

.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros button {
  font: inherit; font-size: .88rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid var(--linha); background: transparent; color: var(--tinta); cursor: pointer;
}
.filtros button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.folha-total { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 1.08rem; }
.folha-rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha); }
.folha-total-fino { margin-top: -10px; font-weight: 500; font-size: .95rem; color: var(--tinta-suave); }

/* Retiradas: a divisão entre três sócios (50 / 30 / 20), com a cor de cada um repetida ao lado do nome */
.divisao { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; }
.divisao-a { flex: 50; background: var(--garrafa); }
.divisao-b { flex: 30; background: var(--folha); }
.divisao-c { flex: 20; background: var(--broto); }
.cor { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; }
.cor-a { background: var(--garrafa); }
.cor-b { background: var(--folha); }
.cor-c { background: var(--broto); }

/* Financiamentos: uma barra de parcelas pagas por contrato */
.contrato { display: grid; gap: 7px; }
.contrato + .contrato { padding-top: 14px; border-top: 1px solid var(--linha); }
.contrato > p:first-child { display: flex; justify-content: space-between; gap: 12px; }
.barra { height: 10px; border-radius: 999px; background: var(--folha-clara); overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 999px; background: var(--folha); }
.barra-14-48 { width: 29.2%; }
.barra-31-60 { width: 51.7%; }

/* Recibo */
.recibo-valor { font-size: 2.1rem; font-weight: 700; font-stretch: 84%; letter-spacing: -.02em; line-height: 1.1; }
.recibo-assinatura {
  margin-top: auto; padding-top: 8px; border-top: 1.5px solid var(--tinta);
  font-size: .84rem; color: var(--tinta-suave); text-align: center;
}
.folha-recibo { gap: 12px; min-height: 300px; }

/* Relatórios: gráfico de barras desenhado na escala (0 a 75 mil) */
.grafico { width: 100%; height: auto; }
.grafico-grade path { stroke: var(--linha); stroke-width: 1; fill: none; }
.grafico-eixo text, .grafico-meses text { font-family: var(--letra); font-size: 11px; fill: var(--tinta-suave); }
.grafico-eixo text { text-anchor: end; }
.grafico-meses text { text-anchor: middle; }
.grafico-vendas rect { fill: var(--garrafa); }
.grafico-compras rect { fill: var(--via-rosa); }
.legenda-grafico { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--tinta-suave); }
.legenda-grafico span { width: 12px; height: 12px; border-radius: 3px; }
.legenda-grafico .cor-vendas { background: var(--garrafa); }
.legenda-grafico .cor-compras { background: var(--via-rosa); margin-left: 12px; }

/* ---------- Chamada final e rodapé ---------- */
.chamada { background: var(--garrafa); color: var(--papel); padding-block: clamp(56px, 8vw, 96px); }
.chamada-linha { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.chamada h2 { color: var(--papel); max-width: 16ch; }

.rodape { background: var(--garrafa-fundo); color: #a9c7b7; padding-block: 28px; font-size: .95rem; }
.rodape-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.marca-rodape { font-size: 1.15rem; gap: 8px; }
.rodape-email { color: var(--papel); font-weight: 600; text-decoration-color: var(--broto); text-underline-offset: 4px; }
.rodape-email:hover { color: var(--broto); }

/* ---------- Um único movimento na chegada: as vias se abrem atrás da nota ---------- */
@media (prefers-reduced-motion: no-preference) {
  .via-amarela { animation: abre-amarela .8s cubic-bezier(.2, .7, .2, 1) .25s both; }
  .via-rosa { animation: abre-rosa .8s cubic-bezier(.2, .7, .2, 1) .35s both; }
  .carimbo:not([hidden]) { animation: carimba .28s cubic-bezier(.3, 1.4, .5, 1) both; }
}
@keyframes abre-amarela { from { transform: rotate(0) translate(0, 0); } }
@keyframes abre-rosa { from { transform: rotate(0) translate(0, 0); } }
@keyframes carimba { from { transform: translateX(-50%) rotate(-11deg) scale(1.7); opacity: 0; } }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .vitrine-seta { display: none; }
  .abre-grade, .historia { grid-template-columns: minmax(0, 1fr); }
  h1 { max-width: 14ch; }
  .talao { margin-inline: 6px; }
  .tarefas { grid-template-columns: minmax(0, 1fr); }
  .via-amarela { transform: rotate(-2.2deg) translate(-4px, 6px); }
  .via-rosa { transform: rotate(2.4deg) translate(6px, 10px); }
}
@media (max-width: 480px) {
  .zap-pequeno { padding: 9px 14px; font-size: .95rem; }
  .marca { font-size: 1.3rem; }
  .nota { font-size: .92rem; }
  .carimbo { left: 42%; }
  .filtros { gap: 5px; }
  .filtros button { font-size: .8rem; padding: 4px 9px; }
  .carimbo > span { font-size: 1.4rem; }
}