/* Mui Heróica · Cervejas Especiais — cervejaria de verdade: cobre, inox, âmbar e colarinho. */
:root {
  --preto: #0b0907;
  --carvao: #15100b;
  --madeira: #22170d;
  --ouro: #d9a441;
  --ouro-claro: #f0c76e;
  --cobre: #c06a32;
  --cobre-claro: #e8955a;
  --inox: #c9ced3;
  --creme: #f3e6c8;
  --espuma: #fbf3e0;
  --chope-1: #f6cf5f;
  --chope-2: #e3a227;
  --chope-3: #a8600e;
  --bloco-roxo: #3d17b5;
  --bloco-amarelo: #ffc400;
  --f-titulo: "Fraunces", Georgia, serif;
  --f-rotulo: "Archivo", system-ui, sans-serif;
  --f-corpo: "Archivo", system-ui, sans-serif;
  --calha: clamp(16px, 4.5vw, 64px);
  --pula: cubic-bezier(.34, 1.56, .64, 1);
  --suave: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
html.travado, html.travado body { overflow: hidden; }
body {
  margin: 0; background: var(--preto); color: var(--creme);
  font: 17px/1.6 var(--f-corpo); overflow-x: clip; -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, header, footer { position: relative; z-index: 1; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 4px; border-radius: 6px; }

/* ---------- tipografia ---------- */
.mh-rotulo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 800 12px/1.2 var(--f-rotulo); font-stretch: 125%; letter-spacing: .3em; text-transform: uppercase; color: var(--ouro); }
.mh-rotulo::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.mh-rotulo svg { width: 14px; height: 28px; flex: none; }
.mh-titulo { font: 900 clamp(3rem, 12.5vw, 8.6rem)/.9 var(--f-titulo); font-variation-settings: "opsz" 144; letter-spacing: -.03em; }
.mh-titulo .linha { display: block; }
.mh-titulo em { font-style: italic; font-weight: 700; color: var(--ouro); font-size: .5em; letter-spacing: -.01em; margin-top: .3em; }
.mh-liquido {
  color: transparent; -webkit-text-stroke: 2px var(--ouro);
  background: linear-gradient(to top, var(--chope-3) 0%, var(--chope-2) 22%, var(--chope-1) 40%, var(--espuma) 40.5%, var(--espuma) 47%, transparent 47.5%);
  background-size: 100% 200%; background-repeat: no-repeat; background-position: 0 100%;
  -webkit-background-clip: text; background-clip: text;
}
.mh-titulo2 { font: 900 clamp(2.6rem, 10vw, 6rem)/.92 var(--f-titulo); font-variation-settings: "opsz" 144; letter-spacing: -.025em; margin-bottom: 20px; }
.mh-titulo2 em { font-style: italic; font-weight: 700; color: var(--ouro); }
.mh-lead { max-width: 46ch; font-size: clamp(16px, 4.2vw, 19px); color: rgba(243, 230, 200, .84); }

/* ---------- botões ---------- */
.mh-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 26px; border-radius: 999px; border: 0;
  font: 800 13px/1 var(--f-corpo); font-stretch: 115%; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: transform .45s var(--pula), background .3s, color .3s, box-shadow .3s;
}
.mh-botao svg { width: 22px; height: 22px; flex: none; }
.mh-botao:hover { transform: translateY(-3px); }
.mh-botao:active { transform: scale(.96); }
.mh-botao--ouro { background: linear-gradient(180deg, var(--ouro-claro), var(--ouro) 60%, #b98329); color: #1a1208; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 0 #6f4a12, 0 14px 30px rgba(217, 164, 65, .25); }
.mh-botao--linha { background: rgba(243, 230, 200, .04); color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(243, 230, 200, .45); }
.mh-botao--linha:hover { box-shadow: inset 0 0 0 1.5px var(--ouro); color: var(--ouro-claro); }
.mh-botao--bloco { background: var(--bloco-roxo); color: #fff; box-shadow: 0 6px 0 #1a0330, inset 0 0 0 2px var(--bloco-amarelo); padding-left: 12px; }
.mh-botao--bloco img { height: 34px; width: auto; }

/* ==========================================================
   ABERTURA: a torneira serve o chope
   ========================================================== */
.mh-abre {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 20px; text-align: center;
  background: radial-gradient(80% 60% at 50% 42%, #2b1d0e 0%, #120d07 55%, #050403 100%);
}
.mh-abre.saiu { display: none; }
.mh-abre__luz { position: absolute; left: 50%; top: 40%; width: 80vmin; height: 80vmin; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(246, 207, 95, .2), transparent 62%); pointer-events: none; }
.mh-abre__cena { position: relative; width: min(64vw, 280px); }
.mh-torneira { position: relative; z-index: 2; width: 62%; margin: 0 auto; overflow: visible; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.mh-torneira__alavanca { transform-origin: 110px 40px; transform-box: view-box; }
.mh-fio { position: absolute; z-index: 1; left: 50%; width: 7px; margin-left: -3.5px; border-radius: 4px; background: linear-gradient(90deg, var(--chope-3), var(--chope-1) 45%, #fff3c4 55%, var(--chope-2)); opacity: 0; transform-origin: top; }
.mh-caneca { position: relative; width: 78%; margin: -4px 0 0 16%; }
.mh-caneca img { width: 100%; }
.mh-caneca__vazia { filter: brightness(0) invert(1); opacity: .09; }
.mh-caneca__cheia { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); filter: drop-shadow(0 0 30px rgba(246, 207, 95, .3)); }
.mh-caneca__respingo { position: absolute; left: 41%; width: 22%; height: 10px; margin-left: -11%; border-radius: 50%; background: radial-gradient(closest-side, rgba(251, 243, 224, .95), rgba(251, 243, 224, 0)); opacity: 0; }
.mh-abre__logo { position: relative; width: min(56vw, 260px); }
.mh-abre__status { position: relative; margin: 0; font: 800 12px/1.2 var(--f-rotulo); font-stretch: 120%; letter-spacing: .26em; text-transform: uppercase; color: rgba(243, 230, 200, .7); }
.mh-abre__status b { color: var(--ouro-claro); font-variant-numeric: tabular-nums; }
.mh-abre__idade, .mh-abre__menor { position: relative; display: grid; gap: 14px; justify-items: center; }
.mh-abre__idade p, .mh-abre__menor p { margin: 0; font-size: 17px; max-width: 32ch; }
.mh-abre__idade b { color: var(--ouro-claro); }
.mh-abre__botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mh-mergulho { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, var(--chope-1) 0%, var(--chope-2) 45%, var(--chope-3) 100%); }

/* ==========================================================
   TOPO
   ========================================================== */
.mh-topo { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 74px; padding: 0 var(--calha); padding-top: env(safe-area-inset-top); transition: background .35s, transform .45s var(--suave); }
.mh-topo.rolou { background: rgba(11, 9, 7, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(217, 164, 65, .2); }
.mh-topo.esconde { transform: translateY(-110%); }
.mh-topo__logo img { height: 46px; width: auto; }
.mh-topo__nav { display: none; }
.mh-ir-bloco { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--bloco-roxo); color: #fff; text-decoration: none; box-shadow: inset 0 0 0 2px var(--bloco-amarelo); font: 800 12px/1 var(--f-corpo); letter-spacing: .08em; text-transform: uppercase; transition: transform .4s var(--pula); }
.mh-ir-bloco img { height: 34px; width: auto; }
.mh-ir-bloco:hover { transform: rotate(-3deg) scale(1.05); }
@media (max-width: 400px) { .mh-ir-bloco span { display: none; } .mh-ir-bloco { padding: 0 8px; } }
@media (min-width: 900px) {
  .mh-topo__nav { display: flex; gap: 4px; }
  .mh-topo__nav a { padding: 10px 14px; border-radius: 999px; text-decoration: none; font: 800 11px/1 var(--f-rotulo); font-stretch: 120%; letter-spacing: .22em; text-transform: uppercase; transition: color .3s, background .3s; }
  .mh-topo__nav a:hover { color: var(--preto); background: var(--ouro); }
}

/* ==========================================================
   INÍCIO
   ========================================================== */
.mh-hero { position: relative; min-height: 100svh; display: grid; align-items: center; gap: 20px; padding: 110px var(--calha) 70px; overflow: hidden; isolation: isolate; }
.mh-hero__foto { position: absolute; inset: 0; z-index: -2; }
.mh-hero__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.42) sepia(.25); transform-origin: 70% 50%; }
.mh-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 9, 7, .96) 0%, rgba(11, 9, 7, .7) 45%, rgba(11, 9, 7, .2) 100%), linear-gradient(0deg, var(--preto), transparent 30%); }
.mh-bolhas-fundo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.mh-hero__texto { position: relative; z-index: 2; max-width: 780px; }
.mh-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.mh-hero__caneca { position: relative; z-index: 1; width: min(56vw, 290px); margin: 10px auto 0; }
.mh-hero__caneca::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -6%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(246, 207, 95, .35), transparent); filter: blur(6px); }
.mh-hero__caneca img { position: relative; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)); }
.mh-desce { position: absolute; left: 50%; bottom: 22px; z-index: 2; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 2px solid rgba(243, 230, 200, .5); }
.mh-desce span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ouro); animation: desce 1.6s infinite; }
@keyframes desce { 60% { transform: translateY(12px); opacity: 0; } }
@media (min-width: 960px) {
  .mh-hero { grid-template-columns: 1.3fr .7fr; }
  .mh-hero__caneca { width: min(26vw, 380px); margin: 0; justify-self: center; }
}

