/* ==========================================================================
   Kat Klub - ajustes de UI
   --------------------------------------------------------------------------
   Carregado DEPOIS do <style> inline de cada pagina, para poder sobrescreve-lo.

   Escopo proposital:
   - Desktop (>= 1000px) permanece exatamente como estava. Todo o redesenho
     do carrossel esta dentro de media queries de ate 999.98px.
   - As correcoes de footer e das animacoes valem para todos os viewports,
     pois sao correcoes de bug e nao mudancas de layout.
   ========================================================================== */

:root{
    --kk-pink:   #E6007E;
    --kk-green:  #94C11F;
    --kk-purple: #2D1B43;
    --kk-wall:   #221934;
    --kk-navbar-h: 58px;

    /* Rosa claro para texto/borda sobre o roxo. O #E6007E da marca rende
       3,46:1 sobre #2D1B43 e reprova no AA; este tom rende 4,61:1 mantendo o
       mesmo matiz (327deg). E o mesmo ja usado no logo e nos contatos. */
    --kk-pink-claro: #FF31A4;

    /* ritmo unico de movimento: toda micro-interacao usa estes tokens */
    --kk-dur: 220ms;                             /* dentro dos 150-300ms */
    --kk-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* saida suave */

    /* A navbar nao e micro-interacao: e mudanca de ambiente, disparada pela
       rolagem e nao por um toque. O easeOutQuint acima percorre 90% do caminho
       no primeiro quarto do tempo - otimo para dar resposta a um clique, e a
       razao de os 320ms da navbar parecerem 100ms. Aqui vale uma curva
       simetrica e um tempo maior. */
    --kk-dur-vidro: 520ms;
    --kk-ease-vidro: cubic-bezier(0.4, 0, 0.2, 1);
}


/* Cadencia de neon oscilando, a mesma do .flicker-slow do logo do hero.
   Fica em escopo GLOBAL de proposito: estava dentro da media query de mobile,
   entao acima de 992px quem usasse este nome ficava com animation-name sem
   keyframes correspondentes - ou seja, sem animacao nenhuma.
   Usam esta cadencia: o logo do painel offcanvas e a seta de rolagem. */
@-webkit-keyframes kk_flicker{
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: .99; }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999%           { opacity: .4; }
}
@keyframes kk_flicker{
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: .99; }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999%           { opacity: .4; }
}


/* ==========================================================================
   1. Logo centralizado verticalmente no mobile
   --------------------------------------------------------------------------
   O #logo tinha height:100vh inline. No mobile 100vh conta a area sob a barra
   de URL do navegador, entao o centro real do elemento cai abaixo do centro
   visivel. Somado a navbar fixed-top que cobre o topo, o logo ficava baixo.

   Correcao: 100svh (altura pequena do viewport = area realmente visivel) com
   fallback para 100vh, e padding-top igual a navbar para o centro optico bater
   com o centro da area livre.
   ========================================================================== */

#logo{
    /* Altura da AREA VISIVEL, com a barra de endereco do navegador em jogo:

         vh   altura com a barra RETRAIDA (a maior). Sozinho deixa o bloco
              mais alto que a tela quando a barra esta visivel, e o centro cai
              abaixo da dobra. Fica so de fallback.
         svh  altura com a barra VISIVEL (a menor). E um valor FIXO: nao muda
              quando a barra recolhe.
         dvh  acompanha a barra em tempo real.

       Aqui a escolha e svh, e o dvh saiu. O dvh mantinha o logo no centro da
       area visivel em qualquer estado da barra, mas ao custo de o hero mudar
       de altura durante a rolagem - e conteudo centralizado se desloca metade
       da variacao. Medido: viewport de 715 para 812 movia o centro do logo
       48,5px no documento, ou seja, o logo escorregava enquanto a barra
       recolhia. Com svh a altura nunca muda, entao o logo fica parado e so
       sobe com a rolagem normal.

       O preco do svh e que, com a barra recolhida, a tela fica ~97px mais
       alta que o hero e aparece uma faixa da secao seguinte. Isso so acontece
       depois que a rolagem ja comecou, quando o hero ja esta saindo de vista.
       Ao carregar, com a barra visivel, o hero tem exatamente a altura da
       tela e o logo fica centralizado.

       Ficam em cascata: quem nao entende svh para em vh.

       NAO ha padding de compensacao de navbar aqui: no topo da home a navbar e
       transparente (o vidro so entra com a rolagem), entao nao ocupa espaco
       visual e o logo centraliza na tela inteira. O padding-top de 58px que
       existia empurrava o logo exatamente 29px - metade dele - para baixo.

       A centralizacao e do Bootstrap: .d-flex no header e .mx-auto.my-auto no
       .row. Nao repetimos align-items/justify-content aqui. */
    position: relative;

    /* A centralizacao e feita AQUI, nao pelas classes do Bootstrap.
       Motivo: os <link> das paginas apontam para https:// fixo. Quando a pagina
       e servida por http o bootstrap.min.css nao carrega, e ai .d-flex, .mx-auto,
       .my-auto, .row e .col-10 simplesmente nao existem - medido: um <div
       class="d-flex"> resolvia para display:block, e o logo caia 583px para a
       esquerda e 57px para cima. O hero nao pode depender de folha externa para
       uma coisa tao basica quanto ficar no meio da tela. */
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100svh;
}


/* O .row e o .col do hero sao so wrapper semantico: nao ha colunas irmas para
   distribuir. Deixamos os dois em bloco de largura cheia e zeramos as margens
   negativas e o padding do grid, para o resultado ser identico com ou sem o
   Bootstrap carregado. O z-index sobe acima das estrelas (.kk-dots, z-index 0). */
#logo > .row{
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

#logo > .row > [class*="col-"]{
    display: block;
    flex: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   1a. Escala do logo do hero
   --------------------------------------------------------------------------
   O tamanho era um max-height: 350px inline no HTML. Por ser inline vencia
   qualquer regra externa, e por ser um valor fixo nao acompanhava a tela:
   medido antes, o logo ocupava 76% da largura em 390px e 50% da altura num
   desktop de 700px.

   Agora o limite e duplo - largura E altura - e vence o mais restritivo:
     max-width  segura o logo em telas estreitas
     max-height segura em telas baixas, inclusive celular deitado
   O min() com um teto em px impede que ele cresca sem fim em telas grandes.

   svh e a altura com a barra do navegador visivel: nao muda durante o scroll.
   A linha em vh antes serve de fallback para navegadores sem svh.
   Breakpoints em 768 e 1024, os mesmos ja usados no restante do projeto.
   ========================================================================== */

/* base: celular */
#logo img{
    /* .d-block e .mx-auto vem do Bootstrap; replicados aqui pelo mesmo motivo. */
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    max-width: 54vw;
    max-height: min(30vh, 240px);
    max-height: min(30svh, 240px);
}

/* tablet */
@media (min-width: 768px){
    #logo img{
        max-width: 40vw;
        max-height: min(34vh, 280px);
        max-height: min(34svh, 280px);
    }
}

/* desktop */
@media (min-width: 1024px){
    #logo img{
        max-width: 28vw;
        max-height: min(38vh, 300px);
        max-height: min(38svh, 300px);
    }
}


/* ==========================================================================
   1c. Entrada do hero no carregamento
   --------------------------------------------------------------------------
   Fade de abertura, em CSS puro e sem depender do katklub-ui.js: uma animacao
   sempre roda, entao nao existe o risco de o conteudo ficar invisivel para
   sempre se o script falhar - risco real na alternativa de deixar o estado
   inicial escondido no CSS esperando uma classe vinda do JS.

   O fill-mode e backwards, nao both. Backwards aplica o quadro inicial durante
   o atraso e devolve o controle ao valor declarado quando a animacao termina.
   Com both a animacao seguraria opacity:1 para sempre, e ai o opacity:0 de
   body.kk-scrolled na seta voltaria a nao funcionar.

   A ordem escalona a cena: as estrelas surgem devagar ao fundo, o logo sobe,
   e a seta e a ultima a acender. Nada entra ao mesmo tempo. */

@keyframes kk_hero_entra{
    from{ opacity: 0; transform: translateY(16px); }
    to  { opacity: 1; transform: translateY(0); }
}

@keyframes kk_surge{
    from{ opacity: 0; }
    to  { opacity: 1; }
}

#logo > .row{
    animation: kk_hero_entra 820ms var(--kk-ease-vidro) 80ms backwards;
}

#logo .kk-dots{
    animation: kk_surge 1200ms var(--kk-ease-vidro) backwards;
}


