/* Pesquisa da campanha "responda e ganhe 30 dias grátis": uma identidade por nicho. */
:root {
    --bg: #f4f8f6;
    --paper: #ffffff;
    --ink: #0b1f1c;
    --ink-soft: #4b5f5a;
    --accent: #16a34a;
    --accent-2: #22c55e;
    --accent-ink: #ffffff;
    --soft: #e8f5ee;
    --line: #dbe6e1;
    --hero: linear-gradient(160deg, #06302b, #0a3f38);
    --hero-ink: #ffffff;
    --display: "Plus Jakarta Sans", system-ui, sans-serif;
    --display-weight: 800;
    --radius: 18px;
    --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Manicure: rosa e nude, serifa elegante. */
.niche-manicure {
    --bg: #fff6f7;
    --ink: #3b1426;
    --ink-soft: #7a4a5e;
    --accent: #d6336c;
    --accent-2: #f06595;
    --soft: #ffe3ec;
    --line: #f6d3de;
    --hero: radial-gradient(circle at 85% 15%, #ffd6e4 0, transparent 45%), linear-gradient(160deg, #fbe0e8, #f7c6d6);
    --hero-ink: #3b1426;
    --display: "Playfair Display", Georgia, serif;
    --display-weight: 700;
}

/* Petshop: amarelo e azul-petróleo, arredondado e alegre. */
.niche-petshop {
    --bg: #fffaf0;
    --ink: #10313a;
    --ink-soft: #4f6a70;
    --accent: #0e7c86;
    --accent-2: #14a3ae;
    --soft: #e3f6f7;
    --line: #f1e3c4;
    --hero: radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .45) 0 8%, transparent 9%), radial-gradient(circle at 88% 70%, rgba(255, 255, 255, .35) 0 6%, transparent 7%), linear-gradient(160deg, #ffd166, #ffb84d);
    --hero-ink: #10313a;
    --display: "Baloo 2", "Plus Jakarta Sans", system-ui, sans-serif;
    --display-weight: 800;
    --radius: 24px;
}

/* Barbearia: escuro, dourado e a faixa do poste de barbeiro. */
.niche-barbearia {
    --bg: #141414;
    --paper: #1d1d1d;
    --ink: #f3ede3;
    --ink-soft: #b9b0a2;
    --accent: #c8a165;
    --accent-2: #e0bd85;
    --accent-ink: #141414;
    --soft: #2a2620;
    --line: #34302a;
    --hero: linear-gradient(160deg, #0d0d0d, #262019);
    --hero-ink: #f3ede3;
    --display: "Oswald", "Plus Jakarta Sans", system-ui, sans-serif;
    --display-weight: 600;
    --radius: 10px;
    color-scheme: dark;
}
.niche-barbearia .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: repeating-linear-gradient(-45deg, #c0392b 0 14px, #f3ede3 14px 28px, #1f4e8c 28px 42px, #f3ede3 42px 56px);
}
.niche-barbearia .display { text-transform: uppercase; letter-spacing: .01em; }

/* Hotel e creche pet: azul-claro e verde-água com laranja, letra arredondada. */
.niche-hotelpet {
    --bg: #f2fbfc;
    --ink: #0f3340;
    --ink-soft: #4d6b75;
    --accent: #f97316;
    --accent-2: #fb923c;
    --soft: #ffeedd;
    --line: #cdebef;
    --hero: radial-gradient(circle at 85% 18%, #ffd8b0 0 7%, transparent 8%), radial-gradient(circle at 15% 80%, rgba(255, 255, 255, .5) 0 5%, transparent 6%), linear-gradient(160deg, #bde9f2, #8fd8d2);
    --hero-ink: #0f3340;
    --display: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif;
    --display-weight: 700;
    --radius: 24px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.wrap { width: min(720px, 100% - 32px); margin: 0 auto; }
.display { font-family: var(--display); font-weight: var(--display-weight); line-height: 1.12; letter-spacing: -.01em; }

.top { padding: 16px 0; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; color: var(--hero-ink); }
.logo-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: .95rem; }

.hero { position: relative; background: var(--hero); color: var(--hero-ink); padding-bottom: 64px; overflow: hidden; }
.hero-icon { font-size: 2.6rem; line-height: 1; margin: 18px 0 12px; }
.hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
.hero .lead { margin-top: 14px; font-size: 1.08rem; opacity: .92; max-width: 60ch; }
.perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding: 0; list-style: none; }
.perks li { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .55); color: var(--ink); font-weight: 700; font-size: .88rem; }
.niche-barbearia .perks li { background: rgba(200, 161, 101, .16); color: var(--accent-2); }
.perks li:first-child { background: var(--accent); color: var(--accent-ink); }

.sheet { margin-top: -40px; position: relative; padding-bottom: 48px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .35); }
.card + .card { margin-top: 14px; }

.progress { position: sticky; top: 0; z-index: 5; height: 6px; background: var(--line); }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s ease; }

