/* ============================================================
   VILA MARAH — SPORT BAR
   Paleta oficial: preto + dourado + cinza metálico
   ============================================================ */

:root{
  --black:        #050505;
  --black-2:      #0d0d0d;
  --black-3:      #111111;
  --gold:         #D4A62A;
  --gold-light:   #E6C45A;
  --gray:         #6F7073;
  --white:        #FFFFFF;
  --cream:        #EDE4D2;

  --header-h: 88px;
  --media-left: 0%;
  --media-width: 46%;
  --content-left: 40%;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
section[id]{ scroll-margin-top:24px; }

body{
  background:var(--black);
  color:var(--cream);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ text-decoration:none; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; }
figure{ margin:0; }

/* ---------- PLACEHOLDERS DE IMAGEM ---------- */
.ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  background:var(--black-3);
  border:1px dashed rgba(212,166,42,.35);
  color:var(--gray);
  text-align:center; padding:12px;
}
.ph i{ font-size:26px; color:rgba(212,166,42,.45); }
.ph span{ font-size:10px; letter-spacing:.22em; font-weight:600; color:rgba(212,166,42,.75); }
.ph small{ font-size:9px; letter-spacing:.06em; color:var(--gray); font-family:ui-monospace,Menlo,Consolas,monospace; }
figure img + .ph{ display:none; }


/* ============================================================
   SEÇÃO 1 — HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--black);
  overflow:hidden;
}

/* ---------- TOPBAR ---------- */
.topbar{
  position:absolute; top:0; left:0; right:0;
  height:var(--header-h);
  display:flex; align-items:center;
  padding:0 30px;
  z-index:60;              /* fora do hero: precisa ficar acima de todas as seções */
}

/* logo */
.brand{
  position:relative;
  display:flex; align-items:center;
  flex:0 0 auto;
  height:56px;
  margin-right:30px;
}
.brand__img{ height:100%; width:auto; object-fit:contain; }
.brand__img + .brand__badge{ display:none; }
.brand__badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; height:100%; padding:0 8px;
  text-align:center;
}
.brand__mark{
  font-family:'Cinzel',serif; font-weight:900;
  font-size:20px; letter-spacing:.06em; line-height:1;
  color:var(--gold-light);
}
.brand__name{
  font-family:'Cinzel',serif; font-weight:700;
  font-size:11px; letter-spacing:.1em; line-height:1.15;
  color:var(--gold);
  max-width:none;
}
.brand__tag{
  font-size:6.5px; letter-spacing:.3em; font-weight:600;
  color:rgba(237,228,210,.6);
}

/* hamburger */
.burger{
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  width:16px; height:16px;
  background:none; border:0; padding:0; cursor:pointer;
  margin-right:20px;
}
.burger span{ display:block; height:1.5px; width:100%; background:var(--cream); }

/* nav */
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{
  font-size:11px; font-weight:600;
  letter-spacing:.16em;
  color:var(--cream);
  transition:color .2s ease;
}
.nav a:hover{ color:var(--gold); }

/* direita */
.topbar__right{
  margin-left:auto;
  display:flex; align-items:center; gap:26px;
}
.social{ display:flex; align-items:center; gap:14px; }
.social a{ font-size:13px; color:var(--cream); transition:color .2s ease; }
.social a:hover{ color:var(--gold); }

.btn-outline{
  padding:11px 22px;
  border:1px solid rgba(212,166,42,.55);
  font-size:10px; font-weight:600; letter-spacing:.2em;
  color:var(--gold-light);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn-outline:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }

/* ---------- IMAGEM DO HERO (slot reservado) ---------- */
.hero__media{
  position:absolute;
  left:var(--media-left);
  width:var(--media-width);
  top:0;
  bottom:0;
  background:var(--black-3);
  overflow:hidden;
  z-index:1;
}
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 78%;
}
/* veu que escurece a borda direita para o titulo montar por cima */
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(5,5,5,.85) 0,
      rgba(5,5,5,.45) 9%,
      rgba(5,5,5,0) 20%),
    linear-gradient(to right,
      rgba(5,5,5,0) 46%,
      rgba(5,5,5,.42) 74%,
      rgba(5,5,5,.88) 94%,
      var(--black) 100%);
  pointer-events:none;
}

/* ---------- CONTEÚDO ---------- */
.hero__content{
  position:absolute;
  left:var(--content-left);
  right:4%;
  top:54%;
  transform:translateY(-50%);
  z-index:3;
}

.hero__title{
  position:relative;
  margin:0;
  padding-left:52px;
  font-family:'Cinzel',serif;
  font-weight:900;
  font-size:clamp(2rem,4.8vw,5.2rem);
  line-height:1.08;
  letter-spacing:.005em;
  color:var(--cream);
  text-transform:uppercase;
  text-shadow:0 2px 22px rgba(0,0,0,.65);
}
.hero__star{
  position:absolute;
  left:0; top:.32em;
  font-size:.42em;
  color:var(--gold);
}
.hero__line2{ display:block; }

/* endereço / horário */
.info{
  margin-top:38px;
  padding-left:52px;
  display:flex; flex-direction:column; gap:16px;
}
.info li{ position:relative; display:flex; align-items:flex-start; }
.info li i{
  position:absolute; left:-52px; top:2px;
  width:20px; text-align:center;
  font-size:13px; color:var(--gold);
}
.info div{ display:flex; flex-direction:column; gap:7px; }
.info span{
  font-size:11px; font-weight:500;
  letter-spacing:.2em;
  color:rgba(230,196,90,.82);
}
.info a{
  color:var(--gold-light);
  border-bottom:1px solid rgba(230,196,90,.5);
  padding-bottom:1px;
}
.info a:hover{ color:var(--white); }


/* ============================================================
   SEÇÃO 2 — RECIPES
   ============================================================ */
