/* ============================================================
   Verana Parque Alvorada — LP de captação
   Redesign full-bleed estilo EliteClick: BG animado (Ken Burns)
   + card branco flutuante à esquerda + 6 steps inline.
   Tokens de cipasa-brand-public/tokens.json.
   ============================================================ */

:root {
  --primary:        #17211a;   /* verde corporativo */
  --primary-deep:   #0E1612;   /* extra dark — base do stage */
  --primary-hover:  #233528;
  --accent:         #A8563C;   /* lima — glow do radio + foco */
  --accent-text:    #A8563C;   /* variante WCAG AA pra texto */
  --neutral:        #F8FAF9;
  --ink:            #2C2C2C;
  --muted:          #6E7280;
  --muted-soft:     #97A0A8;
  --white:          #FFFFFF;
  --surface-soft:   #F4F6F7;   /* fundo do chip + nav footer */
  --overlay-green:  rgba(23, 33, 26, 0.32);
  --border-soft:    rgba(23, 33, 26, 0.14);
  --border-input:   rgba(23, 33, 26, 0.12);
  --radius-sm:      8px;
  --radius-md:      14px;
  --radius-lg:      18px;
  --radius-pill:    999px;
  --shadow-card:    0 32px 64px -16px rgba(14, 22, 18, 0.32),
                    0 4px 12px -2px rgba(14, 22, 18, 0.12);
  --ease-out:       cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--primary-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select, button, textarea { font: inherit; color: inherit; }

/* ============================================================
   Stage — split-screen 50/50 desktop: conteúdo esquerda, foto direita.
   Mobile: empilhado (BG some, painel full width).
   ============================================================ */

.stage {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr;
  background: var(--neutral);
}

.stage__bg {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, var(--primary) 0%, var(--primary-deep) 78%);
  overflow: hidden;
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

/* Bg-slide / Ken Burns DESATIVADOS — Felipe pediu fundo verde sólido + logo
   gigante. JS continua emitindo .bg-slide mas via CSS some. */
.bg-slide,
.stage__overlay { display: none; }

/* Fonte oficial da marca Jardim Botânico (mesma da v1/topband). */
@font-face {
  font-family: "Palmore";
  src: url("./assets/Palmore-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Logo TIPOGRÁFICA do Jardim Botânico centralizada no .stage__bg
   (desktop col 2 + mobile topo) — reproduz o lockup da v1 com Palmore. */
.stage__brand-mark {
  width: clamp(180px, 22vw, 320px);
  height: auto;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 6px 24px rgba(0, 0, 0, 0.32));
  opacity: 0.96;
  z-index: 2;
  position: relative;
}
/* Logo Monte Tripoli — SVG já é creme (#D1C6BB), NÃO aplicar invert. */
.stage__brand-mark--tripoli {
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.32));
  width: clamp(200px, 20vw, 300px);
}

.stage__brand-type {
  z-index: 2;
  position: relative;
  text-align: center;
  color: var(--cream, #EBE4DE);
  font-family: "Palmore", "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  user-select: none;
}
.stage__brand-type .brand-line {
  display: block;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.04;
  letter-spacing: 0.04em;
}
.stage__brand-type .brand-sub {
  display: block;
  margin-top: 12px;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  opacity: 0.82;
}

/* (Regras antigas de .stage__brand wordmark removidas — agora só a logo gigante
    .stage__brand-mark dentro do .stage__bg, centralizada via place-items.) */

/* ============================================================
   Panel — card branco flutuante à esquerda
   ============================================================ */

.panel {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(32px, 5vh, 56px) clamp(36px, 5vw, 80px);
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  animation: panel-in 540ms var(--ease-out) both;
}

/* Container interno do painel — limita a largura útil pra leitura, alinhado
   à esquerda; cresce respirado em viewports largos. */
.panel > * { max-width: 560px; width: 100%; }
.panel__state { max-width: 560px; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chip do header — logo Cipasa + nome */
.panel__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--surface-soft);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--primary-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 160ms var(--ease-out);
}
.panel__chip:hover { background: rgba(23, 33, 26, 0.08); }
.panel__chip img { width: 24px; height: 24px; border-radius: 50%; }

/* States — só um visível por vez. flex 1 + min-height 0 garante que o painel
   mantém altura consistente entre steps (não "pula" quando um step tem mais
   conteúdo que outro). */
