/* ==========================================================================
   MOOGATOOGA COCO BEACH — camada de movimento
   Versão 4.3

   Tudo o que anima e não existia na 4.2 está aqui e em assets/js/motion.js.
   Para voltar ao comportamento da 4.2, basta apagar no index.html as duas
   linhas que carregam motion.css e motion.js.

   Regras da casa
   - Tudo fica dentro de html.motion. Essa classe é ligada por um script de
     uma linha no <head> e NÃO é ligada para quem ativou "reduzir movimento"
     no sistema (acessibilidade). Sem ela, o site fica estático como na 4.2.
   - As animações usam as propriedades translate, scale, opacity e
     clip-path — nunca transform. Assim não brigam com os efeitos de hover
     que já existiam (todos em transform).
   - Uma curva só para quase tudo (--m-ease): chega rápido e assenta devagar,
     como onda na areia. É ela que dá unidade ao movimento do site.

   Organização do arquivo:
   01. Tokens de movimento
   02. Vocabulário (keyframes)
   03. Revelação ao rolar
   04. Header e barra de progresso
   05. Hero — abertura e ondas
   06. Botões e microinterações
   07. Filtros com indicador deslizante
   08. Estadia e flats
   09. Experiência
   10. Galeria e lightbox
   11. Localização e passeios
   12. História
   13. Reservas e FAQ
   14. Rodapé e letreiro
   15. Celular
   ========================================================================== */

/* 01. TOKENS DE MOVIMENTO ================================================= */
:root{
  --m-ease:cubic-bezier(.16,1,.3,1);      /* chega rápido, assenta devagar */
  --m-ease-soft:cubic-bezier(.33,1,.68,1);
  --m-ease-inout:cubic-bezier(.65,0,.35,1);
  --m-dur:.9s;        /* textos e blocos */
  --m-dur-img:1.4s;   /* fotos */
  --m-stagger:80ms;   /* intervalo entre itens de uma lista */
  --m-rise:28px;      /* quanto um item sobe ao aparecer */
  --m-rise-block:36px;/* quanto um bloco grande sobe */
}

/* 02. VOCABULÁRIO ========================================================= */
@keyframes m-rise{from{opacity:0;translate:var(--m-x,0) var(--m-y,var(--m-rise))}}
@keyframes m-refilter{from{opacity:0;translate:0 22px}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-fade-out{to{opacity:0}}
@keyframes m-drop{from{opacity:0;translate:0 -12px}}
@keyframes m-slide-x{from{opacity:0;translate:-16px 0}}
@keyframes m-line{from{scale:0 1}}
@keyframes m-pop{0%{opacity:0;scale:.4}60%{opacity:1;scale:1.15}100%{scale:1}}
/* palavra que sobe de trás de uma linha fixa: o recorte acompanha o deslocamento */
@keyframes m-word{
  from{translate:0 100%;clip-path:inset(-1em -1em 100% -1em)}
  to{translate:0 0;clip-path:inset(-1em -1em 0 -1em)}
}
/* cortina de baixo para cima (maré subindo) e da direita para a esquerda */
@keyframes m-wipe-up{
  from{clip-path:inset(100% 0 0 0 round var(--m-r,0px))}
  to{clip-path:inset(0 0 0 0 round var(--m-r,0px))}
}
@keyframes m-wipe-left{
  from{clip-path:inset(0 100% 0 0 round var(--m-r,0px))}
  to{clip-path:inset(0 0 0 0 round var(--m-r,0px))}
}
@keyframes m-settle{from{scale:1.16}}
@keyframes m-settle-soft{from{scale:1.07}}
@keyframes m-draw{to{stroke-dashoffset:0}}

/* 03. REVELAÇÃO AO ROLAR ================================================== */

/* Até o motion.js terminar de preparar a página, o conteúdo abaixo do hero
   espera escondido — evita que algo apareça, suma e reapareça. Se o
   motion.js não carregar, o script do <head> desliga tudo e nada fica
   escondido. */
.motion:not(.motion-ready) main>section:not(.hero)>*{opacity:0}

/* O motion.js marca cada elemento com data-m="efeito" e, quando ele entra
   na tela, acrescenta a classe .is-in. */
.motion [data-m="rise"]:not(.is-in),
.motion [data-m="stagger"]:not(.is-in)>*,
.motion [data-m="eyebrow"]:not(.is-in){opacity:0}
.motion [data-m="split"]:not(.is-in) .w{translate:0 100%;clip-path:inset(-1em -1em 100% -1em)}
.motion [data-m="wipe"]:not(.is-in){clip-path:inset(100% 0 0 0 round var(--m-r,0px))}
.motion [data-m="wipe"][data-m-dir="left"]:not(.is-in){clip-path:inset(0 100% 0 0 round var(--m-r,0px))}

.motion [data-m="rise"].is-in{animation:m-rise var(--m-dur) var(--m-ease) var(--d,0ms) backwards}
.motion [data-m="stagger"].is-in>*{animation:m-rise var(--m-dur) var(--m-ease) calc(var(--d,0ms) + var(--i,0) * var(--m-stagger)) backwards}

.motion [data-m="eyebrow"].is-in{animation:m-slide-x .8s var(--m-ease) var(--d,0ms) backwards}
.motion [data-m="eyebrow"]::before{transform-origin:left center}
.motion [data-m="eyebrow"].is-in::before{animation:m-line 1s var(--m-ease) calc(var(--d,0ms) + 120ms) backwards}

/* títulos: cada palavra sobe de trás da linha, uma depois da outra.
   O respiro em cima e embaixo cabe acentos e pernas de letra (g, p, ç). */
.motion .is-split .w{display:inline-block;padding:.15em 0 .2em;margin:-.15em 0 -.2em}
.motion [data-m="split"].is-in .w{animation:m-word 1s var(--m-ease) calc(var(--d,0ms) + var(--wi,0) * 55ms) backwards}

.motion [data-m="wipe"].is-in{animation:m-wipe-up var(--m-dur-img) var(--m-ease) var(--d,0ms) backwards}
.motion [data-m="wipe"][data-m-dir="left"].is-in{animation-name:m-wipe-left}
.motion [data-m="wipe"].is-in img:not(.story-ghost){animation:m-settle 1.9s var(--m-ease) var(--d,0ms) backwards}

/* ícones de traço: são "desenhados" à mão quando o item aparece */
.motion .m-stroke{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.motion [data-m="stagger"].is-in>* .m-stroke{animation:m-draw 1.5s var(--m-ease) calc(var(--d,0ms) + var(--i,0) * var(--m-stagger) + 180ms) forwards}

/* Blocos .reveal do main.js: sobem mais e com a curva nova. As transições de
   hover (transform, sombra, borda, fundo) continuam na lista — a regra antiga
   do .reveal apagava essas transições e travava o hover dos cards. */
html.motion body.js .reveal{
  transform:none;
  translate:0 var(--m-rise-block);
  transition:
    opacity 1s var(--m-ease) var(--d,0ms),
    translate 1.2s var(--m-ease) var(--d,0ms),
    transform .6s var(--m-ease),
    box-shadow .5s var(--ease),
    border-color .5s var(--ease),
    background-color .4s var(--ease);
}
html.motion body.js .reveal.is-visible{translate:0 0}
/* blocos de texto: quem anima são os filhos (rótulo, título, parágrafo) */
html.motion body.js :is(.stay-copy,.experience-copy,.story-content).reveal{opacity:1;translate:none}
/* blocos que entram com cortina em vez de subir */
html.motion body.js :is(.story-visual,.map-card).reveal{opacity:1;translate:none}

/* 04. HEADER E BARRA DE PROGRESSO ========================================= */
.main-nav>a:nth-child(2){--i:1}
.main-nav>a:nth-child(3){--i:2}
.main-nav>a:nth-child(4){--i:3}
.main-nav>a:nth-child(5){--i:4}
.main-nav>a:nth-child(6){--i:5}
.mobile-nav-socials{--i:6}

@keyframes m-logo{from{opacity:0;rotate:-40deg;scale:.6}}
.motion .site-header .brand{animation:m-drop .9s var(--m-ease) .05s backwards}
.motion .site-header .brand img{animation:m-logo 1.4s var(--m-ease) .05s backwards}
.motion .header-actions{animation:m-drop .9s var(--m-ease) .5s backwards}
@media (min-width:901px){
  .motion .main-nav>a{animation:m-drop .8s var(--m-ease) calc(.2s + var(--i,0) * 55ms) backwards}
}

/* linha dourada na base do header que acompanha a leitura da página */
.scroll-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  transform-origin:left center;
  scale:0 1;
  pointer-events:none;
}

/* 05. HERO — ABERTURA E ONDAS ============================================= */

/* a foto acende devagar, assenta e depois respira (zoom lentíssimo) */
@keyframes m-hero-settle{from{scale:1.14}to{scale:1}}
@keyframes m-hero-drift{from{scale:1}to{scale:1.07}}
@keyframes m-veil{from{opacity:.92}}
.motion .hero-media{will-change:translate}
.motion .hero-media img{animation:m-hero-settle 2.6s var(--m-ease) both,m-hero-drift 26s var(--m-ease-inout) 2.6s infinite alternate}
.motion .hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--deep-3);
  opacity:0;
  pointer-events:none;
  animation:m-veil 1.8s var(--m-ease-soft) backwards;
}

/* textos em sequência: rótulo → título palavra a palavra → texto → botões */
.motion .hero .eyebrow{animation:m-slide-x .9s var(--m-ease) .45s backwards}
.motion .hero .eyebrow::before{transform-origin:left center;animation:m-line 1s var(--m-ease) .35s backwards}
.motion .hero h1{animation:m-rise 1.1s var(--m-ease) .55s backwards}
.motion .hero h1.is-split{animation:none}
.motion .hero h1 .w{animation:m-word 1.1s var(--m-ease) calc(var(--hd,550ms) + var(--wi,0) * 70ms) backwards}
.motion .hero-copy{animation:m-rise 1s var(--m-ease) 1s backwards}
.motion .hero-actions>*{animation:m-rise 1s var(--m-ease) 1.15s backwards}
.motion .hero-actions>:nth-child(2){animation-delay:1.25s}
@keyframes m-bar{from{opacity:0;translate:0 44px}}
.motion .availability-bar{animation:m-bar 1.1s var(--m-ease) 1.35s backwards}

/* ondas na base do hero — três camadas em velocidades diferentes.
   A da frente tem a cor da faixa de diferenciais, então emenda sem linha. */
@keyframes m-wave{to{translate:-50% 0}}
@keyframes m-waves-in{from{translate:0 100%}}
.hero-waves{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  z-index:3;
  height:clamp(34px,3.8vw,54px);
  overflow:hidden;
  pointer-events:none;
}
.hero-waves svg{position:absolute;left:0;bottom:0;width:200%;height:100%;overflow:visible}
.hero-waves .wave-body{fill:var(--deep);stroke:none}
/* espuma: 1px fixo mesmo com o desenho esticado na largura */
.hero-waves .wave-foam{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.hero-waves .wave-back .wave-body{fill:var(--teal);opacity:.35}
.hero-waves .wave-back .wave-foam{stroke:rgba(255,255,255,.14)}
.hero-waves .wave-mid{height:78%}
.hero-waves .wave-mid .wave-body{opacity:.6}
.hero-waves .wave-mid .wave-foam{stroke:rgba(255,255,255,.18)}
.hero-waves .wave-front{height:56%}
.motion .hero-waves{animation:m-waves-in 1.8s var(--m-ease) .6s backwards}
.motion .hero-waves svg{animation:m-wave 26s linear infinite}
.motion .hero-waves .wave-back{animation-duration:38s;animation-delay:-9s}
.motion .hero-waves .wave-mid{animation-duration:30s;animation-direction:reverse;animation-delay:-4s}

/* 06. BOTÕES E MICROINTERAÇÕES ============================================ */

/* reflexo de luz que atravessa o botão dourado: uma vez na abertura (no hero)
   e a cada hover. Fica atrás do texto, por cima do dourado. */
@keyframes m-sheen{from{translate:-180% 0}to{translate:260% 0}}
.motion .button-gold{position:relative;overflow:hidden;isolation:isolate}
.motion .button-gold::before,
.motion .button-gold::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  z-index:-1;
  width:55%;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  translate:-180% 0;
  pointer-events:none;
}
.motion .button-gold:hover::after{translate:260% 0;transition:translate .95s var(--m-ease-soft)}
.motion .hero .button-gold::before{animation:m-sheen 1.4s var(--m-ease-inout) 2.3s backwards}