.recipes{
  --bw:   min(15.5vw, 29vh);  /* escala do copo (igual em todos os drinks) */
  --word: var(--bw);          /* escala da palavra gigante (por drink) */
  position:relative;
  min-height:100vh;
  background:var(--black-2);
  overflow:hidden;
}

/* ---------- ETIQUETA DA SECAO ---------- */
.section-tag{
  position:absolute;
  top:5%; left:3%;
  z-index:5;
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:700;
  font-size:clamp(1.5rem,2.9vw,3.2rem);
  line-height:1;
  letter-spacing:.005em;
  color:var(--gold);
}

/* ---------- TRILHO DE DRINKS ---------- */
.drinks{ position:absolute; inset:0; overflow:hidden; z-index:1; }
.drinks__track{
  display:flex;
  height:100%;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.drink{ flex:0 0 100%; position:relative; height:100%; }
.drink--gin{  --word: min(11.6vw, 22vh); }  /* ENCONTRA: 8 letras */
.drink--vila{ --word: min(9.9vw, 18.5vh); }  /* VILA MARAH: 10 caracteres */

/* ---------- PALAVRA GIGANTE + COPO ---------- */
.stage{
  position:absolute;
  top:56%; left:0; right:0;
  transform:translateY(-50%);
  z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.bigword{
  margin:0;
  display:flex; flex-direction:column; align-items:center;
  gap:calc(var(--word) * .07);
  font-family:'Cinzel',serif;
  font-weight:900;
  color:var(--gold);
  white-space:nowrap;
  text-align:center;
}
.bigword__kicker{
  align-self:flex-start;
  font-size:calc(var(--bw) * .14);
  line-height:.9;
  letter-spacing:.14em;
}
.bigword__main{
  font-size:var(--word);
  line-height:.8;
  letter-spacing:-.005em;
}
.glass{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  height:min(calc(var(--bw) * 3), 80vh);
  width:auto;
  aspect-ratio:1 / 1.668;   /* proporcao exata do recorte */
  z-index:3;
}
.glass img{ width:100%; height:100%; object-fit:contain; }

/* ---------- SETAS LATERAIS ---------- */
.arrow{
  position:absolute; top:44%;
  z-index:4;
  display:flex; flex-direction:column; gap:8px;
  font-size:9px; font-weight:500; letter-spacing:.16em;
  line-height:1.7;
  color:rgba(237,228,210,.75);
  transition:color .2s ease;
}
.arrow:hover{ color:var(--gold); }
.arrow__ico{ font-size:13px; color:var(--gold); }
.arrow[hidden]{ display:none; }
.arrow--prev{ left:3%; }
.arrow--next{ right:3%; text-align:right; align-items:flex-end; }

/* ---------- RODAPÉ DA SEÇÃO ---------- */
.recipes__foot{
  position:absolute;
  bottom:8%; left:14%; right:8%;
  z-index:4;
  display:flex; align-items:flex-start; gap:6%;
}

.foot__title{ display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.foot__title span{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(.95rem,1.35vw,1.2rem);
  font-weight:600;
  color:var(--cream);
}
.foot__title strong{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.35rem,2.1vw,1.95rem);
  color:var(--gold);
  line-height:1.1;
}

.ingredients{
  margin-left:auto;
  display:flex; gap:52px;
}
.ingredients ul{ display:flex; flex-direction:column; gap:9px; }
.ingredients li{
  position:relative;
  padding-left:14px;
  font-size:10.5px; font-weight:400; letter-spacing:.04em;
  color:rgba(237,228,210,.8);
}
.ingredients li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold);
}




/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1100px){
  .nav{ gap:18px; }
  .nav a{ font-size:10px; letter-spacing:.12em; }
  .topbar__right{ gap:16px; }
  .social{ gap:11px; }
}

@media (max-width:900px){
  :root{ --header-h:76px; }

  .topbar{ padding:0 18px; }
  .brand{ height:42px; margin-right:16px; }
  .brand__mark{ font-size:14px; }
  .brand__name{ font-size:8px; max-width:58px; }
  .brand__tag{ font-size:5px; }
  .nav{ display:none; }
  .btn-outline{ display:none; }

  .hero{ min-height:auto; padding-bottom:64px; }
  .hero__media{
    position:relative; left:0; width:100%;
    top:0; bottom:auto;
    height:46vh;
    margin-top:var(--header-h);
  }
  .hero__content{
    position:relative; left:0; right:0; top:0;
    transform:none;
    padding:38px 22px 0;
  }
  .hero__title{ padding-left:38px; }
  .info{ padding-left:38px; margin-top:28px; }
  .info li i{ left:-38px; }

  .recipes{ min-height:auto; padding:96px 22px 72px; }
  .drinks{ position:relative; inset:auto; overflow:visible; }
  .drink{ height:auto; }
  .drink + .drink{ margin-top:64px; padding-top:56px; border-top:1px solid rgba(111,112,115,.25); }
  .stage{ position:relative; top:0; transform:none; margin-bottom:34px; }
  .bigword__main{ font-size:20vw; }
  .bigword__kicker{ font-size:7vw; }
  .glass{ position:relative; left:0; top:auto; transform:none; width:62%; height:auto; aspect-ratio:1 / 1.668; margin:26px auto 0; }
  .arrow{ display:none; }
  .recipes__foot{
    position:relative; bottom:0; left:0; right:0;
    flex-direction:column; gap:28px;
  }
  .ingredients{ margin-left:0; gap:30px; flex-wrap:wrap; }
}


/* ============================================================
   SEÇÃO 3 — CATÁLOGO EM CARROSSEL
   ============================================================ */
.catalog{
  --cgap:24px;
  position:relative;
  padding:clamp(58px,7vw,100px) 4%;
  background:radial-gradient(125% 145% at 12% 92%, #171717 0%, #0e0e0e 55%, #050505 100%);
  overflow:hidden;
}

/* ---------- CABEÇALHO ---------- */
.catalog__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
  margin-bottom:46px;
}

.catalog__title{
  margin:0;
  font-family:'Cinzel',serif;
  font-weight:900;
  font-size:clamp(1.9rem,4vw,3.4rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--cream);
  text-transform:uppercase;
}
.catalog__title span{ color:var(--gold); }

.catalog__sub{
  margin:16px 0 0;
  max-width:520px;
  font-size:11.5px; font-weight:400;
  line-height:1.75; letter-spacing:.01em;
  color:rgba(237,228,210,.5);
}

.catalog__nav{
  display:flex; align-items:center; gap:12px;
  flex:0 0 auto;
  padding-bottom:2px;
}
.catalog__all{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px;
  border:1px solid rgba(212,166,42,.55);
  font-size:11px; font-weight:600; letter-spacing:.18em;
  color:var(--gold-light);
  white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.catalog__all i{ font-size:10px; }
.catalog__all:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--black);
}

/* ---------- TRILHO ---------- */
.catalog__viewport{ overflow:hidden; }

.catalog__track{
  display:flex;
  gap:var(--cgap);
  cursor:grab;
  user-select:none;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  touch-action:pan-y;
}
.catalog__track.is-dragging{ cursor:grabbing; }

/* ---------- CARD ---------- */
.card{
  flex:0 0 calc((100% - var(--cgap) * 2) / 3);
  min-width:0;
  display:flex; flex-direction:column;
}

.card__media{
  position:relative;
  aspect-ratio:10 / 7;
  background:var(--black-3);
  overflow:hidden;
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card__media img{ transform:scale(1.05); }

.card__title{
  margin:22px 0 0;
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.05em;
  line-height:1.3;
  color:var(--cream);
  text-transform:uppercase;
}
.card__text{
  margin:12px 0 0;
  font-size:11.5px; font-weight:400;
  line-height:1.75; letter-spacing:.01em;
  color:rgba(237,228,210,.5);
}
.card__link{
  align-self:flex-start;
  margin-top:auto;
  padding-top:18px;
  font-size:10.5px; font-weight:600; letter-spacing:.18em;
  color:var(--cream);
  transition:color .2s ease;
}
.card__link:hover{ color:var(--gold); }

/* ---------- RESPONSIVO ---------- */
@media (max-width:1024px){
  .card{ flex:0 0 calc((100% - var(--cgap)) / 2); }
}

@media (max-width:640px){
  .catalog{ --cgap:18px; }
  .catalog__head{ flex-direction:column; align-items:flex-start; gap:26px; margin-bottom:34px; }
  .card{ flex:0 0 100%; }
}


/* ============================================================
   SEÇÃO 4 — CHAMADA
   ============================================================ */
.callout{
  position:relative;
  background:var(--black);
  padding:clamp(72px,9vw,140px) 2.5%;
  overflow:hidden;
  min-height:72vh;
}

.callout__grid{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:0;
}

/* copo ao centro */
.callout__media{
  position:absolute;
  right:-3%;
  bottom:5%;
  z-index:3;
  margin:0;
  transform:rotate(-14deg);      /* inclinado, como se estivesse entornando */
  transform-origin:center;
  pointer-events:none;
}
.callout__media img{
  height:clamp(260px,30vw,580px);
  width:auto;
  display:block;
}

/* coluna da direita, a definir */
.callout__side{
  display:flex; justify-content:flex-end; align-self:start;
  padding-right:clamp(110px,22vw,440px);   /* deixa a faixa da direita livre para o copo */
}

/* ---------- CARD DE LOCALIZACAO ---------- */
.mapcard{
  width:100%; max-width:clamp(300px,26vw,480px);
  display:flex; flex-direction:column;
}
.mapcard__title{
  font-family:'Cormorant Garamond',serif;
  font-style:italic; font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.4rem);
  color:var(--gold);
  margin-bottom:14px;
}

.mapcard__frame{
  position:relative;
  aspect-ratio:16 / 10;
  border:1px solid rgba(212,166,42,.35);
  background:var(--black-3);
  overflow:hidden;
  transition:border-color .25s ease;
}
.mapcard__frame iframe{
  width:100%; height:100%;
  border:0;
  display:block;
  pointer-events:none;                       /* o clique e do card, nao do mapa */
}
.mapcard__link{ position:absolute; inset:0; }
.mapcard:hover .mapcard__frame{ border-color:var(--gold); }

.mapcard__addr{
  display:flex; align-items:flex-start; gap:10px;
  margin:16px 0 0;
  font-size:11px; font-weight:500;
  line-height:1.7; letter-spacing:.08em;
  color:rgba(237,228,210,.7);
}
.mapcard__addr i{ font-size:12px; color:var(--gold); padding-top:3px; }

.mapcard__cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  font-size:10px; font-weight:600; letter-spacing:.2em;
  color:var(--gold);
  transition:gap .25s ease;
}
.mapcard:hover .mapcard__cta{ gap:14px; }

.callout__title{
  position:relative; z-index:1;
  margin:0;
  display:flex; flex-direction:column; align-items:flex-start;
  font-size:clamp(1.15rem, 4.1vw, 5.6rem);   /* base = corpo das maiusculas */
  line-height:.88;
  transform:rotate(-3deg);
  transform-origin:left center;
}

/* linhas em caixa alta: display serifada, creme */
.callout__title span{
  font-family:'Cinzel',serif;
  font-weight:900;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--cream);
}

/* linhas de ligacao: italico manuscrito, dourado, recuadas */
.callout__title em{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size:.6em;
  line-height:1;
  letter-spacing:.01em;
  color:var(--gold);
  text-transform:none;
}
.callout__title em:nth-of-type(1){
  align-self:stretch;
  display:flex; align-items:center; gap:.45em;
  margin-bottom:-.06em;
}
.callout__title em:nth-of-type(1)::after{
  content:"";
  flex:1; height:1px;
  background:rgba(212,166,42,.55);
}
.callout__title em:nth-of-type(2){ margin:-.02em 0 -.1em; }

@media (max-width:900px){
  .callout__grid{ grid-template-columns:1fr; gap:40px; }
  .callout__title{ font-size:clamp(1.6rem, 8.5vw, 3.4rem); }
  .callout__media{ position:relative; right:auto; bottom:auto; transform:none; margin:0; }
  .callout__media img{ height:min(46vh,340px); margin:0 auto; }
  .callout__side{ justify-content:flex-start; padding-right:0; }
  .mapcard{ max-width:none; }
}

/* ornamento de cevada entre fios, fechando o bloco */
.callout__title .ornament{
  align-self:stretch;
  display:flex; align-items:center; gap:.5em;
  margin-top:.3em;
  font-size:.3em;
  color:var(--gold);
}
.callout__title .ornament::before,
.callout__title .ornament::after{
  content:"";
  flex:1; height:1px;
  background:rgba(212,166,42,.55);
}

/* ---------- BOTOES DE PEDIDO ---------- */
.callout__left{ position:relative; z-index:2; }

.order{
  display:flex; align-items:center;
  gap:clamp(16px,1.6vw,26px);
  margin-top:clamp(30px,3.2vw,54px);
}
.order__label{
  font-size:11px; font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}
.order__links{ display:flex; align-items:center; gap:14px; }

.ordbtn{
  position:relative;
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:50%;
  overflow:hidden;
  background:var(--black-3);
  border:1px solid rgba(212,166,42,.4);
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.ordbtn img{ width:100%; height:100%; object-fit:cover; }
.ordbtn img + .ordbtn__fb{ display:none; }
.ordbtn__fb{
  font-size:9px; font-weight:600; letter-spacing:.1em;
  color:rgba(212,166,42,.75);
}
.ordbtn:hover{ border-color:var(--gold); transform:translateY(-3px); }

.ordbtn--wa i{ font-size:25px; color:var(--gold); transition:color .25s ease; }
.ordbtn--wa:hover{ background:var(--gold); }
.ordbtn--wa:hover i{ color:var(--black); }

@media (max-width:900px){
  .order{ flex-wrap:wrap; gap:16px; }
}

@media (max-width:900px){
  .section-tag{ position:relative; top:0; left:0; display:block; margin-bottom:22px; }
}


/* ============================================================
   RODAPÉ
   ============================================================ */
.footer{
  background:var(--black);
  padding:clamp(48px,5vw,76px) 4% clamp(30px,3vw,44px);
}

/* redes entre fios */
.footer__social{
  display:flex; align-items:center;
  gap:clamp(18px,2.5vw,34px);
  margin-bottom:clamp(32px,3.5vw,52px);
}
.footer__rule{
  flex:1; height:1px;
  background:rgba(111,112,115,.4);
}
.footer__social .social{ gap:18px; }
.footer__social .social a{ font-size:15px; }

/* links em volta da logo */
.footer__nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(24px,3vw,56px);
}
.footer__links{
  display:flex; align-items:center;
  justify-content:space-around;
  gap:clamp(14px,2vw,30px);
}
.footer__links a{
  font-size:11px; font-weight:600;
  letter-spacing:.16em;
  color:var(--cream);
  white-space:nowrap;
  transition:color .2s ease;
}
.footer__links a:hover{ color:var(--gold); }

.footer__logo{ display:block; }
.footer__logo img{
  height:clamp(38px,3.6vw,54px);
  width:auto;
}

/* linha legal */
.footer__legal{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 22px;
  margin:clamp(34px,3.5vw,54px) 0 0;
  padding-top:clamp(20px,2vw,28px);
  border-top:1px solid rgba(111,112,115,.22);
  font-size:10px; letter-spacing:.1em;
  color:var(--gray);
  text-align:center;
}
.footer__legal a{ color:rgba(237,228,210,.55); transition:color .2s ease; }
.footer__legal a:hover{ color:var(--gold); }

@media (max-width:900px){
  .footer__nav{ grid-template-columns:1fr; justify-items:center; gap:28px; }
  .footer__nav .footer__links{ flex-wrap:wrap; justify-content:center; }
  .footer__logo{ order:-1; }
}


/* ============================================================
   ANIMAÇÕES DE ENTRADA — HERO
   ============================================================ */
@keyframes vm-letra{
  from{ opacity:0; transform:translateY(.5em) scale(.92); filter:blur(7px); }
  to  { opacity:1; transform:none;                        filter:blur(0); }
}
@keyframes vm-sobe{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@keyframes vm-desce{
  from{ opacity:0; transform:translateY(-14px); }
  to  { opacity:1; transform:none; }
}
@keyframes vm-estrela{
  from{ opacity:0; transform:scale(.3) rotate(-90deg); }
  to  { opacity:1; transform:none; }
}
@keyframes vm-cortina{
  from{ clip-path:inset(100% 0 0 0); transform:scale(1.07); }
  to  { clip-path:inset(0 0 0 0);    transform:scale(1); }
}

/* letra a letra */
.hero__title .ch{
  display:inline-block;
  opacity:0;
  animation:vm-letra .85s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i) * 42ms + 420ms);
  will-change:transform,opacity,filter;
}

.hero__media{
  animation:vm-cortina 1.25s cubic-bezier(.22,.61,.36,1) both;
}
.topbar{
  opacity:0;
  animation:vm-aparece .8s ease .15s forwards;   /* só opacidade: transform aqui
     transformaria o header no bloco de referência do menu em position:fixed */
}
@keyframes vm-aparece{ from{ opacity:0; } to{ opacity:1; } }
.hero__star{
  opacity:0;
  animation:vm-estrela .7s cubic-bezier(.34,1.4,.64,1) .38s forwards;
}
.info li{
  opacity:0;
  animation:vm-sobe .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.info li:nth-child(1){ animation-delay:1.20s; }
.info li:nth-child(2){ animation-delay:1.32s; }

/* sem animação para quem pediu movimento reduzido */
@media (prefers-reduced-motion: reduce){
  .hero__title .ch,
  .hero__media,
  .topbar,
  .hero__star,
  .info li{ animation:none; opacity:1; clip-path:none; transform:none; filter:none; }
}


/* ============================================================
   ANIMAÇÕES DE ENTRADA — SEÇÃO DE DRINKS
   ============================================================ */
@keyframes vm-taca{
  from{ opacity:0; transform:translate(-50%,-50%) translateY(46px) scale(.93); }
  to  { opacity:1; transform:translate(-50%,-50%); }
}

/* estado inicial (a classe .anim só existe com o JS ativo) */
.recipes.anim .drink .glass,
.recipes.anim .drink .bigword .ch,
.recipes.anim .drink .recipes__foot{ opacity:0; }
.recipes.anim .section-tag{ opacity:0; }

/* 1) a taça entra */
.recipes.anim .drink.is-live .glass{
  animation:vm-taca 1.05s cubic-bezier(.22,.61,.36,1) forwards;
}

/* 2) depois as letras, uma a uma */
.recipes.anim .drink.is-live .bigword .ch{
  display:inline-block;
  animation:vm-letra .8s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i) * 40ms + 620ms);
  will-change:transform,opacity,filter;
}

/* 3) por último a receita */
.recipes.anim .drink.is-live .recipes__foot{
  animation:vm-sobe .85s cubic-bezier(.22,.61,.36,1) 1.25s forwards;
}

/* a etiqueta lateral entra com a seção */
.recipes.anim.is-in .section-tag{
  animation:vm-sobe .8s cubic-bezier(.22,.61,.36,1) .1s forwards;
}

@media (prefers-reduced-motion: reduce){
  .recipes.anim .drink .glass,
  .recipes.anim .drink .bigword .ch,
  .recipes.anim .drink .recipes__foot,
  .recipes.anim .section-tag{ animation:none; opacity:1; }
}


/* ============================================================
   ANIMAÇÕES DE ENTRADA — SEÇÃO DO CARDÁPIO
   ============================================================ */
@keyframes vm-cortina-card{
  from{ clip-path:inset(100% 0 0 0); }
  to  { clip-path:inset(0 0 0 0); }
}
@keyframes vm-zoom{
  from{ transform:scale(1.14); }
  to  { transform:scale(1); }
}

/* estado inicial */
.catalog.anim .catalog__title .ch,
.catalog.anim .catalog__sub,
.catalog.anim .catalog__all,
.catalog.anim .card{ opacity:0; }
.catalog.anim .card__media{ clip-path:inset(100% 0 0 0); }

/* 1) o título, letra a letra */
.catalog.anim.is-in .catalog__title .ch{
  display:inline-block;
  animation:vm-letra .75s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i) * 32ms + 100ms);
  will-change:transform,opacity,filter;
}

/* 2) linha de apoio e botão */
.catalog.anim.is-in .catalog__sub{ animation:vm-sobe .8s cubic-bezier(.22,.61,.36,1) .58s forwards; }
.catalog.anim.is-in .catalog__all{ animation:vm-sobe .8s cubic-bezier(.22,.61,.36,1) .70s forwards; }

/* 3) os pratos sobem em cascata */
.catalog.anim.is-in .card{
  animation:vm-sobe .9s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:.95s;
}
.catalog.anim.is-in .card:nth-child(1){ animation-delay:.78s; }
.catalog.anim.is-in .card:nth-child(2){ animation-delay:.90s; }
.catalog.anim.is-in .card:nth-child(3){ animation-delay:1.02s; }

/* 4) a foto se abre de baixo para cima, com o zoom saindo */
.catalog.anim.is-in .card__media{
  animation:vm-cortina-card 1.05s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:.86s;
}
.catalog.anim.is-in .card:nth-child(2) .card__media{ animation-delay:.98s; }
.catalog.anim.is-in .card:nth-child(3) .card__media{ animation-delay:1.10s; }

.catalog.anim.is-in .card__media img{
  animation:vm-zoom 1.5s cubic-bezier(.22,.61,.36,1) .86s backwards;
}

@media (prefers-reduced-motion: reduce){
  .catalog.anim .catalog__title .ch,
  .catalog.anim .catalog__sub,
  .catalog.anim .catalog__all,
  .catalog.anim .card{ animation:none; opacity:1; }
  .catalog.anim .card__media{ animation:none; clip-path:none; }
  .catalog.anim .card__media img{ animation:none; }
}


/* ============================================================
   ANIMAÇÕES DE ENTRADA — SEÇÃO FINAL
   ============================================================ */
@keyframes vm-chopp{
  from{ opacity:0; transform:translateX(110px) rotate(-32deg); }
  to  { opacity:1; transform:rotate(-14deg); }
}
@keyframes vm-fio{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
@keyframes vm-pop{
  from{ opacity:0; transform:scale(.55); }
  to  { opacity:1; transform:none; }
}
@keyframes vm-cortina-mapa{
  from{ clip-path:inset(0 0 100% 0); }
  to  { clip-path:inset(0 0 0 0); }
}

/* ---------- estado inicial ---------- */
.callout.anim .callout__media,
.callout.anim .callout__title em,
.callout.anim .callout__title .ch,
.callout.anim .ornament,
.callout.anim .order__label,
.callout.anim .order__links li,
.callout.anim .mapcard__title,
.callout.anim .mapcard__addr,
.callout.anim .mapcard__cta{ opacity:0; }

.callout.anim .callout__title em:nth-of-type(1)::after,
.callout.anim .ornament::before,
.callout.anim .ornament::after{ transform:scaleX(0); }

.callout.anim .mapcard__frame{ clip-path:inset(0 0 100% 0); }

/* ---------- 1) o chopp entra pela borda, endireitando ---------- */
.callout.anim.is-in .callout__media{
  animation:vm-chopp 1.3s cubic-bezier(.2,.85,.3,1) forwards;
}

/* ---------- 2) a frase se monta linha a linha ---------- */
.callout.anim.is-in .callout__title em{
  animation:vm-sobe .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.callout.anim.is-in .callout__title em:nth-of-type(1){ animation-delay:.26s; }
.callout.anim.is-in .callout__title em:nth-of-type(2){ animation-delay:.86s; }

/* o fio dourado se desenha a partir do "Faça seu" */
.callout.anim.is-in .callout__title em:nth-of-type(1)::after{
  transform-origin:left center;
  animation:vm-fio .9s cubic-bezier(.22,.61,.36,1) .42s forwards;
}

/* as maiúsculas, letra a letra, uma linha depois da outra */
.callout.anim.is-in .callout__title .ch{
  display:inline-block;
  animation:vm-letra .78s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i) * 30ms + var(--linha) * 600ms + 440ms);
  will-change:transform,opacity,filter;
}

/* ---------- 3) o ornamento fecha o bloco ---------- */
.callout.anim.is-in .ornament{
  animation:vm-pop .6s cubic-bezier(.34,1.4,.64,1) 1.5s forwards;
}
.callout.anim.is-in .ornament::before{
  transform-origin:right center;
  animation:vm-fio .8s cubic-bezier(.22,.61,.36,1) 1.56s forwards;
}
.callout.anim.is-in .ornament::after{
  transform-origin:left center;
  animation:vm-fio .8s cubic-bezier(.22,.61,.36,1) 1.56s forwards;
}

/* ---------- 4) os botões de pedido pipocam ---------- */
.callout.anim.is-in .order__label{
  animation:vm-sobe .7s cubic-bezier(.22,.61,.36,1) 1.66s forwards;
}
.callout.anim.is-in .order__links li{
  animation:vm-pop .6s cubic-bezier(.34,1.5,.64,1) forwards;
}
.callout.anim.is-in .order__links li:nth-child(1){ animation-delay:1.78s; }
.callout.anim.is-in .order__links li:nth-child(2){ animation-delay:1.88s; }
.callout.anim.is-in .order__links li:nth-child(3){ animation-delay:1.98s; }

/* ---------- 5) o mapa sobe em paralelo ---------- */
.callout.anim.is-in .mapcard__title{
  animation:vm-sobe .8s cubic-bezier(.22,.61,.36,1) .45s forwards;
}
.callout.anim.is-in .mapcard__frame{
  animation:vm-cortina-mapa 1.1s cubic-bezier(.22,.61,.36,1) .58s forwards;
}
.callout.anim.is-in .mapcard__addr{
  animation:vm-sobe .8s cubic-bezier(.22,.61,.36,1) 1.05s forwards;
}
.callout.anim.is-in .mapcard__cta{
  animation:vm-sobe .8s cubic-bezier(.22,.61,.36,1) 1.18s forwards;
}

@media (prefers-reduced-motion: reduce){
  .callout.anim .callout__media,
  .callout.anim .callout__title em,
  .callout.anim .callout__title .ch,
  .callout.anim .ornament,
  .callout.anim .order__label,
  .callout.anim .order__links li,
  .callout.anim .mapcard__title,
  .callout.anim .mapcard__addr,
  .callout.anim .mapcard__cta{ animation:none; opacity:1; }
  .callout.anim .callout__title em:nth-of-type(1)::after,
  .callout.anim .ornament::before,
  .callout.anim .ornament::after{ animation:none; transform:none; }
  .callout.anim .mapcard__frame{ animation:none; clip-path:none; }
}

