/* Zenfila — landing (vertical: clínicas e centros de saúde).
   Nenhum framework. Tokens em css/tokens.css, marca em css/brand.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--zf-surface);
  font-family: var(--zf-font-sans); font-size: 17px; line-height: 1.6;
  color: var(--zf-ink); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--zf-font-display); font-weight: 400; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; font-weight: 500; letter-spacing: -.015em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--zf-primary); text-decoration: none; }
a:hover { color: var(--zf-primary-hover); }
:focus-visible { outline: none; box-shadow: var(--zf-focus-ring); border-radius: var(--zf-radius-sm); }

.wrap { width: 100%; max-width: var(--zf-wrap); margin: 0 auto; padding: 0 var(--zf-space-6); }
.eyebrow {
  font-family: var(--zf-font-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--zf-primary);
}
.eyebrow--dim { color: var(--zf-ink-4); }
.eyebrow--panel { color: var(--zf-panel-ink-4); }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--zf-ink-2); }
.section { padding: var(--zf-space-28) 0; }
.section--mist { background: var(--zf-canvas); }
.section__head { display: flex; flex-direction: column; gap: var(--zf-space-4); max-width: 720px; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--zf-space-2);
  min-height: 48px; padding: 13px 24px; border: 1.5px solid transparent;
  border-radius: var(--zf-radius-sm); cursor: pointer;
  font-family: var(--zf-font-sans); font-size: 16px; font-weight: 700;
  transition: background var(--zf-dur-fast) var(--zf-ease), border-color var(--zf-dur-fast) var(--zf-ease), color var(--zf-dur-fast) var(--zf-ease);
}
.btn--primary { background: var(--zf-primary); border-color: var(--zf-primary); color: #FFFFFF; }
.btn--primary:hover { background: var(--zf-primary-hover); border-color: var(--zf-primary-hover); color: #FFFFFF; }
.btn--secondary { background: var(--zf-surface); border-color: var(--zf-teal-200); color: var(--zf-primary); font-weight: 600; }
.btn--secondary:hover { background: var(--zf-teal-50); border-color: var(--zf-primary); }
.btn--on-dark { background: var(--zf-accent); border-color: var(--zf-accent); color: var(--zf-calling-ink); }
.btn--on-dark:hover { background: #E09512; border-color: #E09512; color: var(--zf-calling-ink); }
.btn--ghost-dark { background: transparent; border-color: var(--zf-panel-line); color: #FFFFFF; font-weight: 600; }
.btn--ghost-dark:hover { background: rgba(255,255,255,.08); border-color: var(--zf-panel-ink-4); color: #FFFFFF; }
.btn__wa { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--zf-space-3); align-items: center; }
.btn-note { font-family: var(--zf-font-mono); font-size: 13px; color: var(--zf-ink-3); }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.94); border-bottom: 1px solid var(--zf-line);
  backdrop-filter: saturate(1.4) blur(6px);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--zf-space-6); min-height: 72px; }
.topbar__nav { display: flex; align-items: center; gap: var(--zf-space-6); }
.topbar__nav a { font-size: 15px; font-weight: 600; color: var(--zf-ink-2); }
.topbar__nav a:hover { color: var(--zf-primary); }
@media (max-width: 860px) { .topbar__nav { display: none; } }

/* ---------- hero ---------- */
.hero { padding: var(--zf-space-28) 0 var(--zf-space-20); }
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--zf-space-16); align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: var(--zf-space-6); }
.hero h1 em { font-style: normal; font-weight: 600; color: var(--zf-primary-deep); }
.hero__proof { display: flex; flex-wrap: wrap; gap: var(--zf-space-2) var(--zf-space-5); padding-top: var(--zf-space-2); }
.hero__proof span { display: inline-flex; align-items: center; gap: var(--zf-space-2); font-size: 15px; color: var(--zf-ink-2); }
.hero__proof i { width: 7px; height: 7px; border-radius: 50%; background: var(--zf-mint); flex: 0 0 auto; }
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--zf-space-12); }
  .hero { padding: var(--zf-space-16) 0 var(--zf-space-12); }
  .section { padding: var(--zf-space-20) 0; }
}

