/* Cowboy Leader · site estático. Paleta tirada da logo: madeira, corda, ouro do chope. */
:root {
  --noite: #120a05;
  --noite2: #1c1009;
  --madeira: #2b170b;
  --madeira2: #3a2010;
  --cobre: #b8652c;
  --cobre2: #d9853f;
  --ouro: #f4b81c;
  --ouro2: #ffd45c;
  --creme: #f7e9d2;
  --espuma: #fffaf0;
  --texto: #eadbc4;
  --suave: #b9a68b;
  --verde: #25d366;
  --verde2: #1ebe5b;
  --raio: 18px;
  --sombra: 0 18px 50px rgba(0, 0, 0, .45);
  --fonte: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --faroeste: 'Rye', Georgia, serif;
  --rotulo: 'Bebas Neue', Impact, sans-serif;
  --mao: 'Caveat', cursive;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fonte); font-size: 17px; line-height: 1.6; color: var(--texto);
  background: var(--noite);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(184, 101, 44, .16), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 7px);
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ouro2); }
h1, h2, h3 { line-height: 1.12; color: var(--espuma); margin: 0 0 .5em; }
h2 { font-family: var(--faroeste); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3.2rem); letter-spacing: .5px; }
h2 em { font-style: normal; color: var(--ouro); display: inline; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }
.caixa { width: min(1200px, 100% - 32px); margin-inline: auto; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--ouro); color: #000; padding: 8px 14px; z-index: 999; border-radius: 8px; }
.pular:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--ouro2); outline-offset: 3px; }
.centro { text-align: center; }
.sobre { font-family: var(--rotulo); letter-spacing: 3px; font-size: 1.15rem; color: var(--cobre2); margin: 0 0 .4em; text-transform: uppercase; }
.sobre::before { content: '★ '; color: var(--ouro); }
.secao { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.titulo-secao { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); }
.titulo-secao p:last-child { color: var(--suave); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px;
  padding: 12px 22px; font-weight: 800; font-size: .98rem; text-decoration: none; letter-spacing: .2px;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s; white-space: nowrap;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-g { padding: 15px 26px; font-size: 1.04rem; }
.btn-wa { background: var(--verde); color: #04210f; box-shadow: 0 10px 30px rgba(37, 211, 102, .3); }
.btn-wa:hover { background: var(--verde2); box-shadow: 0 14px 34px rgba(37, 211, 102, .45); }
.btn-ouro { background: linear-gradient(180deg, var(--ouro2), var(--ouro)); color: #2a1600; box-shadow: 0 10px 30px rgba(244, 184, 28, .28); }
.btn-linha { background: rgba(255, 255, 255, .06); color: var(--espuma); box-shadow: inset 0 0 0 2px rgba(247, 233, 210, .35); backdrop-filter: blur(6px); }
.btn-linha:hover { box-shadow: inset 0 0 0 2px var(--ouro); color: var(--ouro2); }
.btn-insta { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff; }
.btn-mini { padding: 9px 16px; font-size: .9rem; background: rgba(0, 0, 0, .35); color: var(--espuma); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.btn-mini:hover { background: var(--verde); color: #04210f; box-shadow: none; }
.btn-mini svg { width: 17px; height: 17px; }
.btn-cheio { width: 100%; }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, box-shadow .3s, padding .3s; padding: 14px 0; }
.topo.rolou { background: rgba(18, 10, 5, .9); backdrop-filter: blur(12px); box-shadow: 0 6px 30px rgba(0, 0, 0, .4); padding: 6px 0; }
.interna .topo { background: rgba(18, 10, 5, .95); }
.topo-in { width: min(1240px, 100% - 24px); margin-inline: auto; display: flex; align-items: center; gap: 18px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--espuma); margin-right: auto; }
.marca img { width: 58px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); transition: width .3s; }
.topo.rolou .marca img { width: 46px; }
.marca span { font-family: var(--faroeste); font-size: 1.15rem; line-height: 1; display: flex; flex-direction: column; }
.marca b { font-weight: 400; color: var(--ouro); font-size: .78rem; letter-spacing: 3px; }
.menu { display: flex; gap: 4px; }
.menu a { color: var(--creme); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 999px; transition: background .2s, color .2s; }
.menu a:hover { background: rgba(244, 184, 28, .12); color: var(--ouro2); }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; flex-direction: column; justify-content: center; gap: 5px; }
.menu-btn i { display: block; height: 2.5px; background: var(--espuma); border-radius: 2px; transition: transform .3s, opacity .3s; }
.menu-aberto .menu-btn i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-aberto .menu-btn i:nth-child(2) { opacity: 0; }
.menu-aberto .menu-btn i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 90px; isolation: isolate; overflow: hidden; }
.hero-fundo { position: absolute; inset: 0; z-index: -1; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-veu { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(18, 10, 5, .94) 0%, rgba(18, 10, 5, .72) 45%, rgba(18, 10, 5, .35) 100%),
  linear-gradient(0deg, var(--noite) 0%, transparent 30%); }
