/* =========================================================== v5-landing.css
   v130 (18/09/2026) — as peças NOVAS da landing page.

   Pedido do dono do painel: a landing tem de falar do DASHBOARD e do ESCRITÓRIO com o
   mesmo peso, na mesma hero; despertar o desejo rápido; explicar um pouquinho
   cada parte do painel; destacar as ferramentas grátis; e dizer que a
   assinatura é mensal e renova sozinha.

   REGRAS QUE ESTA FOLHA OBEDECE (design system, 17/09):
   - nenhuma cor escrita na mão: tudo é degrau da rampa (var(--ds-*));
   - no tema claro quem ESCREVE é o verde #007C68 (--ds-verde); a menta é
     preenchimento, nunca texto;
   - --ds-tinta-4 é decoração; texto de apoio é --ds-tinta-2;
   - texto sobre preenchimento menta é Atlântico.
   O movimento de entrada vive no v5-revelar.css. Aqui só o hover. */

/* ---------------------------------------------------------- 1. HERO DUPLA */
.hero-duo { align-items: center; }
/* o titulo antigo era de UMA linha curta ("Voce vende."); o novo tem duas
   oracoes e com 94px quebrava em quatro linhas. */
.hero-duo .hero-copy h1 {
  font-size: clamp(42px, 4.4vw, 66px); letter-spacing: -2.6px; line-height: 1;
  margin: 24px 0 22px;
}
.hero-duo .hero-copy > p { font-size: 18px; max-width: 610px; }
.hero-duo-visual {
  position: relative; display: grid; gap: 16px; min-height: 520px;
  align-content: center;
}
.hero-duo-card {
  display: block; background: var(--ds-branco); border: 1px solid var(--ds-linha);
  border-radius: 24px; padding: 12px; position: relative; overflow: hidden;
  box-shadow: 0 18px 44px rgba(var(--ds-atlantico-rgb), .10);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.hero-duo-card:hover {
  transform: translateY(-6px);
  border-color: var(--ds-menta-2);
  box-shadow: 0 30px 70px rgba(var(--ds-verde-rgb), .22);
}
.hero-duo-foto { display: block; border-radius: 16px; overflow: hidden; background: var(--ds-atlantico); }
.hero-duo-foto img { display: block; width: 100%; height: 232px; object-fit: cover; object-position: top; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.hero-duo-card:hover .hero-duo-foto img { transform: scale(1.035); }
.hero-duo-pe { display: flex; align-items: baseline; gap: 10px; padding: 12px 6px 4px; flex-wrap: wrap; }
.hero-duo-pe b { font-size: 16px; letter-spacing: -.3px; }
.hero-duo-pe small { color: var(--ds-tinta-2); font-size: 13px; }
.hero-duo-selo {
  position: absolute; z-index: 2; right: 20px; top: 20px;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(var(--ds-atlantico-rgb), .86); color: var(--ds-branco);
  backdrop-filter: blur(8px); border-radius: 99px; padding: 7px 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.hero-duo-selo i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ds-menta);
  animation: lp-pisca 2.2s ease-in-out infinite;
}
@keyframes lp-pisca { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .hero-duo-selo i { animation: none; } }
.hero-duo .floating-kpi { z-index: 3; }

/* ------------------------------------------------- 2. OS SEIS NÚMEROS */
.lp-faixa { padding-top: 26px; padding-bottom: 60px; }
.lp-faixa-cab { margin-bottom: 26px; max-width: 760px; }
.lp-faixa-cab h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1.8px; line-height: 1.05; margin: 10px 0 0; }
.lp-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-chip {
  background: var(--ds-branco); border: 1px solid var(--ds-linha); border-radius: 22px;
  padding: 20px; transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s;
}
.lp-chip:hover {
  transform: translateY(-4px); border-color: var(--ds-menta-3);
  box-shadow: 0 20px 44px rgba(var(--ds-atlantico-rgb), .10);
}
.lp-chip-ic {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(var(--ds-menta-rgb), .18); color: var(--ds-verde); margin-bottom: 14px;
  transition: background .26s, transform .26s;
}
.lp-chip:hover .lp-chip-ic { background: var(--ds-menta); color: var(--ds-atlantico); transform: rotate(-4deg); }
.lp-chip b { display: block; font-size: 17px; letter-spacing: -.4px; margin-bottom: 6px; }
.lp-chip small { display: block; color: var(--ds-tinta-2); font-size: 13.5px; line-height: 1.6; }

