@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');/* Estilos CSS - Apex Pneus (Clone) Vanilla CSS, Responsivo, Pixel-perfect*/:root { --primary-color: #001a65; /* Azul Escuro */ --secondary-color: #ed6404; /* Laranja */ --secondary-hover: #ff7a1a; --text-color: #333333; --light-bg: #f9f9f9; --white: #ffffff; --border-color: #eaeaea; --font-main: 'Montserrat', sans-serif; --header-height: 200px; /* Variável dependendo da tela */}* { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--secondary-color) var(--primary-color);}/* Barra de rolagem para navegadores baseados em WebKit */::-webkit-scrollbar { width: 10px; height: 10px;}::-webkit-scrollbar-track { background: var(--primary-color);}::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 5px; border: 2px solid var(--primary-color);}::-webkit-scrollbar-thumb:hover { background-color: var(--secondary-hover);}html { scroll-behavior: smooth; scroll-padding-top: 100px; /* Offset to prevent header overlapping content */}body { font-family: 'Montserrat', sans-serif; color: var(--text-color); line-height: 1.6; background-color: var(--white); margin: 0; padding: 0;}/* Screen Reader Only — visually hidden, accessible for SEO & a11y */.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}section { padding: 80px 0;}main { margin: 0; padding: 0; display: block;}a { text-decoration: none; color: inherit; transition: all 0.3s ease;}ul { list-style: none;}.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; width: 100%;}/* ========================================= HEADER STYLES ========================================= */.header-placeholder { width: 100%;}.main-header { background: var(--white); width: 100%; z-index: 1000; transition: all 0.3s ease-in-out; margin-bottom: 0;}/* Top Bar */.top-bar { background-color: var(--white); border-bottom: 1px solid var(--border-color); font-size: 13px; color: #666; padding: 8px 0;}.top-bar .container { display: flex; justify-content: space-between; align-items: center;}.top-bar-left { display: flex; gap: 20px; align-items: center;}.top-item i { color: var(--secondary-color); margin-right: 5px;}.top-link:hover { color: var(--secondary-color);}.top-bar-right { display: flex; gap: 15px;}.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: #f1f1f1; color: #333; border-radius: 50%; font-size: 14px;}.social-icon:hover { background-color: var(--secondary-color); color: var(--white); transform: translateY(-2px);}/* Main Header Info */.header-info { padding: 20px 0 0 0; background-color: var(--white);}.header-info .container { display: flex; justify-content: space-between; align-items: center;}.logo img { max-width: 280px; height: auto; display: block; transition: transform 0.3s ease;}.logo img:hover { transform: scale(1.06) translateY(-2px);}.contact-info { display: flex; gap: 30px;}.info-box { display: flex; align-items: center; gap: 15px;}.icon-wrapper { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background-color: transparent; border: 2px solid var(--border-color); border-radius: 50%; color: var(--secondary-color); font-size: 18px; transition: all 0.3s ease;}.icon-wrapper:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--white); transform: translateY(-3px);}.info-text { display: flex; flex-direction: column; font-size: 13px; line-height: 1.4;}.info-text strong { color: var(--primary-color); font-size: 14px; font-weight: 800; letter-spacing: -0.2px;}.info-text span { font-size: 14px; font-weight: 800; color: var(--primary-color);}.info-text a { text-decoration: none;}.info-text a:hover strong { color: var(--secondary-color);}/* Mobile Menu Toggle */.mobile-menu-toggle { display: none; font-size: 24px; color: var(--primary-color); cursor: pointer;}/* Navigation Bar */.main-nav { background-color: var(--primary-color); box-shadow: none; margin-bottom: 0; padding: 0;}.nav-container { display: flex; justify-content: space-between; align-items: center; position: relative; /* Para posicionar o mega menu */}.nav-links { display: flex; align-items: center;}.nav-links > li > a { display: inline-block; padding: 20px 25px; color: var(--white); font-weight: 600; font-size: 14px; text-transform: uppercase; position: relative;}.nav-links > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 4px; background-color: var(--secondary-color); transition: width 0.3s ease;}.nav-links > li > a:hover::after,.nav-links > li.active > a::after { width: 100%;}/* Dropdown Menu */.dropdown { position: relative;}.dropdown-menu { position: absolute; top: 100%; left: 0; width: 250px; background-color: var(--white); box-shadow: 0 10px 20px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 100; border-top: 3px solid var(--secondary-color);}.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0);}.dropdown-menu li { border-bottom: 1px solid var(--border-color);}.dropdown-menu li:last-child { border-bottom: none;}.dropdown-menu a:not(.btn-store-wa):not(.btn-store-loc) { display: block; padding: 15px 20px; color: #444; font-weight: 600; font-size: 14px; transition: all 0.3s ease;}.dropdown-menu a:not(.btn-store-wa):not(.btn-store-loc):hover { color: var(--secondary-color); padding-left: 25px; background-color: var(--light-bg);}/* Mega Menu Dropdown */@media (min-width: 1025px) { .main-nav { position: relative; } .nav-container { position: static !important; } .dropdown { position: static !important; } .dropdown-menu.mega-menu { left: 0 !important; right: 0 !important; width: 100% !important; }}.dropdown-menu.mega-menu { position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--white); box-shadow: 0 15px 35px rgba(0,0,0,0.15); opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1100; border-top: 4px solid var(--secondary-color); border-radius: 0 0 8px 8px; padding: 30px 40px 35px; pointer-events: none; /* Evita cliques quando oculto */}.dropdown-menu.mega-menu::before { content: ''; position: absolute; top: -25px; left: 0; right: 0; height: 25px; background-color: transparent; z-index: -1;}.dropdown:hover .dropdown-menu.mega-menu,.dropdown.hover .dropdown-menu.mega-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;}/* ---- 3-Column Store Cards Grid ---- */.mega-menu-stores-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; max-width: 1200px; margin: 0 auto;}.mega-store-card { background-color: #faf6f1; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative;}.mega-store-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);}/* Badge (TAGUATINGA / SIA / GAMA) */.mega-store-badge { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: var(--white); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; padding: 6px 22px; border-radius: 50px; z-index: 2; text-transform: uppercase; box-shadow: 0 3px 8px rgba(0, 26, 101, 0.35);}/* Facade Image */.mega-store-image { width: 100%; aspect-ratio: 16 / 9; height: auto; overflow: hidden;}.mega-store-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}.mega-store-card:hover .mega-store-image img { transform: scale(1.06);}/* Store Info Block */.mega-store-info { padding: 16px 18px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; flex-grow: 1;}.mega-store-info h4 { font-size: 15px; font-weight: 700; color: var(--primary-color); text-align: center; margin: 0; line-height: 1.3; text-transform: none !important;}/* Button Group */.mega-store-buttons { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: center;}/* WhatsApp Button (Green) */.btn-store-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: #25d366; color: var(--white) !important; font-size: 12px; font-weight: 700; padding: 10px 22px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.3px; transition: all 0.3s ease; white-space: nowrap; box-shadow: 0 3px 8px rgba(37, 211, 102, 0.25);}.btn-store-wa:hover { background-color: #1ebc5a; box-shadow: 0 5px 14px rgba(37, 211, 102, 0.35); color: var(--white) !important;}.btn-store-wa i { font-size: 14px;}/* Location Button (Outline) */.btn-store-loc { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: transparent; color: var(--primary-color) !important; font-size: 12px; font-weight: 700; padding: 9px 22px; border-radius: 50px; border: 2px solid var(--primary-color); text-transform: uppercase; letter-spacing: 0.3px; transition: all 0.3s ease; white-space: nowrap;}.btn-store-loc:hover { background-color: var(--primary-color); color: var(--white) !important; box-shadow: 0 5px 14px rgba(0, 26, 101, 0.25);}.btn-store-loc i { font-size: 12px;}.btn-text-mobile { display: none;}.btn-text-desktop { display: inline;}.mobile-store-btn,.mobile-map-btn { display: none;}/* CTA Button */.btn-loja { background-color: var(--secondary-color); color: var(--white); padding: 12px 25px; border-radius: 4px; font-weight: 700; font-size: 14px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.3s ease, background-color 0.3s ease;}.btn-loja:hover { background-color: var(--primary-color); color: var(--white); transform: scale(1.05);}.nav-cta .btn-loja { background-color: var(--primary-color) !important; color: var(--white) !important; border-radius: 50px !important; padding: 10px 25px !important; font-size: 13px !important; font-weight: 700 !important;}.nav-cta .btn-loja:hover { background-color: var(--secondary-color) !important; color: var(--white) !important;}.btn-whatsapp,.btn-whatsapp-cta,.floating-whatsapp { transition: transform 0.3s ease, background-color 0.3s ease;}.btn-whatsapp:hover,.btn-whatsapp-cta:hover,.floating-whatsapp:hover { transform: scale(1.05);}/* ========================================= HERO SECTION ========================================= *//* Hero Section */.hero { position: sticky; top: 95px; z-index: 1; width: 100%; overflow: hidden; padding: 0 !important; margin: 0; line-height: 0; font-size: 0; background-color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}.hero h1 { line-height: 1.2; margin-bottom: 20px; font-weight: 800;}.hero-slider { width: 100%; position: relative; aspect-ratio: 1920 / 717; /* Standard aspect ratio of main banners */ overflow: hidden;}@media (max-width: 768px) { .hero-slider { aspect-ratio: 16 / 9; /* More vertical space on tablets */ }}@media (max-width: 480px) { .hero-slider { aspect-ratio: 4 / 3; /* More vertical space on mobile phones */ }}.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 1s ease-in-out;}.slide.active { opacity: 1; visibility: visible;}.slide img { width: 100%; height: 100%; object-fit: cover; /* Crop and fill standard height */ object-position: center; display: block;}/* Ensure all scrolling sections layer above the sticky hero */section:not(.hero) { position: relative; z-index: 2;}/* ========================================= RESPONSIVE ========================================= */@media (max-width: 1024px) { .contact-info { display: none; } .mobile-menu-toggle { display: block; } .nav-links { display: none; width: 100%; flex-direction: column; background-color: var(--primary-color); position: absolute; top: 100%; left: 0; z-index: 999; box-shadow: 0 10px 15px rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.1); } .nav-links.active { display: flex; } .nav-links > li { width: 100%; } .nav-links > li > a { display: block; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.05); width: 100%; box-sizing: border-box; } .nav-links > li > a::after { display: none; } .dropdown-menu { position: static; width: 100%; box-shadow: none; background-color: rgba(255,255,255,0.05); border-top: none; border-bottom: 1px solid rgba(255,255,255,0.1); display: none; opacity: 1; visibility: visible; transform: none; transition: none; } .dropdown:hover .dropdown-menu { display: block; transform: none; } .dropdown-menu li { border-bottom: none; } .dropdown-menu a { color: var(--white); padding-left: 35px; } .dropdown-menu a:hover { color: var(--secondary-color); padding-left: 40px; } /* Responsive Mega Menu */ .dropdown-menu.mega-menu { position: static !important; opacity: 1 !important; visibility: visible !important; display: none; transform: none !important; box-shadow: none !important; border-top: none !important; padding: 15px 20px !important; background-color: rgba(255,255,255,0.05) !important; pointer-events: auto !important; } .dropdown:hover .dropdown-menu.mega-menu, .dropdown.hover .dropdown-menu.mega-menu, .dropdown.open .dropdown-menu.mega-menu { display: block !important; } .mega-menu-stores-grid { display: flex !important; flex-direction: column !important; gap: 10px !important; } .mega-store-card { background-color: rgba(255,255,255,0.1) !important; border-radius: 12px !important; flex-direction: column !important; align-items: stretch !important; padding: 16px !important; gap: 0 !important; box-shadow: none !important; } .mega-store-card:hover { transform: none !important; background-color: rgba(255,255,255,0.15) !important; } .mega-store-badge { position: static !important; transform: none !important; font-size: 9px !important; padding: 4px 14px !important; width: fit-content !important; margin-bottom: 8px !important; background-color: var(--secondary-color) !important; letter-spacing: 1.2px !important; } .mega-store-image { display: none !important; } .mega-store-info { padding: 0 !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; flex-wrap: nowrap !important; width: 100% !important; } .mega-store-info h4 { color: var(--white) !important; font-size: 15px !important; font-weight: 700 !important; white-space: normal !important; text-align: left !important; margin: 0 0 2px 0 !important; } .mega-store-buttons { flex-direction: row !important; gap: 6px !important; width: 100% !important; } .btn-text-desktop { display: none !important; } .btn-text-mobile { display: inline !important; } .btn-store-wa { font-size: 10px !important; padding: 10px 4px !important; width: 100% !important; flex: 1 !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; box-shadow: none !important; white-space: nowrap !important; } .btn-store-loc { font-size: 10px !important; padding: 9px 4px !important; width: 100% !important; flex: 1 !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; border-color: rgba(255,255,255,0.35) !important; color: var(--white) !important; white-space: nowrap !important; } .btn-store-loc:hover { background-color: rgba(255,255,255,0.15) !important; } .main-nav .container { justify-content: center; }}@media (max-width: 768px) { .top-bar-left { flex-direction: column; align-items: flex-start; gap: 5px; } .top-bar .container { flex-direction: column; gap: 10px; }}/* ========================================= COMMON SECTION STYLES ========================================= */.section-header { text-align: center; margin-bottom: 50px;}.section-header h2 { font-size: 36px; color: var(--primary-color); margin-bottom: 15px;}.section-header h2 span { color: var(--secondary-color);}.section-header p { font-size: 16px; color: #666; max-width: 600px; margin: 0 auto;}.text-center { text-align: center;}.accent-line { width: 60px; height: 4px; background-color: var(--secondary-color); margin: 20px 0;}/* ========================================= VITRINE DE PRODUTOS ========================================= */.products-section { padding: 80px 0 180px 0; background-image: linear-gradient(#001a65f2, #001a65f2), url('../assets/BANNER-1.webp'); background-attachment: fixed; background-position: top center; background-repeat: no-repeat; background-size: cover;}.products-section .section-header h2 { color: var(--white);}.products-section .section-header h2 span { color: var(--secondary-color);}.products-section .section-header p { color: rgba(255, 255, 255, 0.8);}.products-section .section-header p strong { color: var(--secondary-color);}.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;}.product-card { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; border: none; display: flex; flex-direction: column; justify-content: space-between; height: 100%;}.product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.3); border-color: transparent;}.product-image { padding: 30px; background-color: #f5f5f5; text-align: center;}.product-image img { max-width: 100%; height: auto; transition: transform 0.3s ease;}.product-card:hover .product-image img { transform: scale(1.1);}.product-content { padding: 25px; text-align: center; display: flex; flex-direction: column; flex-grow: 1;}.product-content h3 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}.price-prefix { font-size: 12px; color: #888; text-transform: uppercase; font-weight: 600; margin-top: 10px;}.price { font-size: 34px; font-weight: 900; background: linear-gradient(135deg, #001a65, #002e9c); color: #ffffff; border-radius: 8px; padding: 8px 24px; display: inline-block; margin: 10px auto; letter-spacing: -0.5px; box-shadow: 0 4px 15px rgba(0, 26, 101, 0.25); text-shadow: 0 2px 4px rgba(0,0,0,0.15);}.price-value { font-size: 24px; font-weight: 800; background-color: #001a65; color: #ffffff; border-radius: 6px; padding: 6px 18px; display: inline-block; margin: 8px auto; letter-spacing: -0.5px;}.price-suffix { font-size: 12px; font-weight: 600; color: #666; margin-bottom: 20px; text-transform: uppercase;}/* Custom Reflective Orange Shimmer Button for Pneu Cards */.product-card .btn-whatsapp { margin-top: auto; width: 100%; justify-content: center; background: linear-gradient(135deg, #ff6600, #ff3300); color: var(--white); font-size: 14px; font-weight: 800; text-transform: uppercase; padding: 12px 20px; border-radius: 6px; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 15px rgba(255, 51, 0, 0.35); transition: all 0.3s ease; z-index: 1;}.product-card .btn-whatsapp::before { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-25deg); animation: btnShimmer 3.5s infinite linear; z-index: 2;}@keyframes btnShimmer { 0% { left: -150%; } 100% { left: 150%; }}.product-card .btn-whatsapp:hover { background: linear-gradient(135deg, #ff8800, #ff4400); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(255, 51, 0, 0.55); border-color: rgba(255, 255, 255, 0.45); color: var(--white);}.btn-whatsapp { margin-top: auto; width: 100%; justify-content: center; background-color: #25D366; /* Cor do WhatsApp */ font-size: 14px; font-weight: 800; text-transform: uppercase; padding: 12px 20px; border-radius: 6px;}.btn-whatsapp:hover { background-color: #1ebe57;}/* ========================================= ÁREA DE SERVIÇOS ========================================= */.services-section { padding: 110px 0; background-image: linear-gradient(rgba(243, 112, 33, 0.97), rgba(243, 112, 33, 0.97)), url('../assets/BANNER-1.webp'); background-position: top center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}.services-section .section-header h2 { color: var(--white); font-size: 40px; font-weight: 700; text-shadow: 0 0 10px rgba(0, 0, 0, 0.22); text-transform: none; line-height: 1.3;}.services-section .section-header h2 span { color: var(--white);}.services-section .section-header p { color: rgba(255, 255, 255, 0.9); font-size: 18px; font-weight: 600; max-width: 600px; margin: 20px auto 0 auto;}.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px;}@media (max-width: 991px) { .services-grid { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } .services-section { padding: 60px 0; } .services-section .section-header h2 { font-size: 32px; }}.service-card { background-color: #ffffff; border-radius: 12px; padding: 0; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15); overflow: hidden; border: none; transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%;}.service-card:hover { box-shadow: 0 15px 35px rgba(0,0,0,0.2); transform: translateY(-5px);}.service-image { width: 100%; height: 230px; overflow: hidden;}.service-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}.service-card:hover .service-image img { transform: scale(1.05);}.service-content { padding: 25px 25px 0 25px; flex-grow: 1; display: flex; flex-direction: column; align-items: center; text-align: center;}.service-card .price-prefix { background-color: var(--secondary-color); color: var(--white); padding: 6px 14px; border-radius: 4px; font-size: 13px; font-weight: 700; text-transform: uppercase; margin-top: 15px; margin-bottom: 10px; display: inline-block;}.service-card .price-badge { background-color: var(--primary-color); color: var(--white); font-size: 26px; font-weight: 800; padding: 10px 25px; border-radius: 6px; margin-bottom: 20px; display: inline-block;}.service-card .card-divider { text-align: center; margin: 10px auto 20px auto;}.service-card .card-divider img { max-width: 100%; height: auto; display: block;}.service-card .service-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px;}.service-card .service-item { color: var(--primary-color); font-size: 16px; font-weight: 700;}.service-card .service-description { color: var(--primary-color); font-size: 15px; line-height: 1.6; margin: 25px 0 30px 0; text-align: center; display: flex; flex-direction: column; gap: 15px;}.service-card .service-description p { margin: 0; color: var(--primary-color); font-weight: 500;}.service-card .service-description p strong { font-weight: 700;}.service-card .btn-whatsapp { background-color: #00e676; color: var(--white); padding: 12px 25px; border-radius: 30px; font-weight: 700; font-size: 14px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; transition: all 0.3s ease; margin-bottom: 25px; margin-top: auto; text-decoration: none; width: 85%; box-shadow: 0 4px 10px rgba(0, 230, 118, 0.2);}.service-card .btn-whatsapp:hover { background-color: #00c853; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 230, 118, 0.4); color: var(--white);}.service-card .btn-whatsapp i { font-size: 18px;}/* Serviço em Destaque */.highlight-service { background-color: var(--primary-color); color: var(--white); border: none;}.highlight-service .service-content h3 { color: var(--white);}.highlight-service .service-content p { color: #e0e0e0;}.highlight-service .service-icon { font-size: 50px; color: var(--secondary-color); padding: 30px 30px 0; text-align: center;}@media (max-width: 768px) { .section-header h2 { font-size: 28px; } .products-section { padding: 50px 0 100px 0; } .services-section { padding: 50px 0; }}/* ========================================= RODAPÉ (FOOTER) ========================================= */.main-footer { background-image: linear-gradient(rgba(0, 26, 101, 0.95), rgba(0, 26, 101, 0.95)), url('../assets/pneusbackgroundrodape-scaled-1.webp'); background-position: center center; background-repeat: no-repeat; background-size: cover; color: var(--white); padding-top: 130px; font-size: 14px;}.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 80px;}.footer-col h4 { font-size: 18px; margin-bottom: 20px; color: var(--secondary-color); text-transform: uppercase;}.brand-info .footer-logo { max-width: 200px; margin-bottom: 20px;}.brand-info p { color: #ccc; margin-bottom: 15px;}.brand-info .cnpj { font-weight: 600; color: var(--white);}.quick-links ul li { margin-bottom: 12px;}.quick-links a { color: #ccc;}.quick-links a:hover { color: var(--secondary-color); padding-left: 5px;}.address-info address { font-style: normal;}.address-info p { color: var(--white); font-weight: 600; margin-bottom: 15px; display: flex; gap: 15px;}.address-info i { color: var(--secondary-color); margin-top: 3px;}.address-info a { color: var(--white); font-weight: 600;}.address-info a:hover { color: var(--secondary-color);}.business-hours li { display: flex; justify-content: space-between; margin-bottom: 12px; color: #ccc; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;}.business-hours span { font-weight: 600; color: var(--white);}.sub-footer { background-color: #001247; padding: 20px 0; text-align: center;}.sub-footer p { color: #aaa; font-size: 13px;}/* ========================================= BOTÃO FLUTUANTE DO WHATSAPP ========================================= */.floating-whatsapp { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background-color: #25D366; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 35px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); z-index: 1000; animation: pulse 2s infinite; transition: transform 0.3s ease;}.floating-whatsapp:hover { transform: scale(1.1); background-color: #1ebe57; color: #fff;}@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }}/* ========================================= SEÇÃO DEDICADA: CÂMBIO ========================================= */.cambio-section { position: relative; z-index: 2; padding: 120px 0 100px 0; background-color: #ffffff; overflow: hidden;}.cambio-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../assets/logo.webp'); background-position: bottom right; background-repeat: no-repeat; background-size: 43% auto; opacity: 0.3; pointer-events: none; z-index: 1;}@media (max-width: 768px) { .cambio-section { padding: 60px 0 50px 0; } .cambio-section::before { background-size: 70% auto; opacity: 0.15; }}.cambio-container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;}.cambio-content { order: 1;}.cambio-content h2 { font-size: 28px; color: var(--primary-color); line-height: 1.3; font-weight: 800; margin-bottom: 20px;}.cambio-desc { font-size: 14px; color: #555; margin-bottom: 25px; line-height: 1.7;}.highlight-box { display: flex; gap: 18px; background-color: var(--secondary-color); padding: 22px 25px; border-left: none; border-radius: 12px; margin-bottom: 25px; align-items: center;}.highlight-icon { flex-shrink: 0; width: 50px; height: 50px; background-color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--secondary-color);}.highlight-text p { font-weight: 500; color: var(--white); margin-bottom: 0; font-size: 13px; line-height: 1.6;}.highlight-text span { font-size: 13px; color: rgba(255, 255, 255, 0.85);}/* Botão Agendar Agora - Câmbio (laranja) */.btn-cambio-cta { background-color: var(--secondary-color); color: var(--white); padding: 14px 28px; border-radius: 6px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; text-transform: uppercase;}.btn-cambio-cta:hover { background-color: var(--secondary-hover); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(237, 100, 4, 0.3); color: var(--white);}.btn-whatsapp-cta { background-color: #25D366; color: var(--white); padding: 15px 30px; border-radius: 4px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease;}.btn-whatsapp-cta:hover { background-color: #1ebe57; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(37,211,102,0.3);}.cambio-image { order: 2; text-align: center;}.cambio-image img { max-width: 100%; height: auto; border-radius: 8px; transition: transform 0.5s ease;}.cambio-image img:hover { transform: scale(1.03);}/* ========================================= CAROUSEL DE MARCAS (INFINITE MARQUEE) ========================================= */.brands-section { position: relative; z-index: 2; padding: 120px 20px 120px 20px; background-color: var(--secondary-color); border-top: none; border-bottom: none; overflow: hidden; -webkit-clip-path: polygon(0% 0%, 100% 8%, 100% 92%, 0% 100%); clip-path: polygon(0% 0%, 100% 8%, 100% 92%, 0% 100%); margin-top: -40px;}.brands-header { text-align: center; margin-bottom: 40px;}.brands-header h2 { font-size: 32px; color: var(--white); font-weight: 800; margin-bottom: 15px; line-height: 1.3;}.brands-header p { color: rgba(255, 255, 255, 0.9); font-size: 16px;}.accent-line-center { width: 60px; height: 3px; background-color: #ffffff; margin: 20px auto; border: none;}.brands-slider { width: 100%; overflow: hidden; position: relative; padding: 20px 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);}.brands-track { display: flex; width: calc(250px * 18); animation: scrollBrands 40s linear infinite;}/* Carousel runs continuously without pause on hover */.brand-slide { width: 220px; height: 62px; border-radius: 50px; display: flex; align-items: center; justify-content: center; margin: 0 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; background: transparent; box-shadow: none; cursor: pointer; flex-shrink: 0;}.brand-slide:hover { transform: translateY(-5px) scale(1.08); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);}.brand-slide img { width: 100%; height: 100%; object-fit: fill; border-radius: 50px; transition: all 0.3s ease;}@keyframes scrollBrands { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 9)); }}/* ========================================= SOBRE A APEX ========================================= */.about-section { padding: 40px 0 0 0; background-color: var(--white);}/* Título centralizado */.about-title-block { text-align: center; margin-bottom: 50px;}.about-title-block h2 { color: var(--primary-color); font-size: 36px; font-weight: 800;}.about-title-block h2 span { color: var(--secondary-color);}.about-title-block .about-intro { font-size: 15px; color: #555; max-width: 700px; margin: 0 auto; line-height: 1.7;}/* Grid Inteligente com template-areas */.about-grid-3col { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 25px; align-items: stretch; grid-template-areas: "missao missao video" "valores comprar video" "valores comprar pneus";}@media (max-width: 992px) { .about-grid-3col { grid-template-columns: 1fr; grid-template-areas: "missao" "valores" "comprar" "video" "pneus"; }}/* Divisor de título original */.about-title-divider { text-align: center; margin: 15px 0 25px 0;}.about-title-divider img { max-width: 150px; height: auto; display: inline-block;}/* Card Missão (estendido por 2 colunas) */.about-card-missao { grid-area: missao; background-color: var(--secondary-color); border-radius: 16px; padding: 35px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; position: relative;}.about-card-missao:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);}.about-card-missao-text { flex: 1; max-width: 60%; z-index: 2;}.about-card-missao-text h3 { color: var(--white); font-size: 24px; font-weight: 800; margin-bottom: 12px;}.about-card-missao-text p { color: rgba(255, 255, 255, 0.95); font-size: 14px; line-height: 1.6; margin: 0;}.about-card-missao-img { position: absolute; right: 15px; bottom: -15px; width: 290px; display: flex; align-items: center; justify-content: center; z-index: 1;}.about-card-missao-img img { width: 100%; height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15));}@media (max-width: 768px) { .about-card-missao { flex-direction: column; align-items: flex-start; } .about-card-missao-img { width: 120px; align-self: flex-end; margin-top: 10px; }}/* Card Valores com Banner de Serviços */.about-card-valores { grid-area: valores; background-color: var(--white); border-radius: 16px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #eef0f2; overflow: hidden; display: flex; flex-direction: column;}.about-card-valores:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);}.about-card-valores-banner { width: 100%;}.about-card-valores-banner img { width: 100%; height: auto; display: block; object-fit: cover;}.about-card-valores-content { padding: 30px 25px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 15px; flex-grow: 1;}.about-card-valores-content h3 { color: var(--primary-color); font-size: 24px; font-weight: 800; margin: 0;}.about-card-valores-content p { color: #555; font-size: 14px; line-height: 1.6; margin: 0;}.about-card-valores-content .btn-agendar { margin-top: auto;}/* Bloco Como Comprar com Imagem do Carro */.about-como-comprar-card { grid-area: comprar; background-color: #f8f9fa; border: 1px solid #eef0f2; border-radius: 16px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04); overflow: hidden; display: flex; flex-direction: column; padding: 30px 0 20px 0;}.about-como-comprar-content { padding: 0 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 15px;}.about-como-comprar-content h3 { color: var(--primary-color); font-size: 24px; font-weight: 800; margin: 0;}.about-como-comprar-content p { color: #555; font-size: 14px; line-height: 1.6; margin: 0;}.btn-fale-apex { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: var(--primary-color); color: var(--white); padding: 12px 25px; border-radius: 50px; font-weight: 700; font-size: 13px; text-transform: uppercase; transition: all 0.3s ease; width: fit-content;}.btn-fale-apex:hover { background-color: var(--secondary-color); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); color: var(--white);}.btn-agendar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background-color: var(--secondary-color); color: var(--white); padding: 12px 25px; border-radius: 50px; font-weight: 700; font-size: 13px; text-transform: uppercase; transition: all 0.3s ease; width: fit-content;}.btn-agendar:hover { background-color: var(--secondary-hover); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(237,100,4,0.3); color: var(--white);}/* Imagem do carro no elevador */.about-car-block { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: auto;}.about-car-block img { width: 100%; max-width: 100%; height: auto; display: block;}/* Vídeo institucional (Mockup de smartphone com borda azul grossa do original) */.about-video-block { grid-area: video; position: relative; border: 14px solid var(--primary-color); border-radius: 36px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); background-color: var(--primary-color); transition: transform 0.3s ease, box-shadow 0.3s ease;}.about-video-block::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 15px; background-color: var(--primary-color); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; z-index: 10;}.about-video-block:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);}.video-container { position: relative; width: 100%; padding-top: 177.77%; /* Proporção 9:16 vertical original */ background-color: #000;}.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity 0.5s ease;}.video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background-color: var(--secondary-color); color: var(--white); border: none; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: all 0.3s ease; box-shadow: 0 0 0 0 rgba(237, 100, 4, 0.5); animation: playPulse 2s infinite;}.video-play-btn i { margin-left: 5px;}.video-play-btn:hover { background-color: var(--primary-color); transform: translate(-50%, -50%) scale(1.1);}@keyframes playPulse { 0% { box-shadow: 0 0 0 0 rgba(237, 100, 4, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(237, 100, 4, 0); } 100% { box-shadow: 0 0 0 0 rgba(237, 100, 4, 0); }}.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1;}/* Bloco pneus - fundo laranja com pneus em pé */.about-pneus-block { grid-area: pneus; background-color: var(--secondary-color); border-radius: 16px; overflow: visible; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; height: 100%; min-height: 180px;}.about-pneus-block:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);}.about-pneus-block img { position: absolute; height: 114%; width: auto; left: -40px; bottom: -15px; display: block;}/* ========================================= SEÇÃO DE ESTATÍSTICAS (CONTADORES) ========================================= */.stats-section { padding: 25px 0 70px 0; background-color: var(--white); color: var(--text-color); position: relative; overflow: hidden;}.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; z-index: 2; border-radius: 12px; overflow: hidden; padding: 0; box-shadow: none;}.stat-card { padding: 40px 20px; text-align: center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border: none;}.stat-card:nth-child(1) { background-color: #ed6404; color: var(--white);}.stat-card:nth-child(2) { background-color: #001a65; color: var(--white);}.stat-card:nth-child(3) { background-color: #001a65; color: var(--white);}.stat-card:nth-child(4) { background-color: #ed6404; color: var(--white);}.stat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2); z-index: 3;}.stat-title { font-size: 14px; font-weight: 600; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-top: 8px; letter-spacing: 1px;}.stat-number-wrapper { font-size: 48px; font-weight: 800; color: var(--white); line-height: 1.1; display: flex; justify-content: center; align-items: baseline;}.stat-prefix, .stat-suffix { font-size: 28px; font-weight: 700;}@media (max-width: 991px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }}@media (max-width: 575px) { .stats-grid { grid-template-columns: 1fr; gap: 15px; } .stat-card { padding: 25px 15px; } .stat-number-wrapper { font-size: 40px; } .stat-prefix, .stat-suffix { font-size: 24px; }}/* ========================================= SERVIÇOS CARD PRICING AND ENHANCEMENT ========================================= */.price-value { font-size: 24px; font-weight: 800; color: var(--secondary-color); margin-bottom: 10px;}/* ========================================= LOCALIZADOR DE LOJAS ========================================= */.lojas-section { position: relative; background-image: url('../assets/mapa_aguas_claras_1920x1080.webp'); background-size: cover; background-position: center; background-attachment: fixed; padding: 110px 0; z-index: 2;}.lojas-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; opacity: 0.89; z-index: 1;}.lojas-section .container { position: relative; z-index: 2;}.lojas-facade-wrapper { text-align: center; margin-bottom: 0; z-index: 3; position: relative;}.lojas-facade-img { max-width: 51%; height: auto; display: inline-block; transition: transform 0.3s ease;}.lojas-facade-img:hover { transform: translateY(3px);}.lojas-content-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: -80px; margin-bottom: 50px; position: relative; z-index: 2;}.lojas-col { background-color: #ffffff; border-style: solid; border-color: #F5F4F4;}.lojas-col-left { border-width: 5px 2.5px 5px 5px; padding: 110px 50px 100px 50px;}.lojas-col-left h2 { font-size: 30px; font-weight: 700; color: var(--secondary-color); text-align: center; margin-bottom: 25px; line-height: 1.3;}.lojas-col-left .lojas-text { font-size: 18px; font-weight: 600; color: var(--primary-color); text-align: center; line-height: 1.7;}.lojas-col-left .lojas-text p { margin-bottom: 20px;}.lojas-col-left .lojas-text p:last-child { margin-bottom: 0;}.lojas-col-right { border-width: 5px 5px 5px 2.5px; padding: 110px 70px 50px 70px; display: flex; flex-direction: column; justify-content: flex-start;}.lojas-col-right h2 { font-size: 30px; font-weight: 700; color: var(--secondary-color); text-align: left; margin-bottom: 25px; line-height: 1.3;}.lojas-list-new { list-style: none; padding: 0; margin: 0 0 35px 0;}.lojas-list-new li { font-size: 18px; font-weight: 600; color: var(--primary-color); margin-bottom: 15px; display: flex; align-items: center; gap: 12px;}.lojas-list-new li a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease;}.lojas-list-new li a:hover { color: var(--secondary-color); text-decoration: underline;}.lojas-list-new li i { color: var(--secondary-color); font-size: 16px;}.btn-fale-apex { background-color: var(--secondary-color); color: var(--white); padding: 15px 30px; border-radius: 50px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; text-transform: uppercase; width: fit-content; border: none; text-decoration: none;}.btn-fale-apex:hover { background-color: var(--secondary-hover); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(237, 100, 4, 0.3); color: var(--white);}.lojas-map-wrapper { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; z-index: 2;}@media (max-width: 768px) { .lojas-facade-img { max-width: 80%; } .lojas-content-grid { grid-template-columns: 1fr; margin-top: -40px; } .lojas-col-left { border-width: 5px 5px 2.5px 5px; padding: 60px 20px 40px 20px; } .lojas-col-right { border-width: 2.5px 5px 5px 5px; padding: 40px 20px 60px 20px; align-items: center; } .lojas-col-right h2 { text-align: center; } .lojas-list-new { align-self: center; } .btn-fale-apex { align-self: center; }}/* ========================================= TRABALHE CONOSCO CUSTOM STYLING (MATCHING PRINT) ========================================= */.trabalhe-section { position: relative; padding: 80px 0 100px 0; background-color: #ffffff; color: var(--text-color); overflow: visible; z-index: 5;}.trabalhe-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; position: relative;}.trabalhe-title-box { text-align: left;}.trabalhe-title-box h2 { font-size: 55px; font-weight: 800; line-height: 1.1; color: var(--primary-color); margin-bottom: 0;}.trabalhe-sub { font-size: 45px; font-weight: 800; color: var(--secondary-color);}/* Vertical dashed divider and scissors */.trabalhe-divider { position: absolute; left: 42%; top: -20px; bottom: -20px; width: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none;}.trabalhe-divider-line { width: 0; height: 100%; border-left: 2px dashed #cccccc;}.trabalhe-divider-icon { position: absolute; top: 50%; transform: translateY(-50%) rotate(135deg); background-color: #ffffff; padding: 15px 0; color: #b3b3b3; font-size: 32px;}.trabalhe-content-box { text-align: left; padding-left: 20px; position: relative; z-index: 2;}.trabalhe-content-box h3 { font-size: 28px; font-weight: 700; color: var(--primary-color); margin-bottom: 10px;}.trabalhe-accent-line { margin: 15px 0 20px 0;}.trabalhe-accent-line img { display: block; height: auto;}.trabalhe-content-box p { font-size: 16px; color: #555; margin-bottom: 30px; font-weight: 600; max-width: 450px; line-height: 1.6;}/* Orange rounded pill button for Enviar Currículo */.btn-curriculo-cta { background-color: var(--secondary-color); color: var(--white) !important; padding: 15px 35px; border-radius: 50px; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s ease; text-transform: uppercase; border: none; box-shadow: 0 4px 15px rgba(237, 100, 4, 0.2); text-decoration: none;}.btn-curriculo-cta:hover { background-color: var(--secondary-hover); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(237, 100, 4, 0.4); color: var(--white) !important;}/* Stacked tires overlapping the bottom border into the footer */.trabalhe-tires { position: absolute; right: 0px; bottom: -190px; width: 270px; z-index: 10; pointer-events: none;}.trabalhe-tires img { width: 100%; height: auto; display: block;}/* Responsive adjustments */@media (max-width: 1024px) { .trabalhe-tires { right: -20px; width: 230px; bottom: -170px; } .trabalhe-divider { left: 40%; }}@media (max-width: 991px) { .trabalhe-section { padding: 60px 0 160px 0; } .trabalhe-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .trabalhe-title-box { text-align: center; } .trabalhe-content-box { text-align: center; padding-left: 0; } .trabalhe-accent-line { display: flex; justify-content: center; } .trabalhe-content-box p { margin: 0 auto 30px auto; } .trabalhe-divider { display: none; } .trabalhe-tires { position: relative; bottom: 0; right: 0; margin: 20px auto 0 auto; width: 250px; }}/* ========================================= MEDIA QUERIES (RESPONSIVO ADICIONAL) ========================================= */@media (max-width: 991px) { .cambio-container, .about-grid, .lojas-header-grid, .trabalhe-grid { grid-template-columns: 1fr; gap: 40px; } .about-media { flex-direction: column-reverse; } .video-container { max-width: 450px; margin: 0 auto; padding-top: 100%; /* Make video slightly wider on mobile for better visibility */ } .trabalhe-title-box { text-align: center; } .trabalhe-title-box h2 { font-size: 42px; } .trabalhe-sub { font-size: 34px; }}/* ========================================= SEÇÃO DE OFERTAS (CARROSSEL INFINITO) ========================================= */.offers-banner-section { position: relative; z-index: 1; margin-top: -50px; padding: 180px 0 20px 0; background-color: #ffffff; overflow: hidden;}.offers-banner-section .section-header h2 { color: var(--primary-color);}.offers-banner-section .section-header h2 span { color: var(--secondary-color);}.offers-banner-section .section-header p { color: #666;}.offers-slider { width: 100%; overflow: hidden; position: relative; padding: 30px 0;}.offers-track { display: flex; width: calc(600px * 12); animation: scrollOffers 55s linear infinite;}.offers-slider:hover .offers-track,.offers-track:hover { animation-play-state: paused !important;}.offer-slide { flex-shrink: 0; width: 560px; margin: 0 20px; border-radius: 0; overflow: hidden; box-shadow: none; transition: transform 0.4s ease; display: block; background: transparent; cursor: pointer;}.offer-slide:hover { transform: translateY(-10px) scale(1.04);}.offer-slide:active { transform: translateY(-4px) scale(0.98); transition: transform 0.1s ease;}.offer-slide img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 12px; transition: transform 0.4s ease, box-shadow 0.4s ease;}.offer-slide:hover img { transform: scale(1.02); box-shadow: none;}@keyframes scrollOffers { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-600px * 6)); }}/* ========================================= STICKY FLOATING HEADER ON SCROLL ========================================= */.main-header.scrolled { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); width: 95%; max-width: 1200px; background-color: var(--white); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); border-radius: 15px; z-index: 1000; animation: floatHeaderDown 0.4s ease; display: flex; justify-content: flex-start; align-items: center; padding: 0 30px; height: 80px;}.main-header.scrolled .top-bar { display: none;}.main-header.scrolled .header-info { padding: 0; background: transparent; display: flex; align-items: center; flex-grow: 0 !important; flex-shrink: 0 !important; width: auto !important; margin-right: 40px;}.main-header.scrolled .header-info .container { padding: 0; margin: 0; width: auto !important; max-width: none !important; display: block;}.main-header.scrolled .logo img { max-width: 180px;}.main-header.scrolled .contact-info { display: none;}.main-header.scrolled .main-nav { background-color: transparent; box-shadow: none; position: static; padding: 0; flex: 1 1 auto !important; width: auto !important; display: flex; align-items: center;}.main-header.scrolled .main-nav .container { padding: 0; margin: 0; width: 100% !important; max-width: none !important; display: flex; justify-content: space-between; align-items: center; position: static !important;}.main-header.scrolled .nav-links { display: flex; align-items: center; margin: 0; padding: 0;}.main-header.scrolled .nav-links > li > a { color: var(--primary-color); padding: 10px 15px; font-size: 13px;}.main-header.scrolled .nav-links > li > a:hover { color: var(--secondary-color);}.main-header.scrolled .nav-cta { display: flex; align-items: center;}@keyframes floatHeaderDown { from { transform: translate(-50%, -100%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; }}.nav-cta { display: flex; align-items: center; gap: 20px;}.nav-whatsapp { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 700; font-size: 14px; text-decoration: none; transition: color 0.3s ease;}.nav-whatsapp i { color: #25d366; font-size: 18px;}.nav-whatsapp:hover { color: var(--secondary-color);}.main-header.scrolled .nav-whatsapp { color: var(--primary-color);}.main-header.scrolled .nav-whatsapp:hover { color: var(--secondary-color);}.main-header:not(.scrolled) .nav-whatsapp { display: none;}@media (max-width: 1024px) { .header-placeholder { height: auto; } .main-header.scrolled { width: 100%; max-width: 100%; top: 0; border-radius: 0; transform: none; left: 0; animation: none; } .main-header.scrolled .main-nav { position: relative; }}/* Ajuste de cantos e transição do Mega Menu no cabeçalho flutuante */.main-header.scrolled:has(.dropdown:hover),.main-header.scrolled:has(.dropdown.hover) { border-radius: 15px 15px 0 0 !important;}.main-header.scrolled .dropdown-menu.mega-menu { border-radius: 0 0 15px 15px !important; border-top: 3px solid var(--secondary-color) !important; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;}/* Efeito de Sobreposição (Parallax Sticky) do Banner Principal */.hero { position: sticky !important; top: 0; z-index: 1;}/* Garante que a seção de baixo passe por cima do banner */.hero + section,.cambio-section { position: relative; z-index: 10; background-color: #ffffff; /* Fundo sólido obrigatório para ocultar o banner de trás */}/* --- BOTÕES FLUTUANTES DE CONVERSÃO --- */.float-btn { position: fixed; bottom: 30px; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #ffffff !important; font-size: 32px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 9999; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none;}.float-btn:hover { transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.35);}.float-phone { left: 30px; background-color: #007bff; /* Azul de Ligação */}.float-wa { right: 30px; background-color: #25D366; /* Verde Oficial WhatsApp */}.float-btn i { margin: 0;}@media (max-width: 768px) { .float-btn { width: 50px; height: 50px; font-size: 26px; bottom: 20px; } .float-phone { left: 20px; } .float-wa { right: 20px; }}/* ========================================= *//* --- CORREÇÕES MOBILE PIXEL-PERFECT --- *//* ========================================= */@media (max-width: 1024px) { /* 1. Limpeza do Topo e Ocultações */ .top-bar, .contact-info-top, .header-top, .contact-info, .nav-cta { display: none !important; } .about-section, .stats-section, .trabalhe-section { display: none !important; } /* 2. Cabeçalho Responsivo */ .header-placeholder { height: 60px !important; display: block !important; } .main-header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1000 !important; background-color: #ffffff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; padding: 0 !important; display: block !important; transform: none !important; animation: none !important; } .header-info { padding: 10px 15px !important; background-color: #ffffff !important; position: relative !important; z-index: 1000 !important; } .header-info .container { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; } .logo { margin-right: auto !important; } .logo img { max-height: 40px !important; width: auto !important; } .mobile-store-btn, .mobile-map-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ff6600 !important; /* Orange icon to match branding theme */ font-size: 22px !important; margin-right: 15px !important; text-decoration: none !important; transition: transform 0.2s ease !important; z-index: 1001 !important; } .mobile-store-btn:hover, .mobile-map-btn:hover { transform: scale(1.1) !important; } .mobile-menu-toggle { display: block !important; font-size: 24px !important; color: #001a65 !important; cursor: pointer !important; z-index: 1001 !important; } .main-nav { position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important; z-index: 999 !important; background-color: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: block !important; } .main-nav .container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .nav-links { display: none !important; width: 100% !important; flex-direction: column !important; margin: 0 !important; padding: 0 !important; } .nav-links.active { display: flex !important; background-color: #001a65 !important; padding: 10px 0 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; } .nav-links li a { color: #ffffff !important; padding: 12px 20px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; display: block !important; width: 100% !important; } /* Override scrolled sticky header classes on mobile/tablet */ .main-header.scrolled { position: fixed !important; top: 0 !important; left: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; height: auto !important; background-color: #ffffff !important; border-radius: 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; padding: 0 !important; display: block !important; animation: none !important; } .main-header.scrolled .header-info { display: flex !important; justify-content: flex-end !important; align-items: center !important; padding: 10px 15px !important; width: 100% !important; margin-right: 0 !important; } .main-header.scrolled .header-info .container { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; } .main-header.scrolled .logo img { max-height: 40px !important; width: auto !important; } .main-header.scrolled .mobile-store-btn, .main-header.scrolled .mobile-map-btn { display: inline-flex !important; } .main-header.scrolled .mobile-menu-toggle { display: block !important; font-size: 24px !important; color: #001a65 !important; cursor: pointer !important; } .main-header.scrolled .main-nav { position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important; z-index: 999 !important; background-color: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; display: block !important; } .main-header.scrolled .main-nav .container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } .main-header.scrolled .nav-links { display: none !important; flex-direction: column !important; width: 100% !important; background-color: transparent !important; padding: 0 !important; } .main-header.scrolled .nav-links.active { display: flex !important; background-color: #001a65 !important; padding: 10px 0 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; } .main-header.scrolled .nav-links > li > a { color: #ffffff !important; padding: 12px 20px !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; display: block !important; width: 100% !important; } .main-header.scrolled .nav-cta { display: none !important; }}@media (max-width: 768px) { .hero { position: relative !important; top: 0 !important; z-index: 2 !important; } .hero-slider { aspect-ratio: 1920 / 717 !important; height: auto !important; min-height: auto !important; } .slide img { object-fit: contain !important; width: 100% !important; height: auto !important; } /* 4. Vitrine de Pneus com Scroll Horizontal e Banner Azul */ .products-section { background: #ffffff !important; padding: 30px 0 !important; } .products-section .section-header { margin-bottom: 25px !important; } .products-section .section-header h2 { color: #001a65 !important; font-size: 24px !important; font-weight: 800 !important; text-transform: none !important; margin-bottom: 8px !important; line-height: 1.2 !important; } .products-section .section-header p { color: #666 !important; font-size: 15px !important; margin-top: 5px !important; line-height: 1.4 !important; } .products-section .section-header p strong { color: var(--secondary-color) !important; } .products-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow: hidden !important; gap: 0 !important; padding: 15px 0 !important; } .product-card { flex: 0 0 260px !important; max-width: 260px !important; margin: 0 8px !important; scroll-snap-align: center !important; position: relative !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; height: auto !important; } .product-image { padding: 0 !important; background-color: transparent !important; display: flex !important; justify-content: center !important; align-items: center !important; } .product-image img { max-height: none !important; width: 100% !important; height: auto !important; margin: 0 auto !important; display: block !important; } .product-card:hover { transform: none !important; box-shadow: none !important; } .product-card:hover .product-image img { transform: none !important; } .product-content { padding: 15px 15px !important; display: block !important; height: auto !important; position: relative !important; } .product-content h3 { display: none !important; } .price-prefix { display: block !important; background-color: #2b3b64 !important; color: #ffffff !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; padding: 10px !important; margin: 0 !important; border-radius: 6px 6px 0 0 !important; text-align: center !important; letter-spacing: 0.5px !important; } .price { display: block !important; background: #df580a !important; color: #ffffff !important; font-size: 24px !important; font-weight: 800 !important; padding: 10px 10px 0 10px !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; text-align: center !important; letter-spacing: -0.5px !important; } .price-suffix { display: block !important; background: #df580a !important; color: #ffffff !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; padding: 0 10px 10px 10px !important; margin: 0 0 12px 0 !important; border-radius: 0 0 6px 6px !important; text-align: center !important; } .product-card .btn-whatsapp { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: #17d14c !important; color: #ffffff !important; font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase !important; padding: 12px !important; border-radius: 6px !important; margin: 0 !important; box-shadow: none !important; border: none !important; width: 100% !important; text-align: center !important; position: static !important; opacity: 1 !important; z-index: auto !important; } .product-card .btn-whatsapp::before { display: none !important; } .product-card .btn-whatsapp i { display: inline-block !important; font-size: 18px !important; color: #ffffff !important; } /* 4.5. Seção de Marcas (Laranja) no Mobile */ .brands-section { padding: 75px 20px 75px 20px !important; margin-top: -30px !important; margin-bottom: -30px !important; -webkit-clip-path: polygon(0% 0%, 100% 4%, 100% 96%, 0% 100%) !important; clip-path: polygon(0% 0%, 100% 4%, 100% 96%, 0% 100%) !important; } .brands-header h2 { font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 10px !important; } .accent-line-center { display: none !important; } .brands-header p { font-size: 13px !important; line-height: 1.4 !important; margin-top: 10px !important; } .brands-slider { margin-top: 20px !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%) !important; } .brands-track { width: calc(160px * 18) !important; animation: scrollBrandsMobile 30s linear infinite !important; } .brand-slide { width: 140px !important; height: 45px !important; margin: 0 10px !important; } .brand-slide img { border-radius: 50px !important; } @keyframes scrollBrandsMobile { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-160px * 9)); } } @keyframes scrollProductsMobile { 0% { transform: translateX(0); } 100% { transform: translateX(-1800px); } } /* 5. Seção de Ofertas Verticais com Título Customizado */ .offers-banner-section { background-color: #ffffff !important; padding: 30px 0 40px 0 !important; } .offers-banner-section .section-header { display: none !important; } .offer-duplicate { display: none !important; } .offers-slider { overflow: visible !important; } .offers-track { display: flex !important; flex-direction: column !important; animation: none !important; gap: 12px !important; padding: 0 15px !important; width: 100% !important; box-sizing: border-box !important; } .offer-slide { display: block !important; width: 100% !important; margin: 0 !important; } .offer-slide img { width: 100% !important; height: auto !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } /* 5.6. Seção de Troca de Fluido de Câmbio (Mobile) */ .cambio-section { padding: 40px 15px 60px 15px !important; background: linear-gradient(180deg, #fffaf6 0%, #ffe6d5 100%) !important; position: relative !important; overflow: hidden !important; } .cambio-section::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-image: url('../assets/logo.webp') !important; background-position: bottom -40px right -40px !important; background-repeat: no-repeat !important; background-size: 85% auto !important; opacity: 0.08 !important; pointer-events: none !important; z-index: 1 !important; } .cambio-container { display: block !important; position: relative !important; z-index: 2 !important; } .cambio-image { float: left !important; width: 42% !important; max-width: 150px !important; margin: 0 15px 10px 0 !important; } .cambio-image img { width: 100% !important; height: auto !important; } .cambio-content { display: block !important; } .cambio-content h2 { font-size: 20px !important; color: #001a65 !important; font-weight: 800 !important; margin-bottom: 12px !important; line-height: 1.3 !important; } .cambio-desc { font-size: 13.5px !important; color: #001a65 !important; line-height: 1.6 !important; margin-bottom: 25px !important; } .cambio-section .highlight-box { clear: both !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; background-color: #2b3b64 !important; border-radius: 12px !important; padding: 25px 20px 35px 20px !important; margin: 30px 0 0 0 !important; gap: 15px !important; } .cambio-section .highlight-icon { background-color: #df580a !important; color: #ffffff !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } .cambio-section .highlight-text p { color: #ffffff !important; font-size: 13.5px !important; line-height: 1.6 !important; margin: 0 !important; } .btn-cambio-cta { display: flex !important; align-items: center !important; justify-content: center !important; background-color: #df580a !important; color: #ffffff !important; border-radius: 50px !important; padding: 15px 30px !important; font-weight: 700 !important; font-size: 16px !important; text-transform: uppercase !important; width: fit-content !important; margin: -25px auto 0 auto !important; position: relative !important; z-index: 10 !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; } /* 6. Seção de Serviços Verticais com Título Customizado */ .services-section { background: #fcece6 !important; padding: 20px 0 40px 0 !important; } .services-section .section-header { background-color: #ff6600 !important; padding: 30px 20px !important; margin-bottom: 25px !important; border-radius: 0 !important; text-align: center !important; } .services-section .section-header h2 { display: block !important; font-size: 22px !important; color: #ffffff !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 0 !important; } .services-section .section-header h2::after { content: "" !important; display: block !important; width: 50px !important; height: 2px !important; background-color: #ffffff !important; margin: 15px auto !important; } .services-section .section-header p { display: block !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.5 !important; margin: 0 !important; } .services-grid { display: flex !important; flex-direction: column !important; gap: 15px !important; padding: 0 15px !important; margin-top: 0 !important; } .service-card { background-color: #ffffff !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; overflow: hidden !important; border: none !important; } .service-image { height: 180px !important; } .service-content { padding: 15px 15px 15px 15px !important; } .service-card .price-prefix { margin-top: 5px !important; } .service-card .price-badge { font-size: 22px !important; padding: 8px 20px !important; margin-bottom: 15px !important; } .service-card .service-items { gap: 8px !important; margin-bottom: 20px !important; } .service-card .service-item { font-size: 14px !important; } .service-card .btn-whatsapp { width: 100% !important; margin-bottom: 10px !important; padding: 10px 20px !important; font-size: 13px !important; border-radius: 4px !important; background-color: #25D366 !important; box-shadow: none !important; } /* 7. Localizador de Lojas Responsivo */ .lojas-section { padding: 30px 0 !important; background: #ffffff !important; } .lojas-section::before { display: none !important; } .lojas-facade-img { max-width: 90% !important; margin: 0 auto !important; display: block !important; } .lojas-content-grid { grid-template-columns: 1fr !important; margin-top: 20px !important; margin-bottom: 20px !important; gap: 20px !important; } .lojas-col { padding: 20px !important; border: 1px solid #eee !important; border-radius: 8px !important; } .lojas-col h2 { font-size: 20px !important; color: #001a65 !important; font-weight: 800 !important; margin-bottom: 15px !important; line-height: 1.3 !important; } .lojas-col-left { border-width: 1px !important; text-align: center !important; } .lojas-col-left h2 { text-align: center !important; } .lojas-col-left .lojas-text { text-align: center !important; } .lojas-col-left .lojas-text p { text-align: center !important; font-size: 14px !important; line-height: 1.6 !important; } .lojas-col-right { border-width: 1px !important; text-align: left !important; align-items: flex-start !important; } .lojas-col-right h2 { text-align: left !important; } .lojas-list-new { align-self: flex-start !important; text-align: left !important; margin: 0 0 20px 0 !important; padding-left: 0 !important; } .lojas-list-new li { font-size: 14px !important; justify-content: flex-start !important; text-align: left !important; } .lojas-col-right .btn-fale-apex { width: fit-content !important; background-color: #ff6600 !important; color: #ffffff !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; border-radius: 30px !important; font-weight: 700 !important; margin-top: 15px !important; align-self: flex-start !important; padding: 12px 25px !important; } .lojas-map-wrapper iframe { height: 250px !important; } /* 8. Botões Flutuantes Duplos Responsivos */ .float-btn { width: 45px !important; height: 45px !important; font-size: 22px !important; bottom: 15px !important; } .float-phone { left: 15px !important; } .float-wa { right: 15px !important; } /* 9. Rodapé */ .main-footer { padding-top: 40px !important; } .footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; margin-bottom: 40px !important; padding: 0 15px !important; } .footer-col { text-align: left !important; } .footer-col h4 { font-size: 16px !important; margin-bottom: 15px !important; }}/* --- Mobile Header Icons Surgical Override --- */html { scroll-padding-top: 70px !important;}.mobile-header-nav { display: none;}@media (max-width: 1024px) { .mobile-header-nav { display: flex !important; align-items: center !important; gap: 10px !important; margin-left: auto !important; margin-right: 5px !important; } .mobile-nav-icon-link { color: #001a65 !important; /* Dark blue theme color */ font-size: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background-color: rgba(0, 26, 101, 0.06) !important; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important; text-decoration: none !important; } .mobile-nav-icon-link:active { background-color: var(--secondary-color) !important; color: #ffffff !important; transform: scale(0.9) !important; } /* Hide the old toggle button, old map/store buttons, and nav links list on mobile under any state */ .mobile-menu-toggle, .mobile-map-btn, .mobile-store-btn, .main-header.scrolled .mobile-menu-toggle, .main-header.scrolled .mobile-map-btn, .main-header.scrolled .mobile-store-btn, .nav-links, .main-nav { display: none !important; }}/* Hover efeito para localidades do cabecalho */.header-loja { transition: color 0.3s ease; cursor: default;}.header-loja:hover { color: #df580a;}