/* ==========================================================================
   1b. Legibilidade do logo pequeno da navbar
   --------------------------------------------------------------------------
   O logo-menu.png e uma cor chapada: 97,3% dos pixels opacos sao #E6007E.
   Sobre o roxo da navbar (#2D1B43) isso rende 3,46:1 - atende o minimo de
   3:1 para glifo grande, mas reprova no AA de 4,5:1 exigido para elementos
   pequenos, e ele e exibido a ~50px no mobile.

   Como e um PNG, a cor nao muda por `color`. O filtro abaixo clareia o tom
   sem reposicionar o matiz:
     contrast(.7)   levanta o canal verde, que esta em 0 e travaria o brilho
     brightness(1.3) clareia o resultado
   Cor final: #FF31A4 -> 4,61:1 (AA), matiz 327deg, o MESMO do original.
   Fica tambem alinhado ao #FF4FA3 usado nos icones de contato.

   O drop-shadow e um halo neon de baixa intensidade: nao entra na conta do
   contraste, mas descola a silhueta do fundo e conversa com o restante da
   identidade, que ja e toda em neon.
   ========================================================================== */

.navbar-brand img{
    filter:
        contrast(0.7)
        brightness(1.3)
        drop-shadow(0 0 4px rgba(255, 49, 164, 0.45));
}

/* ==========================================================================
   2. Carrossel de eventos - mobile / tablet
   --------------------------------------------------------------------------
   Inspirado no layout do blitzhaus: a imagem do evento vem primeiro, com a
   legenda (data + nome) logo abaixo, e o card vizinho "espia" na lateral para
   sinalizar que da pra arrastar.

   O HTML nao muda: a ordem visual e resolvida com flex `order`, entao o
   desktop continua renderizando exatamente o markup original.
   ========================================================================== */

@media (max-width: 999.98px){

    /* --- o item ocupa a largura toda do stage (anula o col-11 do Bootstrap) --- */
    #agenda .owl-carousel .item{
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    /* --- o card em si --- */
    #agenda .owl-carousel .item > a{
        position: relative;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        overflow: hidden;
        transition: background 0.4s ease, box-shadow 0.4s ease;
    }

    /* A moldura (cantos, gradiente e sombra) e exclusiva do card em destaque.
       Mesma logica do scale: `.active + .active` desfaz nos demais visiveis,
       entao so o PRIMEIRO ativo fica com a decoracao. */
    #agenda .owl-carousel .owl-item.active .item > a{
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(45, 27, 67, 0) 0%, rgba(34, 25, 52, 0.92) 100%);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    }

    #agenda .owl-carousel .owl-item.active + .owl-item.active .item > a{
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    /* imagem primeiro */
    #agenda .owl-carousel .item > a img{
        order: 1;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 14px 14px 0 0;
    }

    /* data */
    #agenda .owl-carousel .item > a h2{
        order: 2;
        margin: 0;
        padding: 9px 8px 1px;
        font-size: 11px;
        line-height: 1.1;
        letter-spacing: 2px;
        color: var(--kk-green);
        text-align: center;
    }

    /* nome do evento */
    #agenda .owl-carousel .item > a h5{
        order: 3;
        height: auto !important;
        margin: 0;
        padding: 2px 8px 11px;
        font-size: 12px;
        line-height: 1.15;
        text-align: center;
        color: #FFFFFF;
        text-shadow: 0 2px 6px rgba(0,0,0,0.55);
        overflow-wrap: anywhere;
    }

    /* selo "Acontecendo agora" sobreposto a imagem */
    #agenda .owl-carousel .item > a span.text-success{
        order: 0;
        position: absolute;
        top: 6px;
        left: 6px;
        right: 6px;
        z-index: 5;
        margin: 0 !important;
        padding: 4px 6px;
        border-radius: 999px;
        background: var(--kk-green);
        color: var(--kk-purple) !important;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 10px;
        line-height: 1;
        letter-spacing: 1px;
        text-align: center;
        text-transform: uppercase;
        box-shadow: 0 4px 12px rgba(0,0,0,0.45);
    }

    /* --- profundidade tipo app: o card ativo vem a frente --- */
    #agenda .owl-carousel .owl-item{
        transform: scale(0.9);
        opacity: 0.45;
        transition: transform 0.45s ease, opacity 0.45s ease;
        will-change: transform;
    }

    /* O destaque e so do PRIMEIRO card visivel. O Owl marca .active em todos
       os itens dentro do stage, entao os dois aparecem em tamanho cheio.
       `.active + .active` pega todo item ativo que vem DEPOIS de outro ativo,
       ou seja: todos menos o primeiro - sem precisar saber quantos cabem. */
    #agenda .owl-carousel .owl-item.active{
        transform: scale(1);
        opacity: 1;
    }

    #agenda .owl-carousel .owl-item.active + .owl-item.active{
        transform: scale(0.92);
        opacity: 0.72;
    }

    /* --- gesto: o navegador cuida so do scroll vertical, o resto e do owl --- */
    #agenda .owl-carousel .owl-stage-outer{
        overflow: visible;
        touch-action: pan-y;
        padding-bottom: 8px;
    }

    #agenda .owl-carousel .owl-stage{
        display: flex;
        align-items: flex-start;
        touch-action: pan-y;
    }

    /* o stage "vaza" para fora do container por causa do stagePadding, entao a
       secao precisa recortar o excesso para nao criar scroll horizontal */
    #agenda{
        overflow-x: hidden;
    }

    /* --- setas escondidas no mobile (o gesto e a affordance) --- */
    #agenda .owl-carousel .owl-nav{
        display: none;
    }

    /* --- dots como indicador de posicao --- */
    #agenda .owl-carousel .owl-dots{
        margin-top: 14px;
    }

    #agenda .owl-carousel .owl-dots .owl-dot span{
        width: 7px;
        height: 7px;
        margin: 0 4px;
        background: rgba(255,255,255,0.28);
        transition: width 0.3s ease, background 0.3s ease;
    }

    #agenda .owl-carousel .owl-dots .owl-dot.active span{
        width: 22px;
        background: var(--kk-pink);
    }
}

/* a partir de 600px os cards ja tem folga, entao a tipografia cresce */
@media (min-width: 600px) and (max-width: 999.98px){
    #agenda .owl-carousel .item > a h2{
        padding: 12px 12px 2px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    #agenda .owl-carousel .item > a h5{
        padding: 3px 12px 14px;
        font-size: 15px;
    }

    #agenda .owl-carousel .item > a span.text-success{
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* telas bem estreitas: o nome nao pode empurrar o card */
@media (max-width: 360px){
    #agenda .owl-carousel .item > a h2{ font-size: 10px; letter-spacing: 1px; }
    #agenda .owl-carousel .item > a h5{ font-size: 11px; }
}


/* ==========================================================================
   3. Termos de uso deixam de cobrir a animacao
   --------------------------------------------------------------------------
   O #marco (880px, a animacao) e absoluto e ocupa o topo do <footer>.
   A .footer-termos tambem era absoluta em bottom:0 com fundo solido, entao
   ficava POR CIMA dos ultimos ~60px da animacao - justamente onde o gato anda.

   Correcao: reserva espaco abaixo da animacao (padding-bottom no footer) e
   ancora a barra nesse espaco. Nada se sobrepoe.

   Vale so para as paginas onde o footer tem a animacao (index, galeria,
   evento, evento-vip). Em cardapio.php e termos-de-uso.php a .footer-termos ja
   e estatica e nao entra aqui.
   ========================================================================== */

/* Geometria real do rodape com animacao:
     #marco  -> margin-top 2em (32px) + height 880px  => termina em 912px
     a barra -> ficava em bottom:0 de um footer de 880px, ou seja ~798..880,
                bem em cima do gato (688..848) e do muro.
   Aumentando o min-height do footer para 912 + altura da barra, o bottom:0
   passa a cair logo ABAIXO da animacao. Como o fundo da barra e o mesmo
   #221934 do muro, ela le como continuacao do muro. */

footer:has(#marco){
    min-height: 996px;          /* 32 (margin) + 880 (animacao) + 84 (barra) */
}

/* A partir de 768px o container pai ganha px-md-3 (1rem de cada lado) e o
   rodape herdava esse recuo, aparecendo com faixas vazias nas laterais.
   Margem negativa do mesmo 1rem devolve o rodape a largura total, sem tocar
   no px-md-3 do container nem em nenhuma outra secao do site.
   Abaixo de 768px o container usa px-0, entao nao ha o que compensar. */
@media (min-width: 768px){
    footer:has(#marco){
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

footer:has(#marco) .footer-termos{
    height: 84px;
    padding: 0 24px;
    /* respeita o indicador de home / notch nos celulares */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--kk-wall);
}

@media (max-width: 767.98px){
    footer:has(#marco){
        min-height: 984px;      /* 32 + 880 + 72 */
        min-height: calc(984px + env(safe-area-inset-bottom, 0px));
    }

    footer:has(#marco) .footer-termos{
        height: 72px;
        height: calc(72px + env(safe-area-inset-bottom, 0px));
        padding: 0 12px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}


/* ==========================================================================
   4. Glitch das animacoes ao reiniciar
   --------------------------------------------------------------------------
   a) Predios (#edificios): o tile e desenhado com background-size 1128px, mas
      o keyframe deslocava so 1000px. A cada volta sobrava um salto de 128px.
      Agora o deslocamento e exatamente a largura do tile -> loop continuo.

   b) Gato (#gato): sprite de 16 quadros animado com steps(16).
      - mobile  (gatito2.svg, 4475.9px): a caixa tinha 250px de largura mas o
        passo era de 280px, entao cada quadro aparecia cortado e vazava o
        quadro seguinte; o total (4480) tambem nao batia com o arquivo.
      - desktop (gato.svg, 8123px): o passo (507.5px) nao fechava com a largura
        real, sobrando ~3px de deriva no fim do ciclo.
      Fixando background-size explicito, a largura da caixa vira exatamente o
      quadro e o deslocamento total vira um multiplo exato dele.
   ========================================================================== */

/* Alem do salto, a animacao original engasgava: animar `background-position`
   obriga o navegador a REPINTAR a faixa inteira a cada quadro, na CPU. Numa
   imagem de 1728px isso derruba o frame rate em celular.

   Agora a faixa e desenhada uma vez e apenas DESLOCADA via `transform`, que a
   GPU compoe sem repintar nada -> movimento continuo de verdade.
   O elemento ganha 1128px extras de largura (um tile inteiro a mais) para que,
   ao percorrer exatamente um tile, o quadro final seja pixel a pixel igual ao
   inicial. O #marco tem overflow:hidden e recorta a sobra.

   Duracao 5.64s = 1128px na mesma velocidade de antes (1000px / 5s). */

/* --- faixa rosa entre os predios e o muro ---------------------------------
   O sp-bg.png (1728x1153) desenhado a 1128px de largura fica com 753px de
   altura, mas o #edificios tem 880px e o fundo estava ancorado no TOPO
   (background-position 0% 0%). Sobravam 50px de elemento vazio embaixo do
   desenho, e por ali aparecia o gradiente rosa do #cielo, porque o #muro so
   comecava mais abaixo (816px).

   Agora o desenho e ancorado no RODAPE do elemento e tanto o #edificios quanto
   o #muro partem da mesma referencia (--kk-chao), entao a base dos predios
   encosta exatamente no topo do muro - que e tambem a linha onde o gato pisa.
   Sem vao, sem faixa rosa. */

#marco{
    --kk-chao: 64px;   /* 880 (altura do marco) - 816 (linha do chao) */
    border-radius: 0;

    /* O #marco tinha z-index auto, entao NAO criava contexto de empilhamento.
       Com isso o #cielo (-30), a #luna (-19) e o #edificios (-10) escapavam
       dele e do <footer> e iam parar no contexto raiz. O #edificios e uma
       camada composta e animada: ficava com z-index negativo, pintando atras
       dos ancestrais e recortada pelo overflow:hidden com border-radius de um
       ancestral. Nessa combinacao o compositor precisa refazer o recorte a
       cada volta e as vezes desiste da camada, caindo para repintura - o
       quadro sai sem os predios e aparece o rosa do #cielo por baixo.
       Com o contexto isolado aqui, a cena inteira passa a viver dentro do
       #marco e os z-index abaixo viram positivos, na mesma ordem de antes. */
    isolation: isolate;

    /* Geometria vinda do <style> inline das paginas. Estava repetida em seis
       arquivos, com um deles fora de sincronia (a cardapio usava margin-top de
       100% em vez de 2em). Aqui vira definicao unica. */
    width: 100%;
    height: 880px;
    margin: 2em auto 0;
    overflow: hidden;
    left: 0;
}

/* O <footer> que abriga a cena precisa reservar a altura dela. Fica de fora o
   rodape das paginas sem cena (a termos-de-uso), onde o proprio <footer> e a
   barra de Termos de uso e 880px de altura o quebrariam. */
footer:not(.footer-termos){
    position: relative;
    min-height: 880px;
}

/* ordem da cena, do fundo para a frente - mesma de antes, sem valores
   negativos: ceu, lua, predios, muro, gato */
#cielo{ z-index: 1; }
#luna{ z-index: 2; }
#edificios{ z-index: 3; }
#muro{ z-index: 4; }
#gato{ z-index: 5; }

/* o #cielo tem border-radius proprio (16px); sem zerar tambem aqui os cantos
   do ceu continuariam arredondados dentro de um quadro reto */
#cielo{
    border-radius: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: 2em;
    background: linear-gradient(to bottom, #2D1B43 23%, #D94670 72%, #d9467000 100%);
}

/* A lua estava em dois lugares diferentes conforme a pagina: na index em
   margin-left 50% com margin-top 1em, e nas demais em 27% com 10em/13em - la
   as duas linhas da index estavam comentadas e substituidas dentro das media
   queries. Como a index e a referencia homologada, valem os numeros dela, e as
   outras paginas passam a ter a lua na mesma posicao. */
#luna{
    position: absolute;
    width: 10em;
    height: 10em;
    border-radius: 50%;
    box-shadow: 30px 10px 0 #F7F8E0;
    margin-left: 50%;
    margin-top: 1em;
}

#muro{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: var(--kk-chao);
    margin: 0;
    background: #221934;
}

/* O #gato ja trazia z-index:10, mas z-index nao vale em elemento estatico.
   Como o #muro passou a ser absoluto (acima), ele pintava por cima e cortava
   as patas - no desktop o gato termina em 825px e o muro comeca em 816px, 9px
   de sobreposicao. No mobile os dois so se encostam (816/816), por isso o
   corte nao aparecia la. Tornando o gato posicionado, o z-index dele passa a
   valer e ele volta a frente. */
#gato{
    position: relative;
    background-repeat: no-repeat;
    animation: sprite-animation 1.2s steps(16, end) infinite;
}

/* A linha fina que aparecia separando os predios do muro e costura de
   subpixel: o PNG tem 1153px de altura e, desenhado a 1128px de largura, fica
   com 752.61px - fracionario. A ultima fileira de pixels do desenho cai entre
   dois pixels do dispositivo e sai semitransparente, deixando vazar o rosa do
   #cielo que esta atras, exatamente na juncao.

   Nao da para arredondar a altura sem distorcer o desenho, entao os predios
   descem 2px a mais e ficam POR BAIXO do muro (que e positivo e pinta acima do
   z-index -10 do #edificios). A borda serrilhada fica escondida e a juncao
   vira um corte limpo. */
/* Por que NAO usar transform aqui.
   A versao anterior deixava o elemento com 1542px (100% + um tile) e o
   deslocava com translate3d. Medido num video do aparelho, a 60fps: a cada
   5,64s - exatamente um ciclo - os predios sumiam por 2 quadros e aparecia o
   rosa do #cielo por tras. So o #edificios sumia; ceu, lua, muro e gato
   continuavam na tela.

   A causa e o tiled backing do WebKit. Uma camada desse tamanho (3084px de
   dispositivo num DPR 2) nao vira uma textura unica: ela e dividida em
   ladrilhos, e so os ladrilhos da regiao visivel sao rasterizados. Na virada
   do ciclo o transform salta 1128px de uma vez, e a faixa da camada que passa
   a aparecer nunca tinha sido rasterizada - fica vazia ate ficar pronta. O
   conteudo dos dois lados da emenda e identico (comparado quadro a quadro: 0
   pixels de diferenca), mas o compositor nao tem como saber disso.

   O transform e barato porque nao repinta - e por isso mesmo ele nao tem o
   que mostrar no salto. Animar background-position repinta, e repintura
   sempre produz conteudo: nao existe estado "ladrilho ainda nao pronto".
   Para o custo ficar baixo, o elemento volta a ter a largura da viewport (era
   quase quatro vezes maior) e a altura passa a ser a do desenho, sem os 127px
   vazios que sobravam no topo. */
#edificios{
    position: absolute;
    background-image: url(../imagens/sp-bg.png);
    bottom: calc(var(--kk-chao) - 2px);
    width: 100%;
    height: 755px;          /* 1153 * 1128/1728 = 752,6 do desenho */
    background-position: 0 100%;
    background-size: 1128px auto;
    background-repeat: repeat-x;
    animation: kk_edificios 5.64s linear infinite;
}

@keyframes kk_edificios{
    from { background-position: 0 100%; }
    to   { background-position: -1128px 100%; }
}

/* --- lua: mobile --- */
@media (max-width: 767.98px){
    /* desce a lua no mobile (era 1em) */
    #luna{
        margin-top: 10em;
    }
}

/* --- gato: mobile ---
   O corte era 576px no inline e 768px aqui, e entre 577 e 767 nenhuma das duas
   faixas casava: o #gato ficava sem background-image e com altura 0, invisivel.
   Medido em todas as paginas, inclusive na index. Agora o par e 767.98/768. */
@media (max-width: 767.98px){
    #gato{
        background-image: url(../imagens/gatito2.svg);
        height: 160px;
        margin-top: 41em;
        margin-left: 1em;

        /* o passo do sprite continua 280px (4480 / 16 quadros); a janela de
           278px mostra 278 dos 280 de cada quadro, recorte igual em todos,
           entao nao ha deriva no ciclo - so apara a sobra lateral do desenho */
        width: 278px;
        background-size: 4480px auto;
    }

    @keyframes sprite-animation{
        from { background-position: 0 0; }
        to   { background-position: -4480px 0; }
    }
    @-webkit-keyframes sprite-animation{
        from { background-position: 0 0; }
        to   { background-position: -4480px 0; }
    }
}

/* --- gato: desktop (mantem o tamanho atual, so fecha o ciclo certinho) --- */
@media (min-width: 768px){
    #gato{
        background-image: url(../imagens/gato.svg);
        height: 297px;
        width: 507.5px;
        margin-top: 33em;
        margin-left: 2em;
        background-size: 8120px auto;
    }



    @keyframes sprite-animation{
        from { background-position: 0 0; }
        to   { background-position: -8120px 0; }
    }
    @-webkit-keyframes sprite-animation{
        from { background-position: 0 0; }
        to   { background-position: -8120px 0; }
    }
}


/* ==========================================================================
   5. Menu offcanvas "liquid glass" - APENAS mobile/tablet
   --------------------------------------------------------------------------
   O HTML nao muda: continua sendo o mesmo #navbarNavDropdown do Bootstrap.
   Abaixo de 992px (o breakpoint do navbar-expand-lg) ele deixa de ser um
   collapse que empurra a pagina e vira um painel que desliza pela direita.

   O controle passa a ser do katklub-ui.js, que intercepta o clique no
   .navbar-toggler antes do Bootstrap e alterna a classe .kk-open. Isso evita
   o atraso do collapse: o Bootstrap so troca a classe .show DEPOIS de terminar
   a animacao de altura, o que faria o painel deslizar com ~350ms de atraso.

   Acima de 992px nada disso se aplica e o Bootstrap segue no comando.
   ========================================================================== */

/* Os tres elementos abaixo sao criados pelo katklub-ui.js e vivem dentro da
   navbar (ou do body). O JS os injeta em QUALQUER largura - so o CSS era
   restrito ao mobile. Acima de 992px eles ficavam sem estilo nenhum e o logo
   renderizava em tamanho natural (530x554) dentro da navbar, esticando ela
   para 562px de altura e empurrando o menu do desktop.

   Por isso o padrao aqui e "oculto", e a media query mobile abaixo e que os
   liga. Assim, se a media query nunca casar, o pior caso e nao aparecerem -
   nunca quebrar o layout. */
.kk-menu-logo,
.kk-menu-social,
.kk-backdrop{
    display: none;
}

@media (max-width: 991.98px){

    /* Ordem de empilhamento do menu, toda no contexto raiz:
         navbar   1060  - so o hamburguer/X fica visivel aqui
         painel   1050
         backdrop 1040

       A navbar precisa ficar ACIMA do painel porque ela cria contexto de
       empilhamento proprio: o z-index 1060 do .navbar-toggler vale apenas
       entre os filhos dela, nunca contra o painel, que hoje e filho do body.
       Com navbar e painel empatados em 1050, o painel vencia por vir depois
       no DOM e cobria o X de fechar.

       Isso nao esconde o painel: com o menu aberto a navbar fica com fundo
       transparente e sem vidro, e o logo dela some (regras mais abaixo). */
    .navbar.fixed-top{
        z-index: 1060;
    }

    /* --- o painel --- */
    #navbarNavDropdown.navbar-collapse{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1050;

        width: 82vw;
        max-width: 340px;
        height: 100% !important;

        display: flex !important;      /* vence o .collapse{display:none} */
        /* o painel carrega a classe .flex-row-reverse do Bootstrap, que usa
           !important - sem repetir aqui o logo iria parar ao LADO da lista */
        flex-direction: column !important;
        align-items: stretch;
        /* logo ancorado no topo; a lista se centraliza no espaco que sobra
           (ver margin auto no .navbar-nav) */
        justify-content: flex-start;

        padding: 24px 22px;
        padding-top: calc(24px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));

        /* --- o vidro ---
           duas camadas: um leve tom da marca por cima do desfoque do que esta
           atras, mais um brilho interno na borda para dar espessura */
        -webkit-backdrop-filter: blur(24px) saturate(160%);
                backdrop-filter: blur(24px) saturate(160%);
        background:
            linear-gradient(155deg,
                rgba(230, 0, 126, 0.20) 0%,
                rgba(45, 27, 67, 0.52) 46%,
                rgba(34, 25, 52, 0.62) 100%);
        border-left: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow:
            inset 1px 0 0 rgba(255, 255, 255, 0.20),
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            -24px 0 60px rgba(0, 0, 0, 0.55);

        transform: translateX(102%);
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        overscroll-behavior: contain;

        transition:
            transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0.46s;
    }

    /* reflexo diagonal que atravessa o vidro */
    #navbarNavDropdown.navbar-collapse::before{
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(115deg,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0.04) 24%,
            rgba(255,255,255,0) 52%);
    }

    #navbarNavDropdown.navbar-collapse.kk-open{
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition:
            transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0s;
    }

    /* neutraliza a animacao de altura do collapse do Bootstrap */
    #navbarNavDropdown.navbar-collapse.collapsing{
        height: 100% !important;
        overflow-y: auto;
        transition:
            transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0.46s;
    }

    /* --- logo piscante no topo do painel (so mobile, inserido pelo JS) ---
       O flicker e uma animacao de opacity. Se o logo tambem tivesse transicao
       de entrada em opacity, a animacao venceria a transicao e a entrada nunca
       apareceria - por isso ele so pisca e entra junto com o painel. */
    .kk-menu-logo{
        position: relative;
        z-index: 1;
        display: block;
        width: 62%;
        max-width: 168px;
        height: auto;
        /* ritmo vertical do painel: o respiro acima do logo e o mesmo que
           separa o logo da lista, e o mesmo que sobra abaixo dos contatos.
           O topo precisa livrar a faixa do X, que fica a direita na mesma
           altura - dai o valor maior aqui. */
        margin: 30px auto 28px;
        -webkit-animation: kk_flicker 3s linear infinite;
                animation: kk_flicker 3s linear infinite;
    }


    /* --- a lista --- */
    #navbarNavDropdown .navbar-nav{
        position: relative;
        z-index: 1;
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
        /* a lista segue logo abaixo do logo; o espaco livre fica todo entre
           ela e os contatos (que usam margin-top:auto para colar no rodape) */
        margin-top: 0;
        margin-bottom: 0;
    }

    #navbarNavDropdown .nav-item{
        width: 100%;
        opacity: 0;
        transform: translateX(18px);
        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* entrada escalonada dos itens, so depois que o painel comeca a abrir */
    #navbarNavDropdown.kk-open .nav-item{
        opacity: 1;
        transform: translateX(0);
    }

    #navbarNavDropdown.kk-open .nav-item:nth-child(1){ transition-delay: 0.10s; }
    #navbarNavDropdown.kk-open .nav-item:nth-child(2){ transition-delay: 0.16s; }
    #navbarNavDropdown.kk-open .nav-item:nth-child(3){ transition-delay: 0.22s; }
    #navbarNavDropdown.kk-open .nav-item:nth-child(4){ transition-delay: 0.28s; }
    #navbarNavDropdown.kk-open .nav-item:nth-child(5){ transition-delay: 0.34s; }

    /* --- contatos colados no rodape do painel --- */
    .kk-menu-social{
        position: relative;
        z-index: 1;
        /* empurra o bloco para o fim do flex column */
        margin-top: auto;
        padding-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 1px solid rgba(255, 255, 255, 0.10);

        /* entra em bloco, com fade: a micro-animacao de hover usa transform,
           entao o transform fica reservado para ela e a entrada usa so opacity */
        opacity: 0;
        transition: opacity 0.45s ease;
    }

    #navbarNavDropdown.kk-open .kk-menu-social{
        opacity: 1;
        transition-delay: 0.40s;
    }

    .kk-menu-social a{
        display: flex;
        align-items: center;
        justify-content: center;
        /* 44px = alvo minimo de toque (Apple HIG).
           flex-shrink:0 e necessario: os 4 botoes mais as margens estouram por
           pouco a largura util do painel e o flex os encolhia para ~43px. */
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        /* margin em vez de gap: gap em flex so existe no Safari 14.1+ */
        margin: 0 7px;
        border-radius: 50%;

        /* Rosa mais claro que o #E6077D dos itens do menu, de proposito.
           Sobre o vidro escuro do painel (fundo efetivo ~#211738) o rosa da
           marca rende 3.77:1 - passa no minimo de 3:1 para glifo grande, mas
           reprova no AA de 4.5:1 exigido para elementos pequenos, e o icone
           tem 19px. Este tom sobe para 5.54:1.
           E a regra de dark mode: usar variante tonal mais clara da marca, nao
           a cor crua. A borda a 75% rende 3.67:1, acima do minimo de 3:1 para
           contraste nao-textual de componente. */
        color: #FF4FA3;
        background: rgba(255, 79, 163, 0.08);
        border: 1px solid rgba(255, 79, 163, 0.75);
        transition:
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
            color 0.35s ease,
            background 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.45s ease,
            filter 0.45s ease;
    }

    .kk-menu-social svg{
        display: block;
        width: 19px;
        height: 19px;
        fill: currentColor;   /* segue a cor do <a>, inclusive no hover */
        transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Hover: "acende" em verde - o mesmo #94C11F do .nav-link ativo.
       O fade e proposital (0.45s no brilho): o icone parece um neon ligando,
       nao um estado trocando de cor na hora. */
    .kk-menu-social a:hover,
    .kk-menu-social a:focus-visible,
    .kk-menu-social a:active{
        color: var(--kk-green);
        background: rgba(148, 193, 31, 0.10);
        border-color: var(--kk-green);
        transform: translateY(-3px);
        box-shadow:
            0 0 14px rgba(148, 193, 31, 0.45),
            0 0 32px rgba(148, 193, 31, 0.20);
        filter: drop-shadow(0 0 5px rgba(148, 193, 31, 0.55));
    }

    /* o icone cresce com leve overshoot, independente do circulo */
    .kk-menu-social a:hover svg,
    .kk-menu-social a:focus-visible svg,
    .kk-menu-social a:active svg{
        transform: scale(1.18);
    }

    .kk-menu-social a:focus-visible{
        outline: 2px solid var(--kk-green);
        outline-offset: 3px;
    }

    #navbarNavDropdown .navbar-dark .nav-link,
    #navbarNavDropdown .nav-link{
        /* O painel foi movido para FORA da navbar (ver katklub-ui.js), entao
           `.navbar-dark .nav-link` do CSS inline deixou de alcanca-lo e os
           links caiam para o azul padrao de link, sem fonte nem sombra.
           A tipografia da marca e replicada aqui, escopada no painel. */
        font-family: 'Bungee', cursive;
        color: #E6077D !important;
        text-align: center;
        text-shadow: 5px 4px 4px rgba(0, 0, 0, 0.5);

        /* 14px deixa a linha com 50px de altura: um respiro a mais entre os
           itens e, de quebra, acima do minimo de 44px de alvo de toque */
        padding: 14px 4px !important;
        font-size: 22px;
        line-height: 1;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    }

    #navbarNavDropdown .nav-item:last-child .nav-link{
        border-bottom: 0;
    }

    #navbarNavDropdown .nav-link:hover,
    #navbarNavDropdown .nav-link:focus-visible,
    #navbarNavDropdown .nav-link:active,
    #navbarNavDropdown .nav-link.active{
        color: var(--kk-green) !important;
    }

    /* --- backdrop (criado pelo katklub-ui.js) --- */
    /* mascara escura: o painel ocupa 82vw, entao sobra uma faixa do site a
       esquerda. Ela precisa ficar bem apagada para nao competir com o menu. */
    .kk-backdrop{
        display: block;   /* liga o que o padrao acima deixou oculto */
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(6, 3, 12, 0.86);
        -webkit-backdrop-filter: blur(7px) saturate(65%);
                backdrop-filter: blur(7px) saturate(65%);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.46s ease, visibility 0s linear 0.46s;
    }

    .kk-backdrop.kk-open{
        opacity: 1;
        visibility: visible;
        transition: opacity 0.46s ease, visibility 0s linear 0s;
    }

    /* Com o menu aberto a navbar perde o fundo solido, senao a faixa do topo
       ficaria clara enquanto o resto da pagina esta escurecido pelo backdrop.
       Logo e hamburguer continuam visiveis por cima. */
    body.kk-menu-aberto .navbar.fixed-top,
    body.kk-menu-aberto #navbar,
    body.kk-menu-aberto nav.navbar{
        background-color: transparent !important;
    }

    /* O logo pequeno da navbar continuava aceso sobre a mascara: como a navbar
       precisa ficar ACIMA do backdrop (senao ele cobriria o proprio painel e o
       hamburguer), nao da para empurrar so o logo para tras dele - ele esta no
       contexto de empilhamento da navbar. Entao ele mesmo se apaga enquanto o
       menu esta aberto. O painel ja mostra o logo grande, entao nada se perde. */
    .navbar-brand{
        transition: opacity 0.3s ease;
    }

    body.kk-menu-aberto .navbar-brand{
        opacity: 0;
        pointer-events: none;
    }

    /* trava o scroll da pagina enquanto o menu esta aberto */
    body.kk-menu-aberto{
        overflow: hidden;
    }

    /* o toggler precisa ficar acima do backdrop para continuar clicavel */
    .navbar-toggler{
        position: relative;
        z-index: 1060;
    }

    /* a regra rosa original mira i.fa-bars; ao virar X o icone perdia a cor */
    .navbar-toggler i.fa-times{
        font-weight: 400;
        font-size: 1.8em;
        color: var(--kk-pink) !important;
    }
}

/* navegadores sem backdrop-filter: o vidro vira um fundo solido da marca,
   para o menu nunca ficar ilegivel */
@media (max-width: 991.98px){
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
        #navbarNavDropdown.navbar-collapse{
            background: linear-gradient(155deg, #3B1F4F 0%, #241833 100%);
        }
    }
}


/* ==========================================================================
   6. Navbar liquid glass (mobile e desktop)
   --------------------------------------------------------------------------
   A navbar era um bloco solido #2D1B43. Vira vidro: desfoca o que passa por
   tras, com um veu da marca por cima e um fio de luz na borda inferior para
   dar espessura. Vale nas duas larguras.

   `.navbar.fixed-top` (0,2,0) vence o `.navbar` (0,1,0) do CSS inline sem
   precisar de !important.
   ========================================================================== */

/* Estado no topo: navbar limpa, sem vidro. Na home o logo grande ja ocupa a
   primeira tela, entao o vidro e o logo pequeno da navbar so entram depois
   que a pagina rola (classe .kk-scrolled, aplicada pelo katklub-ui.js).
   Nas paginas sem hero o script liga .kk-scrolled de saida, porque la o
   conteudo comeca logo abaixo da navbar e precisa do vidro para contraste. */

.navbar.fixed-top{
    background-color: transparent;
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition:
        border-color var(--kk-dur-vidro) var(--kk-ease-vidro),
        box-shadow var(--kk-dur-vidro) var(--kk-ease-vidro);
}

/* O vidro mora numa camada propria, e nao na navbar.
   Antes o desfoque estava fora da transicao e trocava de none para blur(18px)
   de uma vez, enquanto so a cor de fundo fazia fade - era esse degrau que
   dava o aspecto brusco. Animar o proprio backdrop-filter resolveria a
   aparencia e criaria dois problemas: recalcular o raio do desfoque a cada
   quadro e caro, e um backdrop-filter diferente de none transforma a navbar
   em bloco de contencao para descendentes fixos.
   Numa camada separada os dois somem: o raio fica constante e so a opacidade
   anima - propriedade composta na GPU, sem reflow e sem re-rasterizar o
   desfoque. Em opacidade parcial o resultado desfocado e mesclado com o
   fundo limpo, o que se le exatamente como um desfoque entrando aos poucos.
   z-index -1 mantem a camada atras do conteudo da navbar, dentro do
   contexto de empilhamento dela (a navbar e fixed com z-index 1060). */
.navbar.fixed-top::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background-color: rgba(45, 27, 67, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(165%);
            backdrop-filter: blur(18px) saturate(165%);
    transition: opacity var(--kk-dur-vidro) var(--kk-ease-vidro);
}

body.kk-scrolled .navbar.fixed-top::before{
    opacity: 1;
}

body.kk-scrolled .navbar.fixed-top{
    border-bottom-color: rgba(255, 255, 255, 0.07);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 4px 24px rgba(0, 0, 0, 0.28);
}

/* --- logo pequeno: some no topo da home, entra com a rolagem --- */
body.kk-tem-hero .navbar-brand{
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
        opacity var(--kk-dur-vidro) var(--kk-ease-vidro),
        transform var(--kk-dur-vidro) var(--kk-ease-vidro);
}

