/* ==========================================================================
           Variáveis & Reset
           ========================================================================== */
        :root {
            --bg-light: #F8F9FA; 
            --bg-white: #FFFFFF;
            --text-main: #2A2A2A; 
            --brand-blue: #0B3B60; 
            --accent-safety: #EA1D25; 
            --whatsapp: #25D366;
            --shadow-soft: 0 12px 32px rgba(11, 59, 96, 0.08); 
            --radius-soft: 8px; 
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }
		
		html, body {
			overflow-x: hidden;
			max-width: 100%;
			width: 100vw;
		}

        body {
            font-family: 'Work Sans', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-main);
            line-height: 1.6;
            overflow-x: hidden;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
        }

        h1, h2, h3, h4 {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            line-height: 1.1;
        }

        /* ==========================================================================
           Navegação
           ========================================================================== */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
            z-index: 1000;
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Oswald', sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--brand-blue);
            text-decoration: none;
            letter-spacing: 1px;
            z-index: 1001; 
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .logo svg { width: 28px; height: 28px; fill: var(--accent-safety); }
        .logo span { color: var(--accent-safety); }

        nav ul { list-style: none; display: flex; gap: 2rem; }
        nav a { text-decoration: none; color: var(--text-main); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.3s ease; }
        nav a:hover { color: var(--brand-blue); }

        .menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1001; }
        .menu-toggle .bar { width: 30px; height: 3px; background-color: var(--brand-blue); transition: 0.3s ease; border-radius: 3px; }

        /* Botões */
        .btn-cta { background: var(--accent-safety); color: white; font-family: 'Oswald', sans-serif; font-size: 1.2rem; padding: 1rem 2.5rem; text-decoration: none; text-transform: uppercase; border-radius: var(--radius-soft); box-shadow: 0 8px 20px rgba(255, 179, 0, 0.3); transition: all 0.3s ease; display: inline-block; border: none; cursor: pointer; }
        .btn-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(255, 179, 0, 0.4); }

        /* ==========================================================================
           Hero Section 
           ========================================================================== */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4rem;
            padding: 120px 5% 60px 5%; 
            position: relative;
        }

        .hero-content { flex: 1; max-width: 650px; }
        .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-blue); color: #fff; padding: 0.5rem 1.2rem; font-weight: 600; font-size: 0.9rem; margin-bottom: 1.5rem; border-radius: 50px; text-transform: uppercase; }
        .hero-badge svg { width: 16px; height: 16px; fill: var(--accent-safety); }
        .hero h1 { font-size: 4.5rem; margin-bottom: 1.5rem; color: var(--brand-blue); letter-spacing: -1px; }
        .hero p { font-size: 1.2rem; margin-bottom: 2.5rem; color: #555; max-width: 500px; }
        
        .hero-image-wrapper { flex: 1; display: flex; justify-content: flex-end; width: 100%; position: relative; }
        .hero-image { width: 100%; max-width: 600px; aspect-ratio: 4/3; background-color: #E9ECEF; border-radius: var(--radius-soft); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(11, 59, 96, 0.2); overflow: hidden; position: relative; z-index: 2; }
        

        /* ==========================================================================
           Barra de Ícones do Caminhoneiro (NOVO)
           ========================================================================== */
        .trucker-bar {
            background: var(--brand-blue);
            padding: 2rem 5%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1.5rem;
            margin-top: -30px;
            position: relative;
            z-index: 5;
            box-shadow: var(--shadow-soft);
        }

        .trucker-feature {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #fff;
            flex: 1;
            min-width: 200px;
        }

        .trucker-feature svg {
            width: 35px;
            height: 35px;
            fill: var(--accent-safety);
        }

        .trucker-feature span {
            font-family: 'Oswald', sans-serif;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* ==========================================================================
           Seções Gerais
           ========================================================================== */
        section { padding: 6rem 5%; position: relative; }
        .bg-white { background-color: var(--bg-white); }
        .bg-light { background-color: var(--bg-light); }
        .section-header { margin-bottom: 4rem; display: flex; align-items: center; gap: 1.5rem; position: relative; z-index: 2; }
        .section-header::before { content: ''; display: block; width: 60px; height: 6px; background-color: var(--accent-safety); border-radius: 3px; }
        .section-header h2 { font-size: 3.5rem; color: var(--brand-blue); }

        /* ==========================================================================
           Oficina & Loja
           ========================================================================== */
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; }
        .service-card { background: #fff; border-radius: var(--radius-soft); padding: 2.5rem; box-shadow: var(--shadow-soft); transition: transform 0.3s ease; }
        .service-card:hover { transform: translateY(-8px); }
        .icon-box { width: 60px; height: 60px; background: rgba(11, 59, 96, 0.05); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
        .icon-box svg { width: 32px; height: 32px; fill: var(--brand-blue); }
        .service-card h3 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--brand-blue); }
        .service-card p { color: #666; }

        /* ==========================================================================
           Produtos em Destaque & CARROSSEL DE PRODUTOS
           ========================================================================== */
        .featured-wrapper { display: flex; align-items: center; gap: 4rem; margin-bottom: 5rem; }
        .featured-video { flex: 1; aspect-ratio: 16/9; background: #1A1A1A; border-radius: var(--radius-soft); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); }
        
        .play-btn { width: 70px; height: 70px; background: var(--accent-safety); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; cursor: pointer; box-shadow: 0 0 20px rgba(255, 179, 0, 0.5); transition: transform 0.2s ease; }
        .play-btn:hover { transform: scale(1.1); }
        .play-btn::before { content: '▶'; color: var(--brand-blue); font-size: 1.5rem; margin-left: 5px; }
        .featured-info { flex: 1; }
        .featured-tag { display: inline-block; background: rgba(11, 59, 96, 0.1); color: var(--brand-blue); padding: 0.3rem 1rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; }
        .featured-info h3 { font-size: 2.5rem; color: var(--brand-blue); margin-bottom: 1rem; }
        .featured-info p { font-size: 1.1rem; color: #555; margin-bottom: 1rem; }

        /* Carrossel de Outros Produtos */
        .products-carousel-section { position: relative; padding-top: 2rem; border-top: 1px solid #E9ECEF; }
        .products-carousel-section h3 { font-size: 2rem; color: var(--brand-blue); margin-bottom: 2rem; display: flex; align-items: center; gap: 10px; }
        
        .carousel-controls { position: absolute; right: 0; top: 2rem; display: flex; gap: 10px; }
        .ctrl-btn { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #ddd; color: var(--brand-blue); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .ctrl-btn:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

        .products-slider {
            display: flex;
            gap: 2rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory; /* Efeito magnético ao deslizar */
            scrollbar-width: none; /* Oculta a barra no Firefox */
            padding-bottom: 20px;
        }
        .products-slider::-webkit-scrollbar { display: none; } /* Oculta barra no Chrome/Safari */

        .product-card {
            min-width: 280px;
            scroll-snap-align: start;
            background: #fff;
            border-radius: var(--radius-soft);
            box-shadow: var(--shadow-soft);
            padding: 1.5rem;
            transition: transform 0.3s ease;
            flex: 1;
        }
        .product-card:hover { transform: translateY(-5px); }
        
        .prod-img-placeholder {
            width: 100%;
            height: 200px;
            background: #f0f0f0;
            border-radius: 4px;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Oswald', sans-serif;
            color: #aaa;
            border: 1px dashed #ccc;
        }

        .product-card h4 { font-size: 1.3rem; color: var(--text-main); margin-bottom: 0.5rem; }
        .product-card span.tag { font-size: 0.8rem; color: var(--brand-blue); text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 10px; }

        /* ==========================================================================
           Restaurante & CARROSSEL DE FOTOS
           ========================================================================== */
        .rest-stop { 
			background: var(--brand-blue); 
			color: #fff; 
			text-align: center; /* Centraliza o título e elementos filhos */
		}

		.rest-container-centered {
			max-width: 1000px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		/* Ajuste do Título para Centralização */
		.section-header.centered {
			flex-direction: column;
			gap: 1rem;
			margin-bottom: 3rem;
		}

		.section-header.centered::before {
			margin: 0 auto; /* Centraliza o traço amarelo */
		}

		.section-header.centered h2 { 
			color: #fff; 
		}

		/* Container do Vídeo */
		.rest-video-main {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.square-video-wrapper {
			width: 100%;
			max-width: 550px; /* Um pouco maior já que agora é o único elemento */
			aspect-ratio: 1 / 1;
			border-radius: var(--radius-soft);
			overflow: hidden;
			box-shadow: 0 30px 60px rgba(0,0,0,0.5);
			background: #000;
			border: 5px solid rgba(255, 255, 255, 0.05);
			transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		/* Efeito sutil de flutuação ao passar o mouse */
		.square-video-wrapper:hover {
			transform: scale(1.02);
		}

		.square-video-wrapper iframe {
			width: 100%;
			height: 100%;
			display: block;
		}

		/* Ajuste Mobile */
		@media (max-width: 768px) {
			.services-grid {
				grid-template-columns: 1fr;
			}

			.location-info, 
			.map-placeholder {
				min-width: 100%;
			}

			.hero h1 {
				font-size: 2.5rem;
				word-wrap: break-word;
			}
			
			.section-header-row {
				flex-direction: column;
				align-items: flex-start;
				gap: 1rem;
			}
			
			.carousel-controls {
				position: relative;
				top: 0;
			}
			.square-video-wrapper {
				max-width: 100%;
				border-width: 3px;
			}
			.section-header.centered h2 {
				font-size: 2.5rem;
			}
		}
        /* ==========================================================================
           Equipe e Localização (Mantidos)
           ========================================================================== */
		   
		.section-header-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 1rem;
		}

		.section-description {
			font-size: 1.1rem;
			max-width: 600px;
			color: #555;
			margin-bottom: 3rem;
		}

		/* Container do Slider */
		.team-slider {
			display: flex;
			gap: 20px;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scrollbar-width: none;
			padding-bottom: 10px;
		}

		.team-slider::-webkit-scrollbar { display: none; }

		/* Card Individual */
		.team-member-card {
			min-width: calc(33.333% - 14px); /* Mostra 3 no desktop */
			scroll-snap-align: start;
			flex-shrink: 0;
		}

		.member-photo {
			width: 100%;
			aspect-ratio: 1 / 1; /* Força o formato QUADRADO */
			background-color: #eee;
			background-size: cover;
			background-position: center;
			border-radius: var(--radius-soft);
			position: relative;
			overflow: hidden;
			box-shadow: var(--shadow-soft);
			display: flex;
			align-items: flex-end;
		}

		/* Overlay com nome e cargo */
		.member-info {
			width: 100%;
			padding: 20px;
			background: linear-gradient(to top, rgba(11, 59, 96, 0.9), transparent);
			color: #fff;
		}

		.member-info h4 {
			font-family: 'Oswald', sans-serif;
			font-size: 1.4rem;
			margin-bottom: 2px;
		}

		.member-info span {
			font-size: 0.85rem;
			text-transform: uppercase;
			font-weight: 500;
			letter-spacing: 1px;
			color: var(--accent-safety);
		}

		/* Responsividade Mobile */
		@media (max-width: 992px) {
			.team-member-card { min-width: calc(50% - 10px); } /* 2 no tablet */
		}

		@media (max-width: 600px) {
			.team-member-card { min-width: 85%; } /* 1 e um pedaço do próximo no celular */
		}  
		
        .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem; }
        .team-member { background: #e0e0e0; aspect-ratio: 3/4; border-radius: var(--radius-soft); display: flex; align-items: flex-end; padding: 1.5rem; box-shadow: var(--shadow-soft); overflow: hidden; }
        .team-member span { background: rgba(255, 255, 255, 0.95); padding: 0.8rem 1.2rem; font-family: 'Oswald', sans-serif; font-size: 1.1rem; border-radius: 4px; color: var(--brand-blue); width: 100%; text-align: center; }

        .location-wrapper { display: flex; flex-wrap: wrap; gap: 3rem; }
        .location-info { flex: 1; min-width: 300px; }
        .highway-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--brand-blue); color: #fff; padding: 1rem 1.5rem; font-family: 'Oswald', sans-serif; font-size: 1.5rem; margin: 1.5rem 0; border-radius: var(--radius-soft); box-shadow: var(--shadow-soft); }
        .map-placeholder { flex: 2; min-width: 300px; height: 400px; background: #E9ECEF; border-radius: var(--radius-soft); box-shadow: inset 0 0 10px rgba(0,0,0,0.05); }

        footer { background: #1A1A1A; color: #fff; padding: 4rem 5%; text-align: center; }

        /* Botão WhatsApp Flutuante */
        .whatsapp-float { position: fixed; bottom: 30px; right: 30px; background-color: var(--whatsapp); color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4); z-index: 999; transition: all 0.3s ease; animation: pulse-wa 2s infinite; }
        .whatsapp-float:hover { transform: scale(1.1); animation: none; }
        .whatsapp-float svg { width: 35px; height: 35px; fill: white; }
        @keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

        /* Responsividade */
        @media (max-width: 992px) {
            .hero { flex-direction: column; text-align: center; gap: 2rem; }
            .hero-content { display: flex; flex-direction: column; align-items: center; }
            .hero h1 { font-size: 3.5rem; }
            .featured-wrapper { flex-direction: column; }
            .featured-video { width: 100%; }
        }
        @media (max-width: 768px) {
            .trucker-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.5rem 5%; }
            .rest-content { flex-direction: column; }
            .menu-toggle { display: flex; }
            nav ul { position: absolute; top: 70px; left: 0; width: 100%; background: #ffffff; flex-direction: column; align-items: center; gap: 0; box-shadow: 0 10px 20px rgba(0,0,0,0.1); max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; }
            nav ul.active { max-height: 400px; }
            nav ul li { width: 100%; text-align: center; }
            nav ul li a { display: block; padding: 1.2rem; border-bottom: 1px solid #eee; }
        }