/* ================================================================
   LIBERADAS.CLUB — estiloanuncio.css
   CSS específico da página de modelo (template).
   Depende de: lbc-novo.css (carregado antes, tokens :root definidos)
   Prefixo: .modelo-*

   Não redefine tokens — usa as variáveis do lbc-novo.css.
   Apenas extends e adiciona componentes exclusivos desta página.
   ================================================================ */

/* ── Override de variáveis do estiloanuncio legacy ──
   Mantém compatibilidade se algum trecho antigo ainda usar --pink, --card etc. */
:root {
  --pink:      var(--c-hot);
  --pink-soft: var(--c-hot-hover);
  --bg:        var(--c-base);
  --card:      var(--c-surface);
  --online:    #00e87a;
  --offline:   #555;
  --muted:     var(--c-text-muted);
}

/* ── Corpo — espaço extra para CTA fixo + tabbar ── */
body.lbc-modelo-page {
  /* tabbar (64px) + cta-wp (64px) + safe-area */
  padding-bottom: calc(128px + var(--safe-bottom, 0px));
}

/* ─────────────────────────────────────────────────
   HERO — cover, avatar, info
   ───────────────────────────────────────────────── */
.modelo-hero {
  position: relative;
}

/* Cover — aspectratio 16/7 mobile, 16/5 desktop */
.modelo-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.modelo-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
/* Gradiente escuro na base — cria profundidade para avatar sobreposto */
.modelo-cover__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(13, 13, 18, .7) 75%,
    rgba(13, 13, 18, 1) 100%
  );
}

/* Profile box */
.modelo-profile {
  position: relative;
  margin-top: -52px;
  padding: 0 14px 0;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  z-index: 10;
}

/* Avatar circular */
.modelo-avatar {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--c-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .6);
  position: relative;
  background: var(--c-surface);
}
.modelo-avatar--online {
  border-color: var(--online);
  box-shadow: 0 0 0 2px rgba(0, 232, 122, .35), 0 4px 20px rgba(0, 0, 0, .6);
}
.modelo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modelo-avatar__badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: var(--online);
  border-radius: 50%;
  border: 2px solid var(--c-base);
  font-size: 0; /* esconde o texto ● */
}

/* Info ao lado do avatar */
.modelo-info {
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 4px;
}
.modelo-info__nome-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0 0 2px;
}
.modelo-info__nome {
  font-family: var(--f-brand);
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0;
  /* gradiente rosa → branco */
  background: linear-gradient(135deg, #fff 0%, #ffb3cc 55%, var(--c-hot) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Selo "Perfil verificado" — mesma linguagem visual do check azul já
   consagrado em redes sociais, reconhecível sem precisar de legenda.
   Fica fora do fluxo de texto do h1 (que já trunca com ellipsis), então
   nunca some junto com o nome em telas estreitas. */
.modelo-verificado {
  flex-shrink: 0;
  display: inline-flex;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: #3ea6ff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t);
}
.modelo-verificado svg { width: 100%; height: 100%; display: block; }
.modelo-verificado:hover, .modelo-verificado:focus-visible { transform: scale(1.12); }
/* Item 6.2 de revisao/RECOMENDACOES-LIBERADAS.md — selo com a pin-up
   dentro do modal de explicação (espaço de verdade, ao contrário do
   gatilho de 18px acima). */
.lbc-selo-verificado { display: block; width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--c-hot); }
.modelo-info__sub {
  font-family: var(--f-brand);
  font-size: .78rem;
  color: var(--c-text-muted);
  margin: 0 0 8px;
  line-height: 1.4;
}
.modelo-info__cidade {
  color: var(--c-hot);
  text-decoration: none;
  font-weight: 700;
}
.modelo-info__cidade:hover { text-decoration: underline; }

/* Redes sociais do modelo */
/* Favoritar — só aparece com JS depois de confirmar visitante logado
   (ver assets/js/lbc-visitante.js, initFavoritar). Mesma linguagem
   visual de .modelo-rede (superfície + borda), mas com rótulo. */
.modelo-favoritar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 7px 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text-muted);
  font-family: var(--f-brand);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t);
  -webkit-tap-highlight-color: transparent;
}
.modelo-favoritar:hover { border-color: var(--c-hot); color: var(--c-text); transform: scale(1.03); }
.modelo-favoritar--ativo {
  background: rgba(255, 47, 109, .12);
  border-color: var(--c-hot);
  color: var(--c-hot);
}
/* Coração preenchido só quando favoritado — troca de estado é só CSS
   (ver lbc-visitante.js, aplicarEstado: só alterna a classe --ativo). */
.modelo-favoritar__ico svg path { fill: none; }
.modelo-favoritar--ativo .modelo-favoritar__ico svg path { fill: currentColor; }

.modelo-redes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.modelo-rede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  transition: border-color var(--t), background var(--t), transform var(--t);
  -webkit-tap-highlight-color: transparent;
}
.modelo-rede:hover { border-color: var(--c-hot); background: rgba(255, 47, 109, .1); transform: scale(1.08); }
.modelo-rede img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .75;
  transition: opacity var(--t);
}
.modelo-rede:hover img { opacity: 1; }

/* Denunciar — só aparece no desktop; no mobile já existe na tabbar.
   ⚠️ CORRIGIDO: é um <button>, mas a regra nunca resetava
   background/border/padding/cursor — sem isso, o navegador aplicava o
   botão nativo do SO (cinza claro, borda 3D "outset", cursor default)
   por cima do tema escuro do site. Mesmo reset que .lbc-tabbar__item já
   faz corretamente pros botões da tabbar. */
.modelo-denunciar-desktop {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--f-brand);
  font-size: .72rem;
  color: var(--c-text-dim);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.modelo-denunciar-desktop:hover { color: var(--c-hot); }

/* Stats — visualizações / avaliação / atualização */
.modelo-stats {
  display: flex;
  gap: 1px;
  margin: 10px 14px 0;
  background: var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.modelo-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  background: var(--c-surface);
  gap: 3px;
}
.modelo-stat__val {
  font-family: var(--f-brand);
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}
.modelo-stat__label {
  font-family: var(--f-brand);
  font-size: .6rem;
  color: var(--c-text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ─────────────────────────────────────────────────
   PLAYER DE ÁUDIO — Web Audio API
   ───────────────────────────────────────────────── */
.modelo-audio {
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
}

.audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 12px 14px;
}

.audio-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-hot);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--f-brand);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  white-space: nowrap;
}
.audio-btn:hover { background: var(--c-hot-hover); transform: scale(1.03); }
.audio-btn__ico  { font-size: 1rem; line-height: 1; }
.audio-btn.playing .audio-btn__ico { content: '⏸'; }

/* Barra de ondas animada */
.audio-wave {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 36px;
  overflow: hidden;
}
.audio-bar {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--c-hot);
  opacity: .3;
  height: 6px; /* altura base — JS anima via inline style */
  transition: height .08s ease, opacity .08s ease;
}
/* Animação idle suave quando não está tocando */
.audio-wave:not(.playing) .audio-bar {
  animation: idle-wave 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.04s);
}
@keyframes idle-wave {
  0%, 100% { height: 6px; opacity: .25; }
  50%       { height: 14px; opacity: .4; }
}
/* Quando tocando, JS controla altura via style — remover animação CSS */
.audio-wave.playing .audio-bar {
  animation: none;
  opacity: .85;
}

/* ─────────────────────────────────────────────────
   GALERIA
   ───────────────────────────────────────────────── */
.modelo-galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 12px 10px;
  width: 100%;
  box-sizing: border-box;
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  background: var(--c-surface);
  -webkit-tap-highlight-color: transparent;
}

/* Hover desktop — destaque com escala + overlay */
@media (hover: hover) {
  .gallery-item:hover img,
  .gallery-item:hover video {
    transform: scale(1.06);
    filter: brightness(1.08);
  }
  .gallery-item:hover .gallery-item__overlay {
    opacity: 1;
  }
}

/* Tap mobile — sem hover, abre viewer direto */
.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}

/* Overlay de ação */
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 18, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  opacity: 0;
  transition: opacity .2s ease;
  border-radius: 10px;
}
/* Mobile — mostra overlay suave sempre */
@media (hover: none) {
  .gallery-item__overlay { opacity: 0; }
}

/* Badge vídeo */
.gallery-item--video::before {
  content: '▶';
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  line-height: 28px;
  text-align: center;
}

/* ─────────────────────────────────────────────────
   LIGHTBOX / MEDIA VIEWER
   ───────────────────────────────────────────────── */
.media-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .97);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overscroll-behavior: contain;
}
.media-viewer[hidden] { display: none; }

.viewer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 48px 48px; /* espaço para as setas */
  box-sizing: border-box;
}
.viewer-content img,
.viewer-content video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  user-select: none;
  -webkit-user-drag: none;
}
.viewer-content video { background: #000; }

/* Botão fechar */
.viewer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10000;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  font-size: 1rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t);
}
.viewer-close:hover { background: var(--c-hot); border-color: var(--c-hot); }

/* Setas de navegação */
.viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  font-size: 1.6rem;
  width: 44px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.viewer-nav:hover { background: var(--c-hot); border-color: var(--c-hot); }
.viewer-nav--prev { left: 6px; }
.viewer-nav--next { right: 6px; }

/* Contador */
.viewer-counter {
  position: absolute;
  bottom: calc(12px + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-brand);
  font-size: .72rem;
  color: rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .55);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────
   SIDEBAR — wrapper das seções de conteúdo
   No mobile é só um bloco normal (flui como sempre fluiu).
   No desktop vira uma coluna flex dentro do grid-area "sidebar".
   ───────────────────────────────────────────────── */
.modelo-sidebar {
  display: block;
}

/* ─────────────────────────────────────────────────
   SEÇÕES DE CONTEÚDO
   ───────────────────────────────────────────────── */
.modelo-section {
  padding: 20px 14px;
  border-bottom: 1px solid var(--c-border);
}
.modelo-section:last-of-type { border-bottom: none; }

.modelo-section__titulo {
  font-family: var(--f-brand);
  font-size: .78rem;
  font-weight: 800;
  color: var(--c-hot);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 14px;
}
.modelo-section__texto {
  font-family: var(--f-brand);
  font-size: .88rem;
  color: var(--c-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── Avaliações — nota + comentário de visitantes autenticados ── */
.modelo-section__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.modelo-section__cabecalho .modelo-section__titulo { margin: 0; }
.modelo-avaliar-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text);
  font-family: var(--f-brand);
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--t);
  -webkit-tap-highlight-color: transparent;
}
.modelo-avaliar-btn:hover { border-color: var(--c-hot); color: var(--c-hot); }