/* faixa */
.mh-faixa { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(180deg, #8a4a1f, var(--cobre) 40%, #7a3c16); color: var(--espuma); transform: rotate(-1.6deg); margin: 0 -4vw; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 220, 170, .4); }
.mh-faixa__trilho { display: flex; gap: 26px; width: max-content; padding: 14px 0 12px; align-items: center; white-space: nowrap; }
.mh-faixa__trilho span { font: 900 italic clamp(1.3rem, 4.4vw, 2rem)/1 var(--f-titulo); }
.mh-faixa__trilho i { font-style: normal; color: var(--ouro-claro); }

/* ==========================================================
   PRODUÇÃO: do grão ao copo (fica preso e as etapas passam)
   ========================================================== */
.mh-proc { position: relative; }
.mh-proc__palco { position: relative; height: 100svh; min-height: 620px; padding: 92px var(--calha) 26px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; overflow: hidden;
  background: radial-gradient(60% 50% at 30% 60%, rgba(192, 106, 50, .16), transparent 70%), radial-gradient(50% 40% at 80% 30%, rgba(246, 207, 95, .08), transparent 70%); }
.mh-proc__cabeca .mh-titulo2 { font-size: clamp(2.2rem, 8vw, 4.4rem); margin: 0; }
.mh-cano { position: relative; padding-top: 6px; }
.mh-cano__tubo { position: relative; height: 14px; border-radius: 10px; background: linear-gradient(180deg, #f2b07e, var(--cobre) 45%, #6b3312); box-shadow: inset 0 2px 3px rgba(255, 230, 200, .5), 0 4px 10px rgba(0, 0, 0, .5); overflow: hidden; }
.mh-cano__chope { position: absolute; left: 0; top: 3px; bottom: 3px; width: 100%; border-radius: 6px; transform-origin: left; transform: scaleX(0);
  background: repeating-linear-gradient(90deg, var(--chope-1) 0 14px, var(--chope-2) 14px 22px); background-size: 44px 100%; animation: corre 1s linear infinite; }
@keyframes corre { to { background-position: 44px 0; } }
.mh-cano__nos { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: space-between; }
.mh-cano__nos li { position: relative; font: 800 10px/1.2 var(--f-rotulo); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 230, 200, .45); transition: color .4s; text-align: center; width: 20%; }
.mh-cano__nos li::before { content: ""; position: absolute; left: 50%; top: -24px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #2a1d0f; border: 2px solid var(--cobre-claro); transition: background .4s, transform .4s var(--pula); }
.mh-cano__nos li:first-child { text-align: left; } .mh-cano__nos li:first-child::before { left: 9px; }
.mh-cano__nos li:last-child { text-align: right; } .mh-cano__nos li:last-child::before { left: auto; right: 0; margin: 0; }
.mh-cano__nos li.ativo { color: var(--ouro-claro); }
@media (max-width: 699px) { .mh-cano__nos li { color: transparent; font-size: 0; } .mh-cano__nos li.atual { color: var(--ouro-claro); font-size: 10px; } }
.mh-cano__nos li.ativo::before { background: var(--chope-1); transform: scale(1.25); box-shadow: 0 0 14px var(--chope-1); }
.mh-etapas { position: relative; min-height: 0; margin-top: 8px; }
.mh-etapa { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; opacity: 0; visibility: hidden; }
.mh-etapa:first-child { opacity: 1; visibility: visible; }
.mh-etapa__arte { position: relative; min-height: 0; height: 100%; display: grid; place-items: center; overflow: visible; }
.mh-etapa__arte > img { max-height: 100% !important; }
.mh-etapa__arte > img { position: relative; z-index: 1; max-height: 100%; width: auto; max-width: 92%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)); }
.mh-etapa__texto { position: relative; z-index: 3; padding: 12px 0 4px 18px; border-left: 2px solid var(--cobre); background: linear-gradient(90deg, rgba(11, 9, 7, .9), rgba(11, 9, 7, .55)); }
@media (max-width: 899px) { .mh-etapa { grid-template-rows: minmax(0, 1fr) auto; } .mh-etapa__arte { padding-bottom: 6px; } }
.mh-etapa__num { display: block; font: 900 italic 1.1rem/1 var(--f-titulo); color: var(--cobre-claro); margin-bottom: 4px; }
.mh-etapa__texto h3 { font: 900 clamp(2rem, 8vw, 3.6rem)/1 var(--f-titulo); margin-bottom: 8px; }
.mh-etapa__texto p { max-width: 40ch; color: rgba(243, 230, 200, .82); margin: 0; font-size: clamp(15px, 3.9vw, 18px); }
@media (min-width: 900px) {
  .mh-proc__palco { padding-top: 100px; }
  .mh-etapa { grid-template-columns: 1.1fr .9fr; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 40px; padding-top: 10px; }
  .mh-etapa__texto { padding-left: 28px; }
  .mh-cano__nos li { font-size: 11px; }
}
/* efeitos de cada etapa */
.mh-graos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mh-graos i { position: absolute; top: -6%; width: 9px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbe3a0, #d9a441 55%, #8a5d16); }
.mh-vapor { position: absolute; left: 30%; top: 0; width: 40%; height: 40%; z-index: 2; pointer-events: none; }
.mh-vapor i { position: absolute; bottom: 0; left: 50%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); filter: blur(6px); opacity: 0; animation: vapor 3.4s infinite ease-out; }
.mh-vapor i:nth-child(2) { animation-delay: .7s; margin-left: -30px; } .mh-vapor i:nth-child(3) { animation-delay: 1.4s; margin-left: 20px; } .mh-vapor i:nth-child(4) { animation-delay: 2.1s; margin-left: -10px; } .mh-vapor i:nth-child(5) { animation-delay: 2.8s; margin-left: 30px; }
@keyframes vapor { 0% { transform: translate(-50%, 40%) scale(.5); opacity: 0; } 25% { opacity: .9; } 100% { transform: translate(-30%, -260%) scale(2.4); opacity: 0; } }
.mh-fogo { position: absolute; left: 25%; right: 25%; bottom: 0; height: 30px; z-index: 0; }
.mh-fogo i { position: absolute; bottom: 0; width: 34%; height: 100%; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 170, 60, .8), rgba(255, 90, 20, .3) 50%, transparent 70%); filter: blur(4px); animation: fogo .5s infinite alternate; }
.mh-fogo i:nth-child(1) { left: 0; } .mh-fogo i:nth-child(2) { left: 33%; animation-delay: .2s; } .mh-fogo i:nth-child(3) { left: 66%; animation-delay: .35s; }
@keyframes fogo { to { transform: scaleY(1.35) translateY(-3px); opacity: .7; } }
.mh-bolhas-tanque { position: absolute; z-index: 2; left: 44%; width: 12%; top: 26%; height: 34%; overflow: hidden; border-radius: 20px; pointer-events: none; }
.mh-bolhas-tanque i { position: absolute; bottom: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, rgba(255, 240, 200, .5)); }
.mh-etapa--matura .mh-etapa__arte > img { filter: saturate(.5) brightness(1.1) hue-rotate(160deg) drop-shadow(0 0 40px rgba(140, 200, 255, .35)); }
.mh-geada { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(40% 50% at 50% 50%, rgba(170, 220, 255, .14), transparent 70%); }
.mh-flocos { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: rgba(200, 235, 255, .8); }
.mh-flocos svg { position: absolute; width: 26px; height: 26px; }
.mh-gotas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mh-gotas i { position: absolute; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, var(--chope-1), var(--chope-2)); }