.panel__state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  animation: state-in 380ms var(--ease-out) both;
}
.panel__state[hidden] { display: none; }

/* Form state: body do step ocupa o resto (push nav pro bottom).
   Resolve pulo de altura entre steps mobile + desktop. */
.panel__state--form { gap: 16px; }
.panel__state--form #lead-form { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.panel__body { flex: 1 1 auto; }
.step { flex: 1 1 auto; }

@keyframes state-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabeçalho (icon + eyebrow + headline + sub) — diagramação editorial Cipasa. */
.panel__head { display: flex; flex-direction: column; gap: 8px; }

/* Step icon (header) — círculo lima sutil com SVG centralizado, acima do título */
.step__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(168, 86, 60, 0.14);
  color: var(--primary);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.step__icon svg { width: 28px; height: 28px; }
.step__icon[hidden] { display: none; }

/* Eyebrow kicker — "Pergunta X de N" tracked uppercase muted, ACIMA do título.
   Renderizado via ::before usando data-eyebrow no #step-title (sem mexer markup). */
.panel__state--form #step-title[data-eyebrow]:not([data-eyebrow=""])::before {
  content: attr(data-eyebrow);
  display: block;
  font-family: "Work Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
  line-height: 1;
}

.panel__title {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--primary-deep);
  text-wrap: balance;
}
.panel__title em {
  font-style: normal;
  font-weight: 900;
  color: var(--accent-text);
}

.panel__sub {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 17.5px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
  max-width: 52ch;
}

/* Location badge — pin SVG + cidade-uf · Região dos Vales. Pill verde sutil
   abaixo do H1, antes do sub. */
.panel__location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  width: fit-content;
  background: rgba(168, 86, 60, 0.14);
  color: var(--primary);
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 2px 0;
}
.panel__location svg { width: 14px; height: 14px; flex-shrink: 0; }
.panel__location[hidden] { display: none; }

/* Body (slot dinâmico por state) */
.panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 33, 26, 0.20) transparent;
}
.panel__body::-webkit-scrollbar { width: 6px; }
.panel__body::-webkit-scrollbar-thumb { background: rgba(0,90,69,0.20); border-radius: 3px; }

/* ============================================================
   Welcome state — nome do empreendimento + bullets + CTA
   ============================================================ */

.panel__bullets {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Bullets premium — card com background sutil, ícone box bigger, peso editorial. */
.panel__bullet {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 16px;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.35;
  color: var(--primary-deep);
  font-weight: 600;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(168, 86, 60, 0.04) 0%, rgba(168, 86, 60, 0.10) 100%);
  border: 1px solid rgba(168, 86, 60, 0.16);
  border-radius: var(--radius-md);
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.panel__bullet:hover {
  border-color: rgba(168, 86, 60, 0.36);
  transform: translateX(2px);
}

.panel__bullet-icon {
  width: 44px; height: 44px;
  color: var(--primary);
  background: rgba(168, 86, 60, 0.16);
  border-radius: 12px;
  padding: 10px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.panel__state--welcome { gap: 16px; }
.panel__state--welcome .btn--next-pill { margin-top: 4px; }

/* ============================================================
   Form steps
   ============================================================ */

.step { display: flex; flex-direction: column; gap: 12px; animation: state-in 320ms var(--ease-out) both; }
.step[hidden] { display: none; }

.step__question {
  font-family: "Work Sans", sans-serif;
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary-deep);
  margin: 0 0 4px;
  text-wrap: balance;
  letter-spacing: -0.025em;
}

.step__hint {
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 8px;
}

/* Step title — quando contém <em> renderiza estilo Cipasa Heritage:
   italic peso 900 verde-lima accent na keyword. */
#step-title em {
  font-style: italic;
  font-weight: 900;
  color: var(--accent-text);
  letter-spacing: -0.03em;
}

/* No form state, o título é a PERGUNTA — escala um pouco menor que o welcome
   H1 (que é o nome do empreendimento). */
