/* ============================================================
   É FESTA — mobile-fixes.css  v2
   ============================================================ */

/* ── GERAL ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
img  { max-width: 100%; height: auto; }

/* ── HEADER ──────────────────────────────────────────────────── */
/* Fundo sempre escuro — garante visibilidade do menu em qualquer página */
.header {
  background: rgba(26,10,46,0.97) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

@media (max-width: 1024px) {
  .nav-links, .nav-acoes { display: none !important; }
  .menu-mobile { display: flex !important; }
}

/* ── MENU MOBILE (drawer) ────────────────────────────────────── */
.menu-mobile {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; padding: 8px;
  cursor: pointer; width: 44px; height: 44px; flex-shrink: 0;
}
.menu-mobile span {
  display: block; width: 24px; height: 2px; background: white;
  border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
  transform-origin: center;
}
#nav-mobile {
  display: none; position: fixed; inset: 0; z-index: 1100;
  background: rgba(14,8,32,.65); backdrop-filter: blur(3px);
  justify-content: flex-end; align-items: stretch;
}
#nav-mobile > div {
  width: min(300px,82vw); height: 100%; background: #1A0A2E;
  display: flex; flex-direction: column; position: relative;
  padding: 72px 24px 40px; gap: 4px; overflow-y: auto;
  box-shadow: -6px 0 32px rgba(0,0,0,.5);
  animation: slideInDrawer .28s cubic-bezier(.4,0,.2,1) both;
}
@keyframes slideInDrawer {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
#nav-mobile a {
  display: block; color: rgba(255,255,255,.85); font-size: 1rem;
  font-weight: 600; padding: 12px 16px; border-radius: 10px;
  text-decoration: none; transition: background .2s;
}
#nav-mobile a:hover { background: rgba(255,255,255,.1); color: white; }
#nav-mobile hr { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: 10px 0; }
#nav-mobile .btn { display: flex; justify-content: center; width: 100%; }
.menu-mobile-fechar {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
  background: rgba(255,255,255,.08); border: none; border-radius: 50%;
  color: white; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.menu-mobile-fechar:hover { background: #E8163C; }

/* ── BANNER TOPO ─────────────────────────────────────────────── */
#banner-topo { position: relative; z-index: 100; }

/* ── HERO BOOKSY (index.html) ────────────────────────────────── */
@media (max-width: 768px) {
  .hero-booksy { padding: 28px 0 18px; }
  .hero-booksy h1 { font-size: clamp(1.2rem,5vw,1.8rem); }
  .hero-booksy p  { font-size: .82rem; margin-bottom: 16px; }
}

/* Barra de busca Booksy — mobile */
@media (max-width: 600px) {
  .busca-booksy {
    flex-wrap: wrap; border-radius: 12px !important;
    padding: 10px; gap: 6px;
  }
  .busca-booksy input {
    width: 100%; min-width: 0; flex: 1 1 100%;
  }
  .busca-booksy .divider { display: none; }
  .busca-booksy #busca-local { max-width: 100% !important; }
  .busca-booksy .btn-buscar {
    width: 100%; border-radius: 8px; padding: 12px; font-size: .9rem;
  }
}

/* Stats bar hero */
.hero-stats-bar {
  display: flex; justify-content: center;
  gap: 24px; margin-top: 16px; flex-wrap: wrap;
}
@media (max-width: 480px) {
  .hero-stats-bar { gap: 16px; margin-top: 12px; }
}

/* ── CATEGORIAS ÍCONES ───────────────────────────────────────── */
.cats-booksy {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.cat-icon-item { scroll-snap-align: start; }

@media (max-width: 480px) {
  .cat-icon-circle { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; }
  .cat-icon-label  { font-size: .62rem !important; max-width: 56px; }
}

/* ── CARROSSEL DESTAQUES ─────────────────────────────────────── */
.carrossel-wrapper { overflow: hidden; width: 100%; }
.carrossel-track   { display: flex; gap: 20px; will-change: transform; }
.anuncio-card { flex: 0 0 min(280px,78vw) !important; min-width: 0; }
.anuncio-img  { height: 180px; }
.carrossel-header { flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 24px; }

@media (max-width: 480px) {
  .anuncio-card { flex: 0 0 min(240px,82vw) !important; }
  .anuncio-img  { height: 150px; }
  .carrossel-track { gap: 12px; }
  .ctrl-btn { width: 34px !important; height: 34px !important; font-size: .85rem; }
  .anuncio-nome { font-size: .84rem !important; }
  .anuncio-preco { font-size: .78rem !important; }
}

/* ── SEÇÕES GERAIS ───────────────────────────────────────────── */
.secao    { padding: 56px 0; }
.container { padding: 0 16px; }
@media (min-width: 640px)  { .secao { padding: 80px 0; } .container { padding: 0 24px; } }
@media (min-width: 1280px) { .container { padding: 0 32px; } }

/* ── COMO FUNCIONA ───────────────────────────────────────────── */
.steps-grid { grid-template-columns: 1fr; }
@media (min-width: 600px) { .steps-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .steps-grid { grid-template-columns: repeat(4,1fr); } }

@media (max-width: 480px) {
  .step-card  { padding: 20px 16px; }
  .step-num   { font-size: 1.8rem !important; }
  .step-titulo { font-size: .92rem !important; }
  .step-desc  { font-size: .78rem !important; }
}

/* ── PLANOS ───────────────────────────────────────────────────── */
.planos-grid { grid-template-columns: 1fr; max-width: 420px; margin: 48px auto 0; }
@media (min-width: 700px)  { .planos-grid { grid-template-columns: repeat(2,1fr); max-width: 100%; } }
@media (min-width: 1000px) { .planos-grid { grid-template-columns: repeat(3,1fr); } }

.anuncios-preco-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (min-width: 640px) { .anuncios-preco-grid { grid-template-columns: repeat(4,1fr); } }

/* ── DEPOIMENTOS ──────────────────────────────────────────────── */
.depo-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .depo-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px) { .depo-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 480px) {
  .depo-card  { padding: 20px 16px; }
  .depo-texto { font-size: .82rem; }
}

/* ── CTA FINAL ────────────────────────────────────────────────── */
.cta-btns { flex-direction: column; align-items: center; gap: 12px; }
.cta-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
@media (min-width: 540px) {
  .cta-btns { flex-direction: row; }
  .cta-btns .btn { width: auto; max-width: none; }
}
@media (max-width: 480px) {
  .cta-final h2 { font-size: clamp(1.4rem,5vw,2rem); }
  .cta-final p  { font-size: .85rem; }
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 600px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
@media (max-width: 480px) {
  .footer-bottom  { flex-direction: column; gap: 12px; text-align: center; }
  .footer-badges  { justify-content: center; }
  .footer-desc    { font-size: .82rem; }
}

/* ── MODAIS ───────────────────────────────────────────────────── */
.modal-overlay { padding: 16px; align-items: flex-end; }
@media (min-width: 540px) { .modal-overlay { align-items: center; } }
.modal {
  border-radius: 20px 20px 0 0; padding: 28px 20px;
  max-height: 92vh; overflow-y: auto;
}
@media (min-width: 540px) { .modal { border-radius: 24px; padding: 36px 32px; } }

/* ── TOAST ────────────────────────────────────────────────────── */
.toast { bottom: 16px; right: 16px; left: 16px; max-width: none; font-size: .85rem; }
@media (min-width: 480px) { .toast { left: auto; max-width: 360px; } }

/* ── TÍTULOS E BADGES MOBILE ─────────────────────────────────── */
@media (max-width: 480px) {
  .titulo-secao    { font-size: clamp(1.4rem,6vw,2rem); margin-bottom: 10px; }
  .subtitulo-secao { font-size: .88rem; }
  .badge           { font-size: .7rem; padding: 4px 12px; }
  .btn-lg          { padding: 14px 24px; font-size: .92rem; }
  .btn-sm          { padding: 9px 16px;  font-size: .8rem; }
}

/* ── CATEGORIAS GRID (páginas internas) ──────────────────────── */
.categorias-grid { grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 10px; }

/* ── PERFIL PROFISSIONAL ─────────────────────────────────────── */
@media (max-width: 768px) {
  .perfil-galeria { grid-template-columns: repeat(2,1fr); }
  .perfil-info    { grid-template-columns: 1fr; text-align: center; }
  .perfil-nome    { font-size: 1.6rem; }
}

/* ── ADMIN ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-sidebar { display: none; }
  .admin-main    { margin-left: 0; padding: 80px 16px 32px; }
  .stats-grid-admin { grid-template-columns: repeat(2,1fr); }
}

/* ── HERO CLÁSSICO (outras páginas) ─────────────────────────── */
.hero-conteudo { grid-template-columns: 1fr; padding: 48px 0 40px; }
@media (min-width: 1025px) { .hero-conteudo { grid-template-columns: 1fr 1fr; } }
.hero-visual { display: none; }
@media (min-width: 1025px) { .hero-visual { display: block; } }
.busca-principal {
  flex-wrap: wrap; padding: 12px 16px; gap: 8px;
  border-radius: 16px !important; max-width: 100%;
}
.busca-principal input { min-width: 0; flex: 1 1 140px; }
.busca-principal .btn  { width: 100%; flex: 1 1 100%; }
@media (min-width: 600px) {
  .busca-principal { flex-wrap: nowrap; border-radius: 100px !important; }
  .busca-principal .btn { width: auto; flex: 0 0 auto; }
}
.hero-stats { flex-wrap: wrap; gap: 16px; }

/* ── COMPARTILHAMENTO ─────────────────────────────────────────── */
.share-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 100px; font-size: .82rem;
  font-weight: 600; cursor: pointer; border: none;
  transition: transform .2s, box-shadow .2s; font-family: inherit; text-decoration: none;
}
.share-btn:hover { transform: translateY(-2px); }
.share-btn.whatsapp { background: #25D366; color: white; }
.share-btn.facebook { background: #1877F2; color: white; }
.share-btn.twitter  { background: #000; color: white; }
.share-btn.telegram { background: #0088CC; color: white; }
.share-btn.copiar   { background: var(--cinza-medio); color: var(--cor-terciaria); }

/* ── CHAT IA ──────────────────────────────────────────────────── */
#btn-chat-ia { position: fixed; bottom: 24px; right: 24px; z-index: 9000; }
@media (max-width: 480px) {
  #btn-chat-ia { bottom: 16px; right: 16px; }
  #chat-ia-janela {
    right: 0 !important; left: 0 !important; width: 100% !important;
    border-radius: 20px 20px 0 0 !important; bottom: 0 !important;
  }
}