/* ==========================================================
   A PILSEN
   ========================================================== */
.mh-pilsen { position: relative; display: grid; gap: 40px; align-items: center; padding: 110px var(--calha) 90px; max-width: 1240px; margin: 0 auto; }
.mh-pilsen__copo { position: relative; width: min(62vw, 330px); margin: 0 auto; }
.mh-pilsen__copo img { width: 100%; }
.mh-pilsen__vazia { filter: brightness(0) invert(1); opacity: .08; }
.mh-pilsen__cheia { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); filter: drop-shadow(0 0 40px rgba(246, 207, 95, .25)); }
.mh-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 26px 0; background: rgba(217, 164, 65, .25); border: 1px solid rgba(217, 164, 65, .25); }
.mh-ficha div { padding: 14px 16px; background: var(--preto); }
.mh-ficha dt { font: 800 10px/1 var(--f-rotulo); font-stretch: 120%; letter-spacing: .24em; text-transform: uppercase; color: var(--ouro); margin-bottom: 6px; }
.mh-ficha dd { margin: 0; font: 700 1.15rem/1.2 var(--f-titulo); }
.mh-assina { font: 700 italic 1.2rem/1 var(--f-titulo); color: var(--ouro); }
@media (min-width: 900px) { .mh-pilsen { grid-template-columns: .9fr 1.1fr; } }