.panel__state--form .panel__title {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Price display — card editorial com badge "Tempo limitado" + prefix + headline
   gigante + detail descritivo. Foco visual no preço. */
.price-display {
  background: rgba(168, 86, 60, 0.07);
  border: 1px solid rgba(168, 86, 60, 0.22);
  border-radius: var(--radius-md);
  padding: 38px 22px 20px;
  margin: 6px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  box-shadow: 0 4px 16px -10px rgba(23, 33, 26, 0.16);
}

/* Badge "Tempo limitado" — chip lima destacado, top-right ou top-left */
.price-display__badge {
  position: absolute;
  top: 12px;
  left: 18px;
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px -2px rgba(168, 86, 60, 0.55);
  animation: pulse-badge 2.2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Prefix "Lotes a partir de" — cinza, label de contexto acima do headline */
.price-display__prefix {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 6px;
  opacity: 0.85;
}

/* Headline "R$ 112.500" — peso visual real, dominante */
.price-display__headline {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 900;
  color: var(--primary-deep);
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 2px;
}

/* Detail "Entrada de 10% à vista..." — substantivo em strong (peso 800 escuro) */
.price-display__detail {
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
  margin-top: 8px;
}
.price-display__detail strong {
  color: var(--primary-deep);
  font-weight: 800;
}

.price-display__ask { display: none; }

/* Nota discreta do valor total do lote — hierarquia secundária. */
.price-display__lote {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(23, 33, 26, 0.18);
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.price-display__lote strong {
  color: var(--primary-deep);
  font-weight: 700;
}

/* Radio options — pill rectangular com glow lima */
.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.option--pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--surface-soft);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out),
              background 160ms var(--ease-out),
              transform 100ms var(--ease-out);
  font-size: clamp(15px, 1vw, 17px);
  color: var(--ink);
  font-weight: 500;
}
.option--pill:active { transform: scale(0.98); }

.option--pill:hover {
  border-color: rgba(23, 33, 26, 0.30);
  background: rgba(168, 86, 60, 0.04);
}

.option--pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(23, 33, 26, 0.30);
  background: var(--white);
  display: grid;
  place-items: center;
  transition: all 240ms var(--ease-out);
}

.option__check::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  transform: scale(0);
  transition: transform 220ms var(--ease-out);
}

.option--pill:has(input:checked) {
  border-color: var(--primary);
  background: rgba(168, 86, 60, 0.08);
  color: var(--primary-deep);
  font-weight: 600;
}
.option--pill:has(input:checked) .option__check {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 6px rgba(168, 86, 60, 0.42);  /* GLOW LIMA */
}
.option--pill:has(input:checked) .option__check::after { transform: scale(1); }

/* Inputs — label ACIMA do input (taste pattern). Container pill com ícone
   à esquerda (quando .field--has-icon). Generoso, premium. */
.fields-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 4px;
}

.field--underline { position: relative; display: flex; flex-direction: column; gap: 8px; }

.field--underline label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: auto;
  transition: color 180ms var(--ease-out);
}
.field--underline:has(input:focus) label { color: var(--primary); }

.field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color 200ms var(--ease-out),
              background 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
}
.field__input-wrap:has(input:focus) {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(168, 86, 60, 0.14);
}

.field--underline input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
  font-family: inherit;
  outline: none;
  caret-color: var(--accent);
  font-weight: 500;
}
.field--underline input::placeholder {
  color: var(--muted-soft);
  font-weight: 400;
}

/* Ícone dentro do input wrap — esquerda, vertical center */
.field--has-icon .field__input-wrap { padding-left: 16px; }
.field--has-icon .field__icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-right: 12px;
  transition: color 200ms var(--ease-out);
}
.field--has-icon .field__input-wrap:has(input:focus) .field__icon { color: var(--primary); }
.field--has-icon input { padding-left: 0; }

.field__error {
  display: none;
  margin: 4px 0 0;
  font-size: 12px;
  color: #B84A2E;
}
.field--underline.has-error input { border-bottom-color: #B84A2E; }
.field--underline.has-error .field__error { display: block; }

/* ============================================================
   Footer nav — pill com prev / X de N / next
   ============================================================ */

.panel__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  background: var(--surface-soft);
  border-radius: var(--radius-pill);
  margin-top: auto;
}