.bolhas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-in { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
.selo-topo { display: inline-flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(244, 184, 28, .35); padding: 7px 14px 7px 12px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--creme); backdrop-filter: blur(6px); }
.ponto-vivo { width: 10px; height: 10px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 0 rgba(244, 184, 28, .6); animation: pulsa 2s infinite; flex: none; }
.ponto-vivo.aberto { background: var(--verde); box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); }
.ponto-vivo.fechado { background: #e0614a; animation: none; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }
.hero h1 { margin: 22px 0 18px; display: flex; flex-direction: column; }
.h1-peq { font-family: var(--rotulo); font-weight: 400; letter-spacing: 2px; font-size: clamp(1.6rem, 3.4vw, 2.5rem); color: var(--creme); }
.h1-nome { font-family: var(--mao); font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--ouro); transform: rotate(-3deg); width: max-content; margin: -4px 0 -8px 4px; }
.h1-marca { font-family: var(--faroeste); font-weight: 400; font-size: clamp(3rem, 8.4vw, 6.4rem); line-height: .98;
  background: linear-gradient(180deg, #fff6df 0%, #ffd45c 55%, #d9853f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .55)); }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 600px; color: var(--creme); }
.hero-sub b { color: var(--ouro2); }
.hero-bts { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.hero-numeros { list-style: none; padding: 0; margin: 38px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-numeros li { background: rgba(43, 23, 11, .75); border: 1px solid rgba(184, 101, 44, .5); border-radius: 14px; padding: 10px 16px; display: flex; flex-direction: column; min-width: 104px; backdrop-filter: blur(6px); }
.hero-numeros b { font-family: var(--rotulo); font-weight: 400; font-size: 1.6rem; color: var(--ouro); line-height: 1; letter-spacing: 1px; }
.hero-numeros span { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--suave); }
.hero-cartao { position: relative; justify-self: center; width: min(330px, 100%); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden;
  box-shadow: 0 0 0 6px rgba(184, 101, 44, .55), 0 0 0 12px rgba(43, 23, 11, .8), var(--sombra); transform: rotate(3deg); animation: flutua 6s ease-in-out infinite; }
.cartao-video { width: 100%; height: 100%; object-fit: cover; }
.cartao-logo { position: absolute; top: 14px; left: 14px; width: 74px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); }
.cartao-legenda { position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0; background: rgba(0, 0, 0, .6); padding: 10px 14px; border-radius: 14px; font-family: var(--mao); font-size: 1.5rem; color: var(--espuma); line-height: 1.1; backdrop-filter: blur(4px); }
@keyframes flutua { 50% { transform: rotate(1deg) translateY(-12px); } }
.rolar { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 28px; height: 46px; border: 2px solid rgba(247, 233, 210, .6); border-radius: 20px; }
.rolar span { position: absolute; left: 50%; top: 8px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--ouro); animation: rola 1.8s infinite; }
@keyframes rola { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* ---------- faixa ---------- */
.faixa { background: linear-gradient(90deg, var(--cobre), var(--ouro) 50%, var(--cobre)); color: #2a1300; overflow: hidden; transform: rotate(-1.2deg); margin: -10px -20px 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); position: relative; z-index: 2; }
.faixa-in { display: flex; width: max-content; animation: corre 32s linear infinite; padding: 12px 0; }
.faixa span { font-family: var(--rotulo); font-size: 1.5rem; letter-spacing: 2px; padding: 0 22px; white-space: nowrap; }
.faixa b { font-size: 1.1rem; align-self: center; }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- sabores ---------- */
.sabores-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sabor { position: relative; background: linear-gradient(170deg, var(--madeira2), var(--madeira) 60%, var(--noite2)); border: 1px solid rgba(184, 101, 44, .35); border-radius: var(--raio);
  padding: 22px 20px 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s, border-color .35s; cursor: pointer; }
.sabor::before { content: ''; position: absolute; inset: auto -40% -60% -40%; height: 70%; background: radial-gradient(closest-side, var(--c1), transparent); opacity: .18; transition: opacity .35s; }
.sabor:hover, .sabor.ativo { transform: translateY(-6px); border-color: var(--c1); box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 0 1px var(--c1); }
.sabor:hover::before, .sabor.ativo::before { opacity: .35; }
.sabor-txt { position: relative; display: flex; flex-direction: column; flex: 1; }
.sabor-tag { font-family: var(--rotulo); letter-spacing: 2px; color: var(--c1); margin: 0; font-size: 1.05rem; }
.sabor h3 { font-family: var(--faroeste); font-weight: 400; font-size: 1.6rem; margin: 0 0 .3em; }
.sabor p { font-size: .94rem; color: var(--suave); }
.sabor-preco { display: flex; gap: 8px; margin-top: auto; }
.sabor-preco span { flex: 1; background: rgba(0, 0, 0, .3); border-radius: 10px; padding: 6px 8px; font-size: .78rem; color: var(--suave); text-align: center; line-height: 1.25; }
.sabor-preco b { display: block; color: var(--espuma); font-size: .98rem; }
.sabor .btn-mini { align-self: flex-start; }
.sabor-quiz { align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 30%, rgba(244, 184, 28, .22), transparent 60%), var(--madeira); border-style: dashed; border-color: rgba(244, 184, 28, .6); cursor: default; }
.sabor-quiz::before { display: none; }
.quiz-icone { font-size: 3.4rem; animation: balanca 3s ease-in-out infinite; }
@keyframes balanca { 50% { transform: rotate(-10deg); } }
.nota-tabela { text-align: center; color: var(--suave); font-size: .85rem; margin-top: 22px; }

/* copo em CSS */
.copo { position: relative; width: 92px; height: 132px; margin: 4px auto 16px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: rgba(255, 255, 255, .1); border-radius: 0 0 10px 10px; }
.copo-liq { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, var(--c1), var(--c2)); transition: height 1.1s cubic-bezier(.3, 1.3, .5, 1); overflow: hidden; }
.revela.visivel .copo-liq, .sabor:hover .copo-liq { height: 78%; }
.copo-espuma { position: absolute; left: 0; right: 0; bottom: 18%; height: 18%; background: radial-gradient(circle at 20% 60%, #fff 0 30%, transparent 31%), radial-gradient(circle at 55% 40%, #fff 0 34%, transparent 35%), radial-gradient(circle at 85% 65%, #fff 0 30%, transparent 31%), #fff8e8; transition: bottom 1.1s cubic-bezier(.3, 1.3, .5, 1); border-radius: 40% 40% 4px 4px / 60% 60% 4px 4px; }
.revela.visivel .copo-espuma, .sabor:hover .copo-espuma { bottom: 74%; }
.copo-brilho { position: absolute; left: 14%; top: 8%; width: 9%; height: 80%; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); border-radius: 10px; }
.copo-liq i { position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .7); animation: sobe 2.6s infinite ease-in; }
.copo-liq i:nth-child(1) { left: 25%; animation-delay: .2s; }
.copo-liq i:nth-child(2) { left: 45%; animation-delay: 1.1s; width: 4px; height: 4px; }
.copo-liq i:nth-child(3) { left: 62%; animation-delay: .6s; }
.copo-liq i:nth-child(4) { left: 75%; animation-delay: 1.8s; width: 3px; height: 3px; }
.copo-liq i:nth-child(5) { left: 35%; animation-delay: 2.2s; width: 3px; height: 3px; }
@keyframes sobe { to { transform: translateY(-120px); opacity: 0; } }

/* ---------- calculadora ---------- */
.calc { background: linear-gradient(180deg, transparent, rgba(184, 101, 44, .1) 30%, transparent); }
.calc-grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.calc-texto p { color: var(--suave); }
.calc-dicas { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.calc-dicas li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--creme); }
.calc-dicas svg { width: 22px; height: 22px; color: var(--ouro); background: rgba(244, 184, 28, .15); border-radius: 50%; padding: 3px; }
.calc-caixa { background: linear-gradient(160deg, var(--madeira2), var(--madeira)); border: 1px solid rgba(184, 101, 44, .5); border-radius: 24px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--sombra); }
.campo { margin: 0 0 18px; border: 0; padding: 0; }
.campo label, .campo legend { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--creme); margin-bottom: 8px; font-size: .95rem; gap: 10px; }
.campo output { font-family: var(--rotulo); font-size: 1.6rem; color: var(--ouro); letter-spacing: 1px; line-height: 1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--ouro) var(--p, 10%), rgba(255, 255, 255, .12) var(--p, 10%)); outline-offset: 6px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--espuma); border: 5px solid var(--ouro); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--espuma); border: 5px solid var(--ouro); cursor: grab; }
.opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opcoes label { margin: 0; display: block; }
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes span { display: block; text-align: center; padding: 11px 6px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1.5px solid rgba(255, 255, 255, .12); font-weight: 600; font-size: .92rem; cursor: pointer; transition: all .2s; }
.opcoes input:checked + span { background: rgba(244, 184, 28, .18); border-color: var(--ouro); color: var(--ouro2); }
.opcoes input:focus-visible + span { outline: 3px solid var(--ouro2); }
select, input:not([type=range]):not([type=radio]), textarea { width: 100%; background: rgba(0, 0, 0, .35); border: 1.5px solid rgba(255, 255, 255, .15); color: var(--espuma); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 1rem; }
select:focus, input:focus, textarea:focus { border-color: var(--ouro); outline: none; }
select option { background: var(--madeira); }
.calc-resultado { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; background: rgba(0, 0, 0, .35); border-radius: 18px; padding: 18px; margin: 6px 0 18px; border: 1px dashed rgba(244, 184, 28, .45); }
.res-litros { display: flex; align-items: center; gap: 8px; grid-row: span 2; padding-right: 18px; border-right: 1px solid rgba(255, 255, 255, .12); }
.res-litros b { font-family: var(--rotulo); font-weight: 400; font-size: 3.4rem; color: var(--ouro); line-height: 1; }
.res-litros span { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--suave); line-height: 1.2; }
.res-barris { display: flex; flex-wrap: wrap; gap: 8px; }
.barril { display: inline-flex; align-items: center; gap: 6px; background: var(--madeira2); border: 1px solid var(--cobre); border-radius: 999px; padding: 5px 12px 5px 6px; font-weight: 700; font-size: .9rem; animation: entra .4s both; }
.barril i { width: 22px; height: 26px; border-radius: 6px; background: linear-gradient(90deg, #8a8f96, #e6e9ee 45%, #8a8f96); position: relative; }
.barril i::before, .barril i::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #6b7077; top: 6px; }
.barril i::after { top: auto; bottom: 6px; }
@keyframes entra { from { opacity: 0; transform: scale(.6); } }
.res-total { margin: 0; color: var(--suave); font-size: .92rem; }
.res-total b { color: var(--espuma); font-size: 1.25rem; margin-left: 6px; }
.calc-obs { font-size: .8rem; color: var(--suave); margin: 12px 0 0; text-align: center; }

/* ---------- delivery ---------- */
.delivery-grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.delivery-fotos { position: relative; height: clamp(440px, 52vw, 600px); }
.df { position: absolute; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); border: 4px solid var(--madeira2); }
.df img, .df video { width: 100%; height: 100%; object-fit: cover; }
.df-1 { left: 0; top: 6%; width: 46%; height: 70%; transform: rotate(-4deg); z-index: 2; }
.df-2 { left: 30%; top: 0; width: 42%; height: 84%; z-index: 3; transform: rotate(2deg); border-color: var(--cobre); }
.df-3 { right: 0; bottom: 0; width: 38%; height: 52%; transform: rotate(5deg); z-index: 1; }
.destaque-fita { display: inline-block; background: linear-gradient(90deg, var(--ouro2), var(--ouro)); color: #2a1600; font-family: var(--rotulo); font-size: 1.45rem; letter-spacing: 1.5px; padding: 4px 18px; transform: rotate(-2deg); clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.delivery-texto > p { color: var(--suave); }
.passos { list-style: none; padding: 0; margin: 22px 0 6px; display: grid; gap: 14px; }
.passos li { display: flex; gap: 16px; align-items: flex-start; background: rgba(43, 23, 11, .6); border: 1px solid rgba(184, 101, 44, .3); border-radius: 16px; padding: 14px 16px; }
.passos b { font-family: var(--faroeste); font-weight: 400; font-size: 1.4rem; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--cobre); color: var(--espuma); }
.passos h3 { margin: 2px 0 2px; font-size: 1.05rem; }
.passos p { margin: 0; color: var(--suave); font-size: .94rem; }

/* ---------- ponto ---------- */
.ponto { overflow: hidden; isolation: isolate; }
.ponto-fundo { position: absolute; inset: 0; z-index: -1; }
.ponto-fundo img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(1.2) blur(2px); }
.ponto-fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noite), rgba(18, 10, 5, .6) 30%, rgba(18, 10, 5, .6) 70%, var(--noite)); }
.ponto-grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.status { display: flex; align-items: center; gap: 14px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .15); border-radius: 16px; padding: 14px 18px; margin: 10px 0 20px; backdrop-filter: blur(6px); }
.status .ponto-vivo { width: 14px; height: 14px; }
.status b { display: block; color: var(--espuma); font-size: 1.1rem; }
.status span { color: var(--suave); font-size: .92rem; }
.ponto-info { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ponto-info li { display: flex; gap: 14px; align-items: flex-start; }
.ponto-info svg { width: 26px; height: 26px; color: var(--ouro); flex: none; margin-top: 2px; }
.ponto-info b { display: block; color: var(--espuma); }
.ponto-info span { color: var(--suave); font-size: .95rem; }
.mapa-moldura { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3.4; border: 4px solid var(--cobre); box-shadow: var(--sombra); background: var(--madeira); }
.mapa-moldura img, .mapa-moldura iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.mapa-bt { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; }
.mapa-bt svg { width: 18px; height: 18px; }
.ponto-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.ponto-mini img { aspect-ratio: 1; object-fit: cover; border-radius: 14px; width: 100%; }

/* ---------- eventos ---------- */
.abas { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }
.abas button { background: rgba(43, 23, 11, .8); color: var(--creme); border: 1.5px solid rgba(184, 101, 44, .45); padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: .95rem; transition: all .2s; }
.abas button:hover { border-color: var(--ouro); }
.abas button[aria-selected=true] { background: linear-gradient(180deg, var(--ouro2), var(--ouro)); color: #2a1600; border-color: transparent; }
.evento-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 18px; }
.evento-cab h3 { font-family: var(--faroeste); font-weight: 400; font-size: 1.7rem; margin: 0; }
.evento-cab span { font-family: var(--rotulo); letter-spacing: 2px; color: var(--cobre2); font-size: 1.15rem; }
.evento-cab p { width: 100%; margin: 0; color: var(--suave); }
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
.foto { padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--madeira); position: relative; animation: entra .5s both; }
.foto:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.foto:hover img { transform: scale(1.07); }
.foto::after { content: '⤢'; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .3s; font-size: 1.1rem; }
.foto:hover::after { opacity: 1; }
.eventos-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: linear-gradient(90deg, rgba(184, 101, 44, .3), rgba(43, 23, 11, .8)); border: 1px solid rgba(184, 101, 44, .5); border-radius: 20px; padding: 20px 24px; }
.eventos-cta p { margin: 0; color: var(--creme); }
.eventos-cta b { color: var(--ouro2); }

