/* Estilos de cabecera, footer y chat (antes dentro de <style> en el HTML) */

/* ---- header.php ---- */
.logo-text {
          font-size: 1.70rem;
        }
        @media (max-width: 900px) {
          .desktop-nav { display: none !important; }
          .mobile-toggle { display: flex !important; }
        }
        @media (max-width: 480px) {
          .logo-text { font-size: 1.3rem !important; }
          .top-bar-text {
            font-size: 0.65rem !important;
            line-height: 1.1;
          }
        }

/* ---- footer.php ---- */
.footer-grid a[href^="/services"]:hover,
        .footer-grid a[href^="/"]:hover,
        .footer-grid a[href^="mailto"]:hover,
        .footer-grid a[href^="https://wa.me"]:hover,
        .footer-grid a[href^="https://www.google.com/maps"]:hover {
          color: #ffffff !important;
        }

        .footer-grid a[href^="/services"],
        .footer-grid a[href^="/"],
        .footer-grid a[href^="mailto"],
        .footer-grid a[href^="https://wa.me"],
        .footer-grid a[href^="https://www.google.com/maps"] {
          transition: all 0.3s ease;
        }

        .footer-grid ul li a:hover {
          transform: translateX(4px);
        }

        @media (max-width: 1024px) {
          .footer-grid {
            grid-template-columns: 1fr 1fr !important;
            gap: 2rem !important;
          }
        }

        @media (max-width: 600px) {
          .footer-grid {
            grid-template-columns: 1fr !important;
            gap: 2.5rem !important;
          }

          .footer-grid > div:first-child {
            order: -1;
          }
        }

/* ---- chat.php ---- */
@keyframes slideUp {
                    from { opacity: 0; transform: translateY(30px) scale(0.95); }
                    to { opacity: 1; transform: translateY(0) scale(1); }
                }
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                @keyframes pulse {
                    0% { transform: scale(1); opacity: 0.4; }
                    70% { transform: scale(1.4); opacity: 0; }
                    100% { transform: scale(1.4); opacity: 0; }
                }
                @media (max-width: 500px) {
                    div[style*="width: 380px"] {
                        width: calc(100vw - 32px) !important;
                        height: calc(100vh - 110px) !important;
                        bottom: 6px !important;
                        right: 16px !important;
                        touch-action: none;
                    }
                    div[style*="width: 380px"] > div:nth-child(2) {
                        touch-action: pan-y;
                        overscroll-behavior: contain;
                    }
                }