/* MenuZap Me (MENUZAP_ME_DOMINIO). Tokens e componentes do src/index.css + classes Tailwind do
   React D:\ReactProjetos\menuzap-me, reescritos à mão (sem build). Breakpoints do Tailwind:
   sm 640px, md 768px, lg 1024px. */
:root {
  --marca: #0e6b4e;
  --marca-hover: #0b5a41;
  --marca-suave: #e8f2ee;
  --tinta: #000000;
  --fundo: #f7f8f7;
  --superficie: #ffffff;
  --linha: #e6e8e6;
  --linha-forte: #d4d8d5;
  --apagado: #5f6661;
  --sutil: #8a918c;
  --perigo: #b42318;
  --perigo-suave: #fef3f2;
  --atencao: #8a5a00;
  --atencao-suave: #fff8e6;
  --raio-cartao: 16px;
  --raio-controle: 12px;
  --fonte: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--tinta); font-family: var(--fonte); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
::selection { background: var(--marca-suave); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- utilitários ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min0 { min-width: 0; }
.forte { font-weight: 500; }
.normal { font-weight: 400; }
.pequeno { font-size: 14px; }
.mini { font-size: 12px; }
.suave { color: var(--apagado); }
.marca { color: var(--marca); }
.linha { display: inline-flex; align-items: center; gap: 6px; }
.entre { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pilha { display: flex; flex-direction: column; gap: 16px; }
.pilha.grande { gap: 20px; }
.pilha.inicio { align-items: flex-start; }
.inicio { align-self: flex-start; }
.altura-total { height: 100%; }
.largura-toda { grid-column: 1 / -1; }
.icone { flex-shrink: 0; }
.i35 { width: 14px; height: 14px; }
.i4 { width: 16px; height: 16px; }
.i18 { width: 18px; height: 18px; }
.i5 { width: 20px; height: 20px; }
.i6 { width: 24px; height: 24px; }
.icone.suave { color: var(--sutil); }

/* ---------- botões (buttonStyles.ts) ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: var(--raio-controle); border: 1px solid transparent; background: var(--marca); color: #fff;
  font-size: 15px; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s; user-select: none;
}
.botao:hover { background: var(--marca-hover); }
.botao:disabled, .botao[aria-busy="true"] { pointer-events: none; opacity: .55; }
.botao.secundario { background: #fff; color: var(--tinta); border-color: var(--linha-forte); }
.botao.secundario:hover { background: var(--fundo); }
.botao.fantasma { background: transparent; color: var(--tinta); }
.botao.fantasma:hover { background: var(--fundo); }
.botao.perigo { background: #fff; color: var(--perigo); border-color: var(--linha-forte); }
.botao.perigo:hover { background: var(--perigo-suave); }
.botao.pequeno { height: 36px; padding: 0 14px; font-size: 14px; }
.botao.grande { height: 48px; padding: 0 24px; font-size: 16px; }
.botao.bloco { width: 100%; }
.botao[aria-busy="true"]::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.link-botao { font-size: 14px; font-weight: 500; color: var(--marca); }
.link-botao:hover { text-decoration: underline; }
.link-botao.direita { align-self: flex-end; margin-top: -8px; }
.link-botao.centro { align-self: center; }
.link-marca { font-weight: 500; color: var(--marca); }
.link-marca:hover { text-decoration: underline; }
.icone-botao { display: inline-flex; padding: 8px; border-radius: 8px; color: var(--tinta); }
.icone-botao:hover { background: var(--fundo); }

/* ---------- cartão, campos, alertas, avatar, selos ---------- */
.cartao { border: 1px solid var(--linha); border-radius: var(--raio-cartao); background: #fff; padding: 20px; }
@media (min-width: 640px) { .cartao { padding: 24px; } }
.cartao h2 { font-size: 16px; font-weight: 600; }
.cartao-desc { margin: 4px 0 20px; }
.cartao-titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.icone-caixa { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--raio-controle); background: var(--marca-suave); color: var(--marca); flex-shrink: 0; }
.icone-caixa.neutra { background: var(--fundo); color: var(--apagado); box-shadow: inset 0 0 0 1px var(--linha); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 500; }
.campo-erro { font-size: 14px; color: var(--perigo); }
.entrada {
  width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: var(--raio-controle);
  background: #fff; font-size: 15px; transition: border-color .15s;
}
.entrada:hover { border-color: #a3a3a3; }
.entrada:focus-visible { outline: 2px solid var(--marca); outline-offset: 0; }
.entrada:disabled { background: var(--fundo); color: var(--apagado); }
.entrada[aria-invalid="true"] { border-color: var(--perigo); }
.entrada::placeholder { color: var(--sutil); }
select.entrada { cursor: pointer; padding-right: 32px; }
.entrada.codigo { text-align: center; font-size: 18px; letter-spacing: .4em; }
.senha { position: relative; }
.senha .entrada { padding-right: 44px; }
.ver-senha { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 8px; border-radius: 8px; color: var(--sutil); display: inline-flex; }
.ver-senha:hover { color: var(--tinta); }
.ver-senha .olho-fechado, .ver-senha[aria-pressed="true"] .olho { display: none; }
.ver-senha[aria-pressed="true"] .olho-fechado { display: block; }

.alerta { display: flex; gap: 12px; padding: 12px 16px; border: 1px solid var(--linha); border-radius: var(--raio-controle); font-size: 14px; }
.alerta .icone { margin-top: 2px; }
.alerta-texto { min-width: 0; }
.alerta.erro { border-color: rgba(180, 35, 24, .2); background: var(--perigo-suave); color: var(--perigo); }
.alerta.sucesso { border-color: rgba(14, 107, 78, .2); background: var(--marca-suave); color: var(--marca); }
.alerta.info { background: var(--fundo); color: var(--apagado); }
.alerta.aviso { border-color: rgba(138, 90, 0, .2); background: var(--atencao-suave); color: var(--atencao); }

.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
  border-radius: 50%; background: var(--marca-suave); color: var(--marca); font-weight: 600;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.xs { width: 32px; height: 32px; font-size: 12px; }
.avatar.sm { width: 40px; height: 40px; font-size: 14px; }
.avatar.md { width: 56px; height: 56px; font-size: 18px; }
.avatar.xl { width: 96px; height: 96px; font-size: 30px; }
@media (min-width: 640px) { .avatar.xl { width: 112px; height: 112px; } }
.avatar.anel { box-shadow: 0 0 0 4px var(--fundo); }

.selo { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 500; }
.selo.ok { background: var(--marca-suave); color: var(--marca); }
.selo.neutro { background: var(--fundo); color: var(--apagado); box-shadow: inset 0 0 0 1px var(--linha); }
.selo.aviso { background: var(--atencao-suave); color: var(--atencao); }

.divisor { display: flex; align-items: center; gap: 12px; margin: 24px 0; font-size: 12px; color: var(--sutil); }
.divisor span { flex: 1; height: 1px; background: var(--linha); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; border-radius: 8px; }
.logo-texto { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
.logo-texto span { color: var(--marca); }

/* ---------- layout público (Header/Footer) ---------- */
.layout-publico { display: flex; flex-direction: column; min-height: 100dvh; }
.pular { position: absolute; left: -9999px; }
.pular:focus { position: fixed; top: 12px; left: 12px; z-index: 50; background: #fff; padding: 8px 16px; border-radius: 8px; }
.topo { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--linha); background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); }
.topo-interno { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; max-width: 1152px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .topo-interno { padding: 0 24px; } }
.topo-nav, .topo-acoes { display: none; align-items: center; gap: 8px; }
.topo-nav { gap: 4px; }
.topo-mobile { display: flex; align-items: center; gap: 4px; }
@media (min-width: 768px) {
  .topo-nav, .topo-acoes { display: flex; }
  .topo-mobile { display: none; }
}
.nav-link { padding: 8px 12px; border-radius: 8px; font-size: 15px; color: var(--apagado); transition: color .15s; }
.nav-link:hover { color: var(--tinta); }
.nav-link.ativo { font-weight: 500; color: var(--marca); }
.nav-mobile { border-top: 1px solid var(--linha); background: #fff; padding: 8px 16px 16px; }
.nav-mobile nav { display: flex; flex-direction: column; }
.nav-mobile .pilha { gap: 8px; margin-top: 12px; }
@media (min-width: 768px) { .nav-mobile { display: none !important; } }
[data-alternar] .quando-aberto, [data-alternar][aria-expanded="true"] .quando-fechado { display: none; }
[data-alternar][aria-expanded="true"] .quando-aberto { display: block; }
.publico-main { flex: 1; }

.menu-usuario { position: relative; }
.menu-usuario-botao { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 999px; }
.menu-usuario-botao:hover { background: var(--fundo); }
.menu-usuario-lista {
  position: absolute; right: 0; z-index: 50; margin-top: 8px; width: 256px; padding: 6px; border: 1px solid var(--linha);
  border-radius: var(--raio-cartao); background: #fff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px -4px rgba(0, 0, 0, .05);
}
.menu-usuario-quem { padding: 8px 12px 12px; border-bottom: 1px solid var(--linha); }
.menu-usuario-lista nav { display: flex; flex-direction: column; padding-top: 6px; }
.menu-usuario-lista nav a, .menu-usuario-lista nav button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 14px; text-align: left; }
.menu-usuario-lista nav a:hover, .menu-usuario-lista nav button:hover { background: var(--fundo); }

.rodape { border-top: 1px solid var(--linha); background: #fff; }
.rodape-interno { display: flex; flex-direction: column; gap: 24px; max-width: 1152px; margin: 0 auto; padding: 40px 16px; }
@media (min-width: 640px) { .rodape-interno { padding: 40px 24px; } }
@media (min-width: 768px) { .rodape-interno { flex-direction: row; align-items: center; justify-content: space-between; } }
.rodape ul { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--apagado); }
.rodape ul a:hover { color: var(--tinta); }
.rodape-copy { border-top: 1px solid var(--linha); }
.rodape-copy p { max-width: 1152px; margin: 0 auto; padding: 20px 16px; font-size: 12px; color: var(--sutil); }
@media (min-width: 640px) { .rodape-copy p { padding: 20px 24px; } }

/* ---------- home ---------- */
.home { display: flex; flex-direction: column; align-items: center; max-width: 768px; margin: 0 auto; padding: 64px 16px 80px; text-align: center; }
@media (min-width: 640px) { .home { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) { .home { padding-top: 112px; padding-bottom: 112px; } }
.home h1 { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
@media (min-width: 640px) { .home h1 { font-size: 48px; } }
.home-acoes { display: flex; flex-direction: column; justify-content: center; gap: 12px; width: 100%; margin-top: 40px; }
@media (min-width: 640px) { .home-acoes { flex-direction: row; width: auto; } }
.home-bloco { width: 100%; margin-top: 64px; }
.home-bloco + .home-bloco { margin-top: 48px; }
.home-bloco h2 { font-size: 14px; font-weight: 500; color: var(--apagado); }
.pilulas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.pilula { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--linha); border-radius: 999px; background: #fff; font-size: 14px; transition: border-color .15s, color .15s; }
.pilula:hover { border-color: var(--marca); color: var(--marca); }
.home-apps { display: flex; flex-direction: column; justify-content: center; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .home-apps { flex-direction: row; } }

.em-breve { display: flex; flex-direction: column; align-items: center; max-width: 576px; margin: 0 auto; padding: 96px 16px; text-align: center; }
@media (min-width: 640px) { .em-breve { padding: 128px 16px; } }
.em-breve .icone-caixa { width: 48px; height: 48px; }
.em-breve h1 { margin-top: 20px; font-size: 30px; font-weight: 600; letter-spacing: -.025em; }
.em-breve p { margin: 12px 0 32px; font-size: 18px; color: var(--apagado); }

.nao-encontrada { display: flex; flex-direction: column; min-height: 100dvh; background: var(--fundo); }
.nao-encontrada main { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px; text-align: center; }
.nao-encontrada h1 { margin-top: 24px; font-size: 24px; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
@media (min-width: 640px) { .nao-encontrada h1 { font-size: 30px; } }
.nao-encontrada p { max-width: 384px; margin: 12px 0 32px; color: var(--apagado); }
.nao-encontrada footer { display: flex; justify-content: center; padding-bottom: 32px; }
.icone-circulo { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--sutil); box-shadow: inset 0 0 0 1px var(--linha); }

/* ---------- login (AuthLayout) ---------- */
.layout-auth { display: flex; flex-direction: column; min-height: 100dvh; background: var(--fundo); }
.layout-auth main { display: flex; flex: 1; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-coluna { width: 100%; max-width: 400px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 32px; }
.auth-cartao { padding: 24px; }
@media (min-width: 640px) { .auth-cartao { padding: 32px; } }
.auth-termos { margin-top: 24px; text-align: center; font-size: 12px; color: var(--sutil); }
.auth-termos a { text-decoration: underline; text-underline-offset: 2px; }
.auth-termos a:hover { color: var(--tinta); }
.auth-titulo { text-align: center; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.auth-sub { margin-top: 8px; text-align: center; font-size: 14px; color: var(--apagado); }
.auth-alertas { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.auth-alertas:not(:has(> :not([hidden]))) { display: none; }
.etapa { margin-top: 24px; }
.etapa form { display: flex; flex-direction: column; gap: 16px; }
.etapa form > .botao[type="submit"]:first-of-type { margin-top: 8px; }
.auth-troca { margin-top: 32px; text-align: center; font-size: 14px; color: var(--apagado); }
.auth-troca a { font-weight: 500; color: var(--marca); }
.auth-troca a:hover { text-decoration: underline; }
.email-resumo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--fundo); font-size: 14px; }
.google-botao { display: flex; justify-content: center; min-height: 44px; }
.google-botao[aria-busy="true"] { pointer-events: none; opacity: .5; }
.google-indisponivel { display: flex; flex-direction: column; gap: 6px; }
.google-indisponivel p { text-align: center; font-size: 12px; color: var(--sutil); }

/* ---------- painel (DashboardLayout + Sidebar) ---------- */
.layout-painel { display: flex; min-height: 100dvh; background: var(--fundo); }
.lateral { display: none; position: sticky; top: 0; height: 100dvh; width: 256px; flex-shrink: 0; border-right: 1px solid var(--linha); background: #fff; padding: 20px 12px; }
@media (min-width: 1024px) { .lateral { display: block; } }
.lateral-conteudo { display: flex; flex-direction: column; height: 100%; }
.lateral-logo { padding: 4px 12px 24px; }
.lateral-nav { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.lateral-item { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--raio-controle); font-size: 15px; color: var(--apagado); text-align: left; transition: background-color .15s, color .15s; }
.lateral-item:hover { background: var(--fundo); color: var(--tinta); }
.lateral-item.ativo { background: var(--marca-suave); font-weight: 500; color: var(--marca); }
.lateral-usuario { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linha); }
.lateral-usuario .lateral-item { margin-top: 8px; }
.lateral-quem { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.painel-coluna { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.painel-topo-mobile { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--linha); background: #fff; }
@media (min-width: 1024px) { .painel-topo-mobile { display: none; } }
.painel-main { flex: 1; padding: 24px 16px; }
@media (min-width: 640px) { .painel-main { padding: 24px; } }
@media (min-width: 1024px) { .painel-main { padding: 40px; } }
.painel-largura { width: 100%; max-width: 896px; margin: 0 auto; }
.gaveta-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .3); }
.gaveta { position: fixed; top: 0; bottom: 0; left: 0; z-index: 51; display: flex; flex-direction: column; width: min(20rem, 85vw); padding: 16px 12px; background: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); overflow-y: auto; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 12px; }
@media (min-width: 1024px) { .gaveta, .gaveta-fundo { display: none !important; } }

.cabecalho-pagina { margin-bottom: 32px; }
.cabecalho-pagina h1 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
@media (min-width: 640px) { .cabecalho-pagina h1 { font-size: 28px; } }
.cabecalho-pagina p { margin-top: 6px; color: var(--apagado); }

.busca { position: relative; }
.busca .entrada { padding-left: 36px; }
.busca-icone { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--sutil); pointer-events: none; }
.lista-lojas > li + li { border-top: 1px solid var(--linha); }
.loja { display: flex; flex-direction: column; gap: 16px; padding: 16px 0; }
.lista-lojas > li:first-child, .lista-lojas > li.primeira { padding-top: 0; border-top: 0; }
.lista-lojas > li:last-child, .lista-lojas > li.ultima { padding-bottom: 0; }
@media (min-width: 640px) { .loja { flex-direction: row; align-items: center; justify-content: space-between; } }
.loja-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.loja-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.loja-acoes { display: flex; flex-shrink: 0; gap: 8px; }
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 14px; }
.paginacao-botoes { display: flex; align-items: center; gap: 8px; }
.grade-servicos { display: grid; gap: 16px; }
@media (min-width: 640px) { .grade-servicos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grade-servicos { grid-template-columns: repeat(3, 1fr); } }
.servico-titulo { margin-top: 16px; }
.servico-titulo + p { margin-top: 4px; }

.conta-quem { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.grade-2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grade-2 { grid-template-columns: 1fr 1fr; } }
.cidade-atual { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1px solid var(--linha); border-radius: var(--raio-controle); background: var(--fundo); }
@media (min-width: 640px) { .cidade-atual { flex-direction: row; align-items: center; justify-content: space-between; } }
.rotulo { margin-bottom: 8px; }
.seletor-cidade { display: grid; gap: 12px; }
@media (min-width: 640px) { .seletor-cidade { grid-template-columns: 140px 1fr; } }
.lista-acessos { font-size: 14px; }
.lista-acessos li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
.lista-acessos li + li { border-top: 1px solid var(--linha); }
.lista-acessos li:first-child { padding-top: 0; }
.lista-acessos li:last-child { padding-bottom: 0; }
@media (min-width: 640px) { .lista-acessos li { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } }
.sessao { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sessao p { margin-top: 4px; }
@media (min-width: 640px) { .sessao { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- perfil público (PublicProfile) ---------- */
.perfil-casca { min-height: 100dvh; background: var(--fundo); }
.perfil-main { width: 100%; max-width: 640px; margin: 0 auto; padding: 32px 16px 40px; }
@media (min-width: 640px) { .perfil-main { padding: 56px 24px 40px; } }
.perfil-capa { height: 144px; overflow: hidden; border-radius: var(--raio-cartao); background: #fff; }
@media (min-width: 640px) { .perfil-capa { height: 176px; } }
.perfil-capa img { width: 100%; height: 100%; object-fit: cover; }
.perfil-topo { display: flex; flex-direction: column; align-items: center; padding-top: 16px; text-align: center; }
.perfil-topo.com-capa { margin-top: -48px; padding-top: 0; }
.perfil-topo h1 { margin-top: 16px; font-size: 24px; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
@media (min-width: 640px) { .perfil-topo h1 { font-size: 28px; } }
.perfil-slug { margin-top: 2px; font-size: 15px; color: var(--marca); }
.perfil-titulo { margin-top: 8px; font-size: 15px; color: var(--apagado); }
.perfil-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 12px; font-size: 14px; color: var(--apagado); }
.perfil-categoria { padding: 2px 10px; border: 1px solid var(--linha); border-radius: 999px; background: #fff; }
.perfil-bio { max-width: 65ch; margin-top: 20px; font-size: 15px; line-height: 1.625; white-space: pre-line; color: rgba(0, 0, 0, .8); }
.perfil-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
.perfil-whats, .perfil-ligar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: var(--raio-controle); font-size: 15px; font-weight: 500; }
.perfil-whats { background: var(--marca); color: #fff; }
.perfil-whats:hover { background: var(--marca-hover); }
.perfil-ligar { border: 1px solid var(--linha); background: #fff; }
.perfil-ligar:hover { background: var(--fundo); }
.perfil-links { margin-top: 28px; }
.perfil-links ul { display: flex; flex-direction: column; gap: 10px; }
.perfil-link { display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio-controle); background: #fff; font-size: 15px; transition: border-color .15s, background-color .15s; }
a.perfil-link:hover { border-color: rgba(14, 107, 78, .4); background: rgba(232, 242, 238, .4); }
.perfil-link-icone { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: var(--marca-suave); color: var(--marca); }
.perfil-link-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.perfil-link-seta { color: var(--sutil); transition: color .15s; }
a.perfil-link:hover .perfil-link-seta { color: var(--marca); }
.perfil-rodape { margin-top: 48px; text-align: center; }
.perfil-rodape a { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sutil); }
.perfil-rodape a:hover { color: var(--tinta); }
.perfil-rodape strong { font-weight: 600; color: var(--tinta); }
.perfil-rodape strong.marca { color: var(--marca); }
.perfil-erro { display: flex; flex-direction: column; align-items: center; padding: 80px 16px; text-align: center; }
.perfil-erro h1 { font-size: 20px; font-weight: 600; }
.perfil-erro p { margin: 8px 0 24px; color: var(--apagado); }