/* O atraso fica so na entrada: o vidro comeca, o logo vem em seguida. Os dois
   surgindo no mesmo instante e o que fazia a troca parecer um corte seco. Na
   saida nao ha atraso - som sumir devagar quando ja se rolou de volta ao topo
   pareceria travamento. */
body.kk-tem-hero.kk-scrolled .navbar-brand{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 90ms;
}

/* sem JS o logo nao pode sumir para sempre */
body:not(.kk-tem-hero) .navbar-brand{
    opacity: 1;
}

/* Com o offcanvas aberto o logo some, em QUALQUER estado de rolagem.
   Precisa vir aqui, depois das regras acima e com especificidade maior:
   - body.kk-tem-hero.kk-scrolled .navbar-brand  (0,3,1) vencia o
     body.kk-menu-aberto .navbar-brand (0,2,1) da secao do menu;
   - body:not(.kk-tem-hero) .navbar-brand (0,2,1) empatava e, por vir depois,
     tambem vencia nas paginas sem hero.
   Nos dois casos o logo reaparecia POR CIMA do backdrop, ja que a navbar
   fica em z-index 1050 e o backdrop em 1040. */
body.kk-menu-aberto .navbar-brand,
body.kk-menu-aberto.kk-tem-hero .navbar-brand,
body.kk-menu-aberto.kk-tem-hero.kk-scrolled .navbar-brand{
    opacity: 0;
    pointer-events: none;
}

/* sem backdrop-filter o vidro viraria um vao transparente: cai para solido */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .navbar.fixed-top::before{
        background-color: #2D1B43;
    }
}

/* com o offcanvas aberto a navbar ja fica transparente (regra da secao 5);
   o desfoque tambem sai, senao brigaria com o desfoque do backdrop */
body.kk-menu-aberto .navbar.fixed-top::before{
    opacity: 0;
}

body.kk-menu-aberto .navbar.fixed-top{
    border-bottom-color: transparent;
    box-shadow: none;
}


/* ==========================================================================
   7. Sistema unico de botoes
   --------------------------------------------------------------------------
   Antes havia tres desenhos diferentes: .botao-cardapio/#submit/#enviar com
   borda 3px e sombra dura 5px 4px, .termos-de-uso-link como pilula, e o
   .btn-danger chapado. Agora todos compartilham a mesma forma, o mesmo ritmo
   de movimento e a mesma logica de estados.

   Contraste medido sobre #2D1B43:
     repouso  texto #FF31A4 sobre roxo  -> 4,61:1  (AA)
     hover    texto #2D1B43 sobre rosa  -> 4,61:1  (AA)
     foco     contorno verde #94C11F    -> 7,34:1  (AAA)
   ========================================================================== */

.botao-cardapio,
#submit,
#enviar,
.termos-de-uso-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;              /* alvo minimo de toque */
    padding: 12px 28px;
    border: 2px solid var(--kk-pink-claro);
    /* !important porque o CSS inline traz `button{border-radius:30px!important}`
       e #submit/#enviar/.btn-danger sao <button> - sem isso so os <a> ficariam
       com a pilula e o sistema deixaria de ser uniforme */
    border-radius: 999px !important;
    /* Fundo roxo SOLIDO, nao translucido: o botao do formulario fica sobre a
       ilustracao verde do arranhao, e com fundo translucido o texto competia
       com o desenho. Solido garante os 4,61:1 medidos em qualquer contexto. */
    background: #2D1B43;
    /* texto branco, mesmo padrao do link de termos de uso: 15,56:1 sobre o
       roxo, contra 4,61:1 do rosa - e o par mais legivel do sistema */
    color: #FFFFFF;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;

    /* a sombra dura antiga some; fica um halo neon quase imperceptivel */
    box-shadow: 0 0 0 rgba(255, 49, 164, 0);

    transition:
        color var(--kk-dur) var(--kk-ease),
        background-color var(--kk-dur) var(--kk-ease),
        border-color var(--kk-dur) var(--kk-ease),
        box-shadow var(--kk-dur) var(--kk-ease),
        transform var(--kk-dur) var(--kk-ease);
}

/* o link de termos e a variante discreta do mesmo botao */
.termos-de-uso-link{
    padding: 10px 22px;
    font-size: 17px;
    border-color: rgba(255, 49, 164, 0.55);
    color: #FFFFFF;
}

.botao-cardapio:hover,
.botao-cardapio:focus-visible,
#submit:hover,
#submit:focus-visible,
#enviar:hover,
#enviar:focus-visible,
.termos-de-uso-link:hover,
.termos-de-uso-link:focus-visible{
    background-color: var(--kk-pink-claro);
    border-color: var(--kk-pink-claro);
    color: #2D1B43;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 49, 164, 0.28);
}

/* press: o botao "afunda". Vale tambem no toque, onde nao existe hover */
.botao-cardapio:active,
#submit:active,
#enviar:active,
.termos-de-uso-link:active{
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 8px rgba(255, 49, 164, 0.22);
    transition-duration: 90ms;   /* saida mais rapida que a entrada */
}

.botao-cardapio:focus-visible,
#submit:focus-visible,
#enviar:focus-visible,
.termos-de-uso-link:focus-visible{
    outline: 2px solid var(--kk-green);
    outline-offset: 3px;
}

/* --- seta de rolagem no rodape do hero -----------------------------------
   Affordance de "tem mais conteudo abaixo". E um link de verdade para a
   agenda, entao funciona por clique e por teclado, e nao so como enfeite.
   Pisca na mesma cadencia do logo neon do hero (mesmos keyframes kk_flicker).
   ------------------------------------------------------------------------ */
.kk-seta-rolar{
    position: absolute;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 2;

    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--kk-pink-claro);
    font-size: 44px;
    line-height: 1;
    text-decoration: none;

    /* O logo do hero e um PNG com o neon ja desenhado: o flicker nele le como
       neon oscilando. Um chevron chapado com a mesma animacao lia como um
       simples fade. O halo em tres camadas devolve essa presenca, e e o que
       faz o piscar aparecer de verdade. */
    text-shadow:
        0 0 6px  rgba(255, 49, 164, 0.9),
        0 0 18px rgba(255, 49, 164, 0.6),
        0 0 34px rgba(230, 0, 126, 0.45);

    /* A entrada no carregamento mora aqui, no <a>; o piscar mudou para o <i>.
       Os dois animavam opacity no mesmo elemento e nao ha composicao possivel:
       a ultima animacao da lista vence. Pior, o kk_flicker era infinite, entao
       sobrescrevia tambem o opacity:0 de body.kk-scrolled - a seta nunca sumia
       ao rolar (medido: opacidade 0,99 com a classe ativa). */
    animation: kk_surge 600ms var(--kk-ease-vidro) 760ms backwards;
    transition: color var(--kk-dur) var(--kk-ease),
                filter var(--kk-dur) var(--kk-ease);
}

/* O movimento vive no <i> e o piscar no <a>. Separados de proposito:
   - o <a> ja usa transform para se centralizar (translateX -50%), entao
     animar transform nele quebraria a centralizacao;
   - animacao vence declaracao normal enquanto roda, entao se o movimento e o
     hover disputassem a mesma propriedade no mesmo elemento, o hover nunca
     apareceria. */
.kk-seta-rolar i{
    display: block;
    /* kk_seta_desce anima transform e kk_flicker anima opacity: propriedades
       distintas, as duas rodam juntas sem se anular. O text-shadow do <a> e
       herdado, entao o halo desbota junto com o glifo e o visual nao muda.
       O piscar so comeca depois que a seta terminou de acender. */
    animation:
        kk_seta_desce 1.6s ease-in-out infinite,
        kk_flicker 3s linear 1360ms infinite;
}

/* vai e volta, indicando para onde rolar */
@-webkit-keyframes kk_seta_desce{
    0%, 100% { -webkit-transform: translateY(-7px); }
    55%      { -webkit-transform: translateY(7px); }
}
@keyframes kk_seta_desce{
    0%, 100% { transform: translateY(-7px); }
    55%      { transform: translateY(7px); }
}

.kk-seta-rolar:hover,
.kk-seta-rolar:focus-visible{
    color: var(--kk-green);
    text-shadow:
        0 0 6px  rgba(148, 193, 31, 0.9),
        0 0 18px rgba(148, 193, 31, 0.6),
        0 0 34px rgba(148, 193, 31, 0.45);
    text-decoration: none;
}

/* no hover o movimento fica mais rapido, em vez de tentar aplicar um
   transform proprio - que a animacao em curso sobrescreveria */
.kk-seta-rolar:hover i,
.kk-seta-rolar:focus-visible i{
    animation-duration: 0.9s;
}

.kk-seta-rolar:focus-visible{
    outline: 2px solid var(--kk-green);
    outline-offset: 4px;
    border-radius: 50%;
}

/* com a pagina rolada a seta perde a funcao e sai de cena */
body.kk-scrolled .kk-seta-rolar{
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms var(--kk-ease);
}