.modelo-avaliacao-resumo {
  font-family: var(--f-brand);
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
}
.modelo-avaliacao-resumo__estrelas { color: #ffb400; margin-right: 4px; }

.modelo-avaliacoes-lista { display: flex; flex-direction: column; gap: 12px; }
.modelo-avaliacoes-vermais-wrap { text-align: center; margin-top: 14px; }
.modelo-avaliacao-card {
  padding: 12px 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.modelo-avaliacao-card__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.modelo-avaliacao-card__estrelas { color: #ffb400; font-size: .82rem; letter-spacing: 1px; }
.modelo-avaliacao-card__data { font-family: var(--f-brand); font-size: .68rem; color: var(--c-text-dim); }
.modelo-avaliacao-card__texto { font-family: var(--f-brand); font-size: .84rem; color: var(--c-text-muted); line-height: 1.55; margin: 0 0 6px; }
.modelo-avaliacao-card__autor { font-family: var(--f-brand); font-size: .7rem; font-weight: 700; color: var(--c-text-dim); }

/* Seletor de estrelas do modal "Avaliar" */
.lbc-avaliacao-estrelas { display: flex; gap: 6px; margin-bottom: 16px; }
.lbc-avaliacao-estrela {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-border);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--t);
  -webkit-tap-highlight-color: transparent;
}
.lbc-avaliacao-estrela.is-ativa { color: #ffb400; border-color: rgba(255,180,0,.4); background: rgba(255,180,0,.08); }

/* ── Características físicas — grade de atributos ── */
.modelo-attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.modelo-attr {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 9px 11px;
  min-height: 40px;
}
.modelo-attr__ico {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.modelo-attr__label {
  font-family: var(--f-brand);
  font-size: .68rem;
  color: var(--c-text-dim);
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modelo-attr__val {
  font-family: var(--f-brand);
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-text);
  flex-shrink: 0;
  text-align: right;
}

/* ── Chips (atendimento, serviços, idiomas) ── */
.modelo-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.modelo-chip {
  font-family: var(--f-brand);
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 7px 13px;
  transition: border-color var(--t), color var(--t), background var(--t);
  cursor: default;
}
.modelo-chip:hover { border-color: rgba(255, 47, 109, .3); color: var(--c-text); }

/* Chips de serviço — destaque leve */
.modelo-chip--hot {
  color: var(--c-hot);
  border-color: rgba(255, 47, 109, .2);
  background: rgba(255, 47, 109, .06);
}
.modelo-chip--hot:hover {
  border-color: var(--c-hot);
  background: rgba(255, 47, 109, .12);
}

/* ── Preços ── */
.modelo-section--pricing { background: var(--c-surface); }

.modelo-precos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.modelo-preco-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px 10px;
  transition: border-color var(--t);
}
.modelo-preco-card:hover { border-color: rgba(255, 47, 109, .2); }
.modelo-preco-card--destaque {
  border-color: rgba(255, 47, 109, .35);
  background: rgba(255, 47, 109, .06);
  box-shadow: 0 0 20px rgba(255, 47, 109, .08);
}
.modelo-preco-card__dur {
  font-family: var(--f-brand);
  font-size: .72rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.modelo-preco-card__val {
  font-family: var(--f-brand);
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}
.modelo-preco-card--destaque .modelo-preco-card__val { color: var(--c-hot); }

/* ── "Ver mais valores" — <details> nativo, fechado por padrão. Só os
   4 valores menos comuns (15min/4h/diária/viagens) entram aqui, e só
   quando existem — mantém a seção principal curta no mobile. ── */
.modelo-precos-mais { margin-top: 10px; }
.modelo-precos-mais__toggle {
  cursor: pointer;
  list-style: none;
  font-family: var(--f-brand);
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-hot);
  padding: 8px 2px;
  user-select: none;
}
.modelo-precos-mais__toggle::-webkit-details-marker { display: none; }
.modelo-precos-mais__toggle::before { content: '+ '; }
.modelo-precos-mais[open] .modelo-precos-mais__toggle::before { content: '− '; }
.modelo-precos--extra { margin-top: 8px; }

/* ── Horários — grade semanal ── */
.modelo-horarios {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modelo-horario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.modelo-horario__dia {
  font-family: var(--f-brand);
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-text-muted);
}
.modelo-horario__hrs {
  font-family: var(--f-brand);
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-hot);
}

/* Linha do dia em andamento — mesmo verde já usado no badge "online" do avatar */
.modelo-horario--aberto {
  border-color: var(--online);
  background: rgba(0, 232, 122, .08);
  box-shadow: 0 0 0 1px rgba(0, 232, 122, .15);
}
.modelo-horario--aberto .modelo-horario__dia,
.modelo-horario--aberto .modelo-horario__hrs {
  color: var(--online);
}

/* Selo "atendendo agora" / "fora do horário" acima da grade */
.modelo-horario-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--f-brand);
  font-size: .76rem;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.3;
}
.modelo-horario-status--aberto {
  background: rgba(0, 232, 122, .1);
  border: 1px solid rgba(0, 232, 122, .3);
  color: var(--online);
}
.modelo-horario-status--fechado {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
}
.modelo-horario-status__ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.modelo-horario-status--aberto .modelo-horario-status__ponto {
  animation: lbcHorarioPulso 1.8s ease-in-out infinite;
}
@keyframes lbcHorarioPulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 232, 122, .45); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 232, 122, 0); }
}

/* ─────────────────────────────────────────────────
   CTA WHATSAPP — fixo, acima da tabbar
   ───────────────────────────────────────────────── */