/* ---------- MARCA D'ÁGUA DO HERO ---------- */
.hero__mark{
  position:absolute;
  right:2%;
  top:50%;
  transform:translateY(-50%);
  z-index:0;
  width:min(44vw,620px);
  height:auto;
  opacity:.055;
  pointer-events:none;
  user-select:none;
  animation:vm-marca 1.8s cubic-bezier(.22,.61,.36,1) .55s backwards;
}
@keyframes vm-marca{
  from{ opacity:0; transform:translateY(calc(-50% + 32px)) scale(.96); }
  to  { opacity:.055; transform:translateY(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .hero__mark{ animation:none; opacity:.055; }
}
@media (max-width:900px){
  .hero__mark{
    width:52vw; right:-6%; top:16%;
    transform:none; opacity:.045;
    animation:vm-marca-mob 1.8s cubic-bezier(.22,.61,.36,1) .55s backwards;
  }
}

@keyframes vm-marca-mob{
  from{ opacity:0; transform:translateY(28px) scale(.96); }
  to  { opacity:.045; transform:none; }
}


/* ============================================================
   REVISÃO GERAL PARA CELULAR
   (vem por último de propósito: ajusta o que ficou do desktop)
   ============================================================ */

/* no desktop o painel é só um trilho: nav à esquerda, ações à direita */
.topbar__panel{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  min-width:0;
}

@media (max-width:900px){

  /* ---------- MENU ---------- */
  .topbar{ padding:0 20px; align-items:center; }
  .burger{
    margin-left:auto; margin-right:0;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center; gap:0;
    position:relative; z-index:70;
  }
  .burger span{
    position:absolute;
    width:22px; height:1.5px;
    background:var(--cream);
    transition:transform .3s ease, opacity .2s ease;
  }
  .burger span:nth-child(1){ transform:translateY(-6px); }
  .burger span:nth-child(3){ transform:translateY(6px); }
  body.menu-aberto .burger span:nth-child(1){ transform:rotate(45deg); }
  body.menu-aberto .burger span:nth-child(2){ opacity:0; }
  body.menu-aberto .burger span:nth-child(3){ transform:rotate(-45deg); }

  .topbar .topbar__panel{
    position:fixed;
    inset:0;
    width:100vw; height:100vh; height:100svh;
    flex:none; min-width:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:44px;
    padding:90px 24px 40px;
    background:rgba(5,5,5,.985);
    z-index:60;
    opacity:0; visibility:hidden;
    transition:opacity .32s ease, visibility .32s;
  }
  body.menu-aberto{ overflow:hidden; }
  body.menu-aberto .topbar .topbar__panel{ opacity:1; visibility:visible; }

  .nav{ display:flex; flex-direction:column; align-items:center; gap:28px; }
  .nav a{ font-size:14px; letter-spacing:.24em; padding:4px 8px; }

  .topbar__right{ margin-left:0; flex-direction:column; gap:32px; }
  .social{ gap:26px; }
  .social a{ font-size:22px; padding:6px; }          /* alvo de toque maior */
  .btn-outline{ display:inline-flex; padding:16px 34px; font-size:11px; }

  /* ---------- HERO ---------- */
  .hero__media{
    height:56vh;
    margin-top:0;              /* sobe até o topo: o header flutua sobre a foto */
  }
  .hero__media::after{                                /* véu passa a ser embaixo */
    background:linear-gradient(to bottom,
      rgba(5,5,5,.8) 0, rgba(5,5,5,.25) 16%, rgba(5,5,5,0) 42%,
      rgba(5,5,5,.55) 88%, var(--black) 100%);
  }
  .hero__content{ padding:0 22px 0; margin-top:-17vh; }
  .hero__title{
    padding-left:30px;
    font-size:clamp(1.9rem,10.5vw,3.4rem);
    line-height:1.05;
  }
  .hero__star{ font-size:.4em; top:.3em; }
  .info{ padding-left:30px; margin-top:26px; }
  .info li i{ left:-30px; }
  .info span{ font-size:10.5px; letter-spacing:.16em; }

  .hero__mark{
    right:-16%; top:auto; bottom:4%;
    transform:none;
    width:70vw; opacity:.05;
  }

  /* ---------- DRINKS ---------- */
  .recipes{ padding:28px 22px 76px; }
  .section-tag{ font-size:1.55rem; margin-bottom:20px; }

  /* cada drink com a escala que cabe na largura do celular */
  .recipes .drink        { --word:18vw; }
  .recipes .drink--gin   { --word:13.5vw; }
  .recipes .drink--vila  { --word:11.5vw; }
  .bigword__main{ font-size:var(--word); }
  .bigword__kicker{ font-size:calc(var(--word) * .34); letter-spacing:.12em; line-height:1.1; }
  .bigword{ gap:calc(var(--word) * .12); }

  /* palavra atrás, taça na frente — mesma composição do desktop */
  .stage{ margin-bottom:0; }
  .glass{
    width:100%; height:44vh;
    aspect-ratio:auto;
    margin:calc(var(--word) * -.8) auto 0;   /* sobe até cobrir o miolo da palavra */
  }
  /* "VILA MARAH" é a palavra mais longa: a taça encosta menos, para ela ser lida */
  .drink--vila .glass{ margin-top:calc(var(--word) * -.25); }

  /* no celular fica só o nome do drink */
  .recipes__foot{ gap:0; margin-top:34px; }
  .recipes__foot .foot__title span,
  .recipes__foot .ingredients{ display:none; }
  .foot__title strong{ font-size:1.75rem; }

  /* ---------- CARDÁPIO ---------- */
  .catalog{ padding:80px 22px; }
  .catalog__head{ margin-bottom:30px; }
  .catalog__all{ padding:15px 24px; }
  .card__title{ font-size:14px; }
  .card__text{ font-size:12px; }
  .card__link{ padding-top:16px; font-size:11px; }

  /* ---------- CHAMADA FINAL ---------- */
  .callout{ padding:74px 22px 44px; min-height:auto; }
  .callout__title{
    font-size:clamp(1.5rem,8vw,3rem);
    transform:rotate(-2deg);
  }
  .order{ margin-top:32px; gap:18px; }
  .ordbtn{ width:48px; height:48px; }
  .ordbtn--wa i{ font-size:22px; }
  .mapcard__frame{ aspect-ratio:4 / 3; }
  .mapcard__addr{ font-size:11.5px; }

  /* ---------- RODAPÉ ---------- */
  .footer{ padding:38px 22px 30px; }
  .footer__social{ gap:16px; margin-bottom:28px; }
  .footer__social .social{ gap:22px; }
  .footer__social .social a{ font-size:19px; padding:6px; }
  .footer__logo img{ height:46px; }
  .footer__links a{ font-size:11.5px; padding:4px 2px; }
  .footer__legal{ font-size:10.5px; gap:8px 16px; }
}

@media (max-width:420px){
  .hero__title{ font-size:9.8vw; }
  .recipes .drink        { --word:17vw; }
  .recipes .drink--gin   { --word:12.6vw; }
  .recipes .drink--vila  { --word:10.6vw; }
  .order__links{ gap:12px; }
}


/* ============================================================
   CORREÇÃO: animações que carregavam o posicionamento do desktop
   Um "animation-fill-mode: forwards" vence a declaração normal do CSS,
   então o transform de centralização do desktop continuava valendo
   no celular, mesmo com transform:none na media query.
   ============================================================ */
@keyframes vm-taca-mob{
  from{ opacity:0; transform:translateY(42px) scale(.94); }
  to  { opacity:1; transform:none; }
}
@keyframes vm-chopp-mob{
  from{ opacity:0; transform:translateY(38px) scale(.95); }
  to  { opacity:1; transform:none; }
}

@media (max-width:900px){
  /* taça dos drinks: entra subindo, sem o translate(-50%,-50%) */
  .recipes.anim .drink.is-live .glass{
    animation:vm-taca-mob 1s cubic-bezier(.22,.61,.36,1) forwards;
  }
  /* chopp da seção final: entra subindo, sem a inclinação de -14° */
  .callout.anim.is-in .callout__media{
    animation:vm-chopp-mob 1s cubic-bezier(.22,.61,.36,1) forwards;
  }
}


/* ============================================================
   CELULAR — drinks voltam a ser carrossel (arraste + setas)
   ============================================================ */
@media (max-width:900px){
  .drinks{ position:relative; inset:auto; overflow:hidden; }
  .drinks__track{
    display:flex;
    height:auto;
    align-items:flex-start;
    transform:none;                 /* sem !important: o JS assume o controle */
    touch-action:pan-y;             /* arraste lateral vai para o JS, rolagem vertical continua */
  }
  .drink{ flex:0 0 100%; height:auto; min-width:0; }
  .drink + .drink{ margin-top:0; padding-top:0; border-top:0; }

  /* setas nas bordas, na altura da taça */
  .arrow{
    display:flex;
    top:44%;
    gap:0;
  }
  .arrow--prev{ left:0; }
  .arrow--next{ right:0; }
  .arrow__label{ display:none; }
  .arrow__ico{
    width:44px; height:44px;                 /* área de toque, sem moldura visível */
    display:grid; place-items:center;
    font-size:26px;
    color:var(--gold);
    text-shadow:0 1px 10px rgba(0,0,0,.8);   /* legível sobre a taça */
  }
}


/* ============================================================
   CELULAR — chopp vira fundo da seção final
   ============================================================ */
@keyframes vm-chopp-fundo{
  from{ opacity:0;   transform:translateY(-50%) translateX(60px) rotate(-28deg); }
  to  { opacity:.17; transform:translateY(-50%) rotate(-14deg); }
}

@media (max-width:900px){
  .callout__media{
    position:absolute;
    right:-20%;
    top:42%;
    bottom:auto;
    margin:0;
    z-index:0;
    opacity:.17;
    transform:translateY(-50%) rotate(-14deg);
    pointer-events:none;
  }
  .callout__media img{
    height:min(64vh,540px);
    width:auto;
    margin:0;
  }

  /* conteúdo sempre por cima do fundo */
  .callout__left{ z-index:2; }
  .callout__side{ position:relative; z-index:2; }

  .callout.anim.is-in .callout__media{
    animation:vm-chopp-fundo 1.3s cubic-bezier(.2,.85,.3,1) forwards;
  }
}


/* ============================================================
   CELULAR — hero: sem o escudo atrás, foto dissolvendo no preto
   ============================================================ */
@media (max-width:900px){
  .hero__mark{ display:none; }

  /* a foto perde o corte seco: a base desfoca e some no preto */
  .hero__media::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:42%;
    z-index:1;
    pointer-events:none;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 72%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 72%);
  }
  .hero__media::after{
    z-index:2;
    background:linear-gradient(to bottom,
      rgba(5,5,5,.85) 0,
      rgba(5,5,5,.22) 13%,
      rgba(5,5,5,0)   30%,
      rgba(5,5,5,.42) 54%,
      rgba(5,5,5,.86) 76%,
      var(--black)    94%);
  }
}