.nav__prev {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.nav__prev:hover:not(:disabled) { background: rgba(0,0,0,0.04); }
.nav__prev:disabled { color: rgba(0, 0, 0, 0.22); cursor: default; }

.nav__indicator {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ============================================================
   Botões
   ============================================================ */

/* CTA — base sólida verde + overlay shimmer branco varrendo (esq→dir) com pausa.
   Loop suave (sem jerk) porque o brilho fica parado fora do botão entre passes. */
.btn--next-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  /* CTA TERRACOTA — cor de ação oficial da marca (site usa
     .btn-secondary #A8563C, hover #8F4933). Sistema de cores fecha:
     verde profundo = texto, creme = superfície, terracota = ação. */
  background: linear-gradient(180deg, #B4603F 0%, #9C4F36 100%);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--radius-pill);
  padding: 16px 28px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 22px -8px rgba(156, 79, 54, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 100ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
  text-decoration: none;
}
.btn--next-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 65%
  );
  transform: translateX(-130%);
  animation: cta-shimmer-sweep 3.8s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}
.btn--next-pill > * {
  position: relative;
  z-index: 2;
}
@keyframes cta-shimmer-sweep {
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX( 130%); }
  100% { transform: translateX( 130%); }
}
.btn--next-pill:hover {
  box-shadow: 0 12px 28px -6px rgba(156, 79, 54, 0.62),
              inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .btn--next-pill::before { animation: none; display: none; }
}
.btn--next-pill:active { transform: scale(0.97); }
.btn--next-pill:disabled {
  background: rgba(23, 33, 26, 0.35);
  cursor: not-allowed;
}

/* Spinner do submit */
.btn--next-pill .spinner {
  display: none;
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}
.btn--next-pill.is-loading .spinner { display: inline-block; }
.btn--next-pill.is-loading .btn__label { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Variante institucional — sem gradient/shimmer, tom outline calmo.
   Usado no thanks-d (não-lead): CTA convida sem empurrar. */
.btn--next-pill.btn--soft {
  background: var(--white);
  color: var(--primary);
  border: 1.5px solid rgba(23, 33, 26, 0.28);
  box-shadow: 0 2px 8px -2px rgba(14, 22, 18, 0.08);
}
.btn--next-pill.btn--soft::before { display: none; animation: none; }
.btn--next-pill.btn--soft:hover {
  background: rgba(168, 86, 60, 0.06);
  border-color: rgba(23, 33, 26, 0.48);
  box-shadow: 0 4px 14px -4px rgba(14, 22, 18, 0.14);
}

/* Link "voltar e revisar" no thanks-d — ação secundária discreta */
.thanks__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  margin-top: -4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-strong, #4a5d54);
  cursor: pointer;
  border-radius: 8px;
  transition: color 160ms ease, background 160ms ease;
}
.thanks__back-link svg { opacity: 0.7; transition: transform 200ms ease, opacity 160ms ease; }
.thanks__back-link:hover {
  color: var(--primary);
  background: rgba(23, 33, 26, 0.05);
}
.thanks__back-link:hover svg { transform: translateX(-2px); opacity: 1; }
.thanks__back-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* CTA welcome — peso real mas compacto pra caber sem scroll */
.panel__state--welcome .btn--next-pill {
  padding: 16px 32px;
  font-size: 15.5px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  min-width: 240px;
}

/* ============================================================
   Thanks states — eyebrow + title + lede + timeline steps + facts grid + CTA + trust
   ============================================================ */

.panel__state--thanks-q,
.panel__state--thanks-d {
  gap: 16px;
}

/* Eyebrow chip "Inscrição confirmada" — verde lima destacado */
.thanks__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: rgba(168, 86, 60, 0.14);
  color: var(--primary);
  padding: 8px 14px 8px 36px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
}
.thanks__eyebrow::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  background: var(--primary);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(168, 86, 60, 0.32);
}
.thanks__eyebrow::after {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--white);
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
}

/* Steps timeline próximos passos */
.thanks__steps {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.thanks__steps::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--primary) 0%, rgba(168, 86, 60, 0.18) 100%);
  z-index: 0;
}
.thanks__step {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  position: relative;
  z-index: 1;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 600;
}
.thanks__step-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid rgba(168, 86, 60, 0.36);
  color: var(--muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 200ms var(--ease-out);
}
.thanks__step-icon svg { width: 17px; height: 17px; }
.thanks__step.is-done .thanks__step-icon {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(168, 86, 60, 0.24);
}
.thanks__step.is-done .thanks__step-text { color: var(--primary-deep); }
.thanks__step-text { line-height: 1.3; }