.modelo-cta-wp {
  /* Item 2.3 — agora é um <button> (fetch no clique, ver
     assets/js/lbc-telefone.js), não mais <a>; border/cursor abaixo
     são o reset que um <a> já tinha de graça pelo user-agent. */
  position: fixed;
  bottom: calc(var(--tabbar-h, 64px) + 10px + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 940;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;   /* verde WhatsApp */
  color: #fff;
  font-family: var(--f-brand);
  font-size: .9rem;
  font-weight: 800;
  padding: 13px 28px;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(37, 211, 102, .45);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  -webkit-tap-highlight-color: transparent;
}
.modelo-cta-wp:hover {
  background: #1ebe5d;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 0 40px rgba(37, 211, 102, .6);
}

/* Ocultar CTA no desktop (setas ficam na sidebar ou no botão inline) */
@media (min-width: 992px) {
  .modelo-cta-wp {
    bottom: 28px;
  }
}

/* ─────────────────────────────────────────────────
   CTA TELEGRAM — mesmos moldes do CTA WhatsApp acima;
   quando os dois existem, este empilha por cima do WhatsApp
   (mais perto da tabbar é sempre o WhatsApp, canal principal).
   ───────────────────────────────────────────────── */
.modelo-cta-tg {
  position: fixed;
  bottom: calc(var(--tabbar-h, 64px) + 10px + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 940;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #29a9eb;   /* azul Telegram */
  color: #fff;
  font-family: var(--f-brand);
  font-size: .9rem;
  font-weight: 800;
  padding: 13px 28px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 28px rgba(41, 169, 235, .45);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  -webkit-tap-highlight-color: transparent;
}
.modelo-cta-tg:hover {
  background: #1c8ecb;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 0 40px rgba(41, 169, 235, .6);
}
.modelo-cta-tg--empilhado {
  bottom: calc(var(--tabbar-h, 64px) + 10px + 58px + var(--safe-bottom, 0px));
}

@media (min-width: 992px) {
  .modelo-cta-tg {
    bottom: 28px;
  }
  .modelo-cta-tg--empilhado {
    bottom: 86px;
  }
}

/* ─────────────────────────────────────────────────
   CTA LIBERADAS.FAN — mesmos moldes dos CTAs acima; é o de
   menor prioridade dos três, então sempre empilha por cima de
   WhatsApp/Telegram (nunca ocupa a posição mais perto da tabbar).
   Cor própria (violeta), distinta do verde/azul de contato direto —
   deixa claro que é "ver conteúdo", não "falar com ela agora".
   Escondido por padrão, ver inc/fan-link-config.php.
   ───────────────────────────────────────────────── */
.modelo-cta-fan {
  position: fixed;
  bottom: calc(var(--tabbar-h, 64px) + 10px + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 940;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #8b5cf6;
  color: #fff;
  font-family: var(--f-brand);
  font-size: .9rem;
  font-weight: 800;
  padding: 13px 28px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 28px rgba(139, 92, 246, .45);
  transition: background var(--t), transform var(--t), box-shadow var(--t);
  -webkit-tap-highlight-color: transparent;
}
.modelo-cta-fan:hover {
  background: #7c3aed;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 0 40px rgba(139, 92, 246, .6);
}
.modelo-cta-fan--empilhado-1 {
  bottom: calc(var(--tabbar-h, 64px) + 10px + 58px + var(--safe-bottom, 0px));
}
.modelo-cta-fan--empilhado-2 {
  bottom: calc(var(--tabbar-h, 64px) + 10px + 116px + var(--safe-bottom, 0px));
}

@media (min-width: 992px) {
  .modelo-cta-fan {
    bottom: 28px;
  }
  .modelo-cta-fan--empilhado-1 {
    bottom: 86px;
  }
  .modelo-cta-fan--empilhado-2 {
    bottom: 144px;
  }
}

/* ─────────────────────────────────────────────────
   ACESSIBILIDADE
   ───────────────────────────────────────────────── */
.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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .modelo-info__nome {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

/* ─────────────────────────────────────────────────
   TABLET — 577px+
   ───────────────────────────────────────────────── */
@media (min-width: 577px) {
  .modelo-galeria     { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .modelo-attrs       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modelo-precos      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .modelo-avatar      { width: 110px; height: 110px; }
  .modelo-info__nome  { font-size: 1.6rem; }
}

/* ─────────────────────────────────────────────────
   DESKTOP — 992px+
   ───────────────────────────────────────────────── */
@media (min-width: 992px) {
  /* Body sem padding tabbar */
  body.lbc-modelo-page { padding-bottom: 80px; }

  /* Layout em duas colunas.
     "audio" fica no topo da coluna direita, "sidebar" (o wrapper
     .modelo-sidebar com todas as seções) ocupa o resto — cada um
     na sua própria área, sem sobreposição. */
  #conteudo-principal {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-areas:
      "hero    hero"
      "galeria audio"
      "galeria sidebar";
    gap: 0 24px;
    align-items: start;
  }

  .modelo-hero        { grid-area: hero; }
  .modelo-galeria     { grid-area: galeria; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 0; }
  .modelo-audio       { grid-area: audio; padding: 16px 0 0; border: none; }

  /* Sidebar: wrapper único vira coluna flex — as seções ficam empilhadas
     na ordem natural do documento, sem se sobrepor. */
  .modelo-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
  }
  .modelo-section { padding: 16px 0; }

  /* Cover mais largo */
  .modelo-cover { aspect-ratio: 16 / 5; }

  .modelo-profile  { margin-top: -68px; padding: 0 0 0; }
  .modelo-avatar   { width: 130px; height: 130px; }
  .modelo-info__nome { font-size: 1.9rem; }

  .modelo-stats { max-width: 1200px; margin: 10px auto 0; }

  /* Denunciar — só some no mobile (tabbar cobre isso lá) */
  .modelo-denunciar-desktop { display: inline-flex; }

  /* Galeria 4 colunas no muito largo */
  @media (min-width: 1280px) {
    .modelo-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}