/* Presença Garantida · vitrine
   Mesma identidade do portal — livro de agendamento de balcão — com mais presença.
   A peça central é a agenda com um horário vago: é a dor do cliente, desenhada. */

:root {
  --tinta: #16241F;
  --papel: #F3F0E8;
  --cartao: #FFFDF8;
  --pauta: #D9DFD4;
  --verde: #2F6B57;
  --verde-fundo: #E7EFEA;
  --vago: #9B3B2E;
  --vago-fundo: #F7E6E2;
  --suave: #5C6A64;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #E9EEEA; --papel: #0E1512; --cartao: #17211D; --pauta: #2A3833;
    --verde: #82C2A6; --verde-fundo: #1A2822; --vago: #E4907E; --vago-fundo: #2C1D1A;
    --suave: #94A29C;
  }
}
:root[data-theme="dark"] {
  --tinta: #E9EEEA; --papel: #0E1512; --cartao: #17211D; --pauta: #2A3833;
  --verde: #82C2A6; --verde-fundo: #1A2822; --vago: #E4907E; --vago-fundo: #2C1D1A;
  --suave: #94A29C;
}
:root[data-theme="light"] {
  --tinta: #16241F; --papel: #F3F0E8; --cartao: #FFFDF8; --pauta: #D9DFD4;
  --verde: #2F6B57; --verde-fundo: #E7EFEA; --vago: #9B3B2E; --vago-fundo: #F7E6E2;
  --suave: #5C6A64;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.env { max-width: 64rem; margin: 0 auto; padding: 0 1.2rem; }
.env.estreito { max-width: 40rem; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.05rem); margin: 0 0 1.4rem; line-height: 1.18; }
h3 { font-size: 1.15rem; margin: 0 0 .5rem; letter-spacing: -.01em; }
a { color: var(--verde); }

/* ── barra ────────────────────────────────────────────── */
.barra { border-bottom: 1px solid var(--pauta); background: var(--cartao); }
.barra-int {
  max-width: 64rem; margin: 0 auto; padding: .85rem 1.2rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.marca {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--verde); flex: 1;
}
.barra nav { display: flex; align-items: center; gap: 1.2rem; font-size: .9rem; }
.barra nav a { text-decoration: none; color: var(--suave); }
.barra nav a:hover { color: var(--tinta); }

.botao {
  display: inline-block; text-decoration: none; font-weight: 600;
  background: var(--verde); color: var(--papel);
  border: 1px solid var(--verde); border-radius: 3px; padding: .4rem .85rem; font-size: .88rem;
}
.botao.grande { padding: .7rem 1.4rem; font-size: 1rem; }
.botao.claro { background: var(--papel); color: var(--verde); border-color: var(--papel); }
.botao:hover { filter: brightness(1.08); }

/* ── capa ─────────────────────────────────────────────── */
.capa { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.capa-int {
  max-width: 64rem; margin: 0 auto; padding: 0 1.2rem;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.8rem, 5vw, 3.5rem);
  align-items: center;
}
.etiqueta {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--verde); margin: 0 0 1rem;
}
h1 {
  font-size: clamp(2.1rem, 6.4vw, 3.5rem); line-height: 1.06; margin: 0 0 1rem;
}
.chamada { font-size: clamp(1.05rem, 2.4vw, 1.3rem); margin: 0 0 1.1rem; color: var(--tinta); }
.apoio { color: var(--suave); margin: 0 0 1.7rem; max-width: 32rem; }
.acoes { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.nota-acao { font-size: .85rem; color: var(--suave); }

/* ── a agenda: a peça que carrega o argumento ────────── */
.agenda {
  margin: 0; background: var(--cartao); border: 1px solid var(--pauta);
  border-radius: 4px; padding: 1.15rem 1.25rem 1rem;
  box-shadow: 0 1px 2px rgba(22,36,31,.05), 0 18px 40px -30px rgba(22,36,31,.5);
}
.agenda figcaption {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--suave); padding-bottom: .6rem;
  border-bottom: 1px solid var(--pauta); margin-bottom: .2rem;
}
.agenda ol { list-style: none; margin: 0; padding: 0; }
.agenda li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .52rem .3rem; border-bottom: 1px solid var(--pauta);
}
.agenda li:last-of-type { border-bottom: none; }
.hora { font-family: var(--mono); font-size: .82rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.nome { font-size: .95rem; }
.agenda .vaga {
  background: var(--vago-fundo); margin: 0 -.55rem; padding-left: .85rem; padding-right: .85rem;
  border-radius: 2px; border-bottom-color: transparent;
}
.agenda .vaga .hora, .agenda .vaga .nome { color: var(--vago); }
.agenda .vaga .nome { font-style: italic; }
.perda {
  margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--pauta);
  font-size: .84rem; color: var(--suave);
}

/* ── faixa de nichos ──────────────────────────────────── */
.faixa { background: var(--verde-fundo); border-block: 1px solid var(--pauta); }
.faixa-int { max-width: 46rem; margin: 0 auto; padding: 1.7rem 1.2rem; }
.faixa p { margin: 0; text-align: center; color: var(--tinta); }

/* ── seções ───────────────────────────────────────────── */
.secao { padding: clamp(2.6rem, 6vw, 4.2rem) 0; }
.prosa { color: var(--suave); max-width: 38rem; margin: 0 0 1.6rem; }
.prosa.fina { font-size: .88rem; margin-top: 1.4rem; margin-bottom: 0; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.cartoes article {
  background: var(--cartao); border: 1px solid var(--pauta); border-radius: 4px;
  padding: 1.3rem; border-top: 3px solid var(--pauta);
}
.cartoes article.destaque { border-top-color: var(--verde); }
.cartoes p { margin: 0 0 .7rem; color: var(--suave); font-size: .93rem; }
.marca-tec {
  font-size: .82rem !important; color: var(--verde) !important;
  padding-top: .7rem; border-top: 1px solid var(--pauta); margin-bottom: 0 !important;
}

/* ── a conta ──────────────────────────────────────────── */
.conta { background: var(--cartao); border-block: 1px solid var(--pauta); }
.calculo {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  margin: 1.6rem 0 1.2rem;
}
.calculo > div { display: flex; flex-direction: column; }
.calculo b {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.calculo span { font-size: .78rem; color: var(--suave); }
.calculo .op { font-size: 1.3rem; color: var(--suave); align-self: center; }
.calculo .resultado b { color: var(--vago); }
.ajuste { display: block; font-size: .88rem; color: var(--suave); max-width: 26rem; }
.ajuste input { width: 100%; margin-top: .5rem; accent-color: var(--verde); }

/* ── planos ───────────────────────────────────────────── */
.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; }
.planos article {
  background: var(--cartao); border: 1px solid var(--pauta); border-radius: 4px;
  padding: 1.4rem; display: flex; flex-direction: column; position: relative;
}
.planos article.recomendado { border-color: var(--verde); border-width: 2px; }
.selo {
  position: absolute; top: -.7rem; left: 1.3rem; background: var(--verde); color: var(--papel);
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 2px; margin: 0;
}
.para { font-size: .88rem; color: var(--suave); margin: 0 0 1rem; }
.planos ul { list-style: none; margin: 0 0 1.3rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.planos li { font-size: .92rem; padding-left: 1.15rem; position: relative; }
.planos li::before { content: "·"; position: absolute; left: .3rem; color: var(--verde); font-weight: 700; }
.preco {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--suave); margin: 0; padding-top: .9rem; border-top: 1px solid var(--pauta);
}

/* ── franqueza ────────────────────────────────────────── */
.franqueza { background: var(--cartao); border-block: 1px solid var(--pauta); }
dl { margin: 0; }
dt { font-weight: 600; margin-top: 1.5rem; }
dt:first-of-type { margin-top: 0; }
dd { margin: .35rem 0 0; color: var(--suave); }

/* ── fecho ────────────────────────────────────────────── */
.fecho { background: var(--verde); color: var(--papel); padding: clamp(2.6rem, 6vw, 4rem) 0; text-align: center; }
.fecho h2 { color: var(--papel); }
.fecho p { max-width: 34rem; margin: 0 auto 1.7rem; opacity: .93; }

footer { padding: 2rem 0 3rem; font-size: .85rem; color: var(--suave); }
footer p { margin: 0 0 .3rem; }
footer .fina a { color: var(--suave); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media (max-width: 52rem) {
  .capa-int { grid-template-columns: 1fr; }
  .agenda { order: -1; }
}