/* ===== Identidade =====
   Anil (azul de tinta de sertão), sol, urucum, mata e mar.
   Azulejo como textura, sol e balão de conversa como marca. */

:root {
  --anil: #1a2a6c;
  --anil-escuro: #0f1a47;
  --sol: #ffb81f;
  --urucum: #e2402a;
  --mata: #0f7a5c;
  --mar: #1f8fd1;

  --fundo: #fdf8f0;
  --papel: #ffffff;
  --tinta: #14172e;
  --suave: #5f647c;
  --linha: #efe5d3;
  --realce: #ffeab5;

  --fonte-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --fonte: "DM Sans", "Segoe UI", system-ui, sans-serif;

  --azulejo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 5l7 16 16 7-16 7-7 16-7-16-16-7 16-7z' fill='none' stroke='%23fff' stroke-opacity='.2' stroke-width='1.6'/%3E%3Ccircle cx='28' cy='28' r='3' fill='%23fff' fill-opacity='.2'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--mar); outline-offset: 2px; }

.oculto { display: none !important; }

/* ===== Ícones e avatar ===== */
.ico {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.ico.cheio { fill: currentColor; }

.avatar {
  width: var(--t, 40px);
  height: var(--t, 40px);
  border-radius: 50%;
  background: var(--c, var(--anil));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: calc(var(--t, 40px) * 0.42);
  flex: 0 0 auto;
}

/* ===== Estrutura ===== */
.app {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) 290px;
  max-width: 1320px;
  margin: 0 auto;
  min-height: 100vh;
}

.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--linha);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 24px;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.02em;
  color: var(--anil);
}
.marca-logo svg { width: 36px; height: 36px; display: block; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px;
  border: 0;
  background: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
}
.nav-item:hover { background: #f7eedd; }
.nav-item.ativo { background: var(--realce); color: var(--anil); font-weight: 700; box-shadow: inset 4px 0 0 var(--sol); }
.nav-item.ativo .ico { stroke-width: 2.3; }

.principal { padding: 24px 24px 80px; min-width: 0; }
.coluna { max-width: 630px; margin: 0 auto; }
.topo-movel { display: none; }

.direita {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: auto;
  scrollbar-width: none;
  padding: 36px 8px 24px 56px;
}
.direita::-webkit-scrollbar { display: none; }

/* ===== Botões e campos ===== */
.btn {
  border: 0;
  background: var(--anil);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 700;
}
.btn:hover { background: var(--anil-escuro); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-cheio { width: 100%; margin-top: 24px; padding: 13px; }

.btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linha);
  background: var(--papel);
  padding: 9px 16px;
  border-radius: 12px;
  font-weight: 600;
}
.btn-sec:hover { background: #eef0f8; }

.campo-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
}

.seguir {
  border: 0;
  background: none;
  color: var(--anil);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 8px;
}
.seguir.seguindo { color: var(--suave); }

/* ===== Cabeçalho do feed ===== */
.cabecalho-feed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.abas { display: flex; gap: 22px; }
.aba {
  border: 0;
  background: none;
  padding: 8px 0;
  font-weight: 600;
  color: var(--suave);
  border-bottom: 3px solid transparent;
}
.aba.ativa { color: var(--tinta); border-bottom-color: var(--sol); }

.sel {
  border: 1px solid var(--linha);
  background: var(--papel);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
}

/* ===== Histórias ===== */
.historias {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 18px;
  scrollbar-width: none;
}
.historias::-webkit-scrollbar { display: none; }

