:root {
  --bg: #F4EFE6;        /* areia clara */
  --surface: #FBF8F3;   /* papel */
  --ink: #2E2A24;       /* grafite quente */
  --muted: #6F665A;     /* pedra */
  --line: #E2D9CB;      /* linha argila clara */
  --accent: #B5643A;    /* terracota */
  --accent-ink: #8E4A27;
  --sage: #8C9A7E;      /* sálvia */
  --ok: #4E6B45;
  --err: #A3402B;
  --radius: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 1px 1px, rgba(46, 42, 36, .07) 1px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(1200px 600px at 85% -10%, rgba(181, 100, 58, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(140, 154, 126, .14), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font);
}

.wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100vh;
}

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; letter-spacing: .02em; }
.logo {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 2px solid var(--accent);
  background: radial-gradient(circle at 35% 65%, var(--sage) 0 28%, transparent 30%);
}

.eyebrow {
  margin: 0 0 .75rem;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}

h1 {
  margin: 0;
  font: 500 clamp(1.9rem, 6vw, 2.6rem)/1.15 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 em { font-style: italic; color: var(--accent); }

.sub { margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; text-wrap: pretty; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
  box-shadow: 0 1px 0 rgba(46, 42, 36, .03), 0 12px 32px -18px rgba(46, 42, 36, .25);
}

.field { display: grid; gap: .35rem; }
label { font-size: .88rem; font-weight: 600; }

input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem .9rem;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #A99F91; }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181, 100, 58, .18); }
input[aria-invalid="true"] { border-color: var(--err); }

.consent { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.consent input { margin-top: .2rem; accent-color: var(--accent); width: 1rem; height: 1rem; flex: none; }

button {
  font: 600 1rem/1 var(--font);
  color: #FFF8F1;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  padding: .95rem 1.2rem;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
button:hover { background: var(--accent-ink); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: progress; }

.msg { margin: 0; min-height: 1.4em; font-size: .9rem; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--err); }
.turnstile:empty { display: none; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.foot { margin-top: auto; font-size: .8rem; color: var(--muted); }
.consent a, .foot a, .doc a { color: var(--accent-ink); }

/* Páginas de texto (privacidade) */
.doc { display: grid; gap: .25rem; }
.doc h2 { font: 600 1.05rem/1.3 var(--font); margin: 1.25rem 0 .25rem; }
.doc p, .doc li { color: var(--ink); font-size: .95rem; }
.doc ul { margin: .25rem 0; padding-left: 1.2rem; }
.doc .meta { color: var(--muted); font-size: .85rem; }

/* ===== Páginas de teste: cada tema conversa com um criativo ===== */
.lista { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.lista li { padding-left: 1.4rem; position: relative; }
.lista li::before { content: ""; position: absolute; left: 0; top: .6em; width: .55rem; height: .55rem; border-radius: 2px; background: var(--accent); }

/* A: Formação Estrategista de Dados (preto, branco, caixa alta, grade de dados) */
.tema-a {
  --bg: #0B0B0C; --surface: #141416; --ink: #F5F5F2; --muted: #A8A8A2; --line: #2A2A2E;
  --accent: #F5F5F2; --accent-ink: #FFFFFF; --ok: #8FD19E; --err: #FF8A75;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(900px 500px at 80% 0%, rgba(255,255,255,.07), transparent 60%),
    var(--bg);
}
.tema-a h1 {
  font: 300 clamp(1.7rem, 5.5vw, 2.35rem)/1.2 "Segoe UI Light", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .01em;
}
.tema-a h1 strong { font-weight: 700; }
.tema-a .selo { display: flex; align-items: center; gap: .75rem; }
.tema-a .selo .marca { width: 2.4rem; height: 2.4rem; border: 2px solid var(--ink); transform: rotate(45deg); border-radius: 4px; position: relative; flex: none; }
.tema-a .selo .marca::after { content: ""; position: absolute; inset: .45rem; border: 2px solid var(--ink); border-radius: 2px; }
.tema-a .selo small { display: block; font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: var(--muted); }
.tema-a .selo b { display: block; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.tema-a .destaque { display: inline-block; background: #E8EEFC; color: #1A2A55; padding: .1rem .45rem; border-radius: 4px; font-weight: 600; }
.tema-a input[type="text"], .tema-a input[type="email"], .tema-a input[type="tel"] { background: #0F0F11; color: var(--ink); }
.tema-a button { background: #F5F5F2; color: #0B0B0C; text-transform: uppercase; letter-spacing: .06em; }
.tema-a button:hover { background: #FFFFFF; }
.tema-a .card { box-shadow: 0 20px 60px -30px rgba(0,0,0,.9); }

/* B: GALLI / Data Studio (degradê roxo-magenta, linhas de rede) */
.tema-b {
  --bg: #5B1C9A; --surface: rgba(255,255,255,.96); --ink: #1C1030; --muted: #5E4F72; --line: #E3D6F2;
  --accent: #D21F9A; --accent-ink: #A8167A; --ok: #2F7D4A; --err: #B3261E;
  color: #FFFFFF;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.10) 46.2% 46.5%, transparent 46.7%) ,
    linear-gradient(25deg, transparent 0 62%, rgba(255,255,255,.08) 62.2% 62.5%, transparent 62.7%),
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.6), transparent),
    linear-gradient(135deg, #6A1FB0 0%, #8E1FA8 45%, #D0258F 100%);
}
.tema-b .assinatura { font: 700 1.1rem/1 "Segoe Print", "Comic Sans MS", cursive; letter-spacing: .12em; color: #FFFFFF; }
.tema-b h1 { font: 700 clamp(2rem, 7vw, 2.9rem)/1.1 ui-sans-serif, system-ui, "Segoe UI", sans-serif; color: #FFFFFF; }
.tema-b h1 .tarja { display: inline; background: #0B0B0C; color: #FFFFFF; font-weight: 400; padding: 0 .3rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tema-b .sub, .tema-b .eyebrow, .tema-b .foot, .tema-b .lista li { color: rgba(255,255,255,.88); }
.tema-b .lista li::before { background: #FFFFFF; }
.tema-b .foot a { color: #FFFFFF; }
.tema-b .card { color: var(--ink); box-shadow: 0 24px 60px -28px rgba(30,0,60,.7); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }