/* Experimento da home, servido em /v2. A abertura atual não usa este arquivo. */
.home-v2 .heroi-v2 {
  padding-block: clamp(36px, 5vw, 64px);
}
.heroi-v2-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: 'texto ferramentas' 'pagas ferramentas';
  gap: clamp(28px, 4vw, 54px);
  row-gap: 16px;
  align-items: center;
}
.heroi-v2-texto { grid-area: texto; align-self: end; }
.home-v2 .heroi-v2 h1 {
  font-size: clamp(2rem, 1.3rem + 2.3vw, 2.8rem);
  line-height: 1.12;
  text-wrap: balance;
  margin-bottom: 20px;
}
.home-v2 .heroi-v2 .etiqueta { margin-bottom: 20px; }
.heroi-v2-texto .acoes { margin-top: 24px; }
.heroi-v2-texto .btn { padding-inline: 24px; }
.heroi-v2-texto .sob-botao { max-width: 36ch; font-size: 0.92rem; }
.heroi-v2-explorar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-block: 12px;
  margin-top: 10px;
  font-size: 0.94rem;
  font-weight: 600;
}
.heroi-v2-pagas {
  grid-area: pagas;
  align-self: start;
  max-width: 48ch;
  padding-top: 20px;
  margin-top: 0;
  border-top: 1px solid var(--line-forte);
  color: var(--ink-medio);
  font-size: 0.9rem;
}
.v2-ferramentas {
  grid-area: ferramentas;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-forte);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--surface-alt), var(--base));
  box-shadow: var(--sombra);
}
.v2-ferramentas-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 2px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.v2-selo {
  border: 1px solid var(--line-forte);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--brand-ink);
  font-size: 0.72rem;
}
.v2-previas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.v2-previa {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-forte);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.2s, transform 0.2s;
  animation: v2-entrada 0.65s ease backwards;
}
.v2-previa:nth-child(2) { animation-delay: 0.12s; }
.v2-previa:nth-child(3) { animation-delay: 0.24s; }
.v2-previa:nth-child(4) { animation-delay: 0.36s; }
.v2-previa:hover { color: var(--ink); border-color: var(--brand-ink); transform: translateY(-3px); }
.v2-previa:focus-visible { outline-offset: 4px; }
.v2-previa img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.v2-previa-texto { padding: 12px; }
.v2-tipo { color: var(--brand-ink); font-size: 0.72rem; font-weight: 600; }
.home-v2 .heroi-v2 .v2-previa h2 {
  margin: 6px 0;
  font-size: 0.94rem;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: auto;
}
.v2-previa-texto p { font-size: 0.8rem; line-height: 1.45; color: var(--ink-medio); }
.v2-previa-mercado {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 9;
  min-height: 112px;
  padding: 10px;
  overflow: hidden;
  background: var(--base);
}
.v2-mercados { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.62rem; line-height: 1.2; color: var(--ink-medio); }
.v2-previa-mercado svg { width: 100%; min-height: 0; }
.v2-grafico-grade { stroke: var(--line); stroke-width: 1; }
.v2-grafico-area { fill: var(--brand-fraco); }
.v2-grafico-barras { fill: var(--brand); opacity: 0.55; }
.v2-grafico-linha {
  stroke: var(--brand-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: v2-tracado 1.4s ease both;
}
.v2-ilustracao { font-size: 0.6rem; color: var(--ink-fraco); }
.v2-previa-aulas { position: relative; }
.v2-aulas-selo {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-radius: 6px;
  background: var(--base);
  color: var(--ink);
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
}
.v2-ferramentas-rodape { margin: 14px 2px 0; color: var(--ink-medio); font-size: 0.75rem; line-height: 1.5; }
@keyframes v2-entrada {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes v2-tracado {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@media (max-width: 899px) {
  .heroi-v2-grade { grid-template-columns: 1fr; grid-template-areas: 'texto' 'ferramentas' 'pagas'; gap: 24px; }
  .heroi-v2-texto, .v2-ferramentas, .heroi-v2-pagas { width: 100%; max-width: 620px; margin-inline: auto; }
}
@media (max-width: 520px) {
  .home-v2 .heroi-v2 { padding-top: 32px; }
  .home-v2 .heroi-v2 h1 { font-size: 1.95rem; }
  .heroi-v2-texto .chamada { font-size: 1.05rem; }
  .heroi-v2-texto .sob-botao { max-width: none; }
  .v2-ferramentas { padding: 12px; border-radius: 16px; }
  .v2-previas { gap: 10px; }
  .v2-previa-texto { padding: 10px; }
  .home-v2 .heroi-v2 .v2-previa h2 { font-size: 0.88rem; }
  .v2-selo { display: none; }
}

/* Ritmo da home: planilhas em verde acinzentado, painéis escuros e passos em verde. */
.home-gratis-neutra {
  --ink: #f0f5ef;
  --ink-medio: #d4e2d7;
  --brand-ink: #a5dfb6;
  background: #3d5143;
  color: var(--ink);
}
.home-gratis-neutra .cartao {
  --ink: #25352b;
  --ink-medio: #41584a;
  --brand-ink: #216b40;
  --surface: #e8efe7;
  --line: #bfd0c0;
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
.home-gratis-neutra .cartao h3 { margin-top: 16px; }
.home-gratis-nota { text-align: center; margin-top: 16px; font-size: .88rem; color: var(--ink-medio); }
.home-v2 .home-gratis-neutra,
.home-v2 .home-paineis { padding-block: clamp(48px, 6vw, 80px); }
.home-v2 .home-como {
  background: #3d5143;
  --ink: #f0f5ef;
  --ink-medio: #d1dfd5;
  --brand-ink: #9ce0b1;
  padding-block: clamp(40px, 5vw, 64px);
  border-block: 1px solid #476b55;
}
.home-como .cabeca-secao { margin-bottom: 32px; }
.home-como .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.home-como .passos > li::before { background: #b5e5bd; color: #17372a; z-index: 1; }
.home-como .passos > li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 42px;
  width: calc(100% - 14px);
  height: 1px;
  background: #729981;
}
.home-como .passos h3 { font-size: 1.03rem; }
.home-como .passos p { font-size: .94rem; }
.home-painel-previa { display: block; margin-bottom: 20px; border: 1px solid var(--line-forte); border-radius: 10px; overflow: hidden; }
.home-painel-previa img { display: block; width: 100%; aspect-ratio: 2.65; object-fit: contain; background: var(--surface); }
.home-painel-previa span { display: block; padding: 7px 10px; background: var(--base); color: var(--ink-medio); font-size: .72rem; }
@media (max-width: 899px) {
  .home-como .passos { grid-template-columns: 1fr; gap: 24px; }
  .home-como .passos > li { padding: 0 0 0 60px; min-height: 42px; }
  .home-como .passos > li:not(:last-child)::after { left: 20px; top: 42px; width: 1px; height: calc(100% - 18px); }
}