/* as setinhas dos botões apontam o caminho no hover */
.motion .button>span[aria-hidden="true"]{display:inline-block;transition:translate .45s var(--m-ease)}
.motion .button:hover>span[aria-hidden="true"]{translate:2px -2px}
.motion .flat-cta:hover>span[aria-hidden="true"]{translate:5px 0}
.motion .experience-cta:hover>span[aria-hidden="true"]{translate:0 3px}

/* 07. FILTROS COM INDICADOR DESLIZANTE ==================================== */
/* a pílula escura desliza até o filtro escolhido em vez de pular */
.motion .has-indicator{position:relative;isolation:isolate}
.motion .seg-indicator{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  border-radius:var(--r-pill);
  background:var(--deep);
  box-shadow:0 6px 16px rgba(7,56,64,.18);
  pointer-events:none;
  transition:translate .6s var(--m-ease),width .6s var(--m-ease),height .6s var(--m-ease),opacity .3s ease;
}
.motion .has-indicator button{transition:color .35s var(--m-ease-soft)}
.motion .has-indicator button.is-active{background:transparent}

/* 08. ESTADIA E FLATS ===================================================== */
.motion .feature-grid.is-in i{display:inline-block;animation:m-pop .6s var(--m-ease) calc(var(--d,0ms) + var(--i,0) * var(--m-stagger) + 260ms) backwards}
html.motion body.js .stay-card.is-visible .pill{animation:m-pop .7s var(--m-ease) .55s backwards}
.motion .combo-bar ul.is-in li::before{animation:m-pop .6s var(--m-ease) calc(var(--d,0ms) + var(--i,0) * var(--m-stagger) + 220ms) backwards}

/* os quatro cards entram em sequência no computador */
@media (min-width:641px){
  .flat-card:nth-child(2){--d:110ms}
  .flat-card:nth-child(3){--d:220ms}
  .flat-card:nth-child(4){--d:330ms}
}
/* a foto do card abre como cortina, o número sobe e a etiqueta desce */
html.motion body.js .flat-card.reveal:not(.is-visible) .flat-media{clip-path:inset(100% 0 0 0)}
html.motion body.js .flat-card.is-visible .flat-media{animation:m-wipe-up 1.3s var(--m-ease) calc(var(--d,0ms) + 100ms) backwards}
html.motion body.js .flat-card.is-visible .flat-media img{animation:m-settle 1.9s var(--m-ease) calc(var(--d,0ms) + 100ms) backwards}
html.motion body.js .flat-card.is-visible .flat-index{animation:m-rise .9s var(--m-ease) calc(var(--d,0ms) + 600ms) backwards}
html.motion body.js .flat-card.is-visible .flat-tag{animation:m-drop .8s var(--m-ease) calc(var(--d,0ms) + 700ms) backwards}
/* ao trocar o filtro, os cards que ficam entram de novo */
.motion .flat-card.is-refilter{animation:m-refilter .7s var(--m-ease) calc(var(--fi,0) * 70ms) backwards}

/* hover: o card levanta (antes não levantava) e, com mouse, inclina de leve
   seguindo o cursor, com um brilho na foto */
html.motion body.js .flat-card.reveal.is-visible:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
@media (hover:hover) and (pointer:fine){
  html.motion body.js .flat-card.reveal.is-visible:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
  .motion .flat-media::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:radial-gradient(520px circle at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.26),rgba(255,255,255,0) 45%);
    opacity:0;
    pointer-events:none;
    transition:opacity .45s var(--ease);
  }
  .motion .flat-card:hover .flat-media::before{opacity:1}
}

