/*
  ============================================================
  Gerador de Propostas com IA — style.css  (Página Comercial)
  ============================================================
  Herda tokens de /main.css: --bg, --panel, --primary, --secondary,
  --text, --muted, --radius, etc.
  Prefixo de todas as classes: gp- (Gerador de Propostas)
  ============================================================
*/

/* ===== CARD GENÉRICO REUTILIZÁVEL (Funcionalidades, Personalização) ===== */

.gp-feature-card {
  padding: 28px;
  cursor: default;
}

.gp-feature-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.gp-feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.gp-functions-grid {
  margin-top: 40px;
}

/* ===== BENEFÍCIOS — LISTA EM DUAS COLUNAS (evita repetir o mesmo cartão da seção de Funcionalidades) ===== */

.gp-benefits-list {
  grid-template-columns: repeat(2, 1fr);
  max-width: 920px;
  margin: 28px auto 0;
  gap: 18px 40px;
}

.gp-benefits-list li {
  font-size: 0.98rem;
  line-height: 1.55;
}

.gp-benefits-list li strong {
  display: block;
  color: var(--text);
  margin-bottom: 2px;
}

@media (max-width: 700px) {
  .gp-benefits-list {
    grid-template-columns: 1fr;
  }
}

/* ===== HERO — COMPOSIÇÃO DO SOFTWARE + PRÉVIA DA PROPOSTA ===== */

.gp-hero-visual {
  display: flex;
  justify-content: center;
}

.gp-hero-frame {
  width: 100%;
  max-width: 640px;
  padding: 14px;
  background: linear-gradient(165deg, rgba(130, 10, 209, 0.22), rgba(168, 85, 247, 0.06));
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
}

.gp-hero-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

/* ===== O PROBLEMA — DUAS COLUNAS + MENSAGENS ===== */

.gp-problema-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 860px) {
  .gp-problema-grid {
    grid-template-columns: 1fr;
  }
}

.gp-problema-copy p {
  color: var(--muted);
}

.gp-problema-destaque {
  margin: 20px 0;
  padding: 18px 20px;
  border-left: 3px solid var(--primary);
  background: rgba(130, 10, 209, 0.06);
  border-radius: 0 14px 14px 0;
  font-weight: 700;
  color: var(--text);
}

.gp-problema-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.gp-msg-chip {
  padding: 10px 16px;
  border-radius: 4px 16px 16px 16px;
  background: #171022;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 92%;
}

.gp-msg-arrow {
  align-self: center;
  color: rgba(168, 85, 247, 0.5);
  font-size: 1.3rem;
  margin: 2px 0;
  line-height: 1;
}

.gp-msg-organized {
  align-self: stretch;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(130, 10, 209, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ===== FUNCIONALIDADES — COMPOSIÇÃO DE ILUSTRAÇÕES =====
   Cada ilustração ganha um cartão (.card-panel) com fundo e borda visivelmente
   mais claros que o degradê escuro da seção: sem essa moldura, o fundo do
   próprio SVG (também em tons de roxo escuro) se mistura com a seção e a
   imagem parece um espaço vazio. */

.gp-practice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin: 0 auto 8px;
}

.gp-practice-item {
  padding: 20px;
  text-align: center;
}

.gp-tela-img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
}