/* ---------- brindes ---------- */
.brindes { overflow: hidden; }
.mural { display: grid; gap: 14px; transform: rotate(-2deg); margin: 0 -40px; }
.mural-linha { display: flex; gap: 14px; width: max-content; animation: corre 60s linear infinite; }
.mural-linha.volta { animation-direction: reverse; animation-duration: 70s; }
.mural:hover .mural-linha { animation-play-state: paused; }
.mural figure { margin: 0; width: 190px; height: 250px; border-radius: 14px; overflow: hidden; flex: none; border: 3px solid var(--madeira2); background: var(--madeira); transition: transform .3s; }
.mural figure:nth-child(odd) { transform: rotate(2deg); }
.mural figure:hover { transform: scale(1.06) rotate(0); border-color: var(--ouro); }
.mural img { width: 100%; height: 100%; object-fit: cover; }
.brinde-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.saude { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center; }
.saude span { font-family: var(--faroeste); font-size: clamp(2.6rem, 9vw, 6rem); color: var(--ouro2); text-shadow: 0 6px 0 rgba(0, 0, 0, .5); opacity: 0; transform: scale(.4); }
.saude.mostra span { animation: saude 1.8s both; }
@keyframes saude { 20% { opacity: 1; transform: scale(1.1); } 35% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(-40px); } }
.gota { position: fixed; z-index: 89; pointer-events: none; width: 12px; height: 12px; border-radius: 50%; }

