/* ══════════════════════════════════════════════════════════════════
   Mateus & Belini — estilos do site
   HTML/CSS/JS puros. Sem build, sem framework.
   ══════════════════════════════════════════════════════════════════ */

/* Cor de destaque do site inteiro — troque aqui e muda em todo lugar. */
:root { --ac: #E8892B; }

  html { scroll-behavior: smooth; }
  body { margin: 0; background: #1C0507; color: #F4E7DE; font-family: Montserrat, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  * { box-sizing: border-box; }
  a { color: var(--ac, #E8892B); text-decoration: none; }
  a:hover { color: #F7C078; }
  img { display: block; max-width: 100%; }
  ::selection { background: var(--ac, #E8892B); color: #1C0507; }
  @keyframes mb-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @keyframes mb-rise { from { opacity: 0; transform: translate3d(0,26px,0); } to { opacity: 1; transform: none; } }
  @keyframes mb-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
  @keyframes mb-pulse { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.035); } }
  @media (max-width: 1039px) { .mb-desk { display: none !important; } }
  @media (min-width: 1040px) { .mb-mob { display: none !important; } }
  @media (max-width: 980px) {
    .mb-disc { grid-template-columns: 1fr !important; }
    .mb-disc-player { position: static !important; order: -1; }
  }
  @media (max-width: 1039px) {
    .mb-herogrid { grid-template-columns: 1fr !important; }
    .mb-heroimg { left: 0 !important; opacity: .3; }
    .mb-heroveil { background: linear-gradient(to bottom, rgba(28,5,7,.58) 0%, rgba(28,5,7,.8) 100%) !important; }
  }
  @media (max-width: 720px) {
    .mb-gal { grid-template-columns: repeat(2, 1fr) !important; }
    .mb-gal > * { grid-column: span 1 !important; aspect-ratio: 1 !important; }
    .mb-gal > *:first-child, .mb-gal > *:last-child { grid-column: span 2 !important; aspect-ratio: 16/10 !important; }
    .mb-show { grid-template-columns: 1fr !important; gap: 14px !important; }
    .mb-show > *:last-child { justify-self: start; }
  }
  @media (max-width: 760px) {
    .mb-foot { justify-content: center !important; text-align: center; }
    .mb-foot > nav { flex-wrap: wrap !important; }
    .mb-foot > div:last-child { text-align: center !important; width: 100%; }
  }
  @media (max-width: 460px) {
    .mb-gal { grid-template-columns: 1fr !important; }
    .mb-gal > * { grid-column: span 1 !important; aspect-ratio: 4/3 !important; }
  }

/* ── estados :hover ────────────────────────────────────────────────
   Usam !important porque os elementos tem style inline, que sem isso
   ganharia da classe. */
  .hv-zoom:hover { transform: scale(1.04) !important; }
  .hv-ac:hover { color: var(--ac, #E8892B) !important; }
  .hv-nav:hover { color: var(--ac, #E8892B) !important; border-bottom-color: var(--ac, #E8892B) !important; }
  .hv-row:hover { background: rgba(232,137,43,.05) !important; }
  .hv-social:hover { background: rgba(232,137,43,.2) !important; border-color: var(--ac, #E8892B) !important; }
  .hv-btn:hover { background: #F7C078 !important; }
  .hv-card:hover { border-color: var(--ac, #E8892B) !important; transform: translateY(-4px) !important; }
  .hv-proj:hover { transform: translateY(-6px) !important; border-color: rgba(232,137,43,.6) !important; }
  .hv-bright:hover { filter: brightness(1.06) !important; }
  .hv-ghost-warm:hover { background: rgba(247,237,230,.12) !important; color: #F7EDE6 !important; }
  .hv-ghost-14:hover { background: rgba(244,231,222,.14) !important; border-color: #F4E7DE !important; color: #F4E7DE !important; }
  .hv-ghost-12:hover { background: rgba(244,231,222,.12) !important; border-color: #F4E7DE !important; color: #F4E7DE !important; }
  .hv-btn-up:hover { background: #F7C078 !important; transform: translateY(-2px) !important; }
  .hv-btn-dark:hover { background: #F7C078 !important; color: #1C0507 !important; }

/* ── menu mobile ───────────────────────────────────────────────────
   Precisa de !important porque o elemento tem display:grid inline. */
  #mb-menu[hidden] { display: none !important; }