/* ==========================================================
   A CASA (arcos de bar antigo)
   ========================================================== */
.mh-casa { padding: 90px var(--calha); background: linear-gradient(180deg, var(--preto), var(--madeira) 50%, var(--preto)); }
.mh-casa__cabeca { max-width: 1240px; margin: 0 auto 50px; }
.mh-arcos { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: end; }
.mh-arco { margin: 0; position: relative; border-radius: 999px 999px 18px 18px; overflow: hidden; aspect-ratio: 3 / 4.4; box-shadow: 0 0 0 3px var(--ouro), 0 0 0 9px var(--preto), 0 0 0 10px rgba(217, 164, 65, .5), 0 30px 50px rgba(0, 0, 0, .5); }
.mh-arco img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.mh-arco:hover img { transform: scale(1.06); }
.mh-arco--2, .mh-arco--4 { margin-top: 40px; }
@media (min-width: 900px) { .mh-arcos { grid-template-columns: repeat(4, 1fr); gap: 24px; } .mh-arco--2 { margin-top: 0; transform: translateY(40px); } .mh-arco--4 { margin-top: 0; transform: translateY(40px); } }

/* ==========================================================
   TENDA / EVENTOS
   ========================================================== */
.mh-tenda { padding: 110px var(--calha) 90px; max-width: 1240px; margin: 0 auto; display: grid; gap: 50px; align-items: center; }
.mh-tenda__fotos { position: relative; height: clamp(420px, 110vw, 560px); }
.mh-polaroid { position: absolute; margin: 0; padding: 10px 10px 44px; background: var(--creme); box-shadow: 0 30px 50px rgba(0, 0, 0, .55); }
.mh-polaroid img { width: 100%; height: 100%; object-fit: cover; }
.mh-polaroid figcaption { position: absolute; left: 14px; bottom: 10px; font: 700 italic 1.15rem/1 var(--f-titulo); color: var(--madeira); }
.mh-polaroid--1 { left: 0; top: 0; width: 64%; height: 76%; transform: rotate(-5deg); }
.mh-polaroid--2 { right: 0; bottom: 0; width: 56%; height: 62%; transform: rotate(6deg); }
@media (min-width: 900px) { .mh-tenda { grid-template-columns: 1fr 1fr; } }

