/* Esconde no desktop */
.menu-flutuante-mobile {
  display: none;
}

/* Estilo flutuante para mobile */
@media screen and (max-width: 768px) {
  .menu-flutuante-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #ddd;
    padding: 10px 15px;
    z-index: 99999;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
  }

  .menu-flutuante-mobile .botao-nav {
    flex: 1;
    max-width: 25%;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-size: 12px;
    font-weight: 500;
  }

  .menu-flutuante-mobile .botao-nav img {
    display: block;
    margin: 0 auto 5px;
    width: 22px;
    height: 22px;
  }

  .menu-flutuante-mobile .botao-nav span {
    display: block;
    font-size: 11px;
    line-height: 1.1;
  }
}

/* Banner mobile - mostrar imagem inteira (sem corte) */
@media (max-width: 767px) {
  .slides img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .slides {
    height: auto !important;
  }

  .slides li {
    height: auto !important;
  }
}

/* Sobe o aviso de cookies para não ficar atrás do menu flutuante */
@media (max-width: 767px){
  #avisoCookies{
    bottom: 90px !important;   /* ajuste: 80, 90, 100... */
    z-index: 99998 !important; /* abaixo do menu (que está 99999) */
  }
}



/* ============ STORY MODAL (somente mobile) ============ */
.story-overlay { display: none; }

@media (max-width: 767px){
  .story-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 100000; /* acima do menu e do aviso de cookies */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
  }
  .story-overlay.is-open{ display: flex; }

  .story-modal{
    position: relative;
    width: min(360px, 92vw);
    height: 60vh;                 /* <-- 60% da tela */
    background: #0b0b0b;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Área 9:16 do story */
  .story-frame{
    flex: 1;
    display: block;
    position: relative;
    background: #000;
    text-decoration: none;
  }
  .story-frame img{
    width: 100%;
    height: 100%;
    object-fit: contain; /* mostra inteiro (sem corte) */
    display: block;
  }

  .story-close{
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 22px;
    line-height: 36px;
    cursor: pointer;
  }

  .story-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,.04);
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .story-btn{
    border: 0;
    width: 44px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }

  .story-dots{
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  .story-dots span{
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: rgba(255,255,255,.25);
  }
  .story-dots span.is-active{
    background: rgba(255,255,255,.85);
  }
  
  
}

@media (max-width: 767px){
  .botao-nav.js-open-story img{
    border-radius: 50%;
    animation: storyPulse 2.2s infinite;
  }

}

@media (max-width: 767px){
  .botao-nav.js-open-story img{
    border-radius: 50%;
    animation: storyPulse 2.2s infinite;
  }
}

/* animação fora do media (evita erro no editor da LI) */
@keyframes storyPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(255, 20, 147, 0.6);
  }
  70%{
    box-shadow: 0 0 0 8px rgba(255, 20, 147, 0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(255, 20, 147, 0);
  }
}

/*Ajuste botão wapp  */
@media (max-width: 767px){
  .whatsapp-float-button{
    bottom: 130px !important; /* ajuste fino */
    right: 30px !important;
  }
}