/* =====================================================================
   CLUB61 — claro
   Papel quente, tinta escura, vinho como único acento forte.
   A placa da porta continua sendo o elemento gravado; dentro, o
   conteúdo dos membros é que carrega a cor.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,600&family=Karla:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --papel:   #FBF9F7;   /* fundo — quase branco, com um toque de calor */
  --carta:   #FFFFFF;   /* cartões */
  --tinta:   #24201D;   /* texto principal */
  --fumo:    #857C74;   /* texto secundário */
  --linha:   #EDE8E2;
  --linha2:  #DED6CC;

  --vinho:   #A32036;   /* o vermelho da marca */
  --vinho2:  #85182B;
  --rubro:   #D14458;   /* acento: reação ativa, alerta */
  --latao:   #A8823E;

  --display: 'Bodoni Moda', Georgia, serif;
  --corpo:   'Karla', system-ui, -apple-system, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; font-family: var(--corpo); font-size: 16px;
  color: var(--tinta); background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; color: var(--tinta); }
h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.25rem); }
h2 { margin: 0 0 1rem; font-size: 1.375rem; }

a { color: var(--vinho); text-decoration: none; }
code { font-family: var(--mono); font-size: .9375rem; letter-spacing: .05em; color: var(--vinho); }

.meta { font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em; color: var(--fumo); }

.eyebrow {
  margin: 0 0 .5rem; font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--vinho);
}

.lede { margin: 0; color: var(--fumo); font-size: .9375rem; line-height: 1.6; }
.dica { margin: .5rem 0 0; color: var(--fumo); font-size: .875rem; line-height: 1.6; }
.centro { text-align: center; }
.espaco { flex: 1; }

/* ---------------- A PORTA: index, entrar, cadastro ---------------- */

.porta {
  min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, transparent 55%),
    var(--papel);
}

.placa {
  position: relative; width: 100%; max-width: 25rem;
  padding: 3rem 2.25rem 2rem;
  background: var(--carta);
  border: 1px solid var(--linha2);
  box-shadow: 0 1px 2px rgba(28, 22, 19, .04), 0 24px 48px -28px rgba(28, 22, 19, .3);
}
.placa--larga { max-width: 30rem; }

/* O 61 gravado — em relevo claro sobre o papel */
.numeral {
  position: absolute; top: -2.5rem; right: -1rem;
  font-family: var(--display); font-size: 13rem; line-height: 1; font-weight: 600;
  color: transparent; -webkit-text-stroke: 1px rgba(140, 29, 44, .12);
  pointer-events: none; user-select: none;
}

.placa__topo { position: relative; margin-bottom: 2rem; }
.placa__pe { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); text-align: center; }
.placa__pe a { font-size: .875rem; }

/* ---------------- DENTRO: barra lateral ---------------- */

.app {
  display: grid;
  grid-template-columns: 15rem 1fr;
  min-height: 100dvh;
}

.lateral {
  position: sticky; top: 0; align-self: start;
  height: 100dvh;
  display: flex; flex-direction: column;
  padding: 1.5rem 1rem;
  background: var(--carta);
  border-right: 1px solid var(--linha);
}

.marca {
  display: flex; align-items: center; gap: .625rem;
  padding: 0 .5rem 1.5rem;
  font-family: var(--display); font-size: 1.375rem; color: var(--tinta);
}
.marca em { font-style: normal; color: var(--vinho); }
.marca small {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fumo);
}

.logo { width: 1.75rem; height: 1.4rem; flex: none; color: var(--vinho); }

.lateral__menu { display: flex; flex-direction: column; gap: .125rem; }

.lateral__menu a {
  display: flex; align-items: center; gap: .75rem;
  padding: .6875rem .75rem;
  font-size: .875rem; font-weight: 500; color: var(--fumo);
  border-radius: 4px; border-left: 2px solid transparent;
  transition: background .16s ease, color .16s ease;
}
.lateral__menu a:hover { background: #FAF7F3; color: var(--tinta); }
.lateral__menu a.ativo {
  color: var(--vinho); background: rgba(140, 29, 44, .06);
  border-left-color: var(--vinho);
}

.lateral__menu .icone {
  width: 1.125rem; flex: none; text-align: center;
  font-size: .9375rem; opacity: .8;
}
.lateral__menu .rotulo { flex: 1; }

.lateral__sair {
  margin-top: auto; padding: .6875rem .75rem;
  font-size: .8125rem; color: #9A928B;
}
.lateral__sair:hover { color: var(--vinho); }

.conteudo {
  max-width: 42rem; width: 100%;
  padding: 1.75rem 1.5rem 3rem;
  display: grid; gap: 1rem; align-content: start;
}
.conteudo--largo { max-width: 60rem; }

.rodape {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  margin-top: 1rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linha); font-size: .875rem; color: var(--fumo);
}

/* ---------------- CARTÕES ---------------- */

.cartao {
  padding: 1.5rem; background: var(--carta);
  border: 1px solid var(--linha);
  box-shadow: 0 1px 2px rgba(28, 22, 19, .03);
}
.cartao p { line-height: 1.65; }
.pagina__topo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }

.vazio { text-align: center; padding: 3rem 1.5rem; }
.vazio p { max-width: 26rem; margin: 0 auto; color: var(--fumo); }
.lista { padding-block: .5rem; }

/* ---------------- AVATAR ---------------- */

.avatar {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem;
  font-family: var(--display); font-size: 1.0625rem; color: var(--vinho);
  background: rgba(140, 29, 44, .06);
  border: 1px solid rgba(140, 29, 44, .22); border-radius: 50%;
}
.avatar--g { width: 3.25rem; height: 3.25rem; font-size: 1.5rem; }

.autor { display: flex; align-items: center; gap: .75rem; color: inherit; }
.autor strong { display: block; font-size: .9375rem; color: var(--tinta); }
.autor .meta { display: block; margin-top: .0625rem; }

/* ---------------- FORMULÁRIOS ---------------- */

label { display: block; margin: 1.25rem 0 .375rem; font-size: .875rem; font-weight: 500; letter-spacing: .02em; }