/* Facts grid 3 colunas (Verana em números) */
.thanks__facts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: transparent;
  border-radius: 0;
}
.thanks__fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 12px;
  background: linear-gradient(180deg, rgba(168, 86, 60, 0.06) 0%, rgba(168, 86, 60, 0.12) 100%);
  border: 1px solid rgba(168, 86, 60, 0.22);
  border-radius: var(--radius-md);
}
.thanks__fact strong {
  color: var(--primary-deep);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.thanks__fact span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

/* Trust line — 35 anos + 200+ projetos, sutil rodapé do thanks */
.thanks__trust {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted-soft);
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

/* Thanks D mantém o checkmark estilo original — sem timeline */
.thanks__check {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 8px rgba(23, 33, 26, 0.08);
  margin: 4px 0 4px;
}
.thanks__check svg { width: 26px; height: 26px; }

.panel__state--thanks-q .btn--next-pill,
.panel__state--thanks-d .btn--next-pill {
  align-self: stretch;
  margin-top: auto;
}

/* Mini-footer — logo Cipasa completa (ícone+wordmark+35 anos) + tagline curta. */
.panel__legal {
  font-size: 11px;
  color: var(--muted-soft);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.panel__legal img {
  width: 130px;
  height: auto;
  flex-shrink: 0;
  opacity: 0.92;
}

/* ============================================================
   Welcome Carousel — 4 fotos curadas no topo do welcome state
   ============================================================ */

.welcome-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 2px;
}

.welcome-carousel__viewport {
  position: relative;
  width: 100%;
  /* Desktop: 18:9 (~2:1) — mais presença visual, ainda cabe em 100dvh.
     Mobile herda 16:9 via override (mais alto, vertical). */
  aspect-ratio: 18 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--primary-deep);
  box-shadow:
    0 16px 40px -20px rgba(14, 22, 18, 0.42),
    0 4px 10px -3px rgba(14, 22, 18, 0.14),
    inset 0 0 0 1px rgba(23, 33, 26, 0.06);
}

.welcome-carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 540ms var(--ease-out);
  touch-action: pan-y;
  will-change: transform;
}

.welcome-carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  position: relative;
  background: var(--primary-deep);
}

.welcome-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Overlay sutil bottom — gradient escuro discreto pra "abraçar" o chip glass. */
.welcome-carousel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(14, 22, 18, 0.42) 100%
  );
  pointer-events: none;
}

/* Caption editorial — chip glass (backdrop-blur + border light + radius).
   Isola visualmente do background colorido da foto, mantendo legibilidade
   consistente em qualquer slide (céu azul, verde, terra, etc).
   Pattern: iOS info pill / Apple Music Now Playing chip. */
.welcome-carousel__caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  margin: 0;
  display: inline-block;
  width: auto;
  max-width: calc(100% - 36px);
  text-align: left;
  font-family: "Work Sans", sans-serif;
  font-size: clamp(18px, 1.85vw, 26px);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--white);
  line-height: 1.18;
  padding: 12px 18px;
  background: rgba(14, 22, 18, 0.62);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.45);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out);
}
.welcome-carousel.is-ready .welcome-carousel__caption {
  opacity: 1;
  transform: translateY(0);
}

/* Keyword editorial — italic 900 LIMA Cipasa Heritage + underline lima sutil.
   O chip glass com backdrop-blur garante legibilidade do lima sobre qualquer
   foto (o blur escurece o background uniformemente). */
/* Keyword da caption em CREME CLARO (não terracota — contraste ruim sobre
   foto). Underline terracota forte marca a keyword sem sacrificar leitura. */
.welcome-carousel__caption em {
  font-style: italic;
  font-weight: 900;
  color: #F4EFEA;
  text-decoration: underline;
  text-decoration-color: rgba(184, 92, 62, 0.95);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.welcome-carousel.is-ready .welcome-carousel__caption {
  opacity: 1;
  transform: translateY(0);
}

/* Botões prev/next — flutuantes, glass discreto */
.welcome-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px -2px rgba(14, 22, 18, 0.25);
  transition: opacity 200ms var(--ease-out),
              background 160ms var(--ease-out),
              transform 100ms var(--ease-out);
}
.welcome-carousel__btn--prev { left: 10px; }
.welcome-carousel__btn--next { right: 10px; }