.q { border: 0; margin: 0; padding: 0; }
.q + .q { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }
.q legend, .q > label.q-label { display: block; padding: 0; margin-bottom: 12px; font-weight: 800; font-size: 1.05rem; }
.q-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-right: 8px; border-radius: 999px; background: var(--soft); color: var(--accent); font-size: .82rem; vertical-align: 2px; }
.niche-barbearia .q-num { color: var(--accent-2); }
.hint { color: var(--ink-soft); font-size: .88rem; margin-top: 6px; }
.optional { color: var(--ink-soft); font-weight: 500; font-size: .85rem; }

.options { display: grid; gap: 8px; }
@media (min-width: 560px) { .options.two { grid-template-columns: 1fr 1fr; } }
.opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: calc(var(--radius) - 6px); cursor: pointer; background: var(--paper); transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--accent); }
.opt input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; margin: 0; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--soft); font-weight: 600; }
.opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.opt:has(input:focus-visible) { outline: 3px solid var(--accent-2); outline-offset: 2px; }

.field { display: grid; gap: 6px; }
.field + .field { margin-top: 14px; }
.field label { font-weight: 700; font-size: .95rem; }
input[type=text], input[type=tel], textarea {
    width: 100%; font: inherit; color: var(--ink); background: var(--paper); padding: 12px 14px;
    border: 1.5px solid var(--line); border-radius: calc(var(--radius) - 6px);
}
.niche-barbearia input[type=text], .niche-barbearia input[type=tel], .niche-barbearia textarea { background: #151515; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); }
textarea { min-height: 110px; resize: vertical; }
@media (min-width: 560px) { .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .row .field + .field { margin-top: 0; } }
.row + .field, .field + .row, .row + .row { margin-top: 14px; }

.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: .9rem; color: var(--ink-soft); }
.consent input { accent-color: var(--accent); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.consent a { color: var(--accent); }

.error { color: #c92a2a; font-size: .88rem; font-weight: 600; margin-top: 8px; }
.niche-barbearia .error { color: #ff8787; }
.has-error .opt, .has-error input[type=text], .has-error input[type=tel] { border-color: #e03131; }
.alert { padding: 12px 16px; border-radius: 12px; background: #fff0f0; color: #a61e1e; font-weight: 600; margin-bottom: 14px; border: 1px solid #ffc9c9; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 24px; border-radius: 999px; border: 0; font: inherit; font-weight: 800; font-size: 1.02rem; text-decoration: none; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 12px 26px -14px var(--accent); transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-block { width: 100%; margin-top: 20px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.small { font-size: .85rem; color: var(--ink-soft); }
.center { text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Escolha do nicho */
.niches { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 640px) { .niches { grid-template-columns: repeat(2, 1fr); } }
.niche-card { display: block; padding: 22px; border-radius: 20px; text-decoration: none; transition: transform .15s; }
.niche-card:hover { transform: translateY(-3px); }
.niche-card .icon { font-size: 2.2rem; }
.niche-card strong { display: block; margin-top: 10px; font-size: 1.15rem; }
.niche-card span { display: block; margin-top: 6px; font-size: .9rem; opacity: .85; }
.niche-card.manicure { background: linear-gradient(160deg, #fbe0e8, #f7c6d6); color: #3b1426; }
.niche-card.manicure strong { font-family: "Playfair Display", Georgia, serif; }
.niche-card.petshop { background: linear-gradient(160deg, #ffd166, #ffb84d); color: #10313a; }
.niche-card.petshop strong { font-family: "Baloo 2", system-ui, sans-serif; font-size: 1.3rem; }
.niche-card.hotelpet { background: linear-gradient(160deg, #bde9f2, #8fd8d2); color: #0f3340; }
.niche-card.hotelpet strong { font-family: "Fredoka", system-ui, sans-serif; font-size: 1.3rem; color: #c2410c; }
.niche-card.barbearia { background: linear-gradient(160deg, #0d0d0d, #262019); color: #f3ede3; }
.niche-card.barbearia strong { font-family: "Oswald", system-ui, sans-serif; text-transform: uppercase; color: #e0bd85; }

/* Agradecimento */
.done-icon { font-size: 3rem; }
.steps { margin: 18px 0 0; padding-left: 20px; }
.steps li + li { margin-top: 8px; }
.gift { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--soft); font-weight: 600; }
footer { padding: 24px 0 40px; color: var(--ink-soft); font-size: .85rem; text-align: center; }
footer a { color: var(--ink-soft); }