<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Puente Cargo - Logística y Transportes España</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Strict Mobile Overrides for Header & Top Bar */
        @media screen and (max-width: 768px) {
            .top-bar {
                padding: 6px 10px !important;
                height: 32px !important;
                overflow: hidden !important;
                background: #001f3f !important;
            }
            .top-bar-container {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                height: 100% !important;
            }
            .top-bar-note {
                font-size: 0.72rem !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                max-width: 100% !important;
                color: #ff9933 !important;
            }
            .top-bar-contact {
                display: none !important; /* Completely hides email on mobile */
            }
        }
    </style>
</head>
<body>

<!-- TOP ANNOUNCEMENT BAR -->
<div class="top-bar">
    <div class="top-bar-container">
        <div class="top-bar-note">
            <i class="fa-solid fa-shield-heart"></i> <span>Envíos seguros y transporte garantizado en toda España e Internacional</span>
        </div>
        <div class="top-bar-contact">
            <a href="mailto:operaciones@puentecargo.es"><i class="fa-solid fa-envelope"></i> operaciones@puentecargo.es</a>
            <span class="divider">|</span>
            <a href="contact.php"><i class="fa-solid fa-headset"></i> Soporte 24/7</a>
        </div>
    </div>
</div>

<header class="navbar">
    <div class="nav-container">
        <!-- BRAND LOGO -->
        <a href="index.php" class="logo">
            <img src="assets/images/logo.png" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" alt="Puente Cargo Logo" style="height: 38px; width: auto; object-fit: contain;">
            <span style="display: none; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.4rem; color: var(--primary);">
                <i class="fa-solid fa-truck-fast" style="color: var(--accent);"></i> PUENTE<span style="color: var(--accent);">CARGO</span>
            </span>
        </a>

        <button class="mobile-toggle" id="mobileToggle" aria-label="Abrir menú">
            <i class="fa-solid fa-bars" id="toggleIcon"></i>
        </button>

        <ul class="nav-menu" id="navMenu">
            <li><a href="index.php" class="nav-link">Inicio</a></li>
            <li><a href="pet-transportation.php" class="nav-link">Mascotas</a></li>
            <li><a href="heavy-cargo.php" class="nav-link">Carga Pesada</a></li>
            <li><a href="track.php" class="nav-link">Rastrear</a></li>
            <li><a href="about.php" class="nav-link">Nosotros</a></li>
            <li><a href="contact.php" class="nav-link">Contacto</a></li>
            <li><a href="track.php" class="nav-link btn-track-nav"><i class="fa-solid fa-magnifying-glass"></i> Rastrear Envío</a></li>
        </ul>
    </div>
</header>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const mobileToggle = document.getElementById('mobileToggle');
        const navMenu = document.getElementById('navMenu');
        const toggleIcon = document.getElementById('toggleIcon');

        if (mobileToggle && navMenu) {
            mobileToggle.addEventListener('click', function () {
                navMenu.classList.toggle('active');
                if (navMenu.classList.contains('active')) {
                    toggleIcon.classList.remove('fa-bars');
                    toggleIcon.classList.add('fa-xmark');
                } else {
                    toggleIcon.classList.remove('fa-xmark');
                    toggleIcon.classList.add('fa-bars');
                }
            });

            const navLinks = navMenu.querySelectorAll('a');
            navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    navMenu.classList.remove('active');
                    toggleIcon.classList.remove('fa-xmark');
                    toggleIcon.classList.add('fa-bars');
                });
            });
        }
    });
</script>