/* ---------- mock do painel de TV (hero) ---------- */
.panel {
  background: var(--zf-primary-deep); border-radius: var(--zf-radius-lg);
  padding: var(--zf-space-8); display: flex; flex-direction: column; gap: var(--zf-space-6);
  aspect-ratio: 16 / 10;
}
.panel__top { display: flex; align-items: center; justify-content: space-between; gap: var(--zf-space-4); }
.panel__client { font-family: var(--zf-font-display); font-weight: 500; font-size: 20px; color: #FFFFFF; }
.panel__clock { font-family: var(--zf-font-display); font-weight: 300; font-size: 24px; color: var(--zf-panel-ink-2); }
.panel__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--zf-space-2); align-items: flex-start; }
.panel__ticket { font-family: var(--zf-font-display); font-weight: 600; font-size: clamp(56px, 8vw, 96px); line-height: 1; letter-spacing: -.04em; color: #FFFFFF; }
.panel__target { font-family: var(--zf-font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; color: var(--zf-accent); }
.panel__hist { display: flex; flex-direction: column; gap: var(--zf-space-3); border-top: 1px solid var(--zf-panel-line); padding-top: var(--zf-space-4); }
.panel__hist-row { display: flex; flex-wrap: wrap; gap: var(--zf-space-3); }
.panel__hist-item { display: flex; align-items: baseline; gap: var(--zf-space-2); background: var(--zf-panel-card); padding: 8px 14px; border-radius: var(--zf-radius-sm); }
.panel__hist-item b { font-family: var(--zf-font-display); font-weight: 500; font-size: 19px; color: #FFFFFF; }
.panel__hist-item span { font-size: 13px; color: var(--zf-panel-ink-3); }

/* ---------- chip de estado ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--zf-space-2);
  padding: 6px 14px; border-radius: var(--zf-radius-pill);
  font-size: 14px; font-weight: 700;
}
.chip i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.chip--calling { background: var(--zf-accent); color: var(--zf-calling-ink); }
.chip--calling i { background: var(--zf-calling-ink); animation: zf-pulse var(--zf-dur-slow) var(--zf-ease) infinite; }
.chip--wait { background: var(--zf-wait-surface); color: var(--zf-wait-ink); font-weight: 600; }
.chip--wait i { background: #8B99A5; }
.chip--served { background: var(--zf-served-surface); color: var(--zf-served-ink); font-weight: 600; }
.chip--served i { background: var(--zf-mint); }
.chip--priority { background: var(--zf-priority-surface); color: var(--zf-priority-ink); }
.chip--priority i { background: var(--zf-coral); }

/* ---------- faixa de contraste ---------- */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zf-space-6); margin-top: var(--zf-space-12); }
.contrast__col {
  background: var(--zf-surface); border: 1px solid var(--zf-line); border-radius: var(--zf-radius-lg);
  padding: var(--zf-space-8); display: flex; flex-direction: column; gap: var(--zf-space-4);
}
.contrast__col--ours { border-color: var(--zf-teal-200); background: var(--zf-teal-50); }
.contrast__list { display: flex; flex-direction: column; gap: var(--zf-space-3); margin: 0; padding: 0; list-style: none; }
.contrast__list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--zf-space-3); font-size: 16px; color: var(--zf-ink-2); }
.contrast__list b { font-weight: 800; font-size: 15px; }
.contrast__list--bad b { color: var(--zf-coral); }
.contrast__list--good b { color: var(--zf-mint); }
@media (max-width: 780px) { .contrast { grid-template-columns: 1fr; } }

/* ---------- passos ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zf-space-6); margin-top: var(--zf-space-12); }
.step {
  background: var(--zf-surface); border-radius: var(--zf-radius-lg); box-shadow: var(--zf-shadow-1);
  padding: var(--zf-space-8); display: flex; flex-direction: column; gap: var(--zf-space-4);
}
.step__n { font-family: var(--zf-font-mono); font-size: 13px; color: var(--zf-primary); }
.step p { font-size: 16px; color: var(--zf-ink-2); }
.step__demo { margin-top: auto; padding-top: var(--zf-space-5); display: flex; flex-wrap: wrap; gap: var(--zf-space-2); align-items: center; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* ---------- features ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zf-space-6) var(--zf-space-10); margin-top: var(--zf-space-12); }
.feature { display: flex; flex-direction: column; gap: var(--zf-space-3); padding-top: var(--zf-space-5); border-top: 2px solid var(--zf-line); }
.feature--hot { border-top-color: var(--zf-accent); }
.feature p { font-size: 16px; color: var(--zf-ink-2); }
@media (max-width: 900px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

/* ---------- integração ---------- */
.integra { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zf-space-16); align-items: start; }
/* variantes de integração: genérica (visível) e Gemed (oculta) — ver index.html */
[hidden] { display: none !important; }

