/* Agendamento — Daniele Lopes, Advogada.
   Mesma identidade do site oficial (sites/daniele-lopes): navy + branco +
   dourado, Playfair Display no título/assinatura, Figtree no corpo. Página
   de propósito único (marcar consulta), sem menu nem seções longas. */

:root{
  --paper:       #FFFFFF;
  --bg:          #F5F7FA;
  --espresso:    #1B2A4A;
  --espresso-ink:#0F1B32;
  --espresso-2:  #2A3F68;
  --gold:        #B0873F;
  --gold-deep:   #846530;
  --gold-soft:   #C9A55E;
  --cream-dark:  #D7DEEA;
  --ink:         #1C2536;
  --muted:       #58657A;
  --line:        #DFE4EC;
  --ok:          #2E7D4F;
  --erro:        #B3413A;

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --script:  "Parisienne", "Playfair Display", cursive;
  --body:    "Figtree", -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --radius: 14px;
  color-scheme: light;
}

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

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2{ font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
p{ margin: 0; }
a{ color: inherit; }
button{ font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px;
}

.wrap{ max-width: 640px; margin-inline: auto; padding: clamp(1.2rem, 0.7rem + 2vw, 2.4rem); }

/* ---------- cabeçalho ---------- */
.topo{
  background: var(--espresso-ink);
  padding: 1.6rem 0 2.2rem;
}
.topo .wrap{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.topo img{ width: 46px; height: 46px; border-radius: 10px; margin-bottom: .3rem; }
.topo .nome{ font-family: var(--script); font-size: 2rem; color: var(--paper); line-height: 1; }
.topo .sub{
  font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold-soft);
}

/* ---------- cartão principal ---------- */
main{ margin-top: -1.4rem; }
.cartao{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 48px -28px rgba(15,27,50,.35);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}

.titulo-passo{ font-size: 1.35rem; margin-bottom: .35rem; }
.desc-passo{ color: var(--muted); font-size: .96rem; margin-bottom: 1.4rem; }

/* ---------- passos (indicador) ---------- */
.passos{ display: flex; align-items: center; gap: .4rem; margin-bottom: 1.6rem; }
.passos .bola{
  width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 600; font-family: var(--display);
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.passos .linha{ flex: 1; height: 1px; background: var(--line); }
.passos .bola.ativa{ background: var(--espresso-ink); color: var(--paper); border-color: var(--espresso-ink); }
.passos .bola.feita{ background: var(--gold); color: var(--paper); border-color: var(--gold); }

/* ---------- calendário ---------- */
.mes-nav{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mes-nav .rotulo{ font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.mes-nav button{
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; display: grid; place-items: center; color: var(--ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.mes-nav button:hover:not(:disabled){ background: var(--bg); border-color: var(--gold-soft); }
.mes-nav button:disabled{ opacity: .35; cursor: default; }

.dias-semana{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-bottom: .5rem;
}
.grade-dias{ display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.grade-dias button{
  aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--ink); font-size: .92rem; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.grade-dias button:disabled{ color: var(--line); cursor: default; }
.grade-dias button.disponivel{ border-color: var(--line); }
.grade-dias button.disponivel:hover{ border-color: var(--gold); background: var(--bg); }
.grade-dias button.selecionado{ background: var(--espresso-ink); color: var(--paper); border-color: var(--espresso-ink); }
.grade-dias .vazio{ visibility: hidden; }

/* ---------- horários ---------- */
.grade-horarios{ display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .55rem; margin-top: .3rem; }
.grade-horarios button{
  padding: .65rem .5rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font-weight: 600; cursor: pointer; font-variant-numeric: lining-nums;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.grade-horarios button:hover{ border-color: var(--gold); background: var(--bg); }
.grade-horarios button.selecionado{ background: var(--espresso-ink); color: var(--paper); border-color: var(--espresso-ink); }

.vazio-aviso{ grid-column: 1 / -1; color: var(--muted); font-size: .92rem; padding: 1rem 0; text-align: center; }

/* ---------- formulário ---------- */
.campo{ margin-bottom: 1rem; }
.campo label{ display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.campo input, .campo textarea{
  width: 100%; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--line);
  font-family: inherit; font-size: .98rem; color: var(--ink); background: var(--paper);
}
.campo textarea{ resize: vertical; min-height: 4.5rem; }

.resumo{
  background: var(--bg); border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.2rem;
  font-size: .92rem; color: var(--ink);
}
.resumo strong{ color: var(--espresso-ink); }

.politica{
  display: flex; gap: .55rem; align-items: flex-start; font-size: .84rem; color: var(--muted);
  background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1.3rem;
}
.politica svg{ flex-shrink: 0; margin-top: .1rem; color: var(--gold-deep); }

/* ---------- botões ---------- */
.acoes{ display: flex; gap: .7rem; justify-content: space-between; align-items: center; margin-top: 1.4rem; }
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-weight: 600; font-size: .96rem; padding: .85rem 1.6rem; border-radius: var(--radius);
  background: var(--espresso-ink); color: var(--paper); border: 1px solid transparent; cursor: pointer;
  transition: background-color .25s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover:not(:disabled){ background: var(--espresso); }
.btn:disabled{ opacity: .45; cursor: default; }
.btn-voltar{
  background: transparent; color: var(--muted); border: none; font-weight: 600; font-size: .92rem;
  cursor: pointer; padding: .6rem .3rem;
}
.btn-voltar:hover{ color: var(--ink); }

/* ---------- confirmação ---------- */
.confirmacao{ text-align: center; padding: 1.2rem 0 .4rem; }
.confirmacao .selo{
  width: 4rem; height: 4rem; border-radius: 50%; background: color-mix(in srgb, var(--ok) 12%, transparent);
  display: grid; place-items: center; margin: 0 auto 1.1rem;
}
.confirmacao .selo svg{ color: var(--ok); }
.confirmacao h2{ font-size: 1.5rem; margin-bottom: .5rem; }
.confirmacao p{ color: var(--muted); margin-bottom: .3rem; }
.confirmacao .quando{
  font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--espresso-ink);
  margin: 1rem 0 1.2rem;
}

.erro-aviso{
  color: var(--erro); background: color-mix(in srgb, var(--erro) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--erro) 25%, transparent); border-radius: 10px;
  padding: .7rem .9rem; font-size: .88rem; margin-bottom: 1rem;
}

/* ---------- rodapé ---------- */
.rodape{ text-align: center; color: var(--muted); font-size: .78rem; padding: 1.6rem 0 2.4rem; }
.rodape a{ color: var(--gold-deep); text-decoration: none; font-weight: 600; }
.rodape a:hover{ text-decoration: underline; }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; }
}