/* --- bloco "Como chegar", logo abaixo do mapa ---------------------------
   Segue o mesmo padrao da secao de redes sociais: titulo rosa (o h1 global
   ja e Bungee rosa) e apenas os icones, sem pilula. As micro-interacoes sao
   as mesmas, porque a regra de #contato ja alcanca estes links.
   ------------------------------------------------------------------------ */
.kk-como-chegar__titulo{
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
}

@media (max-width: 575.98px){
    .kk-como-chegar__titulo{
        font-size: 24px;
    }
}

/* botao do modal: mesma forma e mesmo ritmo, papel de acao secundaria */
.btn-danger{
    border-radius: 999px !important;   /* mesmo motivo: e um <button> */
    border: 2px solid transparent;
    padding: 10px 24px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition:
        background-color var(--kk-dur) var(--kk-ease),
        box-shadow var(--kk-dur) var(--kk-ease),
        transform var(--kk-dur) var(--kk-ease);
}

.btn-danger:hover,
.btn-danger:focus-visible{
    background-color: var(--kk-pink-claro);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 49, 164, 0.3);
}

.btn-danger:active{
    transform: scale(0.97);
    transition-duration: 90ms;
}


/* ==========================================================================
   8. Card do cardapio
   --------------------------------------------------------------------------
   Saem o fundo #A882BA e a moldura de 15px chapada. Entra a mesma linguagem
   de vidro da navbar: fundo escuro translucido, fio de luz na borda e um
   brilho rosa de baixa intensidade. Escopado em #cardapio para nao alcancar
   nenhum outro .card do Bootstrap.
   ========================================================================== */

/* o card inteiro e um link. Como <a>, precisa herdar a cor do texto e nao
   ganhar sublinhado, e precisa de foco visivel para navegacao por teclado. */
#cardapio a.card.kk-card-link{
    display: block;
    color: inherit;
    text-decoration: none;
}

#cardapio a.card.kk-card-link:hover,
#cardapio a.card.kk-card-link:focus-visible{
    text-decoration: none;
}

#cardapio a.card.kk-card-link:focus-visible{
    outline: 2px solid var(--kk-green);
    outline-offset: 4px;
}

#cardapio a.card.kk-card-link:active{
    transform: translateY(-1px) scale(0.995);
    transition-duration: 90ms;
}

#cardapio .card{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 49, 164, 0.38);
    border-radius: 18px;
    background:
        linear-gradient(155deg,
            rgba(230, 0, 126, 0.10) 0%,
            rgba(45, 27, 67, 0.72) 55%,
            rgba(34, 25, 52, 0.85) 100%);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 14px 38px rgba(0, 0, 0, 0.42);
    transition:
        transform var(--kk-dur) var(--kk-ease),
        box-shadow var(--kk-dur) var(--kk-ease),
        border-color var(--kk-dur) var(--kk-ease);
}

/* reflexo diagonal, mesmo recurso do painel do menu */
#cardapio .card::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.03) 26%,
        rgba(255, 255, 255, 0) 55%);
}

#cardapio .card:hover{
    transform: translateY(-4px);
    border-color: rgba(255, 49, 164, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 20px 46px rgba(0, 0, 0, 0.5),
        0 0 26px rgba(255, 49, 164, 0.16);
}

/* o CSS inline pinta card-title/card-text de #2D1B43, que era legivel no
   fundo claro antigo e sumiria no vidro escuro */
#cardapio .card .card-title{
    color: var(--kk-pink-claro);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

#cardapio .card .card-text{
    color: rgba(255, 255, 255, 0.88);
    text-shadow: none;
}

#cardapio .card .card-body{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#cardapio .card img{
    position: relative;
    z-index: 1;
    transition: transform 420ms var(--kk-ease);
}

#cardapio .card:hover img{
    transform: scale(1.05) rotate(-2deg);
}


/* ==========================================================================
   9. Micro-interacoes nos demais elementos clicaveis
   ========================================================================== */

/* links do menu: sublinhado que cresce a partir do centro */
.navbar-dark .nav-link,
#navbarNavDropdown .nav-link{
    position: relative;
    transition: color var(--kk-dur) var(--kk-ease);
}

.navbar-dark .nav-link::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--kk-green);
    transform: translateX(-50%);
    transition: width var(--kk-dur) var(--kk-ease);
}

.navbar-dark .nav-link:hover::after,
.navbar-dark .nav-link:focus-visible::after,
.navbar-dark .nav-link.active::after{
    width: 62%;
}

/* no offcanvas o sublinhado nao cabe: la ja existe a borda de cada item */
@media (max-width: 991.98px){
    #navbarNavDropdown .nav-link::after{
        display: none;
    }
}

/* hamburguer */
.navbar-toggler{
    transition: transform var(--kk-dur) var(--kk-ease);
}

.navbar-toggler:active{
    transform: scale(0.92);
}

/* icones sociais da secao de contato */
#contato a i.fab,
#contato a i.fas{
    display: inline-block;
    transition:
        transform var(--kk-dur) var(--kk-ease),
        color var(--kk-dur) var(--kk-ease),
        filter var(--kk-dur) var(--kk-ease);
}

#contato a:hover i.fab,
#contato a:hover i.fas,
#contato a:focus-visible i.fab,
#contato a:focus-visible i.fas{
    transform: translateY(-4px) scale(1.12);
    color: var(--kk-green);
    filter: drop-shadow(0 0 8px rgba(148, 193, 31, 0.5));
}

#contato a:active i.fab,
#contato a:active i.fas{
    transform: scale(0.95);
    transition-duration: 90ms;
}

#contato a:focus-visible{
    outline: 2px solid var(--kk-green);
    outline-offset: 4px;
    border-radius: 8px;
}

/* setas do carrossel no desktop */
.owl-nav button.owl-prev,
.owl-nav button.owl-next{
    transition: transform var(--kk-dur) var(--kk-ease), opacity var(--kk-dur) var(--kk-ease);
    opacity: 0.75;
}

.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover{
    opacity: 1;
    transform: scale(1.12);
}

.owl-nav button.owl-prev:active,
.owl-nav button.owl-next:active{
    transform: scale(0.94);
    transition-duration: 90ms;
}

/* card de evento no desktop: no mobile a escala ja e do carrossel */
@media (min-width: 1000px){
    /* O .owl-stage-outer tem overflow:hidden e a data do card comeca exatamente
       na borda de cima dele (folga medida: 0px). Ao subir 6px no hover, esses
       6px do topo eram recortados.
       O padding abre espaco DENTRO da area visivel e a margem negativa devolve
       o deslocamento, entao nada se move no layout - so deixa de cortar. */
    #agenda .owl-stage-outer{
        padding-top: 14px;
        margin-top: -14px;
        padding-bottom: 26px;
        margin-bottom: -26px;
    }

    #agenda .owl-carousel .item > a{
        display: block;
        transition: transform var(--kk-dur) var(--kk-ease);
    }

    #agenda .owl-carousel .item > a:hover{
        transform: translateY(-6px);
    }

    #agenda .owl-carousel .item > a:active{
        transform: translateY(-2px) scale(0.99);
        transition-duration: 90ms;
    }

    #agenda .owl-carousel .item > a img{
        transition: box-shadow var(--kk-dur) var(--kk-ease);
    }

    #agenda .owl-carousel .item > a:hover img{
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 49, 164, 0.18);
    }
}

/* campos do formulario acompanham o mesmo ritmo */
.form-control{
    transition:
        border-color var(--kk-dur) var(--kk-ease),
        box-shadow var(--kk-dur) var(--kk-ease);
}

.form-control:focus{
    border-color: var(--kk-pink-claro);
    box-shadow: 0 0 0 3px rgba(255, 49, 164, 0.18);
}

/* qualquer elemento clicavel ganha o cursor certo */
a,
button,
[role="button"],
.owl-dot{
    cursor: pointer;
}


/* ==========================================================================
   10. Twinkling dots
   --------------------------------------------------------------------------
   O estrelas.png (1728x4669, 0,28% de pixels opacos) desenhava bolinhas
   verdes estaticas. Parte delas passa a ser gerada em CSS e cintilar.

   O PNG sai do .conteudo e vai para o ::after com opacidade reduzida - assim
   ele continua presente, mas discreto. O ::before traz os pontos animados.
   Duas camadas com tempos e tamanhos de ladrilho diferentes evitam que o
   cintilar fique sincronizado e mecanico.

   Anima so `opacity`, que a GPU compoe sem repintar.
   ========================================================================== */

/* O PNG sai de cena. Em index/galeria/evento/evento-vip ele estava em
   .conteudo; em cardapio.php e termos-de-uso.php estava em `html, body`.
   Sem zerar os dois, essas duas paginas ficariam com o PNG estatico E os
   dots novos por cima. */
