/* ============================================================
   BOOKING.CSS v b33 — AGENDAMENTO PREMIUM (base B32 aprovada;
   refinamento de acabamento: etapa "Como funciona", padrão único
   dos campos do formulário e lateral de contato padronizada).
   Arquivo EXCLUSIVO de agendamento.php. otavio.css (Home) carrega
   antes: tokens/tipografia/header/footer. Contrato F1 intacto:
   .f1-form-grid, honeypot, campos, .f1-submit-error, #bk-aria-live,
   tokens --bk-* (js agendamento-contact.js).
   ============================================================ */

:root {
  --bk-band: #DCE5EB;          /* faixa suave azul-acinzentada (ref) */
  --bk-band-ink: #33454F;
  --bk-mint: #EAF1E7;          /* card WhatsApp direto (verde pálido ref) */
  --bk-mint-ink: #25414B;
  /* aliases para agendamento-contact.js (sucesso) */
  --bk-font-editorial: var(--font-display);
  --bk-muted: var(--ink-soft);
  --bk-night: var(--green-deep);
}

/* Utilitários */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.o-main { display: block; }
body :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* ── Header ──────────────────────────────────────────────── */
.o-header .bk-nav a { font-size: .9rem; color: var(--ink-soft); text-decoration: none; padding: 10px 4px; white-space: nowrap; }
.o-header .bk-nav a:hover { color: var(--green); }

/* ── HERO: texto | fotografia (B32 intacta) ──────────────── */
.bk-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
  align-items: stretch;
  background: var(--bg);
}
.bk-hero-copy {
  align-self: center;
  padding: clamp(40px, 5vw, 76px) clamp(28px, 4.5vw, 72px)
           clamp(44px, 5vw, 78px) clamp(28px, calc((100vw - var(--container)) / 2 + var(--gutter)), 50vw);
  max-width: 640px;
}
.bk-hero .o-section-label { margin: 0; }
.bk-hero-title { font-size: clamp(2.5rem, 4.2vw, 3.55rem); margin: 18px 0 0; }
.bk-hero-lead { margin: 20px 0 0; font-size: 1rem; max-width: 48ch; }
.bk-hero .o-hero-actions { margin-top: 26px; }
.bk-wa-ico { flex: none; opacity: .95; }
.bk-hero-photo { margin: 0; align-self: stretch; min-height: 100%; }
.bk-hero-photo img {
  display: block; width: 100%; height: 100%;
  min-height: 420px; object-fit: cover; object-position: 62% center;
}

/* ── Ritmo de seções ─────────────────────────────────────── */
.bk-section { padding-block: clamp(44px, 5vw, 76px); }
.bk-section.kontakt { padding-bottom: clamp(56px, 6.4vw, 96px); }
.bk-head { margin-bottom: clamp(24px, 3vw, 38px); }
.bk-head .o-lead { margin-top: 16px; max-width: 58ch; font-size: .94rem; }