/* ==========================================================
   JUNTOS COM O BLOCO
   ========================================================== */
.mh-juntos {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 40px var(--calha) 90px; padding: clamp(36px, 7vw, 70px) clamp(22px, 6vw, 70px);
  border-radius: 34px; display: grid; gap: 30px; align-items: center;
  background: linear-gradient(120deg, #1a0330 0%, #3d17b5 48%, #2a1d0c 52%, #120d07 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 196, 0, .35);
}
.mh-juntos__logos { display: flex; align-items: center; gap: 14px; }
.mh-juntos__logos img { height: clamp(70px, 16vw, 120px); width: auto; }
.mh-juntos__logos span { font: 900 2.6rem/1 var(--f-titulo); color: var(--bloco-amarelo); }
.mh-juntos__copo { position: absolute; z-index: -1; right: -8%; bottom: -14%; width: clamp(110px, 24vw, 210px); transform: rotate(14deg); opacity: .5; }
@media (min-width: 900px) { .mh-juntos__copo { right: 3%; bottom: -16%; opacity: .95; } }
.mh-juntos .mh-titulo2 { font-size: clamp(2.4rem, 8vw, 4.2rem); }
.mh-juntos .mh-titulo2 em { color: var(--bloco-amarelo); }
@media (min-width: 900px) { .mh-juntos { grid-template-columns: .8fr 1.2fr; max-width: 1240px; margin-inline: auto; } .mh-juntos__texto { padding-right: 24%; } }

/* ==========================================================
   RODAPÉ E FLUTUANTES
   ========================================================== */
.mh-rodape { padding: 50px var(--calha) calc(100px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(217, 164, 65, .25); display: grid; gap: 26px; max-width: 1240px; margin: 0 auto; }
.mh-rodape__logo { width: 220px; }
.mh-rodape__info p { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.mh-rodape__info svg { width: 18px; height: 18px; flex: none; color: var(--ouro); }
.mh-rodape__links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mh-rodape__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(243, 230, 200, .07); text-decoration: none; font-weight: 700; font-size: 15px; transition: background .3s, color .3s; }
.mh-rodape__links a:hover { background: var(--ouro); color: var(--preto); }
.mh-rodape__links img { height: 26px; width: auto; }
.mh-rodape__aviso { font-size: 13px !important; opacity: .65; }
.mh-rodape__vz img { display: inline-block; height: 28px; width: auto; vertical-align: middle; }
@media (min-width: 900px) { .mh-rodape { grid-template-columns: auto 1fr; align-items: center; } }
.mh-zap { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, .35); transition: transform .4s var(--pula); }
.mh-zap:hover { transform: scale(1.08) rotate(-8deg); }
.mh-zap svg { width: 32px; height: 32px; }

/* bolinha que segue o mouse (o cursor normal continua) */
.mh-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mh-cursor { display: block; position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; }
  .mh-cursor span { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ouro-claro); opacity: .8; box-shadow: 0 0 0 3px rgba(255, 250, 240, .35); transition: width .3s var(--pula), height .3s var(--pula), left .3s var(--pula), top .3s var(--pula), opacity .3s; }
  .mh-cursor.sobre span { width: 44px; height: 44px; left: -22px; top: -22px; opacity: .3; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }