/* =========================================================================
   CHALÉ CONVENIÊNCIA — Preá/CE
   Sistema visual: preto + laranja + branco, tipografia condensada,
   geometria triangular herdada do símbolo da marca.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* cor */
  --black:#050505;
  --ink:#0B0B0B;          /* superfícies elevadas */
  --ink-2:#131313;        /* cards */
  --o:#FF4A00;            /* laranja principal */
  --o-2:#FF6A00;          /* laranja secundário */
  --white:#FFFFFF;
  --grey:#A8A8A8;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.26);

  /* tipografia */
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* medidas */
  --wrap:1320px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,10vw,160px);
  --r:2px;                /* raio: quase reto, a marca é geométrica */

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Anton: caps acentuadas (É, Ê, Ú) sobem 1.11em acima da linha de base.
     1.12 é o valor mais compacto em que o acento não invade a linha de cima. */
  --lh-display:1.12;
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--o);outline-offset:3px}

html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--text);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--o);color:#000;padding:12px 18px;font-weight:700;
}
.skip:focus{left:12px;top:12px}

/* ---------- 3. UTILITÁRIOS ---------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:var(--sec-y)}

/* triângulo da marca usado como bullet/detalhe */
.tri{width:.62em;height:.52em;fill:var(--o);flex:none}

.eyebrow{
  display:flex;align-items:center;gap:.6em;
  font-size:clamp(11px,.9vw,13px);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--white);
}