/* diagrama de integração — construído com partes do DS, não imagem */
.wire {
  background: var(--zf-surface); border: 1px solid var(--zf-line); border-radius: var(--zf-radius-lg);
  box-shadow: var(--zf-shadow-1); padding: var(--zf-space-6);
  display: flex; flex-direction: column; gap: var(--zf-space-3);
}
.wire__node {
  border: 1px solid var(--zf-line); border-radius: var(--zf-radius-md);
  padding: var(--zf-space-5); display: flex; flex-direction: column; gap: var(--zf-space-1);
}
.wire__node--host { background: var(--zf-surface-mist); border-style: dashed; border-color: var(--zf-line-strong); }
.wire__node--ours { background: var(--zf-teal-50); border-color: var(--zf-teal-200); }
.wire__node b { font-family: var(--zf-font-display); font-weight: 500; font-size: 18px; letter-spacing: -.015em; }
.wire__node > span { font-size: 14px; color: var(--zf-ink-2); }
.wire__node em { font-family: var(--zf-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--zf-ink-4); }
.wire__surfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--zf-space-2); margin-top: var(--zf-space-2); }
.wire__surface {
  background: var(--zf-surface); border: 1px solid var(--zf-teal-200); border-radius: var(--zf-radius-sm);
  padding: 10px 8px; text-align: center; font-size: 13px; font-weight: 600; color: var(--zf-primary-deep);
}
.wire__link {
  display: flex; align-items: center; gap: var(--zf-space-3);
  font-family: var(--zf-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--zf-primary);
  padding-left: var(--zf-space-2);
}
.wire__link::before { content: ""; width: 2px; height: 22px; background: var(--zf-teal-200); flex: 0 0 auto; }
.wire__foot { font-family: var(--zf-font-mono); font-size: 12px; color: var(--zf-ink-3); padding-top: var(--zf-space-2); }
@media (max-width: 980px) { .integra { grid-template-columns: 1fr; gap: var(--zf-space-10); } }
@media (max-width: 520px) { .wire__surfaces { grid-template-columns: 1fr; } }

/* ---------- recepção (mock) ---------- */
.recep { border: 1px solid var(--zf-line); border-radius: var(--zf-radius-lg); overflow: hidden; background: var(--zf-surface); box-shadow: var(--zf-shadow-1); }
.recep__head, .recep__row { display: grid; grid-template-columns: 78px 1fr 76px 130px; gap: var(--zf-space-3); align-items: center; padding: 12px 16px; }
.recep__head { border-bottom: 1px solid var(--zf-line); font-family: var(--zf-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--zf-ink-4); }
.recep__row { border-bottom: 1px solid var(--zf-line); border-left: 4px solid var(--zf-line); min-height: 56px; }
.recep__row:last-child { border-bottom: none; }
.recep__row--calling { background: #FDF6E7; border-left-color: var(--zf-accent); }
.recep__row--priority { border-left-color: var(--zf-coral); }
.recep__row--served { border-left-color: var(--zf-mint); }
.recep__ticket { font-family: var(--zf-font-mono); font-size: 15px; font-weight: 500; }
.recep__wait { font-family: var(--zf-font-mono); font-size: 13px; color: var(--zf-ink-3); }
@media (max-width: 620px) {
  .recep__head, .recep__row { grid-template-columns: 70px 1fr 116px; }
  .recep__wait { display: none; }
}

/* ---------- cta final ---------- */
.cta { background: var(--zf-primary-deep); color: #FFFFFF; padding: var(--zf-space-28) 0; }
.cta__in { display: flex; flex-direction: column; gap: var(--zf-space-6); align-items: flex-start; max-width: 760px; }
.cta h2 { color: #FFFFFF; }
.cta p { color: var(--zf-panel-ink-2); font-size: 19px; }
.cta__note { font-family: var(--zf-font-mono); font-size: 13px; color: var(--zf-panel-ink-4); }

/* ---------- rodapé ---------- */
.footer { background: var(--zf-ink); color: #E3E8EC; padding: var(--zf-space-16) 0 var(--zf-space-10); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--zf-space-10); }
.footer__by { margin-top: var(--zf-space-5); font-size: 15px; color: #B6C1CC; }
.footer__by strong { color: #FFFFFF; font-weight: 700; }
.footer h4 { font-family: var(--zf-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8FA0AE; margin: 0 0 var(--zf-space-4); font-weight: 400; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--zf-space-3); }
.footer a { color: #E3E8EC; font-size: 15px; }
.footer a:hover { color: #FFFFFF; text-decoration: underline; }
.footer__legal { margin-top: var(--zf-space-12); padding-top: var(--zf-space-5); border-top: 1px solid #33404E; display: flex; flex-wrap: wrap; gap: var(--zf-space-4) var(--zf-space-8); font-family: var(--zf-font-mono); font-size: 12px; color: #8FA0AE; }
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; gap: var(--zf-space-8); } }

/* ---------- CTA flutuante do WhatsApp ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  display: inline-flex; align-items: center; gap: var(--zf-space-2);
  padding: 14px 20px; border-radius: var(--zf-radius-pill);
  background: var(--zf-primary); color: #FFFFFF; font-weight: 700; font-size: 15px;
  box-shadow: var(--zf-shadow-2); transition: background var(--zf-dur-fast) var(--zf-ease);
}
.wa-float:hover { background: var(--zf-primary-hover); color: #FFFFFF; }
.wa-float svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 620px) { .wa-float span { display: none; } .wa-float { padding: 16px; } }