/* 09. EXPERIÊNCIA ========================================================= */
.motion .experience-video{will-change:scale}
/* os três itens chegam da direita, um a um, e os ícones são desenhados */
.motion .experience-list{--m-x:32px;--m-y:0px}

/* 10. GALERIA E LIGHTBOX ================================================== */
.motion .gallery-track{--m-y:44px}
.motion .gallery-item.is-refilter{animation:m-refilter .7s var(--m-ease) calc(var(--fi,0) * 60ms) backwards}
.motion .gallery-viewport{cursor:grab}
.motion .gallery-viewport:active{cursor:grabbing}

@keyframes m-lb-in{from{opacity:0;translate:0 18px;scale:.97}}
@keyframes m-lb-out{to{opacity:0;translate:0 12px;scale:.98}}
@keyframes m-photo{from{opacity:0;translate:var(--dir-x,0px) 0;scale:.985}}
.motion .lightbox[open]{animation:m-lb-in .55s var(--m-ease)}
.motion .lightbox[open]::backdrop{animation:m-fade .5s ease}
.motion .lightbox.is-closing{animation:m-lb-out .32s var(--m-ease-inout) forwards}
.motion .lightbox.is-closing::backdrop{animation:m-fade-out .32s ease forwards}
.motion .lightbox figure img.is-swapping{animation:m-photo .6s var(--m-ease) backwards}
/* cópia da foto anterior, por cima, enquanto a nova carrega */
@keyframes m-photo-out{to{opacity:0;translate:calc(var(--dir-x,0px) * -1) 0;scale:.99}}
.lightbox .lb-ghost{position:absolute;z-index:1;max-height:none;object-fit:contain;pointer-events:none}
.motion .lightbox .lb-ghost.is-leaving{animation:m-photo-out .45s var(--m-ease-soft) forwards}

/* 11. LOCALIZAÇÃO E PASSEIOS ============================================== */
.motion .map-card{--m-r:var(--r-md)}

/* a linha de cada passeio é traçada da esquerda para a direita */
.motion .tour-row{position:relative;border-bottom-color:transparent}
.motion .tour-row::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--line);
  transform-origin:left center;
  scale:0 1;
  transition:scale 1.4s var(--m-ease) .2s;
}
html.motion body.js .tour-row.is-visible::after{scale:1 1}
html.motion body.js .tour-row.reveal:not(.is-visible) .tour-thumb{clip-path:inset(100% 0 0 0 round var(--r-sm))}
html.motion body.js .tour-row.is-visible .tour-thumb{--m-r:var(--r-sm);animation:m-wipe-up 1.2s var(--m-ease) .12s backwards}
html.motion body.js .tour-row.is-visible .tour-thumb img{animation:m-settle 1.7s var(--m-ease) .12s backwards}
.motion .tour-num{transition:color .3s var(--ease),translate .45s var(--m-ease)}
.motion .tour-row:hover .tour-num{color:var(--teal);translate:3px 0}
.motion .tour-row a{display:inline-block;transition:translate .45s var(--m-ease)}
.motion .tour-row:hover a{translate:4px 0}

/* 12. HISTÓRIA ============================================================ */
/* um reflexo de sol, bem fraco, passeia devagar pelo fundo escuro */
@keyframes m-glow{to{translate:34vmax 24vmax}}
.motion .story::before{
  content:"";
  position:absolute;
  left:-24vmax;
  top:-34vmax;
  width:72vmax;
  height:72vmax;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(237,189,77,.11),rgba(237,189,77,0));
  pointer-events:none;
  animation:m-glow 24s var(--m-ease-inout) infinite alternate;
}
.motion .story>.shell{position:relative;z-index:1}

/* foto um pouco maior que a moldura, para o parallax não mostrar borda */
.motion .story-visual{--m-r:var(--r-lg)}
.motion .story-visual img{top:-8%;height:116%;will-change:translate}
/* a troca de capítulo agora é uma cortina sobre a foto anterior (motion.js);
   o escurecimento antigo da 4.2 fica desligado */