/* grão cinematográfico */
.grain{
  position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* botões */
.btn{
  --bg:transparent;--fg:var(--white);--bd:var(--line-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.05em 1.9em;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:clamp(12px,.85vw,14px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  line-height:1;border-radius:var(--r);overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--o-2);z-index:0;
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn>*{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn--solid{--bg:var(--o);--fg:#0A0A0A;--bd:var(--o)}
.btn--ghost:hover{color:#0A0A0A;border-color:var(--o-2)}
.btn--sm{padding:.85em 1.3em;letter-spacing:.1em}
.btn--lg{padding:1.25em 2.4em}
.btn--wide{width:100%}

/* revelação em scroll — só esconde se o JS estiver ativo (conteúdo nunca some) */
.js .reveal{opacity:0;transform:translateY(26px)}
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.d1{transition-delay:.10s}.d2{transition-delay:.20s}.d3{transition-delay:.30s}.d4{transition-delay:.40s}

/* ---------- 4. CABEÇALHO ------------------------------------------------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:50;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{background:rgba(5,5,5,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.hdr__in{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(14px,1.6vw,20px) var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.lockup{display:flex;align-items:center;gap:.7em}
.lockup__mark{width:clamp(30px,3vw,38px);height:auto;fill:var(--o)}
.lockup__txt{display:block;line-height:.9}
.lockup__name{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(19px,1.8vw,25px);letter-spacing:.02em;
}
.lockup__sub{
  display:block;background:var(--o);color:#0A0A0A;
  font-size:clamp(8px,.62vw,9px);font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;padding:.34em .1em .3em .42em;margin-top:.32em;text-align:center;
}

.nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.nav a{
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  transition:color .3s var(--ease);position:relative;padding-block:4px;
}
.nav a:not(.btn):hover{color:var(--white)}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--o);
  transition:width .35s var(--ease);
}
.nav a:not(.btn):hover::after{width:100%}
.nav__cta{color:#0A0A0A}

.burger{display:none;width:46px;height:38px;position:relative;z-index:60}
.burger span{
  position:absolute;left:9px;height:2px;width:28px;background:var(--white);
  transition:transform .4s var(--ease),opacity .3s,width .4s var(--ease);
}
.burger span:nth-child(1){top:12px}
.burger span:nth-child(2){top:19px;width:20px;background:var(--o)}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 5. HERO ------------------------------------------------------ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;padding-top:clamp(96px,12vh,140px);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(115% 85% at 78% 26%,rgba(255,74,0,.24) 0%,transparent 60%),
    linear-gradient(180deg,rgba(5,5,5,.78) 0%,rgba(5,5,5,.18) 34%,rgba(5,5,5,.62) 82%,var(--black) 100%),
    linear-gradient(94deg,rgba(5,5,5,.94) 4%,rgba(5,5,5,.62) 44%,rgba(5,5,5,.28) 72%,rgba(5,5,5,.5) 100%);
}
.hero__in{
  position:relative;z-index:4;flex:1;
  display:grid;grid-template-columns:1.32fr .68fr;gap:clamp(24px,4vw,64px);
  align-items:end;padding-bottom:clamp(48px,7vh,92px);
}

.hero__h1{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(3.4rem,9.4vw,8.8rem);line-height:var(--lh-display);letter-spacing:-.005em;
  margin:clamp(14px,2vw,26px) 0 clamp(18px,2.4vw,30px);
}
/* máscara: o <span> externo é observado pelo IO, o interno é que anima.
   (clip-path no próprio elemento observado zera a área e o IO nunca dispara) */
.hero__h1 .line{
  display:block;opacity:1;transform:none;overflow:hidden;
  padding:.20em 0 .10em;margin:-.20em 0 -.10em;   /* espaço pros acentos (É, Ê) */
}
.hero__h1 .line>span{display:block;will-change:transform}
.js .hero__h1 .line>span{transform:translateY(130%);transition:transform 1.05s var(--ease)}
.js .hero__h1 .line.d1>span{transition-delay:.12s}
.js .hero__h1 .line.in>span{transform:none}
.hero__h1 .line:last-child{color:var(--o)}

.hero__sub{
  max-width:32ch;font-size:clamp(16px,1.5vw,21px);color:#EDEDED;
  border-left:2px solid var(--o);padding-left:1em;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}

.hero__facts{
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);
  margin-top:clamp(30px,4vw,54px);padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line);
}
.hero__facts dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--o);font-weight:700}
.hero__facts dd{font-size:clamp(14px,1.1vw,16px);font-weight:600;margin-top:.25em}

.hero__photo{
  position:relative;align-self:end;
  clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);
}
.hero__photo img{width:100%;height:auto}
.hero__photo::after{
  content:"";position:absolute;inset:auto -14px -14px auto;width:64%;height:38%;
  border:1px solid var(--o);z-index:-1;
}

/* ticker */
.ticker{
  position:relative;z-index:4;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.55);overflow:hidden;
}
.ticker__row{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker__grp{display:flex;align-items:center;gap:clamp(20px,3vw,42px);padding:.85em clamp(10px,1.5vw,21px)}
.ticker b{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(15px,1.5vw,21px);letter-spacing:.03em;color:var(--white);white-space:nowrap;
}
.ticker .tri{width:11px;height:9px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 6. CABEÇALHO DE SEÇÃO --------------------------------------- */
.sechead{margin-bottom:clamp(36px,5vw,72px)}
.sechead__h{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:var(--lh-display);letter-spacing:-.005em;
  margin:clamp(12px,1.6vw,20px) 0 0;
}
.sechead__h em{font-style:normal;color:var(--o)}
.sechead__p{color:var(--grey);max-width:48ch;margin-top:clamp(16px,2vw,24px);font-size:clamp(15px,1.15vw,17px)}
.sechead--row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end}
.sechead--row .sechead__p{margin-top:0;padding-bottom:.5em}

/* ---------- 7. EXPERIÊNCIA ---------------------------------------------- */
.exp{background:var(--black)}
/* Colunas em vez de grade de slots fixos. Cada card fica com a altura da
   própria foto, então nenhuma imagem precisa ser cortada para caber. */
.expgrid{columns:3;column-gap:clamp(10px,1.2vw,18px)}
.card{
  position:relative;overflow:hidden;background:var(--ink-2);border-radius:var(--r);
  border:1px solid var(--line);
  break-inside:avoid;margin-bottom:clamp(10px,1.2vw,18px);
}
/* o tratamento de cor (contraste/temperatura) já vem queimado nos .webp —
   aqui só transform, que é barato e roda na GPU */
.card img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.card:hover img{transform:scale(1.05)}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.16) 30%,rgba(5,5,5,.88) 100%);
  transition:opacity .5s var(--ease);
}
.card:hover::after{opacity:.86}
.card__txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,1.7vw,26px)}
.card__txt h3{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:.95;letter-spacing:.01em;
}
.card__txt p{font-size:clamp(13px,.95vw,15px);color:#D6D6D6;margin-top:.35em;max-width:26ch}
.card__txt h3::after{
  content:"";display:block;width:26px;height:2px;background:var(--o);
  margin-top:.42em;transition:width .5s var(--ease);
}
.card:hover .card__txt h3::after{width:64px}

/* card sólido laranja (sem foto): como não tem imagem para dar altura,
   a proporção é declarada aqui */
.card--flat{background:var(--o);border-color:var(--o);aspect-ratio:4/5}
.card--flat::after{display:none}
.card__flat{
  position:relative;height:100%;padding:clamp(18px,1.8vw,26px);
  display:flex;flex-direction:column;justify-content:flex-end;color:#0A0A0A;overflow:hidden;
}
.card__flat h3{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:.95;
}
.card__flat p{font-size:clamp(13px,.95vw,15px);font-weight:500;margin-top:.35em;max-width:22ch}
.card__watermark{
  position:absolute;right:-16%;top:-14%;width:82%;height:auto;
  fill:#0A0A0A;opacity:.13;pointer-events:none;
}

/* ---------- 8. KARAOKÊ --------------------------------------------------- */
.kar{overflow:hidden;background:var(--black);isolation:isolate}
.kar__bg{position:absolute;inset:0;z-index:0}
.kar__bg img{width:100%;height:100%;object-fit:cover;
}
.kar__veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(90% 120% at 12% 50%,rgba(5,5,5,.96) 10%,rgba(5,5,5,.72) 55%,rgba(5,5,5,.9) 100%),
    linear-gradient(100deg,rgba(255,74,0,.16) 0%,transparent 46%);
}
.kar__watermark{
  position:absolute;z-index:2;right:-6%;bottom:-24%;width:min(56%,620px);height:auto;
  fill:none;stroke:var(--o);stroke-width:6;opacity:.26;
}
.kar__in{
  position:relative;z-index:4;
  display:grid;grid-template-columns:1.45fr .55fr;gap:clamp(28px,5vw,80px);align-items:center;
}
.kar__h{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(3.6rem,11vw,10rem);line-height:var(--lh-display);letter-spacing:-.01em;
  margin:clamp(12px,1.6vw,22px) 0 0;
}
.kar__h::after{content:"";display:block;width:clamp(90px,14vw,190px);height:5px;background:var(--o);margin-top:clamp(16px,2vw,28px)}
.kar__p{color:#D9D9D9;max-width:44ch;margin-top:clamp(18px,2.4vw,30px);font-size:clamp(15px,1.2vw,18px)}

.kar__info{
  border:1px solid var(--line-strong);background:rgba(11,11,11,.72);backdrop-filter:blur(6px);
  padding:clamp(22px,2.6vw,34px);border-radius:var(--r);
}
.days{display:flex;gap:8px;margin-bottom:clamp(16px,2vw,22px)}
.days li{
  flex:1;text-align:center;border:1px solid var(--o);color:var(--o);
  font-family:var(--display);text-transform:uppercase;font-size:clamp(15px,1.5vw,20px);
  padding:.5em .2em .42em;letter-spacing:.04em;
}
.kar__hours{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1}
.kar__hours span{font-family:var(--text);font-size:.34em;font-weight:600;letter-spacing:.16em;color:var(--grey);vertical-align:middle}
.kar__note{color:var(--grey);font-size:14px;margin:.9em 0 clamp(20px,2.4vw,28px)}

/* ---------- 9. DRINKS ---------------------------------------------------- */
.drinks{background:var(--ink)}
.sechead--wide .sechead__h{font-size:clamp(2.3rem,5.4vw,4.8rem)}
.drinkgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);
}
.drink{position:relative}
.drink:nth-child(even){margin-top:clamp(20px,3.4vw,54px)}
.drink__ph{position:relative;overflow:hidden;background:#000;border:1px solid var(--line);border-radius:var(--r)}
.drink__ph::after{
  content:"";position:absolute;inset:0;border:1px solid transparent;
  transition:border-color .45s var(--ease);pointer-events:none;
}
.drink:hover .drink__ph::after{border-color:var(--o)}
.drink__ph img{width:100%;height:auto;display:block;
  transition:transform 1.1s var(--ease)}
.drink:hover .drink__ph img{transform:scale(1.06)}
.drink__name{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.4rem,2.2vw,2.1rem);line-height:1;margin:clamp(14px,1.4vw,20px) 0 .6em;
}
.drink__ing li{
  position:relative;padding-left:1.35em;color:var(--grey);
  font-size:clamp(12.5px,.92vw,14.5px);line-height:1.85;
}
.drink__ing li::before{
  content:"";position:absolute;left:0;top:.72em;width:8px;height:7px;background:var(--o);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}

.also{
  margin-top:clamp(48px,7vw,104px);padding-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,56px);align-items:start;
}
.also__h{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.3rem,2.2vw,2rem);line-height:1;color:var(--o);white-space:nowrap;
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{
  border:1px solid var(--line-strong);padding:.62em 1.05em;border-radius:99px;
  font-size:clamp(12px,.9vw,14px);font-weight:600;letter-spacing:.02em;color:#E4E4E4;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.chips li:hover{border-color:var(--o);color:var(--o)}
.also__note{grid-column:2;color:var(--grey);font-size:13.5px;margin-top:1em}

/* faixa de fotos do "E ainda tem" — alturas naturais, escalonadas de propósito */
.strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px);
  align-items:start;margin-top:clamp(24px,3vw,38px);
}
.strip__item{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);
}
.strip__item:nth-child(even){margin-top:clamp(14px,2.4vw,34px)}
.strip__item img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.strip__item:hover img{transform:scale(1.05)}
.strip__item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(10px,1vw,14px);
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.9));
  font-size:clamp(11px,.85vw,13px);font-weight:600;letter-spacing:.02em;
}

/* foto do telão dentro da seção de karaokê */
.kar__ph{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);margin-top:clamp(24px,3vw,40px);max-width:520px;
}
.kar__ph img{width:100%;height:auto;display:block}

/* ---------- 9b. CARTAZES ------------------------------------------------- */
/* A arte oficial de cada autoral já traz nome e ingredientes desenhados.
   São 9:16 inteiras — entram sem corte nenhum. */
.posters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(40px,5vw,72px);
}
.poster{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);
}
.poster img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
.poster:hover img{transform:scale(1.04)}
.poster::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid transparent;transition:border-color .45s var(--ease);
}
.poster:hover::after{border-color:var(--o)}

/* ---------- 9c. O SALÃO -------------------------------------------------- */
.salao{background:var(--ink)}
.salao__hero{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);margin-top:clamp(28px,4vw,52px);
}
.salao__duo{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(10px,1.4vw,20px);
}
/* fotos do espaço vazio: alturas diferentes, alinhadas pelo topo */
.salao__trio{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(10px,1.4vw,20px);align-items:start;
}
.salao figure{
  position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);
  background:var(--ink-2);margin:0;
}
.salao img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease)}
.salao figure:hover img,.salao__hero:hover img{transform:scale(1.04)}
.salao figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.6vw,24px);
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.92));
  font-size:clamp(13px,1vw,15px);font-weight:600;
}

/* ---------- 10. GALERIA -------------------------------------------------- */
.gal{background:var(--black)}
.galgrid{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  columns:4;column-gap:clamp(8px,1vw,14px);
}
.g{
  position:relative;overflow:hidden;background:var(--ink-2);border-radius:var(--r);
  break-inside:avoid;margin-bottom:clamp(8px,1vw,14px);display:block;
}
.g img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease)}
.g:not(.gcta)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(5,5,5,.22);transition:opacity .5s var(--ease);
}
.g:hover img{transform:scale(1.06)}
.g:hover::after{opacity:0}

.gcta{
  display:flex;flex-direction:column;justify-content:center;gap:.25em;
  background:var(--o);color:#0A0A0A;padding:clamp(16px,1.8vw,26px);
  aspect-ratio:4/5;   /* sem foto: a proporcao vem daqui */
  transition:background .35s var(--ease);
}
.gcta:hover{background:var(--o-2)}
.gcta__k{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.gcta__h{font-family:var(--display);text-transform:uppercase;font-size:clamp(15px,1.5vw,22px);line-height:1;word-break:break-word}
.gcta__a{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:.5em}

/* ---------- 11. ONDE FICA ------------------------------------------------ */
.local{background:var(--ink)}
.local__in{display:grid;grid-template-columns:1fr .92fr;gap:clamp(32px,5vw,80px);align-items:center}
.info{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line)}
.info__row{
  display:grid;grid-template-columns:minmax(96px,.28fr) 1fr;gap:16px;
  padding:clamp(16px,1.8vw,22px) 0;border-bottom:1px solid var(--line);
}
.info dt{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--o);padding-top:.25em}
.info dd{font-size:clamp(15px,1.15vw,17px);line-height:1.65}
.info dd b{font-weight:700}
.info dd a{border-bottom:1px solid var(--line-strong);transition:border-color .3s,color .3s}
.info dd a:hover{color:var(--o);border-color:var(--o)}
.local__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}
/* sem clip-path diagonal: ele comia 4% da foto em cada canto */
.local__ph{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line)}
.local__ph img{width:100%;height:auto}
.local__ph figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.9));
  font-size:clamp(13px,1vw,15px);font-weight:600;
}

/* ---------- 12. CTA FINAL ------------------------------------------------ */
.final{overflow:hidden;text-align:center;padding-block:clamp(96px,14vw,200px)}
.final__bg{position:absolute;inset:0;z-index:0}
.final__bg img{width:100%;height:100%;object-fit:cover}
.final__veil{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(70% 90% at 50% 60%,rgba(255,74,0,.2),transparent 62%),
             linear-gradient(180deg,var(--black),rgba(5,5,5,.7) 45%,var(--black));
}
.final__in{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center}
.final__h{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(3rem,10vw,9rem);line-height:var(--lh-display);letter-spacing:-.01em;
}
.final__h em{font-style:normal;color:var(--o)}
.final__p{
  font-size:clamp(13px,1.1vw,15px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--grey);margin-top:clamp(18px,2.4vw,30px);
}
.final__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(30px,4vw,48px)}

