/* ================= Rodapé ================= */
        .site-footer {
          background-color: #f8f9fa;
          border-top: 2px solid #3498db;
          padding-top: 30px;
          color: #333;
          font-size: 15px;
          position: relative;
        }

        .footer-container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;

          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
        }

        /* Logo/Nome */
        .footer-logo span {
          font-size: 1.5rem;
          font-weight: bold;
          color: #3498db;
        }

        /* Links */
        .footer-nav {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
        }

        .footer-nav a {
          color: #555;
          text-decoration: none;
          transition: color 0.3s ease;
        }

        .footer-nav a:hover {
          color: #3498db;
        }

        /* Redes Sociais */
        .footer-social a {
          margin-left: 12px;
          font-size: 1.5rem;
          color: #555;
          transition: color 0.3s ease;
        }

        .footer-social a:hover {
          color: #3498db;
        }

        /* Parte de baixo */
        .footer-bottom {
          margin-top: 20px;
          background-color: #3498db;
          text-align: center;
          padding: 12px;
          color: #fff;
          font-size: 14px;
          position: relative;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        /* Créditos do desenvolvedor */
        .developer-credit {
          position: absolute;
          bottom: 100%;
          left: 50%;
          transform: translateX(-50%);
          background-color: #2980b9;
          color: white;
          padding: 8px 12px;
          border-radius: 4px;
          font-size: 12px;
          white-space: nowrap;
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s ease;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .developer-credit::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border: 6px solid transparent;
          border-top-color: #2980b9;
        }

        .footer-bottom:hover .developer-credit {
          opacity: 1;
          visibility: visible;
          bottom: calc(100% + 10px);
        }

        .footer-bottom:hover {
          background-color: #2980b9;
        }

        /* Responsivo */
        @media (max-width: 768px) {
          .footer-container {
            flex-direction: column;
            text-align: center;
          }

          .footer-nav {
            justify-content: center;
          }

          .footer-social {
            margin-top: 10px;
          }
          
          .developer-credit {
            font-size: 11px;
            padding: 6px 10px;
          }
        }