.motion .story-visual.is-changing img{opacity:1;transform:none}
@keyframes m-ghost-next{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
@keyframes m-ghost-back{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
.motion .story-ghost.is-leaving{animation:m-ghost-next 1.1s var(--m-ease-inout) forwards}
.motion .story-ghost.is-leaving.is-back{animation-name:m-ghost-back}
.motion .story-visual img.is-entering{animation:m-settle-soft 1.6s var(--m-ease) backwards}

/* texto do capítulo aberto sobe em duas linhas */
.motion .story-chapter.is-active .story-chapter-body>*{animation:m-rise .8s var(--m-ease) .05s backwards}
.motion .story-chapter.is-active .story-chapter-body>:nth-child(2){animation-delay:.14s}

/* capítulos automáticos (só no computador): uma linha dourada corre sob o
   capítulo aberto e, quando chega ao fim, abre o próximo. Pausa com o mouse
   em cima e para de vez quando o visitante clica em um capítulo. */
@keyframes m-progress{to{scale:1 1}}
.motion .story-chapter{position:relative}
.motion .story-chapter::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--gold);
  transform-origin:left center;
  scale:0 1;
  pointer-events:none;
}
@media (min-width:901px){
  .motion .story.is-autoplay:not(.is-manual) .story-chapter.is-active::after{animation:m-progress 9s linear forwards}
  .motion .story.is-autoplay:not(.is-manual):is(:hover,:focus-within) .story-chapter.is-active::after{animation-play-state:paused}
}

/* 13. RESERVAS E FAQ ====================================================== */
.motion .faq summary{transition:background-color .3s var(--ease)}
.motion .faq summary:hover{background:var(--cream-2)}
.motion .faq summary span:last-child{transition:transform .45s var(--m-ease)}
.motion .faq details.is-closing summary span:last-child{transform:none}
.motion .form-feedback.is-visible{animation:m-rise .6s var(--m-ease)}

/* 14. RODAPÉ E LETREIRO =================================================== */
/* letreiro grande e lento no topo do rodapé; acelera quando a página rola */
@keyframes m-marquee{to{translate:-50% 0}}
.footer-marquee{
  overflow:hidden;
  margin-bottom:var(--s-10);
  padding-bottom:var(--s-8);
  border-bottom:1px solid var(--on-deep-line);
  pointer-events:none;
  user-select:none;
}
.marquee-track{display:flex;width:max-content}
.motion .marquee-track{animation:m-marquee 70s linear infinite}
.marquee-group{display:flex;flex:none;align-items:center}
.marquee-group span{
  padding:0 .32em;
  color:transparent;
  font-family:var(--font-display);
  font-size:clamp(2.8rem,7.4vw,7rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.03em;
  white-space:nowrap;
  -webkit-text-stroke:1px rgba(255,255,255,.32);
}
.marquee-group span.is-solid{color:var(--cream-2);-webkit-text-stroke:0}
.marquee-group i{color:var(--gold);font-size:clamp(1.2rem,2.6vw,2.2rem);font-style:normal;line-height:1}

/* 15. CELULAR ============================================================= */
@keyframes m-nav-in{from{opacity:0;translate:36px 0}}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 rgba(7,56,64,.45)}100%{box-shadow:0 0 0 16px rgba(7,56,64,0)}}
@media (max-width:900px){
  /* links do menu entram em cascata quando ele abre */
  .motion body.menu-open .main-nav>a,
  .motion body.menu-open .mobile-nav-socials{animation:m-nav-in .7s var(--m-ease) calc(.12s + var(--i,0) * 55ms) backwards}
}
@media (max-width:640px){
  /* o botão da barra fixa pulsa uma vez quando a barra aparece */
  .motion .mobile-booking.is-visible .button{animation:m-pulse 1.8s var(--m-ease) .6s}
  .footer-marquee{margin-bottom:var(--s-8);padding-bottom:var(--s-6)}
}