* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --areia: #EDE6D8;
  --creme: #FAF6EE;
  --tinta: #26221A;
  --texto-2: #57503F;
  --texto-3: #7D7360;
  --dourado: #A08C5B;
  --dourado-forte: #8A6D2F;
  --trilho: #E2D9C6;
  --sombra: 0 1px 2px rgba(60, 50, 30, .07);
  --sombra-alta: 0 4px 14px rgba(60, 50, 30, .12);
}

body {
  font-family: "Inter", sans-serif;
  background: var(--areia);
  color: var(--tinta);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.oculto { display: none !important; }
.tela { min-height: 100vh; }

h1 { font-family: "Fraunces", serif; font-weight: 500; }
h1 em { font-weight: 400; }

/* ---- login ---- */
.login-box {
  max-width: 360px; margin: 20vh auto 0; padding: 40px 28px;
  background: var(--creme); border-radius: 18px; box-shadow: var(--sombra);
  text-align: center;
}
.login-box h1 { font-size: 1.7rem; margin-bottom: 8px; }
.login-box p { color: var(--texto-3); font-size: .9rem; margin-bottom: 20px; }
.login-box input {
  width: 100%; padding: 13px 14px; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--trilho); background: #fff; color: var(--tinta);
  border-radius: 12px; margin-bottom: 12px;
}
.login-box input:focus { outline: none; border-color: var(--dourado); }
.login-box button {
  width: 100%; padding: 13px; font-size: .95rem; font-weight: 600; font-family: inherit;
  background: var(--tinta); color: var(--creme); border: none; border-radius: 12px; cursor: pointer;
}
.erro { color: #96442B; font-size: .88rem; margin-top: 12px; }

/* ---- estrutura ---- */
header { padding: 32px 20px 4px; max-width: 680px; margin: 0 auto; }
header h1 { font-size: 1.8rem; }
.subtitulo { color: var(--texto-3); font-size: .88rem; margin-top: 2px; }
main { max-width: 680px; margin: 0 auto; padding: 8px 20px 56px; }
footer { text-align: center; color: var(--texto-3); font-size: .8rem; padding: 20px; }

/* ---- pílula segmentada ---- */
.pilula {
  display: flex; background: var(--trilho); border-radius: 99px;
  padding: 4px; margin-top: 18px;
}
.aba {
  flex: 1; padding: 9px; font-size: .85rem; font-weight: 500; font-family: inherit;
  color: var(--texto-3); background: none; border: none; border-radius: 99px; cursor: pointer;
}
.aba.ativa { background: var(--creme); color: var(--tinta); box-shadow: 0 1px 2px rgba(60, 50, 30, .1); }

/* ---- seções ---- */
.secao-titulo {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3); margin: 28px 2px 12px;
}

/* ---- card ---- */
.card {
  background: var(--creme); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px;
  box-shadow: var(--sombra); cursor: pointer; transition: box-shadow .2s ease;
}
.card.aberto { box-shadow: var(--sombra-alta); cursor: default; }
.card.aberto .card-tema { cursor: pointer; }
.card-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pilar {
  font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dourado);
}
.data-fav { color: var(--texto-3); margin-left: 6px; letter-spacing: .06em; }
.nota {
  background: var(--tinta); color: var(--creme); font-size: .68rem; font-weight: 600;
  border-radius: 99px; padding: 2px 9px; flex-shrink: 0;
}
.card-tema { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; }
.card-tema h3 { font-family: "Fraunces", serif; font-size: 1.14rem; font-weight: 500; line-height: 1.35; }
.btn-fav {
  font-size: 1.25rem; line-height: 1; background: none; border: none; cursor: pointer;
  color: #C8BEA8; padding: 2px 0 2px 6px; flex-shrink: 0;
}
.btn-fav.fav { color: var(--dourado-forte); }

/* ---- expansão ---- */
.card-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.card-corpo > div { overflow: hidden; }
.card.aberto .card-corpo { grid-template-rows: 1fr; }
.card-corpo p { margin-top: 12px; font-size: .88rem; color: var(--texto-2); }
.alt span, .thumb span {
  display: block; font-size: .64rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texto-3); margin-bottom: 2px;
}
.card-corpo .gancho {
  font-family: "Fraunces", serif; font-style: italic; font-size: .98rem;
  border-left: 2px solid var(--dourado); padding-left: 12px;
}
.ref a { color: var(--dourado-forte); text-decoration: none; font-weight: 600; font-size: .85rem; }
.vazio { text-align: center; color: var(--texto-3); padding: 48px 20px; font-size: .92rem; }