/* Trégua — base compartilhada (site e app) */
@font-face { font-family: "Bricolage"; src: url("/assets/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Hanken"; src: url("/assets/fonts/hanken.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --vinho: #3a0c1b;        /* fundo */
  --vinho-fundo: #2e0915;  /* faixas mais fundas */
  --vinho-alto: #4a1426;   /* superfícies */
  --vinho-claro: #5c1c31;
  --marfim: #fff1e6;       /* texto e botão principal */
  --rosa: #f1b3ae;         /* a voz dela */
  --coral: #ff5a4a;        /* a sua voz e destaques */
  --ouro: #e8bf6f;         /* Max */
  --texto: #f7e3da;
  --suave: #e2bdb9;
  --apagado: #c2969a;
  --linha: rgba(255, 226, 214, .14);
  --linha-forte: rgba(255, 226, 214, .26);
  --display: "Bricolage", "Hanken", system-ui, sans-serif;
  --corpo: "Hanken", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* nomes antigos, usados pelo app */
  --bg: var(--vinho); --bg2: var(--vinho-fundo); --card: var(--vinho-alto);
  --line: var(--linha); --line2: var(--linha-forte);
  --text: var(--texto); --strong: var(--marfim); --soft: var(--suave); --muted: var(--apagado); --faint: #a87f85;
  --gold: var(--coral); --gold2: var(--rosa); --gold-dim: var(--rosa);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--vinho); color: var(--texto);
  font-family: var(--corpo); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--rosa); text-underline-offset: 3px; }
img { max-width: 100%; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--marfim); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--marfim); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--coral); color: #fff; }

/* ---------- Topo ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; background: var(--vinho); border-bottom: 1px solid var(--linha);
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--marfim); font-family: var(--display); font-weight: 750; font-size: 22px; letter-spacing: -.03em; }
.brand img { width: 26px; height: 26px; }
.nav-right { display: flex; align-items: center; gap: 8px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px; padding: 14px 22px;
  font-size: 15.5px; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background .15s, color .15s, border-color .15s;
}
.btn.primary { color: var(--vinho); background: var(--marfim); }
.btn.primary:hover { background: #fff; }
.btn.ghost { color: var(--marfim); background: transparent; border-color: var(--linha-forte); }
.btn.ghost:hover { border-color: var(--marfim); }
.btn.outline { color: var(--marfim); background: transparent; border-color: var(--rosa); }
.btn.outline:hover { background: rgba(241,179,174,.1); }
.btn.small { padding: 9px 15px; font-size: 13.5px; font-weight: 650; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn .ic svg { width: 16px; height: 16px; }

.chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--marfim); background: transparent; border: 1px solid var(--linha-forte); cursor: pointer; white-space: nowrap;
}
.chip.plus { background: var(--coral); border-color: var(--coral); color: #fff; }
.chip.max { background: var(--ouro); border-color: var(--ouro); color: var(--vinho); }

.ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ic svg { width: 1em; height: 1em; }

/* ---------- Cartões ---------- */
.card { background: var(--vinho-alto); border: 1px solid var(--linha); border-radius: var(--radius); padding: 20px; margin-bottom: 12px; }
/* títulos de cartão */
.eyebrow, .card p.eyebrow { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--marfim); margin: 0 0 10px; }
.card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--texto); }
.muted { color: var(--apagado) !important; font-size: 14px !important; }
.foot { font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* ---------- Formulários ---------- */
label.lbl { display: block; font-size: 14px; font-weight: 700; color: var(--marfim); margin: 20px 0 8px; }
input[type=text], textarea, select {
  width: 100%; border: 1px solid var(--linha-forte); border-radius: 14px; padding: 13px 14px;
  font-size: 16px; background: var(--vinho-fundo); color: var(--marfim); outline: none; font-family: inherit;
}
textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
textarea::placeholder, input::placeholder { color: #a47a80; }
input:focus, textarea:focus, select:focus { border-color: var(--marfim); }
select option { background: var(--vinho-fundo); }

/* ---------- Avisos ---------- */
.error { background: rgba(255,90,74,.12); border: 1px solid rgba(255,90,74,.5); color: #ffd9d2; border-radius: 14px; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--marfim); color: var(--vinho); font-weight: 650;
  padding: 11px 20px; border-radius: 999px; font-size: 14px; z-index: 100; opacity: 0;
  transition: opacity .2s, transform .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.spinner { width: 40px; height: 40px; border: 3px solid var(--linha); border-top-color: var(--marfim); border-radius: 50%; animation: spin .9s linear infinite; margin: 0 auto; }
.spinner.sm { width: 20px; height: 20px; border-width: 2px; margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } * { scroll-behavior: auto !important; } }

/* ---------- Conversa: ela de um lado, você do outro ---------- */
.bubble { max-width: 86%; width: fit-content; padding: 11px 15px; font-size: 15.5px; line-height: 1.45; border-radius: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.them { background: var(--rosa); color: #3a0c1b; border-bottom-left-radius: 6px; margin-right: auto; }
.bubble.me { background: var(--coral); color: #fff; border-bottom-right-radius: 6px; margin-left: auto; }
.who { display: block; font-size: 12.5px; font-weight: 700; color: var(--apagado); margin: 0 4px 5px; }
.who.me { text-align: right; }

/* ---------- Páginas de texto ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 56px 20px 96px; }
.doc h1 { font-size: clamp(38px, 7vw, 56px); margin: 0 0 10px; }
.doc h2 { font-size: 24px; margin: 44px 0 12px; }
.doc p, .doc li { color: var(--texto); font-size: 16.5px; line-height: 1.7; }
.doc .updated { color: var(--apagado); font-size: 14.5px; margin-bottom: 32px; }
.doc ul { padding-left: 20px; }

.footer { border-top: 1px solid var(--linha); padding: 32px 20px 44px; color: var(--apagado); font-size: 14px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; max-width: 1120px; margin: 0 auto; }
.footer a { color: var(--suave); text-decoration: none; margin-right: 18px; }
.footer a:hover { color: var(--marfim); }