.gp-practice-caption {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 700px) {
  .gp-practice-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== COMO FUNCIONA — 3 ETAPAS ===== */

.gp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 860px) {
  .gp-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PERSONALIZAÇÃO — DESTAQUE FINAL ===== */

.gp-offer-highlight {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(168, 85, 247, 0.15);
  text-align: center;
}

.gp-offer-highlight strong {
  display: block;
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 16px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== FORMULÁRIO ===== */

.gp-form-card {
  max-width: 620px;
  margin: 0 auto;
  padding: 32px;
}

@media (max-width: 560px) {
  .gp-form-card {
    padding: 24px 20px;
  }
}

.gp-form-disclaimer {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

/* Honeypot: campo nunca visível para humanos, mas presente no DOM/foco de bots. */
.gp-hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fundo de segurança da página. No CSS global, html e body só têm gradiente e a cor de fundo fica
   transparente: durante rolagens rápidas, áreas ainda não pintadas aparecem brancas. A cor abaixo
   fica por baixo dos gradientes e vale apenas nesta página. O !important é necessário porque o
   override.css usa o atalho "background" com !important, que zera a cor de fundo. */
html,
body {
  background-color: #13041f !important;
}

/* ===== PALCO DA PROPOSTA A4 =====
   Base: HTML/CSS completo e legível (celular, movimento reduzido e sem JavaScript).
   No desktop com ponteiro preciso, proposta-a4.js liga a classe .gp-motion: inclinação leve da folha
   e entrada dos blocos, animando só transform e opacity. */

.gp-story {
  --gp-stage-w: clamp(380px, 38vw, 470px);
  --gp-accent: #820AD1;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* o brilho do palco passa da largura da folha: não pode gerar rolagem horizontal */
}

.gp-story > #hero { order: 0; }
.gp-story > .gp-stage-rail { order: 1; }
.gp-story > section:not(#hero) { order: 2; }

.gp-hero-spacer { min-height: 1px; }

.gp-stage-rail {
  position: relative;
  padding: 8px 16px 40px;
}

.gp-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 440px);
  margin: 0 auto;
}

.gp-stage::before {
  content: "";
  position: absolute;
  inset: -8% -14%;
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.26), transparent 72%);
  pointer-events: none;
}

/* A4 em HTML: proporção 210 x 297, tipografia proporcional à largura da folha */
.gp-a4 {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.6cqw;
  width: 100%;
  aspect-ratio: 210 / 297;
  padding: 5cqw;
  background: #FBF9F4;
  color: #1F2937;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.06);
  line-height: 1.35;
  overflow: hidden;
}

/* cqw no próprio contêiner não resolve contra ele mesmo: o tamanho base vai nos filhos */
.gp-a4 > * { font-size: 3cqw; }

.gp-a4 p { margin: 0; }

.gp-a4-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3cqw 3.5cqw;
  border-radius: 2cqw;
  background: var(--gp-accent);
  color: #fff;
}

.gp-a4-brand {
  display: inline-flex;
  align-items: center;
  gap: 2cqw;
  font-size: 3.6cqw;
  font-weight: 700;
}

.gp-a4-logo {
  display: inline-grid;
  place-items: center;
  width: 6.4cqw;
  height: 6.4cqw;
  border-radius: 50%;
  background: #fff;
  color: var(--gp-accent);
  font-weight: 800;
}