/* ---------- sobre ---------- */
.sobre-grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.sobre-foto { position: relative; }
.sobre-foto img { border-radius: 24px; box-shadow: var(--sombra); aspect-ratio: 4 / 4.6; object-fit: cover; width: 100%; border: 4px solid var(--madeira2); }
.carimbo { position: absolute; right: -14px; bottom: -18px; width: 132px; height: 132px; border-radius: 50%; background: var(--cobre); color: var(--espuma); display: grid; place-content: center; text-align: center; border: 4px dashed rgba(255, 250, 240, .6); box-shadow: 0 0 0 8px var(--noite), var(--sombra); transform: rotate(-12deg); }
.carimbo span { font-family: var(--rotulo); letter-spacing: 2px; font-size: .95rem; line-height: 1; }
.carimbo b { font-family: var(--faroeste); font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--ouro2); }
.sobre-texto p { color: var(--texto); }
.sobre-texto b { color: var(--ouro2); }
blockquote { margin: 24px 0 0; font-family: var(--mao); font-size: 2.2rem; color: var(--ouro); line-height: 1.1; border-left: 4px solid var(--cobre); padding-left: 18px; }

/* ---------- parceria ---------- */
.parceria { background: linear-gradient(180deg, transparent, rgba(43, 23, 11, .7) 40%, transparent); }
.parceria-grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.parceria-grade > div > p { color: var(--suave); }
.parceria-tipos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.parceria-tipos li { display: flex; align-items: center; gap: 12px; background: rgba(43, 23, 11, .8); border: 1px solid rgba(184, 101, 44, .35); border-radius: 14px; padding: 14px 16px; font-size: 1.5rem; }
.parceria-tipos span { font-size: 1rem; font-weight: 700; color: var(--creme); }
.form-wa { background: linear-gradient(160deg, var(--madeira2), var(--madeira)); border: 1px solid rgba(184, 101, 44, .5); border-radius: 24px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--sombra); }
.form-wa h3 { font-family: var(--faroeste); font-weight: 400; font-size: 1.6rem; }
.form-wa .campo { margin-bottom: 14px; }
.form-wa .campo label { margin-bottom: 6px; }
.form-obs { font-size: .8rem; color: var(--suave); text-align: center; margin: 10px 0 0; }
.erro { border-color: #e0614a !important; }

/* ---------- instagram ---------- */
.insta-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 32px; }
.post { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--madeira); }
.post img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post span { position: absolute; inset: auto 0 0; padding: 30px 10px 10px; background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); color: #fff; font-size: .8rem; font-weight: 600; display: flex; gap: 6px; align-items: flex-end; line-height: 1.25; opacity: 0; transition: opacity .3s; }
.post span svg { width: 16px; height: 16px; flex: none; }
.post:hover img { transform: scale(1.06); }
.post:hover span, .post:focus-visible span { opacity: 1; }

