/* ============================================================
   Viva Nativa · Diagnóstico
   One-step-per-screen. Hero drenched oliva + card bege.
   Spectral italic carrega o emocional, Hanken Grotesk no corpo.
   ============================================================ */

:root {
  --oliva-900: #111111;
  --oliva-700: #1A1A1A;
  --oliva-500: #3A3A3A;
  --oliva-300: #DADADA;
  --ouro-600:  #E85D1F;
  --ouro-700:  #C44E15;
  --ouro-400:  #F2913F;
  --bege-100:  #F6F5F2;
  --bege-50:   #FCFBF9;
  --branco:    #FFFFFF;
  --erro:      #A8442F;

  --ff-display: "Spectral", Georgia, serif;
  --ff-body: "Hanken Grotesk", system-ui, sans-serif;

  --wrap-pad: clamp(1.25rem, 5vw, 3rem);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@supports (color: oklch(0.5 0.1 120)) {
  :root {
    --oliva-900: oklch(0.18 0 0);
    --oliva-700: oklch(0.23 0 0);
    --oliva-500: oklch(0.37 0 0);
    --oliva-300: oklch(0.89 0 0);
    --ouro-600:  oklch(0.65 0.18 47);
    --ouro-700:  oklch(0.56 0.16 47);
    --ouro-400:  oklch(0.74 0.13 55);
    --bege-100:  oklch(0.97 0.004 80);
    --bege-50:   oklch(0.99 0.003 80);
    --branco:    oklch(1 0 0);
    --erro:      oklch(0.50 0.13 35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

.diag-body {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--branco);
  background: var(--oliva-700);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

input, textarea, button { font: inherit; }

/* ============================================================
   DECORAÇÃO ORGÂNICA, fixa atrás de tudo
   ============================================================ */
.diag-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.diag-decor__leaf {
  position: absolute;
  color: var(--oliva-900);
  opacity: 0.16;
}
.diag-decor__leaf--a {
  width: clamp(180px, 30vw, 340px);
  top: -40px;
  right: -70px;
  transform: rotate(28deg);
}
.diag-decor__leaf--b {
  width: clamp(150px, 24vw, 280px);
  bottom: -60px;
  left: -80px;
  transform: rotate(-150deg);
}
.diag-decor__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--oliva-900);
  opacity: 0.12;
}
.diag-decor__ring--a {
  width: 420px; height: 420px;
  bottom: 8%; right: -120px;
}
.diag-decor__ring--b {
  width: 260px; height: 260px;
  top: 18%; left: -110px;
}

/* ============================================================
   HEADER FIXO
   ============================================================ */
.diag-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem) var(--wrap-pad);
  background: var(--oliva-900);
}
.diag-top__brand {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--branco);
  text-decoration: none;
}
.diag-top__brand em { font-style: italic; color: var(--ouro-400); }
.diag-top__brand:hover em { color: var(--ouro-600); }
.diag-top__seal {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--oliva-300);
  white-space: nowrap;
}

/* ============================================================
   SHELL
   ============================================================ */
.diag-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 3.5rem) var(--wrap-pad) clamp(3rem, 8vw, 5rem);
}

/* ============================================================
   ETAPAS, uma tela por vez com fade+slide
   ============================================================ */
.diag-step { display: none; }
.diag-step.is-active {
  display: block;
  animation: diagStepIn 0.35s var(--ease-expo) both;
}
@keyframes diagStepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- HERO da etapa ---------- */
.diag-hero { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.diag-hero__progress {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--oliva-300);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.diag-hero__progress::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ouro-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ouro-400) 28%, transparent);
}
.diag-hero__kicker {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ouro-400);
  margin-bottom: 0.7rem;
}
.diag-hero__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 7vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--branco);
  margin-bottom: 0.85rem;
}
.diag-hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--ouro-400);
}
.diag-hero__lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bege-100);
  max-width: 46ch;
}

/* ============================================================
   CARD bege, superfície de respiro
   ============================================================ */
.diag-card {
  background: var(--bege-50);
  border-radius: 12px;
  padding: clamp(1.5rem, 5vw, 2.4rem);
  box-shadow: 0 30px 70px -38px rgba(0,0,0, 0.65);
  color: var(--oliva-900);
}

/* ---------- campos ---------- */
.field { margin-bottom: 1.5rem; }
.field:last-of-type { margin-bottom: 0; }
.field label,
.field__legend {
  display: block;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--oliva-700);
  margin-bottom: 0.55rem;
}
.field__legend small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--oliva-500);
  font-size: 0.82rem;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font-size: 1.0625rem;
  color: var(--oliva-900);
  background: var(--branco);
  border: 1.5px solid var(--oliva-300);
  border-radius: 8px;
  padding: 0.95rem 1.05rem;
  transition: border-color 0.2s var(--ease-expo), box-shadow 0.2s var(--ease-expo);
}
.field textarea { resize: vertical; line-height: 1.55; min-height: 5.2rem; }
.field input::placeholder,
.field textarea::placeholder { color: var(--oliva-300); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ouro-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro-400) 35%, transparent);
}