.gp-a4-doc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 2.2cqw;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gp-a4-label {
  margin-bottom: 0.8cqw !important;
  color: var(--gp-accent);
  font-size: 2.1cqw;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gp-a4-tag {
  margin-left: 1cqw;
  padding: 0.3cqw 1.4cqw;
  border-radius: 999px;
  background: #F3E8FF;
  color: #4C0473;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.gp-a4-strong { font-size: 3.6cqw; font-weight: 700; }

.gp-a4-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 2.7cqw;
}

.gp-a4-table th,
.gp-a4-table td {
  padding: 1.5cqw 0.8cqw;
  border-bottom: 1px solid #E7E2D6;
  text-align: right;
  font-weight: 500;
}

.gp-a4-table thead th {
  background: #F3E8FF;
  color: #4B5563;
  font-size: 2.1cqw;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gp-a4-table th:first-child { text-align: left; }

.gp-a4-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto !important;
  padding: 2.4cqw 3cqw;
  border-radius: 2cqw;
  background: #F3E8FF;
}

.gp-a4-total span { font-size: 3cqw; font-weight: 700; }
.gp-a4-total small { display: block; color: #4B5563; font-size: 2cqw; font-weight: 400; }
.gp-a4-total strong { color: var(--gp-accent); font-size: 6.4cqw; }

.gp-a4-badges {
  display: flex;
  justify-content: flex-end;
  gap: 1.6cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gp-a4-badges li {
  padding: 0.8cqw 2.4cqw;
  border: 1px solid #E7E2D6;
  border-radius: 999px;
  background: #fff;
  color: var(--gp-accent);
  font-size: 2.4cqw;
  font-weight: 700;
}

.gp-a4-foot { color: #5B6270; font-size: 2cqw; text-align: center; }

.gp-a4-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.gp-pose,
.gp-tilt { width: 100%; }

/* Desktop: o palco fica fixo ao lado do texto enquanto as seções passam */
@media (min-width: 980px) {
  .gp-story { display: block; }

  .gp-stage-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 3;
    width: min(var(--container, 1160px), calc(100% - 32px));
    padding: 0;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .gp-stage {
    position: sticky;
    top: 96px;
    width: var(--gp-stage-w);
    height: min(calc(100vh - 120px), 760px);
    margin: 0 0 0 auto;
  }

  .gp-stage .gp-pose {
    width: min(100%, calc(min(100vh - 130px, 750px) * 0.7071));
  }

  #hero { min-height: calc(100vh - 82px); display: flex; align-items: center; }
  #hero > .container { width: min(var(--container, 1160px), calc(100% - 32px)); }

  .gp-story > section:not(#hero) > .container {
    padding-right: calc(var(--gp-stage-w) + 48px);
  }

  .gp-story .section-head { margin-left: 0; text-align: left; }
  .gp-story .gp-problema-grid,
  .gp-story .gp-steps-grid,
  .gp-story .grid-3 { grid-template-columns: 1fr; }
  .gp-story .gp-benefits-list { grid-template-columns: 1fr; margin-left: 0; }
  .gp-story #problema { min-height: 70vh; display: flex; align-items: center; }
  .gp-story #problema > .container { width: min(var(--container, 1160px), calc(100% - 32px)); }
}

@media (max-width: 979px) {
  #hero { padding-bottom: 8px !important; }
}

/* ===== Movimento leve (desktop, ponteiro preciso, sem prefers-reduced-motion) =====
   Poucas camadas: duas (pose da seção e inclinação do mouse) com perspectiva CSS. */
.gp-motion .gp-stage { perspective: 1400px; }

.gp-motion .gp-pose {
  --rx: 6deg;
  --ry: -16deg;
  --rz: 2deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.gp-motion .gp-tilt {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.gp-motion .gp-stage[data-gp-state="1"] .gp-pose { --rx: 5deg; --ry: 12deg; --rz: -2deg; }
.gp-motion .gp-stage[data-gp-state="2"] .gp-pose { --rx: 3deg; --ry: -8deg; --rz: 0deg; }
.gp-motion .gp-stage[data-gp-state="3"] .gp-pose { --rx: 7deg; --ry: -10deg; --rz: 1deg; }
.gp-motion .gp-stage[data-gp-state="4"] .gp-pose { --rx: 0deg; --ry: 0deg; --rz: 0deg; }
.gp-motion .gp-stage[data-gp-state="5"] .gp-pose { --rx: 4deg; --ry: 9deg; --rz: -1deg; }

/* Destaque do bloco relevante para a seção na tela: borda e fundo discretos que só mudam de opacity.
   Todos os textos da folha ficam sempre legíveis; nada é apagado nem escondido. */
.gp-motion .gp-a4-head,
.gp-motion .gp-a4-client,
.gp-motion .gp-a4-ia,
.gp-motion .gp-a4-table,
.gp-motion .gp-a4-total,
.gp-motion .gp-a4-badges { position: relative; }

.gp-motion .gp-a4-head::after,
.gp-motion .gp-a4-client::after,
.gp-motion .gp-a4-ia::after,
.gp-motion .gp-a4-table::after,
.gp-motion .gp-a4-total::after,
.gp-motion .gp-a4-badges::after {
  content: "";
  position: absolute;
  inset: -1.2cqw;
  border: 0.45cqw solid var(--gp-accent);
  border-radius: 2.2cqw;
  background: rgba(130, 10, 209, 0.07);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .gp-motion .gp-a4-head::after,
  .gp-motion .gp-a4-client::after,
  .gp-motion .gp-a4-ia::after,
  .gp-motion .gp-a4-table::after,
  .gp-motion .gp-a4-total::after,
  .gp-motion .gp-a4-badges::after {
    background: color-mix(in srgb, var(--gp-accent) 8%, transparent);
  }
}

.gp-motion .gp-a4 .is-hl::after { opacity: 1; }