/* ============================================================
   Homeblox — base compartilhada por todas as páginas.
   Direção "Loud and flat" (tasteskill v2): campos de cor chapada
   que se encontram borda a borda, como blocos de montar; Chivo
   pesada em caixa alta; cantos retos; sem sombra, sem gradiente.
   ============================================================ */

:root {
  /* paleta: as cores do projeto (as mesmas do app) */
  --bg: #fff8ea;              /* creme */
  --surface: #ede4fb;         /* lilás claro */
  --ink: #2b2140;             /* texto */
  --muted: #6b6280;
  --accent: #ffc93c;          /* amarelo: a cor da ação */
  --accent-ink: #2b2140;
  --field-yellow: #ffc93c;
  --field-purple: #6d45c9;
  --field-night: #2b2140;
  --field-sky: #eaf4ff;
  --field-green: #3fbf5f;
  --danger: #c43d3d;

  /* tipo */
  --font: 'Chivo', system-ui, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-display: clamp(5.5rem, 14vw, 13.75rem);
  /* degraus extras da landing, cada um com um papel só */
  --step-row: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);       /* linhas do quadro, frases dos passos */
  --step-sub: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);     /* frase-título de uma seção */
  --step-figure: clamp(3rem, 7vw, 6.5rem);                 /* preços e números secundários */
  --step-giant: clamp(8rem, 19vw, 19rem);                  /* o número e o verbo que ocupam a tela */

  /* espaço */
  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);

  /* cantos: arredondados como no app (botões em pílula, cards macios) */
  --radius-lg: 24px;
  --radius: 16px;
  --radius-sm: 12px;
  --pill: 999px;

  /* movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;

  /* nomes antigos, ainda usados em estilos inline e no JS */
  --color-white: #ffffff;
  --color-primary: var(--field-purple);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --font-family: var(--font);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.45;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* em campo escuro o contorno cor de tinta some no fundo: vira amarelo */
.page-field.night :focus-visible,
.page-field.purple :focus-visible { outline-color: var(--accent); }
:target { scroll-margin-top: 5rem; }

h1, h2, h3 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-wrap: balance;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--margin);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hidden { display: none !important; }

/* ---------- botões: chapados, cantos retos, uma cor ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  background: var(--ink);
  color: var(--bg);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--ink); color: var(--accent); }
.btn-secondary { background: var(--field-purple); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--field-purple); color: #fff; }
  .btn-secondary:hover { background: var(--ink); color: var(--accent); }
  .btn-danger:hover { background: var(--ink); color: #fff; }
}

.btn-block { width: 100%; }

.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.btn-google {
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .btn-google:hover { background: var(--bg); color: var(--ink); }
}

.btn-google svg { width: 22px; height: 22px; flex-shrink: 0; }

.link-muted {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.auth-divider {
  margin: 20px 0;
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--muted);
}

/* ---------- formulários ---------- */
.form-group { margin-bottom: 18px; }

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--step-small);
  font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--surface);
  border-radius: 0;
  background: #fff;
  font-size: max(1rem, var(--step-body));
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--field-purple);
}

.form-group input[disabled],
.form-group input[readonly] { color: var(--muted); }

.form-group small { display: block; margin-top: 6px; font-size: var(--step-small); color: var(--muted); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-error {
  display: none;
  margin-top: 6px;
  padding: 12px 14px;
  background: #fde7e7;
  color: var(--danger);
  font-size: var(--step-small);
  font-weight: 700;
}

.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; }
.coupon-row .btn { min-height: 52px; }

.coupon-feedback {
  min-height: 18px;
  margin: 6px 0 0;
  font-size: var(--step-small);
  font-weight: 700;
}

.coupon-feedback.success { color: #1f8c3c; }
.coupon-feedback.error { color: var(--danger); }

.free-access-banner {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #e1f7e6;
  color: #1f8c3c;
  font-weight: 700;
}

/* ---------- wizard (modal da landing e signup/) ---------- */
.wizard-progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  margin-bottom: 28px;
}

.wizard-progress .step-dot {
  height: 10px;
  background: var(--surface);
  transition: background-color var(--t-ui) ease;
}

.wizard-progress .step-dot.done { background: var(--field-green); }
.wizard-progress .step-dot.current { background: var(--accent); }

.wizard-step { display: none; }
.wizard-step.active { display: block; }

.wizard-step h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  margin-bottom: 8px;
}

.step-hint {
  margin: 0 0 22px;
  color: var(--muted);
}

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

/* ---------- planos (modal, área logada) ---------- */
.plan-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 24px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 20px;
  cursor: pointer;
  background: var(--surface);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

/* nos formulários o card é um <button>: zera o estilo nativo */
button.plan-card {
  width: 100%;
  border: 0;
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}

.plan-card:active { transform: scale(0.98); }
.plan-card.selected { background: var(--accent); }
.plan-card .price { color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
  .plan-card:not(.selected):hover { background: #e4dbf7; }
}

.plan-card strong { font-size: var(--step-body); }

.plan-card .price {
  display: block;
  margin: 6px 0 2px;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plan-card .plan-note { font-size: var(--step-small); }

/* ---------- sucesso / lojas ---------- */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 24px;
}

.store-badges a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}

.store-badges a:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .store-badges a:hover { background: var(--field-purple); color: #fff; }
}

.pix-copy-paste {
  width: 100%;
  min-height: 80px;
  margin-bottom: 16px;
  padding: 12px;
  border: 0;
  background: var(--surface);
  font-size: var(--step-small);
  resize: none;
}

/* ---------- status e tabelas (área logada) ---------- */
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--step-small);
  font-weight: 700;
}

.status-pill.active { background: #e1f7e6; color: #1f8c3c; }
.status-pill.overdue { background: #fde7e7; color: var(--danger); }
.status-pill.canceled { background: var(--surface); color: var(--ink); }

table.invoices {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

table.invoices th,
table.invoices td {
  padding: 12px 10px;
  text-align: left;
  font-size: var(--step-small);
  border-bottom: 2px solid var(--bg);
}

table.invoices thead th {
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
}

table.invoices tbody tr { background: var(--surface); }

/* ============================================================
   Páginas auxiliares (login, sucesso, exclusão, signup):
   um campo de cor com o título enorme + o conteúdo ao lado.
   ============================================================ */
.site-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 var(--margin);
}

.wordmark {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-bar a:not(.wordmark) {
  font-size: var(--step-small);
  font-weight: 700;
  text-decoration: none;
}

.page-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 100svh;
}

.page-split .page-field {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: var(--margin);
  background: var(--field-yellow);
  color: var(--ink);
}

.page-split .page-field.purple { background: var(--field-purple); color: #fff; }
.page-split .page-field.night { background: var(--field-night); color: #fff; }

.page-field .page-title {
  padding: 0 var(--margin);
  font-size: clamp(3.5rem, 8vw, 8.5rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}

.page-field .page-note {
  max-width: 34ch;
  margin-top: 24px;
  padding: 0 var(--margin);
  font-size: var(--step-body);
}

.page-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px var(--margin) 64px;
}

.page-body-inner {
  width: 100%;
  max-width: 520px;
}

.page-body h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  margin-bottom: 12px;
}

.page-body p { max-width: 58ch; }
.page-body p + p { margin-top: 0.8em; }
.page-body .lead { font-size: var(--step-lead); line-height: 1.3; margin-bottom: 24px; }
.page-body .note { margin-top: 18px; font-size: var(--step-small); color: var(--muted); }

@media (max-width: 860px) {
  .page-split { grid-template-columns: 1fr; min-height: 0; }
  .page-split .page-field { min-height: 46svh; }
  .page-field .page-title { font-size: clamp(3rem, 15vw, 6rem); margin-top: 24px; }
  .page-body { padding: 40px var(--margin) 64px; }
}

/* ============================================================
   Documentos (termos, privacidade)
   ============================================================ */
.doc-head {
  background: var(--field-purple);
  color: #fff;
  padding-bottom: clamp(48px, 8vw, 112px);
}

.doc-head h1 {
  margin-top: clamp(40px, 8vw, 120px);
  padding: 0 var(--margin);
  font-size: clamp(2.5rem, 9vw, 9rem);
  line-height: 0.86;
  letter-spacing: -0.05em;
  overflow-wrap: anywhere;
}

.doc-head p {
  margin-top: 20px;
  padding: 0 var(--margin);
  font-size: var(--step-body);
}

.doc-body {
  max-width: 760px;
  padding: clamp(48px, 7vw, 96px) var(--margin) 120px;
}

.doc-body section + section { margin-top: 44px; }

.doc-body h2 {
  margin-bottom: 14px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1;
}

.doc-body p,
.doc-body li { font-size: var(--step-body); line-height: 1.55; }
.doc-body p + p { margin-top: 0.8em; }
.doc-body ul { margin: 0.6em 0; padding-left: 1.2em; }
.doc-body li + li { margin-top: 0.4em; }
.doc-body a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* em coluna que quebra: a razão social com CNPJ não cabe numa linha no celular */
.doc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  overflow-wrap: anywhere;
  padding: 28px var(--margin);
  background: var(--field-yellow);
  font-size: var(--step-small);
  font-weight: 700;
}


/* ---------- signup/ (fluxo antigo, fora de uso: o canônico é o modal da landing) ---------- */
.wizard-wrapper {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px var(--margin) 80px;
}

.wizard-wrapper .section-subtitle { color: var(--muted); }

.payment-tabs { display: flex; gap: 4px; margin-bottom: 20px; }

.payment-tab {
  flex: 1;
  padding: 14px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}

.payment-tab.active { background: var(--ink); color: var(--accent); }

.child-form {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--surface);
}

/* ---------- movimento: entrada das páginas auxiliares ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translateY(20px);
    animation: rise 800ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 80ms + 100ms);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .page-body-inner > *,
  .js .page-body-inner > section:not(.hidden) > *,
  .js .doc-body > section {
    opacity: 0;
    transform: translateY(20px);
    animation: rise 700ms var(--ease-out) forwards;
    animation-delay: 260ms;
  }
  .js .page-body-inner > :nth-child(2), .js .page-body-inner > section > :nth-child(2), .js .doc-body > section:nth-child(2) { animation-delay: 340ms; }
  .js .page-body-inner > :nth-child(3), .js .page-body-inner > section > :nth-child(3), .js .doc-body > section:nth-child(3) { animation-delay: 420ms; }
  .js .page-body-inner > :nth-child(n+4), .js .page-body-inner > section > :nth-child(n+4), .js .doc-body > section:nth-child(n+4) { animation-delay: 500ms; }
}

@keyframes rise { to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .plan-options { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Cantos arredondados (ar mais infantil, como no app). As seções
   continuam encostando borda a borda; arredonda o que fica dentro delas.
   ============================================================ */
.btn,
.btn-google,
.store-badges a,
.status-pill,
.wizard-progress .step-dot { border-radius: var(--pill); }

.form-group input,
.form-group select,
.form-group textarea,
.form-error,
.free-access-banner,
.pix-copy-paste,
.payment-tab,
.child-form { border-radius: var(--radius-sm); }

.plan-card { border-radius: var(--radius); }