/*
 * =========================================
 * 1. ESTILOS PADRÃO (DESKTOP)
 * (Aplicado em telas > 1280px)
 * =========================================
 */

#minha-secao {
  position: relative; /* Contexto para o pop-up */
  
  /* Espaço no fundo para o pop-up flutuante */
  padding-bottom: 120px; 
  
  /* (Estilos de exemplo) */
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
}

#popup-local {
  position: absolute; /* Posição flutuante */
  bottom: 20px;
  left: 20px;
  width: 18%; /* Largura padrão no desktop */
  z-index: 10;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
  border-radius: 8px;
  overflow: hidden;
}

#popup-local img {
  width: 100%;
  height: auto;
  display: block;
}

#popup-local:hover {
  transform: scale(1.05);
}


/*
 * =========================================
 * 2. AJUSTES RESPONSIVOS (MEDIA QUERIES)
 * =========================================
 */

/* Laptops / Small Desktops */
@media screen and (max-width: 1280px) {
  #popup-local {
    /* Pode diminuir um pouco o pop-up */
    width: 180px; 
  }
}

/* Tablets (Landscape) */
@media screen and (max-width: 980px) {
  #popup-local {
    /* Diminui mais um pouco */
    width: 160px;
  }
}


/* iPad (Landscape) - Específico */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
  
  /* * NOTA: Este breakpoint é para iPad em paisagem.
   * A largura (768px a 1024px) é MAIOR que 736px,
   * então ele vai (corretamente) usar os estilos de desktop/tablet
   * (position: absolute), como definido acima.
   * Não precisamos mudar nada aqui, a menos que queira um 
   * tamanho específico para este dispositivo.
   */
}


/* Tablets (Portrait) / Celulares (Landscape) */
@media screen and (max-width: 736px) {

  /* * === AQUI É A MUDANÇA PARA O MODO CELULAR ===
   */

  #popup-local {
    /* 1. Remove o 'position: absolute' */
    position: static; 
    
    /* 2. Define a largura de 90% */
    width: 90%;       
    
    /* 3. Centraliza e dá espaço (20px em cima/baixo, auto nas laterais) */
    margin: 20px auto; 
    
    /* 4. Reseta os valores de posicionamento do desktop */
    bottom: auto;
    left: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Sombra mais sutil */
  }

  /* Ajusta a seção-pai */
  #minha-secao {
    /* Remove o padding extra que só era necessário no desktop */
    padding-bottom: 20px; 
  }
}


/* Celulares (Portrait) */
@media screen and (max-width: 480px) {
  /* * NOTA: As regras de 'max-width: 736px' (static, 90%) 
   * JÁ se aplicam aqui, pois 480px é menor que 736px.
   * * Só precisamos adicionar algo se quisermos MUDAR
   * o comportamento de 90%.
   */
   
  #popup-local {
    /* Ex: Ocupar um pouco mais da tela no celular pequeno */
     width: 95%; 
  }
}