.historia {
  flex: 0 0 auto;
  width: 72px;
  border: 0;
  background: none;
  padding: 0;
  text-align: center;
}
.anel {
  display: inline-flex;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sol), var(--urucum));
}
.anel.visto { background: var(--linha); }
.anel.sem-story { background: transparent; box-shadow: inset 0 0 0 2px var(--linha); }
.anel .avatar { border: 3px solid var(--fundo); }
.historia-nome {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Post ===== */
.post {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 18px;
  margin-bottom: 20px;
  overflow: hidden;
}
.post-topo { padding: 14px 16px; }
.autor {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
}
.autor-nome { display: block; font-weight: 700; line-height: 1.2; }
.autor-meta { display: block; font-size: 13px; color: var(--suave); }

/* A foto aparece inteira, do jeito que foi tirada; se for muito alta, ela encolhe e sobra uma faixa neutra nas laterais */
.midia-foto {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(80vh, 720px);
  object-fit: contain;
  background: #f1ebdd;
}

.midia-texto {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 36px;
  background: var(--bg, var(--anil));
  color: var(--fg, #fff);
  overflow: hidden;
}
.midia-texto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--azulejo);
}
.midia-texto p {
  margin: auto 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(24px, 4.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.midia-texto.longo p {
  font-size: clamp(19px, 3.2vw, 24px);
  line-height: 1.28;
  font-weight: 600;
}
.selo {
  align-self: flex-start;
  margin-top: 24px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
}

.cat-forro   { --bg: var(--sol);    --fg: var(--anil-escuro); }
.cat-forro::before { filter: invert(1); }
.cat-comida  { --bg: var(--urucum); --fg: #fff; }
.cat-saojoao { --bg: var(--mata);   --fg: var(--sol); }
.cat-praia   { --bg: var(--mar);    --fg: #fff; }
.cat-feira   { --bg: var(--anil);   --fg: var(--sol); }
.cat-cordel  { --bg: #16161d;       --fg: var(--sol); }

.acoes { display: flex; align-items: center; gap: 2px; padding: 8px 10px 0; }
.icone-btn {
  display: inline-flex;
  border: 0;
  background: none;
  padding: 8px;
  border-radius: 50%;
}
.icone-btn:hover { background: #eef0f8; }
.icone-btn.curtiu { color: var(--urucum); }
.icone-btn.curtiu .ico, .icone-btn.salvo .ico { fill: currentColor; }
.icone-btn.salvar { margin-left: auto; }

.corpo-post { padding: 2px 16px 16px; }
.curtidas { margin: 4px 0; font-weight: 700; font-size: 14px; }
.legenda { margin: 4px 0; }
.tag {
  display: inline-block;
  margin: 4px 0;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--realce);
  color: var(--anil);
  font-size: 13px;
  font-weight: 600;
}
.ver-todos {
  border: 0;
  background: none;
  padding: 0;
  margin: 6px 0 2px;
  color: var(--suave);
  font-size: 14px;
}
.comentario { margin: 4px 0; font-size: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.comentario > span { min-width: 0; overflow-wrap: anywhere; }

.comentar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.comentar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14px;
  outline: none;
}
.comentar button {
  border: 0;
  background: none;
  color: var(--anil);
  font-weight: 700;
}

/* ===== Grade (explorar e perfil) ===== */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
  border: 1px solid var(--linha);
  background: var(--papel);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 600;
}
.chip.ativo { background: var(--anil); border-color: var(--anil); color: #fff; }

.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #e9ebf3;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .midia-texto { aspect-ratio: auto; height: 100%; padding: 14px; text-align: left; }
.tile .midia-texto p {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-info {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 26, 71, 0.6);
  color: #fff;
  font-weight: 700;
  opacity: 0;
}
.tile-info .ico { width: 20px; height: 20px; }
.tile:hover .tile-info, .tile:focus-visible .tile-info { opacity: 1; }

/* ===== Buscar, listas, perfil ===== */
.titulo-pagina {
  font-family: var(--fonte-titulo);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.busca-campo {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel);
  margin-bottom: 20px;
}
.subtitulo {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
  margin: 24px 0 8px;
}

.linha-pessoa { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.linha-pessoa .info { flex: 1; min-width: 0; }
.linha-pessoa .info span { display: block; }
.linha-pessoa .nome { font-weight: 700; line-height: 1.2; }
.linha-pessoa .meta {
  font-size: 13px;
  color: var(--suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-pessoa { border: 0; background: none; padding: 0; text-align: left; }

.perfil-topo { display: flex; align-items: center; gap: 28px; margin-bottom: 24px; }
.perfil-nome {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
}
.perfil-handle { color: var(--suave); font-size: 14px; }
.perfil-bio { margin: 10px 0 0; max-width: 46ch; }
.perfil-stats { display: flex; gap: 22px; margin: 12px 0; flex-wrap: wrap; }
.perfil-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.notificacao {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 0;
  background: none;
  border-radius: 12px;
  text-align: left;
}
.notificacao:hover { background: #f7eedd; }

.vazio { text-align: center; padding: 56px 24px; color: var(--suave); }
.vazio h3 {
  font-family: var(--fonte-titulo);
  font-size: 20px;
  color: var(--tinta);
  margin: 0 0 6px;
}
.vazio p { margin: 0 auto 16px; max-width: 36ch; }

/* ===== Coluna da direita ===== */
.painel { margin-bottom: 24px; }
.conta { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.conta .info { flex: 1; min-width: 0; }
.conta .info span { display: block; }
.conta .nome { font-weight: 700; line-height: 1.2; }
.conta .meta { font-size: 13px; color: var(--suave); }
.painel-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.link-azul, .link-cinza { border: 0; background: none; padding: 0; font-size: 13px; font-weight: 700; }
.link-azul { color: var(--urucum); }
.link-cinza { color: var(--anil); }
.link-azul:hover, .link-cinza:hover { text-decoration: underline; }
.pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pilula { border: 1px solid #f3d98f; background: #fffaf0; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.pilula span { color: var(--suave); font-weight: 500; margin-left: 4px; }
.pilula:hover { background: var(--realce); }
.painel h3 {
  font-family: var(--fonte-titulo);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}
.alta {
  display: block;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: none;
  text-align: left;
}
.alta b { display: block; }
.alta span { font-size: 13px; color: var(--suave); }
.rodape { font-size: 12px; color: var(--suave); margin: 0 0 6px; }

/* ===== Janela ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 26, 71, 0.6);
  overflow: auto;
}
.modal-caixa {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow: auto;
  background: var(--papel);
  border-radius: 18px;
}
.modal-caixa.largo { max-width: 560px; }
.modal-caixa .post { margin: 0; border: 0; border-radius: 0; }

.fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tinta);
}
.modal-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linha);
}
.modal-topo h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 18px; }
.modal-topo .fechar { position: static; background: none; }

.criar-corpo { padding: 16px 20px; }
.criar-autor { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.criar-corpo textarea {
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  font-size: 18px;
  line-height: 1.4;
  background: none;
}
.previa {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  background: #f1ebdd;
  border-radius: 12px;
  margin-top: 8px;
}
.criar-linha { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.criar-linha .sel { flex: 1; min-width: 0; border-radius: 12px; }
.contador { margin-left: auto; font-size: 13px; color: var(--suave); }
.modal-rodape { display: flex; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--linha); }

/* ===== Aviso ===== */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 80;
  transform: translate(-50%, 16px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ===== Tela de entrada ===== */
.entrada {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-content: start;
  overflow-y: auto;
  background: var(--fundo);
}
.entrada-arte {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 56px;
  background: var(--anil);
  color: #fff;
}
.entrada-arte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--azulejo);
  background-size: 84px;
}
.entrada-arte::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--sol);
  /* anéis que se expandem a partir do sol: encontro e conexão */
  box-shadow: 0 0 0 28px rgba(255, 184, 31, 0.22), 0 0 0 64px rgba(255, 184, 31, 0.10);
}
.entrada-arte .marca { color: #fff; padding: 0; }
.entrada-arte h1 {
  margin: 0 0 24px;
  max-width: 11ch;
  font-family: var(--fonte-titulo);
  font-size: clamp(42px, 5.6vw, 76px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.entrada-arte .sub { max-width: 40ch; margin: 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.entrada-arte .lema {
  max-width: 30ch;
  margin: 0;
  padding-top: 18px;
  border-top: 3px solid var(--sol);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
}

.entrada-form { display: flex; align-items: center; justify-content: center; padding: 32px; }
.entrada-form form { width: 100%; max-width: 380px; }
.entrada-form h2 {
  margin: 0 0 8px;
  font-family: var(--fonte-titulo);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.entrada-form label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
.entrada-form .campo-input { font-size: 16px; border-color: #dccfb4; transition: border-color .15s, box-shadow .15s; }
.entrada-form .campo-input:hover { border-color: #c4b28c; }
.entrada-form .campo-input:focus { outline: none; border-color: var(--anil); box-shadow: 0 0 0 3px rgba(26, 42, 108, 0.18); }
.entrada-form .btn-cheio { font-size: 16px; padding: 14px; transition: background .15s, transform .1s, box-shadow .15s; box-shadow: 0 6px 16px rgba(26, 42, 108, 0.22); }
.entrada-form .btn-cheio:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(26, 42, 108, 0.22); }
.entrada-form .btn-cheio:disabled { box-shadow: none; }
.entrada-form button:focus-visible, .entrada-form .link-esqueci:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
.entrada-form .link-azul { color: #b3301d; font-size: 14px; }
.entrada-form .dica-convite { color: var(--suave); }
.entrada-form .aceite { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; line-height: 1.4; }
.entrada-form .aceite input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--anil); }
.entrada-form .tipo-conta { margin-top: 20px; }
.entrada-form .tipo-opcao { margin: 0; font-weight: 400; transition: border-color .15s, background .15s; }
.entrada-form .tipo-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.entrada-form .tipo-opcao { position: relative; display: block; padding: 12px 14px 12px 40px; }
.entrada-form .tipo-opcao::before { content: ""; position: absolute; left: 13px; top: 15px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #b9a984; background: #fff; }
.entrada-form .tipo-opcao:has(input:checked)::before { border-color: var(--urucum); background: radial-gradient(circle, var(--urucum) 0 4px, #fff 5px); }
.entrada-form .tipo-opcao:has(input:focus-visible) { outline: 3px solid var(--sol); outline-offset: 2px; }
.entrada-form .tipo-opcao small { color: var(--suave); font-size: 12.5px; }
.entrada-form .tipo-opcao:hover { border-color: #c4b28c; }
.entrada-form .alterna .aba { font-size: 15px; }
.alterna { display: flex; gap: 22px; margin: 12px 0 4px; }
.erro { margin: 14px 0 0; color: #b8281a; font-size: 14px; font-weight: 600; }
.erro:empty { display: none; }

/* Computador/tablet: a faixa da marca fica parada e só o formulário rola */
@media (min-width: 721px) {
  .entrada { display: flex; }
  .entrada-arte { flex: 0 0 52.38%; position: sticky; top: 0; align-self: flex-start; height: 100vh; min-height: max-content; }
  .entrada-form { flex: 1 1 0; min-width: 0; min-height: 100vh; align-self: flex-start; }
}

/* Telas baixas (notebooks): compacta a faixa da marca pra nada ficar cortado */
@media (min-width: 721px) and (max-height: 820px) {
  .entrada-arte { padding-top: 32px; padding-bottom: 32px; }
  .entrada-arte h1 { font-size: clamp(38px, 5vw, 58px); margin-bottom: 12px; }
  .entrada-arte .lema { padding-top: 14px; font-size: 18px; }
  .entrada-form { padding-top: 24px; padding-bottom: 24px; align-items: flex-start; }
}

/* ===== Telas menores ===== */
@media (max-width: 1100px) {
  .entrada-arte { padding: 40px 40px; }
  .entrada-arte::after { width: 300px; height: 300px; right: -110px; top: -110px; box-shadow: 0 0 0 20px rgba(255, 184, 31, 0.22), 0 0 0 46px rgba(255, 184, 31, 0.10); }
  .app { grid-template-columns: 72px minmax(0, 1fr); }
  .direita { display: none; }
  .lateral .nome-app, .nav-txt { display: none; }
  .nav-item { justify-content: center; }
  .lateral .marca { justify-content: center; padding: 4px 0 24px; }
}

@media (max-width: 720px) {
  .app { display: block; }
  .lateral {
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    height: auto;
    z-index: 30;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: 6px 8px;
    background: var(--papel);
    border-right: 0;
    border-top: 1px solid var(--linha);
  }
  .lateral .marca { display: none; }
  .nav-item { width: auto; padding: 10px; }
  .principal { padding: 14px 12px 90px; }
  .topo-movel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--fonte-titulo);
    font-size: 21px;
    font-weight: 800;
    color: var(--anil);
  }
  .topo-movel svg { width: 30px; height: 30px; display: block; }
  .midia-texto { padding: 26px; }
  .perfil-topo { flex-direction: column; align-items: flex-start; gap: 16px; }
  .entrada { grid-template-columns: 1fr; grid-template-rows: max-content max-content; align-content: start; overflow: auto; }
  .entrada-arte { padding: 20px 22px 24px; gap: 14px; min-height: max-content; overflow: clip; flex: none; }
  .entrada-arte::after { width: 220px; height: 220px; right: -80px; top: -80px; box-shadow: 0 0 0 16px rgba(255, 184, 31, 0.22), 0 0 0 36px rgba(255, 184, 31, 0.10); }
  .entrada-arte h1 { font-size: clamp(32px, 9.5vw, 42px); max-width: 12ch; margin: 0; }
  .entrada-arte .sub, .entrada-arte .lema { display: none; }
  .entrada-form { padding: 24px 22px 40px; align-items: flex-start; }
}

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

/* ===== Vídeo, apagar e editar perfil ===== */
.midia-video {
  display: block;
  width: 100%;
  max-height: 600px;
  background: #000;
}

.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.tile-video {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.tile-video .ico { width: 22px; height: 22px; }

.post-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icone-btn.apagar { color: var(--suave); }
.icone-btn.apagar:hover { color: var(--urucum); }

img.avatar { object-fit: cover; }

.editar-foto { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.editar-foto-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.criar-corpo label.rotulo { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
.perfil-acoes { margin-top: 14px; }

/* ===== Mensagens ===== */
.nav-item { position: relative; }
.selo-nav {
  position: absolute;
  top: 6px;
  left: 26px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--urucum);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--fundo);
}

.conversa {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 0;
  background: none;
  border-radius: 14px;
  text-align: left;
}
.conversa:hover { background: #f7eedd; }
.conversa-info { flex: 1; min-width: 0; }
.conversa-info span { display: block; }
.conversa-nome { font-weight: 700; }
.conversa-previa {
  color: var(--suave);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversa.nova .conversa-previa { color: var(--tinta); font-weight: 600; }
.conversa-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--suave);
}
.contagem {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--anil);
  color: #fff;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.lista-pessoas { max-height: 50vh; overflow-y: auto; margin-top: 12px; }

.chat {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 120px);
  min-height: 360px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 18px;
  overflow: hidden;
}
.chat-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linha);
}
.chat-corpo {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--fundo);
}
.chat-dia { align-self: center; margin: 10px 0 4px; font-size: 12px; color: var(--suave); }
.chat-vazio { margin: auto; color: var(--suave); }
.bolha {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 16px;
  overflow-wrap: anywhere;
}
.bolha-texto { white-space: pre-wrap; }
.bolha.minha { align-self: flex-end; background: var(--anil); color: #fff; border-bottom-right-radius: 5px; }
.bolha.dela { align-self: flex-start; background: var(--papel); border: 1px solid var(--linha); border-bottom-left-radius: 5px; }
.bolha-hora { align-self: flex-end; font-size: 11px; opacity: 0.7; }
.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--linha);
}
.chat-form textarea {
  flex: 1;
  min-width: 0;
  max-height: 120px;
  resize: none;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--papel);
}
.chat-form .btn { margin: 0; }

@media (max-width: 720px) {
  .chat { height: calc(100dvh - 190px); }
  .selo-nav { box-shadow: 0 0 0 2px var(--papel); }
}

/* ===== Botão flutuante de mensagens ===== */
.flutuante {
  position: fixed;
  right: 28px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid #f3d98f;
  border-radius: 999px;
  background: #fff;
  color: var(--anil);
  font-weight: 700;
  box-shadow: 0 6px 24px rgba(26, 42, 108, 0.18);
}
.flutuante:hover { background: var(--realce); }
.flutuante .ico { width: 22px; height: 22px; }
.flut-selo {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--urucum);
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.flut-avatares { display: flex; }
.flut-avatares > * { margin-left: -8px; box-shadow: 0 0 0 2px #fff; border-radius: 50%; }
.flut-avatares > *:first-child { margin-left: 0; }
@media (max-width: 1100px) { .flutuante { display: none; } }

@media (max-width: 720px) {
  .nav-item.ativo { box-shadow: inset 0 3px 0 var(--sol); }
}

/* ===== Perfil estilo rede social ===== */
.ig-perfil {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  grid-template-areas: "foto linha1" "foto stats" "foto sobre";
  column-gap: 28px;
  row-gap: 14px;
  align-content: start;
  padding: 8px 0 28px;
}
.ig-foto { grid-area: foto; display: flex; justify-content: center; align-items: flex-start; }
.ig-foto .avatar { box-shadow: 0 0 0 4px var(--fundo); }
/* Aro em forma de C (de Chamego): a abertura fica virada pra direita, como um abraço aberto */
.aro-c { position: relative; display: inline-flex; margin: 12px; }
.aro-c-svg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); pointer-events: none; overflow: visible; }
.ig-linha1 { grid-area: linha1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ig-user { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.ig-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ig-botoes .btn, .ig-botoes .btn-sec { padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.ig-stats { grid-area: stats; display: flex; gap: 24px; flex-wrap: wrap; }
.ig-sobre { grid-area: sobre; }
.ig-nome { font-weight: 700; }
.ig-bio { margin-top: 2px; max-width: 46ch; }
.ig-local { color: var(--suave); font-size: 14px; margin-top: 2px; }
.ig-local::before { content: "\1F4CD  "; }

.ig-abas { display: flex; justify-content: center; gap: 48px; border-top: 1px solid var(--linha); margin-bottom: 12px; }
.ig-aba {
  display: flex; align-items: center; gap: 8px;
  border: 0; border-top: 2px solid transparent; margin-top: -1px;
  background: none; padding: 14px 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--suave);
}
.ig-aba .ico { width: 18px; height: 18px; }
.ig-aba.ativa { color: var(--tinta); border-top-color: var(--anil); }

@media (max-width: 720px) {
  .ig-perfil {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "foto linha1" "sobre sobre" "stats stats";
    column-gap: 16px;
  }
  .ig-foto .avatar { --t: 88px !important; }
  .ig-user { font-size: 19px; }
  .ig-botoes { width: 100%; }
  .ig-botoes > * { flex: 1; }
  .ig-stats { justify-content: space-around; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: 10px 0; gap: 8px; font-size: 13px; }
  .ig-stats span { text-align: center; }
  .ig-stats b { display: block; }
  .ig-abas { gap: 0; }
  .ig-aba { flex: 1; justify-content: center; }
  .ig-aba span { display: none; }
}

/* ===== Aconchego de hoje ===== */
.aconchego-card {
  background: linear-gradient(135deg, #fff3cf 0%, #ffe3b3 100%);
  border: 1px solid #f3d98f;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.aconchego-card h2 { font-family: var(--fonte-titulo); font-size: 20px; margin: 0 0 4px; color: var(--anil); letter-spacing: -0.01em; }
.aconchego-card p { margin: 0 0 12px; color: #5b4a22; }
.momentos { display: flex; flex-wrap: wrap; gap: 8px; }
.momento {
  border: 1px solid #ecc86a; background: #fffaf0; border-radius: 999px;
  padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--anil);
}
.momento:hover { background: #fff; }
.momento.ativo { background: var(--anil); border-color: var(--anil); color: #fff; }
.momentos-modal { margin-bottom: 12px; }

.faixa-aconchego {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: #fff3cf; color: #7a5200; font-size: 13px;
  border-top: 1px solid #f3d98f; border-bottom: 1px solid #f3d98f;
}
.faixa-aconchego .ico { width: 16px; height: 16px; color: var(--urucum); }
.faixa-aconchego b { margin-left: auto; color: var(--anil); }

/* ===== Segurança e acolhimento ===== */
.folha { z-index: 120; }
.folha-caixa { max-width: 440px; }
.opcoes { display: flex; flex-direction: column; padding: 8px 12px 16px; }
.opcao { border: 0; background: none; text-align: left; padding: 14px 10px; border-radius: 10px; font-weight: 600; font-size: 15px; }
.opcao:hover { background: var(--realce); }
.opcao.perigo { color: var(--urucum); }
.mini-opcoes { border: 0; background: none; padding: 2px; color: var(--suave); line-height: 0; flex: none; opacity: 0.6; }
.mini-opcoes:hover { opacity: 1; }
.mini-opcoes .ico { width: 16px; height: 16px; }
.btn-icone { padding: 8px 10px; display: inline-flex; align-items: center; }
.btn-icone .ico { width: 18px; height: 18px; }
.chat-mais { margin-left: auto; }
.suave { color: var(--suave); font-size: 14px; }
.sub-titulo { font-family: var(--fonte-titulo); font-size: 17px; margin: 22px 0 8px; }

.intro-combinados { margin: 0 0 14px; color: #5b4a22; }
.combinados { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.combinados li b { display: block; color: var(--anil); }
.combinados li span { color: var(--suave); font-size: 14px; }
.motivos { display: grid; gap: 6px; }
.motivo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; font-weight: 500; cursor: pointer; }
.motivo:has(input:checked) { border-color: var(--anil); background: var(--realce); }
.modal-rodape.sem-borda { border-top: 0; padding: 14px 0 0; }
.rodape-combinados { margin: 14px 0 0; font-size: 14px; }
.link-rodape { border: 0; background: none; padding: 0; font-size: inherit; color: inherit; text-decoration: underline; }
.aceite { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 14px; font-weight: 500; }
.aceite input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

.denuncia { background: var(--papel); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.denuncia.fechada { opacity: 0.7; }
.denuncia-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.denuncia-linha { margin: 8px 0 0; font-size: 14px; }
.denuncia-texto { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--sol); background: #fffaf0; border-radius: 6px; overflow-wrap: anywhere; }
.denuncia-detalhe { margin: 8px 0 0; font-size: 14px; color: var(--suave); }
.denuncia-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btn-sec.perigo { color: var(--urucum); }
.btn-sec:disabled { opacity: 0.45; cursor: not-allowed; }
.criar-corpo #denDetalhe { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px; font-size: 15px; background: var(--papel); }

/* ===== Reações carinhosas ===== */
.acoes { position: relative; }
.reagir { position: relative; display: inline-flex; }
.icone-btn.reagiu { color: inherit; }
.emoji-reacao { font-size: 22px; line-height: 1; display: block; }
.reacoes-picker {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20;
  display: flex; gap: 2px; padding: 6px;
  background: #fff; border: 1px solid #efe5d3; border-radius: 999px;
  box-shadow: 0 8px 28px rgba(26, 42, 108, 0.2);
}
.reacao-op {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 0; background: none; padding: 6px 10px; border-radius: 16px;
}
.reacao-op span { font-size: 26px; line-height: 1.1; transition: transform .12s; }
.reacao-op small { font-size: 11px; font-weight: 600; color: var(--suave); }
.reacao-op:hover { background: var(--realce); }
.reacao-op:hover span { transform: scale(1.25); }
.curtidas { font-weight: 600; }
.carinho-emojis { letter-spacing: 1px; }
.carinho-vazio { font-weight: 500; color: var(--suave); }

/* ===== Seguidores e seguindo ===== */
.stat { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; }
.stat:hover { text-decoration: underline; }
.vinculos-corpo { max-height: 60vh; overflow: auto; }
.centro { text-align: center; padding: 16px 0; }
@media (max-width: 720px) { .ig-stats .stat { text-align: center; } .ig-stats .stat b { display: block; } }

/* ===== Configurações ===== */
.conf-bloco { background: var(--papel); border: 1px solid var(--linha); border-radius: 16px; padding: 6px 8px; margin-bottom: 14px; }
.conf-bloco h2 { font-family: var(--fonte-titulo); font-size: 15px; margin: 10px 10px 4px; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.conf-desc { margin: 4px 10px 10px; color: var(--suave); font-size: 14px; }
.conf-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: none; text-align: left; padding: 14px 10px; border-radius: 12px; }
.conf-linha:hover { background: var(--realce); }
.conf-linha b { display: block; font-weight: 600; }
.conf-linha small { display: block; color: var(--suave); font-size: 13px; margin-top: 1px; }
.conf-linha .ico { width: 18px; height: 18px; color: var(--suave); flex: none; }
.conf-linha.perigo b { color: var(--urucum); }
.conf-opcoes { display: grid; gap: 8px; padding: 0 10px 8px; }
.conf-opcao { text-align: left; border: 1px solid var(--linha); background: var(--papel); border-radius: 12px; padding: 12px 14px; }
.conf-opcao b { display: block; }
.conf-opcao small { color: var(--suave); font-size: 13px; }
.conf-opcao.ativa { border-color: var(--anil); background: var(--realce); box-shadow: inset 4px 0 0 var(--sol); }
.conf-versao { text-align: center; color: var(--suave); font-size: 13px; margin: 18px 0 0; }
.btn.perigo-cheio { background: var(--urucum); }
.btn.perigo-cheio:hover { background: #b9301d; }
.aviso-rascunho { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff3cf; color: #7a5200; font-size: 14px; }
.legal-titulo { font-family: var(--fonte-titulo); font-size: 16px; margin: 16px 0 2px; color: var(--anil); }
.legal-texto { margin: 0; color: #3d4160; font-size: 14px; }
.topo-config { margin-left: auto; }
@media (max-width: 720px) { .nav-config { display: none; } }

/* ===== Estilo do cartão de texto ===== */
.fundo-sol     { --bg: #ffb81f; --fg: #1a2a6c; }
.fundo-sol::before { filter: invert(1); }
.fundo-urucum  { --bg: #e2402a; --fg: #fff; }
.fundo-mata    { --bg: #0f7a5c; --fg: #ffeab5; }
.fundo-mar     { --bg: #1f8fd1; --fg: #fff; }
.fundo-anil    { --bg: #1a2a6c; --fg: #ffb81f; }
.fundo-rosa    { --bg: #f4a6b7; --fg: #5a1730; }
.fundo-rosa::before, .fundo-creme::before { filter: invert(1); opacity: .5; }
.fundo-creme   { --bg: #fdf0d5; --fg: #1a2a6c; box-shadow: inset 0 0 0 1px var(--linha); }
.fundo-noite   { --bg: #16161d; --fg: #ffb81f; }
.fundo-poente  { --bg: linear-gradient(160deg, #ff9a3c, #e2402a 55%, #7a1f5c); --fg: #fff; }
.fundo-oceano  { --bg: linear-gradient(160deg, #1f8fd1, #1a2a6c); --fg: #fff; }
.midia-texto.sem-desenho::before { display: none; }
.midia-texto.alinha-centro { text-align: center; }
.midia-texto.alinha-centro .selo { align-self: center; }
.midia-texto.fonte-texto p { font-family: var(--fonte); font-weight: 600; }
.midia-texto.fonte-manuscrita p { font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(30px, 5.6vw, 44px); line-height: 1.05; letter-spacing: 0; }
.midia-texto.fonte-serifa p { font-family: "Fraunces", Georgia, serif; font-weight: 700; }
.midia-texto.fonte-cordel p { font-family: "Alfa Slab One", Georgia, serif; font-weight: 400; font-size: clamp(22px, 4vw, 30px); line-height: 1.2; letter-spacing: 0; }
.midia-texto.fonte-manuscrita.longo p { font-size: clamp(24px, 4vw, 30px); font-weight: 700; }
.midia-texto.fonte-cordel.longo p { font-size: clamp(17px, 2.8vw, 21px); }
.tile .midia-texto.fonte-manuscrita p { font-size: 18px; }
.tile .midia-texto.fonte-cordel p { font-size: 13px; }
.estilo-box { display: grid; gap: 10px; margin: 10px 0; }
.estilo-previa { aspect-ratio: 16 / 9; padding: 18px; border-radius: 12px; }
.estilo-previa p { font-size: 20px !important; margin: auto 0; }
.estilo-previa.fonte-manuscrita p { font-size: 26px !important; }
.estilo-previa.fonte-cordel p { font-size: 17px !important; }
.estilo-grupo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cor-bolinha { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--linha); background: var(--bg, #fff); padding: 0; }
.cor-bolinha.fundo-padrao { background: conic-gradient(#ffb81f, #e2402a, #1f8fd1, #0f7a5c, #ffb81f); }
.cor-bolinha[aria-pressed="true"] { outline: 3px solid var(--anil); outline-offset: 2px; }
.cor-bolinha::before { display: none; }
.chip-fonte { border: 1px solid var(--linha); background: var(--papel); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.chip-fonte[aria-pressed="true"] { background: var(--realce); border-color: var(--anil); font-weight: 700; }
.chip-fonte.fonte-manuscrita { font-family: "Caveat", cursive; font-size: 18px; }
.chip-fonte.fonte-serifa { font-family: "Fraunces", serif; }
.chip-fonte.fonte-cordel { font-family: "Alfa Slab One", serif; font-size: 13px; }

/* ===== Lembrete de fim de tarde ===== */
.lembrete { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; padding: 18px 20px; border-radius: 18px; color: #fff;
  background: linear-gradient(160deg, #ff9a3c, #e2402a 60%, #7a1f5c); }
.lembrete h2 { font-family: var(--fonte-titulo); font-size: 19px; margin: 0 0 4px; letter-spacing: -0.01em; }
.lembrete p { margin: 0 0 12px; opacity: .95; }
.lembrete-sol { flex: none; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, #ffe08a 0 55%, #ffb81f 56%); box-shadow: 0 0 0 8px rgba(255,255,255,.18), 0 0 0 18px rgba(255,255,255,.08); }
.lembrete-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.lembrete .btn { background: #fff; color: var(--urucum); }
.lembrete .btn-sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 720px) { .lembrete-sol { display: none; } }

/* ===== Coluna da direita mais discreta ===== */
.direita .painel-topo h3 { font-size: 14px; font-weight: 600; color: var(--suave); }
.direita .link-cinza { font-size: 12px; }
.direita .conta .nome { font-size: 14px; }
.direita .conta .meta, .direita .rodape { font-size: 12px; }
.direita .conta img, .direita .conta .avatar { width: 44px !important; height: 44px !important; font-size: 17px !important; }
.direita .painel { opacity: .92; }

/* ===== Stories ===== */
.historia-wrap { position: relative; flex: 0 0 auto; }
.story-mais { position: absolute; right: 6px; top: 44px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--fundo); background: var(--anil); color: #fff; padding: 0; display: grid; place-items: center; }
.story-mais .ico { width: 12px; height: 12px; }
.story-previa { aspect-ratio: 9 / 12; max-height: 300px; padding: 22px; border-radius: 14px; margin: 8px auto; width: 100%; max-width: 230px; }
.story-previa p { font-size: 20px !important; margin: auto 0; }
.story-previa.fonte-manuscrita p { font-size: 26px !important; }
.story-previa.fonte-cordel p { font-size: 16px !important; }
.story-viewer { position: fixed; inset: 0; z-index: 200; background: rgba(10, 12, 30, .92); display: grid; place-items: center; }
.story-viewer.oculto { display: none; }
.story-caixa { position: relative; width: min(420px, 100vw); height: min(760px, 100dvh); background: #000; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.story-cartao { position: absolute; inset: 0; aspect-ratio: auto; padding: 70px 28px 70px; border-radius: 0; }
.story-cartao p { font-size: clamp(26px, 7vw, 36px) !important; }
.story-cartao.fonte-manuscrita p { font-size: clamp(34px, 9vw, 46px) !important; }
.story-cartao.fonte-cordel p { font-size: clamp(22px, 6vw, 30px) !important; }
.story-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.story-legenda { position: absolute; left: 0; right: 0; bottom: 60px; margin: 0; padding: 12px 18px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); text-align: center; z-index: 3; }
.story-barras { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 5; }
.story-barra { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.story-barra.cheia i, .story-barra i.correndo { display: block; height: 100%; background: #fff; }
.story-barra.cheia i { width: 100%; }
.story-barra i { width: 0; }
.story-barra i.correndo { animation: story-corre 5s linear forwards; }
@keyframes story-corre { from { width: 0; } to { width: 100%; } }
.story-topo { position: absolute; top: 22px; left: 12px; right: 8px; display: flex; align-items: center; gap: 8px; color: #fff; z-index: 5; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.story-topo span { opacity: .8; font-size: 13px; }
.story-topo .fechar { margin-left: auto; color: #fff; }
.story-nav { position: absolute; top: 70px; bottom: 76px; width: 40%; background: none; border: 0; z-index: 4; }
.story-volta { left: 0; } .story-passa { right: 0; }
.story-rodape { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; background: rgba(0,0,0,.55); z-index: 5; font-size: 14px; }
.story-apagar { background: none; border: 0; color: #fff; }
@media (prefers-reduced-motion: reduce) { .story-barra i.correndo { animation-duration: 0.01s; } }

/* ===== Perfil: profissão, frase e link ===== */
.ig-prof { color: var(--suave); font-size: 14px; margin-top: 1px; }
.ig-frase { margin-top: 6px; display: inline-block; background: var(--realce); border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.ig-frase i { font-style: normal; font-weight: 600; color: var(--anil); }
.ig-bio { white-space: pre-line; overflow-wrap: anywhere; }
.ig-link a { color: var(--mar); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.ig-link a::before { content: "\1F517  "; }
.ig-link a:hover { text-decoration: underline; }
textarea.campo-input { resize: vertical; font: inherit; }

/* ===== Vídeo em preparo ===== */
.midia-processando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; padding: 24px; text-align: center; background: var(--realce); color: var(--anil); }
.midia-processando small { color: var(--suave); }
.tile .midia-processando { min-height: 0; height: 100%; padding: 8px; }
.story-cartao.midia-processando { color: #fff; background: #1a2a6c; }
.girando { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(26, 42, 108, .2); border-top-color: var(--sol); animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 3s; } }

/* ===== Hashtags e filtro de cidade ===== */
.hashtag { border: 0; background: none; padding: 0; font: inherit; color: var(--mar); font-weight: 600; cursor: pointer; }
.midia-texto .hashtag { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hashtag:hover { text-decoration: underline; }
.hashtag-titulo { font-size: 20px; color: var(--anil); }
.hashtag-titulo small { font-weight: 500; font-size: 14px; color: var(--suave); margin-left: 6px; }
.filtros-local { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) { .filtros-local { width: 100%; justify-content: flex-start; } .filtros-local .sel { flex: 1; min-width: 0; } }

/* ajuste do cabeçalho do feed com dois filtros */
.cabecalho-feed { flex-wrap: wrap; gap: 8px 12px; }
.aba { white-space: nowrap; }
.filtros-local { flex-wrap: nowrap; }
.filtros-local .sel { max-width: 170px; }

/* ===== Busca por cidade ===== */
.abas-busca { margin-bottom: 12px; }
.cidade-titulo { color: var(--anil); }
.cidade-titulo small { font-weight: 500; font-size: 14px; color: var(--suave); margin-left: 6px; }
.cidade-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--linha); text-underline-offset: 3px; }
.cidade-link:hover { color: var(--anil); text-decoration-color: var(--sol); }
.linha-pessoa .nome small { color: var(--suave); font-weight: 400; }

/* ===== Tela de pessoas da cidade ===== */
.form-cidade { display: flex; gap: 8px; align-items: stretch; }
.form-cidade .busca-campo { flex: 1; margin-bottom: 0; }
.form-cidade { margin-bottom: 12px; }
.sugestoes-cidade { display: grid; gap: 8px; }
.sugestao-cidade { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; width: 100%; border: 1px solid var(--linha); background: var(--papel); border-radius: 14px; padding: 12px 14px; }
.sugestao-cidade:hover { background: var(--realce); }
.sugestao-cidade b { display: block; }
.sugestao-cidade small { color: var(--suave); }
.cidade-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cidade-topo .titulo-pagina { margin: 0; }
.cidade-secao { margin-bottom: 22px; }
.cidade-secao .cidade-titulo { font-size: 17px; margin: 0 0 10px; }
.cartoes-pessoas { display: grid; gap: 12px; }
.cartao-pessoa { display: flex; gap: 14px; align-items: center; background: var(--papel); border: 1px solid var(--linha); border-radius: 16px; padding: 14px; }
.cartao-pessoa-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cartao-pessoa-info .nome { text-align: left; font-size: 16px; }
.cartao-bio { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; }
.cartao-frase { font-size: 13px; color: var(--anil); }
.cartao-pessoa-acoes { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
@media (max-width: 560px) { .cartao-pessoa { flex-wrap: wrap; } .cartao-pessoa-acoes { flex-direction: row; width: 100%; } .cartao-pessoa-acoes > * { flex: 1; } }
.cartao-pessoa-info .nome { font-weight: 700; }
.cartao-pessoa-info .nome small { font-weight: 400; color: var(--suave); }

.cidade-topo-txt { flex: 1; min-width: 0; }
.cidade-topo .btn-sec { flex: none; }

/* ===== Terra: paisagem, localidade e "mora fora" ===== */
.selos-terra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.selo-terra { display: inline-block; background: #eaf6f1; color: #0b5a43; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; }
.selo-terra.fora { background: #fff0cc; color: #7a4b00; }
.marca-fora { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-weight: 600; }
.chips-filtro { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.chips-filtro::-webkit-scrollbar { display: none; }
.chips-filtro .chip-fonte { white-space: nowrap; flex: none; }
.chip-fonte.ativo { background: var(--realce); border-color: var(--anil); font-weight: 700; }
.filtros-local { flex-wrap: wrap; }

/* ===== Lugares ===== */
.lugar-link { border: 0; background: none; padding: 0; font: inherit; color: var(--mar); font-weight: 600; cursor: pointer; }
.lugar-link:hover { text-decoration: underline; }
.lugares-topo { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.lugares-topo .btn { align-self: flex-start; }
.lugares-lista { display: grid; gap: 12px; }
.cartao-lugar { display: flex; gap: 14px; background: var(--papel); border: 1px solid var(--linha); border-radius: 16px; padding: 12px; }
.lugar-foto { flex: none; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 0; padding: 0; background: var(--realce); display: grid; place-items: center; }
.lugar-foto img { width: 100%; height: 100%; object-fit: cover; }
.lugar-foto.sem span { font-size: 38px; }
.lugar-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.lugar-nome { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-weight: 700; font-size: 16px; color: var(--anil); cursor: pointer; }
.lugar-desc { font-size: 14px; overflow-wrap: anywhere; }
.lugar-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lugar-pagina { background: var(--papel); border: 1px solid var(--linha); border-radius: 16px; padding: 14px; margin-bottom: 14px; display: grid; gap: 8px; }
.lugar-capa { width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; }
.lugar-descricao { margin: 0; overflow-wrap: anywhere; }
.marca-lugar { margin: 8px 0; }
.busca-lugar { margin-top: 8px; }
.resultados-lugar { display: grid; gap: 6px; margin-top: 6px; }
.chip-x { border: 0; background: none; padding: 0 0 0 6px; cursor: pointer; font: inherit; color: var(--suave); }
.aviso-parecido { background: #fff3cf; border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
@media (max-width: 560px) { .lugar-foto { width: 76px; height: 76px; } }
.post-lugar { padding: 0 16px 10px; font-size: 14px; }
.painel-espaco { background: #fff; border: 1px solid #f0e3c4; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; font-size: 14px; color: #3a3f5c; }
@media (max-width: 700px) {
  .aro-c { margin: 10px 14px 10px 14px; }
  .aro-c-svg { inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); }
}

.story-responder { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 12px; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.story-responder input { flex: 1; min-width: 0; height: 44px; border-radius: 22px; border: 1.5px solid rgba(255,255,255,.7); background: rgba(0,0,0,.25); color: #fff; padding: 0 16px; font: inherit; font-size: 15px; }
.story-responder input::placeholder { color: rgba(255,255,255,.8); }
.story-responder input:focus { outline: none; border-color: var(--sol); background: rgba(0,0,0,.45); }
.story-coracao, .story-enviar { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.story-coracao:active { transform: scale(1.25); }
.story-coracao.ativo { animation: story-pulo .3s; }
.story-enviar svg { width: 24px; height: 24px; }
@keyframes story-pulo { 50% { transform: scale(1.35); } }

/* ===== Cartinha de saudade ===== */
.cartinha { padding: 14px 14px 4px; background: linear-gradient(180deg, #fff7e6, #fdf3dc); }
.cartinha-selo { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--urucum); border: 1.5px solid var(--urucum); border-radius: 6px; padding: 3px 9px; transform: rotate(-2deg); margin: 2px 0 10px 4px; background: rgba(255,255,255,.6); }
.cartinha-papel {
  position: relative; background-color: var(--papel, #fffdf6); border-radius: 6px; padding: 22px 22px 18px;
  box-shadow: 0 1px 0 #ecdcb4, 0 6px 14px -8px rgba(90,60,10,.35);
  background-image: repeating-linear-gradient(transparent 0, transparent 31px, rgba(160,125,50,.22) 31px, rgba(160,125,50,.22) 32px);
  background-position: 0 14px;
  border-left: 3px double #e9b0a5;
}
.cartinha-para { display: block; font-family: "Caveat", cursive; font-size: 26px; font-weight: 700; color: var(--anil); line-height: 32px; }
.cartinha-texto { margin: 0; font-family: "Caveat", cursive; font-size: 23px; line-height: 32px; color: #2b2f4a; white-space: pre-wrap; overflow-wrap: anywhere; }
.cartinha-assina { display: block; text-align: right; font-family: "Caveat", cursive; font-size: 24px; font-weight: 700; color: var(--urucum); line-height: 32px; margin-top: 8px; }
.cartinha-assina small { display: block; font-family: var(--fonte); font-size: 12.5px; font-weight: 500; color: var(--suave); line-height: 1.2; }
.cartinha-foto { margin-top: 14px; }
.tile-cartinha { background: #fff7e6 !important; color: var(--anil) !important; display: flex; flex-direction: column; gap: 6px; }
.tile-cartinha p { font-family: "Caveat", cursive !important; font-size: 17px !important; line-height: 1.1 !important; margin: 0; overflow: hidden; }
.tile-carta-ico { font-size: 22px; }
.cartinhas-acao { margin: 0 0 14px; }
.atalho-cartinha { display: block; width: 100%; text-align: left; border: 1.5px dashed var(--urucum); background: #fff7e6; color: var(--urucum); font-weight: 700; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; cursor: pointer; font: inherit; font-weight: 700; }
.atalho-cartinha:hover { background: #ffefcb; }
.cartinha-dica { margin: 0 0 10px; font-size: 14px; }
.cartinha-campo { font-family: "Caveat", cursive; font-size: 22px; line-height: 1.35; min-height: 190px; background: #fffdf6; }
@media (max-width: 700px) {
  .cartinha-papel { padding: 18px 16px 14px; }
  .cartinha-texto { font-size: 22px; }
}

/* Logo sobre fundo azul (tela de entrada): o balão fica claro pra não sumir */
.marca-entrada .marca-logo { --logo-balao: #fff7e0; --logo-coracao: #e2402a; }
.marca-entrada .marca-logo svg { width: 44px; height: 44px; }

.cartinha-papel.tinta-propria .cartinha-para,
.cartinha-papel.tinta-propria .cartinha-texto,
.cartinha-papel.tinta-propria .cartinha-assina { color: var(--tinta); }
.cartinha-papel.papel-escuro { background-image: repeating-linear-gradient(transparent 0, transparent 31px, rgba(255,255,255,.14) 31px, rgba(255,255,255,.14) 32px); border-left-color: #c46a5c; }
.cartinha-papel.papel-escuro .cartinha-para, .cartinha-papel.papel-escuro .cartinha-texto, .cartinha-papel.papel-escuro .cartinha-assina { color: var(--tinta); }
.cartinha-papel.papel-escuro:not(.tinta-propria) { --tinta: #ffffff; }
.cartinha-papel.papel-escuro .cartinha-assina small { color: rgba(255,255,255,.7); }
.cartinha-papel.letra-serifa .cartinha-para, .cartinha-papel.letra-serifa .cartinha-texto, .cartinha-papel.letra-serifa .cartinha-assina { font-family: "Fraunces", Georgia, serif; font-size: 18px; line-height: 32px; font-weight: 600; }
.cartinha-papel.letra-texto .cartinha-para, .cartinha-papel.letra-texto .cartinha-texto, .cartinha-papel.letra-texto .cartinha-assina { font-family: var(--fonte); font-size: 16px; line-height: 32px; font-weight: 500; }
.tile-cartinha { background: var(--papel, #fff7e0) !important; color: var(--tinta, #2b2f4a) !important; }
.tile-cartinha p { color: var(--tinta, #2b2f4a) !important; }
#cartPapeis .cor-bolinha, #cartTintas .cor-bolinha { border: 2px solid #d9d3c0; }
#cartPapeis .cor-bolinha[aria-pressed="true"], #cartTintas .cor-bolinha[aria-pressed="true"] { border-color: var(--anil); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--anil); }
.estilo-rotulo { font-size: 13px; font-weight: 700; color: var(--suave); min-width: 44px; align-self: center; }
.cart-letra-serifa { font-family: "Fraunces", Georgia, serif; } .cart-letra-manuscrita { font-family: "Caveat", cursive; font-size: 17px; }

/* ===== Receita ===== */
.receita { background: #fffaf0; }
.receita-foto { max-height: min(60vh, 520px); }
.receita-corpo { padding: 16px 20px 8px; }
.receita-selo { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mata); border: 1.5px solid var(--mata); border-radius: 6px; padding: 3px 9px; }
.receita-titulo { font-family: "Fraunces", Georgia, serif; font-size: 26px; line-height: 1.15; margin: 10px 0 2px; color: var(--anil); overflow-wrap: anywhere; }
.receita-origem { display: block; font-family: "Caveat", cursive; font-size: 21px; color: var(--urucum); }
.receita-sub { font-family: var(--fonte-titulo); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); margin: 16px 0 6px; }
.receita-ingredientes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.receita-ingredientes li { position: relative; padding-left: 22px; }
.receita-ingredientes li::before { content: "•"; position: absolute; left: 6px; color: var(--sol); font-weight: 900; font-size: 20px; line-height: 1.1; }
.receita-passos { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 8px; }
.receita-passos li { counter-increment: passo; position: relative; padding-left: 34px; overflow-wrap: anywhere; }
.receita-passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--anil); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.tile-receita { background: #fffaf0 !important; color: var(--anil) !important; display: flex; flex-direction: column; gap: 6px; }
.tile-receita p { font-family: "Fraunces", Georgia, serif !important; font-size: 15px !important; line-height: 1.15 !important; margin: 0; font-weight: 700; color: var(--anil) !important; }
.tile-selo-receita { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.9); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font-size: 15px; }
.atalho-receita { border-color: var(--mata); background: #eefaf4; color: var(--mata); }
.atalho-receita:hover { background: #def3e8; }
.abas-busca { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.abas-busca .aba { white-space: nowrap; }

/* ===== Notificações ===== */
.notificacao.nova { background: #fff5d6; }
.notif-texto { display: block; text-align: left; min-width: 0; line-height: 1.35; }
.notif-trecho { color: var(--suave); overflow-wrap: anywhere; }
.notif-hora { display: block; color: var(--suave); font-size: 12.5px; margin-top: 2px; }
.notif-ponto { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--urucum); flex: none; }

/* ===== v10.10: menu lateral e coluna da direita com cara própria ===== */
.app { grid-template-columns: 252px minmax(0, 1fr) 308px; }
.lateral {
  top: 16px;
  height: calc(100vh - 32px);
  align-self: start;
  margin: 16px 4px 16px 12px;
  padding: 14px 10px;
  gap: 3px;
  border: 1px solid var(--linha);
  border-radius: 26px;
  background: var(--papel);
  box-shadow: 0 8px 28px rgba(26, 42, 108, .07);
  overflow-y: auto;
  scrollbar-width: none;
}
.lateral::-webkit-scrollbar { display: none; }
.lateral .marca { padding: 4px 8px 14px; margin-bottom: 8px; border-bottom: 1px dashed #e8dcc3; }

.nav-item { --cor: var(--anil); padding: 7px 10px 7px 7px; gap: 12px; border-radius: 16px; font-size: 15.5px; transition: background .15s, color .15s; }
.nav-item[data-view="inicio"] { --cor: #1a2a6c; }
.nav-item[data-view="buscar"] { --cor: #1f8fd1; }
.nav-item[data-view="explorar"] { --cor: #0f7a5c; }
.nav-item[data-view="mensagens"] { --cor: #c2570c; }
.nav-item[data-view="notificacoes"] { --cor: #b8820a; }
.nav-item[data-acao="meu-perfil"] { --cor: #7a3b8f; }
.nav-item[data-view="configuracoes"] { --cor: #5f647c; }
.nav-item[data-view="moderacao"] { --cor: #e2402a; }
.nav-chip {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 13px;
  flex: none;
  color: var(--cor);
  background: color-mix(in srgb, var(--cor) 13%, white);
  transition: background .15s, color .15s, transform .15s;
}
.nav-chip .ico { width: 22px; height: 22px; }
.nav-item:hover { background: #f8f1e2; }
.nav-item:hover .nav-chip { transform: rotate(-6deg) scale(1.05); }
.nav-item.ativo { background: var(--anil); color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(26, 42, 108, .25); }
.nav-item.ativo .nav-chip { background: var(--sol); color: var(--anil); }
.nav-item.ativo .ico { stroke-width: 2.2; }
.nav-item.ativo:hover { background: var(--anil-escuro); }

.nav-item[data-acao="criar"] {
  order: 20;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--sol), #ff9a1f);
  color: var(--anil);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(255, 154, 31, .35);
}
.nav-item[data-acao="criar"] .nav-chip { background: rgba(255, 255, 255, .6); color: var(--anil); }
.nav-item[data-acao="criar"]:hover { background: linear-gradient(135deg, #ffc233, #ff9a1f); }

.selo-nav { top: 3px; left: 36px; border: 2px solid var(--papel); box-sizing: content-box; min-width: 14px; height: 14px; line-height: 14px; }

.nav-conta {
  order: 30;
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 6px 2px;
  border-top: 1px dashed #e8dcc3;
}
.nav-conta .info { flex: 1; min-width: 0; }
.nav-conta .info span { display: block; }
.nav-conta .nome { font-weight: 700; font-size: 14px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.nav-conta .meta { font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-conta .link-azul { font-size: 12px; }

/* coluna da direita: cartões */
.direita { padding: 16px 12px 24px 20px; }
.direita .painel {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 22px;
  padding: 14px 16px 10px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(26, 42, 108, .04);
}
.direita .painel h3 { font-size: 15px; }
.cartao-cidade {
  display: block; width: 100%; text-align: left; position: relative; overflow: hidden;
  border: 0; border-radius: 22px; margin-bottom: 14px;
  padding: 18px 18px 16px;
  color: #fff;
  background: var(--azulejo), linear-gradient(150deg, #243a95, var(--anil) 60%, #0f1a47);
  box-shadow: 0 8px 22px rgba(26, 42, 108, .25);
}
.cartao-cidade small { display: block; color: var(--sol); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cartao-cidade strong { display: block; font-family: var(--fonte-titulo); font-size: 25px; line-height: 1.1; margin: 4px 0 6px; }
.cartao-cidade span { display: block; font-size: 13px; opacity: .85; }
.cartao-cidade em { display: inline-block; margin-top: 12px; font-style: normal; font-weight: 700; font-size: 13px; color: var(--anil); background: var(--sol); padding: 6px 12px; border-radius: 999px; }
.cartao-cidade:hover { filter: brightness(1.08); }

/* telas médias: só os ícones */
@media (max-width: 1100px) {
  .app { grid-template-columns: 84px minmax(0, 1fr); }
  .lateral { margin: 12px 6px 12px 10px; padding: 12px 8px; }
  .lateral .marca { padding: 2px 0 12px; justify-content: center; }
  .nav-item { justify-content: center; padding: 7px; }
  .selo-nav { left: calc(50% + 6px); }
  .nav-conta { flex-direction: column; padding: 12px 0 0; gap: 8px; }
  .nav-conta .info, .nav-conta .link-azul { display: none; }
}

/* celular: barra embaixo */
@media (max-width: 720px) {
  .lateral {
    top: auto; left: 0; right: 0; bottom: 0;
    height: auto; margin: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--linha);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 20px rgba(26, 42, 108, .08);
    overflow: visible;
    gap: 0;
  }
  .nav-conta { display: none; }
  .nav-item { padding: 3px; gap: 0; border-radius: 14px; width: auto; flex: 0 1 auto; min-width: 0; }
  .nav-item:hover, .nav-item.ativo, .nav-item.ativo:hover { background: none; box-shadow: none; color: inherit; }
  .nav-chip { width: 38px; height: 38px; border-radius: 13px; }
  .nav-item.ativo .nav-chip { background: var(--anil); color: var(--sol); }
  .nav-item[data-acao="criar"] { order: 0; margin: 0; background: none; box-shadow: none; }
  .nav-item[data-acao="criar"] .nav-chip { background: linear-gradient(135deg, var(--sol), #ff9a1f); color: var(--anil); }
  .selo-nav { left: calc(50% + 4px); top: 1px; }
}

/* ===== v10.12: recuperação de senha ===== */
.link-esqueci { display: block; margin: 14px auto 0; border: 0; background: none; color: var(--anil); font-weight: 700; font-size: 14px; text-decoration: underline; padding: 4px 8px; }
.codigo-recuperacao { font-family: "DM Sans", ui-monospace, Consolas, monospace; font-weight: 800; font-size: clamp(22px, 7vw, 30px); letter-spacing: .12em; text-align: center; padding: 18px 10px; margin: 14px 0 12px; border: 2px dashed var(--sol); border-radius: 16px; background: #fff8e5; color: var(--anil); user-select: all; word-break: break-all; }
.btn-cheio-sec { width: 100%; justify-content: center; margin-bottom: 8px; }
.campo-codigo { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.conf-linha.atencao { background: #fff8e5; border-color: #f3d98f; }

/* v10.13: formulários longos na folha rolam em vez de cortar o botão */
.folha-caixa { max-height: 92vh; overflow-y: auto; }

/* ===== v10.14: cartinha para uma pessoa ===== */
.aba-contagem { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--urucum); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.aba-emoji { font-size: 16px; line-height: 1; }
.carta-abas { display: flex; gap: 8px; margin: 14px 0 12px; }
.carta-lista { display: grid; gap: 8px; }
.carta-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 16px; background: var(--papel); border-left: 6px solid var(--papel-cor, #f3d98f); }
.carta-item { border-left-color: color-mix(in srgb, var(--papel) 70%, #d9b76a); }
.carta-item:hover { background: #fff8e5; }
.carta-item.nova { background: #fff3cf; border-color: #f3d98f; }
.carta-ico { font-size: 26px; flex: none; }
.carta-resumo { flex: 1; min-width: 0; }
.carta-resumo b { display: block; }
.carta-resumo small { display: block; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carta-item.nova .carta-resumo b::after { content: "nova"; margin-left: 8px; font-size: 11px; background: var(--urucum); color: #fff; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.carta-hora { flex: none; font-size: 12px; color: var(--suave); }
.carta-privada { padding: 4px 16px 0; }
.carta-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 4px; }
.carta-aviso { padding: 0 16px 16px; margin: 6px 0 0; font-size: 13px; }
#cartModo [aria-pressed="true"], .carta-abas [aria-pressed="true"] { background: var(--anil); color: #fff; border-color: var(--anil); }
.ig-aba { position: relative; }
.ig-aba .aba-contagem { margin-left: 6px; }
@media (max-width: 720px) { .ig-aba .aba-contagem { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; } }

/* ===== v10.15: polimento ===== */
.post-topo .autor { flex: 1; min-width: 0; }
.flutuante { display: none !important; }
.tile-receita { background: #fff6e0 !important; box-shadow: inset 0 0 0 1px #f0e3c4; }
@media (max-width: 720px) {
  .filtros-local { flex-wrap: wrap; }
  .filtros-local .sel { flex: 1 1 calc(50% - 8px); max-width: none; }
}

.comentario-editado { color: var(--suave); font-size: 12px; margin-left: 2px; }

/* ===== v10.17: convites ===== */
.dica-convite { margin: 6px 0 0; font-size: 13px; color: var(--suave); }
#blocoConvite { margin-bottom: 4px; }
.btn-cheio-sec-cheio { width: 100%; padding: 12px; }
.convite-contagem { margin: 8px 0 12px; font-size: 13px; }
.convite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 8px; border: 2px dashed var(--sol); border-radius: 16px; background: #fff8e5; }
.convite.usado { border: 1px solid var(--linha); background: var(--papel); }
.convite-cod { font-weight: 800; font-size: 20px; letter-spacing: .12em; color: var(--anil); }
.convite.usado .convite-cod { color: var(--suave); text-decoration: line-through; font-size: 16px; }
.convite-estado { font-size: 14px; color: var(--mata); font-weight: 600; }
.convite-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.convite-botoes .btn, .convite-botoes .btn-sec { padding: 8px 12px; font-size: 14px; }
.vazio-mini { color: var(--suave); text-align: center; padding: 12px 0; }

/* v10.18 — verificação por e-mail */
.linha-codigo{display:flex;gap:8px;align-items:stretch}
.linha-codigo .campo-input{flex:1;min-width:0}
.linha-codigo .btn{white-space:nowrap;flex:none;padding-left:14px;padding-right:14px}
.btn-claro{background:#fff;color:var(--anil,#1a2a6c);border:1.5px solid var(--anil,#1a2a6c)}
.btn-claro:disabled{opacity:.55;cursor:default}
#inpCodigoEmail{margin-top:8px;letter-spacing:.2em;text-align:center}
#blocoEmail .dica-convite{margin-top:6px}
.linha-codigo .btn.btn-sec{color:var(--anil);background:#fff;border:1.5px solid var(--anil);justify-content:center}
.linha-codigo .btn.btn-sec:hover{background:#eef0f8}
.linha-codigo .btn.btn-sec:disabled{opacity:.6}

/* v10.19 — aba Esporte */
.nav-item[data-view="esporte"] { --cor: #2f9e44; }
.cartao-time{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--linha);border-radius:18px;padding:14px 16px;margin:0 0 14px}
.time-bola{width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,#2f9e44 14%,white);color:#2f9e44;display:grid;place-items:center;flex:none}
.time-bola .ico{width:26px;height:26px}
.time-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.time-info small{color:var(--suave,#6b7090);font-size:12.5px}
.time-info b{font-size:17px;line-height:1.25}
.time-info b span{font-weight:600;font-size:12px;color:var(--suave,#6b7090);margin-left:4px}
.esporte-postar{margin:12px 0}
.time-grupo{font-size:13px;color:var(--suave,#6b7090);margin:14px 0 8px;text-transform:uppercase;letter-spacing:.05em}
.times-grade{display:flex;flex-wrap:wrap;gap:8px}
.time-op{border:1.5px solid var(--linha);background:#fff;border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px}
.time-op:hover{background:#eef0f8}
.time-op.ativo{border-color:#2f9e44;background:color-mix(in srgb,#2f9e44 12%,white);color:#23772f}
.selo-time{background:color-mix(in srgb,#2f9e44 13%,white);color:#23772f}
@media (max-width:720px){.cartao-time{padding:12px}.time-info b{font-size:15.5px}}

/* v10.20 — Vem aí (datas da cultura nordestina) */
.cartao-festa{display:block;width:100%;text-align:left;border:0;cursor:pointer;color:#3b2500;border-radius:20px;padding:16px 18px;margin:0 0 14px;
  background:linear-gradient(135deg,#ffc233,#ff9a2e);box-shadow:0 6px 18px rgba(255,154,46,.28)}
.cartao-festa small{display:block;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7a3b00}
.cartao-festa strong{display:block;font-family:var(--fonte-titulo);font-size:24px;line-height:1.1;margin:4px 0 4px;color:#1a2a6c}
.cartao-festa span{display:block;font-weight:700;font-size:14px}
.cartao-festa em{display:block;font-style:normal;font-weight:700;font-size:12.5px;margin-top:8px;color:#1a2a6c}
.cartao-festa:hover{filter:brightness(1.03)}
.cartao-festa.so-movel{display:none}
@media (max-width:1100px){.cartao-festa.so-movel{display:block}}

/* v10.20.1 — cartões "Sua terra" e "Vem aí" mais discretos */
.cartao-cidade, .cartao-festa { padding: 11px 40px 11px 14px; border-radius: 16px; margin-bottom: 10px; position: relative; }
.cartao-cidade { box-shadow: 0 3px 10px rgba(26, 42, 108, .16); }
.cartao-festa { box-shadow: 0 3px 10px rgba(255, 154, 46, .2); }
.cartao-cidade small, .cartao-festa small { font-size: 10.5px; }
.cartao-cidade strong, .cartao-festa strong { font-size: 17px; margin: 1px 0 2px; }
.cartao-cidade span, .cartao-festa span { font-size: 12px; font-weight: 600; }
.cartao-cidade em, .cartao-festa em { display: none; }
.cartao-cidade::after, .cartao-festa::after { content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 800; font-size: 18px; }
.cartao-cidade::after { color: var(--sol); }
.cartao-festa::after { color: #1a2a6c; }

/* v10.23 — categorias novas */
.cat-cultura    { --bg: #7a3e9d;       --fg: #fff; }
.cat-capoeira   { --bg: var(--mata);   --fg: #fff; }
.cat-vaquejada  { --bg: #8a4b12;       --fg: var(--sol); }
.cat-artesanato { --bg: var(--sol);    --fg: var(--anil-escuro); }
.cat-carnaval   { --bg: #d6246e;       --fg: #fff; }
.cat-fe         { --bg: var(--anil);   --fg: #fff; }

/* v10.24 — Chamego como app instalado */
html { -webkit-text-size-adjust: 100%; }
button, a, select, input { touch-action: manipulation; }
body { overscroll-behavior-y: none; }
.passos-instalar { margin: 0; padding-left: 20px; line-height: 1.7; font-size: 15px; }
@media (max-width: 720px) {
  .topo-movel { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* v10.25 — Cantinho da saudade */
.nav-item[data-view="saudade"] { --cor: #e2402a; }
.saudade-intro{background:linear-gradient(135deg,#fff3dc,#ffe3d6);border:1px solid #f4d9bd;border-radius:18px;padding:14px 16px;margin:0 0 14px}
.saudade-intro p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:#5a3a1a}
.saudade-tipos{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.saudade{background:#fff;border:1px solid var(--linha);border-radius:18px;padding:14px 16px;margin:0 0 14px}
.saudade-topo-card{display:flex;align-items:center;gap:10px}
.saudade-avatar{border:0;background:none;padding:0;cursor:pointer;display:flex}
.saudade-quem{flex:1;min-width:0;display:flex;flex-direction:column}
.saudade-quem small{color:var(--suave,#6b7090);font-size:12.5px}
.saudade-selo{display:inline-block;margin:12px 0 6px;padding:4px 11px;border-radius:999px;background:#fff0e8;color:#b8321f;font-weight:700;font-size:13px}
.saudade-texto{font-family:"Caveat",cursive;font-size:24px;line-height:1.25;color:var(--anil);margin:4px 0 8px;white-space:pre-wrap;overflow-wrap:anywhere}
.saudade-foto{display:block;max-width:100%;max-height:420px;border-radius:14px;margin:8px 0;object-fit:cover}
.saudade-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--linha)}
.saudade-btn{border:1.5px solid var(--linha);background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--anil)}
.saudade-btn:hover{background:#f4f5fb}
.saudade-btn.ativo{background:#ffe9e4;border-color:#e2402a;color:#b8321f}
.saudade-btn.matar{background:#fff7e0;border-color:#f1c75b;color:#7a5200}
.saudade-conta{font-size:13.5px;color:var(--suave,#6b7090);flex:1}
.saudade-resumo{background:#fff8ee;border-radius:14px;padding:6px 14px 12px;margin-bottom:12px}
.saudade-resumo small{color:var(--suave,#6b7090)}
.sd-respostas{margin:0 0 14px}
.sd-resposta{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--linha)}
.sd-resp-corpo{flex:1;min-width:0}
.sd-resp-corpo p{margin:3px 0 0;font-size:15px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.sd-resp-corpo small{color:var(--suave,#6b7090)}
@media (max-width: 720px) {
  .saudade-abas { gap: 16px; }
  .saudade-abas .aba { font-size: 14.5px; padding-left: 0; padding-right: 0; white-space: nowrap; }
  .saudade-tipos { flex-wrap: nowrap; overflow-x: auto; margin-left: -12px; margin-right: -12px; padding: 2px 12px 6px; scrollbar-width: none; }
  .saudade-tipos::-webkit-scrollbar { display: none; }
  .saudade-tipos .chip-fonte { flex: none; white-space: nowrap; }
}

.saudade-destaque-rotulo { margin: 14px 4px 6px; font-weight: 700; font-size: 14px; color: #b8561a; }

/* ===== v10.26 aconchego mais discreto ===== */
.lembrete { padding: 10px 14px; margin-bottom: 10px; border-radius: 14px; gap: 12px; }
.lembrete .lembrete-sol { display: none; }
.lembrete > div:not(.lembrete-sol) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; width: 100%; }
.lembrete h2 { font-size: 15px; margin: 0; flex: 1 1 220px; }
.lembrete p { display: none; }
.lembrete-acoes { gap: 6px; flex: none; }
.lembrete .btn, .lembrete .btn-sec { padding: 6px 12px; font-size: 13px; min-height: 0; }
.aconchego-card { padding: 10px 14px; margin-bottom: 12px; border-radius: 14px; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.aconchego-card h2 { font-size: 15px; margin: 0; flex: none; }
.aconchego-card p { display: none; }
.aconchego-card .momentos { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
.aconchego-card .momentos::-webkit-scrollbar { display: none; }
.aconchego-card .momento { flex: none; white-space: nowrap; padding: 5px 11px; font-size: 13px; }

.tipo-conta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}
.tipo-opcao{display:flex;gap:8px;align-items:flex-start;padding:10px;border:1px solid var(--borda,#e5d9c8);border-radius:12px;cursor:pointer;font-size:.9rem}
.tipo-opcao small{display:block;opacity:.7;font-size:.75rem;margin-top:2px}
.tipo-opcao:has(input:checked){border-color:#c2410c;background:rgba(194,65,12,.07)}
.selo-terra.visita{background:rgba(14,116,144,.12);color:#0e7490}
.fora-intro{margin:6px 4px 12px;font-size:.85rem;opacity:.75}
.tipo-opcao b{display:block}.tipo-opcao input{margin-top:3px}
.boas-vindas-lista{margin:8px 0 12px;padding-left:18px;font-size:.92rem;line-height:1.5}.boas-vindas-lista li{margin-bottom:6px}
.story-reacoes { position: absolute; left: 0; right: 0; bottom: 68px; z-index: 6; display: flex; justify-content: center; gap: 6px; padding: 0 12px; }
.story-reacoes button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.story-reacoes button:active, .story-reacoes button.enviada { transform: scale(1.3); }
/* Celular: as quatro abas do Início cabem sem cortar "Visto de fora" */
@media (max-width: 480px) {
  .abas { gap: 14px; }
  .abas .aba { font-size: 14px; }
}

/* Conheça gente do Nordeste (carrossel do Início) */
.conheca-gente { margin: 4px 0 18px; }
.conheca-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.conheca-topo h3 { margin: 0; font-size: 16px; font-family: var(--fonte-titulo); }
.conheca-faixa { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.conheca-faixa::-webkit-scrollbar { display: none; }
.card-gente { flex: 0 0 142px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; background: #fff; border: 1px solid #eadfc7; border-radius: 16px; text-align: center; }
.card-gente .nome { font-weight: 700; font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-gente .meta { font-size: 12px; color: var(--suave); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
.card-gente .seguir { width: 100%; }

/* Aviso da festa no celular: recolhe sozinho depois de alguns segundos */
.cartao-festa.so-movel { max-height: 140px; transition: max-height .5s ease, opacity .5s ease, padding .5s ease, margin .5s ease; overflow: hidden; }
.cartao-festa.so-movel.recolhe { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; }