.welcome-carousel:hover .welcome-carousel__btn,
.welcome-carousel:focus-within .welcome-carousel__btn {
  opacity: 1;
}
.welcome-carousel__btn:hover { background: var(--white); }
.welcome-carousel__btn:active { transform: translateY(-50%) scale(0.92); }

/* Dots iOS-style — active 18px lima, idle 6px */
.welcome-carousel__dots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 12px;
}

.welcome-carousel__dot {
  width: 6px;
  height: 6px;
  border: none;
  padding: 0;
  border-radius: 999px;
  background: rgba(23, 33, 26, 0.22);
  cursor: pointer;
  transition: width 360ms var(--ease-out),
              background 360ms var(--ease-out);
}
.welcome-carousel__dot:hover { background: rgba(23, 33, 26, 0.40); }
.welcome-carousel__dot.is-active {
  width: 18px;
  background: var(--accent);
}

/* Skeleton shimmer enquanto a 1ª foto carrega */
.welcome-carousel:not(.is-ready) .welcome-carousel__viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(23, 33, 26, 0.10) 0%,
    rgba(23, 33, 26, 0.20) 50%,
    rgba(23, 33, 26, 0.10) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1400ms linear infinite;
  z-index: 1;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Mobile breakpoint
   ============================================================ */