.field.has-error input,
.field.has-error textarea { border-color: var(--erro); }
.field__err {
  display: none;
  font-size: 0.85rem;
  color: var(--erro);
  margin-top: 0.45rem;
}
.field.has-error .field__err { display: block; }
.field__err--standalone { margin-top: 0.6rem; }

.field--cond { margin-top: 1rem; margin-bottom: 0; }

/* ---------- radios sim/não em pílula ---------- */
.choice { display: flex; gap: 0.75rem; }
.choice__opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--oliva-700);
  background: var(--branco);
  border: 1.5px solid var(--oliva-300);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-expo), background-color 0.2s var(--ease-expo);
}
.choice__opt input { accent-color: var(--ouro-600); }
.choice__opt:has(input:checked) {
  border-color: var(--ouro-600);
  background: color-mix(in srgb, var(--ouro-400) 18%, var(--branco));
}

/* ---------- checkboxes condições ---------- */
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--oliva-900);
  background: var(--branco);
  border: 1.5px solid var(--oliva-300);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-expo);
}
.check input { accent-color: var(--ouro-600); }
.check:has(input:checked) {
  border-color: var(--ouro-600);
  background: color-mix(in srgb, var(--ouro-400) 12%, var(--branco));
}

/* ============================================================
   CTA pílula, ouro sólido, full-width
   ============================================================ */
.diag-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.9rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--oliva-900);
  background: var(--ouro-600);
  border: 0;
  border-radius: 999px;
  padding: 1.05rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-expo), transform 0.2s var(--ease-expo), box-shadow 0.2s var(--ease-expo);
}
.diag-cta:hover {
  background: var(--ouro-400);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(196,78,21, 0.7);
}
.diag-cta:active { transform: translateY(0); }
.diag-cta[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.diag-cta--auto { width: auto; align-self: center; margin-inline: auto; padding-inline: 2.4rem; }

/* ============================================================
   SELOS de garantia abaixo do card (só etapa 1)
   ============================================================ */
.diag-seals {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.diag-seals li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--bege-100);
}
.diag-seals li::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ouro-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 70% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ============================================================
   VOLTAR, link discreto
   ============================================================ */
.diag-back {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--oliva-300);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s var(--ease-expo);
}
.diag-back::before { content: "\2190\00a0\00a0"; }
.diag-back:hover { color: var(--bege-100); }

/* ============================================================
   SLOTS de agenda
   ============================================================ */
.diag-slots-hint {
  font-size: 0.95rem;
  color: var(--oliva-500);
  margin-bottom: 1.4rem;
}
.slots {
  display: grid;
  gap: 1.5rem;
  max-height: 44vh;
  overflow-y: auto;
  padding-right: 0.3rem;
}
.slots__loading,
.slots__empty {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--oliva-500);
}
.slot-day__label {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--oliva-700);
  margin-bottom: 0.7rem;
}
.slot-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.6rem;
}
.slot-pill {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--oliva-700);
  background: var(--branco);
  border: 1.5px solid var(--oliva-300);
  border-radius: 999px;
  padding: 0.62rem 0.5rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s var(--ease-expo), background-color 0.15s var(--ease-expo), color 0.15s var(--ease-expo);
}
.slot-pill:hover { border-color: var(--ouro-600); }
.slot-pill.is-selected {
  background: var(--ouro-600);
  border-color: var(--ouro-600);
  color: var(--oliva-900);
}

/* ============================================================
   TELA DE CONCLUSÃO
   ============================================================ */
.diag-step--done .diag-done {
  background: var(--bege-50);
  border-radius: 12px;
  padding: clamp(2rem, 6vw, 3rem);
  text-align: center;
  box-shadow: 0 30px 70px -38px rgba(0,0,0, 0.65);
  color: var(--oliva-900);
}
.diag-done__mark {
  width: 76px; height: 76px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: var(--oliva-700);
  color: var(--ouro-400);
  display: flex;
  align-items: center;
  justify-content: center;
}
.diag-step--done .diag-hero__kicker { color: var(--ouro-700); }
.diag-done__title {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  line-height: 1.12;
  color: var(--oliva-900);
  margin-bottom: 1.1rem;
}
.diag-done__msg {
  font-size: 1.1rem;
  color: var(--oliva-700);
  max-width: 44ch;
  margin: 0 auto 1.2rem;
  line-height: 1.6;
}
.diag-done__sub {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--oliva-500);
  max-width: 40ch;
  margin: 0 auto 2rem;
}

/* ============================================================
   PRIVACIDADE
   ============================================================ */
.diag-privacy {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  padding: 0 var(--wrap-pad);
  text-align: center;
  font-size: 0.82rem;
  color: var(--oliva-300);
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width: 600px) {
  .checks { grid-template-columns: 1fr 1fr 1fr; }
  .diag-seals { flex-direction: row; flex-wrap: wrap; gap: 1.1rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .diag-step.is-active { animation: none; }
  .diag-cta:hover { transform: none; }
}