html,
body{
    background-image: none;
}

.conteudo{
    position: relative;
    background-image: none;
}

/* o hero tambem recebe os dots (o katklub-ui.js injeta em .conteudo e #logo).
   O #logo e o #logo > .row ja estao declarados na secao 1. */
/* A escala das estrelas e uma variavel por container: o hero ficou bom no
   tamanho atual, e abaixo dele elas voltam a ser um pouco maiores. */
#logo .kk-dots{
    --kk-estrela: 1;
}

.conteudo .kk-dots{
    --kk-estrela: 1.45;
}

.kk-dots{
    --kk-estrela: 1;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.kk-dots__camada{
    position: absolute;
    inset: 0;
    display: block;
    background-repeat: repeat;
    will-change: opacity;
}

/* Ceu estrelado em tres niveis, todo no verde do estrelas.png original
   (#B8DE55) - o arquivo nunca teve outra cor.

   Duas licoes das tentativas anteriores:
   - pontos todos do mesmo tamanho leem como grao, nao como ceu. E a
     hierarquia de brilho que o olho reconhece;
   - o borrao nao vinha do tamanho e sim de gradiente largo SEM nucleo. Cada
     estrela aqui tem tres paradas: nucleo cheio, bloom a 35% do alfa e
     transparente.

   Escala calibrada pelo proprio PNG (mediana de 5px, alguns de 11-12px):
     A  halo 4.0-4.5px -> ~9px visiveis, ladrilho ~900px (raras)
     B  halo 2.6-3.0px -> ~6px visiveis, ladrilho ~450px
     C  ponto de 1.4px -> ~3px visiveis, ladrilho ~230px (numerosas)

   Estrela brilhante pisca devagar e quase nao apaga; a fraca pisca rapido e
   some por completo - e assim que se comportam no ceu. */

.kk-dots__camada--1{
    background-image: radial-gradient(circle calc(4.5px * var(--kk-estrela)) at 47% 60%, rgba(184,222,85,1.0) 0%, rgba(184,222,85,1.0) 22%, rgba(184,222,85,0.35) 44%, transparent 74%);
    background-size: 961px 968px;
    animation: kk_blink_a 5.4s ease-in-out infinite;
    animation-delay: -1.8s;
}

.kk-dots__camada--2{
    background-image: radial-gradient(circle calc(4.0px * var(--kk-estrela)) at 82% 18%, rgba(184,222,85,0.95) 0%, rgba(184,222,85,0.95) 22%, rgba(184,222,85,0.33) 44%, transparent 74%);
    background-size: 967px 939px;
    animation: kk_blink_a 6.2s ease-in-out infinite;
    animation-delay: -2.2s;
}

.kk-dots__camada--3{
    background-image: radial-gradient(circle calc(2.8px * var(--kk-estrela)) at 41% 16%, rgba(184,222,85,0.95) 0%, rgba(184,222,85,0.95) 22%, rgba(184,222,85,0.33) 44%, transparent 74%);
    background-size: 420px 434px;
    animation: kk_blink_b 3.2s ease-in-out infinite;
    animation-delay: -1.0s;
}

.kk-dots__camada--4{
    background-image: radial-gradient(circle calc(2.6px * var(--kk-estrela)) at 57% 70%, rgba(184,222,85,0.9) 0%, rgba(184,222,85,0.9) 22%, rgba(184,222,85,0.32) 44%, transparent 74%);
    background-size: 431px 468px;
    animation: kk_blink_b 2.7s ease-in-out infinite;
    animation-delay: -0.9s;
}

.kk-dots__camada--5{
    background-image: radial-gradient(circle calc(3.0px * var(--kk-estrela)) at 79% 23%, rgba(184,222,85,0.95) 0%, rgba(184,222,85,0.95) 22%, rgba(184,222,85,0.33) 44%, transparent 74%);
    background-size: 473px 451px;
    animation: kk_blink_b 3.9s ease-in-out infinite;
    animation-delay: -0.4s;
}

.kk-dots__camada--6{
    background-image: radial-gradient(circle calc(2.6px * var(--kk-estrela)) at 11% 37%, rgba(184,222,85,0.9) 0%, rgba(184,222,85,0.9) 22%, rgba(184,222,85,0.32) 44%, transparent 74%);
    background-size: 452px 455px;
    animation: kk_blink_b 2.3s ease-in-out infinite;
    animation-delay: -1.8s;
}

.kk-dots__camada--7{
    background-image: radial-gradient(circle calc(2.8px * var(--kk-estrela)) at 33% 59%, rgba(184,222,85,0.85) 0%, rgba(184,222,85,0.85) 22%, rgba(184,222,85,0.30) 44%, transparent 74%);
    background-size: 420px 517px;
    animation: kk_blink_b 3.5s ease-in-out infinite;
    animation-delay: -3.6s;
}

.kk-dots__camada--8{
    background-image: radial-gradient(circle calc(1.4px * var(--kk-estrela)) at 14% 22%, rgba(184,222,85,0.85), transparent 62%);
    background-size: 239px 249px;
    animation: kk_blink_c 1.4s ease-in-out infinite;
    animation-delay: -0.0s;
}

.kk-dots__camada--9{
    background-image: radial-gradient(circle calc(1.4px * var(--kk-estrela)) at 61% 21%, rgba(184,222,85,0.9), transparent 62%);
    background-size: 208px 210px;
    animation: kk_blink_c 1.1s ease-in-out infinite;
    animation-delay: -4.1s;
}

.kk-dots__camada--10{
    background-image: radial-gradient(circle calc(1.4px * var(--kk-estrela)) at 5% 31%, rgba(184,222,85,0.8), transparent 62%);
    background-size: 249px 223px;
    animation: kk_blink_c 1.8s ease-in-out infinite;
    animation-delay: -2.0s;
}

.kk-dots__camada--11{
    background-image: radial-gradient(circle calc(1.4px * var(--kk-estrela)) at 26% 26%, rgba(184,222,85,0.85), transparent 62%);
    background-size: 218px 230px;
    animation: kk_blink_c 1.6s ease-in-out infinite;
    animation-delay: -1.9s;
}

.kk-dots__camada--12{
    background-image: radial-gradient(circle calc(1.4px * var(--kk-estrela)) at 30% 74%, rgba(184,222,85,0.75), transparent 62%);
    background-size: 256px 253px;
    animation: kk_blink_c 2.1s ease-in-out infinite;
    animation-delay: -4.9s;
}

.kk-dots__camada--13{
    background-image: radial-gradient(circle calc(1.4px * var(--kk-estrela)) at 85% 31%, rgba(184,222,85,0.8), transparent 62%);
    background-size: 211px 270px;
    animation: kk_blink_c 1.3s ease-in-out infinite;
    animation-delay: -2.9s;
}

.kk-dots__camada--14{
    background-image: radial-gradient(circle calc(1.4px * var(--kk-estrela)) at 93% 30%, rgba(184,222,85,0.85), transparent 62%);
    background-size: 257px 234px;
    animation: kk_blink_c 2.4s ease-in-out infinite;
    animation-delay: -1.9s;
}

/* uma curva por nivel: quanto mais fraca a estrela, mais ela some */
@keyframes kk_blink_a{
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
@keyframes kk_blink_b{
    0%, 100% { opacity: 0.28; }
    50%      { opacity: 1; }
}
@keyframes kk_blink_c{
    0%, 100% { opacity: 0.06; }
    50%      { opacity: 1; }
}

/* o conteudo precisa ficar acima das camadas */
.conteudo > section{
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   11. Acessibilidade: respeita quem pediu menos movimento
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
    #edificios,
    #gato,
    .flicker-slow,
    .flicker-fast,
    .kk-menu-logo,
    #logo > .row,
    #logo .kk-dots{
        animation: none !important;
    }

    #agenda .owl-carousel .owl-item{
        transition: none;
    }

    #navbarNavDropdown.navbar-collapse,
    #navbarNavDropdown .nav-item,
    .kk-menu-social,
    .kk-menu-social a,
    .kk-menu-social svg,
    .kk-backdrop,
    .botao-cardapio,
    #submit,
    #enviar,
    .termos-de-uso-link,
    .btn-danger,
    .navbar-dark .nav-link::after,
    #contato a i.fab,
    #cardapio .card,
    #cardapio .card img,
    .kk-seta-rolar,
    .kk-seta-rolar i,
    .owl-nav button.owl-prev,
    .owl-nav button.owl-next{
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    /* os pontos param de piscar, mas continuam visiveis */
    .kk-seta-rolar,
    .kk-seta-rolar i{
        animation: none !important;
    }

    .kk-dots__camada{
        animation: none !important;
        opacity: 0.7;
    }

    /* a navbar troca de estado sem transicao */
    .navbar.fixed-top,
    .navbar.fixed-top::before,
    .navbar-brand{
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}