/* Boteco Mathias — estilos globais */
* { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: #050505; color: #fff; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; }
  body::before { content:""; position:fixed; inset:0; z-index:-2; background: radial-gradient(circle at 15% 10%, rgba(255,207,72,.12), transparent 30%), radial-gradient(circle at 85% 18%, rgba(255,115,0,.10), transparent 26%), linear-gradient(180deg,#060606 0%,#0d0d0d 45%,#050505 100%); }
  body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.36; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size:64px 64px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
  a { color: #ffcf48; text-decoration: none; }
  a:hover { color: #ffd94a; }
  img { display: block; max-width: 100%; }
  @keyframes marqueeL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes marqueeR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
  @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .85; } }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
  @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
  @media (max-width: 768px) {
    #m-topbar > div { padding: 8px 16px !important; }
    #m-topbar a { font-size: 12px !important; }
    #m-header { width: calc(100% - 16px) !important; }
    #m-header > div { flex-wrap: wrap !important; padding: 10px 14px !important; gap: 8px 10px !important; justify-content: space-between !important; }
    #m-header nav { order: 3 !important; width: 100% !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px 12px !important; }
    #m-header nav a { font-size: 11px !important; }
    #m-header img { height: 28px !important; }

    #m-marquee span { font-size: 16px !important; }
    #m-marquee > div { padding: 8px 0 !important; }
    #m-marquee > div > div { gap: 16px !important; }

    #casa { padding: 64px 18px !important; }
    #casa > div { grid-template-columns: 1fr !important; gap: 26px !important; }
    #m-casapair { width: 100% !important; height: auto !important; }
    #m-casapair img { width: 100% !important; height: auto !important; aspect-ratio: 1/1 !important; }
    #m-casafloat { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 1/1 !important; left: auto !important; top: auto !important; margin-top: 18px !important; }

    #m-videoband { height: auto !important; padding: 30px 14px !important; }
    #m-playband { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 1131/618 !important; left: auto !important; top: auto !important; margin: 0 auto !important; border-radius: 20px !important; }

    #m-oque { padding: 52px 18px !important; }
    #m-oque div[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

    #prog { padding: 56px 16px 60px !important; }
    #prog div[style*="33.3333%"] { flex: 0 0 50% !important; padding: 0 6px !important; }
    #prog div[style*="33.3333%"] > div { border-radius: 16px !important; }
    #prog [data-prog-dot="3"] { display: block !important; }

    #m-siga { height: auto !important; padding: 36px 18px 64px !important; }
    #m-siga > div { grid-template-columns: 1fr !important; gap: 22px !important; }
    #m-sigabg { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 1/1 !important; left: auto !important; top: auto !important; order: -1 !important; margin: 0 auto !important; }

    #drink { padding: 46px 16px !important; }
    #drink div[style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
    #drink img[style*="height: 230px"] { height: 168px !important; }
    #drink p { width: auto !important; height: auto !important; max-width: 100% !important; }

    #fotos { padding: 20px 18px 64px !important; }
    #fotos div[style*="gap: 40px"] { grid-template-columns: 1fr !important; gap: 26px !important; }

    #contato > div:first-child { grid-template-columns: 1fr !important; gap: 26px !important; }

    img[src*="oque-768"], img[src*="programacao-768"], img[src*="siga.png"], img[src*="drinks-768"], img[src*="voce-1024"], img[src*="evento-768"] { max-width: 88% !important; width: auto !important; height: auto !important; }

    #evento { padding: 64px 18px !important; }
    #evento a { padding: 14px 26px !important; }

    #contato { padding: 44px 18px 26px !important; }
    #contato > div:first-child { text-align: center !important; }
    #contato > div:first-child > div:first-child { display: flex !important; flex-direction: column !important; align-items: center !important; }
    #contato > div:first-child > div:first-child > img { margin: 0 auto 20px !important; }
    #contato > div:first-child > div:first-child > div { justify-content: center !important; }
    #contato p { justify-content: center !important; }
    #contato > div:last-child { flex-direction: column !important; gap: 8px !important; }

    header#m-header nav a { padding: 6px 2px !important; }

    div[role="dialog"][aria-label="Aviso de cookies"] > div { padding: 18px !important; gap: 16px !important; }
    div[role="dialog"][aria-label="Aviso de cookies"] button { flex: 1 1 auto !important; }

    div[style*="z-index:9999"] button[aria-label="Fechar vídeo"],
    div[style*="z-index:9999"] button[aria-label="Fechar imagem"] { top: 8px !important; right: 8px !important; background: rgba(5,5,5,.7) !important; color: #ffcf48 !important; }
  }

/* Estados de hover */
.hv-1:hover { color:#ffcf48 !important; transform:scale(1.12) !important; }
.hv-2:hover { color:#ffcf48 !important; transform:scale(1.12) !important; }
.hv-3:hover { color:#ffcf48 !important; transform:scale(1.12) !important; }
.hv-4:hover { color:#ffcf48 !important; transform:scale(1.12) !important; }
.hv-5:hover { color:#ffcf48 !important; transform:scale(1.12) !important; }
.hv-6:hover { color:#ffcf48 !important; transform:scale(1.12) !important; }
.hv-7:hover { transform:translateY(-4px) !important; background:#ffffff !important; color:#050505 !important; box-shadow:0 18px 44px rgba(255,207,72,.26) !important; }
.hv-8:hover { transform:translateY(-8px) !important; border-color:#ffcf48 !important; box-shadow:0 24px 70px rgba(0,0,0,.46), 0 0 0 2px #ffcf48, 0 0 26px rgba(255,207,72,.65) !important; }
.hv-9:hover { transform:translateY(-8px) !important; border-color:#ffcf48 !important; box-shadow:0 24px 70px rgba(0,0,0,.46), 0 0 0 2px #ffcf48, 0 0 26px rgba(255,207,72,.65) !important; }
.hv-10:hover { transform:translateY(-8px) !important; border-color:#ffcf48 !important; box-shadow:0 24px 70px rgba(0,0,0,.46), 0 0 0 2px #ffcf48, 0 0 26px rgba(255,207,72,.65) !important; }
.hv-11:hover { transform:translateY(-8px) !important; border-color:#ffcf48 !important; box-shadow:0 24px 70px rgba(0,0,0,.46), 0 0 0 2px #ffcf48, 0 0 26px rgba(255,207,72,.65) !important; }
.hv-12:hover { background:#1a1a1a !important; }
.hv-13:hover { background:#1a1a1a !important; }
.hv-14:hover { transform:translateY(-4px) !important; background:#ffffff !important; color:#050505 !important; box-shadow:0 18px 44px rgba(255,207,72,.26) !important; }
.hv-15:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-16:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-17:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-18:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-19:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-20:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-21:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-22:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-23:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-24:hover { transform:scale(1.05) !important; z-index:2 !important; box-shadow:0 18px 50px rgba(0,0,0,.5) !important; }
.hv-25:hover { transform:translateY(-4px) !important; background:#ffffff !important; color:#050505 !important; box-shadow:0 18px 44px rgba(255,207,72,.26) !important; }
.hv-26:hover { transform:translateY(-6px) !important; box-shadow:0 20px 50px rgba(0,0,0,.5) !important; }
.hv-27:hover { transform:translateY(-6px) !important; box-shadow:0 20px 50px rgba(0,0,0,.5) !important; }
.hv-28:hover { transform:translateY(-6px) !important; box-shadow:0 20px 50px rgba(0,0,0,.5) !important; }
.hv-29:hover { transform:translateY(-6px) !important; box-shadow:0 20px 50px rgba(0,0,0,.5) !important; }
.hv-30:hover { transform:translateY(-4px) !important; background:#ffffff !important; color:#050505 !important; box-shadow:0 18px 44px rgba(255,207,72,.26) !important; }
.hv-31:hover { transform:translateY(-4px) !important; background:#1a1a1a !important; box-shadow:0 18px 44px rgba(255,207,72,.26) !important; }
.hv-32:hover { transform:translateY(-3px) scale(1.04) !important; box-shadow:0 14px 32px rgba(5,5,5,.25) !important; }
.hv-33:hover { transform:translateY(-3px) scale(1.04) !important; box-shadow:0 14px 32px rgba(5,5,5,.25) !important; }
.hv-34:hover { transform:translateY(-3px) scale(1.04) !important; box-shadow:0 14px 32px rgba(5,5,5,.25) !important; }
.hv-35:hover { transform:translateY(-3px) scale(1.04) !important; box-shadow:0 14px 32px rgba(5,5,5,.25) !important; }
.hv-36:hover { transform:translateY(-3px) !important; background:#ffffff !important; border-color:#ffffff !important; box-shadow:0 18px 44px rgba(255,207,72,.26) !important; }
.hv-37:hover { transform:translateY(-3px) !important; background:#ffcf48 !important; color:#050505 !important; box-shadow:0 18px 44px rgba(255,207,72,.26) !important; }
.hv-38:hover { color:#ffcf48 !important; border-color:#ffcf48 !important; transform:translateY(-2px) !important; }
.hv-39:hover { color:#ffcf48 !important; border-color:#ffcf48 !important; }
.hv-40:hover { transform:translateY(-3px) !important; background:#ffffff !important; border-color:#ffffff !important; box-shadow:0 18px 44px rgba(255,207,72,.26) !important; }
.hv-41:hover { transform:translateY(-2px) !important; border-color:#ffcf48 !important; box-shadow:0 14px 34px rgba(255,207,72,.22) !important; }

/* Acessibilidade / SEO */
.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; }
.faq-item { border:1px solid rgba(255,255,255,.14); border-radius:18px; background:#111; margin-bottom:12px; overflow:hidden; }
.faq-item summary { cursor:pointer; list-style:none; padding:18px 22px; font-weight:700; font-size:16px; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; color:#ffcf48; font-size:24px; font-weight:400; flex:none; }
.faq-item[open] summary::after { content:"\2013"; }
.faq-item[open] summary { color:#ffcf48; }
.faq-item p { padding:0 22px 20px; color:#cfcfcf; font-size:15px; line-height:1.7; }
@media (max-width: 768px) { #faq { padding: 52px 18px !important; } .faq-item summary { font-size:15px; padding:16px 18px; } }

/* Ajustes mobile (somente até 768px) */
@media (max-width: 768px) {
  /* Frase do hero menor */
  section h1 { font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.12 !important; }
  section h1 + div { margin-top: 36px !important; }

  /* Títulos em imagem sem distorção e menores */
  img[src*="titulo-oque"], img[src*="titulo-programacao"], img[src*="titulo-siga"],
  img[src*="titulo-drinks"], img[src*="titulo-voce"], img[src*="titulo-evento"] {
    width: auto !important; height: auto !important; max-width: 66% !important; max-height: 110px !important;
    object-fit: contain !important; margin-left: auto !important; margin-right: auto !important;
  }
  #m-siga img[src*="titulo-siga"] { margin-bottom: 14px !important; }

  /* O que oferecemos: 2 cards por linha */
  #m-oque div[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  #m-oque div[style*="repeat(4,1fr)"] > div { border-radius: 18px !important; }
  #m-oque div[style*="repeat(4,1fr)"] > div > div { padding: 12px 12px 16px !important; }
  #m-oque div[style*="repeat(4,1fr)"] h3 { font-size: 14px !important; }
  #m-oque div[style*="repeat(4,1fr)"] p { font-size: 12px !important; line-height: 1.5 !important; }

  /* Drinks: 2 fotos por linha */
  #drink div[style*="repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  #drink img[style*="height:230px"] { height: 190px !important; }

  /* Você no Mathias: uma coluna, fotos maiores, botão ajustado */
  #fotos div[style*="gap:40px"] { grid-template-columns: 1fr !important; gap: 26px !important; text-align: center !important; }
  #fotos div[style*="gap:40px"] h3 { font-size: 26px !important; }
  #fotos div[style*="gap:40px"] > div:last-child { gap: 10px !important; }
  #fotos div[style*="gap:40px"] > div:last-child img { border-radius: 14px !important; width: 100% !important; aspect-ratio: 1/1; object-fit: cover; }
  #fotos a[href*="facebook"] { display: flex !important; width: 100% !important; max-width: 320px !important; margin: 0 auto !important; justify-content: center !important; text-align: center !important; padding: 14px 18px !important; font-size: 12px !important; line-height: 1.3 !important; }
  #fotos a[href*="facebook"] img { width: 17px !important; height: 17px !important; flex: none !important; }
}