/* ============================================================
   CELULAR — uma seção por tela
   svh em vez de vh: desconta a barra do navegador do aparelho
   ============================================================ */
@media (max-width:900px){

  .hero, .recipes, .catalog, .callout{
    min-height:100vh;
    min-height:100svh;
  }

  /* ---------- HERO: foto ocupa a tela inteira, texto por cima ---------- */
  .hero{
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 0 9vh;
  }
  .hero__media{
    position:absolute; inset:0;
    height:auto; width:auto;
    margin:0;
    z-index:1;
  }
  .hero__media::before{ height:58%; }
  .hero__media::after{
    background:linear-gradient(to bottom,
      rgba(5,5,5,.85) 0,
      rgba(5,5,5,.2)  12%,
      rgba(5,5,5,0)   30%,
      rgba(5,5,5,.5)  52%,
      rgba(5,5,5,.9)  76%,
      var(--black)    100%);
  }
  .hero__content{
    position:relative; z-index:3;
    margin-top:0;
    padding:0 22px;
  }

  /* ---------- demais seções: conteúdo centrado na tela ---------- */
  .recipes, .catalog, .callout{
    display:flex; flex-direction:column; justify-content:center;
  }
  .recipes{ padding:80px 22px 60px; }
  .catalog{ padding:60px 22px; }
  .callout{ padding:60px 22px 44px; }
}


/* ============================================================
   CELULAR — drinks preenchem a tela: a taça absorve a sobra
   ============================================================ */
@media (max-width:900px){
  /* altura definida (não só mínima): sem isso a taça não tem contra o que
     se ajustar e é o tamanho natural dela que estica a seção */
  .recipes{
    height:100vh;
    height:100svh;
    justify-content:flex-start;
    padding:30px 22px 46px;
  }

  .drinks{ flex:1 1 auto; min-height:0; }
  .drinks__track{ height:100%; align-items:stretch; }

  .drink{
    display:flex; flex-direction:column;
    min-height:0;
  }
  .stage{ flex:0 0 auto; }

  /* a taça cresce ou encolhe conforme o aparelho, sem deformar */
  .glass{
    flex:1 1 0;                    /* ocupa exatamente a sobra, sem impor tamanho */
    height:auto; min-height:110px;
    margin:calc(var(--word) * -.8) auto 0;
  }
  .drink--vila .glass{ margin-top:calc(var(--word) * -.25); }
  .glass img{ height:100%; width:100%; object-fit:contain; }

  .recipes__foot{ flex:0 0 auto; margin-top:22px; }
}


/* ============================================================
   CELULAR — escudo no vão superior do hero
   ============================================================ */
@keyframes vm-escudo-mob{
  from{ opacity:0;  transform:translateX(-50%) translateY(26px) scale(.94); }
  to  { opacity:.2; transform:translateX(-50%); }
}

@media (max-width:900px){
  .hero__mark{
    display:block;
    left:50%; right:auto;
    top:15%; bottom:auto;
    transform:translateX(-50%);
    width:46vw;
    opacity:.2;
    z-index:2;                  /* sobre a foto, sob o texto */
    animation:vm-escudo-mob 1.5s cubic-bezier(.22,.61,.36,1) .5s backwards;
  }
}