@media (max-width: 900px) {
  /* Reset do split desktop pra mobile single-column */
  .stage {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    grid-template-columns: none;
  }

  .stage__bg {
    position: relative;
    grid-column: auto;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    z-index: 0;
    min-height: 0;
  }

  .stage__overlay {
    position: absolute;
    inset: 0;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .panel {
    position: relative;
    grid-column: auto;
    z-index: 2;
    margin: -12px 0 0;
    width: 100%;
    min-height: 0;
    max-height: none;
    height: auto;
    flex: 1 1 auto;
    border-radius: 24px 24px 0 0;
    padding: 22px 18px 14px;
    gap: 12px;
    box-shadow: 0 -10px 28px -10px rgba(14, 22, 18, 0.22);
    justify-content: flex-start;
    overflow-y: visible;
  }
  .panel > *, .panel__state { max-width: 100%; }
  .panel__state--welcome { gap: 14px; }
  .panel__state { gap: 12px; }
  /* Mais margem ao redor do H1: panel__head ganha respiro extra */
  .panel__head { gap: 10px; padding: 2px 0 4px; }

  /* Tipografia mobile — single-screen real (cabe em iPhone 13/14 ~844dvh).
     H1 grande mas line-height tight; bullets compactos. */
  .panel__chip { display: none; }
  .panel__title { font-size: 32px; line-height: 1.02; letter-spacing: -0.028em; font-weight: 800; }
  .panel__sub { font-size: 14px; line-height: 1.4; }
  .step__question { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
  .step__hint { font-size: 13.5px; }
  .option--pill { padding: 13px 16px; font-size: 14.5px; font-weight: 500; }
  .option__check { width: 18px; height: 18px; }
  .field--underline input { font-size: 16px; height: 48px; padding: 0 16px; }
  .field--has-icon .field__input-wrap { padding-left: 16px; }
  .field__input-wrap { border-radius: var(--radius-md); }
  .field--underline label { font-size: 11.5px; letter-spacing: 0.10em; }
  .panel__nav { padding: 4px; }
  .nav__prev { padding: 9px 13px; font-size: 13px; }
  .nav__indicator { font-size: 12.5px; font-weight: 600; }
  .btn--next-pill { padding: 12px 20px; font-size: 14px; }
  .panel__state--welcome .btn--next-pill { padding: 14px 24px; font-size: 14.5px; min-width: 0; align-self: stretch; margin-top: 2px; }
  .panel__bullets { gap: 5px; margin-top: 0; }
  .panel__bullet { font-size: 13px; grid-template-columns: 28px 1fr; gap: 10px; line-height: 1.25; font-weight: 600; padding: 7px 11px; border-radius: 9px; }
  .panel__bullet-icon { width: 28px; height: 28px; padding: 6px; border-radius: 8px; }
  /* Step header maior mobile */
  .step__icon { width: 48px; height: 48px; border-radius: 12px; }
  .step__icon svg { width: 26px; height: 26px; }
  .panel__state--form #step-title[data-eyebrow]:not([data-eyebrow=""])::before { font-size: 10.5px; margin-bottom: 6px; }
  .panel__state--form .panel__title { font-size: 22px; }
  /* Price-display mobile compacto */
  .price-display__headline { font-size: 32px; }
  .price-display__detail { font-size: 13.5px; }
  .price-display__badge { font-size: 10px; padding: 5px 10px; left: 14px; }
  .panel__legal { font-size: 11px; padding-top: 22px; margin-top: 6px; gap: 8px; }
  .panel__legal img { width: 108px; opacity: 0.85; }
  /* Location badge mobile maior — ganha presença */
  .panel__location { font-size: 12.5px; padding: 7px 13px 7px 11px; }
  .panel__location svg { width: 15px; height: 15px; }
  .thanks__check { width: 48px; height: 48px; }
  .thanks__check svg { width: 22px; height: 22px; }
  /* Carrossel mobile: 20:9 mais compacto (era 16:9) — economiza ~80px */
  .welcome-carousel__viewport { aspect-ratio: 20 / 9; }
  .welcome-carousel__caption {
    font-size: 15px;
    padding: 8px 12px;
    bottom: 10px;
    left: 10px;
    line-height: 1.12;
    font-weight: 700;
    max-width: calc(100% - 20px);
    border-radius: 10px;
  }
  .welcome-carousel { gap: 6px; margin: 2px 0 0; }
  .welcome-carousel__dots { height: 10px; }
  .welcome-carousel__dot { width: 4px; height: 4px; }
  .welcome-carousel__dot.is-active { width: 14px; }

  /* Mobile: stage__bg compacto (16dvh) — logo Verana respira sem dominar.
     Single screen real: tudo cabe em ~844px sem scroll. */
  .stage__bg {
    aspect-ratio: auto;
    height: clamp(110px, 16dvh, 150px);
    min-height: 0;
  }
  .stage__brand-mark { width: clamp(90px, 22vw, 120px); }
  .stage__brand-mark--tripoli { width: clamp(110px, 26vw, 140px); }
  .stage__brand-type .brand-line { font-size: clamp(24px, 7vw, 34px); }
  .stage__brand-type .brand-sub { margin-top: 6px; font-size: 9px; letter-spacing: 0.34em; }

  /* Carrossel mobile: viewport 21:9 letterbox — economiza altura, deixa imagem mais discreta */
  .welcome-carousel__viewport { aspect-ratio: 21 / 9; }
  .panel__state--welcome .welcome-carousel { margin: 4px 0 2px; }
  .welcome-carousel__btn { width: 28px; height: 28px; opacity: 0.92; }
  .welcome-carousel__btn--prev { left: 8px; }
  .welcome-carousel__btn--next { right: 8px; }
  .welcome-carousel__caption { font-size: 15px; left: 14px; bottom: 12px; }
  .welcome-carousel__dot { width: 5px; height: 5px; }
  .welcome-carousel__dot.is-active { width: 16px; }

  /* Mobile altura consistente entre steps: panel cresce sob demanda
     (não fixa max-height; conteúdo define) */
  .panel { min-height: auto; }
  .panel__state { min-height: 380px; }
  .panel__state--form { min-height: 420px; }

  /* Price display mobile: tamanho intermediário, headline ainda dominante */
  .price-display { padding: 34px 20px 18px; gap: 4px; }
  .price-display::before { font-size: 10px; top: 14px; right: 16px; }
  .price-display__headline { font-size: 34px; margin-top: 4px; }
  .price-display__detail { font-size: 14px; }
}

@media (max-width: 480px) {
  .panel { padding: 20px 18px 16px; }
  .panel__state--form .panel__title { font-size: 20px; }
}

/* Viewport altura curta (laptops 13" ~720px) — compactar pra caber sem scroll */
@media (min-width: 901px) and (max-height: 1020px) {
  .panel { padding: 24px clamp(28px, 4vw, 56px); gap: 14px; }
  .panel__state { gap: 12px; }
  .panel__state--welcome { gap: 12px; }
  .panel__title { font-size: clamp(28px, 3.4vw, 44px) !important; }
  .panel__sub { font-size: 14.5px !important; }
  .panel__bullets { gap: 8px; }
  .panel__bullet { font-size: 13.5px; }
  .panel__bullet-icon { width: 24px; height: 24px; padding: 5px; }
  /* Viewport curto (laptops 13") — carrossel mais letterbox pra caber */
  .welcome-carousel__viewport { aspect-ratio: 22 / 9; }
  .welcome-carousel__caption { font-size: 18px; padding: 10px 14px; bottom: 14px; left: 14px; }
  .panel__state--welcome .btn--next-pill { padding: 13px 26px; font-size: 14.5px; }
  .panel__legal { font-size: 10.5px; padding-top: 8px; }
  .panel__legal img { width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .bg-slide { transition: opacity 200ms ease-in-out; }
  .bg-slide.is-zooming { animation: none; transform: scale(1.0); }
  .welcome-carousel__track { transition: none; }
  .welcome-carousel:not(.is-ready) .welcome-carousel__viewport::before { animation: none; }
}

/* ============================================================
   Polish welcome MOBILE (2026-07-14) — mesmo tratamento do
   Alvorada + sistema de cores da marca com papéis claros:
   · terracota (#A8563C) = acentos (eyebrow, ícones, filetes)
   · verde botânico profundo = tipografia
   · creme (#F4EFEA/#EBE4DE) = superfície do bloco spec-sheet
   · verde vivo = só o CTA (ação)
   Desktop intocado; vence os blocos acima pela ordem.
   ============================================================ */
@media (max-width: 900px) {
  .panel__state--welcome .panel__head { gap: 7px; padding: 2px 0; }

  /* Localização vira eyebrow tipográfica terracota acima do título. */
  .panel__state--welcome .panel__location {
    order: -1;
    background: none;
    padding: 0;
    margin: 0;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
  }
  .panel__state--welcome .panel__location svg { width: 13px; height: 13px; }

  .panel__state--welcome .panel__title {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.03em;
  }
  .panel__state--welcome .panel__sub { font-size: 14.5px; line-height: 1.5; }

  /* Bullets: UM container spec-sheet em CREME de marca (não alpha
     rosada sobre branco), hairlines terracota entre os itens. */
  .panel__state--welcome .panel__bullets {
    gap: 0;
    margin: 10px 0 4px;
    background: linear-gradient(160deg, #F7F3EE 0%, #F1EAE2 100%);
    border: 1px solid rgba(168, 86, 60, 0.20);
    border-radius: 14px;
    overflow: hidden;
  }
  .panel__state--welcome .panel__bullet {
    grid-template-columns: 30px 1fr;
    align-items: start;
    gap: 12px;
    padding: 11px 14px;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary);
  }
  .panel__state--welcome .panel__bullet + .panel__bullet {
    border-top: 1px solid rgba(168, 86, 60, 0.16);
  }
  /* Evita palavra órfã na 2ª linha dos bullets. */
  .panel__state--welcome .panel__bullet span { text-wrap: pretty; }
  .panel__state--welcome .panel__bullet:hover { transform: none; }
  .panel__state--welcome .panel__bullet strong { font-weight: 800; }
  /* Chip ancorado na PRIMEIRA linha; ícone em terracota (acento). */
  .panel__state--welcome .panel__bullet-icon {
    width: 30px;
    height: 30px;
    padding: 6.5px;
    border-radius: 999px;
    margin-top: -5px;
    background: rgba(168, 86, 60, 0.13);
    color: var(--accent-text);
  }
}

/* ============================================================
   Entrada em cascata do welcome (2026-07-14) — rise suave por
   bloco: head → bullets → carrossel → CTA. Zero JS.
   ============================================================ */
.panel__state--welcome > * { animation: welcome-rise 640ms var(--ease-out) both; }
.panel__state--welcome > *:nth-child(1) { animation-delay: 70ms; }
.panel__state--welcome > *:nth-child(2) { animation-delay: 160ms; }
.panel__state--welcome > *:nth-child(3) { animation-delay: 250ms; }
.panel__state--welcome > *:nth-child(4) { animation-delay: 340ms; }
.panel__state--welcome > *:nth-child(5) { animation-delay: 430ms; }
@keyframes welcome-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .panel__state--welcome > * { animation: none; }
}

/* Zoom lock — mata pinch e double-tap zoom via CSS (par do bloqueio
   de gesture events no form.js; iOS ignora a meta user-scalable). */
html, body { touch-action: pan-x pan-y; }