/* ---------- faq ---------- */
.faq-grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.faq-grade .titulo-secao { text-align: left; margin: 0; }
.faq-lista { display: grid; gap: 10px; }
details { background: rgba(43, 23, 11, .7); border: 1px solid rgba(184, 101, 44, .35); border-radius: 16px; padding: 0 20px; transition: border-color .2s; }
details[open] { border-color: var(--ouro); }
summary { cursor: pointer; padding: 18px 30px 18px 0; font-weight: 700; color: var(--espuma); list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 1.6rem; color: var(--ouro); transition: transform .3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--suave); padding-bottom: 6px; }

/* ---------- chamada final ---------- */
.chamada { padding: 30px 0 100px; }
.chamada-in { text-align: center; background: radial-gradient(circle at 50% 0%, rgba(244, 184, 28, .25), transparent 60%), linear-gradient(160deg, var(--madeira2), var(--noite2)); border: 1px solid rgba(184, 101, 44, .5); border-radius: 30px; padding: clamp(36px, 6vw, 70px) 20px; }
.chamada-in img { width: 150px; margin: 0 auto 10px; animation: balanca 5s ease-in-out infinite; }
.chamada-in h2 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: .2em; }
.chamada-in p { color: var(--suave); font-size: 1.1rem; }

/* ---------- rodapé ---------- */
.rodape { background: #0b0603; padding: 0 0 100px; position: relative; }
.corda { height: 14px; background: repeating-linear-gradient(115deg, #d9b47a 0 6px, #a9824a 6px 9px, #e7c993 9px 14px); box-shadow: 0 2px 0 #6b4a20; }
.rodape-grade { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding: 56px 0 36px; }
.rodape-marca img { width: 130px; margin-bottom: 12px; }
.rodape-marca p { color: var(--suave); font-size: .95rem; }
.assina { font-family: var(--mao); font-size: 1.7rem !important; color: var(--ouro) !important; margin: 0 0 .3em; line-height: 1.1; }
.rodape h3 { font-family: var(--rotulo); font-weight: 400; letter-spacing: 2px; font-size: 1.35rem; color: var(--cobre2); }
.lista-contato { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lista-contato a, .nao-link { display: flex; gap: 12px; color: var(--texto); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.lista-contato a:hover { color: var(--ouro2); }
.lista-contato svg { width: 22px; height: 22px; color: var(--ouro); flex: none; margin-top: 2px; }
.lista-contato b { display: block; color: var(--espuma); font-size: 1rem; }
.rodape-fim { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .85rem; color: var(--suave); }
.rodape-fim p { margin: 0; }
.rodape-fim a { color: var(--suave); }
.aviso-legal { width: 100%; display: flex; gap: 8px; align-items: center; color: var(--creme); font-weight: 600; }
.aviso-legal svg { width: 18px; height: 18px; color: var(--ouro); flex: none; }
.credito { font-size: .78rem; opacity: .75; }
.credito a { text-decoration: none; }
.credito a:hover { color: var(--ouro2); }
.wa-flutua { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 8px; background: var(--verde); color: #04210f; text-decoration: none; font-weight: 800; padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .2s; animation: chama 4s ease-in-out infinite 3s; }
.wa-flutua svg { width: 28px; height: 28px; }
.wa-flutua:hover { transform: scale(1.06); }
@keyframes chama { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-6deg) scale(1.06); } 96% { transform: rotate(6deg) scale(1.06); } }

/* ---------- modais ---------- */
.idade, .quiz, .amplia { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(8, 4, 2, .88); backdrop-filter: blur(8px); }
.idade[hidden], .quiz[hidden], .amplia[hidden] { display: none; }
.idade-caixa, .quiz-caixa { position: relative; width: min(480px, 100%); text-align: center; background: linear-gradient(160deg, var(--madeira2), var(--madeira)); border: 2px solid var(--cobre); border-radius: 26px; padding: 30px 24px; box-shadow: var(--sombra); animation: entra .4s both; }
.idade-caixa img { width: 130px; margin: -80px auto 10px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6)); }
.idade-caixa h2 { font-size: 1.6rem; }
.idade-caixa p { color: var(--suave); }
.idade-bts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.quiz-caixa { width: min(560px, 100%); text-align: left; }
.quiz-caixa h2 { font-size: 1.7rem; }
.quiz-fecha, .amplia-fecha { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--creme); font-size: 2rem; line-height: 1; width: 44px; height: 44px; }
.quiz-passo { color: var(--suave); font-size: .85rem; margin: 0 0 6px; }
.quiz-perg { font-weight: 800; color: var(--espuma); font-size: 1.15rem; margin-bottom: 14px; }
.quiz-ops { display: grid; gap: 10px; }
.quiz-ops button { text-align: left; background: rgba(0, 0, 0, .3); border: 1.5px solid rgba(255, 255, 255, .14); color: var(--espuma); border-radius: 14px; padding: 14px 16px; font-weight: 600; transition: all .2s; }
.quiz-ops button:hover { border-color: var(--ouro); background: rgba(244, 184, 28, .12); }
.quiz-res { text-align: center; }
.quiz-res .copo { margin-top: 10px; }
.quiz-res .copo-liq { height: 78%; }
.quiz-res .copo-espuma { bottom: 74%; }
.quiz-res h3 { font-family: var(--faroeste); font-weight: 400; font-size: 2.2rem; color: var(--ouro2); margin: 0; }
.quiz-res p { color: var(--suave); }
.quiz-res .btn { margin: 4px; }
.amplia img { max-height: 86vh; max-width: min(1100px, 100%); border-radius: 14px; box-shadow: var(--sombra); }
.amplia-nav { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 2rem; line-height: 1; }
.amplia-nav.ant { left: 14px; }
.amplia-nav.prox { right: 14px; }

/* ---------- páginas internas ---------- */
.interna main { padding-top: 140px; min-height: 70vh; }
.texto-longo { max-width: 760px; }
.texto-longo h1 { font-family: var(--faroeste); font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); }
.texto-longo h2 { font-size: 1.5rem; margin-top: 1.4em; }
.texto-longo .btn { margin: 6px 6px 0 0; }