input, select, textarea {
  width: 100%; padding: .8125rem .875rem;
  font-family: var(--corpo); font-size: 1rem; line-height: 1.5; color: var(--tinta);
  background: #FDFCFB; border: 1px solid var(--linha2); border-radius: 2px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
textarea { resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, .botao:focus-visible, .acao:focus-visible {
  outline: none; border-color: var(--vinho); box-shadow: 0 0 0 3px rgba(140, 29, 44, .14);
}
::placeholder { color: #A79E96; }

.campo-codigo { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .12em; text-align: center; color: var(--vinho); }
.campo-uf { text-transform: uppercase; text-align: center; }

.dupla { display: grid; grid-template-columns: 1fr 5.5rem; gap: .75rem; align-items: end; }

.busca { display: flex; flex-wrap: wrap; gap: .5rem; }
.busca input { flex: 1 1 10rem; }
.busca select { flex: 0 1 10rem; }

.botao, button {
  display: block; width: 100%; margin-top: 1.5rem; padding: .875rem 1rem;
  font-family: var(--corpo); font-size: .9375rem; font-weight: 700;
  letter-spacing: .04em; text-align: center;
  color: #FFF; background: var(--vinho);
  border: 1px solid var(--vinho); border-radius: 2px; cursor: pointer;
  transition: background .16s ease, transform .1s ease;
}
.botao:hover, button:hover { background: var(--vinho2); border-color: var(--vinho2); }
button:active { transform: translateY(1px); }
.botao--curto { width: auto; margin: 0; padding: .625rem 1.25rem; font-size: .8125rem; }
.botao--linha { width: auto; display: inline-block; margin-top: 1.5rem; }

/* ---------------- AÇÕES DISCRETAS ---------------- */

.acoes { display: flex; gap: .375rem; align-items: center; margin: 0; }

.acao {
  display: inline-flex; align-items: center; gap: .375rem;
  width: auto; margin: 0; padding: .4375rem .75rem;
  font-family: var(--corpo); font-size: .875rem; font-weight: 500; letter-spacing: .02em;
  color: var(--fumo); background: transparent;
  border: 1px solid var(--linha); border-radius: 999px; cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.acao:hover { color: var(--tinta); border-color: var(--linha2); background: #F7F4F1; }
.acao.ativo { color: var(--rubro); border-color: rgba(194, 57, 74, .4); background: rgba(194, 57, 74, .06); }
.acao.discreto { border-color: transparent; color: #948B84; }
.acao.discreto:hover { color: var(--rubro); background: transparent; }

/* ---------------- PUBLICAÇÕES ---------------- */

.compor__topo { display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem; }
.compor textarea { margin-top: 0; }
.compor--nu { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linha); }
.compor__pe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .875rem; }

.post__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.post__corpo { margin: 0; color: var(--tinta); line-height: 1.7; white-space: pre-wrap; overflow-wrap: break-word; }
.post__pe {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linha);
}

.comentario { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 0; border-top: 1px solid var(--linha); }
.comentario__corpo { flex: 1; }
.comentario__corpo p { margin: .375rem 0 0; font-size: .9375rem; line-height: 1.6; }
.comentario .meta { margin-left: .5rem; }

/* ---------------- FICHAS E LISTAS ---------------- */

.ficha__bio { margin: 1rem 0 0; font-size: .9375rem; line-height: 1.6; color: var(--fumo); }
.ficha__pe { display: flex; gap: .5rem; margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--linha); }

.linha {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  padding: .875rem 0; border-top: 1px solid var(--linha);
}
.linha strong { display: block; font-size: .9375rem; }
.aberto { color: var(--vinho); }

.conversa {
  display: flex; align-items: center; gap: .875rem; padding: .875rem .25rem;
  color: inherit; border-top: 1px solid var(--linha); transition: background .16s ease;
}
.conversa:hover { background: #FAF8F6; }
.conversa__texto { flex: 1; min-width: 0; }
.conversa__texto strong { display: block; font-size: .9375rem; color: var(--tinta); }
.conversa__texto .meta { display: block; margin-top: .125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa__lado { display: flex; align-items: center; gap: .5rem; flex: none; }
.conversa.nova .conversa__texto strong { color: var(--vinho); }

.selo {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem;
  font-family: var(--mono); font-size: .625rem;
  color: #FFF; background: var(--vinho); border-radius: 999px;
}

/* ---------------- CONVERSA ---------------- */

.cabecalho-conversa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.thread { display: grid; gap: .625rem; }

.bolha { max-width: 82%; padding: .6875rem .9375rem; border: 1px solid var(--linha); border-radius: 12px; }
.bolha p { margin: 0; font-size: .9375rem; line-height: 1.6; overflow-wrap: break-word; }
.bolha .meta { display: block; margin-top: .375rem; }
.bolha.minha {
  justify-self: end; color: #FFF; background: var(--vinho); border-color: var(--vinho);
  border-bottom-right-radius: 3px;
}
.bolha.minha .meta { color: rgba(255, 255, 255, .62); }
.bolha.dele { justify-self: start; background: #F4F1EE; border-bottom-left-radius: 3px; }

/* ---------------- PASSOS (verificação) ---------------- */

.passos { display: grid; gap: .75rem; margin: 1.5rem 0; }
.passo { display: flex; align-items: center; gap: .875rem; }
.passo strong {
  display: grid; place-items: center; flex: none; width: 1.875rem; height: 1.875rem;
  font-family: var(--display); font-size: 1rem; color: var(--vinho);
  border: 1px solid rgba(140, 29, 44, .25); border-radius: 50%;
}
.passo span { font-size: .9375rem; color: var(--fumo); }

/* ---------------- MENSAGENS DE ESTADO ---------------- */

.erro, .sucesso, .aviso {
  margin: 1rem 0 0; padding: .75rem .875rem; font-size: .875rem; line-height: 1.55;
  border-left: 2px solid; border-radius: 0 2px 2px 0;
}
.erro    { color: #8A2230; background: #FBEDEE; border-color: var(--rubro); }
.sucesso { color: #5C4A1E; background: #F8F1E2; border-color: var(--latao); }
.aviso   { color: var(--tinta); background: #F1ECE5; border-color: var(--fumo); }

/* ---------------- ADMINISTRAÇÃO ---------------- */

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.numero { padding: 1rem; background: var(--carta); text-align: center; }
.numero strong { display: block; font-family: var(--display); font-size: 1.75rem; color: var(--vinho); }
.numero span { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fumo); }

.mini { width: auto; max-width: 9rem; margin: 0; padding: .4375rem .5rem; font-size: .8125rem; }
.mini-btn {
  width: auto; margin: 0; padding: .4375rem .75rem; font-size: .75rem; letter-spacing: .06em;
  background: transparent; color: var(--vinho); border: 1px solid var(--linha2); border-radius: 2px;
}
.mini-btn:hover { background: #FAF3F4; border-color: rgba(140, 29, 44, .35); }
.mini-btn.discreto { color: var(--fumo); }

.arvore { margin: 1rem 0 0; padding: 0; list-style: none; font-size: .875rem; }
.arvore li { padding-block: .3125rem; }

.perigo-zona { margin-top: 1.75rem; padding: 1.25rem; border: 1px solid rgba(194, 57, 74, .3); background: #FCF1F2; }
button.perigo, .mini-btn.perigo, .acao.perigo { background: transparent; color: var(--rubro); border-color: rgba(194, 57, 74, .45); }
button.perigo:hover, .mini-btn.perigo:hover { background: #FBE9EB; border-color: var(--rubro); }

/* ---------------- TELAS ESTREITAS ---------------- */

@media (max-width: 52rem) {
  .app { grid-template-columns: 1fr; }

  .lateral {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    height: auto; z-index: 20;
    flex-direction: row; align-items: center;
    padding: .375rem .5rem;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
    border-right: 0; border-top: 1px solid var(--linha);
  }

  .marca { display: none; }
  .lateral__menu { flex: 1; flex-direction: row; justify-content: space-around; gap: 0; }

  .lateral__menu a {
    flex-direction: column; gap: .1875rem;
    padding: .5rem .25rem; border-left: 0; border-radius: 0;
    border-bottom: 2px solid transparent;
  }
  .lateral__menu a.ativo { background: transparent; border-bottom-color: var(--vinho); }
  .lateral__menu .icone { font-size: 1.125rem; }
  .lateral__menu .rotulo { font-size: .5625rem; letter-spacing: .02em; }
  .lateral__menu .selo { position: absolute; transform: translate(.875rem, -.5rem); }
  .lateral__menu a { position: relative; }

  .lateral__sair { margin: 0; padding: .5rem .625rem; font-size: .75rem; }

  .conteudo { max-width: none; padding: 1rem 1rem 5.5rem; }
  .cartao { padding: 1.25rem; }
  .bolha { max-width: 90%; }
  .placa { padding: 2.5rem 1.5rem 1.5rem; }
}

/* A porta e as paginas soltas nao usam a grade da barra lateral */
.app--nu .lateral__menu { flex-direction: column; }
@media (max-width: 52rem) { .app--nu .lateral__menu { flex-direction: row; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ---------------- REAÇÕES ---------------- */

.reacoes {
  display: flex; flex-wrap: wrap; gap: .375rem;
  margin-top: 1.125rem; padding-top: .875rem;
  border-top: 1px solid var(--linha);
}

.reacao {
  display: inline-flex; align-items: center; gap: .3125rem;
  width: auto; margin: 0; padding: .3125rem .625rem;
  font-family: var(--corpo); font-size: .8125rem; font-weight: 600;
  color: var(--fumo); background: transparent;
  border: 1px solid var(--linha); border-radius: 999px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.reacao:hover { background: #F7F4F1; border-color: var(--linha2); transform: translateY(-1px); }
.reacao:active { transform: translateY(0); }

.reacao__icone { font-size: 1rem; line-height: 1; }
.reacao__n { font-family: var(--mono); font-size: .6875rem; }

/* Reações menos usadas ficam apagadas até alguém usar */
.reacao--fria { opacity: .42; }
.reacao--fria:hover { opacity: 1; }

.reacao.ativo {
  color: var(--vinho); background: #FBF0F2;
  border-color: rgba(163, 32, 54, .35); opacity: 1;
}

.post__pe { margin-top: .875rem; padding-top: .875rem; }

/* ---------------- FOTOS ---------------- */

.anexo {
  display: flex; align-items: center; gap: .75rem;
  margin: .875rem 0 0; padding: .75rem .875rem;
  font-size: .875rem; font-weight: 400; color: var(--fumo);
  background: #FDFCFB; border: 1px dashed var(--linha2); border-radius: 3px;
  cursor: pointer; transition: border-color .16s ease, background .16s ease;
}
.anexo:hover { border-color: var(--vinho); background: #FDF7F8; }
.anexo__icone { font-size: 1.125rem; color: var(--vinho); }
.anexo__texto em { font-style: normal; color: #A79E96; font-size: .8125rem; }
.anexo input[type="file"] { width: auto; padding: 0; border: 0; background: none; font-size: .75rem; }

.foto {
  margin: 1rem 0 0; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 4px; background: #F4F1EE;
}
.foto img { display: block; width: 100%; height: auto; }

.avatar--foto { padding: 0; overflow: hidden; background: none; }
.avatar--foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- FILA DE MODERAÇÃO ---------------- */

.grade-midias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}

.midia-fila {
  margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 4px; background: var(--carta);
}
.midia-fila img { display: block; width: 100%; height: 11rem; object-fit: cover; background: #F4F1EE; }
.midia-fila__erro {
  display: grid; place-items: center; height: 11rem;
  font-size: .75rem; color: var(--fumo); background: #F4F1EE;
}
.midia-fila figcaption { padding: .625rem .75rem; }
.midia-fila figcaption strong { display: block; font-size: .875rem; }
.midia-fila__acoes {
  display: grid; gap: .375rem; padding: 0 .75rem .75rem;
}
.midia-fila__acoes .mini { max-width: none; }

/* ---------------- GRADE (perfil, estilo Instagram) ---------------- */

.grade {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}

.grade__item {
  position: relative; display: block; aspect-ratio: 1;
  overflow: hidden; background: #F1EDE9;
}
.grade__item img, .grade__item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.grade__marca {
  position: absolute; top: .375rem; right: .5rem;
  font-size: .75rem; color: #FFF; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.grade__estado {
  display: grid; place-items: center; height: 100%;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fumo); text-align: center;
}

/* ---------------- VÍDEO ---------------- */

.foto video { display: block; width: 100%; height: auto; background: #000; }
.midia-fila video { display: block; width: 100%; height: 11rem; object-fit: cover; background: #000; }

/* ---------------- VISIBILIDADE E CAIXAS ---------------- */

.visibilidade {
  display: flex; flex-wrap: wrap; align-items: center; gap: .875rem;
  margin-top: .875rem;
}

.radio, .caixa {
  display: inline-flex; align-items: flex-start; gap: .5rem;
  margin: 0; font-size: .8125rem; font-weight: 400; color: var(--fumo); cursor: pointer;
}
.radio input, .caixa input { width: auto; margin: .125rem 0 0; padding: 0; }
.caixa { margin-top: 1.25rem; }
.caixa span { line-height: 1.5; }
.caixa em { display: block; font-style: normal; font-size: .75rem; color: #A79E96; }

h2 .selo { margin-left: .5rem; vertical-align: middle; }

/* =====================================================================
   PERFIL
   ===================================================================== */

.perfil-capa { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.perfil-capa__foto {
  position: relative; flex: none;
  width: 6.5rem; height: 6.5rem; overflow: hidden;
  background: #F1EDE9; border-radius: 50%;
  border: 1px solid rgba(163, 32, 54, .2);
}
.perfil-capa__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-capa__inicial {
  display: grid; place-items: center; height: 100%;
  font-family: var(--display); font-size: 2.75rem; color: var(--vinho);
}

.perfil-capa__dados { flex: 1 1 14rem; min-width: 0; }
.perfil-capa__linha { margin: .375rem 0 0; font-size: .875rem; color: var(--fumo); }
.perfil-capa__procura {
  margin: .5rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--tinta);
}

.perfil-capa__numeros {
  display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem;
  font-size: .8125rem; color: var(--fumo);
}
.perfil-capa__numeros strong {
  font-family: var(--display); font-size: 1.125rem; color: var(--tinta);
  margin-right: .25rem;
}
.perfil-capa__numeros a { color: var(--fumo); }
.perfil-capa__numeros a:hover strong { color: var(--vinho); }

/* ---------------- Envio de foto ---------------- */

.envio {
  display: flex; align-items: center; gap: 1.125rem; flex-wrap: wrap;
  margin-top: 1.25rem; padding: 1.125rem;
  background: #FDFCFB; border: 1px dashed var(--linha2); border-radius: 4px;
  transition: border-color .16s ease, background .16s ease;
}
.envio--sobre { border-color: var(--vinho); background: #FDF5F6; }

.envio__previa {
  flex: none; width: 4.5rem; height: 4.5rem; overflow: hidden;
  background: #F1EDE9; border-radius: 4px;
}
.envio__previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.envio__vazio {
  display: grid; place-items: center; height: 100%;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; color: #A79E96;
}

.envio__texto { flex: 1 1 12rem; min-width: 0; }
.envio__texto strong {
  display: block; font-size: .9375rem; margin-bottom: .1875rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.envio__botoes { display: flex; gap: .5rem; margin-top: .75rem; }
.envio__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.alerta { color: var(--rubro) !important; }

/* ---------------- Campos ---------------- */

.campo-prefixo { display: flex; align-items: stretch; }
.campo-prefixo span {
  display: grid; place-items: center; padding: 0 .75rem;
  font-family: var(--mono); font-size: .9375rem; color: var(--fumo);
  background: #F4F1EE;
  border: 1px solid var(--linha2); border-right: 0; border-radius: 2px 0 0 2px;
}
.campo-prefixo input { border-radius: 0 2px 2px 0; }

.campo-curto { max-width: 7rem; }
.dupla--igual { grid-template-columns: 1fr 1fr; }

input[readonly] { background: #F4F1EE; color: var(--fumo); cursor: not-allowed; }

.contador {
  margin-top: .375rem; text-align: right;
  font-family: var(--mono); font-size: .6875rem; color: #A79E96;
}

.salvar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .875rem 1.25rem; margin-top: .25rem;
  background: rgba(251, 249, 247, .94); backdrop-filter: blur(10px);
  border: 1px solid var(--linha); border-radius: 4px;
}

@media (max-width: 30rem) {
  .perfil-capa { gap: 1rem; }
  .perfil-capa__foto { width: 5rem; height: 5rem; }
  .perfil-capa__inicial { font-size: 2rem; }
  .salvar { flex-direction: column; align-items: stretch; }
  .salvar .botao { width: 100%; }
}

/* =====================================================================
   LAYOUT CENTRALIZADO
   O menu lateral é fixo; o conteúdo ocupa o resto da tela e fica
   centralizado dentro dele — não colado no menu.
   ===================================================================== */

.app .conteudo { margin-inline: auto; }

.perfil { display: grid; gap: 1rem; }

/* ---------------- Capa ---------------- */

.capa { padding: 0; overflow: hidden; }

.capa__fundo {
  height: 9rem;
  background:
    radial-gradient(90% 140% at 20% 0%, rgba(163,32,54,.16) 0%, transparent 60%),
    linear-gradient(120deg, #F2ECE6 0%, #EDE4E5 55%, #F6F1EC 100%);
  border-bottom: 1px solid var(--linha);
}

.capa__corpo {
  display: flex; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap;
  padding: 0 1.75rem 1.25rem; margin-top: -3.25rem;
}

.capa__avatar {
  position: relative; flex: none;
  width: 7rem; height: 7rem; overflow: hidden;
  background: var(--carta); border-radius: 50%;
  border: 4px solid var(--carta);
  box-shadow: 0 2px 10px rgba(28,22,19,.12);
}
.capa__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa__avatar span {
  display: grid; place-items: center; height: 100%;
  font-family: var(--display); font-size: 2.75rem; color: var(--vinho);
  background: #F7F1F2;
}

.capa__id { flex: 1 1 12rem; min-width: 0; padding-bottom: .25rem; }
.capa__id h1 { font-size: 1.75rem; line-height: 1.15; }
.capa__linha { margin: .1875rem 0 0; font-size: .875rem; color: var(--fumo); }

.capa__acoes { display: flex; gap: .5rem; padding-bottom: .25rem; }

.capa__rodape {
  margin: 0; padding: .75rem 1.75rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  color: var(--fumo); background: #FBF9F7; border-top: 1px solid var(--linha);
}

/* ---------------- Abas ---------------- */

.abas {
  display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  padding: 0 .25rem; background: var(--carta);
  border: 1px solid var(--linha);
}
.abas::-webkit-scrollbar { display: none; }

.abas a {
  padding: .875rem 1rem; font-size: .8125rem; font-weight: 600;
  color: var(--fumo); white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .16s ease;
}
.abas a:hover { color: var(--tinta); }
.abas a.ativo { color: var(--vinho); border-bottom-color: var(--vinho); }
.abas__n { font-family: var(--mono); font-size: .6875rem; opacity: .75; }

/* ---------------- Duas colunas ---------------- */

.perfil__grade { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; }
.perfil__principal, .perfil__lado { display: grid; gap: 1rem; align-content: start; }

.lado__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; margin-bottom: .875rem;
}
.lado__topo h2 { margin: 0; font-size: 1rem; }

.lado__links { display: grid; gap: .625rem; font-size: .875rem; }

.estat { display: grid; gap: .625rem; font-size: .8125rem; color: var(--fumo); }
.estat strong {
  font-family: var(--display); font-size: 1.125rem; color: var(--tinta);
  margin-right: .375rem;
}

.resumo-bio { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--fumo); }

.destaque {
  margin: 0 0 1rem; padding: .875rem 1rem;
  font-size: .9375rem; line-height: 1.55; color: var(--tinta);
  background: #FBF5F6; border-left: 2px solid var(--vinho);
}

/* ---------------- Mini cartões de pessoas ---------------- */

.cartoes-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .75rem; }
.cartoes-mini--3 { grid-template-columns: repeat(3, 1fr); gap: .625rem; }

.mini-perfil {
  display: grid; justify-items: center; gap: .3125rem;
  padding: .75rem .375rem; text-align: center; color: inherit;
  border: 1px solid var(--linha); border-radius: 4px;
  transition: border-color .16s ease, background .16s ease;
}
.mini-perfil:hover { border-color: var(--linha2); background: #FAF8F6; }
.mini-perfil strong {
  font-size: .75rem; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-perfil .meta { font-size: .625rem; }
.mini-perfil.novo { border-color: rgba(163,32,54,.35); background: #FDF6F7; }

/* ---------------- Atalho de publicar ---------------- */

.compor--atalho { display: flex; align-items: center; gap: .875rem; }
.compor--atalho a {
  flex: 1; padding: .75rem .875rem; font-size: .875rem; color: var(--fumo);
  background: #FDFCFB; border: 1px solid var(--linha2); border-radius: 999px;
}
.compor--atalho a:hover { border-color: var(--vinho); color: var(--tinta); }

.voltar { margin: 0 0 .25rem; font-size: .8125rem; }

@media (max-width: 52rem) {
  .perfil__grade { grid-template-columns: 1fr; }
  .perfil__lado { order: -1; }
}

@media (max-width: 30rem) {
  .capa__fundo { height: 6.5rem; }
  .capa__corpo { padding: 0 1.125rem 1rem; margin-top: -2.5rem; gap: .875rem; }
  .capa__avatar { width: 5.5rem; height: 5.5rem; }
  .capa__avatar span { font-size: 2rem; }
  .capa__id h1 { font-size: 1.375rem; }
  .capa__rodape { padding: .625rem 1.125rem; }
  .capa__acoes { width: 100%; }
  .capa__acoes .botao { width: 100%; }
}

.rodape__versao { font-family: var(--mono); font-size: .75rem; color: #B5ADA6; letter-spacing: .08em; }

/* =====================================================================
   ADMINISTRAÇÃO — barra lateral fixa.
   Painel de trabalho: o objetivo é decidir rápido, não navegar com calma.
   ===================================================================== */

/* O painel usa a mesma paleta do site: mesmo papel, mesmo vinho.
   Trocar de contexto não deveria trocar de identidade visual. */
.adm { background: var(--papel); }

.adm__quadro { display: grid; grid-template-columns: 14rem minmax(0, 1fr); min-height: 100dvh; }

.adm__lado {
  position: sticky; top: 0; align-self: start; height: 100dvh;
  display: flex; flex-direction: column;
  padding: 1.25rem 0;
  background: var(--carta); border-right: 1px solid var(--linha);
}

/* O numeral gravado da porta reaparece aqui, bem discreto — é o que
   amarra o painel à identidade do site sem competir com o conteúdo. */
.adm__lado::before {
  content: '61';
  position: absolute; bottom: 1rem; right: -.5rem;
  font-family: var(--display); font-size: 5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(163, 32, 54, .07);
  pointer-events: none; user-select: none;
}

.adm__marca { padding: 0 1.25rem 1.25rem; border-bottom: 1px solid var(--linha); }
.adm__marca .marca { font-size: 1.25rem; }
.adm__selo {
  display: block; margin-top: .1875rem;
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fumo);
}

.adm__nav { display: grid; gap: .125rem; padding: .875rem .625rem; }
.adm__nav a {
  display: flex; align-items: center; gap: .625rem;
  padding: .5625rem .625rem; border-radius: 3px;
  font-size: .875rem; font-weight: 500; color: var(--fumo);
  transition: background .14s ease, color .14s ease;
}
.adm__nav a:hover { background: #F7F4F1; color: var(--tinta); }
.adm__nav a.ativo { background: #FBF0F2; color: var(--vinho); font-weight: 600; }
.adm__icone { width: 1rem; text-align: center; opacity: .8; }
.adm__rotulo { flex: 1; }
.adm__n {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem;
  padding: 0 .375rem; font-family: var(--mono); font-size: .625rem;
  color: #fff; background: var(--vinho); border-radius: 999px;
}

.adm__rodape-lado {
  margin-top: auto; display: grid; gap: .375rem;
  padding: 1rem 1.25rem 0; border-top: 1px solid var(--linha);
  font-size: .8125rem;
}
.adm__rodape-lado a { color: var(--fumo); }
.adm__rodape-lado a:hover { color: var(--vinho); }

.adm__corpo { padding: 1.5rem 2rem 3rem; display: grid; gap: 1rem; align-content: start; }

.adm__cabecalho {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: .25rem;
}
.adm__cabecalho h1 { font-size: 1.625rem; }
.adm__dica {
  margin: -.25rem 0 .25rem; font-size: .875rem; line-height: 1.6;
  color: var(--fumo); max-width: 42rem;
}

.adm__pe {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: 1rem 2rem; border-top: 1px solid var(--linha);
  font-size: .75rem; color: var(--fumo); background: var(--carta);
}

.adm__duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 56rem) {
  .adm__quadro { grid-template-columns: 1fr; }
  .adm__lado {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: .75rem; padding: .75rem 1rem; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--linha);
  }
  .adm__marca { padding: 0 .75rem 0 0; border-bottom: 0; border-right: 1px solid var(--linha); }
  .adm__selo { display: none; }
  .adm__nav { display: flex; padding: 0; gap: .25rem; }
  .adm__rotulo { display: none; }
  .adm__nav a { padding: .5rem .625rem; }
  .adm__rodape-lado { display: none; }
  .adm__corpo { padding: 1rem; }
  .adm__duas { grid-template-columns: 1fr; }
}

/* ---------------- Senha com botão de ver ---------------- */

.campo-senha { display: flex; gap: .5rem; align-items: stretch; }
.campo-senha input { flex: 1; }
.campo-senha .acao { flex: none; }

/* ---------------- Zona de exclusão ---------------- */

.perigo-zona h2 { color: var(--rubro); }
.perigo-zona ul { margin: .75rem 0; padding-left: 1.125rem; font-size: .875rem; color: var(--fumo); }
.perigo-zona li { padding-block: .1875rem; }
.grade__apagar {
  position: absolute; bottom: .25rem; right: .25rem;
  padding: .1875rem .4375rem; font-size: .625rem; line-height: 1.4;
  color: #fff; background: rgba(28,22,19,.7); border: 0; border-radius: 3px;
  cursor: pointer; width: auto; margin: 0;
}
.grade__apagar:hover { background: var(--rubro); }
.grade__item form { position: absolute; inset: auto 0 0 auto; margin: 0; }

.lista-simples { margin: .75rem 0 0; padding-left: 1.125rem; font-size: .9375rem; line-height: 1.7; color: var(--fumo); }
.lista-simples li { padding-block: .1875rem; }
.link-perigo { color: var(--rubro) !important; }
.grade__item { position: relative; }

/* ---------------- Portão de idade ---------------- */

.regras18 {
  margin: 1.25rem 0; padding: 1rem 1.25rem;
  background: #FBF5F6; border-left: 2px solid var(--vinho);
}
.regras18 p { margin: 0; font-size: .875rem; }
.regras18 .lista-simples { margin-top: .5rem; color: var(--tinta); font-size: .875rem; }
.porta .forma button + button { margin-top: .625rem; }
.porta button.perigo { background: transparent; color: var(--fumo); border-color: var(--linha2); }
.porta button.perigo:hover { background: #F4F1EE; color: var(--tinta); }
.caixa--18 {
  margin-top: 1.5rem; padding: .875rem 1rem;
  background: #FBF5F6; border: 1px solid rgba(163, 32, 54, .2); border-radius: 3px;
}
.caixa--18 span { color: var(--tinta); }

/* ---------------- Fundadores ---------------- */

.selo-fundador {
  display: inline-flex; align-items: center; padding: .3125rem .625rem;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: #6B5216;
  background: linear-gradient(135deg, #F5E7C4 0%, #EDD9A8 100%);
  border: 1px solid rgba(154, 116, 52, .4); border-radius: 999px;
}

.medidor { display: grid; gap: .5rem; margin: 1.25rem 0; }
.medidor__barra {
  height: .5rem; overflow: hidden;
  background: #EDE8E2; border-radius: 999px;
}
.medidor__barra span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--vinho) 0%, var(--latao) 100%);
  border-radius: 999px; transition: width .3s ease;
}


/* ---------------- Painel: acabamento ---------------- */

.adm .cartao { border-radius: 4px; }

.adm__vazio {
  display: grid; gap: .5rem; justify-items: start;
  padding: 1.5rem 0; color: var(--fumo);
}
.adm__vazio strong { font-size: .9375rem; color: var(--tinta); }
.adm__vazio p { margin: 0; font-size: .875rem; max-width: 34rem; }


.adm__tarefas { list-style: none; padding: 0; }
.adm__tarefas li { padding-block: .0625rem; }
.adm__tarefas a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem .875rem;
  font-size: .9375rem; color: var(--tinta);
  background: #FBF5F6; border-left: 2px solid var(--vinho);
  transition: background .14s ease;
}
.adm__tarefas a:hover { background: #F8EDEF; }
.adm__tarefas a::after { content: '→'; color: var(--vinho); }

/* ---------------- Painel: resumo leve ---------------- */

/* Sem grade fechada e sem caixa: os números respiram sobre o papel.
   Quatro em destaque; o resto vira uma linha discreta abaixo. */
.resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
}

.resumo__item {
  display: block; padding: 1.125rem 1.25rem; color: inherit;
  background: var(--carta); border: 1px solid var(--linha); border-radius: 4px;
  transition: border-color .14s ease;
}
a.resumo__item:hover { border-color: var(--linha2); }

.resumo__item strong {
  display: block; font-family: var(--display);
  font-size: 2rem; line-height: 1.1; color: var(--tinta);
}
.resumo__item span {
  display: block; margin-top: .1875rem;
  font-size: .8125rem; color: var(--fumo);
}

.resumo__item.quente { border-color: rgba(163, 32, 54, .35); background: #FDF7F8; }
.resumo__item.quente strong { color: var(--vinho); }

.miudos {
  display: flex; flex-wrap: wrap; gap: .375rem 1.5rem;
  margin: 0; padding: 0 .25rem;
  font-size: .8125rem; color: var(--fumo);
}
.miudos strong { color: var(--tinta); font-weight: 500; }

/* =====================================================================
   BUSCA DE PESSOAS
   ===================================================================== */

.busca-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .25rem;
}
.busca-topo h1 { font-size: 1.625rem; }
.busca-topo .meta { margin: .25rem 0 0; }

.busca-grade { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; }

.filtros {
  align-self: start; position: sticky; top: 5rem;
  padding: 1.25rem; background: var(--carta);
  border: 1px solid var(--linha); border-radius: 4px;
}
.filtros label:first-of-type { margin-top: 0; }
.filtros .botao { margin-top: 1.5rem; padding: .6875rem; font-size: .8125rem; }

.opcoes { display: flex; flex-wrap: wrap; gap: .3125rem; }
.pilula {
  padding: .3125rem .625rem; font-size: .75rem; color: var(--fumo);
  border: 1px solid var(--linha); border-radius: 999px;
  transition: border-color .14s ease, color .14s ease;
}
.pilula:hover { color: var(--tinta); border-color: var(--linha2); }
.pilula.ativa { color: var(--vinho); border-color: rgba(163,32,54,.4); background: #FBF0F2; }

.resultados { display: grid; gap: .75rem; align-content: start; }

/* ---------------- Ponto de presença ---------------- */

.ponto {
  position: absolute; right: -1px; bottom: -1px;
  width: .6875rem; height: .6875rem; border-radius: 50%;
  border: 2px solid var(--carta); background: var(--fumo);
}
.ponto--on { background: #3FA34D; }

/* Na linha de texto ele não é absoluto */
.meta .ponto, .busca-topo .ponto {
  position: static; display: inline-block;
  width: .5rem; height: .5rem; border: 0; vertical-align: baseline;
}
.online-txt { color: #2E7D3A; font-weight: 500; }

@media (max-width: 52rem) {
  .busca-grade { grid-template-columns: 1fr; }
  .filtros { position: static; }
  .perfil-cartao { grid-template-columns: auto minmax(0, 1fr); }
  .perfil-cartao__acoes {
    grid-column: 1 / -1; grid-auto-flow: column; justify-content: start;
  }
}

/* ---------------- Filtros à direita ---------------- */

.filtros__limpar {
  display: block; margin-bottom: .75rem; text-align: right;
  font-size: .8125rem; color: var(--vinho);
}
.filtros label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fumo); }
.filtros .caixa { text-transform: none; letter-spacing: 0; font-size: .8125rem; color: var(--tinta); }
.filtros input[type="search"], .filtros input[type="text"], .filtros input[type="number"] {
  padding: .625rem .75rem; font-size: .875rem;
}





/* ---------------- Cartão de pessoa com faixa de fotos ----------------
   Dois por linha: as três fotos ficam lado a lado e pequenas, sem
   dominar a tela. Cartões da mesma linha esticam juntos. */

.resultados {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .75rem; align-items: stretch;
}

.pf {
  display: flex; flex-direction: column;
  padding: 1rem; background: var(--carta);
  border: 1px solid var(--linha); border-radius: 4px;
  transition: border-color .14s ease;
}
.pf:hover { border-color: var(--linha2); }

.pf__topo { display: flex; align-items: center; gap: .75rem; color: inherit; }
.pf__foto { position: relative; flex: none; }
.pf__id { min-width: 0; line-height: 1.35; }
.pf__id strong {
  display: block; font-size: .9375rem; font-weight: 500; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf__id span {
  display: block; font-size: .8125rem; color: var(--fumo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pf__texto {
  margin: .75rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.pf__fotos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  margin-top: .75rem; border-radius: 3px; overflow: hidden;
}
.pf__fotos span { position: relative; display: block; aspect-ratio: 1; background: #F1EDE9; }
.pf__fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf__fotos b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-size: 1.125rem; font-weight: 400;
  color: #fff; background: rgba(28, 22, 19, .45);
}

.pf__pe {
  display: flex; align-items: center; gap: .375rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .875rem;
}
.pf__pe .acao { padding: .375rem .6875rem; font-size: .8125rem; }

@media (max-width: 30rem) {
  .resultados { grid-template-columns: 1fr; }
}

/* ---------------- Quem reagiu ---------------- */

.reacoes__quem {
  margin-left: .25rem; padding: .3125rem .5rem;
  font-size: .75rem; color: var(--fumo);
  border-bottom: 1px solid transparent;
}
.reacoes__quem:hover { color: var(--vinho); border-bottom-color: var(--vinho); }

.reacao-marca { font-size: 1.125rem; line-height: 1; flex: none; }
.reacoes__total {
  margin-left: .25rem; padding: .3125rem .5rem;
  font-family: var(--mono); font-size: .6875rem; color: var(--fumo);
}

/* ---------------- Conversa: recibo de leitura ---------------- */

.thread { max-height: 60vh; overflow-y: auto; padding-right: .25rem; scroll-behavior: smooth; }

.recibo {
  justify-self: end; margin: -.25rem .25rem 0 0;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: #8F8781;
}
.recibo--visto { color: #2E7D3A; }
.pf__fotos video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.pf__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1rem; font-style: normal; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none;
}

/* ---------------- Convite discreto ---------------- */

.convite-1 {
  border-left: 2px solid var(--vinho); background: #FBF5F6;
  padding: 1rem 1.25rem;
}
.convite-1 strong { display: block; font-size: .9375rem; margin-bottom: .25rem; }
.convite-1 p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--fumo); }
.convite-1 .botao { margin-top: .875rem; }

/* ---------------- Selecionar e apagar conversas ---------------- */

.conversa { position: relative; }
.conversa__marca {
  display: none; align-items: center; flex: none;
  margin: 0 0 0 .25rem; padding: 0;
}
.conversa__marca input { width: 1.125rem; height: 1.125rem; margin: 0; padding: 0; }
.selecionando .conversa__marca { display: flex; }
.selecionando .conversa { cursor: pointer; }
.selecionando .conversa:has(input:checked) { background: #FBF0F2; }

.conversa__link { display: flex; align-items: center; gap: .875rem; flex: 1; min-width: 0; color: inherit; }

.barra-selecao {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; margin-top: .25rem;
  background: rgba(251, 249, 247, .96); backdrop-filter: blur(10px);
  border: 1px solid var(--linha); border-radius: 4px;
}
.acao.perigo { color: var(--rubro); border-color: rgba(196, 87, 75, .4); }
.acao.perigo:hover { background: #FBEDEE; }
.acao:disabled { opacity: .4; cursor: not-allowed; }

.cabecalho-conversa__acoes { display: flex; align-items: center; gap: .375rem; }

/* =====================================================================
   BARRA DO CELULAR — cinco alvos, publicar no centro
   O polegar alcança bem 4 ou 5 alvos na base. Sete viravam alvos de
   40px que todo mundo errava.
   ===================================================================== */

.barra { display: none; }

.lateral__publicar {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: .5rem .625rem; padding: .75rem;
  font-size: .875rem; font-weight: 500; color: #fff;
  background: var(--vinho); border-radius: 4px;
  transition: background .14s ease;
}
.lateral__publicar:hover { background: #8E1B2E; }

@media (max-width: 52rem) {
  .lateral__publicar { display: none; }

  .barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: .375rem .25rem calc(.375rem + env(safe-area-inset-bottom));
    background: rgba(251, 249, 247, .97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--linha);
  }

  .barra a {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .1875rem;
    padding: .5rem .25rem; min-height: 3.25rem;
    color: var(--fumo); text-decoration: none;
  }
  .barra a.ativo { color: var(--vinho); }
  .barra .icone { font-size: 1.25rem; line-height: 1; }
  .barra .rotulo { font-size: .625rem; letter-spacing: .02em; }

  /* O botão de publicar sobe e vira um círculo: é a ação que sustenta
     o clube, e a posição central é a mais fácil de acertar com o polegar. */
  .barra__mais { justify-content: flex-start; }
  .barra__mais .icone {
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; margin-top: -1.125rem;
    font-size: 1.5rem; color: #fff; background: var(--vinho);
    border: 3px solid var(--papel); border-radius: 50%;
    box-shadow: 0 3px 10px rgba(163, 32, 54, .28);
  }
  .barra__mais.ativo .icone { background: #8E1B2E; }
  .barra__mais .rotulo { margin-top: .0625rem; }

  .barra .selo {
    position: absolute; top: .25rem; right: 50%; margin-right: -1.125rem;
    min-width: 1.0625rem; height: 1.0625rem; padding: 0 .3125rem;
    font-family: var(--mono); font-size: .5625rem;
    display: grid; place-items: center;
    color: #fff; background: var(--vinho); border-radius: 999px;
  }

  /* espaço para a barra não cobrir o fim do conteúdo */
  .conteudo { padding-bottom: 5rem; }
}

/* ---------------- Lançador do feed ---------------- */

.lancador {
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem 1.125rem; color: inherit;
  background: var(--carta); border: 1px solid var(--linha); border-radius: 4px;
  transition: border-color .14s ease;
}
.lancador:hover { border-color: var(--linha2); }
.lancador__texto { flex: 1; color: var(--fumo); font-size: .9375rem; }
.lancador__mais {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  font-size: 1.125rem; color: #fff; background: var(--vinho); border-radius: 50%;
}

.pub-atalho {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-bottom: 1rem;
}

/* =====================================================================
   PÁGINA DE PUBLICAR
   ===================================================================== */

.pub {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1px; background: var(--linha);
  border: 1px solid var(--linha); border-radius: 4px; overflow: hidden;
}
.pub__midia, .pub__lado { background: var(--carta); padding: 1.25rem; }

.solta {
  display: grid; place-items: center; min-height: 22rem; cursor: pointer;
  border: 2px dashed var(--linha2); border-radius: 4px;
  transition: border-color .14s ease, background .14s ease;
}
.solta:hover, .solta--sobre { border-color: var(--vinho); background: #FDF7F8; }

.solta__vazio { display: grid; justify-items: center; gap: .5rem; padding: 2rem 1.5rem; text-align: center; }
.solta__icone { font-size: 2.5rem; color: var(--vinho); opacity: .35; line-height: 1; }
.solta__vazio strong { font-size: 1rem; }
.solta__vazio .botao { margin-top: .75rem; }

.solta__previa { width: 100%; }
.solta__previa img, .solta__previa video {
  display: block; width: 100%; max-height: 26rem; object-fit: contain; background: #F1EDE9;
}
.solta__pe { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.solta__pe .meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pub__quem { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linha); }
.pub__quem strong { display: block; font-size: .9375rem; }

.escolha { display: grid; gap: .5rem; }
.escolha__op {
  display: flex; align-items: flex-start; gap: .625rem; margin: 0;
  padding: .75rem .875rem; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 4px;
  font-weight: 400; letter-spacing: 0; text-transform: none; font-size: .875rem;
  transition: border-color .14s ease, background .14s ease;
}
.escolha__op:has(input:checked) { border-color: rgba(163,32,54,.4); background: #FBF5F6; }
.escolha__op strong { display: block; font-size: .875rem; }
.escolha__op input { margin-top: .1875rem; }

.pub__acoes { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.pub__acoes .botao { flex: 1; }

@media (max-width: 52rem) {
  .pub { grid-template-columns: 1fr; }
  .solta { min-height: 14rem; }
}

/* ---------------- Bloco de quem administra ---------------- */

.dono { padding: .25rem 1.25rem; }
.dono__linha {
  display: flex; align-items: center; gap: .875rem;
  padding: 1rem 0; border-top: 1px solid var(--linha);
}
.dono__linha:first-child { border-top: 0; }
.dono__linha > span:nth-child(2) { flex: 1; min-width: 0; }
.dono__linha strong { display: block; font-size: .9375rem; }
.dono__icone {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; font-size: 1rem;
  color: var(--vinho); background: #FBF0F2; border-radius: 50%;
}
.dono .botao { flex: none; }

@media (max-width: 36rem) {
  .dono__linha { flex-wrap: wrap; }
  .dono .botao { width: 100%; }
}

/* ---------------- Fim do perfil: sair e excluir ---------------- */

.conta-pe { padding: .25rem 1.25rem; }
.conta-pe__linha {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--linha);
}
.conta-pe__linha:first-child { border-top: 0; }
.conta-pe__linha > span:first-child { flex: 1; min-width: 0; }
.conta-pe__linha strong { display: block; font-size: .9375rem; }
.conta-pe__linha .acao, .conta-pe__linha .botao { flex: none; }
.conta-pe__linha:last-child strong { color: var(--rubro); }

/* =====================================================================
   BARRA DE TOPO DO CELULAR
   No computador a lateral dá conta. No celular ela não existe, e sem
   este topo não havia marca nem Sair em nenhuma tela.
   ===================================================================== */

.topo { display: none; }

@media (max-width: 52rem) {
  .topo {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .625rem 1rem;
    background: rgba(251, 249, 247, .97); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linha);
  }
  .topo__marca {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--display); font-size: 1.125rem; color: var(--tinta);
  }
  .topo__marca em { font-style: normal; color: var(--vinho); }
  .topo__marca svg { width: 1.375rem; height: 1.375rem; }

  .topo__sair {
    display: flex; align-items: center; gap: .375rem;
    padding: .4375rem .75rem; font-size: .8125rem; color: var(--fumo);
    border: 1px solid var(--linha); border-radius: 999px;
  }
  .topo__sair:active { background: #F4F1EE; }
  .topo__rotulo { letter-spacing: .02em; }
}

/* ---------------- Conversa: abas e foto ---------------- */

.abas--compor { display: flex; gap: .25rem; margin-bottom: .625rem; }
.abas--compor button {
  width: auto; margin: 0; padding: .4375rem .875rem;
  font-family: var(--corpo); font-size: .8125rem; font-weight: 500;
  color: var(--fumo); background: transparent;
  border: 1px solid var(--linha); border-radius: 999px; cursor: pointer;
}
.abas--compor button.ativo {
  color: var(--vinho); border-color: rgba(163,32,54,.4); background: #FBF0F2;
}

.solta--curta { min-height: 7rem; }
.solta--curta .solta__vazio { padding: 1rem; gap: .25rem; }
.solta--curta .solta__icone { font-size: 1.5rem; }
.solta--curta .solta__previa img { max-height: 12rem; }

.bolha__foto { display: block; margin: -.25rem -.25rem .5rem; }
.bolha__foto img {
  display: block; width: 100%; max-width: 18rem; max-height: 20rem;
  object-fit: cover; border-radius: 4px; background: #F1EDE9;
}
.bolha.minha .bolha__foto img { margin-left: auto; }