/* ── ATENDIMENTOS: dois cards equilibrados (B32 intactos) ── */
.bk-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.bk-card {
  display: flex; gap: 18px;
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 34px);
}
.bk-card--light { background: #fff; border: 1px solid rgba(7, 27, 40, .12); box-shadow: 0 10px 28px rgba(7, 27, 40, .07), 0 2px 6px rgba(7, 27, 40, .03); }
.bk-card--dark  { background: var(--green-deep); }
.bk-card-ico {
  flex: none;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(7, 81, 122, .08);
  color: var(--green);
}
.bk-card--dark .bk-card-ico { background: rgba(244, 242, 238, .10); color: #E7EFF3; }
.bk-card-body { min-width: 0; }
.bk-card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.3rem, 1.6vw, 1.55rem); line-height: 1.15;
  margin: 3px 0 0; color: var(--ink); letter-spacing: -.01em;
}
.bk-card-copy { margin: 10px 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.bk-card--dark .bk-card-title { color: #F4F2EE; }
.bk-card--dark .bk-card-copy  { color: var(--on-dark-muted); }
.bk-card .axis-link { margin-top: 16px; align-self: flex-start; }
.bk-card .axis-link:hover { color: var(--green); }
.bk-card--dark .axis-link { color: var(--on-dark); border-bottom-color: rgba(244,242,238,.5); }
.bk-card--dark .axis-link:hover { color: #fff; border-bottom-color: #fff; }
.bk-card .axis-link .arr { transition: transform .22s var(--ease); }
.bk-card .axis-link:hover .arr { transform: translateX(3px); }

/* ── COMO FUNCIONA (b34): faixa COMPACTA — padding reduzido,
      passos colados ao título, sem conectores ─────────────── */
.bk-band {
  background: var(--bk-band);
  padding-block: clamp(30px, 3.2vw, 46px);
}
.bk-label-band { background: rgba(7, 81, 122, .10); border-color: rgba(7, 81, 122, .22); color: #2E5F7D; }
.bk-band .bk-head, .bk-band .bk-head--band { margin-bottom: 0; }
.bk-band .o-head-stack .o-lead { margin-top: 14px; font-size: .92rem; }
.bk-steps {
  margin-top: clamp(22px, 2.4vw, 30px);
  padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(34px, 3.6vw, 56px);
}
.bk-step {
  display: flex; gap: 15px;
  min-width: 0; align-items: flex-start;
  position: relative;
}
.bk-step-ico {
  flex: none; width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(244, 242, 238, .78);
  color: var(--green-deep);
}
.bk-step-body { min-width: 0; }
.bk-step-num {
  display: block;
  font-family: var(--font-display);
  font-size: .8rem; color: var(--muted);
  letter-spacing: .08em;
  line-height: 1; margin: 5px 0 4px;
}
.bk-step h3 {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.22rem; line-height: 1.2;
  color: var(--green-deep); letter-spacing: -.008em;
}
.bk-step p { margin: 8px 0 0; font-size: .87rem; line-height: 1.55; color: var(--bk-band-ink); max-width: 30ch; }
.bk-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .74fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
.bk-contact-main .o-lead { margin-top: 15px; max-width: 56ch; font-size: .94rem; }
.bk-contact-main .bk-head { margin-bottom: clamp(18px, 2.2vw, 26px); }

/* padrão ÚNICO: rótulo ACIMA do campo, esquerda, mesma tipografia */
.bk-form-card {
  background: #fff;
  border: 1px solid rgba(7, 27, 40, .10);
  border-radius: 17px;
  box-shadow: 0 12px 34px rgba(7, 27, 40, .09), 0 2px 8px rgba(7, 27, 40, .035);
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px);
}
.f1-form-grid { display: block; margin: 0; }
.bk-field,
.bk-field--full { margin: 0 0 18px; display: block; }
.bk-field:last-of-type { margin-bottom: 0; }
.bk-field label,
.bk-field--full label {
  display: block;
  margin: 0 0 7px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: .9rem; font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink);
  line-height: 1.35;
}
.bk-field input,
.bk-field--full input,
.bk-field select,
.bk-field--full select,
.bk-field textarea,
.bk-field--full textarea {
  width: 100%; box-sizing: border-box;
  min-height: 48px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 15px;
  font-family: var(--font-ui); font-size: .95rem; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.bk-field textarea, .bk-field--full textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
.bk-field input::placeholder, .bk-field textarea::placeholder,
.bk-field--full input::placeholder, .bk-field--full textarea::placeholder { color: var(--ink-faint); }
.bk-field input:hover, .bk-field select:hover, .bk-field textarea:hover,
.bk-field--full input:hover, .bk-field--full select:hover, .bk-field--full textarea:hover { border-color: var(--line-strong); }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus,
.bk-field--full input:focus, .bk-field--full select:focus, .bk-field--full textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(7, 81, 122, .12);
}
.bk-field select, .bk-field--full select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 18px top 21px, right 12px top 21px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.bk-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.bk-form-hint { display: inline-flex; align-items: flex-start; gap: 7px; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); max-width: 42ch; }
.bk-lock { flex: none; margin-top: 2px; color: var(--ink-faint); }
.bk-form-hint a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.bk-error { display: block; font-size: .88rem; line-height: 1.5; color: #b3261e; margin-top: 14px; }
.bk-error:empty { display: none; margin: 0; }

/* ── Lateral de contato (b33): círculos padronizados ─────── */
.bk-side-label {
  margin: 0 0 14px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--green);
}
.bk-mint + .bk-side-label { margin-top: clamp(30px, 3vw, 40px); }
.bk-mint {
  background: var(--bk-mint);
  border: 1px solid rgba(7, 27, 40, .08);
  border-radius: 15px;
  padding: 22px;
  display: flex; gap: 16px;
}
.bk-mint-ico {
  flex: none; align-self: flex-start;
  width: 52px; height: 52px;         /* WhatsApp: destaque moderado */
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--green-deep);
  box-shadow: 0 3px 10px rgba(7, 27, 40, .08);
}
.bk-mint-body { min-width: 0; }
.bk-mint-body h3 { margin: 2px 0 0; font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.15; color: var(--green-deep); }
.bk-mint-body p { margin: 8px 0 0; font-size: .88rem; line-height: 1.5; color: var(--bk-mint-ink); }
.bk-mint-body .o-btn { margin-top: 16px; }
.bk-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.bk-info li { display: flex; gap: 14px; align-items: flex-start; }
.bk-info-ico {
  flex: none; margin-top: 2px;      /* alinhado à 1ª linha do título */
  width: 40px; height: 40px;        /* diâmetro proporcional ao ícone 20px */
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(7, 27, 40, .16);
  color: var(--green-deep);
  background: #fff;
}
.bk-info div { min-width: 0; }
.bk-info strong { display: block; font-size: .92rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.bk-info span { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }

/* ── Responsividade (mobile com acabamento) ──────────────── */
@media (max-width: 1060px) {
  .bk-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); }
}
@media (max-width: 880px) {
  .o-header .bk-nav { display: none; }
  .bk-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .bk-cards { grid-template-columns: 1fr; }
  /* mobile: etapas empilhadas, SEM conectores, alinhamento consistente */
  .bk-steps { grid-template-columns: 1fr; row-gap: 22px; }
  .bk-step p { max-width: none; }
}
@media (max-width: 680px) {
  .bk-hero { grid-template-columns: 1fr; }
  .bk-hero-copy { padding: 34px 24px 26px; max-width: none; }
  .bk-hero-photo img { height: clamp(240px, 56vw, 400px); min-height: 0; object-position: center 68%; }
  .bk-hero { position: relative; }
  .bk-hero-photo { position: relative; margin-top: -6px; }
  .bk-hero-photo::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 64px;
    background: linear-gradient(180deg, var(--bg), rgba(244, 242, 238, 0));
    pointer-events: none;
  }
  .bk-cards { gap: 14px; }
  .bk-card { padding: 22px 20px; }
  .bk-card-ico { width: 48px; height: 48px; }
  .bk-band .o-container { padding-inline: 24px; }
  .bk-step { gap: 14px; align-items: flex-start; }
  .bk-step-ico { width: 48px; height: 48px; }
  .bk-step-num { margin: 2px 0 3px; }
  .bk-form-card { padding: 22px 18px; }
  .bk-field, .bk-field--full { margin-bottom: 16px; }
  .bk-form-foot .o-btn { width: 100%; justify-content: center; }
  .bk-mint { padding: 18px 16px 20px; }
  .bk-info { gap: 14px; }
}
@media (max-width: 420px) {
  .bk-card { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-card .axis-link .arr, .o-btn .arr { transition: none; }
}