/* ---------- 13. RODAPÉ --------------------------------------------------- */
.ftr{border-top:1px solid var(--line);background:var(--black);padding-block:clamp(40px,5vw,66px)}
.ftr__in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,56px);align-items:start}
.ftr__nav{display:flex;flex-wrap:wrap;gap:14px 26px;padding-top:.4em}
.ftr__nav a{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);transition:color .3s}
.ftr__nav a:hover{color:var(--o)}
.ftr__legal{text-align:right;font-size:13px;color:var(--grey);line-height:1.9}
.ftr__legal a:hover{color:var(--o)}
.ftr__warn{font-size:11.5px;letter-spacing:.02em;color:#8A8A8A;max-width:44ch;margin-left:auto}
.ftr__copy{font-size:11.5px;color:#6E6E6E;margin-top:.4em}

/* ---------- 14. RESPONSIVO ---------------------------------------------- */
@media (max-width:1100px){
  .hero__in{grid-template-columns:1.2fr .8fr}
  .kar__in{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .kar__info{max-width:520px}
  .expgrid{columns:2}
  .galgrid{columns:3}
  .drinkgrid{grid-template-columns:repeat(2,1fr)}
  .posters{grid-template-columns:repeat(2,1fr)}
  .salao__duo{grid-template-columns:1fr}
  .salao__trio{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(3,1fr)}
  .local__in{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .local__ph{max-width:560px}
}

@media (max-width:960px){
  .nav{
    position:fixed;inset:0;z-index:55;flex-direction:column;justify-content:center;align-items:flex-start;
    gap:clamp(14px,2.5vh,24px);background:var(--black);padding:0 var(--pad);
    clip-path:circle(0% at calc(100% - 44px) 38px);
    transition:clip-path .6s var(--ease),visibility 0s .6s;
    pointer-events:none;visibility:hidden;   /* visibility tira os links do foco do teclado */
    overflow-y:auto;padding-block:96px 32px;  /* tela baixa: o menu rola em vez de cortar */
    justify-content:safe center;              /* centraliza sem esconder o topo ao rolar */
  }
  .nav.open{
    clip-path:circle(150% at calc(100% - 44px) 38px);
    pointer-events:auto;visibility:visible;transition:clip-path .6s var(--ease),visibility 0s;
  }
  .nav a:not(.btn){
    font-family:var(--display);font-size:clamp(2rem,9vw,3.4rem);line-height:1;
    letter-spacing:.01em;color:var(--white);
  }
  .nav a:not(.btn)::after{height:2px}
  .nav__cta{margin-top:clamp(12px,3vh,26px);font-family:var(--text);font-size:13px}
  .burger{display:block}

  .hero{padding-top:clamp(88px,14vh,120px)}
  .hero__in{grid-template-columns:1fr;align-items:start;gap:clamp(28px,5vw,40px)}
  .hero__h1{font-size:clamp(3.6rem,15.5vw,7rem)}
  .hero__photo{max-width:min(78vw,420px);margin-top:8px}
  .hero__photo::after{inset:auto -10px -10px auto}
  .sechead--row{grid-template-columns:1fr;align-items:start}
  .sechead--row .sechead__p{margin-top:1em}
  .also{grid-template-columns:1fr;gap:16px}
  .also__note{grid-column:1}
  .ftr__in{grid-template-columns:1fr;gap:26px}
  .ftr__legal{text-align:left}
  .ftr__warn{margin-left:0}
}

@media (max-width:760px){
  /* alvos de toque confortáveis no celular */
  .btn{min-height:48px}
  .info dd a,.ftr__legal a{display:inline-block;padding-block:.3em}
  .ftr__nav a{padding-block:.4em}

  .expgrid{columns:1}
  .drinkgrid{gap:clamp(12px,3vw,20px)}
  .drink:nth-child(even){margin-top:0}
  .galgrid{columns:2}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip__item:nth-child(even){margin-top:0}
  .kar__hours{font-size:clamp(1.6rem,9vw,2.4rem)}
}

@media (max-width:420px){
  .days li{font-size:14px}
  .hero__facts{gap:16px}
  .hero__facts>div{min-width:calc(50% - 8px)}
}

/* ---------- 15. MOVIMENTO REDUZIDO -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .js .hero__h1 .line>span{transform:none}
  .ticker__row{animation:none}
}