/* --------------------------------------- 3. CADA PARTE DO PAINEL */
.lp-telas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 46px; }
.lp-tela {
  background: rgba(var(--ds-branco-rgb), .05); border: 1px solid var(--ds-atlantico-3);
  border-radius: 18px; padding: 17px; color: var(--ds-branco);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), border-color .26s, background .26s;
}
.lp-tela:hover { transform: translateY(-4px); border-color: var(--ds-menta-2); background: rgba(var(--ds-menta-rgb), .08); }
.lp-tela-ic {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(var(--ds-menta-rgb), .16); color: var(--ds-menta-3); margin-bottom: 12px;
  transition: background .26s, color .26s;
}
.lp-tela:hover .lp-tela-ic { background: var(--ds-menta); color: var(--ds-atlantico); }
.lp-tela b { display: block; font-size: 15px; margin-bottom: 5px; }
.lp-tela p { margin: 0; color: var(--ds-apoio-escuro); font-size: 13px; line-height: 1.55; }
.lp-telas-pe { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 32px; }
/* .primary é Atlântico cheio — dentro da faixa escura ele sumia. Aqui vira
   menta com letra Atlântico, como manda o DS para acao sobre fundo escuro. */
.dashboard-showcase .lp-telas-pe .primary { background: var(--ds-menta); color: var(--ds-atlantico); }
.dashboard-showcase .lp-telas-pe .primary:hover { background: var(--ds-menta-hover); color: var(--ds-atlantico); }
.lp-telas-nota { color: var(--ds-apoio-escuro); font-size: 13.5px; }

/* --------------------------------------------- 4. O ESCRITÓRIO */
.lp-escritorio { padding-top: 96px; padding-bottom: 96px; }
.lp-escritorio .lucrei-banner { margin: 34px 0 26px; }
.lp-esc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-esc-item {
  background: var(--ds-branco); border: 1px solid var(--ds-linha); border-radius: 22px; padding: 20px;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s;
}
.lp-esc-item:hover { transform: translateY(-4px); border-color: var(--ds-menta-3); box-shadow: 0 20px 44px rgba(var(--ds-atlantico-rgb), .10); }
.lp-esc-ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ds-menta-tenue); color: var(--ds-verde); margin-bottom: 13px;
}
.lp-esc-item b { display: block; font-size: 16px; letter-spacing: -.3px; margin-bottom: 6px; }
.lp-esc-item p { margin: 0; color: var(--ds-tinta-2); font-size: 13.5px; line-height: 1.6; }
.agents-strip { margin-top: 30px; display: grid; gap: 20px; justify-items: start; }
.agents-strip .agent-grid { grid-template-columns: repeat(6, 1fr); width: 100%; }

/* ------------------------------------------ 5. FERRAMENTAS GRÁTIS */
.lp-gratis { padding-top: 10px; padding-bottom: 96px; }
.lp-gratis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.lp-gratis-card {
  display: block; position: relative; background: var(--ds-branco);
  border: 1px solid var(--ds-linha); border-radius: 24px; padding: 24px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.lp-gratis-card:hover {
  transform: translateY(-6px); border-color: var(--ds-menta-2);
  box-shadow: 0 26px 56px rgba(var(--ds-verde-rgb), .16);
}
.lp-gratis-ic {
  width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center;
  background: var(--ds-atlantico); color: var(--ds-menta); margin-bottom: 18px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.lp-gratis-card:hover .lp-gratis-ic { transform: translateY(-3px) rotate(-5deg); }
.lp-gratis-selo {
  position: absolute; right: 20px; top: 22px; background: var(--ds-menta); color: var(--ds-atlantico);
  font-size: 10px; font-weight: 900; letter-spacing: .12em; padding: 6px 10px; border-radius: 99px;
}
.lp-gratis-card b { display: block; font-size: 20px; letter-spacing: -.6px; margin-bottom: 8px; }
.lp-gratis-card p { margin: 0 0 18px; color: var(--ds-tinta-2); font-size: 14px; line-height: 1.6; }
.lp-gratis-card u {
  text-decoration: none; color: var(--ds-verde); font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.lp-gratis-card u svg { width: 16px; transition: transform .26s; }
.lp-gratis-card:hover u svg { transform: translateX(5px); }
.lp-gratis-pe { margin-top: 24px; }

/* ------------------------------------------------------ 6. PLANOS */
.lp-planos { padding-bottom: 40px; }
.lp-planos .plan-grid { margin-top: 30px; }

/* ----------------------------------------------- 7. CELULAR (390px) */
@media (max-width: 1000px) {
  .lp-chips, .lp-esc-grid, .lp-gratis-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-telas { grid-template-columns: repeat(2, 1fr); }
  .hero-duo-visual { min-height: 0; margin-top: 30px; }
  .hero-duo-foto img { height: 200px; }
  .agents-strip .agent-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .lp-chips, .lp-esc-grid, .lp-gratis-grid, .lp-telas { grid-template-columns: 1fr; }
  .lp-escritorio, .lp-gratis { padding-top: 60px; padding-bottom: 60px; }
  .lp-faixa { padding-bottom: 44px; }
  .lp-telas { margin-top: 30px; }
  .lp-telas-pe .primary, .agents-strip-cta { width: 100%; justify-content: center; }
  .hero-duo .floating-kpi { display: none; }
  .agents-strip .agent-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-gratis-card { padding: 20px; border-radius: 18px; }
}