/* ---------- animação de entrada ---------- */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s; transition-delay: var(--d, 0ms); }
.revela.visivel { opacity: 1; transform: none; }
.sabor.revela.visivel:hover { transform: translateY(-6px); }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .menu { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); flex-direction: column; background: var(--noite2); padding: 96px 22px 22px; gap: 4px; transform: translateX(100%); transition: transform .35s; box-shadow: -20px 0 50px rgba(0, 0, 0, .5); }
  .menu a { font-size: 1.15rem; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; }
  .menu-aberto .menu { transform: none; }
  .menu-btn { display: flex; position: relative; z-index: 2; }
  .sabores-grade { grid-template-columns: repeat(2, 1fr); }
  .insta-grade { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .hero-in, .calc-grade, .delivery-grade, .ponto-grade, .sobre-grade, .parceria-grade, .faq-grade { grid-template-columns: 1fr; }
  .hero-cartao { display: none; }
  .hero-veu { background: linear-gradient(180deg, rgba(18, 10, 5, .5) 0%, rgba(18, 10, 5, .55) 40%, rgba(18, 10, 5, .92) 75%, var(--noite) 100%); }
  .hero { align-items: flex-end; }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .rodape-grade { grid-template-columns: 1fr; gap: 30px; }
  .faq-grade .titulo-secao { text-align: center; }
  .delivery-fotos { order: 2; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .topo-cta span { display: none; }
  .topo-cta { padding: 11px; }
  .marca span { display: none; }
  .hero { padding-top: 100px; }
  .hero-bts .btn { width: 100%; }
  .hero-numeros li { min-width: 0; flex: 1 1 40%; }
  .sabores-grade { grid-template-columns: 1fr; }
  .sabor { display: grid; grid-template-columns: 92px 1fr; gap: 0 16px; align-items: start; }
  .sabor .copo { width: 80px; height: 116px; margin: 0; }
  .sabor-quiz { display: flex; }
  .insta-grade { grid-template-columns: repeat(2, 1fr); }
  .post span { opacity: 1; }
  .parceria-tipos { grid-template-columns: 1fr 1fr; }
  .mural figure { width: 140px; height: 186px; }
  .carimbo { width: 104px; height: 104px; right: 6px; }
  .carimbo b { font-size: 1.5rem; }
  .eventos-cta { flex-direction: column; text-align: center; }
  .eventos-cta .btn { width: 100%; }
  .wa-flutua span { display: none; }
  .wa-flutua { padding: 14px; }
  .calc-resultado { grid-template-columns: 1fr; text-align: center; }
  .res-litros { grid-row: auto; border: 0; padding: 0; justify-content: center; }
  .res-barris { justify-content: center; }
  .btn { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .revela { opacity: 1; transform: none; }
}

/* galerias por quantidade de fotos (sem buracos) */
.galeria-n4 { grid-auto-rows: 380px; }
.galeria-n4 .foto:nth-child(1) { grid-column: auto; grid-row: auto; }
.galeria-n8 .foto:last-child { grid-column: span 2; }
.galeria-n6 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; }
.mapa-moldura img { object-position: center 18%; }
@media (max-width: 900px) {
  .galeria-n4 { grid-auto-rows: 260px; }
  .galeria-n6 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .galeria-n6 .foto:nth-child(1), .galeria-n8 .foto:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .galeria-n6 .foto:last-child { grid-column: span 2; }
  .galeria-n8 .foto:last-child { grid-column: span 2; }
}