.elementor-368 .elementor-element.elementor-element-5a24ceb{--display:flex;--min-height:841px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-190px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-368 .elementor-element.elementor-element-5a24ceb:not(.elementor-motion-effects-element-type-background), .elementor-368 .elementor-element.elementor-element-5a24ceb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://estudiomilagros.com/wp-content/uploads/2025/08/Milagros_Nueva_Imagen_001_final-3-scaled.jpg");background-size:cover;}/* Start custom CSS for container, class: .elementor-element-5a24ceb */<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hotspot Customizado</title>
  <style>
    /* Reset básico */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Container principal - ocupa toda a tela */
    .hotspot-container {
      width: 100vw;
      height: 100vh;
      position: relative;
      background-image: url('https://via.placeholder.com/1920x1080/8B4513/FFFFFF?text=Sua+Imagem+Aqui');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden; /* desktop continua normal */
    }

    /* Estilo base dos hotspots */
    .hotspot {
      position: absolute;
      width: 30px;
      height: 30px;
      background: rgba(255, 255, 255, 0.9);
      border: 3px solid #007cba;
      border-radius: 50%;
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #007cba;
      font-size: 14px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    /* Animação de pulso */
    .hotspot::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border: 2px solid #007cba;
      border-radius: 50%;
      animation: pulse 2s infinite;
      opacity: 0.6;
    }

    @keyframes pulse {
      0% { transform: scale(1); opacity: 0.6; }
      50% { transform: scale(1.2); opacity: 0.3; }
      100% { transform: scale(1); opacity: 0.6; }
    }

    /* Hover effect */
    .hotspot:hover {
      background: #007cba;
      color: white;
      transform: translate(-50%, -50%) scale(1.1);
    }

    .hotspot:hover::before {
      animation-play-state: paused;
      opacity: 0;
    }

    /* Tooltip */
    .hotspot-tooltip {
      position: absolute;
      bottom: 45px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 14px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 20;
      pointer-events: none;
    }

    .hotspot-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: rgba(0, 0, 0, 0.9);
    }

    .hotspot:hover .hotspot-tooltip {
      opacity: 1;
      visibility: visible;
      bottom: 50px;
    }

    /* Modal/Popup */
    .hotspot-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .hotspot-modal.active {
      opacity: 1;
      visibility: visible;
    }

    .modal-content {
      background: white;
      padding: 30px;
      border-radius: 10px;
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
      position: relative;
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }

    .hotspot-modal.active .modal-content {
      transform: scale(1);
    }

    .modal-close {
      position: absolute;
      top: 15px;
      right: 20px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #666;
    }

    .modal-close:hover {
      color: #000;
    }

    /* Diferentes estilos de hotspot */
    .hotspot.style-red { border-color: #e74c3c; color: #e74c3c; }
    .hotspot.style-red::before { border-color: #e74c3c; }
    .hotspot.style-red:hover { background: #e74c3c; }

    .hotspot.style-green { border-color: #27ae60; color: #27ae60; }
    .hotspot.style-green::before { border-color: #27ae60; }
    .hotspot.style-green:hover { background: #27ae60; }

    .hotspot.large { width: 40px; height: 40px; font-size: 16px; }

    /* Responsivo */
    @media (max-width: 768px) {
      /* Ajuste geral */
      .hotspot-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;   /* ativa rolagem horizontal */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        height: auto;
        width: 100%;
        padding: 20px 10px;
        background-size: contain; /* mostra a imagem inteira no mobile */
      }

      .hotspot {
        position: relative !important; /* tira absolute */
        flex: 0 0 auto;
        margin-right: 16px;
        transform: none !important;
        top: auto !important;
        left: auto !important;
      }

      .hotspot-tooltip {
        font-size: 12px;
        padding: 6px 10px;
      }

      .modal-content {
        padding: 20px;
        margin: 20px;
      }
    }
  </style>
</head>
<body>
  <!-- Container principal -->
  <div class="hotspot-container">
    <div class="hotspot" style="left: 25%; top: 40%;" data-modal="modal1">
      A
      <div class="hotspot-tooltip">Atendimento ao Cliente</div>
    </div>
    <div class="hotspot style-red" style="left: 60%; top: 30%;" data-modal="modal2">
      B
      <div class="hotspot-tooltip">Área Restrita</div>
    </div>
    <div class="hotspot style-green large" style="left: 80%; top: 60%;" data-modal="modal3">
      C
      <div class="hotspot-tooltip">Informações Importantes</div>
    </div>
    <div class="hotspot" style="left: 45%; top: 70%;" data-modal="modal4">
      D
      <div class="hotspot-tooltip">Mesa de Trabalho</div>
    </div>
  </div>

  <!-- Modais/Popups -->
  <div class="hotspot-modal" id="modal1">
    <div class="modal-content">
      <button class="modal-close">&times;</button>
      <h3>Atendimento ao Cliente</h3>
      <p>Este é o balcão de atendimento ao cliente. Aqui você pode:</p>
      <ul>
        <li>Fazer consultas sobre sua conta</li>
        <li>Solicitar informações</li>
        <li>Resolver problemas</li>
        <li>Fazer reclamações</li>
      </ul>
    </div>
  </div>

  <div class="hotspot-modal" id="modal2">
    <div class="modal-content">
      <button class="modal-close">&times;</button>
      <h3>Área Restrita</h3>
      <p>Esta é uma área de acesso restrito apenas para funcionários.</p>
    </div>
  </div>

  <div class="hotspot-modal" id="modal3">
    <div class="modal-content">
      <button class="modal-close">&times;</button>
      <h3>Informações Importantes</h3>
      <p>Aqui estão localizados:</p>
      <ul>
        <li>Avisos importantes</li>
        <li>Regulamentos</li>
        <li>Horários de funcionamento</li>
        <li>Contatos de emergência</li>
      </ul>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const hotspots = document.querySelectorAll('.hotspot[data-modal]');
      const modals = document.querySelectorAll('.hotspot-modal');
      const closeButtons = document.querySelectorAll('.modal-close');

      hotspots.forEach(hotspot => {
        hotspot.addEventListener('click', function() {
          const modalId = this.getAttribute('data-modal');
          const modal = document.getElementById(modalId);
          if (modal) {
            modal.classList.add('active');
            document.body.style.overflow = 'hidden';
          }
        });
      });

      closeButtons.forEach(button => {
        button.addEventListener('click', function() {
          const modal = this.closest('.hotspot-modal');
          modal.classList.remove('active');
          document.body.style.overflow = '';
        });
      });

      modals.forEach(modal => {
        modal.addEventListener('click', function(e) {
          if (e.target === this) {
            this.classList.remove('active');
            document.body.style.overflow = '';
          }
        });
      });

      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          const activeModal = document.querySelector('.hotspot-modal.active');
          if (activeModal) {
            activeModal.classList.remove('active');
            document.body.style.overflow = '';
          }
        }
      });
    });
  </script>
</body>
</html>/* End custom CSS */